@entur/form 8.3.1 → 8.3.2-beta.0

package/dist/form.esm.js

@@ -1,984 +1,1105 @@
-import { mergeRefs, useRandomId, useForceUpdate, useOnMount, warnAboutMissingStyles } from '@entur/utils';
-import * as React from 'react';
-import React__default, { useRef } from 'react';
-import classNames from 'classnames';
-import { ValidationErrorFilledIcon, ValidationExclamationFilledIcon, ValidationSuccessFilledIcon, QuestionIcon, CheckIcon, CloseSmallIcon } from '@entur/icons';
-import { Tooltip } from '@entur/tooltip';
-import { IconButton } from '@entur/button';
-import { SubLabel, Paragraph, Heading5, Label } from '@entur/typography';
-import { colors } from '@entur/tokens';
-
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends.apply(null, arguments);
+import { mergeRefs, useRandomId, useForceUpdate, useOnMount, warnAboutMissingStyles } from "@entur/utils";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import React__default, { useRef } from "react";
+import { ValidationErrorFilledIcon, ValidationExclamationFilledIcon, ValidationSuccessFilledIcon, QuestionIcon, CheckIcon, CloseSmallIcon } from "@entur/icons";
+import { Tooltip } from "@entur/tooltip";
+import { IconButton } from "@entur/button";
+import { SubLabel, Paragraph, Heading5, Label } from "@entur/typography";
+import { colors } from "@entur/tokens";
+function getDefaultExportFromCjs(x) {
+  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
 }
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (e.includes(n)) continue;
-    t[n] = r[n];
-  }
-  return t;
+var classnames = { exports: {} };
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+var hasRequiredClassnames;
+function requireClassnames() {
+  if (hasRequiredClassnames) return classnames.exports;
+  hasRequiredClassnames = 1;
+  (function(module) {
+    (function() {
+      var hasOwn = {}.hasOwnProperty;
+      function classNames2() {
+        var classes = "";
+        for (var i = 0; i < arguments.length; i++) {
+          var arg = arguments[i];
+          if (arg) {
+            classes = appendClass(classes, parseValue(arg));
+          }
+        }
+        return classes;
+      }
+      function parseValue(arg) {
+        if (typeof arg === "string" || typeof arg === "number") {
+          return arg;
+        }
+        if (typeof arg !== "object") {
+          return "";
+        }
+        if (Array.isArray(arg)) {
+          return classNames2.apply(null, arg);
+        }
+        if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
+          return arg.toString();
+        }
+        var classes = "";
+        for (var key in arg) {
+          if (hasOwn.call(arg, key) && arg[key]) {
+            classes = appendClass(classes, key);
+          }
+        }
+        return classes;
+      }
+      function appendClass(value, newClass) {
+        if (!newClass) {
+          return value;
+        }
+        if (value) {
+          return value + " " + newClass;
+        }
+        return value + newClass;
+      }
+      if (module.exports) {
+        classNames2.default = classNames2;
+        module.exports = classNames2;
+      } else {
+        window.classNames = classNames2;
+      }
+    })();
+  })(classnames);
+  return classnames.exports;
 }
-
-var _excluded$g = ["children", "hideIcon", "variant", "className"];
-/** @deprecated use variant="information" instead */
-var info = 'info';
-/** @deprecated use variant="negative" instead */
-var error$1 = 'error';
-var AlertIcon = function AlertIcon(_ref) {
-  var variant = _ref.variant;
-  var iconClass = "eds-feedback-text__icon eds-feedback-text__icon--" + variant;
+var classnamesExports = requireClassnames();
+const classNames = /* @__PURE__ */ getDefaultExportFromCjs(classnamesExports);
+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 React__default.createElement(ValidationSuccessFilledIcon, {
-        "aria-label": "Suksessmelding",
-        className: iconClass
-      });
-    case 'negative':
-      return React__default.createElement(ValidationErrorFilledIcon, {
-        "aria-label": "Feilmelding",
-        className: iconClass
-      });
-    case 'information':
+    case "success":
+      return /* @__PURE__ */ jsx(
+        ValidationSuccessFilledIcon,
+        {
+          "aria-label": "Suksessmelding",
+          className: iconClass
+        }
+      );
+    case "negative":
+      return /* @__PURE__ */ jsx(
+        ValidationErrorFilledIcon,
+        {
+          "aria-label": "Feilmelding",
+          className: iconClass
+        }
+      );
+    case "information":
       return null;
-    case 'warning':
-      return React__default.createElement(ValidationExclamationFilledIcon, {
-        "aria-label": "Varselmelding",
-        className: iconClass
-      });
+    case "warning":
+      return /* @__PURE__ */ jsx(
+        ValidationExclamationFilledIcon,
+        {
+          "aria-label": "Varselmelding",
+          className: iconClass
+        }
+      );
     case error$1:
-      return React__default.createElement(ValidationErrorFilledIcon, {
-        "aria-label": "Feilmelding",
-        className: iconClass
-      });
+      return /* @__PURE__ */ jsx(
+        ValidationErrorFilledIcon,
+        {
+          "aria-label": "Feilmelding",
+          className: iconClass
+        }
+      );
     case info:
       return null;
     default:
       return null;
   }
 };
