{"version":3,"file":"Examples.DgsVldlD.mjs","names":[],"sources":["https:/framerusercontent.com/modules/crN8RZXYQqctdGexRcnr/ZzoG41dXsBj58KUayzH8/Examples.js"],"sourcesContent":["import{jsx as _jsx}from\"react/jsx-runtime\";import{useEffect}from\"react\";import{createStore}from\"https://framer.com/m/framer/store.js@^1.0.0\";import{randomColor}from\"https://framer.com/m/framer/utils.js@^0.9.0\";// Learn more: https://www.framer.com/docs/guides/overrides/\nconst useStore=createStore({backgroundColor:\"rgba(0, 0, 0, 0)\"});export function withScrollChangeColor(Component){return props=>{const[store,setStore]=useStore();useEffect(()=>{const handleScroll=()=>{// Define the background color based on scroll position\nconst backgroundColor=window.scrollY>200?\"rgba(7, 41, 64, 0.85)\"//  when scrolled\n:\"rgba(11, 42, 66, 0.80)\"// by default\n;const backdropFilter=\"blur(12px)\"// Apply blur effect\n;setStore({backgroundColor,backdropFilter});};// Add scroll event listener\nwindow.addEventListener(\"scroll\",handleScroll);// Clean up the event listener on component unmount\nreturn()=>window.removeEventListener(\"scroll\",handleScroll);},[setStore]);return /*#__PURE__*/_jsx(Component,{...props,style:{backgroundColor:store.backgroundColor,backdropFilter:store.backdropFilter,transition:\"background-color 0.77s ease\",// Ensure other styles are not overwritten\n...props.style}});};}export function withHover(Component){return props=>{return /*#__PURE__*/_jsx(Component,{...props,whileHover:{scale:1.05}});};}export function withRandomColor(Component){return props=>{const[store,setStore]=useStore();return /*#__PURE__*/_jsx(Component,{...props,animate:{background:store.background},onClick:()=>{setStore({background:randomColor()});}});};}\nexport const __FramerMetadata__ = {\"exports\":{\"withRandomColor\":{\"type\":\"reactHoc\",\"name\":\"withRandomColor\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withHover\":{\"type\":\"reactHoc\",\"name\":\"withHover\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withScrollChangeColor\":{\"type\":\"reactHoc\",\"name\":\"withScrollChangeColor\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Examples.map"],"mappings":"2LACiE,SAAgB,EAAsB,EAAU,CAAC,MAAO,IAAO,CAAC,GAAK,CAAC,EAAM,GAAU,GAAU,CAMvF,OANwF,MAAc,CAAC,IAAM,MAAiB,CAIvM,EAAS,CAAC,gBAHW,EAAO,QAAQ,IAAI,wBACxC,yBAE0B,eADL,aACoB,CAAC,EAE3C,OADA,EAAO,iBAAiB,SAAS,EAAa,KACpC,EAAO,oBAAoB,SAAS,EAAa,EAAG,CAAC,EAAS,CAAC,CAAqB,EAAK,EAAU,CAAC,GAAG,EAAM,MAAM,CAAC,gBAAgB,EAAM,gBAAgB,eAAe,EAAM,eAAe,WAAW,8BACnN,GAAG,EAAM,MAAM,CAAC,CAAC,yBAR0B,IAA6B,IAAqE,IAAqE,CAC5M,EAAS,EAAY,CAAC,gBAAgB,mBAAmB,CAAC"}