{
  "version": 3,
  "sources": ["ssg:https://framerusercontent.com/modules/drXapfQTPrssXDtOu9OY/KHIEuqM2rsap2N0yc2Lh/HideScrollbar.js"],
  "sourcesContent": ["import{jsx as _jsx}from\"react/jsx-runtime\";import{useEffect,useRef}from\"react\";/**\n * Code Override: Prevents horizontal scrollbars when using overflow: visible\n *\n * This override ensures that when images or content overflow outside the breakpoint\n * boundaries with overflow: visible, no horizontal scrollbar appears at the bottom.\n *\n * Usage:\n * 1. Apply this override to your breakpoint container or parent element\n * 2. Set the element's overflow to \"visible\" in Framer\n * 3. Child images/content can now overflow without creating scrollbars\n *\n * How it works:\n * - Finds the nearest scrollable container (usually body or viewport)\n * - Sets overflow-x to hidden while preserving overflow-y\n * - Maintains original functionality while preventing horizontal scroll\n */export function withOverflowVisibleNoScroll(Component){return props=>{const elementRef=useRef(null);useEffect(()=>{// Function to find the scrollable container\nconst findScrollableContainer=element=>{let parent=element.parentElement;while(parent){const computedStyle=window.getComputedStyle(parent);const overflow=computedStyle.overflow;const overflowX=computedStyle.overflowX;const overflowY=computedStyle.overflowY;// Check if this element is scrollable\nif(overflow===\"auto\"||overflow===\"scroll\"||overflowX===\"auto\"||overflowX===\"scroll\"||overflowY===\"auto\"||overflowY===\"scroll\"){return parent;}parent=parent.parentElement;}// If no scrollable container found, use document.documentElement or body\nreturn document.documentElement||document.body;};if(!elementRef.current)return;// Find the appropriate container to modify\nconst scrollContainer=findScrollableContainer(elementRef.current);// Store original overflow values for cleanup\nconst originalOverflowX=scrollContainer.style.overflowX||window.getComputedStyle(scrollContainer).overflowX;const originalOverflow=scrollContainer.style.overflow||window.getComputedStyle(scrollContainer).overflow;// Apply the fix: hide horizontal overflow while preserving vertical\nconst currentOverflowY=window.getComputedStyle(scrollContainer).overflowY;// Set overflow-x to hidden while maintaining overflow-y\nscrollContainer.style.overflowX=\"hidden\";// If overflow-y isn't explicitly set, preserve it\nif(currentOverflowY&&currentOverflowY!==\"visible\"){scrollContainer.style.overflowY=currentOverflowY;}// Also apply to the current element to ensure proper containment\nif(elementRef.current){const currentElement=elementRef.current;const originalElementOverflowX=currentElement.style.overflowX;// Allow the element itself to have visible overflow\ncurrentElement.style.overflow=\"visible\";// Cleanup function\nreturn()=>{// Restore original overflow values\nif(originalOverflow!==\"auto\"&&originalOverflow!==\"scroll\"){scrollContainer.style.overflow=originalOverflow;}else{scrollContainer.style.overflowX=originalOverflowX;}// Restore element's original overflow\ncurrentElement.style.overflowX=originalElementOverflowX;};}// Cleanup function for when element ref is not available\nreturn()=>{scrollContainer.style.overflow=originalOverflow;scrollContainer.style.overflowX=originalOverflowX;};},[]);// Additional effect to handle window resize and responsive changes\nuseEffect(()=>{const handleResize=()=>{// Force a reflow to ensure overflow calculations are correct\nif(elementRef.current){const container=elementRef.current.closest(\"[data-framer-breakpoint]\")||document.documentElement;// Temporarily remove and reapply overflow settings\nconst currentOverflowX=container.style.overflowX;container.style.overflowX=\"hidden\";// Force reflow\ncontainer.offsetHeight;// Reapply\ncontainer.style.overflowX=\"hidden\";}};window.addEventListener(\"resize\",handleResize);return()=>window.removeEventListener(\"resize\",handleResize);},[]);return /*#__PURE__*/_jsx(Component,{...props,ref:elementRef,style:{...props.style,// Ensure the component itself has visible overflow\noverflow:\"visible\",// Prevent the element from contributing to horizontal scroll\nposition:props.style?.position||\"relative\"}});};}/**\n * Alternative version for more aggressive scroll prevention\n * Use this if the above doesn't work for your specific case\n */export function withOverflowVisibleNoScrollAggressive(Component){return props=>{const elementRef=useRef(null);useEffect(()=>{// Apply styles to prevent any horizontal scrolling at multiple levels\nconst styleElement=document.createElement(\"style\");styleElement.textContent=`\n                /* Prevent horizontal scroll on body and html */\n                html, body {\n                    overflow-x: hidden !important;\n                }\n                \n                /* Allow vertical scrolling */\n                html {\n                    overflow-y: auto !important;\n                }\n                \n                /* Framer specific containers */\n                [data-framer-breakpoint] {\n                    overflow-x: hidden !important;\n                }\n                \n                /* Main content containers */\n                .framer-page, .framer-viewport {\n                    overflow-x: hidden !important;\n                }\n            `;document.head.appendChild(styleElement);// Cleanup\nreturn()=>{if(document.head.contains(styleElement)){document.head.removeChild(styleElement);}};},[]);return /*#__PURE__*/_jsx(Component,{...props,ref:elementRef,style:{...props.style,overflow:\"visible\"}});};}/**\n * Targeted version for specific breakpoint containers\n * Use this when you want to control specific breakpoint behavior\n */export function withBreakpointOverflowControl(Component){return props=>{const elementRef=useRef(null);useEffect(()=>{if(!elementRef.current)return;// Find the breakpoint container\nconst breakpointContainer=elementRef.current.closest(\"[data-framer-breakpoint]\");if(breakpointContainer){// Store original values\nconst originalOverflowX=breakpointContainer.style.overflowX;const originalOverflow=breakpointContainer.style.overflow;// Apply overflow control\nbreakpointContainer.style.overflowX=\"hidden\";breakpointContainer.style.overflowY=\"auto\";// Cleanup\nreturn()=>{breakpointContainer.style.overflowX=originalOverflowX;breakpointContainer.style.overflow=originalOverflow;};}},[]);return /*#__PURE__*/_jsx(Component,{...props,ref:elementRef,style:{...props.style,overflow:\"visible\",// Ensure content can overflow without affecting layout\nposition:\"relative\",zIndex:props.style?.zIndex||1}});};}\nexport const __FramerMetadata__ = {\"exports\":{\"withBreakpointOverflowControl\":{\"type\":\"reactHoc\",\"name\":\"withBreakpointOverflowControl\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withOverflowVisibleNoScroll\":{\"type\":\"reactHoc\",\"name\":\"withOverflowVisibleNoScroll\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"withOverflowVisibleNoScrollAggressive\":{\"type\":\"reactHoc\",\"name\":\"withOverflowVisibleNoScrollAggressive\",\"annotations\":{\"framerContractVersion\":\"1\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./HideScrollbar.map"],
  "mappings": "uDAuCU,SAASA,EAAsCC,EAAU,CAAC,OAAOC,GAAO,CAAC,IAAMC,EAAWC,EAAO,IAAI,EAAE,OAAAC,EAAU,IAAI,CAC/H,IAAMC,EAAa,SAAS,cAAc,OAAO,EAAE,OAAAA,EAAa,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAoB9D,SAAS,KAAK,YAAYA,CAAY,EAC9C,IAAI,CAAI,SAAS,KAAK,SAASA,CAAY,GAAG,SAAS,KAAK,YAAYA,CAAY,CAAG,CAAE,EAAE,CAAC,CAAC,EAAsBC,EAAKN,EAAU,CAAC,GAAGC,EAAM,IAAIC,EAAW,MAAM,CAAC,GAAGD,EAAM,MAAM,SAAS,SAAS,CAAC,CAAC,CAAE,CAAE",
  "names": ["withOverflowVisibleNoScrollAggressive", "Component", "props", "elementRef", "pe", "ue", "styleElement", "p"]
}