@adyen/bento-vue2 1.31.1 → 1.32.0

package/dist/chunks/{use-cached-selected-values.DgARPcHp.js → use-cached-selected-values.DWQ8SMSi.js}

@@ -1,26 +1,26 @@
-import { computed as i, ref as I, onMounted as te, onUnmounted as _e, watch as se, defineComponent as $, toRef as V } from "vue";
-import { B as M } from "./typography.Bjtu3Gca.js";
+import { computed as c, ref as O, onMounted as te, onUnmounted as _e, watch as se, defineComponent as $, toRef as G } from "vue";
+import { B as w } from "./typography.CdCYtxYj.js";
 import { B as ge } from "./loading-indicator.DXc7I1Lm.js";
-import { B as ye } from "./empty-state.BqVOj4v1.js";
+import { B as ye } from "./empty-state.CWy3y5Ly.js";
 import { u as Y } from "./i18n.BQkEbtPM.js";
 import { d as pe } from "./debounce.DUTu11PS.js";
 import { n as D } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import { B as k, a as X } from "./keyboard-navigation.Clz1jOaA.js";
-import { B as Z } from "./checkbox.BP2_1_qF.js";
+import { B as Z } from "./checkbox.CKQZXIR3.js";
 import "./index.Cl4_42j5.js";
-import { C as Se, a as Ce } from "./chevron-up.B2uWhZf7.js";
-import { B as he } from "./base-button.DER7_IsF.js";
+import { C as Ce, a as Se } from "./chevron-up.B2uWhZf7.js";
+import { B as he } from "./base-button.-qw8sZSY.js";
 import { C as xe } from "./cross-small.BLUwtRB-.js";
