@adyen/bento-vue3 1.88.1 → 1.89.2

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

@@ -0,0 +1,1631 @@
+import { computed as b, ref as _, onMounted as ut, onUnmounted as bt, watch as ge, defineComponent as X, resolveComponent as I, openBlock as d, createElementBlock as y, createVNode as M, 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 k, withModifiers as ie, normalizeProps as oe, guardReactiveProps as me, withDirectives as ae, vShow as Ye, nextTick as Ue, toRef as pe, resolveDirective as ze, toHandlers as ee, Fragment as te, renderList as j, createSlots as ve, normalizeClass as fe, 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 ne } from "./typography.B3J6_tYk.js";
+import { B as vt } from "./loading-indicator.BPol9I84.js";
+import { B as ft } from "./empty-state.DT4sFyjB.js";
+import { u as _e } from "./index.B875RXHM.js";
+import { d as gt } 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.CdgpQyXN.js";
+import { C as Et } from "./chevron-down.XeE-LBV_.js";
+import { C as Ot } from "./chevron-up.Cmgl2a3x.js";
+import { g as Pe } from "./generate-uid.DBWe4g6T.js";
+import { a as Tt, b as Ne } from "./button-actions.cMQWyZne.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
+  ), n = b(() => e.value == null || e.value.length === 0 ? !1 : e.value?.length !== t.value.length);
+  return {
+    isAllSelected: r,
+    isIndeterminate: n,
+    toggleSelectAll: (g) => {
+      g ? o() : s();
+    }
+  };
+};
+function Lt(e, { disabled: t, itemHeight: o, overscan: s = 5, prefixHeight: r }) {
+  const n = _(null), i = _([]), g = _(0), S = _(0), a = _(0);
+  let u;
+  const l = b(() => {
+    const A = typeof o == "number" ? e.value.length * o : e.value.reduce((T, O, D) => T + o(D), 0), $ = typeof o == "number" ? g.value * o : e.value.slice(0, g.value).reduce((T, O, D) => T + o(D), 0);
+    return {
+      style: {
+        marginTop: `${$}px`,
+        height: `${A - $}px`
+      }
+    };
+  }), m = () => {
+    const A = r?.value ?? 0, $ = Math.max(n.value.scrollTop - A, 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 Y = o(D);
+      if (T += Y, T >= $) {
+        O = D;
+        break;
+      }
+    }
+    return O;
+  }, C = () => {
+    if (a.value = n.value.clientHeight, typeof o == "number")
+      return Math.ceil(a.value / o);
+    const A = g.value ?? 0;
+    let $ = 0, T = 0;
+    for (let O = A; O < e.value.length; O += 1) {
+      const D = o(O);
+      if ($ += D, T = O, $ > a.value)
+        break;
+    }
+    return T - A;
+  }, h = () => {
+    if (n.value) {
+      const A = C();
+      g.value = m(), S.value = Math.min(g.value + A + s, e.value.length), i.value = e.value.slice(g.value, S.value);
+    }
+  }, R = () => {
+    h();
+  };
+  t || (ut(() => {
+    n.value && (a.value = n.value.clientHeight, u = yt(n.value, ({ clientHeight: A }) => {
+      a.value = A, h();
+    }), h());
+  }), bt(() => {
+    u?.disconnect();
+  }), ge(
+    () => e.value,
+    () => {
+      h();
+    }
+  ));
+  const x = {
+    ref: n,
+    style: { overflowY: "auto" }
+  };
+  return t ? {
+    containerRef: n,
+    containerProps: x,
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onScroll: () => {
+    },
+    list: e
+  } : {
+    containerRef: n,
+    containerProps: x,
+    onScroll: R,
+    list: i,
+    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 _t = X({
+  name: "bento-listbox-static-category",
+  components: {
+    BentoTypography: ne
+  },
+  props: {
+    /**
+     * Category label text
+     */
+    categoryLabel: {
+      type: String,
+      required: !0
+    }
+  }
+}), It = ["aria-label"];
+function kt(e, t, o, s, r, n) {
+  const i = I("bento-typography");
+  return d(), y("div", {
+    class: "b-listbox-single-select-category",
+    role: "group",
+    "aria-label": e.categoryLabel
+  }, [
+    M(i, {
+      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, It);
+}
+const At = /* @__PURE__ */ H(_t, [["render", kt], ["__scopeId", "data-v-27c4e09a"]]), $t = X({
+  name: "bento-listbox-option",
+  props: {
+    /**
+     * Setting this property to true will disable the option.
+     */
+    disabled: { type: Boolean, default: !1 },
+    /**
+     * Indicates if the value is selected. Only one element can be selected at a time.
+     */
+    selected: { type: Boolean, default: !1 }
+  },
+  emits: [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: (n) => {
+        t(p.CLICK, n);
+      },
+      onOptionSelected: (n, i) => {
+        t(n, i);
+      }
+    };
+  }
+});
+function Dt(e, t, o, s, r, n) {
+  return d(), y("div", w({
+    class: ["b-listbox-option", e.conditionalClasses],
+    role: "option"
+  }, e.$attrs, {
+    onClick: t[0] || (t[0] = (...i) => e.onClick && e.onClick(...i)),
+    onKeydown: [
+      t[1] || (t[1] = be((i) => e.onOptionSelected(e.BentoListboxEvent.ENTER, i), ["enter"])),
+      t[2] || (t[2] = be((i) => e.onOptionSelected(e.BentoListboxEvent.SPACE, i), ["space"])),
+      t[3] || (t[3] = be((i) => e.onOptionSelected(e.BentoListboxEvent.TAB, i), ["tab"]))
+    ]
+  }), [
+    W(e.$slots, "default", {}, void 0, !0)
+  ], 16);
+}
+const Ce = /* @__PURE__ */ H($t, [["render", Dt], ["__scopeId", "data-v-1495b1db"]]);
+let Me = 0;
+const Bt = {
+  beforeCreate() {
+    this.uuid = Me.toString(), Me += 1;
+  }
+}, Rt = { key: 0 };
+function Pt(e, t, o, s, r, n) {
+  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 Nt = /* @__PURE__ */ H(Bt, [["render", Pt]]), Mt = X({
+  name: "bento-listbox-single-select-option",
+  components: {
+    BentoListboxOption: Ce,
+    BentoTypography: ne,
+    CheckmarkIcon: Nt
+  },
+  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 = (i) => {
+      e.disabled || t(i, e.option);
+    }, s = b(() => e.disabled ? !0 : null), r = b(() => e.selected ? !0 : null), n = b(() => e.disabled ? -1 : 0);
+    return {
+      // Values
+      ariaDisabled: s,
+      ariaSelected: r,
+      tabIndex: n,
+      // 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, n) {
+  const i = I("bento-typography"), g = I("checkmark-icon"), S = I("bento-listbox-option");
+  return d(), k(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] = (a) => e.onOptionSelected(e.BentoListboxEvent.SELECT)),
+    onEnterPressed: t[1] || (t[1] = (a) => e.onOptionSelected(e.BentoListboxEvent.ENTER)),
+    onSpacePressed: t[2] || (t[2] = ie((a) => e.onOptionSelected(e.BentoListboxEvent.SPACE), ["prevent"])),
+    onTabPressed: t[3] || (t[3] = (a) => e.onOptionSelected(e.BentoListboxEvent.TAB))
+  }, {
+    default: L(() => [
+      W(e.$slots, "default", oe(me(e.option)), () => [
+        G("span", wt, [
+          M(i, { el: "span" }, {
+            default: L(() => [
+              K(V(e.option.label), 1)
+            ]),
+            _: 1
+          }),
+          e.option.description ? (d(), k(i, {
+            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, [
+        ae(M(g, { "svg-title": "selected" }, null, 512), [
+          [Ye, e.selected]
+        ])
+      ])
+    ]),
+    _: 3
+  }, 8, ["disabled", "selected", "aria-selected", "aria-disabled", "tabindex"]);
+}
+const Vt = /* @__PURE__ */ H(Mt, [["render", xt], ["__scopeId", "data-v-4f41af07"]]), Ke = ({ items: e }, t) => {
+  const o = b(() => e.value.length - 1), s = _(0), r = (m) => {
+    switch (m) {
+      case "increase":
+        s.value += 1;
+        break;
+      case "decrease":
+        s.value -= 1;
+        break;
+    }
+  }, n = ({ edgeCaseItem: m }, C) => {
+    s.value !== m && (r(C), t(s.value));
+  }, i = (m) => {
+    l(m), n(
+      {
+        edgeCaseItem: o.value
+      },
+      "increase"
+      /* INCREASE */
+    );
+  }, g = (m) => {
+    l(m), n(
+      {
+        edgeCaseItem: 0
+      },
+      "decrease"
+      /* DECREASE */
+    );
+  }, S = () => {
+    s.value = 0, t(s.value);
+  }, a = () => {
+    s.value = o.value, t(s.value);
+  }, u = (m) => {
+    s.value = m;
+  }, l = (m) => {
+    m?.detail?.preventDefault();
+  };
+  return {
+    moveToFirstElement: S,
+    moveToLastElement: a,
+    moveToNextElement: i,
+    moveToPreviousElement: g,
+    setListboxFocusedIndex: u,
+    preventDefault: l,
+    focusedIndex: s
+  };
+}, We = (e, t, o = _("option"), s = !0) => {
+  const r = _([]), n = async () => {
+    if (!e.value || e.value.nodeType === Node.COMMENT_NODE)
+      return;
+    const i = Array.from(e.value.querySelectorAll(`[role="${o.value}"]`));
+    r.value = s ? i.filter((g) => g.checkVisibility()) : i;
+  };
+  return ge(
+    t,
+    () => {
+      Ue(() => {
+        n();
+      });
+    },
+    { immediate: !0 }
+  ), {
+    visibleDomOptions: r,
+    updateVisibleDomOptions: n
+  };
+}, Yt = X({
+  name: "bento-listbox-single-select",
+  components: {
+    BentoListboxSingleSelectCategory: At,
+    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 n = _(null), i = _([]), g = 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()
+      })
+    ), a = b(() => !!e.items.some(({ items: O }) => !!O)), u = (O) => (D) => {
+      t(O, [D]);
+    }, { visibleDomOptions: l } = We(n, pe(e, "items"), _("option"), !1), m = (O) => {
+      l.value[O]?.focus();
+    }, {
+      moveToNextElement: C,
+      moveToPreviousElement: h,
+      moveToFirstElement: R,
+      moveToLastElement: x,
+      setListboxFocusedIndex: A
+    } = 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: i,
+      /**
+       * 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: A
+    }), {
+      // Enums
+      BentoListboxEvent: p,
+      // Values
+      listboxRef: n,
+      listboxItemRef: i,
+      selectedItem: g,
+      slots: s,
+      ariaAttributes: S,
+      // Computed
+      hasCategories: a,
+      // Methods
+      onOptionSelected: u,
+      // Keyboard navigation
+      listboxListeners: $,
+      listboxOptionListeners: T
+    };
+  }
+});
+function Ut(e, t, o, s, r, n) {
+  const i = I("bento-listbox-single-select-option"), g = I("bento-listbox-single-select-category"), S = ze("bento-keyboard-navigation-directive");
+  return ae((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, (a) => (d(), k(g, {
+      key: a.value,
+      "category-label": a.label
+    }, {
+      default: L(() => [
+        (d(!0), y(te, null, j(a.items, (u) => (d(), k(i, 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)), ve({ _: 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, (a) => (d(), k(i, w({
+      key: a.value,
+      ref_for: !0,
+      ref: "listboxItemRef",
+      role: "option",
+      option: a,
+      disabled: e.isOptionDisabled ? e.isOptionDisabled(a) : null,
+      selected: a.value === e.selectedItem.value
+    }, ee(e.listboxOptionListeners)), ve({ _: 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 zt = /* @__PURE__ */ H(Yt, [["render", Ut]]);
+let we = 0;
+const Ft = {
+  beforeCreate() {
+    this.uuid = we.toString(), we += 1;
+  }
+}, Kt = { key: 0 };
+function Wt(e, t, o, s, r, n) {
+  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__ */ X({
+  ...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, n) => (d(), y("div", {
+      class: fe(["b-checkbox-input", o.value]),
+      role: "presentation"
+    }, [
+      r.indeterminate ? (d(), k(B(St), {
+        key: 0,
+        class: "b-checkbox-input__icon",
+        "svg-title": "",
+        "aria-hidden": "true"
+      })) : r.allSelected ? (d(), k(B(Ht), {
+        key: 1,
+        class: "b-checkbox-input__icon",
+        "svg-title": "",
+        "aria-hidden": "true",
+        "data-testid": "decorative-checkbox-double-checkmark-icon"
+      })) : r.checked ? (d(), k(B(ht), {
+        key: 2,
+        class: "b-checkbox-input__icon",
+        "svg-title": "",
+        "aria-hidden": "true"
+      })) : q("", !0),
+      G("div", {
+        class: fe(["b-checkbox-input__outline", s.value])
+      }, null, 2)
+    ], 2));
+  }
+}), Ie = /* @__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 = {
+  "en-US": { categoryClosed: "{category} closed", categoryOpened: "{category} opened" },
+  "ja-JP": { categoryClosed: "{category}を閉じました", categoryOpened: "{category}を開きました" },
+  "pt-BR": { categoryClosed: "{category} fechado", categoryOpened: "{categoria} aberta" }
+}, Jt = X({
+  i18n: { messages: Ge },
+  name: "bento-listbox-multi-select-category",
+  components: {
+    BentoTypography: ne,
+    BentoListboxOption: Ce,
+    ChevronDownIcon: Et,
+    ChevronUpIcon: Ot,
+    DecorativeCheckbox: Ie
+  },
+  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 = _(!1), { t: s } = _e({ messages: Ge }), r = Pe("category-group"), n = Pe("category-name"), i = (P) => e.isOptionDisabled ? e.isOptionDisabled(P) : !1, g = b(
+      () => e.category.items.every((P) => i(P))
+    ), S = pe(e, "staticCategories"), a = b(() => o.value || e.staticCategories), u = b(() => ({
+      [`b-listbox-multi-select-category--${He.DISABLED}`]: g.value
+    })), l = (P, U) => {
+      P.preventDefault(), o.value = U !== void 0 ? U : !o.value, t(Q.TOGGLE_CATEGORY_VISIBILITY, e.category.value);
+    }, m = (P) => {
+      const U = i(P), Z = e.selectedItemsList?.includes(P.value) || !1;
+      return { isDisabled: U, isPreSelected: Z };
+    }, C = b(
+      () => e.category.items.filter((P) => {
+        const { isDisabled: U, isPreSelected: Z } = m(P);
+        return U && Z || !U;
+      })
+    ), h = b(
+      () => C.value?.filter(
+        ({ value: P }) => e.selectedItemsList?.includes(P)
+      )
+    ), R = b(() => {
+      const P = o.value ? "categoryOpened" : "categoryClosed";
+      return s(P, { category: e.category.label });
+    }), x = () => {
+      t(Q.SELECT_CATEGORY);
+    }, A = () => {
+      t(Q.UNSELECT_CATEGORY);
+    }, { isAllSelected: $, isIndeterminate: T, toggleSelectAll: O } = Fe(
+      h,
+      C,
+      x,
+      A
+    ), D = b(() => T.value ? "mixed" : `${$.value}`), Y = _($.value), re = () => {
+      Y.value = !Y.value, O(Y.value);
+    };
+    return ge($, () => {
+      Y.value = $.value;
+    }), {
+      // Values
+      chevronTitle: R,
+      conditionalClass: u,
+      hasAllPropsDisabled: g,
+      isOpen: o,
+      isAllSelected: $,
+      isIndeterminate: T,
+      isStaticCategory: S,
+      categoryGroupId: r,
+      categoryNameId: n,
+      // Computed
+      showItemChildren: a,
+      ariaCheckedComputed: D,
+      // Methods
+      handleSelectAll: re,
+      toggleOpen: l,
+      toggleSelectAll: O
+    };
+  }
+}), Xt = { 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, n) {
+  const i = I("decorative-checkbox"), g = I("bento-typography"), S = I("chevron-up-icon"), a = I("chevron-down-icon"), u = I("bento-listbox-option");
+  return d(), y("div", null, [
+    e.isStaticCategory ? (d(), y("div", Zt, [
+      G("span", Qt, [
+        M(g, {
+          el: "span",
+          variant: "caption",
+          class: "b-listbox-multi-select-category__label-text"
+        }, {
+          default: L(() => [
+            K(V(e.category.label), 1)
+          ]),
+          _: 1
+        })
+      ])
+    ])) : (d(), k(u, {
+      key: 0,
+      class: fe(["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: ie(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(() => [
+        M(i, {
+          indeterminate: e.isIndeterminate,
+          disabled: e.hasAllPropsDisabled,
+          checked: e.isAllSelected
+        }, null, 8, ["indeterminate", "disabled", "checked"]),
+        G("span", Xt, [
+          M(g, {
+            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] = ie((...l) => e.toggleOpen && e.toggleOpen(...l), ["stop"]))
+          }, [
+            e.isOpen ? (d(), k(S, {
+              key: 0,
+              "svg-title": e.chevronTitle
+            }, null, 8, ["svg-title"])) : (d(), k(a, {
+              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"])),
+    ae(G("div", {
+      id: e.categoryGroupId,
+      role: "group",
+      "aria-label": e.category.label
+    }, [
+      W(e.$slots, "default", {}, void 0, !0)
+    ], 8, es), [
+      [Ye, e.showItemChildren]
+    ])
+  ]);
+}
+const ss = /* @__PURE__ */ H(Jt, [["render", ts], ["__scopeId", "data-v-60c04867"]]);
+var J = /* @__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))(J || {});
+const ls = X({
+  name: "listbox-multi-select-options",
+  components: {
+    BentoListboxOption: Ce,
+    BentoTypography: ne,
+    ListboxMultiSelectCategory: ss,
+    DecorativeCheckbox: Ie
+  },
+  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: [
+    J.TOGGLE_CHECKBOX_SELECTION,
+    J.SELECT_CATEGORY,
+    J.UNSELECT_CATEGORY,
+    J.TOGGLE_CATEGORY_VISIBILITY
+  ],
+  setup(e, { emit: t }) {
+    const o = (a) => {
+      e.isOptionDisabled(a) || t(J.TOGGLE_CHECKBOX_SELECTION, a);
+    }, s = (a) => !!a.items, r = (a) => {
+      const u = e.isMultiLevel && e.searching;
+      return a.description && (!e.isMultiLevel || u);
+    }, n = (a) => a.items ? !!a.items.find((u) => e.selectedItemsList.includes(u.value)) : e.selectedItemsList.includes(a.value), i = (a) => {
+      if (s(a)) {
+        const u = n(a) ? J.UNSELECT_CATEGORY : J.SELECT_CATEGORY;
+        t(u, a);
+      } else
+        o(a);
+    };
+    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: n,
+      shouldShowDescription: r,
+      toggleCheckboxSelection: o,
+      toggleSearchOption: i,
+      computedTabindex: (a) => e.itemsIndex[a] === e.focusedIndex ? 0 : -1,
+      // Enums
+      BentoListboxEvent: p,
+      ListboxMultiSelectOptionsEvent: J
+    };
+  }
+}), os = { class: "b-listbox-multi-select__option-text" }, is = { class: "b-listbox-multi-select__option-text" };
+function as(e, t, o, s, r, n) {
+  const i = I("decorative-checkbox"), g = I("bento-typography"), S = I("bento-listbox-option"), a = I("listbox-multi-select-options", !0), u = I("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(), k(S, {
+        key: 0,
+        class: fe(["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: ie((m) => e.toggleSearchOption(l), ["prevent"])
+      }, {
+        default: L(() => [
+          M(i, {
+            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, [
+              M(g, { el: "span" }, {
+                default: L(() => [
+                  K(V(l.label), 1)
+                ]),
+                _: 2
+              }, 1024),
+              e.shouldShowDescription(l) ? (d(), k(g, {
+                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(), k(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(() => [
+            M(a, {
+              "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(), k(S, {
+          key: 1,
+          class: fe(["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: ie((m) => e.toggleCheckboxSelection(l), ["prevent"])
+        }, {
+          default: L(() => [
+            M(i, {
+              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", is, [
+                M(g, { el: "span" }, {
+                  default: L(() => [
+                    K(V(l.label), 1)
+                  ]),
+                  _: 2
+                }, 1024),
+                e.shouldShowDescription(l) ? (d(), k(g, {
+                  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 ns = /* @__PURE__ */ H(ls, [["render", as], ["__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 = {
+  "en-US": { allSelected: "All selected ({total})", numberOfTotalSelected: "{number} of {total} selected", numbersSelected: "{number} selected", selectAll: "Select all ({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})" }
+}, cs = { key: 0 }, ds = ["role"], us = {
+  key: 1,
+  class: "b-listbox-multi-select__divider",
+  "aria-hidden": "true"
+}, bs = { i18n: { messages: je } }, ms = /* @__PURE__ */ X({
+  ...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: n, n: i } = _e({ messages: je }), g = mt(), S = pt(), a = 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 = _(null), l = _(null), m = _(null), C = _(null), h = b(() => s.selectedValues.map(({ value: c }) => c)), { isMultiLevelSelect: R, flattenedItemsList: x } = rs(pe(s, "items")), A = b(() => R.value && !s.staticCategories), $ = b(() => A.value ? "tree" : "listbox"), T = b(() => A.value ? "treeitem" : "option"), O = (c) => {
+      const f = s.isOptionDisabled(c), v = h.value?.includes(c.value) || !1;
+      return { isDisabled: f, isPreSelected: v };
+    }, D = b(() => {
+      if (s.searching && R)
+        return s.items;
+      const c = x.value.filter((f) => {
+        const { isDisabled: v, isPreSelected: N } = O(f);
+        return v && N || !v;
+      });
+      return s.selectedValues.forEach((f) => {
+        c.find((v) => v.value === f.value) || c.push(f);
+      }), c;
+    }), Y = b(
+      () => D.value?.filter((c) => c.items && R.value && s.searching ? c.items.filter(
+        (v) => (s.selectedValues ?? []).includes(v.value)
+      ).length === c.items.length : h.value?.includes(c.value))
+    ), re = () => R.value && !s.searching ? x.value.length : s.items.length, P = b(() => {
+      const c = D.value.length, f = re(), v = Y.value?.length || 0;
+      return v === 0 ? n("selectAll", { total: i(c) }) : v === f ? n("allSelected", { total: i(f) }) : v <= f ? n("numberOfTotalSelected", { number: i(v), total: i(f) }) : n("numbersSelected", { number: i(v) });
+    }), U = (c) => {
+      const f = (N) => {
+        const { isDisabled: E, isPreSelected: ue } = O(N);
+        return E && ue || !E;
+      }, v = c.filter(f).filter((N) => !h.value.includes(N.value));
+      r("select", [...s.selectedValues, ...v]);
+    }, Z = (c) => {
+      const f = (E) => {
+        const { isDisabled: ue, isPreSelected: dt } = O(E);
+        return !(ue && dt);
+      }, v = c.filter(f).map(({ value: E }) => E), N = s.selectedValues.filter((E) => !v?.includes(E.value));
+      r("select", N);
+    }, Ee = () => {
+      U(x.value);
+    }, Oe = () => {
+      Z(x.value);
+    }, { isAllSelected: z, isIndeterminate: se, toggleSelectAll: qe } = Fe(
+      Y,
+      D,
+      Ee,
+      Oe
+    ), ke = b(() => se.value ? "mixed" : `${z.value}`), ye = _(z.value), Te = () => {
+      ye.value = !ye.value, qe(ye.value);
+    };
+    ge(z, () => {
+      ye.value = z.value;
+    });
+    const Je = (c) => {
+      U(c.items);
+    }, Ae = (c) => {
+      Z(c.items);
+    }, ce = (c, f) => {
+      let v = !1;
+      const N = s.selectedValues.filter(({ value: E }) => f.value === E ? (v = !0, !1) : !0);
+      v || N.push(f), r(c, N);
+    }, Xe = b(() => {
+      if (!R.value)
+        return s.selectedValues;
+      const c = (E) => h.value.includes(E.value), f = (E) => !s.staticCategories && E.every((ue) => c(ue));
+      return s.items.flatMap(
+        (E) => E.items && !f(E.items) ? E.items : E
+      ).filter((E) => E.items ? !0 : c(E));
+    }), Ze = b(() => {
+      const c = ["automatic", "button"].includes(s.lazyLoadType), f = s.selectedValues?.length > 0 && Y.value?.length !== x.value?.length;
+      return c && s.hasMoreItems ? !!s.selectedValues?.length : f;
+    }), $e = b(() => ["automatic", "button"].includes(s.lazyLoadType) ? !s.hasMoreItems : !0), de = _([]), { visibleDomOptions: De, updateVisibleDomOptions: Qe } = We(
+      u,
+      pe(s, "items"),
+      T
+    ), et = (c) => {
+      de.value.includes(c) ? de.value = de.value.filter((f) => f !== c) : de.value.push(c), Ue(() => {
+        Qe();
+      });
+    }, tt = (c) => {
+      De.value[c]?.focus();
+    }, {
+      moveToNextElement: st,
+      moveToPreviousElement: lt,
+      moveToFirstElement: ot,
+      moveToLastElement: it,
+      preventDefault: Be,
+      focusedIndex: Re,
+      setListboxFocusedIndex: at
+    } = Ke(
+      {
+        items: De
+      },
+      tt
+    ), nt = {
+      [F.ARROW_UP]: (c) => lt(c),
+      [F.ARROW_DOWN]: (c) => st(c),
+      [F.HOME]: ot,
+      [F.END]: it
+    };
+    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: at
+    });
+    const rt = {
+      [F.ARROW_UP]: Be,
+      [F.ARROW_DOWN]: Be
+    }, ct = b(() => {
+      let c = 1;
+      const f = {};
+      return s.items.forEach((v) => {
+        let N = de.value.includes(v.value);
+        v.items ? (s.staticCategories ? N = !0 : f[v.value] = c++, N && v.items.forEach((E) => f[E.value] = c++)) : f[v.value] = c++;
+      }), f;
+    });
+    return (c, f) => (d(), y("div", {
+      ref_key: "listboxRef",
+      ref: u,
+      class: "b-listbox-multi-select"
+    }, [
+      Ze.value ? (d(), y("div", cs, [
+        ae((d(), y("ul", w({ class: "b-listbox-multi-select__chips" }, ee(rt, !0)), [
+          (d(!0), y(te, null, j(Xe.value, (v) => (d(), y("li", {
+            key: v.value
+          }, [
+            M(B(Ct), {
+              ref_for: !0,
+              ref_key: "selectedListboxItemsRef",
+              ref: m,
+              disabled: c.isOptionDisabled(v),
+              label: v.label,
+              condensed: "",
+              onClick: (N) => v.items ? Ae(v) : ce("select", v)
+            }, null, 8, ["disabled", "label", "onClick"])
+          ]))), 128))
+        ], 16)), [
+          [B(he)]
+        ]),
+        f[4] || (f[4] = G("hr", {
+          class: "b-listbox-multi-select__divider",
+          "aria-hidden": "true"
+        }, null, -1))
+      ])) : q("", !0),
+      ae((d(), y("div", w(a.value, { role: $.value }, ee(nt, !0)), [
+        $e.value ? (d(), k(B(Ce), {
+          key: 0,
+          ref_key: "selectAllListboxItemsRef",
+          ref: l,
+          class: "b-listbox-multi-select__option",
+          tabindex: B(Re) === 0 ? 0 : -1,
+          "aria-selected": ke.value !== "false",
+          "aria-checked": ke.value,
+          role: T.value,
+          onClick: Te,
+          onEnterPressed: Te,
+          onSpacePressed: ie(Te, ["prevent"])
+        }, {
+          default: L(() => [
+            M(B(Ie), {
+              checked: B(z),
+              indeterminate: B(se)
+            }, null, 8, ["checked", "indeterminate"]),
+            M(B(ne), { el: "span" }, {
+              default: L(() => [
+                K(V(P.value), 1)
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["tabindex", "aria-selected", "aria-checked", "role"])) : q("", !0),
+        $e.value ? (d(), y("hr", us)) : q("", !0),
+        M(B(ns), {
+          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: f[0] || (f[0] = (v) => ce("select", v)),
+          onSelectCategory: Je,
+          onUnselectCategory: Ae,
+          onToggleCategoryVisibility: et,
+          onSpacePressed: f[1] || (f[1] = (v) => ce(B(p).SPACE, v)),
+          onTabPressed: f[2] || (f[2] = (v) => ce(B(p).TAB, v)),
+          onEnterPressed: f[3] || (f[3] = (v) => ce(B(p).ENTER, v))
+        }, ve({ _: 2 }, [
+          j(B(g), (v, N) => ({
+            name: N,
+            fn: L((E) => [
+              W(c.$slots, N, 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 = {
+  "en-US": { loading: "Loading", showMore: "Show more" },
+  "ja-JP": { loading: "読み込み中", showMore: "表示内容を増やす" },
+  "pt-BR": { loading: "Carregando", showMore: "Mostrar mais" }
+}, ps = 36, vs = X({
+  name: "bento-listbox",
+  components: {
+    BentoEmptyState: ft,
+    BentoListboxSingleSelect: zt,
+    BentoListboxMultiSelect: xe,
+    BentoTypography: ne,
+    BentoLoadingIndicator: vt,
+    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 = _([]), r = pe(e, "items"), { t: n } = _e({ messages: Ve }), i = b(() => e.lazyLoadType !== le.AUTOMATIC), g = b(() => e.lazyLoadType === le.AUTOMATIC), S = () => typeof e?.virtualScroll == "object" && e?.virtualScroll?.itemHeight ? e.virtualScroll.itemHeight : ps, {
+      containerRef: a,
+      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 || i.value ? "true" : void 0
+    ), R = b(
+      () => i.value && e.loading || e.componentLoading ? "true" : "false"
+    ), x = b(
+      () => i.value || e.componentLoading !== void 0 ? "polite" : void 0
+    ), A = b(
+      () => ({
+        "aria-label": e.ariaLabel,
+        "aria-busy": R.value,
+        "aria-atomic": h.value,
+        "aria-live": x.value
+      })
+    ), $ = b(
+      () => e.componentLoading ? {
+        ...A.value,
+        role: "alert"
+      } : {}
+    ), T = (z) => (se) => {
+      t(z, se);
+    }, O = () => {
+      t(p.SHOW_MORE);
+    }, D = gt(() => {
+      const z = a.value;
+      if (!z)
+        return;
+      const se = Math.round(z.scrollTop) + z.clientHeight >= z.scrollHeight;
+      e.hasMoreItems && se && !e.loading && O();
+    }), Y = () => {
+      g.value ? D() : l();
+    }, re = b(() => e.items?.length === 0), P = b(
+      () => e.lazyLoadType === le.BUTTON && e.hasMoreItems
+    ), U = b(
+      () => e.loading ? Ne.LOADING : Ne.START
+    ), Z = b(() => e.loading ? n("loading") : n("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: a,
+      listboxItemRef: s,
+      // a11y
+      ariaAttributes: A,
+      listboxContainerAttributes: $,
+      // Values
+      containerProps: u,
+      isSearchResultEmpty: re,
+      limitedEmptyStateProps: Ee,
+      loadingButtonState: U,
+      slots: o,
+      shouldDisplayShowMoreButton: P,
+      showMoreButtonText: Z,
+      virtualisedItems: m,
+      wrapperProps: C,
+      // Enums
+      BentoKeyboardNavigationKeyDownEvent: F,
+      BentoListboxEvent: p,
+      // Methods
+      onListboxContainerScroll: Y,
+      onOptionSelected: T,
+      emitShowMore: O,
+      listboxListeners: Oe
+    };
+  }
+}), fs = ["id"], gs = {
+  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, n) {
+  const i = I("bento-loading-indicator"), g = I("bento-empty-state"), S = I("bento-typography"), a = I("bento-listbox-multi-select"), u = I("bento-listbox-single-select"), l = I("bento-loading-button"), m = ze("bento-keyboard-navigation-directive");
+  return ae((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", gs, [
+        M(i)
+      ])) : e.isSearchResultEmpty ? (d(), y("div", ys, [
+        e.emptyState ? (d(), k(g, oe(w({ key: 0 }, e.limitedEmptyStateProps)), null, 16)) : (d(), k(S, {
+          key: 1,
+          el: "span"
+        }, {
+          default: L(() => [
+            K(V(e.noResultsMessage), 1)
+          ]),
+          _: 1
+        }))
+      ])) : (d(), y(te, { key: 2 }, [
+        e.multiple ? (d(), k(a, 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)), ve({ _: 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(), k(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)), ve({ _: 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, [
+          M(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, [
+          M(i)
+        ])) : q("", !0)
+      ], 64))
+    ], 16)
+  ], 16, fs)), [
+    [m]
+  ]);
+}
+const Vs = /* @__PURE__ */ H(vs, [["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, Ys = (e, t, o, s) => {
+  const r = _([]), n = _(), i = (u) => {
+    o.value ? n.value = u.map(({ value: l }) => l) : n.value = u.length > 0 ? u[0].value : null;
+  }, g = (u) => {
+    o.value ? n.value = u.map(({ value: l, label: m }) => ({ value: l, label: m })) : n.value = u.length > 0 ? { value: u[0].value, label: u[0].label } : null;
+  }, S = (u) => {
+    r.value = u, s?.value ? g(u) : i(u);
+  }, a = () => {
+    r.value = [], n.value = null;
+  };
+  return ge(
+    () => t.value,
+    () => {
+      if (!t.value && t.value !== 0) {
+        a();
+        return;
+      }
+      const u = !Array.isArray(t.value), l = [...r.value];
+      a();
+      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 ? g(r.value) : i(r.value);
+        return;
+      }
+      t.value.forEach(m), s?.value ? g(r.value) : i(r.value);
+    },
+    { immediate: !0 }
+  ), {
+    // Values
+    cachedSelectedListboxOptions: r,
+    cachedListboxSelectedValues: n,
+    // Methods
+    resetCache: a,
+    setCachedValues: S
+  };
+};
+export {
+  p as B,
+  Nt as C,
+  Ie as D,
+  le as a,
+  Vs as b,
+  rs as c,
+  We as d,
+  Ys as u
+};
+//# sourceMappingURL=use-cached-selected-values.ClEJRFAd.js.map