@launchpad-ui/form 0.15.17 → 0.15.19

package/dist/index.es.js

@@ -1,7 +1,7 @@
 import './style.css';
-import { Children, cloneElement, forwardRef, isValidElement, useMemo, useRef, useState } from "react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { forwardRef, useRef, useMemo, useState, cloneElement, Children, isValidElement } from "react";
 import { cx } from "classix";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Icon } from "@launchpad-ui/icons";
 import { IconButton } from "@launchpad-ui/button";
 import { Tooltip } from "@launchpad-ui/tooltip";
@@ -10,460 +10,560 @@ import { useLocale } from "react-aria/I18nProvider";
 import { useButton } from "react-aria/useButton";
 import { useNumberField as useNumberField$1 } from "react-aria/useNumberField";
 import { useNumberFieldState } from "react-stately/useNumberFieldState";
-const checkbox = "QJPOUG_checkbox";
-const compactTextField = "QJPOUG_compactTextField";
-const field = "QJPOUG_field";
-const fieldError = "QJPOUG_fieldError";
-const fieldErrorMessage = "QJPOUG_fieldErrorMessage";
-const fieldSet = "QJPOUG_fieldSet";
-const form = "QJPOUG_form";
-const formGroup = "QJPOUG_formGroup";
-const formIncreasedErrorMargin = "QJPOUG_formIncreasedErrorMargin";
-const formInline = "QJPOUG_formInline";
-const formInput = "QJPOUG_formInput";
-const formInputTiny = "QJPOUG_formInputTiny";
-const hint = "QJPOUG_hint";
-const iconField = "QJPOUG_iconField";
-const iconFieldButton = "QJPOUG_iconFieldButton";
-const iconFieldIcon = "QJPOUG_iconFieldIcon";
-const iconFieldIconFill = "QJPOUG_iconFieldIconFill";
-const inlineForm = "QJPOUG_inlineForm";
-const isActive = "QJPOUG_isActive";
-const isDisabled = "QJPOUG_isDisabled";
-const isFocused = "QJPOUG_isFocused";
-const isInvalid = "QJPOUG_isInvalid";
-const label = "QJPOUG_label";
-const labelDisabled = "QJPOUG_labelDisabled";
-const labelOptional = "QJPOUG_labelOptional";
-const number = "QJPOUG_number";
-const numberField = "QJPOUG_numberField";
-const radio = "QJPOUG_radio";
-const requiredAsterisk = "QJPOUG_requiredAsterisk";
-const suffix = "QJPOUG_suffix";
-const suffixContainer = "QJPOUG_suffixContainer";
-var Form_module_default = {
-	checkbox,
-	compactTextField,
-	field,
-	fieldError,
-	fieldErrorMessage,
-	fieldSet,
-	form,
-	formGroup,
-	formIncreasedErrorMargin,
-	formInline,
-	formInput,
-	formInputTiny,
-	hint,
-	iconField,
-	iconFieldButton,
-	iconFieldIcon,
-	iconFieldIconFill,
-	inlineForm,
-	isActive,
-	isDisabled,
-	isFocused,
-	isInvalid,
-	label,
-	labelDisabled,
-	labelOptional,
-	number,
-	numberField,
-	"numberField-input": "QJPOUG_numberField-input",
-	"numberField-stepper": "QJPOUG_numberField-stepper",
-	"numberField-stepperContainer": "QJPOUG_numberField-stepperContainer",
-	radio,
-	requiredAsterisk,
-	suffix,
-	suffixContainer
+const checkbox = "_1FRyG_checkbox";
+const compactTextField = "_1FRyG_compactTextField";
+const field = "_1FRyG_field";
+const fieldError = "_1FRyG_fieldError";
+const fieldErrorMessage = "_1FRyG_fieldErrorMessage";
+const fieldSet = "_1FRyG_fieldSet";
+const form = "_1FRyG_form";
+const formGroup = "_1FRyG_formGroup";
+const formIncreasedErrorMargin = "_1FRyG_formIncreasedErrorMargin";
+const formInline = "_1FRyG_formInline";
+const formInput = "_1FRyG_formInput";
+const formInputTiny = "_1FRyG_formInputTiny";
+const hint = "_1FRyG_hint";
+const iconField = "_1FRyG_iconField";
+const iconFieldButton = "_1FRyG_iconFieldButton";
+const iconFieldIcon = "_1FRyG_iconFieldIcon";
+const iconFieldIconFill = "_1FRyG_iconFieldIconFill";
+const isActive = "_1FRyG_isActive";
+const isInvalid = "_1FRyG_isInvalid";
+const label = "_1FRyG_label";
+const labelDisabled = "_1FRyG_labelDisabled";
+const labelOptional = "_1FRyG_labelOptional";
+const numberField = "_1FRyG_numberField";
+const radio = "_1FRyG_radio";
+const requiredAsterisk = "_1FRyG_requiredAsterisk";
+const suffix = "_1FRyG_suffix";
+const suffixContainer = "_1FRyG_suffixContainer";
+const styles = {
+  checkbox,
+  compactTextField,
+  field,
+  fieldError,
+  fieldErrorMessage,
+  fieldSet,
+  form,
+  formGroup,
+  formIncreasedErrorMargin,
+  formInline,
+  formInput,
+  formInputTiny,
+  hint,
+  iconField,
+  iconFieldButton,
+  iconFieldIcon,
+  iconFieldIconFill,
+  isActive,
+  isInvalid,
+  label,
+  labelDisabled,
+  labelOptional,
+  numberField,
+  "numberField-input": "_1FRyG_numberField-input",
+  "numberField-stepper": "_1FRyG_numberField-stepper",
+  "numberField-stepperContainer": "_1FRyG_numberField-stepperContainer",
+  radio,
+  requiredAsterisk,
+  suffix,
+  suffixContainer
 };
-var RequiredAsterisk = ({ className, "data-test-id": testId = "required-asterisk", ...rest }) => {
-	const classes = cx(Form_module_default.requiredAsterisk, className);
-	return /* @__PURE__ */ jsx("span", {
-		...rest,
-		"data-test-id": testId,
-		className: classes,
-		children: "*"
-	});
+const RequiredAsterisk = ({
+  className,
+  "data-test-id": testId = "required-asterisk",
+  ...rest
+}) => {
+  const classes = cx(styles.requiredAsterisk, className);
+  return /* @__PURE__ */ jsx("span", { ...rest, "data-test-id": testId, className: classes, children: "*" });
 };
-var Label = ({ disabled, className, children, required = false, optional = false, "data-test-id": testId = "label", ...rest }) => {
-	const classes = cx(Form_module_default.label, className, disabled && Form_module_default.labelDisabled);
-	return /* @__PURE__ */ jsxs("label", {
-		...rest,
-		"data-test-id": testId,
-		className: classes,
-		children: [
-			children,
-			optional && !required && /* @__PURE__ */ jsx("small", {
-				className: Form_module_default.labelOptional,
-				children: "(optional)"
-			}),
-			required && !optional && /* @__PURE__ */ jsx(RequiredAsterisk, {})
-		]
-	});
+const Label = ({
+  disabled,
+  className,
+  children,
+  required = false,
+  optional = false,
+  "data-test-id": testId = "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, {})
+  ] });
 };
-var Checkbox = /* @__PURE__ */ forwardRef(({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, children, disabled, checked, labelClassName, "data-test-id": testId = "checkbox", ...rest }, ref) => {
-	if (!children && !(ariaLabel !== void 0 || ariaLabelledby !== void 0)) 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: Form_module_default.checkbox,
-				disabled,
-				type: "checkbox",
-				"data-test-id": testId
-			}),
-			" ",
-			disabled ? /* @__PURE__ */ jsx("span", {
-				className: Form_module_default.labelDisabled,
-				children
-			}) : children
-		]
-	});
-});
+const Checkbox = /* @__PURE__ */ 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
+    ] });
+  }
+);
 Checkbox.displayName = "Checkbox";
