@entur/form 8.3.2-beta.8 → 8.3.2

package/dist/form.cjs.js

@@ -0,0 +1,1054 @@
+"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