@entur/dropdown 7.3.2-beta.1 → 7.3.2-beta.4

package/dist/dropdown.cjs.js

@@ -1,1465 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const utils = require("@entur/utils");
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const downshift = require("downshift");
-const classNames = require("classnames");
-const reactDom = require("@floating-ui/react-dom");
-const form = require("@entur/form");
-const tokens = require("@entur/tokens");
-const a11y = require("@entur/a11y");
-const button = require("@entur/button");
-const chip = require("@entur/chip");
-const icons = require("@entur/icons");
-const loader = require("@entur/loader");
-const tooltip = require("@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
-        };
-      }
-      case true: {
-        return {
-          label: `${selectAllItem?.label}, ${ariaLabelChosenSingular}`,
-          selected: true
-        };
-      }
-      default: {
-        return { label: `${selectAllItem?.label}`, selected: false };
-      }
-    }
-  };
-  const selectAllListItemContent = () => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      form.Checkbox,
-      {
-        "aria-hidden": "true",
-        checked: selectAllCheckboxState?.(),
-        className: "eds-dropdown__list__item__checkbox",
-        tabIndex: -1,
-        onChange: () => void 0
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
-      {
-        className: "eds-dropdown__list__item__text",
-        "aria-label": ariaValuesSelectAll().label,
-        children: selectAllItem?.label
-      }
-    )
-  ] });
-  const isReactComponent = (icon) => {
-    return typeof icon === "function" || typeof icon === "object" && icon !== null && "$$typeof" in icon && typeof icon.$$typeof === "symbol";
-  };
-  const listItemContent = (item) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      isMultiselect && /* @__PURE__ */ jsxRuntime.jsx(
-        form.Checkbox,
-        {
-          "aria-hidden": "true",
-          checked: isItemSelected(item),
-          className: "eds-dropdown__list__item__checkbox",
-          tabIndex: -1,
-          onChange: () => void 0
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "eds-dropdown__list__item__text", children: [
-        item.label,
-        /* @__PURE__ */ jsxRuntime.jsx(a11y.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__ */ jsxRuntime.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
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-              "li",
-              {
-                className: "eds-dropdown__list__item",
-                children: loadingText
-              },
-              "dropdown-list-loading"
-            );
-          }
-          if (isNoMatches) {
-            return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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
-            );
-          });
-        })()
-      }
-    )
-  );
-};
-const SelectedItemTag = ({
-  ariaLabelRemoveSelected,
-  ariaLabelChosen = "valgt",
-  disabled,
-  getSelectedItemProps,
-  index,
-  readOnly,
-  removeSelectedItem,
-  selectedItem
-}) => {
-  const { tabIndex: _, ...selectedItemProps } = getSelectedItemProps?.({
-    selectedItem,
-    index
-  }) ?? {};
-  return /* @__PURE__ */ React.createElement(
-    chip.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"
-    },
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
-      {
-        "aria-hidden": "true",
-        className: "eds-dropdown__selected-item-tag__text",
-        children: selectedItem.label
-      }
-    )
-  );
-};
-const DropdownFieldAppendix = React.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__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: !disabled && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "eds-dropdown__appendix", children: [
-      clearable && itemIsSelected && /* @__PURE__ */ jsxRuntime.jsx(
-        ClearableButton,
-        {
-          onClear,
-          focusable: true,
-          labelClearSelectedItems: labelClearSelected
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        button.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__ */ jsxRuntime.jsx(icons.DownArrowIcon, { "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(loader.LoadingDots, { "aria-hidden": "true" })
-        }
-      )
-    ] }) });
-  }
-);
-const ClearableButton = ({
-  onClear,
-  labelClearSelectedItems = "Fjern valgte",
-  focusable = false
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      tooltip.Tooltip,
-      {
-        "aria-hidden": "true",
-        placement: "top",
-        content: labelClearSelectedItems,
-        className: "eds-dropdown__appendix__clear-button__tooltip",
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          button.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__ */ jsxRuntime.jsx(icons.CloseSmallIcon, { "aria-hidden": "true" })
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "eds-dropdown__appendix__divider" })
-  ] });
-};
-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;
-      }
-      setLoading(false);
-      setItems(resolvedItems);
-    } catch (error2) {
-      if (error2 && typeof error2 === "object" && "name" in error2 && error2.name === "AbortError") {
-        return;
-      }
-      console.warn(
-        "The following error was received but not handled inside Entur Designsystems useResolvedItems hook:"
-      );
-      throw error2;
-    }
-  };
-  const debouncedFetchItems = utils.useDebounce(updateItems, debounceTimeout);
-  const normalizedItems = useNormalizedItems(items);
-  React.useEffect(() => {
-    return () => abortControllerRef?.current?.abort("Component unmounted");
-  }, []);
-  React.useEffect(() => {
-    if (itemsIsAFunction) {
-      debouncedFetchItems("");
-    }
-  }, [itemsIsAFunction, itemsResolver]);
-  return {
-    items: normalizedItems,
-    loading: itemsIsAFunction ? loading : false,
-    fetchItems: debouncedFetchItems
-  };
-};
-const EMPTY_INPUT = "";
-function lowerCaseFilterTest(item, input) {
-  if (!input) {
-    return true;
-  }
-  const sanitizeEscapeCharacters = input.replace(
-    /[-/\\^$*+?.()|[\]{}]/g,
-    "\\$&"
-  );
-  const inputRegex = new RegExp(sanitizeEscapeCharacters, "i");
-  return inputRegex.test(item.label);
-}
-function noFilter(item, input) {
-  return true;
-}
-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);
-      }
-      return selectAllUnselectedItemsInListItems(onChange);
-    }
-    if (clickedItemIsInSelectedItems(clickedItem)) {
-      return removeClickedItemFromSelectedItems(clickedItem, onChange);
-    }
-    addClickedItemToSelectedItems(clickedItem, onChange);
-  };
-  const removeClickedItemFromSelectedItems = (clickedItem, onChange) => onChange(
-    selectedItems.filter(
-      (selectedItem) => selectedItem.value !== clickedItem.value
-    )
-  );
-  const selectAllCheckboxState = () => {
-    if (allListItemsAreSelected) return true;
-    if (someListItemsAreSelected) return "indeterminate";
-    return false;
-  };
-  const selectAllUnselectedItemsInListItems = (onChange) => {
-    onChange([...selectedItems, ...unselectedItemsInListItems]);
-  };
-  const unselectAllListItems = (onChange) => {
-    const selectedItemsWithoutItemsInListItems = selectedItems.filter(
-      (selectedItem) => !listItemsWithoutSelectAll.some(
-        (listItem) => listItem.value === selectedItem.value
-      )
-    );
-    onChange(selectedItemsWithoutItemsInListItems);
-  };
-  return {
-    addClickedItemToSelectedItems,
-    allListItemsAreSelected,
-    clickedItemIsInSelectedItems,
-    clickedItemIsSelectAll,
-    handleListItemClicked,
-    hasSelectedItems,
-    listItemsWithoutSelectAll,
-    removeClickedItemFromSelectedItems,
-    selectAllCheckboxState,
-    selectAllUnselectedItemsInListItems,
-    someListItemsAreSelected,
-    unselectAllListItems
-  };
-};
-function getA11yStatusMessage(options) {
-  const { isOpen, selectAllItemIncluded = false, resultCount } = options;
-  if (!isOpen) {
-    return "";
-  }
-  const resultCountWithoutSelectAll = selectAllItemIncluded ? resultCount - 1 : resultCount;
-  if (resultCountWithoutSelectAll === 0) {
-    return "Ingen resultater";
-  }
-  return `${resultCountWithoutSelectAll} resultat${resultCountWithoutSelectAll === 1 ? "" : "er"} tilgjengelig, naviger med pil opp eller ned, velg elementer med Enter.`;
-}
-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] = React.useState(value !== null);
-    const [lastHighlightedIndex, setLastHighlightedIndex] = React.useState(0);
-    const inputRef = React.useRef(null);
-    const {
-      items: normalizedItems,
-      loading: resolvedItemsLoading,
-      fetchItems
-    } = useResolvedItems(initialItems, debounceTimeout);
-    const [listItems, setListItems] = React.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
-      };
-    };
-    const inputHasFocus = typeof document !== "undefined" ? inputRef?.current === document?.activeElement : false;
-    React.useEffect(() => {
-      filterListItems({ inputValue });
-    }, [normalizedItems]);
-    React.useEffect(() => {
-      if (selectedItem !== null && !inputHasFocus) {
-        setShowSelectedItem(true);
-        updateListItems({ inputValue: EMPTY_INPUT });
-        setInputValue(EMPTY_INPUT);
-      }
-    }, []);
-    const stateReducer = React.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 downshift.useCombobox.stateChangeTypes.ItemClick:
-          case downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
-          case downshift.useCombobox.stateChangeTypes.InputBlur:
-            return resetInputState({ changes });
-          case downshift.useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:
-            if (changes.selectedItem !== null && !inputHasFocus)
-              setShowSelectedItem(true);
-            return resetInputState({ changes });
-          // remove leading whitespace, select element with spacebar on empty input
-          case downshift.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 };
-          }
-          default:
-            return changes;
-        }
-      },
-      [fetchItems, filterListItems, inputHasFocus, resetInputState]
-    );
-    const {
-      isOpen,
-      getToggleButtonProps,
-      getLabelProps,
-      getMenuProps,
-      getInputProps,
-      highlightedIndex,
-      getItemProps,
-      selectedItem,
-      inputValue,
-      setInputValue,
-      selectItem,
-      reset
-    } = downshift.useCombobox({
-      defaultHighlightedIndex: lastHighlightedIndex,
-      items: listItems,
-      itemToString,
-      selectedItem: value,
-      stateReducer,
-      onInputValueChange(changes) {
-        updateListItems({ inputValue: changes.inputValue });
-      },
-      onSelectedItemChange({ selectedItem: newSelectedItem }) {
-        onChange(newSelectedItem);
-      },
-      // Accessibility
-      getA11yStatusMessage: (options) => getA11yStatusMessage({ ...options, resultCount: listItems.length })
-    });
-    const { refs, floatingStyles, update } = reactDom.useFloating({
-      open: isOpen,
-      placement: "bottom-start",
-      middleware: [
-        reactDom.offset(tokens.space.extraSmall2),
-        reactDom.shift({ padding: tokens.space.extraSmall }),
-        reactDom.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`
-            });
-          }
-        }),
-        reactDom.flip({ fallbackStrategy: "initialPlacement" })
-      ]
-    });
-    React.useEffect(() => {
-      if (isOpen && refs.reference.current && refs.floating.current) {
-        return reactDom.autoUpdate(
-          refs.reference.current,
-          refs.floating.current,
-          update
-        );
-      }
-    }, [isOpen, refs.reference, refs.floating, update]);
-    const handleOnClear = () => {
-      inputRef.current?.focus();
-      reset();
-    };
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      form.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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: utils.mergeRefs(inputRef, ref)
-              })
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.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
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-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 = React.useRef(null);
-    React.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: utils.useRandomId("select-all"),
-      label: labelSelectAll
-    };
-    const summarySelectedItems = React.useMemo(
-      () => ({
-        value: EMPTY_INPUT,
-        label: isAllNonAsyncItemsSelected ? labelAllItemsSelected : selectedItems.length + " " + ariaLabelChosenPlural
-      }),
-      [
-        isAllNonAsyncItemsSelected,
-        selectedItems,
-        labelAllItemsSelected,
-        ariaLabelChosenPlural
-      ]
-    );
-    const [listItems, setListItems] = React.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
-    });
-    const {
-      getSelectedItemProps,
-      getDropdownProps,
-      reset,
-      removeSelectedItem,
-      setSelectedItems
-    } = downshift.useMultipleSelection({
-      selectedItems,
-      // @ts-expect-error prop missing from library types
-      itemToString,
-      itemToKey,
-      onSelectedItemsChange({ selectedItems: newSelectedItems }) {
-        onChange(newSelectedItems);
-      }
-    });
-    const stateReducer = React.useCallback(
-      (state, {
-        changes,
-        type
-      }) => {
-        if (changes.highlightedIndex !== void 0 && changes?.highlightedIndex >= 0) {
-          setLastHighlightedIndex(changes?.highlightedIndex);
-        }
-        switch (type) {
-          // reset input value when leaving input field
-          case downshift.useCombobox.stateChangeTypes.InputBlur:
-            return {
-              ...changes,
-              inputValue: EMPTY_INPUT
-            };
-          // keep menu open and edit input value on item selection
-          case downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
-          case downshift.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 downshift.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 downshift.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;
-          }
-          default:
-            return changes;
-        }
-      },
-      [hideSelectAll, normalizedItems, filterListItems, initialItems]
-    );
-    const {
-      getInputProps,
-      getItemProps,
-      getLabelProps,
-      getMenuProps,
-      getToggleButtonProps,
-      highlightedIndex,
-      setHighlightedIndex,
-      inputValue,
-      isOpen,
-      setInputValue
-    } = downshift.useCombobox({
-      defaultHighlightedIndex: lastHighlightedIndex,
-      // after selection, highlight previously selected item.
-      items: listItems,
-      itemToString,
-      selectedItem: null,
-      stateReducer,
-      onInputValueChange(changes) {
-        updateListItems({ inputValue: changes.inputValue });
-        setHighlightedIndex(hideSelectAll ? 0 : 1);
-        setLastHighlightedIndex(hideSelectAll ? 0 : 1);
-      },
-      onSelectedItemChange({ selectedItem: clickedItem }) {
-        if (!clickedItem) return;
-        handleListItemClicked({
-          clickedItem,
-          onChange: setSelectedItems
-        });
-      },
-      // Accessibility
-      getA11yStatusMessage: (options) => getA11yStatusMessage({
-        ...options,
-        selectAllItemIncluded: !hideSelectAll,
-        resultCount: listItems.length
-      }),
-      ...rest
-    });
-    const { refs, floatingStyles, update } = reactDom.useFloating({
-      open: isOpen,
-      placement: "bottom-start",
-      middleware: [
-        reactDom.offset(tokens.space.extraSmall2),
-        reactDom.shift({ padding: tokens.space.extraSmall }),
-        reactDom.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`
-            });
-          }
-        }),
-        reactDom.flip({ fallbackStrategy: "initialPlacement" })
-      ]
-    });
-    React.useEffect(() => {
-      if (isOpen && refs.reference.current && refs.floating.current) {
-        return reactDom.autoUpdate(
-          refs.reference.current,
-          refs.floating.current,
-          update
-        );
-      }
-    }, [isOpen, refs.reference, refs.floating, update]);
-    const handleOnClear = () => {
-      inputRef.current?.focus();
-      reset();
-    };
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      form.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(a11y.VisuallyHidden, { onClick: inputRef.current?.focus, children: ariaLabelJumpToInput }) : null,
-                selectedItems.length <= maxChips ? selectedItems.map((selectedItem, index) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                  SelectedItemTag,
-                  {
-                    ariaLabelRemoveSelected: labelClearAllItems,
-                    ariaLabelChosen: "",
-                    disabled,
-                    readOnly,
-                    removeSelectedItem: handleOnClear,
-                    selectedItem: summarySelectedItems
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.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: utils.mergeRefs(inputRef, ref)
-                      }),
-                      className: "eds-dropdown__input eds-form-control",
-                      disabled: readOnly || disabled,
-                      placeholder,
-                      tabIndex: disabled || readOnly ? -1 : void 0
-                    })
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.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
-    } = downshift.useSelect({
-      items: normalizedItems,
-      defaultHighlightedIndex: selectedItem ? void 0 : 0,
-      selectedItem,
-      stateReducer(_, { changes, type }) {
-        const toggleButtonIsFocused = typeof document !== "undefined" && document.activeElement === refs.reference.current;
-        switch (type) {
-          case downshift.useSelect.stateChangeTypes.ToggleButtonKeyDownArrowDown:
-          case downshift.useSelect.stateChangeTypes.ToggleButtonKeyDownArrowUp:
-            if (!toggleButtonIsFocused) return { ...changes, isOpen: false };
-        }
-        return changes;
-      },
-      onStateChange({ type, selectedItem: newSelectedItem }) {
-        switch (type) {
-          case downshift.useSelect.stateChangeTypes.ToggleButtonBlur:
-            if (!selectOnBlur) return;
-        }
-        if (newSelectedItem === void 0) return;
-        onChange?.(newSelectedItem ?? null);
-      },
-      itemToString
-    });
-    const { refs, floatingStyles, update } = reactDom.useFloating({
-      open: isOpen,
-      placement: "bottom-start",
-      middleware: [
-        reactDom.offset(tokens.space.extraSmall2),
-        reactDom.shift({ padding: tokens.space.extraSmall }),
-        reactDom.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`
-            });
-          }
-        }),
-        reactDom.flip({ fallbackStrategy: "initialPlacement" })
-      ]
-    });
-    React.useEffect(() => {
-      if (isOpen && refs.reference.current && refs.floating.current) {
-        return reactDom.autoUpdate(
-          refs.reference.current,
-          refs.floating.current,
-          update
-        );
-      }
-    }, [isOpen, refs.reference, refs.floating, update]);
-    const handleOnClear = () => {
-      reset();
-      refs.reference.current?.focus();
-    };
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      form.BaseFormControl,
-      {
-        className: classNames("eds-dropdown", className, {
-          "eds-dropdown--has-tooltip": labelTooltip !== void 0
-        }),
-        disableLabelAnimation,
-        feedback,
-        isFilled,
-        labelProps: getLabelProps(),
-        labelTooltip,
-        prepend,
-        style,
-        variant,
-        ...getToggleButtonProps({
-          ref: utils.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "eds-dropdown__selected-item", children: selectedItem?.label ?? /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: classNames(
-                "eds-dropdown__selected-item__placeholder",
-                {
-                  "eds-dropdown__selected-item__placeholder--readonly": readOnly
-                }
-              ),
-              children: placeholder
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.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 = React.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 = utils.useRandomId("eds-dropdown-native");
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      form.BaseFormControl,
-      {
-        disabled,
-        readOnly,
-        prepend,
-        append: /* @__PURE__ */ jsxRuntime.jsx(
-          FieldAppend,
-          {
-            hidden: disabled || readOnly,
-            loading,
-            loadingText
-          }
-        ),
-        className,
-        style,
-        label,
-        labelId: nativeDropdownId,
-        variant,
-        feedback,
-        disableLabelAnimation,
-        isFilled: true,
-        children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("option", { value: item.value, children: item.label }, item.value))
-          }
-        )
-      }
-    );
-  }
-);
-const FieldAppend = ({
-  loading,
-  loadingText,
-  hidden
-}) => {
-  if (loading) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "eds-dropdown-native__loading-dots", children: /* @__PURE__ */ jsxRuntime.jsx(loader.LoadingDots, { "aria-label": loadingText }) });
-  }
-  if (hidden) {
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(icons.DownArrowIcon, { inline: true });
-};
-utils.warnAboutMissingStyles("dropdown", "form", "a11y", "chip");
-exports.Dropdown = Dropdown;
-exports.MultiSelect = MultiSelect;
-exports.NativeDropdown = NativeDropdown;
-exports.SearchableDropdown = SearchableDropdown;
-//# sourceMappingURL=dropdown.cjs.js.map