@launchpad-ui/form 0.8.13 → 0.8.15

package/dist/index.es.js

@@ -1,37 +1,42 @@
 import './style.css';
-import { forwardRef, useState, useRef, Children, isValidElement, cloneElement } from "react";
-import { cx } from "classix";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { AlertRhombus } from "@launchpad-ui/icons";
+import { forwardRef, useRef, useMemo, useState, Children, isValidElement, cloneElement } from "react";
+import { cx } from "classix";
+import { AlertRhombus, ExpandLess, ExpandMore } from "@launchpad-ui/icons";
 import { VisuallyHidden } from "@react-aria/visually-hidden";
-const formGroup = "_formGroup_p76jo_10";
-const formIncreasedErrorMargin = "_formIncreasedErrorMargin_p76jo_18";
-const formInline = "_formInline_p76jo_22";
-const form = "_form_p76jo_10";
-const formInput = "_formInput_p76jo_36";
-const isFocused = "_isFocused_p76jo_56";
-const iconField = "_iconField_p76jo_73";
-const suffixContainer = "_suffixContainer_p76jo_77";
-const isInvalid = "_isInvalid_p76jo_82";
-const inlineForm = "_inlineForm_p76jo_93";
-const label = "_label_p76jo_98";
-const labelDisabled = "_labelDisabled_p76jo_104";
-const labelOptional = "_labelOptional_p76jo_108";
-const compactTextField = "_compactTextField_p76jo_114";
-const fieldError = "_fieldError_p76jo_138";
-const hint = "_hint_p76jo_184";
-const field = "_field_p76jo_138";
-const fieldErrorMessage = "_fieldErrorMessage_p76jo_204";
-const isDisabled = "_isDisabled_p76jo_217";
-const checkbox = "_checkbox_p76jo_284";
-const radio = "_radio_p76jo_291";
-const number = "_number_p76jo_295";
-const suffix = "_suffix_p76jo_77";
-const iconFieldIcon = "_iconFieldIcon_p76jo_333";
-const formInputTiny = "_formInputTiny_p76jo_341";
-const requiredAsterisk = "_requiredAsterisk_p76jo_350";
-const fieldSet = "_fieldSet_p76jo_354";
-const isActive = "_isActive_p76jo_365";
+import { useButton } from "@react-aria/button";
+import { useLocale } from "@react-aria/i18n";
+import { useNumberField as useNumberField$1 } from "@react-aria/numberfield";
+import { useNumberFieldState } from "@react-stately/numberfield";
+const formGroup = "_formGroup_1u9hb_10";
+const formIncreasedErrorMargin = "_formIncreasedErrorMargin_1u9hb_18";
+const formInline = "_formInline_1u9hb_22";
+const form = "_form_1u9hb_10";
+const formInput = "_formInput_1u9hb_36";
+const isFocused = "_isFocused_1u9hb_56";
+const iconField = "_iconField_1u9hb_73";
+const suffixContainer = "_suffixContainer_1u9hb_77";
+const isInvalid = "_isInvalid_1u9hb_82";
+const inlineForm = "_inlineForm_1u9hb_93";
+const label = "_label_1u9hb_98";
+const labelDisabled = "_labelDisabled_1u9hb_104";
+const labelOptional = "_labelOptional_1u9hb_108";
+const compactTextField = "_compactTextField_1u9hb_114";
+const fieldError = "_fieldError_1u9hb_138";
+const hint = "_hint_1u9hb_184";
+const field = "_field_1u9hb_138";
+const fieldErrorMessage = "_fieldErrorMessage_1u9hb_204";
+const isDisabled = "_isDisabled_1u9hb_217";
+const checkbox = "_checkbox_1u9hb_284";
+const radio = "_radio_1u9hb_291";
+const number = "_number_1u9hb_295";
+const suffix = "_suffix_1u9hb_77";
+const iconFieldIcon = "_iconFieldIcon_1u9hb_333";
+const formInputTiny = "_formInputTiny_1u9hb_341";
+const requiredAsterisk = "_requiredAsterisk_1u9hb_350";
+const fieldSet = "_fieldSet_1u9hb_354";
+const isActive = "_isActive_1u9hb_365";
+const numberField = "_numberField_1u9hb_372";
 const styles = {
   formGroup,
   formIncreasedErrorMargin,
@@ -60,7 +65,11 @@ const styles = {
   formInputTiny,
   requiredAsterisk,
   fieldSet,
-  isActive
+  isActive,
+  numberField,
+  "numberField-input": "_numberField-input_1u9hb_376",
+  "numberField-stepperContainer": "_numberField-stepperContainer_1u9hb_380",
+  "numberField-stepper": "_numberField-stepper_1u9hb_380"
 };
 const RequiredAsterisk = ({
   className,
@@ -68,12 +77,7 @@ const RequiredAsterisk = ({
   ...rest
 }) => {
   const classes = cx(styles.requiredAsterisk, className);
-  return /* @__PURE__ */ jsx("span", {
-    ...rest,
-    "data-test-id": testId,
-    className: classes,
-    children: "*"
-  });
+  return /* @__PURE__ */ jsx("span", { ...rest, "data-test-id": testId, className: classes, children: "*" });
 };
 const Label = ({
   disabled,
@@ -85,141 +89,164 @@ const Label = ({
   ...rest
 }) => {
   const classes = cx(styles.label, className, disabled && styles.labelDisabled);
-  return /* @__PURE__ */ jsxs("label", {
-    ...rest,
-    "data-test-id": testId,
-    className: classes,
-    children: [children, optional && !required && /* @__PURE__ */ jsx("small", {
-      className: styles.labelOptional,
-      children: "(optional)"
-    }), required && !optional && /* @__PURE__ */ jsx(RequiredAsterisk, {})]
-  });
+  return /* @__PURE__ */ jsxs("label", { ...rest, "data-test-id": testId, className: classes, children: [
+    children,
+    optional && !required && /* @__PURE__ */ jsx("small", { className: styles.labelOptional, children: "(optional)" }),
+    required && !optional && /* @__PURE__ */ jsx(RequiredAsterisk, {})
+  ] });
 };
-const Checkbox = forwardRef(({
-  "aria-label": ariaLabel,
-  "aria-labelledby": ariaLabelledby,
-  children,
-  disabled,
-  checked,
-  labelClassName,
-  "data-test-id": testId = "checkbox",
-  ...rest
-}, ref) => {
-  const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
-  if (!children && !hasAriaLabel) {
-    console.warn("If you do not provide children, you must specify an aria-label for accessibility");
+const Checkbox = forwardRef(
+  ({
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    children,
+    disabled,
+    checked,
+    labelClassName,
+    "data-test-id": testId = "checkbox",
+    ...rest
+  }, ref) => {
+    const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
+    if (!children && !hasAriaLabel) {
+      console.warn(
+        "If you do not provide children, you must specify an aria-label for accessibility"
+      );
+    }
+    return /* @__PURE__ */ jsxs(Label, { className: labelClassName, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ...rest,
+          ref,
+          checked,
+          "aria-checked": checked ? "true" : "false",
+          "aria-label": ariaLabel,
+          "aria-labelledby": ariaLabelledby,
+          className: styles.checkbox,
+          disabled,
+          type: "checkbox",
+          "data-test-id": testId
+        }
+      ),
+      " ",
+      disabled ? /* @__PURE__ */ jsx("span", { className: styles.labelDisabled, children }) : children
+    ] });
   }
-  return /* @__PURE__ */ jsxs(Label, {
-    className: labelClassName,
-    children: [/* @__PURE__ */ jsx("input", {
-      ...rest,
-      ref,
-      checked,
-      "aria-checked": checked ? "true" : "false",
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledby,
-      className: styles.checkbox,
-      disabled,
-      type: "checkbox",
-      "data-test-id": testId
-    }), " ", disabled ? /* @__PURE__ */ jsx("span", {
-      className: styles.labelDisabled,
-      children
-    }) : children]
-  });
-});
+);
 Checkbox.displayName = "Checkbox";
 const createFieldErrorId = (fieldIdentifier) => fieldIdentifier ? `${[...fieldIdentifier].join("")}-err` : void 0;
-const TextField = forwardRef(({
-  className,
-  type = "text",
-  tiny = false,
-  readOnly,
-  tabIndex = 0,
-  suffix: suffix2,
-  overrideWidth,
-  "data-test-id": testId = "text-field",
-  ...rest
-}, ref) => {
-  const classes = overrideWidth ? className : cx(styles.formInput, tiny && styles.formInputTiny, className);
-  if (suffix2) {
-    return /* @__PURE__ */ jsxs("div", {
-      className: styles.suffixContainer,
-      children: [/* @__PURE__ */ jsx("input", {
+function hasObjectChanged(obj1, obj2) {
+  return Object.keys(obj1).length !== Object.keys(obj2).length || Object.keys(obj1).some((k) => {
+    const key = k;
+    return typeof obj1[key] === "object" && typeof obj2[key] === "object" ? hasObjectChanged(obj1[key], obj2[key]) : obj1[key] !== obj2[key];
+  });
+}
+function useObjectMemo(obj) {
+  const objRef = useRef(obj);
+  return useMemo(() => {
+    if (hasObjectChanged(obj, objRef.current)) {
+      objRef.current = obj;
+    }
+    return objRef.current;
+  }, [obj]);
+}
+const TextField = forwardRef(
+  ({
+    className,
+    type = "text",
+    tiny = false,
+    readOnly,
+    tabIndex = 0,
+    suffix: suffix2,
+    overrideWidth,
+    "data-test-id": testId = "text-field",
+    ...rest
+  }, ref) => {
+    const classes = overrideWidth ? className : cx(styles.formInput, tiny && styles.formInputTiny, className);
+    if (suffix2) {
+      return /* @__PURE__ */ jsxs("div", { className: styles.suffixContainer, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ...rest,
+            type,
+            "data-test-id": testId,
+            className: classes,
+            readOnly,
+            ref,
+            "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
+          }
+        ),
+        /* @__PURE__ */ jsx("label", { className: styles.suffix, htmlFor: rest.id, children: suffix2 })
+      ] });
+    }
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
         ...rest,
         type,
-        "data-test-id": testId,
         className: classes,
         readOnly,
+        tabIndex,
         ref,
+        "data-test-id": testId,
+        style: overrideWidth ? {
+          width: overrideWidth
+        } : void 0,
         "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
-      }), /* @__PURE__ */ jsx("label", {
-        className: styles.suffix,
-        htmlFor: rest.id,
-        children: suffix2
-      })]
-    });
+      }
+    );
   }
-  return /* @__PURE__ */ jsx("input", {
-    ...rest,
-    type,
-    className: classes,
-    readOnly,
-    tabIndex,
-    ref,
-    "data-test-id": testId,
-    style: overrideWidth ? {
-      width: overrideWidth
-    } : void 0,
-    "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
-  });
-});
+);
 TextField.displayName = "TextField";
