@launchpad-ui/form 0.10.7 → 0.10.9

package/dist/index.js

@@ -85,7 +85,12 @@ const RequiredAsterisk = ({
   ...rest
 }) => {
   const classes = classix.cx(styles.requiredAsterisk, className);
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { ...rest, "data-test-id": testId, className: classes, children: "*" });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", {
+    ...rest,
+    "data-test-id": testId,
+    className: classes,
+    children: "*"
+  });
 };
 const Label = ({
   disabled,
@@ -97,50 +102,49 @@ const Label = ({
   ...rest
 }) => {
   const classes = classix.cx(styles.label, className, disabled && styles.labelDisabled);
-  return /* @__PURE__ */ jsxRuntime.jsxs("label", { ...rest, "data-test-id": testId, className: classes, children: [
-    children,
-    optional && !required && /* @__PURE__ */ jsxRuntime.jsx("small", { className: styles.labelOptional, children: "(optional)" }),
-    required && !optional && /* @__PURE__ */ jsxRuntime.jsx(RequiredAsterisk, {})
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs("label", {
+    ...rest,
+    "data-test-id": testId,
+    className: classes,
+    children: [children, optional && !required && /* @__PURE__ */ jsxRuntime.jsx("small", {
+      className: styles.labelOptional,
+      children: "(optional)"
+    }), required && !optional && /* @__PURE__ */ jsxRuntime.jsx(RequiredAsterisk, {})]
+  });
 };
-const Checkbox = /* @__PURE__ */ react.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__ */ jsxRuntime.jsxs(Label, { className: labelClassName, children: [
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: styles.labelDisabled, children }) : children
-    ] });
+const Checkbox = /* @__PURE__ */ react.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__ */ jsxRuntime.jsxs(Label, {
+    className: labelClassName,
+    children: [/* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", {
+      className: styles.labelDisabled,
+      children
+    }) : children]
+  });
+});
 Checkbox.displayName = "Checkbox";
 const createFieldErrorId = (fieldIdentifier) => fieldIdentifier ? `${[...fieldIdentifier].join("")}-err` : void 0;
 function hasObjectChanged(obj1, obj2) {
@@ -158,108 +162,101 @@ function useObjectMemo(obj) {
     return objRef.current;
   }, [obj]);
 }
-const TextField = /* @__PURE__ */ react.forwardRef(
-  ({
-    className,
-    type = "text",
-    tiny = false,
-    readOnly,
-    tabIndex = 0,
-    suffix: suffix2,
-    overrideWidth,
-    "data-test-id": testId = "text-field",
-    autoComplete,
-    ...rest
-  }, ref) => {
-    const classes = overrideWidth ? className : classix.cx(styles.formInput, tiny && styles.formInputTiny, className);
-    const disablePasswordManagers = autoComplete === "off";
-    if (suffix2) {
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.suffixContainer, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            ...rest,
-            type,
-            "data-test-id": testId,
-            autoComplete,
-            className: classes,
-            readOnly,
-            ref,
-            "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("label", { className: styles.suffix, htmlFor: rest.id, children: suffix2 })
-      ] });
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "input",
-      {
+const TextField = /* @__PURE__ */ react.forwardRef(({
+  className,
+  type = "text",
+  tiny = false,
+  readOnly,
+  tabIndex = 0,
+  suffix: suffix2,
+  overrideWidth,
+  "data-test-id": testId = "text-field",
+  autoComplete,
+  ...rest
+}, ref) => {
+  const classes = overrideWidth ? className : classix.cx(styles.formInput, tiny && styles.formInputTiny, className);
+  const disablePasswordManagers = autoComplete === "off";
+  if (suffix2) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      className: styles.suffixContainer,
+      children: [/* @__PURE__ */ jsxRuntime.jsx("input", {
         ...rest,
-        "data-1p-ignore": disablePasswordManagers,
         type,
+        "data-test-id": testId,
+        autoComplete,
         className: classes,
         readOnly,
-        tabIndex,
-        autoComplete,
         ref,
-        "data-test-id": testId,
-        style: overrideWidth ? {
-          width: overrideWidth
-        } : void 0,
         "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
-      }
-    );
+      }), /* @__PURE__ */ jsxRuntime.jsx("label", {
+        className: styles.suffix,
+        htmlFor: rest.id,
+        children: suffix2
+      })]
+    });
   }
-);
+  return /* @__PURE__ */ jsxRuntime.jsx("input", {
+    ...rest,
+    "data-1p-ignore": disablePasswordManagers,
+    type,
+    className: classes,
+    readOnly,
+    tabIndex,
+    autoComplete,
+    ref,
+    "data-test-id": testId,
+    style: overrideWidth ? {
+      width: overrideWidth
+    } : void 0,
+    "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
+  });
+});
 TextField.displayName = "TextField";
-const CompactTextField = /* @__PURE__ */ react.forwardRef(
-  ({
-    className,
-    id,
-    label: label2,
-    needsErrorFeedback,
-    value,
-    onFocus,
-    onBlur,
-    "data-test-id": testId = "compact-text-field",
-    ...rest
-  }, ref) => {
-    const [isActive2, setIsActive] = react.useState(
-      (typeof value === "boolean" || value ? value.toString() : "").trim().length !== 0
-    );
-    const isActiveState = isActive2 || needsErrorFeedback;
-    const classes = classix.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__ */ jsxRuntime.jsxs("div", { className: classes, "data-test-id": testId, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor: id, children: label2 }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        TextField,
-        {
-          ...rest,
-          id,
-          placeholder,
-          value,
-          ref,
-          onFocus: handleFocus,
-          onBlur: handleBlur
-        }
-      )
-    ] });
-  }
-);
+const CompactTextField = /* @__PURE__ */ react.forwardRef(({
+  className,
+  id,
+  label: label2,
+  needsErrorFeedback,
+  value,
+  onFocus,
+  onBlur,
+  "data-test-id": testId = "compact-text-field",
+  ...rest
+}, ref) => {
+  const [isActive2, setIsActive] = react.useState((typeof value === "boolean" || value ? value.toString() : "").trim().length !== 0);
+  const isActiveState = isActive2 || needsErrorFeedback;
+  const classes = classix.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__ */ jsxRuntime.jsxs("div", {
+    className: classes,
+    "data-test-id": testId,
+    children: [/* @__PURE__ */ jsxRuntime.jsx(Label, {
+      htmlFor: id,
+      children: label2
+    }), /* @__PURE__ */ jsxRuntime.jsx(TextField, {
+      ...rest,
+      id,
+      placeholder,
+      value,
+      ref,
+      onFocus: handleFocus,
+      onBlur: handleBlur
+    })]
+  });
+});
 CompactTextField.displayName = "CompactTextField";
 const FieldError = ({
   name,
@@ -271,22 +268,18 @@ const FieldError = ({
   if (!errorMessage) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "span",
-    {
-      ...rest,
-      className: classix.cx(styles.fieldError, className),
-      "aria-live": "polite",
-      "data-test-id": testId,
-      "aria-label": "Error",
-      id: createFieldErrorId(name),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(icons.Icon, { name: "alert-rhombus", size: "small" }),
-        " ",
-        errorMessage
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", {
+    ...rest,
+    className: classix.cx(styles.fieldError, className),
+    "aria-live": "polite",
+    "data-test-id": testId,
+    "aria-label": "Error",
+    id: createFieldErrorId(name),
+    children: [/* @__PURE__ */ jsxRuntime.jsx(icons.Icon, {
+      name: "alert-rhombus",
+      size: "small"
+    }), " ", errorMessage]
+  });
 };
 const FieldSet = ({
   children,
@@ -295,7 +288,12 @@ const FieldSet = ({
   ...rest
 }) => {
   const classes = classix.cx(styles.fieldSet, className);
-  return /* @__PURE__ */ jsxRuntime.jsx("fieldset", { "data-test-id": testId, className: classes, ...rest, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("fieldset", {
+    "data-test-id": testId,
+    className: classes,
+    ...rest,
+    children
+  });
 };
 const Form = (props) => {
   const {
@@ -306,13 +304,13 @@ const Form = (props) => {
     "data-test-id": testId = "form",
     ...rest
   } = props;
-  const classes = classix.cx(
-    styles.form,
-    className,
-    inline && styles.formInline,
-    !!hasIncreasedErrorMargin && styles.formIncreasedErrorMargin
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx("form", { ...rest, "data-test-id": testId, className: classes, children });
+  const classes = classix.cx(styles.form, className, inline && styles.formInline, !!hasIncreasedErrorMargin && styles.formIncreasedErrorMargin);
+  return /* @__PURE__ */ jsxRuntime.jsx("form", {
+    ...rest,
+    "data-test-id": testId,
+    className: classes,
+    children
+  });
 };
 const FormGroup = (props) => {
   const {
@@ -324,12 +322,13 @@ const FormGroup = (props) => {
     "data-test-id": testId = "form-group",
     ...rest
   } = props;
-  const classes = classix.cx(
-    styles.formGroup,
-    className,
-    !ignoreValidation && isInvalid2 && styles.isInvalid
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx("fieldset", { className: classes, "data-test-id": testId, ...rest, children });
+  const classes = classix.cx(styles.formGroup, className, !ignoreValidation && isInvalid2 && styles.isInvalid);
+  return /* @__PURE__ */ jsxRuntime.jsx("fieldset", {
+    className: classes,
+    "data-test-id": testId,
+    ...rest,
+    children
+  });
 };
 const FormHint = ({
   className,
@@ -338,7 +337,12 @@ const FormHint = ({
   ...rest
 }) => {
   const classes = classix.cx(styles.hint, className);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...rest, "data-test-id": testId, className: classes, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    ...rest,
+    "data-test-id": testId,
+    className: classes,
+    children
+  });
 };
 const FormField = ({
   isRequired,
@@ -360,31 +364,29 @@ const FormField = ({
   const handleBlur = () => {
     onBlur && onBlur(name);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    FormGroup,
-    {
-      className: classix.cx(styles.field, className),
+  return /* @__PURE__ */ jsxRuntime.jsxs(FormGroup, {
+    className: classix.cx(styles.field, className),
+    name,
+    ignoreValidation,
+    isInvalid: isInvalid2,
+    onBlur: handleBlur,
+    "data-test-id": testId,
+    children: [label2 && /* @__PURE__ */ jsxRuntime.jsx(Label, {
+      htmlFor,
+      required: isRequired,
+      ...LabelProps,
+      children: label2
+    }), hint2 && /* @__PURE__ */ jsxRuntime.jsx(FormHint, {
+      className: styles.hint,
+      ...FormHintProps,
+      children: hint2
+    }), children, /* @__PURE__ */ jsxRuntime.jsx(FieldError, {
+      className: styles.fieldErrorMessage,
       name,
-      ignoreValidation,
-      isInvalid: isInvalid2,
-      onBlur: handleBlur,
-      "data-test-id": testId,
-      children: [
-        label2 && /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor, required: isRequired, ...LabelProps, children: label2 }),
-        hint2 && /* @__PURE__ */ jsxRuntime.jsx(FormHint, { className: styles.hint, ...FormHintProps, children: hint2 }),
-        children,
-        /* @__PURE__ */ jsxRuntime.jsx(
-          FieldError,
-          {
-            className: styles.fieldErrorMessage,
-            name,
-            errorMessage,
-            ...FieldErrorProps
-          }
-        )
-      ]
-    }
-  );
+      errorMessage,
+      ...FieldErrorProps
+    })]
+  });
 };
 const IconField = ({
   icon,
@@ -401,23 +403,29 @@ const IconField = ({
     className: classix.cx(styles.iconFieldIcon, styles.iconFieldIconFill)
   });
   const classes = classix.cx(styles.iconField, renderIconLast ? "IconAfter" : "IconBefore", className);
-  const renderIcon = tooltip$1 ? /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip, { content: tooltip$1, targetClassName: styles.iconFieldButton, children: /* @__PURE__ */ jsxRuntime.jsx(
-    button.IconButton,
-    {
+  const renderIcon = tooltip$1 ? /* @__PURE__ */ jsxRuntime.jsx(tooltip.Tooltip, {
+    content: tooltip$1,
+    targetClassName: styles.iconFieldButton,
+    children: /* @__PURE__ */ jsxRuntime.jsx(button.IconButton, {
       icon: /* @__PURE__ */ react.cloneElement(icon, {
         className: styles.iconFieldIconFill
       }),
       size: "small",
       className: styles.iconFieldIcon,
-      style: renderIconLast ? { right: "0.313rem" } : { left: "0.313rem" },
+      style: renderIconLast ? {
+        right: "0.313rem"
+      } : {
+        left: "0.313rem"
+      },
       "aria-label": ariaLabel
-    }
-  ) }) : iconElement;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes, "data-test-id": testId, ...rest, children: [
-    !renderIconLast && renderIcon,
-    children,
-    renderIconLast && renderIcon
-  ] });
+    })
+  }) : iconElement;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    className: classes,
+    "data-test-id": testId,
+    ...rest,
+    children: [!renderIconLast && renderIcon, children, renderIconLast && renderIcon]
+  });
 };
 const Radio = ({
   "aria-label": ariaLabel,
@@ -434,27 +442,29 @@ 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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "input",
-      {
-        ...rest,
-        "aria-label": ariaLabel,
-        "aria-labelledby": ariaLabelledby,
-        className: classix.cx(styles.radio, className),
-        checked,
-        disabled,
-        id,
-        "data-test-id": testId,
-        type: "radio"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(Label, { className: labelClassName, htmlFor: id, style: labelStyle, children: disabled ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.labelDisabled, children }) : children })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/* @__PURE__ */ jsxRuntime.jsx("input", {
+      ...rest,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby,
+      className: classix.cx(styles.radio, className),
+      checked,
+      disabled,
+      id,
+      "data-test-id": testId,
+      type: "radio"
+    }), /* @__PURE__ */ jsxRuntime.jsx(Label, {
+      className: labelClassName,
+      htmlFor: id,
+      style: labelStyle,
+      children: disabled ? /* @__PURE__ */ jsxRuntime.jsx("span", {
+        className: styles.labelDisabled,
+        children
+      }) : children
+    })]
+  });
 };
 const RadioGroup = (props) => {
   const {
@@ -507,41 +517,57 @@ const RadioGroup = (props) => {
     return null;
   }
   const radios = react.Children.map(children, (child) => updateRadioElems(child));
-  return /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { "data-test-id": testId, ref: fieldsetRef, children: [
-    legend && /* @__PURE__ */ jsxRuntime.jsx("legend", { children: /* @__PURE__ */ jsxRuntime.jsx(visuallyHidden.VisuallyHidden, { children: legend }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { ...rest, children: radios })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs("fieldset", {
+    "data-test-id": testId,
+    ref: fieldsetRef,
+    children: [legend && /* @__PURE__ */ jsxRuntime.jsx("legend", {
+      children: /* @__PURE__ */ jsxRuntime.jsx(visuallyHidden.VisuallyHidden, {
+        children: legend
+      })
+    }), /* @__PURE__ */ jsxRuntime.jsx("div", {
+      ...rest,
+      children: radios
+    })]
+  });
 };
-const SelectField = /* @__PURE__ */ react.forwardRef(
-  ({ className, children, "data-test-id": testId = "select", ...rest }, ref) => {
-    const classes = classix.cx(styles.formInput, className);
-    return /* @__PURE__ */ jsxRuntime.jsx("select", { ...rest, "data-test-id": testId, className: classes, ref, children });
-  }
-);
+const SelectField = /* @__PURE__ */ react.forwardRef(({
+  className,
+  children,
+  "data-test-id": testId = "select",
+  ...rest
+}, ref) => {
+  const classes = classix.cx(styles.formInput, className);
+  return /* @__PURE__ */ jsxRuntime.jsx("select", {
+    ...rest,
+    "data-test-id": testId,
+    className: classes,
+    ref,
+    children
+  });
+});
 SelectField.displayName = "SelectField";
-const TextArea = /* @__PURE__ */ react.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__ */ jsxRuntime.jsx(
-      "textarea",
-      {
-        ...props,
-        className: classix.cx(styles.formInput, className),
-        ref,
-        "data-test-id": testId,
-        "aria-describedby": props["aria-describedby"] || createFieldErrorId(props.id),
-        onKeyDown
-      }
-    );
-  }
-);
+const TextArea = /* @__PURE__ */ react.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__ */ jsxRuntime.jsx("textarea", {
+    ...props,
+    className: classix.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
@@ -557,8 +583,14 @@ const useNumberField = ({
     ...defaultFormatOptions,
     ...otherProps.formatOptions
   });
-  const { locale } = i18n.useLocale();
-  const numberFieldState = numberfield.useNumberFieldState({ ...otherProps, locale, formatOptions });
+  const {
+    locale
+  } = i18n.useLocale();
+  const numberFieldState = numberfield.useNumberFieldState({
+    ...otherProps,
+    locale,
+    formatOptions
+  });
   const inputRef = react.useRef(null);
   const {
     descriptionProps: formHintProps,
@@ -568,33 +600,52 @@ const useNumberField = ({
     inputProps,
     incrementButtonProps,
     decrementButtonProps
-  } = numberfield$1.useNumberField({ ...otherProps, formatOptions, id }, numberFieldState, inputRef);
+  } = numberfield$1.useNumberField({
+    ...otherProps,
+    formatOptions,
+    id
+  }, numberFieldState, inputRef);
   return {
     fieldErrorProps,
     formHintProps,
     labelProps,
-    renderNumberField: () => /* @__PURE__ */ jsxRuntime.jsxs("div", { ...groupProps, className: styles.numberField, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          ...inputProps,
-          className: classix.cx(styles.formInput, styles["numberField-input"]),
-          "data-test-id": testId,
-          name,
-          ref: inputRef
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles["numberField-stepperContainer"], children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Stepper, { ...incrementButtonProps, children: /* @__PURE__ */ jsxRuntime.jsx(icons.Icon, { name: "chevron-up" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(Stepper, { ...decrementButtonProps, children: /* @__PURE__ */ jsxRuntime.jsx(icons.Icon, { name: "chevron-down" }) })
-      ] })
-    ] })
+    renderNumberField: () => /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      ...groupProps,
+      className: styles.numberField,
+      children: [/* @__PURE__ */ jsxRuntime.jsx("input", {
+        ...inputProps,
+        className: classix.cx(styles.formInput, styles["numberField-input"]),
+        "data-test-id": testId,
+        name,
+        ref: inputRef
+      }), /* @__PURE__ */ jsxRuntime.jsxs("div", {
+        className: styles["numberField-stepperContainer"],
+        children: [/* @__PURE__ */ jsxRuntime.jsx(Stepper, {
+          ...incrementButtonProps,
+          children: /* @__PURE__ */ jsxRuntime.jsx(icons.Icon, {
+            name: "chevron-up"
+          })
+        }), /* @__PURE__ */ jsxRuntime.jsx(Stepper, {
+          ...decrementButtonProps,
+          children: /* @__PURE__ */ jsxRuntime.jsx(icons.Icon, {
+            name: "chevron-down"
+          })
+        })]
+      })]
+    })
   };
 };
 const Stepper = (props) => {
   const buttonRef = react.useRef(null);
-  const { buttonProps } = button$1.useButton(props, buttonRef);
-  return /* @__PURE__ */ jsxRuntime.jsx("button", { ...buttonProps, className: styles["numberField-stepper"], ref: buttonRef, children: props.children });
+  const {
+    buttonProps
+  } = button$1.useButton(props, buttonRef);
+  return /* @__PURE__ */ jsxRuntime.jsx("button", {
+    ...buttonProps,
+    className: styles["numberField-stepper"],
+    ref: buttonRef,
+    children: props.children
+  });
 };
 exports.Checkbox = Checkbox;
 exports.CompactTextField = CompactTextField;