@jobber/components 8.14.0 → 8.15.0

package/dist/unstyledPrimitives/index.cjs

@@ -1,10 +1,9 @@
 'use strict';
 
-var DrawerRoot = require('../DrawerRoot-cjs.js');
+var ScrollAreaViewport = require('../ScrollAreaViewport-cjs.js');
 var MenuSubmenuTrigger = require('../MenuSubmenuTrigger-cjs.js');
 var React = require('react');
 var useRenderElement = require('../useRenderElement-cjs.js');
-var useBaseUiId = require('../useBaseUiId-cjs.js');
 var useValueChanged = require('../useValueChanged-cjs.js');
 var jsxRuntime = require('react/jsx-runtime');
 var floatingUi_utils_dom = require('../floating-ui.utils.dom-cjs.js');
@@ -49,8 +48,8 @@ const DialogDescription = /*#__PURE__*/React__namespace.forwardRef(function Dial
   } = componentProps;
   const {
     store
-  } = DrawerRoot.useDialogRootContext();
-  const id = useBaseUiId.useBaseUiId(idProp);
+  } = ScrollAreaViewport.useDialogRootContext();
+  const id = useValueChanged.useBaseUiId(idProp);
   store.useSyncedValueWithCleanup('descriptionElementId', id);
   return useRenderElement.useRenderElement('p', componentProps, {
     ref: forwardedRef,
@@ -95,7 +94,7 @@ const DrawerIndent = /*#__PURE__*/React__namespace.forwardRef(function DrawerInd
     className,
     ...elementProps
   } = componentProps;
-  const providerContext = DrawerRoot.useDrawerProviderContext();
+  const providerContext = ScrollAreaViewport.useDrawerProviderContext();
   const active = providerContext?.active ?? false;
   const visualStateStore = providerContext?.visualStateStore;
   const indentRef = React__namespace.useRef(null);
@@ -110,22 +109,22 @@ const DrawerIndent = /*#__PURE__*/React__namespace.forwardRef(function DrawerInd
         frontmostHeight
       } = visualStateStore.getSnapshot();
       if (swipeProgress <= 0) {
-        element.style.setProperty(DrawerRoot.DrawerBackdropCssVars.swipeProgress, '0');
+        element.style.setProperty(ScrollAreaViewport.DrawerBackdropCssVars.swipeProgress, '0');
       } else {
-        element.style.setProperty(DrawerRoot.DrawerBackdropCssVars.swipeProgress, `${swipeProgress}`);
+        element.style.setProperty(ScrollAreaViewport.DrawerBackdropCssVars.swipeProgress, `${swipeProgress}`);
       }
       if (frontmostHeight <= 0) {
-        element.style.removeProperty(DrawerRoot.DrawerPopupCssVars.height);
+        element.style.removeProperty(ScrollAreaViewport.DrawerPopupCssVars.height);
       } else {
-        element.style.setProperty(DrawerRoot.DrawerPopupCssVars.height, `${frontmostHeight}px`);
+        element.style.setProperty(ScrollAreaViewport.DrawerPopupCssVars.height, `${frontmostHeight}px`);
       }
     };
     syncVisualState();
     const unsubscribe = visualStateStore.subscribe(syncVisualState);
     return () => {
       unsubscribe();
-      element.style.setProperty(DrawerRoot.DrawerBackdropCssVars.swipeProgress, '0');
-      element.style.removeProperty(DrawerRoot.DrawerPopupCssVars.height);
+      element.style.setProperty(ScrollAreaViewport.DrawerBackdropCssVars.swipeProgress, '0');
+      element.style.removeProperty(ScrollAreaViewport.DrawerPopupCssVars.height);
     };
   }, [visualStateStore]);
   const state = {
@@ -136,7 +135,7 @@ const DrawerIndent = /*#__PURE__*/React__namespace.forwardRef(function DrawerInd
     state,
     props: [{
       style: {
-        [DrawerRoot.DrawerBackdropCssVars.swipeProgress]: '0'
+        [ScrollAreaViewport.DrawerBackdropCssVars.swipeProgress]: '0'
       }
     }, elementProps],
     stateAttributesMapping: stateAttributesMapping$8
@@ -169,7 +168,7 @@ const DrawerIndentBackground = /*#__PURE__*/React__namespace.forwardRef(function
     className,
     ...elementProps
   } = componentProps;
-  const providerContext = DrawerRoot.useDrawerProviderContext();
+  const providerContext = ScrollAreaViewport.useDrawerProviderContext();
   const active = providerContext?.active ?? false;
   const state = {
     active
@@ -224,7 +223,7 @@ function DrawerProvider(props) {
     active,
     visualStateStore
   }), [active, removeDrawer, setDrawerOpen, visualStateStore]);
-  return /*#__PURE__*/jsxRuntime.jsx(DrawerRoot.DrawerProviderContext.Provider, {
+  return /*#__PURE__*/jsxRuntime.jsx(ScrollAreaViewport.DrawerProviderContext.Provider, {
     value: contextValue,
     children: children
   });
@@ -270,19 +269,19 @@ let DialogViewportDataAttributes = function (DialogViewportDataAttributes) {
   /**
    * Present when the dialog is open.
    */
-  DialogViewportDataAttributes[DialogViewportDataAttributes["open"] = DrawerRoot.CommonPopupDataAttributes.open] = "open";
+  DialogViewportDataAttributes[DialogViewportDataAttributes["open"] = ScrollAreaViewport.CommonPopupDataAttributes.open] = "open";
   /**
    * Present when the dialog is closed.
    */
-  DialogViewportDataAttributes[DialogViewportDataAttributes["closed"] = DrawerRoot.CommonPopupDataAttributes.closed] = "closed";
+  DialogViewportDataAttributes[DialogViewportDataAttributes["closed"] = ScrollAreaViewport.CommonPopupDataAttributes.closed] = "closed";
   /**
    * Present when the dialog is animating in.
    */
-  DialogViewportDataAttributes[DialogViewportDataAttributes["startingStyle"] = DrawerRoot.CommonPopupDataAttributes.startingStyle] = "startingStyle";
+  DialogViewportDataAttributes[DialogViewportDataAttributes["startingStyle"] = ScrollAreaViewport.CommonPopupDataAttributes.startingStyle] = "startingStyle";
   /**
    * Present when the dialog is animating out.
    */
-  DialogViewportDataAttributes[DialogViewportDataAttributes["endingStyle"] = DrawerRoot.CommonPopupDataAttributes.endingStyle] = "endingStyle";
+  DialogViewportDataAttributes[DialogViewportDataAttributes["endingStyle"] = ScrollAreaViewport.CommonPopupDataAttributes.endingStyle] = "endingStyle";
   /**
    * Present when the dialog is nested within another dialog.
    */
@@ -295,7 +294,7 @@ let DialogViewportDataAttributes = function (DialogViewportDataAttributes) {
 }({});
 
 const stateAttributesMapping$6 = {
-  ...DrawerRoot.popupStateMapping,
+  ...ScrollAreaViewport.popupStateMapping,
   ...useValueChanged.transitionStatusMapping,
   nested(value) {
     return value ? {
@@ -322,10 +321,10 @@ const DialogViewport = /*#__PURE__*/React__namespace.forwardRef(function DialogV
     children,
     ...elementProps
   } = componentProps;
-  const keepMounted = DrawerRoot.useDialogPortalContext();
+  const keepMounted = ScrollAreaViewport.useDialogPortalContext();
   const {
     store
-  } = DrawerRoot.useDialogRootContext();
+  } = ScrollAreaViewport.useDialogRootContext();
   const open = store.useState('open');
   const nested = store.useState('nested');
   const transitionStatus = store.useState('transitionStatus');
@@ -366,7 +365,7 @@ class DialogHandle {
    */
 
   constructor(store) {
-    this.store = store ?? new DrawerRoot.DialogStore();
+    this.store = store ?? new ScrollAreaViewport.DialogStore();
   }
 
   /**
@@ -759,7 +758,7 @@ function useSwipeDismiss(options) {
   function getTargetAtPoint(position, nativeEvent) {
     const doc = useValueChanged.ownerDocument(elementRef.current);
     const elementAtPoint = getElementAtPoint(doc, position.x, position.y);
-    const target = elementAtPoint ?? DrawerRoot.getTarget(nativeEvent);
+    const target = elementAtPoint ?? ScrollAreaViewport.getTarget(nativeEvent);
     return target;
   }
   function findGestureScrollableTouchTarget(target, root) {
@@ -950,7 +949,7 @@ function useSwipeDismiss(options) {
     if (!enabled || !isSwipingRef.current) {
       return;
     }
-    const target = DrawerRoot.getTarget(event.nativeEvent);
+    const target = ScrollAreaViewport.getTarget(event.nativeEvent);
     if (isTouchLikeEvent(event) && !swipeFromScrollableRef.current) {
       const boundaryElement = event.currentTarget;
       if (findGestureScrollableTouchTarget(target, boundaryElement)) {
@@ -1151,7 +1150,7 @@ function useSwipeDismiss(options) {
             const doc = useValueChanged.ownerDocument(element);
             const body = doc.body;
             const scrollTarget = body ? findGestureScrollableTouchTarget(target, body) : null;
-            if (scrollTarget && (DrawerRoot.contains(element, scrollTarget) || DrawerRoot.contains(scrollTarget, element))) {
+            if (scrollTarget && (ScrollAreaViewport.contains(element, scrollTarget) || ScrollAreaViewport.contains(scrollTarget, element))) {
               const deltaX = currentPos.x - pendingStartPos.x;
               const deltaY = currentPos.y - pendingStartPos.y;
               const canSwipeFromEdge = canSwipeFromScrollEdgeOnPendingMove(scrollTarget, deltaX, deltaY);
@@ -1395,11 +1394,11 @@ let DrawerSwipeAreaDataAttributes = function (DrawerSwipeAreaDataAttributes) {
   /**
    * Present when the drawer is open.
    */
-  DrawerSwipeAreaDataAttributes[DrawerSwipeAreaDataAttributes["open"] = DrawerRoot.CommonPopupDataAttributes.open] = "open";
+  DrawerSwipeAreaDataAttributes[DrawerSwipeAreaDataAttributes["open"] = ScrollAreaViewport.CommonPopupDataAttributes.open] = "open";
   /**
    * Present when the drawer is closed.
    */
-  DrawerSwipeAreaDataAttributes[DrawerSwipeAreaDataAttributes["closed"] = DrawerRoot.CommonPopupDataAttributes.closed] = "closed";
+  DrawerSwipeAreaDataAttributes[DrawerSwipeAreaDataAttributes["closed"] = ScrollAreaViewport.CommonPopupDataAttributes.closed] = "closed";
   /**
    * Present when the swipe area is disabled.
    */
@@ -1474,12 +1473,12 @@ const DrawerSwipeArea = /*#__PURE__*/React__namespace.forwardRef(function Drawer
   } = componentProps;
   const {
     store
-  } = DrawerRoot.useDialogRootContext();
+  } = ScrollAreaViewport.useDialogRootContext();
   const {
     swipeDirection,
     frontmostHeight
-  } = DrawerRoot.useDrawerRootContext();
-  const providerContext = DrawerRoot.useDrawerProviderContext();
+  } = ScrollAreaViewport.useDrawerRootContext();
+  const providerContext = ScrollAreaViewport.useDrawerProviderContext();
   const [swipeActive, setSwipeActive] = React__namespace.useState(false);
   const releaseDismissTimeout = useValueChanged.useTimeout();
   const swipeAreaRef = React__namespace.useRef(null);
@@ -1492,8 +1491,8 @@ const DrawerSwipeArea = /*#__PURE__*/React__namespace.forwardRef(function Drawer
   const closedOffsetRef = React__namespace.useRef(null);
   const appliedSwipeStylesRef = React__namespace.useRef(false);
   const popupTransitionRef = React__namespace.useRef(null);
-  const swipeAreaId = useBaseUiId.useBaseUiId(componentProps.id);
-  const registerTrigger = DrawerRoot.useTriggerRegistration(swipeAreaId, store);
+  const swipeAreaId = useValueChanged.useBaseUiId(componentProps.id);
+  const registerTrigger = ScrollAreaViewport.useTriggerRegistration(swipeAreaId, store);
   const open = store.useState('open');
   const resolvedSwipeDirection = swipeDirectionProp ?? oppositeSwipeDirection[swipeDirection];
   const dismissDirection = oppositeSwipeDirection[resolvedSwipeDirection];
@@ -1582,21 +1581,21 @@ const DrawerSwipeArea = /*#__PURE__*/React__namespace.forwardRef(function Drawer
     const movementY = isHorizontal ? 0 : movement;
     const openProgress = Math.max(0, Math.min(1, clampedDisplacement / closedOffset));
     const backdropProgress = Math.max(0, Math.min(1, 1 - openProgress));
-    popupElement.style.setProperty(DrawerRoot.DrawerPopupCssVars.swipeMovementX, `${movementX}px`);
-    popupElement.style.setProperty(DrawerRoot.DrawerPopupCssVars.swipeMovementY, `${movementY}px`);
-    popupElement.setAttribute(DrawerRoot.DrawerPopupDataAttributes.swiping, '');
+    popupElement.style.setProperty(ScrollAreaViewport.DrawerPopupCssVars.swipeMovementX, `${movementX}px`);
+    popupElement.style.setProperty(ScrollAreaViewport.DrawerPopupCssVars.swipeMovementY, `${movementY}px`);
+    popupElement.setAttribute(ScrollAreaViewport.DrawerPopupDataAttributes.swiping, '');
     if (popupTransitionRef.current === null) {
       popupTransitionRef.current = popupElement.style.transition;
     }
     popupElement.style.transition = 'none';
     const backdropElement = store.context.backdropRef.current;
     if (backdropElement) {
-      backdropElement.setAttribute(DrawerRoot.DrawerPopupDataAttributes.swiping, '');
-      backdropElement.style.setProperty(DrawerRoot.DrawerBackdropCssVars.swipeProgress, `${backdropProgress}`);
+      backdropElement.setAttribute(ScrollAreaViewport.DrawerPopupDataAttributes.swiping, '');
+      backdropElement.style.setProperty(ScrollAreaViewport.DrawerBackdropCssVars.swipeProgress, `${backdropProgress}`);
       if (openProgress > 0 && frontmostHeight > 0) {
-        backdropElement.style.setProperty(DrawerRoot.DrawerPopupCssVars.height, `${frontmostHeight}px`);
+        backdropElement.style.setProperty(ScrollAreaViewport.DrawerPopupCssVars.height, `${frontmostHeight}px`);
       } else {
-        backdropElement.style.removeProperty(DrawerRoot.DrawerPopupCssVars.height);
+        backdropElement.style.removeProperty(ScrollAreaViewport.DrawerPopupCssVars.height);
       }
     }
     providerContext?.visualStateStore.set({
@@ -1608,9 +1607,9 @@ const DrawerSwipeArea = /*#__PURE__*/React__namespace.forwardRef(function Drawer
   const clearSwipeStyles = useValueChanged.useStableCallback(() => {
     const popupElement = store.context.popupRef.current;
     if (popupElement && appliedSwipeStylesRef.current) {
-      popupElement.style.removeProperty(DrawerRoot.DrawerPopupCssVars.swipeMovementX);
-      popupElement.style.removeProperty(DrawerRoot.DrawerPopupCssVars.swipeMovementY);
-      popupElement.removeAttribute(DrawerRoot.DrawerPopupDataAttributes.swiping);
+      popupElement.style.removeProperty(ScrollAreaViewport.DrawerPopupCssVars.swipeMovementX);
+      popupElement.style.removeProperty(ScrollAreaViewport.DrawerPopupCssVars.swipeMovementY);
+      popupElement.removeAttribute(ScrollAreaViewport.DrawerPopupDataAttributes.swiping);
     }
     if (popupElement && popupTransitionRef.current !== null) {
       popupElement.style.transition = popupTransitionRef.current;
@@ -1618,9 +1617,9 @@ const DrawerSwipeArea = /*#__PURE__*/React__namespace.forwardRef(function Drawer
     }
     const backdropElement = store.context.backdropRef.current;
     if (backdropElement) {
-      backdropElement.removeAttribute(DrawerRoot.DrawerPopupDataAttributes.swiping);
-      backdropElement.style.setProperty(DrawerRoot.DrawerBackdropCssVars.swipeProgress, '0');
-      backdropElement.style.removeProperty(DrawerRoot.DrawerPopupCssVars.height);
+      backdropElement.removeAttribute(ScrollAreaViewport.DrawerPopupDataAttributes.swiping);
+      backdropElement.style.setProperty(ScrollAreaViewport.DrawerBackdropCssVars.swipeProgress, '0');
+      backdropElement.style.removeProperty(ScrollAreaViewport.DrawerPopupCssVars.height);
     }
     providerContext?.visualStateStore.set({
       swipeProgress: 0,
@@ -1647,8 +1646,8 @@ const DrawerSwipeArea = /*#__PURE__*/React__namespace.forwardRef(function Drawer
     elementRef: swipeAreaRef,
     trackDrag: false,
     movementCssVars: {
-      x: DrawerRoot.DrawerPopupCssVars.swipeMovementX,
-      y: DrawerRoot.DrawerPopupCssVars.swipeMovementY
+      x: ScrollAreaViewport.DrawerPopupCssVars.swipeMovementX,
+      y: ScrollAreaViewport.DrawerPopupCssVars.swipeMovementY
     },
     onSwipeStart(event) {
       disableDismissForSwipe();
@@ -1791,7 +1790,7 @@ const MIN_SWIPE_RELEASE_DURATION_MS = 80;
 const MAX_SWIPE_RELEASE_DURATION_MS = 360;
 const MIN_SWIPE_RELEASE_SCALAR = 0.1;
 const MAX_SWIPE_RELEASE_SCALAR = 1;
-const DRAWER_CONTENT_SELECTOR = `[${DrawerRoot.DRAWER_CONTENT_ATTRIBUTE}]`;
+const DRAWER_CONTENT_SELECTOR = `[${ScrollAreaViewport.DRAWER_CONTENT_ATTRIBUTE}]`;
 /**
  * A positioning container for the drawer popup that can be made scrollable.
  * Renders a `<div>` element.
@@ -1807,15 +1806,15 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
   } = props;
   const {
     store
-  } = DrawerRoot.useDialogRootContext();
+  } = ScrollAreaViewport.useDialogRootContext();
   const {
     swipeDirection,
     notifyParentSwipingChange,
     notifyParentSwipeProgressChange,
     frontmostHeight,
     snapToSequentialPoints
-  } = DrawerRoot.useDrawerRootContext();
-  const providerContext = DrawerRoot.useDrawerProviderContext();
+  } = ScrollAreaViewport.useDrawerRootContext();
+  const providerContext = ScrollAreaViewport.useDrawerProviderContext();
   const visualStateStore = providerContext?.visualStateStore;
   const open = store.useState('open');
   const mounted = store.useState('mounted');
@@ -1834,7 +1833,7 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
     activeSnapPointOffset,
     setActiveSnapPoint,
     popupHeight
-  } = DrawerRoot.useDrawerSnapPoints();
+  } = ScrollAreaViewport.useDrawerSnapPoints();
   const [swipeRelease, setSwipeRelease] = React__namespace.useState(null);
   const pendingSwipeCloseSnapPointRef = React__namespace.useRef(undefined);
   const resetSwipeRef = React__namespace.useRef(null);
@@ -1914,15 +1913,15 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
       return;
     }
     if (!isActive || swipeProgress <= 0) {
-      backdropElement.style.setProperty(DrawerRoot.DrawerBackdropCssVars.swipeProgress, '0');
-      backdropElement.style.removeProperty(DrawerRoot.DrawerPopupCssVars.height);
+      backdropElement.style.setProperty(ScrollAreaViewport.DrawerBackdropCssVars.swipeProgress, '0');
+      backdropElement.style.removeProperty(ScrollAreaViewport.DrawerPopupCssVars.height);
       return;
     }
-    backdropElement.style.setProperty(DrawerRoot.DrawerBackdropCssVars.swipeProgress, `${swipeProgress}`);
+    backdropElement.style.setProperty(ScrollAreaViewport.DrawerBackdropCssVars.swipeProgress, `${swipeProgress}`);
     if (frontmostHeight > 0) {
-      backdropElement.style.setProperty(DrawerRoot.DrawerPopupCssVars.height, `${frontmostHeight}px`);
+      backdropElement.style.setProperty(ScrollAreaViewport.DrawerPopupCssVars.height, `${frontmostHeight}px`);
     } else {
-      backdropElement.style.removeProperty(DrawerRoot.DrawerPopupCssVars.height);
+      backdropElement.style.removeProperty(ScrollAreaViewport.DrawerPopupCssVars.height);
     }
   });
   function resolveSwipeRelease({
@@ -1997,8 +1996,8 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
     ignoreSelectorWhenTouch: false,
     ignoreScrollableAncestors: true,
     movementCssVars: {
-      x: DrawerRoot.DrawerPopupCssVars.swipeMovementX,
-      y: DrawerRoot.DrawerPopupCssVars.swipeMovementY
+      x: ScrollAreaViewport.DrawerPopupCssVars.swipeMovementX,
+      y: ScrollAreaViewport.DrawerPopupCssVars.swipeMovementY
     },
     onSwipeStart(event) {
       if ('touches' in event || 'pointerType' in event && event.pointerType === 'touch') {
@@ -2015,7 +2014,7 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
       }
       const anchorElement = floatingUi_utils_dom.isElement(selection.anchorNode) ? selection.anchorNode : selection.anchorNode?.parentElement;
       const focusElement = floatingUi_utils_dom.isElement(selection.focusNode) ? selection.focusNode : selection.focusNode?.parentElement;
-      if (!DrawerRoot.contains(popupElement, anchorElement) && !DrawerRoot.contains(popupElement, focusElement)) {
+      if (!ScrollAreaViewport.contains(popupElement, anchorElement) && !ScrollAreaViewport.contains(popupElement, focusElement)) {
         return;
       }
       selection.removeAllRanges();
@@ -2040,7 +2039,7 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
       }
       const doc = popupElement.ownerDocument;
       const elementAtPoint = getElementAtPoint(doc, position.x, position.y);
-      if (!elementAtPoint || !DrawerRoot.contains(popupElement, elementAtPoint)) {
+      if (!elementAtPoint || !ScrollAreaViewport.contains(popupElement, elementAtPoint)) {
         return false;
       }
       const nativeEvent = details.nativeEvent;
@@ -2265,8 +2264,8 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
       });
       const backdropElement = store.context.backdropRef.current;
       if (backdropElement) {
-        backdropElement.style.setProperty(DrawerRoot.DrawerBackdropCssVars.swipeProgress, '0');
-        backdropElement.style.removeProperty(DrawerRoot.DrawerPopupCssVars.height);
+        backdropElement.style.setProperty(ScrollAreaViewport.DrawerBackdropCssVars.swipeProgress, '0');
+        backdropElement.style.removeProperty(ScrollAreaViewport.DrawerPopupCssVars.height);
       }
       const dismissEventDetails = useValueChanged.createChangeEventDetails(useValueChanged.swipe, event);
       store.setOpen(false, dismissEventDetails);
@@ -2531,7 +2530,7 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
         const target = floatingUi_utils_dom.isElement(event.target) ? event.target : null;
         let scrollTarget = null;
         let hasCrossAxisScrollableContent = false;
-        if (rootElement && target && DrawerRoot.contains(rootElement, target)) {
+        if (rootElement && target && ScrollAreaViewport.contains(rootElement, target)) {
           scrollTarget = findScrollableTouchTarget(target, rootElement, scrollAxis);
           hasCrossAxisScrollableContent = findScrollableTouchTarget(target, rootElement, crossScrollAxis) != null;
         }
@@ -2580,7 +2579,7 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
       // Suppress DialogViewport's generic nested dialog attribute.
       ['data-nested-dialog-open']: undefined
     }),
-    children: /*#__PURE__*/jsxRuntime.jsx(DrawerRoot.DrawerViewportContext.Provider, {
+    children: /*#__PURE__*/jsxRuntime.jsx(ScrollAreaViewport.DrawerViewportContext.Provider, {
       value: swipeProviderValue,
       children: children
     })
@@ -2589,25 +2588,25 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
 if (process.env.NODE_ENV !== "production") DrawerViewport.displayName = "DrawerViewport";
 function setSwipeDismissedElements(popupElement, backdropElement, dismissed) {
   if (dismissed) {
-    popupElement?.setAttribute(DrawerRoot.DrawerPopupDataAttributes.swipeDismiss, '');
-    backdropElement?.setAttribute(DrawerRoot.DrawerPopupDataAttributes.swipeDismiss, '');
+    popupElement?.setAttribute(ScrollAreaViewport.DrawerPopupDataAttributes.swipeDismiss, '');
+    backdropElement?.setAttribute(ScrollAreaViewport.DrawerPopupDataAttributes.swipeDismiss, '');
     return;
   }
-  popupElement?.removeAttribute(DrawerRoot.DrawerPopupDataAttributes.swipeDismiss);
-  backdropElement?.removeAttribute(DrawerRoot.DrawerPopupDataAttributes.swipeDismiss);
+  popupElement?.removeAttribute(ScrollAreaViewport.DrawerPopupDataAttributes.swipeDismiss);
+  backdropElement?.removeAttribute(ScrollAreaViewport.DrawerPopupDataAttributes.swipeDismiss);
 }
 function setBackdropSwipingAttribute(backdropElement, swiping) {
   if (!backdropElement) {
     return;
   }
   if (swiping) {
-    backdropElement.setAttribute(DrawerRoot.DrawerPopupDataAttributes.swiping, '');
+    backdropElement.setAttribute(ScrollAreaViewport.DrawerPopupDataAttributes.swiping, '');
     return;
   }
-  backdropElement.removeAttribute(DrawerRoot.DrawerPopupDataAttributes.swiping);
+  backdropElement.removeAttribute(ScrollAreaViewport.DrawerPopupDataAttributes.swiping);
 }
 function isSwipeIgnoredTarget(target) {
-  return Boolean(target?.closest(DrawerRoot.BASE_UI_SWIPE_IGNORE_SELECTOR));
+  return Boolean(target?.closest(ScrollAreaViewport.BASE_UI_SWIPE_IGNORE_SELECTOR));
 }
 function isDrawerContentTarget(target) {
   return Boolean(target?.closest(DRAWER_CONTENT_SELECTOR));
@@ -2628,11 +2627,11 @@ function isTextSelectionControl(target) {
 function hasExpandedSelectionWithinTarget(selection, target) {
   const anchorElement = floatingUi_utils_dom.isElement(selection.anchorNode) ? selection.anchorNode : selection.anchorNode?.parentElement;
   const focusElement = floatingUi_utils_dom.isElement(selection.focusNode) ? selection.focusNode : selection.focusNode?.parentElement;
-  return selection.containsNode(target, true) || DrawerRoot.contains(target, anchorElement) || DrawerRoot.contains(target, focusElement);
+  return selection.containsNode(target, true) || ScrollAreaViewport.contains(target, anchorElement) || ScrollAreaViewport.contains(target, focusElement);
 }
 function shouldIgnoreSwipeForTextSelection(doc, rootElement) {
   const activeElement = doc.activeElement;
-  const activeElementWithinRoot = Boolean(activeElement && DrawerRoot.contains(rootElement, activeElement));
+  const activeElementWithinRoot = Boolean(activeElement && ScrollAreaViewport.contains(rootElement, activeElement));
   if (activeElementWithinRoot && isTextSelectionControl(activeElement)) {
     const {
       selectionStart,
@@ -2741,22 +2740,22 @@ function shouldDismissFromStartEdge(direction, axis) {
   return null;
 }
 
-var index_parts$3 = /*#__PURE__*/Object.freeze({
+var index_parts$4 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  Backdrop: DrawerRoot.DrawerBackdrop,
+  Backdrop: ScrollAreaViewport.DrawerBackdrop,
   Close: MenuSubmenuTrigger.DrawerClose,
-  Content: DrawerRoot.DrawerContent,
+  Content: ScrollAreaViewport.DrawerContent,
   Description: DrawerDescription,
   Handle: DialogHandle,
   Indent: DrawerIndent,
   IndentBackground: DrawerIndentBackground,
-  Popup: DrawerRoot.DrawerPopup,
-  Portal: DrawerRoot.DrawerPortal,
+  Popup: ScrollAreaViewport.DrawerPopup,
+  Portal: ScrollAreaViewport.DrawerPortal,
   Provider: DrawerProvider,
-  Root: DrawerRoot.DrawerRoot,
+  Root: ScrollAreaViewport.DrawerRoot,
   SwipeArea: DrawerSwipeArea,
   Title: MenuSubmenuTrigger.DrawerTitle,
-  Trigger: MenuSubmenuTrigger.DrawerTrigger,
+  Trigger: ScrollAreaViewport.DrawerTrigger,
   Viewport: DrawerViewport,
   createHandle: createDialogHandle
 });
@@ -2792,7 +2791,7 @@ const MenuArrow = /*#__PURE__*/React__namespace.forwardRef(function MenuArrow(co
   };
   return useRenderElement.useRenderElement('div', componentProps, {
     ref: [arrowRef, forwardedRef],
-    stateAttributesMapping: DrawerRoot.popupStateMapping,
+    stateAttributesMapping: ScrollAreaViewport.popupStateMapping,
     state,
     props: {
       style: arrowStyles,
@@ -2804,7 +2803,7 @@ const MenuArrow = /*#__PURE__*/React__namespace.forwardRef(function MenuArrow(co
 if (process.env.NODE_ENV !== "production") MenuArrow.displayName = "MenuArrow";
 
 const stateAttributesMapping$4 = {
-  ...DrawerRoot.popupStateMapping,
+  ...ScrollAreaViewport.popupStateMapping,
   ...useValueChanged.transitionStatusMapping
 };
 
@@ -2883,7 +2882,7 @@ const MenuCheckboxItem = /*#__PURE__*/React__namespace.forwardRef(function MenuC
     label
   });
   const menuPositionerContext = MenuSubmenuTrigger.useMenuPositionerContext(true);
-  const id = useBaseUiId.useBaseUiId(idProp);
+  const id = useValueChanged.useBaseUiId(idProp);
   const {
     store
   } = MenuSubmenuTrigger.useMenuRootContext();
@@ -3211,7 +3210,7 @@ function usePopupViewport(parameters) {
     cssVars,
     children
   } = parameters;
-  const direction = MenuSubmenuTrigger.useDirection();
+  const direction = ScrollAreaViewport.useDirection();
   const activeTrigger = store.useState('activeTriggerElement');
   const activeTriggerId = store.useState('activeTriggerId');
   const open = store.useState('open');
@@ -3308,7 +3307,7 @@ function usePopupViewport(parameters) {
     childrenToRender = /*#__PURE__*/jsxRuntime.jsxs(React__namespace.Fragment, {
       children: [/*#__PURE__*/jsxRuntime.jsx("div", {
         "data-previous": true,
-        inert: DrawerRoot.inertValue(true),
+        inert: ScrollAreaViewport.inertValue(true),
         ref: previousContainerRef,
         style: {
           ...(previousContentDimensions ? {
@@ -3553,7 +3552,7 @@ function createMenuHandle() {
   return new MenuHandle();
 }
 
-var index_parts$2 = /*#__PURE__*/Object.freeze({
+var index_parts$3 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Arrow: MenuArrow,
   Backdrop: MenuBackdrop,
@@ -3579,6 +3578,374 @@ var index_parts$2 = /*#__PURE__*/Object.freeze({
   createHandle: createMenuHandle
 });
 
+const ScrollAreaScrollbarContext = /*#__PURE__*/React__namespace.createContext(undefined);
+if (process.env.NODE_ENV !== "production") ScrollAreaScrollbarContext.displayName = "ScrollAreaScrollbarContext";
+function useScrollAreaScrollbarContext() {
+  const context = React__namespace.useContext(ScrollAreaScrollbarContext);
+  if (context === undefined) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: ScrollAreaScrollbarContext is missing. ScrollAreaScrollbar parts must be placed within <ScrollArea.Scrollbar>.' : useRenderElement.formatErrorMessage(54));
+  }
+  return context;
+}
+
+let ScrollAreaScrollbarCssVars = /*#__PURE__*/function (ScrollAreaScrollbarCssVars) {
+  /**
+   * The scroll area thumb's height.
+   * @type {number}
+   */
+  ScrollAreaScrollbarCssVars["scrollAreaThumbHeight"] = "--scroll-area-thumb-height";
+  /**
+   * The scroll area thumb's width.
+   * @type {number}
+   */
+  ScrollAreaScrollbarCssVars["scrollAreaThumbWidth"] = "--scroll-area-thumb-width";
+  return ScrollAreaScrollbarCssVars;
+}({});
+
+/**
+ * A vertical or horizontal scrollbar for the scroll area.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area)
+ */
+const ScrollAreaScrollbar = /*#__PURE__*/React__namespace.forwardRef(function ScrollAreaScrollbar(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    orientation = 'vertical',
+    keepMounted = false,
+    ...elementProps
+  } = componentProps;
+  const {
+    hovering,
+    scrollingX,
+    scrollingY,
+    hiddenState,
+    overflowEdges,
+    scrollbarYRef,
+    scrollbarXRef,
+    viewportRef,
+    thumbYRef,
+    thumbXRef,
+    handlePointerDown,
+    handlePointerUp,
+    rootId,
+    thumbSize,
+    hasMeasuredScrollbar
+  } = ScrollAreaViewport.useScrollAreaRootContext();
+  const state = {
+    hovering,
+    scrolling: {
+      horizontal: scrollingX,
+      vertical: scrollingY
+    }[orientation],
+    orientation,
+    hasOverflowX: !hiddenState.x,
+    hasOverflowY: !hiddenState.y,
+    overflowXStart: overflowEdges.xStart,
+    overflowXEnd: overflowEdges.xEnd,
+    overflowYStart: overflowEdges.yStart,
+    overflowYEnd: overflowEdges.yEnd,
+    cornerHidden: hiddenState.corner
+  };
+  const direction = ScrollAreaViewport.useDirection();
+  const hideTrackUntilMeasured = !hasMeasuredScrollbar && !keepMounted;
+  React__namespace.useEffect(() => {
+    const viewportEl = viewportRef.current;
+    const scrollbarEl = orientation === 'vertical' ? scrollbarYRef.current : scrollbarXRef.current;
+    if (!scrollbarEl) {
+      return undefined;
+    }
+    function handleWheel(event) {
+      if (!viewportEl || !scrollbarEl || event.ctrlKey) {
+        return;
+      }
+      event.preventDefault();
+      if (orientation === 'vertical') {
+        if (viewportEl.scrollTop === 0 && event.deltaY < 0) {
+          return;
+        }
+      } else if (viewportEl.scrollLeft === 0 && event.deltaX < 0) {
+        return;
+      }
+      if (orientation === 'vertical') {
+        if (viewportEl.scrollTop === viewportEl.scrollHeight - viewportEl.clientHeight && event.deltaY > 0) {
+          return;
+        }
+      } else if (viewportEl.scrollLeft === viewportEl.scrollWidth - viewportEl.clientWidth && event.deltaX > 0) {
+        return;
+      }
+      if (orientation === 'vertical') {
+        viewportEl.scrollTop += event.deltaY;
+      } else {
+        viewportEl.scrollLeft += event.deltaX;
+      }
+    }
+    scrollbarEl.addEventListener('wheel', handleWheel, {
+      passive: false
+    });
+    return () => {
+      scrollbarEl.removeEventListener('wheel', handleWheel);
+    };
+  }, [orientation, scrollbarXRef, scrollbarYRef, viewportRef]);
+  const props = {
+    ...(rootId && {
+      'data-id': `${rootId}-scrollbar`
+    }),
+    onPointerDown(event) {
+      if (event.button !== 0) {
+        return;
+      }
+
+      // Ignore clicks on thumb
+      if (event.currentTarget !== event.target) {
+        return;
+      }
+      if (!viewportRef.current) {
+        return;
+      }
+
+      // Handle Y-axis (vertical) scroll
+      if (thumbYRef.current && scrollbarYRef.current && orientation === 'vertical') {
+        const thumbYOffset = ScrollAreaViewport.getOffset(thumbYRef.current, 'margin', 'y');
+        const scrollbarYOffset = ScrollAreaViewport.getOffset(scrollbarYRef.current, 'padding', 'y');
+        const thumbHeight = thumbYRef.current.offsetHeight;
+        const trackRectY = scrollbarYRef.current.getBoundingClientRect();
+        const clickY = event.clientY - trackRectY.top - thumbHeight / 2 - scrollbarYOffset + thumbYOffset / 2;
+        const scrollableContentHeight = viewportRef.current.scrollHeight;
+        const viewportHeight = viewportRef.current.clientHeight;
+        const maxThumbOffsetY = scrollbarYRef.current.offsetHeight - thumbHeight - scrollbarYOffset - thumbYOffset;
+        const scrollRatioY = clickY / maxThumbOffsetY;
+        const newScrollTop = scrollRatioY * (scrollableContentHeight - viewportHeight);
+        viewportRef.current.scrollTop = newScrollTop;
+      }
+      if (thumbXRef.current && scrollbarXRef.current && orientation === 'horizontal') {
+        const thumbXOffset = ScrollAreaViewport.getOffset(thumbXRef.current, 'margin', 'x');
+        const scrollbarXOffset = ScrollAreaViewport.getOffset(scrollbarXRef.current, 'padding', 'x');
+        const thumbWidth = thumbXRef.current.offsetWidth;
+        const trackRectX = scrollbarXRef.current.getBoundingClientRect();
+        const clickX = event.clientX - trackRectX.left - thumbWidth / 2 - scrollbarXOffset + thumbXOffset / 2;
+        const scrollableContentWidth = viewportRef.current.scrollWidth;
+        const viewportWidth = viewportRef.current.clientWidth;
+        const maxThumbOffsetX = scrollbarXRef.current.offsetWidth - thumbWidth - scrollbarXOffset - thumbXOffset;
+        const scrollRatioX = clickX / maxThumbOffsetX;
+        let newScrollLeft;
+        if (direction === 'rtl') {
+          // In RTL, invert the scroll direction
+          newScrollLeft = (1 - scrollRatioX) * (scrollableContentWidth - viewportWidth);
+
+          // Adjust for browsers that use negative scrollLeft in RTL
+          if (viewportRef.current.scrollLeft <= 0) {
+            newScrollLeft = -newScrollLeft;
+          }
+        } else {
+          newScrollLeft = scrollRatioX * (scrollableContentWidth - viewportWidth);
+        }
+        viewportRef.current.scrollLeft = newScrollLeft;
+      }
+      handlePointerDown(event);
+    },
+    onPointerUp: handlePointerUp,
+    style: {
+      position: 'absolute',
+      touchAction: 'none',
+      WebkitUserSelect: 'none',
+      userSelect: 'none',
+      visibility: hideTrackUntilMeasured ? 'hidden' : undefined,
+      ...(orientation === 'vertical' && {
+        top: 0,
+        bottom: `var(${ScrollAreaViewport.ScrollAreaRootCssVars.scrollAreaCornerHeight})`,
+        insetInlineEnd: 0,
+        [ScrollAreaScrollbarCssVars.scrollAreaThumbHeight]: `${thumbSize.height}px`
+      }),
+      ...(orientation === 'horizontal' && {
+        insetInlineStart: 0,
+        insetInlineEnd: `var(${ScrollAreaViewport.ScrollAreaRootCssVars.scrollAreaCornerWidth})`,
+        bottom: 0,
+        [ScrollAreaScrollbarCssVars.scrollAreaThumbWidth]: `${thumbSize.width}px`
+      })
+    }
+  };
+  const element = useRenderElement.useRenderElement('div', componentProps, {
+    ref: [forwardedRef, orientation === 'vertical' ? scrollbarYRef : scrollbarXRef],
+    state,
+    props: [props, elementProps],
+    stateAttributesMapping: ScrollAreaViewport.scrollAreaStateAttributesMapping
+  });
+  const contextValue = React__namespace.useMemo(() => ({
+    orientation
+  }), [orientation]);
+  const isHidden = orientation === 'vertical' ? hiddenState.y : hiddenState.x;
+  const shouldRender = keepMounted || !isHidden;
+  if (!shouldRender) {
+    return null;
+  }
+  return /*#__PURE__*/jsxRuntime.jsx(ScrollAreaScrollbarContext.Provider, {
+    value: contextValue,
+    children: element
+  });
+});
+if (process.env.NODE_ENV !== "production") ScrollAreaScrollbar.displayName = "ScrollAreaScrollbar";
+
+/**
+ * A container for the content of the scroll area.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area)
+ */
+const ScrollAreaContent = /*#__PURE__*/React__namespace.forwardRef(function ScrollAreaContent(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    ...elementProps
+  } = componentProps;
+  const contentWrapperRef = React__namespace.useRef(null);
+  const {
+    computeThumbPosition
+  } = ScrollAreaViewport.useScrollAreaViewportContext();
+  const {
+    viewportState
+  } = ScrollAreaViewport.useScrollAreaRootContext();
+  useValueChanged.useIsoLayoutEffect(() => {
+    if (typeof ResizeObserver === 'undefined') {
+      return undefined;
+    }
+    let hasInitialized = false;
+    const ro = new ResizeObserver(() => {
+      // ResizeObserver fires once upon observing, so we skip the initial call
+      // to avoid double-calculating the thumb position on mount.
+      if (!hasInitialized) {
+        hasInitialized = true;
+        return;
+      }
+      computeThumbPosition();
+    });
+    if (contentWrapperRef.current) {
+      ro.observe(contentWrapperRef.current);
+    }
+    return () => {
+      ro.disconnect();
+    };
+  }, [computeThumbPosition]);
+  const element = useRenderElement.useRenderElement('div', componentProps, {
+    ref: [forwardedRef, contentWrapperRef],
+    state: viewportState,
+    stateAttributesMapping: ScrollAreaViewport.scrollAreaStateAttributesMapping,
+    props: [{
+      role: 'presentation',
+      style: {
+        minWidth: 'fit-content'
+      }
+    }, elementProps]
+  });
+  return element;
+});
+if (process.env.NODE_ENV !== "production") ScrollAreaContent.displayName = "ScrollAreaContent";
+
+/**
+ * The draggable part of the scrollbar that indicates the current scroll position.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area)
+ */
+const ScrollAreaThumb = /*#__PURE__*/React__namespace.forwardRef(function ScrollAreaThumb(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    ...elementProps
+  } = componentProps;
+  const {
+    thumbYRef,
+    thumbXRef,
+    handlePointerDown,
+    handlePointerMove,
+    handlePointerUp,
+    setScrollingX,
+    setScrollingY,
+    hasMeasuredScrollbar
+  } = ScrollAreaViewport.useScrollAreaRootContext();
+  const {
+    orientation
+  } = useScrollAreaScrollbarContext();
+  const state = {
+    orientation
+  };
+  const element = useRenderElement.useRenderElement('div', componentProps, {
+    ref: [forwardedRef, orientation === 'vertical' ? thumbYRef : thumbXRef],
+    state,
+    props: [{
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp(event) {
+        if (orientation === 'vertical') {
+          setScrollingY(false);
+        }
+        if (orientation === 'horizontal') {
+          setScrollingX(false);
+        }
+        handlePointerUp(event);
+      },
+      style: {
+        visibility: hasMeasuredScrollbar ? undefined : 'hidden',
+        ...(orientation === 'vertical' && {
+          height: `var(${ScrollAreaScrollbarCssVars.scrollAreaThumbHeight})`
+        }),
+        ...(orientation === 'horizontal' && {
+          width: `var(${ScrollAreaScrollbarCssVars.scrollAreaThumbWidth})`
+        })
+      }
+    }, elementProps]
+  });
+  return element;
+});
+if (process.env.NODE_ENV !== "production") ScrollAreaThumb.displayName = "ScrollAreaThumb";
+
+/**
+ * A small rectangular area that appears at the intersection of horizontal and vertical scrollbars.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area)
+ */
+const ScrollAreaCorner = /*#__PURE__*/React__namespace.forwardRef(function ScrollAreaCorner(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    ...elementProps
+  } = componentProps;
+  const {
+    cornerRef,
+    cornerSize,
+    hiddenState
+  } = ScrollAreaViewport.useScrollAreaRootContext();
+  const element = useRenderElement.useRenderElement('div', componentProps, {
+    ref: [forwardedRef, cornerRef],
+    props: [{
+      style: {
+        position: 'absolute',
+        bottom: 0,
+        insetInlineEnd: 0,
+        width: cornerSize.width,
+        height: cornerSize.height
+      }
+    }, elementProps]
+  });
+  if (hiddenState.corner) {
+    return null;
+  }
+  return element;
+});
+if (process.env.NODE_ENV !== "production") ScrollAreaCorner.displayName = "ScrollAreaCorner";
+
+var index_parts$2 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Content: ScrollAreaContent,
+  Corner: ScrollAreaCorner,
+  Root: ScrollAreaViewport.ScrollAreaRoot,
+  Scrollbar: ScrollAreaScrollbar,
+  Thumb: ScrollAreaThumb,
+  Viewport: ScrollAreaViewport.ScrollAreaViewport
+});
+
 const ComboboxRootContext = /*#__PURE__*/React__namespace.createContext(undefined);
 if (process.env.NODE_ENV !== "production") ComboboxRootContext.displayName = "ComboboxRootContext";
 const ComboboxFloatingContext = /*#__PURE__*/React__namespace.createContext(undefined);
@@ -3766,16 +4133,16 @@ function resolveMultipleLabels(values, items, itemToStringLabel) {
 }
 
 const selectors = {
-  id: DrawerRoot.createSelector(state => state.id),
-  labelId: DrawerRoot.createSelector(state => state.labelId),
-  query: DrawerRoot.createSelector(state => state.query),
-  items: DrawerRoot.createSelector(state => state.items),
-  selectedValue: DrawerRoot.createSelector(state => state.selectedValue),
-  hasSelectionChips: DrawerRoot.createSelector(state => {
+  id: ScrollAreaViewport.createSelector(state => state.id),
+  labelId: ScrollAreaViewport.createSelector(state => state.labelId),
+  query: ScrollAreaViewport.createSelector(state => state.query),
+  items: ScrollAreaViewport.createSelector(state => state.items),
+  selectedValue: ScrollAreaViewport.createSelector(state => state.selectedValue),
+  hasSelectionChips: ScrollAreaViewport.createSelector(state => {
     const selectedValue = state.selectedValue;
     return Array.isArray(selectedValue) && selectedValue.length > 0;
   }),
-  hasSelectedValue: DrawerRoot.createSelector(state => {
+  hasSelectedValue: ScrollAreaViewport.createSelector(state => {
     const {
       selectedValue,
       selectionMode
@@ -3788,17 +4155,17 @@ const selectors = {
     }
     return true;
   }),
-  hasNullItemLabel: DrawerRoot.createSelector((state, enabled) => {
+  hasNullItemLabel: ScrollAreaViewport.createSelector((state, enabled) => {
     return enabled ? hasNullItemLabel(state.items) : false;
   }),
-  open: DrawerRoot.createSelector(state => state.open),
-  mounted: DrawerRoot.createSelector(state => state.mounted),
-  forceMounted: DrawerRoot.createSelector(state => state.forceMounted),
-  inline: DrawerRoot.createSelector(state => state.inline),
-  activeIndex: DrawerRoot.createSelector(state => state.activeIndex),
-  selectedIndex: DrawerRoot.createSelector(state => state.selectedIndex),
-  isActive: DrawerRoot.createSelector((state, index) => state.activeIndex === index),
-  isSelected: DrawerRoot.createSelector((state, itemValue) => {
+  open: ScrollAreaViewport.createSelector(state => state.open),
+  mounted: ScrollAreaViewport.createSelector(state => state.mounted),
+  forceMounted: ScrollAreaViewport.createSelector(state => state.forceMounted),
+  inline: ScrollAreaViewport.createSelector(state => state.inline),
+  activeIndex: ScrollAreaViewport.createSelector(state => state.activeIndex),
+  selectedIndex: ScrollAreaViewport.createSelector(state => state.selectedIndex),
+  isActive: ScrollAreaViewport.createSelector((state, index) => state.activeIndex === index),
+  isSelected: ScrollAreaViewport.createSelector((state, itemValue) => {
     const comparer = state.isItemEqualToValue;
     const selectedValue = state.selectedValue;
     if (Array.isArray(selectedValue)) {
@@ -3806,44 +4173,44 @@ const selectors = {
     }
     return compareItemEquality(itemValue, selectedValue, comparer);
   }),
-  transitionStatus: DrawerRoot.createSelector(state => state.transitionStatus),
-  popupProps: DrawerRoot.createSelector(state => state.popupProps),
-  inputProps: DrawerRoot.createSelector(state => state.inputProps),
-  triggerProps: DrawerRoot.createSelector(state => state.triggerProps),
-  getItemProps: DrawerRoot.createSelector(state => state.getItemProps),
-  positionerElement: DrawerRoot.createSelector(state => state.positionerElement),
-  listElement: DrawerRoot.createSelector(state => state.listElement),
-  triggerElement: DrawerRoot.createSelector(state => state.triggerElement),
-  inputElement: DrawerRoot.createSelector(state => state.inputElement),
-  inputGroupElement: DrawerRoot.createSelector(state => state.inputGroupElement),
-  popupSide: DrawerRoot.createSelector(state => state.popupSide),
-  openMethod: DrawerRoot.createSelector(state => state.openMethod),
-  inputInsidePopup: DrawerRoot.createSelector(state => state.inputInsidePopup),
-  selectionMode: DrawerRoot.createSelector(state => state.selectionMode),
-  listRef: DrawerRoot.createSelector(state => state.listRef),
-  labelsRef: DrawerRoot.createSelector(state => state.labelsRef),
-  popupRef: DrawerRoot.createSelector(state => state.popupRef),
-  emptyRef: DrawerRoot.createSelector(state => state.emptyRef),
-  inputRef: DrawerRoot.createSelector(state => state.inputRef),
-  keyboardActiveRef: DrawerRoot.createSelector(state => state.keyboardActiveRef),
-  chipsContainerRef: DrawerRoot.createSelector(state => state.chipsContainerRef),
-  clearRef: DrawerRoot.createSelector(state => state.clearRef),
-  valuesRef: DrawerRoot.createSelector(state => state.valuesRef),
-  allValuesRef: DrawerRoot.createSelector(state => state.allValuesRef),
-  name: DrawerRoot.createSelector(state => state.name),
-  disabled: DrawerRoot.createSelector(state => state.disabled),
-  readOnly: DrawerRoot.createSelector(state => state.readOnly),
-  required: DrawerRoot.createSelector(state => state.required),
-  grid: DrawerRoot.createSelector(state => state.grid),
-  isGrouped: DrawerRoot.createSelector(state => state.isGrouped),
-  virtualized: DrawerRoot.createSelector(state => state.virtualized),
-  onOpenChangeComplete: DrawerRoot.createSelector(state => state.onOpenChangeComplete),
-  openOnInputClick: DrawerRoot.createSelector(state => state.openOnInputClick),
-  itemToStringLabel: DrawerRoot.createSelector(state => state.itemToStringLabel),
-  isItemEqualToValue: DrawerRoot.createSelector(state => state.isItemEqualToValue),
-  modal: DrawerRoot.createSelector(state => state.modal),
-  autoHighlight: DrawerRoot.createSelector(state => state.autoHighlight),
-  submitOnItemClick: DrawerRoot.createSelector(state => state.submitOnItemClick)
+  transitionStatus: ScrollAreaViewport.createSelector(state => state.transitionStatus),
+  popupProps: ScrollAreaViewport.createSelector(state => state.popupProps),
+  inputProps: ScrollAreaViewport.createSelector(state => state.inputProps),
+  triggerProps: ScrollAreaViewport.createSelector(state => state.triggerProps),
+  getItemProps: ScrollAreaViewport.createSelector(state => state.getItemProps),
+  positionerElement: ScrollAreaViewport.createSelector(state => state.positionerElement),
+  listElement: ScrollAreaViewport.createSelector(state => state.listElement),
+  triggerElement: ScrollAreaViewport.createSelector(state => state.triggerElement),
+  inputElement: ScrollAreaViewport.createSelector(state => state.inputElement),
+  inputGroupElement: ScrollAreaViewport.createSelector(state => state.inputGroupElement),
+  popupSide: ScrollAreaViewport.createSelector(state => state.popupSide),
+  openMethod: ScrollAreaViewport.createSelector(state => state.openMethod),
+  inputInsidePopup: ScrollAreaViewport.createSelector(state => state.inputInsidePopup),
+  selectionMode: ScrollAreaViewport.createSelector(state => state.selectionMode),
+  listRef: ScrollAreaViewport.createSelector(state => state.listRef),
+  labelsRef: ScrollAreaViewport.createSelector(state => state.labelsRef),
+  popupRef: ScrollAreaViewport.createSelector(state => state.popupRef),
+  emptyRef: ScrollAreaViewport.createSelector(state => state.emptyRef),
+  inputRef: ScrollAreaViewport.createSelector(state => state.inputRef),
+  keyboardActiveRef: ScrollAreaViewport.createSelector(state => state.keyboardActiveRef),
+  chipsContainerRef: ScrollAreaViewport.createSelector(state => state.chipsContainerRef),
+  clearRef: ScrollAreaViewport.createSelector(state => state.clearRef),
+  valuesRef: ScrollAreaViewport.createSelector(state => state.valuesRef),
+  allValuesRef: ScrollAreaViewport.createSelector(state => state.allValuesRef),
+  name: ScrollAreaViewport.createSelector(state => state.name),
+  disabled: ScrollAreaViewport.createSelector(state => state.disabled),
+  readOnly: ScrollAreaViewport.createSelector(state => state.readOnly),
+  required: ScrollAreaViewport.createSelector(state => state.required),
+  grid: ScrollAreaViewport.createSelector(state => state.grid),
+  isGrouped: ScrollAreaViewport.createSelector(state => state.isGrouped),
+  virtualized: ScrollAreaViewport.createSelector(state => state.virtualized),
+  onOpenChangeComplete: ScrollAreaViewport.createSelector(state => state.onOpenChangeComplete),
+  openOnInputClick: ScrollAreaViewport.createSelector(state => state.openOnInputClick),
+  itemToStringLabel: ScrollAreaViewport.createSelector(state => state.itemToStringLabel),
+  isItemEqualToValue: ScrollAreaViewport.createSelector(state => state.isItemEqualToValue),
+  modal: ScrollAreaViewport.createSelector(state => state.modal),
+  autoHighlight: ScrollAreaViewport.createSelector(state => state.autoHighlight),
+  submitOnItemClick: ScrollAreaViewport.createSelector(state => state.submitOnItemClick)
 };
 
 /**
@@ -4191,7 +4558,7 @@ function AriaCombobox(props) {
     }
     return filteredItems;
   }, [filteredItems, isGrouped]);
-  const store = useRenderElement.useRefWithInit(() => new DrawerRoot.Store({
+  const store = useRenderElement.useRefWithInit(() => new ScrollAreaViewport.Store({
     id,
     labelId: undefined,
     selectedValue,
@@ -4268,15 +4635,15 @@ function AriaCombobox(props) {
   }, [fieldRawValue, itemToStringValue, selectionMode, selectedValue]);
   const onItemHighlighted = useValueChanged.useStableCallback(onItemHighlightedProp);
   const onOpenChangeComplete = useValueChanged.useStableCallback(onOpenChangeCompleteProp);
-  const activeIndex = DrawerRoot.useStore(store, selectors.activeIndex);
-  const selectedIndex = DrawerRoot.useStore(store, selectors.selectedIndex);
-  const positionerElement = DrawerRoot.useStore(store, selectors.positionerElement);
-  const listElement = DrawerRoot.useStore(store, selectors.listElement);
-  const triggerElement = DrawerRoot.useStore(store, selectors.triggerElement);
-  const inputElement = DrawerRoot.useStore(store, selectors.inputElement);
-  const inputGroupElement = DrawerRoot.useStore(store, selectors.inputGroupElement);
-  const inline = DrawerRoot.useStore(store, selectors.inline);
-  const inputInsidePopup = DrawerRoot.useStore(store, selectors.inputInsidePopup);
+  const activeIndex = ScrollAreaViewport.useStore(store, selectors.activeIndex);
+  const selectedIndex = ScrollAreaViewport.useStore(store, selectors.selectedIndex);
+  const positionerElement = ScrollAreaViewport.useStore(store, selectors.positionerElement);
+  const listElement = ScrollAreaViewport.useStore(store, selectors.listElement);
+  const triggerElement = ScrollAreaViewport.useStore(store, selectors.triggerElement);
+  const inputElement = ScrollAreaViewport.useStore(store, selectors.inputElement);
+  const inputGroupElement = ScrollAreaViewport.useStore(store, selectors.inputGroupElement);
+  const inline = ScrollAreaViewport.useStore(store, selectors.inline);
+  const inputInsidePopup = ScrollAreaViewport.useStore(store, selectors.inputInsidePopup);
   const triggerRef = useValueChanged.useValueAsRef(triggerElement);
   const {
     mounted,
@@ -4286,7 +4653,7 @@ function AriaCombobox(props) {
   const {
     openMethod,
     triggerProps
-  } = DrawerRoot.useOpenInteractionType(open);
+  } = ScrollAreaViewport.useOpenInteractionType(open);
   NumberFieldInput.useField({
     id,
     name,
@@ -4438,7 +4805,7 @@ function AriaCombobox(props) {
       }
       itemValue = valuesRef.current[activeIndex];
     }
-    const targetEl = DrawerRoot.getTarget(event);
+    const targetEl = ScrollAreaViewport.getTarget(event);
     const overrideEvent = selectionEventRef.current ?? event;
     selectionEventRef.current = null;
     const eventDetails = useValueChanged.createChangeEventDetails(useValueChanged.itemPress, overrideEvent);
@@ -4727,7 +5094,7 @@ function AriaCombobox(props) {
       }
     };
   }, [inputElement, open, ariaExpanded, ariaHasPopup, listElement?.id, autoComplete]);
-  const click = MenuSubmenuTrigger.useClick(floatingRootContext, {
+  const click = ScrollAreaViewport.useClick(floatingRootContext, {
     enabled: !readOnly && !disabled && openOnInputClick,
     event: 'mousedown-only',
     toggle: false,
@@ -4736,7 +5103,7 @@ function AriaCombobox(props) {
     touchOpenDelay: inputInsidePopup ? 0 : 50,
     reason: useValueChanged.inputPress
   });
-  const dismiss = DrawerRoot.useDismiss(floatingRootContext, {
+  const dismiss = ScrollAreaViewport.useDismiss(floatingRootContext, {
     enabled: !readOnly && !disabled && !inline,
     outsidePressEvent: {
       mouse: 'sloppy',
@@ -4748,8 +5115,8 @@ function AriaCombobox(props) {
     // Without a popup, let the Escape key bubble the event up to other popups' handlers.
     bubbles: inline ? true : undefined,
     outsidePress(event) {
-      const target = DrawerRoot.getTarget(event);
-      return !DrawerRoot.contains(triggerElement, target) && !DrawerRoot.contains(clearRef.current, target) && !DrawerRoot.contains(chipsContainerRef.current, target) && !DrawerRoot.contains(inputGroupElement, target);
+      const target = ScrollAreaViewport.getTarget(event);
+      return !ScrollAreaViewport.contains(triggerElement, target) && !ScrollAreaViewport.contains(clearRef.current, target) && !ScrollAreaViewport.contains(chipsContainerRef.current, target) && !ScrollAreaViewport.contains(inputGroupElement, target);
     }
   });
   const listNavigation = MenuSubmenuTrigger.useListNavigation(floatingRootContext, {
@@ -4792,8 +5159,8 @@ function AriaCombobox(props) {
     getReferenceProps,
     getFloatingProps,
     getItemProps
-  } = DrawerRoot.useInteractions([role, click, dismiss, listNavigation]);
-  DrawerRoot.useOnFirstRender(() => {
+  } = ScrollAreaViewport.useInteractions([role, click, dismiss, listNavigation]);
+  ScrollAreaViewport.useOnFirstRender(() => {
     store.update({
       inline: inlineProp,
       popupProps: getFloatingProps(),
@@ -4955,7 +5322,7 @@ function AriaCombobox(props) {
 }
 
 const triggerStateAttributesMapping = {
-  ...DrawerRoot.pressableTriggerOpenStateMapping,
+  ...ScrollAreaViewport.pressableTriggerOpenStateMapping,
   ...NumberFieldInput.fieldValidityMapping,
   popupSide: side => side ? {
     'data-popup-side': side
@@ -5002,24 +5369,24 @@ const ComboboxTrigger = /*#__PURE__*/React__namespace.forwardRef(function Combob
   const {
     filteredItems
   } = useComboboxDerivedItemsContext();
-  const selectionMode = DrawerRoot.useStore(store, selectors.selectionMode);
-  const comboboxDisabled = DrawerRoot.useStore(store, selectors.disabled);
-  const readOnly = DrawerRoot.useStore(store, selectors.readOnly);
-  const required = DrawerRoot.useStore(store, selectors.required);
-  const mounted = DrawerRoot.useStore(store, selectors.mounted);
-  const popupSideValue = DrawerRoot.useStore(store, selectors.popupSide);
-  const positionerElement = DrawerRoot.useStore(store, selectors.positionerElement);
-  const listElement = DrawerRoot.useStore(store, selectors.listElement);
-  const triggerProps = DrawerRoot.useStore(store, selectors.triggerProps);
-  const triggerElement = DrawerRoot.useStore(store, selectors.triggerElement);
-  const inputInsidePopup = DrawerRoot.useStore(store, selectors.inputInsidePopup);
-  const rootId = DrawerRoot.useStore(store, selectors.id);
-  const comboboxLabelId = DrawerRoot.useStore(store, selectors.labelId);
-  const open = DrawerRoot.useStore(store, selectors.open);
-  const selectedValue = DrawerRoot.useStore(store, selectors.selectedValue);
-  const activeIndex = DrawerRoot.useStore(store, selectors.activeIndex);
-  const selectedIndex = DrawerRoot.useStore(store, selectors.selectedIndex);
-  const hasSelectedValue = DrawerRoot.useStore(store, selectors.hasSelectedValue);
+  const selectionMode = ScrollAreaViewport.useStore(store, selectors.selectionMode);
+  const comboboxDisabled = ScrollAreaViewport.useStore(store, selectors.disabled);
+  const readOnly = ScrollAreaViewport.useStore(store, selectors.readOnly);
+  const required = ScrollAreaViewport.useStore(store, selectors.required);
+  const mounted = ScrollAreaViewport.useStore(store, selectors.mounted);
+  const popupSideValue = ScrollAreaViewport.useStore(store, selectors.popupSide);
+  const positionerElement = ScrollAreaViewport.useStore(store, selectors.positionerElement);
+  const listElement = ScrollAreaViewport.useStore(store, selectors.listElement);
+  const triggerProps = ScrollAreaViewport.useStore(store, selectors.triggerProps);
+  const triggerElement = ScrollAreaViewport.useStore(store, selectors.triggerElement);
+  const inputInsidePopup = ScrollAreaViewport.useStore(store, selectors.inputInsidePopup);
+  const rootId = ScrollAreaViewport.useStore(store, selectors.id);
+  const comboboxLabelId = ScrollAreaViewport.useStore(store, selectors.labelId);
+  const open = ScrollAreaViewport.useStore(store, selectors.open);
+  const selectedValue = ScrollAreaViewport.useStore(store, selectors.selectedValue);
+  const activeIndex = ScrollAreaViewport.useStore(store, selectors.activeIndex);
+  const selectedIndex = ScrollAreaViewport.useStore(store, selectors.selectedIndex);
+  const hasSelectedValue = ScrollAreaViewport.useStore(store, selectors.hasSelectedValue);
   const floatingRootContext = useComboboxFloatingContext();
   const inputValue = useComboboxInputValueContext();
   const focusTimeout = useValueChanged.useTimeout();
@@ -5063,14 +5430,14 @@ const ComboboxTrigger = /*#__PURE__*/React__namespace.forwardRef(function Combob
   });
   const {
     reference: triggerClickProps
-  } = MenuSubmenuTrigger.useClick(floatingRootContext, {
+  } = ScrollAreaViewport.useClick(floatingRootContext, {
     enabled: !readOnly && !comboboxDisabled,
     event: 'mousedown'
   });
   const {
     buttonRef,
     getButtonProps
-  } = useBaseUiId.useButton({
+  } = useValueChanged.useButton({
     native: nativeButton,
     disabled
   });
@@ -5108,7 +5475,7 @@ const ComboboxTrigger = /*#__PURE__*/React__namespace.forwardRef(function Combob
       },
       onBlur(event) {
         // If focus is moving into the popup, don't count it as a blur.
-        if (DrawerRoot.contains(positionerElement, event.relatedTarget)) {
+        if (ScrollAreaViewport.contains(positionerElement, event.relatedTarget)) {
           return;
         }
         setTouched(true);
@@ -5142,10 +5509,10 @@ const ComboboxTrigger = /*#__PURE__*/React__namespace.forwardRef(function Combob
           if (!triggerElement) {
             return;
           }
-          const mouseUpTarget = DrawerRoot.getTarget(mouseEvent);
+          const mouseUpTarget = ScrollAreaViewport.getTarget(mouseEvent);
           const positioner = store.state.positionerElement;
           const list = store.state.listElement;
-          if (DrawerRoot.contains(triggerElement, mouseUpTarget) || DrawerRoot.contains(positioner, mouseUpTarget) || DrawerRoot.contains(list, mouseUpTarget) || mouseUpTarget === triggerElement) {
+          if (ScrollAreaViewport.contains(triggerElement, mouseUpTarget) || ScrollAreaViewport.contains(positioner, mouseUpTarget) || ScrollAreaViewport.contains(list, mouseUpTarget) || mouseUpTarget === triggerElement) {
             return;
           }
           const bounds = MenuSubmenuTrigger.getPseudoElementBounds(triggerElement);
@@ -5203,7 +5570,7 @@ const ComboboxInternalDismissButton = /*#__PURE__*/React__namespace.forwardRef(f
   const {
     buttonRef,
     getButtonProps
-  } = useBaseUiId.useButton({
+  } = useValueChanged.useButton({
     native: false
   });
   const mergedRef = useRenderElement.useMergedRefs(forwardedRef, buttonRef);
@@ -5252,30 +5619,30 @@ const ComboboxInput = /*#__PURE__*/React__namespace.forwardRef(function Combobox
   // `inputValue` can't be placed in the store.
   // https://github.com/mui/base-ui/issues/2703
   const inputValue = useComboboxInputValueContext();
-  const direction = MenuSubmenuTrigger.useDirection();
-  const required = DrawerRoot.useStore(store, selectors.required);
-  const comboboxDisabled = DrawerRoot.useStore(store, selectors.disabled);
-  const readOnly = DrawerRoot.useStore(store, selectors.readOnly);
-  const name = DrawerRoot.useStore(store, selectors.name);
-  const selectionMode = DrawerRoot.useStore(store, selectors.selectionMode);
-  const autoHighlightMode = DrawerRoot.useStore(store, selectors.autoHighlight);
-  const inputProps = DrawerRoot.useStore(store, selectors.inputProps);
-  const triggerProps = DrawerRoot.useStore(store, selectors.triggerProps);
-  const open = DrawerRoot.useStore(store, selectors.open);
-  const mounted = DrawerRoot.useStore(store, selectors.mounted);
-  const selectedValue = DrawerRoot.useStore(store, selectors.selectedValue);
-  const popupSideValue = DrawerRoot.useStore(store, selectors.popupSide);
-  const positionerElement = DrawerRoot.useStore(store, selectors.positionerElement);
-  const rootId = DrawerRoot.useStore(store, selectors.id);
-  const inline = DrawerRoot.useStore(store, selectors.inline);
-  const modal = DrawerRoot.useStore(store, selectors.modal);
+  const direction = ScrollAreaViewport.useDirection();
+  const required = ScrollAreaViewport.useStore(store, selectors.required);
+  const comboboxDisabled = ScrollAreaViewport.useStore(store, selectors.disabled);
+  const readOnly = ScrollAreaViewport.useStore(store, selectors.readOnly);
+  const name = ScrollAreaViewport.useStore(store, selectors.name);
+  const selectionMode = ScrollAreaViewport.useStore(store, selectors.selectionMode);
+  const autoHighlightMode = ScrollAreaViewport.useStore(store, selectors.autoHighlight);
+  const inputProps = ScrollAreaViewport.useStore(store, selectors.inputProps);
+  const triggerProps = ScrollAreaViewport.useStore(store, selectors.triggerProps);
+  const open = ScrollAreaViewport.useStore(store, selectors.open);
+  const mounted = ScrollAreaViewport.useStore(store, selectors.mounted);
+  const selectedValue = ScrollAreaViewport.useStore(store, selectors.selectedValue);
+  const popupSideValue = ScrollAreaViewport.useStore(store, selectors.popupSide);
+  const positionerElement = ScrollAreaViewport.useStore(store, selectors.positionerElement);
+  const rootId = ScrollAreaViewport.useStore(store, selectors.id);
+  const inline = ScrollAreaViewport.useStore(store, selectors.inline);
+  const modal = ScrollAreaViewport.useStore(store, selectors.modal);
   const autoHighlightEnabled = Boolean(autoHighlightMode);
   const popupSide = mounted && positionerElement ? popupSideValue : null;
   const disabled = fieldDisabled || comboboxDisabled || disabledProp;
   const listEmpty = filteredItems.length === 0;
   const isInsidePopup = hasPositionerParent || inline;
   const focusManagerModal = !isInsidePopup || modal;
-  const id = useBaseUiId.useBaseUiId(idProp ?? (!isInsidePopup ? rootId : undefined));
+  const id = useValueChanged.useBaseUiId(idProp ?? (!isInsidePopup ? rootId : undefined));
   const ariaLabelledBy = resolveAriaLabelledBy(fieldLabelId, undefined);
   const fieldStateForInput = hasPositionerParent ? NumberFieldInput.DEFAULT_FIELD_STATE_ATTRIBUTES : fieldState;
   const [composingValue, setComposingValue] = React__namespace.useState(null);
@@ -5612,14 +5979,14 @@ const ComboboxInputGroup = /*#__PURE__*/React__namespace.forwardRef(function Com
   const {
     filteredItems
   } = useComboboxDerivedItemsContext();
-  const open = DrawerRoot.useStore(store, selectors.open);
-  const mounted = DrawerRoot.useStore(store, selectors.mounted);
-  const popupSideValue = DrawerRoot.useStore(store, selectors.popupSide);
-  const positionerElement = DrawerRoot.useStore(store, selectors.positionerElement);
-  const comboboxDisabled = DrawerRoot.useStore(store, selectors.disabled);
-  const readOnly = DrawerRoot.useStore(store, selectors.readOnly);
-  const hasSelectedValue = DrawerRoot.useStore(store, selectors.hasSelectedValue);
-  const selectionMode = DrawerRoot.useStore(store, selectors.selectionMode);
+  const open = ScrollAreaViewport.useStore(store, selectors.open);
+  const mounted = ScrollAreaViewport.useStore(store, selectors.mounted);
+  const popupSideValue = ScrollAreaViewport.useStore(store, selectors.popupSide);
+  const positionerElement = ScrollAreaViewport.useStore(store, selectors.positionerElement);
+  const comboboxDisabled = ScrollAreaViewport.useStore(store, selectors.disabled);
+  const readOnly = ScrollAreaViewport.useStore(store, selectors.readOnly);
+  const hasSelectedValue = ScrollAreaViewport.useStore(store, selectors.hasSelectedValue);
+  const selectionMode = ScrollAreaViewport.useStore(store, selectors.selectionMode);
   const popupSide = mounted && positionerElement ? popupSideValue : null;
   const disabled = fieldDisabled || comboboxDisabled;
   const listEmpty = filteredItems.length === 0;
@@ -5670,7 +6037,7 @@ if (process.env.NODE_ENV !== "production") ComboboxIcon.displayName = "ComboboxI
 
 const stateAttributesMapping$2 = {
   ...useValueChanged.transitionStatusMapping,
-  ...DrawerRoot.triggerOpenStateMapping
+  ...ScrollAreaViewport.triggerOpenStateMapping
 };
 
 /**
@@ -5690,12 +6057,12 @@ const ComboboxClear = /*#__PURE__*/React__namespace.forwardRef(function Combobox
     disabled: fieldDisabled
   } = NumberFieldInput.useFieldRootContext();
   const store = useComboboxRootContext();
-  const selectionMode = DrawerRoot.useStore(store, selectors.selectionMode);
-  const comboboxDisabled = DrawerRoot.useStore(store, selectors.disabled);
-  const readOnly = DrawerRoot.useStore(store, selectors.readOnly);
-  const open = DrawerRoot.useStore(store, selectors.open);
-  const selectedValue = DrawerRoot.useStore(store, selectors.selectedValue);
-  const hasSelectionChips = DrawerRoot.useStore(store, selectors.hasSelectionChips);
+  const selectionMode = ScrollAreaViewport.useStore(store, selectors.selectionMode);
+  const comboboxDisabled = ScrollAreaViewport.useStore(store, selectors.disabled);
+  const readOnly = ScrollAreaViewport.useStore(store, selectors.readOnly);
+  const open = ScrollAreaViewport.useStore(store, selectors.open);
+  const selectedValue = ScrollAreaViewport.useStore(store, selectors.selectedValue);
+  const hasSelectionChips = ScrollAreaViewport.useStore(store, selectors.hasSelectionChips);
   const inputValue = useComboboxInputValueContext();
   let visible = false;
   if (selectionMode === 'none') {
@@ -5709,7 +6076,7 @@ const ComboboxClear = /*#__PURE__*/React__namespace.forwardRef(function Combobox
   const {
     buttonRef,
     getButtonProps
-  } = useBaseUiId.useButton({
+  } = useValueChanged.useButton({
     native: nativeButton,
     disabled
   });
@@ -5824,15 +6191,15 @@ const ComboboxList = /*#__PURE__*/React__namespace.forwardRef(function ComboboxL
   const {
     filteredItems
   } = useComboboxDerivedItemsContext();
-  const items = DrawerRoot.useStore(store, selectors.items);
-  const labelsRef = DrawerRoot.useStore(store, selectors.labelsRef);
-  const listRef = DrawerRoot.useStore(store, selectors.listRef);
-  const selectionMode = DrawerRoot.useStore(store, selectors.selectionMode);
-  const grid = DrawerRoot.useStore(store, selectors.grid);
-  const popupProps = DrawerRoot.useStore(store, selectors.popupProps);
-  const disabled = DrawerRoot.useStore(store, selectors.disabled);
-  const readOnly = DrawerRoot.useStore(store, selectors.readOnly);
-  const virtualized = DrawerRoot.useStore(store, selectors.virtualized);
+  const items = ScrollAreaViewport.useStore(store, selectors.items);
+  const labelsRef = ScrollAreaViewport.useStore(store, selectors.labelsRef);
+  const listRef = ScrollAreaViewport.useStore(store, selectors.listRef);
+  const selectionMode = ScrollAreaViewport.useStore(store, selectors.selectionMode);
+  const grid = ScrollAreaViewport.useStore(store, selectors.grid);
+  const popupProps = ScrollAreaViewport.useStore(store, selectors.popupProps);
+  const disabled = ScrollAreaViewport.useStore(store, selectors.disabled);
+  const readOnly = ScrollAreaViewport.useStore(store, selectors.readOnly);
+  const virtualized = ScrollAreaViewport.useStore(store, selectors.virtualized);
   const multiple = selectionMode === 'multiple';
   const empty = filteredItems.length === 0;
   const setPositionerElement = useValueChanged.useStableCallback(element => {
@@ -5944,15 +6311,15 @@ const ComboboxPortal = /*#__PURE__*/React__namespace.forwardRef(function Combobo
     ...portalProps
   } = props;
   const store = useComboboxRootContext();
-  const mounted = DrawerRoot.useStore(store, selectors.mounted);
-  const forceMounted = DrawerRoot.useStore(store, selectors.forceMounted);
+  const mounted = ScrollAreaViewport.useStore(store, selectors.mounted);
+  const forceMounted = ScrollAreaViewport.useStore(store, selectors.forceMounted);
   const shouldRender = mounted || keepMounted || forceMounted;
   if (!shouldRender) {
     return null;
   }
   return /*#__PURE__*/jsxRuntime.jsx(ComboboxPortalContext.Provider, {
     value: keepMounted,
-    children: /*#__PURE__*/jsxRuntime.jsx(DrawerRoot.FloatingPortal, {
+    children: /*#__PURE__*/jsxRuntime.jsx(ScrollAreaViewport.FloatingPortal, {
       ref: forwardedRef,
       ...portalProps
     })
@@ -5961,7 +6328,7 @@ const ComboboxPortal = /*#__PURE__*/React__namespace.forwardRef(function Combobo
 if (process.env.NODE_ENV !== "production") ComboboxPortal.displayName = "ComboboxPortal";
 
 const stateAttributesMapping$1 = {
-  ...DrawerRoot.popupStateMapping,
+  ...ScrollAreaViewport.popupStateMapping,
   ...useValueChanged.transitionStatusMapping
 };
 
@@ -5976,9 +6343,9 @@ const ComboboxBackdrop = /*#__PURE__*/React__namespace.forwardRef(function Combo
     ...elementProps
   } = componentProps;
   const store = useComboboxRootContext();
-  const open = DrawerRoot.useStore(store, selectors.open);
-  const mounted = DrawerRoot.useStore(store, selectors.mounted);
-  const transitionStatus = DrawerRoot.useStore(store, selectors.transitionStatus);
+  const open = ScrollAreaViewport.useStore(store, selectors.open);
+  const mounted = ScrollAreaViewport.useStore(store, selectors.mounted);
+  const transitionStatus = ScrollAreaViewport.useStore(store, selectors.transitionStatus);
   const state = {
     open,
     transitionStatus
@@ -6014,7 +6381,7 @@ const ComboboxPositioner = /*#__PURE__*/React__namespace.forwardRef(function Com
     arrowPadding = 5,
     sticky = false,
     disableAnchorTracking = false,
-    collisionAvoidance = DrawerRoot.DROPDOWN_COLLISION_AVOIDANCE,
+    collisionAvoidance = ScrollAreaViewport.DROPDOWN_COLLISION_AVOIDANCE,
     ...elementProps
   } = componentProps;
   const store = useComboboxRootContext();
@@ -6023,15 +6390,15 @@ const ComboboxPositioner = /*#__PURE__*/React__namespace.forwardRef(function Com
   } = useComboboxDerivedItemsContext();
   const floatingRootContext = useComboboxFloatingContext();
   const keepMounted = useComboboxPortalContext();
-  const modal = DrawerRoot.useStore(store, selectors.modal);
-  const open = DrawerRoot.useStore(store, selectors.open);
-  const mounted = DrawerRoot.useStore(store, selectors.mounted);
-  const openMethod = DrawerRoot.useStore(store, selectors.openMethod);
-  const triggerElement = DrawerRoot.useStore(store, selectors.triggerElement);
-  const inputElement = DrawerRoot.useStore(store, selectors.inputElement);
-  const inputGroupElement = DrawerRoot.useStore(store, selectors.inputGroupElement);
-  const inputInsidePopup = DrawerRoot.useStore(store, selectors.inputInsidePopup);
-  const transitionStatus = DrawerRoot.useStore(store, selectors.transitionStatus);
+  const modal = ScrollAreaViewport.useStore(store, selectors.modal);
+  const open = ScrollAreaViewport.useStore(store, selectors.open);
+  const mounted = ScrollAreaViewport.useStore(store, selectors.mounted);
+  const openMethod = ScrollAreaViewport.useStore(store, selectors.openMethod);
+  const triggerElement = ScrollAreaViewport.useStore(store, selectors.triggerElement);
+  const inputElement = ScrollAreaViewport.useStore(store, selectors.inputElement);
+  const inputGroupElement = ScrollAreaViewport.useStore(store, selectors.inputGroupElement);
+  const inputInsidePopup = ScrollAreaViewport.useStore(store, selectors.inputInsidePopup);
+  const transitionStatus = ScrollAreaViewport.useStore(store, selectors.transitionStatus);
   const empty = filteredItems.length === 0;
   const resolvedAnchor = anchor ?? (inputInsidePopup ? triggerElement : inputGroupElement ?? inputElement);
   const positioning = MenuSubmenuTrigger.useAnchorPositioning({
@@ -6052,7 +6419,7 @@ const ComboboxPositioner = /*#__PURE__*/React__namespace.forwardRef(function Com
     collisionAvoidance,
     lazyFlip: true
   });
-  DrawerRoot.useScrollLock(open && modal && openMethod !== 'touch', triggerElement);
+  ScrollAreaViewport.useScrollLock(open && modal && openMethod !== 'touch', triggerElement);
   const defaultProps = React__namespace.useMemo(() => {
     const style = {
       ...positioning.positionerStyles
@@ -6092,12 +6459,12 @@ const ComboboxPositioner = /*#__PURE__*/React__namespace.forwardRef(function Com
     state,
     ref: [forwardedRef, setPositionerElement],
     props: [defaultProps, MenuSubmenuTrigger.getDisabledMountTransitionStyles(transitionStatus), elementProps],
-    stateAttributesMapping: DrawerRoot.popupStateMapping
+    stateAttributesMapping: ScrollAreaViewport.popupStateMapping
   });
   return /*#__PURE__*/jsxRuntime.jsxs(ComboboxPositionerContext.Provider, {
     value: contextValue,
-    children: [mounted && modal && /*#__PURE__*/jsxRuntime.jsx(DrawerRoot.InternalBackdrop, {
-      inert: DrawerRoot.inertValue(!open),
+    children: [mounted && modal && /*#__PURE__*/jsxRuntime.jsx(ScrollAreaViewport.InternalBackdrop, {
+      inert: ScrollAreaViewport.inertValue(!open),
       cutout: inputGroupElement ?? inputElement ?? triggerElement
     }), element]
   });
@@ -6105,7 +6472,7 @@ const ComboboxPositioner = /*#__PURE__*/React__namespace.forwardRef(function Com
 if (process.env.NODE_ENV !== "production") ComboboxPositioner.displayName = "ComboboxPositioner";
 
 const stateAttributesMapping = {
-  ...DrawerRoot.popupStateMapping,
+  ...ScrollAreaViewport.popupStateMapping,
   ...useValueChanged.transitionStatusMapping
 };
 
@@ -6127,13 +6494,13 @@ const ComboboxPopup = /*#__PURE__*/React__namespace.forwardRef(function Combobox
   const {
     filteredItems
   } = useComboboxDerivedItemsContext();
-  const mounted = DrawerRoot.useStore(store, selectors.mounted);
-  const open = DrawerRoot.useStore(store, selectors.open);
-  const openMethod = DrawerRoot.useStore(store, selectors.openMethod);
-  const transitionStatus = DrawerRoot.useStore(store, selectors.transitionStatus);
-  const inputInsidePopup = DrawerRoot.useStore(store, selectors.inputInsidePopup);
-  const inputElement = DrawerRoot.useStore(store, selectors.inputElement);
-  const modal = DrawerRoot.useStore(store, selectors.modal);
+  const mounted = ScrollAreaViewport.useStore(store, selectors.mounted);
+  const open = ScrollAreaViewport.useStore(store, selectors.open);
+  const openMethod = ScrollAreaViewport.useStore(store, selectors.openMethod);
+  const transitionStatus = ScrollAreaViewport.useStore(store, selectors.transitionStatus);
+  const inputInsidePopup = ScrollAreaViewport.useStore(store, selectors.inputInsidePopup);
+  const inputElement = ScrollAreaViewport.useStore(store, selectors.inputElement);
+  const modal = ScrollAreaViewport.useStore(store, selectors.modal);
   const empty = filteredItems.length === 0;
   useValueChanged.useOpenChangeComplete({
     open,
@@ -6159,8 +6526,8 @@ const ComboboxPopup = /*#__PURE__*/React__namespace.forwardRef(function Combobox
       role: inputInsidePopup ? 'dialog' : 'presentation',
       tabIndex: -1,
       onFocus(event) {
-        const target = DrawerRoot.getTarget(event.nativeEvent);
-        if (openMethod !== 'touch' && (DrawerRoot.contains(store.state.listElement, target) || target === event.currentTarget)) {
+        const target = ScrollAreaViewport.getTarget(event.nativeEvent);
+        if (openMethod !== 'touch' && (ScrollAreaViewport.contains(store.state.listElement, target) || target === event.currentTarget)) {
           store.state.inputRef.current?.focus();
         }
       }
@@ -6180,7 +6547,7 @@ const ComboboxPopup = /*#__PURE__*/React__namespace.forwardRef(function Combobox
     resolvedFinalFocus = inputInsidePopup ? undefined : false;
   }
   const focusManagerModal = !inputInsidePopup || modal;
-  return /*#__PURE__*/jsxRuntime.jsx(DrawerRoot.FloatingFocusManager, {
+  return /*#__PURE__*/jsxRuntime.jsx(ScrollAreaViewport.FloatingFocusManager, {
     context: floatingRootContext,
     disabled: !mounted,
     modal: focusManagerModal,
@@ -6215,7 +6582,7 @@ const ComboboxArrow = /*#__PURE__*/React__namespace.forwardRef(function Combobox
     arrowUncentered,
     arrowStyles
   } = useComboboxPositionerContext();
-  const open = DrawerRoot.useStore(store, selectors.open);
+  const open = ScrollAreaViewport.useStore(store, selectors.open);
   const state = {
     open,
     side,
@@ -6224,7 +6591,7 @@ const ComboboxArrow = /*#__PURE__*/React__namespace.forwardRef(function Combobox
   };
   return useRenderElement.useRenderElement('div', componentProps, {
     ref: [arrowRef, forwardedRef],
-    stateAttributesMapping: DrawerRoot.popupStateMapping,
+    stateAttributesMapping: ScrollAreaViewport.popupStateMapping,
     state,
     props: {
       style: arrowStyles,
@@ -6293,7 +6660,7 @@ const ComboboxGroupLabel = /*#__PURE__*/React__namespace.forwardRef(function Com
   const {
     setLabelId
   } = useComboboxGroupContext();
-  const id = useBaseUiId.useBaseUiId(idProp);
+  const id = useValueChanged.useBaseUiId(idProp);
   useValueChanged.useIsoLayoutEffect(() => {
     setLabelId(id);
     return () => {
@@ -6349,18 +6716,18 @@ const ComboboxItem = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__name
     flatFilteredItems,
     hasItems
   } = useComboboxDerivedItemsContext();
-  const open = DrawerRoot.useStore(store, selectors.open);
-  const selectionMode = DrawerRoot.useStore(store, selectors.selectionMode);
-  const readOnly = DrawerRoot.useStore(store, selectors.readOnly);
-  const virtualized = DrawerRoot.useStore(store, selectors.virtualized);
-  const isItemEqualToValue = DrawerRoot.useStore(store, selectors.isItemEqualToValue);
+  const open = ScrollAreaViewport.useStore(store, selectors.open);
+  const selectionMode = ScrollAreaViewport.useStore(store, selectors.selectionMode);
+  const readOnly = ScrollAreaViewport.useStore(store, selectors.readOnly);
+  const virtualized = ScrollAreaViewport.useStore(store, selectors.virtualized);
+  const isItemEqualToValue = ScrollAreaViewport.useStore(store, selectors.isItemEqualToValue);
   const selectable = selectionMode !== 'none';
   const index = indexProp ?? (virtualized ? findItemIndex(flatFilteredItems, itemValue, isItemEqualToValue) : listItem.index);
   const hasRegistered = listItem.index !== -1;
-  const rootId = DrawerRoot.useStore(store, selectors.id);
-  const highlighted = DrawerRoot.useStore(store, selectors.isActive, index);
-  const matchesSelectedValue = DrawerRoot.useStore(store, selectors.isSelected, itemValue);
-  const getItemProps = DrawerRoot.useStore(store, selectors.getItemProps);
+  const rootId = ScrollAreaViewport.useStore(store, selectors.id);
+  const highlighted = ScrollAreaViewport.useStore(store, selectors.isActive, index);
+  const matchesSelectedValue = ScrollAreaViewport.useStore(store, selectors.isSelected, itemValue);
+  const getItemProps = ScrollAreaViewport.useStore(store, selectors.getItemProps);
   const itemRef = React__namespace.useRef(null);
   const id = rootId != null && hasRegistered ? `${rootId}-${index}` : undefined;
   const selected = matchesSelectedValue && selectable;
@@ -6420,7 +6787,7 @@ const ComboboxItem = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__name
   const {
     getButtonProps,
     buttonRef
-  } = useBaseUiId.useButton({
+  } = useValueChanged.useButton({
     disabled,
     focusableWhenDisabled: true,
     native: nativeButton,
@@ -6557,7 +6924,7 @@ function ComboboxRoot(props) {
 }
 
 function useRegisteredLabelId(idProp, setLabelId) {
-  const id = useBaseUiId.useBaseUiId(idProp);
+  const id = useValueChanged.useBaseUiId(idProp);
   useValueChanged.useIsoLayoutEffect(() => {
     setLabelId(id);
     return () => {
@@ -6599,7 +6966,7 @@ function useLabel(params = {}) {
     }
   }
   function handleInteraction(event) {
-    const target = DrawerRoot.getTarget(event.nativeEvent);
+    const target = ScrollAreaViewport.getTarget(event.nativeEvent);
     if (target?.closest('button,input,select,textarea')) {
       return;
     }
@@ -6651,10 +7018,10 @@ const ComboboxLabel = /*#__PURE__*/React__namespace.forwardRef(function Combobox
   delete elementPropsWithoutId.id;
   const fieldRootContext = NumberFieldInput.useFieldRootContext();
   const store = useComboboxRootContext();
-  const inputInsidePopup = DrawerRoot.useStore(store, selectors.inputInsidePopup);
-  const triggerElement = DrawerRoot.useStore(store, selectors.triggerElement);
-  const inputElement = DrawerRoot.useStore(store, selectors.inputElement);
-  const rootId = DrawerRoot.useStore(store, selectors.id);
+  const inputInsidePopup = ScrollAreaViewport.useStore(store, selectors.inputInsidePopup);
+  const triggerElement = ScrollAreaViewport.useStore(store, selectors.triggerElement);
+  const inputElement = ScrollAreaViewport.useStore(store, selectors.inputElement);
+  const rootId = ScrollAreaViewport.useStore(store, selectors.id);
   const defaultLabelId = getDefaultLabelId(rootId);
   const localControlId = triggerElement?.id ?? (inputInsidePopup ? rootId : undefined);
   if (process.env.NODE_ENV !== 'production') {
@@ -6665,7 +7032,7 @@ const ComboboxLabel = /*#__PURE__*/React__namespace.forwardRef(function Combobox
       }
       const ownerStackMessage = useValueChanged.SafeReact.captureOwnerStack?.() || '';
       const message = '<Combobox.Label> labels <Combobox.Trigger> only. ' + 'When <Combobox.Input> is the form control, use a native <label> or <Field.Label> instead.';
-      useBaseUiId.error(`${message}${ownerStackMessage}`);
+      useValueChanged.error(`${message}${ownerStackMessage}`);
     }, [inputElement, inputInsidePopup]);
   }
   const labelProps = useLabel({
@@ -6690,13 +7057,13 @@ function ComboboxValue(props) {
     placeholder
   } = props;
   const store = useComboboxRootContext();
-  const itemToStringLabel = DrawerRoot.useStore(store, selectors.itemToStringLabel);
-  const selectedValue = DrawerRoot.useStore(store, selectors.selectedValue);
-  const items = DrawerRoot.useStore(store, selectors.items);
-  const multiple = DrawerRoot.useStore(store, selectors.selectionMode) === 'multiple';
-  const hasSelectedValue = DrawerRoot.useStore(store, selectors.hasSelectedValue);
+  const itemToStringLabel = ScrollAreaViewport.useStore(store, selectors.itemToStringLabel);
+  const selectedValue = ScrollAreaViewport.useStore(store, selectors.selectedValue);
+  const items = ScrollAreaViewport.useStore(store, selectors.items);
+  const multiple = ScrollAreaViewport.useStore(store, selectors.selectionMode) === 'multiple';
+  const hasSelectedValue = ScrollAreaViewport.useStore(store, selectors.hasSelectedValue);
   const shouldCheckNullItemLabel = !hasSelectedValue && placeholder != null && childrenProp == null;
-  const hasNullLabel = DrawerRoot.useStore(store, selectors.hasNullItemLabel, shouldCheckNullItemLabel);
+  const hasNullLabel = ScrollAreaViewport.useStore(store, selectors.hasNullItemLabel, shouldCheckNullItemLabel);
   let children = null;
   if (typeof childrenProp === 'function') {
     children = childrenProp(selectedValue);
@@ -6782,8 +7149,8 @@ const ComboboxChips = /*#__PURE__*/React__namespace.forwardRef(function Combobox
     ...elementProps
   } = componentProps;
   const store = useComboboxRootContext();
-  const open = DrawerRoot.useStore(store, selectors.open);
-  const hasSelectionChips = DrawerRoot.useStore(store, selectors.hasSelectionChips);
+  const open = ScrollAreaViewport.useStore(store, selectors.open);
+  const hasSelectionChips = ScrollAreaViewport.useStore(store, selectors.hasSelectionChips);
   const [highlightedChipIndex, setHighlightedChipIndex] = React__namespace.useState(undefined);
   if (open && highlightedChipIndex !== undefined) {
     setHighlightedChipIndex(undefined);
@@ -6833,9 +7200,9 @@ const ComboboxChip = /*#__PURE__*/React__namespace.forwardRef(function ComboboxC
     setHighlightedChipIndex,
     chipsRef
   } = useComboboxChipsContext();
-  const disabled = DrawerRoot.useStore(store, selectors.disabled);
-  const readOnly = DrawerRoot.useStore(store, selectors.readOnly);
-  const selectedValue = DrawerRoot.useStore(store, selectors.selectedValue);
+  const disabled = ScrollAreaViewport.useStore(store, selectors.disabled);
+  const readOnly = ScrollAreaViewport.useStore(store, selectors.readOnly);
+  const selectedValue = ScrollAreaViewport.useStore(store, selectors.selectedValue);
   const {
     ref,
     index
@@ -6942,15 +7309,15 @@ const ComboboxChipRemove = /*#__PURE__*/React__namespace.forwardRef(function Com
   const {
     index
   } = useComboboxChipContext();
-  const comboboxDisabled = DrawerRoot.useStore(store, selectors.disabled);
-  const readOnly = DrawerRoot.useStore(store, selectors.readOnly);
-  const selectedValue = DrawerRoot.useStore(store, selectors.selectedValue);
-  const isItemEqualToValue = DrawerRoot.useStore(store, selectors.isItemEqualToValue);
+  const comboboxDisabled = ScrollAreaViewport.useStore(store, selectors.disabled);
+  const readOnly = ScrollAreaViewport.useStore(store, selectors.readOnly);
+  const selectedValue = ScrollAreaViewport.useStore(store, selectors.selectedValue);
+  const isItemEqualToValue = ScrollAreaViewport.useStore(store, selectors.isItemEqualToValue);
   const disabled = comboboxDisabled || disabledProp;
   const {
     buttonRef,
     getButtonProps
-  } = useBaseUiId.useButton({
+  } = useValueChanged.useButton({
     native: nativeButton,
     disabled: disabled || readOnly,
     focusableWhenDisabled: true
@@ -7422,7 +7789,8 @@ function useRender(params) {
 
 exports.Separator = Separator.Separator;
 exports.Combobox = index_parts$1;
-exports.Drawer = index_parts$3;
-exports.Menu = index_parts$2;
+exports.Drawer = index_parts$4;
+exports.Menu = index_parts$3;
 exports.NumberField = index_parts;
+exports.ScrollArea = index_parts$2;
 exports.useRender = useRender;