{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/57wf7vVSsscumOXz4NV8/kLLe9w97bPfPTwFHjkRV/ThemeVariants.js"],
  "sourcesContent": ["import{jsx as _jsx}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{useState,useEffect,cloneElement}from\"react\";import{EmptyState}from\"https://framerusercontent.com/modules/n9cR4gFLy0DjoxfkLrIe/eDj1MxSfupkYrrIeXQ6b/Shared.js\";const THEME_ATTRIBUTE=\"framestack-theme\";const SIGNAL_NAME=\"framestack-theme-changed\";/**\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n */export default function ThemeVariants(props){var _props_light,_props_dark,_props_dark1,_props_light1,_props_style,_props_style1;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=props.light)===null||_props_light===void 0?void 0:_props_light[0])||!((_props_dark=props.dark)===null||_props_dark===void 0?void 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_dark1=props.dark)===null||_props_dark1===void 0?void 0:_props_dark1[0]:(_props_light1=props.light)===null||_props_light1===void 0?void 0:_props_light1[0];if(layer&&(((_props_style=props.style)===null||_props_style===void 0?void 0:_props_style.width)||((_props_style1=props.style)===null||_props_style1===void 0?void 0:_props_style1.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\",\"framerSupportedLayoutHeight\":\"any\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}"],
  "mappings": "4MAAAA,IAAoQ,IAAMC,EAAgB,mBAAyBC,EAAY,2BAG7S,SAARC,EAA+BC,EAAM,CAAC,IAAIC,EAAaC,EAAYC,EAAaC,EAAcC,EAAaC,EAAc,GAAK,CAACC,EAAYC,CAAc,EAAEC,EAAS,IAAI,EAalL,GAboLC,EAAU,IAAI,CAAC,IAAMC,EAAY,IAAI,CAGzN,IAAMC,EAAmB,SAAS,KAAK,aAAaf,CAAe,EACnE,GAAG,CAACe,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,iBAAiBb,EAAYa,CAAW,EAC/C,IAAME,EAAW,OAAO,WAAW,8BAA8B,EAAE,OAAAA,EAAW,YAAYC,CAAa,EACjG,IAAI,CAAC,OAAO,oBAAoBhB,EAAYa,CAAW,EAAEE,EAAW,eAAeC,CAAa,CAAE,CAAE,EAAE,CAAC,CAAC,EAE3GP,IAAc,KAAM,OAAO,KAC9B,GAAG,EAAG,GAAAN,EAAaD,EAAM,SAAS,MAAMC,IAAe,SAAcA,EAAa,CAAC,IAAI,EAAG,GAAAC,EAAYF,EAAM,QAAQ,MAAME,IAAc,SAAcA,EAAY,CAAC,GAAI,OAAoBc,EAAKC,EAAW,CAAC,MAAM,6BAA6B,SAAS,wFAAwF,CAAC,EAAG,IAAIC,EAAMX,GAAaJ,EAAaH,EAAM,QAAQ,MAAMG,IAAe,OAAO,OAAOA,EAAa,CAAC,GAAGC,EAAcJ,EAAM,SAAS,MAAMI,IAAgB,OAAO,OAAOA,EAAc,CAAC,EAAoR,OAA/Qc,IAAU,GAAAb,EAAaL,EAAM,SAAS,MAAMK,IAAe,SAAcA,EAAa,OAAU,GAAAC,EAAcN,EAAM,SAAS,MAAMM,IAAgB,SAAcA,EAAc,UAAUY,EAAmBC,EAAaD,EAAM,CAAC,MAAM,CAAC,GAAGA,EAAM,MAAM,MAAM,GAAGlB,EAAM,KAAK,CAAC,CAAC,GAAOkB,GAA2BF,EAAK,MAAM,CAAC,MAAM,CAAC,SAAS,IAAI,UAAU,GAAG,CAAC,CAAC,CAAgB,CAACjB,EAAc,YAAY,iBAAiBqB,EAAoBrB,EAAc,CAAC,MAAM,CAAC,KAAKsB,EAAY,kBAAkB,MAAM,OAAO,EAAE,KAAK,CAAC,KAAKA,EAAY,kBAAkB,MAAM,MAAM,CAAC,CAAC",
  "names": ["init_ssg_sandbox_shims", "THEME_ATTRIBUTE", "SIGNAL_NAME", "ThemeVariants", "props", "_props_light", "_props_dark", "_props_dark1", "_props_light1", "_props_style", "_props_style1", "isDarkTheme", "setIsDarkTheme", "ye", "ue", "updateTheme", "currentToggleState", "mediaQuery", "osThemeChange", "e", "p", "EmptyState", "layer", "q", "addPropertyControls", "ControlType"]
}