{"version":3,"file":"CodeBlock.B5qUeh4V.mjs","names":["getSandpackCssText"],"sources":["https:/framerusercontent.com/modules/pVk4QsoHxASnVtUBp6jr/7eCYIL3dnkBSjjSduYQU/CodeBlock.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{motion}from\"framer-motion\";import{getSandpackCssText,SandpackCodeEditor,SandpackLayout,SandpackProvider}from\"https://framerusercontent.com/modules/SWAtenub3goqbKHfvwGg/9qswdehoMhlafVrcNUjB/codesandbox_sandpack_react.js\";import{addPropertyControls,ControlType,withCSS}from\"framer\";import{supportedLanguages}from\"https://framerusercontent.com/modules/19BkzxjVBT3VP0Ykl3DY/RGqU3tpLfAWuPhUCcIcu/types.js\";import{useLanguageAsync}from\"https://framerusercontent.com/modules/DyzTKdNCsRH8nvz08sNT/FhxKfBfHDeWuioZyUwlM/useLanguageAsync.js\";import{getFileExtensions,titleCase,useBorder,useIsOnCanvas,usePadding,useRadius}from\"https://framerusercontent.com/modules/IdMJ4CymCWCh4cOBkZlb/JaBD733GrAZQYolmaTcm/utils.js\";import{darkThemeVariables,getVariablesForTheme,getVariableTheme,lightThemeVariables,themeKeys}from\"https://framerusercontent.com/modules/HdJmYu90NFzknVhsFw9C/YPaaRBOrJRLoPp3owbzS/theming.js\";const DEFAULT_CODE=`// Paste a code snippet\nimport { motion } from \"framer-motion\";\n\nfunction Component() {\n    return (\n        <motion.div\n            transition={{ ease: \"linear\" }}\n            animate={{ rotate: 360, scale: 2 }}\n        />\n    );\n}`;const wrapperClassName=\"framer-cb\";const css=[`\n.${wrapperClassName} .sp-pre-placeholder {\n    padding: var(--cb-padding) !important;\n    padding-left: calc(var(--cb-padding) + var(--sp-space-1, 0)) !important;\n    margin: 0 !important;\n    width: max-content;\n}\n    `,`\n.${wrapperClassName} .cm-scroller {\n    display: unset !important;\n    padding: 0 !important;\n}\n    `,`\n.${wrapperClassName} .cm-content {\n    padding: var(--cb-padding) !important;\n    width: max-content;\n}\n    `,`\n.${wrapperClassName} .sp-wrapper {\n    color-scheme: var(--cb-color-scheme, inherit);\n}\n    `,// This override rules to fix font-size on mobile safari.\n// .cm-content is rendered with js enabled.\n// .sp-pre-placeholder is rendered in no-js mode (SSG output).\n// Selectors need high enough specificity to win against even breakpoint-specific font-sizes\n`\n@media screen and (max-width: 768px) {\n    @supports (-webkit-overflow-scrolling: touch) {\n        .framer-cb .cb-code-editor .cm-content,\n        .framer-cb .cb-code-editor .sp-pre-placeholder {\n            font-size: var(--sp-font-size, inherit);\n            -webkit-text-size-adjust: 100%;\n        }\n    }\n}\n`,// Override the 50% height on small screens\n`\n@media screen and (max-width: 768px) {\n    .${wrapperClassName} .sp-editor-viewer.sp-stack {\n        height: 100%;\n    }\n}\n`,// Light mode\n`\n.${wrapperClassName} {\n    ${lightThemeVariables}\n}\n    `,`\nbody[data-framer-theme=\"dark\"] .${wrapperClassName} {\n    ${darkThemeVariables}\n}\n    `,`\n@media (prefers-color-scheme: dark) {\n    body:not([data-framer-theme]) .${wrapperClassName} {\n        ${darkThemeVariables}\n    }\n}\n    `,`\n@supports not (color: color(display-p3 1 1 1)) {\n    :root {\n        --cb-custom-background: var(--cb-background-rgb)\n    }\n}\n    `].map(rule=>rule.trim());/**\n * Code Block\n *\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight any\n *\n * @framerDisableUnlink\n *\n * @framerIntrinsicWidth 500\n * @framerIntrinsicHeight 200\n *\n * @framerComponentPresetProps borderRadius, border, font, themeMode, theme, lightTheme, darkTheme, background, padding\n */const CodeBlock=withCSS(function CodeBlock(props){const{code,themeMode,theme,lightTheme,darkTheme,style,language,font,border,background}=props;const variableTheme=getVariableTheme(font);const lightThemeVariables=getVariablesForTheme(themeMode===\"Dynamic\"?lightTheme:theme,background,\"light\");const darkThemeVariables=getVariablesForTheme(themeMode===\"Dynamic\"?darkTheme:theme,background,\"dark\");// async version\nconst additionalLanguage=useLanguageAsync(language);// sync version\n// const additionalLanguage = getLanguage(language)\nconst extension=getFileExtensions(language)[0];const onCanvas=useIsOnCanvas();const borderStyles=useBorder(border||{},false);const borderRadius=useRadius(props);const hasBorderRadius=borderRadius!==\"0px 0px 0px 0px\"&&borderRadius!==\"0px\";const fileName=`example.${extension}`;const padding=usePadding(props);return /*#__PURE__*/_jsx(motion.div,{className:wrapperClassName,whileHover:\"visible\",style:{...lightThemeVariables,...darkThemeVariables,position:\"relative\",width:\"100%\",height:\"100%\"},children:/*#__PURE__*/_jsx(SandpackProvider,{options:{classes:{\"sp-code-editor\":\"cb-code-editor\"}},theme:variableTheme,files:{[fileName]:code},customSetup:{entry:fileName},style:{height:\"100%\"},children:/*#__PURE__*/_jsxs(SandpackLayout,{style:{height:\"100%\",// make sure the codeblock doesnt grow beyond\n// the height of its contents\n\"--sp-layout-height\":\"100%\",// set the variables for padding we use in the overrides\n\"--cb-padding\":`${padding}`,...borderStyles,// match editor background color to make borders visually blend with the editor:\nbackgroundColor:\"var(--sp-colors-surface1)\",borderRadius,transform:// Safari sometimes struggles to render border-radius:\n// - on the canvas when changing from 0 to any other value\n// - or when rendering an iframe\nhasBorderRadius&&onCanvas?\"translateZ(0.000001px)\":\"unset\",overflow:\"hidden\"},children:[/*#__PURE__*/_jsx(SandpackCodeEditor,{style:{letterSpacing:font.letterSpacing,fontStyle:font.fontStyle,fontWeight:font.fontWeight},readOnly:true,showReadOnly:false,additionalLanguages:additionalLanguage?[additionalLanguage]:undefined}),/*#__PURE__*/_jsx(SandpackStyles,{})]})})});},css,\"framer-lib-codeblock\");export default CodeBlock;function SandpackStyles(){return /*#__PURE__*/_jsx(\"div\",{style:{display:\"contents\"},// This makes it so we load the CSS only once. If we were to SSR it per code-block, we could end up with multiple times the big Sandpack CSS on one page, which is more wasteful than just hoisting to the <head>. It gets de-duped during SSG.\n\"data-framer-css-ssr\":true,suppressHydrationWarning:true,// We wrap it like this because during SSG the style tag will be moved to the <head>. But during CSR we need to render it again.\ndangerouslySetInnerHTML:{__html:\"<style>\"+getSandpackCssText()+\"</style>\"}});}const themeNames=themeKeys.map(titleCase);addPropertyControls(CodeBlock,{code:{type:ControlType.String,title:\"Code\",displayTextArea:true,defaultValue:DEFAULT_CODE},themeMode:{type:ControlType.Enum,title:\"Theme\",displaySegmentedControl:true,options:[\"Static\",\"Dynamic\"],defaultValue:\"Static\"},theme:{type:ControlType.Enum,title:\" \",options:[...themeKeys],optionTitles:themeNames,defaultValue:\"framerDark\",hidden:({themeMode})=>themeMode!==\"Static\"},lightTheme:{type:ControlType.Enum,title:\"Light\",options:[...themeKeys],optionTitles:themeNames,defaultValue:\"framerLight\",hidden:({themeMode})=>themeMode!==\"Dynamic\"},darkTheme:{type:ControlType.Enum,title:\"Dark\",options:[...themeKeys],optionTitles:themeNames,defaultValue:\"framerDark\",hidden:({themeMode})=>themeMode!==\"Dynamic\"},language:{type:ControlType.Enum,title:\"Language\",options:[...supportedLanguages],defaultValue:\"JSX\"},font:{// @ts-ignore: Internal API\ntype:ControlType.Font,controls:\"extended\",displayFontSize:true,displayTextAlignment:false,defaultFontType:\"monospace\",defaultValue:{fontSize:14,lineHeight:\"1.5em\"}},background:{title:\"Fill\",type:ControlType.Color,optional:true},border:{type:ControlType.Border,optional:true},borderRadius:{title:\"Radius\",type:ControlType.FusedNumber,toggleKey:\"isMixedBorderRadius\",toggleTitles:[\"Radius\",\"Radius per corner\"],valueKeys:[\"topLeftRadius\",\"topRightRadius\",\"bottomRightRadius\",\"bottomLeftRadius\"],valueLabels:[\"TL\",\"TR\",\"BR\",\"BL\"],min:0,defaultValue:15},padding:{title:\"Padding\",type:ControlType.FusedNumber,toggleKey:\"paddingPerSide\",toggleTitles:[\"Padding\",\"Padding per side\"],valueKeys:[\"paddingTop\",\"paddingRight\",\"paddingBottom\",\"paddingLeft\"],valueLabels:[\"T\",\"R\",\"B\",\"L\"],min:0,defaultValue:30}});CodeBlock.displayName=\"Code Block\";\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"CodeBlock\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"fixed\",\"framerIntrinsicHeight\":\"200\",\"framerContractVersion\":\"1\",\"framerIntrinsicWidth\":\"500\",\"framerSupportedLayoutHeight\":\"any\",\"framerComponentPresetProps\":\"borderRadius, border, font, themeMode, theme, lightTheme, darkTheme, background, padding\",\"framerDisableUnlink\":\"*\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./CodeBlock.map"],"mappings":"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"}