@adyen/bento-vue3 1.32.0 → 1.33.0

package/dist/chunks/{use-cached-selected-values.DplP72ef.js → use-cached-selected-values.DaSn9dB9.js}

@@ -1,41 +1,41 @@
-import { computed as m, ref as M, onMounted as Oe, onUnmounted as xe, watch as Ie, defineComponent as H, resolveComponent as L, openBlock as v, createElementBlock as T, createVNode as R, withCtx as _, createTextVNode as V, toDisplayString as w, createElementVNode as q, renderSlot as G, mergeProps as F, withKeys as ve, createCommentVNode as K, createBlock as D, withModifiers as Ye, normalizeProps as x, guardReactiveProps as j, withDirectives as ae, vShow as Ae, toRef as le, resolveDirective as ye, toHandlers as se, Fragment as Q, renderList as z, createSlots as ie, normalizeClass as ge, unref as ce, pushScopeId as Ke, popScopeId as qe } from "vue";
-import { B as Y, a as Se } from "./keyboard-navigation.Clz1jOaA.js";
-import { B as ee } from "./typography.CSIykcgS.js";
-import { B as We } from "./loading-indicator.BFMEf39U.js";
-import { B as je } from "./empty-state.CApqeBsH.js";
-import { u as ue } from "./i18n.DY5YXG5f.js";
-import { d as He } from "./debounce.DUTu11PS.js";
-import { _ as W } from "./_plugin-vue_export-helper.CHgC5LLL.js";
-import { B as Ce } from "./checkbox.Blsg-Tvr.js";
-import { a as Xe, C as Ze } from "./chevron-up.5-KtIp8i.js";
-import { B as Je } from "./base-button.jyEuuRdl.js";
-import { C as Qe } from "./cross-small.48UCoOqB.js";
-import { B as et, a as he } from "./loading-button.CrijUhme.js";
-import { o as tt } from "./resize.Bqks3WUm.js";
+import { computed as v, ref as M, onMounted as Oe, onUnmounted as Fe, watch as Ie, defineComponent as W, resolveComponent as L, openBlock as f, createElementBlock as _, createVNode as B, withCtx as T, createTextVNode as G, toDisplayString as w, createElementVNode as K, renderSlot as z, mergeProps as U, withKeys as ve, createCommentVNode as Y, createBlock as D, withModifiers as Ye, normalizeProps as ee, guardReactiveProps as ne, withDirectives as ae, vShow as Ae, toRef as se, resolveDirective as pe, toHandlers as te, Fragment as Z, renderList as x, createSlots as ie, normalizeClass as fe, unref as ce, normalizeStyle as Ke } from "vue";
+import { B as F, a as Se } from "./keyboard-navigation.Clz1jOaA.js";
+import { B as J } from "./typography.z9P0Ec3Q.js";
+import { B as qe } from "./loading-indicator.BFMEf39U.js";
+import { B as We } from "./empty-state.CyEWCcDk.js";
+import { u as ue } from "./i18n.DL9GT2-k.js";
+import { d as je } from "./debounce.DUTu11PS.js";
+import { _ as q } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import { B as Ce } from "./checkbox.FQ03XNeR.js";
+import { a as He, C as Xe } from "./chevron-up.DQZG_BP3.js";
+import { B as Ze } from "./base-button.BxUrydaP.js";
+import { C as Je } from "./cross-small.CXWTuKA_.js";
+import { B as Qe, a as he } from "./loading-button.Mx-oDIGy.js";
+import { o as et } from "./resize.Bqks3WUm.js";
 import "../assets/use-cached-selected-values.css";
