{"version":3,"file":"ThemeToggle.CIefCy-c.mjs","names":["t","e","useState","Cookies","useState","useRef","_Fragment","Image"],"sources":["https:/ga.jspm.io/npm:js-cookie@3.0.5/dist/js.cookie.mjs","https:/framer.com/m/framer/store.js@^1.0.0","https:/framerusercontent.com/modules/tWxPGoauEDGvb60hKQfR/P8RtFxHSB1jdYdF6Os86/ThemeToggle.js"],"sourcesContent":["function assign(e){for(var t=1;t{// If the state is an object, make sure we copy it\nif(typeof newState===\"function\"){newState=newState(dataStore.state);}dataStore.state=Object.freeze({...dataStore.state,...newState});};// Store the initial state, copy the object if it's an object\nlet storeState=typeof state1===\"object\"?Object.freeze({...state1}):state1;// Keep a list of all the listeners, in the form of React hook setters\nconst storeSetters=new Set();// Create a set function that updates all the listeners / setters\nconst setStoreState=newState=>{// If the state is an object, make sure we copy it\nif(typeof newState===\"function\"){newState=newState(storeState);}storeState=typeof newState===\"object\"?Object.freeze({...storeState,...newState}):newState;// Update all the listeners / setters with the new value\nstoreSetters.forEach(setter=>setter(storeState));};// Create the actual hook based on everything above\nfunction useStore(){// Create the hook we are going to use as a listener\nconst[state,setState]=useState(storeState);// If we unmount the component using this hook, we need to remove the listener\n// @ts-ignore\nuseEffect(()=>{// But right now, we need to add the listener\nstoreSetters.add(setState);return()=>storeSetters.delete(setState);},[]);// If Data context exists, use Data, otherwise use vanilla React state\nif(useObserveData()===true){useObserveData();return[dataStore.state,setDataStore];}else{// Return the state and a function to update the central store\nreturn[state,setStoreState];}}return useStore;}\nexport const __FramerMetadata__ = {\"exports\":{\"createStore\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./createStore.map","import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,Image}from\"framer\";import{motion}from\"framer-motion\";import{useState,useEffect,useRef}from\"react\";import Cookies from\"js-cookie\";import{createStore}from\"https://framer.com/m/framer/store.js@^1.0.0\";// Sun and moon icons from tabler-icons.io\nconst THEME_ATTRIBUTE=\"framestack-theme\";const COOKIE_NAME=\"framestack-theme\";const STYLE_ID=\"framestack-theme-toggle\";const SIGNAL_NAME=\"framestack-theme-changed\";const THEMES=[\"light\",\"dark\",\"deviceTheme\"];const useThemeStore=createStore(\"deviceTheme\");function extractBodySection(inputString){const searchStr=\"body{\";const startIndex=inputString.indexOf(searchStr);if(startIndex!==-1){const endIndex=inputString.indexOf(\"}\",startIndex+searchStr.length);if(endIndex!==-1){const bodySection=inputString.substring(startIndex+searchStr.length,endIndex);return bodySection;}}return null// Return null if \"body{\" or \"}\" is not found\n;}function makeBorderStyle(border){return border?{borderWidth:border.widthIsMixed?`${border.widthTop}px ${border.widthRight}px ${border.widthBottom}px ${border.widthLeft}px`:`${border.width}px`,borderStyle:border.style,borderColor:border.color}:[];}/**\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n * @framerDisableUnlink\n */export default function ThemeToggle(props){const{toggle,dropdown,dropdownOptions,icons,transition}=props;let isPreview=false;let initialTheme=props.defaultTheme;if(typeof document!==\"undefined\"){if(document.body.hasAttribute(\"data-framer-theme\")){if(initialTheme==\"deviceTheme\"){initialTheme=document.body.getAttribute(\"data-framer-theme\");}isPreview=true;}else if(document.body.hasAttribute(THEME_ATTRIBUTE)){initialTheme=document.body.getAttribute(THEME_ATTRIBUTE);}else if(props.saveTheme){const storedTheme=Cookies.get(COOKIE_NAME);if(THEMES.includes(storedTheme)){initialTheme=storedTheme;}}}let deviceTheme=\"light\";if(isPreview&&document.body.hasAttribute(\"data-framer-theme\")){deviceTheme=document.body.getAttribute(\"data-framer-theme\");}else if(typeof window!=\"undefined\"&&window?.matchMedia){deviceTheme=window.matchMedia(\"(prefers-color-scheme: dark)\").matches?\"dark\":\"light\";}const[theme,setTheme]=useThemeStore();const[activeTheme,setActiveTheme]=useState(initialTheme==\"deviceTheme\"?deviceTheme:initialTheme)// light or dark\n;const[originalPreviewTheme,setOriginalPreviewTheme]=useState(initialTheme);const themeRef=useRef(theme);const selectRef=useRef(null);function changeTheme(newTheme){let newActiveTheme=newTheme;if(newTheme==\"deviceTheme\"){if(isPreview){newActiveTheme=originalPreviewTheme;}else{newActiveTheme=deviceTheme;}}setTheme(newTheme);setActiveTheme(newActiveTheme);if(isPreview){document.body.setAttribute(\"data-framer-theme\",newActiveTheme);}document.body.setAttribute(THEME_ATTRIBUTE,newTheme);document.documentElement.setAttribute(THEME_ATTRIBUTE,newTheme);if(props.saveTheme){Cookies.set(COOKIE_NAME,newTheme,{expires:365})// Expires in 1 year\n;}window.dispatchEvent(new CustomEvent(SIGNAL_NAME));}function toggleTheme(){const newActiveTheme=activeTheme==\"light\"?\"dark\":\"light\";if(props.resetToDeviceTheme){changeTheme(newActiveTheme==deviceTheme?\"deviceTheme\":newActiveTheme);}else{changeTheme(newActiveTheme);}}function onSelectChange(){if(selectRef.current){changeTheme(THEMES[selectRef.current.selectedIndex]);}}const handleThemeChange=event=>{if(themeRef.current==\"deviceTheme\"){setActiveTheme(event.matches?\"dark\":\"light\");}};useEffect(()=>{themeRef.current=theme// Update the ref whenever the theme state changes\n;if(theme==\"deviceTheme\"){if(isPreview){setActiveTheme(originalPreviewTheme);}else{setActiveTheme(deviceTheme);}}else{setActiveTheme(theme);}},[theme]);useEffect(()=>{if(initialTheme!=theme){changeTheme(initialTheme);}// const themeAttr = document.body.getAttribute(THEME_ATTRIBUTE)\n// if (themeAttr) {\n// changeTheme(themeAttr)\n// }\nconst mediaQuery=window.matchMedia(\"(prefers-color-scheme: dark)\");mediaQuery.addEventListener(\"change\",handleThemeChange);if(!isPreview){let generateStyle=true;// Check if already has theme attribute\nconst headElement=document.querySelector(\"head\");if(headElement){if(headElement.querySelector(`style#${STYLE_ID}`)){generateStyle=false;}}// Generate