@jobber/components 8.20.1 → 8.21.0

package/dist/MenuSubmenuTrigger-cjs.js

@@ -3,11 +3,11 @@
 var React = require('react');
 var ScrollAreaViewport = require('./ScrollAreaViewport-cjs.js');
 var useRenderElement = require('./useRenderElement-cjs.js');
-var clamp = require('./clamp-cjs.js');
+var useButton = require('./useButton-cjs.js');
 var jsxRuntime = require('react/jsx-runtime');
+var useCompositeListItem = require('./useCompositeListItem-cjs.js');
+var InternalBackdrop = require('./InternalBackdrop-cjs.js');
 var floatingUi_utils_dom = require('./floating-ui.utils.dom-cjs.js');
-var index_esm = require('./index.esm-cjs.js');
-var floatingUi_reactDom = require('./floating-ui.react-dom-cjs.js');
 var ReactDOM = require('react-dom');
 
 function _interopNamespaceDefault(e) {
@@ -31,7 +31,7 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 var ReactDOM__namespace = /*#__PURE__*/_interopNamespaceDefault(ReactDOM);
 
 function resolveValue(value, pointerType) {
-  if (pointerType != null && !clamp.isMouseLikePointerType(pointerType)) {
+  if (pointerType != null && !useButton.isMouseLikePointerType(pointerType)) {
     return 0;
   }
   if (typeof value === 'function') {
@@ -56,163 +56,7 @@ function isClickLikeOpenEvent(openEventType, interactedInside) {
   return interactedInside || openEventType === 'click' || openEventType === 'mousedown';
 }
 
-function useFloatingRootContext(options) {
-  const {
-    open = false,
-    onOpenChange,
-    elements = {}
-  } = options;
-  const floatingId = clamp.useId();
-  const nested = ScrollAreaViewport.useFloatingParentNodeId() != null;
-  if (process.env.NODE_ENV !== 'production') {
-    const optionDomReference = elements.reference;
-    if (optionDomReference && !floatingUi_utils_dom.isElement(optionDomReference)) {
-      console.error('Cannot pass a virtual element to the `elements.reference` option,', 'as it must be a real DOM element. Use `context.setPositionReference()`', 'instead.');
-    }
-  }
-  const store = useRenderElement.useRefWithInit(() => new ScrollAreaViewport.FloatingRootStore({
-    open,
-    onOpenChange,
-    referenceElement: elements.reference ?? null,
-    floatingElement: elements.floating ?? null,
-    triggerElements: new ScrollAreaViewport.PopupTriggerMap(),
-    floatingId,
-    nested,
-    noEmit: false
-  })).current;
-  clamp.useIsoLayoutEffect(() => {
-    const valuesToSync = {
-      open,
-      floatingId
-    };
-
-    // Only sync elements that are defined to avoid overwriting existing ones
-    if (elements.reference !== undefined) {
-      valuesToSync.referenceElement = elements.reference;
-      valuesToSync.domReferenceElement = floatingUi_utils_dom.isElement(elements.reference) ? elements.reference : null;
-    }
-    if (elements.floating !== undefined) {
-      valuesToSync.floatingElement = elements.floating;
-    }
-    store.update(valuesToSync);
-  }, [open, floatingId, elements.reference, elements.floating, store]);
-  store.context.onOpenChange = onOpenChange;
-  store.context.nested = nested;
-  store.context.noEmit = false;
-  return store;
-}
-
-/**
- * Provides data to position a floating element and context to add interactions.
- * @see https://floating-ui.com/docs/useFloating
- */
-function useFloating(options = {}) {
-  const {
-    nodeId,
-    externalTree
-  } = options;
-  const internalRootStore = useFloatingRootContext(options);
-  const rootContext = options.rootContext || internalRootStore;
-  const rootContextElements = {
-    reference: rootContext.useState('referenceElement'),
-    floating: rootContext.useState('floatingElement'),
-    domReference: rootContext.useState('domReferenceElement')
-  };
-  const [positionReference, setPositionReferenceRaw] = React__namespace.useState(null);
-  const domReferenceRef = React__namespace.useRef(null);
-  const tree = ScrollAreaViewport.useFloatingTree(externalTree);
-  clamp.useIsoLayoutEffect(() => {
-    if (rootContextElements.domReference) {
-      domReferenceRef.current = rootContextElements.domReference;
-    }
-  }, [rootContextElements.domReference]);
-  const position = floatingUi_reactDom.useFloating({
-    ...options,
-    elements: {
-      ...rootContextElements,
-      ...(positionReference && {
-        reference: positionReference
-      })
-    }
-  });
-  const setPositionReference = React__namespace.useCallback(node => {
-    const computedPositionReference = floatingUi_utils_dom.isElement(node) ? {
-      getBoundingClientRect: () => node.getBoundingClientRect(),
-      getClientRects: () => node.getClientRects(),
-      contextElement: node
-    } : node;
-    // Store the positionReference in state if the DOM reference is specified externally via the
-    // `elements.reference` option. This ensures that it won't be overridden on future renders.
-    setPositionReferenceRaw(computedPositionReference);
-    position.refs.setReference(computedPositionReference);
-  }, [position.refs]);
-  const [localDomReference, setLocalDomReference] = React__namespace.useState(null);
-  const [localFloatingElement, setLocalFloatingElement] = React__namespace.useState(null);
-  rootContext.useSyncedValue('referenceElement', localDomReference);
-  rootContext.useSyncedValue('domReferenceElement', floatingUi_utils_dom.isElement(localDomReference) ? localDomReference : null);
-  rootContext.useSyncedValue('floatingElement', localFloatingElement);
-  const setReference = React__namespace.useCallback(node => {
-    if (floatingUi_utils_dom.isElement(node) || node === null) {
-      domReferenceRef.current = node;
-      setLocalDomReference(node);
-    }
-
-    // Backwards-compatibility for passing a virtual element to `reference`
-    // after it has set the DOM reference.
-    if (floatingUi_utils_dom.isElement(position.refs.reference.current) || position.refs.reference.current === null ||
-    // Don't allow setting virtual elements using the old technique back to
-    // `null` to support `positionReference` + an unstable `reference`
-    // callback ref.
-    node !== null && !floatingUi_utils_dom.isElement(node)) {
-      position.refs.setReference(node);
-    }
-  }, [position.refs, setLocalDomReference]);
-  const setFloating = React__namespace.useCallback(node => {
-    setLocalFloatingElement(node);
-    position.refs.setFloating(node);
-  }, [position.refs]);
-  const refs = React__namespace.useMemo(() => ({
-    ...position.refs,
-    setReference,
-    setFloating,
-    setPositionReference,
-    domReference: domReferenceRef
-  }), [position.refs, setReference, setFloating, setPositionReference]);
-  const elements = React__namespace.useMemo(() => ({
-    ...position.elements,
-    domReference: rootContextElements.domReference
-  }), [position.elements, rootContextElements.domReference]);
-  const open = rootContext.useState('open');
-  const floatingId = rootContext.useState('floatingId');
-  const context = React__namespace.useMemo(() => ({
-    ...position,
-    dataRef: rootContext.context.dataRef,
-    open,
-    onOpenChange: rootContext.setOpen,
-    events: rootContext.context.events,
-    floatingId,
-    refs,
-    elements,
-    nodeId,
-    rootStore: rootContext
-  }), [position, refs, elements, nodeId, rootContext, open, floatingId]);
-  clamp.useIsoLayoutEffect(() => {
-    rootContext.context.dataRef.current.floatingContext = context;
-    const node = tree?.nodesRef.current.find(n => n.id === nodeId);
-    if (node) {
-      node.context = context;
-    }
-  });
-  return React__namespace.useMemo(() => ({
-    ...position,
-    context,
-    refs,
-    elements,
-    rootStore: rootContext
-  }), [position, refs, elements, context, rootContext]);
-}
-
-const isMacSafari = clamp.isMac && clamp.isSafari;
+const isMacSafari = useButton.isMac && useButton.isSafari;
 /**
  * Opens the floating element while the reference element has focus, like CSS
  * `:focus`.
@@ -231,7 +75,7 @@ function useFocus(context, props = {}) {
   const blockFocusRef = React__namespace.useRef(false);
   // Track which reference should be blocked from re-opening after Escape/press dismissal.
   const blockedReferenceRef = React__namespace.useRef(null);
-  const timeout = clamp.useTimeout();
+  const timeout = useButton.useTimeout();
   const keyboardModalityRef = React__namespace.useRef(true);
   React__namespace.useEffect(() => {
     const domReference = store.select('domReferenceElement');
@@ -245,7 +89,7 @@ function useFocus(context, props = {}) {
     // return to the tab/window.
     function onBlur() {
       const currentDomReference = store.select('domReferenceElement');
-      if (!store.select('open') && floatingUi_utils_dom.isHTMLElement(currentDomReference) && currentDomReference === clamp.activeElement(clamp.ownerDocument(currentDomReference))) {
+      if (!store.select('open') && floatingUi_utils_dom.isHTMLElement(currentDomReference) && currentDomReference === useButton.activeElement(useButton.ownerDocument(currentDomReference))) {
         blockFocusRef.current = true;
       }
     }
@@ -273,7 +117,7 @@ function useFocus(context, props = {}) {
       return undefined;
     }
     function onOpenChangeLocal(details) {
-      if (details.reason === clamp.triggerPress || details.reason === clamp.escapeKey) {
+      if (details.reason === useButton.triggerPress || details.reason === useButton.escapeKey) {
         const referenceElement = store.select('domReferenceElement');
         if (floatingUi_utils_dom.isElement(referenceElement)) {
           blockedReferenceRef.current = referenceElement;
@@ -300,33 +144,33 @@ function useFocus(context, props = {}) {
         blockFocusRef.current = false;
         blockedReferenceRef.current = null;
       }
-      const target = clamp.getTarget(event.nativeEvent);
+      const target = useButton.getTarget(event.nativeEvent);
       if (floatingUi_utils_dom.isElement(target)) {
         // Safari fails to match `:focus-visible` if focus was initially
         // outside the document.
         if (isMacSafari && !event.relatedTarget) {
-          if (!keyboardModalityRef.current && !clamp.isTypeableElement(target)) {
+          if (!keyboardModalityRef.current && !useButton.isTypeableElement(target)) {
             return;
           }
-        } else if (!clamp.matchesFocusVisible(target)) {
+        } else if (!useButton.matchesFocusVisible(target)) {
           return;
         }
       }
-      const movedFromOtherEnabledTrigger = clamp.isTargetInsideEnabledTrigger(event.relatedTarget, store.context.triggerElements);
+      const movedFromOtherEnabledTrigger = useButton.isTargetInsideEnabledTrigger(event.relatedTarget, store.context.triggerElements);
       const {
         nativeEvent,
         currentTarget
       } = event;
       const delayValue = typeof delay === 'function' ? delay() : delay;
       if (store.select('open') && movedFromOtherEnabledTrigger || delayValue === 0 || delayValue === undefined) {
-        store.setOpen(true, clamp.createChangeEventDetails(clamp.triggerFocus, nativeEvent, currentTarget));
+        store.setOpen(true, useButton.createChangeEventDetails(useButton.triggerFocus, nativeEvent, currentTarget));
         return;
       }
       timeout.start(delayValue, () => {
         if (blockFocusRef.current) {
           return;
         }
-        store.setOpen(true, clamp.createChangeEventDetails(clamp.triggerFocus, nativeEvent, currentTarget));
+        store.setOpen(true, useButton.createChangeEventDetails(useButton.triggerFocus, nativeEvent, currentTarget));
       });
     },
     onBlur(event) {
@@ -337,12 +181,12 @@ function useFocus(context, props = {}) {
 
       // Hit the non-modal focus management portal guard. Focus will be
       // moved into the floating element immediately after.
-      const movedToFocusGuard = floatingUi_utils_dom.isElement(relatedTarget) && relatedTarget.hasAttribute(ScrollAreaViewport.createAttribute('focus-guard')) && relatedTarget.getAttribute('data-type') === 'outside';
+      const movedToFocusGuard = floatingUi_utils_dom.isElement(relatedTarget) && relatedTarget.hasAttribute(InternalBackdrop.createAttribute('focus-guard')) && relatedTarget.getAttribute('data-type') === 'outside';
 
       // Wait for the window blur listener to fire.
       timeout.start(0, () => {
         const domReference = store.select('domReferenceElement');
-        const activeEl = clamp.activeElement(domReference ? domReference.ownerDocument : document);
+        const activeEl = useButton.activeElement(domReference ? domReference.ownerDocument : document);
 
         // Focus left the page, keep it open.
         if (!relatedTarget && activeEl === domReference) {
@@ -356,7 +200,7 @@ function useFocus(context, props = {}) {
         // as it will only point to the shadow host of the newly focused element
         // and not the element that actually has received focus if it is located
         // inside a shadow root.
-        if (clamp.contains(dataRef.current.floatingContext?.refs.floating.current, activeEl) || clamp.contains(domReference, activeEl) || movedToFocusGuard) {
+        if (useButton.contains(dataRef.current.floatingContext?.refs.floating.current, activeEl) || useButton.contains(domReference, activeEl) || movedToFocusGuard) {
           return;
         }
 
@@ -364,10 +208,10 @@ function useFocus(context, props = {}) {
         // the floating element. The focus handler of that trigger will
         // handle the open state.
         const nextFocusedElement = relatedTarget ?? activeEl;
-        if (clamp.isTargetInsideEnabledTrigger(nextFocusedElement, store.context.triggerElements)) {
+        if (useButton.isTargetInsideEnabledTrigger(nextFocusedElement, store.context.triggerElements)) {
           return;
         }
-        store.setOpen(false, clamp.createChangeEventDetails(clamp.triggerFocus, nativeEvent));
+        store.setOpen(false, useButton.createChangeEventDetails(useButton.triggerFocus, nativeEvent));
       });
     }
   }), [dataRef, store, timeout, delay]);
@@ -377,7 +221,7 @@ function useFocus(context, props = {}) {
   } : {}, [enabled, reference]);
 }
 
-const interactiveSelector = `button,a,[role="button"],select,[tabindex]:not([tabindex="-1"]),${clamp.TYPEABLE_SELECTOR}`;
+const interactiveSelector = `button,a,[role="button"],select,[tabindex]:not([tabindex="-1"]),${useButton.TYPEABLE_SELECTOR}`;
 function isInteractiveElement(element) {
   return element ? Boolean(element.closest(interactiveSelector)) : false;
 }
@@ -392,8 +236,8 @@ class HoverInteraction {
     this.pointerEventsReferenceElement = null;
     this.pointerEventsFloatingElement = null;
     this.restTimeoutPending = false;
-    this.openChangeTimeout = new clamp.Timeout();
-    this.restTimeout = new clamp.Timeout();
+    this.openChangeTimeout = new useButton.Timeout();
+    this.restTimeout = new useButton.Timeout();
     this.handleCloseOptions = undefined;
   }
   static create() {
@@ -440,7 +284,7 @@ function useHoverInteractionSharedState(store) {
   if (!data.hoverInteractionState) {
     data.hoverInteractionState = instance;
   }
-  clamp.useOnMount(data.hoverInteractionState.disposeEffect);
+  useButton.useOnMount(data.hoverInteractionState.disposeEffect);
   return data.hoverInteractionState;
 }
 
@@ -460,22 +304,22 @@ function useHoverFloatingInteraction(context, parameters = {}) {
     closeDelay: closeDelayProp = 0
   } = parameters;
   const instance = useHoverInteractionSharedState(store);
-  const tree = ScrollAreaViewport.useFloatingTree();
-  const parentId = ScrollAreaViewport.useFloatingParentNodeId();
-  const isClickLikeOpenEvent$1 = clamp.useStableCallback(() => {
+  const tree = InternalBackdrop.useFloatingTree();
+  const parentId = InternalBackdrop.useFloatingParentNodeId();
+  const isClickLikeOpenEvent$1 = useButton.useStableCallback(() => {
     return isClickLikeOpenEvent(dataRef.current.openEvent?.type, instance.interactedInside);
   });
-  const isHoverOpen = clamp.useStableCallback(() => {
+  const isHoverOpen = useButton.useStableCallback(() => {
     const type = dataRef.current.openEvent?.type;
     return type?.includes('mouse') && type !== 'mousedown';
   });
-  const isRelatedTargetInsideEnabledTrigger = clamp.useStableCallback(target => {
-    return clamp.isTargetInsideEnabledTrigger(target, store.context.triggerElements);
+  const isRelatedTargetInsideEnabledTrigger = useButton.useStableCallback(target => {
+    return useButton.isTargetInsideEnabledTrigger(target, store.context.triggerElements);
   });
   const closeWithDelay = React__namespace.useCallback(event => {
     const closeDelay = getDelay(closeDelayProp, 'close', instance.pointerType);
     const close = () => {
-      store.setOpen(false, clamp.createChangeEventDetails(clamp.triggerHover, event));
+      store.setOpen(false, useButton.createChangeEventDetails(useButton.triggerHover, event));
       tree?.events.emit('floating.closed', event);
     };
     if (closeDelay) {
@@ -485,18 +329,18 @@ function useHoverFloatingInteraction(context, parameters = {}) {
       close();
     }
   }, [closeDelayProp, store, instance, tree]);
-  const clearPointerEvents = clamp.useStableCallback(() => {
+  const clearPointerEvents = useButton.useStableCallback(() => {
     clearSafePolygonPointerEventsMutation(instance);
   });
-  const handleInteractInside = clamp.useStableCallback(event => {
-    const target = clamp.getTarget(event);
+  const handleInteractInside = useButton.useStableCallback(event => {
+    const target = useButton.getTarget(event);
     if (!isInteractiveElement(target)) {
       instance.interactedInside = false;
       return;
     }
     instance.interactedInside = target?.closest('[aria-haspopup]') != null;
   });
-  clamp.useIsoLayoutEffect(() => {
+  useButton.useIsoLayoutEffect(() => {
     if (!open) {
       instance.pointerType = undefined;
       instance.restTimeoutPending = false;
@@ -507,14 +351,14 @@ function useHoverFloatingInteraction(context, parameters = {}) {
   React__namespace.useEffect(() => {
     return clearPointerEvents;
   }, [clearPointerEvents]);
-  clamp.useIsoLayoutEffect(() => {
+  useButton.useIsoLayoutEffect(() => {
     if (!enabled) {
       return undefined;
     }
     if (open && instance.handleCloseOptions?.blockPointerEvents && isHoverOpen() && floatingUi_utils_dom.isElement(domReferenceElement) && floatingElement) {
       const ref = domReferenceElement;
       const floatingEl = floatingElement;
-      const doc = clamp.ownerDocument(floatingElement);
+      const doc = useButton.ownerDocument(floatingElement);
       const parentFloating = tree?.nodesRef.current.find(node => node.id === parentId)?.context?.elements.floating;
       if (parentFloating) {
         parentFloating.style.pointerEvents = '';
@@ -531,7 +375,7 @@ function useHoverFloatingInteraction(context, parameters = {}) {
     }
     return undefined;
   }, [enabled, open, domReferenceElement, floatingElement, instance, isHoverOpen, tree, parentId, clearPointerEvents]);
-  const childClosedTimeout = clamp.useTimeout();
+  const childClosedTimeout = useButton.useTimeout();
   React__namespace.useEffect(() => {
     if (!enabled) {
       return undefined;
@@ -543,7 +387,7 @@ function useHoverFloatingInteraction(context, parameters = {}) {
       clearPointerEvents();
     }
     function onFloatingMouseLeave(event) {
-      if (tree && parentId && ScrollAreaViewport.getNodeChildren(tree.nodesRef.current, parentId).length > 0) {
+      if (tree && parentId && InternalBackdrop.getNodeChildren(tree.nodesRef.current, parentId).length > 0) {
         tree.events.on('floating.closed', onNodeClosed);
         return;
       }
@@ -564,13 +408,13 @@ function useHoverFloatingInteraction(context, parameters = {}) {
       }
     }
     function onNodeClosed(event) {
-      if (!tree || !parentId || ScrollAreaViewport.getNodeChildren(tree.nodesRef.current, parentId).length > 0) {
+      if (!tree || !parentId || InternalBackdrop.getNodeChildren(tree.nodesRef.current, parentId).length > 0) {
         return;
       }
       // Allow the mouseenter event to fire in case child was closed because mouse moved into parent.
       childClosedTimeout.start(0, () => {
         tree.events.off('floating.closed', onNodeClosed);
-        store.setOpen(false, clamp.createChangeEventDetails(clamp.triggerHover, event));
+        store.setOpen(false, useButton.createChangeEventDetails(useButton.triggerHover, event));
         tree.events.emit('floating.closed', event);
       });
     }
@@ -617,28 +461,28 @@ function useHoverReferenceInteraction(context, props = {}) {
     isActiveTrigger = true,
     getHandleCloseContext
   } = props;
-  const tree = ScrollAreaViewport.useFloatingTree(externalTree);
+  const tree = InternalBackdrop.useFloatingTree(externalTree);
   const instance = useHoverInteractionSharedState(store);
-  const handleCloseRef = clamp.useValueAsRef(handleClose);
-  const delayRef = clamp.useValueAsRef(delay);
-  const restMsRef = clamp.useValueAsRef(restMs);
-  const enabledRef = clamp.useValueAsRef(enabled);
+  const handleCloseRef = useButton.useValueAsRef(handleClose);
+  const delayRef = useButton.useValueAsRef(delay);
+  const restMsRef = useButton.useValueAsRef(restMs);
+  const enabledRef = useButton.useValueAsRef(enabled);
   if (isActiveTrigger) {
     // eslint-disable-next-line no-underscore-dangle
     instance.handleCloseOptions = handleCloseRef.current?.__options;
   }
-  const isClickLikeOpenEvent$1 = clamp.useStableCallback(() => {
+  const isClickLikeOpenEvent$1 = useButton.useStableCallback(() => {
     return isClickLikeOpenEvent(dataRef.current.openEvent?.type, instance.interactedInside);
   });
-  const isRelatedTargetInsideEnabledTrigger = clamp.useStableCallback(target => {
-    return clamp.isTargetInsideEnabledTrigger(target, store.context.triggerElements);
+  const isRelatedTargetInsideEnabledTrigger = useButton.useStableCallback(target => {
+    return useButton.isTargetInsideEnabledTrigger(target, store.context.triggerElements);
   });
-  const isOverInactiveTrigger = clamp.useStableCallback((currentDomReference, currentTarget, target) => {
+  const isOverInactiveTrigger = useButton.useStableCallback((currentDomReference, currentTarget, target) => {
     const allTriggers = store.context.triggerElements;
 
     // Fast path for normal usage where handlers are attached directly to triggers.
     if (allTriggers.hasElement(currentTarget)) {
-      return !currentDomReference || !clamp.contains(currentDomReference, currentTarget);
+      return !currentDomReference || !useButton.contains(currentDomReference, currentTarget);
     }
 
     // Fallback for delegated/wrapper usage where currentTarget may be outside the trigger map.
@@ -646,31 +490,31 @@ function useHoverReferenceInteraction(context, props = {}) {
       return false;
     }
     const targetElement = target;
-    return allTriggers.hasMatchingElement(trigger => clamp.contains(trigger, targetElement)) && (!currentDomReference || !clamp.contains(currentDomReference, targetElement));
+    return allTriggers.hasMatchingElement(trigger => useButton.contains(trigger, targetElement)) && (!currentDomReference || !useButton.contains(currentDomReference, targetElement));
   });
   const closeWithDelay = React__namespace.useCallback((event, runElseBranch = true) => {
     const closeDelay = getDelay(delayRef.current, 'close', instance.pointerType);
     if (closeDelay) {
       instance.openChangeTimeout.start(closeDelay, () => {
-        store.setOpen(false, clamp.createChangeEventDetails(clamp.triggerHover, event));
+        store.setOpen(false, useButton.createChangeEventDetails(useButton.triggerHover, event));
         tree?.events.emit('floating.closed', event);
       });
     } else if (runElseBranch) {
       instance.openChangeTimeout.clear();
-      store.setOpen(false, clamp.createChangeEventDetails(clamp.triggerHover, event));
+      store.setOpen(false, useButton.createChangeEventDetails(useButton.triggerHover, event));
       tree?.events.emit('floating.closed', event);
     }
   }, [delayRef, store, instance, tree]);
-  const cleanupMouseMoveHandler = clamp.useStableCallback(() => {
+  const cleanupMouseMoveHandler = useButton.useStableCallback(() => {
     if (!instance.handler) {
       return;
     }
-    const doc = clamp.ownerDocument(store.select('domReferenceElement'));
+    const doc = useButton.ownerDocument(store.select('domReferenceElement'));
     doc.removeEventListener('mousemove', instance.handler);
     instance.handler = undefined;
   });
   React__namespace.useEffect(() => cleanupMouseMoveHandler, [cleanupMouseMoveHandler]);
-  const clearPointerEvents = clamp.useStableCallback(() => {
+  const clearPointerEvents = useButton.useStableCallback(() => {
     clearSafePolygonPointerEventsMutation(instance);
   });
 
@@ -705,7 +549,7 @@ function useHoverReferenceInteraction(context, props = {}) {
     function onMouseEnter(event) {
       instance.openChangeTimeout.clear();
       instance.blockMouseMove = false;
-      if (mouseOnly && !clamp.isMouseLikePointerType(instance.pointerType)) {
+      if (mouseOnly && !useButton.isMouseLikePointerType(instance.pointerType)) {
         return;
       }
 
@@ -724,15 +568,15 @@ function useHoverReferenceInteraction(context, props = {}) {
 
       // When moving between triggers while already open, open immediately without delay
       if (isOverInactive && isOpen) {
-        store.setOpen(true, clamp.createChangeEventDetails(clamp.triggerHover, event, triggerNode));
+        store.setOpen(true, useButton.createChangeEventDetails(useButton.triggerHover, event, triggerNode));
       } else if (openDelay) {
         instance.openChangeTimeout.start(openDelay, () => {
           if (shouldOpen) {
-            store.setOpen(true, clamp.createChangeEventDetails(clamp.triggerHover, event, triggerNode));
+            store.setOpen(true, useButton.createChangeEventDetails(useButton.triggerHover, event, triggerNode));
           }
         });
       } else if (shouldOpen) {
-        store.setOpen(true, clamp.createChangeEventDetails(clamp.triggerHover, event, triggerNode));
+        store.setOpen(true, useButton.createChangeEventDetails(useButton.triggerHover, event, triggerNode));
       }
     }
     function onMouseLeave(event) {
@@ -742,7 +586,7 @@ function useHoverReferenceInteraction(context, props = {}) {
       }
       cleanupMouseMoveHandler();
       const domReferenceElement = store.select('domReferenceElement');
-      const doc = clamp.ownerDocument(domReferenceElement);
+      const doc = useButton.ownerDocument(domReferenceElement);
       instance.restTimeout.clear();
       instance.restTimeoutPending = false;
       const handleCloseContextBase = dataRef.current.floatingContext ?? getHandleCloseContext?.();
@@ -772,7 +616,7 @@ function useHoverReferenceInteraction(context, props = {}) {
         instance.handler(event);
         return;
       }
-      const shouldClose = instance.pointerType === 'touch' ? !clamp.contains(store.select('floatingElement'), event.relatedTarget) : true;
+      const shouldClose = instance.pointerType === 'touch' ? !useButton.contains(store.select('floatingElement'), event.relatedTarget) : true;
       if (shouldClose) {
         closeWithDelay(event);
       }
@@ -810,7 +654,7 @@ function useHoverReferenceInteraction(context, props = {}) {
         const currentDomReference = store.select('domReferenceElement');
         const currentOpen = store.select('open');
         const isOverInactive = isOverInactiveTrigger(currentDomReference, trigger, event.target);
-        if (mouseOnly && !clamp.isMouseLikePointerType(instance.pointerType)) {
+        if (mouseOnly && !useButton.isMouseLikePointerType(instance.pointerType)) {
           return;
         }
         const restMsValue = getRestMs(restMsRef.current);
@@ -831,7 +675,7 @@ function useHoverReferenceInteraction(context, props = {}) {
           }
           const latestOpen = store.select('open');
           if (!instance.blockMouseMove && (!latestOpen || isOverInactive)) {
-            store.setOpen(true, clamp.createChangeEventDetails(clamp.triggerHover, nativeEvent, trigger));
+            store.setOpen(true, useButton.createChangeEventDetails(useButton.triggerHover, nativeEvent, trigger));
           }
         }
         if (instance.pointerType === 'touch') {
@@ -849,756 +693,6 @@ function useHoverReferenceInteraction(context, props = {}) {
   }, [enabled, instance, isClickLikeOpenEvent$1, isOverInactiveTrigger, mouseOnly, store, restMsRef]);
 }
 
-const ESCAPE = 'Escape';
-function doSwitch(orientation, vertical, horizontal) {
-  switch (orientation) {
-    case 'vertical':
-      return vertical;
-    case 'horizontal':
-      return horizontal;
-    default:
-      return vertical || horizontal;
-  }
-}
-function isMainOrientationKey(key, orientation) {
-  const vertical = key === clamp.ARROW_UP || key === clamp.ARROW_DOWN;
-  const horizontal = key === clamp.ARROW_LEFT || key === clamp.ARROW_RIGHT;
-  return doSwitch(orientation, vertical, horizontal);
-}
-function isMainOrientationToEndKey(key, orientation, rtl) {
-  const vertical = key === clamp.ARROW_DOWN;
-  const horizontal = rtl ? key === clamp.ARROW_LEFT : key === clamp.ARROW_RIGHT;
-  return doSwitch(orientation, vertical, horizontal) || key === 'Enter' || key === ' ' || key === '';
-}
-function isCrossOrientationOpenKey(key, orientation, rtl) {
-  const vertical = rtl ? key === clamp.ARROW_LEFT : key === clamp.ARROW_RIGHT;
-  const horizontal = key === clamp.ARROW_DOWN;
-  return doSwitch(orientation, vertical, horizontal);
-}
-function isCrossOrientationCloseKey(key, orientation, rtl, cols) {
-  const vertical = rtl ? key === clamp.ARROW_RIGHT : key === clamp.ARROW_LEFT;
-  const horizontal = key === clamp.ARROW_UP;
-  if (orientation === 'both' || orientation === 'horizontal' && cols && cols > 1) {
-    return key === ESCAPE;
-  }
-  return doSwitch(orientation, vertical, horizontal);
-}
-/**
- * Adds arrow key-based navigation of a list of items, either using real DOM
- * focus or virtual focus.
- * @see https://floating-ui.com/docs/useListNavigation
- */
-function useListNavigation(context, props) {
-  const store = 'rootStore' in context ? context.rootStore : context;
-  const open = store.useState('open');
-  const floatingElement = store.useState('floatingElement');
-  const domReferenceElement = store.useState('domReferenceElement');
-  const dataRef = store.context.dataRef;
-  const {
-    listRef,
-    activeIndex,
-    onNavigate: onNavigateProp = () => {},
-    enabled = true,
-    selectedIndex = null,
-    allowEscape = false,
-    loopFocus = false,
-    nested = false,
-    rtl = false,
-    virtual = false,
-    focusItemOnOpen = 'auto',
-    focusItemOnHover = true,
-    openOnArrowKeyDown = true,
-    disabledIndices = undefined,
-    orientation = 'vertical',
-    parentOrientation,
-    cols = 1,
-    id,
-    resetOnPointerLeave = true,
-    externalTree
-  } = props;
-  if (process.env.NODE_ENV !== 'production') {
-    if (allowEscape) {
-      if (!loopFocus) {
-        console.warn('`useListNavigation` looping must be enabled to allow escaping.');
-      }
-      if (!virtual) {
-        console.warn('`useListNavigation` must be virtual to allow escaping.');
-      }
-    }
-    if (orientation === 'vertical' && cols > 1) {
-      console.warn('In grid list navigation mode (`cols` > 1), the `orientation` should', 'be either "horizontal" or "both".');
-    }
-  }
-  const floatingFocusElement = clamp.getFloatingFocusElement(floatingElement);
-  const floatingFocusElementRef = clamp.useValueAsRef(floatingFocusElement);
-  const parentId = ScrollAreaViewport.useFloatingParentNodeId();
-  const tree = ScrollAreaViewport.useFloatingTree(externalTree);
-  clamp.useIsoLayoutEffect(() => {
-    dataRef.current.orientation = orientation;
-  }, [dataRef, orientation]);
-  const typeableComboboxReference = clamp.isTypeableCombobox(domReferenceElement);
-  const focusItemOnOpenRef = React__namespace.useRef(focusItemOnOpen);
-  const indexRef = React__namespace.useRef(selectedIndex ?? -1);
-  const keyRef = React__namespace.useRef(null);
-  const isPointerModalityRef = React__namespace.useRef(true);
-  const onNavigate = clamp.useStableCallback(event => {
-    onNavigateProp(indexRef.current === -1 ? null : indexRef.current, event);
-  });
-  const previousOnNavigateRef = React__namespace.useRef(onNavigate);
-  const previousMountedRef = React__namespace.useRef(!!floatingElement);
-  const previousOpenRef = React__namespace.useRef(open);
-  const forceSyncFocusRef = React__namespace.useRef(false);
-  const forceScrollIntoViewRef = React__namespace.useRef(false);
-  const disabledIndicesRef = clamp.useValueAsRef(disabledIndices);
-  const latestOpenRef = clamp.useValueAsRef(open);
-  const selectedIndexRef = clamp.useValueAsRef(selectedIndex);
-  const resetOnPointerLeaveRef = clamp.useValueAsRef(resetOnPointerLeave);
-  const focusItem = clamp.useStableCallback(() => {
-    function runFocus(item) {
-      if (virtual) {
-        tree?.events.emit('virtualfocus', item);
-      } else {
-        ScrollAreaViewport.enqueueFocus(item, {
-          sync: forceSyncFocusRef.current,
-          preventScroll: true
-        });
-      }
-    }
-    const initialItem = listRef.current[indexRef.current];
-    const forceScrollIntoView = forceScrollIntoViewRef.current;
-    if (initialItem) {
-      runFocus(initialItem);
-    }
-    const scheduler = forceSyncFocusRef.current ? v => v() : requestAnimationFrame;
-    scheduler(() => {
-      const waitedItem = listRef.current[indexRef.current] || initialItem;
-      if (!waitedItem) {
-        return;
-      }
-      if (!initialItem) {
-        runFocus(waitedItem);
-      }
-      const shouldScrollIntoView =
-      // eslint-disable-next-line @typescript-eslint/no-use-before-define
-      item && (forceScrollIntoView || !isPointerModalityRef.current);
-      if (shouldScrollIntoView) {
-        // JSDOM doesn't support `.scrollIntoView()` but it's widely supported
-        // by all browsers.
-        waitedItem.scrollIntoView?.({
-          block: 'nearest',
-          inline: 'nearest'
-        });
-      }
-    });
-  });
-
-  // Sync `selectedIndex` to be the `activeIndex` upon opening the floating
-  // element. Also, reset `activeIndex` upon closing the floating element.
-  clamp.useIsoLayoutEffect(() => {
-    if (!enabled) {
-      return;
-    }
-    if (open && floatingElement) {
-      indexRef.current = selectedIndex ?? -1;
-      if (focusItemOnOpenRef.current && selectedIndex != null) {
-        // Regardless of the pointer modality, we want to ensure the selected
-        // item comes into view when the floating element is opened.
-        forceScrollIntoViewRef.current = true;
-        onNavigate();
-      }
-    } else if (previousMountedRef.current) {
-      // Since the user can specify `onNavigate` conditionally
-      // (onNavigate: open ? setActiveIndex : setSelectedIndex),
-      // we store and call the previous function.
-      indexRef.current = -1;
-      previousOnNavigateRef.current();
-    }
-  }, [enabled, open, floatingElement, selectedIndex, onNavigate]);
-
-  // Sync `activeIndex` to be the focused item while the floating element is
-  // open.
-  clamp.useIsoLayoutEffect(() => {
-    if (!enabled) {
-      return;
-    }
-    if (!open) {
-      forceSyncFocusRef.current = false;
-      return;
-    }
-    if (!floatingElement) {
-      return;
-    }
-    if (activeIndex == null) {
-      forceSyncFocusRef.current = false;
-      if (selectedIndexRef.current != null) {
-        return;
-      }
-
-      // Reset while the floating element was open (e.g. the list changed).
-      if (previousMountedRef.current) {
-        indexRef.current = -1;
-        focusItem();
-      }
-
-      // Initial sync.
-      if ((!previousOpenRef.current || !previousMountedRef.current) && focusItemOnOpenRef.current && (keyRef.current != null || focusItemOnOpenRef.current === true && keyRef.current == null)) {
-        let runs = 0;
-        const waitForListPopulated = () => {
-          if (listRef.current[0] == null) {
-            // Avoid letting the browser paint if possible on the first try,
-            // otherwise use rAF. Don't try more than twice, since something
-            // is wrong otherwise.
-            if (runs < 2) {
-              const scheduler = runs ? requestAnimationFrame : queueMicrotask;
-              scheduler(waitForListPopulated);
-            }
-            runs += 1;
-          } else {
-            // initially focus the first non-disabled item
-            indexRef.current = keyRef.current == null || isMainOrientationToEndKey(keyRef.current, orientation, rtl) || nested ? ScrollAreaViewport.getMinListIndex(listRef) : ScrollAreaViewport.getMaxListIndex(listRef);
-            keyRef.current = null;
-            onNavigate();
-          }
-        };
-        waitForListPopulated();
-      }
-    } else if (!ScrollAreaViewport.isIndexOutOfListBounds(listRef, activeIndex)) {
-      indexRef.current = activeIndex;
-      focusItem();
-      forceScrollIntoViewRef.current = false;
-    }
-  }, [enabled, open, floatingElement, activeIndex, selectedIndexRef, nested, listRef, orientation, rtl, onNavigate, focusItem, disabledIndicesRef]);
-
-  // Ensure the parent floating element has focus when a nested child closes
-  // to allow arrow key navigation to work after the pointer leaves the child.
-  clamp.useIsoLayoutEffect(() => {
-    if (!enabled || floatingElement || !tree || virtual || !previousMountedRef.current) {
-      return;
-    }
-    const nodes = tree.nodesRef.current;
-    const parent = nodes.find(node => node.id === parentId)?.context?.elements.floating;
-    const activeEl = clamp.activeElement(clamp.ownerDocument(floatingElement));
-    const treeContainsActiveEl = nodes.some(node => node.context && clamp.contains(node.context.elements.floating, activeEl));
-    if (parent && !treeContainsActiveEl && isPointerModalityRef.current) {
-      parent.focus({
-        preventScroll: true
-      });
-    }
-  }, [enabled, floatingElement, tree, parentId, virtual]);
-  clamp.useIsoLayoutEffect(() => {
-    previousOnNavigateRef.current = onNavigate;
-    previousOpenRef.current = open;
-    previousMountedRef.current = !!floatingElement;
-  });
-  clamp.useIsoLayoutEffect(() => {
-    if (!open) {
-      keyRef.current = null;
-      focusItemOnOpenRef.current = focusItemOnOpen;
-    }
-  }, [open, focusItemOnOpen]);
-  const hasActiveIndex = activeIndex != null;
-  const item = React__namespace.useMemo(() => {
-    function syncCurrentTarget(event) {
-      if (!latestOpenRef.current) {
-        return;
-      }
-      const index = listRef.current.indexOf(event.currentTarget);
-      if (index !== -1 && indexRef.current !== index) {
-        indexRef.current = index;
-        onNavigate(event);
-      }
-    }
-    const itemProps = {
-      onFocus(event) {
-        forceSyncFocusRef.current = true;
-        syncCurrentTarget(event);
-      },
-      onClick: ({
-        currentTarget
-      }) => currentTarget.focus({
-        preventScroll: true
-      }),
-      // Safari
-      onMouseMove(event) {
-        forceSyncFocusRef.current = true;
-        forceScrollIntoViewRef.current = false;
-        if (focusItemOnHover) {
-          syncCurrentTarget(event);
-        }
-      },
-      onPointerLeave(event) {
-        if (!latestOpenRef.current || !isPointerModalityRef.current || event.pointerType === 'touch') {
-          return;
-        }
-        forceSyncFocusRef.current = true;
-        const relatedTarget = event.relatedTarget;
-        if (!focusItemOnHover || listRef.current.includes(relatedTarget)) {
-          return;
-        }
-        if (!resetOnPointerLeaveRef.current) {
-          return;
-        }
-        ScrollAreaViewport.enqueueFocus(null, {
-          sync: true
-        });
-        indexRef.current = -1;
-        onNavigate(event);
-        if (!virtual) {
-          const floatingFocusEl = floatingFocusElementRef.current;
-          const activeEl = clamp.activeElement(clamp.ownerDocument(floatingFocusEl));
-          if (floatingFocusEl && clamp.contains(floatingFocusEl, activeEl)) {
-            floatingFocusEl.focus({
-              preventScroll: true
-            });
-          }
-        }
-      }
-    };
-    return itemProps;
-  }, [latestOpenRef, floatingFocusElementRef, focusItemOnHover, listRef, onNavigate, resetOnPointerLeaveRef, virtual]);
-  const getParentOrientation = React__namespace.useCallback(() => {
-    return parentOrientation ?? tree?.nodesRef.current.find(node => node.id === parentId)?.context?.dataRef?.current.orientation;
-  }, [parentId, tree, parentOrientation]);
-  const commonOnKeyDown = clamp.useStableCallback(event => {
-    isPointerModalityRef.current = false;
-    forceSyncFocusRef.current = true;
-
-    // When composing a character, Chrome fires ArrowDown twice. Firefox/Safari
-    // don't appear to suffer from this. `event.isComposing` is avoided due to
-    // Safari not supporting it properly (although it's not needed in the first
-    // place for Safari, just avoiding any possible issues).
-    if (event.which === 229) {
-      return;
-    }
-
-    // If the floating element is animating out, ignore navigation. Otherwise,
-    // the `activeIndex` gets set to 0 despite not being open so the next time
-    // the user ArrowDowns, the first item won't be focused.
-    if (!latestOpenRef.current && event.currentTarget === floatingFocusElementRef.current) {
-      return;
-    }
-    if (nested && isCrossOrientationCloseKey(event.key, orientation, rtl, cols)) {
-      // If the nested list's close key is also the parent navigation key,
-      // let the parent navigate. Otherwise, stop propagating the event.
-      if (!isMainOrientationKey(event.key, getParentOrientation())) {
-        clamp.stopEvent(event);
-      }
-      store.setOpen(false, clamp.createChangeEventDetails(clamp.listNavigation, event.nativeEvent));
-      if (floatingUi_utils_dom.isHTMLElement(domReferenceElement)) {
-        if (virtual) {
-          tree?.events.emit('virtualfocus', domReferenceElement);
-        } else {
-          domReferenceElement.focus();
-        }
-      }
-      return;
-    }
-    const currentIndex = indexRef.current;
-    const minIndex = ScrollAreaViewport.getMinListIndex(listRef, disabledIndices);
-    const maxIndex = ScrollAreaViewport.getMaxListIndex(listRef, disabledIndices);
-    if (!typeableComboboxReference) {
-      if (event.key === 'Home') {
-        clamp.stopEvent(event);
-        indexRef.current = minIndex;
-        onNavigate(event);
-      }
-      if (event.key === 'End') {
-        clamp.stopEvent(event);
-        indexRef.current = maxIndex;
-        onNavigate(event);
-      }
-    }
-
-    // Grid navigation.
-    if (cols > 1) {
-      const sizes = Array.from({
-        length: listRef.current.length
-      }, () => ({
-        width: 1,
-        height: 1
-      }));
-      // To calculate movements on the grid, we use hypothetical cell indices
-      // as if every item was 1x1, then convert back to real indices.
-      const cellMap = ScrollAreaViewport.createGridCellMap(sizes, cols);
-      const minGridIndex = cellMap.findIndex(index => index != null && !ScrollAreaViewport.isListIndexDisabled(listRef, index, disabledIndices));
-      // last enabled index
-      const maxGridIndex = cellMap.reduce((foundIndex, index, cellIndex) => index != null && !ScrollAreaViewport.isListIndexDisabled(listRef, index, disabledIndices) ? cellIndex : foundIndex, -1);
-      const index = cellMap[ScrollAreaViewport.getGridNavigatedIndex({
-        current: cellMap.map(itemIndex => itemIndex != null ? listRef.current[itemIndex] : null)
-      }, {
-        event,
-        orientation,
-        loopFocus,
-        rtl,
-        cols,
-        // treat undefined (empty grid spaces) as disabled indices so we
-        // don't end up in them
-        disabledIndices: ScrollAreaViewport.getGridCellIndices([...((typeof disabledIndices !== 'function' ? disabledIndices : null) || listRef.current.map((_, listIndex) => ScrollAreaViewport.isListIndexDisabled(listRef, listIndex, disabledIndices) ? listIndex : undefined)), undefined], cellMap),
-        minIndex: minGridIndex,
-        maxIndex: maxGridIndex,
-        prevIndex: ScrollAreaViewport.getGridCellIndexOfCorner(indexRef.current > maxIndex ? minIndex : indexRef.current, sizes, cellMap, cols,
-        // use a corner matching the edge closest to the direction
-        // we're moving in so we don't end up in the same item. Prefer
-        // top/left over bottom/right.
-        // eslint-disable-next-line no-nested-ternary
-        event.key === clamp.ARROW_DOWN ? 'bl' : event.key === (rtl ? clamp.ARROW_LEFT : clamp.ARROW_RIGHT) ? 'tr' : 'tl'),
-        stopEvent: true
-      })];
-      if (index != null) {
-        indexRef.current = index;
-        onNavigate(event);
-      }
-      if (orientation === 'both') {
-        return;
-      }
-    }
-    if (isMainOrientationKey(event.key, orientation)) {
-      clamp.stopEvent(event);
-
-      // Reset the index if no item is focused.
-      if (open && !virtual && clamp.activeElement(event.currentTarget.ownerDocument) === event.currentTarget) {
-        indexRef.current = isMainOrientationToEndKey(event.key, orientation, rtl) ? minIndex : maxIndex;
-        onNavigate(event);
-        return;
-      }
-      if (isMainOrientationToEndKey(event.key, orientation, rtl)) {
-        if (loopFocus) {
-          if (currentIndex >= maxIndex) {
-            if (allowEscape && currentIndex !== listRef.current.length) {
-              indexRef.current = -1;
-            } else {
-              // Give time for virtualizers to update the listRef.
-              forceSyncFocusRef.current = false;
-              indexRef.current = minIndex;
-            }
-          } else {
-            indexRef.current = ScrollAreaViewport.findNonDisabledListIndex(listRef, {
-              startingIndex: currentIndex,
-              disabledIndices
-            });
-          }
-        } else {
-          indexRef.current = Math.min(maxIndex, ScrollAreaViewport.findNonDisabledListIndex(listRef, {
-            startingIndex: currentIndex,
-            disabledIndices
-          }));
-        }
-      } else if (loopFocus) {
-        if (currentIndex <= minIndex) {
-          if (allowEscape && currentIndex !== -1) {
-            indexRef.current = listRef.current.length;
-          } else {
-            // Give time for virtualizers to update the listRef.
-            forceSyncFocusRef.current = false;
-            indexRef.current = maxIndex;
-          }
-        } else {
-          indexRef.current = ScrollAreaViewport.findNonDisabledListIndex(listRef, {
-            startingIndex: currentIndex,
-            decrement: true,
-            disabledIndices
-          });
-        }
-      } else {
-        indexRef.current = Math.max(minIndex, ScrollAreaViewport.findNonDisabledListIndex(listRef, {
-          startingIndex: currentIndex,
-          decrement: true,
-          disabledIndices
-        }));
-      }
-      if (ScrollAreaViewport.isIndexOutOfListBounds(listRef, indexRef.current)) {
-        indexRef.current = -1;
-      }
-      onNavigate(event);
-    }
-  });
-  const ariaActiveDescendantProp = React__namespace.useMemo(() => {
-    return virtual && open && hasActiveIndex && {
-      'aria-activedescendant': `${id}-${activeIndex}`
-    };
-  }, [virtual, open, hasActiveIndex, id, activeIndex]);
-  const floating = React__namespace.useMemo(() => {
-    return {
-      'aria-orientation': orientation === 'both' ? undefined : orientation,
-      ...(!typeableComboboxReference ? ariaActiveDescendantProp : {}),
-      onKeyDown(event) {
-        // Close submenu on Shift+Tab
-        if (event.key === 'Tab' && event.shiftKey && open && !virtual) {
-          // If the event originated from within a nested element (e.g., a Dialog opened from
-          // within the menu), don't close the menu. The nested element has its own focus
-          // management and should handle the Tab key.
-          const target = clamp.getTarget(event.nativeEvent);
-          if (target && !clamp.contains(floatingFocusElementRef.current, target)) {
-            return;
-          }
-          clamp.stopEvent(event);
-          store.setOpen(false, clamp.createChangeEventDetails(clamp.focusOut, event.nativeEvent));
-          if (floatingUi_utils_dom.isHTMLElement(domReferenceElement)) {
-            domReferenceElement.focus();
-          }
-          return;
-        }
-        commonOnKeyDown(event);
-      },
-      onPointerMove() {
-        isPointerModalityRef.current = true;
-      }
-    };
-  }, [ariaActiveDescendantProp, commonOnKeyDown, floatingFocusElementRef, orientation, typeableComboboxReference, store, open, virtual, domReferenceElement]);
-  const trigger = React__namespace.useMemo(() => {
-    function checkVirtualMouse(event) {
-      if (focusItemOnOpen === 'auto' && clamp.isVirtualClick(event.nativeEvent)) {
-        focusItemOnOpenRef.current = !virtual;
-      }
-    }
-    function checkVirtualPointer(event) {
-      // `pointerdown` fires first, reset the state then perform the checks.
-      focusItemOnOpenRef.current = focusItemOnOpen;
-      if (focusItemOnOpen === 'auto' && clamp.isVirtualPointerEvent(event.nativeEvent)) {
-        focusItemOnOpenRef.current = true;
-      }
-    }
-    return {
-      onKeyDown(event) {
-        // non-reactive open state (to prevent re-creation of the handler)
-        const currentOpen = store.select('open');
-        isPointerModalityRef.current = false;
-        const isArrowKey = event.key.startsWith('Arrow');
-        const isParentCrossOpenKey = isCrossOrientationOpenKey(event.key, getParentOrientation(), rtl);
-        const isMainKey = isMainOrientationKey(event.key, orientation);
-        const isNavigationKey = (nested ? isParentCrossOpenKey : isMainKey) || event.key === 'Enter' || event.key.trim() === '';
-        if (virtual && currentOpen) {
-          return commonOnKeyDown(event);
-        }
-
-        // If a floating element should not open on arrow key down, avoid
-        // setting `activeIndex` while it's closed.
-        if (!currentOpen && !openOnArrowKeyDown && isArrowKey) {
-          return undefined;
-        }
-        if (isNavigationKey) {
-          const isParentMainKey = isMainOrientationKey(event.key, getParentOrientation());
-          keyRef.current = nested && isParentMainKey ? null : event.key;
-        }
-        if (nested) {
-          if (isParentCrossOpenKey) {
-            clamp.stopEvent(event);
-            if (currentOpen) {
-              indexRef.current = ScrollAreaViewport.getMinListIndex(listRef, disabledIndicesRef.current);
-              onNavigate(event);
-            } else {
-              store.setOpen(true, clamp.createChangeEventDetails(clamp.listNavigation, event.nativeEvent, event.currentTarget));
-            }
-          }
-          return undefined;
-        }
-        if (isMainKey) {
-          if (selectedIndexRef.current != null) {
-            indexRef.current = selectedIndexRef.current;
-          }
-          clamp.stopEvent(event);
-          if (!currentOpen && openOnArrowKeyDown) {
-            store.setOpen(true, clamp.createChangeEventDetails(clamp.listNavigation, event.nativeEvent, event.currentTarget));
-          } else {
-            commonOnKeyDown(event);
-          }
-          if (currentOpen) {
-            onNavigate(event);
-          }
-        }
-        return undefined;
-      },
-      onFocus(event) {
-        if (store.select('open') && !virtual) {
-          indexRef.current = -1;
-          onNavigate(event);
-        }
-      },
-      onPointerDown: checkVirtualPointer,
-      onPointerEnter: checkVirtualPointer,
-      onMouseDown: checkVirtualMouse,
-      onClick: checkVirtualMouse
-    };
-  }, [commonOnKeyDown, disabledIndicesRef, focusItemOnOpen, listRef, nested, onNavigate, store, openOnArrowKeyDown, orientation, getParentOrientation, rtl, selectedIndexRef, virtual]);
-  const reference = React__namespace.useMemo(() => {
-    return {
-      ...ariaActiveDescendantProp,
-      ...trigger
-    };
-  }, [ariaActiveDescendantProp, trigger]);
-  return React__namespace.useMemo(() => enabled ? {
-    reference,
-    floating,
-    item,
-    trigger
-  } : {}, [enabled, reference, floating, trigger, item]);
-}
-
-/**
- * Provides a matching callback that can be used to focus an item as the user
- * types, often used in tandem with `useListNavigation()`.
- * @see https://floating-ui.com/docs/useTypeahead
- */
-function useTypeahead(context, props) {
-  const store = 'rootStore' in context ? context.rootStore : context;
-  const dataRef = store.context.dataRef;
-  const open = store.useState('open');
-  const {
-    listRef,
-    elementsRef,
-    activeIndex,
-    onMatch: onMatchProp,
-    onTypingChange,
-    enabled = true,
-    resetMs = 750,
-    selectedIndex = null
-  } = props;
-  const timeout = clamp.useTimeout();
-  const stringRef = React__namespace.useRef('');
-  const prevIndexRef = React__namespace.useRef(selectedIndex ?? activeIndex ?? -1);
-  const matchIndexRef = React__namespace.useRef(null);
-  clamp.useIsoLayoutEffect(() => {
-    if (!open && selectedIndex !== null) {
-      return;
-    }
-    timeout.clear();
-    matchIndexRef.current = null;
-    if (stringRef.current !== '') {
-      stringRef.current = '';
-    }
-  }, [open, selectedIndex, timeout]);
-  clamp.useIsoLayoutEffect(() => {
-    // Sync arrow key navigation but not typeahead navigation.
-    if (open && stringRef.current === '') {
-      prevIndexRef.current = selectedIndex ?? activeIndex ?? -1;
-    }
-  }, [open, selectedIndex, activeIndex]);
-  const setTypingChange = clamp.useStableCallback(value => {
-    if (value) {
-      if (!dataRef.current.typing) {
-        dataRef.current.typing = value;
-        onTypingChange?.(value);
-      }
-    } else if (dataRef.current.typing) {
-      dataRef.current.typing = value;
-      onTypingChange?.(value);
-    }
-  });
-  const onKeyDown = clamp.useStableCallback(event => {
-    function isVisible(index) {
-      const element = elementsRef?.current[index];
-      return !element || ScrollAreaViewport.isElementVisible(element);
-    }
-    function getMatchingIndex(list, string, startIndex = 0) {
-      if (list.length === 0) {
-        return -1;
-      }
-      const normalizedStartIndex = (startIndex % list.length + list.length) % list.length;
-      const lowerString = string.toLocaleLowerCase();
-      for (let offset = 0; offset < list.length; offset += 1) {
-        const index = (normalizedStartIndex + offset) % list.length;
-        const text = list[index];
-        if (!text?.toLocaleLowerCase().startsWith(lowerString) || !isVisible(index)) {
-          continue;
-        }
-        return index;
-      }
-      return -1;
-    }
-    const listContent = listRef.current;
-    if (stringRef.current.length > 0 && event.key === ' ') {
-      // Space should continue the in-progress typeahead session.
-      clamp.stopEvent(event);
-      setTypingChange(true);
-    }
-    if (stringRef.current.length > 0 && stringRef.current[0] !== ' ') {
-      if (getMatchingIndex(listContent, stringRef.current) === -1 && event.key !== ' ') {
-        setTypingChange(false);
-      }
-    }
-    if (listContent == null ||
-    // Character key.
-    event.key.length !== 1 ||
-    // Modifier key.
-    event.ctrlKey || event.metaKey || event.altKey) {
-      return;
-    }
-    if (open && event.key !== ' ') {
-      clamp.stopEvent(event);
-      setTypingChange(true);
-    }
-
-    // Capture whether this is a new typing session before mutating the string.
-    const isNewSession = stringRef.current === '';
-    if (isNewSession) {
-      prevIndexRef.current = selectedIndex ?? activeIndex ?? -1;
-    }
-
-    // Bail out if the list contains a word like "llama" or "aaron". TODO:
-    // allow it in this case, too.
-    const allowRapidSuccessionOfFirstLetter = listContent.every(text => text ? text[0]?.toLocaleLowerCase() !== text[1]?.toLocaleLowerCase() : true);
-
-    // Allows the user to cycle through items that start with the same letter
-    // in rapid succession.
-    if (allowRapidSuccessionOfFirstLetter && stringRef.current === event.key) {
-      stringRef.current = '';
-      prevIndexRef.current = matchIndexRef.current;
-    }
-    stringRef.current += event.key;
-    timeout.start(resetMs, () => {
-      stringRef.current = '';
-      prevIndexRef.current = matchIndexRef.current;
-      setTypingChange(false);
-    });
-
-    // Compute the starting index for this search.
-    // If this is a new typing session (string is empty), base it on the current
-    // selection/active item; otherwise continue from the last matched index.
-    const prevIndex = isNewSession ? selectedIndex ?? activeIndex ?? -1 : prevIndexRef.current;
-    const startIndex = (prevIndex ?? 0) + 1;
-    const index = getMatchingIndex(listContent, stringRef.current, startIndex);
-    if (index !== -1) {
-      onMatchProp?.(index);
-      matchIndexRef.current = index;
-    } else if (event.key !== ' ') {
-      stringRef.current = '';
-      setTypingChange(false);
-    }
-  });
-  const onBlur = clamp.useStableCallback(event => {
-    const next = event.relatedTarget;
-    const currentDomReferenceElement = store.select('domReferenceElement');
-    const currentFloatingElement = store.select('floatingElement');
-    const withinReference = clamp.contains(currentDomReferenceElement, next);
-    const withinFloating = clamp.contains(currentFloatingElement, next);
-
-    // Keep the session if focus moves within the composite (reference <-> floating).
-    if (withinReference || withinFloating) {
-      return;
-    }
-
-    // End the current typing session when focus leaves the composite entirely.
-    timeout.clear();
-    stringRef.current = '';
-    prevIndexRef.current = matchIndexRef.current;
-    setTypingChange(false);
-  });
-  const reference = React__namespace.useMemo(() => ({
-    onKeyDown,
-    onBlur
-  }), [onKeyDown, onBlur]);
-  const floating = React__namespace.useMemo(() => {
-    return {
-      onKeyDown,
-      onBlur
-    };
-  }, [onKeyDown, onBlur]);
-  return React__namespace.useMemo(() => enabled ? {
-    reference,
-    floating
-  } : {}, [enabled, reference, floating]);
-}
-
 /* eslint-disable no-nested-ternary */
 
 const CURSOR_SPEED_THRESHOLD = 0.1;
@@ -1642,7 +736,7 @@ function safePolygon(options = {}) {
   const {
     blockPointerEvents = false
   } = options;
-  const timeout = new clamp.Timeout();
+  const timeout = new useButton.Timeout();
   const fn = ({
     x,
     y,
@@ -1690,10 +784,10 @@ function safePolygon(options = {}) {
         clientX,
         clientY
       } = event;
-      const target = clamp.getTarget(event);
+      const target = useButton.getTarget(event);
       const isLeave = event.type === 'mouseleave';
-      const isOverFloatingEl = clamp.contains(floating, target);
-      const isOverReferenceEl = clamp.contains(domReference, target);
+      const isOverFloatingEl = useButton.contains(floating, target);
+      const isOverReferenceEl = useButton.contains(domReference, target);
       if (isOverFloatingEl) {
         hasLanded = true;
         if (!isLeave) {
@@ -1710,11 +804,11 @@ function safePolygon(options = {}) {
 
       // Prevent overlapping floating element from being stuck in an open-close
       // loop: https://github.com/floating-ui/floating-ui/issues/1910
-      if (isLeave && floatingUi_utils_dom.isElement(event.relatedTarget) && clamp.contains(floating, event.relatedTarget)) {
+      if (isLeave && floatingUi_utils_dom.isElement(event.relatedTarget) && useButton.contains(floating, event.relatedTarget)) {
         return undefined;
       }
       function hasOpenChildNode() {
-        return Boolean(tree && ScrollAreaViewport.getNodeChildren(tree.nodesRef.current, nodeId).length > 0);
+        return Boolean(tree && InternalBackdrop.getNodeChildren(tree.nodesRef.current, nodeId).length > 0);
       }
       function closeIfNoOpenChild() {
         if (!hasOpenChildNode()) {
@@ -1840,852 +934,6 @@ function safePolygon(options = {}) {
   return fn;
 }
 
-function getPseudoElementBounds(element) {
-  const elementRect = element.getBoundingClientRect();
-
-  // Avoid "Not implemented: window.getComputedStyle(elt, pseudoElt)"
-  if (process.env.NODE_ENV !== 'production') {
-    return elementRect;
-  }
-  const beforeStyles = window.getComputedStyle(element, '::before');
-  const afterStyles = window.getComputedStyle(element, '::after');
-  const hasPseudoElements = beforeStyles.content !== 'none' || afterStyles.content !== 'none';
-  if (!hasPseudoElements) {
-    return elementRect;
-  }
-
-  // Get dimensions of pseudo-elements
-  const beforeWidth = parseFloat(beforeStyles.width) || 0;
-  const beforeHeight = parseFloat(beforeStyles.height) || 0;
-  const afterWidth = parseFloat(afterStyles.width) || 0;
-  const afterHeight = parseFloat(afterStyles.height) || 0;
-
-  // Calculate max dimensions including pseudo-elements
-  const totalWidth = Math.max(elementRect.width, beforeWidth, afterWidth);
-  const totalHeight = Math.max(elementRect.height, beforeHeight, afterHeight);
-
-  // Calculate the differences to extend the bounds
-  const widthDiff = totalWidth - elementRect.width;
-  const heightDiff = totalHeight - elementRect.height;
-  return {
-    left: elementRect.left - widthDiff / 2,
-    right: elementRect.right + widthDiff / 2,
-    top: elementRect.top - heightDiff / 2,
-    bottom: elementRect.bottom + heightDiff / 2
-  };
-}
-
-const CompositeListContext = /*#__PURE__*/React__namespace.createContext({
-  register: () => {},
-  unregister: () => {},
-  subscribeMapChange: () => {
-    return () => {};
-  },
-  elementsRef: {
-    current: []
-  },
-  nextIndexRef: {
-    current: 0
-  }
-});
-if (process.env.NODE_ENV !== "production") CompositeListContext.displayName = "CompositeListContext";
-function useCompositeListContext() {
-  return React__namespace.useContext(CompositeListContext);
-}
-
-/* eslint-disable no-bitwise */
-/**
- * Provides context for a list of items in a composite component.
- * @internal
- */
-function CompositeList(props) {
-  const {
-    children,
-    elementsRef,
-    labelsRef,
-    onMapChange: onMapChangeProp
-  } = props;
-  const onMapChange = clamp.useStableCallback(onMapChangeProp);
-  const nextIndexRef = React__namespace.useRef(0);
-  const listeners = useRenderElement.useRefWithInit(createListeners).current;
-
-  // We use a stable `map` to avoid O(n^2) re-allocation costs for large lists.
-  // `mapTick` is our re-render trigger mechanism. We also need to update the
-  // elements and label refs, but there's a lot of async work going on and sometimes
-  // the effect that handles `onMapChange` gets called after those refs have been
-  // filled, and we don't want to lose those values by setting their lengths to `0`.
-  // We also need to have them at the proper length because floating-ui uses that
-  // information for list navigation.
-
-  const map = useRenderElement.useRefWithInit(createMap).current;
-  // `mapTick` uses a counter rather than objects for low precision-loss risk and better memory efficiency
-  const [mapTick, setMapTick] = React__namespace.useState(0);
-  const lastTickRef = React__namespace.useRef(mapTick);
-  const register = clamp.useStableCallback((node, metadata) => {
-    map.set(node, metadata ?? null);
-    lastTickRef.current += 1;
-    setMapTick(lastTickRef.current);
-  });
-  const unregister = clamp.useStableCallback(node => {
-    map.delete(node);
-    lastTickRef.current += 1;
-    setMapTick(lastTickRef.current);
-  });
-  const sortedMap = React__namespace.useMemo(() => {
-    const newMap = new Map();
-    // Filter out disconnected elements before sorting to avoid inconsistent
-    // compareDocumentPosition results when elements are detached from the DOM.
-    const sortedNodes = Array.from(map.keys()).filter(node => node.isConnected).sort(sortByDocumentPosition);
-    sortedNodes.forEach((node, index) => {
-      const metadata = map.get(node) ?? {};
-      newMap.set(node, {
-        ...metadata,
-        index
-      });
-    });
-    return newMap;
-  }, [map, mapTick]);
-  clamp.useIsoLayoutEffect(() => {
-    if (typeof MutationObserver !== 'function' || sortedMap.size === 0) {
-      return undefined;
-    }
-    const mutationObserver = new MutationObserver(entries => {
-      const diff = new Set();
-      const updateDiff = node => diff.has(node) ? diff.delete(node) : diff.add(node);
-      entries.forEach(entry => {
-        entry.removedNodes.forEach(updateDiff);
-        entry.addedNodes.forEach(updateDiff);
-      });
-      if (diff.size === 0) {
-        lastTickRef.current += 1;
-        setMapTick(lastTickRef.current);
-      }
-    });
-    sortedMap.forEach((_, node) => {
-      if (node.parentElement) {
-        mutationObserver.observe(node.parentElement, {
-          childList: true
-        });
-      }
-    });
-    return () => {
-      mutationObserver.disconnect();
-    };
-  }, [sortedMap]);
-  clamp.useIsoLayoutEffect(() => {
-    const shouldUpdateLengths = lastTickRef.current === mapTick;
-    if (shouldUpdateLengths) {
-      if (elementsRef.current.length !== sortedMap.size) {
-        elementsRef.current.length = sortedMap.size;
-      }
-      if (labelsRef && labelsRef.current.length !== sortedMap.size) {
-        labelsRef.current.length = sortedMap.size;
-      }
-      nextIndexRef.current = sortedMap.size;
-    }
-    onMapChange(sortedMap);
-  }, [onMapChange, sortedMap, elementsRef, labelsRef, mapTick]);
-  clamp.useIsoLayoutEffect(() => {
-    return () => {
-      elementsRef.current = [];
-    };
-  }, [elementsRef]);
-  clamp.useIsoLayoutEffect(() => {
-    return () => {
-      if (labelsRef) {
-        labelsRef.current = [];
-      }
-    };
-  }, [labelsRef]);
-  const subscribeMapChange = clamp.useStableCallback(fn => {
-    listeners.add(fn);
-    return () => {
-      listeners.delete(fn);
-    };
-  });
-  clamp.useIsoLayoutEffect(() => {
-    listeners.forEach(l => l(sortedMap));
-  }, [listeners, sortedMap]);
-  const contextValue = React__namespace.useMemo(() => ({
-    register,
-    unregister,
-    subscribeMapChange,
-    elementsRef,
-    labelsRef,
-    nextIndexRef
-  }), [register, unregister, subscribeMapChange, elementsRef, labelsRef, nextIndexRef]);
-  return /*#__PURE__*/jsxRuntime.jsx(CompositeListContext.Provider, {
-    value: contextValue,
-    children: children
-  });
-}
-function createMap() {
-  return new Map();
-}
-function createListeners() {
-  return new Set();
-}
-function sortByDocumentPosition(a, b) {
-  const position = a.compareDocumentPosition(b);
-  if (position & Node.DOCUMENT_POSITION_FOLLOWING || position & Node.DOCUMENT_POSITION_CONTAINED_BY) {
-    return -1;
-  }
-  if (position & Node.DOCUMENT_POSITION_PRECEDING || position & Node.DOCUMENT_POSITION_CONTAINS) {
-    return 1;
-  }
-  return 0;
-}
-
-/**
- * Fork of the original `arrow` middleware from Floating UI that allows
- * configuring the offset parent.
- */
-const baseArrow = options => ({
-  name: 'arrow',
-  options,
-  async fn(state) {
-    const {
-      x,
-      y,
-      placement,
-      rects,
-      platform,
-      elements,
-      middlewareData
-    } = state;
-    // Since `element` is required, we don't Partial<> the type.
-    const {
-      element,
-      padding = 0,
-      offsetParent = 'real'
-    } = index_esm.evaluate(options, state) || {};
-    if (element == null) {
-      return {};
-    }
-    const paddingObject = index_esm.getPaddingObject(padding);
-    const coords = {
-      x,
-      y
-    };
-    const axis = index_esm.getAlignmentAxis(placement);
-    const length = index_esm.getAxisLength(axis);
-    const arrowDimensions = await platform.getDimensions(element);
-    const isYAxis = axis === 'y';
-    const minProp = isYAxis ? 'top' : 'left';
-    const maxProp = isYAxis ? 'bottom' : 'right';
-    const clientProp = isYAxis ? 'clientHeight' : 'clientWidth';
-    const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length];
-    const startDiff = coords[axis] - rects.reference[axis];
-    const arrowOffsetParent = offsetParent === 'real' ? await platform.getOffsetParent?.(element) : elements.floating;
-    let clientSize = elements.floating[clientProp] || rects.floating[length];
-
-    // DOM platform can return `window` as the `offsetParent`.
-    if (!clientSize || !(await platform.isElement?.(arrowOffsetParent))) {
-      clientSize = elements.floating[clientProp] || rects.floating[length];
-    }
-    const centerToReference = endDiff / 2 - startDiff / 2;
-
-    // If the padding is large enough that it causes the arrow to no longer be
-    // centered, modify the padding so that it is centered.
-    const largestPossiblePadding = clientSize / 2 - arrowDimensions[length] / 2 - 1;
-    const minPadding = Math.min(paddingObject[minProp], largestPossiblePadding);
-    const maxPadding = Math.min(paddingObject[maxProp], largestPossiblePadding);
-
-    // Make sure the arrow doesn't overflow the floating element if the center
-    // point is outside the floating element's bounds.
-    const min = minPadding;
-    const max = clientSize - arrowDimensions[length] - maxPadding;
-    const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
-    const offset = index_esm.clamp(min, center, max);
-
-    // If the reference is small enough that the arrow's padding causes it to
-    // to point to nothing for an aligned placement, adjust the offset of the
-    // floating element itself. To ensure `shift()` continues to take action,
-    // a single reset is performed when this is true.
-    const shouldAddOffset = !middlewareData.arrow && index_esm.getAlignment(placement) != null && center !== offset && rects.reference[length] / 2 - (center < min ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
-    // eslint-disable-next-line no-nested-ternary
-    const alignmentOffset = shouldAddOffset ? center < min ? center - min : center - max : 0;
-    return {
-      [axis]: coords[axis] + alignmentOffset,
-      data: {
-        [axis]: offset,
-        centerOffset: center - offset - alignmentOffset,
-        ...(shouldAddOffset && {
-          alignmentOffset
-        })
-      },
-      reset: shouldAddOffset
-    };
-  }
-});
-
-/**
- * Provides data to position an inner element of the floating element so that it
- * appears centered to the reference element.
- * This wraps the core `arrow` middleware to allow React refs as the element.
- * @see https://floating-ui.com/docs/arrow
- */
-const arrow = (options, deps) => ({
-  ...baseArrow(options),
-  options: [options, deps]
-});
-
-const hide = {
-  name: 'hide',
-  async fn(state) {
-    const {
-      width,
-      height,
-      x,
-      y
-    } = state.rects.reference;
-    const anchorHidden = width === 0 && height === 0 && x === 0 && y === 0;
-    const nativeHideResult = await floatingUi_reactDom.hide().fn(state);
-    return {
-      data: {
-        referenceHidden: nativeHideResult.data?.referenceHidden || anchorHidden
-      }
-    };
-  }
-};
-
-const DEFAULT_SIDES = {
-  sideX: 'left',
-  sideY: 'top'
-};
-const adaptiveOrigin = {
-  name: 'adaptiveOrigin',
-  async fn(state) {
-    const {
-      x: rawX,
-      y: rawY,
-      rects: {
-        floating: floatRect
-      },
-      elements: {
-        floating
-      },
-      platform,
-      strategy,
-      placement
-    } = state;
-    const win = floatingUi_utils_dom.getWindow(floating);
-    const styles = win.getComputedStyle(floating);
-    const hasTransition = styles.transitionDuration !== '0s' && styles.transitionDuration !== '';
-    if (!hasTransition) {
-      return {
-        x: rawX,
-        y: rawY,
-        data: DEFAULT_SIDES
-      };
-    }
-    const offsetParent = await platform.getOffsetParent?.(floating);
-    let offsetDimensions = {
-      width: 0,
-      height: 0
-    };
-
-    // For fixed strategy, prefer visualViewport if available
-    if (strategy === 'fixed' && win?.visualViewport) {
-      offsetDimensions = {
-        width: win.visualViewport.width,
-        height: win.visualViewport.height
-      };
-    } else if (offsetParent === win) {
-      const doc = clamp.ownerDocument(floating);
-      offsetDimensions = {
-        width: doc.documentElement.clientWidth,
-        height: doc.documentElement.clientHeight
-      };
-    } else if (await platform.isElement?.(offsetParent)) {
-      offsetDimensions = await platform.getDimensions(offsetParent);
-    }
-    const currentSide = index_esm.getSide(placement);
-    let x = rawX;
-    let y = rawY;
-    if (currentSide === 'left') {
-      x = offsetDimensions.width - (rawX + floatRect.width);
-    }
-    if (currentSide === 'top') {
-      y = offsetDimensions.height - (rawY + floatRect.height);
-    }
-    const sideX = currentSide === 'left' ? 'right' : DEFAULT_SIDES.sideX;
-    const sideY = currentSide === 'top' ? 'bottom' : DEFAULT_SIDES.sideY;
-    return {
-      x,
-      y,
-      data: {
-        sideX,
-        sideY
-      }
-    };
-  }
-};
-
-function getLogicalSide(sideParam, renderedSide, isRtl) {
-  const isLogicalSideParam = sideParam === 'inline-start' || sideParam === 'inline-end';
-  const logicalRight = isRtl ? 'inline-start' : 'inline-end';
-  const logicalLeft = isRtl ? 'inline-end' : 'inline-start';
-  return {
-    top: 'top',
-    right: isLogicalSideParam ? logicalRight : 'right',
-    bottom: 'bottom',
-    left: isLogicalSideParam ? logicalLeft : 'left'
-  }[renderedSide];
-}
-function getOffsetData(state, sideParam, isRtl) {
-  const {
-    rects,
-    placement
-  } = state;
-  const data = {
-    side: getLogicalSide(sideParam, index_esm.getSide(placement), isRtl),
-    align: index_esm.getAlignment(placement) || 'center',
-    anchor: {
-      width: rects.reference.width,
-      height: rects.reference.height
-    },
-    positioner: {
-      width: rects.floating.width,
-      height: rects.floating.height
-    }
-  };
-  return data;
-}
-/**
- * Provides standardized anchor positioning behavior for floating elements. Wraps Floating UI's
- * `useFloating` hook.
- */
-function useAnchorPositioning(params) {
-  const {
-    // Public parameters
-    anchor,
-    positionMethod = 'absolute',
-    side: sideParam = 'bottom',
-    sideOffset = 0,
-    align = 'center',
-    alignOffset = 0,
-    collisionBoundary,
-    collisionPadding: collisionPaddingParam = 5,
-    sticky = false,
-    arrowPadding = 5,
-    disableAnchorTracking = false,
-    // Private parameters
-    keepMounted = false,
-    floatingRootContext,
-    mounted,
-    collisionAvoidance,
-    shiftCrossAxis = false,
-    nodeId,
-    adaptiveOrigin,
-    lazyFlip = false,
-    externalTree
-  } = params;
-  const [mountSide, setMountSide] = React__namespace.useState(null);
-  if (!mounted && mountSide !== null) {
-    setMountSide(null);
-  }
-  const collisionAvoidanceSide = collisionAvoidance.side || 'flip';
-  const collisionAvoidanceAlign = collisionAvoidance.align || 'flip';
-  const collisionAvoidanceFallbackAxisSide = collisionAvoidance.fallbackAxisSide || 'end';
-  const anchorFn = typeof anchor === 'function' ? anchor : undefined;
-  const anchorFnCallback = clamp.useStableCallback(anchorFn);
-  const anchorDep = anchorFn ? anchorFnCallback : anchor;
-  const anchorValueRef = clamp.useValueAsRef(anchor);
-  const direction = ScrollAreaViewport.useDirection();
-  const isRtl = direction === 'rtl';
-  const side = mountSide || {
-    top: 'top',
-    right: 'right',
-    bottom: 'bottom',
-    left: 'left',
-    'inline-end': isRtl ? 'left' : 'right',
-    'inline-start': isRtl ? 'right' : 'left'
-  }[sideParam];
-  const placement = align === 'center' ? side : `${side}-${align}`;
-  let collisionPadding = collisionPaddingParam;
-
-  // Create a bias to the preferred side.
-  // On iOS, when the mobile software keyboard opens, the input is exactly centered
-  // in the viewport, but this can cause it to flip to the top undesirably.
-  const bias = 1;
-  const biasTop = sideParam === 'bottom' ? bias : 0;
-  const biasBottom = sideParam === 'top' ? bias : 0;
-  const biasLeft = sideParam === 'right' ? bias : 0;
-  const biasRight = sideParam === 'left' ? bias : 0;
-  if (typeof collisionPadding === 'number') {
-    collisionPadding = {
-      top: collisionPadding + biasTop,
-      right: collisionPadding + biasRight,
-      bottom: collisionPadding + biasBottom,
-      left: collisionPadding + biasLeft
-    };
-  } else if (collisionPadding) {
-    collisionPadding = {
-      top: (collisionPadding.top || 0) + biasTop,
-      right: (collisionPadding.right || 0) + biasRight,
-      bottom: (collisionPadding.bottom || 0) + biasBottom,
-      left: (collisionPadding.left || 0) + biasLeft
-    };
-  }
-  const commonCollisionProps = {
-    boundary: collisionBoundary === 'clipping-ancestors' ? 'clippingAncestors' : collisionBoundary,
-    padding: collisionPadding
-  };
-
-  // Using a ref assumes that the arrow element is always present in the DOM for the lifetime of the
-  // popup. If this assumption ends up being false, we can switch to state to manage the arrow's
-  // presence.
-  const arrowRef = React__namespace.useRef(null);
-
-  // Keep these reactive if they're not functions
-  const sideOffsetRef = clamp.useValueAsRef(sideOffset);
-  const alignOffsetRef = clamp.useValueAsRef(alignOffset);
-  const sideOffsetDep = typeof sideOffset !== 'function' ? sideOffset : 0;
-  const alignOffsetDep = typeof alignOffset !== 'function' ? alignOffset : 0;
-  const middleware = [floatingUi_reactDom.offset(state => {
-    const data = getOffsetData(state, sideParam, isRtl);
-    const sideAxis = typeof sideOffsetRef.current === 'function' ? sideOffsetRef.current(data) : sideOffsetRef.current;
-    const alignAxis = typeof alignOffsetRef.current === 'function' ? alignOffsetRef.current(data) : alignOffsetRef.current;
-    return {
-      mainAxis: sideAxis,
-      crossAxis: alignAxis,
-      alignmentAxis: alignAxis
-    };
-  }, [sideOffsetDep, alignOffsetDep, isRtl, sideParam])];
-  const shiftDisabled = collisionAvoidanceAlign === 'none' && collisionAvoidanceSide !== 'shift';
-  const crossAxisShiftEnabled = !shiftDisabled && (sticky || shiftCrossAxis || collisionAvoidanceSide === 'shift');
-  const flipMiddleware = collisionAvoidanceSide === 'none' ? null : floatingUi_reactDom.flip({
-    ...commonCollisionProps,
-    // Ensure the popup flips if it's been limited by its --available-height and it resizes.
-    // Since the size() padding is smaller than the flip() padding, flip() will take precedence.
-    padding: {
-      top: collisionPadding.top + bias,
-      right: collisionPadding.right + bias,
-      bottom: collisionPadding.bottom + bias,
-      left: collisionPadding.left + bias
-    },
-    mainAxis: !shiftCrossAxis && collisionAvoidanceSide === 'flip',
-    crossAxis: collisionAvoidanceAlign === 'flip' ? 'alignment' : false,
-    fallbackAxisSideDirection: collisionAvoidanceFallbackAxisSide
-  });
-  const shiftMiddleware = shiftDisabled ? null : floatingUi_reactDom.shift(data => {
-    const html = clamp.ownerDocument(data.elements.floating).documentElement;
-    return {
-      ...commonCollisionProps,
-      // Use the Layout Viewport to avoid shifting around when pinch-zooming
-      // for context menus.
-      rootBoundary: shiftCrossAxis ? {
-        x: 0,
-        y: 0,
-        width: html.clientWidth,
-        height: html.clientHeight
-      } : undefined,
-      mainAxis: collisionAvoidanceAlign !== 'none',
-      crossAxis: crossAxisShiftEnabled,
-      limiter: sticky || shiftCrossAxis ? undefined : floatingUi_reactDom.limitShift(limitData => {
-        if (!arrowRef.current) {
-          return {};
-        }
-        const {
-          width,
-          height
-        } = arrowRef.current.getBoundingClientRect();
-        const sideAxis = index_esm.getSideAxis(index_esm.getSide(limitData.placement));
-        const arrowSize = sideAxis === 'y' ? width : height;
-        const offsetAmount = sideAxis === 'y' ? collisionPadding.left + collisionPadding.right : collisionPadding.top + collisionPadding.bottom;
-        return {
-          offset: arrowSize / 2 + offsetAmount / 2
-        };
-      })
-    };
-  }, [commonCollisionProps, sticky, shiftCrossAxis, collisionPadding, collisionAvoidanceAlign]);
-
-  // https://floating-ui.com/docs/flip#combining-with-shift
-  if (collisionAvoidanceSide === 'shift' || collisionAvoidanceAlign === 'shift' || align === 'center') {
-    middleware.push(shiftMiddleware, flipMiddleware);
-  } else {
-    middleware.push(flipMiddleware, shiftMiddleware);
-  }
-  middleware.push(floatingUi_reactDom.size({
-    ...commonCollisionProps,
-    apply({
-      elements: {
-        floating
-      },
-      availableWidth,
-      availableHeight,
-      rects
-    }) {
-      const floatingStyle = floating.style;
-      floatingStyle.setProperty('--available-width', `${availableWidth}px`);
-      floatingStyle.setProperty('--available-height', `${availableHeight}px`);
-
-      // Snap anchor dimensions to device pixels to ensure the popup's visual width matches the anchor's one.
-      const dpr = window.devicePixelRatio || 1;
-      const {
-        x,
-        y,
-        width,
-        height
-      } = rects.reference;
-      const anchorWidth = (Math.round((x + width) * dpr) - Math.round(x * dpr)) / dpr;
-      const anchorHeight = (Math.round((y + height) * dpr) - Math.round(y * dpr)) / dpr;
-      floatingStyle.setProperty('--anchor-width', `${anchorWidth}px`);
-      floatingStyle.setProperty('--anchor-height', `${anchorHeight}px`);
-    }
-  }), arrow(() => ({
-    // `transform-origin` calculations rely on an element existing. If the arrow hasn't been set,
-    // we'll create a fake element.
-    element: arrowRef.current || document.createElement('div'),
-    padding: arrowPadding,
-    offsetParent: 'floating'
-  }), [arrowPadding]), {
-    name: 'transformOrigin',
-    fn(state) {
-      const {
-        elements,
-        middlewareData,
-        placement: renderedPlacement,
-        rects,
-        y
-      } = state;
-      const currentRenderedSide = index_esm.getSide(renderedPlacement);
-      const currentRenderedAxis = index_esm.getSideAxis(currentRenderedSide);
-      const arrowEl = arrowRef.current;
-      const arrowX = middlewareData.arrow?.x || 0;
-      const arrowY = middlewareData.arrow?.y || 0;
-      const arrowWidth = arrowEl?.clientWidth || 0;
-      const arrowHeight = arrowEl?.clientHeight || 0;
-      const transformX = arrowX + arrowWidth / 2;
-      const transformY = arrowY + arrowHeight / 2;
-      const shiftY = Math.abs(middlewareData.shift?.y || 0);
-      const halfAnchorHeight = rects.reference.height / 2;
-      const sideOffsetValue = typeof sideOffset === 'function' ? sideOffset(getOffsetData(state, sideParam, isRtl)) : sideOffset;
-      const isOverlappingAnchor = shiftY > sideOffsetValue;
-      const adjacentTransformOrigin = {
-        top: `${transformX}px calc(100% + ${sideOffsetValue}px)`,
-        bottom: `${transformX}px ${-sideOffsetValue}px`,
-        left: `calc(100% + ${sideOffsetValue}px) ${transformY}px`,
-        right: `${-sideOffsetValue}px ${transformY}px`
-      }[currentRenderedSide];
-      const overlapTransformOrigin = `${transformX}px ${rects.reference.y + halfAnchorHeight - y}px`;
-      elements.floating.style.setProperty('--transform-origin', crossAxisShiftEnabled && currentRenderedAxis === 'y' && isOverlappingAnchor ? overlapTransformOrigin : adjacentTransformOrigin);
-      return {};
-    }
-  }, hide, adaptiveOrigin);
-  clamp.useIsoLayoutEffect(() => {
-    // Ensure positioning doesn't run initially for `keepMounted` elements that
-    // aren't initially open.
-    if (!mounted && floatingRootContext) {
-      floatingRootContext.update({
-        referenceElement: null,
-        floatingElement: null,
-        domReferenceElement: null
-      });
-    }
-  }, [mounted, floatingRootContext]);
-  const autoUpdateOptions = React__namespace.useMemo(() => ({
-    elementResize: !disableAnchorTracking && typeof ResizeObserver !== 'undefined',
-    layoutShift: !disableAnchorTracking && typeof IntersectionObserver !== 'undefined'
-  }), [disableAnchorTracking]);
-  const {
-    refs,
-    elements,
-    x,
-    y,
-    middlewareData,
-    update,
-    placement: renderedPlacement,
-    context,
-    isPositioned,
-    floatingStyles: originalFloatingStyles
-  } = useFloating({
-    rootContext: floatingRootContext,
-    placement,
-    middleware,
-    strategy: positionMethod,
-    whileElementsMounted: keepMounted ? undefined : (...args) => floatingUi_reactDom.autoUpdate(...args, autoUpdateOptions),
-    nodeId,
-    externalTree
-  });
-  const {
-    sideX,
-    sideY
-  } = middlewareData.adaptiveOrigin || DEFAULT_SIDES;
-
-  // Default to `fixed` when not positioned to prevent `autoFocus` scroll jumps.
-  // This ensures the popup is inside the viewport initially before it gets positioned.
-  const resolvedPosition = isPositioned ? positionMethod : 'fixed';
-  const floatingStyles = React__namespace.useMemo(() => {
-    const base = adaptiveOrigin ? {
-      position: resolvedPosition,
-      [sideX]: x,
-      [sideY]: y
-    } : {
-      position: resolvedPosition,
-      ...originalFloatingStyles
-    };
-    if (!isPositioned) {
-      base.opacity = 0;
-    }
-    return base;
-  }, [adaptiveOrigin, resolvedPosition, sideX, x, sideY, y, originalFloatingStyles, isPositioned]);
-  const registeredPositionReferenceRef = React__namespace.useRef(null);
-  clamp.useIsoLayoutEffect(() => {
-    if (!mounted) {
-      return;
-    }
-    const anchorValue = anchorValueRef.current;
-    const resolvedAnchor = typeof anchorValue === 'function' ? anchorValue() : anchorValue;
-    const unwrappedElement = (isRef(resolvedAnchor) ? resolvedAnchor.current : resolvedAnchor) || null;
-    const finalAnchor = unwrappedElement || null;
-    if (finalAnchor !== registeredPositionReferenceRef.current) {
-      refs.setPositionReference(finalAnchor);
-      registeredPositionReferenceRef.current = finalAnchor;
-    }
-  }, [mounted, refs, anchorDep, anchorValueRef]);
-  React__namespace.useEffect(() => {
-    if (!mounted) {
-      return;
-    }
-    const anchorValue = anchorValueRef.current;
-
-    // Refs from parent components are set after useLayoutEffect runs and are available in useEffect.
-    // Therefore, if the anchor is a ref, we need to update the position reference in useEffect.
-    if (typeof anchorValue === 'function') {
-      return;
-    }
-    if (isRef(anchorValue) && anchorValue.current !== registeredPositionReferenceRef.current) {
-      refs.setPositionReference(anchorValue.current);
-      registeredPositionReferenceRef.current = anchorValue.current;
-    }
-  }, [mounted, refs, anchorDep, anchorValueRef]);
-  React__namespace.useEffect(() => {
-    if (keepMounted && mounted && elements.domReference && elements.floating) {
-      return floatingUi_reactDom.autoUpdate(elements.domReference, elements.floating, update, autoUpdateOptions);
-    }
-    return undefined;
-  }, [keepMounted, mounted, elements, update, autoUpdateOptions]);
-  const renderedSide = index_esm.getSide(renderedPlacement);
-  const logicalRenderedSide = getLogicalSide(sideParam, renderedSide, isRtl);
-  const renderedAlign = index_esm.getAlignment(renderedPlacement) || 'center';
-  const anchorHidden = Boolean(middlewareData.hide?.referenceHidden);
-
-  /**
-   * Locks the flip (makes it "sticky") so it doesn't prefer a given placement
-   * and flips back lazily, not eagerly. Ideal for filtered lists that change
-   * the size of the popup dynamically to avoid unwanted flipping when typing.
-   */
-  clamp.useIsoLayoutEffect(() => {
-    if (lazyFlip && mounted && isPositioned) {
-      setMountSide(renderedSide);
-    }
-  }, [lazyFlip, mounted, isPositioned, renderedSide]);
-  const arrowStyles = React__namespace.useMemo(() => ({
-    position: 'absolute',
-    top: middlewareData.arrow?.y,
-    left: middlewareData.arrow?.x
-  }), [middlewareData.arrow]);
-  const arrowUncentered = middlewareData.arrow?.centerOffset !== 0;
-  return React__namespace.useMemo(() => ({
-    positionerStyles: floatingStyles,
-    arrowStyles,
-    arrowRef,
-    arrowUncentered,
-    side: logicalRenderedSide,
-    align: renderedAlign,
-    physicalSide: renderedSide,
-    anchorHidden,
-    refs,
-    context,
-    isPositioned,
-    update
-  }), [floatingStyles, arrowStyles, arrowRef, arrowUncentered, logicalRenderedSide, renderedAlign, renderedSide, anchorHidden, refs, context, isPositioned, update]);
-}
-function isRef(param) {
-  return param != null && 'current' in param;
-}
-
-function getDisabledMountTransitionStyles(transitionStatus) {
-  return transitionStatus === 'starting' ? ScrollAreaViewport.DISABLED_TRANSITIONS_STYLE : useRenderElement.EMPTY_OBJECT;
-}
-
-let IndexGuessBehavior = /*#__PURE__*/function (IndexGuessBehavior) {
-  IndexGuessBehavior[IndexGuessBehavior["None"] = 0] = "None";
-  IndexGuessBehavior[IndexGuessBehavior["GuessFromOrder"] = 1] = "GuessFromOrder";
-  return IndexGuessBehavior;
-}({});
-
-/**
- * Used to register a list item and its index (DOM position) in the `CompositeList`.
- */
-function useCompositeListItem(params = {}) {
-  const {
-    label,
-    metadata,
-    textRef,
-    indexGuessBehavior,
-    index: externalIndex
-  } = params;
-  const {
-    register,
-    unregister,
-    subscribeMapChange,
-    elementsRef,
-    labelsRef,
-    nextIndexRef
-  } = useCompositeListContext();
-  const indexRef = React__namespace.useRef(-1);
-  const [index, setIndex] = React__namespace.useState(externalIndex ?? (indexGuessBehavior === IndexGuessBehavior.GuessFromOrder ? () => {
-    if (indexRef.current === -1) {
-      const newIndex = nextIndexRef.current;
-      nextIndexRef.current += 1;
-      indexRef.current = newIndex;
-    }
-    return indexRef.current;
-  } : -1));
-  const componentRef = React__namespace.useRef(null);
-  const ref = React__namespace.useCallback(node => {
-    componentRef.current = node;
-    if (index !== -1 && node !== null) {
-      elementsRef.current[index] = node;
-      if (labelsRef) {
-        const isLabelDefined = label !== undefined;
-        labelsRef.current[index] = isLabelDefined ? label : textRef?.current?.textContent ?? node.textContent;
-      }
-    }
-  }, [index, elementsRef, labelsRef, label, textRef]);
-  clamp.useIsoLayoutEffect(() => {
-    if (externalIndex != null) {
-      return undefined;
-    }
-    const node = componentRef.current;
-    if (node) {
-      register(node, metadata);
-      return () => {
-        unregister(node);
-      };
-    }
-    return undefined;
-  }, [externalIndex, register, unregister, metadata]);
-  clamp.useIsoLayoutEffect(() => {
-    if (externalIndex != null) {
-      return undefined;
-    }
-    return subscribeMapChange(map => {
-      const i = componentRef.current ? map.get(componentRef.current)?.index : null;
-      if (i != null) {
-        setIndex(i);
-      }
-    });
-  }, [externalIndex, subscribeMapChange, setIndex]);
-  return React__namespace.useMemo(() => ({
-    ref,
-    index
-  }), [index, ref]);
-}
-
 /**
  * A button that closes the dialog.
  * Renders a `<button>` element.
@@ -2706,13 +954,13 @@ const DialogClose = /*#__PURE__*/React__namespace.forwardRef(function DialogClos
   const open = store.useState('open');
   function handleClick(event) {
     if (open) {
-      store.setOpen(false, clamp.createChangeEventDetails(clamp.closePress, event.nativeEvent));
+      store.setOpen(false, useButton.createChangeEventDetails(useButton.closePress, event.nativeEvent));
     }
   }
   const {
     getButtonProps,
     buttonRef
-  } = clamp.useButton({
+  } = useButton.useButton({
     disabled,
     native: nativeButton
   });
@@ -2753,7 +1001,7 @@ const DialogTitle = /*#__PURE__*/React__namespace.forwardRef(function DialogTitl
   const {
     store
   } = ScrollAreaViewport.useDialogRootContext();
-  const id = clamp.useBaseUiId(idProp);
+  const id = useButton.useBaseUiId(idProp);
   store.useSyncedValueWithCleanup('titleElementId', id);
   return useRenderElement.useRenderElement('h2', componentProps, {
     ref: forwardedRef,
@@ -2848,7 +1096,7 @@ function useMenuItemCommonProps(params) {
       if (closeOnClick) {
         menuEvents.emit('close', {
           domEvent: event,
-          reason: clamp.itemPress
+          reason: useButton.itemPress
         });
       }
     },
@@ -2862,7 +1110,7 @@ function useMenuItemCommonProps(params) {
 
         // On non-macOS platforms, this mouseup belongs to the right-click gesture
         // that opened the context menu, so it must not activate an item.
-        if (isContextMenu && !clamp.isMac && event.button === 2) {
+        if (isContextMenu && !useButton.isMac && event.button === 2) {
           return;
         }
       }
@@ -2896,7 +1144,7 @@ function useMenuItem(params) {
   const {
     getButtonProps,
     buttonRef
-  } = clamp.useButton({
+  } = useButton.useButton({
     disabled,
     focusableWhenDisabled: true,
     native: nativeButton,
@@ -2960,7 +1208,7 @@ const itemMapping = {
       [MenuCheckboxItemDataAttributes.unchecked]: ''
     };
   },
-  ...clamp.transitionStatusMapping
+  ...useButton.transitionStatusMapping
 };
 
 const MenuGroupContext = /*#__PURE__*/React__namespace.createContext(undefined);
@@ -3011,11 +1259,11 @@ const MenuGroupLabel = /*#__PURE__*/React__namespace.forwardRef(function MenuGro
     id: idProp,
     ...elementProps
   } = componentProps;
-  const id = clamp.useBaseUiId(idProp);
+  const id = useButton.useBaseUiId(idProp);
   const {
     setLabelId
   } = useMenuGroupRootContext();
-  clamp.useIsoLayoutEffect(() => {
+  useButton.useIsoLayoutEffect(() => {
     setLabelId(id);
     return () => {
       setLabelId(undefined);
@@ -3049,11 +1297,11 @@ const MenuItem = /*#__PURE__*/React__namespace.forwardRef(function MenuItem(comp
     closeOnClick = true,
     ...elementProps
   } = componentProps;
-  const listItem = useCompositeListItem({
+  const listItem = useCompositeListItem.useCompositeListItem({
     label
   });
   const menuPositionerContext = useMenuPositionerContext(true);
-  const id = clamp.useBaseUiId(idProp);
+  const id = useButton.useBaseUiId(idProp);
   const {
     store
   } = useMenuRootContext();
@@ -3100,12 +1348,12 @@ const MenuLinkItem = /*#__PURE__*/React__namespace.forwardRef(function MenuLinkI
     ...elementProps
   } = componentProps;
   const linkRef = React__namespace.useRef(null);
-  const listItem = useCompositeListItem({
+  const listItem = useCompositeListItem.useCompositeListItem({
     label
   });
   const menuPositionerContext = useMenuPositionerContext(true);
   const nodeId = menuPositionerContext?.nodeId;
-  const id = clamp.useBaseUiId(idProp);
+  const id = useButton.useBaseUiId(idProp);
   const {
     store
   } = useMenuRootContext();
@@ -3115,7 +1363,7 @@ const MenuLinkItem = /*#__PURE__*/React__namespace.forwardRef(function MenuLinkI
   const {
     getButtonProps,
     buttonRef
-  } = clamp.useButton({
+  } = useButton.useButton({
     native: false,
     composite: true
   });
@@ -3153,8 +1401,8 @@ function useToolbarRootContext(optional) {
 }
 
 const stateAttributesMapping = {
-  ...ScrollAreaViewport.popupStateMapping,
-  ...clamp.transitionStatusMapping
+  ...InternalBackdrop.popupStateMapping,
+  ...useButton.transitionStatusMapping
 };
 
 /**
@@ -3192,7 +1440,7 @@ const MenuPopup = /*#__PURE__*/React__namespace.forwardRef(function MenuPopup(co
   const closeDelay = store.useState('closeDelay');
   const activeTriggerElement = store.useState('activeTriggerElement');
   const isContextMenu = parent.type === 'context-menu';
-  clamp.useOpenChangeComplete({
+  useButton.useOpenChangeComplete({
     open,
     ref: store.context.popupRef,
     onComplete() {
@@ -3203,7 +1451,7 @@ const MenuPopup = /*#__PURE__*/React__namespace.forwardRef(function MenuPopup(co
   });
   React__namespace.useEffect(() => {
     function handleClose(event) {
-      store.setOpen(false, clamp.createChangeEventDetails(event.reason, event.domEvent));
+      store.setOpen(false, useButton.createChangeEventDetails(event.reason, event.domEvent));
     }
     floatingTreeRoot.events.on('close', handleClose);
     return () => {
@@ -3237,15 +1485,15 @@ const MenuPopup = /*#__PURE__*/React__namespace.forwardRef(function MenuPopup(co
           event.stopPropagation();
         }
       }
-    }, getDisabledMountTransitionStyles(transitionStatus), elementProps, {
+    }, useCompositeListItem.getDisabledMountTransitionStyles(transitionStatus), elementProps, {
       'data-rootownerid': rootId
     }]
   });
   let returnFocus = parent.type === undefined || isContextMenu;
-  if (triggerElement || parent.type === 'menubar' && lastOpenChangeReason !== clamp.outsidePress) {
+  if (triggerElement || parent.type === 'menubar' && lastOpenChangeReason !== useButton.outsidePress) {
     returnFocus = true;
   }
-  return /*#__PURE__*/jsxRuntime.jsx(ScrollAreaViewport.FloatingFocusManager, {
+  return /*#__PURE__*/jsxRuntime.jsx(InternalBackdrop.FloatingFocusManager, {
     context: floatingContext,
     modal: isContextMenu,
     disabled: !mounted,
@@ -3286,7 +1534,7 @@ const MenuPortal = /*#__PURE__*/React__namespace.forwardRef(function MenuPortal(
   }
   return /*#__PURE__*/jsxRuntime.jsx(MenuPortalContext.Provider, {
     value: keepMounted,
-    children: /*#__PURE__*/jsxRuntime.jsx(ScrollAreaViewport.FloatingPortal, {
+    children: /*#__PURE__*/jsxRuntime.jsx(InternalBackdrop.FloatingPortal, {
       ref: forwardedRef,
       ...portalProps
     })
@@ -3309,7 +1557,7 @@ const MenuPositioner = /*#__PURE__*/React__namespace.forwardRef(function MenuPos
     arrowPadding = 5,
     sticky = false,
     disableAnchorTracking = false,
-    collisionAvoidance: collisionAvoidanceProp = ScrollAreaViewport.DROPDOWN_COLLISION_AVOIDANCE,
+    collisionAvoidance: collisionAvoidanceProp = InternalBackdrop.DROPDOWN_COLLISION_AVOIDANCE,
     ...elementProps
   } = componentProps;
   const {
@@ -3333,7 +1581,7 @@ const MenuPositioner = /*#__PURE__*/React__namespace.forwardRef(function MenuPos
   const floatingParentNodeId = store.useState('floatingParentNodeId');
   const domReference = floatingRootContext.useState('domReferenceElement');
   const previousTriggerRef = React__namespace.useRef(null);
-  const runOnceAnimationsFinish = clamp.useAnimationsFinished(positionerElement, false, false);
+  const runOnceAnimationsFinish = useButton.useAnimationsFinished(positionerElement, false, false);
   let anchor = anchorProp;
   let sideOffset = sideOffsetProp;
   let alignOffset = alignOffsetProp;
@@ -3352,13 +1600,13 @@ const MenuPositioner = /*#__PURE__*/React__namespace.forwardRef(function MenuPos
   if (parent.type === 'menu') {
     computedSide = computedSide ?? 'inline-end';
     computedAlign = computedAlign ?? 'start';
-    collisionAvoidance = componentProps.collisionAvoidance ?? ScrollAreaViewport.POPUP_COLLISION_AVOIDANCE;
+    collisionAvoidance = componentProps.collisionAvoidance ?? InternalBackdrop.POPUP_COLLISION_AVOIDANCE;
   } else if (parent.type === 'menubar') {
     computedSide = computedSide ?? 'bottom';
     computedAlign = computedAlign ?? 'start';
   }
   const contextMenu = parent.type === 'context-menu';
-  const positioner = useAnchorPositioning({
+  const positioner = useCompositeListItem.useAnchorPositioning({
     anchor,
     floatingRootContext,
     positionMethod: contextMenuContext ? 'fixed' : positionMethodProp,
@@ -3377,7 +1625,7 @@ const MenuPositioner = /*#__PURE__*/React__namespace.forwardRef(function MenuPos
     collisionAvoidance,
     shiftCrossAxis: contextMenu && !('side' in collisionAvoidance && collisionAvoidance.side === 'flip'),
     externalTree: floatingTreeRoot,
-    adaptiveOrigin: hasViewport ? adaptiveOrigin : undefined
+    adaptiveOrigin: hasViewport ? useCompositeListItem.adaptiveOrigin : undefined
   });
   const positionerProps = React__namespace.useMemo(() => {
     const hiddenStyles = {};
@@ -3400,7 +1648,7 @@ const MenuPositioner = /*#__PURE__*/React__namespace.forwardRef(function MenuPos
           store.set('hoverEnabled', false);
         }
         if (details.nodeId !== floatingNodeId && details.parentNodeId === store.select('floatingParentNodeId')) {
-          store.setOpen(false, clamp.createChangeEventDetails(clamp.siblingOpen));
+          store.setOpen(false, useButton.createChangeEventDetails(useButton.siblingOpen));
         }
       }
     }
@@ -3417,15 +1665,15 @@ const MenuPositioner = /*#__PURE__*/React__namespace.forwardRef(function MenuPos
       if (details.open || details.nodeId !== store.select('floatingParentNodeId')) {
         return;
       }
-      const reason = details.reason ?? clamp.siblingOpen;
-      store.setOpen(false, clamp.createChangeEventDetails(reason));
+      const reason = details.reason ?? useButton.siblingOpen;
+      store.setOpen(false, useButton.createChangeEventDetails(reason));
     }
     floatingTreeRoot.events.on('menuopenchange', onParentClose);
     return () => {
       floatingTreeRoot.events.off('menuopenchange', onParentClose);
     };
   }, [floatingTreeRoot.events, store]);
-  const closeTimeout = clamp.useTimeout();
+  const closeTimeout = useButton.useTimeout();
 
   // Clear pending close timeout when the menu closes.
   React__namespace.useEffect(() => {
@@ -3447,11 +1695,11 @@ const MenuPositioner = /*#__PURE__*/React__namespace.forwardRef(function MenuPos
         if (delay > 0) {
           if (!closeTimeout.isStarted()) {
             closeTimeout.start(delay, () => {
-              store.setOpen(false, clamp.createChangeEventDetails(clamp.siblingOpen));
+              store.setOpen(false, useButton.createChangeEventDetails(useButton.siblingOpen));
             });
           }
         } else {
-          store.setOpen(false, clamp.createChangeEventDetails(clamp.siblingOpen));
+          store.setOpen(false, useButton.createChangeEventDetails(useButton.siblingOpen));
         }
       } else {
         // User re-hovered the submenu trigger, cancel pending close.
@@ -3474,7 +1722,7 @@ const MenuPositioner = /*#__PURE__*/React__namespace.forwardRef(function MenuPos
   }, [floatingTreeRoot.events, open, store, floatingNodeId, floatingParentNodeId]);
 
   // Keep positioner transition behavior aligned with Popover when switching detached triggers.
-  clamp.useIsoLayoutEffect(() => {
+  useButton.useIsoLayoutEffect(() => {
     const currentTrigger = domReference;
     const previousTrigger = previousTriggerRef.current;
     if (currentTrigger) {
@@ -3510,11 +1758,11 @@ const MenuPositioner = /*#__PURE__*/React__namespace.forwardRef(function MenuPos
   }), [positioner.side, positioner.align, positioner.arrowRef, positioner.arrowUncentered, positioner.arrowStyles, positioner.context.nodeId]);
   const element = useRenderElement.useRenderElement('div', componentProps, {
     state,
-    stateAttributesMapping: ScrollAreaViewport.popupStateMapping,
+    stateAttributesMapping: InternalBackdrop.popupStateMapping,
     ref: [forwardedRef, store.useStateSetter('positionerElement')],
-    props: [positionerProps, getDisabledMountTransitionStyles(transitionStatus), elementProps]
+    props: [positionerProps, useCompositeListItem.getDisabledMountTransitionStyles(transitionStatus), elementProps]
   });
-  const shouldRenderBackdrop = mounted && parent.type !== 'menu' && (parent.type !== 'menubar' && modal && lastOpenChangeReason !== clamp.triggerHover || parent.type === 'menubar' && parent.context.modal);
+  const shouldRenderBackdrop = mounted && parent.type !== 'menu' && (parent.type !== 'menubar' && modal && lastOpenChangeReason !== useButton.triggerHover || parent.type === 'menubar' && parent.context.modal);
 
   // cuts a hole in the backdrop to allow pointer interaction with the menubar or dropdown menu trigger element
   let backdropCutout = null;
@@ -3525,13 +1773,13 @@ const MenuPositioner = /*#__PURE__*/React__namespace.forwardRef(function MenuPos
   }
   return /*#__PURE__*/jsxRuntime.jsxs(MenuPositionerContext.Provider, {
     value: contextValue,
-    children: [shouldRenderBackdrop && /*#__PURE__*/jsxRuntime.jsx(ScrollAreaViewport.InternalBackdrop, {
+    children: [shouldRenderBackdrop && /*#__PURE__*/jsxRuntime.jsx(InternalBackdrop.InternalBackdrop, {
       ref: parent.type === 'context-menu' || parent.type === 'nested-context-menu' ? parent.context.internalBackdropRef : null,
-      inert: ScrollAreaViewport.inertValue(!open),
+      inert: InternalBackdrop.inertValue(!open),
       cutout: backdropCutout
-    }), /*#__PURE__*/jsxRuntime.jsx(ScrollAreaViewport.FloatingNode, {
+    }), /*#__PURE__*/jsxRuntime.jsx(InternalBackdrop.FloatingNode, {
       id: floatingNodeId,
-      children: /*#__PURE__*/jsxRuntime.jsx(CompositeList, {
+      children: /*#__PURE__*/jsxRuntime.jsx(useCompositeListItem.CompositeList, {
         elementsRef: store.context.itemDomElements,
         labelsRef: store.context.itemLabels,
         children: element
@@ -3567,13 +1815,13 @@ const MenuRadioGroup = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__na
     disabled = false,
     ...elementProps
   } = componentProps;
-  const [value, setValueUnwrapped] = clamp.useControlled({
+  const [value, setValueUnwrapped] = useButton.useControlled({
     controlled: valueProp,
     default: defaultValue,
     name: 'MenuRadioGroup'
   });
-  const onValueChange = clamp.useStableCallback(onValueChangeProp);
-  const setValue = clamp.useStableCallback((newValue, eventDetails) => {
+  const onValueChange = useButton.useStableCallback(onValueChangeProp);
+  const setValue = useButton.useStableCallback((newValue, eventDetails) => {
     onValueChange?.(newValue, eventDetails);
     if (eventDetails.isCanceled) {
       return;
@@ -3626,11 +1874,11 @@ const MenuRadioItem = /*#__PURE__*/React__namespace.forwardRef(function MenuRadi
     value,
     ...elementProps
   } = componentProps;
-  const listItem = useCompositeListItem({
+  const listItem = useCompositeListItem.useCompositeListItem({
     label
   });
   const menuPositionerContext = useMenuPositionerContext(true);
-  const id = clamp.useBaseUiId(idProp);
+  const id = useButton.useBaseUiId(idProp);
   const {
     store
   } = useMenuRootContext();
@@ -3661,9 +1909,9 @@ const MenuRadioItem = /*#__PURE__*/React__namespace.forwardRef(function MenuRadi
     highlighted,
     checked
   }), [disabled, highlighted, checked]);
-  const handleClick = clamp.useStableCallback(event => {
+  const handleClick = useButton.useStableCallback(event => {
     const details = {
-      ...clamp.createChangeEventDetails(clamp.itemPress, event.nativeEvent),
+      ...useButton.createChangeEventDetails(useButton.itemPress, event.nativeEvent),
       preventUnmountOnClose: () => {}
     };
     setSelectedValue(value, details);
@@ -3703,8 +1951,8 @@ const MenuRadioItemIndicator = /*#__PURE__*/React__namespace.forwardRef(function
   const {
     transitionStatus,
     setMounted
-  } = clamp.useTransitionStatus(item.checked);
-  clamp.useOpenChangeComplete({
+  } = useButton.useTransitionStatus(item.checked);
+  useButton.useOpenChangeComplete({
     open: item.checked,
     ref: indicatorRef,
     onComplete() {
@@ -3745,34 +1993,34 @@ function useMenubarContext(optional) {
 
 const selectors = {
   ...ScrollAreaViewport.popupStoreSelectors,
-  disabled: ScrollAreaViewport.createSelector(state => state.parent.type === 'menubar' ? state.parent.context.disabled || state.disabled : state.disabled),
-  modal: ScrollAreaViewport.createSelector(state => (state.parent.type === undefined || state.parent.type === 'context-menu') && (state.modal ?? true)),
-  allowMouseEnter: ScrollAreaViewport.createSelector(state => state.allowMouseEnter),
-  stickIfOpen: ScrollAreaViewport.createSelector(state => state.stickIfOpen),
-  parent: ScrollAreaViewport.createSelector(state => state.parent),
-  rootId: ScrollAreaViewport.createSelector(state => {
+  disabled: InternalBackdrop.createSelector(state => state.parent.type === 'menubar' ? state.parent.context.disabled || state.disabled : state.disabled),
+  modal: InternalBackdrop.createSelector(state => (state.parent.type === undefined || state.parent.type === 'context-menu') && (state.modal ?? true)),
+  allowMouseEnter: InternalBackdrop.createSelector(state => state.allowMouseEnter),
+  stickIfOpen: InternalBackdrop.createSelector(state => state.stickIfOpen),
+  parent: InternalBackdrop.createSelector(state => state.parent),
+  rootId: InternalBackdrop.createSelector(state => {
     if (state.parent.type === 'menu') {
       return state.parent.store.select('rootId');
     }
     return state.parent.type !== undefined ? state.parent.context.rootId : state.rootId;
   }),
-  activeIndex: ScrollAreaViewport.createSelector(state => state.activeIndex),
-  isActive: ScrollAreaViewport.createSelector((state, itemIndex) => state.activeIndex === itemIndex),
-  hoverEnabled: ScrollAreaViewport.createSelector(state => state.hoverEnabled),
-  instantType: ScrollAreaViewport.createSelector(state => state.instantType),
-  lastOpenChangeReason: ScrollAreaViewport.createSelector(state => state.openChangeReason),
-  floatingTreeRoot: ScrollAreaViewport.createSelector(state => {
+  activeIndex: InternalBackdrop.createSelector(state => state.activeIndex),
+  isActive: InternalBackdrop.createSelector((state, itemIndex) => state.activeIndex === itemIndex),
+  hoverEnabled: InternalBackdrop.createSelector(state => state.hoverEnabled),
+  instantType: InternalBackdrop.createSelector(state => state.instantType),
+  lastOpenChangeReason: InternalBackdrop.createSelector(state => state.openChangeReason),
+  floatingTreeRoot: InternalBackdrop.createSelector(state => {
     if (state.parent.type === 'menu') {
       return state.parent.store.select('floatingTreeRoot');
     }
     return state.floatingTreeRoot;
   }),
-  floatingNodeId: ScrollAreaViewport.createSelector(state => state.floatingNodeId),
-  floatingParentNodeId: ScrollAreaViewport.createSelector(state => state.floatingParentNodeId),
-  itemProps: ScrollAreaViewport.createSelector(state => state.itemProps),
-  closeDelay: ScrollAreaViewport.createSelector(state => state.closeDelay),
-  hasViewport: ScrollAreaViewport.createSelector(state => state.hasViewport),
-  keyboardEventRelay: ScrollAreaViewport.createSelector(state => {
+  floatingNodeId: InternalBackdrop.createSelector(state => state.floatingNodeId),
+  floatingParentNodeId: InternalBackdrop.createSelector(state => state.floatingParentNodeId),
+  itemProps: InternalBackdrop.createSelector(state => state.itemProps),
+  closeDelay: InternalBackdrop.createSelector(state => state.closeDelay),
+  hasViewport: InternalBackdrop.createSelector(state => state.hasViewport),
+  keyboardEventRelay: InternalBackdrop.createSelector(state => {
     if (state.keyboardEventRelay) {
       return state.keyboardEventRelay;
     }
@@ -3782,7 +2030,7 @@ const selectors = {
     return undefined;
   })
 };
-class MenuStore extends ScrollAreaViewport.ReactStore {
+class MenuStore extends InternalBackdrop.ReactStore {
   constructor(initialState) {
     super({
       ...createInitialState(),
@@ -3805,7 +2053,7 @@ class MenuStore extends ScrollAreaViewport.ReactStore {
       triggerFocusTargetRef: /*#__PURE__*/React__namespace.createRef(),
       beforeContentFocusGuardRef: /*#__PURE__*/React__namespace.createRef(),
       onOpenChangeComplete: undefined,
-      triggerElements: new ScrollAreaViewport.PopupTriggerMap()
+      triggerElements: new InternalBackdrop.PopupTriggerMap()
     }, selectors);
 
     // Set up propagation of state from parent menu if applicable.
@@ -3866,7 +2114,7 @@ function createInitialState() {
     hoverEnabled: true,
     instantType: undefined,
     openChangeReason: null,
-    floatingTreeRoot: new ScrollAreaViewport.FloatingTreeStore(),
+    floatingTreeRoot: new InternalBackdrop.FloatingTreeStore(),
     floatingNodeId: undefined,
     floatingParentNodeId: null,
     itemProps: useRenderElement.EMPTY_OBJECT,
@@ -3882,7 +2130,7 @@ function useMenuSubmenuRootContext() {
   return React__namespace.useContext(MenuSubmenuRootContext);
 }
 
-const MenuRoot = ScrollAreaViewport.fastComponent(function MenuRoot(props) {
+const MenuRoot = InternalBackdrop.fastComponent(function MenuRoot(props) {
   const {
     children,
     open: openProp,
@@ -3940,7 +2188,7 @@ const MenuRoot = ScrollAreaViewport.fastComponent(function MenuRoot(props) {
   });
 
   // Support initially open state when uncontrolled
-  ScrollAreaViewport.useOnFirstRender(() => {
+  InternalBackdrop.useOnFirstRender(() => {
     if (openProp === undefined && store.state.open === false && defaultOpen === true) {
       store.update({
         open: true,
@@ -3952,9 +2200,9 @@ const MenuRoot = ScrollAreaViewport.fastComponent(function MenuRoot(props) {
   store.useControlledProp('triggerIdProp', triggerIdProp);
   store.useContextCallback('onOpenChangeComplete', onOpenChangeComplete);
   const floatingTreeRoot = store.useState('floatingTreeRoot');
-  const floatingNodeIdFromContext = ScrollAreaViewport.useFloatingNodeId(floatingTreeRoot);
-  const floatingParentNodeIdFromContext = ScrollAreaViewport.useFloatingParentNodeId();
-  clamp.useIsoLayoutEffect(() => {
+  const floatingNodeIdFromContext = InternalBackdrop.useFloatingNodeId(floatingTreeRoot);
+  const floatingParentNodeIdFromContext = InternalBackdrop.useFloatingParentNodeId();
+  useButton.useIsoLayoutEffect(() => {
     if (contextMenuContext && !parentMenuRootContext) {
       // This is a context menu root.
       // It doesn't support detached triggers yet, so we have to sync the parent context manually.
@@ -3995,12 +2243,12 @@ const MenuRoot = ScrollAreaViewport.fastComponent(function MenuRoot(props) {
   store.useSyncedValues({
     disabled: disabledProp,
     modal: parent.type === undefined ? modalProp : undefined,
-    rootId: clamp.useId()
+    rootId: useButton.useId()
   });
   const {
     openMethod,
     triggerProps: interactionTypeProps
-  } = ScrollAreaViewport.useOpenInteractionType(open);
+  } = InternalBackdrop.useOpenInteractionType(open);
   ScrollAreaViewport.useImplicitActiveTrigger(store);
   const {
     forceUnmount
@@ -4011,7 +2259,7 @@ const MenuRoot = ScrollAreaViewport.fastComponent(function MenuRoot(props) {
     });
   });
   const allowOutsidePressDismissalRef = React__namespace.useRef(parent.type !== 'context-menu');
-  const allowOutsidePressDismissalTimeout = clamp.useTimeout();
+  const allowOutsidePressDismissalTimeout = useButton.useTimeout();
   React__namespace.useEffect(() => {
     if (!open) {
       openEventRef.current = null;
@@ -4032,15 +2280,15 @@ const MenuRoot = ScrollAreaViewport.fastComponent(function MenuRoot(props) {
       allowOutsidePressDismissalRef.current = true;
     });
   }, [allowOutsidePressDismissalTimeout, open, parent.type]);
-  ScrollAreaViewport.useScrollLock(open && modal && lastOpenChangeReason !== clamp.triggerHover && openMethod !== 'touch', positionerElement);
-  clamp.useIsoLayoutEffect(() => {
+  InternalBackdrop.useScrollLock(open && modal && lastOpenChangeReason !== useButton.triggerHover && openMethod !== 'touch', positionerElement);
+  useButton.useIsoLayoutEffect(() => {
     if (!open && !hoverEnabled) {
       store.set('hoverEnabled', true);
     }
   }, [open, hoverEnabled, store]);
   const allowTouchToCloseRef = React__namespace.useRef(true);
-  const allowTouchToCloseTimeout = clamp.useTimeout();
-  const setOpen = clamp.useStableCallback((nextOpen, eventDetails) => {
+  const allowTouchToCloseTimeout = useButton.useTimeout();
+  const setOpen = useButton.useStableCallback((nextOpen, eventDetails) => {
     const reason = eventDetails.reason;
     if (open === nextOpen && eventDetails.trigger === activeTriggerElement && lastOpenChangeReason === reason) {
       return;
@@ -4086,7 +2334,7 @@ const MenuRoot = ScrollAreaViewport.fastComponent(function MenuRoot(props) {
     // Prevent the menu from closing on mobile devices that have a delayed click event.
     // In some cases the menu, when tapped, will fire the focus event first and then the click event.
     // Without this guard, the menu will close immediately after opening.
-    if (nextOpen && reason === clamp.triggerFocus) {
+    if (nextOpen && reason === useButton.triggerFocus) {
       allowTouchToCloseRef.current = false;
       allowTouchToCloseTimeout.start(300, () => {
         allowTouchToCloseRef.current = true;
@@ -4095,8 +2343,8 @@ const MenuRoot = ScrollAreaViewport.fastComponent(function MenuRoot(props) {
       allowTouchToCloseRef.current = true;
       allowTouchToCloseTimeout.clear();
     }
-    const isKeyboardClick = (reason === clamp.triggerPress || reason === clamp.itemPress) && nativeEvent.detail === 0 && nativeEvent?.isTrusted;
-    const isDismissClose = !nextOpen && (reason === clamp.escapeKey || reason == null);
+    const isKeyboardClick = (reason === useButton.triggerPress || reason === useButton.itemPress) && nativeEvent.detail === 0 && nativeEvent?.isTrusted;
+    const isDismissClose = !nextOpen && (reason === useButton.escapeKey || reason == null);
     const updatedState = {
       open: nextOpen,
       openChangeReason: reason
@@ -4111,7 +2359,7 @@ const MenuRoot = ScrollAreaViewport.fastComponent(function MenuRoot(props) {
       updatedState.activeTriggerElement = eventDetails.trigger ?? null;
     }
     store.update(updatedState);
-    if (parent.type === 'menubar' && (reason === clamp.triggerFocus || reason === clamp.focusOut || reason === clamp.triggerHover || reason === clamp.listNavigation || reason === clamp.siblingOpen)) {
+    if (parent.type === 'menubar' && (reason === useButton.triggerFocus || reason === useButton.focusOut || reason === useButton.triggerHover || reason === useButton.listNavigation || reason === useButton.siblingOpen)) {
       store.set('instantType', 'group');
     } else if (isKeyboardClick || isDismissClose) {
       store.set('instantType', isKeyboardClick ? 'click' : 'dismiss');
@@ -4120,14 +2368,14 @@ const MenuRoot = ScrollAreaViewport.fastComponent(function MenuRoot(props) {
     }
   });
   const createMenuEventDetails = React__namespace.useCallback(reason => {
-    const details = clamp.createChangeEventDetails(reason);
+    const details = useButton.createChangeEventDetails(reason);
     details.preventUnmountOnClose = () => {
       store.set('preventUnmountingOnClose', true);
     };
     return details;
   }, [store]);
   const handleImperativeClose = React__namespace.useCallback(() => {
-    store.setOpen(false, createMenuEventDetails(clamp.imperativeAction));
+    store.setOpen(false, createMenuEventDetails(useButton.imperativeAction));
   }, [store, createMenuEventDetails]);
   React__namespace.useImperativeHandle(actionsRef, () => ({
     unmount: forceUnmount,
@@ -4156,7 +2404,7 @@ const MenuRoot = ScrollAreaViewport.fastComponent(function MenuRoot(props) {
       floatingEvents?.off('setOpen', handleSetOpenEvent);
     };
   }, [floatingEvents, setOpen]);
-  const dismiss = ScrollAreaViewport.useDismiss(floatingRootContext, {
+  const dismiss = InternalBackdrop.useDismiss(floatingRootContext, {
     enabled: !disabled,
     bubbles: {
       escapeKey: closeParentOnEsc && parent.type === 'menu'
@@ -4172,14 +2420,14 @@ const MenuRoot = ScrollAreaViewport.fastComponent(function MenuRoot(props) {
   const role = ScrollAreaViewport.useRole(floatingRootContext, {
     role: 'menu'
   });
-  const direction = ScrollAreaViewport.useDirection();
+  const direction = InternalBackdrop.useDirection();
   const setActiveIndex = React__namespace.useCallback(index => {
     if (store.select('activeIndex') === index) {
       return;
     }
     store.set('activeIndex', index);
   }, [store]);
-  const listNavigation = useListNavigation(floatingRootContext, {
+  const listNavigation = useCompositeListItem.useListNavigation(floatingRootContext, {
     enabled: !disabled,
     listRef: store.context.itemDomElements,
     activeIndex,
@@ -4197,11 +2445,11 @@ const MenuRoot = ScrollAreaViewport.fastComponent(function MenuRoot(props) {
   const onTypingChange = React__namespace.useCallback(nextTyping => {
     store.context.typingRef.current = nextTyping;
   }, [store]);
-  const typeahead = useTypeahead(floatingRootContext, {
+  const typeahead = useCompositeListItem.useTypeahead(floatingRootContext, {
     listRef: store.context.itemLabels,
     elementsRef: store.context.itemDomElements,
     activeIndex,
-    resetMs: ScrollAreaViewport.TYPEAHEAD_RESET_MS,
+    resetMs: InternalBackdrop.TYPEAHEAD_RESET_MS,
     onMatch: index => {
       if (open && index !== activeIndex) {
         store.set('activeIndex', index);
@@ -4214,7 +2462,7 @@ const MenuRoot = ScrollAreaViewport.fastComponent(function MenuRoot(props) {
     getFloatingProps,
     getItemProps,
     getTriggerProps
-  } = ScrollAreaViewport.useInteractions([dismiss, role, listNavigation, typeahead]);
+  } = InternalBackdrop.useInteractions([dismiss, role, listNavigation, typeahead]);
   const activeTriggerProps = React__namespace.useMemo(() => {
     const mergedProps = useRenderElement.mergeProps(getReferenceProps(), {
       onMouseMove() {
@@ -4276,7 +2524,7 @@ const MenuRoot = ScrollAreaViewport.fastComponent(function MenuRoot(props) {
   });
   if (parent.type === undefined || parent.type === 'context-menu') {
     // set up a FloatingTree to provide the context to nested menus
-    return /*#__PURE__*/jsxRuntime.jsx(ScrollAreaViewport.FloatingTree, {
+    return /*#__PURE__*/jsxRuntime.jsx(InternalBackdrop.FloatingTree, {
       externalTree: floatingTreeRoot,
       children: content
     });
@@ -4309,11 +2557,11 @@ function useCompositeItem(params = {}) {
     highlightItemOnHover,
     highlightedIndex,
     onHighlightedIndexChange
-  } = clamp.useCompositeRootContext();
+  } = useButton.useCompositeRootContext();
   const {
     ref,
     index
-  } = useCompositeListItem(params);
+  } = useCompositeListItem.useCompositeListItem(params);
   const isHighlighted = highlightedIndex === index;
   const itemRef = React__namespace.useRef(null);
   const mergedRef = useRenderElement.useMergedRefs(ref, itemRef);
@@ -4399,7 +2647,7 @@ function useMixedToggleClickHandler(params) {
       onMouseDown: event => {
         if (mouseDownAction === 'open' && !open || mouseDownAction === 'close' && open) {
           ignoreClickRef.current = true;
-          clamp.ownerDocument(event.currentTarget).addEventListener('click', () => {
+          useButton.ownerDocument(event.currentTarget).addEventListener('click', () => {
             ignoreClickRef.current = false;
           }, {
             once: true
@@ -4424,7 +2672,7 @@ const BOUNDARY_OFFSET = 2;
  *
  * Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
  */
-const MenuTrigger = ScrollAreaViewport.fastComponentRef(function MenuTrigger(componentProps, forwardedRef) {
+const MenuTrigger = InternalBackdrop.fastComponentRef(function MenuTrigger(componentProps, forwardedRef) {
   const {
     render,
     className,
@@ -4443,19 +2691,19 @@ const MenuTrigger = ScrollAreaViewport.fastComponentRef(function MenuTrigger(com
   if (!store) {
     throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: <Menu.Trigger> must be either used within a <Menu.Root> component or provided with a handle.' : useRenderElement.formatErrorMessage(85));
   }
-  const thisTriggerId = clamp.useBaseUiId(idProp);
+  const thisTriggerId = useButton.useBaseUiId(idProp);
   const isTriggerActive = store.useState('isTriggerActive', thisTriggerId);
   const floatingRootContext = store.useState('floatingRootContext');
   const isOpenedByThisTrigger = store.useState('isOpenedByTrigger', thisTriggerId);
   const triggerElementRef = React__namespace.useRef(null);
   const parent = useMenuParent();
-  const compositeRootContext = clamp.useCompositeRootContext(true);
-  const floatingTreeRootFromContext = ScrollAreaViewport.useFloatingTree();
+  const compositeRootContext = useButton.useCompositeRootContext(true);
+  const floatingTreeRootFromContext = InternalBackdrop.useFloatingTree();
   const floatingTreeRoot = React__namespace.useMemo(() => {
-    return floatingTreeRootFromContext ?? new ScrollAreaViewport.FloatingTreeStore();
+    return floatingTreeRootFromContext ?? new InternalBackdrop.FloatingTreeStore();
   }, [floatingTreeRootFromContext]);
-  const floatingNodeId = ScrollAreaViewport.useFloatingNodeId(floatingTreeRoot);
-  const floatingParentNodeId = ScrollAreaViewport.useFloatingParentNodeId();
+  const floatingNodeId = InternalBackdrop.useFloatingNodeId(floatingTreeRoot);
+  const floatingParentNodeId = InternalBackdrop.useFloatingParentNodeId();
   const {
     registerTrigger,
     isMountedByThisTrigger
@@ -4474,7 +2722,7 @@ const MenuTrigger = ScrollAreaViewport.fastComponentRef(function MenuTrigger(com
   const {
     getButtonProps,
     buttonRef
-  } = clamp.useButton({
+  } = useButton.useButton({
     disabled,
     native: nativeButton
   });
@@ -4484,32 +2732,32 @@ const MenuTrigger = ScrollAreaViewport.fastComponentRef(function MenuTrigger(com
     }
   }, [store, isOpenedByThisTrigger, parent.type]);
   const triggerRef = React__namespace.useRef(null);
-  const allowMouseUpTriggerTimeout = clamp.useTimeout();
-  const handleDocumentMouseUp = clamp.useStableCallback(mouseEvent => {
+  const allowMouseUpTriggerTimeout = useButton.useTimeout();
+  const handleDocumentMouseUp = useButton.useStableCallback(mouseEvent => {
     if (!triggerRef.current) {
       return;
     }
     allowMouseUpTriggerTimeout.clear();
     store.context.allowMouseUpTriggerRef.current = false;
     const mouseUpTarget = mouseEvent.target;
-    if (clamp.contains(triggerRef.current, mouseUpTarget) || clamp.contains(store.select('positionerElement'), mouseUpTarget) || mouseUpTarget === triggerRef.current) {
+    if (useButton.contains(triggerRef.current, mouseUpTarget) || useButton.contains(store.select('positionerElement'), mouseUpTarget) || mouseUpTarget === triggerRef.current) {
       return;
     }
     if (mouseUpTarget != null && findRootOwnerId(mouseUpTarget) === store.select('rootId')) {
       return;
     }
-    const bounds = getPseudoElementBounds(triggerRef.current);
+    const bounds = useCompositeListItem.getPseudoElementBounds(triggerRef.current);
     if (mouseEvent.clientX >= bounds.left - BOUNDARY_OFFSET && mouseEvent.clientX <= bounds.right + BOUNDARY_OFFSET && mouseEvent.clientY >= bounds.top - BOUNDARY_OFFSET && mouseEvent.clientY <= bounds.bottom + BOUNDARY_OFFSET) {
       return;
     }
     floatingTreeRoot.events.emit('close', {
       domEvent: mouseEvent,
-      reason: clamp.cancelOpen
+      reason: useButton.cancelOpen
     });
   });
   React__namespace.useEffect(() => {
-    if (isOpenedByThisTrigger && store.select('lastOpenChangeReason') === clamp.triggerHover) {
-      const doc = clamp.ownerDocument(triggerRef.current);
+    if (isOpenedByThisTrigger && store.select('lastOpenChangeReason') === useButton.triggerHover) {
+      const doc = useButton.ownerDocument(triggerRef.current);
       doc.addEventListener('mouseup', handleDocumentMouseUp, {
         once: true
       });
@@ -4537,7 +2785,7 @@ const MenuTrigger = ScrollAreaViewport.fastComponentRef(function MenuTrigger(com
   // `lastOpenChangeReason` doesn't need to be reactive here, as we need to run this
   // only when `isOpenedByThisTrigger` changes.
   const stickIfOpen = useStickIfOpen(isOpenedByThisTrigger, store.select('lastOpenChangeReason'));
-  const click = ScrollAreaViewport.useClick(floatingRootContext, {
+  const click = InternalBackdrop.useClick(floatingRootContext, {
     enabled: !disabled && parent.type !== 'context-menu',
     event: isOpenedByThisTrigger && isInMenubar ? 'click' : 'mousedown',
     toggle: true,
@@ -4552,7 +2800,7 @@ const MenuTrigger = ScrollAreaViewport.fastComponentRef(function MenuTrigger(com
     enabled: isInMenubar,
     mouseDownAction: 'open'
   });
-  const localInteractionProps = ScrollAreaViewport.useInteractions([click, focus]);
+  const localInteractionProps = InternalBackdrop.useInteractions([click, focus]);
   const state = {
     disabled,
     open: isOpenedByThisTrigger
@@ -4571,7 +2819,7 @@ const MenuTrigger = ScrollAreaViewport.fastComponentRef(function MenuTrigger(com
       allowMouseUpTriggerTimeout.start(200, () => {
         store.context.allowMouseUpTriggerRef.current = true;
       });
-      const doc = clamp.ownerDocument(event.currentTarget);
+      const doc = useButton.ownerDocument(event.currentTarget);
       doc.addEventListener('mouseup', handleDocumentMouseUp, {
         once: true
       });
@@ -4580,25 +2828,25 @@ const MenuTrigger = ScrollAreaViewport.fastComponentRef(function MenuTrigger(com
     role: 'menuitem'
   } : {}, mixedToggleHandlers, elementProps, getButtonProps];
   const preFocusGuardRef = React__namespace.useRef(null);
-  const handlePreFocusGuardFocus = clamp.useStableCallback(event => {
+  const handlePreFocusGuardFocus = useButton.useStableCallback(event => {
     ReactDOM__namespace.flushSync(() => {
-      store.setOpen(false, clamp.createChangeEventDetails(clamp.focusOut, event.nativeEvent, event.currentTarget));
+      store.setOpen(false, useButton.createChangeEventDetails(useButton.focusOut, event.nativeEvent, event.currentTarget));
     });
-    const previousTabbable = ScrollAreaViewport.getTabbableBeforeElement(preFocusGuardRef.current);
+    const previousTabbable = InternalBackdrop.getTabbableBeforeElement(preFocusGuardRef.current);
     previousTabbable?.focus();
   });
-  const handleFocusTargetFocus = clamp.useStableCallback(event => {
+  const handleFocusTargetFocus = useButton.useStableCallback(event => {
     const currentPositionerElement = store.select('positionerElement');
-    if (currentPositionerElement && ScrollAreaViewport.isOutsideEvent(event, currentPositionerElement)) {
+    if (currentPositionerElement && InternalBackdrop.isOutsideEvent(event, currentPositionerElement)) {
       store.context.beforeContentFocusGuardRef.current?.focus();
     } else {
       ReactDOM__namespace.flushSync(() => {
-        store.setOpen(false, clamp.createChangeEventDetails(clamp.focusOut, event.nativeEvent, event.currentTarget));
+        store.setOpen(false, useButton.createChangeEventDetails(useButton.focusOut, event.nativeEvent, event.currentTarget));
       });
-      let nextTabbable = ScrollAreaViewport.getTabbableAfterElement(store.context.triggerFocusTargetRef.current || triggerElementRef.current);
-      while (nextTabbable !== null && clamp.contains(currentPositionerElement, nextTabbable)) {
+      let nextTabbable = InternalBackdrop.getTabbableAfterElement(store.context.triggerFocusTargetRef.current || triggerElementRef.current);
+      while (nextTabbable !== null && useButton.contains(currentPositionerElement, nextTabbable)) {
         const prevTabbable = nextTabbable;
-        nextTabbable = ScrollAreaViewport.getNextTabbable(nextTabbable);
+        nextTabbable = InternalBackdrop.getNextTabbable(nextTabbable);
         if (nextTabbable === prevTabbable) {
           break;
         }
@@ -4608,7 +2856,7 @@ const MenuTrigger = ScrollAreaViewport.fastComponentRef(function MenuTrigger(com
   });
   const element = useRenderElement.useRenderElement('button', componentProps, {
     enabled: !isInMenubar,
-    stateAttributesMapping: ScrollAreaViewport.pressableTriggerOpenStateMapping,
+    stateAttributesMapping: InternalBackdrop.pressableTriggerOpenStateMapping,
     state,
     ref,
     props
@@ -4621,7 +2869,7 @@ const MenuTrigger = ScrollAreaViewport.fastComponentRef(function MenuTrigger(com
       state: state,
       refs: ref,
       props: props,
-      stateAttributesMapping: ScrollAreaViewport.pressableTriggerOpenStateMapping
+      stateAttributesMapping: InternalBackdrop.pressableTriggerOpenStateMapping
     });
   }
 
@@ -4630,12 +2878,12 @@ const MenuTrigger = ScrollAreaViewport.fastComponentRef(function MenuTrigger(com
 
   if (isOpenedByThisTrigger) {
     return /*#__PURE__*/jsxRuntime.jsxs(React__namespace.Fragment, {
-      children: [/*#__PURE__*/jsxRuntime.jsx(ScrollAreaViewport.FocusGuard, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(InternalBackdrop.FocusGuard, {
         ref: preFocusGuardRef,
         onFocus: handlePreFocusGuardFocus
       }, `${thisTriggerId}-pre-focus-guard`), /*#__PURE__*/jsxRuntime.jsx(React__namespace.Fragment, {
         children: element
-      }, thisTriggerId), /*#__PURE__*/jsxRuntime.jsx(ScrollAreaViewport.FocusGuard, {
+      }, thisTriggerId), /*#__PURE__*/jsxRuntime.jsx(InternalBackdrop.FocusGuard, {
         ref: store.context.triggerFocusTargetRef,
         onFocus: handleFocusTargetFocus
       }, `${thisTriggerId}-post-focus-guard`)]
@@ -4650,14 +2898,14 @@ if (process.env.NODE_ENV !== "production") MenuTrigger.displayName = "MenuTrigge
  * Determines whether to ignore clicks after a hover-open.
  */
 function useStickIfOpen(open, openReason) {
-  const stickIfOpenTimeout = clamp.useTimeout();
+  const stickIfOpenTimeout = useButton.useTimeout();
   const [stickIfOpen, setStickIfOpen] = React__namespace.useState(false);
-  clamp.useIsoLayoutEffect(() => {
+  useButton.useIsoLayoutEffect(() => {
     if (open && openReason === 'trigger-hover') {
       // Only allow "patient" clicks to close the menu if it's open.
       // If they clicked within 500ms of the menu opening, keep it open.
       setStickIfOpen(true);
-      stickIfOpenTimeout.start(ScrollAreaViewport.PATIENT_CLICK_THRESHOLD, () => {
+      stickIfOpenTimeout.start(InternalBackdrop.PATIENT_CLICK_THRESHOLD, () => {
         setStickIfOpen(false);
       });
     } else if (!open) {
@@ -4714,12 +2962,12 @@ const MenuSubmenuTrigger = /*#__PURE__*/React__namespace.forwardRef(function Sub
     disabled: disabledProp = false,
     ...elementProps
   } = componentProps;
-  const listItem = useCompositeListItem();
+  const listItem = useCompositeListItem.useCompositeListItem();
   const menuPositionerContext = useMenuPositionerContext();
   const {
     store
   } = useMenuRootContext();
-  const thisTriggerId = clamp.useBaseUiId(idProp);
+  const thisTriggerId = useButton.useBaseUiId(idProp);
   const open = store.useState('open');
   const floatingRootContext = store.useState('floatingRootContext');
   const floatingTreeRoot = store.useState('floatingTreeRoot');
@@ -4787,14 +3035,14 @@ const MenuSubmenuTrigger = /*#__PURE__*/React__namespace.forwardRef(function Sub
     triggerElementRef,
     externalTree: floatingTreeRoot
   });
-  const click = ScrollAreaViewport.useClick(floatingRootContext, {
+  const click = InternalBackdrop.useClick(floatingRootContext, {
     enabled: !disabled,
     event: 'mousedown',
     toggle: !openOnHover,
     ignoreMouse: openOnHover,
     stickIfOpen: false
   });
-  const localInteractionProps = ScrollAreaViewport.useInteractions([click]);
+  const localInteractionProps = InternalBackdrop.useInteractions([click]);
   const rootTriggerProps = store.useState('triggerProps', true);
   delete rootTriggerProps.id;
   const state = {
@@ -4804,7 +3052,7 @@ const MenuSubmenuTrigger = /*#__PURE__*/React__namespace.forwardRef(function Sub
   };
   const element = useRenderElement.useRenderElement('div', componentProps, {
     state,
-    stateAttributesMapping: ScrollAreaViewport.triggerOpenStateMapping,
+    stateAttributesMapping: InternalBackdrop.triggerOpenStateMapping,
     props: [localInteractionProps.getReferenceProps(), hoverProps, rootTriggerProps, itemProps, {
       tabIndex: open || highlighted ? 0 : -1,
       onBlur() {
@@ -4819,10 +3067,8 @@ const MenuSubmenuTrigger = /*#__PURE__*/React__namespace.forwardRef(function Sub
 });
 if (process.env.NODE_ENV !== "production") MenuSubmenuTrigger.displayName = "MenuSubmenuTrigger";
 
-exports.CompositeList = CompositeList;
 exports.DrawerClose = DrawerClose;
 exports.DrawerTitle = DrawerTitle;
-exports.IndexGuessBehavior = IndexGuessBehavior;
 exports.MenuGroup = MenuGroup;
 exports.MenuGroupLabel = MenuGroupLabel;
 exports.MenuItem = MenuItem;
@@ -4839,15 +3085,8 @@ exports.MenuSubmenuRoot = MenuSubmenuRoot;
 exports.MenuSubmenuTrigger = MenuSubmenuTrigger;
 exports.MenuTrigger = MenuTrigger;
 exports.REGULAR_ITEM = REGULAR_ITEM;
-exports.getDisabledMountTransitionStyles = getDisabledMountTransitionStyles;
-exports.getPseudoElementBounds = getPseudoElementBounds;
 exports.itemMapping = itemMapping;
-exports.useAnchorPositioning = useAnchorPositioning;
-exports.useCompositeListItem = useCompositeListItem;
 exports.useContextMenuRootContext = useContextMenuRootContext;
-exports.useFloatingRootContext = useFloatingRootContext;
-exports.useListNavigation = useListNavigation;
 exports.useMenuItem = useMenuItem;
 exports.useMenuPositionerContext = useMenuPositionerContext;
 exports.useMenuRootContext = useMenuRootContext;
-exports.useTypeahead = useTypeahead;