-const $e = (e, t, n, u) => {
-  const c = m(
+const $e = (e, t, a, c) => {
+  const u = v(
     () => {
-      var i, r;
-      return !!((i = e.value) != null && i.length) && ((r = e.value) == null ? void 0 : r.length) === t.value.length;
+      var l, r;
+      return !!((l = e.value) != null && l.length) && ((r = e.value) == null ? void 0 : r.length) === t.value.length;
     }
-  ), a = m(() => {
-    var i;
-    return e.value == null || e.value.length === 0 ? !1 : ((i = e.value) == null ? void 0 : i.length) !== t.value.length;
+  ), n = v(() => {
+    var l;
+    return e.value == null || e.value.length === 0 ? !1 : ((l = e.value) == null ? void 0 : l.length) !== t.value.length;
   });
   return {
-    isAllSelected: c,
-    isIndeterminate: a,
-    toggleSelectAll: (i) => {
-      i ? n() : u();
+    isAllSelected: u,
+    isIndeterminate: n,
+    toggleSelectAll: (l) => {
+      l ? a() : c();
     }
   };
 };
-function st(e, { disabled: t, itemHeight: n, overscan: u = 5, prefixHeight: c }) {
-  const a = M(null), s = M([]), i = M(0), r = M(0), o = M(0);
-  let p;
-  const l = m(() => {
-    const C = typeof n == "number" ? e.value.length * n : e.value.reduce((B, S, A) => B + n(A), 0), O = typeof n == "number" ? i.value * n : e.value.slice(0, i.value).reduce((B, S, A) => B + n(A), 0);
+function tt(e, { disabled: t, itemHeight: a, overscan: c = 5, prefixHeight: u }) {
+  const n = M(null), s = M([]), l = M(0), r = M(0), i = M(0);
+  let y;
+  const o = v(() => {
+    const C = typeof a == "number" ? e.value.length * a : e.value.reduce((k, S, I) => k + a(I), 0), O = typeof a == "number" ? l.value * a : e.value.slice(0, l.value).reduce((k, S, I) => k + a(I), 0);
     return {
       style: {
         marginTop: `${O}px`,
@@ -43,73 +43,73 @@ function st(e, { disabled: t, itemHeight: n, overscan: u = 5, prefixHeight: c })
       }
     };
   }), d = () => {
-    const C = (c == null ? void 0 : c.value) ?? 0, O = Math.max(a.value.scrollTop - C, 0);
-    if (typeof n == "number")
-      return Math.floor(O / n);
-    let B = 0, S = 0;
-    for (let A = 0; A < e.value.length; A += 1) {
-      const U = n(A);
-      if (B += U, B >= O) {
-        S = A;
+    const C = (u == null ? void 0 : u.value) ?? 0, O = Math.max(n.value.scrollTop - C, 0);
+    if (typeof a == "number")
+      return Math.floor(O / a);
+    let k = 0, S = 0;
+    for (let I = 0; I < e.value.length; I += 1) {
+      const V = a(I);
+      if (k += V, k >= O) {
+        S = I;
         break;
       }
     }
     return S;
-  }, k = () => {
-    if (o.value = a.value.clientHeight, typeof n == "number")
-      return Math.ceil(o.value / n);
-    const C = i.value ?? 0;
-    let O = 0, B = 0;
+  }, R = () => {
+    if (i.value = n.value.clientHeight, typeof a == "number")
+      return Math.ceil(i.value / a);
+    const C = l.value ?? 0;
+    let O = 0, k = 0;
     for (let S = C; S < e.value.length; S += 1) {
-      const A = n(S);
-      if (O += A, B = S, O > o.value)
+      const I = a(S);
+      if (O += I, k = S, O > i.value)
         break;
     }
-    return B - C;
-  }, I = () => {
-    if (a.value) {
-      const C = k();
-      i.value = d(), r.value = Math.min(i.value + C + u, e.value.length), s.value = e.value.slice(i.value, r.value);
+    return k - C;
+  }, $ = () => {
+    if (n.value) {
+      const C = R();
+      l.value = d(), r.value = Math.min(l.value + C + c, e.value.length), s.value = e.value.slice(l.value, r.value);
     }
   }, N = () => {
-    I();
+    $();
   };
   t || (Oe(() => {
-    a.value && (o.value = a.value.clientHeight, p = tt(a.value, ({ clientHeight: C }) => {
-      o.value = C, I();
-    }), I());
-  }), xe(() => {
-    p == null || p.disconnect();
+    n.value && (i.value = n.value.clientHeight, y = et(n.value, ({ clientHeight: C }) => {
+      i.value = C, $();
+    }), $());
+  }), Fe(() => {
+    y == null || y.disconnect();
   }), Ie(
     () => e.value,
     () => {
-      I();
+      $();
     }
   ));
-  const g = {
-    ref: a,
+  const m = {
+    ref: n,
     style: { overflowY: "auto" }
   };
   return t ? {
-    containerRef: a,
-    containerProps: g,
+    containerRef: n,
+    containerProps: m,
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     onScroll: () => {
     },
     list: e
   } : {
-    containerRef: a,
-    containerProps: g,
+    containerRef: n,
+    containerProps: m,
     onScroll: N,
     list: s,
-    wrapperProps: l
+    wrapperProps: o
   };
 }
-var b = /* @__PURE__ */ ((e) => (e.SELECT = "select", e.SHOW_MORE = "show-more", e.ESCAPE = "escape-pressed", e.CLICK = "click", e.ENTER = "enter-pressed", e.SPACE = "space-pressed", e.TAB = "tab-pressed", e.CLOSE_DROPDOWN = "close-dropdown", e))(b || {}), J = /* @__PURE__ */ ((e) => (e.AUTOMATIC = "automatic", e.BUTTON = "button", e.NONE = "none", e))(J || {});
-const lt = H({
+var b = /* @__PURE__ */ ((e) => (e.SELECT = "select", e.SHOW_MORE = "show-more", e.ESCAPE = "escape-pressed", e.CLICK = "click", e.ENTER = "enter-pressed", e.SPACE = "space-pressed", e.TAB = "tab-pressed", e.CLOSE_DROPDOWN = "close-dropdown", e))(b || {}), X = /* @__PURE__ */ ((e) => (e.AUTOMATIC = "automatic", e.BUTTON = "button", e.NONE = "none", e))(X || {});
+const st = W({
   name: "bento-listbox-static-category",
   components: {
-    BentoTypography: ee
+    BentoTypography: J
   },
   props: {
     /**
@@ -120,26 +120,26 @@ const lt = H({
       required: !0
     }
   }
-}), ot = { class: "b-listbox-single-select-category" };
-function nt(e, t, n, u, c, a) {
+}), lt = { class: "b-listbox-single-select-category" };
+function ot(e, t, a, c, u, n) {
   const s = L("bento-typography");
-  return v(), T("div", ot, [
-    R(s, {
+  return f(), _("div", lt, [
+    B(s, {
       variant: "caption",
       el: "span",
       class: "b-listbox-single-select-category__label-text"
     }, {
-      default: _(() => [
-        V(w(e.categoryLabel), 1)
+      default: T(() => [
+        G(w(e.categoryLabel), 1)
       ]),
       _: 1
     }),
-    q("div", null, [
-      G(e.$slots, "default", {}, void 0, !0)
+    K("div", null, [
+      z(e.$slots, "default", {}, void 0, !0)
     ])
   ]);
 }
-const it = /* @__PURE__ */ W(lt, [["render", nt], ["__scopeId", "data-v-a90eff17"]]), at = H({
+const nt = /* @__PURE__ */ q(st, [["render", ot], ["__scopeId", "data-v-a90eff17"]]), it = W({
   name: "bento-listbox-option",
   props: {
     /**
@@ -153,28 +153,28 @@ const it = /* @__PURE__ */ W(lt, [["render", nt], ["__scopeId", "data-v-a90eff17
   },
   emits: [b.CLICK, b.ENTER, b.SPACE, b.TAB],
   setup(e, { emit: t }) {
-    const n = m(() => ({
+    const a = v(() => ({
       "b-listbox-option--disabled": e.disabled,
       "b-listbox-option--selected": e.selected
     }));
     return {
       // Enums
-      BentoKeyboardNavigationKeyDownEvent: Y,
+      BentoKeyboardNavigationKeyDownEvent: F,
       BentoListboxEvent: b,
       // Values
-      conditionalClasses: n,
+      conditionalClasses: a,
       // Events
-      onClick: (a) => {
-        t(b.CLICK, a);
+      onClick: (n) => {
+        t(b.CLICK, n);
       },
-      onOptionSelected: (a, s) => {
-        t(a, s);
+      onOptionSelected: (n, s) => {
+        t(n, s);
       }
     };
   }
 });
-function rt(e, t, n, u, c, a) {
-  return v(), T("label", F({
+function at(e, t, a, c, u, n) {
+  return f(), _("label", U({
     class: ["b-listbox-option", e.conditionalClasses],
     role: "option"
   }, e.$attrs, {
@@ -185,37 +185,37 @@ function rt(e, t, n, u, c, a) {
       t[3] || (t[3] = ve((s) => e.onOptionSelected(e.BentoListboxEvent.TAB, s), ["tab"]))
     ]
   }), [
-    G(e.$slots, "default", {}, void 0, !0)
+    z(e.$slots, "default", {}, void 0, !0)
   ], 16);
 }
-const de = /* @__PURE__ */ W(at, [["render", rt], ["__scopeId", "data-v-18a61f5d"]]);
+const de = /* @__PURE__ */ q(it, [["render", at], ["__scopeId", "data-v-18a61f5d"]]);
 let Ee = 0;
-const ct = {
+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, c, a) {
-  return v(), T("svg", F({ role: "img" }, e.$attrs, {
+}, ct = { key: 0 };
+function ut(e, t, a, c, u, n) {
+  return f(), _("svg", U({ role: "img" }, e.$attrs, {
     class: "ui-assets-icons-16",
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     fill: "none"
   }), [
-    e.$attrs["svg-title"] ? (v(), T("title", ut, w(e.$attrs["svg-title"]), 1)) : K("", !0),
-    dt
+    e.$attrs["svg-title"] ? (f(), _("title", ct, w(e.$attrs["svg-title"]), 1)) : Y("", !0),
+    t[0] || (t[0] = K("path", {
+      fill: "#00112C",
+      d: "M15.0608 4.00011L14.0001 2.93945L6.00011 10.9395L2.00011 6.93945L0.939453 8.00011L6.00011 13.0608L15.0608 4.00011Z"
+    }, null, -1))
   ], 16);
 }
-const mt = /* @__PURE__ */ W(ct, [["render", bt]]), vt = H({
+const dt = /* @__PURE__ */ q(rt, [["render", ut]]), bt = W({
   name: "bento-listbox-single-select-option",
   components: {
     BentoListboxOption: de,
-    BentoTypography: ee,
-    CheckmarkIcon: mt
+    BentoTypography: J,
+    CheckmarkIcon: dt
   },
   props: {
     /**
@@ -237,58 +237,58 @@ const mt = /* @__PURE__ */ W(ct, [["render", bt]]), vt = H({
   },
   emits: [b.ENTER, b.SELECT, b.SPACE, b.TAB],
   setup(e, { emit: t }) {
-    const n = (s) => {
+    const a = (s) => {
       e.disabled || t(s, e.option);
-    }, u = m(() => e.disabled ? !0 : null), c = m(() => e.selected ? !0 : null), a = m(() => e.disabled ? -1 : 0);
+    }, c = v(() => e.disabled ? !0 : null), u = v(() => e.selected ? !0 : null), n = v(() => e.disabled ? -1 : 0);
     return {
       // Values
-      ariaDisabled: u,
-      ariaSelected: c,
-      tabIndex: a,
+      ariaDisabled: c,
+      ariaSelected: u,
+      tabIndex: n,
       // Enums
       BentoListboxEvent: b,
       // Events
-      onOptionSelected: n
+      onOptionSelected: a
     };
   }
-}), gt = { class: "b-listbox-single-select-option__text" }, ft = { class: "b-listbox-single-select-option__check-icon" };
-function pt(e, t, n, u, c, a) {
-  const s = L("bento-typography"), i = L("checkmark-icon"), r = L("bento-listbox-option");
-  return v(), D(r, {
+}), mt = { class: "b-listbox-single-select-option__text" }, vt = { class: "b-listbox-single-select-option__check-icon" };
+function ft(e, t, a, c, u, n) {
+  const s = L("bento-typography"), l = L("checkmark-icon"), r = L("bento-listbox-option");
+  return f(), D(r, {
     class: "b-listbox-single-select-option",
     disabled: e.disabled,
     selected: e.selected,
     "aria-selected": e.ariaSelected,
     "aria-disabled": e.ariaDisabled,
     tabindex: e.tabIndex,
-    onClick: t[0] || (t[0] = (o) => e.onOptionSelected(e.BentoListboxEvent.SELECT)),
-    onEnterPressed: t[1] || (t[1] = (o) => e.onOptionSelected(e.BentoListboxEvent.ENTER)),
-    onSpacePressed: t[2] || (t[2] = Ye((o) => e.onOptionSelected(e.BentoListboxEvent.SPACE), ["prevent"])),
-    onTabPressed: t[3] || (t[3] = (o) => e.onOptionSelected(e.BentoListboxEvent.TAB))
+    onClick: t[0] || (t[0] = (i) => e.onOptionSelected(e.BentoListboxEvent.SELECT)),
+    onEnterPressed: t[1] || (t[1] = (i) => e.onOptionSelected(e.BentoListboxEvent.ENTER)),
+    onSpacePressed: t[2] || (t[2] = Ye((i) => e.onOptionSelected(e.BentoListboxEvent.SPACE), ["prevent"])),
+    onTabPressed: t[3] || (t[3] = (i) => e.onOptionSelected(e.BentoListboxEvent.TAB))
   }, {
-    default: _(() => [
-      G(e.$slots, "default", x(j(e.option)), () => [
-        q("span", gt, [
-          R(s, { el: "span" }, {
-            default: _(() => [
-              V(w(e.option.label), 1)
+    default: T(() => [
+      z(e.$slots, "default", ee(ne(e.option)), () => [
+        K("span", mt, [
+          B(s, { el: "span" }, {
+            default: T(() => [
+              G(w(e.option.label), 1)
             ]),
             _: 1
           }),
-          e.option.description ? (v(), D(s, {
+          e.option.description ? (f(), D(s, {
             key: 0,
             class: "b-listbox-single-select-option__description",
             el: "span"
           }, {
-            default: _(() => [
-              V(w(e.option.description), 1)
+            default: T(() => [
+              G(w(e.option.description), 1)
             ]),
             _: 1
-          })) : K("", !0)
+          })) : Y("", !0)
         ])
       ], !0),
-      q("span", ft, [
-        ae(R(i, { "svg-title": "selected" }, null, 512), [
+      K("span", vt, [
+        ae(B(l, { "svg-title": "selected" }, null, 512), [
           [Ae, e.selected]
         ])
       ])
@@ -296,15 +296,15 @@ function pt(e, t, n, u, c, a) {
     _: 3
   }, 8, ["disabled", "selected", "aria-selected", "aria-disabled", "tabindex"]);
 }
-const yt = /* @__PURE__ */ W(vt, [["render", pt], ["__scopeId", "data-v-226f4c84"]]), ke = ({ items: e, isOptionDisabled: t, hasStaticCategories: n }, u) => {
-  const c = m(
-    () => n.value ? e.value.flatMap((g) => g.items) : e.value
-  ), a = m(() => c.value.length - 1), s = M(0);
+const gt = /* @__PURE__ */ q(bt, [["render", ft], ["__scopeId", "data-v-226f4c84"]]), ke = ({ items: e, isOptionDisabled: t, hasStaticCategories: a }, c) => {
+  const u = v(
+    () => a.value ? e.value.flatMap((m) => m.items) : e.value
+  ), n = v(() => u.value.length - 1), s = M(0);
   Oe(() => {
-    t && (s.value = e.value.findIndex((g) => !t(g)));
+    t && (s.value = e.value.findIndex((m) => !t(m)));
   });
-  const i = (g) => !t || !!t && t(e.value[g]), r = (g) => !t || !!t && !t(e.value[g]), o = (g) => {
-    switch (g) {
+  const l = (m) => !t || !!t && t(e.value[m]), r = (m) => !t || !!t && !t(e.value[m]), i = (m) => {
+    switch (m) {
       case "increase":
         s.value += 1;
         break;
@@ -312,26 +312,26 @@ const yt = /* @__PURE__ */ W(vt, [["render", pt], ["__scopeId", "data-v-226f4c84
         s.value -= 1;
         break;
     }
-  }, p = ({ edgeCaseItem: g, isItemBeforeEdgeCaseItem: C }, O, B) => {
-    s.value !== g && (C ? r(g) && o(B) : (o(B), i(s.value) && O()), u(s.value));
-  }, l = (g) => {
+  }, y = ({ edgeCaseItem: m, isItemBeforeEdgeCaseItem: C }, O, k) => {
+    s.value !== m && (C ? r(m) && i(k) : (i(k), l(s.value) && O()), c(s.value));
+  }, o = (m) => {
     var O;
-    (O = g == null ? void 0 : g.detail) == null || O.preventDefault();
-    const C = s.value === a.value - 2;
-    p(
+    (O = m == null ? void 0 : m.detail) == null || O.preventDefault();
+    const C = s.value === n.value - 2;
+    y(
       {
         isItemBeforeEdgeCaseItem: C,
-        edgeCaseItem: a.value
+        edgeCaseItem: n.value
       },
-      l,
+      o,
       "increase"
       /* INCREASE */
     );
-  }, d = (g) => {
+  }, d = (m) => {
     var O;
-    (O = g == null ? void 0 : g.detail) == null || O.preventDefault();
+    (O = m == null ? void 0 : m.detail) == null || O.preventDefault();
     const C = s.value === 1;
-    p(
+    y(
       {
         edgeCaseItem: 0,
         isItemBeforeEdgeCaseItem: C
@@ -343,22 +343,22 @@ const yt = /* @__PURE__ */ W(vt, [["render", pt], ["__scopeId", "data-v-226f4c84
   };
   return {
     moveToFirstElement: () => {
-      s.value = 0, i(s.value) ? l() : u(s.value);
+      s.value = 0, l(s.value) ? o() : c(s.value);
     },
     moveToLastElement: () => {
-      s.value = a.value, i(s.value) ? d() : u(s.value);
+      s.value = n.value, l(s.value) ? d() : c(s.value);
     },
-    moveToNextElement: l,
+    moveToNextElement: o,
     moveToPreviousElement: d,
-    setListboxFocusedIndex: (g) => {
-      s.value = g;
+    setListboxFocusedIndex: (m) => {
+      s.value = m;
     }
   };
-}, St = H({
+}, yt = W({
   name: "bento-listbox-single-select",
   components: {
-    BentoListboxSingleSelectCategory: it,
-    BentoListboxSingleSelectOption: yt
+    BentoListboxSingleSelectCategory: nt,
+    BentoListboxSingleSelectOption: gt
   },
   directives: { BentoKeyboardNavigationDirective: Se },
   inheritAttrs: !1,
@@ -402,104 +402,104 @@ const yt = /* @__PURE__ */ W(vt, [["render", pt], ["__scopeId", "data-v-226f4c84
     staticCategories: { type: Boolean, default: !1 }
   },
   emits: [b.SELECT, b.ENTER, b.SPACE, b.TAB],
-  setup(e, { emit: t, expose: n, slots: u }) {
-    const c = M([]), a = m(() => {
-      var g;
-      return !!((g = e.selectedValue) != null && g.length) && e.selectedValue.at(0);
-    }), s = m(() => !!e.items.some(({ items: g }) => !!g)), i = (g) => (C) => {
-      t(g, [C]);
-    }, r = (g) => c.value[g].$el.focus(), {
-      moveToNextElement: o,
-      moveToPreviousElement: p,
-      moveToFirstElement: l,
+  setup(e, { emit: t, expose: a, slots: c }) {
+    const u = M([]), n = v(() => {
+      var m;
+      return !!((m = e.selectedValue) != null && m.length) && e.selectedValue.at(0);
+    }), s = v(() => !!e.items.some(({ items: m }) => !!m)), l = (m) => (C) => {
+      t(m, [C]);
+    }, r = (m) => u.value[m].$el.focus(), {
+      moveToNextElement: i,
+      moveToPreviousElement: y,
+      moveToFirstElement: o,
       moveToLastElement: d,
-      setListboxFocusedIndex: k
+      setListboxFocusedIndex: R
     } = ke(
       {
-        items: le(e, "items"),
+        items: se(e, "items"),
         isOptionDisabled: e.isOptionDisabled,
-        hasStaticCategories: le(e, "staticCategories")
+        hasStaticCategories: se(e, "staticCategories")
       },
       r
-    ), I = {
-      [Y.ARROW_UP]: p,
-      [Y.ARROW_DOWN]: o,
-      [Y.HOME]: l,
-      [Y.END]: d
+    ), $ = {
+      [F.ARROW_UP]: y,
+      [F.ARROW_DOWN]: i,
+      [F.HOME]: o,
+      [F.END]: d
     }, N = {
-      [b.SELECT]: i(b.SELECT),
-      [b.SPACE]: i(b.SPACE),
-      [b.TAB]: i(b.TAB),
-      [b.ENTER]: i(b.ENTER)
+      [b.SELECT]: l(b.SELECT),
+      [b.SPACE]: l(b.SPACE),
+      [b.TAB]: l(b.TAB),
+      [b.ENTER]: l(b.ENTER)
     };
-    return n({
+    return a({
       /**
        * Reference for a single listbox item.
        * Required for keyboard navigation in dropdown as $children is removed in vue@3
        */
-      listboxItemRef: c,
+      listboxItemRef: u,
       /**
        * Method to set the index of the item to be focused on
        * Used for focus management to be kept in-sync with parent e.g. dropdowns
        */
-      setListboxFocusedIndex: k
+      setListboxFocusedIndex: R
     }), {
       // Enums
       BentoListboxEvent: b,
       // Values
-      listboxItemRef: c,
-      selectedItem: a,
-      slots: u,
+      listboxItemRef: u,
+      selectedItem: n,
+      slots: c,
       // Computed
       hasCategories: s,
       // Methods
-      onOptionSelected: i,
+      onOptionSelected: l,
       // Keyboard navigation
-      listboxListeners: I,
+      listboxListeners: $,
       listboxOptionListeners: N
     };
   }
 });
-function Ct(e, t, n, u, c, a) {
-  const s = L("bento-listbox-single-select-option"), i = L("bento-listbox-single-select-category"), r = ye("bento-keyboard-navigation-directive");
-  return ae((v(), T("div", se(e.listboxListeners, !0), [
-    e.hasCategories && e.staticCategories ? (v(!0), T(Q, { key: 0 }, z(e.items, (o) => (v(), D(i, {
-      key: o.value,
-      "category-label": o.label,
+function pt(e, t, a, c, u, n) {
+  const s = L("bento-listbox-single-select-option"), l = L("bento-listbox-single-select-category"), r = pe("bento-keyboard-navigation-directive");
+  return ae((f(), _("div", te(e.listboxListeners, !0), [
+    e.hasCategories && e.staticCategories ? (f(!0), _(Z, { key: 0 }, x(e.items, (i) => (f(), D(l, {
+      key: i.value,
+      "category-label": i.label,
       role: "group"
     }, {
-      default: _(() => [
-        (v(!0), T(Q, null, z(o.items, (p) => (v(), D(s, F({
-          key: p.value,
+      default: T(() => [
+        (f(!0), _(Z, null, x(i.items, (y) => (f(), D(s, U({
+          key: y.value,
           ref_for: !0,
           ref: "listboxItemRef",
           role: "option",
-          option: p,
-          disabled: e.isOptionDisabled ? e.isOptionDisabled(p) : null,
-          selected: p.value === e.selectedItem.value
-        }, se(e.listboxOptionListeners)), ie({ _: 2 }, [
-          z(e.slots, (l, d) => ({
+          option: y,
+          disabled: e.isOptionDisabled ? e.isOptionDisabled(y) : null,
+          selected: y.value === e.selectedItem.value
+        }, te(e.listboxOptionListeners)), ie({ _: 2 }, [
+          x(e.slots, (o, d) => ({
             name: d,
-            fn: _((k) => [
-              G(e.$slots, d, x(j(k)))
+            fn: T((R) => [
+              z(e.$slots, d, U({ ref_for: !0 }, R))
             ])
           }))
         ]), 1040, ["option", "disabled", "selected"]))), 128))
       ]),
       _: 2
-    }, 1032, ["category-label"]))), 128)) : (v(!0), T(Q, { key: 1 }, z(e.items, (o) => (v(), D(s, F({
-      key: o.value,
+    }, 1032, ["category-label"]))), 128)) : (f(!0), _(Z, { key: 1 }, x(e.items, (i) => (f(), D(s, U({
+      key: i.value,
       ref_for: !0,
       ref: "listboxItemRef",
       role: "option",
-      option: o,
-      disabled: e.isOptionDisabled ? e.isOptionDisabled(o) : null,
-      selected: o.value === e.selectedItem.value
-    }, se(e.listboxOptionListeners)), ie({ _: 2 }, [
-      z(e.slots, (p, l) => ({
-        name: l,
-        fn: _((d) => [
-          G(e.$slots, l, x(j(d)))
+      option: i,
+      disabled: e.isOptionDisabled ? e.isOptionDisabled(i) : null,
+      selected: i.value === e.selectedItem.value
+    }, te(e.listboxOptionListeners)), ie({ _: 2 }, [
+      x(e.slots, (y, o) => ({
+        name: o,
+        fn: T((d) => [
+          z(e.$slots, o, U({ ref_for: !0 }, d))
         ])
       }))
     ]), 1040, ["option", "disabled", "selected"]))), 128))
@@ -507,22 +507,22 @@ function Ct(e, t, n, u, c, a) {
     [r]
   ]);
 }
-const ht = /* @__PURE__ */ W(St, [["render", Ct]]);
-var fe = /* @__PURE__ */ ((e) => (e.DISABLED = "disabled", e.STATIC_CATEGORY = "static-category", e))(fe || {}), ne = /* @__PURE__ */ ((e) => (e.SELECT_CATEGORY = "select-category", e.UNSELECT_CATEGORY = "unselect-category", e))(ne || {});
-const Et = {
+const St = /* @__PURE__ */ q(yt, [["render", pt]]);
+var ge = /* @__PURE__ */ ((e) => (e.DISABLED = "disabled", e.STATIC_CATEGORY = "static-category", e))(ge || {}), oe = /* @__PURE__ */ ((e) => (e.SELECT_CATEGORY = "select-category", e.UNSELECT_CATEGORY = "unselect-category", e))(oe || {});
+const Ct = {
   "en-US": {
     categoryClosed: "{category} closed",
     categoryOpened: "{category} opened"
   }
-}, Lt = H({
-  i18n: { messages: Et },
+}, ht = W({
+  i18n: { messages: Ct },
   name: "bento-listbox-multi-select-category",
   components: {
     BentoCheckbox: Ce,
-    BentoTypography: ee,
+    BentoTypography: J,
     BentoListboxOption: de,
-    ChevronDownIcon: Xe,
-    ChevronUpIcon: Ze
+    ChevronDownIcon: He,
+    ChevronUpIcon: Xe
   },
   props: {
     /**
@@ -563,78 +563,78 @@ const Et = {
      */
     staticCategories: { type: Boolean, default: !1 }
   },
-  emits: [ne.SELECT_CATEGORY, ne.UNSELECT_CATEGORY],
+  emits: [oe.SELECT_CATEGORY, oe.UNSELECT_CATEGORY],
   setup(e, { emit: t }) {
-    const n = M(!1), { t: u } = ue(), c = (S) => e.isOptionDisabled ? e.isOptionDisabled(S) : !1, a = m(
-      () => e.category.items.every((S) => c(S))
-    ), s = le(e, "staticCategories"), i = m(() => n.value || e.staticCategories), r = m(() => ({
-      [`b-listbox-multi-select-category--${fe.DISABLED}`]: a.value,
-      [`b-listbox-multi-select-category--${fe.STATIC_CATEGORY}`]: e.staticCategories
-    })), o = (S) => {
-      S.preventDefault(), n.value = !n.value;
-    }, p = (S) => {
-      var te;
-      const A = c(S), U = ((te = e.selectedItemsList) == null ? void 0 : te.includes(S.value)) || !1;
-      return { isDisabled: A, isPreSelected: U };
-    }, l = m(
+    const a = M(!1), { t: c } = ue(), u = (S) => e.isOptionDisabled ? e.isOptionDisabled(S) : !1, n = v(
+      () => e.category.items.every((S) => u(S))
+    ), s = se(e, "staticCategories"), l = v(() => a.value || e.staticCategories), r = v(() => ({
+      [`b-listbox-multi-select-category--${ge.DISABLED}`]: n.value,
+      [`b-listbox-multi-select-category--${ge.STATIC_CATEGORY}`]: e.staticCategories
+    })), i = (S) => {
+      S.preventDefault(), a.value = !a.value;
+    }, y = (S) => {
+      var Q;
+      const I = u(S), V = ((Q = e.selectedItemsList) == null ? void 0 : Q.includes(S.value)) || !1;
+      return { isDisabled: I, isPreSelected: V };
+    }, o = v(
       () => e.category.items.filter((S) => {
-        const { isDisabled: A, isPreSelected: U } = p(S);
-        return A && U || !A;
+        const { isDisabled: I, isPreSelected: V } = y(S);
+        return I && V || !I;
       })
-    ), d = m(
+    ), d = v(
       () => {
         var S;
-        return (S = l.value) == null ? void 0 : S.filter(
-          ({ value: A }) => {
-            var U;
-            return (U = e.selectedItemsList) == null ? void 0 : U.includes(A);
+        return (S = o.value) == null ? void 0 : S.filter(
+          ({ value: I }) => {
+            var V;
+            return (V = e.selectedItemsList) == null ? void 0 : V.includes(I);
           }
         );
       }
-    ), k = m(() => {
-      const S = n.value ? "categoryOpened" : "categoryClosed";
-      return u(S, { category: e.category.label });
-    }), I = m(
+    ), R = v(() => {
+      const S = a.value ? "categoryOpened" : "categoryClosed";
+      return c(S, { category: e.category.label });
+    }), $ = v(
       () => ({
         el: "span",
         variant: e.staticCategories ? "caption" : "body"
       })
     ), N = () => {
-      t(ne.SELECT_CATEGORY);
-    }, g = () => {
-      t(ne.UNSELECT_CATEGORY);
-    }, { isAllSelected: C, isIndeterminate: O, toggleSelectAll: B } = $e(
+      t(oe.SELECT_CATEGORY);
+    }, m = () => {
+      t(oe.UNSELECT_CATEGORY);
+    }, { isAllSelected: C, isIndeterminate: O, toggleSelectAll: k } = $e(
       d,
-      l,
+      o,
       N,
-      g
+      m
     );
     return {
       // Values
-      chevronTitle: k,
+      chevronTitle: R,
       conditionalClass: r,
-      hasAllPropsDisabled: a,
-      isOpen: n,
+      hasAllPropsDisabled: n,
+      isOpen: a,
       isAllSelected: C,
       isIndeterminate: O,
       isStaticCategory: s,
       // Computed
-      showItemChildren: i,
-      categoryLabelProps: I,
+      showItemChildren: l,
+      categoryLabelProps: $,
       // Methods
-      toggleOpen: o,
-      toggleSelectAll: B
+      toggleOpen: i,
+      toggleSelectAll: k
     };
   }
-}), _t = { class: "b-listbox-multi-select-category__label" };
-function Tt(e, t, n, u, c, a) {
-  const s = L("bento-checkbox"), i = L("bento-typography"), r = L("chevron-up-icon"), o = L("chevron-down-icon"), p = L("bento-listbox-option");
-  return v(), T("div", null, [
-    R(p, {
-      class: ge(["b-listbox-multi-select-category__option", e.conditionalClass])
+}), Et = { class: "b-listbox-multi-select-category__label" };
+function Lt(e, t, a, c, u, n) {
+  const s = L("bento-checkbox"), l = L("bento-typography"), r = L("chevron-up-icon"), i = L("chevron-down-icon"), y = L("bento-listbox-option");
+  return f(), _("div", null, [
+    B(y, {
+      class: fe(["b-listbox-multi-select-category__option", e.conditionalClass])
     }, {
-      default: _(() => [
-        e.isStaticCategory ? K("", !0) : (v(), D(s, {
+      default: T(() => [
+        e.isStaticCategory ? Y("", !0) : (f(), D(s, {
           key: 0,
           "model-value": e.isAllSelected,
           indeterminate: e.isIndeterminate,
@@ -643,23 +643,23 @@ function Tt(e, t, n, u, c, a) {
           value: e.category.value,
           "onUpdate:modelValue": e.toggleSelectAll
         }, null, 8, ["model-value", "indeterminate", "disabled", "aria-label", "value", "onUpdate:modelValue"])),
-        q("span", _t, [
-          R(i, F(e.categoryLabelProps, { class: "b-listbox-multi-select-category__label-text" }), {
-            default: _(() => [
-              V(w(e.category.label), 1)
+        K("span", Et, [
+          B(l, U(e.categoryLabelProps, { class: "b-listbox-multi-select-category__label-text" }), {
+            default: T(() => [
+              G(w(e.category.label), 1)
             ]),
             _: 1
           }, 16),
-          e.isStaticCategory ? K("", !0) : (v(), T("div", {
+          e.isStaticCategory ? Y("", !0) : (f(), _("div", {
             key: 0,
             class: "b-listbox-multi-select-category__label-chevron",
             "data-testid": "toggle-listbox",
-            onClickCapture: t[0] || (t[0] = (...l) => e.toggleOpen && e.toggleOpen(...l))
+            onClickCapture: t[0] || (t[0] = (...o) => e.toggleOpen && e.toggleOpen(...o))
           }, [
-            e.isOpen ? (v(), D(r, {
+            e.isOpen ? (f(), D(r, {
               key: 0,
               "svg-title": e.chevronTitle
-            }, null, 8, ["svg-title"])) : (v(), D(o, {
+            }, null, 8, ["svg-title"])) : (f(), D(i, {
               key: 1,
               "svg-title": e.chevronTitle
             }, null, 8, ["svg-title"]))
@@ -668,22 +668,22 @@ function Tt(e, t, n, u, c, a) {
       ]),
       _: 1
     }, 8, ["class"]),
-    ae(q("div", null, [
-      G(e.$slots, "default", {}, void 0, !0)
+    ae(K("div", null, [
+      z(e.$slots, "default", {}, void 0, !0)
     ], 512), [
       [Ae, e.showItemChildren]
     ])
   ]);
 }
-const Ot = /* @__PURE__ */ W(Lt, [["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 = H({
+const Tt = /* @__PURE__ */ q(ht, [["render", Lt], ["__scopeId", "data-v-9a00de22"]]);
+var H = /* @__PURE__ */ ((e) => (e.SELECT_CATEGORY = "select-category", e.TOGGLE_CHECKBOX_SELECTION = "toggle-checkbox-selection", e.UNSELECT_CATEGORY = "unselect-category", e))(H || {});
+const _t = W({
   name: "listbox-multi-select-options",
   components: {
     BentoCheckbox: Ce,
     BentoListboxOption: de,
-    BentoTypography: ee,
-    ListboxMultiSelectCategory: Ot
+    BentoTypography: J,
+    ListboxMultiSelectCategory: Tt
   },
   props: {
     /**
@@ -741,93 +741,93 @@ const It = H({
     staticCategories: { type: Boolean, default: !1 }
   },
   emits: [
-    Z.TOGGLE_CHECKBOX_SELECTION,
-    Z.SELECT_CATEGORY,
-    Z.UNSELECT_CATEGORY
+    H.TOGGLE_CHECKBOX_SELECTION,
+    H.SELECT_CATEGORY,
+    H.UNSELECT_CATEGORY
   ],
   setup(e, { emit: t }) {
-    const n = (r) => {
-      t(Z.TOGGLE_CHECKBOX_SELECTION, r);
-    }, u = (r) => !!r.items, c = (r) => {
-      const o = e.isMultiLevel && e.searching;
-      return r.description && (!e.isMultiLevel || o);
-    }, a = (r) => r.items ? !!r.items.find((o) => e.selectedItemsList.includes(o.value)) : e.selectedItemsList.includes(r.value), s = (r, o) => {
-      if (u(o))
-        return t(r ? Z.SELECT_CATEGORY : Z.UNSELECT_CATEGORY, o);
-      n(o.value);
+    const a = (r) => {
+      t(H.TOGGLE_CHECKBOX_SELECTION, r);
+    }, c = (r) => !!r.items, u = (r) => {
+      const i = e.isMultiLevel && e.searching;
+      return r.description && (!e.isMultiLevel || i);
+    }, n = (r) => r.items ? !!r.items.find((i) => e.selectedItemsList.includes(i.value)) : e.selectedItemsList.includes(r.value), s = (r, i) => {
+      if (c(i))
+        return t(r ? H.SELECT_CATEGORY : H.UNSELECT_CATEGORY, i);
+      a(i.value);
     };
     return {
       // Values
-      conditionalClasses: m(() => ({
+      conditionalClasses: v(() => ({
         "b-listbox-multi-select-options__static-category-option": e.staticCategories,
         "b-listbox-multi-select-options__category-option": e.categoryItems
       })),
       // Methods
-      isOptionSelected: a,
-      shouldShowDescription: c,
-      toggleCheckboxSelection: n,
+      isOptionSelected: n,
+      shouldShowDescription: u,
+      toggleCheckboxSelection: a,
       selectSearch: s,
       // Enums
       BentoListboxEvent: b,
-      ListboxMultiSelectOptionsEvent: Z
+      ListboxMultiSelectOptionsEvent: H
     };
   }
-}), At = { class: "b-listbox-multi-select__option-text" }, $t = { class: "b-listbox-multi-select__option-text" };
-function kt(e, t, n, u, c, a) {
-  const s = L("bento-checkbox"), i = L("bento-typography"), r = L("bento-listbox-option"), o = L("listbox-multi-select-options", !0), p = L("listbox-multi-select-category");
-  return v(), T("div", null, [
-    (v(!0), T(Q, null, z(e.items, (l) => (v(), T("div", {
-      key: `selected-${l.value}`
+}), Ot = { class: "b-listbox-multi-select__option-text" }, It = { class: "b-listbox-multi-select__option-text" };
+function At(e, t, a, c, u, n) {
+  const s = L("bento-checkbox"), l = L("bento-typography"), r = L("bento-listbox-option"), i = L("listbox-multi-select-options", !0), y = L("listbox-multi-select-category");
+  return f(), _("div", null, [
+    (f(!0), _(Z, null, x(e.items, (o) => (f(), _("div", {
+      key: `selected-${o.value}`
     }, [
-      e.searching && e.isMultiLevel ? (v(), D(r, {
+      e.searching && e.isMultiLevel ? (f(), D(r, {
         key: 0,
-        class: ge(["b-listbox-multi-select-options", e.conditionalClasses]),
-        disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null
+        class: fe(["b-listbox-multi-select-options", e.conditionalClasses]),
+        disabled: e.isOptionDisabled ? e.isOptionDisabled(o) : null
       }, {
-        default: _(() => [
-          R(s, {
-            "model-value": e.isOptionSelected(l),
-            "aria-label": l.label,
-            disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null,
-            value: l.value,
-            "onUpdate:modelValue": (d) => e.selectSearch(d, l)
+        default: T(() => [
+          B(s, {
+            "model-value": e.isOptionSelected(o),
+            "aria-label": o.label,
+            disabled: e.isOptionDisabled ? e.isOptionDisabled(o) : null,
+            value: o.value,
+            "onUpdate:modelValue": (d) => e.selectSearch(d, o)
           }, null, 8, ["model-value", "aria-label", "disabled", "value", "onUpdate:modelValue"]),
-          G(e.$slots, "default", x(j(l)), () => [
-            q("span", At, [
-              R(i, { el: "span" }, {
-                default: _(() => [
-                  V(w(l.label), 1)
+          z(e.$slots, "default", U({ ref_for: !0 }, o), () => [
+            K("span", Ot, [
+              B(l, { el: "span" }, {
+                default: T(() => [
+                  G(w(o.label), 1)
                 ]),
                 _: 2
               }, 1024),
-              e.shouldShowDescription(l) ? (v(), D(i, {
+              e.shouldShowDescription(o) ? (f(), D(l, {
                 key: 0,
                 class: "b-listbox-multi-select__option-description",
                 el: "span"
               }, {
-                default: _(() => [
-                  V(w(l.description), 1)
+                default: T(() => [
+                  G(w(o.description), 1)
                 ]),
                 _: 2
-              }, 1024)) : K("", !0)
+              }, 1024)) : Y("", !0)
             ])
           ], !0)
         ]),
         _: 2
-      }, 1032, ["class", "disabled"])) : (v(), T(Q, { key: 1 }, [
-        l.items ? (v(), D(p, {
+      }, 1032, ["class", "disabled"])) : (f(), _(Z, { key: 1 }, [
+        o.items ? (f(), D(y, {
           key: 0,
-          category: l,
+          category: o,
           "static-categories": e.staticCategories,
           "is-option-disabled": e.isOptionDisabled,
           "selected-items-list": e.selectedItemsList,
-          onSelectCategory: (d) => e.$emit(e.ListboxMultiSelectOptionsEvent.SELECT_CATEGORY, l),
-          onUnselectCategory: (d) => e.$emit(e.ListboxMultiSelectOptionsEvent.UNSELECT_CATEGORY, l)
+          onSelectCategory: (d) => e.$emit(e.ListboxMultiSelectOptionsEvent.SELECT_CATEGORY, o),
+          onUnselectCategory: (d) => e.$emit(e.ListboxMultiSelectOptionsEvent.UNSELECT_CATEGORY, o)
         }, {
-          default: _(() => [
-            R(o, {
+          default: T(() => [
+            B(i, {
               "category-items": "",
-              items: l.items,
+              items: o.items,
               "is-option-disabled": e.isOptionDisabled,
               "is-multi-level": e.isMultiLevel,
               "static-categories": e.staticCategories,
@@ -837,37 +837,37 @@ function kt(e, t, n, u, c, a) {
             }, 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"])) : (v(), D(r, {
+        }, 1032, ["category", "static-categories", "is-option-disabled", "selected-items-list", "onSelectCategory", "onUnselectCategory"])) : (f(), D(r, {
           key: 1,
-          class: ge(["b-listbox-multi-select-options", e.conditionalClasses]),
-          disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null
+          class: fe(["b-listbox-multi-select-options", e.conditionalClasses]),
+          disabled: e.isOptionDisabled ? e.isOptionDisabled(o) : null
         }, {
-          default: _(() => [
-            R(s, {
+          default: T(() => [
+            B(s, {
               "model-value": e.selectedItemsList,
-              "aria-label": l.label,
-              disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null,
-              value: l.value,
-              "onUpdate:modelValue": (d) => e.toggleCheckboxSelection(l)
+              "aria-label": o.label,
+              disabled: e.isOptionDisabled ? e.isOptionDisabled(o) : null,
+              value: o.value,
+              "onUpdate:modelValue": (d) => e.toggleCheckboxSelection(o)
             }, null, 8, ["model-value", "aria-label", "disabled", "value", "onUpdate:modelValue"]),
-            G(e.$slots, "default", x(j(l)), () => [
-              q("span", $t, [
-                R(i, { el: "span" }, {
-                  default: _(() => [
-                    V(w(l.label), 1)
+            z(e.$slots, "default", U({ ref_for: !0 }, o), () => [
+              K("span", It, [
+                B(l, { el: "span" }, {
+                  default: T(() => [
+                    G(w(o.label), 1)
                   ]),
                   _: 2
                 }, 1024),
-                e.shouldShowDescription(l) ? (v(), D(i, {
+                e.shouldShowDescription(o) ? (f(), D(l, {
                   key: 0,
                   class: "b-listbox-multi-select__option-description",
                   el: "span"
                 }, {
-                  default: _(() => [
-                    V(w(l.description), 1)
+                  default: T(() => [
+                    G(w(o.description), 1)
                   ]),
                   _: 2
-                }, 1024)) : K("", !0)
+                }, 1024)) : Y("", !0)
               ])
             ], !0)
           ]),
@@ -877,14 +877,14 @@ function kt(e, t, n, u, c, a) {
     ]))), 128))
   ]);
 }
-const Bt = /* @__PURE__ */ W(It, [["render", kt], ["__scopeId", "data-v-25938a72"]]), Be = {
+const $t = /* @__PURE__ */ q(_t, [["render", At], ["__scopeId", "data-v-25938a72"]]), Be = {
   "en-US": {
     remove: "Remove"
   }
-}, Rt = { class: "b-listbox-multi-select-chips" }, Dt = {
+}, kt = { class: "b-listbox-multi-select-chips" }, Bt = {
   i18n: { messages: Be }
-}, Nt = /* @__PURE__ */ H({
-  ...Dt,
+}, Rt = /* @__PURE__ */ W({
+  ...Bt,
   __name: "listbox-multi-select-chips",
   props: {
     /**
@@ -908,29 +908,29 @@ const Bt = /* @__PURE__ */ W(It, [["render", kt], ["__scopeId", "data-v-25938a72
   },
   emits: ["unselect-item", "unselect-category"],
   setup(e, { emit: t }) {
-    const { t: n } = ue({ messages: Be }), u = (c) => c.items ? t("unselect-category", c) : t("unselect-item", c);
-    return (c, a) => (v(), T("div", Rt, [
-      (v(!0), T(Q, null, z(e.items, (s) => (v(), T("div", {
-        key: `selected-${s.value}`
+    const a = t, { t: c } = ue({ messages: Be }), u = (n) => n.items ? a("unselect-category", n) : a("unselect-item", n);
+    return (n, s) => (f(), _("div", kt, [
+      (f(!0), _(Z, null, x(e.items, (l) => (f(), _("div", {
+        key: `selected-${l.value}`
       }, [
-        R(ce(Je), {
+        B(ce(Ze), {
           class: "b-listbox-multi-select-chips__chip",
-          disabled: e.isOptionDisabled ? e.isOptionDisabled(s) : null,
-          onClick: (i) => u(s)
+          disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null,
+          onClick: (r) => u(l)
         }, {
-          iconRight: _(() => [
-            R(ce(Qe), {
-              "svg-title": ce(n)("remove")
+          iconRight: T(() => [
+            B(ce(Je), {
+              "svg-title": ce(c)("remove")
             }, null, 8, ["svg-title"])
           ]),
-          default: _(() => [
-            R(ce(ee), {
+          default: T(() => [
+            B(ce(J), {
               el: "span",
               variant: "caption",
               class: "b-listbox-multi-select-chips__option-text"
             }, {
-              default: _(() => [
-                V(w(s.label), 1)
+              default: T(() => [
+                G(w(l.label), 1)
               ]),
               _: 2
             }, 1024)
@@ -940,34 +940,34 @@ const Bt = /* @__PURE__ */ W(It, [["render", kt], ["__scopeId", "data-v-25938a72
       ]))), 128))
     ]));
   }
-}), Mt = /* @__PURE__ */ W(Nt, [["__scopeId", "data-v-7c5f8bdb"]]), Le = {
+}), Dt = /* @__PURE__ */ q(Rt, [["__scopeId", "data-v-7c5f8bdb"]]), Le = {
   "en-US": {
     allSelected: "All selected ({total})",
     numberOfTotalSelected: "{number} of {total} selected",
     numbersSelected: "{number} selected",
     selectAll: "Select all ({total})"
   }
-}, Pt = (e) => {
-  const t = m(() => {
-    var u;
-    return !!((u = e.value) != null && u.find(({ items: c }) => !!c));
-  }), n = m(() => {
-    var u;
-    return t.value ? (u = e.value) == null ? void 0 : u.reduce((c, a) => (a.items ? c.push(...a.items.flat()) : c.push(a), c), []) : e.value;
+}, Nt = (e) => {
+  const t = v(() => {
+    var c;
+    return !!((c = e.value) != null && c.find(({ items: u }) => !!u));
+  }), a = v(() => {
+    var c;
+    return t.value ? (c = e.value) == null ? void 0 : c.reduce((u, n) => (n.items ? u.push(...n.items.flat()) : u.push(n), u), []) : e.value;
   });
   return {
     isMultiLevelSelect: t,
-    flattenedItemsList: n
+    flattenedItemsList: a
   };
-}, wt = H({
+}, Mt = W({
   i18n: { messages: Le },
   name: "bento-listbox-multi-select",
   components: {
     BentoCheckbox: Ce,
     BentoListboxOption: de,
-    BentoTypography: ee,
-    ListboxMultiSelectOptions: Bt,
-    ListboxMultiSelectChips: Mt
+    BentoTypography: J,
+    ListboxMultiSelectOptions: $t,
+    ListboxMultiSelectChips: Dt
   },
   directives: { BentoKeyboardNavigationDirective: Se },
   props: {
@@ -1006,8 +1006,8 @@ const Bt = /* @__PURE__ */ W(It, [["render", kt], ["__scopeId", "data-v-25938a72
      */
     lazyLoadType: {
       type: String,
-      default: J.NONE,
-      validator: (e) => Object.values(J).includes(e)
+      default: X.NONE,
+      validator: (e) => Object.values(X).includes(e)
     },
     /**
      * Flag that indicates that an external search it's being made
@@ -1030,182 +1030,182 @@ const Bt = /* @__PURE__ */ W(It, [["render", kt], ["__scopeId", "data-v-25938a72
     staticCategories: { type: Boolean, default: !1 }
   },
   emits: [b.SELECT],
-  setup(e, { emit: t, slots: n }) {
-    const { t: u } = ue({ messages: Le }), c = M(null), a = M(null), s = M(null), i = m(
-      () => e.selectedValues.map(({ value: f }) => f)
-    ), { isMultiLevelSelect: r, flattenedItemsList: o } = Pt(le(e, "items")), p = (f) => {
-      var $;
-      const y = e.isOptionDisabled(f), h = (($ = i.value) == null ? void 0 : $.includes(f.value)) || !1;
-      return { isDisabled: y, isPreSelected: h };
-    }, l = m(() => {
+  setup(e, { emit: t, slots: a }) {
+    const { t: c } = ue({ messages: Le }), u = M(null), n = M(null), s = M(null), l = v(
+      () => e.selectedValues.map(({ value: g }) => g)
+    ), { isMultiLevelSelect: r, flattenedItemsList: i } = Nt(se(e, "items")), y = (g) => {
+      var A;
+      const p = e.isOptionDisabled(g), h = ((A = l.value) == null ? void 0 : A.includes(g.value)) || !1;
+      return { isDisabled: p, isPreSelected: h };
+    }, o = v(() => {
       if (e.searching && r)
         return e.items;
-      const f = o.value.filter((y) => {
-        const { isDisabled: h, isPreSelected: $ } = p(y);
-        return h && $ || !h;
+      const g = i.value.filter((p) => {
+        const { isDisabled: h, isPreSelected: A } = y(p);
+        return h && A || !h;
       });
-      return e.selectedValues.forEach((y) => {
-        f.find((h) => h.value === y.value) || f.push(y);
-      }), f;
-    }), d = m(
+      return e.selectedValues.forEach((p) => {
+        g.find((h) => h.value === p.value) || g.push(p);
+      }), g;
+    }), d = v(
       () => {
-        var f;
-        return (f = l.value) == null ? void 0 : f.filter((y) => {
+        var g;
+        return (g = o.value) == null ? void 0 : g.filter((p) => {
           var h;
-          return y.items && r.value && e.searching ? y.items.filter(
+          return p.items && r.value && e.searching ? p.items.filter(
             (E) => (e.selectedValues ?? []).includes(E.value)
-          ).length === y.items.length : (h = i.value) == null ? void 0 : h.includes(y.value);
+          ).length === p.items.length : (h = l.value) == null ? void 0 : h.includes(p.value);
         });
       }
-    ), k = () => r.value && !e.searching ? o.value.length : e.items.length, I = m(() => {
-      var $;
-      const f = l.value.length, y = k(), h = (($ = d.value) == null ? void 0 : $.length) || 0;
-      return h === 0 ? u("selectAll", { total: f }) : h === y ? u("allSelected", { total: y }) : h <= y ? u("numberOfTotalSelected", { number: h, total: y }) : u("numbersSelected", { number: h });
-    }), N = (f) => {
-      const y = ($) => {
-        const { isDisabled: E, isPreSelected: X } = p($);
-        return E && X || !E;
-      }, h = f.filter(y).filter(($) => !i.value.includes($.value));
+    ), R = () => r.value && !e.searching ? i.value.length : e.items.length, $ = v(() => {
+      var A;
+      const g = o.value.length, p = R(), h = ((A = d.value) == null ? void 0 : A.length) || 0;
+      return h === 0 ? c("selectAll", { total: g }) : h === p ? c("allSelected", { total: p }) : h <= p ? c("numberOfTotalSelected", { number: h, total: p }) : c("numbersSelected", { number: h });
+    }), N = (g) => {
+      const p = (A) => {
+        const { isDisabled: E, isPreSelected: j } = y(A);
+        return E && j || !E;
+      }, h = g.filter(p).filter((A) => !l.value.includes(A.value));
       t(b.SELECT, [...e.selectedValues, ...h]);
-    }, g = (f) => {
-      const y = (E) => {
-        const { isDisabled: X, isPreSelected: Fe } = p(E);
-        return !(X && Fe);
-      }, h = f.filter(y).map(({ value: E }) => E), $ = e.selectedValues.filter((E) => !(h != null && h.includes(E.value)));
-      t(b.SELECT, $);
+    }, m = (g) => {
+      const p = (E) => {
+        const { isDisabled: j, isPreSelected: xe } = y(E);
+        return !(j && xe);
+      }, h = g.filter(p).map(({ value: E }) => E), A = e.selectedValues.filter((E) => !(h != null && h.includes(E.value)));
+      t(b.SELECT, A);
     }, C = () => {
-      N(o.value);
+      N(i.value);
     }, O = () => {
-      g(o.value);
-    }, { isAllSelected: B, isIndeterminate: S, toggleSelectAll: A } = $e(
+      m(i.value);
+    }, { isAllSelected: k, isIndeterminate: S, toggleSelectAll: I } = $e(
       d,
-      l,
+      o,
       C,
       O
-    ), U = (f) => {
-      N(f.items);
-    }, te = (f) => {
-      g(f.items);
-    }, be = (f, y) => {
+    ), V = (g) => {
+      N(g.items);
+    }, Q = (g) => {
+      m(g.items);
+    }, be = (g, p) => {
       let h = !1;
-      const $ = e.selectedValues.filter(({ value: E }) => y.value === E ? (h = !0, !1) : !0);
-      h || $.push(y), t(f, $);
-    }, re = m(() => {
+      const A = e.selectedValues.filter(({ value: E }) => p.value === E ? (h = !0, !1) : !0);
+      h || A.push(p), t(g, A);
+    }, re = v(() => {
       if (!r.value)
         return e.selectedValues;
-      const f = (E) => i.value.includes(E.value), y = (E) => !e.staticCategories && E.every((X) => f(X));
+      const g = (E) => l.value.includes(E.value), p = (E) => !e.staticCategories && E.every((j) => g(j));
       return e.items.flatMap(
-        (E) => E.items && !y(E.items) ? E.items : E
-      ).filter((E) => E.items ? !0 : f(E));
-    }), me = m(() => {
-      var h, $, E, X;
-      const f = ["automatic", "button"].includes(e.lazyLoadType), y = ((h = e.selectedValues) == null ? void 0 : h.length) > 0 && (($ = d.value) == null ? void 0 : $.length) !== ((E = o.value) == null ? void 0 : E.length);
-      return f && e.hasMoreItems ? !!((X = e.selectedValues) != null && X.length) : y;
-    }), P = m(() => ["automatic", "button"].includes(e.lazyLoadType) ? !e.hasMoreItems : !0), oe = m(
-      () => c.value ? [c.value] : []
-    ), Re = m(
+        (E) => E.items && !p(E.items) ? E.items : E
+      ).filter((E) => E.items ? !0 : g(E));
+    }), me = v(() => {
+      var h, A, E, j;
+      const g = ["automatic", "button"].includes(e.lazyLoadType), p = ((h = e.selectedValues) == null ? void 0 : h.length) > 0 && ((A = d.value) == null ? void 0 : A.length) !== ((E = i.value) == null ? void 0 : E.length);
+      return g && e.hasMoreItems ? !!((j = e.selectedValues) != null && j.length) : p;
+    }), P = v(() => ["automatic", "button"].includes(e.lazyLoadType) ? !e.hasMoreItems : !0), le = v(
+      () => u.value ? [u.value] : []
+    ), Re = v(
       () => {
-        var f, y;
-        return (y = (f = a.value) == null ? void 0 : f.$children) != null && y.length ? a.value.$children : [];
+        var g, p;
+        return (p = (g = n.value) == null ? void 0 : g.$children) != null && p.length ? n.value.$children : [];
       }
-    ), De = m(
+    ), De = v(
       () => {
-        var f, y;
-        return (y = (f = s.value) == null ? void 0 : f.$children) != null && y.length ? s.value.$children : [];
+        var g, p;
+        return (p = (g = s.value) == null ? void 0 : g.$children) != null && p.length ? s.value.$children : [];
       }
-    ), Ne = m(() => ({ label: I, value: B })), Me = m(() => [
+    ), Ne = v(() => ({ label: $, value: k })), Me = v(() => [
       Ne,
       ...re.value,
-      ...o.value
-    ]), Pe = (f) => {
+      ...i.value
+    ]), Pe = (g) => {
       [
-        ...oe.value,
+        ...le.value,
         ...Re.value,
         ...De.value
-      ][f].$el.focus();
+      ][g].$el.focus();
     }, { moveToNextElement: we, moveToPreviousElement: Ue, moveToFirstElement: Ve, moveToLastElement: Ge } = ke(
       {
         items: M(Me),
         isOptionDisabled: e.isOptionDisabled,
-        hasStaticCategories: le(e, "staticCategories")
+        hasStaticCategories: se(e, "staticCategories")
       },
       Pe
     ), ze = {
-      [Y.ARROW_UP]: (f) => Ue(f),
-      [Y.ARROW_DOWN]: (f) => we(f),
-      [Y.HOME]: Ve,
-      [Y.END]: Ge
+      [F.ARROW_UP]: (g) => Ue(g),
+      [F.ARROW_DOWN]: (g) => we(g),
+      [F.HOME]: Ve,
+      [F.END]: Ge
     };
     return {
       // Refs
-      selectAllListboxItemsRef: c,
-      selectedListboxItemsRef: a,
+      selectAllListboxItemsRef: u,
+      selectedListboxItemsRef: n,
       listboxItemsRef: s,
       // Values
-      isAllSelected: B,
+      isAllSelected: k,
       showSelectedItems: me,
       isIndeterminate: S,
       isMultiLevelSelect: r,
-      flattenedItemsList: o,
-      selectedItemsList: i,
-      selectAllCheckboxText: I,
+      flattenedItemsList: i,
+      selectedItemsList: l,
+      selectAllCheckboxText: $,
       selectedOptions: re,
       showSelectAllCheckbox: P,
-      slots: n,
+      slots: a,
       // Enums
       BentoListboxEvent: b,
       // Methods
-      selectAllCategory: U,
+      selectAllCategory: V,
       toggleCheckboxSelection: be,
-      toggleSelectAll: A,
-      unselectAllCategory: te,
+      toggleSelectAll: I,
+      unselectAllCategory: Q,
       // Events
       listboxListeners: ze
     };
   }
-}), Ut = (e) => (Ke("data-v-282f5857"), e = e(), qe(), e), Vt = {
+}), Pt = {
   key: 1,
   class: "b-listbox-multi-select__divider"
-}, Gt = { key: 2 }, zt = /* @__PURE__ */ Ut(() => /* @__PURE__ */ q("hr", { class: "b-listbox-multi-select__divider" }, null, -1));
-function Ft(e, t, n, u, c, a) {
-  const s = L("bento-checkbox"), i = L("bento-typography"), r = L("bento-listbox-option"), o = L("listbox-multi-select-chips"), p = L("listbox-multi-select-options"), l = ye("bento-keyboard-navigation-directive");
-  return ae((v(), T("div", F({ class: "b-listbox-multi-select" }, se(e.listboxListeners, !0)), [
-    e.showSelectAllCheckbox ? (v(), D(r, {
+}, wt = { key: 2 };
+function Ut(e, t, a, c, u, n) {
+  const s = L("bento-checkbox"), l = L("bento-typography"), r = L("bento-listbox-option"), i = L("listbox-multi-select-chips"), y = L("listbox-multi-select-options"), o = pe("bento-keyboard-navigation-directive");
+  return ae((f(), _("div", U({ class: "b-listbox-multi-select" }, te(e.listboxListeners, !0)), [
+    e.showSelectAllCheckbox ? (f(), D(r, {
       key: 0,
       ref: "selectAllListboxItemsRef",
       class: "b-listbox-multi-select__option"
     }, {
-      default: _(() => [
-        R(s, {
+      default: T(() => [
+        B(s, {
           "aria-label": e.selectAllCheckboxText,
           "model-value": e.isAllSelected,
           indeterminate: e.isIndeterminate,
           "onUpdate:modelValue": e.toggleSelectAll
         }, null, 8, ["aria-label", "model-value", "indeterminate", "onUpdate:modelValue"]),
-        R(i, {
+        B(l, {
           el: "span",
           "aria-hidden": "true"
         }, {
-          default: _(() => [
-            V(w(e.selectAllCheckboxText), 1)
+          default: T(() => [
+            G(w(e.selectAllCheckboxText), 1)
           ]),
           _: 1
         })
       ]),
       _: 1
-    }, 512)) : K("", !0),
-    e.showSelectAllCheckbox ? (v(), T("hr", Vt)) : K("", !0),
-    e.showSelectedItems ? (v(), T("div", Gt, [
-      R(o, {
+    }, 512)) : Y("", !0),
+    e.showSelectAllCheckbox ? (f(), _("hr", Pt)) : Y("", !0),
+    e.showSelectedItems ? (f(), _("div", wt, [
+      B(i, {
         ref: "selectedListboxItemsRef",
         items: e.selectedOptions,
         "is-option-disabled": e.isOptionDisabled,
         onUnselectCategory: e.unselectAllCategory,
         onUnselectItem: t[0] || (t[0] = (d) => e.toggleCheckboxSelection(e.BentoListboxEvent.SELECT, d))
       }, null, 8, ["items", "is-option-disabled", "onUnselectCategory"]),
-      zt
-    ])) : K("", !0),
-    R(p, {
+      t[5] || (t[5] = K("hr", { class: "b-listbox-multi-select__divider" }, null, -1))
+    ])) : Y("", !0),
+    B(y, {
       ref: "listboxItemsRef",
       items: e.items,
       "is-option-disabled": e.isOptionDisabled,
@@ -1220,34 +1220,34 @@ function Ft(e, t, n, u, c, a) {
       onTabPressed: t[3] || (t[3] = (d) => e.toggleCheckboxSelection(e.BentoListboxEvent.TAB, d)),
       onEnterPressed: t[4] || (t[4] = (d) => e.toggleCheckboxSelection(e.BentoListboxEvent.ENTER, d))
     }, ie({ _: 2 }, [
-      z(e.slots, (d, k) => ({
-        name: k,
-        fn: _((I) => [
-          G(e.$slots, k, x(j(I)), void 0, !0)
+      x(e.slots, (d, R) => ({
+        name: R,
+        fn: T(($) => [
+          z(e.$slots, R, ee(ne($)), void 0, !0)
         ])
       }))
     ]), 1032, ["items", "is-option-disabled", "is-multi-level", "static-categories", "searching", "selected-items-list", "onSelectCategory", "onUnselectCategory"])
   ], 16)), [
-    [l]
+    [o]
   ]);
 }
-const _e = /* @__PURE__ */ W(wt, [["render", Ft], ["__scopeId", "data-v-282f5857"]]), Te = {
+const Te = /* @__PURE__ */ q(Mt, [["render", Ut], ["__scopeId", "data-v-282f5857"]]), _e = {
   "en-US": {
     showMore: "Show more",
     loading: "Loading"
   }
-}, xt = 36, Yt = H({
+}, Vt = 36, Gt = W({
   name: "bento-listbox",
   components: {
-    BentoEmptyState: je,
-    BentoListboxSingleSelect: ht,
-    BentoListboxMultiSelect: _e,
-    BentoTypography: ee,
-    BentoLoadingIndicator: We,
-    BentoLoadingButton: et
+    BentoEmptyState: We,
+    BentoListboxSingleSelect: St,
+    BentoListboxMultiSelect: Te,
+    BentoTypography: J,
+    BentoLoadingIndicator: qe,
+    BentoLoadingButton: Qe
   },
   directives: { BentoKeyboardNavigationDirective: Se },
-  i18n: { messages: Te },
+  i18n: { messages: _e },
   props: {
     /**
      * Defines a string value that labels an interactive element.
@@ -1303,8 +1303,8 @@ const _e = /* @__PURE__ */ W(wt, [["render", Ft], ["__scopeId", "data-v-282f5857
      */
     lazyLoadType: {
       type: String,
-      default: J.NONE,
-      validator: (e) => Object.values(J).includes(e)
+      default: X.NONE,
+      validator: (e) => Object.values(X).includes(e)
     },
     /**
      * If enabled, the user will be able to select multiple items.
@@ -1324,7 +1324,7 @@ const _e = /* @__PURE__ */ W(wt, [["render", Ft], ["__scopeId", "data-v-282f5857
      *
      * If enabled, hides the "Select all" checkbox in "multiple" mode.
      */
-    searching: _e.props.searching,
+    searching: Te.props.searching,
     /**
      * The `input` value.
      * Providing an empty string or empty array will select no options.
@@ -1351,46 +1351,46 @@ const _e = /* @__PURE__ */ W(wt, [["render", Ft], ["__scopeId", "data-v-282f5857
     b.ESCAPE,
     b.TAB
   ],
-  setup(e, { emit: t, slots: n }) {
-    const u = M([]), c = le(e, "items"), { t: a } = ue({ messages: Te }), s = m(() => e.lazyLoadType !== J.AUTOMATIC), i = m(() => e.lazyLoadType === J.AUTOMATIC), r = () => {
+  setup(e, { emit: t, slots: a }) {
+    const c = M([]), u = se(e, "items"), { t: n } = ue({ messages: _e }), s = v(() => e.lazyLoadType !== X.AUTOMATIC), l = v(() => e.lazyLoadType === X.AUTOMATIC), r = () => {
       var P;
-      return typeof (e == null ? void 0 : e.virtualScroll) == "object" && ((P = e == null ? void 0 : e.virtualScroll) != null && P.itemHeight) ? e.virtualScroll.itemHeight : xt;
+      return typeof (e == null ? void 0 : e.virtualScroll) == "object" && ((P = e == null ? void 0 : e.virtualScroll) != null && P.itemHeight) ? e.virtualScroll.itemHeight : Vt;
     }, {
-      containerRef: o,
-      containerProps: p,
-      onScroll: l,
+      containerRef: i,
+      containerProps: y,
+      onScroll: o,
       list: d,
-      wrapperProps: k
-    } = st(c, {
+      wrapperProps: R
+    } = tt(u, {
       itemHeight: r(),
       // Disable virtual scrolling if not enabled or if lazy loading is enabled or if multi-select
       disabled: (e == null ? void 0 : e.multiple) || (e == null ? void 0 : e.virtualScroll) === !1 || (e == null ? void 0 : e.lazyLoadType) !== "none"
-    }), I = m(
+    }), $ = v(
       () => s.value ? "true" : void 0
-    ), N = m(
+    ), N = v(
       () => s.value && e.loading ? "true" : "false"
-    ), g = m(
+    ), m = v(
       () => s.value ? "polite" : void 0
-    ), C = (P) => (oe) => {
-      t(P, oe);
+    ), C = (P) => (le) => {
+      t(P, le);
     }, O = () => {
       t(b.SHOW_MORE);
-    }, B = He(() => {
-      const P = o.value;
+    }, k = je(() => {
+      const P = i.value;
       if (!P)
         return;
-      const oe = Math.round(P.scrollTop) + P.clientHeight >= P.scrollHeight;
-      e.hasMoreItems && oe && !e.loading && O();
+      const le = Math.round(P.scrollTop) + P.clientHeight >= P.scrollHeight;
+      e.hasMoreItems && le && !e.loading && O();
     }), S = () => {
-      i.value ? B() : l();
-    }, A = m(() => {
+      l.value ? k() : o();
+    }, I = v(() => {
       var P;
       return ((P = e.items) == null ? void 0 : P.length) === 0;
-    }), U = m(
-      () => e.lazyLoadType === J.BUTTON && e.hasMoreItems
-    ), te = m(
+    }), V = v(
+      () => e.lazyLoadType === X.BUTTON && e.hasMoreItems
+    ), Q = v(
       () => e.loading ? he.LOADING : he.START
-    ), be = m(() => e.loading ? a("loading") : a("showMore")), re = m(() => ({
+    ), be = v(() => e.loading ? n("loading") : n("showMore")), re = v(() => ({
       ...e.emptyState,
       variant: "condensed"
     })), me = {
@@ -1401,24 +1401,24 @@ const _e = /* @__PURE__ */ W(wt, [["render", Ft], ["__scopeId", "data-v-282f5857
     };
     return {
       // Refs
-      listboxRef: o,
-      listboxItemRef: u,
+      listboxRef: i,
+      listboxItemRef: c,
       // a11y
-      ariaAtomic: I,
+      ariaAtomic: $,
       ariaBusy: N,
-      ariaLive: g,
+      ariaLive: m,
       // Values
-      containerProps: p,
-      isSearchResultEmpty: A,
+      containerProps: y,
+      isSearchResultEmpty: I,
       limitedEmptyStateProps: re,
-      loadingButtonState: te,
-      slots: n,
-      shouldDisplayShowMoreButton: U,
+      loadingButtonState: Q,
+      slots: a,
+      shouldDisplayShowMoreButton: V,
       showMoreButtonText: be,
       virtualisedItems: d,
-      wrapperProps: k,
+      wrapperProps: R,
       // Enums
-      BentoKeyboardNavigationKeyDownEvent: Y,
+      BentoKeyboardNavigationKeyDownEvent: F,
       BentoListboxEvent: b,
       // Methods
       onListboxContainerScroll: S,
@@ -1427,19 +1427,22 @@ const _e = /* @__PURE__ */ W(wt, [["render", Ft], ["__scopeId", "data-v-282f5857
       listboxListeners: me
     };
   }
-}), Kt = ["id", "aria-busy", "aria-atomic", "aria-label", "aria-live"], qt = {
+}), zt = ["id", "aria-busy", "aria-atomic", "aria-label", "aria-live"], xt = {
   key: 0,
   class: "b-listbox__empty-search-message"
-}, Wt = {
+}, Ft = {
   key: 2,
   class: "b-listbox__lazy-load"
-}, jt = {
+}, Yt = {
   key: 3,
   class: "b-listbox__lazy-load"
 };
-function Ht(e, t, n, u, c, a) {
-  const s = L("bento-empty-state"), i = L("bento-typography"), r = L("bento-listbox-multi-select"), o = L("bento-listbox-single-select"), p = L("bento-loading-button"), l = L("bento-loading-indicator"), d = ye("bento-keyboard-navigation-directive");
-  return ae((v(), T("div", F({ id: e.id }, e.containerProps, {
+function Kt(e, t, a, c, u, n) {
+  var R;
+  const s = L("bento-empty-state"), l = L("bento-typography"), r = L("bento-listbox-multi-select"), i = L("bento-listbox-single-select"), y = L("bento-loading-button"), o = L("bento-loading-indicator"), d = pe("bento-keyboard-navigation-directive");
+  return ae((f(), _("div", {
+    id: e.id,
+    ref: "listboxRef",
     class: "b-listbox",
     role: "listbox",
     tabindex: "-1",
@@ -1447,21 +1450,22 @@ function Ht(e, t, n, u, c, a) {
     "aria-atomic": e.ariaAtomic,
     "aria-label": e.ariaLabel,
     "aria-live": e.ariaLive,
-    onScroll: t[0] || (t[0] = (...k) => e.onListboxContainerScroll && e.onListboxContainerScroll(...k))
-  }), [
-    q("div", x(j(e.wrapperProps)), [
-      e.isSearchResultEmpty ? (v(), T("div", qt, [
-        e.emptyState ? (v(), D(s, x(F({ key: 0 }, e.limitedEmptyStateProps)), null, 16)) : (v(), D(i, {
+    style: Ke((R = e.containerProps) == null ? void 0 : R.style),
+    onScroll: t[0] || (t[0] = (...$) => e.onListboxContainerScroll && e.onListboxContainerScroll(...$))
+  }, [
+    K("div", ee(ne(e.wrapperProps)), [
+      e.isSearchResultEmpty ? (f(), _("div", xt, [
+        e.emptyState ? (f(), D(s, ee(U({ key: 0 }, e.limitedEmptyStateProps)), null, 16)) : (f(), D(l, {
           key: 1,
           el: "span"
         }, {
-          default: _(() => [
-            V(w(e.noResultsMessage), 1)
+          default: T(() => [
+            G(w(e.noResultsMessage), 1)
           ]),
           _: 1
         }))
-      ])) : (v(), T(Q, { key: 1 }, [
-        e.multiple ? (v(), D(r, F({
+      ])) : (f(), _(Z, { key: 1 }, [
+        e.multiple ? (f(), D(r, U({
           key: 0,
           ref: "listboxItemRef",
           "has-more-items": e.hasMoreItems,
@@ -1471,99 +1475,99 @@ function Ht(e, t, n, u, c, a) {
           "selected-values": e.selectedValue,
           searching: e.searching,
           "is-option-disabled": e.isOptionDisabled
-        }, se(e.listboxListeners)), ie({ _: 2 }, [
-          z(e.slots, (k, I) => ({
-            name: I,
-            fn: _((N) => [
-              G(e.$slots, I, x(j(N)), void 0, !0)
+        }, te(e.listboxListeners)), ie({ _: 2 }, [
+          x(e.slots, ($, N) => ({
+            name: N,
+            fn: T((m) => [
+              z(e.$slots, N, ee(ne(m)), void 0, !0)
             ])
           }))
-        ]), 1040, ["has-more-items", "items", "lazy-load-type", "static-categories", "selected-values", "searching", "is-option-disabled"])) : (v(), D(o, F({
+        ]), 1040, ["has-more-items", "items", "lazy-load-type", "static-categories", "selected-values", "searching", "is-option-disabled"])) : (f(), D(i, U({
           key: 1,
           ref: "listboxItemRef",
           items: e.virtualisedItems,
           "selected-value": e.selectedValue,
           "static-categories": e.staticCategories,
           "is-option-disabled": e.isOptionDisabled
-        }, se(e.listboxListeners)), ie({ _: 2 }, [
-          z(e.slots, (k, I) => ({
-            name: I,
-            fn: _((N) => [
-              G(e.$slots, I, x(j(N)), void 0, !0)
+        }, te(e.listboxListeners)), ie({ _: 2 }, [
+          x(e.slots, ($, N) => ({
+            name: N,
+            fn: T((m) => [
+              z(e.$slots, N, ee(ne(m)), void 0, !0)
             ])
           }))
         ]), 1040, ["items", "selected-value", "static-categories", "is-option-disabled"])),
-        e.shouldDisplayShowMoreButton ? (v(), T("div", Wt, [
-          R(p, {
+        e.shouldDisplayShowMoreButton ? (f(), _("div", Ft, [
+          B(y, {
             state: e.loadingButtonState,
             variant: "secondary",
             onClickCapture: e.emitShowMore
           }, {
-            default: _(() => [
-              V(w(e.showMoreButtonText), 1)
+            default: T(() => [
+              G(w(e.showMoreButtonText), 1)
             ]),
             _: 1
           }, 8, ["state", "onClickCapture"])
-        ])) : e.loading ? (v(), T("div", jt, [
-          R(l)
-        ])) : K("", !0)
+        ])) : e.loading ? (f(), _("div", Yt, [
+          B(o)
+        ])) : Y("", !0)
       ], 64))
     ], 16)
-  ], 16, Kt)), [
+  ], 44, zt)), [
     [d]
   ]);
 }
-const us = /* @__PURE__ */ W(Yt, [["render", Ht], ["__scopeId", "data-v-6994e724"]]), pe = (e, t) => {
-  for (const n of e) {
-    if (n.value === t)
-      return n.label;
-    if (n.items)
-      return pe(n.items, t);
+const is = /* @__PURE__ */ q(Gt, [["render", Kt], ["__scopeId", "data-v-c6bccc42"]]), ye = (e, t) => {
+  for (const a of e) {
+    if (a.value === t)
+      return a.label;
+    if (a.items)
+      return ye(a.items, t);
   }
   return null;
-}, ds = (e, t, n) => {
-  const u = M([]), c = M(), a = (r) => {
-    c.value = n.value ? r.map(({ value: o }) => o) : r[0].value;
+}, as = (e, t, a) => {
+  const c = M([]), u = M(), n = (r) => {
+    u.value = a.value ? r.map(({ value: i }) => i) : r[0].value;
   }, s = (r) => {
-    u.value = r, a(r);
-  }, i = () => {
-    u.value = [], c.value = null;
+    c.value = r, n(r);
+  }, l = () => {
+    c.value = [], u.value = null;
   };
   return Ie(
     () => t.value,
     () => {
       if (!t.value) {
-        i();
+        l();
         return;
       }
-      const r = !Array.isArray(t.value), o = [...u.value];
-      i();
-      const p = (l) => {
-        let d = pe(e.value, l);
-        d || (d = pe(o, l)), d || (d = l.toString()), u.value.push({ value: l, label: d });
+      const r = !Array.isArray(t.value), i = [...c.value];
+      l();
+      const y = (o) => {
+        let d = ye(e.value, o);
+        d || (d = ye(i, o)), d || (d = o.toString()), c.value.push({ value: o, label: d });
       };
       if (r) {
-        const l = t.value;
-        p(l), a(u.value);
+        const o = t.value;
+        y(o), n(c.value);
         return;
       }
-      t.value.forEach(p), a(u.value);
+      t.value.forEach(y), n(c.value);
     },
     { immediate: !0 }
   ), {
     // Values
-    cachedSelectedListboxOptions: u,
-    cachedListboxSelectedValues: c,
+    cachedSelectedListboxOptions: c,
+    cachedListboxSelectedValues: u,
     // Methods
-    resetCache: i,
+    resetCache: l,
     setCachedValues: s
   };
 };
 export {
-  J as B,
+  X as B,
   b as a,
-  us as b,
-  ds as c,
-  Pt as u
+  is as b,
+  as as c,
+  Nt as u
 };
-//# sourceMappingURL=use-cached-selected-values.DplP72ef.js.map
+//# sourceMappingURL=use-cached-selected-values.DaSn9dB9.js.map