@adyen/bento-vue3 1.64.0 → 1.65.0

package/dist/chunks/{use-cached-selected-values.CatIU1_1.js → use-cached-selected-values.CEwKqYIe.js}

@@ -1,88 +1,88 @@
-import { computed as p, ref as B, onMounted as Ze, onUnmounted as Qe, watch as ne, defineComponent as J, resolveComponent as L, createElementBlock as O, openBlock as d, createVNode as P, createElementVNode as z, withCtx as I, createTextVNode as K, toDisplayString as F, renderSlot as W, mergeProps as Y, withKeys as Ce, createCommentVNode as X, createBlock as R, withModifiers as ae, normalizeProps as ie, guardReactiveProps as be, withDirectives as re, vShow as Pe, nextTick as Me, resolveDirective as xe, toHandlers as te, Fragment as se, renderList as q, createSlots as me, normalizeClass as ve, unref as N, toRef as _e, useSlots as et, useAttrs as tt } from "vue";
+import { computed as p, ref as B, onMounted as et, onUnmounted as tt, watch as ne, defineComponent as Z, resolveComponent as k, createElementBlock as O, openBlock as d, createVNode as x, createElementVNode as z, withCtx as I, createTextVNode as K, toDisplayString as F, renderSlot as W, mergeProps as w, withKeys as Ce, createCommentVNode as J, createBlock as R, withModifiers as ae, normalizeProps as ie, guardReactiveProps as ue, withDirectives as re, vShow as Pe, nextTick as Me, resolveDirective as xe, toHandlers as se, Fragment as le, renderList as H, createSlots as be, normalizeClass as me, unref as M, toRef as _e, useSlots as st, useAttrs as lt } from "vue";
 import { B as V, a as pe } from "./keyboard-navigation.CqgGzfZQ.js";
 import "./events.FNmSWp_P.js";
 import { B as ce } from "./typography.DN5eC5ch.js";
-import { B as st } from "./loading-indicator.DEepb9Wl.js";
-import { B as lt } from "./empty-state.D7llINgF.js";
+import { B as ot } from "./loading-indicator.DEepb9Wl.js";
+import { B as it } from "./empty-state.D7llINgF.js";
 import { u as Oe } from "./i18n.B6g5VX0q.js";
-import { d as ot } from "./debounce.DUTu11PS.js";
-import { B as it } from "./chip.CneNX2_j.js";
-import { _ as H } from "./_plugin-vue_export-helper.CHgC5LLL.js";
-import { C as fe, N as nt } from "./minus-small.DYIyF5XW.js";
-import { C as at } from "./checkmark-small.x-gmK2Dt.js";
-import { C as rt } from "./chevron-down.DCQ6ZLaq.js";
-import { C as ct } from "./chevron-up.kfuLRpZb.js";
-import { d as dt, e as De } from "./button-actions.D1pXI1AJ.js";
+import { d as nt } from "./debounce.DUTu11PS.js";
+import { B as at } from "./chip.CneNX2_j.js";
+import { _ as j } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import { C as fe, N as rt } from "./minus-small.DYIyF5XW.js";
+import { C as ct } from "./checkmark-small.x-gmK2Dt.js";
+import { C as dt } from "./chevron-down.DCQ6ZLaq.js";
+import { C as ut } from "./chevron-up.kfuLRpZb.js";
+import { d as bt, e as De } from "./button-actions.D1pXI1AJ.js";
 /* empty css              */
-import { o as ut } from "./resize.Bqks3WUm.js";
+import { o as mt } from "./resize.Bqks3WUm.js";
 import "../assets/use-cached-selected-values.css";
