{"version":3,"file":"GradientBackground.ChIv39St.mjs","names":["useLayoutEffect","useEffect","React.useState","React.useRef"],"sources":["https:/framerusercontent.com/modules/5sD1L34Nn4AzaFRyCPrW/BT9HMtTDsUFnXFBXXei7/useIsomorphicLayoutEffect.js","https:/framer.com/m/framer/useIsomorphicLayoutEffect.js@^0.2.0","https:/framerusercontent.com/modules/GBoYA6hnuFwSZZCbht26/cguAGhuQfx1BXbfShe7V/useMeasuredSize.js","https:/framer.com/m/framer/useMeasuredSize.js","https:/framerusercontent.com/modules/keVcl2Z4IoymsU28A27O/h5m7bEGbDkZ8lSrXt0cT/GradientBackground.js"],"sourcesContent":["import{useLayoutEffect,useEffect}from\"react\";/**\n * Swaps `useLayoutEffect` for `useEffect` on the server to avoid React warnings.\n * NOTE! The effect won't run on the server.\n */ export const useIsomorphicLayoutEffect=typeof document!==\"undefined\"?useLayoutEffect:useEffect;\nexport const __FramerMetadata__ = {\"exports\":{\"useIsomorphicLayoutEffect\":{\"type\":\"variable\",\"annotations\":{\"framerContractVersion\":\"1\"}}}}\n//# sourceMappingURL=./useIsomorphicLayoutEffect.map","/*\n * useIsomorphicLayoutEffect (framer/useIsomorphicLayoutEffect@0.2.0)\n *\n * Learn More: https://www.framer.com/asset-urls\n */\n\nexport * from \"https://framerusercontent.com/modules/5sD1L34Nn4AzaFRyCPrW/BT9HMtTDsUFnXFBXXei7/useIsomorphicLayoutEffect.js\"\n","import*as React from\"react\";import{useIsomorphicLayoutEffect}from\"https://framer.com/m/framer/useIsomorphicLayoutEffect.js@^0.2.0\";let safeResizeObserver=undefined;try{if(typeof window!==undefined){safeResizeObserver=window.ResizeObserver;}}catch(e){// happy linting!\n}class SharedObserver{//@ts-ignore\nupdateResizedElements(entries){for(const entry of entries){const callbackForElement=this.callbacks.get(entry.target);if(callbackForElement)callbackForElement(entry.contentRect);}}observeElementWithCallback(element,callback){if(!this.sharedResizeObserver)return;this.sharedResizeObserver.observe(element);this.callbacks.set(element,callback);}unobserve(element){if(!this.sharedResizeObserver)return;this.sharedResizeObserver.unobserve(element);this.callbacks.delete(element);}constructor(){this.callbacks=new WeakMap();const ResizeObserver1=safeResizeObserver;if(!ResizeObserver1)return;this.sharedResizeObserver=new ResizeObserver1(this.updateResizedElements.bind(this));}}const sharedResizeObserver=new SharedObserver();/**\n * Uses a globally shared resize observer, and returns an updated\n * size object when the element's size changes. This is the recommended way to\n * use a Resize Observer: https://github.com/WICG/resize-observer/issues/59.\n */ export function useMeasuredSize(ref,callback){const[size,setSize]=React.useState(null);function updateSize(newSize){if(!size||newSize.height!==size.height||newSize.width!==size.width){if(callback)callback(newSize);setSize({width:newSize.width,height:newSize.height});}}// On mount, immediately measure and set a size. This will defer paint until\n// no more updates are scheduled. Additionally add our element to the shared\n// ResizeObserver with a callback to perform when the element resizes.\n// Finally, remove the element from the observer when the component is unmounted.\nuseIsomorphicLayoutEffect(()=>{if(!ref.current)return;const{offsetWidth,offsetHeight}=ref.current;// Defer paint until initial size is added.\nupdateSize({width:offsetWidth,height:offsetHeight});// Resize observer will race to add the initial size, but since the size\n// is set above, it won't trigger a render on mount since it should\n// match the measured size. Future executions of the callback will\n// trigger renders if the size changes.\nsharedResizeObserver.observeElementWithCallback(ref.current,updateSize);return()=>{if(!ref.current)return;sharedResizeObserver.unobserve(ref.current);};},[]);return size;}export function useSizeChange(ref,callback){const size=React.useRef(null);const updateSize=React.useCallback(newSize=>{if(!size.current||newSize.height!==size.current.height||newSize.width!==size.current.width){size.current={width:newSize.width,height:newSize.height};if(callback)callback(size.current);}},[callback]);// On mount, immediately measure and set a size. This will defer paint until\n// no more updates are scheduled. Additionally add our element to the shared\n// ResizeObserver with a callback to perform when the element resizes.\n// Finally, remove the element from the observer when the component is unmounted.\nuseIsomorphicLayoutEffect(()=>{if(!ref.current)return;const{offsetWidth,offsetHeight}=ref.current;// Defer paint until initial size is added.\nupdateSize({width:offsetWidth,height:offsetHeight});// Resize observer will race to add the initial size, but since the size\n// is set above, it won't trigger a render on mount since it should\n// match the measured size. Future executions of the callback will\n// trigger renders if the size changes.\nsharedResizeObserver.observeElementWithCallback(ref.current,updateSize);return()=>{if(!ref.current)return;sharedResizeObserver.unobserve(ref.current);};},[callback]);return null;}\nexport const __FramerMetadata__ = {\"exports\":{\"useSizeChange\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"useMeasuredSize\":{\"type\":\"function\",\"annotations\":{\"framerContractVersion\":\"1\"}}}}\n//# sourceMappingURL=./useMeasuredSize.map","/*\n * useMeasuredSize (framer/useMeasuredSize@0.13.0)\n *\n * Learn More: https://www.framer.com/asset-urls\n */\n\nexport * from \"https://framerusercontent.com/modules/GBoYA6hnuFwSZZCbht26/cguAGhuQfx1BXbfShe7V/useMeasuredSize.js\"\n","import{jsx as _jsx}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType}from\"framer\";import{useMeasuredSize}from\"https://framer.com/m/framer/useMeasuredSize.js\";export default function GradientBackground(props){const{color1,color2,spread}=props;const container=React.useRef();const size=useMeasuredSize(container);const percentageOut=spread;const percentageIn=percentageOut*.5;const style={display:\"flex\",flexDirection:\"column\",justifyContent:\"flex-start\",alignItems:\"center\",width:\"100%\",height:\"100%\",// Custom CSS properties\noverflow:\"hidden\",backgroundImage:`\n            repeating-linear-gradient(0deg, ${color1} 0%, ${color2} ${percentageIn}%, ${color1} ${percentageOut}%)\n        `,backgroundSize:\"100% 100%, 100% 100%\"};return /*#__PURE__*/_jsx(\"div\",{style:style});}// Default properties for the canvas\nGradientBackground.defaultProps={color1:\"#000\",color2:\"#FFF\",spread:100};// This allows you to edit the styles in the Framer UI\naddPropertyControls(GradientBackground,{color1:{type:ControlType.Color,title:\"Color 1\"},color2:{type:ControlType.Color,title:\"Color 2\"},spread:{type:ControlType.Number,title:\"Spread\",max:100,min:0}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"GradientBackground\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./GradientBackground.map"],"mappings":"gOAA6C,CAG5B,EAA0B,OAAO,SAAW,IAAYA,EAAgBC,sBEGrF,SAAgB,EAAgB,EAAI,EAAS,CAAC,GAAK,CAAC,EAAK,GAASC,EAAe,KAAK,CAAC,SAAS,EAAW,EAAQ,EAAI,CAAC,GAAM,EAAQ,SAAS,EAAK,QAAQ,EAAQ,QAAQ,EAAK,SAAU,GAAS,EAAS,EAAQ,CAAC,EAAQ,CAAC,MAAM,EAAQ,MAAM,OAAO,EAAQ,OAAO,CAAC,EAShH,OAL9J,MAA8B,CAAC,GAAG,CAAC,EAAI,QAAQ,OAAO,GAAK,CAAC,cAAY,gBAAc,EAAI,QAKlB,OAJxE,EAAW,CAAC,MAAM,EAAY,OAAO,EAAa,CAAC,CAInD,EAAqB,2BAA2B,EAAI,QAAQ,EAAW,KAAW,CAAK,EAAI,SAAe,EAAqB,UAAU,EAAI,QAAQ,GAAK,EAAE,CAAC,CAAQ,6BAfzI,IAAuG,CAAI,EAAmB,IAAA,GAAU,GAAG,CAA+B,EAAmB,EAAO,oBAAyB,EAClP,EAAN,KAAoB,CACrB,sBAAsB,EAAQ,CAAC,IAAI,IAAM,KAAS,EAAQ,CAAC,IAAM,EAAmB,KAAK,UAAU,IAAI,EAAM,OAAO,CAAI,GAAmB,EAAmB,EAAM,YAAY,EAAG,2BAA2B,EAAQ,EAAS,CAAK,KAAK,uBAA4B,KAAK,qBAAqB,QAAQ,EAAQ,CAAC,KAAK,UAAU,IAAI,EAAQ,EAAS,EAAE,UAAU,EAAQ,CAAK,KAAK,uBAA4B,KAAK,qBAAqB,UAAU,EAAQ,CAAC,KAAK,UAAU,OAAO,EAAQ,EAAE,aAAa,CAAC,KAAK,UAAU,IAAI,QAAU,IAAM,EAAgB,EAAuB,IAAuB,KAAK,qBAAqB,IAAI,EAAgB,KAAK,sBAAsB,KAAK,KAAK,CAAC,IAAS,EAAqB,IAAI,sBEFzf,SAAwB,EAAmB,EAAM,CAAC,GAAK,CAAC,SAAO,SAAO,UAAQ,EAAgD,EAA1BC,GAAc,CAAsC,CAAC,IAAM,EAAc,EAGnU,OAAoB,EAAK,MAAM,CAAC,MAH0V,CAAC,QAAQ,OAAO,cAAc,SAAS,eAAe,aAAa,WAAW,SAAS,MAAM,OAAO,OAAO,OACthB,SAAS,SAAS,gBAAgB;8CACY,EAAO,OAAO,EAAO,GAF2U,EAAc,GAEzU,KAAK,EAAO,GAAG,EAAc;UACtG,eAAe,uBAAuB,CAA6C,CAAC,kBAHnD,IAA4B,IAAoD,IAA4E,CAIvM,EAAmB,aAAa,CAAC,OAAO,OAAO,OAAO,OAAO,OAAO,IAAI,CACxE,EAAoB,EAAmB,CAAC,OAAO,CAAC,KAAK,EAAY,MAAM,MAAM,UAAU,CAAC,OAAO,CAAC,KAAK,EAAY,MAAM,MAAM,UAAU,CAAC,OAAO,CAAC,KAAK,EAAY,OAAO,MAAM,SAAS,IAAI,IAAI,IAAI,EAAE,CAAC,CAAC"}