-var FeedbackText = function FeedbackText(_ref2) {
-  var children = _ref2.children,
-    _ref2$hideIcon = _ref2.hideIcon,
-    hideIcon = _ref2$hideIcon === void 0 ? false : _ref2$hideIcon,
-    variant = _ref2.variant,
-    className = _ref2.className,
-    rest = _objectWithoutPropertiesLoose(_ref2, _excluded$g);
-  return React__default.createElement(SubLabel, _extends({
-    className: classNames('eds-feedback-text', {
-      'eds-feedback-text--information': variant === info || variant === 'information'
-    }, className)
-  }, rest), !hideIcon && React__default.createElement(AlertIcon, {
-    variant: variant
-  }), React__default.createElement("span", {
-    className: "eds-feedback-text__text"
-  }, children));
+const FeedbackText = ({
+  children,
+  hideIcon = false,
+  variant,
+  className,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsxs(
+    SubLabel,
+    {
+      className: classNames(
+        "eds-feedback-text",
+        {
+          "eds-feedback-text--information": variant === info || variant === "information"
+        },
+        className
+      ),
+      ...rest,
+      children: [
+        !hideIcon && /* @__PURE__ */ jsx(AlertIcon, { variant }),
+        /* @__PURE__ */ jsx("span", { className: "eds-feedback-text__text", children })
+      ]
+    }
+  );
 };
-
-var InputGroupContext = /*#__PURE__*/React.createContext({
+const InputGroupContext = React.createContext({
   isFilled: false,
-  setFilled: function setFilled() {
-    return null;
-  }
+  setFilled: () => null
 });
-var InputGroupContextProvider = function InputGroupContextProvider(_ref) {
-  var children = _ref.children;
-  var _React$useState = React.useState(false),
-    filled = _React$useState[0],
-    setFilled = _React$useState[1];
-  return React.createElement(InputGroupContext.Provider, {
-    value: {
-      isFilled: filled,
-      setFilled: setFilled
+const InputGroupContextProvider = ({ children }) => {
+  const [filled, setFilled] = React.useState(false);
+  return /* @__PURE__ */ jsx(
+    InputGroupContext.Provider,
+    {
+      value: { isFilled: filled, setFilled },
+      children
     }
-  }, children);
-};
-var useInputGroupContext = function useInputGroupContext() {
-  return React.useContext(InputGroupContext);
+  );
 };
-
-var _excluded$f = ["label", "required", "labelId", "staticAnimation"];
-var InputGroupLabel = function InputGroupLabel(_ref) {
-  var label = _ref.label,
-    required = _ref.required,
-    labelId = _ref.labelId,
-    _ref$staticAnimation = _ref.staticAnimation,
-    staticAnimation = _ref$staticAnimation === void 0 ? false : _ref$staticAnimation,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$f);
-  var _useInputGroupContext = useInputGroupContext(),
-    isFilled = _useInputGroupContext.isFilled;
-  var filler = staticAnimation || isFilled;
-  return React__default.createElement("label", _extends({
-    className: classNames(rest.className, {
-      'eds-input-group-label-wrapper--filled': filler
-    }),
-    id: labelId
-  }, rest), React__default.createElement("span", {
-    className: classNames('eds-input-group__label', {
-      'eds-input-group__label--filled': filler
-    })
-  }, label, " ", required && React__default.createElement("span", null, "*")));
+const useInputGroupContext = () => React.useContext(InputGroupContext);
+const InputGroupLabel = ({
+  label,
+  required,
+  labelId,
+  staticAnimation = false,
+  ...rest
+}) => {
+  const { isFilled: isFilled2 } = useInputGroupContext();
+  const filler = staticAnimation || isFilled2;
+  return /* @__PURE__ */ jsx(
+    "label",
+    {
+      className: classNames(rest.className, {
+        "eds-input-group-label-wrapper--filled": filler
+      }),
+      id: labelId,
+      ...rest,
+      children: /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: classNames("eds-input-group__label", {
+            "eds-input-group__label--filled": filler
+          }),
+          children: [
+            label,
+            " ",
+            required && /* @__PURE__ */ jsx("span", { children: "*" })
+          ]
+        }
+      )
+    }
+  );
 };
-
-var VariantContext = /*#__PURE__*/React__default.createContext(null);
-var VariantProvider = function VariantProvider(_ref) {
-  var children = _ref.children,
-    _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? null : _ref$variant;
-  return React__default.createElement(VariantContext.Provider, {
-    value: variant
-  }, children);
+const VariantContext = React__default.createContext(null);
+const VariantProvider = ({
+  children,
+  variant = null
+}) => {
+  return /* @__PURE__ */ jsx(VariantContext.Provider, { value: variant, children });
 };
-var useVariant = function useVariant() {
-  var context = React__default.useContext(VariantContext);
+const useVariant = () => {
+  const context = React__default.useContext(VariantContext);
   return context;
 };
-
-var _excluded$e = ["after", "before", "children", "className", "disabled", "readOnly", "variant", "prepend", "append", "size", "isFilled", "label", "required", "labelTooltip", "labelTooltipButtonAriaLabel", "labelTooltipPlacement", "feedback", "labelId", "labelProps", "style", "disableLabelAnimation", "ariaAlertOnFeedback", "ariaLabelOnReadOnly"];
-/** @deprecated use variant="negative" instead */
-var error = 'error';
-var BaseFormControl = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var after = _ref.after,
-    before = _ref.before,
-    children = _ref.children,
-    className = _ref.className,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$readOnly = _ref.readOnly,
-    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-    variant = _ref.variant,
-    prepend = _ref.prepend,
-    append = _ref.append,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'medium' : _ref$size,
-    isFilled = _ref.isFilled,
-    label = _ref.label,
-    required = _ref.required,
-    labelTooltip = _ref.labelTooltip,
-    _ref$labelTooltipButt = _ref.labelTooltipButtonAriaLabel,
-    labelTooltipButtonAriaLabel = _ref$labelTooltipButt === void 0 ? "Klikk for tilleggsinfo om " + label + "-feltet" : _ref$labelTooltipButt,
-    _ref$labelTooltipPlac = _ref.labelTooltipPlacement,
-    labelTooltipPlacement = _ref$labelTooltipPlac === void 0 ? 'top' : _ref$labelTooltipPlac,
-    feedback = _ref.feedback,
-    labelId = _ref.labelId,
-    labelProps = _ref.labelProps,
-    style = _ref.style,
-    _ref$disableLabelAnim = _ref.disableLabelAnimation,
-    disableLabelAnimation = _ref$disableLabelAnim === void 0 ? false : _ref$disableLabelAnim,
-    _ref$ariaAlertOnFeedb = _ref.ariaAlertOnFeedback,
-    ariaAlertOnFeedback = _ref$ariaAlertOnFeedb === void 0 ? false : _ref$ariaAlertOnFeedb,
-    _ref$ariaLabelOnReadO = _ref.ariaLabelOnReadOnly,
-    ariaLabelOnReadOnly = _ref$ariaLabelOnReadO === void 0 ? 'Dette skjemafeltet kan bare leses' : _ref$ariaLabelOnReadO,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$e);
-  var contextVariant = useVariant();
-  var currentVariant = variant || contextVariant;
-  return React__default.createElement(InputGroupContextProvider, null, React__default.createElement("div", {
-    className: classNames('eds-form-control__field-and-feedback-text', className, {
-      'eds-form-control__field-and-feedback-text--has-tooltip': labelTooltip !== undefined
-    }),
-    style: style
-  }, before, React__default.createElement("div", _extends({
-    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': isFilled
-    }),
-    ref: ref,
-    tabIndex: readOnly ? -1 : undefined
-  }, rest), prepend && React__default.createElement("div", {
-    className: "eds-form-control__prepend"
-  }, prepend), React__default.createElement(InputGroupLabel, _extends({
-    label: label,
-    required: required,
-    labelId: labelId,
-    staticAnimation: disableLabelAnimation,
-    "aria-label": readOnly ? label + ", " + ariaLabelOnReadOnly : undefined
-  }, labelProps)), labelTooltip && React__default.createElement(Tooltip, {
-    content: labelTooltip,
-    placement: labelTooltipPlacement,
-    showCloseButton: false,
-    disableFocusListener: true,
-    disableHoverListener: true,
-    disableClickListner: false,
-    disableKeyboardListener: false
-  }, React__default.createElement(IconButton, {
-    as: "span",
-    tabIndex: 0,
-    role: "button",
-    className: "eds-form-control__append eds-form-control__append--tooltip",
-    "aria-label": labelTooltipButtonAriaLabel
-  }, React__default.createElement(QuestionIcon, {
-    className: "eds-input-group__label-tooltip-icon",
-    "aria-hidden": "true"
-  }))), children, append && React__default.createElement("div", {
-    className: "eds-form-control__append"
-  }, append)), feedback && currentVariant && React__default.createElement(FeedbackText, {
-    variant: currentVariant,
-    role: ariaAlertOnFeedback ? 'alert' : undefined
-  }, feedback), after));
-});
-
-var _excluded$d = ["checked", "className", "children", "style", "disabled", "readOnly", "reduceClickArea", "disableAnimation"];
-var Checkbox = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var checked = _ref.checked,
-    className = _ref.className,
-    children = _ref.children,
-    style = _ref.style,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$readOnly = _ref.readOnly,
-    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-    reduceClickArea = _ref.reduceClickArea,
-    _ref$disableAnimation = _ref.disableAnimation,
-    disableAnimation = _ref$disableAnimation === void 0 ? false : _ref$disableAnimation,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$d);
-  var inputRef = React__default.useRef(null);
-  var isIndeterminate = checked === 'indeterminate';
-  var isControlled = checked !== undefined;
-  React__default.useEffect(function () {
-    if (inputRef && inputRef.current) {
-      inputRef.current.indeterminate = isIndeterminate;
-    }
-  }, [isIndeterminate]);
-  return React__default.createElement("label", {
-    className: classNames('eds-checkbox__container', className, {
-      'eds-checkbox--disabled': disabled,
-      'eds-checkbox--readonly': readOnly,
-      'eds-checkbox__container--reduced-click-area': reduceClickArea
-    }),
-    style: style
-  }, React__default.createElement("input", _extends({
-    type: "checkbox",
-    ref: mergeRefs(ref, inputRef),
-    checked: isControlled ? checked === true : undefined,
-    disabled: disabled,
-    onKeyDown: function onKeyDown(e) {
-      if (readOnly && (e.key === ' ' || e.key === 'Enter')) {
-        e.preventDefault();
-        e.stopPropagation();
+const error = "error";
+const BaseFormControl = React__default.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__ */ jsx(InputGroupContextProvider, { children: /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: "eds-form-control__prepend", children: prepend }),
+                /* @__PURE__ */ jsx(
+                  InputGroupLabel,
+                  {
+                    label,
+                    required,
+                    labelId,
+                    staticAnimation: disableLabelAnimation,
+                    "aria-label": readOnly ? `${label}, ${ariaLabelOnReadOnly}` : void 0,
+                    ...labelProps
+                  }
+                ),
+                labelTooltip && /* @__PURE__ */ jsx(
+                  Tooltip,
+                  {
+                    content: labelTooltip,
+                    placement: labelTooltipPlacement,
+                    showCloseButton: false,
+                    disableFocusListener: true,
+                    disableHoverListener: true,
+                    disableClickListner: false,
+                    disableKeyboardListener: false,
+                    children: /* @__PURE__ */ jsx(
+                      IconButton,
+                      {
+                        as: "span",
+                        tabIndex: 0,
+                        role: "button",
+                        className: "eds-form-control__append eds-form-control__append--tooltip",
+                        "aria-label": labelTooltipButtonAriaLabel,
+                        children: /* @__PURE__ */ jsx(
+                          QuestionIcon,
+                          {
+                            className: "eds-input-group__label-tooltip-icon",
+                            "aria-hidden": "true"
+                          }
+                        )
+                      }
+                    )
+                  }
+                ),
+                children,
+                append && /* @__PURE__ */ jsx("div", { className: "eds-form-control__append", children: append })
+              ]
+            }
+          ),
+          feedback && currentVariant && /* @__PURE__ */ jsx(
+            FeedbackText,
+            {
+              variant: currentVariant,
+              role: ariaAlertOnFeedback ? "alert" : void 0,
+              children: feedback
+            }
+          ),
+          after
+        ]
       }
-    },
-    "aria-label": readOnly ? " " + (children == null ? void 0 : children.toString()) + ". Kan ikke endres" : undefined
-  }, rest)), React__default.createElement("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
-    })
-  }, React__default.createElement(CheckboxIcon, {
-    indeterminate: isIndeterminate
-  })), children && React__default.createElement(Paragraph, {
-    className: "eds-checkbox__label",
-    margin: "none",
-    as: "span"
-  }, children));
-});
-var CheckboxIcon = function CheckboxIcon(_ref2) {
-  var _ref2$indeterminate = _ref2.indeterminate,
-    indeterminate = _ref2$indeterminate === void 0 ? false : _ref2$indeterminate;
-  return React__default.createElement("svg", {
-    className: "eds-checkbox-icon",
-    width: "11px",
-    height: "9px",
-    viewBox: "6 11 37 33",
-    "aria-hidden": true
-  }, indeterminate ? React__default.createElement("rect", {
-    x: "10",
-    y: "25",
-    width: "28",
-    height: "5",
-    fill: "white"
-  }) : React__default.createElement("path", {
-    d: "M14.1 27.2l7.1 7.2 14.6-14.8",
-    fill: "none"
-  }));
-};
-
-var _excluded$c = ["children", "className", "label"];
-var Fieldset = function Fieldset(_ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    label = _ref.label,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$c);
-  return React__default.createElement("fieldset", _extends({
-    className: classNames('eds-fieldset', className)
-  }, rest), label && React__default.createElement(Heading5, {
-    as: "legend"
-  }, label), children);
+    ) });
+  }
+);
+const Checkbox = React__default.forwardRef(
+  ({
+    checked,
+    className,
+    children,
+    style,
+    disabled = false,
+    readOnly = false,
+    reduceClickArea,
+    disableAnimation = false,
+    ...rest
+  }, ref) => {
+    const inputRef = React__default.useRef(null);
+    const isIndeterminate = checked === "indeterminate";
+    const isControlled = checked !== void 0;
+    React__default.useEffect(() => {
+      if (inputRef && inputRef.current) {
+        inputRef.current.indeterminate = isIndeterminate;
+      }
+    }, [isIndeterminate]);
+    return /* @__PURE__ */ 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__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              ref: 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__ */ 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__ */ jsx(CheckboxIcon, { indeterminate: isIndeterminate })
+            }
+          ),
+          children && /* @__PURE__ */ jsx(Paragraph, { className: "eds-checkbox__label", margin: "none", as: "span", children })
+        ]
+      }
+    );
+  }
+);
+const CheckboxIcon = ({
+  indeterminate = false
+}) => {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: "eds-checkbox-icon",
+      width: "11px",
+      height: "9px",
+      viewBox: "6 11 37 33",
+      "aria-hidden": true,
+      children: indeterminate ? /* @__PURE__ */ jsx("rect", { x: "10", y: "25", width: "28", height: "5", fill: "white" }) : /* @__PURE__ */ jsx("path", { d: "M14.1 27.2l7.1 7.2 14.6-14.8", fill: "none" })
+    }
+  );
 };
