@jobber/components 7.10.0 → 7.11.0

package/dist/unstyledPrimitives/index.mjs

@@ -1,11 +1,15 @@
-import { f as useDialogRootContext, aV as useDrawerProviderContext, u as useIsoLayoutEffect, aW as DrawerBackdropCssVars, aX as DrawerPopupCssVars, e as useStableCallback, aY as DrawerProviderContext, aZ as CommonPopupDataAttributes, ae as popupStateMapping, ac as transitionStatusMapping, a_ as useDialogPortalContext, a$ as DialogStore, g as createChangeEventDetails, aF as imperativeAction, B as ownerDocument, y as contains, b0 as clamp, q as getTarget, b1 as useDrawerRootContext, l as useTimeout, aU as useTriggerRegistration, b2 as DrawerPopupDataAttributes, b3 as swipe, b4 as useDrawerSnapPoints, k as useAnimationFrame, b5 as DrawerViewportContext, b6 as BASE_UI_SWIPE_IGNORE_SELECTOR, b7 as TransitionStatusDataAttributes, b8 as DRAWER_CONTENT_ATTRIBUTE, a as DrawerBackdrop, c as DrawerContent, b as DrawerPopup, D as DrawerPortal, d as DrawerRoot, H as triggerHover, ar as useControlled, ab as itemPress, as as useTransitionStatus, af as useOpenChangeComplete, ak as useAnimationsFinished, an as inertValue, au as createSelector, b9 as useStore, J as useValueAsRef, aB as useOpenInteractionType, ba as createGenericEventDetails, bb as inputClear, bc as inputChange, a1 as focusOut, ah as outsidePress, bd as useValueChanged, be as none, bf as inputPress, aH as useDismiss, a8 as useInteractions, az as useOnFirstRender, bg as visuallyHiddenInput, bh as visuallyHidden, bi as Store, aR as pressableTriggerOpenStateMapping, Q as stopEvent, R as listNavigation, h as closePress, bj as isAndroid, bk as isFirefox, C as escapeKey, aa as triggerOpenStateMapping, bl as clearPress, aj as FloatingPortal, aE as useScrollLock, am as InternalBackdrop, ap as DROPDOWN_COLLISION_AVOIDANCE, ai as FloatingFocusManager, S as SafeReact, bm as chipRemovePress, E as useOnMount, G as Timeout, bn as isIOS, bo as inputBlur, bp as inputPaste, bq as incrementPress, br as decrementPress, bs as keyboard, bt as scrub, bu as isWebKit } from '../DrawerRoot-es.js';
-import { u as useBaseUiId, b as DrawerClose, a as DrawerTitle, D as DrawerTrigger, p as useMenuRootContext, q as useMenuPositionerContext, r as useContextMenuRootContext, s as useCompositeListItem, t as useMenuItem, R as REGULAR_ITEM, v as itemMapping, w as useDirection, x as MenuStore, m as MenuGroup, o as MenuGroupLabel, d as MenuItem, c as MenuLinkItem, k as MenuPopup, i as MenuPortal, j as MenuPositioner, l as MenuRadioGroup, e as MenuRadioItem, f as MenuRadioItemIndicator, h as MenuRoot, n as MenuSubmenuRoot, g as MenuSubmenuTrigger, M as MenuTrigger, y as useFloatingRootContext, z as useClick, A as useListNavigation, B as useTypeahead, C as useButton, E as getPseudoElementBounds, F as CompositeList, G as useAnchorPositioning, H as getDisabledMountTransitionStyles, I as IndexGuessBehavior, J as error } from '../MenuSubmenuTrigger-es.js';
+import { u as useDialogRootContext, am as useDrawerProviderContext, an as DrawerBackdropCssVars, ao as DrawerPopupCssVars, ap as DrawerProviderContext, aq as CommonPopupDataAttributes, N as popupStateMapping, ar as useDialogPortalContext, as as DialogStore, l as contains, g as getTarget, at as useDrawerRootContext, al as useTriggerRegistration, au as DrawerPopupDataAttributes, av as useDrawerSnapPoints, aw as DrawerViewportContext, ax as BASE_UI_SWIPE_IGNORE_SELECTOR, ay as DRAWER_CONTENT_ATTRIBUTE, a as DrawerBackdrop, c as DrawerContent, b as DrawerPopup, D as DrawerPortal, d as DrawerRoot, V as inertValue, Z as createSelector, az as useStore, a4 as useOpenInteractionType, a9 as useDismiss, J as useInteractions, a2 as useOnFirstRender, aA as Store, ai as pressableTriggerOpenStateMapping, L as triggerOpenStateMapping, R as FloatingPortal, a7 as useScrollLock, U as InternalBackdrop, X as DROPDOWN_COLLISION_AVOIDANCE, Q as FloatingFocusManager } from '../DrawerRoot-es.js';
+import { b as DrawerClose, a as DrawerTitle, D as DrawerTrigger, u as useMenuRootContext, p as useMenuPositionerContext, q as useContextMenuRootContext, r as useCompositeListItem, s as useMenuItem, R as REGULAR_ITEM, t as itemMapping, v as useDirection, w as MenuStore, m as MenuGroup, o as MenuGroupLabel, d as MenuItem, c as MenuLinkItem, k as MenuPopup, i as MenuPortal, j as MenuPositioner, l as MenuRadioGroup, e as MenuRadioItem, f as MenuRadioItemIndicator, h as MenuRoot, n as MenuSubmenuRoot, g as MenuSubmenuTrigger, M as MenuTrigger, x as useFloatingRootContext, y as useClick, z as useListNavigation, A as useTypeahead, B as getPseudoElementBounds, C as CompositeList, E as useAnchorPositioning, F as getDisabledMountTransitionStyles, I as IndexGuessBehavior } from '../MenuSubmenuTrigger-es.js';
 import * as React from 'react';
