@adyen/bento-vue3 1.96.1 → 1.97.0

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

@@ -1,1740 +0,0 @@
-import { computed as b, ref as k, onMounted as ut, onUnmounted as bt, watch as Se, defineComponent as Q, resolveComponent as B, openBlock as c, createElementBlock as C, createVNode as x, withCtx as A, createTextVNode as K, toDisplayString as Y, createElementVNode as V, renderSlot as W, mergeProps as w, withKeys as ge, createCommentVNode as J, createBlock as R, withModifiers as ce, normalizeProps as ie, guardReactiveProps as fe, withDirectives as de, vShow as Ue, nextTick as ke, toRef as ue, resolveDirective as Fe, toHandlers as ee, Fragment as te, renderList as H, createSlots as re, normalizeClass as ye, unref as N, useSlots as mt, useAttrs as pt } from "vue";
-import { B as F, a as Oe } from "./keyboard-navigation.DWmhelVv.js";
-import { B as be } from "./typography.B3J6_tYk.js";
-import { B as vt } from "./loading-indicator.BPol9I84.js";
-import { B as gt } from "./empty-state.DT4sFyjB.js";
-import { u as $e } from "./index.B875RXHM.js";
-import { o as ft } from "./resize.Bqks3WUm.js";
-import { C as Ee, N as yt } from "./minus-small.CnYLTuSv.js";
-import { C as St } from "./checkmark-small.CRuZauJc.js";
-/* empty css              */
-import { _ as q } from "./_plugin-vue_export-helper.CHgC5LLL.js";
-import { B as ht } from "./chip.DFldnqfz.js";
-import { C as Ct } from "./chevron-down.XeE-LBV_.js";
-import { C as Et } from "./chevron-up.Cmgl2a3x.js";
-import { g as Pe } from "./generate-uid.DBWe4g6T.js";
-import { a as Ot, b as we } from "./button-actions.CxTxPprd.js";
-import "../assets/use-cached-selected-values.css";
-const Ke = (e, t, o, l) => {
-  const a = b(
-    () => !!e.value?.length && e.value?.length === t.value.length
-  ), i = b(() => e.value == null || e.value.length === 0 ? !1 : e.value?.length !== t.value.length);
-  return {
-    isAllSelected: a,
-    isIndeterminate: i,
-    toggleSelectAll: (v) => {
-      v ? o() : l();
-    }
-  };
-};
-function Tt(e, { disabled: t, itemHeight: o, overscan: l = 5, prefixHeight: a }) {
-  const i = k(null), r = k([]), v = k(0), E = k(0), n = k(0);
-  let d;
-  const s = b(() => {
-    const O = typeof o == "number" ? e.value.length * o : e.value.reduce(($, L, T) => $ + o(T), 0), _ = typeof o == "number" ? v.value * o : e.value.slice(0, v.value).reduce(($, L, T) => $ + o(T), 0);
-    return {
-      style: {
-        marginTop: `${_}px`,
-        height: `${O - _}px`
-      }
-    };
-  }), f = () => {
-    const O = a?.value ?? 0, _ = Math.max(i.value.scrollTop - O, 0);
-    if (typeof o == "number")
-      return Math.floor(_ / o);
-    let $ = 0, L = 0;
-    for (let T = 0; T < e.value.length; T += 1) {
-      const G = o(T);
-      if ($ += G, $ >= _) {
-        L = T;
-        break;
-      }
-    }
-    return L;
-  }, y = () => {
-    if (n.value = i.value.clientHeight, typeof o == "number")
-      return Math.ceil(n.value / o);
-    const O = v.value ?? 0;
-    let _ = 0, $ = 0;
-    for (let L = O; L < e.value.length; L += 1) {
-      const T = o(L);
-      if (_ += T, $ = L, _ > n.value)
-        break;
-    }
-    return $ - O;
-  }, h = () => {
-    if (i.value) {
-      const O = y();
-      v.value = f(), E.value = Math.min(v.value + O + l, e.value.length), r.value = e.value.slice(v.value, E.value);
-    }
-  }, M = () => {
-    h();
-  };
-  t || (ut(() => {
-    i.value && (n.value = i.value.clientHeight, d = ft(i.value, ({ clientHeight: O }) => {
-      n.value = O, h();
-    }), h());
-  }), bt(() => {
-    d?.disconnect();
-  }), Se(
-    () => e.value,
-    () => {
-      h();
-    }
-  ));
-  const z = {
-    ref: i,
-    style: { overflowY: "auto" }
-  }, X = (O) => {
-    if (!i.value)
-      return;
-    const _ = typeof o == "number" ? O * o : e.value.slice(0, O).reduce((D, U, le) => D + o(le), 0), $ = typeof o == "number" ? o : o(O), L = _ + $, { scrollTop: T, clientHeight: G } = i.value, S = T + G;
-    L > S ? i.value.scrollTop = G > 0 ? L - G : _ : _ < T && (i.value.scrollTop = _), h();
-  };
-  return t ? {
-    containerRef: i,
-    containerProps: z,
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    onScroll: () => {
-    },
-    list: e,
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    scrollToIndex: () => {
-    },
-    startIndex: k(0)
-  } : {
-    containerRef: i,
-    containerProps: z,
-    onScroll: M,
-    list: r,
-    wrapperProps: s,
-    scrollToIndex: X,
-    startIndex: v
-  };
-}
-var m = /* @__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))(m || {}), ne = /* @__PURE__ */ ((e) => (e.AUTOMATIC = "automatic", e.BUTTON = "button", e.NONE = "none", e))(ne || {});
-const It = Q({
-  name: "bento-listbox-static-category",
-  components: {
-    BentoTypography: be
-  },
-  props: {
-    /**
-     * Category label text
-     */
-    categoryLabel: {
-      type: String,
-      required: !0
-    }
-  }
-}), Lt = ["aria-label"];
-function At(e, t, o, l, a, i) {
-  const r = B("bento-typography");
-  return c(), C("div", {
-    class: "b-listbox-single-select-category",
-    role: "group",
-    "aria-label": e.categoryLabel
-  }, [
-    x(r, {
-      variant: "caption",
-      el: "span",
-      class: "b-listbox-single-select-category__label-text",
-      "aria-hidden": "true"
-    }, {
-      default: A(() => [
-        K(Y(e.categoryLabel), 1)
-      ]),
-      _: 1
-    }),
-    V("div", null, [
-      W(e.$slots, "default", {}, void 0, !0)
-    ])
-  ], 8, Lt);
-}
-const _t = /* @__PURE__ */ q(It, [["render", At], ["__scopeId", "data-v-27c4e09a"]]), kt = Q({
-  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: [m.CLICK, m.ENTER, m.SPACE, m.TAB],
-  setup(e, { emit: t }) {
-    const o = b(() => ({
-      "b-listbox-option--disabled": e.disabled,
-      "b-listbox-option--selected": e.selected
-    }));
-    return {
-      // Enums
-      BentoKeyboardNavigationKeyDownEvent: F,
-      BentoListboxEvent: m,
-      // Values
-      conditionalClasses: o,
-      // Events
-      onClick: (i) => {
-        t(m.CLICK, i);
-      },
-      onOptionSelected: (i, r) => {
-        t(i, r);
-      }
-    };
-  }
-});
-function $t(e, t, o, l, a, i) {
-  return c(), C("div", w({
-    class: ["b-listbox-option", e.conditionalClasses],
-    role: "option"
-  }, e.$attrs, {
-    onClick: t[0] || (t[0] = (...r) => e.onClick && e.onClick(...r)),
-    onKeydown: [
-      t[1] || (t[1] = ge((r) => e.onOptionSelected(e.BentoListboxEvent.ENTER, r), ["enter"])),
-      t[2] || (t[2] = ge((r) => e.onOptionSelected(e.BentoListboxEvent.SPACE, r), ["space"])),
-      t[3] || (t[3] = ge((r) => e.onOptionSelected(e.BentoListboxEvent.TAB, r), ["tab"]))
-    ]
-  }), [
-    W(e.$slots, "default", {}, void 0, !0)
-  ], 16);
-}
-const Te = /* @__PURE__ */ q(kt, [["render", $t], ["__scopeId", "data-v-1495b1db"]]);
-let xe = 0;
-const Dt = {
-  beforeCreate() {
-    this.uuid = xe.toString(), xe += 1;
-  }
-}, Bt = { key: 0 };
-function Rt(e, t, o, l, a, i) {
-  return c(), C("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"] ? (c(), C("title", Bt, Y(e.$attrs["svg-title"]), 1)) : J("", !0),
-    t[0] || (t[0] = V("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 Mt = /* @__PURE__ */ q(Dt, [["render", Rt]]), Nt = Q({
-  name: "bento-listbox-single-select-option",
-  components: {
-    BentoListboxOption: Te,
-    BentoTypography: be,
-    CheckmarkIcon: Mt
-  },
-  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: [m.ENTER, m.SELECT, m.SPACE, m.TAB],
-  setup(e, { emit: t }) {
-    const o = (r) => {
-      e.disabled || t(r, e.option);
-    }, l = b(() => e.disabled ? !0 : null), a = b(() => e.selected ? !0 : null), i = b(() => e.disabled ? -1 : 0);
-    return {
-      // Values
-      ariaDisabled: l,
-      ariaSelected: a,
-      tabIndex: i,
-      // Enums
-      BentoListboxEvent: m,
-      // Events
-      onOptionSelected: o
-    };
-  }
-}), Pt = { class: "b-listbox-single-select-option__text" }, wt = { class: "b-listbox-single-select-option__check-icon" };
-function xt(e, t, o, l, a, i) {
-  const r = B("bento-typography"), v = B("checkmark-icon"), E = B("bento-listbox-option");
-  return c(), R(E, {
-    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] = ce((n) => e.onOptionSelected(e.BentoListboxEvent.SPACE), ["prevent"])),
-    onTabPressed: t[3] || (t[3] = (n) => e.onOptionSelected(e.BentoListboxEvent.TAB))
-  }, {
-    default: A(() => [
-      W(e.$slots, "default", ie(fe(e.option)), () => [
-        V("span", Pt, [
-          x(r, { el: "span" }, {
-            default: A(() => [
-              K(Y(e.option.label), 1)
-            ]),
-            _: 1
-          }),
-          e.option.description ? (c(), R(r, {
-            key: 0,
-            class: "b-listbox-single-select-option__description",
-            el: "span"
-          }, {
-            default: A(() => [
-              K(Y(e.option.description), 1)
-            ]),
-            _: 1
-          })) : J("", !0)
-        ])
-      ], !0),
-      V("span", wt, [
-        de(x(v, { "svg-title": "selected" }, null, 512), [
-          [Ue, e.selected]
-        ])
-      ])
-    ]),
-    _: 3
-  }, 8, ["disabled", "selected", "aria-selected", "aria-disabled", "tabindex"]);
-}
-const Gt = /* @__PURE__ */ q(Nt, [["render", xt], ["__scopeId", "data-v-4f41af07"]]), We = ({ items: e, totalItemCount: t }, o) => {
-  const l = b(() => t?.value ? t.value - 1 : e.value.length - 1), a = k(0), i = (y) => {
-    switch (y) {
-      case "increase":
-        a.value += 1;
-        break;
-      case "decrease":
-        a.value -= 1;
-        break;
-    }
-  }, r = ({ edgeCaseItem: y }, h) => {
-    a.value !== y && (i(h), o(a.value));
-  }, v = (y) => {
-    f(y), r(
-      {
-        edgeCaseItem: l.value
-      },
-      "increase"
-      /* INCREASE */
-    );
-  }, E = (y) => {
-    f(y), r(
-      {
-        edgeCaseItem: 0
-      },
-      "decrease"
-      /* DECREASE */
-    );
-  }, n = () => {
-    a.value = 0, o(a.value);
-  }, d = () => {
-    a.value = l.value, o(a.value);
-  }, s = (y) => {
-    a.value = y;
-  }, f = (y) => {
-    y?.detail?.preventDefault();
-  };
-  return {
-    moveToFirstElement: n,
-    moveToLastElement: d,
-    moveToNextElement: v,
-    moveToPreviousElement: E,
-    setListboxFocusedIndex: s,
-    preventDefault: f,
-    focusedIndex: a
-  };
-}, je = (e, t, o = k("option"), l = !0) => {
-  const a = k([]), i = async () => {
-    if (!e.value || e.value.nodeType === Node.COMMENT_NODE)
-      return;
-    const r = Array.from(e.value.querySelectorAll(`[role="${o.value}"]`));
-    a.value = l ? r.filter((v) => v.checkVisibility()) : r;
-  };
-  return Se(
-    t,
-    () => {
-      ke(() => {
-        i();
-      });
-    },
-    { immediate: !0 }
-  ), {
-    visibleDomOptions: a,
-    updateVisibleDomOptions: i
-  };
-}, Vt = Q({
-  name: "bento-listbox-single-select",
-  components: {
-    BentoListboxSingleSelectCategory: _t,
-    BentoListboxSingleSelectOption: Gt
-  },
-  directives: { BentoKeyboardNavigationDirective: Oe },
-  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 },
-    /**
-     * Total number of items in the full list (used for virtual scroll keyboard navigation).
-     * When greater than 0, virtual scroll keyboard navigation is enabled.
-     */
-    totalItemCount: { type: Number, default: 0 },
-    /**
-     * Function to scroll the virtual list container to a given item index.
-     */
-    scrollToIndex: { type: Function, default: void 0 },
-    /**
-     * The start index of the currently rendered virtual scroll slice.
-     */
-    virtualScrollStartIndex: { type: Number, default: 0 }
-  },
-  emits: [m.SELECT, m.ENTER, m.SPACE, m.TAB],
-  setup(e, { emit: t, expose: o, slots: l, attrs: a }) {
-    const i = k(null), r = k([]), v = b(() => !!e.selectedValue?.length && e.selectedValue.at(0)), E = b(
-      () => ({
-        "aria-label": a["aria-label"]?.toString(),
-        "aria-busy": a["aria-busy"]?.toString(),
-        "aria-atomic": a["aria-atomic"]?.toString(),
-        "aria-live": a["aria-live"]?.toString()
-      })
-    ), n = b(() => !!e.items.some(({ items: S }) => !!S)), d = (S) => (D) => {
-      t(S, [D]);
-    }, { visibleDomOptions: s, updateVisibleDomOptions: f } = je(
-      i,
-      ue(e, "items"),
-      k("option"),
-      !1
-    ), y = b(() => e.totalItemCount > 0), h = (S) => {
-      if (!y.value)
-        return;
-      const D = S.target;
-      if (D === i.value || D?.getAttribute("role") !== "option")
-        return;
-      const U = s.value.indexOf(D);
-      if (U !== -1) {
-        const le = U + e.virtualScrollStartIndex;
-        L(le);
-      }
-    }, M = async (S) => {
-      if (y.value && e.scrollToIndex) {
-        e.scrollToIndex(S), await ke(), await f();
-        const D = S - e.virtualScrollStartIndex;
-        s.value[D]?.focus();
-      } else
-        s.value[S]?.focus();
-    }, z = async (S) => {
-      L(S), await M(S);
-    }, {
-      moveToNextElement: X,
-      moveToPreviousElement: O,
-      moveToFirstElement: _,
-      moveToLastElement: $,
-      setListboxFocusedIndex: L
-    } = We(
-      {
-        items: s,
-        totalItemCount: ue(e, "totalItemCount")
-      },
-      M
-    ), T = {
-      [F.ARROW_UP]: O,
-      [F.ARROW_DOWN]: X,
-      [F.HOME]: _,
-      [F.END]: $
-    }, G = {
-      [m.SELECT]: d(m.SELECT),
-      [m.SPACE]: d(m.SPACE),
-      [m.TAB]: d(m.TAB),
-      [m.ENTER]: d(m.ENTER)
-    };
-    return o({
-      /**
-       * Reference for a single listbox item.
-       * Required for keyboard navigation in dropdown as $children is removed in vue@3
-       */
-      listboxItemRef: r,
-      /**
-       * 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: L,
-      /**
-       * Navigates to an item by global index, handling virtual scroll if enabled.
-       * Scrolls the virtual list and focuses the item.
-       */
-      navigateToItem: z
-    }), {
-      // Enums
-      BentoListboxEvent: m,
-      // Values
-      listboxRef: i,
-      listboxItemRef: r,
-      selectedItem: v,
-      slots: l,
-      ariaAttributes: E,
-      // Computed
-      hasCategories: n,
-      // Methods
-      onOptionSelected: d,
-      // Keyboard navigation
-      listboxListeners: T,
-      listboxOptionListeners: G,
-      // Virtual scroll focus management
-      handleVirtualScrollingFocus: h
-    };
-  }
-});
-function zt(e, t, o, l, a, i) {
-  const r = B("bento-listbox-single-select-option"), v = B("bento-listbox-single-select-category"), E = Fe("bento-keyboard-navigation-directive");
-  return de((c(), C("div", w({ ref: "listboxRef" }, e.ariaAttributes, { role: "listbox" }, ee(e.listboxListeners, !0), {
-    onFocusin: t[0] || (t[0] = (...n) => e.handleVirtualScrollingFocus && e.handleVirtualScrollingFocus(...n))
-  }), [
-    e.hasCategories && e.staticCategories ? (c(!0), C(te, { key: 0 }, H(e.items, (n) => (c(), C(te, null, [
-      n.items && n.items.length > 0 ? (c(), R(v, {
-        key: `category-${n.value}`,
-        "category-label": n.label
-      }, {
-        default: A(() => [
-          (c(!0), C(te, null, H(n.items, (d) => (c(), R(r, w({
-            key: d.value,
-            ref_for: !0,
-            ref: "listboxItemRef",
-            role: "option",
-            option: d,
-            disabled: e.isOptionDisabled ? e.isOptionDisabled(d) : null,
-            selected: d.value === e.selectedItem.value
-          }, ee(e.listboxOptionListeners)), re({ _: 2 }, [
-            H(e.slots, (s, f) => ({
-              name: f,
-              fn: A((y) => [
-                W(e.$slots, f, w({ ref_for: !0 }, y))
-              ])
-            }))
-          ]), 1040, ["option", "disabled", "selected"]))), 128))
-        ]),
-        _: 2
-      }, 1032, ["category-label"])) : (c(), R(r, w({
-        key: `option-${n.value}`,
-        ref_for: !0,
-        ref: "listboxItemRef",
-        role: "option",
-        option: n,
-        disabled: e.isOptionDisabled ? e.isOptionDisabled(n) : null,
-        selected: n.value === e.selectedItem.value
-      }, ee(e.listboxOptionListeners)), re({ _: 2 }, [
-        H(e.slots, (d, s) => ({
-          name: s,
-          fn: A((f) => [
-            W(e.$slots, s, w({ ref_for: !0 }, f))
-          ])
-        }))
-      ]), 1040, ["option", "disabled", "selected"]))
-    ], 64))), 256)) : (c(!0), C(te, { key: 1 }, H(e.items, (n) => (c(), R(r, w({
-      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
-    }, ee(e.listboxOptionListeners)), re({ _: 2 }, [
-      H(e.slots, (d, s) => ({
-        name: s,
-        fn: A((f) => [
-          W(e.$slots, s, w({ ref_for: !0 }, f))
-        ])
-      }))
-    ]), 1040, ["option", "disabled", "selected"]))), 128))
-  ], 16)), [
-    [E]
-  ]);
-}
-const Yt = /* @__PURE__ */ q(Vt, [["render", zt]]);
-let Ge = 0;
-const Ut = {
-  beforeCreate() {
-    this.uuid = Ge.toString(), Ge += 1;
-  }
-}, Ft = { key: 0 };
-function Kt(e, t, o, l, a, i) {
-  return c(), C("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"] ? (c(), C("title", Ft, Y(e.$attrs["svg-title"]), 1)) : J("", !0),
-    t[0] || (t[0] = V("path", {
-      fill: "#001222",
-      d: "M9.69043 5.75L4.62988 10.8105L1.56934 7.75L2.62988 6.68945L4.62988 8.68945L8.62988 4.68945L9.69043 5.75Z"
-    }, null, -1)),
-    t[1] || (t[1] = V("path", {
-      fill: "#001222",
-      d: "M13.9307 5.75L8.87012 10.8105L7.80957 9.75L12.8701 4.68945L13.9307 5.75Z"
-    }, null, -1))
-  ], 16);
-}
-const Wt = /* @__PURE__ */ q(Ut, [["render", Kt]]), jt = {}, Ht = /* @__PURE__ */ Q({
-  ...jt,
-  __name: "decorative-checkbox",
-  props: {
-    disabled: { type: Boolean, default: !1 },
-    indeterminate: { type: Boolean, default: !1 },
-    checked: { type: Boolean, default: !1 },
-    allSelected: { type: Boolean, default: !1 }
-  },
-  setup(e) {
-    const t = e, o = b(() => ({
-      [`b-checkbox-input--${Ee.DISABLED}`]: t.disabled
-    })), l = b(() => ({
-      [`b-checkbox-input__outline--${Ee.UNCHECKED}`]: !t.checked && !t.indeterminate && !t.allSelected,
-      [`b-checkbox-input__outline--${Ee.CHECKED}`]: (t.checked || t.allSelected) && !t.indeterminate,
-      [`b-checkbox-input__outline--${Ee.INDETERMINATE}`]: t.indeterminate
-    }));
-    return (a, i) => (c(), C("div", {
-      class: ye(["b-checkbox-input", o.value]),
-      role: "presentation"
-    }, [
-      a.indeterminate ? (c(), R(N(yt), {
-        key: 0,
-        class: "b-checkbox-input__icon",
-        "svg-title": "",
-        "aria-hidden": "true"
-      })) : a.allSelected ? (c(), R(N(Wt), {
-        key: 1,
-        class: "b-checkbox-input__icon",
-        "svg-title": "",
-        "aria-hidden": "true",
-        "data-testid": "decorative-checkbox-double-checkmark-icon"
-      })) : a.checked ? (c(), R(N(St), {
-        key: 2,
-        class: "b-checkbox-input__icon",
-        "svg-title": "",
-        "aria-hidden": "true"
-      })) : J("", !0),
-      V("div", {
-        class: ye(["b-checkbox-input__outline", l.value])
-      }, null, 2)
-    ], 2));
-  }
-}), De = /* @__PURE__ */ q(Ht, [["__scopeId", "data-v-08d3142e"]]);
-var He = /* @__PURE__ */ ((e) => (e.DISABLED = "disabled", e.STATIC_CATEGORY = "static-category", e))(He || {}), ae = /* @__PURE__ */ ((e) => (e.SELECT_CATEGORY = "select-category", e.UNSELECT_CATEGORY = "unselect-category", e.TOGGLE_CATEGORY_VISIBILITY = "toggle-category-visibility", e))(ae || {});
-const Ve = {
-  "de-DE": { categoryClosed: "{category} geschlossen", categoryOpened: "{category} geöffnet" },
-  "en-GB": { categoryClosed: "{category} closed", categoryOpened: "{category} opened" },
-  "en-US": { categoryClosed: "{category} closed", categoryOpened: "{category} opened" },
-  "es-ES": { categoryClosed: "{category} cerrado", categoryOpened: "{category} abierto" },
-  "es-MX": { categoryClosed: "{category} cerrado", categoryOpened: "{category} abierto" },
-  "fr-FR": { categoryClosed: "{category} fermée", categoryOpened: "{category} ouverte" },
-  "it-IT": { categoryClosed: "{category} chiuso", categoryOpened: "{category} aperto" },
-  "ja-JP": { categoryClosed: "{category}を閉じました", categoryOpened: "{category}を開きました" },
-  "pt-BR": { categoryClosed: "{category} fechada", categoryOpened: "{categoria} aberta" },
-  "zh-CN": { categoryClosed: "{category} 已关闭", categoryOpened: "{category} 已打开" }
-}, qt = Q({
-  i18n: { messages: Ve },
-  name: "bento-listbox-multi-select-category",
-  components: {
-    BentoTypography: be,
-    BentoListboxOption: Te,
-    ChevronDownIcon: Ct,
-    ChevronUpIcon: Et,
-    DecorativeCheckbox: De
-  },
-  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: [
-    ae.SELECT_CATEGORY,
-    ae.UNSELECT_CATEGORY,
-    ae.TOGGLE_CATEGORY_VISIBILITY
-  ],
-  setup(e, { emit: t }) {
-    const o = k(!1), { t: l } = $e({ messages: Ve }), a = Pe("category-group"), i = Pe("category-name"), r = (S) => e.isOptionDisabled ? e.isOptionDisabled(S) : !1, v = b(
-      () => e.category.items.every((S) => r(S))
-    ), E = ue(e, "staticCategories"), n = b(() => o.value || e.staticCategories), d = b(() => ({
-      [`b-listbox-multi-select-category--${He.DISABLED}`]: v.value
-    })), s = (S, D) => {
-      S.preventDefault(), o.value = D !== void 0 ? D : !o.value, t(ae.TOGGLE_CATEGORY_VISIBILITY, e.category.value);
-    }, f = (S) => {
-      const D = r(S), U = e.selectedItemsList?.includes(S.value) || !1;
-      return { isDisabled: D, isPreSelected: U };
-    }, y = b(
-      () => e.category.items.filter((S) => {
-        const { isDisabled: D, isPreSelected: U } = f(S);
-        return D && U || !D;
-      })
-    ), h = b(
-      () => y.value?.filter(
-        ({ value: S }) => e.selectedItemsList?.includes(S)
-      )
-    ), M = b(() => {
-      const S = o.value ? "categoryOpened" : "categoryClosed";
-      return l(S, { category: e.category.label });
-    }), z = () => {
-      t(ae.SELECT_CATEGORY);
-    }, X = () => {
-      t(ae.UNSELECT_CATEGORY);
-    }, { isAllSelected: O, isIndeterminate: _, toggleSelectAll: $ } = Ke(
-      h,
-      y,
-      z,
-      X
-    ), L = b(() => _.value ? "mixed" : `${O.value}`), T = k(O.value), G = () => {
-      T.value = !T.value, $(T.value);
-    };
-    return Se(O, () => {
-      T.value = O.value;
-    }), {
-      // Values
-      chevronTitle: M,
-      conditionalClass: d,
-      hasAllPropsDisabled: v,
-      isOpen: o,
-      isAllSelected: O,
-      isIndeterminate: _,
-      isStaticCategory: E,
-      categoryGroupId: a,
-      categoryNameId: i,
-      // Computed
-      showItemChildren: n,
-      ariaCheckedComputed: L,
-      // Methods
-      handleSelectAll: G,
-      toggleOpen: s,
-      toggleSelectAll: $
-    };
-  }
-}), Xt = { class: "b-listbox-multi-select-category__label" }, Jt = {
-  key: 1,
-  class: "b-listbox-multi-select-category b-listbox-multi-select-category--static-category",
-  "aria-hidden": "true"
-}, Zt = { class: "b-listbox-multi-select-category__label" }, Qt = ["id", "aria-label"];
-function el(e, t, o, l, a, i) {
-  const r = B("decorative-checkbox"), v = B("bento-typography"), E = B("chevron-up-icon"), n = B("chevron-down-icon"), d = B("bento-listbox-option");
-  return c(), C("div", null, [
-    e.isStaticCategory ? (c(), C("div", Jt, [
-      V("span", Zt, [
-        x(v, {
-          el: "span",
-          variant: "caption",
-          class: "b-listbox-multi-select-category__label-text"
-        }, {
-          default: A(() => [
-            K(Y(e.category.label), 1)
-          ]),
-          _: 1
-        })
-      ])
-    ])) : (c(), R(d, {
-      key: 0,
-      class: ye(["b-listbox-multi-select-category__option", e.conditionalClass]),
-      tabindex: e.tabindex,
-      "aria-selected": e.ariaCheckedComputed !== "false",
-      "aria-checked": e.ariaCheckedComputed,
-      "aria-disabled": e.hasAllPropsDisabled,
-      "aria-expanded": `${e.isOpen}`,
-      role: "treeitem",
-      "aria-owns": e.categoryGroupId,
-      "aria-labelledby": e.categoryNameId,
-      onClick: e.handleSelectAll,
-      onEnterPressed: e.handleSelectAll,
-      onSpacePressed: ce(e.handleSelectAll, ["prevent"]),
-      onKeydown: [
-        t[1] || (t[1] = ge((s) => e.toggleOpen(s, !1), ["arrow-left", "native"])),
-        t[2] || (t[2] = ge((s) => e.toggleOpen(s, !0), ["arrow-right", "native"]))
-      ]
-    }, {
-      default: A(() => [
-        x(r, {
-          indeterminate: e.isIndeterminate,
-          disabled: e.hasAllPropsDisabled,
-          checked: e.isAllSelected
-        }, null, 8, ["indeterminate", "disabled", "checked"]),
-        V("span", Xt, [
-          x(v, {
-            id: e.categoryNameId,
-            el: "span",
-            class: "b-listbox-multi-select-category__label-text"
-          }, {
-            default: A(() => [
-              K(Y(e.category.label), 1)
-            ]),
-            _: 1
-          }, 8, ["id"]),
-          V("div", {
-            "aria-hidden": "true",
-            class: "b-listbox-multi-select-category__label-chevron",
-            "data-testid": "toggle-listbox",
-            onClickCapture: t[0] || (t[0] = ce((...s) => e.toggleOpen && e.toggleOpen(...s), ["stop"]))
-          }, [
-            e.isOpen ? (c(), R(E, {
-              key: 0,
-              "svg-title": e.chevronTitle
-            }, null, 8, ["svg-title"])) : (c(), R(n, {
-              key: 1,
-              "svg-title": e.chevronTitle
-            }, null, 8, ["svg-title"]))
-          ], 32)
-        ])
-      ]),
-      _: 1
-    }, 8, ["class", "tabindex", "aria-selected", "aria-checked", "aria-disabled", "aria-expanded", "aria-owns", "aria-labelledby", "onClick", "onEnterPressed", "onSpacePressed"])),
-    de(V("div", {
-      id: e.categoryGroupId,
-      role: "group",
-      "aria-label": e.category.label
-    }, [
-      W(e.$slots, "default", {}, void 0, !0)
-    ], 8, Qt), [
-      [Ue, e.showItemChildren]
-    ])
-  ]);
-}
-const tl = /* @__PURE__ */ q(qt, [["render", el], ["__scopeId", "data-v-60c04867"]]);
-var Z = /* @__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))(Z || {});
-const ll = Q({
-  name: "listbox-multi-select-options",
-  components: {
-    BentoListboxOption: Te,
-    BentoTypography: be,
-    ListboxMultiSelectCategory: tl,
-    DecorativeCheckbox: De
-  },
-  inheritAttrs: !1,
-  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 },
-    /**
-     * Object with the index of each item.
-     */
-    itemsIndex: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  emits: [
-    Z.TOGGLE_CHECKBOX_SELECTION,
-    Z.SELECT_CATEGORY,
-    Z.UNSELECT_CATEGORY,
-    Z.TOGGLE_CATEGORY_VISIBILITY
-  ],
-  setup(e, { emit: t }) {
-    const o = (n) => {
-      e.isOptionDisabled(n) || t(Z.TOGGLE_CHECKBOX_SELECTION, n);
-    }, l = (n) => !!n.items, a = (n) => {
-      const d = e.isMultiLevel && e.searching;
-      return n.description && (!e.isMultiLevel || d);
-    }, i = (n) => n.items ? !!n.items.find((d) => e.selectedItemsList.includes(d.value)) : e.selectedItemsList.includes(n.value), r = (n) => {
-      if (l(n)) {
-        const d = i(n) ? Z.UNSELECT_CATEGORY : Z.SELECT_CATEGORY;
-        t(d, n);
-      } else
-        o(n);
-    };
-    return {
-      // Values
-      conditionalClasses: b(() => ({
-        "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: o,
-      toggleSearchOption: r,
-      computedTabindex: (n) => e.itemsIndex[n] === e.focusedIndex ? 0 : -1,
-      // Enums
-      BentoListboxEvent: m,
-      ListboxMultiSelectOptionsEvent: Z
-    };
-  }
-}), sl = { class: "b-listbox-multi-select__option-text" }, ol = { class: "b-listbox-multi-select__option-text" };
-function al(e, t, o, l, a, i) {
-  const r = B("decorative-checkbox"), v = B("bento-typography"), E = B("bento-listbox-option"), n = B("listbox-multi-select-options", !0), d = B("listbox-multi-select-category");
-  return c(), C("div", null, [
-    (c(!0), C(te, null, H(e.items, (s) => (c(), C("div", {
-      key: `selected-${s.value}`
-    }, [
-      e.searching && e.isMultiLevel ? (c(), R(E, {
-        key: 0,
-        class: ye(["b-listbox-multi-select-options", e.conditionalClasses]),
-        disabled: e.isOptionDisabled ? e.isOptionDisabled(s) : null,
-        tabindex: e.computedTabindex(s.value),
-        "aria-selected": `${e.isOptionSelected(s)}`,
-        "aria-checked": `${e.isOptionSelected(s)}`,
-        "aria-disabled": e.isOptionDisabled ? e.isOptionDisabled(s) : null,
-        role: e.$attrs.role || "option",
-        onClick: (f) => e.toggleSearchOption(s),
-        onEnterPressed: (f) => e.toggleSearchOption(s),
-        onSpacePressed: ce((f) => e.toggleSearchOption(s), ["prevent"])
-      }, {
-        default: A(() => [
-          x(r, {
-            disabled: e.isOptionDisabled ? e.isOptionDisabled(s) : null,
-            checked: e.isOptionSelected(s)
-          }, null, 8, ["disabled", "checked"]),
-          W(e.$slots, "default", w({ ref_for: !0 }, s), () => [
-            V("span", sl, [
-              x(v, { el: "span" }, {
-                default: A(() => [
-                  K(Y(s.label), 1)
-                ]),
-                _: 2
-              }, 1024),
-              e.shouldShowDescription(s) ? (c(), R(v, {
-                key: 0,
-                class: "b-listbox-multi-select__option-description",
-                el: "span"
-              }, {
-                default: A(() => [
-                  K(Y(s.description), 1)
-                ]),
-                _: 2
-              }, 1024)) : J("", !0)
-            ])
-          ], !0)
-        ]),
-        _: 2
-      }, 1032, ["class", "disabled", "tabindex", "aria-selected", "aria-checked", "aria-disabled", "role", "onClick", "onEnterPressed", "onSpacePressed"])) : (c(), C(te, { key: 1 }, [
-        s.items ? (c(), R(d, {
-          key: 0,
-          category: s,
-          "static-categories": e.staticCategories,
-          "is-option-disabled": e.isOptionDisabled,
-          "selected-items-list": e.selectedItemsList,
-          tabindex: e.computedTabindex(s.value),
-          onSelectCategory: (f) => e.$emit(e.ListboxMultiSelectOptionsEvent.SELECT_CATEGORY, s),
-          onUnselectCategory: (f) => e.$emit(e.ListboxMultiSelectOptionsEvent.UNSELECT_CATEGORY, s),
-          onToggleCategoryVisibility: t[1] || (t[1] = (f) => e.$emit(e.ListboxMultiSelectOptionsEvent.TOGGLE_CATEGORY_VISIBILITY, f))
-        }, {
-          default: A(() => [
-            x(n, {
-              "category-items": "",
-              items: s.items,
-              "is-option-disabled": e.isOptionDisabled,
-              "items-index": e.itemsIndex,
-              "focused-index": e.focusedIndex,
-              "is-multi-level": e.isMultiLevel,
-              "static-categories": e.staticCategories,
-              "selected-items-list": e.selectedItemsList,
-              searching: e.searching,
-              role: e.$attrs.role || "option",
-              onToggleCheckboxSelection: t[0] || (t[0] = (f) => e.toggleCheckboxSelection(f))
-            }, null, 8, ["items", "is-option-disabled", "items-index", "focused-index", "is-multi-level", "static-categories", "selected-items-list", "searching", "role"])
-          ]),
-          _: 2
-        }, 1032, ["category", "static-categories", "is-option-disabled", "selected-items-list", "tabindex", "onSelectCategory", "onUnselectCategory"])) : (c(), R(E, {
-          key: 1,
-          class: ye(["b-listbox-multi-select-options", e.conditionalClasses]),
-          disabled: e.isOptionDisabled ? e.isOptionDisabled(s) : null,
-          tabindex: e.computedTabindex(s.value),
-          "aria-selected": `${e.isOptionSelected(s)}`,
-          "aria-checked": `${e.isOptionSelected(s)}`,
-          "aria-disabled": e.isOptionDisabled ? e.isOptionDisabled(s) : null,
-          role: e.$attrs.role || "option",
-          onClick: (f) => e.toggleCheckboxSelection(s),
-          onEnterPressed: (f) => e.toggleCheckboxSelection(s),
-          onSpacePressed: ce((f) => e.toggleCheckboxSelection(s), ["prevent"])
-        }, {
-          default: A(() => [
-            x(r, {
-              disabled: e.isOptionDisabled ? e.isOptionDisabled(s) : null,
-              checked: e.isOptionSelected(s)
-            }, null, 8, ["disabled", "checked"]),
-            W(e.$slots, "default", w({ ref_for: !0 }, s), () => [
-              V("span", ol, [
-                x(v, { el: "span" }, {
-                  default: A(() => [
-                    K(Y(s.label), 1)
-                  ]),
-                  _: 2
-                }, 1024),
-                e.shouldShowDescription(s) ? (c(), R(v, {
-                  key: 0,
-                  class: "b-listbox-multi-select__option-description",
-                  el: "span"
-                }, {
-                  default: A(() => [
-                    K(Y(s.description), 1)
-                  ]),
-                  _: 2
-                }, 1024)) : J("", !0)
-              ])
-            ], !0)
-          ]),
-          _: 2
-        }, 1032, ["class", "disabled", "tabindex", "aria-selected", "aria-checked", "aria-disabled", "role", "onClick", "onEnterPressed", "onSpacePressed"]))
-      ], 64))
-    ]))), 128))
-  ]);
-}
-const nl = /* @__PURE__ */ q(ll, [["render", al], ["__scopeId", "data-v-237dfc58"]]), il = (e) => {
-  const t = b(() => !!e.value?.find(({ items: l }) => !!l)), o = b(() => t.value ? e.value?.reduce((l, a) => (a.items ? l.push(...a.items.flat()) : l.push(a), l), []) : e.value);
-  return {
-    isMultiLevelSelect: t,
-    flattenedItemsList: o
-  };
-}, qe = {
-  "de-DE": { allSelected: "Alle ausgewählt ({total})", numberOfTotalSelected: "{number} von {total} ausgewählt", numbersSelected: "{number} ausgewählt", selectAll: "Alle auswählen ({total})" },
-  "en-GB": { allSelected: "All selected ({total})", numberOfTotalSelected: "{number} of {total} selected", numbersSelected: "{number} selected", selectAll: "Select all ({total})" },
-  "en-US": { allSelected: "All selected ({total})", numberOfTotalSelected: "{number} of {total} selected", numbersSelected: "{number} selected", selectAll: "Select all ({total})" },
-  "es-ES": { allSelected: "Todos seleccionados ({total})", numberOfTotalSelected: "{number} de {total} seleccionados", numbersSelected: "{number} seleccionado", selectAll: "Seleccionar todo ({total})" },
-  "es-MX": { allSelected: "Todos seleccionados ({total})", numberOfTotalSelected: "{number} de {total} seleccionados", numbersSelected: "{número} seleccionado", selectAll: "Seleccionar todo ({total})" },
-  "fr-FR": { allSelected: "Tous sélectionnés ({total})", numberOfTotalSelected: "{number} sélectionné(s) sur {total}", numbersSelected: "{number} sélectionné(s)", selectAll: "Tout sélectionner ({total})" },
-  "it-IT": { allSelected: "Tutti i selezionati ({total})", numberOfTotalSelected: "{numero} su {totale} selezionati", numbersSelected: "{numero} selezionati", selectAll: "Seleziona tutto ({total})" },
-  "ja-JP": { allSelected: "すべて選択 ({total})", numberOfTotalSelected: "{total}件中{number}件を選択済み", numbersSelected: "{number}件選択済み", selectAll: "すべて選択 ({total})" },
-  "pt-BR": { allSelected: "Todos os selecionados ({total})", numberOfTotalSelected: "{number} de {total} selecionados", numbersSelected: "{number} selecionados", selectAll: "Selecionar tudo ({total})" },
-  "zh-CN": { allSelected: "全部已选 ({total})", numberOfTotalSelected: "已选择 {number} 个，共 {total} 个", numbersSelected: "已选择 {number} 个", selectAll: "选择全部（{total}）个" }
-}, rl = { key: 0 }, cl = ["role"], dl = {
-  key: 1,
-  class: "b-listbox-multi-select__divider",
-  "aria-hidden": "true"
-}, ul = { i18n: { messages: qe } }, bl = /* @__PURE__ */ Q({
-  ...ul,
-  __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: o }) {
-    const l = e, a = o, { t: i, n: r } = $e({ messages: qe }), v = mt(), E = pt(), n = b(
-      () => ({
-        "aria-label": E["aria-label"]?.toString(),
-        "aria-busy": E["aria-busy"]?.toString(),
-        "aria-atomic": E["aria-atomic"]?.toString(),
-        "aria-live": E["aria-live"]?.toString(),
-        "aria-multiselectable": !0
-      })
-    ), d = k(null), s = k(null), f = k(null), y = k(null), h = b(() => l.selectedValues.map(({ value: u }) => u)), { isMultiLevelSelect: M, flattenedItemsList: z } = il(ue(l, "items")), X = b(() => M.value && !l.staticCategories), O = b(() => X.value ? "tree" : "listbox"), _ = b(() => X.value ? "treeitem" : "option"), $ = (u) => {
-      const g = l.isOptionDisabled(u), p = h.value?.includes(u.value) || !1;
-      return { isDisabled: g, isPreSelected: p };
-    }, L = b(() => {
-      if (l.searching && M)
-        return l.items;
-      const u = z.value.filter((g) => {
-        const { isDisabled: p, isPreSelected: P } = $(g);
-        return p && P || !p;
-      });
-      return l.selectedValues.forEach((g) => {
-        u.find((p) => p.value === g.value) || u.push(g);
-      }), u;
-    }), T = b(
-      () => L.value?.filter((u) => u.items && M.value && l.searching ? u.items.filter(
-        (p) => (l.selectedValues ?? []).includes(p.value)
-      ).length === u.items.length : h.value?.includes(u.value))
-    ), G = () => M.value && !l.searching ? z.value.length : l.items.length, S = b(() => {
-      const u = L.value.length, g = G(), p = T.value?.length || 0;
-      return p === 0 ? i("selectAll", { total: r(u) }) : p === g ? i("allSelected", { total: r(g) }) : p <= g ? i("numberOfTotalSelected", { number: r(p), total: r(g) }) : i("numbersSelected", { number: r(p) });
-    }), D = (u) => {
-      const g = (P) => {
-        const { isDisabled: I, isPreSelected: ve } = $(P);
-        return I && ve || !I;
-      }, p = u.filter(g).filter((P) => !h.value.includes(P.value));
-      a("select", [...l.selectedValues, ...p]);
-    }, U = (u) => {
-      const g = (I) => {
-        const { isDisabled: ve, isPreSelected: dt } = $(I);
-        return !(ve && dt);
-      }, p = u.filter(g).map(({ value: I }) => I), P = l.selectedValues.filter((I) => !p?.includes(I.value));
-      a("select", P);
-    }, le = () => {
-      D(z.value);
-    }, Ie = () => {
-      U(z.value);
-    }, { isAllSelected: se, isIndeterminate: he, toggleSelectAll: Le } = Ke(
-      T,
-      L,
-      le,
-      Ie
-    ), Ce = b(() => he.value ? "mixed" : `${se.value}`), j = k(se.value), oe = () => {
-      j.value = !j.value, Le(j.value);
-    };
-    Se(se, () => {
-      j.value = se.value;
-    });
-    const Xe = (u) => {
-      D(u.items);
-    }, Be = (u) => {
-      U(u.items);
-    }, me = (u, g) => {
-      let p = !1;
-      const P = l.selectedValues.filter(({ value: I }) => g.value === I ? (p = !0, !1) : !0);
-      p || P.push(g), a(u, P);
-    }, Je = b(() => {
-      if (!M.value)
-        return l.selectedValues;
-      const u = (I) => h.value.includes(I.value), g = (I) => !l.staticCategories && I.every((ve) => u(ve));
-      return l.items.flatMap(
-        (I) => I.items && !g(I.items) ? I.items : I
-      ).filter((I) => I.items ? !0 : u(I));
-    }), Ze = b(() => {
-      const u = ["automatic", "button"].includes(l.lazyLoadType), g = l.selectedValues?.length > 0 && T.value?.length !== z.value?.length;
-      return u && l.hasMoreItems ? !!l.selectedValues?.length : g;
-    }), Ae = b(() => ["automatic", "button"].includes(l.lazyLoadType) ? !l.hasMoreItems : !0), pe = k([]), { visibleDomOptions: Re, updateVisibleDomOptions: Qe } = je(
-      d,
-      ue(l, "items"),
-      _
-    ), et = (u) => {
-      pe.value.includes(u) ? pe.value = pe.value.filter((g) => g !== u) : pe.value.push(u), ke(() => {
-        Qe();
-      });
-    }, tt = (u) => {
-      Re.value[u]?.focus();
-    }, {
-      moveToNextElement: lt,
-      moveToPreviousElement: st,
-      moveToFirstElement: ot,
-      moveToLastElement: at,
-      preventDefault: Me,
-      focusedIndex: Ne,
-      setListboxFocusedIndex: nt
-    } = We(
-      {
-        items: Re
-      },
-      tt
-    ), it = {
-      [F.ARROW_UP]: (u) => st(u),
-      [F.ARROW_DOWN]: (u) => lt(u),
-      [F.HOME]: ot,
-      [F.END]: at
-    };
-    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: nt
-    });
-    const rt = {
-      [F.ARROW_UP]: Me,
-      [F.ARROW_DOWN]: Me
-    }, ct = b(() => {
-      let u = Ae.value ? 1 : 0;
-      const g = {};
-      return l.items.forEach((p) => {
-        let P = pe.value.includes(p.value);
-        p.items ? (l.staticCategories ? P = !0 : g[p.value] = u++, P && p.items.forEach((I) => g[I.value] = u++)) : g[p.value] = u++;
-      }), g;
-    });
-    return (u, g) => (c(), C("div", {
-      ref_key: "listboxRef",
-      ref: d,
-      class: "b-listbox-multi-select"
-    }, [
-      Ze.value ? (c(), C("div", rl, [
-        de((c(), C("ul", w({ class: "b-listbox-multi-select__chips" }, ee(rt, !0)), [
-          (c(!0), C(te, null, H(Je.value, (p) => (c(), C("li", {
-            key: p.value
-          }, [
-            x(N(ht), {
-              ref_for: !0,
-              ref_key: "selectedListboxItemsRef",
-              ref: f,
-              disabled: u.isOptionDisabled(p),
-              label: p.label,
-              condensed: "",
-              onClick: (P) => p.items ? Be(p) : me("select", p)
-            }, null, 8, ["disabled", "label", "onClick"])
-          ]))), 128))
-        ], 16)), [
-          [N(Oe)]
-        ]),
-        g[4] || (g[4] = V("hr", {
-          class: "b-listbox-multi-select__divider",
-          "aria-hidden": "true"
-        }, null, -1))
-      ])) : J("", !0),
-      de((c(), C("div", w(n.value, { role: O.value }, ee(it, !0)), [
-        Ae.value ? (c(), R(N(Te), {
-          key: 0,
-          ref_key: "selectAllListboxItemsRef",
-          ref: s,
-          class: "b-listbox-multi-select__option",
-          tabindex: N(Ne) === 0 ? 0 : -1,
-          "aria-selected": Ce.value !== "false",
-          "aria-checked": Ce.value,
-          role: _.value,
-          onClick: oe,
-          onEnterPressed: oe,
-          onSpacePressed: ce(oe, ["prevent"])
-        }, {
-          default: A(() => [
-            x(N(De), {
-              checked: N(se),
-              indeterminate: N(he)
-            }, null, 8, ["checked", "indeterminate"]),
-            x(N(be), { el: "span" }, {
-              default: A(() => [
-                K(Y(S.value), 1)
-              ]),
-              _: 1
-            })
-          ]),
-          _: 1
-        }, 8, ["tabindex", "aria-selected", "aria-checked", "role"])) : J("", !0),
-        Ae.value ? (c(), C("hr", dl)) : J("", !0),
-        x(N(nl), {
-          ref_key: "listboxItemsRef",
-          ref: y,
-          items: u.items,
-          "is-option-disabled": u.isOptionDisabled,
-          "is-multi-level": N(M),
-          "static-categories": u.staticCategories,
-          searching: u.searching,
-          "selected-items-list": h.value,
-          "focused-index": N(Ne),
-          "items-index": ct.value,
-          role: _.value,
-          onToggleCheckboxSelection: g[0] || (g[0] = (p) => me("select", p)),
-          onSelectCategory: Xe,
-          onUnselectCategory: Be,
-          onToggleCategoryVisibility: et,
-          onSpacePressed: g[1] || (g[1] = (p) => me(N(m).SPACE, p)),
-          onTabPressed: g[2] || (g[2] = (p) => me(N(m).TAB, p)),
-          onEnterPressed: g[3] || (g[3] = (p) => me(N(m).ENTER, p))
-        }, re({ _: 2 }, [
-          H(N(v), (p, P) => ({
-            name: P,
-            fn: A((I) => [
-              W(u.$slots, P, ie(fe(I)), void 0, !0)
-            ])
-          }))
-        ]), 1032, ["items", "is-option-disabled", "is-multi-level", "static-categories", "searching", "selected-items-list", "focused-index", "items-index", "role"])
-      ], 16, cl)), [
-        [N(Oe)]
-      ])
-    ], 512));
-  }
-}), ze = /* @__PURE__ */ q(bl, [["__scopeId", "data-v-4abd31b6"]]), ml = (e, t = 300) => {
-  let o;
-  return (...a) => {
-    o && clearTimeout(o), o = setTimeout(() => e(...a), t);
-  };
-}, Ye = {
-  "de-DE": { loading: "Laden", showMore: "Mehr anzeigen" },
-  "en-GB": { loading: "Loading", showMore: "Show more" },
-  "en-US": { loading: "Loading", showMore: "Show more" },
-  "es-ES": { loading: "Cargando", showMore: "Mostrar más" },
-  "es-MX": { loading: "Cargando", showMore: "Mostrar más" },
-  "fr-FR": { loading: "Chargement", showMore: "Afficher plus" },
-  "it-IT": { loading: "Caricamento", showMore: "Mostra di più" },
-  "ja-JP": { loading: "読み込み中", showMore: "さらに表示" },
-  "pt-BR": { loading: "Carregando", showMore: "Mostrar mais" },
-  "zh-CN": { loading: "正在加载", showMore: "显示更多" }
-}, pl = 36, vl = Q({
-  name: "bento-listbox",
-  components: {
-    BentoEmptyState: gt,
-    BentoListboxSingleSelect: Yt,
-    BentoListboxMultiSelect: ze,
-    BentoTypography: be,
-    BentoLoadingIndicator: vt,
-    BentoLoadingButton: Ot
-  },
-  directives: { BentoKeyboardNavigationDirective: Oe },
-  i18n: { messages: Ye },
-  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: ne.NONE,
-      validator: (e) => Object.values(ne).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: ze.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: [
-    m.SELECT,
-    m.SPACE,
-    m.SHOW_MORE,
-    m.ENTER,
-    m.ESCAPE,
-    m.TAB
-  ],
-  setup(e, { emit: t, slots: o }) {
-    const l = k([]), a = ue(e, "items"), { t: i } = $e({ messages: Ye }), r = b(() => e.lazyLoadType !== ne.AUTOMATIC), v = b(() => e.lazyLoadType === ne.AUTOMATIC), E = () => typeof e?.virtualScroll == "object" && e?.virtualScroll?.itemHeight ? e.virtualScroll.itemHeight : pl, n = !e?.multiple && e?.virtualScroll !== !1 && e?.lazyLoadType === "none", {
-      containerRef: d,
-      containerProps: s,
-      onScroll: f,
-      list: y,
-      wrapperProps: h,
-      scrollToIndex: M,
-      startIndex: z
-    } = Tt(a, {
-      itemHeight: E(),
-      // Disable virtual scrolling if not enabled or if lazy loading is enabled or if multi-select
-      disabled: !n
-    }), X = b(() => n ? a.value.length : 0), O = b(
-      () => e.componentLoading !== void 0 || r.value ? "true" : void 0
-    ), _ = b(
-      () => r.value && e.loading || e.componentLoading ? "true" : "false"
-    ), $ = b(
-      () => r.value || e.componentLoading !== void 0 ? "polite" : void 0
-    ), L = b(
-      () => ({
-        "aria-label": e.ariaLabel,
-        "aria-busy": _.value,
-        "aria-atomic": O.value,
-        "aria-live": $.value
-      })
-    ), T = b(
-      () => e.componentLoading ? {
-        ...L.value,
-        role: "alert"
-      } : {}
-    ), G = (j) => (oe) => {
-      t(j, oe);
-    }, S = () => {
-      t(m.SHOW_MORE);
-    }, D = ml(() => {
-      const j = d.value;
-      if (!j)
-        return;
-      const oe = Math.round(j.scrollTop) + j.clientHeight >= j.scrollHeight;
-      e.hasMoreItems && oe && !e.loading && S();
-    }), U = () => {
-      v.value ? D() : f();
-    }, le = b(() => e.items?.length === 0), Ie = b(
-      () => e.lazyLoadType === ne.BUTTON && e.hasMoreItems
-    ), se = b(
-      () => e.loading ? we.LOADING : we.START
-    ), he = b(() => e.loading ? i("loading") : i("showMore")), Le = b(() => ({
-      ...e.emptyState,
-      variant: "condensed"
-    })), Ce = {
-      [m.SELECT]: G(m.SELECT),
-      [m.SPACE]: G(m.SPACE),
-      [m.TAB]: G(m.TAB),
-      [m.ENTER]: G(m.ENTER)
-    };
-    return {
-      // Refs
-      listboxRef: d,
-      listboxItemRef: l,
-      // a11y
-      ariaAttributes: L,
-      listboxContainerAttributes: T,
-      // Values
-      containerProps: s,
-      isSearchResultEmpty: le,
-      limitedEmptyStateProps: Le,
-      loadingButtonState: se,
-      slots: o,
-      shouldDisplayShowMoreButton: Ie,
-      showMoreButtonText: he,
-      virtualisedItems: y,
-      wrapperProps: h,
-      // Virtual scroll
-      totalItemCount: X,
-      scrollToIndex: M,
-      virtualScrollStartIndex: z,
-      // Enums
-      BentoKeyboardNavigationKeyDownEvent: F,
-      BentoListboxEvent: m,
-      // Methods
-      onListboxContainerScroll: U,
-      onOptionSelected: G,
-      emitShowMore: S,
-      listboxListeners: Ce
-    };
-  }
-}), gl = ["id"], fl = {
-  key: 0,
-  class: "b-listbox__loading-filtered-items"
-}, yl = {
-  key: 1,
-  class: "b-listbox__empty-search-message"
-}, Sl = {
-  key: 2,
-  class: "b-listbox__lazy-load"
-}, hl = {
-  key: 3,
-  class: "b-listbox__lazy-load"
-};
-function Cl(e, t, o, l, a, i) {
-  const r = B("bento-loading-indicator"), v = B("bento-empty-state"), E = B("bento-typography"), n = B("bento-listbox-multi-select"), d = B("bento-listbox-single-select"), s = B("bento-loading-button"), f = Fe("bento-keyboard-navigation-directive");
-  return de((c(), C("div", w({
-    id: e.id,
-    ref: "listboxRef",
-    class: "b-listbox",
-    tabindex: "-1"
-  }, e.listboxContainerAttributes, {
-    style: e.containerProps?.style,
-    "data-testid": "listbox-container",
-    onScroll: t[0] || (t[0] = (...y) => e.onListboxContainerScroll && e.onListboxContainerScroll(...y))
-  }), [
-    V("div", ie(fe(e.wrapperProps)), [
-      e.componentLoading ? (c(), C("div", fl, [
-        x(r)
-      ])) : e.isSearchResultEmpty ? (c(), C("div", yl, [
-        e.emptyState ? (c(), R(v, ie(w({ key: 0 }, e.limitedEmptyStateProps)), null, 16)) : (c(), R(E, {
-          key: 1,
-          el: "span"
-        }, {
-          default: A(() => [
-            K(Y(e.noResultsMessage), 1)
-          ]),
-          _: 1
-        }))
-      ])) : (c(), C(te, { key: 2 }, [
-        e.multiple ? (c(), R(n, 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
-        }, ee(e.listboxListeners)), re({ _: 2 }, [
-          H(e.slots, (y, h) => ({
-            name: h,
-            fn: A((M) => [
-              W(e.$slots, h, ie(fe(M)), void 0, !0)
-            ])
-          }))
-        ]), 1040, ["has-more-items", "items", "lazy-load-type", "static-categories", "selected-values", "searching", "is-option-disabled"])) : (c(), R(d, w({
-          key: 1,
-          ref: "listboxItemRef",
-          items: e.virtualisedItems,
-          "total-item-count": e.totalItemCount,
-          "scroll-to-index": e.scrollToIndex,
-          "virtual-scroll-start-index": e.virtualScrollStartIndex
-        }, e.ariaAttributes, {
-          "selected-value": e.selectedValue,
-          "static-categories": e.staticCategories,
-          "is-option-disabled": e.isOptionDisabled
-        }, ee(e.listboxListeners)), re({ _: 2 }, [
-          H(e.slots, (y, h) => ({
-            name: h,
-            fn: A((M) => [
-              W(e.$slots, h, ie(fe(M)), void 0, !0)
-            ])
-          }))
-        ]), 1040, ["items", "total-item-count", "scroll-to-index", "virtual-scroll-start-index", "selected-value", "static-categories", "is-option-disabled"])),
-        e.shouldDisplayShowMoreButton ? (c(), C("div", Sl, [
-          x(s, {
-            state: e.loadingButtonState,
-            variant: "secondary",
-            onClickCapture: e.emitShowMore
-          }, {
-            default: A(() => [
-              K(Y(e.showMoreButtonText), 1)
-            ]),
-            _: 1
-          }, 8, ["state", "onClickCapture"])
-        ])) : e.loading ? (c(), C("div", hl, [
-          x(r)
-        ])) : J("", !0)
-      ], 64))
-    ], 16)
-  ], 16, gl)), [
-    [f]
-  ]);
-}
-const Gl = /* @__PURE__ */ q(vl, [["render", Cl], ["__scopeId", "data-v-7026ea79"]]), _e = (e, t) => {
-  for (const o of e) {
-    if (o.value === t)
-      return o;
-    if (o.items) {
-      const l = _e(o.items, t);
-      if (l)
-        return l;
-    }
-  }
-  return null;
-}, El = (e) => typeof e == "object" && e !== null && "value" in e && "label" in e, Vl = (e, t, o, l) => {
-  const a = k([]), i = k(), r = (d) => {
-    o.value ? i.value = d.map(({ value: s }) => s) : i.value = d.length > 0 ? d[0].value : null;
-  }, v = (d) => {
-    o.value ? i.value = d.map(({ value: s, label: f }) => ({ value: s, label: f })) : i.value = d.length > 0 ? { value: d[0].value, label: d[0].label } : null;
-  }, E = (d) => {
-    a.value = d, l?.value ? v(d) : r(d);
-  }, n = () => {
-    a.value = [], i.value = null;
-  };
-  return Se(
-    () => t.value,
-    () => {
-      if (!t.value && t.value !== 0) {
-        n();
-        return;
-      }
-      const d = !Array.isArray(t.value), s = [...a.value];
-      n();
-      const f = (y) => {
-        if (El(y))
-          a.value.push(y);
-        else {
-          let h = _e(e.value, y);
-          h || (h = _e(s, y)), h || (h = { value: y, label: y.toString() }), a.value.push(h);
-        }
-      };
-      if (d) {
-        const y = t.value;
-        f(y), l?.value ? v(a.value) : r(a.value);
-        return;
-      }
-      t.value.forEach(f), l?.value ? v(a.value) : r(a.value);
-    },
-    { immediate: !0 }
-  ), {
-    // Values
-    cachedSelectedListboxOptions: a,
-    cachedListboxSelectedValues: i,
-    // Methods
-    resetCache: n,
-    setCachedValues: E
-  };
-};
-export {
-  m as B,
-  Mt as C,
-  De as D,
-  ne as a,
-  Gl as b,
-  il as c,
-  ml as d,
-  je as e,
-  Vl as u
-};
-//# sourceMappingURL=use-cached-selected-values.DOw5IKdU.js.map