{
  "version": 3,
  "sources": ["ssg:https://framer.com/m/Shared-8iGD.js@ppfsqtxp83zDetJqOhV1", "ssg:https://framerusercontent.com/modules/tsNpnAKyyCCrUXZWSjF7/Ky80YQgmjdwpQibtmL06/ThemeImage.js"],
  "sourcesContent": ["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";export function EmptyState({title,subtitle,maxWidth=0}){return /*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",width:\"100%\",height:\"100%\",placeContent:\"center\",placeItems:\"center\",flexDirection:\"column\",gap:16,backgroundColor:\"rgba(136, 85, 255, 0.1)\",borderRadius:6,border:\"1px dashed rgb(136, 85, 255)\",color:\"rgb(136, 85, 255)\",fontSize:16,padding:20,minHeight:200,maxWidth:maxWidth||undefined},children:[/*#__PURE__*/_jsx(\"p\",{style:{margin:0,fontWeight:600,textAlign:\"center\"},children:title}),/*#__PURE__*/_jsx(\"p\",{style:{margin:0,opacity:.7,// maxWidth: 500,\nlineHeight:1.5,textAlign:\"center\"},children:subtitle})]});}EmptyState.displayName=\"Empty State\";\nexport const __FramerMetadata__ = {\"exports\":{\"EmptyState\":{\"type\":\"reactComponent\",\"name\":\"EmptyState\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Shared.map", "import{jsx as _jsx}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,motion}from\"framer\";import{useState,useEffect,useRef}from\"react\";import{EmptyState}from\"https://framer.com/m/Shared-8iGD.js@ppfsqtxp83zDetJqOhV1\";export default function ThemeImage(props){var _props_dark,_props_light,_props_light1,_props_dark1;const[isDarkTheme,setIsDarkTheme]=useState(true)// getSystemTheme // Initialize with correct system theme on load\n;const[isImageLoaded,setIsImageLoaded]=useState(false)// For lazy loading\n;const imageRef=useRef(null);// Function to get the system theme (dark or light)\nfunction getSystemTheme(){if(typeof window!==\"undefined\"){return window.matchMedia(\"(prefers-color-scheme: dark)\").matches;}return false// Default to light theme if window isn't available\n;}const updateMetaThemeColor=isDark=>{const metaTag=document.querySelector('meta[name=\"theme-color\"]');if(metaTag){metaTag.setAttribute(\"content\",isDark?\"#0F1626\":\"#f9f9f9\");}else{const newMetaTag=document.createElement(\"meta\");newMetaTag.name=\"theme-color\";newMetaTag.content=isDark?\"#0F1626\":\"#f9f9f9\";document.head.appendChild(newMetaTag);}};const updateBodyThemeAttribute=isDark=>{document.body.setAttribute(\"data-theme\",isDark?\"dark\":\"light\");};// Effect to handle theme change and update when system theme changes\n// useEffect(() => {\n//     const handleSystemThemeChange = (e) => {\n//         const newTheme = e.matches ? \"dark\" : \"light\"\n//         setIsDarkTheme(newTheme === \"dark\")\n//         updateMetaThemeColor(newTheme === \"dark\")\n//         updateBodyThemeAttribute(newTheme === \"dark\")\n//     }\n//     // Set initial meta tag color and body attribute\n//     updateMetaThemeColor(isDarkTheme)\n//     updateBodyThemeAttribute(isDarkTheme)\n//     // Listen for system-level theme changes\n//     const mediaQuery = window.matchMedia(\"(prefers-color-scheme: dark)\")\n//     mediaQuery.addEventListener(\"change\", handleSystemThemeChange)\n//     // Cleanup event listeners on unmount\n//     return () => {\n//         mediaQuery.removeEventListener(\"change\", handleSystemThemeChange)\n//     }\n// }, [isDarkTheme])\n// Lazy loading logic using IntersectionObserver\nuseEffect(()=>{const observer=new IntersectionObserver(entries=>{if(entries[0].isIntersecting){setIsImageLoaded(true);observer.disconnect();}},{threshold:.1}// Load when 10% of the image is visible\n);if(imageRef.current){observer.observe(imageRef.current);}return()=>{if(imageRef.current)observer.disconnect();};},[]);if(isDarkTheme===null){return null// Return null while theme is being determined\n;}if(!props.light&&!props.dark){return /*#__PURE__*/_jsx(EmptyState,{title:\"Add dark and light images.\",subtitle:\"Use the properties panel to upload images for dark and light themes.\"});}// Use the original image loading logic to display light/dark images\nconst imageUrl=isDarkTheme?((_props_dark=props.dark)===null||_props_dark===void 0?void 0:_props_dark.src)||((_props_light=props.light)===null||_props_light===void 0?void 0:_props_light.src):((_props_light1=props.light)===null||_props_light1===void 0?void 0:_props_light1.src)||((_props_dark1=props.dark)===null||_props_dark1===void 0?void 0:_props_dark1.src);return /*#__PURE__*/_jsx(\"div\",{ref:imageRef,style:{position:\"relative\",width:\"100%\",height:\"100%\",borderRadius:props.radiusIsMixed?`${props.topLeft}px ${props.topRight}px ${props.bottomRight}px ${props.bottomLeft}px`:`${props.radius}px`,overflow:\"hidden\"},children:isImageLoaded&&/*#__PURE__*/_jsx(motion.div,{initial:{opacity:1},animate:{opacity:1},transition:{duration:.1,ease:\"easeInOut\"},style:{backgroundImage:`url(${imageUrl})`,backgroundSize:\"cover\",backgroundPosition:\"center\",backgroundRepeat:\"no-repeat\",position:\"absolute\",width:\"100%\",height:\"100%\"}})});}ThemeImage.displayName=\"Theme Image\";addPropertyControls(ThemeImage,{light:{type:ControlType.ResponsiveImage,title:\"Light Image\"},dark:{type:ControlType.ResponsiveImage,title:\"Dark Image\"},radius:{type:ControlType.FusedNumber,defaultValue:0,toggleKey:\"radiusIsMixed\",toggleTitles:[\"All\",\"Individual\"],valueKeys:[\"topLeft\",\"topRight\",\"bottomRight\",\"bottomLeft\"],valueLabels:[\"TL\",\"TR\",\"BR\",\"BL\"],min:0,description:\"*Note:* Theming may not work properly in the editor or preview.\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ThemeImage\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ThemeImage.map"],
  "mappings": "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",
  "names": ["EmptyState", "title", "subtitle", "maxWidth", "u", "p", "ThemeImage", "props", "_props_dark", "_props_light", "_props_light1", "_props_dark1", "isDarkTheme", "setIsDarkTheme", "ye", "isImageLoaded", "setIsImageLoaded", "imageRef", "pe", "getSystemTheme", "window", "updateMetaThemeColor", "isDark", "metaTag", "newMetaTag", "updateBodyThemeAttribute", "ue", "observer", "entries", "p", "EmptyState", "imageUrl", "motion", "addPropertyControls", "ControlType"]
}