@adyen/bento-vue3 1.90.0 → 1.92.0

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

@@ -1,1652 +0,0 @@
-import { computed as b, ref as I, onMounted as ut, onUnmounted as bt, watch as fe, defineComponent as J, resolveComponent as _, openBlock as d, createElementBlock as y, createVNode as N, withCtx as L, createTextVNode as K, toDisplayString as V, createElementVNode as G, renderSlot as W, mergeProps as w, withKeys as be, createCommentVNode as q, createBlock as A, withModifiers as ae, normalizeProps as oe, guardReactiveProps as me, withDirectives as ne, vShow as ze, nextTick as Ye, toRef as pe, resolveDirective as Ue, toHandlers as ee, Fragment as te, renderList as j, createSlots as ge, normalizeClass as ve, unref as B, useSlots as mt, useAttrs as pt } from "vue";
-import { B as F, a as he } from "./keyboard-navigation.DWmhelVv.js";
-import { B as ie } from "./typography.B3J6_tYk.js";
-import { B as gt } from "./loading-indicator.BPol9I84.js";
-import { B as vt } from "./empty-state.DT4sFyjB.js";
-import { u as Ie } from "./index.B875RXHM.js";
-import { d as ft } from "./debounce.DUTu11PS.js";
-import { o as yt } from "./resize.Bqks3WUm.js";
-import { C as Se, N as St } from "./minus-small.CnYLTuSv.js";
-import { C as ht } from "./checkmark-small.CRuZauJc.js";
-/* empty css              */
-import { _ as H } from "./_plugin-vue_export-helper.CHgC5LLL.js";
-import { B as Ct } from "./chip.DFldnqfz.js";
-import { C as Et } from "./chevron-down.XeE-LBV_.js";
-import { C as Ot } from "./chevron-up.Cmgl2a3x.js";
-import { g as Me } from "./generate-uid.DBWe4g6T.js";
-import { a as Tt, b as Pe } from "./button-actions.Bh_PZ_fV.js";
-import "../assets/use-cached-selected-values.css";
-const Fe = (e, t, o, s) => {
-  const r = 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: r,
-    isIndeterminate: i,
-    toggleSelectAll: (f) => {
-      f ? o() : s();
-    }
-  };
-};
-function Lt(e, { disabled: t, itemHeight: o, overscan: s = 5, prefixHeight: r }) {
-  const i = I(null), a = I([]), f = I(0), S = I(0), n = I(0);
-  let u;
-  const l = b(() => {
-    const k = typeof o == "number" ? e.value.length * o : e.value.reduce((T, O, D) => T + o(D), 0), $ = typeof o == "number" ? f.value * o : e.value.slice(0, f.value).reduce((T, O, D) => T + o(D), 0);
-    return {
-      style: {
-        marginTop: `${$}px`,
-        height: `${k - $}px`
-      }
-    };
-  }), m = () => {
-    const k = r?.value ?? 0, $ = Math.max(i.value.scrollTop - k, 0);
-    if (typeof o == "number")
-      return Math.floor($ / o);
-    let T = 0, O = 0;
-    for (let D = 0; D < e.value.length; D += 1) {
-      const z = o(D);
-      if (T += z, T >= $) {
-        O = D;
-        break;
-      }
-    }
-    return O;
-  }, C = () => {
-    if (n.value = i.value.clientHeight, typeof o == "number")
-      return Math.ceil(n.value / o);
-    const k = f.value ?? 0;
-    let $ = 0, T = 0;
-    for (let O = k; O < e.value.length; O += 1) {
-      const D = o(O);
-      if ($ += D, T = O, $ > n.value)
-        break;
-    }
-    return T - k;
-  }, h = () => {
-    if (i.value) {
-      const k = C();
-      f.value = m(), S.value = Math.min(f.value + k + s, e.value.length), a.value = e.value.slice(f.value, S.value);
-    }
-  }, R = () => {
-    h();
-  };
-  t || (ut(() => {
-    i.value && (n.value = i.value.clientHeight, u = yt(i.value, ({ clientHeight: k }) => {
-      n.value = k, h();
-    }), h());
-  }), bt(() => {
-    u?.disconnect();
-  }), fe(
-    () => e.value,
-    () => {
-      h();
-    }
-  ));
-  const x = {
-    ref: i,
-    style: { overflowY: "auto" }
-  };
-  return t ? {
-    containerRef: i,
-    containerProps: x,
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    onScroll: () => {
-    },
-    list: e
-  } : {
-    containerRef: i,
-    containerProps: x,
-    onScroll: R,
-    list: a,
-    wrapperProps: l
-  };
-}
-var p = /* @__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))(p || {}), le = /* @__PURE__ */ ((e) => (e.AUTOMATIC = "automatic", e.BUTTON = "button", e.NONE = "none", e))(le || {});
-const It = J({
-  name: "bento-listbox-static-category",
-  components: {
-    BentoTypography: ie
-  },
-  props: {
-    /**
-     * Category label text
-     */
-    categoryLabel: {
-      type: String,
-      required: !0
-    }
-  }
-}), _t = ["aria-label"];
-function At(e, t, o, s, r, i) {
-  const a = _("bento-typography");
-  return d(), y("div", {
-    class: "b-listbox-single-select-category",
-    role: "group",
-    "aria-label": e.categoryLabel
-  }, [
-    N(a, {
-      variant: "caption",
-      el: "span",
-      class: "b-listbox-single-select-category__label-text",
-      "aria-hidden": "true"
-    }, {
-      default: L(() => [
-        K(V(e.categoryLabel), 1)
-      ]),
-      _: 1
-    }),
-    G("div", null, [
-      W(e.$slots, "default", {}, void 0, !0)
-    ])
-  ], 8, _t);
-}
-const kt = /* @__PURE__ */ H(It, [["render", At], ["__scopeId", "data-v-27c4e09a"]]), $t = J({
-  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: [p.CLICK, p.ENTER, p.SPACE, p.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: p,
-      // Values
-      conditionalClasses: o,
-      // Events
-      onClick: (i) => {
-        t(p.CLICK, i);
-      },
-      onOptionSelected: (i, a) => {
-        t(i, a);
-      }
-    };
-  }
-});
-function Dt(e, t, o, s, r, i) {
-  return d(), y("div", w({
-    class: ["b-listbox-option", e.conditionalClasses],
-    role: "option"
-  }, e.$attrs, {
-    onClick: t[0] || (t[0] = (...a) => e.onClick && e.onClick(...a)),
-    onKeydown: [
-      t[1] || (t[1] = be((a) => e.onOptionSelected(e.BentoListboxEvent.ENTER, a), ["enter"])),
-      t[2] || (t[2] = be((a) => e.onOptionSelected(e.BentoListboxEvent.SPACE, a), ["space"])),
-      t[3] || (t[3] = be((a) => e.onOptionSelected(e.BentoListboxEvent.TAB, a), ["tab"]))
-    ]
-  }), [
-    W(e.$slots, "default", {}, void 0, !0)
-  ], 16);
-}
-const Ce = /* @__PURE__ */ H($t, [["render", Dt], ["__scopeId", "data-v-1495b1db"]]);
-let Ne = 0;
-const Bt = {
-  beforeCreate() {
-    this.uuid = Ne.toString(), Ne += 1;
-  }
-}, Rt = { key: 0 };
-function Mt(e, t, o, s, r, i) {
-  return d(), y("svg", w({ role: "img" }, e.$attrs, {
-    class: "ui-assets-icons-16",
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "16",
-    height: "16",
-    fill: "none"
-  }), [
-    e.$attrs["svg-title"] ? (d(), y("title", Rt, V(e.$attrs["svg-title"]), 1)) : q("", !0),
-    t[0] || (t[0] = G("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 Pt = /* @__PURE__ */ H(Bt, [["render", Mt]]), Nt = J({
-  name: "bento-listbox-single-select-option",
-  components: {
-    BentoListboxOption: Ce,
-    BentoTypography: ie,
-    CheckmarkIcon: Pt
-  },
-  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: [p.ENTER, p.SELECT, p.SPACE, p.TAB],
-  setup(e, { emit: t }) {
-    const o = (a) => {
-      e.disabled || t(a, e.option);
-    }, s = b(() => e.disabled ? !0 : null), r = b(() => e.selected ? !0 : null), i = b(() => e.disabled ? -1 : 0);
-    return {
-      // Values
-      ariaDisabled: s,
-      ariaSelected: r,
-      tabIndex: i,
-      // Enums
-      BentoListboxEvent: p,
-      // Events
-      onOptionSelected: o
-    };
-  }
-}), wt = { class: "b-listbox-single-select-option__text" }, Gt = { class: "b-listbox-single-select-option__check-icon" };
-function xt(e, t, o, s, r, i) {
-  const a = _("bento-typography"), f = _("checkmark-icon"), S = _("bento-listbox-option");
-  return d(), A(S, {
-    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] = ae((n) => e.onOptionSelected(e.BentoListboxEvent.SPACE), ["prevent"])),
-    onTabPressed: t[3] || (t[3] = (n) => e.onOptionSelected(e.BentoListboxEvent.TAB))
-  }, {
-    default: L(() => [
-      W(e.$slots, "default", oe(me(e.option)), () => [
-        G("span", wt, [
-          N(a, { el: "span" }, {
-            default: L(() => [
-              K(V(e.option.label), 1)
-            ]),
-            _: 1
-          }),
-          e.option.description ? (d(), A(a, {
-            key: 0,
-            class: "b-listbox-single-select-option__description",
-            el: "span"
-          }, {
-            default: L(() => [
-              K(V(e.option.description), 1)
-            ]),
-            _: 1
-          })) : q("", !0)
-        ])
-      ], !0),
-      G("span", Gt, [
-        ne(N(f, { "svg-title": "selected" }, null, 512), [
-          [ze, e.selected]
-        ])
-      ])
-    ]),
-    _: 3
-  }, 8, ["disabled", "selected", "aria-selected", "aria-disabled", "tabindex"]);
-}
-const Vt = /* @__PURE__ */ H(Nt, [["render", xt], ["__scopeId", "data-v-4f41af07"]]), Ke = ({ items: e }, t) => {
-  const o = b(() => e.value.length - 1), s = I(0), r = (m) => {
-    switch (m) {
-      case "increase":
-        s.value += 1;
-        break;
-      case "decrease":
-        s.value -= 1;
-        break;
-    }
-  }, i = ({ edgeCaseItem: m }, C) => {
-    s.value !== m && (r(C), t(s.value));
-  }, a = (m) => {
-    l(m), i(
-      {
-        edgeCaseItem: o.value
-      },
-      "increase"
-      /* INCREASE */
-    );
-  }, f = (m) => {
-    l(m), i(
-      {
-        edgeCaseItem: 0
-      },
-      "decrease"
-      /* DECREASE */
-    );
-  }, S = () => {
-    s.value = 0, t(s.value);
-  }, n = () => {
-    s.value = o.value, t(s.value);
-  }, u = (m) => {
-    s.value = m;
-  }, l = (m) => {
-    m?.detail?.preventDefault();
-  };
-  return {
-    moveToFirstElement: S,
-    moveToLastElement: n,
-    moveToNextElement: a,
-    moveToPreviousElement: f,
-    setListboxFocusedIndex: u,
-    preventDefault: l,
-    focusedIndex: s
-  };
-}, We = (e, t, o = I("option"), s = !0) => {
-  const r = I([]), i = async () => {
-    if (!e.value || e.value.nodeType === Node.COMMENT_NODE)
-      return;
-    const a = Array.from(e.value.querySelectorAll(`[role="${o.value}"]`));
-    r.value = s ? a.filter((f) => f.checkVisibility()) : a;
-  };
-  return fe(
-    t,
-    () => {
-      Ye(() => {
-        i();
-      });
-    },
-    { immediate: !0 }
-  ), {
-    visibleDomOptions: r,
-    updateVisibleDomOptions: i
-  };
-}, zt = J({
-  name: "bento-listbox-single-select",
-  components: {
-    BentoListboxSingleSelectCategory: kt,
-    BentoListboxSingleSelectOption: Vt
-  },
-  directives: { BentoKeyboardNavigationDirective: he },
-  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: [p.SELECT, p.ENTER, p.SPACE, p.TAB],
-  setup(e, { emit: t, expose: o, slots: s, attrs: r }) {
-    const i = I(null), a = I([]), f = b(() => !!e.selectedValue?.length && e.selectedValue.at(0)), S = b(
-      () => ({
-        "aria-label": r["aria-label"]?.toString(),
-        "aria-busy": r["aria-busy"]?.toString(),
-        "aria-atomic": r["aria-atomic"]?.toString(),
-        "aria-live": r["aria-live"]?.toString()
-      })
-    ), n = b(() => !!e.items.some(({ items: O }) => !!O)), u = (O) => (D) => {
-      t(O, [D]);
-    }, { visibleDomOptions: l } = We(i, pe(e, "items"), I("option"), !1), m = (O) => {
-      l.value[O]?.focus();
-    }, {
-      moveToNextElement: C,
-      moveToPreviousElement: h,
-      moveToFirstElement: R,
-      moveToLastElement: x,
-      setListboxFocusedIndex: k
-    } = Ke(
-      {
-        items: l
-      },
-      m
-    ), $ = {
-      [F.ARROW_UP]: h,
-      [F.ARROW_DOWN]: C,
-      [F.HOME]: R,
-      [F.END]: x
-    }, T = {
-      [p.SELECT]: u(p.SELECT),
-      [p.SPACE]: u(p.SPACE),
-      [p.TAB]: u(p.TAB),
-      [p.ENTER]: u(p.ENTER)
-    };
-    return o({
-      /**
-       * 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: p,
-      // Values
-      listboxRef: i,
-      listboxItemRef: a,
-      selectedItem: f,
-      slots: s,
-      ariaAttributes: S,
-      // Computed
-      hasCategories: n,
-      // Methods
-      onOptionSelected: u,
-      // Keyboard navigation
-      listboxListeners: $,
-      listboxOptionListeners: T
-    };
-  }
-});
-function Yt(e, t, o, s, r, i) {
-  const a = _("bento-listbox-single-select-option"), f = _("bento-listbox-single-select-category"), S = Ue("bento-keyboard-navigation-directive");
-  return ne((d(), y("div", w({ ref: "listboxRef" }, e.ariaAttributes, { role: "listbox" }, ee(e.listboxListeners, !0)), [
-    e.hasCategories && e.staticCategories ? (d(!0), y(te, { key: 0 }, j(e.items, (n) => (d(), A(f, {
-      key: n.value,
-      "category-label": n.label
-    }, {
-      default: L(() => [
-        (d(!0), y(te, null, j(n.items, (u) => (d(), A(a, w({
-          key: u.value,
-          ref_for: !0,
-          ref: "listboxItemRef",
-          role: "option",
-          option: u,
-          disabled: e.isOptionDisabled ? e.isOptionDisabled(u) : null,
-          selected: u.value === e.selectedItem.value
-        }, ee(e.listboxOptionListeners)), ge({ _: 2 }, [
-          j(e.slots, (l, m) => ({
-            name: m,
-            fn: L((C) => [
-              W(e.$slots, m, w({ ref_for: !0 }, C))
-            ])
-          }))
-        ]), 1040, ["option", "disabled", "selected"]))), 128))
-      ]),
-      _: 2
-    }, 1032, ["category-label"]))), 128)) : (d(!0), y(te, { key: 1 }, j(e.items, (n) => (d(), A(a, 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)), ge({ _: 2 }, [
-      j(e.slots, (u, l) => ({
-        name: l,
-        fn: L((m) => [
-          W(e.$slots, l, w({ ref_for: !0 }, m))
-        ])
-      }))
-    ]), 1040, ["option", "disabled", "selected"]))), 128))
-  ], 16)), [
-    [S]
-  ]);
-}
-const Ut = /* @__PURE__ */ H(zt, [["render", Yt]]);
-let we = 0;
-const Ft = {
-  beforeCreate() {
-    this.uuid = we.toString(), we += 1;
-  }
-}, Kt = { key: 0 };
-function Wt(e, t, o, s, r, i) {
-  return d(), y("svg", w({ role: "img" }, e.$attrs, {
-    class: "ui-assets-icons-16",
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "16",
-    height: "16",
-    fill: "none"
-  }), [
-    e.$attrs["svg-title"] ? (d(), y("title", Kt, V(e.$attrs["svg-title"]), 1)) : q("", !0),
-    t[0] || (t[0] = G("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] = G("path", {
-      fill: "#001222",
-      d: "M13.9307 5.75L8.87012 10.8105L7.80957 9.75L12.8701 4.68945L13.9307 5.75Z"
-    }, null, -1))
-  ], 16);
-}
-const Ht = /* @__PURE__ */ H(Ft, [["render", Wt]]), jt = {}, qt = /* @__PURE__ */ J({
-  ...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--${Se.DISABLED}`]: t.disabled
-    })), s = b(() => ({
-      [`b-checkbox-input__outline--${Se.UNCHECKED}`]: !t.checked && !t.indeterminate && !t.allSelected,
-      [`b-checkbox-input__outline--${Se.CHECKED}`]: (t.checked || t.allSelected) && !t.indeterminate,
-      [`b-checkbox-input__outline--${Se.INDETERMINATE}`]: t.indeterminate
-    }));
-    return (r, i) => (d(), y("div", {
-      class: ve(["b-checkbox-input", o.value]),
-      role: "presentation"
-    }, [
-      r.indeterminate ? (d(), A(B(St), {
-        key: 0,
-        class: "b-checkbox-input__icon",
-        "svg-title": "",
-        "aria-hidden": "true"
-      })) : r.allSelected ? (d(), A(B(Ht), {
-        key: 1,
-        class: "b-checkbox-input__icon",
-        "svg-title": "",
-        "aria-hidden": "true",
-        "data-testid": "decorative-checkbox-double-checkmark-icon"
-      })) : r.checked ? (d(), A(B(ht), {
-        key: 2,
-        class: "b-checkbox-input__icon",
-        "svg-title": "",
-        "aria-hidden": "true"
-      })) : q("", !0),
-      G("div", {
-        class: ve(["b-checkbox-input__outline", s.value])
-      }, null, 2)
-    ], 2));
-  }
-}), _e = /* @__PURE__ */ H(qt, [["__scopeId", "data-v-08d3142e"]]);
-var He = /* @__PURE__ */ ((e) => (e.DISABLED = "disabled", e.STATIC_CATEGORY = "static-category", e))(He || {}), Q = /* @__PURE__ */ ((e) => (e.SELECT_CATEGORY = "select-category", e.UNSELECT_CATEGORY = "unselect-category", e.TOGGLE_CATEGORY_VISIBILITY = "toggle-category-visibility", e))(Q || {});
-const Ge = {
-  "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} 已打开" }
-}, Xt = J({
-  i18n: { messages: Ge },
-  name: "bento-listbox-multi-select-category",
-  components: {
-    BentoTypography: ie,
-    BentoListboxOption: Ce,
-    ChevronDownIcon: Et,
-    ChevronUpIcon: Ot,
-    DecorativeCheckbox: _e
-  },
-  props: {
-    /**
-     * The option elements to populate the listbox with.
-     * It must be an array of {@see BentoListboxOptionItem }.
-     *
-     * @property {string} value.label - Text to be displayed in the option
-     * @property {string,number} value.value - Value of the option
-     * @property {BentoListboxOptionItem} value.items - Category items list
-     */
-    category: {
-      type: Object,
-      required: !0
-    },
-    /**
-     * Function that allows the options to be disabled
-     *
-     * @type {BentoListboxIsOptionDisabled}
-     * @param {BentoListboxOptionItem} option - listbox option object
-     * @param {string} option.label - Option's label text
-     * @param {string|number} option.value - Option's value
-     * @param {unknown} option.data - Option's extra data to be passed to the default slot
-     */
-    isOptionDisabled: {
-      type: [Function],
-      default: () => !1
-    },
-    /**
-     * The `input` value.
-     * Providing an empty array will select no options.
-     */
-    selectedItemsList: {
-      type: Array,
-      default: () => []
-    },
-    /**
-     * If enabled, dropdown will display non-selectable, static categories
-     */
-    staticCategories: { type: Boolean, default: !1 },
-    /**
-     * Category's tabindex
-     */
-    tabindex: { type: Number, default: -1 }
-  },
-  emits: [
-    Q.SELECT_CATEGORY,
-    Q.UNSELECT_CATEGORY,
-    Q.TOGGLE_CATEGORY_VISIBILITY
-  ],
-  setup(e, { emit: t }) {
-    const o = I(!1), { t: s } = Ie({ messages: Ge }), r = Me("category-group"), i = Me("category-name"), a = (M) => e.isOptionDisabled ? e.isOptionDisabled(M) : !1, f = b(
-      () => e.category.items.every((M) => a(M))
-    ), S = pe(e, "staticCategories"), n = b(() => o.value || e.staticCategories), u = b(() => ({
-      [`b-listbox-multi-select-category--${He.DISABLED}`]: f.value
-    })), l = (M, Y) => {
-      M.preventDefault(), o.value = Y !== void 0 ? Y : !o.value, t(Q.TOGGLE_CATEGORY_VISIBILITY, e.category.value);
-    }, m = (M) => {
-      const Y = a(M), Z = e.selectedItemsList?.includes(M.value) || !1;
-      return { isDisabled: Y, isPreSelected: Z };
-    }, C = b(
-      () => e.category.items.filter((M) => {
-        const { isDisabled: Y, isPreSelected: Z } = m(M);
-        return Y && Z || !Y;
-      })
-    ), h = b(
-      () => C.value?.filter(
-        ({ value: M }) => e.selectedItemsList?.includes(M)
-      )
-    ), R = b(() => {
-      const M = o.value ? "categoryOpened" : "categoryClosed";
-      return s(M, { category: e.category.label });
-    }), x = () => {
-      t(Q.SELECT_CATEGORY);
-    }, k = () => {
-      t(Q.UNSELECT_CATEGORY);
-    }, { isAllSelected: $, isIndeterminate: T, toggleSelectAll: O } = Fe(
-      h,
-      C,
-      x,
-      k
-    ), D = b(() => T.value ? "mixed" : `${$.value}`), z = I($.value), re = () => {
-      z.value = !z.value, O(z.value);
-    };
-    return fe($, () => {
-      z.value = $.value;
-    }), {
-      // Values
-      chevronTitle: R,
-      conditionalClass: u,
-      hasAllPropsDisabled: f,
-      isOpen: o,
-      isAllSelected: $,
-      isIndeterminate: T,
-      isStaticCategory: S,
-      categoryGroupId: r,
-      categoryNameId: i,
-      // Computed
-      showItemChildren: n,
-      ariaCheckedComputed: D,
-      // Methods
-      handleSelectAll: re,
-      toggleOpen: l,
-      toggleSelectAll: O
-    };
-  }
-}), Jt = { class: "b-listbox-multi-select-category__label" }, Zt = {
-  key: 1,
-  class: "b-listbox-multi-select-category b-listbox-multi-select-category--static-category",
-  "aria-hidden": "true"
-}, Qt = { class: "b-listbox-multi-select-category__label" }, es = ["id", "aria-label"];
-function ts(e, t, o, s, r, i) {
-  const a = _("decorative-checkbox"), f = _("bento-typography"), S = _("chevron-up-icon"), n = _("chevron-down-icon"), u = _("bento-listbox-option");
-  return d(), y("div", null, [
-    e.isStaticCategory ? (d(), y("div", Zt, [
-      G("span", Qt, [
-        N(f, {
-          el: "span",
-          variant: "caption",
-          class: "b-listbox-multi-select-category__label-text"
-        }, {
-          default: L(() => [
-            K(V(e.category.label), 1)
-          ]),
-          _: 1
-        })
-      ])
-    ])) : (d(), A(u, {
-      key: 0,
-      class: ve(["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: ae(e.handleSelectAll, ["prevent"]),
-      onKeydown: [
-        t[1] || (t[1] = be((l) => e.toggleOpen(l, !1), ["arrow-left", "native"])),
-        t[2] || (t[2] = be((l) => e.toggleOpen(l, !0), ["arrow-right", "native"]))
-      ]
-    }, {
-      default: L(() => [
-        N(a, {
-          indeterminate: e.isIndeterminate,
-          disabled: e.hasAllPropsDisabled,
-          checked: e.isAllSelected
-        }, null, 8, ["indeterminate", "disabled", "checked"]),
-        G("span", Jt, [
-          N(f, {
-            id: e.categoryNameId,
-            el: "span",
-            class: "b-listbox-multi-select-category__label-text"
-          }, {
-            default: L(() => [
-              K(V(e.category.label), 1)
-            ]),
-            _: 1
-          }, 8, ["id"]),
-          G("div", {
-            "aria-hidden": "true",
-            class: "b-listbox-multi-select-category__label-chevron",
-            "data-testid": "toggle-listbox",
-            onClickCapture: t[0] || (t[0] = ae((...l) => e.toggleOpen && e.toggleOpen(...l), ["stop"]))
-          }, [
-            e.isOpen ? (d(), A(S, {
-              key: 0,
-              "svg-title": e.chevronTitle
-            }, null, 8, ["svg-title"])) : (d(), A(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"])),
-    ne(G("div", {
-      id: e.categoryGroupId,
-      role: "group",
-      "aria-label": e.category.label
-    }, [
-      W(e.$slots, "default", {}, void 0, !0)
-    ], 8, es), [
-      [ze, e.showItemChildren]
-    ])
-  ]);
-}
-const ss = /* @__PURE__ */ H(Xt, [["render", ts], ["__scopeId", "data-v-60c04867"]]);
-var X = /* @__PURE__ */ ((e) => (e.SELECT_CATEGORY = "select-category", e.TOGGLE_CHECKBOX_SELECTION = "toggle-checkbox-selection", e.UNSELECT_CATEGORY = "unselect-category", e.TOGGLE_CATEGORY_VISIBILITY = "toggle-category-visibility", e))(X || {});
-const ls = J({
-  name: "listbox-multi-select-options",
-  components: {
-    BentoListboxOption: Ce,
-    BentoTypography: ie,
-    ListboxMultiSelectCategory: ss,
-    DecorativeCheckbox: _e
-  },
-  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: [
-    X.TOGGLE_CHECKBOX_SELECTION,
-    X.SELECT_CATEGORY,
-    X.UNSELECT_CATEGORY,
-    X.TOGGLE_CATEGORY_VISIBILITY
-  ],
-  setup(e, { emit: t }) {
-    const o = (n) => {
-      e.isOptionDisabled(n) || t(X.TOGGLE_CHECKBOX_SELECTION, n);
-    }, s = (n) => !!n.items, r = (n) => {
-      const u = e.isMultiLevel && e.searching;
-      return n.description && (!e.isMultiLevel || u);
-    }, i = (n) => n.items ? !!n.items.find((u) => e.selectedItemsList.includes(u.value)) : e.selectedItemsList.includes(n.value), a = (n) => {
-      if (s(n)) {
-        const u = i(n) ? X.UNSELECT_CATEGORY : X.SELECT_CATEGORY;
-        t(u, 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: r,
-      toggleCheckboxSelection: o,
-      toggleSearchOption: a,
-      computedTabindex: (n) => e.itemsIndex[n] === e.focusedIndex ? 0 : -1,
-      // Enums
-      BentoListboxEvent: p,
-      ListboxMultiSelectOptionsEvent: X
-    };
-  }
-}), os = { class: "b-listbox-multi-select__option-text" }, as = { class: "b-listbox-multi-select__option-text" };
-function ns(e, t, o, s, r, i) {
-  const a = _("decorative-checkbox"), f = _("bento-typography"), S = _("bento-listbox-option"), n = _("listbox-multi-select-options", !0), u = _("listbox-multi-select-category");
-  return d(), y("div", null, [
-    (d(!0), y(te, null, j(e.items, (l) => (d(), y("div", {
-      key: `selected-${l.value}`
-    }, [
-      e.searching && e.isMultiLevel ? (d(), A(S, {
-        key: 0,
-        class: ve(["b-listbox-multi-select-options", e.conditionalClasses]),
-        disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null,
-        tabindex: e.computedTabindex(l.value),
-        "aria-selected": `${e.isOptionSelected(l)}`,
-        "aria-checked": `${e.isOptionSelected(l)}`,
-        "aria-disabled": e.isOptionDisabled ? e.isOptionDisabled(l) : null,
-        role: e.$attrs.role || "option",
-        onClick: (m) => e.toggleSearchOption(l),
-        onEnterPressed: (m) => e.toggleSearchOption(l),
-        onSpacePressed: ae((m) => e.toggleSearchOption(l), ["prevent"])
-      }, {
-        default: L(() => [
-          N(a, {
-            disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null,
-            checked: e.isOptionSelected(l)
-          }, null, 8, ["disabled", "checked"]),
-          W(e.$slots, "default", w({ ref_for: !0 }, l), () => [
-            G("span", os, [
-              N(f, { el: "span" }, {
-                default: L(() => [
-                  K(V(l.label), 1)
-                ]),
-                _: 2
-              }, 1024),
-              e.shouldShowDescription(l) ? (d(), A(f, {
-                key: 0,
-                class: "b-listbox-multi-select__option-description",
-                el: "span"
-              }, {
-                default: L(() => [
-                  K(V(l.description), 1)
-                ]),
-                _: 2
-              }, 1024)) : q("", !0)
-            ])
-          ], !0)
-        ]),
-        _: 2
-      }, 1032, ["class", "disabled", "tabindex", "aria-selected", "aria-checked", "aria-disabled", "role", "onClick", "onEnterPressed", "onSpacePressed"])) : (d(), y(te, { key: 1 }, [
-        l.items ? (d(), A(u, {
-          key: 0,
-          category: l,
-          "static-categories": e.staticCategories,
-          "is-option-disabled": e.isOptionDisabled,
-          "selected-items-list": e.selectedItemsList,
-          tabindex: e.computedTabindex(l.value),
-          onSelectCategory: (m) => e.$emit(e.ListboxMultiSelectOptionsEvent.SELECT_CATEGORY, l),
-          onUnselectCategory: (m) => e.$emit(e.ListboxMultiSelectOptionsEvent.UNSELECT_CATEGORY, l),
-          onToggleCategoryVisibility: t[1] || (t[1] = (m) => e.$emit(e.ListboxMultiSelectOptionsEvent.TOGGLE_CATEGORY_VISIBILITY, m))
-        }, {
-          default: L(() => [
-            N(n, {
-              "category-items": "",
-              items: l.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] = (m) => e.toggleCheckboxSelection(m))
-            }, 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"])) : (d(), A(S, {
-          key: 1,
-          class: ve(["b-listbox-multi-select-options", e.conditionalClasses]),
-          disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null,
-          tabindex: e.computedTabindex(l.value),
-          "aria-selected": `${e.isOptionSelected(l)}`,
-          "aria-checked": `${e.isOptionSelected(l)}`,
-          "aria-disabled": e.isOptionDisabled ? e.isOptionDisabled(l) : null,
-          role: e.$attrs.role || "option",
-          onClick: (m) => e.toggleCheckboxSelection(l),
-          onEnterPressed: (m) => e.toggleCheckboxSelection(l),
-          onSpacePressed: ae((m) => e.toggleCheckboxSelection(l), ["prevent"])
-        }, {
-          default: L(() => [
-            N(a, {
-              disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null,
-              checked: e.isOptionSelected(l)
-            }, null, 8, ["disabled", "checked"]),
-            W(e.$slots, "default", w({ ref_for: !0 }, l), () => [
-              G("span", as, [
-                N(f, { el: "span" }, {
-                  default: L(() => [
-                    K(V(l.label), 1)
-                  ]),
-                  _: 2
-                }, 1024),
-                e.shouldShowDescription(l) ? (d(), A(f, {
-                  key: 0,
-                  class: "b-listbox-multi-select__option-description",
-                  el: "span"
-                }, {
-                  default: L(() => [
-                    K(V(l.description), 1)
-                  ]),
-                  _: 2
-                }, 1024)) : q("", !0)
-              ])
-            ], !0)
-          ]),
-          _: 2
-        }, 1032, ["class", "disabled", "tabindex", "aria-selected", "aria-checked", "aria-disabled", "role", "onClick", "onEnterPressed", "onSpacePressed"]))
-      ], 64))
-    ]))), 128))
-  ]);
-}
-const is = /* @__PURE__ */ H(ls, [["render", ns], ["__scopeId", "data-v-237dfc58"]]), rs = (e) => {
-  const t = b(() => !!e.value?.find(({ items: s }) => !!s)), o = b(() => t.value ? e.value?.reduce((s, r) => (r.items ? s.push(...r.items.flat()) : s.push(r), s), []) : e.value);
-  return {
-    isMultiLevelSelect: t,
-    flattenedItemsList: o
-  };
-}, je = {
-  "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: "{number}/{total}件が選択されました", 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}）个" }
-}, cs = { key: 0 }, ds = ["role"], us = {
-  key: 1,
-  class: "b-listbox-multi-select__divider",
-  "aria-hidden": "true"
-}, bs = { i18n: { messages: je } }, ms = /* @__PURE__ */ J({
-  ...bs,
-  __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 s = e, r = o, { t: i, n: a } = Ie({ messages: je }), f = mt(), S = pt(), n = b(
-      () => ({
-        "aria-label": S["aria-label"]?.toString(),
-        "aria-busy": S["aria-busy"]?.toString(),
-        "aria-atomic": S["aria-atomic"]?.toString(),
-        "aria-live": S["aria-live"]?.toString(),
-        "aria-multiselectable": !0
-      })
-    ), u = I(null), l = I(null), m = I(null), C = I(null), h = b(() => s.selectedValues.map(({ value: c }) => c)), { isMultiLevelSelect: R, flattenedItemsList: x } = rs(pe(s, "items")), k = b(() => R.value && !s.staticCategories), $ = b(() => k.value ? "tree" : "listbox"), T = b(() => k.value ? "treeitem" : "option"), O = (c) => {
-      const v = s.isOptionDisabled(c), g = h.value?.includes(c.value) || !1;
-      return { isDisabled: v, isPreSelected: g };
-    }, D = b(() => {
-      if (s.searching && R)
-        return s.items;
-      const c = x.value.filter((v) => {
-        const { isDisabled: g, isPreSelected: P } = O(v);
-        return g && P || !g;
-      });
-      return s.selectedValues.forEach((v) => {
-        c.find((g) => g.value === v.value) || c.push(v);
-      }), c;
-    }), z = b(
-      () => D.value?.filter((c) => c.items && R.value && s.searching ? c.items.filter(
-        (g) => (s.selectedValues ?? []).includes(g.value)
-      ).length === c.items.length : h.value?.includes(c.value))
-    ), re = () => R.value && !s.searching ? x.value.length : s.items.length, M = b(() => {
-      const c = D.value.length, v = re(), g = z.value?.length || 0;
-      return g === 0 ? i("selectAll", { total: a(c) }) : g === v ? i("allSelected", { total: a(v) }) : g <= v ? i("numberOfTotalSelected", { number: a(g), total: a(v) }) : i("numbersSelected", { number: a(g) });
-    }), Y = (c) => {
-      const v = (P) => {
-        const { isDisabled: E, isPreSelected: ue } = O(P);
-        return E && ue || !E;
-      }, g = c.filter(v).filter((P) => !h.value.includes(P.value));
-      r("select", [...s.selectedValues, ...g]);
-    }, Z = (c) => {
-      const v = (E) => {
-        const { isDisabled: ue, isPreSelected: dt } = O(E);
-        return !(ue && dt);
-      }, g = c.filter(v).map(({ value: E }) => E), P = s.selectedValues.filter((E) => !g?.includes(E.value));
-      r("select", P);
-    }, Ee = () => {
-      Y(x.value);
-    }, Oe = () => {
-      Z(x.value);
-    }, { isAllSelected: U, isIndeterminate: se, toggleSelectAll: qe } = Fe(
-      z,
-      D,
-      Ee,
-      Oe
-    ), Ae = b(() => se.value ? "mixed" : `${U.value}`), ye = I(U.value), Te = () => {
-      ye.value = !ye.value, qe(ye.value);
-    };
-    fe(U, () => {
-      ye.value = U.value;
-    });
-    const Xe = (c) => {
-      Y(c.items);
-    }, ke = (c) => {
-      Z(c.items);
-    }, ce = (c, v) => {
-      let g = !1;
-      const P = s.selectedValues.filter(({ value: E }) => v.value === E ? (g = !0, !1) : !0);
-      g || P.push(v), r(c, P);
-    }, Je = b(() => {
-      if (!R.value)
-        return s.selectedValues;
-      const c = (E) => h.value.includes(E.value), v = (E) => !s.staticCategories && E.every((ue) => c(ue));
-      return s.items.flatMap(
-        (E) => E.items && !v(E.items) ? E.items : E
-      ).filter((E) => E.items ? !0 : c(E));
-    }), Ze = b(() => {
-      const c = ["automatic", "button"].includes(s.lazyLoadType), v = s.selectedValues?.length > 0 && z.value?.length !== x.value?.length;
-      return c && s.hasMoreItems ? !!s.selectedValues?.length : v;
-    }), $e = b(() => ["automatic", "button"].includes(s.lazyLoadType) ? !s.hasMoreItems : !0), de = I([]), { visibleDomOptions: De, updateVisibleDomOptions: Qe } = We(
-      u,
-      pe(s, "items"),
-      T
-    ), et = (c) => {
-      de.value.includes(c) ? de.value = de.value.filter((v) => v !== c) : de.value.push(c), Ye(() => {
-        Qe();
-      });
-    }, tt = (c) => {
-      De.value[c]?.focus();
-    }, {
-      moveToNextElement: st,
-      moveToPreviousElement: lt,
-      moveToFirstElement: ot,
-      moveToLastElement: at,
-      preventDefault: Be,
-      focusedIndex: Re,
-      setListboxFocusedIndex: nt
-    } = Ke(
-      {
-        items: De
-      },
-      tt
-    ), it = {
-      [F.ARROW_UP]: (c) => lt(c),
-      [F.ARROW_DOWN]: (c) => st(c),
-      [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]: Be,
-      [F.ARROW_DOWN]: Be
-    }, ct = b(() => {
-      let c = 1;
-      const v = {};
-      return s.items.forEach((g) => {
-        let P = de.value.includes(g.value);
-        g.items ? (s.staticCategories ? P = !0 : v[g.value] = c++, P && g.items.forEach((E) => v[E.value] = c++)) : v[g.value] = c++;
-      }), v;
-    });
-    return (c, v) => (d(), y("div", {
-      ref_key: "listboxRef",
-      ref: u,
-      class: "b-listbox-multi-select"
-    }, [
-      Ze.value ? (d(), y("div", cs, [
-        ne((d(), y("ul", w({ class: "b-listbox-multi-select__chips" }, ee(rt, !0)), [
-          (d(!0), y(te, null, j(Je.value, (g) => (d(), y("li", {
-            key: g.value
-          }, [
-            N(B(Ct), {
-              ref_for: !0,
-              ref_key: "selectedListboxItemsRef",
-              ref: m,
-              disabled: c.isOptionDisabled(g),
-              label: g.label,
-              condensed: "",
-              onClick: (P) => g.items ? ke(g) : ce("select", g)
-            }, null, 8, ["disabled", "label", "onClick"])
-          ]))), 128))
-        ], 16)), [
-          [B(he)]
-        ]),
-        v[4] || (v[4] = G("hr", {
-          class: "b-listbox-multi-select__divider",
-          "aria-hidden": "true"
-        }, null, -1))
-      ])) : q("", !0),
-      ne((d(), y("div", w(n.value, { role: $.value }, ee(it, !0)), [
-        $e.value ? (d(), A(B(Ce), {
-          key: 0,
-          ref_key: "selectAllListboxItemsRef",
-          ref: l,
-          class: "b-listbox-multi-select__option",
-          tabindex: B(Re) === 0 ? 0 : -1,
-          "aria-selected": Ae.value !== "false",
-          "aria-checked": Ae.value,
-          role: T.value,
-          onClick: Te,
-          onEnterPressed: Te,
-          onSpacePressed: ae(Te, ["prevent"])
-        }, {
-          default: L(() => [
-            N(B(_e), {
-              checked: B(U),
-              indeterminate: B(se)
-            }, null, 8, ["checked", "indeterminate"]),
-            N(B(ie), { el: "span" }, {
-              default: L(() => [
-                K(V(M.value), 1)
-              ]),
-              _: 1
-            })
-          ]),
-          _: 1
-        }, 8, ["tabindex", "aria-selected", "aria-checked", "role"])) : q("", !0),
-        $e.value ? (d(), y("hr", us)) : q("", !0),
-        N(B(is), {
-          ref_key: "listboxItemsRef",
-          ref: C,
-          items: c.items,
-          "is-option-disabled": c.isOptionDisabled,
-          "is-multi-level": B(R),
-          "static-categories": c.staticCategories,
-          searching: c.searching,
-          "selected-items-list": h.value,
-          "focused-index": B(Re),
-          "items-index": ct.value,
-          role: T.value,
-          onToggleCheckboxSelection: v[0] || (v[0] = (g) => ce("select", g)),
-          onSelectCategory: Xe,
-          onUnselectCategory: ke,
-          onToggleCategoryVisibility: et,
-          onSpacePressed: v[1] || (v[1] = (g) => ce(B(p).SPACE, g)),
-          onTabPressed: v[2] || (v[2] = (g) => ce(B(p).TAB, g)),
-          onEnterPressed: v[3] || (v[3] = (g) => ce(B(p).ENTER, g))
-        }, ge({ _: 2 }, [
-          j(B(f), (g, P) => ({
-            name: P,
-            fn: L((E) => [
-              W(c.$slots, P, oe(me(E)), void 0, !0)
-            ])
-          }))
-        ]), 1032, ["items", "is-option-disabled", "is-multi-level", "static-categories", "searching", "selected-items-list", "focused-index", "items-index", "role"])
-      ], 16, ds)), [
-        [B(he)]
-      ])
-    ], 512));
-  }
-}), xe = /* @__PURE__ */ H(ms, [["__scopeId", "data-v-d170602c"]]), Ve = {
-  "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: "显示更多" }
-}, ps = 36, gs = J({
-  name: "bento-listbox",
-  components: {
-    BentoEmptyState: vt,
-    BentoListboxSingleSelect: Ut,
-    BentoListboxMultiSelect: xe,
-    BentoTypography: ie,
-    BentoLoadingIndicator: gt,
-    BentoLoadingButton: Tt
-  },
-  directives: { BentoKeyboardNavigationDirective: he },
-  i18n: { messages: Ve },
-  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: le.NONE,
-      validator: (e) => Object.values(le).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: xe.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: [
-    p.SELECT,
-    p.SPACE,
-    p.SHOW_MORE,
-    p.ENTER,
-    p.ESCAPE,
-    p.TAB
-  ],
-  setup(e, { emit: t, slots: o }) {
-    const s = I([]), r = pe(e, "items"), { t: i } = Ie({ messages: Ve }), a = b(() => e.lazyLoadType !== le.AUTOMATIC), f = b(() => e.lazyLoadType === le.AUTOMATIC), S = () => typeof e?.virtualScroll == "object" && e?.virtualScroll?.itemHeight ? e.virtualScroll.itemHeight : ps, {
-      containerRef: n,
-      containerProps: u,
-      onScroll: l,
-      list: m,
-      wrapperProps: C
-    } = Lt(r, {
-      itemHeight: S(),
-      // Disable virtual scrolling if not enabled or if lazy loading is enabled or if multi-select
-      disabled: e?.multiple || e?.virtualScroll === !1 || e?.lazyLoadType !== "none"
-    }), h = b(
-      () => e.componentLoading !== void 0 || a.value ? "true" : void 0
-    ), R = b(
-      () => a.value && e.loading || e.componentLoading ? "true" : "false"
-    ), x = b(
-      () => a.value || e.componentLoading !== void 0 ? "polite" : void 0
-    ), k = b(
-      () => ({
-        "aria-label": e.ariaLabel,
-        "aria-busy": R.value,
-        "aria-atomic": h.value,
-        "aria-live": x.value
-      })
-    ), $ = b(
-      () => e.componentLoading ? {
-        ...k.value,
-        role: "alert"
-      } : {}
-    ), T = (U) => (se) => {
-      t(U, se);
-    }, O = () => {
-      t(p.SHOW_MORE);
-    }, D = ft(() => {
-      const U = n.value;
-      if (!U)
-        return;
-      const se = Math.round(U.scrollTop) + U.clientHeight >= U.scrollHeight;
-      e.hasMoreItems && se && !e.loading && O();
-    }), z = () => {
-      f.value ? D() : l();
-    }, re = b(() => e.items?.length === 0), M = b(
-      () => e.lazyLoadType === le.BUTTON && e.hasMoreItems
-    ), Y = b(
-      () => e.loading ? Pe.LOADING : Pe.START
-    ), Z = b(() => e.loading ? i("loading") : i("showMore")), Ee = b(() => ({
-      ...e.emptyState,
-      variant: "condensed"
-    })), Oe = {
-      [p.SELECT]: T(p.SELECT),
-      [p.SPACE]: T(p.SPACE),
-      [p.TAB]: T(p.TAB),
-      [p.ENTER]: T(p.ENTER)
-    };
-    return {
-      // Refs
-      listboxRef: n,
-      listboxItemRef: s,
-      // a11y
-      ariaAttributes: k,
-      listboxContainerAttributes: $,
-      // Values
-      containerProps: u,
-      isSearchResultEmpty: re,
-      limitedEmptyStateProps: Ee,
-      loadingButtonState: Y,
-      slots: o,
-      shouldDisplayShowMoreButton: M,
-      showMoreButtonText: Z,
-      virtualisedItems: m,
-      wrapperProps: C,
-      // Enums
-      BentoKeyboardNavigationKeyDownEvent: F,
-      BentoListboxEvent: p,
-      // Methods
-      onListboxContainerScroll: z,
-      onOptionSelected: T,
-      emitShowMore: O,
-      listboxListeners: Oe
-    };
-  }
-}), vs = ["id"], fs = {
-  key: 0,
-  class: "b-listbox__loading-filtered-items"
-}, ys = {
-  key: 1,
-  class: "b-listbox__empty-search-message"
-}, Ss = {
-  key: 2,
-  class: "b-listbox__lazy-load"
-}, hs = {
-  key: 3,
-  class: "b-listbox__lazy-load"
-};
-function Cs(e, t, o, s, r, i) {
-  const a = _("bento-loading-indicator"), f = _("bento-empty-state"), S = _("bento-typography"), n = _("bento-listbox-multi-select"), u = _("bento-listbox-single-select"), l = _("bento-loading-button"), m = Ue("bento-keyboard-navigation-directive");
-  return ne((d(), y("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] = (...C) => e.onListboxContainerScroll && e.onListboxContainerScroll(...C))
-  }), [
-    G("div", oe(me(e.wrapperProps)), [
-      e.componentLoading ? (d(), y("div", fs, [
-        N(a)
-      ])) : e.isSearchResultEmpty ? (d(), y("div", ys, [
-        e.emptyState ? (d(), A(f, oe(w({ key: 0 }, e.limitedEmptyStateProps)), null, 16)) : (d(), A(S, {
-          key: 1,
-          el: "span"
-        }, {
-          default: L(() => [
-            K(V(e.noResultsMessage), 1)
-          ]),
-          _: 1
-        }))
-      ])) : (d(), y(te, { key: 2 }, [
-        e.multiple ? (d(), A(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)), ge({ _: 2 }, [
-          j(e.slots, (C, h) => ({
-            name: h,
-            fn: L((R) => [
-              W(e.$slots, h, oe(me(R)), void 0, !0)
-            ])
-          }))
-        ]), 1040, ["has-more-items", "items", "lazy-load-type", "static-categories", "selected-values", "searching", "is-option-disabled"])) : (d(), A(u, w({
-          key: 1,
-          ref: "listboxItemRef",
-          items: e.virtualisedItems
-        }, e.ariaAttributes, {
-          "selected-value": e.selectedValue,
-          "static-categories": e.staticCategories,
-          "is-option-disabled": e.isOptionDisabled
-        }, ee(e.listboxListeners)), ge({ _: 2 }, [
-          j(e.slots, (C, h) => ({
-            name: h,
-            fn: L((R) => [
-              W(e.$slots, h, oe(me(R)), void 0, !0)
-            ])
-          }))
-        ]), 1040, ["items", "selected-value", "static-categories", "is-option-disabled"])),
-        e.shouldDisplayShowMoreButton ? (d(), y("div", Ss, [
-          N(l, {
-            state: e.loadingButtonState,
-            variant: "secondary",
-            onClickCapture: e.emitShowMore
-          }, {
-            default: L(() => [
-              K(V(e.showMoreButtonText), 1)
-            ]),
-            _: 1
-          }, 8, ["state", "onClickCapture"])
-        ])) : e.loading ? (d(), y("div", hs, [
-          N(a)
-        ])) : q("", !0)
-      ], 64))
-    ], 16)
-  ], 16, vs)), [
-    [m]
-  ]);
-}
-const Vs = /* @__PURE__ */ H(gs, [["render", Cs], ["__scopeId", "data-v-ef1c27fa"]]), Le = (e, t) => {
-  for (const o of e) {
-    if (o.value === t)
-      return o;
-    if (o.items) {
-      const s = Le(o.items, t);
-      if (s)
-        return s;
-    }
-  }
-  return null;
-}, Es = (e) => typeof e == "object" && e !== null && "value" in e && "label" in e, zs = (e, t, o, s) => {
-  const r = I([]), i = I(), a = (u) => {
-    o.value ? i.value = u.map(({ value: l }) => l) : i.value = u.length > 0 ? u[0].value : null;
-  }, f = (u) => {
-    o.value ? i.value = u.map(({ value: l, label: m }) => ({ value: l, label: m })) : i.value = u.length > 0 ? { value: u[0].value, label: u[0].label } : null;
-  }, S = (u) => {
-    r.value = u, s?.value ? f(u) : a(u);
-  }, n = () => {
-    r.value = [], i.value = null;
-  };
-  return fe(
-    () => t.value,
-    () => {
-      if (!t.value && t.value !== 0) {
-        n();
-        return;
-      }
-      const u = !Array.isArray(t.value), l = [...r.value];
-      n();
-      const m = (C) => {
-        if (Es(C))
-          r.value.push(C);
-        else {
-          let h = Le(e.value, C);
-          h || (h = Le(l, C)), h || (h = { value: C, label: C.toString() }), r.value.push(h);
-        }
-      };
-      if (u) {
-        const C = t.value;
-        m(C), s?.value ? f(r.value) : a(r.value);
-        return;
-      }
-      t.value.forEach(m), s?.value ? f(r.value) : a(r.value);
-    },
-    { immediate: !0 }
-  ), {
-    // Values
-    cachedSelectedListboxOptions: r,
-    cachedListboxSelectedValues: i,
-    // Methods
-    resetCache: n,
-    setCachedValues: S
-  };
-};
-export {
-  p as B,
-  Pt as C,
-  _e as D,
-  le as a,
-  Vs as b,
-  rs as c,
-  We as d,
-  zs as u
-};
-//# sourceMappingURL=use-cached-selected-values.DIbfa5F1.js.map