@jobber/components 7.10.0 → 7.11.0

package/dist/MenuSubmenuTrigger-cjs.js

@@ -3,7 +3,10 @@
 var React = require('react');
 var DrawerRoot = require('./DrawerRoot-cjs.js');
 var useRenderElement = require('./useRenderElement-cjs.js');
+var useValueChanged = require('./useValueChanged-cjs.js');
+var useBaseUiId = require('./useBaseUiId-cjs.js');
 var jsxRuntime = require('react/jsx-runtime');
+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');
@@ -28,242 +31,6 @@ function _interopNamespaceDefault(e) {
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 var ReactDOM__namespace = /*#__PURE__*/_interopNamespaceDefault(ReactDOM);
 
-let set;
-if (process.env.NODE_ENV !== 'production') {
-  set = new Set();
-}
-function error(...messages) {
-  if (process.env.NODE_ENV !== 'production') {
-    const messageKey = messages.join(' ');
-    if (!set.has(messageKey)) {
-      set.add(messageKey);
-      console.error(`Base UI: ${messageKey}`);
-    }
-  }
-}
-
-const CompositeRootContext = /*#__PURE__*/React__namespace.createContext(undefined);
-if (process.env.NODE_ENV !== "production") CompositeRootContext.displayName = "CompositeRootContext";
-function useCompositeRootContext(optional = false) {
-  const context = React__namespace.useContext(CompositeRootContext);
-  if (context === undefined && !optional) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: CompositeRootContext is missing. Composite parts must be placed within <Composite.Root>.' : useRenderElement.formatErrorMessage(16));
-  }
-  return context;
-}
-
-function useFocusableWhenDisabled(parameters) {
-  const {
-    focusableWhenDisabled,
-    disabled,
-    composite = false,
-    tabIndex: tabIndexProp = 0,
-    isNativeButton
-  } = parameters;
-  const isFocusableComposite = composite && focusableWhenDisabled !== false;
-  const isNonFocusableComposite = composite && focusableWhenDisabled === false;
-
-  // we can't explicitly assign `undefined` to any of these props because it
-  // would otherwise prevent subsequently merged props from setting them
-  const props = React__namespace.useMemo(() => {
-    const additionalProps = {
-      // allow Tabbing away from focusableWhenDisabled elements
-      onKeyDown(event) {
-        if (disabled && focusableWhenDisabled && event.key !== 'Tab') {
-          event.preventDefault();
-        }
-      }
-    };
-    if (!composite) {
-      additionalProps.tabIndex = tabIndexProp;
-      if (!isNativeButton && disabled) {
-        additionalProps.tabIndex = focusableWhenDisabled ? tabIndexProp : -1;
-      }
-    }
-    if (isNativeButton && (focusableWhenDisabled || isFocusableComposite) || !isNativeButton && disabled) {
-      additionalProps['aria-disabled'] = disabled;
-    }
-    if (isNativeButton && (!focusableWhenDisabled || isNonFocusableComposite)) {
-      additionalProps.disabled = disabled;
-    }
-    return additionalProps;
-  }, [composite, disabled, focusableWhenDisabled, isFocusableComposite, isNonFocusableComposite, isNativeButton, tabIndexProp]);
-  return {
-    props
-  };
-}
-
-function useButton(parameters = {}) {
-  const {
-    disabled = false,
-    focusableWhenDisabled,
-    tabIndex = 0,
-    native: isNativeButton = true,
-    composite: compositeProp
-  } = parameters;
-  const elementRef = React__namespace.useRef(null);
-  const compositeRootContext = useCompositeRootContext(true);
-  const isCompositeItem = compositeProp ?? compositeRootContext !== undefined;
-  const {
-    props: focusableWhenDisabledProps
-  } = useFocusableWhenDisabled({
-    focusableWhenDisabled,
-    disabled,
-    composite: isCompositeItem,
-    tabIndex,
-    isNativeButton
-  });
-  if (process.env.NODE_ENV !== 'production') {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    React__namespace.useEffect(() => {
-      if (!elementRef.current) {
-        return;
-      }
-      const isButtonTag = isButtonElement(elementRef.current);
-      if (isNativeButton) {
-        if (!isButtonTag) {
-          const ownerStackMessage = DrawerRoot.SafeReact.captureOwnerStack?.() || '';
-          const message = 'A component that acts as a button expected a native <button> because the ' + '`nativeButton` prop is true. Rendering a non-<button> removes native button ' + 'semantics, which can impact forms and accessibility. Use a real <button> in the ' + '`render` prop, or set `nativeButton` to `false`.';
-          error(`${message}${ownerStackMessage}`);
-        }
-      } else if (isButtonTag) {
-        const ownerStackMessage = DrawerRoot.SafeReact.captureOwnerStack?.() || '';
-        const message = 'A component that acts as a button expected a non-<button> because the `nativeButton` ' + 'prop is false. Rendering a <button> keeps native behavior while Base UI applies ' + 'non-native attributes and handlers, which can add unintended extra attributes (such ' + 'as `role` or `aria-disabled`). Use a non-<button> in the `render` prop, or set ' + '`nativeButton` to `true`.';
-        error(`${message}${ownerStackMessage}`);
-      }
-    }, [isNativeButton]);
-  }
-
-  // handles a disabled composite button rendering another button, e.g.
-  // <Toolbar.Button disabled render={<Menu.Trigger />} />
-  // the `disabled` prop needs to pass through 2 `useButton`s then finally
-  // delete the `disabled` attribute from DOM
-  const updateDisabled = React__namespace.useCallback(() => {
-    const element = elementRef.current;
-    if (!isButtonElement(element)) {
-      return;
-    }
-    if (isCompositeItem && disabled && focusableWhenDisabledProps.disabled === undefined && element.disabled) {
-      element.disabled = false;
-    }
-  }, [disabled, focusableWhenDisabledProps.disabled, isCompositeItem]);
-  DrawerRoot.useIsoLayoutEffect(updateDisabled, [updateDisabled]);
-  const getButtonProps = React__namespace.useCallback((externalProps = {}) => {
-    const {
-      onClick: externalOnClick,
-      onMouseDown: externalOnMouseDown,
-      onKeyUp: externalOnKeyUp,
-      onKeyDown: externalOnKeyDown,
-      onPointerDown: externalOnPointerDown,
-      ...otherExternalProps
-    } = externalProps;
-    const type = isNativeButton ? 'button' : undefined;
-    return useRenderElement.mergeProps({
-      type,
-      onClick(event) {
-        if (disabled) {
-          event.preventDefault();
-          return;
-        }
-        externalOnClick?.(event);
-      },
-      onMouseDown(event) {
-        if (!disabled) {
-          externalOnMouseDown?.(event);
-        }
-      },
-      onKeyDown(event) {
-        if (disabled) {
-          return;
-        }
-        useRenderElement.makeEventPreventable(event);
-        externalOnKeyDown?.(event);
-        if (event.baseUIHandlerPrevented) {
-          return;
-        }
-        const isCurrentTarget = event.target === event.currentTarget;
-        const currentTarget = event.currentTarget;
-        const isButton = isButtonElement(currentTarget);
-        const isLink = !isNativeButton && isValidLinkElement(currentTarget);
-        const shouldClick = isCurrentTarget && (isNativeButton ? isButton : !isLink);
-        const isEnterKey = event.key === 'Enter';
-        const isSpaceKey = event.key === ' ';
-        const role = currentTarget.getAttribute('role');
-        const isTextNavigationRole = role?.startsWith('menuitem') || role === 'option' || role === 'gridcell';
-        if (isCurrentTarget && isCompositeItem && isSpaceKey) {
-          if (event.defaultPrevented && isTextNavigationRole) {
-            return;
-          }
-          event.preventDefault();
-          if (isLink || isNativeButton && isButton) {
-            currentTarget.click();
-            event.preventBaseUIHandler();
-          } else if (shouldClick) {
-            externalOnClick?.(event);
-            event.preventBaseUIHandler();
-          }
-          return;
-        }
-
-        // Keyboard accessibility for native and non-native elements.
-        if (shouldClick) {
-          if (!isNativeButton && (isSpaceKey || isEnterKey)) {
-            event.preventDefault();
-          }
-          if (!isNativeButton && isEnterKey) {
-            externalOnClick?.(event);
-          }
-        }
-      },
-      onKeyUp(event) {
-        if (disabled) {
-          return;
-        }
-
-        // calling preventDefault in keyUp on a <button> will not dispatch a click event if Space is pressed
-        // https://codesandbox.io/p/sandbox/button-keyup-preventdefault-dn7f0
-        useRenderElement.makeEventPreventable(event);
-        externalOnKeyUp?.(event);
-        if (event.target === event.currentTarget && isNativeButton && isCompositeItem && isButtonElement(event.currentTarget) && event.key === ' ') {
-          event.preventDefault();
-          return;
-        }
-        if (event.baseUIHandlerPrevented) {
-          return;
-        }
-
-        // Keyboard accessibility for non interactive elements
-        if (event.target === event.currentTarget && !isNativeButton && !isCompositeItem && event.key === ' ') {
-          externalOnClick?.(event);
-        }
-      },
-      onPointerDown(event) {
-        if (disabled) {
-          event.preventDefault();
-          return;
-        }
-        externalOnPointerDown?.(event);
-      }
-    }, !isNativeButton ? {
-      role: 'button'
-    } : undefined, focusableWhenDisabledProps, otherExternalProps);
-  }, [disabled, focusableWhenDisabledProps, isCompositeItem, isNativeButton]);
-  const buttonRef = DrawerRoot.useStableCallback(element => {
-    elementRef.current = element;
-    updateDisabled();
-  });
-  return {
-    getButtonProps,
-    buttonRef
-  };
-}
-function isButtonElement(elem) {
-  return index_esm.isHTMLElement(elem) && elem.tagName === 'BUTTON';
-}
-function isValidLinkElement(elem) {
-  return Boolean(elem?.tagName === 'A' && elem?.href);
-}
-
 /**
  * A button that closes the dialog.
  * Renders a `<button>` element.
@@ -284,13 +51,13 @@ const DialogClose = /*#__PURE__*/React__namespace.forwardRef(function DialogClos
   const open = store.useState('open');
   function handleClick(event) {
     if (open) {
-      store.setOpen(false, DrawerRoot.createChangeEventDetails(DrawerRoot.closePress, event.nativeEvent));
+      store.setOpen(false, useValueChanged.createChangeEventDetails(useValueChanged.closePress, event.nativeEvent));
     }
   }
   const {
     getButtonProps,
     buttonRef
-  } = useButton({
+  } = useBaseUiId.useButton({
     disabled,
     native: nativeButton
   });
@@ -315,17 +82,8 @@ if (process.env.NODE_ENV !== "production") DialogClose.displayName = "DialogClos
  */
 const DrawerClose = DialogClose;
 
-/**
- * Wraps `useId` and prefixes generated `id`s with `base-ui-`
- * @param {string | undefined} idOverride overrides the generated id when provided
- * @returns {string | undefined}
- */
-function useBaseUiId(idOverride) {
-  return DrawerRoot.useId(idOverride, 'base-ui');
-}
-
 function resolveValue(value, pointerType) {
-  if (pointerType != null && !DrawerRoot.isMouseLikePointerType(pointerType)) {
+  if (pointerType != null && !useValueChanged.isMouseLikePointerType(pointerType)) {
     return 0;
   }
   if (typeof value === 'function') {
@@ -364,11 +122,11 @@ function useClick(context, props = {}) {
     ignoreMouse = false,
     stickIfOpen = true,
     touchOpenDelay = 0,
-    reason = DrawerRoot.triggerPress
+    reason = useValueChanged.triggerPress
   } = props;
   const pointerTypeRef = React__namespace.useRef(undefined);
-  const frame = DrawerRoot.useAnimationFrame();
-  const touchOpenTimeout = DrawerRoot.useTimeout();
+  const frame = useValueChanged.useAnimationFrame();
+  const touchOpenTimeout = useValueChanged.useTimeout();
   const reference = React__namespace.useMemo(() => ({
     onPointerDown(event) {
       pointerTypeRef.current = event.pointerType;
@@ -380,7 +138,7 @@ function useClick(context, props = {}) {
 
       // Ignore all buttons except for the "main" button.
       // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
-      if (event.button !== 0 || eventOption === 'click' || DrawerRoot.isMouseLikePointerType(pointerType, true) && ignoreMouse) {
+      if (event.button !== 0 || eventOption === 'click' || useValueChanged.isMouseLikePointerType(pointerType, true) && ignoreMouse) {
         return;
       }
       const openEvent = dataRef.current.openEvent;
@@ -391,7 +149,7 @@ function useClick(context, props = {}) {
       // Animations sometimes won't run on a typeable element if using a rAF.
       // Focus is always set on these elements. For touch, we may delay opening.
       if (DrawerRoot.isTypeableElement(nativeEvent.target)) {
-        const details = DrawerRoot.createChangeEventDetails(reason, nativeEvent, nativeEvent.target);
+        const details = useValueChanged.createChangeEventDetails(reason, nativeEvent, nativeEvent.target);
         if (nextOpen && pointerType === 'touch' && touchOpenDelay > 0) {
           touchOpenTimeout.start(touchOpenDelay, () => {
             store.setOpen(true, details);
@@ -409,7 +167,7 @@ function useClick(context, props = {}) {
       // Wait until focus is set on the element. This is an alternative to
       // `event.preventDefault()` to avoid :focus-visible from appearing when using a pointer.
       frame.request(() => {
-        const details = DrawerRoot.createChangeEventDetails(reason, nativeEvent, eventCurrentTarget);
+        const details = useValueChanged.createChangeEventDetails(reason, nativeEvent, eventCurrentTarget);
         if (nextOpen && pointerType === 'touch' && touchOpenDelay > 0) {
           touchOpenTimeout.start(touchOpenDelay, () => {
             store.setOpen(true, details);
@@ -428,14 +186,14 @@ function useClick(context, props = {}) {
         pointerTypeRef.current = undefined;
         return;
       }
-      if (DrawerRoot.isMouseLikePointerType(pointerType, true) && ignoreMouse) {
+      if (useValueChanged.isMouseLikePointerType(pointerType, true) && ignoreMouse) {
         return;
       }
       const open = store.select('open');
       const openEvent = dataRef.current.openEvent;
       const hasClickedOnInactiveTrigger = store.select('domReferenceElement') !== event.currentTarget;
-      const nextOpen = open && hasClickedOnInactiveTrigger || !(open && toggle && (openEvent && stickIfOpen ? DrawerRoot.isClickLikeEvent(openEvent) : true));
-      const details = DrawerRoot.createChangeEventDetails(reason, event.nativeEvent, event.currentTarget);
+      const nextOpen = open && hasClickedOnInactiveTrigger || !(open && toggle && (openEvent && stickIfOpen ? useValueChanged.isClickLikeEvent(openEvent) : true));
+      const details = useValueChanged.createChangeEventDetails(reason, event.nativeEvent, event.currentTarget);
       if (nextOpen && pointerType === 'touch' && touchOpenDelay > 0) {
         touchOpenTimeout.start(touchOpenDelay, () => {
           store.setOpen(true, details);
@@ -459,11 +217,11 @@ function useFloatingRootContext(options) {
     onOpenChange,
     elements = {}
   } = options;
-  const floatingId = DrawerRoot.useId();
+  const floatingId = useValueChanged.useId();
   const nested = DrawerRoot.useFloatingParentNodeId() != null;
   if (process.env.NODE_ENV !== 'production') {
     const optionDomReference = elements.reference;
-    if (optionDomReference && !index_esm.isElement(optionDomReference)) {
+    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.');
     }
   }
@@ -477,7 +235,7 @@ function useFloatingRootContext(options) {
     nested,
     noEmit: false
   })).current;
-  DrawerRoot.useIsoLayoutEffect(() => {
+  useValueChanged.useIsoLayoutEffect(() => {
     const valuesToSync = {
       open,
       floatingId
@@ -486,7 +244,7 @@ function useFloatingRootContext(options) {
     // Only sync elements that are defined to avoid overwriting existing ones
     if (elements.reference !== undefined) {
       valuesToSync.referenceElement = elements.reference;
-      valuesToSync.domReferenceElement = index_esm.isElement(elements.reference) ? elements.reference : null;
+      valuesToSync.domReferenceElement = floatingUi_utils_dom.isElement(elements.reference) ? elements.reference : null;
     }
     if (elements.floating !== undefined) {
       valuesToSync.floatingElement = elements.floating;
@@ -518,7 +276,7 @@ function useFloating(options = {}) {
   const [positionReference, setPositionReferenceRaw] = React__namespace.useState(null);
   const domReferenceRef = React__namespace.useRef(null);
   const tree = DrawerRoot.useFloatingTree(externalTree);
-  DrawerRoot.useIsoLayoutEffect(() => {
+  useValueChanged.useIsoLayoutEffect(() => {
     if (rootContextElements.domReference) {
       domReferenceRef.current = rootContextElements.domReference;
     }
@@ -533,7 +291,7 @@ function useFloating(options = {}) {
     }
   });
   const setPositionReference = React__namespace.useCallback(node => {
-    const computedPositionReference = index_esm.isElement(node) ? {
+    const computedPositionReference = floatingUi_utils_dom.isElement(node) ? {
       getBoundingClientRect: () => node.getBoundingClientRect(),
       getClientRects: () => node.getClientRects(),
       contextElement: node
@@ -546,21 +304,21 @@ function useFloating(options = {}) {
   const [localDomReference, setLocalDomReference] = React__namespace.useState(null);
   const [localFloatingElement, setLocalFloatingElement] = React__namespace.useState(null);
   rootContext.useSyncedValue('referenceElement', localDomReference);
-  rootContext.useSyncedValue('domReferenceElement', index_esm.isElement(localDomReference) ? localDomReference : null);
+  rootContext.useSyncedValue('domReferenceElement', floatingUi_utils_dom.isElement(localDomReference) ? localDomReference : null);
   rootContext.useSyncedValue('floatingElement', localFloatingElement);
   const setReference = React__namespace.useCallback(node => {
-    if (index_esm.isElement(node) || node === null) {
+    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 (index_esm.isElement(position.refs.reference.current) || position.refs.reference.current === null ||
+    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 && !index_esm.isElement(node)) {
+    node !== null && !floatingUi_utils_dom.isElement(node)) {
       position.refs.setReference(node);
     }
   }, [position.refs, setLocalDomReference]);
@@ -593,7 +351,7 @@ function useFloating(options = {}) {
     nodeId,
     rootStore: rootContext
   }), [position, refs, elements, nodeId, rootContext, open, floatingId]);
-  DrawerRoot.useIsoLayoutEffect(() => {
+  useValueChanged.useIsoLayoutEffect(() => {
     rootContext.context.dataRef.current.floatingContext = context;
     const node = tree?.nodesRef.current.find(n => n.id === nodeId);
     if (node) {
@@ -609,7 +367,7 @@ function useFloating(options = {}) {
   }), [position, refs, elements, context, rootContext]);
 }
 
-const isMacSafari = DrawerRoot.isMac && DrawerRoot.isSafari;
+const isMacSafari = useValueChanged.isMac && useValueChanged.isSafari;
 /**
  * Opens the floating element while the reference element has focus, like CSS
  * `:focus`.
@@ -628,21 +386,21 @@ 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 = DrawerRoot.useTimeout();
+  const timeout = useValueChanged.useTimeout();
   const keyboardModalityRef = React__namespace.useRef(true);
   React__namespace.useEffect(() => {
     const domReference = store.select('domReferenceElement');
     if (!enabled) {
       return undefined;
     }
-    const win = index_esm.getWindow(domReference);
+    const win = floatingUi_utils_dom.getWindow(domReference);
 
     // If the reference was focused and the user left the tab/window, and the
     // floating element was not open, the focus should be blocked when they
     // return to the tab/window.
     function onBlur() {
       const currentDomReference = store.select('domReferenceElement');
-      if (!store.select('open') && index_esm.isHTMLElement(currentDomReference) && currentDomReference === DrawerRoot.activeElement(DrawerRoot.ownerDocument(currentDomReference))) {
+      if (!store.select('open') && floatingUi_utils_dom.isHTMLElement(currentDomReference) && currentDomReference === DrawerRoot.activeElement(useValueChanged.ownerDocument(currentDomReference))) {
         blockFocusRef.current = true;
       }
     }
@@ -670,9 +428,9 @@ function useFocus(context, props = {}) {
       return undefined;
     }
     function onOpenChangeLocal(details) {
-      if (details.reason === DrawerRoot.triggerPress || details.reason === DrawerRoot.escapeKey) {
+      if (details.reason === useValueChanged.triggerPress || details.reason === useValueChanged.escapeKey) {
         const referenceElement = store.select('domReferenceElement');
-        if (index_esm.isElement(referenceElement)) {
+        if (floatingUi_utils_dom.isElement(referenceElement)) {
           blockedReferenceRef.current = referenceElement;
           blockFocusRef.current = true;
         }
@@ -698,7 +456,7 @@ function useFocus(context, props = {}) {
         blockedReferenceRef.current = null;
       }
       const target = DrawerRoot.getTarget(event.nativeEvent);
-      if (index_esm.isElement(target)) {
+      if (floatingUi_utils_dom.isElement(target)) {
         // Safari fails to match `:focus-visible` if focus was initially
         // outside the document.
         if (isMacSafari && !event.relatedTarget) {
@@ -716,14 +474,14 @@ function useFocus(context, props = {}) {
       } = event;
       const delayValue = typeof delay === 'function' ? delay() : delay;
       if (store.select('open') && movedFromOtherEnabledTrigger || delayValue === 0 || delayValue === undefined) {
-        store.setOpen(true, DrawerRoot.createChangeEventDetails(DrawerRoot.triggerFocus, nativeEvent, currentTarget));
+        store.setOpen(true, useValueChanged.createChangeEventDetails(useValueChanged.triggerFocus, nativeEvent, currentTarget));
         return;
       }
       timeout.start(delayValue, () => {
         if (blockFocusRef.current) {
           return;
         }
-        store.setOpen(true, DrawerRoot.createChangeEventDetails(DrawerRoot.triggerFocus, nativeEvent, currentTarget));
+        store.setOpen(true, useValueChanged.createChangeEventDetails(useValueChanged.triggerFocus, nativeEvent, currentTarget));
       });
     },
     onBlur(event) {
@@ -734,7 +492,7 @@ function useFocus(context, props = {}) {
 
       // Hit the non-modal focus management portal guard. Focus will be
       // moved into the floating element immediately after.
-      const movedToFocusGuard = index_esm.isElement(relatedTarget) && relatedTarget.hasAttribute(DrawerRoot.createAttribute('focus-guard')) && relatedTarget.getAttribute('data-type') === 'outside';
+      const movedToFocusGuard = floatingUi_utils_dom.isElement(relatedTarget) && relatedTarget.hasAttribute(DrawerRoot.createAttribute('focus-guard')) && relatedTarget.getAttribute('data-type') === 'outside';
 
       // Wait for the window blur listener to fire.
       timeout.start(0, () => {
@@ -764,7 +522,7 @@ function useFocus(context, props = {}) {
         if (DrawerRoot.isTargetInsideEnabledTrigger(nextFocusedElement, store.context.triggerElements)) {
           return;
         }
-        store.setOpen(false, DrawerRoot.createChangeEventDetails(DrawerRoot.triggerFocus, nativeEvent));
+        store.setOpen(false, useValueChanged.createChangeEventDetails(useValueChanged.triggerFocus, nativeEvent));
       });
     }
   }), [dataRef, store, timeout, delay]);
@@ -789,8 +547,8 @@ class HoverInteraction {
     this.pointerEventsReferenceElement = null;
     this.pointerEventsFloatingElement = null;
     this.restTimeoutPending = false;
-    this.openChangeTimeout = new DrawerRoot.Timeout();
-    this.restTimeout = new DrawerRoot.Timeout();
+    this.openChangeTimeout = new useValueChanged.Timeout();
+    this.restTimeout = new useValueChanged.Timeout();
     this.handleCloseOptions = undefined;
   }
   static create() {
@@ -837,7 +595,7 @@ function useHoverInteractionSharedState(store) {
   if (!data.hoverInteractionState) {
     data.hoverInteractionState = instance;
   }
-  DrawerRoot.useOnMount(data.hoverInteractionState.disposeEffect);
+  useValueChanged.useOnMount(data.hoverInteractionState.disposeEffect);
   return data.hoverInteractionState;
 }
 
@@ -859,20 +617,20 @@ function useHoverFloatingInteraction(context, parameters = {}) {
   const instance = useHoverInteractionSharedState(store);
   const tree = DrawerRoot.useFloatingTree();
   const parentId = DrawerRoot.useFloatingParentNodeId();
-  const isClickLikeOpenEvent$1 = DrawerRoot.useStableCallback(() => {
+  const isClickLikeOpenEvent$1 = useValueChanged.useStableCallback(() => {
     return isClickLikeOpenEvent(dataRef.current.openEvent?.type, instance.interactedInside);
   });
-  const isHoverOpen = DrawerRoot.useStableCallback(() => {
+  const isHoverOpen = useValueChanged.useStableCallback(() => {
     const type = dataRef.current.openEvent?.type;
     return type?.includes('mouse') && type !== 'mousedown';
   });
-  const isRelatedTargetInsideEnabledTrigger = DrawerRoot.useStableCallback(target => {
+  const isRelatedTargetInsideEnabledTrigger = useValueChanged.useStableCallback(target => {
     return DrawerRoot.isTargetInsideEnabledTrigger(target, store.context.triggerElements);
   });
   const closeWithDelay = React__namespace.useCallback(event => {
     const closeDelay = getDelay(closeDelayProp, 'close', instance.pointerType);
     const close = () => {
-      store.setOpen(false, DrawerRoot.createChangeEventDetails(DrawerRoot.triggerHover, event));
+      store.setOpen(false, useValueChanged.createChangeEventDetails(useValueChanged.triggerHover, event));
       tree?.events.emit('floating.closed', event);
     };
     if (closeDelay) {
@@ -882,10 +640,10 @@ function useHoverFloatingInteraction(context, parameters = {}) {
       close();
     }
   }, [closeDelayProp, store, instance, tree]);
-  const clearPointerEvents = DrawerRoot.useStableCallback(() => {
+  const clearPointerEvents = useValueChanged.useStableCallback(() => {
     clearSafePolygonPointerEventsMutation(instance);
   });
-  const handleInteractInside = DrawerRoot.useStableCallback(event => {
+  const handleInteractInside = useValueChanged.useStableCallback(event => {
     const target = DrawerRoot.getTarget(event);
     if (!isInteractiveElement(target)) {
       instance.interactedInside = false;
@@ -893,7 +651,7 @@ function useHoverFloatingInteraction(context, parameters = {}) {
     }
     instance.interactedInside = target?.closest('[aria-haspopup]') != null;
   });
-  DrawerRoot.useIsoLayoutEffect(() => {
+  useValueChanged.useIsoLayoutEffect(() => {
     if (!open) {
       instance.pointerType = undefined;
       instance.restTimeoutPending = false;
@@ -904,14 +662,14 @@ function useHoverFloatingInteraction(context, parameters = {}) {
   React__namespace.useEffect(() => {
     return clearPointerEvents;
   }, [clearPointerEvents]);
-  DrawerRoot.useIsoLayoutEffect(() => {
+  useValueChanged.useIsoLayoutEffect(() => {
     if (!enabled) {
       return undefined;
     }
-    if (open && instance.handleCloseOptions?.blockPointerEvents && isHoverOpen() && index_esm.isElement(domReferenceElement) && floatingElement) {
+    if (open && instance.handleCloseOptions?.blockPointerEvents && isHoverOpen() && floatingUi_utils_dom.isElement(domReferenceElement) && floatingElement) {
       const ref = domReferenceElement;
       const floatingEl = floatingElement;
-      const doc = DrawerRoot.ownerDocument(floatingElement);
+      const doc = useValueChanged.ownerDocument(floatingElement);
       const parentFloating = tree?.nodesRef.current.find(node => node.id === parentId)?.context?.elements.floating;
       if (parentFloating) {
         parentFloating.style.pointerEvents = '';
@@ -928,7 +686,7 @@ function useHoverFloatingInteraction(context, parameters = {}) {
     }
     return undefined;
   }, [enabled, open, domReferenceElement, floatingElement, instance, isHoverOpen, tree, parentId, clearPointerEvents]);
-  const childClosedTimeout = DrawerRoot.useTimeout();
+  const childClosedTimeout = useValueChanged.useTimeout();
   React__namespace.useEffect(() => {
     if (!enabled) {
       return undefined;
@@ -967,7 +725,7 @@ function useHoverFloatingInteraction(context, parameters = {}) {
       // 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, DrawerRoot.createChangeEventDetails(DrawerRoot.triggerHover, event));
+        store.setOpen(false, useValueChanged.createChangeEventDetails(useValueChanged.triggerHover, event));
         tree.events.emit('floating.closed', event);
       });
     }
@@ -1016,21 +774,21 @@ function useHoverReferenceInteraction(context, props = {}) {
   } = props;
   const tree = DrawerRoot.useFloatingTree(externalTree);
   const instance = useHoverInteractionSharedState(store);
-  const handleCloseRef = DrawerRoot.useValueAsRef(handleClose);
-  const delayRef = DrawerRoot.useValueAsRef(delay);
-  const restMsRef = DrawerRoot.useValueAsRef(restMs);
-  const enabledRef = DrawerRoot.useValueAsRef(enabled);
+  const handleCloseRef = useValueChanged.useValueAsRef(handleClose);
+  const delayRef = useValueChanged.useValueAsRef(delay);
+  const restMsRef = useValueChanged.useValueAsRef(restMs);
+  const enabledRef = useValueChanged.useValueAsRef(enabled);
   if (isActiveTrigger) {
     // eslint-disable-next-line no-underscore-dangle
     instance.handleCloseOptions = handleCloseRef.current?.__options;
   }
-  const isClickLikeOpenEvent$1 = DrawerRoot.useStableCallback(() => {
+  const isClickLikeOpenEvent$1 = useValueChanged.useStableCallback(() => {
     return isClickLikeOpenEvent(dataRef.current.openEvent?.type, instance.interactedInside);
   });
-  const isRelatedTargetInsideEnabledTrigger = DrawerRoot.useStableCallback(target => {
+  const isRelatedTargetInsideEnabledTrigger = useValueChanged.useStableCallback(target => {
     return DrawerRoot.isTargetInsideEnabledTrigger(target, store.context.triggerElements);
   });
-  const isOverInactiveTrigger = DrawerRoot.useStableCallback((currentDomReference, currentTarget, target) => {
+  const isOverInactiveTrigger = useValueChanged.useStableCallback((currentDomReference, currentTarget, target) => {
     const allTriggers = store.context.triggerElements;
 
     // Fast path for normal usage where handlers are attached directly to triggers.
@@ -1039,7 +797,7 @@ function useHoverReferenceInteraction(context, props = {}) {
     }
 
     // Fallback for delegated/wrapper usage where currentTarget may be outside the trigger map.
-    if (!index_esm.isElement(target)) {
+    if (!floatingUi_utils_dom.isElement(target)) {
       return false;
     }
     const targetElement = target;
@@ -1049,25 +807,25 @@ function useHoverReferenceInteraction(context, props = {}) {
     const closeDelay = getDelay(delayRef.current, 'close', instance.pointerType);
     if (closeDelay) {
       instance.openChangeTimeout.start(closeDelay, () => {
-        store.setOpen(false, DrawerRoot.createChangeEventDetails(DrawerRoot.triggerHover, event));
+        store.setOpen(false, useValueChanged.createChangeEventDetails(useValueChanged.triggerHover, event));
         tree?.events.emit('floating.closed', event);
       });
     } else if (runElseBranch) {
       instance.openChangeTimeout.clear();
-      store.setOpen(false, DrawerRoot.createChangeEventDetails(DrawerRoot.triggerHover, event));
+      store.setOpen(false, useValueChanged.createChangeEventDetails(useValueChanged.triggerHover, event));
       tree?.events.emit('floating.closed', event);
     }
   }, [delayRef, store, instance, tree]);
-  const cleanupMouseMoveHandler = DrawerRoot.useStableCallback(() => {
+  const cleanupMouseMoveHandler = useValueChanged.useStableCallback(() => {
     if (!instance.handler) {
       return;
     }
-    const doc = DrawerRoot.ownerDocument(store.select('domReferenceElement'));
+    const doc = useValueChanged.ownerDocument(store.select('domReferenceElement'));
     doc.removeEventListener('mousemove', instance.handler);
     instance.handler = undefined;
   });
   React__namespace.useEffect(() => cleanupMouseMoveHandler, [cleanupMouseMoveHandler]);
-  const clearPointerEvents = DrawerRoot.useStableCallback(() => {
+  const clearPointerEvents = useValueChanged.useStableCallback(() => {
     clearSafePolygonPointerEventsMutation(instance);
   });
 
@@ -1096,13 +854,13 @@ function useHoverReferenceInteraction(context, props = {}) {
       return undefined;
     }
     const trigger = triggerElementRef.current ?? (isActiveTrigger ? store.select('domReferenceElement') : null);
-    if (!index_esm.isElement(trigger)) {
+    if (!floatingUi_utils_dom.isElement(trigger)) {
       return undefined;
     }
     function onMouseEnter(event) {
       instance.openChangeTimeout.clear();
       instance.blockMouseMove = false;
-      if (mouseOnly && !DrawerRoot.isMouseLikePointerType(instance.pointerType)) {
+      if (mouseOnly && !useValueChanged.isMouseLikePointerType(instance.pointerType)) {
         return;
       }
 
@@ -1121,15 +879,15 @@ function useHoverReferenceInteraction(context, props = {}) {
 
       // When moving between triggers while already open, open immediately without delay
       if (isOverInactive && isOpen) {
-        store.setOpen(true, DrawerRoot.createChangeEventDetails(DrawerRoot.triggerHover, event, triggerNode));
+        store.setOpen(true, useValueChanged.createChangeEventDetails(useValueChanged.triggerHover, event, triggerNode));
       } else if (openDelay) {
         instance.openChangeTimeout.start(openDelay, () => {
           if (shouldOpen) {
-            store.setOpen(true, DrawerRoot.createChangeEventDetails(DrawerRoot.triggerHover, event, triggerNode));
+            store.setOpen(true, useValueChanged.createChangeEventDetails(useValueChanged.triggerHover, event, triggerNode));
           }
         });
       } else if (shouldOpen) {
-        store.setOpen(true, DrawerRoot.createChangeEventDetails(DrawerRoot.triggerHover, event, triggerNode));
+        store.setOpen(true, useValueChanged.createChangeEventDetails(useValueChanged.triggerHover, event, triggerNode));
       }
     }
     function onMouseLeave(event) {
@@ -1139,7 +897,7 @@ function useHoverReferenceInteraction(context, props = {}) {
       }
       cleanupMouseMoveHandler();
       const domReferenceElement = store.select('domReferenceElement');
-      const doc = DrawerRoot.ownerDocument(domReferenceElement);
+      const doc = useValueChanged.ownerDocument(domReferenceElement);
       instance.restTimeout.clear();
       instance.restTimeoutPending = false;
       const handleCloseContextBase = dataRef.current.floatingContext ?? getHandleCloseContext?.();
@@ -1207,7 +965,7 @@ function useHoverReferenceInteraction(context, props = {}) {
         const currentDomReference = store.select('domReferenceElement');
         const currentOpen = store.select('open');
         const isOverInactive = isOverInactiveTrigger(currentDomReference, trigger, event.target);
-        if (mouseOnly && !DrawerRoot.isMouseLikePointerType(instance.pointerType)) {
+        if (mouseOnly && !useValueChanged.isMouseLikePointerType(instance.pointerType)) {
           return;
         }
         const restMsValue = getRestMs(restMsRef.current);
@@ -1228,7 +986,7 @@ function useHoverReferenceInteraction(context, props = {}) {
           }
           const latestOpen = store.select('open');
           if (!instance.blockMouseMove && (!latestOpen || isOverInactive)) {
-            store.setOpen(true, DrawerRoot.createChangeEventDetails(DrawerRoot.triggerHover, nativeEvent, trigger));
+            store.setOpen(true, useValueChanged.createChangeEventDetails(useValueChanged.triggerHover, nativeEvent, trigger));
           }
         }
         if (instance.pointerType === 'touch') {
@@ -1327,10 +1085,10 @@ function useListNavigation(context, props) {
     }
   }
   const floatingFocusElement = DrawerRoot.getFloatingFocusElement(floatingElement);
-  const floatingFocusElementRef = DrawerRoot.useValueAsRef(floatingFocusElement);
+  const floatingFocusElementRef = useValueChanged.useValueAsRef(floatingFocusElement);
   const parentId = DrawerRoot.useFloatingParentNodeId();
   const tree = DrawerRoot.useFloatingTree(externalTree);
-  DrawerRoot.useIsoLayoutEffect(() => {
+  useValueChanged.useIsoLayoutEffect(() => {
     dataRef.current.orientation = orientation;
   }, [dataRef, orientation]);
   const typeableComboboxReference = DrawerRoot.isTypeableCombobox(domReferenceElement);
@@ -1338,7 +1096,7 @@ function useListNavigation(context, props) {
   const indexRef = React__namespace.useRef(selectedIndex ?? -1);
   const keyRef = React__namespace.useRef(null);
   const isPointerModalityRef = React__namespace.useRef(true);
-  const onNavigate = DrawerRoot.useStableCallback(event => {
+  const onNavigate = useValueChanged.useStableCallback(event => {
     onNavigateProp(indexRef.current === -1 ? null : indexRef.current, event);
   });
   const previousOnNavigateRef = React__namespace.useRef(onNavigate);
@@ -1346,11 +1104,11 @@ function useListNavigation(context, props) {
   const previousOpenRef = React__namespace.useRef(open);
   const forceSyncFocusRef = React__namespace.useRef(false);
   const forceScrollIntoViewRef = React__namespace.useRef(false);
-  const disabledIndicesRef = DrawerRoot.useValueAsRef(disabledIndices);
-  const latestOpenRef = DrawerRoot.useValueAsRef(open);
-  const selectedIndexRef = DrawerRoot.useValueAsRef(selectedIndex);
-  const resetOnPointerLeaveRef = DrawerRoot.useValueAsRef(resetOnPointerLeave);
-  const focusItem = DrawerRoot.useStableCallback(() => {
+  const disabledIndicesRef = useValueChanged.useValueAsRef(disabledIndices);
+  const latestOpenRef = useValueChanged.useValueAsRef(open);
+  const selectedIndexRef = useValueChanged.useValueAsRef(selectedIndex);
+  const resetOnPointerLeaveRef = useValueChanged.useValueAsRef(resetOnPointerLeave);
+  const focusItem = useValueChanged.useStableCallback(() => {
     function runFocus(item) {
       if (virtual) {
         tree?.events.emit('virtualfocus', item);
@@ -1391,7 +1149,7 @@ function useListNavigation(context, props) {
 
   // Sync `selectedIndex` to be the `activeIndex` upon opening the floating
   // element. Also, reset `activeIndex` upon closing the floating element.
-  DrawerRoot.useIsoLayoutEffect(() => {
+  useValueChanged.useIsoLayoutEffect(() => {
     if (!enabled) {
       return;
     }
@@ -1414,7 +1172,7 @@ function useListNavigation(context, props) {
 
   // Sync `activeIndex` to be the focused item while the floating element is
   // open.
-  DrawerRoot.useIsoLayoutEffect(() => {
+  useValueChanged.useIsoLayoutEffect(() => {
     if (!enabled) {
       return;
     }
@@ -1468,13 +1226,13 @@ function useListNavigation(context, props) {
 
   // 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.
-  DrawerRoot.useIsoLayoutEffect(() => {
+  useValueChanged.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 = DrawerRoot.activeElement(DrawerRoot.ownerDocument(floatingElement));
+    const activeEl = DrawerRoot.activeElement(useValueChanged.ownerDocument(floatingElement));
     const treeContainsActiveEl = nodes.some(node => node.context && DrawerRoot.contains(node.context.elements.floating, activeEl));
     if (parent && !treeContainsActiveEl && isPointerModalityRef.current) {
       parent.focus({
@@ -1482,12 +1240,12 @@ function useListNavigation(context, props) {
       });
     }
   }, [enabled, floatingElement, tree, parentId, virtual]);
-  DrawerRoot.useIsoLayoutEffect(() => {
+  useValueChanged.useIsoLayoutEffect(() => {
     previousOnNavigateRef.current = onNavigate;
     previousOpenRef.current = open;
     previousMountedRef.current = !!floatingElement;
   });
-  DrawerRoot.useIsoLayoutEffect(() => {
+  useValueChanged.useIsoLayoutEffect(() => {
     if (!open) {
       keyRef.current = null;
       focusItemOnOpenRef.current = focusItemOnOpen;
@@ -1542,7 +1300,7 @@ function useListNavigation(context, props) {
         onNavigate(event);
         if (!virtual) {
           const floatingFocusEl = floatingFocusElementRef.current;
-          const activeEl = DrawerRoot.activeElement(DrawerRoot.ownerDocument(floatingFocusEl));
+          const activeEl = DrawerRoot.activeElement(useValueChanged.ownerDocument(floatingFocusEl));
           if (floatingFocusEl && DrawerRoot.contains(floatingFocusEl, activeEl)) {
             floatingFocusEl.focus({
               preventScroll: true
@@ -1556,7 +1314,7 @@ function useListNavigation(context, props) {
   const getParentOrientation = React__namespace.useCallback(() => {
     return parentOrientation ?? tree?.nodesRef.current.find(node => node.id === parentId)?.context?.dataRef?.current.orientation;
   }, [parentId, tree, parentOrientation]);
-  const commonOnKeyDown = DrawerRoot.useStableCallback(event => {
+  const commonOnKeyDown = useValueChanged.useStableCallback(event => {
     isPointerModalityRef.current = false;
     forceSyncFocusRef.current = true;
 
@@ -1578,10 +1336,10 @@ function useListNavigation(context, props) {
       // 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())) {
-        DrawerRoot.stopEvent(event);
+        useValueChanged.stopEvent(event);
       }
-      store.setOpen(false, DrawerRoot.createChangeEventDetails(DrawerRoot.listNavigation, event.nativeEvent));
-      if (index_esm.isHTMLElement(domReferenceElement)) {
+      store.setOpen(false, useValueChanged.createChangeEventDetails(useValueChanged.listNavigation, event.nativeEvent));
+      if (floatingUi_utils_dom.isHTMLElement(domReferenceElement)) {
         if (virtual) {
           tree?.events.emit('virtualfocus', domReferenceElement);
         } else {
@@ -1595,12 +1353,12 @@ function useListNavigation(context, props) {
     const maxIndex = DrawerRoot.getMaxListIndex(listRef, disabledIndices);
     if (!typeableComboboxReference) {
       if (event.key === 'Home') {
-        DrawerRoot.stopEvent(event);
+        useValueChanged.stopEvent(event);
         indexRef.current = minIndex;
         onNavigate(event);
       }
       if (event.key === 'End') {
-        DrawerRoot.stopEvent(event);
+        useValueChanged.stopEvent(event);
         indexRef.current = maxIndex;
         onNavigate(event);
       }
@@ -1650,7 +1408,7 @@ function useListNavigation(context, props) {
       }
     }
     if (isMainOrientationKey(event.key, orientation)) {
-      DrawerRoot.stopEvent(event);
+      useValueChanged.stopEvent(event);
 
       // Reset the index if no item is focused.
       if (open && !virtual && DrawerRoot.activeElement(event.currentTarget.ownerDocument) === event.currentTarget) {
@@ -1728,9 +1486,9 @@ function useListNavigation(context, props) {
           if (target && !DrawerRoot.contains(floatingFocusElementRef.current, target)) {
             return;
           }
-          DrawerRoot.stopEvent(event);
-          store.setOpen(false, DrawerRoot.createChangeEventDetails(DrawerRoot.focusOut, event.nativeEvent));
-          if (index_esm.isHTMLElement(domReferenceElement)) {
+          useValueChanged.stopEvent(event);
+          store.setOpen(false, useValueChanged.createChangeEventDetails(useValueChanged.focusOut, event.nativeEvent));
+          if (floatingUi_utils_dom.isHTMLElement(domReferenceElement)) {
             domReferenceElement.focus();
           }
           return;
@@ -1744,14 +1502,14 @@ function useListNavigation(context, props) {
   }, [ariaActiveDescendantProp, commonOnKeyDown, floatingFocusElementRef, orientation, typeableComboboxReference, store, open, virtual, domReferenceElement]);
   const trigger = React__namespace.useMemo(() => {
     function checkVirtualMouse(event) {
-      if (focusItemOnOpen === 'auto' && DrawerRoot.isVirtualClick(event.nativeEvent)) {
+      if (focusItemOnOpen === 'auto' && useValueChanged.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' && DrawerRoot.isVirtualPointerEvent(event.nativeEvent)) {
+      if (focusItemOnOpen === 'auto' && useValueChanged.isVirtualPointerEvent(event.nativeEvent)) {
         focusItemOnOpenRef.current = true;
       }
     }
@@ -1779,12 +1537,12 @@ function useListNavigation(context, props) {
         }
         if (nested) {
           if (isParentCrossOpenKey) {
-            DrawerRoot.stopEvent(event);
+            useValueChanged.stopEvent(event);
             if (currentOpen) {
               indexRef.current = DrawerRoot.getMinListIndex(listRef, disabledIndicesRef.current);
               onNavigate(event);
             } else {
-              store.setOpen(true, DrawerRoot.createChangeEventDetails(DrawerRoot.listNavigation, event.nativeEvent, event.currentTarget));
+              store.setOpen(true, useValueChanged.createChangeEventDetails(useValueChanged.listNavigation, event.nativeEvent, event.currentTarget));
             }
           }
           return undefined;
@@ -1793,9 +1551,9 @@ function useListNavigation(context, props) {
           if (selectedIndexRef.current != null) {
             indexRef.current = selectedIndexRef.current;
           }
-          DrawerRoot.stopEvent(event);
+          useValueChanged.stopEvent(event);
           if (!currentOpen && openOnArrowKeyDown) {
-            store.setOpen(true, DrawerRoot.createChangeEventDetails(DrawerRoot.listNavigation, event.nativeEvent, event.currentTarget));
+            store.setOpen(true, useValueChanged.createChangeEventDetails(useValueChanged.listNavigation, event.nativeEvent, event.currentTarget));
           } else {
             commonOnKeyDown(event);
           }
@@ -1850,11 +1608,11 @@ function useTypeahead(context, props) {
     resetMs = 750,
     selectedIndex = null
   } = props;
-  const timeout = DrawerRoot.useTimeout();
+  const timeout = useValueChanged.useTimeout();
   const stringRef = React__namespace.useRef('');
   const prevIndexRef = React__namespace.useRef(selectedIndex ?? activeIndex ?? -1);
   const matchIndexRef = React__namespace.useRef(null);
-  DrawerRoot.useIsoLayoutEffect(() => {
+  useValueChanged.useIsoLayoutEffect(() => {
     if (!open && selectedIndex !== null) {
       return;
     }
@@ -1864,13 +1622,13 @@ function useTypeahead(context, props) {
       stringRef.current = '';
     }
   }, [open, selectedIndex, timeout]);
-  DrawerRoot.useIsoLayoutEffect(() => {
+  useValueChanged.useIsoLayoutEffect(() => {
     // Sync arrow key navigation but not typeahead navigation.
     if (open && stringRef.current === '') {
       prevIndexRef.current = selectedIndex ?? activeIndex ?? -1;
     }
   }, [open, selectedIndex, activeIndex]);
-  const setTypingChange = DrawerRoot.useStableCallback(value => {
+  const setTypingChange = useValueChanged.useStableCallback(value => {
     if (value) {
       if (!dataRef.current.typing) {
         dataRef.current.typing = value;
@@ -1881,7 +1639,7 @@ function useTypeahead(context, props) {
       onTypingChange?.(value);
     }
   });
-  const onKeyDown = DrawerRoot.useStableCallback(event => {
+  const onKeyDown = useValueChanged.useStableCallback(event => {
     function isVisible(index) {
       const element = elementsRef?.current[index];
       return !element || DrawerRoot.isElementVisible(element);
@@ -1905,7 +1663,7 @@ function useTypeahead(context, props) {
     const listContent = listRef.current;
     if (stringRef.current.length > 0 && event.key === ' ') {
       // Space should continue the in-progress typeahead session.
-      DrawerRoot.stopEvent(event);
+      useValueChanged.stopEvent(event);
       setTypingChange(true);
     }
     if (stringRef.current.length > 0 && stringRef.current[0] !== ' ') {
@@ -1921,7 +1679,7 @@ function useTypeahead(context, props) {
       return;
     }
     if (open && event.key !== ' ') {
-      DrawerRoot.stopEvent(event);
+      useValueChanged.stopEvent(event);
       setTypingChange(true);
     }
 
@@ -1962,7 +1720,7 @@ function useTypeahead(context, props) {
       setTypingChange(false);
     }
   });
-  const onBlur = DrawerRoot.useStableCallback(event => {
+  const onBlur = useValueChanged.useStableCallback(event => {
     const next = event.relatedTarget;
     const currentDomReferenceElement = store.select('domReferenceElement');
     const currentFloatingElement = store.select('floatingElement');
@@ -2039,7 +1797,7 @@ function safePolygon(options = {}) {
   const {
     blockPointerEvents = false
   } = options;
-  const timeout = new DrawerRoot.Timeout();
+  const timeout = new useValueChanged.Timeout();
   const fn = ({
     x,
     y,
@@ -2107,7 +1865,7 @@ 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 && index_esm.isElement(event.relatedTarget) && DrawerRoot.contains(floating, event.relatedTarget)) {
+      if (isLeave && floatingUi_utils_dom.isElement(event.relatedTarget) && DrawerRoot.contains(floating, event.relatedTarget)) {
         return undefined;
       }
       function hasOpenChildNode() {
@@ -2253,7 +2011,7 @@ const DialogTitle = /*#__PURE__*/React__namespace.forwardRef(function DialogTitl
   const {
     store
   } = DrawerRoot.useDialogRootContext();
-  const id = useBaseUiId(idProp);
+  const id = useBaseUiId.useBaseUiId(idProp);
   store.useSyncedValueWithCleanup('titleElementId', id);
   return useRenderElement.useRenderElement('h2', componentProps, {
     ref: forwardedRef,
@@ -2286,7 +2044,7 @@ const DialogTrigger = /*#__PURE__*/React__namespace.forwardRef(function DialogTr
   if (!store) {
     throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: <Dialog.Trigger> must be used within <Dialog.Root> or provided with a handle.' : useRenderElement.formatErrorMessage(79));
   }
-  const thisTriggerId = useBaseUiId(idProp);
+  const thisTriggerId = useBaseUiId.useBaseUiId(idProp);
   const floatingContext = store.useState('floatingRootContext');
   const isOpenedByThisTrigger = store.useState('isOpenedByTrigger', thisTriggerId);
   const triggerElementRef = React__namespace.useRef(null);
@@ -2299,7 +2057,7 @@ const DialogTrigger = /*#__PURE__*/React__namespace.forwardRef(function DialogTr
   const {
     getButtonProps,
     buttonRef
-  } = useButton({
+  } = useBaseUiId.useButton({
     disabled,
     native: nativeButton
   });
@@ -2416,7 +2174,7 @@ function useMenuItemCommonProps(params) {
       if (closeOnClick) {
         menuEvents.emit('close', {
           domEvent: event,
-          reason: DrawerRoot.itemPress
+          reason: useValueChanged.itemPress
         });
       }
     },
@@ -2430,7 +2188,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 && !DrawerRoot.isMac && event.button === 2) {
+        if (isContextMenu && !useValueChanged.isMac && event.button === 2) {
           return;
         }
       }
@@ -2464,7 +2222,7 @@ function useMenuItem(params) {
   const {
     getButtonProps,
     buttonRef
-  } = useButton({
+  } = useBaseUiId.useButton({
     disabled,
     focusableWhenDisabled: true,
     native: nativeButton,
@@ -2560,7 +2318,7 @@ function useCompositeListItem(params = {}) {
       }
     }
   }, [index, elementsRef, labelsRef, label, textRef]);
-  DrawerRoot.useIsoLayoutEffect(() => {
+  useValueChanged.useIsoLayoutEffect(() => {
     if (externalIndex != null) {
       return undefined;
     }
@@ -2573,7 +2331,7 @@ function useCompositeListItem(params = {}) {
     }
     return undefined;
   }, [externalIndex, register, unregister, metadata]);
-  DrawerRoot.useIsoLayoutEffect(() => {
+  useValueChanged.useIsoLayoutEffect(() => {
     if (externalIndex != null) {
       return undefined;
     }
@@ -2621,7 +2379,7 @@ const itemMapping = {
       [MenuCheckboxItemDataAttributes.unchecked]: ''
     };
   },
-  ...DrawerRoot.transitionStatusMapping
+  ...useValueChanged.transitionStatusMapping
 };
 
 const MenuGroupContext = /*#__PURE__*/React__namespace.createContext(undefined);
@@ -2672,11 +2430,11 @@ const MenuGroupLabel = /*#__PURE__*/React__namespace.forwardRef(function MenuGro
     id: idProp,
     ...elementProps
   } = componentProps;
-  const id = useBaseUiId(idProp);
+  const id = useBaseUiId.useBaseUiId(idProp);
   const {
     setLabelId
   } = useMenuGroupRootContext();
-  DrawerRoot.useIsoLayoutEffect(() => {
+  useValueChanged.useIsoLayoutEffect(() => {
     setLabelId(id);
     return () => {
       setLabelId(undefined);
@@ -2714,7 +2472,7 @@ const MenuItem = /*#__PURE__*/React__namespace.forwardRef(function MenuItem(comp
     label
   });
   const menuPositionerContext = useMenuPositionerContext(true);
-  const id = useBaseUiId(idProp);
+  const id = useBaseUiId.useBaseUiId(idProp);
   const {
     store
   } = useMenuRootContext();
@@ -2766,7 +2524,7 @@ const MenuLinkItem = /*#__PURE__*/React__namespace.forwardRef(function MenuLinkI
   });
   const menuPositionerContext = useMenuPositionerContext(true);
   const nodeId = menuPositionerContext?.nodeId;
-  const id = useBaseUiId(idProp);
+  const id = useBaseUiId.useBaseUiId(idProp);
   const {
     store
   } = useMenuRootContext();
@@ -2776,7 +2534,7 @@ const MenuLinkItem = /*#__PURE__*/React__namespace.forwardRef(function MenuLinkI
   const {
     getButtonProps,
     buttonRef
-  } = useButton({
+  } = useBaseUiId.useButton({
     native: false,
     composite: true
   });
@@ -2819,7 +2577,7 @@ function getDisabledMountTransitionStyles(transitionStatus) {
 
 const stateAttributesMapping = {
   ...DrawerRoot.popupStateMapping,
-  ...DrawerRoot.transitionStatusMapping
+  ...useValueChanged.transitionStatusMapping
 };
 
 /**
@@ -2857,7 +2615,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';
-  DrawerRoot.useOpenChangeComplete({
+  useValueChanged.useOpenChangeComplete({
     open,
     ref: store.context.popupRef,
     onComplete() {
@@ -2868,7 +2626,7 @@ const MenuPopup = /*#__PURE__*/React__namespace.forwardRef(function MenuPopup(co
   });
   React__namespace.useEffect(() => {
     function handleClose(event) {
-      store.setOpen(false, DrawerRoot.createChangeEventDetails(event.reason, event.domEvent));
+      store.setOpen(false, useValueChanged.createChangeEventDetails(event.reason, event.domEvent));
     }
     floatingTreeRoot.events.on('close', handleClose);
     return () => {
@@ -2907,7 +2665,7 @@ const MenuPopup = /*#__PURE__*/React__namespace.forwardRef(function MenuPopup(co
     }]
   });
   let returnFocus = parent.type === undefined || isContextMenu;
-  if (triggerElement || parent.type === 'menubar' && lastOpenChangeReason !== DrawerRoot.outsidePress) {
+  if (triggerElement || parent.type === 'menubar' && lastOpenChangeReason !== useValueChanged.outsidePress) {
     returnFocus = true;
   }
   return /*#__PURE__*/jsxRuntime.jsx(DrawerRoot.FloatingFocusManager, {
@@ -3102,7 +2860,7 @@ const adaptiveOrigin = {
       strategy,
       placement
     } = state;
-    const win = index_esm.getWindow(floating);
+    const win = floatingUi_utils_dom.getWindow(floating);
     const styles = win.getComputedStyle(floating);
     const hasTransition = styles.transitionDuration !== '0s' && styles.transitionDuration !== '';
     if (!hasTransition) {
@@ -3125,7 +2883,7 @@ const adaptiveOrigin = {
         height: win.visualViewport.height
       };
     } else if (offsetParent === win) {
-      const doc = DrawerRoot.ownerDocument(floating);
+      const doc = useValueChanged.ownerDocument(floating);
       offsetDimensions = {
         width: doc.documentElement.clientWidth,
         height: doc.documentElement.clientHeight
@@ -3222,9 +2980,9 @@ function useAnchorPositioning(params) {
   const collisionAvoidanceAlign = collisionAvoidance.align || 'flip';
   const collisionAvoidanceFallbackAxisSide = collisionAvoidance.fallbackAxisSide || 'end';
   const anchorFn = typeof anchor === 'function' ? anchor : undefined;
-  const anchorFnCallback = DrawerRoot.useStableCallback(anchorFn);
+  const anchorFnCallback = useValueChanged.useStableCallback(anchorFn);
   const anchorDep = anchorFn ? anchorFnCallback : anchor;
-  const anchorValueRef = DrawerRoot.useValueAsRef(anchor);
+  const anchorValueRef = useValueChanged.useValueAsRef(anchor);
   const direction = useDirection();
   const isRtl = direction === 'rtl';
   const side = mountSide || {
@@ -3272,8 +3030,8 @@ function useAnchorPositioning(params) {
   const arrowRef = React__namespace.useRef(null);
 
   // Keep these reactive if they're not functions
-  const sideOffsetRef = DrawerRoot.useValueAsRef(sideOffset);
-  const alignOffsetRef = DrawerRoot.useValueAsRef(alignOffset);
+  const sideOffsetRef = useValueChanged.useValueAsRef(sideOffset);
+  const alignOffsetRef = useValueChanged.useValueAsRef(alignOffset);
   const sideOffsetDep = typeof sideOffset !== 'function' ? sideOffset : 0;
   const alignOffsetDep = typeof alignOffset !== 'function' ? alignOffset : 0;
   const middleware = [floatingUi_reactDom.offset(state => {
@@ -3303,7 +3061,7 @@ function useAnchorPositioning(params) {
     fallbackAxisSideDirection: collisionAvoidanceFallbackAxisSide
   });
   const shiftMiddleware = shiftDisabled ? null : floatingUi_reactDom.shift(data => {
-    const html = DrawerRoot.ownerDocument(data.elements.floating).documentElement;
+    const html = useValueChanged.ownerDocument(data.elements.floating).documentElement;
     return {
       ...commonCollisionProps,
       // Use the Layout Viewport to avoid shifting around when pinch-zooming
@@ -3407,7 +3165,7 @@ function useAnchorPositioning(params) {
       return {};
     }
   }, hide, adaptiveOrigin);
-  DrawerRoot.useIsoLayoutEffect(() => {
+  useValueChanged.useIsoLayoutEffect(() => {
     // Ensure positioning doesn't run initially for `keepMounted` elements that
     // aren't initially open.
     if (!mounted && floatingRootContext) {
@@ -3465,7 +3223,7 @@ function useAnchorPositioning(params) {
     return base;
   }, [adaptiveOrigin, resolvedPosition, sideX, x, sideY, y, originalFloatingStyles, isPositioned]);
   const registeredPositionReferenceRef = React__namespace.useRef(null);
-  DrawerRoot.useIsoLayoutEffect(() => {
+  useValueChanged.useIsoLayoutEffect(() => {
     if (!mounted) {
       return;
     }
@@ -3510,7 +3268,7 @@ function useAnchorPositioning(params) {
    * and flips back lazily, not eagerly. Ideal for filtered lists that change
    * the size of the popup dynamically to avoid unwanted flipping when typing.
    */
-  DrawerRoot.useIsoLayoutEffect(() => {
+  useValueChanged.useIsoLayoutEffect(() => {
     if (lazyFlip && mounted && isPositioned) {
       setMountSide(renderedSide);
     }
@@ -3552,7 +3310,7 @@ function CompositeList(props) {
     labelsRef,
     onMapChange: onMapChangeProp
   } = props;
-  const onMapChange = DrawerRoot.useStableCallback(onMapChangeProp);
+  const onMapChange = useValueChanged.useStableCallback(onMapChangeProp);
   const nextIndexRef = React__namespace.useRef(0);
   const listeners = useRenderElement.useRefWithInit(createListeners).current;
 
@@ -3568,12 +3326,12 @@ function CompositeList(props) {
   // `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 = DrawerRoot.useStableCallback((node, metadata) => {
+  const register = useValueChanged.useStableCallback((node, metadata) => {
     map.set(node, metadata ?? null);
     lastTickRef.current += 1;
     setMapTick(lastTickRef.current);
   });
-  const unregister = DrawerRoot.useStableCallback(node => {
+  const unregister = useValueChanged.useStableCallback(node => {
     map.delete(node);
     lastTickRef.current += 1;
     setMapTick(lastTickRef.current);
@@ -3592,7 +3350,7 @@ function CompositeList(props) {
     });
     return newMap;
   }, [map, mapTick]);
-  DrawerRoot.useIsoLayoutEffect(() => {
+  useValueChanged.useIsoLayoutEffect(() => {
     if (typeof MutationObserver !== 'function' || sortedMap.size === 0) {
       return undefined;
     }
@@ -3619,7 +3377,7 @@ function CompositeList(props) {
       mutationObserver.disconnect();
     };
   }, [sortedMap]);
-  DrawerRoot.useIsoLayoutEffect(() => {
+  useValueChanged.useIsoLayoutEffect(() => {
     const shouldUpdateLengths = lastTickRef.current === mapTick;
     if (shouldUpdateLengths) {
       if (elementsRef.current.length !== sortedMap.size) {
@@ -3632,25 +3390,25 @@ function CompositeList(props) {
     }
     onMapChange(sortedMap);
   }, [onMapChange, sortedMap, elementsRef, labelsRef, mapTick]);
-  DrawerRoot.useIsoLayoutEffect(() => {
+  useValueChanged.useIsoLayoutEffect(() => {
     return () => {
       elementsRef.current = [];
     };
   }, [elementsRef]);
-  DrawerRoot.useIsoLayoutEffect(() => {
+  useValueChanged.useIsoLayoutEffect(() => {
     return () => {
       if (labelsRef) {
         labelsRef.current = [];
       }
     };
   }, [labelsRef]);
-  const subscribeMapChange = DrawerRoot.useStableCallback(fn => {
+  const subscribeMapChange = useValueChanged.useStableCallback(fn => {
     listeners.add(fn);
     return () => {
       listeners.delete(fn);
     };
   });
-  DrawerRoot.useIsoLayoutEffect(() => {
+  useValueChanged.useIsoLayoutEffect(() => {
     listeners.forEach(l => l(sortedMap));
   }, [listeners, sortedMap]);
   const contextValue = React__namespace.useMemo(() => ({
@@ -3722,7 +3480,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 = DrawerRoot.useAnimationsFinished(positionerElement, false, false);
+  const runOnceAnimationsFinish = useValueChanged.useAnimationsFinished(positionerElement, false, false);
   let anchor = anchorProp;
   let sideOffset = sideOffsetProp;
   let alignOffset = alignOffsetProp;
@@ -3789,7 +3547,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, DrawerRoot.createChangeEventDetails(DrawerRoot.siblingOpen));
+          store.setOpen(false, useValueChanged.createChangeEventDetails(useValueChanged.siblingOpen));
         }
       }
     }
@@ -3806,15 +3564,15 @@ const MenuPositioner = /*#__PURE__*/React__namespace.forwardRef(function MenuPos
       if (details.open || details.nodeId !== store.select('floatingParentNodeId')) {
         return;
       }
-      const reason = details.reason ?? DrawerRoot.siblingOpen;
-      store.setOpen(false, DrawerRoot.createChangeEventDetails(reason));
+      const reason = details.reason ?? useValueChanged.siblingOpen;
+      store.setOpen(false, useValueChanged.createChangeEventDetails(reason));
     }
     floatingTreeRoot.events.on('menuopenchange', onParentClose);
     return () => {
       floatingTreeRoot.events.off('menuopenchange', onParentClose);
     };
   }, [floatingTreeRoot.events, store]);
-  const closeTimeout = DrawerRoot.useTimeout();
+  const closeTimeout = useValueChanged.useTimeout();
 
   // Clear pending close timeout when the menu closes.
   React__namespace.useEffect(() => {
@@ -3836,11 +3594,11 @@ const MenuPositioner = /*#__PURE__*/React__namespace.forwardRef(function MenuPos
         if (delay > 0) {
           if (!closeTimeout.isStarted()) {
             closeTimeout.start(delay, () => {
-              store.setOpen(false, DrawerRoot.createChangeEventDetails(DrawerRoot.siblingOpen));
+              store.setOpen(false, useValueChanged.createChangeEventDetails(useValueChanged.siblingOpen));
             });
           }
         } else {
-          store.setOpen(false, DrawerRoot.createChangeEventDetails(DrawerRoot.siblingOpen));
+          store.setOpen(false, useValueChanged.createChangeEventDetails(useValueChanged.siblingOpen));
         }
       } else {
         // User re-hovered the submenu trigger, cancel pending close.
@@ -3863,7 +3621,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.
-  DrawerRoot.useIsoLayoutEffect(() => {
+  useValueChanged.useIsoLayoutEffect(() => {
     const currentTrigger = domReference;
     const previousTrigger = previousTriggerRef.current;
     if (currentTrigger) {
@@ -3903,7 +3661,7 @@ const MenuPositioner = /*#__PURE__*/React__namespace.forwardRef(function MenuPos
     ref: [forwardedRef, store.useStateSetter('positionerElement')],
     props: [positionerProps, getDisabledMountTransitionStyles(transitionStatus), elementProps]
   });
-  const shouldRenderBackdrop = mounted && parent.type !== 'menu' && (parent.type !== 'menubar' && modal && lastOpenChangeReason !== DrawerRoot.triggerHover || parent.type === 'menubar' && parent.context.modal);
+  const shouldRenderBackdrop = mounted && parent.type !== 'menu' && (parent.type !== 'menubar' && modal && lastOpenChangeReason !== useValueChanged.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;
@@ -3956,13 +3714,13 @@ const MenuRadioGroup = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__na
     disabled = false,
     ...elementProps
   } = componentProps;
-  const [value, setValueUnwrapped] = DrawerRoot.useControlled({
+  const [value, setValueUnwrapped] = useValueChanged.useControlled({
     controlled: valueProp,
     default: defaultValue,
     name: 'MenuRadioGroup'
   });
-  const onValueChange = DrawerRoot.useStableCallback(onValueChangeProp);
-  const setValue = DrawerRoot.useStableCallback((newValue, eventDetails) => {
+  const onValueChange = useValueChanged.useStableCallback(onValueChangeProp);
+  const setValue = useValueChanged.useStableCallback((newValue, eventDetails) => {
     onValueChange?.(newValue, eventDetails);
     if (eventDetails.isCanceled) {
       return;
@@ -4019,7 +3777,7 @@ const MenuRadioItem = /*#__PURE__*/React__namespace.forwardRef(function MenuRadi
     label
   });
   const menuPositionerContext = useMenuPositionerContext(true);
-  const id = useBaseUiId(idProp);
+  const id = useBaseUiId.useBaseUiId(idProp);
   const {
     store
   } = useMenuRootContext();
@@ -4050,9 +3808,9 @@ const MenuRadioItem = /*#__PURE__*/React__namespace.forwardRef(function MenuRadi
     highlighted,
     checked
   }), [disabled, highlighted, checked]);
-  const handleClick = DrawerRoot.useStableCallback(event => {
+  const handleClick = useValueChanged.useStableCallback(event => {
     const details = {
-      ...DrawerRoot.createChangeEventDetails(DrawerRoot.itemPress, event.nativeEvent),
+      ...useValueChanged.createChangeEventDetails(useValueChanged.itemPress, event.nativeEvent),
       preventUnmountOnClose: () => {}
     };
     setSelectedValue(value, details);
@@ -4092,8 +3850,8 @@ const MenuRadioItemIndicator = /*#__PURE__*/React__namespace.forwardRef(function
   const {
     transitionStatus,
     setMounted
-  } = DrawerRoot.useTransitionStatus(item.checked);
-  DrawerRoot.useOpenChangeComplete({
+  } = useValueChanged.useTransitionStatus(item.checked);
+  useValueChanged.useOpenChangeComplete({
     open: item.checked,
     ref: indicatorRef,
     onComplete() {
@@ -4343,7 +4101,7 @@ const MenuRoot = DrawerRoot.fastComponent(function MenuRoot(props) {
   const floatingTreeRoot = store.useState('floatingTreeRoot');
   const floatingNodeIdFromContext = DrawerRoot.useFloatingNodeId(floatingTreeRoot);
   const floatingParentNodeIdFromContext = DrawerRoot.useFloatingParentNodeId();
-  DrawerRoot.useIsoLayoutEffect(() => {
+  useValueChanged.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.
@@ -4384,7 +4142,7 @@ const MenuRoot = DrawerRoot.fastComponent(function MenuRoot(props) {
   store.useSyncedValues({
     disabled: disabledProp,
     modal: parent.type === undefined ? modalProp : undefined,
-    rootId: DrawerRoot.useId()
+    rootId: useValueChanged.useId()
   });
   const {
     openMethod,
@@ -4400,7 +4158,7 @@ const MenuRoot = DrawerRoot.fastComponent(function MenuRoot(props) {
     });
   });
   const allowOutsidePressDismissalRef = React__namespace.useRef(parent.type !== 'context-menu');
-  const allowOutsidePressDismissalTimeout = DrawerRoot.useTimeout();
+  const allowOutsidePressDismissalTimeout = useValueChanged.useTimeout();
   React__namespace.useEffect(() => {
     if (!open) {
       openEventRef.current = null;
@@ -4421,15 +4179,15 @@ const MenuRoot = DrawerRoot.fastComponent(function MenuRoot(props) {
       allowOutsidePressDismissalRef.current = true;
     });
   }, [allowOutsidePressDismissalTimeout, open, parent.type]);
-  DrawerRoot.useScrollLock(open && modal && lastOpenChangeReason !== DrawerRoot.triggerHover && openMethod !== 'touch', positionerElement);
-  DrawerRoot.useIsoLayoutEffect(() => {
+  DrawerRoot.useScrollLock(open && modal && lastOpenChangeReason !== useValueChanged.triggerHover && openMethod !== 'touch', positionerElement);
+  useValueChanged.useIsoLayoutEffect(() => {
     if (!open && !hoverEnabled) {
       store.set('hoverEnabled', true);
     }
   }, [open, hoverEnabled, store]);
   const allowTouchToCloseRef = React__namespace.useRef(true);
-  const allowTouchToCloseTimeout = DrawerRoot.useTimeout();
-  const setOpen = DrawerRoot.useStableCallback((nextOpen, eventDetails) => {
+  const allowTouchToCloseTimeout = useValueChanged.useTimeout();
+  const setOpen = useValueChanged.useStableCallback((nextOpen, eventDetails) => {
     const reason = eventDetails.reason;
     if (open === nextOpen && eventDetails.trigger === activeTriggerElement && lastOpenChangeReason === reason) {
       return;
@@ -4475,7 +4233,7 @@ const MenuRoot = DrawerRoot.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 === DrawerRoot.triggerFocus) {
+    if (nextOpen && reason === useValueChanged.triggerFocus) {
       allowTouchToCloseRef.current = false;
       allowTouchToCloseTimeout.start(300, () => {
         allowTouchToCloseRef.current = true;
@@ -4484,8 +4242,8 @@ const MenuRoot = DrawerRoot.fastComponent(function MenuRoot(props) {
       allowTouchToCloseRef.current = true;
       allowTouchToCloseTimeout.clear();
     }
-    const isKeyboardClick = (reason === DrawerRoot.triggerPress || reason === DrawerRoot.itemPress) && nativeEvent.detail === 0 && nativeEvent?.isTrusted;
-    const isDismissClose = !nextOpen && (reason === DrawerRoot.escapeKey || reason == null);
+    const isKeyboardClick = (reason === useValueChanged.triggerPress || reason === useValueChanged.itemPress) && nativeEvent.detail === 0 && nativeEvent?.isTrusted;
+    const isDismissClose = !nextOpen && (reason === useValueChanged.escapeKey || reason == null);
     const updatedState = {
       open: nextOpen,
       openChangeReason: reason
@@ -4500,7 +4258,7 @@ const MenuRoot = DrawerRoot.fastComponent(function MenuRoot(props) {
       updatedState.activeTriggerElement = eventDetails.trigger ?? null;
     }
     store.update(updatedState);
-    if (parent.type === 'menubar' && (reason === DrawerRoot.triggerFocus || reason === DrawerRoot.focusOut || reason === DrawerRoot.triggerHover || reason === DrawerRoot.listNavigation || reason === DrawerRoot.siblingOpen)) {
+    if (parent.type === 'menubar' && (reason === useValueChanged.triggerFocus || reason === useValueChanged.focusOut || reason === useValueChanged.triggerHover || reason === useValueChanged.listNavigation || reason === useValueChanged.siblingOpen)) {
       store.set('instantType', 'group');
     } else if (isKeyboardClick || isDismissClose) {
       store.set('instantType', isKeyboardClick ? 'click' : 'dismiss');
@@ -4509,14 +4267,14 @@ const MenuRoot = DrawerRoot.fastComponent(function MenuRoot(props) {
     }
   });
   const createMenuEventDetails = React__namespace.useCallback(reason => {
-    const details = DrawerRoot.createChangeEventDetails(reason);
+    const details = useValueChanged.createChangeEventDetails(reason);
     details.preventUnmountOnClose = () => {
       store.set('preventUnmountingOnClose', true);
     };
     return details;
   }, [store]);
   const handleImperativeClose = React__namespace.useCallback(() => {
-    store.setOpen(false, createMenuEventDetails(DrawerRoot.imperativeAction));
+    store.setOpen(false, createMenuEventDetails(useValueChanged.imperativeAction));
   }, [store, createMenuEventDetails]);
   React__namespace.useImperativeHandle(actionsRef, () => ({
     unmount: forceUnmount,
@@ -4733,7 +4491,7 @@ function useCompositeItem(params = {}) {
     highlightItemOnHover,
     highlightedIndex,
     onHighlightedIndexChange
-  } = useCompositeRootContext();
+  } = useBaseUiId.useCompositeRootContext();
   const {
     ref,
     index
@@ -4794,13 +4552,13 @@ function CompositeItem(componentProps) {
 }
 
 function findRootOwnerId(node) {
-  if (index_esm.isHTMLElement(node) && node.hasAttribute('data-rootownerid')) {
+  if (floatingUi_utils_dom.isHTMLElement(node) && node.hasAttribute('data-rootownerid')) {
     return node.getAttribute('data-rootownerid') ?? undefined;
   }
-  if (index_esm.isLastTraversableNode(node)) {
+  if (floatingUi_utils_dom.isLastTraversableNode(node)) {
     return undefined;
   }
-  return findRootOwnerId(index_esm.getParentNode(node));
+  return findRootOwnerId(floatingUi_utils_dom.getParentNode(node));
 }
 
 /**
@@ -4823,7 +4581,7 @@ function useMixedToggleClickHandler(params) {
       onMouseDown: event => {
         if (mouseDownAction === 'open' && !open || mouseDownAction === 'close' && open) {
           ignoreClickRef.current = true;
-          DrawerRoot.ownerDocument(event.currentTarget).addEventListener('click', () => {
+          useValueChanged.ownerDocument(event.currentTarget).addEventListener('click', () => {
             ignoreClickRef.current = false;
           }, {
             once: true
@@ -4867,13 +4625,13 @@ const MenuTrigger = DrawerRoot.fastComponentRef(function MenuTrigger(componentPr
   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 = useBaseUiId(idProp);
+  const thisTriggerId = useBaseUiId.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 = useCompositeRootContext(true);
+  const compositeRootContext = useBaseUiId.useCompositeRootContext(true);
   const floatingTreeRootFromContext = DrawerRoot.useFloatingTree();
   const floatingTreeRoot = React__namespace.useMemo(() => {
     return floatingTreeRootFromContext ?? new DrawerRoot.FloatingTreeStore();
@@ -4898,7 +4656,7 @@ const MenuTrigger = DrawerRoot.fastComponentRef(function MenuTrigger(componentPr
   const {
     getButtonProps,
     buttonRef
-  } = useButton({
+  } = useBaseUiId.useButton({
     disabled,
     native: nativeButton
   });
@@ -4908,8 +4666,8 @@ const MenuTrigger = DrawerRoot.fastComponentRef(function MenuTrigger(componentPr
     }
   }, [store, isOpenedByThisTrigger, parent.type]);
   const triggerRef = React__namespace.useRef(null);
-  const allowMouseUpTriggerTimeout = DrawerRoot.useTimeout();
-  const handleDocumentMouseUp = DrawerRoot.useStableCallback(mouseEvent => {
+  const allowMouseUpTriggerTimeout = useValueChanged.useTimeout();
+  const handleDocumentMouseUp = useValueChanged.useStableCallback(mouseEvent => {
     if (!triggerRef.current) {
       return;
     }
@@ -4928,12 +4686,12 @@ const MenuTrigger = DrawerRoot.fastComponentRef(function MenuTrigger(componentPr
     }
     floatingTreeRoot.events.emit('close', {
       domEvent: mouseEvent,
-      reason: DrawerRoot.cancelOpen
+      reason: useValueChanged.cancelOpen
     });
   });
   React__namespace.useEffect(() => {
-    if (isOpenedByThisTrigger && store.select('lastOpenChangeReason') === DrawerRoot.triggerHover) {
-      const doc = DrawerRoot.ownerDocument(triggerRef.current);
+    if (isOpenedByThisTrigger && store.select('lastOpenChangeReason') === useValueChanged.triggerHover) {
+      const doc = useValueChanged.ownerDocument(triggerRef.current);
       doc.addEventListener('mouseup', handleDocumentMouseUp, {
         once: true
       });
@@ -4995,7 +4753,7 @@ const MenuTrigger = DrawerRoot.fastComponentRef(function MenuTrigger(componentPr
       allowMouseUpTriggerTimeout.start(200, () => {
         store.context.allowMouseUpTriggerRef.current = true;
       });
-      const doc = DrawerRoot.ownerDocument(event.currentTarget);
+      const doc = useValueChanged.ownerDocument(event.currentTarget);
       doc.addEventListener('mouseup', handleDocumentMouseUp, {
         once: true
       });
@@ -5004,20 +4762,20 @@ const MenuTrigger = DrawerRoot.fastComponentRef(function MenuTrigger(componentPr
     role: 'menuitem'
   } : {}, mixedToggleHandlers, elementProps, getButtonProps];
   const preFocusGuardRef = React__namespace.useRef(null);
-  const handlePreFocusGuardFocus = DrawerRoot.useStableCallback(event => {
+  const handlePreFocusGuardFocus = useValueChanged.useStableCallback(event => {
     ReactDOM__namespace.flushSync(() => {
-      store.setOpen(false, DrawerRoot.createChangeEventDetails(DrawerRoot.focusOut, event.nativeEvent, event.currentTarget));
+      store.setOpen(false, useValueChanged.createChangeEventDetails(useValueChanged.focusOut, event.nativeEvent, event.currentTarget));
     });
     const previousTabbable = DrawerRoot.getTabbableBeforeElement(preFocusGuardRef.current);
     previousTabbable?.focus();
   });
-  const handleFocusTargetFocus = DrawerRoot.useStableCallback(event => {
+  const handleFocusTargetFocus = useValueChanged.useStableCallback(event => {
     const currentPositionerElement = store.select('positionerElement');
     if (currentPositionerElement && DrawerRoot.isOutsideEvent(event, currentPositionerElement)) {
       store.context.beforeContentFocusGuardRef.current?.focus();
     } else {
       ReactDOM__namespace.flushSync(() => {
-        store.setOpen(false, DrawerRoot.createChangeEventDetails(DrawerRoot.focusOut, event.nativeEvent, event.currentTarget));
+        store.setOpen(false, useValueChanged.createChangeEventDetails(useValueChanged.focusOut, event.nativeEvent, event.currentTarget));
       });
       let nextTabbable = DrawerRoot.getTabbableAfterElement(store.context.triggerFocusTargetRef.current || triggerElementRef.current);
       while (nextTabbable !== null && DrawerRoot.contains(currentPositionerElement, nextTabbable)) {
@@ -5074,9 +4832,9 @@ if (process.env.NODE_ENV !== "production") MenuTrigger.displayName = "MenuTrigge
  * Determines whether to ignore clicks after a hover-open.
  */
 function useStickIfOpen(open, openReason) {
-  const stickIfOpenTimeout = DrawerRoot.useTimeout();
+  const stickIfOpenTimeout = useValueChanged.useTimeout();
   const [stickIfOpen, setStickIfOpen] = React__namespace.useState(false);
-  DrawerRoot.useIsoLayoutEffect(() => {
+  useValueChanged.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.
@@ -5143,7 +4901,7 @@ const MenuSubmenuTrigger = /*#__PURE__*/React__namespace.forwardRef(function Sub
   const {
     store
   } = useMenuRootContext();
-  const thisTriggerId = useBaseUiId(idProp);
+  const thisTriggerId = useBaseUiId.useBaseUiId(idProp);
   const open = store.useState('open');
   const floatingRootContext = store.useState('floatingRootContext');
   const floatingTreeRoot = store.useState('floatingTreeRoot');
@@ -5264,13 +5022,10 @@ exports.MenuSubmenuRoot = MenuSubmenuRoot;
 exports.MenuSubmenuTrigger = MenuSubmenuTrigger;
 exports.MenuTrigger = MenuTrigger;
 exports.REGULAR_ITEM = REGULAR_ITEM;
-exports.error = error;
 exports.getDisabledMountTransitionStyles = getDisabledMountTransitionStyles;
 exports.getPseudoElementBounds = getPseudoElementBounds;
 exports.itemMapping = itemMapping;
 exports.useAnchorPositioning = useAnchorPositioning;
-exports.useBaseUiId = useBaseUiId;
-exports.useButton = useButton;
 exports.useClick = useClick;
 exports.useCompositeListItem = useCompositeListItem;
 exports.useContextMenuRootContext = useContextMenuRootContext;