@entur/form 8.3.2-beta.3 → 8.3.2-beta.4

package/dist/form.cjs.js

@@ -1,1054 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const utils = require("@entur/utils");
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const classNames = require("classnames");
-const icons = require("@entur/icons");
-const tooltip = require("@entur/tooltip");
-const button = require("@entur/button");
-const typography = require("@entur/typography");
-const tokens = require("@entur/tokens");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
-const info = "info";
-const error$1 = "error";
-const AlertIcon = ({ variant }) => {
-  const iconClass = `eds-feedback-text__icon eds-feedback-text__icon--${variant}`;
-  switch (variant) {
-    case "success":
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        icons.ValidationSuccessFilledIcon,
-        {
-          "aria-label": "Suksessmelding",
-          className: iconClass
-        }
-      );
-    case "negative":
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        icons.ValidationErrorFilledIcon,
-        {
-          "aria-label": "Feilmelding",
-          className: iconClass
-        }
-      );
-    case "information":
-      return null;
-    case "warning":
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        icons.ValidationExclamationFilledIcon,
-        {
-          "aria-label": "Varselmelding",
-          className: iconClass
-        }
-      );
-    case error$1:
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        icons.ValidationErrorFilledIcon,
-        {
-          "aria-label": "Feilmelding",
-          className: iconClass
-        }
-      );
-    case info:
-      return null;
-    default:
-      return null;
-  }
-};
-const FeedbackText = ({
-  children,
-  hideIcon = false,
-  variant,
-  className,
-  ...rest
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    typography.SubLabel,
-    {
-      className: classNames(
-        "eds-feedback-text",
-        {
-          "eds-feedback-text--information": variant === info || variant === "information"
-        },
-        className
-      ),
-      ...rest,
-      children: [
-        !hideIcon && /* @__PURE__ */ jsxRuntime.jsx(AlertIcon, { variant }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "eds-feedback-text__text", children })
-      ]
-    }
-  );
-};
-const InputGroupContext = React__namespace.createContext({
-  isFilled: false,
-  setFilled: () => null
-});
-const InputGroupContextProvider = ({ children }) => {
-  const [filled, setFilled] = React__namespace.useState(false);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    InputGroupContext.Provider,
-    {
-      value: { isFilled: filled, setFilled },
-      children
-    }
-  );
-};
-const useInputGroupContext = () => React__namespace.useContext(InputGroupContext);
-const InputGroupLabel = ({
-  label,
-  required,
-  labelId,
-  staticAnimation = false,
-  ...rest
-}) => {
-  const { isFilled: isFilled2 } = useInputGroupContext();
-  const filler = staticAnimation || isFilled2;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "label",
-    {
-      className: classNames(rest.className, {
-        "eds-input-group-label-wrapper--filled": filler
-      }),
-      id: labelId,
-      ...rest,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        "span",
-        {
-          className: classNames("eds-input-group__label", {
-            "eds-input-group__label--filled": filler
-          }),
-          children: [
-            label,
-            " ",
-            required && /* @__PURE__ */ jsxRuntime.jsx("span", { children: "*" })
-          ]
-        }
-      )
-    }
-  );
-};
-const VariantContext = React.createContext(null);
-const VariantProvider = ({
-  children,
-  variant = null
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(VariantContext.Provider, { value: variant, children });
-};
-const useVariant = () => {
-  const context = React.useContext(VariantContext);
-  return context;
-};
-const error = "error";
-const BaseFormControl = React.forwardRef(
-  ({
-    after,
-    before,
-    children,
-    className,
-    disabled = false,
-    readOnly = false,
-    variant,
-    prepend,
-    append,
-    size = "medium",
-    isFilled: isFilled2,
-    label,
-    required,
-    labelTooltip,
-    labelTooltipButtonAriaLabel = `Klikk for tilleggsinfo om ${label}-feltet`,
-    labelTooltipPlacement = "top",
-    feedback,
-    labelId,
-    labelProps,
-    style,
-    disableLabelAnimation = false,
-    ariaAlertOnFeedback = false,
-    ariaLabelOnReadOnly = "Dette skjemafeltet kan bare leses",
-    ...rest
-  }, ref) => {
-    const contextVariant = useVariant();
-    const currentVariant = variant || contextVariant;
-    return /* @__PURE__ */ jsxRuntime.jsx(InputGroupContextProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: classNames(
-          "eds-form-control__field-and-feedback-text",
-          className,
-          {
-            "eds-form-control__field-and-feedback-text--has-tooltip": labelTooltip !== void 0
-          }
-        ),
-        style,
-        children: [
-          before,
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: classNames(
-                "eds-form-control-wrapper",
-                `eds-form-control-wrapper--size-${size}`,
-                {
-                  "eds-form-control-wrapper--success": currentVariant === "success",
-                  "eds-form-control-wrapper--negative": currentVariant === "negative" || currentVariant === error,
-                  "eds-form-control-wrapper--disabled": disabled,
-                  "eds-form-control-wrapper--readonly": readOnly,
-                  "eds-form-control-wrapper--is-filled": isFilled2
-                }
-              ),
-              ref,
-              tabIndex: readOnly ? -1 : void 0,
-              ...rest,
-              children: [
-                prepend && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "eds-form-control__prepend", children: prepend }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  InputGroupLabel,
-                  {
-                    label,
-                    required,
-                    labelId,
-                    staticAnimation: disableLabelAnimation,
-                    "aria-label": readOnly ? `${label}, ${ariaLabelOnReadOnly}` : void 0,
-                    ...labelProps
-                  }
-                ),
-                labelTooltip && /* @__PURE__ */ jsxRuntime.jsx(
-                  tooltip.Tooltip,
-                  {
-                    content: labelTooltip,
-                    placement: labelTooltipPlacement,
-                    showCloseButton: false,
-                    disableFocusListener: true,
-                    disableHoverListener: true,
-                    disableClickListner: false,
-                    disableKeyboardListener: false,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      button.IconButton,
-                      {
-                        as: "span",
-                        tabIndex: 0,
-                        role: "button",
-                        className: "eds-form-control__append eds-form-control__append--tooltip",
-                        "aria-label": labelTooltipButtonAriaLabel,
-                        children: /* @__PURE__ */ jsxRuntime.jsx(
-                          icons.QuestionIcon,
-                          {
-                            className: "eds-input-group__label-tooltip-icon",
-                            "aria-hidden": "true"
-                          }
-                        )
-                      }
-                    )
-                  }
-                ),
-                children,
-                append && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "eds-form-control__append", children: append })
-              ]
-            }
-          ),
-          feedback && currentVariant && /* @__PURE__ */ jsxRuntime.jsx(
-            FeedbackText,
-            {
-              variant: currentVariant,
-              role: ariaAlertOnFeedback ? "alert" : void 0,
-              children: feedback
-            }
-          ),
-          after
-        ]
-      }
-    ) });
-  }
-);
-const Checkbox = React.forwardRef(
-  ({
-    checked,
-    className,
-    children,
-    style,
-    disabled = false,
-    readOnly = false,
-    reduceClickArea,
-    disableAnimation = false,
-    ...rest
-  }, ref) => {
-    const inputRef = React.useRef(null);
-    const isIndeterminate = checked === "indeterminate";
-    const isControlled = checked !== void 0;
-    React.useEffect(() => {
-      if (inputRef && inputRef.current) {
-        inputRef.current.indeterminate = isIndeterminate;
-      }
-    }, [isIndeterminate]);
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "label",
-      {
-        className: classNames("eds-checkbox__container", className, {
-          "eds-checkbox--disabled": disabled,
-          "eds-checkbox--readonly": readOnly,
-          "eds-checkbox__container--reduced-click-area": reduceClickArea
-        }),
-        style,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              type: "checkbox",
-              ref: utils.mergeRefs(ref, inputRef),
-              checked: isControlled ? checked === true : void 0,
-              disabled,
-              onKeyDown: (e) => {
-                if (readOnly && (e.key === " " || e.key === "Enter")) {
-                  e.preventDefault();
-                  e.stopPropagation();
-                }
-              },
-              "aria-label": readOnly ? ` ${children?.toString()}. Kan ikke endres` : void 0,
-              ...rest
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: classNames("eds-checkbox__icon", {
-                "eds-checkbox__icon--disabled": disabled,
-                "eds-checkbox__icon--readonly": readOnly,
-                "eds-checkbox__icon--reduced-click-area": reduceClickArea,
-                "eds-checkbox__icon--no-animation": disableAnimation || disabled || readOnly
-              }),
-              children: /* @__PURE__ */ jsxRuntime.jsx(CheckboxIcon, { indeterminate: isIndeterminate })
-            }
-          ),
-          children && /* @__PURE__ */ jsxRuntime.jsx(typography.Paragraph, { className: "eds-checkbox__label", margin: "none", as: "span", children })
-        ]
-      }
-    );
-  }
-);
-const CheckboxIcon = ({
-  indeterminate = false
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "svg",
-    {
-      className: "eds-checkbox-icon",
-      width: "11px",
-      height: "9px",
-      viewBox: "6 11 37 33",
-      "aria-hidden": true,
-      children: indeterminate ? /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "10", y: "25", width: "28", height: "5", fill: "white" }) : /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14.1 27.2l7.1 7.2 14.6-14.8", fill: "none" })
-    }
-  );
-};
-const Fieldset = ({
-  children,
-  className,
-  label,
-  ...rest
-}) => /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { className: classNames("eds-fieldset", className), ...rest, children: [
-  label && /* @__PURE__ */ jsxRuntime.jsx(typography.Heading5, { as: "legend", children: label }),
-  children
-] });
-const RadioGroupContext = React.createContext(
-  null
-);
-const RadioGroupContextProvider = RadioGroupContext.Provider;
-const useRadioGroupContext = () => {
-  const context = React.useContext(RadioGroupContext);
-  if (!context) {
-    throw new Error(
-      "You need to wrap your RadioButtons in a RadioGroup component"
-    );
-  }
-  return context;
-};
-const Radio = React.forwardRef(
-  ({ className, children, value, disabled, readOnlyLabelDescription, ...rest }, ref) => {
-    const {
-      name,
-      value: selectedValue,
-      onChange,
-      readOnly
-    } = useRadioGroupContext();
-    const classList = classNames(className, "eds-form-component--radio__radio", {
-      "eds-form-component--radio__radio--disabled": disabled,
-      "eds-form-component--radio__radio--readonly": readOnly
-    });
-    return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "eds-form-component--radio__container", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          type: "radio",
-          name: rest.name ?? name,
-          ref,
-          value,
-          checked: rest.checked ?? selectedValue === value,
-          onChange: (e) => {
-            if (readOnly) {
-              e.preventDefault();
-              return;
-            }
-            (rest.onChange ?? onChange)?.(e);
-          },
-          onClick: (e) => {
-            if (readOnly) {
-              e.preventDefault();
-            }
-          },
-          disabled,
-          "aria-label": readOnly ? `${children?.toString()}. ${readOnlyLabelDescription ?? "Kan ikke endres"}` : void 0,
-          ...rest
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: classList, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "eds-form-component--radio__circle" }) }),
-      children && /* @__PURE__ */ jsxRuntime.jsx(
-        typography.Paragraph,
-        {
-          margin: "none",
-          as: "span",
-          className: "eds-form-component--radio__label",
-          children
-        }
-      )
-    ] });
-  }
-);
-const InputPanelBase = React.forwardRef(
-  ({
-    className,
-    children,
-    value,
-    title,
-    secondaryLabel,
-    size = "medium",
-    hideSelectionIndicator = false,
-    style,
-    id,
-    disabled = false,
-    type = "radio",
-    onChange,
-    checked,
-    name,
-    ...rest
-  }, ref) => {
-    const classList = classNames(
-      className,
-      "eds-input-panel__container",
-      `eds-input-panel--${size}`
-    );
-    const inputRef = React.useRef(null);
-    const defaultId = utils.useRandomId("eds-inputpanel");
-    const inputPanelId = id || defaultId;
-    const forceUpdate = utils.useForceUpdate();
-    const handleOnChange = (e) => {
-      if (onChange === void 0) forceUpdate();
-      onChange?.(e);
-    };
-    return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "eds-input-panel", htmlFor: inputPanelId, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          type,
-          name,
-          ref: utils.mergeRefs(ref, inputRef),
-          value,
-          checked,
-          onChange: handleOnChange,
-          id: inputPanelId,
-          disabled,
-          ...rest
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classList, style, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "eds-input-panel__title-wrapper", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "eds-input-panel__title", children: title }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "eds-input-panel__secondary-label-and-icon-wrapper", children: [
-            secondaryLabel !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: secondaryLabel }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { pointerEvents: "none" }, children: !(disabled || hideSelectionIndicator) && (type === "radio" ? /* @__PURE__ */ jsxRuntime.jsx(
-              Radio,
-              {
-                name: "",
-                value: "",
-                checked: checked ?? inputRef.current?.checked ?? false,
-                onChange: () => {
-                  return;
-                },
-                "aria-hidden": "true",
-                tabIndex: -1
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx(
-              Checkbox,
-              {
-                checked: checked ?? inputRef.current?.checked ?? false,
-                onChange: () => null,
-                "aria-hidden": "true",
-                tabIndex: -1
-              }
-            )) })
-          ] })
-        ] }),
-        children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "eds-input-panel__additional-content", children })
-      ] })
-    ] });
-  }
-);
-const RadioPanel = React.forwardRef(
-  ({
-    className,
-    children,
-    value,
-    title,
-    secondaryLabel,
-    size = "medium",
-    hideRadioButton = false,
-    style,
-    id,
-    disabled = false,
-    ...rest
-  }, ref) => {
-    const { name, value: selected, onChange } = useRadioGroupContext();
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      InputPanelBase,
-      {
-        type: "radio",
-        name,
-        title,
-        value,
-        checked: selected === value,
-        onChange,
-        className,
-        secondaryLabel,
-        size,
-        hideSelectionIndicator: hideRadioButton,
-        style,
-        id,
-        disabled,
-        ...rest,
-        ref,
-        children
-      }
-    );
-  }
-);
-const CheckboxPanel = React.forwardRef(
-  ({
-    name,
-    checked,
-    onChange,
-    className,
-    children,
-    value,
-    title,
-    secondaryLabel,
-    size = "medium",
-    hideCheckbox = false,
-    style,
-    id,
-    disabled = false,
-    ...rest
-  }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      InputPanelBase,
-      {
-        type: "checkbox",
-        name,
-        title,
-        value,
-        checked,
-        onChange,
-        className,
-        secondaryLabel,
-        size,
-        hideSelectionIndicator: hideCheckbox,
-        style,
-        id,
-        disabled,
-        ...rest,
-        ref,
-        children
-      }
-    );
-  }
-);
-const RadioGroup = ({
-  name,
-  value,
-  children,
-  onChange,
-  label,
-  readOnly = false,
-  ...rest
-}) => {
-  const contextValue = React.useMemo(
-    () => ({ name, value, onChange, readOnly }),
-    [name, value, onChange, readOnly]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(RadioGroupContextProvider, { value: contextValue, children: label ? /* @__PURE__ */ jsxRuntime.jsx(Fieldset, { label, ...rest, children }) : children });
-};
-const Switch = React.forwardRef(
-  ({
-    className,
-    children,
-    labelPlacement = "right",
-    icon,
-    hideIcon = false,
-    color = tokens.colors.validation.mint,
-    contrastColor = tokens.colors.validation.mintContrast,
-    size = "medium",
-    checked,
-    ...rest
-  }, ref) => {
-    const displayedIcon = () => {
-      if (icon) return icon;
-      if (checked === void 0) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
-      const iconSize = size === "large" ? 23 : void 0;
-      return checked ? /* @__PURE__ */ jsxRuntime.jsx(icons.CheckIcon, { size: iconSize }) : /* @__PURE__ */ jsxRuntime.jsx(icons.CloseSmallIcon, { size: iconSize });
-    };
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "label",
-      {
-        className: classNames(
-          "eds-switch",
-          `eds-switch--${labelPlacement}`,
-          className
-        ),
-        style: { ...rest.style },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", ref, checked, ...rest }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: classNames(
-                "eds-switch__switch",
-                `eds-switch__switch--${size}`
-              ),
-              style: {
-                "--eds-switch-color": color,
-                "--eds-switch-contrast-color": contrastColor
-              },
-              "aria-hidden": "true",
-              children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "eds-switch__circle", children: !hideIcon && displayedIcon() })
-            }
-          ),
-          children && /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: classNames(
-                "eds-switch__label",
-                `eds-switch__label--${size}--${labelPlacement}`
-              ),
-              children
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-function hasValue(value) {
-  return value != null && !(Array.isArray(value) && value.length === 0);
-}
-function isFilled(obj, SSR = false) {
-  return obj && (hasValue(obj.value) && obj.value !== "" || SSR && hasValue(obj.defaultValue) && obj.defaultValue !== "");
-}
-const TextArea = React.forwardRef(
-  ({
-    variant,
-    disabled = false,
-    readOnly = false,
-    className,
-    style,
-    label,
-    feedback,
-    labelTooltip,
-    labelTooltipButtonAriaLabel,
-    labelTooltipPlacement,
-    onChange,
-    disableLabelAnimation,
-    ...rest
-  }, ref) => {
-    const textAreaId = utils.useRandomId("eds-textarea");
-    const textareaRef = React.useRef(null);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      BaseFormControl,
-      {
-        className: classNames(className, "eds-textarea__wrapper"),
-        disabled,
-        readOnly,
-        variant,
-        style,
-        label,
-        labelId: textAreaId,
-        feedback,
-        labelTooltip,
-        labelTooltipButtonAriaLabel,
-        labelTooltipPlacement,
-        labelProps: { className: "eds-textarea__label" },
-        disableLabelAnimation,
-        onClick: (e) => {
-          if (e.target === e.currentTarget) textareaRef?.current?.focus();
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          TextAreaBase,
-          {
-            readOnly,
-            disabled,
-            ref: utils.mergeRefs(ref, textareaRef),
-            "aria-labelledby": textAreaId,
-            onChange,
-            variant,
-            ...rest
-          }
-        )
-      }
-    );
-  }
-);
-const TextAreaBase = React.forwardRef(
-  ({ readOnly, disabled, onChange, value, variant, ...rest }, ref) => {
-    const contextVariant = useVariant();
-    const currentVariant = variant || contextVariant;
-    const { isFilled: isInputFilled, setFilled: setFiller } = useInputGroupContext();
-    utils.useOnMount(() => {
-      if (value?.toString() || rest.defaultValue) {
-        setFiller && !isInputFilled && setFiller(true);
-      }
-    });
-    React.useEffect(() => {
-      if (value?.toString() && setFiller && !isInputFilled) {
-        setFiller(true);
-      }
-    }, [value, setFiller, isInputFilled]);
-    const handleChange = (event) => {
-      if (isFilled(event.target)) {
-        setFiller && !isInputFilled && setFiller(true);
-      } else {
-        setFiller && isInputFilled && setFiller(false);
-      }
-      if (onChange) {
-        onChange(event);
-      }
-    };
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "textarea",
-      {
-        className: "eds-form-control eds-textarea",
-        ref,
-        readOnly,
-        disabled,
-        onChange: handleChange,
-        value,
-        "aria-invalid": currentVariant === "error",
-        ...rest
-      }
-    );
-  }
-);
-const TextField = React.forwardRef(
-  ({
-    prepend,
-    append,
-    variant,
-    disabled = false,
-    readOnly = false,
-    className,
-    style,
-    size = "medium",
-    label,
-    required,
-    labelTooltip,
-    labelTooltipButtonAriaLabel,
-    labelTooltipPlacement,
-    feedback,
-    onChange,
-    disableLabelAnimation,
-    labelProps,
-    clearable = false,
-    onClear,
-    value,
-    ariaAlertOnFeedback = false,
-    ...rest
-  }, ref) => {
-    const randomId = utils.useRandomId("eds-textfield");
-    const textFieldId = labelProps && labelProps.id ? labelProps.id : randomId;
-    const textFieldRef = React.useRef(null);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      BaseFormControl,
-      {
-        disabled,
-        readOnly,
-        variant,
-        prepend,
-        append: clearable && onClear ? /* @__PURE__ */ jsxRuntime.jsx(ClearButton, { onClear }) : append,
-        className: classNames(className, "eds-textfield__wrapper"),
-        style,
-        size,
-        label,
-        required,
-        labelTooltip,
-        labelTooltipButtonAriaLabel,
-        labelTooltipPlacement,
-        labelId: textFieldId,
-        feedback,
-        disableLabelAnimation,
-        labelProps,
-        ariaAlertOnFeedback,
-        onClick: (e) => {
-          if (e.target === e.currentTarget) textFieldRef?.current?.focus();
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          TextFieldBase,
-          {
-            disabled,
-            readOnly,
-            ref: utils.mergeRefs(ref, textFieldRef),
-            "aria-labelledby": textFieldId,
-            onChange,
-            value,
-            variant,
-            ...rest
-          }
-        )
-      }
-    );
-  }
-);
-const TextFieldBase = React.forwardRef(
-  ({ disabled, readOnly, placeholder, onChange, value, variant, ...rest }, forwardRef) => {
-    const contextVariant = useVariant();
-    const currentVariant = variant || contextVariant;
-    const { isFilled: isInputFilled, setFilled: setFiller } = useInputGroupContext();
-    utils.useOnMount(() => {
-      if (value?.toString() || rest.defaultValue) {
-        setFiller && !isInputFilled && setFiller(true);
-      }
-    });
-    React.useEffect(() => {
-      if (value?.toString() && setFiller && !isInputFilled) {
-        setFiller(true);
-      }
-    }, [value, setFiller, isInputFilled]);
-    const handleChange = (event) => {
-      if (isFilled(event.target)) {
-        setFiller && !isInputFilled && setFiller(true);
-      } else {
-        setFiller && isInputFilled && setFiller(false);
-      }
-      if (onChange) {
-        onChange(event);
-      }
-    };
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "input",
-      {
-        "aria-invalid": currentVariant === "error",
-        className: "eds-form-control",
-        disabled,
-        readOnly,
-        ref: forwardRef,
-        placeholder,
-        onChange: handleChange,
-        value,
-        ...rest
-      }
-    );
-  }
-);
-const ClearButton = ({ onClear, ...props }) => {
-  const { isFilled: hasValue2, setFilled } = useInputGroupContext();
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "eds-textfield__clear-button-wrapper", children: [
-    hasValue2 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "eds-textfield__divider" }),
-    hasValue2 && /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        className: "eds-textfield__clear-button",
-        type: "button",
-        tabIndex: -1,
-        onClick: () => {
-          setFilled(false);
-          onClear();
-        },
-        ...props,
-        children: /* @__PURE__ */ jsxRuntime.jsx(icons.CloseSmallIcon, {})
-      }
-    )
-  ] });
-};
-const SegmentedContext = React.createContext(
-  null
-);
-const SegmentedProvider = ({
-  name,
-  onChange = () => void 0,
-  selectedValue,
-  multiple,
-  size,
-  ...rest
-}) => {
-  const generatedName = utils.useRandomId("eds-segmented-control");
-  const contextValue = React.useMemo(
-    () => ({
-      name: name || generatedName,
-      onChange,
-      multiple,
-      selectedValue,
-      size
-    }),
-    [generatedName, multiple, name, onChange, selectedValue, size]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(SegmentedContext.Provider, { value: contextValue, ...rest });
-};
-const useSegmentedContext = () => {
-  const context = React.useContext(SegmentedContext);
-  if (!context) {
-    throw new Error(
-      "You need to wrap your SegmentedChoice in either SegmentedControl or MultipleSegmentedControl"
-    );
-  }
-  return context;
-};
-const SegmentedChoice = React.forwardRef(
-  ({
-    children,
-    className,
-    style,
-    value,
-    name,
-    onChange = () => void 0,
-    ...rest
-  }, ref) => {
-    const {
-      name: commonName,
-      selectedValue,
-      onChange: commonOnChange,
-      multiple,
-      size
-    } = useSegmentedContext();
-    const isChecked = multiple ? selectedValue[value] : selectedValue === value;
-    const handleChange = (e) => {
-      onChange(e);
-      if (multiple) {
-        commonOnChange({
-          ...selectedValue,
-          [value]: e.target.checked
-        });
-      } else if (e.target.checked) {
-        commonOnChange(value);
-      }
-    };
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "label",
-      {
-        className: classNames("eds-segmented-choice", className),
-        style,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              type: multiple ? "checkbox" : "radio",
-              name: name || commonName,
-              checked: isChecked,
-              value,
-              onChange: handleChange,
-              ref,
-              ...rest
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: classNames("eds-base-segmented", {
-                "eds-base-segmented--large": size === "large"
-              }),
-              children
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-const SegmentedControl = ({
-  children,
-  label,
-  name,
-  onChange,
-  selectedValue,
-  size = "medium",
-  className,
-  ...rest
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    SegmentedProvider,
-    {
-      name,
-      selectedValue,
-      onChange,
-      multiple: false,
-      size,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Fieldset, { label, children: /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: classNames("eds-segmented-control", className),
-          ...rest,
-          children
-        }
-      ) })
-    }
-  );
-};
-const MultipleSegmentedControl = ({ children, label, name, onChange, selectedValue, ...rest }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    SegmentedProvider,
-    {
-      name,
-      selectedValue,
-      onChange,
-      multiple: true,
-      size: "medium",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(typography.Label, { as: "div", children: label }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "eds-segmented-control", ...rest, children })
-      ]
-    }
-  );
-};
-utils.warnAboutMissingStyles("form", "icons", "typography");
-exports.BaseFormControl = BaseFormControl;
-exports.Checkbox = Checkbox;
-exports.CheckboxPanel = CheckboxPanel;
-exports.FeedbackText = FeedbackText;
-exports.Fieldset = Fieldset;
-exports.InputGroupContextProvider = InputGroupContextProvider;
-exports.InputGroupLabel = InputGroupLabel;
-exports.MultipleSegmentedControl = MultipleSegmentedControl;
-exports.Radio = Radio;
-exports.RadioGroup = RadioGroup;
-exports.RadioPanel = RadioPanel;
-exports.SegmentedChoice = SegmentedChoice;
-exports.SegmentedControl = SegmentedControl;
-exports.Switch = Switch;
-exports.TextArea = TextArea;
-exports.TextField = TextField;
-exports.VariantProvider = VariantProvider;
-exports.hasValue = hasValue;
-exports.isFilled = isFilled;
-exports.useInputGroupContext = useInputGroupContext;
-exports.useVariant = useVariant;
-//# sourceMappingURL=form.cjs.js.map