@entur/dropdown 7.3.2-beta.9 → 7.3.2

package/dist/dropdown.esm.js

@@ -1,678 +1,382 @@
-import { useDebounce, mergeRefs, useRandomId, warnAboutMissingStyles } from '@entur/utils';
-import React, { forwardRef, useState, useRef, useEffect, useCallback } from 'react';
-import { useCombobox, useMultipleSelection, useSelect } from 'downshift';
-import classNames from 'classnames';
-import { useFloating, offset, shift, size, flip, autoUpdate } from '@floating-ui/react-dom';
-import { Checkbox, BaseFormControl } from '@entur/form';
-import { space } from '@entur/tokens';
-import { VisuallyHidden } from '@entur/a11y';
-import { IconButton } from '@entur/button';
-import { TagChip } from '@entur/chip';
-import { DownArrowIcon, CloseSmallIcon } from '@entur/icons';
-import { LoadingDots } from '@entur/loader';
-import { Tooltip } from '@entur/tooltip';
-
-function _OverloadYield(e, d) {
-  this.v = e, this.k = d;
-}
-function asyncGeneratorStep(n, t, e, r, o, a, c) {
-  try {
-    var i = n[a](c),
-      u = i.value;
-  } catch (n) {
-    return void e(n);
-  }
-  i.done ? t(u) : Promise.resolve(u).then(r, o);
-}
-function _asyncToGenerator(n) {
-  return function () {
-    var t = this,
-      e = arguments;
-    return new Promise(function (r, o) {
-      var a = n.apply(t, e);
-      function _next(n) {
-        asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
-      }
-      function _throw(n) {
-        asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
-      }
-      _next(void 0);
-    });
-  };
-}
-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;
-}
-function _regenerator() {
-  /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
-  var e,
-    t,
-    r = "function" == typeof Symbol ? Symbol : {},
-    n = r.iterator || "@@iterator",
-    o = r.toStringTag || "@@toStringTag";
-  function i(r, n, o, i) {
-    var c = n && n.prototype instanceof Generator ? n : Generator,
-      u = Object.create(c.prototype);
-    return _regeneratorDefine(u, "_invoke", function (r, n, o) {
-      var i,
-        c,
-        u,
-        f = 0,
-        p = o || [],
-        y = !1,
-        G = {
-          p: 0,
-          n: 0,
-          v: e,
-          a: d,
-          f: d.bind(e, 4),
-          d: function (t, r) {
-            return i = t, c = 0, u = e, G.n = r, a;
-          }
+import { useDebounce, mergeRefs, useRandomId, warnAboutMissingStyles } from "@entur/utils";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React, { forwardRef, createElement, useState, useRef, useEffect, useCallback } from "react";
+import { useCombobox, useMultipleSelection, useSelect } from "downshift";
+import classNames from "classnames";
+import { useFloating, offset, shift, size, flip, autoUpdate } from "@floating-ui/react-dom";
+import { Checkbox, BaseFormControl } from "@entur/form";
+import { space } from "@entur/tokens";
+import { VisuallyHidden } from "@entur/a11y";
+import { IconButton } from "@entur/button";
+import { TagChip } from "@entur/chip";
+import { DownArrowIcon, CloseSmallIcon } from "@entur/icons";
+import { LoadingDots } from "@entur/loader";
+import { Tooltip } from "@entur/tooltip";
+const DropdownList = ({
+  ariaLabelChosenSingular = "valgt",
+  ariaLabelSelectedItem = ", valgt element, trykk for å fjerne",
+  getItemProps,
+  getMenuProps,
+  isOpen,
+  highlightedIndex,
+  listItems,
+  floatingStyles,
+  setListRef,
+  loading = false,
+  loadingText = "Laster inn …",
+  noMatchesText = "Ingen treff for søket",
+  selectAllCheckboxState,
+  selectAllItem,
+  selectedItems,
+  readOnly = false,
+  ...rest
+}) => {
+  const isMultiselect = selectAllItem !== void 0;
+  const isNoMatches = !loading && (listItems.length === 0 || listItems?.length === 1 && listItems?.[0]?.value === selectAllItem?.value);
+  const isItemSelected = (item) => selectedItems.some(
+    (selectedItem) => selectedItem?.value === item?.value && selectedItem?.label === item?.label
+  );
+  const ariaValuesSelectAll = () => {
+    switch (selectAllCheckboxState?.()) {
+      case "indeterminate": {
+        return {
+          label: `${selectAllItem?.label}, delvis valgt`,
+          selected: false
         };
-      function d(r, n) {
-        for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) {
-          var o,
-            i = p[t],
-            d = G.p,
-            l = i[2];
-          r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0));
-        }
-        if (o || r > 1) return a;
-        throw y = !0, n;
       }
-      return function (o, p, l) {
-        if (f > 1) throw TypeError("Generator is already running");
-        for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) {
-          i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u);
-          try {
-            if (f = 2, i) {
-              if (c || (o = "next"), t = i[o]) {
-                if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object");
-                if (!t.done) return t;
-                u = t.value, c < 2 && (c = 0);
-              } else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1);
-              i = e;
-            } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break;
-          } catch (t) {
-            i = e, c = 1, u = t;
-          } finally {
-            f = 1;
-          }
-        }
+      case true: {
         return {
-          value: t,
-          done: y
+          label: `${selectAllItem?.label}, ${ariaLabelChosenSingular}`,
+          selected: true
         };
-      };
-    }(r, o, i), !0), u;
-  }
-  var a = {};
-  function Generator() {}
-  function GeneratorFunction() {}
-  function GeneratorFunctionPrototype() {}
-  t = Object.getPrototypeOf;
-  var c = [][n] ? t(t([][n]())) : (_regeneratorDefine(t = {}, n, function () {
-      return this;
-    }), t),
-    u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c);
-  function f(e) {
-    return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e;
-  }
-  return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine(u), _regeneratorDefine(u, o, "Generator"), _regeneratorDefine(u, n, function () {
-    return this;
-  }), _regeneratorDefine(u, "toString", function () {
-    return "[object Generator]";
-  }), (_regenerator = function () {
-    return {
-      w: i,
-      m: f
-    };
-  })();
-}
-function _regeneratorAsync(n, e, r, t, o) {
-  var a = _regeneratorAsyncGen(n, e, r, t, o);
-  return a.next().then(function (n) {
-    return n.done ? n.value : a.next();
-  });
-}
-function _regeneratorAsyncGen(r, e, t, o, n) {
-  return new _regeneratorAsyncIterator(_regenerator().w(r, e, t, o), n || Promise);
-}
-function _regeneratorAsyncIterator(t, e) {
-  function n(r, o, i, f) {
-    try {
-      var c = t[r](o),
-        u = c.value;
-      return u instanceof _OverloadYield ? e.resolve(u.v).then(function (t) {
-        n("next", t, i, f);
-      }, function (t) {
-        n("throw", t, i, f);
-      }) : e.resolve(u).then(function (t) {
-        c.value = t, i(c);
-      }, function (t) {
-        return n("throw", t, i, f);
-      });
-    } catch (t) {
-      f(t);
-    }
-  }
-  var r;
-  this.next || (_regeneratorDefine(_regeneratorAsyncIterator.prototype), _regeneratorDefine(_regeneratorAsyncIterator.prototype, "function" == typeof Symbol && Symbol.asyncIterator || "@asyncIterator", function () {
-    return this;
-  })), _regeneratorDefine(this, "_invoke", function (t, o, i) {
-    function f() {
-      return new e(function (e, r) {
-        n(t, i, e, r);
-      });
-    }
-    return r = r ? r.then(f, f) : f();
-  }, !0);
-}
-function _regeneratorDefine(e, r, n, t) {
-  var i = Object.defineProperty;
-  try {
-    i({}, "", {});
-  } catch (e) {
-    i = 0;
-  }
-  _regeneratorDefine = function (e, r, n, t) {
-    function o(r, n) {
-      _regeneratorDefine(e, r, function (e) {
-        return this._invoke(r, n, e);
-      });
+      }
+      default: {
+        return { label: `${selectAllItem?.label}`, selected: false };
+      }
     }
-    r ? i ? i(e, r, {
-      value: n,
-      enumerable: !t,
-      configurable: !t,
-      writable: !t
-    }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2));
-  }, _regeneratorDefine(e, r, n, t);
-}
-function _regeneratorKeys(e) {
-  var n = Object(e),
-    r = [];
-  for (var t in n) r.unshift(t);
-  return function e() {
-    for (; r.length;) if ((t = r.pop()) in n) return e.value = t, e.done = !1, e;
-    return e.done = !0, e;
   };
-}
-function _regeneratorValues(e) {
-  if (null != e) {
-    var t = e["function" == typeof Symbol && Symbol.iterator || "@@iterator"],
-      r = 0;
-    if (t) return t.call(e);
-    if ("function" == typeof e.next) return e;
-    if (!isNaN(e.length)) return {
-      next: function () {
-        return e && r >= e.length && (e = void 0), {
-          value: e && e[r++],
-          done: !e
-        };
+  const selectAllListItemContent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        "aria-hidden": "true",
+        checked: selectAllCheckboxState?.(),
+        className: "eds-dropdown__list__item__checkbox",
+        tabIndex: -1,
+        onChange: () => void 0
       }
-    };
-  }
-  throw new TypeError(typeof e + " is not iterable");
-}
-function _regeneratorRuntime() {
-
-  var r = _regenerator(),
-    e = r.m(_regeneratorRuntime),
-    t = (Object.getPrototypeOf ? Object.getPrototypeOf(e) : e.__proto__).constructor;
-  function n(r) {
-    var e = "function" == typeof r && r.constructor;
-    return !!e && (e === t || "GeneratorFunction" === (e.displayName || e.name));
-  }
-  var o = {
-    throw: 1,
-    return: 2,
-    break: 3,
-    continue: 3
-  };
-  function a(r) {
-    var e, t;
-    return function (n) {
-      e || (e = {
-        stop: function () {
-          return t(n.a, 2);
-        },
-        catch: function () {
-          return n.v;
-        },
-        abrupt: function (r, e) {
-          return t(n.a, o[r], e);
-        },
-        delegateYield: function (r, o, a) {
-          return e.resultName = o, t(n.d, _regeneratorValues(r), a);
-        },
-        finish: function (r) {
-          return t(n.f, r);
-        }
-      }, t = function (r, t, o) {
-        n.p = e.prev, n.n = e.next;
-        try {
-          return r(t, o);
-        } finally {
-          e.next = n.n;
-        }
-      }), e.resultName && (e[e.resultName] = n.v, e.resultName = void 0), e.sent = n.v, e.next = n.n;
-      try {
-        return r.call(this, e);
-      } finally {
-        n.p = e.prev, n.n = e.next;
+    ),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "eds-dropdown__list__item__text",
+        "aria-label": ariaValuesSelectAll().label,
+        children: selectAllItem?.label
       }
-    };
-  }
-  return (_regeneratorRuntime = function () {
-    return {
-      wrap: function (e, t, n, o) {
-        return r.w(a(e), t, n, o && o.reverse());
-      },
-      isGeneratorFunction: n,
-      mark: r.m,
-      awrap: function (r, e) {
-        return new _OverloadYield(r, e);
-      },
-      AsyncIterator: _regeneratorAsyncIterator,
-      async: function (r, e, t, o, u) {
-        return (n(e) ? _regeneratorAsyncGen : _regeneratorAsync)(a(r), e, t, o, u);
-      },
-      keys: _regeneratorKeys,
-      values: _regeneratorValues
-    };
-  })();
-}
-
-var _excluded$5 = ["ariaLabelChosenSingular", "ariaLabelSelectedItem", "getItemProps", "getMenuProps", "isOpen", "highlightedIndex", "listItems", "floatingStyles", "setListRef", "loading", "loadingText", "noMatchesText", "selectAllCheckboxState", "selectAllItem", "selectedItems", "readOnly"];
-var DropdownList = function DropdownList(_ref) {
-  var _listItems$;
-  var _ref$ariaLabelChosenS = _ref.ariaLabelChosenSingular,
-    ariaLabelChosenSingular = _ref$ariaLabelChosenS === void 0 ? 'valgt' : _ref$ariaLabelChosenS,
-    _ref$ariaLabelSelecte = _ref.ariaLabelSelectedItem,
-    ariaLabelSelectedItem = _ref$ariaLabelSelecte === void 0 ? ', valgt element, trykk for å fjerne' : _ref$ariaLabelSelecte,
-    getItemProps = _ref.getItemProps,
-    getMenuProps = _ref.getMenuProps,
-    isOpen = _ref.isOpen,
-    highlightedIndex = _ref.highlightedIndex,
-    listItems = _ref.listItems,
-    floatingStyles = _ref.floatingStyles,
-    setListRef = _ref.setListRef,
-    _ref$loading = _ref.loading,
-    loading = _ref$loading === void 0 ? false : _ref$loading,
-    _ref$loadingText = _ref.loadingText,
-    loadingText = _ref$loadingText === void 0 ? 'Laster inn …' : _ref$loadingText,
-    _ref$noMatchesText = _ref.noMatchesText,
-    noMatchesText = _ref$noMatchesText === void 0 ? 'Ingen treff for søket' : _ref$noMatchesText,
-    selectAllCheckboxState = _ref.selectAllCheckboxState,
-    selectAllItem = _ref.selectAllItem,
-    selectedItems = _ref.selectedItems,
-    _ref$readOnly = _ref.readOnly,
-    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
-  var isMultiselect = selectAllItem !== undefined;
-  var isNoMatches = !loading && (listItems.length === 0 || (listItems == null ? void 0 : listItems.length) === 1 && (listItems == null || (_listItems$ = listItems[0]) == null ? void 0 : _listItems$.value) === (selectAllItem == null ? void 0 : selectAllItem.value));
-  var isItemSelected = function isItemSelected(item) {
-    return selectedItems.some(function (selectedItem) {
-      return (selectedItem == null ? void 0 : selectedItem.value) === (item == null ? void 0 : item.value) && (selectedItem == null ? void 0 : selectedItem.label) === (item == null ? void 0 : item.label);
-    });
+    )
+  ] });
+  const isReactComponent = (icon) => {
+    return typeof icon === "function" || typeof icon === "object" && icon !== null && "$$typeof" in icon && typeof icon.$$typeof === "symbol";
   };
