{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/oz8LbimHQqM5Ulxjy5PL/63NOHRJBG0y8vy7aGgiy/ThemeImage.js"],
  "sourcesContent": ["import { jsx as _jsx } from \"react/jsx-runtime\";\nimport { addPropertyControls, ControlType } from \"framer\";\nimport { useState, useEffect } from \"react\"; /**\n                                             * @framerSupportedLayoutWidth fixed\n                                             * @framerSupportedLayoutHeight fixed\n                                             * @framerDisableUnlink\n                                             */\nexport default function ThemeImage(props) {\n  const [isDarkTheme, setIsDarkTheme] = useState(false);\n  useEffect(() => {\n    const mediaQuery = window.matchMedia(\"(prefers-color-scheme: dark)\");\n    setIsDarkTheme(mediaQuery.matches);\n    const listener = e => setIsDarkTheme(e.matches);\n    mediaQuery.addEventListener(\"change\", listener);\n    return () => mediaQuery.removeEventListener(\"change\", listener);\n  }, []);\n  const imageSrc = isDarkTheme ? props.dark : props.light;\n  return /*#__PURE__*/_jsx(\"img\", {\n    src: imageSrc ? imageSrc.src : \"\",\n    alt: imageSrc ? imageSrc.alt : \"\",\n    style: {\n      width: \"100%\",\n      height: \"100%\",\n      objectFit: props.sizing,\n      borderRadius: props.radiusIsMixed ? `${props.topLeft}px ${props.topRight}px ${props.bottomRight}px ${props.bottomLeft}px` : `${props.radius}px`\n    }\n  });\n}\n;\nThemeImage.displayName = \"Theme Image\";\nThemeImage.defaultProps = {\n  light: \"\",\n  dark: \"\",\n  sizing: \"cover\",\n  radius: 0,\n  radiusIsMixed: false,\n  topLeft: 0,\n  topRight: 0,\n  bottomRight: 0,\n  bottomLeft: 0\n};\naddPropertyControls(ThemeImage, {\n  light: {\n    type: ControlType.ResponsiveImage\n  },\n  dark: {\n    type: ControlType.ResponsiveImage\n  },\n  sizing: {\n    type: ControlType.Enum,\n    defaultValue: ThemeImage.defaultProps.sizing,\n    options: [\"cover\", \"contain\", \"fill\"],\n    optionTitles: [\"Fill\", \"Fit\", \"Stretch\"]\n  },\n  radius: {\n    type: ControlType.FusedNumber,\n    defaultValue: ThemeImage.defaultProps.radius,\n    toggleKey: \"radiusIsMixed\",\n    toggleTitles: [\"All\", \"Individual\"],\n    valueKeys: [\"topLeft\", \"topRight\", \"bottomRight\", \"bottomLeft\"],\n    valueLabels: [\"TL\", \"TR\", \"BR\", \"BL\"],\n    min: 0,\n    description: \"*Note:* Theming doesn't work properly on the canvas or in preview mode.\"\n  }\n});\nexport const __FramerMetadata__ = {\n  \"exports\": {\n    \"default\": {\n      \"type\": \"reactComponent\",\n      \"name\": \"ThemeImage\",\n      \"slots\": [],\n      \"annotations\": {\n        \"framerSupportedLayoutWidth\": \"fixed\",\n        \"framerContractVersion\": \"1\",\n        \"framerSupportedLayoutHeight\": \"fixed\",\n        \"framerDisableUnlink\": \"\"\n      }\n    },\n    \"__FramerMetadata__\": {\n      \"type\": \"variable\"\n    }\n  }\n};\n//# sourceMappingURL=./ThemeImage.map"],
  "mappings": "iJAOe,SAARA,EAA4BC,EAAO,CACxC,GAAM,CAACC,EAAaC,CAAc,EAAIC,EAAS,EAAK,EACpDC,EAAU,IAAM,CACd,IAAMC,EAAaC,EAAO,WAAW,8BAA8B,EACnEJ,EAAeG,EAAW,OAAO,EACjC,IAAME,EAAWC,GAAKN,EAAeM,EAAE,OAAO,EAC9C,OAAAH,EAAW,iBAAiB,SAAUE,CAAQ,EACvC,IAAMF,EAAW,oBAAoB,SAAUE,CAAQ,CAChE,EAAG,CAAC,CAAC,EACL,IAAME,EAAWR,EAAcD,EAAM,KAAOA,EAAM,MAClD,OAAoBU,EAAK,MAAO,CAC9B,IAAKD,EAAWA,EAAS,IAAM,GAC/B,IAAKA,EAAWA,EAAS,IAAM,GAC/B,MAAO,CACL,MAAO,OACP,OAAQ,OACR,UAAWT,EAAM,OACjB,aAAcA,EAAM,cAAgB,GAAGA,EAAM,aAAaA,EAAM,cAAcA,EAAM,iBAAiBA,EAAM,eAAiB,GAAGA,EAAM,UACvI,CACF,CAAC,CACH,CAEAD,EAAW,YAAc,cACzBA,EAAW,aAAe,CACxB,MAAO,GACP,KAAM,GACN,OAAQ,QACR,OAAQ,EACR,cAAe,GACf,QAAS,EACT,SAAU,EACV,YAAa,EACb,WAAY,CACd,EACAY,EAAoBZ,EAAY,CAC9B,MAAO,CACL,KAAMa,EAAY,eACpB,EACA,KAAM,CACJ,KAAMA,EAAY,eACpB,EACA,OAAQ,CACN,KAAMA,EAAY,KAClB,aAAcb,EAAW,aAAa,OACtC,QAAS,CAAC,QAAS,UAAW,MAAM,EACpC,aAAc,CAAC,OAAQ,MAAO,SAAS,CACzC,EACA,OAAQ,CACN,KAAMa,EAAY,YAClB,aAAcb,EAAW,aAAa,OACtC,UAAW,gBACX,aAAc,CAAC,MAAO,YAAY,EAClC,UAAW,CAAC,UAAW,WAAY,cAAe,YAAY,EAC9D,YAAa,CAAC,KAAM,KAAM,KAAM,IAAI,EACpC,IAAK,EACL,YAAa,yEACf,CACF,CAAC",
  "names": ["ThemeImage", "props", "isDarkTheme", "setIsDarkTheme", "ye", "ue", "mediaQuery", "window", "listener", "e", "imageSrc", "p", "addPropertyControls", "ControlType"]
}