@redsift/design-system 11.6.0-muiv5-alpha.5 → 11.6.0-muiv5-alpha.7

package/_internal/NumberField.js

@@ -1,80 +1,3974 @@
-import { FocusEvent, KeyboardEvent, ChangeEvent } from 'react';
-import { b as TextFieldProps } from './types29.js';
-import { V as ValueOf, C as Comp } from './helpers.js';
+import { _ as _objectSpread2, a as _defineProperty, b as _objectWithoutProperties, d as _classPrivateFieldInitSpec, e as _classPrivateFieldSet, f as _classPrivateFieldGet, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { useState, useRef, useCallback, useEffect, useMemo, useContext, createContext, forwardRef } from 'react';
+import classNames from 'classnames';
+import { w as warnIfNoAccessibleLabelFound } from './warnIfNoAccessibleLabelFound.js';
+import styled, { css } from 'styled-components';
+import { i as baseStyling } from './styles4.js';
+import { T as Theme } from './colors.js';
+import { mdiMenuUp, mdiMenuDown } from '@redsift/icons';
+import { S as StyledIconButton } from './styles2.js';
+import { a as useSSRSafeId, u as useLocale } from './context2.js';
+import { N as NumberFormatter, u as useNumberFormatter } from './useNumberFormatter.js';
+import { u as useMessageFormatter } from './useMessageFormatter.js';
+import { b as useLayoutEffect, i as isFirefox, c as isMac, d as isWebKit, e as isIPad, f as useEffectEvent, g as isIOS, h as getOwnerDocument, j as isVirtualPointerEvent, k as isVirtualClick, l as getOwnerWindow, m as getInteractionModality, n as useFocus, s as setInteractionModality, a as useFocusWithin, o as isIPhone, p as isAndroid, u as useFocusRing } from './useFocusRing.js';
+import c from 'clsx';
+import { u as useTheme } from './useTheme.js';
+import { a as Icon } from './Icon2.js';
+import { F as Flexbox } from './Flexbox2.js';
+
+/* eslint-disable prefer-const */
+
+// copied from SSRProvider.tsx to reduce exports, if needed again, consider sharing
+let canUseDOM = Boolean(typeof window !== 'undefined' && window.document && window.document.createElement);
+let idsUpdaterMap = new Map();
+
+/**
+ * If a default is not provided, generate an id.
+ * @param defaultId - Default component id.
+ */
+function useId(defaultId) {
+  let [value, setValue] = useState(defaultId);
+  let nextId = useRef(null);
+  let res = useSSRSafeId(value);
+  let updateValue = useCallback(val => {
+    nextId.current = val;
+  }, []);
+  if (canUseDOM) {
+    idsUpdaterMap.set(res, updateValue);
+  }
+  useLayoutEffect(() => {
+    let r = res;
+    return () => {
+      idsUpdaterMap.delete(r);
+    };
+  }, [res]);
+
+  // This cannot cause an infinite loop because the ref is updated first.
+  // eslint-disable-next-line
+  useEffect(() => {
+    let newId = nextId.current;
+    if (newId) {
+      nextId.current = null;
+      setValue(newId);
+    }
+  });
+  return res;
+}
+
+/**
+ * Merges two ids.
+ * Different ids will trigger a side-effect and re-render components hooked up with `useId`.
+ */
+function mergeIds(idA, idB) {
+  if (idA === idB) {
+    return idA;
+  }
+  let setIdA = idsUpdaterMap.get(idA);
+  if (setIdA) {
+    setIdA(idB);
+    return idB;
+  }
+  let setIdB = idsUpdaterMap.get(idB);
+  if (setIdB) {
+    setIdB(idA);
+    return idA;
+  }
+  return idB;
+}
+
+/**
+ * Used to generate an id, and after render, check if that id is rendered so we know
+ * if we can use it in places such as labelledby.
+ * @param depArray - When to recalculate if the id is in the DOM.
+ */
+function useSlotId() {
+  let depArray = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  let id = useId();
+  let [resolvedId, setResolvedId] = useValueEffect(id);
+  let updateId = useCallback(() => {
+    setResolvedId(function* () {
+      yield id;
+      yield document.getElementById(id) ? id : undefined;
+    });
+  }, [id, setResolvedId]);
+  useLayoutEffect(updateId, [id, updateId, ...depArray]);
+  return resolvedId;
+}
+
+/* eslint-disable prefer-const */
+// @ts-nocheck
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/**
+ * Calls all functions in the order they were chained with the same arguments.
+ */
+function chain() {
+  for (var _len = arguments.length, callbacks = new Array(_len), _key = 0; _key < _len; _key++) {
+    callbacks[_key] = arguments[_key];
+  }
+  return function () {
+    for (let callback of callbacks) {
+      if (typeof callback === 'function') {
+        callback(...arguments);
+      }
+    }
+  };
+}
+
+// taken from: https://stackoverflow.com/questions/51603250/typescript-3-parameter-list-intersection-type/51604379#51604379
+
+// eslint-disable-next-line no-undef, @typescript-eslint/no-unused-vars
+
+/**
+ * Merges multiple props objects together. Event handlers are chained,
+ * classNames are combined, and ids are deduplicated - different ids
+ * will trigger a side-effect and re-render components hooked up with `useId`.
+ * For all other props, the last prop object overrides all previous ones.
+ * @param args - Multiple sets of props to merge together.
+ */
+function mergeProps() {
+  // Start with a base clone of the first argument. This is a lot faster than starting
+  // with an empty object and adding properties as we go.
+  let result = _objectSpread2({}, arguments.length <= 0 ? undefined : arguments[0]);
+  for (let i = 1; i < arguments.length; i++) {
+    let props = i < 0 || arguments.length <= i ? undefined : arguments[i];
+    for (let key in props) {
+      let a = result[key];
+      let b = props[key];
+
+      // Chain events
+      if (typeof a === 'function' && typeof b === 'function' &&
+      // This is a lot faster than a regex.
+      key[0] === 'o' && key[1] === 'n' && key.charCodeAt(2) >= /* 'A' */65 && key.charCodeAt(2) <= /* 'Z' */90) {
+        result[key] = chain(a, b);
+
+        // Merge classnames, sometimes classNames are empty string which eval to false, so we just need to do a type check
+      } else if ((key === 'className' || key === 'UNSAFE_className') && typeof a === 'string' && typeof b === 'string') {
+        result[key] = c(a, b);
+      } else if (key === 'id' && a && b) {
+        result.id = mergeIds(a, b);
+        // Override others
+      } else {
+        result[key] = b !== undefined ? b : a;
+      }
+    }
+  }
+  return result;
+}
+
+/* eslint-disable prefer-const */
+// @ts-nocheck
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+const DOMPropNames = new Set(['id']);
+const labelablePropNames = new Set(['aria-label', 'aria-labelledby', 'aria-describedby', 'aria-details']);
+
+// See LinkDOMProps in dom.d.ts.
+const linkPropNames = new Set(['href', 'hrefLang', 'target', 'rel', 'download', 'ping', 'referrerPolicy']);
+const propRe = /^(data-.*)$/;
+
+/**
+ * Filters out all props that aren't valid DOM props or defined via override prop obj.
+ * @param props - The component props to be filtered.
+ * @param opts - Props to override.
+ */
+function filterDOMProps(props) {
+  let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  let {
+    labelable,
+    isLink,
+    propNames
+  } = opts;
+  let filteredProps = {};
+  for (const prop in props) {
+    if (Object.prototype.hasOwnProperty.call(props, prop) && (DOMPropNames.has(prop) || labelable && labelablePropNames.has(prop) || isLink && linkPropNames.has(prop) || propNames !== null && propNames !== void 0 && propNames.has(prop) || propRe.test(prop))) {
+      filteredProps[prop] = props[prop];
+    }
+  }
+  return filteredProps;
+}
+
+/* eslint-disable prefer-const */
+// @ts-nocheck
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// This is a polyfill for element.focus({preventScroll: true});
+// Currently necessary for Safari and old Edge:
+// https://caniuse.com/#feat=mdn-api_htmlelement_focus_preventscroll_option
+// See https://bugs.webkit.org/show_bug.cgi?id=178583
+//
+
+// Original licensing for the following methods can be found in the
+// NOTICE file in the root directory of this source tree.
+// See https://github.com/calvellido/focus-options-polyfill
+function focusWithoutScrolling(element) {
+  if (supportsPreventScroll()) {
+    element.focus({
+      preventScroll: true
+    });
+  } else {
+    let scrollableElements = getScrollableElements(element);
+    element.focus();
+    restoreScrollPosition(scrollableElements);
+  }
+}
+let supportsPreventScrollCached = null;
+function supportsPreventScroll() {
+  if (supportsPreventScrollCached == null) {
+    supportsPreventScrollCached = false;
+    try {
+      let focusElem = document.createElement('div');
+      focusElem.focus({
+        get preventScroll() {
+          supportsPreventScrollCached = true;
+          return true;
+        }
+      });
+    } catch (e) {
+      // Ignore
+    }
+  }
+  return supportsPreventScrollCached;
+}
+function getScrollableElements(element) {
+  let parent = element.parentNode;
+  let scrollableElements = [];
+  let rootScrollingElement = document.scrollingElement || document.documentElement;
+  while (parent instanceof HTMLElement && parent !== rootScrollingElement) {
+    if (parent.offsetHeight < parent.scrollHeight || parent.offsetWidth < parent.scrollWidth) {
+      scrollableElements.push({
+        element: parent,
+        scrollTop: parent.scrollTop,
+        scrollLeft: parent.scrollLeft
+      });
+    }
+    parent = parent.parentNode;
+  }
+  if (rootScrollingElement instanceof HTMLElement) {
+    scrollableElements.push({
+      element: rootScrollingElement,
+      scrollTop: rootScrollingElement.scrollTop,
+      scrollLeft: rootScrollingElement.scrollLeft
+    });
+  }
+  return scrollableElements;
+}
+function restoreScrollPosition(scrollableElements) {
+  for (let {
+    element,
+    scrollTop,
+    scrollLeft
+  } of scrollableElements) {
+    element.scrollTop = scrollTop;
+    element.scrollLeft = scrollLeft;
+  }
+}
+
+/* eslint-disable prefer-const */
+function openLink(target, modifiers) {
+  var _window$event, _window$event$type;
+  let setOpening = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  let {
+    metaKey,
+    ctrlKey,
+    altKey,
+    shiftKey
+  } = modifiers;
+
+  // Firefox does not recognize keyboard events as a user action by default, and the popup blocker
+  // will prevent links with target="_blank" from opening. However, it does allow the event if the
+  // Command/Control key is held, which opens the link in a background tab. This seems like the best we can do.
+  // See https://bugzilla.mozilla.org/show_bug.cgi?id=257870 and https://bugzilla.mozilla.org/show_bug.cgi?id=746640.
+  if (isFirefox() && (_window$event = window.event) !== null && _window$event !== void 0 && (_window$event$type = _window$event.type) !== null && _window$event$type !== void 0 && _window$event$type.startsWith('key') && target.target === '_blank') {
+    if (isMac()) {
+      metaKey = true;
+    } else {
+      ctrlKey = true;
+    }
+  }
+
+  // WebKit does not support firing click events with modifier keys, but does support keyboard events.
+  // https://github.com/WebKit/WebKit/blob/c03d0ac6e6db178f90923a0a63080b5ca210d25f/Source/WebCore/html/HTMLAnchorElement.cpp#L184
+  let event = isWebKit() && isMac() && !isIPad() && process.env.NODE_ENV !== 'test' ?
+  // @ts-ignore - keyIdentifier is a non-standard property, but it's what webkit expects
+  new KeyboardEvent('keydown', {
+    keyIdentifier: 'Enter',
+    metaKey,
+    ctrlKey,
+    altKey,
+    shiftKey
+  }) : new MouseEvent('click', {
+    metaKey,
+    ctrlKey,
+    altKey,
+    shiftKey,
+    bubbles: true,
+    cancelable: true
+  });
+  openLink.isOpening = setOpening;
+  focusWithoutScrolling(target);
+  target.dispatchEvent(event);
+  openLink.isOpening = false;
+}
+// https://github.com/parcel-bundler/parcel/issues/8724
+openLink.isOpening = false;
+
+/* eslint-disable prefer-const */
+// @ts-nocheck
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// We store a global list of elements that are currently transitioning,
+// mapped to a set of CSS properties that are transitioning for that element.
+// This is necessary rather than a simple count of transitions because of browser
+// bugs, e.g. Chrome sometimes fires both transitionend and transitioncancel rather
+// than one or the other. So we need to track what's actually transitioning so that
+// we can ignore these duplicate events.
+let transitionsByElement = new Map();
+
+// A list of callbacks to call once there are no transitioning elements.
+let transitionCallbacks = new Set();
+function setupGlobalEvents() {
+  if (typeof window === 'undefined') {
+    return;
+  }
+  function isTransitionEvent(event) {
+    return 'propertyName' in event;
+  }
+  let onTransitionStart = e => {
+    if (!isTransitionEvent(e) || !e.target) {
+      return;
+    }
+    // Add the transitioning property to the list for this element.
+    let transitions = transitionsByElement.get(e.target);
+    if (!transitions) {
+      transitions = new Set();
+      transitionsByElement.set(e.target, transitions);
+
+      // The transitioncancel event must be registered on the element itself, rather than as a global
+      // event. This enables us to handle when the node is deleted from the document while it is transitioning.
+      // In that case, the cancel event would have nowhere to bubble to so we need to handle it directly.
+      e.target.addEventListener('transitioncancel', onTransitionEnd, {
+        once: true
+      });
+    }
+    transitions.add(e.propertyName);
+  };
+  let onTransitionEnd = e => {
+    if (!isTransitionEvent(e) || !e.target) {
+      return;
+    }
+    // Remove property from list of transitioning properties.
+    let properties = transitionsByElement.get(e.target);
+    if (!properties) {
+      return;
+    }
+    properties.delete(e.propertyName);
+
+    // If empty, remove transitioncancel event, and remove the element from the list of transitioning elements.
+    if (properties.size === 0) {
+      e.target.removeEventListener('transitioncancel', onTransitionEnd);
+      transitionsByElement.delete(e.target);
+    }
+
+    // If no transitioning elements, call all of the queued callbacks.
+    if (transitionsByElement.size === 0) {
+      for (let cb of transitionCallbacks) {
+        cb();
+      }
+      transitionCallbacks.clear();
+    }
+  };
+  document.body.addEventListener('transitionrun', onTransitionStart);
+  document.body.addEventListener('transitionend', onTransitionEnd);
+}
+if (typeof document !== 'undefined') {
+  if (document.readyState !== 'loading') {
+    setupGlobalEvents();
+  } else {
+    document.addEventListener('DOMContentLoaded', setupGlobalEvents);
+  }
+}
+function runAfterTransition(fn) {
+  // Wait one frame to see if an animation starts, e.g. a transition on mount.
+  requestAnimationFrame(() => {
+    // If no transitions are running, call the function immediately.
+    // Otherwise, add it to a list of callbacks to run at the end of the animation.
+    if (transitionsByElement.size === 0) {
+      fn();
+    } else {
+      transitionCallbacks.add(fn);
+    }
+  });
+}
+
+/* eslint-disable prefer-const */
+function useGlobalListeners() {
+  let globalListeners = useRef(new Map());
+  let addGlobalListener = useCallback((eventTarget, type, listener, options) => {
+    // Make sure we remove the listener after it is called with the `once` option.
+    let fn = options !== null && options !== void 0 && options.once ? function () {
+      globalListeners.current.delete(listener);
+      listener(...arguments);
+    } : listener;
+    globalListeners.current.set(listener, {
+      type,
+      eventTarget,
+      fn,
+      options
+    });
+    eventTarget.addEventListener(type, listener, options);
+  }, []);
+  let removeGlobalListener = useCallback((eventTarget, type, listener, options) => {
+    var _globalListeners$curr;
+    let fn = ((_globalListeners$curr = globalListeners.current.get(listener)) === null || _globalListeners$curr === void 0 ? void 0 : _globalListeners$curr.fn) || listener;
+    eventTarget.removeEventListener(type, fn, options);
+    globalListeners.current.delete(listener);
+  }, []);
+  let removeAllGlobalListeners = useCallback(() => {
+    globalListeners.current.forEach((value, key) => {
+      removeGlobalListener(value.eventTarget, value.type, key, value.options);
+    });
+  }, [removeGlobalListener]);
+
+  // eslint-disable-next-line arrow-body-style
+  useEffect(() => {
+    return removeAllGlobalListeners;
+  }, [removeAllGlobalListeners]);
+  return {
+    addGlobalListener,
+    removeGlobalListener,
+    removeAllGlobalListeners
+  };
+}
+
+/* eslint-disable prefer-const */
+
+/**
+ * Merges aria-label and aria-labelledby into aria-labelledby when both exist.
+ * @param props - Aria label props.
+ * @param defaultLabel - Default value for aria-label when not present.
+ */
+function useLabels(props, defaultLabel) {
+  let {
+    id,
+    'aria-label': label,
+    'aria-labelledby': labelledBy
+  } = props;
+
+  // If there is both an aria-label and aria-labelledby,
+  // combine them by pointing to the element itself.
+  id = useId(id);
+  if (labelledBy && label) {
+    let ids = new Set([id, ...labelledBy.trim().split(/\s+/)]);
+    labelledBy = [...ids].join(' ');
+  } else if (labelledBy) {
+    labelledBy = labelledBy.trim().split(/\s+/).join(' ');
+  }
+
+  // If no labels are provided, use the default
+  if (!label && !labelledBy && defaultLabel) {
+    label = defaultLabel;
+  }
+  return {
+    id,
+    'aria-label': label,
+    'aria-labelledby': labelledBy
+  };
+}
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+// Syncs ref from context with ref passed to hook
+function useSyncRef(context, ref) {
+  useLayoutEffect(() => {
+    if (context && context.ref && ref) {
+      context.ref.current = ref.current;
+      return () => {
+        if (context.ref) {
+          context.ref.current = null;
+        }
+      };
+    }
+  });
+}
+
+/* eslint-disable prefer-const */
+function useEvent(ref, event, handler, options) {
+  let handleEvent = useEffectEvent(handler);
+  let isDisabled = handler == null;
+  useEffect(() => {
+    if (isDisabled || !ref.current) {
+      return;
+    }
+    let element = ref.current;
+    element.addEventListener(event, handleEvent, options);
+    return () => {
+      element.removeEventListener(event, handleEvent, options);
+    };
+  }, [ref, event, options, isDisabled, handleEvent]);
+}
+
+/* eslint-disable prefer-const */
+// This hook works like `useState`, but when setting the value, you pass a generator function
+// that can yield multiple values. Each yielded value updates the state and waits for the next
+// layout effect, then continues the generator. This allows sequential updates to state to be
+// written linearly.
+function useValueEffect(defaultValue) {
+  let [value, setValue] = useState(defaultValue);
+  let effect = useRef(null);
+
+  // Store the function in a ref so we can always access the current version
+  // which has the proper `value` in scope.
+  let nextRef = useEffectEvent(() => {
+    if (!effect.current) {
+      return;
+    }
+    // Run the generator to the next yield.
+    let newValue = effect.current.next();
+
+    // If the generator is done, reset the effect.
+    if (newValue.done) {
+      effect.current = null;
+      return;
+    }
+
+    // If the value is the same as the current value,
+    // then continue to the next yield. Otherwise,
+    // set the value in state and wait for the next layout effect.
+    if (value === newValue.value) {
+      nextRef();
+    } else {
+      setValue(newValue.value);
+    }
+  });
+  useLayoutEffect(() => {
+    // If there is an effect currently running, continue to the next yield.
+    if (effect.current) {
+      nextRef();
+    }
+  });
+  let queue = useEffectEvent(fn => {
+    effect.current = fn(value);
+    nextRef();
+  });
+  return [value, queue];
+}
+
+/* eslint-disable prefer-const */
+function useControlledState(value, defaultValue, onChange) {
+  let [stateValue, setStateValue] = useState(value || defaultValue);
+  let isControlledRef = useRef(value !== undefined);
+  let isControlled = value !== undefined;
+  useEffect(() => {
+    let wasControlled = isControlledRef.current;
+    if (wasControlled !== isControlled) {
+      console.warn(`WARN: A component changed from ${wasControlled ? 'controlled' : 'uncontrolled'} to ${isControlled ? 'controlled' : 'uncontrolled'}.`);
+    }
+    isControlledRef.current = isControlled;
+  }, [isControlled]);
+  let currentValue = isControlled ? value : stateValue;
+  let setValue = useCallback(function (value) {
+    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      args[_key - 1] = arguments[_key];
+    }
+    let onChangeCaller = function (value) {
+      if (onChange) {
+        if (!Object.is(currentValue, value)) {
+          for (var _len2 = arguments.length, onChangeArgs = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+            onChangeArgs[_key2 - 1] = arguments[_key2];
+          }
+          onChange(value, ...onChangeArgs);
+        }
+      }
+      if (!isControlled) {
+        // If uncontrolled, mutate the currentValue local variable so that
+        // calling setState multiple times with the same value only emits onChange once.
+        // We do not use a ref for this because we specifically _do_ want the value to
+        // reset every render, and assigning to a ref in render breaks aborted suspended renders.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        currentValue = value;
+      }
+    };
+    if (typeof value === 'function') {
+      console.warn('We can not support a function callback. See Github Issues for details https://github.com/adobe/react-spectrum/issues/2320');
+      // this supports functional updates https://reactjs.org/docs/hooks-reference.html#functional-updates
+      // when someone using useControlledState calls setControlledState(myFunc)
+      // this will call our useState setState with a function as well which invokes myFunc and calls onChange with the value from myFunc
+      // if we're in an uncontrolled state, then we also return the value of myFunc which to setState looks as though it was just called with myFunc from the beginning
+      // otherwise we just return the controlled value, which won't cause a rerender because React knows to bail out when the value is the same
+      let updateFunction = function (oldValue) {
+        for (var _len3 = arguments.length, functionArgs = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
+          functionArgs[_key3 - 1] = arguments[_key3];
+        }
+        let interceptedValue = value(isControlled ? currentValue : oldValue, ...functionArgs);
+        onChangeCaller(interceptedValue, ...args);
+        if (!isControlled) {
+          return interceptedValue;
+        }
+        return oldValue;
+      };
+      setStateValue(updateFunction);
+    } else {
+      if (!isControlled) {
+        setStateValue(value);
+      }
+      onChangeCaller(value, ...args);
+    }
+  }, [isControlled, currentValue, onChange]);
+  return [currentValue, setValue];
+}
+
+/* eslint-disable prefer-const */
+// @ts-nocheck
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/**
+ * Takes a value and forces it to the closest min/max if it's outside. Also forces it to the closest valid step.
+ */
+function clamp(value) {
+  let min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : -Infinity;
+  let max = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : Infinity;
+  let newValue = Math.min(Math.max(value, min), max);
+  return newValue;
+}
+function roundToStepPrecision(value, step) {
+  let roundedValue = value;
+  let stepString = step.toString();
+  let pointIndex = stepString.indexOf('.');
+  let precision = pointIndex >= 0 ? stepString.length - pointIndex : 0;
+  if (precision > 0) {
+    let pow = Math.pow(10, precision);
+    roundedValue = Math.round(roundedValue * pow) / pow;
+  }
+  return roundedValue;
+}
+function snapValueToStep(value, min, max, step) {
+  min = Number(min);
+  max = Number(max);
+  let remainder = (value - (isNaN(min) ? 0 : min)) % step;
+  let snappedValue = roundToStepPrecision(Math.abs(remainder) * 2 >= step ? value + Math.sign(remainder) * (step - Math.abs(remainder)) : value - remainder, step);
+  if (!isNaN(min)) {
+    if (snappedValue < min) {
+      snappedValue = min;
+    } else if (!isNaN(max) && snappedValue > max) {
+      snappedValue = min + Math.floor(roundToStepPrecision((max - min) / step, step)) * step;
+    }
+  } else if (!isNaN(max) && snappedValue > max) {
+    snappedValue = Math.floor(roundToStepPrecision(max / step, step)) * step;
+  }
+
+  // correct floating point behavior by rounding to step precision
+  snappedValue = roundToStepPrecision(snappedValue, step);
+  return snappedValue;
+}
+
+/* eslint-disable prefer-const */
+function useFormReset(ref, initialValue, onReset) {
+  let resetValue = useRef(initialValue);
+  let handleReset = useEffectEvent(() => {
+    if (onReset) {
+      onReset(resetValue.current);
+    }
+  });
+  useEffect(() => {
+    var _ref$current;
+    let form = ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.form;
+    form === null || form === void 0 ? void 0 : form.addEventListener('reset', handleReset);
+    return () => {
+      form === null || form === void 0 ? void 0 : form.removeEventListener('reset', handleReset);
+    };
+  }, [ref, handleReset]);
+}
+
+const CURRENCY_SIGN_REGEX = new RegExp('^.*\\(.*\\).*$');
+const NUMBERING_SYSTEMS = ['latn', 'arab', 'hanidec'];
+
+/**
+ * A NumberParser can be used to perform locale-aware parsing of numbers from Unicode strings,
+ * as well as validation of partial user input. It automatically detects the numbering system
+ * used in the input, and supports parsing decimals, percentages, currency values, and units
+ * according to the locale.
+ */
+class NumberParser {
+  constructor(locale) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    _defineProperty(this, "locale", void 0);
+    _defineProperty(this, "options", void 0);
+    this.locale = locale;
+    this.options = options;
+  }
+
+  /**
+   * Parses the given string to a number. Returns NaN if a valid number could not be parsed.
+   */
+  parse(value) {
+    return getNumberParserImpl(this.locale, this.options, value).parse(value);
+  }
+
+  /**
+   * Returns whether the given string could potentially be a valid number. This should be used to
+   * validate user input as the user types. If a `minValue` or `maxValue` is provided, the validity
+   * of the minus/plus sign characters can be checked.
+   */
+  isValidPartialNumber(value, minValue, maxValue) {
+    return getNumberParserImpl(this.locale, this.options, value).isValidPartialNumber(value, minValue, maxValue);
+  }
+
+  /**
+   * Returns a numbering system for which the given string is valid in the current locale.
+   * If no numbering system could be detected, the default numbering system for the current
+   * locale is returned.
+   */
+  getNumberingSystem(value) {
+    return getNumberParserImpl(this.locale, this.options, value).options.numberingSystem;
+  }
+}
+const numberParserCache = new Map();
+function getNumberParserImpl(locale, options, value) {
+  // First try the default numbering system for the provided locale
+  let defaultParser = getCachedNumberParser(locale, options);
+
+  // If that doesn't match, and the locale doesn't include a hard coded numbering system,
+  // try each of the other supported numbering systems until we find one that matches.
+  if (!locale.includes('-nu-') && !defaultParser.isValidPartialNumber(value)) {
+    for (let numberingSystem of NUMBERING_SYSTEMS) {
+      if (numberingSystem !== defaultParser.options.numberingSystem) {
+        let parser = getCachedNumberParser(locale + (locale.includes('-u-') ? '-nu-' : '-u-nu-') + numberingSystem, options);
+        if (parser.isValidPartialNumber(value)) {
+          return parser;
+        }
+      }
+    }
+  }
+  return defaultParser;
+}
+function getCachedNumberParser(locale, options) {
+  let cacheKey = locale + (options ? Object.entries(options).sort((a, b) => a[0] < b[0] ? -1 : 1).join() : '');
+  let parser = numberParserCache.get(cacheKey);
+  if (!parser) {
+    parser = new NumberParserImpl(locale, options);
+    numberParserCache.set(cacheKey, parser);
+  }
+  return parser;
+}
+
+// The actual number parser implementation. Instances of this class are cached
+// based on the locale, options, and detected numbering system.
+class NumberParserImpl {
+  constructor(locale) {
+    var _this$options$minimum, _this$options$maximum;
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    _defineProperty(this, "formatter", void 0);
+    _defineProperty(this, "options", void 0);
+    _defineProperty(this, "symbols", void 0);
+    _defineProperty(this, "locale", void 0);
+    this.locale = locale;
+    this.formatter = new Intl.NumberFormat(locale, options);
+    this.options = this.formatter.resolvedOptions();
+    this.symbols = getSymbols(locale, this.formatter, this.options, options);
+    if (this.options.style === 'percent' && (((_this$options$minimum = this.options.minimumFractionDigits) !== null && _this$options$minimum !== void 0 ? _this$options$minimum : 0) > 18 || ((_this$options$maximum = this.options.maximumFractionDigits) !== null && _this$options$maximum !== void 0 ? _this$options$maximum : 0) > 18)) {
+      console.warn('NumberParser cannot handle percentages with greater than 18 decimal places, please reduce the number in your options.');
+    }
+  }
+  parse(value) {
+    // to parse the number, we need to remove anything that isn't actually part of the number, for example we want '-10.40' not '-10.40 USD'
+    let fullySanitizedValue = this.sanitize(value);
+    if (this.symbols.group) {
+      // Remove group characters, and replace decimal points and numerals with ASCII values.
+      fullySanitizedValue = replaceAll(fullySanitizedValue, this.symbols.group, '');
+    }
+    if (this.symbols.decimal) {
+      fullySanitizedValue = fullySanitizedValue.replace(this.symbols.decimal, '.');
+    }
+    if (this.symbols.minusSign) {
+      fullySanitizedValue = fullySanitizedValue.replace(this.symbols.minusSign, '-');
+    }
+    fullySanitizedValue = fullySanitizedValue.replace(this.symbols.numeral, this.symbols.index);
+    if (this.options.style === 'percent') {
+      // javascript is bad at dividing by 100 and maintaining the same significant figures, so perform it on the string before parsing
+      let isNegative = fullySanitizedValue.indexOf('-');
+      fullySanitizedValue = fullySanitizedValue.replace('-', '');
+      let index = fullySanitizedValue.indexOf('.');
+      if (index === -1) {
+        index = fullySanitizedValue.length;
+      }
+      fullySanitizedValue = fullySanitizedValue.replace('.', '');
+      if (index - 2 === 0) {
+        fullySanitizedValue = `0.${fullySanitizedValue}`;
+      } else if (index - 2 === -1) {
+        fullySanitizedValue = `0.0${fullySanitizedValue}`;
+      } else if (index - 2 === -2) {
+        fullySanitizedValue = '0.00';
+      } else {
+        fullySanitizedValue = `${fullySanitizedValue.slice(0, index - 2)}.${fullySanitizedValue.slice(index - 2)}`;
+      }
+      if (isNegative > -1) {
+        fullySanitizedValue = `-${fullySanitizedValue}`;
+      }
+    }
+    let newValue = fullySanitizedValue ? +fullySanitizedValue : NaN;
+    if (isNaN(newValue)) {
+      return NaN;
+    }
+    if (this.options.style === 'percent') {
+      var _this$options$minimum2, _this$options$maximum2;
+      // extra step for rounding percents to what our formatter would output
+      let options = _objectSpread2(_objectSpread2({}, this.options), {}, {
+        style: 'decimal',
+        minimumFractionDigits: Math.min(((_this$options$minimum2 = this.options.minimumFractionDigits) !== null && _this$options$minimum2 !== void 0 ? _this$options$minimum2 : 0) + 2, 20),
+        maximumFractionDigits: Math.min(((_this$options$maximum2 = this.options.maximumFractionDigits) !== null && _this$options$maximum2 !== void 0 ? _this$options$maximum2 : 0) + 2, 20)
+      });
+      return new NumberParser(this.locale, options).parse(new NumberFormatter(this.locale, options).format(newValue));
+    }
+
+    // accounting will always be stripped to a positive number, so if it's accounting and has a () around everything, then we need to make it negative again
+    if (this.options.currencySign === 'accounting' && CURRENCY_SIGN_REGEX.test(value)) {
+      newValue = -1 * newValue;
+    }
+    return newValue;
+  }
+  sanitize(value) {
+    // Remove literals and whitespace, which are allowed anywhere in the string
+    value = value.replace(this.symbols.literals, '');
+
+    // Replace the ASCII minus sign with the minus sign used in the current locale
+    // so that both are allowed in case the user's keyboard doesn't have the locale's minus sign.
+    if (this.symbols.minusSign) {
+      value = value.replace('-', this.symbols.minusSign);
+    }
+
+    // In arab numeral system, their decimal character is 1643, but most keyboards don't type that
+    // instead they use the , (44) character or apparently the (1548) character.
+    if (this.options.numberingSystem === 'arab') {
+      if (this.symbols.decimal) {
+        value = value.replace(',', this.symbols.decimal);
+        value = value.replace(String.fromCharCode(1548), this.symbols.decimal);
+      }
+      if (this.symbols.group) {
+        value = replaceAll(value, '.', this.symbols.group);
+      }
+    }
+
+    // fr-FR group character is char code 8239, but that's not a key on the french keyboard,
+    // so allow 'period' as a group char and replace it with a space
+    if (this.options.locale === 'fr-FR') {
+      value = replaceAll(value, '.', String.fromCharCode(8239));
+    }
+    return value;
+  }
+  isValidPartialNumber(value) {
+    let minValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : -Infinity;
+    let maxValue = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : Infinity;
+    value = this.sanitize(value);
+
+    // Remove minus or plus sign, which must be at the start of the string.
+    if (this.symbols.minusSign && value.startsWith(this.symbols.minusSign) && minValue < 0) {
+      value = value.slice(this.symbols.minusSign.length);
+    } else if (this.symbols.plusSign && value.startsWith(this.symbols.plusSign) && maxValue > 0) {
+      value = value.slice(this.symbols.plusSign.length);
+    }
+
+    // Numbers cannot start with a group separator
+    if (this.symbols.group && value.startsWith(this.symbols.group)) {
+      return false;
+    }
+
+    // Numbers that can't have any decimal values fail if a decimal character is typed
+    if (this.symbols.decimal && value.indexOf(this.symbols.decimal) > -1 && this.options.maximumFractionDigits === 0) {
+      return false;
+    }
+
+    // Remove numerals, groups, and decimals
+    if (this.symbols.group) {
+      value = replaceAll(value, this.symbols.group, '');
+    }
+    value = value.replace(this.symbols.numeral, '');
+    if (this.symbols.decimal) {
+      value = value.replace(this.symbols.decimal, '');
+    }
+
+    // The number is valid if there are no remaining characters
+    return value.length === 0;
+  }
+}
+const nonLiteralParts = new Set(['decimal', 'fraction', 'integer', 'minusSign', 'plusSign', 'group']);
+
+// This list is derived from https://www.unicode.org/cldr/charts/43/supplemental/language_plural_rules.html#comparison and includes
+// all unique numbers which we need to check in order to determine all the plural forms for a given locale.
+// See: https://github.com/adobe/react-spectrum/pull/5134/files#r1337037855 for used script
+const pluralNumbers = [0, 4, 2, 1, 11, 20, 3, 7, 100, 21, 0.1, 1.1];
+function getSymbols(locale, formatter, intlOptions, originalOptions) {
+  var _allParts$find$value, _allParts$find, _posAllParts$find, _decimalParts$find, _allParts$find2;
+  // formatter needs access to all decimal places in order to generate the correct literal strings for the plural set
+  let symbolFormatter = new Intl.NumberFormat(locale, _objectSpread2(_objectSpread2({}, intlOptions), {}, {
+    minimumSignificantDigits: 1,
+    maximumSignificantDigits: 21
+  }));
+  // Note: some locale's don't add a group symbol until there is a ten thousands place
+  let allParts = symbolFormatter.formatToParts(-10000.111);
+  let posAllParts = symbolFormatter.formatToParts(10000.111);
+  let pluralParts = pluralNumbers.map(n => symbolFormatter.formatToParts(n));
+  let minusSign = (_allParts$find$value = (_allParts$find = allParts.find(p => p.type === 'minusSign')) === null || _allParts$find === void 0 ? void 0 : _allParts$find.value) !== null && _allParts$find$value !== void 0 ? _allParts$find$value : '-';
+  let plusSign = (_posAllParts$find = posAllParts.find(p => p.type === 'plusSign')) === null || _posAllParts$find === void 0 ? void 0 : _posAllParts$find.value;
+
+  // Safari does not support the signDisplay option, but our number parser polyfills it.
+  // If no plus sign was returned, but the original options contained signDisplay, default to the '+' character.
+  // @ts-ignore
+  if (!plusSign && ((originalOptions === null || originalOptions === void 0 ? void 0 : originalOptions.signDisplay) === 'exceptZero' || (originalOptions === null || originalOptions === void 0 ? void 0 : originalOptions.signDisplay) === 'always')) {
+    plusSign = '+';
+  }
+
+  // If maximumSignificantDigits is 1 (the minimum) then we won't get decimal characters out of the above formatters
+  // Percent also defaults to 0 fractionDigits, so we need to make a new one that isn't percent to get an accurate decimal
+  let decimalParts = new Intl.NumberFormat(locale, _objectSpread2(_objectSpread2({}, intlOptions), {}, {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  })).formatToParts(0.001);
+  let decimal = (_decimalParts$find = decimalParts.find(p => p.type === 'decimal')) === null || _decimalParts$find === void 0 ? void 0 : _decimalParts$find.value;
+  let group = (_allParts$find2 = allParts.find(p => p.type === 'group')) === null || _allParts$find2 === void 0 ? void 0 : _allParts$find2.value;
+
+  // this set is also for a regex, it's all literals that might be in the string we want to eventually parse that
+  // don't contribute to the numerical value
+  let allPartsLiterals = allParts.filter(p => !nonLiteralParts.has(p.type)).map(p => escapeRegex(p.value));
+  let pluralPartsLiterals = pluralParts.flatMap(p => p.filter(p => !nonLiteralParts.has(p.type)).map(p => escapeRegex(p.value)));
+  let sortedLiterals = [...new Set([...allPartsLiterals, ...pluralPartsLiterals])].sort((a, b) => b.length - a.length);
+  let literals = sortedLiterals.length === 0 ? new RegExp('[\\p{White_Space}]', 'gu') : new RegExp(`${sortedLiterals.join('|')}|[\\p{White_Space}]`, 'gu');
+
+  // These are for replacing non-latn characters with the latn equivalent
+  let numerals = [...new Intl.NumberFormat(intlOptions.locale, {
+    useGrouping: false
+  }).format(9876543210)].reverse();
+  let indexes = new Map(numerals.map((d, i) => [d, i]));
+  let numeral = new RegExp(`[${numerals.join('')}]`, 'g');
+  let index = d => String(indexes.get(d));
+  return {
+    minusSign,
+    plusSign,
+    decimal,
+    group,
+    literals,
+    numeral,
+    index
+  };
+}
+function replaceAll(str, find, replace) {
+  // @ts-ignore
+  if (str.replaceAll) {
+    // @ts-ignore
+    return str.replaceAll(find, replace);
+  }
+  return str.split(find).join(replace);
+}
+function escapeRegex(string) {
+  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+/* eslint-disable prefer-const */
+
+// Safari on iOS starts selecting text on long press. The only way to avoid this, it seems,
+// is to add user-select: none to the entire page. Adding it to the pressable element prevents
+// that element from being selected, but nearby elements may still receive selection. We add
+// user-select: none on touch start, and remove it again on touch end to prevent this.
+// This must be implemented using global state to avoid race conditions between multiple elements.
+
+// There are three possible states due to the delay before removing user-select: none after
+// pointer up. The 'default' state always transitions to the 'disabled' state, which transitions
+// to 'restoring'. The 'restoring' state can either transition back to 'disabled' or 'default'.
+
+// For non-iOS devices, we apply user-select: none to the pressed element instead to avoid possible
+// performance issues that arise from applying and removing user-select: none to the entire page
+// (see https://github.com/adobe/react-spectrum/issues/1609).
+// Note that state only matters here for iOS. Non-iOS gets user-select: none applied to the target element
+// rather than at the document level so we just need to apply/remove user-select: none for each pressed element individually
+let state = 'default';
+let savedUserSelect = '';
+let modifiedElementMap = new WeakMap();
+function disableTextSelection(target) {
+  if (isIOS()) {
+    if (state === 'default') {
+      // eslint-disable-next-line no-restricted-globals
+      const documentObject = getOwnerDocument(target);
+      savedUserSelect = documentObject.documentElement.style.webkitUserSelect;
+      documentObject.documentElement.style.webkitUserSelect = 'none';
+    }
+    state = 'disabled';
+  } else if (target instanceof HTMLElement || target instanceof SVGElement) {
+    // If not iOS, store the target's original user-select and change to user-select: none
+    // Ignore state since it doesn't apply for non iOS
+    modifiedElementMap.set(target, target.style.userSelect);
+    target.style.userSelect = 'none';
+  }
+}
+function restoreTextSelection(target) {
+  if (isIOS()) {
+    // If the state is already default, there's nothing to do.
+    // If it is restoring, then there's no need to queue a second restore.
+    if (state !== 'disabled') {
+      return;
+    }
+    state = 'restoring';
+
+    // There appears to be a delay on iOS where selection still might occur
+    // after pointer up, so wait a bit before removing user-select.
+    setTimeout(() => {
+      // Wait for any CSS transitions to complete so we don't recompute style
+      // for the whole page in the middle of the animation and cause jank.
+      runAfterTransition(() => {
+        // Avoid race conditions
+        if (state === 'restoring') {
+          // eslint-disable-next-line no-restricted-globals
+          const documentObject = getOwnerDocument(target);
+          if (documentObject.documentElement.style.webkitUserSelect === 'none') {
+            documentObject.documentElement.style.webkitUserSelect = savedUserSelect || '';
+          }
+          savedUserSelect = '';
+          state = 'default';
+        }
+      });
+    }, 300);
+  } else if (target instanceof HTMLElement || target instanceof SVGElement) {
+    // If not iOS, restore the target's original user-select if any
+    // Ignore state since it doesn't apply for non iOS
+    if (target && modifiedElementMap.has(target)) {
+      let targetOldUserSelect = modifiedElementMap.get(target);
+      if (target.style.userSelect === 'none') {
+        target.style.userSelect = targetOldUserSelect;
+      }
+      if (target.getAttribute('style') === '') {
+        target.removeAttribute('style');
+      }
+      modifiedElementMap.delete(target);
+    }
+  }
+}
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+const PressResponderContext = /*#__PURE__*/React__default.createContext({
+  register: () => {}
+});
+PressResponderContext.displayName = 'PressResponderContext';
+
+const _excluded$4 = ["register"],
+  _excluded2 = ["onPress", "onPressChange", "onPressStart", "onPressEnd", "onPressUp", "isDisabled", "isPressed", "preventFocusOnPress", "shouldCancelOnPointerExit", "allowTextSelectionOnPress", "ref"];
+function usePressResponderContext(props) {
+  // Consume context from <PressResponder> and merge with props.
+  let context = useContext(PressResponderContext);
+  if (context) {
+    let {
+        register
+      } = context,
+      contextProps = _objectWithoutProperties(context, _excluded$4);
+    props = mergeProps(contextProps, props);
+    register();
+  }
+  useSyncRef(context, props.ref);
+  return props;
+}
+var _shouldStopPropagation = /*#__PURE__*/new WeakMap();
+class PressEvent {
+  constructor(type, pointerType, originalEvent, state) {
+    var _state$target;
+    _defineProperty(this, "type", void 0);
+    _defineProperty(this, "pointerType", void 0);
+    _defineProperty(this, "target", void 0);
+    _defineProperty(this, "shiftKey", void 0);
+    _defineProperty(this, "ctrlKey", void 0);
+    _defineProperty(this, "metaKey", void 0);
+    _defineProperty(this, "altKey", void 0);
+    _defineProperty(this, "x", void 0);
+    _defineProperty(this, "y", void 0);
+    _classPrivateFieldInitSpec(this, _shouldStopPropagation, {
+      writable: true,
+      value: true
+    });
+    let currentTarget = (_state$target = state === null || state === void 0 ? void 0 : state.target) !== null && _state$target !== void 0 ? _state$target : originalEvent.currentTarget;
+    const rect = currentTarget === null || currentTarget === void 0 ? void 0 : currentTarget.getBoundingClientRect();
+    let x,
+      y = 0;
+    let clientX,
+      clientY = null;
+    if (originalEvent.clientX != null && originalEvent.clientY != null) {
+      clientX = originalEvent.clientX;
+      clientY = originalEvent.clientY;
+    }
+    if (rect) {
+      if (clientX != null && clientY != null) {
+        x = clientX - rect.left;
+        y = clientY - rect.top;
+      } else {
+        x = rect.width / 2;
+        y = rect.height / 2;
+      }
+    }
+    this.type = type;
+    this.pointerType = pointerType;
+    this.target = originalEvent.currentTarget;
+    this.shiftKey = originalEvent.shiftKey;
+    this.metaKey = originalEvent.metaKey;
+    this.ctrlKey = originalEvent.ctrlKey;
+    this.altKey = originalEvent.altKey;
+    this.x = x;
+    this.y = y;
+  }
+  continuePropagation() {
+    _classPrivateFieldSet(this, _shouldStopPropagation, false);
+  }
+  get shouldStopPropagation() {
+    return _classPrivateFieldGet(this, _shouldStopPropagation);
+  }
+}
+const LINK_CLICKED = Symbol('linkClicked');
+
+/**
+ * Handles press interactions across mouse, touch, keyboard, and screen readers.
+ * It normalizes behavior across browsers and platforms, and handles many nuances
+ * of dealing with pointer and keyboard events.
+ */
+function usePress(props) {
+  let _usePressResponderCon = usePressResponderContext(props),
+    {
+      onPress,
+      onPressChange,
+      onPressStart,
+      onPressEnd,
+      onPressUp,
+      isDisabled,
+      isPressed: isPressedProp,
+      preventFocusOnPress,
+      shouldCancelOnPointerExit,
+      allowTextSelectionOnPress,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      ref: _ // Removing `ref` from `domProps` because TypeScript is dumb
+    } = _usePressResponderCon,
+    domProps = _objectWithoutProperties(_usePressResponderCon, _excluded2);
+  let [isPressed, setPressed] = useState(false);
+  let ref = useRef({
+    isPressed: false,
+    ignoreEmulatedMouseEvents: false,
+    ignoreClickAfterPress: false,
+    didFirePressStart: false,
+    isTriggeringEvent: false,
+    activePointerId: null,
+    target: null,
+    isOverTarget: false,
+    pointerType: null
+  });
+  let {
+    addGlobalListener,
+    removeAllGlobalListeners
+  } = useGlobalListeners();
+  let triggerPressStart = useEffectEvent((originalEvent, pointerType) => {
+    let state = ref.current;
+    if (isDisabled || state.didFirePressStart) {
+      return false;
+    }
+    let shouldStopPropagation = true;
+    state.isTriggeringEvent = true;
+    if (onPressStart) {
+      let event = new PressEvent('pressstart', pointerType, originalEvent);
+      onPressStart(event);
+      shouldStopPropagation = event.shouldStopPropagation;
+    }
+    if (onPressChange) {
+      onPressChange(true);
+    }
+    state.isTriggeringEvent = false;
+    state.didFirePressStart = true;
+    setPressed(true);
+    return shouldStopPropagation;
+  });
+  let triggerPressEnd = useEffectEvent(function (originalEvent, pointerType) {
+    let wasPressed = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+    let state = ref.current;
+    if (!state.didFirePressStart) {
+      return false;
+    }
+    state.ignoreClickAfterPress = true;
+    state.didFirePressStart = false;
+    state.isTriggeringEvent = true;
+    let shouldStopPropagation = true;
+    if (onPressEnd) {
+      let event = new PressEvent('pressend', pointerType, originalEvent);
+      onPressEnd(event);
+      shouldStopPropagation = event.shouldStopPropagation;
+    }
+    if (onPressChange) {
+      onPressChange(false);
+    }
+    setPressed(false);
+    if (onPress && wasPressed && !isDisabled) {
+      let event = new PressEvent('press', pointerType, originalEvent);
+      onPress(event);
+      shouldStopPropagation &&= event.shouldStopPropagation;
+    }
+    state.isTriggeringEvent = false;
+    return shouldStopPropagation;
+  });
+  let triggerPressUp = useEffectEvent((originalEvent, pointerType) => {
+    let state = ref.current;
+    if (isDisabled) {
+      return false;
+    }
+    if (onPressUp) {
+      state.isTriggeringEvent = true;
+      let event = new PressEvent('pressup', pointerType, originalEvent);
+      onPressUp(event);
+      state.isTriggeringEvent = false;
+      return event.shouldStopPropagation;
+    }
+    return true;
+  });
+  let cancel = useEffectEvent(e => {
+    let state = ref.current;
+    if (state.isPressed && state.target) {
+      if (state.isOverTarget && state.pointerType != null) {
+        triggerPressEnd(createEvent(state.target, e), state.pointerType, false);
+      }
+      state.isPressed = false;
+      state.isOverTarget = false;
+      state.activePointerId = null;
+      state.pointerType = null;
+      removeAllGlobalListeners();
+      if (!allowTextSelectionOnPress) {
+        restoreTextSelection(state.target);
+      }
+    }
+  });
+  let cancelOnPointerExit = useEffectEvent(e => {
+    if (shouldCancelOnPointerExit) {
+      cancel(e);
+    }
+  });
+  let pressProps = useMemo(() => {
+    let state = ref.current;
+    let pressProps = {
+      onKeyDown(e) {
+        if (isValidKeyboardEvent(e.nativeEvent, e.currentTarget) && e.currentTarget.contains(e.target)) {
+          if (shouldPreventDefaultKeyboard(e.target, e.key)) {
+            e.preventDefault();
+          }
+
+          // If the event is repeating, it may have started on a different element
+          // after which focus moved to the current element. Ignore these events and
+          // only handle the first key down event.
+          let shouldStopPropagation = true;
+          if (!state.isPressed && !e.repeat) {
+            state.target = e.currentTarget;
+            state.isPressed = true;
+            shouldStopPropagation = triggerPressStart(e, 'keyboard');
+
+            // Focus may move before the key up event, so register the event on the document
+            // instead of the same element where the key down event occurred. Make it capturing so that it will trigger
+            // before stopPropagation from useKeyboard on a child element may happen and thus we can still call triggerPress for the parent element.
+            let originalTarget = e.currentTarget;
+            let pressUp = e => {
+              if (isValidKeyboardEvent(e, originalTarget) && !e.repeat && originalTarget.contains(e.target) && state.target) {
+                triggerPressUp(createEvent(state.target, e), 'keyboard');
+              }
+            };
+            addGlobalListener(getOwnerDocument(e.currentTarget), 'keyup', chain(pressUp, onKeyUp), true);
+          }
+          if (shouldStopPropagation) {
+            e.stopPropagation();
+          }
+
+          // Keep track of the keydown events that occur while the Meta (e.g. Command) key is held.
+          // macOS has a bug where keyup events are not fired while the Meta key is down.
+          // When the Meta key itself is released we will get an event for that, and we'll act as if
+          // all of these other keys were released as well.
+          // https://bugs.chromium.org/p/chromium/issues/detail?id=1393524
+          // https://bugs.webkit.org/show_bug.cgi?id=55291
+          // https://bugzilla.mozilla.org/show_bug.cgi?id=1299553
+          if (e.metaKey && isMac()) {
+            var _state$metaKeyEvents;
+            (_state$metaKeyEvents = state.metaKeyEvents) === null || _state$metaKeyEvents === void 0 ? void 0 : _state$metaKeyEvents.set(e.key, e.nativeEvent);
+          }
+        } else if (e.key === 'Meta') {
+          state.metaKeyEvents = new Map();
+        }
+      },
+      onClick(e) {
+        if (e && !e.currentTarget.contains(e.target)) {
+          return;
+        }
+        if (e && e.button === 0 && !state.isTriggeringEvent && !openLink.isOpening) {
+          let shouldStopPropagation = true;
+          if (isDisabled) {
+            e.preventDefault();
+          }
+
+          // If triggered from a screen reader or by using element.click(),
+          // trigger as if it were a keyboard click.
+          if (!state.ignoreClickAfterPress && !state.ignoreEmulatedMouseEvents && !state.isPressed && (state.pointerType === 'virtual' || isVirtualClick(e.nativeEvent))) {
+            // Ensure the element receives focus (VoiceOver on iOS does not do this)
+            if (!isDisabled && !preventFocusOnPress) {
+              focusWithoutScrolling(e.currentTarget);
+            }
+            let stopPressStart = triggerPressStart(e, 'virtual');
+            let stopPressUp = triggerPressUp(e, 'virtual');
+            let stopPressEnd = triggerPressEnd(e, 'virtual');
+            shouldStopPropagation = stopPressStart && stopPressUp && stopPressEnd;
+          }
+          state.ignoreEmulatedMouseEvents = false;
+          state.ignoreClickAfterPress = false;
+          if (shouldStopPropagation) {
+            e.stopPropagation();
+          }
+        }
+      }
+    };
+    let onKeyUp = e => {
+      var _state$metaKeyEvents3;
+      if (state.isPressed && state.target && isValidKeyboardEvent(e, state.target)) {
+        var _state$metaKeyEvents2;
+        if (shouldPreventDefaultKeyboard(e.target, e.key)) {
+          e.preventDefault();
+        }
+        let target = e.target;
+        triggerPressEnd(createEvent(state.target, e), 'keyboard', state.target.contains(target));
+        removeAllGlobalListeners();
+
+        // If a link was triggered with a key other than Enter, open the URL ourselves.
+        // This means the link has a role override, and the default browser behavior
+        // only applies when using the Enter key.
+        if (e.key !== 'Enter' && isHTMLAnchorLink(state.target) && state.target.contains(target) && !e[LINK_CLICKED]) {
+          // Store a hidden property on the event so we only trigger link click once,
+          // even if there are multiple usePress instances attached to the element.
+          e[LINK_CLICKED] = true;
+          openLink(state.target, e, false);
+        }
+        state.isPressed = false;
+        (_state$metaKeyEvents2 = state.metaKeyEvents) === null || _state$metaKeyEvents2 === void 0 ? void 0 : _state$metaKeyEvents2.delete(e.key);
+      } else if (e.key === 'Meta' && (_state$metaKeyEvents3 = state.metaKeyEvents) !== null && _state$metaKeyEvents3 !== void 0 && _state$metaKeyEvents3.size) {
+        // If we recorded keydown events that occurred while the Meta key was pressed,
+        // and those haven't received keyup events already, fire keyup events ourselves.
+        // See comment above for more info about the macOS bug causing this.
+        let events = state.metaKeyEvents;
+        state.metaKeyEvents = undefined;
+        for (let event of events.values()) {
+          var _state$target2;
+          (_state$target2 = state.target) === null || _state$target2 === void 0 ? void 0 : _state$target2.dispatchEvent(new KeyboardEvent('keyup', event));
+        }
+      }
+    };
+    if (typeof PointerEvent !== 'undefined') {
+      pressProps.onPointerDown = e => {
+        // Only handle left clicks, and ignore events that bubbled through portals.
+        if (e.button !== 0 || !e.currentTarget.contains(e.target)) {
+          return;
+        }
+
+        // iOS safari fires pointer events from VoiceOver with incorrect coordinates/target.
+        // Ignore and let the onClick handler take care of it instead.
+        // https://bugs.webkit.org/show_bug.cgi?id=222627
+        // https://bugs.webkit.org/show_bug.cgi?id=223202
+        if (isVirtualPointerEvent(e.nativeEvent)) {
+          state.pointerType = 'virtual';
+          return;
+        }
+
+        // Due to browser inconsistencies, especially on mobile browsers, we prevent
+        // default on pointer down and handle focusing the pressable element ourselves.
+        if (shouldPreventDefault(e.currentTarget)) {
+          e.preventDefault();
+        }
+        state.pointerType = e.pointerType;
+        let shouldStopPropagation = true;
+        if (!state.isPressed) {
+          state.isPressed = true;
+          state.isOverTarget = true;
+          state.activePointerId = e.pointerId;
+          state.target = e.currentTarget;
+          if (!isDisabled && !preventFocusOnPress) {
+            focusWithoutScrolling(e.currentTarget);
+          }
+          if (!allowTextSelectionOnPress) {
+            disableTextSelection(state.target);
+          }
+          shouldStopPropagation = triggerPressStart(e, state.pointerType);
+          addGlobalListener(getOwnerDocument(e.currentTarget), 'pointermove', onPointerMove, false);
+          addGlobalListener(getOwnerDocument(e.currentTarget), 'pointerup', onPointerUp, false);
+          addGlobalListener(getOwnerDocument(e.currentTarget), 'pointercancel', onPointerCancel, false);
+        }
+        if (shouldStopPropagation) {
+          e.stopPropagation();
+        }
+      };
+      pressProps.onMouseDown = e => {
+        if (!e.currentTarget.contains(e.target)) {
+          return;
+        }
+        if (e.button === 0) {
+          // Chrome and Firefox on touch Windows devices require mouse down events
+          // to be canceled in addition to pointer events, or an extra asynchronous
+          // focus event will be fired.
+          if (shouldPreventDefault(e.currentTarget)) {
+            e.preventDefault();
+          }
+          e.stopPropagation();
+        }
+      };
+      pressProps.onPointerUp = e => {
+        // iOS fires pointerup with zero width and height, so check the pointerType recorded during pointerdown.
+        if (!e.currentTarget.contains(e.target) || state.pointerType === 'virtual') {
+          return;
+        }
+
+        // Only handle left clicks
+        // Safari on iOS sometimes fires pointerup events, even
+        // when the touch isn't over the target, so double check.
+        if (e.button === 0 && isOverTarget(e, e.currentTarget)) {
+          triggerPressUp(e, state.pointerType || e.pointerType);
+        }
+      };
+
+      // Safari on iOS < 13.2 does not implement pointerenter/pointerleave events correctly.
+      // Use pointer move events instead to implement our own hit testing.
+      // See https://bugs.webkit.org/show_bug.cgi?id=199803
+      let onPointerMove = e => {
+        if (e.pointerId !== state.activePointerId) {
+          return;
+        }
+        if (state.target && isOverTarget(e, state.target)) {
+          if (!state.isOverTarget && state.pointerType != null) {
+            state.isOverTarget = true;
+            triggerPressStart(createEvent(state.target, e), state.pointerType);
+          }
+        } else if (state.target && state.isOverTarget && state.pointerType != null) {
+          state.isOverTarget = false;
+          triggerPressEnd(createEvent(state.target, e), state.pointerType, false);
+          cancelOnPointerExit(e);
+        }
+      };
+      let onPointerUp = e => {
+        if (e.pointerId === state.activePointerId && state.isPressed && e.button === 0 && state.target) {
+          if (isOverTarget(e, state.target) && state.pointerType != null) {
+            triggerPressEnd(createEvent(state.target, e), state.pointerType);
+          } else if (state.isOverTarget && state.pointerType != null) {
+            triggerPressEnd(createEvent(state.target, e), state.pointerType, false);
+          }
+          state.isPressed = false;
+          state.isOverTarget = false;
+          state.activePointerId = null;
+          state.pointerType = null;
+          removeAllGlobalListeners();
+          if (!allowTextSelectionOnPress) {
+            restoreTextSelection(state.target);
+          }
+        }
+      };
+      let onPointerCancel = e => {
+        cancel(e);
+      };
+      pressProps.onDragStart = e => {
+        if (!e.currentTarget.contains(e.target)) {
+          return;
+        }
+
+        // Safari does not call onPointerCancel when a drag starts, whereas Chrome and Firefox do.
+        cancel(e);
+      };
+    } else {
+      pressProps.onMouseDown = e => {
+        // Only handle left clicks
+        if (e.button !== 0 || !e.currentTarget.contains(e.target)) {
+          return;
+        }
+
+        // Due to browser inconsistencies, especially on mobile browsers, we prevent
+        // default on mouse down and handle focusing the pressable element ourselves.
+        if (shouldPreventDefault(e.currentTarget)) {
+          e.preventDefault();
+        }
+        if (state.ignoreEmulatedMouseEvents) {
+          e.stopPropagation();
+          return;
+        }
+        state.isPressed = true;
+        state.isOverTarget = true;
+        state.target = e.currentTarget;
+        state.pointerType = isVirtualClick(e.nativeEvent) ? 'virtual' : 'mouse';
+        if (!isDisabled && !preventFocusOnPress) {
+          focusWithoutScrolling(e.currentTarget);
+        }
+        let shouldStopPropagation = triggerPressStart(e, state.pointerType);
+        if (shouldStopPropagation) {
+          e.stopPropagation();
+        }
+        addGlobalListener(getOwnerDocument(e.currentTarget), 'mouseup', onMouseUp, false);
+      };
+      pressProps.onMouseEnter = e => {
+        if (!e.currentTarget.contains(e.target)) {
+          return;
+        }
+        let shouldStopPropagation = true;
+        if (state.isPressed && !state.ignoreEmulatedMouseEvents && state.pointerType != null) {
+          state.isOverTarget = true;
+          shouldStopPropagation = triggerPressStart(e, state.pointerType);
+        }
+        if (shouldStopPropagation) {
+          e.stopPropagation();
+        }
+      };
+      pressProps.onMouseLeave = e => {
+        if (!e.currentTarget.contains(e.target)) {
+          return;
+        }
+        let shouldStopPropagation = true;
+        if (state.isPressed && !state.ignoreEmulatedMouseEvents && state.pointerType != null) {
+          state.isOverTarget = false;
+          shouldStopPropagation = triggerPressEnd(e, state.pointerType, false);
+          cancelOnPointerExit(e);
+        }
+        if (shouldStopPropagation) {
+          e.stopPropagation();
+        }
+      };
+      pressProps.onMouseUp = e => {
+        if (!e.currentTarget.contains(e.target)) {
+          return;
+        }
+        if (!state.ignoreEmulatedMouseEvents && e.button === 0) {
+          triggerPressUp(e, state.pointerType || 'mouse');
+        }
+      };
+      let onMouseUp = e => {
+        // Only handle left clicks
+        if (e.button !== 0) {
+          return;
+        }
+        state.isPressed = false;
+        removeAllGlobalListeners();
+        if (state.ignoreEmulatedMouseEvents) {
+          state.ignoreEmulatedMouseEvents = false;
+          return;
+        }
+        if (state.target && isOverTarget(e, state.target) && state.pointerType != null) {
+          triggerPressEnd(createEvent(state.target, e), state.pointerType);
+        } else if (state.target && state.isOverTarget && state.pointerType != null) {
+          triggerPressEnd(createEvent(state.target, e), state.pointerType, false);
+        }
+        state.isOverTarget = false;
+      };
+      pressProps.onTouchStart = e => {
+        if (!e.currentTarget.contains(e.target)) {
+          return;
+        }
+        let touch = getTouchFromEvent(e.nativeEvent);
+        if (!touch) {
+          return;
+        }
+        state.activePointerId = touch.identifier;
+        state.ignoreEmulatedMouseEvents = true;
+        state.isOverTarget = true;
+        state.isPressed = true;
+        state.target = e.currentTarget;
+        state.pointerType = 'touch';
+
+        // Due to browser inconsistencies, especially on mobile browsers, we prevent default
+        // on the emulated mouse event and handle focusing the pressable element ourselves.
+        if (!isDisabled && !preventFocusOnPress) {
+          focusWithoutScrolling(e.currentTarget);
+        }
+        if (!allowTextSelectionOnPress) {
+          disableTextSelection(state.target);
+        }
+        let shouldStopPropagation = triggerPressStart(createTouchEvent(state.target, e), state.pointerType);
+        if (shouldStopPropagation) {
+          e.stopPropagation();
+        }
+        addGlobalListener(getOwnerWindow(e.currentTarget), 'scroll', onScroll, true);
+      };
+      pressProps.onTouchMove = e => {
+        if (!e.currentTarget.contains(e.target)) {
+          return;
+        }
+        if (!state.isPressed) {
+          e.stopPropagation();
+          return;
+        }
+        let touch = getTouchById(e.nativeEvent, state.activePointerId);
+        let shouldStopPropagation = true;
+        if (touch && isOverTarget(touch, e.currentTarget)) {
+          if (!state.isOverTarget && state.pointerType != null) {
+            state.isOverTarget = true;
+            shouldStopPropagation = triggerPressStart(createTouchEvent(state.target, e), state.pointerType);
+          }
+        } else if (state.isOverTarget && state.pointerType != null) {
+          state.isOverTarget = false;
+          shouldStopPropagation = triggerPressEnd(createTouchEvent(state.target, e), state.pointerType, false);
+          cancelOnPointerExit(createTouchEvent(state.target, e));
+        }
+        if (shouldStopPropagation) {
+          e.stopPropagation();
+        }
+      };
+      pressProps.onTouchEnd = e => {
+        if (!e.currentTarget.contains(e.target)) {
+          return;
+        }
+        if (!state.isPressed) {
+          e.stopPropagation();
+          return;
+        }
+        let touch = getTouchById(e.nativeEvent, state.activePointerId);
+        let shouldStopPropagation = true;
+        if (touch && isOverTarget(touch, e.currentTarget) && state.pointerType != null) {
+          triggerPressUp(createTouchEvent(state.target, e), state.pointerType);
+          shouldStopPropagation = triggerPressEnd(createTouchEvent(state.target, e), state.pointerType);
+        } else if (state.isOverTarget && state.pointerType != null) {
+          shouldStopPropagation = triggerPressEnd(createTouchEvent(state.target, e), state.pointerType, false);
+        }
+        if (shouldStopPropagation) {
+          e.stopPropagation();
+        }
+        state.isPressed = false;
+        state.activePointerId = null;
+        state.isOverTarget = false;
+        state.ignoreEmulatedMouseEvents = true;
+        if (state.target && !allowTextSelectionOnPress) {
+          restoreTextSelection(state.target);
+        }
+        removeAllGlobalListeners();
+      };
+      pressProps.onTouchCancel = e => {
+        if (!e.currentTarget.contains(e.target)) {
+          return;
+        }
+        e.stopPropagation();
+        if (state.isPressed) {
+          cancel(createTouchEvent(state.target, e));
+        }
+      };
+      let onScroll = e => {
+        if (state.isPressed && e.target.contains(state.target)) {
+          cancel({
+            currentTarget: state.target,
+            shiftKey: false,
+            ctrlKey: false,
+            metaKey: false,
+            altKey: false
+          });
+        }
+      };
+      pressProps.onDragStart = e => {
+        if (!e.currentTarget.contains(e.target)) {
+          return;
+        }
+        cancel(e);
+      };
+    }
+    return pressProps;
+  }, [addGlobalListener, isDisabled, preventFocusOnPress, removeAllGlobalListeners, allowTextSelectionOnPress, cancel, cancelOnPointerExit, triggerPressEnd, triggerPressStart, triggerPressUp]);
+
+  // Remove user-select: none in case component unmounts immediately after pressStart
+  // eslint-disable-next-line arrow-body-style
+  useEffect(() => {
+    return () => {
+      if (!allowTextSelectionOnPress) {
+        var _ref$current$target;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        restoreTextSelection((_ref$current$target = ref.current.target) !== null && _ref$current$target !== void 0 ? _ref$current$target : undefined);
+      }
+    };
+  }, [allowTextSelectionOnPress]);
+  return {
+    isPressed: isPressedProp || isPressed,
+    pressProps: mergeProps(domProps, pressProps)
+  };
+}
+function isHTMLAnchorLink(target) {
+  return target.tagName === 'A' && target.hasAttribute('href');
+}
+function isValidKeyboardEvent(event, currentTarget) {
+  const {
+    key,
+    code
+  } = event;
+  const element = currentTarget;
+  const role = element.getAttribute('role');
+  // Accessibility for keyboards. Space and Enter only.
+  // "Spacebar" is for IE 11
+  return (key === 'Enter' || key === ' ' || key === 'Spacebar' || code === 'Space') && !(element instanceof getOwnerWindow(element).HTMLInputElement && !isValidInputKey(element, key) || element instanceof getOwnerWindow(element).HTMLTextAreaElement || element.isContentEditable) &&
+  // Links should only trigger with Enter key
+  !((role === 'link' || !role && isHTMLAnchorLink(element)) && key !== 'Enter');
+}
+function getTouchFromEvent(event) {
+  const {
+    targetTouches
+  } = event;
+  if (targetTouches.length > 0) {
+    return targetTouches[0];
+  }
+  return null;
+}
+function getTouchById(event, pointerId) {
+  const changedTouches = event.changedTouches;
+  for (let i = 0; i < changedTouches.length; i++) {
+    const touch = changedTouches[i];
+    if (touch.identifier === pointerId) {
+      return touch;
+    }
+  }
+  return null;
+}
+function createTouchEvent(target, e) {
+  let clientX = 0;
+  let clientY = 0;
+  if (e.targetTouches && e.targetTouches.length === 1) {
+    clientX = e.targetTouches[0].clientX;
+    clientY = e.targetTouches[0].clientY;
+  }
+  return {
+    currentTarget: target,
+    shiftKey: e.shiftKey,
+    ctrlKey: e.ctrlKey,
+    metaKey: e.metaKey,
+    altKey: e.altKey,
+    clientX,
+    clientY
+  };
+}
+function createEvent(target, e) {
+  let clientX = e.clientX;
+  let clientY = e.clientY;
+  return {
+    currentTarget: target,
+    shiftKey: e.shiftKey,
+    ctrlKey: e.ctrlKey,
+    metaKey: e.metaKey,
+    altKey: e.altKey,
+    clientX,
+    clientY
+  };
+}
+function getPointClientRect(point) {
+  let offsetX = 0;
+  let offsetY = 0;
+  if (point.width !== undefined) {
+    offsetX = point.width / 2;
+  } else if (point.radiusX !== undefined) {
+    offsetX = point.radiusX;
+  }
+  if (point.height !== undefined) {
+    offsetY = point.height / 2;
+  } else if (point.radiusY !== undefined) {
+    offsetY = point.radiusY;
+  }
+  return {
+    top: point.clientY - offsetY,
+    right: point.clientX + offsetX,
+    bottom: point.clientY + offsetY,
+    left: point.clientX - offsetX
+  };
+}
+function areRectanglesOverlapping(a, b) {
+  // check if they cannot overlap on x axis
+  if (a.left > b.right || b.left > a.right) {
+    return false;
+  }
+  // check if they cannot overlap on y axis
+  if (a.top > b.bottom || b.top > a.bottom) {
+    return false;
+  }
+  return true;
+}
+function isOverTarget(point, target) {
+  let rect = target.getBoundingClientRect();
+  let pointRect = getPointClientRect(point);
+  return areRectanglesOverlapping(rect, pointRect);
+}
+function shouldPreventDefault(target) {
+  // We cannot prevent default if the target is a draggable element.
+  return !(target instanceof HTMLElement) || !target.hasAttribute('draggable');
+}
+function shouldPreventDefaultKeyboard(target, key) {
+  if (target instanceof HTMLInputElement) {
+    return !isValidInputKey(target, key);
+  }
+  if (target instanceof HTMLButtonElement) {
+    return target.type !== 'submit' && target.type !== 'reset';
+  }
+  if (isHTMLAnchorLink(target)) {
+    return false;
+  }
+  return true;
+}
+const nonTextInputTypes = new Set(['checkbox', 'radio', 'range', 'color', 'file', 'image', 'button', 'submit', 'reset']);
+function isValidInputKey(target, key) {
+  // Only space should toggle checkboxes and radios, not enter.
+  return target.type === 'checkbox' || target.type === 'radio' ? key === ' ' : nonTextInputTypes.has(target.type);
+}
+
+/* eslint-disable prefer-const */
+// @ts-nocheck
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/**
+ * This function wraps a React event handler to make stopPropagation the default, and support continuePropagation instead.
+ */
+function createEventHandler(handler) {
+  if (!handler) {
+    return undefined;
+  }
+  let shouldStopPropagation = true;
+  return e => {
+    let event = _objectSpread2(_objectSpread2({}, e), {}, {
+      preventDefault() {
+        e.preventDefault();
+      },
+      isDefaultPrevented() {
+        return e.isDefaultPrevented();
+      },
+      stopPropagation() {
+        console.error('stopPropagation is now the default behavior for events in React Spectrum. You can use continuePropagation() to revert this behavior.');
+      },
+      continuePropagation() {
+        shouldStopPropagation = false;
+      }
+    });
+    handler(event);
+    if (shouldStopPropagation) {
+      e.stopPropagation();
+    }
+  };
+}
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+/**
+ * Handles keyboard interactions for a focusable element.
+ */
+function useKeyboard(props) {
+  return {
+    keyboardProps: props.isDisabled ? {} : {
+      onKeyDown: createEventHandler(props.onKeyDown),
+      onKeyUp: createEventHandler(props.onKeyUp)
+    }
+  };
+}
+
+/* eslint-disable prefer-const */
+// scroll wheel needs to be added not passively so it's cancelable, small helper hook to remember that
+function useScrollWheel(props, ref) {
+  let {
+    onScroll,
+    isDisabled
+  } = props;
+  let onScrollHandler = useCallback(e => {
+    // If the ctrlKey is pressed, this is a zoom event, do nothing.
+    if (e.ctrlKey) {
+      return;
+    }
+
+    // stop scrolling the page
+    e.preventDefault();
+    e.stopPropagation();
+    if (onScroll) {
+      onScroll({
+        deltaX: e.deltaX,
+        deltaY: e.deltaY
+      });
+    }
+  }, [onScroll]);
+  useEvent(ref, 'wheel', isDisabled ? undefined : onScrollHandler);
+}
+
+/* eslint-disable prefer-const */
+
+/**
+ * A utility function that focuses an element while avoiding undesired side effects such
+ * as page scrolling and screen reader issues with CSS transitions.
+ */
+function focusSafely(element) {
+  // If the user is interacting with a virtual cursor, e.g. screen reader, then
+  // wait until after any animated transitions that are currently occurring on
+  // the page before shifting focus. This avoids issues with VoiceOver on iOS
+  // causing the page to scroll when moving focus if the element is transitioning
+  // from off the screen.
+  const ownerDocument = getOwnerDocument(element);
+  if (getInteractionModality() === 'virtual') {
+    let lastFocusedElement = ownerDocument.activeElement;
+    runAfterTransition(() => {
+      // If focus did not move and the element is still in the document, focus it.
+      if (ownerDocument.activeElement === lastFocusedElement && element.isConnected) {
+        focusWithoutScrolling(element);
+      }
+    });
+  } else {
+    focusWithoutScrolling(element);
+  }
+}
+
+const _excluded$3 = ["ref"];
+let FocusableContext = /*#__PURE__*/React__default.createContext(null);
+function useFocusableContext(ref) {
+  let context = useContext(FocusableContext) || {};
+  useSyncRef(context, ref);
+
+  // eslint-disable-next-line
+  let otherProps = _objectWithoutProperties(context, _excluded$3);
+  return otherProps;
+}
+/**
+ * Used to make an element focusable and capable of auto focus.
+ */
+function useFocusable(props, domRef) {
+  let {
+    focusProps
+  } = useFocus(props);
+  let {
+    keyboardProps
+  } = useKeyboard(props);
+  let interactions = mergeProps(focusProps, keyboardProps);
+  let domProps = useFocusableContext(domRef);
+  let interactionProps = props.isDisabled ? {} : domProps;
+  let autoFocusRef = useRef(props.autoFocus);
+  useEffect(() => {
+    if (autoFocusRef.current && domRef.current) {
+      focusSafely(domRef.current);
+    }
+    autoFocusRef.current = false;
+  }, [domRef]);
+  return {
+    focusableProps: mergeProps(_objectSpread2(_objectSpread2({}, interactions), {}, {
+      tabIndex: props.excludeFromTabOrder && !props.isDisabled ? -1 : undefined
+    }), interactionProps)
+  };
+}
 
 /**
  * Component variant.
  */
-declare const NumberFieldVariant: {
-    readonly default: "default";
-    readonly underline: "underline";
+const NumberFieldVariant = {
+  default: 'default',
+  underline: 'underline'
 };
-type NumberFieldVariant = ValueOf<typeof NumberFieldVariant>;
+
 /**
  * Component props.
  */
-interface NumberFieldProps extends Omit<TextFieldProps, 'defaultValue' | 'onChange' | 'value' | 'onBlur' | 'onFocus' | 'onKeyDown' | 'onKeyUp' | 'after' | 'internal' | 'pills' | 'placeholder'> {
-    /** Handler that is called when the element receives focus. */
-    onFocus?: (e: FocusEvent<Element>) => void;
-    /** Handler that is called when the element loses focus. */
-    onBlur?: (e: FocusEvent<Element>) => void;
-    /** Handler that is called when the element's focus status changes. */
-    onFocusChange?: (isFocused: boolean) => void;
-    /** Handler that is called when a key is pressed. */
-    onKeyDown?: (e: KeyboardEvent<HTMLElement>) => void;
-    /** Handler that is called when a key is released. */
-    onKeyUp?: (e: KeyboardEvent<HTMLElement>) => void;
-    /**
-     * Default value.
-     * Used for uncontrolled version.
-     */
-    defaultValue?: number;
-    /** Method to handle component change. */
-    onChange?(value?: number, name?: string, event?: ChangeEvent<HTMLInputElement>): void;
-    /**
-     * Input value.
-     * Used for controlled version.
-     */
-    value?: number;
-    /** Placeholder. */
-    placeholder?: number;
-    /** A custom aria-label for the decrement button. If not provided, the localized string "Decrement" is used. */
-    decrementAriaLabel?: string;
-    /** A custom aria-label for the increment button. If not provided, the localized string "Increment" is used. */
-    incrementAriaLabel?: string;
-    /**
-     * Enables or disables changing the value with scroll.
-     */
-    isWheelDisabled?: boolean;
-    /**
-     * Formatting options for the value displayed in the number field.
-     * This also affects what characters are allowed to be typed by the user.
-     */
-    formatOptions?: Intl.NumberFormatOptions;
-    /** The smallest value allowed for the input. */
-    minValue?: number;
-    /** The largest value allowed for the input. */
-    maxValue?: number;
-    /** The amount that the input value changes with each increment or decrement "tick". */
-    step?: number;
-}
-type StyledNumberFieldProps = Omit<NumberFieldProps, 'color' | 'isColored' | 'isDisabled' | 'isInvalid' | 'isRequired' | 'onChange' | 'onBlur' | 'onFocus'> & {
-    $hasLeftIcon: boolean;
-    $hasContent: boolean;
-    $isColored: NumberFieldProps['isColored'];
-    $isDisabled: NumberFieldProps['isDisabled'];
-    $isInvalid: NumberFieldProps['isInvalid'];
-    $isFocused: boolean;
-    $isFocusVisible: boolean;
-    $isRequired: NumberFieldProps['isRequired'];
-    $theme: NumberFieldProps['theme'];
-    $variant: NumberFieldProps['variant'];
+
+const VALID_VALIDITY_STATE = {
+  badInput: false,
+  customError: false,
+  patternMismatch: false,
+  rangeOverflow: false,
+  rangeUnderflow: false,
+  stepMismatch: false,
+  tooLong: false,
+  tooShort: false,
+  typeMismatch: false,
+  valueMissing: false,
+  valid: true
+};
+const CUSTOM_VALIDITY_STATE = _objectSpread2(_objectSpread2({}, VALID_VALIDITY_STATE), {}, {
+  customError: true,
+  valid: false
+});
+const DEFAULT_VALIDATION_RESULT = {
+  isInvalid: false,
+  validationDetails: VALID_VALIDITY_STATE,
+  validationErrors: []
 };
+const FormValidationContext = /*#__PURE__*/createContext({});
+const privateValidationStateProp = '__formValidationState' + Date.now();
+function useFormValidationState(props) {
+  // Private prop for parent components to pass state to children.
+  if (props[privateValidationStateProp]) {
+    let {
+      realtimeValidation,
+      displayValidation,
+      updateValidation,
+      resetValidation,
+      commitValidation
+    } = props[privateValidationStateProp];
+    return {
+      realtimeValidation,
+      displayValidation,
+      updateValidation,
+      resetValidation,
+      commitValidation
+    };
+  }
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  return useFormValidationStateImpl(props);
+}
+function useFormValidationStateImpl(props) {
+  var _builtinValidation;
+  let {
+    isInvalid,
+    validationState,
+    name,
+    value,
+    builtinValidation,
+    validate,
+    validationBehavior = 'aria'
+  } = props;
+
+  // backward compatibility.
+  if (validationState) {
+    isInvalid ||= validationState === 'invalid';
+  }
+
+  // If the isInvalid prop is controlled, update validation result in realtime.
+  let controlledError = isInvalid !== undefined ? {
+    isInvalid,
+    validationErrors: [],
+    validationDetails: CUSTOM_VALIDITY_STATE
+  } : null;
+
+  // Perform custom client side validation.
+  let clientError = useMemo(() => getValidationResult(runValidate(validate, value)), [validate, value]);
+  if ((_builtinValidation = builtinValidation) !== null && _builtinValidation !== void 0 && _builtinValidation.validationDetails.valid) {
+    builtinValidation = null;
+  }
+
+  // Get relevant server errors from the form.
+  let serverErrors = useContext(FormValidationContext);
+  let serverErrorMessages = useMemo(() => {
+    if (name) {
+      return Array.isArray(name) ? name.flatMap(name => asArray(serverErrors[name])) : asArray(serverErrors[name]);
+    }
+    return [];
+  }, [serverErrors, name]);
+
+  // Show server errors when the form gets a new value, and clear when the user changes the value.
+  let [lastServerErrors, setLastServerErrors] = useState(serverErrors);
+  let [isServerErrorCleared, setServerErrorCleared] = useState(false);
+  if (serverErrors !== lastServerErrors) {
+    setLastServerErrors(serverErrors);
+    setServerErrorCleared(false);
+  }
+  let serverError = useMemo(() => getValidationResult(isServerErrorCleared ? [] : serverErrorMessages), [isServerErrorCleared, serverErrorMessages]);
+
+  // Track the next validation state in a ref until commitValidation is called.
+  let nextValidation = useRef(DEFAULT_VALIDATION_RESULT);
+  let [currentValidity, setCurrentValidity] = useState(DEFAULT_VALIDATION_RESULT);
+  let lastError = useRef(DEFAULT_VALIDATION_RESULT);
+  let commitValidation = () => {
+    if (!commitQueued) {
+      return;
+    }
+    setCommitQueued(false);
+    let error = clientError || builtinValidation || nextValidation.current;
+    if (!isEqualValidation(error, lastError.current)) {
+      lastError.current = error;
+      setCurrentValidity(error);
+    }
+  };
+  let [commitQueued, setCommitQueued] = useState(false);
+  useEffect(commitValidation);
+
+  // realtimeValidation is used to update the native input element's state based on custom validation logic.
+  // displayValidation is the currently displayed validation state that the user sees (e.g. on input change/form submit).
+  // With validationBehavior="aria", all errors are displayed in realtime rather than on submit.
+  let realtimeValidation = controlledError || serverError || clientError || builtinValidation || DEFAULT_VALIDATION_RESULT;
+  let displayValidation = validationBehavior === 'native' ? controlledError || serverError || currentValidity : controlledError || serverError || clientError || builtinValidation || currentValidity;
+  return {
+    realtimeValidation,
+    displayValidation,
+    updateValidation(value) {
+      // If validationBehavior is 'aria', update in realtime. Otherwise, store in a ref until commit.
+      if (validationBehavior === 'aria' && !isEqualValidation(currentValidity, value)) {
+        setCurrentValidity(value);
+      } else {
+        nextValidation.current = value;
+      }
+    },
+    resetValidation() {
+      // Update the currently displayed validation state to valid on form reset,
+      // even if the native validity says it isn't. It'll show again on the next form submit.
+      let error = DEFAULT_VALIDATION_RESULT;
+      if (!isEqualValidation(error, lastError.current)) {
+        lastError.current = error;
+        setCurrentValidity(error);
+      }
+
+      // Do not commit validation after the next render. This avoids a condition where
+      // useSelect calls commitValidation inside an onReset handler.
+      if (validationBehavior === 'native') {
+        setCommitQueued(false);
+      }
+      setServerErrorCleared(true);
+    },
+    commitValidation() {
+      // Commit validation state so the user sees it on blur/change/submit. Also clear any server errors.
+      // Wait until after the next render to commit so that the latest value has been validated.
+      if (validationBehavior === 'native') {
+        setCommitQueued(true);
+      }
+      setServerErrorCleared(true);
+    }
+  };
+}
+function asArray(v) {
+  if (!v) {
+    return [];
+  }
+  return Array.isArray(v) ? v : [v];
+}
+function runValidate(validate, value) {
+  if (typeof validate === 'function') {
+    let e = validate(value);
+    if (e && typeof e !== 'boolean') {
+      return asArray(e);
+    }
+  }
+  return [];
+}
+function getValidationResult(errors) {
+  return errors.length ? {
+    isInvalid: true,
+    validationErrors: errors,
+    validationDetails: CUSTOM_VALIDITY_STATE
+  } : null;
+}
+function isEqualValidation(a, b) {
+  if (a === b) {
+    return true;
+  }
+  return a && b && a.isInvalid === b.isInvalid && a.validationErrors.length === b.validationErrors.length && a.validationErrors.every((a, i) => a === b.validationErrors[i]) && Object.entries(a.validationDetails).every(_ref => {
+    let [k, v] = _ref;
+    return b.validationDetails[k] === v;
+  });
+}
+
+/**
+ * Provides state management for a number field component. Number fields allow users to enter a number,
+ * and increment or decrement the value using stepper buttons.
+ */
+function useNumberFieldState(props) {
+  let {
+    minValue,
+    maxValue,
+    step,
+    formatOptions,
+    value,
+    defaultValue = NaN,
+    onChange,
+    locale,
+    isDisabled,
+    isReadOnly
+  } = props;
+  if (value === null) {
+    value = NaN;
+  }
+  if (value !== undefined && !isNaN(value)) {
+    if (step !== undefined && !isNaN(step)) {
+      value = snapValueToStep(value, minValue, maxValue, step);
+    } else {
+      value = clamp(value, minValue, maxValue);
+    }
+  }
+  if (!isNaN(defaultValue)) {
+    if (step !== undefined && !isNaN(step)) {
+      defaultValue = snapValueToStep(defaultValue, minValue, maxValue, step);
+    } else {
+      defaultValue = clamp(defaultValue, minValue, maxValue);
+    }
+  }
+  let [numberValue, setNumberValue] = useControlledState(value, isNaN(defaultValue) ? NaN : defaultValue, onChange);
+  let [inputValue, setInputValue] = useState(() => isNaN(numberValue) ? '' : new NumberFormatter(locale, formatOptions).format(numberValue));
+  let numberParser = useMemo(() => new NumberParser(locale, formatOptions), [locale, formatOptions]);
+  let numberingSystem = useMemo(() => numberParser.getNumberingSystem(inputValue), [numberParser, inputValue]);
+  let formatter = useMemo(() => new NumberFormatter(locale, _objectSpread2(_objectSpread2({}, formatOptions), {}, {
+    numberingSystem
+  })), [locale, formatOptions, numberingSystem]);
+  let intlOptions = useMemo(() => formatter.resolvedOptions(), [formatter]);
+  let format = useCallback(value => isNaN(value) || value === null ? '' : formatter.format(value), [formatter]);
+  let validation = useFormValidationState(_objectSpread2(_objectSpread2({}, props), {}, {
+    value: numberValue
+  }));
+  let clampStep = step !== undefined && !isNaN(step) ? step : 1;
+  if (intlOptions.style === 'percent' && (step === undefined || isNaN(step))) {
+    clampStep = 0.01;
+  }
+
+  // Update the input value when the number value or format options change. This is done
+  // in a useEffect so that the controlled behavior is correct and we only update the
+  // textfield after prop changes.
+  let [prevValue, setPrevValue] = useState(numberValue);
+  let [prevLocale, setPrevLocale] = useState(locale);
+  let [prevFormatOptions, setPrevFormatOptions] = useState(formatOptions);
+  if (!Object.is(numberValue, prevValue) || locale !== prevLocale || formatOptions !== prevFormatOptions) {
+    setInputValue(format(numberValue));
+    setPrevValue(numberValue);
+    setPrevLocale(locale);
+    setPrevFormatOptions(formatOptions);
+  }
+  let parsedValue = useMemo(() => numberParser.parse(inputValue), [numberParser, inputValue]);
+  let commit = () => {
+    // Set to empty state if input value is empty
+    if (!inputValue.length) {
+      setNumberValue(NaN);
+      setInputValue(value === undefined ? '' : format(numberValue));
+      return;
+    }
+
+    // if it failed to parse, then reset input to formatted version of current number
+    if (isNaN(parsedValue)) {
+      setInputValue(format(numberValue));
+      return;
+    }
+
+    // Clamp to min and max, round to the nearest step, and round to specified number of digits
+    let clampedValue;
+    if (step === undefined || isNaN(step)) {
+      clampedValue = clamp(parsedValue, minValue, maxValue);
+    } else {
+      clampedValue = snapValueToStep(parsedValue, minValue, maxValue, step);
+    }
+    clampedValue = numberParser.parse(format(clampedValue));
+    setNumberValue(clampedValue);
+
+    // in a controlled state, the numberValue won't change, so we won't go back to our old input without help
+    setInputValue(format(value === undefined ? clampedValue : numberValue));
+  };
+  let safeNextStep = function (operation) {
+    let minMax = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+    let prev = parsedValue;
+    if (isNaN(prev)) {
+      // if the input is empty, start from the min/max value when incrementing/decrementing,
+      // or zero if there is no min/max value defined.
+      let newValue = isNaN(minMax) ? 0 : minMax;
+      return snapValueToStep(newValue, minValue, maxValue, clampStep);
+    } else {
+      // otherwise, first snap the current value to the nearest step. if it moves in the direction
+      // we're going, use that value, otherwise add the step and snap that value.
+      let newValue = snapValueToStep(prev, minValue, maxValue, clampStep);
+      if (operation === '+' && newValue > prev || operation === '-' && newValue < prev) {
+        return newValue;
+      }
+      return snapValueToStep(handleDecimalOperation(operation, prev, clampStep), minValue, maxValue, clampStep);
+    }
+  };
+  let increment = () => {
+    let newValue = safeNextStep('+', minValue);
+
+    // if we've arrived at the same value that was previously in the state, the
+    // input value should be updated to match
+    // ex type 4, press increment, highlight the number in the input, type 4 again, press increment
+    // you'd be at 5, then incrementing to 5 again, so no re-render would happen and 4 would be left in the input
+    if (newValue === numberValue) {
+      setInputValue(format(newValue));
+    }
+    setNumberValue(newValue);
+    validation.commitValidation();
+  };
+  let decrement = () => {
+    let newValue = safeNextStep('-', maxValue);
+    if (newValue === numberValue) {
+      setInputValue(format(newValue));
+    }
+    setNumberValue(newValue);
+    validation.commitValidation();
+  };
+  let incrementToMax = () => {
+    if (maxValue != null) {
+      setNumberValue(snapValueToStep(maxValue, minValue, maxValue, clampStep));
+      validation.commitValidation();
+    }
+  };
+  let decrementToMin = () => {
+    if (minValue != null) {
+      setNumberValue(minValue);
+      validation.commitValidation();
+    }
+  };
+  let canIncrement = useMemo(() => !isDisabled && !isReadOnly && (isNaN(parsedValue) || maxValue === undefined || isNaN(maxValue) || snapValueToStep(parsedValue, minValue, maxValue, clampStep) > parsedValue || handleDecimalOperation('+', parsedValue, clampStep) <= maxValue), [isDisabled, isReadOnly, minValue, maxValue, clampStep, parsedValue]);
+  let canDecrement = useMemo(() => !isDisabled && !isReadOnly && (isNaN(parsedValue) || minValue === undefined || isNaN(minValue) || snapValueToStep(parsedValue, minValue, maxValue, clampStep) < parsedValue || handleDecimalOperation('-', parsedValue, clampStep) >= minValue), [isDisabled, isReadOnly, minValue, maxValue, clampStep, parsedValue]);
+  let validate = value => numberParser.isValidPartialNumber(value, minValue, maxValue);
+  return _objectSpread2(_objectSpread2({}, validation), {}, {
+    validate,
+    increment,
+    incrementToMax,
+    decrement,
+    decrementToMin,
+    canIncrement,
+    canDecrement,
+    minValue,
+    maxValue,
+    numberValue: parsedValue,
+    setNumberValue,
+    setInputValue,
+    inputValue,
+    commit
+  });
+}
+function handleDecimalOperation(operator, value1, value2) {
+  let result = operator === '+' ? value1 + value2 : value1 - value2;
+
+  // Check if we have decimals
+  if (value1 % 1 !== 0 || value2 % 1 !== 0) {
+    const value1Decimal = value1.toString().split('.');
+    const value2Decimal = value2.toString().split('.');
+    const value1DecimalLength = value1Decimal[1] && value1Decimal[1].length || 0;
+    const value2DecimalLength = value2Decimal[1] && value2Decimal[1].length || 0;
+    const multiplier = Math.pow(10, Math.max(value1DecimalLength, value2DecimalLength));
+
+    // Transform the decimals to integers based on the precision
+    value1 = Math.round(value1 * multiplier);
+    value2 = Math.round(value2 * multiplier);
+
+    // Perform the operation on integers values to make sure we don't get a fancy decimal value
+    result = operator === '+' ? value1 + value2 : value1 - value2;
+
+    // Transform the integer result back to decimal
+    result /= multiplier;
+  }
+  return result;
+}
+
+var decrease$1 = "Decrease {fieldLabel}";
+var increase$1 = "Increase {fieldLabel}";
+var numberField$1 = "Number field";
+var enUS$1 = {
+	decrease: decrease$1,
+	increase: increase$1,
+	numberField: numberField$1
+};
+
+var decrease = "Diminuer {fieldLabel}";
+var increase = "Augmenter {fieldLabel}";
+var numberField = "Champ de nombre";
+var frFR$1 = {
+	decrease: decrease,
+	increase: increase,
+	numberField: numberField
+};
+
+var intlMessages$1 = {
+  'en-US': enUS$1,
+  'fr-FR': frFR$1
+};
+
+/* eslint-disable prefer-const */
+/**
+ * Provides the accessibility implementation for labels and their associated elements.
+ * Labels provide context for user inputs.
+ * @param props - The props for labels and fields.
+ */
+function useLabel(props) {
+  let {
+    id,
+    label,
+    'aria-labelledby': ariaLabelledby,
+    'aria-label': ariaLabel,
+    labelElementType = 'label'
+  } = props;
+  id = useId(id);
+  let labelId = useId();
+  let labelProps = {};
+  if (label) {
+    ariaLabelledby = ariaLabelledby ? `${labelId} ${ariaLabelledby}` : labelId;
+    labelProps = {
+      id: labelId,
+      htmlFor: labelElementType === 'label' ? id : undefined
+    };
+  } else if (!ariaLabelledby && !ariaLabel) {
+    console.warn('If you do not provide a visible label, you must specify an aria-label or aria-labelledby attribute for accessibility');
+  }
+  let fieldProps = useLabels({
+    id,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledby
+  });
+  return {
+    labelProps,
+    fieldProps
+  };
+}
+
+/* eslint-disable prefer-const */
+/**
+ * Provides the accessibility implementation for input fields.
+ * Fields accept user input, gain context from their label, and may display a description or error message.
+ * @param props - Props for the Field.
+ */
+function useField(props) {
+  let {
+    description,
+    errorMessage,
+    isInvalid,
+    validationState
+  } = props;
+  let {
+    labelProps,
+    fieldProps
+  } = useLabel(props);
+  let descriptionId = useSlotId([Boolean(description), Boolean(errorMessage), isInvalid, validationState]);
+  let errorMessageId = useSlotId([Boolean(description), Boolean(errorMessage), isInvalid, validationState]);
+  fieldProps = mergeProps(fieldProps, {
+    'aria-describedby': [descriptionId,
+    // Use aria-describedby for error message because aria-errormessage is unsupported using VoiceOver or NVDA. See https://github.com/adobe/react-spectrum/issues/1346#issuecomment-740136268
+    errorMessageId, props['aria-describedby']].filter(Boolean).join(' ') || undefined
+  });
+  return {
+    labelProps,
+    fieldProps,
+    descriptionProps: {
+      id: descriptionId
+    },
+    errorMessageProps: {
+      id: errorMessageId
+    }
+  };
+}
+
+/* eslint-disable prefer-const */
+function useFormValidation(props, state, ref) {
+  let {
+    validationBehavior,
+    focus
+  } = props;
+
+  // This is a useLayoutEffect so that it runs before the useEffect in useFormValidationState, which commits the validation change.
+  useLayoutEffect(() => {
+    if (validationBehavior === 'native' && ref !== null && ref !== void 0 && ref.current) {
+      let errorMessage = state.realtimeValidation.isInvalid ? state.realtimeValidation.validationErrors.join(' ') || 'Invalid value.' : '';
+      ref.current.setCustomValidity(errorMessage);
+
+      // Prevent default tooltip for validation message.
+      // https://bugzilla.mozilla.org/show_bug.cgi?id=605277
+      if (!ref.current.hasAttribute('title')) {
+        ref.current.title = '';
+      }
+      if (!state.realtimeValidation.isInvalid) {
+        state.updateValidation(getNativeValidity(ref.current));
+      }
+    }
+  });
+  let onReset = useEffectEvent(() => {
+    state.resetValidation();
+  });
+  let onInvalid = useEffectEvent(e => {
+    var _ref$current;
+    // Only commit validation if we are not already displaying one.
+    // This avoids clearing server errors that the user didn't actually fix.
+    if (!state.displayValidation.isInvalid) {
+      state.commitValidation();
+    }
+
+    // Auto focus the first invalid input in a form, unless the error already had its default prevented.
+    let form = ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.form;
+    if (!e.defaultPrevented && ref && form && getFirstInvalidInput(form) === ref.current) {
+      if (focus) {
+        focus();
+      } else {
+        var _ref$current2;
+        (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.focus();
+      }
+
+      // Always show focus ring.
+      setInteractionModality('keyboard');
+    }
+
+    // Prevent default browser error UI from appearing.
+    e.preventDefault();
+  });
+  let onChange = useEffectEvent(() => {
+    state.commitValidation();
+  });
+  useEffect(() => {
+    let input = ref === null || ref === void 0 ? void 0 : ref.current;
+    if (!input) {
+      return;
+    }
+    let form = input.form;
+    input.addEventListener('invalid', onInvalid);
+    input.addEventListener('change', onChange);
+    form === null || form === void 0 ? void 0 : form.addEventListener('reset', onReset);
+    return () => {
+      input.removeEventListener('invalid', onInvalid);
+      input.removeEventListener('change', onChange);
+      form === null || form === void 0 ? void 0 : form.removeEventListener('reset', onReset);
+    };
+  }, [ref, onInvalid, onChange, onReset, validationBehavior]);
+}
+function getValidity(input) {
+  // The native ValidityState object is live, meaning each property is a getter that returns the current state.
+  // We need to create a snapshot of the validity state at the time this function is called to avoid unpredictable React renders.
+  let validity = input.validity;
+  return {
+    badInput: validity.badInput,
+    customError: validity.customError,
+    patternMismatch: validity.patternMismatch,
+    rangeOverflow: validity.rangeOverflow,
+    rangeUnderflow: validity.rangeUnderflow,
+    stepMismatch: validity.stepMismatch,
+    tooLong: validity.tooLong,
+    tooShort: validity.tooShort,
+    typeMismatch: validity.typeMismatch,
+    valueMissing: validity.valueMissing,
+    valid: validity.valid
+  };
+}
+function getNativeValidity(input) {
+  return {
+    isInvalid: !input.validity.valid,
+    validationDetails: getValidity(input),
+    validationErrors: input.validationMessage ? [input.validationMessage] : []
+  };
+}
+function getFirstInvalidInput(form) {
+  for (let i = 0; i < form.elements.length; i++) {
+    let element = form.elements[i];
+    if (!element.validity.valid) {
+      return element;
+    }
+  }
+  return null;
+}
+
+/**
+ * A map of HTML element names and their interface types.
+ * For example `'a'` -> `HTMLAnchorElement`.
+ */
+
+/**
+ * A map of HTML element names and their attribute interface types.
+ * For example `'a'` -> `AnchorHTMLAttributes<HTMLAnchorElement>`.
+ */
+
+/**
+ * The intrinsic HTML element names that `useTextField` supports; e.g. `input`,
+ * `textarea`.
+ */
+
+/**
+ * The HTML element interfaces that `useTextField` supports based on what is
+ * defined for `TextFieldIntrinsicElements`; e.g. `HTMLInputElement`,
+ * `HTMLTextAreaElement`.
+ */
+
+/**
+ * The HTML attributes interfaces that `useTextField` supports based on what
+ * is defined for `TextFieldIntrinsicElements`; e.g. `InputHTMLAttributes`,
+ * `TextareaHTMLAttributes`.
+ */
+
+/**
+ * The type of `inputProps` returned by `useTextField`; e.g. `InputHTMLAttributes`,
+ * `TextareaHTMLAttributes`.
+ */
+
+/**
+ * The type of `ref` object that can be passed to `useTextField` based on the given
+ * intrinsic HTML element name; e.g.`RefObject<HTMLInputElement>`,
+ * `RefObject<HTMLTextAreaElement>`.
+ */
+
+/**
+ * Provides the behavior and accessibility implementation for a text field.
+ * @param props - Props for the text field.
+ * @param ref - Ref to the HTML input or textarea element.
+ */
+function useTextField(props, ref) {
+  let {
+    inputElementType = 'input',
+    isDisabled = false,
+    isRequired = false,
+    isReadOnly = false,
+    type = 'text',
+    validationBehavior = 'aria'
+  } = props;
+  let [value, setValue] = useControlledState(props.value, props.defaultValue || '', props.onChange);
+  let {
+    focusableProps
+  } = useFocusable(props, ref);
+  let validationState = useFormValidationState(_objectSpread2(_objectSpread2({}, props), {}, {
+    value
+  }));
+  let {
+    isInvalid,
+    validationErrors,
+    validationDetails
+  } = validationState.displayValidation;
+  let {
+    labelProps,
+    fieldProps,
+    descriptionProps,
+    errorMessageProps
+  } = useField(_objectSpread2(_objectSpread2({}, props), {}, {
+    isInvalid,
+    errorMessage: props.errorMessage || validationErrors
+  }));
+  let domProps = filterDOMProps(props, {
+    labelable: true
+  });
+  const inputOnlyProps = {
+    type,
+    pattern: props.pattern
+  };
+  useFormReset(ref, value, setValue);
+  useFormValidation(props, validationState, ref);
+  useEffect(() => {
+    // This works around a React/Chrome bug that prevents textarea elements from validating when controlled.
+    // We prevent React from updating defaultValue (i.e. children) of textarea when `value` changes,
+    // which causes Chrome to skip validation. Only updating `value` is ok in our case since our
+    // textareas are always controlled. React is planning on removing this synchronization in a
+    // future major version.
+    // https://github.com/facebook/react/issues/19474
+    // https://github.com/facebook/react/issues/11896
+    if (ref.current instanceof getOwnerWindow(ref.current).HTMLTextAreaElement) {
+      let input = ref.current;
+      Object.defineProperty(input, 'defaultValue', {
+        get: () => input.value,
+        set: () => {},
+        configurable: true
+      });
+    }
+  }, [ref]);
+  return {
+    labelProps,
+    inputProps: mergeProps(domProps, inputElementType === 'input' ? inputOnlyProps : undefined, _objectSpread2(_objectSpread2({
+      disabled: isDisabled,
+      readOnly: isReadOnly,
+      required: isRequired && validationBehavior === 'native',
+      'aria-required': isRequired && validationBehavior === 'aria' || undefined,
+      'aria-invalid': isInvalid || undefined,
+      'aria-errormessage': props['aria-errormessage'],
+      'aria-activedescendant': props['aria-activedescendant'],
+      'aria-autocomplete': props['aria-autocomplete'],
+      'aria-haspopup': props['aria-haspopup'],
+      value,
+      onChange: e => setValue(e.target.value),
+      autoComplete: props.autoComplete,
+      autoCapitalize: props.autoCapitalize,
+      maxLength: props.maxLength,
+      minLength: props.minLength,
+      name: props.name,
+      placeholder: props.placeholder,
+      inputMode: props.inputMode,
+      // Clipboard events
+      onCopy: props.onCopy,
+      onCut: props.onCut,
+      onPaste: props.onPaste,
+      // Composition events
+      onCompositionEnd: props.onCompositionEnd,
+      onCompositionStart: props.onCompositionStart,
+      onCompositionUpdate: props.onCompositionUpdate,
+      // Selection events
+      onSelect: props.onSelect,
+      // Input events
+      onBeforeInput: props.onBeforeInput,
+      onInput: props.onInput
+    }, focusableProps), fieldProps)),
+    descriptionProps,
+    errorMessageProps,
+    isInvalid,
+    validationErrors,
+    validationDetails
+  };
+}
+
+const _excluded$2 = ["labelProps", "inputProps", "descriptionProps", "errorMessageProps"];
+function supportsNativeBeforeInputEvent() {
+  return typeof window !== 'undefined' && window.InputEvent &&
+  // @ts-ignore
+  typeof InputEvent.prototype.getTargetRanges === 'function';
+}
+function useFormattedTextField(props, state, inputRef) {
+  // All browsers implement the 'beforeinput' event natively except Firefox
+  // (currently behind a flag as of Firefox 84). React's polyfill does not
+  // run in all cases that the native event fires, e.g. when deleting text.
+  // Use the native event if available so that we can prevent invalid deletions.
+  // We do not attempt to polyfill this in Firefox since it would be very complicated,
+  // the benefit of doing so is fairly minor, and it's going to be natively supported soon.
+  let onBeforeInputFallback = useEffectEvent(e => {
+    let input = inputRef.current;
+
+    // Compute the next value of the input if the event is allowed to proceed.
+    // See https://www.w3.org/TR/input-events-2/#interface-InputEvent-Attributes for a full list of input types.
+    let nextValue;
+    switch (e.inputType) {
+      case 'historyUndo':
+      case 'historyRedo':
+        // Explicitly allow undo/redo. e.data is null in this case, but there's no need to validate,
+        // because presumably the input would have already been validated previously.
+        return;
+      case 'insertLineBreak':
+        // Explicitly allow "insertLineBreak" event, to allow onSubmit for "enter" key. e.data is null in this case.
+        return;
+      case 'deleteContent':
+      case 'deleteByCut':
+      case 'deleteByDrag':
+        nextValue = input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd);
+        break;
+      case 'deleteContentForward':
+        // This is potentially incorrect, since the browser may actually delete more than a single UTF-16
+        // character. In reality, a full Unicode grapheme cluster consisting of multiple UTF-16 characters
+        // or code points may be deleted. However, in our currently supported locales, there are no such cases.
+        // If we support additional locales in the future, this may need to change.
+        nextValue = input.selectionEnd === input.selectionStart ? input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd + 1) : input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd);
+        break;
+      case 'deleteContentBackward':
+        nextValue = input.selectionEnd === input.selectionStart ? input.value.slice(0, input.selectionStart - 1) + input.value.slice(input.selectionStart) : input.value.slice(0, input.selectionStart) + input.value.slice(input.selectionEnd);
+        break;
+      case 'deleteSoftLineBackward':
+      case 'deleteHardLineBackward':
+        nextValue = input.value.slice(input.selectionStart);
+        break;
+      default:
+        if (e.data != null) {
+          nextValue = input.value.slice(0, input.selectionStart) + e.data + input.value.slice(input.selectionEnd);
+        }
+        break;
+    }
+
+    // If we did not compute a value, or the new value is invalid, prevent the event
+    // so that the browser does not update the input text, move the selection, or add to
+    // the undo/redo stack.
+    if (nextValue == null || !state.validate(nextValue)) {
+      e.preventDefault();
+    }
+  });
+  useEffect(() => {
+    if (!supportsNativeBeforeInputEvent()) {
+      return;
+    }
+    let input = inputRef.current;
+    input.addEventListener('beforeinput', onBeforeInputFallback, false);
+    return () => {
+      input.removeEventListener('beforeinput', onBeforeInputFallback, false);
+    };
+  }, [inputRef, onBeforeInputFallback]);
+  let onBeforeInput = !supportsNativeBeforeInputEvent() ? e => {
+    let nextValue = e.target.value.slice(0, e.target.selectionStart) + e.data + e.target.value.slice(e.target.selectionEnd);
+    if (!state.validate(nextValue)) {
+      e.preventDefault();
+    }
+  } : null;
+  let _useTextField = useTextField(props, inputRef),
+    {
+      labelProps,
+      inputProps: textFieldProps,
+      descriptionProps,
+      errorMessageProps
+    } = _useTextField,
+    validation = _objectWithoutProperties(_useTextField, _excluded$2);
+  let compositionStartState = useRef(null);
+  return _objectSpread2({
+    inputProps: mergeProps(textFieldProps, {
+      onBeforeInput,
+      onCompositionStart() {
+        // Chrome does not implement Input Events Level 2, which specifies the insertFromComposition
+        // and deleteByComposition inputType values for the beforeinput event. These are meant to occur
+        // at the end of a composition (e.g. Pinyin IME, Android auto correct, etc.), and crucially, are
+        // cancelable. The insertCompositionText and deleteCompositionText input types are not cancelable,
+        // nor would we want to cancel them because the input from the user is incomplete at that point.
+        // In Safari, insertFromComposition/deleteFromComposition will fire, however, allowing us to cancel
+        // the final composition result if it is invalid. As a fallback for Chrome and Firefox, which either
+        // don't support Input Events Level 2, or beforeinput at all, we store the state of the input when
+        // the compositionstart event fires, and undo the changes in compositionend (below) if it is invalid.
+        // Unfortunately, this messes up the undo/redo stack, but until insertFromComposition/deleteByComposition
+        // are implemented, there is no other way to prevent composed input.
+        // See https://bugs.chromium.org/p/chromium/issues/detail?id=1022204
+        let {
+          value,
+          selectionStart,
+          selectionEnd
+        } = inputRef.current;
+        compositionStartState.current = {
+          value,
+          selectionStart,
+          selectionEnd
+        };
+      },
+      onCompositionEnd() {
+        if (!state.validate(inputRef.current.value)) {
+          // Restore the input value in the DOM immediately so we can synchronously update the selection position.
+          // But also update the value in React state as well so it is correct for future updates.
+          let {
+            value,
+            selectionStart,
+            selectionEnd
+          } = compositionStartState.current;
+          inputRef.current.value = value;
+          inputRef.current.setSelectionRange(selectionStart, selectionEnd);
+          state.setInputValue(value);
+        }
+      }
+    }),
+    labelProps,
+    descriptionProps,
+    errorMessageProps
+  }, validation);
+}
+
+/* eslint-disable prefer-const */
+// @ts-nocheck
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/* Inspired by https://github.com/AlmeroSteyn/react-aria-live */
+const LIVEREGION_TIMEOUT_DELAY = 7000;
+let liveAnnouncer = null;
+
+/**
+ * Announces the message using screen reader technology.
+ */
+function announce(message) {
+  let assertiveness = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'assertive';
+  let timeout = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : LIVEREGION_TIMEOUT_DELAY;
+  if (!liveAnnouncer) {
+    liveAnnouncer = new LiveAnnouncer();
+  }
+  liveAnnouncer.announce(message, assertiveness, timeout);
+}
+
+/**
+ * Stops all queued announcements.
+ */
+function clearAnnouncer(assertiveness) {
+  if (liveAnnouncer) {
+    liveAnnouncer.clear(assertiveness);
+  }
+}
+
+// LiveAnnouncer is implemented using vanilla DOM, not React. That's because as of React 18
+// ReactDOM.render is deprecated, and the replacement, ReactDOM.createRoot is moved into a
+// subpath import `react-dom/client`. That makes it hard for us to support multiple React versions.
+// As a global API, we can't use portals without introducing a breaking API change. LiveAnnouncer
+// is simple enough to implement without React, so that's what we do here.
+// See this discussion for more details: https://github.com/reactwg/react-18/discussions/125#discussioncomment-2382638
+class LiveAnnouncer {
+  constructor() {
+    _defineProperty(this, "node", void 0);
+    _defineProperty(this, "assertiveLog", void 0);
+    _defineProperty(this, "politeLog", void 0);
+    this.node = document.createElement('div');
+    this.node.dataset.liveAnnouncer = 'true';
+    // copied from VisuallyHidden
+    Object.assign(this.node.style, {
+      border: 0,
+      clip: 'rect(0 0 0 0)',
+      clipPath: 'inset(50%)',
+      height: '1px',
+      margin: '-1px',
+      overflow: 'hidden',
+      padding: 0,
+      position: 'absolute',
+      width: '1px',
+      whiteSpace: 'nowrap'
+    });
+    this.assertiveLog = this.createLog('assertive');
+    this.node.appendChild(this.assertiveLog);
+    this.politeLog = this.createLog('polite');
+    this.node.appendChild(this.politeLog);
+    document.body.prepend(this.node);
+  }
+  createLog(ariaLive) {
+    let node = document.createElement('div');
+    node.setAttribute('role', 'log');
+    node.setAttribute('aria-live', ariaLive);
+    node.setAttribute('aria-relevant', 'additions');
+    return node;
+  }
+  destroy() {
+    if (!this.node) {
+      return;
+    }
+    document.body.removeChild(this.node);
+    this.node = null;
+  }
+  announce(message) {
+    let assertiveness = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'assertive';
+    let timeout = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : LIVEREGION_TIMEOUT_DELAY;
+    if (!this.node) {
+      return;
+    }
+    let node = document.createElement('div');
+    node.textContent = message;
+    if (assertiveness === 'assertive') {
+      this.assertiveLog.appendChild(node);
+    } else {
+      this.politeLog.appendChild(node);
+    }
+    if (message !== '') {
+      setTimeout(() => {
+        node.remove();
+      }, timeout);
+    }
+  }
+  clear(assertiveness) {
+    if (!this.node) {
+      return;
+    }
+    if (!assertiveness || assertiveness === 'assertive') {
+      this.assertiveLog.innerHTML = '';
+    }
+    if (!assertiveness || assertiveness === 'polite') {
+      this.politeLog.innerHTML = '';
+    }
+  }
+}
+
+var Empty$1 = "Empty";
+var enUS = {
+	Empty: Empty$1
+};
+
+var Empty = "Vide";
+var frFR = {
+	Empty: Empty
+};
+
+var intlMessages = {
+  'en-US': enUS,
+  'fr-FR': frFR
+};
+
+/* eslint-disable prefer-const */
+function useSpinButton(props) {
+  const _async = useRef();
+  let {
+    value,
+    textValue,
+    minValue,
+    maxValue,
+    isDisabled,
+    isReadOnly,
+    isRequired,
+    onIncrement,
+    onIncrementPage,
+    onDecrement,
+    onDecrementPage,
+    onDecrementToMin,
+    onIncrementToMax
+  } = props;
+  const format = useMessageFormatter(intlMessages);
+  const clearAsync = () => clearTimeout(_async.current);
+
+  // eslint-disable-next-line arrow-body-style
+  useEffect(() => {
+    return () => clearAsync();
+  }, []);
+  let onKeyDown = e => {
+    if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey || isReadOnly) {
+      return;
+    }
+    switch (e.key) {
+      case 'PageUp':
+        if (onIncrementPage) {
+          e.preventDefault();
+          onIncrementPage === null || onIncrementPage === void 0 ? void 0 : onIncrementPage();
+          break;
+        }
+      // fallthrough!
+      case 'ArrowUp':
+      case 'Up':
+        if (onIncrement) {
+          e.preventDefault();
+          onIncrement === null || onIncrement === void 0 ? void 0 : onIncrement();
+        }
+        break;
+      case 'PageDown':
+        if (onDecrementPage) {
+          e.preventDefault();
+          onDecrementPage === null || onDecrementPage === void 0 ? void 0 : onDecrementPage();
+          break;
+        }
+      // fallthrough
+      case 'ArrowDown':
+      case 'Down':
+        if (onDecrement) {
+          e.preventDefault();
+          onDecrement === null || onDecrement === void 0 ? void 0 : onDecrement();
+        }
+        break;
+      case 'Home':
+        if (onDecrementToMin) {
+          e.preventDefault();
+          onDecrementToMin === null || onDecrementToMin === void 0 ? void 0 : onDecrementToMin();
+        }
+        break;
+      case 'End':
+        if (onIncrementToMax) {
+          e.preventDefault();
+          onIncrementToMax === null || onIncrementToMax === void 0 ? void 0 : onIncrementToMax();
+        }
+        break;
+    }
+  };
+  let isFocused = useRef(false);
+  let onFocus = () => {
+    isFocused.current = true;
+  };
+  let onBlur = () => {
+    isFocused.current = false;
+  };
+
+  // Replace Unicode hyphen-minus (U+002D) with minus sign (U+2212).
+  // This ensures that macOS VoiceOver announces it as "minus" even with other characters between the minus sign
+  // and the number (e.g. currency symbol). Otherwise it announces nothing because it assumes the character is a hyphen.
+  // In addition, replace the empty string with the word "Empty" so that iOS VoiceOver does not read "50%" for an empty field.
+  let ariaTextValue = textValue === '' ? format('Empty') : (textValue || `${value}`).replace('-', '\u2212');
+  useEffect(() => {
+    if (isFocused.current) {
+      clearAnnouncer('assertive');
+      announce(ariaTextValue, 'assertive');
+    }
+  }, [ariaTextValue]);
+  const onIncrementPressStart = useEffectEvent(initialStepDelay => {
+    clearAsync();
+    onIncrement === null || onIncrement === void 0 ? void 0 : onIncrement();
+    // Start spinning after initial delay
+    _async.current = window.setTimeout(() => {
+      if (maxValue === undefined || isNaN(maxValue) || value === undefined || isNaN(value) || value < maxValue) {
+        onIncrementPressStart(60);
+      }
+    }, initialStepDelay);
+  });
+  const onDecrementPressStart = useEffectEvent(initialStepDelay => {
+    clearAsync();
+    onDecrement === null || onDecrement === void 0 ? void 0 : onDecrement();
+    // Start spinning after initial delay
+    _async.current = window.setTimeout(() => {
+      if (minValue === undefined || isNaN(minValue) || value === undefined || isNaN(value) || value > minValue) {
+        onDecrementPressStart(60);
+      }
+    }, initialStepDelay);
+  });
+  let cancelContextMenu = e => {
+    e.preventDefault();
+  };
+  let {
+    addGlobalListener,
+    removeAllGlobalListeners
+  } = useGlobalListeners();
+  return {
+    spinButtonProps: {
+      role: 'spinbutton',
+      'aria-valuenow': value !== undefined && !isNaN(value) ? value : undefined,
+      'aria-valuetext': ariaTextValue,
+      'aria-valuemin': minValue,
+      'aria-valuemax': maxValue,
+      'aria-disabled': isDisabled || undefined,
+      'aria-readonly': isReadOnly || undefined,
+      'aria-required': isRequired || undefined,
+      onKeyDown,
+      onFocus,
+      onBlur
+    },
+    incrementButtonProps: {
+      onPressStart: () => {
+        onIncrementPressStart(400);
+        addGlobalListener(window, 'contextmenu', cancelContextMenu);
+      },
+      onPressEnd: () => {
+        clearAsync();
+        removeAllGlobalListeners();
+      },
+      onFocus,
+      onBlur
+    },
+    decrementButtonProps: {
+      onPressStart: () => {
+        onDecrementPressStart(400);
+        addGlobalListener(window, 'contextmenu', cancelContextMenu);
+      },
+      onPressEnd: () => {
+        clearAsync();
+        removeAllGlobalListeners();
+      },
+      onFocus,
+      onBlur
+    }
+  };
+}
+
+const _excluded$1 = ["id", "decrementAriaLabel", "incrementAriaLabel", "isDisabled", "isReadOnly", "isRequired", "minValue", "maxValue", "autoFocus", "label", "formatOptions", "onBlur", "onFocus", "onFocusChange", "onKeyDown", "onKeyUp", "description", "errorMessage", "isWheelDisabled"];
+/**
+ * Provides the behavior and accessibility implementation for a number field component.
+ * Number fields allow users to enter a number, and increment or decrement the value using stepper buttons.
+ */
+function useNumberField(props, state, inputRef) {
+  let {
+      id,
+      decrementAriaLabel,
+      incrementAriaLabel,
+      isDisabled,
+      isReadOnly,
+      isRequired,
+      minValue,
+      maxValue,
+      autoFocus,
+      label,
+      formatOptions,
+      onBlur = () => {},
+      onFocus,
+      onFocusChange,
+      onKeyDown,
+      onKeyUp,
+      description,
+      errorMessage,
+      isWheelDisabled
+    } = props,
+    otherProps = _objectWithoutProperties(props, _excluded$1);
+  let {
+    increment,
+    incrementToMax,
+    decrement,
+    decrementToMin,
+    numberValue,
+    inputValue,
+    commit,
+    commitValidation
+  } = state;
+  const format = useMessageFormatter(intlMessages$1);
+  let inputId = useId(id);
+  let {
+    focusProps
+  } = useFocus({
+    onBlur() {
+      // Set input value to normalized valid value
+      commit();
+    }
+  });
+  let numberFormatter = useNumberFormatter(formatOptions);
+  let intlOptions = useMemo(() => numberFormatter.resolvedOptions(), [numberFormatter]);
+
+  // Replace negative textValue formatted using currencySign: 'accounting'
+  // with a textValue that can be announced using a minus sign.
+  let textValueFormatter = useNumberFormatter(_objectSpread2(_objectSpread2({}, formatOptions), {}, {
+    currencySign: undefined
+  }));
+  let textValue = useMemo(() => isNaN(numberValue) ? '' : textValueFormatter.format(numberValue), [textValueFormatter, numberValue]);
+  let {
+    spinButtonProps,
+    incrementButtonProps: incButtonProps,
+    decrementButtonProps: decButtonProps
+  } = useSpinButton({
+    isDisabled,
+    isReadOnly,
+    isRequired,
+    maxValue,
+    minValue,
+    onIncrement: increment,
+    onIncrementToMax: incrementToMax,
+    onDecrement: decrement,
+    onDecrementToMin: decrementToMin,
+    value: numberValue,
+    textValue
+  });
+  let [focusWithin, setFocusWithin] = useState(false);
+  let {
+    focusWithinProps
+  } = useFocusWithin({
+    isDisabled,
+    onFocusWithinChange: setFocusWithin
+  });
+  let onWheel = useCallback(e => {
+    // if on a trackpad, users can scroll in both X and Y at once, check the magnitude of the change
+    // if it's mostly in the X direction, then just return, the user probably doesn't mean to inc/dec
+    // this isn't perfect, events come in fast with small deltas and a part of the scroll may give a false indication
+    // especially if the user is scrolling near 45deg
+    if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) {
+      return;
+    }
+    if (e.deltaY > 0) {
+      increment();
+    } else if (e.deltaY < 0) {
+      decrement();
+    }
+  }, [decrement, increment]);
+  // If the input isn't supposed to receive input, disable scrolling.
+  let scrollingDisabled = isWheelDisabled || isDisabled || isReadOnly || !focusWithin;
+  useScrollWheel({
+    onScroll: onWheel,
+    isDisabled: scrollingDisabled
+  }, inputRef);
+
+  // The inputMode attribute influences the software keyboard that is shown on touch devices.
+  // Browsers and operating systems are quite inconsistent about what keys are available, however.
+  // We choose between numeric and decimal based on whether we allow negative and fractional numbers,
+  // and based on testing on various devices to determine what keys are available in each inputMode.
+  let hasDecimals = intlOptions.maximumFractionDigits > 0;
+  let hasNegative = state.minValue === undefined || isNaN(state.minValue) || state.minValue < 0;
+  let inputMode = 'numeric';
+  if (isIPhone()) {
+    // iPhone doesn't have a minus sign in either numeric or decimal.
+    // Note this is only for iPhone, not iPad, which always has both
+    // minus and decimal in numeric.
+    if (hasNegative) {
+      inputMode = 'text';
+    } else if (hasDecimals) {
+      inputMode = 'decimal';
+    }
+  } else if (isAndroid()) {
+    // Android numeric has both a decimal point and minus key.
+    // decimal does not have a minus key.
+    if (hasNegative) {
+      inputMode = 'numeric';
+    } else if (hasDecimals) {
+      inputMode = 'decimal';
+    }
+  }
+  let onChange = value => {
+    if (state.validate(value)) {
+      state.setInputValue(value);
+    }
+  };
+  let domProps = filterDOMProps(props);
+  let onKeyDownEnter = useCallback(e => {
+    if (e.key === 'Enter') {
+      commit();
+      commitValidation();
+    } else {
+      e.continuePropagation();
+    }
+  }, [commit, commitValidation]);
+  let {
+    isInvalid,
+    validationErrors,
+    validationDetails
+  } = state.displayValidation;
+  let {
+    labelProps,
+    inputProps: textFieldProps,
+    descriptionProps,
+    errorMessageProps
+  } = useFormattedTextField(_objectSpread2(_objectSpread2(_objectSpread2({}, otherProps), domProps), {}, {
+    name: undefined,
+    label,
+    autoFocus,
+    isDisabled,
+    isReadOnly,
+    isRequired,
+    validate: undefined,
+    [privateValidationStateProp]: state,
+    value: inputValue,
+    defaultValue: undefined,
+    // defaultValue already used to populate state.inputValue, unneeded here
+    autoComplete: 'off',
+    'aria-label': props['aria-label'] || undefined,
+    'aria-labelledby': props['aria-labelledby'] || undefined,
+    id: inputId,
+    type: 'text',
+    // Can't use type="number" because then we can't have things like $ in the field.
+    inputMode,
+    onChange,
+    onBlur,
+    onFocus,
+    onFocusChange,
+    onKeyDown: useMemo(() => chain(onKeyDownEnter, onKeyDown), [onKeyDownEnter, onKeyDown]),
+    onKeyUp,
+    description,
+    errorMessage
+  }), state, inputRef);
+  useFormReset(inputRef, state.numberValue, state.setNumberValue);
+  let inputProps = mergeProps(spinButtonProps, focusProps, textFieldProps, {
+    // override the spinbutton role, we can't focus a spin button with VO
+    role: null,
+    // ignore aria-roledescription on iOS so that required state will announce when it is present
+    'aria-roledescription': !isIOS() ? format('numberField') : null,
+    'aria-valuemax': null,
+    'aria-valuemin': null,
+    'aria-valuenow': null,
+    'aria-valuetext': null,
+    autoCorrect: 'off',
+    spellCheck: 'false'
+  });
+  if (props.validationBehavior === 'native') {
+    inputProps['aria-required'] = undefined;
+  }
+  let onButtonPressStart = e => {
+    // If focus is already on the input, keep it there so we don't hide the
+    // software keyboard when tapping the increment/decrement buttons.
+    if (document.activeElement === inputRef.current) {
+      return;
+    }
+
+    // Otherwise, when using a mouse, move focus to the input.
+    // On touch, or with a screen reader, focus the button so that the software
+    // keyboard does not appear and the screen reader cursor is not moved off the button.
+    if (e.pointerType === 'mouse') {
+      var _inputRef$current;
+      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+    } else {
+      e.target.focus();
+    }
+  };
+
+  // Determine the label for the increment and decrement buttons. There are 4 cases:
+  //
+  // 1. With a visible label that is a string: aria-label: `Increase ${props.label}`
+  // 2. With a visible label that is JSX: aria-label: 'Increase', aria-labelledby: '${incrementId} ${labelId}'
+  // 3. With an aria-label: aria-label: `Increase ${props['aria-label']}`
+  // 4. With an aria-labelledby: aria-label: 'Increase', aria-labelledby: `${incrementId} ${props['aria-labelledby']}`
+  //
+  // (1) and (2) could possibly be combined and both use aria-labelledby. However, placing the label in
+  // the aria-label string rather than using aria-labelledby gives more flexibility to translators to change
+  // the order or add additional words around the label if needed.
+  let fieldLabel = props['aria-label'] || (typeof props.label === 'string' ? props.label : '');
+  let ariaLabelledby;
+  if (!fieldLabel) {
+    ariaLabelledby = props.label != null ? labelProps.id : props['aria-labelledby'];
+  }
+  let incrementId = useId();
+  let decrementId = useId();
+  let incrementButtonProps = mergeProps(incButtonProps, {
+    'aria-label': incrementAriaLabel || format('increase', {
+      fieldLabel
+    }).trim(),
+    id: ariaLabelledby && !incrementAriaLabel ? incrementId : null,
+    'aria-labelledby': ariaLabelledby && !incrementAriaLabel ? `${incrementId} ${ariaLabelledby}` : null,
+    'aria-controls': inputId,
+    excludeFromTabOrder: true,
+    preventFocusOnPress: true,
+    allowFocusWhenDisabled: true,
+    isDisabled: !state.canIncrement,
+    onPressStart: onButtonPressStart
+  });
+  let decrementButtonProps = mergeProps(decButtonProps, {
+    'aria-label': decrementAriaLabel || format('decrease', {
+      fieldLabel
+    }).trim(),
+    id: ariaLabelledby && !decrementAriaLabel ? decrementId : null,
+    'aria-labelledby': ariaLabelledby && !decrementAriaLabel ? `${decrementId} ${ariaLabelledby}` : null,
+    'aria-controls': inputId,
+    excludeFromTabOrder: true,
+    preventFocusOnPress: true,
+    allowFocusWhenDisabled: true,
+    isDisabled: !state.canDecrement,
+    onPressStart: onButtonPressStart
+  });
+  return {
+    groupProps: _objectSpread2(_objectSpread2({}, focusWithinProps), {}, {
+      role: 'group',
+      'aria-disabled': isDisabled,
+      'aria-invalid': isInvalid ? 'true' : undefined
+    }),
+    labelProps,
+    inputProps,
+    incrementButtonProps,
+    decrementButtonProps,
+    errorMessageProps,
+    descriptionProps,
+    isInvalid,
+    validationErrors,
+    validationDetails
+  };
+}
+
+/* eslint-disable prefer-const */
+
+// Order with overrides is important: 'button' should be default
+
+/**
+ * Provides the behavior and accessibility implementation for a button component. Handles mouse, keyboard, and touch interactions,
+ * focus behavior, and ARIA props for both native button elements and custom element types.
+ * @param props - Props to be applied to the button.
+ * @param ref - A ref to a DOM element for the button.
+ */
+function useButton(props, ref) {
+  let {
+    elementType = 'button',
+    isDisabled,
+    onPress,
+    onPressStart,
+    onPressEnd,
+    onPressUp,
+    onPressChange,
+    // @ts-ignore - undocumented
+    preventFocusOnPress,
+    // @ts-ignore - undocumented
+    allowFocusWhenDisabled,
+    // @ts-ignore
+    onClick: deprecatedOnClick,
+    href,
+    target,
+    rel,
+    type = 'button'
+  } = props;
+  let additionalProps;
+  if (elementType === 'button') {
+    additionalProps = {
+      type,
+      disabled: isDisabled
+    };
+  } else {
+    additionalProps = {
+      role: 'button',
+      tabIndex: isDisabled ? undefined : 0,
+      href: elementType === 'a' && isDisabled ? undefined : href,
+      target: elementType === 'a' ? target : undefined,
+      type: elementType === 'input' ? type : undefined,
+      disabled: elementType === 'input' ? isDisabled : undefined,
+      'aria-disabled': !isDisabled || elementType === 'input' ? undefined : isDisabled,
+      rel: elementType === 'a' ? rel : undefined
+    };
+  }
+  let {
+    pressProps,
+    isPressed
+  } = usePress({
+    onPressStart,
+    onPressEnd,
+    onPressChange,
+    onPress,
+    onPressUp,
+    isDisabled,
+    preventFocusOnPress,
+    ref
+  });
+  let {
+    focusableProps
+  } = useFocusable(props, ref);
+  if (allowFocusWhenDisabled) {
+    focusableProps.tabIndex = isDisabled ? -1 : focusableProps.tabIndex;
+  }
+  let buttonProps = mergeProps(focusableProps, pressProps, filterDOMProps(props, {
+    labelable: true
+  }));
+  return {
+    isPressed,
+    // Used to indicate press state for visual
+    buttonProps: mergeProps(additionalProps, buttonProps, {
+      'aria-haspopup': props['aria-haspopup'],
+      'aria-expanded': props['aria-expanded'],
+      'aria-controls': props['aria-controls'],
+      'aria-pressed': props['aria-pressed'],
+      onClick: e => {
+        if (deprecatedOnClick) {
+          deprecatedOnClick(e);
+          console.warn('onClick is deprecated, please use onPress');
+        }
+      }
+    })
+  };
+}
+
+/**
+ * Component style.
+ */
+const StyledNumberField = styled.div`
+  height: fit-content;
+  position: relative;
+  width: fit-content;
+  margin: 0;
+  min-width: 0;
+  padding: 0;
+  ${baseStyling}
+
+  border: 0;
+  display: inline-flex;
+  flex-direction: column;
+  vertical-align: top;
+
+  ${_ref => {
+  let {
+    $hasLeftIcon,
+    $hasContent,
+    $isFocused,
+    $isDisabled,
+    $isInvalid,
+    $isColored,
+    $theme,
+    $variant
+  } = _ref;
+  return css`
+    ${$isDisabled ? css`
+          pointer-events: none;
+        ` : ''}
+
+    .redsift-number-field__label {
+      font-family: var(--redsift-typography-input-text-font-family);
+      font-size: var(--redsift-typography-input-text-font-size);
+      font-weight: var(--redsift-typography-input-text-font-weight);
+      line-height: var(--redsift-typography-input-text-line-height);
+      left: ${$hasLeftIcon && !$hasContent ? '32px' : '0'};
+      overflow: hidden;
+      pointer-events: none;
+      position: absolute;
+      text-overflow: ellipsis;
+      top: ${$hasContent ? '-8px' : '-5px'};
+      transform-origin: top left;
+      transition: color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
+        max-width 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+      white-space: nowrap;
+      z-index: 1;
+
+      ${!$hasContent ? css`
+            max-width: calc(100% - 24px - 42px - ${$variant === NumberFieldVariant.underline ? '0px' : '14px'});
+            transform: translate(${$variant === NumberFieldVariant.underline ? '0px' : '14px'}, 16px) scale(1);
+          ` : css`
+            max-width: calc(133% - 32px - 42px - ${$variant === NumberFieldVariant.underline ? '0px' : '14px'});
+            transform: translate(${$variant === NumberFieldVariant.underline ? '0px' : '14px'}, 1px) scale(0.733);
+          `}
+
+      ${$isDisabled ? css`
+            color: var(--redsift-color-neutral-light-grey);
+          ` : $isInvalid ? css`
+            color: var(--redsift-color-notifications-error-primary);
+          ` : $isFocused ? css`
+            color: ${$isColored ? 'var(--redsift-color-primary-n)' : 'var(--redsift-color-notifications-question-primary)'};
+          ` : css`
+            color: var(--redsift-color-neutral-${$theme === Theme.light ? 'x-dark-grey' : 'light-grey'});
+          `}
+    }
+
+    .redsift-number-field__input-wrapper {
+      align-items: flex-start;
+      box-sizing: border-box;
+      cursor: text;
+      display: inline-flex;
+      min-height: 42px;
+      position: relative;
+      width: 100%;
+    }
+
+    .redsift-number-field-input-wrapper__input {
+      background: none;
+      border: 0;
+      box-sizing: content-box;
+      display: flex;
+      flex: 1 1 auto;
+      font-family: var(--redsift-typography-input-text-font-family);
+      font-size: var(--redsift-typography-input-text-font-size);
+      font-weight: var(--redsift-typography-input-text-font-weight);
+      line-height: var(--redsift-typography-input-text-line-height);
+      min-width: 0;
+      min-width: 100px;
+      padding: 2px 0;
+      width: auto;
+      padding-bottom: 6px;
+      ${$variant !== NumberFieldVariant.underline && !$hasLeftIcon ? css`
+            padding-left: 16px;
+          ` : ''}
+      padding-top: 10px;
+
+      ${$isDisabled ? css`
+            color: var(--redsift-color-neutral-light-grey);
+          ` : css`
+            color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});
+          `}
+    }
+
+    .redsift-number-field-input-wrapper__input::placeholder {
+      color: var(--redsift-color-neutral-mid-grey);
+    }
+
+    .redsift-number-field-input-wrapper__input:focus {
+      outline: 0;
+    }
+
+    .redsift-number-field-input-wrapper__fieldset {
+      border-style: solid;
+      bottom: 0;
+      left: 1px;
+      margin: 0;
+      min-width: 0%;
+      overflow: hidden;
+      padding: 0 8px;
+      pointer-events: none;
+      position: absolute;
+      right: 0;
+      text-align: left;
+      top: -5px;
+
+      ${$variant === NumberFieldVariant.underline ? css`
+            border-bottom-width: 2px;
+          ` : css`
+            border-radius: 4px;
+            border-width: 2px;
+          `}
+
+      ${$isDisabled ? css`
+            border-color: var(--redsift-color-neutral-light-grey);
+          ` : $isInvalid ? css`
+            border-color: var(--redsift-color-notifications-error-primary);
+          ` : $isFocused ? css`
+            border-color: ${$isColored ? 'var(--redsift-color-primary-n)' : 'var(--redsift-color-notifications-question-primary)'};
+          ` : css`
+            border-color: var(--redsift-color-neutral-mid-grey);
+          `}
+    }
+
+    .redsift-number-field-input-wrapper-fieldset__legend {
+      display: block;
+      float: unset;
+      font-size: 11px;
+      height: 11px;
+      overflow: hidden;
+      padding: 0;
+      visibility: hidden;
+      white-space: nowrap;
+      width: auto;
+
+      ${!$hasContent ? css`
+            max-width: 0.01px;
+            transition: max-width 50ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+          ` : css`
+            max-width: calc(100% - 42px);
+            transition: max-width 100ms cubic-bezier(0, 0, 0.2, 1) 50ms;
+          `}
+    }
+
+    .redsift-number-field-input-wrapper-fieldset__legend > span {
+      display: inline-block;
+      opacity: 0;
+      padding-left: 5px;
+      padding-right: 5px;
+      visibility: visible;
+    }
+
+    .redsift-icon-button {
+      padding: 2px;
+    }
+
+    .redsift-number-field-input-wrapper__toolbar {
+      > button {
+        height: 21px;
+        width: 42px;
+        ${$isDisabled ? css`
+              border-color: var(--redsift-color-neutral-light-grey);
+            ` : $isInvalid ? css`
+              border-color: var(--redsift-color-notifications-error-primary);
+            ` : $isFocused ? css`
+              border-color: ${$isColored ? 'var(--redsift-color-primary-n)' : 'var(--redsift-color-notifications-question-primary)'};
+            ` : css`
+              border-color: var(--redsift-color-neutral-mid-grey);
+            `}
+      }
+
+      .redsift-number-field-input-wrapper-toolbar__increment-button {
+        border-top-width: 0;
+        border-right-width: 0;
+        border-bottom-width: 1px;
+        border-left-width: 2px;
+        border-top-left-radius: 0;
+        border-top-right-radius: 4px;
+        border-bottom-right-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+
+      .redsift-number-field-input-wrapper-toolbar__decrement-button {
+        border-top-width: 1px;
+        border-right-width: 0;
+        border-bottom-width: 0;
+        border-left-width: 2px;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 4px;
+        border-bottom-left-radius: 0;
+      }
+    }
+
+    ${$variant !== NumberFieldVariant.underline ? css`
+          .redsift-icon.left {
+            padding-left: 12px;
+            padding-right: 8px;
+            line-height: 28px;
+            top: 10px;
+          }
+        ` : css`
+          .redsift-icon.left {
+            padding-right: 8px;
+            top: 10px;
+          }
+        `}
+  `;
+}}
+`;
+
+const _excluded = ["autoFocus", "className", "decrementAriaLabel", "defaultValue", "formatOptions", "id", "incrementAriaLabel", "inputProps", "inputRef", "isColored", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "isWheelDisabled", "label", "leftIcon", "maxValue", "minValue", "onBlur", "onChange", "onFocus", "onFocusChange", "onKeyDown", "onKeyUp", "placeholder", "step", "theme", "value", "variant"];
+const COMPONENT_NAME = 'NumberField';
+const CLASSNAME = 'redsift-number-field';
 
 /**
  * The NumberField component.
  * Can be used as controlled or uncontrolled.
  */
-declare const NumberField: Comp<NumberFieldProps, HTMLDivElement>;
+const NumberField = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      autoFocus,
+      className,
+      decrementAriaLabel,
+      defaultValue,
+      formatOptions,
+      id,
+      incrementAriaLabel,
+      inputProps: propsInputProps,
+      inputRef: propsInputRef,
+      isColored = true,
+      isDisabled,
+      isInvalid,
+      isReadOnly,
+      isRequired,
+      isWheelDisabled,
+      label,
+      leftIcon,
+      maxValue,
+      minValue,
+      onBlur: onBlurProps,
+      onChange: propsOnChange,
+      onFocus: onFocusProps,
+      onFocusChange,
+      onKeyDown,
+      onKeyUp,
+      placeholder,
+      step,
+      theme: propsTheme,
+      value,
+      variant = NumberFieldVariant.default
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const numberFieldProps = {
+    id,
+    isDisabled,
+    isReadOnly,
+    isRequired,
+    minValue,
+    maxValue,
+    step,
+    autoFocus,
+    label,
+    formatOptions,
+    onBlur: onBlurProps,
+    onFocus: onFocusProps,
+    onFocusChange,
+    onKeyDown,
+    onKeyUp,
+    value,
+    defaultValue,
+    onChange: propsOnChange
+  };
+  const theme = useTheme(propsTheme);
+  const {
+    locale
+  } = useLocale();
+  const state = useNumberFieldState(_objectSpread2({
+    locale
+  }, numberFieldProps));
+  const _inputRef = React__default.useRef(null);
+  const inputRef = propsInputRef !== null && propsInputRef !== void 0 ? propsInputRef : _inputRef;
+  const {
+    labelProps,
+    groupProps,
+    inputProps,
+    incrementButtonProps,
+    decrementButtonProps
+  } = useNumberField(_objectSpread2({
+    decrementAriaLabel,
+    incrementAriaLabel,
+    isWheelDisabled
+  }, numberFieldProps), state, inputRef);
+  const incrementButtonRef = useRef(null);
+  const {
+    buttonProps: incrementButtonForwardedProps
+  } = useButton(incrementButtonProps, incrementButtonRef);
+  const decrementButtonRef = useRef(null);
+  const {
+    buttonProps: decrementButtonForwardedProps
+  } = useButton(decrementButtonProps, decrementButtonRef);
+  const {
+    isFocusVisible,
+    isFocused,
+    focusProps: {
+      onFocus,
+      onBlur
+    }
+  } = useFocusRing({
+    autoFocus
+  });
+  const [isFocusWithin, setFocusWithin] = useState(Boolean(autoFocus));
+  const {
+    focusWithinProps
+  } = useFocusWithin({
+    onFocusWithinChange: isFocusWithin => setFocusWithin(isFocusWithin)
+  });
+  warnIfNoAccessibleLabelFound(props, [label], 'NumberField');
+  return /*#__PURE__*/React__default.createElement(StyledNumberField, _extends({}, forwardedProps, focusWithinProps, {
+    $hasContent: isFocusWithin || Boolean(inputProps.value !== undefined && inputProps.value !== '') || Boolean(placeholder),
+    $hasLeftIcon: Boolean(leftIcon),
+    $isColored: isColored,
+    $isDisabled: isDisabled,
+    $isFocusVisible: isFocusVisible,
+    $isInvalid: isInvalid || isRequired && !(inputProps.value !== undefined),
+    $isRequired: isRequired,
+    $isFocused: isFocused,
+    $theme: theme,
+    $variant: variant,
+    className: classNames(NumberField.className, className),
+    ref: ref
+  }), label ? /*#__PURE__*/React__default.createElement("label", _extends({}, labelProps, {
+    className: `${NumberField.className}__label`
+  }), /*#__PURE__*/React__default.createElement("span", null, label)) : null, /*#__PURE__*/React__default.createElement("div", {
+    className: `${NumberField.className}__input-wrapper`
+  }, leftIcon ? /*#__PURE__*/React__default.createElement(Icon, _extends({
+    color: isDisabled ? 'question' : 'black'
+  }, leftIcon, {
+    "aria-hidden": "true",
+    className: "left"
+  })) : null, /*#__PURE__*/React__default.createElement(Flexbox, _extends({}, groupProps, {
+    flexDirection: "row",
+    gap: "0",
+    width: "100%"
+  }), /*#__PURE__*/React__default.createElement("input", _extends({}, propsInputProps, inputProps, {
+    onChange: event => {
+      if (propsOnChange) {
+        propsOnChange(Number(event.target.value));
+      } else {
+        var _inputProps$onChange;
+        (_inputProps$onChange = inputProps.onChange) === null || _inputProps$onChange === void 0 ? void 0 : _inputProps$onChange.call(inputProps, event);
+      }
+    },
+    onBlur: event => {
+      onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+      onBlurProps === null || onBlurProps === void 0 ? void 0 : onBlurProps(event);
+    },
+    onFocus: event => {
+      onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+      onFocusProps === null || onFocusProps === void 0 ? void 0 : onFocusProps(event);
+    },
+    placeholder: placeholder ? `${placeholder}` : undefined,
+    className: `${NumberField.className}-input-wrapper__input`,
+    ref: inputRef,
+    width: "100%"
+  })), /*#__PURE__*/React__default.createElement(Flexbox, {
+    className: `${NumberField.className}-input-wrapper__toolbar`,
+    flexDirection: "column",
+    gap: "0"
+  }, /*#__PURE__*/React__default.createElement(StyledIconButton, _extends({
+    $color: "grey",
+    $isActive: false,
+    $isDisabled: isDisabled,
+    $isGradient: false,
+    $isHovered: false,
+    $isLoading: false,
+    $variant: variant === NumberFieldVariant.underline ? 'unstyled' : 'secondary',
+    $theme: theme
+  }, incrementButtonForwardedProps, {
+    className: `${NumberField.className}-input-wrapper-toolbar__increment-button`
+  }), /*#__PURE__*/React__default.createElement(Icon, {
+    icon: mdiMenuUp,
+    color: isDisabled ? undefined : 'grey'
+  })), /*#__PURE__*/React__default.createElement(StyledIconButton, _extends({
+    $color: "grey",
+    $isActive: false,
+    $isDisabled: isDisabled,
+    $isGradient: false,
+    $isHovered: false,
+    $isLoading: false,
+    $variant: variant === NumberFieldVariant.underline ? 'unstyled' : 'secondary',
+    $theme: theme
+  }, decrementButtonForwardedProps, {
+    className: `${NumberField.className}-input-wrapper-toolbar__decrement-button`
+  }), /*#__PURE__*/React__default.createElement(Icon, {
+    icon: mdiMenuDown,
+    color: isDisabled ? undefined : 'grey'
+  })))), /*#__PURE__*/React__default.createElement("fieldset", {
+    "aria-hidden": "true",
+    className: `${NumberField.className}-input-wrapper__fieldset`
+  }, /*#__PURE__*/React__default.createElement("legend", {
+    className: `${NumberField.className}-input-wrapper-fieldset__legend`
+  }, label ? /*#__PURE__*/React__default.createElement("span", null, label) : null))));
+});
+NumberField.className = CLASSNAME;
+NumberField.displayName = COMPONENT_NAME;
 
-export { NumberFieldVariant as N, StyledNumberFieldProps as S, NumberFieldProps as a, NumberField as b };
+export { NumberFieldVariant as N, NumberField as a };
+//# sourceMappingURL=NumberField.js.map