{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/oz8LbimHQqM5Ulxjy5PL/JMGT4igGLZGlSHtoVUMb/ThemeImage.js"],
  "sourcesContent": ["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,Image}from\"framer\";import{useState,useEffect}from\"react\";import{EmptyState}from\"https://framerusercontent.com/modules/n9cR4gFLy0DjoxfkLrIe/eDj1MxSfupkYrrIeXQ6b/Shared.js\";import{borderPropertyControl,Border}from\"https://framerusercontent.com/modules/n9cR4gFLy0DjoxfkLrIe/eDj1MxSfupkYrrIeXQ6b/Shared.js\";const THEME_ATTRIBUTE=\"framestack-theme\";const SIGNAL_NAME=\"framestack-theme-changed\";/**\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n */export default function ThemeImage(props){var _props_dark,_props_light;const[isDarkTheme,setIsDarkTheme]=useState(null);useEffect(()=>{const updateTheme=()=>{// For compatibility with the theme toggle component.\n// https://framestack.co/components/theme-toggle\n// If the site does not have a theme toggle, the device theme will be used.\nconst currentToggleState=document.body.getAttribute(THEME_ATTRIBUTE);// Check if page has the theme toggle attribute.\nif(!currentToggleState||currentToggleState==\"deviceTheme\"){if(document.body.hasAttribute(\"data-framer-theme\")){setIsDarkTheme(document.body.getAttribute(\"data-framer-theme\")==\"dark\");}else{const mediaQuery=window.matchMedia(\"(prefers-color-scheme: dark)\");setIsDarkTheme(mediaQuery.matches);}}else{// Use device theme\nsetIsDarkTheme(currentToggleState==\"dark\")// light or dark\n;}};// 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(SIGNAL_NAME,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(SIGNAL_NAME,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;}// Empty state\nif(!((_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)){return /*#__PURE__*/_jsx(EmptyState,{title:\"Add dark and light images.\",subtitle:\"Use the properties panel on the right side to upload images for dark and light theme.\"});}return /*#__PURE__*/_jsxs(\"div\",{style:{position:\"relative\",borderRadius:props.radiusIsMixed?`${props.topLeft}px ${props.topRight}px ${props.bottomRight}px ${props.bottomLeft}px`:`${props.radius}px`,boxShadow:props.shadows,...props.style},children:[/*#__PURE__*/_jsx(Image,{background:{fit:props.sizing,...isDarkTheme?props.dark:props.light},style:{borderRadius:\"inherit\",...props.style}}),/*#__PURE__*/_jsx(Border,{...props.border})]});}ThemeImage.displayName=\"Theme Image\";addPropertyControls(ThemeImage,{light:{type:ControlType.ResponsiveImage},dark:{type:ControlType.ResponsiveImage},sizing:{type:ControlType.Enum,defaultValue:\"cover\",options:[\"fill\",\"fit\",\"stretch\"],optionTitles:[\"Fill\",\"Fit\",\"Stretch\"]},radius:{type:ControlType.FusedNumber,defaultValue:0,toggleKey:\"radiusIsMixed\",toggleTitles:[\"All\",\"Individual\"],valueKeys:[\"topLeft\",\"topRight\",\"bottomRight\",\"bottomLeft\"],valueLabels:[\"TL\",\"TR\",\"BR\",\"BL\"],min:0},border:borderPropertyControl(),shadows:{type:ControlType.BoxShadow,description:\"*Note:* Theming may not work properly in the editor or preview.\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ThemeImage\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"fixed\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}"],
  "mappings": "kOAAAA,IAA+Y,IAAMC,EAAgB,mBAAyBC,EAAY,2BAGxb,SAARC,EAA4BC,EAAM,CAAC,IAAIC,EAAYC,EAAa,GAAK,CAACC,EAAYC,CAAc,EAAEC,EAAS,IAAI,EAazH,OAb2HC,EAAU,IAAI,CAAC,IAAMC,EAAY,IAAI,CAGhK,IAAMC,EAAmB,SAAS,KAAK,aAAaX,CAAe,EACnE,GAAG,CAACW,GAAoBA,GAAoB,cAAe,GAAG,SAAS,KAAK,aAAa,mBAAmB,EAAGJ,EAAe,SAAS,KAAK,aAAa,mBAAmB,GAAG,MAAM,MAAO,CAAC,IAAMK,EAAW,OAAO,WAAW,8BAA8B,EAAEL,EAAeK,EAAW,OAAO,OACjSL,EAAeI,GAAoB,MAAM,CACvC,EACIE,EAAcC,GAAG,CAACP,EAAeO,EAAE,OAAO,CAAE,EAClDJ,EAAY,EACZ,OAAO,iBAAiBT,EAAYS,CAAW,EAC/C,IAAME,EAAW,OAAO,WAAW,8BAA8B,EAAE,OAAAA,EAAW,YAAYC,CAAa,EACjG,IAAI,CAAC,OAAO,oBAAoBZ,EAAYS,CAAW,EAAEE,EAAW,eAAeC,CAAa,CAAE,CAAE,EAAE,CAAC,CAAC,EAE3GP,IAAc,KAAa,KAC3B,EAAG,GAAAF,EAAYD,EAAM,QAAQ,MAAMC,IAAc,SAAcA,EAAY,MAAM,EAAG,GAAAC,EAAaF,EAAM,SAAS,MAAME,IAAe,SAAcA,EAAa,KAA0BU,EAAKC,EAAW,CAAC,MAAM,6BAA6B,SAAS,uFAAuF,CAAC,EAAuBC,EAAM,MAAM,CAAC,MAAM,CAAC,SAAS,WAAW,aAAad,EAAM,cAAc,GAAGA,EAAM,aAAaA,EAAM,cAAcA,EAAM,iBAAiBA,EAAM,eAAe,GAAGA,EAAM,WAAW,UAAUA,EAAM,QAAQ,GAAGA,EAAM,KAAK,EAAE,SAAS,CAAcY,EAAKG,EAAM,CAAC,WAAW,CAAC,IAAIf,EAAM,OAAO,GAAGG,EAAYH,EAAM,KAAKA,EAAM,KAAK,EAAE,MAAM,CAAC,aAAa,UAAU,GAAGA,EAAM,KAAK,CAAC,CAAC,EAAeY,EAAKI,EAAO,CAAC,GAAGhB,EAAM,MAAM,CAAC,CAAC,CAAC,CAAC,CAAE,CAACD,EAAW,YAAY,cAAckB,EAAoBlB,EAAW,CAAC,MAAM,CAAC,KAAKmB,EAAY,eAAe,EAAE,KAAK,CAAC,KAAKA,EAAY,eAAe,EAAE,OAAO,CAAC,KAAKA,EAAY,KAAK,aAAa,QAAQ,QAAQ,CAAC,OAAO,MAAM,SAAS,EAAE,aAAa,CAAC,OAAO,MAAM,SAAS,CAAC,EAAE,OAAO,CAAC,KAAKA,EAAY,YAAY,aAAa,EAAE,UAAU,gBAAgB,aAAa,CAAC,MAAM,YAAY,EAAE,UAAU,CAAC,UAAU,WAAW,cAAc,YAAY,EAAE,YAAY,CAAC,KAAK,KAAK,KAAK,IAAI,EAAE,IAAI,CAAC,EAAE,OAAOC,EAAsB,EAAE,QAAQ,CAAC,KAAKD,EAAY,UAAU,YAAY,iEAAiE,CAAC,CAAC",
  "names": ["init_ssg_sandbox_shims", "THEME_ATTRIBUTE", "SIGNAL_NAME", "ThemeImage", "props", "_props_dark", "_props_light", "isDarkTheme", "setIsDarkTheme", "ye", "ue", "updateTheme", "currentToggleState", "mediaQuery", "osThemeChange", "e", "p", "EmptyState", "u", "Image2", "Border", "addPropertyControls", "ControlType", "borderPropertyControl"]
}