{"version":3,"file":"StatusBarColorController.TYdrlGep.mjs","names":["useRef","useState"],"sources":["https:/framerusercontent.com/modules/IdLSb1QGVtAHZoI8aMK6/P5UoCuhQ9FcFY2asvEkO/StatusBarColorController.js"],"sourcesContent":["// Component to control mobile status bar color per page\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useEffect,useRef,useState}from\"react\";import{addPropertyControls}from\"framer\";/**\n * Status Bar Color Controller\n * \n * Controls the mobile browser status bar color using meta theme-color tag.\n * Automatically detects the background color of its parent element.\n * Place this component on each page where you want a different status bar color.\n *\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n */export default function StatusBarColorController(props){const containerRef=useRef(null);const[detectedColor,setDetectedColor]=useState(\"#FFFFFF\");useEffect(()=>{if(typeof document===\"undefined\"||!containerRef.current)return;// Get parent element's background color\nconst parentElement=containerRef.current.parentElement;if(parentElement){const computedStyle=window.getComputedStyle(parentElement);let bgColor=computedStyle.backgroundColor;// If parent has transparent background, traverse up to find a solid color\nlet currentElement=parentElement;while(bgColor===\"rgba(0, 0, 0, 0)\"||bgColor===\"transparent\"){currentElement=currentElement.parentElement;if(!currentElement||currentElement===document.body){bgColor=\"#FFFFFF\";break;}bgColor=window.getComputedStyle(currentElement).backgroundColor;}setDetectedColor(bgColor);}},[]);useEffect(()=>{if(typeof document===\"undefined\")return;let metaTag=document.querySelector('meta[name=\"theme-color\"]');if(!metaTag){metaTag=document.createElement(\"meta\");metaTag.setAttribute(\"name\",\"theme-color\");document.head.appendChild(metaTag);}metaTag.setAttribute(\"content\",detectedColor);return()=>{const defaultMetaTag=document.querySelector('meta[name=\"theme-color\"]');if(defaultMetaTag){defaultMetaTag.setAttribute(\"content\",\"#FFFFFF\");}};},[detectedColor]);return /*#__PURE__*/_jsx(\"div\",{ref:containerRef,style:{width:\"100%\",height:\"100%\",display:\"flex\",alignItems:\"center\",justifyContent:\"center\",backgroundColor:\"#F5F5F5\",borderRadius:8,padding:16,position:\"relative\"},children:/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",flexDirection:\"column\",alignItems:\"center\",gap:8},children:[/*#__PURE__*/_jsx(\"div\",{style:{width:40,height:40,borderRadius:8,backgroundColor:detectedColor,border:\"2px solid #EEEEEE\"}}),/*#__PURE__*/_jsx(\"span\",{style:{fontSize:12,color:\"#666\",fontFamily:\"system-ui, -apple-system, sans-serif\",fontWeight:500},children:\"Status Bar Color\"})]})});}addPropertyControls(StatusBarColorController,{});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"StatusBarColorController\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"fixed\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./StatusBarColorController.map"],"mappings":"sMAUG,SAAwB,EAAyB,EAAM,CAAC,IAAM,EAAaA,EAAO,IAAI,EAAO,CAAC,EAAc,GAAkBC,EAAS,SAAS,EAE0nB,OAFxnB,MAAc,CAAC,GAAG,OAAO,SAAW,KAAa,CAAC,EAAa,QAAQ,OAC5N,IAAM,EAAc,EAAa,QAAQ,cAAc,GAAG,EAAc,CAA4D,IAAI,EAA3C,EAAO,iBAAiB,CAAuC,CAAC,CAAC,gBAC1J,EAAe,EAAc,KAAM,IAAU,oBAAoB,IAAU,eAAc,CAA6C,GAA5C,EAAe,EAAe,cAAiB,CAAC,GAAgB,IAAiB,SAAS,KAAK,CAAC,EAAQ,UAAU,KAAM,CAAC,EAAQ,EAAO,iBAAiB,CAAc,CAAC,CAAC,eAAgB,CAAC,EAAiB,CAAO,CAAE,CAAC,EAAE,CAAC,CAAC,EAAE,MAAc,CAAC,GAAG,OAAO,SAAW,IAAY,OAAO,IAAI,EAAQ,SAAS,cAAc,0BAA0B,EAAmL,OAA7K,IAAS,EAAQ,SAAS,cAAc,MAAM,EAAE,EAAQ,aAAa,OAAO,aAAa,EAAE,SAAS,KAAK,YAAY,CAAO,GAAG,EAAQ,aAAa,UAAU,CAAa,MAAY,CAAC,IAAM,EAAe,SAAS,cAAc,0BAA0B,EAAK,GAAgB,EAAe,aAAa,UAAU,SAAS,CAAG,CAAE,EAAE,CAAC,CAAa,CAAC,EAAsB,EAAK,MAAM,CAAC,IAAI,EAAa,MAAM,CAAC,MAAM,OAAO,OAAO,OAAO,QAAQ,OAAO,WAAW,SAAS,eAAe,SAAS,gBAAgB,UAAU,aAAa,EAAE,QAAQ,GAAG,SAAS,UAAU,EAAE,SAAsB,EAAM,MAAM,CAAC,MAAM,CAAC,QAAQ,OAAO,cAAc,SAAS,WAAW,SAAS,IAAI,CAAC,EAAE,SAAS,CAAc,EAAK,MAAM,CAAC,MAAM,CAAC,MAAM,GAAG,OAAO,GAAG,aAAa,EAAE,gBAAgB,EAAc,OAAO,mBAAmB,CAAC,CAAC,EAAe,EAAK,OAAO,CAAC,MAAM,CAAC,SAAS,GAAG,MAAM,OAAO,WAAW,uCAAuC,WAAW,GAAG,EAAE,SAAS,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAE,qBAX9zC,IAA6C,IAAwC,EAW0uC,EAAoB,EAAyB,CAAC,CAAC"}