-  var ariaValuesSelectAll = function ariaValuesSelectAll() {
-    switch (selectAllCheckboxState == null ? void 0 : selectAllCheckboxState()) {
-      case 'indeterminate':
-        {
-          return {
-            label: (selectAllItem == null ? void 0 : selectAllItem.label) + ", delvis valgt",
-            selected: false
-          };
-        }
-      case true:
+  const listItemContent = (item) => {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      isMultiselect && /* @__PURE__ */ jsx(
+        Checkbox,
         {
-          return {
-            label: (selectAllItem == null ? void 0 : selectAllItem.label) + ", " + ariaLabelChosenSingular,
-            selected: true
-          };
+          "aria-hidden": "true",
+          checked: isItemSelected(item),
+          className: "eds-dropdown__list__item__checkbox",
+          tabIndex: -1,
+          onChange: () => void 0
         }
-      default:
-        {
-          return {
-            label: "" + (selectAllItem == null ? void 0 : selectAllItem.label),
-            selected: false
-          };
-        }
-    }
-  };
-  var selectAllListItemContent = function selectAllListItemContent() {
-    return React.createElement(React.Fragment, null, React.createElement(Checkbox, {
-      "aria-hidden": "true",
-      checked: selectAllCheckboxState == null ? void 0 : selectAllCheckboxState(),
-      className: "eds-dropdown__list__item__checkbox",
-      tabIndex: -1,
-      onChange: function onChange() {
-        return undefined;
-      }
-    }), React.createElement("span", {
-      className: "eds-dropdown__list__item__text",
-      "aria-label": ariaValuesSelectAll().label
-    }, selectAllItem == null ? void 0 : selectAllItem.label));
-  };
-  var isReactComponent = function isReactComponent(icon) {
-    return typeof icon === 'function' || typeof icon === 'object' && icon !== null && '$$typeof' in icon && typeof icon.$$typeof === 'symbol';
-  };
-  var listItemContent = function listItemContent(item) {
-    return React.createElement(React.Fragment, null, isMultiselect && React.createElement(Checkbox, {
-      "aria-hidden": "true",
-      checked: isItemSelected(item),
-      className: "eds-dropdown__list__item__checkbox",
-      tabIndex: -1,
-      onChange: function onChange() {
-        return undefined;
-      }
-    }), React.createElement("span", {
-      className: "eds-dropdown__list__item__text"
-    }, item.label, React.createElement(VisuallyHidden, null, isItemSelected(item) ? ariaLabelSelectedItem : '')), Array.isArray(item.icons) ? item.icons.filter(isReactComponent).map(function (Icon, index) {
-      var _ref2, _Icon$displayName;
-      var key = ((_ref2 = (_Icon$displayName = Icon.displayName) != null ? _Icon$displayName : Icon.name) != null ? _ref2 : Icon.name) + "-" + index;
-      return React.createElement(Icon, {
-        key: key,
-        inline: true,
-        className: "eds-dropdown__list__item__icon"
-      });
-    }) : null);
+      ),
+      /* @__PURE__ */ jsxs("span", { className: "eds-dropdown__list__item__text", children: [
+        item.label,
+        /* @__PURE__ */ jsx(VisuallyHidden, { children: isItemSelected(item) ? ariaLabelSelectedItem : "" })
+      ] }),
+      Array.isArray(item.icons) ? item.icons.filter(isReactComponent).map((Icon, index) => {
+        const key = `${Icon.displayName ?? Icon.name ?? Icon.name}-${index}`;
+        return /* @__PURE__ */ jsx(
+          Icon,
+          {
+            inline: true,
+            className: "eds-dropdown__list__item__icon"
+          },
+          key
+        );
+      }) : null
+    ] });
   };
   return (
     // use popover from @entur/tooltip when that package upgrades to floating-ui
-    React.createElement("ul", _extends({}, getMenuProps({
-      'aria-multiselectable': isMultiselect,
-      ref: setListRef,
-      className: 'eds-dropdown__list',
-      style: _extends({}, floatingStyles, {
-        display: isOpen && !readOnly ? undefined : 'none'
-      }, rest.style)
-    })), function () {
-      if (!isOpen || readOnly) {
-        return null;
-      }
-      if (loading) {
-        return React.createElement("li", {
-          key: "dropdown-list-loading",
-          className: "eds-dropdown__list__item"
-        }, loadingText);
-      }
-      if (isNoMatches) {
-        return React.createElement("li", {
-          key: "dropdown-list-no-match",
-          className: "eds-dropdown__list__item"
-        }, noMatchesText);
+    /* @__PURE__ */ jsx(
+      "ul",
+      {
+        ...getMenuProps({
+          "aria-multiselectable": isMultiselect,
+          ref: setListRef,
+          className: "eds-dropdown__list",
+          style: {
+            ...floatingStyles,
+            display: isOpen && !readOnly ? void 0 : "none",
+            ...rest.style
+          }
+        }),
+        children: (() => {
+          if (!isOpen || readOnly) {
+            return null;
+          }
+          if (loading) {
+            return /* @__PURE__ */ jsx(
+              "li",
+              {
+                className: "eds-dropdown__list__item",
+                children: loadingText
+              },
+              "dropdown-list-loading"
+            );
+          }
+          if (isNoMatches) {
+            return /* @__PURE__ */ jsx(
+              "li",
+              {
+                className: "eds-dropdown__list__item",
+                children: noMatchesText
+              },
+              "dropdown-list-no-match"
+            );
+          }
+          return listItems.map((item, index) => {
+            const key = item.itemKey ?? `${item.label ?? ""}-${item.value ?? ""}-${(item.icons ?? []).map((icon) => icon?.displayName ?? icon?.name ?? "unknown").join("-")}`;
+            const itemIsSelectAll = item.value === selectAllItem?.value;
+            if (itemIsSelectAll && listItems.length <= 2) return null;
+            return /* @__PURE__ */ jsx(
+              "li",
+              {
+                className: classNames("eds-dropdown__list__item", {
+                  "eds-dropdown__list__item--select-all": itemIsSelectAll,
+                  "eds-dropdown__list__item--highlighted": highlightedIndex === index,
+                  "eds-dropdown__list__item--selected": !isMultiselect && isItemSelected(item)
+                }),
+                ...getItemProps({
+                  // @ts-expect-error Since getItemProps expects the same item type
+                  // here as items, it throws error when selectAllItem is a string.
+                  // This does, however, not cause any functional issues.
+                  item,
+                  index,
+                  "aria-selected": itemIsSelectAll ? ariaValuesSelectAll().selected : isItemSelected(item)
+                }),
+                children: itemIsSelectAll ? selectAllListItemContent() : listItemContent(
+                  item
+                )
+              },
+              key
+            );
+          });
+        })()
       }
-      return listItems.map(function (item, index) {
-        var _item$itemKey, _item$label, _item$value, _item$icons;
-        var key = (_item$itemKey = item.itemKey) != null ? _item$itemKey : ((_item$label = item.label) != null ? _item$label : '') + "-" + ((_item$value = item.value) != null ? _item$value : '') + "-" + ((_item$icons = item.icons) != null ? _item$icons : []).map(function (icon) {
-          var _ref3, _icon$displayName;
-          return (_ref3 = (_icon$displayName = icon == null ? void 0 : icon.displayName) != null ? _icon$displayName : icon == null ? void 0 : icon.name) != null ? _ref3 : 'unknown';
-        }).join('-');
-        var itemIsSelectAll = item.value === (selectAllItem == null ? void 0 : selectAllItem.value);
-        if (itemIsSelectAll && listItems.length <= 2) return null;
-        return React.createElement("li", _extends({
-          className: classNames('eds-dropdown__list__item', {
-            'eds-dropdown__list__item--select-all': itemIsSelectAll,
-            'eds-dropdown__list__item--highlighted': highlightedIndex === index,
-            'eds-dropdown__list__item--selected': !isMultiselect && isItemSelected(item)
-          }),
-          key: key
-        }, getItemProps({
-          // @ts-expect-error Since getItemProps expects the same item type
-          // here as items, it throws error when selectAllItem is a string.
-          // This does, however, not cause any functional issues.
-          item: item,
-          index: index,
-          'aria-selected': itemIsSelectAll ? ariaValuesSelectAll().selected : isItemSelected(item)
-        })), itemIsSelectAll ? selectAllListItemContent() : listItemContent(item));
-      });
-    }())
+    )
   );
 };
-
-var _excluded$4 = ["tabIndex"],
-  _excluded2 = ["ariaLabelCloseList", "ariaLabelOpenList", "clearable", "labelClearSelected", "focusable", "disabled", "isOpen", "loading", "loadingText", "onClear", "itemIsSelected"];
-var SelectedItemTag = function SelectedItemTag(_ref) {
-  var _getSelectedItemProps;
-  var ariaLabelRemoveSelected = _ref.ariaLabelRemoveSelected,
-    _ref$ariaLabelChosen = _ref.ariaLabelChosen,
-    ariaLabelChosen = _ref$ariaLabelChosen === void 0 ? 'valgt' : _ref$ariaLabelChosen,
-    disabled = _ref.disabled,
-    getSelectedItemProps = _ref.getSelectedItemProps,
-    index = _ref.index,
-    readOnly = _ref.readOnly,
-    removeSelectedItem = _ref.removeSelectedItem,
-    selectedItem = _ref.selectedItem;
-  var _ref2 = (_getSelectedItemProps = getSelectedItemProps == null ? void 0 : getSelectedItemProps({
-      selectedItem: selectedItem,
-      index: index
-    })) != null ? _getSelectedItemProps : {},
-    selectedItemProps = _objectWithoutPropertiesLoose(_ref2, _excluded$4);
-  return React.createElement(TagChip, _extends({
-    size: "small",
-    className: classNames('eds-dropdown__selected-item-tag', {
-      'eds-dropdown__selected-item-tag--readonly': readOnly,
-      'eds-dropdown__selected-item-tag--disabled': disabled
-    })
-  }, selectedItemProps, {
-    onClose: function onClose(e) {
-      e.stopPropagation();
-      removeSelectedItem(selectedItem);
-    },
-    onClick: function onClick(e) {
-      return e.stopPropagation();
+const SelectedItemTag = ({
+  ariaLabelRemoveSelected,
+  ariaLabelChosen = "valgt",
+  disabled,
+  getSelectedItemProps,
+  index,
+  readOnly,
+  removeSelectedItem,
+  selectedItem
+}) => {
+  const { tabIndex: _, ...selectedItemProps } = getSelectedItemProps?.({
+    selectedItem,
+    index
+  }) ?? {};
+  return /* @__PURE__ */ createElement(
+    TagChip,
+    {
+      size: "small",
+      className: classNames("eds-dropdown__selected-item-tag", {
+        "eds-dropdown__selected-item-tag--readonly": readOnly,
+        "eds-dropdown__selected-item-tag--disabled": disabled
+      }),
+      ...selectedItemProps,
+      onClose: (e) => {
+        e.stopPropagation();
+        removeSelectedItem(selectedItem);
+      },
+      onClick: (e) => e.stopPropagation(),
+      closeButtonAriaLabel: `${selectedItem.label} ${ariaLabelChosen}, ${ariaLabelRemoveSelected} `,
+      key: selectedItem.value,
+      "aria-live": "polite"
     },
-    closeButtonAriaLabel: selectedItem.label + " " + ariaLabelChosen + ", " + ariaLabelRemoveSelected + " ",
-    key: selectedItem.value,
-    "aria-live": "polite"
-  }), React.createElement("span", {
-    "aria-hidden": "true",
-    className: "eds-dropdown__selected-item-tag__text"
-  }, selectedItem.label));
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "eds-dropdown__selected-item-tag__text",
+        children: selectedItem.label
+      }
+    )
+  );
 };
-var DropdownFieldAppendix = /*#__PURE__*/forwardRef(function (_ref3, ref) {
-  var ariaLabelCloseList = _ref3.ariaLabelCloseList,
-    ariaLabelOpenList = _ref3.ariaLabelOpenList,
-    _ref3$clearable = _ref3.clearable,
-    clearable = _ref3$clearable === void 0 ? false : _ref3$clearable,
-    labelClearSelected = _ref3.labelClearSelected,
-    _ref3$focusable = _ref3.focusable,
-    focusable = _ref3$focusable === void 0 ? false : _ref3$focusable,
-    disabled = _ref3.disabled,
-    isOpen = _ref3.isOpen,
-    _ref3$loading = _ref3.loading,
-    loading = _ref3$loading === void 0 ? false : _ref3$loading,
-    loadingText = _ref3.loadingText,
-    onClear = _ref3.onClear,
-    itemIsSelected = _ref3.itemIsSelected,
-    rest = _objectWithoutPropertiesLoose(_ref3, _excluded2);
-  function getToggleAriaLabel() {
-    if (loading) return loadingText;
-    if (isOpen) return ariaLabelCloseList;
-    return ariaLabelOpenList;
+const DropdownFieldAppendix = forwardRef(
+  ({
+    ariaLabelCloseList,
+    ariaLabelOpenList,
+    clearable = false,
+    labelClearSelected,
+    focusable = false,
+    disabled,
+    isOpen,
+    loading = false,
+    loadingText,
+    onClear,
+    itemIsSelected,
+    ...rest
+  }, ref) => {
+    function getToggleAriaLabel() {
+      if (loading) return loadingText;
+      if (isOpen) return ariaLabelCloseList;
+      return ariaLabelOpenList;
+    }
+    return /* @__PURE__ */ jsx(Fragment, { children: !disabled && /* @__PURE__ */ jsxs("div", { className: "eds-dropdown__appendix", children: [
+      clearable && itemIsSelected && /* @__PURE__ */ jsx(
+        ClearableButton,
+        {
+          onClear,
+          focusable: true,
+          labelClearSelectedItems: labelClearSelected
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          className: classNames("eds-dropdown__appendix__toggle-button", {
+            "eds-dropdown__appendix__toggle-button--open": isOpen
+          }),
+          ref,
+          "aria-label": getToggleAriaLabel(),
+          ...rest,
+          type: "button",
+          tabIndex: focusable ? 0 : -1,
+          children: !loading ? /* @__PURE__ */ jsx(DownArrowIcon, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(LoadingDots, { "aria-hidden": "true" })
+        }
+      )
+    ] }) });
   }
-  return React.createElement(React.Fragment, null, !disabled && React.createElement("div", {
-    className: "eds-dropdown__appendix"
-  }, clearable && itemIsSelected && React.createElement(ClearableButton, {
-    onClear: onClear,
-    focusable: true,
-    labelClearSelectedItems: labelClearSelected
-  }), React.createElement(IconButton, _extends({
-    className: classNames('eds-dropdown__appendix__toggle-button', {
-      'eds-dropdown__appendix__toggle-button--open': isOpen
-    }),
-    ref: ref,
-    "aria-label": getToggleAriaLabel()
-  }, rest, {
-    type: "button",
-    tabIndex: focusable ? 0 : -1
-  }), !loading ? React.createElement(DownArrowIcon, {
-    "aria-hidden": "true"
-  }) : React.createElement(LoadingDots, {
-    "aria-hidden": "true"
-  }))));
-});
-var ClearableButton = function ClearableButton(_ref4) {
-  var onClear = _ref4.onClear,
-    _ref4$labelClearSelec = _ref4.labelClearSelectedItems,
-    labelClearSelectedItems = _ref4$labelClearSelec === void 0 ? 'Fjern valgte' : _ref4$labelClearSelec,
-    _ref4$focusable = _ref4.focusable,
-    focusable = _ref4$focusable === void 0 ? false : _ref4$focusable;
-  return React.createElement(React.Fragment, null, React.createElement(Tooltip, {
-    "aria-hidden": "true",
-    placement: "top",
-    content: labelClearSelectedItems,
-    className: "eds-dropdown__appendix__clear-button__tooltip"
-  }, React.createElement(IconButton, {
-    className: "eds-dropdown__appendix__clear-button",
-    type: "button",
-    tabIndex: focusable ? 0 : -1,
-    // These events bubble up to the Dropdown container and trigger openMenu.
-    // To avoid this, stopPropagation and preventDefault are added.
-    onClick: function onClick(e) {
-      e.stopPropagation();
-      onClear();
-    },
-    onKeyDown: function onKeyDown(e) {
-      if (e.key === 'Enter' || e.key === ' ') {
-        e.preventDefault();
-        e.stopPropagation();
-        onClear();
+);
+const ClearableButton = ({
+  onClear,
+  labelClearSelectedItems = "Fjern valgte",
+  focusable = false
+}) => {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        "aria-hidden": "true",
+        placement: "top",
+        content: labelClearSelectedItems,
+        className: "eds-dropdown__appendix__clear-button__tooltip",
+        children: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            className: "eds-dropdown__appendix__clear-button",
+            type: "button",
+            tabIndex: focusable ? 0 : -1,
+            onClick: (e) => {
+              e.stopPropagation();
+              onClear();
+            },
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                e.stopPropagation();
+                onClear();
+              }
+            },
+            "aria-label": labelClearSelectedItems,
+            children: /* @__PURE__ */ jsx(CloseSmallIcon, { "aria-hidden": "true" })
+          }
+        )
       }
-    },
-    "aria-label": labelClearSelectedItems
-  }, React.createElement(CloseSmallIcon, {
-    "aria-hidden": "true"
-  }))), React.createElement("div", {
-    className: "eds-dropdown__appendix__divider"
-  }));
+    ),
+    /* @__PURE__ */ jsx("div", { className: "eds-dropdown__appendix__divider" })
+  ] });
 };
