@adyen/bento-vue2 1.61.0 → 1.62.0

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

@@ -0,0 +1,1192 @@
+import { computed as c, ref as A, onMounted as ye, onUnmounted as he, watch as K, defineComponent as P, toRef as F, useSlots as Se } from "vue";
+import { B as z } from "./typography.J1v_SPG3.js";
+import { B as xe } from "./loading-indicator.z8COalOc.js";
+import { B as Ce } from "./empty-state.mtXfb1BB.js";
+import { u as J } from "./i18n.BQkEbtPM.js";
+import { d as Ee } from "./debounce.DUTu11PS.js";
+import "./index.Cl4_42j5.js";
+import { B as Z } from "./checkbox.DkCukYh0.js";
+import { B as Oe } from "./chip.OV0EWIP3.js";
+import { C as Te, a as Ae } from "./chevron-up.CHK1E4p9.js";
+import { B as D, a as Q } from "./keyboard-navigation.pB8weElW.js";
+import { n as M } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { d as Le, e as ie } from "./button-actions._OIvTdKt.js";
+/* empty css              */
+import { o as Ie } from "./resize.Bqks3WUm.js";
+import "../assets/use-cached-selected-values.css";
+const ue = (s, e, t, l) => {
+  const o = c(
+    () => {
+      var b, S;
+      return !!((b = s.value) != null && b.length) && ((S = s.value) == null ? void 0 : S.length) === e.value.length;
+    }
+  ), n = c(() => {
+    var b;
+    return s.value == null || s.value.length === 0 ? !1 : ((b = s.value) == null ? void 0 : b.length) !== e.value.length;
+  });
+  return {
+    isAllSelected: o,
+    isIndeterminate: n,
+    toggleSelectAll: (b) => {
+      b ? t() : l();
+    }
+  };
+};
+function Re(s, { disabled: e, itemHeight: t, overscan: l = 5, prefixHeight: o }) {
+  const n = A(null), d = A([]), b = A(0), S = A(0), i = A(0);
+  let r;
+  const y = c(() => {
+    const v = typeof t == "number" ? s.value.length * t : s.value.reduce((L, T, E) => L + t(E), 0), x = typeof t == "number" ? b.value * t : s.value.slice(0, b.value).reduce((L, T, E) => L + t(E), 0);
+    return {
+      style: {
+        marginTop: `${x}px`,
+        height: `${v - x}px`
+      }
+    };
+  }), O = () => {
+    const v = (o == null ? void 0 : o.value) ?? 0, x = Math.max(n.value.scrollTop - v, 0);
+    if (typeof t == "number")
+      return Math.floor(x / t);
+    let L = 0, T = 0;
+    for (let E = 0; E < s.value.length; E += 1) {
+      const C = t(E);
+      if (L += C, L >= x) {
+        T = E;
+        break;
+      }
+    }
+    return T;
+  }, p = () => {
+    if (i.value = n.value.clientHeight, typeof t == "number")
+      return Math.ceil(i.value / t);
+    const v = b.value ?? 0;
+    let x = 0, L = 0;
+    for (let T = v; T < s.value.length; T += 1) {
+      const E = t(T);
+      if (x += E, L = T, x > i.value)
+        break;
+    }
+    return L - v;
+  }, u = () => {
+    if (n.value) {
+      const v = p();
+      b.value = O(), S.value = Math.min(b.value + v + l, s.value.length), d.value = s.value.slice(b.value, S.value);
+    }
+  }, I = () => {
+    u();
+  };
+  e || (ye(() => {
+    n.value && (i.value = n.value.clientHeight, r = Ie(n.value, ({ clientHeight: v }) => {
+      i.value = v, u();
+    }), u());
+  }), he(() => {
+    r == null || r.disconnect();
+  }), K(
+    () => s.value,
+    () => {
+      u();
+    }
+  ));
+  const B = {
+    ref: n,
+    style: { overflowY: "auto" }
+  };
+  return e ? {
+    containerRef: n,
+    containerProps: B,
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onScroll: () => {
+    },
+    list: s
+  } : {
+    containerRef: n,
+    containerProps: B,
+    onScroll: I,
+    list: d,
+    wrapperProps: y
+  };
+}
+var a = /* @__PURE__ */ ((s) => (s.SELECT = "select", s.SHOW_MORE = "show-more", s.ESCAPE = "escape-pressed", s.CLICK = "click", s.ENTER = "enter-pressed", s.SPACE = "space-pressed", s.TAB = "tab-pressed", s.CLOSE_DROPDOWN = "close-dropdown", s))(a || {}), U = /* @__PURE__ */ ((s) => (s.AUTOMATIC = "automatic", s.BUTTON = "button", s.NONE = "none", s))(U || {});
+const ke = P({
+  name: "bento-listbox-static-category",
+  components: {
+    BentoTypography: z
+  },
+  props: {
+    /**
+     * Category label text
+     */
+    categoryLabel: {
+      type: String,
+      required: !0
+    }
+  }
+});
+var Be = function() {
+  var e = this, t = e._self._c;
+  return e._self._setupProxy, t("div", { staticClass: "b-listbox-single-select-category" }, [t("bento-typography", { staticClass: "b-listbox-single-select-category__label-text", attrs: { variant: "caption", el: "span" } }, [e._v(" " + e._s(e.categoryLabel) + " ")]), t("div", [e._t("default")], 2)], 1);
+}, De = [], Ne = /* @__PURE__ */ M(
+  ke,
+  Be,
+  De,
+  !1,
+  null,
+  "4aa8cc6e"
+);
+const Me = Ne.exports, $e = P({
+  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: [a.CLICK, a.ENTER, a.SPACE, a.TAB],
+  setup(s, { emit: e }) {
+    const t = c(() => ({
+      "b-listbox-option--disabled": s.disabled,
+      "b-listbox-option--selected": s.selected
+    }));
+    return {
+      // Enums
+      BentoKeyboardNavigationKeyDownEvent: D,
+      BentoListboxEvent: a,
+      // Values
+      conditionalClasses: t,
+      // Events
+      onClick: (n) => {
+        e(a.CLICK, n);
+      },
+      onOptionSelected: (n, d) => {
+        e(n, d);
+      }
+    };
+  }
+});
+var we = function() {
+  var e = this, t = e._self._c;
+  return e._self._setupProxy, t("div", e._b({ staticClass: "b-listbox-option", class: e.conditionalClasses, attrs: { role: "option" }, on: { click: e.onClick, keydown: [function(l) {
+    return !l.type.indexOf("key") && e._k(l.keyCode, "enter", 13, l.key, "Enter") ? null : e.onOptionSelected(e.BentoListboxEvent.ENTER, l);
+  }, function(l) {
+    return !l.type.indexOf("key") && e._k(l.keyCode, "space", 32, l.key, [" ", "Spacebar"]) ? null : e.onOptionSelected(e.BentoListboxEvent.SPACE, l);
+  }, function(l) {
+    return !l.type.indexOf("key") && e._k(l.keyCode, "tab", 9, l.key, "Tab") ? null : e.onOptionSelected(e.BentoListboxEvent.TAB, l);
+  }] } }, "div", e.$attrs, !1), [e._t("default")], 2);
+}, Pe = [], Fe = /* @__PURE__ */ M(
+  $e,
+  we,
+  Pe,
+  !1,
+  null,
+  "a1e9ebff"
+);
+const q = Fe.exports;
+let ce = 0;
+const Ge = {
+  beforeCreate() {
+    this.uuid = ce.toString(), ce += 1;
+  }
+};
+var Ue = function() {
+  var e = this, t = e._self._c;
+  return t("svg", e._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", e.$attrs, !1), [e.$attrs["svg-title"] ? t("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), t("path", { attrs: { 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" } })]);
+}, ze = [], Ye = /* @__PURE__ */ M(
+  Ge,
+  Ue,
+  ze,
+  !1,
+  null,
+  null
+);
+const We = Ye.exports, Ke = P({
+  name: "bento-listbox-single-select-option",
+  components: {
+    BentoListboxOption: q,
+    BentoTypography: z,
+    CheckmarkIcon: We
+  },
+  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: [a.ENTER, a.SELECT, a.SPACE, a.TAB],
+  setup(s, { emit: e }) {
+    const t = (d) => {
+      s.disabled || e(d, s.option);
+    }, l = c(() => s.disabled ? !0 : null), o = c(() => s.selected ? !0 : null), n = c(() => s.disabled ? -1 : 0);
+    return {
+      // Values
+      ariaDisabled: l,
+      ariaSelected: o,
+      tabIndex: n,
+      // Enums
+      BentoListboxEvent: a,
+      // Events
+      onOptionSelected: t
+    };
+  }
+});
+var qe = function() {
+  var e = this, t = e._self._c;
+  return e._self._setupProxy, t("bento-listbox-option", { staticClass: "b-listbox-single-select-option", attrs: { disabled: e.disabled, selected: e.selected, "aria-selected": e.ariaSelected, "aria-disabled": e.ariaDisabled, tabindex: e.tabIndex }, on: { click: function(l) {
+    return e.onOptionSelected(e.BentoListboxEvent.SELECT);
+  }, "enter-pressed": function(l) {
+    return e.onOptionSelected(e.BentoListboxEvent.ENTER);
+  }, "space-pressed": function(l) {
+    return l.preventDefault(), e.onOptionSelected(e.BentoListboxEvent.SPACE);
+  }, "tab-pressed": function(l) {
+    return e.onOptionSelected(e.BentoListboxEvent.TAB);
+  } } }, [e._t("default", function() {
+    return [t("span", { staticClass: "b-listbox-single-select-option__text" }, [t("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(e.option.label))]), e.option.description ? t("bento-typography", { staticClass: "b-listbox-single-select-option__description", attrs: { el: "span" } }, [e._v(" " + e._s(e.option.description) + " ")]) : e._e()], 1)];
+  }, null, e.option), t("span", { staticClass: "b-listbox-single-select-option__check-icon" }, [t("checkmark-icon", { directives: [{ name: "show", rawName: "v-show", value: e.selected, expression: "selected" }], attrs: { "svg-title": "selected" } })], 1)], 2);
+}, je = [], He = /* @__PURE__ */ M(
+  Ke,
+  qe,
+  je,
+  !1,
+  null,
+  "5a5ff36a"
+);
+const Xe = He.exports, de = ({ items: s, hasStaticCategories: e }, t) => {
+  const l = c(
+    () => e.value ? s.value.flatMap((u) => u.items) : s.value
+  ), o = c(() => l.value.length - 1), n = A(0), d = (u) => {
+    switch (u) {
+      case "increase":
+        n.value += 1;
+        break;
+      case "decrease":
+        n.value -= 1;
+        break;
+    }
+  }, b = ({ edgeCaseItem: u }, I) => {
+    n.value !== u && (d(I), t(n.value));
+  }, S = (u) => {
+    p(u), b(
+      {
+        edgeCaseItem: o.value
+      },
+      "increase"
+      /* INCREASE */
+    );
+  }, i = (u) => {
+    p(u), b(
+      {
+        edgeCaseItem: 0
+      },
+      "decrease"
+      /* DECREASE */
+    );
+  }, r = () => {
+    n.value = 0, t(n.value);
+  }, y = () => {
+    n.value = o.value, t(n.value);
+  }, O = (u) => {
+    n.value = u;
+  }, p = (u) => {
+    var I;
+    (I = u == null ? void 0 : u.detail) == null || I.preventDefault();
+  };
+  return {
+    moveToFirstElement: r,
+    moveToLastElement: y,
+    moveToNextElement: S,
+    moveToPreviousElement: i,
+    setListboxFocusedIndex: O,
+    preventDefault: p,
+    focusedIndex: n
+  };
+}, Ve = P({
+  name: "bento-listbox-single-select",
+  components: {
+    BentoListboxSingleSelectCategory: Me,
+    BentoListboxSingleSelectOption: Xe
+  },
+  directives: { BentoKeyboardNavigationDirective: Q },
+  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: [a.SELECT, a.ENTER, a.SPACE, a.TAB],
+  setup(s, { emit: e, expose: t, slots: l }) {
+    const o = A(null), n = A([]), d = c(() => {
+      var v;
+      return !!((v = s.selectedValue) != null && v.length) && s.selectedValue.at(0);
+    }), b = c(() => !!s.items.some(({ items: v }) => !!v)), S = (v) => (x) => {
+      e(v, [x]);
+    }, i = (v) => {
+      var x;
+      (x = o.value.querySelectorAll('[role="option"]')[v]) == null || x.focus();
+    }, {
+      moveToNextElement: r,
+      moveToPreviousElement: y,
+      moveToFirstElement: O,
+      moveToLastElement: p,
+      setListboxFocusedIndex: u
+    } = de(
+      {
+        items: F(s, "items"),
+        hasStaticCategories: F(s, "staticCategories")
+      },
+      i
+    ), I = {
+      [D.ARROW_UP]: y,
+      [D.ARROW_DOWN]: r,
+      [D.HOME]: O,
+      [D.END]: p
+    }, B = {
+      [a.SELECT]: S(a.SELECT),
+      [a.SPACE]: S(a.SPACE),
+      [a.TAB]: S(a.TAB),
+      [a.ENTER]: S(a.ENTER)
+    };
+    return t({
+      /**
+       * Reference for a single listbox item.
+       * Required for keyboard navigation in dropdown as $children is removed in vue@3
+       */
+      listboxItemRef: n,
+      /**
+       * 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: u
+    }), {
+      // Enums
+      BentoListboxEvent: a,
+      // Values
+      listboxRef: o,
+      listboxItemRef: n,
+      selectedItem: d,
+      slots: l,
+      // Computed
+      hasCategories: b,
+      // Methods
+      onOptionSelected: S,
+      // Keyboard navigation
+      listboxListeners: I,
+      listboxOptionListeners: B
+    };
+  }
+});
+var Je = function() {
+  var e = this, t = e._self._c;
+  return e._self._setupProxy, t("div", e._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], ref: "listboxRef" }, e.listboxListeners), [e.hasCategories && e.staticCategories ? e._l(e.items, function(l) {
+    return t("bento-listbox-single-select-category", { key: l.value, attrs: { "category-label": l.label, role: "group" } }, e._l(l.items, function(o) {
+      return t("bento-listbox-single-select-option", e._g({ key: o.value, ref: "listboxItemRef", refInFor: !0, attrs: { role: "option", option: o, disabled: e.isOptionDisabled ? e.isOptionDisabled(o) : null, selected: o.value === e.selectedItem.value }, scopedSlots: e._u([e._l(e.slots, function(n, d) {
+        return { key: d, fn: function(b) {
+          return [e._t(d, null, null, b)];
+        } };
+      })], null, !0) }, e.listboxOptionListeners));
+    }), 1);
+  }) : e._l(e.items, function(l) {
+    return t("bento-listbox-single-select-option", e._g({ key: l.value, ref: "listboxItemRef", refInFor: !0, attrs: { role: "option", option: l, disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null, selected: l.value === e.selectedItem.value }, scopedSlots: e._u([e._l(e.slots, function(o, n) {
+      return { key: n, fn: function(d) {
+        return [e._t(n, null, null, d)];
+      } };
+    })], null, !0) }, e.listboxOptionListeners));
+  })], 2);
+}, Ze = [], Qe = /* @__PURE__ */ M(
+  Ve,
+  Je,
+  Ze,
+  !1,
+  null,
+  null
+);
+const et = Qe.exports;
+var X = /* @__PURE__ */ ((s) => (s.DISABLED = "disabled", s.STATIC_CATEGORY = "static-category", s))(X || {}), W = /* @__PURE__ */ ((s) => (s.SELECT_CATEGORY = "select-category", s.UNSELECT_CATEGORY = "unselect-category", s))(W || {});
+const tt = {
+  "en-US": {
+    categoryClosed: "{category} closed",
+    categoryOpened: "{category} opened"
+  }
+}, st = P({
+  i18n: { messages: tt },
+  name: "bento-listbox-multi-select-category",
+  components: {
+    BentoCheckbox: Z,
+    BentoTypography: z,
+    BentoListboxOption: q,
+    ChevronDownIcon: Ae,
+    ChevronUpIcon: Te
+  },
+  props: {
+    /**
+     * The option elements to populate the listbox with.
+     * It must be an array of {@see BentoListboxOptionItem }.
+     *
+     * @property {string} value.label - Text to be displayed in the option
+     * @property {string,number} value.value - Value of the option
+     * @property {BentoListboxOptionItem} value.items - Category items list
+     */
+    category: {
+      type: Object,
+      required: !0
+    },
+    /**
+     * Function that allows the options to be disabled
+     *
+     * @type {BentoListboxIsOptionDisabled}
+     * @param {BentoListboxOptionItem} option - listbox option object
+     * @param {string} option.label - Option's label text
+     * @param {string|number} option.value - Option's value
+     * @param {unknown} option.data - Option's extra data to be passed to the default slot
+     */
+    isOptionDisabled: {
+      type: [Function],
+      default: () => !1
+    },
+    /**
+     * The `input` value.
+     * Providing an empty array will select no options.
+     */
+    selectedItemsList: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * If enabled, dropdown will display non-selectable, static categories
+     */
+    staticCategories: { type: Boolean, default: !1 },
+    /**
+     * Category's tabindex
+     */
+    tabindex: { type: Number, default: -1 }
+  },
+  emits: [W.SELECT_CATEGORY, W.UNSELECT_CATEGORY],
+  setup(s, { emit: e }) {
+    const t = A(!1), { t: l } = J(), o = (C) => s.isOptionDisabled ? s.isOptionDisabled(C) : !1, n = c(
+      () => s.category.items.every((C) => o(C))
+    ), d = F(s, "staticCategories"), b = c(() => t.value || s.staticCategories), S = c(() => ({
+      [`b-listbox-multi-select-category--${X.DISABLED}`]: n.value,
+      [`b-listbox-multi-select-category--${X.STATIC_CATEGORY}`]: s.staticCategories
+    })), i = (C) => {
+      C.preventDefault(), t.value = !t.value;
+    }, r = (C) => {
+      var G;
+      const N = o(C), R = ((G = s.selectedItemsList) == null ? void 0 : G.includes(C.value)) || !1;
+      return { isDisabled: N, isPreSelected: R };
+    }, y = c(
+      () => s.category.items.filter((C) => {
+        const { isDisabled: N, isPreSelected: R } = r(C);
+        return N && R || !N;
+      })
+    ), O = c(
+      () => {
+        var C;
+        return (C = y.value) == null ? void 0 : C.filter(
+          ({ value: N }) => {
+            var R;
+            return (R = s.selectedItemsList) == null ? void 0 : R.includes(N);
+          }
+        );
+      }
+    ), p = c(() => {
+      const C = t.value ? "categoryOpened" : "categoryClosed";
+      return l(C, { category: s.category.label });
+    }), u = c(
+      () => ({
+        el: "span",
+        variant: s.staticCategories ? "caption" : "body"
+      })
+    ), I = () => {
+      e(W.SELECT_CATEGORY);
+    }, B = () => {
+      e(W.UNSELECT_CATEGORY);
+    }, { isAllSelected: v, isIndeterminate: x, toggleSelectAll: L } = ue(
+      O,
+      y,
+      I,
+      B
+    ), T = A(v.value), E = () => {
+      T.value = !T.value, L(T.value);
+    };
+    return K(v, () => {
+      T.value = v.value;
+    }), {
+      // Values
+      chevronTitle: p,
+      conditionalClass: S,
+      hasAllPropsDisabled: n,
+      isOpen: t,
+      isAllSelected: v,
+      isIndeterminate: x,
+      isStaticCategory: d,
+      // Computed
+      showItemChildren: b,
+      categoryLabelProps: u,
+      // Methods
+      handleSelectAll: E,
+      toggleOpen: i,
+      toggleSelectAll: L
+    };
+  }
+});
+var lt = function() {
+  var e = this, t = e._self._c;
+  return e._self._setupProxy, t("div", [t("bento-listbox-option", { staticClass: "b-listbox-multi-select-category__option", class: e.conditionalClass, attrs: { tabindex: e.tabindex }, on: { click: e.handleSelectAll, "enter-pressed": e.handleSelectAll, "space-pressed": function(l) {
+    return l.preventDefault(), e.handleSelectAll.apply(null, arguments);
+  } } }, [e.isStaticCategory ? e._e() : t("bento-checkbox", { attrs: { "model-value": e.isAllSelected, indeterminate: e.isIndeterminate, disabled: e.hasAllPropsDisabled, "aria-label": e.category.label, value: e.category.value, tabindex: -1 } }), t("span", { staticClass: "b-listbox-multi-select-category__label" }, [t("bento-typography", e._b({ staticClass: "b-listbox-multi-select-category__label-text" }, "bento-typography", e.categoryLabelProps, !1), [e._v(" " + e._s(e.category.label) + " ")]), e.isStaticCategory ? e._e() : t("div", { staticClass: "b-listbox-multi-select-category__label-chevron", attrs: { "data-testid": "toggle-listbox" }, on: { "!click": function(l) {
+    return l.stopPropagation(), e.toggleOpen.apply(null, arguments);
+  } } }, [e.isOpen ? t("chevron-up-icon", { attrs: { "svg-title": e.chevronTitle } }) : t("chevron-down-icon", { attrs: { "svg-title": e.chevronTitle } })], 1)], 1)], 1), t("div", { directives: [{ name: "show", rawName: "v-show", value: e.showItemChildren, expression: "showItemChildren" }] }, [e._t("default")], 2)], 1);
+}, nt = [], ot = /* @__PURE__ */ M(
+  st,
+  lt,
+  nt,
+  !1,
+  null,
+  "5e190a4d"
+);
+const at = ot.exports;
+var w = /* @__PURE__ */ ((s) => (s.SELECT_CATEGORY = "select-category", s.TOGGLE_CHECKBOX_SELECTION = "toggle-checkbox-selection", s.UNSELECT_CATEGORY = "unselect-category", s))(w || {});
+const it = P({
+  name: "listbox-multi-select-options",
+  components: {
+    BentoCheckbox: Z,
+    BentoListboxOption: q,
+    BentoTypography: z,
+    ListboxMultiSelectCategory: at
+  },
+  props: {
+    /**
+     * Indicates if the items listed are inside a category
+     * so they can be padded to right by one level in recursion.
+     * Items of categories are automatically defined as "categoryItems"
+     */
+    categoryItems: { type: Boolean, default: !1 },
+    /**
+     * Current focused option index
+     */
+    focusedIndex: { type: Number, default: 0 },
+    /**
+     * Function that allows the options to be disabled
+     *
+     * @type {BentoListboxIsOptionDisabled}
+     * @param {BentoListboxOptionItem} option - listbox option object
+     * @param {string} option.label - Option's label text
+     * @param {string|number} option.value - Option's value
+     * @param {unknown} option.data - Option's extra data to be passed to the default slot
+     */
+    isOptionDisabled: {
+      type: Function,
+      default: () => !1
+    },
+    /**
+     * The option elements to populate the listbox with.
+     * It must be an array of {@see BentoListboxOptionItem }.
+     *
+     * @property {string} value.label - Text to be displayed in the option
+     * @property {string,number} value.value - Value of the option
+     */
+    items: {
+      type: Array,
+      required: !0
+    },
+    /**
+     * Indicates if the elements options are inside a multi-level category
+     */
+    isMultiLevel: { type: Boolean, default: !1 },
+    /**
+     * Flag that indicates that an external search it's being made
+     * to filter out the items inside the the multi-select listbox
+     *
+     * If enabled, hides the "Select all" checkbox in "multiple" mode.
+     */
+    searching: { type: Boolean, default: !1 },
+    /**
+     * List of selected items.
+     * Providing an empty array will select no options.
+     */
+    selectedItemsList: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * If enabled, dropdown will display non-selectable, static categories
+     */
+    staticCategories: { type: Boolean, default: !1 }
+  },
+  emits: [
+    w.TOGGLE_CHECKBOX_SELECTION,
+    w.SELECT_CATEGORY,
+    w.UNSELECT_CATEGORY
+  ],
+  setup(s, { emit: e }) {
+    const t = (i) => {
+      s.isOptionDisabled(i) || e(w.TOGGLE_CHECKBOX_SELECTION, i);
+    }, l = (i) => !!i.items, o = (i) => {
+      const r = s.isMultiLevel && s.searching;
+      return i.description && (!s.isMultiLevel || r);
+    }, n = (i) => i.items ? !!i.items.find((r) => s.selectedItemsList.includes(r.value)) : s.selectedItemsList.includes(i.value), d = (i) => {
+      if (l(i)) {
+        const r = n(i) ? w.UNSELECT_CATEGORY : w.SELECT_CATEGORY;
+        e(r, i);
+      } else
+        t(i);
+    };
+    return {
+      // Values
+      conditionalClasses: c(() => ({
+        "b-listbox-multi-select-options__static-category-option": s.staticCategories,
+        "b-listbox-multi-select-options__category-option": s.categoryItems
+      })),
+      // Methods
+      isOptionSelected: n,
+      shouldShowDescription: o,
+      toggleCheckboxSelection: t,
+      toggleSearchOption: d,
+      computedTabindex: (i) => i + 1 === s.focusedIndex ? 0 : -1,
+      // Enums
+      BentoListboxEvent: a,
+      ListboxMultiSelectOptionsEvent: w
+    };
+  }
+});
+var ct = function() {
+  var e = this, t = e._self._c;
+  return e._self._setupProxy, t("div", e._l(e.items, function(l, o) {
+    return t("div", { key: `selected-${l.value}` }, [e.searching && e.isMultiLevel ? [t("bento-listbox-option", { staticClass: "b-listbox-multi-select-options", class: e.conditionalClasses, attrs: { disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null, tabindex: e.computedTabindex(o) }, on: { click: function(n) {
+      return e.toggleSearchOption(l);
+    }, "enter-pressed": function(n) {
+      return e.toggleSearchOption(l);
+    }, "space-pressed": function(n) {
+      return n.preventDefault(), e.toggleSearchOption(l);
+    } } }, [t("bento-checkbox", { attrs: { "model-value": e.isOptionSelected(l), "aria-label": l.label, disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null, value: l.value, tabindex: "-1" } }), e._t("default", function() {
+      return [t("span", { staticClass: "b-listbox-multi-select__option-text" }, [t("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(l.label))]), e.shouldShowDescription(l) ? t("bento-typography", { staticClass: "b-listbox-multi-select__option-description", attrs: { el: "span" } }, [e._v(" " + e._s(l.description) + " ")]) : e._e()], 1)];
+    }, null, l)], 2)] : [l.items ? [t("listbox-multi-select-category", { attrs: { category: l, "static-categories": e.staticCategories, "is-option-disabled": e.isOptionDisabled, "selected-items-list": e.selectedItemsList, tabindex: e.computedTabindex(o) }, on: { "select-category": function(n) {
+      return e.$emit(e.ListboxMultiSelectOptionsEvent.SELECT_CATEGORY, l);
+    }, "unselect-category": function(n) {
+      return e.$emit(e.ListboxMultiSelectOptionsEvent.UNSELECT_CATEGORY, l);
+    } } }, [t("listbox-multi-select-options", { attrs: { "category-items": "", items: l.items, "is-option-disabled": e.isOptionDisabled, "focused-index": e.focusedIndex, "is-multi-level": e.isMultiLevel, "static-categories": e.staticCategories, "selected-items-list": e.selectedItemsList, searching: e.searching }, on: { "toggle-checkbox-selection": (n) => e.toggleCheckboxSelection(n) } })], 1)] : t("bento-listbox-option", { staticClass: "b-listbox-multi-select-options", class: e.conditionalClasses, attrs: { disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null, tabindex: e.computedTabindex(o) }, on: { click: function(n) {
+      return e.toggleCheckboxSelection(l);
+    }, "enter-pressed": function(n) {
+      return e.toggleCheckboxSelection(l);
+    }, "space-pressed": function(n) {
+      return n.preventDefault(), e.toggleCheckboxSelection(l);
+    } } }, [t("bento-checkbox", { attrs: { "model-value": e.selectedItemsList, "aria-label": l.label, disabled: e.isOptionDisabled ? e.isOptionDisabled(l) : null, value: l.value, tabindex: -1 } }), e._t("default", function() {
+      return [t("span", { staticClass: "b-listbox-multi-select__option-text" }, [t("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(l.label))]), e.shouldShowDescription(l) ? t("bento-typography", { staticClass: "b-listbox-multi-select__option-description", attrs: { el: "span" } }, [e._v(" " + e._s(l.description) + " ")]) : e._e()], 1)];
+    }, null, l)], 2)]], 2);
+  }), 0);
+}, rt = [], ut = /* @__PURE__ */ M(
+  it,
+  ct,
+  rt,
+  !1,
+  null,
+  "e99d836e"
+);
+const dt = ut.exports, ft = (s) => {
+  const e = c(() => {
+    var l;
+    return !!((l = s.value) != null && l.find(({ items: o }) => !!o));
+  }), t = c(() => {
+    var l;
+    return e.value ? (l = s.value) == null ? void 0 : l.reduce((o, n) => (n.items ? o.push(...n.items.flat()) : o.push(n), o), []) : s.value;
+  });
+  return {
+    isMultiLevelSelect: e,
+    flattenedItemsList: t
+  };
+}, vt = {
+  "en-US": {
+    allSelected: "All selected ({total})",
+    numberOfTotalSelected: "{number} of {total} selected",
+    numbersSelected: "{number} selected",
+    selectAll: "Select all ({total})"
+  }
+}, bt = { i18n: { messages: vt } }, mt = /* @__PURE__ */ P({
+  ...bt,
+  __name: "listbox-multi-select",
+  props: {
+    hasMoreItems: { type: Boolean, default: !1 },
+    isOptionDisabled: { default: () => () => !1 },
+    items: null,
+    lazyLoadType: { default: "none" },
+    searching: { type: Boolean, default: !1 },
+    selectedValues: null,
+    staticCategories: { type: Boolean, default: !1 }
+  },
+  emits: ["select"],
+  setup(s, { emit: e }) {
+    const t = s, { t: l } = J(), o = Se(), n = A(null), d = A(null), b = A(null), S = A(null), i = c(() => t.selectedValues.map(({ value: f }) => f)), { isMultiLevelSelect: r, flattenedItemsList: y } = ft(F(t, "items")), O = (f) => {
+      var h;
+      const _ = t.isOptionDisabled(f), m = ((h = i.value) == null ? void 0 : h.includes(f.value)) || !1;
+      return { isDisabled: _, isPreSelected: m };
+    }, p = c(() => {
+      if (t.searching && r)
+        return t.items;
+      const f = y.value.filter((_) => {
+        const { isDisabled: m, isPreSelected: h } = O(_);
+        return m && h || !m;
+      });
+      return t.selectedValues.forEach((_) => {
+        f.find((m) => m.value === _.value) || f.push(_);
+      }), f;
+    }), u = c(
+      () => {
+        var f;
+        return (f = p.value) == null ? void 0 : f.filter((_) => {
+          var m;
+          return _.items && r.value && t.searching ? _.items.filter(
+            (g) => (t.selectedValues ?? []).includes(g.value)
+          ).length === _.items.length : (m = i.value) == null ? void 0 : m.includes(_.value);
+        });
+      }
+    ), I = () => r.value && !t.searching ? y.value.length : t.items.length, B = c(() => {
+      var h;
+      const f = p.value.length, _ = I(), m = ((h = u.value) == null ? void 0 : h.length) || 0;
+      return m === 0 ? l("selectAll", { total: f }) : m === _ ? l("allSelected", { total: _ }) : m <= _ ? l("numberOfTotalSelected", { number: m, total: _ }) : l("numbersSelected", { number: m });
+    }), v = (f) => {
+      const _ = (h) => {
+        const { isDisabled: g, isPreSelected: $ } = O(h);
+        return g && $ || !g;
+      }, m = f.filter(_).filter((h) => !i.value.includes(h.value));
+      e("select", [...t.selectedValues, ...m]);
+    }, x = (f) => {
+      const _ = (g) => {
+        const { isDisabled: $, isPreSelected: pe } = O(g);
+        return !($ && pe);
+      }, m = f.filter(_).map(({ value: g }) => g), h = t.selectedValues.filter((g) => !(m != null && m.includes(g.value)));
+      e("select", h);
+    }, L = () => {
+      v(y.value);
+    }, T = () => {
+      x(y.value);
+    }, { isAllSelected: E, isIndeterminate: C, toggleSelectAll: N } = ue(
+      u,
+      p,
+      L,
+      T
+    ), R = A(E.value), G = () => {
+      R.value = !R.value, N(R.value);
+    };
+    K(E, () => {
+      R.value = E.value;
+    });
+    const j = (f) => {
+      v(f.items);
+    }, k = (f) => {
+      x(f.items);
+    }, Y = (f, _) => {
+      let m = !1;
+      const h = t.selectedValues.filter(({ value: g }) => _.value === g ? (m = !0, !1) : !0);
+      m || h.push(_), e(f, h);
+    }, fe = c(() => {
+      if (!r.value)
+        return t.selectedValues;
+      const f = (g) => i.value.includes(g.value), _ = (g) => !t.staticCategories && g.every(($) => f($));
+      return t.items.flatMap(
+        (g) => g.items && !_(g.items) ? g.items : g
+      ).filter((g) => g.items ? !0 : f(g));
+    }), ve = c(() => {
+      var m, h, g, $;
+      const f = ["automatic", "button"].includes(t.lazyLoadType), _ = ((m = t.selectedValues) == null ? void 0 : m.length) > 0 && ((h = u.value) == null ? void 0 : h.length) !== ((g = y.value) == null ? void 0 : g.length);
+      return f && t.hasMoreItems ? !!(($ = t.selectedValues) != null && $.length) : _;
+    }), be = c(() => ["automatic", "button"].includes(t.lazyLoadType) ? !t.hasMoreItems : !0), ee = c(() => ({ label: B, value: E })), te = c(() => [ee, ...F(t, "items").value]), se = (f) => {
+      var m;
+      (m = Array.from(
+        n.value.querySelectorAll('[role="option"]')
+      ).filter((h) => h.checkVisibility())[f]) == null || m.focus();
+    }, {
+      moveToNextElement: le,
+      moveToPreviousElement: ne,
+      moveToFirstElement: oe,
+      moveToLastElement: ae,
+      preventDefault: H,
+      focusedIndex: me
+    } = de(
+      {
+        items: A(te),
+        hasStaticCategories: F(t, "staticCategories")
+      },
+      se
+    ), _e = {
+      [D.ARROW_UP]: (f) => ne(f),
+      [D.ARROW_DOWN]: (f) => le(f),
+      [D.HOME]: oe,
+      [D.END]: ae
+    }, ge = {
+      [D.ARROW_UP]: H,
+      [D.ARROW_DOWN]: H
+    };
+    return { __sfc: !0, props: t, emit: e, t: l, slots: o, listboxRef: n, selectAllListboxItemsRef: d, selectedListboxItemsRef: b, listboxItemsRef: S, selectedItemsList: i, isMultiLevelSelect: r, flattenedItemsList: y, optionStates: O, enabledItems: p, visibleSelectedList: u, calculateTotalItems: I, selectAllCheckboxText: B, selectAll: v, unselectAll: x, selectAllItems: L, unselectAllItems: T, isAllSelected: E, isIndeterminate: C, toggleSelectAll: N, isSelectAllOn: R, handleSelectAll: G, selectAllCategory: j, unselectAllCategory: k, toggleCheckboxSelection: Y, selectedOptions: fe, showSelectedItems: ve, showSelectAllCheckbox: be, computedselectAllItemRefs: ee, computedItems: te, focusItem: se, moveToNextElement: le, moveToPreviousElement: ne, moveToFirstElement: oe, moveToLastElement: ae, preventDefault: H, focusedIndex: me, listboxListeners: _e, chipsSectionListeners: ge, BentoCheckbox: Z, BentoTypography: z, BentoChip: Oe, BentoListboxOption: q, ListboxMultiSelectOptions: dt, vBentoKeyboardNavigationDirective: Q, BentoListboxEvent: a };
+  }
+});
+var _t = function() {
+  var e = this, t = e._self._c, l = e._self._setupProxy;
+  return t("div", { ref: "listboxRef", staticClass: "b-listbox-multi-select" }, [l.showSelectedItems ? t("div", [t("ul", e._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], staticClass: "b-listbox-multi-select__chips" }, l.chipsSectionListeners), e._l(l.selectedOptions, function(o) {
+    return t("li", { key: o.value }, [t(l.BentoChip, { ref: "selectedListboxItemsRef", refInFor: !0, attrs: { disabled: e.isOptionDisabled(o), label: o.label, condensed: "" }, on: { click: function(n) {
+      o.items ? l.unselectAllCategory(o) : l.toggleCheckboxSelection("select", o);
+    } } })], 1);
+  }), 0), t("hr", { staticClass: "b-listbox-multi-select__divider" })]) : e._e(), t("div", e._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }] }, l.listboxListeners), [l.showSelectAllCheckbox ? t(l.BentoListboxOption, { ref: "selectAllListboxItemsRef", staticClass: "b-listbox-multi-select__option", attrs: { tabindex: l.focusedIndex === 0 ? 0 : -1 }, on: { click: l.handleSelectAll, "enter-pressed": l.handleSelectAll, "space-pressed": function(o) {
+    return o.preventDefault(), l.handleSelectAll.apply(null, arguments);
+  } } }, [t(l.BentoCheckbox, { attrs: { "aria-label": l.selectAllCheckboxText, "model-value": l.isAllSelected, indeterminate: l.isIndeterminate, tabindex: -1 } }), t(l.BentoTypography, { attrs: { el: "span", "aria-hidden": "true" } }, [e._v(" " + e._s(l.selectAllCheckboxText) + " ")])], 1) : e._e(), l.showSelectAllCheckbox ? t("hr", { staticClass: "b-listbox-multi-select__divider" }) : e._e(), t(l.ListboxMultiSelectOptions, { ref: "listboxItemsRef", attrs: { items: e.items, "is-option-disabled": e.isOptionDisabled, "is-multi-level": l.isMultiLevelSelect, "static-categories": e.staticCategories, searching: e.searching, "selected-items-list": l.selectedItemsList, "focused-index": l.focusedIndex }, on: { "toggle-checkbox-selection": function(o) {
+    return l.toggleCheckboxSelection("select", o);
+  }, "select-category": l.selectAllCategory, "unselect-category": l.unselectAllCategory, "space-pressed": function(o) {
+    return l.toggleCheckboxSelection(l.BentoListboxEvent.SPACE, o);
+  }, "tab-pressed": function(o) {
+    return l.toggleCheckboxSelection(l.BentoListboxEvent.TAB, o);
+  }, "enter-pressed": function(o) {
+    return l.toggleCheckboxSelection(l.BentoListboxEvent.ENTER, o);
+  } }, scopedSlots: e._u([e._l(l.slots, function(o, n) {
+    return { key: n, fn: function(d) {
+      return [e._t(n, null, null, d)];
+    } };
+  })], null, !0) })], 1)]);
+}, gt = [], pt = /* @__PURE__ */ M(
+  mt,
+  _t,
+  gt,
+  !1,
+  null,
+  "a1c682be"
+);
+const re = pt.exports, yt = {
+  "en-US": {
+    loading: "Loading",
+    showMore: "Show more"
+  },
+  "ja-JP": {
+    loading: "読み込み中",
+    showMore: "表示内容を増やす"
+  },
+  "pt-BR": {
+    loading: "Carregando",
+    showMore: "Mostrar mais"
+  }
+}, ht = 36, St = P({
+  name: "bento-listbox",
+  components: {
+    BentoEmptyState: Ce,
+    BentoListboxSingleSelect: et,
+    BentoListboxMultiSelect: re,
+    BentoTypography: z,
+    BentoLoadingIndicator: xe,
+    BentoLoadingButton: Le
+  },
+  directives: { BentoKeyboardNavigationDirective: Q },
+  i18n: { messages: yt },
+  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: U.NONE,
+      validator: (s) => Object.values(U).includes(s)
+    },
+    /**
+     * Indicates the listbox is loading filtered items.
+     */
+    componentLoading: { type: Boolean, default: !1 },
+    /**
+     * If enabled, the user will be able to select multiple items.
+     */
+    multiple: { type: Boolean, default: !1 },
+    /**
+     * If enabled, dropdown will display non-selectable, static categories
+     */
+    staticCategories: { type: Boolean, default: !1 },
+    /**
+     * Messaged displayed when no items are listed in the listbox
+     */
+    noResultsMessage: { type: String, required: !0 },
+    /**
+     * Flag that indicates that an external search it's being made
+     * to filter out the items inside the the multi-select listbox
+     *
+     * If enabled, hides the "Select all" checkbox in "multiple" mode.
+     */
+    searching: re.props.searching,
+    /**
+     * The `input` value.
+     * Providing an empty string or empty array will select no options.
+     * Set to an empty string `''` if you don't want any of the available options to be selected for single select
+     */
+    selectedValue: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * Enables virtual scrolling if set to true or by providing an object with itemHeight function.
+     * The itemHeight function is used to calculate the height of rendered item given it's index.
+     */
+    virtualScroll: {
+      type: [Boolean, Object],
+      default: !1
+    }
+  },
+  emits: [
+    a.SELECT,
+    a.SPACE,
+    a.SHOW_MORE,
+    a.ENTER,
+    a.ESCAPE,
+    a.TAB
+  ],
+  setup(s, { emit: e, slots: t }) {
+    const l = A([]), o = F(s, "items"), { t: n } = J(), d = c(() => s.lazyLoadType !== U.AUTOMATIC), b = c(() => s.lazyLoadType === U.AUTOMATIC), S = () => {
+      var k;
+      return typeof (s == null ? void 0 : s.virtualScroll) == "object" && ((k = s == null ? void 0 : s.virtualScroll) != null && k.itemHeight) ? s.virtualScroll.itemHeight : ht;
+    }, {
+      containerRef: i,
+      containerProps: r,
+      onScroll: y,
+      list: O,
+      wrapperProps: p
+    } = Re(o, {
+      itemHeight: S(),
+      // Disable virtual scrolling if not enabled or if lazy loading is enabled or if multi-select
+      disabled: (s == null ? void 0 : s.multiple) || (s == null ? void 0 : s.virtualScroll) === !1 || (s == null ? void 0 : s.lazyLoadType) !== "none"
+    }), u = c(
+      () => s.componentLoading !== void 0 || d.value ? "true" : void 0
+    ), I = c(
+      () => d.value && s.loading || s.componentLoading ? "true" : "false"
+    ), B = c(
+      () => d.value || s.componentLoading !== void 0 ? "polite" : void 0
+    ), v = (k) => (Y) => {
+      e(k, Y);
+    }, x = () => {
+      e(a.SHOW_MORE);
+    }, L = Ee(() => {
+      const k = i.value;
+      if (!k)
+        return;
+      const Y = Math.round(k.scrollTop) + k.clientHeight >= k.scrollHeight;
+      s.hasMoreItems && Y && !s.loading && x();
+    }), T = () => {
+      b.value ? L() : y();
+    }, E = c(() => {
+      var k;
+      return ((k = s.items) == null ? void 0 : k.length) === 0;
+    }), C = c(
+      () => s.lazyLoadType === U.BUTTON && s.hasMoreItems
+    ), N = c(
+      () => s.loading ? ie.LOADING : ie.START
+    ), R = c(() => s.loading ? n("loading") : n("showMore")), G = c(() => ({
+      ...s.emptyState,
+      variant: "condensed"
+    })), j = {
+      [a.SELECT]: v(a.SELECT),
+      [a.SPACE]: v(a.SPACE),
+      [a.TAB]: v(a.TAB),
+      [a.ENTER]: v(a.ENTER)
+    };
+    return {
+      // Refs
+      listboxRef: i,
+      listboxItemRef: l,
+      // a11y
+      ariaAtomic: u,
+      ariaBusy: I,
+      ariaLive: B,
+      // Values
+      containerProps: r,
+      isSearchResultEmpty: E,
+      limitedEmptyStateProps: G,
+      loadingButtonState: N,
+      slots: t,
+      shouldDisplayShowMoreButton: C,
+      showMoreButtonText: R,
+      virtualisedItems: O,
+      wrapperProps: p,
+      // Enums
+      BentoKeyboardNavigationKeyDownEvent: D,
+      BentoListboxEvent: a,
+      // Methods
+      onListboxContainerScroll: T,
+      onOptionSelected: v,
+      emitShowMore: x,
+      listboxListeners: j
+    };
+  }
+});
+var xt = function() {
+  var l;
+  var e = this, t = e._self._c;
+  return e._self._setupProxy, t("div", { directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], ref: "listboxRef", staticClass: "b-listbox", style: (l = e.containerProps) == null ? void 0 : l.style, attrs: { id: e.id, role: "listbox", tabindex: "-1", "aria-busy": e.ariaBusy, "aria-atomic": e.ariaAtomic, "aria-label": e.ariaLabel, "aria-live": e.ariaLive }, on: { scroll: e.onListboxContainerScroll } }, [t("div", e._b({}, "div", e.wrapperProps, !1), [e.componentLoading ? t("div", { staticClass: "b-listbox__loading-filtered-items" }, [t("bento-loading-indicator")], 1) : e.isSearchResultEmpty ? t("div", { staticClass: "b-listbox__empty-search-message" }, [e.emptyState ? t("bento-empty-state", e._b({}, "bento-empty-state", e.limitedEmptyStateProps, !1)) : t("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(e.noResultsMessage))])], 1) : [e.multiple ? [t("bento-listbox-multi-select", e._g({ ref: "listboxItemRef", attrs: { "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 }, scopedSlots: e._u([e._l(e.slots, function(o, n) {
+    return { key: n, fn: function(d) {
+      return [e._t(n, null, null, d)];
+    } };
+  })], null, !0) }, e.listboxListeners))] : [t("bento-listbox-single-select", e._g({ ref: "listboxItemRef", attrs: { items: e.virtualisedItems, "selected-value": e.selectedValue, "static-categories": e.staticCategories, "is-option-disabled": e.isOptionDisabled }, scopedSlots: e._u([e._l(e.slots, function(o, n) {
+    return { key: n, fn: function(d) {
+      return [e._t(n, null, null, d)];
+    } };
+  })], null, !0) }, e.listboxListeners))], e.shouldDisplayShowMoreButton ? t("div", { staticClass: "b-listbox__lazy-load" }, [t("bento-loading-button", { attrs: { state: e.loadingButtonState, variant: "secondary" }, on: { "!click": function(o) {
+    return e.emitShowMore.apply(null, arguments);
+  } } }, [e._v(" " + e._s(e.showMoreButtonText) + " ")])], 1) : e.loading ? t("div", { staticClass: "b-listbox__lazy-load" }, [t("bento-loading-indicator")], 1) : e._e()]], 2)]);
+}, Ct = [], Et = /* @__PURE__ */ M(
+  St,
+  xt,
+  Ct,
+  !1,
+  null,
+  "37a9ab16"
+);
+const Ut = Et.exports, V = (s, e) => {
+  for (const t of s) {
+    if (t.value === e)
+      return t;
+    if (t.items) {
+      const l = V(t.items, e);
+      if (l)
+        return l;
+    }
+  }
+  return null;
+}, Ot = (s) => typeof s == "object" && s !== null && "value" in s && "label" in s, zt = (s, e, t, l) => {
+  const o = A([]), n = A(), d = (r) => {
+    t.value ? n.value = r.map(({ value: y }) => y) : n.value = r.length > 0 ? r[0].value : null;
+  }, b = (r) => {
+    t.value ? n.value = r.map(({ value: y, label: O }) => ({ value: y, label: O })) : n.value = r.length > 0 ? { value: r[0].value, label: r[0].label } : null;
+  }, S = (r) => {
+    o.value = r, l != null && l.value ? b(r) : d(r);
+  }, i = () => {
+    o.value = [], n.value = null;
+  };
+  return K(
+    [() => s.value, () => e.value],
+    () => {
+      if (!e.value && e.value !== 0) {
+        i();
+        return;
+      }
+      const r = !Array.isArray(e.value), y = [...o.value];
+      i();
+      const O = (p) => {
+        if (Ot(p))
+          o.value.push(p);
+        else {
+          let u = V(s.value, p);
+          u || (u = V(y, p)), u || (u = { value: p, label: p.toString() }), o.value.push(u);
+        }
+      };
+      if (r) {
+        const p = e.value;
+        O(p), l != null && l.value ? b(o.value) : d(o.value);
+        return;
+      }
+      e.value.forEach(O), l != null && l.value ? b(o.value) : d(o.value);
+    },
+    { immediate: !0 }
+  ), {
+    // Values
+    cachedSelectedListboxOptions: o,
+    cachedListboxSelectedValues: n,
+    // Methods
+    resetCache: i,
+    setCachedValues: S
+  };
+};
+export {
+  U as B,
+  a,
+  Ut as b,
+  zt as c,
+  ft as u
+};
+//# sourceMappingURL=use-cached-selected-values.Da6xbfzO.js.map