@adyen/bento-vue2 1.96.1 → 1.97.0

package/dist/chunks/dropdown.C70AlvOT.js

@@ -1,1155 +0,0 @@
-import { ref as L, watch as Z, computed as n, defineComponent as A, useSlots as Q, toRefs as Ie, useAttrs as De, inject as ie, nextTick as B, toRef as T } from "vue";
-import { B as Be, d as se } from "./typography.C8lPlsbD.js";
-import { g as q } from "./generate-uid.NJ8tVoha.js";
-import { u as G } from "./index.B6WW_F-J.js";
-import { u as Ae } from "./use-has-slot.C9lQZ6nz.js";
-import { C as ze } from "./cross-circle-fill.DTDtgLMf.js";
-import { C as Ue } from "./cross-circle-fill-small.DfxDedRr.js";
-import { n as M } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { s as z } from "./events.BQOQSSb7.js";
-import { C as We } from "./chevron-down.eYtgv5ly.js";
-import { C as je } from "./chevron-up.d8cwIlA_.js";
-/* empty css              */
-import { u as He } from "./aria-label.CaUURpnB.js";
-import { u as Ye } from "./form-field.D_2g7vaP.js";
-import { B as m, b as re, a as Ce, d as Je, u as Xe, c as Ze, e as Qe } from "./use-cached-selected-values.D0s14AxT.js";
-import { u as Ge } from "./use-form-layout-loading.CWbjZiwP.js";
-import { B as R, a as et } from "./keyboard-navigation.DWmhelVv.js";
-import { B as tt } from "./directive.BBWhsNtO.js";
-import { h as at, e as ot } from "./button-actions.D1jRC1fs.js";
-import { F as lt } from "./field-label.CdVbAfK-.js";
-import { E as nt } from "./error-message.CyERcfdt.js";
-import { P as Le } from "./popper-container.CFYFCz6u.js";
-import "../assets/dropdown.css";
-var U = /* @__PURE__ */ ((l) => (l.DEFAULT = "DropdownInputDefault", l.SMALL = "DropdownInputSmall", l))(U || {});
-const st = {
-  "de-DE": {
-    apply: "Anwenden",
-    cancel: "Abbrechen",
-    noOptionsMatchThisSearch: "Für diese Suche wurden keine Ergebnisse gefunden."
-  },
-  "en-GB": {
-    apply: "Apply",
-    cancel: "Cancel",
-    noOptionsMatchThisSearch: "No options match this search"
-  },
-  "en-US": {
-    apply: "Apply",
-    cancel: "Cancel",
-    noOptionsMatchThisSearch: "No options match this search"
-  },
-  "es-ES": {
-    apply: "Aplicar",
-    cancel: "Cancelar",
-    noOptionsMatchThisSearch: "No hay opciones que coincidan con esta búsqueda"
-  },
-  "es-MX": {
-    apply: "Aplicar",
-    cancel: "Cancelar",
-    noOptionsMatchThisSearch: "No hay opciones que coincidan con esta búsqueda"
-  },
-  "fr-FR": {
-    apply: "Appliquer",
-    cancel: "Annuler",
-    noOptionsMatchThisSearch: "Aucune option ne correspond à cette recherche"
-  },
-  "it-IT": {
-    apply: "Applica",
-    cancel: "Annulla",
-    noOptionsMatchThisSearch: "Nessun risultato corrispondente a questa ricerca"
-  },
-  "ja-JP": {
-    apply: "適用",
-    cancel: "キャンセル",
-    noOptionsMatchThisSearch: "この検索に一致するオプションはありません"
-  },
-  "pt-BR": {
-    apply: "Aplicar",
-    cancel: "Cancelar",
-    noOptionsMatchThisSearch: "Nenhuma opção corresponde a esta busca"
-  },
-  "zh-CN": {
-    apply: "应用",
-    cancel: "取消",
-    noOptionsMatchThisSearch: "没有符合此搜索条件的选项"
-  }
-}, rt = (l, t, a, e) => {
-  const o = L(l.value), { t: s } = G();
-  Z(l, () => {
-    o.value = l.value;
-  });
-  const r = n(
-    () => JSON.stringify(o.value) === JSON.stringify(l.value)
-  ), i = () => {
-    e(m.SELECT, o.value), e(m.CLOSE_DROPDOWN);
-  }, c = () => {
-    o.value = l.value, e(m.CLOSE_DROPDOWN);
-  }, v = () => {
-    a.value && t.value && (o.value = l.value);
-  }, b = n(() => [
-    {
-      title: s("apply"),
-      event: i,
-      disabled: r.value
-    },
-    {
-      title: s("cancel"),
-      event: c
-    }
-  ]), f = (p) => {
-    o.value = p, t.value || e(m.SELECT, p);
-  }, d = (p) => {
-    f(p), e(m.TAB);
-  }, S = (p) => {
-    f(p), e(m.ENTER);
-  }, x = (p) => {
-    f(p), e(m.SPACE);
-  }, u = () => {
-    c(), e(m.ESCAPE);
-  }, C = () => {
-    e(m.SHOW_MORE);
-  }, g = {
-    [m.SELECT]: f,
-    [m.SHOW_MORE]: C,
-    [m.TAB]: d,
-    [m.SPACE]: x,
-    [m.ENTER]: S
-  };
-  return {
-    // Values
-    actions: b,
-    internalSelectedValue: o,
-    // Methods
-    listeners: g,
-    onEscapeKey: u,
-    onOutsideDropdownClick: v
-  };
-}, it = A({
-  i18n: { messages: st },
-  name: "bento-dropdown-options-container"
-}), dt = /* @__PURE__ */ A({
-  ...it,
-  props: {
-    /**
-     * Defines a string value that labels an interactive element.
-     */
-    ariaLabel: { type: String, default: null },
-    /**
-     * Indicates that dropdown items are loading
-     */
-    componentLoading: { type: Boolean, default: !1 },
-    /**
-     * Empty state props used with the inner empty state component which is displayed when no search results are found.
-     */
-    emptyState: {
-      type: Object,
-      default: void 0
-    },
-    /**
-     * Disables dropdown functionality
-     */
-    disabled: { type: Boolean, default: !1 },
-    /**
-     * Indicates whether there are more items to load
-     */
-    hasMoreItems: { type: Boolean, default: !1 },
-    /**
-     *  Identifies the listbox whose contents are controlled by the the combobox on which the aria-controls attribute is set.
-     */
-    id: { type: String, required: !0 },
-    /**
-     * Function that allows the options to be disabled
-     *
-     * @type {BentoDropdownIsOptionDisabled}
-     * @param {BentoDropdownOptionItem} option - Dropdown option object
-     * @param {string} option.label - Option's label text
-     * @param {string|number} option.value - Option's value
-     * @param {unknown} option.data - Option's extra data to be passed to the default slot
-     */
-    isOptionDisabled: {
-      type: Function,
-      default: void 0
-    },
-    /**
-     * The option elements to populate the dropdown with.
-     * It must be an array of {@see BentoDropdownOptionItem }
-     *  * @property {string} value.label - Text to be displayed in the option
-     *  * @property {string,number} value.value - Value of the option
-     */
-    items: {
-      type: Array,
-      required: !0
-    },
-    /**
-     * The type of `Lazy Load`.
-     * Type "automatic" will enable infinite scrolling
-     * Type "button" will enable lazy loading with "Show more" button
-     */
-    lazyLoadType: {
-      type: String,
-      default: Ce.AUTOMATIC,
-      validator: (l) => Object.values(Ce).includes(l)
-    },
-    /**
-     * Indicates if new options are lazy loading.
-     */
-    loading: { type: Boolean, default: !1 },
-    /**
-     * If enabled, the user will be able to select multiple items.
-     */
-    multiple: { type: Boolean, default: !1 },
-    /**
-     * Indicates if the dropdown is open so that
-     * the container can be displayed.
-     */
-    open: { type: Boolean, required: !0 },
-    /**
-     * The `input` value.
-     * Providing an empty string or empty array will select no options.
-     * Set to an empty string `''` if you don't want any of the available options to be selected for single select
-     */
-    selectedValue: {
-      type: Array,
-      default: null
-    },
-    /**
-     * Flag that indicates that an external search it's being made
-     * to filter out the items inside the the multi-select listbox
-     *
-     * If enabled, hides the "Select all" checkbox in "multiple" mode.
-     */
-    searching: re.props.searching,
-    /**
-     * If enabled, dropdown will display non-selectable, static categories
-     */
-    staticCategories: { type: Boolean, default: !1 },
-    /**
-     * Reference to the DOM element or Vue component for positioning
-     * the Dropdown container.
-     */
-    targetElement: { type: Le.props.targetElement.type, required: !0 },
-    /**
-     * Enables virtual scrolling if set to true or by providing an object with itemHeight function.
-     * The itemHeight function is used to calculate the height of rendered item given it's index.
-     */
-    virtualScroll: {
-      type: [Boolean, Object],
-      default: !1
-    }
-  },
-  emits: [],
-  setup(l, { expose: t, emit: a }) {
-    const e = l, o = Q(), { selectedValue: s, multiple: r } = Ie(e), i = L(null), { t: c } = G(), v = n(() => e.open && !e.disabled), b = n(() => c("noOptionsMatchThisSearch")), f = n(() => ({
-      "b-dropdown-options-container--single": !(e != null && e.multiple)
-    })), d = n(() => ({
-      "b-dropdown-options-container__listbox--single": !(e != null && e.multiple)
-    })), { actions: S, internalSelectedValue: x, listeners: u, onEscapeKey: C, onOutsideDropdownClick: g } = rt(s, r, v, a), p = n(() => e != null && e.multiple ? at : Le), k = n(() => {
-      var D;
-      const I = {
-        "min-width": `${(D = e == null ? void 0 : e.targetElement) == null ? void 0 : D.clientWidth}px`,
-        "max-width": "min(500px, 95%)"
-      };
-      return e != null && e.multiple ? {
-        actionsLayout: "space-between",
-        ariaLabel: e.ariaLabel,
-        actions: S.value,
-        divider: !0,
-        fallbackPosition: ["top-start"],
-        id: q(`dropdown-options-${e.id}`),
-        open: e.open,
-        position: "bottom-start",
-        style: {
-          width: "auto",
-          ...I
-        },
-        targetElement: e.targetElement
-      } : {
-        fallbackPosition: ["top-start"],
-        offset: [0, 8],
-        position: "bottom-start",
-        style: {
-          display: v.value ? "block" : "none",
-          ...I
-        },
-        targetElement: e.targetElement
-      };
-    });
-    return t({
-      onOutsideDropdownClick: g
-    }), { __sfc: !0, slots: o, emit: a, props: e, selectedValue: s, multiple: r, dropdownOptionsListboxRef: i, t: c, isDropdownOpen: v, noResultsMessage: b, conditionalClasses: f, conditionalListboxClasses: d, actions: S, internalSelectedValue: x, listeners: u, onEscapeKey: C, onOutsideDropdownClick: g, popperContainerOrPopoverComponent: p, popperContainerOrPopoverProps: k, BentoListbox: re };
-  }
-});
-var ct = function() {
-  var t = this, a = t._self._c, e = t._self._setupProxy;
-  return e.isDropdownOpen ? a(e.popperContainerOrPopoverComponent, t._b({ tag: "component", staticClass: "b-dropdown-options-container", class: e.conditionalClasses }, "component", e.popperContainerOrPopoverProps, !1), [a("div", { on: { keydown: function(o) {
-    return !o.type.indexOf("key") && t._k(o.keyCode, "esc", 27, o.key, ["Esc", "Escape"]) ? null : e.onEscapeKey.apply(null, arguments);
-  } } }, [a(e.BentoListbox, t._g({ ref: "dropdownOptionsListboxRef", staticClass: "b-dropdown-options-container__listbox", class: e.conditionalListboxClasses, attrs: { id: t.id, "aria-label": t.ariaLabel, "component-loading": t.componentLoading, "empty-state": t.emptyState, "is-option-disabled": t.isOptionDisabled, items: t.items, "selected-value": e.internalSelectedValue, multiple: e.multiple, "static-categories": t.staticCategories, "no-results-message": e.noResultsMessage, searching: t.searching, loading: t.loading, "lazy-load-type": t.lazyLoadType, "has-more-items": t.hasMoreItems, "virtual-scroll": t.virtualScroll }, scopedSlots: t._u([t._l(e.slots, function(o, s) {
-    return { key: s, fn: function(r) {
-      return [t._t(s, null, null, r)];
-    } };
-  })], null, !0) }, e.listeners))], 1)]) : t._e();
-}, ut = [], pt = /* @__PURE__ */ M(
-  dt,
-  ct,
-  ut,
-  !1,
-  null,
-  "eb9fd4be"
-);
-const ft = pt.exports;
-var E = /* @__PURE__ */ ((l) => (l.DISABLED = "disabled", l.READONLY = "readonly", l.HAS_ITEMS = "has-items", l.OPENED = "opened", l.ERROR = "error", l))(E || {}), h = /* @__PURE__ */ ((l) => (l.OPEN = "dropdown-base-open", l.KEYDOWN = "dropdown-base-keydown", l.CLOSE = "dropdown-base-close", l.INPUT = "dropdown-base-input", l.CLEAR = "dropdown-base-clear", l))(h || {});
-const bt = /* @__PURE__ */ Symbol("dropdown small size injection key"), Te = /* @__PURE__ */ Symbol("dropdown underline style injection key"), yt = {
-  "de-DE": {
-    clearSearch: "Suche löschen"
-  },
-  "en-GB": {
-    clearSearch: "Clear search"
-  },
-  "en-US": {
-    clearSearch: "Clear search"
-  },
-  "es-ES": {
-    clearSearch: "Borrar búsqueda"
-  },
-  "es-MX": {
-    clearSearch: "Borrar búsqueda"
-  },
-  "fr-FR": {
-    clearSearch: "Effacer la recherche"
-  },
-  "it-IT": {
-    clearSearch: "Cancella ricerca"
-  },
-  "ja-JP": {
-    clearSearch: "検索をクリア"
-  },
-  "pt-BR": {
-    clearSearch: "Limpar busca"
-  },
-  "zh-CN": {
-    clearSearch: "清除搜索"
-  }
-}, vt = A({
-  i18n: { messages: yt },
-  name: "dropdown-base-textbox",
-  inheritAttrs: !1
-}), mt = /* @__PURE__ */ A({
-  ...vt,
-  props: {
-    /**
-     * The number of additional items that have been selected in the dropdown.
-     */
-    additionalItemsSelected: { type: [Number, String], default: 0 },
-    /**
-     * If the combobox DOM element should be an `input` element.
-     */
-    alwaysComboboxIsInput: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Sets the aria-controls attribute on the textbox. This should correspond to the popover's id that the textbox triggers.
-     */
-    ariaControls: { type: String, required: !0 },
-    /**
-     * Indicates whether the content the textbox triggers is visible or not. Needs to be set accordingly when the textbox is used and changed every time the popover is shown/hidden.
-     */
-    ariaExpanded: {
-      type: [String, Boolean],
-      required: !0
-    },
-    /**
-     * If no label element is used then the aria-label is be set should be set.
-     */
-    ariaLabel: { type: String, default: null },
-    /**
-     * Corresponds to the label's id that labels the textbox element.
-     */
-    ariaLabelledby: { type: String, default: null },
-    /**
-     * Disables any textbox functionality
-     */
-    disabled: { type: Boolean, default: !1 },
-    /**
-     * Selected option's label
-     */
-    displayValue: { type: String, default: null },
-    /**
-     * Sets the possibility to type into the textbox.
-     */
-    dynamicFiltering: { type: Boolean, default: !1 },
-    /**
-     * Marks the textbox as invalid, rendering an error state
-     */
-    isInvalid: { type: Boolean, default: !1 },
-    /*
-     * If enabled, the user will be able to select multiple items.
-     */
-    multiple: { type: Boolean, default: !1 },
-    /**
-     * Indicates if the dropdown is open so that
-     * the respective event can be emitted
-     */
-    open: { type: Boolean, default: !1 },
-    /**
-     * Sets the dropdown to readonly state
-     */
-    readonly: { type: Boolean, default: !1 },
-    /**
-     * The input value
-     */
-    value: { type: String, default: "" },
-    /**
-     * The selected value's list box item.
-     */
-    selectedValueItem: {
-      type: [Object, Array],
-      default: void 0
-    },
-    /**
-     * Toggles whether to use the slot content select items shown in the textbox in multiple mode.
-     */
-    showSlotContentInMultiple: { type: Boolean, default: !1 },
-    /**
-     * Dropdown size
-     */
-    size: {
-      type: String,
-      default: null
-    }
-  },
-  emits: [],
-  setup(l, { expose: t, emit: a }) {
-    const e = l, { t: o } = G(), s = De(), r = Q(), i = Ae(r), c = L(null), v = q("textbox"), b = ie(Te, !1), f = n(() => ({
-      [`b-dropdown-base-textbox--${E.DISABLED}`]: e.disabled,
-      [`b-dropdown-base-textbox--${E.READONLY}`]: e.readonly,
-      [`b-dropdown-base-textbox--${E.HAS_ITEMS}`]: !!e.additionalItemsSelected,
-      "b-dropdown-base-textbox--underline": b
-    })), d = n(
-      () => g.value && s["aria-required"] ? "true" : null
-    ), S = n(() => ({
-      "b-dropdown-base-textbox__input--dynamic-filtering": e.dynamicFiltering
-    })), x = n(() => e.dynamicFiltering && !!e.value && e.open), u = n(
-      () => {
-        var O;
-        return {
-          "aria-haspopup": "listbox",
-          "aria-controls": e.ariaControls,
-          "aria-describedby": (O = s["aria-describedby"]) == null ? void 0 : O.toString(),
-          "aria-expanded": e.ariaExpanded ? "true" : "false",
-          "aria-labelledby": e.ariaLabelledby,
-          "aria-label": e.ariaLabelledby ? null : e.ariaLabel,
-          "aria-invalid": e.isInvalid,
-          "aria-disabled": e.disabled ? !0 : null,
-          "aria-required": s["aria-required"]
-        };
-      }
-    ), C = n(
-      () => e.multiple ? e.selectedValueItem : []
-    ), g = n(() => e.dynamicFiltering && (e.open || e.alwaysComboboxIsInput)), p = n(() => e.selectedValueItem && !e.multiple), k = n(
-      () => e.multiple && e.selectedValueItem && C.value.length > 0 && e.showSlotContentInMultiple
-    );
-    Z(
-      () => g.value,
-      () => {
-        g.value && !e.alwaysComboboxIsInput && B(() => {
-          c.value.focus();
-        });
-      }
-    );
-    const I = async () => {
-      !e.disabled && !e.readonly && (a(h.OPEN), await B(), c.value.focus());
-    }, D = () => {
-      e.open && (c.value.focus(), a(h.CLOSE));
-    }, F = (O) => e.open && O.target.tagName === "INPUT" ? null : e.open ? D() : I(), P = () => {
-      a(h.CLEAR), a(h.INPUT, ""), c.value.focus();
-    }, $ = (O) => {
-      !e.readonly && !e.disabled ? a(h.INPUT, O.target.value) : (O.preventDefault(), O.stopPropagation());
-    }, N = () => {
-      c.value.focus();
-    };
-    return t({
-      focus: N
-    }), { __sfc: !0, t: o, attrs: s, slots: r, hasSlot: i, props: e, emit: a, textbox: c, textboxId: v, isUnderlineStyle: b, conditionalClasses: f, showRequiredAttribute: d, comboboxConditionalClasses: S, isFiltering: x, ariaAttributes: u, selectedValueItems: C, shouldShowInput: g, shouldShowSingleSelectSlot: p, shouldShowMultipleSlot: k, onOpenDropdown: I, onCloseDropdown: D, onToggleDropdown: F, onClearSearch: P, onInputEvent: $, focus: N, BentoTypography: Be, DropdownBaseTextboxEvent: h, CrossCircleFillIcon: ze, CrossCircleFillSmallIcon: Ue, BentoDropdownSize: U };
-  }
-});
-var _t = function() {
-  var t = this, a = t._self._c, e = t._self._setupProxy;
-  return a("div", { class: t.$attrs.class, attrs: { "data-testid": "textbox-wrapper" }, on: { click: e.onToggleDropdown, keydown: function(o) {
-    return !o.type.indexOf("key") && t._k(o.keyCode, "escape", void 0, o.key, void 0) ? null : e.onCloseDropdown.apply(null, arguments);
-  } } }, [a(e.BentoTypography, { staticClass: "b-dropdown-base-textbox", class: e.conditionalClasses, attrs: { variant: e.isUnderlineStyle ? "title" : "body", el: "div", "data-testid": "base-textbox" } }, [e.shouldShowInput ? a("input", t._b({ ref: "textbox", staticClass: "b-dropdown-base-textbox__input", attrs: { id: e.textboxId, role: "combobox", type: "text", "aria-autocomplete": "list", size: "1", disabled: t.disabled ? !0 : null, readonly: t.readonly, required: e.showRequiredAttribute }, domProps: { value: t.open ? t.value : t.displayValue }, on: { keydown: [function(o) {
-    return t.$emit(e.DropdownBaseTextboxEvent.KEYDOWN, o);
-  }, function(o) {
-    return !o.type.indexOf("key") && t._k(o.keyCode, "enter", 13, o.key, "Enter") ? null : e.onToggleDropdown.apply(null, arguments);
-  }], input: e.onInputEvent } }, "input", e.ariaAttributes, !1)) : a("div", t._b({ ref: "textbox", staticClass: "b-dropdown-base-textbox__input", class: e.comboboxConditionalClasses, attrs: { id: e.textboxId, "aria-readonly": t.readonly ? "true" : null, role: "combobox", tabindex: t.disabled ? -1 : 0 } }, "div", e.ariaAttributes, !1), [e.shouldShowSingleSelectSlot ? [e.hasSlot("display-value") ? t._t("display-value", null, null, t.selectedValueItem) : t._t("default", function() {
-    return [t._v(" " + t._s(t.displayValue) + " ")];
-  }, null, t.selectedValueItem)] : e.shouldShowMultipleSlot ? [a("div", { staticClass: "b-dropdown-base-textbox__input-multiple-selected" }, t._l(e.selectedValueItems, function(o) {
-    return a("div", { key: o.value }, [a("div", { staticClass: "b-dropdown-base-textbox__input-selected-element" }, [t._t("default", function() {
-      return [t._v(" " + t._s(t.displayValue) + " ")];
-    }, null, o)], 2)]);
-  }), 0)] : [t._v(t._s(t.displayValue))]], 2), t.additionalItemsSelected ? a("span", { staticClass: "b-dropdown-base-textbox__additional-items" }, [t._v(" " + t._s(t.additionalItemsSelected) + " ")]) : t._e(), e.hasSlot("icon") && !e.isFiltering ? a("span", { staticClass: "b-dropdown-base-textbox__icon", attrs: { "aria-hidden": "true" } }, [t._t("icon")], 2) : t._e(), e.isFiltering ? a("span", { staticClass: "b-dropdown-base-textbox__clear-search", attrs: { tabindex: t.disabled ? -1 : 0, "data-testid": "clear-search-button" }, on: { click: function(o) {
-    return o.stopPropagation(), e.onClearSearch.apply(null, arguments);
-  }, keydown: function(o) {
-    return !o.type.indexOf("key") && t._k(o.keyCode, "enter", 13, o.key, "Enter") ? null : (o.stopPropagation(), e.onClearSearch.apply(null, arguments));
-  }, keyup: function(o) {
-    return !o.type.indexOf("key") && t._k(o.keyCode, "space", 32, o.key, [" ", "Spacebar"]) ? null : e.onClearSearch.apply(null, arguments);
-  } } }, [t.size === e.BentoDropdownSize.SMALL ? a(e.CrossCircleFillSmallIcon, { attrs: { "svg-title": e.t("clearSearch") } }) : a(e.CrossCircleFillIcon, { attrs: { "svg-title": e.t("clearSearch") } })], 1) : t._e()])], 1);
-}, ht = [], gt = /* @__PURE__ */ M(
-  mt,
-  _t,
-  ht,
-  !1,
-  null,
-  "4d2fd594"
-);
-const ke = gt.exports, St = A({
-  name: "dropdown-default-textbox",
-  inheritAttrs: !1
-}), xt = /* @__PURE__ */ A({
-  ...St,
-  props: {
-    /**
-     * The number of additional items that have been selected in the dropdown.
-     */
-    additionalItemsSelected: { type: [Number, String], default: 0 },
-    /**
-     * Sets the aria-controls attribute on the textbox. This should correspond to the popover's id that the textbox triggers.
-     */
-    ariaControls: {
-      type: String,
-      required: !0
-    },
-    /**
-     * Indicates whether the content the textbox triggers is visible or not. Needs to be set accordingly when the textbox is used and changed every time the popover is shown/hidden.
-     */
-    ariaExpanded: {
-      type: [String, Boolean],
-      required: !0
-    },
-    /**
-     * If no label element is used then the aria-label is be set should be set.
-     */
-    ariaLabel: {
-      type: String,
-      default: null
-    },
-    /**
-     * Corresponds to the label's id that labels the textbox element.
-     */
-    ariaLabelledby: {
-      type: String,
-      default: null
-    },
-    /**
-     * Renders the dropdown with a condensed style.
-     */
-    condensed: { type: Boolean, default: !1 },
-    /**
-     * Disables any textbox functionality
-     */
-    disabled: { type: Boolean, default: !1 },
-    /**
-     * Selected option's label
-     */
-    displayValue: { type: String, default: null },
-    /**
-     * Sets the possibility to type into the textbox
-     */
-    dynamicFiltering: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Marks the textbox as invalid, rendering an error state
-     */
-    isInvalid: { type: Boolean, default: !1 },
-    /**
-     * Indicates if the dropdown is open so that
-     * the respective event can be emitted
-     */
-    open: { type: Boolean, default: !1 },
-    /**
-     * Sets the dropdown to readonly state
-     */
-    readonly: { type: Boolean, default: !1 },
-    /**
-     * The selected value's list box item.
-     */
-    selectedValueItem: {
-      type: [Object, Array],
-      default: void 0
-    },
-    /**
-     * Toggles whether to use the slot content select items shown in the textbox in multiple mode.
-     */
-    showSlotContentInMultiple: { type: Boolean, default: !1 },
-    /**
-     * The input value
-     */
-    value: { type: String, default: "" },
-    /*
-     * If enabled, the user will be able to select multiple items.
-     */
-    multiple: { type: Boolean, default: !1 }
-  },
-  emits: ["clear", "close", "input", "keydown", "open"],
-  setup(l, { expose: t, emit: a }) {
-    const e = l, o = Q(), s = L(null), r = n(() => ({
-      [`b-dropdown-default-textbox--${E.ERROR}`]: !e.disabled && !e.readonly && e.isInvalid,
-      [`b-dropdown-default-textbox--${E.DISABLED}`]: e.disabled,
-      [`b-dropdown-default-textbox--${E.READONLY}`]: e.readonly,
-      [`b-dropdown-default-textbox--${E.OPENED}`]: e.open,
-      "b-dropdown-default-textbox--condensed": e.condensed
-    })), i = n(() => e.open && !e.disabled && !e.readonly), c = (u) => {
-      a("input", u);
-    }, v = (u) => {
-      a("keydown", u);
-    }, b = (u) => {
-      z(u), a("open");
-    }, f = (u) => {
-      z(u), a("close");
-    }, d = (u) => {
-      z(u), a("clear");
-    }, S = {
-      [h.INPUT]: c,
-      [h.OPEN]: b,
-      [h.CLOSE]: f,
-      [h.CLEAR]: d,
-      [h.KEYDOWN]: v
-    }, x = () => {
-      s.value.focus();
-    };
-    return t({
-      focus: x
-    }), { __sfc: !0, emit: a, slots: o, props: e, baseTextbox: s, conditionalClasses: r, isDropdownOpen: i, onInput: c, onKeyDown: v, openDropdown: b, closeDropdown: f, clearValue: d, listeners: S, focus: x, DropdownBaseTextbox: ke, ChevronDownIcon: We, ChevronUpIcon: je };
-  }
-});
-var wt = function() {
-  var t = this, a = t._self._c, e = t._self._setupProxy;
-  return a("div", { staticClass: "b-dropdown-default-textbox", class: e.conditionalClasses, attrs: { "data-testid": "default-textbox" } }, [a(e.DropdownBaseTextbox, t._g(t._b({ ref: "baseTextbox", staticClass: "b-dropdown-default-textbox__textbox", attrs: { value: t.value }, scopedSlots: t._u([t._l(e.slots, function(o, s) {
-    return { key: s, fn: function(r) {
-      return [t._t(s, null, null, r ?? {})];
-    } };
-  }), { key: "icon", fn: function() {
-    return [a("div", { staticClass: "b-dropdown-default-textbox__chevron" }, [a(e.ChevronUpIcon, { directives: [{ name: "show", rawName: "v-show", value: e.isDropdownOpen, expression: "isDropdownOpen" }], attrs: { "svg-title": "opened" } }), a(e.ChevronDownIcon, { directives: [{ name: "show", rawName: "v-show", value: !e.isDropdownOpen, expression: "!isDropdownOpen" }], attrs: { "svg-title": "closed" } })], 1)];
-  }, proxy: !0 }], null, !0) }, "dropdown-base-textbox", { ...t.$attrs, ...t.$props }, !1), e.listeners))], 1);
-}, Ct = [], Lt = /* @__PURE__ */ M(
-  xt,
-  wt,
-  Ct,
-  !1,
-  null,
-  "bf2d43b0"
-);
-const Ot = Lt.exports;
-let Oe = 0;
-const Et = {
-  beforeCreate() {
-    this.uuid = Oe.toString(), Oe += 1;
-  }
-};
-var It = function() {
-  var t = this, a = t._self._c;
-  return a("svg", t._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", t.$attrs, !1), [t.$attrs["svg-title"] ? a("title", [t._v(t._s(t.$attrs["svg-title"]))]) : t._e(), a("path", { attrs: { fill: "#001222", d: "M5.00011 5.43922L8.00011 8.43922L11.0001 5.43922L12.0608 6.49988L8.00011 10.5605L3.93945 6.49988L5.00011 5.43922Z" } })]);
-}, Dt = [], Bt = /* @__PURE__ */ M(
-  Et,
-  It,
-  Dt,
-  !1,
-  null,
-  null
-);
-const At = Bt.exports;
-let Ee = 0;
-const Tt = {
-  beforeCreate() {
-    this.uuid = Ee.toString(), Ee += 1;
-  }
-};
-var kt = function() {
-  var t = this, a = t._self._c;
-  return a("svg", t._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", t.$attrs, !1), [t.$attrs["svg-title"] ? a("title", [t._v(t._s(t.$attrs["svg-title"]))]) : t._e(), a("path", { attrs: { fill: "#001222", d: "M10.9999 10.5608L7.9999 7.56077L4.9999 10.5608L3.93924 9.50011L7.9999 5.43945L12.0606 9.50011L10.9999 10.5608Z" } })]);
-}, Rt = [], Nt = /* @__PURE__ */ M(
-  Tt,
-  kt,
-  Rt,
-  !1,
-  null,
-  null
-);
-const Mt = Nt.exports, Ft = A({
-  name: "dropdown-small-textbox",
-  inheritAttrs: !1
-}), Pt = /* @__PURE__ */ A({
-  ...Ft,
-  props: {
-    /**
-     * The number of additional items that have been selected in the dropdown.
-     */
-    additionalItemsSelected: { type: [Number, String], default: 0 },
-    /**
-     * Sets the aria-controls attribute on the textbox. This should correspond to the popover's id that the textbox triggers.
-     */
-    ariaControls: { type: String, required: !0 },
-    /**
-     * Indicates whether the content the textbox triggers is visible or not. Needs to be set accordingly when the textbox is used and changed every time the popover is shown/hidden.
-     */
-    ariaExpanded: {
-      type: [String, Boolean],
-      required: !0
-    },
-    /**
-     * If no label element is used then the aria-label is be set should be set.
-     */
-    ariaLabel: { type: String, default: null },
-    /**
-     * Corresponds to the label's id that labels the textbox element.
-     */
-    ariaLabelledby: { type: String, default: null },
-    /**
-     * Disables any textbox functionality
-     */
-    disabled: { type: Boolean, default: !1 },
-    /**
-     * Selected option's label
-     */
-    displayValue: { type: String, default: null },
-    /**
-     * Sets the possibility to type into the textbox
-     */
-    dynamicFiltering: { type: Boolean, default: !1 },
-    /**
-     * Marks the textbox as invalid, rendering an error state
-     */
-    isInvalid: { type: Boolean, default: !1 },
-    /**
-     * Indicates if the dropdown is open so that
-     * the respective event can be emitted
-     */
-    open: { type: Boolean, default: !1 },
-    /**
-     * Sets the dropdown to readonly state
-     */
-    readonly: { type: Boolean, default: !1 },
-    /**
-     * The input value
-     */
-    value: { type: String, default: "" }
-  },
-  emits: ["clear", "close", "input", "keydown", "open"],
-  setup(l, { expose: t, emit: a }) {
-    const e = l, o = L(null), s = ie(Te, !1), r = n(() => ({
-      [`b-dropdown-small-textbox--${E.DISABLED}`]: e.disabled,
-      [`b-dropdown-small-textbox--${E.READONLY}`]: e.readonly,
-      [`b-dropdown-small-textbox--${E.OPENED}`]: e.open,
-      "b-dropdown-small-textbox--underline": s
-    })), i = n(() => e.open && !e.disabled && !e.readonly), c = (u) => {
-      a("input", u);
-    }, v = (u) => {
-      a("keydown", u);
-    }, b = (u) => {
-      z(u), a("open");
-    }, f = (u) => {
-      z(u), a("close");
-    }, d = (u) => {
-      z(u), a("clear");
-    }, S = {
-      [h.INPUT]: c,
-      [h.OPEN]: b,
-      [h.CLOSE]: f,
-      [h.CLEAR]: d,
-      [h.KEYDOWN]: v
-    }, x = () => {
-      o.value.focus();
-    };
-    return t({
-      focus: x
-    }), { __sfc: !0, emit: a, props: e, baseTextbox: o, isUnderlineStyle: s, conditionalClasses: r, isDropdownOpen: i, onInput: c, onKeyDown: v, openDropdown: b, closeDropdown: f, clearValue: d, listeners: S, focus: x, BentoDropdownSize: U, DropdownBaseTextbox: ke, ChevronDownSmallIcon: At, ChevronUpSmallIcon: Mt };
-  }
-});
-var $t = function() {
-  var t = this, a = t._self._c, e = t._self._setupProxy;
-  return a("div", { staticClass: "b-dropdown-small-textbox", class: e.conditionalClasses }, [a(e.DropdownBaseTextbox, t._g(t._b({ ref: "baseTextbox", staticClass: "b-dropdown-small-textbox__textbox", attrs: { size: e.BentoDropdownSize.SMALL }, scopedSlots: t._u([{ key: "icon", fn: function() {
-    return [a("div", { staticClass: "b-dropdown-small-textbox__chevron" }, [a(e.ChevronUpSmallIcon, { directives: [{ name: "show", rawName: "v-show", value: e.isDropdownOpen, expression: "isDropdownOpen" }], attrs: { "svg-title": "opened" } }), a(e.ChevronDownSmallIcon, { directives: [{ name: "show", rawName: "v-show", value: !e.isDropdownOpen, expression: "!isDropdownOpen" }], attrs: { "svg-title": "closed" } })], 1)];
-  }, proxy: !0 }]) }, "dropdown-base-textbox", { ...t.$attrs, ...t.$props }, !1), e.listeners))], 1);
-}, Vt = [], Kt = /* @__PURE__ */ M(
-  Pt,
-  $t,
-  Vt,
-  !1,
-  null,
-  "fa225e76"
-);
-const qt = Kt.exports, zt = (l, t) => t.value.reduce((a, e) => {
-  if (e.items) {
-    const o = e.items.filter(
-      (r) => l.value.find((i) => i.value === r.value)
-    );
-    o.length === e.items.length ? a.push(e.displayValue ?? e.label) : o.forEach(({ label: r, displayValue: i }) => a.push(i ?? r));
-  }
-  return l.value.find((o) => o.value === e.value) && a.push(e.displayValue ?? e.label), a;
-}, []).join(", "), Ut = ({ items: l, placeholder: t, selectedValues: a, isMultiSelect: e }) => {
-  const o = n(
-    () => e.value && l.value.find((r) => {
-      var i;
-      return (i = r.items) == null ? void 0 : i.length;
-    })
-  );
-  return n(() => a.value.length ? o.value ? zt(a, l) : a.value.map(({ label: r, displayValue: i }) => i ?? r).join(", ") : t.value || null);
-}, Re = (l) => {
-  var t;
-  (t = l.value.$children) == null || t[0].$refs.textbox.focus();
-}, Wt = ({
-  inputContainerRef: l,
-  optionsContainerRef: t,
-  selectedValueIndex: a,
-  isDropdownOpen: e,
-  isDynamicFltering: o,
-  items: s,
-  isMultiple: r,
-  totalItemCount: i,
-  isVirtualScroll: c
-}, v, b, f) => {
-  const d = async (y) => {
-    var w;
-    o.value && await B(), (w = s.value[y]) == null || w.focus();
-  }, S = async (y) => {
-    var H, Y;
-    o.value && await B();
-    const w = (H = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : H.$el.querySelectorAll(
-      "button"
-    );
-    w != null && w.length ? (Y = w[y]) == null || Y.focus() : d(y);
-  }, x = (y) => {
-    var w;
-    return (w = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : w.setListboxFocusedIndex(
-      y
-    );
-  }, u = async (y) => {
-    var w;
-    await ((w = t.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : w.navigateToItem(y));
-  }, C = (y) => {
-    B(() => {
-      c ? u(y) : (x(y), d(y));
-    });
-  }, g = () => {
-    e.value || b(), C(0);
-  }, p = () => {
-    e.value || b(), B(() => {
-      C(c ? i.value - 1 : s.value.length - 1);
-    });
-  }, k = ({ detail: y }) => {
-    y.preventDefault(), g();
-  }, I = ({ detail: y }) => {
-    y.preventDefault(), p();
-  }, D = () => {
-    g();
-  }, F = () => {
-    p();
-  }, P = ({ detail: y }) => {
-    y.preventDefault(), v(), e.value && (r ? S(0) : C(a.value));
-  }, $ = ({ detail: y }) => {
-    y.preventDefault(), v(), e.value && (r ? S(0) : C(a.value));
-  }, N = () => {
-    e.value && f();
-  }, O = () => {
-    e.value && (f(), Re(l));
-  };
-  return n(() => ({
-    [R.ARROW_DOWN]: k,
-    [R.ARROW_UP]: I,
-    [R.HOME]: D,
-    [R.END]: F,
-    ...o.value ? {} : { [R.SPACE]: P },
-    [R.ENTER]: $,
-    ...o.value ? {} : { [R.TAB]: N },
-    [R.ESCAPE]: O
-  }));
-}, jt = ({ inputContainerRef: l, isDropdownOpen: t }, a) => {
-  const e = () => {
-    t.value && a(), B(() => {
-      Re(l);
-    });
-  };
-  return {
-    [m.ENTER]: e,
-    [m.ESCAPE]: e,
-    [m.TAB]: e,
-    [m.SPACE]: e
-  };
-};
-function Ht(l, t, a, e, o) {
-  const s = L(l), r = L(t), i = (b, f = []) => f.flatMap((d) => d.label.toLocaleLowerCase().includes(b) ? e != null && e.value && d.items ? [...i(b, d.items)] : [d, ...i(b, d.items)] : d.items ? [...i(b, d.items)] : []), c = a !== void 0 ? Je(() => a(s.value), o ?? 300) : void 0;
-  return Z(s, () => {
-    c !== void 0 && c();
-  }), n(() => {
-    if (!s.value || a !== void 0)
-      return r.value;
-    const b = s.value.toLocaleLowerCase();
-    return i(b, r.value);
-  });
-}
-const Yt = {
-  "de-DE": {
-    all: "Alle",
-    ariaLabelFallback: "Dropdown",
-    clearSearch: "Filter löschen"
-  },
-  "en-GB": {
-    all: "All",
-    ariaLabelFallback: "Dropdown",
-    clearSearch: "Clear filter"
-  },
-  "en-US": {
-    all: "All",
-    ariaLabelFallback: "Dropdown",
-    clearSearch: "Clear filter"
-  },
-  "es-ES": {
-    all: "Todos",
-    ariaLabelFallback: "Menú desplegable",
-    clearSearch: "Limpiar filtro"
-  },
-  "es-MX": {
-    all: "Todos",
-    ariaLabelFallback: "Menú desplegable",
-    clearSearch: "Limpiar filtro"
-  },
-  "fr-FR": {
-    all: "Tous",
-    ariaLabelFallback: "Menu déroulant",
-    clearSearch: "Effacer le filtre"
-  },
-  "it-IT": {
-    all: "Tutti",
-    ariaLabelFallback: "Menu a discesa",
-    clearSearch: "Cancella filtro"
-  },
-  "ja-JP": {
-    all: "すべて",
-    ariaLabelFallback: "ドロップダウン",
-    clearSearch: "フィルターをクリア"
-  },
-  "pt-BR": {
-    all: "Todos",
-    ariaLabelFallback: "Menu suspenso",
-    clearSearch: "Limpar filtro"
-  },
-  "zh-CN": {
-    all: "全部",
-    ariaLabelFallback: "下拉菜单",
-    clearSearch: "清除筛选器"
-  }
-}, Jt = A({
-  i18n: { messages: Yt },
-  name: "b-dropdown",
-  components: {
-    DropdownInputDefault: Ot,
-    DropdownInputSmall: qt
-  },
-  model: { prop: "modelValue" }
-}), Xt = /* @__PURE__ */ A({
-  ...Jt,
-  props: {
-    description: { default: null },
-    disabled: { type: Boolean, default: !1 },
-    errorMessage: { default: null },
-    label: { default: null },
-    optional: { type: Boolean, default: !1 },
-    placeholder: { default: null },
-    readonly: { type: Boolean, default: !1 },
-    required: { type: Boolean, default: !1 },
-    tooltipText: { default: null },
-    ariaLabel: { default: null },
-    condensed: { type: Boolean, default: !1 },
-    emptyState: { default: void 0 },
-    dynamicFiltering: { type: Boolean, default: !1 },
-    error: { type: Boolean, default: !1 },
-    hasMoreItems: { type: Boolean, default: !1 },
-    isOptionDisabled: { type: Function, default: void 0 },
-    items: { default: () => [] },
-    loading: { type: Boolean, default: !1 },
-    componentLoading: { type: Boolean, default: !1 },
-    lazyLoadType: { default: re.props.lazyLoadType.default },
-    multiple: { type: Boolean, default: !1 },
-    search: { default: void 0 },
-    showSlotContentInMultiple: { type: Boolean, default: !1 },
-    size: { default: null },
-    staticCategories: { type: Boolean, default: !1 },
-    teleport: { default: () => ({ disabled: !0 }) },
-    value: { default: null },
-    modelValue: { default: null },
-    virtualScroll: { type: Boolean, default: !1 },
-    enableValueLabelPair: { type: Boolean, default: !1 }
-  },
-  emits: ["input", "update:model-value", "show-more", "open"],
-  setup(l, { expose: t, emit: a }) {
-    var Se, xe;
-    const e = l, o = De(), s = Q(), r = Ae(s), { t: i } = G(), { emitValue: c } = Ye(a), v = L(null), b = L(null), f = L(null), d = L(!1), S = q("bento-dropdown-options-container"), x = q("dropdown-label"), u = q("dropdown-description"), C = q("dropdown-error"), { isReadOnly: g } = Ge(T(e, "readonly")), p = n(() => e.modelValue ?? e.value), { cachedSelectedListboxOptions: k, cachedListboxSelectedValues: I, setCachedValues: D } = Xe(
-      T(e, "items"),
-      p,
-      T(e, "multiple"),
-      T(e, "enableValueLabelPair")
-    ), F = L(o["aria-label"]), P = L(o["aria-describedby"]), { ariaLabel: $, label: N } = Ie(e), O = n(() => i("ariaLabelFallback")), ee = He({
-      // TODO: take ariaLabel ref away when aria-label prop is removed
-      ariaLabel: $.value || F,
-      label: N,
-      defaultFallback: O
-    }), y = e.size === U.SMALL || ie(bt, !1), w = n(() => y ? U.SMALL : U.DEFAULT), H = n(() => ({
-      "b-dropdown--condensed": e.condensed
-    })), Y = n(() => ({
-      "b-dropdown__description--error": !!e.errorMessage
-    })), V = L(""), W = T(e, "items"), de = T(e, "staticCategories"), J = Ht(
-      V,
-      W,
-      (Se = e == null ? void 0 : e.search) == null ? void 0 : Se.searchEvent,
-      de,
-      (xe = e == null ? void 0 : e.search) == null ? void 0 : xe.debounceTime
-    ), te = n(() => e.dynamicFiltering && !!V.value), Ne = Ut({
-      items: W,
-      placeholder: T(e, "placeholder"),
-      isMultiSelect: T(e, "multiple"),
-      selectedValues: k
-    }), Me = n(() => {
-      if (e != null && e.multiple && Array.isArray(p.value))
-        return e.items.filter(
-          ({ value: _ }) => (e == null ? void 0 : e.value) && (e == null ? void 0 : e.value).includes(_)
-        );
-      if (!e.multiple && e.staticCategories) {
-        const _ = e.items.find(
-          (j) => {
-            var we;
-            return (we = j.items) == null ? void 0 : we.some((qe) => qe.value === p.value);
-          }
-        );
-        return (_ ? _.items.find((j) => j.value === p.value) : e.items.find(({ value: j }) => j === p.value)) ?? null;
-      }
-      return e.items.find(({ value: _ }) => _ === p.value);
-    }), ce = n(() => {
-      const _ = J.value.findIndex(({ value: K }) => e.enableValueLabelPair ? p.value.value === K : p.value === K);
-      return _ > -1 ? _ : 0;
-    }), { isMultiLevelSelect: ae, flattenedItemsList: ue } = Ze(W), pe = n(() => ae.value && !e.staticCategories), fe = n(() => pe.value ? "treeitem" : "option"), Fe = n(() => {
-      if (e.multiple) {
-        const _ = Array.isArray(p.value) ? p.value.length : 0, K = ae.value ? ue.value.length : W.value.length;
-        return _ === 0 ? null : !e.hasMoreItems && K > 0 && K === _ ? i("all") : _;
-      }
-      return null;
-    }), Pe = n(
-      () => [
-        e.description ? u : null,
-        P.value,
-        e.errorMessage ? C : null
-      ].filter(Boolean).join(" ") || null
-    ), oe = n(() => {
-      var _;
-      return (_ = f.value) == null ? void 0 : _.$el;
-    }), { visibleDomOptions: be, updateVisibleDomOptions: le } = Qe(
-      oe,
-      J,
-      fe
-    ), ye = () => {
-      g.value || (d.value = !0, B(() => {
-        le();
-      }));
-    }, X = () => {
-      d.value = !1;
-    }, ve = () => {
-      g.value || (d.value = !d.value, B(() => {
-        le();
-      }), te.value && (V.value = ""));
-    }, me = () => {
-      te.value && (V.value = ""), d.value && (d.value = !1, f.value.onOutsideDropdownClick());
-    }, $e = n(() => [
-      me,
-      {
-        ignore: [oe]
-      }
-    ]), _e = async (_) => {
-      e.multiple || (V.value = "", d.value = !1), D(_), c(I.value), e.multiple || (await B(), ne());
-    }, he = () => {
-      a(m.SHOW_MORE);
-    }, Ve = Wt(
-      {
-        inputContainerRef: v,
-        optionsContainerRef: f,
-        selectedValueIndex: ce,
-        isDropdownOpen: d,
-        isDynamicFltering: T(e, "dynamicFiltering"),
-        items: be,
-        isMultiple: e.multiple,
-        totalItemCount: n(() => J.value.length),
-        isVirtualScroll: !(e != null && e.multiple) && (e == null ? void 0 : e.virtualScroll) !== !1 && (e == null ? void 0 : e.lazyLoadType) === "none"
-      },
-      ve,
-      ye,
-      X
-    ), ge = jt(
-      {
-        inputContainerRef: v,
-        isDropdownOpen: d
-      },
-      X
-    ), Ke = {
-      [m.CLOSE_DROPDOWN]: X,
-      [m.SELECT]: _e,
-      [m.SHOW_MORE]: he,
-      ...ge
-    };
-    e.error && se(
-      'BentoDropdown "error" property',
-      `Use the BentoDropdown "errorMessage" property instead to indicate that there is a modifier error.
-                            Having the field as "undefined" will hide/remove the error.
-                            <bento-dropdown errorMessage="Error message text" />`,
-      "2.0.0"
-    ), e.size && se('BentoDropdown "size" property', "Do not use. Only 'default' size should be used.", "2.0.0"), e.value && se(
-      'BentoDropdown "value" property',
-      `The use of "value" prop in "BentoDropdown" is no longer supported.
-                Use the "v-model" or "model-value" property instead.`,
-      "2.0.0"
-    );
-    const ne = () => {
-      v.value.focus();
-    };
-    return Z(
-      () => d.value,
-      (_) => {
-        _ && a("open");
-      }
-    ), t({
-      focus: ne
-    }), { __sfc: !0, attrs: o, slots: s, hasSlot: r, props: e, emit: a, t: i, emitValue: c, inputContainerRef: v, inputContainerRefWrapper: b, optionsContainerRef: f, isDropdownOpen: d, dropdownOptionsContainerId: S, labelId: x, descriptionId: u, errorId: C, isReadOnly: g, dropdownValue: p, cachedSelectedListboxOptions: k, cachedListboxSelectedValues: I, setCachedValues: D, ariaLabelAttribute: F, ariaDescribedByAttribute: P, ariaLabel: $, label: N, computedAriaLabelFallbackMessage: O, computedAriaLabel: ee, isInputComponent: y, computedSize: w, conditionalClasses: H, descriptionConditionalClasses: Y, searchTerm: V, items: W, staticCategories: de, filteredItems: J, isSearching: te, displayValue: Ne, selectedValueItem: Me, selectedValueIndex: ce, isMultiLevelSelect: ae, flattenedItemsList: ue, isTreePattern: pe, computedOptionRole: fe, additionalItemsSelected: Fe, ariaDescribedBy: Pe, listboxRef: oe, visibleDomOptions: be, updateVisibleDomOptions: le, openDropdown: ye, closeDropdown: X, toggleDropdown: ve, clickOutsideDropdown: me, clickOutsideDropdownOptions: $e, onOptionSelected: _e, emitShowMoreEvent: he, textboxKeyboardNavigationListeners: Ve, listboxKeyboardNavigationListeners: ge, listboxListeners: Ke, focus: ne, BentoDropdownOptionsContainer: ft, BentoTypography: Be, ErrorMessage: nt, FieldLabel: lt, BentoTeleport: ot, vBentoClickOutsideDirective: tt, vBentoKeyboardNavigationDirective: et };
-  }
-});
-var Zt = function() {
-  var o, s;
-  var t = this, a = t._self._c, e = t._self._setupProxy;
-  return a("div", { directives: [{ name: "bento-click-outside-directive", rawName: "v-bento-click-outside-directive", value: e.clickOutsideDropdownOptions, expression: "clickOutsideDropdownOptions" }], staticClass: "b-dropdown", class: e.conditionalClasses }, [e.label ? a(e.FieldLabel, { attrs: { id: e.labelId, condensed: t.condensed, label: e.label, "tooltip-text": t.tooltipText, optional: t.optional, required: t.required } }) : t._e(), a("div", t._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], ref: "inputContainerRefWrapper" }, e.textboxKeyboardNavigationListeners), [a(e.computedSize, { ref: "inputContainerRef", tag: "component", attrs: { condensed: t.condensed, value: e.searchTerm, "additional-items-selected": e.additionalItemsSelected, "aria-controls": e.dropdownOptionsContainerId, ariaExpanded: e.isDropdownOpen, "aria-labelledby": e.label ? e.labelId : null, "aria-describedby": e.ariaDescribedBy, "aria-label": e.computedAriaLabel, "aria-readonly": e.isReadOnly, "aria-required": t.required, readonly: e.isReadOnly, disabled: t.disabled, "display-value": e.displayValue, "dynamic-filtering": t.dynamicFiltering, "is-invalid": !!t.errorMessage || t.error, multiple: t.multiple, open: e.isDropdownOpen, "selected-value-item": e.isInputComponent ? void 0 : e.selectedValueItem, "show-slot-content-in-multiple": t.showSlotContentInMultiple }, on: { input: function(r) {
-    e.searchTerm = r;
-  }, open: e.toggleDropdown, close: e.toggleDropdown }, scopedSlots: t._u([t._l(e.slots, function(r, i) {
-    return { key: i, fn: function(c) {
-      return [t._t(i, null, null, c)];
-    } };
-  })], null, !0) })], 1), e.inputContainerRef ? a(e.BentoTeleport, { attrs: { disabled: (o = t.teleport) == null ? void 0 : o.disabled, to: (s = t.teleport) == null ? void 0 : s.to } }, [a(e.BentoDropdownOptionsContainer, t._g({ ref: "optionsContainerRef", attrs: { id: e.dropdownOptionsContainerId, "aria-label": e.computedAriaLabel, "component-loading": t.componentLoading, "empty-state": t.emptyState, disabled: t.disabled, "is-option-disabled": t.isOptionDisabled, items: e.filteredItems, multiple: t.multiple, "static-categories": e.staticCategories, open: e.isDropdownOpen, "selected-value": e.cachedSelectedListboxOptions, searching: e.isSearching, "target-element": e.inputContainerRefWrapper, loading: t.loading, "has-more-items": t.hasMoreItems, "lazy-load-type": t.lazyLoadType, "virtual-scroll": t.virtualScroll }, scopedSlots: t._u([t._l(e.slots, function(r, i) {
-    return { key: i, fn: function(c) {
-      return [t._t(i, null, null, c)];
-    } };
-  })], null, !0) }, e.listboxListeners))], 1) : t._e(), t.errorMessage ? a(e.ErrorMessage, { staticClass: "b-dropdown__error-message", attrs: { id: e.errorId, "error-message": t.errorMessage } }) : t._e(), t.description || e.hasSlot("description") ? a(e.BentoTypography, { staticClass: "b-dropdown__description", class: e.descriptionConditionalClasses, attrs: { id: e.descriptionId, el: "span" } }, [t._t("description", function() {
-    return [t._v(" " + t._s(t.description) + " ")];
-  })], 2) : t._e()], 1);
-}, Qt = [], Gt = /* @__PURE__ */ M(
-  Xt,
-  Zt,
-  Qt,
-  !1,
-  null,
-  "a36ac3b0"
-);
-const xa = Gt.exports;
-export {
-  xa as B,
-  Ot as D,
-  U as a,
-  bt as b,
-  Ht as u
-};
-//# sourceMappingURL=dropdown.C70AlvOT.js.map