-
-var RadioGroupContext = /*#__PURE__*/React__default.createContext(null);
-var RadioGroupContextProvider = RadioGroupContext.Provider;
-var useRadioGroupContext = function useRadioGroupContext() {
-  var context = React__default.useContext(RadioGroupContext);
+const Fieldset = ({
+  children,
+  className,
+  label,
+  ...rest
+}) => /* @__PURE__ */ jsxs("fieldset", { className: classNames("eds-fieldset", className), ...rest, children: [
+  label && /* @__PURE__ */ jsx(Heading5, { as: "legend", children: label }),
+  children
+] });
+const RadioGroupContext = React__default.createContext(
+  null
+);
+const RadioGroupContextProvider = RadioGroupContext.Provider;
+const useRadioGroupContext = () => {
+  const context = React__default.useContext(RadioGroupContext);
   if (!context) {
-    throw new Error('You need to wrap your RadioButtons in a RadioGroup component');
+    throw new Error(
+      "You need to wrap your RadioButtons in a RadioGroup component"
+    );
   }
   return context;
 };
-
-var _excluded$b = ["className", "children", "value", "disabled", "readOnlyLabelDescription"];
-var Radio = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var _rest$name, _rest$checked;
-  var className = _ref.className,
-    children = _ref.children,
-    value = _ref.value,
-    disabled = _ref.disabled,
-    readOnlyLabelDescription = _ref.readOnlyLabelDescription,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$b);
-  var _useRadioGroupContext = useRadioGroupContext(),
-    name = _useRadioGroupContext.name,
-    selectedValue = _useRadioGroupContext.value,
-    _onChange = _useRadioGroupContext.onChange,
-    readOnly = _useRadioGroupContext.readOnly;
-  var classList = classNames(className, 'eds-form-component--radio__radio', {
-    'eds-form-component--radio__radio--disabled': disabled,
-    'eds-form-component--radio__radio--readonly': readOnly
-  });
-  return React__default.createElement("label", {
-    className: "eds-form-component--radio__container"
-  }, React__default.createElement("input", _extends({
-    type: "radio",
-    name: (_rest$name = rest.name) != null ? _rest$name : name,
-    ref: ref,
-    value: value,
-    checked: (_rest$checked = rest.checked) != null ? _rest$checked : selectedValue === value,
-    onChange: function onChange(e) {
-      var _ref2, _rest$onChange;
-      if (readOnly) {
-        e.preventDefault();
-        return;
+const Radio = React__default.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__ */ jsxs("label", { className: "eds-form-component--radio__container", children: [
+      /* @__PURE__ */ 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__ */ jsx("span", { className: classList, children: /* @__PURE__ */ jsx("span", { className: "eds-form-component--radio__circle" }) }),
+      children && /* @__PURE__ */ jsx(
+        Paragraph,
+        {
+          margin: "none",
+          as: "span",
+          className: "eds-form-component--radio__label",
+          children
+        }
+      )
+    ] });
+  }
+);
+const InputPanelBase = React__default.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 = useRef(null);
+    const defaultId = useRandomId("eds-inputpanel");
+    const inputPanelId = id || defaultId;
+    const forceUpdate = useForceUpdate();
+    const handleOnChange = (e) => {
+      if (onChange === void 0) forceUpdate();
+      onChange?.(e);
+    };
+    return /* @__PURE__ */ jsxs("label", { className: "eds-input-panel", htmlFor: inputPanelId, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type,
+          name,
+          ref: mergeRefs(ref, inputRef),
+          value,
+          checked,
+          onChange: handleOnChange,
+          id: inputPanelId,
+          disabled,
+          ...rest
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: classList, style, children: [
+        /* @__PURE__ */ jsxs("div", { className: "eds-input-panel__title-wrapper", children: [
+          /* @__PURE__ */ jsx("div", { className: "eds-input-panel__title", children: title }),
+          /* @__PURE__ */ jsxs("div", { className: "eds-input-panel__secondary-label-and-icon-wrapper", children: [
+            secondaryLabel !== void 0 && /* @__PURE__ */ jsx(Fragment, { children: secondaryLabel }),
+            /* @__PURE__ */ jsx("span", { style: { pointerEvents: "none" }, children: !(disabled || hideSelectionIndicator) && (type === "radio" ? /* @__PURE__ */ jsx(
+              Radio,
+              {
+                name: "",
+                value: "",
+                checked: checked ?? inputRef.current?.checked ?? false,
+                onChange: () => {
+                  return;
+                },
+                "aria-hidden": "true",
+                tabIndex: -1
+              }
+            ) : /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                checked: checked ?? inputRef.current?.checked ?? false,
+                onChange: () => null,
+                "aria-hidden": "true",
+                tabIndex: -1
+              }
+            )) })
+          ] })
+        ] }),
+        children && /* @__PURE__ */ jsx("div", { className: "eds-input-panel__additional-content", children })
+      ] })
+    ] });
+  }
+);
+const RadioPanel = React__default.forwardRef(
+  ({
+    className,
+    children,
+    value,
+    title,
+    secondaryLabel,
+    size = "medium",
+    hideRadioButton = false,
+    style,
+    id,
+    disabled = false,
+    ...rest
+  }, ref) => {
+    const { name, value: selected, onChange } = useRadioGroupContext();
+    return /* @__PURE__ */ jsx(
+      InputPanelBase,
+      {
+        type: "radio",
+        name,
+        title,
+        value,
+        checked: selected === value,
+        onChange,
+        className,
+        secondaryLabel,
+        size,
+        hideSelectionIndicator: hideRadioButton,
+        style,
+        id,
+        disabled,
+        ...rest,
+        ref,
+        children
       }
-      (_ref2 = (_rest$onChange = rest.onChange) != null ? _rest$onChange : _onChange) == null || _ref2(e);
-    },
-    onClick: function onClick(e) {
-      if (readOnly) {
-        e.preventDefault();
+    );
+  }
+);
+const CheckboxPanel = React__default.forwardRef(
+  ({
+    name,
+    checked,
+    onChange,
+    className,
+    children,
+    value,
+    title,
+    secondaryLabel,
+    size = "medium",
+    hideCheckbox = false,
+    style,
+    id,
+    disabled = false,
+    ...rest
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      InputPanelBase,
+      {
+        type: "checkbox",
+        name,
+        title,
+        value,
+        checked,
+        onChange,
+        className,
+        secondaryLabel,
+        size,
+        hideSelectionIndicator: hideCheckbox,
+        style,
+        id,
+        disabled,
+        ...rest,
+        ref,
+        children
       }
-    },
-    disabled: disabled,
-    "aria-label": readOnly ? (children == null ? void 0 : children.toString()) + ". " + (readOnlyLabelDescription != null ? readOnlyLabelDescription : 'Kan ikke endres') : undefined
-  }, rest)), React__default.createElement("span", {
-    className: classList
-  }, React__default.createElement("span", {
-    className: "eds-form-component--radio__circle"
-  })), children && React__default.createElement(Paragraph, {
-    margin: "none",
-    as: "span",
-    className: "eds-form-component--radio__label"
-  }, children));
-});
-
-var _excluded$a = ["className", "children", "value", "title", "secondaryLabel", "size", "hideSelectionIndicator", "style", "id", "disabled", "type", "onChange", "checked", "name"];
-var InputPanelBase = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var _ref2, _inputRef$current, _ref3, _inputRef$current2;
-  var className = _ref.className,
-    children = _ref.children,
-    value = _ref.value,
-    title = _ref.title,
-    secondaryLabel = _ref.secondaryLabel,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'medium' : _ref$size,
-    _ref$hideSelectionInd = _ref.hideSelectionIndicator,
-    hideSelectionIndicator = _ref$hideSelectionInd === void 0 ? false : _ref$hideSelectionInd,
-    style = _ref.style,
-    id = _ref.id,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'radio' : _ref$type,
-    onChange = _ref.onChange,
-    checked = _ref.checked,
-    name = _ref.name,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$a);
-  var classList = classNames(className, 'eds-input-panel__container', "eds-input-panel--" + size);
-  var inputRef = useRef(null);
-  var defaultId = useRandomId('eds-inputpanel');
-  var inputPanelId = id || defaultId;
-  var forceUpdate = useForceUpdate();
-  var handleOnChange = function handleOnChange(e) {
-    if (onChange === undefined) forceUpdate();
-    onChange == null || onChange(e);
-  };
-  return React__default.createElement("label", {
-    className: "eds-input-panel",
-    htmlFor: inputPanelId
-  }, React__default.createElement("input", _extends({
-    type: type,
-    name: name,
-    ref: mergeRefs(ref, inputRef),
-    value: value,
-    checked: checked,
-    onChange: handleOnChange,
-    id: inputPanelId,
-    disabled: disabled
-  }, rest)), React__default.createElement("div", {
-    className: classList,
-    style: style
-  }, React__default.createElement("div", {
-    className: "eds-input-panel__title-wrapper"
-  }, React__default.createElement("div", {
-    className: "eds-input-panel__title"
-  }, title), React__default.createElement("div", {
-    className: "eds-input-panel__secondary-label-and-icon-wrapper"
-  }, secondaryLabel !== undefined && React__default.createElement(React__default.Fragment, null, secondaryLabel), React__default.createElement("span", {
-    style: {
-      pointerEvents: 'none'
-    }
-  }, !(disabled || hideSelectionIndicator) && (type === 'radio' ? React__default.createElement(Radio, {
-    name: "",
-    value: "",
-    checked: (_ref2 = checked != null ? checked : (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.checked) != null ? _ref2 : false,
-    onChange: function onChange() {
-      return;
-    },
-    "aria-hidden": "true",
-    tabIndex: -1
-  }) : React__default.createElement(Checkbox, {
-    checked: (_ref3 = checked != null ? checked : (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.checked) != null ? _ref3 : false,
-    onChange: function onChange() {
-      return null;
-    },
-    "aria-hidden": "true",
-    tabIndex: -1
-  }))))), children && React__default.createElement("div", {
-    className: "eds-input-panel__additional-content"
-  }, children)));
-});
-
-var _excluded$9 = ["className", "children", "value", "title", "secondaryLabel", "size", "hideRadioButton", "style", "id", "disabled"];
-var RadioPanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var className = _ref.className,
-    children = _ref.children,
-    value = _ref.value,
-    title = _ref.title,
-    secondaryLabel = _ref.secondaryLabel,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'medium' : _ref$size,
-    _ref$hideRadioButton = _ref.hideRadioButton,
-    hideRadioButton = _ref$hideRadioButton === void 0 ? false : _ref$hideRadioButton,
-    style = _ref.style,
-    id = _ref.id,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$9);
-  var _useRadioGroupContext = useRadioGroupContext(),
-    name = _useRadioGroupContext.name,
-    selected = _useRadioGroupContext.value,
-    onChange = _useRadioGroupContext.onChange;
-  return React__default.createElement(InputPanelBase, _extends({
-    type: "radio",
-    name: name,
-    title: title,
-    value: value,
-    checked: selected === value,
-    onChange: onChange,
-    className: className,
-    secondaryLabel: secondaryLabel,
-    size: size,
-    hideSelectionIndicator: hideRadioButton,
-    style: style,
-    id: id,
-    disabled: disabled
-  }, rest, {
-    ref: ref
-  }), children);
-});
-
-var _excluded$8 = ["name", "checked", "onChange", "className", "children", "value", "title", "secondaryLabel", "size", "hideCheckbox", "style", "id", "disabled"];
-var CheckboxPanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var name = _ref.name,
-    checked = _ref.checked,
-    onChange = _ref.onChange,
-    className = _ref.className,
-    children = _ref.children,
-    value = _ref.value,
-    title = _ref.title,
-    secondaryLabel = _ref.secondaryLabel,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'medium' : _ref$size,
-    _ref$hideCheckbox = _ref.hideCheckbox,
-    hideCheckbox = _ref$hideCheckbox === void 0 ? false : _ref$hideCheckbox,
-    style = _ref.style,
-    id = _ref.id,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
-  return React__default.createElement(InputPanelBase, _extends({
-    type: "checkbox",
-    name: name,
-    title: title,
-    value: value,
-    checked: checked,
-    onChange: onChange,
-    className: className,
-    secondaryLabel: secondaryLabel,
-    size: size,
-    hideSelectionIndicator: hideCheckbox,
-    style: style,
-    id: id,
-    disabled: disabled
-  }, rest, {
-    ref: ref
-  }), children);
-});
-
-var _excluded$7 = ["name", "value", "children", "onChange", "label", "readOnly"];
-var RadioGroup = function RadioGroup(_ref) {
-  var name = _ref.name,
-    value = _ref.value,
-    children = _ref.children,
-    onChange = _ref.onChange,
-    label = _ref.label,
-    _ref$readOnly = _ref.readOnly,
-    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
-  var contextValue = React__default.useMemo(function () {
-    return {
-      name: name,
-      value: value,
-      onChange: onChange,
-      readOnly: readOnly
-    };
-  }, [name, value, onChange, readOnly]);
-  return React__default.createElement(RadioGroupContextProvider, {
-    value: contextValue
-  }, label ? React__default.createElement(Fieldset, _extends({
-    label: label
-  }, rest), children) : children);
+    );
+  }
+);
+const RadioGroup = ({
+  name,
+  value,
+  children,
+  onChange,
+  label,
+  readOnly = false,
+  ...rest
+}) => {
+  const contextValue = React__default.useMemo(
+    () => ({ name, value, onChange, readOnly }),
+    [name, value, onChange, readOnly]
+  );
+  return /* @__PURE__ */ jsx(RadioGroupContextProvider, { value: contextValue, children: label ? /* @__PURE__ */ jsx(Fieldset, { label, ...rest, children }) : children });
 };
