@adyen/bento-vue3 1.8.0 → 1.9.0

package/dist/filter-bar.js

@@ -1,46 +1,55 @@
-import { defineComponent as j, useSlots as ht, useAttrs as gt, computed as b, ref as K, openBlock as p, createBlock as A, unref as ne, normalizeClass as ve, withCtx as m, createTextVNode as w, toDisplayString as V, createCommentVNode as z, createElementBlock as k, createElementVNode as L, renderSlot as re, createVNode as C, watch as Fe, resolveComponent as y, resolveDirective as St, withDirectives as Ce, withKeys as be, toRef as J, onBeforeUpdate as De, mergeProps as oe, Fragment as fe, reactive as Je, createSlots as $e, renderList as pe, normalizeProps as Ue, guardReactiveProps as Pe, pushScopeId as Ge, popScopeId as We, toRefs as Ct, provide as $t, nextTick as At, onMounted as Bt, resolveDynamicComponent as Ae, vShow as ke } from "vue";
-import { a as Re } from "./chunks/index.726e2f3c.js";
-import { B as Dt } from "./chunks/directive.0408e565.js";
-import { B as It } from "./chunks/tooltip.054d2eb6.js";
-import { u as ue } from "./chunks/i18n.6c402773.js";
-import { g as Ie } from "./chunks/unique-id.a2a2b458.js";
-import { B as ce, d as Tt } from "./chunks/index.75f3672e.js";
-import { u as Ze } from "./chunks/aria-label.ac9651a5.js";
-import { B as Qe, a as Ve } from "./chunks/base-button.aa085dfa.js";
-import { g as Xe } from "./chunks/get-slot-text.bead058f.js";
-import { u as xe } from "./chunks/use-has-slot.4d98bf29.js";
-import { a as et, C as tt } from "./chunks/chevron-up.9bf21068.js";
+import { onMounted as Je, onUnmounted as _t, defineComponent as N, useSlots as Ft, useAttrs as gt, computed as f, ref as K, openBlock as b, createBlock as $, unref as te, normalizeClass as ie, withCtx as p, createTextVNode as O, toDisplayString as R, createCommentVNode as w, createElementBlock as P, createElementVNode as k, renderSlot as oe, createVNode as g, Teleport as Ct, watch as _e, resolveComponent as y, withKeys as de, toRef as J, onBeforeUpdate as Ie, mergeProps as se, Fragment as pe, reactive as Ge, createSlots as Ae, renderList as ve, normalizeProps as ke, guardReactiveProps as Pe, pushScopeId as St, popScopeId as $t, toRefs as At, provide as Bt, nextTick as Dt, resolveDynamicComponent as Be, withDirectives as Fe, vShow as ge } from "vue";
 import { _ as M } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import { BentoRadioGroup as Et } from "./radio-group.js";
