{"version":3,"file":"HorizontalScroll.DVIPvvq2.mjs","names":["useRef","useState"],"sources":["https:/framerusercontent.com/modules/YETmT96rUP1sgX7JyMkf/fIoWpdqw7c93Caueam07/HorizontalScroll.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,RenderTarget}from\"framer\";import{useLayoutEffect,useRef,useState}from\"react\";import{motion,useScroll,useSpring,useTransform}from\"framer-motion\";/**\n * These annotations control how your component sizes\n * Learn more: https://www.framer.com/docs/guides/auto-sizing\n *\n * @framerSupportedLayoutWidth auto\n * @framerSupportedLayoutHeight auto\n */export default function HorizontalScroll(props){const containerRef=useRef(null);const scrollRef=useRef(null);const sizerRef=useRef(null);const[scrollRange,setScrollRange]=useState(0);const[contentWidth,setContentWidth]=useState(0);useLayoutEffect(()=>{if(!sizerRef.current)return;setScrollRange(scrollRef.current.scrollWidth);const onResize=entries=>{for(let entry of entries){setContentWidth(entry.contentRect.width);setScrollRange(scrollRef.current.scrollWidth);}};const onStyleChange=entries=>{for(let entry of entries){setScrollRange(scrollRef.current.scrollWidth);}};const resizeObserver=new ResizeObserver(onResize);resizeObserver.observe(sizerRef.current);const mutationObserver=new MutationObserver(onStyleChange);mutationObserver.observe(scrollRef.current,{attributes:true,attributeFilter:[\"style\"]});return()=>{resizeObserver.disconnect();mutationObserver.disconnect();};},[]);const{scrollYProgress}=useScroll({target:containerRef});const transform=useTransform(scrollYProgress,[0,1],[0,-scrollRange+contentWidth]);const physics={damping:60,mass:1,stiffness:500};const spring=useSpring(transform,physics);return /*#__PURE__*/_jsxs(\"div\",{ref:containerRef,...props,children:[/*#__PURE__*/_jsx(\"div\",{style:{position:\"sticky\",top:0},children:/*#__PURE__*/_jsx(\"div\",{style:{overflow:\"hidden\"},children:/*#__PURE__*/_jsx(motion.div,{ref:scrollRef,style:{x:spring},children:props.children})})}),RenderTarget.current()!==RenderTarget.canvas&&/*#__PURE__*/_jsx(\"div\",{ref:sizerRef,\"aria-hidden\":\"true\",style:{width:\"100%\",height:scrollRange}})]});}addPropertyControls(HorizontalScroll,{children:{type:ControlType.ComponentInstance}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"HorizontalScroll\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutHeight\":\"auto\",\"framerSupportedLayoutWidth\":\"auto\",\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./HorizontalScroll.map"],"mappings":"uQAMG,SAAwB,EAAiB,EAAM,CAAC,IAAM,EAAaA,EAAO,IAAI,EAAQ,EAAUA,EAAO,IAAI,EAAQ,EAASA,EAAO,IAAI,EAAO,CAAC,EAAY,GAAgBC,EAAS,CAAC,EAAO,CAAC,EAAa,GAAiBA,EAAS,CAAC,EAAE,MAAoB,CAAC,GAAG,CAAC,EAAS,QAAQ,OAAO,EAAe,EAAU,QAAQ,WAAW,EAAE,IAAM,EAAS,GAAS,CAAC,IAAI,IAAI,KAAS,EAAS,EAAgB,EAAM,YAAY,KAAK,EAAE,EAAe,EAAU,QAAQ,WAAW,CAAG,EAAQ,EAAc,GAAS,CAAC,IAAI,IAAI,KAAS,EAAS,EAAe,EAAU,QAAQ,WAAW,CAAG,EAAQ,EAAe,IAAI,eAAe,CAAQ,EAAE,EAAe,QAAQ,EAAS,OAAO,EAAE,IAAM,EAAiB,IAAI,iBAAiB,CAAa,EAA0F,OAAxF,EAAiB,QAAQ,EAAU,QAAQ,CAAC,WAAW,GAAK,gBAAgB,CAAC,OAAO,CAAC,CAAC,MAAY,CAAC,EAAe,WAAW,EAAE,EAAiB,WAAW,CAAE,CAAE,EAAE,CAAC,CAAC,EAAE,GAAK,CAAC,mBAAiB,EAAU,CAAC,OAAO,CAAY,CAAC,EAA0I,EAAO,EAA/H,EAAa,EAAgB,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAY,CAAY,CAAkF,EAAE,CAAlE,QAAQ,GAAG,KAAK,EAAE,UAAU,GAA4C,CAAC,EAAE,OAAoB,EAAM,MAAM,CAAC,IAAI,EAAa,GAAG,EAAM,SAAS,CAAc,EAAK,MAAM,CAAC,MAAM,CAAC,SAAS,SAAS,IAAI,CAAC,EAAE,SAAsB,EAAK,MAAM,CAAC,MAAM,CAAC,SAAS,QAAQ,EAAE,SAAsB,EAAK,EAAO,IAAI,CAAC,IAAI,EAAU,MAAM,CAAC,EAAE,CAAM,EAAE,SAAS,EAAM,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,EAAa,QAAQ,IAAI,EAAa,QAAqB,EAAK,MAAM,CAAC,IAAI,EAAS,cAAc,OAAO,MAAM,CAAC,MAAM,OAAO,OAAO,CAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAE,iBAN19C,IAAiE,IAAmD,IAAmE,EAMoyC,EAAoB,EAAiB,CAAC,SAAS,CAAC,KAAK,EAAY,iBAAiB,CAAC,CAAC"}