@adyen/bento-vue3 1.63.2 → 1.64.0

package/dist/chunks/use-cached-selected-values.swt0cdsA.js

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