-var createFieldErrorId = (fieldIdentifier) => fieldIdentifier ? `${[...fieldIdentifier].join("")}-err` : void 0;
+const createFieldErrorId = (fieldIdentifier) => fieldIdentifier ? `${[...fieldIdentifier].join("")}-err` : void 0;
 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];
-	});
+  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 objRef = useRef(obj);
+  return useMemo(() => {
+    if (hasObjectChanged(obj, objRef.current)) {
+      objRef.current = obj;
+    }
+    return objRef.current;
+  }, [obj]);
 }
-var TextField = /* @__PURE__ */ forwardRef(({ className, type = "text", tiny = false, readOnly, tabIndex = 0, suffix: suffix$1, overrideWidth, "data-test-id": testId = "text-field", autoComplete, ...rest }, ref) => {
-	const classes = overrideWidth ? className : cx(Form_module_default.formInput, tiny && Form_module_default.formInputTiny, className);
-	const disablePasswordManagers = autoComplete === "off";
-	if (suffix$1) return /* @__PURE__ */ jsxs("div", {
-		className: Form_module_default.suffixContainer,
-		children: [/* @__PURE__ */ jsx("input", {
-			...rest,
-			type,
-			"data-test-id": testId,
-			autoComplete,
-			className: classes,
-			readOnly,
-			ref,
-			"aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
-		}), /* @__PURE__ */ jsx("label", {
-			className: Form_module_default.suffix,
-			htmlFor: rest.id,
-			children: suffix$1
-		})]
-	});
-	return /* @__PURE__ */ 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)
-	});
-});
+const TextField = /* @__PURE__ */ 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 : cx(styles.formInput, tiny && styles.formInputTiny, className);
+    const disablePasswordManagers = autoComplete === "off";
+    if (suffix2) {
+      return /* @__PURE__ */ jsxs("div", { className: styles.suffixContainer, children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ...rest,
+            type,
+            "data-test-id": testId,
+            autoComplete,
+            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,
+        "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";
-var CompactTextField = /* @__PURE__ */ forwardRef(({ className, id, label: label$1, needsErrorFeedback, value, onFocus, onBlur, "data-test-id": testId = "compact-text-field", ...rest }, ref) => {
-	const [isActive$1, setIsActive] = useState((typeof value === "boolean" || value ? value.toString() : "").trim().length !== 0);
-	const isActiveState = isActive$1 || needsErrorFeedback;
-	const classes = cx(Form_module_default.compactTextField, className, isActiveState && Form_module_default.isActive);
-	const placeholder = isActiveState ? "" : label$1;
-	const handleFocus = (event) => {
-		setIsActive(true);
-		if (onFocus) onFocus(event);
-	};
-	const handleBlur = (event) => {
-		setIsActive((event.target.value || "").trim().length !== 0);
-		if (onBlur) onBlur(event);
-	};
-	return /* @__PURE__ */ jsxs("div", {
-		className: classes,
-		"data-test-id": testId,
-		children: [/* @__PURE__ */ jsx(Label, {
-			htmlFor: id,
-			children: label$1
-		}), /* @__PURE__ */ jsx(TextField, {
-			...rest,
-			id,
-			placeholder,
-			value,
-			ref,
-			onFocus: handleFocus,
-			onBlur: handleBlur
-		})]
-	});
-});
+const CompactTextField = /* @__PURE__ */ 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 inputValue = event.target.value || "";
+      setIsActive(inputValue.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";
-var FieldError = ({ name, errorMessage, className, "data-test-id": testId = "field-error", ...rest }) => {
-	if (!errorMessage) return null;
-	return /* @__PURE__ */ jsxs("span", {
-		...rest,
-		className: cx(Form_module_default.fieldError, className),
-		"aria-live": "polite",
-		"data-test-id": testId,
-		"aria-label": "Error",
-		id: createFieldErrorId(name),
-		children: [
-			/* @__PURE__ */ jsx(Icon, {
-				name: "alert-rhombus",
-				size: "small"
-			}),
-			" ",
-			errorMessage
-		]
-	});
+const FieldError = ({
+  name,
+  errorMessage,
+  className,
+  "data-test-id": testId = "field-error",
+  ...rest
+}) => {
+  if (!errorMessage) {
+    return null;
+  }
+  return (
+    // biome-ignore lint/a11y/useAriaPropsSupportedByRole: ignore
+    /* @__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(Icon, { name: "alert-rhombus", size: "small" }),
+          " ",
+          errorMessage
+        ]
+      }
+    )
+  );
 };
-var FieldSet = ({ children, className, "data-test-id": testId = "field-set", ...rest }) => {
-	const classes = cx(Form_module_default.fieldSet, className);
-	return /* @__PURE__ */ jsx("fieldset", {
-		"data-test-id": testId,
-		className: classes,
-		...rest,
-		children
-	});
+const FieldSet = ({ children, className, "data-test-id": testId = "field-set", ...rest }) => {
+  const classes = cx(styles.fieldSet, className);
+  return /* @__PURE__ */ jsx("fieldset", { "data-test-id": testId, className: classes, ...rest, children });
 };
-var Form = (props) => {
-	const { className, inline, children, hasIncreasedErrorMargin, "data-test-id": testId = "form", ...rest } = props;
-	const classes = cx(Form_module_default.form, className, inline && Form_module_default.formInline, !!hasIncreasedErrorMargin && Form_module_default.formIncreasedErrorMargin);
-	return /* @__PURE__ */ jsx("form", {
-		...rest,
-		"data-test-id": testId,
-		className: classes,
-		children
-	});
+const Form = (props) => {
+  const { className, inline, children, hasIncreasedErrorMargin, "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 });
 };
-var FormGroup = (props) => {
-	const { className, name, ignoreValidation, isInvalid: isInvalid$1, children, "data-test-id": testId = "form-group", ...rest } = props;
-	return /* @__PURE__ */ jsx("fieldset", {
-		className: cx(Form_module_default.formGroup, className, !ignoreValidation && isInvalid$1 && Form_module_default.isInvalid),
-		"data-test-id": testId,
-		...rest,
-		children
-	});
+const FormGroup = (props) => {
+  const {
+    className,
+    // biome-ignore lint/correctness/noUnusedVariables: ignore
+    name,
+    ignoreValidation,
+    isInvalid: isInvalid2,
+    children,
+    "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 });
 };
-var FormHint = ({ className, children, "data-test-id": testId = "form-hint", ...rest }) => {
-	const classes = cx(Form_module_default.hint, className);
-	return /* @__PURE__ */ jsx("div", {
-		...rest,
-		"data-test-id": testId,
-		className: classes,
-		children
-	});
+const FormHint = ({ className, children, "data-test-id": testId = "form-hint", ...rest }) => {
+  const classes = cx(styles.hint, className);
+  return /* @__PURE__ */ jsx("div", { ...rest, "data-test-id": testId, className: classes, children });
 };
-var FormField = ({ isRequired, label: label$1, name, htmlFor, hint: hint$1, errorMessage, ignoreValidation, isInvalid: isInvalid$1, children, className, onBlur, "data-test-id": testId = "form-field", LabelProps = {}, FormHintProps = {}, FieldErrorProps = {} }) => {
-	const handleBlur = () => {
-		onBlur?.(name);
-	};
-	return /* @__PURE__ */ jsxs(FormGroup, {
-		className: cx(Form_module_default.field, className),
-		name,
-		ignoreValidation,
-		isInvalid: isInvalid$1,
-		onBlur: handleBlur,
-		"data-test-id": testId,
-		children: [
-			label$1 && /* @__PURE__ */ jsx(Label, {
-				htmlFor,
-				required: isRequired,
-				...LabelProps,
-				children: label$1
-			}),
-			hint$1 && /* @__PURE__ */ jsx(FormHint, {
-				className: Form_module_default.hint,
-				...FormHintProps,
-				children: hint$1
-			}),
-			children,
-			/* @__PURE__ */ jsx(FieldError, {
-				className: Form_module_default.fieldErrorMessage,
-				name,
-				errorMessage,
-				...FieldErrorProps
-			})
-		]
-	});
+const FormField = ({
+  isRequired,
+  label: label2,
+  name,
+  htmlFor,
+  hint: hint2,
+  errorMessage,
+  ignoreValidation,
+  isInvalid: isInvalid2,
+  children,
+  className,
+  onBlur,
+  "data-test-id": testId = "form-field",
+  LabelProps = {},
+  FormHintProps = {},
+  FieldErrorProps = {}
+}) => {
+  const handleBlur = () => {
+    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, ...LabelProps, children: label2 }),
+        hint2 && /* @__PURE__ */ jsx(FormHint, { className: styles.hint, ...FormHintProps, children: hint2 }),
+        children,
+        /* @__PURE__ */ jsx(FieldError, { className: styles.fieldErrorMessage, name, errorMessage, ...FieldErrorProps })
+      ]
+    }
+  );
 };
-var IconField = ({ icon, children, className, "data-test-id": testId = "icon-field", tooltip, renderIconLast = false, ariaLabel = "More info", ...rest }) => {
-	const iconElement = /* @__PURE__ */ cloneElement(icon, {
-		size: "small",
-		className: cx(Form_module_default.iconFieldIcon, Form_module_default.iconFieldIconFill)
-	});
-	const classes = cx(Form_module_default.iconField, renderIconLast ? "IconAfter" : "IconBefore", className);
-	const renderIcon = tooltip ? /* @__PURE__ */ jsx(Tooltip, {
-		content: tooltip,
-		targetClassName: Form_module_default.iconFieldButton,
-		children: /* @__PURE__ */ jsx(IconButton, {
-			icon: /* @__PURE__ */ cloneElement(icon, { className: Form_module_default.iconFieldIconFill }),
-			size: "small",
-			className: Form_module_default.iconFieldIcon,
-			style: renderIconLast ? { right: "0.313rem" } : { left: "0.313rem" },
-			"aria-label": ariaLabel
-		})
-	}) : iconElement;
-	return /* @__PURE__ */ jsxs("div", {
-		className: classes,
-		"data-test-id": testId,
-		...rest,
-		children: [
-			!renderIconLast && renderIcon,
-			children,
-			renderIconLast && renderIcon
-		]
-	});
+const IconField = ({
+  icon,
+  children,
+  className,
+  "data-test-id": testId = "icon-field",
+  tooltip,
+  renderIconLast = false,
+  ariaLabel = "More info",
+  ...rest
+}) => {
+  const iconElement = /* @__PURE__ */ cloneElement(icon, {
+    size: "small",
+    className: cx(styles.iconFieldIcon, styles.iconFieldIconFill)
+  });
+  const classes = cx(styles.iconField, renderIconLast ? "IconAfter" : "IconBefore", className);
+  const renderIcon = tooltip ? /* @__PURE__ */ jsx(Tooltip, { content: tooltip, targetClassName: styles.iconFieldButton, children: /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      icon: /* @__PURE__ */ cloneElement(icon, {
+        className: styles.iconFieldIconFill
+      }),
+      size: "small",
+      className: styles.iconFieldIcon,
+      style: renderIconLast ? { right: "0.313rem" } : { left: "0.313rem" },
+      "aria-label": ariaLabel
+    }
+  ) }) : iconElement;
+  return /* @__PURE__ */ jsxs("div", { className: classes, "data-test-id": testId, ...rest, children: [
+    !renderIconLast && renderIcon,
+    children,
+    renderIconLast && renderIcon
+  ] });
 };
-var Radio = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, checked = false, children, className, disabled = false, id, labelClassName, labelStyle, "data-test-id": testId = "radio", ...rest }) => {
-	if (!children && !(ariaLabel !== void 0 || ariaLabelledby !== void 0)) 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(Form_module_default.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: Form_module_default.labelDisabled,
-			children
-		}) : children
-	})] });
+const Radio = ({
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  checked = false,
+  children,
+  className,
+  disabled = false,
+  id,
+  labelClassName,
+  labelStyle,
+  "data-test-id": testId = "radio",
+  ...rest
+}) => {
+  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(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 })
+  ] });
 };
