@adyen/bento-vue3 1.90.0 → 1.92.0

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

@@ -0,0 +1,1740 @@
+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.7Oi2Ra4p.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: "{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}）个" }
+}, 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.DUWGSMvO.js.map