{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/hR3xoPvWF6ukt0Kv1YvY/dOHkcUL7kHKJYb0jkwDK/DynamicVeriants.js"],
  "sourcesContent": ["import{jsx as _jsx,Fragment as _Fragment}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{useState,useEffect,cloneElement}from\"react\";/**\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n */export default function DynamicVeriants(props){const[isDarkTheme,setIsDarkTheme]=useState(null);useEffect(()=>{const updateTheme=()=>{// For compatibility with the theme toggle component.\n// If your site does not have a theme toggle, the device theme will be used.\nconst currentToggleState=localStorage.getItem(\"currentToggleState\");// If the toggle theme was found in local storage, use it.\nif(currentToggleState!==null){setIsDarkTheme(currentToggleState===\"dark\");}else{// If the toggle theme was not found in local storage, use the device theme.\nconst mediaQuery=window.matchMedia(\"(prefers-color-scheme: dark)\");setIsDarkTheme(mediaQuery.matches);}};// 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(\"themeChange\",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(\"themeChange\",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;}let layers=[props.light[0],props.dark[0]];for(let i=0;i<2;i++){let layer=layers[i];if(layer&&(props.style?.width||props.style?.height)){layers[i]=/*#__PURE__*/cloneElement(layer,{style:{...layer.props.style,...props.style}});}}let themeLayer=layers[isDarkTheme?1:0];if(!themeLayer){return /*#__PURE__*/_jsx(\"div\",{style:{minWidth:100,minHeight:100}});}else{return /*#__PURE__*/_jsx(_Fragment,{children:themeLayer});}}DynamicVeriants.displayName=\"Dynamic Variants\";addPropertyControls(DynamicVeriants,{light:{type:ControlType.ComponentInstance,title:\"Light\"},dark:{type:ControlType.ComponentInstance,title:\"Dark\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"DynamicVeriants\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"any\",\"framerSupportedLayoutHeight\":\"any\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./DynamicVeriants.map"],
  "mappings": "8JAGkB,SAARA,EAAiCC,EAAM,CAAC,GAAK,CAACC,EAAYC,CAAc,EAAEC,EAAS,IAAI,EAWjG,GAXmGC,EAAU,IAAI,CAAC,IAAMC,EAAY,IAAI,CAExI,IAAMC,EAAmB,aAAa,QAAQ,oBAAoB,EAClE,GAAGA,IAAqB,KAAMJ,EAAeI,IAAqB,MAAM,MAAO,CAC/E,IAAMC,EAAWC,EAAO,WAAW,8BAA8B,EAAEN,EAAeK,EAAW,OAAO,CAAE,CAAC,EACjGE,EAAcC,GAAG,CAACR,EAAeQ,EAAE,OAAO,CAAE,EAClDL,EAAY,EACZG,EAAO,iBAAiB,cAAcH,CAAW,EACjD,IAAME,EAAWC,EAAO,WAAW,8BAA8B,EAAE,OAAAD,EAAW,YAAYE,CAAa,EACjG,IAAI,CAACD,EAAO,oBAAoB,cAAcH,CAAW,EAAEE,EAAW,eAAeE,CAAa,CAAE,CAAE,EAAE,CAAC,CAAC,EAE7GR,IAAc,KAAM,OAAO,KAAM,IAAIU,EAAO,CAACX,EAAM,MAAM,CAAC,EAAEA,EAAM,KAAK,CAAC,CAAC,EAAE,QAAQY,EAAE,EAAEA,EAAE,EAAEA,IAAI,CAAC,IAAIC,EAAMF,EAAOC,CAAC,EAAKC,IAAQb,EAAM,OAAO,OAAOA,EAAM,OAAO,UAASW,EAAOC,CAAC,EAAeE,EAAaD,EAAM,CAAC,MAAM,CAAC,GAAGA,EAAM,MAAM,MAAM,GAAGb,EAAM,KAAK,CAAC,CAAC,EAAG,CAAC,IAAIe,EAAWJ,EAAOV,EAAY,EAAE,CAAC,EAAE,OAAIc,EAA2GC,EAAKC,EAAU,CAAC,SAASF,CAAU,CAAC,EAA/GC,EAAK,MAAM,CAAC,MAAM,CAAC,SAAS,IAAI,UAAU,GAAG,CAAC,CAAC,CAAmE,CAACjB,EAAgB,YAAY,mBAAmBmB,EAAoBnB,EAAgB,CAAC,MAAM,CAAC,KAAKoB,EAAY,kBAAkB,MAAM,OAAO,EAAE,KAAK,CAAC,KAAKA,EAAY,kBAAkB,MAAM,MAAM,CAAC,CAAC",
  "names": ["DynamicVeriants", "props", "isDarkTheme", "setIsDarkTheme", "ye", "ue", "updateTheme", "currentToggleState", "mediaQuery", "window", "osThemeChange", "e", "layers", "i", "layer", "q", "themeLayer", "p", "l", "addPropertyControls", "ControlType"]
}