@adyen/bento-vue3 1.24.0 → 1.26.0

package/dist/chunks/listbox.b6a1aea2.js

@@ -1,1466 +0,0 @@
-import { computed as m, ref as M, onMounted as Oe, onUnmounted as Ge, watch as Le, defineComponent as q, resolveComponent as C, openBlock as v, createElementBlock as T, createVNode as $, withCtx as E, createTextVNode as w, toDisplayString as x, createElementVNode as z, renderSlot as G, mergeProps as V, withKeys as ge, createBlock as k, toHandlerKey as te, normalizeProps as Y, guardReactiveProps as W, createCommentVNode as J, withDirectives as ce, vShow as Ae, toRef as de, resolveDirective as ye, toHandlers as se, Fragment as X, renderList as F, createSlots as ae, normalizeClass as pe, unref as re, pushScopeId as Fe, popScopeId as Ye } from "vue";
-import { B as K, a as _e } from "./keyboard-navigation.ca47dfa8.js";
-import { B as Q } from "./index.51fe0fc2.js";
-import { BentoLoadingIndicator as Ke } from "../loading-indicator.js";
-import { BentoEmptyState as ze } from "../empty-state.js";
-import { u as ue } from "./i18n.f7e6533e.js";
-import { d as We } from "./debounce.b5ef6acf.js";
-import { _ as H } from "./_plugin-vue_export-helper.dad06003.js";
-import { C as qe } from "./checkmark.eb3c7a06.js";
-import { B as Se } from "./checkbox.d0f897e0.js";
-import { a as He, C as je } from "./chevron-up.638a9f34.js";
-import { B as Xe } from "./base-button.ab9c947e.js";
-import { C as Je } from "./cross-small.b85406fe.js";
-import { B as Qe, a as Ce } from "./loading-button.cdc193c6.js";
-import { o as Ze } from "./resize.a041304d.js";
-import "../assets/listbox.css";
-const Ie = (e, t, a, b) => {
-  const l = m(
-    () => {
-      var s, d;
-      return !!((s = e.value) != null && s.length) && ((d = e.value) == null ? void 0 : d.length) === t.value.length;
-    }
-  ), i = m(() => {
-    var s;
-    return e.value == null || e.value.length === 0 ? !1 : ((s = e.value) == null ? void 0 : s.length) !== t.value.length;
-  });
-  return {
-    isAllSelected: l,
-    isIndeterminate: i,
-    toggleSelectAll: (s) => {
-      s ? a() : b();
-    }
-  };
-};
-function et(e, { disabled: t, itemHeight: a, overscan: b = 5, prefixHeight: l }) {
-  const i = M(null), n = M([]), s = M(0), d = M(0), o = M(0);
-  let f;
-  const c = m(() => {
-    const O = typeof a == "number" ? e.value.length * a : e.value.reduce((R, _, L) => R + a(L), 0), D = typeof a == "number" ? s.value * a : e.value.slice(0, s.value).reduce((R, _, L) => R + a(L), 0);
-    return {
-      style: {
-        marginTop: `${D}px`,
-        height: `${O - D}px`
-      }
-    };
-  }), g = () => {
-    const O = (l == null ? void 0 : l.value) ?? 0, D = Math.max(i.value.scrollTop - O, 0);
-    if (typeof a == "number")
-      return Math.floor(D / a);
-    let R = 0, _ = 0;
-    for (let L = 0; L < e.value.length; L += 1) {
-      const U = a(L);
-      if (R += U, R >= D) {
-        _ = L;
-        break;
-      }
-    }
-    return _;
-  }, u = () => {
-    if (o.value = i.value.clientHeight, typeof a == "number")
-      return Math.ceil(o.value / a);
-    const O = s.value ?? 0;
-    let D = 0, R = 0;
-    for (let _ = O; _ < e.value.length; _ += 1) {
-      const L = a(_);
-      if (D += L, R = _, D > o.value)
-        break;
-    }
-    return R - O;
-  }, S = () => {
-    if (i.value) {
-      const O = u();
-      s.value = g(), d.value = Math.min(s.value + O + b, e.value.length), n.value = e.value.slice(s.value, d.value);
-    }
-  }, I = () => {
-    S();
-  };
-  t || (Oe(() => {
-    i.value && (o.value = i.value.clientHeight, f = Ze(i.value, ({ clientHeight: O }) => {
-      o.value = O, S();
-    }), S());
-  }), Ge(() => {
-    f == null || f.disconnect();
-  }), Le(
-    () => e.value,
-    () => {
-      S();
-    }
-  ));
-  const P = {
-    ref: i,
-    style: { overflowY: "auto" }
-  };
-  return t ? {
-    containerRef: i,
-    containerProps: P,
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    onScroll: () => {
-    },
-    list: e
-  } : {
-    containerRef: i,
-    containerProps: P,
-    onScroll: I,
-    list: n,
-    wrapperProps: c
-  };
-}
-var r = /* @__PURE__ */ ((e) => (e.SELECT = "select", e.SHOW_MORE = "show-more", e.ESCAPE = "escape-pressed", e.CLICK = "click", e.ENTER = "enter-pressed", e.SPACE = "space-pressed", e.TAB = "tab-pressed", e.CLOSE_DROPDOWN = "close-dropdown", e))(r || {}), ee = /* @__PURE__ */ ((e) => (e.AUTOMATIC = "automatic", e.BUTTON = "button", e.NONE = "none", e))(ee || {});
-const tt = q({
-  name: "bento-listbox-static-category",
-  components: {
-    BentoTypography: Q
-  },
-  props: {
-    /**
-     * Category label text
-     */
-    categoryLabel: {
-      type: String,
-      required: !0
-    }
-  }
-});
-const st = { class: "b-listbox-single-select-category" };
-function lt(e, t, a, b, l, i) {
-  const n = C("bento-typography");
-  return v(), T("div", st, [
-    $(n, {
-      variant: "caption",
-      el: "span",
-      class: "b-listbox-single-select-category__label-text"
-    }, {
-      default: E(() => [
-        w(x(e.categoryLabel), 1)
-      ]),
-      _: 1
-    }),
-    z("div", null, [
-      G(e.$slots, "default", {}, void 0, !0)
-    ])
-  ]);
-}
-const ot = /* @__PURE__ */ H(tt, [["render", lt], ["__scopeId", "data-v-a90eff17"]]), nt = q({
-  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: [r.CLICK, r.ENTER, r.SPACE, r.TAB],
-  setup(e, { emit: t }) {
-    const a = m(() => ({
-      "b-listbox-option--disabled": e.disabled,
-      "b-listbox-option--selected": e.selected
-    }));
-    return {
-      // Enums
-      BentoKeyboardNavigationKeyDownEvent: K,
-      BentoListboxEvent: r,
-      // Values
-      conditionalClasses: a,
-      // Events
-      onClick: (i) => {
-        t(r.CLICK, i);
-      },
-      onOptionSelected: (i, n) => {
-        t(i, n);
-      }
-    };
-  }
-});
-function it(e, t, a, b, l, i) {
-  return v(), T("label", V({
-    class: ["b-listbox-option", e.conditionalClasses],
-    role: "option"
-  }, e.$attrs, {
-    onClick: t[0] || (t[0] = (...n) => e.onClick && e.onClick(...n)),
-    onKeydown: [
-      t[1] || (t[1] = ge((n) => e.onOptionSelected(e.BentoListboxEvent.ENTER, n), ["enter"])),
-      t[2] || (t[2] = ge((n) => e.onOptionSelected(e.BentoListboxEvent.SPACE, n), ["space"])),
-      t[3] || (t[3] = ge((n) => e.onOptionSelected(e.BentoListboxEvent.TAB, n), ["tab"]))
-    ]
-  }), [
-    G(e.$slots, "default", {}, void 0, !0)
-  ], 16);
-}
-const be = /* @__PURE__ */ H(nt, [["render", it], ["__scopeId", "data-v-18a61f5d"]]), at = q({
-  name: "bento-listbox-single-select-option",
-  components: {
-    BentoListboxOption: be,
-    BentoTypography: Q,
-    CheckmarkIcon: qe
-  },
-  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: [r.ENTER, r.SELECT, r.SPACE, r.TAB],
-  setup(e, { emit: t }) {
-    const a = (n) => {
-      e.disabled || t(n, e.option.value);
-    }, b = m(() => e.disabled ? !0 : null), l = m(() => e.selected ? !0 : null), i = m(() => e.disabled ? -1 : 0);
-    return {
-      // Values
-      ariaDisabled: b,
-      ariaSelected: l,
-      tabIndex: i,
-      // Enums
-      BentoListboxEvent: r,
-      // Events
-      onOptionSelected: a
-    };
-  }
-});
-const ct = { class: "b-listbox-single-select-option__text" }, rt = { class: "b-listbox-single-select-option__check-icon" };
-function dt(e, t, a, b, l, i) {
-  const n = C("bento-typography"), s = C("checkmark-icon"), d = C("bento-listbox-option");
-  return v(), k(d, V({
-    class: "b-listbox-single-select-option",
-    disabled: e.disabled,
-    selected: e.selected,
-    "aria-selected": e.ariaSelected,
-    "aria-disabled": e.ariaDisabled,
-    tabindex: e.tabIndex,
-    onClick: t[0] || (t[0] = (o) => e.onOptionSelected(e.BentoListboxEvent.SELECT))
-  }, {
-    [te(e.BentoListboxEvent.ENTER)]: t[1] || (t[1] = (o) => e.onOptionSelected(e.BentoListboxEvent.ENTER))
-  }, {
-    [te(e.BentoListboxEvent.SPACE)]: t[2] || (t[2] = (o) => e.onOptionSelected(e.BentoListboxEvent.SPACE))
-  }, {
-    [te(e.BentoListboxEvent.TAB)]: t[3] || (t[3] = (o) => e.onOptionSelected(e.BentoListboxEvent.TAB))
-  }), {
-    default: E(() => [
-      G(e.$slots, "default", Y(W(e.option)), () => [
-        z("span", ct, [
-          $(n, { el: "span" }, {
-            default: E(() => [
-              w(x(e.option.label), 1)
-            ]),
-            _: 1
-          }),
-          e.option.description ? (v(), k(n, {
-            key: 0,
-            class: "b-listbox-single-select-option__description",
-            el: "span"
-          }, {
-            default: E(() => [
-              w(x(e.option.description), 1)
-            ]),
-            _: 1
-          })) : J("", !0)
-        ])
-      ], !0),
-      z("span", rt, [
-        ce($(s, { "svg-title": "selected" }, null, 512), [
-          [Ae, e.selected]
-        ])
-      ])
-    ]),
-    _: 3
-  }, 16, ["disabled", "selected", "aria-selected", "aria-disabled", "tabindex"]);
-}
-const ut = /* @__PURE__ */ H(at, [["render", dt], ["__scopeId", "data-v-d112952c"]]), $e = ({ items: e, isOptionDisabled: t }, a) => {
-  const b = m(() => e.value.length - 1), l = M(0);
-  Oe(() => {
-    t && (l.value = e.value.findIndex((u) => !t(u)));
-  });
-  const i = (u) => !t || !!t && t(e.value[u]), n = (u) => !t || !!t && !t(e.value[u]), s = (u) => {
-    switch (u) {
-      case "increase":
-        l.value += 1;
-        break;
-      case "decrease":
-        l.value -= 1;
-        break;
-    }
-  }, d = ({ edgeCaseItem: u, isItemBeforeEdgeCaseItem: S }, I, P) => {
-    l.value !== u && (S ? n(u) && s(P) : (s(P), i(l.value) && I()), a(l.value));
-  }, o = (u) => {
-    var I;
-    (I = u == null ? void 0 : u.detail) == null || I.preventDefault();
-    const S = l.value === b.value - 2;
-    d(
-      {
-        isItemBeforeEdgeCaseItem: S,
-        edgeCaseItem: b.value
-      },
-      o,
-      "increase"
-      /* INCREASE */
-    );
-  }, f = (u) => {
-    var I;
-    (I = u == null ? void 0 : u.detail) == null || I.preventDefault();
-    const S = l.value === 1;
-    d(
-      {
-        edgeCaseItem: 0,
-        isItemBeforeEdgeCaseItem: S
-      },
-      f,
-      "decrease"
-      /* DECREASE */
-    );
-  };
-  return {
-    moveToFirstElement: () => {
-      l.value = 0, i(l.value) ? o() : a(l.value);
-    },
-    moveToLastElement: () => {
-      l.value = b.value, i(l.value) ? f() : a(l.value);
-    },
-    moveToNextElement: o,
-    moveToPreviousElement: f
-  };
-}, bt = q({
-  name: "bento-listbox-single-select",
-  components: {
-    BentoListboxSingleSelectCategory: ot,
-    BentoListboxSingleSelectOption: ut
-  },
-  directives: { BentoKeyboardNavigationDirective: _e },
-  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: [String, Number],
-      default: void 0
-    },
-    /**
-     * If enabled, dropdown will display non-selectable, static categories
-     */
-    staticCategories: { type: Boolean, default: !1 }
-  },
-  emits: [r.SELECT, r.ENTER, r.SPACE, r.TAB],
-  setup(e, { emit: t, slots: a }) {
-    const b = M([]), l = m(() => !!e.items.find(({ items: u }) => !!u)), i = (u) => (S) => {
-      t(u, S);
-    }, n = (u) => b.value[u].$el.focus(), { moveToNextElement: s, moveToPreviousElement: d, moveToFirstElement: o, moveToLastElement: f } = $e(
-      {
-        items: de(e, "items"),
-        isOptionDisabled: e.isOptionDisabled
-      },
-      n
-    ), c = {
-      [K.ARROW_UP]: d,
-      [K.ARROW_DOWN]: s,
-      [K.HOME]: o,
-      [K.END]: f
-    }, g = {
-      [r.SELECT]: i(r.SELECT),
-      [r.SPACE]: i(r.SPACE),
-      [r.TAB]: i(r.TAB),
-      [r.ENTER]: i(r.ENTER)
-    };
-    return {
-      // Enums
-      BentoListboxEvent: r,
-      // Values
-      listboxItemRef: b,
-      slots: a,
-      // Computed
-      hasCategories: l,
-      // Methods
-      onOptionSelected: i,
-      // Keyboard navigation
-      listboxListeners: c,
-      listboxOptionListeners: g
-    };
-  }
-});
-function mt(e, t, a, b, l, i) {
-  const n = C("bento-listbox-single-select-option"), s = C("bento-listbox-single-select-category"), d = ye("bento-keyboard-navigation-directive");
-  return ce((v(), T("div", se(e.listboxListeners, !0), [
-    e.hasCategories && e.staticCategories ? (v(!0), T(X, { key: 0 }, F(e.items, (o) => (v(), k(s, {
-      key: o.value,
-      "category-label": o.label,
-      role: "group"
-    }, {
-      default: E(() => [
-        (v(!0), T(X, null, F(o.items, (f) => (v(), k(n, V({
-          key: f.value,
-          ref_for: !0,
-          ref: "listboxItemRef",
-          role: "option",
-          option: f,
-          disabled: e.isOptionDisabled ? e.isOptionDisabled(f) : null,
-          selected: f.value === e.selectedValue
-        }, se(e.listboxOptionListeners)), ae({ _: 2 }, [
-          F(e.slots, (c, g) => ({
-            name: g,
-            fn: E((u) => [
-              G(e.$slots, g, Y(W(u)))
-            ])
-          }))
-        ]), 1040, ["option", "disabled", "selected"]))), 128))
-      ]),
-      _: 2
-    }, 1032, ["category-label"]))), 128)) : (v(!0), T(X, { key: 1 }, F(e.items, (o) => (v(), k(n, V({
-      key: o.value,
-      ref_for: !0,
-      ref: "listboxItemRef",
-      role: "option",
-      option: o,
-      disabled: e.isOptionDisabled ? e.isOptionDisabled(o) : null,
-      selected: o.value === e.selectedValue
-    }, se(e.listboxOptionListeners)), ae({ _: 2 }, [
-      F(e.slots, (f, c) => ({
-        name: c,
-        fn: E((g) => [
-          G(e.$slots, c, Y(W(g)))
-        ])
-      }))
-    ]), 1040, ["option", "disabled", "selected"]))), 128))
-  ], 16)), [
-    [d]
-  ]);
-}
-const vt = /* @__PURE__ */ H(bt, [["render", mt]]);
-var fe = /* @__PURE__ */ ((e) => (e.DISABLED = "disabled", e.STATIC_CATEGORY = "static-category", e))(fe || {}), ie = /* @__PURE__ */ ((e) => (e.SELECT_CATEGORY = "select-category", e.UNSELECT_CATEGORY = "unselect-category", e))(ie || {});
-const gt = {
-  "en-US": {
-    categoryClosed: "{category} closed",
-    categoryOpened: "{category} opened"
-  }
-}, pt = q({
-  i18n: { messages: gt },
-  name: "bento-listbox-multi-select-category",
-  components: {
-    BentoCheckbox: Se,
-    BentoTypography: Q,
-    BentoListboxOption: be,
-    ChevronDownIcon: He,
-    ChevronUpIcon: je
-  },
-  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 }
-  },
-  emits: [ie.SELECT_CATEGORY, ie.UNSELECT_CATEGORY],
-  setup(e, { emit: t }) {
-    const a = M(!1), { t: b } = ue(), l = (_) => e.isOptionDisabled ? e.isOptionDisabled(_) : !1, i = m(
-      () => e.category.items.every((_) => l(_))
-    ), n = de(e, "staticCategories"), s = m(() => a.value || e.staticCategories), d = m(() => ({
-      [`b-listbox-multi-select-category--${fe.DISABLED}`]: i.value,
-      [`b-listbox-multi-select-category--${fe.STATIC_CATEGORY}`]: e.staticCategories
-    })), o = (_) => {
-      _.preventDefault(), a.value = !a.value;
-    }, f = (_) => {
-      var Z;
-      const L = l(_), U = ((Z = e.selectedItemsList) == null ? void 0 : Z.includes(_.value)) || !1;
-      return { isDisabled: L, isPreSelected: U };
-    }, c = m(
-      () => e.category.items.filter((_) => {
-        const { isDisabled: L, isPreSelected: U } = f(_);
-        return L && U || !L;
-      })
-    ), g = m(
-      () => {
-        var _;
-        return (_ = c.value) == null ? void 0 : _.filter(
-          ({ value: L }) => {
-            var U;
-            return (U = e.selectedItemsList) == null ? void 0 : U.includes(L);
-          }
-        );
-      }
-    ), u = m(() => {
-      const _ = a.value ? "categoryOpened" : "categoryClosed";
-      return b(_, { category: e.category.label });
-    }), S = m(
-      () => ({
-        el: "span",
-        variant: e.staticCategories ? "caption" : "body"
-      })
-    ), I = () => {
-      t(ie.SELECT_CATEGORY);
-    }, P = () => {
-      t(ie.UNSELECT_CATEGORY);
-    }, { isAllSelected: O, isIndeterminate: D, toggleSelectAll: R } = Ie(
-      g,
-      c,
-      I,
-      P
-    );
-    return {
-      // Values
-      chevronTitle: u,
-      conditionalClass: d,
-      hasAllPropsDisabled: i,
-      isOpen: a,
-      isAllSelected: O,
-      isIndeterminate: D,
-      isStaticCategory: n,
-      // Computed
-      showItemChildren: s,
-      categoryLabelProps: S,
-      // Methods
-      toggleOpen: o,
-      toggleSelectAll: R
-    };
-  }
-});
-const ft = { class: "b-listbox-multi-select-category__label" };
-function yt(e, t, a, b, l, i) {
-  const n = C("bento-checkbox"), s = C("bento-typography"), d = C("chevron-up-icon"), o = C("chevron-down-icon"), f = C("bento-listbox-option");
-  return v(), T("div", null, [
-    $(f, {
-      class: pe(["b-listbox-multi-select-category__option", e.conditionalClass])
-    }, {
-      default: E(() => [
-        e.isStaticCategory ? J("", !0) : (v(), k(n, {
-          key: 0,
-          "model-value": e.isAllSelected,
-          indeterminate: e.isIndeterminate,
-          disabled: e.hasAllPropsDisabled,
-          "aria-label": e.category.label,
-          value: e.category.value,
-          "onUpdate:modelValue": e.toggleSelectAll
-        }, null, 8, ["model-value", "indeterminate", "disabled", "aria-label", "value", "onUpdate:modelValue"])),
-        z("span", ft, [
-          $(s, V(e.categoryLabelProps, { class: "b-listbox-multi-select-category__label-text" }), {
-            default: E(() => [
-              w(x(e.category.label), 1)
-            ]),
-            _: 1
-          }, 16),
-          e.isStaticCategory ? J("", !0) : (v(), T("div", {
-            key: 0,
-            class: "b-listbox-multi-select-category__label-chevron",
-            "data-testid": "toggle-listbox",
-            onClickCapture: t[0] || (t[0] = (...c) => e.toggleOpen && e.toggleOpen(...c))
-          }, [
-            e.isOpen ? (v(), k(d, {
-              key: 0,
-              "svg-title": e.chevronTitle
-            }, null, 8, ["svg-title"])) : (v(), k(o, {
-              key: 1,
-              "svg-title": e.chevronTitle
-            }, null, 8, ["svg-title"]))
-          ], 32))
-        ])
-      ]),
-      _: 1
-    }, 8, ["class"]),
-    ce(z("div", null, [
-      G(e.$slots, "default", {}, void 0, !0)
-    ], 512), [
-      [Ae, e.showItemChildren]
-    ])
-  ]);
-}
-const _t = /* @__PURE__ */ H(pt, [["render", yt], ["__scopeId", "data-v-9a00de22"]]);
-var j = /* @__PURE__ */ ((e) => (e.SELECT_CATEGORY = "select-category", e.TOGGLE_CHECKBOX_SELECTION = "toggle-checkbox-selection", e.UNSELECT_CATEGORY = "unselect-category", e))(j || {});
-const St = q({
-  name: "listbox-multi-select-options",
-  components: {
-    BentoCheckbox: Se,
-    BentoListboxOption: be,
-    BentoTypography: Q,
-    ListboxMultiSelectCategory: _t
-  },
-  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 },
-    /**
-     * 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 }
-  },
-  emits: [
-    j.TOGGLE_CHECKBOX_SELECTION,
-    j.SELECT_CATEGORY,
-    j.UNSELECT_CATEGORY
-  ],
-  setup(e, { emit: t }) {
-    const a = (d) => {
-      t(j.TOGGLE_CHECKBOX_SELECTION, d);
-    }, b = (d) => !!d.items, l = (d) => {
-      const o = e.isMultiLevel && e.searching;
-      return d.description && (!e.isMultiLevel || o);
-    }, i = (d) => d.items ? !!d.items.find((o) => e.selectedItemsList.includes(o.value)) : e.selectedItemsList.includes(d.value), n = (d, o) => {
-      if (b(o))
-        return t(d ? j.SELECT_CATEGORY : j.UNSELECT_CATEGORY, o);
-      a(o.value);
-    };
-    return {
-      // Values
-      conditionalClasses: m(() => ({
-        "b-listbox-multi-select-options__static-category-option": e.staticCategories,
-        "b-listbox-multi-select-options__category-option": e.categoryItems
-      })),
-      // Methods
-      isCategory: b,
-      isOptionSelected: i,
-      shouldShowDescription: l,
-      toggleCheckboxSelection: a,
-      selectSearch: n,
-      // Enums
-      BentoListboxEvent: r,
-      ListboxMultiSelectOptionsEvent: j
-    };
-  }
-});
-const Ct = { class: "b-listbox-multi-select__option-text" }, Et = { class: "b-listbox-multi-select__option-text" };
-function ht(e, t, a, b, l, i) {
-  const n = C("bento-checkbox"), s = C("bento-typography"), d = C("bento-listbox-option"), o = C("listbox-multi-select-options", !0), f = C("listbox-multi-select-category");
-  return v(), T("div", null, [
-    (v(!0), T(X, null, F(e.items, (c) => (v(), T("div", {
-      key: `selected-${c.value}`
-    }, [
-      e.searching && e.isMultiLevel ? (v(), k(d, {
-        key: 0,
-        class: pe(["b-listbox-multi-select-options", e.conditionalClasses]),
-        disabled: e.isOptionDisabled ? e.isOptionDisabled(c) : null
-      }, {
-        default: E(() => [
-          $(n, {
-            "model-value": e.isOptionSelected(c),
-            "aria-label": c.label,
-            disabled: e.isOptionDisabled ? e.isOptionDisabled(c) : null,
-            value: c.value,
-            "onUpdate:modelValue": (g) => e.selectSearch(g, c)
-          }, null, 8, ["model-value", "aria-label", "disabled", "value", "onUpdate:modelValue"]),
-          G(e.$slots, "default", Y(W(c)), () => [
-            z("span", Ct, [
-              $(s, { el: "span" }, {
-                default: E(() => [
-                  w(x(c.label), 1)
-                ]),
-                _: 2
-              }, 1024),
-              e.shouldShowDescription(c) ? (v(), k(s, {
-                key: 0,
-                class: "b-listbox-multi-select__option-description",
-                el: "span"
-              }, {
-                default: E(() => [
-                  w(x(c.description), 1)
-                ]),
-                _: 2
-              }, 1024)) : J("", !0)
-            ])
-          ], !0)
-        ]),
-        _: 2
-      }, 1032, ["class", "disabled"])) : (v(), T(X, { key: 1 }, [
-        c.items ? (v(), k(f, {
-          key: 0,
-          category: c,
-          "static-categories": e.staticCategories,
-          "is-option-disabled": e.isOptionDisabled,
-          "selected-items-list": e.selectedItemsList,
-          onSelectCategory: (g) => e.$emit(e.ListboxMultiSelectOptionsEvent.SELECT_CATEGORY, c),
-          onUnselectCategory: (g) => e.$emit(e.ListboxMultiSelectOptionsEvent.UNSELECT_CATEGORY, c)
-        }, {
-          default: E(() => [
-            $(o, {
-              "category-items": "",
-              items: c.items,
-              "is-option-disabled": e.isOptionDisabled,
-              "is-multi-level": e.isMultiLevel,
-              "static-categories": e.staticCategories,
-              "selected-items-list": e.selectedItemsList,
-              searching: e.searching,
-              onToggleCheckboxSelection: t[0] || (t[0] = (g) => e.toggleCheckboxSelection(g))
-            }, null, 8, ["items", "is-option-disabled", "is-multi-level", "static-categories", "selected-items-list", "searching"])
-          ]),
-          _: 2
-        }, 1032, ["category", "static-categories", "is-option-disabled", "selected-items-list", "onSelectCategory", "onUnselectCategory"])) : (v(), k(d, {
-          key: 1,
-          class: pe(["b-listbox-multi-select-options", e.conditionalClasses]),
-          disabled: e.isOptionDisabled ? e.isOptionDisabled(c) : null
-        }, {
-          default: E(() => [
-            $(n, {
-              "model-value": e.selectedItemsList,
-              "aria-label": c.label,
-              disabled: e.isOptionDisabled ? e.isOptionDisabled(c) : null,
-              value: c.value,
-              "onUpdate:modelValue": (g) => e.toggleCheckboxSelection(c.value)
-            }, null, 8, ["model-value", "aria-label", "disabled", "value", "onUpdate:modelValue"]),
-            G(e.$slots, "default", Y(W(c)), () => [
-              z("span", Et, [
-                $(s, { el: "span" }, {
-                  default: E(() => [
-                    w(x(c.label), 1)
-                  ]),
-                  _: 2
-                }, 1024),
-                e.shouldShowDescription(c) ? (v(), k(s, {
-                  key: 0,
-                  class: "b-listbox-multi-select__option-description",
-                  el: "span"
-                }, {
-                  default: E(() => [
-                    w(x(c.description), 1)
-                  ]),
-                  _: 2
-                }, 1024)) : J("", !0)
-              ])
-            ], !0)
-          ]),
-          _: 2
-        }, 1032, ["class", "disabled"]))
-      ], 64))
-    ]))), 128))
-  ]);
-}
-const Tt = /* @__PURE__ */ H(St, [["render", ht], ["__scopeId", "data-v-ade259b2"]]), Be = {
-  "en-US": {
-    remove: "Remove"
-  }
-}, Ot = { class: "b-listbox-multi-select-chips" }, Lt = {
-  i18n: { messages: Be }
-}, At = /* @__PURE__ */ q({
-  ...Lt,
-  __name: "listbox-multi-select-chips",
-  props: {
-    /**
-     * Function that defines the options to be disabled
-     */
-    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
-    }
-  },
-  emits: ["unselect-item", "unselect-category"],
-  setup(e, { emit: t }) {
-    const { t: a } = ue({ messages: Be }), b = (l) => l.items ? t("unselect-category", l) : t("unselect-item", l.value);
-    return (l, i) => (v(), T("div", Ot, [
-      (v(!0), T(X, null, F(e.items, (n) => (v(), T("div", {
-        key: `selected-${n.value}`
-      }, [
-        $(re(Xe), {
-          class: "b-listbox-multi-select-chips__chip",
-          disabled: e.isOptionDisabled ? e.isOptionDisabled(n) : null,
-          onClick: (s) => b(n)
-        }, {
-          iconRight: E(() => [
-            $(re(Je), {
-              "svg-title": re(a)("remove")
-            }, null, 8, ["svg-title"])
-          ]),
-          default: E(() => [
-            $(re(Q), {
-              el: "span",
-              variant: "caption",
-              class: "b-listbox-multi-select-chips__option-text"
-            }, {
-              default: E(() => [
-                w(x(n.label), 1)
-              ]),
-              _: 2
-            }, 1024)
-          ]),
-          _: 2
-        }, 1032, ["disabled", "onClick"])
-      ]))), 128))
-    ]));
-  }
-});
-const It = /* @__PURE__ */ H(At, [["__scopeId", "data-v-77ad1d28"]]), Ee = {
-  "en-US": {
-    allSelected: "All selected ({total})",
-    numberOfTotalSelected: "{number} of {total} selected",
-    selectAll: "Select all ({total})"
-  }
-}, $t = (e) => {
-  const t = m(() => {
-    var b;
-    return !!((b = e.value) != null && b.find(({ items: l }) => !!l));
-  }), a = m(() => {
-    var b;
-    return t.value ? (b = e.value) == null ? void 0 : b.reduce((l, i) => (i.items ? l.push(...i.items.flat()) : l.push(i), l), []) : e.value;
-  });
-  return {
-    isMultiLevelSelect: t,
-    flattenedItemsList: a
-  };
-}, Bt = q({
-  i18n: { messages: Ee },
-  name: "bento-listbox-multi-select",
-  components: {
-    BentoCheckbox: Se,
-    BentoListboxOption: be,
-    BentoTypography: Q,
-    ListboxMultiSelectOptions: Tt,
-    ListboxMultiSelectChips: It
-  },
-  directives: { BentoKeyboardNavigationDirective: _e },
-  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
-    },
-    /**
-     * 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 },
-    /**
-     * The `input` value.
-     * Providing an empty array will select no options.
-     */
-    selectedValues: {
-      type: Array,
-      default: () => []
-    },
-    /**
-     * If enabled, dropdown will display non-selectable, static categories
-     */
-    staticCategories: { type: Boolean, default: !1 }
-  },
-  emits: [r.SELECT],
-  setup(e, { emit: t, slots: a }) {
-    const { t: b } = ue({ messages: Ee }), l = M(null), i = M(null), n = M(null), s = M();
-    Le(
-      () => e.selectedValues,
-      () => {
-        s.value = [...e.selectedValues ?? []];
-      },
-      {
-        immediate: !0
-      }
-    );
-    const { isMultiLevelSelect: d, flattenedItemsList: o } = $t(de(e, "items")), f = (p) => {
-      var A;
-      const y = e.isOptionDisabled(p), h = ((A = s.value) == null ? void 0 : A.includes(p.value)) || !1;
-      return { isDisabled: y, isPreSelected: h };
-    }, c = m(
-      () => e.searching && d ? e.items : o.value.filter((p) => {
-        const { isDisabled: y, isPreSelected: h } = f(p);
-        return y && h || !y;
-      })
-    ), g = m(
-      () => {
-        var p;
-        return (p = c.value) == null ? void 0 : p.filter((y) => {
-          var h;
-          return y.items && d.value && e.searching ? y.items.filter(
-            (B) => (e.selectedValues ?? []).includes(
-              B.value
-            )
-          ).length === y.items.length : (h = s.value) == null ? void 0 : h.includes(y.value);
-        });
-      }
-    ), u = () => d.value && !e.searching ? o.value.length : e.items.length, S = m(() => {
-      var A;
-      const p = c.value.length, y = u(), h = ((A = g.value) == null ? void 0 : A.length) || 0;
-      return h === 0 ? b("selectAll", { total: p }) : h === y ? b("allSelected", { total: y }) : b("numberOfTotalSelected", { number: h, total: y });
-    }), I = (p) => {
-      const y = (A) => {
-        const { isDisabled: B, isPreSelected: ne } = f(A);
-        return B && ne || !B;
-      }, h = p.filter(y).filter((A) => !s.value.includes(A.value)).map(({ value: A }) => A);
-      s.value = [...s.value, ...h], t(r.SELECT, s.value);
-    }, P = (p) => {
-      const y = (A) => {
-        const { isDisabled: B, isPreSelected: ne } = f(A);
-        return !(B && ne);
-      }, h = p.filter(y).map(({ value: A }) => A);
-      s.value = s.value.filter((A) => !(h != null && h.includes(A))), t(r.SELECT, s.value);
-    }, O = () => {
-      I(o.value);
-    }, D = () => {
-      P(o.value);
-    }, { isAllSelected: R, isIndeterminate: _, toggleSelectAll: L } = Ie(
-      g,
-      c,
-      O,
-      D
-    ), U = (p) => {
-      I(p.items);
-    }, Z = (p) => {
-      P(p.items);
-    }, me = (p, y) => {
-      let h = !1;
-      s.value = s.value.filter((A) => y === A ? (h = !0, !1) : !0), h || s.value.push(y), t(p, s.value);
-    }, le = m(() => {
-      const p = (B) => s.value.includes(B.value), y = (B) => !e.staticCategories && B.every((ne) => p(ne));
-      return e.items.flatMap(
-        (B) => B.items && !y(B.items) ? B.items : B
-      ).filter((B) => B.items ? !0 : p(B));
-    }), ve = m(
-      () => {
-        var p, y, h;
-        return ((p = le.value) == null ? void 0 : p.length) > 0 && ((y = g.value) == null ? void 0 : y.length) !== ((h = o.value) == null ? void 0 : h.length);
-      }
-    ), N = m(
-      () => l.value ? [l.value] : []
-    ), oe = m(
-      () => {
-        var p, y;
-        return (y = (p = i.value) == null ? void 0 : p.$children) != null && y.length ? i.value.$children : [];
-      }
-    ), Re = m(
-      () => {
-        var p, y;
-        return (y = (p = n.value) == null ? void 0 : p.$children) != null && y.length ? n.value.$children : [];
-      }
-    ), De = m(() => ({ label: S, value: R })), Ne = m(() => [
-      De,
-      ...le.value,
-      ...o.value
-    ]), Me = (p) => {
-      [
-        ...N.value,
-        ...oe.value,
-        ...Re.value
-      ][p].$el.focus();
-    }, { moveToNextElement: Pe, moveToPreviousElement: Ue, moveToFirstElement: we, moveToLastElement: xe } = $e(
-      {
-        items: M(Ne),
-        isOptionDisabled: e.isOptionDisabled
-      },
-      Me
-    ), Ve = {
-      [K.ARROW_UP]: (p) => Ue(p),
-      [K.ARROW_DOWN]: (p) => Pe(p),
-      [K.HOME]: we,
-      [K.END]: xe
-    };
-    return {
-      // Refs
-      selectAllListboxItemsRef: l,
-      selectedListboxItemsRef: i,
-      listboxItemsRef: n,
-      // Values
-      isAllSelected: R,
-      showSelectedItems: ve,
-      isIndeterminate: _,
-      isMultiLevelSelect: d,
-      flattenedItemsList: o,
-      selectedItemsList: s,
-      selectAllCheckboxText: S,
-      selectedOptions: le,
-      slots: a,
-      // Enums
-      BentoListboxEvent: r,
-      // Methods
-      selectAllCategory: U,
-      toggleCheckboxSelection: me,
-      toggleSelectAll: L,
-      unselectAllCategory: Z,
-      // Events
-      listboxListeners: Ve
-    };
-  }
-});
-const ke = (e) => (Fe("data-v-5da1ae45"), e = e(), Ye(), e), kt = { key: 0 }, Rt = /* @__PURE__ */ ke(() => /* @__PURE__ */ z("hr", { class: "b-listbox-multi-select__divider" }, null, -1)), Dt = /* @__PURE__ */ ke(() => /* @__PURE__ */ z("hr", { class: "b-listbox-multi-select__divider" }, null, -1));
-function Nt(e, t, a, b, l, i) {
-  const n = C("bento-checkbox"), s = C("bento-typography"), d = C("bento-listbox-option"), o = C("listbox-multi-select-chips"), f = C("listbox-multi-select-options"), c = ye("bento-keyboard-navigation-directive");
-  return ce((v(), T("div", V({ class: "b-listbox-multi-select" }, se(e.listboxListeners, !0)), [
-    $(d, {
-      ref: "selectAllListboxItemsRef",
-      class: "b-listbox-multi-select__option"
-    }, {
-      default: E(() => [
-        $(n, {
-          "aria-label": e.selectAllCheckboxText,
-          "model-value": e.isAllSelected,
-          indeterminate: e.isIndeterminate,
-          "onUpdate:modelValue": e.toggleSelectAll
-        }, null, 8, ["aria-label", "model-value", "indeterminate", "onUpdate:modelValue"]),
-        $(s, { el: "span" }, {
-          default: E(() => [
-            w(x(e.selectAllCheckboxText), 1)
-          ]),
-          _: 1
-        })
-      ]),
-      _: 1
-    }, 512),
-    e.showSelectedItems ? (v(), T("div", kt, [
-      Rt,
-      $(o, {
-        ref: "selectedListboxItemsRef",
-        items: e.selectedOptions,
-        "is-option-disabled": e.isOptionDisabled,
-        onUnselectCategory: e.unselectAllCategory,
-        onUnselectItem: t[0] || (t[0] = (g) => e.toggleCheckboxSelection(e.BentoListboxEvent.SELECT, g))
-      }, null, 8, ["items", "is-option-disabled", "onUnselectCategory"])
-    ])) : J("", !0),
-    Dt,
-    $(f, V({
-      ref: "listboxItemsRef",
-      items: e.items,
-      "is-option-disabled": e.isOptionDisabled,
-      "is-multi-level": e.isMultiLevelSelect,
-      "static-categories": e.staticCategories,
-      searching: e.searching,
-      "selected-items-list": e.selectedItemsList,
-      onToggleCheckboxSelection: t[1] || (t[1] = (g) => e.toggleCheckboxSelection(e.BentoListboxEvent.SELECT, g)),
-      onSelectCategory: e.selectAllCategory,
-      onUnselectCategory: e.unselectAllCategory
-    }, {
-      [te(e.BentoListboxEvent.SPACE)]: t[2] || (t[2] = (g) => e.toggleCheckboxSelection(e.BentoListboxEvent.SPACE, g))
-    }, {
-      [te(e.BentoListboxEvent.TAB)]: t[3] || (t[3] = (g) => e.toggleCheckboxSelection(e.BentoListboxEvent.TAB, g))
-    }, {
-      [te(e.BentoListboxEvent.ENTER)]: t[4] || (t[4] = (g) => e.toggleCheckboxSelection(e.BentoListboxEvent.ENTER, g))
-    }), ae({ _: 2 }, [
-      F(e.slots, (g, u) => ({
-        name: u,
-        fn: E((S) => [
-          G(e.$slots, u, Y(W(S)), void 0, !0)
-        ])
-      }))
-    ]), 1040, ["items", "is-option-disabled", "is-multi-level", "static-categories", "searching", "selected-items-list", "onSelectCategory", "onUnselectCategory"])
-  ], 16)), [
-    [c]
-  ]);
-}
-const he = /* @__PURE__ */ H(Bt, [["render", Nt], ["__scopeId", "data-v-5da1ae45"]]), Te = {
-  "en-US": {
-    showMore: "Show more",
-    loading: "Loading"
-  }
-}, Mt = 36, Pt = q({
-  name: "bento-listbox",
-  components: {
-    BentoEmptyState: ze,
-    BentoListboxSingleSelect: vt,
-    BentoListboxMultiSelect: he,
-    BentoTypography: Q,
-    BentoLoadingIndicator: Ke,
-    BentoLoadingButton: Qe
-  },
-  directives: { BentoKeyboardNavigationDirective: _e },
-  i18n: { messages: Te },
-  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 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: ee.NONE,
-      validator: (e) => Object.values(ee).includes(e)
-    },
-    /**
-     * 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: he.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: [String, Number, Array],
-      default: void 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: [
-    r.SELECT,
-    r.SPACE,
-    r.SHOW_MORE,
-    r.ENTER,
-    r.ESCAPE,
-    r.TAB
-  ],
-  setup(e, { emit: t, slots: a }) {
-    const b = M([]), l = de(e, "items"), { t: i } = ue({ messages: Te }), n = m(() => e.lazyLoadType !== ee.AUTOMATIC), s = m(() => e.lazyLoadType === ee.AUTOMATIC), d = () => {
-      var N;
-      return typeof (e == null ? void 0 : e.virtualScroll) == "object" && ((N = e == null ? void 0 : e.virtualScroll) != null && N.itemHeight) ? e.virtualScroll.itemHeight : Mt;
-    }, {
-      containerRef: o,
-      containerProps: f,
-      onScroll: c,
-      list: g,
-      wrapperProps: u
-    } = et(l, {
-      itemHeight: d(),
-      // Disable virtual scrolling if not enabled or if lazy loading is enabled or if multi-select
-      disabled: (e == null ? void 0 : e.multiple) || (e == null ? void 0 : e.virtualScroll) === !1 || (e == null ? void 0 : e.lazyLoadType) !== "none"
-    }), S = m(
-      () => n.value ? "true" : void 0
-    ), I = m(
-      () => n.value && e.loading ? "true" : "false"
-    ), P = m(
-      () => n.value ? "polite" : void 0
-    ), O = (N) => (oe) => {
-      t(N, oe);
-    }, D = () => {
-      t(r.SHOW_MORE);
-    }, R = We(() => {
-      const N = o.value;
-      if (!N)
-        return;
-      const oe = Math.round(N.scrollTop) + N.clientHeight >= N.scrollHeight;
-      e.hasMoreItems && oe && !e.loading && D();
-    }), _ = () => {
-      s.value ? R() : c();
-    }, L = m(() => {
-      var N;
-      return e.searching && ((N = e.items) == null ? void 0 : N.length) === 0;
-    }), U = m(
-      () => e.lazyLoadType === ee.BUTTON && e.hasMoreItems
-    ), Z = m(
-      () => e.loading ? Ce.LOADING : Ce.START
-    ), me = m(() => e.loading ? i("loading") : i("showMore")), le = m(() => ({
-      ...e.emptyState,
-      variant: "condensed"
-    })), ve = {
-      [r.SELECT]: O(r.SELECT),
-      [r.SPACE]: O(r.SPACE),
-      [r.TAB]: O(r.TAB),
-      [r.ENTER]: O(r.ENTER)
-    };
-    return {
-      // Refs
-      listboxRef: o,
-      listboxItemRef: b,
-      // a11y
-      ariaAtomic: S,
-      ariaBusy: I,
-      ariaLive: P,
-      // Values
-      containerProps: f,
-      isSearchResultEmpty: L,
-      limitedEmptyStateProps: le,
-      loadingButtonState: Z,
-      slots: a,
-      shouldDisplayShowMoreButton: U,
-      showMoreButtonText: me,
-      virtualisedItems: g,
-      wrapperProps: u,
-      // Enums
-      BentoKeyboardNavigationKeyDownEvent: K,
-      BentoListboxEvent: r,
-      // Methods
-      onListboxContainerScroll: _,
-      onOptionSelected: O,
-      emitShowMore: D,
-      listboxListeners: ve
-    };
-  }
-});
-const Ut = ["id", "aria-busy", "aria-atomic", "aria-label", "aria-live"], wt = {
-  key: 0,
-  class: "b-listbox__empty-search-message"
-}, xt = {
-  key: 2,
-  class: "b-listbox__lazy-load"
-}, Vt = {
-  key: 3,
-  class: "b-listbox__lazy-load"
-};
-function Gt(e, t, a, b, l, i) {
-  const n = C("bento-empty-state"), s = C("bento-typography"), d = C("bento-listbox-multi-select"), o = C("bento-listbox-single-select"), f = C("bento-loading-button"), c = C("bento-loading-indicator"), g = ye("bento-keyboard-navigation-directive");
-  return ce((v(), T("div", V({ id: e.id }, e.containerProps, {
-    class: "b-listbox",
-    role: "listbox",
-    tabindex: "-1",
-    "aria-busy": e.ariaBusy,
-    "aria-atomic": e.ariaAtomic,
-    "aria-label": e.ariaLabel,
-    "aria-live": e.ariaLive,
-    onScroll: t[0] || (t[0] = (...u) => e.onListboxContainerScroll && e.onListboxContainerScroll(...u))
-  }), [
-    z("div", Y(W(e.wrapperProps)), [
-      e.isSearchResultEmpty ? (v(), T("div", wt, [
-        e.emptyState ? (v(), k(n, Y(V({ key: 0 }, e.limitedEmptyStateProps)), null, 16)) : (v(), k(s, {
-          key: 1,
-          el: "span"
-        }, {
-          default: E(() => [
-            w(x(e.noResultsMessage), 1)
-          ]),
-          _: 1
-        }))
-      ])) : (v(), T(X, { key: 1 }, [
-        e.multiple ? (v(), k(d, V({
-          key: 0,
-          ref: "listboxItemRef",
-          items: e.items,
-          "static-categories": e.staticCategories,
-          "selected-values": e.selectedValue,
-          searching: e.searching,
-          "is-option-disabled": e.isOptionDisabled
-        }, se(e.listboxListeners)), ae({ _: 2 }, [
-          F(e.slots, (u, S) => ({
-            name: S,
-            fn: E((I) => [
-              G(e.$slots, S, Y(W(I)), void 0, !0)
-            ])
-          }))
-        ]), 1040, ["items", "static-categories", "selected-values", "searching", "is-option-disabled"])) : (v(), k(o, V({
-          key: 1,
-          ref: "listboxItemRef",
-          items: e.virtualisedItems,
-          "selected-value": e.selectedValue,
-          "static-categories": e.staticCategories,
-          "is-option-disabled": e.isOptionDisabled
-        }, se(e.listboxListeners)), ae({ _: 2 }, [
-          F(e.slots, (u, S) => ({
-            name: S,
-            fn: E((I) => [
-              G(e.$slots, S, Y(W(I)), void 0, !0)
-            ])
-          }))
-        ]), 1040, ["items", "selected-value", "static-categories", "is-option-disabled"])),
-        e.shouldDisplayShowMoreButton ? (v(), T("div", xt, [
-          $(f, {
-            state: e.loadingButtonState,
-            variant: "secondary",
-            onClickCapture: e.emitShowMore
-          }, {
-            default: E(() => [
-              w(x(e.showMoreButtonText), 1)
-            ]),
-            _: 1
-          }, 8, ["state", "onClickCapture"])
-        ])) : e.loading ? (v(), T("div", Vt, [
-          $(c)
-        ])) : J("", !0)
-      ], 64))
-    ], 16)
-  ], 16, Ut)), [
-    [g]
-  ]);
-}
-const ls = /* @__PURE__ */ H(Pt, [["render", Gt], ["__scopeId", "data-v-4110c0cb"]]);
-export {
-  ls as B,
-  ee as a,
-  r as b,
-  $t as u
-};
-//# sourceMappingURL=listbox.b6a1aea2.js.map