-var RadioGroup = (props) => {
-	const { name, value, onChange, children, disabled, legend, "data-test-id": testId = "radio-group", ...rest } = props;
-	const fieldsetRef = useRef(null);
-	function updateRadioElems(elem) {
-		if (!/* @__PURE__ */ isValidElement(elem)) return elem;
-		const item = elem;
-		if (item?.type && item.type === Radio) return /* @__PURE__ */ cloneElement(item, {
-			...item.props,
-			name,
-			checked: item.props.value === value,
-			onChange,
-			disabled: typeof item.props?.disabled !== "undefined" ? item.props.disabled : disabled
-		});
-		if (item?.type && item.type === Label) return /* @__PURE__ */ cloneElement(item, {
-			...item.props,
-			onChange,
-			disabled
-		});
-		const elemChildren = item?.props?.children;
-		if (elemChildren) {
-			if (Array.isArray(elemChildren)) return /* @__PURE__ */ cloneElement(item, { children: Children.map(elemChildren, (elemChild) => updateRadioElems(elemChild)) });
-			return /* @__PURE__ */ cloneElement(item, { children: updateRadioElems(elemChildren) });
-		}
-		if (item?.type && item.type !== Radio && item.type !== Label) return item;
-		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
-		})]
-	});
+const RadioGroup = (props) => {
+  const { name, value, onChange, children, disabled, legend, "data-test-id": testId = "radio-group", ...rest } = props;
+  const fieldsetRef = useRef(null);
+  function updateRadioElems(elem) {
+    if (!/* @__PURE__ */ isValidElement(elem)) {
+      return elem;
+    }
+    const item = elem;
+    if (item?.type && item.type === Radio) {
+      return /* @__PURE__ */ cloneElement(item, {
+        ...item.props,
+        name,
+        checked: item.props.value === value,
+        onChange,
+        disabled: typeof item.props?.disabled !== "undefined" ? item.props.disabled : disabled
+      });
+    }
+    if (item?.type && item.type === Label) {
+      return /* @__PURE__ */ cloneElement(item, {
+        ...item.props,
+        onChange,
+        disabled
+      });
+    }
+    const elemChildren = item?.props?.children;
+    if (elemChildren) {
+      if (Array.isArray(elemChildren)) {
+        return /* @__PURE__ */ cloneElement(item, {
+          children: Children.map(elemChildren, (elemChild) => updateRadioElems(elemChild))
+        });
+      }
+      return /* @__PURE__ */ cloneElement(item, {
+        children: updateRadioElems(elemChildren)
+      });
+    }
+    if (item?.type && item.type !== Radio && item.type !== Label) {
+      return item;
+    }
+    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 })
+  ] });
 };
