@adyen/bento-vue2 1.24.0 → 1.26.0

package/dist/chunks/{listbox.e6e1bc90.js → use-cached-selected-values.69297473.js}

@@ -1,91 +1,91 @@
-import { computed as c, ref as L, onMounted as Z, onUnmounted as _e, watch as ee, defineComponent as D, toRef as V } from "vue";
-import { B as $ } from "./index.ba6c1040.js";
-import { BentoLoadingIndicator as be } from "../loading-indicator.js";
-import { BentoEmptyState as ve } from "../empty-state.js";
-import { u as z } from "./i18n.eb5b985b.js";
-import { d as me } from "./debounce.b5ef6acf.js";
+import { computed as i, ref as A, onMounted as ee, onUnmounted as ve, watch as te, defineComponent as D, toRef as V } from "vue";
+import { B as w } from "./index.dd30e538.js";
+import { BentoLoadingIndicator as fe } from "../loading-indicator.js";
+import { BentoEmptyState as ge } from "../empty-state.js";
+import { u as Y } from "./i18n.eb5b985b.js";
+import { d as ye } from "./debounce.b5ef6acf.js";
 import { n as N } from "./_plugin-vue2_normalizer.71e2aa87.js";
-import { C as fe } from "./checkmark.a6ed8f47.js";
-import { B as k, a as H } from "./keyboard-navigation.ca47dfa8.js";
-import { B as X } from "./checkbox.f38276e6.js";
+import { C as pe } from "./checkmark.a6ed8f47.js";
+import { B as k, a as X } from "./keyboard-navigation.ca47dfa8.js";
+import { B as J } from "./checkbox.bfed007c.js";
 import "./index.4c062058.js";
