@adyen/bento-vue3 1.65.0 → 1.66.0

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

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