-
-var _excluded$6 = ["className", "children", "labelPlacement", "icon", "hideIcon", "color", "contrastColor", "size", "checked"];
-var Switch = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var className = _ref.className,
-    children = _ref.children,
-    _ref$labelPlacement = _ref.labelPlacement,
-    labelPlacement = _ref$labelPlacement === void 0 ? 'right' : _ref$labelPlacement,
-    icon = _ref.icon,
-    _ref$hideIcon = _ref.hideIcon,
-    hideIcon = _ref$hideIcon === void 0 ? false : _ref$hideIcon,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? colors.validation.mint : _ref$color,
-    _ref$contrastColor = _ref.contrastColor,
-    contrastColor = _ref$contrastColor === void 0 ? colors.validation.mintContrast : _ref$contrastColor,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'medium' : _ref$size,
-    checked = _ref.checked,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
-  var displayedIcon = function displayedIcon() {
-    if (icon) return icon;
-    if (checked === undefined) return React__default.createElement(React__default.Fragment, null);
-    var iconSize = size === 'large' ? 23 : undefined;
-    return checked ? React__default.createElement(CheckIcon, {
-      size: iconSize
-    }) : React__default.createElement(CloseSmallIcon, {
-      size: iconSize
-    });
-  };
-  return React__default.createElement("label", {
-    className: classNames('eds-switch', "eds-switch--" + labelPlacement, className),
-    style: _extends({}, rest.style)
-  }, React__default.createElement("input", _extends({
-    type: "checkbox",
-    ref: ref,
-    checked: checked
-  }, rest)), React__default.createElement("span", {
-    className: classNames('eds-switch__switch', "eds-switch__switch--" + size),
-    style: {
-      '--eds-switch-color': color,
-      '--eds-switch-contrast-color': contrastColor
-    },
-    "aria-hidden": "true"
-  }, React__default.createElement("span", {
-    className: "eds-switch__circle"
-  }, !hideIcon && displayedIcon())), children && React__default.createElement("span", {
-    className: classNames('eds-switch__label', "eds-switch__label--" + size + "--" + labelPlacement)
-  }, children));
-});
-
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types -- disabled during Yarn upgrade
+const Switch = React__default.forwardRef(
+  ({
+    className,
+    children,
+    labelPlacement = "right",
+    icon,
+    hideIcon = false,
+    color = colors.validation.mint,
+    contrastColor = colors.validation.mintContrast,
+    size = "medium",
+    checked,
+    ...rest
+  }, ref) => {
+    const displayedIcon = () => {
+      if (icon) return icon;
+      if (checked === void 0) return /* @__PURE__ */ jsx(Fragment, {});
+      const iconSize = size === "large" ? 23 : void 0;
+      return checked ? /* @__PURE__ */ jsx(CheckIcon, { size: iconSize }) : /* @__PURE__ */ jsx(CloseSmallIcon, { size: iconSize });
+    };
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: classNames(
+          "eds-switch",
+          `eds-switch--${labelPlacement}`,
+          className
+        ),
+        style: { ...rest.style },
+        children: [
+          /* @__PURE__ */ jsx("input", { type: "checkbox", ref, checked, ...rest }),
+          /* @__PURE__ */ 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__ */ jsx("span", { className: "eds-switch__circle", children: !hideIcon && displayedIcon() })
+            }
+          ),
+          children && /* @__PURE__ */ 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);
 }
