@jobber/components 8.14.0 → 8.15.0

package/dist/{DrawerRoot-es.js → ScrollAreaViewport-es.js}

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import React__default from 'react';
-import { f as formatErrorMessage, u as useRenderElement, E as EMPTY_OBJECT, b as useRefWithInit, c as useMergedRefs, i as isReactVersionAtLeast, N as NOOP } from './useRenderElement-es.js';
-import { X as TransitionStatusDataAttributes, t as transitionStatusMapping, Y as isJSDOM, z as stopEvent, s as ownerDocument, u as useIsoLayoutEffect, I as isSafari, l as visuallyHidden, k as createChangeEventDetails, M as focusOut, b as useId, a as useStableCallback, i as useValueAsRef, c as useTimeout, D as useAnimationFrame, Z as resolveRef, K as triggerHover, Q as outsidePress, N as isVirtualClick, O as isVirtualPointerEvent, _ as isWebKit, $ as isReactEvent, J as escapeKey, F as triggerPress, T as Timeout, E as isClickLikeEvent, d as useTransitionStatus, e as useOpenChangeComplete, g as clamp, j as isIOS, a0 as AnimationFrame, y as useValueChanged, V as imperativeAction, h as useControlled, n as none, a1 as isAndroid, a2 as closeWatcher } from './useValueChanged-es.js';
+import { f as formatErrorMessage, u as useRenderElement, E as EMPTY_OBJECT, a as useRefWithInit, b as useMergedRefs, i as isReactVersionAtLeast, N as NOOP } from './useRenderElement-es.js';
+import { X as TransitionStatusDataAttributes, t as transitionStatusMapping, Y as isJSDOM, A as stopEvent, s as ownerDocument, d as useIsoLayoutEffect, H as isSafari, l as visuallyHidden, k as createChangeEventDetails, M as focusOut, E as useId, a as useStableCallback, i as useValueAsRef, b as useTimeout, Z as useAnimationFrame, _ as resolveRef, K as triggerHover, Q as outsidePress, N as isVirtualClick, O as isVirtualPointerEvent, $ as isWebKit, D as isMouseLikePointerType, a0 as isClickLikeEvent, I as triggerPress, a1 as isReactEvent, J as escapeKey, T as Timeout, c as useTransitionStatus, e as useOpenChangeComplete, g as clamp, j as isIOS, a2 as AnimationFrame, z as useValueChanged, U as imperativeAction, u as useBaseUiId, y as useButton, h as useControlled, n as none, a3 as isAndroid, a4 as closeWatcher } from './useValueChanged-es.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { f as floor, t as tabbable, i as isTabbable, a as focusable } from './index.esm-es.js';
 import { i as isShadowRoot, b as isElement, a as isHTMLElement, f as getComputedStyle$1, g as getNodeName, c as isNode, k as getWindow, j as isWebKit$1, d as isLastTraversableNode, e as getParentNode, o as isOverflowElement } from './floating-ui.utils.dom-es.js';
@@ -1897,6 +1897,109 @@ function FloatingFocusManager(props) {
   });
 }
 