-const CompactTextField = forwardRef(({
-  className,
-  id,
-  label: label2,
-  needsErrorFeedback,
-  value,
-  onFocus,
-  onBlur,
-  "data-test-id": testId = "compact-text-field",
-  ...rest
-}, ref) => {
-  const [isActive2, setIsActive] = useState((typeof value === "boolean" || value ? value.toString() : "").trim().length !== 0);
-  const isActiveState = isActive2 || needsErrorFeedback;
-  const classes = cx(styles.compactTextField, className, isActiveState && styles.isActive);
-  const placeholder = isActiveState ? "" : label2;
-  const handleFocus = (event) => {
-    setIsActive(true);
-    if (onFocus) {
-      onFocus(event);
-    }
-  };
-  const handleBlur = (event) => {
-    const value2 = event.target.value || "";
-    setIsActive(value2.trim().length !== 0);
-    if (onBlur) {
-      onBlur(event);
-    }
-  };
-  return /* @__PURE__ */ jsxs("div", {
-    className: classes,
-    "data-test-id": testId,
-    children: [/* @__PURE__ */ jsx(Label, {
-      htmlFor: id,
-      children: label2
-    }), /* @__PURE__ */ jsx(TextField, {
-      ...rest,
-      id,
-      placeholder,
-      value,
-      ref,
-      onFocus: handleFocus,
-      onBlur: handleBlur
-    })]
-  });
-});
+const CompactTextField = forwardRef(
+  ({
+    className,
+    id,
+    label: label2,
+    needsErrorFeedback,
+    value,
+    onFocus,
+    onBlur,
+    "data-test-id": testId = "compact-text-field",
+    ...rest
+  }, ref) => {
+    const [isActive2, setIsActive] = useState(
+      (typeof value === "boolean" || value ? value.toString() : "").trim().length !== 0
+    );
+    const isActiveState = isActive2 || needsErrorFeedback;
+    const classes = cx(styles.compactTextField, className, isActiveState && styles.isActive);
+    const placeholder = isActiveState ? "" : label2;
+    const handleFocus = (event) => {
+      setIsActive(true);
+      if (onFocus) {
+        onFocus(event);
+      }
+    };
+    const handleBlur = (event) => {
+      const value2 = event.target.value || "";
+      setIsActive(value2.trim().length !== 0);
+      if (onBlur) {
+        onBlur(event);
+      }
+    };
+    return /* @__PURE__ */ jsxs("div", { className: classes, "data-test-id": testId, children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: id, children: label2 }),
+      /* @__PURE__ */ jsx(
+        TextField,
+        {
+          ...rest,
+          id,
+          placeholder,
+          value,
+          ref,
+          onFocus: handleFocus,
+          onBlur: handleBlur
+        }
+      )
+    ] });
+  }
+);
 CompactTextField.displayName = "CompactTextField";
 const FieldError = ({
   name,
@@ -231,17 +258,22 @@ const FieldError = ({
   if (!errorMessage) {
     return null;
   }
-  return /* @__PURE__ */ jsxs("span", {
-    ...rest,
-    className: cx(styles.fieldError, className),
-    "aria-live": "polite",
-    "data-test-id": testId,
-    "aria-label": "Error",
-    id: createFieldErrorId(name),
-    children: [/* @__PURE__ */ jsx(AlertRhombus, {
-      size: "small"
-    }), " ", errorMessage]
-  });
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ...rest,
+      className: cx(styles.fieldError, className),
+      "aria-live": "polite",
+      "data-test-id": testId,
+      "aria-label": "Error",
+      id: createFieldErrorId(name),
+      children: [
+        /* @__PURE__ */ jsx(AlertRhombus, { size: "small" }),
+        " ",
+        errorMessage
+      ]
+    }
+  );
 };
 const FieldSet = ({
   children,
@@ -250,12 +282,7 @@ const FieldSet = ({
   ...rest
 }) => {
   const classes = cx(styles.fieldSet, className);
-  return /* @__PURE__ */ jsx("fieldset", {
-    "data-test-id": testId,
-    className: classes,
-    ...rest,
-    children
-  });
+  return /* @__PURE__ */ jsx("fieldset", { "data-test-id": testId, className: classes, ...rest, children });
 };
 const Form = (props) => {
   const {
@@ -266,13 +293,13 @@ const Form = (props) => {
     "data-test-id": testId = "form",
     ...rest
   } = props;
-  const classes = cx(styles.form, className, inline && styles.formInline, !!hasIncreasedErrorMargin && styles.formIncreasedErrorMargin);
-  return /* @__PURE__ */ jsx("form", {
-    ...rest,
-    "data-test-id": testId,
-    className: classes,
-    children
-  });
+  const classes = cx(
+    styles.form,
+    className,
+    inline && styles.formInline,
+    !!hasIncreasedErrorMargin && styles.formIncreasedErrorMargin
+  );
+  return /* @__PURE__ */ jsx("form", { ...rest, "data-test-id": testId, className: classes, children });
 };
 const FormGroup = (props) => {
   const {
@@ -284,13 +311,12 @@ const FormGroup = (props) => {
     "data-test-id": testId = "form-group",
     ...rest
   } = props;
-  const classes = cx(styles.formGroup, className, !ignoreValidation && isInvalid2 && styles.isInvalid);
-  return /* @__PURE__ */ jsx("fieldset", {
-    className: classes,
-    "data-test-id": testId,
-    ...rest,
-    children
-  });
+  const classes = cx(
+    styles.formGroup,
+    className,
+    !ignoreValidation && isInvalid2 && styles.isInvalid
+  );
+  return /* @__PURE__ */ jsx("fieldset", { className: classes, "data-test-id": testId, ...rest, children });
 };
 const FormHint = ({
   className,
@@ -299,12 +325,7 @@ const FormHint = ({
   ...rest
 }) => {
   const classes = cx(styles.hint, className);
-  return /* @__PURE__ */ jsx("div", {
-    ...rest,
-    "data-test-id": testId,
-    className: classes,
-    children
-  });
+  return /* @__PURE__ */ jsx("div", { ...rest, "data-test-id": testId, className: classes, children });
 };
 const FormField = ({
   isRequired,
@@ -318,31 +339,39 @@ const FormField = ({
   children,
   className,
   onBlur,
-  "data-test-id": testId = "form-field"
+  "data-test-id": testId = "form-field",
+  LabelProps = {},
+  FormHintProps = {},
+  FieldErrorProps = {}
 }) => {
   const handleBlur = () => {
     onBlur && onBlur(name);
   };
-  return /* @__PURE__ */ jsxs(FormGroup, {
-    className: cx(styles.field, className),
-    name,
-    ignoreValidation,
-    isInvalid: isInvalid2,
-    onBlur: handleBlur,
-    "data-test-id": testId,
-    children: [label2 && /* @__PURE__ */ jsx(Label, {
-      htmlFor,
-      required: isRequired,
-      children: label2
-    }), hint2 && /* @__PURE__ */ jsx(FormHint, {
-      className: styles.hint,
-      children: hint2
-    }), children, /* @__PURE__ */ jsx(FieldError, {
-      className: styles.fieldErrorMessage,
+  return /* @__PURE__ */ jsxs(
+    FormGroup,
+    {
+      className: cx(styles.field, className),
       name,
-      errorMessage
-    })]
-  });
+      ignoreValidation,
+      isInvalid: isInvalid2,
+      onBlur: handleBlur,
+      "data-test-id": testId,
+      children: [
+        label2 && /* @__PURE__ */ jsx(Label, { htmlFor, required: isRequired, ...LabelProps, children: label2 }),
+        hint2 && /* @__PURE__ */ jsx(FormHint, { className: styles.hint, ...FormHintProps, children: hint2 }),
+        children,
+        /* @__PURE__ */ jsx(
+          FieldError,
+          {
+            className: styles.fieldErrorMessage,
+            name,
+            errorMessage,
+            ...FieldErrorProps
+          }
+        )
+      ]
+    }
+  );
 };
 const IconField = ({
   icon,
@@ -353,15 +382,10 @@ const IconField = ({
 }) => {
   const Icon = icon;
   const classes = cx(styles.iconField, className);
-  return /* @__PURE__ */ jsxs("div", {
-    className: classes,
-    "data-test-id": testId,
-    ...rest,
-    children: [children, /* @__PURE__ */ jsx(Icon, {
-      size: "small",
-      className: styles.iconFieldIcon
-    })]
-  });
+  return /* @__PURE__ */ jsxs("div", { className: classes, "data-test-id": testId, ...rest, children: [
+    children,
+    /* @__PURE__ */ jsx(Icon, { size: "small", className: styles.iconFieldIcon })
+  ] });
 };
 const Radio = ({
   "aria-label": ariaLabel,
@@ -378,29 +402,27 @@ const Radio = ({
 }) => {
   const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
   if (!children && !hasAriaLabel) {
-    console.warn("If you do not provide children, you must specify an aria-label for accessibility");
+    console.warn(
+      "If you do not provide children, you must specify an aria-label for accessibility"
+    );
   }
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [/* @__PURE__ */ jsx("input", {
-      ...rest,
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledby,
-      className: cx(styles.radio, className),
-      checked,
-      disabled,
-      id,
-      "data-test-id": testId,
-      type: "radio"
-    }), /* @__PURE__ */ jsx(Label, {
-      className: labelClassName,
-      htmlFor: id,
-      style: labelStyle,
-      children: disabled ? /* @__PURE__ */ jsx("span", {
-        className: styles.labelDisabled,
-        children
-      }) : children
-    })]
-  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ...rest,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledby,
+        className: cx(styles.radio, className),
+        checked,
+        disabled,
+        id,
+        "data-test-id": testId,
+        type: "radio"
+      }
+    ),
+    /* @__PURE__ */ jsx(Label, { className: labelClassName, htmlFor: id, style: labelStyle, children: disabled ? /* @__PURE__ */ jsx("span", { className: styles.labelDisabled, children }) : children })
+  ] });
 };
 const RadioGroup = (props) => {
   const {
@@ -453,56 +475,95 @@ const RadioGroup = (props) => {
     return null;
   }
   const radios = Children.map(children, (child) => updateRadioElems(child));
-  return /* @__PURE__ */ jsxs("fieldset", {
-    "data-test-id": testId,
-    ref: fieldsetRef,
-    children: [legend && /* @__PURE__ */ jsx("legend", {
-      children: /* @__PURE__ */ jsx(VisuallyHidden, {
-        children: legend
-      })
-    }), /* @__PURE__ */ jsx("div", {
-      ...rest,
-      children: radios
-    })]
-  });
+  return /* @__PURE__ */ jsxs("fieldset", { "data-test-id": testId, ref: fieldsetRef, children: [
+    legend && /* @__PURE__ */ jsx("legend", { children: /* @__PURE__ */ jsx(VisuallyHidden, { children: legend }) }),
+    /* @__PURE__ */ jsx("div", { ...rest, children: radios })
+  ] });
 };
-const SelectField = ({
-  className,
-  children,
-  "data-test-id": testId = "select",
-  ...rest
-}) => {
-  const classes = cx(styles.formInput, className);
-  return /* @__PURE__ */ jsx("select", {
-    ...rest,
-    "data-test-id": testId,
-    className: classes,
-    children
-  });
+const SelectField = forwardRef(
+  ({ className, children, "data-test-id": testId = "select", ...rest }, ref) => {
+    const classes = cx(styles.formInput, className);
+    return /* @__PURE__ */ jsx("select", { ...rest, "data-test-id": testId, className: classes, ref, children });
+  }
+);
+SelectField.displayName = "SelectField";
+const TextArea = forwardRef(
+  ({ className, "data-test-id": testId = "text-area", ...props }, ref) => {
+    const onKeyDown = (e) => {
+      if (e.key === "ArrowRight" || e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft") {
+        e.stopPropagation();
+      }
+      if (e.key === "Escape") {
+        e.nativeEvent.stopImmediatePropagation();
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ...props,
+        className: cx(styles.formInput, className),
+        ref,
+        "data-test-id": testId,
+        "aria-describedby": props["aria-describedby"] || createFieldErrorId(props.id),
+        onKeyDown
+      }
+    );
+  }
+);
+TextArea.displayName = "TextArea";
+const defaultFormatOptions = {
+  maximumFractionDigits: 6
 };
-const TextArea = forwardRef(({
-  className,
-  "data-test-id": testId = "text-area",
-  ...props
-}, ref) => {
-  const onKeyDown = (e) => {
-    if (e.key === "ArrowRight" || e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft") {
-      e.stopPropagation();
-    }
-    if (e.key === "Escape") {
-      e.nativeEvent.stopImmediatePropagation();
-    }
-  };
-  return /* @__PURE__ */ jsx("textarea", {
-    ...props,
-    className: cx(styles.formInput, className),
-    ref,
-    "data-test-id": testId,
-    "aria-describedby": props["aria-describedby"] || createFieldErrorId(props.id),
-    onKeyDown
+const useNumberField = ({
+  className: rootClassName,
+  "data-test-id": testId = "input",
+  id,
+  name,
+  ...otherProps
+} = {}) => {
+  const formatOptions = useObjectMemo({
+    ...defaultFormatOptions,
+    ...otherProps.formatOptions
   });
-});
-TextArea.displayName = "TextArea";
+  const { locale } = useLocale();
+  const numberFieldState = useNumberFieldState({ ...otherProps, locale, formatOptions });
+  const inputRef = useRef(null);
+  const {
+    descriptionProps: formHintProps,
+    errorMessageProps: fieldErrorProps,
+    labelProps,
+    groupProps,
+    inputProps,
+    incrementButtonProps,
+    decrementButtonProps
+  } = useNumberField$1({ ...otherProps, formatOptions, id }, numberFieldState, inputRef);
+  return {
+    fieldErrorProps,
+    formHintProps,
+    labelProps,
+    renderNumberField: () => /* @__PURE__ */ jsxs("div", { ...groupProps, className: styles.numberField, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ...inputProps,
+          className: cx(styles.formInput, styles["numberField-input"]),
+          "data-test-id": testId,
+          name,
+          ref: inputRef
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: styles["numberField-stepperContainer"], children: [
+        /* @__PURE__ */ jsx(Stepper, { ...incrementButtonProps, children: /* @__PURE__ */ jsx(ExpandLess, {}) }),
+        /* @__PURE__ */ jsx(Stepper, { ...decrementButtonProps, children: /* @__PURE__ */ jsx(ExpandMore, {}) })
+      ] })
+    ] })
+  };
+};
+const Stepper = (props) => {
+  const buttonRef = useRef(null);
+  const { buttonProps } = useButton(props, buttonRef);
+  return /* @__PURE__ */ jsx("button", { ...buttonProps, className: styles["numberField-stepper"], ref: buttonRef, children: props.children });
+};
 export {
   Checkbox,
   CompactTextField,
@@ -519,6 +580,7 @@ export {
   RequiredAsterisk,
   SelectField,
   TextArea,
-  TextField
+  TextField,
+  useNumberField
 };
 //# sourceMappingURL=index.es.js.map