{"version":3,"file":"DynamicThemeImage.BCMo0DBb.mjs","names":["useState"],"sources":["https:/framerusercontent.com/modules/QMXZ0PwkgEAx86FDeasB/TGpcZaCSBk3sJUeJdy9h/DynamicThemeImage.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import{addPropertyControls,ControlType}from\"framer\";import{useEffect,useState,startTransition}from\"react\";/**\n * Dynamic Theme Image\n *\n * A component that displays different images based on the user's color scheme preference.\n * Works with both system theme and custom theme toggles (like Framestack Theme Toggle).\n * Uses semantic HTML for SEO optimization with JavaScript-based theme detection.\n *\n * Features:\n * - Fully crawlable by search engines (uses semantic <img> tag with alt text)\n * - Supports system theme via prefers-color-scheme media query\n * - Supports custom theme toggles via data attributes and events\n * - Listens for \"themeChange\" events from toggle components\n * - Optimal performance with lazy loading and async decoding options\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerSupportedLayoutHeight any-prefer-fixed\n */// @framerDisableUnlink\nexport default function DynamicThemeImage(props){const{lightImage,darkImage,alt=\"\",loading=\"lazy\",decoding=\"async\",objectFit=\"cover\"}=props;// Default image to use when neither light nor dark is provided\nconst defaultImage=\"https://framerusercontent.com/images/Bnqo3uyTwLsA8j4q5Pb5wCD6NE.png\";// Check if images are actually provided (not undefined/empty)\nconst hasLightImage=lightImage?.src&&lightImage.src.trim()!==\"\";const hasDarkImage=darkImage?.src&&darkImage.src.trim()!==\"\";// Determine effective sources with fallback logic:\n// 1. If theme is dark and dark image exists, use dark\n// 2. If theme is light and light image exists, use light\n// 3. If only one image exists, use it for both themes\n// 4. If neither exists, use default\nconst effectiveLightSrc=hasLightImage?lightImage.src:hasDarkImage?darkImage.src:defaultImage;const effectiveDarkSrc=hasDarkImage?darkImage.src:hasLightImage?lightImage.src:defaultImage;const effectiveLightSrcSet=hasLightImage?lightImage?.srcSet:hasDarkImage?darkImage?.srcSet:undefined;const effectiveDarkSrcSet=hasDarkImage?darkImage?.srcSet:hasLightImage?lightImage?.srcSet:undefined;// Use provided alt or fall back to image alts\nconst imageAlt=alt||(hasLightImage?lightImage?.alt:hasDarkImage?darkImage?.alt:\"\")||\"\";// State to track current theme\nconst[currentTheme,setCurrentTheme]=useState(\"light\");useEffect(()=>{// Function to determine current theme\nconst detectTheme=()=>{// Check for custom toggle theme first\nif(typeof document!==\"undefined\"){const htmlElement=document.getElementsByTagName(\"html\")[0];const bodyElement=document.getElementsByTagName(\"body\")[0];const htmlTheme=htmlElement?.getAttribute(\"toggle-theme\");const bodyTheme=bodyElement?.getAttribute(\"toggle-theme\");// Use toggle-theme attribute if set to light or dark\nif(htmlTheme===\"dark\"||bodyTheme===\"dark\"){startTransition(()=>setCurrentTheme(\"dark\"));return;}else if(htmlTheme===\"light\"||bodyTheme===\"light\"){startTransition(()=>setCurrentTheme(\"light\"));return;}// Check localStorage as fallback\ntry{const storedTheme=localStorage.getItem(\"theme\");if(storedTheme===\"dark\"){startTransition(()=>setCurrentTheme(\"dark\"));return;}else if(storedTheme===\"light\"){startTransition(()=>setCurrentTheme(\"light\"));return;}}catch(e){// localStorage not available\n}}// Fall back to system preference\nif(typeof window!==\"undefined\"){const prefersDark=window.matchMedia(\"(prefers-color-scheme: dark)\").matches;startTransition(()=>setCurrentTheme(prefersDark?\"dark\":\"light\"));}};// Detect initial theme\ndetectTheme();// Listen for theme change events from toggle component\nconst handleThemeChange=()=>{detectTheme();};// Listen for storage events (in case theme changes in another tab)\nconst handleStorageChange=e=>{if(e.key===\"theme\"){detectTheme();}};// Listen for system theme changes\nconst mediaQuery=window.matchMedia(\"(prefers-color-scheme: dark)\");const handleMediaChange=e=>{// Only apply system theme if no custom theme is set\nconst htmlElement=document.getElementsByTagName(\"html\")[0];const bodyElement=document.getElementsByTagName(\"body\")[0];const htmlTheme=htmlElement?.getAttribute(\"toggle-theme\");const bodyTheme=bodyElement?.getAttribute(\"toggle-theme\");if(!htmlTheme&&!bodyTheme){startTransition(()=>setCurrentTheme(e.matches?\"dark\":\"light\"));}};window.addEventListener(\"themeChange\",handleThemeChange);window.addEventListener(\"storage\",handleStorageChange);mediaQuery.addEventListener(\"change\",handleMediaChange);return()=>{window.removeEventListener(\"themeChange\",handleThemeChange);window.removeEventListener(\"storage\",handleStorageChange);mediaQuery.removeEventListener(\"change\",handleMediaChange);};},[]);// Determine current image source based on theme and available images\nconst currentSrc=currentTheme===\"dark\"?effectiveDarkSrc:effectiveLightSrc;const currentSrcSet=currentTheme===\"dark\"?effectiveDarkSrcSet:effectiveLightSrcSet;return /*#__PURE__*/_jsx(\"img\",{src:currentSrc,srcSet:currentSrcSet,alt:imageAlt,loading:loading,decoding:decoding,style:{width:\"100%\",height:\"100%\",objectFit,display:\"block\",...props.style}});}addPropertyControls(DynamicThemeImage,{lightImage:{type:ControlType.ResponsiveImage,title:\"Light Mode Image\"},darkImage:{type:ControlType.ResponsiveImage,title:\"Dark Mode Image\"},alt:{type:ControlType.String,title:\"Alt Text\",description:\"Descriptive text for screen readers and SEO\",defaultValue:\"\",placeholder:\"Describe the image...\"},loading:{type:ControlType.Enum,title:\"Loading\",description:\"eager = load immediately, lazy = load when visible\",options:[\"eager\",\"lazy\"],optionTitles:[\"Eager\",\"Lazy\"],defaultValue:\"lazy\",displaySegmentedControl:true},decoding:{type:ControlType.Enum,title:\"Decoding\",description:\"async = decode off main thread for better performance\",options:[\"async\",\"sync\",\"auto\"],optionTitles:[\"Async\",\"Sync\",\"Auto\"],defaultValue:\"async\",displaySegmentedControl:true},objectFit:{type:ControlType.Enum,title:\"Object Fit\",description:\"How the image should fill its container\",options:[\"contain\",\"cover\",\"fill\",\"none\",\"scale-down\"],optionTitles:[\"Contain\",\"Cover\",\"Fill\",\"None\",\"Scale Down\"],defaultValue:\"cover\"}});DynamicThemeImage.displayName=\"Dynamic Theme Image\";\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"DynamicThemeImage\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\",\"framerDisableUnlink\":\"\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./DynamicThemeImage.map"],"mappings":"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"}