@adyen/bento-vue3 1.3.0 → 1.4.0

package/dist/chunks/{listbox.0c7c4e5e.js → listbox.6b52af1a.js}

@@ -1,15 +1,14 @@
-import { computed as u, defineComponent as x, openBlock as g, createElementBlock as L, mergeProps as U, withKeys as ie, renderSlot as P, toDisplayString as B, createCommentVNode as j, pushScopeId as ye, popScopeId as Ee, createElementVNode as $, resolveComponent as S, createBlock as I, toHandlerKey as w, withCtx as C, normalizeProps as K, guardReactiveProps as H, createVNode as A, createTextVNode as N, withDirectives as X, vShow as re, ref as R, onMounted as Ye, toRef as Fe, resolveDirective as de, toHandlers as J, Fragment as se, renderList as q, createSlots as Q, normalizeClass as ae, watch as Ke } from "vue";
-import { B as D, a as ce, d as He } from "./debounce.f8d92e44.js";
-import { B as ee, a as te } from "./index.222d29b0.js";
-import { BentoLoadingIndicator as We } from "../loading-indicator.js";
-import { a as ze } from "./button.e1c39f66.js";
-import { u as ue } from "./i18n.6c402773.js";
-import { _ as W } from "./_plugin-vue_export-helper.dad06003.js";
-import { B as be } from "./checkbox.a404069b.js";
-import { C as qe, a as xe } from "./chevron-down.69bedf14.js";
-import { B as je, a as me } from "./loading-button.61d8ebe5.js";
+import { computed as u, defineComponent as z, openBlock as g, createElementBlock as O, mergeProps as U, withKeys as ne, renderSlot as M, toDisplayString as $, createCommentVNode as j, pushScopeId as fe, popScopeId as Ee, createElementVNode as B, resolveComponent as S, createBlock as I, toHandlerKey as w, withCtx as C, normalizeProps as F, guardReactiveProps as K, createVNode as L, createTextVNode as D, withDirectives as X, vShow as ae, ref as R, onMounted as Ge, toRef as xe, resolveDirective as de, toHandlers as J, Fragment as te, renderList as W, createSlots as Q, normalizeClass as ie, watch as Ye } from "vue";
+import { B as N, a as re, d as Fe } from "./debounce.f8d92e44.js";
+import { B as ee } from "./index.89b00b94.js";
+import { BentoLoadingIndicator as Ke } from "../loading-indicator.js";
+import { u as ce } from "./i18n.6c402773.js";
+import { _ as H } from "./_plugin-vue_export-helper.dad06003.js";
+import { B as ue } from "./checkbox.5e1e05ae.js";
+import { a as He, C as We } from "./chevron-up.c03b58f8.js";
+import { B as ze, a as be } from "./loading-button.081adbf3.js";
 import "../assets/listbox.css";