-// Determine if field is empty or filled.
-// Response determines if label is presented above field or as placeholder.
-//
-// @param obj
-// @param SSR
-// @returns {boolean} False when not present or empty string.
-//                    True when any number or string with length.
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types -- disabled during Yarn upgrade
-function isFilled(obj, SSR) {
-  if (SSR === void 0) {
-    SSR = false;
-  }
-  return obj && (hasValue(obj.value) && obj.value !== '' || SSR && hasValue(obj.defaultValue) && obj.defaultValue !== '');
+function isFilled(obj, SSR = false) {
+  return obj && (hasValue(obj.value) && obj.value !== "" || SSR && hasValue(obj.defaultValue) && obj.defaultValue !== "");
 }
-
-var _excluded$5 = ["variant", "disabled", "readOnly", "className", "style", "label", "feedback", "labelTooltip", "labelTooltipButtonAriaLabel", "labelTooltipPlacement", "onChange", "disableLabelAnimation"],
-  _excluded2$1 = ["readOnly", "disabled", "onChange", "value", "variant"];
-var TextArea = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var variant = _ref.variant,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$readOnly = _ref.readOnly,
-    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-    className = _ref.className,
-    style = _ref.style,
-    label = _ref.label,
-    feedback = _ref.feedback,
-    labelTooltip = _ref.labelTooltip,
-    labelTooltipButtonAriaLabel = _ref.labelTooltipButtonAriaLabel,
-    labelTooltipPlacement = _ref.labelTooltipPlacement,
-    onChange = _ref.onChange,
-    disableLabelAnimation = _ref.disableLabelAnimation,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
-  var textAreaId = useRandomId('eds-textarea');
-  var textareaRef = React__default.useRef(null);
-  return React__default.createElement(BaseFormControl, {
-    className: classNames(className, 'eds-textarea__wrapper'),
-    disabled: disabled,
-    readOnly: readOnly,
-    variant: variant,
-    style: style,
-    label: label,
-    labelId: textAreaId,
-    feedback: feedback,
-    labelTooltip: labelTooltip,
-    labelTooltipButtonAriaLabel: labelTooltipButtonAriaLabel,
-    labelTooltipPlacement: labelTooltipPlacement,
-    labelProps: {
-      className: 'eds-textarea__label'
-    },
-    disableLabelAnimation: disableLabelAnimation,
-    onClick: function onClick(e) {
-      var _textareaRef$current;
-      if (e.target === e.currentTarget) textareaRef == null || (_textareaRef$current = textareaRef.current) == null || _textareaRef$current.focus();
-    }
-  }, React__default.createElement(TextAreaBase, _extends({
-    readOnly: readOnly,
-    disabled: disabled,
-    ref: mergeRefs(ref, textareaRef),
-    "aria-labelledby": textAreaId,
-    onChange: onChange,
-    variant: variant
-  }, rest)));
-});
-var TextAreaBase = /*#__PURE__*/React__default.forwardRef(function (_ref2, ref) {
-  var readOnly = _ref2.readOnly,
-    disabled = _ref2.disabled,
-    onChange = _ref2.onChange,
-    value = _ref2.value,
-    variant = _ref2.variant,
-    rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
-  var contextVariant = useVariant();
-  var currentVariant = variant || contextVariant;
-  var _useInputGroupContext = useInputGroupContext(),
-    isInputFilled = _useInputGroupContext.isFilled,
-    setFiller = _useInputGroupContext.setFilled;
-  useOnMount(function () {
-    if (value != null && value.toString() || rest.defaultValue) {
-      setFiller && !isInputFilled && setFiller(true);
-    }
-  });
-  React__default.useEffect(function () {
-    if (value != null && value.toString() && setFiller && !isInputFilled) {
-      setFiller(true);
-    }
-  }, [value, setFiller, isInputFilled]);
-  var handleChange = function handleChange(event) {
-    if (isFilled(event.target)) {
-      setFiller && !isInputFilled && setFiller(true);
-    } else {
-      setFiller && isInputFilled && setFiller(false);
-    }
-    if (onChange) {
-      onChange(event);
-    }
-  };
-  return React__default.createElement("textarea", _extends({
-    className: "eds-form-control eds-textarea",
-    ref: ref,
-    readOnly: readOnly,
-    disabled: disabled,
-    onChange: handleChange,
-    value: value,
-    "aria-invalid": currentVariant === 'error'
-  }, rest));
-});
-
-var _excluded$4 = ["prepend", "append", "variant", "disabled", "readOnly", "className", "style", "size", "label", "required", "labelTooltip", "labelTooltipButtonAriaLabel", "labelTooltipPlacement", "feedback", "onChange", "disableLabelAnimation", "labelProps", "clearable", "onClear", "value", "ariaAlertOnFeedback"],
-  _excluded2 = ["disabled", "readOnly", "placeholder", "onChange", "value", "variant"],
-  _excluded3 = ["onClear"];
-var TextField = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var prepend = _ref.prepend,
-    append = _ref.append,
-    variant = _ref.variant,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$readOnly = _ref.readOnly,
-    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-    className = _ref.className,
-    style = _ref.style,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'medium' : _ref$size,
-    label = _ref.label,
-    required = _ref.required,
-    labelTooltip = _ref.labelTooltip,
-    labelTooltipButtonAriaLabel = _ref.labelTooltipButtonAriaLabel,
-    labelTooltipPlacement = _ref.labelTooltipPlacement,
-    feedback = _ref.feedback,
-    onChange = _ref.onChange,
-    disableLabelAnimation = _ref.disableLabelAnimation,
-    labelProps = _ref.labelProps,
-    _ref$clearable = _ref.clearable,
-    clearable = _ref$clearable === void 0 ? false : _ref$clearable,
-    onClear = _ref.onClear,
-    value = _ref.value,
-    _ref$ariaAlertOnFeedb = _ref.ariaAlertOnFeedback,
-    ariaAlertOnFeedback = _ref$ariaAlertOnFeedb === void 0 ? false : _ref$ariaAlertOnFeedb,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
-  var randomId = useRandomId('eds-textfield');
-  var textFieldId = labelProps && labelProps.id ? labelProps.id : randomId;
-  var textFieldRef = React__default.useRef(null);
-  return React__default.createElement(BaseFormControl, {
-    disabled: disabled,
-    readOnly: readOnly,
-    variant: variant,
-    prepend: prepend,
-    append: clearable && onClear ? React__default.createElement(ClearButton, {
-      onClear: onClear
-    }) : append,
-    className: classNames(className, 'eds-textfield__wrapper'),
-    style: style,
-    size: size,
-    label: label,
-    required: required,
-    labelTooltip: labelTooltip,
-    labelTooltipButtonAriaLabel: labelTooltipButtonAriaLabel,
-    labelTooltipPlacement: labelTooltipPlacement,
-    labelId: textFieldId,
-    feedback: feedback,
-    disableLabelAnimation: disableLabelAnimation,
-    labelProps: labelProps,
-    ariaAlertOnFeedback: ariaAlertOnFeedback,
-    onClick: function onClick(e) {
-      var _textFieldRef$current;
-      if (e.target === e.currentTarget) textFieldRef == null || (_textFieldRef$current = textFieldRef.current) == null || _textFieldRef$current.focus();
-    }
-  }, React__default.createElement(TextFieldBase, _extends({
-    disabled: disabled,
-    readOnly: readOnly,
-    ref: mergeRefs(ref, textFieldRef),
-    "aria-labelledby": textFieldId,
-    onChange: onChange,
-    value: value,
-    variant: variant
-  }, rest)));
-});
-var TextFieldBase = /*#__PURE__*/React__default.forwardRef(function (_ref2, forwardRef) {
-  var disabled = _ref2.disabled,
-    readOnly = _ref2.readOnly,
-    placeholder = _ref2.placeholder,
-    onChange = _ref2.onChange,
-    value = _ref2.value,
-    variant = _ref2.variant,
-    rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
-  var contextVariant = useVariant();
-  var currentVariant = variant || contextVariant;
-  var _useInputGroupContext = useInputGroupContext(),
-    isInputFilled = _useInputGroupContext.isFilled,
-    setFiller = _useInputGroupContext.setFilled;
-  useOnMount(function () {
-    if (value != null && value.toString() || rest.defaultValue) {
-      setFiller && !isInputFilled && setFiller(true);
-    }
-  });
-  React__default.useEffect(function () {
-    if (value != null && value.toString() && setFiller && !isInputFilled) {
-      setFiller(true);
-    }
-  }, [value, setFiller, isInputFilled]);
-  var handleChange = function handleChange(event) {
-    if (isFilled(event.target)) {
-      setFiller && !isInputFilled && setFiller(true);
-    } else {
-      setFiller && isInputFilled && setFiller(false);
-    }
-    if (onChange) {
-      onChange(event);
-    }
-  };
-  return React__default.createElement("input", _extends({
-    "aria-invalid": currentVariant === 'error',
-    className: "eds-form-control",
-    disabled: disabled,
-    readOnly: readOnly,
-    ref: forwardRef,
-    placeholder: placeholder,
-    onChange: handleChange,
-    value: value
-  }, rest));
-});
-var ClearButton = function ClearButton(_ref3) {
-  var onClear = _ref3.onClear,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
-  var _useInputGroupContext2 = useInputGroupContext(),
-    hasValue = _useInputGroupContext2.isFilled,
-    setFilled = _useInputGroupContext2.setFilled;
-  return React__default.createElement("div", {
-    className: "eds-textfield__clear-button-wrapper"
-  }, hasValue && React__default.createElement("div", {
-    className: "eds-textfield__divider"
-  }), hasValue && React__default.createElement("button", _extends({
-    className: "eds-textfield__clear-button",
-    type: "button",
-    tabIndex: -1,
-    onClick: function onClick() {
-      setFilled(false);
-      onClear();
-    }
-  }, props), React__default.createElement(CloseSmallIcon, null)));
+const TextArea = React__default.forwardRef(
+  ({
+    variant,
+    disabled = false,
+    readOnly = false,
+    className,
+    style,
+    label,
+    feedback,
+    labelTooltip,
+    labelTooltipButtonAriaLabel,
+    labelTooltipPlacement,
+    onChange,
+    disableLabelAnimation,
+    ...rest
+  }, ref) => {
+    const textAreaId = useRandomId("eds-textarea");
+    const textareaRef = React__default.useRef(null);
+    return /* @__PURE__ */ 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__ */ jsx(
+          TextAreaBase,
+          {
+            readOnly,
+            disabled,
+            ref: mergeRefs(ref, textareaRef),
+            "aria-labelledby": textAreaId,
+            onChange,
+            variant,
+            ...rest
+          }
+        )
+      }
+    );
+  }
+);
+const TextAreaBase = React__default.forwardRef(
+  ({ readOnly, disabled, onChange, value, variant, ...rest }, ref) => {
+    const contextVariant = useVariant();
+    const currentVariant = variant || contextVariant;
+    const { isFilled: isInputFilled, setFilled: setFiller } = useInputGroupContext();
+    useOnMount(() => {
+      if (value?.toString() || rest.defaultValue) {
+        setFiller && !isInputFilled && setFiller(true);
+      }
+    });
+    React__default.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__ */ jsx(
+      "textarea",
+      {
+        className: "eds-form-control eds-textarea",
+        ref,
+        readOnly,
+        disabled,
+        onChange: handleChange,
+        value,
+        "aria-invalid": currentVariant === "error",
+        ...rest
+      }
+    );
+  }
+);
+const TextField = React__default.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 = useRandomId("eds-textfield");
+    const textFieldId = labelProps && labelProps.id ? labelProps.id : randomId;
+    const textFieldRef = React__default.useRef(null);
+    return /* @__PURE__ */ jsx(
+      BaseFormControl,
+      {
+        disabled,
+        readOnly,
+        variant,
+        prepend,
+        append: clearable && onClear ? /* @__PURE__ */ 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__ */ jsx(
+          TextFieldBase,
+          {
+            disabled,
+            readOnly,
+            ref: mergeRefs(ref, textFieldRef),
+            "aria-labelledby": textFieldId,
+            onChange,
+            value,
+            variant,
+            ...rest
+          }
+        )
+      }
+    );
+  }
+);
+const TextFieldBase = React__default.forwardRef(
+  ({ disabled, readOnly, placeholder, onChange, value, variant, ...rest }, forwardRef) => {
+    const contextVariant = useVariant();
+    const currentVariant = variant || contextVariant;
+    const { isFilled: isInputFilled, setFilled: setFiller } = useInputGroupContext();
+    useOnMount(() => {
+      if (value?.toString() || rest.defaultValue) {
+        setFiller && !isInputFilled && setFiller(true);
+      }
+    });
+    React__default.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__ */ 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__ */ jsxs("div", { className: "eds-textfield__clear-button-wrapper", children: [
+    hasValue2 && /* @__PURE__ */ jsx("div", { className: "eds-textfield__divider" }),
+    hasValue2 && /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "eds-textfield__clear-button",
+        type: "button",
+        tabIndex: -1,
+        onClick: () => {
+          setFilled(false);
+          onClear();
+        },
+        ...props,
+        children: /* @__PURE__ */ jsx(CloseSmallIcon, {})
+      }
+    )
+  ] });
 };