-import { B as Ee, a as J } from "./loading-button.CcYmeIl8.js";
+import { B as Ee, a as J } from "./loading-button.Ba8So0d6.js";
 import { o as Le } from "./resize.Bqks3WUm.js";
 import "../assets/use-cached-selected-values.css";
 const le = (t, e, s, l) => {
-  const n = i(
+  const n = c(
     () => {
-      var r, u;
-      return !!((r = t.value) != null && r.length) && ((u = t.value) == null ? void 0 : u.length) === e.value.length;
+      var r, b;
+      return !!((r = t.value) != null && r.length) && ((b = t.value) == null ? void 0 : b.length) === e.value.length;
     }
-  ), a = i(() => {
+  ), a = c(() => {
     var r;
     return t.value == null || t.value.length === 0 ? !1 : ((r = t.value) == null ? void 0 : r.length) !== e.value.length;
   });
@@ -33,84 +33,84 @@ const le = (t, e, s, l) => {
   };
 };
 function Oe(t, { disabled: e, itemHeight: s, overscan: l = 5, prefixHeight: n }) {
-  const a = I(null), v = I([]), r = I(0), u = I(0), d = I(0);
-  let S;
-  const x = i(() => {
-    const p = typeof s == "number" ? t.value.length * s : t.value.reduce((T, f, C) => T + s(C), 0), O = typeof s == "number" ? r.value * s : t.value.slice(0, r.value).reduce((T, f, C) => T + s(C), 0);
+  const a = O(null), i = O([]), r = O(0), b = O(0), m = O(0);
+  let E;
+  const p = c(() => {
+    const _ = typeof s == "number" ? t.value.length * s : t.value.reduce((L, f, h) => L + s(h), 0), C = typeof s == "number" ? r.value * s : t.value.slice(0, r.value).reduce((L, f, h) => L + s(h), 0);
     return {
       style: {
-        marginTop: `${O}px`,
-        height: `${p - O}px`
+        marginTop: `${C}px`,
+        height: `${_ - C}px`
       }
     };
-  }), E = () => {
-    const p = (n == null ? void 0 : n.value) ?? 0, O = Math.max(a.value.scrollTop - p, 0);
+  }), S = () => {
+    const _ = (n == null ? void 0 : n.value) ?? 0, C = Math.max(a.value.scrollTop - _, 0);
     if (typeof s == "number")
-      return Math.floor(O / s);
-    let T = 0, f = 0;
-    for (let C = 0; C < t.value.length; C += 1) {
-      const B = s(C);
-      if (T += B, T >= O) {
-        f = C;
+      return Math.floor(C / s);
+    let L = 0, f = 0;
+    for (let h = 0; h < t.value.length; h += 1) {
+      const A = s(h);
+      if (L += A, L >= C) {
+        f = h;
         break;
       }
     }
     return f;
   }, R = () => {
-    if (d.value = a.value.clientHeight, typeof s == "number")
-      return Math.ceil(d.value / s);
-    const p = r.value ?? 0;
-    let O = 0, T = 0;
-    for (let f = p; f < t.value.length; f += 1) {
-      const C = s(f);
-      if (O += C, T = f, O > d.value)
+    if (m.value = a.value.clientHeight, typeof s == "number")
+      return Math.ceil(m.value / s);
+    const _ = r.value ?? 0;
+    let C = 0, L = 0;
+    for (let f = _; f < t.value.length; f += 1) {
+      const h = s(f);
+      if (C += h, L = f, C > m.value)
         break;
     }
-    return T - p;
-  }, b = () => {
+    return L - _;
+  }, T = () => {
     if (a.value) {
-      const p = R();
-      r.value = E(), u.value = Math.min(r.value + p + l, t.value.length), v.value = t.value.slice(r.value, u.value);
+      const _ = R();
+      r.value = S(), b.value = Math.min(r.value + _ + l, t.value.length), i.value = t.value.slice(r.value, b.value);
     }
-  }, L = () => {
-    b();
+  }, B = () => {
+    T();
   };
   e || (te(() => {
-    a.value && (d.value = a.value.clientHeight, S = Le(a.value, ({ clientHeight: p }) => {
-      d.value = p, b();
-    }), b());
+    a.value && (m.value = a.value.clientHeight, E = Le(a.value, ({ clientHeight: _ }) => {
+      m.value = _, T();
+    }), T());
   }), _e(() => {
-    S == null || S.disconnect();
+    E == null || E.disconnect();
   }), se(
     () => t.value,
     () => {
-      b();
+      T();
     }
   ));
-  const y = {
+  const u = {
     ref: a,
     style: { overflowY: "auto" }
   };
   return e ? {
     containerRef: a,
-    containerProps: y,
+    containerProps: u,
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     onScroll: () => {
     },
     list: t
   } : {
     containerRef: a,
-    containerProps: y,
-    onScroll: L,
-    list: v,
-    wrapperProps: x
+    containerProps: u,
+    onScroll: B,
+    list: i,
+    wrapperProps: p
   };
 }
-var o = /* @__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))(o || {}), w = /* @__PURE__ */ ((t) => (t.AUTOMATIC = "automatic", t.BUTTON = "button", t.NONE = "none", t))(w || {});
+var o = /* @__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))(o || {}), M = /* @__PURE__ */ ((t) => (t.AUTOMATIC = "automatic", t.BUTTON = "button", t.NONE = "none", t))(M || {});
 const Te = $({
   name: "bento-listbox-static-category",
   components: {
-    BentoTypography: M
+    BentoTypography: w
   },
   props: {
     /**
@@ -147,7 +147,7 @@ const Re = Be.exports, ke = $({
   },
   emits: [o.CLICK, o.ENTER, o.SPACE, o.TAB],
   setup(t, { emit: e }) {
-    const s = i(() => ({
+    const s = c(() => ({
       "b-listbox-option--disabled": t.disabled,
       "b-listbox-option--selected": t.selected
     }));
@@ -161,8 +161,8 @@ const Re = Be.exports, ke = $({
       onClick: (a) => {
         e(o.CLICK, a);
       },
-      onOptionSelected: (a, v) => {
-        e(a, v);
+      onOptionSelected: (a, i) => {
+        e(a, i);
       }
     };
   }
@@ -191,13 +191,13 @@ const Pe = {
     this.uuid = Q.toString(), Q += 1;
   }
 };
-var we = function() {
+var Me = function() {
   var e = this, s = e._self._c;
   return s("svg", e._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", e.$attrs, !1), [e.$attrs["svg-title"] ? s("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), s("path", { attrs: { 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" } })]);
-}, Me = [], Fe = /* @__PURE__ */ D(
+}, we = [], Fe = /* @__PURE__ */ D(
   Pe,
-  we,
   Me,
+  we,
   !1,
   null,
   null
@@ -206,7 +206,7 @@ const Ge = Fe.exports, Ue = $({
   name: "bento-listbox-single-select-option",
   components: {
     BentoListboxOption: q,
-    BentoTypography: M,
+    BentoTypography: w,
     CheckmarkIcon: Ge
   },
   props: {
@@ -229,9 +229,9 @@ const Ge = Fe.exports, Ue = $({
   },
   emits: [o.ENTER, o.SELECT, o.SPACE, o.TAB],
   setup(t, { emit: e }) {
-    const s = (v) => {
-      t.disabled || e(v, t.option);
-    }, l = i(() => t.disabled ? !0 : null), n = i(() => t.selected ? !0 : null), a = i(() => t.disabled ? -1 : 0);
+    const s = (i) => {
+      t.disabled || e(i, t.option);
+    }, l = c(() => t.disabled ? !0 : null), n = c(() => t.selected ? !0 : null), a = c(() => t.disabled ? -1 : 0);
     return {
       // Values
       ariaDisabled: l,
@@ -251,7 +251,7 @@ var ze = function() {
   }, "enter-pressed": function(l) {
     return e.onOptionSelected(e.BentoListboxEvent.ENTER);
   }, "space-pressed": function(l) {
-    return e.onOptionSelected(e.BentoListboxEvent.SPACE);
+    return l.preventDefault(), e.onOptionSelected(e.BentoListboxEvent.SPACE);
   }, "tab-pressed": function(l) {
     return e.onOptionSelected(e.BentoListboxEvent.TAB);
   } } }, [e._t("default", function() {
@@ -263,45 +263,47 @@ var ze = function() {
   Ve,
   !1,
   null,
-  "7b6a8f1e"
+  "5a5ff36a"
 );
-const qe = Ye.exports, ne = ({ items: t, isOptionDisabled: e }, s) => {
-  const l = i(() => t.value.length - 1), n = I(0);
+const qe = Ye.exports, ne = ({ items: t, isOptionDisabled: e, hasStaticCategories: s }, l) => {
+  const n = c(
+    () => s.value ? t.value.flatMap((u) => u.items) : t.value
+  ), a = c(() => n.value.length - 1), i = O(0);
   te(() => {
-    e && (n.value = t.value.findIndex((b) => !e(b)));
+    e && (i.value = t.value.findIndex((u) => !e(u)));
   });
-  const a = (b) => !e || !!e && e(t.value[b]), v = (b) => !e || !!e && !e(t.value[b]), r = (b) => {
-    switch (b) {
+  const r = (u) => !e || !!e && e(t.value[u]), b = (u) => !e || !!e && !e(t.value[u]), m = (u) => {
+    switch (u) {
       case "increase":
-        n.value += 1;
+        i.value += 1;
         break;
       case "decrease":
-        n.value -= 1;
+        i.value -= 1;
         break;
     }
-  }, u = ({ edgeCaseItem: b, isItemBeforeEdgeCaseItem: L }, y, p) => {
-    n.value !== b && (L ? v(b) && r(p) : (r(p), a(n.value) && y()), s(n.value));
-  }, d = (b) => {
-    var y;
-    (y = b == null ? void 0 : b.detail) == null || y.preventDefault();
-    const L = n.value === l.value - 2;
-    u(
+  }, E = ({ edgeCaseItem: u, isItemBeforeEdgeCaseItem: _ }, C, L) => {
+    i.value !== u && (_ ? b(u) && m(L) : (m(L), r(i.value) && C()), l(i.value));
+  }, p = (u) => {
+    var C;
+    (C = u == null ? void 0 : u.detail) == null || C.preventDefault();
+    const _ = i.value === a.value - 2;
+    E(
       {
-        isItemBeforeEdgeCaseItem: L,
-        edgeCaseItem: l.value
+        isItemBeforeEdgeCaseItem: _,
+        edgeCaseItem: a.value
       },
-      d,
+      p,
       "increase"
       /* INCREASE */
     );
-  }, S = (b) => {
-    var y;
-    (y = b == null ? void 0 : b.detail) == null || y.preventDefault();
-    const L = n.value === 1;
-    u(
+  }, S = (u) => {
+    var C;
+    (C = u == null ? void 0 : u.detail) == null || C.preventDefault();
+    const _ = i.value === 1;
+    E(
       {
         edgeCaseItem: 0,
-        isItemBeforeEdgeCaseItem: L
+        isItemBeforeEdgeCaseItem: _
       },
       S,
       "decrease"
@@ -310,15 +312,15 @@ const qe = Ye.exports, ne = ({ items: t, isOptionDisabled: e }, s) => {
   };
   return {
     moveToFirstElement: () => {
-      n.value = 0, a(n.value) ? d() : s(n.value);
+      i.value = 0, r(i.value) ? p() : l(i.value);
     },
     moveToLastElement: () => {
-      n.value = l.value, a(n.value) ? S() : s(n.value);
+      i.value = a.value, r(i.value) ? S() : l(i.value);
     },
-    moveToNextElement: d,
+    moveToNextElement: p,
     moveToPreviousElement: S,
-    setListboxFocusedIndex: (b) => {
-      n.value = b;
+    setListboxFocusedIndex: (u) => {
+      i.value = u;
     }
   };
 }, We = $({
@@ -370,29 +372,30 @@ const qe = Ye.exports, ne = ({ items: t, isOptionDisabled: e }, s) => {
   },
   emits: [o.SELECT, o.ENTER, o.SPACE, o.TAB],
   setup(t, { emit: e, expose: s, slots: l }) {
-    const n = I([]), a = i(() => {
-      var y;
-      return !!((y = t.selectedValue) != null && y.length) && t.selectedValue.at(0);
-    }), v = i(() => !!t.items.some(({ items: y }) => !!y)), r = (y) => (p) => {
-      e(y, [p]);
-    }, u = (y) => n.value[y].$el.focus(), {
-      moveToNextElement: d,
-      moveToPreviousElement: S,
-      moveToFirstElement: x,
-      moveToLastElement: E,
+    const n = O([]), a = c(() => {
+      var u;
+      return !!((u = t.selectedValue) != null && u.length) && t.selectedValue.at(0);
+    }), i = c(() => !!t.items.some(({ items: u }) => !!u)), r = (u) => (_) => {
+      e(u, [_]);
+    }, b = (u) => n.value[u].$el.focus(), {
+      moveToNextElement: m,
+      moveToPreviousElement: E,
+      moveToFirstElement: p,
+      moveToLastElement: S,
       setListboxFocusedIndex: R
     } = ne(
       {
-        items: V(t, "items"),
-        isOptionDisabled: t.isOptionDisabled
+        items: G(t, "items"),
+        isOptionDisabled: t.isOptionDisabled,
+        hasStaticCategories: G(t, "staticCategories")
       },
-      u
-    ), b = {
-      [k.ARROW_UP]: S,
-      [k.ARROW_DOWN]: d,
-      [k.HOME]: x,
-      [k.END]: E
-    }, L = {
+      b
+    ), T = {
+      [k.ARROW_UP]: E,
+      [k.ARROW_DOWN]: m,
+      [k.HOME]: p,
+      [k.END]: S
+    }, B = {
       [o.SELECT]: r(o.SELECT),
       [o.SPACE]: r(o.SPACE),
       [o.TAB]: r(o.TAB),
@@ -417,12 +420,12 @@ const qe = Ye.exports, ne = ({ items: t, isOptionDisabled: e }, s) => {
       selectedItem: a,
       slots: l,
       // Computed
-      hasCategories: v,
+      hasCategories: i,
       // Methods
       onOptionSelected: r,
       // Keyboard navigation
-      listboxListeners: b,
-      listboxOptionListeners: L
+      listboxListeners: T,
+      listboxOptionListeners: B
     };
   }
 });
@@ -430,16 +433,16 @@ var Ke = 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.selectedItem.value }, scopedSlots: e._u([e._l(e.slots, function(a, v) {
-        return { key: v, fn: function(r) {
-          return [e._t(v, null, null, r)];
+      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(a, i) {
+        return { key: i, fn: function(r) {
+          return [e._t(i, null, null, r)];
         } };
       })], 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.selectedItem.value }, scopedSlots: e._u([e._l(e.slots, function(n, a) {
-      return { key: a, fn: function(v) {
-        return [e._t(a, null, null, v)];
+      return { key: a, fn: function(i) {
+        return [e._t(a, null, null, i)];
       } };
     })], null, !0) }, e.listboxOptionListeners));
   })], 2);
@@ -452,7 +455,7 @@ var Ke = function() {
   null
 );
 const Xe = He.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 || {});
+var j = /* @__PURE__ */ ((t) => (t.DISABLED = "disabled", t.STATIC_CATEGORY = "static-category", t))(j || {}), z = /* @__PURE__ */ ((t) => (t.SELECT_CATEGORY = "select-category", t.UNSELECT_CATEGORY = "unselect-category", t))(z || {});
 const Ze = {
   "en-US": {
     categoryClosed: "{category} closed",
@@ -463,10 +466,10 @@ const Ze = {
   name: "bento-listbox-multi-select-category",
   components: {
     BentoCheckbox: Z,
-    BentoTypography: M,
+    BentoTypography: w,
     BentoListboxOption: q,
-    ChevronDownIcon: Se,
-    ChevronUpIcon: Ce
+    ChevronDownIcon: Ce,
+    ChevronUpIcon: Se
   },
   props: {
     /**
@@ -507,67 +510,67 @@ const Ze = {
      */
     staticCategories: { type: Boolean, default: !1 }
   },
-  emits: [U.SELECT_CATEGORY, U.UNSELECT_CATEGORY],
+  emits: [z.SELECT_CATEGORY, z.UNSELECT_CATEGORY],
   setup(t, { emit: e }) {
-    const s = I(!1), { t: l } = Y(), n = (f) => t.isOptionDisabled ? t.isOptionDisabled(f) : !1, a = i(
+    const s = O(!1), { t: l } = Y(), n = (f) => t.isOptionDisabled ? t.isOptionDisabled(f) : !1, a = c(
       () => t.category.items.every((f) => n(f))
-    ), v = V(t, "staticCategories"), r = i(() => s.value || t.staticCategories), u = i(() => ({
+    ), i = G(t, "staticCategories"), r = c(() => s.value || t.staticCategories), b = c(() => ({
       [`b-listbox-multi-select-category--${j.DISABLED}`]: a.value,
       [`b-listbox-multi-select-category--${j.STATIC_CATEGORY}`]: t.staticCategories
-    })), d = (f) => {
+    })), m = (f) => {
       f.preventDefault(), s.value = !s.value;
-    }, S = (f) => {
+    }, E = (f) => {
       var F;
-      const C = n(f), B = ((F = t.selectedItemsList) == null ? void 0 : F.includes(f.value)) || !1;
-      return { isDisabled: C, isPreSelected: B };
-    }, x = i(
+      const h = n(f), A = ((F = t.selectedItemsList) == null ? void 0 : F.includes(f.value)) || !1;
+      return { isDisabled: h, isPreSelected: A };
+    }, p = c(
       () => t.category.items.filter((f) => {
-        const { isDisabled: C, isPreSelected: B } = S(f);
-        return C && B || !C;
+        const { isDisabled: h, isPreSelected: A } = E(f);
+        return h && A || !h;
       })
-    ), E = i(
+    ), S = c(
       () => {
         var f;
-        return (f = x.value) == null ? void 0 : f.filter(
-          ({ value: C }) => {
-            var B;
-            return (B = t.selectedItemsList) == null ? void 0 : B.includes(C);
+        return (f = p.value) == null ? void 0 : f.filter(
+          ({ value: h }) => {
+            var A;
+            return (A = t.selectedItemsList) == null ? void 0 : A.includes(h);
           }
         );
       }
-    ), R = i(() => {
+    ), R = c(() => {
       const f = s.value ? "categoryOpened" : "categoryClosed";
       return l(f, { category: t.category.label });
-    }), b = i(
+    }), T = c(
       () => ({
         el: "span",
         variant: t.staticCategories ? "caption" : "body"
       })
-    ), L = () => {
-      e(U.SELECT_CATEGORY);
-    }, y = () => {
-      e(U.UNSELECT_CATEGORY);
-    }, { isAllSelected: p, isIndeterminate: O, toggleSelectAll: T } = le(
-      E,
-      x,
-      L,
-      y
+    ), B = () => {
+      e(z.SELECT_CATEGORY);
+    }, u = () => {
+      e(z.UNSELECT_CATEGORY);
+    }, { isAllSelected: _, isIndeterminate: C, toggleSelectAll: L } = le(
+      S,
+      p,
+      B,
+      u
     );
     return {
       // Values
       chevronTitle: R,
-      conditionalClass: u,
+      conditionalClass: b,
       hasAllPropsDisabled: a,
       isOpen: s,
-      isAllSelected: p,
-      isIndeterminate: O,
-      isStaticCategory: v,
+      isAllSelected: _,
+      isIndeterminate: C,
+      isStaticCategory: i,
       // Computed
       showItemChildren: r,
-      categoryLabelProps: b,
+      categoryLabelProps: T,
       // Methods
-      toggleOpen: d,
-      toggleSelectAll: T
+      toggleOpen: m,
+      toggleSelectAll: L
     };
   }
 });
@@ -591,7 +594,7 @@ const lt = $({
   components: {
     BentoCheckbox: Z,
     BentoListboxOption: q,
-    BentoTypography: M,
+    BentoTypography: w,
     ListboxMultiSelectCategory: st
   },
   props: {
@@ -655,19 +658,19 @@ const lt = $({
     P.UNSELECT_CATEGORY
   ],
   setup(t, { emit: e }) {
-    const s = (u) => {
-      e(P.TOGGLE_CHECKBOX_SELECTION, u);
-    }, l = (u) => !!u.items, n = (u) => {
-      const d = t.isMultiLevel && t.searching;
-      return u.description && (!t.isMultiLevel || d);
-    }, a = (u) => u.items ? !!u.items.find((d) => t.selectedItemsList.includes(d.value)) : t.selectedItemsList.includes(u.value), v = (u, d) => {
-      if (l(d))
-        return e(u ? P.SELECT_CATEGORY : P.UNSELECT_CATEGORY, d);
-      s(d.value);
+    const s = (b) => {
+      e(P.TOGGLE_CHECKBOX_SELECTION, b);
+    }, l = (b) => !!b.items, n = (b) => {
+      const m = t.isMultiLevel && t.searching;
+      return b.description && (!t.isMultiLevel || m);
+    }, a = (b) => b.items ? !!b.items.find((m) => t.selectedItemsList.includes(m.value)) : t.selectedItemsList.includes(b.value), i = (b, m) => {
+      if (l(m))
+        return e(b ? P.SELECT_CATEGORY : P.UNSELECT_CATEGORY, m);
+      s(m.value);
     };
     return {
       // Values
-      conditionalClasses: i(() => ({
+      conditionalClasses: c(() => ({
         "b-listbox-multi-select-options__static-category-option": t.staticCategories,
         "b-listbox-multi-select-options__category-option": t.categoryItems
       })),
@@ -675,7 +678,7 @@ const lt = $({
       isOptionSelected: a,
       shouldShowDescription: n,
       toggleCheckboxSelection: s,
-      selectSearch: v,
+      selectSearch: i,
       // Enums
       BentoListboxEvent: o,
       ListboxMultiSelectOptionsEvent: P
@@ -737,7 +740,7 @@ const it = ot.exports, ct = {
   emits: ["unselect-item", "unselect-category"],
   setup(t, { emit: e }) {
     const { t: s } = Y();
-    return { __sfc: !0, emit: e, t: s, unselectOption: (n) => n.items ? e("unselect-category", n) : e("unselect-item", n), BentoTypography: M, BaseButton: he, CrossSmallIcon: xe };
+    return { __sfc: !0, emit: e, t: s, unselectOption: (n) => n.items ? e("unselect-category", n) : e("unselect-item", n), BentoTypography: w, BaseButton: he, CrossSmallIcon: xe };
   }
 });
 var dt = function() {
@@ -765,10 +768,10 @@ const vt = mt.exports, ft = {
     selectAll: "Select all ({total})"
   }
 }, _t = (t) => {
-  const e = i(() => {
+  const e = c(() => {
     var l;
     return !!((l = t.value) != null && l.find(({ items: n }) => !!n));
-  }), s = i(() => {
+  }), s = c(() => {
     var l;
     return e.value ? (l = t.value) == null ? void 0 : l.reduce((n, a) => (a.items ? n.push(...a.items.flat()) : n.push(a), n), []) : t.value;
   });
@@ -782,7 +785,7 @@ const vt = mt.exports, ft = {
   components: {
     BentoCheckbox: Z,
     BentoListboxOption: q,
-    BentoTypography: M,
+    BentoTypography: w,
     ListboxMultiSelectOptions: it,
     ListboxMultiSelectChips: vt
   },
@@ -823,8 +826,8 @@ const vt = mt.exports, ft = {
      */
     lazyLoadType: {
       type: String,
-      default: w.NONE,
-      validator: (t) => Object.values(w).includes(t)
+      default: M.NONE,
+      validator: (t) => Object.values(M).includes(t)
     },
     /**
      * Flag that indicates that an external search it's being made
@@ -848,107 +851,108 @@ const vt = mt.exports, ft = {
   },
   emits: [o.SELECT],
   setup(t, { emit: e, slots: s }) {
-    const { t: l } = Y(), n = I(null), a = I(null), v = I(null), r = i(
-      () => t.selectedValues.map(({ value: c }) => c)
-    ), { isMultiLevelSelect: u, flattenedItemsList: d } = _t(V(t, "items")), S = (c) => {
-      var h;
-      const m = t.isOptionDisabled(c), _ = ((h = r.value) == null ? void 0 : h.includes(c.value)) || !1;
-      return { isDisabled: m, isPreSelected: _ };
-    }, x = i(() => {
-      if (t.searching && u)
+    const { t: l } = Y(), n = O(null), a = O(null), i = O(null), r = c(
+      () => t.selectedValues.map(({ value: d }) => d)
+    ), { isMultiLevelSelect: b, flattenedItemsList: m } = _t(G(t, "items")), E = (d) => {
+      var x;
+      const v = t.isOptionDisabled(d), g = ((x = r.value) == null ? void 0 : x.includes(d.value)) || !1;
+      return { isDisabled: v, isPreSelected: g };
+    }, p = c(() => {
+      if (t.searching && b)
         return t.items;
-      const c = d.value.filter((m) => {
-        const { isDisabled: _, isPreSelected: h } = S(m);
-        return _ && h || !_;
+      const d = m.value.filter((v) => {
+        const { isDisabled: g, isPreSelected: x } = E(v);
+        return g && x || !g;
       });
-      return t.selectedValues.forEach((m) => {
-        c.find((_) => _.value === m.value) || c.push(m);
-      }), c;
-    }), E = i(
+      return t.selectedValues.forEach((v) => {
+        d.find((g) => g.value === v.value) || d.push(v);
+      }), d;
+    }), S = c(
       () => {
-        var c;
-        return (c = x.value) == null ? void 0 : c.filter((m) => {
-          var _;
-          return m.items && u.value && t.searching ? m.items.filter(
-            (g) => (t.selectedValues ?? []).includes(g.value)
-          ).length === m.items.length : (_ = r.value) == null ? void 0 : _.includes(m.value);
+        var d;
+        return (d = p.value) == null ? void 0 : d.filter((v) => {
+          var g;
+          return v.items && b.value && t.searching ? v.items.filter(
+            (y) => (t.selectedValues ?? []).includes(y.value)
+          ).length === v.items.length : (g = r.value) == null ? void 0 : g.includes(v.value);
         });
       }
-    ), R = () => u.value && !t.searching ? d.value.length : t.items.length, b = i(() => {
-      var h;
-      const c = x.value.length, m = R(), _ = ((h = E.value) == null ? void 0 : h.length) || 0;
-      return _ === 0 ? l("selectAll", { total: c }) : _ === m ? l("allSelected", { total: m }) : _ <= m ? l("numberOfTotalSelected", { number: _, total: m }) : l("numbersSelected", { number: _ });
-    }), L = (c) => {
-      const m = (h) => {
-        const { isDisabled: g, isPreSelected: N } = S(h);
-        return g && N || !g;
-      }, _ = c.filter(m).filter((h) => !r.value.includes(h.value));
-      e(o.SELECT, [...t.selectedValues, ..._]);
-    }, y = (c) => {
-      const m = (g) => {
-        const { isDisabled: N, isPreSelected: fe } = S(g);
+    ), R = () => b.value && !t.searching ? m.value.length : t.items.length, T = c(() => {
+      var x;
+      const d = p.value.length, v = R(), g = ((x = S.value) == null ? void 0 : x.length) || 0;
+      return g === 0 ? l("selectAll", { total: d }) : g === v ? l("allSelected", { total: v }) : g <= v ? l("numberOfTotalSelected", { number: g, total: v }) : l("numbersSelected", { number: g });
+    }), B = (d) => {
+      const v = (x) => {
+        const { isDisabled: y, isPreSelected: N } = E(x);
+        return y && N || !y;
+      }, g = d.filter(v).filter((x) => !r.value.includes(x.value));
+      e(o.SELECT, [...t.selectedValues, ...g]);
+    }, u = (d) => {
+      const v = (y) => {
+        const { isDisabled: N, isPreSelected: fe } = E(y);
         return !(N && fe);
-      }, _ = c.filter(m).map(({ value: g }) => g), h = t.selectedValues.filter((g) => !(_ != null && _.includes(g.value)));
-      e(o.SELECT, h);
-    }, p = () => {
-      L(d.value);
-    }, O = () => {
-      y(d.value);
-    }, { isAllSelected: T, isIndeterminate: f, toggleSelectAll: C } = le(
-      E,
-      x,
+      }, g = d.filter(v).map(({ value: y }) => y), x = t.selectedValues.filter((y) => !(g != null && g.includes(y.value)));
+      e(o.SELECT, x);
+    }, _ = () => {
+      B(m.value);
+    }, C = () => {
+      u(m.value);
+    }, { isAllSelected: L, isIndeterminate: f, toggleSelectAll: h } = le(
+      S,
       p,
-      O
-    ), B = (c) => {
-      L(c.items);
-    }, F = (c) => {
-      y(c.items);
-    }, W = (c, m) => {
-      let _ = !1;
-      const h = t.selectedValues.filter(({ value: g }) => m.value === g ? (_ = !0, !1) : !0);
-      _ || h.push(m), e(c, h);
-    }, z = i(() => {
-      if (!u.value)
+      _,
+      C
+    ), A = (d) => {
+      B(d.items);
+    }, F = (d) => {
+      u(d.items);
+    }, W = (d, v) => {
+      let g = !1;
+      const x = t.selectedValues.filter(({ value: y }) => v.value === y ? (g = !0, !1) : !0);
+      g || x.push(v), e(d, x);
+    }, V = c(() => {
+      if (!b.value)
         return t.selectedValues;
-      const c = (g) => r.value.includes(g.value), m = (g) => !t.staticCategories && g.every((N) => c(N));
+      const d = (y) => r.value.includes(y.value), v = (y) => !t.staticCategories && y.every((N) => d(N));
       return t.items.flatMap(
-        (g) => g.items && !m(g.items) ? g.items : g
-      ).filter((g) => g.items ? !0 : c(g));
-    }), K = i(() => {
-      var _, h, g, N;
-      const c = ["automatic", "button"].includes(t.lazyLoadType), m = ((_ = t.selectedValues) == null ? void 0 : _.length) > 0 && ((h = E.value) == null ? void 0 : h.length) !== ((g = d.value) == null ? void 0 : g.length);
-      return c && t.hasMoreItems ? !!((N = t.selectedValues) != null && N.length) : m;
-    }), A = i(() => ["automatic", "button"].includes(t.lazyLoadType) ? !t.hasMoreItems : !0), G = i(
+        (y) => y.items && !v(y.items) ? y.items : y
+      ).filter((y) => y.items ? !0 : d(y));
+    }), K = c(() => {
+      var g, x, y, N;
+      const d = ["automatic", "button"].includes(t.lazyLoadType), v = ((g = t.selectedValues) == null ? void 0 : g.length) > 0 && ((x = S.value) == null ? void 0 : x.length) !== ((y = m.value) == null ? void 0 : y.length);
+      return d && t.hasMoreItems ? !!((N = t.selectedValues) != null && N.length) : v;
+    }), I = c(() => ["automatic", "button"].includes(t.lazyLoadType) ? !t.hasMoreItems : !0), U = c(
       () => n.value ? [n.value] : []
-    ), ae = i(
+    ), ae = c(
       () => {
-        var c, m;
-        return (m = (c = a.value) == null ? void 0 : c.$children) != null && m.length ? a.value.$children : [];
+        var d, v;
+        return (v = (d = a.value) == null ? void 0 : d.$children) != null && v.length ? a.value.$children : [];
       }
-    ), oe = i(
+    ), oe = c(
       () => {
-        var c, m;
-        return (m = (c = v.value) == null ? void 0 : c.$children) != null && m.length ? v.value.$children : [];
+        var d, v;
+        return (v = (d = i.value) == null ? void 0 : d.$children) != null && v.length ? i.value.$children : [];
       }
-    ), ie = i(() => ({ label: b, value: T })), ce = i(() => [
+    ), ie = c(() => ({ label: T, value: L })), ce = c(() => [
       ie,
-      ...z.value,
-      ...d.value
-    ]), re = (c) => {
+      ...V.value,
+      ...m.value
+    ]), re = (d) => {
       [
-        ...G.value,
+        ...U.value,
         ...ae.value,
         ...oe.value
-      ][c].$el.focus();
+      ][d].$el.focus();
     }, { moveToNextElement: ue, moveToPreviousElement: de, moveToFirstElement: be, moveToLastElement: me } = ne(
       {
-        items: I(ce),
-        isOptionDisabled: t.isOptionDisabled
+        items: O(ce),
+        isOptionDisabled: t.isOptionDisabled,
+        hasStaticCategories: G(t, "staticCategories")
       },
       re
     ), ve = {
-      [k.ARROW_UP]: (c) => de(c),
-      [k.ARROW_DOWN]: (c) => ue(c),
+      [k.ARROW_UP]: (d) => de(d),
+      [k.ARROW_DOWN]: (d) => ue(d),
       [k.HOME]: be,
       [k.END]: me
     };
@@ -956,24 +960,24 @@ const vt = mt.exports, ft = {
       // Refs
       selectAllListboxItemsRef: n,
       selectedListboxItemsRef: a,
-      listboxItemsRef: v,
+      listboxItemsRef: i,
       // Values
-      isAllSelected: T,
+      isAllSelected: L,
       showSelectedItems: K,
       isIndeterminate: f,
-      isMultiLevelSelect: u,
-      flattenedItemsList: d,
+      isMultiLevelSelect: b,
+      flattenedItemsList: m,
       selectedItemsList: r,
-      selectAllCheckboxText: b,
-      selectedOptions: z,
-      showSelectAllCheckbox: A,
+      selectAllCheckboxText: T,
+      selectedOptions: V,
+      showSelectAllCheckbox: I,
       slots: s,
       // Enums
       BentoListboxEvent: o,
       // Methods
-      selectAllCategory: B,
+      selectAllCategory: A,
       toggleCheckboxSelection: W,
-      toggleSelectAll: C,
+      toggleSelectAll: h,
       unselectAllCategory: F,
       // Events
       listboxListeners: ve
@@ -997,15 +1001,15 @@ var yt = function() {
       return [e._t(n, null, null, a)];
     } };
   })], null, !0) })], 1);
-}, pt = [], St = /* @__PURE__ */ D(
+}, pt = [], Ct = /* @__PURE__ */ D(
   gt,
   yt,
   pt,
   !1,
   null,
-  "99f17c3c"
+  "38dead9f"
 );
-const ee = St.exports, Ct = {
+const ee = Ct.exports, St = {
   "en-US": {
     showMore: "Show more",
     loading: "Loading"
@@ -1016,12 +1020,12 @@ const ee = St.exports, Ct = {
     BentoEmptyState: ye,
     BentoListboxSingleSelect: Xe,
     BentoListboxMultiSelect: ee,
-    BentoTypography: M,
+    BentoTypography: w,
     BentoLoadingIndicator: ge,
     BentoLoadingButton: Ee
   },
   directives: { BentoKeyboardNavigationDirective: X },
-  i18n: { messages: Ct },
+  i18n: { messages: St },
   props: {
     /**
      * Defines a string value that labels an interactive element.
@@ -1077,8 +1081,8 @@ const ee = St.exports, Ct = {
      */
     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.
@@ -1126,78 +1130,78 @@ const ee = St.exports, Ct = {
     o.TAB
   ],
   setup(t, { emit: e, slots: s }) {
-    const l = I([]), n = V(t, "items"), { t: a } = Y(), v = i(() => t.lazyLoadType !== w.AUTOMATIC), r = i(() => t.lazyLoadType === w.AUTOMATIC), u = () => {
-      var A;
-      return typeof (t == null ? void 0 : t.virtualScroll) == "object" && ((A = t == null ? void 0 : t.virtualScroll) != null && A.itemHeight) ? t.virtualScroll.itemHeight : ht;
+    const l = O([]), n = G(t, "items"), { t: a } = Y(), i = c(() => t.lazyLoadType !== M.AUTOMATIC), r = c(() => t.lazyLoadType === M.AUTOMATIC), b = () => {
+      var I;
+      return typeof (t == null ? void 0 : t.virtualScroll) == "object" && ((I = t == null ? void 0 : t.virtualScroll) != null && I.itemHeight) ? t.virtualScroll.itemHeight : ht;
     }, {
-      containerRef: d,
-      containerProps: S,
-      onScroll: x,
-      list: E,
+      containerRef: m,
+      containerProps: E,
+      onScroll: p,
+      list: S,
       wrapperProps: R
     } = Oe(n, {
-      itemHeight: u(),
+      itemHeight: b(),
       // 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"
-    }), b = i(
-      () => v.value ? "true" : void 0
-    ), L = i(
-      () => v.value && t.loading ? "true" : "false"
-    ), y = i(
-      () => v.value ? "polite" : void 0
-    ), p = (A) => (G) => {
-      e(A, G);
-    }, O = () => {
+    }), T = c(
+      () => i.value ? "true" : void 0
+    ), B = c(
+      () => i.value && t.loading ? "true" : "false"
+    ), u = c(
+      () => i.value ? "polite" : void 0
+    ), _ = (I) => (U) => {
+      e(I, U);
+    }, C = () => {
       e(o.SHOW_MORE);
-    }, T = pe(() => {
-      const A = d.value;
-      if (!A)
+    }, L = pe(() => {
+      const I = m.value;
+      if (!I)
         return;
-      const G = Math.round(A.scrollTop) + A.clientHeight >= A.scrollHeight;
-      t.hasMoreItems && G && !t.loading && O();
+      const U = Math.round(I.scrollTop) + I.clientHeight >= I.scrollHeight;
+      t.hasMoreItems && U && !t.loading && C();
     }), f = () => {
-      r.value ? T() : x();
-    }, C = i(() => {
-      var A;
-      return t.searching && ((A = t.items) == null ? void 0 : A.length) === 0;
-    }), B = i(
-      () => t.lazyLoadType === w.BUTTON && t.hasMoreItems
-    ), F = i(
+      r.value ? L() : p();
+    }, h = c(() => {
+      var I;
+      return ((I = t.items) == null ? void 0 : I.length) === 0;
+    }), A = c(
+      () => t.lazyLoadType === M.BUTTON && t.hasMoreItems
+    ), F = c(
       () => t.loading ? J.LOADING : J.START
-    ), W = i(() => t.loading ? a("loading") : a("showMore")), z = i(() => ({
+    ), W = c(() => t.loading ? a("loading") : a("showMore")), V = c(() => ({
       ...t.emptyState,
       variant: "condensed"
     })), K = {
-      [o.SELECT]: p(o.SELECT),
-      [o.SPACE]: p(o.SPACE),
-      [o.TAB]: p(o.TAB),
-      [o.ENTER]: p(o.ENTER)
+      [o.SELECT]: _(o.SELECT),
+      [o.SPACE]: _(o.SPACE),
+      [o.TAB]: _(o.TAB),
+      [o.ENTER]: _(o.ENTER)
     };
     return {
       // Refs
-      listboxRef: d,
+      listboxRef: m,
       listboxItemRef: l,
       // a11y
-      ariaAtomic: b,
-      ariaBusy: L,
-      ariaLive: y,
+      ariaAtomic: T,
+      ariaBusy: B,
+      ariaLive: u,
       // Values
-      containerProps: S,
-      isSearchResultEmpty: C,
-      limitedEmptyStateProps: z,
+      containerProps: E,
+      isSearchResultEmpty: h,
+      limitedEmptyStateProps: V,
       loadingButtonState: F,
       slots: s,
-      shouldDisplayShowMoreButton: B,
+      shouldDisplayShowMoreButton: A,
       showMoreButtonText: W,
-      virtualisedItems: E,
+      virtualisedItems: S,
       wrapperProps: R,
       // Enums
       BentoKeyboardNavigationKeyDownEvent: k,
       BentoListboxEvent: o,
       // Methods
       onListboxContainerScroll: f,
-      onOptionSelected: p,
-      emitShowMore: O,
+      onOptionSelected: _,
+      emitShowMore: C,
       listboxListeners: K
     };
   }
@@ -1221,7 +1225,7 @@ var Et = function() {
   Lt,
   !1,
   null,
-  "28929030"
+  "23d9e786"
 );
 const zt = Ot.exports, H = (t, e) => {
   for (const s of t) {
@@ -1232,10 +1236,10 @@ const zt = Ot.exports, H = (t, e) => {
   }
   return null;
 }, Vt = (t, e, s) => {
-  const l = I([]), n = I(), a = (u) => {
-    n.value = s.value ? u.map(({ value: d }) => d) : u[0].value;
-  }, v = (u) => {
-    l.value = u, a(u);
+  const l = O([]), n = O(), a = (b) => {
+    n.value = s.value ? b.map(({ value: m }) => m) : b[0].value;
+  }, i = (b) => {
+    l.value = b, a(b);
   }, r = () => {
     l.value = [], n.value = null;
   };
@@ -1246,18 +1250,18 @@ const zt = Ot.exports, H = (t, e) => {
         r();
         return;
       }
-      const u = !Array.isArray(e.value), d = [...l.value];
+      const b = !Array.isArray(e.value), m = [...l.value];
       r();
-      const S = (x) => {
-        let E = H(t.value, x);
-        E || (E = H(d, x)), E || (E = x.toString()), l.value.push({ value: x, label: E });
+      const E = (p) => {
+        let S = H(t.value, p);
+        S || (S = H(m, p)), S || (S = p.toString()), l.value.push({ value: p, label: S });
       };
-      if (u) {
-        const x = e.value;
-        S(x), a(l.value);
+      if (b) {
+        const p = e.value;
+        E(p), a(l.value);
         return;
       }
-      e.value.forEach(S), a(l.value);
+      e.value.forEach(E), a(l.value);
     },
     { immediate: !0 }
   ), {
@@ -1266,14 +1270,14 @@ const zt = Ot.exports, H = (t, e) => {
     cachedListboxSelectedValues: n,
     // Methods
     resetCache: r,
-    setCachedValues: v
+    setCachedValues: i
   };
 };
 export {
-  w as B,
+  M as B,
   o as a,
   zt as b,
   Vt as c,
   _t as u
 };
-//# sourceMappingURL=use-cached-selected-values.DgARPcHp.js.map
+//# sourceMappingURL=use-cached-selected-values.DWQ8SMSi.js.map