@adyen/bento-vue2 1.96.1 → 1.97.0

package/dist/chunks/dropdown.CIEm6MBB.js

@@ -0,0 +1,2660 @@
+import { computed as n, ref as E, onMounted as rt, onUnmounted as ct, watch as Z, defineComponent as z, nextTick as Y, toRef as K, useSlots as Se, useAttrs as $e, toRefs as He, inject as Fe } from "vue";
+import { B as ae, d as Re } from "./typography.C8lPlsbD.js";
+import { g as le } from "./generate-uid.NJ8tVoha.js";
+import { u as oe } from "./index.B6WW_F-J.js";
+import { u as Je } from "./use-has-slot.C9lQZ6nz.js";
+import { C as dt } from "./cross-circle-fill.DTDtgLMf.js";
+import { C as ut } from "./cross-circle-fill-small.DfxDedRr.js";
+import { n as U } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { s as fe } from "./events.BQOQSSb7.js";
+import { C as Xe } from "./chevron-down.eYtgv5ly.js";
+import { C as Ze } from "./chevron-up.d8cwIlA_.js";
+/* empty css              */
+import { u as pt } from "./aria-label.CaUURpnB.js";
+import { u as ft } from "./form-field.D_2g7vaP.js";
+import { u as bt } from "./use-form-layout-loading.CWbjZiwP.js";
+import { B as V, a as we } from "./keyboard-navigation.DWmhelVv.js";
+import { B as vt } from "./loading-indicator.PxbRzshH.js";
+import { B as mt } from "./empty-state.Dttc-ZO_.js";
+import { o as _t } from "./resize.Bqks3WUm.js";
+import "./index.Cl4_42j5.js";
+import { C as Te, N as yt } from "./minus-small.DJacLGTw.js";
+import { C as gt } from "./checkmark-small.DVDtD4HQ.js";
+import { B as ht } from "./chip.BFY_-VCz.js";
+import { a as St, b as Ue, h as xt, e as Ct } from "./button-actions.DKc63aCb.js";
+import { B as Ot } from "./directive.BBWhsNtO.js";
+import { F as Et } from "./field-label.CdVbAfK-.js";
+import { E as It } from "./error-message.CyERcfdt.js";
+import { P as Ge } from "./popper-container.CFYFCz6u.js";
+import "../assets/dropdown.css";
+const Qe = (a, e, l, t) => {
+  const s = n(
+    () => {
+      var r, v;
+      return !!((r = a.value) != null && r.length) && ((v = a.value) == null ? void 0 : v.length) === e.value.length;
+    }
+  ), o = n(() => {
+    var r;
+    return a.value == null || a.value.length === 0 ? !1 : ((r = a.value) == null ? void 0 : r.length) !== e.value.length;
+  });
+  return {
+    isAllSelected: s,
+    isIndeterminate: o,
+    toggleSelectAll: (r) => {
+      r ? l() : t();
+    }
+  };
+};
+function Lt(a, { disabled: e, itemHeight: l, overscan: t = 5, prefixHeight: s }) {
+  const o = E(null), i = E([]), r = E(0), v = E(0), u = E(0);
+  let c;
+  const g = n(() => {
+    const p = typeof l == "number" ? a.value.length * l : a.value.reduce((T, O, A) => T + l(A), 0), L = typeof l == "number" ? r.value * l : a.value.slice(0, r.value).reduce((T, O, A) => T + l(A), 0);
+    return {
+      style: {
+        marginTop: `${L}px`,
+        height: `${p - L}px`
+      }
+    };
+  }), b = () => {
+    const p = (s == null ? void 0 : s.value) ?? 0, L = Math.max(o.value.scrollTop - p, 0);
+    if (typeof l == "number")
+      return Math.floor(L / l);
+    let T = 0, O = 0;
+    for (let A = 0; A < a.value.length; A += 1) {
+      const M = l(A);
+      if (T += M, T >= L) {
+        O = A;
+        break;
+      }
+    }
+    return O;
+  }, f = () => {
+    if (u.value = o.value.clientHeight, typeof l == "number")
+      return Math.ceil(u.value / l);
+    const p = r.value ?? 0;
+    let L = 0, T = 0;
+    for (let O = p; O < a.value.length; O += 1) {
+      const A = l(O);
+      if (L += A, T = O, L > u.value)
+        break;
+    }
+    return T - p;
+  }, h = () => {
+    if (o.value) {
+      const p = f();
+      r.value = b(), v.value = Math.min(r.value + p + t, a.value.length), i.value = a.value.slice(r.value, v.value);
+    }
+  }, y = () => {
+    h();
+  };
+  e || (rt(() => {
+    o.value && (u.value = o.value.clientHeight, c = _t(o.value, ({ clientHeight: p }) => {
+      u.value = p, h();
+    }), h());
+  }), ct(() => {
+    c == null || c.disconnect();
+  }), Z(
+    () => a.value,
+    () => {
+      h();
+    }
+  ));
+  const B = {
+    ref: o,
+    style: { overflowY: "auto" }
+  }, R = (p) => {
+    if (!o.value)
+      return;
+    const L = typeof l == "number" ? p * l : a.value.slice(0, p).reduce((C, I, N) => C + l(N), 0), T = typeof l == "number" ? l : l(p), O = L + T, { scrollTop: A, clientHeight: M } = o.value, m = A + M;
+    O > m ? o.value.scrollTop = M > 0 ? O - M : L : L < A && (o.value.scrollTop = L), h();
+  };
+  return e ? {
+    containerRef: o,
+    containerProps: B,
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onScroll: () => {
+    },
+    list: a,
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    scrollToIndex: () => {
+    },
+    startIndex: E(0)
+  } : {
+    containerRef: o,
+    containerProps: B,
+    onScroll: y,
+    list: i,
+    wrapperProps: g,
+    scrollToIndex: R,
+    startIndex: r
+  };
+}
+var d = /* @__PURE__ */ ((a) => (a.SELECT = "select", a.SHOW_MORE = "show-more", a.ESCAPE = "escape-pressed", a.CLICK = "click", a.ENTER = "enter-pressed", a.SPACE = "space-pressed", a.TAB = "tab-pressed", a.CLOSE_DROPDOWN = "close-dropdown", a))(d || {}), te = /* @__PURE__ */ ((a) => (a.AUTOMATIC = "automatic", a.BUTTON = "button", a.NONE = "none", a))(te || {});
+const Tt = z({
+  name: "bento-listbox-static-category",
+  components: {
+    BentoTypography: ae
+  },
+  props: {
+    /**
+     * Category label text
+     */
+    categoryLabel: {
+      type: String,
+      required: !0
+    }
+  }
+});
+var wt = function() {
+  var e = this, l = e._self._c;
+  return e._self._setupProxy, l("div", { staticClass: "b-listbox-single-select-category", attrs: { role: "group", "aria-label": e.categoryLabel } }, [l("bento-typography", { staticClass: "b-listbox-single-select-category__label-text", attrs: { variant: "caption", el: "span", "aria-hidden": "true" } }, [e._v(" " + e._s(e.categoryLabel) + " ")]), l("div", [e._t("default")], 2)], 1);
+}, At = [], Dt = /* @__PURE__ */ U(
+  Tt,
+  wt,
+  At,
+  !1,
+  null,
+  "bfbc1649"
+);
+const kt = Dt.exports, Bt = z({
+  name: "bento-listbox-option",
+  props: {
+    /**
+     * Setting this property to true will disable the option.
+     */
+    disabled: { type: Boolean, default: !1 },
+    /**
+     * Indicates if the value is selected. Only one element can be selected at a time.
+     */
+    selected: { type: Boolean, default: !1 }
+  },
+  emits: [d.CLICK, d.ENTER, d.SPACE, d.TAB],
+  setup(a, { emit: e }) {
+    const l = n(() => ({
+      "b-listbox-option--disabled": a.disabled,
+      "b-listbox-option--selected": a.selected
+    }));
+    return {
+      // Enums
+      BentoKeyboardNavigationKeyDownEvent: V,
+      BentoListboxEvent: d,
+      // Values
+      conditionalClasses: l,
+      // Events
+      onClick: (o) => {
+        e(d.CLICK, o);
+      },
+      onOptionSelected: (o, i) => {
+        e(o, i);
+      }
+    };
+  }
+});
+var Rt = function() {
+  var e = this, l = e._self._c;
+  return e._self._setupProxy, l("div", e._b({ staticClass: "b-listbox-option", class: e.conditionalClasses, attrs: { role: "option" }, on: { click: e.onClick, keydown: [function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "enter", 13, t.key, "Enter") ? null : e.onOptionSelected(e.BentoListboxEvent.ENTER, t);
+  }, function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "space", 32, t.key, [" ", "Spacebar"]) ? null : e.onOptionSelected(e.BentoListboxEvent.SPACE, t);
+  }, function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "tab", 9, t.key, "Tab") ? null : e.onOptionSelected(e.BentoListboxEvent.TAB, t);
+  }] } }, "div", e.$attrs, !1), [e._t("default")], 2);
+}, Mt = [], Nt = /* @__PURE__ */ U(
+  Bt,
+  Rt,
+  Mt,
+  !1,
+  null,
+  "c345b6c0"
+);
+const Ae = Nt.exports;
+let Ke = 0;
+const $t = {
+  beforeCreate() {
+    this.uuid = Ke.toString(), Ke += 1;
+  }
+};
+var Ft = function() {
+  var e = this, l = e._self._c;
+  return l("svg", e._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", e.$attrs, !1), [e.$attrs["svg-title"] ? l("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), l("path", { attrs: { fill: "#001222", d: "M15.0608 4.00011L14.0001 2.93945L6.00011 10.9395L2.00011 6.93945L0.939453 8.00011L6.00011 13.0608L15.0608 4.00011Z" } })]);
+}, Pt = [], Vt = /* @__PURE__ */ U(
+  $t,
+  Ft,
+  Pt,
+  !1,
+  null,
+  null
+);
+const zt = Vt.exports, Ut = z({
+  name: "bento-listbox-single-select-option",
+  components: {
+    BentoListboxOption: Ae,
+    BentoTypography: ae,
+    CheckmarkIcon: zt
+  },
+  props: {
+    /**
+     * Setting this property to true will disable the option.
+     */
+    disabled: { type: Boolean, default: !1 },
+    /**
+     * The option item that contains all the option item's data.
+     * @type {BentoListboxOptionItem}
+     */
+    option: {
+      type: Object,
+      required: !0
+    },
+    /**
+     * Indicates if the value is selected. Only one element can be selected at a time.
+     */
+    selected: { type: Boolean, default: !1 }
+  },
+  emits: [d.ENTER, d.SELECT, d.SPACE, d.TAB],
+  setup(a, { emit: e }) {
+    const l = (i) => {
+      a.disabled || e(i, a.option);
+    }, t = n(() => a.disabled ? !0 : null), s = n(() => a.selected ? !0 : null), o = n(() => a.disabled ? -1 : 0);
+    return {
+      // Values
+      ariaDisabled: t,
+      ariaSelected: s,
+      tabIndex: o,
+      // Enums
+      BentoListboxEvent: d,
+      // Events
+      onOptionSelected: l
+    };
+  }
+});
+var Gt = function() {
+  var e = this, l = e._self._c;
+  return e._self._setupProxy, l("bento-listbox-option", { staticClass: "b-listbox-single-select-option", attrs: { disabled: e.disabled, selected: e.selected, "aria-selected": e.ariaSelected, "aria-disabled": e.ariaDisabled, tabindex: e.tabIndex }, on: { click: function(t) {
+    return e.onOptionSelected(e.BentoListboxEvent.SELECT);
+  }, "enter-pressed": function(t) {
+    return e.onOptionSelected(e.BentoListboxEvent.ENTER);
+  }, "space-pressed": function(t) {
+    return t.preventDefault(), e.onOptionSelected(e.BentoListboxEvent.SPACE);
+  }, "tab-pressed": function(t) {
+    return e.onOptionSelected(e.BentoListboxEvent.TAB);
+  } } }, [e._t("default", function() {
+    return [l("span", { staticClass: "b-listbox-single-select-option__text" }, [l("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(e.option.label))]), e.option.description ? l("bento-typography", { staticClass: "b-listbox-single-select-option__description", attrs: { el: "span" } }, [e._v(" " + e._s(e.option.description) + " ")]) : e._e()], 1)];
+  }, null, e.option), l("span", { staticClass: "b-listbox-single-select-option__check-icon" }, [l("checkmark-icon", { directives: [{ name: "show", rawName: "v-show", value: e.selected, expression: "selected" }], attrs: { "svg-title": "selected" } })], 1)], 2);
+}, Kt = [], qt = /* @__PURE__ */ U(
+  Ut,
+  Gt,
+  Kt,
+  !1,
+  null,
+  "bb14d75a"
+);
+const Yt = qt.exports, et = ({ items: a, totalItemCount: e }, l) => {
+  const t = n(() => e != null && e.value ? e.value - 1 : a.value.length - 1), s = E(0), o = (f) => {
+    switch (f) {
+      case "increase":
+        s.value += 1;
+        break;
+      case "decrease":
+        s.value -= 1;
+        break;
+    }
+  }, i = ({ edgeCaseItem: f }, h) => {
+    s.value !== f && (o(h), l(s.value));
+  }, r = (f) => {
+    b(f), i(
+      {
+        edgeCaseItem: t.value
+      },
+      "increase"
+      /* INCREASE */
+    );
+  }, v = (f) => {
+    b(f), i(
+      {
+        edgeCaseItem: 0
+      },
+      "decrease"
+      /* DECREASE */
+    );
+  }, u = () => {
+    s.value = 0, l(s.value);
+  }, c = () => {
+    s.value = t.value, l(s.value);
+  }, g = (f) => {
+    s.value = f;
+  }, b = (f) => {
+    var h;
+    (h = f == null ? void 0 : f.detail) == null || h.preventDefault();
+  };
+  return {
+    moveToFirstElement: u,
+    moveToLastElement: c,
+    moveToNextElement: r,
+    moveToPreviousElement: v,
+    setListboxFocusedIndex: g,
+    preventDefault: b,
+    focusedIndex: s
+  };
+}, Pe = (a, e, l = E("option"), t = !0) => {
+  const s = E([]), o = async () => {
+    if (!a.value || a.value.nodeType === Node.COMMENT_NODE)
+      return;
+    const i = Array.from(a.value.querySelectorAll(`[role="${l.value}"]`));
+    s.value = t ? i.filter((r) => r.checkVisibility()) : i;
+  };
+  return Z(
+    e,
+    () => {
+      Y(() => {
+        o();
+      });
+    },
+    { immediate: !0 }
+  ), {
+    visibleDomOptions: s,
+    updateVisibleDomOptions: o
+  };
+}, Wt = z({
+  name: "bento-listbox-single-select",
+  components: {
+    BentoListboxSingleSelectCategory: kt,
+    BentoListboxSingleSelectOption: Yt
+  },
+  directives: { BentoKeyboardNavigationDirective: we },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * Function that allows the options to be disabled
+     *
+     * @type {BentoListboxIsOptionDisabled}
+     * @param {BentoListboxOptionItem} option - listbox 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: () => !1
+    },
+    /**
+     * The option elements to populate the listbox with.
+     * It must be an array of {@see BentoListboxOptionItem }.
+     *
+     * @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 `input` value.
+     * Providing an empty string will select no options.
+     * Set to an empty string `''` if you don't want any of the available options to be selected
+     */
+    selectedValue: {
+      type: Array,
+      default: void 0
+    },
+    /**
+     * If enabled, dropdown will display non-selectable, static categories
+     */
+    staticCategories: { type: Boolean, default: !1 },
+    /**
+     * Total number of items in the full list (used for virtual scroll keyboard navigation).
+     * When greater than 0, virtual scroll keyboard navigation is enabled.
+     */
+    totalItemCount: { type: Number, default: 0 },
+    /**
+     * Function to scroll the virtual list container to a given item index.
+     */
+    scrollToIndex: { type: Function, default: void 0 },
+    /**
+     * The start index of the currently rendered virtual scroll slice.
+     */
+    virtualScrollStartIndex: { type: Number, default: 0 }
+  },
+  emits: [d.SELECT, d.ENTER, d.SPACE, d.TAB],
+  setup(a, { emit: e, expose: l, slots: t, attrs: s }) {
+    const o = E(null), i = E([]), r = n(() => {
+      var m;
+      return !!((m = a.selectedValue) != null && m.length) && a.selectedValue.at(0);
+    }), v = n(
+      () => {
+        var m, C, I, N;
+        return {
+          "aria-label": (m = s["aria-label"]) == null ? void 0 : m.toString(),
+          "aria-busy": (C = s["aria-busy"]) == null ? void 0 : C.toString(),
+          "aria-atomic": (I = s["aria-atomic"]) == null ? void 0 : I.toString(),
+          "aria-live": (N = s["aria-live"]) == null ? void 0 : N.toString()
+        };
+      }
+    ), u = n(() => !!a.items.some(({ items: m }) => !!m)), c = (m) => (C) => {
+      e(m, [C]);
+    }, { visibleDomOptions: g, updateVisibleDomOptions: b } = Pe(
+      o,
+      K(a, "items"),
+      E("option"),
+      !1
+    ), f = n(() => a.totalItemCount > 0), h = (m) => {
+      if (!f.value)
+        return;
+      const C = m.target;
+      if (C === o.value || (C == null ? void 0 : C.getAttribute("role")) !== "option")
+        return;
+      const I = g.value.indexOf(C);
+      if (I !== -1) {
+        const N = I + a.virtualScrollStartIndex;
+        O(N);
+      }
+    }, y = async (m) => {
+      var C, I;
+      if (f.value && a.scrollToIndex) {
+        a.scrollToIndex(m), await Y(), await b();
+        const N = m - a.virtualScrollStartIndex;
+        (C = g.value[N]) == null || C.focus();
+      } else
+        (I = g.value[m]) == null || I.focus();
+    }, B = async (m) => {
+      O(m), await y(m);
+    }, {
+      moveToNextElement: R,
+      moveToPreviousElement: p,
+      moveToFirstElement: L,
+      moveToLastElement: T,
+      setListboxFocusedIndex: O
+    } = et(
+      {
+        items: g,
+        totalItemCount: K(a, "totalItemCount")
+      },
+      y
+    ), A = {
+      [V.ARROW_UP]: p,
+      [V.ARROW_DOWN]: R,
+      [V.HOME]: L,
+      [V.END]: T
+    }, M = {
+      [d.SELECT]: c(d.SELECT),
+      [d.SPACE]: c(d.SPACE),
+      [d.TAB]: c(d.TAB),
+      [d.ENTER]: c(d.ENTER)
+    };
+    return l({
+      /**
+       * Reference for a single listbox item.
+       * Required for keyboard navigation in dropdown as $children is removed in vue@3
+       */
+      listboxItemRef: i,
+      /**
+       * Method to set the index of the item to be focused on
+       * Used for focus management to be kept in-sync with parent e.g. dropdowns
+       */
+      setListboxFocusedIndex: O,
+      /**
+       * Navigates to an item by global index, handling virtual scroll if enabled.
+       * Scrolls the virtual list and focuses the item.
+       */
+      navigateToItem: B
+    }), {
+      // Enums
+      BentoListboxEvent: d,
+      // Values
+      listboxRef: o,
+      listboxItemRef: i,
+      selectedItem: r,
+      slots: t,
+      ariaAttributes: v,
+      // Computed
+      hasCategories: u,
+      // Methods
+      onOptionSelected: c,
+      // Keyboard navigation
+      listboxListeners: A,
+      listboxOptionListeners: M,
+      // Virtual scroll focus management
+      handleVirtualScrollingFocus: h
+    };
+  }
+});
+var jt = function() {
+  var e = this, l = e._self._c;
+  return e._self._setupProxy, l("div", e._g(e._b({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], ref: "listboxRef", attrs: { role: "listbox" }, on: { focusin: e.handleVirtualScrollingFocus } }, "div", e.ariaAttributes, !1), e.listboxListeners), [e.hasCategories && e.staticCategories ? [e._l(e.items, function(t) {
+    return [t.items && t.items.length > 0 ? l("bento-listbox-single-select-category", { key: `category-${t.value}`, attrs: { "category-label": t.label } }, e._l(t.items, function(s) {
+      return l("bento-listbox-single-select-option", e._g({ key: s.value, ref: "listboxItemRef", refInFor: !0, attrs: { role: "option", option: s, disabled: e.isOptionDisabled ? e.isOptionDisabled(s) : null, selected: s.value === e.selectedItem.value }, scopedSlots: e._u([e._l(e.slots, function(o, i) {
+        return { key: i, fn: function(r) {
+          return [e._t(i, null, null, r)];
+        } };
+      })], null, !0) }, e.listboxOptionListeners));
+    }), 1) : l("bento-listbox-single-select-option", e._g({ key: `option-${t.value}`, ref: "listboxItemRef", refInFor: !0, attrs: { role: "option", option: t, disabled: e.isOptionDisabled ? e.isOptionDisabled(t) : null, selected: t.value === e.selectedItem.value }, scopedSlots: e._u([e._l(e.slots, function(s, o) {
+      return { key: o, fn: function(i) {
+        return [e._t(o, null, null, i)];
+      } };
+    })], null, !0) }, e.listboxOptionListeners))];
+  })] : e._l(e.items, function(t) {
+    return l("bento-listbox-single-select-option", e._g({ key: t.value, ref: "listboxItemRef", refInFor: !0, attrs: { role: "option", option: t, disabled: e.isOptionDisabled ? e.isOptionDisabled(t) : null, selected: t.value === e.selectedItem.value }, scopedSlots: e._u([e._l(e.slots, function(s, o) {
+      return { key: o, fn: function(i) {
+        return [e._t(o, null, null, i)];
+      } };
+    })], null, !0) }, e.listboxOptionListeners));
+  })], 2);
+}, Ht = [], Jt = /* @__PURE__ */ U(
+  Wt,
+  jt,
+  Ht,
+  !1,
+  null,
+  null
+);
+const Xt = Jt.exports;
+let qe = 0;
+const Zt = {
+  beforeCreate() {
+    this.uuid = qe.toString(), qe += 1;
+  }
+};
+var Qt = function() {
+  var e = this, l = e._self._c;
+  return l("svg", e._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", e.$attrs, !1), [e.$attrs["svg-title"] ? l("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), l("path", { attrs: { fill: "#001222", d: "M9.69043 5.75L4.62988 10.8105L1.56934 7.75L2.62988 6.68945L4.62988 8.68945L8.62988 4.68945L9.69043 5.75Z" } }), l("path", { attrs: { fill: "#001222", d: "M13.9307 5.75L8.87012 10.8105L7.80957 9.75L12.8701 4.68945L13.9307 5.75Z" } })]);
+}, el = [], tl = /* @__PURE__ */ U(
+  Zt,
+  Qt,
+  el,
+  !1,
+  null,
+  null
+);
+const ll = tl.exports, al = {}, sl = /* @__PURE__ */ z({
+  ...al,
+  __name: "decorative-checkbox",
+  props: {
+    disabled: { type: Boolean, default: !1 },
+    indeterminate: { type: Boolean, default: !1 },
+    checked: { type: Boolean, default: !1 },
+    allSelected: { type: Boolean, default: !1 }
+  },
+  setup(a) {
+    const e = a, l = n(() => ({
+      [`b-checkbox-input--${Te.DISABLED}`]: e.disabled
+    })), t = n(() => ({
+      [`b-checkbox-input__outline--${Te.UNCHECKED}`]: !e.checked && !e.indeterminate && !e.allSelected,
+      [`b-checkbox-input__outline--${Te.CHECKED}`]: (e.checked || e.allSelected) && !e.indeterminate,
+      [`b-checkbox-input__outline--${Te.INDETERMINATE}`]: e.indeterminate
+    }));
+    return { __sfc: !0, props: e, conditionalClasses: l, outlineConditionalClasses: t, CheckmarkSmallIcon: gt, MinusSmallIcon: yt, DoubleCheckmarkSmallIcon: ll };
+  }
+});
+var ol = function() {
+  var e = this, l = e._self._c, t = e._self._setupProxy;
+  return l("div", { staticClass: "b-checkbox-input", class: t.conditionalClasses, attrs: { role: "presentation" } }, [e.indeterminate ? l(t.MinusSmallIcon, { staticClass: "b-checkbox-input__icon", attrs: { "svg-title": "", "aria-hidden": "true" } }) : e.allSelected ? l(t.DoubleCheckmarkSmallIcon, { staticClass: "b-checkbox-input__icon", attrs: { "svg-title": "", "aria-hidden": "true", "data-testid": "decorative-checkbox-double-checkmark-icon" } }) : e.checked ? l(t.CheckmarkSmallIcon, { staticClass: "b-checkbox-input__icon", attrs: { "svg-title": "", "aria-hidden": "true" } }) : e._e(), l("div", { staticClass: "b-checkbox-input__outline", class: t.outlineConditionalClasses })], 1);
+}, nl = [], il = /* @__PURE__ */ U(
+  sl,
+  ol,
+  nl,
+  !1,
+  null,
+  "b87bbaf9"
+);
+const Ve = il.exports;
+var tt = /* @__PURE__ */ ((a) => (a.DISABLED = "disabled", a.STATIC_CATEGORY = "static-category", a))(tt || {}), se = /* @__PURE__ */ ((a) => (a.SELECT_CATEGORY = "select-category", a.UNSELECT_CATEGORY = "unselect-category", a.TOGGLE_CATEGORY_VISIBILITY = "toggle-category-visibility", a))(se || {});
+const rl = {
+  "de-DE": {
+    categoryClosed: "{category} geschlossen",
+    categoryOpened: "{category} geöffnet"
+  },
+  "en-GB": {
+    categoryClosed: "{category} closed",
+    categoryOpened: "{category} opened"
+  },
+  "en-US": {
+    categoryClosed: "{category} closed",
+    categoryOpened: "{category} opened"
+  },
+  "es-ES": {
+    categoryClosed: "{category} cerrado",
+    categoryOpened: "{category} abierto"
+  },
+  "es-MX": {
+    categoryClosed: "{category} cerrado",
+    categoryOpened: "{category} abierto"
+  },
+  "fr-FR": {
+    categoryClosed: "{category} fermée",
+    categoryOpened: "{category} ouverte"
+  },
+  "it-IT": {
+    categoryClosed: "{category} chiuso",
+    categoryOpened: "{category} aperto"
+  },
+  "ja-JP": {
+    categoryClosed: "{category}を閉じました",
+    categoryOpened: "{category}を開きました"
+  },
+  "pt-BR": {
+    categoryClosed: "{category} fechada",
+    categoryOpened: "{categoria} aberta"
+  },
+  "zh-CN": {
+    categoryClosed: "{category} 已关闭",
+    categoryOpened: "{category} 已打开"
+  }
+}, cl = z({
+  i18n: { messages: rl },
+  name: "bento-listbox-multi-select-category",
+  components: {
+    BentoTypography: ae,
+    BentoListboxOption: Ae,
+    ChevronDownIcon: Xe,
+    ChevronUpIcon: Ze,
+    DecorativeCheckbox: Ve
+  },
+  props: {
+    /**
+     * The option elements to populate the listbox with.
+     * It must be an array of {@see BentoListboxOptionItem }.
+     *
+     * @property {string} value.label - Text to be displayed in the option
+     * @property {string,number} value.value - Value of the option
+     * @property {BentoListboxOptionItem} value.items - Category items list
+     */
+    category: {
+      type: Object,
+      required: !0
+    },
+    /**
+     * Function that allows the options to be disabled
+     *
+     * @type {BentoListboxIsOptionDisabled}
+     * @param {BentoListboxOptionItem} option - listbox 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: () => !1
+    },
+    /**
+     * The `input` value.
+     * Providing an empty array will select no options.
+     */
+    selectedItemsList: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * If enabled, dropdown will display non-selectable, static categories
+     */
+    staticCategories: { type: Boolean, default: !1 },
+    /**
+     * Category's tabindex
+     */
+    tabindex: { type: Number, default: -1 }
+  },
+  emits: [
+    se.SELECT_CATEGORY,
+    se.UNSELECT_CATEGORY,
+    se.TOGGLE_CATEGORY_VISIBILITY
+  ],
+  setup(a, { emit: e }) {
+    const l = E(!1), { t } = oe(), s = le("category-group"), o = le("category-name"), i = (m) => a.isOptionDisabled ? a.isOptionDisabled(m) : !1, r = n(
+      () => a.category.items.every((m) => i(m))
+    ), v = K(a, "staticCategories"), u = n(() => l.value || a.staticCategories), c = n(() => ({
+      [`b-listbox-multi-select-category--${tt.DISABLED}`]: r.value
+    })), g = (m, C) => {
+      m.preventDefault(), l.value = C !== void 0 ? C : !l.value, e(se.TOGGLE_CATEGORY_VISIBILITY, a.category.value);
+    }, b = (m) => {
+      var N;
+      const C = i(m), I = ((N = a.selectedItemsList) == null ? void 0 : N.includes(m.value)) || !1;
+      return { isDisabled: C, isPreSelected: I };
+    }, f = n(
+      () => a.category.items.filter((m) => {
+        const { isDisabled: C, isPreSelected: I } = b(m);
+        return C && I || !C;
+      })
+    ), h = n(
+      () => {
+        var m;
+        return (m = f.value) == null ? void 0 : m.filter(
+          ({ value: C }) => {
+            var I;
+            return (I = a.selectedItemsList) == null ? void 0 : I.includes(C);
+          }
+        );
+      }
+    ), y = n(() => {
+      const m = l.value ? "categoryOpened" : "categoryClosed";
+      return t(m, { category: a.category.label });
+    }), B = () => {
+      e(se.SELECT_CATEGORY);
+    }, R = () => {
+      e(se.UNSELECT_CATEGORY);
+    }, { isAllSelected: p, isIndeterminate: L, toggleSelectAll: T } = Qe(
+      h,
+      f,
+      B,
+      R
+    ), O = n(() => L.value ? "mixed" : `${p.value}`), A = E(p.value), M = () => {
+      A.value = !A.value, T(A.value);
+    };
+    return Z(p, () => {
+      A.value = p.value;
+    }), {
+      // Values
+      chevronTitle: y,
+      conditionalClass: c,
+      hasAllPropsDisabled: r,
+      isOpen: l,
+      isAllSelected: p,
+      isIndeterminate: L,
+      isStaticCategory: v,
+      categoryGroupId: s,
+      categoryNameId: o,
+      // Computed
+      showItemChildren: u,
+      ariaCheckedComputed: O,
+      // Methods
+      handleSelectAll: M,
+      toggleOpen: g,
+      toggleSelectAll: T
+    };
+  }
+});
+var dl = function() {
+  var e = this, l = e._self._c;
+  return e._self._setupProxy, l("div", [e.isStaticCategory ? l("div", { staticClass: "b-listbox-multi-select-category b-listbox-multi-select-category--static-category", attrs: { "aria-hidden": "true" } }, [l("span", { staticClass: "b-listbox-multi-select-category__label" }, [l("bento-typography", { staticClass: "b-listbox-multi-select-category__label-text", attrs: { el: "span", variant: "caption" } }, [e._v(" " + e._s(e.category.label) + " ")])], 1)]) : l("bento-listbox-option", { staticClass: "b-listbox-multi-select-category__option", class: e.conditionalClass, attrs: { tabindex: e.tabindex, "aria-selected": e.ariaCheckedComputed !== "false", "aria-checked": e.ariaCheckedComputed, "aria-disabled": e.hasAllPropsDisabled, "aria-expanded": `${e.isOpen}`, role: "treeitem", "aria-owns": e.categoryGroupId, "aria-labelledby": e.categoryNameId }, on: { click: e.handleSelectAll, "enter-pressed": e.handleSelectAll, "space-pressed": function(t) {
+    return t.preventDefault(), e.handleSelectAll.apply(null, arguments);
+  } }, nativeOn: { keydown: [function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "arrow-left", void 0, t.key, void 0) ? null : e.toggleOpen(t, !1);
+  }, function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "arrow-right", void 0, t.key, void 0) ? null : e.toggleOpen(t, !0);
+  }] } }, [l("decorative-checkbox", { attrs: { indeterminate: e.isIndeterminate, disabled: e.hasAllPropsDisabled, checked: e.isAllSelected } }), l("span", { staticClass: "b-listbox-multi-select-category__label" }, [l("bento-typography", { staticClass: "b-listbox-multi-select-category__label-text", attrs: { id: e.categoryNameId, el: "span" } }, [e._v(" " + e._s(e.category.label) + " ")]), l("div", { staticClass: "b-listbox-multi-select-category__label-chevron", attrs: { "aria-hidden": "true", "data-testid": "toggle-listbox" }, on: { "!click": function(t) {
+    return t.stopPropagation(), e.toggleOpen.apply(null, arguments);
+  } } }, [e.isOpen ? l("chevron-up-icon", { attrs: { "svg-title": e.chevronTitle } }) : l("chevron-down-icon", { attrs: { "svg-title": e.chevronTitle } })], 1)], 1)], 1), l("div", { directives: [{ name: "show", rawName: "v-show", value: e.showItemChildren, expression: "showItemChildren" }], attrs: { id: e.categoryGroupId, role: "group", "aria-label": e.category.label } }, [e._t("default")], 2)], 1);
+}, ul = [], pl = /* @__PURE__ */ U(
+  cl,
+  dl,
+  ul,
+  !1,
+  null,
+  "00ccd708"
+);
+const fl = pl.exports;
+var X = /* @__PURE__ */ ((a) => (a.SELECT_CATEGORY = "select-category", a.TOGGLE_CHECKBOX_SELECTION = "toggle-checkbox-selection", a.UNSELECT_CATEGORY = "unselect-category", a.TOGGLE_CATEGORY_VISIBILITY = "toggle-category-visibility", a))(X || {});
+const bl = z({
+  name: "listbox-multi-select-options",
+  components: {
+    BentoListboxOption: Ae,
+    BentoTypography: ae,
+    ListboxMultiSelectCategory: fl,
+    DecorativeCheckbox: Ve
+  },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * Indicates if the items listed are inside a category
+     * so they can be padded to right by one level in recursion.
+     * Items of categories are automatically defined as "categoryItems"
+     */
+    categoryItems: { type: Boolean, default: !1 },
+    /**
+     * Current focused option index
+     */
+    focusedIndex: { type: Number, default: 0 },
+    /**
+     * Function that allows the options to be disabled
+     *
+     * @type {BentoListboxIsOptionDisabled}
+     * @param {BentoListboxOptionItem} option - listbox 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: () => !1
+    },
+    /**
+     * The option elements to populate the listbox with.
+     * It must be an array of {@see BentoListboxOptionItem }.
+     *
+     * @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
+    },
+    /**
+     * Indicates if the elements options are inside a multi-level category
+     */
+    isMultiLevel: { type: Boolean, default: !1 },
+    /**
+     * 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: { type: Boolean, default: !1 },
+    /**
+     * List of selected items.
+     * Providing an empty array will select no options.
+     */
+    selectedItemsList: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * If enabled, dropdown will display non-selectable, static categories
+     */
+    staticCategories: { type: Boolean, default: !1 },
+    /**
+     * Object with the index of each item.
+     */
+    itemsIndex: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  emits: [
+    X.TOGGLE_CHECKBOX_SELECTION,
+    X.SELECT_CATEGORY,
+    X.UNSELECT_CATEGORY,
+    X.TOGGLE_CATEGORY_VISIBILITY
+  ],
+  setup(a, { emit: e }) {
+    const l = (u) => {
+      a.isOptionDisabled(u) || e(X.TOGGLE_CHECKBOX_SELECTION, u);
+    }, t = (u) => !!u.items, s = (u) => {
+      const c = a.isMultiLevel && a.searching;
+      return u.description && (!a.isMultiLevel || c);
+    }, o = (u) => u.items ? !!u.items.find((c) => a.selectedItemsList.includes(c.value)) : a.selectedItemsList.includes(u.value), i = (u) => {
+      if (t(u)) {
+        const c = o(u) ? X.UNSELECT_CATEGORY : X.SELECT_CATEGORY;
+        e(c, u);
+      } else
+        l(u);
+    };
+    return {
+      // Values
+      conditionalClasses: n(() => ({
+        "b-listbox-multi-select-options__static-category-option": a.staticCategories,
+        "b-listbox-multi-select-options__category-option": a.categoryItems
+      })),
+      // Methods
+      isOptionSelected: o,
+      shouldShowDescription: s,
+      toggleCheckboxSelection: l,
+      toggleSearchOption: i,
+      computedTabindex: (u) => a.itemsIndex[u] === a.focusedIndex ? 0 : -1,
+      // Enums
+      BentoListboxEvent: d,
+      ListboxMultiSelectOptionsEvent: X
+    };
+  }
+});
+var vl = function() {
+  var e = this, l = e._self._c;
+  return e._self._setupProxy, l("div", e._l(e.items, function(t) {
+    return l("div", { key: `selected-${t.value}` }, [e.searching && e.isMultiLevel ? [l("bento-listbox-option", { staticClass: "b-listbox-multi-select-options", class: e.conditionalClasses, attrs: { disabled: e.isOptionDisabled ? e.isOptionDisabled(t) : null, tabindex: e.computedTabindex(t.value), "aria-selected": `${e.isOptionSelected(t)}`, "aria-checked": `${e.isOptionSelected(t)}`, "aria-disabled": e.isOptionDisabled ? e.isOptionDisabled(t) : null, role: e.$attrs.role || "option" }, on: { click: function(s) {
+      return e.toggleSearchOption(t);
+    }, "enter-pressed": function(s) {
+      return e.toggleSearchOption(t);
+    }, "space-pressed": function(s) {
+      return s.preventDefault(), e.toggleSearchOption(t);
+    } } }, [l("decorative-checkbox", { attrs: { disabled: e.isOptionDisabled ? e.isOptionDisabled(t) : null, checked: e.isOptionSelected(t) } }), e._t("default", function() {
+      return [l("span", { staticClass: "b-listbox-multi-select__option-text" }, [l("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(t.label))]), e.shouldShowDescription(t) ? l("bento-typography", { staticClass: "b-listbox-multi-select__option-description", attrs: { el: "span" } }, [e._v(" " + e._s(t.description) + " ")]) : e._e()], 1)];
+    }, null, t)], 2)] : [t.items ? [l("listbox-multi-select-category", { attrs: { category: t, "static-categories": e.staticCategories, "is-option-disabled": e.isOptionDisabled, "selected-items-list": e.selectedItemsList, tabindex: e.computedTabindex(t.value) }, on: { "select-category": function(s) {
+      return e.$emit(e.ListboxMultiSelectOptionsEvent.SELECT_CATEGORY, t);
+    }, "unselect-category": function(s) {
+      return e.$emit(e.ListboxMultiSelectOptionsEvent.UNSELECT_CATEGORY, t);
+    }, "toggle-category-visibility": function(s) {
+      return e.$emit(e.ListboxMultiSelectOptionsEvent.TOGGLE_CATEGORY_VISIBILITY, s);
+    } } }, [l("listbox-multi-select-options", { attrs: { "category-items": "", items: t.items, "is-option-disabled": e.isOptionDisabled, "items-index": e.itemsIndex, "focused-index": e.focusedIndex, "is-multi-level": e.isMultiLevel, "static-categories": e.staticCategories, "selected-items-list": e.selectedItemsList, searching: e.searching, role: e.$attrs.role || "option" }, on: { "toggle-checkbox-selection": (s) => e.toggleCheckboxSelection(s) } })], 1)] : l("bento-listbox-option", { staticClass: "b-listbox-multi-select-options", class: e.conditionalClasses, attrs: { disabled: e.isOptionDisabled ? e.isOptionDisabled(t) : null, tabindex: e.computedTabindex(t.value), "aria-selected": `${e.isOptionSelected(t)}`, "aria-checked": `${e.isOptionSelected(t)}`, "aria-disabled": e.isOptionDisabled ? e.isOptionDisabled(t) : null, role: e.$attrs.role || "option" }, on: { click: function(s) {
+      return e.toggleCheckboxSelection(t);
+    }, "enter-pressed": function(s) {
+      return e.toggleCheckboxSelection(t);
+    }, "space-pressed": function(s) {
+      return s.preventDefault(), e.toggleCheckboxSelection(t);
+    } } }, [l("decorative-checkbox", { attrs: { disabled: e.isOptionDisabled ? e.isOptionDisabled(t) : null, checked: e.isOptionSelected(t) } }), e._t("default", function() {
+      return [l("span", { staticClass: "b-listbox-multi-select__option-text" }, [l("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(t.label))]), e.shouldShowDescription(t) ? l("bento-typography", { staticClass: "b-listbox-multi-select__option-description", attrs: { el: "span" } }, [e._v(" " + e._s(t.description) + " ")]) : e._e()], 1)];
+    }, null, t)], 2)]], 2);
+  }), 0);
+}, ml = [], _l = /* @__PURE__ */ U(
+  bl,
+  vl,
+  ml,
+  !1,
+  null,
+  "0985e0a4"
+);
+const yl = _l.exports, lt = (a) => {
+  const e = n(() => {
+    var t;
+    return !!((t = a.value) != null && t.find(({ items: s }) => !!s));
+  }), l = n(() => {
+    var t;
+    return e.value ? (t = a.value) == null ? void 0 : t.reduce((s, o) => (o.items ? s.push(...o.items.flat()) : s.push(o), s), []) : a.value;
+  });
+  return {
+    isMultiLevelSelect: e,
+    flattenedItemsList: l
+  };
+}, gl = {
+  "de-DE": {
+    allSelected: "Alle ausgewählt ({total})",
+    numberOfTotalSelected: "{number} von {total} ausgewählt",
+    numbersSelected: "{number} ausgewählt",
+    selectAll: "Alle auswählen ({total})"
+  },
+  "en-GB": {
+    allSelected: "All selected ({total})",
+    numberOfTotalSelected: "{number} of {total} selected",
+    numbersSelected: "{number} selected",
+    selectAll: "Select all ({total})"
+  },
+  "en-US": {
+    allSelected: "All selected ({total})",
+    numberOfTotalSelected: "{number} of {total} selected",
+    numbersSelected: "{number} selected",
+    selectAll: "Select all ({total})"
+  },
+  "es-ES": {
+    allSelected: "Todos seleccionados ({total})",
+    numberOfTotalSelected: "{number} de {total} seleccionados",
+    numbersSelected: "{number} seleccionado",
+    selectAll: "Seleccionar todo ({total})"
+  },
+  "es-MX": {
+    allSelected: "Todos seleccionados ({total})",
+    numberOfTotalSelected: "{number} de {total} seleccionados",
+    numbersSelected: "{número} seleccionado",
+    selectAll: "Seleccionar todo ({total})"
+  },
+  "fr-FR": {
+    allSelected: "Tous sélectionnés ({total})",
+    numberOfTotalSelected: "{number} sélectionné(s) sur {total}",
+    numbersSelected: "{number} sélectionné(s)",
+    selectAll: "Tout sélectionner ({total})"
+  },
+  "it-IT": {
+    allSelected: "Tutti i selezionati ({total})",
+    numberOfTotalSelected: "{numero} su {totale} selezionati",
+    numbersSelected: "{numero} selezionati",
+    selectAll: "Seleziona tutto ({total})"
+  },
+  "ja-JP": {
+    allSelected: "すべて選択 ({total})",
+    numberOfTotalSelected: "{total}件中{number}件を選択済み",
+    numbersSelected: "{number}件選択済み",
+    selectAll: "すべて選択 ({total})"
+  },
+  "pt-BR": {
+    allSelected: "Todos os selecionados ({total})",
+    numberOfTotalSelected: "{number} de {total} selecionados",
+    numbersSelected: "{number} selecionados",
+    selectAll: "Selecionar tudo ({total})"
+  },
+  "zh-CN": {
+    allSelected: "全部已选 ({total})",
+    numberOfTotalSelected: "已选择 {number} 个，共 {total} 个",
+    numbersSelected: "已选择 {number} 个",
+    selectAll: "选择全部（{total}）个"
+  }
+}, hl = { i18n: { messages: gl } }, Sl = /* @__PURE__ */ z({
+  ...hl,
+  __name: "listbox-multi-select",
+  props: {
+    hasMoreItems: { type: Boolean, default: !1 },
+    isOptionDisabled: { default: () => () => !1 },
+    items: null,
+    lazyLoadType: { default: "none" },
+    searching: { type: Boolean, default: !1 },
+    selectedValues: null,
+    staticCategories: { type: Boolean, default: !1 }
+  },
+  emits: ["select"],
+  setup(a, { expose: e, emit: l }) {
+    const t = a, { t: s, n: o } = oe(), i = Se(), r = $e(), v = n(
+      () => {
+        var _, S, x, k;
+        return {
+          "aria-label": (_ = r["aria-label"]) == null ? void 0 : _.toString(),
+          "aria-busy": (S = r["aria-busy"]) == null ? void 0 : S.toString(),
+          "aria-atomic": (x = r["aria-atomic"]) == null ? void 0 : x.toString(),
+          "aria-live": (k = r["aria-live"]) == null ? void 0 : k.toString(),
+          "aria-multiselectable": !0
+        };
+      }
+    ), u = E(null), c = E(null), g = E(null), b = E(null), f = n(() => t.selectedValues.map(({ value: _ }) => _)), { isMultiLevelSelect: h, flattenedItemsList: y } = lt(K(t, "items")), B = n(() => h.value && !t.staticCategories), R = n(() => B.value ? "tree" : "listbox"), p = n(() => B.value ? "treeitem" : "option"), L = (_) => {
+      var k;
+      const S = t.isOptionDisabled(_), x = ((k = f.value) == null ? void 0 : k.includes(_.value)) || !1;
+      return { isDisabled: S, isPreSelected: x };
+    }, T = n(() => {
+      if (t.searching && h)
+        return t.items;
+      const _ = y.value.filter((S) => {
+        const { isDisabled: x, isPreSelected: k } = L(S);
+        return x && k || !x;
+      });
+      return t.selectedValues.forEach((S) => {
+        _.find((x) => x.value === S.value) || _.push(S);
+      }), _;
+    }), O = n(
+      () => {
+        var _;
+        return (_ = T.value) == null ? void 0 : _.filter((S) => {
+          var x;
+          return S.items && h.value && t.searching ? S.items.filter(
+            (w) => (t.selectedValues ?? []).includes(w.value)
+          ).length === S.items.length : (x = f.value) == null ? void 0 : x.includes(S.value);
+        });
+      }
+    ), A = () => h.value && !t.searching ? y.value.length : t.items.length, M = n(() => {
+      var k;
+      const _ = T.value.length, S = A(), x = ((k = O.value) == null ? void 0 : k.length) || 0;
+      return x === 0 ? s("selectAll", { total: o(_) }) : x === S ? s("allSelected", { total: o(S) }) : x <= S ? s("numberOfTotalSelected", { number: o(x), total: o(S) }) : s("numbersSelected", { number: o(x) });
+    }), m = (_) => {
+      const S = (k) => {
+        const { isDisabled: w, isPreSelected: W } = L(k);
+        return w && W || !w;
+      }, x = _.filter(S).filter((k) => !f.value.includes(k.value));
+      l("select", [...t.selectedValues, ...x]);
+    }, C = (_) => {
+      const S = (w) => {
+        const { isDisabled: W, isPreSelected: Le } = L(w);
+        return !(W && Le);
+      }, x = _.filter(S).map(({ value: w }) => w), k = t.selectedValues.filter((w) => !(x != null && x.includes(w.value)));
+      l("select", k);
+    }, I = () => {
+      m(y.value);
+    }, N = () => {
+      C(y.value);
+    }, { isAllSelected: D, isIndeterminate: $, toggleSelectAll: J } = Qe(
+      O,
+      T,
+      I,
+      N
+    ), Q = n(() => $.value ? "mixed" : `${D.value}`), q = E(D.value), F = () => {
+      q.value = !q.value, J(q.value);
+    };
+    Z(D, () => {
+      q.value = D.value;
+    });
+    const ee = (_) => {
+      m(_.items);
+    }, ne = (_) => {
+      C(_.items);
+    }, ve = (_, S) => {
+      let x = !1;
+      const k = t.selectedValues.filter(({ value: w }) => S.value === w ? (x = !0, !1) : !0);
+      x || k.push(S), l(_, k);
+    }, De = n(() => {
+      if (!h.value)
+        return t.selectedValues;
+      const _ = (w) => f.value.includes(w.value), S = (w) => !t.staticCategories && w.every((W) => _(W));
+      return t.items.flatMap(
+        (w) => w.items && !S(w.items) ? w.items : w
+      ).filter((w) => w.items ? !0 : _(w));
+    }), ke = n(() => {
+      var x, k, w, W;
+      const _ = ["automatic", "button"].includes(t.lazyLoadType), S = ((x = t.selectedValues) == null ? void 0 : x.length) > 0 && ((k = O.value) == null ? void 0 : k.length) !== ((w = y.value) == null ? void 0 : w.length);
+      return _ && t.hasMoreItems ? !!((W = t.selectedValues) != null && W.length) : S;
+    }), me = n(() => ["automatic", "button"].includes(t.lazyLoadType) ? !t.hasMoreItems : !0), H = E([]), { visibleDomOptions: ie, updateVisibleDomOptions: _e } = Pe(
+      u,
+      K(t, "items"),
+      p
+    ), xe = (_) => {
+      H.value.includes(_) ? H.value = H.value.filter((S) => S !== _) : H.value.push(_), Y(() => {
+        _e();
+      });
+    }, Ce = (_) => {
+      var S;
+      (S = ie.value[_]) == null || S.focus();
+    }, {
+      moveToNextElement: Oe,
+      moveToPreviousElement: re,
+      moveToFirstElement: ye,
+      moveToLastElement: ce,
+      preventDefault: de,
+      focusedIndex: ue,
+      setListboxFocusedIndex: ge
+    } = et(
+      {
+        items: ie
+      },
+      Ce
+    ), Ee = {
+      [V.ARROW_UP]: (_) => re(_),
+      [V.ARROW_DOWN]: (_) => Oe(_),
+      [V.HOME]: ye,
+      [V.END]: ce
+    };
+    e({
+      /**
+       * Method to set the index of the item to be focused on
+       * Used for focus management to be kept in-sync with parent e.g. dropdowns
+       */
+      setListboxFocusedIndex: ge
+    });
+    const Be = {
+      [V.ARROW_UP]: de,
+      [V.ARROW_DOWN]: de
+    }, Ie = n(() => {
+      let _ = me.value ? 1 : 0;
+      const S = {};
+      return t.items.forEach((x) => {
+        let k = H.value.includes(x.value);
+        x.items ? (t.staticCategories ? k = !0 : S[x.value] = _++, k && x.items.forEach((w) => S[w.value] = _++)) : S[x.value] = _++;
+      }), S;
+    });
+    return { __sfc: !0, props: t, emit: l, t: s, n: o, slots: i, attrs: r, ariaAttributes: v, listboxRef: u, selectAllListboxItemsRef: c, selectedListboxItemsRef: g, listboxItemsRef: b, selectedItemsList: f, isMultiLevelSelect: h, flattenedItemsList: y, isTreePattern: B, computedRole: R, computedOptionRole: p, optionStates: L, enabledItems: T, visibleSelectedList: O, calculateTotalItems: A, selectAllCheckboxText: M, selectAll: m, unselectAll: C, selectAllItems: I, unselectAllItems: N, isAllSelected: D, isIndeterminate: $, toggleSelectAll: J, ariaCheckedComputed: Q, isSelectAllOn: q, handleSelectAll: F, selectAllCategory: ee, unselectAllCategory: ne, toggleCheckboxSelection: ve, selectedOptions: De, showSelectedItems: ke, showSelectAllCheckbox: me, expandedCategories: H, visibleDomOptions: ie, updateVisibleDomOptions: _e, toggleCategoryVisibility: xe, focusItem: Ce, moveToNextElement: Oe, moveToPreviousElement: re, moveToFirstElement: ye, moveToLastElement: ce, preventDefault: de, focusedIndex: ue, setListboxFocusedIndex: ge, listboxListeners: Ee, chipsSectionListeners: Be, computedItemsIndex: Ie, DecorativeCheckbox: Ve, BentoTypography: ae, BentoChip: ht, BentoListboxOption: Ae, ListboxMultiSelectOptions: yl, vBentoKeyboardNavigationDirective: we, BentoListboxEvent: d };
+  }
+});
+var xl = function() {
+  var e = this, l = e._self._c, t = e._self._setupProxy;
+  return l("div", { ref: "listboxRef", staticClass: "b-listbox-multi-select" }, [t.showSelectedItems ? l("div", [l("ul", e._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], staticClass: "b-listbox-multi-select__chips" }, t.chipsSectionListeners), e._l(t.selectedOptions, function(s) {
+    return l("li", { key: s.value }, [l(t.BentoChip, { ref: "selectedListboxItemsRef", refInFor: !0, attrs: { disabled: e.isOptionDisabled(s), label: s.label, condensed: "" }, on: { click: function(o) {
+      s.items ? t.unselectAllCategory(s) : t.toggleCheckboxSelection("select", s);
+    } } })], 1);
+  }), 0), l("hr", { staticClass: "b-listbox-multi-select__divider", attrs: { "aria-hidden": "true" } })]) : e._e(), l("div", e._g(e._b({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], attrs: { role: t.computedRole } }, "div", t.ariaAttributes, !1), t.listboxListeners), [t.showSelectAllCheckbox ? l(t.BentoListboxOption, { ref: "selectAllListboxItemsRef", staticClass: "b-listbox-multi-select__option", attrs: { tabindex: t.focusedIndex === 0 ? 0 : -1, "aria-selected": t.ariaCheckedComputed !== "false", "aria-checked": t.ariaCheckedComputed, role: t.computedOptionRole }, on: { click: t.handleSelectAll, "enter-pressed": t.handleSelectAll, "space-pressed": function(s) {
+    return s.preventDefault(), t.handleSelectAll.apply(null, arguments);
+  } } }, [l(t.DecorativeCheckbox, { attrs: { checked: t.isAllSelected, indeterminate: t.isIndeterminate } }), l(t.BentoTypography, { attrs: { el: "span" } }, [e._v(" " + e._s(t.selectAllCheckboxText) + " ")])], 1) : e._e(), t.showSelectAllCheckbox ? l("hr", { staticClass: "b-listbox-multi-select__divider", attrs: { "aria-hidden": "true" } }) : e._e(), l(t.ListboxMultiSelectOptions, { ref: "listboxItemsRef", attrs: { items: e.items, "is-option-disabled": e.isOptionDisabled, "is-multi-level": t.isMultiLevelSelect, "static-categories": e.staticCategories, searching: e.searching, "selected-items-list": t.selectedItemsList, "focused-index": t.focusedIndex, "items-index": t.computedItemsIndex, role: t.computedOptionRole }, on: { "toggle-checkbox-selection": function(s) {
+    return t.toggleCheckboxSelection("select", s);
+  }, "select-category": t.selectAllCategory, "unselect-category": t.unselectAllCategory, "toggle-category-visibility": t.toggleCategoryVisibility, "space-pressed": function(s) {
+    return t.toggleCheckboxSelection(t.BentoListboxEvent.SPACE, s);
+  }, "tab-pressed": function(s) {
+    return t.toggleCheckboxSelection(t.BentoListboxEvent.TAB, s);
+  }, "enter-pressed": function(s) {
+    return t.toggleCheckboxSelection(t.BentoListboxEvent.ENTER, s);
+  } }, scopedSlots: e._u([e._l(t.slots, function(s, o) {
+    return { key: o, fn: function(i) {
+      return [e._t(o, null, null, i)];
+    } };
+  })], null, !0) })], 1)]);
+}, Cl = [], Ol = /* @__PURE__ */ U(
+  Sl,
+  xl,
+  Cl,
+  !1,
+  null,
+  "b81d7402"
+);
+const Ye = Ol.exports, at = (a, e = 300) => {
+  let l;
+  return (...s) => {
+    l && clearTimeout(l), l = setTimeout(() => a(...s), e);
+  };
+}, El = {
+  "de-DE": {
+    loading: "Laden",
+    showMore: "Mehr anzeigen"
+  },
+  "en-GB": {
+    loading: "Loading",
+    showMore: "Show more"
+  },
+  "en-US": {
+    loading: "Loading",
+    showMore: "Show more"
+  },
+  "es-ES": {
+    loading: "Cargando",
+    showMore: "Mostrar más"
+  },
+  "es-MX": {
+    loading: "Cargando",
+    showMore: "Mostrar más"
+  },
+  "fr-FR": {
+    loading: "Chargement",
+    showMore: "Afficher plus"
+  },
+  "it-IT": {
+    loading: "Caricamento",
+    showMore: "Mostra di più"
+  },
+  "ja-JP": {
+    loading: "読み込み中",
+    showMore: "さらに表示"
+  },
+  "pt-BR": {
+    loading: "Carregando",
+    showMore: "Mostrar mais"
+  },
+  "zh-CN": {
+    loading: "正在加载",
+    showMore: "显示更多"
+  }
+}, Il = 36, Ll = z({
+  name: "bento-listbox",
+  components: {
+    BentoEmptyState: mt,
+    BentoListboxSingleSelect: Xt,
+    BentoListboxMultiSelect: Ye,
+    BentoTypography: ae,
+    BentoLoadingIndicator: vt,
+    BentoLoadingButton: St
+  },
+  directives: { BentoKeyboardNavigationDirective: we },
+  i18n: { messages: El },
+  props: {
+    /**
+     * Defines a string value that labels an interactive element.
+     */
+    ariaLabel: { type: String, default: null },
+    /**
+     * Empty state props that will be used with the inner empty state component to be displayed when no search results are found.
+     */
+    emptyState: {
+      type: Object,
+      default: void 0
+    },
+    /**
+     * 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 {BentoListboxIsOptionDisabled}
+     * @param {BentoListboxOptionItem} option - Listbox 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: () => {
+      }
+    },
+    /**
+     * The option elements to populate the listbox with.
+     * It must be an array of {@see BentoListboxOptionItem }
+     *  * @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
+    },
+    /**
+     * Indicates if new options are lazy loading.
+     */
+    loading: { type: Boolean, default: !1 },
+    /**
+     * 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: te.NONE,
+      validator: (a) => Object.values(te).includes(a)
+    },
+    /**
+     * Indicates the listbox is loading filtered items.
+     */
+    componentLoading: { type: Boolean, default: !1 },
+    /**
+     * If enabled, the user will be able to select multiple items.
+     */
+    multiple: { type: Boolean, default: !1 },
+    /**
+     * If enabled, dropdown will display non-selectable, static categories
+     */
+    staticCategories: { type: Boolean, default: !1 },
+    /**
+     * Messaged displayed when no items are listed in the listbox
+     */
+    noResultsMessage: { type: String, required: !0 },
+    /**
+     * 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: Ye.props.searching,
+    /**
+     * 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: () => []
+    },
+    /**
+     * 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: [
+    d.SELECT,
+    d.SPACE,
+    d.SHOW_MORE,
+    d.ENTER,
+    d.ESCAPE,
+    d.TAB
+  ],
+  setup(a, { emit: e, slots: l }) {
+    const t = E([]), s = K(a, "items"), { t: o } = oe(), i = n(() => a.lazyLoadType !== te.AUTOMATIC), r = n(() => a.lazyLoadType === te.AUTOMATIC), v = () => {
+      var F;
+      return typeof (a == null ? void 0 : a.virtualScroll) == "object" && ((F = a == null ? void 0 : a.virtualScroll) != null && F.itemHeight) ? a.virtualScroll.itemHeight : Il;
+    }, u = !(a != null && a.multiple) && (a == null ? void 0 : a.virtualScroll) !== !1 && (a == null ? void 0 : a.lazyLoadType) === "none", {
+      containerRef: c,
+      containerProps: g,
+      onScroll: b,
+      list: f,
+      wrapperProps: h,
+      scrollToIndex: y,
+      startIndex: B
+    } = Lt(s, {
+      itemHeight: v(),
+      // Disable virtual scrolling if not enabled or if lazy loading is enabled or if multi-select
+      disabled: !u
+    }), R = n(() => u ? s.value.length : 0), p = n(
+      () => a.componentLoading !== void 0 || i.value ? "true" : void 0
+    ), L = n(
+      () => i.value && a.loading || a.componentLoading ? "true" : "false"
+    ), T = n(
+      () => i.value || a.componentLoading !== void 0 ? "polite" : void 0
+    ), O = n(
+      () => ({
+        "aria-label": a.ariaLabel,
+        "aria-busy": L.value,
+        "aria-atomic": p.value,
+        "aria-live": T.value
+      })
+    ), A = n(
+      () => a.componentLoading ? {
+        ...O.value,
+        role: "alert"
+      } : {}
+    ), M = (F) => (ee) => {
+      e(F, ee);
+    }, m = () => {
+      e(d.SHOW_MORE);
+    }, C = at(() => {
+      const F = c.value;
+      if (!F)
+        return;
+      const ee = Math.round(F.scrollTop) + F.clientHeight >= F.scrollHeight;
+      a.hasMoreItems && ee && !a.loading && m();
+    }), I = () => {
+      r.value ? C() : b();
+    }, N = n(() => {
+      var F;
+      return ((F = a.items) == null ? void 0 : F.length) === 0;
+    }), D = n(
+      () => a.lazyLoadType === te.BUTTON && a.hasMoreItems
+    ), $ = n(
+      () => a.loading ? Ue.LOADING : Ue.START
+    ), J = n(() => a.loading ? o("loading") : o("showMore")), Q = n(() => ({
+      ...a.emptyState,
+      variant: "condensed"
+    })), q = {
+      [d.SELECT]: M(d.SELECT),
+      [d.SPACE]: M(d.SPACE),
+      [d.TAB]: M(d.TAB),
+      [d.ENTER]: M(d.ENTER)
+    };
+    return {
+      // Refs
+      listboxRef: c,
+      listboxItemRef: t,
+      // a11y
+      ariaAttributes: O,
+      listboxContainerAttributes: A,
+      // Values
+      containerProps: g,
+      isSearchResultEmpty: N,
+      limitedEmptyStateProps: Q,
+      loadingButtonState: $,
+      slots: l,
+      shouldDisplayShowMoreButton: D,
+      showMoreButtonText: J,
+      virtualisedItems: f,
+      wrapperProps: h,
+      // Virtual scroll
+      totalItemCount: R,
+      scrollToIndex: y,
+      virtualScrollStartIndex: B,
+      // Enums
+      BentoKeyboardNavigationKeyDownEvent: V,
+      BentoListboxEvent: d,
+      // Methods
+      onListboxContainerScroll: I,
+      onOptionSelected: M,
+      emitShowMore: m,
+      listboxListeners: q
+    };
+  }
+});
+var Tl = function() {
+  var t;
+  var e = this, l = e._self._c;
+  return e._self._setupProxy, l("div", e._b({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], ref: "listboxRef", staticClass: "b-listbox", style: (t = e.containerProps) == null ? void 0 : t.style, attrs: { id: e.id, tabindex: "-1", "data-testid": "listbox-container" }, on: { scroll: e.onListboxContainerScroll } }, "div", e.listboxContainerAttributes, !1), [l("div", e._b({}, "div", e.wrapperProps, !1), [e.componentLoading ? l("div", { staticClass: "b-listbox__loading-filtered-items" }, [l("bento-loading-indicator")], 1) : e.isSearchResultEmpty ? l("div", { staticClass: "b-listbox__empty-search-message" }, [e.emptyState ? l("bento-empty-state", e._b({}, "bento-empty-state", e.limitedEmptyStateProps, !1)) : l("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(e.noResultsMessage))])], 1) : [e.multiple ? [l("bento-listbox-multi-select", e._g(e._b({ ref: "listboxItemRef", attrs: { "has-more-items": e.hasMoreItems, items: e.items, "lazy-load-type": e.lazyLoadType, "static-categories": e.staticCategories, "selected-values": e.selectedValue, searching: e.searching, "is-option-disabled": e.isOptionDisabled }, scopedSlots: e._u([e._l(e.slots, function(s, o) {
+    return { key: o, fn: function(i) {
+      return [e._t(o, null, null, i)];
+    } };
+  })], null, !0) }, "bento-listbox-multi-select", e.ariaAttributes, !1), e.listboxListeners))] : [l("bento-listbox-single-select", e._g(e._b({ ref: "listboxItemRef", attrs: { items: e.virtualisedItems, "total-item-count": e.totalItemCount, "scroll-to-index": e.scrollToIndex, "virtual-scroll-start-index": e.virtualScrollStartIndex, "selected-value": e.selectedValue, "static-categories": e.staticCategories, "is-option-disabled": e.isOptionDisabled }, scopedSlots: e._u([e._l(e.slots, function(s, o) {
+    return { key: o, fn: function(i) {
+      return [e._t(o, null, null, i)];
+    } };
+  })], null, !0) }, "bento-listbox-single-select", e.ariaAttributes, !1), e.listboxListeners))], e.shouldDisplayShowMoreButton ? l("div", { staticClass: "b-listbox__lazy-load" }, [l("bento-loading-button", { attrs: { state: e.loadingButtonState, variant: "secondary" }, on: { "!click": function(s) {
+    return e.emitShowMore.apply(null, arguments);
+  } } }, [e._v(" " + e._s(e.showMoreButtonText) + " ")])], 1) : e.loading ? l("div", { staticClass: "b-listbox__lazy-load" }, [l("bento-loading-indicator")], 1) : e._e()]], 2)]);
+}, wl = [], Al = /* @__PURE__ */ U(
+  Ll,
+  Tl,
+  wl,
+  !1,
+  null,
+  "7819d7a2"
+);
+const Me = Al.exports, Ne = (a, e) => {
+  for (const l of a) {
+    if (l.value === e)
+      return l;
+    if (l.items) {
+      const t = Ne(l.items, e);
+      if (t)
+        return t;
+    }
+  }
+  return null;
+}, Dl = (a) => typeof a == "object" && a !== null && "value" in a && "label" in a, kl = (a, e, l, t) => {
+  const s = E([]), o = E(), i = (c) => {
+    l.value ? o.value = c.map(({ value: g }) => g) : o.value = c.length > 0 ? c[0].value : null;
+  }, r = (c) => {
+    l.value ? o.value = c.map(({ value: g, label: b }) => ({ value: g, label: b })) : o.value = c.length > 0 ? { value: c[0].value, label: c[0].label } : null;
+  }, v = (c) => {
+    s.value = c, t != null && t.value ? r(c) : i(c);
+  }, u = () => {
+    s.value = [], o.value = null;
+  };
+  return Z(
+    () => e.value,
+    () => {
+      if (!e.value && e.value !== 0) {
+        u();
+        return;
+      }
+      const c = !Array.isArray(e.value), g = [...s.value];
+      u();
+      const b = (f) => {
+        if (Dl(f))
+          s.value.push(f);
+        else {
+          let h = Ne(a.value, f);
+          h || (h = Ne(g, f)), h || (h = { value: f, label: f.toString() }), s.value.push(h);
+        }
+      };
+      if (c) {
+        const f = e.value;
+        b(f), t != null && t.value ? r(s.value) : i(s.value);
+        return;
+      }
+      e.value.forEach(b), t != null && t.value ? r(s.value) : i(s.value);
+    },
+    { immediate: !0 }
+  ), {
+    // Values
+    cachedSelectedListboxOptions: s,
+    cachedListboxSelectedValues: o,
+    // Methods
+    resetCache: u,
+    setCachedValues: v
+  };
+};
+var be = /* @__PURE__ */ ((a) => (a.DEFAULT = "DropdownInputDefault", a.SMALL = "DropdownInputSmall", a))(be || {});
+const Bl = {
+  "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: "没有符合此搜索条件的选项"
+  }
+}, Rl = (a, e, l, t) => {
+  const s = E(a.value), { t: o } = oe();
+  Z(a, () => {
+    s.value = a.value;
+  });
+  const i = n(
+    () => JSON.stringify(s.value) === JSON.stringify(a.value)
+  ), r = () => {
+    t(d.SELECT, s.value), t(d.CLOSE_DROPDOWN);
+  }, v = () => {
+    s.value = a.value, t(d.CLOSE_DROPDOWN);
+  }, u = () => {
+    l.value && e.value && (s.value = a.value);
+  }, c = n(() => [
+    {
+      title: o("apply"),
+      event: r,
+      disabled: i.value
+    },
+    {
+      title: o("cancel"),
+      event: v
+    }
+  ]), g = (p) => {
+    s.value = p, e.value || t(d.SELECT, p);
+  }, b = (p) => {
+    g(p), t(d.TAB);
+  }, f = (p) => {
+    g(p), t(d.ENTER);
+  }, h = (p) => {
+    g(p), t(d.SPACE);
+  }, y = () => {
+    v(), t(d.ESCAPE);
+  }, B = () => {
+    t(d.SHOW_MORE);
+  }, R = {
+    [d.SELECT]: g,
+    [d.SHOW_MORE]: B,
+    [d.TAB]: b,
+    [d.SPACE]: h,
+    [d.ENTER]: f
+  };
+  return {
+    // Values
+    actions: c,
+    internalSelectedValue: s,
+    // Methods
+    listeners: R,
+    onEscapeKey: y,
+    onOutsideDropdownClick: u
+  };
+}, Ml = z({
+  i18n: { messages: Bl },
+  name: "bento-dropdown-options-container"
+}), Nl = /* @__PURE__ */ z({
+  ...Ml,
+  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: te.AUTOMATIC,
+      validator: (a) => Object.values(te).includes(a)
+    },
+    /**
+     * 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: Me.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: Ge.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(a, { expose: e, emit: l }) {
+    const t = a, s = Se(), { selectedValue: o, multiple: i } = He(t), r = E(null), { t: v } = oe(), u = n(() => t.open && !t.disabled), c = n(() => v("noOptionsMatchThisSearch")), g = n(() => ({
+      "b-dropdown-options-container--single": !(t != null && t.multiple)
+    })), b = n(() => ({
+      "b-dropdown-options-container__listbox--single": !(t != null && t.multiple)
+    })), { actions: f, internalSelectedValue: h, listeners: y, onEscapeKey: B, onOutsideDropdownClick: R } = Rl(o, i, u, l), p = n(() => t != null && t.multiple ? xt : Ge), L = n(() => {
+      var O;
+      const T = {
+        "min-width": `${(O = t == null ? void 0 : t.targetElement) == null ? void 0 : O.clientWidth}px`,
+        "max-width": "min(500px, 95%)"
+      };
+      return t != null && t.multiple ? {
+        actionsLayout: "space-between",
+        ariaLabel: t.ariaLabel,
+        actions: f.value,
+        divider: !0,
+        fallbackPosition: ["top-start"],
+        id: le(`dropdown-options-${t.id}`),
+        open: t.open,
+        position: "bottom-start",
+        style: {
+          width: "auto",
+          ...T
+        },
+        targetElement: t.targetElement
+      } : {
+        fallbackPosition: ["top-start"],
+        offset: [0, 8],
+        position: "bottom-start",
+        style: {
+          display: u.value ? "block" : "none",
+          ...T
+        },
+        targetElement: t.targetElement
+      };
+    });
+    return e({
+      onOutsideDropdownClick: R
+    }), { __sfc: !0, slots: s, emit: l, props: t, selectedValue: o, multiple: i, dropdownOptionsListboxRef: r, t: v, isDropdownOpen: u, noResultsMessage: c, conditionalClasses: g, conditionalListboxClasses: b, actions: f, internalSelectedValue: h, listeners: y, onEscapeKey: B, onOutsideDropdownClick: R, popperContainerOrPopoverComponent: p, popperContainerOrPopoverProps: L, BentoListbox: Me };
+  }
+});
+var $l = function() {
+  var e = this, l = e._self._c, t = e._self._setupProxy;
+  return t.isDropdownOpen ? l(t.popperContainerOrPopoverComponent, e._b({ tag: "component", staticClass: "b-dropdown-options-container", class: t.conditionalClasses }, "component", t.popperContainerOrPopoverProps, !1), [l("div", { on: { keydown: function(s) {
+    return !s.type.indexOf("key") && e._k(s.keyCode, "esc", 27, s.key, ["Esc", "Escape"]) ? null : t.onEscapeKey.apply(null, arguments);
+  } } }, [l(t.BentoListbox, e._g({ ref: "dropdownOptionsListboxRef", staticClass: "b-dropdown-options-container__listbox", class: t.conditionalListboxClasses, attrs: { id: e.id, "aria-label": e.ariaLabel, "component-loading": e.componentLoading, "empty-state": e.emptyState, "is-option-disabled": e.isOptionDisabled, items: e.items, "selected-value": t.internalSelectedValue, multiple: t.multiple, "static-categories": e.staticCategories, "no-results-message": t.noResultsMessage, searching: e.searching, loading: e.loading, "lazy-load-type": e.lazyLoadType, "has-more-items": e.hasMoreItems, "virtual-scroll": e.virtualScroll }, scopedSlots: e._u([e._l(t.slots, function(s, o) {
+    return { key: o, fn: function(i) {
+      return [e._t(o, null, null, i)];
+    } };
+  })], null, !0) }, t.listeners))], 1)]) : e._e();
+}, Fl = [], Pl = /* @__PURE__ */ U(
+  Nl,
+  $l,
+  Fl,
+  !1,
+  null,
+  "9e0761e0"
+);
+const Vl = Pl.exports;
+var j = /* @__PURE__ */ ((a) => (a.DISABLED = "disabled", a.READONLY = "readonly", a.HAS_ITEMS = "has-items", a.OPENED = "opened", a.ERROR = "error", a))(j || {}), G = /* @__PURE__ */ ((a) => (a.OPEN = "dropdown-base-open", a.KEYDOWN = "dropdown-base-keydown", a.CLOSE = "dropdown-base-close", a.INPUT = "dropdown-base-input", a.CLEAR = "dropdown-base-clear", a))(G || {});
+const zl = /* @__PURE__ */ Symbol("dropdown small size injection key"), st = /* @__PURE__ */ Symbol("dropdown underline style injection key"), Ul = {
+  "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: "清除搜索"
+  }
+}, Gl = z({
+  i18n: { messages: Ul },
+  name: "dropdown-base-textbox",
+  inheritAttrs: !1
+}), Kl = /* @__PURE__ */ z({
+  ...Gl,
+  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(a, { expose: e, emit: l }) {
+    const t = a, { t: s } = oe(), o = $e(), i = Se(), r = Je(i), v = E(null), u = le("textbox"), c = Fe(st, !1), g = n(() => ({
+      [`b-dropdown-base-textbox--${j.DISABLED}`]: t.disabled,
+      [`b-dropdown-base-textbox--${j.READONLY}`]: t.readonly,
+      [`b-dropdown-base-textbox--${j.HAS_ITEMS}`]: !!t.additionalItemsSelected,
+      "b-dropdown-base-textbox--underline": c
+    })), b = n(
+      () => R.value && o["aria-required"] ? "true" : null
+    ), f = n(() => ({
+      "b-dropdown-base-textbox__input--dynamic-filtering": t.dynamicFiltering
+    })), h = n(() => t.dynamicFiltering && !!t.value && t.open), y = n(
+      () => {
+        var I;
+        return {
+          "aria-haspopup": "listbox",
+          "aria-controls": t.ariaControls,
+          "aria-describedby": (I = o["aria-describedby"]) == null ? void 0 : I.toString(),
+          "aria-expanded": t.ariaExpanded ? "true" : "false",
+          "aria-labelledby": t.ariaLabelledby,
+          "aria-label": t.ariaLabelledby ? null : t.ariaLabel,
+          "aria-invalid": t.isInvalid,
+          "aria-disabled": t.disabled ? !0 : null,
+          "aria-required": o["aria-required"]
+        };
+      }
+    ), B = n(
+      () => t.multiple ? t.selectedValueItem : []
+    ), R = n(() => t.dynamicFiltering && (t.open || t.alwaysComboboxIsInput)), p = n(() => t.selectedValueItem && !t.multiple), L = n(
+      () => t.multiple && t.selectedValueItem && B.value.length > 0 && t.showSlotContentInMultiple
+    );
+    Z(
+      () => R.value,
+      () => {
+        R.value && !t.alwaysComboboxIsInput && Y(() => {
+          v.value.focus();
+        });
+      }
+    );
+    const T = async () => {
+      !t.disabled && !t.readonly && (l(G.OPEN), await Y(), v.value.focus());
+    }, O = () => {
+      t.open && (v.value.focus(), l(G.CLOSE));
+    }, A = (I) => t.open && I.target.tagName === "INPUT" ? null : t.open ? O() : T(), M = () => {
+      l(G.CLEAR), l(G.INPUT, ""), v.value.focus();
+    }, m = (I) => {
+      !t.readonly && !t.disabled ? l(G.INPUT, I.target.value) : (I.preventDefault(), I.stopPropagation());
+    }, C = () => {
+      v.value.focus();
+    };
+    return e({
+      focus: C
+    }), { __sfc: !0, t: s, attrs: o, slots: i, hasSlot: r, props: t, emit: l, textbox: v, textboxId: u, isUnderlineStyle: c, conditionalClasses: g, showRequiredAttribute: b, comboboxConditionalClasses: f, isFiltering: h, ariaAttributes: y, selectedValueItems: B, shouldShowInput: R, shouldShowSingleSelectSlot: p, shouldShowMultipleSlot: L, onOpenDropdown: T, onCloseDropdown: O, onToggleDropdown: A, onClearSearch: M, onInputEvent: m, focus: C, BentoTypography: ae, DropdownBaseTextboxEvent: G, CrossCircleFillIcon: dt, CrossCircleFillSmallIcon: ut, BentoDropdownSize: be };
+  }
+});
+var ql = function() {
+  var e = this, l = e._self._c, t = e._self._setupProxy;
+  return l("div", { class: e.$attrs.class, attrs: { "data-testid": "textbox-wrapper" }, on: { click: t.onToggleDropdown, keydown: function(s) {
+    return !s.type.indexOf("key") && e._k(s.keyCode, "escape", void 0, s.key, void 0) ? null : t.onCloseDropdown.apply(null, arguments);
+  } } }, [l(t.BentoTypography, { staticClass: "b-dropdown-base-textbox", class: t.conditionalClasses, attrs: { variant: t.isUnderlineStyle ? "title" : "body", el: "div", "data-testid": "base-textbox" } }, [t.shouldShowInput ? l("input", e._b({ ref: "textbox", staticClass: "b-dropdown-base-textbox__input", attrs: { id: t.textboxId, role: "combobox", type: "text", "aria-autocomplete": "list", size: "1", disabled: e.disabled ? !0 : null, readonly: e.readonly, required: t.showRequiredAttribute }, domProps: { value: e.open ? e.value : e.displayValue }, on: { keydown: [function(s) {
+    return e.$emit(t.DropdownBaseTextboxEvent.KEYDOWN, s);
+  }, function(s) {
+    return !s.type.indexOf("key") && e._k(s.keyCode, "enter", 13, s.key, "Enter") ? null : t.onToggleDropdown.apply(null, arguments);
+  }], input: t.onInputEvent } }, "input", t.ariaAttributes, !1)) : l("div", e._b({ ref: "textbox", staticClass: "b-dropdown-base-textbox__input", class: t.comboboxConditionalClasses, attrs: { id: t.textboxId, "aria-readonly": e.readonly ? "true" : null, role: "combobox", tabindex: e.disabled ? -1 : 0 } }, "div", t.ariaAttributes, !1), [t.shouldShowSingleSelectSlot ? [t.hasSlot("display-value") ? e._t("display-value", null, null, e.selectedValueItem) : e._t("default", function() {
+    return [e._v(" " + e._s(e.displayValue) + " ")];
+  }, null, e.selectedValueItem)] : t.shouldShowMultipleSlot ? [l("div", { staticClass: "b-dropdown-base-textbox__input-multiple-selected" }, e._l(t.selectedValueItems, function(s) {
+    return l("div", { key: s.value }, [l("div", { staticClass: "b-dropdown-base-textbox__input-selected-element" }, [e._t("default", function() {
+      return [e._v(" " + e._s(e.displayValue) + " ")];
+    }, null, s)], 2)]);
+  }), 0)] : [e._v(e._s(e.displayValue))]], 2), e.additionalItemsSelected ? l("span", { staticClass: "b-dropdown-base-textbox__additional-items" }, [e._v(" " + e._s(e.additionalItemsSelected) + " ")]) : e._e(), t.hasSlot("icon") && !t.isFiltering ? l("span", { staticClass: "b-dropdown-base-textbox__icon", attrs: { "aria-hidden": "true" } }, [e._t("icon")], 2) : e._e(), t.isFiltering ? l("span", { staticClass: "b-dropdown-base-textbox__clear-search", attrs: { tabindex: e.disabled ? -1 : 0, "data-testid": "clear-search-button" }, on: { click: function(s) {
+    return s.stopPropagation(), t.onClearSearch.apply(null, arguments);
+  }, keydown: function(s) {
+    return !s.type.indexOf("key") && e._k(s.keyCode, "enter", 13, s.key, "Enter") ? null : (s.stopPropagation(), t.onClearSearch.apply(null, arguments));
+  }, keyup: function(s) {
+    return !s.type.indexOf("key") && e._k(s.keyCode, "space", 32, s.key, [" ", "Spacebar"]) ? null : t.onClearSearch.apply(null, arguments);
+  } } }, [e.size === t.BentoDropdownSize.SMALL ? l(t.CrossCircleFillSmallIcon, { attrs: { "svg-title": t.t("clearSearch") } }) : l(t.CrossCircleFillIcon, { attrs: { "svg-title": t.t("clearSearch") } })], 1) : e._e()])], 1);
+}, Yl = [], Wl = /* @__PURE__ */ U(
+  Kl,
+  ql,
+  Yl,
+  !1,
+  null,
+  "4d2fd594"
+);
+const ot = Wl.exports, jl = z({
+  name: "dropdown-default-textbox",
+  inheritAttrs: !1
+}), Hl = /* @__PURE__ */ z({
+  ...jl,
+  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(a, { expose: e, emit: l }) {
+    const t = a, s = Se(), o = E(null), i = n(() => ({
+      [`b-dropdown-default-textbox--${j.ERROR}`]: !t.disabled && !t.readonly && t.isInvalid,
+      [`b-dropdown-default-textbox--${j.DISABLED}`]: t.disabled,
+      [`b-dropdown-default-textbox--${j.READONLY}`]: t.readonly,
+      [`b-dropdown-default-textbox--${j.OPENED}`]: t.open,
+      "b-dropdown-default-textbox--condensed": t.condensed
+    })), r = n(() => t.open && !t.disabled && !t.readonly), v = (y) => {
+      l("input", y);
+    }, u = (y) => {
+      l("keydown", y);
+    }, c = (y) => {
+      fe(y), l("open");
+    }, g = (y) => {
+      fe(y), l("close");
+    }, b = (y) => {
+      fe(y), l("clear");
+    }, f = {
+      [G.INPUT]: v,
+      [G.OPEN]: c,
+      [G.CLOSE]: g,
+      [G.CLEAR]: b,
+      [G.KEYDOWN]: u
+    }, h = () => {
+      o.value.focus();
+    };
+    return e({
+      focus: h
+    }), { __sfc: !0, emit: l, slots: s, props: t, baseTextbox: o, conditionalClasses: i, isDropdownOpen: r, onInput: v, onKeyDown: u, openDropdown: c, closeDropdown: g, clearValue: b, listeners: f, focus: h, DropdownBaseTextbox: ot, ChevronDownIcon: Xe, ChevronUpIcon: Ze };
+  }
+});
+var Jl = function() {
+  var e = this, l = e._self._c, t = e._self._setupProxy;
+  return l("div", { staticClass: "b-dropdown-default-textbox", class: t.conditionalClasses, attrs: { "data-testid": "default-textbox" } }, [l(t.DropdownBaseTextbox, e._g(e._b({ ref: "baseTextbox", staticClass: "b-dropdown-default-textbox__textbox", attrs: { value: e.value }, scopedSlots: e._u([e._l(t.slots, function(s, o) {
+    return { key: o, fn: function(i) {
+      return [e._t(o, null, null, i ?? {})];
+    } };
+  }), { key: "icon", fn: function() {
+    return [l("div", { staticClass: "b-dropdown-default-textbox__chevron" }, [l(t.ChevronUpIcon, { directives: [{ name: "show", rawName: "v-show", value: t.isDropdownOpen, expression: "isDropdownOpen" }], attrs: { "svg-title": "opened" } }), l(t.ChevronDownIcon, { directives: [{ name: "show", rawName: "v-show", value: !t.isDropdownOpen, expression: "!isDropdownOpen" }], attrs: { "svg-title": "closed" } })], 1)];
+  }, proxy: !0 }], null, !0) }, "dropdown-base-textbox", { ...e.$attrs, ...e.$props }, !1), t.listeners))], 1);
+}, Xl = [], Zl = /* @__PURE__ */ U(
+  Hl,
+  Jl,
+  Xl,
+  !1,
+  null,
+  "bf2d43b0"
+);
+const Ql = Zl.exports;
+let We = 0;
+const ea = {
+  beforeCreate() {
+    this.uuid = We.toString(), We += 1;
+  }
+};
+var ta = function() {
+  var e = this, l = e._self._c;
+  return l("svg", e._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", e.$attrs, !1), [e.$attrs["svg-title"] ? l("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), l("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" } })]);
+}, la = [], aa = /* @__PURE__ */ U(
+  ea,
+  ta,
+  la,
+  !1,
+  null,
+  null
+);
+const sa = aa.exports;
+let je = 0;
+const oa = {
+  beforeCreate() {
+    this.uuid = je.toString(), je += 1;
+  }
+};
+var na = function() {
+  var e = this, l = e._self._c;
+  return l("svg", e._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", e.$attrs, !1), [e.$attrs["svg-title"] ? l("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), l("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" } })]);
+}, ia = [], ra = /* @__PURE__ */ U(
+  oa,
+  na,
+  ia,
+  !1,
+  null,
+  null
+);
+const ca = ra.exports, da = z({
+  name: "dropdown-small-textbox",
+  inheritAttrs: !1
+}), ua = /* @__PURE__ */ z({
+  ...da,
+  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(a, { expose: e, emit: l }) {
+    const t = a, s = E(null), o = Fe(st, !1), i = n(() => ({
+      [`b-dropdown-small-textbox--${j.DISABLED}`]: t.disabled,
+      [`b-dropdown-small-textbox--${j.READONLY}`]: t.readonly,
+      [`b-dropdown-small-textbox--${j.OPENED}`]: t.open,
+      "b-dropdown-small-textbox--underline": o
+    })), r = n(() => t.open && !t.disabled && !t.readonly), v = (y) => {
+      l("input", y);
+    }, u = (y) => {
+      l("keydown", y);
+    }, c = (y) => {
+      fe(y), l("open");
+    }, g = (y) => {
+      fe(y), l("close");
+    }, b = (y) => {
+      fe(y), l("clear");
+    }, f = {
+      [G.INPUT]: v,
+      [G.OPEN]: c,
+      [G.CLOSE]: g,
+      [G.CLEAR]: b,
+      [G.KEYDOWN]: u
+    }, h = () => {
+      s.value.focus();
+    };
+    return e({
+      focus: h
+    }), { __sfc: !0, emit: l, props: t, baseTextbox: s, isUnderlineStyle: o, conditionalClasses: i, isDropdownOpen: r, onInput: v, onKeyDown: u, openDropdown: c, closeDropdown: g, clearValue: b, listeners: f, focus: h, BentoDropdownSize: be, DropdownBaseTextbox: ot, ChevronDownSmallIcon: sa, ChevronUpSmallIcon: ca };
+  }
+});
+var pa = function() {
+  var e = this, l = e._self._c, t = e._self._setupProxy;
+  return l("div", { staticClass: "b-dropdown-small-textbox", class: t.conditionalClasses }, [l(t.DropdownBaseTextbox, e._g(e._b({ ref: "baseTextbox", staticClass: "b-dropdown-small-textbox__textbox", attrs: { size: t.BentoDropdownSize.SMALL }, scopedSlots: e._u([{ key: "icon", fn: function() {
+    return [l("div", { staticClass: "b-dropdown-small-textbox__chevron" }, [l(t.ChevronUpSmallIcon, { directives: [{ name: "show", rawName: "v-show", value: t.isDropdownOpen, expression: "isDropdownOpen" }], attrs: { "svg-title": "opened" } }), l(t.ChevronDownSmallIcon, { directives: [{ name: "show", rawName: "v-show", value: !t.isDropdownOpen, expression: "!isDropdownOpen" }], attrs: { "svg-title": "closed" } })], 1)];
+  }, proxy: !0 }]) }, "dropdown-base-textbox", { ...e.$attrs, ...e.$props }, !1), t.listeners))], 1);
+}, fa = [], ba = /* @__PURE__ */ U(
+  ua,
+  pa,
+  fa,
+  !1,
+  null,
+  "fa225e76"
+);
+const va = ba.exports, ma = (a, e) => e.value.reduce((l, t) => {
+  if (t.items) {
+    const s = t.items.filter(
+      (i) => a.value.find((r) => r.value === i.value)
+    );
+    s.length === t.items.length ? l.push(t.displayValue ?? t.label) : s.forEach(({ label: i, displayValue: r }) => l.push(r ?? i));
+  }
+  return a.value.find((s) => s.value === t.value) && l.push(t.displayValue ?? t.label), l;
+}, []).join(", "), _a = ({ items: a, placeholder: e, selectedValues: l, isMultiSelect: t }) => {
+  const s = n(
+    () => t.value && a.value.find((i) => {
+      var r;
+      return (r = i.items) == null ? void 0 : r.length;
+    })
+  );
+  return n(() => l.value.length ? s.value ? ma(l, a) : l.value.map(({ label: i, displayValue: r }) => r ?? i).join(", ") : e.value || null);
+}, nt = (a) => {
+  var e;
+  (e = a.value.$children) == null || e[0].$refs.textbox.focus();
+}, ya = ({
+  inputContainerRef: a,
+  optionsContainerRef: e,
+  selectedValueIndex: l,
+  isDropdownOpen: t,
+  isDynamicFltering: s,
+  items: o,
+  isMultiple: i,
+  totalItemCount: r,
+  isVirtualScroll: v
+}, u, c, g) => {
+  const b = async (D) => {
+    var $;
+    s.value && await Y(), ($ = o.value[D]) == null || $.focus();
+  }, f = async (D) => {
+    var J, Q;
+    s.value && await Y();
+    const $ = (J = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : J.$el.querySelectorAll(
+      "button"
+    );
+    $ != null && $.length ? (Q = $[D]) == null || Q.focus() : b(D);
+  }, h = (D) => {
+    var $;
+    return ($ = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : $.setListboxFocusedIndex(
+      D
+    );
+  }, y = async (D) => {
+    var $;
+    await (($ = e.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef) == null ? void 0 : $.navigateToItem(D));
+  }, B = (D) => {
+    Y(() => {
+      v ? y(D) : (h(D), b(D));
+    });
+  }, R = () => {
+    t.value || c(), B(0);
+  }, p = () => {
+    t.value || c(), Y(() => {
+      B(v ? r.value - 1 : o.value.length - 1);
+    });
+  }, L = ({ detail: D }) => {
+    D.preventDefault(), R();
+  }, T = ({ detail: D }) => {
+    D.preventDefault(), p();
+  }, O = () => {
+    R();
+  }, A = () => {
+    p();
+  }, M = ({ detail: D }) => {
+    D.preventDefault(), u(), t.value && (i ? f(0) : B(l.value));
+  }, m = ({ detail: D }) => {
+    D.preventDefault(), u(), t.value && (i ? f(0) : B(l.value));
+  }, C = () => {
+    t.value && g();
+  }, I = () => {
+    t.value && (g(), nt(a));
+  };
+  return n(() => ({
+    [V.ARROW_DOWN]: L,
+    [V.ARROW_UP]: T,
+    [V.HOME]: O,
+    [V.END]: A,
+    ...s.value ? {} : { [V.SPACE]: M },
+    [V.ENTER]: m,
+    ...s.value ? {} : { [V.TAB]: C },
+    [V.ESCAPE]: I
+  }));
+}, ga = ({ inputContainerRef: a, isDropdownOpen: e }, l) => {
+  const t = () => {
+    e.value && l(), Y(() => {
+      nt(a);
+    });
+  };
+  return {
+    [d.ENTER]: t,
+    [d.ESCAPE]: t,
+    [d.TAB]: t,
+    [d.SPACE]: t
+  };
+};
+function ha(a, e, l, t, s) {
+  const o = E(a), i = E(e), r = (c, g = []) => g.flatMap((b) => b.label.toLocaleLowerCase().includes(c) ? t != null && t.value && b.items ? [...r(c, b.items)] : [b, ...r(c, b.items)] : b.items ? [...r(c, b.items)] : []), v = l !== void 0 ? at(() => l(o.value), s ?? 300) : void 0;
+  return Z(o, () => {
+    v !== void 0 && v();
+  }), n(() => {
+    if (!o.value || l !== void 0)
+      return i.value;
+    const c = o.value.toLocaleLowerCase();
+    return r(c, i.value);
+  });
+}
+const Sa = {
+  "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: "清除筛选器"
+  }
+}, xa = z({
+  i18n: { messages: Sa },
+  name: "b-dropdown",
+  components: {
+    DropdownInputDefault: Ql,
+    DropdownInputSmall: va
+  },
+  model: { prop: "modelValue" }
+}), Ca = /* @__PURE__ */ z({
+  ...xa,
+  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: Me.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(a, { expose: e, emit: l }) {
+    var W, Le;
+    const t = a, s = $e(), o = Se(), i = Je(o), { t: r } = oe(), { emitValue: v } = ft(l), u = E(null), c = E(null), g = E(null), b = E(!1), f = le("bento-dropdown-options-container"), h = le("dropdown-label"), y = le("dropdown-description"), B = le("dropdown-error"), { isReadOnly: R } = bt(K(t, "readonly")), p = n(() => t.modelValue ?? t.value), { cachedSelectedListboxOptions: L, cachedListboxSelectedValues: T, setCachedValues: O } = kl(
+      K(t, "items"),
+      p,
+      K(t, "multiple"),
+      K(t, "enableValueLabelPair")
+    ), A = E(s["aria-label"]), M = E(s["aria-describedby"]), { ariaLabel: m, label: C } = He(t), I = n(() => r("ariaLabelFallback")), N = pt({
+      // TODO: take ariaLabel ref away when aria-label prop is removed
+      ariaLabel: m.value || A,
+      label: C,
+      defaultFallback: I
+    }), D = t.size === be.SMALL || Fe(zl, !1), $ = n(() => D ? be.SMALL : be.DEFAULT), J = n(() => ({
+      "b-dropdown--condensed": t.condensed
+    })), Q = n(() => ({
+      "b-dropdown__description--error": !!t.errorMessage
+    })), q = E(""), F = K(t, "items"), ee = K(t, "staticCategories"), ne = ha(
+      q,
+      F,
+      (W = t == null ? void 0 : t.search) == null ? void 0 : W.searchEvent,
+      ee,
+      (Le = t == null ? void 0 : t.search) == null ? void 0 : Le.debounceTime
+    ), ve = n(() => t.dynamicFiltering && !!q.value), De = _a({
+      items: F,
+      placeholder: K(t, "placeholder"),
+      isMultiSelect: K(t, "multiple"),
+      selectedValues: L
+    }), ke = n(() => {
+      if (t != null && t.multiple && Array.isArray(p.value))
+        return t.items.filter(
+          ({ value: P }) => (t == null ? void 0 : t.value) && (t == null ? void 0 : t.value).includes(P)
+        );
+      if (!t.multiple && t.staticCategories) {
+        const P = t.items.find(
+          (he) => {
+            var ze;
+            return (ze = he.items) == null ? void 0 : ze.some((it) => it.value === p.value);
+          }
+        );
+        return (P ? P.items.find((he) => he.value === p.value) : t.items.find(({ value: he }) => he === p.value)) ?? null;
+      }
+      return t.items.find(({ value: P }) => P === p.value);
+    }), me = n(() => {
+      const P = ne.value.findIndex(({ value: pe }) => t.enableValueLabelPair ? p.value.value === pe : p.value === pe);
+      return P > -1 ? P : 0;
+    }), { isMultiLevelSelect: H, flattenedItemsList: ie } = lt(F), _e = n(() => H.value && !t.staticCategories), xe = n(() => _e.value ? "treeitem" : "option"), Ce = n(() => {
+      if (t.multiple) {
+        const P = Array.isArray(p.value) ? p.value.length : 0, pe = H.value ? ie.value.length : F.value.length;
+        return P === 0 ? null : !t.hasMoreItems && pe > 0 && pe === P ? r("all") : P;
+      }
+      return null;
+    }), Oe = n(
+      () => [
+        t.description ? y : null,
+        M.value,
+        t.errorMessage ? B : null
+      ].filter(Boolean).join(" ") || null
+    ), re = n(() => {
+      var P;
+      return (P = g.value) == null ? void 0 : P.$el;
+    }), { visibleDomOptions: ye, updateVisibleDomOptions: ce } = Pe(
+      re,
+      ne,
+      xe
+    ), de = () => {
+      R.value || (b.value = !0, Y(() => {
+        ce();
+      }));
+    }, ue = () => {
+      b.value = !1;
+    }, ge = () => {
+      R.value || (b.value = !b.value, Y(() => {
+        ce();
+      }), ve.value && (q.value = ""));
+    }, Ee = () => {
+      ve.value && (q.value = ""), b.value && (b.value = !1, g.value.onOutsideDropdownClick());
+    }, Be = n(() => [
+      Ee,
+      {
+        ignore: [re]
+      }
+    ]), Ie = async (P) => {
+      t.multiple || (q.value = "", b.value = !1), O(P), v(T.value), t.multiple || (await Y(), w());
+    }, _ = () => {
+      l(d.SHOW_MORE);
+    }, S = ya(
+      {
+        inputContainerRef: u,
+        optionsContainerRef: g,
+        selectedValueIndex: me,
+        isDropdownOpen: b,
+        isDynamicFltering: K(t, "dynamicFiltering"),
+        items: ye,
+        isMultiple: t.multiple,
+        totalItemCount: n(() => ne.value.length),
+        isVirtualScroll: !(t != null && t.multiple) && (t == null ? void 0 : t.virtualScroll) !== !1 && (t == null ? void 0 : t.lazyLoadType) === "none"
+      },
+      ge,
+      de,
+      ue
+    ), x = ga(
+      {
+        inputContainerRef: u,
+        isDropdownOpen: b
+      },
+      ue
+    ), k = {
+      [d.CLOSE_DROPDOWN]: ue,
+      [d.SELECT]: Ie,
+      [d.SHOW_MORE]: _,
+      ...x
+    };
+    t.error && Re(
+      '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"
+    ), t.size && Re('BentoDropdown "size" property', "Do not use. Only 'default' size should be used.", "2.0.0"), t.value && Re(
+      '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 w = () => {
+      u.value.focus();
+    };
+    return Z(
+      () => b.value,
+      (P) => {
+        P && l("open");
+      }
+    ), e({
+      focus: w
+    }), { __sfc: !0, attrs: s, slots: o, hasSlot: i, props: t, emit: l, t: r, emitValue: v, inputContainerRef: u, inputContainerRefWrapper: c, optionsContainerRef: g, isDropdownOpen: b, dropdownOptionsContainerId: f, labelId: h, descriptionId: y, errorId: B, isReadOnly: R, dropdownValue: p, cachedSelectedListboxOptions: L, cachedListboxSelectedValues: T, setCachedValues: O, ariaLabelAttribute: A, ariaDescribedByAttribute: M, ariaLabel: m, label: C, computedAriaLabelFallbackMessage: I, computedAriaLabel: N, isInputComponent: D, computedSize: $, conditionalClasses: J, descriptionConditionalClasses: Q, searchTerm: q, items: F, staticCategories: ee, filteredItems: ne, isSearching: ve, displayValue: De, selectedValueItem: ke, selectedValueIndex: me, isMultiLevelSelect: H, flattenedItemsList: ie, isTreePattern: _e, computedOptionRole: xe, additionalItemsSelected: Ce, ariaDescribedBy: Oe, listboxRef: re, visibleDomOptions: ye, updateVisibleDomOptions: ce, openDropdown: de, closeDropdown: ue, toggleDropdown: ge, clickOutsideDropdown: Ee, clickOutsideDropdownOptions: Be, onOptionSelected: Ie, emitShowMoreEvent: _, textboxKeyboardNavigationListeners: S, listboxKeyboardNavigationListeners: x, listboxListeners: k, focus: w, BentoDropdownOptionsContainer: Vl, BentoTypography: ae, ErrorMessage: It, FieldLabel: Et, BentoTeleport: Ct, vBentoClickOutsideDirective: Ot, vBentoKeyboardNavigationDirective: we };
+  }
+});
+var Oa = function() {
+  var s, o;
+  var e = this, l = e._self._c, t = e._self._setupProxy;
+  return l("div", { directives: [{ name: "bento-click-outside-directive", rawName: "v-bento-click-outside-directive", value: t.clickOutsideDropdownOptions, expression: "clickOutsideDropdownOptions" }], staticClass: "b-dropdown", class: t.conditionalClasses }, [t.label ? l(t.FieldLabel, { attrs: { id: t.labelId, condensed: e.condensed, label: t.label, "tooltip-text": e.tooltipText, optional: e.optional, required: e.required } }) : e._e(), l("div", e._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], ref: "inputContainerRefWrapper" }, t.textboxKeyboardNavigationListeners), [l(t.computedSize, { ref: "inputContainerRef", tag: "component", attrs: { condensed: e.condensed, value: t.searchTerm, "additional-items-selected": t.additionalItemsSelected, "aria-controls": t.dropdownOptionsContainerId, ariaExpanded: t.isDropdownOpen, "aria-labelledby": t.label ? t.labelId : null, "aria-describedby": t.ariaDescribedBy, "aria-label": t.computedAriaLabel, "aria-readonly": t.isReadOnly, "aria-required": e.required, readonly: t.isReadOnly, disabled: e.disabled, "display-value": t.displayValue, "dynamic-filtering": e.dynamicFiltering, "is-invalid": !!e.errorMessage || e.error, multiple: e.multiple, open: t.isDropdownOpen, "selected-value-item": t.isInputComponent ? void 0 : t.selectedValueItem, "show-slot-content-in-multiple": e.showSlotContentInMultiple }, on: { input: function(i) {
+    t.searchTerm = i;
+  }, open: t.toggleDropdown, close: t.toggleDropdown }, scopedSlots: e._u([e._l(t.slots, function(i, r) {
+    return { key: r, fn: function(v) {
+      return [e._t(r, null, null, v)];
+    } };
+  })], null, !0) })], 1), t.inputContainerRef ? l(t.BentoTeleport, { attrs: { disabled: (s = e.teleport) == null ? void 0 : s.disabled, to: (o = e.teleport) == null ? void 0 : o.to } }, [l(t.BentoDropdownOptionsContainer, e._g({ ref: "optionsContainerRef", attrs: { id: t.dropdownOptionsContainerId, "aria-label": t.computedAriaLabel, "component-loading": e.componentLoading, "empty-state": e.emptyState, disabled: e.disabled, "is-option-disabled": e.isOptionDisabled, items: t.filteredItems, multiple: e.multiple, "static-categories": t.staticCategories, open: t.isDropdownOpen, "selected-value": t.cachedSelectedListboxOptions, searching: t.isSearching, "target-element": t.inputContainerRefWrapper, loading: e.loading, "has-more-items": e.hasMoreItems, "lazy-load-type": e.lazyLoadType, "virtual-scroll": e.virtualScroll }, scopedSlots: e._u([e._l(t.slots, function(i, r) {
+    return { key: r, fn: function(v) {
+      return [e._t(r, null, null, v)];
+    } };
+  })], null, !0) }, t.listboxListeners))], 1) : e._e(), e.errorMessage ? l(t.ErrorMessage, { staticClass: "b-dropdown__error-message", attrs: { id: t.errorId, "error-message": e.errorMessage } }) : e._e(), e.description || t.hasSlot("description") ? l(t.BentoTypography, { staticClass: "b-dropdown__description", class: t.descriptionConditionalClasses, attrs: { id: t.descriptionId, el: "span" } }, [e._t("description", function() {
+    return [e._v(" " + e._s(e.description) + " ")];
+  })], 2) : e._e()], 1);
+}, Ea = [], Ia = /* @__PURE__ */ U(
+  Ca,
+  Oa,
+  Ea,
+  !1,
+  null,
+  "65b604ae"
+);
+const ts = Ia.exports;
+export {
+  ts as B,
+  zt as C,
+  Ql as D,
+  d as a,
+  te as b,
+  be as c,
+  Me as d,
+  lt as e,
+  ha as f,
+  at as g,
+  zl as h,
+  st as i,
+  Ve as j,
+  kl as u
+};
+//# sourceMappingURL=dropdown.CIEm6MBB.js.map