-
-var _excluded$3 = ["name", "onChange", "selectedValue", "multiple", "size"];
-var SegmentedContext = /*#__PURE__*/React__default.createContext(null);
-var SegmentedProvider = function SegmentedProvider(_ref) {
-  var name = _ref.name,
-    _ref$onChange = _ref.onChange,
-    onChange = _ref$onChange === void 0 ? function () {
-      return undefined;
-    } : _ref$onChange,
-    selectedValue = _ref.selectedValue,
-    multiple = _ref.multiple,
-    size = _ref.size,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
-  var generatedName = useRandomId('eds-segmented-control');
-  var contextValue = React__default.useMemo(function () {
-    return {
+const SegmentedContext = React__default.createContext(
+  null
+);
+const SegmentedProvider = ({
+  name,
+  onChange = () => void 0,
+  selectedValue,
+  multiple,
+  size,
+  ...rest
+}) => {
+  const generatedName = useRandomId("eds-segmented-control");
+  const contextValue = React__default.useMemo(
+    () => ({
       name: name || generatedName,
-      onChange: onChange,
-      multiple: multiple,
-      selectedValue: selectedValue,
-      size: size
-    };
-  }, [generatedName, multiple, name, onChange, selectedValue, size]);
-  return React__default.createElement(SegmentedContext.Provider, _extends({
-    value: contextValue
-  }, rest));
+      onChange,
+      multiple,
+      selectedValue,
+      size
+    }),
+    [generatedName, multiple, name, onChange, selectedValue, size]
+  );
+  return /* @__PURE__ */ jsx(SegmentedContext.Provider, { value: contextValue, ...rest });
 };
-var useSegmentedContext = function useSegmentedContext() {
-  var context = React__default.useContext(SegmentedContext);
+const useSegmentedContext = () => {
+  const context = React__default.useContext(SegmentedContext);
   if (!context) {
-    throw new Error('You need to wrap your SegmentedChoice in either SegmentedControl or MultipleSegmentedControl');
+    throw new Error(
+      "You need to wrap your SegmentedChoice in either SegmentedControl or MultipleSegmentedControl"
+    );
   }
   return context;
 };
-
-var _excluded$2 = ["children", "className", "style", "value", "name", "onChange"];
-var SegmentedChoice = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    style = _ref.style,
-    value = _ref.value,
-    name = _ref.name,
-    _ref$onChange = _ref.onChange,
-    onChange = _ref$onChange === void 0 ? function () {
-      return undefined;
-    } : _ref$onChange,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
-  var _useSegmentedContext = useSegmentedContext(),
-    commonName = _useSegmentedContext.name,
-    selectedValue = _useSegmentedContext.selectedValue,
-    commonOnChange = _useSegmentedContext.onChange,
-    multiple = _useSegmentedContext.multiple,
-    size = _useSegmentedContext.size;
-  var isChecked = multiple ? selectedValue[value] : selectedValue === value;
-  var handleChange = function handleChange(e) {
-    onChange(e);
-    if (multiple) {
-      var _extends2;
-      commonOnChange(_extends({}, selectedValue, (_extends2 = {}, _extends2[value] = e.target.checked, _extends2)));
-    } else if (e.target.checked) {
-      commonOnChange(value);
+const SegmentedChoice = React__default.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__ */ jsxs(
+      "label",
+      {
+        className: classNames("eds-segmented-choice", className),
+        style,
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: multiple ? "checkbox" : "radio",
+              name: name || commonName,
+              checked: isChecked,
+              value,
+              onChange: handleChange,
+              ref,
+              ...rest
+            }
+          ),
+          /* @__PURE__ */ 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__ */ jsx(
+    SegmentedProvider,
+    {
+      name,
+      selectedValue,
+      onChange,
+      multiple: false,
+      size,
+      children: /* @__PURE__ */ jsx(Fieldset, { label, children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: classNames("eds-segmented-control", className),
+          ...rest,
+          children
+        }
+      ) })
+    }
+  );
+};
+const MultipleSegmentedControl = ({ children, label, name, onChange, selectedValue, ...rest }) => {
+  return /* @__PURE__ */ jsxs(
+    SegmentedProvider,
+    {
+      name,
+      selectedValue,
+      onChange,
+      multiple: true,
+      size: "medium",
+      children: [
+        /* @__PURE__ */ jsx(Label, { as: "div", children: label }),
+        /* @__PURE__ */ jsx("div", { className: "eds-segmented-control", ...rest, children })
+      ]
     }
-  };
-  return React__default.createElement("label", {
-    className: classNames('eds-segmented-choice', className),
-    style: style
-  }, React__default.createElement("input", _extends({
-    type: multiple ? 'checkbox' : 'radio',
-    name: name || commonName,
-    checked: isChecked,
-    value: value,
-    onChange: handleChange,
-    ref: ref
-  }, rest)), React__default.createElement("div", {
-    className: classNames('eds-base-segmented', {
-      'eds-base-segmented--large': size === 'large'
-    })
-  }, children));
-});
-
-var _excluded$1 = ["children", "label", "name", "onChange", "selectedValue", "size", "className"];
-var SegmentedControl = function SegmentedControl(_ref) {
-  var children = _ref.children,
-    label = _ref.label,
-    name = _ref.name,
-    onChange = _ref.onChange,
-    selectedValue = _ref.selectedValue,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'medium' : _ref$size,
-    className = _ref.className,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-  return React__default.createElement(SegmentedProvider, {
-    name: name,
-    selectedValue: selectedValue,
-    onChange: onChange,
-    multiple: false,
-    size: size
-  }, React__default.createElement(Fieldset, {
-    label: label
-  }, React__default.createElement("div", _extends({
-    className: classNames('eds-segmented-control', className)
-  }, rest), children)));
+  );
 };