-
-var useNormalizedItems = function useNormalizedItems(items) {
-  return React.useMemo(function () {
-    return items.map(function (item) {
-      if (typeof item == 'string') {
-        return {
-          value: item,
-          label: item
-        };
+const useNormalizedItems = (items) => React.useMemo(
+  () => items.map((item) => {
+    if (typeof item == "string") {
+      return {
+        value: item,
+        label: item
+      };
+    }
+    if (item?.value === void 0) {
+      return {
+        ...item,
+        value: item.label
+      };
+    }
+    return { ...item, value: item.value };
+  }),
+  [items]
+);
+const useResolvedItems = (itemsOrItemsResolver, debounceTimeout = 250) => {
+  const itemsIsAFunction = typeof itemsOrItemsResolver === "function";
+  const [items, setItems] = React.useState(
+    itemsIsAFunction ? [] : itemsOrItemsResolver
+  );
+  const [loading, setLoading] = React.useState(false);
+  const abortControllerRef = React.useRef(
+    new AbortController()
+  );
+  const itemsResolver = React.useMemo(() => {
+    if (itemsIsAFunction)
+      return itemsOrItemsResolver;
+    return () => Promise.resolve(itemsOrItemsResolver);
+  }, [itemsOrItemsResolver, itemsIsAFunction]);
+  const updateItems = async (inputValue) => {
+    if (abortControllerRef?.current) abortControllerRef?.current?.abort();
+    const abortController = new AbortController();
+    abortControllerRef.current = abortController;
+    setLoading(true);
+    try {
+      const resolvedItems = await itemsResolver(
+        inputValue ?? "",
+        abortControllerRef
+      );
+      if (abortControllerRef?.current?.signal?.aborted) {
+        console.warn(
+          "Avbryt den asynkrone funksjonen din med signalet fra AbortController-en for å for å unngå minnelekkasje.",
+          'Funksjonen bør kaste en DOMException med navnet "AbortError" når den avbrytes.',
+          "",
+          "\n\nSe eksempel her: https://linje.entur.no/komponenter/skjemaelementer/dropdown#s%C3%B8kbar-dropdown-med-valg-fra-nettverkskall-bassert-p%C3%A5-tekstinput",
+          "\nLes mer om AbortController her: https://developer.mozilla.org/en-US/docs/Web/API/AbortController"
+        );
+        return;
       }
-      if ((item == null ? void 0 : item.value) === undefined) {
-        return _extends({}, item, {
-          value: item.label
-        });
+      setLoading(false);
+      setItems(resolvedItems);
+    } catch (error2) {
+      if (error2 && typeof error2 === "object" && "name" in error2 && error2.name === "AbortError") {
+        return;
       }
-      return _extends({}, item, {
-        value: item.value
-      });
-    });
-  }, [items]);
-};
-
-var useResolvedItems = function useResolvedItems(/** The list of items, or an async function that resolves the list of items */
-itemsOrItemsResolver, /** The time to wait after the input changes to the fetchItems method is called */
-debounceTimeout) {
-  if (debounceTimeout === void 0) {
-    debounceTimeout = 250;
-  }
-  var itemsIsAFunction = typeof itemsOrItemsResolver === 'function';
-  var _React$useState = React.useState(itemsIsAFunction ? [] : itemsOrItemsResolver),
-    items = _React$useState[0],
-    setItems = _React$useState[1];
-  var _React$useState2 = React.useState(false),
-    loading = _React$useState2[0],
-    setLoading = _React$useState2[1];
-  var abortControllerRef = React.useRef(new AbortController());
-  // We normalize the itemsResolver argument to an async function, so we
-  // can use it without thinking about the differences later
-  var itemsResolver = React.useMemo(function () {
-    if (itemsIsAFunction) return itemsOrItemsResolver;
-    return function () {
-      return Promise.resolve(itemsOrItemsResolver);
-    };
-  }, [itemsOrItemsResolver, itemsIsAFunction]);
-  // This should be called whenever the input value changes
-  var updateItems = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(inputValue) {
-      var _abortControllerRef$c;
-      var abortController, _abortControllerRef$c2, resolvedItems;
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            // The abortController handles cleanup of the previous request and unmounting
-            if (abortControllerRef != null && abortControllerRef.current) abortControllerRef == null || (_abortControllerRef$c = abortControllerRef.current) == null || _abortControllerRef$c.abort();
-            abortController = new AbortController();
-            abortControllerRef.current = abortController;
-            setLoading(true);
-            _context.prev = 4;
-            _context.next = 7;
-            return itemsResolver(inputValue != null ? inputValue : '', abortControllerRef);
-          case 7:
-            resolvedItems = _context.sent;
-            if (!(abortControllerRef != null && (_abortControllerRef$c2 = abortControllerRef.current) != null && (_abortControllerRef$c2 = _abortControllerRef$c2.signal) != null && _abortControllerRef$c2.aborted)) {
-              _context.next = 11;
-              break;
-            }
-            console.warn('Avbryt den asynkrone funksjonen din med signalet fra AbortController-en for å for å unngå minnelekkasje.', 'Funksjonen bør kaste en DOMException med navnet "AbortError" når den avbrytes.', '', '\n\nSe eksempel her: https://linje.entur.no/komponenter/skjemaelementer/dropdown#s%C3%B8kbar-dropdown-med-valg-fra-nettverkskall-bassert-p%C3%A5-tekstinput', '\nLes mer om AbortController her: https://developer.mozilla.org/en-US/docs/Web/API/AbortController');
-            return _context.abrupt("return");
-          case 11:
-            setLoading(false);
-            setItems(resolvedItems);
-            _context.next = 21;
-            break;
-          case 15:
-            _context.prev = 15;
-            _context.t0 = _context["catch"](4);
-            if (!(_context.t0 && typeof _context.t0 === 'object' && 'name' in _context.t0 && _context.t0.name === 'AbortError')) {
-              _context.next = 19;
-              break;
-            }
-            return _context.abrupt("return");
-          case 19:
-            console.warn('The following error was received but not handled inside Entur Designsystems useResolvedItems hook:');
-            throw _context.t0;
-          case 21:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee, null, [[4, 15]]);
-    }));
-    return function updateItems(_x) {
-      return _ref.apply(this, arguments);
-    };
-  }();
-  var debouncedFetchItems = useDebounce(updateItems, debounceTimeout);
-  var normalizedItems = useNormalizedItems(items);
-  React.useEffect(function () {
-    // send abort signal to previous request on unmount for cleanup
-    return function () {
-      var _abortControllerRef$c3;
-      return abortControllerRef == null || (_abortControllerRef$c3 = abortControllerRef.current) == null ? void 0 : _abortControllerRef$c3.abort('Component unmounted');
-    };
+      console.warn(
+        "The following error was received but not handled inside Entur Designsystems useResolvedItems hook:"
+      );
+      throw error2;
+    }
+  };
+  const debouncedFetchItems = useDebounce(updateItems, debounceTimeout);
+  const normalizedItems = useNormalizedItems(items);
+  React.useEffect(() => {
+    return () => abortControllerRef?.current?.abort("Component unmounted");
   }, []);
-  React.useEffect(function () {
-    // Let's fetch the list initially if it's specified
+  React.useEffect(() => {
     if (itemsIsAFunction) {
-      debouncedFetchItems('');
+      debouncedFetchItems("");
     }
   }, [itemsIsAFunction, itemsResolver]);
   return {
@@ -681,79 +385,56 @@ debounceTimeout) {
     fetchItems: debouncedFetchItems
   };
 };
-
-/* start general utils */
-var EMPTY_INPUT = '';
+const EMPTY_INPUT = "";
 function lowerCaseFilterTest(item, input) {
   if (!input) {
     return true;
   }
-  var sanitizeEscapeCharacters = input.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
-  var inputRegex = new RegExp(sanitizeEscapeCharacters, 'i');
+  const sanitizeEscapeCharacters = input.replace(
+    /[-/\\^$*+?.()|[\]{}]/g,
+    "\\$&"
+  );
+  const inputRegex = new RegExp(sanitizeEscapeCharacters, "i");
   return inputRegex.test(item.label);
 }
-function noFilter(
-//@ts-expect-error only here to comply with dropdown filter API
-item,
-//@ts-expect-error only here to comply with dropdown filter API
-input) {
+function noFilter(item, input) {
   return true;
 }
-var itemToString = function itemToString(item) {
-  return item ? item.label : '';
-};
-var itemToKey = function itemToKey(item) {
-  return (item == null ? void 0 : item.label) + (item == null ? void 0 : item.value);
-};
-var isFunctionWithQueryArgument = function isFunctionWithQueryArgument(object) {
-  return typeof object === 'function' && object.length > 0;
-};
-var clamp = function clamp(val, min, max) {
-  if (min === void 0) {
-    min = 1;
-  }
-  if (max === void 0) {
-    max = 10;
-  }
-  return Math.min(Math.max(val, min), max);
-};
-var useMultiselectUtils = function useMultiselectUtils(_ref) {
-  var listItems = _ref.listItems,
-    selectedItems = _ref.selectedItems,
-    selectAll = _ref.selectAll;
-  var hasSelectedItems = selectedItems.length > 0;
-  var listItemsWithoutSelectAll = listItems.filter(function (item) {
-    return item.value !== selectAll.value;
-  });
-  var unselectedItemsInListItems = listItemsWithoutSelectAll.filter(function (listItem) {
-    return !selectedItems.some(function (selectedItem) {
-      return selectedItem.value === listItem.value;
-    });
-  });
-  var allListItemsAreSelected = !listItemsWithoutSelectAll.some(function (listItem) {
-    return !selectedItems.some(function (selectedItem) {
-      return selectedItem.value === listItem.value;
-    });
-  });
-  var someListItemsAreSelected = listItemsWithoutSelectAll.some(function (listItem) {
-    return selectedItems.some(function (selectedItem) {
-      return selectedItem.value === listItem.value;
-    });
-  });
-  var addClickedItemToSelectedItems = function addClickedItemToSelectedItems(clickedItem, onChange) {
-    return onChange([].concat(selectedItems, [clickedItem]));
-  };
-  var clickedItemIsInSelectedItems = function clickedItemIsInSelectedItems(clickedItem) {
-    return selectedItems.some(function (selectedItem) {
-      return selectedItem.value === clickedItem.value;
-    });
-  };
-  var clickedItemIsSelectAll = function clickedItemIsSelectAll(clickedItem) {
-    return clickedItem.value === selectAll.value;
-  };
-  var handleListItemClicked = function handleListItemClicked(_ref2) {
-    var clickedItem = _ref2.clickedItem,
-      onChange = _ref2.onChange;
+const itemToString = (item) => item ? item.label : "";
+const itemToKey = (item) => item?.label + item?.value;
+const isFunctionWithQueryArgument = (object) => typeof object === "function" && object.length > 0;
+const clamp = (val, min = 1, max = 10) => Math.min(Math.max(val, min), max);
+const useMultiselectUtils = ({
+  listItems,
+  selectedItems,
+  selectAll
+}) => {
+  const hasSelectedItems = selectedItems.length > 0;
+  const listItemsWithoutSelectAll = listItems.filter(
+    (item) => item.value !== selectAll.value
+  );
+  const unselectedItemsInListItems = listItemsWithoutSelectAll.filter(
+    (listItem) => !selectedItems.some(
+      (selectedItem) => selectedItem.value === listItem.value
+    )
+  );
+  const allListItemsAreSelected = !listItemsWithoutSelectAll.some(
+    (listItem) => !selectedItems.some(
+      (selectedItem) => selectedItem.value === listItem.value
+    )
+  );
+  const someListItemsAreSelected = listItemsWithoutSelectAll.some(
+    (listItem) => selectedItems.some((selectedItem) => selectedItem.value === listItem.value)
+  );
+  const addClickedItemToSelectedItems = (clickedItem, onChange) => onChange([...selectedItems, clickedItem]);
+  const clickedItemIsInSelectedItems = (clickedItem) => selectedItems.some(
+    (selectedItem) => selectedItem.value === clickedItem.value
+  );
+  const clickedItemIsSelectAll = (clickedItem) => clickedItem.value === selectAll.value;
+  const handleListItemClicked = ({
+    clickedItem,
+    onChange
+  }) => {
     if (clickedItemIsSelectAll(clickedItem)) {
       if (allListItemsAreSelected) {
         return unselectAllListItems(onChange);
@@ -765,1054 +446,1020 @@ var useMultiselectUtils = function useMultiselectUtils(_ref) {
     }
     addClickedItemToSelectedItems(clickedItem, onChange);
   };
-  var removeClickedItemFromSelectedItems = function removeClickedItemFromSelectedItems(clickedItem, onChange) {
-    return onChange(selectedItems.filter(function (selectedItem) {
-      return selectedItem.value !== clickedItem.value;
-    }));
-  };
-  var selectAllCheckboxState = function selectAllCheckboxState() {
+  const removeClickedItemFromSelectedItems = (clickedItem, onChange) => onChange(
+    selectedItems.filter(
+      (selectedItem) => selectedItem.value !== clickedItem.value
+    )
+  );
+  const selectAllCheckboxState = () => {
     if (allListItemsAreSelected) return true;
-    if (someListItemsAreSelected) return 'indeterminate';
+    if (someListItemsAreSelected) return "indeterminate";
     return false;
   };
-  var selectAllUnselectedItemsInListItems = function selectAllUnselectedItemsInListItems(onChange) {
-    onChange([].concat(selectedItems, unselectedItemsInListItems));
+  const selectAllUnselectedItemsInListItems = (onChange) => {
+    onChange([...selectedItems, ...unselectedItemsInListItems]);
   };
-  var unselectAllListItems = function unselectAllListItems(onChange) {
-    var selectedItemsWithoutItemsInListItems = selectedItems.filter(function (selectedItem) {
-      return !listItemsWithoutSelectAll.some(function (listItem) {
-        return listItem.value === selectedItem.value;
-      });
-    });
+  const unselectAllListItems = (onChange) => {
+    const selectedItemsWithoutItemsInListItems = selectedItems.filter(
+      (selectedItem) => !listItemsWithoutSelectAll.some(
+        (listItem) => listItem.value === selectedItem.value
+      )
+    );
     onChange(selectedItemsWithoutItemsInListItems);
   };
   return {
-    addClickedItemToSelectedItems: addClickedItemToSelectedItems,
-    allListItemsAreSelected: allListItemsAreSelected,
-    clickedItemIsInSelectedItems: clickedItemIsInSelectedItems,
-    clickedItemIsSelectAll: clickedItemIsSelectAll,
-    handleListItemClicked: handleListItemClicked,
-    hasSelectedItems: hasSelectedItems,
-    listItemsWithoutSelectAll: listItemsWithoutSelectAll,
-    removeClickedItemFromSelectedItems: removeClickedItemFromSelectedItems,
-    selectAllCheckboxState: selectAllCheckboxState,
-    selectAllUnselectedItemsInListItems: selectAllUnselectedItemsInListItems,
-    someListItemsAreSelected: someListItemsAreSelected,
-    unselectAllListItems: unselectAllListItems
+    addClickedItemToSelectedItems,
+    allListItemsAreSelected,
+    clickedItemIsInSelectedItems,
+    clickedItemIsSelectAll,
+    handleListItemClicked,
+    hasSelectedItems,
+    listItemsWithoutSelectAll,
+    removeClickedItemFromSelectedItems,
+    selectAllCheckboxState,
+    selectAllUnselectedItemsInListItems,
+    someListItemsAreSelected,
+    unselectAllListItems
   };
 };
-/* end multiselect utils */
-/* start a11y utils */
-// called when the state changes:
-// selectedItem, highlightedIndex, inputValue or isOpen.
 function getA11yStatusMessage(options) {
-  var isOpen = options.isOpen,
-    _options$selectAllIte = options.selectAllItemIncluded,
-    selectAllItemIncluded = _options$selectAllIte === void 0 ? false : _options$selectAllIte,
-    resultCount = options.resultCount;
+  const { isOpen, selectAllItemIncluded = false, resultCount } = options;
   if (!isOpen) {
-    return '';
+    return "";
   }
-  var resultCountWithoutSelectAll = selectAllItemIncluded ? resultCount - 1 : resultCount;
+  const resultCountWithoutSelectAll = selectAllItemIncluded ? resultCount - 1 : resultCount;
   if (resultCountWithoutSelectAll === 0) {
-    return 'Ingen resultater';
+    return "Ingen resultater";
   }
-  return resultCountWithoutSelectAll + " resultat" + (resultCountWithoutSelectAll === 1 ? '' : 'er') + " tilgjengelig, naviger med pil opp eller ned, velg elementer med Enter.";
+  return `${resultCountWithoutSelectAll} resultat${resultCountWithoutSelectAll === 1 ? "" : "er"} tilgjengelig, naviger med pil opp eller ned, velg elementer med Enter.`;
 }
-/* end a11y utils */
-
-var _excluded$3 = ["ariaLabelChosenSingular", "ariaLabelCloseList", "ariaLabelOpenList", "ariaLabelSelectedItem", "className", "clearable", "debounceTimeout", "disabled", "disableLabelAnimation", "feedback", "items", "itemFilter", "label", "labelClearSelectedItem", "labelTooltip", "listStyle", "loading", "loadingText", "noMatchesText", "onChange", "placeholder", "prepend", "readOnly", "selectedItem", "selectOnBlur", "selectOnTab", "style", "variant"];
-var SearchableDropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _document, _selectedItem$label;
-  var ariaLabelChosenSingular = _ref.ariaLabelChosenSingular,
-    _ref$ariaLabelCloseLi = _ref.ariaLabelCloseList,
-    ariaLabelCloseList = _ref$ariaLabelCloseLi === void 0 ? 'Lukk liste med valg' : _ref$ariaLabelCloseLi,
-    _ref$ariaLabelOpenLis = _ref.ariaLabelOpenList,
-    ariaLabelOpenList = _ref$ariaLabelOpenLis === void 0 ? 'Åpne liste med valg' : _ref$ariaLabelOpenLis,
-    ariaLabelSelectedItem = _ref.ariaLabelSelectedItem,
-    className = _ref.className,
-    _ref$clearable = _ref.clearable,
-    clearable = _ref$clearable === void 0 ? true : _ref$clearable,
-    debounceTimeout = _ref.debounceTimeout,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$disableLabelAnim = _ref.disableLabelAnimation,
-    disableLabelAnimation = _ref$disableLabelAnim === void 0 ? false : _ref$disableLabelAnim,
-    feedback = _ref.feedback,
-    initialItems = _ref.items,
-    _ref$itemFilter = _ref.itemFilter,
-    itemFilter = _ref$itemFilter === void 0 ? isFunctionWithQueryArgument(initialItems) ? noFilter : lowerCaseFilterTest : _ref$itemFilter,
-    label = _ref.label,
-    _ref$labelClearSelect = _ref.labelClearSelectedItem,
-    labelClearSelectedItem = _ref$labelClearSelect === void 0 ? 'fjern valgt' : _ref$labelClearSelect,
-    labelTooltip = _ref.labelTooltip,
-    listStyle = _ref.listStyle,
-    loading = _ref.loading,
-    _ref$loadingText = _ref.loadingText,
-    loadingText = _ref$loadingText === void 0 ? 'Laster resultater …' : _ref$loadingText,
-    _ref$noMatchesText = _ref.noMatchesText,
-    noMatchesText = _ref$noMatchesText === void 0 ? 'Ingen tilgjengelige valg …' : _ref$noMatchesText,
-    _ref$onChange = _ref.onChange,
-    onChange = _ref$onChange === void 0 ? function () {
-      return undefined;
-    } : _ref$onChange,
-    placeholder = _ref.placeholder,
-    prepend = _ref.prepend,
-    _ref$readOnly = _ref.readOnly,
-    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-    value = _ref.selectedItem,
-    _ref$selectOnBlur = _ref.selectOnBlur,
-    selectOnBlur = _ref$selectOnBlur === void 0 ? false : _ref$selectOnBlur,
-    _ref$selectOnTab = _ref.selectOnTab,
-    selectOnTab = _ref$selectOnTab === void 0 ? false : _ref$selectOnTab,
-    style = _ref.style,
-    _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'info' : _ref$variant,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
-  var _useState = useState(value !== null),
-    showSelectedItem = _useState[0],
-    setShowSelectedItem = _useState[1];
-  var _useState2 = useState(0),
-    lastHighlightedIndex = _useState2[0],
-    setLastHighlightedIndex = _useState2[1];
-  var inputRef = useRef(null);
-  var _useResolvedItems = useResolvedItems(initialItems, debounceTimeout),
-    normalizedItems = _useResolvedItems.items,
-    resolvedItemsLoading = _useResolvedItems.loading,
-    fetchItems = _useResolvedItems.fetchItems;
-  var _useState3 = useState(normalizedItems),
-    listItems = _useState3[0],
-    setListItems = _useState3[1];
-  var filterListItems = function filterListItems(_ref2) {
-    var inputValue = _ref2.inputValue;
-    return setListItems(normalizedItems.filter(function (item) {
-      return itemFilter(item, inputValue);
-    }));
-  };
-  var updateListItems = function updateListItems(_ref3) {
-    var inputValue = _ref3.inputValue;
-    var shouldRefetchItems = isFunctionWithQueryArgument(initialItems);
-    if (shouldRefetchItems) fetchItems(inputValue != null ? inputValue : EMPTY_INPUT);
-    filterListItems({
-      inputValue: inputValue != null ? inputValue : EMPTY_INPUT
-    });
-  };
-  var resetInputState = function resetInputState(_ref4) {
-    var changes = _ref4.changes;
-    updateListItems({
-      inputValue: EMPTY_INPUT
-    });
-    return _extends({}, changes, {
-      inputValue: EMPTY_INPUT
-    });
-  };
-  var inputHasFocus = typeof document !== 'undefined' ? (inputRef == null ? void 0 : inputRef.current) === ((_document = document) == null ? void 0 : _document.activeElement) : false;
-  useEffect(function () {
-    filterListItems({
-      inputValue: inputValue
-    });
-  }, [normalizedItems]); // eslint-disable-line react-hooks/exhaustive-deps
-  useEffect(function () {
-    // sync internal state on initial render
-    if (selectedItem !== null && !inputHasFocus) {
-      setShowSelectedItem(true);
-      updateListItems({
+const SearchableDropdown = React.forwardRef(
+  ({
+    ariaLabelChosenSingular,
+    ariaLabelCloseList = "Lukk liste med valg",
+    ariaLabelOpenList = "Åpne liste med valg",
+    ariaLabelSelectedItem,
+    className,
+    clearable = true,
+    debounceTimeout,
+    disabled = false,
+    disableLabelAnimation = false,
+    feedback,
+    items: initialItems,
+    itemFilter = isFunctionWithQueryArgument(initialItems) ? noFilter : lowerCaseFilterTest,
+    label,
+    labelClearSelectedItem = "fjern valgt",
+    labelTooltip,
+    listStyle,
+    loading,
+    loadingText = "Laster resultater …",
+    noMatchesText = "Ingen tilgjengelige valg …",
+    onChange = () => void 0,
+    placeholder,
+    prepend,
+    readOnly = false,
+    selectedItem: value,
+    selectOnBlur = false,
+    selectOnTab = false,
+    style,
+    variant = "info",
+    ...rest
+  }, ref) => {
+    const [showSelectedItem, setShowSelectedItem] = useState(value !== null);
+    const [lastHighlightedIndex, setLastHighlightedIndex] = useState(0);
+    const inputRef = useRef(null);
+    const {
+      items: normalizedItems,
+      loading: resolvedItemsLoading,
+      fetchItems
+    } = useResolvedItems(initialItems, debounceTimeout);
+    const [listItems, setListItems] = useState(normalizedItems);
+    const filterListItems = ({ inputValue: inputValue2 }) => setListItems(
+      normalizedItems.filter((item) => itemFilter(item, inputValue2))
+    );
+    const updateListItems = ({ inputValue: inputValue2 }) => {
+      const shouldRefetchItems = isFunctionWithQueryArgument(initialItems);
+      if (shouldRefetchItems) fetchItems(inputValue2 ?? EMPTY_INPUT);
+      filterListItems({ inputValue: inputValue2 ?? EMPTY_INPUT });
+    };
+    const resetInputState = ({
+      changes
+    }) => {
+      updateListItems({ inputValue: EMPTY_INPUT });
+      return {
+        ...changes,
         inputValue: EMPTY_INPUT
-      });
-      setInputValue(EMPTY_INPUT);
-    }
-  }, []);
-  var stateReducer = useCallback(function (state, _ref5) {
-    var type = _ref5.type,
-      changes = _ref5.changes;
-    if (changes.highlightedIndex !== undefined && (changes == null ? void 0 : changes.highlightedIndex) >= 0) {
-      setLastHighlightedIndex(changes == null ? void 0 : changes.highlightedIndex);
-    }
-    switch (type) {
-      // empty input to show selected item and reset dropdown list on item selection
-      case useCombobox.stateChangeTypes.ItemClick:
-      case useCombobox.stateChangeTypes.InputKeyDownEnter:
-      case useCombobox.stateChangeTypes.InputBlur:
-        return resetInputState({
-          changes: changes
-        });
-      case useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:
-        if (changes.selectedItem !== null && !inputHasFocus) setShowSelectedItem(true);
-        return resetInputState({
-          changes: changes
-        });
-      // remove leading whitespace, select element with spacebar on empty input
-      case useCombobox.stateChangeTypes.InputChange:
-        {
-          var _changes$inputValue;
-          var leadingWhitespaceTest = /^\s+/g;
-          var isSpacePressedOnEmptyInput = changes.inputValue === ' ';
-          if (!isSpacePressedOnEmptyInput) setLastHighlightedIndex(0);
-          if ((_changes$inputValue = changes.inputValue) != null && _changes$inputValue.match(leadingWhitespaceTest)) {
-            var sanitizedInputValue = changes.inputValue.replace(leadingWhitespaceTest, EMPTY_INPUT);
-            if (isSpacePressedOnEmptyInput) {
-              if (!state.isOpen) return _extends({}, changes, {
-                inputValue: sanitizedInputValue,
-                isOpen: true
-              });
-              if (changes.highlightedIndex !== undefined) {
-                return _extends({}, changes, {
-                  inputValue: sanitizedInputValue,
-                  selectedItem: listItems[changes.highlightedIndex]
-                });
+      };
+    };
+    const inputHasFocus = typeof document !== "undefined" ? inputRef?.current === document?.activeElement : false;
+    useEffect(() => {
+      filterListItems({ inputValue });
+    }, [normalizedItems]);
+    useEffect(() => {
+      if (selectedItem !== null && !inputHasFocus) {
+        setShowSelectedItem(true);
+        updateListItems({ inputValue: EMPTY_INPUT });
+        setInputValue(EMPTY_INPUT);
+      }
+    }, []);
+    const stateReducer = useCallback(
+      (state, {
+        type,
+        changes
+      }) => {
+        if (changes.highlightedIndex !== void 0 && changes?.highlightedIndex >= 0) {
+          setLastHighlightedIndex(changes?.highlightedIndex);
+        }
+        switch (type) {
+          // empty input to show selected item and reset dropdown list on item selection
+          case useCombobox.stateChangeTypes.ItemClick:
+          case useCombobox.stateChangeTypes.InputKeyDownEnter:
+          case useCombobox.stateChangeTypes.InputBlur:
+            return resetInputState({ changes });
+          case useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:
+            if (changes.selectedItem !== null && !inputHasFocus)
+              setShowSelectedItem(true);
+            return resetInputState({ changes });
+          // remove leading whitespace, select element with spacebar on empty input
+          case useCombobox.stateChangeTypes.InputChange: {
+            const leadingWhitespaceTest = /^\s+/g;
+            const isSpacePressedOnEmptyInput = changes.inputValue === " ";
+            if (!isSpacePressedOnEmptyInput) setLastHighlightedIndex(0);
+            if (changes.inputValue?.match(leadingWhitespaceTest)) {
+              const sanitizedInputValue = changes.inputValue.replace(
+                leadingWhitespaceTest,
+                EMPTY_INPUT
+              );
+              if (isSpacePressedOnEmptyInput) {
+                if (!state.isOpen)
+                  return {
+                    ...changes,
+                    inputValue: sanitizedInputValue,
+                    isOpen: true
+                  };
+                if (changes.highlightedIndex !== void 0) {
+                  return {
+                    ...changes,
+                    inputValue: sanitizedInputValue,
+                    selectedItem: listItems[changes.highlightedIndex]
+                  };
+                }
               }
             }
+            return { ...changes, highlightedIndex: 0 };
           }
-          return _extends({}, changes, {
-            highlightedIndex: 0
-          });
+          default:
+            return changes;
         }
-      default:
-        return changes;
-    }
-  }, [fetchItems, filterListItems, inputHasFocus, resetInputState]);
-  var _useCombobox = useCombobox({
+      },
+      [fetchItems, filterListItems, inputHasFocus, resetInputState]
+    );
+    const {
+      isOpen,
+      getToggleButtonProps,
+      getLabelProps,
+      getMenuProps,
+      getInputProps,
+      highlightedIndex,
+      getItemProps,
+      selectedItem,
+      inputValue,
+      setInputValue,
+      selectItem,
+      reset
+    } = useCombobox({
       defaultHighlightedIndex: lastHighlightedIndex,
       items: listItems,
-      itemToString: itemToString,
+      itemToString,
       selectedItem: value,
-      stateReducer: stateReducer,
-      onInputValueChange: function onInputValueChange(changes) {
-        updateListItems({
-          inputValue: changes.inputValue
-        });
+      stateReducer,
+      onInputValueChange(changes) {
+        updateListItems({ inputValue: changes.inputValue });
       },
-      onSelectedItemChange: function onSelectedItemChange(_ref6) {
-        var newSelectedItem = _ref6.selectedItem;
+      onSelectedItemChange({ selectedItem: newSelectedItem }) {
         onChange(newSelectedItem);
       },
       // Accessibility
-      getA11yStatusMessage: function getA11yStatusMessage$1(options) {
-        return getA11yStatusMessage(_extends({}, options, {
-          resultCount: listItems.length
-        }));
-      }
-    }),
-    isOpen = _useCombobox.isOpen,
-    getToggleButtonProps = _useCombobox.getToggleButtonProps,
-    getLabelProps = _useCombobox.getLabelProps,
-    getMenuProps = _useCombobox.getMenuProps,
-    getInputProps = _useCombobox.getInputProps,
-    highlightedIndex = _useCombobox.highlightedIndex,
-    getItemProps = _useCombobox.getItemProps,
-    selectedItem = _useCombobox.selectedItem,
-    inputValue = _useCombobox.inputValue,
-    setInputValue = _useCombobox.setInputValue,
-    selectItem = _useCombobox.selectItem,
-    reset = _useCombobox.reset;
-  // calculations for floating-UI popover position
-  var _useFloating = useFloating({
+      getA11yStatusMessage: (options) => getA11yStatusMessage({ ...options, resultCount: listItems.length })
+    });
+    const { refs, floatingStyles, update } = useFloating({
       open: isOpen,
-      placement: 'bottom-start',
-      middleware: [offset(space.extraSmall2), shift({
-        padding: space.extraSmall
-      }), size({
-        apply: function apply(_ref7) {
-          var rects = _ref7.rects,
-            elements = _ref7.elements,
-            availableHeight = _ref7.availableHeight;
-          Object.assign(elements.floating.style, {
-            width: rects.reference.width + "px",
-            // Floating will flip when smaller than 10*16 px
-            // and never exceed 20*16 px.
-            maxHeight: clamp(10 * 16, availableHeight, 20 * 16) + "px"
-          });
-        }
-      }), flip({
-        fallbackStrategy: 'initialPlacement'
-      })]
-    }),
-    refs = _useFloating.refs,
-    floatingStyles = _useFloating.floatingStyles,
-    update = _useFloating.update;
-  // Update floating-ui position on scroll etc. Floating-ui's autoupdate is usually used inside
-  // the useFloating hook but this requires the floating element to be conditionally rendered.
-  // Downshift doesn't work correctly when conditionally rendered since props and refs aren't correctly
-  // spread to the component. We therefor use this useEffect to update position. See https://floating-ui.com/docs/autoupdate#usage
-  useEffect(function () {
-    if (isOpen && refs.reference.current && refs.floating.current) {
-      return autoUpdate(refs.reference.current, refs.floating.current, update);
-    }
-  }, [isOpen, refs.reference, refs.floating, update]);
-  var handleOnClear = function handleOnClear() {
-    var _inputRef$current;
-    (_inputRef$current = inputRef.current) == null || _inputRef$current.focus();
-    reset();
-  };
-  return React.createElement(BaseFormControl, _extends({
-    className: classNames('eds-dropdown', 'eds-dropdown--searchable', className, {
-      'eds-dropdown--has-tooltip': labelTooltip !== undefined
-    }),
-    disabled: disabled,
-    disableLabelAnimation: disableLabelAnimation,
-    feedback: feedback,
-    isFilled: selectedItem !== null || inputValue !== EMPTY_INPUT,
-    label: label,
-    labelId: getLabelProps().id,
-    labelProps: getLabelProps(),
-    labelTooltip: labelTooltip,
-    onClick: function onClick(e) {
-      if (e.target === e.currentTarget) {
-        var _getInputProps;
-        (_getInputProps = getInputProps()) == null || _getInputProps.onClick == null || _getInputProps.onClick(e);
-      }
-    },
-    prepend: prepend,
-    readOnly: readOnly,
-    ref: refs.setReference,
-    style: style,
-    tabIndex: disabled || readOnly ? -1 : undefined,
-    variant: variant,
-    after: React.createElement(DropdownList, {
-      ariaLabelChosenSingular: ariaLabelChosenSingular,
-      ariaLabelSelectedItem: ariaLabelSelectedItem,
-      floatingStyles: floatingStyles,
-      getItemProps: getItemProps,
-      getMenuProps: getMenuProps,
-      highlightedIndex: highlightedIndex,
-      isOpen: isOpen,
-      listItems: listItems,
-      style: listStyle,
-      setListRef: refs.setFloating,
-      loading: loading != null ? loading : resolvedItemsLoading,
-      loadingText: loadingText,
-      noMatchesText: noMatchesText,
-      selectedItems: selectedItem !== null ? [selectedItem] : [],
-      readOnly: readOnly
-    })
-  }, rest, {
-    // Append is not supported as of now
-    append: undefined
-  }), React.createElement("span", {
-    className: classNames('eds-dropdown--searchable__selected-item', {
-      'eds-dropdown--searchable__selected-item--hidden': !showSelectedItem
-    }),
-    onClick: function onClick(event) {
-      if (!disabled && !readOnly) {
-        var _inputRef$current2, _getInputProps2;
-        (_inputRef$current2 = inputRef.current) == null || _inputRef$current2.focus();
-        (_getInputProps2 = getInputProps()) == null || _getInputProps2.onClick == null || _getInputProps2.onClick(event);
-      }
-    },
-    tabIndex: readOnly ? 0 : -1
-  }, showSelectedItem ? selectedItem == null ? void 0 : selectedItem.label : ''), React.createElement("input", _extends({
-    className: classNames('eds-dropdown__input eds-form-control', {
-      'eds-dropdown__input--hidden': showSelectedItem
-    })
-  }, getInputProps({
-    onKeyDown: function onKeyDown(e) {
-      if (isOpen && e.key === 'Tab') {
-        var highlitedItem = listItems[highlightedIndex];
-        // we don't want to clear selection with tab
-        if ((selectOnTab || selectOnBlur) && highlitedItem && highlitedItem !== selectedItem) {
-          selectItem(highlitedItem);
-        }
+      placement: "bottom-start",
+      middleware: [
+        offset(space.extraSmall2),
+        shift({ padding: space.extraSmall }),
+        size({
+          apply({ rects, elements, availableHeight }) {
+            Object.assign(elements.floating.style, {
+              width: `${rects.reference.width}px`,
+              // Floating will flip when smaller than 10*16 px
+              // and never exceed 20*16 px.
+              maxHeight: `${clamp(10 * 16, availableHeight, 20 * 16)}px`
+            });
+          }
+        }),
+        flip({ fallbackStrategy: "initialPlacement" })
+      ]
+    });
+    useEffect(() => {
+      if (isOpen && refs.reference.current && refs.floating.current) {
+        return autoUpdate(
+          refs.reference.current,
+          refs.floating.current,
+          update
+        );
       }
-    },
-    onBlur: function onBlur() {
-      if (selectedItem !== null) setShowSelectedItem(true);
-    },
-    onFocus: function onFocus() {
-      if (!readOnly) {
-        setShowSelectedItem(false);
+    }, [isOpen, refs.reference, refs.floating, update]);
+    const handleOnClear = () => {
+      inputRef.current?.focus();
+      reset();
+    };
+    return /* @__PURE__ */ jsxs(
+      BaseFormControl,
+      {
+        className: classNames(
+          "eds-dropdown",
+          "eds-dropdown--searchable",
+          className,
+          { "eds-dropdown--has-tooltip": labelTooltip !== void 0 }
+        ),
+        disabled,
+        disableLabelAnimation,
+        feedback,
+        isFilled: selectedItem !== null || inputValue !== EMPTY_INPUT,
+        label,
+        labelId: getLabelProps().id,
+        labelProps: getLabelProps(),
+        labelTooltip,
+        onClick: (e) => {
+          if (e.target === e.currentTarget) {
+            getInputProps()?.onClick?.(e);
+          }
+        },
+        prepend,
+        readOnly,
+        ref: refs.setReference,
+        style,
+        tabIndex: disabled || readOnly ? -1 : void 0,
+        variant,
+        after: /* @__PURE__ */ jsx(
+          DropdownList,
+          {
+            ariaLabelChosenSingular,
+            ariaLabelSelectedItem,
+            floatingStyles,
+            getItemProps,
+            getMenuProps,
+            highlightedIndex,
+            isOpen,
+            listItems,
+            style: listStyle,
+            setListRef: refs.setFloating,
+            loading: loading ?? resolvedItemsLoading,
+            loadingText,
+            noMatchesText,
+            selectedItems: selectedItem !== null ? [selectedItem] : [],
+            readOnly
+          }
+        ),
+        ...rest,
+        append: void 0,
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: classNames("eds-dropdown--searchable__selected-item", {
+                "eds-dropdown--searchable__selected-item--hidden": !showSelectedItem
+              }),
+              onClick: (event) => {
+                if (!disabled && !readOnly) {
+                  inputRef.current?.focus();
+                  getInputProps()?.onClick?.(event);
+                }
+              },
+              tabIndex: readOnly ? 0 : -1,
+              children: showSelectedItem ? selectedItem?.label : ""
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              className: classNames("eds-dropdown__input eds-form-control", {
+                "eds-dropdown__input--hidden": showSelectedItem
+              }),
+              ...getInputProps({
+                onKeyDown(e) {
+                  if (isOpen && e.key === "Tab") {
+                    const highlitedItem = listItems[highlightedIndex];
+                    if ((selectOnTab || selectOnBlur) && highlitedItem && highlitedItem !== selectedItem) {
+                      selectItem(highlitedItem);
+                    }
+                  }
+                },
+                onBlur() {
+                  if (selectedItem !== null) setShowSelectedItem(true);
+                },
+                onFocus() {
+                  if (!readOnly) {
+                    setShowSelectedItem(false);
+                  }
+                },
+                disabled,
+                readOnly,
+                placeholder: selectedItem?.label ?? placeholder,
+                tabIndex: disabled || readOnly ? -1 : void 0,
+                ref: mergeRefs(inputRef, ref)
+              })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            DropdownFieldAppendix,
+            {
+              ...getToggleButtonProps({
+                "aria-busy": !(loading ?? resolvedItemsLoading) ? void 0 : "true"
+              }),
+              ariaLabelCloseList,
+              ariaLabelOpenList,
+              clearable,
+              disabled: disabled || readOnly,
+              onClear: handleOnClear,
+              focusable: false,
+              labelClearSelected: labelClearSelectedItem,
+              isOpen,
+              itemIsSelected: selectedItem !== null,
+              loadingText,
+              loading: loading ?? resolvedItemsLoading
+            }
+          )
+        ]
       }
-    },
-    disabled: disabled,
-    readOnly: readOnly,
-    placeholder: (_selectedItem$label = selectedItem == null ? void 0 : selectedItem.label) != null ? _selectedItem$label : placeholder,
-    tabIndex: disabled || readOnly ? -1 : undefined,
-    ref: mergeRefs(inputRef, ref)
-  }))), React.createElement(DropdownFieldAppendix, _extends({}, getToggleButtonProps({
-    'aria-busy': !(loading != null ? loading : resolvedItemsLoading) ? undefined : 'true'
-  }), {
-    ariaLabelCloseList: ariaLabelCloseList,
-    ariaLabelOpenList: ariaLabelOpenList,
-    clearable: clearable,
-    disabled: disabled || readOnly,
-    onClear: handleOnClear,
-    focusable: false,
-    labelClearSelected: labelClearSelectedItem,
-    isOpen: isOpen,
-    itemIsSelected: selectedItem !== null,
-    loadingText: loadingText,
-    loading: loading != null ? loading : resolvedItemsLoading
-  })));
-});
-
-var _excluded$2 = ["className", "clearable", "clearInputOnSelect", "debounceTimeout", "disabled", "disableLabelAnimation", "feedback", "hideSelectAll", "items", "itemFilter", "label", "labelAllItemsSelected", "labelClearAllItems", "labelSelectAll", "labelTooltip", "listStyle", "loading", "loadingText", "maxChips", "noMatchesText", "onChange", "placeholder", "readOnly", "selectedItems", "selectOnBlur", "selectOnTab", "style", "variant", "ariaLabelChosenSingular", "ariaLabelChosenPlural", "ariaLabelCloseList", "ariaLabelJumpToInput", "ariaLabelOpenList", "ariaLabelRemoveSelected", "ariaLabelSelectedItem"];
-var MultiSelect = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _inputRef$current4;
-  var className = _ref.className,
-    _ref$clearable = _ref.clearable,
-    clearable = _ref$clearable === void 0 ? true : _ref$clearable,
-    _ref$clearInputOnSele = _ref.clearInputOnSelect,
-    clearInputOnSelect = _ref$clearInputOnSele === void 0 ? false : _ref$clearInputOnSele,
-    debounceTimeout = _ref.debounceTimeout,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    disableLabelAnimation = _ref.disableLabelAnimation,
-    feedback = _ref.feedback,
-    _ref$hideSelectAll = _ref.hideSelectAll,
-    hideSelectAll = _ref$hideSelectAll === void 0 ? false : _ref$hideSelectAll,
-    initialItems = _ref.items,
-    _ref$itemFilter = _ref.itemFilter,
-    itemFilter = _ref$itemFilter === void 0 ? isFunctionWithQueryArgument(initialItems) ? noFilter : lowerCaseFilterTest : _ref$itemFilter,
-    label = _ref.label,
-    _ref$labelAllItemsSel = _ref.labelAllItemsSelected,
-    labelAllItemsSelected = _ref$labelAllItemsSel === void 0 ? 'Alle valgt' : _ref$labelAllItemsSel,
-    _ref$labelClearAllIte = _ref.labelClearAllItems,
-    labelClearAllItems = _ref$labelClearAllIte === void 0 ? 'Fjern valgte' : _ref$labelClearAllIte,
-    _ref$labelSelectAll = _ref.labelSelectAll,
-    labelSelectAll = _ref$labelSelectAll === void 0 ? 'Velg alle' : _ref$labelSelectAll,
-    labelTooltip = _ref.labelTooltip,
-    listStyle = _ref.listStyle,
-    loading = _ref.loading,
-    _ref$loadingText = _ref.loadingText,
-    loadingText = _ref$loadingText === void 0 ? 'Laster resultater …' : _ref$loadingText,
-    _ref$maxChips = _ref.maxChips,
-    maxChips = _ref$maxChips === void 0 ? 10 : _ref$maxChips,
-    noMatchesText = _ref.noMatchesText,
-    _ref$onChange = _ref.onChange,
-    onChange = _ref$onChange === void 0 ? function () {
-      return undefined;
-    } : _ref$onChange,
-    placeholder = _ref.placeholder,
-    _ref$readOnly = _ref.readOnly,
-    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-    _ref$selectedItems = _ref.selectedItems,
-    selectedItems = _ref$selectedItems === void 0 ? [] : _ref$selectedItems,
-    _ref$selectOnTab = _ref.selectOnTab,
-    selectOnTab = _ref$selectOnTab === void 0 ? false : _ref$selectOnTab,
-    style = _ref.style,
-    _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'information' : _ref$variant,
-    ariaLabelChosenSingular = _ref.ariaLabelChosenSingular,
-    _ref$ariaLabelChosenP = _ref.ariaLabelChosenPlural,
-    ariaLabelChosenPlural = _ref$ariaLabelChosenP === void 0 ? 'valgte' : _ref$ariaLabelChosenP,
-    _ref$ariaLabelCloseLi = _ref.ariaLabelCloseList,
-    ariaLabelCloseList = _ref$ariaLabelCloseLi === void 0 ? 'Lukk liste med valg' : _ref$ariaLabelCloseLi,
-    _ref$ariaLabelJumpToI = _ref.ariaLabelJumpToInput,
-    ariaLabelJumpToInput = _ref$ariaLabelJumpToI === void 0 ? selectedItems.length + " valgte elementer, trykk for \xE5 hoppe til tekstfeltet" : _ref$ariaLabelJumpToI,
-    _ref$ariaLabelOpenLis = _ref.ariaLabelOpenList,
-    ariaLabelOpenList = _ref$ariaLabelOpenLis === void 0 ? 'Åpne liste med valg' : _ref$ariaLabelOpenLis,
-    _ref$ariaLabelRemoveS = _ref.ariaLabelRemoveSelected,
-    ariaLabelRemoveSelected = _ref$ariaLabelRemoveS === void 0 ? 'trykk for å fjerne valg' : _ref$ariaLabelRemoveS,
-    ariaLabelSelectedItem = _ref.ariaLabelSelectedItem,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
-  var _React$useState = React.useState(0),
-    lastHighlightedIndex = _React$useState[0],
-    setLastHighlightedIndex = _React$useState[1];
-  var inputRef = useRef(null);
-  useEffect(function () {
-    //@ts-expect-error this is done to aid developers debug wrong prop usage
-    if (rest.selectedItem !== undefined) console.warn("Incorrect 'selectedItem' prop found, did you mean to use 'selectedItems?");
-    //@ts-expect-error selectedItem should not actually exist in rest
-  }, [rest.selectedItem]);
-  var _useResolvedItems = useResolvedItems(initialItems, debounceTimeout),
-    normalizedItems = _useResolvedItems.items,
-    resolvedItemsLoading = _useResolvedItems.loading,
-    fetchItems = _useResolvedItems.fetchItems;
-  var isAllNonAsyncItemsSelected = typeof initialItems !== 'function' && selectedItems.length === normalizedItems.length;
-  // special 'item' used as Select All entry in the dropdown list
-  var selectAll = {
-    value: useRandomId('select-all'),
-    label: labelSelectAll
-  };
-  // special 'item' used as a replacement selected item tag for when
-  // there are more selected element than maxChips
-  var summarySelectedItems = React.useMemo(function () {
-    return {
-      value: EMPTY_INPUT,
-      label: isAllNonAsyncItemsSelected ? labelAllItemsSelected : selectedItems.length + ' ' + ariaLabelChosenPlural
+    );
+  }
+);
+const MultiSelect = React.forwardRef(
+  ({
+    className,
+    clearable = true,
+    clearInputOnSelect = false,
+    debounceTimeout,
+    disabled = false,
+    disableLabelAnimation,
+    feedback,
+    hideSelectAll = false,
+    items: initialItems,
+    itemFilter = isFunctionWithQueryArgument(initialItems) ? noFilter : lowerCaseFilterTest,
+    label,
+    labelAllItemsSelected = "Alle valgt",
+    labelClearAllItems = "Fjern valgte",
+    labelSelectAll = "Velg alle",
+    labelTooltip,
+    listStyle,
+    loading,
+    loadingText = "Laster resultater …",
+    maxChips = 10,
+    noMatchesText,
+    onChange = () => void 0,
+    placeholder,
+    readOnly = false,
+    selectedItems = [],
+    selectOnBlur = false,
+    selectOnTab = false,
+    style,
+    variant = "information",
+    ariaLabelChosenSingular,
+    ariaLabelChosenPlural = "valgte",
+    ariaLabelCloseList = "Lukk liste med valg",
+    ariaLabelJumpToInput = `${selectedItems.length} valgte elementer, trykk for å hoppe til tekstfeltet`,
+    ariaLabelOpenList = "Åpne liste med valg",
+    ariaLabelRemoveSelected = "trykk for å fjerne valg",
+    ariaLabelSelectedItem,
+    ...rest
+  }, ref) => {
+    const [lastHighlightedIndex, setLastHighlightedIndex] = React.useState(0);
+    const inputRef = useRef(null);
+    useEffect(() => {
+      if (rest.selectedItem !== void 0)
+        console.warn(
+          "Incorrect 'selectedItem' prop found, did you mean to use 'selectedItems?"
+        );
+    }, [rest.selectedItem]);
+    const {
+      items: normalizedItems,
+      loading: resolvedItemsLoading,
+      fetchItems
+    } = useResolvedItems(initialItems, debounceTimeout);
+    const isAllNonAsyncItemsSelected = typeof initialItems !== "function" && selectedItems.length === normalizedItems.length;
+    const selectAll = {
+      value: useRandomId("select-all"),
+      label: labelSelectAll
     };
-  }, [isAllNonAsyncItemsSelected, selectedItems, labelAllItemsSelected, ariaLabelChosenPlural]);
-  var _useState = useState([].concat(!hideSelectAll ? [selectAll] : [], normalizedItems)),
-    listItems = _useState[0],
-    setListItems = _useState[1];
-  var filterListItems = function filterListItems(_ref2) {
-    var inputValue = _ref2.inputValue;
-    return setListItems([].concat(!hideSelectAll ? [selectAll] : [], normalizedItems.filter(function (item) {
-      return itemFilter(item, inputValue);
-    })));
-  };
-  var updateListItems = function updateListItems(_ref3) {
-    var inputValue = _ref3.inputValue;
-    var shouldRefetchItems = isFunctionWithQueryArgument(initialItems);
-    if (shouldRefetchItems) fetchItems(inputValue != null ? inputValue : EMPTY_INPUT);
-    filterListItems({
-      inputValue: inputValue != null ? inputValue : EMPTY_INPUT
-    });
-  };
-  React.useEffect(function () {
-    filterListItems({
-      inputValue: inputValue
+    const summarySelectedItems = React.useMemo(
+      () => ({
+        value: EMPTY_INPUT,
+        label: isAllNonAsyncItemsSelected ? labelAllItemsSelected : selectedItems.length + " " + ariaLabelChosenPlural
+      }),
+      [
+        isAllNonAsyncItemsSelected,
+        selectedItems,
+        labelAllItemsSelected,
+        ariaLabelChosenPlural
+      ]
+    );
+    const [listItems, setListItems] = useState([
+      ...!hideSelectAll ? [selectAll] : [],
+      ...normalizedItems
+    ]);
+    const filterListItems = ({ inputValue: inputValue2 }) => setListItems([
+      ...!hideSelectAll ? [selectAll] : [],
+      ...normalizedItems.filter((item) => itemFilter(item, inputValue2))
+    ]);
+    const updateListItems = ({ inputValue: inputValue2 }) => {
+      const shouldRefetchItems = isFunctionWithQueryArgument(initialItems);
+      if (shouldRefetchItems) fetchItems(inputValue2 ?? EMPTY_INPUT);
+      filterListItems({ inputValue: inputValue2 ?? EMPTY_INPUT });
+    };
+    React.useEffect(() => {
+      filterListItems({ inputValue });
+    }, [normalizedItems]);
+    const {
+      hasSelectedItems,
+      handleListItemClicked,
+      selectAllCheckboxState,
+      clickedItemIsInSelectedItems,
+      clickedItemIsSelectAll
+    } = useMultiselectUtils({
+      listItems,
+      selectAll,
+      selectedItems
     });
-  }, [normalizedItems]); // eslint-disable-line react-hooks/exhaustive-deps
-  var _useMultiselectUtils = useMultiselectUtils({
-      listItems: listItems,
-      selectAll: selectAll,
-      selectedItems: selectedItems
-    }),
-    hasSelectedItems = _useMultiselectUtils.hasSelectedItems,
-    handleListItemClicked = _useMultiselectUtils.handleListItemClicked,
-    selectAllCheckboxState = _useMultiselectUtils.selectAllCheckboxState,
-    clickedItemIsInSelectedItems = _useMultiselectUtils.clickedItemIsInSelectedItems,
-    clickedItemIsSelectAll = _useMultiselectUtils.clickedItemIsSelectAll;
-  var _useMultipleSelection = useMultipleSelection({
-      selectedItems: selectedItems,
+    const {
+      getSelectedItemProps,
+      getDropdownProps,
+      reset,
+      removeSelectedItem,
+      setSelectedItems
+    } = useMultipleSelection({
+      selectedItems,
       // @ts-expect-error prop missing from library types
-      itemToString: itemToString,
-      itemToKey: itemToKey,
-      onSelectedItemsChange: function onSelectedItemsChange(_ref4) {
-        var newSelectedItems = _ref4.selectedItems;
+      itemToString,
+      itemToKey,
+      onSelectedItemsChange({ selectedItems: newSelectedItems }) {
         onChange(newSelectedItems);
       }
-    }),
-    getSelectedItemProps = _useMultipleSelection.getSelectedItemProps,
-    getDropdownProps = _useMultipleSelection.getDropdownProps,
-    reset = _useMultipleSelection.reset,
-    _removeSelectedItem = _useMultipleSelection.removeSelectedItem,
-    setSelectedItems = _useMultipleSelection.setSelectedItems;
-  var stateReducer = React.useCallback(function (state, _ref5) {
-    var changes = _ref5.changes,
-      type = _ref5.type;
-    if (changes.highlightedIndex !== undefined && (changes == null ? void 0 : changes.highlightedIndex) >= 0) {
-      setLastHighlightedIndex(changes == null ? void 0 : changes.highlightedIndex);
-    }
-    switch (type) {
-      // reset input value when leaving input field
-      case useCombobox.stateChangeTypes.InputBlur:
-        return _extends({}, changes, {
-          inputValue: EMPTY_INPUT
-        });
-      // keep menu open and edit input value on item selection
-      case useCombobox.stateChangeTypes.InputKeyDownEnter:
-      case useCombobox.stateChangeTypes.ItemClick:
-        {
-          var _inputRef$current$val, _inputRef$current;
-          return _extends({}, changes, {
-            isOpen: true,
-            inputValue: clearInputOnSelect ? EMPTY_INPUT : (_inputRef$current$val = inputRef == null || (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.value) != null ? _inputRef$current$val : EMPTY_INPUT
-          });
-        }
-      // edit input value when selected items is updated outside component
-      case useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:
-        {
-          var _inputRef$current$val2, _inputRef$current2;
-          return _extends({}, changes, {
-            inputValue: (_inputRef$current$val2 = inputRef == null || (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.value) != null ? _inputRef$current$val2 : EMPTY_INPUT
-          });
+    });
+    const stateReducer = React.useCallback(
+      (state, {
+        changes,
+        type
+      }) => {
+        if (changes.highlightedIndex !== void 0 && changes?.highlightedIndex >= 0) {
+          setLastHighlightedIndex(changes?.highlightedIndex);
         }
-      // remove leading whitespace, select item with spacebar if input is empty and filter list items
-      case useCombobox.stateChangeTypes.InputChange:
-        {
-          var _changes$inputValue;
-          var leadingWhitespaceTest = /^\s+/g;
-          var isSpacePressedOnEmptyInput = changes.inputValue === ' ';
-          if ((_changes$inputValue = changes.inputValue) != null && _changes$inputValue.match(leadingWhitespaceTest)) {
-            var sanitizedInputValue = changes.inputValue.replace(leadingWhitespaceTest, EMPTY_INPUT);
-            if (isSpacePressedOnEmptyInput) {
-              if (!state.isOpen) return _extends({}, changes, {
-                inputValue: sanitizedInputValue,
-                isOpen: true
-              });
-              if (changes.highlightedIndex !== undefined) {
-                return _extends({}, changes, {
-                  inputValue: sanitizedInputValue,
-                  selectedItem: listItems[changes.highlightedIndex]
-                });
+        switch (type) {
+          // reset input value when leaving input field
+          case useCombobox.stateChangeTypes.InputBlur:
+            return {
+              ...changes,
+              inputValue: EMPTY_INPUT
+            };
+          // keep menu open and edit input value on item selection
+          case useCombobox.stateChangeTypes.InputKeyDownEnter:
+          case useCombobox.stateChangeTypes.ItemClick: {
+            return {
+              ...changes,
+              isOpen: true,
+              inputValue: clearInputOnSelect ? EMPTY_INPUT : inputRef?.current?.value ?? EMPTY_INPUT
+            };
+          }
+          // edit input value when selected items is updated outside component
+          case useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem: {
+            return {
+              ...changes,
+              inputValue: inputRef?.current?.value ?? EMPTY_INPUT
+            };
+          }
+          // remove leading whitespace, select item with spacebar if input is empty and filter list items
+          case useCombobox.stateChangeTypes.InputChange: {
+            const leadingWhitespaceTest = /^\s+/g;
+            const isSpacePressedOnEmptyInput = changes.inputValue === " ";
+            if (changes.inputValue?.match(leadingWhitespaceTest)) {
+              const sanitizedInputValue = changes.inputValue.replace(
+                leadingWhitespaceTest,
+                EMPTY_INPUT
+              );
+              if (isSpacePressedOnEmptyInput) {
+                if (!state.isOpen)
+                  return {
+                    ...changes,
+                    inputValue: sanitizedInputValue,
+                    isOpen: true
+                  };
+                if (changes.highlightedIndex !== void 0) {
+                  return {
+                    ...changes,
+                    inputValue: sanitizedInputValue,
+                    selectedItem: listItems[changes.highlightedIndex]
+                  };
+                }
               }
             }
+            return changes;
           }
-          return changes;
+          default:
+            return changes;
         }
-      default:
-        return changes;
-    }
-  }, [hideSelectAll, normalizedItems, filterListItems, initialItems]);
-  var _useCombobox = useCombobox(_extends({
+      },
+      [hideSelectAll, normalizedItems, filterListItems, initialItems]
+    );
+    const {
+      getInputProps,
+      getItemProps,
+      getLabelProps,
+      getMenuProps,
+      getToggleButtonProps,
+      highlightedIndex,
+      setHighlightedIndex,
+      inputValue,
+      isOpen,
+      setInputValue
+    } = useCombobox({
       defaultHighlightedIndex: lastHighlightedIndex,
       // after selection, highlight previously selected item.
       items: listItems,
-      itemToString: itemToString,
+      itemToString,
       selectedItem: null,
-      stateReducer: stateReducer,
-      onInputValueChange: function onInputValueChange(changes) {
-        updateListItems({
-          inputValue: changes.inputValue
-        });
-        // set highlighted item to first item after search
+      stateReducer,
+      onInputValueChange(changes) {
+        updateListItems({ inputValue: changes.inputValue });
         setHighlightedIndex(hideSelectAll ? 0 : 1);
         setLastHighlightedIndex(hideSelectAll ? 0 : 1);
       },
-      onSelectedItemChange: function onSelectedItemChange(_ref6) {
-        var clickedItem = _ref6.selectedItem;
-        // clickedItem means item chosen either via mouse or keyboard
+      onSelectedItemChange({ selectedItem: clickedItem }) {
         if (!clickedItem) return;
         handleListItemClicked({
-          clickedItem: clickedItem,
+          clickedItem,
           onChange: setSelectedItems
         });
       },
       // Accessibility
-      getA11yStatusMessage: function getA11yStatusMessage$1(options) {
-        return getA11yStatusMessage(_extends({}, options, {
-          selectAllItemIncluded: !hideSelectAll,
-          resultCount: listItems.length
-        }));
-      }
-    }, rest)),
-    getInputProps = _useCombobox.getInputProps,
-    getItemProps = _useCombobox.getItemProps,
-    getLabelProps = _useCombobox.getLabelProps,
-    getMenuProps = _useCombobox.getMenuProps,
-    getToggleButtonProps = _useCombobox.getToggleButtonProps,
-    highlightedIndex = _useCombobox.highlightedIndex,
-    setHighlightedIndex = _useCombobox.setHighlightedIndex,
-    inputValue = _useCombobox.inputValue,
-    isOpen = _useCombobox.isOpen,
-    setInputValue = _useCombobox.setInputValue;
-  // calculations for floating-UI popover position
-  var _useFloating = useFloating({
+      getA11yStatusMessage: (options) => getA11yStatusMessage({
+        ...options,
+        selectAllItemIncluded: !hideSelectAll,
+        resultCount: listItems.length
+      }),
+      ...rest
+    });
+    const { refs, floatingStyles, update } = useFloating({
       open: isOpen,
-      placement: 'bottom-start',
-      middleware: [offset(space.extraSmall2), shift({
-        padding: space.extraSmall
-      }), size({
-        apply: function apply(_ref7) {
-          var rects = _ref7.rects,
-            elements = _ref7.elements,
-            availableHeight = _ref7.availableHeight;
-          Object.assign(elements.floating.style, {
-            width: rects.reference.width + "px",
-            // Floating will flip when smaller than 10*16 px
-            // and never exceed 20*16 px.
-            maxHeight: clamp(10 * 16, availableHeight, 20 * 16) + "px"
-          });
-        }
-      }), flip({
-        fallbackStrategy: 'initialPlacement'
-      })]
-    }),
-    refs = _useFloating.refs,
-    floatingStyles = _useFloating.floatingStyles,
-    update = _useFloating.update;
-  // Update floating-ui position on scroll etc. Floating-ui's autoupdate is usually used inside
-  // the useFloating hook but this requires the floating element to be conditionally rendered.
-  // Downshift doesn't work correctly when conditionally rendered since props and refs aren't correctly
-  // spread to the component. We therefor use this useEffect to update position. See https://floating-ui.com/docs/autoupdate#usage
-  useEffect(function () {
-    if (isOpen && refs.reference.current && refs.floating.current) {
-      return autoUpdate(refs.reference.current, refs.floating.current, update);
-    }
-  }, [isOpen, refs.reference, refs.floating, update]);
-  var handleOnClear = function handleOnClear() {
-    var _inputRef$current3;
-    (_inputRef$current3 = inputRef.current) == null || _inputRef$current3.focus();
-    reset();
-  };
-  return React.createElement(BaseFormControl, _extends({
-    className: classNames('eds-dropdown', 'eds-dropdown--multiselect', className, {
-      'eds-dropdown--has-tooltip': labelTooltip !== undefined
-    }),
-    disabled: disabled,
-    disableLabelAnimation: disableLabelAnimation,
-    feedback: feedback,
-    isFilled: hasSelectedItems || inputValue !== EMPTY_INPUT,
-    label: label,
-    labelId: getLabelProps().id,
-    labelProps: getLabelProps(),
-    labelTooltip: labelTooltip,
-    onBlur: function onBlur() {
-      return setInputValue('');
-    },
-    onClick: function onClick(e) {
-      if (e.target === e.currentTarget) {
-        var _getInputProps;
-        (_getInputProps = getInputProps()) == null || _getInputProps.onClick == null || _getInputProps.onClick(e);
-      }
-    },
-    readOnly: readOnly,
-    ref: refs.setReference,
-    style: style,
-    variant: variant,
-    after: React.createElement(DropdownList, {
-      ariaLabelChosenSingular: ariaLabelChosenSingular,
-      ariaLabelSelectedItem: ariaLabelSelectedItem,
-      floatingStyles: floatingStyles,
-      getItemProps: getItemProps,
-      getMenuProps: getMenuProps,
-      highlightedIndex: highlightedIndex,
-      isOpen: isOpen,
-      listItems: listItems,
-      style: listStyle,
-      setListRef: refs.setFloating,
-      loading: loading != null ? loading : resolvedItemsLoading,
-      loadingText: loadingText,
-      noMatchesText: noMatchesText,
-      selectAllCheckboxState: selectAllCheckboxState,
-      selectAllItem: selectAll,
-      selectedItems: selectedItems,
-      readOnly: readOnly
-    })
-  }, rest), React.createElement("div", {
-    className: classNames('eds-dropdown--multiselect__selected-items-and-input', {
-      'eds-dropdown--multiselect__selected-items-and-input--filled': hasSelectedItems
-    })
-  }, selectedItems.length > 1 ? React.createElement(VisuallyHidden, {
-    onClick: (_inputRef$current4 = inputRef.current) == null ? void 0 : _inputRef$current4.focus
-  }, ariaLabelJumpToInput) : null, selectedItems.length <= maxChips ? selectedItems.map(function (selectedItem, index) {
-    return React.createElement(SelectedItemTag, {
-      ariaLabelChosen: ariaLabelChosenSingular,
-      ariaLabelRemoveSelected: ariaLabelRemoveSelected,
-      disabled: disabled,
-      getSelectedItemProps: getSelectedItemProps,
-      index: index,
-      key: (selectedItem == null ? void 0 : selectedItem.label) + (typeof (selectedItem == null ? void 0 : selectedItem.value) === 'string' ? selectedItem.value : ''),
-      readOnly: readOnly,
-      removeSelectedItem: function removeSelectedItem() {
-        var _inputRef$current5;
-        _removeSelectedItem(selectedItem);
-        inputRef == null || (_inputRef$current5 = inputRef.current) == null || _inputRef$current5.focus();
-      },
-      selectedItem: selectedItem
+      placement: "bottom-start",
+      middleware: [
+        offset(space.extraSmall2),
+        shift({ padding: space.extraSmall }),
+        size({
+          apply({ rects, elements, availableHeight }) {
+            Object.assign(elements.floating.style, {
+              width: `${rects.reference.width}px`,
+              // Floating will flip when smaller than 10*16 px
+              // and never exceed 20*16 px.
+              maxHeight: `${clamp(10 * 16, availableHeight, 20 * 16)}px`
+            });
+          }
+        }),
+        flip({ fallbackStrategy: "initialPlacement" })
+      ]
     });
-  }) : React.createElement(SelectedItemTag, {
-    ariaLabelRemoveSelected: labelClearAllItems,
-    ariaLabelChosen: "",
-    disabled: disabled,
-    readOnly: readOnly,
-    removeSelectedItem: handleOnClear,
-    selectedItem: summarySelectedItems
-  }), React.createElement("input", _extends({}, getInputProps(_extends({
-    onKeyDown: function onKeyDown(e) {
-      if (selectOnTab && isOpen && e.key === 'Tab') {
-        var highlitedItem = listItems[highlightedIndex];
-        if (!highlitedItem) return;
-        // Skip tab selection for select all or if item already is selected
-        var shouldSkipTabSelection = clickedItemIsSelectAll(highlitedItem) || !clickedItemIsSelectAll(highlitedItem) && clickedItemIsInSelectedItems(highlitedItem);
-        if (shouldSkipTabSelection) return;
-        handleListItemClicked({
-          clickedItem: highlitedItem,
-          onChange: setSelectedItems
-        });
+    useEffect(() => {
+      if (isOpen && refs.reference.current && refs.floating.current) {
+        return autoUpdate(
+          refs.reference.current,
+          refs.floating.current,
+          update
+        );
       }
-    }
-  }, getDropdownProps({
-    preventKeyAction: isOpen,
-    value: inputValue != null ? inputValue : EMPTY_INPUT,
-    ref: mergeRefs(inputRef, ref)
-  }), {
-    className: 'eds-dropdown__input eds-form-control',
-    disabled: readOnly || disabled,
-    placeholder: placeholder,
-    tabIndex: disabled || readOnly ? -1 : undefined
-  }))))), React.createElement(DropdownFieldAppendix, _extends({}, getToggleButtonProps({
-    'aria-busy': !(loading != null ? loading : resolvedItemsLoading) ? undefined : 'true'
-  }), {
-    ariaLabelCloseList: ariaLabelCloseList,
-    ariaLabelOpenList: ariaLabelOpenList,
-    clearable: clearable,
-    disabled: disabled || readOnly,
-    onClear: handleOnClear,
-    focusable: false,
-    labelClearSelected: labelClearAllItems,
-    isOpen: isOpen,
-    itemIsSelected: selectedItems.length > 0,
-    loadingText: loadingText,
-    loading: loading != null ? loading : resolvedItemsLoading
-  })));
-});
-
-var _excluded$1 = ["ariaLabelChosenSingular", "ariaLabelCloseList", "ariaLabelOpenList", "ariaLabelSelectedItem", "className", "clearable", "disabled", "disableLabelAnimation", "feedback", "items", "label", "labelClearSelectedItem", "labelTooltip", "listStyle", "loading", "loadingText", "noMatchesText", "onChange", "placeholder", "prepend", "readOnly", "selectedItem", "selectOnBlur", "selectOnTab", "style", "variant"];
-var Dropdown = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _getLabelProps, _selectedItem$label;
-  var ariaLabelChosenSingular = _ref.ariaLabelChosenSingular,
-    _ref$ariaLabelCloseLi = _ref.ariaLabelCloseList,
-    ariaLabelCloseList = _ref$ariaLabelCloseLi === void 0 ? 'Lukk liste med valg' : _ref$ariaLabelCloseLi,
-    _ref$ariaLabelOpenLis = _ref.ariaLabelOpenList,
-    ariaLabelOpenList = _ref$ariaLabelOpenLis === void 0 ? 'Åpne liste med valg' : _ref$ariaLabelOpenLis,
-    ariaLabelSelectedItem = _ref.ariaLabelSelectedItem,
-    className = _ref.className,
-    _ref$clearable = _ref.clearable,
-    clearable = _ref$clearable === void 0 ? false : _ref$clearable,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    disableLabelAnimation = _ref.disableLabelAnimation,
-    feedback = _ref.feedback,
-    initialItems = _ref.items,
-    label = _ref.label,
-    _ref$labelClearSelect = _ref.labelClearSelectedItem,
-    labelClearSelectedItem = _ref$labelClearSelect === void 0 ? 'fjern valgt' : _ref$labelClearSelect,
-    labelTooltip = _ref.labelTooltip,
-    listStyle = _ref.listStyle,
-    loading = _ref.loading,
-    _ref$loadingText = _ref.loadingText,
-    loadingText = _ref$loadingText === void 0 ? 'Laster resultater …' : _ref$loadingText,
-    _ref$noMatchesText = _ref.noMatchesText,
-    noMatchesText = _ref$noMatchesText === void 0 ? 'Ingen tilgjengelige valg …' : _ref$noMatchesText,
-    onChange = _ref.onChange,
-    placeholder = _ref.placeholder,
-    prepend = _ref.prepend,
-    _ref$readOnly = _ref.readOnly,
-    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-    selectedItem = _ref.selectedItem,
-    _ref$selectOnBlur = _ref.selectOnBlur,
-    selectOnBlur = _ref$selectOnBlur === void 0 ? false : _ref$selectOnBlur,
-    _ref$selectOnTab = _ref.selectOnTab,
-    selectOnTab = _ref$selectOnTab === void 0 ? false : _ref$selectOnTab,
-    style = _ref.style,
-    _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'information' : _ref$variant,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-  var _useResolvedItems = useResolvedItems(initialItems),
-    normalizedItems = _useResolvedItems.items,
-    resolvedItemsLoading = _useResolvedItems.loading;
-  var isFilled = selectedItem !== null || placeholder !== undefined;
-  var _useSelect = useSelect({
+    }, [isOpen, refs.reference, refs.floating, update]);
+    const handleOnClear = () => {
+      inputRef.current?.focus();
+      reset();
+    };
+    return /* @__PURE__ */ jsxs(
+      BaseFormControl,
+      {
+        className: classNames(
+          "eds-dropdown",
+          "eds-dropdown--multiselect",
+          className,
+          { "eds-dropdown--has-tooltip": labelTooltip !== void 0 }
+        ),
+        disabled,
+        disableLabelAnimation,
+        feedback,
+        isFilled: hasSelectedItems || inputValue !== EMPTY_INPUT,
+        label,
+        labelId: getLabelProps().id,
+        labelProps: getLabelProps(),
+        labelTooltip,
+        onBlur: () => setInputValue(""),
+        onClick: (e) => {
+          if (e.target === e.currentTarget) {
+            getInputProps()?.onClick?.(e);
+          }
+        },
+        readOnly,
+        ref: refs.setReference,
+        style,
+        variant,
+        after: /* @__PURE__ */ jsx(
+          DropdownList,
+          {
+            ariaLabelChosenSingular,
+            ariaLabelSelectedItem,
+            floatingStyles,
+            getItemProps,
+            getMenuProps,
+            highlightedIndex,
+            isOpen,
+            listItems,
+            style: listStyle,
+            setListRef: refs.setFloating,
+            loading: loading ?? resolvedItemsLoading,
+            loadingText,
+            noMatchesText,
+            selectAllCheckboxState,
+            selectAllItem: selectAll,
+            selectedItems,
+            readOnly
+          }
+        ),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: classNames(
+                "eds-dropdown--multiselect__selected-items-and-input",
+                {
+                  "eds-dropdown--multiselect__selected-items-and-input--filled": hasSelectedItems
+                }
+              ),
+              children: [
+                selectedItems.length > 1 ? /* @__PURE__ */ jsx(VisuallyHidden, { onClick: inputRef.current?.focus, children: ariaLabelJumpToInput }) : null,
+                selectedItems.length <= maxChips ? selectedItems.map((selectedItem, index) => /* @__PURE__ */ jsx(
+                  SelectedItemTag,
+                  {
+                    ariaLabelChosen: ariaLabelChosenSingular,
+                    ariaLabelRemoveSelected,
+                    disabled,
+                    getSelectedItemProps,
+                    index,
+                    readOnly,
+                    removeSelectedItem: () => {
+                      removeSelectedItem(selectedItem);
+                      inputRef?.current?.focus();
+                    },
+                    selectedItem
+                  },
+                  selectedItem?.label + (typeof selectedItem?.value === "string" ? selectedItem.value : "")
+                )) : /* @__PURE__ */ jsx(
+                  SelectedItemTag,
+                  {
+                    ariaLabelRemoveSelected: labelClearAllItems,
+                    ariaLabelChosen: "",
+                    disabled,
+                    readOnly,
+                    removeSelectedItem: handleOnClear,
+                    selectedItem: summarySelectedItems
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ...getInputProps({
+                      onKeyDown: (e) => {
+                        if (selectOnTab && isOpen && e.key === "Tab") {
+                          const highlitedItem = listItems[highlightedIndex];
+                          if (!highlitedItem) return;
+                          const shouldSkipTabSelection = clickedItemIsSelectAll(highlitedItem) || !clickedItemIsSelectAll(highlitedItem) && clickedItemIsInSelectedItems(highlitedItem);
+                          if (shouldSkipTabSelection) return;
+                          handleListItemClicked({
+                            clickedItem: highlitedItem,
+                            onChange: setSelectedItems
+                          });
+                        }
+                      },
+                      ...getDropdownProps({
+                        preventKeyAction: isOpen,
+                        value: inputValue ?? EMPTY_INPUT,
+                        ref: mergeRefs(inputRef, ref)
+                      }),
+                      className: "eds-dropdown__input eds-form-control",
+                      disabled: readOnly || disabled,
+                      placeholder,
+                      tabIndex: disabled || readOnly ? -1 : void 0
+                    })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            DropdownFieldAppendix,
+            {
+              ...getToggleButtonProps({
+                "aria-busy": !(loading ?? resolvedItemsLoading) ? void 0 : "true"
+              }),
+              ariaLabelCloseList,
+              ariaLabelOpenList,
+              clearable,
+              disabled: disabled || readOnly,
+              onClear: handleOnClear,
+              focusable: false,
+              labelClearSelected: labelClearAllItems,
+              isOpen,
+              itemIsSelected: selectedItems.length > 0,
+              loadingText,
+              loading: loading ?? resolvedItemsLoading
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+const Dropdown = React.forwardRef(
+  ({
+    ariaLabelChosenSingular,
+    ariaLabelCloseList = "Lukk liste med valg",
+    ariaLabelOpenList = "Åpne liste med valg",
+    ariaLabelSelectedItem,
+    className,
+    clearable = false,
+    disabled = false,
+    disableLabelAnimation,
+    feedback,
+    items: initialItems,
+    label,
+    labelClearSelectedItem = "fjern valgt",
+    labelTooltip,
+    listStyle,
+    loading,
+    loadingText = "Laster resultater …",
+    noMatchesText = "Ingen tilgjengelige valg …",
+    onChange,
+    placeholder,
+    prepend,
+    readOnly = false,
+    selectedItem,
+    selectOnBlur = false,
+    selectOnTab = false,
+    style,
+    variant = "information",
+    ...rest
+  }, ref) => {
+    const { items: normalizedItems, loading: resolvedItemsLoading } = useResolvedItems(initialItems);
+    const isFilled = selectedItem !== null || placeholder !== void 0;
+    const {
+      isOpen,
+      getItemProps,
+      getLabelProps,
+      getMenuProps,
+      getToggleButtonProps,
+      highlightedIndex,
+      selectItem,
+      reset
+    } = useSelect({
       items: normalizedItems,
-      defaultHighlightedIndex: selectedItem ? undefined : 0,
-      selectedItem: selectedItem,
-      stateReducer: function stateReducer(_, _ref2) {
-        var changes = _ref2.changes,
-          type = _ref2.type;
-        var toggleButtonIsFocused = typeof document !== 'undefined' && document.activeElement === refs.reference.current;
+      defaultHighlightedIndex: selectedItem ? void 0 : 0,
+      selectedItem,
+      stateReducer(_, { changes, type }) {
+        const toggleButtonIsFocused = typeof document !== "undefined" && document.activeElement === refs.reference.current;
         switch (type) {
           case useSelect.stateChangeTypes.ToggleButtonKeyDownArrowDown:
           case useSelect.stateChangeTypes.ToggleButtonKeyDownArrowUp:
-            if (!toggleButtonIsFocused) return _extends({}, changes, {
-              isOpen: false
-            });
+            if (!toggleButtonIsFocused) return { ...changes, isOpen: false };
         }
         return changes;
       },
-      onStateChange: function onStateChange(_ref3) {
-        var type = _ref3.type,
-          newSelectedItem = _ref3.selectedItem;
+      onStateChange({ type, selectedItem: newSelectedItem }) {
         switch (type) {
           case useSelect.stateChangeTypes.ToggleButtonBlur:
             if (!selectOnBlur) return;
         }
-        if (newSelectedItem === undefined) return;
-        onChange == null || onChange(newSelectedItem != null ? newSelectedItem : null);
+        if (newSelectedItem === void 0) return;
+        onChange?.(newSelectedItem ?? null);
       },
-      itemToString: itemToString
-    }),
-    isOpen = _useSelect.isOpen,
-    getItemProps = _useSelect.getItemProps,
-    getLabelProps = _useSelect.getLabelProps,
-    getMenuProps = _useSelect.getMenuProps,
-    getToggleButtonProps = _useSelect.getToggleButtonProps,
-    highlightedIndex = _useSelect.highlightedIndex,
-    selectItem = _useSelect.selectItem,
-    reset = _useSelect.reset;
-  // calculations for floating-UI popover position
-  var _useFloating = useFloating({
+      itemToString
+    });
+    const { refs, floatingStyles, update } = useFloating({
       open: isOpen,
-      placement: 'bottom-start',
-      middleware: [offset(space.extraSmall2), shift({
-        padding: space.extraSmall
-      }), size({
-        apply: function apply(_ref4) {
-          var rects = _ref4.rects,
-            elements = _ref4.elements,
-            availableHeight = _ref4.availableHeight;
-          Object.assign(elements.floating.style, {
-            width: rects.reference.width + "px",
-            // Floating will flip when smaller than 10*16 px
-            // and never exceed 20*16 px.
-            maxHeight: clamp(10 * 16, availableHeight, 20 * 16) + "px"
-          });
-        }
-      }), flip({
-        fallbackStrategy: 'initialPlacement'
-      })]
-    }),
-    refs = _useFloating.refs,
-    floatingStyles = _useFloating.floatingStyles,
-    update = _useFloating.update;
-  // Update floating-ui position on scroll etc. Floating-ui's autoupdate is usually used inside
-  // the useFloating hook but this requires the floating element to be conditionally rendered.
-  // Downshift doesn't work correctly when conditionally rendered since props and refs aren't correctly
-  // spread to the component. We therefor use this useEffect to update position. See https://floating-ui.com/docs/autoupdate#usage
-  useEffect(function () {
-    if (isOpen && refs.reference.current && refs.floating.current) {
-      return autoUpdate(refs.reference.current, refs.floating.current, update);
-    }
-  }, [isOpen, refs.reference, refs.floating, update]);
-  var handleOnClear = function handleOnClear() {
-    var _refs$reference$curre;
-    reset();
-    (_refs$reference$curre = refs.reference.current) == null || _refs$reference$curre.focus();
-  };
-  return React.createElement(BaseFormControl, _extends({
-    className: classNames('eds-dropdown', className, {
-      'eds-dropdown--has-tooltip': labelTooltip !== undefined
-    }),
-    disableLabelAnimation: disableLabelAnimation,
-    feedback: feedback,
-    isFilled: isFilled,
-    labelProps: getLabelProps(),
-    labelTooltip: labelTooltip,
-    prepend: prepend,
-    style: style,
-    variant: variant
-  }, getToggleButtonProps({
-    ref: mergeRefs(ref, refs.setReference),
-    'aria-disabled': disabled,
-    'aria-label': disabled ? 'Disabled dropdown' : '',
-    disabled: disabled,
-    readOnly: readOnly,
-    label: label,
-    labelId: (_getLabelProps = getLabelProps()) == null ? void 0 : _getLabelProps.id,
-    children: undefined,
-    tabIndex: disabled || readOnly ? -1 : 0,
-    onKeyDown: function onKeyDown(e) {
-      if (isOpen && e.key === 'Tab') {
-        var highlitedItem = normalizedItems[highlightedIndex];
-        // we don't want to clear selection with tab
-        if ((selectOnTab || selectOnBlur) && highlitedItem && highlitedItem !== selectedItem) {
-          selectItem(highlitedItem);
-        }
+      placement: "bottom-start",
+      middleware: [
+        offset(space.extraSmall2),
+        shift({ padding: space.extraSmall }),
+        size({
+          apply({ rects, elements, availableHeight }) {
+            Object.assign(elements.floating.style, {
+              width: `${rects.reference.width}px`,
+              // Floating will flip when smaller than 10*16 px
+              // and never exceed 20*16 px.
+              maxHeight: `${clamp(10 * 16, availableHeight, 20 * 16)}px`
+            });
+          }
+        }),
+        flip({ fallbackStrategy: "initialPlacement" })
+      ]
+    });
+    useEffect(() => {
+      if (isOpen && refs.reference.current && refs.floating.current) {
+        return autoUpdate(
+          refs.reference.current,
+          refs.floating.current,
+          update
+        );
       }
-    }
-  }), {
-    after: React.createElement(DropdownList, {
-      ariaLabelChosenSingular: ariaLabelChosenSingular,
-      ariaLabelSelectedItem: ariaLabelSelectedItem,
-      floatingStyles: floatingStyles,
-      getItemProps: getItemProps,
-      getMenuProps: getMenuProps,
-      highlightedIndex: highlightedIndex,
-      isOpen: isOpen,
-      listItems: normalizedItems,
-      noMatchesText: noMatchesText,
-      style: listStyle,
-      setListRef: refs.setFloating,
-      loading: loading != null ? loading : resolvedItemsLoading,
-      loadingText: loadingText,
-      selectedItems: selectedItem !== null ? [selectedItem] : [],
-      readOnly: readOnly
-    })
-  }, rest, {
-    // Append is not supported as of now
-    append: undefined
-  }), React.createElement("div", {
-    className: "eds-dropdown__selected-item"
-  }, (_selectedItem$label = selectedItem == null ? void 0 : selectedItem.label) != null ? _selectedItem$label : React.createElement("div", {
-    className: classNames('eds-dropdown__selected-item__placeholder', {
-      'eds-dropdown__selected-item__placeholder--readonly': readOnly
-    })
-  }, placeholder)), React.createElement(DropdownFieldAppendix, {
-    "aria-busy": !(loading != null ? loading : resolvedItemsLoading) ? undefined : 'true',
-    "aria-expanded": isOpen,
-    clearable: clearable,
-    onClear: handleOnClear,
-    disabled: disabled || readOnly,
-    focusable: false,
-    labelClearSelected: labelClearSelectedItem,
-    isOpen: isOpen,
-    itemIsSelected: selectedItem !== null,
-    ariaLabelCloseList: ariaLabelCloseList,
-    ariaLabelOpenList: ariaLabelOpenList,
-    loading: false,
-    loadingText: undefined
-  }));
-});
-
-var _excluded = ["className", "disabled", "disableLabelAnimation", "feedback", "items", "label", "loadingText", "onChange", "prepend", "readOnly", "selectedItem", "style", "value", "variant"];
-/** @deprecated use variant="negative" instead */
-var error = 'error';
-var NativeDropdown = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var _ref2;
-  var className = _ref.className,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    disableLabelAnimation = _ref.disableLabelAnimation,
-    feedback = _ref.feedback,
-    items = _ref.items,
-    label = _ref.label,
-    loadingText = _ref.loadingText,
-    _onChange = _ref.onChange,
-    prepend = _ref.prepend,
-    _ref$readOnly = _ref.readOnly,
-    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-    selectedItem = _ref.selectedItem,
-    style = _ref.style,
-    value = _ref.value,
-    variant = _ref.variant,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var _useResolvedItems = useResolvedItems(items),
-    normalizedItems = _useResolvedItems.items,
-    loading = _useResolvedItems.loading;
-  var nativeDropdownId = useRandomId('eds-dropdown-native');
-  return React.createElement(BaseFormControl, {
-    disabled: disabled,
-    readOnly: readOnly,
-    prepend: prepend,
-    append: React.createElement(FieldAppend, {
-      hidden: disabled || readOnly,
-      loading: loading,
-      loadingText: loadingText
-    }),
-    className: className,
-    style: style,
-    label: label,
-    labelId: nativeDropdownId,
-    variant: variant,
-    feedback: feedback,
-    disableLabelAnimation: disableLabelAnimation,
-    isFilled: true
-  }, React.createElement("select", _extends({
-    "aria-invalid": variant === 'negative' || variant === error,
-    "aria-labelledby": nativeDropdownId,
-    "aria-busy": loading,
-    className: "eds-form-control eds-dropdown--native",
-    disabled: disabled || readOnly,
-    onChange: function onChange(event) {
-      var _normalizedItems$find;
-      _onChange == null || _onChange({
-        value: event.target.value,
-        selectedItem: (_normalizedItems$find = normalizedItems.find(function (item) {
-          return item.value === event.target.value;
-        })) != null ? _normalizedItems$find : null,
-        target: event.target
-      });
-    },
-    value: (_ref2 = value != null ? value : selectedItem == null ? void 0 : selectedItem.value) != null ? _ref2 : undefined,
-    ref: ref
-  }, rest), normalizedItems.map(function (item) {
-    return React.createElement("option", {
-      key: item.value,
-      value: item.value
-    }, item.label);
-  })));
-});
-var FieldAppend = function FieldAppend(_ref3) {
-  var loading = _ref3.loading,
-    loadingText = _ref3.loadingText,
-    hidden = _ref3.hidden;
+    }, [isOpen, refs.reference, refs.floating, update]);
+    const handleOnClear = () => {
+      reset();
+      refs.reference.current?.focus();
+    };
+    return /* @__PURE__ */ jsxs(
+      BaseFormControl,
+      {
+        className: classNames("eds-dropdown", className, {
+          "eds-dropdown--has-tooltip": labelTooltip !== void 0
+        }),
+        disableLabelAnimation,
+        feedback,
+        isFilled,
+        labelProps: getLabelProps(),
+        labelTooltip,
+        prepend,
+        style,
+        variant,
+        ...getToggleButtonProps({
+          ref: mergeRefs(ref, refs.setReference),
+          "aria-disabled": disabled,
+          "aria-label": disabled ? "Disabled dropdown" : "",
+          disabled,
+          readOnly,
+          label,
+          labelId: getLabelProps()?.id,
+          children: void 0,
+          tabIndex: disabled || readOnly ? -1 : 0,
+          onKeyDown(e) {
+            if (isOpen && e.key === "Tab") {
+              const highlitedItem = normalizedItems[highlightedIndex];
+              if ((selectOnTab || selectOnBlur) && highlitedItem && highlitedItem !== selectedItem) {
+                selectItem(highlitedItem);
+              }
+            }
+          }
+        }),
+        after: /* @__PURE__ */ jsx(
+          DropdownList,
+          {
+            ariaLabelChosenSingular,
+            ariaLabelSelectedItem,
+            floatingStyles,
+            getItemProps,
+            getMenuProps,
+            highlightedIndex,
+            isOpen,
+            listItems: normalizedItems,
+            noMatchesText,
+            style: listStyle,
+            setListRef: refs.setFloating,
+            loading: loading ?? resolvedItemsLoading,
+            loadingText,
+            selectedItems: selectedItem !== null ? [selectedItem] : [],
+            readOnly
+          }
+        ),
+        ...rest,
+        append: void 0,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "eds-dropdown__selected-item", children: selectedItem?.label ?? /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: classNames(
+                "eds-dropdown__selected-item__placeholder",
+                {
+                  "eds-dropdown__selected-item__placeholder--readonly": readOnly
+                }
+              ),
+              children: placeholder
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            DropdownFieldAppendix,
+            {
+              "aria-busy": !(loading ?? resolvedItemsLoading) ? void 0 : "true",
+              "aria-expanded": isOpen,
+              clearable,
+              onClear: handleOnClear,
+              disabled: disabled || readOnly,
+              focusable: false,
+              labelClearSelected: labelClearSelectedItem,
+              isOpen,
+              itemIsSelected: selectedItem !== null,
+              ariaLabelCloseList,
+              ariaLabelOpenList,
+              loading: false,
+              loadingText: void 0
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+const error = "error";
+const NativeDropdown = forwardRef(
+  ({
+    className,
+    disabled = false,
+    disableLabelAnimation,
+    feedback,
+    items,
+    label,
+    loadingText,
+    onChange,
+    prepend,
+    readOnly = false,
+    selectedItem,
+    style,
+    value,
+    variant,
+    ...rest
+  }, ref) => {
+    const { items: normalizedItems, loading } = useResolvedItems(items);
+    const nativeDropdownId = useRandomId("eds-dropdown-native");
+    return /* @__PURE__ */ jsx(
+      BaseFormControl,
+      {
+        disabled,
+        readOnly,
+        prepend,
+        append: /* @__PURE__ */ jsx(
+          FieldAppend,
+          {
+            hidden: disabled || readOnly,
+            loading,
+            loadingText
+          }
+        ),
+        className,
+        style,
+        label,
+        labelId: nativeDropdownId,
+        variant,
+        feedback,
+        disableLabelAnimation,
+        isFilled: true,
+        children: /* @__PURE__ */ jsx(
+          "select",
+          {
+            "aria-invalid": variant === "negative" || variant === error,
+            "aria-labelledby": nativeDropdownId,
+            "aria-busy": loading,
+            className: "eds-form-control eds-dropdown--native",
+            disabled: disabled || readOnly,
+            onChange: (event) => {
+              onChange?.({
+                value: event.target.value,
+                selectedItem: normalizedItems.find(
+                  (item) => item.value === event.target.value
+                ) ?? null,
+                target: event.target
+              });
+            },
+            value: value ?? selectedItem?.value ?? void 0,
+            ref,
+            ...rest,
+            children: normalizedItems.map((item) => /* @__PURE__ */ jsx("option", { value: item.value, children: item.label }, item.value))
+          }
+        )
+      }
+    );
+  }
+);
+const FieldAppend = ({
+  loading,
+  loadingText,
+  hidden
+}) => {
   if (loading) {
-    return React.createElement("div", {
-      className: "eds-dropdown-native__loading-dots"
-    }, React.createElement(LoadingDots, {
-      "aria-label": loadingText
-    }));
+    return /* @__PURE__ */ jsx("div", { className: "eds-dropdown-native__loading-dots", children: /* @__PURE__ */ jsx(LoadingDots, { "aria-label": loadingText }) });
   }
   if (hidden) {
-    return React.createElement(React.Fragment, null);
+    return /* @__PURE__ */ jsx(Fragment, {});
   }
-  return React.createElement(DownArrowIcon, {
-    inline: true
-  });
+  return /* @__PURE__ */ jsx(DownArrowIcon, { inline: true });
+};
+warnAboutMissingStyles("dropdown", "form", "a11y", "chip");
+export {
+  Dropdown,
+  MultiSelect,
+  NativeDropdown,
+  SearchableDropdown
 };
-
-warnAboutMissingStyles('dropdown', 'form', 'a11y', 'chip');
-
-export { Dropdown, MultiSelect, NativeDropdown, SearchableDropdown };
 //# sourceMappingURL=dropdown.esm.js.map