@adyen/bento-vue3 1.24.0 → 1.26.0

package/dist/chunks/use-cached-selected-values.852aeafe.js

@@ -0,0 +1,1537 @@
+import { computed as m, ref as N, onMounted as Oe, onUnmounted as Fe, watch as Ie, defineComponent as H, resolveComponent as h, openBlock as g, createElementBlock as T, createVNode as k, withCtx as L, createTextVNode as U, toDisplayString as V, createElementVNode as W, renderSlot as G, mergeProps as x, withKeys as ge, createBlock as B, toHandlerKey as se, normalizeProps as F, guardReactiveProps as K, createCommentVNode as q, withDirectives as ae, vShow as Ae, toRef as ue, resolveDirective as _e, toHandlers as le, Fragment as Z, renderList as z, createSlots as ie, normalizeClass as fe, unref as re, pushScopeId as Ye, popScopeId as Ke } from "vue";
+import { B as Y, a as Se } from "./keyboard-navigation.ca47dfa8.js";
+import { B as ee } from "./index.a3d60e4f.js";
+import { BentoLoadingIndicator as qe } from "../loading-indicator.js";
+import { BentoEmptyState as We } from "../empty-state.js";
+import { u as de } from "./i18n.f7e6533e.js";
+import { d as He } from "./debounce.b5ef6acf.js";
+import { _ as j } from "./_plugin-vue_export-helper.dad06003.js";
+import { C as je } from "./checkmark.87919b24.js";
+import { B as Ce } from "./checkbox.f55ee3a5.js";
+import { a as Xe, C as Je } from "./chevron-up.05ca20db.js";
+import { B as Qe } from "./base-button.e84acf30.js";
+import { C as Ze } from "./cross-small.9bc6a02f.js";
+import { B as et, a as Ee } from "./loading-button.0391ad8b.js";
+import { o as tt } from "./resize.a041304d.js";
+import "../assets/use-cached-selected-values.css";
+const $e = (e, t, n, u) => {
+  const s = m(
+    () => {
+      var r, a;
+      return !!((r = e.value) != null && r.length) && ((a = e.value) == null ? void 0 : a.length) === t.value.length;
+    }
+  ), c = m(() => {
+    var r;
+    return e.value == null || e.value.length === 0 ? !1 : ((r = e.value) == null ? void 0 : r.length) !== t.value.length;
+  });
+  return {
+    isAllSelected: s,
+    isIndeterminate: c,
+    toggleSelectAll: (r) => {
+      r ? n() : u();
+    }
+  };
+};
+function st(e, { disabled: t, itemHeight: n, overscan: u = 5, prefixHeight: s }) {
+  const c = N(null), l = N([]), r = N(0), a = N(0), o = N(0);
+  let y;
+  const i = m(() => {
+    const I = typeof n == "number" ? e.value.length * n : e.value.reduce((R, S, A) => R + n(A), 0), D = typeof n == "number" ? r.value * n : e.value.slice(0, r.value).reduce((R, S, A) => R + n(A), 0);
+    return {
+      style: {
+        marginTop: `${D}px`,
+        height: `${I - D}px`
+      }
+    };
+  }), b = () => {
+    const I = (s == null ? void 0 : s.value) ?? 0, D = Math.max(c.value.scrollTop - I, 0);
+    if (typeof n == "number")
+      return Math.floor(D / n);
+    let R = 0, S = 0;
+    for (let A = 0; A < e.value.length; A += 1) {
+      const w = n(A);
+      if (R += w, R >= D) {
+        S = A;
+        break;
+      }
+    }
+    return S;
+  }, f = () => {
+    if (o.value = c.value.clientHeight, typeof n == "number")
+      return Math.ceil(o.value / n);
+    const I = r.value ?? 0;
+    let D = 0, R = 0;
+    for (let S = I; S < e.value.length; S += 1) {
+      const A = n(S);
+      if (D += A, R = S, D > o.value)
+        break;
+    }
+    return R - I;
+  }, p = () => {
+    if (c.value) {
+      const I = f();
+      r.value = b(), a.value = Math.min(r.value + I + u, e.value.length), l.value = e.value.slice(r.value, a.value);
+    }
+  }, O = () => {
+    p();
+  };
+  t || (Oe(() => {
+    c.value && (o.value = c.value.clientHeight, y = tt(c.value, ({ clientHeight: I }) => {
+      o.value = I, p();
+    }), p());
+  }), Fe(() => {
+    y == null || y.disconnect();
+  }), Ie(
+    () => e.value,
+    () => {
+      p();
+    }
+  ));
+  const P = {
+    ref: c,
+    style: { overflowY: "auto" }
+  };
+  return t ? {
+    containerRef: c,
+    containerProps: P,
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onScroll: () => {
+    },
+    list: e
+  } : {
+    containerRef: c,
+    containerProps: P,
+    onScroll: O,
+    list: l,
+    wrapperProps: i
+  };
+}
+var d = /* @__PURE__ */ ((e) => (e.SELECT = "select", e.SHOW_MORE = "show-more", e.ESCAPE = "escape-pressed", e.CLICK = "click", e.ENTER = "enter-pressed", e.SPACE = "space-pressed", e.TAB = "tab-pressed", e.CLOSE_DROPDOWN = "close-dropdown", e))(d || {}), Q = /* @__PURE__ */ ((e) => (e.AUTOMATIC = "automatic", e.BUTTON = "button", e.NONE = "none", e))(Q || {});
+const lt = H({
+  name: "bento-listbox-static-category",
+  components: {
+    BentoTypography: ee
+  },
+  props: {
+    /**
+     * Category label text
+     */
+    categoryLabel: {
+      type: String,
+      required: !0
+    }
+  }
+});
+const ot = { class: "b-listbox-single-select-category" };
+function nt(e, t, n, u, s, c) {
+  const l = h("bento-typography");
+  return g(), T("div", ot, [
+    k(l, {
+      variant: "caption",
+      el: "span",
+      class: "b-listbox-single-select-category__label-text"
+    }, {
+      default: L(() => [
+        U(V(e.categoryLabel), 1)
+      ]),
+      _: 1
+    }),
+    W("div", null, [
+      G(e.$slots, "default", {}, void 0, !0)
+    ])
+  ]);
+}
+const it = /* @__PURE__ */ j(lt, [["render", nt], ["__scopeId", "data-v-a90eff17"]]), at = H({
+  name: "bento-listbox-option",
+  props: {
+    /**
+     * Setting this property to true will disable the option.
+     */
+    disabled: { type: Boolean, default: !1 },
+    /**
+     * Indicates if the value is selected. Only one element can be selected at a time.
+     */
+    selected: { type: Boolean, default: !1 }
+  },
+  emits: [d.CLICK, d.ENTER, d.SPACE, d.TAB],
+  setup(e, { emit: t }) {
+    const n = m(() => ({
+      "b-listbox-option--disabled": e.disabled,
+      "b-listbox-option--selected": e.selected
+    }));
+    return {
+      // Enums
+      BentoKeyboardNavigationKeyDownEvent: Y,
+      BentoListboxEvent: d,
+      // Values
+      conditionalClasses: n,
+      // Events
+      onClick: (c) => {
+        t(d.CLICK, c);
+      },
+      onOptionSelected: (c, l) => {
+        t(c, l);
+      }
+    };
+  }
+});
+function ct(e, t, n, u, s, c) {
+  return g(), T("label", x({
+    class: ["b-listbox-option", e.conditionalClasses],
+    role: "option"
+  }, e.$attrs, {
+    onClick: t[0] || (t[0] = (...l) => e.onClick && e.onClick(...l)),
+    onKeydown: [
+      t[1] || (t[1] = ge((l) => e.onOptionSelected(e.BentoListboxEvent.ENTER, l), ["enter"])),
+      t[2] || (t[2] = ge((l) => e.onOptionSelected(e.BentoListboxEvent.SPACE, l), ["space"])),
+      t[3] || (t[3] = ge((l) => e.onOptionSelected(e.BentoListboxEvent.TAB, l), ["tab"]))
+    ]
+  }), [
+    G(e.$slots, "default", {}, void 0, !0)
+  ], 16);
+}
+const be = /* @__PURE__ */ j(at, [["render", ct], ["__scopeId", "data-v-18a61f5d"]]), rt = H({
+  name: "bento-listbox-single-select-option",
+  components: {
+    BentoListboxOption: be,
+    BentoTypography: ee,
+    CheckmarkIcon: je
+  },
+  props: {
+    /**
+     * Setting this property to true will disable the option.
+     */
+    disabled: { type: Boolean, default: !1 },
+    /**
+     * The option item that contains all the option item's data.
+     * @type {BentoListboxOptionItem}
+     */
+    option: {
+      type: Object,
+      required: !0
+    },
+    /**
+     * Indicates if the value is selected. Only one element can be selected at a time.
+     */
+    selected: { type: Boolean, default: !1 }
+  },
+  emits: [d.ENTER, d.SELECT, d.SPACE, d.TAB],
+  setup(e, { emit: t }) {
+    const n = (l) => {
+      e.disabled || t(l, e.option);
+    }, u = m(() => e.disabled ? !0 : null), s = m(() => e.selected ? !0 : null), c = m(() => e.disabled ? -1 : 0);
+    return {
+      // Values
+      ariaDisabled: u,
+      ariaSelected: s,
+      tabIndex: c,
+      // Enums
+      BentoListboxEvent: d,
+      // Events
+      onOptionSelected: n
+    };
+  }
+});
+const ut = { class: "b-listbox-single-select-option__text" }, dt = { class: "b-listbox-single-select-option__check-icon" };
+function bt(e, t, n, u, s, c) {
+  const l = h("bento-typography"), r = h("checkmark-icon"), a = h("bento-listbox-option");
+  return g(), B(a, x({
+    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))
+  }, {
+    [se(e.BentoListboxEvent.ENTER)]: t[1] || (t[1] = (o) => e.onOptionSelected(e.BentoListboxEvent.ENTER))
+  }, {
+    [se(e.BentoListboxEvent.SPACE)]: t[2] || (t[2] = (o) => e.onOptionSelected(e.BentoListboxEvent.SPACE))
+  }, {
+    [se(e.BentoListboxEvent.TAB)]: t[3] || (t[3] = (o) => e.onOptionSelected(e.BentoListboxEvent.TAB))
+  }), {
+    default: L(() => [
+      G(e.$slots, "default", F(K(e.option)), () => [
+        W("span", ut, [
+          k(l, { el: "span" }, {
+            default: L(() => [
+              U(V(e.option.label), 1)
+            ]),
+            _: 1
+          }),
+          e.option.description ? (g(), B(l, {
+            key: 0,
+            class: "b-listbox-single-select-option__description",
+            el: "span"
+          }, {
+            default: L(() => [
+              U(V(e.option.description), 1)
+            ]),
+            _: 1
+          })) : q("", !0)
+        ])
+      ], !0),
+      W("span", dt, [
+        ae(k(r, { "svg-title": "selected" }, null, 512), [
+          [Ae, e.selected]
+        ])
+      ])
+    ]),
+    _: 3
+  }, 16, ["disabled", "selected", "aria-selected", "aria-disabled", "tabindex"]);
+}
+const mt = /* @__PURE__ */ j(rt, [["render", bt], ["__scopeId", "data-v-e8cc847b"]]), ke = ({ items: e, isOptionDisabled: t }, n) => {
+  const u = m(() => e.value.length - 1), s = N(0);
+  Oe(() => {
+    t && (s.value = e.value.findIndex((f) => !t(f)));
+  });
+  const c = (f) => !t || !!t && t(e.value[f]), l = (f) => !t || !!t && !t(e.value[f]), r = (f) => {
+    switch (f) {
+      case "increase":
+        s.value += 1;
+        break;
+      case "decrease":
+        s.value -= 1;
+        break;
+    }
+  }, a = ({ edgeCaseItem: f, isItemBeforeEdgeCaseItem: p }, O, P) => {
+    s.value !== f && (p ? l(f) && r(P) : (r(P), c(s.value) && O()), n(s.value));
+  }, o = (f) => {
+    var O;
+    (O = f == null ? void 0 : f.detail) == null || O.preventDefault();
+    const p = s.value === u.value - 2;
+    a(
+      {
+        isItemBeforeEdgeCaseItem: p,
+        edgeCaseItem: u.value
+      },
+      o,
+      "increase"
+      /* INCREASE */
+    );
+  }, y = (f) => {
+    var O;
+    (O = f == null ? void 0 : f.detail) == null || O.preventDefault();
+    const p = s.value === 1;
+    a(
+      {
+        edgeCaseItem: 0,
+        isItemBeforeEdgeCaseItem: p
+      },
+      y,
+      "decrease"
+      /* DECREASE */
+    );
+  };
+  return {
+    moveToFirstElement: () => {
+      s.value = 0, c(s.value) ? o() : n(s.value);
+    },
+    moveToLastElement: () => {
+      s.value = u.value, c(s.value) ? y() : n(s.value);
+    },
+    moveToNextElement: o,
+    moveToPreviousElement: y
+  };
+}, vt = H({
+  name: "bento-listbox-single-select",
+  components: {
+    BentoListboxSingleSelectCategory: it,
+    BentoListboxSingleSelectOption: mt
+  },
+  directives: { BentoKeyboardNavigationDirective: Se },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * Function that allows the options to be disabled
+     *
+     * @type {BentoListboxIsOptionDisabled}
+     * @param {BentoListboxOptionItem} option - listbox option object
+     * @param {string} option.label - Option's label text
+     * @param {string|number} option.value - Option's value
+     * @param {unknown} option.data - Option's extra data to be passed to the default slot
+     */
+    isOptionDisabled: {
+      type: Function,
+      default: () => !1
+    },
+    /**
+     * The option elements to populate the listbox with.
+     * It must be an array of {@see BentoListboxOptionItem }.
+     *
+     * @property {string} value.label - Text to be displayed in the option
+     * @property {string,number} value.value - Value of the option
+     */
+    items: {
+      type: Array,
+      required: !0
+    },
+    /**
+     * The `input` value.
+     * Providing an empty string will select no options.
+     * Set to an empty string `''` if you don't want any of the available options to be selected
+     */
+    selectedValue: {
+      type: Array,
+      default: void 0
+    },
+    /**
+     * If enabled, dropdown will display non-selectable, static categories
+     */
+    staticCategories: { type: Boolean, default: !1 }
+  },
+  emits: [d.SELECT, d.ENTER, d.SPACE, d.TAB],
+  setup(e, { emit: t, slots: n }) {
+    const u = N([]), s = m(() => {
+      var p;
+      return !!((p = e.selectedValue) != null && p.length) && e.selectedValue.at(0);
+    }), c = m(() => !!e.items.some(({ items: p }) => !!p)), l = (p) => (O) => {
+      t(p, [O]);
+    }, r = (p) => u.value[p].$el.focus(), { moveToNextElement: a, moveToPreviousElement: o, moveToFirstElement: y, moveToLastElement: i } = ke(
+      {
+        items: ue(e, "items"),
+        isOptionDisabled: e.isOptionDisabled
+      },
+      r
+    ), b = {
+      [Y.ARROW_UP]: o,
+      [Y.ARROW_DOWN]: a,
+      [Y.HOME]: y,
+      [Y.END]: i
+    }, f = {
+      [d.SELECT]: l(d.SELECT),
+      [d.SPACE]: l(d.SPACE),
+      [d.TAB]: l(d.TAB),
+      [d.ENTER]: l(d.ENTER)
+    };
+    return {
+      // Enums
+      BentoListboxEvent: d,
+      // Values
+      listboxItemRef: u,
+      selectedItem: s,
+      slots: n,
+      // Computed
+      hasCategories: c,
+      // Methods
+      onOptionSelected: l,
+      // Keyboard navigation
+      listboxListeners: b,
+      listboxOptionListeners: f
+    };
+  }
+});
+function gt(e, t, n, u, s, c) {
+  const l = h("bento-listbox-single-select-option"), r = h("bento-listbox-single-select-category"), a = _e("bento-keyboard-navigation-directive");
+  return ae((g(), T("div", le(e.listboxListeners, !0), [
+    e.hasCategories && e.staticCategories ? (g(!0), T(Z, { key: 0 }, z(e.items, (o) => (g(), B(r, {
+      key: o.value,
+      "category-label": o.label,
+      role: "group"
+    }, {
+      default: L(() => [
+        (g(!0), T(Z, null, z(o.items, (y) => (g(), B(l, x({
+          key: y.value,
+          ref_for: !0,
+          ref: "listboxItemRef",
+          role: "option",
+          option: y,
+          disabled: e.isOptionDisabled ? e.isOptionDisabled(y) : null,
+          selected: y.value === e.selectedItem.value
+        }, le(e.listboxOptionListeners)), ie({ _: 2 }, [
+          z(e.slots, (i, b) => ({
+            name: b,
+            fn: L((f) => [
+              G(e.$slots, b, F(K(f)))
+            ])
+          }))
+        ]), 1040, ["option", "disabled", "selected"]))), 128))
+      ]),
+      _: 2
+    }, 1032, ["category-label"]))), 128)) : (g(!0), T(Z, { key: 1 }, z(e.items, (o) => (g(), B(l, x({
+      key: o.value,
+      ref_for: !0,
+      ref: "listboxItemRef",
+      role: "option",
+      option: o,
+      disabled: e.isOptionDisabled ? e.isOptionDisabled(o) : null,
+      selected: o.value === e.selectedItem.value
+    }, le(e.listboxOptionListeners)), ie({ _: 2 }, [
+      z(e.slots, (y, i) => ({
+        name: i,
+        fn: L((b) => [
+          G(e.$slots, i, F(K(b)))
+        ])
+      }))
+    ]), 1040, ["option", "disabled", "selected"]))), 128))
+  ], 16)), [
+    [a]
+  ]);
+}
+const ft = /* @__PURE__ */ j(vt, [["render", gt]]);
+var ye = /* @__PURE__ */ ((e) => (e.DISABLED = "disabled", e.STATIC_CATEGORY = "static-category", e))(ye || {}), ne = /* @__PURE__ */ ((e) => (e.SELECT_CATEGORY = "select-category", e.UNSELECT_CATEGORY = "unselect-category", e))(ne || {});
+const yt = {
+  "en-US": {
+    categoryClosed: "{category} closed",
+    categoryOpened: "{category} opened"
+  }
+}, pt = H({
+  i18n: { messages: yt },
+  name: "bento-listbox-multi-select-category",
+  components: {
+    BentoCheckbox: Ce,
+    BentoTypography: ee,
+    BentoListboxOption: be,
+    ChevronDownIcon: Xe,
+    ChevronUpIcon: Je
+  },
+  props: {
+    /**
+     * The option elements to populate the listbox with.
+     * It must be an array of {@see BentoListboxOptionItem }.
+     *
+     * @property {string} value.label - Text to be displayed in the option
+     * @property {string,number} value.value - Value of the option
+     * @property {BentoListboxOptionItem} value.items - Category items list
+     */
+    category: {
+      type: Object,
+      required: !0
+    },
+    /**
+     * Function that allows the options to be disabled
+     *
+     * @type {BentoListboxIsOptionDisabled}
+     * @param {BentoListboxOptionItem} option - listbox option object
+     * @param {string} option.label - Option's label text
+     * @param {string|number} option.value - Option's value
+     * @param {unknown} option.data - Option's extra data to be passed to the default slot
+     */
+    isOptionDisabled: {
+      type: [Function],
+      default: () => !1
+    },
+    /**
+     * The `input` value.
+     * Providing an empty array will select no options.
+     */
+    selectedItemsList: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * If enabled, dropdown will display non-selectable, static categories
+     */
+    staticCategories: { type: Boolean, default: !1 }
+  },
+  emits: [ne.SELECT_CATEGORY, ne.UNSELECT_CATEGORY],
+  setup(e, { emit: t }) {
+    const n = N(!1), { t: u } = de(), s = (S) => e.isOptionDisabled ? e.isOptionDisabled(S) : !1, c = m(
+      () => e.category.items.every((S) => s(S))
+    ), l = ue(e, "staticCategories"), r = m(() => n.value || e.staticCategories), a = m(() => ({
+      [`b-listbox-multi-select-category--${ye.DISABLED}`]: c.value,
+      [`b-listbox-multi-select-category--${ye.STATIC_CATEGORY}`]: e.staticCategories
+    })), o = (S) => {
+      S.preventDefault(), n.value = !n.value;
+    }, y = (S) => {
+      var te;
+      const A = s(S), w = ((te = e.selectedItemsList) == null ? void 0 : te.includes(S.value)) || !1;
+      return { isDisabled: A, isPreSelected: w };
+    }, i = m(
+      () => e.category.items.filter((S) => {
+        const { isDisabled: A, isPreSelected: w } = y(S);
+        return A && w || !A;
+      })
+    ), b = m(
+      () => {
+        var S;
+        return (S = i.value) == null ? void 0 : S.filter(
+          ({ value: A }) => {
+            var w;
+            return (w = e.selectedItemsList) == null ? void 0 : w.includes(A);
+          }
+        );
+      }
+    ), f = m(() => {
+      const S = n.value ? "categoryOpened" : "categoryClosed";
+      return u(S, { category: e.category.label });
+    }), p = m(
+      () => ({
+        el: "span",
+        variant: e.staticCategories ? "caption" : "body"
+      })
+    ), O = () => {
+      t(ne.SELECT_CATEGORY);
+    }, P = () => {
+      t(ne.UNSELECT_CATEGORY);
+    }, { isAllSelected: I, isIndeterminate: D, toggleSelectAll: R } = $e(
+      b,
+      i,
+      O,
+      P
+    );
+    return {
+      // Values
+      chevronTitle: f,
+      conditionalClass: a,
+      hasAllPropsDisabled: c,
+      isOpen: n,
+      isAllSelected: I,
+      isIndeterminate: D,
+      isStaticCategory: l,
+      // Computed
+      showItemChildren: r,
+      categoryLabelProps: p,
+      // Methods
+      toggleOpen: o,
+      toggleSelectAll: R
+    };
+  }
+});
+const _t = { class: "b-listbox-multi-select-category__label" };
+function St(e, t, n, u, s, c) {
+  const l = h("bento-checkbox"), r = h("bento-typography"), a = h("chevron-up-icon"), o = h("chevron-down-icon"), y = h("bento-listbox-option");
+  return g(), T("div", null, [
+    k(y, {
+      class: fe(["b-listbox-multi-select-category__option", e.conditionalClass])
+    }, {
+      default: L(() => [
+        e.isStaticCategory ? q("", !0) : (g(), B(l, {
+          key: 0,
+          "model-value": e.isAllSelected,
+          indeterminate: e.isIndeterminate,
+          disabled: e.hasAllPropsDisabled,
+          "aria-label": e.category.label,
+          value: e.category.value,
+          "onUpdate:modelValue": e.toggleSelectAll
+        }, null, 8, ["model-value", "indeterminate", "disabled", "aria-label", "value", "onUpdate:modelValue"])),
+        W("span", _t, [
+          k(r, x(e.categoryLabelProps, { class: "b-listbox-multi-select-category__label-text" }), {
+            default: L(() => [
+              U(V(e.category.label), 1)
+            ]),
+            _: 1
+          }, 16),
+          e.isStaticCategory ? q("", !0) : (g(), T("div", {
+            key: 0,
+            class: "b-listbox-multi-select-category__label-chevron",
+            "data-testid": "toggle-listbox",
+            onClickCapture: t[0] || (t[0] = (...i) => e.toggleOpen && e.toggleOpen(...i))
+          }, [
+            e.isOpen ? (g(), B(a, {
+              key: 0,
+              "svg-title": e.chevronTitle
+            }, null, 8, ["svg-title"])) : (g(), B(o, {
+              key: 1,
+              "svg-title": e.chevronTitle
+            }, null, 8, ["svg-title"]))
+          ], 32))
+        ])
+      ]),
+      _: 1
+    }, 8, ["class"]),
+    ae(W("div", null, [
+      G(e.$slots, "default", {}, void 0, !0)
+    ], 512), [
+      [Ae, e.showItemChildren]
+    ])
+  ]);
+}
+const Ct = /* @__PURE__ */ j(pt, [["render", St], ["__scopeId", "data-v-9a00de22"]]);
+var J = /* @__PURE__ */ ((e) => (e.SELECT_CATEGORY = "select-category", e.TOGGLE_CHECKBOX_SELECTION = "toggle-checkbox-selection", e.UNSELECT_CATEGORY = "unselect-category", e))(J || {});
+const Et = H({
+  name: "listbox-multi-select-options",
+  components: {
+    BentoCheckbox: Ce,
+    BentoListboxOption: be,
+    BentoTypography: ee,
+    ListboxMultiSelectCategory: Ct
+  },
+  props: {
+    /**
+     * Indicates if the items listed are inside a category
+     * so they can be padded to right by one level in recursion.
+     * Items of categories are automatically defined as "categoryItems"
+     */
+    categoryItems: { type: Boolean, default: !1 },
+    /**
+     * Function that allows the options to be disabled
+     *
+     * @type {BentoListboxIsOptionDisabled}
+     * @param {BentoListboxOptionItem} option - listbox option object
+     * @param {string} option.label - Option's label text
+     * @param {string|number} option.value - Option's value
+     * @param {unknown} option.data - Option's extra data to be passed to the default slot
+     */
+    isOptionDisabled: {
+      type: Function,
+      default: () => !1
+    },
+    /**
+     * The option elements to populate the listbox with.
+     * It must be an array of {@see BentoListboxOptionItem }.
+     *
+     * @property {string} value.label - Text to be displayed in the option
+     * @property {string,number} value.value - Value of the option
+     */
+    items: {
+      type: Array,
+      required: !0
+    },
+    /**
+     * Indicates if the elements options are inside a multi-level category
+     */
+    isMultiLevel: { type: Boolean, default: !1 },
+    /**
+     * Flag that indicates that an external search it's being made
+     * to filter out the items inside the the multi-select listbox
+     *
+     * If enabled, hides the "Select all" checkbox in "multiple" mode.
+     */
+    searching: { type: Boolean, default: !1 },
+    /**
+     * List of selected items.
+     * Providing an empty array will select no options.
+     */
+    selectedItemsList: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * If enabled, dropdown will display non-selectable, static categories
+     */
+    staticCategories: { type: Boolean, default: !1 }
+  },
+  emits: [
+    J.TOGGLE_CHECKBOX_SELECTION,
+    J.SELECT_CATEGORY,
+    J.UNSELECT_CATEGORY
+  ],
+  setup(e, { emit: t }) {
+    const n = (a) => {
+      t(J.TOGGLE_CHECKBOX_SELECTION, a);
+    }, u = (a) => !!a.items, s = (a) => {
+      const o = e.isMultiLevel && e.searching;
+      return a.description && (!e.isMultiLevel || o);
+    }, c = (a) => a.items ? !!a.items.find((o) => e.selectedItemsList.includes(o.value)) : e.selectedItemsList.includes(a.value), l = (a, o) => {
+      if (u(o))
+        return t(a ? J.SELECT_CATEGORY : J.UNSELECT_CATEGORY, o);
+      n(o.value);
+    };
+    return {
+      // Values
+      conditionalClasses: m(() => ({
+        "b-listbox-multi-select-options__static-category-option": e.staticCategories,
+        "b-listbox-multi-select-options__category-option": e.categoryItems
+      })),
+      // Methods
+      isOptionSelected: c,
+      shouldShowDescription: s,
+      toggleCheckboxSelection: n,
+      selectSearch: l,
+      // Enums
+      BentoListboxEvent: d,
+      ListboxMultiSelectOptionsEvent: J
+    };
+  }
+});
+const ht = { class: "b-listbox-multi-select__option-text" }, Lt = { class: "b-listbox-multi-select__option-text" };
+function Tt(e, t, n, u, s, c) {
+  const l = h("bento-checkbox"), r = h("bento-typography"), a = h("bento-listbox-option"), o = h("listbox-multi-select-options", !0), y = h("listbox-multi-select-category");
+  return g(), T("div", null, [
+    (g(!0), T(Z, null, z(e.items, (i) => (g(), T("div", {
+      key: `selected-${i.value}`
+    }, [
+      e.searching && e.isMultiLevel ? (g(), B(a, {
+        key: 0,
+        class: fe(["b-listbox-multi-select-options", e.conditionalClasses]),
+        disabled: e.isOptionDisabled ? e.isOptionDisabled(i) : null
+      }, {
+        default: L(() => [
+          k(l, {
+            "model-value": e.isOptionSelected(i),
+            "aria-label": i.label,
+            disabled: e.isOptionDisabled ? e.isOptionDisabled(i) : null,
+            value: i.value,
+            "onUpdate:modelValue": (b) => e.selectSearch(b, i)
+          }, null, 8, ["model-value", "aria-label", "disabled", "value", "onUpdate:modelValue"]),
+          G(e.$slots, "default", F(K(i)), () => [
+            W("span", ht, [
+              k(r, { el: "span" }, {
+                default: L(() => [
+                  U(V(i.label), 1)
+                ]),
+                _: 2
+              }, 1024),
+              e.shouldShowDescription(i) ? (g(), B(r, {
+                key: 0,
+                class: "b-listbox-multi-select__option-description",
+                el: "span"
+              }, {
+                default: L(() => [
+                  U(V(i.description), 1)
+                ]),
+                _: 2
+              }, 1024)) : q("", !0)
+            ])
+          ], !0)
+        ]),
+        _: 2
+      }, 1032, ["class", "disabled"])) : (g(), T(Z, { key: 1 }, [
+        i.items ? (g(), B(y, {
+          key: 0,
+          category: i,
+          "static-categories": e.staticCategories,
+          "is-option-disabled": e.isOptionDisabled,
+          "selected-items-list": e.selectedItemsList,
+          onSelectCategory: (b) => e.$emit(e.ListboxMultiSelectOptionsEvent.SELECT_CATEGORY, i),
+          onUnselectCategory: (b) => e.$emit(e.ListboxMultiSelectOptionsEvent.UNSELECT_CATEGORY, i)
+        }, {
+          default: L(() => [
+            k(o, {
+              "category-items": "",
+              items: i.items,
+              "is-option-disabled": e.isOptionDisabled,
+              "is-multi-level": e.isMultiLevel,
+              "static-categories": e.staticCategories,
+              "selected-items-list": e.selectedItemsList,
+              searching: e.searching,
+              onToggleCheckboxSelection: t[0] || (t[0] = (b) => e.toggleCheckboxSelection(b))
+            }, null, 8, ["items", "is-option-disabled", "is-multi-level", "static-categories", "selected-items-list", "searching"])
+          ]),
+          _: 2
+        }, 1032, ["category", "static-categories", "is-option-disabled", "selected-items-list", "onSelectCategory", "onUnselectCategory"])) : (g(), B(a, {
+          key: 1,
+          class: fe(["b-listbox-multi-select-options", e.conditionalClasses]),
+          disabled: e.isOptionDisabled ? e.isOptionDisabled(i) : null
+        }, {
+          default: L(() => [
+            k(l, {
+              "model-value": e.selectedItemsList,
+              "aria-label": i.label,
+              disabled: e.isOptionDisabled ? e.isOptionDisabled(i) : null,
+              value: i.value,
+              "onUpdate:modelValue": (b) => e.toggleCheckboxSelection(i)
+            }, null, 8, ["model-value", "aria-label", "disabled", "value", "onUpdate:modelValue"]),
+            G(e.$slots, "default", F(K(i)), () => [
+              W("span", Lt, [
+                k(r, { el: "span" }, {
+                  default: L(() => [
+                    U(V(i.label), 1)
+                  ]),
+                  _: 2
+                }, 1024),
+                e.shouldShowDescription(i) ? (g(), B(r, {
+                  key: 0,
+                  class: "b-listbox-multi-select__option-description",
+                  el: "span"
+                }, {
+                  default: L(() => [
+                    U(V(i.description), 1)
+                  ]),
+                  _: 2
+                }, 1024)) : q("", !0)
+              ])
+            ], !0)
+          ]),
+          _: 2
+        }, 1032, ["class", "disabled"]))
+      ], 64))
+    ]))), 128))
+  ]);
+}
+const Ot = /* @__PURE__ */ j(Et, [["render", Tt], ["__scopeId", "data-v-25938a72"]]), Be = {
+  "en-US": {
+    remove: "Remove"
+  }
+}, It = { class: "b-listbox-multi-select-chips" }, At = {
+  i18n: { messages: Be }
+}, $t = /* @__PURE__ */ H({
+  ...At,
+  __name: "listbox-multi-select-chips",
+  props: {
+    /**
+     * Function that defines the options to be disabled
+     */
+    isOptionDisabled: {
+      type: Function,
+      default: () => !1
+    },
+    /**
+     * The option elements to populate the listbox with.
+     * It must be an array of {@see BentoListboxOptionItem }.
+     *
+     * @property {string} value.label - Text to be displayed in the option
+     * @property {string,number} value.value - Value of the option
+     */
+    items: {
+      type: Array,
+      required: !0
+    }
+  },
+  emits: ["unselect-item", "unselect-category"],
+  setup(e, { emit: t }) {
+    const { t: n } = de({ messages: Be }), u = (s) => s.items ? t("unselect-category", s) : t("unselect-item", s);
+    return (s, c) => (g(), T("div", It, [
+      (g(!0), T(Z, null, z(e.items, (l) => (g(), T("div", {
+        key: `selected-${l.value}`
+      }, [
+        k(re(Qe), {
+          class: "b-listbox-multi-select-chips__chip",
+          disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null,
+          onClick: (r) => u(l)
+        }, {
+          iconRight: L(() => [
+            k(re(Ze), {
+              "svg-title": re(n)("remove")
+            }, null, 8, ["svg-title"])
+          ]),
+          default: L(() => [
+            k(re(ee), {
+              el: "span",
+              variant: "caption",
+              class: "b-listbox-multi-select-chips__option-text"
+            }, {
+              default: L(() => [
+                U(V(l.label), 1)
+              ]),
+              _: 2
+            }, 1024)
+          ]),
+          _: 2
+        }, 1032, ["disabled", "onClick"])
+      ]))), 128))
+    ]));
+  }
+});
+const kt = /* @__PURE__ */ j($t, [["__scopeId", "data-v-7c5f8bdb"]]), he = {
+  "en-US": {
+    allSelected: "All selected ({total})",
+    numberOfTotalSelected: "{number} of {total} selected",
+    numbersSelected: "{number} selected",
+    selectAll: "Select all ({total})"
+  }
+}, Bt = (e) => {
+  const t = m(() => {
+    var u;
+    return !!((u = e.value) != null && u.find(({ items: s }) => !!s));
+  }), n = m(() => {
+    var u;
+    return t.value ? (u = e.value) == null ? void 0 : u.reduce((s, c) => (c.items ? s.push(...c.items.flat()) : s.push(c), s), []) : e.value;
+  });
+  return {
+    isMultiLevelSelect: t,
+    flattenedItemsList: n
+  };
+}, Rt = H({
+  i18n: { messages: he },
+  name: "bento-listbox-multi-select",
+  components: {
+    BentoCheckbox: Ce,
+    BentoListboxOption: be,
+    BentoTypography: ee,
+    ListboxMultiSelectOptions: Ot,
+    ListboxMultiSelectChips: kt
+  },
+  directives: { BentoKeyboardNavigationDirective: Se },
+  props: {
+    /**
+     * Indicates whether there are more items to load
+     */
+    hasMoreItems: { type: Boolean, default: !1 },
+    /**
+     * Function that allows the options to be disabled
+     *
+     * @type {BentoListboxIsOptionDisabled}
+     * @param {BentoListboxOptionItem} option - listbox option object
+     * @param {string} option.label - Option's label text
+     * @param {string|number} option.value - Option's value
+     * @param {unknown} option.data - Option's extra data to be passed to the default slot
+     */
+    isOptionDisabled: {
+      type: Function,
+      default: () => !1
+    },
+    /**
+     * The option elements to populate the listbox with.
+     * It must be an array of {@see BentoListboxOptionItem }.
+     *
+     * @property {string} value.label - Text to be displayed in the option
+     * @property {string,number} value.value - Value of the option
+     */
+    items: {
+      type: Array,
+      required: !0
+    },
+    /**
+     * The type of `Lazy Load`.
+     * Type "automatic" will enable infinite scrolling
+     * Type "button" will enable lazy loading with "Show more" button
+     */
+    lazyLoadType: {
+      type: String,
+      default: Q.NONE,
+      validator: (e) => Object.values(Q).includes(e)
+    },
+    /**
+     * Flag that indicates that an external search it's being made
+     * to filter out the items inside the the multi-select listbox
+     *
+     * If enabled, hides the "Select all" checkbox in "multiple" mode.
+     */
+    searching: { type: Boolean, default: !1 },
+    /**
+     * The `input` value.
+     * Providing an empty array will select no options.
+     */
+    selectedValues: {
+      type: Array,
+      required: !0
+    },
+    /**
+     * If enabled, dropdown will display non-selectable, static categories
+     */
+    staticCategories: { type: Boolean, default: !1 }
+  },
+  emits: [d.SELECT],
+  setup(e, { emit: t, slots: n }) {
+    const { t: u } = de({ messages: he }), s = N(null), c = N(null), l = N(null), r = m(
+      () => e.selectedValues.map(({ value: v }) => v)
+    ), { isMultiLevelSelect: a, flattenedItemsList: o } = Bt(ue(e, "items")), y = (v) => {
+      var $;
+      const _ = e.isOptionDisabled(v), C = (($ = r.value) == null ? void 0 : $.includes(v.value)) || !1;
+      return { isDisabled: _, isPreSelected: C };
+    }, i = m(() => {
+      if (e.searching && a)
+        return e.items;
+      const v = o.value.filter((_) => {
+        const { isDisabled: C, isPreSelected: $ } = y(_);
+        return C && $ || !C;
+      });
+      return e.selectedValues.forEach((_) => {
+        v.find((C) => C.value === _.value) || v.push(_);
+      }), v;
+    }), b = m(
+      () => {
+        var v;
+        return (v = i.value) == null ? void 0 : v.filter((_) => {
+          var C;
+          return _.items && a.value && e.searching ? _.items.filter(
+            (E) => (e.selectedValues ?? []).includes(E.value)
+          ).length === _.items.length : (C = r.value) == null ? void 0 : C.includes(_.value);
+        });
+      }
+    ), f = () => a.value && !e.searching ? o.value.length : e.items.length, p = m(() => {
+      var $;
+      const v = i.value.length, _ = f(), C = (($ = b.value) == null ? void 0 : $.length) || 0;
+      return C === 0 ? u("selectAll", { total: v }) : C === _ ? u("allSelected", { total: _ }) : C <= _ ? u("numberOfTotalSelected", { number: C, total: _ }) : u("numbersSelected", { number: C });
+    }), O = (v) => {
+      const _ = ($) => {
+        const { isDisabled: E, isPreSelected: X } = y($);
+        return E && X || !E;
+      }, C = v.filter(_).filter(($) => !r.value.includes($.value));
+      t(d.SELECT, [...e.selectedValues, ...C]);
+    }, P = (v) => {
+      const _ = (E) => {
+        const { isDisabled: X, isPreSelected: ze } = y(E);
+        return !(X && ze);
+      }, C = v.filter(_).map(({ value: E }) => E), $ = e.selectedValues.filter((E) => !(C != null && C.includes(E.value)));
+      t(d.SELECT, $);
+    }, I = () => {
+      O(o.value);
+    }, D = () => {
+      P(o.value);
+    }, { isAllSelected: R, isIndeterminate: S, toggleSelectAll: A } = $e(
+      b,
+      i,
+      I,
+      D
+    ), w = (v) => {
+      O(v.items);
+    }, te = (v) => {
+      P(v.items);
+    }, me = (v, _) => {
+      let C = !1;
+      const $ = e.selectedValues.filter(({ value: E }) => _.value === E ? (C = !0, !1) : !0);
+      C || $.push(_), t(v, $);
+    }, ce = m(() => {
+      if (!a.value)
+        return e.selectedValues;
+      const v = (E) => r.value.includes(E.value), _ = (E) => !e.staticCategories && E.every((X) => v(X));
+      return e.items.flatMap(
+        (E) => E.items && !_(E.items) ? E.items : E
+      ).filter((E) => E.items ? !0 : v(E));
+    }), ve = m(() => {
+      var C, $, E, X;
+      const v = ["automatic", "button"].includes(e.lazyLoadType), _ = ((C = e.selectedValues) == null ? void 0 : C.length) > 0 && (($ = b.value) == null ? void 0 : $.length) !== ((E = o.value) == null ? void 0 : E.length);
+      return v && e.hasMoreItems ? !!((X = e.selectedValues) != null && X.length) : _;
+    }), M = m(() => ["automatic", "button"].includes(e.lazyLoadType) ? !e.hasMoreItems : !0), oe = m(
+      () => s.value ? [s.value] : []
+    ), Re = m(
+      () => {
+        var v, _;
+        return (_ = (v = c.value) == null ? void 0 : v.$children) != null && _.length ? c.value.$children : [];
+      }
+    ), De = m(
+      () => {
+        var v, _;
+        return (_ = (v = l.value) == null ? void 0 : v.$children) != null && _.length ? l.value.$children : [];
+      }
+    ), Ne = m(() => ({ label: p, value: R })), Me = m(() => [
+      Ne,
+      ...ce.value,
+      ...o.value
+    ]), Pe = (v) => {
+      [
+        ...oe.value,
+        ...Re.value,
+        ...De.value
+      ][v].$el.focus();
+    }, { moveToNextElement: we, moveToPreviousElement: Ue, moveToFirstElement: Ve, moveToLastElement: xe } = ke(
+      {
+        items: N(Me),
+        isOptionDisabled: e.isOptionDisabled
+      },
+      Pe
+    ), Ge = {
+      [Y.ARROW_UP]: (v) => Ue(v),
+      [Y.ARROW_DOWN]: (v) => we(v),
+      [Y.HOME]: Ve,
+      [Y.END]: xe
+    };
+    return {
+      // Refs
+      selectAllListboxItemsRef: s,
+      selectedListboxItemsRef: c,
+      listboxItemsRef: l,
+      // Values
+      isAllSelected: R,
+      showSelectedItems: ve,
+      isIndeterminate: S,
+      isMultiLevelSelect: a,
+      flattenedItemsList: o,
+      selectedItemsList: r,
+      selectAllCheckboxText: p,
+      selectedOptions: ce,
+      showSelectAllCheckbox: M,
+      slots: n,
+      // Enums
+      BentoListboxEvent: d,
+      // Methods
+      selectAllCategory: w,
+      toggleCheckboxSelection: me,
+      toggleSelectAll: A,
+      unselectAllCategory: te,
+      // Events
+      listboxListeners: Ge
+    };
+  }
+});
+const Dt = (e) => (Ye("data-v-0ca61721"), e = e(), Ke(), e), Nt = {
+  key: 1,
+  class: "b-listbox-multi-select__divider"
+}, Mt = { key: 2 }, Pt = /* @__PURE__ */ Dt(() => /* @__PURE__ */ W("hr", { class: "b-listbox-multi-select__divider" }, null, -1));
+function wt(e, t, n, u, s, c) {
+  const l = h("bento-checkbox"), r = h("bento-typography"), a = h("bento-listbox-option"), o = h("listbox-multi-select-chips"), y = h("listbox-multi-select-options"), i = _e("bento-keyboard-navigation-directive");
+  return ae((g(), T("div", x({ class: "b-listbox-multi-select" }, le(e.listboxListeners, !0)), [
+    e.showSelectAllCheckbox ? (g(), B(a, {
+      key: 0,
+      ref: "selectAllListboxItemsRef",
+      class: "b-listbox-multi-select__option"
+    }, {
+      default: L(() => [
+        k(l, {
+          "aria-label": e.selectAllCheckboxText,
+          "model-value": e.isAllSelected,
+          indeterminate: e.isIndeterminate,
+          "onUpdate:modelValue": e.toggleSelectAll
+        }, null, 8, ["aria-label", "model-value", "indeterminate", "onUpdate:modelValue"]),
+        k(r, {
+          el: "span",
+          "aria-hidden": "true"
+        }, {
+          default: L(() => [
+            U(V(e.selectAllCheckboxText), 1)
+          ]),
+          _: 1
+        })
+      ]),
+      _: 1
+    }, 512)) : q("", !0),
+    e.showSelectAllCheckbox ? (g(), T("hr", Nt)) : q("", !0),
+    e.showSelectedItems ? (g(), T("div", Mt, [
+      k(o, {
+        ref: "selectedListboxItemsRef",
+        items: e.selectedOptions,
+        "is-option-disabled": e.isOptionDisabled,
+        onUnselectCategory: e.unselectAllCategory,
+        onUnselectItem: t[0] || (t[0] = (b) => e.toggleCheckboxSelection(e.BentoListboxEvent.SELECT, b))
+      }, null, 8, ["items", "is-option-disabled", "onUnselectCategory"]),
+      Pt
+    ])) : q("", !0),
+    k(y, x({
+      ref: "listboxItemsRef",
+      items: e.items,
+      "is-option-disabled": e.isOptionDisabled,
+      "is-multi-level": e.isMultiLevelSelect,
+      "static-categories": e.staticCategories,
+      searching: e.searching,
+      "selected-items-list": e.selectedItemsList,
+      onToggleCheckboxSelection: t[1] || (t[1] = (b) => e.toggleCheckboxSelection(e.BentoListboxEvent.SELECT, b)),
+      onSelectCategory: e.selectAllCategory,
+      onUnselectCategory: e.unselectAllCategory
+    }, {
+      [se(e.BentoListboxEvent.SPACE)]: t[2] || (t[2] = (b) => e.toggleCheckboxSelection(e.BentoListboxEvent.SPACE, b))
+    }, {
+      [se(e.BentoListboxEvent.TAB)]: t[3] || (t[3] = (b) => e.toggleCheckboxSelection(e.BentoListboxEvent.TAB, b))
+    }, {
+      [se(e.BentoListboxEvent.ENTER)]: t[4] || (t[4] = (b) => e.toggleCheckboxSelection(e.BentoListboxEvent.ENTER, b))
+    }), ie({ _: 2 }, [
+      z(e.slots, (b, f) => ({
+        name: f,
+        fn: L((p) => [
+          G(e.$slots, f, F(K(p)), void 0, !0)
+        ])
+      }))
+    ]), 1040, ["items", "is-option-disabled", "is-multi-level", "static-categories", "searching", "selected-items-list", "onSelectCategory", "onUnselectCategory"])
+  ], 16)), [
+    [i]
+  ]);
+}
+const Le = /* @__PURE__ */ j(Rt, [["render", wt], ["__scopeId", "data-v-0ca61721"]]), Te = {
+  "en-US": {
+    showMore: "Show more",
+    loading: "Loading"
+  }
+}, Ut = 36, Vt = H({
+  name: "bento-listbox",
+  components: {
+    BentoEmptyState: We,
+    BentoListboxSingleSelect: ft,
+    BentoListboxMultiSelect: Le,
+    BentoTypography: ee,
+    BentoLoadingIndicator: qe,
+    BentoLoadingButton: et
+  },
+  directives: { BentoKeyboardNavigationDirective: Se },
+  i18n: { messages: Te },
+  props: {
+    /**
+     * Defines a string value that labels an interactive element.
+     */
+    ariaLabel: { type: String, default: null },
+    /**
+     * Empty state props that will be used with the inner empty state component to be displayed when no search results are found.
+     */
+    emptyState: {
+      type: Object,
+      default: void 0
+    },
+    /**
+     * Indicates whether there are more items to load
+     */
+    hasMoreItems: { type: Boolean, default: !1 },
+    /**
+     *  Identifies the listbox whose contents are controlled by the the combobox on which the aria-controls attribute is set.
+     */
+    id: { type: String, required: !0 },
+    /**
+     * Function that allows the options to be disabled
+     *
+     * @type {BentoListboxIsOptionDisabled}
+     * @param {BentoListboxOptionItem} option - Listbox option object
+     * @param {string} option.label - Option's label text
+     * @param {string|number} option.value - Option's value
+     * @param {unknown} option.data - Option's extra data to be passed to the default slot
+     */
+    isOptionDisabled: {
+      type: Function,
+      default: () => {
+      }
+    },
+    /**
+     * The option elements to populate the listbox with.
+     * It must be an array of {@see BentoListboxOptionItem }
+     *  * @property {string} value.label - Text to be displayed in the option
+     *  * @property {string,number} value.value - Value of the option
+     */
+    items: {
+      type: Array,
+      required: !0
+    },
+    /**
+     * Indicates if new options are loading.
+     */
+    loading: { type: Boolean, default: !1 },
+    /**
+     * The type of `Lazy Load`.
+     * Type "automatic" will enable infinite scrolling
+     * Type "button" will enable lazy loading with "Show more" button
+     */
+    lazyLoadType: {
+      type: String,
+      default: Q.NONE,
+      validator: (e) => Object.values(Q).includes(e)
+    },
+    /**
+     * If enabled, the user will be able to select multiple items.
+     */
+    multiple: { type: Boolean, default: !1 },
+    /**
+     * If enabled, dropdown will display non-selectable, static categories
+     */
+    staticCategories: { type: Boolean, default: !1 },
+    /**
+     * Messaged displayed when no items are listed in the listbox
+     */
+    noResultsMessage: { type: String, required: !0 },
+    /**
+     * Flag that indicates that an external search it's being made
+     * to filter out the items inside the the multi-select listbox
+     *
+     * If enabled, hides the "Select all" checkbox in "multiple" mode.
+     */
+    searching: Le.props.searching,
+    /**
+     * The `input` value.
+     * Providing an empty string or empty array will select no options.
+     * Set to an empty string `''` if you don't want any of the available options to be selected for single select
+     */
+    selectedValue: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * Enables virtual scrolling if set to true or by providing an object with itemHeight function.
+     * The itemHeight function is used to calculate the height of rendered item given it's index.
+     */
+    virtualScroll: {
+      type: [Boolean, Object],
+      default: !1
+    }
+  },
+  emits: [
+    d.SELECT,
+    d.SPACE,
+    d.SHOW_MORE,
+    d.ENTER,
+    d.ESCAPE,
+    d.TAB
+  ],
+  setup(e, { emit: t, slots: n }) {
+    const u = N([]), s = ue(e, "items"), { t: c } = de({ messages: Te }), l = m(() => e.lazyLoadType !== Q.AUTOMATIC), r = m(() => e.lazyLoadType === Q.AUTOMATIC), a = () => {
+      var M;
+      return typeof (e == null ? void 0 : e.virtualScroll) == "object" && ((M = e == null ? void 0 : e.virtualScroll) != null && M.itemHeight) ? e.virtualScroll.itemHeight : Ut;
+    }, {
+      containerRef: o,
+      containerProps: y,
+      onScroll: i,
+      list: b,
+      wrapperProps: f
+    } = st(s, {
+      itemHeight: a(),
+      // Disable virtual scrolling if not enabled or if lazy loading is enabled or if multi-select
+      disabled: (e == null ? void 0 : e.multiple) || (e == null ? void 0 : e.virtualScroll) === !1 || (e == null ? void 0 : e.lazyLoadType) !== "none"
+    }), p = m(
+      () => l.value ? "true" : void 0
+    ), O = m(
+      () => l.value && e.loading ? "true" : "false"
+    ), P = m(
+      () => l.value ? "polite" : void 0
+    ), I = (M) => (oe) => {
+      t(M, oe);
+    }, D = () => {
+      t(d.SHOW_MORE);
+    }, R = He(() => {
+      const M = o.value;
+      if (!M)
+        return;
+      const oe = Math.round(M.scrollTop) + M.clientHeight >= M.scrollHeight;
+      e.hasMoreItems && oe && !e.loading && D();
+    }), S = () => {
+      r.value ? R() : i();
+    }, A = m(() => {
+      var M;
+      return e.searching && ((M = e.items) == null ? void 0 : M.length) === 0;
+    }), w = m(
+      () => e.lazyLoadType === Q.BUTTON && e.hasMoreItems
+    ), te = m(
+      () => e.loading ? Ee.LOADING : Ee.START
+    ), me = m(() => e.loading ? c("loading") : c("showMore")), ce = m(() => ({
+      ...e.emptyState,
+      variant: "condensed"
+    })), ve = {
+      [d.SELECT]: I(d.SELECT),
+      [d.SPACE]: I(d.SPACE),
+      [d.TAB]: I(d.TAB),
+      [d.ENTER]: I(d.ENTER)
+    };
+    return {
+      // Refs
+      listboxRef: o,
+      listboxItemRef: u,
+      // a11y
+      ariaAtomic: p,
+      ariaBusy: O,
+      ariaLive: P,
+      // Values
+      containerProps: y,
+      isSearchResultEmpty: A,
+      limitedEmptyStateProps: ce,
+      loadingButtonState: te,
+      slots: n,
+      shouldDisplayShowMoreButton: w,
+      showMoreButtonText: me,
+      virtualisedItems: b,
+      wrapperProps: f,
+      // Enums
+      BentoKeyboardNavigationKeyDownEvent: Y,
+      BentoListboxEvent: d,
+      // Methods
+      onListboxContainerScroll: S,
+      onOptionSelected: I,
+      emitShowMore: D,
+      listboxListeners: ve
+    };
+  }
+});
+const xt = ["id", "aria-busy", "aria-atomic", "aria-label", "aria-live"], Gt = {
+  key: 0,
+  class: "b-listbox__empty-search-message"
+}, zt = {
+  key: 2,
+  class: "b-listbox__lazy-load"
+}, Ft = {
+  key: 3,
+  class: "b-listbox__lazy-load"
+};
+function Yt(e, t, n, u, s, c) {
+  const l = h("bento-empty-state"), r = h("bento-typography"), a = h("bento-listbox-multi-select"), o = h("bento-listbox-single-select"), y = h("bento-loading-button"), i = h("bento-loading-indicator"), b = _e("bento-keyboard-navigation-directive");
+  return ae((g(), T("div", x({ id: e.id }, e.containerProps, {
+    class: "b-listbox",
+    role: "listbox",
+    tabindex: "-1",
+    "aria-busy": e.ariaBusy,
+    "aria-atomic": e.ariaAtomic,
+    "aria-label": e.ariaLabel,
+    "aria-live": e.ariaLive,
+    onScroll: t[0] || (t[0] = (...f) => e.onListboxContainerScroll && e.onListboxContainerScroll(...f))
+  }), [
+    W("div", F(K(e.wrapperProps)), [
+      e.isSearchResultEmpty ? (g(), T("div", Gt, [
+        e.emptyState ? (g(), B(l, F(x({ key: 0 }, e.limitedEmptyStateProps)), null, 16)) : (g(), B(r, {
+          key: 1,
+          el: "span"
+        }, {
+          default: L(() => [
+            U(V(e.noResultsMessage), 1)
+          ]),
+          _: 1
+        }))
+      ])) : (g(), T(Z, { key: 1 }, [
+        e.multiple ? (g(), B(a, x({
+          key: 0,
+          ref: "listboxItemRef",
+          "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
+        }, le(e.listboxListeners)), ie({ _: 2 }, [
+          z(e.slots, (f, p) => ({
+            name: p,
+            fn: L((O) => [
+              G(e.$slots, p, F(K(O)), void 0, !0)
+            ])
+          }))
+        ]), 1040, ["has-more-items", "items", "lazy-load-type", "static-categories", "selected-values", "searching", "is-option-disabled"])) : (g(), B(o, x({
+          key: 1,
+          ref: "listboxItemRef",
+          items: e.virtualisedItems,
+          "selected-value": e.selectedValue,
+          "static-categories": e.staticCategories,
+          "is-option-disabled": e.isOptionDisabled
+        }, le(e.listboxListeners)), ie({ _: 2 }, [
+          z(e.slots, (f, p) => ({
+            name: p,
+            fn: L((O) => [
+              G(e.$slots, p, F(K(O)), void 0, !0)
+            ])
+          }))
+        ]), 1040, ["items", "selected-value", "static-categories", "is-option-disabled"])),
+        e.shouldDisplayShowMoreButton ? (g(), T("div", zt, [
+          k(y, {
+            state: e.loadingButtonState,
+            variant: "secondary",
+            onClickCapture: e.emitShowMore
+          }, {
+            default: L(() => [
+              U(V(e.showMoreButtonText), 1)
+            ]),
+            _: 1
+          }, 8, ["state", "onClickCapture"])
+        ])) : e.loading ? (g(), T("div", Ft, [
+          k(i)
+        ])) : q("", !0)
+      ], 64))
+    ], 16)
+  ], 16, xt)), [
+    [b]
+  ]);
+}
+const is = /* @__PURE__ */ j(Vt, [["render", Yt], ["__scopeId", "data-v-f5e00d2e"]]), pe = (e, t) => {
+  for (const n of e) {
+    if (n.value === t)
+      return n.label;
+    if (n.items)
+      return pe(n.items, t);
+  }
+  return null;
+}, as = (e, t, n) => {
+  const u = N([]), s = N(), c = (a) => {
+    s.value = n.value ? a.map(({ value: o }) => o) : a[0].value;
+  }, l = (a) => {
+    u.value = a, c(a);
+  }, r = () => {
+    u.value = [], s.value = null;
+  };
+  return Ie(
+    () => t.value,
+    () => {
+      if (!t.value) {
+        r();
+        return;
+      }
+      const a = !Array.isArray(t.value), o = [...u.value];
+      r();
+      const y = (i) => {
+        let b = pe(e.value, i);
+        b || (b = pe(o, i)), b || (b = i.toString()), u.value.push({ value: i, label: b });
+      };
+      if (a) {
+        const i = t.value;
+        y(i), c(u.value);
+        return;
+      }
+      t.value.forEach(y), c(u.value);
+    },
+    { immediate: !0 }
+  ), {
+    // Values
+    cachedSelectedListboxOptions: u,
+    cachedListboxSelectedValues: s,
+    // Methods
+    resetCache: r,
+    setCachedValues: l
+  };
+};
+export {
+  is as B,
+  as as a,
+  Q as b,
+  d as c,
+  Bt as u
+};
+//# sourceMappingURL=use-cached-selected-values.852aeafe.js.map