@adyen/bento-vue3 1.61.0 → 1.62.0

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

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