@adyen/bento-vue3 1.50.0 → 1.52.0

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

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