@adyen/bento-vue3 1.26.0 → 1.27.0

package/dist/chunks/{use-cached-selected-values.852aeafe.js → use-cached-selected-values.3c312296.js}

@@ -1,41 +1,40 @@
-import { computed as m, ref as N, onMounted as Oe, onUnmounted as Fe, watch as Ie, defineComponent as H, resolveComponent as h, openBlock as g, createElementBlock as T, createVNode as k, withCtx as L, createTextVNode as U, toDisplayString as V, createElementVNode as W, renderSlot as G, mergeProps as x, withKeys as ge, createBlock as B, toHandlerKey as se, normalizeProps as F, guardReactiveProps as K, createCommentVNode as q, withDirectives as ae, vShow as Ae, toRef as ue, resolveDirective as _e, toHandlers as le, Fragment as Z, renderList as z, createSlots as ie, normalizeClass as fe, unref as re, pushScopeId as Ye, popScopeId as Ke } from "vue";
-import { B as Y, a as Se } from "./keyboard-navigation.ca47dfa8.js";
-import { B as ee } from "./index.a3d60e4f.js";
-import { BentoLoadingIndicator as qe } from "../loading-indicator.js";
-import { BentoEmptyState as We } from "../empty-state.js";
+import { computed as v, ref as N, onMounted as Ie, onUnmounted as Ye, watch as Ae, defineComponent as j, resolveComponent as E, openBlock as m, createElementBlock as T, createVNode as k, withCtx as L, createTextVNode as V, toDisplayString as P, createElementVNode as q, renderSlot as G, mergeProps as x, withKeys as ge, createCommentVNode as K, createBlock as B, toHandlerKey as se, normalizeProps as F, guardReactiveProps as H, withDirectives as ae, vShow as $e, toRef as ue, resolveDirective as _e, toHandlers as le, Fragment as Q, renderList as z, createSlots as ie, normalizeClass as fe, unref as re, pushScopeId as Ke, popScopeId as qe } from "vue";
+import { B as Y, a as Se } from "./keyboard-navigation.bbc3d15c.js";
+import { B as ee } from "./index.ee15db35.js";
+import { BentoLoadingIndicator as We } from "../loading-indicator.js";
+import { BentoEmptyState as He } from "../empty-state.js";
 import { u as de } from "./i18n.f7e6533e.js";
-import { d as He } from "./debounce.b5ef6acf.js";
-import { _ as j } from "./_plugin-vue_export-helper.dad06003.js";
-import { C as je } from "./checkmark.87919b24.js";
-import { B as Ce } from "./checkbox.f55ee3a5.js";
-import { a as Xe, C as Je } from "./chevron-up.05ca20db.js";
-import { B as Qe } from "./base-button.e84acf30.js";
-import { C as Ze } from "./cross-small.9bc6a02f.js";
-import { B as et, a as Ee } from "./loading-button.0391ad8b.js";
+import { d as je } from "./debounce.b5ef6acf.js";
+import { _ as W } from "./_plugin-vue_export-helper.dad06003.js";
+import { B as Ce } from "./checkbox.9c30c07b.js";
+import { a as Xe, C as Ze } from "./chevron-up.638a9f34.js";
+import { B as Je } from "./base-button.a0140a4c.js";
+import { C as Qe } from "./cross-small.b85406fe.js";
+import { B as et, a as he } from "./loading-button.6b81b546.js";
 import { o as tt } from "./resize.a041304d.js";
 import "../assets/use-cached-selected-values.css";