-const Se = (e, t, v, p) => {
+const ye = (e, t, v, p) => {
   const n = u(
     () => {
       var l, i;
@@ -27,8 +26,8 @@ const Se = (e, t, v, p) => {
     }
   };
 };
-var o = /* @__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))(o || {}), z = /* @__PURE__ */ ((e) => (e.AUTOMATIC = "automatic", e.BUTTON = "button", e.NONE = "none", e))(z || {});
-const Xe = x({
+var o = /* @__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))(o || {}), q = /* @__PURE__ */ ((e) => (e.AUTOMATIC = "automatic", e.BUTTON = "button", e.NONE = "none", e))(q || {});
+const qe = z({
   name: "bento-listbox-option",
   props: {
     /**
@@ -48,7 +47,7 @@ const Xe = x({
     }));
     return {
       // Enums
-      BentoKeyboardNavigationKeyDownEvent: D,
+      BentoKeyboardNavigationKeyDownEvent: N,
       BentoListboxEvent: o,
       // Values
       conditionalClasses: v,
@@ -56,56 +55,56 @@ const Xe = x({
       onClick: (b) => {
         t(o.CLICK, b);
       },
-      onOptionSelected: (b, r) => {
-        t(b, r);
+      onOptionSelected: (b, d) => {
+        t(b, d);
       }
     };
   }
 });
-function Ze(e, t, v, p, n, b) {
-  return g(), L("label", U({
+function je(e, t, v, p, n, b) {
+  return g(), O("label", U({
     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] = (...d) => e.onClick && e.onClick(...d)),
     onKeydown: [
-      t[1] || (t[1] = ie((r) => e.onOptionSelected(e.BentoListboxEvent.ENTER, r), ["enter"])),
-      t[2] || (t[2] = ie((r) => e.onOptionSelected(e.BentoListboxEvent.SPACE, r), ["space"])),
-      t[3] || (t[3] = ie((r) => e.onOptionSelected(e.BentoListboxEvent.TAB, r), ["tab"]))
+      t[1] || (t[1] = ne((d) => e.onOptionSelected(e.BentoListboxEvent.ENTER, d), ["enter"])),
+      t[2] || (t[2] = ne((d) => e.onOptionSelected(e.BentoListboxEvent.SPACE, d), ["space"])),
+      t[3] || (t[3] = ne((d) => e.onOptionSelected(e.BentoListboxEvent.TAB, d), ["tab"]))
     ]
   }), [
-    P(e.$slots, "default", {}, void 0, !0)
+    M(e.$slots, "default", {}, void 0, !0)
   ], 16);
 }
-const le = /* @__PURE__ */ W(Xe, [["render", Ze], ["__scopeId", "data-v-18a61f5d"]]);
-let ve = 0;
-const Je = {
+const se = /* @__PURE__ */ H(qe, [["render", je], ["__scopeId", "data-v-18a61f5d"]]);
+let me = 0;
+const Xe = {
   beforeCreate() {
-    this.uuid = ve.toString(), ve += 1;
+    this.uuid = me.toString(), me += 1;
   }
-}, Qe = (e) => (ye("data-v-4687fbd0"), e = e(), Ee(), e), et = { key: 0 }, tt = /* @__PURE__ */ Qe(() => /* @__PURE__ */ $("path", {
+}, Ze = (e) => (fe("data-v-4687fbd0"), e = e(), Ee(), e), Je = { key: 0 }, Qe = /* @__PURE__ */ Ze(() => /* @__PURE__ */ B("path", {
   fill: "#00112C",
   "fill-rule": "evenodd",
   d: "M14.5303 4.53033C14.8232 4.23744 14.8232 3.76256 14.5303 3.46967C14.2374 3.17678 13.7626 3.17678 13.4697 3.46967L6 10.9393L2.53033 7.46967C2.23744 7.17678 1.76256 7.17678 1.46967 7.46967C1.17678 7.76256 1.17678 8.23744 1.46967 8.53033L5.46967 12.5303C5.50628 12.5669 5.54574 12.599 5.58732 12.6264C5.87844 12.8186 6.27405 12.7866 6.53033 12.5303L14.5303 4.53033Z",
   "clip-rule": "evenodd"
 }, null, -1));
-function st(e, t, v, p, n, b) {
-  return g(), L("svg", U({ role: "img" }, e.$attrs, {
+function et(e, t, v, p, n, b) {
+  return g(), O("svg", U({ role: "img" }, e.$attrs, {
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     fill: "none"
   }), [
-    e.$attrs["svg-title"] ? (g(), L("title", et, B(e.$attrs["svg-title"]), 1)) : j("", !0),
-    tt
+    e.$attrs["svg-title"] ? (g(), O("title", Je, $(e.$attrs["svg-title"]), 1)) : j("", !0),
+    Qe
   ], 16);
 }
-const lt = /* @__PURE__ */ W(Je, [["render", st], ["__scopeId", "data-v-4687fbd0"]]), ot = x({
+const tt = /* @__PURE__ */ H(Xe, [["render", et], ["__scopeId", "data-v-4687fbd0"]]), st = z({
   name: "bento-listbox-single-select-option",
   components: {
-    BentoListboxOption: le,
+    BentoListboxOption: se,
     BentoTypography: ee,
-    CheckmarkIcon: lt
+    CheckmarkIcon: tt
   },
   props: {
     /**
@@ -127,8 +126,8 @@ const lt = /* @__PURE__ */ W(Je, [["render", st], ["__scopeId", "data-v-4687fbd0
   },
   emits: [o.ENTER, o.SELECT, o.SPACE, o.TAB],
   setup(e, { emit: t }) {
-    const v = (r) => {
-      e.disabled || t(r, e.option.value);
+    const v = (d) => {
+      e.disabled || t(d, e.option.value);
     }, p = u(() => e.disabled ? !0 : null), n = u(() => e.selected ? !0 : null), b = u(() => e.disabled ? -1 : 0);
     return {
       // Values
@@ -136,16 +135,15 @@ const lt = /* @__PURE__ */ W(Je, [["render", st], ["__scopeId", "data-v-4687fbd0
       ariaSelected: n,
       tabIndex: b,
       // Enums
-      BentoTypographyElement: te,
       BentoListboxEvent: o,
       // Events
       onOptionSelected: v
     };
   }
 });
-const nt = { class: "b-listbox-single-select-option__text" }, it = { class: "b-listbox-single-select-option__check-icon" };
-function at(e, t, v, p, n, b) {
-  const r = S("bento-typography"), l = S("checkmark-icon"), i = S("bento-listbox-option");
+const lt = { class: "b-listbox-single-select-option__text" }, ot = { class: "b-listbox-single-select-option__check-icon" };
+function nt(e, t, v, p, n, b) {
+  const d = S("bento-typography"), l = S("checkmark-icon"), i = S("bento-listbox-option");
   return g(), I(i, U({
     class: "b-listbox-single-select-option",
     disabled: e.disabled,
@@ -153,52 +151,50 @@ function at(e, t, v, p, n, b) {
     "aria-selected": e.ariaSelected,
     "aria-disabled": e.ariaDisabled,
     tabindex: e.tabIndex,
-    onClick: t[0] || (t[0] = (d) => e.onOptionSelected(e.BentoListboxEvent.SELECT))
+    onClick: t[0] || (t[0] = (r) => e.onOptionSelected(e.BentoListboxEvent.SELECT))
   }, {
-    [w(e.BentoListboxEvent.ENTER)]: t[1] || (t[1] = (d) => e.onOptionSelected(e.BentoListboxEvent.ENTER))
+    [w(e.BentoListboxEvent.ENTER)]: t[1] || (t[1] = (r) => e.onOptionSelected(e.BentoListboxEvent.ENTER))
   }, {
-    [w(e.BentoListboxEvent.SPACE)]: t[2] || (t[2] = (d) => e.onOptionSelected(e.BentoListboxEvent.SPACE))
+    [w(e.BentoListboxEvent.SPACE)]: t[2] || (t[2] = (r) => e.onOptionSelected(e.BentoListboxEvent.SPACE))
   }, {
-    [w(e.BentoListboxEvent.TAB)]: t[3] || (t[3] = (d) => e.onOptionSelected(e.BentoListboxEvent.TAB))
+    [w(e.BentoListboxEvent.TAB)]: t[3] || (t[3] = (r) => e.onOptionSelected(e.BentoListboxEvent.TAB))
   }), {
     default: C(() => [
-      P(e.$slots, "default", K(H(e.option)), () => [
-        $("span", nt, [
-          A(r, {
-            el: e.BentoTypographyElement.SPAN
-          }, {
+      M(e.$slots, "default", F(K(e.option)), () => [
+        B("span", lt, [
+          L(d, { el: "span" }, {
             default: C(() => [
-              N(B(e.option.label), 1)
+              D($(e.option.label), 1)
             ]),
             _: 1
-          }, 8, ["el"]),
-          e.option.description ? (g(), I(r, {
+          }),
+          e.option.description ? (g(), I(d, {
             key: 0,
             class: "b-listbox-single-select-option__description",
-            el: e.BentoTypographyElement.SPAN
+            el: "span"
           }, {
             default: C(() => [
-              N(B(e.option.description), 1)
+              D($(e.option.description), 1)
             ]),
             _: 1
-          }, 8, ["el"])) : j("", !0)
+          })) : j("", !0)
         ])
       ], !0),
-      $("span", it, [
-        X(A(l, { "svg-title": "selected" }, null, 512), [
-          [re, e.selected]
+      B("span", ot, [
+        X(L(l, { "svg-title": "selected" }, null, 512), [
+          [ae, e.selected]
         ])
       ])
     ]),
     _: 3
   }, 16, ["disabled", "selected", "aria-selected", "aria-disabled", "tabindex"]);
 }
-const rt = /* @__PURE__ */ W(ot, [["render", at], ["__scopeId", "data-v-88d28e60"]]), Ce = ({ items: e, isOptionDisabled: t }, v) => {
+const it = /* @__PURE__ */ H(st, [["render", nt], ["__scopeId", "data-v-d112952c"]]), Se = ({ items: e, isOptionDisabled: t }, v) => {
   const p = u(() => e.value.length - 1), n = R(0);
-  Ye(() => {
+  Ge(() => {
     t && (n.value = e.value.findIndex((m) => !t(m)));
   });
-  const b = (m) => !t || !!t && t(e.value[m]), r = (m) => !t || !!t && !t(e.value[m]), l = (m) => {
+  const b = (m) => !t || !!t && t(e.value[m]), d = (m) => !t || !!t && !t(e.value[m]), l = (m) => {
     switch (m) {
       case "increase":
         n.value += 1;
@@ -207,47 +203,47 @@ const rt = /* @__PURE__ */ W(ot, [["render", at], ["__scopeId", "data-v-88d28e60
         n.value -= 1;
         break;
     }
-  }, i = ({ edgeCaseItem: m, isItemBeforeEdgeCaseItem: O }, V, M) => {
-    n.value !== m && (O ? r(m) && l(M) : (l(M), b(n.value) && V()), v(n.value));
-  }, d = () => {
+  }, i = ({ edgeCaseItem: m, isItemBeforeEdgeCaseItem: A }, V, P) => {
+    n.value !== m && (A ? d(m) && l(P) : (l(P), b(n.value) && V()), v(n.value));
+  }, r = () => {
     const m = n.value === p.value - 2;
     i(
       {
         isItemBeforeEdgeCaseItem: m,
         edgeCaseItem: p.value
       },
-      d,
+      r,
       "increase"
       /* INCREASE */
     );
-  }, E = () => {
+  }, y = () => {
     const m = n.value === 1;
     i(
       {
         edgeCaseItem: 0,
         isItemBeforeEdgeCaseItem: m
       },
-      E,
+      y,
       "decrease"
       /* DECREASE */
     );
   };
   return {
     moveToFirstElement: () => {
-      n.value = 0, b(n.value) ? d() : v(n.value);
+      n.value = 0, b(n.value) ? r() : v(n.value);
     },
     moveToLastElement: () => {
-      n.value = p.value, b(n.value) ? E() : v(n.value);
+      n.value = p.value, b(n.value) ? y() : v(n.value);
     },
-    moveToNextElement: d,
-    moveToPreviousElement: E
+    moveToNextElement: r,
+    moveToPreviousElement: y
   };
-}, dt = x({
+}, at = z({
   name: "bento-listbox-single-select",
   components: {
-    BentoListboxSingleSelectOption: rt
+    BentoListboxSingleSelectOption: it
   },
-  directives: { BentoKeyboardNavigationDirective: ce },
+  directives: { BentoKeyboardNavigationDirective: re },
   inheritAttrs: !1,
   props: {
     /**
@@ -288,17 +284,17 @@ const rt = /* @__PURE__ */ W(ot, [["render", at], ["__scopeId", "data-v-88d28e60
   setup(e, { emit: t, slots: v }) {
     const p = R([]), n = (f) => (m) => {
       t(f, m);
-    }, b = (f) => p.value[f].$el.focus(), { moveToNextElement: r, moveToPreviousElement: l, moveToFirstElement: i, moveToLastElement: d } = Ce(
+    }, b = (f) => p.value[f].$el.focus(), { moveToNextElement: d, moveToPreviousElement: l, moveToFirstElement: i, moveToLastElement: r } = Se(
       {
-        items: Fe(e, "items"),
+        items: xe(e, "items"),
         isOptionDisabled: e.isOptionDisabled
       },
       b
-    ), E = {
-      [D.ARROW_UP]: l,
-      [D.ARROW_DOWN]: r,
-      [D.HOME]: i,
-      [D.END]: d
+    ), y = {
+      [N.ARROW_UP]: l,
+      [N.ARROW_DOWN]: d,
+      [N.HOME]: i,
+      [N.END]: r
     }, s = {
       [o.SELECT]: n(o.SELECT),
       [o.SPACE]: n(o.SPACE),
@@ -314,15 +310,15 @@ const rt = /* @__PURE__ */ W(ot, [["render", at], ["__scopeId", "data-v-88d28e60
       // Methods
       onOptionSelected: n,
       // Keyboard navigation
-      listboxListeners: E,
+      listboxListeners: y,
       listboxOptionListeners: s
     };
   }
 });
-function ct(e, t, v, p, n, b) {
-  const r = S("bento-listbox-single-select-option"), l = de("bento-keyboard-navigation-directive");
-  return X((g(), L("div", J(e.listboxListeners, !0), [
-    (g(!0), L(se, null, q(e.items, (i) => (g(), I(r, U({
+function dt(e, t, v, p, n, b) {
+  const d = S("bento-listbox-single-select-option"), l = de("bento-keyboard-navigation-directive");
+  return X((g(), O("div", J(e.listboxListeners, !0), [
+    (g(!0), O(te, null, W(e.items, (i) => (g(), I(d, U({
       key: i.value,
       ref_for: !0,
       ref: "listboxItemRef",
@@ -331,10 +327,10 @@ function ct(e, t, v, p, n, b) {
       disabled: e.isOptionDisabled ? e.isOptionDisabled(i) : null,
       selected: i.value === e.selectedValue
     }, J(e.listboxOptionListeners)), Q({ _: 2 }, [
-      q(e.slots, (d, E) => ({
-        name: E,
+      W(e.slots, (r, y) => ({
+        name: y,
         fn: C((s) => [
-          P(e.$slots, E, K(H(s)))
+          M(e.$slots, y, F(K(s)))
         ])
       }))
     ]), 1040, ["option", "disabled", "selected"]))), 128))
@@ -342,22 +338,22 @@ function ct(e, t, v, p, n, b) {
     [l]
   ]);
 }
-const ut = /* @__PURE__ */ W(dt, [["render", ct]]);
-var _e = /* @__PURE__ */ ((e) => (e.DISABLED = "disabled", e))(_e || {}), Z = /* @__PURE__ */ ((e) => (e.SELECT_CATEGORY = "select-category", e.UNSELECT_CATEGORY = "unselect-category", e))(Z || {});
-const bt = {
+const rt = /* @__PURE__ */ H(at, [["render", dt]]);
+var Ce = /* @__PURE__ */ ((e) => (e.DISABLED = "disabled", e))(Ce || {}), Z = /* @__PURE__ */ ((e) => (e.SELECT_CATEGORY = "select-category", e.UNSELECT_CATEGORY = "unselect-category", e))(Z || {});
+const ct = {
   "en-US": {
     categoryClosed: "{category} closed",
     categoryOpened: "{category} opened"
   }
-}, mt = x({
-  i18n: { messages: bt },
+}, ut = z({
+  i18n: { messages: ct },
   name: "bento-listbox-multi-select-category",
   components: {
-    BentoCheckbox: be,
+    BentoCheckbox: ue,
     BentoTypography: ee,
-    BentoListboxOption: le,
-    ChevronDownIcon: qe,
-    ChevronUpIcon: xe
+    BentoListboxOption: se,
+    ChevronDownIcon: He,
+    ChevronUpIcon: We
   },
   props: {
     /**
@@ -396,25 +392,25 @@ const bt = {
   },
   emits: [Z.SELECT_CATEGORY, Z.UNSELECT_CATEGORY],
   setup(e, { emit: t }) {
-    const v = R(!1), { t: p } = ue(), n = (_) => e.isOptionDisabled ? e.isOptionDisabled(_) : !1, b = u(
+    const v = R(!1), { t: p } = ce(), n = (_) => e.isOptionDisabled ? e.isOptionDisabled(_) : !1, b = u(
       () => e.category.items.every((_) => n(_))
-    ), r = u(() => ({
-      [`b-listbox-multi-select-category--${_e.DISABLED}`]: b.value
+    ), d = u(() => ({
+      [`b-listbox-multi-select-category--${Ce.DISABLED}`]: b.value
     })), l = (_) => {
       _.preventDefault(), v.value = !v.value;
     }, i = (_) => {
       var G;
       const k = n(_), T = ((G = e.selectedItemsList) == null ? void 0 : G.includes(_.value)) || !1;
       return { isDisabled: k, isPreSelected: T };
-    }, d = u(
+    }, r = u(
       () => e.category.items.filter((_) => {
         const { isDisabled: k, isPreSelected: T } = i(_);
         return k && T || !k;
       })
-    ), E = u(
+    ), y = u(
       () => {
         var _;
-        return (_ = d.value) == null ? void 0 : _.filter(
+        return (_ = r.value) == null ? void 0 : _.filter(
           ({ value: k }) => {
             var T;
             return (T = e.selectedItemsList) == null ? void 0 : T.includes(k);
@@ -428,37 +424,35 @@ const bt = {
       t(Z.SELECT_CATEGORY);
     }, m = () => {
       t(Z.UNSELECT_CATEGORY);
-    }, { isAllSelected: O, isIndeterminate: V, toggleSelectAll: M } = Se(
-      E,
-      d,
+    }, { isAllSelected: A, isIndeterminate: V, toggleSelectAll: P } = ye(
+      y,
+      r,
       f,
       m
     );
     return {
       // Values
       chevronTitle: s,
-      conditionalClass: r,
+      conditionalClass: d,
       hasAllPropsDisabled: b,
       isOpen: v,
-      isAllSelected: O,
+      isAllSelected: A,
       isIndeterminate: V,
-      // Enums
-      BentoTypographyElement: te,
       // Methods
       toggleOpen: l,
-      toggleSelectAll: M
+      toggleSelectAll: P
     };
   }
 });
-const vt = { class: "b-listbox-multi-select-category__label" };
-function pt(e, t, v, p, n, b) {
-  const r = S("bento-checkbox"), l = S("bento-typography"), i = S("chevron-up-icon"), d = S("chevron-down-icon"), E = S("bento-listbox-option");
-  return g(), L("div", null, [
-    A(E, {
-      class: ae(["b-listbox-multi-select-category__option", e.conditionalClass])
+const bt = { class: "b-listbox-multi-select-category__label" };
+function mt(e, t, v, p, n, b) {
+  const d = S("bento-checkbox"), l = S("bento-typography"), i = S("chevron-up-icon"), r = S("chevron-down-icon"), y = S("bento-listbox-option");
+  return g(), O("div", null, [
+    L(y, {
+      class: ie(["b-listbox-multi-select-category__option", e.conditionalClass])
     }, {
       default: C(() => [
-        A(r, {
+        L(d, {
           "model-value": e.isAllSelected,
           indeterminate: e.isIndeterminate,
           disabled: e.hasAllPropsDisabled,
@@ -466,17 +460,17 @@ function pt(e, t, v, p, n, b) {
           value: e.category.value,
           "onUpdate:modelValue": e.toggleSelectAll
         }, null, 8, ["model-value", "indeterminate", "disabled", "aria-label", "value", "onUpdate:modelValue"]),
-        $("span", vt, [
-          A(l, {
-            el: e.BentoTypographyElement.SPAN,
+        B("span", bt, [
+          L(l, {
+            el: "span",
             class: "b-listbox-multi-select-category__label-text"
           }, {
             default: C(() => [
-              N(B(e.category.label), 1)
+              D($(e.category.label), 1)
             ]),
             _: 1
-          }, 8, ["el"]),
-          $("div", {
+          }),
+          B("div", {
             class: "b-listbox-multi-select-category__label-chevron",
             "data-testid": "toggle-listbox",
             onClickCapture: t[0] || (t[0] = (...s) => e.toggleOpen && e.toggleOpen(...s))
@@ -484,7 +478,7 @@ function pt(e, t, v, p, n, b) {
             e.isOpen ? (g(), I(i, {
               key: 0,
               "svg-title": e.chevronTitle
-            }, null, 8, ["svg-title"])) : (g(), I(d, {
+            }, null, 8, ["svg-title"])) : (g(), I(r, {
               key: 1,
               "svg-title": e.chevronTitle
             }, null, 8, ["svg-title"]))
@@ -493,22 +487,22 @@ function pt(e, t, v, p, n, b) {
       ]),
       _: 1
     }, 8, ["class"]),
-    X($("div", null, [
-      P(e.$slots, "default", {}, void 0, !0)
+    X(B("div", null, [
+      M(e.$slots, "default", {}, void 0, !0)
     ], 512), [
-      [re, e.isOpen]
+      [ae, e.isOpen]
     ])
   ]);
 }
-const gt = /* @__PURE__ */ W(mt, [["render", pt], ["__scopeId", "data-v-8ac8cf6b"]]);
-var F = /* @__PURE__ */ ((e) => (e.SELECT_CATEGORY = "select-category", e.TOGGLE_CHECKBOX_SELECTION = "toggle-checkbox-selection", e.UNSELECT_CATEGORY = "unselect-category", e))(F || {});
-const ft = x({
+const vt = /* @__PURE__ */ H(ut, [["render", mt], ["__scopeId", "data-v-69a9679a"]]);
+var Y = /* @__PURE__ */ ((e) => (e.SELECT_CATEGORY = "select-category", e.TOGGLE_CHECKBOX_SELECTION = "toggle-checkbox-selection", e.UNSELECT_CATEGORY = "unselect-category", e))(Y || {});
+const pt = z({
   name: "listbox-multi-select-options",
   components: {
-    BentoCheckbox: be,
-    BentoListboxOption: le,
+    BentoCheckbox: ue,
+    BentoListboxOption: se,
     BentoTypography: ee,
-    ListboxMultiSelectCategory: gt
+    ListboxMultiSelectCategory: vt
   },
   props: {
     /**
@@ -562,20 +556,20 @@ const ft = x({
     }
   },
   emits: [
-    F.TOGGLE_CHECKBOX_SELECTION,
-    F.SELECT_CATEGORY,
-    F.UNSELECT_CATEGORY
+    Y.TOGGLE_CHECKBOX_SELECTION,
+    Y.SELECT_CATEGORY,
+    Y.UNSELECT_CATEGORY
   ],
   setup(e, { emit: t }) {
     const v = (i) => {
-      t(F.TOGGLE_CHECKBOX_SELECTION, i);
+      t(Y.TOGGLE_CHECKBOX_SELECTION, i);
     }, p = (i) => !!i.items, n = (i) => {
-      const d = e.isMultiLevel && e.searching;
-      return i.description && (!e.isMultiLevel || d);
-    }, b = (i) => i.items ? !!i.items.find((d) => e.selectedItemsList.includes(d.value)) : e.selectedItemsList.includes(i.value), r = (i, d) => {
-      if (p(d))
-        return t(i ? F.SELECT_CATEGORY : F.UNSELECT_CATEGORY, d);
-      v(d.value);
+      const r = e.isMultiLevel && e.searching;
+      return i.description && (!e.isMultiLevel || r);
+    }, b = (i) => i.items ? !!i.items.find((r) => e.selectedItemsList.includes(r.value)) : e.selectedItemsList.includes(i.value), d = (i, r) => {
+      if (p(r))
+        return t(i ? Y.SELECT_CATEGORY : Y.UNSELECT_CATEGORY, r);
+      v(r.value);
     };
     return {
       // Values
@@ -587,60 +581,57 @@ const ft = x({
       isOptionSelected: b,
       shouldShowDescription: n,
       toggleCheckboxSelection: v,
-      selectSearch: r,
+      selectSearch: d,
       // Enums
       BentoListboxEvent: o,
-      BentoTypographyElement: te,
-      ListboxMultiSelectOptionsEvent: F
+      ListboxMultiSelectOptionsEvent: Y
     };
   }
 });
-const yt = { class: "b-listbox-multi-select__option-text" }, Et = { class: "b-listbox-multi-select__option-text" };
-function St(e, t, v, p, n, b) {
-  const r = S("bento-checkbox"), l = S("bento-typography"), i = S("bento-listbox-option"), d = S("listbox-multi-select-options", !0), E = S("listbox-multi-select-category");
-  return g(), L("div", null, [
-    (g(!0), L(se, null, q(e.items, (s) => (g(), L("div", {
+const gt = { class: "b-listbox-multi-select__option-text" }, ft = { class: "b-listbox-multi-select__option-text" };
+function Et(e, t, v, p, n, b) {
+  const d = S("bento-checkbox"), l = S("bento-typography"), i = S("bento-listbox-option"), r = S("listbox-multi-select-options", !0), y = S("listbox-multi-select-category");
+  return g(), O("div", null, [
+    (g(!0), O(te, null, W(e.items, (s) => (g(), O("div", {
       key: `selected-${s.value}`
     }, [
       e.searching && e.isMultiLevel ? (g(), I(i, {
         key: 0,
-        class: ae(["b-listbox-multi-select-options", e.conditionalClasses]),
+        class: ie(["b-listbox-multi-select-options", e.conditionalClasses]),
         disabled: e.isOptionDisabled ? e.isOptionDisabled(s) : null
       }, {
         default: C(() => [
-          A(r, {
+          L(d, {
             "model-value": e.isOptionSelected(s),
             "aria-label": s.label,
             disabled: e.isOptionDisabled ? e.isOptionDisabled(s) : null,
             value: s.value,
             "onUpdate:modelValue": (f) => e.selectSearch(f, s)
           }, null, 8, ["model-value", "aria-label", "disabled", "value", "onUpdate:modelValue"]),
-          P(e.$slots, "default", K(H(s)), () => [
-            $("span", yt, [
-              A(l, {
-                el: e.BentoTypographyElement.SPAN
-              }, {
+          M(e.$slots, "default", F(K(s)), () => [
+            B("span", gt, [
+              L(l, { el: "span" }, {
                 default: C(() => [
-                  N(B(s.label), 1)
+                  D($(s.label), 1)
                 ]),
                 _: 2
-              }, 1032, ["el"]),
+              }, 1024),
               e.shouldShowDescription(s) ? (g(), I(l, {
                 key: 0,
                 class: "b-listbox-multi-select__option-description",
-                el: e.BentoTypographyElement.SPAN
+                el: "span"
               }, {
                 default: C(() => [
-                  N(B(s.description), 1)
+                  D($(s.description), 1)
                 ]),
                 _: 2
-              }, 1032, ["el"])) : j("", !0)
+              }, 1024)) : j("", !0)
             ])
           ], !0)
         ]),
         _: 2
-      }, 1032, ["class", "disabled"])) : (g(), L(se, { key: 1 }, [
-        s.items ? (g(), I(E, {
+      }, 1032, ["class", "disabled"])) : (g(), O(te, { key: 1 }, [
+        s.items ? (g(), I(y, {
           key: 0,
           category: s,
           "is-option-disabled": e.isOptionDisabled,
@@ -649,7 +640,7 @@ function St(e, t, v, p, n, b) {
           onUnselectCategory: (f) => e.$emit(e.ListboxMultiSelectOptionsEvent.UNSELECT_CATEGORY, s)
         }, {
           default: C(() => [
-            A(d, {
+            L(r, {
               "category-items": "",
               items: s.items,
               "is-option-disabled": e.isOptionDisabled,
@@ -662,37 +653,35 @@ function St(e, t, v, p, n, b) {
           _: 2
         }, 1032, ["category", "is-option-disabled", "selected-items-list", "onSelectCategory", "onUnselectCategory"])) : (g(), I(i, {
           key: 1,
-          class: ae(["b-listbox-multi-select-options", e.conditionalClasses]),
+          class: ie(["b-listbox-multi-select-options", e.conditionalClasses]),
           disabled: e.isOptionDisabled ? e.isOptionDisabled(s) : null
         }, {
           default: C(() => [
-            A(r, {
+            L(d, {
               "model-value": e.selectedItemsList,
               "aria-label": s.label,
               disabled: e.isOptionDisabled ? e.isOptionDisabled(s) : null,
               value: s.value,
               "onUpdate:modelValue": (f) => e.toggleCheckboxSelection(s.value)
             }, null, 8, ["model-value", "aria-label", "disabled", "value", "onUpdate:modelValue"]),
-            P(e.$slots, "default", K(H(s)), () => [
-              $("span", Et, [
-                A(l, {
-                  el: e.BentoTypographyElement.SPAN
-                }, {
+            M(e.$slots, "default", F(K(s)), () => [
+              B("span", ft, [
+                L(l, { el: "span" }, {
                   default: C(() => [
-                    N(B(s.label), 1)
+                    D($(s.label), 1)
                   ]),
                   _: 2
-                }, 1032, ["el"]),
+                }, 1024),
                 e.shouldShowDescription(s) ? (g(), I(l, {
                   key: 0,
                   class: "b-listbox-multi-select__option-description",
-                  el: e.BentoTypographyElement.SPAN
+                  el: "span"
                 }, {
                   default: C(() => [
-                    N(B(s.description), 1)
+                    D($(s.description), 1)
                   ]),
                   _: 2
-                }, 1032, ["el"])) : j("", !0)
+                }, 1024)) : j("", !0)
               ])
             ], !0)
           ]),
@@ -702,22 +691,22 @@ function St(e, t, v, p, n, b) {
     ]))), 128))
   ]);
 }
-const Ct = /* @__PURE__ */ W(ft, [["render", St], ["__scopeId", "data-v-c471c1bc"]]), pe = {
+const yt = /* @__PURE__ */ H(pt, [["render", Et], ["__scopeId", "data-v-55a6d406"]]), ve = {
   "en-US": {
     allSelected: "All selected ({total})",
     numberOfTotalSelected: "{number} of {total} selected",
     selectAll: "Select all ({total})"
   }
-}, _t = x({
-  i18n: { messages: pe },
+}, St = z({
+  i18n: { messages: ve },
   name: "bento-listbox-multi-select",
   components: {
-    BentoCheckbox: be,
-    BentoListboxOption: le,
+    BentoCheckbox: ue,
+    BentoListboxOption: se,
     BentoTypography: ee,
-    ListboxMultiSelectOptions: Ct
+    ListboxMultiSelectOptions: yt
   },
-  directives: { BentoKeyboardNavigationDirective: ce },
+  directives: { BentoKeyboardNavigationDirective: re },
   props: {
     /**
      * Function that allows the options to be disabled
@@ -761,8 +750,8 @@ const Ct = /* @__PURE__ */ W(ft, [["render", St], ["__scopeId", "data-v-c471c1bc
   },
   emits: [o.SELECT],
   setup(e, { emit: t, slots: v }) {
-    const { t: p } = ue({ messages: pe }), n = R(null), b = R(null), r = R(null), l = R();
-    Ke(
+    const { t: p } = ce({ messages: ve }), n = R(null), b = R(null), d = R(null), l = R();
+    Ye(
       () => e.selectedValues,
       () => {
         l.value = [...e.selectedValues ?? []];
@@ -771,13 +760,13 @@ const Ct = /* @__PURE__ */ W(ft, [["render", St], ["__scopeId", "data-v-c471c1bc
         immediate: !0
       }
     );
-    const i = u(() => !!e.items.find(({ items: a }) => !!a)), d = u(() => i.value ? e.items.reduce((a, c) => (c.items ? a.push(...c.items.flat()) : a.push(c), a), []) : e.items), E = (a) => {
-      var y;
-      const c = e.isOptionDisabled(a), h = ((y = l.value) == null ? void 0 : y.includes(a.value)) || !1;
+    const i = u(() => !!e.items.find(({ items: a }) => !!a)), r = u(() => i.value ? e.items.reduce((a, c) => (c.items ? a.push(...c.items.flat()) : a.push(c), a), []) : e.items), y = (a) => {
+      var E;
+      const c = e.isOptionDisabled(a), h = ((E = l.value) == null ? void 0 : E.includes(a.value)) || !1;
       return { isDisabled: c, isPreSelected: h };
     }, s = u(
-      () => e.searching && i ? e.items : d.value.filter((a) => {
-        const { isDisabled: c, isPreSelected: h } = E(a);
+      () => e.searching && i ? e.items : r.value.filter((a) => {
+        const { isDisabled: c, isPreSelected: h } = y(a);
         return c && h || !c;
       })
     ), f = u(
@@ -786,147 +775,144 @@ const Ct = /* @__PURE__ */ W(ft, [["render", St], ["__scopeId", "data-v-c471c1bc
         return (a = s.value) == null ? void 0 : a.filter((c) => {
           var h;
           return c.items && i.value && e.searching ? c.items.filter(
-            (Y) => (e.selectedValues ?? []).includes(
-              Y.value
+            (x) => (e.selectedValues ?? []).includes(
+              x.value
             )
           ).length === c.items.length : (h = l.value) == null ? void 0 : h.includes(c.value);
         });
       }
-    ), m = () => i.value && !e.searching ? s.value.length : e.items.length, O = u(() => {
+    ), m = () => i.value && !e.searching ? s.value.length : e.items.length, A = u(() => {
       var h;
       const a = m(), c = ((h = f.value) == null ? void 0 : h.length) || 0;
       return c === 0 ? p("selectAll", { total: a }) : c === a ? p("allSelected", { total: a }) : p("numberOfTotalSelected", { number: c, total: a });
     }), V = (a) => {
-      const c = (y) => {
-        const { isDisabled: Y, isPreSelected: ne } = E(y);
-        return Y && ne || !Y;
-      }, h = a.filter(c).filter((y) => !l.value.includes(y.value)).map(({ value: y }) => y);
+      const c = (E) => {
+        const { isDisabled: x, isPreSelected: oe } = y(E);
+        return x && oe || !x;
+      }, h = a.filter(c).filter((E) => !l.value.includes(E.value)).map(({ value: E }) => E);
       l.value = [...l.value, ...h], t(o.SELECT, l.value);
-    }, M = (a) => {
-      const c = (y) => {
-        const { isDisabled: Y, isPreSelected: ne } = E(y);
-        return !(Y && ne);
-      }, h = a.filter(c).map(({ value: y }) => y);
-      l.value = l.value.filter((y) => !(h != null && h.includes(y))), t(o.SELECT, l.value);
+    }, P = (a) => {
+      const c = (E) => {
+        const { isDisabled: x, isPreSelected: oe } = y(E);
+        return !(x && oe);
+      }, h = a.filter(c).map(({ value: E }) => E);
+      l.value = l.value.filter((E) => !(h != null && h.includes(E))), t(o.SELECT, l.value);
     }, _ = () => {
-      V(d.value);
+      V(r.value);
     }, k = () => {
-      M(d.value);
-    }, { isAllSelected: T, isIndeterminate: G, toggleSelectAll: Te } = Se(
+      P(r.value);
+    }, { isAllSelected: T, isIndeterminate: G, toggleSelectAll: he } = ye(
       f,
       s,
       _,
       k
-    ), Ae = (a) => {
+    ), Te = (a) => {
       V(a.items);
     }, Le = (a) => {
-      M(a.items);
+      P(a.items);
     }, Oe = (a, c) => {
       let h = !1;
-      l.value = l.value.filter((y) => c === y ? (h = !0, !1) : !0), h || l.value.push(c), t(a, l.value);
-    }, oe = u(() => {
-      const a = (y) => l.value.includes(y.value), c = (y) => !!y.find((Y) => a(Y));
-      return e.items.filter((y) => y.items && c(y.items) ? !0 : a(y));
-    }), Ie = u(() => {
+      l.value = l.value.filter((E) => c === E ? (h = !0, !1) : !0), h || l.value.push(c), t(a, l.value);
+    }, le = u(() => {
+      const a = (E) => l.value.includes(E.value), c = (E) => !!E.find((x) => a(x));
+      return e.items.filter((E) => E.items && c(E.items) ? !0 : a(E));
+    }), Ae = u(() => {
       var a;
-      return ((a = oe.value) == null ? void 0 : a.length) > 0;
-    }), Be = u(
+      return ((a = le.value) == null ? void 0 : a.length) > 0;
+    }), Ie = u(
       () => {
         var a, c;
-        return ((a = f.value) == null ? void 0 : a.length) === ((c = d.value) == null ? void 0 : c.length);
+        return ((a = f.value) == null ? void 0 : a.length) === ((c = r.value) == null ? void 0 : c.length);
       }
     ), $e = u(
       () => n.value ? [n.value] : []
-    ), ke = u(
+    ), Be = u(
       () => {
         var a, c;
         return (c = (a = b.value) == null ? void 0 : a.$children) != null && c.length ? b.value.$children : [];
       }
-    ), Re = u(
+    ), ke = u(
       () => {
         var a, c;
-        return (c = (a = r.value) == null ? void 0 : a.$children) != null && c.length ? r.value.$children : [];
+        return (c = (a = d.value) == null ? void 0 : a.$children) != null && c.length ? d.value.$children : [];
       }
-    ), Ne = u(() => ({ label: O, value: T })), De = u(() => [
-      Ne,
-      ...oe.value,
-      ...d.value
-    ]), Pe = (a) => {
+    ), Re = u(() => ({ label: A, value: T })), De = u(() => [
+      Re,
+      ...le.value,
+      ...r.value
+    ]), Ne = (a) => {
       [
         ...$e.value,
-        ...ke.value,
-        ...Re.value
+        ...Be.value,
+        ...ke.value
       ][a].$el.focus();
-    }, { moveToNextElement: Me, moveToPreviousElement: we, moveToFirstElement: Ue, moveToLastElement: Ve } = Ce(
+    }, { moveToNextElement: Me, moveToPreviousElement: Pe, moveToFirstElement: we, moveToLastElement: Ue } = Se(
       {
         items: R(De),
         isOptionDisabled: e.isOptionDisabled
       },
-      Pe
-    ), Ge = {
-      [D.ARROW_UP]: we,
-      [D.ARROW_DOWN]: Me,
-      [D.HOME]: Ue,
-      [D.END]: Ve
+      Ne
+    ), Ve = {
+      [N.ARROW_UP]: Pe,
+      [N.ARROW_DOWN]: Me,
+      [N.HOME]: we,
+      [N.END]: Ue
     };
     return {
       // Refs
       selectAllListboxItemsRef: n,
       selectedListboxItemsRef: b,
-      listboxItemsRef: r,
+      listboxItemsRef: d,
       // Values
       isAllSelected: T,
-      isAllItemsIncludingDisabled: Be,
-      isAnOptionSelected: Ie,
+      isAllItemsIncludingDisabled: Ie,
+      isAnOptionSelected: Ae,
       isIndeterminate: G,
       isMultiLevelSelect: i,
-      flattenedItemsList: d,
+      flattenedItemsList: r,
       selectedItemsList: l,
-      selectAllCheckboxText: O,
-      selectedOptions: oe,
+      selectAllCheckboxText: A,
+      selectedOptions: le,
       slots: v,
       // Enums
-      BentoTypographyElement: te,
       BentoListboxEvent: o,
       // Methods
-      selectAllCategory: Ae,
+      selectAllCategory: Te,
       toggleCheckboxSelection: Oe,
-      toggleSelectAll: Te,
+      toggleSelectAll: he,
       unselectAllCategory: Le,
       // Events
-      listboxListeners: Ge
+      listboxListeners: Ve
     };
   }
 });
-const he = (e) => (ye("data-v-35f1a677"), e = e(), Ee(), e), ht = { key: 0 }, Tt = /* @__PURE__ */ he(() => /* @__PURE__ */ $("hr", { class: "b-listbox-multi-select__divider" }, null, -1)), At = /* @__PURE__ */ he(() => /* @__PURE__ */ $("hr", { class: "b-listbox-multi-select__divider" }, null, -1));
-function Lt(e, t, v, p, n, b) {
-  const r = S("bento-checkbox"), l = S("bento-typography"), i = S("bento-listbox-option"), d = S("listbox-multi-select-options"), E = de("bento-keyboard-navigation-directive");
-  return X((g(), L("div", U({ class: "b-listbox-multi-select" }, J(e.listboxListeners, !0)), [
-    A(i, {
+const _e = (e) => (fe("data-v-8c62bb32"), e = e(), Ee(), e), Ct = { key: 0 }, _t = /* @__PURE__ */ _e(() => /* @__PURE__ */ B("hr", { class: "b-listbox-multi-select__divider" }, null, -1)), ht = /* @__PURE__ */ _e(() => /* @__PURE__ */ B("hr", { class: "b-listbox-multi-select__divider" }, null, -1));
+function Tt(e, t, v, p, n, b) {
+  const d = S("bento-checkbox"), l = S("bento-typography"), i = S("bento-listbox-option"), r = S("listbox-multi-select-options"), y = de("bento-keyboard-navigation-directive");
+  return X((g(), O("div", U({ class: "b-listbox-multi-select" }, J(e.listboxListeners, !0)), [
+    L(i, {
       ref: "selectAllListboxItemsRef",
       class: "b-listbox-multi-select__option"
     }, {
       default: C(() => [
-        A(r, {
+        L(d, {
           "aria-label": e.selectAllCheckboxText,
           "model-value": e.isAllSelected,
           indeterminate: e.isIndeterminate,
           "onUpdate:modelValue": e.toggleSelectAll
         }, null, 8, ["aria-label", "model-value", "indeterminate", "onUpdate:modelValue"]),
-        A(l, {
-          el: e.BentoTypographyElement.SPAN
-        }, {
+        L(l, { el: "span" }, {
           default: C(() => [
-            N(B(e.selectAllCheckboxText), 1)
+            D($(e.selectAllCheckboxText), 1)
           ]),
           _: 1
-        }, 8, ["el"])
+        })
       ]),
       _: 1
     }, 512),
-    e.isAnOptionSelected ? (g(), L("div", ht, [
-      Tt,
-      A(d, U({
+    e.isAnOptionSelected ? (g(), O("div", Ct, [
+      _t,
+      L(r, U({
         ref: "selectedListboxItemsRef",
         items: e.selectedOptions,
         "is-option-disabled": e.isOptionDisabled,
@@ -943,17 +929,17 @@ function Lt(e, t, v, p, n, b) {
       }, {
         [w(e.BentoListboxEvent.ENTER)]: t[3] || (t[3] = (s) => e.toggleCheckboxSelection(e.BentoListboxEvent.ENTER, s))
       }), Q({ _: 2 }, [
-        q(e.slots, (s, f) => ({
+        W(e.slots, (s, f) => ({
           name: f,
           fn: C((m) => [
-            P(e.$slots, f, K(H(m)), void 0, !0)
+            M(e.$slots, f, F(K(m)), void 0, !0)
           ])
         }))
       ]), 1040, ["items", "is-option-disabled", "is-multi-level", "searching", "selected-items-list", "onSelectCategory", "onUnselectCategory"])
     ])) : j("", !0),
-    X($("div", null, [
-      At,
-      A(d, U({
+    X(B("div", null, [
+      ht,
+      L(r, U({
         ref: "listboxItemsRef",
         items: e.items,
         "is-option-disabled": e.isOptionDisabled,
@@ -970,36 +956,36 @@ function Lt(e, t, v, p, n, b) {
       }, {
         [w(e.BentoListboxEvent.ENTER)]: t[7] || (t[7] = (s) => e.toggleCheckboxSelection(e.BentoListboxEvent.ENTER, s))
       }), Q({ _: 2 }, [
-        q(e.slots, (s, f) => ({
+        W(e.slots, (s, f) => ({
           name: f,
           fn: C((m) => [
-            P(e.$slots, f, K(H(m)), void 0, !0)
+            M(e.$slots, f, F(K(m)), void 0, !0)
           ])
         }))
       ]), 1040, ["items", "is-option-disabled", "is-multi-level", "searching", "selected-items-list", "onSelectCategory", "onUnselectCategory"])
     ], 512), [
-      [re, !e.isAllItemsIncludingDisabled]
+      [ae, !e.isAllItemsIncludingDisabled]
     ])
   ], 16)), [
-    [E]
+    [y]
   ]);
 }
-const ge = /* @__PURE__ */ W(_t, [["render", Lt], ["__scopeId", "data-v-35f1a677"]]), fe = {
+const pe = /* @__PURE__ */ H(St, [["render", Tt], ["__scopeId", "data-v-8c62bb32"]]), ge = {
   "en-US": {
     showMore: "Show more",
     loading: "Loading"
   }
-}, Ot = x({
+}, Lt = z({
   name: "bento-listbox",
   components: {
-    BentoListboxSingleSelect: ut,
-    BentoListboxMultiSelect: ge,
+    BentoListboxSingleSelect: rt,
+    BentoListboxMultiSelect: pe,
     BentoTypography: ee,
-    BentoLoadingIndicator: We,
-    BentoLoadingButton: je
+    BentoLoadingIndicator: Ke,
+    BentoLoadingButton: ze
   },
-  directives: { BentoKeyboardNavigationDirective: ce },
-  i18n: { messages: fe },
+  directives: { BentoKeyboardNavigationDirective: re },
+  i18n: { messages: ge },
   props: {
     /**
      * Defines a string value that labels an interactive element.
@@ -1048,8 +1034,8 @@ const ge = /* @__PURE__ */ W(_t, [["render", Lt], ["__scopeId", "data-v-35f1a677
      */
     lazyLoadType: {
       type: String,
-      default: z.NONE,
-      validator: (e) => Object.values(z).includes(e)
+      default: q.NONE,
+      validator: (e) => Object.values(q).includes(e)
     },
     /**
      * If enabled, the user will be able to select multiple items.
@@ -1065,7 +1051,7 @@ const ge = /* @__PURE__ */ W(_t, [["render", Lt], ["__scopeId", "data-v-35f1a677
      *
      * If enabled, hides the "Select all" checkbox in "multiple" mode.
      */
-    searching: ge.props.searching,
+    searching: pe.props.searching,
     /**
      * The `input` value.
      * Providing an empty string or empty array will select no options.
@@ -1085,26 +1071,26 @@ const ge = /* @__PURE__ */ W(_t, [["render", Lt], ["__scopeId", "data-v-35f1a677
     o.TAB
   ],
   setup(e, { emit: t, slots: v }) {
-    const { t: p } = ue({ messages: fe }), n = R(null), b = R([]), r = u(() => e.lazyLoadType !== z.AUTOMATIC), l = u(() => e.lazyLoadType === z.AUTOMATIC), i = u(
-      () => r.value ? "true" : void 0
-    ), d = u(
-      () => r.value && e.loading ? "true" : "false"
-    ), E = u(
-      () => r.value ? "polite" : void 0
+    const { t: p } = ce({ messages: ge }), n = R(null), b = R([]), d = u(() => e.lazyLoadType !== q.AUTOMATIC), l = u(() => e.lazyLoadType === q.AUTOMATIC), i = u(
+      () => d.value ? "true" : void 0
+    ), r = u(
+      () => d.value && e.loading ? "true" : "false"
+    ), y = u(
+      () => d.value ? "polite" : void 0
     ), s = (T) => (G) => {
       t(T, G);
     }, f = () => {
       t(o.SHOW_MORE);
-    }, m = He(() => {
+    }, m = Fe(() => {
       const T = n.value, G = T.scrollTop + T.clientHeight >= T.scrollHeight;
       e.hasMoreItems && G && !e.loading && f();
-    }), O = u(() => {
+    }), A = u(() => {
       var T;
       return e.searching && ((T = e.items) == null ? void 0 : T.length) === 0;
     }), V = u(
-      () => e.lazyLoadType === z.BUTTON && e.hasMoreItems
-    ), M = u(
-      () => e.loading ? me.LOADING : me.START
+      () => e.lazyLoadType === q.BUTTON && e.hasMoreItems
+    ), P = u(
+      () => e.loading ? be.LOADING : be.START
     ), _ = u(() => e.loading ? p("loading") : p("showMore")), k = {
       [o.SELECT]: s(o.SELECT),
       [o.SPACE]: s(o.SPACE),
@@ -1117,20 +1103,17 @@ const ge = /* @__PURE__ */ W(_t, [["render", Lt], ["__scopeId", "data-v-35f1a677
       listboxItemRef: b,
       // a11y
       ariaAtomic: i,
-      ariaBusy: d,
-      ariaLive: E,
+      ariaBusy: r,
+      ariaLive: y,
       // Values
       hasAutomaticLazyLoader: l,
-      isSearchResultEmpty: O,
-      loadingButtonState: M,
+      isSearchResultEmpty: A,
+      loadingButtonState: P,
       slots: v,
       shouldDisplayShowMoreButton: V,
       showMoreButtonText: _,
       // Enums
-      BentoTypographyElement: te,
-      BentoButtonVariant: ze,
-      BentoListboxLazyLoadType: z,
-      BentoKeyboardNavigationKeyDownEvent: D,
+      BentoKeyboardNavigationKeyDownEvent: N,
       BentoListboxEvent: o,
       // Methods
       onOptionSelected: s,
@@ -1140,19 +1123,19 @@ const ge = /* @__PURE__ */ W(_t, [["render", Lt], ["__scopeId", "data-v-35f1a677
     };
   }
 });
-const It = ["id", "aria-busy", "aria-atomic", "aria-label", "aria-live"], Bt = {
+const Ot = ["id", "aria-busy", "aria-atomic", "aria-label", "aria-live"], At = {
   key: 0,
   class: "b-listbox__empty-search-message"
-}, $t = {
+}, It = {
   key: 2,
   class: "b-listbox__lazy-load"
-}, kt = {
+}, $t = {
   key: 3,
   class: "b-listbox__lazy-load"
 };
-function Rt(e, t, v, p, n, b) {
-  const r = S("bento-typography"), l = S("bento-listbox-multi-select"), i = S("bento-listbox-single-select"), d = S("bento-loading-button"), E = S("bento-loading-indicator"), s = de("bento-keyboard-navigation-directive");
-  return X((g(), L("div", {
+function Bt(e, t, v, p, n, b) {
+  const d = S("bento-typography"), l = S("bento-listbox-multi-select"), i = S("bento-listbox-single-select"), r = S("bento-loading-button"), y = S("bento-loading-indicator"), s = de("bento-keyboard-navigation-directive");
+  return X((g(), O("div", {
     id: e.id,
     ref: "listboxRef",
     class: "b-listbox",
@@ -1164,16 +1147,14 @@ function Rt(e, t, v, p, n, b) {
     "aria-live": e.ariaLive,
     onScroll: t[0] || (t[0] = () => e.hasAutomaticLazyLoader ? e.emitShowMoreOnScrollEnd() : void 0)
   }, [
-    e.isSearchResultEmpty ? (g(), L("div", Bt, [
-      A(r, {
-        el: e.BentoTypographyElement.SPAN
-      }, {
+    e.isSearchResultEmpty ? (g(), O("div", At, [
+      L(d, { el: "span" }, {
         default: C(() => [
-          N(B(e.noResultsMessage), 1)
+          D($(e.noResultsMessage), 1)
         ]),
         _: 1
-      }, 8, ["el"])
-    ])) : (g(), L(se, { key: 1 }, [
+      })
+    ])) : (g(), O(te, { key: 1 }, [
       e.multiple ? (g(), I(l, U({
         key: 0,
         ref: "listboxItemRef",
@@ -1182,10 +1163,10 @@ function Rt(e, t, v, p, n, b) {
         searching: e.searching,
         "is-option-disabled": e.isOptionDisabled
       }, J(e.listboxListeners)), Q({ _: 2 }, [
-        q(e.slots, (f, m) => ({
+        W(e.slots, (f, m) => ({
           name: m,
-          fn: C((O) => [
-            P(e.$slots, m, K(H(O)), void 0, !0)
+          fn: C((A) => [
+            M(e.$slots, m, F(K(A)), void 0, !0)
           ])
         }))
       ]), 1040, ["items", "selected-values", "searching", "is-option-disabled"])) : (g(), I(i, U({
@@ -1195,37 +1176,37 @@ function Rt(e, t, v, p, n, b) {
         "selected-value": e.selectedValue,
         "is-option-disabled": e.isOptionDisabled
       }, J(e.listboxListeners)), Q({ _: 2 }, [
-        q(e.slots, (f, m) => ({
+        W(e.slots, (f, m) => ({
           name: m,
-          fn: C((O) => [
-            P(e.$slots, m, K(H(O)), void 0, !0)
+          fn: C((A) => [
+            M(e.$slots, m, F(K(A)), void 0, !0)
           ])
         }))
       ]), 1040, ["items", "selected-value", "is-option-disabled"])),
-      e.shouldDisplayShowMoreButton ? (g(), L("div", $t, [
-        A(d, {
+      e.shouldDisplayShowMoreButton ? (g(), O("div", It, [
+        L(r, {
           state: e.loadingButtonState,
-          variant: e.BentoButtonVariant.SECONDARY,
-          onClick: e.emitShowMore
+          variant: "secondary",
+          onClickCapture: e.emitShowMore
         }, {
           default: C(() => [
-            N(B(e.showMoreButtonText), 1)
+            D($(e.showMoreButtonText), 1)
           ]),
           _: 1
-        }, 8, ["state", "variant", "onClick"])
-      ])) : e.loading ? (g(), L("div", kt, [
-        A(E)
+        }, 8, ["state", "onClickCapture"])
+      ])) : e.loading ? (g(), O("div", $t, [
+        L(y)
       ])) : j("", !0)
     ], 64))
-  ], 40, It)), [
+  ], 40, Ot)), [
     [s]
   ]);
 }
-const Kt = /* @__PURE__ */ W(Ot, [["render", Rt], ["__scopeId", "data-v-6175f9ff"]]);
+const Gt = /* @__PURE__ */ H(Lt, [["render", Bt], ["__scopeId", "data-v-336a01a3"]]);
 export {
-  Kt as B,
-  lt as C,
+  Gt as B,
+  tt as C,
   o as a,
-  z as b
+  q as b
 };
-//# sourceMappingURL=listbox.0c7c4e5e.js.map
+//# sourceMappingURL=listbox.6b52af1a.js.map