@adyen/bento-vue3 1.44.0 → 1.45.0

package/dist/chunks/use-cached-selected-values.BBD_AA1m.js

@@ -0,0 +1,1591 @@
+import { computed as v, ref as P, onMounted as Oe, onUnmounted as xe, watch as Ie, defineComponent as W, resolveComponent as L, createElementBlock as _, openBlock as f, createVNode as B, createElementVNode as K, withCtx as T, createTextVNode as G, toDisplayString as w, renderSlot as z, mergeProps as U, withKeys as ve, createCommentVNode as Y, createBlock as D, withModifiers as Ye, normalizeProps as ee, guardReactiveProps as ne, withDirectives as ae, vShow as Ae, toRef as se, resolveDirective as pe, toHandlers as te, Fragment as J, renderList as F, createSlots as ie, normalizeClass as fe, unref as ce, normalizeStyle as Ke } from "vue";
+import { B as x, a as Se } from "./keyboard-navigation.C3QMVRKY.js";
+import "./events.FNmSWp_P.js";
+import { B as Z } from "./typography.DN5eC5ch.js";
+import { B as qe } from "./loading-indicator.DEepb9Wl.js";
+import { B as We } from "./empty-state.C2ancCe6.js";
+import { u as ue } from "./i18n.WMYWtwxB.js";
+import { d as je } from "./debounce.DUTu11PS.js";
+import { B as Ce } from "./checkbox.D9FJcICR.js";
+import { B as He } from "./base-button.DdNFlbgH.js";
+import { C as Xe } from "./cross-small.Z5EKYRm0.js";
+import { _ as q } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import { C as Je, a as Ze } from "./chevron-up.Cu9qXgBY.js";
+import { d as Qe, e as he } from "./button-actions.CShVMUOC.js";
+import { o as et } from "./resize.Bqks3WUm.js";
+import "../assets/use-cached-selected-values.css";
+const $e = (e, t, a, c) => {
+  const u = v(
+    () => {
+      var l, r;
+      return !!((l = e.value) != null && l.length) && ((r = e.value) == null ? void 0 : r.length) === t.value.length;
+    }
+  ), n = v(() => {
+    var l;
+    return e.value == null || e.value.length === 0 ? !1 : ((l = e.value) == null ? void 0 : l.length) !== t.value.length;
+  });
+  return {
+    isAllSelected: u,
+    isIndeterminate: n,
+    toggleSelectAll: (l) => {
+      l ? a() : c();
+    }
+  };
+};
+function tt(e, { disabled: t, itemHeight: a, overscan: c = 5, prefixHeight: u }) {
+  const n = P(null), s = P([]), l = P(0), r = P(0), i = P(0);
+  let y;
+  const o = v(() => {
+    const C = typeof a == "number" ? e.value.length * a : e.value.reduce((k, S, I) => k + a(I), 0), O = typeof a == "number" ? l.value * a : e.value.slice(0, l.value).reduce((k, S, I) => k + a(I), 0);
+    return {
+      style: {
+        marginTop: `${O}px`,
+        height: `${C - O}px`
+      }
+    };
+  }), d = () => {
+    const C = (u == null ? void 0 : u.value) ?? 0, O = Math.max(n.value.scrollTop - C, 0);
+    if (typeof a == "number")
+      return Math.floor(O / a);
+    let k = 0, S = 0;
+    for (let I = 0; I < e.value.length; I += 1) {
+      const V = a(I);
+      if (k += V, k >= O) {
+        S = I;
+        break;
+      }
+    }
+    return S;
+  }, R = () => {
+    if (i.value = n.value.clientHeight, typeof a == "number")
+      return Math.ceil(i.value / a);
+    const C = l.value ?? 0;
+    let O = 0, k = 0;
+    for (let S = C; S < e.value.length; S += 1) {
+      const I = a(S);
+      if (O += I, k = S, O > i.value)
+        break;
+    }
+    return k - C;
+  }, $ = () => {
+    if (n.value) {
+      const C = R();
+      l.value = d(), r.value = Math.min(l.value + C + c, e.value.length), s.value = e.value.slice(l.value, r.value);
+    }
+  }, M = () => {
+    $();
+  };
+  t || (Oe(() => {
+    n.value && (i.value = n.value.clientHeight, y = et(n.value, ({ clientHeight: C }) => {
+      i.value = C, $();
+    }), $());
+  }), xe(() => {
+    y == null || y.disconnect();
+  }), Ie(
+    () => e.value,
+    () => {
+      $();
+    }
+  ));
+  const m = {
+    ref: n,
+    style: { overflowY: "auto" }
+  };
+  return t ? {
+    containerRef: n,
+    containerProps: m,
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onScroll: () => {
+    },
+    list: e
+  } : {
+    containerRef: n,
+    containerProps: m,
+    onScroll: M,
+    list: s,
+    wrapperProps: o
+  };
+}
+var b = /* @__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))(b || {}), X = /* @__PURE__ */ ((e) => (e.AUTOMATIC = "automatic", e.BUTTON = "button", e.NONE = "none", e))(X || {});
+const st = W({
+  name: "bento-listbox-static-category",
+  components: {
+    BentoTypography: Z
+  },
+  props: {
+    /**
+     * Category label text
+     */
+    categoryLabel: {
+      type: String,
+      required: !0
+    }
+  }
+}), lt = { class: "b-listbox-single-select-category" };
+function ot(e, t, a, c, u, n) {
+  const s = L("bento-typography");
+  return f(), _("div", lt, [
+    B(s, {
+      variant: "caption",
+      el: "span",
+      class: "b-listbox-single-select-category__label-text"
+    }, {
+      default: T(() => [
+        G(w(e.categoryLabel), 1)
+      ]),
+      _: 1
+    }),
+    K("div", null, [
+      z(e.$slots, "default", {}, void 0, !0)
+    ])
+  ]);
+}
+const nt = /* @__PURE__ */ q(st, [["render", ot], ["__scopeId", "data-v-a90eff17"]]), it = W({
+  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: [b.CLICK, b.ENTER, b.SPACE, b.TAB],
+  setup(e, { emit: t }) {
+    const a = v(() => ({
+      "b-listbox-option--disabled": e.disabled,
+      "b-listbox-option--selected": e.selected
+    }));
+    return {
+      // Enums
+      BentoKeyboardNavigationKeyDownEvent: x,
+      BentoListboxEvent: b,
+      // Values
+      conditionalClasses: a,
+      // Events
+      onClick: (n) => {
+        t(b.CLICK, n);
+      },
+      onOptionSelected: (n, s) => {
+        t(n, s);
+      }
+    };
+  }
+});
+function at(e, t, a, c, u, n) {
+  return f(), _("label", U({
+    class: ["b-listbox-option", e.conditionalClasses],
+    role: "option"
+  }, e.$attrs, {
+    onClick: t[0] || (t[0] = (...s) => e.onClick && e.onClick(...s)),
+    onKeydown: [
+      t[1] || (t[1] = ve((s) => e.onOptionSelected(e.BentoListboxEvent.ENTER, s), ["enter"])),
+      t[2] || (t[2] = ve((s) => e.onOptionSelected(e.BentoListboxEvent.SPACE, s), ["space"])),
+      t[3] || (t[3] = ve((s) => e.onOptionSelected(e.BentoListboxEvent.TAB, s), ["tab"]))
+    ]
+  }), [
+    z(e.$slots, "default", {}, void 0, !0)
+  ], 16);
+}
+const de = /* @__PURE__ */ q(it, [["render", at], ["__scopeId", "data-v-18a61f5d"]]);
+let Ee = 0;
+const rt = {
+  beforeCreate() {
+    this.uuid = Ee.toString(), Ee += 1;
+  }
+}, ct = { key: 0 };
+function ut(e, t, a, c, u, n) {
+  return f(), _("svg", U({ role: "img" }, e.$attrs, {
+    class: "ui-assets-icons-16",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    fill: "none"
+  }), [
+    e.$attrs["svg-title"] ? (f(), _("title", ct, w(e.$attrs["svg-title"]), 1)) : Y("", !0),
+    t[0] || (t[0] = K("path", {
+      fill: "#00112C",
+      d: "M15.0608 4.00011L14.0001 2.93945L6.00011 10.9395L2.00011 6.93945L0.939453 8.00011L6.00011 13.0608L15.0608 4.00011Z"
+    }, null, -1))
+  ], 16);
+}
+const dt = /* @__PURE__ */ q(rt, [["render", ut]]), bt = W({
+  name: "bento-listbox-single-select-option",
+  components: {
+    BentoListboxOption: de,
+    BentoTypography: Z,
+    CheckmarkIcon: dt
+  },
+  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: [b.ENTER, b.SELECT, b.SPACE, b.TAB],
+  setup(e, { emit: t }) {
+    const a = (s) => {
+      e.disabled || t(s, e.option);
+    }, c = v(() => e.disabled ? !0 : null), u = v(() => e.selected ? !0 : null), n = v(() => e.disabled ? -1 : 0);
+    return {
+      // Values
+      ariaDisabled: c,
+      ariaSelected: u,
+      tabIndex: n,
+      // Enums
+      BentoListboxEvent: b,
+      // Events
+      onOptionSelected: a
+    };
+  }
+}), mt = { class: "b-listbox-single-select-option__text" }, vt = { class: "b-listbox-single-select-option__check-icon" };
+function ft(e, t, a, c, u, n) {
+  const s = L("bento-typography"), l = L("checkmark-icon"), r = L("bento-listbox-option");
+  return f(), D(r, {
+    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] = (i) => e.onOptionSelected(e.BentoListboxEvent.SELECT)),
+    onEnterPressed: t[1] || (t[1] = (i) => e.onOptionSelected(e.BentoListboxEvent.ENTER)),
+    onSpacePressed: t[2] || (t[2] = Ye((i) => e.onOptionSelected(e.BentoListboxEvent.SPACE), ["prevent"])),
+    onTabPressed: t[3] || (t[3] = (i) => e.onOptionSelected(e.BentoListboxEvent.TAB))
+  }, {
+    default: T(() => [
+      z(e.$slots, "default", ee(ne(e.option)), () => [
+        K("span", mt, [
+          B(s, { el: "span" }, {
+            default: T(() => [
+              G(w(e.option.label), 1)
+            ]),
+            _: 1
+          }),
+          e.option.description ? (f(), D(s, {
+            key: 0,
+            class: "b-listbox-single-select-option__description",
+            el: "span"
+          }, {
+            default: T(() => [
+              G(w(e.option.description), 1)
+            ]),
+            _: 1
+          })) : Y("", !0)
+        ])
+      ], !0),
+      K("span", vt, [
+        ae(B(l, { "svg-title": "selected" }, null, 512), [
+          [Ae, e.selected]
+        ])
+      ])
+    ]),
+    _: 3
+  }, 8, ["disabled", "selected", "aria-selected", "aria-disabled", "tabindex"]);
+}
+const gt = /* @__PURE__ */ q(bt, [["render", ft], ["__scopeId", "data-v-226f4c84"]]), ke = ({ items: e, isOptionDisabled: t, hasStaticCategories: a }, c) => {
+  const u = v(
+    () => a.value ? e.value.flatMap((m) => m.items) : e.value
+  ), n = v(() => u.value.length - 1), s = P(0);
+  Oe(() => {
+    t && (s.value = e.value.findIndex((m) => !t(m)));
+  });
+  const l = (m) => !t || !!t && t(e.value[m]), r = (m) => !t || !!t && !t(e.value[m]), i = (m) => {
+    switch (m) {
+      case "increase":
+        s.value += 1;
+        break;
+      case "decrease":
+        s.value -= 1;
+        break;
+    }
+  }, y = ({ edgeCaseItem: m, isItemBeforeEdgeCaseItem: C }, O, k) => {
+    s.value !== m && (C ? r(m) && i(k) : (i(k), l(s.value) && O()), c(s.value));
+  }, o = (m) => {
+    var O;
+    (O = m == null ? void 0 : m.detail) == null || O.preventDefault();
+    const C = s.value === n.value - 2;
+    y(
+      {
+        isItemBeforeEdgeCaseItem: C,
+        edgeCaseItem: n.value
+      },
+      o,
+      "increase"
+      /* INCREASE */
+    );
+  }, d = (m) => {
+    var O;
+    (O = m == null ? void 0 : m.detail) == null || O.preventDefault();
+    const C = s.value === 1;
+    y(
+      {
+        edgeCaseItem: 0,
+        isItemBeforeEdgeCaseItem: C
+      },
+      d,
+      "decrease"
+      /* DECREASE */
+    );
+  };
+  return {
+    moveToFirstElement: () => {
+      s.value = 0, l(s.value) ? o() : c(s.value);
+    },
+    moveToLastElement: () => {
+      s.value = n.value, l(s.value) ? d() : c(s.value);
+    },
+    moveToNextElement: o,
+    moveToPreviousElement: d,
+    setListboxFocusedIndex: (m) => {
+      s.value = m;
+    }
+  };
+}, yt = W({
+  name: "bento-listbox-single-select",
+  components: {
+    BentoListboxSingleSelectCategory: nt,
+    BentoListboxSingleSelectOption: gt
+  },
+  directives: { BentoKeyboardNavigationDirective: Se },
+  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 }
+  },
+  emits: [b.SELECT, b.ENTER, b.SPACE, b.TAB],
+  setup(e, { emit: t, expose: a, slots: c }) {
+    const u = P([]), n = v(() => {
+      var m;
+      return !!((m = e.selectedValue) != null && m.length) && e.selectedValue.at(0);
+    }), s = v(() => !!e.items.some(({ items: m }) => !!m)), l = (m) => (C) => {
+      t(m, [C]);
+    }, r = (m) => u.value[m].$el.focus(), {
+      moveToNextElement: i,
+      moveToPreviousElement: y,
+      moveToFirstElement: o,
+      moveToLastElement: d,
+      setListboxFocusedIndex: R
+    } = ke(
+      {
+        items: se(e, "items"),
+        isOptionDisabled: e.isOptionDisabled,
+        hasStaticCategories: se(e, "staticCategories")
+      },
+      r
+    ), $ = {
+      [x.ARROW_UP]: y,
+      [x.ARROW_DOWN]: i,
+      [x.HOME]: o,
+      [x.END]: d
+    }, M = {
+      [b.SELECT]: l(b.SELECT),
+      [b.SPACE]: l(b.SPACE),
+      [b.TAB]: l(b.TAB),
+      [b.ENTER]: l(b.ENTER)
+    };
+    return a({
+      /**
+       * Reference for a single listbox item.
+       * Required for keyboard navigation in dropdown as $children is removed in vue@3
+       */
+      listboxItemRef: u,
+      /**
+       * 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: R
+    }), {
+      // Enums
+      BentoListboxEvent: b,
+      // Values
+      listboxItemRef: u,
+      selectedItem: n,
+      slots: c,
+      // Computed
+      hasCategories: s,
+      // Methods
+      onOptionSelected: l,
+      // Keyboard navigation
+      listboxListeners: $,
+      listboxOptionListeners: M
+    };
+  }
+});
+function pt(e, t, a, c, u, n) {
+  const s = L("bento-listbox-single-select-option"), l = L("bento-listbox-single-select-category"), r = pe("bento-keyboard-navigation-directive");
+  return ae((f(), _("div", te(e.listboxListeners, !0), [
+    e.hasCategories && e.staticCategories ? (f(!0), _(J, { key: 0 }, F(e.items, (i) => (f(), D(l, {
+      key: i.value,
+      "category-label": i.label,
+      role: "group"
+    }, {
+      default: T(() => [
+        (f(!0), _(J, null, F(i.items, (y) => (f(), D(s, U({
+          key: y.value,
+          ref_for: !0,
+          ref: "listboxItemRef",
+          role: "option",
+          option: y,
+          disabled: e.isOptionDisabled ? e.isOptionDisabled(y) : null,
+          selected: y.value === e.selectedItem.value
+        }, te(e.listboxOptionListeners)), ie({ _: 2 }, [
+          F(e.slots, (o, d) => ({
+            name: d,
+            fn: T((R) => [
+              z(e.$slots, d, U({ ref_for: !0 }, R))
+            ])
+          }))
+        ]), 1040, ["option", "disabled", "selected"]))), 128))
+      ]),
+      _: 2
+    }, 1032, ["category-label"]))), 128)) : (f(!0), _(J, { key: 1 }, F(e.items, (i) => (f(), D(s, U({
+      key: i.value,
+      ref_for: !0,
+      ref: "listboxItemRef",
+      role: "option",
+      option: i,
+      disabled: e.isOptionDisabled ? e.isOptionDisabled(i) : null,
+      selected: i.value === e.selectedItem.value
+    }, te(e.listboxOptionListeners)), ie({ _: 2 }, [
+      F(e.slots, (y, o) => ({
+        name: o,
+        fn: T((d) => [
+          z(e.$slots, o, U({ ref_for: !0 }, d))
+        ])
+      }))
+    ]), 1040, ["option", "disabled", "selected"]))), 128))
+  ], 16)), [
+    [r]
+  ]);
+}
+const St = /* @__PURE__ */ q(yt, [["render", pt]]);
+var ge = /* @__PURE__ */ ((e) => (e.DISABLED = "disabled", e.STATIC_CATEGORY = "static-category", e))(ge || {}), oe = /* @__PURE__ */ ((e) => (e.SELECT_CATEGORY = "select-category", e.UNSELECT_CATEGORY = "unselect-category", e))(oe || {});
+const Ct = {
+  "en-US": {
+    categoryClosed: "{category} closed",
+    categoryOpened: "{category} opened"
+  }
+}, ht = W({
+  i18n: { messages: Ct },
+  name: "bento-listbox-multi-select-category",
+  components: {
+    BentoCheckbox: Ce,
+    BentoTypography: Z,
+    BentoListboxOption: de,
+    ChevronDownIcon: Ze,
+    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: [oe.SELECT_CATEGORY, oe.UNSELECT_CATEGORY],
+  setup(e, { emit: t }) {
+    const a = P(!1), { t: c } = ue(), u = (S) => e.isOptionDisabled ? e.isOptionDisabled(S) : !1, n = v(
+      () => e.category.items.every((S) => u(S))
+    ), s = se(e, "staticCategories"), l = v(() => a.value || e.staticCategories), r = v(() => ({
+      [`b-listbox-multi-select-category--${ge.DISABLED}`]: n.value,
+      [`b-listbox-multi-select-category--${ge.STATIC_CATEGORY}`]: e.staticCategories
+    })), i = (S) => {
+      S.preventDefault(), a.value = !a.value;
+    }, y = (S) => {
+      var Q;
+      const I = u(S), V = ((Q = e.selectedItemsList) == null ? void 0 : Q.includes(S.value)) || !1;
+      return { isDisabled: I, isPreSelected: V };
+    }, o = v(
+      () => e.category.items.filter((S) => {
+        const { isDisabled: I, isPreSelected: V } = y(S);
+        return I && V || !I;
+      })
+    ), d = v(
+      () => {
+        var S;
+        return (S = o.value) == null ? void 0 : S.filter(
+          ({ value: I }) => {
+            var V;
+            return (V = e.selectedItemsList) == null ? void 0 : V.includes(I);
+          }
+        );
+      }
+    ), R = v(() => {
+      const S = a.value ? "categoryOpened" : "categoryClosed";
+      return c(S, { category: e.category.label });
+    }), $ = v(
+      () => ({
+        el: "span",
+        variant: e.staticCategories ? "caption" : "body"
+      })
+    ), M = () => {
+      t(oe.SELECT_CATEGORY);
+    }, m = () => {
+      t(oe.UNSELECT_CATEGORY);
+    }, { isAllSelected: C, isIndeterminate: O, toggleSelectAll: k } = $e(
+      d,
+      o,
+      M,
+      m
+    );
+    return {
+      // Values
+      chevronTitle: R,
+      conditionalClass: r,
+      hasAllPropsDisabled: n,
+      isOpen: a,
+      isAllSelected: C,
+      isIndeterminate: O,
+      isStaticCategory: s,
+      // Computed
+      showItemChildren: l,
+      categoryLabelProps: $,
+      // Methods
+      toggleOpen: i,
+      toggleSelectAll: k
+    };
+  }
+}), Et = { class: "b-listbox-multi-select-category__label" };
+function Lt(e, t, a, c, u, n) {
+  const s = L("bento-checkbox"), l = L("bento-typography"), r = L("chevron-up-icon"), i = L("chevron-down-icon"), y = L("bento-listbox-option");
+  return f(), _("div", null, [
+    B(y, {
+      class: fe(["b-listbox-multi-select-category__option", e.conditionalClass])
+    }, {
+      default: T(() => [
+        e.isStaticCategory ? Y("", !0) : (f(), D(s, {
+          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"])),
+        K("span", Et, [
+          B(l, U(e.categoryLabelProps, { class: "b-listbox-multi-select-category__label-text" }), {
+            default: T(() => [
+              G(w(e.category.label), 1)
+            ]),
+            _: 1
+          }, 16),
+          e.isStaticCategory ? Y("", !0) : (f(), _("div", {
+            key: 0,
+            class: "b-listbox-multi-select-category__label-chevron",
+            "data-testid": "toggle-listbox",
+            onClickCapture: t[0] || (t[0] = (...o) => e.toggleOpen && e.toggleOpen(...o))
+          }, [
+            e.isOpen ? (f(), D(r, {
+              key: 0,
+              "svg-title": e.chevronTitle
+            }, null, 8, ["svg-title"])) : (f(), D(i, {
+              key: 1,
+              "svg-title": e.chevronTitle
+            }, null, 8, ["svg-title"]))
+          ], 32))
+        ])
+      ]),
+      _: 1
+    }, 8, ["class"]),
+    ae(K("div", null, [
+      z(e.$slots, "default", {}, void 0, !0)
+    ], 512), [
+      [Ae, e.showItemChildren]
+    ])
+  ]);
+}
+const Tt = /* @__PURE__ */ q(ht, [["render", Lt], ["__scopeId", "data-v-9a00de22"]]);
+var H = /* @__PURE__ */ ((e) => (e.SELECT_CATEGORY = "select-category", e.TOGGLE_CHECKBOX_SELECTION = "toggle-checkbox-selection", e.UNSELECT_CATEGORY = "unselect-category", e))(H || {});
+const _t = W({
+  name: "listbox-multi-select-options",
+  components: {
+    BentoCheckbox: Ce,
+    BentoListboxOption: de,
+    BentoTypography: Z,
+    ListboxMultiSelectCategory: Tt
+  },
+  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: [
+    H.TOGGLE_CHECKBOX_SELECTION,
+    H.SELECT_CATEGORY,
+    H.UNSELECT_CATEGORY
+  ],
+  setup(e, { emit: t }) {
+    const a = (r) => {
+      t(H.TOGGLE_CHECKBOX_SELECTION, r);
+    }, c = (r) => !!r.items, u = (r) => {
+      const i = e.isMultiLevel && e.searching;
+      return r.description && (!e.isMultiLevel || i);
+    }, n = (r) => r.items ? !!r.items.find((i) => e.selectedItemsList.includes(i.value)) : e.selectedItemsList.includes(r.value), s = (r, i) => {
+      if (c(i))
+        return t(r ? H.SELECT_CATEGORY : H.UNSELECT_CATEGORY, i);
+      a(i.value);
+    };
+    return {
+      // Values
+      conditionalClasses: v(() => ({
+        "b-listbox-multi-select-options__static-category-option": e.staticCategories,
+        "b-listbox-multi-select-options__category-option": e.categoryItems
+      })),
+      // Methods
+      isOptionSelected: n,
+      shouldShowDescription: u,
+      toggleCheckboxSelection: a,
+      selectSearch: s,
+      // Enums
+      BentoListboxEvent: b,
+      ListboxMultiSelectOptionsEvent: H
+    };
+  }
+}), Ot = { class: "b-listbox-multi-select__option-text" }, It = { class: "b-listbox-multi-select__option-text" };
+function At(e, t, a, c, u, n) {
+  const s = L("bento-checkbox"), l = L("bento-typography"), r = L("bento-listbox-option"), i = L("listbox-multi-select-options", !0), y = L("listbox-multi-select-category");
+  return f(), _("div", null, [
+    (f(!0), _(J, null, F(e.items, (o) => (f(), _("div", {
+      key: `selected-${o.value}`
+    }, [
+      e.searching && e.isMultiLevel ? (f(), D(r, {
+        key: 0,
+        class: fe(["b-listbox-multi-select-options", e.conditionalClasses]),
+        disabled: e.isOptionDisabled ? e.isOptionDisabled(o) : null
+      }, {
+        default: T(() => [
+          B(s, {
+            "model-value": e.isOptionSelected(o),
+            "aria-label": o.label,
+            disabled: e.isOptionDisabled ? e.isOptionDisabled(o) : null,
+            value: o.value,
+            "onUpdate:modelValue": (d) => e.selectSearch(d, o)
+          }, null, 8, ["model-value", "aria-label", "disabled", "value", "onUpdate:modelValue"]),
+          z(e.$slots, "default", U({ ref_for: !0 }, o), () => [
+            K("span", Ot, [
+              B(l, { el: "span" }, {
+                default: T(() => [
+                  G(w(o.label), 1)
+                ]),
+                _: 2
+              }, 1024),
+              e.shouldShowDescription(o) ? (f(), D(l, {
+                key: 0,
+                class: "b-listbox-multi-select__option-description",
+                el: "span"
+              }, {
+                default: T(() => [
+                  G(w(o.description), 1)
+                ]),
+                _: 2
+              }, 1024)) : Y("", !0)
+            ])
+          ], !0)
+        ]),
+        _: 2
+      }, 1032, ["class", "disabled"])) : (f(), _(J, { key: 1 }, [
+        o.items ? (f(), D(y, {
+          key: 0,
+          category: o,
+          "static-categories": e.staticCategories,
+          "is-option-disabled": e.isOptionDisabled,
+          "selected-items-list": e.selectedItemsList,
+          onSelectCategory: (d) => e.$emit(e.ListboxMultiSelectOptionsEvent.SELECT_CATEGORY, o),
+          onUnselectCategory: (d) => e.$emit(e.ListboxMultiSelectOptionsEvent.UNSELECT_CATEGORY, o)
+        }, {
+          default: T(() => [
+            B(i, {
+              "category-items": "",
+              items: o.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] = (d) => e.toggleCheckboxSelection(d))
+            }, 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"])) : (f(), D(r, {
+          key: 1,
+          class: fe(["b-listbox-multi-select-options", e.conditionalClasses]),
+          disabled: e.isOptionDisabled ? e.isOptionDisabled(o) : null
+        }, {
+          default: T(() => [
+            B(s, {
+              "model-value": e.selectedItemsList,
+              "aria-label": o.label,
+              disabled: e.isOptionDisabled ? e.isOptionDisabled(o) : null,
+              value: o.value,
+              "onUpdate:modelValue": (d) => e.toggleCheckboxSelection(o)
+            }, null, 8, ["model-value", "aria-label", "disabled", "value", "onUpdate:modelValue"]),
+            z(e.$slots, "default", U({ ref_for: !0 }, o), () => [
+              K("span", It, [
+                B(l, { el: "span" }, {
+                  default: T(() => [
+                    G(w(o.label), 1)
+                  ]),
+                  _: 2
+                }, 1024),
+                e.shouldShowDescription(o) ? (f(), D(l, {
+                  key: 0,
+                  class: "b-listbox-multi-select__option-description",
+                  el: "span"
+                }, {
+                  default: T(() => [
+                    G(w(o.description), 1)
+                  ]),
+                  _: 2
+                }, 1024)) : Y("", !0)
+              ])
+            ], !0)
+          ]),
+          _: 2
+        }, 1032, ["class", "disabled"]))
+      ], 64))
+    ]))), 128))
+  ]);
+}
+const $t = /* @__PURE__ */ q(_t, [["render", At], ["__scopeId", "data-v-25938a72"]]), Be = {
+  "en-US": {
+    remove: "Remove"
+  },
+  "pt-BR": {
+    remove: "Remover"
+  },
+  "ja-JP": {
+    remove: "削除"
+  }
+}, kt = { class: "b-listbox-multi-select-chips" }, Bt = {
+  i18n: { messages: Be }
+}, Rt = /* @__PURE__ */ W({
+  ...Bt,
+  __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 a = t, { t: c } = ue({ messages: Be }), u = (n) => n.items ? a("unselect-category", n) : a("unselect-item", n);
+    return (n, s) => (f(), _("div", kt, [
+      (f(!0), _(J, null, F(e.items, (l) => (f(), _("div", {
+        key: `selected-${l.value}`
+      }, [
+        B(ce(He), {
+          class: "b-listbox-multi-select-chips__chip",
+          disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null,
+          onClick: (r) => u(l)
+        }, {
+          iconRight: T(() => [
+            B(ce(Xe), {
+              "svg-title": ce(c)("remove")
+            }, null, 8, ["svg-title"])
+          ]),
+          default: T(() => [
+            B(ce(Z), {
+              el: "span",
+              variant: "caption",
+              class: "b-listbox-multi-select-chips__option-text"
+            }, {
+              default: T(() => [
+                G(w(l.label), 1)
+              ]),
+              _: 2
+            }, 1024)
+          ]),
+          _: 2
+        }, 1032, ["disabled", "onClick"])
+      ]))), 128))
+    ]));
+  }
+}), Dt = /* @__PURE__ */ q(Rt, [["__scopeId", "data-v-7c5f8bdb"]]), Le = {
+  "en-US": {
+    allSelected: "All selected ({total})",
+    numberOfTotalSelected: "{number} of {total} selected",
+    numbersSelected: "{number} selected",
+    selectAll: "Select all ({total})"
+  }
+}, Mt = (e) => {
+  const t = v(() => {
+    var c;
+    return !!((c = e.value) != null && c.find(({ items: u }) => !!u));
+  }), a = v(() => {
+    var c;
+    return t.value ? (c = e.value) == null ? void 0 : c.reduce((u, n) => (n.items ? u.push(...n.items.flat()) : u.push(n), u), []) : e.value;
+  });
+  return {
+    isMultiLevelSelect: t,
+    flattenedItemsList: a
+  };
+}, Pt = W({
+  i18n: { messages: Le },
+  name: "bento-listbox-multi-select",
+  components: {
+    BentoCheckbox: Ce,
+    BentoListboxOption: de,
+    BentoTypography: Z,
+    ListboxMultiSelectOptions: $t,
+    ListboxMultiSelectChips: Dt
+  },
+  directives: { BentoKeyboardNavigationDirective: Se },
+  props: {
+    /**
+     * Indicates whether there are more items to load
+     */
+    hasMoreItems: { 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
+    },
+    /**
+     * 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: X.NONE,
+      validator: (e) => Object.values(X).includes(e)
+    },
+    /**
+     * 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,
+      required: !0
+    },
+    /**
+     * If enabled, dropdown will display non-selectable, static categories
+     */
+    staticCategories: { type: Boolean, default: !1 }
+  },
+  emits: [b.SELECT],
+  setup(e, { emit: t, slots: a }) {
+    const { t: c } = ue({ messages: Le }), u = P(null), n = P(null), s = P(null), l = v(
+      () => e.selectedValues.map(({ value: g }) => g)
+    ), { isMultiLevelSelect: r, flattenedItemsList: i } = Mt(se(e, "items")), y = (g) => {
+      var A;
+      const p = e.isOptionDisabled(g), h = ((A = l.value) == null ? void 0 : A.includes(g.value)) || !1;
+      return { isDisabled: p, isPreSelected: h };
+    }, o = v(() => {
+      if (e.searching && r)
+        return e.items;
+      const g = i.value.filter((p) => {
+        const { isDisabled: h, isPreSelected: A } = y(p);
+        return h && A || !h;
+      });
+      return e.selectedValues.forEach((p) => {
+        g.find((h) => h.value === p.value) || g.push(p);
+      }), g;
+    }), d = v(
+      () => {
+        var g;
+        return (g = o.value) == null ? void 0 : g.filter((p) => {
+          var h;
+          return p.items && r.value && e.searching ? p.items.filter(
+            (E) => (e.selectedValues ?? []).includes(E.value)
+          ).length === p.items.length : (h = l.value) == null ? void 0 : h.includes(p.value);
+        });
+      }
+    ), R = () => r.value && !e.searching ? i.value.length : e.items.length, $ = v(() => {
+      var A;
+      const g = o.value.length, p = R(), h = ((A = d.value) == null ? void 0 : A.length) || 0;
+      return h === 0 ? c("selectAll", { total: g }) : h === p ? c("allSelected", { total: p }) : h <= p ? c("numberOfTotalSelected", { number: h, total: p }) : c("numbersSelected", { number: h });
+    }), M = (g) => {
+      const p = (A) => {
+        const { isDisabled: E, isPreSelected: j } = y(A);
+        return E && j || !E;
+      }, h = g.filter(p).filter((A) => !l.value.includes(A.value));
+      t(b.SELECT, [...e.selectedValues, ...h]);
+    }, m = (g) => {
+      const p = (E) => {
+        const { isDisabled: j, isPreSelected: Fe } = y(E);
+        return !(j && Fe);
+      }, h = g.filter(p).map(({ value: E }) => E), A = e.selectedValues.filter((E) => !(h != null && h.includes(E.value)));
+      t(b.SELECT, A);
+    }, C = () => {
+      M(i.value);
+    }, O = () => {
+      m(i.value);
+    }, { isAllSelected: k, isIndeterminate: S, toggleSelectAll: I } = $e(
+      d,
+      o,
+      C,
+      O
+    ), V = (g) => {
+      M(g.items);
+    }, Q = (g) => {
+      m(g.items);
+    }, be = (g, p) => {
+      let h = !1;
+      const A = e.selectedValues.filter(({ value: E }) => p.value === E ? (h = !0, !1) : !0);
+      h || A.push(p), t(g, A);
+    }, re = v(() => {
+      if (!r.value)
+        return e.selectedValues;
+      const g = (E) => l.value.includes(E.value), p = (E) => !e.staticCategories && E.every((j) => g(j));
+      return e.items.flatMap(
+        (E) => E.items && !p(E.items) ? E.items : E
+      ).filter((E) => E.items ? !0 : g(E));
+    }), me = v(() => {
+      var h, A, E, j;
+      const g = ["automatic", "button"].includes(e.lazyLoadType), p = ((h = e.selectedValues) == null ? void 0 : h.length) > 0 && ((A = d.value) == null ? void 0 : A.length) !== ((E = i.value) == null ? void 0 : E.length);
+      return g && e.hasMoreItems ? !!((j = e.selectedValues) != null && j.length) : p;
+    }), N = v(() => ["automatic", "button"].includes(e.lazyLoadType) ? !e.hasMoreItems : !0), le = v(
+      () => u.value ? [u.value] : []
+    ), Re = v(
+      () => {
+        var g, p;
+        return (p = (g = n.value) == null ? void 0 : g.$children) != null && p.length ? n.value.$children : [];
+      }
+    ), De = v(
+      () => {
+        var g, p;
+        return (p = (g = s.value) == null ? void 0 : g.$children) != null && p.length ? s.value.$children : [];
+      }
+    ), Me = v(() => ({ label: $, value: k })), Pe = v(() => [
+      Me,
+      ...re.value,
+      ...i.value
+    ]), Ne = (g) => {
+      [
+        ...le.value,
+        ...Re.value,
+        ...De.value
+      ][g].$el.focus();
+    }, { moveToNextElement: we, moveToPreviousElement: Ue, moveToFirstElement: Ve, moveToLastElement: Ge } = ke(
+      {
+        items: P(Pe),
+        isOptionDisabled: e.isOptionDisabled,
+        hasStaticCategories: se(e, "staticCategories")
+      },
+      Ne
+    ), ze = {
+      [x.ARROW_UP]: (g) => Ue(g),
+      [x.ARROW_DOWN]: (g) => we(g),
+      [x.HOME]: Ve,
+      [x.END]: Ge
+    };
+    return {
+      // Refs
+      selectAllListboxItemsRef: u,
+      selectedListboxItemsRef: n,
+      listboxItemsRef: s,
+      // Values
+      isAllSelected: k,
+      showSelectedItems: me,
+      isIndeterminate: S,
+      isMultiLevelSelect: r,
+      flattenedItemsList: i,
+      selectedItemsList: l,
+      selectAllCheckboxText: $,
+      selectedOptions: re,
+      showSelectAllCheckbox: N,
+      slots: a,
+      // Enums
+      BentoListboxEvent: b,
+      // Methods
+      selectAllCategory: V,
+      toggleCheckboxSelection: be,
+      toggleSelectAll: I,
+      unselectAllCategory: Q,
+      // Events
+      listboxListeners: ze
+    };
+  }
+}), Nt = {
+  key: 1,
+  class: "b-listbox-multi-select__divider"
+}, wt = { key: 2 };
+function Ut(e, t, a, c, u, n) {
+  const s = L("bento-checkbox"), l = L("bento-typography"), r = L("bento-listbox-option"), i = L("listbox-multi-select-chips"), y = L("listbox-multi-select-options"), o = pe("bento-keyboard-navigation-directive");
+  return ae((f(), _("div", U({ class: "b-listbox-multi-select" }, te(e.listboxListeners, !0)), [
+    e.showSelectAllCheckbox ? (f(), D(r, {
+      key: 0,
+      ref: "selectAllListboxItemsRef",
+      class: "b-listbox-multi-select__option"
+    }, {
+      default: T(() => [
+        B(s, {
+          "aria-label": e.selectAllCheckboxText,
+          "model-value": e.isAllSelected,
+          indeterminate: e.isIndeterminate,
+          "onUpdate:modelValue": e.toggleSelectAll
+        }, null, 8, ["aria-label", "model-value", "indeterminate", "onUpdate:modelValue"]),
+        B(l, {
+          el: "span",
+          "aria-hidden": "true"
+        }, {
+          default: T(() => [
+            G(w(e.selectAllCheckboxText), 1)
+          ]),
+          _: 1
+        })
+      ]),
+      _: 1
+    }, 512)) : Y("", !0),
+    e.showSelectAllCheckbox ? (f(), _("hr", Nt)) : Y("", !0),
+    e.showSelectedItems ? (f(), _("div", wt, [
+      B(i, {
+        ref: "selectedListboxItemsRef",
+        items: e.selectedOptions,
+        "is-option-disabled": e.isOptionDisabled,
+        onUnselectCategory: e.unselectAllCategory,
+        onUnselectItem: t[0] || (t[0] = (d) => e.toggleCheckboxSelection(e.BentoListboxEvent.SELECT, d))
+      }, null, 8, ["items", "is-option-disabled", "onUnselectCategory"]),
+      t[5] || (t[5] = K("hr", { class: "b-listbox-multi-select__divider" }, null, -1))
+    ])) : Y("", !0),
+    B(y, {
+      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] = (d) => e.toggleCheckboxSelection(e.BentoListboxEvent.SELECT, d)),
+      onSelectCategory: e.selectAllCategory,
+      onUnselectCategory: e.unselectAllCategory,
+      onSpacePressed: t[2] || (t[2] = (d) => e.toggleCheckboxSelection(e.BentoListboxEvent.SPACE, d)),
+      onTabPressed: t[3] || (t[3] = (d) => e.toggleCheckboxSelection(e.BentoListboxEvent.TAB, d)),
+      onEnterPressed: t[4] || (t[4] = (d) => e.toggleCheckboxSelection(e.BentoListboxEvent.ENTER, d))
+    }, ie({ _: 2 }, [
+      F(e.slots, (d, R) => ({
+        name: R,
+        fn: T(($) => [
+          z(e.$slots, R, ee(ne($)), void 0, !0)
+        ])
+      }))
+    ]), 1032, ["items", "is-option-disabled", "is-multi-level", "static-categories", "searching", "selected-items-list", "onSelectCategory", "onUnselectCategory"])
+  ], 16)), [
+    [o]
+  ]);
+}
+const Te = /* @__PURE__ */ q(Pt, [["render", Ut], ["__scopeId", "data-v-282f5857"]]), _e = {
+  "en-US": {
+    loading: "Loading",
+    showMore: "Show more"
+  },
+  "pt-BR": {
+    loading: "Carregando",
+    showMore: "Mostrar mais"
+  },
+  "ja-JP": {
+    loading: "読み込み中",
+    showMore: "表示内容を増やす"
+  }
+}, Vt = 36, Gt = W({
+  name: "bento-listbox",
+  components: {
+    BentoEmptyState: We,
+    BentoListboxSingleSelect: St,
+    BentoListboxMultiSelect: Te,
+    BentoTypography: Z,
+    BentoLoadingIndicator: qe,
+    BentoLoadingButton: Qe
+  },
+  directives: { BentoKeyboardNavigationDirective: Se },
+  i18n: { messages: _e },
+  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: X.NONE,
+      validator: (e) => Object.values(X).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: Te.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: [
+    b.SELECT,
+    b.SPACE,
+    b.SHOW_MORE,
+    b.ENTER,
+    b.ESCAPE,
+    b.TAB
+  ],
+  setup(e, { emit: t, slots: a }) {
+    const c = P([]), u = se(e, "items"), { t: n } = ue({ messages: _e }), s = v(() => e.lazyLoadType !== X.AUTOMATIC), l = v(() => e.lazyLoadType === X.AUTOMATIC), r = () => {
+      var N;
+      return typeof (e == null ? void 0 : e.virtualScroll) == "object" && ((N = e == null ? void 0 : e.virtualScroll) != null && N.itemHeight) ? e.virtualScroll.itemHeight : Vt;
+    }, {
+      containerRef: i,
+      containerProps: y,
+      onScroll: o,
+      list: d,
+      wrapperProps: R
+    } = tt(u, {
+      itemHeight: r(),
+      // 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"
+    }), $ = v(
+      () => s.value ? "true" : void 0
+    ), M = v(
+      () => s.value && e.loading ? "true" : "false"
+    ), m = v(
+      () => s.value ? "polite" : void 0
+    ), C = (N) => (le) => {
+      t(N, le);
+    }, O = () => {
+      t(b.SHOW_MORE);
+    }, k = je(() => {
+      const N = i.value;
+      if (!N)
+        return;
+      const le = Math.round(N.scrollTop) + N.clientHeight >= N.scrollHeight;
+      e.hasMoreItems && le && !e.loading && O();
+    }), S = () => {
+      l.value ? k() : o();
+    }, I = v(() => {
+      var N;
+      return ((N = e.items) == null ? void 0 : N.length) === 0;
+    }), V = v(
+      () => e.lazyLoadType === X.BUTTON && e.hasMoreItems
+    ), Q = v(
+      () => e.loading ? he.LOADING : he.START
+    ), be = v(() => e.loading ? n("loading") : n("showMore")), re = v(() => ({
+      ...e.emptyState,
+      variant: "condensed"
+    })), me = {
+      [b.SELECT]: C(b.SELECT),
+      [b.SPACE]: C(b.SPACE),
+      [b.TAB]: C(b.TAB),
+      [b.ENTER]: C(b.ENTER)
+    };
+    return {
+      // Refs
+      listboxRef: i,
+      listboxItemRef: c,
+      // a11y
+      ariaAtomic: $,
+      ariaBusy: M,
+      ariaLive: m,
+      // Values
+      containerProps: y,
+      isSearchResultEmpty: I,
+      limitedEmptyStateProps: re,
+      loadingButtonState: Q,
+      slots: a,
+      shouldDisplayShowMoreButton: V,
+      showMoreButtonText: be,
+      virtualisedItems: d,
+      wrapperProps: R,
+      // Enums
+      BentoKeyboardNavigationKeyDownEvent: x,
+      BentoListboxEvent: b,
+      // Methods
+      onListboxContainerScroll: S,
+      onOptionSelected: C,
+      emitShowMore: O,
+      listboxListeners: me
+    };
+  }
+}), zt = ["id", "aria-busy", "aria-atomic", "aria-label", "aria-live"], Ft = {
+  key: 0,
+  class: "b-listbox__empty-search-message"
+}, xt = {
+  key: 2,
+  class: "b-listbox__lazy-load"
+}, Yt = {
+  key: 3,
+  class: "b-listbox__lazy-load"
+};
+function Kt(e, t, a, c, u, n) {
+  var R;
+  const s = L("bento-empty-state"), l = L("bento-typography"), r = L("bento-listbox-multi-select"), i = L("bento-listbox-single-select"), y = L("bento-loading-button"), o = L("bento-loading-indicator"), d = pe("bento-keyboard-navigation-directive");
+  return ae((f(), _("div", {
+    id: e.id,
+    ref: "listboxRef",
+    class: "b-listbox",
+    role: "listbox",
+    tabindex: "-1",
+    "aria-busy": e.ariaBusy,
+    "aria-atomic": e.ariaAtomic,
+    "aria-label": e.ariaLabel,
+    "aria-live": e.ariaLive,
+    style: Ke((R = e.containerProps) == null ? void 0 : R.style),
+    onScroll: t[0] || (t[0] = (...$) => e.onListboxContainerScroll && e.onListboxContainerScroll(...$))
+  }, [
+    K("div", ee(ne(e.wrapperProps)), [
+      e.isSearchResultEmpty ? (f(), _("div", Ft, [
+        e.emptyState ? (f(), D(s, ee(U({ key: 0 }, e.limitedEmptyStateProps)), null, 16)) : (f(), D(l, {
+          key: 1,
+          el: "span"
+        }, {
+          default: T(() => [
+            G(w(e.noResultsMessage), 1)
+          ]),
+          _: 1
+        }))
+      ])) : (f(), _(J, { key: 1 }, [
+        e.multiple ? (f(), D(r, U({
+          key: 0,
+          ref: "listboxItemRef",
+          "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
+        }, te(e.listboxListeners)), ie({ _: 2 }, [
+          F(e.slots, ($, M) => ({
+            name: M,
+            fn: T((m) => [
+              z(e.$slots, M, ee(ne(m)), void 0, !0)
+            ])
+          }))
+        ]), 1040, ["has-more-items", "items", "lazy-load-type", "static-categories", "selected-values", "searching", "is-option-disabled"])) : (f(), D(i, U({
+          key: 1,
+          ref: "listboxItemRef",
+          items: e.virtualisedItems,
+          "selected-value": e.selectedValue,
+          "static-categories": e.staticCategories,
+          "is-option-disabled": e.isOptionDisabled
+        }, te(e.listboxListeners)), ie({ _: 2 }, [
+          F(e.slots, ($, M) => ({
+            name: M,
+            fn: T((m) => [
+              z(e.$slots, M, ee(ne(m)), void 0, !0)
+            ])
+          }))
+        ]), 1040, ["items", "selected-value", "static-categories", "is-option-disabled"])),
+        e.shouldDisplayShowMoreButton ? (f(), _("div", xt, [
+          B(y, {
+            state: e.loadingButtonState,
+            variant: "secondary",
+            onClickCapture: e.emitShowMore
+          }, {
+            default: T(() => [
+              G(w(e.showMoreButtonText), 1)
+            ]),
+            _: 1
+          }, 8, ["state", "onClickCapture"])
+        ])) : e.loading ? (f(), _("div", Yt, [
+          B(o)
+        ])) : Y("", !0)
+      ], 64))
+    ], 16)
+  ], 44, zt)), [
+    [d]
+  ]);
+}
+const as = /* @__PURE__ */ q(Gt, [["render", Kt], ["__scopeId", "data-v-3d72f45a"]]), ye = (e, t) => {
+  for (const a of e) {
+    if (a.value === t)
+      return a;
+    if (a.items) {
+      const c = ye(a.items, t);
+      if (c)
+        return c;
+    }
+  }
+  return null;
+}, rs = (e, t, a) => {
+  const c = P([]), u = P(), n = (r) => {
+    u.value = a.value ? r.map(({ value: i }) => i) : r[0].value;
+  }, s = (r) => {
+    c.value = r, n(r);
+  }, l = () => {
+    c.value = [], u.value = null;
+  };
+  return Ie(
+    () => t.value,
+    () => {
+      if (!t.value) {
+        l();
+        return;
+      }
+      const r = !Array.isArray(t.value), i = [...c.value];
+      l();
+      const y = (o) => {
+        let d = ye(e.value, o);
+        d || (d = ye(i, o)), d || (d = { value: o, label: o.toString() }), c.value.push(d);
+      };
+      if (r) {
+        const o = t.value;
+        y(o), n(c.value);
+        return;
+      }
+      t.value.forEach(y), n(c.value);
+    },
+    { immediate: !0 }
+  ), {
+    // Values
+    cachedSelectedListboxOptions: c,
+    cachedListboxSelectedValues: u,
+    // Methods
+    resetCache: l,
+    setCachedValues: s
+  };
+};
+export {
+  X as B,
+  b as a,
+  as as b,
+  rs as c,
+  Mt as u
+};
+//# sourceMappingURL=use-cached-selected-values.BBD_AA1m.js.map