-var SelectField = /* @__PURE__ */ forwardRef(({ className, children, "data-test-id": testId = "select", ...rest }, ref) => {
-	const classes = cx(Form_module_default.formInput, className);
-	return /* @__PURE__ */ jsx("select", {
-		...rest,
-		"data-test-id": testId,
-		className: classes,
-		ref,
-		children
-	});
-});
+const SelectField = /* @__PURE__ */ 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";
-var TextArea = /* @__PURE__ */ 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(Form_module_default.formInput, className),
-		ref,
-		"data-test-id": testId,
-		"aria-describedby": props["aria-describedby"] || createFieldErrorId(props.id),
-		onKeyDown
-	});
-});
+const TextArea = /* @__PURE__ */ 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";
-var defaultFormatOptions = { maximumFractionDigits: 6 };
-var useNumberField = ({ className, "data-test-id": testId = "input", id, name, ...otherProps } = {}) => {
-	const formatOptions = useObjectMemo({
-		...defaultFormatOptions,
-		...otherProps.formatOptions
-	});
-	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: Form_module_default.numberField,
-			children: [/* @__PURE__ */ jsx("input", {
-				...inputProps,
-				className: cx(Form_module_default.formInput, Form_module_default["numberField-input"]),
-				"data-test-id": testId,
-				name,
-				ref: inputRef
-			}), /* @__PURE__ */ jsxs("div", {
-				className: Form_module_default["numberField-stepperContainer"],
-				children: [/* @__PURE__ */ jsx(Stepper, {
-					...incrementButtonProps,
-					children: /* @__PURE__ */ jsx(Icon, { name: "chevron-up" })
-				}), /* @__PURE__ */ jsx(Stepper, {
-					...decrementButtonProps,
-					children: /* @__PURE__ */ jsx(Icon, { name: "chevron-down" })
-				})]
-			})]
-		})
-	};
+const defaultFormatOptions = {
+  maximumFractionDigits: 6
 };