+/**
+ * Opens or closes the floating element when clicking the reference element.
+ * @see https://floating-ui.com/docs/useClick
+ */
+function useClick(context, props = {}) {
+  const store = 'rootStore' in context ? context.rootStore : context;
+  const dataRef = store.context.dataRef;
+  const {
+    enabled = true,
+    event: eventOption = 'click',
+    toggle = true,
+    ignoreMouse = false,
+    stickIfOpen = true,
+    touchOpenDelay = 0,
+    reason = triggerPress
+  } = props;
+  const pointerTypeRef = React.useRef(undefined);
+  const frame = useAnimationFrame();
+  const touchOpenTimeout = useTimeout();
+  const reference = React.useMemo(() => ({
+    onPointerDown(event) {
+      pointerTypeRef.current = event.pointerType;
+    },
+    onMouseDown(event) {
+      const pointerType = pointerTypeRef.current;
+      const nativeEvent = event.nativeEvent;
+      const open = store.select('open');
+
+      // Ignore all buttons except for the "main" button.
+      // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
+      if (event.button !== 0 || eventOption === 'click' || isMouseLikePointerType(pointerType, true) && ignoreMouse) {
+        return;
+      }
+      const openEvent = dataRef.current.openEvent;
+      const openEventType = openEvent?.type;
+      const hasClickedOnInactiveTrigger = store.select('domReferenceElement') !== event.currentTarget;
+      const nextOpen = open && hasClickedOnInactiveTrigger || !(open && toggle && (openEvent && stickIfOpen ? openEventType === 'click' || openEventType === 'mousedown' : true));
+
+      // Animations sometimes won't run on a typeable element if using a rAF.
+      // Focus is always set on these elements. For touch, we may delay opening.
+      if (isTypeableElement(nativeEvent.target)) {
+        const details = createChangeEventDetails(reason, nativeEvent, nativeEvent.target);
+        if (nextOpen && pointerType === 'touch' && touchOpenDelay > 0) {
+          touchOpenTimeout.start(touchOpenDelay, () => {
+            store.setOpen(true, details);
+          });
+        } else {
+          store.setOpen(nextOpen, details);
+        }
+        return;
+      }
+
+      // Capture the currentTarget before the rAF.
+      // as React sets it to null after the event handler completes.
+      const eventCurrentTarget = event.currentTarget;
+
+      // Wait until focus is set on the element. This is an alternative to
+      // `event.preventDefault()` to avoid :focus-visible from appearing when using a pointer.
+      frame.request(() => {
+        const details = createChangeEventDetails(reason, nativeEvent, eventCurrentTarget);
+        if (nextOpen && pointerType === 'touch' && touchOpenDelay > 0) {
+          touchOpenTimeout.start(touchOpenDelay, () => {
+            store.setOpen(true, details);
+          });
+        } else {
+          store.setOpen(nextOpen, details);
+        }
+      });
+    },
+    onClick(event) {
+      if (eventOption === 'mousedown-only') {
+        return;
+      }
+      const pointerType = pointerTypeRef.current;
+      if (eventOption === 'mousedown' && pointerType) {
+        pointerTypeRef.current = undefined;
+        return;
+      }
+      if (isMouseLikePointerType(pointerType, true) && ignoreMouse) {
+        return;
+      }
+      const open = store.select('open');
+      const openEvent = dataRef.current.openEvent;
+      const hasClickedOnInactiveTrigger = store.select('domReferenceElement') !== event.currentTarget;
+      const nextOpen = open && hasClickedOnInactiveTrigger || !(open && toggle && (openEvent && stickIfOpen ? isClickLikeEvent(openEvent) : true));
+      const details = createChangeEventDetails(reason, event.nativeEvent, event.currentTarget);
+      if (nextOpen && pointerType === 'touch' && touchOpenDelay > 0) {
+        touchOpenTimeout.start(touchOpenDelay, () => {
+          store.setOpen(true, details);
+        });
+      } else {
+        store.setOpen(nextOpen, details);
+      }
+    },
+    onKeyDown() {
+      pointerTypeRef.current = undefined;
+    }
+  }), [dataRef, eventOption, ignoreMouse, store, stickIfOpen, toggle, frame, touchOpenTimeout, touchOpenDelay, reason]);
+  return React.useMemo(() => enabled ? {
+    reference
+  } : EMPTY_OBJECT, [enabled, reference]);
+}
+
 const bubbleHandlerKeys = {
   intentional: 'onClick',
   sloppy: 'onPointerDown'
@@ -4587,7 +4690,7 @@ let drawerSwipeVarsRegistered = false;
  * See https://motion.dev/blog/web-animation-performance-tier-list
  * under the "Improving CSS variable performance" section.
  */
-function removeCSSVariableInheritance() {
+function removeCSSVariableInheritance$1() {
   if (drawerSwipeVarsRegistered) {
     return;
   }
@@ -4752,7 +4855,7 @@ const DrawerPopup = /*#__PURE__*/React.forwardRef(function DrawerPopup(component
     if (!popupElement) {
       return undefined;
     }
-    removeCSSVariableInheritance();
+    removeCSSVariableInheritance$1();
     measureHeight();
     if (typeof ResizeObserver !== 'function') {
       return undefined;
@@ -5569,6 +5672,66 @@ function DialogRoot(props) {
   });
 }
 
+/**
+ * A button that opens the dialog.
+ * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Dialog](https://base-ui.com/react/components/dialog)
+ */
+const DialogTrigger = /*#__PURE__*/React.forwardRef(function DialogTrigger(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    disabled = false,
+    nativeButton = true,
+    id: idProp,
+    payload,
+    handle,
+    ...elementProps
+  } = componentProps;
+  const dialogRootContext = useDialogRootContext(true);
+  const store = handle?.store ?? dialogRootContext?.store;
+  if (!store) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: <Dialog.Trigger> must be used within <Dialog.Root> or provided with a handle.' : formatErrorMessage(79));
+  }
+  const thisTriggerId = useBaseUiId(idProp);
+  const floatingContext = store.useState('floatingRootContext');
+  const isOpenedByThisTrigger = store.useState('isOpenedByTrigger', thisTriggerId);
+  const triggerElementRef = React.useRef(null);
+  const {
+    registerTrigger,
+    isMountedByThisTrigger
+  } = useTriggerDataForwarding(thisTriggerId, triggerElementRef, store, {
+    payload
+  });
+  const {
+    getButtonProps,
+    buttonRef
+  } = useButton({
+    disabled,
+    native: nativeButton
+  });
+  const click = useClick(floatingContext, {
+    enabled: floatingContext != null
+  });
+  const localInteractionProps = useInteractions([click]);
+  const state = {
+    disabled,
+    open: isOpenedByThisTrigger
+  };
+  const rootTriggerProps = store.useState('triggerProps', isMountedByThisTrigger);
+  return useRenderElement('button', componentProps, {
+    state,
+    ref: [buttonRef, forwardedRef, registerTrigger, triggerElementRef],
+    props: [localInteractionProps.getReferenceProps(), rootTriggerProps, {
+      [CLICK_TRIGGER_IDENTIFIER]: '',
+      id: thisTriggerId
+    }, elementProps, getButtonProps],
+    stateAttributesMapping: triggerOpenStateMapping
+  });
+});
+if (process.env.NODE_ENV !== "production") DialogTrigger.displayName = "DialogTrigger";
+
 var _DrawerProviderReport, _DrawerProviderReport2;
 /**
  * Groups all parts of the drawer.
@@ -5788,4 +5951,871 @@ function DrawerProviderReporter() {
   return null;
 }
 
-export { createInitialPopupStoreState as $, ARROW_DOWN$1 as A, ARROW_RIGHT$1 as B, findNonDisabledListIndex as C, DrawerPortal as D, enqueueFocus as E, FloatingRootStore as F, ARROW_UP$1 as G, isElementVisible as H, useTriggerDataForwarding as I, useInteractions as J, CLICK_TRIGGER_IDENTIFIER as K, triggerOpenStateMapping as L, DISABLED_TRANSITIONS_STYLE as M, popupStateMapping as N, COMPOSITE_KEYS as O, PopupTriggerMap as P, FloatingFocusManager as Q, FloatingPortal as R, POPUP_COLLISION_AVOIDANCE as S, TYPEABLE_SELECTOR as T, InternalBackdrop as U, inertValue as V, FloatingNode as W, DROPDOWN_COLLISION_AVOIDANCE as X, popupStoreSelectors as Y, createSelector as Z, ReactStore as _, DrawerBackdrop as a, FloatingTreeStore as a0, fastComponent as a1, useOnFirstRender as a2, useFloatingNodeId as a3, useOpenInteractionType as a4, useImplicitActiveTrigger as a5, useOpenStateTransitions as a6, useScrollLock as a7, useSyncedFloatingRootContext as a8, useDismiss as a9, Store as aA, useRole as aa, TYPEAHEAD_RESET_MS as ab, FloatingTree as ac, fastComponentRef as ad, getTabbableBeforeElement as ae, isOutsideEvent as af, getTabbableAfterElement as ag, getNextTabbable as ah, pressableTriggerOpenStateMapping as ai, FocusGuard as aj, PATIENT_CLICK_THRESHOLD as ak, useTriggerRegistration as al, useDrawerProviderContext as am, DrawerBackdropCssVars as an, DrawerPopupCssVars as ao, DrawerProviderContext as ap, CommonPopupDataAttributes as aq, useDialogPortalContext as ar, DialogStore as as, useDrawerRootContext as at, DrawerPopupDataAttributes as au, useDrawerSnapPoints as av, DrawerViewportContext as aw, BASE_UI_SWIPE_IGNORE_SELECTOR as ax, DRAWER_CONTENT_ATTRIBUTE as ay, useStore as az, DrawerPopup as b, DrawerContent as c, DrawerRoot as d, useFloatingParentNodeId as e, useFloatingTree as f, getTarget as g, isTargetInsideEnabledTrigger as h, isTypeableElement as i, createAttribute as j, activeElement as k, contains as l, matchesFocusVisible as m, getNodeChildren as n, getFloatingFocusElement as o, isTypeableCombobox as p, isIndexOutOfListBounds as q, getMinListIndex as r, getMaxListIndex as s, createGridCellMap as t, useDialogRootContext as u, isListIndexDisabled as v, getGridNavigatedIndex as w, getGridCellIndices as x, getGridCellIndexOfCorner as y, ARROW_LEFT$1 as z };
+/**
+ * A button that opens the drawer.
+ * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Drawer](https://base-ui.com/react/components/drawer)
+ */
+const DrawerTrigger = DialogTrigger;
+
+/**
+ * @internal
+ */
+const DirectionContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") DirectionContext.displayName = "DirectionContext";
+function useDirection() {
+  const context = React.useContext(DirectionContext);
+  return context?.direction ?? 'ltr';
+}
+
+const ScrollAreaRootContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") ScrollAreaRootContext.displayName = "ScrollAreaRootContext";
+function useScrollAreaRootContext() {
+  const context = React.useContext(ScrollAreaRootContext);
+  if (context === undefined) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: ScrollAreaRootContext is missing. ScrollArea parts must be placed within <ScrollArea.Root>.' : formatErrorMessage(53));
+  }
+  return context;
+}
+
+let ScrollAreaRootCssVars = /*#__PURE__*/function (ScrollAreaRootCssVars) {
+  /**
+   * The scroll area's corner height.
+   * @type {number}
+   */
+  ScrollAreaRootCssVars["scrollAreaCornerHeight"] = "--scroll-area-corner-height";
+  /**
+   * The scroll area's corner width.
+   * @type {number}
+   */
+  ScrollAreaRootCssVars["scrollAreaCornerWidth"] = "--scroll-area-corner-width";
+  return ScrollAreaRootCssVars;
+}({});
+
+const SCROLL_TIMEOUT = 500;
+const MIN_THUMB_SIZE = 16;
+
+function getOffset(element, prop, axis) {
+  if (!element) {
+    return 0;
+  }
+  const styles = getComputedStyle(element);
+  const propAxis = axis === 'x' ? 'Inline' : 'Block';
+
+  // Safari misreports `marginInlineEnd` in RTL.
+  // We have to assume the start/end values are symmetrical, which is likely.
+  if (axis === 'x' && prop === 'margin') {
+    return parseFloat(styles[`${prop}InlineStart`]) * 2;
+  }
+  return parseFloat(styles[`${prop}${propAxis}Start`]) + parseFloat(styles[`${prop}${propAxis}End`]);
+}
+
+let ScrollAreaScrollbarDataAttributes = /*#__PURE__*/function (ScrollAreaScrollbarDataAttributes) {
+  /**
+   * Indicates the orientation of the scrollbar.
+   * @type {'horizontal' | 'vertical'}
+   */
+  ScrollAreaScrollbarDataAttributes["orientation"] = "data-orientation";
+  /**
+   * Present when the pointer is over the scroll area.
+   */
+  ScrollAreaScrollbarDataAttributes["hovering"] = "data-hovering";
+  /**
+   * Present when the user scrolls inside the scroll area.
+   */
+  ScrollAreaScrollbarDataAttributes["scrolling"] = "data-scrolling";
+  /**
+   * Present when the scroll area content is wider than the viewport.
+   */
+  ScrollAreaScrollbarDataAttributes["hasOverflowX"] = "data-has-overflow-x";
+  /**
+   * Present when the scroll area content is taller than the viewport.
+   */
+  ScrollAreaScrollbarDataAttributes["hasOverflowY"] = "data-has-overflow-y";
+  /**
+   * Present when there is overflow on the horizontal start side.
+   */
+  ScrollAreaScrollbarDataAttributes["overflowXStart"] = "data-overflow-x-start";
+  /**
+   * Present when there is overflow on the horizontal end side.
+   */
+  ScrollAreaScrollbarDataAttributes["overflowXEnd"] = "data-overflow-x-end";
+  /**
+   * Present when there is overflow on the vertical start side.
+   */
+  ScrollAreaScrollbarDataAttributes["overflowYStart"] = "data-overflow-y-start";
+  /**
+   * Present when there is overflow on the vertical end side.
+   */
+  ScrollAreaScrollbarDataAttributes["overflowYEnd"] = "data-overflow-y-end";
+  return ScrollAreaScrollbarDataAttributes;
+}({});
+
+const DISABLE_SCROLLBAR_CLASS_NAME = 'base-ui-disable-scrollbar';
+const styleDisableScrollbar = {
+  className: DISABLE_SCROLLBAR_CLASS_NAME,
+  getElement(nonce) {
+    return /*#__PURE__*/jsx("style", {
+      nonce: nonce,
+      href: DISABLE_SCROLLBAR_CLASS_NAME,
+      precedence: "base-ui:low",
+      children: `.${DISABLE_SCROLLBAR_CLASS_NAME}{scrollbar-width:none}.${DISABLE_SCROLLBAR_CLASS_NAME}::-webkit-scrollbar{display:none}`
+    });
+  }
+};
+if (process.env.NODE_ENV !== "production") styleDisableScrollbar.getElement.displayName = "styleDisableScrollbar.getElement";
+
+let ScrollAreaRootDataAttributes = /*#__PURE__*/function (ScrollAreaRootDataAttributes) {
+  /**
+   * Present when the user scrolls inside the scroll area.
+   */
+  ScrollAreaRootDataAttributes["scrolling"] = "data-scrolling";
+  /**
+   * Present when the scroll area content is wider than the viewport.
+   */
+  ScrollAreaRootDataAttributes["hasOverflowX"] = "data-has-overflow-x";
+  /**
+   * Present when the scroll area content is taller than the viewport.
+   */
+  ScrollAreaRootDataAttributes["hasOverflowY"] = "data-has-overflow-y";
+  /**
+   * Present when there is overflow on the horizontal start side.
+   */
+  ScrollAreaRootDataAttributes["overflowXStart"] = "data-overflow-x-start";
+  /**
+   * Present when there is overflow on the horizontal end side.
+   */
+  ScrollAreaRootDataAttributes["overflowXEnd"] = "data-overflow-x-end";
+  /**
+   * Present when there is overflow on the vertical start side.
+   */
+  ScrollAreaRootDataAttributes["overflowYStart"] = "data-overflow-y-start";
+  /**
+   * Present when there is overflow on the vertical end side.
+   */
+  ScrollAreaRootDataAttributes["overflowYEnd"] = "data-overflow-y-end";
+  return ScrollAreaRootDataAttributes;
+}({});
+
+const scrollAreaStateAttributesMapping = {
+  hasOverflowX: value => value ? {
+    [ScrollAreaRootDataAttributes.hasOverflowX]: ''
+  } : null,
+  hasOverflowY: value => value ? {
+    [ScrollAreaRootDataAttributes.hasOverflowY]: ''
+  } : null,
+  overflowXStart: value => value ? {
+    [ScrollAreaRootDataAttributes.overflowXStart]: ''
+  } : null,
+  overflowXEnd: value => value ? {
+    [ScrollAreaRootDataAttributes.overflowXEnd]: ''
+  } : null,
+  overflowYStart: value => value ? {
+    [ScrollAreaRootDataAttributes.overflowYStart]: ''
+  } : null,
+  overflowYEnd: value => value ? {
+    [ScrollAreaRootDataAttributes.overflowYEnd]: ''
+  } : null,
+  cornerHidden: () => null
+};
+
+/**
+ * @internal
+ */
+const CSPContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") CSPContext.displayName = "CSPContext";
+const DEFAULT_CSP_CONTEXT_VALUE = {
+  disableStyleElements: false
+};
+
+/**
+ * @internal
+ */
+function useCSPContext() {
+  return React.useContext(CSPContext) ?? DEFAULT_CSP_CONTEXT_VALUE;
+}
+
+const DEFAULT_COORDS = {
+  x: 0,
+  y: 0
+};
+const DEFAULT_SIZE = {
+  width: 0,
+  height: 0
+};
+const DEFAULT_OVERFLOW_EDGES = {
+  xStart: false,
+  xEnd: false,
+  yStart: false,
+  yEnd: false
+};
+const DEFAULT_HIDDEN_STATE = {
+  x: true,
+  y: true,
+  corner: true
+};
+/**
+ * Groups all parts of the scroll area.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area)
+ */
+const ScrollAreaRoot = /*#__PURE__*/React.forwardRef(function ScrollAreaRoot(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    overflowEdgeThreshold: overflowEdgeThresholdProp,
+    ...elementProps
+  } = componentProps;
+  const overflowEdgeThreshold = normalizeOverflowEdgeThreshold(overflowEdgeThresholdProp);
+  const rootId = useBaseUiId();
+  const scrollYTimeout = useTimeout();
+  const scrollXTimeout = useTimeout();
+  const {
+    nonce,
+    disableStyleElements
+  } = useCSPContext();
+  const [hovering, setHovering] = React.useState(false);
+  const [scrollingX, setScrollingX] = React.useState(false);
+  const [scrollingY, setScrollingY] = React.useState(false);
+  const [touchModality, setTouchModality] = React.useState(false);
+  const [hasMeasuredScrollbar, setHasMeasuredScrollbar] = React.useState(false);
+  const [cornerSize, setCornerSize] = React.useState(DEFAULT_SIZE);
+  const [thumbSize, setThumbSize] = React.useState(DEFAULT_SIZE);
+  const [overflowEdges, setOverflowEdges] = React.useState(DEFAULT_OVERFLOW_EDGES);
+  const [hiddenState, setHiddenState] = React.useState(DEFAULT_HIDDEN_STATE);
+  const rootRef = React.useRef(null);
+  const viewportRef = React.useRef(null);
+  const scrollbarYRef = React.useRef(null);
+  const scrollbarXRef = React.useRef(null);
+  const thumbYRef = React.useRef(null);
+  const thumbXRef = React.useRef(null);
+  const cornerRef = React.useRef(null);
+  const thumbDraggingRef = React.useRef(false);
+  const startYRef = React.useRef(0);
+  const startXRef = React.useRef(0);
+  const startScrollTopRef = React.useRef(0);
+  const startScrollLeftRef = React.useRef(0);
+  const currentOrientationRef = React.useRef('vertical');
+  const scrollPositionRef = React.useRef(DEFAULT_COORDS);
+  const handleScroll = useStableCallback(scrollPosition => {
+    const offsetX = scrollPosition.x - scrollPositionRef.current.x;
+    const offsetY = scrollPosition.y - scrollPositionRef.current.y;
+    scrollPositionRef.current = scrollPosition;
+    if (offsetY !== 0) {
+      setScrollingY(true);
+      scrollYTimeout.start(SCROLL_TIMEOUT, () => {
+        setScrollingY(false);
+      });
+    }
+    if (offsetX !== 0) {
+      setScrollingX(true);
+      scrollXTimeout.start(SCROLL_TIMEOUT, () => {
+        setScrollingX(false);
+      });
+    }
+  });
+  const handlePointerDown = useStableCallback(event => {
+    if (event.button !== 0) {
+      return;
+    }
+    thumbDraggingRef.current = true;
+    startYRef.current = event.clientY;
+    startXRef.current = event.clientX;
+    currentOrientationRef.current = event.currentTarget.getAttribute(ScrollAreaScrollbarDataAttributes.orientation);
+    if (viewportRef.current) {
+      startScrollTopRef.current = viewportRef.current.scrollTop;
+      startScrollLeftRef.current = viewportRef.current.scrollLeft;
+    }
+    if (thumbYRef.current && currentOrientationRef.current === 'vertical') {
+      thumbYRef.current.setPointerCapture(event.pointerId);
+    }
+    if (thumbXRef.current && currentOrientationRef.current === 'horizontal') {
+      thumbXRef.current.setPointerCapture(event.pointerId);
+    }
+  });
+  const handlePointerMove = useStableCallback(event => {
+    if (!thumbDraggingRef.current) {
+      return;
+    }
+    const deltaY = event.clientY - startYRef.current;
+    const deltaX = event.clientX - startXRef.current;
+    if (viewportRef.current) {
+      const scrollableContentHeight = viewportRef.current.scrollHeight;
+      const viewportHeight = viewportRef.current.clientHeight;
+      const scrollableContentWidth = viewportRef.current.scrollWidth;
+      const viewportWidth = viewportRef.current.clientWidth;
+      if (thumbYRef.current && scrollbarYRef.current && currentOrientationRef.current === 'vertical') {
+        const scrollbarYOffset = getOffset(scrollbarYRef.current, 'padding', 'y');
+        const thumbYOffset = getOffset(thumbYRef.current, 'margin', 'y');
+        const thumbHeight = thumbYRef.current.offsetHeight;
+        const maxThumbOffsetY = scrollbarYRef.current.offsetHeight - thumbHeight - scrollbarYOffset - thumbYOffset;
+        const scrollRatioY = deltaY / maxThumbOffsetY;
+        viewportRef.current.scrollTop = startScrollTopRef.current + scrollRatioY * (scrollableContentHeight - viewportHeight);
+        event.preventDefault();
+        setScrollingY(true);
+        scrollYTimeout.start(SCROLL_TIMEOUT, () => {
+          setScrollingY(false);
+        });
+      }
+      if (thumbXRef.current && scrollbarXRef.current && currentOrientationRef.current === 'horizontal') {
+        const scrollbarXOffset = getOffset(scrollbarXRef.current, 'padding', 'x');
+        const thumbXOffset = getOffset(thumbXRef.current, 'margin', 'x');
+        const thumbWidth = thumbXRef.current.offsetWidth;
+        const maxThumbOffsetX = scrollbarXRef.current.offsetWidth - thumbWidth - scrollbarXOffset - thumbXOffset;
+        const scrollRatioX = deltaX / maxThumbOffsetX;
+        viewportRef.current.scrollLeft = startScrollLeftRef.current + scrollRatioX * (scrollableContentWidth - viewportWidth);
+        event.preventDefault();
+        setScrollingX(true);
+        scrollXTimeout.start(SCROLL_TIMEOUT, () => {
+          setScrollingX(false);
+        });
+      }
+    }
+  });
+  const handlePointerUp = useStableCallback(event => {
+    thumbDraggingRef.current = false;
+    if (thumbYRef.current && currentOrientationRef.current === 'vertical') {
+      thumbYRef.current.releasePointerCapture(event.pointerId);
+    }
+    if (thumbXRef.current && currentOrientationRef.current === 'horizontal') {
+      thumbXRef.current.releasePointerCapture(event.pointerId);
+    }
+  });
+  function handleTouchModalityChange(event) {
+    setTouchModality(event.pointerType === 'touch');
+  }
+  function handlePointerEnterOrMove(event) {
+    handleTouchModalityChange(event);
+    if (event.pointerType !== 'touch') {
+      const isTargetRootChild = contains(rootRef.current, event.target);
+      setHovering(isTargetRootChild);
+    }
+  }
+  const state = React.useMemo(() => ({
+    scrolling: scrollingX || scrollingY,
+    hasOverflowX: !hiddenState.x,
+    hasOverflowY: !hiddenState.y,
+    overflowXStart: overflowEdges.xStart,
+    overflowXEnd: overflowEdges.xEnd,
+    overflowYStart: overflowEdges.yStart,
+    overflowYEnd: overflowEdges.yEnd,
+    cornerHidden: hiddenState.corner
+  }), [scrollingX, scrollingY, hiddenState.x, hiddenState.y, hiddenState.corner, overflowEdges]);
+  const props = {
+    role: 'presentation',
+    onPointerEnter: handlePointerEnterOrMove,
+    onPointerMove: handlePointerEnterOrMove,
+    onPointerDown: handleTouchModalityChange,
+    onPointerLeave() {
+      setHovering(false);
+    },
+    style: {
+      position: 'relative',
+      [ScrollAreaRootCssVars.scrollAreaCornerHeight]: `${cornerSize.height}px`,
+      [ScrollAreaRootCssVars.scrollAreaCornerWidth]: `${cornerSize.width}px`
+    }
+  };
+  const element = useRenderElement('div', componentProps, {
+    state,
+    ref: [forwardedRef, rootRef],
+    props: [props, elementProps],
+    stateAttributesMapping: scrollAreaStateAttributesMapping
+  });
+  const contextValue = React.useMemo(() => ({
+    handlePointerDown,
+    handlePointerMove,
+    handlePointerUp,
+    handleScroll,
+    cornerSize,
+    setCornerSize,
+    thumbSize,
+    setThumbSize,
+    hasMeasuredScrollbar,
+    setHasMeasuredScrollbar,
+    touchModality,
+    cornerRef,
+    scrollingX,
+    setScrollingX,
+    scrollingY,
+    setScrollingY,
+    hovering,
+    setHovering,
+    viewportRef,
+    rootRef,
+    scrollbarYRef,
+    scrollbarXRef,
+    thumbYRef,
+    thumbXRef,
+    rootId,
+    hiddenState,
+    setHiddenState,
+    overflowEdges,
+    setOverflowEdges,
+    viewportState: state,
+    overflowEdgeThreshold
+  }), [handlePointerDown, handlePointerMove, handlePointerUp, handleScroll, cornerSize, thumbSize, hasMeasuredScrollbar, touchModality, scrollingX, setScrollingX, scrollingY, setScrollingY, hovering, setHovering, rootId, hiddenState, overflowEdges, state, overflowEdgeThreshold]);
+  return /*#__PURE__*/jsxs(ScrollAreaRootContext.Provider, {
+    value: contextValue,
+    children: [!disableStyleElements && styleDisableScrollbar.getElement(nonce), element]
+  });
+});
+if (process.env.NODE_ENV !== "production") ScrollAreaRoot.displayName = "ScrollAreaRoot";
+function normalizeOverflowEdgeThreshold(threshold) {
+  if (typeof threshold === 'number') {
+    const value = Math.max(0, threshold);
+    return {
+      xStart: value,
+      xEnd: value,
+      yStart: value,
+      yEnd: value
+    };
+  }
+  return {
+    xStart: Math.max(0, threshold?.xStart || 0),
+    xEnd: Math.max(0, threshold?.xEnd || 0),
+    yStart: Math.max(0, threshold?.yStart || 0),
+    yEnd: Math.max(0, threshold?.yEnd || 0)
+  };
+}
+
+const ScrollAreaViewportContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") ScrollAreaViewportContext.displayName = "ScrollAreaViewportContext";
+function useScrollAreaViewportContext() {
+  const context = React.useContext(ScrollAreaViewportContext);
+  if (context === undefined) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: ScrollAreaViewportContext missing. ScrollAreaViewport parts must be placed within <ScrollArea.Viewport>.' : formatErrorMessage(55));
+  }
+  return context;
+}
+
+/**
+ * Executes a callback when an element becomes visible.
+ */
+function onVisible(element, callback) {
+  if (typeof IntersectionObserver === 'undefined') {
+    return () => {};
+  }
+  const observer = new IntersectionObserver(entries => {
+    entries.forEach(entry => {
+      if (entry.intersectionRatio > 0) {
+        callback();
+        observer.disconnect();
+      }
+    });
+  });
+  observer.observe(element);
+  return () => {
+    observer.disconnect();
+  };
+}
+
+let ScrollAreaViewportCssVars = /*#__PURE__*/function (ScrollAreaViewportCssVars) {
+  /**
+   * The distance from the horizontal start edge in pixels.
+   * @type {number}
+   */
+  ScrollAreaViewportCssVars["scrollAreaOverflowXStart"] = "--scroll-area-overflow-x-start";
+  /**
+   * The distance from the horizontal end edge in pixels.
+   * @type {number}
+   */
+  ScrollAreaViewportCssVars["scrollAreaOverflowXEnd"] = "--scroll-area-overflow-x-end";
+  /**
+   * The distance from the vertical start edge in pixels.
+   * @type {number}
+   */
+  ScrollAreaViewportCssVars["scrollAreaOverflowYStart"] = "--scroll-area-overflow-y-start";
+  /**
+   * The distance from the vertical end edge in pixels.
+   * @type {number}
+   */
+  ScrollAreaViewportCssVars["scrollAreaOverflowYEnd"] = "--scroll-area-overflow-y-end";
+  return ScrollAreaViewportCssVars;
+}({});
+
+const SCROLL_EDGE_TOLERANCE_PX = 1;
+function normalizeScrollOffset(value, max) {
+  if (max <= 0) {
+    return 0;
+  }
+  const clamped = clamp(value, 0, max);
+  const startDistance = clamped;
+  const endDistance = max - clamped;
+  const withinStartTolerance = startDistance <= SCROLL_EDGE_TOLERANCE_PX;
+  const withinEndTolerance = endDistance <= SCROLL_EDGE_TOLERANCE_PX;
+  if (withinStartTolerance && withinEndTolerance) {
+    return startDistance <= endDistance ? 0 : max;
+  }
+  if (withinStartTolerance) {
+    return 0;
+  }
+  if (withinEndTolerance) {
+    return max;
+  }
+  return clamped;
+}
+
+let scrollAreaOverflowVarsRegistered = false;
+const HAS_RESIZE_OBSERVER = typeof ResizeObserver !== 'undefined';
+
+/**
+ * Removes inheritance of the scroll area overflow CSS variables, which
+ * improves rendering performance in complex scroll areas with deep subtrees.
+ * Instead, each child must manually opt-in to using these properties by
+ * specifying `inherit`.
+ * See https://motion.dev/blog/web-animation-performance-tier-list
+ * under the "Improving CSS variable performance" section.
+ */
+function removeCSSVariableInheritance() {
+  if (scrollAreaOverflowVarsRegistered ||
+  // When `inherits: false`, specifying `inherit` on child elements doesn't work
+  // in Safari. To let CSS features work correctly, this optimization must be skipped.
+  isWebKit) {
+    return;
+  }
+  if (typeof CSS !== 'undefined' && 'registerProperty' in CSS) {
+    [ScrollAreaViewportCssVars.scrollAreaOverflowXStart, ScrollAreaViewportCssVars.scrollAreaOverflowXEnd, ScrollAreaViewportCssVars.scrollAreaOverflowYStart, ScrollAreaViewportCssVars.scrollAreaOverflowYEnd].forEach(name => {
+      try {
+        CSS.registerProperty({
+          name,
+          syntax: '<length>',
+          inherits: false,
+          initialValue: '0px'
+        });
+      } catch {
+        /* ignore already-registered */
+      }
+    });
+  }
+  scrollAreaOverflowVarsRegistered = true;
+}
+
+/**
+ * The actual scrollable container of the scroll area.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area)
+ */
+const ScrollAreaViewport = /*#__PURE__*/React.forwardRef(function ScrollAreaViewport(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    ...elementProps
+  } = componentProps;
+  const {
+    viewportRef,
+    scrollbarYRef,
+    scrollbarXRef,
+    thumbYRef,
+    thumbXRef,
+    cornerRef,
+    cornerSize,
+    setCornerSize,
+    setThumbSize,
+    rootId,
+    setHiddenState,
+    hiddenState,
+    setHasMeasuredScrollbar,
+    handleScroll,
+    setHovering,
+    setOverflowEdges,
+    overflowEdges,
+    overflowEdgeThreshold,
+    scrollingX,
+    scrollingY
+  } = useScrollAreaRootContext();
+  const direction = useDirection();
+  const programmaticScrollRef = React.useRef(true);
+  const lastMeasuredViewportMetricsRef = React.useRef([NaN, NaN, NaN, NaN]);
+  const scrollEndTimeout = useTimeout();
+  const waitForAnimationsTimeout = useTimeout();
+  const computeThumbPosition = useStableCallback(() => {
+    const viewportEl = viewportRef.current;
+    const scrollbarYEl = scrollbarYRef.current;
+    const scrollbarXEl = scrollbarXRef.current;
+    const thumbYEl = thumbYRef.current;
+    const thumbXEl = thumbXRef.current;
+    const cornerEl = cornerRef.current;
+    if (!viewportEl) {
+      return;
+    }
+    const scrollableContentHeight = viewportEl.scrollHeight;
+    const scrollableContentWidth = viewportEl.scrollWidth;
+    const viewportHeight = viewportEl.clientHeight;
+    const viewportWidth = viewportEl.clientWidth;
+    const scrollTop = viewportEl.scrollTop;
+    const scrollLeft = viewportEl.scrollLeft;
+    const lastMeasuredViewportMetrics = lastMeasuredViewportMetricsRef.current;
+    const isFirstMeasurement = Number.isNaN(lastMeasuredViewportMetrics[0]);
+    lastMeasuredViewportMetrics[0] = viewportHeight;
+    lastMeasuredViewportMetrics[1] = scrollableContentHeight;
+    lastMeasuredViewportMetrics[2] = viewportWidth;
+    lastMeasuredViewportMetrics[3] = scrollableContentWidth;
+    if (isFirstMeasurement) {
+      setHasMeasuredScrollbar(true);
+    }
+    if (scrollableContentHeight === 0 || scrollableContentWidth === 0) {
+      return;
+    }
+    const nextHiddenState = getHiddenState(viewportEl);
+    const scrollbarYHidden = nextHiddenState.y;
+    const scrollbarXHidden = nextHiddenState.x;
+    const ratioX = viewportWidth / scrollableContentWidth;
+    const ratioY = viewportHeight / scrollableContentHeight;
+    const maxScrollLeft = Math.max(0, scrollableContentWidth - viewportWidth);
+    const maxScrollTop = Math.max(0, scrollableContentHeight - viewportHeight);
+    let scrollLeftFromStart = 0;
+    let scrollLeftFromEnd = 0;
+    if (!scrollbarXHidden) {
+      let rawScrollLeftFromStart = 0;
+      if (direction === 'rtl') {
+        rawScrollLeftFromStart = clamp(-scrollLeft, 0, maxScrollLeft);
+      } else {
+        rawScrollLeftFromStart = clamp(scrollLeft, 0, maxScrollLeft);
+      }
+      scrollLeftFromStart = normalizeScrollOffset(rawScrollLeftFromStart, maxScrollLeft);
+      scrollLeftFromEnd = maxScrollLeft - scrollLeftFromStart;
+    }
+    const rawScrollTopFromStart = !scrollbarYHidden ? clamp(scrollTop, 0, maxScrollTop) : 0;
+    const scrollTopFromStart = !scrollbarYHidden ? normalizeScrollOffset(rawScrollTopFromStart, maxScrollTop) : 0;
+    const scrollTopFromEnd = !scrollbarYHidden ? maxScrollTop - scrollTopFromStart : 0;
+    const nextWidth = scrollbarXHidden ? 0 : viewportWidth;
+    const nextHeight = scrollbarYHidden ? 0 : viewportHeight;
+    let nextCornerWidth = 0;
+    let nextCornerHeight = 0;
+    if (!scrollbarXHidden && !scrollbarYHidden) {
+      nextCornerWidth = scrollbarYEl?.offsetWidth || 0;
+      nextCornerHeight = scrollbarXEl?.offsetHeight || 0;
+    }
+
+    // Only subtract corner size from scrollbar dimensions if the corner hasn't been sized yet.
+    // Once sized, the layout will already account for it.
+    const cornerNotYetSized = cornerSize.width === 0 && cornerSize.height === 0;
+    const cornerWidthOffset = cornerNotYetSized ? nextCornerWidth : 0;
+    const cornerHeightOffset = cornerNotYetSized ? nextCornerHeight : 0;
+    const scrollbarXOffset = getOffset(scrollbarXEl, 'padding', 'x');
+    const scrollbarYOffset = getOffset(scrollbarYEl, 'padding', 'y');
+    const thumbXOffset = getOffset(thumbXEl, 'margin', 'x');
+    const thumbYOffset = getOffset(thumbYEl, 'margin', 'y');
+    const idealNextWidth = nextWidth - scrollbarXOffset - thumbXOffset;
+    const idealNextHeight = nextHeight - scrollbarYOffset - thumbYOffset;
+    const maxNextWidth = scrollbarXEl ? Math.min(scrollbarXEl.offsetWidth - cornerWidthOffset, idealNextWidth) : idealNextWidth;
+    const maxNextHeight = scrollbarYEl ? Math.min(scrollbarYEl.offsetHeight - cornerHeightOffset, idealNextHeight) : idealNextHeight;
+    const clampedNextWidth = Math.max(MIN_THUMB_SIZE, maxNextWidth * ratioX);
+    const clampedNextHeight = Math.max(MIN_THUMB_SIZE, maxNextHeight * ratioY);
+    setThumbSize(prevSize => {
+      if (prevSize.height === clampedNextHeight && prevSize.width === clampedNextWidth) {
+        return prevSize;
+      }
+      return {
+        width: clampedNextWidth,
+        height: clampedNextHeight
+      };
+    });
+
+    // Handle Y (vertical) scroll
+    if (scrollbarYEl && thumbYEl) {
+      const maxThumbOffsetY = scrollbarYEl.offsetHeight - clampedNextHeight - scrollbarYOffset - thumbYOffset;
+      const scrollRangeY = scrollableContentHeight - viewportHeight;
+      const scrollRatioY = scrollRangeY === 0 ? 0 : scrollTop / scrollRangeY;
+
+      // In Safari, don't allow it to go negative or too far as `scrollTop` considers the rubber
+      // band effect.
+      const thumbOffsetY = Math.min(maxThumbOffsetY, Math.max(0, scrollRatioY * maxThumbOffsetY));
+      thumbYEl.style.transform = `translate3d(0,${thumbOffsetY}px,0)`;
+    }
+
+    // Handle X (horizontal) scroll
+    if (scrollbarXEl && thumbXEl) {
+      const maxThumbOffsetX = scrollbarXEl.offsetWidth - clampedNextWidth - scrollbarXOffset - thumbXOffset;
+      const scrollRangeX = scrollableContentWidth - viewportWidth;
+      const scrollRatioX = scrollRangeX === 0 ? 0 : scrollLeft / scrollRangeX;
+
+      // In Safari, don't allow it to go negative or too far as `scrollLeft` considers the rubber
+      // band effect.
+      const thumbOffsetX = direction === 'rtl' ? clamp(scrollRatioX * maxThumbOffsetX, -maxThumbOffsetX, 0) : clamp(scrollRatioX * maxThumbOffsetX, 0, maxThumbOffsetX);
+      thumbXEl.style.transform = `translate3d(${thumbOffsetX}px,0,0)`;
+    }
+    const overflowMetricsPx = [[ScrollAreaViewportCssVars.scrollAreaOverflowXStart, scrollLeftFromStart], [ScrollAreaViewportCssVars.scrollAreaOverflowXEnd, scrollLeftFromEnd], [ScrollAreaViewportCssVars.scrollAreaOverflowYStart, scrollTopFromStart], [ScrollAreaViewportCssVars.scrollAreaOverflowYEnd, scrollTopFromEnd]];
+    for (const [cssVar, value] of overflowMetricsPx) {
+      viewportEl.style.setProperty(cssVar, `${value}px`);
+    }
+    if (cornerEl) {
+      if (scrollbarXHidden || scrollbarYHidden) {
+        setCornerSize({
+          width: 0,
+          height: 0
+        });
+      } else if (!scrollbarXHidden && !scrollbarYHidden) {
+        setCornerSize({
+          width: nextCornerWidth,
+          height: nextCornerHeight
+        });
+      }
+    }
+    setHiddenState(prevState => mergeHiddenState(prevState, nextHiddenState));
+    const nextOverflowEdges = {
+      xStart: !scrollbarXHidden && scrollLeftFromStart > overflowEdgeThreshold.xStart,
+      xEnd: !scrollbarXHidden && scrollLeftFromEnd > overflowEdgeThreshold.xEnd,
+      yStart: !scrollbarYHidden && scrollTopFromStart > overflowEdgeThreshold.yStart,
+      yEnd: !scrollbarYHidden && scrollTopFromEnd > overflowEdgeThreshold.yEnd
+    };
+    setOverflowEdges(prev => {
+      if (prev.xStart === nextOverflowEdges.xStart && prev.xEnd === nextOverflowEdges.xEnd && prev.yStart === nextOverflowEdges.yStart && prev.yEnd === nextOverflowEdges.yEnd) {
+        return prev;
+      }
+      return nextOverflowEdges;
+    });
+  });
+  useIsoLayoutEffect(() => {
+    if (!viewportRef.current) {
+      return undefined;
+    }
+    removeCSSVariableInheritance();
+    if (HAS_RESIZE_OBSERVER) {
+      return undefined;
+    }
+    return onVisible(viewportRef.current, () => {
+      computeThumbPosition();
+    });
+  }, [computeThumbPosition, viewportRef]);
+  useIsoLayoutEffect(() => {
+    // Wait for scrollbar and thumb refs after hidden-state toggles, and refresh math on direction flips.
+    queueMicrotask(computeThumbPosition);
+  }, [computeThumbPosition, hiddenState, direction]);
+  useIsoLayoutEffect(() => {
+    // `onMouseEnter` doesn't fire upon load, so we need to check if the viewport is already
+    // being hovered.
+    if (viewportRef.current?.matches(':hover')) {
+      setHovering(true);
+    }
+  }, [viewportRef, setHovering]);
+  React.useEffect(() => {
+    const viewport = viewportRef.current;
+    if (!HAS_RESIZE_OBSERVER || !viewport) {
+      return undefined;
+    }
+    let hasInitialized = false;
+    const ro = new ResizeObserver(() => {
+      // Avoid duplicate mount-time recompute when observer data matches what the mount
+      // scheduling pass already measured. If dimensions changed before the first observer
+      // delivery, keep the recompute so overflow transitions stay in sync.
+      if (!hasInitialized) {
+        hasInitialized = true;
+        const lastMeasuredViewportMetrics = lastMeasuredViewportMetricsRef.current;
+        if (lastMeasuredViewportMetrics[0] === viewport.clientHeight && lastMeasuredViewportMetrics[1] === viewport.scrollHeight && lastMeasuredViewportMetrics[2] === viewport.clientWidth && lastMeasuredViewportMetrics[3] === viewport.scrollWidth) {
+          return;
+        }
+      }
+      computeThumbPosition();
+    });
+    ro.observe(viewport);
+
+    // If there are animations in the viewport, wait for them to finish and then recompute the thumb position.
+    // This is necessary when the viewport contains a Dialog that is animating its popup on open
+    // and the popup is using a transform for the animation, which affects the size of the viewport.
+    // Without this, the thumb position will be incorrect until scrolling (i.e. if the scrollbar shows
+    // on hover, the thumb has an incorrect size).
+    // We assume the user is using `onOpenChangeComplete` to hide the scrollbar
+    // until animations complete because otherwise the scrollbar would show the thumb resizing mid-animation.
+    waitForAnimationsTimeout.start(0, () => {
+      const animations = viewport.getAnimations({
+        subtree: true
+      });
+      if (animations.length === 0) {
+        return;
+      }
+      Promise.allSettled(animations.map(animation => animation.finished)).then(computeThumbPosition).catch(() => {});
+    });
+    return () => {
+      ro.disconnect();
+      waitForAnimationsTimeout.clear();
+    };
+  }, [computeThumbPosition, viewportRef, waitForAnimationsTimeout]);
+  function handleUserInteraction() {
+    programmaticScrollRef.current = false;
+  }
+  const props = {
+    role: 'presentation',
+    ...(rootId && {
+      'data-id': `${rootId}-viewport`
+    }),
+    // https://accessibilityinsights.io/info-examples/web/scrollable-region-focusable/
+    // Keep non-scrollable viewports out of tab order.
+    tabIndex: hiddenState.x && hiddenState.y ? -1 : 0,
+    className: styleDisableScrollbar.className,
+    style: {
+      overflow: 'scroll'
+    },
+    onScroll() {
+      if (!viewportRef.current) {
+        return;
+      }
+      computeThumbPosition();
+      if (!programmaticScrollRef.current) {
+        handleScroll({
+          x: viewportRef.current.scrollLeft,
+          y: viewportRef.current.scrollTop
+        });
+      }
+
+      // Debounce the restoration of the programmatic flag so that it only
+      // flips back to `true` once scrolling has come to a rest. This ensures
+      // that momentum scrolling (where no further user-interaction events fire)
+      // is still treated as user-driven.
+      // 100 ms without scroll events ≈ scroll end
+      // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollend_event
+      scrollEndTimeout.start(100, () => {
+        programmaticScrollRef.current = true;
+      });
+    },
+    onWheel: handleUserInteraction,
+    onTouchMove: handleUserInteraction,
+    onPointerMove: handleUserInteraction,
+    onPointerEnter: handleUserInteraction,
+    onKeyDown: handleUserInteraction
+  };
+  const viewportState = React.useMemo(() => ({
+    scrolling: scrollingX || scrollingY,
+    hasOverflowX: !hiddenState.x,
+    hasOverflowY: !hiddenState.y,
+    overflowXStart: overflowEdges.xStart,
+    overflowXEnd: overflowEdges.xEnd,
+    overflowYStart: overflowEdges.yStart,
+    overflowYEnd: overflowEdges.yEnd,
+    cornerHidden: hiddenState.corner
+  }), [scrollingX, scrollingY, hiddenState.x, hiddenState.y, hiddenState.corner, overflowEdges]);
+  const element = useRenderElement('div', componentProps, {
+    ref: [forwardedRef, viewportRef],
+    state: viewportState,
+    props: [props, elementProps],
+    stateAttributesMapping: scrollAreaStateAttributesMapping
+  });
+  const contextValue = React.useMemo(() => ({
+    computeThumbPosition
+  }), [computeThumbPosition]);
+  return /*#__PURE__*/jsx(ScrollAreaViewportContext.Provider, {
+    value: contextValue,
+    children: element
+  });
+});
+if (process.env.NODE_ENV !== "production") ScrollAreaViewport.displayName = "ScrollAreaViewport";
+function getHiddenState(viewport) {
+  const y = viewport.clientHeight >= viewport.scrollHeight;
+  const x = viewport.clientWidth >= viewport.scrollWidth;
+  return {
+    y,
+    x,
+    corner: y || x
+  };
+}
+function mergeHiddenState(prevState, nextState) {
+  if (prevState.y === nextState.y && prevState.x === nextState.x && prevState.corner === nextState.corner) {
+    return prevState;
+  }
+  return nextState;
+}
+
+export { createInitialPopupStoreState as $, getGridCellIndexOfCorner as A, ARROW_DOWN$1 as B, ARROW_LEFT$1 as C, DrawerTrigger as D, ARROW_RIGHT$1 as E, FloatingRootStore as F, findNonDisabledListIndex as G, enqueueFocus as H, ARROW_UP$1 as I, isElementVisible as J, DISABLED_TRANSITIONS_STYLE as K, popupStateMapping as L, COMPOSITE_KEYS as M, FloatingFocusManager as N, FloatingPortal as O, PopupTriggerMap as P, useDirection as Q, POPUP_COLLISION_AVOIDANCE as R, ScrollAreaRoot as S, TYPEABLE_SELECTOR as T, InternalBackdrop as U, inertValue as V, FloatingNode as W, DROPDOWN_COLLISION_AVOIDANCE as X, popupStoreSelectors as Y, createSelector as Z, ReactStore as _, DrawerRoot as a, FloatingTreeStore as a0, fastComponent as a1, useOnFirstRender as a2, useFloatingNodeId as a3, useOpenInteractionType as a4, useImplicitActiveTrigger as a5, useOpenStateTransitions as a6, useScrollLock as a7, useSyncedFloatingRootContext as a8, useDismiss as a9, DrawerViewportContext as aA, BASE_UI_SWIPE_IGNORE_SELECTOR as aB, DRAWER_CONTENT_ATTRIBUTE as aC, useScrollAreaRootContext as aD, getOffset as aE, ScrollAreaRootCssVars as aF, scrollAreaStateAttributesMapping as aG, useScrollAreaViewportContext as aH, useStore as aI, Store as aJ, useRole as aa, TYPEAHEAD_RESET_MS as ab, useInteractions as ac, FloatingTree as ad, fastComponentRef as ae, useTriggerDataForwarding as af, useClick as ag, getTabbableBeforeElement as ah, isOutsideEvent as ai, getTabbableAfterElement as aj, getNextTabbable as ak, pressableTriggerOpenStateMapping as al, FocusGuard as am, PATIENT_CLICK_THRESHOLD as an, useTriggerRegistration as ao, triggerOpenStateMapping as ap, useDrawerProviderContext as aq, DrawerBackdropCssVars as ar, DrawerPopupCssVars as as, DrawerProviderContext as at, CommonPopupDataAttributes as au, useDialogPortalContext as av, DialogStore as aw, useDrawerRootContext as ax, DrawerPopupDataAttributes as ay, useDrawerSnapPoints as az, DrawerPortal as b, DrawerBackdrop as c, DrawerPopup as d, ScrollAreaViewport as e, DrawerContent as f, useFloatingParentNodeId as g, useFloatingTree as h, getTarget as i, isTypeableElement as j, isTargetInsideEnabledTrigger as k, createAttribute as l, matchesFocusVisible as m, activeElement as n, contains as o, getNodeChildren as p, getFloatingFocusElement as q, isTypeableCombobox as r, isIndexOutOfListBounds as s, getMinListIndex as t, useDialogRootContext as u, getMaxListIndex as v, createGridCellMap as w, isListIndexDisabled as x, getGridNavigatedIndex as y, getGridCellIndices as z };