-import { u as useRenderElement, m as mergeProps, f as formatErrorMessage, N as NOOP, E as EMPTY_OBJECT, b as useRefWithInit, d as EMPTY_ARRAY, c as useMergedRefs } from '../useRenderElement-es.js';
+import { u as useRenderElement, m as mergeProps, f as formatErrorMessage, N as NOOP, E as EMPTY_OBJECT, d as EMPTY_ARRAY, b as useRefWithInit, c as useMergedRefs } from '../useRenderElement-es.js';
+import { u as useBaseUiId, a as useButton, e as error } from '../useBaseUiId-es.js';
+import { u as useIsoLayoutEffect, a as useStableCallback, t as transitionStatusMapping, k as createChangeEventDetails, V as imperativeAction, s as ownerDocument, g as clamp, c as useTimeout, a3 as swipe, D as useAnimationFrame, X as TransitionStatusDataAttributes, K as triggerHover, h as useControlled, P as itemPress, d as useTransitionStatus, e as useOpenChangeComplete, R as useAnimationsFinished, i as useValueAsRef, r as createGenericEventDetails, o as inputClear, m as inputChange, M as focusOut, Q as outsidePress, y as useValueChanged, n as none, a4 as inputPress, v as visuallyHiddenInput, l as visuallyHidden, z as stopEvent, L as listNavigation, B as closePress, a1 as isAndroid, a5 as isFirefox, J as escapeKey, a6 as clearPress, S as SafeReact, a7 as chipRemovePress, a8 as scrub, _ as isWebKit } from '../useValueChanged-es.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { a as isHTMLElement, k as getComputedStyle, b as isElement, I as getWindow, L as round } from '../index.esm-es.js';
+import { a as isHTMLElement, f as getComputedStyle, b as isElement, k as getWindow } from '../floating-ui.utils.dom-es.js';
 import * as ReactDOM from 'react-dom';
