@adyen/bento-vue2 1.26.0 → 1.27.0

package/dist/chunks/{use-cached-selected-values.69297473.js → use-cached-selected-values.98a9ed01.js}

@@ -1,21 +1,20 @@
-import { computed as i, ref as A, onMounted as ee, onUnmounted as ve, watch as te, defineComponent as D, toRef as V } from "vue";
-import { B as w } from "./index.dd30e538.js";
-import { BentoLoadingIndicator as fe } from "../loading-indicator.js";
-import { BentoEmptyState as ge } from "../empty-state.js";
+import { computed as i, ref as A, onMounted as te, onUnmounted as fe, watch as se, defineComponent as $, toRef as V } from "vue";
+import { B as w } from "./index.e29a6907.js";
+import { BentoLoadingIndicator as ge } from "../loading-indicator.js";
+import { BentoEmptyState as ye } from "../empty-state.js";
 import { u as Y } from "./i18n.eb5b985b.js";
-import { d as ye } from "./debounce.b5ef6acf.js";
-import { n as N } from "./_plugin-vue2_normalizer.71e2aa87.js";
-import { C as pe } from "./checkmark.a6ed8f47.js";
-import { B as k, a as X } from "./keyboard-navigation.ca47dfa8.js";
-import { B as J } from "./checkbox.bfed007c.js";
+import { d as pe } from "./debounce.b5ef6acf.js";
+import { n as D } from "./_plugin-vue2_normalizer.71e2aa87.js";
+import { B as k, a as X } from "./keyboard-navigation.bbc3d15c.js";
+import { B as Z } from "./checkbox.9f9c978a.js";
 import "./index.4c062058.js";
 import { C as Se, a as xe } from "./chevron-up.81185563.js";
-import { B as Ce } from "./base-button.ad74b6f8.js";
+import { B as Ce } from "./base-button.852204dc.js";
 import { C as he } from "./cross-small.e851e0de.js";
-import { B as Ee, a as Q } from "./loading-button.eafc9e1b.js";
-import { o as Te } from "./resize.a041304d.js";
+import { B as Ee, a as J } from "./loading-button.692dbdc8.js";
+import { o as Le } from "./resize.a041304d.js";
 import "../assets/use-cached-selected-values.css";
