@adyen/bento-vue3 1.59.0 → 1.60.0

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

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