-const $e = (e, t, n, u) => {
-  const s = m(
+const ke = (e, t, n, u) => {
+  const s = v(
     () => {
-      var r, a;
-      return !!((r = e.value) != null && r.length) && ((a = e.value) == null ? void 0 : a.length) === t.value.length;
+      var r, c;
+      return !!((r = e.value) != null && r.length) && ((c = e.value) == null ? void 0 : c.length) === t.value.length;
     }
-  ), c = m(() => {
+  ), a = v(() => {
     var r;
     return e.value == null || e.value.length === 0 ? !1 : ((r = e.value) == null ? void 0 : r.length) !== t.value.length;
   });
   return {
     isAllSelected: s,
-    isIndeterminate: c,
+    isIndeterminate: a,
     toggleSelectAll: (r) => {
       r ? n() : u();
     }
   };
 };
 function st(e, { disabled: t, itemHeight: n, overscan: u = 5, prefixHeight: s }) {
-  const c = N(null), l = N([]), r = N(0), a = N(0), o = N(0);
-  let y;
-  const i = m(() => {
+  const a = N(null), l = N([]), r = N(0), c = N(0), o = N(0);
+  let p;
+  const i = v(() => {
     const I = typeof n == "number" ? e.value.length * n : e.value.reduce((R, S, A) => R + n(A), 0), D = typeof n == "number" ? r.value * n : e.value.slice(0, r.value).reduce((R, S, A) => R + n(A), 0);
     return {
       style: {
@@ -44,20 +43,20 @@ function st(e, { disabled: t, itemHeight: n, overscan: u = 5, prefixHeight: s })
       }
     };
   }), b = () => {
-    const I = (s == null ? void 0 : s.value) ?? 0, D = Math.max(c.value.scrollTop - I, 0);
+    const I = (s == null ? void 0 : s.value) ?? 0, D = Math.max(a.value.scrollTop - I, 0);
     if (typeof n == "number")
       return Math.floor(D / n);
     let R = 0, S = 0;
     for (let A = 0; A < e.value.length; A += 1) {
-      const w = n(A);
-      if (R += w, R >= D) {
+      const U = n(A);
+      if (R += U, R >= D) {
         S = A;
         break;
       }
     }
     return S;
   }, f = () => {
-    if (o.value = c.value.clientHeight, typeof n == "number")
+    if (o.value = a.value.clientHeight, typeof n == "number")
       return Math.ceil(o.value / n);
     const I = r.value ?? 0;
     let D = 0, R = 0;
@@ -67,47 +66,47 @@ function st(e, { disabled: t, itemHeight: n, overscan: u = 5, prefixHeight: s })
         break;
     }
     return R - I;
-  }, p = () => {
-    if (c.value) {
+  }, y = () => {
+    if (a.value) {
       const I = f();
-      r.value = b(), a.value = Math.min(r.value + I + u, e.value.length), l.value = e.value.slice(r.value, a.value);
+      r.value = b(), c.value = Math.min(r.value + I + u, e.value.length), l.value = e.value.slice(r.value, c.value);
     }
   }, O = () => {
-    p();
+    y();
   };
-  t || (Oe(() => {
-    c.value && (o.value = c.value.clientHeight, y = tt(c.value, ({ clientHeight: I }) => {
-      o.value = I, p();
-    }), p());
-  }), Fe(() => {
-    y == null || y.disconnect();
-  }), Ie(
+  t || (Ie(() => {
+    a.value && (o.value = a.value.clientHeight, p = tt(a.value, ({ clientHeight: I }) => {
+      o.value = I, y();
+    }), y());
+  }), Ye(() => {
+    p == null || p.disconnect();
+  }), Ae(
     () => e.value,
     () => {
-      p();
+      y();
     }
   ));
-  const P = {
-    ref: c,
+  const w = {
+    ref: a,
     style: { overflowY: "auto" }
   };
   return t ? {
-    containerRef: c,
-    containerProps: P,
+    containerRef: a,
+    containerProps: w,
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     onScroll: () => {
     },
     list: e
   } : {
-    containerRef: c,
-    containerProps: P,
+    containerRef: a,
+    containerProps: w,
     onScroll: O,
     list: l,
     wrapperProps: i
   };
 }
-var d = /* @__PURE__ */ ((e) => (e.SELECT = "select", e.SHOW_MORE = "show-more", e.ESCAPE = "escape-pressed", e.CLICK = "click", e.ENTER = "enter-pressed", e.SPACE = "space-pressed", e.TAB = "tab-pressed", e.CLOSE_DROPDOWN = "close-dropdown", e))(d || {}), Q = /* @__PURE__ */ ((e) => (e.AUTOMATIC = "automatic", e.BUTTON = "button", e.NONE = "none", e))(Q || {});
-const lt = H({
+var d = /* @__PURE__ */ ((e) => (e.SELECT = "select", e.SHOW_MORE = "show-more", e.ESCAPE = "escape-pressed", e.CLICK = "click", e.ENTER = "enter-pressed", e.SPACE = "space-pressed", e.TAB = "tab-pressed", e.CLOSE_DROPDOWN = "close-dropdown", e))(d || {}), J = /* @__PURE__ */ ((e) => (e.AUTOMATIC = "automatic", e.BUTTON = "button", e.NONE = "none", e))(J || {});
+const lt = j({
   name: "bento-listbox-static-category",
   components: {
     BentoTypography: ee
@@ -123,25 +122,25 @@ const lt = H({
   }
 });
 const ot = { class: "b-listbox-single-select-category" };
-function nt(e, t, n, u, s, c) {
-  const l = h("bento-typography");
-  return g(), T("div", ot, [
+function nt(e, t, n, u, s, a) {
+  const l = E("bento-typography");
+  return m(), T("div", ot, [
     k(l, {
       variant: "caption",
       el: "span",
       class: "b-listbox-single-select-category__label-text"
     }, {
       default: L(() => [
-        U(V(e.categoryLabel), 1)
+        V(P(e.categoryLabel), 1)
       ]),
       _: 1
     }),
-    W("div", null, [
+    q("div", null, [
       G(e.$slots, "default", {}, void 0, !0)
     ])
   ]);
 }
-const it = /* @__PURE__ */ j(lt, [["render", nt], ["__scopeId", "data-v-a90eff17"]]), at = H({
+const it = /* @__PURE__ */ W(lt, [["render", nt], ["__scopeId", "data-v-a90eff17"]]), at = j({
   name: "bento-listbox-option",
   props: {
     /**
@@ -155,7 +154,7 @@ const it = /* @__PURE__ */ j(lt, [["render", nt], ["__scopeId", "data-v-a90eff17
   },
   emits: [d.CLICK, d.ENTER, d.SPACE, d.TAB],
   setup(e, { emit: t }) {
-    const n = m(() => ({
+    const n = v(() => ({
       "b-listbox-option--disabled": e.disabled,
       "b-listbox-option--selected": e.selected
     }));
@@ -166,17 +165,17 @@ const it = /* @__PURE__ */ j(lt, [["render", nt], ["__scopeId", "data-v-a90eff17
       // Values
       conditionalClasses: n,
       // Events
-      onClick: (c) => {
-        t(d.CLICK, c);
+      onClick: (a) => {
+        t(d.CLICK, a);
       },
-      onOptionSelected: (c, l) => {
-        t(c, l);
+      onOptionSelected: (a, l) => {
+        t(a, l);
       }
     };
   }
 });
-function ct(e, t, n, u, s, c) {
-  return g(), T("label", x({
+function ct(e, t, n, u, s, a) {
+  return m(), T("label", x({
     class: ["b-listbox-option", e.conditionalClasses],
     role: "option"
   }, e.$attrs, {
@@ -190,12 +189,34 @@ function ct(e, t, n, u, s, c) {
     G(e.$slots, "default", {}, void 0, !0)
   ], 16);
 }
-const be = /* @__PURE__ */ j(at, [["render", ct], ["__scopeId", "data-v-18a61f5d"]]), rt = H({
+const be = /* @__PURE__ */ W(at, [["render", ct], ["__scopeId", "data-v-18a61f5d"]]);
+let Ee = 0;
+const rt = {
+  beforeCreate() {
+    this.uuid = Ee.toString(), Ee += 1;
+  }
+}, ut = { key: 0 }, dt = /* @__PURE__ */ q("path", {
+  fill: "#00112C",
+  d: "M15.0608 4.00011L14.0001 2.93945L6.00011 10.9395L2.00011 6.93945L0.939453 8.00011L6.00011 13.0608L15.0608 4.00011Z"
+}, null, -1);
+function bt(e, t, n, u, s, a) {
+  return m(), T("svg", x({ role: "img" }, e.$attrs, {
+    class: "ui-assets-icons-16",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    fill: "none"
+  }), [
+    e.$attrs["svg-title"] ? (m(), T("title", ut, P(e.$attrs["svg-title"]), 1)) : K("", !0),
+    dt
+  ], 16);
+}
+const mt = /* @__PURE__ */ W(rt, [["render", bt]]), vt = j({
   name: "bento-listbox-single-select-option",
   components: {
     BentoListboxOption: be,
     BentoTypography: ee,
-    CheckmarkIcon: je
+    CheckmarkIcon: mt
   },
   props: {
     /**
@@ -219,12 +240,12 @@ const be = /* @__PURE__ */ j(at, [["render", ct], ["__scopeId", "data-v-18a61f5d
   setup(e, { emit: t }) {
     const n = (l) => {
       e.disabled || t(l, e.option);
-    }, u = m(() => e.disabled ? !0 : null), s = m(() => e.selected ? !0 : null), c = m(() => e.disabled ? -1 : 0);
+    }, u = v(() => e.disabled ? !0 : null), s = v(() => e.selected ? !0 : null), a = v(() => e.disabled ? -1 : 0);
     return {
       // Values
       ariaDisabled: u,
       ariaSelected: s,
-      tabIndex: c,
+      tabIndex: a,
       // Enums
       BentoListboxEvent: d,
       // Events
@@ -232,10 +253,10 @@ const be = /* @__PURE__ */ j(at, [["render", ct], ["__scopeId", "data-v-18a61f5d
     };
   }
 });
-const ut = { class: "b-listbox-single-select-option__text" }, dt = { class: "b-listbox-single-select-option__check-icon" };
-function bt(e, t, n, u, s, c) {
-  const l = h("bento-typography"), r = h("checkmark-icon"), a = h("bento-listbox-option");
-  return g(), B(a, x({
+const gt = { class: "b-listbox-single-select-option__text" }, ft = { class: "b-listbox-single-select-option__check-icon" };
+function pt(e, t, n, u, s, a) {
+  const l = E("bento-typography"), r = E("checkmark-icon"), c = E("bento-listbox-option");
+  return m(), B(c, x({
     class: "b-listbox-single-select-option",
     disabled: e.disabled,
     selected: e.selected,
@@ -251,41 +272,41 @@ function bt(e, t, n, u, s, c) {
     [se(e.BentoListboxEvent.TAB)]: t[3] || (t[3] = (o) => e.onOptionSelected(e.BentoListboxEvent.TAB))
   }), {
     default: L(() => [
-      G(e.$slots, "default", F(K(e.option)), () => [
-        W("span", ut, [
+      G(e.$slots, "default", F(H(e.option)), () => [
+        q("span", gt, [
           k(l, { el: "span" }, {
             default: L(() => [
-              U(V(e.option.label), 1)
+              V(P(e.option.label), 1)
             ]),
             _: 1
           }),
-          e.option.description ? (g(), B(l, {
+          e.option.description ? (m(), B(l, {
             key: 0,
             class: "b-listbox-single-select-option__description",
             el: "span"
           }, {
             default: L(() => [
-              U(V(e.option.description), 1)
+              V(P(e.option.description), 1)
             ]),
             _: 1
-          })) : q("", !0)
+          })) : K("", !0)
         ])
       ], !0),
-      W("span", dt, [
+      q("span", ft, [
         ae(k(r, { "svg-title": "selected" }, null, 512), [
-          [Ae, e.selected]
+          [$e, e.selected]
         ])
       ])
     ]),
     _: 3
   }, 16, ["disabled", "selected", "aria-selected", "aria-disabled", "tabindex"]);
 }
-const mt = /* @__PURE__ */ j(rt, [["render", bt], ["__scopeId", "data-v-e8cc847b"]]), ke = ({ items: e, isOptionDisabled: t }, n) => {
-  const u = m(() => e.value.length - 1), s = N(0);
-  Oe(() => {
+const yt = /* @__PURE__ */ W(vt, [["render", pt], ["__scopeId", "data-v-e8cc847b"]]), Be = ({ items: e, isOptionDisabled: t }, n) => {
+  const u = v(() => e.value.length - 1), s = N(0);
+  Ie(() => {
     t && (s.value = e.value.findIndex((f) => !t(f)));
   });
-  const c = (f) => !t || !!t && t(e.value[f]), l = (f) => !t || !!t && !t(e.value[f]), r = (f) => {
+  const a = (f) => !t || !!t && t(e.value[f]), l = (f) => !t || !!t && !t(e.value[f]), r = (f) => {
     switch (f) {
       case "increase":
         s.value += 1;
@@ -294,50 +315,50 @@ const mt = /* @__PURE__ */ j(rt, [["render", bt], ["__scopeId", "data-v-e8cc847b
         s.value -= 1;
         break;
     }
-  }, a = ({ edgeCaseItem: f, isItemBeforeEdgeCaseItem: p }, O, P) => {
-    s.value !== f && (p ? l(f) && r(P) : (r(P), c(s.value) && O()), n(s.value));
+  }, c = ({ edgeCaseItem: f, isItemBeforeEdgeCaseItem: y }, O, w) => {
+    s.value !== f && (y ? l(f) && r(w) : (r(w), a(s.value) && O()), n(s.value));
   }, o = (f) => {
     var O;
     (O = f == null ? void 0 : f.detail) == null || O.preventDefault();
-    const p = s.value === u.value - 2;
-    a(
+    const y = s.value === u.value - 2;
+    c(
       {
-        isItemBeforeEdgeCaseItem: p,
+        isItemBeforeEdgeCaseItem: y,
         edgeCaseItem: u.value
       },
       o,
       "increase"
       /* INCREASE */
     );
-  }, y = (f) => {
+  }, p = (f) => {
     var O;
     (O = f == null ? void 0 : f.detail) == null || O.preventDefault();
-    const p = s.value === 1;
-    a(
+    const y = s.value === 1;
+    c(
       {
         edgeCaseItem: 0,
-        isItemBeforeEdgeCaseItem: p
+        isItemBeforeEdgeCaseItem: y
       },
-      y,
+      p,
       "decrease"
       /* DECREASE */
     );
   };
   return {
     moveToFirstElement: () => {
-      s.value = 0, c(s.value) ? o() : n(s.value);
+      s.value = 0, a(s.value) ? o() : n(s.value);
     },
     moveToLastElement: () => {
-      s.value = u.value, c(s.value) ? y() : n(s.value);
+      s.value = u.value, a(s.value) ? p() : n(s.value);
     },
     moveToNextElement: o,
-    moveToPreviousElement: y
+    moveToPreviousElement: p
   };
-}, vt = H({
+}, _t = j({
   name: "bento-listbox-single-select",
   components: {
     BentoListboxSingleSelectCategory: it,
-    BentoListboxSingleSelectOption: mt
+    BentoListboxSingleSelectOption: yt
   },
   directives: { BentoKeyboardNavigationDirective: Se },
   inheritAttrs: !1,
@@ -382,12 +403,12 @@ const mt = /* @__PURE__ */ j(rt, [["render", bt], ["__scopeId", "data-v-e8cc847b
   },
   emits: [d.SELECT, d.ENTER, d.SPACE, d.TAB],
   setup(e, { emit: t, slots: n }) {
-    const u = N([]), s = m(() => {
-      var p;
-      return !!((p = e.selectedValue) != null && p.length) && e.selectedValue.at(0);
-    }), c = m(() => !!e.items.some(({ items: p }) => !!p)), l = (p) => (O) => {
-      t(p, [O]);
-    }, r = (p) => u.value[p].$el.focus(), { moveToNextElement: a, moveToPreviousElement: o, moveToFirstElement: y, moveToLastElement: i } = ke(
+    const u = N([]), s = v(() => {
+      var y;
+      return !!((y = e.selectedValue) != null && y.length) && e.selectedValue.at(0);
+    }), a = v(() => !!e.items.some(({ items: y }) => !!y)), l = (y) => (O) => {
+      t(y, [O]);
+    }, r = (y) => u.value[y].$el.focus(), { moveToNextElement: c, moveToPreviousElement: o, moveToFirstElement: p, moveToLastElement: i } = Be(
       {
         items: ue(e, "items"),
         isOptionDisabled: e.isOptionDisabled
@@ -395,8 +416,8 @@ const mt = /* @__PURE__ */ j(rt, [["render", bt], ["__scopeId", "data-v-e8cc847b
       r
     ), b = {
       [Y.ARROW_UP]: o,
-      [Y.ARROW_DOWN]: a,
-      [Y.HOME]: y,
+      [Y.ARROW_DOWN]: c,
+      [Y.HOME]: p,
       [Y.END]: i
     }, f = {
       [d.SELECT]: l(d.SELECT),
@@ -412,7 +433,7 @@ const mt = /* @__PURE__ */ j(rt, [["render", bt], ["__scopeId", "data-v-e8cc847b
       selectedItem: s,
       slots: n,
       // Computed
-      hasCategories: c,
+      hasCategories: a,
       // Methods
       onOptionSelected: l,
       // Keyboard navigation
@@ -421,34 +442,34 @@ const mt = /* @__PURE__ */ j(rt, [["render", bt], ["__scopeId", "data-v-e8cc847b
     };
   }
 });
-function gt(e, t, n, u, s, c) {
-  const l = h("bento-listbox-single-select-option"), r = h("bento-listbox-single-select-category"), a = _e("bento-keyboard-navigation-directive");
-  return ae((g(), T("div", le(e.listboxListeners, !0), [
-    e.hasCategories && e.staticCategories ? (g(!0), T(Z, { key: 0 }, z(e.items, (o) => (g(), B(r, {
+function St(e, t, n, u, s, a) {
+  const l = E("bento-listbox-single-select-option"), r = E("bento-listbox-single-select-category"), c = _e("bento-keyboard-navigation-directive");
+  return ae((m(), T("div", le(e.listboxListeners, !0), [
+    e.hasCategories && e.staticCategories ? (m(!0), T(Q, { key: 0 }, z(e.items, (o) => (m(), B(r, {
       key: o.value,
       "category-label": o.label,
       role: "group"
     }, {
       default: L(() => [
-        (g(!0), T(Z, null, z(o.items, (y) => (g(), B(l, x({
-          key: y.value,
+        (m(!0), T(Q, null, z(o.items, (p) => (m(), B(l, x({
+          key: p.value,
           ref_for: !0,
           ref: "listboxItemRef",
           role: "option",
-          option: y,
-          disabled: e.isOptionDisabled ? e.isOptionDisabled(y) : null,
-          selected: y.value === e.selectedItem.value
+          option: p,
+          disabled: e.isOptionDisabled ? e.isOptionDisabled(p) : null,
+          selected: p.value === e.selectedItem.value
         }, le(e.listboxOptionListeners)), ie({ _: 2 }, [
           z(e.slots, (i, b) => ({
             name: b,
             fn: L((f) => [
-              G(e.$slots, b, F(K(f)))
+              G(e.$slots, b, F(H(f)))
             ])
           }))
         ]), 1040, ["option", "disabled", "selected"]))), 128))
       ]),
       _: 2
-    }, 1032, ["category-label"]))), 128)) : (g(!0), T(Z, { key: 1 }, z(e.items, (o) => (g(), B(l, x({
+    }, 1032, ["category-label"]))), 128)) : (m(!0), T(Q, { key: 1 }, z(e.items, (o) => (m(), B(l, x({
       key: o.value,
       ref_for: !0,
       ref: "listboxItemRef",
@@ -457,33 +478,33 @@ function gt(e, t, n, u, s, c) {
       disabled: e.isOptionDisabled ? e.isOptionDisabled(o) : null,
       selected: o.value === e.selectedItem.value
     }, le(e.listboxOptionListeners)), ie({ _: 2 }, [
-      z(e.slots, (y, i) => ({
+      z(e.slots, (p, i) => ({
         name: i,
         fn: L((b) => [
-          G(e.$slots, i, F(K(b)))
+          G(e.$slots, i, F(H(b)))
         ])
       }))
     ]), 1040, ["option", "disabled", "selected"]))), 128))
   ], 16)), [
-    [a]
+    [c]
   ]);
 }
-const ft = /* @__PURE__ */ j(vt, [["render", gt]]);
-var ye = /* @__PURE__ */ ((e) => (e.DISABLED = "disabled", e.STATIC_CATEGORY = "static-category", e))(ye || {}), ne = /* @__PURE__ */ ((e) => (e.SELECT_CATEGORY = "select-category", e.UNSELECT_CATEGORY = "unselect-category", e))(ne || {});
-const yt = {
+const Ct = /* @__PURE__ */ W(_t, [["render", St]]);
+var pe = /* @__PURE__ */ ((e) => (e.DISABLED = "disabled", e.STATIC_CATEGORY = "static-category", e))(pe || {}), ne = /* @__PURE__ */ ((e) => (e.SELECT_CATEGORY = "select-category", e.UNSELECT_CATEGORY = "unselect-category", e))(ne || {});
+const ht = {
   "en-US": {
     categoryClosed: "{category} closed",
     categoryOpened: "{category} opened"
   }
-}, pt = H({
-  i18n: { messages: yt },
+}, Et = j({
+  i18n: { messages: ht },
   name: "bento-listbox-multi-select-category",
   components: {
     BentoCheckbox: Ce,
     BentoTypography: ee,
     BentoListboxOption: be,
     ChevronDownIcon: Xe,
-    ChevronUpIcon: Je
+    ChevronUpIcon: Ze
   },
   props: {
     /**
@@ -526,77 +547,77 @@ const yt = {
   },
   emits: [ne.SELECT_CATEGORY, ne.UNSELECT_CATEGORY],
   setup(e, { emit: t }) {
-    const n = N(!1), { t: u } = de(), s = (S) => e.isOptionDisabled ? e.isOptionDisabled(S) : !1, c = m(
+    const n = N(!1), { t: u } = de(), s = (S) => e.isOptionDisabled ? e.isOptionDisabled(S) : !1, a = v(
       () => e.category.items.every((S) => s(S))
-    ), l = ue(e, "staticCategories"), r = m(() => n.value || e.staticCategories), a = m(() => ({
-      [`b-listbox-multi-select-category--${ye.DISABLED}`]: c.value,
-      [`b-listbox-multi-select-category--${ye.STATIC_CATEGORY}`]: e.staticCategories
+    ), l = ue(e, "staticCategories"), r = v(() => n.value || e.staticCategories), c = v(() => ({
+      [`b-listbox-multi-select-category--${pe.DISABLED}`]: a.value,
+      [`b-listbox-multi-select-category--${pe.STATIC_CATEGORY}`]: e.staticCategories
     })), o = (S) => {
       S.preventDefault(), n.value = !n.value;
-    }, y = (S) => {
+    }, p = (S) => {
       var te;
-      const A = s(S), w = ((te = e.selectedItemsList) == null ? void 0 : te.includes(S.value)) || !1;
-      return { isDisabled: A, isPreSelected: w };
-    }, i = m(
+      const A = s(S), U = ((te = e.selectedItemsList) == null ? void 0 : te.includes(S.value)) || !1;
+      return { isDisabled: A, isPreSelected: U };
+    }, i = v(
       () => e.category.items.filter((S) => {
-        const { isDisabled: A, isPreSelected: w } = y(S);
-        return A && w || !A;
+        const { isDisabled: A, isPreSelected: U } = p(S);
+        return A && U || !A;
       })
-    ), b = m(
+    ), b = v(
       () => {
         var S;
         return (S = i.value) == null ? void 0 : S.filter(
           ({ value: A }) => {
-            var w;
-            return (w = e.selectedItemsList) == null ? void 0 : w.includes(A);
+            var U;
+            return (U = e.selectedItemsList) == null ? void 0 : U.includes(A);
           }
         );
       }
-    ), f = m(() => {
+    ), f = v(() => {
       const S = n.value ? "categoryOpened" : "categoryClosed";
       return u(S, { category: e.category.label });
-    }), p = m(
+    }), y = v(
       () => ({
         el: "span",
         variant: e.staticCategories ? "caption" : "body"
       })
     ), O = () => {
       t(ne.SELECT_CATEGORY);
-    }, P = () => {
+    }, w = () => {
       t(ne.UNSELECT_CATEGORY);
-    }, { isAllSelected: I, isIndeterminate: D, toggleSelectAll: R } = $e(
+    }, { isAllSelected: I, isIndeterminate: D, toggleSelectAll: R } = ke(
       b,
       i,
       O,
-      P
+      w
     );
     return {
       // Values
       chevronTitle: f,
-      conditionalClass: a,
-      hasAllPropsDisabled: c,
+      conditionalClass: c,
+      hasAllPropsDisabled: a,
       isOpen: n,
       isAllSelected: I,
       isIndeterminate: D,
       isStaticCategory: l,
       // Computed
       showItemChildren: r,
-      categoryLabelProps: p,
+      categoryLabelProps: y,
       // Methods
       toggleOpen: o,
       toggleSelectAll: R
     };
   }
 });
-const _t = { class: "b-listbox-multi-select-category__label" };
-function St(e, t, n, u, s, c) {
-  const l = h("bento-checkbox"), r = h("bento-typography"), a = h("chevron-up-icon"), o = h("chevron-down-icon"), y = h("bento-listbox-option");
-  return g(), T("div", null, [
-    k(y, {
+const Lt = { class: "b-listbox-multi-select-category__label" };
+function Tt(e, t, n, u, s, a) {
+  const l = E("bento-checkbox"), r = E("bento-typography"), c = E("chevron-up-icon"), o = E("chevron-down-icon"), p = E("bento-listbox-option");
+  return m(), T("div", null, [
+    k(p, {
       class: fe(["b-listbox-multi-select-category__option", e.conditionalClass])
     }, {
       default: L(() => [
-        e.isStaticCategory ? q("", !0) : (g(), B(l, {
+        e.isStaticCategory ? K("", !0) : (m(), B(l, {
           key: 0,
           "model-value": e.isAllSelected,
           indeterminate: e.isIndeterminate,
@@ -605,23 +626,23 @@ function St(e, t, n, u, s, c) {
           value: e.category.value,
           "onUpdate:modelValue": e.toggleSelectAll
         }, null, 8, ["model-value", "indeterminate", "disabled", "aria-label", "value", "onUpdate:modelValue"])),
-        W("span", _t, [
+        q("span", Lt, [
           k(r, x(e.categoryLabelProps, { class: "b-listbox-multi-select-category__label-text" }), {
             default: L(() => [
-              U(V(e.category.label), 1)
+              V(P(e.category.label), 1)
             ]),
             _: 1
           }, 16),
-          e.isStaticCategory ? q("", !0) : (g(), T("div", {
+          e.isStaticCategory ? K("", !0) : (m(), T("div", {
             key: 0,
             class: "b-listbox-multi-select-category__label-chevron",
             "data-testid": "toggle-listbox",
             onClickCapture: t[0] || (t[0] = (...i) => e.toggleOpen && e.toggleOpen(...i))
           }, [
-            e.isOpen ? (g(), B(a, {
+            e.isOpen ? (m(), B(c, {
               key: 0,
               "svg-title": e.chevronTitle
-            }, null, 8, ["svg-title"])) : (g(), B(o, {
+            }, null, 8, ["svg-title"])) : (m(), B(o, {
               key: 1,
               "svg-title": e.chevronTitle
             }, null, 8, ["svg-title"]))
@@ -630,22 +651,22 @@ function St(e, t, n, u, s, c) {
       ]),
       _: 1
     }, 8, ["class"]),
-    ae(W("div", null, [
+    ae(q("div", null, [
       G(e.$slots, "default", {}, void 0, !0)
     ], 512), [
-      [Ae, e.showItemChildren]
+      [$e, e.showItemChildren]
     ])
   ]);
 }
-const Ct = /* @__PURE__ */ j(pt, [["render", St], ["__scopeId", "data-v-9a00de22"]]);
-var J = /* @__PURE__ */ ((e) => (e.SELECT_CATEGORY = "select-category", e.TOGGLE_CHECKBOX_SELECTION = "toggle-checkbox-selection", e.UNSELECT_CATEGORY = "unselect-category", e))(J || {});
-const Et = H({
+const Ot = /* @__PURE__ */ W(Et, [["render", Tt], ["__scopeId", "data-v-9a00de22"]]);
+var Z = /* @__PURE__ */ ((e) => (e.SELECT_CATEGORY = "select-category", e.TOGGLE_CHECKBOX_SELECTION = "toggle-checkbox-selection", e.UNSELECT_CATEGORY = "unselect-category", e))(Z || {});
+const It = j({
   name: "listbox-multi-select-options",
   components: {
     BentoCheckbox: Ce,
     BentoListboxOption: be,
     BentoTypography: ee,
-    ListboxMultiSelectCategory: Ct
+    ListboxMultiSelectCategory: Ot
   },
   props: {
     /**
@@ -703,46 +724,46 @@ const Et = H({
     staticCategories: { type: Boolean, default: !1 }
   },
   emits: [
-    J.TOGGLE_CHECKBOX_SELECTION,
-    J.SELECT_CATEGORY,
-    J.UNSELECT_CATEGORY
+    Z.TOGGLE_CHECKBOX_SELECTION,
+    Z.SELECT_CATEGORY,
+    Z.UNSELECT_CATEGORY
   ],
   setup(e, { emit: t }) {
-    const n = (a) => {
-      t(J.TOGGLE_CHECKBOX_SELECTION, a);
-    }, u = (a) => !!a.items, s = (a) => {
+    const n = (c) => {
+      t(Z.TOGGLE_CHECKBOX_SELECTION, c);
+    }, u = (c) => !!c.items, s = (c) => {
       const o = e.isMultiLevel && e.searching;
-      return a.description && (!e.isMultiLevel || o);
-    }, c = (a) => a.items ? !!a.items.find((o) => e.selectedItemsList.includes(o.value)) : e.selectedItemsList.includes(a.value), l = (a, o) => {
+      return c.description && (!e.isMultiLevel || o);
+    }, a = (c) => c.items ? !!c.items.find((o) => e.selectedItemsList.includes(o.value)) : e.selectedItemsList.includes(c.value), l = (c, o) => {
       if (u(o))
-        return t(a ? J.SELECT_CATEGORY : J.UNSELECT_CATEGORY, o);
+        return t(c ? Z.SELECT_CATEGORY : Z.UNSELECT_CATEGORY, o);
       n(o.value);
     };
     return {
       // Values
-      conditionalClasses: m(() => ({
+      conditionalClasses: v(() => ({
         "b-listbox-multi-select-options__static-category-option": e.staticCategories,
         "b-listbox-multi-select-options__category-option": e.categoryItems
       })),
       // Methods
-      isOptionSelected: c,
+      isOptionSelected: a,
       shouldShowDescription: s,
       toggleCheckboxSelection: n,
       selectSearch: l,
       // Enums
       BentoListboxEvent: d,
-      ListboxMultiSelectOptionsEvent: J
+      ListboxMultiSelectOptionsEvent: Z
     };
   }
 });
-const ht = { class: "b-listbox-multi-select__option-text" }, Lt = { class: "b-listbox-multi-select__option-text" };
-function Tt(e, t, n, u, s, c) {
-  const l = h("bento-checkbox"), r = h("bento-typography"), a = h("bento-listbox-option"), o = h("listbox-multi-select-options", !0), y = h("listbox-multi-select-category");
-  return g(), T("div", null, [
-    (g(!0), T(Z, null, z(e.items, (i) => (g(), T("div", {
+const At = { class: "b-listbox-multi-select__option-text" }, $t = { class: "b-listbox-multi-select__option-text" };
+function kt(e, t, n, u, s, a) {
+  const l = E("bento-checkbox"), r = E("bento-typography"), c = E("bento-listbox-option"), o = E("listbox-multi-select-options", !0), p = E("listbox-multi-select-category");
+  return m(), T("div", null, [
+    (m(!0), T(Q, null, z(e.items, (i) => (m(), T("div", {
       key: `selected-${i.value}`
     }, [
-      e.searching && e.isMultiLevel ? (g(), B(a, {
+      e.searching && e.isMultiLevel ? (m(), B(c, {
         key: 0,
         class: fe(["b-listbox-multi-select-options", e.conditionalClasses]),
         disabled: e.isOptionDisabled ? e.isOptionDisabled(i) : null
@@ -755,30 +776,30 @@ function Tt(e, t, n, u, s, c) {
             value: i.value,
             "onUpdate:modelValue": (b) => e.selectSearch(b, i)
           }, null, 8, ["model-value", "aria-label", "disabled", "value", "onUpdate:modelValue"]),
-          G(e.$slots, "default", F(K(i)), () => [
-            W("span", ht, [
+          G(e.$slots, "default", F(H(i)), () => [
+            q("span", At, [
               k(r, { el: "span" }, {
                 default: L(() => [
-                  U(V(i.label), 1)
+                  V(P(i.label), 1)
                 ]),
                 _: 2
               }, 1024),
-              e.shouldShowDescription(i) ? (g(), B(r, {
+              e.shouldShowDescription(i) ? (m(), B(r, {
                 key: 0,
                 class: "b-listbox-multi-select__option-description",
                 el: "span"
               }, {
                 default: L(() => [
-                  U(V(i.description), 1)
+                  V(P(i.description), 1)
                 ]),
                 _: 2
-              }, 1024)) : q("", !0)
+              }, 1024)) : K("", !0)
             ])
           ], !0)
         ]),
         _: 2
-      }, 1032, ["class", "disabled"])) : (g(), T(Z, { key: 1 }, [
-        i.items ? (g(), B(y, {
+      }, 1032, ["class", "disabled"])) : (m(), T(Q, { key: 1 }, [
+        i.items ? (m(), B(p, {
           key: 0,
           category: i,
           "static-categories": e.staticCategories,
@@ -800,7 +821,7 @@ function Tt(e, t, n, u, s, c) {
             }, null, 8, ["items", "is-option-disabled", "is-multi-level", "static-categories", "selected-items-list", "searching"])
           ]),
           _: 2
-        }, 1032, ["category", "static-categories", "is-option-disabled", "selected-items-list", "onSelectCategory", "onUnselectCategory"])) : (g(), B(a, {
+        }, 1032, ["category", "static-categories", "is-option-disabled", "selected-items-list", "onSelectCategory", "onUnselectCategory"])) : (m(), B(c, {
           key: 1,
           class: fe(["b-listbox-multi-select-options", e.conditionalClasses]),
           disabled: e.isOptionDisabled ? e.isOptionDisabled(i) : null
@@ -813,24 +834,24 @@ function Tt(e, t, n, u, s, c) {
               value: i.value,
               "onUpdate:modelValue": (b) => e.toggleCheckboxSelection(i)
             }, null, 8, ["model-value", "aria-label", "disabled", "value", "onUpdate:modelValue"]),
-            G(e.$slots, "default", F(K(i)), () => [
-              W("span", Lt, [
+            G(e.$slots, "default", F(H(i)), () => [
+              q("span", $t, [
                 k(r, { el: "span" }, {
                   default: L(() => [
-                    U(V(i.label), 1)
+                    V(P(i.label), 1)
                   ]),
                   _: 2
                 }, 1024),
-                e.shouldShowDescription(i) ? (g(), B(r, {
+                e.shouldShowDescription(i) ? (m(), B(r, {
                   key: 0,
                   class: "b-listbox-multi-select__option-description",
                   el: "span"
                 }, {
                   default: L(() => [
-                    U(V(i.description), 1)
+                    V(P(i.description), 1)
                   ]),
                   _: 2
-                }, 1024)) : q("", !0)
+                }, 1024)) : K("", !0)
               ])
             ], !0)
           ]),
@@ -840,14 +861,14 @@ function Tt(e, t, n, u, s, c) {
     ]))), 128))
   ]);
 }
-const Ot = /* @__PURE__ */ j(Et, [["render", Tt], ["__scopeId", "data-v-25938a72"]]), Be = {
+const Bt = /* @__PURE__ */ W(It, [["render", kt], ["__scopeId", "data-v-25938a72"]]), Re = {
   "en-US": {
     remove: "Remove"
   }
-}, It = { class: "b-listbox-multi-select-chips" }, At = {
-  i18n: { messages: Be }
-}, $t = /* @__PURE__ */ H({
-  ...At,
+}, Rt = { class: "b-listbox-multi-select-chips" }, Dt = {
+  i18n: { messages: Re }
+}, Nt = /* @__PURE__ */ j({
+  ...Dt,
   __name: "listbox-multi-select-chips",
   props: {
     /**
@@ -871,18 +892,18 @@ const Ot = /* @__PURE__ */ j(Et, [["render", Tt], ["__scopeId", "data-v-25938a72
   },
   emits: ["unselect-item", "unselect-category"],
   setup(e, { emit: t }) {
-    const { t: n } = de({ messages: Be }), u = (s) => s.items ? t("unselect-category", s) : t("unselect-item", s);
-    return (s, c) => (g(), T("div", It, [
-      (g(!0), T(Z, null, z(e.items, (l) => (g(), T("div", {
+    const { t: n } = de({ messages: Re }), u = (s) => s.items ? t("unselect-category", s) : t("unselect-item", s);
+    return (s, a) => (m(), T("div", Rt, [
+      (m(!0), T(Q, null, z(e.items, (l) => (m(), T("div", {
         key: `selected-${l.value}`
       }, [
-        k(re(Qe), {
+        k(re(Je), {
           class: "b-listbox-multi-select-chips__chip",
           disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null,
           onClick: (r) => u(l)
         }, {
           iconRight: L(() => [
-            k(re(Ze), {
+            k(re(Qe), {
               "svg-title": re(n)("remove")
             }, null, 8, ["svg-title"])
           ]),
@@ -893,7 +914,7 @@ const Ot = /* @__PURE__ */ j(Et, [["render", Tt], ["__scopeId", "data-v-25938a72
               class: "b-listbox-multi-select-chips__option-text"
             }, {
               default: L(() => [
-                U(V(l.label), 1)
+                V(P(l.label), 1)
               ]),
               _: 2
             }, 1024)
@@ -904,34 +925,34 @@ const Ot = /* @__PURE__ */ j(Et, [["render", Tt], ["__scopeId", "data-v-25938a72
     ]));
   }
 });
-const kt = /* @__PURE__ */ j($t, [["__scopeId", "data-v-7c5f8bdb"]]), he = {
+const Mt = /* @__PURE__ */ W(Nt, [["__scopeId", "data-v-7c5f8bdb"]]), Le = {
   "en-US": {
     allSelected: "All selected ({total})",
     numberOfTotalSelected: "{number} of {total} selected",
     numbersSelected: "{number} selected",
     selectAll: "Select all ({total})"
   }
-}, Bt = (e) => {
-  const t = m(() => {
+}, Pt = (e) => {
+  const t = v(() => {
     var u;
     return !!((u = e.value) != null && u.find(({ items: s }) => !!s));
-  }), n = m(() => {
+  }), n = v(() => {
     var u;
-    return t.value ? (u = e.value) == null ? void 0 : u.reduce((s, c) => (c.items ? s.push(...c.items.flat()) : s.push(c), s), []) : e.value;
+    return t.value ? (u = e.value) == null ? void 0 : u.reduce((s, a) => (a.items ? s.push(...a.items.flat()) : s.push(a), s), []) : e.value;
   });
   return {
     isMultiLevelSelect: t,
     flattenedItemsList: n
   };
-}, Rt = H({
-  i18n: { messages: he },
+}, wt = j({
+  i18n: { messages: Le },
   name: "bento-listbox-multi-select",
   components: {
     BentoCheckbox: Ce,
     BentoListboxOption: be,
     BentoTypography: ee,
-    ListboxMultiSelectOptions: Ot,
-    ListboxMultiSelectChips: kt
+    ListboxMultiSelectOptions: Bt,
+    ListboxMultiSelectChips: Mt
   },
   directives: { BentoKeyboardNavigationDirective: Se },
   props: {
@@ -970,8 +991,8 @@ const kt = /* @__PURE__ */ j($t, [["__scopeId", "data-v-7c5f8bdb"]]), he = {
      */
     lazyLoadType: {
       type: String,
-      default: Q.NONE,
-      validator: (e) => Object.values(Q).includes(e)
+      default: J.NONE,
+      validator: (e) => Object.values(J).includes(e)
     },
     /**
      * Flag that indicates that an external search it's being made
@@ -995,146 +1016,146 @@ const kt = /* @__PURE__ */ j($t, [["__scopeId", "data-v-7c5f8bdb"]]), he = {
   },
   emits: [d.SELECT],
   setup(e, { emit: t, slots: n }) {
-    const { t: u } = de({ messages: he }), s = N(null), c = N(null), l = N(null), r = m(
-      () => e.selectedValues.map(({ value: v }) => v)
-    ), { isMultiLevelSelect: a, flattenedItemsList: o } = Bt(ue(e, "items")), y = (v) => {
+    const { t: u } = de({ messages: Le }), s = N(null), a = N(null), l = N(null), r = v(
+      () => e.selectedValues.map(({ value: g }) => g)
+    ), { isMultiLevelSelect: c, flattenedItemsList: o } = Pt(ue(e, "items")), p = (g) => {
       var $;
-      const _ = e.isOptionDisabled(v), C = (($ = r.value) == null ? void 0 : $.includes(v.value)) || !1;
+      const _ = e.isOptionDisabled(g), C = (($ = r.value) == null ? void 0 : $.includes(g.value)) || !1;
       return { isDisabled: _, isPreSelected: C };
-    }, i = m(() => {
-      if (e.searching && a)
+    }, i = v(() => {
+      if (e.searching && c)
         return e.items;
-      const v = o.value.filter((_) => {
-        const { isDisabled: C, isPreSelected: $ } = y(_);
+      const g = o.value.filter((_) => {
+        const { isDisabled: C, isPreSelected: $ } = p(_);
         return C && $ || !C;
       });
       return e.selectedValues.forEach((_) => {
-        v.find((C) => C.value === _.value) || v.push(_);
-      }), v;
-    }), b = m(
+        g.find((C) => C.value === _.value) || g.push(_);
+      }), g;
+    }), b = v(
       () => {
-        var v;
-        return (v = i.value) == null ? void 0 : v.filter((_) => {
+        var g;
+        return (g = i.value) == null ? void 0 : g.filter((_) => {
           var C;
-          return _.items && a.value && e.searching ? _.items.filter(
-            (E) => (e.selectedValues ?? []).includes(E.value)
+          return _.items && c.value && e.searching ? _.items.filter(
+            (h) => (e.selectedValues ?? []).includes(h.value)
           ).length === _.items.length : (C = r.value) == null ? void 0 : C.includes(_.value);
         });
       }
-    ), f = () => a.value && !e.searching ? o.value.length : e.items.length, p = m(() => {
+    ), f = () => c.value && !e.searching ? o.value.length : e.items.length, y = v(() => {
       var $;
-      const v = i.value.length, _ = f(), C = (($ = b.value) == null ? void 0 : $.length) || 0;
-      return C === 0 ? u("selectAll", { total: v }) : C === _ ? u("allSelected", { total: _ }) : C <= _ ? u("numberOfTotalSelected", { number: C, total: _ }) : u("numbersSelected", { number: C });
-    }), O = (v) => {
+      const g = i.value.length, _ = f(), C = (($ = b.value) == null ? void 0 : $.length) || 0;
+      return C === 0 ? u("selectAll", { total: g }) : C === _ ? u("allSelected", { total: _ }) : C <= _ ? u("numberOfTotalSelected", { number: C, total: _ }) : u("numbersSelected", { number: C });
+    }), O = (g) => {
       const _ = ($) => {
-        const { isDisabled: E, isPreSelected: X } = y($);
-        return E && X || !E;
-      }, C = v.filter(_).filter(($) => !r.value.includes($.value));
+        const { isDisabled: h, isPreSelected: X } = p($);
+        return h && X || !h;
+      }, C = g.filter(_).filter(($) => !r.value.includes($.value));
       t(d.SELECT, [...e.selectedValues, ...C]);
-    }, P = (v) => {
-      const _ = (E) => {
-        const { isDisabled: X, isPreSelected: ze } = y(E);
-        return !(X && ze);
-      }, C = v.filter(_).map(({ value: E }) => E), $ = e.selectedValues.filter((E) => !(C != null && C.includes(E.value)));
+    }, w = (g) => {
+      const _ = (h) => {
+        const { isDisabled: X, isPreSelected: Fe } = p(h);
+        return !(X && Fe);
+      }, C = g.filter(_).map(({ value: h }) => h), $ = e.selectedValues.filter((h) => !(C != null && C.includes(h.value)));
       t(d.SELECT, $);
     }, I = () => {
       O(o.value);
     }, D = () => {
-      P(o.value);
-    }, { isAllSelected: R, isIndeterminate: S, toggleSelectAll: A } = $e(
+      w(o.value);
+    }, { isAllSelected: R, isIndeterminate: S, toggleSelectAll: A } = ke(
       b,
       i,
       I,
       D
-    ), w = (v) => {
-      O(v.items);
-    }, te = (v) => {
-      P(v.items);
-    }, me = (v, _) => {
+    ), U = (g) => {
+      O(g.items);
+    }, te = (g) => {
+      w(g.items);
+    }, me = (g, _) => {
       let C = !1;
-      const $ = e.selectedValues.filter(({ value: E }) => _.value === E ? (C = !0, !1) : !0);
-      C || $.push(_), t(v, $);
-    }, ce = m(() => {
-      if (!a.value)
+      const $ = e.selectedValues.filter(({ value: h }) => _.value === h ? (C = !0, !1) : !0);
+      C || $.push(_), t(g, $);
+    }, ce = v(() => {
+      if (!c.value)
         return e.selectedValues;
-      const v = (E) => r.value.includes(E.value), _ = (E) => !e.staticCategories && E.every((X) => v(X));
+      const g = (h) => r.value.includes(h.value), _ = (h) => !e.staticCategories && h.every((X) => g(X));
       return e.items.flatMap(
-        (E) => E.items && !_(E.items) ? E.items : E
-      ).filter((E) => E.items ? !0 : v(E));
-    }), ve = m(() => {
-      var C, $, E, X;
-      const v = ["automatic", "button"].includes(e.lazyLoadType), _ = ((C = e.selectedValues) == null ? void 0 : C.length) > 0 && (($ = b.value) == null ? void 0 : $.length) !== ((E = o.value) == null ? void 0 : E.length);
-      return v && e.hasMoreItems ? !!((X = e.selectedValues) != null && X.length) : _;
-    }), M = m(() => ["automatic", "button"].includes(e.lazyLoadType) ? !e.hasMoreItems : !0), oe = m(
+        (h) => h.items && !_(h.items) ? h.items : h
+      ).filter((h) => h.items ? !0 : g(h));
+    }), ve = v(() => {
+      var C, $, h, X;
+      const g = ["automatic", "button"].includes(e.lazyLoadType), _ = ((C = e.selectedValues) == null ? void 0 : C.length) > 0 && (($ = b.value) == null ? void 0 : $.length) !== ((h = o.value) == null ? void 0 : h.length);
+      return g && e.hasMoreItems ? !!((X = e.selectedValues) != null && X.length) : _;
+    }), M = v(() => ["automatic", "button"].includes(e.lazyLoadType) ? !e.hasMoreItems : !0), oe = v(
       () => s.value ? [s.value] : []
-    ), Re = m(
+    ), De = v(
       () => {
-        var v, _;
-        return (_ = (v = c.value) == null ? void 0 : v.$children) != null && _.length ? c.value.$children : [];
+        var g, _;
+        return (_ = (g = a.value) == null ? void 0 : g.$children) != null && _.length ? a.value.$children : [];
       }
-    ), De = m(
+    ), Ne = v(
       () => {
-        var v, _;
-        return (_ = (v = l.value) == null ? void 0 : v.$children) != null && _.length ? l.value.$children : [];
+        var g, _;
+        return (_ = (g = l.value) == null ? void 0 : g.$children) != null && _.length ? l.value.$children : [];
       }
-    ), Ne = m(() => ({ label: p, value: R })), Me = m(() => [
-      Ne,
+    ), Me = v(() => ({ label: y, value: R })), Pe = v(() => [
+      Me,
       ...ce.value,
       ...o.value
-    ]), Pe = (v) => {
+    ]), we = (g) => {
       [
         ...oe.value,
-        ...Re.value,
-        ...De.value
-      ][v].$el.focus();
-    }, { moveToNextElement: we, moveToPreviousElement: Ue, moveToFirstElement: Ve, moveToLastElement: xe } = ke(
+        ...De.value,
+        ...Ne.value
+      ][g].$el.focus();
+    }, { moveToNextElement: Ue, moveToPreviousElement: Ve, moveToFirstElement: xe, moveToLastElement: Ge } = Be(
       {
-        items: N(Me),
+        items: N(Pe),
         isOptionDisabled: e.isOptionDisabled
       },
-      Pe
-    ), Ge = {
-      [Y.ARROW_UP]: (v) => Ue(v),
-      [Y.ARROW_DOWN]: (v) => we(v),
-      [Y.HOME]: Ve,
-      [Y.END]: xe
+      we
+    ), ze = {
+      [Y.ARROW_UP]: (g) => Ve(g),
+      [Y.ARROW_DOWN]: (g) => Ue(g),
+      [Y.HOME]: xe,
+      [Y.END]: Ge
     };
     return {
       // Refs
       selectAllListboxItemsRef: s,
-      selectedListboxItemsRef: c,
+      selectedListboxItemsRef: a,
       listboxItemsRef: l,
       // Values
       isAllSelected: R,
       showSelectedItems: ve,
       isIndeterminate: S,
-      isMultiLevelSelect: a,
+      isMultiLevelSelect: c,
       flattenedItemsList: o,
       selectedItemsList: r,
-      selectAllCheckboxText: p,
+      selectAllCheckboxText: y,
       selectedOptions: ce,
       showSelectAllCheckbox: M,
       slots: n,
       // Enums
       BentoListboxEvent: d,
       // Methods
-      selectAllCategory: w,
+      selectAllCategory: U,
       toggleCheckboxSelection: me,
       toggleSelectAll: A,
       unselectAllCategory: te,
       // Events
-      listboxListeners: Ge
+      listboxListeners: ze
     };
   }
 });
-const Dt = (e) => (Ye("data-v-0ca61721"), e = e(), Ke(), e), Nt = {
+const Ut = (e) => (Ke("data-v-0ca61721"), e = e(), qe(), e), Vt = {
   key: 1,
   class: "b-listbox-multi-select__divider"
-}, Mt = { key: 2 }, Pt = /* @__PURE__ */ Dt(() => /* @__PURE__ */ W("hr", { class: "b-listbox-multi-select__divider" }, null, -1));
-function wt(e, t, n, u, s, c) {
-  const l = h("bento-checkbox"), r = h("bento-typography"), a = h("bento-listbox-option"), o = h("listbox-multi-select-chips"), y = h("listbox-multi-select-options"), i = _e("bento-keyboard-navigation-directive");
-  return ae((g(), T("div", x({ class: "b-listbox-multi-select" }, le(e.listboxListeners, !0)), [
-    e.showSelectAllCheckbox ? (g(), B(a, {
+}, xt = { key: 2 }, Gt = /* @__PURE__ */ Ut(() => /* @__PURE__ */ q("hr", { class: "b-listbox-multi-select__divider" }, null, -1));
+function zt(e, t, n, u, s, a) {
+  const l = E("bento-checkbox"), r = E("bento-typography"), c = E("bento-listbox-option"), o = E("listbox-multi-select-chips"), p = E("listbox-multi-select-options"), i = _e("bento-keyboard-navigation-directive");
+  return ae((m(), T("div", x({ class: "b-listbox-multi-select" }, le(e.listboxListeners, !0)), [
+    e.showSelectAllCheckbox ? (m(), B(c, {
       key: 0,
       ref: "selectAllListboxItemsRef",
       class: "b-listbox-multi-select__option"
@@ -1151,15 +1172,15 @@ function wt(e, t, n, u, s, c) {
           "aria-hidden": "true"
         }, {
           default: L(() => [
-            U(V(e.selectAllCheckboxText), 1)
+            V(P(e.selectAllCheckboxText), 1)
           ]),
           _: 1
         })
       ]),
       _: 1
-    }, 512)) : q("", !0),
-    e.showSelectAllCheckbox ? (g(), T("hr", Nt)) : q("", !0),
-    e.showSelectedItems ? (g(), T("div", Mt, [
+    }, 512)) : K("", !0),
+    e.showSelectAllCheckbox ? (m(), T("hr", Vt)) : K("", !0),
+    e.showSelectedItems ? (m(), T("div", xt, [
       k(o, {
         ref: "selectedListboxItemsRef",
         items: e.selectedOptions,
@@ -1167,9 +1188,9 @@ function wt(e, t, n, u, s, c) {
         onUnselectCategory: e.unselectAllCategory,
         onUnselectItem: t[0] || (t[0] = (b) => e.toggleCheckboxSelection(e.BentoListboxEvent.SELECT, b))
       }, null, 8, ["items", "is-option-disabled", "onUnselectCategory"]),
-      Pt
-    ])) : q("", !0),
-    k(y, x({
+      Gt
+    ])) : K("", !0),
+    k(p, x({
       ref: "listboxItemsRef",
       items: e.items,
       "is-option-disabled": e.isOptionDisabled,
@@ -1189,8 +1210,8 @@ function wt(e, t, n, u, s, c) {
     }), ie({ _: 2 }, [
       z(e.slots, (b, f) => ({
         name: f,
-        fn: L((p) => [
-          G(e.$slots, f, F(K(p)), void 0, !0)
+        fn: L((y) => [
+          G(e.$slots, f, F(H(y)), void 0, !0)
         ])
       }))
     ]), 1040, ["items", "is-option-disabled", "is-multi-level", "static-categories", "searching", "selected-items-list", "onSelectCategory", "onUnselectCategory"])
@@ -1198,23 +1219,23 @@ function wt(e, t, n, u, s, c) {
     [i]
   ]);
 }
-const Le = /* @__PURE__ */ j(Rt, [["render", wt], ["__scopeId", "data-v-0ca61721"]]), Te = {
+const Te = /* @__PURE__ */ W(wt, [["render", zt], ["__scopeId", "data-v-0ca61721"]]), Oe = {
   "en-US": {
     showMore: "Show more",
     loading: "Loading"
   }
-}, Ut = 36, Vt = H({
+}, Ft = 36, Yt = j({
   name: "bento-listbox",
   components: {
-    BentoEmptyState: We,
-    BentoListboxSingleSelect: ft,
-    BentoListboxMultiSelect: Le,
+    BentoEmptyState: He,
+    BentoListboxSingleSelect: Ct,
+    BentoListboxMultiSelect: Te,
     BentoTypography: ee,
-    BentoLoadingIndicator: qe,
+    BentoLoadingIndicator: We,
     BentoLoadingButton: et
   },
   directives: { BentoKeyboardNavigationDirective: Se },
-  i18n: { messages: Te },
+  i18n: { messages: Oe },
   props: {
     /**
      * Defines a string value that labels an interactive element.
@@ -1270,8 +1291,8 @@ const Le = /* @__PURE__ */ j(Rt, [["render", wt], ["__scopeId", "data-v-0ca61721
      */
     lazyLoadType: {
       type: String,
-      default: Q.NONE,
-      validator: (e) => Object.values(Q).includes(e)
+      default: J.NONE,
+      validator: (e) => Object.values(J).includes(e)
     },
     /**
      * If enabled, the user will be able to select multiple items.
@@ -1291,7 +1312,7 @@ const Le = /* @__PURE__ */ j(Rt, [["render", wt], ["__scopeId", "data-v-0ca61721
      *
      * If enabled, hides the "Select all" checkbox in "multiple" mode.
      */
-    searching: Le.props.searching,
+    searching: Te.props.searching,
     /**
      * The `input` value.
      * Providing an empty string or empty array will select no options.
@@ -1319,30 +1340,30 @@ const Le = /* @__PURE__ */ j(Rt, [["render", wt], ["__scopeId", "data-v-0ca61721
     d.TAB
   ],
   setup(e, { emit: t, slots: n }) {
-    const u = N([]), s = ue(e, "items"), { t: c } = de({ messages: Te }), l = m(() => e.lazyLoadType !== Q.AUTOMATIC), r = m(() => e.lazyLoadType === Q.AUTOMATIC), a = () => {
+    const u = N([]), s = ue(e, "items"), { t: a } = de({ messages: Oe }), l = v(() => e.lazyLoadType !== J.AUTOMATIC), r = v(() => e.lazyLoadType === J.AUTOMATIC), c = () => {
       var M;
-      return typeof (e == null ? void 0 : e.virtualScroll) == "object" && ((M = e == null ? void 0 : e.virtualScroll) != null && M.itemHeight) ? e.virtualScroll.itemHeight : Ut;
+      return typeof (e == null ? void 0 : e.virtualScroll) == "object" && ((M = e == null ? void 0 : e.virtualScroll) != null && M.itemHeight) ? e.virtualScroll.itemHeight : Ft;
     }, {
       containerRef: o,
-      containerProps: y,
+      containerProps: p,
       onScroll: i,
       list: b,
       wrapperProps: f
     } = st(s, {
-      itemHeight: a(),
+      itemHeight: c(),
       // Disable virtual scrolling if not enabled or if lazy loading is enabled or if multi-select
       disabled: (e == null ? void 0 : e.multiple) || (e == null ? void 0 : e.virtualScroll) === !1 || (e == null ? void 0 : e.lazyLoadType) !== "none"
-    }), p = m(
+    }), y = v(
       () => l.value ? "true" : void 0
-    ), O = m(
+    ), O = v(
       () => l.value && e.loading ? "true" : "false"
-    ), P = m(
+    ), w = v(
       () => l.value ? "polite" : void 0
     ), I = (M) => (oe) => {
       t(M, oe);
     }, D = () => {
       t(d.SHOW_MORE);
-    }, R = He(() => {
+    }, R = je(() => {
       const M = o.value;
       if (!M)
         return;
@@ -1350,14 +1371,14 @@ const Le = /* @__PURE__ */ j(Rt, [["render", wt], ["__scopeId", "data-v-0ca61721
       e.hasMoreItems && oe && !e.loading && D();
     }), S = () => {
       r.value ? R() : i();
-    }, A = m(() => {
+    }, A = v(() => {
       var M;
       return e.searching && ((M = e.items) == null ? void 0 : M.length) === 0;
-    }), w = m(
-      () => e.lazyLoadType === Q.BUTTON && e.hasMoreItems
-    ), te = m(
-      () => e.loading ? Ee.LOADING : Ee.START
-    ), me = m(() => e.loading ? c("loading") : c("showMore")), ce = m(() => ({
+    }), U = v(
+      () => e.lazyLoadType === J.BUTTON && e.hasMoreItems
+    ), te = v(
+      () => e.loading ? he.LOADING : he.START
+    ), me = v(() => e.loading ? a("loading") : a("showMore")), ce = v(() => ({
       ...e.emptyState,
       variant: "condensed"
     })), ve = {
@@ -1371,16 +1392,16 @@ const Le = /* @__PURE__ */ j(Rt, [["render", wt], ["__scopeId", "data-v-0ca61721
       listboxRef: o,
       listboxItemRef: u,
       // a11y
-      ariaAtomic: p,
+      ariaAtomic: y,
       ariaBusy: O,
-      ariaLive: P,
+      ariaLive: w,
       // Values
-      containerProps: y,
+      containerProps: p,
       isSearchResultEmpty: A,
       limitedEmptyStateProps: ce,
       loadingButtonState: te,
       slots: n,
-      shouldDisplayShowMoreButton: w,
+      shouldDisplayShowMoreButton: U,
       showMoreButtonText: me,
       virtualisedItems: b,
       wrapperProps: f,
@@ -1395,19 +1416,19 @@ const Le = /* @__PURE__ */ j(Rt, [["render", wt], ["__scopeId", "data-v-0ca61721
     };
   }
 });
-const xt = ["id", "aria-busy", "aria-atomic", "aria-label", "aria-live"], Gt = {
+const Kt = ["id", "aria-busy", "aria-atomic", "aria-label", "aria-live"], qt = {
   key: 0,
   class: "b-listbox__empty-search-message"
-}, zt = {
+}, Wt = {
   key: 2,
   class: "b-listbox__lazy-load"
-}, Ft = {
+}, Ht = {
   key: 3,
   class: "b-listbox__lazy-load"
 };
-function Yt(e, t, n, u, s, c) {
-  const l = h("bento-empty-state"), r = h("bento-typography"), a = h("bento-listbox-multi-select"), o = h("bento-listbox-single-select"), y = h("bento-loading-button"), i = h("bento-loading-indicator"), b = _e("bento-keyboard-navigation-directive");
-  return ae((g(), T("div", x({ id: e.id }, e.containerProps, {
+function jt(e, t, n, u, s, a) {
+  const l = E("bento-empty-state"), r = E("bento-typography"), c = E("bento-listbox-multi-select"), o = E("bento-listbox-single-select"), p = E("bento-loading-button"), i = E("bento-loading-indicator"), b = _e("bento-keyboard-navigation-directive");
+  return ae((m(), T("div", x({ id: e.id }, e.containerProps, {
     class: "b-listbox",
     role: "listbox",
     tabindex: "-1",
@@ -1417,19 +1438,19 @@ function Yt(e, t, n, u, s, c) {
     "aria-live": e.ariaLive,
     onScroll: t[0] || (t[0] = (...f) => e.onListboxContainerScroll && e.onListboxContainerScroll(...f))
   }), [
-    W("div", F(K(e.wrapperProps)), [
-      e.isSearchResultEmpty ? (g(), T("div", Gt, [
-        e.emptyState ? (g(), B(l, F(x({ key: 0 }, e.limitedEmptyStateProps)), null, 16)) : (g(), B(r, {
+    q("div", F(H(e.wrapperProps)), [
+      e.isSearchResultEmpty ? (m(), T("div", qt, [
+        e.emptyState ? (m(), B(l, F(x({ key: 0 }, e.limitedEmptyStateProps)), null, 16)) : (m(), B(r, {
           key: 1,
           el: "span"
         }, {
           default: L(() => [
-            U(V(e.noResultsMessage), 1)
+            V(P(e.noResultsMessage), 1)
           ]),
           _: 1
         }))
-      ])) : (g(), T(Z, { key: 1 }, [
-        e.multiple ? (g(), B(a, x({
+      ])) : (m(), T(Q, { key: 1 }, [
+        e.multiple ? (m(), B(c, x({
           key: 0,
           ref: "listboxItemRef",
           "has-more-items": e.hasMoreItems,
@@ -1440,13 +1461,13 @@ function Yt(e, t, n, u, s, c) {
           searching: e.searching,
           "is-option-disabled": e.isOptionDisabled
         }, le(e.listboxListeners)), ie({ _: 2 }, [
-          z(e.slots, (f, p) => ({
-            name: p,
+          z(e.slots, (f, y) => ({
+            name: y,
             fn: L((O) => [
-              G(e.$slots, p, F(K(O)), void 0, !0)
+              G(e.$slots, y, F(H(O)), void 0, !0)
             ])
           }))
-        ]), 1040, ["has-more-items", "items", "lazy-load-type", "static-categories", "selected-values", "searching", "is-option-disabled"])) : (g(), B(o, x({
+        ]), 1040, ["has-more-items", "items", "lazy-load-type", "static-categories", "selected-values", "searching", "is-option-disabled"])) : (m(), B(o, x({
           key: 1,
           ref: "listboxItemRef",
           items: e.virtualisedItems,
@@ -1454,68 +1475,68 @@ function Yt(e, t, n, u, s, c) {
           "static-categories": e.staticCategories,
           "is-option-disabled": e.isOptionDisabled
         }, le(e.listboxListeners)), ie({ _: 2 }, [
-          z(e.slots, (f, p) => ({
-            name: p,
+          z(e.slots, (f, y) => ({
+            name: y,
             fn: L((O) => [
-              G(e.$slots, p, F(K(O)), void 0, !0)
+              G(e.$slots, y, F(H(O)), void 0, !0)
             ])
           }))
         ]), 1040, ["items", "selected-value", "static-categories", "is-option-disabled"])),
-        e.shouldDisplayShowMoreButton ? (g(), T("div", zt, [
-          k(y, {
+        e.shouldDisplayShowMoreButton ? (m(), T("div", Wt, [
+          k(p, {
             state: e.loadingButtonState,
             variant: "secondary",
             onClickCapture: e.emitShowMore
           }, {
             default: L(() => [
-              U(V(e.showMoreButtonText), 1)
+              V(P(e.showMoreButtonText), 1)
             ]),
             _: 1
           }, 8, ["state", "onClickCapture"])
-        ])) : e.loading ? (g(), T("div", Ft, [
+        ])) : e.loading ? (m(), T("div", Ht, [
           k(i)
-        ])) : q("", !0)
+        ])) : K("", !0)
       ], 64))
     ], 16)
-  ], 16, xt)), [
+  ], 16, Kt)), [
     [b]
   ]);
 }
-const is = /* @__PURE__ */ j(Vt, [["render", Yt], ["__scopeId", "data-v-f5e00d2e"]]), pe = (e, t) => {
+const us = /* @__PURE__ */ W(Yt, [["render", jt], ["__scopeId", "data-v-f5e00d2e"]]), ye = (e, t) => {
   for (const n of e) {
     if (n.value === t)
       return n.label;
     if (n.items)
-      return pe(n.items, t);
+      return ye(n.items, t);
   }
   return null;
-}, as = (e, t, n) => {
-  const u = N([]), s = N(), c = (a) => {
-    s.value = n.value ? a.map(({ value: o }) => o) : a[0].value;
-  }, l = (a) => {
-    u.value = a, c(a);
+}, ds = (e, t, n) => {
+  const u = N([]), s = N(), a = (c) => {
+    s.value = n.value ? c.map(({ value: o }) => o) : c[0].value;
+  }, l = (c) => {
+    u.value = c, a(c);
   }, r = () => {
     u.value = [], s.value = null;
   };
-  return Ie(
+  return Ae(
     () => t.value,
     () => {
       if (!t.value) {
         r();
         return;
       }
-      const a = !Array.isArray(t.value), o = [...u.value];
+      const c = !Array.isArray(t.value), o = [...u.value];
       r();
-      const y = (i) => {
-        let b = pe(e.value, i);
-        b || (b = pe(o, i)), b || (b = i.toString()), u.value.push({ value: i, label: b });
+      const p = (i) => {
+        let b = ye(e.value, i);
+        b || (b = ye(o, i)), b || (b = i.toString()), u.value.push({ value: i, label: b });
       };
-      if (a) {
+      if (c) {
         const i = t.value;
-        y(i), c(u.value);
+        p(i), a(u.value);
         return;
       }
-      t.value.forEach(y), c(u.value);
+      t.value.forEach(p), a(u.value);
     },
     { immediate: !0 }
   ), {
@@ -1528,10 +1549,10 @@ const is = /* @__PURE__ */ j(Vt, [["render", Yt], ["__scopeId", "data-v-f5e00d2e
   };
 };
 export {
-  is as B,
-  as as a,
-  Q as b,
+  us as B,
+  ds as a,
+  J as b,
   d as c,
-  Bt as u
+  Pt as u
 };
-//# sourceMappingURL=use-cached-selected-values.852aeafe.js.map
+//# sourceMappingURL=use-cached-selected-values.3c312296.js.map