-import { C as ge, a as ye } from "./chevron-up.81185563.js";
-import { B as pe } from "./base-button.090f511d.js";
-import { C as xe } from "./cross-small.e851e0de.js";
-import { B as Se, a as J } from "./loading-button.84a5529d.js";
-import { o as Ce } from "./resize.a041304d.js";
-import "../assets/listbox.css";
-const te = (t, e, s, l) => {
-  const n = c(
+import { C as Se, a as xe } from "./chevron-up.81185563.js";
+import { B as Ce } from "./base-button.ad74b6f8.js";
+import { C as he } from "./cross-small.e851e0de.js";
+import { B as Ee, a as Q } from "./loading-button.eafc9e1b.js";
+import { o as Te } from "./resize.a041304d.js";
+import "../assets/use-cached-selected-values.css";
+const se = (t, e, s, l) => {
+  const n = i(
     () => {
-      var a, b;
-      return !!((a = t.value) != null && a.length) && ((b = t.value) == null ? void 0 : b.length) === e.value.length;
+      var d, r;
+      return !!((d = t.value) != null && d.length) && ((r = t.value) == null ? void 0 : r.length) === e.value.length;
     }
-  ), o = c(() => {
-    var a;
-    return t.value == null || t.value.length === 0 ? !1 : ((a = t.value) == null ? void 0 : a.length) !== e.value.length;
+  ), o = i(() => {
+    var d;
+    return t.value == null || t.value.length === 0 ? !1 : ((d = t.value) == null ? void 0 : d.length) !== e.value.length;
   });
   return {
     isAllSelected: n,
     isIndeterminate: o,
-    toggleSelectAll: (a) => {
-      a ? s() : l();
+    toggleSelectAll: (d) => {
+      d ? s() : l();
     }
   };
 };
-function Ee(t, { disabled: e, itemHeight: s, overscan: l = 5, prefixHeight: n }) {
-  const o = L(null), m = L([]), a = L(0), b = L(0), u = L(0);
-  let S;
-  const A = c(() => {
-    const g = typeof s == "number" ? t.value.length * s : t.value.reduce((h, v, y) => h + s(y), 0), O = typeof s == "number" ? a.value * s : t.value.slice(0, a.value).reduce((h, v, y) => h + s(y), 0);
+function Le(t, { disabled: e, itemHeight: s, overscan: l = 5, prefixHeight: n }) {
+  const o = A(null), _ = A([]), d = A(0), r = A(0), u = A(0);
+  let p;
+  const h = i(() => {
+    const S = typeof s == "number" ? t.value.length * s : t.value.reduce((L, m, x) => L + s(x), 0), O = typeof s == "number" ? d.value * s : t.value.slice(0, d.value).reduce((L, m, x) => L + s(x), 0);
     return {
       style: {
         marginTop: `${O}px`,
-        height: `${g - O}px`
+        height: `${S - O}px`
       }
     };
-  }), I = () => {
-    const g = (n == null ? void 0 : n.value) ?? 0, O = Math.max(o.value.scrollTop - g, 0);
+  }), E = () => {
+    const S = (n == null ? void 0 : n.value) ?? 0, O = Math.max(o.value.scrollTop - S, 0);
     if (typeof s == "number")
       return Math.floor(O / s);
-    let h = 0, v = 0;
-    for (let y = 0; y < t.value.length; y += 1) {
-      const R = s(y);
-      if (h += R, h >= O) {
-        v = y;
+    let L = 0, m = 0;
+    for (let x = 0; x < t.value.length; x += 1) {
+      const R = s(x);
+      if (L += R, L >= O) {
+        m = x;
         break;
       }
     }
-    return v;
-  }, d = () => {
+    return m;
+  }, v = () => {
     if (u.value = o.value.clientHeight, typeof s == "number")
       return Math.ceil(u.value / s);
-    const g = a.value ?? 0;
-    let O = 0, h = 0;
-    for (let v = g; v < t.value.length; v += 1) {
-      const y = s(v);
-      if (O += y, h = v, O > u.value)
+    const S = d.value ?? 0;
+    let O = 0, L = 0;
+    for (let m = S; m < t.value.length; m += 1) {
+      const x = s(m);
+      if (O += x, L = m, O > u.value)
         break;
     }
-    return h - g;
-  }, x = () => {
+    return L - S;
+  }, y = () => {
     if (o.value) {
-      const g = d();
-      a.value = I(), b.value = Math.min(a.value + g + l, t.value.length), m.value = t.value.slice(a.value, b.value);
+      const S = v();
+      d.value = E(), r.value = Math.min(d.value + S + l, t.value.length), _.value = t.value.slice(d.value, r.value);
     }
-  }, E = () => {
-    x();
+  }, T = () => {
+    y();
   };
-  e || (Z(() => {
-    o.value && (u.value = o.value.clientHeight, S = Ce(o.value, ({ clientHeight: g }) => {
-      u.value = g, x();
-    }), x());
-  }), _e(() => {
-    S == null || S.disconnect();
-  }), ee(
+  e || (ee(() => {
+    o.value && (u.value = o.value.clientHeight, p = Te(o.value, ({ clientHeight: S }) => {
+      u.value = S, y();
+    }), y());
+  }), ve(() => {
+    p == null || p.disconnect();
+  }), te(
     () => t.value,
     () => {
-      x();
+      y();
     }
   ));
   const B = {
@@ -102,16 +102,16 @@ function Ee(t, { disabled: e, itemHeight: s, overscan: l = 5, prefixHeight: n })
   } : {
     containerRef: o,
     containerProps: B,
-    onScroll: E,
-    list: m,
-    wrapperProps: A
+    onScroll: T,
+    list: _,
+    wrapperProps: h
   };
 }
-var i = /* @__PURE__ */ ((t) => (t.SELECT = "select", t.SHOW_MORE = "show-more", t.ESCAPE = "escape-pressed", t.CLICK = "click", t.ENTER = "enter-pressed", t.SPACE = "space-pressed", t.TAB = "tab-pressed", t.CLOSE_DROPDOWN = "close-dropdown", t))(i || {}), w = /* @__PURE__ */ ((t) => (t.AUTOMATIC = "automatic", t.BUTTON = "button", t.NONE = "none", t))(w || {});
-const he = D({
+var a = /* @__PURE__ */ ((t) => (t.SELECT = "select", t.SHOW_MORE = "show-more", t.ESCAPE = "escape-pressed", t.CLICK = "click", t.ENTER = "enter-pressed", t.SPACE = "space-pressed", t.TAB = "tab-pressed", t.CLOSE_DROPDOWN = "close-dropdown", t))(a || {}), M = /* @__PURE__ */ ((t) => (t.AUTOMATIC = "automatic", t.BUTTON = "button", t.NONE = "none", t))(M || {});
+const Oe = D({
   name: "bento-listbox-static-category",
   components: {
-    BentoTypography: $
+    BentoTypography: w
   },
   props: {
     /**
@@ -123,20 +123,20 @@ const he = D({
     }
   }
 });
-var Oe = function() {
+var Ae = function() {
   var e = this, s = e._self._c;
   return e._self._setupProxy, s("div", { staticClass: "b-listbox-single-select-category" }, [s("bento-typography", { staticClass: "b-listbox-single-select-category__label-text", attrs: { variant: "caption", el: "span" } }, [e._v(" " + e._s(e.categoryLabel) + " ")]), s("div", [e._t("default")], 2)], 1);
-}, Te = [], Le = /* @__PURE__ */ N(
-  he,
+}, Ie = [], Be = /* @__PURE__ */ N(
   Oe,
-  Te,
+  Ae,
+  Ie,
   !1,
   null,
   "4aa8cc6e",
   null,
   null
 );
-const Ae = Le.exports, Ie = D({
+const Re = Be.exports, ke = D({
   name: "bento-listbox-option",
   props: {
     /**
@@ -148,29 +148,29 @@ const Ae = Le.exports, Ie = D({
      */
     selected: { type: Boolean, default: !1 }
   },
-  emits: [i.CLICK, i.ENTER, i.SPACE, i.TAB],
+  emits: [a.CLICK, a.ENTER, a.SPACE, a.TAB],
   setup(t, { emit: e }) {
-    const s = c(() => ({
+    const s = i(() => ({
       "b-listbox-option--disabled": t.disabled,
       "b-listbox-option--selected": t.selected
     }));
     return {
       // Enums
       BentoKeyboardNavigationKeyDownEvent: k,
-      BentoListboxEvent: i,
+      BentoListboxEvent: a,
       // Values
       conditionalClasses: s,
       // Events
       onClick: (o) => {
-        e(i.CLICK, o);
+        e(a.CLICK, o);
       },
-      onOptionSelected: (o, m) => {
-        e(o, m);
+      onOptionSelected: (o, _) => {
+        e(o, _);
       }
     };
   }
 });
-var Be = function() {
+var De = function() {
   var e = this, s = e._self._c;
   return e._self._setupProxy, s("label", e._b({ staticClass: "b-listbox-option", class: e.conditionalClasses, attrs: { role: "option" }, on: { click: e.onClick, keydown: [function(l) {
     return !l.type.indexOf("key") && e._k(l.keyCode, "enter", 13, l.key, "Enter") ? null : e.onOptionSelected(e.BentoListboxEvent.ENTER, l);
@@ -179,22 +179,22 @@ var Be = function() {
   }, function(l) {
     return !l.type.indexOf("key") && e._k(l.keyCode, "tab", 9, l.key, "Tab") ? null : e.onOptionSelected(e.BentoListboxEvent.TAB, l);
   }] } }, "label", e.$attrs, !1), [e._t("default")], 2);
-}, Re = [], ke = /* @__PURE__ */ N(
-  Ie,
-  Be,
-  Re,
+}, Ne = [], Pe = /* @__PURE__ */ N(
+  ke,
+  De,
+  Ne,
   !1,
   null,
   "d7fb415c",
   null,
   null
 );
-const W = ke.exports, De = D({
+const q = Pe.exports, $e = D({
   name: "bento-listbox-single-select-option",
   components: {
-    BentoListboxOption: W,
-    BentoTypography: $,
-    CheckmarkIcon: fe
+    BentoListboxOption: q,
+    BentoTypography: w,
+    CheckmarkIcon: pe
   },
   props: {
     /**
@@ -214,24 +214,24 @@ const W = ke.exports, De = D({
      */
     selected: { type: Boolean, default: !1 }
   },
-  emits: [i.ENTER, i.SELECT, i.SPACE, i.TAB],
+  emits: [a.ENTER, a.SELECT, a.SPACE, a.TAB],
   setup(t, { emit: e }) {
-    const s = (m) => {
-      t.disabled || e(m, t.option.value);
-    }, l = c(() => t.disabled ? !0 : null), n = c(() => t.selected ? !0 : null), o = c(() => t.disabled ? -1 : 0);
+    const s = (_) => {
+      t.disabled || e(_, t.option);
+    }, l = i(() => t.disabled ? !0 : null), n = i(() => t.selected ? !0 : null), o = i(() => t.disabled ? -1 : 0);
     return {
       // Values
       ariaDisabled: l,
       ariaSelected: n,
       tabIndex: o,
       // Enums
-      BentoListboxEvent: i,
+      BentoListboxEvent: a,
       // Events
       onOptionSelected: s
     };
   }
 });
-var Ne = function() {
+var Me = function() {
   var e = this, s = e._self._c;
   return e._self._setupProxy, s("bento-listbox-option", { staticClass: "b-listbox-single-select-option", attrs: { disabled: e.disabled, selected: e.selected, "aria-selected": e.ariaSelected, "aria-disabled": e.ariaDisabled, tabindex: e.tabIndex }, on: e._d({ click: function(l) {
     return e.onOptionSelected(e.BentoListboxEvent.SELECT);
@@ -244,23 +244,23 @@ var Ne = function() {
   }]) }, [e._t("default", function() {
     return [s("span", { staticClass: "b-listbox-single-select-option__text" }, [s("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(e.option.label))]), e.option.description ? s("bento-typography", { staticClass: "b-listbox-single-select-option__description", attrs: { el: "span" } }, [e._v(" " + e._s(e.option.description) + " ")]) : e._e()], 1)];
   }, null, e.option), s("span", { staticClass: "b-listbox-single-select-option__check-icon" }, [s("checkmark-icon", { directives: [{ name: "show", rawName: "v-show", value: e.selected, expression: "selected" }], attrs: { "svg-title": "selected" } })], 1)], 2);
-}, Pe = [], $e = /* @__PURE__ */ N(
-  De,
-  Ne,
-  Pe,
+}, we = [], Fe = /* @__PURE__ */ N(
+  $e,
+  Me,
+  we,
   !1,
   null,
-  "092ed5ee",
+  "3ba7da5b",
   null,
   null
 );
-const Me = $e.exports, se = ({ items: t, isOptionDisabled: e }, s) => {
-  const l = c(() => t.value.length - 1), n = L(0);
-  Z(() => {
-    e && (n.value = t.value.findIndex((d) => !e(d)));
+const Ge = Fe.exports, le = ({ items: t, isOptionDisabled: e }, s) => {
+  const l = i(() => t.value.length - 1), n = A(0);
+  ee(() => {
+    e && (n.value = t.value.findIndex((v) => !e(v)));
   });
-  const o = (d) => !e || !!e && e(t.value[d]), m = (d) => !e || !!e && !e(t.value[d]), a = (d) => {
-    switch (d) {
+  const o = (v) => !e || !!e && e(t.value[v]), _ = (v) => !e || !!e && !e(t.value[v]), d = (v) => {
+    switch (v) {
       case "increase":
         n.value += 1;
         break;
@@ -268,31 +268,31 @@ const Me = $e.exports, se = ({ items: t, isOptionDisabled: e }, s) => {
         n.value -= 1;
         break;
     }
-  }, b = ({ edgeCaseItem: d, isItemBeforeEdgeCaseItem: x }, E, B) => {
-    n.value !== d && (x ? m(d) && a(B) : (a(B), o(n.value) && E()), s(n.value));
-  }, u = (d) => {
-    var E;
-    (E = d == null ? void 0 : d.detail) == null || E.preventDefault();
-    const x = n.value === l.value - 2;
-    b(
+  }, r = ({ edgeCaseItem: v, isItemBeforeEdgeCaseItem: y }, T, B) => {
+    n.value !== v && (y ? _(v) && d(B) : (d(B), o(n.value) && T()), s(n.value));
+  }, u = (v) => {
+    var T;
+    (T = v == null ? void 0 : v.detail) == null || T.preventDefault();
+    const y = n.value === l.value - 2;
+    r(
       {
-        isItemBeforeEdgeCaseItem: x,
+        isItemBeforeEdgeCaseItem: y,
         edgeCaseItem: l.value
       },
       u,
       "increase"
       /* INCREASE */
     );
-  }, S = (d) => {
-    var E;
-    (E = d == null ? void 0 : d.detail) == null || E.preventDefault();
-    const x = n.value === 1;
-    b(
+  }, p = (v) => {
+    var T;
+    (T = v == null ? void 0 : v.detail) == null || T.preventDefault();
+    const y = n.value === 1;
+    r(
       {
         edgeCaseItem: 0,
-        isItemBeforeEdgeCaseItem: x
+        isItemBeforeEdgeCaseItem: y
       },
-      S,
+      p,
       "decrease"
       /* DECREASE */
     );
@@ -302,18 +302,18 @@ const Me = $e.exports, se = ({ items: t, isOptionDisabled: e }, s) => {
       n.value = 0, o(n.value) ? u() : s(n.value);
     },
     moveToLastElement: () => {
-      n.value = l.value, o(n.value) ? S() : s(n.value);
+      n.value = l.value, o(n.value) ? p() : s(n.value);
     },
     moveToNextElement: u,
-    moveToPreviousElement: S
+    moveToPreviousElement: p
   };
-}, we = D({
+}, Ue = D({
   name: "bento-listbox-single-select",
   components: {
-    BentoListboxSingleSelectCategory: Ae,
-    BentoListboxSingleSelectOption: Me
+    BentoListboxSingleSelectCategory: Re,
+    BentoListboxSingleSelectOption: Ge
   },
-  directives: { BentoKeyboardNavigationDirective: H },
+  directives: { BentoKeyboardNavigationDirective: X },
   inheritAttrs: !1,
   props: {
     /**
@@ -346,7 +346,7 @@ const Me = $e.exports, se = ({ items: t, isOptionDisabled: e }, s) => {
      * Set to an empty string `''` if you don't want any of the available options to be selected
      */
     selectedValue: {
-      type: [String, Number],
+      type: Array,
       default: void 0
     },
     /**
@@ -354,86 +354,90 @@ const Me = $e.exports, se = ({ items: t, isOptionDisabled: e }, s) => {
      */
     staticCategories: { type: Boolean, default: !1 }
   },
-  emits: [i.SELECT, i.ENTER, i.SPACE, i.TAB],
+  emits: [a.SELECT, a.ENTER, a.SPACE, a.TAB],
   setup(t, { emit: e, slots: s }) {
-    const l = L([]), n = c(() => !!t.items.find(({ items: d }) => !!d)), o = (d) => (x) => {
-      e(d, x);
-    }, m = (d) => l.value[d].$el.focus(), { moveToNextElement: a, moveToPreviousElement: b, moveToFirstElement: u, moveToLastElement: S } = se(
+    const l = A([]), n = i(() => {
+      var y;
+      return !!((y = t.selectedValue) != null && y.length) && t.selectedValue.at(0);
+    }), o = i(() => !!t.items.some(({ items: y }) => !!y)), _ = (y) => (T) => {
+      e(y, [T]);
+    }, d = (y) => l.value[y].$el.focus(), { moveToNextElement: r, moveToPreviousElement: u, moveToFirstElement: p, moveToLastElement: h } = le(
       {
         items: V(t, "items"),
         isOptionDisabled: t.isOptionDisabled
       },
-      m
-    ), A = {
-      [k.ARROW_UP]: b,
-      [k.ARROW_DOWN]: a,
-      [k.HOME]: u,
-      [k.END]: S
-    }, I = {
-      [i.SELECT]: o(i.SELECT),
-      [i.SPACE]: o(i.SPACE),
-      [i.TAB]: o(i.TAB),
-      [i.ENTER]: o(i.ENTER)
+      d
+    ), E = {
+      [k.ARROW_UP]: u,
+      [k.ARROW_DOWN]: r,
+      [k.HOME]: p,
+      [k.END]: h
+    }, v = {
+      [a.SELECT]: _(a.SELECT),
+      [a.SPACE]: _(a.SPACE),
+      [a.TAB]: _(a.TAB),
+      [a.ENTER]: _(a.ENTER)
     };
     return {
       // Enums
-      BentoListboxEvent: i,
+      BentoListboxEvent: a,
       // Values
       listboxItemRef: l,
+      selectedItem: n,
       slots: s,
       // Computed
-      hasCategories: n,
+      hasCategories: o,
       // Methods
-      onOptionSelected: o,
+      onOptionSelected: _,
       // Keyboard navigation
-      listboxListeners: A,
-      listboxOptionListeners: I
+      listboxListeners: E,
+      listboxOptionListeners: v
     };
   }
 });
-var Fe = function() {
+var ze = function() {
   var e = this, s = e._self._c;
   return e._self._setupProxy, s("div", e._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }] }, e.listboxListeners), [e.hasCategories && e.staticCategories ? e._l(e.items, function(l) {
     return s("bento-listbox-single-select-category", { key: l.value, attrs: { "category-label": l.label, role: "group" } }, e._l(l.items, function(n) {
-      return s("bento-listbox-single-select-option", e._g({ key: n.value, ref: "listboxItemRef", refInFor: !0, attrs: { role: "option", option: n, disabled: e.isOptionDisabled ? e.isOptionDisabled(n) : null, selected: n.value === e.selectedValue }, scopedSlots: e._u([e._l(e.slots, function(o, m) {
-        return { key: m, fn: function(a) {
-          return [e._t(m, null, null, a)];
+      return s("bento-listbox-single-select-option", e._g({ key: n.value, ref: "listboxItemRef", refInFor: !0, attrs: { role: "option", option: n, disabled: e.isOptionDisabled ? e.isOptionDisabled(n) : null, selected: n.value === e.selectedItem.value }, scopedSlots: e._u([e._l(e.slots, function(o, _) {
+        return { key: _, fn: function(d) {
+          return [e._t(_, null, null, d)];
         } };
       })], null, !0) }, e.listboxOptionListeners));
     }), 1);
   }) : e._l(e.items, function(l) {
-    return s("bento-listbox-single-select-option", e._g({ key: l.value, ref: "listboxItemRef", refInFor: !0, attrs: { role: "option", option: l, disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null, selected: l.value === e.selectedValue }, scopedSlots: e._u([e._l(e.slots, function(n, o) {
-      return { key: o, fn: function(m) {
-        return [e._t(o, null, null, m)];
+    return s("bento-listbox-single-select-option", e._g({ key: l.value, ref: "listboxItemRef", refInFor: !0, attrs: { role: "option", option: l, disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null, selected: l.value === e.selectedItem.value }, scopedSlots: e._u([e._l(e.slots, function(n, o) {
+      return { key: o, fn: function(_) {
+        return [e._t(o, null, null, _)];
       } };
     })], null, !0) }, e.listboxOptionListeners));
   })], 2);
-}, Ge = [], Ue = /* @__PURE__ */ N(
-  we,
-  Fe,
-  Ge,
+}, Ve = [], Ye = /* @__PURE__ */ N(
+  Ue,
+  ze,
+  Ve,
   !1,
   null,
   null,
   null,
   null
 );
-const Ye = Ue.exports;
-var j = /* @__PURE__ */ ((t) => (t.DISABLED = "disabled", t.STATIC_CATEGORY = "static-category", t))(j || {}), Y = /* @__PURE__ */ ((t) => (t.SELECT_CATEGORY = "select-category", t.UNSELECT_CATEGORY = "unselect-category", t))(Y || {});
-const Ve = {
+const qe = Ye.exports;
+var j = /* @__PURE__ */ ((t) => (t.DISABLED = "disabled", t.STATIC_CATEGORY = "static-category", t))(j || {}), U = /* @__PURE__ */ ((t) => (t.SELECT_CATEGORY = "select-category", t.UNSELECT_CATEGORY = "unselect-category", t))(U || {});
+const We = {
   "en-US": {
     categoryClosed: "{category} closed",
     categoryOpened: "{category} opened"
   }
-}, ze = D({
-  i18n: { messages: Ve },
+}, Ke = D({
+  i18n: { messages: We },
   name: "bento-listbox-multi-select-category",
   components: {
-    BentoCheckbox: X,
-    BentoTypography: $,
-    BentoListboxOption: W,
-    ChevronDownIcon: ge,
-    ChevronUpIcon: ye
+    BentoCheckbox: J,
+    BentoTypography: w,
+    BentoListboxOption: q,
+    ChevronDownIcon: Se,
+    ChevronUpIcon: xe
   },
   props: {
     /**
@@ -474,94 +478,94 @@ const Ve = {
      */
     staticCategories: { type: Boolean, default: !1 }
   },
-  emits: [Y.SELECT_CATEGORY, Y.UNSELECT_CATEGORY],
+  emits: [U.SELECT_CATEGORY, U.UNSELECT_CATEGORY],
   setup(t, { emit: e }) {
-    const s = L(!1), { t: l } = z(), n = (v) => t.isOptionDisabled ? t.isOptionDisabled(v) : !1, o = c(
-      () => t.category.items.every((v) => n(v))
-    ), m = V(t, "staticCategories"), a = c(() => s.value || t.staticCategories), b = c(() => ({
+    const s = A(!1), { t: l } = Y(), n = (m) => t.isOptionDisabled ? t.isOptionDisabled(m) : !1, o = i(
+      () => t.category.items.every((m) => n(m))
+    ), _ = V(t, "staticCategories"), d = i(() => s.value || t.staticCategories), r = i(() => ({
       [`b-listbox-multi-select-category--${j.DISABLED}`]: o.value,
       [`b-listbox-multi-select-category--${j.STATIC_CATEGORY}`]: t.staticCategories
-    })), u = (v) => {
-      v.preventDefault(), s.value = !s.value;
-    }, S = (v) => {
-      var M;
-      const y = n(v), R = ((M = t.selectedItemsList) == null ? void 0 : M.includes(v.value)) || !1;
-      return { isDisabled: y, isPreSelected: R };
-    }, A = c(
-      () => t.category.items.filter((v) => {
-        const { isDisabled: y, isPreSelected: R } = S(v);
-        return y && R || !y;
+    })), u = (m) => {
+      m.preventDefault(), s.value = !s.value;
+    }, p = (m) => {
+      var F;
+      const x = n(m), R = ((F = t.selectedItemsList) == null ? void 0 : F.includes(m.value)) || !1;
+      return { isDisabled: x, isPreSelected: R };
+    }, h = i(
+      () => t.category.items.filter((m) => {
+        const { isDisabled: x, isPreSelected: R } = p(m);
+        return x && R || !x;
       })
-    ), I = c(
+    ), E = i(
       () => {
-        var v;
-        return (v = A.value) == null ? void 0 : v.filter(
-          ({ value: y }) => {
+        var m;
+        return (m = h.value) == null ? void 0 : m.filter(
+          ({ value: x }) => {
             var R;
-            return (R = t.selectedItemsList) == null ? void 0 : R.includes(y);
+            return (R = t.selectedItemsList) == null ? void 0 : R.includes(x);
           }
         );
       }
-    ), d = c(() => {
-      const v = s.value ? "categoryOpened" : "categoryClosed";
-      return l(v, { category: t.category.label });
-    }), x = c(
+    ), v = i(() => {
+      const m = s.value ? "categoryOpened" : "categoryClosed";
+      return l(m, { category: t.category.label });
+    }), y = i(
       () => ({
         el: "span",
         variant: t.staticCategories ? "caption" : "body"
       })
-    ), E = () => {
-      e(Y.SELECT_CATEGORY);
+    ), T = () => {
+      e(U.SELECT_CATEGORY);
     }, B = () => {
-      e(Y.UNSELECT_CATEGORY);
-    }, { isAllSelected: g, isIndeterminate: O, toggleSelectAll: h } = te(
-      I,
-      A,
+      e(U.UNSELECT_CATEGORY);
+    }, { isAllSelected: S, isIndeterminate: O, toggleSelectAll: L } = se(
       E,
+      h,
+      T,
       B
     );
     return {
       // Values
-      chevronTitle: d,
-      conditionalClass: b,
+      chevronTitle: v,
+      conditionalClass: r,
       hasAllPropsDisabled: o,
       isOpen: s,
-      isAllSelected: g,
+      isAllSelected: S,
       isIndeterminate: O,
-      isStaticCategory: m,
+      isStaticCategory: _,
       // Computed
-      showItemChildren: a,
-      categoryLabelProps: x,
+      showItemChildren: d,
+      categoryLabelProps: y,
       // Methods
       toggleOpen: u,
-      toggleSelectAll: h
+      toggleSelectAll: L
     };
   }
 });
-var We = function() {
+var je = function() {
   var e = this, s = e._self._c;
   return e._self._setupProxy, s("div", [s("bento-listbox-option", { staticClass: "b-listbox-multi-select-category__option", class: e.conditionalClass }, [e.isStaticCategory ? e._e() : s("bento-checkbox", { attrs: { "model-value": e.isAllSelected, indeterminate: e.isIndeterminate, disabled: e.hasAllPropsDisabled, "aria-label": e.category.label, value: e.category.value }, on: { "update:model-value": e.toggleSelectAll } }), s("span", { staticClass: "b-listbox-multi-select-category__label" }, [s("bento-typography", e._b({ staticClass: "b-listbox-multi-select-category__label-text" }, "bento-typography", e.categoryLabelProps, !1), [e._v(" " + e._s(e.category.label) + " ")]), e.isStaticCategory ? e._e() : s("div", { staticClass: "b-listbox-multi-select-category__label-chevron", attrs: { "data-testid": "toggle-listbox" }, on: { "!click": function(l) {
     return e.toggleOpen.apply(null, arguments);
   } } }, [e.isOpen ? s("chevron-up-icon", { attrs: { "svg-title": e.chevronTitle } }) : s("chevron-down-icon", { attrs: { "svg-title": e.chevronTitle } })], 1)], 1)], 1), s("div", { directives: [{ name: "show", rawName: "v-show", value: e.showItemChildren, expression: "showItemChildren" }] }, [e._t("default")], 2)], 1);
-}, qe = [], Ke = /* @__PURE__ */ N(
-  ze,
-  We,
-  qe,
+}, He = [], Xe = /* @__PURE__ */ N(
+  Ke,
+  je,
+  He,
   !1,
   null,
   "f360ac3d",
   null,
   null
 );
-const je = Ke.exports;
-var P = /* @__PURE__ */ ((t) => (t.SELECT_CATEGORY = "select-category", t.TOGGLE_CHECKBOX_SELECTION = "toggle-checkbox-selection", t.UNSELECT_CATEGORY = "unselect-category", t))(P || {});
-const He = D({
+const Je = Xe.exports;
+var $ = /* @__PURE__ */ ((t) => (t.SELECT_CATEGORY = "select-category", t.TOGGLE_CHECKBOX_SELECTION = "toggle-checkbox-selection", t.UNSELECT_CATEGORY = "unselect-category", t))($ || {});
+const Qe = D({
   name: "listbox-multi-select-options",
   components: {
-    BentoCheckbox: X,
-    BentoListboxOption: W,
-    BentoTypography: $,
-    ListboxMultiSelectCategory: je
+    BentoCheckbox: J,
+    BentoListboxOption: q,
+    BentoTypography: w,
+    ListboxMultiSelectCategory: Je
   },
   props: {
     /**
@@ -619,40 +623,39 @@ const He = D({
     staticCategories: { type: Boolean, default: !1 }
   },
   emits: [
-    P.TOGGLE_CHECKBOX_SELECTION,
-    P.SELECT_CATEGORY,
-    P.UNSELECT_CATEGORY
+    $.TOGGLE_CHECKBOX_SELECTION,
+    $.SELECT_CATEGORY,
+    $.UNSELECT_CATEGORY
   ],
   setup(t, { emit: e }) {
-    const s = (b) => {
-      e(P.TOGGLE_CHECKBOX_SELECTION, b);
-    }, l = (b) => !!b.items, n = (b) => {
+    const s = (r) => {
+      e($.TOGGLE_CHECKBOX_SELECTION, r);
+    }, l = (r) => !!r.items, n = (r) => {
       const u = t.isMultiLevel && t.searching;
-      return b.description && (!t.isMultiLevel || u);
-    }, o = (b) => b.items ? !!b.items.find((u) => t.selectedItemsList.includes(u.value)) : t.selectedItemsList.includes(b.value), m = (b, u) => {
+      return r.description && (!t.isMultiLevel || u);
+    }, o = (r) => r.items ? !!r.items.find((u) => t.selectedItemsList.includes(u.value)) : t.selectedItemsList.includes(r.value), _ = (r, u) => {
       if (l(u))
-        return e(b ? P.SELECT_CATEGORY : P.UNSELECT_CATEGORY, u);
+        return e(r ? $.SELECT_CATEGORY : $.UNSELECT_CATEGORY, u);
       s(u.value);
     };
     return {
       // Values
-      conditionalClasses: c(() => ({
+      conditionalClasses: i(() => ({
         "b-listbox-multi-select-options__static-category-option": t.staticCategories,
         "b-listbox-multi-select-options__category-option": t.categoryItems
       })),
       // Methods
-      isCategory: l,
       isOptionSelected: o,
       shouldShowDescription: n,
       toggleCheckboxSelection: s,
-      selectSearch: m,
+      selectSearch: _,
       // Enums
-      BentoListboxEvent: i,
-      ListboxMultiSelectOptionsEvent: P
+      BentoListboxEvent: a,
+      ListboxMultiSelectOptionsEvent: $
     };
   }
 });
-var Xe = function() {
+var Ze = function() {
   var e = this, s = e._self._c;
   return e._self._setupProxy, s("div", e._l(e.items, function(l) {
     return s("div", { key: `selected-${l.value}` }, [e.searching && e.isMultiLevel ? [s("bento-listbox-option", { staticClass: "b-listbox-multi-select-options", class: e.conditionalClasses, attrs: { disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null } }, [s("bento-checkbox", { attrs: { "model-value": e.isOptionSelected(l), "aria-label": l.label, disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null, value: l.value }, on: { "update:model-value": (n) => e.selectSearch(n, l) } }), e._t("default", function() {
@@ -662,29 +665,29 @@ var Xe = function() {
     }, "unselect-category": function(n) {
       return e.$emit(e.ListboxMultiSelectOptionsEvent.UNSELECT_CATEGORY, l);
     } } }, [s("listbox-multi-select-options", { attrs: { "category-items": "", items: l.items, "is-option-disabled": e.isOptionDisabled, "is-multi-level": e.isMultiLevel, "static-categories": e.staticCategories, "selected-items-list": e.selectedItemsList, searching: e.searching }, on: { "toggle-checkbox-selection": (n) => e.toggleCheckboxSelection(n) } })], 1)] : s("bento-listbox-option", { staticClass: "b-listbox-multi-select-options", class: e.conditionalClasses, attrs: { disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null } }, [s("bento-checkbox", { attrs: { "model-value": e.selectedItemsList, "aria-label": l.label, disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null, value: l.value }, on: { "update:model-value": function(n) {
-      return e.toggleCheckboxSelection(l.value);
+      return e.toggleCheckboxSelection(l);
     } } }), e._t("default", function() {
       return [s("span", { staticClass: "b-listbox-multi-select__option-text" }, [s("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(l.label))]), e.shouldShowDescription(l) ? s("bento-typography", { staticClass: "b-listbox-multi-select__option-description", attrs: { el: "span" } }, [e._v(" " + e._s(l.description) + " ")]) : e._e()], 1)];
     }, null, l)], 2)]], 2);
   }), 0);
-}, Je = [], Qe = /* @__PURE__ */ N(
-  He,
-  Xe,
-  Je,
+}, et = [], tt = /* @__PURE__ */ N(
+  Qe,
+  Ze,
+  et,
   !1,
   null,
-  "c9b2c61d",
+  "b2db9f50",
   null,
   null
 );
-const Ze = Qe.exports, et = {
+const st = tt.exports, lt = {
   "en-US": {
     remove: "Remove"
   }
-}, tt = {
-  i18n: { messages: et }
-}, st = /* @__PURE__ */ D({
-  ...tt,
+}, nt = {
+  i18n: { messages: lt }
+}, ot = /* @__PURE__ */ D({
+  ...nt,
   __name: "listbox-multi-select-chips",
   props: {
     /**
@@ -708,11 +711,11 @@ const Ze = Qe.exports, et = {
   },
   emits: ["unselect-item", "unselect-category"],
   setup(t, { emit: e }) {
-    const { t: s } = z();
-    return { __sfc: !0, emit: e, t: s, unselectOption: (n) => n.items ? e("unselect-category", n) : e("unselect-item", n.value), BentoTypography: $, BaseButton: pe, CrossSmallIcon: xe };
+    const { t: s } = Y();
+    return { __sfc: !0, emit: e, t: s, unselectOption: (n) => n.items ? e("unselect-category", n) : e("unselect-item", n), BentoTypography: w, BaseButton: Ce, CrossSmallIcon: he };
   }
 });
-var lt = function() {
+var at = function() {
   var e = this, s = e._self._c, l = e._self._setupProxy;
   return s("div", { staticClass: "b-listbox-multi-select-chips" }, e._l(e.items, function(n) {
     return s("div", { key: `selected-${n.value}` }, [s(l.BaseButton, { staticClass: "b-listbox-multi-select-chips__chip", attrs: { disabled: e.isOptionDisabled ? e.isOptionDisabled(n) : null }, on: { click: function(o) {
@@ -721,27 +724,28 @@ var lt = function() {
       return [s(l.CrossSmallIcon, { attrs: { "svg-title": l.t("remove") } })];
     }, proxy: !0 }], null, !0) }, [s(l.BentoTypography, { staticClass: "b-listbox-multi-select-chips__option-text", attrs: { el: "span", variant: "caption" } }, [e._v(e._s(n.label))])], 1)], 1);
   }), 0);
-}, nt = [], ot = /* @__PURE__ */ N(
-  st,
-  lt,
-  nt,
+}, it = [], ct = /* @__PURE__ */ N(
+  ot,
+  at,
+  it,
   !1,
   null,
-  "7590db86",
+  "931e5246",
   null,
   null
 );
-const it = ot.exports, at = {
+const rt = ct.exports, ut = {
   "en-US": {
     allSelected: "All selected ({total})",
     numberOfTotalSelected: "{number} of {total} selected",
+    numbersSelected: "{number} selected",
     selectAll: "Select all ({total})"
   }
-}, ct = (t) => {
-  const e = c(() => {
+}, dt = (t) => {
+  const e = i(() => {
     var l;
     return !!((l = t.value) != null && l.find(({ items: n }) => !!n));
-  }), s = c(() => {
+  }), s = i(() => {
     var l;
     return e.value ? (l = t.value) == null ? void 0 : l.reduce((n, o) => (o.items ? n.push(...o.items.flat()) : n.push(o), n), []) : t.value;
   });
@@ -749,18 +753,22 @@ const it = ot.exports, at = {
     isMultiLevelSelect: e,
     flattenedItemsList: s
   };
-}, rt = D({
-  i18n: { messages: at },
+}, _t = D({
+  i18n: { messages: ut },
   name: "bento-listbox-multi-select",
   components: {
-    BentoCheckbox: X,
-    BentoListboxOption: W,
-    BentoTypography: $,
-    ListboxMultiSelectOptions: Ze,
-    ListboxMultiSelectChips: it
+    BentoCheckbox: J,
+    BentoListboxOption: q,
+    BentoTypography: w,
+    ListboxMultiSelectOptions: st,
+    ListboxMultiSelectChips: rt
   },
-  directives: { BentoKeyboardNavigationDirective: H },
+  directives: { BentoKeyboardNavigationDirective: X },
   props: {
+    /**
+     * Indicates whether there are more items to load
+     */
+    hasMoreItems: { type: Boolean, default: !1 },
     /**
      * Function that allows the options to be disabled
      *
@@ -785,6 +793,16 @@ const it = ot.exports, at = {
       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: M.NONE,
+      validator: (t) => Object.values(M).includes(t)
+    },
     /**
      * Flag that indicates that an external search it's being made
      * to filter out the items inside the the multi-select listbox
@@ -798,154 +816,152 @@ const it = ot.exports, at = {
      */
     selectedValues: {
       type: Array,
-      default: () => []
+      required: !0
     },
     /**
      * If enabled, dropdown will display non-selectable, static categories
      */
     staticCategories: { type: Boolean, default: !1 }
   },
-  emits: [i.SELECT],
+  emits: [a.SELECT],
   setup(t, { emit: e, slots: s }) {
-    const { t: l } = z(), n = L(null), o = L(null), m = L(null), a = L();
-    ee(
-      () => t.selectedValues,
-      () => {
-        a.value = [...t.selectedValues ?? []];
-      },
-      {
-        immediate: !0
-      }
-    );
-    const { isMultiLevelSelect: b, flattenedItemsList: u } = ct(V(t, "items")), S = (r) => {
-      var p;
-      const _ = t.isOptionDisabled(r), f = ((p = a.value) == null ? void 0 : p.includes(r.value)) || !1;
-      return { isDisabled: _, isPreSelected: f };
-    }, A = c(
-      () => t.searching && b ? t.items : u.value.filter((r) => {
-        const { isDisabled: _, isPreSelected: f } = S(r);
-        return _ && f || !_;
-      })
-    ), I = c(
+    const { t: l } = Y(), n = A(null), o = A(null), _ = A(null), d = i(
+      () => t.selectedValues.map(({ value: c }) => c)
+    ), { isMultiLevelSelect: r, flattenedItemsList: u } = dt(V(t, "items")), p = (c) => {
+      var C;
+      const b = t.isOptionDisabled(c), f = ((C = d.value) == null ? void 0 : C.includes(c.value)) || !1;
+      return { isDisabled: b, isPreSelected: f };
+    }, h = i(() => {
+      if (t.searching && r)
+        return t.items;
+      const c = u.value.filter((b) => {
+        const { isDisabled: f, isPreSelected: C } = p(b);
+        return f && C || !f;
+      });
+      return t.selectedValues.forEach((b) => {
+        c.find((f) => f.value === b.value) || c.push(b);
+      }), c;
+    }), E = i(
       () => {
-        var r;
-        return (r = A.value) == null ? void 0 : r.filter((_) => {
+        var c;
+        return (c = h.value) == null ? void 0 : c.filter((b) => {
           var f;
-          return _.items && b.value && t.searching ? _.items.filter(
-            (C) => (t.selectedValues ?? []).includes(
-              C.value
-            )
-          ).length === _.items.length : (f = a.value) == null ? void 0 : f.includes(_.value);
+          return b.items && r.value && t.searching ? b.items.filter(
+            (g) => (t.selectedValues ?? []).includes(g.value)
+          ).length === b.items.length : (f = d.value) == null ? void 0 : f.includes(b.value);
         });
       }
-    ), d = () => b.value && !t.searching ? u.value.length : t.items.length, x = c(() => {
-      var p;
-      const r = A.value.length, _ = d(), f = ((p = I.value) == null ? void 0 : p.length) || 0;
-      return f === 0 ? l("selectAll", { total: r }) : f === _ ? l("allSelected", { total: _ }) : l("numberOfTotalSelected", { number: f, total: _ });
-    }), E = (r) => {
-      const _ = (p) => {
-        const { isDisabled: C, isPreSelected: U } = S(p);
-        return C && U || !C;
-      }, f = r.filter(_).filter((p) => !a.value.includes(p.value)).map(({ value: p }) => p);
-      a.value = [...a.value, ...f], e(i.SELECT, a.value);
-    }, B = (r) => {
-      const _ = (p) => {
-        const { isDisabled: C, isPreSelected: U } = S(p);
-        return !(C && U);
-      }, f = r.filter(_).map(({ value: p }) => p);
-      a.value = a.value.filter((p) => !(f != null && f.includes(p))), e(i.SELECT, a.value);
-    }, g = () => {
-      E(u.value);
+    ), v = () => r.value && !t.searching ? u.value.length : t.items.length, y = i(() => {
+      var C;
+      const c = h.value.length, b = v(), f = ((C = E.value) == null ? void 0 : C.length) || 0;
+      return f === 0 ? l("selectAll", { total: c }) : f === b ? l("allSelected", { total: b }) : f <= b ? l("numberOfTotalSelected", { number: f, total: b }) : l("numbersSelected", { number: f });
+    }), T = (c) => {
+      const b = (C) => {
+        const { isDisabled: g, isPreSelected: P } = p(C);
+        return g && P || !g;
+      }, f = c.filter(b).filter((C) => !d.value.includes(C.value));
+      e(a.SELECT, [...t.selectedValues, ...f]);
+    }, B = (c) => {
+      const b = (g) => {
+        const { isDisabled: P, isPreSelected: me } = p(g);
+        return !(P && me);
+      }, f = c.filter(b).map(({ value: g }) => g), C = t.selectedValues.filter((g) => !(f != null && f.includes(g.value)));
+      e(a.SELECT, C);
+    }, S = () => {
+      T(u.value);
     }, O = () => {
       B(u.value);
-    }, { isAllSelected: h, isIndeterminate: v, toggleSelectAll: y } = te(
-      I,
-      A,
-      g,
+    }, { isAllSelected: L, isIndeterminate: m, toggleSelectAll: x } = se(
+      E,
+      h,
+      S,
       O
-    ), R = (r) => {
-      E(r.items);
-    }, M = (r) => {
-      B(r.items);
-    }, q = (r, _) => {
+    ), R = (c) => {
+      T(c.items);
+    }, F = (c) => {
+      B(c.items);
+    }, W = (c, b) => {
       let f = !1;
-      a.value = a.value.filter((p) => _ === p ? (f = !0, !1) : !0), f || a.value.push(_), e(r, a.value);
-    }, F = c(() => {
-      const r = (C) => a.value.includes(C.value), _ = (C) => !t.staticCategories && C.every((U) => r(U));
+      const C = t.selectedValues.filter(({ value: g }) => b.value === g ? (f = !0, !1) : !0);
+      f || C.push(b), e(c, C);
+    }, z = i(() => {
+      if (!r.value)
+        return t.selectedValues;
+      const c = (g) => d.value.includes(g.value), b = (g) => !t.staticCategories && g.every((P) => c(P));
       return t.items.flatMap(
-        (C) => C.items && !_(C.items) ? C.items : C
-      ).filter((C) => C.items ? !0 : r(C));
-    }), K = c(
-      () => {
-        var r, _, f;
-        return ((r = F.value) == null ? void 0 : r.length) > 0 && ((_ = I.value) == null ? void 0 : _.length) !== ((f = u.value) == null ? void 0 : f.length);
-      }
-    ), T = c(
+        (g) => g.items && !b(g.items) ? g.items : g
+      ).filter((g) => g.items ? !0 : c(g));
+    }), K = i(() => {
+      var f, C, g, P;
+      const c = ["automatic", "button"].includes(t.lazyLoadType), b = ((f = t.selectedValues) == null ? void 0 : f.length) > 0 && ((C = E.value) == null ? void 0 : C.length) !== ((g = u.value) == null ? void 0 : g.length);
+      return c && t.hasMoreItems ? !!((P = t.selectedValues) != null && P.length) : b;
+    }), I = i(() => ["automatic", "button"].includes(t.lazyLoadType) ? !t.hasMoreItems : !0), G = i(
       () => n.value ? [n.value] : []
-    ), G = c(
+    ), ne = i(
       () => {
-        var r, _;
-        return (_ = (r = o.value) == null ? void 0 : r.$children) != null && _.length ? o.value.$children : [];
+        var c, b;
+        return (b = (c = o.value) == null ? void 0 : c.$children) != null && b.length ? o.value.$children : [];
       }
-    ), le = c(
+    ), oe = i(
       () => {
-        var r, _;
-        return (_ = (r = m.value) == null ? void 0 : r.$children) != null && _.length ? m.value.$children : [];
+        var c, b;
+        return (b = (c = _.value) == null ? void 0 : c.$children) != null && b.length ? _.value.$children : [];
       }
-    ), ne = c(() => ({ label: x, value: h })), oe = c(() => [
-      ne,
-      ...F.value,
+    ), ae = i(() => ({ label: y, value: L })), ie = i(() => [
+      ae,
+      ...z.value,
       ...u.value
-    ]), ie = (r) => {
+    ]), ce = (c) => {
       [
-        ...T.value,
         ...G.value,
-        ...le.value
-      ][r].$el.focus();
-    }, { moveToNextElement: ae, moveToPreviousElement: ce, moveToFirstElement: re, moveToLastElement: ue } = se(
+        ...ne.value,
+        ...oe.value
+      ][c].$el.focus();
+    }, { moveToNextElement: re, moveToPreviousElement: ue, moveToFirstElement: de, moveToLastElement: _e } = le(
       {
-        items: L(oe),
+        items: A(ie),
         isOptionDisabled: t.isOptionDisabled
       },
-      ie
-    ), de = {
-      [k.ARROW_UP]: (r) => ce(r),
-      [k.ARROW_DOWN]: (r) => ae(r),
-      [k.HOME]: re,
-      [k.END]: ue
+      ce
+    ), be = {
+      [k.ARROW_UP]: (c) => ue(c),
+      [k.ARROW_DOWN]: (c) => re(c),
+      [k.HOME]: de,
+      [k.END]: _e
     };
     return {
       // Refs
       selectAllListboxItemsRef: n,
       selectedListboxItemsRef: o,
-      listboxItemsRef: m,
+      listboxItemsRef: _,
       // Values
-      isAllSelected: h,
+      isAllSelected: L,
       showSelectedItems: K,
-      isIndeterminate: v,
-      isMultiLevelSelect: b,
+      isIndeterminate: m,
+      isMultiLevelSelect: r,
       flattenedItemsList: u,
-      selectedItemsList: a,
-      selectAllCheckboxText: x,
-      selectedOptions: F,
+      selectedItemsList: d,
+      selectAllCheckboxText: y,
+      selectedOptions: z,
+      showSelectAllCheckbox: I,
       slots: s,
       // Enums
-      BentoListboxEvent: i,
+      BentoListboxEvent: a,
       // Methods
       selectAllCategory: R,
-      toggleCheckboxSelection: q,
-      toggleSelectAll: y,
-      unselectAllCategory: M,
+      toggleCheckboxSelection: W,
+      toggleSelectAll: x,
+      unselectAllCategory: F,
       // Events
-      listboxListeners: de
+      listboxListeners: be
     };
   }
 });
-var ut = function() {
+var bt = function() {
   var e = this, s = e._self._c;
-  return e._self._setupProxy, s("div", e._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], staticClass: "b-listbox-multi-select" }, e.listboxListeners), [s("bento-listbox-option", { ref: "selectAllListboxItemsRef", staticClass: "b-listbox-multi-select__option" }, [s("bento-checkbox", { attrs: { "aria-label": e.selectAllCheckboxText, "model-value": e.isAllSelected, indeterminate: e.isIndeterminate }, on: { "update:model-value": e.toggleSelectAll } }), s("bento-typography", { attrs: { el: "span" } }, [e._v(" " + e._s(e.selectAllCheckboxText) + " ")])], 1), e.showSelectedItems ? s("div", [s("hr", { staticClass: "b-listbox-multi-select__divider" }), s("listbox-multi-select-chips", { ref: "selectedListboxItemsRef", attrs: { items: e.selectedOptions, "is-option-disabled": e.isOptionDisabled }, on: { "unselect-category": e.unselectAllCategory, "unselect-item": function(l) {
+  return e._self._setupProxy, s("div", e._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], staticClass: "b-listbox-multi-select" }, e.listboxListeners), [e.showSelectAllCheckbox ? s("bento-listbox-option", { ref: "selectAllListboxItemsRef", staticClass: "b-listbox-multi-select__option" }, [s("bento-checkbox", { attrs: { "aria-label": e.selectAllCheckboxText, "model-value": e.isAllSelected, indeterminate: e.isIndeterminate }, on: { "update:model-value": e.toggleSelectAll } }), s("bento-typography", { attrs: { el: "span", "aria-hidden": "true" } }, [e._v(" " + e._s(e.selectAllCheckboxText) + " ")])], 1) : e._e(), e.showSelectAllCheckbox ? s("hr", { staticClass: "b-listbox-multi-select__divider" }) : e._e(), e.showSelectedItems ? s("div", [s("listbox-multi-select-chips", { ref: "selectedListboxItemsRef", attrs: { items: e.selectedOptions, "is-option-disabled": e.isOptionDisabled }, on: { "unselect-category": e.unselectAllCategory, "unselect-item": function(l) {
     return e.toggleCheckboxSelection(e.BentoListboxEvent.SELECT, l);
-  } } })], 1) : e._e(), s("hr", { staticClass: "b-listbox-multi-select__divider" }), s("listbox-multi-select-options", { ref: "listboxItemsRef", attrs: { 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 }, on: e._d({ "toggle-checkbox-selection": function(l) {
+  } } }), s("hr", { staticClass: "b-listbox-multi-select__divider" })], 1) : e._e(), s("listbox-multi-select-options", { ref: "listboxItemsRef", attrs: { 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 }, on: e._d({ "toggle-checkbox-selection": function(l) {
     return e.toggleCheckboxSelection(e.BentoListboxEvent.SELECT, l);
   }, "select-category": e.selectAllCategory, "unselect-category": e.unselectAllCategory }, [e.BentoListboxEvent.SPACE, function(l) {
     return e.toggleCheckboxSelection(e.BentoListboxEvent.SPACE, l);
@@ -958,33 +974,33 @@ var ut = function() {
       return [e._t(n, null, null, o)];
     } };
   })], null, !0) })], 1);
-}, dt = [], _t = /* @__PURE__ */ N(
-  rt,
-  ut,
-  dt,
+}, mt = [], vt = /* @__PURE__ */ N(
+  _t,
+  bt,
+  mt,
   !1,
   null,
-  "a2c4d112",
+  "8e21add2",
   null,
   null
 );
-const Q = _t.exports, bt = {
+const Z = vt.exports, ft = {
   "en-US": {
     showMore: "Show more",
     loading: "Loading"
   }
-}, vt = 36, mt = D({
+}, gt = 36, yt = D({
   name: "bento-listbox",
   components: {
-    BentoEmptyState: ve,
-    BentoListboxSingleSelect: Ye,
-    BentoListboxMultiSelect: Q,
-    BentoTypography: $,
-    BentoLoadingIndicator: be,
-    BentoLoadingButton: Se
+    BentoEmptyState: ge,
+    BentoListboxSingleSelect: qe,
+    BentoListboxMultiSelect: Z,
+    BentoTypography: w,
+    BentoLoadingIndicator: fe,
+    BentoLoadingButton: Ee
   },
-  directives: { BentoKeyboardNavigationDirective: H },
-  i18n: { messages: bt },
+  directives: { BentoKeyboardNavigationDirective: X },
+  i18n: { messages: ft },
   props: {
     /**
      * Defines a string value that labels an interactive element.
@@ -1040,8 +1056,8 @@ const Q = _t.exports, bt = {
      */
     lazyLoadType: {
       type: String,
-      default: w.NONE,
-      validator: (t) => Object.values(w).includes(t)
+      default: M.NONE,
+      validator: (t) => Object.values(M).includes(t)
     },
     /**
      * If enabled, the user will be able to select multiple items.
@@ -1061,15 +1077,15 @@ const Q = _t.exports, bt = {
      *
      * If enabled, hides the "Select all" checkbox in "multiple" mode.
      */
-    searching: Q.props.searching,
+    searching: Z.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
+      type: Array,
+      default: () => []
     },
     /**
      * Enables virtual scrolling if set to true or by providing an object with itemHeight function.
@@ -1081,93 +1097,93 @@ const Q = _t.exports, bt = {
     }
   },
   emits: [
-    i.SELECT,
-    i.SPACE,
-    i.SHOW_MORE,
-    i.ENTER,
-    i.ESCAPE,
-    i.TAB
+    a.SELECT,
+    a.SPACE,
+    a.SHOW_MORE,
+    a.ENTER,
+    a.ESCAPE,
+    a.TAB
   ],
   setup(t, { emit: e, slots: s }) {
-    const l = L([]), n = V(t, "items"), { t: o } = z(), m = c(() => t.lazyLoadType !== w.AUTOMATIC), a = c(() => t.lazyLoadType === w.AUTOMATIC), b = () => {
-      var T;
-      return typeof (t == null ? void 0 : t.virtualScroll) == "object" && ((T = t == null ? void 0 : t.virtualScroll) != null && T.itemHeight) ? t.virtualScroll.itemHeight : vt;
+    const l = A([]), n = V(t, "items"), { t: o } = Y(), _ = i(() => t.lazyLoadType !== M.AUTOMATIC), d = i(() => t.lazyLoadType === M.AUTOMATIC), r = () => {
+      var I;
+      return typeof (t == null ? void 0 : t.virtualScroll) == "object" && ((I = t == null ? void 0 : t.virtualScroll) != null && I.itemHeight) ? t.virtualScroll.itemHeight : gt;
     }, {
       containerRef: u,
-      containerProps: S,
-      onScroll: A,
-      list: I,
-      wrapperProps: d
-    } = Ee(n, {
-      itemHeight: b(),
+      containerProps: p,
+      onScroll: h,
+      list: E,
+      wrapperProps: v
+    } = Le(n, {
+      itemHeight: r(),
       // Disable virtual scrolling if not enabled or if lazy loading is enabled or if multi-select
       disabled: (t == null ? void 0 : t.multiple) || (t == null ? void 0 : t.virtualScroll) === !1 || (t == null ? void 0 : t.lazyLoadType) !== "none"
-    }), x = c(
-      () => m.value ? "true" : void 0
-    ), E = c(
-      () => m.value && t.loading ? "true" : "false"
-    ), B = c(
-      () => m.value ? "polite" : void 0
-    ), g = (T) => (G) => {
-      e(T, G);
+    }), y = i(
+      () => _.value ? "true" : void 0
+    ), T = i(
+      () => _.value && t.loading ? "true" : "false"
+    ), B = i(
+      () => _.value ? "polite" : void 0
+    ), S = (I) => (G) => {
+      e(I, G);
     }, O = () => {
-      e(i.SHOW_MORE);
-    }, h = me(() => {
-      const T = u.value;
-      if (!T)
+      e(a.SHOW_MORE);
+    }, L = ye(() => {
+      const I = u.value;
+      if (!I)
         return;
-      const G = Math.round(T.scrollTop) + T.clientHeight >= T.scrollHeight;
+      const G = Math.round(I.scrollTop) + I.clientHeight >= I.scrollHeight;
       t.hasMoreItems && G && !t.loading && O();
-    }), v = () => {
-      a.value ? h() : A();
-    }, y = c(() => {
-      var T;
-      return t.searching && ((T = t.items) == null ? void 0 : T.length) === 0;
-    }), R = c(
-      () => t.lazyLoadType === w.BUTTON && t.hasMoreItems
-    ), M = c(
-      () => t.loading ? J.LOADING : J.START
-    ), q = c(() => t.loading ? o("loading") : o("showMore")), F = c(() => ({
+    }), m = () => {
+      d.value ? L() : h();
+    }, x = i(() => {
+      var I;
+      return t.searching && ((I = t.items) == null ? void 0 : I.length) === 0;
+    }), R = i(
+      () => t.lazyLoadType === M.BUTTON && t.hasMoreItems
+    ), F = i(
+      () => t.loading ? Q.LOADING : Q.START
+    ), W = i(() => t.loading ? o("loading") : o("showMore")), z = i(() => ({
       ...t.emptyState,
       variant: "condensed"
     })), K = {
-      [i.SELECT]: g(i.SELECT),
-      [i.SPACE]: g(i.SPACE),
-      [i.TAB]: g(i.TAB),
-      [i.ENTER]: g(i.ENTER)
+      [a.SELECT]: S(a.SELECT),
+      [a.SPACE]: S(a.SPACE),
+      [a.TAB]: S(a.TAB),
+      [a.ENTER]: S(a.ENTER)
     };
     return {
       // Refs
       listboxRef: u,
       listboxItemRef: l,
       // a11y
-      ariaAtomic: x,
-      ariaBusy: E,
+      ariaAtomic: y,
+      ariaBusy: T,
       ariaLive: B,
       // Values
-      containerProps: S,
-      isSearchResultEmpty: y,
-      limitedEmptyStateProps: F,
-      loadingButtonState: M,
+      containerProps: p,
+      isSearchResultEmpty: x,
+      limitedEmptyStateProps: z,
+      loadingButtonState: F,
       slots: s,
       shouldDisplayShowMoreButton: R,
-      showMoreButtonText: q,
-      virtualisedItems: I,
-      wrapperProps: d,
+      showMoreButtonText: W,
+      virtualisedItems: E,
+      wrapperProps: v,
       // Enums
       BentoKeyboardNavigationKeyDownEvent: k,
-      BentoListboxEvent: i,
+      BentoListboxEvent: a,
       // Methods
-      onListboxContainerScroll: v,
-      onOptionSelected: g,
+      onListboxContainerScroll: m,
+      onOptionSelected: S,
       emitShowMore: O,
       listboxListeners: K
     };
   }
 });
-var ft = function() {
+var pt = function() {
   var e = this, s = e._self._c;
-  return e._self._setupProxy, s("div", e._b({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], staticClass: "b-listbox", attrs: { id: e.id, role: "listbox", tabindex: "-1", "aria-busy": e.ariaBusy, "aria-atomic": e.ariaAtomic, "aria-label": e.ariaLabel, "aria-live": e.ariaLive }, on: { scroll: e.onListboxContainerScroll } }, "div", e.containerProps, !1), [s("div", e._b({}, "div", e.wrapperProps, !1), [e.isSearchResultEmpty ? s("div", { staticClass: "b-listbox__empty-search-message" }, [e.emptyState ? s("bento-empty-state", e._b({}, "bento-empty-state", e.limitedEmptyStateProps, !1)) : s("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(e.noResultsMessage))])], 1) : [e.multiple ? [s("bento-listbox-multi-select", e._g({ ref: "listboxItemRef", attrs: { items: e.items, "static-categories": e.staticCategories, "selected-values": e.selectedValue, searching: e.searching, "is-option-disabled": e.isOptionDisabled }, scopedSlots: e._u([e._l(e.slots, function(l, n) {
+  return e._self._setupProxy, s("div", e._b({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], staticClass: "b-listbox", attrs: { id: e.id, role: "listbox", tabindex: "-1", "aria-busy": e.ariaBusy, "aria-atomic": e.ariaAtomic, "aria-label": e.ariaLabel, "aria-live": e.ariaLive }, on: { scroll: e.onListboxContainerScroll } }, "div", e.containerProps, !1), [s("div", e._b({}, "div", e.wrapperProps, !1), [e.isSearchResultEmpty ? s("div", { staticClass: "b-listbox__empty-search-message" }, [e.emptyState ? s("bento-empty-state", e._b({}, "bento-empty-state", e.limitedEmptyStateProps, !1)) : s("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(e.noResultsMessage))])], 1) : [e.multiple ? [s("bento-listbox-multi-select", e._g({ ref: "listboxItemRef", attrs: { "has-more-items": e.hasMoreItems, items: e.items, "lazy-load-type": e.lazyLoadType, "static-categories": e.staticCategories, "selected-values": e.selectedValue, searching: e.searching, "is-option-disabled": e.isOptionDisabled }, scopedSlots: e._u([e._l(e.slots, function(l, n) {
     return { key: n, fn: function(o) {
       return [e._t(n, null, null, o)];
     } };
@@ -1178,21 +1194,67 @@ var ft = function() {
   })], null, !0) }, e.listboxListeners))], e.shouldDisplayShowMoreButton ? s("div", { staticClass: "b-listbox__lazy-load" }, [s("bento-loading-button", { attrs: { state: e.loadingButtonState, variant: "secondary" }, on: { "!click": function(l) {
     return e.emitShowMore.apply(null, arguments);
   } } }, [e._v(" " + e._s(e.showMoreButtonText) + " ")])], 1) : e.loading ? s("div", { staticClass: "b-listbox__lazy-load" }, [s("bento-loading-indicator")], 1) : e._e()]], 2)]);
-}, gt = [], yt = /* @__PURE__ */ N(
-  mt,
-  ft,
-  gt,
+}, St = [], xt = /* @__PURE__ */ N(
+  yt,
+  pt,
+  St,
   !1,
   null,
-  "17128845",
+  "28929030",
   null,
   null
 );
-const Pt = yt.exports;
+const wt = xt.exports, H = (t, e) => {
+  for (const s of t) {
+    if (s.value === e)
+      return s.label;
+    if (s.items)
+      return H(s.items, e);
+  }
+  return null;
+}, Ft = (t, e, s) => {
+  const l = A([]), n = A(), o = (r) => {
+    n.value = s.value ? r.map(({ value: u }) => u) : r[0].value;
+  }, _ = (r) => {
+    l.value = r, o(r);
+  }, d = () => {
+    l.value = [], n.value = null;
+  };
+  return te(
+    () => e.value,
+    () => {
+      if (!e.value) {
+        d();
+        return;
+      }
+      const r = !Array.isArray(e.value), u = [...l.value];
+      d();
+      const p = (h) => {
+        let E = H(t.value, h);
+        E || (E = H(u, h)), E || (E = h.toString()), l.value.push({ value: h, label: E });
+      };
+      if (r) {
+        const h = e.value;
+        p(h), o(l.value);
+        return;
+      }
+      e.value.forEach(p), o(l.value);
+    },
+    { immediate: !0 }
+  ), {
+    // Values
+    cachedSelectedListboxOptions: l,
+    cachedListboxSelectedValues: n,
+    // Methods
+    resetCache: d,
+    setCachedValues: _
+  };
+};
 export {
-  Pt as B,
-  w as a,
-  i as b,
-  ct as u
+  wt as B,
+  Ft as a,
+  M as b,
+  a as c,
+  dt as u
 };
-//# sourceMappingURL=listbox.e6e1bc90.js.map
+//# sourceMappingURL=use-cached-selected-values.69297473.js.map