{"version":3,"file":"Examples.DR4pRCBx.mjs","names":[],"sources":["https:/framerusercontent.com/modules/DgCUAOA6NmbRJDyLLy6D/zDikdBkIUTTi9WbaKX7c/Examples.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{forwardRef}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/developers/overrides/\nconst useStore=createStore({background:\"#0099FF\"});export function withRotate(Component){return /*#__PURE__*/forwardRef((props,ref)=>{return /*#__PURE__*/_jsx(Component,{ref:ref,...props,animate:{rotate:90},transition:{duration:2}});});}export function withHover(Component){return /*#__PURE__*/forwardRef((props,ref)=>{return /*#__PURE__*/_jsx(Component,{ref:ref,...props,whileHover:{scale:1.05}});});}export function withRandomColor(Component){return /*#__PURE__*/forwardRef((props,ref)=>{const[store,setStore]=useStore();return /*#__PURE__*/_jsx(Component,{ref:ref,...props,animate:{background:store.background},onClick:()=>{setStore({background:randomColor()});}});});}export function withGrainBackground(Component){return /*#__PURE__*/forwardRef((props,ref)=>{return /*#__PURE__*/_jsxs(\"div\",{style:{position:\"relative\",width:\"100%\",height:\"100%\"},children:[/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:0,left:0,right:0,bottom:0,background:`url(\"data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.15'/%3E%3C/svg%3E\")`,mixBlendMode:\"overlay\",pointerEvents:\"none\",zIndex:1}}),/*#__PURE__*/_jsx(Component,{ref:ref,...props,style:{...props.style,position:\"relative\",zIndex:0}})]});});}export function withSubtleGrain(Component){return /*#__PURE__*/forwardRef((props,ref)=>{return /*#__PURE__*/_jsxs(\"div\",{style:{position:\"relative\",width:\"100%\",height:\"100%\"},children:[/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:0,left:0,right:0,bottom:0,background:`url(\"data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E\")`,mixBlendMode:\"overlay\",pointerEvents:\"none\",zIndex:1}}),/*#__PURE__*/_jsx(Component,{ref:ref,...props,style:{...props.style,position:\"relative\",zIndex:0}})]});});}export function withStaticGrain(Component){return /*#__PURE__*/forwardRef((props,ref)=>{return /*#__PURE__*/_jsxs(\"div\",{style:{position:\"relative\",width:\"100%\",height:\"100%\"},children:[/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:0,left:0,right:0,bottom:0,background:`url(\"data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.15'/%3E%3C/svg%3E\")`,mixBlendMode:\"overlay\",pointerEvents:\"none\",zIndex:1}}),/*#__PURE__*/_jsx(Component,{ref:ref,...props,style:{...props.style,position:\"relative\",zIndex:0}})]});});}export function withCustomGrain(intensity=.1){return function(Component){return /*#__PURE__*/forwardRef((props,ref)=>{return /*#__PURE__*/_jsxs(\"div\",{style:{position:\"relative\",width:\"100%\",height:\"100%\"},children:[/*#__PURE__*/_jsx(\"div\",{style:{position:\"absolute\",top:0,left:0,right:0,bottom:0,background:`url(\"data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='${intensity}'/%3E%3C/svg%3E\")`,mixBlendMode:\"overlay\",pointerEvents:\"none\",zIndex:1}}),/*#__PURE__*/_jsx(Component,{ref:ref,...props,style:{...props.style,position:\"relative\",zIndex:0}})]});});};}export function withTravelingBorderHover(Component){return /*#__PURE__*/forwardRef((props,ref)=>{return /*#__PURE__*/_jsx(Component,{ref:ref,...props,style:{...props.style,position:\"relative\",zIndex:1},onMouseEnter:e=>{e.currentTarget.style.boxShadow=\"0 0 0 2px #ABA14C\";if(props.onMouseEnter)props.onMouseEnter(e);},onMouseLeave:e=>{e.currentTarget.style.boxShadow=\"none\";if(props.onMouseLeave)props.onMouseLeave(e);}});});}export function withFastTravelingBorder(Component){return /*#__PURE__*/forwardRef((props,ref)=>{return /*#__PURE__*/_jsx(Component,{ref:ref,...props,style:{...props.style,position:\"relative\",zIndex:1,transition:\"box-shadow 0.15s ease\"},onMouseEnter:e=>{e.currentTarget.style.boxShadow=\"0 0 0 2px #ABA14C\";if(props.onMouseEnter)props.onMouseEnter(e);},onMouseLeave:e=>{e.currentTarget.style.boxShadow=\"none\";if(props.onMouseLeave)props.onMouseLeave(e);}});});}export function withContinuousTravelingBorder(Component){return /*#__PURE__*/forwardRef((props,ref)=>{return /*#__PURE__*/_jsx(Component,{ref:ref,...props,style:{...props.style,position:\"relative\",zIndex:1,transition:\"box-shadow 0.5s ease\"},onMouseEnter:e=>{e.currentTarget.style.boxShadow=\"0 0 0 2px #ABA14C\";if(props.onMouseEnter)props.onMouseEnter(e);},onMouseLeave:e=>{e.currentTarget.style.boxShadow=\"none\";if(props.onMouseLeave)props.onMouseLeave(e);}});});}export function withHiddenCursor(Component){return /*#__PURE__*/forwardRef((props,ref)=>{return /*#__PURE__*/_jsx(Component,{ref:ref,...props,style:{...props.style,cursor:\"none\"}});});}\nexport const __FramerMetadata__ = {\"exports\":{\"withGrainBackground\":{\"type\":\"reactHoc\",\"name\":\"withGrainBackground\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withTravelingBorderHover\":{\"type\":\"reactHoc\",\"name\":\"withTravelingBorderHover\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withHiddenCursor\":{\"type\":\"reactHoc\",\"name\":\"withHiddenCursor\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withContinuousTravelingBorder\":{\"type\":\"reactHoc\",\"name\":\"withContinuousTravelingBorder\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withFastTravelingBorder\":{\"type\":\"reactHoc\",\"name\":\"withFastTravelingBorder\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withStaticGrain\":{\"type\":\"reactHoc\",\"name\":\"withStaticGrain\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withSubtleGrain\":{\"type\":\"reactHoc\",\"name\":\"withSubtleGrain\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withCustomGrain\":{\"type\":\"reactComponent\",\"name\":\"withCustomGrain\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\"}},\"withHover\":{\"type\":\"reactHoc\",\"name\":\"withHover\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withRotate\":{\"type\":\"reactHoc\",\"name\":\"withRotate\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withRandomColor\":{\"type\":\"reactHoc\",\"name\":\"withRandomColor\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./Examples.map"],"mappings":"oLACgqB,SAAgB,EAAoB,EAAU,CAAC,OAAoB,GAAY,EAAM,IAA2B,EAAM,MAAM,CAAC,MAAM,CAAC,SAAS,WAAW,MAAM,OAAO,OAAO,MAAM,EAAE,SAAS,CAAc,EAAK,MAAM,CAAC,MAAM,CAAC,SAAS,WAAW,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,yUAAyU,aAAa,UAAU,cAAc,OAAO,OAAO,CAAC,CAAC,CAAC,EAAe,EAAK,EAAU,CAAK,MAAI,GAAG,EAAM,MAAM,CAAC,GAAG,EAAM,MAAM,SAAS,WAAW,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAG,CAAE,iBAD92C,IAA8B,IAAqE,IAAqE,EACjN,EAAY,CAAC,WAAW,SAAS,CAAC"}