-var Stepper = (props) => {
-	const buttonRef = useRef(null);
-	const { buttonProps } = useButton(props, buttonRef);
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		...buttonProps,
-		className: Form_module_default["numberField-stepper"],
-		ref: buttonRef,
-		children: props.children
-	});
+const useNumberField = ({
+  className,
+  "data-test-id": testId = "input",
+  id,
+  name,
+  ...otherProps
+} = {}) => {
+  const formatOptions = useObjectMemo({
+    ...defaultFormatOptions,
+    ...otherProps.formatOptions
+  });
+  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(Icon, { name: "chevron-up" }) }),
+        /* @__PURE__ */ jsx(Stepper, { ...decrementButtonProps, children: /* @__PURE__ */ jsx(Icon, { name: "chevron-down" }) })
+      ] })
+    ] })
+  };
 };
-export { Checkbox, CompactTextField, FieldError, FieldSet, Form, FormField, FormGroup, FormHint, IconField, Label, Radio, RadioGroup, RequiredAsterisk, SelectField, TextArea, TextField, useNumberField };
-
-//# sourceMappingURL=index.es.js.map
+const Stepper = (props) => {
+  const buttonRef = useRef(null);
+  const { buttonProps } = useButton(props, buttonRef);
+  return /* @__PURE__ */ jsx("button", { type: "button", ...buttonProps, className: styles["numberField-stepper"], ref: buttonRef, children: props.children });
+};
+export {
+  Checkbox,
+  CompactTextField,
+  FieldError,
+  FieldSet,
+  Form,
+  FormField,
+  FormGroup,
+  FormHint,
+  IconField,
+  Label,
+  Radio,
+  RadioGroup,
+  RequiredAsterisk,
+  SelectField,
+  TextArea,
+  TextField,
+  useNumberField
+};
+//# sourceMappingURL=index.es.js.map