{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/r0I4RUQH1znWwwFQGBd4/2dhDaqByUwIlv4VlsKGo/ThemeVariants.js", "ssg:https://framer.com/m/Shared-8iGD.js@eDj1MxSfupkYrrIeXQ6b"],
  "sourcesContent": ["import{jsx as _jsx}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{useState,useEffect,cloneElement}from\"react\";import{EmptyState}from\"https://framer.com/m/Shared-8iGD.js@eDj1MxSfupkYrrIeXQ6b\";const THEME_ATTRIBUTE=\"framestack-theme\";const SIGNAL_NAME=\"framestack-theme-changed\";/**\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n */export default function ThemeVariants(props){const[isDarkTheme,setIsDarkTheme]=useState(null);useEffect(()=>{const updateTheme=()=>{// For compatibility with the Theme Toggle component.\n// https://Framestack.co/components/theme-toggle\n// If the site does not have a theme toggle, the device theme will be used.\nconst currentToggleState=document.body.getAttribute(THEME_ATTRIBUTE);// Check if page has the theme toggle attribute.\nif(!currentToggleState||currentToggleState==\"deviceTheme\"){if(document.body.hasAttribute(\"data-framer-theme\")){setIsDarkTheme(document.body.getAttribute(\"data-framer-theme\")==\"dark\");}else{const mediaQuery=window.matchMedia(\"(prefers-color-scheme: dark)\");setIsDarkTheme(mediaQuery.matches);}}else{// Use device theme\nsetIsDarkTheme(currentToggleState==\"dark\")// light or dark\n;}};// Event listener for changes in the device theme\nconst osThemeChange=e=>{setIsDarkTheme(e.matches);};// Update the theme when the page loads\nupdateTheme();// Listen for theme changes made by the theme toggle component\nwindow.addEventListener(SIGNAL_NAME,updateTheme);// Listen for changes in the device theme\nconst mediaQuery=window.matchMedia(\"(prefers-color-scheme: dark)\");mediaQuery.addListener(osThemeChange);// Clean up the event listeners when the theme toggle component unmounts\nreturn()=>{window.removeEventListener(SIGNAL_NAME,updateTheme);mediaQuery.removeListener(osThemeChange);};},[]);// Before the theme has been determined, render nothing.\n// This prevents flashing while the page loads.\nif(isDarkTheme===null){return null;}// Empty state\nif(!props.light?.[0]||!props.dark?.[0]){return /*#__PURE__*/_jsx(EmptyState,{title:\"Add dark and light layers.\",subtitle:\"Use the properties panel on the right side to connect layers for dark and light theme.\"});}let layer=isDarkTheme?props.dark?.[0]:props.light?.[0];if(layer&&(props.style?.width||props.style?.height)){layer=/*#__PURE__*/cloneElement(layer,{style:{...layer.props.style,...props.style}});}if(!layer){return /*#__PURE__*/_jsx(\"div\",{style:{minWidth:100,minHeight:100}});}return layer;}ThemeVariants.displayName=\"Theme Variants\";addPropertyControls(ThemeVariants,{light:{type:ControlType.ComponentInstance,title:\"Light\"},dark:{type:ControlType.ComponentInstance,title:\"Dark\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ThemeVariants\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"any\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"any\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ThemeVariants.map", "import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{ControlType}from\"framer\";import{motion}from\"framer-motion\";export const borderPropertyControl=(hidden=null)=>({type:ControlType.Object,optional:true,hidden,controls:{color:{type:ControlType.Color,defaultValue:\"#222\"},width:{type:ControlType.FusedNumber,defaultValue:1,toggleKey:\"widthIsMixed\",toggleTitles:[\"All\",\"Individual\"],valueKeys:[\"widthTop\",\"widthRight\",\"widthBottom\",\"widthLeft\"],valueLabels:[\"T\",\"R\",\"B\",\"L\"],min:0},style:{type:ControlType.Enum,defaultValue:\"solid\",options:[\"solid\",\"dashed\",\"dotted\",\"double\"],optionTitles:[\"Solid\",\"Dashed\",\"Dotted\",\"Double\"]}}});export function Border({width,widthIsMixed,widthTop,widthRight,widthBottom,widthLeft,style,color,transition}){return /*#__PURE__*/_jsx(motion.div,{animate:{borderColor:color},style:{position:\"absolute\",inset:0,borderWidth:widthIsMixed?`${widthTop}px ${widthRight}px ${widthBottom}px ${widthLeft}px`:`${width}px`,borderStyle:style,borderRadius:\"inherit\",pointerEvents:\"none\"},initial:false,transition:transition});}export function EmptyState({title,subtitle,maxWidth=0}){return /*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",width:\"100%\",height:\"100%\",placeContent:\"center\",placeItems:\"center\",flexDirection:\"column\",gap:16,backgroundColor:\"rgba(136, 85, 255, 0.1)\",borderRadius:6,border:\"1px dashed rgb(136, 85, 255)\",color:\"rgb(136, 85, 255)\",fontSize:16,padding:20,minHeight:200,maxWidth:maxWidth||undefined},children:[/*#__PURE__*/_jsx(\"p\",{style:{margin:0,fontWeight:600,textAlign:\"center\"},children:title}),/*#__PURE__*/_jsx(\"p\",{style:{margin:0,opacity:.7,// maxWidth: 500,\nlineHeight:1.5,textAlign:\"center\"},children:subtitle})]});}EmptyState.displayName=\"Empty State\";\nexport const __FramerMetadata__ = {\"exports\":{\"borderPropertyControl\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"Border\":{\"type\":\"reactComponent\",\"name\":\"Border\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"EmptyState\":{\"type\":\"reactComponent\",\"name\":\"EmptyState\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Shared.map"],
  "mappings": "0KAAAA,ICAAC,IAAoiC,SAASC,EAAW,CAAC,MAAAC,EAAM,SAAAC,EAAS,SAAAC,EAAS,CAAC,EAAE,CAAC,OAAoBC,EAAM,MAAM,CAAC,MAAM,CAAC,QAAQ,OAAO,MAAM,OAAO,OAAO,OAAO,aAAa,SAAS,WAAW,SAAS,cAAc,SAAS,IAAI,GAAG,gBAAgB,0BAA0B,aAAa,EAAE,OAAO,+BAA+B,MAAM,oBAAoB,SAAS,GAAG,QAAQ,GAAG,UAAU,IAAI,SAASD,GAAU,MAAS,EAAE,SAAS,CAAcE,EAAK,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,WAAW,IAAI,UAAU,QAAQ,EAAE,SAASJ,CAAK,CAAC,EAAeI,EAAK,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,QAAQ,GAC/jD,WAAW,IAAI,UAAU,QAAQ,EAAE,SAASH,CAAQ,CAAC,CAAC,CAAC,CAAC,CAAE,CAACF,EAAW,YAAY,cDDiJ,IAAMM,EAAgB,mBAAyBC,EAAY,2BAG5Q,SAARC,EAA+BC,EAAM,CAAC,GAAK,CAACC,EAAYC,CAAc,EAAEC,EAAS,IAAI,EAa/F,GAbiGC,EAAU,IAAI,CAAC,IAAMC,EAAY,IAAI,CAGtI,IAAMC,EAAmB,SAAS,KAAK,aAAaT,CAAe,EACnE,GAAG,CAACS,GAAoBA,GAAoB,cAAe,GAAG,SAAS,KAAK,aAAa,mBAAmB,EAAGJ,EAAe,SAAS,KAAK,aAAa,mBAAmB,GAAG,MAAM,MAAO,CAAC,IAAMK,EAAW,OAAO,WAAW,8BAA8B,EAAEL,EAAeK,EAAW,OAAO,CAAE,MACnSL,EAAeI,GAAoB,MAAM,CACvC,EACIE,EAAcC,GAAG,CAACP,EAAeO,EAAE,OAAO,CAAE,EAClDJ,EAAY,EACZ,OAAO,iBAAiBP,EAAYO,CAAW,EAC/C,IAAME,EAAW,OAAO,WAAW,8BAA8B,EAAE,OAAAA,EAAW,YAAYC,CAAa,EACjG,IAAI,CAAC,OAAO,oBAAoBV,EAAYO,CAAW,EAAEE,EAAW,eAAeC,CAAa,CAAE,CAAE,EAAE,CAAC,CAAC,EAE3GP,IAAc,KAAM,OAAO,KAC9B,GAAG,CAACD,EAAM,QAAQ,CAAC,GAAG,CAACA,EAAM,OAAO,CAAC,EAAG,OAAoBU,EAAKC,EAAW,CAAC,MAAM,6BAA6B,SAAS,wFAAwF,CAAC,EAAG,IAAIC,EAAMX,EAAYD,EAAM,OAAO,CAAC,EAAEA,EAAM,QAAQ,CAAC,EAA6I,OAAxIY,IAAQZ,EAAM,OAAO,OAAOA,EAAM,OAAO,UAASY,EAAmBC,EAAaD,EAAM,CAAC,MAAM,CAAC,GAAGA,EAAM,MAAM,MAAM,GAAGZ,EAAM,KAAK,CAAC,CAAC,GAAOY,GAA2BF,EAAK,MAAM,CAAC,MAAM,CAAC,SAAS,IAAI,UAAU,GAAG,CAAC,CAAC,CAAgB,CAACX,EAAc,YAAY,iBAAiBe,EAAoBf,EAAc,CAAC,MAAM,CAAC,KAAKgB,EAAY,kBAAkB,MAAM,OAAO,EAAE,KAAK,CAAC,KAAKA,EAAY,kBAAkB,MAAM,MAAM,CAAC,CAAC",
  "names": ["init_ssg_sandbox_shims", "init_ssg_sandbox_shims", "EmptyState", "title", "subtitle", "maxWidth", "u", "p", "THEME_ATTRIBUTE", "SIGNAL_NAME", "ThemeVariants", "props", "isDarkTheme", "setIsDarkTheme", "ye", "ue", "updateTheme", "currentToggleState", "mediaQuery", "osThemeChange", "e", "p", "EmptyState", "layer", "q", "addPropertyControls", "ControlType"]
}