@adyen/bento-vue3 1.50.0 → 1.52.0

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

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