@adyen/bento-vue2 1.90.0 → 1.92.0

package/dist/chunks/use-cached-selected-values.Du8-wWR2.js

@@ -0,0 +1,1520 @@
+import { computed as n, ref as T, onMounted as $e, onUnmounted as Ne, watch as H, defineComponent as F, nextTick as ae, toRef as j, useSlots as Ge, useAttrs as Pe } from "vue";
+import { B as $, a as ne } from "./keyboard-navigation.DWmhelVv.js";
+import { B as q } from "./typography.C8lPlsbD.js";
+import { B as Fe } from "./loading-indicator.PxbRzshH.js";
+import { B as Ye } from "./empty-state.DMV23IZy.js";
+import { u as ie } from "./index.B6WW_F-J.js";
+import { o as ze } from "./resize.Bqks3WUm.js";
+import "./index.Cl4_42j5.js";
+import { C as Q, N as Ue } from "./minus-small.DJacLGTw.js";
+import { C as Ve } from "./checkmark-small.DVDtD4HQ.js";
+/* empty css              */
+import { n as N } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { B as We } from "./chip.BFY_-VCz.js";
+import { C as Ke } from "./chevron-down.eYtgv5ly.js";
+import { C as je } from "./chevron-up.d8cwIlA_.js";
+import { g as _e } from "./generate-uid.NJ8tVoha.js";
+import { a as qe, b as pe } from "./button-actions.CXD6_9qN.js";
+import "../assets/use-cached-selected-values.css";
+const Ce = (l, e, s, t) => {
+  const o = n(
+    () => {
+      var f, L;
+      return !!((f = l.value) != null && f.length) && ((L = l.value) == null ? void 0 : L.length) === e.value.length;
+    }
+  ), a = n(() => {
+    var f;
+    return l.value == null || l.value.length === 0 ? !1 : ((f = l.value) == null ? void 0 : f.length) !== e.value.length;
+  });
+  return {
+    isAllSelected: o,
+    isIndeterminate: a,
+    toggleSelectAll: (f) => {
+      f ? s() : t();
+    }
+  };
+};
+function Xe(l, { disabled: e, itemHeight: s, overscan: t = 5, prefixHeight: o }) {
+  const a = T(null), c = T([]), f = T(0), L = T(0), m = T(0);
+  let d;
+  const A = n(() => {
+    const h = typeof s == "number" ? l.value.length * s : l.value.reduce((E, C, O) => E + s(O), 0), x = typeof s == "number" ? f.value * s : l.value.slice(0, f.value).reduce((E, C, O) => E + s(O), 0);
+    return {
+      style: {
+        marginTop: `${x}px`,
+        height: `${h - x}px`
+      }
+    };
+  }), k = () => {
+    const h = (o == null ? void 0 : o.value) ?? 0, x = Math.max(a.value.scrollTop - h, 0);
+    if (typeof s == "number")
+      return Math.floor(x / s);
+    let E = 0, C = 0;
+    for (let O = 0; O < l.value.length; O += 1) {
+      const D = s(O);
+      if (E += D, E >= x) {
+        C = O;
+        break;
+      }
+    }
+    return C;
+  }, v = () => {
+    if (m.value = a.value.clientHeight, typeof s == "number")
+      return Math.ceil(m.value / s);
+    const h = f.value ?? 0;
+    let x = 0, E = 0;
+    for (let C = h; C < l.value.length; C += 1) {
+      const O = s(C);
+      if (x += O, E = C, x > m.value)
+        break;
+    }
+    return E - h;
+  }, p = () => {
+    if (a.value) {
+      const h = v();
+      f.value = k(), L.value = Math.min(f.value + h + t, l.value.length), c.value = l.value.slice(f.value, L.value);
+    }
+  }, R = () => {
+    p();
+  };
+  e || ($e(() => {
+    a.value && (m.value = a.value.clientHeight, d = ze(a.value, ({ clientHeight: h }) => {
+      m.value = h, p();
+    }), p());
+  }), Ne(() => {
+    d == null || d.disconnect();
+  }), H(
+    () => l.value,
+    () => {
+      p();
+    }
+  ));
+  const M = {
+    ref: a,
+    style: { overflowY: "auto" }
+  }, G = (h) => {
+    if (!a.value)
+      return;
+    const x = typeof s == "number" ? h * s : l.value.slice(0, h).reduce((_, I, B) => _ + s(B), 0), E = typeof s == "number" ? s : s(h), C = x + E, { scrollTop: O, clientHeight: D } = a.value, r = O + D;
+    C > r ? a.value.scrollTop = D > 0 ? C - D : x : x < O && (a.value.scrollTop = x), p();
+  };
+  return e ? {
+    containerRef: a,
+    containerProps: M,
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    onScroll: () => {
+    },
+    list: l,
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    scrollToIndex: () => {
+    },
+    startIndex: T(0)
+  } : {
+    containerRef: a,
+    containerProps: M,
+    onScroll: R,
+    list: c,
+    wrapperProps: A,
+    scrollToIndex: G,
+    startIndex: f
+  };
+}
+var u = /* @__PURE__ */ ((l) => (l.SELECT = "select", l.SHOW_MORE = "show-more", l.ESCAPE = "escape-pressed", l.CLICK = "click", l.ENTER = "enter-pressed", l.SPACE = "space-pressed", l.TAB = "tab-pressed", l.CLOSE_DROPDOWN = "close-dropdown", l))(u || {}), K = /* @__PURE__ */ ((l) => (l.AUTOMATIC = "automatic", l.BUTTON = "button", l.NONE = "none", l))(K || {});
+const He = F({
+  name: "bento-listbox-static-category",
+  components: {
+    BentoTypography: q
+  },
+  props: {
+    /**
+     * Category label text
+     */
+    categoryLabel: {
+      type: String,
+      required: !0
+    }
+  }
+});
+var Je = function() {
+  var e = this, s = e._self._c;
+  return e._self._setupProxy, s("div", { staticClass: "b-listbox-single-select-category", attrs: { role: "group", "aria-label": e.categoryLabel } }, [s("bento-typography", { staticClass: "b-listbox-single-select-category__label-text", attrs: { variant: "caption", el: "span", "aria-hidden": "true" } }, [e._v(" " + e._s(e.categoryLabel) + " ")]), s("div", [e._t("default")], 2)], 1);
+}, Ze = [], Qe = /* @__PURE__ */ N(
+  He,
+  Je,
+  Ze,
+  !1,
+  null,
+  "bfbc1649"
+);
+const et = Qe.exports, tt = F({
+  name: "bento-listbox-option",
+  props: {
+    /**
+     * Setting this property to true will disable the option.
+     */
+    disabled: { type: Boolean, default: !1 },
+    /**
+     * Indicates if the value is selected. Only one element can be selected at a time.
+     */
+    selected: { type: Boolean, default: !1 }
+  },
+  emits: [u.CLICK, u.ENTER, u.SPACE, u.TAB],
+  setup(l, { emit: e }) {
+    const s = n(() => ({
+      "b-listbox-option--disabled": l.disabled,
+      "b-listbox-option--selected": l.selected
+    }));
+    return {
+      // Enums
+      BentoKeyboardNavigationKeyDownEvent: $,
+      BentoListboxEvent: u,
+      // Values
+      conditionalClasses: s,
+      // Events
+      onClick: (a) => {
+        e(u.CLICK, a);
+      },
+      onOptionSelected: (a, c) => {
+        e(a, c);
+      }
+    };
+  }
+});
+var lt = function() {
+  var e = this, s = e._self._c;
+  return e._self._setupProxy, s("div", e._b({ staticClass: "b-listbox-option", class: e.conditionalClasses, attrs: { role: "option" }, on: { click: e.onClick, keydown: [function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "enter", 13, t.key, "Enter") ? null : e.onOptionSelected(e.BentoListboxEvent.ENTER, t);
+  }, function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "space", 32, t.key, [" ", "Spacebar"]) ? null : e.onOptionSelected(e.BentoListboxEvent.SPACE, t);
+  }, function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "tab", 9, t.key, "Tab") ? null : e.onOptionSelected(e.BentoListboxEvent.TAB, t);
+  }] } }, "div", e.$attrs, !1), [e._t("default")], 2);
+}, st = [], ot = /* @__PURE__ */ N(
+  tt,
+  lt,
+  st,
+  !1,
+  null,
+  "c345b6c0"
+);
+const ee = ot.exports;
+let ye = 0;
+const at = {
+  beforeCreate() {
+    this.uuid = ye.toString(), ye += 1;
+  }
+};
+var nt = function() {
+  var e = this, s = e._self._c;
+  return s("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"] ? s("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), s("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" } })]);
+}, it = [], ct = /* @__PURE__ */ N(
+  at,
+  nt,
+  it,
+  !1,
+  null,
+  null
+);
+const rt = ct.exports, ut = F({
+  name: "bento-listbox-single-select-option",
+  components: {
+    BentoListboxOption: ee,
+    BentoTypography: q,
+    CheckmarkIcon: rt
+  },
+  props: {
+    /**
+     * Setting this property to true will disable the option.
+     */
+    disabled: { type: Boolean, default: !1 },
+    /**
+     * The option item that contains all the option item's data.
+     * @type {BentoListboxOptionItem}
+     */
+    option: {
+      type: Object,
+      required: !0
+    },
+    /**
+     * Indicates if the value is selected. Only one element can be selected at a time.
+     */
+    selected: { type: Boolean, default: !1 }
+  },
+  emits: [u.ENTER, u.SELECT, u.SPACE, u.TAB],
+  setup(l, { emit: e }) {
+    const s = (c) => {
+      l.disabled || e(c, l.option);
+    }, t = n(() => l.disabled ? !0 : null), o = n(() => l.selected ? !0 : null), a = n(() => l.disabled ? -1 : 0);
+    return {
+      // Values
+      ariaDisabled: t,
+      ariaSelected: o,
+      tabIndex: a,
+      // Enums
+      BentoListboxEvent: u,
+      // Events
+      onOptionSelected: s
+    };
+  }
+});
+var dt = function() {
+  var e = this, s = e._self._c;
+  return e._self._setupProxy, s("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(t) {
+    return e.onOptionSelected(e.BentoListboxEvent.SELECT);
+  }, "enter-pressed": function(t) {
+    return e.onOptionSelected(e.BentoListboxEvent.ENTER);
+  }, "space-pressed": function(t) {
+    return t.preventDefault(), e.onOptionSelected(e.BentoListboxEvent.SPACE);
+  }, "tab-pressed": function(t) {
+    return e.onOptionSelected(e.BentoListboxEvent.TAB);
+  } } }, [e._t("default", function() {
+    return [s("span", { staticClass: "b-listbox-single-select-option__text" }, [s("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(e.option.label))]), e.option.description ? s("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), s("span", { staticClass: "b-listbox-single-select-option__check-icon" }, [s("checkmark-icon", { directives: [{ name: "show", rawName: "v-show", value: e.selected, expression: "selected" }], attrs: { "svg-title": "selected" } })], 1)], 2);
+}, bt = [], ft = /* @__PURE__ */ N(
+  ut,
+  dt,
+  bt,
+  !1,
+  null,
+  "bb14d75a"
+);
+const mt = ft.exports, xe = ({ items: l, totalItemCount: e }, s) => {
+  const t = n(() => e != null && e.value ? e.value - 1 : l.value.length - 1), o = T(0), a = (v) => {
+    switch (v) {
+      case "increase":
+        o.value += 1;
+        break;
+      case "decrease":
+        o.value -= 1;
+        break;
+    }
+  }, c = ({ edgeCaseItem: v }, p) => {
+    o.value !== v && (a(p), s(o.value));
+  }, f = (v) => {
+    k(v), c(
+      {
+        edgeCaseItem: t.value
+      },
+      "increase"
+      /* INCREASE */
+    );
+  }, L = (v) => {
+    k(v), c(
+      {
+        edgeCaseItem: 0
+      },
+      "decrease"
+      /* DECREASE */
+    );
+  }, m = () => {
+    o.value = 0, s(o.value);
+  }, d = () => {
+    o.value = t.value, s(o.value);
+  }, A = (v) => {
+    o.value = v;
+  }, k = (v) => {
+    var p;
+    (p = v == null ? void 0 : v.detail) == null || p.preventDefault();
+  };
+  return {
+    moveToFirstElement: m,
+    moveToLastElement: d,
+    moveToNextElement: f,
+    moveToPreviousElement: L,
+    setListboxFocusedIndex: A,
+    preventDefault: k,
+    focusedIndex: o
+  };
+}, Oe = (l, e, s = T("option"), t = !0) => {
+  const o = T([]), a = async () => {
+    if (!l.value || l.value.nodeType === Node.COMMENT_NODE)
+      return;
+    const c = Array.from(l.value.querySelectorAll(`[role="${s.value}"]`));
+    o.value = t ? c.filter((f) => f.checkVisibility()) : c;
+  };
+  return H(
+    e,
+    () => {
+      ae(() => {
+        a();
+      });
+    },
+    { immediate: !0 }
+  ), {
+    visibleDomOptions: o,
+    updateVisibleDomOptions: a
+  };
+}, vt = F({
+  name: "bento-listbox-single-select",
+  components: {
+    BentoListboxSingleSelectCategory: et,
+    BentoListboxSingleSelectOption: mt
+  },
+  directives: { BentoKeyboardNavigationDirective: ne },
+  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 },
+    /**
+     * Total number of items in the full list (used for virtual scroll keyboard navigation).
+     * When greater than 0, virtual scroll keyboard navigation is enabled.
+     */
+    totalItemCount: { type: Number, default: 0 },
+    /**
+     * Function to scroll the virtual list container to a given item index.
+     */
+    scrollToIndex: { type: Function, default: void 0 },
+    /**
+     * The start index of the currently rendered virtual scroll slice.
+     */
+    virtualScrollStartIndex: { type: Number, default: 0 }
+  },
+  emits: [u.SELECT, u.ENTER, u.SPACE, u.TAB],
+  setup(l, { emit: e, expose: s, slots: t, attrs: o }) {
+    const a = T(null), c = T([]), f = n(() => {
+      var r;
+      return !!((r = l.selectedValue) != null && r.length) && l.selectedValue.at(0);
+    }), L = n(
+      () => {
+        var r, _, I, B;
+        return {
+          "aria-label": (r = o["aria-label"]) == null ? void 0 : r.toString(),
+          "aria-busy": (_ = o["aria-busy"]) == null ? void 0 : _.toString(),
+          "aria-atomic": (I = o["aria-atomic"]) == null ? void 0 : I.toString(),
+          "aria-live": (B = o["aria-live"]) == null ? void 0 : B.toString()
+        };
+      }
+    ), m = n(() => !!l.items.some(({ items: r }) => !!r)), d = (r) => (_) => {
+      e(r, [_]);
+    }, { visibleDomOptions: A, updateVisibleDomOptions: k } = Oe(
+      a,
+      j(l, "items"),
+      T("option"),
+      !1
+    ), v = n(() => l.totalItemCount > 0), p = (r) => {
+      if (!v.value)
+        return;
+      const _ = r.target;
+      if (_ === a.value || (_ == null ? void 0 : _.getAttribute("role")) !== "option")
+        return;
+      const I = A.value.indexOf(_);
+      if (I !== -1) {
+        const B = I + l.virtualScrollStartIndex;
+        C(B);
+      }
+    }, R = async (r) => {
+      var _, I;
+      if (v.value && l.scrollToIndex) {
+        l.scrollToIndex(r), await ae(), await k();
+        const B = r - l.virtualScrollStartIndex;
+        (_ = A.value[B]) == null || _.focus();
+      } else
+        (I = A.value[r]) == null || I.focus();
+    }, M = async (r) => {
+      C(r), await R(r);
+    }, {
+      moveToNextElement: G,
+      moveToPreviousElement: h,
+      moveToFirstElement: x,
+      moveToLastElement: E,
+      setListboxFocusedIndex: C
+    } = xe(
+      {
+        items: A,
+        totalItemCount: j(l, "totalItemCount")
+      },
+      R
+    ), O = {
+      [$.ARROW_UP]: h,
+      [$.ARROW_DOWN]: G,
+      [$.HOME]: x,
+      [$.END]: E
+    }, D = {
+      [u.SELECT]: d(u.SELECT),
+      [u.SPACE]: d(u.SPACE),
+      [u.TAB]: d(u.TAB),
+      [u.ENTER]: d(u.ENTER)
+    };
+    return s({
+      /**
+       * Reference for a single listbox item.
+       * Required for keyboard navigation in dropdown as $children is removed in vue@3
+       */
+      listboxItemRef: c,
+      /**
+       * 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: C,
+      /**
+       * Navigates to an item by global index, handling virtual scroll if enabled.
+       * Scrolls the virtual list and focuses the item.
+       */
+      navigateToItem: M
+    }), {
+      // Enums
+      BentoListboxEvent: u,
+      // Values
+      listboxRef: a,
+      listboxItemRef: c,
+      selectedItem: f,
+      slots: t,
+      ariaAttributes: L,
+      // Computed
+      hasCategories: m,
+      // Methods
+      onOptionSelected: d,
+      // Keyboard navigation
+      listboxListeners: O,
+      listboxOptionListeners: D,
+      // Virtual scroll focus management
+      handleVirtualScrollingFocus: p
+    };
+  }
+});
+var gt = function() {
+  var e = this, s = e._self._c;
+  return e._self._setupProxy, s("div", e._g(e._b({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], ref: "listboxRef", attrs: { role: "listbox" }, on: { focusin: e.handleVirtualScrollingFocus } }, "div", e.ariaAttributes, !1), e.listboxListeners), [e.hasCategories && e.staticCategories ? [e._l(e.items, function(t) {
+    return [t.items && t.items.length > 0 ? s("bento-listbox-single-select-category", { key: `category-${t.value}`, attrs: { "category-label": t.label } }, e._l(t.items, function(o) {
+      return s("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(a, c) {
+        return { key: c, fn: function(f) {
+          return [e._t(c, null, null, f)];
+        } };
+      })], null, !0) }, e.listboxOptionListeners));
+    }), 1) : s("bento-listbox-single-select-option", e._g({ key: `option-${t.value}`, ref: "listboxItemRef", refInFor: !0, attrs: { role: "option", option: t, disabled: e.isOptionDisabled ? e.isOptionDisabled(t) : null, selected: t.value === e.selectedItem.value }, scopedSlots: e._u([e._l(e.slots, function(o, a) {
+      return { key: a, fn: function(c) {
+        return [e._t(a, null, null, c)];
+      } };
+    })], null, !0) }, e.listboxOptionListeners))];
+  })] : e._l(e.items, function(t) {
+    return s("bento-listbox-single-select-option", e._g({ key: t.value, ref: "listboxItemRef", refInFor: !0, attrs: { role: "option", option: t, disabled: e.isOptionDisabled ? e.isOptionDisabled(t) : null, selected: t.value === e.selectedItem.value }, scopedSlots: e._u([e._l(e.slots, function(o, a) {
+      return { key: a, fn: function(c) {
+        return [e._t(a, null, null, c)];
+      } };
+    })], null, !0) }, e.listboxOptionListeners));
+  })], 2);
+}, _t = [], pt = /* @__PURE__ */ N(
+  vt,
+  gt,
+  _t,
+  !1,
+  null,
+  null
+);
+const yt = pt.exports;
+let he = 0;
+const ht = {
+  beforeCreate() {
+    this.uuid = he.toString(), he += 1;
+  }
+};
+var St = function() {
+  var e = this, s = e._self._c;
+  return s("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"] ? s("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), s("path", { attrs: { fill: "#001222", d: "M9.69043 5.75L4.62988 10.8105L1.56934 7.75L2.62988 6.68945L4.62988 8.68945L8.62988 4.68945L9.69043 5.75Z" } }), s("path", { attrs: { fill: "#001222", d: "M13.9307 5.75L8.87012 10.8105L7.80957 9.75L12.8701 4.68945L13.9307 5.75Z" } })]);
+}, Ct = [], xt = /* @__PURE__ */ N(
+  ht,
+  St,
+  Ct,
+  !1,
+  null,
+  null
+);
+const Ot = xt.exports, Et = {}, Tt = /* @__PURE__ */ F({
+  ...Et,
+  __name: "decorative-checkbox",
+  props: {
+    disabled: { type: Boolean, default: !1 },
+    indeterminate: { type: Boolean, default: !1 },
+    checked: { type: Boolean, default: !1 },
+    allSelected: { type: Boolean, default: !1 }
+  },
+  setup(l) {
+    const e = l, s = n(() => ({
+      [`b-checkbox-input--${Q.DISABLED}`]: e.disabled
+    })), t = n(() => ({
+      [`b-checkbox-input__outline--${Q.UNCHECKED}`]: !e.checked && !e.indeterminate && !e.allSelected,
+      [`b-checkbox-input__outline--${Q.CHECKED}`]: (e.checked || e.allSelected) && !e.indeterminate,
+      [`b-checkbox-input__outline--${Q.INDETERMINATE}`]: e.indeterminate
+    }));
+    return { __sfc: !0, props: e, conditionalClasses: s, outlineConditionalClasses: t, CheckmarkSmallIcon: Ve, MinusSmallIcon: Ue, DoubleCheckmarkSmallIcon: Ot };
+  }
+});
+var It = function() {
+  var e = this, s = e._self._c, t = e._self._setupProxy;
+  return s("div", { staticClass: "b-checkbox-input", class: t.conditionalClasses, attrs: { role: "presentation" } }, [e.indeterminate ? s(t.MinusSmallIcon, { staticClass: "b-checkbox-input__icon", attrs: { "svg-title": "", "aria-hidden": "true" } }) : e.allSelected ? s(t.DoubleCheckmarkSmallIcon, { staticClass: "b-checkbox-input__icon", attrs: { "svg-title": "", "aria-hidden": "true", "data-testid": "decorative-checkbox-double-checkmark-icon" } }) : e.checked ? s(t.CheckmarkSmallIcon, { staticClass: "b-checkbox-input__icon", attrs: { "svg-title": "", "aria-hidden": "true" } }) : e._e(), s("div", { staticClass: "b-checkbox-input__outline", class: t.outlineConditionalClasses })], 1);
+}, At = [], Lt = /* @__PURE__ */ N(
+  Tt,
+  It,
+  At,
+  !1,
+  null,
+  "b87bbaf9"
+);
+const ce = Lt.exports;
+var Ee = /* @__PURE__ */ ((l) => (l.DISABLED = "disabled", l.STATIC_CATEGORY = "static-category", l))(Ee || {}), V = /* @__PURE__ */ ((l) => (l.SELECT_CATEGORY = "select-category", l.UNSELECT_CATEGORY = "unselect-category", l.TOGGLE_CATEGORY_VISIBILITY = "toggle-category-visibility", l))(V || {});
+const kt = {
+  "de-DE": {
+    categoryClosed: "{category} geschlossen",
+    categoryOpened: "{category} geöffnet"
+  },
+  "en-GB": {
+    categoryClosed: "{category} closed",
+    categoryOpened: "{category} opened"
+  },
+  "en-US": {
+    categoryClosed: "{category} closed",
+    categoryOpened: "{category} opened"
+  },
+  "es-ES": {
+    categoryClosed: "{category} cerrado",
+    categoryOpened: "{category} abierto"
+  },
+  "es-MX": {
+    categoryClosed: "{category} cerrado",
+    categoryOpened: "{category} abierto"
+  },
+  "fr-FR": {
+    categoryClosed: "{category} fermée",
+    categoryOpened: "{category} ouverte"
+  },
+  "it-IT": {
+    categoryClosed: "{category} chiuso",
+    categoryOpened: "{category} aperto"
+  },
+  "ja-JP": {
+    categoryClosed: "{category}を閉じました",
+    categoryOpened: "{category}を開きました"
+  },
+  "pt-BR": {
+    categoryClosed: "{category} fechada",
+    categoryOpened: "{categoria} aberta"
+  },
+  "zh-CN": {
+    categoryClosed: "{category} 已关闭",
+    categoryOpened: "{category} 已打开"
+  }
+}, Dt = F({
+  i18n: { messages: kt },
+  name: "bento-listbox-multi-select-category",
+  components: {
+    BentoTypography: q,
+    BentoListboxOption: ee,
+    ChevronDownIcon: Ke,
+    ChevronUpIcon: je,
+    DecorativeCheckbox: ce
+  },
+  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: [
+    V.SELECT_CATEGORY,
+    V.UNSELECT_CATEGORY,
+    V.TOGGLE_CATEGORY_VISIBILITY
+  ],
+  setup(l, { emit: e }) {
+    const s = T(!1), { t } = ie(), o = _e("category-group"), a = _e("category-name"), c = (r) => l.isOptionDisabled ? l.isOptionDisabled(r) : !1, f = n(
+      () => l.category.items.every((r) => c(r))
+    ), L = j(l, "staticCategories"), m = n(() => s.value || l.staticCategories), d = n(() => ({
+      [`b-listbox-multi-select-category--${Ee.DISABLED}`]: f.value
+    })), A = (r, _) => {
+      r.preventDefault(), s.value = _ !== void 0 ? _ : !s.value, e(V.TOGGLE_CATEGORY_VISIBILITY, l.category.value);
+    }, k = (r) => {
+      var B;
+      const _ = c(r), I = ((B = l.selectedItemsList) == null ? void 0 : B.includes(r.value)) || !1;
+      return { isDisabled: _, isPreSelected: I };
+    }, v = n(
+      () => l.category.items.filter((r) => {
+        const { isDisabled: _, isPreSelected: I } = k(r);
+        return _ && I || !_;
+      })
+    ), p = n(
+      () => {
+        var r;
+        return (r = v.value) == null ? void 0 : r.filter(
+          ({ value: _ }) => {
+            var I;
+            return (I = l.selectedItemsList) == null ? void 0 : I.includes(_);
+          }
+        );
+      }
+    ), R = n(() => {
+      const r = s.value ? "categoryOpened" : "categoryClosed";
+      return t(r, { category: l.category.label });
+    }), M = () => {
+      e(V.SELECT_CATEGORY);
+    }, G = () => {
+      e(V.UNSELECT_CATEGORY);
+    }, { isAllSelected: h, isIndeterminate: x, toggleSelectAll: E } = Ce(
+      p,
+      v,
+      M,
+      G
+    ), C = n(() => x.value ? "mixed" : `${h.value}`), O = T(h.value), D = () => {
+      O.value = !O.value, E(O.value);
+    };
+    return H(h, () => {
+      O.value = h.value;
+    }), {
+      // Values
+      chevronTitle: R,
+      conditionalClass: d,
+      hasAllPropsDisabled: f,
+      isOpen: s,
+      isAllSelected: h,
+      isIndeterminate: x,
+      isStaticCategory: L,
+      categoryGroupId: o,
+      categoryNameId: a,
+      // Computed
+      showItemChildren: m,
+      ariaCheckedComputed: C,
+      // Methods
+      handleSelectAll: D,
+      toggleOpen: A,
+      toggleSelectAll: E
+    };
+  }
+});
+var Rt = function() {
+  var e = this, s = e._self._c;
+  return e._self._setupProxy, s("div", [e.isStaticCategory ? s("div", { staticClass: "b-listbox-multi-select-category b-listbox-multi-select-category--static-category", attrs: { "aria-hidden": "true" } }, [s("span", { staticClass: "b-listbox-multi-select-category__label" }, [s("bento-typography", { staticClass: "b-listbox-multi-select-category__label-text", attrs: { el: "span", variant: "caption" } }, [e._v(" " + e._s(e.category.label) + " ")])], 1)]) : s("bento-listbox-option", { staticClass: "b-listbox-multi-select-category__option", class: e.conditionalClass, attrs: { tabindex: e.tabindex, "aria-selected": e.ariaCheckedComputed !== "false", "aria-checked": e.ariaCheckedComputed, "aria-disabled": e.hasAllPropsDisabled, "aria-expanded": `${e.isOpen}`, role: "treeitem", "aria-owns": e.categoryGroupId, "aria-labelledby": e.categoryNameId }, on: { click: e.handleSelectAll, "enter-pressed": e.handleSelectAll, "space-pressed": function(t) {
+    return t.preventDefault(), e.handleSelectAll.apply(null, arguments);
+  } }, nativeOn: { keydown: [function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "arrow-left", void 0, t.key, void 0) ? null : e.toggleOpen(t, !1);
+  }, function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "arrow-right", void 0, t.key, void 0) ? null : e.toggleOpen(t, !0);
+  }] } }, [s("decorative-checkbox", { attrs: { indeterminate: e.isIndeterminate, disabled: e.hasAllPropsDisabled, checked: e.isAllSelected } }), s("span", { staticClass: "b-listbox-multi-select-category__label" }, [s("bento-typography", { staticClass: "b-listbox-multi-select-category__label-text", attrs: { id: e.categoryNameId, el: "span" } }, [e._v(" " + e._s(e.category.label) + " ")]), s("div", { staticClass: "b-listbox-multi-select-category__label-chevron", attrs: { "aria-hidden": "true", "data-testid": "toggle-listbox" }, on: { "!click": function(t) {
+    return t.stopPropagation(), e.toggleOpen.apply(null, arguments);
+  } } }, [e.isOpen ? s("chevron-up-icon", { attrs: { "svg-title": e.chevronTitle } }) : s("chevron-down-icon", { attrs: { "svg-title": e.chevronTitle } })], 1)], 1)], 1), s("div", { directives: [{ name: "show", rawName: "v-show", value: e.showItemChildren, expression: "showItemChildren" }], attrs: { id: e.categoryGroupId, role: "group", "aria-label": e.category.label } }, [e._t("default")], 2)], 1);
+}, Bt = [], wt = /* @__PURE__ */ N(
+  Dt,
+  Rt,
+  Bt,
+  !1,
+  null,
+  "00ccd708"
+);
+const Mt = wt.exports;
+var P = /* @__PURE__ */ ((l) => (l.SELECT_CATEGORY = "select-category", l.TOGGLE_CHECKBOX_SELECTION = "toggle-checkbox-selection", l.UNSELECT_CATEGORY = "unselect-category", l.TOGGLE_CATEGORY_VISIBILITY = "toggle-category-visibility", l))(P || {});
+const $t = F({
+  name: "listbox-multi-select-options",
+  components: {
+    BentoListboxOption: ee,
+    BentoTypography: q,
+    ListboxMultiSelectCategory: Mt,
+    DecorativeCheckbox: ce
+  },
+  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: [
+    P.TOGGLE_CHECKBOX_SELECTION,
+    P.SELECT_CATEGORY,
+    P.UNSELECT_CATEGORY,
+    P.TOGGLE_CATEGORY_VISIBILITY
+  ],
+  setup(l, { emit: e }) {
+    const s = (m) => {
+      l.isOptionDisabled(m) || e(P.TOGGLE_CHECKBOX_SELECTION, m);
+    }, t = (m) => !!m.items, o = (m) => {
+      const d = l.isMultiLevel && l.searching;
+      return m.description && (!l.isMultiLevel || d);
+    }, a = (m) => m.items ? !!m.items.find((d) => l.selectedItemsList.includes(d.value)) : l.selectedItemsList.includes(m.value), c = (m) => {
+      if (t(m)) {
+        const d = a(m) ? P.UNSELECT_CATEGORY : P.SELECT_CATEGORY;
+        e(d, m);
+      } else
+        s(m);
+    };
+    return {
+      // Values
+      conditionalClasses: n(() => ({
+        "b-listbox-multi-select-options__static-category-option": l.staticCategories,
+        "b-listbox-multi-select-options__category-option": l.categoryItems
+      })),
+      // Methods
+      isOptionSelected: a,
+      shouldShowDescription: o,
+      toggleCheckboxSelection: s,
+      toggleSearchOption: c,
+      computedTabindex: (m) => l.itemsIndex[m] === l.focusedIndex ? 0 : -1,
+      // Enums
+      BentoListboxEvent: u,
+      ListboxMultiSelectOptionsEvent: P
+    };
+  }
+});
+var Nt = function() {
+  var e = this, s = e._self._c;
+  return e._self._setupProxy, s("div", e._l(e.items, function(t) {
+    return s("div", { key: `selected-${t.value}` }, [e.searching && e.isMultiLevel ? [s("bento-listbox-option", { staticClass: "b-listbox-multi-select-options", class: e.conditionalClasses, attrs: { disabled: e.isOptionDisabled ? e.isOptionDisabled(t) : null, tabindex: e.computedTabindex(t.value), "aria-selected": `${e.isOptionSelected(t)}`, "aria-checked": `${e.isOptionSelected(t)}`, "aria-disabled": e.isOptionDisabled ? e.isOptionDisabled(t) : null, role: e.$attrs.role || "option" }, on: { click: function(o) {
+      return e.toggleSearchOption(t);
+    }, "enter-pressed": function(o) {
+      return e.toggleSearchOption(t);
+    }, "space-pressed": function(o) {
+      return o.preventDefault(), e.toggleSearchOption(t);
+    } } }, [s("decorative-checkbox", { attrs: { disabled: e.isOptionDisabled ? e.isOptionDisabled(t) : null, checked: e.isOptionSelected(t) } }), e._t("default", function() {
+      return [s("span", { staticClass: "b-listbox-multi-select__option-text" }, [s("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(t.label))]), e.shouldShowDescription(t) ? s("bento-typography", { staticClass: "b-listbox-multi-select__option-description", attrs: { el: "span" } }, [e._v(" " + e._s(t.description) + " ")]) : e._e()], 1)];
+    }, null, t)], 2)] : [t.items ? [s("listbox-multi-select-category", { attrs: { category: t, "static-categories": e.staticCategories, "is-option-disabled": e.isOptionDisabled, "selected-items-list": e.selectedItemsList, tabindex: e.computedTabindex(t.value) }, on: { "select-category": function(o) {
+      return e.$emit(e.ListboxMultiSelectOptionsEvent.SELECT_CATEGORY, t);
+    }, "unselect-category": function(o) {
+      return e.$emit(e.ListboxMultiSelectOptionsEvent.UNSELECT_CATEGORY, t);
+    }, "toggle-category-visibility": function(o) {
+      return e.$emit(e.ListboxMultiSelectOptionsEvent.TOGGLE_CATEGORY_VISIBILITY, o);
+    } } }, [s("listbox-multi-select-options", { attrs: { "category-items": "", items: t.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 || "option" }, on: { "toggle-checkbox-selection": (o) => e.toggleCheckboxSelection(o) } })], 1)] : s("bento-listbox-option", { staticClass: "b-listbox-multi-select-options", class: e.conditionalClasses, attrs: { disabled: e.isOptionDisabled ? e.isOptionDisabled(t) : null, tabindex: e.computedTabindex(t.value), "aria-selected": `${e.isOptionSelected(t)}`, "aria-checked": `${e.isOptionSelected(t)}`, "aria-disabled": e.isOptionDisabled ? e.isOptionDisabled(t) : null, role: e.$attrs.role || "option" }, on: { click: function(o) {
+      return e.toggleCheckboxSelection(t);
+    }, "enter-pressed": function(o) {
+      return e.toggleCheckboxSelection(t);
+    }, "space-pressed": function(o) {
+      return o.preventDefault(), e.toggleCheckboxSelection(t);
+    } } }, [s("decorative-checkbox", { attrs: { disabled: e.isOptionDisabled ? e.isOptionDisabled(t) : null, checked: e.isOptionSelected(t) } }), e._t("default", function() {
+      return [s("span", { staticClass: "b-listbox-multi-select__option-text" }, [s("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(t.label))]), e.shouldShowDescription(t) ? s("bento-typography", { staticClass: "b-listbox-multi-select__option-description", attrs: { el: "span" } }, [e._v(" " + e._s(t.description) + " ")]) : e._e()], 1)];
+    }, null, t)], 2)]], 2);
+  }), 0);
+}, Gt = [], Pt = /* @__PURE__ */ N(
+  $t,
+  Nt,
+  Gt,
+  !1,
+  null,
+  "0985e0a4"
+);
+const Ft = Pt.exports, Yt = (l) => {
+  const e = n(() => {
+    var t;
+    return !!((t = l.value) != null && t.find(({ items: o }) => !!o));
+  }), s = n(() => {
+    var t;
+    return e.value ? (t = l.value) == null ? void 0 : t.reduce((o, a) => (a.items ? o.push(...a.items.flat()) : o.push(a), o), []) : l.value;
+  });
+  return {
+    isMultiLevelSelect: e,
+    flattenedItemsList: s
+  };
+}, zt = {
+  "de-DE": {
+    allSelected: "Alle ausgewählt ({total})",
+    numberOfTotalSelected: "{number} von {total} ausgewählt",
+    numbersSelected: "{number} ausgewählt",
+    selectAll: "Alle auswählen ({total})"
+  },
+  "en-GB": {
+    allSelected: "All selected ({total})",
+    numberOfTotalSelected: "{number} of {total} selected",
+    numbersSelected: "{number} selected",
+    selectAll: "Select all ({total})"
+  },
+  "en-US": {
+    allSelected: "All selected ({total})",
+    numberOfTotalSelected: "{number} of {total} selected",
+    numbersSelected: "{number} selected",
+    selectAll: "Select all ({total})"
+  },
+  "es-ES": {
+    allSelected: "Todos seleccionados ({total})",
+    numberOfTotalSelected: "{number} de {total} seleccionados",
+    numbersSelected: "{number} seleccionado",
+    selectAll: "Seleccionar todo ({total})"
+  },
+  "es-MX": {
+    allSelected: "Todos seleccionados ({total})",
+    numberOfTotalSelected: "{number} de {total} seleccionados",
+    numbersSelected: "{número} seleccionado",
+    selectAll: "Seleccionar todo ({total})"
+  },
+  "fr-FR": {
+    allSelected: "Tous sélectionnés ({total})",
+    numberOfTotalSelected: "{number} sélectionné(s) sur {total}",
+    numbersSelected: "{number} sélectionné(s)",
+    selectAll: "Tout sélectionner ({total})"
+  },
+  "it-IT": {
+    allSelected: "Tutti i selezionati ({total})",
+    numberOfTotalSelected: "{numero} su {totale} selezionati",
+    numbersSelected: "{numero} selezionati",
+    selectAll: "Seleziona tutto ({total})"
+  },
+  "ja-JP": {
+    allSelected: "すべて選択 ({total})",
+    numberOfTotalSelected: "{number}/{total}件が選択されました",
+    numbersSelected: "{number}件選択済み",
+    selectAll: "すべて選択 ({total})"
+  },
+  "pt-BR": {
+    allSelected: "Todos os selecionados ({total})",
+    numberOfTotalSelected: "{number} de {total} selecionados",
+    numbersSelected: "{number} selecionados",
+    selectAll: "Selecionar tudo ({total})"
+  },
+  "zh-CN": {
+    allSelected: "全部已选 ({total})",
+    numberOfTotalSelected: "已选择 {number} 个，共 {total} 个",
+    numbersSelected: "已选择 {number} 个",
+    selectAll: "选择全部（{total}）个"
+  }
+}, Ut = { i18n: { messages: zt } }, Vt = /* @__PURE__ */ F({
+  ...Ut,
+  __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(l, { expose: e, emit: s }) {
+    const t = l, { t: o, n: a } = ie(), c = Ge(), f = Pe(), L = n(
+      () => {
+        var i, b, g, S;
+        return {
+          "aria-label": (i = f["aria-label"]) == null ? void 0 : i.toString(),
+          "aria-busy": (b = f["aria-busy"]) == null ? void 0 : b.toString(),
+          "aria-atomic": (g = f["aria-atomic"]) == null ? void 0 : g.toString(),
+          "aria-live": (S = f["aria-live"]) == null ? void 0 : S.toString(),
+          "aria-multiselectable": !0
+        };
+      }
+    ), m = T(null), d = T(null), A = T(null), k = T(null), v = n(() => t.selectedValues.map(({ value: i }) => i)), { isMultiLevelSelect: p, flattenedItemsList: R } = Yt(j(t, "items")), M = n(() => p.value && !t.staticCategories), G = n(() => M.value ? "tree" : "listbox"), h = n(() => M.value ? "treeitem" : "option"), x = (i) => {
+      var S;
+      const b = t.isOptionDisabled(i), g = ((S = v.value) == null ? void 0 : S.includes(i.value)) || !1;
+      return { isDisabled: b, isPreSelected: g };
+    }, E = n(() => {
+      if (t.searching && p)
+        return t.items;
+      const i = R.value.filter((b) => {
+        const { isDisabled: g, isPreSelected: S } = x(b);
+        return g && S || !g;
+      });
+      return t.selectedValues.forEach((b) => {
+        i.find((g) => g.value === b.value) || i.push(b);
+      }), i;
+    }), C = n(
+      () => {
+        var i;
+        return (i = E.value) == null ? void 0 : i.filter((b) => {
+          var g;
+          return b.items && p.value && t.searching ? b.items.filter(
+            (y) => (t.selectedValues ?? []).includes(y.value)
+          ).length === b.items.length : (g = v.value) == null ? void 0 : g.includes(b.value);
+        });
+      }
+    ), O = () => p.value && !t.searching ? R.value.length : t.items.length, D = n(() => {
+      var S;
+      const i = E.value.length, b = O(), g = ((S = C.value) == null ? void 0 : S.length) || 0;
+      return g === 0 ? o("selectAll", { total: a(i) }) : g === b ? o("allSelected", { total: a(b) }) : g <= b ? o("numberOfTotalSelected", { number: a(g), total: a(b) }) : o("numbersSelected", { number: a(g) });
+    }), r = (i) => {
+      const b = (S) => {
+        const { isDisabled: y, isPreSelected: Y } = x(S);
+        return y && Y || !y;
+      }, g = i.filter(b).filter((S) => !v.value.includes(S.value));
+      s("select", [...t.selectedValues, ...g]);
+    }, _ = (i) => {
+      const b = (y) => {
+        const { isDisabled: Y, isPreSelected: Me } = x(y);
+        return !(Y && Me);
+      }, g = i.filter(b).map(({ value: y }) => y), S = t.selectedValues.filter((y) => !(g != null && g.includes(y.value)));
+      s("select", S);
+    }, I = () => {
+      r(R.value);
+    }, B = () => {
+      _(R.value);
+    }, { isAllSelected: z, isIndeterminate: J, toggleSelectAll: Z } = Ce(
+      C,
+      E,
+      I,
+      B
+    ), te = n(() => J.value ? "mixed" : `${z.value}`), U = T(z.value), w = () => {
+      U.value = !U.value, Z(U.value);
+    };
+    H(z, () => {
+      U.value = z.value;
+    });
+    const X = (i) => {
+      r(i.items);
+    }, Te = (i) => {
+      _(i.items);
+    }, Ie = (i, b) => {
+      let g = !1;
+      const S = t.selectedValues.filter(({ value: y }) => b.value === y ? (g = !0, !1) : !0);
+      g || S.push(b), s(i, S);
+    }, Ae = n(() => {
+      if (!p.value)
+        return t.selectedValues;
+      const i = (y) => v.value.includes(y.value), b = (y) => !t.staticCategories && y.every((Y) => i(Y));
+      return t.items.flatMap(
+        (y) => y.items && !b(y.items) ? y.items : y
+      ).filter((y) => y.items ? !0 : i(y));
+    }), Le = n(() => {
+      var g, S, y, Y;
+      const i = ["automatic", "button"].includes(t.lazyLoadType), b = ((g = t.selectedValues) == null ? void 0 : g.length) > 0 && ((S = C.value) == null ? void 0 : S.length) !== ((y = R.value) == null ? void 0 : y.length);
+      return i && t.hasMoreItems ? !!((Y = t.selectedValues) != null && Y.length) : b;
+    }), re = n(() => ["automatic", "button"].includes(t.lazyLoadType) ? !t.hasMoreItems : !0), W = T([]), { visibleDomOptions: le, updateVisibleDomOptions: ue } = Oe(
+      m,
+      j(t, "items"),
+      h
+    ), ke = (i) => {
+      W.value.includes(i) ? W.value = W.value.filter((b) => b !== i) : W.value.push(i), ae(() => {
+        ue();
+      });
+    }, de = (i) => {
+      var b;
+      (b = le.value[i]) == null || b.focus();
+    }, {
+      moveToNextElement: be,
+      moveToPreviousElement: fe,
+      moveToFirstElement: me,
+      moveToLastElement: ve,
+      preventDefault: se,
+      focusedIndex: De,
+      setListboxFocusedIndex: ge
+    } = xe(
+      {
+        items: le
+      },
+      de
+    ), Re = {
+      [$.ARROW_UP]: (i) => fe(i),
+      [$.ARROW_DOWN]: (i) => be(i),
+      [$.HOME]: me,
+      [$.END]: ve
+    };
+    e({
+      /**
+       * 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: ge
+    });
+    const Be = {
+      [$.ARROW_UP]: se,
+      [$.ARROW_DOWN]: se
+    }, we = n(() => {
+      let i = re.value ? 1 : 0;
+      const b = {};
+      return t.items.forEach((g) => {
+        let S = W.value.includes(g.value);
+        g.items ? (t.staticCategories ? S = !0 : b[g.value] = i++, S && g.items.forEach((y) => b[y.value] = i++)) : b[g.value] = i++;
+      }), b;
+    });
+    return { __sfc: !0, props: t, emit: s, t: o, n: a, slots: c, attrs: f, ariaAttributes: L, listboxRef: m, selectAllListboxItemsRef: d, selectedListboxItemsRef: A, listboxItemsRef: k, selectedItemsList: v, isMultiLevelSelect: p, flattenedItemsList: R, isTreePattern: M, computedRole: G, computedOptionRole: h, optionStates: x, enabledItems: E, visibleSelectedList: C, calculateTotalItems: O, selectAllCheckboxText: D, selectAll: r, unselectAll: _, selectAllItems: I, unselectAllItems: B, isAllSelected: z, isIndeterminate: J, toggleSelectAll: Z, ariaCheckedComputed: te, isSelectAllOn: U, handleSelectAll: w, selectAllCategory: X, unselectAllCategory: Te, toggleCheckboxSelection: Ie, selectedOptions: Ae, showSelectedItems: Le, showSelectAllCheckbox: re, expandedCategories: W, visibleDomOptions: le, updateVisibleDomOptions: ue, toggleCategoryVisibility: ke, focusItem: de, moveToNextElement: be, moveToPreviousElement: fe, moveToFirstElement: me, moveToLastElement: ve, preventDefault: se, focusedIndex: De, setListboxFocusedIndex: ge, listboxListeners: Re, chipsSectionListeners: Be, computedItemsIndex: we, DecorativeCheckbox: ce, BentoTypography: q, BentoChip: We, BentoListboxOption: ee, ListboxMultiSelectOptions: Ft, vBentoKeyboardNavigationDirective: ne, BentoListboxEvent: u };
+  }
+});
+var Wt = function() {
+  var e = this, s = e._self._c, t = e._self._setupProxy;
+  return s("div", { ref: "listboxRef", staticClass: "b-listbox-multi-select" }, [t.showSelectedItems ? s("div", [s("ul", e._g({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], staticClass: "b-listbox-multi-select__chips" }, t.chipsSectionListeners), e._l(t.selectedOptions, function(o) {
+    return s("li", { key: o.value }, [s(t.BentoChip, { ref: "selectedListboxItemsRef", refInFor: !0, attrs: { disabled: e.isOptionDisabled(o), label: o.label, condensed: "" }, on: { click: function(a) {
+      o.items ? t.unselectAllCategory(o) : t.toggleCheckboxSelection("select", o);
+    } } })], 1);
+  }), 0), s("hr", { staticClass: "b-listbox-multi-select__divider", attrs: { "aria-hidden": "true" } })]) : e._e(), s("div", e._g(e._b({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], attrs: { role: t.computedRole } }, "div", t.ariaAttributes, !1), t.listboxListeners), [t.showSelectAllCheckbox ? s(t.BentoListboxOption, { ref: "selectAllListboxItemsRef", staticClass: "b-listbox-multi-select__option", attrs: { tabindex: t.focusedIndex === 0 ? 0 : -1, "aria-selected": t.ariaCheckedComputed !== "false", "aria-checked": t.ariaCheckedComputed, role: t.computedOptionRole }, on: { click: t.handleSelectAll, "enter-pressed": t.handleSelectAll, "space-pressed": function(o) {
+    return o.preventDefault(), t.handleSelectAll.apply(null, arguments);
+  } } }, [s(t.DecorativeCheckbox, { attrs: { checked: t.isAllSelected, indeterminate: t.isIndeterminate } }), s(t.BentoTypography, { attrs: { el: "span" } }, [e._v(" " + e._s(t.selectAllCheckboxText) + " ")])], 1) : e._e(), t.showSelectAllCheckbox ? s("hr", { staticClass: "b-listbox-multi-select__divider", attrs: { "aria-hidden": "true" } }) : e._e(), s(t.ListboxMultiSelectOptions, { ref: "listboxItemsRef", attrs: { items: e.items, "is-option-disabled": e.isOptionDisabled, "is-multi-level": t.isMultiLevelSelect, "static-categories": e.staticCategories, searching: e.searching, "selected-items-list": t.selectedItemsList, "focused-index": t.focusedIndex, "items-index": t.computedItemsIndex, role: t.computedOptionRole }, on: { "toggle-checkbox-selection": function(o) {
+    return t.toggleCheckboxSelection("select", o);
+  }, "select-category": t.selectAllCategory, "unselect-category": t.unselectAllCategory, "toggle-category-visibility": t.toggleCategoryVisibility, "space-pressed": function(o) {
+    return t.toggleCheckboxSelection(t.BentoListboxEvent.SPACE, o);
+  }, "tab-pressed": function(o) {
+    return t.toggleCheckboxSelection(t.BentoListboxEvent.TAB, o);
+  }, "enter-pressed": function(o) {
+    return t.toggleCheckboxSelection(t.BentoListboxEvent.ENTER, o);
+  } }, scopedSlots: e._u([e._l(t.slots, function(o, a) {
+    return { key: a, fn: function(c) {
+      return [e._t(a, null, null, c)];
+    } };
+  })], null, !0) })], 1)]);
+}, Kt = [], jt = /* @__PURE__ */ N(
+  Vt,
+  Wt,
+  Kt,
+  !1,
+  null,
+  "b81d7402"
+);
+const Se = jt.exports, qt = (l, e = 300) => {
+  let s;
+  return (...o) => {
+    s && clearTimeout(s), s = setTimeout(() => l(...o), e);
+  };
+}, Xt = {
+  "de-DE": {
+    loading: "Laden",
+    showMore: "Mehr anzeigen"
+  },
+  "en-GB": {
+    loading: "Loading",
+    showMore: "Show more"
+  },
+  "en-US": {
+    loading: "Loading",
+    showMore: "Show more"
+  },
+  "es-ES": {
+    loading: "Cargando",
+    showMore: "Mostrar más"
+  },
+  "es-MX": {
+    loading: "Cargando",
+    showMore: "Mostrar más"
+  },
+  "fr-FR": {
+    loading: "Chargement",
+    showMore: "Afficher plus"
+  },
+  "it-IT": {
+    loading: "Caricamento",
+    showMore: "Mostra di più"
+  },
+  "ja-JP": {
+    loading: "読み込み中",
+    showMore: "さらに表示"
+  },
+  "pt-BR": {
+    loading: "Carregando",
+    showMore: "Mostrar mais"
+  },
+  "zh-CN": {
+    loading: "正在加载",
+    showMore: "显示更多"
+  }
+}, Ht = 36, Jt = F({
+  name: "bento-listbox",
+  components: {
+    BentoEmptyState: Ye,
+    BentoListboxSingleSelect: yt,
+    BentoListboxMultiSelect: Se,
+    BentoTypography: q,
+    BentoLoadingIndicator: Fe,
+    BentoLoadingButton: qe
+  },
+  directives: { BentoKeyboardNavigationDirective: ne },
+  i18n: { messages: Xt },
+  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: K.NONE,
+      validator: (l) => Object.values(K).includes(l)
+    },
+    /**
+     * 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: Se.props.searching,
+    /**
+     * The `input` value.
+     * Providing an empty string or empty array will select no options.
+     * Set to an empty string `''` if you don't want any of the available options to be selected for single select
+     */
+    selectedValue: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * Enables virtual scrolling if set to true or by providing an object with itemHeight function.
+     * The itemHeight function is used to calculate the height of rendered item given it's index.
+     */
+    virtualScroll: {
+      type: [Boolean, Object],
+      default: !1
+    }
+  },
+  emits: [
+    u.SELECT,
+    u.SPACE,
+    u.SHOW_MORE,
+    u.ENTER,
+    u.ESCAPE,
+    u.TAB
+  ],
+  setup(l, { emit: e, slots: s }) {
+    const t = T([]), o = j(l, "items"), { t: a } = ie(), c = n(() => l.lazyLoadType !== K.AUTOMATIC), f = n(() => l.lazyLoadType === K.AUTOMATIC), L = () => {
+      var w;
+      return typeof (l == null ? void 0 : l.virtualScroll) == "object" && ((w = l == null ? void 0 : l.virtualScroll) != null && w.itemHeight) ? l.virtualScroll.itemHeight : Ht;
+    }, m = !(l != null && l.multiple) && (l == null ? void 0 : l.virtualScroll) !== !1 && (l == null ? void 0 : l.lazyLoadType) === "none", {
+      containerRef: d,
+      containerProps: A,
+      onScroll: k,
+      list: v,
+      wrapperProps: p,
+      scrollToIndex: R,
+      startIndex: M
+    } = Xe(o, {
+      itemHeight: L(),
+      // Disable virtual scrolling if not enabled or if lazy loading is enabled or if multi-select
+      disabled: !m
+    }), G = n(() => m ? o.value.length : 0), h = n(
+      () => l.componentLoading !== void 0 || c.value ? "true" : void 0
+    ), x = n(
+      () => c.value && l.loading || l.componentLoading ? "true" : "false"
+    ), E = n(
+      () => c.value || l.componentLoading !== void 0 ? "polite" : void 0
+    ), C = n(
+      () => ({
+        "aria-label": l.ariaLabel,
+        "aria-busy": x.value,
+        "aria-atomic": h.value,
+        "aria-live": E.value
+      })
+    ), O = n(
+      () => l.componentLoading ? {
+        ...C.value,
+        role: "alert"
+      } : {}
+    ), D = (w) => (X) => {
+      e(w, X);
+    }, r = () => {
+      e(u.SHOW_MORE);
+    }, _ = qt(() => {
+      const w = d.value;
+      if (!w)
+        return;
+      const X = Math.round(w.scrollTop) + w.clientHeight >= w.scrollHeight;
+      l.hasMoreItems && X && !l.loading && r();
+    }), I = () => {
+      f.value ? _() : k();
+    }, B = n(() => {
+      var w;
+      return ((w = l.items) == null ? void 0 : w.length) === 0;
+    }), z = n(
+      () => l.lazyLoadType === K.BUTTON && l.hasMoreItems
+    ), J = n(
+      () => l.loading ? pe.LOADING : pe.START
+    ), Z = n(() => l.loading ? a("loading") : a("showMore")), te = n(() => ({
+      ...l.emptyState,
+      variant: "condensed"
+    })), U = {
+      [u.SELECT]: D(u.SELECT),
+      [u.SPACE]: D(u.SPACE),
+      [u.TAB]: D(u.TAB),
+      [u.ENTER]: D(u.ENTER)
+    };
+    return {
+      // Refs
+      listboxRef: d,
+      listboxItemRef: t,
+      // a11y
+      ariaAttributes: C,
+      listboxContainerAttributes: O,
+      // Values
+      containerProps: A,
+      isSearchResultEmpty: B,
+      limitedEmptyStateProps: te,
+      loadingButtonState: J,
+      slots: s,
+      shouldDisplayShowMoreButton: z,
+      showMoreButtonText: Z,
+      virtualisedItems: v,
+      wrapperProps: p,
+      // Virtual scroll
+      totalItemCount: G,
+      scrollToIndex: R,
+      virtualScrollStartIndex: M,
+      // Enums
+      BentoKeyboardNavigationKeyDownEvent: $,
+      BentoListboxEvent: u,
+      // Methods
+      onListboxContainerScroll: I,
+      onOptionSelected: D,
+      emitShowMore: r,
+      listboxListeners: U
+    };
+  }
+});
+var Zt = function() {
+  var t;
+  var e = this, s = e._self._c;
+  return e._self._setupProxy, s("div", e._b({ directives: [{ name: "bento-keyboard-navigation-directive", rawName: "v-bento-keyboard-navigation-directive" }], ref: "listboxRef", staticClass: "b-listbox", style: (t = e.containerProps) == null ? void 0 : t.style, attrs: { id: e.id, tabindex: "-1", "data-testid": "listbox-container" }, on: { scroll: e.onListboxContainerScroll } }, "div", e.listboxContainerAttributes, !1), [s("div", e._b({}, "div", e.wrapperProps, !1), [e.componentLoading ? s("div", { staticClass: "b-listbox__loading-filtered-items" }, [s("bento-loading-indicator")], 1) : e.isSearchResultEmpty ? s("div", { staticClass: "b-listbox__empty-search-message" }, [e.emptyState ? s("bento-empty-state", e._b({}, "bento-empty-state", e.limitedEmptyStateProps, !1)) : s("bento-typography", { attrs: { el: "span" } }, [e._v(e._s(e.noResultsMessage))])], 1) : [e.multiple ? [s("bento-listbox-multi-select", e._g(e._b({ 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, a) {
+    return { key: a, fn: function(c) {
+      return [e._t(a, null, null, c)];
+    } };
+  })], null, !0) }, "bento-listbox-multi-select", e.ariaAttributes, !1), e.listboxListeners))] : [s("bento-listbox-single-select", e._g(e._b({ ref: "listboxItemRef", attrs: { items: e.virtualisedItems, "total-item-count": e.totalItemCount, "scroll-to-index": e.scrollToIndex, "virtual-scroll-start-index": e.virtualScrollStartIndex, "selected-value": e.selectedValue, "static-categories": e.staticCategories, "is-option-disabled": e.isOptionDisabled }, scopedSlots: e._u([e._l(e.slots, function(o, a) {
+    return { key: a, fn: function(c) {
+      return [e._t(a, null, null, c)];
+    } };
+  })], null, !0) }, "bento-listbox-single-select", e.ariaAttributes, !1), e.listboxListeners))], e.shouldDisplayShowMoreButton ? s("div", { staticClass: "b-listbox__lazy-load" }, [s("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 ? s("div", { staticClass: "b-listbox__lazy-load" }, [s("bento-loading-indicator")], 1) : e._e()]], 2)]);
+}, Qt = [], el = /* @__PURE__ */ N(
+  Jt,
+  Zt,
+  Qt,
+  !1,
+  null,
+  "7819d7a2"
+);
+const yl = el.exports, oe = (l, e) => {
+  for (const s of l) {
+    if (s.value === e)
+      return s;
+    if (s.items) {
+      const t = oe(s.items, e);
+      if (t)
+        return t;
+    }
+  }
+  return null;
+}, tl = (l) => typeof l == "object" && l !== null && "value" in l && "label" in l, hl = (l, e, s, t) => {
+  const o = T([]), a = T(), c = (d) => {
+    s.value ? a.value = d.map(({ value: A }) => A) : a.value = d.length > 0 ? d[0].value : null;
+  }, f = (d) => {
+    s.value ? a.value = d.map(({ value: A, label: k }) => ({ value: A, label: k })) : a.value = d.length > 0 ? { value: d[0].value, label: d[0].label } : null;
+  }, L = (d) => {
+    o.value = d, t != null && t.value ? f(d) : c(d);
+  }, m = () => {
+    o.value = [], a.value = null;
+  };
+  return H(
+    () => e.value,
+    () => {
+      if (!e.value && e.value !== 0) {
+        m();
+        return;
+      }
+      const d = !Array.isArray(e.value), A = [...o.value];
+      m();
+      const k = (v) => {
+        if (tl(v))
+          o.value.push(v);
+        else {
+          let p = oe(l.value, v);
+          p || (p = oe(A, v)), p || (p = { value: v, label: v.toString() }), o.value.push(p);
+        }
+      };
+      if (d) {
+        const v = e.value;
+        k(v), t != null && t.value ? f(o.value) : c(o.value);
+        return;
+      }
+      e.value.forEach(k), t != null && t.value ? f(o.value) : c(o.value);
+    },
+    { immediate: !0 }
+  ), {
+    // Values
+    cachedSelectedListboxOptions: o,
+    cachedListboxSelectedValues: a,
+    // Methods
+    resetCache: m,
+    setCachedValues: L
+  };
+};
+export {
+  u as B,
+  rt as C,
+  ce as D,
+  K as a,
+  yl as b,
+  Yt as c,
+  qt as d,
+  Oe as e,
+  hl as u
+};
+//# sourceMappingURL=use-cached-selected-values.Du8-wWR2.js.map