{"version":3,"file":"ThemeToggle.C0vh-BCn.mjs","names":["React.useState"],"sources":["https:/framerusercontent.com/modules/AFYzei8GCq5u0ZEI32pL/svfjiP3u0vCMMXfC3w70/ThemeToggle.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType,RenderTarget}from\"framer\";const FALLBACK=\"dark\";const KEY=\"wallfolio-theme\";const STYLE_ID=\"wf-theme-style\";const EVENT=\"wf-theme-change\";// only the colour-style variables of a rule, never its other declarations\nfunction tokensOf(style){let text=\"\";for(let i=0;i<style.length;i++){const name=style[i];if(name.indexOf(\"--token-\")===0)text+=name+\":\"+style.getPropertyValue(name)+\";\";}return text;}// Colour styles live on the page root. The published site writes the dark ones inside\n// @media (prefers-color-scheme: dark) { body {…} }; the editor preview may write them in another\n// shape (another root selector, a theme attribute, a nested group), so this reads every shape:\n// a rule is \"dark\" when it sits in a dark media query or its selector names dark.\nfunction collect(rules,inDark,out){for(const rule of Array.from(rules)){const media=rule.media?String(rule.media.mediaText||\"\"):\"\";const dark=inDark||media.indexOf(\"prefers-color-scheme\")>=0&&media.indexOf(\"dark\")>=0;const selector=rule.selectorText?String(rule.selectorText):\"\";if(selector&&rule.style&&selector.indexOf(\"data-wf-theme\")<0&&/(^|,)\\s*(html|body|:root)/.test(selector)){const text=tokensOf(rule.style);if(text){if(dark||/dark/i.test(selector))out.dark+=text;else out.light+=text;}}let inner=null;try{inner=rule.cssRules||null;}catch(e){}if(inner&&inner.length)collect(inner,dark,out);}}function readTokens(){const out={light:\"\",dark:\"\"};const sheets=Array.from(document.styleSheets);const adopted=document.adoptedStyleSheets;if(adopted&&adopted.length)sheets.push(...Array.from(adopted));for(const sheet of sheets){let rules=null;try{rules=sheet.cssRules;}catch(e){continue;}if(rules)collect(rules,false,out);}return out;}// which themes this page can be forced into (both, once the light and the dark colours were found)\nconst found={light:false,dark:false};// the last colours that were read, kept for a moment when the page is rewriting its CSS\nconst last={light:\"\",dark:\"\",css:\"\"};// The colours are read again every time, never cached: a colour style that is added or changed while\n// the page is open (the editor preview does that) would otherwise keep its value from the other theme.\nfunction buildStyle(){const t=readTokens();const light=t.light||last.light;const dark=t.dark||last.dark;if(!light&&!dark)return;last.light=light;last.dark=dark;found.light=!!light;found.dark=!!dark;// the doubled attribute outranks any theme selector the page itself uses\nconst sel=m=>\"html[data-wf-theme=\"+m+\"][data-wf-theme]\";let css=\"\";if(light)css+=sel(\"light\")+\"{color-scheme:light}\"+sel(\"light\")+\" body{\"+light+\"}\";if(dark)css+=sel(\"dark\")+\"{color-scheme:dark}\"+sel(\"dark\")+\" body{\"+light+dark+\"}\";let style=document.getElementById(STYLE_ID);if(style&&css===last.css)return;if(!style){style=document.createElement(\"style\");style.id=STYLE_ID;document.head.appendChild(style);}style.textContent=css;last.css=css;}function applyMode(mode){if(typeof document===\"undefined\")return;const root=document.documentElement;buildStyle();// a theme whose colours could not be read is never forced: the page keeps following the device\n// (or the editor preview), instead of being stuck on the other theme\nif(found[mode])root.setAttribute(\"data-wf-theme\",mode);else root.removeAttribute(\"data-wf-theme\");}// the site default comes from the head script (data-wf-default); FALLBACK when that script is missing\nfunction defaultMode(){if(typeof document===\"undefined\")return FALLBACK;const d=document.documentElement.getAttribute(\"data-wf-default\");return d===\"light\"||d===\"dark\"?d:FALLBACK;}// The Framer editor preview never remembers a choice: every time it is opened it shows the default\n// theme, so the template is always seen the way a new visitor sees it. Only the published site saves.\nfunction inEditor(){if(typeof window===\"undefined\")return false;if(/(^|\\.)(framer\\.com|framercanvas\\.com)$/.test(window.location.hostname))return true;// the preview runs inside the editor's frame and without the site's head script\nlet framed=true;try{framed=window.self!==window.top;}catch(e){}return framed&&!document.documentElement.hasAttribute(\"data-wf-default\");}// the choice made since this page was opened (kept when a toggle is re-created, e.g. on a resize)\nlet session=null;function stored(){if(session)return session;if(!inEditor()){try{const v=window.localStorage.getItem(KEY);if(v===\"light\"||v===\"dark\")return v;}catch(e){}}return defaultMode();}// one watcher for all toggles: re-apply the theme when the page changes its CSS\nlet watchers=0;let stopWatching=null;function watch(){watchers++;if(stopWatching||typeof MutationObserver===\"undefined\")return;let timer=0;const refresh=()=>applyMode(stored());const observer=new MutationObserver(()=>{window.clearTimeout(timer);timer=window.setTimeout(refresh,120);});observer.observe(document.head,{childList:true,subtree:true,characterData:true});// rules the editor inserts without touching the DOM are caught by a slow re-read (editor only)\nconst interval=inEditor()?window.setInterval(refresh,2e3):0;stopWatching=()=>{observer.disconnect();window.clearTimeout(timer);if(interval)window.clearInterval(interval);};}function unwatch(){watchers--;if(watchers>0||!stopWatching)return;stopWatching();stopWatching=null;}function Icon({name}){const common={width:14,height:14,viewBox:\"0 0 24 24\",fill:\"none\",stroke:\"currentColor\",strokeWidth:1.8,strokeLinecap:\"round\",strokeLinejoin:\"round\",\"aria-hidden\":true};if(name===\"light\")return /*#__PURE__*/_jsxs(\"svg\",{...common,children:[/*#__PURE__*/_jsx(\"circle\",{cx:\"12\",cy:\"12\",r:\"4\"}),/*#__PURE__*/_jsx(\"path\",{d:\"M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4\"})]});return /*#__PURE__*/_jsx(\"svg\",{...common,children:/*#__PURE__*/_jsx(\"path\",{d:\"M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5Z\"})});}const MODES=[\"dark\",\"light\"];const LABELS={dark:\"Dark theme\",light:\"Light theme\"};/**\n * @framerSupportedLayoutWidth auto\n * @framerSupportedLayoutHeight auto\n */export default function ThemeToggle(props){const{trackColor,thumbColor,borderColor,iconColor,activeIconColor}=props;const[mode,setMode]=React.useState(FALLBACK);// no slide on the first paint: the thumb starts on the saved theme, it only animates on a click\nconst[ready,setReady]=React.useState(false);const isCanvas=RenderTarget.current()===RenderTarget.canvas;React.useEffect(()=>{if(isCanvas)return;const m=stored();setMode(m);applyMode(m);const frame=window.requestAnimationFrame(()=>setReady(true));// the editor preview can add its colour CSS after this component mounts: read again shortly after\nconst retries=[300,1500].map(ms=>window.setTimeout(()=>applyMode(stored()),ms));const onChange=e=>setMode(e.detail);window.addEventListener(EVENT,onChange);watch();return()=>{unwatch();window.cancelAnimationFrame(frame);retries.forEach(id=>window.clearTimeout(id));window.removeEventListener(EVENT,onChange);};},[isCanvas]);const choose=m=>{setMode(m);if(isCanvas)return;session=m;if(!inEditor()){try{window.localStorage.setItem(KEY,m);}catch(e){}}applyMode(m);window.dispatchEvent(new CustomEvent(EVENT,{detail:m}));};const index=MODES.indexOf(mode);return /*#__PURE__*/_jsxs(\"div\",{role:\"group\",\"aria-label\":\"Theme\",style:{...props.style,position:\"relative\",display:\"grid\",gridTemplateColumns:\"repeat(2, 32px)\",padding:2,borderRadius:10,background:trackColor,boxShadow:\"inset 0 0 0 1px \"+borderColor,width:\"max-content\"},children:[/*#__PURE__*/_jsx(\"span\",{\"aria-hidden\":\"true\",style:{position:\"absolute\",top:2,bottom:2,left:2,width:32,borderRadius:8,background:thumbColor,boxShadow:\"0 1px 2px rgba(0,0,0,0.08), 0 0 0 1px \"+borderColor,transform:\"translateX(\"+index*32+\"px)\",transition:ready?\"transform 0.3s cubic-bezier(0.22, 1, 0.36, 1)\":\"none\"}}),MODES.map(m=>/*#__PURE__*/_jsx(\"button\",{type:\"button\",\"aria-label\":LABELS[m],\"aria-pressed\":mode===m,onClick:()=>choose(m),style:{position:\"relative\",zIndex:1,display:\"grid\",placeItems:\"center\",width:32,height:24,padding:0,border:0,background:\"transparent\",cursor:\"pointer\",color:mode===m?activeIconColor:iconColor,transition:\"color 0.2s ease\"},children:/*#__PURE__*/_jsx(Icon,{name:m})},m))]});}addPropertyControls(ThemeToggle,{trackColor:{type:ControlType.Color,title:\"Track\",defaultValue:\"#F4F4F4\"},thumbColor:{type:ControlType.Color,title:\"Thumb\",defaultValue:\"#FFFFFF\"},borderColor:{type:ControlType.Color,title:\"Border\",defaultValue:\"rgba(0,0,0,0.08)\"},iconColor:{type:ControlType.Color,title:\"Icon\",defaultValue:\"#666666\"},activeIconColor:{type:ControlType.Color,title:\"Active Icon\",defaultValue:\"#0A0A0A\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ThemeToggle\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerSupportedLayoutWidth\":\"auto\",\"framerSupportedLayoutHeight\":\"auto\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ThemeToggle.map"],"mappings":"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"}