{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/X4uRGKG1QG6NxAsFWdbx/DmskvHtffPp6aAhIyfNv/Image_Switcher.js", "ssg:https://framerusercontent.com/modules/NY6C0kNgPFIjuO35bxMz/X5iL61bWfwNYk5ZNUvNm/Overrides.js"],
  "sourcesContent": ["import{jsx as _jsx}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{useEffect,useState}from\"react\";/**\n * Framer image switcher (A customizable component enabling the selection of dark mode or light mode images.)\n * By OneFramer.com\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n * @framerDisableUnlink\n */export default function Image_Switcher(props){var _window;const{lightVersion,darkVersion,imageFit}=props;//Get user preferred theme\nconst getUserPreferredTheme=()=>{var _window;const preferesDark=(_window=window)===null||_window===void 0?void 0:_window.matchMedia(\"(prefers-color-scheme: dark)\").matches;return preferesDark?\"dark\":\"light\";};//States\nconst[theme,setTheme]=useState(getUserPreferredTheme());const[showImage,setShowImage]=useState(false);//Get theme from  session storage\nconst getThemeFromSS=()=>{return sessionStorage.getItem(\"currentToggleState\")||getUserPreferredTheme();};//Set the theme for conditional rendering\nuseEffect(()=>{setTheme(getThemeFromSS());},[]);(_window=window)===null||_window===void 0?void 0:_window.addEventListener(\"themeChange\",()=>{setTheme(getThemeFromSS()===\"light\"?\"light\":\"dark\");});//Add delay on image render\nuseEffect(()=>{setTheme(getThemeFromSS());setTimeout(()=>{setShowImage(true);},1e3)// 1 second delay\n;},[]);const currentImage=theme===\"light\"?lightVersion:darkVersion;return showImage&&currentImage&&/*#__PURE__*/_jsx(\"img\",{style:{width:\"100%\",height:\"100%\",objectFit:imageFit},src:currentImage});}//Property controls\naddPropertyControls(Image_Switcher,{lightVersion:{type:ControlType.Image,title:\"Light\"},darkVersion:{type:ControlType.Image,title:\"Dark\"},imageFit:{type:ControlType.Enum,title:\"Fit\",options:[\"contain\",\"cover\",\"fill\"],defaultValue:\"cover\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"Image_Switcher\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"fixed\",\"framerSupportedLayoutWidth\":\"fixed\",\"framerContractVersion\":\"1\",\"framerDisableUnlink\":\"\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Image_Switcher.map", "import{jsx as _jsx}from\"react/jsx-runtime\";import{useEffect,useState}from\"react\";// Get the user's preferred theme\nconst getUserPreferredTheme=()=>{if(typeof window!==\"undefined\"){return window.matchMedia(\"(prefers-color-scheme: dark)\").matches?\"dark\":\"light\";}return\"light\";};export function themeSwitcher(Component){return props=>{const[theme,setTheme]=useState(()=>{if(typeof window!==\"undefined\"){return sessionStorage.getItem(\"currentToggleState\")||getUserPreferredTheme();}return\"light\";});const toggle=()=>{const newTheme=theme===\"light\"?\"dark\":\"light\";setTheme(newTheme);if(typeof window!==\"undefined\"){sessionStorage.setItem(\"currentToggleState\",newTheme);window.dispatchEvent(new CustomEvent(\"themeChange\",{detail:newTheme}));}};useEffect(()=>{if(typeof document!==\"undefined\"){const styleSheets=Array.from(document.styleSheets);styleSheets.forEach(styleSheet=>{try{const cssRules=Array.from(styleSheet.cssRules);cssRules.forEach((rule,index)=>{if(rule instanceof CSSMediaRule&&rule.conditionText.includes(\"prefers-color-scheme\")){const newRule=`@media (prefers-color-scheme: ${getUserPreferredTheme()===\"light\"?theme===\"dark\"?\"light\":\"dark\":theme}) { ${rule.cssText.replace(/^@media[^{]+{|}$/g,\"\")} }`;styleSheet.deleteRule(index);styleSheet.insertRule(newRule,index);}});}catch(e){console.warn(e.message);}});}},[theme]);return /*#__PURE__*/_jsx(Component,{...props,onClick:toggle});};}export function variantSwitcher(Component){return props=>{const[isLoading,setIsLoading]=useState(true);const[currentToggleState,setCurrentToggleState]=useState(null);useEffect(()=>{if(typeof window!==\"undefined\"){const initialTheme=sessionStorage.getItem(\"currentToggleState\")||getUserPreferredTheme();console.log(initialTheme);setCurrentToggleState(initialTheme);setIsLoading(false);}},[]);useEffect(()=>{const handleThemeChange=event=>{setCurrentToggleState(event.detail);};window.addEventListener(\"themeChange\",handleThemeChange);return()=>window.removeEventListener(\"themeChange\",handleThemeChange);},[]);//Opacity based component transition for preventing race condition.\nreturn /*#__PURE__*/_jsx(\"div\",{className:\"transition-opacity duration-200\",style:{opacity:isLoading||currentToggleState===null?0:1},children:/*#__PURE__*/_jsx(Component,{...props,variant:currentToggleState===\"dark\"?\"Dark\":\"Light\"})});};}\nexport const __FramerMetadata__ = {\"exports\":{\"themeSwitcher\":{\"type\":\"reactHoc\",\"name\":\"themeSwitcher\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"variantSwitcher\":{\"type\":\"reactHoc\",\"name\":\"variantSwitcher\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Overrides.map"],
  "mappings": "+GAMkB,SAARA,EAAgCC,EAAM,CAAC,IAAIC,EAAQ,GAAK,CAAC,aAAAC,EAAa,YAAAC,EAAY,SAAAC,CAAQ,EAAEJ,EAChGK,EAAsB,IAAI,CAAC,IAAIJ,EAAuI,QAA3GA,EAAQK,KAAU,MAAML,IAAU,OAAO,OAAOA,EAAQ,WAAW,8BAA8B,EAAE,SAA4B,OAAO,OAAQ,EAC1M,CAACM,EAAMC,CAAQ,EAAEC,EAASJ,EAAsB,CAAC,EAAO,CAACK,EAAUC,CAAY,EAAEF,EAAS,EAAK,EAC9FG,EAAe,IAAY,eAAe,QAAQ,oBAAoB,GAAGP,EAAsB,EACrGQ,EAAU,IAAI,CAACL,EAASI,EAAe,CAAC,CAAE,EAAE,CAAC,CAAC,GAAGX,EAAQK,KAAU,MAAML,IAAU,QAAcA,EAAQ,iBAAiB,cAAc,IAAI,CAACO,EAASI,EAAe,IAAI,QAAQ,QAAQ,MAAM,CAAE,CAAC,EAClMC,EAAU,IAAI,CAACL,EAASI,EAAe,CAAC,EAAE,WAAW,IAAI,CAACD,EAAa,EAAI,CAAE,EAAE,GAAG,CACjF,EAAE,CAAC,CAAC,EAAE,IAAMG,EAAaP,IAAQ,QAAQL,EAAaC,EAAY,OAAOO,GAAWI,GAA2BC,EAAK,MAAM,CAAC,MAAM,CAAC,MAAM,OAAO,OAAO,OAAO,UAAUX,CAAQ,EAAE,IAAIU,CAAY,CAAC,CAAE,CACrME,EAAoBjB,EAAe,CAAC,aAAa,CAAC,KAAKkB,EAAY,MAAM,MAAM,OAAO,EAAE,YAAY,CAAC,KAAKA,EAAY,MAAM,MAAM,MAAM,EAAE,SAAS,CAAC,KAAKA,EAAY,KAAK,MAAM,MAAM,QAAQ,CAAC,UAAU,QAAQ,MAAM,EAAE,aAAa,OAAO,CAAC,CAAC,ECZ/O,IAAMC,EAAsB,IAAQ,OAAOC,EAAS,KAAoBA,EAAO,WAAW,8BAA8B,EAAE,QAAQ,OAAsB,QAAknC,SAASC,EAAgBC,EAAU,CAAC,OAAOC,GAAO,CAAC,GAAK,CAACC,EAAUC,CAAY,EAAEC,EAAS,EAAI,EAAO,CAACC,EAAmBC,CAAqB,EAAEF,EAAS,IAAI,EAAE,OAAAG,EAAU,IAAI,CAAC,GAAG,OAAOC,EAAS,IAAY,CAAC,IAAMC,EAAa,eAAe,QAAQ,oBAAoB,GAAGC,EAAsB,EAAE,QAAQ,IAAID,CAAY,EAAEH,EAAsBG,CAAY,EAAEN,EAAa,EAAK,CAAE,CAAC,EAAE,CAAC,CAAC,EAAEI,EAAU,IAAI,CAAC,IAAMI,EAAkBC,GAAO,CAACN,EAAsBM,EAAM,MAAM,CAAE,EAAE,OAAAJ,EAAO,iBAAiB,cAAcG,CAAiB,EAAQ,IAAIH,EAAO,oBAAoB,cAAcG,CAAiB,CAAE,EAAE,CAAC,CAAC,EAC90DE,EAAK,MAAM,CAAC,UAAU,kCAAkC,MAAM,CAAC,QAAQX,GAAWG,IAAqB,KAAK,EAAE,CAAC,EAAE,SAAsBQ,EAAKb,EAAU,CAAC,GAAGC,EAAM,QAAQI,IAAqB,OAAO,OAAO,OAAO,CAAC,CAAC,CAAC,CAAE,CAAE",
  "names": ["Image_Switcher", "props", "_window", "lightVersion", "darkVersion", "imageFit", "getUserPreferredTheme", "window", "theme", "setTheme", "ye", "showImage", "setShowImage", "getThemeFromSS", "ue", "currentImage", "p", "addPropertyControls", "ControlType", "getUserPreferredTheme", "window", "variantSwitcher", "Component", "props", "isLoading", "setIsLoading", "ye", "currentToggleState", "setCurrentToggleState", "ue", "window", "initialTheme", "getUserPreferredTheme", "handleThemeChange", "event", "p"]
}