-
-var _excluded = ["children", "label", "name", "onChange", "selectedValue"];
-/**This component is not used by anyone, and is therefore deprecated
- * @deprecated
- */
-var MultipleSegmentedControl = function MultipleSegmentedControl(_ref) {
-  var children = _ref.children,
-    label = _ref.label,
-    name = _ref.name,
-    onChange = _ref.onChange,
-    selectedValue = _ref.selectedValue,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return React__default.createElement(SegmentedProvider, {
-    name: name,
-    selectedValue: selectedValue,
-    onChange: onChange,
-    multiple: true,
-    size: "medium"
-  }, React__default.createElement(Label, {
-    as: "div"
-  }, label), React__default.createElement("div", _extends({
-    className: "eds-segmented-control"
-  }, rest), children));
+warnAboutMissingStyles("form", "icons", "typography");
+export {
+  BaseFormControl,
+  Checkbox,
+  CheckboxPanel,
+  FeedbackText,
+  Fieldset,
+  InputGroupContextProvider,
+  InputGroupLabel,
+  MultipleSegmentedControl,
+  Radio,
+  RadioGroup,
+  RadioPanel,
+  SegmentedChoice,
+  SegmentedControl,
+  Switch,
+  TextArea,
+  TextField,
+  VariantProvider,
+  hasValue,
+  isFilled,
+  useInputGroupContext,
+  useVariant
 };
-
-warnAboutMissingStyles('form', 'icons', 'typography');
-
-export { BaseFormControl, Checkbox, CheckboxPanel, FeedbackText, Fieldset, InputGroupContextProvider, InputGroupLabel, MultipleSegmentedControl, Radio, RadioGroup, RadioPanel, SegmentedChoice, SegmentedControl, Switch, TextArea, TextField, VariantProvider, hasValue, isFilled, useInputGroupContext, useVariant };
 //# sourceMappingURL=form.esm.js.map