-const se = (t, e, s, l) => {
+const le = (t, e, s, l) => {
   const n = i(
     () => {
       var d, r;
@@ -33,11 +32,11 @@ const se = (t, e, s, l) => {
     }
   };
 };
-function Le(t, { disabled: e, itemHeight: s, overscan: l = 5, prefixHeight: n }) {
+function Te(t, { disabled: e, itemHeight: s, overscan: l = 5, prefixHeight: n }) {
   const o = A(null), _ = A([]), d = A(0), r = A(0), u = A(0);
   let p;
   const h = i(() => {
-    const S = typeof s == "number" ? t.value.length * s : t.value.reduce((L, m, x) => L + s(x), 0), O = typeof s == "number" ? d.value * s : t.value.slice(0, d.value).reduce((L, m, x) => L + s(x), 0);
+    const S = typeof s == "number" ? t.value.length * s : t.value.reduce((T, v, x) => T + s(x), 0), O = typeof s == "number" ? d.value * s : t.value.slice(0, d.value).reduce((T, v, x) => T + s(x), 0);
     return {
       style: {
         marginTop: `${O}px`,
@@ -48,41 +47,41 @@ function Le(t, { disabled: e, itemHeight: s, overscan: l = 5, prefixHeight: n })
     const S = (n == null ? void 0 : n.value) ?? 0, O = Math.max(o.value.scrollTop - S, 0);
     if (typeof s == "number")
       return Math.floor(O / s);
-    let L = 0, m = 0;
+    let T = 0, v = 0;
     for (let x = 0; x < t.value.length; x += 1) {
       const R = s(x);
-      if (L += R, L >= O) {
-        m = x;
+      if (T += R, T >= O) {
+        v = x;
         break;
       }
     }
-    return m;
-  }, v = () => {
+    return v;
+  }, m = () => {
     if (u.value = o.value.clientHeight, typeof s == "number")
       return Math.ceil(u.value / s);
     const S = d.value ?? 0;
-    let O = 0, L = 0;
-    for (let m = S; m < t.value.length; m += 1) {
-      const x = s(m);
-      if (O += x, L = m, O > u.value)
+    let O = 0, T = 0;
+    for (let v = S; v < t.value.length; v += 1) {
+      const x = s(v);
+      if (O += x, T = v, O > u.value)
         break;
     }
-    return L - S;
+    return T - S;
   }, y = () => {
     if (o.value) {
-      const S = v();
+      const S = m();
       d.value = E(), r.value = Math.min(d.value + S + l, t.value.length), _.value = t.value.slice(d.value, r.value);
     }
-  }, T = () => {
+  }, L = () => {
     y();
   };
-  e || (ee(() => {
-    o.value && (u.value = o.value.clientHeight, p = Te(o.value, ({ clientHeight: S }) => {
+  e || (te(() => {
+    o.value && (u.value = o.value.clientHeight, p = Le(o.value, ({ clientHeight: S }) => {
       u.value = S, y();
     }), y());
-  }), ve(() => {
+  }), fe(() => {
     p == null || p.disconnect();
-  }), te(
+  }), se(
     () => t.value,
     () => {
       y();
@@ -102,13 +101,13 @@ function Le(t, { disabled: e, itemHeight: s, overscan: l = 5, prefixHeight: n })
   } : {
     containerRef: o,
     containerProps: B,
-    onScroll: T,
+    onScroll: L,
     list: _,
     wrapperProps: h
   };
 }
-var a = /* @__PURE__ */ ((t) => (t.SELECT = "select", t.SHOW_MORE = "show-more", t.ESCAPE = "escape-pressed", t.CLICK = "click", t.ENTER = "enter-pressed", t.SPACE = "space-pressed", t.TAB = "tab-pressed", t.CLOSE_DROPDOWN = "close-dropdown", t))(a || {}), M = /* @__PURE__ */ ((t) => (t.AUTOMATIC = "automatic", t.BUTTON = "button", t.NONE = "none", t))(M || {});
-const Oe = D({
+var a = /* @__PURE__ */ ((t) => (t.SELECT = "select", t.SHOW_MORE = "show-more", t.ESCAPE = "escape-pressed", t.CLICK = "click", t.ENTER = "enter-pressed", t.SPACE = "space-pressed", t.TAB = "tab-pressed", t.CLOSE_DROPDOWN = "close-dropdown", t))(a || {}), P = /* @__PURE__ */ ((t) => (t.AUTOMATIC = "automatic", t.BUTTON = "button", t.NONE = "none", t))(P || {});
+const Oe = $({
   name: "bento-listbox-static-category",
   components: {
     BentoTypography: w
@@ -126,7 +125,7 @@ const Oe = D({
 var Ae = function() {
   var e = this, s = e._self._c;
   return e._self._setupProxy, s("div", { staticClass: "b-listbox-single-select-category" }, [s("bento-typography", { staticClass: "b-listbox-single-select-category__label-text", attrs: { variant: "caption", el: "span" } }, [e._v(" " + e._s(e.categoryLabel) + " ")]), s("div", [e._t("default")], 2)], 1);
-}, Ie = [], Be = /* @__PURE__ */ N(
+}, Ie = [], Be = /* @__PURE__ */ D(
   Oe,
   Ae,
   Ie,
@@ -136,7 +135,7 @@ var Ae = function() {
   null,
   null
 );
-const Re = Be.exports, ke = D({
+const Re = Be.exports, ke = $({
   name: "bento-listbox-option",
   props: {
     /**
@@ -179,22 +178,42 @@ var De = function() {
   }, function(l) {
     return !l.type.indexOf("key") && e._k(l.keyCode, "tab", 9, l.key, "Tab") ? null : e.onOptionSelected(e.BentoListboxEvent.TAB, l);
   }] } }, "label", e.$attrs, !1), [e._t("default")], 2);
-}, Ne = [], Pe = /* @__PURE__ */ N(
+}, $e = [], Ne = /* @__PURE__ */ D(
   ke,
   De,
-  Ne,
+  $e,
   !1,
   null,
   "d7fb415c",
   null,
   null
 );
-const q = Pe.exports, $e = D({
+const q = Ne.exports;
+let Q = 0;
+const Me = {
+  beforeCreate() {
+    this.uuid = Q.toString(), Q += 1;
+  }
+};
+var Pe = function() {
+  var e = this, s = e._self._c;
+  return s("svg", e._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", e.$attrs, !1), [e.$attrs["svg-title"] ? s("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), s("path", { attrs: { fill: "#00112C", d: "M15.0608 4.00011L14.0001 2.93945L6.00011 10.9395L2.00011 6.93945L0.939453 8.00011L6.00011 13.0608L15.0608 4.00011Z" } })]);
+}, we = [], Fe = /* @__PURE__ */ D(
+  Me,
+  Pe,
+  we,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const Ge = Fe.exports, Ue = $({
   name: "bento-listbox-single-select-option",
   components: {
     BentoListboxOption: q,
     BentoTypography: w,
-    CheckmarkIcon: pe
+    CheckmarkIcon: Ge
   },
   props: {
     /**
@@ -231,7 +250,7 @@ const q = Pe.exports, $e = D({
     };
   }
 });
-var Me = function() {
+var ze = function() {
   var e = this, s = e._self._c;
   return e._self._setupProxy, s("bento-listbox-option", { staticClass: "b-listbox-single-select-option", attrs: { disabled: e.disabled, selected: e.selected, "aria-selected": e.ariaSelected, "aria-disabled": e.ariaDisabled, tabindex: e.tabIndex }, on: e._d({ click: function(l) {
     return e.onOptionSelected(e.BentoListboxEvent.SELECT);
@@ -244,23 +263,23 @@ var Me = function() {
   }]) }, [e._t("default", function() {
     return [s("span", { staticClass: "b-listbox-single-select-option__text" }, [s("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(e.option.label))]), e.option.description ? s("bento-typography", { staticClass: "b-listbox-single-select-option__description", attrs: { el: "span" } }, [e._v(" " + e._s(e.option.description) + " ")]) : e._e()], 1)];
   }, null, e.option), s("span", { staticClass: "b-listbox-single-select-option__check-icon" }, [s("checkmark-icon", { directives: [{ name: "show", rawName: "v-show", value: e.selected, expression: "selected" }], attrs: { "svg-title": "selected" } })], 1)], 2);
-}, we = [], Fe = /* @__PURE__ */ N(
-  $e,
-  Me,
-  we,
+}, Ve = [], Ye = /* @__PURE__ */ D(
+  Ue,
+  ze,
+  Ve,
   !1,
   null,
   "3ba7da5b",
   null,
   null
 );
-const Ge = Fe.exports, le = ({ items: t, isOptionDisabled: e }, s) => {
+const qe = Ye.exports, ne = ({ items: t, isOptionDisabled: e }, s) => {
   const l = i(() => t.value.length - 1), n = A(0);
-  ee(() => {
-    e && (n.value = t.value.findIndex((v) => !e(v)));
+  te(() => {
+    e && (n.value = t.value.findIndex((m) => !e(m)));
   });
-  const o = (v) => !e || !!e && e(t.value[v]), _ = (v) => !e || !!e && !e(t.value[v]), d = (v) => {
-    switch (v) {
+  const o = (m) => !e || !!e && e(t.value[m]), _ = (m) => !e || !!e && !e(t.value[m]), d = (m) => {
+    switch (m) {
       case "increase":
         n.value += 1;
         break;
@@ -268,11 +287,11 @@ const Ge = Fe.exports, le = ({ items: t, isOptionDisabled: e }, s) => {
         n.value -= 1;
         break;
     }
-  }, r = ({ edgeCaseItem: v, isItemBeforeEdgeCaseItem: y }, T, B) => {
-    n.value !== v && (y ? _(v) && d(B) : (d(B), o(n.value) && T()), s(n.value));
-  }, u = (v) => {
-    var T;
-    (T = v == null ? void 0 : v.detail) == null || T.preventDefault();
+  }, r = ({ edgeCaseItem: m, isItemBeforeEdgeCaseItem: y }, L, B) => {
+    n.value !== m && (y ? _(m) && d(B) : (d(B), o(n.value) && L()), s(n.value));
+  }, u = (m) => {
+    var L;
+    (L = m == null ? void 0 : m.detail) == null || L.preventDefault();
     const y = n.value === l.value - 2;
     r(
       {
@@ -283,9 +302,9 @@ const Ge = Fe.exports, le = ({ items: t, isOptionDisabled: e }, s) => {
       "increase"
       /* INCREASE */
     );
-  }, p = (v) => {
-    var T;
-    (T = v == null ? void 0 : v.detail) == null || T.preventDefault();
+  }, p = (m) => {
+    var L;
+    (L = m == null ? void 0 : m.detail) == null || L.preventDefault();
     const y = n.value === 1;
     r(
       {
@@ -307,11 +326,11 @@ const Ge = Fe.exports, le = ({ items: t, isOptionDisabled: e }, s) => {
     moveToNextElement: u,
     moveToPreviousElement: p
   };
-}, Ue = D({
+}, We = $({
   name: "bento-listbox-single-select",
   components: {
     BentoListboxSingleSelectCategory: Re,
-    BentoListboxSingleSelectOption: Ge
+    BentoListboxSingleSelectOption: qe
   },
   directives: { BentoKeyboardNavigationDirective: X },
   inheritAttrs: !1,
@@ -359,9 +378,9 @@ const Ge = Fe.exports, le = ({ items: t, isOptionDisabled: e }, s) => {
     const l = A([]), n = i(() => {
       var y;
       return !!((y = t.selectedValue) != null && y.length) && t.selectedValue.at(0);
-    }), o = i(() => !!t.items.some(({ items: y }) => !!y)), _ = (y) => (T) => {
-      e(y, [T]);
-    }, d = (y) => l.value[y].$el.focus(), { moveToNextElement: r, moveToPreviousElement: u, moveToFirstElement: p, moveToLastElement: h } = le(
+    }), o = i(() => !!t.items.some(({ items: y }) => !!y)), _ = (y) => (L) => {
+      e(y, [L]);
+    }, d = (y) => l.value[y].$el.focus(), { moveToNextElement: r, moveToPreviousElement: u, moveToFirstElement: p, moveToLastElement: h } = ne(
       {
         items: V(t, "items"),
         isOptionDisabled: t.isOptionDisabled
@@ -372,7 +391,7 @@ const Ge = Fe.exports, le = ({ items: t, isOptionDisabled: e }, s) => {
       [k.ARROW_DOWN]: r,
       [k.HOME]: p,
       [k.END]: h
-    }, v = {
+    }, m = {
       [a.SELECT]: _(a.SELECT),
       [a.SPACE]: _(a.SPACE),
       [a.TAB]: _(a.TAB),
@@ -391,11 +410,11 @@ const Ge = Fe.exports, le = ({ items: t, isOptionDisabled: e }, s) => {
       onOptionSelected: _,
       // Keyboard navigation
       listboxListeners: E,
-      listboxOptionListeners: v
+      listboxOptionListeners: m
     };
   }
 });
-var ze = function() {
+var Ke = function() {
   var e = this, s = e._self._c;
   return e._self._setupProxy, s("div", e._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }] }, e.listboxListeners), [e.hasCategories && e.staticCategories ? e._l(e.items, function(l) {
     return s("bento-listbox-single-select-category", { key: l.value, attrs: { "category-label": l.label, role: "group" } }, e._l(l.items, function(n) {
@@ -412,28 +431,28 @@ var ze = function() {
       } };
     })], null, !0) }, e.listboxOptionListeners));
   })], 2);
-}, Ve = [], Ye = /* @__PURE__ */ N(
-  Ue,
-  ze,
-  Ve,
+}, je = [], He = /* @__PURE__ */ D(
+  We,
+  Ke,
+  je,
   !1,
   null,
   null,
   null,
   null
 );
-const qe = Ye.exports;
+const Xe = He.exports;
 var j = /* @__PURE__ */ ((t) => (t.DISABLED = "disabled", t.STATIC_CATEGORY = "static-category", t))(j || {}), U = /* @__PURE__ */ ((t) => (t.SELECT_CATEGORY = "select-category", t.UNSELECT_CATEGORY = "unselect-category", t))(U || {});
-const We = {
+const Ze = {
   "en-US": {
     categoryClosed: "{category} closed",
     categoryOpened: "{category} opened"
   }
-}, Ke = D({
-  i18n: { messages: We },
+}, Je = $({
+  i18n: { messages: Ze },
   name: "bento-listbox-multi-select-category",
   components: {
-    BentoCheckbox: J,
+    BentoCheckbox: Z,
     BentoTypography: w,
     BentoListboxOption: q,
     ChevronDownIcon: Se,
@@ -480,53 +499,53 @@ const We = {
   },
   emits: [U.SELECT_CATEGORY, U.UNSELECT_CATEGORY],
   setup(t, { emit: e }) {
-    const s = A(!1), { t: l } = Y(), n = (m) => t.isOptionDisabled ? t.isOptionDisabled(m) : !1, o = i(
-      () => t.category.items.every((m) => n(m))
+    const s = A(!1), { t: l } = Y(), n = (v) => t.isOptionDisabled ? t.isOptionDisabled(v) : !1, o = i(
+      () => t.category.items.every((v) => n(v))
     ), _ = V(t, "staticCategories"), d = i(() => s.value || t.staticCategories), r = i(() => ({
       [`b-listbox-multi-select-category--${j.DISABLED}`]: o.value,
       [`b-listbox-multi-select-category--${j.STATIC_CATEGORY}`]: t.staticCategories
-    })), u = (m) => {
-      m.preventDefault(), s.value = !s.value;
-    }, p = (m) => {
+    })), u = (v) => {
+      v.preventDefault(), s.value = !s.value;
+    }, p = (v) => {
       var F;
-      const x = n(m), R = ((F = t.selectedItemsList) == null ? void 0 : F.includes(m.value)) || !1;
+      const x = n(v), R = ((F = t.selectedItemsList) == null ? void 0 : F.includes(v.value)) || !1;
       return { isDisabled: x, isPreSelected: R };
     }, h = i(
-      () => t.category.items.filter((m) => {
-        const { isDisabled: x, isPreSelected: R } = p(m);
+      () => t.category.items.filter((v) => {
+        const { isDisabled: x, isPreSelected: R } = p(v);
         return x && R || !x;
       })
     ), E = i(
       () => {
-        var m;
-        return (m = h.value) == null ? void 0 : m.filter(
+        var v;
+        return (v = h.value) == null ? void 0 : v.filter(
           ({ value: x }) => {
             var R;
             return (R = t.selectedItemsList) == null ? void 0 : R.includes(x);
           }
         );
       }
-    ), v = i(() => {
-      const m = s.value ? "categoryOpened" : "categoryClosed";
-      return l(m, { category: t.category.label });
+    ), m = i(() => {
+      const v = s.value ? "categoryOpened" : "categoryClosed";
+      return l(v, { category: t.category.label });
     }), y = i(
       () => ({
         el: "span",
         variant: t.staticCategories ? "caption" : "body"
       })
-    ), T = () => {
+    ), L = () => {
       e(U.SELECT_CATEGORY);
     }, B = () => {
       e(U.UNSELECT_CATEGORY);
-    }, { isAllSelected: S, isIndeterminate: O, toggleSelectAll: L } = se(
+    }, { isAllSelected: S, isIndeterminate: O, toggleSelectAll: T } = le(
       E,
       h,
-      T,
+      L,
       B
     );
     return {
       // Values
-      chevronTitle: v,
+      chevronTitle: m,
       conditionalClass: r,
       hasAllPropsDisabled: o,
       isOpen: s,
@@ -538,34 +557,34 @@ const We = {
       categoryLabelProps: y,
       // Methods
       toggleOpen: u,
-      toggleSelectAll: L
+      toggleSelectAll: T
     };
   }
 });
-var je = function() {
+var Qe = function() {
   var e = this, s = e._self._c;
   return e._self._setupProxy, s("div", [s("bento-listbox-option", { staticClass: "b-listbox-multi-select-category__option", class: e.conditionalClass }, [e.isStaticCategory ? e._e() : s("bento-checkbox", { attrs: { "model-value": e.isAllSelected, indeterminate: e.isIndeterminate, disabled: e.hasAllPropsDisabled, "aria-label": e.category.label, value: e.category.value }, on: { "update:model-value": e.toggleSelectAll } }), s("span", { staticClass: "b-listbox-multi-select-category__label" }, [s("bento-typography", e._b({ staticClass: "b-listbox-multi-select-category__label-text" }, "bento-typography", e.categoryLabelProps, !1), [e._v(" " + e._s(e.category.label) + " ")]), e.isStaticCategory ? e._e() : s("div", { staticClass: "b-listbox-multi-select-category__label-chevron", attrs: { "data-testid": "toggle-listbox" }, on: { "!click": function(l) {
     return e.toggleOpen.apply(null, arguments);
   } } }, [e.isOpen ? s("chevron-up-icon", { attrs: { "svg-title": e.chevronTitle } }) : s("chevron-down-icon", { attrs: { "svg-title": e.chevronTitle } })], 1)], 1)], 1), s("div", { directives: [{ name: "show", rawName: "v-show", value: e.showItemChildren, expression: "showItemChildren" }] }, [e._t("default")], 2)], 1);
-}, He = [], Xe = /* @__PURE__ */ N(
-  Ke,
-  je,
-  He,
+}, et = [], tt = /* @__PURE__ */ D(
+  Je,
+  Qe,
+  et,
   !1,
   null,
   "f360ac3d",
   null,
   null
 );
-const Je = Xe.exports;
-var $ = /* @__PURE__ */ ((t) => (t.SELECT_CATEGORY = "select-category", t.TOGGLE_CHECKBOX_SELECTION = "toggle-checkbox-selection", t.UNSELECT_CATEGORY = "unselect-category", t))($ || {});
-const Qe = D({
+const st = tt.exports;
+var M = /* @__PURE__ */ ((t) => (t.SELECT_CATEGORY = "select-category", t.TOGGLE_CHECKBOX_SELECTION = "toggle-checkbox-selection", t.UNSELECT_CATEGORY = "unselect-category", t))(M || {});
+const lt = $({
   name: "listbox-multi-select-options",
   components: {
-    BentoCheckbox: J,
+    BentoCheckbox: Z,
     BentoListboxOption: q,
     BentoTypography: w,
-    ListboxMultiSelectCategory: Je
+    ListboxMultiSelectCategory: st
   },
   props: {
     /**
@@ -623,19 +642,19 @@ const Qe = D({
     staticCategories: { type: Boolean, default: !1 }
   },
   emits: [
-    $.TOGGLE_CHECKBOX_SELECTION,
-    $.SELECT_CATEGORY,
-    $.UNSELECT_CATEGORY
+    M.TOGGLE_CHECKBOX_SELECTION,
+    M.SELECT_CATEGORY,
+    M.UNSELECT_CATEGORY
   ],
   setup(t, { emit: e }) {
     const s = (r) => {
-      e($.TOGGLE_CHECKBOX_SELECTION, r);
+      e(M.TOGGLE_CHECKBOX_SELECTION, r);
     }, l = (r) => !!r.items, n = (r) => {
       const u = t.isMultiLevel && t.searching;
       return r.description && (!t.isMultiLevel || u);
     }, o = (r) => r.items ? !!r.items.find((u) => t.selectedItemsList.includes(u.value)) : t.selectedItemsList.includes(r.value), _ = (r, u) => {
       if (l(u))
-        return e(r ? $.SELECT_CATEGORY : $.UNSELECT_CATEGORY, u);
+        return e(r ? M.SELECT_CATEGORY : M.UNSELECT_CATEGORY, u);
       s(u.value);
     };
     return {
@@ -651,11 +670,11 @@ const Qe = D({
       selectSearch: _,
       // Enums
       BentoListboxEvent: a,
-      ListboxMultiSelectOptionsEvent: $
+      ListboxMultiSelectOptionsEvent: M
     };
   }
 });
-var Ze = function() {
+var nt = function() {
   var e = this, s = e._self._c;
   return e._self._setupProxy, s("div", e._l(e.items, function(l) {
     return s("div", { key: `selected-${l.value}` }, [e.searching && e.isMultiLevel ? [s("bento-listbox-option", { staticClass: "b-listbox-multi-select-options", class: e.conditionalClasses, attrs: { disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null } }, [s("bento-checkbox", { attrs: { "model-value": e.isOptionSelected(l), "aria-label": l.label, disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null, value: l.value }, on: { "update:model-value": (n) => e.selectSearch(n, l) } }), e._t("default", function() {
@@ -670,24 +689,24 @@ var Ze = function() {
       return [s("span", { staticClass: "b-listbox-multi-select__option-text" }, [s("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(l.label))]), e.shouldShowDescription(l) ? s("bento-typography", { staticClass: "b-listbox-multi-select__option-description", attrs: { el: "span" } }, [e._v(" " + e._s(l.description) + " ")]) : e._e()], 1)];
     }, null, l)], 2)]], 2);
   }), 0);
-}, et = [], tt = /* @__PURE__ */ N(
-  Qe,
-  Ze,
-  et,
+}, ot = [], at = /* @__PURE__ */ D(
+  lt,
+  nt,
+  ot,
   !1,
   null,
   "b2db9f50",
   null,
   null
 );
-const st = tt.exports, lt = {
+const it = at.exports, ct = {
   "en-US": {
     remove: "Remove"
   }
-}, nt = {
-  i18n: { messages: lt }
-}, ot = /* @__PURE__ */ D({
-  ...nt,
+}, rt = {
+  i18n: { messages: ct }
+}, ut = /* @__PURE__ */ $({
+  ...rt,
   __name: "listbox-multi-select-chips",
   props: {
     /**
@@ -715,7 +734,7 @@ const st = tt.exports, lt = {
     return { __sfc: !0, emit: e, t: s, unselectOption: (n) => n.items ? e("unselect-category", n) : e("unselect-item", n), BentoTypography: w, BaseButton: Ce, CrossSmallIcon: he };
   }
 });
-var at = function() {
+var dt = function() {
   var e = this, s = e._self._c, l = e._self._setupProxy;
   return s("div", { staticClass: "b-listbox-multi-select-chips" }, e._l(e.items, function(n) {
     return s("div", { key: `selected-${n.value}` }, [s(l.BaseButton, { staticClass: "b-listbox-multi-select-chips__chip", attrs: { disabled: e.isOptionDisabled ? e.isOptionDisabled(n) : null }, on: { click: function(o) {
@@ -724,24 +743,24 @@ var at = function() {
       return [s(l.CrossSmallIcon, { attrs: { "svg-title": l.t("remove") } })];
     }, proxy: !0 }], null, !0) }, [s(l.BentoTypography, { staticClass: "b-listbox-multi-select-chips__option-text", attrs: { el: "span", variant: "caption" } }, [e._v(e._s(n.label))])], 1)], 1);
   }), 0);
-}, it = [], ct = /* @__PURE__ */ N(
-  ot,
-  at,
-  it,
+}, _t = [], bt = /* @__PURE__ */ D(
+  ut,
+  dt,
+  _t,
   !1,
   null,
   "931e5246",
   null,
   null
 );
-const rt = ct.exports, ut = {
+const vt = bt.exports, mt = {
   "en-US": {
     allSelected: "All selected ({total})",
     numberOfTotalSelected: "{number} of {total} selected",
     numbersSelected: "{number} selected",
     selectAll: "Select all ({total})"
   }
-}, dt = (t) => {
+}, ft = (t) => {
   const e = i(() => {
     var l;
     return !!((l = t.value) != null && l.find(({ items: n }) => !!n));
@@ -753,15 +772,15 @@ const rt = ct.exports, ut = {
     isMultiLevelSelect: e,
     flattenedItemsList: s
   };
-}, _t = D({
-  i18n: { messages: ut },
+}, gt = $({
+  i18n: { messages: mt },
   name: "bento-listbox-multi-select",
   components: {
-    BentoCheckbox: J,
+    BentoCheckbox: Z,
     BentoListboxOption: q,
     BentoTypography: w,
-    ListboxMultiSelectOptions: st,
-    ListboxMultiSelectChips: rt
+    ListboxMultiSelectOptions: it,
+    ListboxMultiSelectChips: vt
   },
   directives: { BentoKeyboardNavigationDirective: X },
   props: {
@@ -800,8 +819,8 @@ const rt = ct.exports, ut = {
      */
     lazyLoadType: {
       type: String,
-      default: M.NONE,
-      validator: (t) => Object.values(M).includes(t)
+      default: P.NONE,
+      validator: (t) => Object.values(P).includes(t)
     },
     /**
      * Flag that indicates that an external search it's being made
@@ -827,7 +846,7 @@ const rt = ct.exports, ut = {
   setup(t, { emit: e, slots: s }) {
     const { t: l } = Y(), n = A(null), o = A(null), _ = A(null), d = i(
       () => t.selectedValues.map(({ value: c }) => c)
-    ), { isMultiLevelSelect: r, flattenedItemsList: u } = dt(V(t, "items")), p = (c) => {
+    ), { isMultiLevelSelect: r, flattenedItemsList: u } = ft(V(t, "items")), p = (c) => {
       var C;
       const b = t.isOptionDisabled(c), f = ((C = d.value) == null ? void 0 : C.includes(c.value)) || !1;
       return { isDisabled: b, isPreSelected: f };
@@ -851,33 +870,33 @@ const rt = ct.exports, ut = {
           ).length === b.items.length : (f = d.value) == null ? void 0 : f.includes(b.value);
         });
       }
-    ), v = () => r.value && !t.searching ? u.value.length : t.items.length, y = i(() => {
+    ), m = () => r.value && !t.searching ? u.value.length : t.items.length, y = i(() => {
       var C;
-      const c = h.value.length, b = v(), f = ((C = E.value) == null ? void 0 : C.length) || 0;
+      const c = h.value.length, b = m(), f = ((C = E.value) == null ? void 0 : C.length) || 0;
       return f === 0 ? l("selectAll", { total: c }) : f === b ? l("allSelected", { total: b }) : f <= b ? l("numberOfTotalSelected", { number: f, total: b }) : l("numbersSelected", { number: f });
-    }), T = (c) => {
+    }), L = (c) => {
       const b = (C) => {
-        const { isDisabled: g, isPreSelected: P } = p(C);
-        return g && P || !g;
+        const { isDisabled: g, isPreSelected: N } = p(C);
+        return g && N || !g;
       }, f = c.filter(b).filter((C) => !d.value.includes(C.value));
       e(a.SELECT, [...t.selectedValues, ...f]);
     }, B = (c) => {
       const b = (g) => {
-        const { isDisabled: P, isPreSelected: me } = p(g);
-        return !(P && me);
+        const { isDisabled: N, isPreSelected: me } = p(g);
+        return !(N && me);
       }, f = c.filter(b).map(({ value: g }) => g), C = t.selectedValues.filter((g) => !(f != null && f.includes(g.value)));
       e(a.SELECT, C);
     }, S = () => {
-      T(u.value);
+      L(u.value);
     }, O = () => {
       B(u.value);
-    }, { isAllSelected: L, isIndeterminate: m, toggleSelectAll: x } = se(
+    }, { isAllSelected: T, isIndeterminate: v, toggleSelectAll: x } = le(
       E,
       h,
       S,
       O
     ), R = (c) => {
-      T(c.items);
+      L(c.items);
     }, F = (c) => {
       B(c.items);
     }, W = (c, b) => {
@@ -887,47 +906,47 @@ const rt = ct.exports, ut = {
     }, z = i(() => {
       if (!r.value)
         return t.selectedValues;
-      const c = (g) => d.value.includes(g.value), b = (g) => !t.staticCategories && g.every((P) => c(P));
+      const c = (g) => d.value.includes(g.value), b = (g) => !t.staticCategories && g.every((N) => c(N));
       return t.items.flatMap(
         (g) => g.items && !b(g.items) ? g.items : g
       ).filter((g) => g.items ? !0 : c(g));
     }), K = i(() => {
-      var f, C, g, P;
+      var f, C, g, N;
       const c = ["automatic", "button"].includes(t.lazyLoadType), b = ((f = t.selectedValues) == null ? void 0 : f.length) > 0 && ((C = E.value) == null ? void 0 : C.length) !== ((g = u.value) == null ? void 0 : g.length);
-      return c && t.hasMoreItems ? !!((P = t.selectedValues) != null && P.length) : b;
+      return c && t.hasMoreItems ? !!((N = t.selectedValues) != null && N.length) : b;
     }), I = i(() => ["automatic", "button"].includes(t.lazyLoadType) ? !t.hasMoreItems : !0), G = i(
       () => n.value ? [n.value] : []
-    ), ne = i(
+    ), oe = i(
       () => {
         var c, b;
         return (b = (c = o.value) == null ? void 0 : c.$children) != null && b.length ? o.value.$children : [];
       }
-    ), oe = i(
+    ), ae = i(
       () => {
         var c, b;
         return (b = (c = _.value) == null ? void 0 : c.$children) != null && b.length ? _.value.$children : [];
       }
-    ), ae = i(() => ({ label: y, value: L })), ie = i(() => [
-      ae,
+    ), ie = i(() => ({ label: y, value: T })), ce = i(() => [
+      ie,
       ...z.value,
       ...u.value
-    ]), ce = (c) => {
+    ]), re = (c) => {
       [
         ...G.value,
-        ...ne.value,
-        ...oe.value
+        ...oe.value,
+        ...ae.value
       ][c].$el.focus();
-    }, { moveToNextElement: re, moveToPreviousElement: ue, moveToFirstElement: de, moveToLastElement: _e } = le(
+    }, { moveToNextElement: ue, moveToPreviousElement: de, moveToFirstElement: _e, moveToLastElement: be } = ne(
       {
-        items: A(ie),
+        items: A(ce),
         isOptionDisabled: t.isOptionDisabled
       },
-      ce
-    ), be = {
-      [k.ARROW_UP]: (c) => ue(c),
-      [k.ARROW_DOWN]: (c) => re(c),
-      [k.HOME]: de,
-      [k.END]: _e
+      re
+    ), ve = {
+      [k.ARROW_UP]: (c) => de(c),
+      [k.ARROW_DOWN]: (c) => ue(c),
+      [k.HOME]: _e,
+      [k.END]: be
     };
     return {
       // Refs
@@ -935,9 +954,9 @@ const rt = ct.exports, ut = {
       selectedListboxItemsRef: o,
       listboxItemsRef: _,
       // Values
-      isAllSelected: L,
+      isAllSelected: T,
       showSelectedItems: K,
-      isIndeterminate: m,
+      isIndeterminate: v,
       isMultiLevelSelect: r,
       flattenedItemsList: u,
       selectedItemsList: d,
@@ -953,11 +972,11 @@ const rt = ct.exports, ut = {
       toggleSelectAll: x,
       unselectAllCategory: F,
       // Events
-      listboxListeners: be
+      listboxListeners: ve
     };
   }
 });
-var bt = function() {
+var yt = function() {
   var e = this, s = e._self._c;
   return e._self._setupProxy, s("div", e._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], staticClass: "b-listbox-multi-select" }, e.listboxListeners), [e.showSelectAllCheckbox ? s("bento-listbox-option", { ref: "selectAllListboxItemsRef", staticClass: "b-listbox-multi-select__option" }, [s("bento-checkbox", { attrs: { "aria-label": e.selectAllCheckboxText, "model-value": e.isAllSelected, indeterminate: e.isIndeterminate }, on: { "update:model-value": e.toggleSelectAll } }), s("bento-typography", { attrs: { el: "span", "aria-hidden": "true" } }, [e._v(" " + e._s(e.selectAllCheckboxText) + " ")])], 1) : e._e(), e.showSelectAllCheckbox ? s("hr", { staticClass: "b-listbox-multi-select__divider" }) : e._e(), e.showSelectedItems ? s("div", [s("listbox-multi-select-chips", { ref: "selectedListboxItemsRef", attrs: { items: e.selectedOptions, "is-option-disabled": e.isOptionDisabled }, on: { "unselect-category": e.unselectAllCategory, "unselect-item": function(l) {
     return e.toggleCheckboxSelection(e.BentoListboxEvent.SELECT, l);
@@ -974,33 +993,33 @@ var bt = function() {
       return [e._t(n, null, null, o)];
     } };
   })], null, !0) })], 1);
-}, mt = [], vt = /* @__PURE__ */ N(
-  _t,
-  bt,
-  mt,
+}, pt = [], St = /* @__PURE__ */ D(
+  gt,
+  yt,
+  pt,
   !1,
   null,
   "8e21add2",
   null,
   null
 );
-const Z = vt.exports, ft = {
+const ee = St.exports, xt = {
   "en-US": {
     showMore: "Show more",
     loading: "Loading"
   }
-}, gt = 36, yt = D({
+}, Ct = 36, ht = $({
   name: "bento-listbox",
   components: {
-    BentoEmptyState: ge,
-    BentoListboxSingleSelect: qe,
-    BentoListboxMultiSelect: Z,
+    BentoEmptyState: ye,
+    BentoListboxSingleSelect: Xe,
+    BentoListboxMultiSelect: ee,
     BentoTypography: w,
-    BentoLoadingIndicator: fe,
+    BentoLoadingIndicator: ge,
     BentoLoadingButton: Ee
   },
   directives: { BentoKeyboardNavigationDirective: X },
-  i18n: { messages: ft },
+  i18n: { messages: xt },
   props: {
     /**
      * Defines a string value that labels an interactive element.
@@ -1056,8 +1075,8 @@ const Z = vt.exports, ft = {
      */
     lazyLoadType: {
       type: String,
-      default: M.NONE,
-      validator: (t) => Object.values(M).includes(t)
+      default: P.NONE,
+      validator: (t) => Object.values(P).includes(t)
     },
     /**
      * If enabled, the user will be able to select multiple items.
@@ -1077,7 +1096,7 @@ const Z = vt.exports, ft = {
      *
      * If enabled, hides the "Select all" checkbox in "multiple" mode.
      */
-    searching: Z.props.searching,
+    searching: ee.props.searching,
     /**
      * The `input` value.
      * Providing an empty string or empty array will select no options.
@@ -1105,22 +1124,22 @@ const Z = vt.exports, ft = {
     a.TAB
   ],
   setup(t, { emit: e, slots: s }) {
-    const l = A([]), n = V(t, "items"), { t: o } = Y(), _ = i(() => t.lazyLoadType !== M.AUTOMATIC), d = i(() => t.lazyLoadType === M.AUTOMATIC), r = () => {
+    const l = A([]), n = V(t, "items"), { t: o } = Y(), _ = i(() => t.lazyLoadType !== P.AUTOMATIC), d = i(() => t.lazyLoadType === P.AUTOMATIC), r = () => {
       var I;
-      return typeof (t == null ? void 0 : t.virtualScroll) == "object" && ((I = t == null ? void 0 : t.virtualScroll) != null && I.itemHeight) ? t.virtualScroll.itemHeight : gt;
+      return typeof (t == null ? void 0 : t.virtualScroll) == "object" && ((I = t == null ? void 0 : t.virtualScroll) != null && I.itemHeight) ? t.virtualScroll.itemHeight : Ct;
     }, {
       containerRef: u,
       containerProps: p,
       onScroll: h,
       list: E,
-      wrapperProps: v
-    } = Le(n, {
+      wrapperProps: m
+    } = Te(n, {
       itemHeight: r(),
       // Disable virtual scrolling if not enabled or if lazy loading is enabled or if multi-select
       disabled: (t == null ? void 0 : t.multiple) || (t == null ? void 0 : t.virtualScroll) === !1 || (t == null ? void 0 : t.lazyLoadType) !== "none"
     }), y = i(
       () => _.value ? "true" : void 0
-    ), T = i(
+    ), L = i(
       () => _.value && t.loading ? "true" : "false"
     ), B = i(
       () => _.value ? "polite" : void 0
@@ -1128,21 +1147,21 @@ const Z = vt.exports, ft = {
       e(I, G);
     }, O = () => {
       e(a.SHOW_MORE);
-    }, L = ye(() => {
+    }, T = pe(() => {
       const I = u.value;
       if (!I)
         return;
       const G = Math.round(I.scrollTop) + I.clientHeight >= I.scrollHeight;
       t.hasMoreItems && G && !t.loading && O();
-    }), m = () => {
-      d.value ? L() : h();
+    }), v = () => {
+      d.value ? T() : h();
     }, x = i(() => {
       var I;
       return t.searching && ((I = t.items) == null ? void 0 : I.length) === 0;
     }), R = i(
-      () => t.lazyLoadType === M.BUTTON && t.hasMoreItems
+      () => t.lazyLoadType === P.BUTTON && t.hasMoreItems
     ), F = i(
-      () => t.loading ? Q.LOADING : Q.START
+      () => t.loading ? J.LOADING : J.START
     ), W = i(() => t.loading ? o("loading") : o("showMore")), z = i(() => ({
       ...t.emptyState,
       variant: "condensed"
@@ -1158,7 +1177,7 @@ const Z = vt.exports, ft = {
       listboxItemRef: l,
       // a11y
       ariaAtomic: y,
-      ariaBusy: T,
+      ariaBusy: L,
       ariaLive: B,
       // Values
       containerProps: p,
@@ -1169,19 +1188,19 @@ const Z = vt.exports, ft = {
       shouldDisplayShowMoreButton: R,
       showMoreButtonText: W,
       virtualisedItems: E,
-      wrapperProps: v,
+      wrapperProps: m,
       // Enums
       BentoKeyboardNavigationKeyDownEvent: k,
       BentoListboxEvent: a,
       // Methods
-      onListboxContainerScroll: m,
+      onListboxContainerScroll: v,
       onOptionSelected: S,
       emitShowMore: O,
       listboxListeners: K
     };
   }
 });
-var pt = function() {
+var Et = function() {
   var e = this, s = e._self._c;
   return e._self._setupProxy, s("div", e._b({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], staticClass: "b-listbox", attrs: { id: e.id, role: "listbox", tabindex: "-1", "aria-busy": e.ariaBusy, "aria-atomic": e.ariaAtomic, "aria-label": e.ariaLabel, "aria-live": e.ariaLive }, on: { scroll: e.onListboxContainerScroll } }, "div", e.containerProps, !1), [s("div", e._b({}, "div", e.wrapperProps, !1), [e.isSearchResultEmpty ? s("div", { staticClass: "b-listbox__empty-search-message" }, [e.emptyState ? s("bento-empty-state", e._b({}, "bento-empty-state", e.limitedEmptyStateProps, !1)) : s("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(e.noResultsMessage))])], 1) : [e.multiple ? [s("bento-listbox-multi-select", e._g({ ref: "listboxItemRef", attrs: { "has-more-items": e.hasMoreItems, items: e.items, "lazy-load-type": e.lazyLoadType, "static-categories": e.staticCategories, "selected-values": e.selectedValue, searching: e.searching, "is-option-disabled": e.isOptionDisabled }, scopedSlots: e._u([e._l(e.slots, function(l, n) {
     return { key: n, fn: function(o) {
@@ -1194,17 +1213,17 @@ var pt = function() {
   })], null, !0) }, e.listboxListeners))], e.shouldDisplayShowMoreButton ? s("div", { staticClass: "b-listbox__lazy-load" }, [s("bento-loading-button", { attrs: { state: e.loadingButtonState, variant: "secondary" }, on: { "!click": function(l) {
     return e.emitShowMore.apply(null, arguments);
   } } }, [e._v(" " + e._s(e.showMoreButtonText) + " ")])], 1) : e.loading ? s("div", { staticClass: "b-listbox__lazy-load" }, [s("bento-loading-indicator")], 1) : e._e()]], 2)]);
-}, St = [], xt = /* @__PURE__ */ N(
-  yt,
-  pt,
-  St,
+}, Lt = [], Tt = /* @__PURE__ */ D(
+  ht,
+  Et,
+  Lt,
   !1,
   null,
   "28929030",
   null,
   null
 );
-const wt = xt.exports, H = (t, e) => {
+const zt = Tt.exports, H = (t, e) => {
   for (const s of t) {
     if (s.value === e)
       return s.label;
@@ -1212,7 +1231,7 @@ const wt = xt.exports, H = (t, e) => {
       return H(s.items, e);
   }
   return null;
-}, Ft = (t, e, s) => {
+}, Vt = (t, e, s) => {
   const l = A([]), n = A(), o = (r) => {
     n.value = s.value ? r.map(({ value: u }) => u) : r[0].value;
   }, _ = (r) => {
@@ -1220,7 +1239,7 @@ const wt = xt.exports, H = (t, e) => {
   }, d = () => {
     l.value = [], n.value = null;
   };
-  return te(
+  return se(
     () => e.value,
     () => {
       if (!e.value) {
@@ -1251,10 +1270,10 @@ const wt = xt.exports, H = (t, e) => {
   };
 };
 export {
-  wt as B,
-  Ft as a,
-  M as b,
+  zt as B,
+  Vt as a,
+  P as b,
   a as c,
-  dt as u
+  ft as u
 };
-//# sourceMappingURL=use-cached-selected-values.69297473.js.map
+//# sourceMappingURL=use-cached-selected-values.98a9ed01.js.map