+import { y as round } from '../index.esm-es.js';
 import { S as Separator } from '../Separator-es.js';
+import { a as useFormContext, b as useFieldRootContext, i as useLabelableId, j as useField, f as fieldValidityMapping, u as useLabelableContext, k as DEFAULT_FIELD_STATE_ATTRIBUTES, l as useNumberFieldRootContext, m as DEFAULT_STEP, s as stateAttributesMapping$9, h as NumberFieldDecrement, c as NumberFieldGroup, e as NumberFieldIncrement, d as NumberFieldInput, N as NumberFieldRoot } from '../NumberFieldInput-es.js';
 import '../floating-ui.react-dom-es.js';
 
 /**
@@ -43,7 +47,7 @@ if (process.env.NODE_ENV !== "production") DialogDescription.displayName = "Dial
  */
 const DrawerDescription = DialogDescription;
 
-const stateAttributesMapping$a = {
+const stateAttributesMapping$8 = {
   active(value) {
     if (value) {
       return {
@@ -113,12 +117,12 @@ const DrawerIndent = /*#__PURE__*/React.forwardRef(function DrawerIndent(compone
         [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 {
@@ -152,21 +156,11 @@ const DrawerIndentBackground = /*#__PURE__*/React.forwardRef(function DrawerInde
     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.useState({});
-  return React.useCallback(() => {
-    setState({});
-  }, []);
-}
-
 function DrawerProvider(props) {
   const {
     children
@@ -278,7 +272,7 @@ let DialogViewportDataAttributes = function (DialogViewportDataAttributes) {
   return DialogViewportDataAttributes;
 }({});
 
-const stateAttributesMapping$8 = {
+const stateAttributesMapping$6 = {
   ...popupStateMapping,
   ...transitionStatusMapping,
   nested(value) {
@@ -327,7 +321,7 @@ const DialogViewport = /*#__PURE__*/React.forwardRef(function DialogViewport(com
     enabled: shouldRender,
     state,
     ref: [forwardedRef, store.useStateSetter('viewportElement')],
-    stateAttributesMapping: stateAttributesMapping$8,
+    stateAttributesMapping: stateAttributesMapping$6,
     props: [{
       role: 'presentation',
       hidden: !mounted,
@@ -1416,7 +1410,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;
   },
@@ -1721,7 +1715,7 @@ const DrawerSwipeArea = /*#__PURE__*/React.forwardRef(function DrawerSwipeArea(c
   return useRenderElement('div', componentProps, {
     state,
     ref: [forwardedRef, swipeAreaRef, registerTrigger],
-    stateAttributesMapping: stateAttributesMapping$7,
+    stateAttributesMapping: stateAttributesMapping$5,
     props: [{
       role: 'presentation',
       'aria-hidden': true,
@@ -2787,7 +2781,7 @@ const MenuArrow = /*#__PURE__*/React.forwardRef(function MenuArrow(componentProp
 });
 if (process.env.NODE_ENV !== "production") MenuArrow.displayName = "MenuArrow";
 
-const stateAttributesMapping$6 = {
+const stateAttributesMapping$4 = {
   ...popupStateMapping,
   ...transitionStatusMapping
 };
@@ -2819,7 +2813,7 @@ const MenuBackdrop = /*#__PURE__*/React.forwardRef(function MenuBackdrop(compone
   return useRenderElement('div', componentProps, {
     ref: contextMenuContext?.backdropRef ? [forwardedRef, contextMenuContext.backdropRef] : forwardedRef,
     state,
-    stateAttributesMapping: stateAttributesMapping$6,
+    stateAttributesMapping: stateAttributesMapping$4,
     props: [{
       role: 'presentation',
       hidden: !mounted,
@@ -3438,7 +3432,7 @@ let MenuViewportCssVars = /*#__PURE__*/function (MenuViewportCssVars) {
   return MenuViewportCssVars;
 }({});
 
-const stateAttributesMapping$5 = {
+const stateAttributesMapping$3 = {
   activationDirection: value => value ? {
     'data-activation-direction': value
   } : null
@@ -3486,7 +3480,7 @@ const MenuViewport = /*#__PURE__*/React.forwardRef(function MenuViewport(compone
     props: [elementProps, {
       children: childrenToRender
     }],
-    stateAttributesMapping: stateAttributesMapping$5
+    stateAttributesMapping: stateAttributesMapping$3
   });
 });
 if (process.env.NODE_ENV !== "production") MenuViewport.displayName = "MenuViewport";
@@ -3830,299 +3824,6 @@ const selectors = {
   submitOnItemClick: 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.createContext({
-  invalid: undefined,
-  name: undefined,
-  validityData: {
-    state: DEFAULT_VALIDITY_STATE,
-    errors: [],
-    error: '',
-    value: '',
-    initialValue: null
-  },
-  setValidityData: NOOP,
-  disabled: undefined,
-  touched: DEFAULT_FIELD_STATE_ATTRIBUTES.touched,
-  setTouched: NOOP,
-  dirty: DEFAULT_FIELD_STATE_ATTRIBUTES.dirty,
-  setDirty: NOOP,
-  filled: DEFAULT_FIELD_STATE_ATTRIBUTES.filled,
-  setFilled: NOOP,
-  focused: DEFAULT_FIELD_STATE_ATTRIBUTES.focused,
-  setFocused: NOOP,
-  validate: () => null,
-  validationMode: 'onSubmit',
-  validationDebounceTime: 0,
-  shouldValidateOnChange: () => false,
-  state: DEFAULT_FIELD_ROOT_STATE,
-  markedDirtyRef: {
-    current: false
-  },
-  validation: {
-    getValidationProps: (props = EMPTY_OBJECT) => props,
-    getInputValidationProps: (props = EMPTY_OBJECT) => props,
-    inputRef: {
-      current: null
-    },
-    commit: async () => {}
-  }
-});
-if (process.env.NODE_ENV !== "production") FieldRootContext.displayName = "FieldRootContext";
-function useFieldRootContext(optional = true) {
-  const context = React.useContext(FieldRootContext);
-  if (context.setValidityData === NOOP && !optional) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: FieldRootContext is missing. Field parts must be placed within <Field.Root>.' : 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.createContext({
-  formRef: {
-    current: {
-      fields: new Map()
-    }
-  },
-  errors: {},
-  clearErrors: NOOP,
-  validationMode: 'onSubmit',
-  submitAttemptedRef: {
-    current: false
-  }
-});
-if (process.env.NODE_ENV !== "production") FormContext.displayName = "FormContext";
-function useFormContext() {
-  return React.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 = useStableCallback(params.getValue);
-  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]);
-  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.flushSync(() => commit(nextValue));
-        }
-      }
-    });
-  }, [commit, controlRef, enabled, formRef, getValue, id, invalid, markedDirtyRef, name, validityData, value]);
-  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.createContext({
-  controlId: undefined,
-  registerControlId: NOOP,
-  labelId: undefined,
-  setLabelId: NOOP,
-  messageIds: [],
-  setMessageIds: NOOP,
-  getDescriptionProps: externalProps => externalProps
-});
-if (process.env.NODE_ENV !== "production") LabelableContext.displayName = "LabelableContext";
-function useLabelableContext() {
-  return React.useContext(LabelableContext);
-}
-
-function useLabelableId(params = {}) {
-  const {
-    id,
-    implicit = false,
-    controlRef
-  } = params;
-  const {
-    controlId,
-    registerControlId
-  } = useLabelableContext();
-  const defaultId = useBaseUiId(id);
-  const controlIdForEffect = implicit ? controlId : undefined;
-  const controlSourceRef = useRefWithInit(() => Symbol('labelable-control'));
-  const hasRegisteredRef = React.useRef(false);
-  const hadExplicitIdRef = React.useRef(id != null);
-  const unregisterControlId = useStableCallback(() => {
-    if (!hasRegisteredRef.current || registerControlId === NOOP) {
-      return;
-    }
-    hasRegisteredRef.current = false;
-    registerControlId(controlSourceRef.current, undefined);
-  });
-  useIsoLayoutEffect(() => {
-    if (registerControlId === NOOP) {
-      return undefined;
-    }
-    let nextId;
-    if (implicit) {
-      const elem = controlRef?.current;
-      if (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.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:
@@ -5945,7 +5646,7 @@ const ComboboxIcon = /*#__PURE__*/React.forwardRef(function ComboboxIcon(compone
 });
 if (process.env.NODE_ENV !== "production") ComboboxIcon.displayName = "ComboboxIcon";
 
-const stateAttributesMapping$4 = {
+const stateAttributesMapping$2 = {
   ...transitionStatusMapping,
   ...triggerOpenStateMapping
 };
@@ -6041,7 +5742,7 @@ const ComboboxClear = /*#__PURE__*/React.forwardRef(function ComboboxClear(compo
         store.state.inputRef.current?.focus();
       }
     }, elementProps, getButtonProps],
-    stateAttributesMapping: stateAttributesMapping$4
+    stateAttributesMapping: stateAttributesMapping$2
   });
   const shouldRender = keepMounted || mounted;
   if (!shouldRender) {
@@ -6237,7 +5938,7 @@ const ComboboxPortal = /*#__PURE__*/React.forwardRef(function ComboboxPortal(pro
 });
 if (process.env.NODE_ENV !== "production") ComboboxPortal.displayName = "ComboboxPortal";
 
-const stateAttributesMapping$3 = {
+const stateAttributesMapping$1 = {
   ...popupStateMapping,
   ...transitionStatusMapping
 };
@@ -6263,7 +5964,7 @@ const ComboboxBackdrop = /*#__PURE__*/React.forwardRef(function ComboboxBackdrop
   return useRenderElement('div', componentProps, {
     state,
     ref: forwardedRef,
-    stateAttributesMapping: stateAttributesMapping$3,
+    stateAttributesMapping: stateAttributesMapping$1,
     props: [{
       role: 'presentation',
       hidden: !mounted,
@@ -6381,7 +6082,7 @@ const ComboboxPositioner = /*#__PURE__*/React.forwardRef(function ComboboxPositi
 });
 if (process.env.NODE_ENV !== "production") ComboboxPositioner.displayName = "ComboboxPositioner";
 
-const stateAttributesMapping$2 = {
+const stateAttributesMapping = {
   ...popupStateMapping,
   ...transitionStatusMapping
 };
@@ -6442,7 +6143,7 @@ const ComboboxPopup = /*#__PURE__*/React.forwardRef(function ComboboxPopup(compo
         }
       }
     }, getDisabledMountTransitionStyles(transitionStatus), elementProps],
-    stateAttributesMapping: stateAttributesMapping$2
+    stateAttributesMapping
   });
 
   // Default initial focus logic:
@@ -7322,1541 +7023,65 @@ 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 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 = useRefWithInit(Interval.create).current;
-  useOnMount(timeout.disposeEffect);
-  return timeout;
-}
-
-const NumberFieldRootContext = /*#__PURE__*/React.createContext(undefined);
-if (process.env.NODE_ENV !== "production") NumberFieldRootContext.displayName = "NumberFieldRootContext";
-function useNumberFieldRootContext() {
-  const context = React.useContext(NumberFieldRootContext);
+const NumberFieldScrubAreaContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") NumberFieldScrubAreaContext.displayName = "NumberFieldScrubAreaContext";
+function useNumberFieldScrubAreaContext() {
+  const context = React.useContext(NumberFieldScrubAreaContext);
   if (context === undefined) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: NumberFieldRootContext is missing. NumberField parts must be placed within <NumberField.Root>.' : formatErrorMessage(43));
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: NumberFieldScrubAreaContext is missing. NumberFieldScrubArea parts must be placed within <NumberField.ScrubArea>.' : formatErrorMessage(44));
   }
   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;
+// Calculates the viewport rect for the virtual cursor.
+function getViewportRect(teleportDistance, scrubAreaEl) {
+  const win = getWindow(scrubAreaEl);
+  const rect = scrubAreaEl.getBoundingClientRect();
+  if (rect && teleportDistance != null) {
+    return {
+      x: rect.left - teleportDistance / 2,
+      y: rect.top - teleportDistance / 2,
+      width: rect.right + teleportDistance / 2,
+      height: rect.bottom + teleportDistance / 2
+    };
   }
-  if (Number.isNaN(num)) {
-    return null;
+  const vV = win.visualViewport;
+  if (vV) {
+    return {
+      x: vV.offsetLeft,
+      y: vV.offsetTop,
+      width: vV.offsetLeft + vV.width,
+      height: vV.offsetTop + vV.height
+    };
   }
-  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
+    x: 0,
+    y: 0,
+    width: win.document.documentElement.clientWidth,
+    height: win.document.documentElement.clientHeight
   };
 }
-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 ? 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;
+// 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 = getWindow(element).visualViewport;
+  if (!vV) {
+    return () => {};
+  }
+  function handleVisualResize() {
+    if (vV) {
+      visualScaleRef.current = vV.scale;
     }
-    const snappedValue = snapToStep(clampedValue, base, step, small ? 'nearest' : 'directional');
-    return removeFloatingPointErrors(snappedValue, format);
   }
-  return removeFloatingPointErrors(clampedValue, format);
+  handleVisualResize();
+  vV.addEventListener('resize', handleVisualResize);
+  return () => {
+    vV.removeEventListener('resize', handleVisualResize);
+  };
 }
 
-const NumberFieldRoot = /*#__PURE__*/React.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.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.useRef(null);
-  const hiddenInputRef = useMergedRefs(inputRefProp, validation.inputRef);
-  const id = useLabelableId({
-    id: idProp
-  });
-  const [valueUnwrapped, setValueUnwrapped] = useControlled({
-    controlled: valueProp,
-    default: defaultValue,
-    name: 'NumberField',
-    state: 'value'
-  });
-  const value = valueUnwrapped ?? null;
-  const valueRef = useValueAsRef(value);
-  useIsoLayoutEffect(() => {
-    setFilled(value !== null);
-  }, [setFilled, value]);
-  const forceRender = useForcedRerendering();
-  const formatOptionsRef = useValueAsRef(format);
-  const hasPendingCommitRef = React.useRef(false);
-  const onValueCommitted = useStableCallback((nextValue, eventDetails) => {
-    hasPendingCommitRef.current = false;
-    onValueCommittedProp?.(nextValue, eventDetails);
-  });
-  const startTickTimeout = useTimeout();
-  const tickInterval = useInterval();
-  const intentionalTouchCheckTimeout = useTimeout();
-  const isPressedRef = React.useRef(false);
-  const movesAfterTouchRef = React.useRef(0);
-  const allowInputSyncRef = React.useRef(true);
-  const lastChangedValueRef = React.useRef(null);
-  const unsubscribeFromGlobalContextMenuRef = React.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.useState(() => {
-    if (valueProp !== undefined) {
-      return getControlledInputValue(value, locale, format);
-    }
-    return formatNumber(value, locale, format);
-  });
-  const [inputMode, setInputMode] = React.useState('numeric');
-  const getAllowedNonNumericKeys = 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 = useStableCallback(event => {
-    if (event?.altKey) {
-      return smallStep;
-    }
-    if (event?.shiftKey) {
-      return largeStep;
-    }
-    return step;
-  });
-  const setValue = 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 === inputChange || reason === inputBlur || reason === inputPaste || reason === inputClear || reason === 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 === inputChange || details.reason === inputClear || details.reason === inputBlur || details.reason === inputPaste || details.reason === 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 = 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, createChangeEventDetails(reason, nativeEvent, undefined, {
-      direction
-    }));
-  });
-  const stopAutoChange = useStableCallback(() => {
-    intentionalTouchCheckTimeout.clear();
-    startTickTimeout.clear();
-    tickInterval.clear();
-    unsubscribeFromGlobalContextMenuRef.current();
-    movesAfterTouchRef.current = 0;
-  });
-  const startAutoChange = useStableCallback((isIncrement, triggerEvent) => {
-    stopAutoChange();
-    if (!inputRef.current) {
-      return;
-    }
-    const win = 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 ? incrementPress : decrementPress;
-      onValueCommitted(committed, 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
-  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);
-    }
-  });
-  useIsoLayoutEffect(function setDynamicInputModeForIOS() {
-    if (!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.useEffect(() => {
-    return () => stopAutoChange();
-  }, [stopAutoChange]);
-
-  // The `onWheel` prop can't be prevented, so we need to use a global event listener.
-  React.useEffect(function registerElementWheelListener() {
-    const element = inputRef.current;
-    if (disabled || readOnly || !allowWheelScrub || !element) {
-      return undefined;
-    }
-    function handleWheel(event) {
-      if (
-      // Allow pinch-zooming.
-      event.ctrlKey || 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.useMemo(() => ({
-    ...fieldState,
-    disabled,
-    readOnly,
-    required,
-    value,
-    inputValue,
-    scrubbing: isScrubbing
-  }), [fieldState, disabled, readOnly, required, value, inputValue, isScrubbing]);
-  const contextValue = React.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('div', componentProps, {
-    ref: forwardedRef,
-    state,
-    props: elementProps,
-    stateAttributesMapping: stateAttributesMapping$1
-  });
-  return /*#__PURE__*/jsxs(NumberFieldRootContext.Provider, {
-    value: contextValue,
-    children: [element, /*#__PURE__*/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 = createChangeEventDetails(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 ? visuallyHiddenInput : 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.forwardRef(function NumberFieldGroup(componentProps, forwardedRef) {
-  const {
-    render,
-    className,
-    ...elementProps
-  } = componentProps;
-  const {
-    state
-  } = useNumberFieldRootContext();
-  const element = 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.useRef({
-    x: 0,
-    y: 0
-  });
-  const isTouchingButtonRef = React.useRef(false);
-  const ignoreClickRef = React.useRef(false);
-  const pointerTypeRef = React.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, 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, 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.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
-  } = useButton({
-    disabled,
-    native: nativeButton,
-    focusableWhenDisabled: true
-  });
-  const buttonState = React.useMemo(() => ({
-    ...state,
-    disabled
-  }), [state, disabled]);
-  const element = 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.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
-  } = useButton({
-    disabled,
-    native: nativeButton,
-    focusableWhenDisabled: true
-  });
-  const buttonState = React.useMemo(() => ({
-    ...state,
-    disabled
-  }), [state, disabled]);
-  const element = 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.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.useRef(false);
-  const blockRevalidationRef = React.useRef(false);
-  useField({
-    id,
-    commit: validation.commit,
-    value,
-    controlRef: inputRef,
-    name,
-    getValue: () => value ?? null
-  });
-  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, createChangeEventDetails(inputClear, event.nativeEvent));
-        if (validationMode === 'onBlur') {
-          validation.commit(null);
-        }
-        onValueCommitted(null, createGenericEventDetails(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 = createGenericEventDetails(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, createChangeEventDetails(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, createChangeEventDetails(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, createChangeEventDetails(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.
-      stopEvent(event);
-      const commitDetails = createGenericEventDetails(keyboard, nativeEvent);
-      if (event.key === 'ArrowUp') {
-        incrementValue(amount, {
-          direction: 1,
-          currentValue: parsedValue,
-          event: nativeEvent,
-          reason: keyboard
-        });
-        onValueCommitted(lastChangedValueRef.current ?? valueRef.current, commitDetails);
-      } else if (event.key === 'ArrowDown') {
-        incrementValue(amount, {
-          direction: -1,
-          currentValue: parsedValue,
-          event: nativeEvent,
-          reason: keyboard
-        });
-        onValueCommitted(lastChangedValueRef.current ?? valueRef.current, commitDetails);
-      } else if (event.key === 'Home' && min != null) {
-        setValue(min, createChangeEventDetails(keyboard, nativeEvent));
-        onValueCommitted(lastChangedValueRef.current ?? valueRef.current, commitDetails);
-      } else if (event.key === 'End' && max != null) {
-        setValue(max, createChangeEventDetails(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, createChangeEventDetails(inputPaste, event.nativeEvent));
-        setInputValue(pastedData);
-      }
-    }
-  };
-  const element = 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.createContext(undefined);
-if (process.env.NODE_ENV !== "production") NumberFieldScrubAreaContext.displayName = "NumberFieldScrubAreaContext";
-function useNumberFieldScrubAreaContext() {
-  const context = React.useContext(NumberFieldScrubAreaContext);
-  if (context === undefined) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: NumberFieldScrubAreaContext is missing. NumberFieldScrubArea parts must be placed within <NumberField.ScrubArea>.' : formatErrorMessage(44));
-  }
-  return context;
-}
-
-// Calculates the viewport rect for the virtual cursor.
-function getViewportRect(teleportDistance, scrubAreaEl) {
-  const win = getWindow(scrubAreaEl);
-  const rect = scrubAreaEl.getBoundingClientRect();
-  if (rect && teleportDistance != null) {
-    return {
-      x: rect.left - teleportDistance / 2,
-      y: rect.top - teleportDistance / 2,
-      width: rect.right + teleportDistance / 2,
-      height: rect.bottom + teleportDistance / 2
-    };
-  }
-  const vV = win.visualViewport;
-  if (vV) {
-    return {
-      x: vV.offsetLeft,
-      y: vV.offsetTop,
-      width: vV.offsetLeft + vV.width,
-      height: vV.offsetTop + vV.height
-    };
-  }
-  return {
-    x: 0,
-    y: 0,
-    width: win.document.documentElement.clientWidth,
-    height: win.document.documentElement.clientHeight
-  };
-}
-
-// 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 = getWindow(element).visualViewport;
-  if (!vV) {
-    return () => {};
-  }
-  function handleVisualResize() {
-    if (vV) {
-      visualScaleRef.current = vV.scale;
-    }
-  }
-  handleVisualResize();
-  vV.addEventListener('resize', handleVisualResize);
-  return () => {
-    vV.removeEventListener('resize', handleVisualResize);
-  };
-}
-
-const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function NumberFieldScrubArea(componentProps, forwardedRef) {
+const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function NumberFieldScrubArea(componentProps, forwardedRef) {
   const {
     render,
     className,
@@ -9089,7 +7314,7 @@ const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function NumberFieldS
     ref: [forwardedRef, scrubAreaRef],
     state,
     props: [defaultProps, elementProps],
-    stateAttributesMapping: stateAttributesMapping$1
+    stateAttributesMapping: stateAttributesMapping$9
   });
   const contextValue = React.useMemo(() => ({
     isScrubbing,
@@ -9147,7 +7372,7 @@ const NumberFieldScrubAreaCursor = /*#__PURE__*/React.forwardRef(function Number
         pointerEvents: 'none'
       }
     }, elementProps],
-    stateAttributesMapping: stateAttributesMapping$1
+    stateAttributesMapping: stateAttributesMapping$9
   });
   return element && /*#__PURE__*/ReactDOM.createPortal(element, ownerDocument(domElement).body);
 });