@radix-ui/react-scroll-area 0.1.5-rc.5 → 0.1.5-rc.50

package/dist/index.js

@@ -1,2 +1,818 @@
-var e,r,t,o=require("@radix-ui/primitive").composeEventHandlers,n=require("@radix-ui/number").clamp,l=require("@radix-ui/react-use-layout-effect").useLayoutEffect,i=require("@radix-ui/react-direction").useDirection,a=require("@radix-ui/react-use-callback-ref").useCallbackRef,c=require("@radix-ui/react-compose-refs").useComposedRefs,s=require("@radix-ui/react-context").createContextScope,u=require("@radix-ui/react-presence").Presence,d=require("@radix-ui/react-primitive").Primitive,p=(e={},r=require("react"),Object.keys(r).forEach((function(t){"default"!==t&&"__esModule"!==t&&Object.defineProperty(e,t,{enumerable:!0,get:function(){return r[t]}})})),e),f=(t=require("@babel/runtime/helpers/extends"))&&t.__esModule?t.default:t;const[h,w]=s("ScrollArea");exports.createScrollAreaScope=w;const[b,v]=h("ScrollArea"),m=/*#__PURE__*/p.forwardRef(((e,r)=>{const{__scopeScrollArea:t,type:o="hover",dir:n,scrollHideDelay:l=600,...a}=e,[s,u]=p.useState(null),[h,w]=p.useState(null),[v,m]=p.useState(null),[S,g]=p.useState(null),[E,C]=p.useState(null),[T,y]=p.useState(0),[R,x]=p.useState(0),[A,P]=p.useState(!1),[_,L]=p.useState(!1),D=c(r,(e=>u(e))),z=i(n);/*#__PURE__*/return p.createElement(b,{scope:t,type:o,dir:z,scrollHideDelay:l,scrollArea:s,viewport:h,onViewportChange:w,content:v,onContentChange:m,scrollbarX:S,onScrollbarXChange:g,scrollbarXEnabled:A,onScrollbarXEnabledChange:P,scrollbarY:E,onScrollbarYChange:C,scrollbarYEnabled:_,onScrollbarYEnabledChange:L,onCornerWidthChange:y,onCornerHeightChange:x},/*#__PURE__*/p.createElement(d.div,f({dir:z},a,{ref:D,style:{position:"relative","--radix-scroll-area-corner-width":T+"px","--radix-scroll-area-corner-height":R+"px",...e.style}})))}));exports.ScrollArea=m;const S=/*#__PURE__*/p.forwardRef(((e,r)=>{const{__scopeScrollArea:t,children:o,...n}=e,l=v("ScrollAreaViewport",t),i=p.useRef(null),a=c(r,i,l.onViewportChange);/*#__PURE__*/return p.createElement(p.Fragment,null,/*#__PURE__*/p.createElement("style",{dangerouslySetInnerHTML:{__html:"[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}"}}),/*#__PURE__*/p.createElement(d.div,f({"data-radix-scroll-area-viewport":""},n,{ref:a,style:{overflowX:l.scrollbarXEnabled?"scroll":"hidden",overflowY:l.scrollbarYEnabled?"scroll":"hidden",...e.style}}),/*#__PURE__*/p.createElement("div",{ref:l.onContentChange,style:{minWidth:"100%",display:"table"}},o)))}));exports.ScrollAreaViewport=S;const g=/*#__PURE__*/p.forwardRef(((e,r)=>{const{forceMount:t,...o}=e,n=v("ScrollAreaScrollbar",e.__scopeScrollArea),{onScrollbarXEnabledChange:l,onScrollbarYEnabledChange:i}=n,a="horizontal"===e.orientation;return p.useEffect((()=>(a?l(!0):i(!0),()=>{a?l(!1):i(!1)})),[a,l,i]),"hover"===n.type?/*#__PURE__*/p.createElement(E,f({},o,{ref:r,forceMount:t})):"scroll"===n.type?/*#__PURE__*/p.createElement(C,f({},o,{ref:r,forceMount:t})):"auto"===n.type?/*#__PURE__*/p.createElement(T,f({},o,{ref:r,forceMount:t})):"always"===n.type?/*#__PURE__*/p.createElement(y,f({},o,{ref:r})):null}));exports.ScrollAreaScrollbar=g;const E=/*#__PURE__*/p.forwardRef(((e,r)=>{const{forceMount:t,...o}=e,n=v("ScrollAreaScrollbar",e.__scopeScrollArea),[l,i]=p.useState(!1);return p.useEffect((()=>{const e=n.scrollArea;let r=0;if(e){const t=()=>{window.clearTimeout(r),i(!0)},o=()=>{r=window.setTimeout((()=>i(!1)),n.scrollHideDelay)};return e.addEventListener("pointerenter",t),e.addEventListener("pointerleave",o),()=>{window.clearTimeout(r),e.removeEventListener("pointerenter",t),e.removeEventListener("pointerleave",o)}}}),[n.scrollArea,n.scrollHideDelay]),/*#__PURE__*/p.createElement(u,{present:t||l},/*#__PURE__*/p.createElement(T,f({"data-state":l?"visible":"hidden"},o,{ref:r})))})),C=/*#__PURE__*/p.forwardRef(((e,r)=>{const{forceMount:t,...n}=e,l=v("ScrollAreaScrollbar",e.__scopeScrollArea),i="horizontal"===e.orientation,a=N((()=>s("SCROLL_END")),100),[c,s]=(d="hidden",h={hidden:{SCROLL:"scrolling"},scrolling:{SCROLL_END:"idle",POINTER_ENTER:"interacting"},interacting:{SCROLL:"interacting",POINTER_LEAVE:"idle"},idle:{HIDE:"hidden",SCROLL:"scrolling",POINTER_ENTER:"interacting"}},p.useReducer(((e,r)=>{const t=h[e][r];return null!=t?t:e}),d));var d,h;return p.useEffect((()=>{if("idle"===c){const e=window.setTimeout((()=>s("HIDE")),l.scrollHideDelay);return()=>window.clearTimeout(e)}}),[c,l.scrollHideDelay,s]),p.useEffect((()=>{const e=l.viewport,r=i?"scrollLeft":"scrollTop";if(e){let t=e[r];const o=()=>{const o=e[r];t!==o&&(s("SCROLL"),a()),t=o};return e.addEventListener("scroll",o),()=>e.removeEventListener("scroll",o)}}),[l.viewport,i,s,a]),/*#__PURE__*/p.createElement(u,{present:t||"hidden"!==c},/*#__PURE__*/p.createElement(y,f({"data-state":"hidden"===c?"hidden":"visible"},n,{ref:r,onPointerEnter:o(e.onPointerEnter,(()=>s("POINTER_ENTER"))),onPointerLeave:o(e.onPointerLeave,(()=>s("POINTER_LEAVE")))})))})),T=/*#__PURE__*/p.forwardRef(((e,r)=>{const t=v("ScrollAreaScrollbar",e.__scopeScrollArea),{forceMount:o,...n}=e,[l,i]=p.useState(!1),a="horizontal"===e.orientation,c=N((()=>{if(t.viewport){const e=t.viewport.offsetWidth<t.viewport.scrollWidth,r=t.viewport.offsetHeight<t.viewport.scrollHeight;i(a?e:r)}}),10);return I(t.viewport,c),I(t.content,c),/*#__PURE__*/p.createElement(u,{present:o||l},/*#__PURE__*/p.createElement(y,f({"data-state":l?"visible":"hidden"},n,{ref:r})))})),y=/*#__PURE__*/p.forwardRef(((e,r)=>{const{orientation:t="vertical",...o}=e,n=v("ScrollAreaScrollbar",e.__scopeScrollArea),l=p.useRef(null),i=p.useRef(0),[a,c]=p.useState({content:0,viewport:0,scrollbar:{size:0,paddingStart:0,paddingEnd:0}}),s=W(a.viewport,a.content),u={...o,sizes:a,onSizesChange:c,hasThumb:Boolean(s>0&&s<1),onThumbChange:e=>l.current=e,onThumbPointerUp:()=>i.current=0,onThumbPointerDown:e=>i.current=e};function d(e,r){return function(e,r,t,o="ltr"){const n=O(t),l=n/2,i=r||l,a=n-i,c=t.scrollbar.paddingStart+i,s=t.scrollbar.size-t.scrollbar.paddingEnd-a,u=t.content-t.viewport;return Y([c,s],"ltr"===o?[0,u]:[-1*u,0])(e)}(e,i.current,a,r)}return"horizontal"===t?/*#__PURE__*/p.createElement(R,f({},u,{ref:r,onThumbPositionChange:()=>{if(n.viewport&&l.current){const e=X(n.viewport.scrollLeft,a,n.dir);l.current.style.transform=`translate3d(${e}px, 0, 0)`}},onWheelScroll:e=>{n.viewport&&(n.viewport.scrollLeft=e)},onDragScroll:e=>{n.viewport&&(n.viewport.scrollLeft=d(e,n.dir))}})):"vertical"===t?/*#__PURE__*/p.createElement(x,f({},u,{ref:r,onThumbPositionChange:()=>{if(n.viewport&&l.current){const e=X(n.viewport.scrollTop,a);l.current.style.transform=`translate3d(0, ${e}px, 0)`}},onWheelScroll:e=>{n.viewport&&(n.viewport.scrollTop=e)},onDragScroll:e=>{n.viewport&&(n.viewport.scrollTop=d(e))}})):null})),R=/*#__PURE__*/p.forwardRef(((e,r)=>{const{sizes:t,onSizesChange:o,...n}=e,l=v("ScrollAreaScrollbar",e.__scopeScrollArea),[i,a]=p.useState(),s=p.useRef(null),u=c(r,s,l.onScrollbarXChange);return p.useEffect((()=>{s.current&&a(getComputedStyle(s.current))}),[s]),/*#__PURE__*/p.createElement(_,f({"data-orientation":"horizontal"},n,{ref:u,sizes:t,style:{bottom:0,left:"rtl"===l.dir?"var(--radix-scroll-area-corner-width)":0,right:"ltr"===l.dir?"var(--radix-scroll-area-corner-width)":0,"--radix-scroll-area-thumb-width":O(t)+"px",...e.style},onThumbPointerDown:r=>e.onThumbPointerDown(r.x),onDragScroll:r=>e.onDragScroll(r.x),onWheelScroll:(r,t)=>{if(l.viewport){const o=l.viewport.scrollLeft+r.deltaX;e.onWheelScroll(o),q(o,t)&&r.preventDefault()}},onResize:()=>{s.current&&l.viewport&&i&&o({content:l.viewport.scrollWidth,viewport:l.viewport.offsetWidth,scrollbar:{size:s.current.clientWidth,paddingStart:H(i.paddingLeft),paddingEnd:H(i.paddingRight)}})}}))})),x=/*#__PURE__*/p.forwardRef(((e,r)=>{const{sizes:t,onSizesChange:o,...n}=e,l=v("ScrollAreaScrollbar",e.__scopeScrollArea),[i,a]=p.useState(),s=p.useRef(null),u=c(r,s,l.onScrollbarYChange);return p.useEffect((()=>{s.current&&a(getComputedStyle(s.current))}),[s]),/*#__PURE__*/p.createElement(_,f({"data-orientation":"vertical"},n,{ref:u,sizes:t,style:{top:0,right:"ltr"===l.dir?0:void 0,left:"rtl"===l.dir?0:void 0,bottom:"var(--radix-scroll-area-corner-height)","--radix-scroll-area-thumb-height":O(t)+"px",...e.style},onThumbPointerDown:r=>e.onThumbPointerDown(r.y),onDragScroll:r=>e.onDragScroll(r.y),onWheelScroll:(r,t)=>{if(l.viewport){const o=l.viewport.scrollTop+r.deltaY;e.onWheelScroll(o),q(o,t)&&r.preventDefault()}},onResize:()=>{s.current&&l.viewport&&i&&o({content:l.viewport.scrollHeight,viewport:l.viewport.offsetHeight,scrollbar:{size:s.current.clientHeight,paddingStart:H(i.paddingTop),paddingEnd:H(i.paddingBottom)}})}}))})),[A,P]=h("ScrollAreaScrollbar"),_=/*#__PURE__*/p.forwardRef(((e,r)=>{const{__scopeScrollArea:t,sizes:n,hasThumb:l,onThumbChange:i,onThumbPointerUp:s,onThumbPointerDown:u,onThumbPositionChange:h,onDragScroll:w,onWheelScroll:b,onResize:m,...S}=e,g=v("ScrollAreaScrollbar",t),[E,C]=p.useState(null),T=c(r,(e=>C(e))),y=p.useRef(null),R=p.useRef(""),x=g.viewport,P=n.content-n.viewport,_=a(b),L=a(h),D=N(m,10);function z(e){if(y.current){const r=e.clientX-y.current.left,t=e.clientY-y.current.top;w({x:r,y:t})}}return p.useEffect((()=>{const e=e=>{const r=e.target;(null==E?void 0:E.contains(r))&&_(e,P)};return document.addEventListener("wheel",e,{passive:!1}),()=>document.removeEventListener("wheel",e,{passive:!1})}),[x,E,P,_]),p.useEffect(L,[n,L]),I(E,D),I(g.content,D),/*#__PURE__*/p.createElement(A,{scope:t,scrollbar:E,hasThumb:l,onThumbChange:a(i),onThumbPointerUp:a(s),onThumbPositionChange:L,onThumbPointerDown:a(u)},/*#__PURE__*/p.createElement(d.div,f({},S,{ref:T,style:{position:"absolute",...S.style},onPointerDown:o(e.onPointerDown,(e=>{if(0===e.button){e.target.setPointerCapture(e.pointerId),y.current=E.getBoundingClientRect(),R.current=document.body.style.webkitUserSelect,document.body.style.webkitUserSelect="none",z(e)}})),onPointerMove:o(e.onPointerMove,z),onPointerUp:o(e.onPointerUp,(e=>{e.target.releasePointerCapture(e.pointerId),document.body.style.webkitUserSelect=R.current,y.current=null}))})))})),L=/*#__PURE__*/p.forwardRef(((e,r)=>{const{__scopeScrollArea:t,style:n,...l}=e,i=v("ScrollbarThumb",t),a=P("ScrollbarThumb",t),{onThumbPositionChange:s}=a,u=c(r,(e=>a.onThumbChange(e))),h=p.useRef(),w=N((()=>{h.current&&(h.current(),h.current=void 0)}),100);return p.useEffect((()=>{const e=i.viewport;if(e){const r=()=>{if(w(),!h.current){const r=M(e,s);h.current=r,s()}};return s(),e.addEventListener("scroll",r),()=>e.removeEventListener("scroll",r)}}),[i.viewport,w,s]),a.hasThumb?/*#__PURE__*/p.createElement(d.div,f({},l,{ref:u,style:{width:"var(--radix-scroll-area-thumb-width)",height:"var(--radix-scroll-area-thumb-height)",...n},onPointerDownCapture:o(e.onPointerDownCapture,(e=>{const r=e.target.getBoundingClientRect(),t=e.clientX-r.left,o=e.clientY-r.top;a.onThumbPointerDown({x:t,y:o})})),onPointerUp:o(e.onPointerUp,a.onThumbPointerUp)})):null}));exports.ScrollAreaThumb=L;const D=/*#__PURE__*/p.forwardRef(((e,r)=>{const t=v("ScrollAreaCorner",e.__scopeScrollArea),o=Boolean(t.scrollbarX&&t.scrollbarY);return"scroll"!==t.type&&o?/*#__PURE__*/p.createElement(z,f({},e,{ref:r})):null}));exports.ScrollAreaCorner=D;const z=/*#__PURE__*/p.forwardRef(((e,r)=>{const{__scopeScrollArea:t,...o}=e,n=v("ScrollAreaCorner",t),[l,i]=p.useState(0),[a,c]=p.useState(0),s=Boolean(l&&a);return I(n.scrollbarX,(()=>{var e;const r=(null===(e=n.scrollbarX)||void 0===e?void 0:e.offsetHeight)||0;n.onCornerHeightChange(r),c(r)})),I(n.scrollbarY,(()=>{var e;const r=(null===(e=n.scrollbarY)||void 0===e?void 0:e.offsetWidth)||0;n.onCornerWidthChange(r),i(r)})),s?/*#__PURE__*/p.createElement(d.div,f({},o,{ref:r,style:{width:l,height:a,position:"absolute",right:"ltr"===n.dir?0:void 0,left:"rtl"===n.dir?0:void 0,bottom:0,...e.style}})):null}));function H(e){return e?parseInt(e,10):0}function W(e,r){const t=e/r;return isNaN(t)?0:t}function O(e){const r=W(e.viewport,e.content),t=e.scrollbar.paddingStart+e.scrollbar.paddingEnd,o=(e.scrollbar.size-t)*r;return Math.max(o,18)}function X(e,r,t="ltr"){const o=O(r),l=r.scrollbar.paddingStart+r.scrollbar.paddingEnd,i=r.scrollbar.size-l,a=r.content-r.viewport,c=i-o,s=n(e,"ltr"===t?[0,a]:[-1*a,0]);return Y([0,a],[0,c])(s)}function Y(e,r){return t=>{if(e[0]===e[1]||r[0]===r[1])return r[0];const o=(r[1]-r[0])/(e[1]-e[0]);return r[0]+o*(t-e[0])}}function q(e,r){return e>0&&e<r}const M=(e,r=(()=>{}))=>{let t={left:e.scrollLeft,top:e.scrollTop},o=0;return function n(){const l={left:e.scrollLeft,top:e.scrollTop},i=t.left!==l.left,a=t.top!==l.top;(i||a)&&r(),t=l,o=window.requestAnimationFrame(n)}(),()=>window.cancelAnimationFrame(o)};function N(e,r){const t=a(e),o=p.useRef(0);return p.useEffect((()=>()=>window.clearTimeout(o.current)),[]),p.useCallback((()=>{window.clearTimeout(o.current),o.current=window.setTimeout(t,r)}),[t,r])}function I(e,r){const t=a(r);l((()=>{let r=0;if(e){const o=new ResizeObserver((()=>{cancelAnimationFrame(r),r=window.requestAnimationFrame(t)}));return o.observe(e),()=>{window.cancelAnimationFrame(r),o.unobserve(e)}}}),[e,t])}const U=m;exports.Root=U;const k=S;exports.Viewport=k;const V=g;exports.Scrollbar=V;const B=L;exports.Thumb=B;const F=D;exports.Corner=F;
+var $4huGU$babelruntimehelpersextends = require("@babel/runtime/helpers/extends");
+var $4huGU$react = require("react");
+var $4huGU$radixuireactprimitive = require("@radix-ui/react-primitive");
+var $4huGU$radixuireactpresence = require("@radix-ui/react-presence");
+var $4huGU$radixuireactcontext = require("@radix-ui/react-context");
+var $4huGU$radixuireactcomposerefs = require("@radix-ui/react-compose-refs");
+var $4huGU$radixuireactusecallbackref = require("@radix-ui/react-use-callback-ref");
+var $4huGU$radixuireactdirection = require("@radix-ui/react-direction");
+var $4huGU$radixuireactuselayouteffect = require("@radix-ui/react-use-layout-effect");
+var $4huGU$radixuinumber = require("@radix-ui/number");
+var $4huGU$radixuiprimitive = require("@radix-ui/primitive");
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+$parcel$export(module.exports, "createScrollAreaScope", () => $f8fcbf76d19b7361$export$488468afe3a6f2b1);
+$parcel$export(module.exports, "ScrollArea", () => $f8fcbf76d19b7361$export$ccf8d8d7bbf3c2cc);
+$parcel$export(module.exports, "ScrollAreaViewport", () => $f8fcbf76d19b7361$export$a21cbf9f11fca853);
+$parcel$export(module.exports, "ScrollAreaScrollbar", () => $f8fcbf76d19b7361$export$2fabd85d0eba3c57);
+$parcel$export(module.exports, "ScrollAreaThumb", () => $f8fcbf76d19b7361$export$9fba1154677d7cd2);
+$parcel$export(module.exports, "ScrollAreaCorner", () => $f8fcbf76d19b7361$export$56969d565df7cc4b);
+$parcel$export(module.exports, "Root", () => $f8fcbf76d19b7361$export$be92b6f5f03c0fe9);
+$parcel$export(module.exports, "Viewport", () => $f8fcbf76d19b7361$export$d5c6c08dc2d3ca7);
+$parcel$export(module.exports, "Scrollbar", () => $f8fcbf76d19b7361$export$9a4e88b92edfce6b);
+$parcel$export(module.exports, "Thumb", () => $f8fcbf76d19b7361$export$6521433ed15a34db);
+$parcel$export(module.exports, "Corner", () => $f8fcbf76d19b7361$export$ac61190d9fc311a9);
+
+
+
+
+
+
+
+
+
+
+
+
+function $39a0f473320532da$export$3e6543de14f8614f(initialState, machine) {
+    return $4huGU$react.useReducer((state, event)=>{
+        const nextState = machine[state][event];
+        return nextState !== null && nextState !== void 0 ? nextState : state;
+    }, initialState);
+}
+
+
+/* -------------------------------------------------------------------------------------------------
+ * ScrollArea
+ * -----------------------------------------------------------------------------------------------*/ const $f8fcbf76d19b7361$var$SCROLL_AREA_NAME = 'ScrollArea';
+const [$f8fcbf76d19b7361$var$createScrollAreaContext, $f8fcbf76d19b7361$export$488468afe3a6f2b1] = $4huGU$radixuireactcontext.createContextScope($f8fcbf76d19b7361$var$SCROLL_AREA_NAME);
+const [$f8fcbf76d19b7361$var$ScrollAreaProvider, $f8fcbf76d19b7361$var$useScrollAreaContext] = $f8fcbf76d19b7361$var$createScrollAreaContext($f8fcbf76d19b7361$var$SCROLL_AREA_NAME);
+const $f8fcbf76d19b7361$export$ccf8d8d7bbf3c2cc = /*#__PURE__*/ $4huGU$react.forwardRef((props, forwardedRef)=>{
+    const { __scopeScrollArea: __scopeScrollArea , type: type = 'hover' , dir: dir , scrollHideDelay: scrollHideDelay = 600 , ...scrollAreaProps } = props;
+    const [scrollArea, setScrollArea] = $4huGU$react.useState(null);
+    const [viewport, setViewport] = $4huGU$react.useState(null);
+    const [content, setContent] = $4huGU$react.useState(null);
+    const [scrollbarX, setScrollbarX] = $4huGU$react.useState(null);
+    const [scrollbarY, setScrollbarY] = $4huGU$react.useState(null);
+    const [cornerWidth, setCornerWidth] = $4huGU$react.useState(0);
+    const [cornerHeight, setCornerHeight] = $4huGU$react.useState(0);
+    const [scrollbarXEnabled, setScrollbarXEnabled] = $4huGU$react.useState(false);
+    const [scrollbarYEnabled, setScrollbarYEnabled] = $4huGU$react.useState(false);
+    const composedRefs = $4huGU$radixuireactcomposerefs.useComposedRefs(forwardedRef, (node)=>setScrollArea(node)
+    );
+    const direction = $4huGU$radixuireactdirection.useDirection(dir);
+    return /*#__PURE__*/ $4huGU$react.createElement($f8fcbf76d19b7361$var$ScrollAreaProvider, {
+        scope: __scopeScrollArea,
+        type: type,
+        dir: direction,
+        scrollHideDelay: scrollHideDelay,
+        scrollArea: scrollArea,
+        viewport: viewport,
+        onViewportChange: setViewport,
+        content: content,
+        onContentChange: setContent,
+        scrollbarX: scrollbarX,
+        onScrollbarXChange: setScrollbarX,
+        scrollbarXEnabled: scrollbarXEnabled,
+        onScrollbarXEnabledChange: setScrollbarXEnabled,
+        scrollbarY: scrollbarY,
+        onScrollbarYChange: setScrollbarY,
+        scrollbarYEnabled: scrollbarYEnabled,
+        onScrollbarYEnabledChange: setScrollbarYEnabled,
+        onCornerWidthChange: setCornerWidth,
+        onCornerHeightChange: setCornerHeight
+    }, /*#__PURE__*/ $4huGU$react.createElement($4huGU$radixuireactprimitive.Primitive.div, ($parcel$interopDefault($4huGU$babelruntimehelpersextends))({
+        dir: direction
+    }, scrollAreaProps, {
+        ref: composedRefs,
+        style: {
+            position: 'relative',
+            // Pass corner sizes as CSS vars to reduce re-renders of context consumers
+            ['--radix-scroll-area-corner-width']: cornerWidth + 'px',
+            ['--radix-scroll-area-corner-height']: cornerHeight + 'px',
+            ...props.style
+        }
+    })));
+});
+/*#__PURE__*/ Object.assign($f8fcbf76d19b7361$export$ccf8d8d7bbf3c2cc, {
+    displayName: $f8fcbf76d19b7361$var$SCROLL_AREA_NAME
+});
+/* -------------------------------------------------------------------------------------------------
+ * ScrollAreaViewport
+ * -----------------------------------------------------------------------------------------------*/ const $f8fcbf76d19b7361$var$VIEWPORT_NAME = 'ScrollAreaViewport';
+const $f8fcbf76d19b7361$export$a21cbf9f11fca853 = /*#__PURE__*/ $4huGU$react.forwardRef((props, forwardedRef)=>{
+    const { __scopeScrollArea: __scopeScrollArea , children: children , ...viewportProps } = props;
+    const context = $f8fcbf76d19b7361$var$useScrollAreaContext($f8fcbf76d19b7361$var$VIEWPORT_NAME, __scopeScrollArea);
+    const ref = $4huGU$react.useRef(null);
+    const composedRefs = $4huGU$radixuireactcomposerefs.useComposedRefs(forwardedRef, ref, context.onViewportChange);
+    return /*#__PURE__*/ $4huGU$react.createElement($4huGU$react.Fragment, null, /*#__PURE__*/ $4huGU$react.createElement("style", {
+        dangerouslySetInnerHTML: {
+            __html: `[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}`
+        }
+    }), /*#__PURE__*/ $4huGU$react.createElement($4huGU$radixuireactprimitive.Primitive.div, ($parcel$interopDefault($4huGU$babelruntimehelpersextends))({
+        "data-radix-scroll-area-viewport": ""
+    }, viewportProps, {
+        ref: composedRefs,
+        style: {
+            /**
+       * We don't support `visible` because the intention is to have at least one scrollbar
+       * if this component is used and `visible` will behave like `auto` in that case
+       * https://developer.mozilla.org/en-US/docs/Web/CSS/overflowed#description
+       *
+       * We don't handle `auto` because the intention is for the native implementation
+       * to be hidden if using this component. We just want to ensure the node is scrollable
+       * so could have used either `scroll` or `auto` here. We picked `scroll` to prevent
+       * the browser from having to work out whether to render native scrollbars or not,
+       * we tell it to with the intention of hiding them in CSS.
+       */ overflowX: context.scrollbarXEnabled ? 'scroll' : 'hidden',
+            overflowY: context.scrollbarYEnabled ? 'scroll' : 'hidden',
+            ...props.style
+        }
+    }), /*#__PURE__*/ $4huGU$react.createElement("div", {
+        ref: context.onContentChange,
+        style: {
+            minWidth: '100%',
+            display: 'table'
+        }
+    }, children)));
+});
+/*#__PURE__*/ Object.assign($f8fcbf76d19b7361$export$a21cbf9f11fca853, {
+    displayName: $f8fcbf76d19b7361$var$VIEWPORT_NAME
+});
+/* -------------------------------------------------------------------------------------------------
+ * ScrollAreaScrollbar
+ * -----------------------------------------------------------------------------------------------*/ const $f8fcbf76d19b7361$var$SCROLLBAR_NAME = 'ScrollAreaScrollbar';
+const $f8fcbf76d19b7361$export$2fabd85d0eba3c57 = /*#__PURE__*/ $4huGU$react.forwardRef((props, forwardedRef)=>{
+    const { forceMount: forceMount , ...scrollbarProps } = props;
+    const context = $f8fcbf76d19b7361$var$useScrollAreaContext($f8fcbf76d19b7361$var$SCROLLBAR_NAME, props.__scopeScrollArea);
+    const { onScrollbarXEnabledChange: onScrollbarXEnabledChange , onScrollbarYEnabledChange: onScrollbarYEnabledChange  } = context;
+    const isHorizontal = props.orientation === 'horizontal';
+    $4huGU$react.useEffect(()=>{
+        isHorizontal ? onScrollbarXEnabledChange(true) : onScrollbarYEnabledChange(true);
+        return ()=>{
+            isHorizontal ? onScrollbarXEnabledChange(false) : onScrollbarYEnabledChange(false);
+        };
+    }, [
+        isHorizontal,
+        onScrollbarXEnabledChange,
+        onScrollbarYEnabledChange
+    ]);
+    return context.type === 'hover' ? /*#__PURE__*/ $4huGU$react.createElement($f8fcbf76d19b7361$var$ScrollAreaScrollbarHover, ($parcel$interopDefault($4huGU$babelruntimehelpersextends))({}, scrollbarProps, {
+        ref: forwardedRef,
+        forceMount: forceMount
+    })) : context.type === 'scroll' ? /*#__PURE__*/ $4huGU$react.createElement($f8fcbf76d19b7361$var$ScrollAreaScrollbarScroll, ($parcel$interopDefault($4huGU$babelruntimehelpersextends))({}, scrollbarProps, {
+        ref: forwardedRef,
+        forceMount: forceMount
+    })) : context.type === 'auto' ? /*#__PURE__*/ $4huGU$react.createElement($f8fcbf76d19b7361$var$ScrollAreaScrollbarAuto, ($parcel$interopDefault($4huGU$babelruntimehelpersextends))({}, scrollbarProps, {
+        ref: forwardedRef,
+        forceMount: forceMount
+    })) : context.type === 'always' ? /*#__PURE__*/ $4huGU$react.createElement($f8fcbf76d19b7361$var$ScrollAreaScrollbarVisible, ($parcel$interopDefault($4huGU$babelruntimehelpersextends))({}, scrollbarProps, {
+        ref: forwardedRef
+    })) : null;
+});
+/*#__PURE__*/ Object.assign($f8fcbf76d19b7361$export$2fabd85d0eba3c57, {
+    displayName: $f8fcbf76d19b7361$var$SCROLLBAR_NAME
+});
+/* -----------------------------------------------------------------------------------------------*/ const $f8fcbf76d19b7361$var$ScrollAreaScrollbarHover = /*#__PURE__*/ $4huGU$react.forwardRef((props, forwardedRef)=>{
+    const { forceMount: forceMount , ...scrollbarProps } = props;
+    const context = $f8fcbf76d19b7361$var$useScrollAreaContext($f8fcbf76d19b7361$var$SCROLLBAR_NAME, props.__scopeScrollArea);
+    const [visible, setVisible] = $4huGU$react.useState(false);
+    $4huGU$react.useEffect(()=>{
+        const scrollArea = context.scrollArea;
+        let hideTimer = 0;
+        if (scrollArea) {
+            const handlePointerEnter = ()=>{
+                window.clearTimeout(hideTimer);
+                setVisible(true);
+            };
+            const handlePointerLeave = ()=>{
+                hideTimer = window.setTimeout(()=>setVisible(false)
+                , context.scrollHideDelay);
+            };
+            scrollArea.addEventListener('pointerenter', handlePointerEnter);
+            scrollArea.addEventListener('pointerleave', handlePointerLeave);
+            return ()=>{
+                window.clearTimeout(hideTimer);
+                scrollArea.removeEventListener('pointerenter', handlePointerEnter);
+                scrollArea.removeEventListener('pointerleave', handlePointerLeave);
+            };
+        }
+    }, [
+        context.scrollArea,
+        context.scrollHideDelay
+    ]);
+    return /*#__PURE__*/ $4huGU$react.createElement($4huGU$radixuireactpresence.Presence, {
+        present: forceMount || visible
+    }, /*#__PURE__*/ $4huGU$react.createElement($f8fcbf76d19b7361$var$ScrollAreaScrollbarAuto, ($parcel$interopDefault($4huGU$babelruntimehelpersextends))({
+        "data-state": visible ? 'visible' : 'hidden'
+    }, scrollbarProps, {
+        ref: forwardedRef
+    })));
+});
+const $f8fcbf76d19b7361$var$ScrollAreaScrollbarScroll = /*#__PURE__*/ $4huGU$react.forwardRef((props, forwardedRef)=>{
+    const { forceMount: forceMount , ...scrollbarProps } = props;
+    const context = $f8fcbf76d19b7361$var$useScrollAreaContext($f8fcbf76d19b7361$var$SCROLLBAR_NAME, props.__scopeScrollArea);
+    const isHorizontal = props.orientation === 'horizontal';
+    const debounceScrollEnd = $f8fcbf76d19b7361$var$useDebounceCallback(()=>send('SCROLL_END')
+    , 100);
+    const [state, send] = $39a0f473320532da$export$3e6543de14f8614f('hidden', {
+        hidden: {
+            SCROLL: 'scrolling'
+        },
+        scrolling: {
+            SCROLL_END: 'idle',
+            POINTER_ENTER: 'interacting'
+        },
+        interacting: {
+            SCROLL: 'interacting',
+            POINTER_LEAVE: 'idle'
+        },
+        idle: {
+            HIDE: 'hidden',
+            SCROLL: 'scrolling',
+            POINTER_ENTER: 'interacting'
+        }
+    });
+    $4huGU$react.useEffect(()=>{
+        if (state === 'idle') {
+            const hideTimer = window.setTimeout(()=>send('HIDE')
+            , context.scrollHideDelay);
+            return ()=>window.clearTimeout(hideTimer)
+            ;
+        }
+    }, [
+        state,
+        context.scrollHideDelay,
+        send
+    ]);
+    $4huGU$react.useEffect(()=>{
+        const viewport = context.viewport;
+        const scrollDirection = isHorizontal ? 'scrollLeft' : 'scrollTop';
+        if (viewport) {
+            let prevScrollPos = viewport[scrollDirection];
+            const handleScroll = ()=>{
+                const scrollPos = viewport[scrollDirection];
+                const hasScrollInDirectionChanged = prevScrollPos !== scrollPos;
+                if (hasScrollInDirectionChanged) {
+                    send('SCROLL');
+                    debounceScrollEnd();
+                }
+                prevScrollPos = scrollPos;
+            };
+            viewport.addEventListener('scroll', handleScroll);
+            return ()=>viewport.removeEventListener('scroll', handleScroll)
+            ;
+        }
+    }, [
+        context.viewport,
+        isHorizontal,
+        send,
+        debounceScrollEnd
+    ]);
+    return /*#__PURE__*/ $4huGU$react.createElement($4huGU$radixuireactpresence.Presence, {
+        present: forceMount || state !== 'hidden'
+    }, /*#__PURE__*/ $4huGU$react.createElement($f8fcbf76d19b7361$var$ScrollAreaScrollbarVisible, ($parcel$interopDefault($4huGU$babelruntimehelpersextends))({
+        "data-state": state === 'hidden' ? 'hidden' : 'visible'
+    }, scrollbarProps, {
+        ref: forwardedRef,
+        onPointerEnter: $4huGU$radixuiprimitive.composeEventHandlers(props.onPointerEnter, ()=>send('POINTER_ENTER')
+        ),
+        onPointerLeave: $4huGU$radixuiprimitive.composeEventHandlers(props.onPointerLeave, ()=>send('POINTER_LEAVE')
+        )
+    })));
+});
+const $f8fcbf76d19b7361$var$ScrollAreaScrollbarAuto = /*#__PURE__*/ $4huGU$react.forwardRef((props, forwardedRef)=>{
+    const context = $f8fcbf76d19b7361$var$useScrollAreaContext($f8fcbf76d19b7361$var$SCROLLBAR_NAME, props.__scopeScrollArea);
+    const { forceMount: forceMount , ...scrollbarProps } = props;
+    const [visible, setVisible] = $4huGU$react.useState(false);
+    const isHorizontal = props.orientation === 'horizontal';
+    const handleResize = $f8fcbf76d19b7361$var$useDebounceCallback(()=>{
+        if (context.viewport) {
+            const isOverflowX = context.viewport.offsetWidth < context.viewport.scrollWidth;
+            const isOverflowY = context.viewport.offsetHeight < context.viewport.scrollHeight;
+            setVisible(isHorizontal ? isOverflowX : isOverflowY);
+        }
+    }, 10);
+    $f8fcbf76d19b7361$var$useResizeObserver(context.viewport, handleResize);
+    $f8fcbf76d19b7361$var$useResizeObserver(context.content, handleResize);
+    return /*#__PURE__*/ $4huGU$react.createElement($4huGU$radixuireactpresence.Presence, {
+        present: forceMount || visible
+    }, /*#__PURE__*/ $4huGU$react.createElement($f8fcbf76d19b7361$var$ScrollAreaScrollbarVisible, ($parcel$interopDefault($4huGU$babelruntimehelpersextends))({
+        "data-state": visible ? 'visible' : 'hidden'
+    }, scrollbarProps, {
+        ref: forwardedRef
+    })));
+});
+/* -----------------------------------------------------------------------------------------------*/ const $f8fcbf76d19b7361$var$ScrollAreaScrollbarVisible = /*#__PURE__*/ $4huGU$react.forwardRef((props, forwardedRef)=>{
+    const { orientation: orientation = 'vertical' , ...scrollbarProps } = props;
+    const context = $f8fcbf76d19b7361$var$useScrollAreaContext($f8fcbf76d19b7361$var$SCROLLBAR_NAME, props.__scopeScrollArea);
+    const thumbRef = $4huGU$react.useRef(null);
+    const pointerOffsetRef = $4huGU$react.useRef(0);
+    const [sizes, setSizes] = $4huGU$react.useState({
+        content: 0,
+        viewport: 0,
+        scrollbar: {
+            size: 0,
+            paddingStart: 0,
+            paddingEnd: 0
+        }
+    });
+    const thumbRatio = $f8fcbf76d19b7361$var$getThumbRatio(sizes.viewport, sizes.content);
+    const commonProps = {
+        ...scrollbarProps,
+        sizes: sizes,
+        onSizesChange: setSizes,
+        hasThumb: Boolean(thumbRatio > 0 && thumbRatio < 1),
+        onThumbChange: (thumb)=>thumbRef.current = thumb
+        ,
+        onThumbPointerUp: ()=>pointerOffsetRef.current = 0
+        ,
+        onThumbPointerDown: (pointerPos)=>pointerOffsetRef.current = pointerPos
+    };
+    function getScrollPosition(pointerPos, dir) {
+        return $f8fcbf76d19b7361$var$getScrollPositionFromPointer(pointerPos, pointerOffsetRef.current, sizes, dir);
+    }
+    if (orientation === 'horizontal') return /*#__PURE__*/ $4huGU$react.createElement($f8fcbf76d19b7361$var$ScrollAreaScrollbarX, ($parcel$interopDefault($4huGU$babelruntimehelpersextends))({}, commonProps, {
+        ref: forwardedRef,
+        onThumbPositionChange: ()=>{
+            if (context.viewport && thumbRef.current) {
+                const scrollPos = context.viewport.scrollLeft;
+                const offset = $f8fcbf76d19b7361$var$getThumbOffsetFromScroll(scrollPos, sizes, context.dir);
+                thumbRef.current.style.transform = `translate3d(${offset}px, 0, 0)`;
+            }
+        },
+        onWheelScroll: (scrollPos)=>{
+            if (context.viewport) context.viewport.scrollLeft = scrollPos;
+        },
+        onDragScroll: (pointerPos)=>{
+            if (context.viewport) context.viewport.scrollLeft = getScrollPosition(pointerPos, context.dir);
+        }
+    }));
+    if (orientation === 'vertical') return /*#__PURE__*/ $4huGU$react.createElement($f8fcbf76d19b7361$var$ScrollAreaScrollbarY, ($parcel$interopDefault($4huGU$babelruntimehelpersextends))({}, commonProps, {
+        ref: forwardedRef,
+        onThumbPositionChange: ()=>{
+            if (context.viewport && thumbRef.current) {
+                const scrollPos = context.viewport.scrollTop;
+                const offset = $f8fcbf76d19b7361$var$getThumbOffsetFromScroll(scrollPos, sizes);
+                thumbRef.current.style.transform = `translate3d(0, ${offset}px, 0)`;
+            }
+        },
+        onWheelScroll: (scrollPos)=>{
+            if (context.viewport) context.viewport.scrollTop = scrollPos;
+        },
+        onDragScroll: (pointerPos)=>{
+            if (context.viewport) context.viewport.scrollTop = getScrollPosition(pointerPos);
+        }
+    }));
+    return null;
+});
+/* -----------------------------------------------------------------------------------------------*/ const $f8fcbf76d19b7361$var$ScrollAreaScrollbarX = /*#__PURE__*/ $4huGU$react.forwardRef((props, forwardedRef)=>{
+    const { sizes: sizes , onSizesChange: onSizesChange , ...scrollbarProps } = props;
+    const context = $f8fcbf76d19b7361$var$useScrollAreaContext($f8fcbf76d19b7361$var$SCROLLBAR_NAME, props.__scopeScrollArea);
+    const [computedStyle, setComputedStyle] = $4huGU$react.useState();
+    const ref = $4huGU$react.useRef(null);
+    const composeRefs = $4huGU$radixuireactcomposerefs.useComposedRefs(forwardedRef, ref, context.onScrollbarXChange);
+    $4huGU$react.useEffect(()=>{
+        if (ref.current) setComputedStyle(getComputedStyle(ref.current));
+    }, [
+        ref
+    ]);
+    return /*#__PURE__*/ $4huGU$react.createElement($f8fcbf76d19b7361$var$ScrollAreaScrollbarImpl, ($parcel$interopDefault($4huGU$babelruntimehelpersextends))({
+        "data-orientation": "horizontal"
+    }, scrollbarProps, {
+        ref: composeRefs,
+        sizes: sizes,
+        style: {
+            bottom: 0,
+            left: context.dir === 'rtl' ? 'var(--radix-scroll-area-corner-width)' : 0,
+            right: context.dir === 'ltr' ? 'var(--radix-scroll-area-corner-width)' : 0,
+            ['--radix-scroll-area-thumb-width']: $f8fcbf76d19b7361$var$getThumbSize(sizes) + 'px',
+            ...props.style
+        },
+        onThumbPointerDown: (pointerPos)=>props.onThumbPointerDown(pointerPos.x)
+        ,
+        onDragScroll: (pointerPos)=>props.onDragScroll(pointerPos.x)
+        ,
+        onWheelScroll: (event, maxScrollPos)=>{
+            if (context.viewport) {
+                const scrollPos = context.viewport.scrollLeft + event.deltaX;
+                props.onWheelScroll(scrollPos); // prevent window scroll when wheeling on scrollbar
+                if ($f8fcbf76d19b7361$var$isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos)) event.preventDefault();
+            }
+        },
+        onResize: ()=>{
+            if (ref.current && context.viewport && computedStyle) onSizesChange({
+                content: context.viewport.scrollWidth,
+                viewport: context.viewport.offsetWidth,
+                scrollbar: {
+                    size: ref.current.clientWidth,
+                    paddingStart: $f8fcbf76d19b7361$var$toInt(computedStyle.paddingLeft),
+                    paddingEnd: $f8fcbf76d19b7361$var$toInt(computedStyle.paddingRight)
+                }
+            });
+        }
+    }));
+});
+const $f8fcbf76d19b7361$var$ScrollAreaScrollbarY = /*#__PURE__*/ $4huGU$react.forwardRef((props, forwardedRef)=>{
+    const { sizes: sizes , onSizesChange: onSizesChange , ...scrollbarProps } = props;
+    const context = $f8fcbf76d19b7361$var$useScrollAreaContext($f8fcbf76d19b7361$var$SCROLLBAR_NAME, props.__scopeScrollArea);
+    const [computedStyle, setComputedStyle] = $4huGU$react.useState();
+    const ref = $4huGU$react.useRef(null);
+    const composeRefs = $4huGU$radixuireactcomposerefs.useComposedRefs(forwardedRef, ref, context.onScrollbarYChange);
+    $4huGU$react.useEffect(()=>{
+        if (ref.current) setComputedStyle(getComputedStyle(ref.current));
+    }, [
+        ref
+    ]);
+    return /*#__PURE__*/ $4huGU$react.createElement($f8fcbf76d19b7361$var$ScrollAreaScrollbarImpl, ($parcel$interopDefault($4huGU$babelruntimehelpersextends))({
+        "data-orientation": "vertical"
+    }, scrollbarProps, {
+        ref: composeRefs,
+        sizes: sizes,
+        style: {
+            top: 0,
+            right: context.dir === 'ltr' ? 0 : undefined,
+            left: context.dir === 'rtl' ? 0 : undefined,
+            bottom: 'var(--radix-scroll-area-corner-height)',
+            ['--radix-scroll-area-thumb-height']: $f8fcbf76d19b7361$var$getThumbSize(sizes) + 'px',
+            ...props.style
+        },
+        onThumbPointerDown: (pointerPos)=>props.onThumbPointerDown(pointerPos.y)
+        ,
+        onDragScroll: (pointerPos)=>props.onDragScroll(pointerPos.y)
+        ,
+        onWheelScroll: (event, maxScrollPos)=>{
+            if (context.viewport) {
+                const scrollPos = context.viewport.scrollTop + event.deltaY;
+                props.onWheelScroll(scrollPos); // prevent window scroll when wheeling on scrollbar
+                if ($f8fcbf76d19b7361$var$isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos)) event.preventDefault();
+            }
+        },
+        onResize: ()=>{
+            if (ref.current && context.viewport && computedStyle) onSizesChange({
+                content: context.viewport.scrollHeight,
+                viewport: context.viewport.offsetHeight,
+                scrollbar: {
+                    size: ref.current.clientHeight,
+                    paddingStart: $f8fcbf76d19b7361$var$toInt(computedStyle.paddingTop),
+                    paddingEnd: $f8fcbf76d19b7361$var$toInt(computedStyle.paddingBottom)
+                }
+            });
+        }
+    }));
+});
+/* -----------------------------------------------------------------------------------------------*/ const [$f8fcbf76d19b7361$var$ScrollbarProvider, $f8fcbf76d19b7361$var$useScrollbarContext] = $f8fcbf76d19b7361$var$createScrollAreaContext($f8fcbf76d19b7361$var$SCROLLBAR_NAME);
+const $f8fcbf76d19b7361$var$ScrollAreaScrollbarImpl = /*#__PURE__*/ $4huGU$react.forwardRef((props, forwardedRef)=>{
+    const { __scopeScrollArea: __scopeScrollArea , sizes: sizes , hasThumb: hasThumb , onThumbChange: onThumbChange , onThumbPointerUp: onThumbPointerUp , onThumbPointerDown: onThumbPointerDown , onThumbPositionChange: onThumbPositionChange , onDragScroll: onDragScroll , onWheelScroll: onWheelScroll , onResize: onResize , ...scrollbarProps } = props;
+    const context = $f8fcbf76d19b7361$var$useScrollAreaContext($f8fcbf76d19b7361$var$SCROLLBAR_NAME, __scopeScrollArea);
+    const [scrollbar, setScrollbar] = $4huGU$react.useState(null);
+    const composeRefs = $4huGU$radixuireactcomposerefs.useComposedRefs(forwardedRef, (node)=>setScrollbar(node)
+    );
+    const rectRef = $4huGU$react.useRef(null);
+    const prevWebkitUserSelectRef = $4huGU$react.useRef('');
+    const viewport = context.viewport;
+    const maxScrollPos = sizes.content - sizes.viewport;
+    const handleWheelScroll = $4huGU$radixuireactusecallbackref.useCallbackRef(onWheelScroll);
+    const handleThumbPositionChange = $4huGU$radixuireactusecallbackref.useCallbackRef(onThumbPositionChange);
+    const handleResize = $f8fcbf76d19b7361$var$useDebounceCallback(onResize, 10);
+    function handleDragScroll(event) {
+        if (rectRef.current) {
+            const x = event.clientX - rectRef.current.left;
+            const y = event.clientY - rectRef.current.top;
+            onDragScroll({
+                x: x,
+                y: y
+            });
+        }
+    }
+    /**
+   * We bind wheel event imperatively so we can switch off passive
+   * mode for document wheel event to allow it to be prevented
+   */ $4huGU$react.useEffect(()=>{
+        const handleWheel = (event)=>{
+            const element = event.target;
+            const isScrollbarWheel = scrollbar === null || scrollbar === void 0 ? void 0 : scrollbar.contains(element);
+            if (isScrollbarWheel) handleWheelScroll(event, maxScrollPos);
+        };
+        document.addEventListener('wheel', handleWheel, {
+            passive: false
+        });
+        return ()=>document.removeEventListener('wheel', handleWheel, {
+                passive: false
+            })
+        ;
+    }, [
+        viewport,
+        scrollbar,
+        maxScrollPos,
+        handleWheelScroll
+    ]);
+    /**
+   * Update thumb position on sizes change
+   */ $4huGU$react.useEffect(handleThumbPositionChange, [
+        sizes,
+        handleThumbPositionChange
+    ]);
+    $f8fcbf76d19b7361$var$useResizeObserver(scrollbar, handleResize);
+    $f8fcbf76d19b7361$var$useResizeObserver(context.content, handleResize);
+    return /*#__PURE__*/ $4huGU$react.createElement($f8fcbf76d19b7361$var$ScrollbarProvider, {
+        scope: __scopeScrollArea,
+        scrollbar: scrollbar,
+        hasThumb: hasThumb,
+        onThumbChange: $4huGU$radixuireactusecallbackref.useCallbackRef(onThumbChange),
+        onThumbPointerUp: $4huGU$radixuireactusecallbackref.useCallbackRef(onThumbPointerUp),
+        onThumbPositionChange: handleThumbPositionChange,
+        onThumbPointerDown: $4huGU$radixuireactusecallbackref.useCallbackRef(onThumbPointerDown)
+    }, /*#__PURE__*/ $4huGU$react.createElement($4huGU$radixuireactprimitive.Primitive.div, ($parcel$interopDefault($4huGU$babelruntimehelpersextends))({}, scrollbarProps, {
+        ref: composeRefs,
+        style: {
+            position: 'absolute',
+            ...scrollbarProps.style
+        },
+        onPointerDown: $4huGU$radixuiprimitive.composeEventHandlers(props.onPointerDown, (event)=>{
+            const mainPointer = 0;
+            if (event.button === mainPointer) {
+                const element = event.target;
+                element.setPointerCapture(event.pointerId);
+                rectRef.current = scrollbar.getBoundingClientRect(); // pointer capture doesn't prevent text selection in Safari
+                // so we remove text selection manually when scrolling
+                prevWebkitUserSelectRef.current = document.body.style.webkitUserSelect;
+                document.body.style.webkitUserSelect = 'none';
+                handleDragScroll(event);
+            }
+        }),
+        onPointerMove: $4huGU$radixuiprimitive.composeEventHandlers(props.onPointerMove, handleDragScroll),
+        onPointerUp: $4huGU$radixuiprimitive.composeEventHandlers(props.onPointerUp, (event)=>{
+            const element = event.target;
+            element.releasePointerCapture(event.pointerId);
+            document.body.style.webkitUserSelect = prevWebkitUserSelectRef.current;
+            rectRef.current = null;
+        })
+    })));
+});
+/* -------------------------------------------------------------------------------------------------
+ * ScrollAreaThumb
+ * -----------------------------------------------------------------------------------------------*/ const $f8fcbf76d19b7361$var$THUMB_NAME = 'ScrollAreaThumb';
+const $f8fcbf76d19b7361$export$9fba1154677d7cd2 = /*#__PURE__*/ $4huGU$react.forwardRef((props, forwardedRef)=>{
+    const { forceMount: forceMount , ...thumbProps } = props;
+    const scrollbarContext = $f8fcbf76d19b7361$var$useScrollbarContext($f8fcbf76d19b7361$var$THUMB_NAME, props.__scopeScrollArea);
+    return /*#__PURE__*/ $4huGU$react.createElement($4huGU$radixuireactpresence.Presence, {
+        present: forceMount || scrollbarContext.hasThumb
+    }, /*#__PURE__*/ $4huGU$react.createElement($f8fcbf76d19b7361$var$ScrollAreaThumbImpl, ($parcel$interopDefault($4huGU$babelruntimehelpersextends))({
+        ref: forwardedRef
+    }, thumbProps)));
+});
+const $f8fcbf76d19b7361$var$ScrollAreaThumbImpl = /*#__PURE__*/ $4huGU$react.forwardRef((props, forwardedRef)=>{
+    const { __scopeScrollArea: __scopeScrollArea , style: style , ...thumbProps } = props;
+    const scrollAreaContext = $f8fcbf76d19b7361$var$useScrollAreaContext($f8fcbf76d19b7361$var$THUMB_NAME, __scopeScrollArea);
+    const scrollbarContext = $f8fcbf76d19b7361$var$useScrollbarContext($f8fcbf76d19b7361$var$THUMB_NAME, __scopeScrollArea);
+    const { onThumbPositionChange: onThumbPositionChange  } = scrollbarContext;
+    const composedRef = $4huGU$radixuireactcomposerefs.useComposedRefs(forwardedRef, (node)=>scrollbarContext.onThumbChange(node)
+    );
+    const removeUnlinkedScrollListenerRef = $4huGU$react.useRef();
+    const debounceScrollEnd = $f8fcbf76d19b7361$var$useDebounceCallback(()=>{
+        if (removeUnlinkedScrollListenerRef.current) {
+            removeUnlinkedScrollListenerRef.current();
+            removeUnlinkedScrollListenerRef.current = undefined;
+        }
+    }, 100);
+    $4huGU$react.useEffect(()=>{
+        const viewport = scrollAreaContext.viewport;
+        if (viewport) {
+            /**
+       * We only bind to native scroll event so we know when scroll starts and ends.
+       * When scroll starts we start a requestAnimationFrame loop that checks for
+       * changes to scroll position. That rAF loop triggers our thumb position change
+       * when relevant to avoid scroll-linked effects. We cancel the loop when scroll ends.
+       * https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Scroll-linked_effects
+       */ const handleScroll = ()=>{
+                debounceScrollEnd();
+                if (!removeUnlinkedScrollListenerRef.current) {
+                    const listener = $f8fcbf76d19b7361$var$addUnlinkedScrollListener(viewport, onThumbPositionChange);
+                    removeUnlinkedScrollListenerRef.current = listener;
+                    onThumbPositionChange();
+                }
+            };
+            onThumbPositionChange();
+            viewport.addEventListener('scroll', handleScroll);
+            return ()=>viewport.removeEventListener('scroll', handleScroll)
+            ;
+        }
+    }, [
+        scrollAreaContext.viewport,
+        debounceScrollEnd,
+        onThumbPositionChange
+    ]);
+    return /*#__PURE__*/ $4huGU$react.createElement($4huGU$radixuireactprimitive.Primitive.div, ($parcel$interopDefault($4huGU$babelruntimehelpersextends))({
+        "data-state": scrollbarContext.hasThumb ? 'visible' : 'hidden'
+    }, thumbProps, {
+        ref: composedRef,
+        style: {
+            width: 'var(--radix-scroll-area-thumb-width)',
+            height: 'var(--radix-scroll-area-thumb-height)',
+            ...style
+        },
+        onPointerDownCapture: $4huGU$radixuiprimitive.composeEventHandlers(props.onPointerDownCapture, (event)=>{
+            const thumb = event.target;
+            const thumbRect = thumb.getBoundingClientRect();
+            const x = event.clientX - thumbRect.left;
+            const y = event.clientY - thumbRect.top;
+            scrollbarContext.onThumbPointerDown({
+                x: x,
+                y: y
+            });
+        }),
+        onPointerUp: $4huGU$radixuiprimitive.composeEventHandlers(props.onPointerUp, scrollbarContext.onThumbPointerUp)
+    }));
+});
+/*#__PURE__*/ Object.assign($f8fcbf76d19b7361$export$9fba1154677d7cd2, {
+    displayName: $f8fcbf76d19b7361$var$THUMB_NAME
+});
+/* -------------------------------------------------------------------------------------------------
+ * ScrollAreaCorner
+ * -----------------------------------------------------------------------------------------------*/ const $f8fcbf76d19b7361$var$CORNER_NAME = 'ScrollAreaCorner';
+const $f8fcbf76d19b7361$export$56969d565df7cc4b = /*#__PURE__*/ $4huGU$react.forwardRef((props, forwardedRef)=>{
+    const context = $f8fcbf76d19b7361$var$useScrollAreaContext($f8fcbf76d19b7361$var$CORNER_NAME, props.__scopeScrollArea);
+    const hasBothScrollbarsVisible = Boolean(context.scrollbarX && context.scrollbarY);
+    const hasCorner = context.type !== 'scroll' && hasBothScrollbarsVisible;
+    return hasCorner ? /*#__PURE__*/ $4huGU$react.createElement($f8fcbf76d19b7361$var$ScrollAreaCornerImpl, ($parcel$interopDefault($4huGU$babelruntimehelpersextends))({}, props, {
+        ref: forwardedRef
+    })) : null;
+});
+/*#__PURE__*/ Object.assign($f8fcbf76d19b7361$export$56969d565df7cc4b, {
+    displayName: $f8fcbf76d19b7361$var$CORNER_NAME
+});
+/* -----------------------------------------------------------------------------------------------*/ const $f8fcbf76d19b7361$var$ScrollAreaCornerImpl = /*#__PURE__*/ $4huGU$react.forwardRef((props, forwardedRef)=>{
+    const { __scopeScrollArea: __scopeScrollArea , ...cornerProps } = props;
+    const context = $f8fcbf76d19b7361$var$useScrollAreaContext($f8fcbf76d19b7361$var$CORNER_NAME, __scopeScrollArea);
+    const [width1, setWidth] = $4huGU$react.useState(0);
+    const [height1, setHeight] = $4huGU$react.useState(0);
+    const hasSize = Boolean(width1 && height1);
+    $f8fcbf76d19b7361$var$useResizeObserver(context.scrollbarX, ()=>{
+        var _context$scrollbarX;
+        const height = ((_context$scrollbarX = context.scrollbarX) === null || _context$scrollbarX === void 0 ? void 0 : _context$scrollbarX.offsetHeight) || 0;
+        context.onCornerHeightChange(height);
+        setHeight(height);
+    });
+    $f8fcbf76d19b7361$var$useResizeObserver(context.scrollbarY, ()=>{
+        var _context$scrollbarY;
+        const width = ((_context$scrollbarY = context.scrollbarY) === null || _context$scrollbarY === void 0 ? void 0 : _context$scrollbarY.offsetWidth) || 0;
+        context.onCornerWidthChange(width);
+        setWidth(width);
+    });
+    return hasSize ? /*#__PURE__*/ $4huGU$react.createElement($4huGU$radixuireactprimitive.Primitive.div, ($parcel$interopDefault($4huGU$babelruntimehelpersextends))({}, cornerProps, {
+        ref: forwardedRef,
+        style: {
+            width: width1,
+            height: height1,
+            position: 'absolute',
+            right: context.dir === 'ltr' ? 0 : undefined,
+            left: context.dir === 'rtl' ? 0 : undefined,
+            bottom: 0,
+            ...props.style
+        }
+    })) : null;
+});
+/* -----------------------------------------------------------------------------------------------*/ function $f8fcbf76d19b7361$var$toInt(value) {
+    return value ? parseInt(value, 10) : 0;
+}
+function $f8fcbf76d19b7361$var$getThumbRatio(viewportSize, contentSize) {
+    const ratio = viewportSize / contentSize;
+    return isNaN(ratio) ? 0 : ratio;
+}
+function $f8fcbf76d19b7361$var$getThumbSize(sizes) {
+    const ratio = $f8fcbf76d19b7361$var$getThumbRatio(sizes.viewport, sizes.content);
+    const scrollbarPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;
+    const thumbSize = (sizes.scrollbar.size - scrollbarPadding) * ratio; // minimum of 18 matches macOS minimum
+    return Math.max(thumbSize, 18);
+}
+function $f8fcbf76d19b7361$var$getScrollPositionFromPointer(pointerPos, pointerOffset, sizes, dir = 'ltr') {
+    const thumbSizePx = $f8fcbf76d19b7361$var$getThumbSize(sizes);
+    const thumbCenter = thumbSizePx / 2;
+    const offset = pointerOffset || thumbCenter;
+    const thumbOffsetFromEnd = thumbSizePx - offset;
+    const minPointerPos = sizes.scrollbar.paddingStart + offset;
+    const maxPointerPos = sizes.scrollbar.size - sizes.scrollbar.paddingEnd - thumbOffsetFromEnd;
+    const maxScrollPos = sizes.content - sizes.viewport;
+    const scrollRange = dir === 'ltr' ? [
+        0,
+        maxScrollPos
+    ] : [
+        maxScrollPos * -1,
+        0
+    ];
+    const interpolate = $f8fcbf76d19b7361$var$linearScale([
+        minPointerPos,
+        maxPointerPos
+    ], scrollRange);
+    return interpolate(pointerPos);
+}
+function $f8fcbf76d19b7361$var$getThumbOffsetFromScroll(scrollPos, sizes, dir = 'ltr') {
+    const thumbSizePx = $f8fcbf76d19b7361$var$getThumbSize(sizes);
+    const scrollbarPadding = sizes.scrollbar.paddingStart + sizes.scrollbar.paddingEnd;
+    const scrollbar = sizes.scrollbar.size - scrollbarPadding;
+    const maxScrollPos = sizes.content - sizes.viewport;
+    const maxThumbPos = scrollbar - thumbSizePx;
+    const scrollClampRange = dir === 'ltr' ? [
+        0,
+        maxScrollPos
+    ] : [
+        maxScrollPos * -1,
+        0
+    ];
+    const scrollWithoutMomentum = $4huGU$radixuinumber.clamp(scrollPos, scrollClampRange);
+    const interpolate = $f8fcbf76d19b7361$var$linearScale([
+        0,
+        maxScrollPos
+    ], [
+        0,
+        maxThumbPos
+    ]);
+    return interpolate(scrollWithoutMomentum);
+} // https://github.com/tmcw-up-for-adoption/simple-linear-scale/blob/master/index.js
+function $f8fcbf76d19b7361$var$linearScale(input, output) {
+    return (value)=>{
+        if (input[0] === input[1] || output[0] === output[1]) return output[0];
+        const ratio = (output[1] - output[0]) / (input[1] - input[0]);
+        return output[0] + ratio * (value - input[0]);
+    };
+}
+function $f8fcbf76d19b7361$var$isScrollingWithinScrollbarBounds(scrollPos, maxScrollPos) {
+    return scrollPos > 0 && scrollPos < maxScrollPos;
+} // Custom scroll handler to avoid scroll-linked effects
+// https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Scroll-linked_effects
+const $f8fcbf76d19b7361$var$addUnlinkedScrollListener = (node, handler = ()=>{})=>{
+    let prevPosition = {
+        left: node.scrollLeft,
+        top: node.scrollTop
+    };
+    let rAF = 0;
+    (function loop() {
+        const position = {
+            left: node.scrollLeft,
+            top: node.scrollTop
+        };
+        const isHorizontalScroll = prevPosition.left !== position.left;
+        const isVerticalScroll = prevPosition.top !== position.top;
+        if (isHorizontalScroll || isVerticalScroll) handler();
+        prevPosition = position;
+        rAF = window.requestAnimationFrame(loop);
+    })();
+    return ()=>window.cancelAnimationFrame(rAF)
+    ;
+};
+function $f8fcbf76d19b7361$var$useDebounceCallback(callback, delay) {
+    const handleCallback = $4huGU$radixuireactusecallbackref.useCallbackRef(callback);
+    const debounceTimerRef = $4huGU$react.useRef(0);
+    $4huGU$react.useEffect(()=>()=>window.clearTimeout(debounceTimerRef.current)
+    , []);
+    return $4huGU$react.useCallback(()=>{
+        window.clearTimeout(debounceTimerRef.current);
+        debounceTimerRef.current = window.setTimeout(handleCallback, delay);
+    }, [
+        handleCallback,
+        delay
+    ]);
+}
+function $f8fcbf76d19b7361$var$useResizeObserver(element, onResize) {
+    const handleResize = $4huGU$radixuireactusecallbackref.useCallbackRef(onResize);
+    $4huGU$radixuireactuselayouteffect.useLayoutEffect(()=>{
+        let rAF = 0;
+        if (element) {
+            /**
+       * Resize Observer will throw an often benign error that says `ResizeObserver loop
+       * completed with undelivered notifications`. This means that ResizeObserver was not
+       * able to deliver all observations within a single animation frame, so we use
+       * `requestAnimationFrame` to ensure we don't deliver unnecessary observations.
+       * Further reading: https://github.com/WICG/resize-observer/issues/38
+       */ const resizeObserver = new ResizeObserver(()=>{
+                cancelAnimationFrame(rAF);
+                rAF = window.requestAnimationFrame(handleResize);
+            });
+            resizeObserver.observe(element);
+            return ()=>{
+                window.cancelAnimationFrame(rAF);
+                resizeObserver.unobserve(element);
+            };
+        }
+    }, [
+        element,
+        handleResize
+    ]);
+}
+/* -----------------------------------------------------------------------------------------------*/ const $f8fcbf76d19b7361$export$be92b6f5f03c0fe9 = $f8fcbf76d19b7361$export$ccf8d8d7bbf3c2cc;
+const $f8fcbf76d19b7361$export$d5c6c08dc2d3ca7 = $f8fcbf76d19b7361$export$a21cbf9f11fca853;
+const $f8fcbf76d19b7361$export$9a4e88b92edfce6b = $f8fcbf76d19b7361$export$2fabd85d0eba3c57;
+const $f8fcbf76d19b7361$export$6521433ed15a34db = $f8fcbf76d19b7361$export$9fba1154677d7cd2;
+const $f8fcbf76d19b7361$export$ac61190d9fc311a9 = $f8fcbf76d19b7361$export$56969d565df7cc4b;
+
+
+
+
 //# sourceMappingURL=index.js.map