-const Ge = (e, t, s, o) => {
-  const n = p(
+const Ge = (e, t, n, s) => {
+  const a = p(
     () => {
-      var g, S;
-      return !!((g = e.value) != null && g.length) && ((S = e.value) == null ? void 0 : S.length) === t.value.length;
+      var m, h;
+      return !!((m = e.value) != null && m.length) && ((h = e.value) == null ? void 0 : h.length) === t.value.length;
     }
-  ), a = p(() => {
-    var g;
-    return e.value == null || e.value.length === 0 ? !1 : ((g = e.value) == null ? void 0 : g.length) !== t.value.length;
+  ), i = p(() => {
+    var m;
+    return e.value == null || e.value.length === 0 ? !1 : ((m = e.value) == null ? void 0 : m.length) !== t.value.length;
   });
   return {
-    isAllSelected: n,
-    isIndeterminate: a,
-    toggleSelectAll: (g) => {
-      g ? s() : o();
+    isAllSelected: a,
+    isIndeterminate: i,
+    toggleSelectAll: (m) => {
+      m ? n() : s();
     }
   };
 };
-function bt(e, { disabled: t, itemHeight: s, overscan: o = 5, prefixHeight: n }) {
-  const a = B(null), r = B([]), g = B(0), S = B(0), i = B(0);
-  let c;
-  const l = p(() => {
-    const A = typeof s == "number" ? e.value.length * s : e.value.reduce(($, k, h) => $ + s(h), 0), x = typeof s == "number" ? g.value * s : e.value.slice(0, g.value).reduce(($, k, h) => $ + s(h), 0);
+function vt(e, { disabled: t, itemHeight: n, overscan: s = 5, prefixHeight: a }) {
+  const i = B(null), c = B([]), m = B(0), h = B(0), l = B(0);
+  let r;
+  const o = p(() => {
+    const A = typeof n == "number" ? e.value.length * n : e.value.reduce((L, $, C) => L + n(C), 0), P = typeof n == "number" ? m.value * n : e.value.slice(0, m.value).reduce((L, $, C) => L + n(C), 0);
     return {
       style: {
-        marginTop: `${x}px`,
-        height: `${A - x}px`
+        marginTop: `${P}px`,
+        height: `${A - P}px`
       }
     };
-  }), m = () => {
-    const A = (n == null ? void 0 : n.value) ?? 0, x = Math.max(a.value.scrollTop - A, 0);
-    if (typeof s == "number")
-      return Math.floor(x / s);
-    let $ = 0, k = 0;
-    for (let h = 0; h < e.value.length; h += 1) {
-      const C = s(h);
-      if ($ += C, $ >= x) {
-        k = h;
+  }), y = () => {
+    const A = (a == null ? void 0 : a.value) ?? 0, P = Math.max(i.value.scrollTop - A, 0);
+    if (typeof n == "number")
+      return Math.floor(P / n);
+    let L = 0, $ = 0;
+    for (let C = 0; C < e.value.length; C += 1) {
+      const S = n(C);
+      if (L += S, L >= P) {
+        $ = C;
         break;
       }
     }
-    return k;
-  }, y = () => {
-    if (i.value = a.value.clientHeight, typeof s == "number")
-      return Math.ceil(i.value / s);
-    const A = g.value ?? 0;
-    let x = 0, $ = 0;
-    for (let k = A; k < e.value.length; k += 1) {
-      const h = s(k);
-      if (x += h, $ = k, x > i.value)
+    return $;
+  }, g = () => {
+    if (l.value = i.value.clientHeight, typeof n == "number")
+      return Math.ceil(l.value / n);
+    const A = m.value ?? 0;
+    let P = 0, L = 0;
+    for (let $ = A; $ < e.value.length; $ += 1) {
+      const C = n($);
+      if (P += C, L = $, P > l.value)
         break;
     }
-    return $ - A;
+    return L - A;
   }, T = () => {
-    if (a.value) {
-      const A = y();
-      g.value = m(), S.value = Math.min(g.value + A + o, e.value.length), r.value = e.value.slice(g.value, S.value);
+    if (i.value) {
+      const A = g();
+      m.value = y(), h.value = Math.min(m.value + A + s, e.value.length), c.value = e.value.slice(m.value, h.value);
     }
-  }, M = () => {
+  }, N = () => {
     T();
   };
-  t || (Ze(() => {
-    a.value && (i.value = a.value.clientHeight, c = ut(a.value, ({ clientHeight: A }) => {
-      i.value = A, T();
+  t || (et(() => {
+    i.value && (l.value = i.value.clientHeight, r = mt(i.value, ({ clientHeight: A }) => {
+      l.value = A, T();
     }), T());
-  }), Qe(() => {
-    c == null || c.disconnect();
+  }), tt(() => {
+    r == null || r.disconnect();
   }), ne(
     () => e.value,
     () => {
@@ -90,26 +90,26 @@ function bt(e, { disabled: t, itemHeight: s, overscan: o = 5, prefixHeight: n })
     }
   ));
   const D = {
-    ref: a,
+    ref: i,
     style: { overflowY: "auto" }
   };
   return t ? {
-    containerRef: a,
+    containerRef: i,
     containerProps: D,
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     onScroll: () => {
     },
     list: e
   } : {
-    containerRef: a,
+    containerRef: i,
     containerProps: D,
-    onScroll: M,
-    list: r,
-    wrapperProps: l
+    onScroll: N,
+    list: c,
+    wrapperProps: o
   };
 }
 var v = /* @__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))(v || {}), oe = /* @__PURE__ */ ((e) => (e.AUTOMATIC = "automatic", e.BUTTON = "button", e.NONE = "none", e))(oe || {});
-const mt = J({
+const ft = Z({
   name: "bento-listbox-static-category",
   components: {
     BentoTypography: ce
@@ -123,11 +123,11 @@ const mt = J({
       required: !0
     }
   }
-}), vt = { class: "b-listbox-single-select-category" };
-function ft(e, t, s, o, n, a) {
-  const r = L("bento-typography");
-  return d(), O("div", vt, [
-    P(r, {
+}), pt = { class: "b-listbox-single-select-category" };
+function gt(e, t, n, s, a, i) {
+  const c = k("bento-typography");
+  return d(), O("div", pt, [
+    x(c, {
       variant: "caption",
       el: "span",
       class: "b-listbox-single-select-category__label-text"
@@ -142,7 +142,7 @@ function ft(e, t, s, o, n, a) {
     ])
   ]);
 }
-const pt = /* @__PURE__ */ H(mt, [["render", ft], ["__scopeId", "data-v-a90eff17"]]), gt = J({
+const yt = /* @__PURE__ */ j(ft, [["render", gt], ["__scopeId", "data-v-a90eff17"]]), St = Z({
   name: "bento-listbox-option",
   props: {
     /**
@@ -156,7 +156,7 @@ const pt = /* @__PURE__ */ H(mt, [["render", ft], ["__scopeId", "data-v-a90eff17
   },
   emits: [v.CLICK, v.ENTER, v.SPACE, v.TAB],
   setup(e, { emit: t }) {
-    const s = p(() => ({
+    const n = p(() => ({
       "b-listbox-option--disabled": e.disabled,
       "b-listbox-option--selected": e.selected
     }));
@@ -165,60 +165,60 @@ const pt = /* @__PURE__ */ H(mt, [["render", ft], ["__scopeId", "data-v-a90eff17
       BentoKeyboardNavigationKeyDownEvent: V,
       BentoListboxEvent: v,
       // Values
-      conditionalClasses: s,
+      conditionalClasses: n,
       // Events
-      onClick: (a) => {
-        t(v.CLICK, a);
+      onClick: (i) => {
+        t(v.CLICK, i);
       },
-      onOptionSelected: (a, r) => {
-        t(a, r);
+      onOptionSelected: (i, c) => {
+        t(i, c);
       }
     };
   }
 });
-function yt(e, t, s, o, n, a) {
-  return d(), O("div", Y({
+function ht(e, t, n, s, a, i) {
+  return d(), O("div", w({
     class: ["b-listbox-option", e.conditionalClasses],
     role: "option"
   }, e.$attrs, {
-    onClick: t[0] || (t[0] = (...r) => e.onClick && e.onClick(...r)),
+    onClick: t[0] || (t[0] = (...c) => e.onClick && e.onClick(...c)),
     onKeydown: [
-      t[1] || (t[1] = Ce((r) => e.onOptionSelected(e.BentoListboxEvent.ENTER, r), ["enter"])),
-      t[2] || (t[2] = Ce((r) => e.onOptionSelected(e.BentoListboxEvent.SPACE, r), ["space"])),
-      t[3] || (t[3] = Ce((r) => e.onOptionSelected(e.BentoListboxEvent.TAB, r), ["tab"]))
+      t[1] || (t[1] = Ce((c) => e.onOptionSelected(e.BentoListboxEvent.ENTER, c), ["enter"])),
+      t[2] || (t[2] = Ce((c) => e.onOptionSelected(e.BentoListboxEvent.SPACE, c), ["space"])),
+      t[3] || (t[3] = Ce((c) => e.onOptionSelected(e.BentoListboxEvent.TAB, c), ["tab"]))
     ]
   }), [
     W(e.$slots, "default", {}, void 0, !0)
   ], 16);
 }
-const ge = /* @__PURE__ */ H(gt, [["render", yt], ["__scopeId", "data-v-b7af43a6"]]);
+const ge = /* @__PURE__ */ j(St, [["render", ht], ["__scopeId", "data-v-b7af43a6"]]);
 let Be = 0;
-const St = {
+const Ct = {
   beforeCreate() {
     this.uuid = Be.toString(), Be += 1;
   }
-}, ht = { key: 0 };
-function Ct(e, t, s, o, n, a) {
-  return d(), O("svg", Y({ role: "img" }, e.$attrs, {
+}, Et = { key: 0 };
+function _t(e, t, n, s, a, i) {
+  return d(), O("svg", w({ 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"] ? (d(), O("title", ht, F(e.$attrs["svg-title"]), 1)) : X("", !0),
+    e.$attrs["svg-title"] ? (d(), O("title", Et, F(e.$attrs["svg-title"]), 1)) : J("", !0),
     t[0] || (t[0] = z("path", {
       fill: "#001222",
       d: "M15.0608 4.00011L14.0001 2.93945L6.00011 10.9395L2.00011 6.93945L0.939453 8.00011L6.00011 13.0608L15.0608 4.00011Z"
     }, null, -1))
   ], 16);
 }
-const Et = /* @__PURE__ */ H(St, [["render", Ct]]), _t = J({
+const Ot = /* @__PURE__ */ j(Ct, [["render", _t]]), Tt = Z({
   name: "bento-listbox-single-select-option",
   components: {
     BentoListboxOption: ge,
     BentoTypography: ce,
-    CheckmarkIcon: Et
+    CheckmarkIcon: Ot
   },
   props: {
     /**
@@ -240,45 +240,45 @@ const Et = /* @__PURE__ */ H(St, [["render", Ct]]), _t = J({
   },
   emits: [v.ENTER, v.SELECT, v.SPACE, v.TAB],
   setup(e, { emit: t }) {
-    const s = (r) => {
-      e.disabled || t(r, e.option);
-    }, o = p(() => e.disabled ? !0 : null), n = p(() => e.selected ? !0 : null), a = p(() => e.disabled ? -1 : 0);
+    const n = (c) => {
+      e.disabled || t(c, e.option);
+    }, s = p(() => e.disabled ? !0 : null), a = p(() => e.selected ? !0 : null), i = p(() => e.disabled ? -1 : 0);
     return {
       // Values
-      ariaDisabled: o,
-      ariaSelected: n,
-      tabIndex: a,
+      ariaDisabled: s,
+      ariaSelected: a,
+      tabIndex: i,
       // Enums
       BentoListboxEvent: v,
       // Events
-      onOptionSelected: s
+      onOptionSelected: n
     };
   }
-}), Ot = { class: "b-listbox-single-select-option__text" }, Tt = { class: "b-listbox-single-select-option__check-icon" };
-function It(e, t, s, o, n, a) {
-  const r = L("bento-typography"), g = L("checkmark-icon"), S = L("bento-listbox-option");
-  return d(), R(S, {
+}), It = { class: "b-listbox-single-select-option__text" }, At = { class: "b-listbox-single-select-option__check-icon" };
+function kt(e, t, n, s, a, i) {
+  const c = k("bento-typography"), m = k("checkmark-icon"), h = k("bento-listbox-option");
+  return d(), R(h, {
     class: "b-listbox-single-select-option",
     disabled: e.disabled,
     selected: e.selected,
     "aria-selected": e.ariaSelected,
     "aria-disabled": e.ariaDisabled,
     tabindex: e.tabIndex,
-    onClick: t[0] || (t[0] = (i) => e.onOptionSelected(e.BentoListboxEvent.SELECT)),
-    onEnterPressed: t[1] || (t[1] = (i) => e.onOptionSelected(e.BentoListboxEvent.ENTER)),
-    onSpacePressed: t[2] || (t[2] = ae((i) => e.onOptionSelected(e.BentoListboxEvent.SPACE), ["prevent"])),
-    onTabPressed: t[3] || (t[3] = (i) => e.onOptionSelected(e.BentoListboxEvent.TAB))
+    onClick: t[0] || (t[0] = (l) => e.onOptionSelected(e.BentoListboxEvent.SELECT)),
+    onEnterPressed: t[1] || (t[1] = (l) => e.onOptionSelected(e.BentoListboxEvent.ENTER)),
+    onSpacePressed: t[2] || (t[2] = ae((l) => e.onOptionSelected(e.BentoListboxEvent.SPACE), ["prevent"])),
+    onTabPressed: t[3] || (t[3] = (l) => e.onOptionSelected(e.BentoListboxEvent.TAB))
   }, {
     default: I(() => [
-      W(e.$slots, "default", ie(be(e.option)), () => [
-        z("span", Ot, [
-          P(r, { el: "span" }, {
+      W(e.$slots, "default", ie(ue(e.option)), () => [
+        z("span", It, [
+          x(c, { el: "span" }, {
             default: I(() => [
               K(F(e.option.label), 1)
             ]),
             _: 1
           }),
-          e.option.description ? (d(), R(r, {
+          e.option.description ? (d(), R(c, {
             key: 0,
             class: "b-listbox-single-select-option__description",
             el: "span"
@@ -287,11 +287,11 @@ function It(e, t, s, o, n, a) {
               K(F(e.option.description), 1)
             ]),
             _: 1
-          })) : X("", !0)
+          })) : J("", !0)
         ])
       ], !0),
-      z("span", Tt, [
-        re(P(g, { "svg-title": "selected" }, null, 512), [
+      z("span", At, [
+        re(x(m, { "svg-title": "selected" }, null, 512), [
           [Pe, e.selected]
         ])
       ])
@@ -299,58 +299,58 @@ function It(e, t, s, o, n, a) {
     _: 3
   }, 8, ["disabled", "selected", "aria-selected", "aria-disabled", "tabindex"]);
 }
-const At = /* @__PURE__ */ H(_t, [["render", It], ["__scopeId", "data-v-226f4c84"]]), we = ({ items: e }, t) => {
-  const s = p(() => e.value.length - 1), o = B(0), n = (m) => {
-    switch (m) {
+const Lt = /* @__PURE__ */ j(Tt, [["render", kt], ["__scopeId", "data-v-226f4c84"]]), we = ({ items: e }, t) => {
+  const n = p(() => e.value.length - 1), s = B(0), a = (y) => {
+    switch (y) {
       case "increase":
-        o.value += 1;
+        s.value += 1;
         break;
       case "decrease":
-        o.value -= 1;
+        s.value -= 1;
         break;
     }
-  }, a = ({ edgeCaseItem: m }, y) => {
-    o.value !== m && (n(y), t(o.value));
-  }, r = (m) => {
-    l(m), a(
+  }, i = ({ edgeCaseItem: y }, g) => {
+    s.value !== y && (a(g), t(s.value));
+  }, c = (y) => {
+    o(y), i(
       {
-        edgeCaseItem: s.value
+        edgeCaseItem: n.value
       },
       "increase"
       /* INCREASE */
     );
-  }, g = (m) => {
-    l(m), a(
+  }, m = (y) => {
+    o(y), i(
       {
         edgeCaseItem: 0
       },
       "decrease"
       /* DECREASE */
     );
-  }, S = () => {
-    o.value = 0, t(o.value);
-  }, i = () => {
-    o.value = s.value, t(o.value);
-  }, c = (m) => {
-    o.value = m;
-  }, l = (m) => {
-    var y;
-    (y = m == null ? void 0 : m.detail) == null || y.preventDefault();
+  }, h = () => {
+    s.value = 0, t(s.value);
+  }, l = () => {
+    s.value = n.value, t(s.value);
+  }, r = (y) => {
+    s.value = y;
+  }, o = (y) => {
+    var g;
+    (g = y == null ? void 0 : y.detail) == null || g.preventDefault();
   };
   return {
-    moveToFirstElement: S,
-    moveToLastElement: i,
-    moveToNextElement: r,
-    moveToPreviousElement: g,
-    setListboxFocusedIndex: c,
-    preventDefault: l,
-    focusedIndex: o
+    moveToFirstElement: h,
+    moveToLastElement: l,
+    moveToNextElement: c,
+    moveToPreviousElement: m,
+    setListboxFocusedIndex: r,
+    preventDefault: o,
+    focusedIndex: s
   };
-}, kt = J({
+}, $t = Z({
   name: "bento-listbox-single-select",
   components: {
-    BentoListboxSingleSelectCategory: pt,
-    BentoListboxSingleSelectOption: At
+    BentoListboxSingleSelectCategory: yt,
+    BentoListboxSingleSelectOption: Lt
   },
   directives: { BentoKeyboardNavigationDirective: pe },
   inheritAttrs: !1,
@@ -394,136 +394,136 @@ const At = /* @__PURE__ */ H(_t, [["render", It], ["__scopeId", "data-v-226f4c84
     staticCategories: { type: Boolean, default: !1 }
   },
   emits: [v.SELECT, v.ENTER, v.SPACE, v.TAB],
-  setup(e, { emit: t, expose: s, slots: o, attrs: n }) {
-    const a = B(null), r = B([]), g = p(() => {
-      var h;
-      return !!((h = e.selectedValue) != null && h.length) && e.selectedValue.at(0);
-    }), S = p(
+  setup(e, { emit: t, expose: n, slots: s, attrs: a }) {
+    const i = B(null), c = B([]), m = p(() => {
+      var C;
+      return !!((C = e.selectedValue) != null && C.length) && e.selectedValue.at(0);
+    }), h = p(
       () => {
-        var h, C, U, G;
+        var C, S, Y, U;
         return {
-          "aria-label": (h = n["aria-label"]) == null ? void 0 : h.toString(),
-          "aria-busy": (C = n["aria-busy"]) == null ? void 0 : C.toString(),
-          "aria-atomic": (U = n["aria-atomic"]) == null ? void 0 : U.toString(),
-          "aria-live": (G = n["aria-live"]) == null ? void 0 : G.toString()
+          "aria-label": (C = a["aria-label"]) == null ? void 0 : C.toString(),
+          "aria-busy": (S = a["aria-busy"]) == null ? void 0 : S.toString(),
+          "aria-atomic": (Y = a["aria-atomic"]) == null ? void 0 : Y.toString(),
+          "aria-live": (U = a["aria-live"]) == null ? void 0 : U.toString()
         };
       }
-    ), i = p(() => !!e.items.some(({ items: h }) => !!h)), c = (h) => (C) => {
-      t(h, [C]);
-    }, l = async () => {
-      await Me(), a.value && (m.value = Array.from(a.value.querySelectorAll('[role="option"]')));
-    }, m = B([]), y = (h) => {
-      var C;
-      (C = m.value[h]) == null || C.focus();
+    ), l = p(() => !!e.items.some(({ items: C }) => !!C)), r = (C) => (S) => {
+      t(C, [S]);
+    }, o = async () => {
+      await Me(), i.value && (y.value = Array.from(i.value.querySelectorAll('[role="option"]')));
+    }, y = B([]), g = (C) => {
+      var S;
+      (S = y.value[C]) == null || S.focus();
     }, {
       moveToNextElement: T,
-      moveToPreviousElement: M,
+      moveToPreviousElement: N,
       moveToFirstElement: D,
       moveToLastElement: A,
-      setListboxFocusedIndex: x
+      setListboxFocusedIndex: P
     } = we(
       {
-        items: m
+        items: y
       },
-      y
+      g
     );
     ne(
       () => e.items,
       () => {
-        l();
+        o();
       },
       { immediate: !0 }
     );
-    const $ = {
-      [V.ARROW_UP]: M,
+    const L = {
+      [V.ARROW_UP]: N,
       [V.ARROW_DOWN]: T,
       [V.HOME]: D,
       [V.END]: A
-    }, k = {
-      [v.SELECT]: c(v.SELECT),
-      [v.SPACE]: c(v.SPACE),
-      [v.TAB]: c(v.TAB),
-      [v.ENTER]: c(v.ENTER)
+    }, $ = {
+      [v.SELECT]: r(v.SELECT),
+      [v.SPACE]: r(v.SPACE),
+      [v.TAB]: r(v.TAB),
+      [v.ENTER]: r(v.ENTER)
     };
-    return s({
+    return n({
       /**
        * Reference for a single listbox item.
        * Required for keyboard navigation in dropdown as $children is removed in vue@3
        */
-      listboxItemRef: r,
+      listboxItemRef: c,
       /**
        * Method to set the index of the item to be focused on
        * Used for focus management to be kept in-sync with parent e.g. dropdowns
        */
-      setListboxFocusedIndex: x
+      setListboxFocusedIndex: P
     }), {
       // Enums
       BentoListboxEvent: v,
       // Values
-      listboxRef: a,
-      listboxItemRef: r,
-      selectedItem: g,
-      slots: o,
-      ariaAttributes: S,
+      listboxRef: i,
+      listboxItemRef: c,
+      selectedItem: m,
+      slots: s,
+      ariaAttributes: h,
       // Computed
-      hasCategories: i,
+      hasCategories: l,
       // Methods
-      onOptionSelected: c,
+      onOptionSelected: r,
       // Keyboard navigation
-      listboxListeners: $,
-      listboxOptionListeners: k
+      listboxListeners: L,
+      listboxOptionListeners: $
     };
   }
 });
-function Lt(e, t, s, o, n, a) {
-  const r = L("bento-listbox-single-select-option"), g = L("bento-listbox-single-select-category"), S = xe("bento-keyboard-navigation-directive");
-  return re((d(), O("div", Y({ ref: "listboxRef" }, e.ariaAttributes, { role: "listbox" }, te(e.listboxListeners, !0)), [
-    e.hasCategories && e.staticCategories ? (d(!0), O(se, { key: 0 }, q(e.items, (i) => (d(), R(g, {
-      key: i.value,
-      "category-label": i.label,
+function Dt(e, t, n, s, a, i) {
+  const c = k("bento-listbox-single-select-option"), m = k("bento-listbox-single-select-category"), h = xe("bento-keyboard-navigation-directive");
+  return re((d(), O("div", w({ ref: "listboxRef" }, e.ariaAttributes, { role: "listbox" }, se(e.listboxListeners, !0)), [
+    e.hasCategories && e.staticCategories ? (d(!0), O(le, { key: 0 }, H(e.items, (l) => (d(), R(m, {
+      key: l.value,
+      "category-label": l.label,
       role: "group"
     }, {
       default: I(() => [
-        (d(!0), O(se, null, q(i.items, (c) => (d(), R(r, Y({
-          key: c.value,
+        (d(!0), O(le, null, H(l.items, (r) => (d(), R(c, w({
+          key: r.value,
           ref_for: !0,
           ref: "listboxItemRef",
           role: "option",
-          option: c,
-          disabled: e.isOptionDisabled ? e.isOptionDisabled(c) : null,
-          selected: c.value === e.selectedItem.value
-        }, te(e.listboxOptionListeners)), me({ _: 2 }, [
-          q(e.slots, (l, m) => ({
-            name: m,
-            fn: I((y) => [
-              W(e.$slots, m, Y({ ref_for: !0 }, y))
+          option: r,
+          disabled: e.isOptionDisabled ? e.isOptionDisabled(r) : null,
+          selected: r.value === e.selectedItem.value
+        }, se(e.listboxOptionListeners)), be({ _: 2 }, [
+          H(e.slots, (o, y) => ({
+            name: y,
+            fn: I((g) => [
+              W(e.$slots, y, w({ ref_for: !0 }, g))
             ])
           }))
         ]), 1040, ["option", "disabled", "selected"]))), 128))
       ]),
       _: 2
-    }, 1032, ["category-label"]))), 128)) : (d(!0), O(se, { key: 1 }, q(e.items, (i) => (d(), R(r, Y({
-      key: i.value,
+    }, 1032, ["category-label"]))), 128)) : (d(!0), O(le, { key: 1 }, H(e.items, (l) => (d(), R(c, w({
+      key: l.value,
       ref_for: !0,
       ref: "listboxItemRef",
       role: "option",
-      option: i,
-      disabled: e.isOptionDisabled ? e.isOptionDisabled(i) : null,
-      selected: i.value === e.selectedItem.value
-    }, te(e.listboxOptionListeners)), me({ _: 2 }, [
-      q(e.slots, (c, l) => ({
-        name: l,
-        fn: I((m) => [
-          W(e.$slots, l, Y({ ref_for: !0 }, m))
+      option: l,
+      disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null,
+      selected: l.value === e.selectedItem.value
+    }, se(e.listboxOptionListeners)), be({ _: 2 }, [
+      H(e.slots, (r, o) => ({
+        name: o,
+        fn: I((y) => [
+          W(e.$slots, o, w({ ref_for: !0 }, y))
         ])
       }))
     ]), 1040, ["option", "disabled", "selected"]))), 128))
   ], 16)), [
-    [S]
+    [h]
   ]);
 }
-const $t = /* @__PURE__ */ H(kt, [["render", Lt]]), Dt = {}, Bt = /* @__PURE__ */ J({
-  ...Dt,
+const Bt = /* @__PURE__ */ j($t, [["render", Dt]]), Rt = {}, Nt = /* @__PURE__ */ Z({
+  ...Rt,
   __name: "listbox-decorative-checkbox",
   props: {
     disabled: { type: Boolean, default: !1 },
@@ -531,48 +531,48 @@ const $t = /* @__PURE__ */ H(kt, [["render", Lt]]), Dt = {}, Bt = /* @__PURE__ *
     checked: { type: Boolean, default: !1 }
   },
   setup(e) {
-    const t = e, s = p(() => ({
+    const t = e, n = p(() => ({
       [`b-checkbox-input--${fe.DISABLED}`]: t.disabled
-    })), o = p(() => ({
+    })), s = p(() => ({
       [`b-checkbox-input__outline--${fe.UNCHECKED}`]: !t.checked && !t.indeterminate,
       [`b-checkbox-input__outline--${fe.CHECKED}`]: t.checked && !t.indeterminate,
       [`b-checkbox-input__outline--${fe.INDETERMINATE}`]: t.indeterminate
     }));
-    return (n, a) => (d(), O("div", {
-      class: ve(["b-checkbox-input", s.value]),
+    return (a, i) => (d(), O("div", {
+      class: me(["b-checkbox-input", n.value]),
       role: "presentation"
     }, [
-      n.indeterminate ? (d(), R(N(nt), {
+      a.indeterminate ? (d(), R(M(rt), {
         key: 0,
         class: "b-checkbox-input__icon",
         "svg-title": "",
         "aria-hidden": "true"
-      })) : n.checked ? (d(), R(N(at), {
+      })) : a.checked ? (d(), R(M(ct), {
         key: 1,
         class: "b-checkbox-input__icon",
         "svg-title": "",
         "aria-hidden": "true"
-      })) : X("", !0),
+      })) : J("", !0),
       z("div", {
-        class: ve(["b-checkbox-input__outline", o.value])
+        class: me(["b-checkbox-input__outline", s.value])
       }, null, 2)
     ], 2));
   }
-}), Te = /* @__PURE__ */ H(Bt, [["__scopeId", "data-v-c604b68a"]]);
-var Ye = /* @__PURE__ */ ((e) => (e.DISABLED = "disabled", e.STATIC_CATEGORY = "static-category", e))(Ye || {}), ee = /* @__PURE__ */ ((e) => (e.SELECT_CATEGORY = "select-category", e.UNSELECT_CATEGORY = "unselect-category", e.TOGGLE_CATEGORY_VISIBILITY = "toggle-category-visibility", e))(ee || {});
-const Rt = {
+}), Te = /* @__PURE__ */ j(Nt, [["__scopeId", "data-v-c604b68a"]]);
+var Ye = /* @__PURE__ */ ((e) => (e.DISABLED = "disabled", e.STATIC_CATEGORY = "static-category", e))(Ye || {}), te = /* @__PURE__ */ ((e) => (e.SELECT_CATEGORY = "select-category", e.UNSELECT_CATEGORY = "unselect-category", e.TOGGLE_CATEGORY_VISIBILITY = "toggle-category-visibility", e))(te || {});
+const Pt = {
   "en-US": {
     categoryClosed: "{category} closed",
     categoryOpened: "{category} opened"
   }
-}, Nt = J({
-  i18n: { messages: Rt },
+}, Mt = Z({
+  i18n: { messages: Pt },
   name: "bento-listbox-multi-select-category",
   components: {
     BentoTypography: ce,
     BentoListboxOption: ge,
-    ChevronDownIcon: rt,
-    ChevronUpIcon: ct,
+    ChevronDownIcon: dt,
+    ChevronUpIcon: ut,
     ListboxDecorativeCheckbox: Te
   },
   props: {
@@ -619,81 +619,81 @@ const Rt = {
     tabindex: { type: Number, default: -1 }
   },
   emits: [
-    ee.SELECT_CATEGORY,
-    ee.UNSELECT_CATEGORY,
-    ee.TOGGLE_CATEGORY_VISIBILITY
+    te.SELECT_CATEGORY,
+    te.UNSELECT_CATEGORY,
+    te.TOGGLE_CATEGORY_VISIBILITY
   ],
   setup(e, { emit: t }) {
-    const s = B(!1), { t: o } = Oe(), n = (C) => e.isOptionDisabled ? e.isOptionDisabled(C) : !1, a = p(
-      () => e.category.items.every((C) => n(C))
-    ), r = _e(e, "staticCategories"), g = p(() => s.value || e.staticCategories), S = p(() => ({
-      [`b-listbox-multi-select-category--${Ye.DISABLED}`]: a.value
-    })), i = (C) => {
-      C.preventDefault(), s.value = !s.value, t(ee.TOGGLE_CATEGORY_VISIBILITY);
-    }, c = (C) => {
-      var Q;
-      const U = n(C), G = ((Q = e.selectedItemsList) == null ? void 0 : Q.includes(C.value)) || !1;
-      return { isDisabled: U, isPreSelected: G };
-    }, l = p(
-      () => e.category.items.filter((C) => {
-        const { isDisabled: U, isPreSelected: G } = c(C);
-        return U && G || !U;
+    const n = B(!1), { t: s } = Oe(), a = (S) => e.isOptionDisabled ? e.isOptionDisabled(S) : !1, i = p(
+      () => e.category.items.every((S) => a(S))
+    ), c = _e(e, "staticCategories"), m = p(() => n.value || e.staticCategories), h = p(() => ({
+      [`b-listbox-multi-select-category--${Ye.DISABLED}`]: i.value
+    })), l = (S) => {
+      S.preventDefault(), n.value = !n.value, t(te.TOGGLE_CATEGORY_VISIBILITY);
+    }, r = (S) => {
+      var q;
+      const Y = a(S), U = ((q = e.selectedItemsList) == null ? void 0 : q.includes(S.value)) || !1;
+      return { isDisabled: Y, isPreSelected: U };
+    }, o = p(
+      () => e.category.items.filter((S) => {
+        const { isDisabled: Y, isPreSelected: U } = r(S);
+        return Y && U || !Y;
       })
-    ), m = p(
+    ), y = p(
       () => {
-        var C;
-        return (C = l.value) == null ? void 0 : C.filter(
-          ({ value: U }) => {
-            var G;
-            return (G = e.selectedItemsList) == null ? void 0 : G.includes(U);
+        var S;
+        return (S = o.value) == null ? void 0 : S.filter(
+          ({ value: Y }) => {
+            var U;
+            return (U = e.selectedItemsList) == null ? void 0 : U.includes(Y);
           }
         );
       }
-    ), y = p(() => {
-      const C = s.value ? "categoryOpened" : "categoryClosed";
-      return o(C, { category: e.category.label });
+    ), g = p(() => {
+      const S = n.value ? "categoryOpened" : "categoryClosed";
+      return s(S, { category: e.category.label });
     }), T = () => {
-      t(ee.SELECT_CATEGORY);
-    }, M = () => {
-      t(ee.UNSELECT_CATEGORY);
-    }, { isAllSelected: D, isIndeterminate: A, toggleSelectAll: x } = Ge(
-      m,
-      l,
+      t(te.SELECT_CATEGORY);
+    }, N = () => {
+      t(te.UNSELECT_CATEGORY);
+    }, { isAllSelected: D, isIndeterminate: A, toggleSelectAll: P } = Ge(
+      y,
+      o,
       T,
-      M
-    ), $ = p(() => A.value ? "mixed" : `${D.value}`), k = B(D.value), h = () => {
-      k.value = !k.value, x(k.value);
+      N
+    ), L = p(() => A.value ? "mixed" : `${D.value}`), $ = B(D.value), C = () => {
+      $.value = !$.value, P($.value);
     };
     return ne(D, () => {
-      k.value = D.value;
+      $.value = D.value;
     }), {
       // Values
-      chevronTitle: y,
-      conditionalClass: S,
-      hasAllPropsDisabled: a,
-      isOpen: s,
+      chevronTitle: g,
+      conditionalClass: h,
+      hasAllPropsDisabled: i,
+      isOpen: n,
       isAllSelected: D,
       isIndeterminate: A,
-      isStaticCategory: r,
+      isStaticCategory: c,
       // Computed
-      showItemChildren: g,
-      ariaCheckedComputed: $,
+      showItemChildren: m,
+      ariaCheckedComputed: L,
       // Methods
-      handleSelectAll: h,
-      toggleOpen: i,
-      toggleSelectAll: x
+      handleSelectAll: C,
+      toggleOpen: l,
+      toggleSelectAll: P
     };
   }
-}), Pt = { class: "b-listbox-multi-select-category__label" }, Mt = {
+}), xt = { class: "b-listbox-multi-select-category__label" }, Gt = {
   key: 1,
   class: "b-listbox-multi-select-category b-listbox-multi-select-category--static-category"
-}, xt = { class: "b-listbox-multi-select-category__label" };
-function Gt(e, t, s, o, n, a) {
-  const r = L("listbox-decorative-checkbox"), g = L("bento-typography"), S = L("chevron-up-icon"), i = L("chevron-down-icon"), c = L("bento-listbox-option");
+}, wt = { class: "b-listbox-multi-select-category__label" };
+function Yt(e, t, n, s, a, i) {
+  const c = k("listbox-decorative-checkbox"), m = k("bento-typography"), h = k("chevron-up-icon"), l = k("chevron-down-icon"), r = k("bento-listbox-option");
   return d(), O("div", null, [
-    e.isStaticCategory ? (d(), O("div", Mt, [
-      z("span", xt, [
-        P(g, {
+    e.isStaticCategory ? (d(), O("div", Gt, [
+      z("span", wt, [
+        x(m, {
           el: "span",
           variant: "caption",
           class: "b-listbox-multi-select-category__label-text"
@@ -704,9 +704,9 @@ function Gt(e, t, s, o, n, a) {
           _: 1
         })
       ])
-    ])) : (d(), R(c, {
+    ])) : (d(), R(r, {
       key: 0,
-      class: ve(["b-listbox-multi-select-category__option", e.conditionalClass]),
+      class: me(["b-listbox-multi-select-category__option", e.conditionalClass]),
       tabindex: e.tabindex,
       "aria-checked": e.ariaCheckedComputed,
       "aria-disabled": e.hasAllPropsDisabled,
@@ -715,13 +715,13 @@ function Gt(e, t, s, o, n, a) {
       onSpacePressed: ae(e.handleSelectAll, ["prevent"])
     }, {
       default: I(() => [
-        P(r, {
+        x(c, {
           indeterminate: e.isIndeterminate,
           disabled: e.hasAllPropsDisabled,
           checked: e.isAllSelected
         }, null, 8, ["indeterminate", "disabled", "checked"]),
-        z("span", Pt, [
-          P(g, {
+        z("span", xt, [
+          x(m, {
             el: "span",
             class: "b-listbox-multi-select-category__label-text"
           }, {
@@ -733,12 +733,12 @@ function Gt(e, t, s, o, n, a) {
           z("div", {
             class: "b-listbox-multi-select-category__label-chevron",
             "data-testid": "toggle-listbox",
-            onClickCapture: t[0] || (t[0] = ae((...l) => e.toggleOpen && e.toggleOpen(...l), ["stop"]))
+            onClickCapture: t[0] || (t[0] = ae((...o) => e.toggleOpen && e.toggleOpen(...o), ["stop"]))
           }, [
-            e.isOpen ? (d(), R(S, {
+            e.isOpen ? (d(), R(h, {
               key: 0,
               "svg-title": e.chevronTitle
-            }, null, 8, ["svg-title"])) : (d(), R(i, {
+            }, null, 8, ["svg-title"])) : (d(), R(l, {
               key: 1,
               "svg-title": e.chevronTitle
             }, null, 8, ["svg-title"]))
@@ -754,14 +754,14 @@ function Gt(e, t, s, o, n, a) {
     ])
   ]);
 }
-const wt = /* @__PURE__ */ H(Nt, [["render", Gt], ["__scopeId", "data-v-40db801f"]]);
-var j = /* @__PURE__ */ ((e) => (e.SELECT_CATEGORY = "select-category", e.TOGGLE_CHECKBOX_SELECTION = "toggle-checkbox-selection", e.UNSELECT_CATEGORY = "unselect-category", e.TOGGLE_CATEGORY_VISIBILITY = "toggle-category-visibility", e))(j || {});
-const Yt = J({
+const Ut = /* @__PURE__ */ j(Mt, [["render", Yt], ["__scopeId", "data-v-40db801f"]]);
+var X = /* @__PURE__ */ ((e) => (e.SELECT_CATEGORY = "select-category", e.TOGGLE_CHECKBOX_SELECTION = "toggle-checkbox-selection", e.UNSELECT_CATEGORY = "unselect-category", e.TOGGLE_CATEGORY_VISIBILITY = "toggle-category-visibility", e))(X || {});
+const zt = Z({
   name: "listbox-multi-select-options",
   components: {
     BentoListboxOption: ge,
     BentoTypography: ce,
-    ListboxMultiSelectCategory: wt,
+    ListboxMultiSelectCategory: Ut,
     ListboxDecorativeCheckbox: Te
   },
   props: {
@@ -824,23 +824,23 @@ const Yt = J({
     staticCategories: { type: Boolean, default: !1 }
   },
   emits: [
-    j.TOGGLE_CHECKBOX_SELECTION,
-    j.SELECT_CATEGORY,
-    j.UNSELECT_CATEGORY,
-    j.TOGGLE_CATEGORY_VISIBILITY
+    X.TOGGLE_CHECKBOX_SELECTION,
+    X.SELECT_CATEGORY,
+    X.UNSELECT_CATEGORY,
+    X.TOGGLE_CATEGORY_VISIBILITY
   ],
   setup(e, { emit: t }) {
-    const s = (i) => {
-      e.isOptionDisabled(i) || t(j.TOGGLE_CHECKBOX_SELECTION, i);
-    }, o = (i) => !!i.items, n = (i) => {
-      const c = e.isMultiLevel && e.searching;
-      return i.description && (!e.isMultiLevel || c);
-    }, a = (i) => i.items ? !!i.items.find((c) => e.selectedItemsList.includes(c.value)) : e.selectedItemsList.includes(i.value), r = (i) => {
-      if (o(i)) {
-        const c = a(i) ? j.UNSELECT_CATEGORY : j.SELECT_CATEGORY;
-        t(c, i);
+    const n = (l) => {
+      e.isOptionDisabled(l) || t(X.TOGGLE_CHECKBOX_SELECTION, l);
+    }, s = (l) => !!l.items, a = (l) => {
+      const r = e.isMultiLevel && e.searching;
+      return l.description && (!e.isMultiLevel || r);
+    }, i = (l) => l.items ? !!l.items.find((r) => e.selectedItemsList.includes(r.value)) : e.selectedItemsList.includes(l.value), c = (l) => {
+      if (s(l)) {
+        const r = i(l) ? X.UNSELECT_CATEGORY : X.SELECT_CATEGORY;
+        t(r, l);
       } else
-        s(i);
+        n(l);
     };
     return {
       // Values
@@ -849,121 +849,121 @@ const Yt = J({
         "b-listbox-multi-select-options__category-option": e.categoryItems
       })),
       // Methods
-      isOptionSelected: a,
-      shouldShowDescription: n,
-      toggleCheckboxSelection: s,
-      toggleSearchOption: r,
-      computedTabindex: (i) => i + 1 === e.focusedIndex ? 0 : -1,
+      isOptionSelected: i,
+      shouldShowDescription: a,
+      toggleCheckboxSelection: n,
+      toggleSearchOption: c,
+      computedTabindex: (l) => l + 1 === e.focusedIndex ? 0 : -1,
       // Enums
       BentoListboxEvent: v,
-      ListboxMultiSelectOptionsEvent: j
+      ListboxMultiSelectOptionsEvent: X
     };
   }
-}), Ut = { class: "b-listbox-multi-select__option-text" }, zt = { class: "b-listbox-multi-select__option-text" };
-function Ft(e, t, s, o, n, a) {
-  const r = L("listbox-decorative-checkbox"), g = L("bento-typography"), S = L("bento-listbox-option"), i = L("listbox-multi-select-options", !0), c = L("listbox-multi-select-category");
+}), Ft = { class: "b-listbox-multi-select__option-text" }, Vt = { class: "b-listbox-multi-select__option-text" };
+function Kt(e, t, n, s, a, i) {
+  const c = k("listbox-decorative-checkbox"), m = k("bento-typography"), h = k("bento-listbox-option"), l = k("listbox-multi-select-options", !0), r = k("listbox-multi-select-category");
   return d(), O("div", null, [
-    (d(!0), O(se, null, q(e.items, (l, m) => (d(), O("div", {
-      key: `selected-${l.value}`
+    (d(!0), O(le, null, H(e.items, (o, y) => (d(), O("div", {
+      key: `selected-${o.value}`
     }, [
-      e.searching && e.isMultiLevel ? (d(), R(S, {
+      e.searching && e.isMultiLevel ? (d(), R(h, {
         key: 0,
-        class: ve(["b-listbox-multi-select-options", e.conditionalClasses]),
-        disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null,
-        tabindex: e.computedTabindex(m),
-        "aria-checked": `${e.isOptionSelected(l)}`,
-        "aria-disabled": e.isOptionDisabled ? e.isOptionDisabled(l) : null,
-        onClick: (y) => e.toggleSearchOption(l),
-        onEnterPressed: (y) => e.toggleSearchOption(l),
-        onSpacePressed: ae((y) => e.toggleSearchOption(l), ["prevent"])
+        class: me(["b-listbox-multi-select-options", e.conditionalClasses]),
+        disabled: e.isOptionDisabled ? e.isOptionDisabled(o) : null,
+        tabindex: e.computedTabindex(y),
+        "aria-checked": `${e.isOptionSelected(o)}`,
+        "aria-disabled": e.isOptionDisabled ? e.isOptionDisabled(o) : null,
+        onClick: (g) => e.toggleSearchOption(o),
+        onEnterPressed: (g) => e.toggleSearchOption(o),
+        onSpacePressed: ae((g) => e.toggleSearchOption(o), ["prevent"])
       }, {
         default: I(() => [
-          P(r, {
-            disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null,
-            checked: e.isOptionSelected(l)
+          x(c, {
+            disabled: e.isOptionDisabled ? e.isOptionDisabled(o) : null,
+            checked: e.isOptionSelected(o)
           }, null, 8, ["disabled", "checked"]),
-          W(e.$slots, "default", Y({ ref_for: !0 }, l), () => [
-            z("span", Ut, [
-              P(g, { el: "span" }, {
+          W(e.$slots, "default", w({ ref_for: !0 }, o), () => [
+            z("span", Ft, [
+              x(m, { el: "span" }, {
                 default: I(() => [
-                  K(F(l.label), 1)
+                  K(F(o.label), 1)
                 ]),
                 _: 2
               }, 1024),
-              e.shouldShowDescription(l) ? (d(), R(g, {
+              e.shouldShowDescription(o) ? (d(), R(m, {
                 key: 0,
                 class: "b-listbox-multi-select__option-description",
                 el: "span"
               }, {
                 default: I(() => [
-                  K(F(l.description), 1)
+                  K(F(o.description), 1)
                 ]),
                 _: 2
-              }, 1024)) : X("", !0)
+              }, 1024)) : J("", !0)
             ])
           ], !0)
         ]),
         _: 2
-      }, 1032, ["class", "disabled", "tabindex", "aria-checked", "aria-disabled", "onClick", "onEnterPressed", "onSpacePressed"])) : (d(), O(se, { key: 1 }, [
-        l.items ? (d(), R(c, {
+      }, 1032, ["class", "disabled", "tabindex", "aria-checked", "aria-disabled", "onClick", "onEnterPressed", "onSpacePressed"])) : (d(), O(le, { key: 1 }, [
+        o.items ? (d(), R(r, {
           key: 0,
-          category: l,
+          category: o,
           "static-categories": e.staticCategories,
           "is-option-disabled": e.isOptionDisabled,
           "selected-items-list": e.selectedItemsList,
-          tabindex: e.computedTabindex(m),
-          onSelectCategory: (y) => e.$emit(e.ListboxMultiSelectOptionsEvent.SELECT_CATEGORY, l),
-          onUnselectCategory: (y) => e.$emit(e.ListboxMultiSelectOptionsEvent.UNSELECT_CATEGORY, l),
-          onToggleCategoryVisibility: t[1] || (t[1] = (y) => e.$emit(e.ListboxMultiSelectOptionsEvent.TOGGLE_CATEGORY_VISIBILITY))
+          tabindex: e.computedTabindex(y),
+          onSelectCategory: (g) => e.$emit(e.ListboxMultiSelectOptionsEvent.SELECT_CATEGORY, o),
+          onUnselectCategory: (g) => e.$emit(e.ListboxMultiSelectOptionsEvent.UNSELECT_CATEGORY, o),
+          onToggleCategoryVisibility: t[1] || (t[1] = (g) => e.$emit(e.ListboxMultiSelectOptionsEvent.TOGGLE_CATEGORY_VISIBILITY))
         }, {
           default: I(() => [
-            P(i, {
+            x(l, {
               "category-items": "",
-              items: l.items,
+              items: o.items,
               "is-option-disabled": e.isOptionDisabled,
               "focused-index": e.focusedIndex,
               "is-multi-level": e.isMultiLevel,
               "static-categories": e.staticCategories,
               "selected-items-list": e.selectedItemsList,
               searching: e.searching,
-              onToggleCheckboxSelection: t[0] || (t[0] = (y) => e.toggleCheckboxSelection(y))
+              onToggleCheckboxSelection: t[0] || (t[0] = (g) => e.toggleCheckboxSelection(g))
             }, null, 8, ["items", "is-option-disabled", "focused-index", "is-multi-level", "static-categories", "selected-items-list", "searching"])
           ]),
           _: 2
-        }, 1032, ["category", "static-categories", "is-option-disabled", "selected-items-list", "tabindex", "onSelectCategory", "onUnselectCategory"])) : (d(), R(S, {
+        }, 1032, ["category", "static-categories", "is-option-disabled", "selected-items-list", "tabindex", "onSelectCategory", "onUnselectCategory"])) : (d(), R(h, {
           key: 1,
-          class: ve(["b-listbox-multi-select-options", e.conditionalClasses]),
-          disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null,
-          tabindex: e.computedTabindex(m),
-          "aria-checked": `${e.isOptionSelected(l)}`,
-          "aria-disabled": e.isOptionDisabled ? e.isOptionDisabled(l) : null,
-          onClick: (y) => e.toggleCheckboxSelection(l),
-          onEnterPressed: (y) => e.toggleCheckboxSelection(l),
-          onSpacePressed: ae((y) => e.toggleCheckboxSelection(l), ["prevent"])
+          class: me(["b-listbox-multi-select-options", e.conditionalClasses]),
+          disabled: e.isOptionDisabled ? e.isOptionDisabled(o) : null,
+          tabindex: e.computedTabindex(y),
+          "aria-checked": `${e.isOptionSelected(o)}`,
+          "aria-disabled": e.isOptionDisabled ? e.isOptionDisabled(o) : null,
+          onClick: (g) => e.toggleCheckboxSelection(o),
+          onEnterPressed: (g) => e.toggleCheckboxSelection(o),
+          onSpacePressed: ae((g) => e.toggleCheckboxSelection(o), ["prevent"])
         }, {
           default: I(() => [
-            P(r, {
-              disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null,
-              checked: e.isOptionSelected(l)
+            x(c, {
+              disabled: e.isOptionDisabled ? e.isOptionDisabled(o) : null,
+              checked: e.isOptionSelected(o)
             }, null, 8, ["disabled", "checked"]),
-            W(e.$slots, "default", Y({ ref_for: !0 }, l), () => [
-              z("span", zt, [
-                P(g, { el: "span" }, {
+            W(e.$slots, "default", w({ ref_for: !0 }, o), () => [
+              z("span", Vt, [
+                x(m, { el: "span" }, {
                   default: I(() => [
-                    K(F(l.label), 1)
+                    K(F(o.label), 1)
                   ]),
                   _: 2
                 }, 1024),
-                e.shouldShowDescription(l) ? (d(), R(g, {
+                e.shouldShowDescription(o) ? (d(), R(m, {
                   key: 0,
                   class: "b-listbox-multi-select__option-description",
                   el: "span"
                 }, {
                   default: I(() => [
-                    K(F(l.description), 1)
+                    K(F(o.description), 1)
                   ]),
                   _: 2
-                }, 1024)) : X("", !0)
+                }, 1024)) : J("", !0)
               ])
             ], !0)
           ]),
@@ -973,17 +973,17 @@ function Ft(e, t, s, o, n, a) {
     ]))), 128))
   ]);
 }
-const Vt = /* @__PURE__ */ H(Yt, [["render", Ft], ["__scopeId", "data-v-e26ceb2d"]]), Kt = (e) => {
+const Wt = /* @__PURE__ */ j(zt, [["render", Kt], ["__scopeId", "data-v-e26ceb2d"]]), qt = (e) => {
   const t = p(() => {
-    var o;
-    return !!((o = e.value) != null && o.find(({ items: n }) => !!n));
-  }), s = p(() => {
-    var o;
-    return t.value ? (o = e.value) == null ? void 0 : o.reduce((n, a) => (a.items ? n.push(...a.items.flat()) : n.push(a), n), []) : e.value;
+    var s;
+    return !!((s = e.value) != null && s.find(({ items: a }) => !!a));
+  }), n = p(() => {
+    var s;
+    return t.value ? (s = e.value) == null ? void 0 : s.reduce((a, i) => (i.items ? a.push(...i.items.flat()) : a.push(i), a), []) : e.value;
   });
   return {
     isMultiLevelSelect: t,
-    flattenedItemsList: s
+    flattenedItemsList: n
   };
 }, Ue = {
   "en-US": {
@@ -992,12 +992,12 @@ const Vt = /* @__PURE__ */ H(Yt, [["render", Ft], ["__scopeId", "data-v-e26ceb2d
     numbersSelected: "{number} selected",
     selectAll: "Select all ({total})"
   }
-}, Wt = { key: 0 }, qt = {
+}, Ht = { key: 0 }, jt = {
   key: 1,
   class: "b-listbox-multi-select__divider",
   "aria-hidden": "true"
-}, Ht = { i18n: { messages: Ue } }, jt = /* @__PURE__ */ J({
-  ...Ht,
+}, Xt = { i18n: { messages: Ue } }, Jt = /* @__PURE__ */ Z({
+  ...Xt,
   __name: "listbox-multi-select",
   props: {
     hasMoreItems: { type: Boolean, default: !1 },
@@ -1009,116 +1009,125 @@ const Vt = /* @__PURE__ */ H(Yt, [["render", Ft], ["__scopeId", "data-v-e26ceb2d
     staticCategories: { type: Boolean, default: !1 }
   },
   emits: ["select"],
-  setup(e, { emit: t }) {
-    const s = e, o = t, { t: n } = Oe({ messages: Ue }), a = et(), r = tt(), g = p(
+  setup(e, { expose: t, emit: n }) {
+    const s = e, a = n, { t: i } = Oe({ messages: Ue }), c = st(), m = lt(), h = p(
       () => {
         var u, f, b, _;
         return {
-          "aria-label": (u = r["aria-label"]) == null ? void 0 : u.toString(),
-          "aria-busy": (f = r["aria-busy"]) == null ? void 0 : f.toString(),
-          "aria-atomic": (b = r["aria-atomic"]) == null ? void 0 : b.toString(),
-          "aria-live": (_ = r["aria-live"]) == null ? void 0 : _.toString()
+          "aria-label": (u = m["aria-label"]) == null ? void 0 : u.toString(),
+          "aria-busy": (f = m["aria-busy"]) == null ? void 0 : f.toString(),
+          "aria-atomic": (b = m["aria-atomic"]) == null ? void 0 : b.toString(),
+          "aria-live": (_ = m["aria-live"]) == null ? void 0 : _.toString()
         };
       }
-    ), S = B(null), i = B(null), c = B(null), l = B(null), m = p(() => s.selectedValues.map(({ value: u }) => u)), { isMultiLevelSelect: y, flattenedItemsList: T } = Kt(_e(s, "items")), M = (u) => {
+    ), l = B(null), r = B(null), o = B(null), y = B(null), g = p(() => s.selectedValues.map(({ value: u }) => u)), { isMultiLevelSelect: T, flattenedItemsList: N } = qt(_e(s, "items")), D = (u) => {
       var _;
-      const f = s.isOptionDisabled(u), b = ((_ = m.value) == null ? void 0 : _.includes(u.value)) || !1;
+      const f = s.isOptionDisabled(u), b = ((_ = g.value) == null ? void 0 : _.includes(u.value)) || !1;
       return { isDisabled: f, isPreSelected: b };
-    }, D = p(() => {
-      if (s.searching && y)
+    }, A = p(() => {
+      if (s.searching && T)
         return s.items;
-      const u = T.value.filter((f) => {
-        const { isDisabled: b, isPreSelected: _ } = M(f);
+      const u = N.value.filter((f) => {
+        const { isDisabled: b, isPreSelected: _ } = D(f);
         return b && _ || !b;
       });
       return s.selectedValues.forEach((f) => {
         u.find((b) => b.value === f.value) || u.push(f);
       }), u;
-    }), A = p(
+    }), P = p(
       () => {
         var u;
-        return (u = D.value) == null ? void 0 : u.filter((f) => {
+        return (u = A.value) == null ? void 0 : u.filter((f) => {
           var b;
-          return f.items && y.value && s.searching ? f.items.filter(
+          return f.items && T.value && s.searching ? f.items.filter(
             (E) => (s.selectedValues ?? []).includes(E.value)
-          ).length === f.items.length : (b = m.value) == null ? void 0 : b.includes(f.value);
+          ).length === f.items.length : (b = g.value) == null ? void 0 : b.includes(f.value);
         });
       }
-    ), x = () => y.value && !s.searching ? T.value.length : s.items.length, $ = p(() => {
+    ), L = () => T.value && !s.searching ? N.value.length : s.items.length, $ = p(() => {
       var _;
-      const u = D.value.length, f = x(), b = ((_ = A.value) == null ? void 0 : _.length) || 0;
-      return b === 0 ? n("selectAll", { total: u }) : b === f ? n("allSelected", { total: f }) : b <= f ? n("numberOfTotalSelected", { number: b, total: f }) : n("numbersSelected", { number: b });
-    }), k = (u) => {
+      const u = A.value.length, f = L(), b = ((_ = P.value) == null ? void 0 : _.length) || 0;
+      return b === 0 ? i("selectAll", { total: u }) : b === f ? i("allSelected", { total: f }) : b <= f ? i("numberOfTotalSelected", { number: b, total: f }) : i("numbersSelected", { number: b });
+    }), C = (u) => {
       const f = (_) => {
-        const { isDisabled: E, isPreSelected: Z } = M(_);
-        return E && Z || !E;
-      }, b = u.filter(f).filter((_) => !m.value.includes(_.value));
-      o("select", [...s.selectedValues, ...b]);
-    }, h = (u) => {
+        const { isDisabled: E, isPreSelected: Q } = D(_);
+        return E && Q || !E;
+      }, b = u.filter(f).filter((_) => !g.value.includes(_.value));
+      a("select", [...s.selectedValues, ...b]);
+    }, S = (u) => {
       const f = (E) => {
-        const { isDisabled: Z, isPreSelected: Je } = M(E);
-        return !(Z && Je);
+        const { isDisabled: Q, isPreSelected: Qe } = D(E);
+        return !(Q && Qe);
       }, b = u.filter(f).map(({ value: E }) => E), _ = s.selectedValues.filter((E) => !(b != null && b.includes(E.value)));
-      o("select", _);
-    }, C = () => {
-      k(T.value);
+      a("select", _);
+    }, Y = () => {
+      C(N.value);
     }, U = () => {
-      h(T.value);
-    }, { isAllSelected: G, isIndeterminate: Q, toggleSelectAll: ye } = Ge(
+      S(N.value);
+    }, { isAllSelected: q, isIndeterminate: ve, toggleSelectAll: ye } = Ge(
+      P,
       A,
-      D,
-      C,
+      Y,
       U
-    ), Se = p(() => Q.value ? "mixed" : `${G.value}`), le = B(G.value), w = () => {
-      le.value = !le.value, ye(le.value);
+    ), Se = p(() => ve.value ? "mixed" : `${q.value}`), G = B(q.value), ee = () => {
+      G.value = !G.value, ye(G.value);
     };
-    ne(G, () => {
-      le.value = G.value;
+    ne(q, () => {
+      G.value = q.value;
     });
-    const de = (u) => {
-      k(u.items);
+    const ze = (u) => {
+      C(u.items);
     }, Ie = (u) => {
-      h(u.items);
-    }, ue = (u, f) => {
+      S(u.items);
+    }, de = (u, f) => {
       let b = !1;
       const _ = s.selectedValues.filter(({ value: E }) => f.value === E ? (b = !0, !1) : !0);
-      b || _.push(f), o(u, _);
-    }, ze = p(() => {
-      if (!y.value)
+      b || _.push(f), a(u, _);
+    }, Fe = p(() => {
+      if (!T.value)
         return s.selectedValues;
-      const u = (E) => m.value.includes(E.value), f = (E) => !s.staticCategories && E.every((Z) => u(Z));
+      const u = (E) => g.value.includes(E.value), f = (E) => !s.staticCategories && E.every((Q) => u(Q));
       return s.items.flatMap(
         (E) => E.items && !f(E.items) ? E.items : E
       ).filter((E) => E.items ? !0 : u(E));
-    }), Fe = p(() => {
-      var b, _, E, Z;
-      const u = ["automatic", "button"].includes(s.lazyLoadType), f = ((b = s.selectedValues) == null ? void 0 : b.length) > 0 && ((_ = A.value) == null ? void 0 : _.length) !== ((E = T.value) == null ? void 0 : E.length);
-      return u && s.hasMoreItems ? !!((Z = s.selectedValues) != null && Z.length) : f;
+    }), Ve = p(() => {
+      var b, _, E, Q;
+      const u = ["automatic", "button"].includes(s.lazyLoadType), f = ((b = s.selectedValues) == null ? void 0 : b.length) > 0 && ((_ = P.value) == null ? void 0 : _.length) !== ((E = N.value) == null ? void 0 : E.length);
+      return u && s.hasMoreItems ? !!((Q = s.selectedValues) != null && Q.length) : f;
     }), Ae = p(() => ["automatic", "button"].includes(s.lazyLoadType) ? !s.hasMoreItems : !0), he = B([]), ke = async () => {
-      await Me(), S.value && (he.value = Array.from(
-        S.value.querySelectorAll('[role="option"]')
+      await Me(), l.value && (he.value = Array.from(
+        l.value.querySelectorAll('[role="option"]')
       ).filter((u) => u.checkVisibility()));
-    }, Ve = (u) => {
+    }, Ke = (u) => {
       var f;
       (f = he.value[u]) == null || f.focus();
     }, {
-      moveToNextElement: Ke,
-      moveToPreviousElement: We,
-      moveToFirstElement: qe,
-      moveToLastElement: He,
+      moveToNextElement: We,
+      moveToPreviousElement: qe,
+      moveToFirstElement: He,
+      moveToLastElement: je,
       preventDefault: Le,
-      focusedIndex: $e
+      focusedIndex: $e,
+      setListboxFocusedIndex: Xe
     } = we(
       {
         items: he
       },
-      Ve
-    ), je = {
-      [V.ARROW_UP]: (u) => We(u),
-      [V.ARROW_DOWN]: (u) => Ke(u),
-      [V.HOME]: qe,
-      [V.END]: He
-    }, Xe = {
+      Ke
+    ), Je = {
+      [V.ARROW_UP]: (u) => qe(u),
+      [V.ARROW_DOWN]: (u) => We(u),
+      [V.HOME]: He,
+      [V.END]: je
+    };
+    t({
+      /**
+       * Method to set the index of the item to be focused on
+       * Used for focus management to be kept in-sync with parent e.g. dropdowns
+       */
+      setListboxFocusedIndex: Xe
+    });
+    const Ze = {
       [V.ARROW_UP]: Le,
       [V.ARROW_DOWN]: Le
     };
@@ -1130,50 +1139,50 @@ const Vt = /* @__PURE__ */ H(Yt, [["render", Ft], ["__scopeId", "data-v-e26ceb2d
       { immediate: !0 }
     ), (u, f) => (d(), O("div", {
       ref_key: "listboxRef",
-      ref: S,
+      ref: l,
       class: "b-listbox-multi-select"
     }, [
-      Fe.value ? (d(), O("div", Wt, [
-        re((d(), O("ul", Y({ class: "b-listbox-multi-select__chips" }, te(Xe, !0)), [
-          (d(!0), O(se, null, q(ze.value, (b) => (d(), O("li", {
+      Ve.value ? (d(), O("div", Ht, [
+        re((d(), O("ul", w({ class: "b-listbox-multi-select__chips" }, se(Ze, !0)), [
+          (d(!0), O(le, null, H(Fe.value, (b) => (d(), O("li", {
             key: b.value
           }, [
-            P(N(it), {
+            x(M(at), {
               ref_for: !0,
               ref_key: "selectedListboxItemsRef",
-              ref: c,
+              ref: o,
               disabled: u.isOptionDisabled(b),
               label: b.label,
               condensed: "",
-              onClick: (_) => b.items ? Ie(b) : ue("select", b)
+              onClick: (_) => b.items ? Ie(b) : de("select", b)
             }, null, 8, ["disabled", "label", "onClick"])
           ]))), 128))
         ], 16)), [
-          [N(pe)]
+          [M(pe)]
         ]),
         f[4] || (f[4] = z("hr", {
           class: "b-listbox-multi-select__divider",
           "aria-hidden": "true"
         }, null, -1))
-      ])) : X("", !0),
-      re((d(), O("div", Y(g.value, { role: "listbox" }, te(je, !0)), [
-        Ae.value ? (d(), R(N(ge), {
+      ])) : J("", !0),
+      re((d(), O("div", w(h.value, { role: "listbox" }, se(Je, !0)), [
+        Ae.value ? (d(), R(M(ge), {
           key: 0,
           ref_key: "selectAllListboxItemsRef",
-          ref: i,
+          ref: r,
           class: "b-listbox-multi-select__option",
-          tabindex: N($e) === 0 ? 0 : -1,
+          tabindex: M($e) === 0 ? 0 : -1,
           "aria-checked": Se.value,
-          onClick: w,
-          onEnterPressed: w,
-          onSpacePressed: ae(w, ["prevent"])
+          onClick: ee,
+          onEnterPressed: ee,
+          onSpacePressed: ae(ee, ["prevent"])
         }, {
           default: I(() => [
-            P(N(Te), {
-              checked: N(G),
-              indeterminate: N(Q)
+            x(M(Te), {
+              checked: M(q),
+              indeterminate: M(ve)
             }, null, 8, ["checked", "indeterminate"]),
-            P(N(ce), { el: "span" }, {
+            x(M(ce), { el: "span" }, {
               default: I(() => [
                 K(F($.value), 1)
               ]),
@@ -1181,39 +1190,39 @@ const Vt = /* @__PURE__ */ H(Yt, [["render", Ft], ["__scopeId", "data-v-e26ceb2d
             })
           ]),
           _: 1
-        }, 8, ["tabindex", "aria-checked"])) : X("", !0),
-        Ae.value ? (d(), O("hr", qt)) : X("", !0),
-        P(N(Vt), {
+        }, 8, ["tabindex", "aria-checked"])) : J("", !0),
+        Ae.value ? (d(), O("hr", jt)) : J("", !0),
+        x(M(Wt), {
           ref_key: "listboxItemsRef",
-          ref: l,
+          ref: y,
           items: u.items,
           "is-option-disabled": u.isOptionDisabled,
-          "is-multi-level": N(y),
+          "is-multi-level": M(T),
           "static-categories": u.staticCategories,
           searching: u.searching,
-          "selected-items-list": m.value,
-          "focused-index": N($e),
-          onToggleCheckboxSelection: f[0] || (f[0] = (b) => ue("select", b)),
-          onSelectCategory: de,
+          "selected-items-list": g.value,
+          "focused-index": M($e),
+          onToggleCheckboxSelection: f[0] || (f[0] = (b) => de("select", b)),
+          onSelectCategory: ze,
           onUnselectCategory: Ie,
           onToggleCategoryVisibility: ke,
-          onSpacePressed: f[1] || (f[1] = (b) => ue(N(v).SPACE, b)),
-          onTabPressed: f[2] || (f[2] = (b) => ue(N(v).TAB, b)),
-          onEnterPressed: f[3] || (f[3] = (b) => ue(N(v).ENTER, b))
-        }, me({ _: 2 }, [
-          q(N(a), (b, _) => ({
+          onSpacePressed: f[1] || (f[1] = (b) => de(M(v).SPACE, b)),
+          onTabPressed: f[2] || (f[2] = (b) => de(M(v).TAB, b)),
+          onEnterPressed: f[3] || (f[3] = (b) => de(M(v).ENTER, b))
+        }, be({ _: 2 }, [
+          H(M(c), (b, _) => ({
             name: _,
             fn: I((E) => [
-              W(u.$slots, _, ie(be(E)), void 0, !0)
+              W(u.$slots, _, ie(ue(E)), void 0, !0)
             ])
           }))
         ]), 1032, ["items", "is-option-disabled", "is-multi-level", "static-categories", "searching", "selected-items-list", "focused-index"])
       ], 16)), [
-        [N(pe)]
+        [M(pe)]
       ])
     ], 512));
   }
-}), Re = /* @__PURE__ */ H(jt, [["__scopeId", "data-v-5a19f9fe"]]), Ne = {
+}), Re = /* @__PURE__ */ j(Jt, [["__scopeId", "data-v-2a854443"]]), Ne = {
   "en-US": {
     loading: "Loading",
     showMore: "Show more"
@@ -1226,15 +1235,15 @@ const Vt = /* @__PURE__ */ H(Yt, [["render", Ft], ["__scopeId", "data-v-e26ceb2d
     loading: "Carregando",
     showMore: "Mostrar mais"
   }
-}, Xt = 36, Jt = J({
+}, Zt = 36, Qt = Z({
   name: "bento-listbox",
   components: {
-    BentoEmptyState: lt,
-    BentoListboxSingleSelect: $t,
+    BentoEmptyState: it,
+    BentoListboxSingleSelect: Bt,
     BentoListboxMultiSelect: Re,
     BentoTypography: ce,
-    BentoLoadingIndicator: st,
-    BentoLoadingButton: dt
+    BentoLoadingIndicator: ot,
+    BentoLoadingButton: bt
   },
   directives: { BentoKeyboardNavigationDirective: pe },
   i18n: { messages: Ne },
@@ -1345,124 +1354,124 @@ const Vt = /* @__PURE__ */ H(Yt, [["render", Ft], ["__scopeId", "data-v-e26ceb2d
     v.ESCAPE,
     v.TAB
   ],
-  setup(e, { emit: t, slots: s }) {
-    const o = B([]), n = _e(e, "items"), { t: a } = Oe({ messages: Ne }), r = p(() => e.lazyLoadType !== oe.AUTOMATIC), g = p(() => e.lazyLoadType === oe.AUTOMATIC), S = () => {
-      var w;
-      return typeof (e == null ? void 0 : e.virtualScroll) == "object" && ((w = e == null ? void 0 : e.virtualScroll) != null && w.itemHeight) ? e.virtualScroll.itemHeight : Xt;
+  setup(e, { emit: t, slots: n }) {
+    const s = B([]), a = _e(e, "items"), { t: i } = Oe({ messages: Ne }), c = p(() => e.lazyLoadType !== oe.AUTOMATIC), m = p(() => e.lazyLoadType === oe.AUTOMATIC), h = () => {
+      var G;
+      return typeof (e == null ? void 0 : e.virtualScroll) == "object" && ((G = e == null ? void 0 : e.virtualScroll) != null && G.itemHeight) ? e.virtualScroll.itemHeight : Zt;
     }, {
-      containerRef: i,
-      containerProps: c,
-      onScroll: l,
-      list: m,
-      wrapperProps: y
-    } = bt(n, {
-      itemHeight: S(),
+      containerRef: l,
+      containerProps: r,
+      onScroll: o,
+      list: y,
+      wrapperProps: g
+    } = vt(a, {
+      itemHeight: h(),
       // 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"
     }), T = p(
-      () => e.componentLoading !== void 0 || r.value ? "true" : void 0
-    ), M = p(
-      () => r.value && e.loading || e.componentLoading ? "true" : "false"
+      () => e.componentLoading !== void 0 || c.value ? "true" : void 0
+    ), N = p(
+      () => c.value && e.loading || e.componentLoading ? "true" : "false"
     ), D = p(
-      () => r.value || e.componentLoading !== void 0 ? "polite" : void 0
+      () => c.value || e.componentLoading !== void 0 ? "polite" : void 0
     ), A = p(
       () => ({
         "aria-label": e.ariaLabel,
-        "aria-busy": M.value,
+        "aria-busy": N.value,
         "aria-atomic": T.value,
         "aria-live": D.value
       })
-    ), x = p(
+    ), P = p(
       () => e.componentLoading ? {
         ...A.value,
         role: "alert"
       } : {}
-    ), $ = (w) => (de) => {
-      t(w, de);
-    }, k = () => {
+    ), L = (G) => (ee) => {
+      t(G, ee);
+    }, $ = () => {
       t(v.SHOW_MORE);
-    }, h = ot(() => {
-      const w = i.value;
-      if (!w)
+    }, C = nt(() => {
+      const G = l.value;
+      if (!G)
         return;
-      const de = Math.round(w.scrollTop) + w.clientHeight >= w.scrollHeight;
-      e.hasMoreItems && de && !e.loading && k();
-    }), C = () => {
-      g.value ? h() : l();
-    }, U = p(() => {
-      var w;
-      return ((w = e.items) == null ? void 0 : w.length) === 0;
-    }), G = p(
+      const ee = Math.round(G.scrollTop) + G.clientHeight >= G.scrollHeight;
+      e.hasMoreItems && ee && !e.loading && $();
+    }), S = () => {
+      m.value ? C() : o();
+    }, Y = p(() => {
+      var G;
+      return ((G = e.items) == null ? void 0 : G.length) === 0;
+    }), U = p(
       () => e.lazyLoadType === oe.BUTTON && e.hasMoreItems
-    ), Q = p(
+    ), q = p(
       () => e.loading ? De.LOADING : De.START
-    ), ye = p(() => e.loading ? a("loading") : a("showMore")), Se = p(() => ({
+    ), ve = p(() => e.loading ? i("loading") : i("showMore")), ye = p(() => ({
       ...e.emptyState,
       variant: "condensed"
-    })), le = {
-      [v.SELECT]: $(v.SELECT),
-      [v.SPACE]: $(v.SPACE),
-      [v.TAB]: $(v.TAB),
-      [v.ENTER]: $(v.ENTER)
+    })), Se = {
+      [v.SELECT]: L(v.SELECT),
+      [v.SPACE]: L(v.SPACE),
+      [v.TAB]: L(v.TAB),
+      [v.ENTER]: L(v.ENTER)
     };
     return {
       // Refs
-      listboxRef: i,
-      listboxItemRef: o,
+      listboxRef: l,
+      listboxItemRef: s,
       // a11y
       ariaAttributes: A,
-      listboxContainerAttributes: x,
+      listboxContainerAttributes: P,
       // Values
-      containerProps: c,
-      isSearchResultEmpty: U,
-      limitedEmptyStateProps: Se,
-      loadingButtonState: Q,
-      slots: s,
-      shouldDisplayShowMoreButton: G,
-      showMoreButtonText: ye,
-      virtualisedItems: m,
-      wrapperProps: y,
+      containerProps: r,
+      isSearchResultEmpty: Y,
+      limitedEmptyStateProps: ye,
+      loadingButtonState: q,
+      slots: n,
+      shouldDisplayShowMoreButton: U,
+      showMoreButtonText: ve,
+      virtualisedItems: y,
+      wrapperProps: g,
       // Enums
       BentoKeyboardNavigationKeyDownEvent: V,
       BentoListboxEvent: v,
       // Methods
-      onListboxContainerScroll: C,
-      onOptionSelected: $,
-      emitShowMore: k,
-      listboxListeners: le
+      onListboxContainerScroll: S,
+      onOptionSelected: L,
+      emitShowMore: $,
+      listboxListeners: Se
     };
   }
-}), Zt = ["id"], Qt = {
+}), es = ["id"], ts = {
   key: 0,
   class: "b-listbox__loading-filtered-items"
-}, es = {
+}, ss = {
   key: 1,
   class: "b-listbox__empty-search-message"
-}, ts = {
+}, ls = {
   key: 2,
   class: "b-listbox__lazy-load"
-}, ss = {
+}, os = {
   key: 3,
   class: "b-listbox__lazy-load"
 };
-function ls(e, t, s, o, n, a) {
-  var y;
-  const r = L("bento-loading-indicator"), g = L("bento-empty-state"), S = L("bento-typography"), i = L("bento-listbox-multi-select"), c = L("bento-listbox-single-select"), l = L("bento-loading-button"), m = xe("bento-keyboard-navigation-directive");
-  return re((d(), O("div", Y({
+function is(e, t, n, s, a, i) {
+  var g;
+  const c = k("bento-loading-indicator"), m = k("bento-empty-state"), h = k("bento-typography"), l = k("bento-listbox-multi-select"), r = k("bento-listbox-single-select"), o = k("bento-loading-button"), y = xe("bento-keyboard-navigation-directive");
+  return re((d(), O("div", w({
     id: e.id,
     ref: "listboxRef",
     class: "b-listbox",
     tabindex: "-1"
   }, e.listboxContainerAttributes, {
-    style: (y = e.containerProps) == null ? void 0 : y.style,
+    style: (g = e.containerProps) == null ? void 0 : g.style,
     "data-testid": "listbox-container",
     onScroll: t[0] || (t[0] = (...T) => e.onListboxContainerScroll && e.onListboxContainerScroll(...T))
   }), [
-    z("div", ie(be(e.wrapperProps)), [
-      e.componentLoading ? (d(), O("div", Qt, [
-        P(r)
-      ])) : e.isSearchResultEmpty ? (d(), O("div", es, [
-        e.emptyState ? (d(), R(g, ie(Y({ key: 0 }, e.limitedEmptyStateProps)), null, 16)) : (d(), R(S, {
+    z("div", ie(ue(e.wrapperProps)), [
+      e.componentLoading ? (d(), O("div", ts, [
+        x(c)
+      ])) : e.isSearchResultEmpty ? (d(), O("div", ss, [
+        e.emptyState ? (d(), R(m, ie(w({ key: 0 }, e.limitedEmptyStateProps)), null, 16)) : (d(), R(h, {
           key: 1,
           el: "span"
         }, {
@@ -1471,8 +1480,8 @@ function ls(e, t, s, o, n, a) {
           ]),
           _: 1
         }))
-      ])) : (d(), O(se, { key: 2 }, [
-        e.multiple ? (d(), R(i, Y({
+      ])) : (d(), O(le, { key: 2 }, [
+        e.multiple ? (d(), R(l, w({
           key: 0,
           ref: "listboxItemRef",
           "has-more-items": e.hasMoreItems
@@ -1483,14 +1492,14 @@ function ls(e, t, s, o, n, a) {
           "selected-values": e.selectedValue,
           searching: e.searching,
           "is-option-disabled": e.isOptionDisabled
-        }, te(e.listboxListeners)), me({ _: 2 }, [
-          q(e.slots, (T, M) => ({
-            name: M,
+        }, se(e.listboxListeners)), be({ _: 2 }, [
+          H(e.slots, (T, N) => ({
+            name: N,
             fn: I((D) => [
-              W(e.$slots, M, ie(be(D)), void 0, !0)
+              W(e.$slots, N, ie(ue(D)), void 0, !0)
             ])
           }))
-        ]), 1040, ["has-more-items", "items", "lazy-load-type", "static-categories", "selected-values", "searching", "is-option-disabled"])) : (d(), R(c, Y({
+        ]), 1040, ["has-more-items", "items", "lazy-load-type", "static-categories", "selected-values", "searching", "is-option-disabled"])) : (d(), R(r, w({
           key: 1,
           ref: "listboxItemRef",
           items: e.virtualisedItems
@@ -1498,16 +1507,16 @@ function ls(e, t, s, o, n, a) {
           "selected-value": e.selectedValue,
           "static-categories": e.staticCategories,
           "is-option-disabled": e.isOptionDisabled
-        }, te(e.listboxListeners)), me({ _: 2 }, [
-          q(e.slots, (T, M) => ({
-            name: M,
+        }, se(e.listboxListeners)), be({ _: 2 }, [
+          H(e.slots, (T, N) => ({
+            name: N,
             fn: I((D) => [
-              W(e.$slots, M, ie(be(D)), void 0, !0)
+              W(e.$slots, N, ie(ue(D)), void 0, !0)
             ])
           }))
         ]), 1040, ["items", "selected-value", "static-categories", "is-option-disabled"])),
-        e.shouldDisplayShowMoreButton ? (d(), O("div", ts, [
-          P(l, {
+        e.shouldDisplayShowMoreButton ? (d(), O("div", ls, [
+          x(o, {
             state: e.loadingButtonState,
             variant: "secondary",
             onClickCapture: e.emitShowMore
@@ -1517,75 +1526,75 @@ function ls(e, t, s, o, n, a) {
             ]),
             _: 1
           }, 8, ["state", "onClickCapture"])
-        ])) : e.loading ? (d(), O("div", ss, [
-          P(r)
-        ])) : X("", !0)
+        ])) : e.loading ? (d(), O("div", os, [
+          x(c)
+        ])) : J("", !0)
       ], 64))
     ], 16)
-  ], 16, Zt)), [
-    [m]
+  ], 16, es)), [
+    [y]
   ]);
 }
-const Es = /* @__PURE__ */ H(Jt, [["render", ls], ["__scopeId", "data-v-c9aaa0e3"]]), Ee = (e, t) => {
-  for (const s of e) {
-    if (s.value === t)
-      return s;
-    if (s.items) {
-      const o = Ee(s.items, t);
-      if (o)
-        return o;
+const Os = /* @__PURE__ */ j(Qt, [["render", is], ["__scopeId", "data-v-c9aaa0e3"]]), Ee = (e, t) => {
+  for (const n of e) {
+    if (n.value === t)
+      return n;
+    if (n.items) {
+      const s = Ee(n.items, t);
+      if (s)
+        return s;
     }
   }
   return null;
-}, os = (e) => typeof e == "object" && e !== null && "value" in e && "label" in e, _s = (e, t, s, o) => {
-  const n = B([]), a = B(), r = (c) => {
-    s.value ? a.value = c.map(({ value: l }) => l) : a.value = c.length > 0 ? c[0].value : null;
-  }, g = (c) => {
-    s.value ? a.value = c.map(({ value: l, label: m }) => ({ value: l, label: m })) : a.value = c.length > 0 ? { value: c[0].value, label: c[0].label } : null;
-  }, S = (c) => {
-    n.value = c, o != null && o.value ? g(c) : r(c);
-  }, i = () => {
-    n.value = [], a.value = null;
+}, ns = (e) => typeof e == "object" && e !== null && "value" in e && "label" in e, Ts = (e, t, n, s) => {
+  const a = B([]), i = B(), c = (r) => {
+    n.value ? i.value = r.map(({ value: o }) => o) : i.value = r.length > 0 ? r[0].value : null;
+  }, m = (r) => {
+    n.value ? i.value = r.map(({ value: o, label: y }) => ({ value: o, label: y })) : i.value = r.length > 0 ? { value: r[0].value, label: r[0].label } : null;
+  }, h = (r) => {
+    a.value = r, s != null && s.value ? m(r) : c(r);
+  }, l = () => {
+    a.value = [], i.value = null;
   };
   return ne(
     () => t.value,
     () => {
       if (!t.value && t.value !== 0) {
-        i();
+        l();
         return;
       }
-      const c = !Array.isArray(t.value), l = [...n.value];
-      i();
-      const m = (y) => {
-        if (os(y))
-          n.value.push(y);
+      const r = !Array.isArray(t.value), o = [...a.value];
+      l();
+      const y = (g) => {
+        if (ns(g))
+          a.value.push(g);
         else {
-          let T = Ee(e.value, y);
-          T || (T = Ee(l, y)), T || (T = { value: y, label: y.toString() }), n.value.push(T);
+          let T = Ee(e.value, g);
+          T || (T = Ee(o, g)), T || (T = { value: g, label: g.toString() }), a.value.push(T);
         }
       };
-      if (c) {
-        const y = t.value;
-        m(y), o != null && o.value ? g(n.value) : r(n.value);
+      if (r) {
+        const g = t.value;
+        y(g), s != null && s.value ? m(a.value) : c(a.value);
         return;
       }
-      t.value.forEach(m), o != null && o.value ? g(n.value) : r(n.value);
+      t.value.forEach(y), s != null && s.value ? m(a.value) : c(a.value);
     },
     { immediate: !0 }
   ), {
     // Values
-    cachedSelectedListboxOptions: n,
-    cachedListboxSelectedValues: a,
+    cachedSelectedListboxOptions: a,
+    cachedListboxSelectedValues: i,
     // Methods
-    resetCache: i,
-    setCachedValues: S
+    resetCache: l,
+    setCachedValues: h
   };
 };
 export {
   oe as B,
   v as a,
-  Es as b,
-  _s as c,
-  Kt as u
+  Os as b,
+  Ts as c,
+  qt as u
 };
-//# sourceMappingURL=use-cached-selected-values.CatIU1_1.js.map
+//# sourceMappingURL=use-cached-selected-values.CEwKqYIe.js.map