@jobber/components 7.10.0 → 7.11.0

package/dist/unstyledPrimitives/index.cjs

@@ -4,10 +4,14 @@ var DrawerRoot = require('../DrawerRoot-cjs.js');
 var MenuSubmenuTrigger = require('../MenuSubmenuTrigger-cjs.js');
 var React = require('react');
 var useRenderElement = require('../useRenderElement-cjs.js');
+var useBaseUiId = require('../useBaseUiId-cjs.js');
+var useValueChanged = require('../useValueChanged-cjs.js');
 var jsxRuntime = require('react/jsx-runtime');
-var index_esm = require('../index.esm-cjs.js');
+var floatingUi_utils_dom = require('../floating-ui.utils.dom-cjs.js');
 var ReactDOM = require('react-dom');
+var index_esm = require('../index.esm-cjs.js');
 var Separator = require('../Separator-cjs.js');
+var NumberFieldInput = require('../NumberFieldInput-cjs.js');
 require('../floating-ui.react-dom-cjs.js');
 
 function _interopNamespaceDefault(e) {
@@ -46,7 +50,7 @@ const DialogDescription = /*#__PURE__*/React__namespace.forwardRef(function Dial
   const {
     store
   } = DrawerRoot.useDialogRootContext();
-  const id = MenuSubmenuTrigger.useBaseUiId(idProp);
+  const id = useBaseUiId.useBaseUiId(idProp);
   store.useSyncedValueWithCleanup('descriptionElementId', id);
   return useRenderElement.useRenderElement('p', componentProps, {
     ref: forwardedRef,
@@ -65,7 +69,7 @@ if (process.env.NODE_ENV !== "production") DialogDescription.displayName = "Dial
  */
 const DrawerDescription = DialogDescription;
 
-const stateAttributesMapping$a = {
+const stateAttributesMapping$8 = {
   active(value) {
     if (value) {
       return {
@@ -95,7 +99,7 @@ const DrawerIndent = /*#__PURE__*/React__namespace.forwardRef(function DrawerInd
   const active = providerContext?.active ?? false;
   const visualStateStore = providerContext?.visualStateStore;
   const indentRef = React__namespace.useRef(null);
-  DrawerRoot.useIsoLayoutEffect(() => {
+  useValueChanged.useIsoLayoutEffect(() => {
     const element = indentRef.current;
     if (!element || !visualStateStore) {
       return undefined;
@@ -135,12 +139,12 @@ const DrawerIndent = /*#__PURE__*/React__namespace.forwardRef(function DrawerInd
         [DrawerRoot.DrawerBackdropCssVars.swipeProgress]: '0'
       }
     }, elementProps],
-    stateAttributesMapping: stateAttributesMapping$a
+    stateAttributesMapping: stateAttributesMapping$8
   });
 });
 if (process.env.NODE_ENV !== "production") DrawerIndent.displayName = "DrawerIndent";
 
-const stateAttributesMapping$9 = {
+const stateAttributesMapping$7 = {
   active(value) {
     if (value) {
       return {
@@ -174,28 +178,18 @@ const DrawerIndentBackground = /*#__PURE__*/React__namespace.forwardRef(function
     ref: forwardedRef,
     state,
     props: elementProps,
-    stateAttributesMapping: stateAttributesMapping$9
+    stateAttributesMapping: stateAttributesMapping$7
   });
 });
 if (process.env.NODE_ENV !== "production") DrawerIndentBackground.displayName = "DrawerIndentBackground";
 
-/**
- * Returns a function that forces a rerender.
- */
-function useForcedRerendering() {
-  const [, setState] = React__namespace.useState({});
-  return React__namespace.useCallback(() => {
-    setState({});
-  }, []);
-}
-
 function DrawerProvider(props) {
   const {
     children
   } = props;
   const [openById, setOpenById] = React__namespace.useState(() => new Map());
   const [visualStateStore] = React__namespace.useState(createVisualStateStore);
-  const setDrawerOpen = DrawerRoot.useStableCallback((drawerId, open) => {
+  const setDrawerOpen = useValueChanged.useStableCallback((drawerId, open) => {
     setOpenById(prev => {
       const prevOpen = prev.get(drawerId);
       if (prevOpen === open) {
@@ -206,7 +200,7 @@ function DrawerProvider(props) {
       return next;
     });
   });
-  const removeDrawer = DrawerRoot.useStableCallback(drawerId => {
+  const removeDrawer = useValueChanged.useStableCallback(drawerId => {
     setOpenById(prev => {
       if (!prev.has(drawerId)) {
         return prev;
@@ -300,9 +294,9 @@ let DialogViewportDataAttributes = function (DialogViewportDataAttributes) {
   return DialogViewportDataAttributes;
 }({});
 
-const stateAttributesMapping$8 = {
+const stateAttributesMapping$6 = {
   ...DrawerRoot.popupStateMapping,
-  ...DrawerRoot.transitionStatusMapping,
+  ...useValueChanged.transitionStatusMapping,
   nested(value) {
     return value ? {
       [DialogViewportDataAttributes.nested]: ''
@@ -349,7 +343,7 @@ const DialogViewport = /*#__PURE__*/React__namespace.forwardRef(function DialogV
     enabled: shouldRender,
     state,
     ref: [forwardedRef, store.useStateSetter('viewportElement')],
-    stateAttributesMapping: stateAttributesMapping$8,
+    stateAttributesMapping: stateAttributesMapping$6,
     props: [{
       role: 'presentation',
       hidden: !mounted,
@@ -390,7 +384,7 @@ class DialogHandle {
         console.warn(`Base UI: DialogHandle.open: No trigger found with id "${triggerId}". The dialog will open, but the trigger will not be associated with the dialog.`);
       }
     }
-    this.store.setOpen(true, DrawerRoot.createChangeEventDetails(DrawerRoot.imperativeAction, undefined, triggerElement));
+    this.store.setOpen(true, useValueChanged.createChangeEventDetails(useValueChanged.imperativeAction, undefined, triggerElement));
   }
 
   /**
@@ -401,14 +395,14 @@ class DialogHandle {
    */
   openWithPayload(payload) {
     this.store.set('payload', payload);
-    this.store.setOpen(true, DrawerRoot.createChangeEventDetails(DrawerRoot.imperativeAction, undefined, undefined));
+    this.store.setOpen(true, useValueChanged.createChangeEventDetails(useValueChanged.imperativeAction, undefined, undefined));
   }
 
   /**
    * Closes the dialog.
    */
   close() {
-    this.store.setOpen(false, DrawerRoot.createChangeEventDetails(DrawerRoot.imperativeAction, undefined, undefined));
+    this.store.setOpen(false, useValueChanged.createChangeEventDetails(useValueChanged.imperativeAction, undefined, undefined));
   }
 
   /**
@@ -427,7 +421,7 @@ function createDialogHandle() {
 }
 
 function isScrollable(element, axis) {
-  const style = index_esm.getComputedStyle(element);
+  const style = floatingUi_utils_dom.getComputedStyle(element);
   if (axis === 'vertical') {
     const overflowY = style.overflowY;
     return (overflowY === 'auto' || overflowY === 'scroll') && element.scrollHeight > element.clientHeight;
@@ -448,7 +442,7 @@ function hasScrollableAncestor(target, root, axes) {
   return false;
 }
 function findScrollableTouchTarget(target, root, axis = 'vertical') {
-  let node = index_esm.isHTMLElement(target) ? target : null;
+  let node = floatingUi_utils_dom.isHTMLElement(target) ? target : null;
   while (node && node !== root) {
     if (isScrollable(node, axis)) {
       return node;
@@ -620,7 +614,7 @@ function useSwipeDismiss(options) {
   });
   const lastProgressDetailsRef = React__namespace.useRef(null);
   const isSwipingRef = React__namespace.useRef(false);
-  const setSwiping = DrawerRoot.useStableCallback(nextSwiping => {
+  const setSwiping = useValueChanged.useStableCallback(nextSwiping => {
     if (isSwipingRef.current === nextSwiping) {
       return;
     }
@@ -646,8 +640,8 @@ function useSwipeDismiss(options) {
     });
     swipeThresholdRef.current = Math.max(0, value);
   }
-  const updateSwipeProgress = DrawerRoot.useStableCallback((progress, details) => {
-    const nextProgress = Number.isFinite(progress) ? DrawerRoot.clamp(progress, 0, 1) : 0;
+  const updateSwipeProgress = useValueChanged.useStableCallback((progress, details) => {
+    const nextProgress = Number.isFinite(progress) ? useValueChanged.clamp(progress, 0, 1) : 0;
     const progressChanged = nextProgress !== swipeProgressRef.current;
     let detailsChanged = false;
     if (details) {
@@ -763,7 +757,7 @@ function useSwipeDismiss(options) {
     return event.pointerType === 'touch';
   }
   function getTargetAtPoint(position, nativeEvent) {
-    const doc = DrawerRoot.ownerDocument(elementRef.current);
+    const doc = useValueChanged.ownerDocument(elementRef.current);
     const elementAtPoint = getElementAtPoint(doc, position.x, position.y);
     const target = elementAtPoint ?? DrawerRoot.getTarget(nativeEvent);
     return target;
@@ -781,7 +775,7 @@ function useSwipeDismiss(options) {
     swipeFromScrollableRef.current = false;
     const touchLike = isTouchLikeEvent(event);
     const target = getTargetAtPoint(position, event.nativeEvent);
-    const doc = DrawerRoot.ownerDocument(elementRef.current);
+    const doc = useValueChanged.ownerDocument(elementRef.current);
     const body = doc.body;
     const scrollableTarget = touchLike && body ? findGestureScrollableTouchTarget(target, body) : null;
     const ignoreScrollableTarget = startOptions?.ignoreScrollableTarget ?? false;
@@ -923,7 +917,7 @@ function useSwipeDismiss(options) {
     }
     return null;
   }
-  const handleStart = DrawerRoot.useStableCallback(event => {
+  const handleStart = useValueChanged.useStableCallback(event => {
     if (!enabled) {
       return;
     }
@@ -1119,7 +1113,7 @@ function useSwipeDismiss(options) {
       direction: swipeDirectionDetails
     });
   }
-  const handleMove = DrawerRoot.useStableCallback(event => {
+  const handleMove = useValueChanged.useStableCallback(event => {
     const currentPos = getPrimaryPointerPosition(event);
     if (!currentPos) {
       return;
@@ -1154,7 +1148,7 @@ function useSwipeDismiss(options) {
           const element = elementRef.current;
           if (pendingStartPos && element) {
             const target = getTargetAtPoint(currentPos, event.nativeEvent);
-            const doc = DrawerRoot.ownerDocument(element);
+            const doc = useValueChanged.ownerDocument(element);
             const body = doc.body;
             const scrollTarget = body ? findGestureScrollableTouchTarget(target, body) : null;
             if (scrollTarget && (DrawerRoot.contains(element, scrollTarget) || DrawerRoot.contains(scrollTarget, element))) {
@@ -1204,7 +1198,7 @@ function useSwipeDismiss(options) {
     lastMovePosRef.current = currentPos;
     handleMoveCore(event, currentPos, movement);
   });
-  const handleEnd = DrawerRoot.useStableCallback(event => {
+  const handleEnd = useValueChanged.useStableCallback(event => {
     if (!enabled) {
       return;
     }
@@ -1438,7 +1432,7 @@ const SWIPE_AREA_SWIPING_HOOK = {
 const SWIPE_AREA_DISABLED_HOOK = {
   [DrawerSwipeAreaDataAttributes.disabled]: ''
 };
-const stateAttributesMapping$7 = {
+const stateAttributesMapping$5 = {
   open(value) {
     return value ? SWIPE_AREA_OPEN_HOOK : SWIPE_AREA_CLOSED_HOOK;
   },
@@ -1487,7 +1481,7 @@ const DrawerSwipeArea = /*#__PURE__*/React__namespace.forwardRef(function Drawer
   } = DrawerRoot.useDrawerRootContext();
   const providerContext = DrawerRoot.useDrawerProviderContext();
   const [swipeActive, setSwipeActive] = React__namespace.useState(false);
-  const releaseDismissTimeout = DrawerRoot.useTimeout();
+  const releaseDismissTimeout = useValueChanged.useTimeout();
   const swipeAreaRef = React__namespace.useRef(null);
   const swipeStartEventRef = React__namespace.useRef(null);
   const openedBySwipeRef = React__namespace.useRef(false);
@@ -1498,13 +1492,13 @@ const DrawerSwipeArea = /*#__PURE__*/React__namespace.forwardRef(function Drawer
   const closedOffsetRef = React__namespace.useRef(null);
   const appliedSwipeStylesRef = React__namespace.useRef(false);
   const popupTransitionRef = React__namespace.useRef(null);
-  const swipeAreaId = MenuSubmenuTrigger.useBaseUiId(componentProps.id);
+  const swipeAreaId = useBaseUiId.useBaseUiId(componentProps.id);
   const registerTrigger = DrawerRoot.useTriggerRegistration(swipeAreaId, store);
   const open = store.useState('open');
   const resolvedSwipeDirection = swipeDirectionProp ?? oppositeSwipeDirection[swipeDirection];
   const dismissDirection = oppositeSwipeDirection[resolvedSwipeDirection];
   const enabled = !disabled && (!open || swipeActive);
-  const resetDragDelta = DrawerRoot.useStableCallback(() => {
+  const resetDragDelta = useValueChanged.useStableCallback(() => {
     dragDeltaRef.current.x = 0;
     dragDeltaRef.current.y = 0;
   });
@@ -1611,7 +1605,7 @@ const DrawerSwipeArea = /*#__PURE__*/React__namespace.forwardRef(function Drawer
     });
     appliedSwipeStylesRef.current = true;
   }
-  const clearSwipeStyles = DrawerRoot.useStableCallback(() => {
+  const clearSwipeStyles = useValueChanged.useStableCallback(() => {
     const popupElement = store.context.popupRef.current;
     if (popupElement && appliedSwipeStylesRef.current) {
       popupElement.style.removeProperty(DrawerRoot.DrawerPopupCssVars.swipeMovementX);
@@ -1639,13 +1633,13 @@ const DrawerSwipeArea = /*#__PURE__*/React__namespace.forwardRef(function Drawer
       return;
     }
     openedBySwipeRef.current = true;
-    store.setOpen(true, DrawerRoot.createChangeEventDetails(DrawerRoot.swipe, event, swipeAreaRef.current ?? undefined));
+    store.setOpen(true, useValueChanged.createChangeEventDetails(useValueChanged.swipe, event, swipeAreaRef.current ?? undefined));
   }
   function closeDrawer(event) {
     if (!store.select('open')) {
       return;
     }
-    store.setOpen(false, DrawerRoot.createChangeEventDetails(DrawerRoot.swipe, event, swipeAreaRef.current ?? undefined));
+    store.setOpen(false, useValueChanged.createChangeEventDetails(useValueChanged.swipe, event, swipeAreaRef.current ?? undefined));
   }
   const swipe = useSwipeDismiss({
     enabled,
@@ -1743,7 +1737,7 @@ const DrawerSwipeArea = /*#__PURE__*/React__namespace.forwardRef(function Drawer
   return useRenderElement.useRenderElement('div', componentProps, {
     state,
     ref: [forwardedRef, swipeAreaRef, registerTrigger],
-    stateAttributesMapping: stateAttributesMapping$7,
+    stateAttributesMapping: stateAttributesMapping$5,
     props: [{
       role: 'presentation',
       'aria-hidden': true,
@@ -1844,7 +1838,7 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
   const [swipeRelease, setSwipeRelease] = React__namespace.useState(null);
   const pendingSwipeCloseSnapPointRef = React__namespace.useRef(undefined);
   const resetSwipeRef = React__namespace.useRef(null);
-  const controlledDismissFrame = DrawerRoot.useAnimationFrame();
+  const controlledDismissFrame = useValueChanged.useAnimationFrame();
   const nestedSwipeActiveRef = React__namespace.useRef(false);
   const lastPointerTypeRef = React__namespace.useRef('');
   const ignoreNextTouchStartFromPenRef = React__namespace.useRef(false);
@@ -1884,7 +1878,7 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
     if (!snapPointRange || activeSnapPointOffset === null) {
       return null;
     }
-    return DrawerRoot.clamp((activeSnapPointOffset - snapPointRange.minOffset) / snapPointRange.range, 0, 1);
+    return useValueChanged.clamp((activeSnapPointOffset - snapPointRange.minOffset) / snapPointRange.range, 0, 1);
   }, [activeSnapPointOffset, snapPointRange]);
   const swipeDirections = React__namespace.useMemo(() => {
     if (snapPoints && snapPoints.length > 0 && (swipeDirection === 'down' || swipeDirection === 'up')) {
@@ -1892,15 +1886,15 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
     }
     return [swipeDirection];
   }, [snapPoints, swipeDirection]);
-  const setSwipeDismissed = DrawerRoot.useStableCallback(dismissed => {
+  const setSwipeDismissed = useValueChanged.useStableCallback(dismissed => {
     setSwipeDismissedElements(store.context.popupRef.current, store.context.backdropRef.current, dismissed);
   });
-  const clearSwipeRelease = DrawerRoot.useStableCallback(() => {
+  const clearSwipeRelease = useValueChanged.useStableCallback(() => {
     setSwipeDismissed(false);
-    store.context.popupRef.current?.removeAttribute(DrawerRoot.TransitionStatusDataAttributes.endingStyle);
+    store.context.popupRef.current?.removeAttribute(useValueChanged.TransitionStatusDataAttributes.endingStyle);
     setSwipeRelease(null);
   });
-  const applySwipeProgress = DrawerRoot.useStableCallback(({
+  const applySwipeProgress = useValueChanged.useStableCallback(({
     resolvedProgress,
     shouldTrackProgress,
     notifyParent
@@ -1972,13 +1966,13 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
     if (!Number.isFinite(directionalVelocity) || directionalVelocity <= MIN_SWIPE_RELEASE_VELOCITY) {
       return null;
     }
-    const clampedVelocity = DrawerRoot.clamp(directionalVelocity, MIN_SWIPE_RELEASE_VELOCITY, MAX_SWIPE_RELEASE_VELOCITY);
-    const durationMs = DrawerRoot.clamp(remainingDistance / clampedVelocity, MIN_SWIPE_RELEASE_DURATION_MS, MAX_SWIPE_RELEASE_DURATION_MS);
+    const clampedVelocity = useValueChanged.clamp(directionalVelocity, MIN_SWIPE_RELEASE_VELOCITY, MAX_SWIPE_RELEASE_VELOCITY);
+    const durationMs = useValueChanged.clamp(remainingDistance / clampedVelocity, MIN_SWIPE_RELEASE_DURATION_MS, MAX_SWIPE_RELEASE_DURATION_MS);
     if (!Number.isFinite(durationMs)) {
       return null;
     }
     const normalizedDuration = (durationMs - MIN_SWIPE_RELEASE_DURATION_MS) / (MAX_SWIPE_RELEASE_DURATION_MS - MIN_SWIPE_RELEASE_DURATION_MS);
-    const durationScalar = DrawerRoot.clamp(MIN_SWIPE_RELEASE_SCALAR + normalizedDuration * (MAX_SWIPE_RELEASE_SCALAR - MIN_SWIPE_RELEASE_SCALAR), MIN_SWIPE_RELEASE_SCALAR, MAX_SWIPE_RELEASE_SCALAR);
+    const durationScalar = useValueChanged.clamp(MIN_SWIPE_RELEASE_SCALAR + normalizedDuration * (MAX_SWIPE_RELEASE_SCALAR - MIN_SWIPE_RELEASE_SCALAR), MIN_SWIPE_RELEASE_SCALAR, MAX_SWIPE_RELEASE_SCALAR);
     if (!Number.isFinite(durationScalar) || durationScalar <= 0) {
       return null;
     }
@@ -2014,13 +2008,13 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
       if (!popupElement) {
         return;
       }
-      const doc = DrawerRoot.ownerDocument(popupElement);
+      const doc = useValueChanged.ownerDocument(popupElement);
       const selection = doc.getSelection?.();
       if (!selection || selection.isCollapsed) {
         return;
       }
-      const anchorElement = index_esm.isElement(selection.anchorNode) ? selection.anchorNode : selection.anchorNode?.parentElement;
-      const focusElement = index_esm.isElement(selection.focusNode) ? selection.focusNode : selection.focusNode?.parentElement;
+      const anchorElement = floatingUi_utils_dom.isElement(selection.anchorNode) ? selection.anchorNode : selection.anchorNode?.parentElement;
+      const focusElement = floatingUi_utils_dom.isElement(selection.focusNode) ? selection.focusNode : selection.focusNode?.parentElement;
       if (!DrawerRoot.contains(popupElement, anchorElement) && !DrawerRoot.contains(popupElement, focusElement)) {
         return;
       }
@@ -2070,15 +2064,15 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
       if (snapPointRange && popupHeight > 0) {
         if (details && Number.isFinite(details.deltaY)) {
           const baseOffset = activeSnapPointOffset ?? snapPointRange.minOffset;
-          const nextOffset = DrawerRoot.clamp(baseOffset + details.deltaY, 0, popupHeight);
-          resolvedProgress = DrawerRoot.clamp((nextOffset - snapPointRange.minOffset) / snapPointRange.range, 0, 1);
+          const nextOffset = useValueChanged.clamp(baseOffset + details.deltaY, 0, popupHeight);
+          resolvedProgress = useValueChanged.clamp((nextOffset - snapPointRange.minOffset) / snapPointRange.range, 0, 1);
         } else if (snapPointProgress !== null) {
           resolvedProgress = snapPointProgress;
         } else if (currentDirection === 'down' || currentDirection === 'up') {
           const displacement = progress * popupHeight;
           const baseOffset = activeSnapPointOffset ?? snapPointRange.minOffset;
           const nextOffset = currentDirection === 'down' ? baseOffset + displacement : baseOffset - displacement;
-          resolvedProgress = DrawerRoot.clamp((nextOffset - snapPointRange.minOffset) / snapPointRange.range, 0, 1);
+          resolvedProgress = useValueChanged.clamp((nextOffset - snapPointRange.minOffset) / snapPointRange.range, 0, 1);
         }
       }
       applySwipeProgress({
@@ -2115,7 +2109,7 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
         notifyParentSwipingChange?.(false);
         setSwipeDismissed(true);
         popupElement.style.removeProperty('transition');
-        popupElement.setAttribute(DrawerRoot.TransitionStatusDataAttributes.endingStyle, '');
+        popupElement.setAttribute(useValueChanged.TransitionStatusDataAttributes.endingStyle, '');
         ReactDOM__namespace.flushSync(() => {
           setSwipeRelease(resolveSwipeRelease({
             direction: resolvedDirection,
@@ -2183,10 +2177,10 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
         }
       }
       const currentOffset = activeSnapPointOffset ?? 0;
-      const dragTargetOffset = DrawerRoot.clamp(currentOffset + dragDelta, 0, popupHeight);
-      const velocityOffset = Number.isFinite(resolvedDirectionalVelocity) && Math.abs(resolvedDirectionalVelocity) >= SNAP_VELOCITY_THRESHOLD ? DrawerRoot.clamp(resolvedDirectionalVelocity, -MAX_SNAP_VELOCITY, MAX_SNAP_VELOCITY) * SNAP_VELOCITY_MULTIPLIER : 0;
-      const targetOffset = snapToSequentialPoints ? dragTargetOffset : DrawerRoot.clamp(dragTargetOffset + velocityOffset, 0, popupHeight);
-      const snapPointEventDetails = DrawerRoot.createChangeEventDetails(DrawerRoot.swipe, event);
+      const dragTargetOffset = useValueChanged.clamp(currentOffset + dragDelta, 0, popupHeight);
+      const velocityOffset = Number.isFinite(resolvedDirectionalVelocity) && Math.abs(resolvedDirectionalVelocity) >= SNAP_VELOCITY_THRESHOLD ? useValueChanged.clamp(resolvedDirectionalVelocity, -MAX_SNAP_VELOCITY, MAX_SNAP_VELOCITY) * SNAP_VELOCITY_MULTIPLIER : 0;
+      const targetOffset = snapToSequentialPoints ? dragTargetOffset : useValueChanged.clamp(dragTargetOffset + velocityOffset, 0, popupHeight);
+      const snapPointEventDetails = useValueChanged.createChangeEventDetails(useValueChanged.swipe, event);
       const closeFromSnapPoints = () => {
         pendingSwipeCloseSnapPointRef.current = activeSnapPoint;
         setActiveSnapPoint?.(null, snapPointEventDetails);
@@ -2221,7 +2215,7 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
         const shouldAdvance = dragDirection !== 0 && velocityDirection !== 0 && velocityDirection === dragDirection && Math.abs(resolvedDirectionalVelocity) >= SNAP_VELOCITY_THRESHOLD;
         let effectiveTargetOffset = targetOffset;
         if (shouldAdvance) {
-          const adjacentIndex = DrawerRoot.clamp(currentIndex + dragDirection, 0, orderedSnapPoints.length - 1);
+          const adjacentIndex = useValueChanged.clamp(currentIndex + dragDirection, 0, orderedSnapPoints.length - 1);
           if (adjacentIndex !== currentIndex) {
             const adjacentPoint = orderedSnapPoints[adjacentIndex];
             const shouldForceAdjacent = dragDirection > 0 ? targetOffset < adjacentPoint.offset : targetOffset > adjacentPoint.offset;
@@ -2274,12 +2268,12 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
         backdropElement.style.setProperty(DrawerRoot.DrawerBackdropCssVars.swipeProgress, '0');
         backdropElement.style.removeProperty(DrawerRoot.DrawerPopupCssVars.height);
       }
-      const dismissEventDetails = DrawerRoot.createChangeEventDetails(DrawerRoot.swipe, event);
+      const dismissEventDetails = useValueChanged.createChangeEventDetails(useValueChanged.swipe, event);
       store.setOpen(false, dismissEventDetails);
       if (dismissEventDetails.isCanceled) {
         const pendingSnapPoint = pendingSwipeCloseSnapPointRef.current;
         if (pendingSnapPoint !== undefined) {
-          setActiveSnapPoint?.(pendingSnapPoint, DrawerRoot.createChangeEventDetails(DrawerRoot.swipe, event));
+          setActiveSnapPoint?.(pendingSnapPoint, useValueChanged.createChangeEventDetails(useValueChanged.swipe, event));
         }
         pendingSwipeCloseSnapPointRef.current = undefined;
         resetSwipeRef.current?.();
@@ -2301,7 +2295,7 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
             // Parent rejected: revert animation and restore snap point.
             const pendingSnapPoint = pendingSwipeCloseSnapPointRef.current;
             if (pendingSnapPoint !== undefined) {
-              setActiveSnapPoint?.(pendingSnapPoint, DrawerRoot.createChangeEventDetails(DrawerRoot.swipe, savedEvent));
+              setActiveSnapPoint?.(pendingSnapPoint, useValueChanged.createChangeEventDetails(useValueChanged.swipe, savedEvent));
             }
             pendingSwipeCloseSnapPointRef.current = undefined;
             clearSwipeRelease();
@@ -2327,8 +2321,8 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
       return undefined;
     }
     const resolvedRootElement = rootElement;
-    const doc = DrawerRoot.ownerDocument(resolvedRootElement);
-    const win = index_esm.getWindow(doc);
+    const doc = useValueChanged.ownerDocument(resolvedRootElement);
+    const win = floatingUi_utils_dom.getWindow(doc);
     function handleNativeTouchMove(event) {
       if (ignoreTouchSwipeRef.current) {
         return;
@@ -2470,7 +2464,7 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
         if (!open || !mounted || nestedDrawerOpen) {
           return;
         }
-        const doc = DrawerRoot.ownerDocument(event.currentTarget);
+        const doc = useValueChanged.ownerDocument(event.currentTarget);
         const elementAtPoint = getElementAtPoint(doc, event.clientX, event.clientY);
         if (isSwipeIgnoredTarget(elementAtPoint) || isDrawerContentTarget(elementAtPoint)) {
           return;
@@ -2526,7 +2520,7 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
           touchScrollStateRef.current = null;
           return;
         }
-        const doc = DrawerRoot.ownerDocument(event.currentTarget);
+        const doc = useValueChanged.ownerDocument(event.currentTarget);
         const elementAtPoint = getElementAtPoint(doc, touch.clientX, touch.clientY);
         ignoreTouchSwipeRef.current = isSwipeIgnoredTarget(elementAtPoint);
         if (ignoreTouchSwipeRef.current) {
@@ -2534,7 +2528,7 @@ const DrawerViewport = /*#__PURE__*/React__namespace.forwardRef(function DrawerV
           return;
         }
         const rootElement = viewportElement ?? popupElementState;
-        const target = index_esm.isElement(event.target) ? event.target : null;
+        const target = floatingUi_utils_dom.isElement(event.target) ? event.target : null;
         let scrollTarget = null;
         let hasCrossAxisScrollableContent = false;
         if (rootElement && target && DrawerRoot.contains(rootElement, target)) {
@@ -2626,14 +2620,14 @@ function isRangeInput(target, win) {
   return target instanceof win.HTMLInputElement && target.type === 'range';
 }
 function isTextSelectionControl(target) {
-  if (!index_esm.isElement(target)) {
+  if (!floatingUi_utils_dom.isElement(target)) {
     return false;
   }
   return target.tagName === 'INPUT' || target.tagName === 'TEXTAREA';
 }
 function hasExpandedSelectionWithinTarget(selection, target) {
-  const anchorElement = index_esm.isElement(selection.anchorNode) ? selection.anchorNode : selection.anchorNode?.parentElement;
-  const focusElement = index_esm.isElement(selection.focusNode) ? selection.focusNode : selection.focusNode?.parentElement;
+  const anchorElement = floatingUi_utils_dom.isElement(selection.anchorNode) ? selection.anchorNode : selection.anchorNode?.parentElement;
+  const focusElement = floatingUi_utils_dom.isElement(selection.focusNode) ? selection.focusNode : selection.focusNode?.parentElement;
   return selection.containsNode(target, true) || DrawerRoot.contains(target, anchorElement) || DrawerRoot.contains(target, focusElement);
 }
 function shouldIgnoreSwipeForTextSelection(doc, rootElement) {
@@ -2662,7 +2656,7 @@ function isEventOnRangeInput(event, win) {
   return isRangeInput(event.target, win);
 }
 function isReactTouchEventOnRangeInput(event) {
-  return isEventOnRangeInput(event.nativeEvent, index_esm.getWindow(event.currentTarget));
+  return isEventOnRangeInput(event.nativeEvent, floatingUi_utils_dom.getWindow(event.currentTarget));
 }
 function updateTouchScrollPosition(touchState, touch) {
   touchState.lastX = touch.clientX;
@@ -2809,9 +2803,9 @@ const MenuArrow = /*#__PURE__*/React__namespace.forwardRef(function MenuArrow(co
 });
 if (process.env.NODE_ENV !== "production") MenuArrow.displayName = "MenuArrow";
 
-const stateAttributesMapping$6 = {
+const stateAttributesMapping$4 = {
   ...DrawerRoot.popupStateMapping,
-  ...DrawerRoot.transitionStatusMapping
+  ...useValueChanged.transitionStatusMapping
 };
 
 /**
@@ -2841,12 +2835,12 @@ const MenuBackdrop = /*#__PURE__*/React__namespace.forwardRef(function MenuBackd
   return useRenderElement.useRenderElement('div', componentProps, {
     ref: contextMenuContext?.backdropRef ? [forwardedRef, contextMenuContext.backdropRef] : forwardedRef,
     state,
-    stateAttributesMapping: stateAttributesMapping$6,
+    stateAttributesMapping: stateAttributesMapping$4,
     props: [{
       role: 'presentation',
       hidden: !mounted,
       style: {
-        pointerEvents: lastOpenChangeReason === DrawerRoot.triggerHover ? 'none' : undefined,
+        pointerEvents: lastOpenChangeReason === useValueChanged.triggerHover ? 'none' : undefined,
         userSelect: 'none',
         WebkitUserSelect: 'none'
       }
@@ -2889,13 +2883,13 @@ const MenuCheckboxItem = /*#__PURE__*/React__namespace.forwardRef(function MenuC
     label
   });
   const menuPositionerContext = MenuSubmenuTrigger.useMenuPositionerContext(true);
-  const id = MenuSubmenuTrigger.useBaseUiId(idProp);
+  const id = useBaseUiId.useBaseUiId(idProp);
   const {
     store
   } = MenuSubmenuTrigger.useMenuRootContext();
   const highlighted = store.useState('isActive', listItem.index);
   const itemProps = store.useState('itemProps');
-  const [checked, setChecked] = DrawerRoot.useControlled({
+  const [checked, setChecked] = useValueChanged.useControlled({
     controlled: checkedProp,
     default: defaultChecked ?? false,
     name: 'MenuCheckboxItem',
@@ -2919,9 +2913,9 @@ const MenuCheckboxItem = /*#__PURE__*/React__namespace.forwardRef(function MenuC
     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: () => {}
     };
     onCheckedChange?.(!checked, details);
@@ -2965,8 +2959,8 @@ const MenuCheckboxItemIndicator = /*#__PURE__*/React__namespace.forwardRef(funct
   const {
     transitionStatus,
     setMounted
-  } = DrawerRoot.useTransitionStatus(item.checked);
-  DrawerRoot.useOpenChangeComplete({
+  } = useValueChanged.useTransitionStatus(item.checked);
+  useValueChanged.useOpenChangeComplete({
     open: item.checked,
     ref: indicatorRef,
     onComplete() {
@@ -3015,12 +3009,12 @@ function usePreviousValue(value) {
 }
 
 function getCssDimensions(element) {
-  const css = index_esm.getComputedStyle(element);
+  const css = floatingUi_utils_dom.getComputedStyle(element);
   // In testing environments, the `width` and `height` properties are empty
   // strings for SVG elements, returning NaN. Fallback to `0` in this case.
   let width = parseFloat(css.width) || 0;
   let height = parseFloat(css.height) || 0;
-  const hasOffset = index_esm.isHTMLElement(element);
+  const hasOffset = floatingUi_utils_dom.isHTMLElement(element);
   const offsetWidth = hasOffset ? element.offsetWidth : width;
   const offsetHeight = hasOffset ? element.offsetHeight : height;
   const shouldFallback = index_esm.round(width) !== offsetWidth || index_esm.round(height) !== offsetHeight;
@@ -3051,14 +3045,14 @@ function usePopupAutoResize(parameters) {
     side,
     direction
   } = parameters;
-  const runOnceAnimationsFinish = DrawerRoot.useAnimationsFinished(popupElement, true, false);
-  const animationFrame = DrawerRoot.useAnimationFrame();
+  const runOnceAnimationsFinish = useValueChanged.useAnimationsFinished(popupElement, true, false);
+  const animationFrame = useValueChanged.useAnimationFrame();
   const committedDimensionsRef = React__namespace.useRef(null);
   const liveDimensionsRef = React__namespace.useRef(null);
   const isInitialRenderRef = React__namespace.useRef(true);
   const restoreAnchoringStylesRef = React__namespace.useRef(useRenderElement.NOOP);
-  const onMeasureLayout = DrawerRoot.useStableCallback(onMeasureLayoutParam);
-  const onMeasureLayoutComplete = DrawerRoot.useStableCallback(onMeasureLayoutCompleteParam);
+  const onMeasureLayout = useValueChanged.useStableCallback(onMeasureLayoutParam);
+  const onMeasureLayoutComplete = useValueChanged.useStableCallback(onMeasureLayoutCompleteParam);
   const anchoringStyles = React__namespace.useMemo(() => {
     // Ensure popup size transitions correctly when anchored to `bottom` (side=top) or `right` (side=left).
     let isOriginSide = side === 'top';
@@ -3076,7 +3070,7 @@ function usePopupAutoResize(parameters) {
       [isPhysicalLeft ? 'right' : 'left']: '0'
     } : useRenderElement.EMPTY_OBJECT;
   }, [side, direction]);
-  DrawerRoot.useIsoLayoutEffect(() => {
+  useValueChanged.useIsoLayoutEffect(() => {
     // Reset the state when the popup is closed.
     if (!mounted || !enabled() || typeof ResizeObserver !== 'function') {
       restoreAnchoringStylesRef.current = useRenderElement.NOOP;
@@ -3234,22 +3228,22 @@ function usePopupViewport(parameters) {
   const [newTriggerOffset, setNewTriggerOffset] = React__namespace.useState(null);
   const currentContainerRef = React__namespace.useRef(null);
   const previousContainerRef = React__namespace.useRef(null);
-  const onAnimationsFinished = DrawerRoot.useAnimationsFinished(currentContainerRef, true, false);
-  const cleanupFrame = DrawerRoot.useAnimationFrame();
+  const onAnimationsFinished = useValueChanged.useAnimationsFinished(currentContainerRef, true, false);
+  const cleanupFrame = useValueChanged.useAnimationFrame();
   const [previousContentDimensions, setPreviousContentDimensions] = React__namespace.useState(null);
   const [showStartingStyleAttribute, setShowStartingStyleAttribute] = React__namespace.useState(false);
-  DrawerRoot.useIsoLayoutEffect(() => {
+  useValueChanged.useIsoLayoutEffect(() => {
     store.set('hasViewport', true);
     return () => {
       store.set('hasViewport', false);
     };
   }, [store]);
-  const handleMeasureLayout = DrawerRoot.useStableCallback(() => {
+  const handleMeasureLayout = useValueChanged.useStableCallback(() => {
     currentContainerRef.current?.style.setProperty('animation', 'none');
     currentContainerRef.current?.style.setProperty('transition', 'none');
     previousContainerRef.current?.style.setProperty('display', 'none');
   });
-  const handleMeasureLayoutComplete = DrawerRoot.useStableCallback(previousDimensions => {
+  const handleMeasureLayoutComplete = useValueChanged.useStableCallback(previousDimensions => {
     currentContainerRef.current?.style.removeProperty('animation');
     currentContainerRef.current?.style.removeProperty('transition');
     previousContainerRef.current?.style.removeProperty('display');
@@ -3258,7 +3252,7 @@ function usePopupViewport(parameters) {
     }
   });
   const lastHandledTriggerRef = React__namespace.useRef(null);
-  DrawerRoot.useIsoLayoutEffect(() => {
+  useValueChanged.useIsoLayoutEffect(() => {
     // When a trigger changes, set the captured children HTML to state,
     // so we can render both new and old content.
     if (activeTrigger && previousActiveTrigger && activeTrigger !== previousActiveTrigger && lastHandledTriggerRef.current !== activeTrigger && capturedNodeRef.current) {
@@ -3285,7 +3279,7 @@ function usePopupViewport(parameters) {
 
   // Capture a clone of the current content DOM subtree when not transitioning.
   // We can't store previous React nodes as they may be stateful; instead we capture DOM clones for visual continuity.
-  DrawerRoot.useIsoLayoutEffect(() => {
+  useValueChanged.useIsoLayoutEffect(() => {
     // When a transition is in progress, we store the next content in capturedNodeRef.
     // This handles the case where the trigger changes multiple times before the transition finishes.
     // We want to always capture the latest content for the previous snapshot.
@@ -3334,7 +3328,7 @@ function usePopupViewport(parameters) {
   }
 
   // When previousContentNode is present, imperatively populate the previous container with the cloned children.
-  DrawerRoot.useIsoLayoutEffect(() => {
+  useValueChanged.useIsoLayoutEffect(() => {
     const container = previousContainerRef.current;
     if (!container || !previousContentNode) {
       return;
@@ -3421,7 +3415,7 @@ function usePopupContentKey(activeTriggerId, payload) {
   const previousActiveTriggerIdRef = React__namespace.useRef(activeTriggerId);
   const previousPayloadRef = React__namespace.useRef(payload);
   const pendingPayloadUpdateRef = React__namespace.useRef(false);
-  DrawerRoot.useIsoLayoutEffect(() => {
+  useValueChanged.useIsoLayoutEffect(() => {
     // Compare against the last committed values to decide whether we need a new DOM subtree.
     const previousActiveTriggerId = previousActiveTriggerIdRef.current;
     const previousPayload = previousPayloadRef.current;
@@ -3460,7 +3454,7 @@ let MenuViewportCssVars = /*#__PURE__*/function (MenuViewportCssVars) {
   return MenuViewportCssVars;
 }({});
 
-const stateAttributesMapping$5 = {
+const stateAttributesMapping$3 = {
   activationDirection: value => value ? {
     'data-activation-direction': value
   } : null
@@ -3508,7 +3502,7 @@ const MenuViewport = /*#__PURE__*/React__namespace.forwardRef(function MenuViewp
     props: [elementProps, {
       children: childrenToRender
     }],
-    stateAttributesMapping: stateAttributesMapping$5
+    stateAttributesMapping: stateAttributesMapping$3
   });
 });
 if (process.env.NODE_ENV !== "production") MenuViewport.displayName = "MenuViewport";
@@ -3534,14 +3528,14 @@ class MenuHandle {
     if (triggerId && !triggerElement) {
       throw new Error(process.env.NODE_ENV !== "production" ? `Base UI: MenuHandle.open: No trigger found with id "${triggerId}".` : useRenderElement.formatErrorMessage(83, triggerId));
     }
-    this.store.setOpen(true, DrawerRoot.createChangeEventDetails('imperative-action', undefined, triggerElement));
+    this.store.setOpen(true, useValueChanged.createChangeEventDetails('imperative-action', undefined, triggerElement));
   }
 
   /**
    * Closes the menu.
    */
   close() {
-    this.store.setOpen(false, DrawerRoot.createChangeEventDetails('imperative-action', undefined, undefined));
+    this.store.setOpen(false, useValueChanged.createChangeEventDetails('imperative-action', undefined, undefined));
   }
 
   /**
@@ -3852,299 +3846,6 @@ const selectors = {
   submitOnItemClick: DrawerRoot.createSelector(state => state.submitOnItemClick)
 };
 
-let FieldControlDataAttributes = /*#__PURE__*/function (FieldControlDataAttributes) {
-  /**
-   * Present when the field is disabled.
-   */
-  FieldControlDataAttributes["disabled"] = "data-disabled";
-  /**
-   * Present when the field is in valid state.
-   */
-  FieldControlDataAttributes["valid"] = "data-valid";
-  /**
-   * Present when the field is in invalid state.
-   */
-  FieldControlDataAttributes["invalid"] = "data-invalid";
-  /**
-   * Present when the field has been touched.
-   */
-  FieldControlDataAttributes["touched"] = "data-touched";
-  /**
-   * Present when the field's value has changed.
-   */
-  FieldControlDataAttributes["dirty"] = "data-dirty";
-  /**
-   * Present when the field is filled.
-   */
-  FieldControlDataAttributes["filled"] = "data-filled";
-  /**
-   * Present when the field control is focused.
-   */
-  FieldControlDataAttributes["focused"] = "data-focused";
-  return FieldControlDataAttributes;
-}({});
-
-const DEFAULT_VALIDITY_STATE = {
-  badInput: false,
-  customError: false,
-  patternMismatch: false,
-  rangeOverflow: false,
-  rangeUnderflow: false,
-  stepMismatch: false,
-  tooLong: false,
-  tooShort: false,
-  typeMismatch: false,
-  valid: null,
-  valueMissing: false
-};
-const DEFAULT_FIELD_STATE_ATTRIBUTES = {
-  valid: null,
-  touched: false,
-  dirty: false,
-  filled: false,
-  focused: false
-};
-const DEFAULT_FIELD_ROOT_STATE = {
-  disabled: false,
-  ...DEFAULT_FIELD_STATE_ATTRIBUTES
-};
-const fieldValidityMapping = {
-  valid(value) {
-    if (value === null) {
-      return null;
-    }
-    if (value) {
-      return {
-        [FieldControlDataAttributes.valid]: ''
-      };
-    }
-    return {
-      [FieldControlDataAttributes.invalid]: ''
-    };
-  }
-};
-
-const FieldRootContext = /*#__PURE__*/React__namespace.createContext({
-  invalid: undefined,
-  name: undefined,
-  validityData: {
-    state: DEFAULT_VALIDITY_STATE,
-    errors: [],
-    error: '',
-    value: '',
-    initialValue: null
-  },
-  setValidityData: useRenderElement.NOOP,
-  disabled: undefined,
-  touched: DEFAULT_FIELD_STATE_ATTRIBUTES.touched,
-  setTouched: useRenderElement.NOOP,
-  dirty: DEFAULT_FIELD_STATE_ATTRIBUTES.dirty,
-  setDirty: useRenderElement.NOOP,
-  filled: DEFAULT_FIELD_STATE_ATTRIBUTES.filled,
-  setFilled: useRenderElement.NOOP,
-  focused: DEFAULT_FIELD_STATE_ATTRIBUTES.focused,
-  setFocused: useRenderElement.NOOP,
-  validate: () => null,
-  validationMode: 'onSubmit',
-  validationDebounceTime: 0,
-  shouldValidateOnChange: () => false,
-  state: DEFAULT_FIELD_ROOT_STATE,
-  markedDirtyRef: {
-    current: false
-  },
-  validation: {
-    getValidationProps: (props = useRenderElement.EMPTY_OBJECT) => props,
-    getInputValidationProps: (props = useRenderElement.EMPTY_OBJECT) => props,
-    inputRef: {
-      current: null
-    },
-    commit: async () => {}
-  }
-});
-if (process.env.NODE_ENV !== "production") FieldRootContext.displayName = "FieldRootContext";
-function useFieldRootContext(optional = true) {
-  const context = React__namespace.useContext(FieldRootContext);
-  if (context.setValidityData === useRenderElement.NOOP && !optional) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: FieldRootContext is missing. Field parts must be placed within <Field.Root>.' : useRenderElement.formatErrorMessage(28));
-  }
-  return context;
-}
-
-/**
- * Combines the field's client-side, stateful validity data with the external invalid state to
- * determine the field's true validity.
- */
-function getCombinedFieldValidityData(validityData, invalid) {
-  return {
-    ...validityData,
-    state: {
-      ...validityData.state,
-      valid: !invalid && validityData.state.valid
-    }
-  };
-}
-
-const FormContext = /*#__PURE__*/React__namespace.createContext({
-  formRef: {
-    current: {
-      fields: new Map()
-    }
-  },
-  errors: {},
-  clearErrors: useRenderElement.NOOP,
-  validationMode: 'onSubmit',
-  submitAttemptedRef: {
-    current: false
-  }
-});
-if (process.env.NODE_ENV !== "production") FormContext.displayName = "FormContext";
-function useFormContext() {
-  return React__namespace.useContext(FormContext);
-}
-
-function useField(params) {
-  const {
-    enabled = true,
-    value,
-    id,
-    name,
-    controlRef,
-    commit
-  } = params;
-  const {
-    formRef
-  } = useFormContext();
-  const {
-    invalid,
-    markedDirtyRef,
-    validityData,
-    setValidityData
-  } = useFieldRootContext();
-  const getValue = DrawerRoot.useStableCallback(params.getValue);
-  DrawerRoot.useIsoLayoutEffect(() => {
-    if (!enabled) {
-      return;
-    }
-    let initialValue = value;
-    if (initialValue === undefined) {
-      initialValue = getValue();
-    }
-    if (validityData.initialValue === null && initialValue !== null) {
-      setValidityData(prev => ({
-        ...prev,
-        initialValue
-      }));
-    }
-  }, [enabled, setValidityData, value, validityData.initialValue, getValue]);
-  DrawerRoot.useIsoLayoutEffect(() => {
-    if (!enabled || !id) {
-      return;
-    }
-    formRef.current.fields.set(id, {
-      getValue,
-      name,
-      controlRef,
-      validityData: getCombinedFieldValidityData(validityData, invalid),
-      validate(flushSync = true) {
-        let nextValue = value;
-        if (nextValue === undefined) {
-          nextValue = getValue();
-        }
-        markedDirtyRef.current = true;
-        if (!flushSync) {
-          commit(nextValue);
-        } else {
-          // Synchronously update the validity state so the submit event can be prevented.
-          ReactDOM__namespace.flushSync(() => commit(nextValue));
-        }
-      }
-    });
-  }, [commit, controlRef, enabled, formRef, getValue, id, invalid, markedDirtyRef, name, validityData, value]);
-  DrawerRoot.useIsoLayoutEffect(() => {
-    const fields = formRef.current.fields;
-    return () => {
-      if (id) {
-        fields.delete(id);
-      }
-    };
-  }, [formRef, id]);
-}
-
-/**
- * A context for providing [labelable elements](https://html.spec.whatwg.org/multipage/forms.html#category-label)\
- * with an accessible name (label) and description.
- */
-const LabelableContext = /*#__PURE__*/React__namespace.createContext({
-  controlId: undefined,
-  registerControlId: useRenderElement.NOOP,
-  labelId: undefined,
-  setLabelId: useRenderElement.NOOP,
-  messageIds: [],
-  setMessageIds: useRenderElement.NOOP,
-  getDescriptionProps: externalProps => externalProps
-});
-if (process.env.NODE_ENV !== "production") LabelableContext.displayName = "LabelableContext";
-function useLabelableContext() {
-  return React__namespace.useContext(LabelableContext);
-}
-
-function useLabelableId(params = {}) {
-  const {
-    id,
-    implicit = false,
-    controlRef
-  } = params;
-  const {
-    controlId,
-    registerControlId
-  } = useLabelableContext();
-  const defaultId = MenuSubmenuTrigger.useBaseUiId(id);
-  const controlIdForEffect = implicit ? controlId : undefined;
-  const controlSourceRef = useRenderElement.useRefWithInit(() => Symbol('labelable-control'));
-  const hasRegisteredRef = React__namespace.useRef(false);
-  const hadExplicitIdRef = React__namespace.useRef(id != null);
-  const unregisterControlId = DrawerRoot.useStableCallback(() => {
-    if (!hasRegisteredRef.current || registerControlId === useRenderElement.NOOP) {
-      return;
-    }
-    hasRegisteredRef.current = false;
-    registerControlId(controlSourceRef.current, undefined);
-  });
-  DrawerRoot.useIsoLayoutEffect(() => {
-    if (registerControlId === useRenderElement.NOOP) {
-      return undefined;
-    }
-    let nextId;
-    if (implicit) {
-      const elem = controlRef?.current;
-      if (index_esm.isElement(elem) && elem.closest('label') != null) {
-        nextId = id ?? null;
-      } else {
-        nextId = controlIdForEffect ?? defaultId;
-      }
-    } else if (id != null) {
-      hadExplicitIdRef.current = true;
-      nextId = id;
-    } else if (hadExplicitIdRef.current) {
-      nextId = defaultId;
-    } else {
-      unregisterControlId();
-      return undefined;
-    }
-    if (nextId === undefined) {
-      unregisterControlId();
-      return undefined;
-    }
-    hasRegisteredRef.current = true;
-    registerControlId(controlSourceRef.current, nextId);
-    return undefined;
-  }, [id, controlRef, controlIdForEffect, registerControlId, implicit, defaultId, controlSourceRef, unregisterControlId]);
-  React__namespace.useEffect(() => {
-    return unregisterControlId;
-  }, [unregisterControlId]);
-  return controlId ?? defaultId;
-}
-
 /**
  * Enhanced filter using Intl.Collator for more robust string matching.
  * Uses the provided `itemToStringLabel` function if available, otherwise falls back to:
@@ -4313,7 +4014,7 @@ function AriaCombobox(props) {
   } = props;
   const {
     clearErrors
-  } = useFormContext();
+  } = NumberFieldInput.useFormContext();
   const {
     setDirty,
     validityData,
@@ -4325,8 +4026,8 @@ function AriaCombobox(props) {
     setFocused,
     validationMode,
     validation
-  } = useFieldRootContext();
-  const id = useLabelableId({
+  } = NumberFieldInput.useFieldRootContext();
+  const id = NumberFieldInput.useLabelableId({
     id: idProp
   });
   const collatorFilter = useCoreFilter({
@@ -4373,7 +4074,7 @@ function AriaCombobox(props) {
   } else {
     autoHighlightMode = autoHighlight ? 'input-change' : false;
   }
-  const [selectedValue, setSelectedValueUnwrapped] = DrawerRoot.useControlled({
+  const [selectedValue, setSelectedValueUnwrapped] = useValueChanged.useControlled({
     controlled: selectedValueProp,
     default: multiple ? defaultSelectedValue ?? useRenderElement.EMPTY_ARRAY : defaultSelectedValue,
     name: 'Combobox',
@@ -4403,13 +4104,13 @@ function AriaCombobox(props) {
     }
     return '';
   }).current;
-  const [inputValue, setInputValueUnwrapped] = DrawerRoot.useControlled({
+  const [inputValue, setInputValueUnwrapped] = useValueChanged.useControlled({
     controlled: inputValueProp,
     default: initialDefaultInputValue,
     name: 'Combobox',
     state: 'inputValue'
   });
-  const [open, setOpenUnwrapped] = DrawerRoot.useControlled({
+  const [open, setOpenUnwrapped] = useValueChanged.useControlled({
     controlled: props.open,
     default: props.defaultOpen,
     name: 'Combobox',
@@ -4565,8 +4266,8 @@ function AriaCombobox(props) {
     }
     return stringifyAsValue(selectedValue, itemToStringValue);
   }, [fieldRawValue, itemToStringValue, selectionMode, selectedValue]);
-  const onItemHighlighted = DrawerRoot.useStableCallback(onItemHighlightedProp);
-  const onOpenChangeComplete = DrawerRoot.useStableCallback(onOpenChangeCompleteProp);
+  const onItemHighlighted = useValueChanged.useStableCallback(onItemHighlightedProp);
+  const onOpenChangeComplete = useValueChanged.useStableCallback(onOpenChangeCompleteProp);
   const activeIndex = DrawerRoot.useStore(store, selectors.activeIndex);
   const selectedIndex = DrawerRoot.useStore(store, selectors.selectedIndex);
   const positionerElement = DrawerRoot.useStore(store, selectors.positionerElement);
@@ -4576,17 +4277,17 @@ function AriaCombobox(props) {
   const inputGroupElement = DrawerRoot.useStore(store, selectors.inputGroupElement);
   const inline = DrawerRoot.useStore(store, selectors.inline);
   const inputInsidePopup = DrawerRoot.useStore(store, selectors.inputInsidePopup);
-  const triggerRef = DrawerRoot.useValueAsRef(triggerElement);
+  const triggerRef = useValueChanged.useValueAsRef(triggerElement);
   const {
     mounted,
     setMounted,
     transitionStatus
-  } = DrawerRoot.useTransitionStatus(open);
+  } = useValueChanged.useTransitionStatus(open);
   const {
     openMethod,
     triggerProps
   } = DrawerRoot.useOpenInteractionType(open);
-  useField({
+  NumberFieldInput.useField({
     id,
     name,
     commit: validation.commit,
@@ -4594,7 +4295,7 @@ function AriaCombobox(props) {
     controlRef: inputInsidePopup ? triggerRef : inputRef,
     getValue: () => fieldStringValue
   });
-  const forceMount = DrawerRoot.useStableCallback(() => {
+  const forceMount = useValueChanged.useStableCallback(() => {
     if (items) {
       // Ensure typeahead works on a closed list.
       labelsRef.current = flatFilteredItems.map(item => stringifyAsLabel(item, itemToStringLabel));
@@ -4603,13 +4304,13 @@ function AriaCombobox(props) {
     }
   });
   const initialSelectedValueRef = React__namespace.useRef(selectedValue);
-  DrawerRoot.useIsoLayoutEffect(() => {
+  useValueChanged.useIsoLayoutEffect(() => {
     // Ensure the values and labels are registered for programmatic value changes.
     if (selectedValue !== initialSelectedValueRef.current) {
       forceMount();
     }
   }, [forceMount, selectedValue]);
-  const setIndices = DrawerRoot.useStableCallback(options => {
+  const setIndices = useValueChanged.useStableCallback(options => {
     store.update(options);
     const type = options.type || 'none';
     if (options.activeIndex === undefined) {
@@ -4618,7 +4319,7 @@ function AriaCombobox(props) {
     if (options.activeIndex === null) {
       if (lastHighlightRef.current !== INITIAL_LAST_HIGHLIGHT) {
         lastHighlightRef.current = INITIAL_LAST_HIGHLIGHT;
-        onItemHighlighted(undefined, DrawerRoot.createGenericEventDetails(type, undefined, {
+        onItemHighlighted(undefined, useValueChanged.createGenericEventDetails(type, undefined, {
           index: -1
         }));
       }
@@ -4628,13 +4329,13 @@ function AriaCombobox(props) {
         value: activeValue,
         index: options.activeIndex
       };
-      onItemHighlighted(activeValue, DrawerRoot.createGenericEventDetails(type, undefined, {
+      onItemHighlighted(activeValue, useValueChanged.createGenericEventDetails(type, undefined, {
         index: options.activeIndex
       }));
     }
   });
-  const setInputValue = DrawerRoot.useStableCallback((next, eventDetails) => {
-    hadInputClearRef.current = eventDetails.reason === DrawerRoot.inputClear;
+  const setInputValue = useValueChanged.useStableCallback((next, eventDetails) => {
+    hadInputClearRef.current = eventDetails.reason === useValueChanged.inputClear;
     props.onInputValueChange?.(next, eventDetails);
     if (eventDetails.isCanceled) {
       return;
@@ -4642,7 +4343,7 @@ function AriaCombobox(props) {
 
     // If user is typing, ensure we don't auto-highlight on open due to a race
     // with the post-open effect that sets this flag.
-    if (eventDetails.reason === DrawerRoot.inputChange) {
+    if (eventDetails.reason === useValueChanged.inputChange) {
       const event = eventDetails.event;
       const inputType = event.inputType;
       // Treat composition commits as typed input; autofill may omit `inputType` or
@@ -4665,7 +4366,7 @@ function AriaCombobox(props) {
     }
     setInputValueUnwrapped(next);
   });
-  const setOpen = DrawerRoot.useStableCallback((nextOpen, eventDetails) => {
+  const setOpen = useValueChanged.useStableCallback((nextOpen, eventDetails) => {
     if (open === nextOpen) {
       return;
     }
@@ -4700,11 +4401,11 @@ function AriaCombobox(props) {
         }
         // Clear the input immediately on close while retaining filtering via closeQuery for exit animations
         // if the input is outside the popup.
-        setInputValue('', DrawerRoot.createChangeEventDetails(DrawerRoot.inputClear, eventDetails.event));
+        setInputValue('', useValueChanged.createChangeEventDetails(useValueChanged.inputClear, eventDetails.event));
       }
     }
     setOpenUnwrapped(nextOpen);
-    if (!nextOpen && inputInsidePopup && (eventDetails.reason === DrawerRoot.focusOut || eventDetails.reason === DrawerRoot.outsidePress)) {
+    if (!nextOpen && inputInsidePopup && (eventDetails.reason === useValueChanged.focusOut || eventDetails.reason === useValueChanged.outsidePress)) {
       setTouched(true);
       setFocused(false);
       if (validationMode === 'onBlur') {
@@ -4713,7 +4414,7 @@ function AriaCombobox(props) {
       }
     }
   });
-  const setSelectedValue = DrawerRoot.useStableCallback((nextValue, eventDetails) => {
+  const setSelectedValue = useValueChanged.useStableCallback((nextValue, eventDetails) => {
     // Cast to `any` due to conditional value type (single vs. multiple).
     // The runtime implementation already ensures the correct value shape.
     onSelectedValueChange?.(nextValue, eventDetails);
@@ -4723,13 +4424,13 @@ function AriaCombobox(props) {
     setSelectedValueUnwrapped(nextValue);
     const shouldFillInput = selectionMode === 'none' && popupRef.current && fillInputOnItemPress || single && !store.state.inputInsidePopup;
     if (shouldFillInput) {
-      setInputValue(stringifyAsLabel(nextValue, itemToStringLabel), DrawerRoot.createChangeEventDetails(eventDetails.reason, eventDetails.event));
+      setInputValue(stringifyAsLabel(nextValue, itemToStringLabel), useValueChanged.createChangeEventDetails(eventDetails.reason, eventDetails.event));
     }
-    if (single && nextValue != null && eventDetails.reason !== DrawerRoot.inputChange && queryChangedAfterOpen && !inline) {
+    if (single && nextValue != null && eventDetails.reason !== useValueChanged.inputChange && queryChangedAfterOpen && !inline) {
       setCloseQuery(query);
     }
   });
-  const handleSelection = DrawerRoot.useStableCallback((event, passedValue) => {
+  const handleSelection = useValueChanged.useStableCallback((event, passedValue) => {
     let itemValue = passedValue;
     if (itemValue === undefined) {
       if (activeIndex === null) {
@@ -4740,7 +4441,7 @@ function AriaCombobox(props) {
     const targetEl = DrawerRoot.getTarget(event);
     const overrideEvent = selectionEventRef.current ?? event;
     selectionEventRef.current = null;
-    const eventDetails = DrawerRoot.createChangeEventDetails(DrawerRoot.itemPress, overrideEvent);
+    const eventDetails = useValueChanged.createChangeEventDetails(useValueChanged.itemPress, overrideEvent);
 
     // Let the link handle the click.
     const href = targetEl?.closest('a')?.getAttribute('href');
@@ -4760,7 +4461,7 @@ function AriaCombobox(props) {
         return;
       }
       if (store.state.inputInsidePopup) {
-        setInputValue('', DrawerRoot.createChangeEventDetails(DrawerRoot.inputClear, eventDetails.event));
+        setInputValue('', useValueChanged.createChangeEventDetails(useValueChanged.inputClear, eventDetails.event));
       } else {
         setOpen(false, eventDetails);
       }
@@ -4769,7 +4470,7 @@ function AriaCombobox(props) {
       setOpen(false, eventDetails);
     }
   });
-  const requestSubmit = DrawerRoot.useStableCallback(() => {
+  const requestSubmit = useValueChanged.useStableCallback(() => {
     if (!store.state.submitOnItemClick) {
       return;
     }
@@ -4778,7 +4479,7 @@ function AriaCombobox(props) {
       form.requestSubmit();
     }
   });
-  const handleUnmount = DrawerRoot.useStableCallback(() => {
+  const handleUnmount = useValueChanged.useStableCallback(() => {
     setMounted(false);
     onOpenChangeComplete?.(false);
     setQueryChangedAfterOpen(false);
@@ -4798,7 +4499,7 @@ function AriaCombobox(props) {
     // If the user typed a filter and didn't select in multiple mode, clear the input
     // after close completes to avoid mid-exit flicker and start fresh on next open.
     if (multiple && inputRef.current && inputRef.current.value !== '' && !hadInputClearRef.current) {
-      setInputValue('', DrawerRoot.createChangeEventDetails(DrawerRoot.inputClear));
+      setInputValue('', useValueChanged.createChangeEventDetails(useValueChanged.inputClear));
     }
 
     // Single selection mode:
@@ -4807,14 +4508,14 @@ function AriaCombobox(props) {
     if (single) {
       if (store.state.inputInsidePopup) {
         if (inputRef.current && inputRef.current.value !== '') {
-          setInputValue('', DrawerRoot.createChangeEventDetails(DrawerRoot.inputClear));
+          setInputValue('', useValueChanged.createChangeEventDetails(useValueChanged.inputClear));
         }
       } else {
         const stringVal = stringifyAsLabel(selectedValue, itemToStringLabel);
         if (inputRef.current && inputRef.current.value !== stringVal) {
           // If no selection was made, treat this as clearing the typed filter.
-          const reason = stringVal === '' ? DrawerRoot.inputClear : DrawerRoot.none;
-          setInputValue(stringVal, DrawerRoot.createChangeEventDetails(reason));
+          const reason = stringVal === '' ? useValueChanged.inputClear : useValueChanged.none;
+          setInputValue(stringVal, useValueChanged.createChangeEventDetails(reason));
         }
       }
     }
@@ -4832,7 +4533,7 @@ function AriaCombobox(props) {
     }
     return popupRef;
   }, [inline, positionerElement]);
-  DrawerRoot.useOpenChangeComplete({
+  useValueChanged.useOpenChangeComplete({
     enabled: !props.actionsRef,
     open,
     ref: resolvedPopupRef,
@@ -4845,7 +4546,7 @@ function AriaCombobox(props) {
   React__namespace.useImperativeHandle(props.actionsRef, () => ({
     unmount: handleUnmount
   }), [handleUnmount]);
-  DrawerRoot.useIsoLayoutEffect(function syncSelectedIndex() {
+  useValueChanged.useIsoLayoutEffect(function syncSelectedIndex() {
     if (open || selectionMode === 'none') {
       return;
     }
@@ -4864,13 +4565,13 @@ function AriaCombobox(props) {
       });
     }
   }, [open, selectedValue, items, selectionMode, flatItems, multiple, isItemEqualToValue, setIndices]);
-  DrawerRoot.useIsoLayoutEffect(() => {
+  useValueChanged.useIsoLayoutEffect(() => {
     if (items) {
       valuesRef.current = flatFilteredItems;
       listRef.current.length = flatFilteredItems.length;
     }
   }, [items, flatFilteredItems]);
-  DrawerRoot.useIsoLayoutEffect(() => {
+  useValueChanged.useIsoLayoutEffect(() => {
     const pendingHighlight = pendingQueryHighlightRef.current;
     if (pendingHighlight) {
       if (pendingHighlight.hasQuery) {
@@ -4895,7 +4596,7 @@ function AriaCombobox(props) {
       }
       if (lastHighlightRef.current !== INITIAL_LAST_HIGHLIGHT) {
         lastHighlightRef.current = INITIAL_LAST_HIGHLIGHT;
-        store.state.onItemHighlighted(undefined, DrawerRoot.createGenericEventDetails(DrawerRoot.none, undefined, {
+        store.state.onItemHighlighted(undefined, useValueChanged.createGenericEventDetails(useValueChanged.none, undefined, {
           index: -1
         }));
       }
@@ -4904,7 +4605,7 @@ function AriaCombobox(props) {
     if (storeActiveIndex >= candidateItems.length) {
       if (lastHighlightRef.current !== INITIAL_LAST_HIGHLIGHT) {
         lastHighlightRef.current = INITIAL_LAST_HIGHLIGHT;
-        store.state.onItemHighlighted(undefined, DrawerRoot.createGenericEventDetails(DrawerRoot.none, undefined, {
+        store.state.onItemHighlighted(undefined, useValueChanged.createGenericEventDetails(useValueChanged.none, undefined, {
           index: -1
         }));
       }
@@ -4919,12 +4620,12 @@ function AriaCombobox(props) {
         value: itemValue,
         index: storeActiveIndex
       };
-      store.state.onItemHighlighted(itemValue, DrawerRoot.createGenericEventDetails(DrawerRoot.none, undefined, {
+      store.state.onItemHighlighted(itemValue, useValueChanged.createGenericEventDetails(useValueChanged.none, undefined, {
         index: storeActiveIndex
       }));
     }
   }, [activeIndex, autoHighlightMode, hasFilteredItemsProp, hasItems, flatFilteredItems, inline, open, store]);
-  DrawerRoot.useIsoLayoutEffect(() => {
+  useValueChanged.useIsoLayoutEffect(() => {
     if (selectionMode === 'none') {
       setFilled(String(inputValue) !== '');
       return;
@@ -4941,13 +4642,13 @@ function AriaCombobox(props) {
       });
     }
   }, [hasItems, autoHighlightMode, flatFilteredItems.length, setIndices]);
-  DrawerRoot.useValueChanged(query, () => {
+  useValueChanged.useValueChanged(query, () => {
     if (!open || query === '' || query === String(initialDefaultInputValue)) {
       return;
     }
     setQueryChangedAfterOpen(true);
   });
-  DrawerRoot.useValueChanged(selectedValue, () => {
+  useValueChanged.useValueChanged(selectedValue, () => {
     if (selectionMode === 'none') {
       return;
     }
@@ -4961,11 +4662,11 @@ function AriaCombobox(props) {
     if (single && !hasInputValue && !inputInsidePopup) {
       const nextInputValue = stringifyAsLabel(selectedValue, itemToStringLabel);
       if (inputValue !== nextInputValue) {
-        setInputValue(nextInputValue, DrawerRoot.createChangeEventDetails(DrawerRoot.none));
+        setInputValue(nextInputValue, useValueChanged.createChangeEventDetails(useValueChanged.none));
       }
     }
   });
-  DrawerRoot.useValueChanged(inputValue, () => {
+  useValueChanged.useValueChanged(inputValue, () => {
     if (selectionMode !== 'none') {
       return;
     }
@@ -4977,13 +4678,13 @@ function AriaCombobox(props) {
       validation.commit(inputValue, true);
     }
   });
-  DrawerRoot.useValueChanged(items, () => {
+  useValueChanged.useValueChanged(items, () => {
     if (!single || hasInputValue || inputInsidePopup || queryChangedAfterOpen) {
       return;
     }
     const nextInputValue = stringifyAsLabel(selectedValue, itemToStringLabel);
     if (inputValue !== nextInputValue) {
-      setInputValue(nextInputValue, DrawerRoot.createChangeEventDetails(DrawerRoot.none));
+      setInputValue(nextInputValue, useValueChanged.createChangeEventDetails(useValueChanged.none));
     }
   });
   const floatingRootContext = MenuSubmenuTrigger.useFloatingRootContext({
@@ -5033,7 +4734,7 @@ function AriaCombobox(props) {
     // Apply a small delay for touch to let iOS viewport centering settle.
     // This avoids top-bottom flip flickers if the preferred position is "top" when first tapping.
     touchOpenDelay: inputInsidePopup ? 0 : 50,
-    reason: DrawerRoot.inputPress
+    reason: useValueChanged.inputPress
   });
   const dismiss = DrawerRoot.useDismiss(floatingRootContext, {
     enabled: !readOnly && !disabled && !inline,
@@ -5109,7 +4810,7 @@ function AriaCombobox(props) {
       requestSubmit
     });
   });
-  DrawerRoot.useIsoLayoutEffect(() => {
+  useValueChanged.useIsoLayoutEffect(() => {
     store.update({
       id,
       selectedValue,
@@ -5188,7 +4889,7 @@ function AriaCombobox(props) {
             return;
           }
           const nextValue = event.target.value;
-          const details = DrawerRoot.createChangeEventDetails(DrawerRoot.none, event.nativeEvent);
+          const details = useValueChanged.createChangeEventDetails(useValueChanged.none, event.nativeEvent);
           function handleChange() {
             // Browser autofill only writes a single scalar value.
             if (multiple) {
@@ -5233,7 +4934,7 @@ function AriaCombobox(props) {
       readOnly: readOnly,
       value: serializedValue,
       ref: hiddenInputRef,
-      style: hiddenInputName ? DrawerRoot.visuallyHiddenInput : DrawerRoot.visuallyHidden,
+      style: hiddenInputName ? useValueChanged.visuallyHiddenInput : useValueChanged.visuallyHidden,
       tabIndex: -1,
       "aria-hidden": true
     }), hiddenInputs]
@@ -5255,7 +4956,7 @@ function AriaCombobox(props) {
 
 const triggerStateAttributesMapping = {
   ...DrawerRoot.pressableTriggerOpenStateMapping,
-  ...fieldValidityMapping,
+  ...NumberFieldInput.fieldValidityMapping,
   popupSide: side => side ? {
     'data-popup-side': side
   } : null,
@@ -5293,10 +4994,10 @@ const ComboboxTrigger = /*#__PURE__*/React__namespace.forwardRef(function Combob
     setFocused,
     validationMode,
     validation
-  } = useFieldRootContext();
+  } = NumberFieldInput.useFieldRootContext();
   const {
     labelId: fieldLabelId
-  } = useLabelableContext();
+  } = NumberFieldInput.useLabelableContext();
   const store = useComboboxRootContext();
   const {
     filteredItems
@@ -5321,11 +5022,11 @@ const ComboboxTrigger = /*#__PURE__*/React__namespace.forwardRef(function Combob
   const hasSelectedValue = DrawerRoot.useStore(store, selectors.hasSelectedValue);
   const floatingRootContext = useComboboxFloatingContext();
   const inputValue = useComboboxInputValueContext();
-  const focusTimeout = DrawerRoot.useTimeout();
+  const focusTimeout = useValueChanged.useTimeout();
   const disabled = fieldDisabled || comboboxDisabled || disabledProp;
   const listEmpty = filteredItems.length === 0;
   const popupSide = mounted && positionerElement ? popupSideValue : null;
-  useLabelableId({
+  NumberFieldInput.useLabelableId({
     id: inputInsidePopup ? idProp : undefined
   });
   const id = inputInsidePopup ? idProp ?? rootId : idProp;
@@ -5356,7 +5057,7 @@ const ComboboxTrigger = /*#__PURE__*/React__namespace.forwardRef(function Combob
     onMatch(index) {
       const nextSelectedValue = store.state.valuesRef.current[index];
       if (nextSelectedValue !== undefined) {
-        store.state.setSelectedValue(nextSelectedValue, DrawerRoot.createChangeEventDetails('none'));
+        store.state.setSelectedValue(nextSelectedValue, useValueChanged.createChangeEventDetails('none'));
       }
     }
   });
@@ -5369,7 +5070,7 @@ const ComboboxTrigger = /*#__PURE__*/React__namespace.forwardRef(function Combob
   const {
     buttonRef,
     getButtonProps
-  } = MenuSubmenuTrigger.useButton({
+  } = useBaseUiId.useButton({
     native: nativeButton,
     disabled
   });
@@ -5381,7 +5082,7 @@ const ComboboxTrigger = /*#__PURE__*/React__namespace.forwardRef(function Combob
     listEmpty,
     placeholder: !hasSelectedValue
   };
-  const setTriggerElement = DrawerRoot.useStableCallback(element => {
+  const setTriggerElement = useValueChanged.useStableCallback(element => {
     store.set('triggerElement', element);
   });
   const element = useRenderElement.useRenderElement('button', componentProps, {
@@ -5436,7 +5137,7 @@ const ComboboxTrigger = /*#__PURE__*/React__namespace.forwardRef(function Combob
         if (open) {
           return;
         }
-        const doc = DrawerRoot.ownerDocument(event.currentTarget);
+        const doc = useValueChanged.ownerDocument(event.currentTarget);
         function handleMouseUp(mouseEvent) {
           if (!triggerElement) {
             return;
@@ -5453,7 +5154,7 @@ const ComboboxTrigger = /*#__PURE__*/React__namespace.forwardRef(function Combob
           if (withinHorizontal && withinVertical) {
             return;
           }
-          store.state.setOpen(false, DrawerRoot.createChangeEventDetails('cancel-open', mouseEvent));
+          store.state.setOpen(false, useValueChanged.createChangeEventDetails('cancel-open', mouseEvent));
         }
         if (inputInsidePopup) {
           doc.addEventListener('mouseup', handleMouseUp, {
@@ -5466,8 +5167,8 @@ const ComboboxTrigger = /*#__PURE__*/React__namespace.forwardRef(function Combob
           return;
         }
         if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
-          DrawerRoot.stopEvent(event);
-          store.state.setOpen(true, DrawerRoot.createChangeEventDetails(DrawerRoot.listNavigation, event.nativeEvent));
+          useValueChanged.stopEvent(event);
+          store.state.setOpen(true, useValueChanged.createChangeEventDetails(useValueChanged.listNavigation, event.nativeEvent));
           store.state.inputRef.current?.focus();
         }
       }
@@ -5502,12 +5203,12 @@ const ComboboxInternalDismissButton = /*#__PURE__*/React__namespace.forwardRef(f
   const {
     buttonRef,
     getButtonProps
-  } = MenuSubmenuTrigger.useButton({
+  } = useBaseUiId.useButton({
     native: false
   });
   const mergedRef = useRenderElement.useMergedRefs(forwardedRef, buttonRef);
-  const handleDismiss = DrawerRoot.useStableCallback(event => {
-    store.state.setOpen(false, DrawerRoot.createChangeEventDetails(DrawerRoot.closePress, event.nativeEvent, event.currentTarget));
+  const handleDismiss = useValueChanged.useStableCallback(event => {
+    store.state.setOpen(false, useValueChanged.createChangeEventDetails(useValueChanged.closePress, event.nativeEvent, event.currentTarget));
   });
   const dismissProps = getButtonProps({
     onClick: handleDismiss
@@ -5517,7 +5218,7 @@ const ComboboxInternalDismissButton = /*#__PURE__*/React__namespace.forwardRef(f
     ...dismissProps,
     "aria-label": "Dismiss",
     tabIndex: undefined,
-    style: DrawerRoot.visuallyHiddenInput
+    style: useValueChanged.visuallyHiddenInput
   });
 });
 if (process.env.NODE_ENV !== "production") ComboboxInternalDismissButton.displayName = "ComboboxInternalDismissButton";
@@ -5537,10 +5238,10 @@ const ComboboxInput = /*#__PURE__*/React__namespace.forwardRef(function Combobox
     setFocused,
     validationMode,
     validation
-  } = useFieldRootContext();
+  } = NumberFieldInput.useFieldRootContext();
   const {
     labelId: fieldLabelId
-  } = useLabelableContext();
+  } = NumberFieldInput.useLabelableContext();
   const comboboxChipsContext = useComboboxChipsContext();
   const positioning = useComboboxPositionerContext(true);
   const hasPositionerParent = Boolean(positioning);
@@ -5574,17 +5275,17 @@ const ComboboxInput = /*#__PURE__*/React__namespace.forwardRef(function Combobox
   const listEmpty = filteredItems.length === 0;
   const isInsidePopup = hasPositionerParent || inline;
   const focusManagerModal = !isInsidePopup || modal;
-  const id = MenuSubmenuTrigger.useBaseUiId(idProp ?? (!isInsidePopup ? rootId : undefined));
+  const id = useBaseUiId.useBaseUiId(idProp ?? (!isInsidePopup ? rootId : undefined));
   const ariaLabelledBy = resolveAriaLabelledBy(fieldLabelId, undefined);
-  const fieldStateForInput = hasPositionerParent ? DEFAULT_FIELD_STATE_ATTRIBUTES : fieldState;
+  const fieldStateForInput = hasPositionerParent ? NumberFieldInput.DEFAULT_FIELD_STATE_ATTRIBUTES : fieldState;
   const [composingValue, setComposingValue] = React__namespace.useState(null);
   const isComposingRef = React__namespace.useRef(false);
   const lastActiveIndexRef = React__namespace.useRef(null);
   const shouldRestoreActiveIndexRef = React__namespace.useRef(false);
-  const setInputElement = DrawerRoot.useStableCallback(element => {
+  const setInputElement = useValueChanged.useStableCallback(element => {
     const nextIsInsidePopup = hasPositionerParent || store.state.inline;
     if (nextIsInsidePopup && !store.state.hasInputValue) {
-      store.state.setInputValue('', DrawerRoot.createChangeEventDetails(DrawerRoot.none));
+      store.state.setInputValue('', useValueChanged.createChangeEventDetails(useValueChanged.none));
     }
     store.update({
       inputElement: element,
@@ -5702,7 +5403,7 @@ const ComboboxInput = /*#__PURE__*/React__namespace.forwardRef(function Combobox
         }
       },
       onCompositionStart(event) {
-        if (DrawerRoot.isAndroid) {
+        if (useValueChanged.isAndroid) {
           return;
         }
         isComposingRef.current = true;
@@ -5712,7 +5413,7 @@ const ComboboxInput = /*#__PURE__*/React__namespace.forwardRef(function Combobox
         isComposingRef.current = false;
         const next = event.currentTarget.value;
         setComposingValue(null);
-        store.state.setInputValue(next, DrawerRoot.createChangeEventDetails(DrawerRoot.inputChange, event.nativeEvent));
+        store.state.setInputValue(next, useValueChanged.createChangeEventDetails(useValueChanged.inputChange, event.nativeEvent));
       },
       onChange(event) {
         // Autofill may not provide `inputType` (Chrome) or may report
@@ -5731,13 +5432,13 @@ const ComboboxInput = /*#__PURE__*/React__namespace.forwardRef(function Combobox
           const nextVal = event.currentTarget.value;
           setComposingValue(nextVal);
           if (nextVal === '' && !store.state.openOnInputClick && !store.state.inputInsidePopup) {
-            store.state.setOpen(false, DrawerRoot.createChangeEventDetails(DrawerRoot.inputClear, event.nativeEvent));
+            store.state.setOpen(false, useValueChanged.createChangeEventDetails(useValueChanged.inputClear, event.nativeEvent));
           }
           const trimmed = nextVal.trim();
           const shouldMaintainHighlight = autoHighlightEnabled && trimmed !== '';
           if (!readOnly && !disabled && trimmed) {
             if (shouldOpenOnInput) {
-              store.state.setOpen(true, DrawerRoot.createChangeEventDetails(DrawerRoot.inputChange, event.nativeEvent));
+              store.state.setOpen(true, useValueChanged.createChangeEventDetails(useValueChanged.inputChange, event.nativeEvent));
               if (!autoHighlightEnabled) {
                 store.state.setIndices({
                   activeIndex: null,
@@ -5756,9 +5457,9 @@ const ComboboxInput = /*#__PURE__*/React__namespace.forwardRef(function Combobox
           }
           return;
         }
-        store.state.setInputValue(event.currentTarget.value, DrawerRoot.createChangeEventDetails(DrawerRoot.inputChange, event.nativeEvent));
+        store.state.setInputValue(event.currentTarget.value, useValueChanged.createChangeEventDetails(useValueChanged.inputChange, event.nativeEvent));
         const empty = event.currentTarget.value === '';
-        const clearDetails = DrawerRoot.createChangeEventDetails(DrawerRoot.inputClear, event.nativeEvent);
+        const clearDetails = useValueChanged.createChangeEventDetails(useValueChanged.inputClear, event.nativeEvent);
         if (empty && !store.state.inputInsidePopup) {
           if (selectionMode === 'single') {
             store.state.setSelectedValue(null, clearDetails);
@@ -5770,7 +5471,7 @@ const ComboboxInput = /*#__PURE__*/React__namespace.forwardRef(function Combobox
         const trimmed = event.currentTarget.value.trim();
         if (!readOnly && !disabled && trimmed) {
           if (shouldOpenOnInput) {
-            store.state.setOpen(true, DrawerRoot.createChangeEventDetails(DrawerRoot.inputChange, event.nativeEvent));
+            store.state.setOpen(true, useValueChanged.createChangeEventDetails(useValueChanged.inputChange, event.nativeEvent));
             // When autoHighlight is enabled, keep the highlight (will be set to 0 in root).
             if (!autoHighlightEnabled) {
               store.state.setIndices({
@@ -5805,22 +5506,22 @@ const ComboboxInput = /*#__PURE__*/React__namespace.forwardRef(function Combobox
         const scrollAmount = input.scrollWidth - input.clientWidth;
         const isRTL = direction === 'rtl';
         if (event.key === 'Home') {
-          DrawerRoot.stopEvent(event);
-          const cursor = DrawerRoot.isFirefox && isRTL ? input.value.length : 0;
+          useValueChanged.stopEvent(event);
+          const cursor = useValueChanged.isFirefox && isRTL ? input.value.length : 0;
           input.setSelectionRange(cursor, cursor);
           input.scrollLeft = 0;
           return;
         }
         if (event.key === 'End') {
-          DrawerRoot.stopEvent(event);
-          const cursor = DrawerRoot.isFirefox && isRTL ? 0 : input.value.length;
+          useValueChanged.stopEvent(event);
+          const cursor = useValueChanged.isFirefox && isRTL ? 0 : input.value.length;
           input.setSelectionRange(cursor, cursor);
           input.scrollLeft = isRTL ? -scrollAmount : scrollAmount;
           return;
         }
         if (!mounted && event.key === 'Escape') {
           const isClear = selectionMode === 'multiple' && Array.isArray(selectedValue) ? selectedValue.length === 0 : selectedValue === null;
-          const details = DrawerRoot.createChangeEventDetails(DrawerRoot.escapeKey, event.nativeEvent);
+          const details = useValueChanged.createChangeEventDetails(useValueChanged.escapeKey, event.nativeEvent);
           const value = selectionMode === 'multiple' ? [] : null;
           store.state.setInputValue('', details);
           store.state.setSelectedValue(value, details);
@@ -5839,7 +5540,7 @@ const ComboboxInput = /*#__PURE__*/React__namespace.forwardRef(function Combobox
             selectedIndex: null,
             type: store.state.keyboardActiveRef.current ? 'keyboard' : 'pointer'
           });
-          store.state.setSelectedValue(newValue, DrawerRoot.createChangeEventDetails(DrawerRoot.none, event.nativeEvent));
+          store.state.setSelectedValue(newValue, useValueChanged.createChangeEventDetails(useValueChanged.none, event.nativeEvent));
           return;
         }
         const hadHighlightedChip = comboboxChipsContext?.highlightedChipIndex !== undefined;
@@ -5864,10 +5565,10 @@ const ComboboxInput = /*#__PURE__*/React__namespace.forwardRef(function Combobox
             }
 
             // Allow form submission when no item is highlighted.
-            store.state.setOpen(false, DrawerRoot.createChangeEventDetails(DrawerRoot.none, nativeEvent));
+            store.state.setOpen(false, useValueChanged.createChangeEventDetails(useValueChanged.none, nativeEvent));
             return;
           }
-          DrawerRoot.stopEvent(event);
+          useValueChanged.stopEvent(event);
           const listItem = store.state.listRef.current[activeIndex];
           if (listItem) {
             store.state.selectionEventRef.current = nativeEvent;
@@ -5906,7 +5607,7 @@ const ComboboxInputGroup = /*#__PURE__*/React__namespace.forwardRef(function Com
   const {
     state: fieldState,
     disabled: fieldDisabled
-  } = useFieldRootContext();
+  } = NumberFieldInput.useFieldRootContext();
   const store = useComboboxRootContext();
   const {
     filteredItems
@@ -5932,7 +5633,7 @@ const ComboboxInputGroup = /*#__PURE__*/React__namespace.forwardRef(function Com
     listEmpty,
     placeholder
   };
-  const setInputGroupElement = DrawerRoot.useStableCallback(element => {
+  const setInputGroupElement = useValueChanged.useStableCallback(element => {
     store.set('inputGroupElement', element);
   });
   return useRenderElement.useRenderElement('div', componentProps, {
@@ -5967,8 +5668,8 @@ const ComboboxIcon = /*#__PURE__*/React__namespace.forwardRef(function ComboboxI
 });
 if (process.env.NODE_ENV !== "production") ComboboxIcon.displayName = "ComboboxIcon";
 
-const stateAttributesMapping$4 = {
-  ...DrawerRoot.transitionStatusMapping,
+const stateAttributesMapping$2 = {
+  ...useValueChanged.transitionStatusMapping,
   ...DrawerRoot.triggerOpenStateMapping
 };
 
@@ -5987,7 +5688,7 @@ const ComboboxClear = /*#__PURE__*/React__namespace.forwardRef(function Combobox
   } = componentProps;
   const {
     disabled: fieldDisabled
-  } = useFieldRootContext();
+  } = NumberFieldInput.useFieldRootContext();
   const store = useComboboxRootContext();
   const selectionMode = DrawerRoot.useStore(store, selectors.selectionMode);
   const comboboxDisabled = DrawerRoot.useStore(store, selectors.disabled);
@@ -6008,7 +5709,7 @@ const ComboboxClear = /*#__PURE__*/React__namespace.forwardRef(function Combobox
   const {
     buttonRef,
     getButtonProps
-  } = MenuSubmenuTrigger.useButton({
+  } = useBaseUiId.useButton({
     native: nativeButton,
     disabled
   });
@@ -6016,13 +5717,13 @@ const ComboboxClear = /*#__PURE__*/React__namespace.forwardRef(function Combobox
     mounted,
     transitionStatus,
     setMounted
-  } = DrawerRoot.useTransitionStatus(visible);
+  } = useValueChanged.useTransitionStatus(visible);
   const state = {
     disabled,
     open,
     transitionStatus
   };
-  DrawerRoot.useOpenChangeComplete({
+  useValueChanged.useOpenChangeComplete({
     open: visible,
     ref: store.state.clearRef,
     onComplete() {
@@ -6046,9 +5747,9 @@ const ComboboxClear = /*#__PURE__*/React__namespace.forwardRef(function Combobox
           return;
         }
         const keyboardActiveRef = store.state.keyboardActiveRef;
-        store.state.setInputValue('', DrawerRoot.createChangeEventDetails(DrawerRoot.clearPress, event.nativeEvent));
+        store.state.setInputValue('', useValueChanged.createChangeEventDetails(useValueChanged.clearPress, event.nativeEvent));
         if (selectionMode !== 'none') {
-          store.state.setSelectedValue(Array.isArray(selectedValue) ? [] : null, DrawerRoot.createChangeEventDetails(DrawerRoot.clearPress, event.nativeEvent));
+          store.state.setSelectedValue(Array.isArray(selectedValue) ? [] : null, useValueChanged.createChangeEventDetails(useValueChanged.clearPress, event.nativeEvent));
           store.state.setIndices({
             activeIndex: null,
             selectedIndex: null,
@@ -6063,7 +5764,7 @@ const ComboboxClear = /*#__PURE__*/React__namespace.forwardRef(function Combobox
         store.state.inputRef.current?.focus();
       }
     }, elementProps, getButtonProps],
-    stateAttributesMapping: stateAttributesMapping$4
+    stateAttributesMapping: stateAttributesMapping$2
   });
   const shouldRender = keepMounted || mounted;
   if (!shouldRender) {
@@ -6134,10 +5835,10 @@ const ComboboxList = /*#__PURE__*/React__namespace.forwardRef(function ComboboxL
   const virtualized = DrawerRoot.useStore(store, selectors.virtualized);
   const multiple = selectionMode === 'multiple';
   const empty = filteredItems.length === 0;
-  const setPositionerElement = DrawerRoot.useStableCallback(element => {
+  const setPositionerElement = useValueChanged.useStableCallback(element => {
     store.set('positionerElement', element);
   });
-  const setListElement = DrawerRoot.useStableCallback(element => {
+  const setListElement = useValueChanged.useStableCallback(element => {
     store.set('listElement', element);
   });
 
@@ -6176,7 +5877,7 @@ const ComboboxList = /*#__PURE__*/React__namespace.forwardRef(function ComboboxL
             // Allow form submission when no item is highlighted.
             return;
           }
-          DrawerRoot.stopEvent(event);
+          useValueChanged.stopEvent(event);
           const nativeEvent = event.nativeEvent;
           const listItem = store.state.listRef.current[activeIndex];
           if (listItem) {
@@ -6259,9 +5960,9 @@ const ComboboxPortal = /*#__PURE__*/React__namespace.forwardRef(function Combobo
 });
 if (process.env.NODE_ENV !== "production") ComboboxPortal.displayName = "ComboboxPortal";
 
-const stateAttributesMapping$3 = {
+const stateAttributesMapping$1 = {
   ...DrawerRoot.popupStateMapping,
-  ...DrawerRoot.transitionStatusMapping
+  ...useValueChanged.transitionStatusMapping
 };
 
 /**
@@ -6285,7 +5986,7 @@ const ComboboxBackdrop = /*#__PURE__*/React__namespace.forwardRef(function Combo
   return useRenderElement.useRenderElement('div', componentProps, {
     state,
     ref: forwardedRef,
-    stateAttributesMapping: stateAttributesMapping$3,
+    stateAttributesMapping: stateAttributesMapping$1,
     props: [{
       role: 'presentation',
       hidden: !mounted,
@@ -6372,7 +6073,7 @@ const ComboboxPositioner = /*#__PURE__*/React__namespace.forwardRef(function Com
     anchorHidden: positioning.anchorHidden,
     empty
   };
-  DrawerRoot.useIsoLayoutEffect(() => {
+  useValueChanged.useIsoLayoutEffect(() => {
     store.set('popupSide', positioning.side);
   }, [store, positioning.side]);
   const contextValue = React__namespace.useMemo(() => ({
@@ -6384,7 +6085,7 @@ const ComboboxPositioner = /*#__PURE__*/React__namespace.forwardRef(function Com
     anchorHidden: positioning.anchorHidden,
     isPositioned: positioning.isPositioned
   }), [positioning.side, positioning.align, positioning.arrowRef, positioning.arrowUncentered, positioning.arrowStyles, positioning.anchorHidden, positioning.isPositioned]);
-  const setPositionerElement = DrawerRoot.useStableCallback(element => {
+  const setPositionerElement = useValueChanged.useStableCallback(element => {
     store.set('positionerElement', element);
   });
   const element = useRenderElement.useRenderElement('div', componentProps, {
@@ -6403,9 +6104,9 @@ const ComboboxPositioner = /*#__PURE__*/React__namespace.forwardRef(function Com
 });
 if (process.env.NODE_ENV !== "production") ComboboxPositioner.displayName = "ComboboxPositioner";
 
-const stateAttributesMapping$2 = {
+const stateAttributesMapping = {
   ...DrawerRoot.popupStateMapping,
-  ...DrawerRoot.transitionStatusMapping
+  ...useValueChanged.transitionStatusMapping
 };
 
 /**
@@ -6434,7 +6135,7 @@ const ComboboxPopup = /*#__PURE__*/React__namespace.forwardRef(function Combobox
   const inputElement = DrawerRoot.useStore(store, selectors.inputElement);
   const modal = DrawerRoot.useStore(store, selectors.modal);
   const empty = filteredItems.length === 0;
-  DrawerRoot.useOpenChangeComplete({
+  useValueChanged.useOpenChangeComplete({
     open,
     ref: store.state.popupRef,
     onComplete() {
@@ -6464,7 +6165,7 @@ const ComboboxPopup = /*#__PURE__*/React__namespace.forwardRef(function Combobox
         }
       }
     }, MenuSubmenuTrigger.getDisabledMountTransitionStyles(transitionStatus), elementProps],
-    stateAttributesMapping: stateAttributesMapping$2
+    stateAttributesMapping
   });
 
   // Default initial focus logic:
@@ -6592,8 +6293,8 @@ const ComboboxGroupLabel = /*#__PURE__*/React__namespace.forwardRef(function Com
   const {
     setLabelId
   } = useComboboxGroupContext();
-  const id = MenuSubmenuTrigger.useBaseUiId(idProp);
-  DrawerRoot.useIsoLayoutEffect(() => {
+  const id = useBaseUiId.useBaseUiId(idProp);
+  useValueChanged.useIsoLayoutEffect(() => {
     setLabelId(id);
     return () => {
       setLabelId(undefined);
@@ -6663,7 +6364,7 @@ const ComboboxItem = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__name
   const itemRef = React__namespace.useRef(null);
   const id = rootId != null && hasRegistered ? `${rootId}-${index}` : undefined;
   const selected = matchesSelectedValue && selectable;
-  DrawerRoot.useIsoLayoutEffect(() => {
+  useValueChanged.useIsoLayoutEffect(() => {
     const shouldRun = hasRegistered && (virtualized || indexProp != null);
     if (!shouldRun) {
       return undefined;
@@ -6674,7 +6375,7 @@ const ComboboxItem = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__name
       delete list[index];
     };
   }, [hasRegistered, virtualized, index, indexProp, store]);
-  DrawerRoot.useIsoLayoutEffect(() => {
+  useValueChanged.useIsoLayoutEffect(() => {
     if (!hasRegistered || hasItems) {
       return undefined;
     }
@@ -6691,7 +6392,7 @@ const ComboboxItem = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__name
       delete visibleMap[index];
     };
   }, [hasRegistered, hasItems, index, itemValue, store, selectionMode]);
-  DrawerRoot.useIsoLayoutEffect(() => {
+  useValueChanged.useIsoLayoutEffect(() => {
     if (!open) {
       didPointerDownRef.current = false;
       return;
@@ -6719,7 +6420,7 @@ const ComboboxItem = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__name
   const {
     getButtonProps,
     buttonRef
-  } = MenuSubmenuTrigger.useButton({
+  } = useBaseUiId.useButton({
     disabled,
     focusableWhenDisabled: true,
     native: nativeButton,
@@ -6856,8 +6557,8 @@ function ComboboxRoot(props) {
 }
 
 function useRegisteredLabelId(idProp, setLabelId) {
-  const id = MenuSubmenuTrigger.useBaseUiId(idProp);
-  DrawerRoot.useIsoLayoutEffect(() => {
+  const id = useBaseUiId.useBaseUiId(idProp);
+  useValueChanged.useIsoLayoutEffect(() => {
     setLabelId(id);
     return () => {
       setLabelId(undefined);
@@ -6877,8 +6578,8 @@ function useLabel(params = {}) {
   const {
     controlId: contextControlId,
     setLabelId: setContextLabelId
-  } = useLabelableContext();
-  const syncLabelId = DrawerRoot.useStableCallback(nextLabelId => {
+  } = NumberFieldInput.useLabelableContext();
+  const syncLabelId = useValueChanged.useStableCallback(nextLabelId => {
     setContextLabelId(nextLabelId);
     setLabelIdProp?.(nextLabelId);
   });
@@ -6892,8 +6593,8 @@ function useLabel(params = {}) {
     if (!resolvedControlId) {
       return;
     }
-    const controlElement = DrawerRoot.ownerDocument(event.currentTarget).getElementById(resolvedControlId);
-    if (index_esm.isHTMLElement(controlElement)) {
+    const controlElement = useValueChanged.ownerDocument(event.currentTarget).getElementById(resolvedControlId);
+    if (floatingUi_utils_dom.isHTMLElement(controlElement)) {
       focusElementWithVisible(controlElement);
     }
   }
@@ -6948,7 +6649,7 @@ const ComboboxLabel = /*#__PURE__*/React__namespace.forwardRef(function Combobox
   // Keep label id derived from the root and ignore runtime `id` overrides from untyped consumers.
   const elementPropsWithoutId = elementProps;
   delete elementPropsWithoutId.id;
-  const fieldRootContext = useFieldRootContext();
+  const fieldRootContext = NumberFieldInput.useFieldRootContext();
   const store = useComboboxRootContext();
   const inputInsidePopup = DrawerRoot.useStore(store, selectors.inputInsidePopup);
   const triggerElement = DrawerRoot.useStore(store, selectors.triggerElement);
@@ -6962,9 +6663,9 @@ const ComboboxLabel = /*#__PURE__*/React__namespace.forwardRef(function Combobox
       if (!inputElement || inputInsidePopup) {
         return;
       }
-      const ownerStackMessage = DrawerRoot.SafeReact.captureOwnerStack?.() || '';
+      const ownerStackMessage = useValueChanged.SafeReact.captureOwnerStack?.() || '';
       const message = '<Combobox.Label> labels <Combobox.Trigger> only. ' + 'When <Combobox.Input> is the form control, use a native <label> or <Field.Label> instead.';
-      MenuSubmenuTrigger.error(`${message}${ownerStackMessage}`);
+      useBaseUiId.error(`${message}${ownerStackMessage}`);
     }, [inputElement, inputInsidePopup]);
   }
   const labelProps = useLabel({
@@ -6978,7 +6679,7 @@ const ComboboxLabel = /*#__PURE__*/React__namespace.forwardRef(function Combobox
     ref: forwardedRef,
     state: fieldRootContext.state,
     props: [labelProps, elementProps],
-    stateAttributesMapping: fieldValidityMapping
+    stateAttributesMapping: NumberFieldInput.fieldValidityMapping
   });
 });
 if (process.env.NODE_ENV !== "production") ComboboxLabel.displayName = "ComboboxLabel";
@@ -7047,7 +6748,7 @@ const Inner = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.f
   const {
     transitionStatus,
     setMounted
-  } = DrawerRoot.useTransitionStatus(selected);
+  } = useValueChanged.useTransitionStatus(selected);
   const state = {
     selected,
     transitionStatus
@@ -7059,9 +6760,9 @@ const Inner = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.f
       'aria-hidden': true,
       children: '✔️'
     }, elementProps],
-    stateAttributesMapping: DrawerRoot.transitionStatusMapping
+    stateAttributesMapping: useValueChanged.transitionStatusMapping
   });
-  DrawerRoot.useOpenChangeComplete({
+  useValueChanged.useOpenChangeComplete({
     open: selected,
     ref: indicatorRef,
     onComplete() {
@@ -7158,19 +6859,19 @@ const ComboboxChip = /*#__PURE__*/React__namespace.forwardRef(function ComboboxC
     } else if (event.key === 'Backspace' || event.key === 'Delete') {
       const computedNextIndex = index >= selectedValue.length - 1 ? selectedValue.length - 2 : index;
       nextIndex = computedNextIndex >= 0 ? computedNextIndex : undefined;
-      DrawerRoot.stopEvent(event);
+      useValueChanged.stopEvent(event);
       store.state.setIndices({
         activeIndex: null,
         selectedIndex: null,
         type: 'keyboard'
       });
-      store.state.setSelectedValue(selectedValue.filter((_, i) => i !== index), DrawerRoot.createChangeEventDetails(DrawerRoot.none, event.nativeEvent));
+      store.state.setSelectedValue(selectedValue.filter((_, i) => i !== index), useValueChanged.createChangeEventDetails(useValueChanged.none, event.nativeEvent));
     } else if (event.key === 'Enter' || event.key === ' ') {
-      DrawerRoot.stopEvent(event);
+      useValueChanged.stopEvent(event);
       nextIndex = undefined;
     } else if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
-      DrawerRoot.stopEvent(event);
-      store.state.setOpen(true, DrawerRoot.createChangeEventDetails(DrawerRoot.listNavigation, event.nativeEvent));
+      useValueChanged.stopEvent(event);
+      store.state.setOpen(true, useValueChanged.createChangeEventDetails(useValueChanged.listNavigation, event.nativeEvent));
       nextIndex = undefined;
     } else if (
     // Check for printable characters (letters, numbers, symbols)
@@ -7249,7 +6950,7 @@ const ComboboxChipRemove = /*#__PURE__*/React__namespace.forwardRef(function Com
   const {
     buttonRef,
     getButtonProps
-  } = MenuSubmenuTrigger.useButton({
+  } = useBaseUiId.useButton({
     native: nativeButton,
     disabled: disabled || readOnly,
     focusableWhenDisabled: true
@@ -7274,7 +6975,7 @@ const ComboboxChipRemove = /*#__PURE__*/React__namespace.forwardRef(function Com
     }
   }
   function removeChip(event) {
-    const eventDetails = DrawerRoot.createChangeEventDetails(DrawerRoot.chipRemovePress, event.nativeEvent);
+    const eventDetails = useValueChanged.createChangeEventDetails(useValueChanged.chipRemovePress, event.nativeEvent);
     const removedItem = selectedValue[index];
     clearActiveIndexForRemovedItem(removedItem);
     store.state.setSelectedValue(selectedValue.filter((_, i) => i !== index), eventDetails);
@@ -7302,7 +7003,7 @@ const ComboboxChipRemove = /*#__PURE__*/React__namespace.forwardRef(function Com
         if (event.key === 'Enter' || event.key === ' ') {
           const eventDetails = removeChip(event);
           if (!eventDetails.isPropagationAllowed) {
-            DrawerRoot.stopEvent(event);
+            useValueChanged.stopEvent(event);
           }
         }
       }
@@ -7344,1482 +7045,6 @@ var index_parts$1 = /*#__PURE__*/Object.freeze({
   useFilteredItems: useFilteredItems
 });
 
-const cache = new Map();
-function getFormatter(locale, options) {
-  const optionsString = JSON.stringify({
-    locale,
-    options
-  });
-  const cachedFormatter = cache.get(optionsString);
-  if (cachedFormatter) {
-    return cachedFormatter;
-  }
-  const formatter = new Intl.NumberFormat(locale, options);
-  cache.set(optionsString, formatter);
-  return formatter;
-}
-function formatNumber(value, locale, options) {
-  if (value == null) {
-    return '';
-  }
-  return getFormatter(locale, options).format(value);
-}
-function formatNumberMaxPrecision(value, locale, options) {
-  return formatNumber(value, locale, {
-    ...options,
-    maximumFractionDigits: 20
-  });
-}
-
-const EMPTY = 0;
-class Interval extends DrawerRoot.Timeout {
-  static create() {
-    return new Interval();
-  }
-
-  /**
-   * Executes `fn` at `delay` interval, clearing any previously scheduled call.
-   */
-  start(delay, fn) {
-    this.clear();
-    this.currentId = setInterval(() => {
-      fn();
-    }, delay);
-  }
-  clear = () => {
-    if (this.currentId !== EMPTY) {
-      clearInterval(this.currentId);
-      this.currentId = EMPTY;
-    }
-  };
-}
-
-/**
- * A `setInterval` with automatic cleanup and guard.
- */
-function useInterval() {
-  const timeout = useRenderElement.useRefWithInit(Interval.create).current;
-  DrawerRoot.useOnMount(timeout.disposeEffect);
-  return timeout;
-}
-
-const NumberFieldRootContext = /*#__PURE__*/React__namespace.createContext(undefined);
-if (process.env.NODE_ENV !== "production") NumberFieldRootContext.displayName = "NumberFieldRootContext";
-function useNumberFieldRootContext() {
-  const context = React__namespace.useContext(NumberFieldRootContext);
-  if (context === undefined) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: NumberFieldRootContext is missing. NumberField parts must be placed within <NumberField.Root>.' : useRenderElement.formatErrorMessage(43));
-  }
-  return context;
-}
-
-const stateAttributesMapping$1 = {
-  inputValue: () => null,
-  value: () => null,
-  ...fieldValidityMapping
-};
-
-const HAN_NUMERALS = ['零', '〇', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
-// Map Han numeral characters to ASCII digits. Includes both forms of zero.
-const HAN_NUMERAL_TO_DIGIT = {
-  零: '0',
-  〇: '0',
-  一: '1',
-  二: '2',
-  三: '3',
-  四: '4',
-  五: '5',
-  六: '6',
-  七: '7',
-  八: '8',
-  九: '9'
-};
-const ARABIC_NUMERALS = ['٠', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩'];
-const PERSIAN_NUMERALS = ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹'];
-const FULLWIDTH_NUMERALS = ['０', '１', '２', '３', '４', '５', '６', '７', '８', '９'];
-const PERCENTAGES = ['%', '٪', '％', '﹪'];
-const PERMILLE = ['‰', '؉'];
-const UNICODE_MINUS_SIGNS = ['−', '－', '‒', '–', '—', '﹣'];
-const UNICODE_PLUS_SIGNS = ['＋', '﹢'];
-
-// Fullwidth punctuation common in CJK inputs
-const FULLWIDTH_DECIMAL = '．'; // U+FF0E
-const FULLWIDTH_GROUP = '，'; // U+FF0C
-
-const ARABIC_RE = new RegExp(`[${ARABIC_NUMERALS.join('')}]`, 'g');
-const PERSIAN_RE = new RegExp(`[${PERSIAN_NUMERALS.join('')}]`, 'g');
-const FULLWIDTH_RE = new RegExp(`[${FULLWIDTH_NUMERALS.join('')}]`, 'g');
-const HAN_RE = new RegExp(`[${HAN_NUMERALS.join('')}]`, 'g');
-const PERCENT_RE = new RegExp(`[${PERCENTAGES.join('')}]`);
-const PERMILLE_RE = new RegExp(`[${PERMILLE.join('')}]`);
-
-// Detection regexes (non-global to avoid lastIndex side effects)
-const ARABIC_DETECT_RE = /[٠١٢٣٤٥٦٧٨٩]/;
-const PERSIAN_DETECT_RE = /[۰۱۲۳۴۵۶۷۸۹]/;
-const HAN_DETECT_RE = /[零〇一二三四五六七八九]/;
-const FULLWIDTH_DETECT_RE = new RegExp(`[${FULLWIDTH_NUMERALS.join('')}]`);
-const BASE_NON_NUMERIC_SYMBOLS = ['.', ',', FULLWIDTH_DECIMAL, FULLWIDTH_GROUP, '٫', '٬'];
-const SPACE_SEPARATOR_RE = /\p{Zs}/u;
-const PLUS_SIGNS_WITH_ASCII = ['+', ...UNICODE_PLUS_SIGNS];
-const MINUS_SIGNS_WITH_ASCII = ['-', ...UNICODE_MINUS_SIGNS];
-const escapeRegExp = s => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-const escapeClassChar = s => s.replace(/[-\\\]^]/g, m => `\\${m}`); // escape for use inside [...]
-
-const charClassFrom = chars => `[${chars.map(escapeClassChar).join('')}]`;
-const ANY_MINUS_CLASS = charClassFrom(['-'].concat(UNICODE_MINUS_SIGNS));
-const ANY_PLUS_CLASS = charClassFrom(['+'].concat(UNICODE_PLUS_SIGNS));
-const ANY_MINUS_RE = new RegExp(ANY_MINUS_CLASS, 'gu');
-const ANY_PLUS_RE = new RegExp(ANY_PLUS_CLASS, 'gu');
-const ANY_MINUS_DETECT_RE = new RegExp(ANY_MINUS_CLASS);
-const ANY_PLUS_DETECT_RE = new RegExp(ANY_PLUS_CLASS);
-function getNumberLocaleDetails(locale, options) {
-  const parts = getFormatter(locale, options).formatToParts(11111.1);
-  const result = {};
-  parts.forEach(part => {
-    result[part.type] = part.value;
-  });
-
-  // The formatting options may result in not returning a decimal.
-  getFormatter(locale).formatToParts(0.1).forEach(part => {
-    if (part.type === 'decimal') {
-      result[part.type] = part.value;
-    }
-  });
-  return result;
-}
-function parseNumber(formattedNumber, locale, options) {
-  if (formattedNumber == null) {
-    return null;
-  }
-
-  // Normalize control characters and whitespace; remove bidi/format controls
-  let input = String(formattedNumber).replace(/\p{Cf}/gu, '').trim();
-
-  // Normalize unicode minus/plus to ASCII, handle leading/trailing signs
-  input = input.replace(ANY_MINUS_RE, '-').replace(ANY_PLUS_RE, '+');
-  let isNegative = false;
-
-  // Trailing sign, e.g. "1234-" / "1234+"
-  const trailing = input.match(/([+-])\s*$/);
-  if (trailing) {
-    if (trailing[1] === '-') {
-      isNegative = true;
-    }
-    input = input.replace(/([+-])\s*$/, '');
-  }
-  // Leading sign
-  const leading = input.match(/^\s*([+-])/);
-  if (leading) {
-    if (leading[1] === '-') {
-      isNegative = true;
-    }
-    input = input.replace(/^\s*[+-]/, '');
-  }
-
-  // Heuristic locale detection
-  let computedLocale = locale;
-  if (computedLocale === undefined) {
-    if (ARABIC_DETECT_RE.test(input) || PERSIAN_DETECT_RE.test(input)) {
-      computedLocale = 'ar';
-    } else if (HAN_DETECT_RE.test(input)) {
-      computedLocale = 'zh';
-    }
-  }
-  const {
-    group,
-    decimal,
-    currency
-  } = getNumberLocaleDetails(computedLocale, options);
-
-  // Build robust unit regex from all unit parts (such as "km/h")
-  const unitParts = getFormatter(computedLocale, options).formatToParts(1).filter(p => p.type === 'unit').map(p => escapeRegExp(p.value));
-  const unitRegex = unitParts.length ? new RegExp(unitParts.join('|'), 'g') : null;
-  let groupRegex = null;
-  if (group) {
-    const isSpaceGroup = /\p{Zs}/u.test(group);
-    const isApostropheGroup = group === "'" || group === '’';
-
-    // Check if the group separator is a space-like character.
-    // If so, we'll replace all such characters with an empty string.
-    if (isSpaceGroup) {
-      groupRegex = /\p{Zs}/gu;
-    } else if (isApostropheGroup) {
-      // Some environments format numbers with ASCII apostrophe and others with a curly apostrophe.
-      groupRegex = /['’]/g;
-    } else {
-      groupRegex = new RegExp(escapeRegExp(group), 'g');
-    }
-  }
-  const replacements = [{
-    regex: group ? groupRegex : null,
-    replacement: ''
-  }, {
-    regex: decimal ? new RegExp(escapeRegExp(decimal), 'g') : null,
-    replacement: '.'
-  },
-  // Fullwidth punctuation
-  {
-    regex: /．/g,
-    replacement: '.'
-  },
-  // FULLWIDTH_DECIMAL
-  {
-    regex: /，/g,
-    replacement: ''
-  },
-  // FULLWIDTH_GROUP
-  // Arabic punctuation
-  {
-    regex: /٫/g,
-    replacement: '.'
-  },
-  // ARABIC DECIMAL SEPARATOR (U+066B)
-  {
-    regex: /٬/g,
-    replacement: ''
-  },
-  // ARABIC THOUSANDS SEPARATOR (U+066C)
-  // Currency & unit labels
-  {
-    regex: currency ? new RegExp(escapeRegExp(currency), 'g') : null,
-    replacement: ''
-  }, {
-    regex: unitRegex,
-    replacement: ''
-  },
-  // Numeral systems to ASCII digits
-  {
-    regex: ARABIC_RE,
-    replacement: ch => String(ARABIC_NUMERALS.indexOf(ch))
-  }, {
-    regex: PERSIAN_RE,
-    replacement: ch => String(PERSIAN_NUMERALS.indexOf(ch))
-  }, {
-    regex: FULLWIDTH_RE,
-    replacement: ch => String(FULLWIDTH_NUMERALS.indexOf(ch))
-  }, {
-    regex: HAN_RE,
-    replacement: ch => HAN_NUMERAL_TO_DIGIT[ch]
-  }];
-  let unformatted = replacements.reduce((acc, {
-    regex,
-    replacement
-  }) => {
-    return regex ? acc.replace(regex, replacement) : acc;
-  }, input);
-
-  // Mixed-locale safety: keep only the last '.' as decimal
-  const lastDot = unformatted.lastIndexOf('.');
-  if (lastDot !== -1) {
-    unformatted = `${unformatted.slice(0, lastDot).replace(/\./g, '')}.${unformatted.slice(lastDot + 1).replace(/\./g, '')}`;
-  }
-
-  // Guard against Infinity inputs (ASCII and symbol)
-  if (/^[-+]?Infinity$/i.test(input) || /[∞]/.test(input)) {
-    return null;
-  }
-  const parseTarget = (isNegative ? '-' : '') + unformatted;
-  let num = parseFloat(parseTarget);
-  const style = options?.style;
-  const isUnitPercent = style === 'unit' && options?.unit === 'percent';
-  const hasPercentSymbol = PERCENT_RE.test(formattedNumber) || style === 'percent';
-  const hasPermilleSymbol = PERMILLE_RE.test(formattedNumber);
-  if (hasPermilleSymbol) {
-    num /= 1000;
-  } else if (!isUnitPercent && hasPercentSymbol) {
-    num /= 100;
-  }
-  if (Number.isNaN(num)) {
-    return null;
-  }
-  return num;
-}
-
-const CHANGE_VALUE_TICK_DELAY = 60;
-const START_AUTO_CHANGE_DELAY = 400;
-const TOUCH_TIMEOUT = 50;
-const MAX_POINTER_MOVES_AFTER_TOUCH = 3;
-const SCROLLING_POINTER_MOVE_DISTANCE = 8;
-const DEFAULT_STEP = 1;
-
-const STEP_EPSILON_FACTOR = 1e-10;
-function getFractionDigits(format) {
-  const defaultOptions = getFormatter('en-US').resolvedOptions();
-  const minimumFractionDigits = format?.minimumFractionDigits ?? defaultOptions.minimumFractionDigits ?? 0;
-  const maximumFractionDigits = Math.max(format?.maximumFractionDigits ?? defaultOptions.maximumFractionDigits ?? 20, minimumFractionDigits);
-  return {
-    maximumFractionDigits,
-    minimumFractionDigits
-  };
-}
-function roundToFractionDigits(value, maximumFractionDigits) {
-  if (!Number.isFinite(value)) {
-    return value;
-  }
-  const digits = Math.min(Math.max(maximumFractionDigits, 0), 20);
-  return Number(value.toFixed(digits));
-}
-function removeFloatingPointErrors(value, format) {
-  const {
-    maximumFractionDigits
-  } = getFractionDigits(format);
-  return roundToFractionDigits(value, maximumFractionDigits);
-}
-function snapToStep(clampedValue, base, step, mode = 'directional') {
-  if (step === 0) {
-    return clampedValue;
-  }
-  const stepSize = Math.abs(step);
-  const direction = Math.sign(step);
-  const tolerance = stepSize * STEP_EPSILON_FACTOR * direction;
-  const divisor = mode === 'nearest' ? step : stepSize;
-  const rawSteps = (clampedValue - base + tolerance) / divisor;
-  let snappedSteps;
-  if (mode === 'nearest') {
-    snappedSteps = Math.round(rawSteps);
-  } else if (direction > 0) {
-    snappedSteps = Math.floor(rawSteps);
-  } else {
-    snappedSteps = Math.ceil(rawSteps);
-  }
-  const stepForResult = mode === 'nearest' ? step : stepSize;
-  return base + snappedSteps * stepForResult;
-}
-function toValidatedNumber(value, {
-  step,
-  minWithDefault,
-  maxWithDefault,
-  minWithZeroDefault,
-  format,
-  snapOnStep,
-  small,
-  clamp: shouldClamp
-}) {
-  if (value === null) {
-    return value;
-  }
-  const clampedValue = shouldClamp ? DrawerRoot.clamp(value, minWithDefault, maxWithDefault) : value;
-  if (step != null && snapOnStep) {
-    if (step === 0) {
-      return removeFloatingPointErrors(clampedValue, format);
-    }
-
-    // If a real minimum is provided, use it
-    let base = minWithZeroDefault;
-    if (!small && minWithDefault !== Number.MIN_SAFE_INTEGER) {
-      base = minWithDefault;
-    }
-    const snappedValue = snapToStep(clampedValue, base, step, small ? 'nearest' : 'directional');
-    return removeFloatingPointErrors(snappedValue, format);
-  }
-  return removeFloatingPointErrors(clampedValue, format);
-}
-
-const NumberFieldRoot = /*#__PURE__*/React__namespace.forwardRef(function NumberFieldRoot(componentProps, forwardedRef) {
-  const {
-    id: idProp,
-    min,
-    max,
-    smallStep = 0.1,
-    step: stepProp = 1,
-    largeStep = 10,
-    required = false,
-    disabled: disabledProp = false,
-    readOnly = false,
-    name: nameProp,
-    defaultValue,
-    value: valueProp,
-    onValueChange: onValueChangeProp,
-    onValueCommitted: onValueCommittedProp,
-    allowWheelScrub = false,
-    snapOnStep = false,
-    allowOutOfRange = false,
-    format,
-    locale,
-    render,
-    className,
-    inputRef: inputRefProp,
-    ...elementProps
-  } = componentProps;
-  const {
-    setDirty,
-    validityData,
-    disabled: fieldDisabled,
-    setFilled,
-    invalid,
-    name: fieldName,
-    state: fieldState,
-    validation,
-    shouldValidateOnChange
-  } = useFieldRootContext();
-  const disabled = fieldDisabled || disabledProp;
-  const name = fieldName ?? nameProp;
-  const step = stepProp === 'any' ? 1 : stepProp;
-  const [isScrubbing, setIsScrubbing] = React__namespace.useState(false);
-  const minWithDefault = min ?? Number.MIN_SAFE_INTEGER;
-  const maxWithDefault = max ?? Number.MAX_SAFE_INTEGER;
-  const minWithZeroDefault = min ?? 0;
-  const formatStyle = format?.style;
-  const inputRef = React__namespace.useRef(null);
-  const hiddenInputRef = useRenderElement.useMergedRefs(inputRefProp, validation.inputRef);
-  const id = useLabelableId({
-    id: idProp
-  });
-  const [valueUnwrapped, setValueUnwrapped] = DrawerRoot.useControlled({
-    controlled: valueProp,
-    default: defaultValue,
-    name: 'NumberField',
-    state: 'value'
-  });
-  const value = valueUnwrapped ?? null;
-  const valueRef = DrawerRoot.useValueAsRef(value);
-  DrawerRoot.useIsoLayoutEffect(() => {
-    setFilled(value !== null);
-  }, [setFilled, value]);
-  const forceRender = useForcedRerendering();
-  const formatOptionsRef = DrawerRoot.useValueAsRef(format);
-  const hasPendingCommitRef = React__namespace.useRef(false);
-  const onValueCommitted = DrawerRoot.useStableCallback((nextValue, eventDetails) => {
-    hasPendingCommitRef.current = false;
-    onValueCommittedProp?.(nextValue, eventDetails);
-  });
-  const startTickTimeout = DrawerRoot.useTimeout();
-  const tickInterval = useInterval();
-  const intentionalTouchCheckTimeout = DrawerRoot.useTimeout();
-  const isPressedRef = React__namespace.useRef(false);
-  const movesAfterTouchRef = React__namespace.useRef(0);
-  const allowInputSyncRef = React__namespace.useRef(true);
-  const lastChangedValueRef = React__namespace.useRef(null);
-  const unsubscribeFromGlobalContextMenuRef = React__namespace.useRef(() => {});
-
-  // During SSR, the value is formatted on the server, whose locale may differ from the client's
-  // locale. This causes a hydration mismatch, which we manually suppress. This is preferable to
-  // rendering an empty input field and then updating it with the formatted value, as the user
-  // can still see the value prior to hydration, even if it's not formatted correctly.
-  const [inputValue, setInputValue] = React__namespace.useState(() => {
-    if (valueProp !== undefined) {
-      return getControlledInputValue(value, locale, format);
-    }
-    return formatNumber(value, locale, format);
-  });
-  const [inputMode, setInputMode] = React__namespace.useState('numeric');
-  const getAllowedNonNumericKeys = DrawerRoot.useStableCallback(() => {
-    const {
-      decimal,
-      group,
-      currency,
-      literal
-    } = getNumberLocaleDetails(locale, format);
-    const keys = new Set();
-    BASE_NON_NUMERIC_SYMBOLS.forEach(symbol => keys.add(symbol));
-    if (decimal) {
-      keys.add(decimal);
-    }
-    if (group) {
-      keys.add(group);
-      if (SPACE_SEPARATOR_RE.test(group)) {
-        keys.add(' ');
-      }
-    }
-    const allowPercentSymbols = formatStyle === 'percent' || formatStyle === 'unit' && format?.unit === 'percent';
-    const allowPermilleSymbols = formatStyle === 'percent' || formatStyle === 'unit' && format?.unit === 'permille';
-    if (allowPercentSymbols) {
-      PERCENTAGES.forEach(key => keys.add(key));
-    }
-    if (allowPermilleSymbols) {
-      PERMILLE.forEach(key => keys.add(key));
-    }
-    if (formatStyle === 'currency' && currency) {
-      keys.add(currency);
-    }
-    if (literal) {
-      // Some locales (e.g. de-DE) insert a literal space character between the number
-      // and the symbol, so allow those characters to be typed/removed.
-      Array.from(literal).forEach(char => keys.add(char));
-      if (SPACE_SEPARATOR_RE.test(literal)) {
-        keys.add(' ');
-      }
-    }
-
-    // Allow plus sign in all cases; minus sign only when negatives are valid
-    PLUS_SIGNS_WITH_ASCII.forEach(key => keys.add(key));
-    if (minWithDefault < 0) {
-      MINUS_SIGNS_WITH_ASCII.forEach(key => keys.add(key));
-    }
-    return keys;
-  });
-  const getStepAmount = DrawerRoot.useStableCallback(event => {
-    if (event?.altKey) {
-      return smallStep;
-    }
-    if (event?.shiftKey) {
-      return largeStep;
-    }
-    return step;
-  });
-  const setValue = DrawerRoot.useStableCallback((unvalidatedValue, details) => {
-    const eventWithOptionalKeyState = details.event;
-    const dir = details.direction;
-    const reason = details.reason;
-    // Only allow out-of-range values for direct text entry (native-like behavior).
-    // Step-based interactions (keyboard arrows, buttons, wheel, scrub) still clamp to min/max.
-    const shouldClampValue = !allowOutOfRange || !(reason === DrawerRoot.inputChange || reason === DrawerRoot.inputBlur || reason === DrawerRoot.inputPaste || reason === DrawerRoot.inputClear || reason === DrawerRoot.none);
-    const validatedValue = toValidatedNumber(unvalidatedValue, {
-      step: dir ? getStepAmount(eventWithOptionalKeyState) * dir : undefined,
-      format: formatOptionsRef.current,
-      minWithDefault,
-      maxWithDefault,
-      minWithZeroDefault,
-      snapOnStep,
-      small: eventWithOptionalKeyState?.altKey ?? false,
-      clamp: shouldClampValue
-    });
-
-    // Determine whether we should notify about a change even if the numeric value is unchanged.
-    // This is needed when the user input is clamped/snapped to the same current value, or when
-    // the source value differs but validation normalizes to the existing value.
-    const isInputReason = details.reason === DrawerRoot.inputChange || details.reason === DrawerRoot.inputClear || details.reason === DrawerRoot.inputBlur || details.reason === DrawerRoot.inputPaste || details.reason === DrawerRoot.none;
-    const shouldFireChange = validatedValue !== value || isInputReason && (unvalidatedValue !== value || allowInputSyncRef.current === false);
-    if (shouldFireChange) {
-      lastChangedValueRef.current = validatedValue;
-      onValueChangeProp?.(validatedValue, details);
-      if (details.isCanceled) {
-        return shouldFireChange;
-      }
-      setValueUnwrapped(validatedValue);
-      setDirty(validatedValue !== validityData.initialValue);
-      hasPendingCommitRef.current = true;
-    }
-
-    // Keep the visible input in sync immediately when programmatic changes occur
-    // (increment/decrement, wheel, etc). During direct typing we don't want
-    // to overwrite the user-provided text until blur, so we gate on
-    // `allowInputSyncRef`.
-    if (allowInputSyncRef.current) {
-      setInputValue(formatNumber(validatedValue, locale, format));
-    }
-
-    // Formatting can change even if the numeric value hasn't, so ensure a re-render when needed.
-    forceRender();
-    return shouldFireChange;
-  });
-  const incrementValue = DrawerRoot.useStableCallback((amount, {
-    direction,
-    currentValue,
-    event,
-    reason
-  }) => {
-    const prevValue = currentValue == null ? valueRef.current : currentValue;
-    const nextValue = typeof prevValue === 'number' ? prevValue + amount * direction : Math.max(0, min ?? 0);
-    const nativeEvent = event;
-    return setValue(nextValue, DrawerRoot.createChangeEventDetails(reason, nativeEvent, undefined, {
-      direction
-    }));
-  });
-  const stopAutoChange = DrawerRoot.useStableCallback(() => {
-    intentionalTouchCheckTimeout.clear();
-    startTickTimeout.clear();
-    tickInterval.clear();
-    unsubscribeFromGlobalContextMenuRef.current();
-    movesAfterTouchRef.current = 0;
-  });
-  const startAutoChange = DrawerRoot.useStableCallback((isIncrement, triggerEvent) => {
-    stopAutoChange();
-    if (!inputRef.current) {
-      return;
-    }
-    const win = index_esm.getWindow(inputRef.current);
-    function handleContextMenu(event) {
-      event.preventDefault();
-    }
-
-    // A global context menu is necessary to prevent the context menu from appearing when the touch
-    // is slightly outside of the element's hit area.
-    win.addEventListener('contextmenu', handleContextMenu);
-    unsubscribeFromGlobalContextMenuRef.current = () => {
-      win.removeEventListener('contextmenu', handleContextMenu);
-    };
-    win.addEventListener('pointerup', event => {
-      isPressedRef.current = false;
-      stopAutoChange();
-      const committed = lastChangedValueRef.current ?? valueRef.current;
-      const commitReason = isIncrement ? DrawerRoot.incrementPress : DrawerRoot.decrementPress;
-      onValueCommitted(committed, DrawerRoot.createGenericEventDetails(commitReason, event));
-    }, {
-      once: true
-    });
-    function tick() {
-      const amount = getStepAmount(triggerEvent) ?? DEFAULT_STEP;
-      return incrementValue(amount, {
-        direction: isIncrement ? 1 : -1,
-        event: triggerEvent,
-        reason: isIncrement ? 'increment-press' : 'decrement-press'
-      });
-    }
-    if (!tick()) {
-      stopAutoChange();
-      return;
-    }
-    startTickTimeout.start(START_AUTO_CHANGE_DELAY, () => {
-      tickInterval.start(CHANGE_VALUE_TICK_DELAY, () => {
-        if (!tick()) {
-          stopAutoChange();
-        }
-      });
-    });
-  });
-
-  // We need to update the input value when the external `value` prop changes. This ends up acting
-  // as a single source of truth to update the input value, bypassing the need to manually set it in
-  // each event handler internally in this hook.
-  // This is done inside a layout effect as an alternative to the technique to set state during
-  // render as we're accessing a ref, which must be inside an effect.
-  // https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes
-  //
-  // ESLint is disabled because it needs to run even if the parsed value hasn't changed, since the
-  // value still can be formatted differently.
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  DrawerRoot.useIsoLayoutEffect(function syncFormattedInputValueOnValueChange() {
-    // This ensures the value is only updated on blur rather than every keystroke, but still
-    // allows the input value to be updated when the value is changed externally.
-    if (!allowInputSyncRef.current) {
-      return;
-    }
-    const nextInputValue = valueProp !== undefined ? getControlledInputValue(value, locale, format) : formatNumber(value, locale, format);
-    if (nextInputValue !== inputValue) {
-      setInputValue(nextInputValue);
-    }
-  });
-  DrawerRoot.useIsoLayoutEffect(function setDynamicInputModeForIOS() {
-    if (!DrawerRoot.isIOS) {
-      return;
-    }
-
-    // iOS numeric software keyboard doesn't have a minus key, so we need to use the default
-    // keyboard to let the user input a negative number.
-    let computedInputMode = 'text';
-    if (minWithDefault >= 0) {
-      // iOS numeric software keyboard doesn't have a decimal key for "numeric" input mode, but
-      // this is better than the "text" input if possible to use.
-      computedInputMode = 'decimal';
-    }
-    setInputMode(computedInputMode);
-  }, [minWithDefault, formatStyle]);
-  React__namespace.useEffect(() => {
-    return () => stopAutoChange();
-  }, [stopAutoChange]);
-
-  // The `onWheel` prop can't be prevented, so we need to use a global event listener.
-  React__namespace.useEffect(function registerElementWheelListener() {
-    const element = inputRef.current;
-    if (disabled || readOnly || !allowWheelScrub || !element) {
-      return undefined;
-    }
-    function handleWheel(event) {
-      if (
-      // Allow pinch-zooming.
-      event.ctrlKey || DrawerRoot.ownerDocument(inputRef.current).activeElement !== inputRef.current) {
-        return;
-      }
-
-      // Prevent the default behavior to avoid scrolling the page.
-      event.preventDefault();
-      const amount = getStepAmount(event) ?? DEFAULT_STEP;
-      incrementValue(amount, {
-        direction: event.deltaY > 0 ? -1 : 1,
-        event,
-        reason: 'wheel'
-      });
-    }
-    element.addEventListener('wheel', handleWheel);
-    return () => {
-      element.removeEventListener('wheel', handleWheel);
-    };
-  }, [allowWheelScrub, incrementValue, disabled, readOnly, largeStep, step, getStepAmount]);
-  const state = React__namespace.useMemo(() => ({
-    ...fieldState,
-    disabled,
-    readOnly,
-    required,
-    value,
-    inputValue,
-    scrubbing: isScrubbing
-  }), [fieldState, disabled, readOnly, required, value, inputValue, isScrubbing]);
-  const contextValue = React__namespace.useMemo(() => ({
-    inputRef,
-    inputValue,
-    value,
-    startAutoChange,
-    stopAutoChange,
-    minWithDefault,
-    maxWithDefault,
-    disabled,
-    readOnly,
-    id,
-    setValue,
-    incrementValue,
-    getStepAmount,
-    allowInputSyncRef,
-    formatOptionsRef,
-    valueRef,
-    lastChangedValueRef,
-    hasPendingCommitRef,
-    isPressedRef,
-    intentionalTouchCheckTimeout,
-    movesAfterTouchRef,
-    name,
-    required,
-    invalid,
-    inputMode,
-    getAllowedNonNumericKeys,
-    min,
-    max,
-    setInputValue,
-    locale,
-    isScrubbing,
-    setIsScrubbing,
-    state,
-    onValueCommitted
-  }), [inputRef, inputValue, value, startAutoChange, stopAutoChange, minWithDefault, maxWithDefault, disabled, readOnly, id, setValue, incrementValue, getStepAmount, formatOptionsRef, valueRef, intentionalTouchCheckTimeout, name, required, invalid, inputMode, getAllowedNonNumericKeys, min, max, setInputValue, locale, isScrubbing, state, onValueCommitted]);
-  const element = useRenderElement.useRenderElement('div', componentProps, {
-    ref: forwardedRef,
-    state,
-    props: elementProps,
-    stateAttributesMapping: stateAttributesMapping$1
-  });
-  return /*#__PURE__*/jsxRuntime.jsxs(NumberFieldRootContext.Provider, {
-    value: contextValue,
-    children: [element, /*#__PURE__*/jsxRuntime.jsx("input", {
-      ...validation.getInputValidationProps({
-        onFocus() {
-          inputRef.current?.focus();
-        },
-        onChange(event) {
-          // Workaround for https://github.com/facebook/react/issues/9023
-          if (event.nativeEvent.defaultPrevented) {
-            return;
-          }
-
-          // Handle browser autofill.
-          const nextValue = event.currentTarget.valueAsNumber;
-          const parsedValue = Number.isNaN(nextValue) ? null : nextValue;
-          const details = DrawerRoot.createChangeEventDetails(DrawerRoot.none, event.nativeEvent);
-          setDirty(parsedValue !== validityData.initialValue);
-          setValue(parsedValue, details);
-          if (shouldValidateOnChange()) {
-            validation.commit(parsedValue);
-          }
-        }
-      }),
-      ref: hiddenInputRef,
-      type: "number",
-      name: name,
-      value: value ?? '',
-      min: min,
-      max: max
-      // stepMismatch validation is broken unless an explicit `min` is added.
-      // See https://github.com/facebook/react/issues/12334.
-      ,
-      step: stepProp,
-      disabled: disabled,
-      required: required,
-      "aria-hidden": true,
-      tabIndex: -1,
-      style: name ? DrawerRoot.visuallyHiddenInput : DrawerRoot.visuallyHidden
-    })]
-  });
-});
-if (process.env.NODE_ENV !== "production") NumberFieldRoot.displayName = "NumberFieldRoot";
-function getControlledInputValue(value, locale, format) {
-  const explicitPrecision = format?.maximumFractionDigits != null || format?.minimumFractionDigits != null;
-  return explicitPrecision ? formatNumber(value, locale, format) : formatNumberMaxPrecision(value, locale, format);
-}
-
-/**
- * Groups the input with the increment and decrement buttons.
- * Renders a `<div>` element.
- *
- * Documentation: [Base UI Number Field](https://base-ui.com/react/components/number-field)
- */
-const NumberFieldGroup = /*#__PURE__*/React__namespace.forwardRef(function NumberFieldGroup(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    ...elementProps
-  } = componentProps;
-  const {
-    state
-  } = useNumberFieldRootContext();
-  const element = useRenderElement.useRenderElement('div', componentProps, {
-    ref: forwardedRef,
-    state,
-    props: [{
-      role: 'group'
-    }, elementProps],
-    stateAttributesMapping: stateAttributesMapping$1
-  });
-  return element;
-});
-if (process.env.NODE_ENV !== "production") NumberFieldGroup.displayName = "NumberFieldGroup";
-
-// Treat pen as touch-like to avoid forcing the software keyboard on stylus taps.
-// Linux Chrome may emit "pen" historically for mouse usage due to a bug, but the touch path
-// still works with minor behavioral differences.
-function isTouchLikePointerType(pointerType) {
-  return pointerType === 'touch' || pointerType === 'pen';
-}
-function useNumberFieldButton(params) {
-  const {
-    allowInputSyncRef,
-    disabled,
-    formatOptionsRef,
-    getStepAmount,
-    id,
-    incrementValue,
-    inputRef,
-    inputValue,
-    intentionalTouchCheckTimeout,
-    isIncrement,
-    isPressedRef,
-    locale,
-    movesAfterTouchRef,
-    readOnly,
-    setValue,
-    startAutoChange,
-    stopAutoChange,
-    valueRef,
-    lastChangedValueRef,
-    onValueCommitted
-  } = params;
-  const incrementDownCoordsRef = React__namespace.useRef({
-    x: 0,
-    y: 0
-  });
-  const isTouchingButtonRef = React__namespace.useRef(false);
-  const ignoreClickRef = React__namespace.useRef(false);
-  const pointerTypeRef = React__namespace.useRef('');
-  const pressReason = isIncrement ? 'increment-press' : 'decrement-press';
-  function commitValue(nativeEvent) {
-    allowInputSyncRef.current = true;
-
-    // The input may be dirty but not yet blurred, so the value won't have been committed.
-    const parsedValue = parseNumber(inputValue, locale, formatOptionsRef.current);
-    if (parsedValue !== null) {
-      // The increment value function needs to know the current input value to increment it
-      // correctly.
-      valueRef.current = parsedValue;
-      setValue(parsedValue, DrawerRoot.createChangeEventDetails(pressReason, nativeEvent, undefined, {
-        direction: isIncrement ? 1 : -1
-      }));
-    }
-  }
-  const props = {
-    disabled,
-    'aria-readonly': readOnly || undefined,
-    'aria-label': isIncrement ? 'Increase' : 'Decrease',
-    'aria-controls': id,
-    // Keyboard users shouldn't have access to the buttons, since they can use the input element
-    // to change the value. On the other hand, `aria-hidden` is not applied because touch screen
-    // readers should be able to use the buttons.
-    tabIndex: -1,
-    style: {
-      WebkitUserSelect: 'none',
-      userSelect: 'none'
-    },
-    onTouchStart() {
-      isTouchingButtonRef.current = true;
-    },
-    onTouchEnd() {
-      isTouchingButtonRef.current = false;
-    },
-    onClick(event) {
-      const isDisabled = disabled || readOnly;
-      if (event.defaultPrevented || isDisabled || (
-      // If it's not a keyboard/virtual click, ignore.
-      isTouchLikePointerType(pointerTypeRef.current) ? ignoreClickRef.current : event.detail !== 0)) {
-        return;
-      }
-      commitValue(event.nativeEvent);
-      const amount = getStepAmount(event) ?? DEFAULT_STEP;
-      const prev = valueRef.current;
-      incrementValue(amount, {
-        direction: isIncrement ? 1 : -1,
-        event: event.nativeEvent,
-        reason: pressReason
-      });
-      const committed = lastChangedValueRef.current ?? valueRef.current;
-      if (committed !== prev) {
-        onValueCommitted(committed, DrawerRoot.createGenericEventDetails(pressReason, event.nativeEvent));
-      }
-    },
-    onPointerDown(event) {
-      const isMainButton = !event.button || event.button === 0;
-      if (event.defaultPrevented || readOnly || !isMainButton || disabled) {
-        return;
-      }
-      pointerTypeRef.current = event.pointerType;
-      ignoreClickRef.current = false;
-      isPressedRef.current = true;
-      incrementDownCoordsRef.current = {
-        x: event.clientX,
-        y: event.clientY
-      };
-      commitValue(event.nativeEvent);
-      const isTouchPointer = isTouchLikePointerType(event.pointerType);
-      if (!isTouchPointer) {
-        event.preventDefault();
-        inputRef.current?.focus();
-        startAutoChange(isIncrement, event);
-      } else {
-        // We need to check if the pointerdown was intentional, and not the result of a scroll
-        // or pinch-zoom. In that case, we don't want to change the value.
-        intentionalTouchCheckTimeout.start(TOUCH_TIMEOUT, () => {
-          const moves = movesAfterTouchRef.current;
-          movesAfterTouchRef.current = 0;
-          // Only start auto-change if the touch is still pressed (prevents races
-          // with pointerup occurring before the timeout fires on quick taps).
-          const stillPressed = isPressedRef.current;
-          if (stillPressed && moves != null && moves < MAX_POINTER_MOVES_AFTER_TOUCH) {
-            startAutoChange(isIncrement, event);
-            ignoreClickRef.current = true; // synthesized click should be ignored
-          } else {
-            // No auto-change (simple tap or scroll gesture), allow the click handler
-            // to perform a single increment and commit.
-            ignoreClickRef.current = false;
-            stopAutoChange();
-          }
-        });
-      }
-    },
-    onPointerUp(event) {
-      // Ensure we mark the press as released for touch flows even if auto-change never started,
-      // so the delayed auto-change check won’t start after a quick tap.
-      if (isTouchLikePointerType(event.pointerType)) {
-        isPressedRef.current = false;
-      }
-    },
-    onPointerMove(event) {
-      const isDisabled = disabled || readOnly;
-      if (isDisabled || !isTouchLikePointerType(event.pointerType) || !isPressedRef.current) {
-        return;
-      }
-      if (movesAfterTouchRef.current != null) {
-        movesAfterTouchRef.current += 1;
-      }
-      const {
-        x,
-        y
-      } = incrementDownCoordsRef.current;
-      const dx = x - event.clientX;
-      const dy = y - event.clientY;
-
-      // An alternative to this technique is to detect when the NumberField's parent container
-      // has been scrolled
-      if (dx ** 2 + dy ** 2 > SCROLLING_POINTER_MOVE_DISTANCE ** 2) {
-        stopAutoChange();
-      }
-    },
-    onMouseEnter(event) {
-      const isDisabled = disabled || readOnly;
-      if (event.defaultPrevented || isDisabled || !isPressedRef.current || isTouchingButtonRef.current || isTouchLikePointerType(pointerTypeRef.current)) {
-        return;
-      }
-      startAutoChange(isIncrement, event);
-    },
-    onMouseLeave() {
-      if (isTouchingButtonRef.current) {
-        return;
-      }
-      stopAutoChange();
-    },
-    onMouseUp() {
-      if (isTouchingButtonRef.current) {
-        return;
-      }
-      stopAutoChange();
-    }
-  };
-  return props;
-}
-
-/**
- * A stepper button that increases the field value when clicked.
- * Renders an `<button>` element.
- *
- * Documentation: [Base UI Number Field](https://base-ui.com/react/components/number-field)
- */
-const NumberFieldIncrement = /*#__PURE__*/React__namespace.forwardRef(function NumberFieldIncrement(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    disabled: disabledProp = false,
-    nativeButton = true,
-    ...elementProps
-  } = componentProps;
-  const {
-    allowInputSyncRef,
-    disabled: contextDisabled,
-    formatOptionsRef,
-    getStepAmount,
-    id,
-    incrementValue,
-    inputRef,
-    inputValue,
-    intentionalTouchCheckTimeout,
-    isPressedRef,
-    locale,
-    maxWithDefault,
-    movesAfterTouchRef,
-    readOnly,
-    setValue,
-    startAutoChange,
-    state,
-    stopAutoChange,
-    value,
-    valueRef,
-    lastChangedValueRef,
-    onValueCommitted
-  } = useNumberFieldRootContext();
-  const isMax = value != null && value >= maxWithDefault;
-  const disabled = disabledProp || contextDisabled || isMax;
-  const props = useNumberFieldButton({
-    isIncrement: true,
-    inputRef,
-    startAutoChange,
-    stopAutoChange,
-    inputValue,
-    disabled,
-    readOnly,
-    id,
-    setValue,
-    getStepAmount,
-    incrementValue,
-    allowInputSyncRef,
-    formatOptionsRef,
-    valueRef,
-    isPressedRef,
-    intentionalTouchCheckTimeout,
-    movesAfterTouchRef,
-    locale,
-    lastChangedValueRef,
-    onValueCommitted
-  });
-  const {
-    getButtonProps,
-    buttonRef
-  } = MenuSubmenuTrigger.useButton({
-    disabled,
-    native: nativeButton,
-    focusableWhenDisabled: true
-  });
-  const buttonState = React__namespace.useMemo(() => ({
-    ...state,
-    disabled
-  }), [state, disabled]);
-  const element = useRenderElement.useRenderElement('button', componentProps, {
-    ref: [forwardedRef, buttonRef],
-    state: buttonState,
-    props: [props, elementProps, getButtonProps],
-    stateAttributesMapping: stateAttributesMapping$1
-  });
-  return element;
-});
-if (process.env.NODE_ENV !== "production") NumberFieldIncrement.displayName = "NumberFieldIncrement";
-
-/**
- * A stepper button that decreases the field value when clicked.
- * Renders an `<button>` element.
- *
- * Documentation: [Base UI Number Field](https://base-ui.com/react/components/number-field)
- */
-const NumberFieldDecrement = /*#__PURE__*/React__namespace.forwardRef(function NumberFieldDecrement(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    disabled: disabledProp = false,
-    nativeButton = true,
-    ...elementProps
-  } = componentProps;
-  const {
-    allowInputSyncRef,
-    disabled: contextDisabled,
-    formatOptionsRef,
-    getStepAmount,
-    id,
-    incrementValue,
-    inputRef,
-    inputValue,
-    intentionalTouchCheckTimeout,
-    isPressedRef,
-    minWithDefault,
-    movesAfterTouchRef,
-    readOnly,
-    setValue,
-    startAutoChange,
-    state,
-    stopAutoChange,
-    value,
-    valueRef,
-    locale,
-    lastChangedValueRef,
-    onValueCommitted
-  } = useNumberFieldRootContext();
-  const isMin = value != null && value <= minWithDefault;
-  const disabled = disabledProp || contextDisabled || isMin;
-  const props = useNumberFieldButton({
-    isIncrement: false,
-    inputRef,
-    startAutoChange,
-    stopAutoChange,
-    inputValue,
-    disabled,
-    readOnly,
-    id,
-    setValue,
-    getStepAmount,
-    incrementValue,
-    allowInputSyncRef,
-    formatOptionsRef,
-    valueRef,
-    isPressedRef,
-    intentionalTouchCheckTimeout,
-    movesAfterTouchRef,
-    locale,
-    lastChangedValueRef,
-    onValueCommitted
-  });
-  const {
-    getButtonProps,
-    buttonRef
-  } = MenuSubmenuTrigger.useButton({
-    disabled,
-    native: nativeButton,
-    focusableWhenDisabled: true
-  });
-  const buttonState = React__namespace.useMemo(() => ({
-    ...state,
-    disabled
-  }), [state, disabled]);
-  const element = useRenderElement.useRenderElement('button', componentProps, {
-    ref: [forwardedRef, buttonRef],
-    state: buttonState,
-    props: [props, elementProps, getButtonProps],
-    stateAttributesMapping: stateAttributesMapping$1
-  });
-  return element;
-});
-if (process.env.NODE_ENV !== "production") NumberFieldDecrement.displayName = "NumberFieldDecrement";
-
-const stateAttributesMapping = {
-  ...fieldValidityMapping,
-  ...stateAttributesMapping$1
-};
-const NAVIGATE_KEYS = new Set(['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Enter', 'Escape']);
-
-/**
- * The native input control in the number field.
- * Renders an `<input>` element.
- *
- * Documentation: [Base UI Number Field](https://base-ui.com/react/components/number-field)
- */
-const NumberFieldInput = /*#__PURE__*/React__namespace.forwardRef(function NumberFieldInput(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    ...elementProps
-  } = componentProps;
-  const {
-    allowInputSyncRef,
-    disabled,
-    formatOptionsRef,
-    getAllowedNonNumericKeys,
-    getStepAmount,
-    id,
-    incrementValue,
-    inputMode,
-    inputValue,
-    max,
-    min,
-    name,
-    readOnly,
-    required,
-    setValue,
-    state,
-    setInputValue,
-    locale,
-    inputRef,
-    value,
-    onValueCommitted,
-    lastChangedValueRef,
-    hasPendingCommitRef,
-    valueRef
-  } = useNumberFieldRootContext();
-  const {
-    clearErrors
-  } = useFormContext();
-  const {
-    validationMode,
-    setTouched,
-    setFocused,
-    invalid,
-    shouldValidateOnChange,
-    validation
-  } = useFieldRootContext();
-  const {
-    labelId
-  } = useLabelableContext();
-  const hasTouchedInputRef = React__namespace.useRef(false);
-  const blockRevalidationRef = React__namespace.useRef(false);
-  useField({
-    id,
-    commit: validation.commit,
-    value,
-    controlRef: inputRef,
-    name,
-    getValue: () => value ?? null
-  });
-  DrawerRoot.useValueChanged(value, previousValue => {
-    const validateOnChange = shouldValidateOnChange();
-    clearErrors(name);
-    if (validateOnChange) {
-      validation.commit(value);
-    }
-    if (previousValue === value || validateOnChange) {
-      return;
-    }
-    if (blockRevalidationRef.current) {
-      blockRevalidationRef.current = false;
-      return;
-    }
-    validation.commit(value, true);
-  });
-  const inputProps = {
-    id,
-    required,
-    disabled,
-    readOnly,
-    inputMode,
-    value: inputValue,
-    type: 'text',
-    autoComplete: 'off',
-    autoCorrect: 'off',
-    spellCheck: 'false',
-    'aria-roledescription': 'Number field',
-    'aria-invalid': invalid || undefined,
-    'aria-labelledby': labelId,
-    // If the server's locale does not match the client's locale, the formatting may not match,
-    // causing a hydration mismatch.
-    suppressHydrationWarning: true,
-    onFocus(event) {
-      if (event.defaultPrevented || readOnly || disabled) {
-        return;
-      }
-      setFocused(true);
-      if (hasTouchedInputRef.current) {
-        return;
-      }
-      hasTouchedInputRef.current = true;
-
-      // Browsers set selection at the start of the input field by default. We want to set it at
-      // the end for the first focus.
-      const target = event.currentTarget;
-      const length = target.value.length;
-      target.setSelectionRange(length, length);
-    },
-    onBlur(event) {
-      if (event.defaultPrevented || readOnly || disabled) {
-        return;
-      }
-      setTouched(true);
-      setFocused(false);
-      const hadManualInput = !allowInputSyncRef.current;
-      const hadPendingProgrammaticChange = hasPendingCommitRef.current;
-      allowInputSyncRef.current = true;
-      if (inputValue.trim() === '') {
-        setValue(null, DrawerRoot.createChangeEventDetails(DrawerRoot.inputClear, event.nativeEvent));
-        if (validationMode === 'onBlur') {
-          validation.commit(null);
-        }
-        onValueCommitted(null, DrawerRoot.createGenericEventDetails(DrawerRoot.inputClear, event.nativeEvent));
-        return;
-      }
-      const formatOptions = formatOptionsRef.current;
-      const parsedValue = parseNumber(inputValue, locale, formatOptions);
-      if (parsedValue === null) {
-        return;
-      }
-
-      // If an explicit precision is requested, round the committed numeric value.
-      const hasExplicitPrecision = formatOptions?.maximumFractionDigits != null || formatOptions?.minimumFractionDigits != null;
-      const maxFrac = formatOptions?.maximumFractionDigits;
-      const committed = hasExplicitPrecision && typeof maxFrac === 'number' ? Number(parsedValue.toFixed(maxFrac)) : parsedValue;
-      const nextEventDetails = DrawerRoot.createGenericEventDetails(DrawerRoot.inputBlur, event.nativeEvent);
-      const shouldUpdateValue = value !== committed;
-      const shouldCommit = hadManualInput || shouldUpdateValue || hadPendingProgrammaticChange;
-      if (validationMode === 'onBlur') {
-        validation.commit(committed);
-      }
-      if (shouldUpdateValue) {
-        blockRevalidationRef.current = true;
-        setValue(committed, DrawerRoot.createChangeEventDetails(DrawerRoot.inputBlur, event.nativeEvent));
-      }
-      if (shouldCommit) {
-        onValueCommitted(committed, nextEventDetails);
-      }
-
-      // Normalize only the displayed text
-      const canonicalText = formatNumber(committed, locale, formatOptions);
-      const maxPrecisionText = formatNumberMaxPrecision(parsedValue, locale, formatOptions);
-      const shouldPreserveFullPrecision = !hasExplicitPrecision && parsedValue === value && inputValue === maxPrecisionText;
-      if (!shouldPreserveFullPrecision && inputValue !== canonicalText) {
-        setInputValue(canonicalText);
-      }
-    },
-    onChange(event) {
-      // Workaround for https://github.com/facebook/react/issues/9023
-      if (event.nativeEvent.defaultPrevented) {
-        return;
-      }
-      allowInputSyncRef.current = false;
-      const targetValue = event.target.value;
-      if (targetValue.trim() === '') {
-        setInputValue(targetValue);
-        setValue(null, DrawerRoot.createChangeEventDetails(DrawerRoot.inputClear, event.nativeEvent));
-        return;
-      }
-
-      // Update the input text immediately and only fire onValueChange if the typed value is
-      // currently parseable into a number. This preserves good UX for IME
-      // composition/partial input while still providing live numeric updates when possible.
-      const allowedNonNumericKeys = getAllowedNonNumericKeys();
-      const isValidCharacterString = Array.from(targetValue).every(ch => {
-        const isAsciiDigit = ch >= '0' && ch <= '9';
-        const isArabicNumeral = ARABIC_DETECT_RE.test(ch);
-        const isHanNumeral = HAN_DETECT_RE.test(ch);
-        const isPersianNumeral = PERSIAN_DETECT_RE.test(ch);
-        const isFullwidthNumeral = FULLWIDTH_DETECT_RE.test(ch);
-        const isMinus = ANY_MINUS_DETECT_RE.test(ch);
-        return isAsciiDigit || isArabicNumeral || isHanNumeral || isPersianNumeral || isFullwidthNumeral || isMinus || allowedNonNumericKeys.has(ch);
-      });
-      if (!isValidCharacterString) {
-        return;
-      }
-      const parsedValue = parseNumber(targetValue, locale, formatOptionsRef.current);
-      setInputValue(targetValue);
-      if (parsedValue !== null) {
-        setValue(parsedValue, DrawerRoot.createChangeEventDetails(DrawerRoot.inputChange, event.nativeEvent));
-      }
-    },
-    onKeyDown(event) {
-      if (event.defaultPrevented || readOnly || disabled) {
-        return;
-      }
-      const nativeEvent = event.nativeEvent;
-      allowInputSyncRef.current = true;
-      const allowedNonNumericKeys = getAllowedNonNumericKeys();
-      let isAllowedNonNumericKey = allowedNonNumericKeys.has(event.key);
-      const {
-        decimal,
-        currency,
-        percentSign
-      } = getNumberLocaleDetails(locale, formatOptionsRef.current);
-      const selectionStart = event.currentTarget.selectionStart;
-      const selectionEnd = event.currentTarget.selectionEnd;
-      const isAllSelected = selectionStart === 0 && selectionEnd === inputValue.length;
-
-      // Normalize handling of plus/minus signs via precomputed regexes
-      const selectionContainsIndex = index => selectionStart != null && selectionEnd != null && index >= selectionStart && index < selectionEnd;
-      if (ANY_MINUS_DETECT_RE.test(event.key) && Array.from(allowedNonNumericKeys).some(k => ANY_MINUS_DETECT_RE.test(k || ''))) {
-        // Only allow one sign unless replacing the existing one or all text is selected
-        const existingIndex = inputValue.search(ANY_MINUS_RE);
-        const isReplacingExisting = existingIndex != null && existingIndex !== -1 && selectionContainsIndex(existingIndex);
-        isAllowedNonNumericKey = !(ANY_MINUS_DETECT_RE.test(inputValue) || ANY_PLUS_DETECT_RE.test(inputValue)) || isAllSelected || isReplacingExisting;
-      }
-      if (ANY_PLUS_DETECT_RE.test(event.key) && Array.from(allowedNonNumericKeys).some(k => ANY_PLUS_DETECT_RE.test(k || ''))) {
-        const existingIndex = inputValue.search(ANY_PLUS_RE);
-        const isReplacingExisting = existingIndex != null && existingIndex !== -1 && selectionContainsIndex(existingIndex);
-        isAllowedNonNumericKey = !(ANY_MINUS_DETECT_RE.test(inputValue) || ANY_PLUS_DETECT_RE.test(inputValue)) || isAllSelected || isReplacingExisting;
-      }
-
-      // Only allow one of each symbol.
-      [decimal, currency, percentSign].forEach(symbol => {
-        if (event.key === symbol) {
-          const symbolIndex = inputValue.indexOf(symbol);
-          const isSymbolHighlighted = selectionContainsIndex(symbolIndex);
-          isAllowedNonNumericKey = !inputValue.includes(symbol) || isAllSelected || isSymbolHighlighted;
-        }
-      });
-      const isAsciiDigit = event.key >= '0' && event.key <= '9';
-      const isArabicNumeral = ARABIC_DETECT_RE.test(event.key);
-      const isHanNumeral = HAN_DETECT_RE.test(event.key);
-      const isFullwidthNumeral = FULLWIDTH_DETECT_RE.test(event.key);
-      const isNavigateKey = NAVIGATE_KEYS.has(event.key);
-      if (
-      // Allow composition events (e.g., pinyin)
-      // event.nativeEvent.isComposing does not work in Safari:
-      // https://bugs.webkit.org/show_bug.cgi?id=165004
-      event.which === 229 || event.altKey || event.ctrlKey || event.metaKey || isAllowedNonNumericKey || isAsciiDigit || isArabicNumeral || isFullwidthNumeral || isHanNumeral || isNavigateKey) {
-        return;
-      }
-
-      // We need to commit the number at this point if the input hasn't been blurred.
-      const parsedValue = parseNumber(inputValue, locale, formatOptionsRef.current);
-      const amount = getStepAmount(event) ?? DEFAULT_STEP;
-
-      // Prevent insertion of text or caret from moving.
-      DrawerRoot.stopEvent(event);
-      const commitDetails = DrawerRoot.createGenericEventDetails(DrawerRoot.keyboard, nativeEvent);
-      if (event.key === 'ArrowUp') {
-        incrementValue(amount, {
-          direction: 1,
-          currentValue: parsedValue,
-          event: nativeEvent,
-          reason: DrawerRoot.keyboard
-        });
-        onValueCommitted(lastChangedValueRef.current ?? valueRef.current, commitDetails);
-      } else if (event.key === 'ArrowDown') {
-        incrementValue(amount, {
-          direction: -1,
-          currentValue: parsedValue,
-          event: nativeEvent,
-          reason: DrawerRoot.keyboard
-        });
-        onValueCommitted(lastChangedValueRef.current ?? valueRef.current, commitDetails);
-      } else if (event.key === 'Home' && min != null) {
-        setValue(min, DrawerRoot.createChangeEventDetails(DrawerRoot.keyboard, nativeEvent));
-        onValueCommitted(lastChangedValueRef.current ?? valueRef.current, commitDetails);
-      } else if (event.key === 'End' && max != null) {
-        setValue(max, DrawerRoot.createChangeEventDetails(DrawerRoot.keyboard, nativeEvent));
-        onValueCommitted(lastChangedValueRef.current ?? valueRef.current, commitDetails);
-      }
-    },
-    onPaste(event) {
-      if (event.defaultPrevented || readOnly || disabled) {
-        return;
-      }
-
-      // Prevent `onChange` from being called.
-      event.preventDefault();
-      const clipboardData = event.clipboardData || window.Clipboard;
-      const pastedData = clipboardData.getData('text/plain');
-      const parsedValue = parseNumber(pastedData, locale, formatOptionsRef.current);
-      if (parsedValue !== null) {
-        allowInputSyncRef.current = false;
-        setValue(parsedValue, DrawerRoot.createChangeEventDetails(DrawerRoot.inputPaste, event.nativeEvent));
-        setInputValue(pastedData);
-      }
-    }
-  };
-  const element = useRenderElement.useRenderElement('input', componentProps, {
-    ref: [forwardedRef, inputRef],
-    state,
-    props: [inputProps, validation.getValidationProps(), elementProps],
-    stateAttributesMapping
-  });
-  return element;
-});
-if (process.env.NODE_ENV !== "production") NumberFieldInput.displayName = "NumberFieldInput";
-
 const NumberFieldScrubAreaContext = /*#__PURE__*/React__namespace.createContext(undefined);
 if (process.env.NODE_ENV !== "production") NumberFieldScrubAreaContext.displayName = "NumberFieldScrubAreaContext";
 function useNumberFieldScrubAreaContext() {
@@ -8832,7 +7057,7 @@ function useNumberFieldScrubAreaContext() {
 
 // Calculates the viewport rect for the virtual cursor.
 function getViewportRect(teleportDistance, scrubAreaEl) {
-  const win = index_esm.getWindow(scrubAreaEl);
+  const win = floatingUi_utils_dom.getWindow(scrubAreaEl);
   const rect = scrubAreaEl.getBoundingClientRect();
   if (rect && teleportDistance != null) {
     return {
@@ -8862,7 +7087,7 @@ function getViewportRect(teleportDistance, scrubAreaEl) {
 // This lets us invert the scale of the cursor to match the OS scale, in which the cursor doesn't
 // scale with the content on pinch-zoom.
 function subscribeToVisualViewportResize(element, visualScaleRef) {
-  const vV = index_esm.getWindow(element).visualViewport;
+  const vV = floatingUi_utils_dom.getWindow(element).visualViewport;
   if (!vV) {
     return () => {};
   }
@@ -8898,7 +7123,7 @@ const NumberFieldScrubArea = /*#__PURE__*/React__namespace.forwardRef(function N
     onValueCommitted,
     lastChangedValueRef,
     valueRef
-  } = useNumberFieldRootContext();
+  } = NumberFieldInput.useNumberFieldRootContext();
   const scrubAreaRef = React__namespace.useRef(null);
   const isScrubbingRef = React__namespace.useRef(false);
   const didMoveRef = React__namespace.useRef(false);
@@ -8909,7 +7134,7 @@ const NumberFieldScrubArea = /*#__PURE__*/React__namespace.forwardRef(function N
     y: 0
   });
   const visualScaleRef = React__namespace.useRef(1);
-  const exitPointerLockTimeout = DrawerRoot.useTimeout();
+  const exitPointerLockTimeout = useValueChanged.useTimeout();
   const [isTouchInput, setIsTouchInput] = React__namespace.useState(false);
   const [isPointerLockDenied, setIsPointerLockDenied] = React__namespace.useState(false);
   const [isScrubbing, setIsScrubbing] = React__namespace.useState(false);
@@ -8924,7 +7149,7 @@ const NumberFieldScrubArea = /*#__PURE__*/React__namespace.forwardRef(function N
       scrubAreaCursorRef.current.style.transform = `translate3d(${x}px,${y}px,0) scale(${1 / visualScaleRef.current})`;
     }
   }
-  const onScrub = DrawerRoot.useStableCallback(({
+  const onScrub = useValueChanged.useStableCallback(({
     movementX,
     movementY
   }) => {
@@ -8954,7 +7179,7 @@ const NumberFieldScrubArea = /*#__PURE__*/React__namespace.forwardRef(function N
     virtualCursorCoords.current = newCoords;
     updateCursorTransform(newCoords.x, newCoords.y);
   });
-  const onScrubbingChange = DrawerRoot.useStableCallback((scrubbingValue, {
+  const onScrubbingChange = useValueChanged.useStableCallback((scrubbingValue, {
     clientX,
     clientY
   }) => {
@@ -8982,13 +7207,13 @@ const NumberFieldScrubArea = /*#__PURE__*/React__namespace.forwardRef(function N
     function handleScrubPointerUp(event) {
       function handler() {
         try {
-          DrawerRoot.ownerDocument(scrubAreaRef.current).exitPointerLock();
+          useValueChanged.ownerDocument(scrubAreaRef.current).exitPointerLock();
         } catch {
           // Ignore errors.
         } finally {
           isScrubbingRef.current = false;
           onScrubbingChange(false, event);
-          onValueCommitted(lastChangedValueRef.current ?? valueRef.current, DrawerRoot.createGenericEventDetails(DrawerRoot.scrub, event));
+          onValueCommitted(lastChangedValueRef.current ?? valueRef.current, useValueChanged.createGenericEventDetails(useValueChanged.scrub, event));
 
           // Manually dispatch a click event if no movement happened, since
           // preventDefault on pointerdown prevents the browser click event.
@@ -9002,7 +7227,7 @@ const NumberFieldScrubArea = /*#__PURE__*/React__namespace.forwardRef(function N
           pointerDownTargetRef.current = null;
         }
       }
-      if (DrawerRoot.isFirefox) {
+      if (useValueChanged.isFirefox) {
         // Firefox needs a small delay here when soft-clicking as the pointer
         // lock will not release otherwise.
         exitPointerLockTimeout.start(20, handler);
@@ -9027,18 +7252,18 @@ const NumberFieldScrubArea = /*#__PURE__*/React__namespace.forwardRef(function N
         cumulativeDelta = 0;
         didMoveRef.current = true;
         const dValue = direction === 'vertical' ? -movementY : movementX;
-        const stepAmount = getStepAmount(event) ?? DEFAULT_STEP;
+        const stepAmount = getStepAmount(event) ?? NumberFieldInput.DEFAULT_STEP;
         const rawAmount = dValue * stepAmount;
         if (rawAmount !== 0) {
           incrementValue(Math.abs(rawAmount), {
             direction: rawAmount >= 0 ? 1 : -1,
             event,
-            reason: DrawerRoot.scrub
+            reason: useValueChanged.scrub
           });
         }
       }
     }
-    const win = index_esm.getWindow(inputRef.current);
+    const win = floatingUi_utils_dom.getWindow(inputRef.current);
     win.addEventListener('pointerup', handleScrubPointerUp, true);
     win.addEventListener('pointermove', handleScrubPointerMove, true);
     return () => {
@@ -9088,12 +7313,12 @@ const NumberFieldScrubArea = /*#__PURE__*/React__namespace.forwardRef(function N
       onScrubbingChange(true, event.nativeEvent);
 
       // WebKit causes significant layout shift with the native message, so we can't use it.
-      if (!isTouch && !DrawerRoot.isWebKit) {
+      if (!isTouch && !useValueChanged.isWebKit) {
         try {
           // Avoid non-deterministic errors in testing environments. This error sometimes
           // appears:
           // "The root document of this element is not valid for pointer lock."
-          await DrawerRoot.ownerDocument(scrubAreaRef.current).body.requestPointerLock();
+          await useValueChanged.ownerDocument(scrubAreaRef.current).body.requestPointerLock();
           setIsPointerLockDenied(false);
         } catch (error) {
           setIsPointerLockDenied(true);
@@ -9111,7 +7336,7 @@ const NumberFieldScrubArea = /*#__PURE__*/React__namespace.forwardRef(function N
     ref: [forwardedRef, scrubAreaRef],
     state,
     props: [defaultProps, elementProps],
-    stateAttributesMapping: stateAttributesMapping$1
+    stateAttributesMapping: NumberFieldInput.stateAttributesMapping
   });
   const contextValue = React__namespace.useMemo(() => ({
     isScrubbing,
@@ -9147,7 +7372,7 @@ const NumberFieldScrubAreaCursor = /*#__PURE__*/React__namespace.forwardRef(func
   } = componentProps;
   const {
     state
-  } = useNumberFieldRootContext();
+  } = NumberFieldInput.useNumberFieldRootContext();
   const {
     isScrubbing,
     isTouchInput,
@@ -9155,7 +7380,7 @@ const NumberFieldScrubAreaCursor = /*#__PURE__*/React__namespace.forwardRef(func
     scrubAreaCursorRef
   } = useNumberFieldScrubAreaContext();
   const [domElement, setDomElement] = React__namespace.useState(null);
-  const shouldRender = isScrubbing && !DrawerRoot.isWebKit && !isTouchInput && !isPointerLockDenied;
+  const shouldRender = isScrubbing && !useValueChanged.isWebKit && !isTouchInput && !isPointerLockDenied;
   const element = useRenderElement.useRenderElement('span', componentProps, {
     enabled: shouldRender,
     ref: [forwardedRef, scrubAreaCursorRef, setDomElement],
@@ -9169,19 +7394,19 @@ const NumberFieldScrubAreaCursor = /*#__PURE__*/React__namespace.forwardRef(func
         pointerEvents: 'none'
       }
     }, elementProps],
-    stateAttributesMapping: stateAttributesMapping$1
+    stateAttributesMapping: NumberFieldInput.stateAttributesMapping
   });
-  return element && /*#__PURE__*/ReactDOM__namespace.createPortal(element, DrawerRoot.ownerDocument(domElement).body);
+  return element && /*#__PURE__*/ReactDOM__namespace.createPortal(element, useValueChanged.ownerDocument(domElement).body);
 });
 if (process.env.NODE_ENV !== "production") NumberFieldScrubAreaCursor.displayName = "NumberFieldScrubAreaCursor";
 
 var index_parts = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  Decrement: NumberFieldDecrement,
-  Group: NumberFieldGroup,
-  Increment: NumberFieldIncrement,
-  Input: NumberFieldInput,
-  Root: NumberFieldRoot,
+  Decrement: NumberFieldInput.NumberFieldDecrement,
+  Group: NumberFieldInput.NumberFieldGroup,
+  Increment: NumberFieldInput.NumberFieldIncrement,
+  Input: NumberFieldInput.NumberFieldInput,
+  Root: NumberFieldInput.NumberFieldRoot,
   ScrubArea: NumberFieldScrubArea,
   ScrubAreaCursor: NumberFieldScrubAreaCursor
 });