{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/HdJmYu90NFzknVhsFw9C/MDI6YFyMfuxuxcY2EeV6/theming.js", "ssg:https://framerusercontent.com/modules/pVk4QsoHxASnVtUBp6jr/TbhpORLndv1iOkZzyo83/CodeBlock.js"],
  "sourcesContent": ["import{amethyst,aquaBlue,atomDark,cobalt2,cyberpunk,dracula,freeCodeCampDark,githubLight,levelUp,monokaiPro,neoCyan,nightOwl,sandpackDark}from\"https://framerusercontent.com/modules/c4BjG1nmVImY1EzTuV13/OqRStXQUJv4l4u3XtQrx/codesandbox_sandpack_themes.js\";import{isObject,isDarkColor}from\"https://framerusercontent.com/modules/IdMJ4CymCWCh4cOBkZlb/RXSqswLIbuViBOVW1keE/utils.js\";const magic={colors:{surface1:\"#f6f6f8\",surface2:\"#f6f6f8\",surface3:\"#f6f6f8\",clickable:\"#808080\",base:\"#323232\",disabled:\"#C5C5C5\",hover:\"#4D4D4D\",accent:\"#ffa600\",error:\"#ff453a\",errorSurface:\"#ffeceb\"},syntax:{plain:\"#151515\",comment:{color:\"#cacacd\",fontStyle:\"italic\"},keyword:\"#ffa600\",tag:\"#ff9a4d\",punctuation:\"#ffb3b3\",definition:\"#ff6f00\",property:\"#9900ff\",static:\"#FF453A\",string:\"#f53524\"},font:{body:'\"Roboto Mono\", monospace',mono:'\"Roboto Mono\", monospace',size:\"14px\",lineHeight:\"24px\"}};const atomLight={colors:{surface1:\"#fafafa\"},syntax:{plain:\"#383a42\",comment:{color:\"#a0a1a7\",fontStyle:\"italic\"},keyword:\"#a626a4\",tag:\"#e45649\",punctuation:\"#383a42\",definition:\"#c18401\",property:\"#4078f2\",static:\"#986801\",string:\"#50a14f\"}};const framerLight={colors:{surface1:\"#fafafa\",surface2:\"#eeeeee\",surface3:\"#f3f3f3\",clickable:\"#808080\",base:\"#323232\",disabled:\"#c5c5c5\",hover:\"#4d4d4d\",accent:\"#0099ff\",error:\"#ff3366\",errorSurface:\"#ffe0e8\"},syntax:{plain:\"#666666\",comment:{color:\"#bbbbbb\",fontStyle:\"italic\"},keyword:\"#0099ff\",tag:\"#0099ff\",punctuation:\"#bbbbbb\",definition:\"#FFAA00\",property:\"#33cccc\",static:\"#ff8866\",string:\"#8855ff\"}};const framerDark={colors:{surface1:\"#161820\",surface2:\"#252525\",surface3:\"#2f2f2f\",clickable:\"#999999\",base:\"#d92121\",disabled:\"#4d4d4d\",hover:\"#c5c5c5\",accent:\"#0099ff\",error:\"#ff3366\",errorSurface:\"#ffe0e8\"},syntax:{plain:\"#eeeeee\",comment:{color:\"#666666\",fontStyle:\"italic\"},keyword:\"#00BBFF\",tag:\"#00BBFF\",punctuation:\"#999999\",definition:\"#ffcc66\",property:\"#77dddd\",static:\"#ff8866\",string:\"#bb88ff\"}};const ayuLight={colors:{surface1:\"#fafafa\"},syntax:{comment:{color:\"aaaeb1\",fontStyle:\"italic\"},definition:\"#3b9ee6\",keyword:\"#fa8e3e\",plain:\"#5c6166\",property:\"#f2ae49\",punctuation:\"#5c6167\",static:\"#a37acc\",string:\"#87b300\",tag:\"#56b4d5\"}};const ayuDark={colors:{surface1:\"#0c1017\"},syntax:{comment:{color:\"#646a72\",fontStyle:\"italic\"},definition:\"#5ac2ff\",keyword:\"#ff9040\",plain:\"#bfbdb6\",property:\"#ffb454\",punctuation:\"#bfbdb6\",static:\"#d2a6ff\",string:\"#80d962\",tag:\"#3bbae7\"}};const sandpackLight={colors:{surface1:\"#ffffff\",surface2:\"#EFEFEF\",surface3:\"#F3F3F3\",disabled:\"#C5C5C5\",base:\"#323232\",clickable:\"#808080\",hover:\"#4D4D4D\",accent:\"#3973E0\",error:\"#EA3323\",errorSurface:\"#FCF1F0\",warning:\"#6A4516\",warningSurface:\"#FEF2C0\"},syntax:{plain:\"#151515\",comment:{color:\"#999\",fontStyle:\"italic\"},keyword:\"#7C5AE3\",tag:\"#0971F1\",punctuation:\"#3B3B3B\",definition:\"#85A600\",property:\"#3B3B3B\",static:\"#3B3B3B\",string:\"#2E6BD0\"}};const githubDark={colors:{...framerDark.colors,surface1:\"#0d1117\"},syntax:{comment:{color:\"#8b949e\",fontStyle:\"italic\"},definition:\"#d2a8ff\",keyword:\"#ff7b72\",plain:\"#e6edf3\",property:\"#79c0ff\",punctuation:\"#e6edf3\",static:\"#7ee787\",string:\"#a5d6ff\",tag:\"#7ee787\"}};// A bit verbose but helps keep our themes in check\nexport const themeKeys=[\"amethyst\",\"aquaBlue\",\"atomDark\",\"atomLight\",\"ayuDark\",\"ayuLight\",\"cobalt2\",\"cyberpunk\",\"dracula\",\"framerDark\",\"framerLight\",\"freeCodeCamp\",\"githubDark\",\"githubLight\",\"levelUp\",\"monokaiPro\",\"magic\",\"neoCyan\",\"nightOwl\",\"sandpackDark\",\"sandpackLight\",];export const themes={amethyst,aquaBlue,atomDark,atomLight,ayuDark,ayuLight,cobalt2,cyberpunk,dracula,framerDark,framerLight,freeCodeCamp:freeCodeCampDark,githubDark,githubLight,levelUp,monokaiPro,magic,neoCyan,nightOwl,sandpackDark,sandpackLight};export const lightThemeVariables=`\n/* Colors */\n--cb-colors-surface1: var(--cb-colors-surface1-light);\n--cb-colors-surface2: var(--cb-colors-surface2-light);\n--cb-colors-surface3: var(--cb-colors-surface3-light);\n--cb-colors-disabled: var(--cb-colors-disabled-light);\n--cb-colors-base: var(--cb-colors-base-light);\n--cb-colors-clickable: var(--cb-colors-clickable-light);\n--cb-colors-hover: var(--cb-colors-hover-light);\n--cb-colors-accent: var(--cb-colors-accent-light);\n--cb-colors-error: var(--cb-colors-error-light);\n--cb-colors-errorSurface: var(--cb-colors-errorSurface-light);\n--cb-colors-warning: var(--cb-colors-warning-light);\n--cb-colors-warningSurface: var(--cb-colors-warningSurface-light);\n\n/* Syntax */\n--cb-syntax-color-plain: var(--cb-syntax-color-plain-light);\n--cb-syntax-color-comment: var(--cb-syntax-color-comment-light);\n--cb-syntax-color-keyword: var(--cb-syntax-color-keyword-light);\n--cb-syntax-color-definition: var(--cb-syntax-color-definition-light);\n--cb-syntax-color-punctuation: var(--cb-syntax-color-punctuation-light);\n--cb-syntax-color-property: var(--cb-syntax-color-property-light);\n--cb-syntax-color-tag: var(--cb-syntax-color-tag-light);\n--cb-syntax-color-static: var(--cb-syntax-color-static-light);\n--cb-syntax-color-string: var(--cb-syntax-color-string-light);\n--cb-syntax-fontStyle-plain: var(--cb-syntax-fontStyle-plain-light);\n--cb-syntax-fontStyle-comment: var(--cb-syntax-fontStyle-comment-light);\n--cb-syntax-fontStyle-keyword: var(--cb-syntax-fontStyle-keyword-light);\n--cb-syntax-fontStyle-definition: var(--cb-syntax-fontStyle-definition-light);\n--cb-syntax-fontStyle-punctuation: var(--cb-syntax-fontStyle-punctuation-light);\n--cb-syntax-fontStyle-property: var(--cb-syntax-fontStyle-property-light);\n--cb-syntax-fontStyle-tag: var(--cb-syntax-fontStyle-tag-light);\n--cb-syntax-fontStyle-static: var(--cb-syntax-fontStyle-static-light);\n--cb-syntax-fontStyle-string: var(--cb-syntax-fontStyle-string-light);\n\n/* Other */\n--cb-color-scheme: var(--cb-color-scheme-light);\n`;export const darkThemeVariables=`\n/* Colors */\n--cb-colors-surface1: var(--cb-colors-surface1-dark);\n--cb-colors-surface2: var(--cb-colors-surface2-dark);\n--cb-colors-surface3: var(--cb-colors-surface3-dark);\n--cb-colors-disabled: var(--cb-colors-disabled-dark);\n--cb-colors-base: var(--cb-colors-base-dark);\n--cb-colors-clickable: var(--cb-colors-clickable-dark);\n--cb-colors-hover: var(--cb-colors-hover-dark);\n--cb-colors-accent: var(--cb-colors-accent-dark);\n--cb-colors-error: var(--cb-colors-error-dark);\n--cb-colors-errorSurface: var(--cb-colors-errorSurface-dark);\n--cb-colors-warning: var(--cb-colors-warning-dark);\n--cb-colors-warningSurface: var(--cb-colors-warningSurface-dark);\n\n/* Syntax */\n--cb-syntax-color-plain: var(--cb-syntax-color-plain-dark);\n--cb-syntax-color-comment: var(--cb-syntax-color-comment-dark);\n--cb-syntax-color-keyword: var(--cb-syntax-color-keyword-dark);\n--cb-syntax-color-definition: var(--cb-syntax-color-definition-dark);\n--cb-syntax-color-punctuation: var(--cb-syntax-color-punctuation-dark);\n--cb-syntax-color-property: var(--cb-syntax-color-property-dark);\n--cb-syntax-color-tag: var(--cb-syntax-color-tag-dark);\n--cb-syntax-color-static: var(--cb-syntax-color-static-dark);\n--cb-syntax-color-string: var(--cb-syntax-color-string-dark);\n--cb-syntax-fontStyle-plain: var(--cb-syntax-fontStyle-plain-dark);\n--cb-syntax-fontStyle-comment: var(--cb-syntax-fontStyle-comment-dark);\n--cb-syntax-fontStyle-keyword: var(--cb-syntax-fontStyle-keyword-dark);\n--cb-syntax-fontStyle-definition: var(--cb-syntax-fontStyle-definition-dark);\n--cb-syntax-fontStyle-punctuation: var(--cb-syntax-fontStyle-punctuation-dark);\n--cb-syntax-fontStyle-property: var(--cb-syntax-fontStyle-property-dark);\n--cb-syntax-fontStyle-tag: var(--cb-syntax-fontStyle-tag-dark);\n--cb-syntax-fontStyle-static: var(--cb-syntax-fontStyle-static-dark);\n--cb-syntax-fontStyle-string: var(--cb-syntax-fontStyle-string-dark);\n\n/* Other */\n--cb-color-scheme: var(--cb-color-scheme-dark);\n`;export function getVariableTheme(font){var _fontFamily;return{colors:{surface1:\"var(--cb-colors-surface1)\",surface2:\"var(--cb-colors-surface2)\",surface3:\"var(--cb-colors-surface3)\",disabled:\"var(--cb-colors-disabled)\",base:\"var(--cb-colors-base)\",clickable:\"var(--cb-colors-clickable)\",hover:\"var(--cb-colors-hover)\",accent:\"var(--cb-colors-accent)\",error:\"var(--cb-colors-error)\",errorSurface:\"var(--cb-colors-errorSurface)\",warning:\"var(--cb-colors-warning)\",warningSurface:\"var(--cb-colors-warningSurface)\"},syntax:{plain:{color:\"var(--cb-syntax-color-plain)\",fontStyle:\"var(--cb-syntax-fontStyle-plain)\",fontWeight:font.fontWeight},comment:{color:\"var(--cb-syntax-color-comment)\",fontStyle:\"var(--cb-syntax-fontStyle-comment)\",fontWeight:font.fontWeight},keyword:{color:\"var(--cb-syntax-color-keyword)\",fontStyle:\"var(--cb-syntax-fontStyle-keyword)\",fontWeight:font.fontWeight},definition:{color:\"var(--cb-syntax-color-definition)\",fontStyle:\"var(--cb-syntax-fontStyle-definition)\",fontWeight:font.fontWeight},punctuation:{color:\"var(--cb-syntax-color-punctuation)\",fontStyle:\"var(--cb-syntax-fontStyle-punctuation)\",fontWeight:font.fontWeight},property:{color:\"var(--cb-syntax-color-property)\",fontStyle:\"var(--cb-syntax-fontStyle-property)\",fontWeight:font.fontWeight},tag:{color:\"var(--cb-syntax-color-tag)\",fontStyle:\"var(--cb-syntax-fontStyle-tag)\",fontWeight:font.fontWeight},static:{color:\"var(--cb-syntax-color-static)\",fontStyle:\"var(--cb-syntax-fontStyle-static)\",fontWeight:font.fontWeight},string:{color:\"var(--cb-syntax-color-string)\",fontStyle:\"var(--cb-syntax-fontStyle-string)\",fontWeight:font.fontWeight}},font:{body:\"sans-serif\",mono:(_fontFamily=font.fontFamily)!==null&&_fontFamily!==void 0?_fontFamily:\"monospace\",size:font.fontSize,lineHeight:font.lineHeight}};}export function getVariablesForTheme(theme,background,mode){const result={};const{colors,syntax}=themes[theme]||{};// Collect all colors and turn them into CSS variables.\nif(isObject(colors)){for(const name in colors){const value=colors[name];result[`--cb-colors-${name}-${mode}`]=value;}}// Collect all syntax colors and turn them into CSS variables.\nif(isObject(syntax)){for(const name1 in syntax){const value1=syntax[name1];if(isObject(value1)){for(const style in value1){result[`--cb-syntax-${style}-${name1}-${mode}`]=value1[style];}}else{result[`--cb-syntax-color-${name1}-${mode}`]=value1;}}}// Override the background color.\nif(background){result[`--cb-colors-surface1-${mode}`]=background;}else{background=result[`--cb-colors-surface1-${mode}`];}// This is important to show scrollbars and selections with the correct color.\nresult[`--cb-color-scheme-${mode}`]=isDarkColor(background)?\"dark\":\"light\";return result;}\nexport const __FramerMetadata__ = {\"exports\":{\"getVariablesForTheme\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"themeKeys\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"getVariableTheme\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"lightThemeVariables\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"themes\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"ThemeKeys\":{\"type\":\"tsType\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"darkThemeVariables\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./theming.map", "import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import{motion}from\"framer-motion\";import{getSandpackCssText,SandpackCodeEditor,SandpackLayout,SandpackProvider}from\"https://framerusercontent.com/modules/SWAtenub3goqbKHfvwGg/SGdoMClxnsCb2h0GRQ48/codesandbox_sandpack_react.js\";import{addPropertyControls,ControlType,withCSS}from\"framer\";import{Browser}from\"https://framerusercontent.com/modules/wOI0XDWuPNeaYuatKp4b/ezOdeUpHBrE7fwL9evTL/browser.js\";import{supportedLanguages}from\"https://framerusercontent.com/modules/19BkzxjVBT3VP0Ykl3DY/Ca7pJ6oGfAIcZSScMdTx/types.js\";import{useLanguageAsync}from\"https://framerusercontent.com/modules/DyzTKdNCsRH8nvz08sNT/dJhQ3yTSKg9tQmEoIrL8/useLanguageAsync.js\";import{getFileExtensions,titleCase,useBorder,useIsOnCanvas,usePadding,useRadius}from\"https://framerusercontent.com/modules/IdMJ4CymCWCh4cOBkZlb/RXSqswLIbuViBOVW1keE/utils.js\";import{darkThemeVariables,getVariablesForTheme,getVariableTheme,lightThemeVariables,themeKeys}from\"https://framerusercontent.com/modules/HdJmYu90NFzknVhsFw9C/MDI6YFyMfuxuxcY2EeV6/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    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.cm-readonly is rendered with js enabled\n// .sp-pre-placeholder is rendered in no-js mode (SSG output)\n`\n@media screen and (max-width: 768px) {\n    @supports (-webkit-overflow-scrolling: touch) {\n        .cb-code-editor .cm-content.cm-readonly,\n        .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    `,].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__*/ _jsxs(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__*/ _jsx(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,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},readOnly:true,showReadOnly:false,additionalLanguages:additionalLanguage?[additionalLanguage]:undefined})})}),/*#__PURE__*/ _jsx(SandpackStyles,{})]});},css);export default CodeBlock;function SandpackStyles(){return /*#__PURE__*/ _jsx(_Fragment,{children:!Browser.isBrowser()&&/*#__PURE__*/ _jsx(\"style\",{\"data-framer-css-ssr\":true,dangerouslySetInnerHTML:{__html:getSandpackCssText()}})});}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:{buttonTitle:\"Options\",type:ControlType.Object,optional:true,controls:{borderColor:{type:ControlType.Color,title:\"Border\",defaultValue:\"#eee\"},borderWidth:{title:\"Width\",type:ControlType.FusedNumber,toggleKey:\"isMixedBorderWidth\",toggleTitles:[\"Border\",\"Border per side\"],valueKeys:[\"borderWidthTop\",\"borderWidthRight\",\"borderWidthBottom\",\"borderWidthLeft\",],valueLabels:[\"T\",\"R\",\"B\",\"L\"],min:0,defaultValue:1},borderStyle:{title:\"Style\",type:ControlType.Enum,options:[\"solid\",\"dashed\",\"dotted\",\"double\"],optionTitles:[\"Solid\",\"Dashed\",\"Dotted\",\"double\"],defaultValue:\"solid\"}}},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\":{\"framerDisableUnlink\":\"*\",\"framerComponentPresetProps\":\"borderRadius, border, font, themeMode, theme, lightTheme, darkTheme, background, padding\",\"framerIntrinsicWidth\":\"500\",\"framerSupportedLayoutWidth\":\"fixed\",\"framerIntrinsicHeight\":\"200\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"any\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}"],
  "mappings": "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",
  "names": ["magic", "atomLight", "framerLight", "framerDark", "ayuLight", "ayuDark", "sandpackLight", "githubDark", "themeKeys", "themes", "amethyst", "aquaBlue", "atomDark", "cobalt2", "cyberpunk", "dracula", "freeCodeCampDark", "githubLight", "levelUp", "monokaiPro", "neoCyan", "nightOwl", "sandpackDark", "lightThemeVariables", "darkThemeVariables", "getVariableTheme", "font", "_fontFamily", "getVariablesForTheme", "theme", "background", "mode", "result", "colors", "syntax", "isObject", "name", "value", "name1", "value1", "style", "isDarkColor", "DEFAULT_CODE", "wrapperClassName", "css", "lightThemeVariables", "darkThemeVariables", "rule", "CodeBlock", "withCSS", "props", "code", "themeMode", "theme", "lightTheme", "darkTheme", "style", "language", "font", "border", "background", "variableTheme", "getVariableTheme", "getVariablesForTheme", "additionalLanguage", "useLanguageAsync", "extension", "getFileExtensions", "onCanvas", "useIsOnCanvas", "borderStyles", "useBorder", "borderRadius", "useRadius", "hasBorderRadius", "fileName", "padding", "usePadding", "u", "motion", "p", "SandpackProvider", "SandpackLayout", "SandpackCodeEditor", "SandpackStyles", "CodeBlock_default", "l", "Browser", "getCssText", "themeNames", "themeKeys", "titleCase", "addPropertyControls", "ControlType", "supportedLanguages"]
}