-import { BentoInputField as lt } from "./input-field.js";
-import { BentoSearchBar as he, BentoSearchBarEvent as de } from "./search-bar.js";
-import { u as Ut } from "./chunks/toastController.0b01d2e8.js";
-import { BentoModal as Pt } from "./modal.js";
-import { e as kt } from "./chunks/base-modal.3dcf8376.js";
-import { a as Rt } from "./chunks/button.82ed953e.js";
-import { B as Vt, u as nt } from "./chunks/dropdown.502e1f5c.js";
-import { g as Lt } from "./chunks/index.cf0d3be3.js";
-import { BentoDivider as at } from "./divider.js";
-import { BentoDatePicker as Ot } from "./date-picker.js";
-import { f as ie } from "./chunks/index.0ee895e0.js";
-import { e as ae, d as ot, f as st } from "./chunks/index.f55fdc32.js";
-import { C as Nt, i as wt } from "./chunks/calendar.d4ab387d.js";
-import { B as Mt, D as Ht, i as Le } from "./chunks/index.e9156fe3.js";
-import { D as Oe } from "./chunks/date-input.9186a0bf.js";
-import { BentoButtonActions as qt } from "./button.js";
-import { B as Kt } from "./chunks/listbox.d07c24e6.js";
-import { B as jt, L as it } from "./chunks/listbox-option-tag.5b00c85f.js";
-import { BentoCountry as Yt } from "./country.js";
-import { u as zt } from "./chunks/useCountryItems.e83ef8f0.js";
-import { BentoPaymentMethod as Jt } from "./payment-method.js";
-import { R as Gt } from "./chunks/refresh.c38c9eee.js";
-import "./assets/index31.css";
-var v = /* @__PURE__ */ ((e) => (e.INPUT = "input", e.UPDATE = "update", e))(v || {}), _e = /* @__PURE__ */ ((e) => (e.INPUT = "input", e.UPDATE_FILTER_VALUES = "update:filter-values", e))(_e || {}), Q = /* @__PURE__ */ ((e) => (e.INPUT = "BentoInputFilter", e.BOOLEAN = "BentoBooleanFilter", e.RANGE = "BentoRangeFilter", e.SELECT = "BentoSelectFilter", e.SELECT_AVATAR = "BentoSelectAvatarFilter", e.SELECT_COUNTRY = "BentoSelectCountryFilter", e.SELECT_CURRENCY = "BentoSelectCurrencyFilter", e.SELECT_PAYMENT_METHOD = "BentoSelectPaymentMethodFilter", e.SELECT_TAG = "BentoSelectTagFilter", e.DATE = "BentoDateFilter", e.DATE_RANGE = "BentoDateRangeFilter", e))(Q || {});
-const Wt = { class: "b-filter-bar-button__container" }, Zt = { class: "b-filter-bar-button__label-container" }, Qt = {
+import { a as Ve } from "./chunks/index.98174339.js";
+import { B as It } from "./chunks/directive.0408e565.js";
+import { B as Tt } from "./chunks/tooltip.27c32d36.js";
+import { u as ce } from "./chunks/i18n.6c402773.js";
+import { g as Te } from "./chunks/unique-id.a2a2b458.js";
+import { o as Et } from "./chunks/on-click-outside.3e0c3e2a.js";
+import { B as fe, d as Ut } from "./chunks/index.75f3672e.js";
+import { u as We } from "./chunks/aria-label.ac9651a5.js";
+import { B as Ze, a as Re } from "./chunks/base-button.aa085dfa.js";
+import { g as Qe } from "./chunks/get-slot-text.bead058f.js";
+import { u as Xe } from "./chunks/use-has-slot.4d98bf29.js";
+import { a as xe, C as et } from "./chunks/chevron-up.46afb34c.js";
+import { BentoRadioGroup as kt } from "./radio-group.js";
+import { BentoInputField as tt } from "./input-field.js";
+import { BentoSearchBar as Ce, BentoSearchBarEvent as be } from "./search-bar.js";
+import { u as Pt } from "./chunks/toastController.0b01d2e8.js";
+import { BentoModal as Vt } from "./modal.js";
+import { e as Rt } from "./chunks/base-modal.a629cb32.js";
+import { a as Ot } from "./chunks/button.82ed953e.js";
+import { B as Lt, u as lt } from "./chunks/dropdown.63de9aac.js";
+import { g as wt } from "./chunks/index.4d2a13e1.js";
+import { BentoDivider as nt } from "./divider.js";
+import { BentoDatePicker as Nt } from "./date-picker.js";
+import { f as ue } from "./chunks/index.0ee895e0.js";
+import { e as ae, d as at, f as ot } from "./chunks/index.f55fdc32.js";
+import { C as Mt, i as Ht } from "./chunks/calendar.fa7712e8.js";
+import { B as qt, D as Kt, i as Oe } from "./chunks/index.c6fecf1c.js";
+import { D as Le } from "./chunks/date-input.9186a0bf.js";
+import { BentoButtonActions as jt } from "./button.js";
+import { B as Yt } from "./chunks/listbox.ac43f8ab.js";
+import { B as zt, L as st } from "./chunks/listbox-option-tag.b1eb32bd.js";
+import { BentoCountry as Jt } from "./country.js";
+import { u as Gt } from "./chunks/useCountryItems.e83ef8f0.js";
+import { BentoPaymentMethod as Wt } from "./payment-method.js";
+import { R as Zt } from "./chunks/refresh.bd60f6a8.js";
+import { F as Qt } from "./chunks/fixed-scroller.bced60dd.js";
+import "./assets/index33.css";
+var it = !1;
+const Xt = (e, t, n = {}) => {
+  let l;
+  Je(() => {
+    l = Et(e, t, n);
+  }), _t(() => {
+    l && (l(), l = null);
+  });
+}, xt = { class: "b-filter-bar-button__container" }, el = { class: "b-filter-bar-button__label-container" }, tl = {
   key: 1,
   class: "b-filter-bar-button__chevron"
-}, Xt = {}, xt = /* @__PURE__ */ j({
-  ...Xt,
+}, ll = {}, nl = /* @__PURE__ */ N({
+  ...ll,
   __name: "filter-bar-button",
   props: {
     /**
@@ -70,78 +79,78 @@ const Wt = { class: "b-filter-bar-button__container" }, Zt = { class: "b-filter-
   },
   emits: ["click"],
   setup(e, { emit: t }) {
-    const n = e, l = ht(), s = gt(), i = xe(l), o = b(() => l.default ? Xe(l)("default") : null), r = Ze({ ariaLabel: o }), a = K(null), f = b(() => {
-      var F;
+    const n = e, l = Ft(), o = gt(), i = Xe(l), s = f(() => l.default ? Qe(l)("default") : null), r = We({ ariaLabel: s }), a = K(null), u = f(() => {
+      var _;
       return {
-        "aria-controls": (F = s["aria-controls"]) == null ? void 0 : F.toString()
+        "aria-controls": (_ = o["aria-controls"]) == null ? void 0 : _.toString()
       };
-    }), u = b(() => ({
+    }), h = f(() => ({
       "b-filter-bar-button--filter-open": n.isFilterOpen,
       "b-filter-bar-button--with-counter": n.appliedFiltersCount,
       "b-filter-bar-button--with-chevron": n.hasChevron
-    })), S = (F) => {
-      n.disabled || t("click", F);
+    })), m = (_) => {
+      n.disabled || t("click", _);
     };
-    return (F, d) => (p(), A(ne(Qe), {
+    return (_, d) => (b(), $(te(Ze), {
       ref_key: "filterBarButtonRef",
       ref: a,
-      class: ve(["b-filter-bar-button", ne(u)]),
+      class: ie(["b-filter-bar-button", te(h)]),
       disabled: e.disabled,
-      "aria-label": ne(r),
-      "aria-controls": ne(f)["aria-controls"],
+      "aria-label": te(r),
+      "aria-controls": te(u)["aria-controls"],
       type: "button",
-      onClick: S
+      onClick: m
     }, {
-      iconRight: m(() => [
-        e.appliedFiltersCount && !e.hasChevron ? (p(), A(ne(ce), {
+      iconRight: p(() => [
+        e.appliedFiltersCount && !e.hasChevron ? (b(), $(te(fe), {
           key: 0,
           class: "b-filter-bar-button__counter",
           el: "span",
           variant: "body",
           stronger: ""
         }, {
-          default: m(() => [
-            w(V(e.appliedFiltersCount), 1)
+          default: p(() => [
+            O(R(e.appliedFiltersCount), 1)
           ]),
           _: 1
-        })) : z("", !0),
-        e.hasChevron ? (p(), k("div", Qt, [
-          e.isFilterOpen ? (p(), A(ne(et), {
+        })) : w("", !0),
+        e.hasChevron ? (b(), P("div", tl, [
+          e.isFilterOpen ? (b(), $(te(xe), {
             key: 0,
             "aria-hidden": "true"
-          })) : (p(), A(ne(tt), {
+          })) : (b(), $(te(et), {
             key: 1,
             "aria-hidden": "true"
           }))
-        ])) : z("", !0)
+        ])) : w("", !0)
       ]),
-      default: m(() => [
-        L("div", Wt, [
-          ne(i)("iconLeft") ? re(F.$slots, "iconLeft", { key: 0 }, void 0, !0) : z("", !0),
-          L("div", Zt, [
-            C(ne(ce), {
+      default: p(() => [
+        k("div", xt, [
+          te(i)("iconLeft") ? oe(_.$slots, "iconLeft", { key: 0 }, void 0, !0) : w("", !0),
+          k("div", el, [
+            g(te(fe), {
               el: "span",
               variant: "body",
               stronger: "",
               class: "b-filter-bar-button__label"
             }, {
-              default: m(() => [
-                re(F.$slots, "default", {}, void 0, !0)
+              default: p(() => [
+                oe(_.$slots, "default", {}, void 0, !0)
               ]),
               _: 3
             }),
-            e.secondaryLabel ? (p(), A(ne(ce), {
+            e.secondaryLabel ? (b(), $(te(fe), {
               key: 0,
               el: "span",
               variant: "body",
               stronger: "",
               class: "b-filter-bar-button__secondary-label"
             }, {
-              default: m(() => [
-                w(V(e.secondaryLabel), 1)
+              default: p(() => [
+                O(R(e.secondaryLabel), 1)
               ]),
               _: 1
-            })) : z("", !0)
+            })) : w("", !0)
           ])
         ])
       ]),
@@ -149,9 +158,9 @@ const Wt = { class: "b-filter-bar-button__container" }, Zt = { class: "b-filter-
     }, 8, ["class", "disabled", "aria-label", "aria-controls"]));
   }
 });
-const Te = /* @__PURE__ */ M(xt, [["__scopeId", "data-v-b1f946e5"]]);
-var te = /* @__PURE__ */ ((e) => (e.APPLY = "apply", e.CLEAR = "clear", e.OPEN = "open", e.CLOSE = "close", e.RESET = "reset", e))(te || {});
-const Ne = {
+const Ee = /* @__PURE__ */ M(nl, [["__scopeId", "data-v-b1f946e5"]]);
+var v = /* @__PURE__ */ ((e) => (e.INPUT = "input", e.UPDATE = "update", e))(v || {}), he = /* @__PURE__ */ ((e) => (e.INPUT = "input", e.UPDATE_FILTER_VALUES = "update:filter-values", e))(he || {}), Q = /* @__PURE__ */ ((e) => (e.INPUT = "BentoInputFilter", e.BOOLEAN = "BentoBooleanFilter", e.RANGE = "BentoRangeFilter", e.SELECT = "BentoSelectFilter", e.SELECT_AVATAR = "BentoSelectAvatarFilter", e.SELECT_COUNTRY = "BentoSelectCountryFilter", e.SELECT_CURRENCY = "BentoSelectCurrencyFilter", e.SELECT_PAYMENT_METHOD = "BentoSelectPaymentMethodFilter", e.SELECT_TAG = "BentoSelectTagFilter", e.DATE = "BentoDateFilter", e.DATE_RANGE = "BentoDateRangeFilter", e))(Q || {}), le = /* @__PURE__ */ ((e) => (e.APPLY = "apply", e.CLEAR = "clear", e.OPEN = "open", e.CLOSE = "close", e.RESET = "reset", e))(le || {});
+const we = {
   "en-US": {
     clear: "Clear",
     apply: "Apply",
@@ -177,14 +186,127 @@ const Ne = {
     clear: "Borrar",
     apply: "Aplicar"
   }
-}, el = j({
-  i18n: { messages: Ne },
+}, al = N({
+  name: "teleport",
+  props: {
+    to: {
+      type: String,
+      required: !0
+    },
+    where: {
+      type: String,
+      default: "after"
+    },
+    disabled: Boolean
+  },
+  data: () => ({
+    childObserver: null,
+    nodes: [],
+    waiting: !1,
+    observer: null,
+    parent: null,
+    isVue2: it
+  }),
+  computed: {
+    classes() {
+      return this.disabled ? ["b-teleport"] : ["b-teleport", "b-teleport--hidden"];
+    }
+  },
+  watch: {
+    to: "maybeMove",
+    where: "maybeMove",
+    disabled(e) {
+      e ? (this.disable(), this.$nextTick(() => {
+        this.teardownObserver();
+      })) : (this.bootObserver(), this.move());
+    }
+  },
+  mounted() {
+    this.nodes = Array.from(this.$el.childNodes), this.disabled || this.bootObserver(), this.maybeMove();
+  },
+  beforeDestroy() {
+    this.nodes = this.getComponentChildrenNode(), this.disable(), this.teardownObserver();
+  },
+  methods: {
+    // Using a fragment is faster because it'll trigger only a single reflow
+    // See https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment
+    getFragment() {
+      const e = document.createDocumentFragment();
+      return this.nodes.forEach((t) => e.appendChild(t)), e;
+    },
+    disable() {
+      this.$el.appendChild(this.getFragment()), this.parent = null;
+    },
+    move() {
+      if (this.waiting = !1, this.parent = document.querySelector(this.to), !this.parent) {
+        this.disable(), this.waiting = !0;
+        return;
+      }
+      this.where === "before" ? this.parent.prepend(this.getFragment()) : this.parent.appendChild(this.getFragment());
+    },
+    maybeMove() {
+      this.disabled || this.move();
+    },
+    onMutations(e) {
+      let t = !1;
+      for (let n = 0; n < e.length; n++) {
+        const l = e[n], o = Array.from(l.addedNodes).filter(
+          (i) => !this.nodes.includes(i)
+        );
+        Array.from(l.removedNodes).includes(this.parent) ? (this.disable(), this.waiting = !this.disabled) : this.waiting && o.length > 0 && (t = !0);
+      }
+      t && this.move();
+    },
+    bootObserver() {
+      this.observer || (this.observer = new MutationObserver((e) => this.onMutations(e)), this.observer.observe(document.body, {
+        childList: !0,
+        subtree: !0,
+        attributes: !1,
+        characterData: !1
+      }), !this.childObserver && (this.childObserver = new MutationObserver((e) => {
+        e.find((n) => n.target === this.$el) && (this.nodes.forEach((n) => n.parentNode && n.parentNode.removeChild(n)), this.nodes = this.getComponentChildrenNode(), this.maybeMove());
+      }), this.childObserver.observe(this.$el, {
+        childList: !0,
+        subtree: !1,
+        attributes: !1,
+        characterData: !1
+      })));
+    },
+    teardownObserver() {
+      this.observer && (this.observer.disconnect(), this.observer = null), this.childObserver && (this.childObserver.disconnect(), this.childObserver = null);
+    },
+    getComponentChildrenNode() {
+      return [];
+    }
+  }
+}), ol = /* @__PURE__ */ N({
+  ...al,
+  setup(e) {
+    return (t, n) => te(it) ? (b(), P("div", {
+      key: 0,
+      class: ie(t.classes)
+    }, [
+      oe(t.$slots, "default", {}, void 0, !0)
+    ], 2)) : (b(), $(Ct, {
+      key: 1,
+      to: t.to,
+      where: t.where,
+      disabled: t.disabled,
+      class: ie(t.classes)
+    }, [
+      oe(t.$slots, "default", {}, void 0, !0)
+    ], 8, ["to", "where", "disabled", "class"]));
+  }
+});
+const sl = /* @__PURE__ */ M(ol, [["__scopeId", "data-v-d3ffe999"]]), il = N({
+  i18n: { messages: we },
   name: "bento-base-filter",
   components: {
-    BentoPopover: Re,
-    FilterBarButton: Te
+    BentoPopover: Ve,
+    BentoTeleport: sl,
+    FilterBarButton: Ee
   },
-  directives: { BentoClickOutsideDirective: Dt },
+  directives: { BentoClickOutsideDirective: It },
   props: {
     /**
      * Total count of applied filters
@@ -235,133 +357,142 @@ const Ne = {
     /**
      * Sets the size of the container to fit its content
      */
-    fitContent: Re.props.fitContent
+    fitContent: Ve.props.fitContent
   },
   emits: [
-    te.APPLY,
-    te.CLEAR,
-    te.OPEN,
-    te.CLOSE,
-    te.RESET
+    le.APPLY,
+    le.CLEAR,
+    le.OPEN,
+    le.CLOSE,
+    le.RESET
   ],
   setup(e, { emit: t }) {
-    const { t: n } = ue({ messages: Ne }), l = Ie("base-filter-popover"), s = K(!1), i = K(null), o = b(() => e.defaultValue !== null), r = () => {
-      s.value = !1, t(te.CLOSE);
-    }, a = () => {
-      r(), o.value ? t(te.RESET) : t(te.CLEAR);
-    }, f = () => r(), u = () => {
-      s.value ? r() : (s.value = !0, t(te.OPEN));
-    }, S = () => {
-      r(), t(te.APPLY);
-    }, F = b(() => [
+    const { t: n } = ce({ messages: we }), l = Te("base-filter-popover"), o = K(!1), i = K(null), s = K(null), r = f(() => e.defaultValue !== null), a = () => {
+      o.value && (o.value = !1, t(le.CLOSE));
+    }, u = () => {
+      a(), r.value ? t(le.RESET) : t(le.CLEAR);
+    }, h = () => a(), m = () => {
+      o.value ? a() : (o.value = !0, t(le.OPEN));
+    }, _ = () => {
+      a(), t(le.APPLY);
+    }, d = f(() => [
       {
         title: n("apply"),
-        event: S,
+        event: _,
         disabled: e.disableApplyButton
       },
       {
-        title: o.value ? n("reset") : n("clear"),
-        event: a,
+        title: r.value ? n("reset") : n("clear"),
+        event: u,
         disabled: e.disableSecondaryButton
       }
     ]);
-    return Fe(
-      () => s.value,
-      (d, D) => {
-        var I, $;
-        !d && D && ($ = (I = i.value) == null ? void 0 : I.filterBarButtonRef) != null && $.bentoBaseButtonRef && i.value.filterBarButtonRef.bentoBaseButtonRef.focus();
+    return _e(
+      () => o.value,
+      (D, T) => {
+        var A, E;
+        !D && T && (E = (A = i.value) == null ? void 0 : A.filterBarButtonRef) != null && E.bentoBaseButtonRef && i.value.filterBarButtonRef.bentoBaseButtonRef.focus();
       }
-    ), {
+    ), Xt(s, h, { ignore: [i] }), {
       // Values
-      actions: F,
+      actions: d,
       popoverId: l,
-      isFilterOpen: s,
-      isPersistentFilter: o,
+      isFilterOpen: o,
+      isPersistentFilter: r,
       // Enums
-      BentoTooltipPosition: It,
+      BentoTooltipPosition: Tt,
       // Events
-      onClickFilter: u,
-      onClickApply: S,
-      onClickSecondaryAction: a,
-      onClickOutside: f,
-      closePopover: r,
+      onClickFilter: m,
+      onClickApply: _,
+      onClickSecondaryAction: u,
+      onClickOutside: h,
+      closePopover: a,
       // Refs
-      filterButtonRef: i
+      filterButtonRef: i,
+      popoverRef: s
     };
   }
 });
-const tl = { key: 0 };
-function ll(e, t, n, l, s, i) {
-  const o = y("filter-bar-button"), r = y("bento-popover"), a = St("bento-click-outside-directive");
-  return e.onlySlot ? (p(), k("div", tl, [
-    re(e.$slots, "default", {}, void 0, !0)
-  ])) : Ce((p(), k("div", {
-    key: 1,
-    class: "b-base-filter",
-    onKeydown: t[0] || (t[0] = be((...f) => e.closePopover && e.closePopover(...f), ["esc"]))
-  }, [
-    C(o, {
+const rl = { key: 0 }, ul = {
+  key: 1,
+  class: "b-base-filter"
+};
+function dl(e, t, n, l, o, i) {
+  const s = y("filter-bar-button"), r = y("bento-popover"), a = y("bento-teleport");
+  return e.onlySlot ? (b(), P("div", rl, [
+    oe(e.$slots, "default", {}, void 0, !0)
+  ])) : (b(), P("div", ul, [
+    g(s, {
       ref: "filterButtonRef",
       "aria-controls": e.isFilterOpen ? e.popoverId : null,
       "has-chevron": e.isPersistentFilter,
       "is-filter-open": e.isFilterOpen,
       "applied-filters-count": e.appliedFiltersCount,
       "secondary-label": e.buttonSecondaryLabel,
-      onClick: e.onClickFilter
+      onClick: e.onClickFilter,
+      onKeydown: de(e.closePopover, ["esc"])
     }, {
-      default: m(() => [
-        w(V(e.buttonLabel || e.label), 1)
+      default: p(() => [
+        O(R(e.buttonLabel || e.label), 1)
       ]),
       _: 1
-    }, 8, ["aria-controls", "has-chevron", "is-filter-open", "applied-filters-count", "secondary-label", "onClick"]),
-    e.filterButtonRef ? (p(), A(r, {
-      key: 0,
-      id: e.popoverId,
-      class: "b-base-filter__popover",
-      divider: "",
-      open: e.isFilterOpen,
-      actions: e.controlled ? null : e.actions,
-      "actions-layout": "space-between",
-      "target-element": e.filterButtonRef,
-      title: e.controlled ? null : e.label,
-      "fit-content": e.fitContent,
-      position: "bottom-start",
-      "without-space": e.controlled,
-      "fallback-position": ["bottom-end"]
-    }, {
-      default: m(() => [
-        re(e.$slots, "default", {}, void 0, !0)
+    }, 8, ["aria-controls", "has-chevron", "is-filter-open", "applied-filters-count", "secondary-label", "onClick", "onKeydown"]),
+    g(a, { to: "body" }, {
+      default: p(() => [
+        e.filterButtonRef ? (b(), $(r, {
+          key: 0,
+          id: e.popoverId,
+          ref: "popoverRef",
+          class: "b-base-filter__popover",
+          divider: "",
+          open: e.isFilterOpen,
+          actions: e.controlled ? null : e.actions,
+          "actions-layout": "space-between",
+          "target-element": e.filterButtonRef,
+          title: e.controlled ? null : e.label,
+          "fit-content": e.fitContent,
+          position: "bottom-start",
+          "without-space": e.controlled,
+          "fallback-position": ["bottom-end"]
+        }, {
+          default: p(() => [
+            k("div", {
+              onKeydown: t[0] || (t[0] = de((...u) => e.closePopover && e.closePopover(...u), ["esc"]))
+            }, [
+              oe(e.$slots, "default", {}, void 0, !0)
+            ], 32)
+          ]),
+          _: 3
+        }, 8, ["id", "open", "actions", "target-element", "title", "fit-content", "without-space"])) : w("", !0)
       ]),
       _: 3
-    }, 8, ["id", "open", "actions", "target-element", "title", "fit-content", "without-space"])) : z("", !0)
-  ], 32)), [
-    [a, e.onClickOutside]
-  ]);
+    })
+  ]));
 }
-const ye = /* @__PURE__ */ M(el, [["render", ll], ["__scopeId", "data-v-7f11dd78"]]), nl = (e) => e instanceof Array, we = (e) => nl(e) ? e.length === 0 || e.every((t) => t === "") : !e, Me = (e, t) => JSON.stringify(e) === JSON.stringify(t), me = (e, t) => {
+const ye = /* @__PURE__ */ M(il, [["render", dl], ["__scopeId", "data-v-84e3bc72"]]), cl = (e) => e instanceof Array, Ne = (e) => cl(e) ? e.length === 0 || e.every((t) => t === "") : !e, Me = (e, t) => JSON.stringify(e) === JSON.stringify(t), me = (e, t) => {
   const n = K(e.value);
-  Fe(
+  _e(
     () => e.value,
     () => {
       n.value = e.value;
     }
   );
-  const l = b(() => we(e.value)), s = b(
+  const l = f(() => Ne(e.value)), o = f(
     () => t.value !== null ? Me(t.value, e.value) : l.value
-  ), i = b(() => Me(n.value, e.value) || we(n.value) && l.value);
+  ), i = f(() => Me(n.value, e.value) || Ne(n.value) && l.value);
   return {
     internalFilterValue: n,
-    isSecondaryButtonDisabled: s,
+    isSecondaryButtonDisabled: o,
     isApplyButtonDisabled: i
   };
-}, se = (e, t) => {
+}, re = (e, t) => {
   const n = e == null ? void 0 : e.toString();
   return (n == null ? void 0 : n.length) > t ? `${n == null ? void 0 : n.slice(0, t)}...` : n;
-}, al = j({
+}, bl = N({
   name: "bento-input-filter",
   components: {
     BentoBaseFilter: ye,
-    BentoInputField: lt
+    BentoInputField: tt
   },
   props: {
     /**
@@ -389,54 +520,54 @@ const ye = /* @__PURE__ */ M(el, [["render", ll], ["__scopeId", "data-v-7f11dd78
   },
   emits: [v.INPUT, v.UPDATE],
   setup(e, { emit: t }) {
-    const n = K(null), { internalFilterValue: l, isSecondaryButtonDisabled: s, isApplyButtonDisabled: i } = me(
+    const n = K(null), { internalFilterValue: l, isSecondaryButtonDisabled: o, isApplyButtonDisabled: i } = me(
       J(e, "value"),
       J(e, "defaultValue")
-    ), o = b(() => e.defaultValue === null ? e.label : se(e.value, 18)), r = b(
-      () => e.defaultValue === null ? se(e.value, 12) : null
-    ), a = b(() => ({
+    ), s = f(() => e.defaultValue === null ? e.label : re(e.value, 18)), r = f(
+      () => e.defaultValue === null ? re(e.value, 12) : null
+    ), a = f(() => ({
       ["b-input-filter--only-slot"]: e.onlySlot
     }));
-    De(() => {
+    Ie(() => {
       l.value === "" && (l.value = null);
-    }), Fe(n, () => {
-      var I;
-      (I = n.value) == null || I.focusInput();
+    }), _e(n, () => {
+      var T;
+      (T = n.value) == null || T.focusInput();
     });
-    const f = () => {
+    const u = () => {
       l.value = e.value;
-    }, u = () => {
+    }, h = () => {
       !l.value && e.defaultValue !== null && (l.value = e.defaultValue), t(v.UPDATE, { ...e, value: l.value });
     };
     return {
       // Values
-      buttonLabel: o,
+      buttonLabel: s,
       buttonSecondaryLabel: r,
       conditionalClasses: a,
       internalFilterValue: l,
       isApplyButtonDisabled: i,
-      isSecondaryButtonDisabled: s,
+      isSecondaryButtonDisabled: o,
       // Refs
       inputTextRef: n,
       // Events
-      updateFilter: u,
+      updateFilter: h,
       clearFilter: () => {
-        l.value = null, u();
+        l.value = null, h();
       },
-      openFilter: f,
+      openFilter: u,
       resetFilter: () => t(v.UPDATE, { ...e, value: e.defaultValue }),
       onInput: () => {
         t(v.INPUT, { ...e, value: l.value });
       },
-      setInternalFilterValue: (I) => {
-        l.value = I;
+      setInternalFilterValue: (T) => {
+        l.value = T;
       }
     };
   }
 });
-function ol(e, t, n, l, s, i) {
-  const o = y("bento-input-field"), r = y("bento-base-filter");
-  return p(), A(r, oe(e.$props, {
+function fl(e, t, n, l, o, i) {
+  const s = y("bento-input-field"), r = y("bento-base-filter");
+  return b(), $(r, se(e.$props, {
     "button-label": e.buttonLabel,
     "button-secondary-label": e.buttonSecondaryLabel,
     "disable-apply-button": e.isApplyButtonDisabled,
@@ -447,13 +578,13 @@ function ol(e, t, n, l, s, i) {
     onOpen: e.openFilter,
     onReset: e.resetFilter
   }), {
-    default: m(() => [
-      L("div", {
-        class: ve(["b-input-filter", e.conditionalClasses]),
-        onKeydown: t[0] || (t[0] = be((...a) => e.updateFilter && e.updateFilter(...a), ["enter"])),
+    default: p(() => [
+      k("div", {
+        class: ie(["b-input-filter", e.conditionalClasses]),
+        onKeydown: t[0] || (t[0] = de((...a) => e.updateFilter && e.updateFilter(...a), ["enter"])),
         onInput: t[1] || (t[1] = (...a) => e.onInput && e.onInput(...a))
       }, [
-        C(o, {
+        g(s, {
           ref: "inputTextRef",
           value: e.internalFilterValue,
           onInput: e.setInternalFilterValue
@@ -463,13 +594,13 @@ function ol(e, t, n, l, s, i) {
     _: 1
   }, 16, ["button-label", "button-secondary-label", "disable-apply-button", "disable-secondary-button", "only-slot", "onApply", "onClear", "onOpen", "onReset"]);
 }
-const rt = /* @__PURE__ */ M(al, [["render", ol], ["__scopeId", "data-v-331367ce"]]), sl = j({
+const rt = /* @__PURE__ */ M(bl, [["render", fl], ["__scopeId", "data-v-331367ce"]]), pl = N({
   name: "bento-date-filter",
   components: {
     BentoBaseFilter: ye,
-    BentoDatePicker: Ot,
-    BentoDivider: at,
-    Calendar: Nt
+    BentoDatePicker: Nt,
+    BentoDivider: nt,
+    Calendar: Mt
   },
   props: {
     isDateInput: { type: Boolean, default: !0 },
@@ -508,51 +639,51 @@ const rt = /* @__PURE__ */ M(al, [["render", ol], ["__scopeId", "data-v-331367ce
   },
   emits: [v.INPUT, v.UPDATE],
   setup(e, { emit: t }) {
-    const { locale: n } = ue(void 0, !0), l = { de: ot, enUS: ae, fr: st }, { internalFilterValue: s, isSecondaryButtonDisabled: i, isApplyButtonDisabled: o } = me(
+    const { locale: n } = ce(void 0, !0), l = { de: at, enUS: ae, fr: ot }, { internalFilterValue: o, isSecondaryButtonDisabled: i, isApplyButtonDisabled: s } = me(
       J(e, "value"),
       J(e, "defaultValue")
-    ), r = b(
-      () => e.value ? ie(e.value, "dd MMM, yyyy", {
+    ), r = f(
+      () => e.value ? ue(e.value, "dd MMM, yyyy", {
         locale: l[n.value.substring(0, 2)] || ae
       }) : null
-    ), a = b(
+    ), a = f(
       () => e.defaultValue === null ? e.label : r.value
-    ), f = b(
+    ), u = f(
       () => e.defaultValue === null ? r.value : null
-    ), u = () => {
-      t(v.UPDATE, { ...e, value: s.value });
-    }, S = () => {
-      s.value = null, u();
-    }, F = () => {
-      s.value = e.defaultValue, u();
+    ), h = () => {
+      t(v.UPDATE, { ...e, value: o.value });
+    }, m = () => {
+      o.value = null, h();
+    }, _ = () => {
+      o.value = e.defaultValue, h();
     }, d = () => {
-      s.value = e.value;
-    }, D = ($) => {
-      s.value = $, t(v.INPUT, { ...e, value: s.value });
+      o.value = e.value;
+    }, D = (A) => {
+      o.value = A, t(v.INPUT, { ...e, value: o.value });
     };
     return {
       // Values
-      internalFilterValue: s,
-      isApplyButtonDisabled: o,
+      internalFilterValue: o,
+      isApplyButtonDisabled: s,
       isSecondaryButtonDisabled: i,
       buttonLabel: a,
-      buttonSecondaryLabel: f,
+      buttonSecondaryLabel: u,
       // Events
-      clearFilter: S,
+      clearFilter: m,
       onDateSelected: D,
       openFilter: d,
-      updateFilter: u,
-      resetFilter: F,
-      onDateInputSelected: ($) => {
-        s.value = $, D($), u();
+      updateFilter: h,
+      resetFilter: _,
+      onDateInputSelected: (A) => {
+        o.value = A, D(A), h();
       }
     };
   }
 });
-const il = { class: "b-date-filter" };
-function rl(e, t, n, l, s, i) {
-  const o = y("bento-date-picker"), r = y("bento-divider"), a = y("calendar"), f = y("bento-base-filter");
-  return p(), A(f, {
+const vl = { class: "b-date-filter" };
+function yl(e, t, n, l, o, i) {
+  const s = y("bento-date-picker"), r = y("bento-divider"), a = y("calendar"), u = y("bento-base-filter");
+  return b(), $(u, {
     "button-label": e.buttonLabel,
     "button-secondary-label": e.buttonSecondaryLabel,
     "default-value": e.defaultValue,
@@ -567,20 +698,20 @@ function rl(e, t, n, l, s, i) {
     onOpen: e.openFilter,
     onReset: e.resetFilter
   }, {
-    default: m(() => {
-      var u, S, F, d;
+    default: p(() => {
+      var h, m, _, d;
       return [
-        e.onlySlot ? (p(), A(o, {
+        e.onlySlot ? (b(), $(s, {
           key: 0,
           value: e.internalFilterValue,
-          "first-day-of-week": (u = e.options) == null ? void 0 : u.firstDayOfWeek,
-          "is-date-disabled": (S = e.options) == null ? void 0 : S.isDateDisabled,
+          "first-day-of-week": (h = e.options) == null ? void 0 : h.firstDayOfWeek,
+          "is-date-disabled": (m = e.options) == null ? void 0 : m.isDateDisabled,
           onInput: e.onDateInputSelected
-        }, null, 8, ["value", "first-day-of-week", "is-date-disabled", "onInput"])) : (p(), k(fe, { key: 1 }, [
-          C(r, { class: "b-date-filter__divider" }),
-          L("div", il, [
-            C(a, {
-              "first-day-of-week": (F = e.options) == null ? void 0 : F.firstDayOfWeek,
+        }, null, 8, ["value", "first-day-of-week", "is-date-disabled", "onInput"])) : (b(), P(pe, { key: 1 }, [
+          g(r, { class: "b-date-filter__divider" }),
+          k("div", vl, [
+            g(a, {
+              "first-day-of-week": (_ = e.options) == null ? void 0 : _.firstDayOfWeek,
               "is-date-disabled": (d = e.options) == null ? void 0 : d.isDateDisabled,
               "number-of-months": 1,
               value: e.internalFilterValue,
@@ -593,7 +724,7 @@ function rl(e, t, n, l, s, i) {
     _: 1
   }, 8, ["button-label", "button-secondary-label", "default-value", "disable-apply-button", "disable-secondary-button", "field", "label", "only-slot", "onApply", "onClear", "onOpen", "onReset"]);
 }
-const ut = /* @__PURE__ */ M(sl, [["render", rl], ["__scopeId", "data-v-66ffdc53"]]), He = {
+const ut = /* @__PURE__ */ M(pl, [["render", yl], ["__scopeId", "data-v-66ffdc53"]]), He = {
   "en-US": {
     clear: "Clear",
     reset: "Reset",
@@ -619,16 +750,16 @@ const ut = /* @__PURE__ */ M(sl, [["render", rl], ["__scopeId", "data-v-66ffdc53
     clear: "Borrar",
     apply: "Aplicar"
   }
-}, ul = j({
+}, ml = N({
   i18n: { messages: He },
   name: "bento-date-range-filter",
   components: {
     BentoBaseFilter: ye,
-    BentoButtonActions: qt,
-    BentoDateRangePicker: Mt,
-    BentoTypography: ce,
-    BentoDivider: at,
-    DateRangePickerCalendar: Ht
+    BentoButtonActions: jt,
+    BentoDateRangePicker: qt,
+    BentoTypography: fe,
+    BentoDivider: nt,
+    DateRangePickerCalendar: Kt
   },
   props: {
     /**
@@ -673,106 +804,106 @@ const ut = /* @__PURE__ */ M(sl, [["render", rl], ["__scopeId", "data-v-66ffdc53
   },
   emits: [v.INPUT, v.UPDATE],
   setup(e, { emit: t }) {
-    var O, N, Z, W;
-    const { locale: n, t: l } = ue({ messages: He }), s = { de: ot, enUS: ae, fr: st }, { internalFilterValue: i, isSecondaryButtonDisabled: o, isApplyButtonDisabled: r } = me(
+    var H, q, Z, W;
+    const { locale: n, t: l } = ce({ messages: He }), o = { de: at, enUS: ae, fr: ot }, { internalFilterValue: i, isSecondaryButtonDisabled: s, isApplyButtonDisabled: r } = me(
       J(e, "value"),
       J(e, "defaultValue")
-    ), a = (h) => h ? ie(h, Oe.NUMERIC_DATE_YEAR_FIRST, {
-      locale: s[n.value.substring(0, 2)] || ae
-    }) : void 0, f = (h) => h ? ie(h, Oe.HOUR_MINUTE_SECONDS, {
-      locale: s[n.value.substring(0, 2)] || ae
-    }) : "", u = K(null), S = K(!1), F = Je({
-      startDate: a((O = e.value) == null ? void 0 : O.startDate),
-      endDate: a((N = e.value) == null ? void 0 : N.endDate),
-      startTime: f((Z = e.value) == null ? void 0 : Z.startDate),
-      endTime: f((W = e.value) == null ? void 0 : W.endDate)
-    }), d = b(() => {
-      var h, x, ge, Se, c, T, E, Y;
-      if (!((h = e.value) != null && h.startDate) && !e.value.endDate)
+    ), a = (C) => C ? ue(C, Le.NUMERIC_DATE_YEAR_FIRST, {
+      locale: o[n.value.substring(0, 2)] || ae
+    }) : void 0, u = (C) => C ? ue(C, Le.HOUR_MINUTE_SECONDS, {
+      locale: o[n.value.substring(0, 2)] || ae
+    }) : "", h = K(null), m = K(!1), _ = Ge({
+      startDate: a((H = e.value) == null ? void 0 : H.startDate),
+      endDate: a((q = e.value) == null ? void 0 : q.endDate),
+      startTime: u((Z = e.value) == null ? void 0 : Z.startDate),
+      endTime: u((W = e.value) == null ? void 0 : W.endDate)
+    }), d = f(() => {
+      var C, x, Se, $e, c, I, U, z;
+      if (!((C = e.value) != null && C.startDate) && !e.value.endDate)
         return null;
-      if (((ge = (x = e.options) == null ? void 0 : x.quickSelectRanges) == null ? void 0 : ge.length) > 0) {
-        const le = (c = (Se = e.options) == null ? void 0 : Se.quickSelectRanges) == null ? void 0 : c.find(
-          ({ data: ee }) => Le(ee == null ? void 0 : ee.startDate, e.value.startDate) && Le(ee == null ? void 0 : ee.endDate, e.value.endDate)
+      if (((Se = (x = e.options) == null ? void 0 : x.quickSelectRanges) == null ? void 0 : Se.length) > 0) {
+        const ne = (c = ($e = e.options) == null ? void 0 : $e.quickSelectRanges) == null ? void 0 : c.find(
+          ({ data: ee }) => Oe(ee == null ? void 0 : ee.startDate, e.value.startDate) && Oe(ee == null ? void 0 : ee.endDate, e.value.endDate)
         );
-        if (le)
-          return le.label;
+        if (ne)
+          return ne.label;
       }
-      return wt((T = e.value) == null ? void 0 : T.startDate, (E = e.value) == null ? void 0 : E.endDate) && ((Y = e == null ? void 0 : e.options) != null && Y.allowTimeInput) ? `${ie(e.value.startDate, "dd MMM, yyyy HH:mm:ss", {
-        locale: s[n.value.substring(0, 2)] || ae
-      })} - ${ie(e.value.endDate, "HH:mm:ss", {
-        locale: s[n.value.substring(0, 2)] || ae
-      })}` : `${ie(e.value.startDate, "dd MMM, yyyy", {
-        locale: s[n.value.substring(0, 2)] || ae
-      })} - ${ie(e.value.endDate, "dd MMM, yyyy", {
-        locale: s[n.value.substring(0, 2)] || ae
+      return Ht((I = e.value) == null ? void 0 : I.startDate, (U = e.value) == null ? void 0 : U.endDate) && ((z = e == null ? void 0 : e.options) != null && z.allowTimeInput) ? `${ue(e.value.startDate, "dd MMM, yyyy HH:mm:ss", {
+        locale: o[n.value.substring(0, 2)] || ae
+      })} - ${ue(e.value.endDate, "HH:mm:ss", {
+        locale: o[n.value.substring(0, 2)] || ae
+      })}` : `${ue(e.value.startDate, "dd MMM, yyyy", {
+        locale: o[n.value.substring(0, 2)] || ae
+      })} - ${ue(e.value.endDate, "dd MMM, yyyy", {
+        locale: o[n.value.substring(0, 2)] || ae
       })}`;
-    }), D = b(
+    }), D = f(
       () => e.defaultValue === null ? e.label : d.value
-    ), I = b(
+    ), T = f(
       () => e.defaultValue === null ? d.value : null
-    ), $ = () => {
-      u.value.closePopover();
-      const { onlySlot: h, ...x } = e;
+    ), A = () => {
+      h.value.closePopover();
+      const { onlySlot: C, ...x } = e;
       t(v.UPDATE, { ...x, value: i.value });
-    }, U = () => {
-      i.value = void 0, $();
-    }, H = () => {
-      i.value = e.defaultValue, $();
-    }, g = () => {
+    }, E = () => {
+      i.value = void 0, A();
+    }, j = () => {
+      i.value = e.defaultValue, A();
+    }, S = () => {
       i.value = e.value;
-    }, _ = (h) => {
-      i.value = h, F.startDate = a(h.startDate), F.endDate = a(h.endDate), t(v.INPUT, { ...e, value: i.value });
-    }, B = (h) => {
-      h != null && h.startDate && (h != null && h.endDate) && (i.value = h, F.startDate = a(h.startDate), F.endDate = a(h.endDate), t(v.INPUT, { ...e, value: i.value }));
-    }, R = (h) => {
-      _(h), t(v.INPUT, { ...e, value: i.value });
-    }, G = b(
+    }, F = (C) => {
+      i.value = C, _.startDate = a(C.startDate), _.endDate = a(C.endDate), t(v.INPUT, { ...e, value: i.value });
+    }, B = (C) => {
+      C != null && C.startDate && (C != null && C.endDate) && (i.value = C, _.startDate = a(C.startDate), _.endDate = a(C.endDate), t(v.INPUT, { ...e, value: i.value }));
+    }, L = (C) => {
+      F(C), t(v.INPUT, { ...e, value: i.value });
+    }, G = f(
       () => [
         {
           title: l("apply"),
-          event: $,
-          disabled: S.value || r.value
+          event: A,
+          disabled: m.value || r.value
         },
         {
           title: e.defaultValue ? l("reset") : l("clear"),
-          event: e.defaultValue ? H : U,
-          disabled: S.value && o.value
+          event: e.defaultValue ? j : E,
+          disabled: m.value && s.value
         }
       ]
     );
     return {
       // Refs
-      baseFilter: u,
+      baseFilter: h,
       // Values
       actions: G,
-      formData: F,
+      formData: _,
       internalFilterValue: i,
       isApplyButtonDisabled: r,
-      isSecondaryButtonDisabled: o,
+      isSecondaryButtonDisabled: s,
       buttonLabel: D,
-      buttonSecondaryLabel: I,
+      buttonSecondaryLabel: T,
       // Events
-      onDateSelected: _,
-      openFilter: g,
-      updateFilter: $,
+      onDateSelected: F,
+      openFilter: S,
+      updateFilter: A,
       onDatePickerRangeError: () => {
-        S.value = !0, i.value = { startDate: void 0, endDate: void 0 }, t(v.INPUT, { ...e, value: i.value });
+        m.value = !0, i.value = { startDate: void 0, endDate: void 0 }, t(v.INPUT, { ...e, value: i.value });
       },
-      onDatePickerRangeFormDateInputUpdate: (h) => {
-        S.value = !1, h.startTime && (F.startTime = h.startTime), h.endTime && (F.endTime = h.endTime);
+      onDatePickerRangeFormDateInputUpdate: (C) => {
+        m.value = !1, C.startTime && (_.startTime = C.startTime), C.endTime && (_.endTime = C.endTime);
       },
-      onDateInputSelected: R,
+      onDateInputSelected: L,
       onRangeSelectorInput: B
     };
   }
 });
-const dl = {
+const hl = {
   key: 1,
   class: "b-date-range-filter"
 };
-function cl(e, t, n, l, s, i) {
-  const o = y("bento-date-range-picker"), r = y("bento-typography"), a = y("bento-divider"), f = y("bento-button-actions"), u = y("date-range-picker-calendar"), S = y("bento-base-filter");
-  return p(), A(S, {
+function _l(e, t, n, l, o, i) {
+  const s = y("bento-date-range-picker"), r = y("bento-typography"), a = y("bento-divider"), u = y("bento-button-actions"), h = y("date-range-picker-calendar"), m = y("bento-base-filter");
+  return b(), $(m, {
     ref: "baseFilter",
     class: "b-base-filter-date-range-filter",
     "button-label": e.buttonLabel,
@@ -787,26 +918,26 @@ function cl(e, t, n, l, s, i) {
     "fit-content": "",
     onOpen: e.openFilter
   }, {
-    default: m(() => {
-      var F, d, D, I, $, U, H, g, _, B, R;
+    default: p(() => {
+      var _, d, D, T, A, E, j, S, F, B, L;
       return [
-        e.onlySlot ? (p(), A(o, {
+        e.onlySlot ? (b(), $(s, {
           key: 0,
-          "allow-time-input": (F = e.options) == null ? void 0 : F.allowTimeInput,
+          "allow-time-input": (_ = e.options) == null ? void 0 : _.allowTimeInput,
           value: e.internalFilterValue,
           "first-day-of-week": (d = e.options) == null ? void 0 : d.firstDayOfWeek,
           "is-date-disabled": (D = e.options) == null ? void 0 : D.isDateDisabled,
-          "number-of-months": (I = e.options) == null ? void 0 : I.numberOfMonths,
-          "quick-select-ranges": ($ = e.options) == null ? void 0 : $.quickSelectRanges,
+          "number-of-months": (T = e.options) == null ? void 0 : T.numberOfMonths,
+          "quick-select-ranges": (A = e.options) == null ? void 0 : A.quickSelectRanges,
           onInput: e.onDateInputSelected
-        }, null, 8, ["allow-time-input", "value", "first-day-of-week", "is-date-disabled", "number-of-months", "quick-select-ranges", "onInput"])) : (p(), k("div", dl, [
-          C(u, {
-            "allow-time-input": (U = e.options) == null ? void 0 : U.allowTimeInput,
-            "first-day-of-week": (H = e.options) == null ? void 0 : H.firstDayOfWeek,
-            "is-date-disabled": (g = e.options) == null ? void 0 : g.isDateDisabled,
-            "max-range": (_ = e.options) == null ? void 0 : _.maxRange,
+        }, null, 8, ["allow-time-input", "value", "first-day-of-week", "is-date-disabled", "number-of-months", "quick-select-ranges", "onInput"])) : (b(), P("div", hl, [
+          g(h, {
+            "allow-time-input": (E = e.options) == null ? void 0 : E.allowTimeInput,
+            "first-day-of-week": (j = e.options) == null ? void 0 : j.firstDayOfWeek,
+            "is-date-disabled": (S = e.options) == null ? void 0 : S.isDateDisabled,
+            "max-range": (F = e.options) == null ? void 0 : F.maxRange,
             "number-of-months": (B = e.options) == null ? void 0 : B.numberOfMonths,
-            "quick-select-ranges": (R = e.options) == null ? void 0 : R.quickSelectRanges,
+            "quick-select-ranges": (L = e.options) == null ? void 0 : L.quickSelectRanges,
             value: e.internalFilterValue,
             "date-form-data": e.formData,
             onInput: e.onDateSelected,
@@ -814,21 +945,21 @@ function cl(e, t, n, l, s, i) {
             onError: e.onDatePickerRangeError,
             onFormDate: e.onDatePickerRangeFormDateInputUpdate
           }, {
-            title: m(() => [
-              C(r, {
+            title: p(() => [
+              g(r, {
                 strongest: "",
                 variant: "body",
                 el: "span"
               }, {
-                default: m(() => [
-                  w(V(e.label), 1)
+                default: p(() => [
+                  O(R(e.label), 1)
                 ]),
                 _: 1
               })
             ]),
-            actions: m(() => [
-              C(a, { class: "b-date-range-filter__divider" }),
-              C(f, {
+            actions: p(() => [
+              g(a, { class: "b-date-range-filter__divider" }),
+              g(u, {
                 class: "b-date-range-filter__actions",
                 actions: e.actions,
                 layout: "space-between"
@@ -842,21 +973,21 @@ function cl(e, t, n, l, s, i) {
     _: 1
   }, 8, ["button-label", "button-secondary-label", "controlled", "disable-apply-button", "disable-secondary-button", "default-value", "field", "label", "only-slot", "onOpen"]);
 }
-const dt = /* @__PURE__ */ M(ul, [["render", cl], ["__scopeId", "data-v-f5976db7"]]), qe = {
+const dt = /* @__PURE__ */ M(ml, [["render", _l], ["__scopeId", "data-v-f5976db7"]]), qe = {
   "en-US": {
     all: "All",
     noFiltersMatchThisSearch: "No filters match this search",
     search: "Search",
     searchFilter: "Search {filter}"
   }
-}, bl = j({
+}, Fl = N({
   i18n: { messages: qe },
   name: "bento-select-filter",
   components: {
     BentoBaseFilter: ye,
-    BentoDropdown: Vt,
-    BentoListbox: Kt,
-    BentoSearchBar: he
+    BentoDropdown: Lt,
+    BentoListbox: Yt,
+    BentoSearchBar: Ce
   },
   props: {
     /**
@@ -897,77 +1028,77 @@ const dt = /* @__PURE__ */ M(ul, [["render", cl], ["__scopeId", "data-v-f5976db7
   },
   emits: [v.INPUT, v.UPDATE],
   setup(e, { emit: t, slots: n }) {
-    var G, q;
-    const { internalFilterValue: l, isSecondaryButtonDisabled: s, isApplyButtonDisabled: i } = me(
+    var G, Y;
+    const { internalFilterValue: l, isSecondaryButtonDisabled: o, isApplyButtonDisabled: i } = me(
       J(e, "value"),
       J(e, "defaultValue")
-    ), { t: o, locale: r } = ue({ messages: qe }), a = K(""), f = J(e, "options"), u = K(e.options.listboxItems);
-    Fe(f, () => {
-      u.value = f.value.listboxItems;
+    ), { t: s, locale: r } = ce({ messages: qe }), a = K(""), u = J(e, "options"), h = K(e.options.listboxItems);
+    _e(u, () => {
+      h.value = u.value.listboxItems;
     });
-    const S = nt(
+    const m = lt(
       a,
-      u,
-      (q = (G = e.options) == null ? void 0 : G.search) == null ? void 0 : q.searchEvent
-    ), F = b(() => o("noFiltersMatchThisSearch")), d = b(() => {
-      var P, O, N, Z;
+      h,
+      (Y = (G = e.options) == null ? void 0 : G.search) == null ? void 0 : Y.searchEvent
+    ), _ = f(() => s("noFiltersMatchThisSearch")), d = f(() => {
+      var V, H, q, Z;
       if (e.defaultValue === null)
         return e.label;
       if (e.options.multiple) {
-        const W = (P = e.value) == null ? void 0 : P.length;
+        const W = (V = e.value) == null ? void 0 : V.length;
         if (W === e.options.listboxItems.length)
-          return (O = e == null ? void 0 : e.options) == null ? void 0 : O.messages[r.value].persistentButtonLabelAllSelected;
-        const h = (N = e == null ? void 0 : e.options) == null ? void 0 : N.messages[r.value].persistentButtonLabelPartiallySelected.split("|").map((x) => x.trim());
-        return W === 1 ? h[0].replace("{count}", W) : h[1].replace("{count}", W);
+          return (H = e == null ? void 0 : e.options) == null ? void 0 : H.messages[r.value].persistentButtonLabelAllSelected;
+        const C = (q = e == null ? void 0 : e.options) == null ? void 0 : q.messages[r.value].persistentButtonLabelPartiallySelected.split("|").map((x) => x.trim());
+        return W === 1 ? C[0].replace("{count}", W) : C[1].replace("{count}", W);
       }
-      return se((Z = e.options.listboxItems.find(({ value: W }) => W === e.value)) == null ? void 0 : Z.label, 18);
-    }), D = b(() => {
-      var P, O;
-      return e.defaultValue === null && (!e.options.multiple || ((P = e.value) == null ? void 0 : P.length) === 1) ? se(
-        (O = e.options.listboxItems.find(
-          ({ value: N }) => {
+      return re((Z = e.options.listboxItems.find(({ value: W }) => W === e.value)) == null ? void 0 : Z.label, 18);
+    }), D = f(() => {
+      var V, H;
+      return e.defaultValue === null && (!e.options.multiple || ((V = e.value) == null ? void 0 : V.length) === 1) ? re(
+        (H = e.options.listboxItems.find(
+          ({ value: q }) => {
             var Z;
-            return Array.isArray(e.value) ? (Z = e == null ? void 0 : e.value) == null ? void 0 : Z.includes(N) : N === e.value;
+            return Array.isArray(e.value) ? (Z = e == null ? void 0 : e.value) == null ? void 0 : Z.includes(q) : q === e.value;
           }
-        )) == null ? void 0 : O.label,
+        )) == null ? void 0 : H.label,
         12
       ) : null;
-    }), I = b(() => Ie(`filter-listbox-${e.field}`)), $ = (P) => {
-      l.value = P;
-      const { onlySlot: O, ...N } = e;
-      t(v.INPUT, { ...N, value: l.value });
-    }, U = () => {
-      var N;
-      e.options.multiple && l.value && ((N = l.value) == null ? void 0 : N.length) === 0 && (l.value = e.defaultValue !== null ? e.defaultValue : void 0);
-      const { onlySlot: P, ...O } = e;
-      t(v.UPDATE, { ...O, value: l.value });
-    }, H = () => {
+    }), T = f(() => Te(`filter-listbox-${e.field}`)), A = (V) => {
+      l.value = V;
+      const { onlySlot: H, ...q } = e;
+      t(v.INPUT, { ...q, value: l.value });
+    }, E = () => {
+      var q;
+      e.options.multiple && l.value && ((q = l.value) == null ? void 0 : q.length) === 0 && (l.value = e.defaultValue !== null ? e.defaultValue : void 0);
+      const { onlySlot: V, ...H } = e;
+      t(v.UPDATE, { ...H, value: l.value });
+    }, j = () => {
       l.value = e.value;
-    }, g = () => {
+    }, S = () => {
       a.value && (a.value = "");
-    }, _ = () => {
-      l.value = e.defaultValue, U();
+    }, F = () => {
+      l.value = e.defaultValue, E();
     }, B = () => {
-      l.value = null, U();
+      l.value = null, E();
     };
     return {
       // Values
-      appliedFiltersCount: b(() => {
-        var N, Z;
+      appliedFiltersCount: f(() => {
+        var q, Z;
         if (e.value == null || e.defaultValue !== null || !e.options.multiple)
           return null;
-        const P = (N = e.options.listboxItems) == null ? void 0 : N.reduce((W, h) => {
+        const V = (q = e.options.listboxItems) == null ? void 0 : q.reduce((W, C) => {
           var x;
-          return W += (x = h == null ? void 0 : h.items) != null && x.length ? h.items.length : 1, W;
-        }, 0), O = (Z = e.value) == null ? void 0 : Z.length;
-        return O === 1 ? null : O === P ? o("all") : O;
+          return W += (x = C == null ? void 0 : C.items) != null && x.length ? C.items.length : 1, W;
+        }, 0), H = (Z = e.value) == null ? void 0 : Z.length;
+        return H === 1 ? null : H === V ? s("all") : H;
       }),
-      filteredItems: S,
+      filteredItems: m,
       internalFilterValue: l,
       isApplyButtonDisabled: i,
-      isSecondaryButtonDisabled: s,
-      listboxFilterId: I,
-      noResultsMessage: F,
+      isSecondaryButtonDisabled: o,
+      listboxFilterId: T,
+      noResultsMessage: _,
       slots: n,
       buttonLabel: d,
       buttonSecondaryLabel: D,
@@ -975,18 +1106,18 @@ const dt = /* @__PURE__ */ M(ul, [["render", cl], ["__scopeId", "data-v-f5976db7
       searchTerm: a,
       // Events
       clearFilter: B,
-      closeFilter: g,
-      onOptionSelected: $,
-      openFilter: H,
-      updateFilter: U,
-      resetFilter: _
+      closeFilter: S,
+      onOptionSelected: A,
+      openFilter: j,
+      updateFilter: E,
+      resetFilter: F
     };
   }
 });
-const fl = (e) => (Ge("data-v-b8decbb4"), e = e(), We(), e), pl = { class: "b-select-filter__search-bar" }, vl = /* @__PURE__ */ fl(() => /* @__PURE__ */ L("hr", { class: "b-select-filter__divider" }, null, -1));
-function yl(e, t, n, l, s, i) {
-  const o = y("bento-dropdown"), r = y("bento-search-bar"), a = y("bento-listbox"), f = y("bento-base-filter");
-  return p(), A(f, {
+const gl = (e) => (St("data-v-b8decbb4"), e = e(), $t(), e), Cl = { class: "b-select-filter__search-bar" }, Sl = /* @__PURE__ */ gl(() => /* @__PURE__ */ k("hr", { class: "b-select-filter__divider" }, null, -1));
+function $l(e, t, n, l, o, i) {
+  const s = y("bento-dropdown"), r = y("bento-search-bar"), a = y("bento-listbox"), u = y("bento-base-filter");
+  return b(), $(u, {
     "applied-filters-count": e.appliedFiltersCount,
     "button-label": e.buttonLabel,
     "button-secondary-label": e.buttonSecondaryLabel,
@@ -1002,62 +1133,62 @@ function yl(e, t, n, l, s, i) {
     onOpen: e.openFilter,
     onClose: e.closeFilter
   }, {
-    default: m(() => {
-      var u, S, F, d, D, I, $, U, H, g, _, B, R;
+    default: p(() => {
+      var h, m, _, d, D, T, A, E, j, S, F, B, L;
       return [
-        e.onlySlot ? (p(), A(o, {
+        e.onlySlot ? (b(), $(s, {
           key: 0,
           value: e.internalFilterValue,
           class: "b-select-filter__dropdown-variant",
           items: e.options.listboxItems,
-          multiple: (u = e.options) == null ? void 0 : u.multiple,
+          multiple: (h = e.options) == null ? void 0 : h.multiple,
           "no-results-message": e.noResultsMessage,
           searching: !!e.searchTerm,
           "is-option-disabled": e.options.isOptionDisabled,
           "dynamic-filtering": !0,
-          "empty-state": (S = e.options) == null ? void 0 : S.emptyState,
+          "empty-state": (m = e.options) == null ? void 0 : m.emptyState,
           onInput: e.onOptionSelected
-        }, $e({ _: 2 }, [
-          pe(e.slots, (G, q) => ({
-            name: q,
-            fn: m((P) => [
-              re(e.$slots, q, Ue(Pe(P)), void 0, !0)
+        }, Ae({ _: 2 }, [
+          ve(e.slots, (G, Y) => ({
+            name: Y,
+            fn: p((V) => [
+              oe(e.$slots, Y, ke(Pe(V)), void 0, !0)
             ])
           }))
-        ]), 1032, ["value", "items", "multiple", "no-results-message", "searching", "is-option-disabled", "empty-state", "onInput"])) : (p(), k(fe, { key: 1 }, [
-          L("div", pl, [
-            C(r, {
-              "debounce-time": (d = (F = e.options) == null ? void 0 : F.search) == null ? void 0 : d.debounceTime,
+        ]), 1032, ["value", "items", "multiple", "no-results-message", "searching", "is-option-disabled", "empty-state", "onInput"])) : (b(), P(pe, { key: 1 }, [
+          k("div", Cl, [
+            g(r, {
+              "debounce-time": (d = (_ = e.options) == null ? void 0 : _.search) == null ? void 0 : d.debounceTime,
               value: e.searchTerm,
               "input-field-aria-label": e.$t("searchFilter", { filter: e.label.toLocaleLowerCase() }).toString(),
               onInput: t[0] || (t[0] = (G) => e.searchTerm = G)
             }, null, 8, ["debounce-time", "value", "input-field-aria-label"])
           ]),
-          vl,
-          C(a, {
+          Sl,
+          g(a, {
             id: e.listboxFilterId,
             "aria-label": e.label,
             class: "b-select-filter__wrapper",
             "empty-state": (D = e.options) == null ? void 0 : D.emptyState,
-            "has-more-items": ($ = (I = e.options) == null ? void 0 : I.lazy) == null ? void 0 : $.hasMoreItems,
+            "has-more-items": (A = (T = e.options) == null ? void 0 : T.lazy) == null ? void 0 : A.hasMoreItems,
             items: e.filteredItems,
-            "is-option-disabled": (U = e.options) == null ? void 0 : U.isOptionDisabled,
-            "lazy-load-type": (g = (H = e.options) == null ? void 0 : H.lazy) == null ? void 0 : g.lazyLoadType,
-            loading: (B = (_ = e.options) == null ? void 0 : _.lazy) == null ? void 0 : B.loading,
-            multiple: (R = e.options) == null ? void 0 : R.multiple,
+            "is-option-disabled": (E = e.options) == null ? void 0 : E.isOptionDisabled,
+            "lazy-load-type": (S = (j = e.options) == null ? void 0 : j.lazy) == null ? void 0 : S.lazyLoadType,
+            loading: (B = (F = e.options) == null ? void 0 : F.lazy) == null ? void 0 : B.loading,
+            multiple: (L = e.options) == null ? void 0 : L.multiple,
             "no-results-message": e.noResultsMessage,
             searching: !!e.searchTerm,
             "selected-value": e.internalFilterValue,
             onSelect: e.onOptionSelected,
             onShowMore: t[1] || (t[1] = (G) => {
-              var q, P;
-              return (P = (q = e.options) == null ? void 0 : q.lazy) == null ? void 0 : P.showMoreEvent();
+              var Y, V;
+              return (V = (Y = e.options) == null ? void 0 : Y.lazy) == null ? void 0 : V.showMoreEvent();
             })
-          }, $e({ _: 2 }, [
-            pe(e.slots, (G, q) => ({
-              name: q,
-              fn: m((P) => [
-                re(e.$slots, q, Ue(Pe(P)), void 0, !0)
+          }, Ae({ _: 2 }, [
+            ve(e.slots, (G, Y) => ({
+              name: Y,
+              fn: p((V) => [
+                oe(e.$slots, Y, ke(Pe(V)), void 0, !0)
               ])
             }))
           ]), 1032, ["id", "aria-label", "empty-state", "has-more-items", "items", "is-option-disabled", "lazy-load-type", "loading", "multiple", "no-results-message", "searching", "selected-value", "onSelect"])
@@ -1067,11 +1198,11 @@ function yl(e, t, n, l, s, i) {
     _: 3
   }, 8, ["applied-filters-count", "button-label", "button-secondary-label", "disable-apply-button", "disable-secondary-button", "default-value", "label", "field", "only-slot", "onApply", "onClear", "onReset", "onOpen", "onClose"]);
 }
-const X = /* @__PURE__ */ M(bl, [["render", yl], ["__scopeId", "data-v-b8decbb4"]]), ml = j({
+const X = /* @__PURE__ */ M(Fl, [["render", $l], ["__scopeId", "data-v-b8decbb4"]]), Al = N({
   name: "bento-select-avatar-filter",
   components: {
     BentoSelectFilter: X,
-    BentoAvatar: jt
+    BentoAvatar: zt
   },
   props: {
     ...X.props,
@@ -1096,28 +1227,28 @@ const X = /* @__PURE__ */ M(bl, [["render", yl], ["__scopeId", "data-v-b8decbb4"
     };
   }
 });
-function _l(e, t, n, l, s, i) {
-  const o = y("bento-avatar"), r = y("bento-select-filter");
-  return p(), A(r, oe(e.$props, {
+function Bl(e, t, n, l, o, i) {
+  const s = y("bento-avatar"), r = y("bento-select-filter");
+  return b(), $(r, se(e.$props, {
     field: e.field,
     label: e.label,
     onUpdate: e.onUpdate,
     onInput: t[0] || (t[0] = (a) => e.$emit(e.BentoFilterEvent.INPUT, a))
   }), {
-    default: m(({ label: a, data: f }) => [
-      C(o, {
+    default: p(({ label: a, data: u }) => [
+      g(s, {
         username: a,
-        src: f
+        src: u
       }, null, 8, ["username", "src"])
     ]),
     _: 1
   }, 16, ["field", "label", "onUpdate"]);
 }
-const ct = /* @__PURE__ */ M(ml, [["render", _l]]), Fl = j({
+const ct = /* @__PURE__ */ M(Al, [["render", Bl]]), Dl = N({
   name: "bento-select-country-filter",
   components: {
     BentoSelectFilter: X,
-    ListboxOptionTag: it
+    ListboxOptionTag: st
   },
   props: {
     ...X.props,
@@ -1144,25 +1275,25 @@ const ct = /* @__PURE__ */ M(ml, [["render", _l]]), Fl = j({
     };
   }
 });
-function hl(e, t, n, l, s, i) {
-  const o = y("listbox-option-tag"), r = y("bento-select-filter");
-  return p(), A(r, oe(e.$props, {
+function Il(e, t, n, l, o, i) {
+  const s = y("listbox-option-tag"), r = y("bento-select-filter");
+  return b(), $(r, se(e.$props, {
     field: e.field,
     label: e.label,
     onUpdate: e.onUpdate,
     onInput: t[0] || (t[0] = (a) => e.$emit(e.BentoFilterEvent.INPUT, a))
   }), {
-    default: m((a) => [
-      C(o, { option: a }, null, 8, ["option"])
+    default: p((a) => [
+      g(s, { option: a }, null, 8, ["option"])
     ]),
     _: 1
   }, 16, ["field", "label", "onUpdate"]);
 }
-const bt = /* @__PURE__ */ M(Fl, [["render", hl]]), gl = j({
+const bt = /* @__PURE__ */ M(Dl, [["render", Il]]), Tl = N({
   name: "bento-select-country-filter",
   components: {
     BentoSelectFilter: X,
-    BentoCountry: Yt
+    BentoCountry: Jt
   },
   props: {
     ...X.props,
@@ -1180,11 +1311,11 @@ const bt = /* @__PURE__ */ M(Fl, [["render", hl]]), gl = j({
   },
   emits: [v.INPUT, v.UPDATE],
   setup(e, { emit: t }) {
-    const n = J(e, "options"), { listboxItems: l, variant: s } = Ct(n.value), i = (a) => t(v.UPDATE, a), o = zt(s, l), r = b(() => ({
+    const n = J(e, "options"), { listboxItems: l, variant: o } = At(n.value), i = (a) => t(v.UPDATE, a), s = Gt(o, l), r = f(() => ({
       ...e.options,
-      listboxItems: o.value
+      listboxItems: s.value
     }));
-    return $t("skipBentoCountryDeprecateMessage", !0), (!s || s.value === "custom") && Tt(
+    return Bt("skipBentoCountryDeprecateMessage", !0), (!o || o.value === "custom") && Ut(
       'BentoSelectCountryFilter type with `options.variant==="custom"`',
       "Use any of the other BentoSelectCountryFilter variants instead OR use BentoSelectFilter type for custom labels",
       "2.0.0"
@@ -1198,30 +1329,30 @@ const bt = /* @__PURE__ */ M(Fl, [["render", hl]]), gl = j({
     };
   }
 });
-function Sl(e, t, n, l, s, i) {
-  const o = y("bento-country"), r = y("bento-select-filter");
-  return p(), A(r, oe(e.$props, {
+function El(e, t, n, l, o, i) {
+  const s = y("bento-country"), r = y("bento-select-filter");
+  return b(), $(r, se(e.$props, {
     field: e.field,
     label: e.label,
     options: e.countryOptions,
     onUpdate: e.onUpdate,
     onInput: t[0] || (t[0] = (a) => e.$emit(e.BentoFilterEvent.INPUT, a))
   }), {
-    default: m(({ value: a, label: f }) => [
-      C(o, {
+    default: p(({ value: a, label: u }) => [
+      g(s, {
         code: a,
-        label: f,
+        label: u,
         variant: "custom"
       }, null, 8, ["code", "label"])
     ]),
     _: 1
   }, 16, ["field", "label", "options", "onUpdate"]);
 }
-const ft = /* @__PURE__ */ M(gl, [["render", Sl]]), Cl = j({
+const ft = /* @__PURE__ */ M(Tl, [["render", El]]), Ul = N({
   name: "bento-select-payment-method-filter",
   components: {
     BentoSelectFilter: X,
-    BentoPaymentMethod: Jt
+    BentoPaymentMethod: Wt
   },
   props: {
     ...X.props,
@@ -1246,28 +1377,28 @@ const ft = /* @__PURE__ */ M(gl, [["render", Sl]]), Cl = j({
     };
   }
 });
-function $l(e, t, n, l, s, i) {
-  const o = y("bento-payment-method"), r = y("bento-select-filter");
-  return p(), A(r, oe(e.$props, {
+function kl(e, t, n, l, o, i) {
+  const s = y("bento-payment-method"), r = y("bento-select-filter");
+  return b(), $(r, se(e.$props, {
     field: e.field,
     label: e.label,
     onUpdate: e.onUpdate,
     onInput: t[0] || (t[0] = (a) => e.$emit(e.BentoFilterEvent.INPUT, a))
   }), {
-    default: m(({ value: a, label: f }) => [
-      C(o, {
+    default: p(({ value: a, label: u }) => [
+      g(s, {
         type: a,
-        label: f
+        label: u
       }, null, 8, ["type", "label"])
     ]),
     _: 1
   }, 16, ["field", "label", "onUpdate"]);
 }
-const pt = /* @__PURE__ */ M(Cl, [["render", $l]]), Al = j({
+const pt = /* @__PURE__ */ M(Ul, [["render", kl]]), Pl = N({
   name: "bento-select-country-filter",
   components: {
     BentoSelectFilter: X,
-    ListboxOptionTag: it
+    ListboxOptionTag: st
   },
   props: {
     ...X.props,
@@ -1284,15 +1415,15 @@ const pt = /* @__PURE__ */ M(Cl, [["render", $l]]), Al = j({
   },
   emits: [v.INPUT, v.UPDATE],
   setup(e, { emit: t }) {
-    const n = (i) => t(v.UPDATE, i), l = b(
+    const n = (i) => t(v.UPDATE, i), l = f(
       () => {
-        var i, o;
-        return (o = (i = e == null ? void 0 : e.options) == null ? void 0 : i.listboxItems) == null ? void 0 : o.map(({ label: r, value: a, variant: f }) => ({ label: r, value: a, data: f }));
+        var i, s;
+        return (s = (i = e == null ? void 0 : e.options) == null ? void 0 : i.listboxItems) == null ? void 0 : s.map(({ label: r, value: a, variant: u }) => ({ label: r, value: a, data: u }));
       }
     );
     return {
       // Values
-      countryOptions: b(() => ({
+      countryOptions: f(() => ({
         ...e.options,
         listboxItems: l.value
       })),
@@ -1303,32 +1434,32 @@ const pt = /* @__PURE__ */ M(Cl, [["render", $l]]), Al = j({
     };
   }
 });
-function Bl(e, t, n, l, s, i) {
-  const o = y("listbox-option-tag"), r = y("bento-select-filter");
-  return p(), A(r, oe(e.$props, {
+function Vl(e, t, n, l, o, i) {
+  const s = y("listbox-option-tag"), r = y("bento-select-filter");
+  return b(), $(r, se(e.$props, {
     field: e.field,
     label: e.label,
     options: e.countryOptions,
     onUpdate: e.onUpdate,
     onInput: t[0] || (t[0] = (a) => e.$emit(e.BentoFilterEvent.INPUT, a))
   }), {
-    default: m(({ label: a, data: f }) => [
-      C(o, {
-        option: { value: a, data: f, label: "" }
+    default: p(({ label: a, data: u }) => [
+      g(s, {
+        option: { value: a, data: u, label: "" }
       }, null, 8, ["option"])
     ]),
     _: 1
   }, 16, ["field", "label", "options", "onUpdate"]);
 }
-const vt = /* @__PURE__ */ M(Al, [["render", Bl]]), Ke = {
+const vt = /* @__PURE__ */ M(Pl, [["render", Vl]]), Ke = {
   "en-US": {
     yes: "Yes",
     no: "No"
   }
-}, Dl = j({
+}, Rl = N({
   name: "bento-boolean-filter",
   i18n: { messages: Ke },
-  components: { BentoBaseFilter: ye, BentoRadioGroup: Et },
+  components: { BentoBaseFilter: ye, BentoRadioGroup: kt },
   props: {
     /**
      * Default value of the filter to reset to.
@@ -1364,55 +1495,55 @@ const vt = /* @__PURE__ */ M(Al, [["render", Bl]]), Ke = {
   },
   emits: [v.INPUT, v.UPDATE],
   setup(e, { emit: t }) {
-    const { t: n } = ue({ messages: Ke }), l = b(() => e.options && e.options.positiveOption && e.options.negativeOption ? [e.options.positiveOption, e.options.negativeOption] : [
+    const { t: n } = ce({ messages: Ke }), l = f(() => e.options && e.options.positiveOption && e.options.negativeOption ? [e.options.positiveOption, e.options.negativeOption] : [
       { value: "yes", label: n("yes") },
       { value: "no", label: n("no") }
-    ]), { internalFilterValue: s, isSecondaryButtonDisabled: i, isApplyButtonDisabled: o } = me(
+    ]), { internalFilterValue: o, isSecondaryButtonDisabled: i, isApplyButtonDisabled: s } = me(
       J(e, "value"),
       J(e, "defaultValue")
-    ), r = b(
-      () => e.defaultValue === null ? e.label : se(l.value.find(({ value: I }) => I === e.value).label, 18)
-    ), a = b(
+    ), r = f(
+      () => e.defaultValue === null ? e.label : re(l.value.find(({ value: T }) => T === e.value).label, 18)
+    ), a = f(
       () => {
-        var I;
-        return e.defaultValue === null ? se((I = l.value.find(({ value: $ }) => $ === e.value)) == null ? void 0 : I.label, 12) : null;
+        var T;
+        return e.defaultValue === null ? re((T = l.value.find(({ value: A }) => A === e.value)) == null ? void 0 : T.label, 12) : null;
       }
-    ), f = b(() => ({
+    ), u = f(() => ({
       ["b-boolean-filter--only-slot"]: e.onlySlot
     }));
-    De(() => {
-      s.value || (s.value = null);
+    Ie(() => {
+      o.value || (o.value = null);
     });
-    const u = (I) => {
-      s.value = I, t(v.INPUT, { ...e, value: s.value });
-    }, S = () => {
-      s.value = e.value;
-    }, F = () => {
-      t(v.UPDATE, { ...e, value: s.value });
+    const h = (T) => {
+      o.value = T, t(v.INPUT, { ...e, value: o.value });
+    }, m = () => {
+      o.value = e.value;
+    }, _ = () => {
+      t(v.UPDATE, { ...e, value: o.value });
     };
     return {
       // Values
       items: l,
-      conditionalClasses: f,
+      conditionalClasses: u,
       buttonLabel: r,
       buttonSecondaryLabel: a,
-      internalFilterValue: s,
-      isApplyButtonDisabled: o,
+      internalFilterValue: o,
+      isApplyButtonDisabled: s,
       isSecondaryButtonDisabled: i,
       // Events
-      onInput: u,
-      updateFilter: F,
+      onInput: h,
+      updateFilter: _,
       clearFilter: () => {
-        s.value = null, F();
+        o.value = null, _();
       },
-      openFilter: S,
+      openFilter: m,
       resetFilter: () => t(v.UPDATE, { ...e, value: e.defaultValue })
     };
   }
 });
-function Il(e, t, n, l, s, i) {
-  const o = y("bento-radio-group"), r = y("bento-base-filter");
-  return p(), A(r, oe(e.$props, {
+function Ol(e, t, n, l, o, i) {
+  const s = y("bento-radio-group"), r = y("bento-base-filter");
+  return b(), $(r, se(e.$props, {
     "button-label": e.buttonLabel,
     "button-secondary-label": e.buttonSecondaryLabel,
     "disable-apply-button": e.isApplyButtonDisabled,
@@ -1423,12 +1554,12 @@ function Il(e, t, n, l, s, i) {
     onOpen: e.openFilter,
     onReset: e.resetFilter
   }), {
-    default: m(() => [
-      L("div", {
-        class: ve(["b-boolean-filter", e.conditionalClasses]),
-        onKeydown: t[0] || (t[0] = be((...a) => e.updateFilter && e.updateFilter(...a), ["enter"]))
+    default: p(() => [
+      k("div", {
+        class: ie(["b-boolean-filter", e.conditionalClasses]),
+        onKeydown: t[0] || (t[0] = de((...a) => e.updateFilter && e.updateFilter(...a), ["enter"]))
       }, [
-        C(o, {
+        g(s, {
           items: e.items,
           label: e.label,
           "model-value": e.internalFilterValue,
@@ -1440,15 +1571,15 @@ function Il(e, t, n, l, s, i) {
     _: 1
   }, 16, ["button-label", "button-secondary-label", "disable-apply-button", "disable-secondary-button", "only-slot", "onApply", "onClear", "onOpen", "onReset"]);
 }
-const yt = /* @__PURE__ */ M(Dl, [["render", Il], ["__scopeId", "data-v-8510b360"]]), Tl = {
+const yt = /* @__PURE__ */ M(Rl, [["render", Ol], ["__scopeId", "data-v-8510b360"]]), Ll = {
   "en-US": {
     from: "From",
     to: "To"
   }
-}, El = j({
+}, wl = N({
   name: "bento-range-filter",
-  i18n: { messages: Tl },
-  components: { BentoBaseFilter: ye, BentoInputField: lt },
+  i18n: { messages: Ll },
+  components: { BentoBaseFilter: ye, BentoInputField: tt },
   props: {
     /**
      * Default value of the filter to reset to.
@@ -1475,30 +1606,30 @@ const yt = /* @__PURE__ */ M(Dl, [["render", Il], ["__scopeId", "data-v-8510b360
   },
   emits: [v.INPUT, v.UPDATE],
   setup(e, { emit: t }) {
-    const n = K(null), { internalFilterValue: l, isSecondaryButtonDisabled: s, isApplyButtonDisabled: i } = me(
+    const n = K(null), { internalFilterValue: l, isSecondaryButtonDisabled: o, isApplyButtonDisabled: i } = me(
       J(e, "value"),
       J(e, "defaultValue")
-    ), o = b(
+    ), s = f(
       () => {
-        var U, H;
-        return (U = e.value) != null && U[0] && ((H = e.value) != null && H[1]) ? `${se(e.value[0], 5)} - ${se(e.value[1], 5)}` : null;
+        var E, j;
+        return (E = e.value) != null && E[0] && ((j = e.value) != null && j[1]) ? `${re(e.value[0], 5)} - ${re(e.value[1], 5)}` : null;
       }
-    ), r = b(
-      () => e.defaultValue === null ? e.label : o.value
-    ), a = b(
-      () => e.defaultValue === null ? o.value : null
-    ), f = b(() => ({
+    ), r = f(
+      () => e.defaultValue === null ? e.label : s.value
+    ), a = f(
+      () => e.defaultValue === null ? s.value : null
+    ), u = f(() => ({
       ["b-range-filter--only-slot"]: e.onlySlot
-    })), u = () => {
-      l.value = e.value, At(() => n.value.focusInput());
-    }, S = () => {
+    })), h = () => {
+      l.value = e.value, Dt(() => n.value.focusInput());
+    }, m = () => {
       t(v.INPUT, { ...e, value: l.value });
-    }, F = (U) => {
-      l.value = [U, l.value[1]], S();
-    }, d = (U) => {
-      l.value = [l.value[0], U], S();
+    }, _ = (E) => {
+      l.value = [E, l.value[1]], m();
+    }, d = (E) => {
+      l.value = [l.value[0], E], m();
     }, D = () => {
-      l.value.some((U) => U) || (l.value = e.defaultValue !== null ? e.defaultValue : void 0), t(v.UPDATE, {
+      l.value.some((E) => E) || (l.value = e.defaultValue !== null ? e.defaultValue : void 0), t(v.UPDATE, {
         ...e,
         value: l.value
       });
@@ -1506,27 +1637,27 @@ const yt = /* @__PURE__ */ M(Dl, [["render", Il], ["__scopeId", "data-v-8510b360
     return {
       // Values
       inputTextRef: n,
-      conditionalClasses: f,
+      conditionalClasses: u,
       internalFilterValue: l,
       isApplyButtonDisabled: i,
-      isSecondaryButtonDisabled: s,
+      isSecondaryButtonDisabled: o,
       buttonLabel: r,
       buttonSecondaryLabel: a,
       // Events
-      updateFrom: F,
+      updateFrom: _,
       updateTo: d,
       updateFilter: D,
       clearFilter: () => {
         l.value = ["", ""], D();
       },
-      openFilter: u,
+      openFilter: h,
       resetFilter: () => t(v.UPDATE, { ...e, value: e.defaultValue })
     };
   }
 });
-function Ul(e, t, n, l, s, i) {
-  const o = y("bento-input-field"), r = y("bento-base-filter");
-  return p(), A(r, oe(e.$props, {
+function Nl(e, t, n, l, o, i) {
+  const s = y("bento-input-field"), r = y("bento-base-filter");
+  return b(), $(r, se(e.$props, {
     "disable-apply-button": e.isApplyButtonDisabled,
     "disable-secondary-button": e.isSecondaryButtonDisabled,
     "button-label": e.buttonLabel,
@@ -1537,32 +1668,32 @@ function Ul(e, t, n, l, s, i) {
     onOpen: e.openFilter,
     onReset: e.resetFilter
   }), {
-    default: m(() => [
-      L("div", {
-        class: ve(["b-range-filter", e.conditionalClasses]),
-        onKeydown: t[0] || (t[0] = be((...a) => e.updateFilter && e.updateFilter(...a), ["enter"]))
+    default: p(() => [
+      k("div", {
+        class: ie(["b-range-filter", e.conditionalClasses]),
+        onKeydown: t[0] || (t[0] = de((...a) => e.updateFilter && e.updateFilter(...a), ["enter"]))
       }, [
-        C(o, {
+        g(s, {
           ref: "inputTextRef",
           value: e.internalFilterValue ? e.internalFilterValue[0] : "",
           type: "number",
           "aria-label": e.$t("from").toString(),
           onInput: e.updateFrom
         }, {
-          default: m(() => [
-            w(V(e.$t("from")), 1)
+          default: p(() => [
+            O(R(e.$t("from")), 1)
           ]),
           _: 1
         }, 8, ["value", "aria-label", "onInput"]),
-        C(o, {
+        g(s, {
           class: "b-range-filter__input-field",
           value: e.internalFilterValue ? e.internalFilterValue[1] : "",
           type: "number",
           "aria-label": e.$t("to").toString(),
           onInput: e.updateTo
         }, {
-          default: m(() => [
-            w(V(e.$t("to")), 1)
+          default: p(() => [
+            O(R(e.$t("to")), 1)
           ]),
           _: 1
         }, 8, ["value", "aria-label", "onInput"])
@@ -1571,11 +1702,11 @@ function Ul(e, t, n, l, s, i) {
     _: 1
   }, 16, ["disable-apply-button", "disable-secondary-button", "button-label", "button-secondary-label", "only-slot", "onApply", "onClear", "onOpen", "onReset"]);
 }
-const mt = /* @__PURE__ */ M(El, [["render", Ul], ["__scopeId", "data-v-a4d1d149"]]);
-var Be = /* @__PURE__ */ ((e) => (e.INPUT = "input", e))(Be || {});
-const Pl = j({
+const mt = /* @__PURE__ */ M(wl, [["render", Nl], ["__scopeId", "data-v-a4d1d149"]]);
+var De = /* @__PURE__ */ ((e) => (e.INPUT = "input", e))(De || {});
+const Ml = N({
   name: "base-filter-button",
-  components: { BaseButton: Qe, BentoTypography: ce, ChevronUpIcon: et, ChevronDownIcon: tt },
+  components: { BaseButton: Ze, BentoTypography: fe, ChevronUpIcon: xe, ChevronDownIcon: et },
   props: {
     /**
      * The number of applies values within the filter.
@@ -1600,14 +1731,14 @@ const Pl = j({
      */
     bold: { type: Boolean, default: !1 }
   },
-  emits: [Ve.CLICK],
+  emits: [Re.CLICK],
   setup(e, { slots: t, emit: n, attrs: l }) {
-    const s = b(() => t.default ? Xe(t)("default") : null), i = Ze({ ariaLabel: s }), o = K(null), r = b(() => {
-      var u;
+    const o = f(() => t.default ? Qe(t)("default") : null), i = We({ ariaLabel: o }), s = K(null), r = f(() => {
+      var h;
       return {
-        "aria-controls": (u = l["aria-controls"]) == null ? void 0 : u.toString()
+        "aria-controls": (h = l["aria-controls"]) == null ? void 0 : h.toString()
       };
-    }), a = b(() => ({
+    }), a = f(() => ({
       ["b-base-filter-button--with-chevron"]: e.hasChevron,
       ["b-base-filter-button--filter-open"]: e.isFilterOpen
     }));
@@ -1618,68 +1749,68 @@ const Pl = j({
       conditionalClasses: a,
       // Methods
       onClickButton: () => {
-        e.disabled || n(Ve.CLICK);
+        e.disabled || n(Re.CLICK);
       },
-      hasSlot: xe(t),
+      hasSlot: Xe(t),
       // Refs
-      baseFilterButtonRef: o
+      baseFilterButtonRef: s
     };
   }
 });
-const kl = { class: "b-base-filter-button__default-container" }, Rl = { class: "b-base-filter-button__label-container" }, Vl = {
+const Hl = { class: "b-base-filter-button__default-container" }, ql = { class: "b-base-filter-button__label-container" }, Kl = {
   key: 0,
   class: "b-base-filter-button__counter-wrapper"
 };
-function Ll(e, t, n, l, s, i) {
-  const o = y("bento-typography"), r = y("chevron-up-icon"), a = y("chevron-down-icon"), f = y("base-button");
-  return p(), A(f, {
+function jl(e, t, n, l, o, i) {
+  const s = y("bento-typography"), r = y("chevron-up-icon"), a = y("chevron-down-icon"), u = y("base-button");
+  return b(), $(u, {
     ref: "baseFilterButtonRef",
-    class: ve(["b-base-filter-button", e.conditionalClasses]),
+    class: ie(["b-base-filter-button", e.conditionalClasses]),
     disabled: e.disabled,
     "aria-label": e.computedAriaLabel,
     "aria-controls": e.ariaAttributes["aria-controls"],
     type: "button",
     onClick: e.onClickButton
-  }, $e({
-    default: m(() => [
-      L("div", kl, [
-        L("div", Rl, [
-          C(o, {
+  }, Ae({
+    default: p(() => [
+      k("div", Hl, [
+        k("div", ql, [
+          g(s, {
             el: "span",
             variant: "body",
             stronger: e.bold,
             class: "b-base-filter-button__label"
           }, {
-            default: m(() => [
-              re(e.$slots, "default", {}, void 0, !0)
+            default: p(() => [
+              oe(e.$slots, "default", {}, void 0, !0)
             ]),
             _: 3
           }, 8, ["stronger"])
         ]),
-        e.amountAppliedValues && !e.hasChevron ? (p(), k("div", Vl, [
-          C(o, {
+        e.amountAppliedValues && !e.hasChevron ? (b(), P("div", Kl, [
+          g(s, {
             class: "b-base-filter-button__counter",
             el: "span",
             variant: "body",
             stronger: ""
           }, {
-            default: m(() => [
-              w(V(e.amountAppliedValues), 1)
+            default: p(() => [
+              O(R(e.amountAppliedValues), 1)
             ]),
             _: 1
           })
-        ])) : z("", !0)
+        ])) : w("", !0)
       ])
     ]),
     _: 2
   }, [
     e.hasChevron ? {
       name: "iconRight",
-      fn: m(() => [
-        e.isFilterOpen ? (p(), A(r, {
+      fn: p(() => [
+        e.isFilterOpen ? (b(), $(r, {
           key: 0,
           "aria-hidden": "true"
-        })) : (p(), A(a, {
+        })) : (b(), $(a, {
           key: 1,
           "aria-hidden": "true"
         }))
@@ -1688,9 +1819,9 @@ function Ll(e, t, n, l, s, i) {
     } : void 0
   ]), 1032, ["class", "disabled", "aria-label", "aria-controls", "onClick"]);
 }
-const Ol = /* @__PURE__ */ M(Pl, [["render", Ll], ["__scopeId", "data-v-af9efc73"]]), Nl = j({
+const Yl = /* @__PURE__ */ M(Ml, [["render", jl], ["__scopeId", "data-v-af9efc73"]]), zl = N({
   name: "all-filters-modal-button",
-  components: { BaseFilterButton: Ol },
+  components: { BaseFilterButton: Yl },
   props: {
     /**
      * Button label to be displayed
@@ -1712,7 +1843,7 @@ const Ol = /* @__PURE__ */ M(Pl, [["render", Ll], ["__scopeId", "data-v-af9efc73
   emits: ["click"],
   setup(e, { emit: t }) {
     return {
-      conditionalClasses: b(() => ({
+      conditionalClasses: f(() => ({
         ["b-all-filters-modal-button--with-counter"]: e.appliedFiltersCount,
         ["b-all-filters-modal-button--filter-open"]: e.isFilterOpen
       })),
@@ -1722,51 +1853,48 @@ const Ol = /* @__PURE__ */ M(Pl, [["render", Ll], ["__scopeId", "data-v-af9efc73
     };
   }
 });
-function wl(e, t, n, l, s, i) {
-  const o = y("base-filter-button");
-  return p(), A(o, {
-    class: ve(["b-all-filters-modal-button", e.conditionalClasses]),
+function Jl(e, t, n, l, o, i) {
+  const s = y("base-filter-button");
+  return b(), $(s, {
+    class: ie(["b-all-filters-modal-button", e.conditionalClasses]),
     "amount-applied-values": e.appliedFiltersCount,
     "is-filter-open": e.isFilterOpen,
     disabled: e.disabled,
     onClick: e.onClick
   }, {
-    default: m(() => [
-      w(V(e.label), 1)
+    default: p(() => [
+      O(R(e.label), 1)
     ]),
     _: 1
   }, 8, ["class", "amount-applied-values", "is-filter-open", "disabled", "onClick"]);
 }
-const Ml = /* @__PURE__ */ M(Nl, [["render", wl], ["__scopeId", "data-v-b96a672f"]]);
+const Gl = /* @__PURE__ */ M(zl, [["render", Jl], ["__scopeId", "data-v-b96a672f"]]);
 let je = 0;
-const Hl = {
+const Wl = {
   beforeCreate() {
     this.uuid = je.toString(), je += 1;
   }
-}, _t = (e) => (Ge("data-v-6a35173c"), e = e(), We(), e), ql = { key: 0 }, Kl = /* @__PURE__ */ _t(() => /* @__PURE__ */ L("path", {
+}, Zl = { key: 0 }, Ql = /* @__PURE__ */ k("path", {
   fill: "#00112C",
-  "fill-rule": "evenodd",
-  d: "M12.6465 4.58337C12.32 3.42912 11.2588 2.58337 10 2.58337C8.74122 2.58337 7.67998 3.42912 7.35352 4.58337H2C1.58579 4.58337 1.25 4.91916 1.25 5.33337C1.25 5.74759 1.58579 6.08337 2 6.08337H7.35352C7.67998 7.23763 8.74122 8.08337 10 8.08337C11.2588 8.08337 12.32 7.23763 12.6465 6.08337H14C14.4142 6.08337 14.75 5.74759 14.75 5.33337C14.75 4.91916 14.4142 4.58337 14 4.58337H12.6465ZM11.25 5.33337C11.25 4.64302 10.6904 4.08337 10 4.08337C9.30964 4.08337 8.75 4.64302 8.75 5.33337C8.75 6.02373 9.30964 6.58337 10 6.58337C10.6904 6.58337 11.25 6.02373 11.25 5.33337Z",
-  "clip-rule": "evenodd"
-}, null, -1)), jl = /* @__PURE__ */ _t(() => /* @__PURE__ */ L("path", {
+  d: "M12.6465 4.58337C12.32 3.42912 11.2588 2.58337 10 2.58337C8.74122 2.58337 7.67998 3.42912 7.35352 4.58337H1.25V6.08337H7.35352C7.67998 7.23763 8.74122 8.08337 10 8.08337C11.2588 8.08337 12.32 7.23763 12.6465 6.08337H14.75V4.58337H12.6465ZM11.25 5.33337C11.25 6.02373 10.6904 6.58337 10 6.58337C9.30964 6.58337 8.75 6.02373 8.75 5.33337C8.75 4.64302 9.30964 4.08337 10 4.08337C10.6904 4.08337 11.25 4.64302 11.25 5.33337Z"
+}, null, -1), Xl = /* @__PURE__ */ k("path", {
   fill: "#00112C",
-  "fill-rule": "evenodd",
-  d: "M4 7.91675C5.25878 7.91675 6.32002 8.7625 6.64648 9.91675H14C14.4142 9.91675 14.75 10.2525 14.75 10.6667C14.75 11.081 14.4142 11.4167 14 11.4167H6.64648C6.32002 12.571 5.25878 13.4167 4 13.4167C2.48122 13.4167 1.25 12.1855 1.25 10.6667C1.25 9.14796 2.48122 7.91675 4 7.91675ZM5.25 10.6667C5.25 9.97639 4.69036 9.41675 4 9.41675C3.30964 9.41675 2.75 9.97639 2.75 10.6667C2.75 11.3571 3.30964 11.9167 4 11.9167C4.69036 11.9167 5.25 11.3571 5.25 10.6667Z",
-  "clip-rule": "evenodd"
-}, null, -1));
-function Yl(e, t, n, l, s, i) {
-  return p(), k("svg", oe({ role: "img" }, e.$attrs, {
+  d: "M4 7.91687C5.25878 7.91687 6.32002 8.76262 6.64648 9.91687H14.75V11.4169H6.64648C6.32002 12.5711 5.25878 13.4169 4 13.4169C2.48122 13.4169 1.25 12.1857 1.25 10.6669C1.25 9.14809 2.48122 7.91687 4 7.91687ZM5.25 10.6669C5.25 9.97651 4.69036 9.41687 4 9.41687C3.30964 9.41687 2.75 9.97651 2.75 10.6669C2.75 11.3572 3.30964 11.9169 4 11.9169C4.69036 11.9169 5.25 11.3572 5.25 10.6669Z"
+}, null, -1);
+function xl(e, t, n, l, o, i) {
+  return b(), P("svg", se({ role: "img" }, e.$attrs, {
+    class: "ui-assets-icons-16",
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     fill: "none"
   }), [
-    e.$attrs["svg-title"] ? (p(), k("title", ql, V(e.$attrs["svg-title"]), 1)) : z("", !0),
-    Kl,
-    jl
+    e.$attrs["svg-title"] ? (b(), P("title", Zl, R(e.$attrs["svg-title"]), 1)) : w("", !0),
+    Ql,
+    Xl
   ], 16);
 }
-const zl = /* @__PURE__ */ M(Hl, [["render", Yl], ["__scopeId", "data-v-6a35173c"]]), Ye = {
+const en = /* @__PURE__ */ M(Wl, [["render", xl]]), Ye = {
   "en-US": {
     all: "All",
     activeFilters: "Active filters",
@@ -1779,28 +1907,28 @@ const zl = /* @__PURE__ */ M(Hl, [["render", Yl], ["__scopeId", "data-v-6a35173c
     otherFilters: "Other filters",
     searchBar: "Search bar"
   }
-}, Jl = j({
+}, tn = N({
   i18n: { messages: Ye },
   name: "all-filters-modal",
   components: {
-    AllFiltersModalButton: Ml,
+    AllFiltersModalButton: Gl,
     BentoBooleanFilter: yt,
-    BentoButton: Rt,
+    BentoButton: Ot,
     BentoDateFilter: ut,
     BentoDateRangeFilter: dt,
     BentoInputFilter: rt,
-    BentoModal: Pt,
+    BentoModal: Vt,
     BentoRangeFilter: mt,
-    BentoSearchBar: he,
+    BentoSearchBar: Ce,
     BentoSelectAvatarFilter: ct,
     BentoSelectCurrencyFilter: bt,
     BentoSelectCountryFilter: ft,
     BentoSelectFilter: X,
     BentoSelectPaymentMethodFilter: pt,
     BentoSelectTagFilter: vt,
-    BentoTypography: ce,
-    FilterBarButton: Te,
-    SlidersIcon: zl
+    BentoTypography: fe,
+    FilterBarButton: Ee,
+    SlidersIcon: en
   },
   props: {
     /**
@@ -1828,53 +1956,53 @@ const zl = /* @__PURE__ */ M(Hl, [["render", Yl], ["__scopeId", "data-v-6a35173c
       default: () => []
     }
   },
-  emits: [Be.INPUT],
+  emits: [De.INPUT],
   setup(e, { emit: t }) {
-    const n = Je({ value: e.value }), l = Ie("all-filters-modal"), s = K([]), i = K(!1), o = K(0), r = K(null), a = K(""), { t: f } = ue({ messages: Ye }), u = nt(a, J(n, "value")), S = K({});
-    De(() => {
-      S.value = [];
-    }), Fe(
+    const n = Ge({ value: e.value }), l = Te("all-filters-modal"), o = K([]), i = K(!1), s = K(0), r = K(null), a = K(""), { t: u } = ce({ messages: Ye }), h = lt(a, J(n, "value")), m = K({});
+    Ie(() => {
+      m.value = [];
+    }), _e(
       () => e.value,
       () => {
         n.value = e.value;
       }
     );
-    const F = (c) => (
+    const _ = (c) => (
       /* eslint-disable-next-line no-nested-ternary */
-      c.sort((T, E) => T.label > E.label ? 1 : E.label > T.label ? -1 : 0)
-    ), d = b(
-      () => F(
-        u.value.filter(
+      c.sort((I, U) => I.label > U.label ? 1 : U.label > I.label ? -1 : 0)
+    ), d = f(
+      () => _(
+        h.value.filter(
           (c) => {
-            var T, E;
-            return Array.isArray(c.value) ? ((T = c.value) == null ? void 0 : T.length) && ((E = c.value) == null ? void 0 : E.find((Y) => Y !== "")) : c.value;
+            var I, U;
+            return Array.isArray(c.value) ? ((I = c.value) == null ? void 0 : I.length) && ((U = c.value) == null ? void 0 : U.find((z) => z !== "")) : c.value;
           }
         )
       )
-    ), D = b(
-      () => F(
-        u.value.filter(
+    ), D = f(
+      () => _(
+        h.value.filter(
           (c) => {
-            var T, E;
-            return Array.isArray(c.value) ? ((T = c.value) == null ? void 0 : T.length) === 0 || ((E = c.value) == null ? void 0 : E.every((Y) => Y === "")) : !c.value;
+            var I, U;
+            return Array.isArray(c.value) ? ((I = c.value) == null ? void 0 : I.length) === 0 || ((U = c.value) == null ? void 0 : U.every((z) => z === "")) : !c.value;
           }
         )
       )
-    ), I = b(() => {
+    ), T = f(() => {
       var c;
-      return a.value && ((c = u.value) == null ? void 0 : c.length) === 0;
-    }), $ = b(() => n.value[o.value]), U = () => {
-      const c = d.value.length ? d.value[0] : D.value[0], T = n.value.findIndex(
-        (E) => E.label === c.label && E.field === c.field
+      return a.value && ((c = h.value) == null ? void 0 : c.length) === 0;
+    }), A = f(() => n.value[s.value]), E = () => {
+      const c = d.value.length ? d.value[0] : D.value[0], I = n.value.findIndex(
+        (U) => U.label === c.label && U.field === c.field
       );
-      o.value = T;
+      s.value = I;
     };
-    Bt(() => {
-      U();
+    Je(() => {
+      E();
     });
-    const H = b(
+    const j = f(
       () => n.value.map((c) => {
-        var T, E, Y, le, ee, Ee;
+        var I, U, z, ne, ee, Ue;
         switch (c.type) {
           case Q.SELECT:
           case Q.SELECT_AVATAR:
@@ -1882,12 +2010,12 @@ const zl = /* @__PURE__ */ M(Hl, [["render", Yl], ["__scopeId", "data-v-6a35173c
           case Q.SELECT_CURRENCY:
           case Q.SELECT_PAYMENT_METHOD:
           case Q.SELECT_TAG:
-            switch ((T = c.options) == null ? void 0 : T.multiple) {
+            switch ((I = c.options) == null ? void 0 : I.multiple) {
               case !0:
                 return {
                   label: c.label,
                   field: c.field,
-                  count: (E = c.value) != null && E.length ? (Y = c.value) == null ? void 0 : Y.length : null
+                  count: (U = c.value) != null && U.length ? (z = c.value) == null ? void 0 : z.length : null
                 };
               default:
                 return {
@@ -1900,13 +2028,13 @@ const zl = /* @__PURE__ */ M(Hl, [["render", Yl], ["__scopeId", "data-v-6a35173c
             return {
               label: c.label,
               field: c.field,
-              count: ((le = c.value) == null ? void 0 : le.startDate) != null && ((ee = c.value) == null ? void 0 : ee.endDate) != null ? 1 : null
+              count: ((ne = c.value) == null ? void 0 : ne.startDate) != null && ((ee = c.value) == null ? void 0 : ee.endDate) != null ? 1 : null
             };
           case Q.RANGE:
             return {
               label: c.label,
               field: c.field,
-              count: (Ee = c.value) != null && Ee.find((Ft) => Ft !== "") ? 1 : null
+              count: (Ue = c.value) != null && Ue.find((ht) => ht !== "") ? 1 : null
             };
           case Q.INPUT:
           case Q.BOOLEAN:
@@ -1919,131 +2047,131 @@ const zl = /* @__PURE__ */ M(Hl, [["render", Yl], ["__scopeId", "data-v-6a35173c
             };
         }
       })
-    ), g = b(
+    ), S = f(
       () => {
         var c;
-        return Array.isArray($.value.value) ? ((c = $.value) == null ? void 0 : c.value.length) && $.value.value.find((T) => T !== "") : !!n.value[o.value].value;
+        return Array.isArray(A.value.value) ? ((c = A.value) == null ? void 0 : c.value.length) && A.value.value.find((I) => I !== "") : !!n.value[s.value].value;
       }
-    ), _ = b(
+    ), F = f(
       () => {
         var c;
         return (
           // eslint-disable-next-line no-return-assign, no-param-reassign
-          (c = H.value) == null ? void 0 : c.reduce((T, E) => T += E.count, 0)
+          (c = j.value) == null ? void 0 : c.reduce((I, U) => I += U.count, 0)
         );
       }
     ), B = () => {
       i.value ? i.value = !1 : i.value = !0;
-    }, R = (c) => {
-      var E, Y, le;
-      const T = H.value.find((ee) => ee.field === c.field).count;
-      return c.type.includes("BentoSelect") && ((E = c.options) != null && E.multiple) && T === ((le = (Y = c.options) == null ? void 0 : Y.listboxItems) == null ? void 0 : le.length) ? f("all") : T;
-    }, G = (c, T) => {
-      o.value = n.value.findIndex(
-        (E) => E.label === c && E.field === T
+    }, L = (c) => {
+      var U, z, ne;
+      const I = j.value.find((ee) => ee.field === c.field).count;
+      return c.type.includes("BentoSelect") && ((U = c.options) != null && U.multiple) && I === ((ne = (z = c.options) == null ? void 0 : z.listboxItems) == null ? void 0 : ne.length) ? u("all") : I;
+    }, G = (c, I) => {
+      s.value = n.value.findIndex(
+        (U) => U.label === c && U.field === I
       );
-    }, q = () => {
+    }, Y = () => {
       a.value = "";
-    }, P = () => {
-      i.value = !1, n.value = e.value, q(), U();
-    }, O = (c) => {
-      const T = n.value.map(({ value: E, ...Y }, le) => le === o.value ? { value: c.value, ...Y } : { value: E, ...Y });
-      n.value = T;
-    }, N = () => {
-      O({
-        field: $.value.field,
-        label: $.value.label,
-        type: $.value.type,
+    }, V = () => {
+      i.value = !1, n.value = e.value, Y(), E();
+    }, H = (c) => {
+      const I = n.value.map(({ value: U, ...z }, ne) => ne === s.value ? { value: c.value, ...z } : { value: U, ...z });
+      n.value = I;
+    }, q = () => {
+      H({
+        field: A.value.field,
+        label: A.value.label,
+        type: A.value.type,
         value: void 0
       });
     }, Z = () => {
-      n.value = n.value.map(({ value: c, ...T }) => ({
-        ...T,
+      n.value = n.value.map(({ value: c, ...I }) => ({
+        ...I,
         value: void 0
       }));
     }, W = () => {
-      t(Be.INPUT, n.value), i.value = !1;
-    }, h = b(
+      t(De.INPUT, n.value), i.value = !1;
+    }, C = f(
       () => JSON.stringify(n.value) === JSON.stringify(e.value)
-    ), x = b(() => [
+    ), x = f(() => [
       {
-        title: f("applyAll"),
-        disabled: h.value,
+        title: u("applyAll"),
+        disabled: C.value,
         event: W
       },
       {
-        title: f("cancel"),
-        event: P
+        title: u("cancel"),
+        event: V
       },
       {
-        title: f("clearAll"),
-        disabled: !_.value,
+        title: u("clearAll"),
+        disabled: !F.value,
         event: Z
       }
     ]);
     return {
       // Enums
-      BentoModalEvent: kt,
+      BentoModalEvent: Rt,
       // Values
       allFiltersModalUniqueId: l,
-      allFiltersModalFiltersSection: s,
-      allFiltersModalFilterButtons: S,
-      numberOfActiveFilters: _,
-      isEmptyResultForSearchFilter: I,
+      allFiltersModalFiltersSection: o,
+      allFiltersModalFilterButtons: m,
+      numberOfActiveFilters: F,
+      isEmptyResultForSearchFilter: T,
       isModalOpen: i,
-      isClearButtonEnabled: g,
+      isClearButtonEnabled: S,
       activeFilters: d,
       otherFilters: D,
       modalActions: x,
-      selectedFilter: $,
+      selectedFilter: A,
       selectedFilterRef: r,
       filters: n,
-      computedCounts: H,
+      computedCounts: j,
       searchTerm: a,
       // Methods
       onClickAllFiltersModal: B,
-      getFilterCount: R,
-      cancel: P,
+      getFilterCount: L,
+      cancel: V,
       selectFilter: G,
-      clearFilter: N,
-      updateFilter: O,
-      onSearchbarClear: q,
+      clearFilter: q,
+      updateFilter: H,
+      onSearchbarClear: Y,
       onKeydownRight: () => {
-        Lt(1, r.value.$el).focus();
+        wt(1, r.value.$el).focus();
       },
       onKeydownLeft: () => {
-        S.value[$.value.label].$el.focus();
+        m.value[A.value.label].$el.focus();
       }
     };
   }
 });
-const Gl = { class: "b-all-filters-modal" }, Wl = {
+const ln = { class: "b-all-filters-modal" }, nn = {
   key: 0,
   class: "b-all-filters-modal__empty-search-message"
-}, Zl = {
+}, an = {
   key: 1,
   class: "b-all-filters-modal__filters-section"
-}, Ql = ["aria-labelledby"], Xl = {
+}, on = ["aria-labelledby"], sn = {
   key: 2,
   class: "b-all-filters-modal__filters-section"
-}, xl = ["aria-labelledby"], en = { class: "b-all-filters-modal__selected-filter-text" }, tn = { class: "b-all-filters-modal__selected-filter-component" }, ln = { class: "b-all-filters-modal__clear-button" };
-function nn(e, t, n, l, s, i) {
-  const o = y("sliders-icon"), r = y("filter-bar-button"), a = y("bento-search-bar"), f = y("bento-typography"), u = y("all-filters-modal-button"), S = y("bento-button"), F = y("bento-modal");
-  return p(), k("div", Gl, [
-    C(r, {
+}, rn = ["aria-labelledby"], un = { class: "b-all-filters-modal__selected-filter-text" }, dn = { class: "b-all-filters-modal__selected-filter-component" }, cn = { class: "b-all-filters-modal__clear-button" };
+function bn(e, t, n, l, o, i) {
+  const s = y("sliders-icon"), r = y("filter-bar-button"), a = y("bento-search-bar"), u = y("bento-typography"), h = y("all-filters-modal-button"), m = y("bento-button"), _ = y("bento-modal");
+  return b(), P("div", ln, [
+    g(r, {
       "is-filter-open": e.isModalOpen,
       "applied-filters-count": e.numberOfActiveFilters,
       onClick: e.onClickAllFiltersModal
     }, {
-      iconLeft: m(() => [
-        C(o, { "aria-hidden": "true" })
+      iconLeft: p(() => [
+        g(s, { "aria-hidden": "true" })
       ]),
-      default: m(() => [
-        w(V(e.$t("allFilters")) + " ", 1)
+      default: p(() => [
+        O(R(e.$t("allFilters")) + " ", 1)
       ]),
       _: 1
     }, 8, ["is-filter-open", "applied-filters-count", "onClick"]),
-    C(F, {
+    g(_, {
       class: "'b-all-filters-modal__modal'",
       "is-open": e.isModalOpen,
       "with-column-layout": !0,
@@ -2053,50 +2181,50 @@ function nn(e, t, n, l, s, i) {
       "hide-close-button": "",
       onCloseModal: e.cancel
     }, {
-      default: m(() => [
-        w(V(e.$t("allFilters")), 1)
+      default: p(() => [
+        O(R(e.$t("allFilters")), 1)
       ]),
-      "content-col-1": m(() => [
-        L("div", {
+      "content-col-1": p(() => [
+        k("div", {
           ref: "allFiltersModalFiltersSection",
           class: "b-all-filters-modal__filters",
-          onKeydown: t[1] || (t[1] = be((...d) => e.onKeydownRight && e.onKeydownRight(...d), ["right"]))
+          onKeydown: t[1] || (t[1] = de((...d) => e.onKeydownRight && e.onKeydownRight(...d), ["right"]))
         }, [
-          C(a, {
+          g(a, {
             class: "b-all-filters-modal__search-bar",
             value: e.searchTerm,
             "input-field-aria-label": e.$t("searchBar").toString(),
             onInput: t[0] || (t[0] = (d) => e.searchTerm = d),
             onClear: e.onSearchbarClear
           }, null, 8, ["value", "input-field-aria-label", "onClear"]),
-          e.isEmptyResultForSearchFilter ? (p(), k("div", Wl, [
-            C(f, { el: "span" }, {
-              default: m(() => [
-                w(V(e.$t("noFiltersMatchThisSearch")), 1)
+          e.isEmptyResultForSearchFilter ? (b(), P("div", nn, [
+            g(u, { el: "span" }, {
+              default: p(() => [
+                O(R(e.$t("noFiltersMatchThisSearch")), 1)
               ]),
               _: 1
             })
-          ])) : z("", !0),
-          e.activeFilters.length ? (p(), k("div", Zl, [
-            C(f, {
+          ])) : w("", !0),
+          e.activeFilters.length ? (b(), P("div", an, [
+            g(u, {
               id: `active-filters-${e.allFiltersModalUniqueId}`,
               class: "b-all-filters-modal__filters-section-title",
               el: "span",
               variant: "caption"
             }, {
-              default: m(() => [
-                w(V(e.$t("activeFilters")), 1)
+              default: p(() => [
+                O(R(e.$t("activeFilters")), 1)
               ]),
               _: 1
             }, 8, ["id"]),
-            L("ul", {
+            k("ul", {
               class: "b-all-filters-modal__filters-list",
               "aria-labelledby": `active-filters-${e.allFiltersModalUniqueId}`
             }, [
-              (p(!0), k(fe, null, pe(e.activeFilters, (d) => (p(), k("li", {
+              (b(!0), P(pe, null, ve(e.activeFilters, (d) => (b(), P("li", {
                 key: `${d.label}-${d.field}`
               }, [
-                C(u, {
+                g(h, {
                   ref_for: !0,
                   ref: (D) => e.allFiltersModalFilterButtons[d.label] = D,
                   label: d.label,
@@ -2105,29 +2233,29 @@ function nn(e, t, n, l, s, i) {
                   onClick: (D) => e.selectFilter(d.label, d.field)
                 }, null, 8, ["label", "applied-filters-count", "is-filter-open", "onClick"])
               ]))), 128))
-            ], 8, Ql)
-          ])) : z("", !0),
-          e.otherFilters.length ? (p(), k("div", Xl, [
-            e.activeFilters.length ? (p(), A(f, {
+            ], 8, on)
+          ])) : w("", !0),
+          e.otherFilters.length ? (b(), P("div", sn, [
+            e.activeFilters.length ? (b(), $(u, {
               key: 0,
               id: `other-filters-${e.allFiltersModalUniqueId}`,
               class: "b-all-filters-modal__filters-section-title",
               el: "span",
               variant: "caption"
             }, {
-              default: m(() => [
-                w(V(e.$t("otherFilters")), 1)
+              default: p(() => [
+                O(R(e.$t("otherFilters")), 1)
               ]),
               _: 1
-            }, 8, ["id"])) : z("", !0),
-            L("ul", {
+            }, 8, ["id"])) : w("", !0),
+            k("ul", {
               class: "b-all-filters-modal__filters-list",
               "aria-labelledby": `other-filters-${e.allFiltersModalUniqueId}`
             }, [
-              (p(!0), k(fe, null, pe(e.otherFilters, (d) => (p(), k("li", {
+              (b(!0), P(pe, null, ve(e.otherFilters, (d) => (b(), P("li", {
                 key: `${d.label}-${d.field}`
               }, [
-                C(u, {
+                g(h, {
                   ref_for: !0,
                   ref: (D) => e.allFiltersModalFilterButtons[d.label] = D,
                   label: d.label,
@@ -2136,40 +2264,40 @@ function nn(e, t, n, l, s, i) {
                   onClick: (D) => e.selectFilter(d.label, d.field)
                 }, null, 8, ["label", "applied-filters-count", "is-filter-open", "onClick"])
               ]))), 128))
-            ], 8, xl)
-          ])) : z("", !0)
+            ], 8, rn)
+          ])) : w("", !0)
         ], 544)
       ]),
-      "content-col-2": m(() => [
-        L("div", {
+      "content-col-2": p(() => [
+        k("div", {
           class: "b-all-filters-modal__selected-filter-content",
-          onKeydown: t[2] || (t[2] = be((...d) => e.onKeydownLeft && e.onKeydownLeft(...d), ["left"]))
+          onKeydown: t[2] || (t[2] = de((...d) => e.onKeydownLeft && e.onKeydownLeft(...d), ["left"]))
         }, [
-          L("div", en, [
-            C(f, {
+          k("div", un, [
+            g(u, {
               el: "div",
               variant: "title",
               medium: ""
             }, {
-              default: m(() => [
-                w(V(e.selectedFilter.label), 1)
+              default: p(() => [
+                O(R(e.selectedFilter.label), 1)
               ]),
               _: 1
             }),
-            e.selectedFilter.description ? (p(), A(f, {
+            e.selectedFilter.description ? (b(), $(u, {
               key: 0,
               el: "div",
               variant: "body",
               wide: ""
             }, {
-              default: m(() => [
-                w(V(e.selectedFilter.description), 1)
+              default: p(() => [
+                O(R(e.selectedFilter.description), 1)
               ]),
               _: 1
-            })) : z("", !0)
+            })) : w("", !0)
           ]),
-          L("div", tn, [
-            (p(), A(Ae(e.selectedFilter.type), {
+          k("div", dn, [
+            (b(), $(Be(e.selectedFilter.type), {
               ref: "selectedFilterRef",
               key: e.selectedFilter.field,
               field: e.selectedFilter.field,
@@ -2181,14 +2309,14 @@ function nn(e, t, n, l, s, i) {
               onInput: e.updateFilter
             }, null, 40, ["field", "label", "options", "value", "default-value", "onInput"]))
           ]),
-          L("div", ln, [
-            C(S, {
+          k("div", cn, [
+            g(m, {
               variant: "secondary",
               disabled: !e.isClearButtonEnabled,
               onClick: e.clearFilter
             }, {
-              default: m(() => [
-                w(V(e.$t("clear")), 1)
+              default: p(() => [
+                O(R(e.$t("clear")), 1)
               ]),
               _: 1
             }, 8, ["disabled", "onClick"])
@@ -2199,7 +2327,7 @@ function nn(e, t, n, l, s, i) {
     }, 8, ["is-open", "actions", "onCloseModal"])
   ]);
 }
-const an = /* @__PURE__ */ M(Jl, [["render", nn], ["__scopeId", "data-v-2653c56a"]]), ze = {
+const fn = /* @__PURE__ */ M(tn, [["render", bn], ["__scopeId", "data-v-2653c56a"]]), ze = {
   "en-US": {
     clearAll: "Clear all",
     filtersHaveBeenCleared: "Filters have been cleared.",
@@ -2208,11 +2336,11 @@ const an = /* @__PURE__ */ M(Jl, [["render", nn], ["__scopeId", "data-v-2653c56a
     resetAll: "Reset all",
     searchBar: "Search bar"
   }
-}, on = j({
+}, pn = N({
   i18n: { messages: ze },
   name: "bento-filter-bar",
   components: {
-    AllFiltersModal: an,
+    AllFiltersModal: fn,
     BentoBooleanFilter: yt,
     BentoDateFilter: ut,
     BentoDateRangeFilter: dt,
@@ -2224,9 +2352,10 @@ const an = /* @__PURE__ */ M(Jl, [["render", nn], ["__scopeId", "data-v-2653c56a
     BentoSelectCurrencyFilter: bt,
     BentoSelectPaymentMethodFilter: pt,
     BentoSelectTagFilter: vt,
-    BentoSearchBar: he,
-    FilterBarButton: Te,
-    RefreshIcon: Gt
+    BentoSearchBar: Ce,
+    FilterBarButton: Ee,
+    FixedScroller: Qt,
+    RefreshIcon: Zt
   },
   props: {
     /**
@@ -2254,7 +2383,7 @@ const an = /* @__PURE__ */ M(Jl, [["render", nn], ["__scopeId", "data-v-2653c56a
      * If the value is non-existant (null or undefined) the search bar won't be enabled.
      */
     searchTerm: {
-      type: he.props.value.type,
+      type: Ce.props.value.type,
       default: void 0
     },
     /**
@@ -2303,158 +2432,228 @@ const an = /* @__PURE__ */ M(Jl, [["render", nn], ["__scopeId", "data-v-2653c56a
     }
   },
   emits: [
-    _e.INPUT,
-    _e.UPDATE_FILTER_VALUES,
-    de.CLEAR,
-    de.INPUT,
-    de.UPDATE
+    he.INPUT,
+    he.UPDATE_FILTER_VALUES,
+    be.CLEAR,
+    be.INPUT,
+    be.UPDATE
   ],
   setup(e, { emit: t }) {
-    const { t: n } = ue({ messages: ze }), l = b(
+    const { t: n } = ce({ messages: ze }), l = f(
       () => {
-        var g, _;
-        return (_ = ((g = e.config) == null ? void 0 : g.length) > 0 ? e.config : e.value) == null ? void 0 : _.map((B) => {
+        var S, F;
+        return (F = ((S = e.config) == null ? void 0 : S.length) > 0 ? e.config : e.value) == null ? void 0 : F.map((B) => {
           var G;
-          const R = (G = e.filterValues.find(({ field: q }) => q === B.field)) == null ? void 0 : G.value;
-          return { ...B, value: R !== void 0 ? R : B == null ? void 0 : B.value };
+          const L = (G = e.filterValues.find(({ field: Y }) => Y === B.field)) == null ? void 0 : G.value;
+          return { ...B, value: L !== void 0 ? L : B == null ? void 0 : B.value };
         });
       }
-    ), s = Ut(), i = b(() => n("searchBar")), o = b(() => l.value.some(
-      ({ visible: _ }) => _ != null
-    ) ? l.value.some(({ visible: _ }) => !_) : !1), r = b(
-      () => l.value.filter(({ defaultValue: g }) => g !== void 0)
-    ), a = b(() => l.value.some(
-      ({ visible: _ }) => _ != null
+    ), o = Pt(), i = f(() => n("searchBar")), s = f(() => l.value.some(
+      ({ visible: F }) => F != null
+    ) ? l.value.some(({ visible: F }) => !F) : !1), r = f(
+      () => l.value.filter(({ defaultValue: S }) => S !== void 0)
+    ), a = f(() => l.value.some(
+      ({ visible: F }) => F != null
     ) ? l.value.filter(
-      ({ defaultValue: _, visible: B }) => _ === void 0 && B
-    ) : l.value.filter(({ defaultValue: _ }) => _ === void 0)), f = b(() => e.searchTerm != null), u = b(
-      () => l.value.filter(({ defaultValue: g }) => g == null).some(({ value: g }) => g != null)
-    ), S = b(() => r.value.length === 0 && u.value), F = b(() => r.value.length === 0 ? !1 : !l.value.filter(({ defaultValue: _ }) => _ !== void 0 || _ !== null).every(({ value: _, defaultValue: B }) => JSON.stringify(_) === JSON.stringify(B)) || u.value), d = (g) => {
-      t(_e.INPUT, g), t(
-        _e.UPDATE_FILTER_VALUES,
-        g == null ? void 0 : g.filter(({ value: _ }) => _ !== null || _ !== void 0).map(({ field: _, value: B }) => ({ field: _, value: B }))
+      ({ defaultValue: F, visible: B }) => F === void 0 && B
+    ) : l.value.filter(({ defaultValue: F }) => F === void 0)), u = f(() => e.searchTerm != null), h = f(
+      () => l.value.filter(({ defaultValue: S }) => S == null).some(({ value: S }) => S != null)
+    ), m = f(() => r.value.length === 0 && h.value), _ = f(() => r.value.length === 0 ? !1 : !l.value.filter(({ defaultValue: F }) => F !== void 0 || F !== null).every(({ value: F, defaultValue: B }) => JSON.stringify(F) === JSON.stringify(B)) || h.value), d = (S) => {
+      t(he.INPUT, S), t(
+        he.UPDATE_FILTER_VALUES,
+        S == null ? void 0 : S.filter(({ value: F }) => F !== null || F !== void 0).map(({ field: F, value: B }) => ({ field: F, value: B }))
       );
     };
     return {
       // Values
-      hasHiddenFilters: o,
-      isClearAllVisible: S,
-      isSearchBarEnabled: f,
+      hasHiddenFilters: s,
+      isClearAllVisible: m,
+      isSearchBarEnabled: u,
       searchBarAriaLabel: i,
       persistentFilters: r,
       regularFilters: a,
-      isResetAllVisible: F,
+      isResetAllVisible: _,
       valueAndFilterValuesPropsMerged: l,
       // Events
       updateAllFilters: d,
-      updateFilterHandler: (g) => {
-        const _ = l.value.findIndex(
-          (R) => R.field === g.field
+      updateFilterHandler: (S) => {
+        const F = l.value.findIndex(
+          (L) => L.field === S.field
         ), B = l.value.slice();
-        B[_].value = g.value, d(B);
+        B[F].value = S.value, d(B);
       },
       clearAllFilters: () => {
-        const g = l.value.slice(), _ = l.value.map(({ value: B, ...R }) => ({
-          ...R,
+        const S = l.value.slice(), F = l.value.map(({ value: B, ...L }) => ({
+          ...L,
           value: void 0
         }));
-        s.addToast({
+        o.addToast({
           text: n("filtersHaveBeenCleared"),
           action: {
-            handler: () => d(g),
+            handler: () => d(S),
             text: n("undo")
           }
-        }), d(_);
+        }), d(F);
       },
       onSearchbarClear: () => {
-        t(de.CLEAR);
+        t(be.CLEAR);
       },
-      onSearchbarInput: (g) => {
-        t(de.INPUT, g), t(de.UPDATE, g);
+      onSearchbarInput: (S) => {
+        t(be.INPUT, S), t(be.UPDATE, S);
       },
       resetAllFilters: () => {
-        const g = l.value.slice(), _ = l.value.map(({ defaultValue: B, ...R }) => ({
-          ...R,
+        const S = l.value.slice(), F = l.value.map(({ defaultValue: B, ...L }) => ({
+          ...L,
           defaultValue: B,
           value: B
         }));
-        s.addToast({
+        o.addToast({
           text: n("filtersHaveBeenReset"),
           action: {
-            handler: () => d(g),
+            handler: () => d(S),
             text: n("undo")
           }
-        }), d(_);
+        }), d(F);
       }
     };
   }
 });
-const sn = { class: "b-filter-bar" };
-function rn(e, t, n, l, s, i) {
-  const o = y("bento-search-bar"), r = y("all-filters-modal"), a = y("refresh-icon"), f = y("filter-bar-button");
-  return p(), k("div", sn, [
-    e.isSearchBarEnabled ? (p(), A(o, {
-      key: 0,
-      class: "b-filter-bar__search-bar",
-      "input-field-aria-label": e.searchBarAriaLabel,
-      value: e.searchTerm,
-      condensed: "",
-      onInput: e.onSearchbarInput,
-      onClear: e.onSearchbarClear
-    }, null, 8, ["input-field-aria-label", "value", "onInput", "onClear"])) : z("", !0),
-    e.persistentFilters.length ? (p(!0), k(fe, { key: 1 }, pe(e.persistentFilters, (u) => (p(), A(Ae(u.type), {
-      key: u.field,
-      field: u.field,
-      label: u.label,
-      options: u.options,
-      value: u.value,
-      "default-value": u.defaultValue,
-      onUpdate: e.updateFilterHandler
-    }, null, 40, ["field", "label", "options", "value", "default-value", "onUpdate"]))), 128)) : z("", !0),
-    (p(!0), k(fe, null, pe(e.regularFilters, (u) => (p(), A(Ae(u.type), {
-      key: u.field,
-      field: u.field,
-      label: u.label,
-      options: u.options,
-      value: u.value,
-      onUpdate: e.updateFilterHandler
-    }, null, 40, ["field", "label", "options", "value", "onUpdate"]))), 128)),
-    e.hasHiddenFilters ? (p(), A(r, {
-      key: 2,
-      value: e.valueAndFilterValuesPropsMerged,
-      onInput: e.updateAllFilters
-    }, null, 8, ["value", "onInput"])) : z("", !0),
-    Ce(C(f, { onClick: e.clearAllFilters }, {
-      iconLeft: m(() => [
-        C(a, { "aria-hidden": "true" })
-      ]),
-      default: m(() => [
-        w(V(e.$t("clearAll")) + " ", 1)
-      ]),
-      _: 1
-    }, 8, ["onClick"]), [
-      [ke, e.isClearAllVisible]
-    ]),
-    Ce(C(f, {
-      class: "b-filter-bar__reset-all",
-      onClick: e.resetAllFilters
-    }, {
-      iconLeft: m(() => [
-        C(a, { "aria-hidden": "true" })
-      ]),
-      default: m(() => [
-        w(V(e.$t("resetAll")) + " ", 1)
-      ]),
-      _: 1
-    }, 8, ["onClick"]), [
-      [ke, e.isResetAllVisible]
+const vn = { class: "b-filter-bar" }, yn = { class: "b-filter-bar__container" }, mn = {
+  key: 0,
+  class: "b-filter-bar__before-filters"
+}, hn = { class: "b-filter-bar__filters-container" }, _n = { class: "b-filter-bar__filters" }, Fn = { class: "b-filter-bar__scroller-content" }, gn = {
+  key: 0,
+  class: "b-filter-bar__actions"
+};
+function Cn(e, t, n, l, o, i) {
+  const s = y("bento-search-bar"), r = y("all-filters-modal"), a = y("refresh-icon"), u = y("filter-bar-button"), h = y("fixed-scroller");
+  return b(), P("div", vn, [
+    k("div", yn, [
+      e.isSearchBarEnabled || e.hasHiddenFilters || e.isClearAllVisible || e.isResetAllVisible ? (b(), P("div", mn, [
+        e.isSearchBarEnabled ? (b(), $(s, {
+          key: 0,
+          class: "b-filter-bar__search-bar",
+          "input-field-aria-label": e.searchBarAriaLabel,
+          value: e.searchTerm,
+          condensed: "",
+          onInput: e.onSearchbarInput,
+          onClear: e.onSearchbarClear
+        }, null, 8, ["input-field-aria-label", "value", "onInput", "onClear"])) : w("", !0),
+        e.hasHiddenFilters ? (b(), $(r, {
+          key: 1,
+          class: "b-filter-bar__all-filters-modal",
+          value: e.valueAndFilterValuesPropsMerged,
+          onInput: e.updateAllFilters
+        }, null, 8, ["value", "onInput"])) : w("", !0),
+        Fe(g(u, {
+          class: "b-filter-bar__clear-all",
+          onClick: e.clearAllFilters
+        }, {
+          iconLeft: p(() => [
+            g(a, { "aria-hidden": "true" })
+          ]),
+          default: p(() => [
+            O(R(e.$t("clearAll")) + " ", 1)
+          ]),
+          _: 1
+        }, 8, ["onClick"]), [
+          [ge, e.isClearAllVisible]
+        ]),
+        Fe(g(u, {
+          class: "b-filter-bar__reset-all",
+          onClick: e.resetAllFilters
+        }, {
+          iconLeft: p(() => [
+            g(a, { "aria-hidden": "true" })
+          ]),
+          default: p(() => [
+            O(R(e.$t("resetAll")) + " ", 1)
+          ]),
+          _: 1
+        }, 8, ["onClick"]), [
+          [ge, e.isResetAllVisible]
+        ])
+      ])) : w("", !0),
+      k("div", hn, [
+        k("div", _n, [
+          g(h, { condensed: "" }, {
+            default: p(() => [
+              k("div", Fn, [
+                e.isSearchBarEnabled ? (b(), $(s, {
+                  key: 0,
+                  class: "b-filter-bar__search-bar",
+                  "input-field-aria-label": e.searchBarAriaLabel,
+                  value: e.searchTerm,
+                  condensed: "",
+                  onInput: e.onSearchbarInput,
+                  onClear: e.onSearchbarClear
+                }, null, 8, ["input-field-aria-label", "value", "onInput", "onClear"])) : w("", !0),
+                e.persistentFilters.length ? (b(!0), P(pe, { key: 1 }, ve(e.persistentFilters, (m) => (b(), $(Be(m.type), {
+                  key: m.field,
+                  field: m.field,
+                  label: m.label,
+                  options: m.options,
+                  value: m.value,
+                  "default-value": m.defaultValue,
+                  onUpdate: e.updateFilterHandler
+                }, null, 40, ["field", "label", "options", "value", "default-value", "onUpdate"]))), 128)) : w("", !0),
+                (b(!0), P(pe, null, ve(e.regularFilters, (m) => (b(), $(Be(m.type), {
+                  key: m.field,
+                  field: m.field,
+                  label: m.label,
+                  options: m.options,
+                  value: m.value,
+                  onUpdate: e.updateFilterHandler
+                }, null, 40, ["field", "label", "options", "value", "onUpdate"]))), 128))
+              ])
+            ]),
+            _: 1
+          })
+        ]),
+        e.hasHiddenFilters || e.isClearAllVisible || e.isResetAllVisible ? (b(), P("div", gn, [
+          e.hasHiddenFilters ? (b(), $(r, {
+            key: 0,
+            class: "b-filter-bar__all-filters-modal",
+            value: e.valueAndFilterValuesPropsMerged,
+            onInput: e.updateAllFilters
+          }, null, 8, ["value", "onInput"])) : w("", !0),
+          Fe(g(u, {
+            class: "b-filter-bar__clear-all",
+            onClick: e.clearAllFilters
+          }, {
+            iconLeft: p(() => [
+              g(a, { "aria-hidden": "true" })
+            ]),
+            default: p(() => [
+              O(R(e.$t("clearAll")) + " ", 1)
+            ]),
+            _: 1
+          }, 8, ["onClick"]), [
+            [ge, e.isClearAllVisible]
+          ]),
+          Fe(g(u, {
+            class: "b-filter-bar__reset-all",
+            onClick: e.resetAllFilters
+          }, {
+            iconLeft: p(() => [
+              g(a, { "aria-hidden": "true" })
+            ]),
+            default: p(() => [
+              O(R(e.$t("resetAll")) + " ", 1)
+            ]),
+            _: 1
+          }, 8, ["onClick"]), [
+            [ge, e.isResetAllVisible]
+          ])
+        ])) : w("", !0)
+      ])
     ])
   ]);
 }
-const Yn = /* @__PURE__ */ M(on, [["render", rn], ["__scopeId", "data-v-013af320"]]);
+const ia = /* @__PURE__ */ M(pn, [["render", Cn], ["__scopeId", "data-v-5f910a0f"]]);
 export {
-  Yn as BentoFilterBar,
-  _e as BentoFilterBarEvent,
+  ia as BentoFilterBar,
+  he as BentoFilterBarEvent,
   v as BentoFilterEvent,
   Q as BentoFilterItemType
 };