@adyen/bento-vue3 1.63.2 → 1.64.0

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

@@ -0,0 +1,1591 @@
+import { computed as p, ref as B, onMounted as Ze, onUnmounted as Qe, watch as ne, defineComponent as J, resolveComponent as L, createElementBlock as O, openBlock as d, createVNode as P, createElementVNode as z, withCtx as I, createTextVNode as K, toDisplayString as F, renderSlot as W, mergeProps as Y, withKeys as Ce, createCommentVNode as X, createBlock as R, withModifiers as ae, normalizeProps as ie, guardReactiveProps as be, withDirectives as re, vShow as Pe, nextTick as Me, resolveDirective as xe, toHandlers as te, Fragment as se, renderList as q, createSlots as me, normalizeClass as ve, unref as N, toRef as _e, useSlots as et, useAttrs as tt } from "vue";
+import { B as V, a as pe } from "./keyboard-navigation.CqgGzfZQ.js";
+import "./events.FNmSWp_P.js";
+import { B as ce } from "./typography.DN5eC5ch.js";
+import { B as st } from "./loading-indicator.DEepb9Wl.js";
+import { B as lt } from "./empty-state.D7llINgF.js";
+import { u as Oe } from "./i18n.B6g5VX0q.js";
+import { d as ot } from "./debounce.DUTu11PS.js";
+import { B as it } from "./chip.CneNX2_j.js";
+import { _ as H } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import { C as fe, N as nt } from "./minus-small.DYIyF5XW.js";
+import { C as at } from "./checkmark-small.x-gmK2Dt.js";
+import { C as rt } from "./chevron-down.DCQ6ZLaq.js";
+import { C as ct } from "./chevron-up.kfuLRpZb.js";
+import { d as dt, e as De } from "./button-actions.D1pXI1AJ.js";
+/* empty css              */
+import { o as ut } from "./resize.Bqks3WUm.js";
+import "../assets/use-cached-selected-values.css";
+const Ge = (e, t, s, o) => {
+  const n = p(
+    () => {
+      var g, S;
+      return !!((g = e.value) != null && g.length) && ((S = e.value) == null ? void 0 : S.length) === t.value.length;
+    }
+  ), a = p(() => {
+    var g;
+    return e.value == null || e.value.length === 0 ? !1 : ((g = e.value) == null ? void 0 : g.length) !== t.value.length;
+  });
+  return {
+    isAllSelected: n,
+    isIndeterminate: a,
+    toggleSelectAll: (g) => {
+      g ? s() : o();
+    }
+  };
+};
+function bt(e, { disabled: t, itemHeight: s, overscan: o = 5, prefixHeight: n }) {
+  const a = B(null), r = B([]), g = B(0), S = B(0), i = B(0);
+  let c;
+  const l = p(() => {
+    const A = typeof s == "number" ? e.value.length * s : e.value.reduce(($, k, h) => $ + s(h), 0), x = typeof s == "number" ? g.value * s : e.value.slice(0, g.value).reduce(($, k, h) => $ + s(h), 0);
+    return {
+      style: {
+        marginTop: `${x}px`,
+        height: `${A - x}px`
+      }
+    };
+  }), m = () => {
+    const A = (n == null ? void 0 : n.value) ?? 0, x = Math.max(a.value.scrollTop - A, 0);
+    if (typeof s == "number")
+      return Math.floor(x / s);
+    let $ = 0, k = 0;
+    for (let h = 0; h < e.value.length; h += 1) {
+      const C = s(h);
+      if ($ += C, $ >= x) {
+        k = h;
+        break;
+      }
+    }
+    return k;
+  }, y = () => {
+    if (i.value = a.value.clientHeight, typeof s == "number")
+      return Math.ceil(i.value / s);
+    const A = g.value ?? 0;
+    let x = 0, $ = 0;
+    for (let k = A; k < e.value.length; k += 1) {
+      const h = s(k);
+      if (x += h, $ = k, x > i.value)
+        break;
+    }
+    return $ - A;
+  }, T = () => {
+    if (a.value) {
+      const A = y();
+      g.value = m(), S.value = Math.min(g.value + A + o, e.value.length), r.value = e.value.slice(g.value, S.value);
+    }
+  }, M = () => {
+    T();
+  };
+  t || (Ze(() => {
+    a.value && (i.value = a.value.clientHeight, c = ut(a.value, ({ clientHeight: A }) => {
+      i.value = A, T();
+    }), T());
+  }), Qe(() => {
+    c == null || c.disconnect();
+  }), ne(
+    () => e.value,
+    () => {
+      T();
+    }
+  ));
+  const D = {
+    ref: a,
+    style: { overflowY: "auto" }
+  };
+  return t ? {
+    containerRef: a,
+    containerProps: D,
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onScroll: () => {
+    },
+    list: e
+  } : {
+    containerRef: a,
+    containerProps: D,
+    onScroll: M,
+    list: r,
+    wrapperProps: l
+  };
+}
+var v = /* @__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))(v || {}), oe = /* @__PURE__ */ ((e) => (e.AUTOMATIC = "automatic", e.BUTTON = "button", e.NONE = "none", e))(oe || {});
+const mt = J({
+  name: "bento-listbox-static-category",
+  components: {
+    BentoTypography: ce
+  },
+  props: {
+    /**
+     * Category label text
+     */
+    categoryLabel: {
+      type: String,
+      required: !0
+    }
+  }
+}), vt = { class: "b-listbox-single-select-category" };
+function ft(e, t, s, o, n, a) {
+  const r = L("bento-typography");
+  return d(), O("div", vt, [
+    P(r, {
+      variant: "caption",
+      el: "span",
+      class: "b-listbox-single-select-category__label-text"
+    }, {
+      default: I(() => [
+        K(F(e.categoryLabel), 1)
+      ]),
+      _: 1
+    }),
+    z("div", null, [
+      W(e.$slots, "default", {}, void 0, !0)
+    ])
+  ]);
+}
+const pt = /* @__PURE__ */ H(mt, [["render", ft], ["__scopeId", "data-v-a90eff17"]]), gt = J({
+  name: "bento-listbox-option",
+  props: {
+    /**
+     * Setting this property to true will disable the option.
+     */
+    disabled: { type: Boolean, default: !1 },
+    /**
+     * Indicates if the value is selected. Only one element can be selected at a time.
+     */
+    selected: { type: Boolean, default: !1 }
+  },
+  emits: [v.CLICK, v.ENTER, v.SPACE, v.TAB],
+  setup(e, { emit: t }) {
+    const s = p(() => ({
+      "b-listbox-option--disabled": e.disabled,
+      "b-listbox-option--selected": e.selected
+    }));
+    return {
+      // Enums
+      BentoKeyboardNavigationKeyDownEvent: V,
+      BentoListboxEvent: v,
+      // Values
+      conditionalClasses: s,
+      // Events
+      onClick: (a) => {
+        t(v.CLICK, a);
+      },
+      onOptionSelected: (a, r) => {
+        t(a, r);
+      }
+    };
+  }
+});
+function yt(e, t, s, o, n, a) {
+  return d(), O("div", Y({
+    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] = Ce((r) => e.onOptionSelected(e.BentoListboxEvent.ENTER, r), ["enter"])),
+      t[2] || (t[2] = Ce((r) => e.onOptionSelected(e.BentoListboxEvent.SPACE, r), ["space"])),
+      t[3] || (t[3] = Ce((r) => e.onOptionSelected(e.BentoListboxEvent.TAB, r), ["tab"]))
+    ]
+  }), [
+    W(e.$slots, "default", {}, void 0, !0)
+  ], 16);
+}
+const ge = /* @__PURE__ */ H(gt, [["render", yt], ["__scopeId", "data-v-b7af43a6"]]);
+let Be = 0;
+const St = {
+  beforeCreate() {
+    this.uuid = Be.toString(), Be += 1;
+  }
+}, ht = { key: 0 };
+function Ct(e, t, s, o, n, a) {
+  return d(), O("svg", Y({ 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(), O("title", ht, F(e.$attrs["svg-title"]), 1)) : X("", !0),
+    t[0] || (t[0] = z("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 Et = /* @__PURE__ */ H(St, [["render", Ct]]), _t = J({
+  name: "bento-listbox-single-select-option",
+  components: {
+    BentoListboxOption: ge,
+    BentoTypography: ce,
+    CheckmarkIcon: Et
+  },
+  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: [v.ENTER, v.SELECT, v.SPACE, v.TAB],
+  setup(e, { emit: t }) {
+    const s = (r) => {
+      e.disabled || t(r, e.option);
+    }, o = p(() => e.disabled ? !0 : null), n = p(() => e.selected ? !0 : null), a = p(() => e.disabled ? -1 : 0);
+    return {
+      // Values
+      ariaDisabled: o,
+      ariaSelected: n,
+      tabIndex: a,
+      // Enums
+      BentoListboxEvent: v,
+      // Events
+      onOptionSelected: s
+    };
+  }
+}), Ot = { class: "b-listbox-single-select-option__text" }, Tt = { class: "b-listbox-single-select-option__check-icon" };
+function It(e, t, s, o, n, a) {
+  const r = L("bento-typography"), g = L("checkmark-icon"), S = L("bento-listbox-option");
+  return d(), R(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] = (i) => e.onOptionSelected(e.BentoListboxEvent.SELECT)),
+    onEnterPressed: t[1] || (t[1] = (i) => e.onOptionSelected(e.BentoListboxEvent.ENTER)),
+    onSpacePressed: t[2] || (t[2] = ae((i) => e.onOptionSelected(e.BentoListboxEvent.SPACE), ["prevent"])),
+    onTabPressed: t[3] || (t[3] = (i) => e.onOptionSelected(e.BentoListboxEvent.TAB))
+  }, {
+    default: I(() => [
+      W(e.$slots, "default", ie(be(e.option)), () => [
+        z("span", Ot, [
+          P(r, { el: "span" }, {
+            default: I(() => [
+              K(F(e.option.label), 1)
+            ]),
+            _: 1
+          }),
+          e.option.description ? (d(), R(r, {
+            key: 0,
+            class: "b-listbox-single-select-option__description",
+            el: "span"
+          }, {
+            default: I(() => [
+              K(F(e.option.description), 1)
+            ]),
+            _: 1
+          })) : X("", !0)
+        ])
+      ], !0),
+      z("span", Tt, [
+        re(P(g, { "svg-title": "selected" }, null, 512), [
+          [Pe, e.selected]
+        ])
+      ])
+    ]),
+    _: 3
+  }, 8, ["disabled", "selected", "aria-selected", "aria-disabled", "tabindex"]);
+}
+const At = /* @__PURE__ */ H(_t, [["render", It], ["__scopeId", "data-v-226f4c84"]]), we = ({ items: e }, t) => {
+  const s = p(() => e.value.length - 1), o = B(0), n = (m) => {
+    switch (m) {
+      case "increase":
+        o.value += 1;
+        break;
+      case "decrease":
+        o.value -= 1;
+        break;
+    }
+  }, a = ({ edgeCaseItem: m }, y) => {
+    o.value !== m && (n(y), t(o.value));
+  }, r = (m) => {
+    l(m), a(
+      {
+        edgeCaseItem: s.value
+      },
+      "increase"
+      /* INCREASE */
+    );
+  }, g = (m) => {
+    l(m), a(
+      {
+        edgeCaseItem: 0
+      },
+      "decrease"
+      /* DECREASE */
+    );
+  }, S = () => {
+    o.value = 0, t(o.value);
+  }, i = () => {
+    o.value = s.value, t(o.value);
+  }, c = (m) => {
+    o.value = m;
+  }, l = (m) => {
+    var y;
+    (y = m == null ? void 0 : m.detail) == null || y.preventDefault();
+  };
+  return {
+    moveToFirstElement: S,
+    moveToLastElement: i,
+    moveToNextElement: r,
+    moveToPreviousElement: g,
+    setListboxFocusedIndex: c,
+    preventDefault: l,
+    focusedIndex: o
+  };
+}, kt = J({
+  name: "bento-listbox-single-select",
+  components: {
+    BentoListboxSingleSelectCategory: pt,
+    BentoListboxSingleSelectOption: At
+  },
+  directives: { BentoKeyboardNavigationDirective: pe },
+  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: [v.SELECT, v.ENTER, v.SPACE, v.TAB],
+  setup(e, { emit: t, expose: s, slots: o, attrs: n }) {
+    const a = B(null), r = B([]), g = p(() => {
+      var h;
+      return !!((h = e.selectedValue) != null && h.length) && e.selectedValue.at(0);
+    }), S = p(
+      () => {
+        var h, C, U, G;
+        return {
+          "aria-label": (h = n["aria-label"]) == null ? void 0 : h.toString(),
+          "aria-busy": (C = n["aria-busy"]) == null ? void 0 : C.toString(),
+          "aria-atomic": (U = n["aria-atomic"]) == null ? void 0 : U.toString(),
+          "aria-live": (G = n["aria-live"]) == null ? void 0 : G.toString()
+        };
+      }
+    ), i = p(() => !!e.items.some(({ items: h }) => !!h)), c = (h) => (C) => {
+      t(h, [C]);
+    }, l = async () => {
+      await Me(), a.value && (m.value = Array.from(a.value.querySelectorAll('[role="option"]')));
+    }, m = B([]), y = (h) => {
+      var C;
+      (C = m.value[h]) == null || C.focus();
+    }, {
+      moveToNextElement: T,
+      moveToPreviousElement: M,
+      moveToFirstElement: D,
+      moveToLastElement: A,
+      setListboxFocusedIndex: x
+    } = we(
+      {
+        items: m
+      },
+      y
+    );
+    ne(
+      () => e.items,
+      () => {
+        l();
+      },
+      { immediate: !0 }
+    );
+    const $ = {
+      [V.ARROW_UP]: M,
+      [V.ARROW_DOWN]: T,
+      [V.HOME]: D,
+      [V.END]: A
+    }, k = {
+      [v.SELECT]: c(v.SELECT),
+      [v.SPACE]: c(v.SPACE),
+      [v.TAB]: c(v.TAB),
+      [v.ENTER]: c(v.ENTER)
+    };
+    return s({
+      /**
+       * 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: x
+    }), {
+      // Enums
+      BentoListboxEvent: v,
+      // Values
+      listboxRef: a,
+      listboxItemRef: r,
+      selectedItem: g,
+      slots: o,
+      ariaAttributes: S,
+      // Computed
+      hasCategories: i,
+      // Methods
+      onOptionSelected: c,
+      // Keyboard navigation
+      listboxListeners: $,
+      listboxOptionListeners: k
+    };
+  }
+});
+function Lt(e, t, s, o, n, a) {
+  const r = L("bento-listbox-single-select-option"), g = L("bento-listbox-single-select-category"), S = xe("bento-keyboard-navigation-directive");
+  return re((d(), O("div", Y({ ref: "listboxRef" }, e.ariaAttributes, { role: "listbox" }, te(e.listboxListeners, !0)), [
+    e.hasCategories && e.staticCategories ? (d(!0), O(se, { key: 0 }, q(e.items, (i) => (d(), R(g, {
+      key: i.value,
+      "category-label": i.label,
+      role: "group"
+    }, {
+      default: I(() => [
+        (d(!0), O(se, null, q(i.items, (c) => (d(), R(r, Y({
+          key: c.value,
+          ref_for: !0,
+          ref: "listboxItemRef",
+          role: "option",
+          option: c,
+          disabled: e.isOptionDisabled ? e.isOptionDisabled(c) : null,
+          selected: c.value === e.selectedItem.value
+        }, te(e.listboxOptionListeners)), me({ _: 2 }, [
+          q(e.slots, (l, m) => ({
+            name: m,
+            fn: I((y) => [
+              W(e.$slots, m, Y({ ref_for: !0 }, y))
+            ])
+          }))
+        ]), 1040, ["option", "disabled", "selected"]))), 128))
+      ]),
+      _: 2
+    }, 1032, ["category-label"]))), 128)) : (d(!0), O(se, { key: 1 }, q(e.items, (i) => (d(), R(r, Y({
+      key: i.value,
+      ref_for: !0,
+      ref: "listboxItemRef",
+      role: "option",
+      option: i,
+      disabled: e.isOptionDisabled ? e.isOptionDisabled(i) : null,
+      selected: i.value === e.selectedItem.value
+    }, te(e.listboxOptionListeners)), me({ _: 2 }, [
+      q(e.slots, (c, l) => ({
+        name: l,
+        fn: I((m) => [
+          W(e.$slots, l, Y({ ref_for: !0 }, m))
+        ])
+      }))
+    ]), 1040, ["option", "disabled", "selected"]))), 128))
+  ], 16)), [
+    [S]
+  ]);
+}
+const $t = /* @__PURE__ */ H(kt, [["render", Lt]]), Dt = {}, Bt = /* @__PURE__ */ J({
+  ...Dt,
+  __name: "listbox-decorative-checkbox",
+  props: {
+    disabled: { type: Boolean, default: !1 },
+    indeterminate: { type: Boolean, default: !1 },
+    checked: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    const t = e, s = p(() => ({
+      [`b-checkbox-input--${fe.DISABLED}`]: t.disabled
+    })), o = p(() => ({
+      [`b-checkbox-input__outline--${fe.UNCHECKED}`]: !t.checked && !t.indeterminate,
+      [`b-checkbox-input__outline--${fe.CHECKED}`]: t.checked && !t.indeterminate,
+      [`b-checkbox-input__outline--${fe.INDETERMINATE}`]: t.indeterminate
+    }));
+    return (n, a) => (d(), O("div", {
+      class: ve(["b-checkbox-input", s.value]),
+      role: "presentation"
+    }, [
+      n.indeterminate ? (d(), R(N(nt), {
+        key: 0,
+        class: "b-checkbox-input__icon",
+        "svg-title": "",
+        "aria-hidden": "true"
+      })) : n.checked ? (d(), R(N(at), {
+        key: 1,
+        class: "b-checkbox-input__icon",
+        "svg-title": "",
+        "aria-hidden": "true"
+      })) : X("", !0),
+      z("div", {
+        class: ve(["b-checkbox-input__outline", o.value])
+      }, null, 2)
+    ], 2));
+  }
+}), Te = /* @__PURE__ */ H(Bt, [["__scopeId", "data-v-c604b68a"]]);
+var Ye = /* @__PURE__ */ ((e) => (e.DISABLED = "disabled", e.STATIC_CATEGORY = "static-category", e))(Ye || {}), ee = /* @__PURE__ */ ((e) => (e.SELECT_CATEGORY = "select-category", e.UNSELECT_CATEGORY = "unselect-category", e.TOGGLE_CATEGORY_VISIBILITY = "toggle-category-visibility", e))(ee || {});
+const Rt = {
+  "en-US": {
+    categoryClosed: "{category} closed",
+    categoryOpened: "{category} opened"
+  }
+}, Nt = J({
+  i18n: { messages: Rt },
+  name: "bento-listbox-multi-select-category",
+  components: {
+    BentoTypography: ce,
+    BentoListboxOption: ge,
+    ChevronDownIcon: rt,
+    ChevronUpIcon: ct,
+    ListboxDecorativeCheckbox: Te
+  },
+  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: [
+    ee.SELECT_CATEGORY,
+    ee.UNSELECT_CATEGORY,
+    ee.TOGGLE_CATEGORY_VISIBILITY
+  ],
+  setup(e, { emit: t }) {
+    const s = B(!1), { t: o } = Oe(), n = (C) => e.isOptionDisabled ? e.isOptionDisabled(C) : !1, a = p(
+      () => e.category.items.every((C) => n(C))
+    ), r = _e(e, "staticCategories"), g = p(() => s.value || e.staticCategories), S = p(() => ({
+      [`b-listbox-multi-select-category--${Ye.DISABLED}`]: a.value
+    })), i = (C) => {
+      C.preventDefault(), s.value = !s.value, t(ee.TOGGLE_CATEGORY_VISIBILITY);
+    }, c = (C) => {
+      var Q;
+      const U = n(C), G = ((Q = e.selectedItemsList) == null ? void 0 : Q.includes(C.value)) || !1;
+      return { isDisabled: U, isPreSelected: G };
+    }, l = p(
+      () => e.category.items.filter((C) => {
+        const { isDisabled: U, isPreSelected: G } = c(C);
+        return U && G || !U;
+      })
+    ), m = p(
+      () => {
+        var C;
+        return (C = l.value) == null ? void 0 : C.filter(
+          ({ value: U }) => {
+            var G;
+            return (G = e.selectedItemsList) == null ? void 0 : G.includes(U);
+          }
+        );
+      }
+    ), y = p(() => {
+      const C = s.value ? "categoryOpened" : "categoryClosed";
+      return o(C, { category: e.category.label });
+    }), T = () => {
+      t(ee.SELECT_CATEGORY);
+    }, M = () => {
+      t(ee.UNSELECT_CATEGORY);
+    }, { isAllSelected: D, isIndeterminate: A, toggleSelectAll: x } = Ge(
+      m,
+      l,
+      T,
+      M
+    ), $ = p(() => A.value ? "mixed" : `${D.value}`), k = B(D.value), h = () => {
+      k.value = !k.value, x(k.value);
+    };
+    return ne(D, () => {
+      k.value = D.value;
+    }), {
+      // Values
+      chevronTitle: y,
+      conditionalClass: S,
+      hasAllPropsDisabled: a,
+      isOpen: s,
+      isAllSelected: D,
+      isIndeterminate: A,
+      isStaticCategory: r,
+      // Computed
+      showItemChildren: g,
+      ariaCheckedComputed: $,
+      // Methods
+      handleSelectAll: h,
+      toggleOpen: i,
+      toggleSelectAll: x
+    };
+  }
+}), Pt = { class: "b-listbox-multi-select-category__label" }, Mt = {
+  key: 1,
+  class: "b-listbox-multi-select-category b-listbox-multi-select-category--static-category"
+}, xt = { class: "b-listbox-multi-select-category__label" };
+function Gt(e, t, s, o, n, a) {
+  const r = L("listbox-decorative-checkbox"), g = L("bento-typography"), S = L("chevron-up-icon"), i = L("chevron-down-icon"), c = L("bento-listbox-option");
+  return d(), O("div", null, [
+    e.isStaticCategory ? (d(), O("div", Mt, [
+      z("span", xt, [
+        P(g, {
+          el: "span",
+          variant: "caption",
+          class: "b-listbox-multi-select-category__label-text"
+        }, {
+          default: I(() => [
+            K(F(e.category.label), 1)
+          ]),
+          _: 1
+        })
+      ])
+    ])) : (d(), R(c, {
+      key: 0,
+      class: ve(["b-listbox-multi-select-category__option", e.conditionalClass]),
+      tabindex: e.tabindex,
+      "aria-checked": e.ariaCheckedComputed,
+      "aria-disabled": e.hasAllPropsDisabled,
+      onClick: e.handleSelectAll,
+      onEnterPressed: e.handleSelectAll,
+      onSpacePressed: ae(e.handleSelectAll, ["prevent"])
+    }, {
+      default: I(() => [
+        P(r, {
+          indeterminate: e.isIndeterminate,
+          disabled: e.hasAllPropsDisabled,
+          checked: e.isAllSelected
+        }, null, 8, ["indeterminate", "disabled", "checked"]),
+        z("span", Pt, [
+          P(g, {
+            el: "span",
+            class: "b-listbox-multi-select-category__label-text"
+          }, {
+            default: I(() => [
+              K(F(e.category.label), 1)
+            ]),
+            _: 1
+          }),
+          z("div", {
+            class: "b-listbox-multi-select-category__label-chevron",
+            "data-testid": "toggle-listbox",
+            onClickCapture: t[0] || (t[0] = ae((...l) => e.toggleOpen && e.toggleOpen(...l), ["stop"]))
+          }, [
+            e.isOpen ? (d(), R(S, {
+              key: 0,
+              "svg-title": e.chevronTitle
+            }, null, 8, ["svg-title"])) : (d(), R(i, {
+              key: 1,
+              "svg-title": e.chevronTitle
+            }, null, 8, ["svg-title"]))
+          ], 32)
+        ])
+      ]),
+      _: 1
+    }, 8, ["class", "tabindex", "aria-checked", "aria-disabled", "onClick", "onEnterPressed", "onSpacePressed"])),
+    re(z("div", null, [
+      W(e.$slots, "default", {}, void 0, !0)
+    ], 512), [
+      [Pe, e.showItemChildren]
+    ])
+  ]);
+}
+const wt = /* @__PURE__ */ H(Nt, [["render", Gt], ["__scopeId", "data-v-40db801f"]]);
+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 Yt = J({
+  name: "listbox-multi-select-options",
+  components: {
+    BentoListboxOption: ge,
+    BentoTypography: ce,
+    ListboxMultiSelectCategory: wt,
+    ListboxDecorativeCheckbox: Te
+  },
+  props: {
+    /**
+     * Indicates if the items listed are inside a category
+     * so they can be padded to right by one level in recursion.
+     * Items of categories are automatically defined as "categoryItems"
+     */
+    categoryItems: { type: Boolean, default: !1 },
+    /**
+     * Current focused option index
+     */
+    focusedIndex: { type: Number, default: 0 },
+    /**
+     * Function that allows the options to be disabled
+     *
+     * @type {BentoListboxIsOptionDisabled}
+     * @param {BentoListboxOptionItem} option - listbox option object
+     * @param {string} option.label - Option's label text
+     * @param {string|number} option.value - Option's value
+     * @param {unknown} option.data - Option's extra data to be passed to the default slot
+     */
+    isOptionDisabled: {
+      type: Function,
+      default: () => !1
+    },
+    /**
+     * The option elements to populate the listbox with.
+     * It must be an array of {@see BentoListboxOptionItem }.
+     *
+     * @property {string} value.label - Text to be displayed in the option
+     * @property {string,number} value.value - Value of the option
+     */
+    items: {
+      type: Array,
+      required: !0
+    },
+    /**
+     * Indicates if the elements options are inside a multi-level category
+     */
+    isMultiLevel: { type: Boolean, default: !1 },
+    /**
+     * Flag that indicates that an external search it's being made
+     * to filter out the items inside the the multi-select listbox
+     *
+     * If enabled, hides the "Select all" checkbox in "multiple" mode.
+     */
+    searching: { type: Boolean, default: !1 },
+    /**
+     * List of selected items.
+     * Providing an empty array will select no options.
+     */
+    selectedItemsList: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * If enabled, dropdown will display non-selectable, static categories
+     */
+    staticCategories: { type: Boolean, default: !1 }
+  },
+  emits: [
+    j.TOGGLE_CHECKBOX_SELECTION,
+    j.SELECT_CATEGORY,
+    j.UNSELECT_CATEGORY,
+    j.TOGGLE_CATEGORY_VISIBILITY
+  ],
+  setup(e, { emit: t }) {
+    const s = (i) => {
+      e.isOptionDisabled(i) || t(j.TOGGLE_CHECKBOX_SELECTION, i);
+    }, o = (i) => !!i.items, n = (i) => {
+      const c = e.isMultiLevel && e.searching;
+      return i.description && (!e.isMultiLevel || c);
+    }, a = (i) => i.items ? !!i.items.find((c) => e.selectedItemsList.includes(c.value)) : e.selectedItemsList.includes(i.value), r = (i) => {
+      if (o(i)) {
+        const c = a(i) ? j.UNSELECT_CATEGORY : j.SELECT_CATEGORY;
+        t(c, i);
+      } else
+        s(i);
+    };
+    return {
+      // Values
+      conditionalClasses: p(() => ({
+        "b-listbox-multi-select-options__static-category-option": e.staticCategories,
+        "b-listbox-multi-select-options__category-option": e.categoryItems
+      })),
+      // Methods
+      isOptionSelected: a,
+      shouldShowDescription: n,
+      toggleCheckboxSelection: s,
+      toggleSearchOption: r,
+      computedTabindex: (i) => i + 1 === e.focusedIndex ? 0 : -1,
+      // Enums
+      BentoListboxEvent: v,
+      ListboxMultiSelectOptionsEvent: j
+    };
+  }
+}), Ut = { class: "b-listbox-multi-select__option-text" }, zt = { class: "b-listbox-multi-select__option-text" };
+function Ft(e, t, s, o, n, a) {
+  const r = L("listbox-decorative-checkbox"), g = L("bento-typography"), S = L("bento-listbox-option"), i = L("listbox-multi-select-options", !0), c = L("listbox-multi-select-category");
+  return d(), O("div", null, [
+    (d(!0), O(se, null, q(e.items, (l, m) => (d(), O("div", {
+      key: `selected-${l.value}`
+    }, [
+      e.searching && e.isMultiLevel ? (d(), R(S, {
+        key: 0,
+        class: ve(["b-listbox-multi-select-options", e.conditionalClasses]),
+        disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null,
+        tabindex: e.computedTabindex(m),
+        "aria-checked": `${e.isOptionSelected(l)}`,
+        "aria-disabled": e.isOptionDisabled ? e.isOptionDisabled(l) : null,
+        onClick: (y) => e.toggleSearchOption(l),
+        onEnterPressed: (y) => e.toggleSearchOption(l),
+        onSpacePressed: ae((y) => e.toggleSearchOption(l), ["prevent"])
+      }, {
+        default: I(() => [
+          P(r, {
+            disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null,
+            checked: e.isOptionSelected(l)
+          }, null, 8, ["disabled", "checked"]),
+          W(e.$slots, "default", Y({ ref_for: !0 }, l), () => [
+            z("span", Ut, [
+              P(g, { el: "span" }, {
+                default: I(() => [
+                  K(F(l.label), 1)
+                ]),
+                _: 2
+              }, 1024),
+              e.shouldShowDescription(l) ? (d(), R(g, {
+                key: 0,
+                class: "b-listbox-multi-select__option-description",
+                el: "span"
+              }, {
+                default: I(() => [
+                  K(F(l.description), 1)
+                ]),
+                _: 2
+              }, 1024)) : X("", !0)
+            ])
+          ], !0)
+        ]),
+        _: 2
+      }, 1032, ["class", "disabled", "tabindex", "aria-checked", "aria-disabled", "onClick", "onEnterPressed", "onSpacePressed"])) : (d(), O(se, { key: 1 }, [
+        l.items ? (d(), R(c, {
+          key: 0,
+          category: l,
+          "static-categories": e.staticCategories,
+          "is-option-disabled": e.isOptionDisabled,
+          "selected-items-list": e.selectedItemsList,
+          tabindex: e.computedTabindex(m),
+          onSelectCategory: (y) => e.$emit(e.ListboxMultiSelectOptionsEvent.SELECT_CATEGORY, l),
+          onUnselectCategory: (y) => e.$emit(e.ListboxMultiSelectOptionsEvent.UNSELECT_CATEGORY, l),
+          onToggleCategoryVisibility: t[1] || (t[1] = (y) => e.$emit(e.ListboxMultiSelectOptionsEvent.TOGGLE_CATEGORY_VISIBILITY))
+        }, {
+          default: I(() => [
+            P(i, {
+              "category-items": "",
+              items: l.items,
+              "is-option-disabled": e.isOptionDisabled,
+              "focused-index": e.focusedIndex,
+              "is-multi-level": e.isMultiLevel,
+              "static-categories": e.staticCategories,
+              "selected-items-list": e.selectedItemsList,
+              searching: e.searching,
+              onToggleCheckboxSelection: t[0] || (t[0] = (y) => e.toggleCheckboxSelection(y))
+            }, null, 8, ["items", "is-option-disabled", "focused-index", "is-multi-level", "static-categories", "selected-items-list", "searching"])
+          ]),
+          _: 2
+        }, 1032, ["category", "static-categories", "is-option-disabled", "selected-items-list", "tabindex", "onSelectCategory", "onUnselectCategory"])) : (d(), R(S, {
+          key: 1,
+          class: ve(["b-listbox-multi-select-options", e.conditionalClasses]),
+          disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null,
+          tabindex: e.computedTabindex(m),
+          "aria-checked": `${e.isOptionSelected(l)}`,
+          "aria-disabled": e.isOptionDisabled ? e.isOptionDisabled(l) : null,
+          onClick: (y) => e.toggleCheckboxSelection(l),
+          onEnterPressed: (y) => e.toggleCheckboxSelection(l),
+          onSpacePressed: ae((y) => e.toggleCheckboxSelection(l), ["prevent"])
+        }, {
+          default: I(() => [
+            P(r, {
+              disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null,
+              checked: e.isOptionSelected(l)
+            }, null, 8, ["disabled", "checked"]),
+            W(e.$slots, "default", Y({ ref_for: !0 }, l), () => [
+              z("span", zt, [
+                P(g, { el: "span" }, {
+                  default: I(() => [
+                    K(F(l.label), 1)
+                  ]),
+                  _: 2
+                }, 1024),
+                e.shouldShowDescription(l) ? (d(), R(g, {
+                  key: 0,
+                  class: "b-listbox-multi-select__option-description",
+                  el: "span"
+                }, {
+                  default: I(() => [
+                    K(F(l.description), 1)
+                  ]),
+                  _: 2
+                }, 1024)) : X("", !0)
+              ])
+            ], !0)
+          ]),
+          _: 2
+        }, 1032, ["class", "disabled", "tabindex", "aria-checked", "aria-disabled", "onClick", "onEnterPressed", "onSpacePressed"]))
+      ], 64))
+    ]))), 128))
+  ]);
+}
+const Vt = /* @__PURE__ */ H(Yt, [["render", Ft], ["__scopeId", "data-v-e26ceb2d"]]), Kt = (e) => {
+  const t = p(() => {
+    var o;
+    return !!((o = e.value) != null && o.find(({ items: n }) => !!n));
+  }), s = p(() => {
+    var o;
+    return t.value ? (o = e.value) == null ? void 0 : o.reduce((n, a) => (a.items ? n.push(...a.items.flat()) : n.push(a), n), []) : e.value;
+  });
+  return {
+    isMultiLevelSelect: t,
+    flattenedItemsList: s
+  };
+}, Ue = {
+  "en-US": {
+    allSelected: "All selected ({total})",
+    numberOfTotalSelected: "{number} of {total} selected",
+    numbersSelected: "{number} selected",
+    selectAll: "Select all ({total})"
+  }
+}, Wt = { key: 0 }, qt = {
+  key: 1,
+  class: "b-listbox-multi-select__divider",
+  "aria-hidden": "true"
+}, Ht = { i18n: { messages: Ue } }, jt = /* @__PURE__ */ J({
+  ...Ht,
+  __name: "listbox-multi-select",
+  props: {
+    hasMoreItems: { type: Boolean, default: !1 },
+    isOptionDisabled: { type: Function, default: () => !1 },
+    items: {},
+    lazyLoadType: { default: "none" },
+    searching: { type: Boolean, default: !1 },
+    selectedValues: {},
+    staticCategories: { type: Boolean, default: !1 }
+  },
+  emits: ["select"],
+  setup(e, { emit: t }) {
+    const s = e, o = t, { t: n } = Oe({ messages: Ue }), a = et(), r = tt(), g = p(
+      () => {
+        var u, f, b, _;
+        return {
+          "aria-label": (u = r["aria-label"]) == null ? void 0 : u.toString(),
+          "aria-busy": (f = r["aria-busy"]) == null ? void 0 : f.toString(),
+          "aria-atomic": (b = r["aria-atomic"]) == null ? void 0 : b.toString(),
+          "aria-live": (_ = r["aria-live"]) == null ? void 0 : _.toString()
+        };
+      }
+    ), S = B(null), i = B(null), c = B(null), l = B(null), m = p(() => s.selectedValues.map(({ value: u }) => u)), { isMultiLevelSelect: y, flattenedItemsList: T } = Kt(_e(s, "items")), M = (u) => {
+      var _;
+      const f = s.isOptionDisabled(u), b = ((_ = m.value) == null ? void 0 : _.includes(u.value)) || !1;
+      return { isDisabled: f, isPreSelected: b };
+    }, D = p(() => {
+      if (s.searching && y)
+        return s.items;
+      const u = T.value.filter((f) => {
+        const { isDisabled: b, isPreSelected: _ } = M(f);
+        return b && _ || !b;
+      });
+      return s.selectedValues.forEach((f) => {
+        u.find((b) => b.value === f.value) || u.push(f);
+      }), u;
+    }), A = p(
+      () => {
+        var u;
+        return (u = D.value) == null ? void 0 : u.filter((f) => {
+          var b;
+          return f.items && y.value && s.searching ? f.items.filter(
+            (E) => (s.selectedValues ?? []).includes(E.value)
+          ).length === f.items.length : (b = m.value) == null ? void 0 : b.includes(f.value);
+        });
+      }
+    ), x = () => y.value && !s.searching ? T.value.length : s.items.length, $ = p(() => {
+      var _;
+      const u = D.value.length, f = x(), b = ((_ = A.value) == null ? void 0 : _.length) || 0;
+      return b === 0 ? n("selectAll", { total: u }) : b === f ? n("allSelected", { total: f }) : b <= f ? n("numberOfTotalSelected", { number: b, total: f }) : n("numbersSelected", { number: b });
+    }), k = (u) => {
+      const f = (_) => {
+        const { isDisabled: E, isPreSelected: Z } = M(_);
+        return E && Z || !E;
+      }, b = u.filter(f).filter((_) => !m.value.includes(_.value));
+      o("select", [...s.selectedValues, ...b]);
+    }, h = (u) => {
+      const f = (E) => {
+        const { isDisabled: Z, isPreSelected: Je } = M(E);
+        return !(Z && Je);
+      }, b = u.filter(f).map(({ value: E }) => E), _ = s.selectedValues.filter((E) => !(b != null && b.includes(E.value)));
+      o("select", _);
+    }, C = () => {
+      k(T.value);
+    }, U = () => {
+      h(T.value);
+    }, { isAllSelected: G, isIndeterminate: Q, toggleSelectAll: ye } = Ge(
+      A,
+      D,
+      C,
+      U
+    ), Se = p(() => Q.value ? "mixed" : `${G.value}`), le = B(G.value), w = () => {
+      le.value = !le.value, ye(le.value);
+    };
+    ne(G, () => {
+      le.value = G.value;
+    });
+    const de = (u) => {
+      k(u.items);
+    }, Ie = (u) => {
+      h(u.items);
+    }, ue = (u, f) => {
+      let b = !1;
+      const _ = s.selectedValues.filter(({ value: E }) => f.value === E ? (b = !0, !1) : !0);
+      b || _.push(f), o(u, _);
+    }, ze = p(() => {
+      if (!y.value)
+        return s.selectedValues;
+      const u = (E) => m.value.includes(E.value), f = (E) => !s.staticCategories && E.every((Z) => u(Z));
+      return s.items.flatMap(
+        (E) => E.items && !f(E.items) ? E.items : E
+      ).filter((E) => E.items ? !0 : u(E));
+    }), Fe = p(() => {
+      var b, _, E, Z;
+      const u = ["automatic", "button"].includes(s.lazyLoadType), f = ((b = s.selectedValues) == null ? void 0 : b.length) > 0 && ((_ = A.value) == null ? void 0 : _.length) !== ((E = T.value) == null ? void 0 : E.length);
+      return u && s.hasMoreItems ? !!((Z = s.selectedValues) != null && Z.length) : f;
+    }), Ae = p(() => ["automatic", "button"].includes(s.lazyLoadType) ? !s.hasMoreItems : !0), he = B([]), ke = async () => {
+      await Me(), S.value && (he.value = Array.from(
+        S.value.querySelectorAll('[role="option"]')
+      ).filter((u) => u.checkVisibility()));
+    }, Ve = (u) => {
+      var f;
+      (f = he.value[u]) == null || f.focus();
+    }, {
+      moveToNextElement: Ke,
+      moveToPreviousElement: We,
+      moveToFirstElement: qe,
+      moveToLastElement: He,
+      preventDefault: Le,
+      focusedIndex: $e
+    } = we(
+      {
+        items: he
+      },
+      Ve
+    ), je = {
+      [V.ARROW_UP]: (u) => We(u),
+      [V.ARROW_DOWN]: (u) => Ke(u),
+      [V.HOME]: qe,
+      [V.END]: He
+    }, Xe = {
+      [V.ARROW_UP]: Le,
+      [V.ARROW_DOWN]: Le
+    };
+    return ne(
+      () => s.items,
+      () => {
+        ke();
+      },
+      { immediate: !0 }
+    ), (u, f) => (d(), O("div", {
+      ref_key: "listboxRef",
+      ref: S,
+      class: "b-listbox-multi-select"
+    }, [
+      Fe.value ? (d(), O("div", Wt, [
+        re((d(), O("ul", Y({ class: "b-listbox-multi-select__chips" }, te(Xe, !0)), [
+          (d(!0), O(se, null, q(ze.value, (b) => (d(), O("li", {
+            key: b.value
+          }, [
+            P(N(it), {
+              ref_for: !0,
+              ref_key: "selectedListboxItemsRef",
+              ref: c,
+              disabled: u.isOptionDisabled(b),
+              label: b.label,
+              condensed: "",
+              onClick: (_) => b.items ? Ie(b) : ue("select", b)
+            }, null, 8, ["disabled", "label", "onClick"])
+          ]))), 128))
+        ], 16)), [
+          [N(pe)]
+        ]),
+        f[4] || (f[4] = z("hr", {
+          class: "b-listbox-multi-select__divider",
+          "aria-hidden": "true"
+        }, null, -1))
+      ])) : X("", !0),
+      re((d(), O("div", Y(g.value, { role: "listbox" }, te(je, !0)), [
+        Ae.value ? (d(), R(N(ge), {
+          key: 0,
+          ref_key: "selectAllListboxItemsRef",
+          ref: i,
+          class: "b-listbox-multi-select__option",
+          tabindex: N($e) === 0 ? 0 : -1,
+          "aria-checked": Se.value,
+          onClick: w,
+          onEnterPressed: w,
+          onSpacePressed: ae(w, ["prevent"])
+        }, {
+          default: I(() => [
+            P(N(Te), {
+              checked: N(G),
+              indeterminate: N(Q)
+            }, null, 8, ["checked", "indeterminate"]),
+            P(N(ce), { el: "span" }, {
+              default: I(() => [
+                K(F($.value), 1)
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["tabindex", "aria-checked"])) : X("", !0),
+        Ae.value ? (d(), O("hr", qt)) : X("", !0),
+        P(N(Vt), {
+          ref_key: "listboxItemsRef",
+          ref: l,
+          items: u.items,
+          "is-option-disabled": u.isOptionDisabled,
+          "is-multi-level": N(y),
+          "static-categories": u.staticCategories,
+          searching: u.searching,
+          "selected-items-list": m.value,
+          "focused-index": N($e),
+          onToggleCheckboxSelection: f[0] || (f[0] = (b) => ue("select", b)),
+          onSelectCategory: de,
+          onUnselectCategory: Ie,
+          onToggleCategoryVisibility: ke,
+          onSpacePressed: f[1] || (f[1] = (b) => ue(N(v).SPACE, b)),
+          onTabPressed: f[2] || (f[2] = (b) => ue(N(v).TAB, b)),
+          onEnterPressed: f[3] || (f[3] = (b) => ue(N(v).ENTER, b))
+        }, me({ _: 2 }, [
+          q(N(a), (b, _) => ({
+            name: _,
+            fn: I((E) => [
+              W(u.$slots, _, ie(be(E)), void 0, !0)
+            ])
+          }))
+        ]), 1032, ["items", "is-option-disabled", "is-multi-level", "static-categories", "searching", "selected-items-list", "focused-index"])
+      ], 16)), [
+        [N(pe)]
+      ])
+    ], 512));
+  }
+}), Re = /* @__PURE__ */ H(jt, [["__scopeId", "data-v-5a19f9fe"]]), Ne = {
+  "en-US": {
+    loading: "Loading",
+    showMore: "Show more"
+  },
+  "ja-JP": {
+    loading: "読み込み中",
+    showMore: "表示内容を増やす"
+  },
+  "pt-BR": {
+    loading: "Carregando",
+    showMore: "Mostrar mais"
+  }
+}, Xt = 36, Jt = J({
+  name: "bento-listbox",
+  components: {
+    BentoEmptyState: lt,
+    BentoListboxSingleSelect: $t,
+    BentoListboxMultiSelect: Re,
+    BentoTypography: ce,
+    BentoLoadingIndicator: st,
+    BentoLoadingButton: dt
+  },
+  directives: { BentoKeyboardNavigationDirective: pe },
+  i18n: { messages: Ne },
+  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: oe.NONE,
+      validator: (e) => Object.values(oe).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: Re.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: [
+    v.SELECT,
+    v.SPACE,
+    v.SHOW_MORE,
+    v.ENTER,
+    v.ESCAPE,
+    v.TAB
+  ],
+  setup(e, { emit: t, slots: s }) {
+    const o = B([]), n = _e(e, "items"), { t: a } = Oe({ messages: Ne }), r = p(() => e.lazyLoadType !== oe.AUTOMATIC), g = p(() => e.lazyLoadType === oe.AUTOMATIC), S = () => {
+      var w;
+      return typeof (e == null ? void 0 : e.virtualScroll) == "object" && ((w = e == null ? void 0 : e.virtualScroll) != null && w.itemHeight) ? e.virtualScroll.itemHeight : Xt;
+    }, {
+      containerRef: i,
+      containerProps: c,
+      onScroll: l,
+      list: m,
+      wrapperProps: y
+    } = bt(n, {
+      itemHeight: S(),
+      // Disable virtual scrolling if not enabled or if lazy loading is enabled or if multi-select
+      disabled: (e == null ? void 0 : e.multiple) || (e == null ? void 0 : e.virtualScroll) === !1 || (e == null ? void 0 : e.lazyLoadType) !== "none"
+    }), T = p(
+      () => e.componentLoading !== void 0 || r.value ? "true" : void 0
+    ), M = p(
+      () => r.value && e.loading || e.componentLoading ? "true" : "false"
+    ), D = p(
+      () => r.value || e.componentLoading !== void 0 ? "polite" : void 0
+    ), A = p(
+      () => ({
+        "aria-label": e.ariaLabel,
+        "aria-busy": M.value,
+        "aria-atomic": T.value,
+        "aria-live": D.value
+      })
+    ), x = p(
+      () => e.componentLoading ? {
+        ...A.value,
+        role: "alert"
+      } : {}
+    ), $ = (w) => (de) => {
+      t(w, de);
+    }, k = () => {
+      t(v.SHOW_MORE);
+    }, h = ot(() => {
+      const w = i.value;
+      if (!w)
+        return;
+      const de = Math.round(w.scrollTop) + w.clientHeight >= w.scrollHeight;
+      e.hasMoreItems && de && !e.loading && k();
+    }), C = () => {
+      g.value ? h() : l();
+    }, U = p(() => {
+      var w;
+      return ((w = e.items) == null ? void 0 : w.length) === 0;
+    }), G = p(
+      () => e.lazyLoadType === oe.BUTTON && e.hasMoreItems
+    ), Q = p(
+      () => e.loading ? De.LOADING : De.START
+    ), ye = p(() => e.loading ? a("loading") : a("showMore")), Se = p(() => ({
+      ...e.emptyState,
+      variant: "condensed"
+    })), le = {
+      [v.SELECT]: $(v.SELECT),
+      [v.SPACE]: $(v.SPACE),
+      [v.TAB]: $(v.TAB),
+      [v.ENTER]: $(v.ENTER)
+    };
+    return {
+      // Refs
+      listboxRef: i,
+      listboxItemRef: o,
+      // a11y
+      ariaAttributes: A,
+      listboxContainerAttributes: x,
+      // Values
+      containerProps: c,
+      isSearchResultEmpty: U,
+      limitedEmptyStateProps: Se,
+      loadingButtonState: Q,
+      slots: s,
+      shouldDisplayShowMoreButton: G,
+      showMoreButtonText: ye,
+      virtualisedItems: m,
+      wrapperProps: y,
+      // Enums
+      BentoKeyboardNavigationKeyDownEvent: V,
+      BentoListboxEvent: v,
+      // Methods
+      onListboxContainerScroll: C,
+      onOptionSelected: $,
+      emitShowMore: k,
+      listboxListeners: le
+    };
+  }
+}), Zt = ["id"], Qt = {
+  key: 0,
+  class: "b-listbox__loading-filtered-items"
+}, es = {
+  key: 1,
+  class: "b-listbox__empty-search-message"
+}, ts = {
+  key: 2,
+  class: "b-listbox__lazy-load"
+}, ss = {
+  key: 3,
+  class: "b-listbox__lazy-load"
+};
+function ls(e, t, s, o, n, a) {
+  var y;
+  const r = L("bento-loading-indicator"), g = L("bento-empty-state"), S = L("bento-typography"), i = L("bento-listbox-multi-select"), c = L("bento-listbox-single-select"), l = L("bento-loading-button"), m = xe("bento-keyboard-navigation-directive");
+  return re((d(), O("div", Y({
+    id: e.id,
+    ref: "listboxRef",
+    class: "b-listbox",
+    tabindex: "-1"
+  }, e.listboxContainerAttributes, {
+    style: (y = e.containerProps) == null ? void 0 : y.style,
+    "data-testid": "listbox-container",
+    onScroll: t[0] || (t[0] = (...T) => e.onListboxContainerScroll && e.onListboxContainerScroll(...T))
+  }), [
+    z("div", ie(be(e.wrapperProps)), [
+      e.componentLoading ? (d(), O("div", Qt, [
+        P(r)
+      ])) : e.isSearchResultEmpty ? (d(), O("div", es, [
+        e.emptyState ? (d(), R(g, ie(Y({ key: 0 }, e.limitedEmptyStateProps)), null, 16)) : (d(), R(S, {
+          key: 1,
+          el: "span"
+        }, {
+          default: I(() => [
+            K(F(e.noResultsMessage), 1)
+          ]),
+          _: 1
+        }))
+      ])) : (d(), O(se, { key: 2 }, [
+        e.multiple ? (d(), R(i, Y({
+          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
+        }, te(e.listboxListeners)), me({ _: 2 }, [
+          q(e.slots, (T, M) => ({
+            name: M,
+            fn: I((D) => [
+              W(e.$slots, M, ie(be(D)), void 0, !0)
+            ])
+          }))
+        ]), 1040, ["has-more-items", "items", "lazy-load-type", "static-categories", "selected-values", "searching", "is-option-disabled"])) : (d(), R(c, Y({
+          key: 1,
+          ref: "listboxItemRef",
+          items: e.virtualisedItems
+        }, e.ariaAttributes, {
+          "selected-value": e.selectedValue,
+          "static-categories": e.staticCategories,
+          "is-option-disabled": e.isOptionDisabled
+        }, te(e.listboxListeners)), me({ _: 2 }, [
+          q(e.slots, (T, M) => ({
+            name: M,
+            fn: I((D) => [
+              W(e.$slots, M, ie(be(D)), void 0, !0)
+            ])
+          }))
+        ]), 1040, ["items", "selected-value", "static-categories", "is-option-disabled"])),
+        e.shouldDisplayShowMoreButton ? (d(), O("div", ts, [
+          P(l, {
+            state: e.loadingButtonState,
+            variant: "secondary",
+            onClickCapture: e.emitShowMore
+          }, {
+            default: I(() => [
+              K(F(e.showMoreButtonText), 1)
+            ]),
+            _: 1
+          }, 8, ["state", "onClickCapture"])
+        ])) : e.loading ? (d(), O("div", ss, [
+          P(r)
+        ])) : X("", !0)
+      ], 64))
+    ], 16)
+  ], 16, Zt)), [
+    [m]
+  ]);
+}
+const Es = /* @__PURE__ */ H(Jt, [["render", ls], ["__scopeId", "data-v-c9aaa0e3"]]), Ee = (e, t) => {
+  for (const s of e) {
+    if (s.value === t)
+      return s;
+    if (s.items) {
+      const o = Ee(s.items, t);
+      if (o)
+        return o;
+    }
+  }
+  return null;
+}, os = (e) => typeof e == "object" && e !== null && "value" in e && "label" in e, _s = (e, t, s, o) => {
+  const n = B([]), a = B(), r = (c) => {
+    s.value ? a.value = c.map(({ value: l }) => l) : a.value = c.length > 0 ? c[0].value : null;
+  }, g = (c) => {
+    s.value ? a.value = c.map(({ value: l, label: m }) => ({ value: l, label: m })) : a.value = c.length > 0 ? { value: c[0].value, label: c[0].label } : null;
+  }, S = (c) => {
+    n.value = c, o != null && o.value ? g(c) : r(c);
+  }, i = () => {
+    n.value = [], a.value = null;
+  };
+  return ne(
+    () => t.value,
+    () => {
+      if (!t.value && t.value !== 0) {
+        i();
+        return;
+      }
+      const c = !Array.isArray(t.value), l = [...n.value];
+      i();
+      const m = (y) => {
+        if (os(y))
+          n.value.push(y);
+        else {
+          let T = Ee(e.value, y);
+          T || (T = Ee(l, y)), T || (T = { value: y, label: y.toString() }), n.value.push(T);
+        }
+      };
+      if (c) {
+        const y = t.value;
+        m(y), o != null && o.value ? g(n.value) : r(n.value);
+        return;
+      }
+      t.value.forEach(m), o != null && o.value ? g(n.value) : r(n.value);
+    },
+    { immediate: !0 }
+  ), {
+    // Values
+    cachedSelectedListboxOptions: n,
+    cachedListboxSelectedValues: a,
+    // Methods
+    resetCache: i,
+    setCachedValues: S
+  };
+};
+export {
+  oe as B,
+  v as a,
+  Es as b,
+  _s as c,
+  Kt as u
+};
+//# sourceMappingURL=use-cached-selected-values.CatIU1_1.js.map