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

package/dist/form.esm.js

@@ -1,1038 +1,984 @@
-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 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";
-const info = "info";
-const error$1 = "error";
-const AlertIcon = ({ variant }) => {
-  const iconClass = `eds-feedback-text__icon eds-feedback-text__icon--${variant}`;
+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);
+}
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+
+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;
   switch (variant) {
-    case "success":
-      return /* @__PURE__ */ jsx(
-        ValidationSuccessFilledIcon,
-        {
-          "aria-label": "Suksessmelding",
-          className: iconClass
-        }
-      );
-    case "negative":
-      return /* @__PURE__ */ jsx(
-        ValidationErrorFilledIcon,
-        {
-          "aria-label": "Feilmelding",
-          className: iconClass
-        }
-      );
-    case "information":
+    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':
       return null;
-    case "warning":
-      return /* @__PURE__ */ jsx(
-        ValidationExclamationFilledIcon,
-        {
-          "aria-label": "Varselmelding",
-          className: iconClass
-        }
-      );
+    case 'warning':
+      return React__default.createElement(ValidationExclamationFilledIcon, {
+        "aria-label": "Varselmelding",
+        className: iconClass
+      });
     case error$1:
-      return /* @__PURE__ */ jsx(
-        ValidationErrorFilledIcon,
-        {
-          "aria-label": "Feilmelding",
-          className: iconClass
-        }
-      );
+      return React__default.createElement(ValidationErrorFilledIcon, {
+        "aria-label": "Feilmelding",
+        className: iconClass
+      });
     case info:
       return null;
     default:
       return null;
   }
 };
-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 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 InputGroupContext = React.createContext({
+
+var InputGroupContext = /*#__PURE__*/React.createContext({
   isFilled: false,
-  setFilled: () => null
+  setFilled: function setFilled() {
+    return null;
+  }
 });
-const InputGroupContextProvider = ({ children }) => {
-  const [filled, setFilled] = React.useState(false);
-  return /* @__PURE__ */ jsx(
-    InputGroupContext.Provider,
-    {
-      value: { isFilled: filled, setFilled },
-      children
+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
     }
-  );
+  }, children);
 };
-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 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 VariantContext = React__default.createContext(null);
-const VariantProvider = ({
-  children,
-  variant = null
-}) => {
-  return /* @__PURE__ */ jsx(VariantContext.Provider, { value: variant, 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 useVariant = () => {
-  const context = React__default.useContext(VariantContext);
+var useVariant = function useVariant() {
+  var context = React__default.useContext(VariantContext);
   return context;
 };
-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
-        ]
-      }
-    ) });
-  }
-);
-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 _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();
+      }
+    },
+    "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"
+  }));
 };
-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);
+
+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);
+};
+
+var RadioGroupContext = /*#__PURE__*/React__default.createContext(null);
+var RadioGroupContextProvider = RadioGroupContext.Provider;
+var useRadioGroupContext = function useRadioGroupContext() {
+  var 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;
 };
-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
+
+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 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
+      (_ref2 = (_rest$onChange = rest.onChange) != null ? _rest$onChange : _onChange) == null || _ref2(e);
+    },
+    onClick: function onClick(e) {
+      if (readOnly) {
+        e.preventDefault();
       }
-    );
-  }
-);
-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 });
-};
-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 });
+    },
+    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
     };
-    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
-            }
-          )
-        ]
-      }
-    );
-  }
-);
+  }, [name, value, onChange, readOnly]);
+  return React__default.createElement(RadioGroupContextProvider, {
+    value: contextValue
+  }, label ? React__default.createElement(Fieldset, _extends({
+    label: 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
 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__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
-          }
-        )
-      }
-    );
+// 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;
   }
-);
-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, {})
-      }
-    )
-  ] });
+  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 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(
-    () => ({
+
+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 {
       name: name || generatedName,
-      onChange,
-      multiple,
-      selectedValue,
-      size
-    }),
-    [generatedName, multiple, name, onChange, selectedValue, size]
-  );
-  return /* @__PURE__ */ jsx(SegmentedContext.Provider, { value: contextValue, ...rest });
+      onChange: onChange,
+      multiple: multiple,
+      selectedValue: selectedValue,
+      size: size
+    };
+  }, [generatedName, multiple, name, onChange, selectedValue, size]);
+  return React__default.createElement(SegmentedContext.Provider, _extends({
+    value: contextValue
+  }, rest));
 };
-const useSegmentedContext = () => {
-  const context = React__default.useContext(SegmentedContext);
+var useSegmentedContext = function useSegmentedContext() {
+  var 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;
 };
-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 })
-      ]
+
+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);
     }
-  );
+  };
+  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)));
 };
-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
+
+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 };
 //# sourceMappingURL=form.esm.js.map