@adyen/bento-vue3 1.65.0 → 1.66.0

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

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