@adyen/bento-vue2 1.8.0 → 1.9.0

package/dist/filter-bar.js

@@ -1,43 +1,52 @@
-import { defineComponent as x, useSlots as He, useAttrs as qe, computed as r, ref as I, watch as te, toRef as R, onBeforeUpdate as re, reactive as me, toRefs as je, provide as Ye, nextTick as ze, onMounted as Je } from "vue";
-import { a as de } from "./chunks/index.210d2169.js";
-import { u as W } from "./chunks/i18n.155748d6.js";
+import { n as T } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import { onMounted as me, onUnmounted as je, defineComponent as E, useSlots as Ye, useAttrs as ze, computed as o, ref as U, watch as te, toRef as k, onBeforeUpdate as oe, reactive as he, toRefs as Je, provide as Ke, nextTick as Ge } from "vue";
+import { a as de } from "./chunks/index.d1beb704.js";
+import { u as W } from "./chunks/i18n.eb5b985b.js";
 import { g as ie } from "./chunks/unique-id.a2a2b458.js";
-import { B as ae, d as Ke } from "./chunks/index.965ac1af.js";
-import { u as Fe } from "./chunks/aria-label.ac9651a5.js";
-import { B as he, a as fe } from "./chunks/base-button.7886a7e6.js";
-import { g as Ce } from "./chunks/get-slot-text.c1114034.js";
-import { u as ge } from "./chunks/use-has-slot.6052d56a.js";
-import { a as Se, C as Be } from "./chunks/chevron-up.674ec2e5.js";
-import { n as U } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { B as Ge } from "./chunks/tooltip.ecd0f707.js";
-import { B as We } from "./chunks/directive.0408e565.js";
-import { BentoRadioGroup as Ze } from "./radio-group.js";
-import { BentoInputField as Ae } from "./input-field.js";
+import { o as We } from "./chunks/on-click-outside.3e0c3e2a.js";
+import { i as Fe } from "./chunks/index.4c062058.js";
+import { B as ae, d as Ze } from "./chunks/index.b201e81d.js";
+import { u as ge } from "./chunks/aria-label.ac9651a5.js";
+import { B as Ce, a as fe } from "./chunks/base-button.df9a9bea.js";
+import { g as Se } from "./chunks/get-slot-text.99c3d860.js";
+import { u as Ae } from "./chunks/use-has-slot.fbeb19ec.js";
+import { a as Be, C as De } from "./chunks/chevron-up.81185563.js";
+import { B as Qe } from "./chunks/tooltip.b8929659.js";
+import { B as Xe } from "./chunks/directive.0408e565.js";
+import { BentoRadioGroup as et } from "./radio-group.js";
+import { BentoInputField as Te } from "./input-field.js";
 import { BentoSearchBar as le, BentoSearchBarEvent as Z } from "./search-bar.js";
-import { u as Qe } from "./chunks/toastController.0e01443d.js";
-import { BentoModal as Xe } from "./modal.js";
-import { e as et } from "./chunks/base-modal.31634fe8.js";
-import { a as tt } from "./chunks/button.e09d5980.js";
-import { B as lt, u as De } from "./chunks/dropdown.ce937989.js";
-import { g as at } from "./chunks/index.86fc63ca.js";
-import { BentoDivider as Te } from "./divider.js";
-import { BentoDatePicker as nt } from "./date-picker.js";
-import { f as G } from "./chunks/index.b83f8b7e.js";
-import { e as z, d as Ee, f as Pe } from "./chunks/index.f55fdc32.js";
-import { C as st, i as ot } from "./chunks/calendar.47e9e755.js";
-import { B as rt, D as it, i as be } from "./chunks/index.a99ffd48.js";
-import { BentoButtonActions as ut } from "./button.js";
+import { u as tt } from "./chunks/toastController.fd667b68.js";
+import { BentoModal as lt } from "./modal.js";
+import { e as at } from "./chunks/base-modal.75319f4e.js";
+import { a as nt } from "./chunks/button.7dd8d4de.js";
+import { B as st, u as Ee } from "./chunks/dropdown.6461dbe3.js";
+import { g as rt } from "./chunks/index.6cef7328.js";
+import { BentoDivider as Pe } from "./divider.js";
+import { BentoDatePicker as ot } from "./date-picker.js";
+import { f as G } from "./chunks/index.322692c8.js";
+import { e as z, d as xe, f as $e } from "./chunks/index.f55fdc32.js";
+import { C as it, i as ut } from "./chunks/calendar.a885d8fc.js";
+import { B as ct, D as dt, i as be } from "./chunks/index.16914bb1.js";
+import { BentoButtonActions as ft } from "./button.js";
 import { D as _e } from "./chunks/date-input.9186a0bf.js";
-import { B as ct } from "./chunks/listbox.d039b178.js";
-import { B as dt, L as Ue } from "./chunks/listbox-option-tag.97af47fc.js";
-import { BentoCountry as ft } from "./country.js";
-import { u as bt } from "./chunks/useCountryItems.5d7b436e.js";
-import { BentoPaymentMethod as _t } from "./payment-method.js";
-import { R as vt } from "./chunks/refresh.eb485c6f.js";
-import "./assets/index18.css";
-var i = /* @__PURE__ */ ((t) => (t.INPUT = "input", t.UPDATE = "update", t))(i || {}), ee = /* @__PURE__ */ ((t) => (t.INPUT = "input", t.UPDATE_FILTER_VALUES = "update:filter-values", t))(ee || {}), N = /* @__PURE__ */ ((t) => (t.INPUT = "BentoInputFilter", t.BOOLEAN = "BentoBooleanFilter", t.RANGE = "BentoRangeFilter", t.SELECT = "BentoSelectFilter", t.SELECT_AVATAR = "BentoSelectAvatarFilter", t.SELECT_COUNTRY = "BentoSelectCountryFilter", t.SELECT_CURRENCY = "BentoSelectCurrencyFilter", t.SELECT_PAYMENT_METHOD = "BentoSelectPaymentMethodFilter", t.SELECT_TAG = "BentoSelectTagFilter", t.DATE = "BentoDateFilter", t.DATE_RANGE = "BentoDateRangeFilter", t))(N || {});
-const pt = {}, yt = /* @__PURE__ */ x({
-  ...pt,
+import { B as bt } from "./chunks/listbox.a117e6d4.js";
+import { B as _t, L as Ue } from "./chunks/listbox-option-tag.55cd9c16.js";
+import { BentoCountry as vt } from "./country.js";
+import { u as pt } from "./chunks/useCountryItems.34ac8740.js";
+import { BentoPaymentMethod as yt } from "./payment-method.js";
+import { R as mt } from "./chunks/refresh.71a03998.js";
+import { F as ht } from "./chunks/fixed-scroller.42354ccc.js";
+import "./assets/index42.css";
+const Ft = (t, e, l = {}) => {
+  let a;
+  me(() => {
+    a = We(t, e, l);
+  }), je(() => {
+    a && (a(), a = null);
+  });
+}, gt = {}, Ct = /* @__PURE__ */ E({
+  ...gt,
   __name: "filter-bar-button",
   props: {
     /**
@@ -67,39 +76,39 @@ const pt = {}, yt = /* @__PURE__ */ x({
   },
   emits: ["click"],
   setup(t, { emit: e }) {
-    const l = t, a = He(), n = qe(), s = ge(a), u = r(() => a.default ? Ce(a)("default") : null), d = Fe({ ariaLabel: u }), c = I(null), p = r(() => {
+    const l = t, a = Ye(), n = ze(), s = Ae(a), c = o(() => a.default ? Se(a)("default") : null), f = ge({ ariaLabel: c }), u = U(null), p = o(() => {
       var v;
       return {
         "aria-controls": (v = n["aria-controls"]) == null ? void 0 : v.toString()
       };
-    }), _ = r(() => ({
+    }), b = o(() => ({
       "b-filter-bar-button--filter-open": l.isFilterOpen,
       "b-filter-bar-button--with-counter": l.appliedFiltersCount,
       "b-filter-bar-button--with-chevron": l.hasChevron
     }));
-    return { __sfc: !0, props: l, emit: e, slots: a, attrs: n, hasSlot: s, labelSlot: u, computedAriaLabel: d, filterBarButtonRef: c, ariaAttributes: p, conditionalClasses: _, onClickButton: (v) => {
+    return { __sfc: !0, props: l, emit: e, slots: a, attrs: n, hasSlot: s, labelSlot: c, computedAriaLabel: f, filterBarButtonRef: u, ariaAttributes: p, conditionalClasses: b, onClickButton: (v) => {
       l.disabled || e("click", v);
-    }, BentoTypography: ae, BaseButton: he, ChevronUpIcon: Se, ChevronDownIcon: Be };
+    }, BentoTypography: ae, BaseButton: Ce, ChevronUpIcon: Be, ChevronDownIcon: De };
   }
 });
-var mt = function() {
+var St = function() {
   var e = this, l = e._self._c, a = e._self._setupProxy;
   return l(a.BaseButton, { ref: "filterBarButtonRef", staticClass: "b-filter-bar-button", class: a.conditionalClasses, attrs: { disabled: e.disabled, "aria-label": a.computedAriaLabel, "aria-controls": a.ariaAttributes["aria-controls"], type: "button" }, on: { click: a.onClickButton }, scopedSlots: e._u([{ key: "iconRight", fn: function() {
     return [e.appliedFiltersCount && !e.hasChevron ? l(a.BentoTypography, { staticClass: "b-filter-bar-button__counter", attrs: { el: "span", variant: "body", stronger: "" } }, [e._v(" " + e._s(e.appliedFiltersCount) + " ")]) : e._e(), e.hasChevron ? l("div", { staticClass: "b-filter-bar-button__chevron" }, [e.isFilterOpen ? l(a.ChevronUpIcon, { attrs: { "aria-hidden": "true" } }) : l(a.ChevronDownIcon, { attrs: { "aria-hidden": "true" } })], 1) : e._e()];
   }, proxy: !0 }]) }, [l("div", { staticClass: "b-filter-bar-button__container" }, [a.hasSlot("iconLeft") ? [e._t("iconLeft")] : e._e(), l("div", { staticClass: "b-filter-bar-button__label-container" }, [l(a.BentoTypography, { staticClass: "b-filter-bar-button__label", attrs: { el: "span", variant: "body", stronger: "" } }, [e._t("default")], 2), e.secondaryLabel ? l(a.BentoTypography, { staticClass: "b-filter-bar-button__secondary-label", attrs: { el: "span", variant: "body", stronger: "" } }, [e._v(" " + e._s(e.secondaryLabel) + " ")]) : e._e()], 1)], 2)]);
-}, Ft = [], ht = /* @__PURE__ */ U(
-  yt,
-  mt,
-  Ft,
+}, At = [], Bt = /* @__PURE__ */ T(
+  Ct,
+  St,
+  At,
   !1,
   null,
   "b3ad119c",
   null,
   null
 );
-const ue = ht.exports;
-var q = /* @__PURE__ */ ((t) => (t.APPLY = "apply", t.CLEAR = "clear", t.OPEN = "open", t.CLOSE = "close", t.RESET = "reset", t))(q || {});
-const Ct = {
+const ue = Bt.exports;
+var i = /* @__PURE__ */ ((t) => (t.INPUT = "input", t.UPDATE = "update", t))(i || {}), ee = /* @__PURE__ */ ((t) => (t.INPUT = "input", t.UPDATE_FILTER_VALUES = "update:filter-values", t))(ee || {}), N = /* @__PURE__ */ ((t) => (t.INPUT = "BentoInputFilter", t.BOOLEAN = "BentoBooleanFilter", t.RANGE = "BentoRangeFilter", t.SELECT = "BentoSelectFilter", t.SELECT_AVATAR = "BentoSelectAvatarFilter", t.SELECT_COUNTRY = "BentoSelectCountryFilter", t.SELECT_CURRENCY = "BentoSelectCurrencyFilter", t.SELECT_PAYMENT_METHOD = "BentoSelectPaymentMethodFilter", t.SELECT_TAG = "BentoSelectTagFilter", t.DATE = "BentoDateFilter", t.DATE_RANGE = "BentoDateRangeFilter", t))(N || {}), q = /* @__PURE__ */ ((t) => (t.APPLY = "apply", t.CLEAR = "clear", t.OPEN = "open", t.CLOSE = "close", t.RESET = "reset", t))(q || {});
+const Dt = {
   "en-US": {
     clear: "Clear",
     apply: "Apply",
@@ -125,14 +134,127 @@ const Ct = {
     clear: "Borrar",
     apply: "Aplicar"
   }
-}, gt = x({
-  i18n: { messages: Ct },
+}, Tt = E({
+  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: Fe
+  }),
+  computed: {
+    classes() {
+      return this.disabled ? ["b-teleport"] : ["b-teleport", "b-teleport--hidden"];
+    }
+  },
+  watch: {
+    to: "maybeMove",
+    where: "maybeMove",
+    disabled(t) {
+      t ? (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 t = document.createDocumentFragment();
+      return this.nodes.forEach((e) => t.appendChild(e)), t;
+    },
+    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(t) {
+      let e = !1;
+      for (let l = 0; l < t.length; l++) {
+        const a = t[l], n = Array.from(a.addedNodes).filter(
+          (s) => !this.nodes.includes(s)
+        );
+        Array.from(a.removedNodes).includes(this.parent) ? (this.disable(), this.waiting = !this.disabled) : this.waiting && n.length > 0 && (e = !0);
+      }
+      e && this.move();
+    },
+    bootObserver() {
+      this.observer || (this.observer = new MutationObserver((t) => this.onMutations(t)), this.observer.observe(document.body, {
+        childList: !0,
+        subtree: !0,
+        attributes: !1,
+        characterData: !1
+      }), !this.childObserver && (this.childObserver = new MutationObserver((t) => {
+        t.find((l) => l.target === this.$el) && (this.nodes.forEach((l) => l.parentNode && l.parentNode.removeChild(l)), 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 this.$vnode.componentOptions.children.map((t) => t.elm).filter((t) => t);
+    }
+  }
+}), Et = /* @__PURE__ */ E({
+  ...Tt,
+  setup(t) {
+    return { __sfc: !0, isVue2: Fe };
+  }
+});
+var Pt = function() {
+  var e = this, l = e._self._c, a = e._self._setupProxy;
+  return a.isVue2 ? l("div", { class: e.classes }, [e._t("default")], 2) : l("Teleport", { class: e.classes, attrs: { to: e.to, where: e.where, disabled: e.disabled } }, [e._t("default")], 2);
+}, xt = [], $t = /* @__PURE__ */ T(
+  Et,
+  Pt,
+  xt,
+  !1,
+  null,
+  "247f6a5d",
+  null,
+  null
+);
+const Ut = $t.exports, Rt = E({
+  i18n: { messages: Dt },
   name: "bento-base-filter",
   components: {
     BentoPopover: de,
+    BentoTeleport: Ut,
     FilterBarButton: ue
   },
-  directives: { BentoClickOutsideDirective: We },
+  directives: { BentoClickOutsideDirective: Xe },
   props: {
     /**
      * Total count of applied filters
@@ -193,77 +315,80 @@ const Ct = {
     q.RESET
   ],
   setup(t, { emit: e }) {
-    const { t: l } = W(), a = ie("base-filter-popover"), n = I(!1), s = I(null), u = r(() => t.defaultValue !== null), d = () => {
-      n.value = !1, e(q.CLOSE);
-    }, c = () => {
-      d(), u.value ? e(q.RESET) : e(q.CLEAR);
-    }, p = () => d(), _ = () => {
-      n.value ? d() : (n.value = !0, e(q.OPEN));
-    }, F = () => {
-      d(), e(q.APPLY);
-    }, v = r(() => [
+    const { t: l } = W(), a = ie("base-filter-popover"), n = U(!1), s = U(null), c = U(null), f = o(() => t.defaultValue !== null), u = () => {
+      n.value && (n.value = !1, e(q.CLOSE));
+    }, p = () => {
+      u(), f.value ? e(q.RESET) : e(q.CLEAR);
+    }, b = () => u(), F = () => {
+      n.value ? u() : (n.value = !0, e(q.OPEN));
+    }, v = () => {
+      u(), e(q.APPLY);
+    }, g = o(() => [
       {
         title: l("apply"),
-        event: F,
+        event: v,
         disabled: t.disableApplyButton
       },
       {
-        title: u.value ? l("reset") : l("clear"),
-        event: c,
+        title: f.value ? l("reset") : l("clear"),
+        event: p,
         disabled: t.disableSecondaryButton
       }
     ]);
     return te(
       () => n.value,
-      (h, D) => {
-        var B, m;
-        !h && D && (m = (B = s.value) == null ? void 0 : B.filterBarButtonRef) != null && m.bentoBaseButtonRef && s.value.filterBarButtonRef.bentoBaseButtonRef.focus();
+      (D, A) => {
+        var m, h;
+        !D && A && (h = (m = s.value) == null ? void 0 : m.filterBarButtonRef) != null && h.bentoBaseButtonRef && s.value.filterBarButtonRef.bentoBaseButtonRef.focus();
       }
-    ), {
+    ), Ft(c, b, { ignore: [s] }), {
       // Values
-      actions: v,
+      actions: g,
       popoverId: a,
       isFilterOpen: n,
-      isPersistentFilter: u,
+      isPersistentFilter: f,
       // Enums
-      BentoTooltipPosition: Ge,
+      BentoTooltipPosition: Qe,
       // Events
-      onClickFilter: _,
-      onClickApply: F,
-      onClickSecondaryAction: c,
-      onClickOutside: p,
-      closePopover: d,
+      onClickFilter: F,
+      onClickApply: v,
+      onClickSecondaryAction: p,
+      onClickOutside: b,
+      closePopover: u,
       // Refs
-      filterButtonRef: s
+      filterButtonRef: s,
+      popoverRef: c
     };
   }
 });
-var St = function() {
+var kt = function() {
   var e = this, l = e._self._c;
-  return e._self._setupProxy, e.onlySlot ? l("div", [e._t("default")], 2) : l("div", { directives: [{ name: "bento-click-outside-directive", rawName: "v-bento-click-outside-directive", value: e.onClickOutside, expression: "onClickOutside" }], staticClass: "b-base-filter", on: { keydown: function(a) {
+  return e._self._setupProxy, e.onlySlot ? l("div", [e._t("default")], 2) : l("div", { staticClass: "b-base-filter" }, [l("filter-bar-button", { ref: "filterButtonRef", attrs: { "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 }, on: { click: e.onClickFilter, keydown: function(a) {
     return !a.type.indexOf("key") && e._k(a.keyCode, "esc", 27, a.key, ["Esc", "Escape"]) ? null : e.closePopover.apply(null, arguments);
-  } } }, [l("filter-bar-button", { ref: "filterButtonRef", attrs: { "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 }, on: { click: e.onClickFilter } }, [e._v(" " + e._s(e.buttonLabel || e.label) + " ")]), e.filterButtonRef ? l("bento-popover", { staticClass: "b-base-filter__popover", attrs: { id: e.popoverId, 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"] } }, [e._t("default")], 2) : e._e()], 1);
-}, Bt = [], At = /* @__PURE__ */ U(
-  gt,
-  St,
-  Bt,
+  } } }, [e._v(" " + e._s(e.buttonLabel || e.label) + " ")]), l("bento-teleport", { attrs: { to: "body" } }, [e.filterButtonRef ? l("bento-popover", { ref: "popoverRef", staticClass: "b-base-filter__popover", attrs: { id: e.popoverId, 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"] } }, [l("div", { on: { keydown: function(a) {
+    return !a.type.indexOf("key") && e._k(a.keyCode, "esc", 27, a.key, ["Esc", "Escape"]) ? null : e.closePopover.apply(null, arguments);
+  } } }, [e._t("default")], 2)]) : e._e()], 1)], 1);
+}, It = [], Vt = /* @__PURE__ */ T(
+  Rt,
+  kt,
+  It,
   !1,
   null,
-  "32ce792b",
+  "c4901c1d",
   null,
   null
 );
-const Q = At.exports, Dt = (t) => t instanceof Array, ve = (t) => Dt(t) ? t.length === 0 || t.every((e) => e === "") : !t, pe = (t, e) => JSON.stringify(t) === JSON.stringify(e), X = (t, e) => {
-  const l = I(t.value);
+const Q = Vt.exports, Ot = (t) => t instanceof Array, ve = (t) => Ot(t) ? t.length === 0 || t.every((e) => e === "") : !t, pe = (t, e) => JSON.stringify(t) === JSON.stringify(e), X = (t, e) => {
+  const l = U(t.value);
   te(
     () => t.value,
     () => {
       l.value = t.value;
     }
   );
-  const a = r(() => ve(t.value)), n = r(
+  const a = o(() => ve(t.value)), n = o(
     () => e.value !== null ? pe(e.value, t.value) : a.value
-  ), s = r(() => pe(l.value, t.value) || ve(l.value) && a.value);
+  ), s = o(() => pe(l.value, t.value) || ve(l.value) && a.value);
   return {
     internalFilterValue: l,
     isSecondaryButtonDisabled: n,
@@ -272,11 +397,11 @@ const Q = At.exports, Dt = (t) => t instanceof Array, ve = (t) => Dt(t) ? t.leng
 }, K = (t, e) => {
   const l = t == null ? void 0 : t.toString();
   return (l == null ? void 0 : l.length) > e ? `${l == null ? void 0 : l.slice(0, e)}...` : l;
-}, Tt = x({
+}, Lt = E({
   name: "bento-input-filter",
   components: {
     BentoBaseFilter: Q,
-    BentoInputField: Ae
+    BentoInputField: Te
   },
   props: {
     /**
@@ -304,73 +429,73 @@ const Q = At.exports, Dt = (t) => t instanceof Array, ve = (t) => Dt(t) ? t.leng
   },
   emits: [i.INPUT, i.UPDATE],
   setup(t, { emit: e }) {
-    const l = I(null), { internalFilterValue: a, isSecondaryButtonDisabled: n, isApplyButtonDisabled: s } = X(
-      R(t, "value"),
-      R(t, "defaultValue")
-    ), u = r(() => t.defaultValue === null ? t.label : K(t.value, 18)), d = r(
+    const l = U(null), { internalFilterValue: a, isSecondaryButtonDisabled: n, isApplyButtonDisabled: s } = X(
+      k(t, "value"),
+      k(t, "defaultValue")
+    ), c = o(() => t.defaultValue === null ? t.label : K(t.value, 18)), f = o(
       () => t.defaultValue === null ? K(t.value, 12) : null
-    ), c = r(() => ({
+    ), u = o(() => ({
       ["b-input-filter--only-slot"]: t.onlySlot
     }));
-    re(() => {
+    oe(() => {
       a.value === "" && (a.value = null);
     }), te(l, () => {
-      var B;
-      (B = l.value) == null || B.focusInput();
+      var A;
+      (A = l.value) == null || A.focusInput();
     });
     const p = () => {
       a.value = t.value;
-    }, _ = () => {
+    }, b = () => {
       !a.value && t.defaultValue !== null && (a.value = t.defaultValue), e(i.UPDATE, { ...t, value: a.value });
     };
     return {
       // Values
-      buttonLabel: u,
-      buttonSecondaryLabel: d,
-      conditionalClasses: c,
+      buttonLabel: c,
+      buttonSecondaryLabel: f,
+      conditionalClasses: u,
       internalFilterValue: a,
       isApplyButtonDisabled: s,
       isSecondaryButtonDisabled: n,
       // Refs
       inputTextRef: l,
       // Events
-      updateFilter: _,
+      updateFilter: b,
       clearFilter: () => {
-        a.value = null, _();
+        a.value = null, b();
       },
       openFilter: p,
       resetFilter: () => e(i.UPDATE, { ...t, value: t.defaultValue }),
       onInput: () => {
         e(i.INPUT, { ...t, value: a.value });
       },
-      setInternalFilterValue: (B) => {
-        a.value = B;
+      setInternalFilterValue: (A) => {
+        a.value = A;
       }
     };
   }
 });
-var Et = function() {
+var Nt = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("bento-base-filter", e._b({ attrs: { "button-label": e.buttonLabel, "button-secondary-label": e.buttonSecondaryLabel, "disable-apply-button": e.isApplyButtonDisabled, "disable-secondary-button": e.isSecondaryButtonDisabled, "only-slot": e.onlySlot }, on: { apply: e.updateFilter, clear: e.clearFilter, open: e.openFilter, reset: e.resetFilter } }, "bento-base-filter", e.$props, !1), [l("div", { staticClass: "b-input-filter", class: e.conditionalClasses, on: { keydown: function(a) {
     return !a.type.indexOf("key") && e._k(a.keyCode, "enter", 13, a.key, "Enter") ? null : e.updateFilter.apply(null, arguments);
   }, input: e.onInput } }, [l("bento-input-field", { ref: "inputTextRef", attrs: { value: e.internalFilterValue }, on: { input: e.setInternalFilterValue } })], 1)]);
-}, Pt = [], Ut = /* @__PURE__ */ U(
-  Tt,
-  Et,
-  Pt,
+}, wt = [], Mt = /* @__PURE__ */ T(
+  Lt,
+  Nt,
+  wt,
   !1,
   null,
   "93dbdf1c",
   null,
   null
 );
-const Ie = Ut.exports, It = x({
+const Re = Mt.exports, Ht = E({
   name: "bento-date-filter",
   components: {
     BentoBaseFilter: Q,
-    BentoDatePicker: nt,
-    BentoDivider: Te,
-    Calendar: st
+    BentoDatePicker: ot,
+    BentoDivider: Pe,
+    Calendar: it
   },
   props: {
     isDateInput: { type: Boolean, default: !0 },
@@ -409,24 +534,24 @@ const Ie = Ut.exports, It = x({
   },
   emits: [i.INPUT, i.UPDATE],
   setup(t, { emit: e }) {
-    const { locale: l } = W(void 0, !0), a = { de: Ee, enUS: z, fr: Pe }, { internalFilterValue: n, isSecondaryButtonDisabled: s, isApplyButtonDisabled: u } = X(
-      R(t, "value"),
-      R(t, "defaultValue")
-    ), d = r(
+    const { locale: l } = W(void 0, !0), a = { de: xe, enUS: z, fr: $e }, { internalFilterValue: n, isSecondaryButtonDisabled: s, isApplyButtonDisabled: c } = X(
+      k(t, "value"),
+      k(t, "defaultValue")
+    ), f = o(
       () => t.value ? G(t.value, "dd MMM, yyyy", {
         locale: a[l.value.substring(0, 2)] || z
       }) : null
-    ), c = r(
-      () => t.defaultValue === null ? t.label : d.value
-    ), p = r(
-      () => t.defaultValue === null ? d.value : null
-    ), _ = () => {
+    ), u = o(
+      () => t.defaultValue === null ? t.label : f.value
+    ), p = o(
+      () => t.defaultValue === null ? f.value : null
+    ), b = () => {
       e(i.UPDATE, { ...t, value: n.value });
     }, F = () => {
-      n.value = null, _();
+      n.value = null, b();
     }, v = () => {
-      n.value = t.defaultValue, _();
-    }, h = () => {
+      n.value = t.defaultValue, b();
+    }, g = () => {
       n.value = t.value;
     }, D = (m) => {
       n.value = m, e(i.INPUT, { ...t, value: n.value });
@@ -434,37 +559,37 @@ const Ie = Ut.exports, It = x({
     return {
       // Values
       internalFilterValue: n,
-      isApplyButtonDisabled: u,
+      isApplyButtonDisabled: c,
       isSecondaryButtonDisabled: s,
-      buttonLabel: c,
+      buttonLabel: u,
       buttonSecondaryLabel: p,
       // Events
       clearFilter: F,
       onDateSelected: D,
-      openFilter: h,
-      updateFilter: _,
+      openFilter: g,
+      updateFilter: b,
       resetFilter: v,
       onDateInputSelected: (m) => {
-        n.value = m, D(m), _();
+        n.value = m, D(m), b();
       }
     };
   }
 });
-var xt = function() {
-  var a, n, s, u;
+var qt = function() {
+  var a, n, s, c;
   var e = this, l = e._self._c;
-  return e._self._setupProxy, l("bento-base-filter", { attrs: { "button-label": e.buttonLabel, "button-secondary-label": e.buttonSecondaryLabel, "default-value": e.defaultValue, "disable-apply-button": e.isApplyButtonDisabled, "disable-secondary-button": e.isSecondaryButtonDisabled, field: e.field, label: e.label, "only-slot": e.onlySlot, "fit-content": "" }, on: { apply: e.updateFilter, clear: e.clearFilter, open: e.openFilter, reset: e.resetFilter } }, [e.onlySlot ? l("bento-date-picker", { attrs: { value: e.internalFilterValue, "first-day-of-week": (a = e.options) == null ? void 0 : a.firstDayOfWeek, "is-date-disabled": (n = e.options) == null ? void 0 : n.isDateDisabled }, on: { input: e.onDateInputSelected } }) : [l("bento-divider", { staticClass: "b-date-filter__divider" }), l("div", { staticClass: "b-date-filter" }, [l("calendar", { attrs: { "first-day-of-week": (s = e.options) == null ? void 0 : s.firstDayOfWeek, "is-date-disabled": (u = e.options) == null ? void 0 : u.isDateDisabled, "number-of-months": 1, value: e.internalFilterValue }, on: { input: e.onDateSelected } })], 1)]], 2);
-}, $t = [], Rt = /* @__PURE__ */ U(
-  It,
-  xt,
-  $t,
+  return e._self._setupProxy, l("bento-base-filter", { attrs: { "button-label": e.buttonLabel, "button-secondary-label": e.buttonSecondaryLabel, "default-value": e.defaultValue, "disable-apply-button": e.isApplyButtonDisabled, "disable-secondary-button": e.isSecondaryButtonDisabled, field: e.field, label: e.label, "only-slot": e.onlySlot, "fit-content": "" }, on: { apply: e.updateFilter, clear: e.clearFilter, open: e.openFilter, reset: e.resetFilter } }, [e.onlySlot ? l("bento-date-picker", { attrs: { value: e.internalFilterValue, "first-day-of-week": (a = e.options) == null ? void 0 : a.firstDayOfWeek, "is-date-disabled": (n = e.options) == null ? void 0 : n.isDateDisabled }, on: { input: e.onDateInputSelected } }) : [l("bento-divider", { staticClass: "b-date-filter__divider" }), l("div", { staticClass: "b-date-filter" }, [l("calendar", { attrs: { "first-day-of-week": (s = e.options) == null ? void 0 : s.firstDayOfWeek, "is-date-disabled": (c = e.options) == null ? void 0 : c.isDateDisabled, "number-of-months": 1, value: e.internalFilterValue }, on: { input: e.onDateSelected } })], 1)]], 2);
+}, jt = [], Yt = /* @__PURE__ */ T(
+  Ht,
+  qt,
+  jt,
   !1,
   null,
   "3a27d7af",
   null,
   null
 );
-const xe = Rt.exports, kt = {
+const ke = Yt.exports, zt = {
   "en-US": {
     clear: "Clear",
     reset: "Reset",
@@ -490,16 +615,16 @@ const xe = Rt.exports, kt = {
     clear: "Borrar",
     apply: "Aplicar"
   }
-}, Vt = x({
-  i18n: { messages: kt },
+}, Jt = E({
+  i18n: { messages: zt },
   name: "bento-date-range-filter",
   components: {
     BentoBaseFilter: Q,
-    BentoButtonActions: ut,
-    BentoDateRangePicker: rt,
+    BentoButtonActions: ft,
+    BentoDateRangePicker: ct,
     BentoTypography: ae,
-    BentoDivider: Te,
-    DateRangePickerCalendar: it
+    BentoDivider: Pe,
+    DateRangePickerCalendar: dt
   },
   props: {
     /**
@@ -544,31 +669,31 @@ const xe = Rt.exports, kt = {
   },
   emits: [i.INPUT, i.UPDATE],
   setup(t, { emit: e }) {
-    var E, P, O, V;
-    const { locale: l, t: a } = W(), n = { de: Ee, enUS: z, fr: Pe }, { internalFilterValue: s, isSecondaryButtonDisabled: u, isApplyButtonDisabled: d } = X(
-      R(t, "value"),
-      R(t, "defaultValue")
-    ), c = (f) => f ? G(f, _e.NUMERIC_DATE_YEAR_FIRST, {
+    var x, $, L, V;
+    const { locale: l, t: a } = W(), n = { de: xe, enUS: z, fr: $e }, { internalFilterValue: s, isSecondaryButtonDisabled: c, isApplyButtonDisabled: f } = X(
+      k(t, "value"),
+      k(t, "defaultValue")
+    ), u = (d) => d ? G(d, _e.NUMERIC_DATE_YEAR_FIRST, {
       locale: n[l.value.substring(0, 2)] || z
-    }) : void 0, p = (f) => f ? G(f, _e.HOUR_MINUTE_SECONDS, {
+    }) : void 0, p = (d) => d ? G(d, _e.HOUR_MINUTE_SECONDS, {
       locale: n[l.value.substring(0, 2)] || z
-    }) : "", _ = I(null), F = I(!1), v = me({
-      startDate: c((E = t.value) == null ? void 0 : E.startDate),
-      endDate: c((P = t.value) == null ? void 0 : P.endDate),
-      startTime: p((O = t.value) == null ? void 0 : O.startDate),
+    }) : "", b = U(null), F = U(!1), v = he({
+      startDate: u((x = t.value) == null ? void 0 : x.startDate),
+      endDate: u(($ = t.value) == null ? void 0 : $.endDate),
+      startTime: p((L = t.value) == null ? void 0 : L.startDate),
       endTime: p((V = t.value) == null ? void 0 : V.endDate)
-    }), h = r(() => {
-      var f, M, ne, se, o, C, S, $;
-      if (!((f = t.value) != null && f.startDate) && !t.value.endDate)
+    }), g = o(() => {
+      var d, M, ne, se, r, C, S, R;
+      if (!((d = t.value) != null && d.startDate) && !t.value.endDate)
         return null;
       if (((ne = (M = t.options) == null ? void 0 : M.quickSelectRanges) == null ? void 0 : ne.length) > 0) {
-        const j = (o = (se = t.options) == null ? void 0 : se.quickSelectRanges) == null ? void 0 : o.find(
+        const j = (r = (se = t.options) == null ? void 0 : se.quickSelectRanges) == null ? void 0 : r.find(
           ({ data: H }) => be(H == null ? void 0 : H.startDate, t.value.startDate) && be(H == null ? void 0 : H.endDate, t.value.endDate)
         );
         if (j)
           return j.label;
       }
-      return ot((C = t.value) == null ? void 0 : C.startDate, (S = t.value) == null ? void 0 : S.endDate) && (($ = t == null ? void 0 : t.options) != null && $.allowTimeInput) ? `${G(t.value.startDate, "dd MMM, yyyy HH:mm:ss", {
+      return ut((C = t.value) == null ? void 0 : C.startDate, (S = t.value) == null ? void 0 : S.endDate) && ((R = t == null ? void 0 : t.options) != null && R.allowTimeInput) ? `${G(t.value.startDate, "dd MMM, yyyy HH:mm:ss", {
         locale: n[l.value.substring(0, 2)] || z
       })} - ${G(t.value.endDate, "HH:mm:ss", {
         locale: n[l.value.substring(0, 2)] || z
@@ -577,98 +702,98 @@ const xe = Rt.exports, kt = {
       })} - ${G(t.value.endDate, "dd MMM, yyyy", {
         locale: n[l.value.substring(0, 2)] || z
       })}`;
-    }), D = r(
-      () => t.defaultValue === null ? t.label : h.value
-    ), B = r(
-      () => t.defaultValue === null ? h.value : null
+    }), D = o(
+      () => t.defaultValue === null ? t.label : g.value
+    ), A = o(
+      () => t.defaultValue === null ? g.value : null
     ), m = () => {
-      _.value.closePopover();
-      const { onlySlot: f, ...M } = t;
+      b.value.closePopover();
+      const { onlySlot: d, ...M } = t;
       e(i.UPDATE, { ...M, value: s.value });
-    }, g = () => {
+    }, h = () => {
       s.value = void 0, m();
-    }, T = () => {
+    }, P = () => {
       s.value = t.defaultValue, m();
     }, y = () => {
       s.value = t.value;
-    }, b = (f) => {
-      s.value = f, v.startDate = c(f.startDate), v.endDate = c(f.endDate), e(i.INPUT, { ...t, value: s.value });
-    }, A = (f) => {
-      f != null && f.startDate && (f != null && f.endDate) && (s.value = f, v.startDate = c(f.startDate), v.endDate = c(f.endDate), e(i.INPUT, { ...t, value: s.value }));
-    }, L = (f) => {
-      b(f), e(i.INPUT, { ...t, value: s.value });
-    }, Y = r(
+    }, _ = (d) => {
+      s.value = d, v.startDate = u(d.startDate), v.endDate = u(d.endDate), e(i.INPUT, { ...t, value: s.value });
+    }, B = (d) => {
+      d != null && d.startDate && (d != null && d.endDate) && (s.value = d, v.startDate = u(d.startDate), v.endDate = u(d.endDate), e(i.INPUT, { ...t, value: s.value }));
+    }, O = (d) => {
+      _(d), e(i.INPUT, { ...t, value: s.value });
+    }, Y = o(
       () => [
         {
           title: a("apply"),
           event: m,
-          disabled: F.value || d.value
+          disabled: F.value || f.value
         },
         {
           title: t.defaultValue ? a("reset") : a("clear"),
-          event: t.defaultValue ? T : g,
-          disabled: F.value && u.value
+          event: t.defaultValue ? P : h,
+          disabled: F.value && c.value
         }
       ]
     );
     return {
       // Refs
-      baseFilter: _,
+      baseFilter: b,
       // Values
       actions: Y,
       formData: v,
       internalFilterValue: s,
-      isApplyButtonDisabled: d,
-      isSecondaryButtonDisabled: u,
+      isApplyButtonDisabled: f,
+      isSecondaryButtonDisabled: c,
       buttonLabel: D,
-      buttonSecondaryLabel: B,
+      buttonSecondaryLabel: A,
       // Events
-      onDateSelected: b,
+      onDateSelected: _,
       openFilter: y,
       updateFilter: m,
       onDatePickerRangeError: () => {
         F.value = !0, s.value = { startDate: void 0, endDate: void 0 }, e(i.INPUT, { ...t, value: s.value });
       },
-      onDatePickerRangeFormDateInputUpdate: (f) => {
-        F.value = !1, f.startTime && (v.startTime = f.startTime), f.endTime && (v.endTime = f.endTime);
+      onDatePickerRangeFormDateInputUpdate: (d) => {
+        F.value = !1, d.startTime && (v.startTime = d.startTime), d.endTime && (v.endTime = d.endTime);
       },
-      onDateInputSelected: L,
-      onRangeSelectorInput: A
+      onDateInputSelected: O,
+      onRangeSelectorInput: B
     };
   }
 });
-var Lt = function() {
-  var a, n, s, u, d, c, p, _, F, v, h;
+var Kt = function() {
+  var a, n, s, c, f, u, p, b, F, v, g;
   var e = this, l = e._self._c;
-  return e._self._setupProxy, l("bento-base-filter", { ref: "baseFilter", staticClass: "b-base-filter-date-range-filter", attrs: { "button-label": e.buttonLabel, "button-secondary-label": e.buttonSecondaryLabel, controlled: !e.onlySlot, "disable-apply-button": e.isApplyButtonDisabled, "disable-secondary-button": e.isSecondaryButtonDisabled, "default-value": e.defaultValue, field: e.field, label: e.label, "only-slot": e.onlySlot, "fit-content": "" }, on: { open: e.openFilter } }, [e.onlySlot ? l("bento-date-range-picker", { attrs: { "allow-time-input": (a = e.options) == null ? void 0 : a.allowTimeInput, value: e.internalFilterValue, "first-day-of-week": (n = e.options) == null ? void 0 : n.firstDayOfWeek, "is-date-disabled": (s = e.options) == null ? void 0 : s.isDateDisabled, "number-of-months": (u = e.options) == null ? void 0 : u.numberOfMonths, "quick-select-ranges": (d = e.options) == null ? void 0 : d.quickSelectRanges }, on: { input: e.onDateInputSelected } }) : [l("div", { staticClass: "b-date-range-filter" }, [l("date-range-picker-calendar", { attrs: { "allow-time-input": (c = e.options) == null ? void 0 : c.allowTimeInput, "first-day-of-week": (p = e.options) == null ? void 0 : p.firstDayOfWeek, "is-date-disabled": (_ = e.options) == null ? void 0 : _.isDateDisabled, "max-range": (F = e.options) == null ? void 0 : F.maxRange, "number-of-months": (v = e.options) == null ? void 0 : v.numberOfMonths, "quick-select-ranges": (h = e.options) == null ? void 0 : h.quickSelectRanges, value: e.internalFilterValue, "date-form-data": e.formData }, on: { input: e.onDateSelected, "custom-range": e.onRangeSelectorInput, error: e.onDatePickerRangeError, "form-date": e.onDatePickerRangeFormDateInputUpdate }, scopedSlots: e._u([{ key: "title", fn: function() {
+  return e._self._setupProxy, l("bento-base-filter", { ref: "baseFilter", staticClass: "b-base-filter-date-range-filter", attrs: { "button-label": e.buttonLabel, "button-secondary-label": e.buttonSecondaryLabel, controlled: !e.onlySlot, "disable-apply-button": e.isApplyButtonDisabled, "disable-secondary-button": e.isSecondaryButtonDisabled, "default-value": e.defaultValue, field: e.field, label: e.label, "only-slot": e.onlySlot, "fit-content": "" }, on: { open: e.openFilter } }, [e.onlySlot ? l("bento-date-range-picker", { attrs: { "allow-time-input": (a = e.options) == null ? void 0 : a.allowTimeInput, value: e.internalFilterValue, "first-day-of-week": (n = e.options) == null ? void 0 : n.firstDayOfWeek, "is-date-disabled": (s = e.options) == null ? void 0 : s.isDateDisabled, "number-of-months": (c = e.options) == null ? void 0 : c.numberOfMonths, "quick-select-ranges": (f = e.options) == null ? void 0 : f.quickSelectRanges }, on: { input: e.onDateInputSelected } }) : [l("div", { staticClass: "b-date-range-filter" }, [l("date-range-picker-calendar", { attrs: { "allow-time-input": (u = e.options) == null ? void 0 : u.allowTimeInput, "first-day-of-week": (p = e.options) == null ? void 0 : p.firstDayOfWeek, "is-date-disabled": (b = e.options) == null ? void 0 : b.isDateDisabled, "max-range": (F = e.options) == null ? void 0 : F.maxRange, "number-of-months": (v = e.options) == null ? void 0 : v.numberOfMonths, "quick-select-ranges": (g = e.options) == null ? void 0 : g.quickSelectRanges, value: e.internalFilterValue, "date-form-data": e.formData }, on: { input: e.onDateSelected, "custom-range": e.onRangeSelectorInput, error: e.onDatePickerRangeError, "form-date": e.onDatePickerRangeFormDateInputUpdate }, scopedSlots: e._u([{ key: "title", fn: function() {
     return [l("bento-typography", { attrs: { strongest: "", variant: "body", el: "span" } }, [e._v(" " + e._s(e.label) + " ")])];
   }, proxy: !0 }, { key: "actions", fn: function() {
     return [l("bento-divider", { staticClass: "b-date-range-filter__divider" }), l("bento-button-actions", { staticClass: "b-date-range-filter__actions", attrs: { actions: e.actions, layout: "space-between" } })];
   }, proxy: !0 }]) })], 1)]], 2);
-}, Ot = [], Nt = /* @__PURE__ */ U(
-  Vt,
-  Lt,
-  Ot,
+}, Gt = [], Wt = /* @__PURE__ */ T(
+  Jt,
+  Kt,
+  Gt,
   !1,
   null,
   "be19ef58",
   null,
   null
 );
-const $e = Nt.exports, wt = {
+const Ie = Wt.exports, Zt = {
   "en-US": {
     all: "All",
     noFiltersMatchThisSearch: "No filters match this search",
     search: "Search",
     searchFilter: "Search {filter}"
   }
-}, Mt = x({
-  i18n: { messages: wt },
+}, Qt = E({
+  i18n: { messages: Zt },
   name: "bento-select-filter",
   components: {
     BentoBaseFilter: Q,
-    BentoDropdown: lt,
-    BentoListbox: ct,
+    BentoDropdown: st,
+    BentoListbox: bt,
     BentoSearchBar: le
   },
   props: {
@@ -712,122 +837,122 @@ const $e = Nt.exports, wt = {
   setup(t, { emit: e, slots: l }) {
     var Y, J;
     const { internalFilterValue: a, isSecondaryButtonDisabled: n, isApplyButtonDisabled: s } = X(
-      R(t, "value"),
-      R(t, "defaultValue")
-    ), { t: u, locale: d } = W(), c = I(""), p = R(t, "options"), _ = I(t.options.listboxItems);
+      k(t, "value"),
+      k(t, "defaultValue")
+    ), { t: c, locale: f } = W(), u = U(""), p = k(t, "options"), b = U(t.options.listboxItems);
     te(p, () => {
-      _.value = p.value.listboxItems;
+      b.value = p.value.listboxItems;
     });
-    const F = De(
-      c,
-      _,
+    const F = Ee(
+      u,
+      b,
       (J = (Y = t.options) == null ? void 0 : Y.search) == null ? void 0 : J.searchEvent
-    ), v = r(() => u("noFiltersMatchThisSearch")), h = r(() => {
-      var k, E, P, O;
+    ), v = o(() => c("noFiltersMatchThisSearch")), g = o(() => {
+      var I, x, $, L;
       if (t.defaultValue === null)
         return t.label;
       if (t.options.multiple) {
-        const V = (k = t.value) == null ? void 0 : k.length;
+        const V = (I = t.value) == null ? void 0 : I.length;
         if (V === t.options.listboxItems.length)
-          return (E = t == null ? void 0 : t.options) == null ? void 0 : E.messages[d.value].persistentButtonLabelAllSelected;
-        const f = (P = t == null ? void 0 : t.options) == null ? void 0 : P.messages[d.value].persistentButtonLabelPartiallySelected.split("|").map((M) => M.trim());
-        return V === 1 ? f[0].replace("{count}", V) : f[1].replace("{count}", V);
+          return (x = t == null ? void 0 : t.options) == null ? void 0 : x.messages[f.value].persistentButtonLabelAllSelected;
+        const d = ($ = t == null ? void 0 : t.options) == null ? void 0 : $.messages[f.value].persistentButtonLabelPartiallySelected.split("|").map((M) => M.trim());
+        return V === 1 ? d[0].replace("{count}", V) : d[1].replace("{count}", V);
       }
-      return K((O = t.options.listboxItems.find(({ value: V }) => V === t.value)) == null ? void 0 : O.label, 18);
-    }), D = r(() => {
-      var k, E;
-      return t.defaultValue === null && (!t.options.multiple || ((k = t.value) == null ? void 0 : k.length) === 1) ? K(
-        (E = t.options.listboxItems.find(
-          ({ value: P }) => {
-            var O;
-            return Array.isArray(t.value) ? (O = t == null ? void 0 : t.value) == null ? void 0 : O.includes(P) : P === t.value;
+      return K((L = t.options.listboxItems.find(({ value: V }) => V === t.value)) == null ? void 0 : L.label, 18);
+    }), D = o(() => {
+      var I, x;
+      return t.defaultValue === null && (!t.options.multiple || ((I = t.value) == null ? void 0 : I.length) === 1) ? K(
+        (x = t.options.listboxItems.find(
+          ({ value: $ }) => {
+            var L;
+            return Array.isArray(t.value) ? (L = t == null ? void 0 : t.value) == null ? void 0 : L.includes($) : $ === t.value;
           }
-        )) == null ? void 0 : E.label,
+        )) == null ? void 0 : x.label,
         12
       ) : null;
-    }), B = r(() => ie(`filter-listbox-${t.field}`)), m = (k) => {
-      a.value = k;
-      const { onlySlot: E, ...P } = t;
-      e(i.INPUT, { ...P, value: a.value });
-    }, g = () => {
-      var P;
-      t.options.multiple && a.value && ((P = a.value) == null ? void 0 : P.length) === 0 && (a.value = t.defaultValue !== null ? t.defaultValue : void 0);
-      const { onlySlot: k, ...E } = t;
-      e(i.UPDATE, { ...E, value: a.value });
-    }, T = () => {
+    }), A = o(() => ie(`filter-listbox-${t.field}`)), m = (I) => {
+      a.value = I;
+      const { onlySlot: x, ...$ } = t;
+      e(i.INPUT, { ...$, value: a.value });
+    }, h = () => {
+      var $;
+      t.options.multiple && a.value && (($ = a.value) == null ? void 0 : $.length) === 0 && (a.value = t.defaultValue !== null ? t.defaultValue : void 0);
+      const { onlySlot: I, ...x } = t;
+      e(i.UPDATE, { ...x, value: a.value });
+    }, P = () => {
       a.value = t.value;
     }, y = () => {
-      c.value && (c.value = "");
-    }, b = () => {
-      a.value = t.defaultValue, g();
-    }, A = () => {
-      a.value = null, g();
+      u.value && (u.value = "");
+    }, _ = () => {
+      a.value = t.defaultValue, h();
+    }, B = () => {
+      a.value = null, h();
     };
     return {
       // Values
-      appliedFiltersCount: r(() => {
-        var P, O;
+      appliedFiltersCount: o(() => {
+        var $, L;
         if (t.value == null || t.defaultValue !== null || !t.options.multiple)
           return null;
-        const k = (P = t.options.listboxItems) == null ? void 0 : P.reduce((V, f) => {
+        const I = ($ = t.options.listboxItems) == null ? void 0 : $.reduce((V, d) => {
           var M;
-          return V += (M = f == null ? void 0 : f.items) != null && M.length ? f.items.length : 1, V;
-        }, 0), E = (O = t.value) == null ? void 0 : O.length;
-        return E === 1 ? null : E === k ? u("all") : E;
+          return V += (M = d == null ? void 0 : d.items) != null && M.length ? d.items.length : 1, V;
+        }, 0), x = (L = t.value) == null ? void 0 : L.length;
+        return x === 1 ? null : x === I ? c("all") : x;
       }),
       filteredItems: F,
       internalFilterValue: a,
       isApplyButtonDisabled: s,
       isSecondaryButtonDisabled: n,
-      listboxFilterId: B,
+      listboxFilterId: A,
       noResultsMessage: v,
       slots: l,
-      buttonLabel: h,
+      buttonLabel: g,
       buttonSecondaryLabel: D,
       // Search
-      searchTerm: c,
+      searchTerm: u,
       // Events
-      clearFilter: A,
+      clearFilter: B,
       closeFilter: y,
       onOptionSelected: m,
-      openFilter: T,
-      updateFilter: g,
-      resetFilter: b
+      openFilter: P,
+      updateFilter: h,
+      resetFilter: _
     };
   }
 });
-var Ht = function() {
-  var a, n, s, u, d, c, p, _, F, v, h, D, B;
+var Xt = function() {
+  var a, n, s, c, f, u, p, b, F, v, g, D, A;
   var e = this, l = e._self._c;
-  return e._self._setupProxy, l("bento-base-filter", { attrs: { "applied-filters-count": e.appliedFiltersCount, "button-label": e.buttonLabel, "button-secondary-label": e.buttonSecondaryLabel, "disable-apply-button": e.isApplyButtonDisabled, "disable-secondary-button": e.isSecondaryButtonDisabled, "default-value": e.defaultValue, label: e.label, field: e.field, "only-slot": e.onlySlot }, on: { apply: e.updateFilter, clear: e.clearFilter, reset: e.resetFilter, open: e.openFilter, close: e.closeFilter } }, [e.onlySlot ? l("bento-dropdown", { staticClass: "b-select-filter__dropdown-variant", attrs: { value: e.internalFilterValue, items: e.options.listboxItems, multiple: (a = e.options) == null ? void 0 : a.multiple, "no-results-message": e.noResultsMessage, searching: !!e.searchTerm, "is-option-disabled": e.options.isOptionDisabled, "dynamic-filtering": !0, "empty-state": (n = e.options) == null ? void 0 : n.emptyState }, on: { input: e.onOptionSelected }, scopedSlots: e._u([e._l(e.slots, function(m, g) {
-    return { key: g, fn: function(T) {
-      return [e._t(g, null, null, T)];
+  return e._self._setupProxy, l("bento-base-filter", { attrs: { "applied-filters-count": e.appliedFiltersCount, "button-label": e.buttonLabel, "button-secondary-label": e.buttonSecondaryLabel, "disable-apply-button": e.isApplyButtonDisabled, "disable-secondary-button": e.isSecondaryButtonDisabled, "default-value": e.defaultValue, label: e.label, field: e.field, "only-slot": e.onlySlot }, on: { apply: e.updateFilter, clear: e.clearFilter, reset: e.resetFilter, open: e.openFilter, close: e.closeFilter } }, [e.onlySlot ? l("bento-dropdown", { staticClass: "b-select-filter__dropdown-variant", attrs: { value: e.internalFilterValue, items: e.options.listboxItems, multiple: (a = e.options) == null ? void 0 : a.multiple, "no-results-message": e.noResultsMessage, searching: !!e.searchTerm, "is-option-disabled": e.options.isOptionDisabled, "dynamic-filtering": !0, "empty-state": (n = e.options) == null ? void 0 : n.emptyState }, on: { input: e.onOptionSelected }, scopedSlots: e._u([e._l(e.slots, function(m, h) {
+    return { key: h, fn: function(P) {
+      return [e._t(h, null, null, P)];
     } };
-  })], null, !0) }) : [l("div", { staticClass: "b-select-filter__search-bar" }, [l("bento-search-bar", { attrs: { "debounce-time": (u = (s = e.options) == null ? void 0 : s.search) == null ? void 0 : u.debounceTime, value: e.searchTerm, "input-field-aria-label": e.$t("searchFilter", { filter: e.label.toLocaleLowerCase() }).toString() }, on: { input: function(m) {
+  })], null, !0) }) : [l("div", { staticClass: "b-select-filter__search-bar" }, [l("bento-search-bar", { attrs: { "debounce-time": (c = (s = e.options) == null ? void 0 : s.search) == null ? void 0 : c.debounceTime, value: e.searchTerm, "input-field-aria-label": e.$t("searchFilter", { filter: e.label.toLocaleLowerCase() }).toString() }, on: { input: function(m) {
     e.searchTerm = m;
-  } } })], 1), l("hr", { staticClass: "b-select-filter__divider" }), l("bento-listbox", { staticClass: "b-select-filter__wrapper", attrs: { id: e.listboxFilterId, "aria-label": e.label, "empty-state": (d = e.options) == null ? void 0 : d.emptyState, "has-more-items": (p = (c = e.options) == null ? void 0 : c.lazy) == null ? void 0 : p.hasMoreItems, items: e.filteredItems, "is-option-disabled": (_ = e.options) == null ? void 0 : _.isOptionDisabled, "lazy-load-type": (v = (F = e.options) == null ? void 0 : F.lazy) == null ? void 0 : v.lazyLoadType, loading: (D = (h = e.options) == null ? void 0 : h.lazy) == null ? void 0 : D.loading, multiple: (B = e.options) == null ? void 0 : B.multiple, "no-results-message": e.noResultsMessage, searching: !!e.searchTerm, "selected-value": e.internalFilterValue }, on: { select: e.onOptionSelected, "show-more": function(m) {
-    var g, T;
-    (T = (g = e.options) == null ? void 0 : g.lazy) == null || T.showMoreEvent();
-  } }, scopedSlots: e._u([e._l(e.slots, function(m, g) {
-    return { key: g, fn: function(T) {
-      return [e._t(g, null, null, T)];
+  } } })], 1), l("hr", { staticClass: "b-select-filter__divider" }), l("bento-listbox", { staticClass: "b-select-filter__wrapper", attrs: { id: e.listboxFilterId, "aria-label": e.label, "empty-state": (f = e.options) == null ? void 0 : f.emptyState, "has-more-items": (p = (u = e.options) == null ? void 0 : u.lazy) == null ? void 0 : p.hasMoreItems, items: e.filteredItems, "is-option-disabled": (b = e.options) == null ? void 0 : b.isOptionDisabled, "lazy-load-type": (v = (F = e.options) == null ? void 0 : F.lazy) == null ? void 0 : v.lazyLoadType, loading: (D = (g = e.options) == null ? void 0 : g.lazy) == null ? void 0 : D.loading, multiple: (A = e.options) == null ? void 0 : A.multiple, "no-results-message": e.noResultsMessage, searching: !!e.searchTerm, "selected-value": e.internalFilterValue }, on: { select: e.onOptionSelected, "show-more": function(m) {
+    var h, P;
+    (P = (h = e.options) == null ? void 0 : h.lazy) == null || P.showMoreEvent();
+  } }, scopedSlots: e._u([e._l(e.slots, function(m, h) {
+    return { key: h, fn: function(P) {
+      return [e._t(h, null, null, P)];
     } };
   })], null, !0) })]], 2);
-}, qt = [], jt = /* @__PURE__ */ U(
-  Mt,
-  Ht,
-  qt,
+}, el = [], tl = /* @__PURE__ */ T(
+  Qt,
+  Xt,
+  el,
   !1,
   null,
   "63e9e788",
   null,
   null
 );
-const w = jt.exports, Yt = x({
+const w = tl.exports, ll = E({
   name: "bento-select-avatar-filter",
   components: {
     BentoSelectFilter: w,
-    BentoAvatar: dt
+    BentoAvatar: _t
   },
   props: {
     ...w.props,
@@ -852,22 +977,22 @@ const w = jt.exports, Yt = x({
     };
   }
 });
-var zt = function() {
+var al = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("bento-select-filter", e._b({ attrs: { field: e.field, label: e.label }, on: { update: e.onUpdate, input: (a) => e.$emit(e.BentoFilterEvent.INPUT, a) }, scopedSlots: e._u([{ key: "default", fn: function({ label: a, data: n }) {
     return [l("bento-avatar", { attrs: { username: a, src: n } })];
   } }]) }, "bento-select-filter", e.$props, !1));
-}, Jt = [], Kt = /* @__PURE__ */ U(
-  Yt,
-  zt,
-  Jt,
+}, nl = [], sl = /* @__PURE__ */ T(
+  ll,
+  al,
+  nl,
   !1,
   null,
   null,
   null,
   null
 );
-const Re = Kt.exports, Gt = x({
+const Ve = sl.exports, rl = E({
   name: "bento-select-country-filter",
   components: {
     BentoSelectFilter: w,
@@ -898,26 +1023,26 @@ const Re = Kt.exports, Gt = x({
     };
   }
 });
-var Wt = function() {
+var ol = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("bento-select-filter", e._b({ attrs: { field: e.field, label: e.label }, on: { update: e.onUpdate, input: (a) => e.$emit(e.BentoFilterEvent.INPUT, a) }, scopedSlots: e._u([{ key: "default", fn: function(a) {
     return [l("listbox-option-tag", { attrs: { option: a } })];
   } }]) }, "bento-select-filter", e.$props, !1));
-}, Zt = [], Qt = /* @__PURE__ */ U(
-  Gt,
-  Wt,
-  Zt,
+}, il = [], ul = /* @__PURE__ */ T(
+  rl,
+  ol,
+  il,
   !1,
   null,
   null,
   null,
   null
 );
-const ke = Qt.exports, Xt = x({
+const Oe = ul.exports, cl = E({
   name: "bento-select-country-filter",
   components: {
     BentoSelectFilter: w,
-    BentoCountry: ft
+    BentoCountry: vt
   },
   props: {
     ...w.props,
@@ -935,17 +1060,17 @@ const ke = Qt.exports, Xt = x({
   },
   emits: [i.INPUT, i.UPDATE],
   setup(t, { emit: e }) {
-    const l = R(t, "options"), { listboxItems: a, variant: n } = je(l.value), s = (c) => e(i.UPDATE, c), u = bt(n, a), d = r(() => ({
+    const l = k(t, "options"), { listboxItems: a, variant: n } = Je(l.value), s = (u) => e(i.UPDATE, u), c = pt(n, a), f = o(() => ({
       ...t.options,
-      listboxItems: u.value
+      listboxItems: c.value
     }));
-    return Ye("skipBentoCountryDeprecateMessage", !0), (!n || n.value === "custom") && Ke(
+    return Ke("skipBentoCountryDeprecateMessage", !0), (!n || n.value === "custom") && Ze(
       'BentoSelectCountryFilter type with `options.variant==="custom"`',
       "Use any of the other BentoSelectCountryFilter variants instead OR use BentoSelectFilter type for custom labels",
       "2.0.0"
     ), {
       // Values
-      countryOptions: d,
+      countryOptions: f,
       // Methods
       onUpdate: s,
       // Enums
@@ -953,26 +1078,26 @@ const ke = Qt.exports, Xt = x({
     };
   }
 });
-var el = function() {
+var dl = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("bento-select-filter", e._b({ attrs: { field: e.field, label: e.label, options: e.countryOptions }, on: { update: e.onUpdate, input: (a) => e.$emit(e.BentoFilterEvent.INPUT, a) }, scopedSlots: e._u([{ key: "default", fn: function({ value: a, label: n }) {
     return [l("bento-country", { attrs: { code: a, label: n, variant: "custom" } })];
   } }]) }, "bento-select-filter", e.$props, !1));
-}, tl = [], ll = /* @__PURE__ */ U(
-  Xt,
-  el,
-  tl,
+}, fl = [], bl = /* @__PURE__ */ T(
+  cl,
+  dl,
+  fl,
   !1,
   null,
   null,
   null,
   null
 );
-const Ve = ll.exports, al = x({
+const Le = bl.exports, _l = E({
   name: "bento-select-payment-method-filter",
   components: {
     BentoSelectFilter: w,
-    BentoPaymentMethod: _t
+    BentoPaymentMethod: yt
   },
   props: {
     ...w.props,
@@ -997,22 +1122,22 @@ const Ve = ll.exports, al = x({
     };
   }
 });
-var nl = function() {
+var vl = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("bento-select-filter", e._b({ attrs: { field: e.field, label: e.label }, on: { update: e.onUpdate, input: (a) => e.$emit(e.BentoFilterEvent.INPUT, a) }, scopedSlots: e._u([{ key: "default", fn: function({ value: a, label: n }) {
     return [l("bento-payment-method", { attrs: { type: a, label: n } })];
   } }]) }, "bento-select-filter", e.$props, !1));
-}, sl = [], ol = /* @__PURE__ */ U(
-  al,
-  nl,
-  sl,
+}, pl = [], yl = /* @__PURE__ */ T(
+  _l,
+  vl,
+  pl,
   !1,
   null,
   null,
   null,
   null
 );
-const Le = ol.exports, rl = x({
+const Ne = yl.exports, ml = E({
   name: "bento-select-country-filter",
   components: {
     BentoSelectFilter: w,
@@ -1033,15 +1158,15 @@ const Le = ol.exports, rl = x({
   },
   emits: [i.INPUT, i.UPDATE],
   setup(t, { emit: e }) {
-    const l = (s) => e(i.UPDATE, s), a = r(
+    const l = (s) => e(i.UPDATE, s), a = o(
       () => {
-        var s, u;
-        return (u = (s = t == null ? void 0 : t.options) == null ? void 0 : s.listboxItems) == null ? void 0 : u.map(({ label: d, value: c, variant: p }) => ({ label: d, value: c, data: p }));
+        var s, c;
+        return (c = (s = t == null ? void 0 : t.options) == null ? void 0 : s.listboxItems) == null ? void 0 : c.map(({ label: f, value: u, variant: p }) => ({ label: f, value: u, data: p }));
       }
     );
     return {
       // Values
-      countryOptions: r(() => ({
+      countryOptions: o(() => ({
         ...t.options,
         listboxItems: a.value
       })),
@@ -1052,30 +1177,30 @@ const Le = ol.exports, rl = x({
     };
   }
 });
-var il = function() {
+var hl = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("bento-select-filter", e._b({ attrs: { field: e.field, label: e.label, options: e.countryOptions }, on: { update: e.onUpdate, input: (a) => e.$emit(e.BentoFilterEvent.INPUT, a) }, scopedSlots: e._u([{ key: "default", fn: function({ label: a, data: n }) {
     return [l("listbox-option-tag", { attrs: { option: { value: a, data: n, label: "" } } })];
   } }]) }, "bento-select-filter", e.$props, !1));
-}, ul = [], cl = /* @__PURE__ */ U(
-  rl,
-  il,
-  ul,
+}, Fl = [], gl = /* @__PURE__ */ T(
+  ml,
+  hl,
+  Fl,
   !1,
   null,
   null,
   null,
   null
 );
-const Oe = cl.exports, dl = {
+const we = gl.exports, Cl = {
   "en-US": {
     yes: "Yes",
     no: "No"
   }
-}, fl = x({
+}, Sl = E({
   name: "bento-boolean-filter",
-  i18n: { messages: dl },
-  components: { BentoBaseFilter: Q, BentoRadioGroup: Ze },
+  i18n: { messages: Cl },
+  components: { BentoBaseFilter: Q, BentoRadioGroup: et },
   props: {
     /**
      * Default value of the filter to reset to.
@@ -1111,27 +1236,27 @@ const Oe = cl.exports, dl = {
   },
   emits: [i.INPUT, i.UPDATE],
   setup(t, { emit: e }) {
-    const { t: l } = W(), a = r(() => t.options && t.options.positiveOption && t.options.negativeOption ? [t.options.positiveOption, t.options.negativeOption] : [
+    const { t: l } = W(), a = o(() => t.options && t.options.positiveOption && t.options.negativeOption ? [t.options.positiveOption, t.options.negativeOption] : [
       { value: "yes", label: l("yes") },
       { value: "no", label: l("no") }
-    ]), { internalFilterValue: n, isSecondaryButtonDisabled: s, isApplyButtonDisabled: u } = X(
-      R(t, "value"),
-      R(t, "defaultValue")
-    ), d = r(
-      () => t.defaultValue === null ? t.label : K(a.value.find(({ value: B }) => B === t.value).label, 18)
-    ), c = r(
+    ]), { internalFilterValue: n, isSecondaryButtonDisabled: s, isApplyButtonDisabled: c } = X(
+      k(t, "value"),
+      k(t, "defaultValue")
+    ), f = o(
+      () => t.defaultValue === null ? t.label : K(a.value.find(({ value: A }) => A === t.value).label, 18)
+    ), u = o(
       () => {
-        var B;
-        return t.defaultValue === null ? K((B = a.value.find(({ value: m }) => m === t.value)) == null ? void 0 : B.label, 12) : null;
+        var A;
+        return t.defaultValue === null ? K((A = a.value.find(({ value: m }) => m === t.value)) == null ? void 0 : A.label, 12) : null;
       }
-    ), p = r(() => ({
+    ), p = o(() => ({
       ["b-boolean-filter--only-slot"]: t.onlySlot
     }));
-    re(() => {
+    oe(() => {
       n.value || (n.value = null);
     });
-    const _ = (B) => {
-      n.value = B, e(i.INPUT, { ...t, value: n.value });
+    const b = (A) => {
+      n.value = A, e(i.INPUT, { ...t, value: n.value });
     }, F = () => {
       n.value = t.value;
     }, v = () => {
@@ -1141,13 +1266,13 @@ const Oe = cl.exports, dl = {
       // Values
       items: a,
       conditionalClasses: p,
-      buttonLabel: d,
-      buttonSecondaryLabel: c,
+      buttonLabel: f,
+      buttonSecondaryLabel: u,
       internalFilterValue: n,
-      isApplyButtonDisabled: u,
+      isApplyButtonDisabled: c,
       isSecondaryButtonDisabled: s,
       // Events
-      onInput: _,
+      onInput: b,
       updateFilter: v,
       clearFilter: () => {
         n.value = null, v();
@@ -1157,30 +1282,30 @@ const Oe = cl.exports, dl = {
     };
   }
 });
-var bl = function() {
+var Al = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("bento-base-filter", e._b({ attrs: { "button-label": e.buttonLabel, "button-secondary-label": e.buttonSecondaryLabel, "disable-apply-button": e.isApplyButtonDisabled, "disable-secondary-button": e.isSecondaryButtonDisabled, "only-slot": e.onlySlot }, on: { apply: e.updateFilter, clear: e.clearFilter, open: e.openFilter, reset: e.resetFilter } }, "bento-base-filter", e.$props, !1), [l("div", { staticClass: "b-boolean-filter", class: e.conditionalClasses, on: { keydown: function(a) {
     return !a.type.indexOf("key") && e._k(a.keyCode, "enter", 13, a.key, "Enter") ? null : e.updateFilter.apply(null, arguments);
   } } }, [l("bento-radio-group", { attrs: { items: e.items, label: e.label, "model-value": e.internalFilterValue, "hide-label": "" }, on: { "update:model-value": e.onInput } })], 1)]);
-}, _l = [], vl = /* @__PURE__ */ U(
-  fl,
-  bl,
-  _l,
+}, Bl = [], Dl = /* @__PURE__ */ T(
+  Sl,
+  Al,
+  Bl,
   !1,
   null,
   "af2f275e",
   null,
   null
 );
-const Ne = vl.exports, pl = {
+const Me = Dl.exports, Tl = {
   "en-US": {
     from: "From",
     to: "To"
   }
-}, yl = x({
+}, El = E({
   name: "bento-range-filter",
-  i18n: { messages: pl },
-  components: { BentoBaseFilter: Q, BentoInputField: Ae },
+  i18n: { messages: Tl },
+  components: { BentoBaseFilter: Q, BentoInputField: Te },
   props: {
     /**
      * Default value of the filter to reset to.
@@ -1207,30 +1332,30 @@ const Ne = vl.exports, pl = {
   },
   emits: [i.INPUT, i.UPDATE],
   setup(t, { emit: e }) {
-    const l = I(null), { internalFilterValue: a, isSecondaryButtonDisabled: n, isApplyButtonDisabled: s } = X(
-      R(t, "value"),
-      R(t, "defaultValue")
-    ), u = r(
+    const l = U(null), { internalFilterValue: a, isSecondaryButtonDisabled: n, isApplyButtonDisabled: s } = X(
+      k(t, "value"),
+      k(t, "defaultValue")
+    ), c = o(
       () => {
-        var g, T;
-        return (g = t.value) != null && g[0] && ((T = t.value) != null && T[1]) ? `${K(t.value[0], 5)} - ${K(t.value[1], 5)}` : null;
+        var h, P;
+        return (h = t.value) != null && h[0] && ((P = t.value) != null && P[1]) ? `${K(t.value[0], 5)} - ${K(t.value[1], 5)}` : null;
       }
-    ), d = r(
-      () => t.defaultValue === null ? t.label : u.value
-    ), c = r(
-      () => t.defaultValue === null ? u.value : null
-    ), p = r(() => ({
+    ), f = o(
+      () => t.defaultValue === null ? t.label : c.value
+    ), u = o(
+      () => t.defaultValue === null ? c.value : null
+    ), p = o(() => ({
       ["b-range-filter--only-slot"]: t.onlySlot
-    })), _ = () => {
-      a.value = t.value, ze(() => l.value.focusInput());
+    })), b = () => {
+      a.value = t.value, Ge(() => l.value.focusInput());
     }, F = () => {
       e(i.INPUT, { ...t, value: a.value });
-    }, v = (g) => {
-      a.value = [g, a.value[1]], F();
-    }, h = (g) => {
-      a.value = [a.value[0], g], F();
+    }, v = (h) => {
+      a.value = [h, a.value[1]], F();
+    }, g = (h) => {
+      a.value = [a.value[0], h], F();
     }, D = () => {
-      a.value.some((g) => g) || (a.value = t.defaultValue !== null ? t.defaultValue : void 0), e(i.UPDATE, {
+      a.value.some((h) => h) || (a.value = t.defaultValue !== null ? t.defaultValue : void 0), e(i.UPDATE, {
         ...t,
         value: a.value
       });
@@ -1242,40 +1367,40 @@ const Ne = vl.exports, pl = {
       internalFilterValue: a,
       isApplyButtonDisabled: s,
       isSecondaryButtonDisabled: n,
-      buttonLabel: d,
-      buttonSecondaryLabel: c,
+      buttonLabel: f,
+      buttonSecondaryLabel: u,
       // Events
       updateFrom: v,
-      updateTo: h,
+      updateTo: g,
       updateFilter: D,
       clearFilter: () => {
         a.value = ["", ""], D();
       },
-      openFilter: _,
+      openFilter: b,
       resetFilter: () => e(i.UPDATE, { ...t, value: t.defaultValue })
     };
   }
 });
-var ml = function() {
+var Pl = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("bento-base-filter", e._b({ attrs: { "disable-apply-button": e.isApplyButtonDisabled, "disable-secondary-button": e.isSecondaryButtonDisabled, "button-label": e.buttonLabel, "button-secondary-label": e.buttonSecondaryLabel, "only-slot": e.onlySlot }, on: { apply: e.updateFilter, clear: e.clearFilter, open: e.openFilter, reset: e.resetFilter } }, "bento-base-filter", e.$props, !1), [l("div", { staticClass: "b-range-filter", class: e.conditionalClasses, on: { keydown: function(a) {
     return !a.type.indexOf("key") && e._k(a.keyCode, "enter", 13, a.key, "Enter") ? null : e.updateFilter.apply(null, arguments);
   } } }, [l("bento-input-field", { ref: "inputTextRef", attrs: { value: e.internalFilterValue ? e.internalFilterValue[0] : "", type: "number", "aria-label": e.$t("from").toString() }, on: { input: e.updateFrom } }, [e._v(" " + e._s(e.$t("from")) + " ")]), l("bento-input-field", { staticClass: "b-range-filter__input-field", attrs: { value: e.internalFilterValue ? e.internalFilterValue[1] : "", type: "number", "aria-label": e.$t("to").toString() }, on: { input: e.updateTo } }, [e._v(" " + e._s(e.$t("to")) + " ")])], 1)]);
-}, Fl = [], hl = /* @__PURE__ */ U(
-  yl,
-  ml,
-  Fl,
+}, xl = [], $l = /* @__PURE__ */ T(
+  El,
+  Pl,
+  xl,
   !1,
   null,
   "7cfba883",
   null,
   null
 );
-const we = hl.exports;
-var oe = /* @__PURE__ */ ((t) => (t.INPUT = "input", t))(oe || {});
-const Cl = x({
+const He = $l.exports;
+var re = /* @__PURE__ */ ((t) => (t.INPUT = "input", t))(re || {});
+const Ul = E({
   name: "base-filter-button",
-  components: { BaseButton: he, BentoTypography: ae, ChevronUpIcon: Se, ChevronDownIcon: Be },
+  components: { BaseButton: Ce, BentoTypography: ae, ChevronUpIcon: Be, ChevronDownIcon: De },
   props: {
     /**
      * The number of applies values within the filter.
@@ -1302,48 +1427,48 @@ const Cl = x({
   },
   emits: [fe.CLICK],
   setup(t, { slots: e, emit: l, attrs: a }) {
-    const n = r(() => e.default ? Ce(e)("default") : null), s = Fe({ ariaLabel: n }), u = I(null), d = r(() => {
-      var _;
+    const n = o(() => e.default ? Se(e)("default") : null), s = ge({ ariaLabel: n }), c = U(null), f = o(() => {
+      var b;
       return {
-        "aria-controls": (_ = a["aria-controls"]) == null ? void 0 : _.toString()
+        "aria-controls": (b = a["aria-controls"]) == null ? void 0 : b.toString()
       };
-    }), c = r(() => ({
+    }), u = o(() => ({
       ["b-base-filter-button--with-chevron"]: t.hasChevron,
       ["b-base-filter-button--filter-open"]: t.isFilterOpen
     }));
     return {
       // Values
-      ariaAttributes: d,
+      ariaAttributes: f,
       computedAriaLabel: s,
-      conditionalClasses: c,
+      conditionalClasses: u,
       // Methods
       onClickButton: () => {
         t.disabled || l(fe.CLICK);
       },
-      hasSlot: ge(e),
+      hasSlot: Ae(e),
       // Refs
-      baseFilterButtonRef: u
+      baseFilterButtonRef: c
     };
   }
 });
-var gl = function() {
+var Rl = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("base-button", { ref: "baseFilterButtonRef", staticClass: "b-base-filter-button", class: e.conditionalClasses, attrs: { disabled: e.disabled, "aria-label": e.computedAriaLabel, "aria-controls": e.ariaAttributes["aria-controls"], type: "button" }, on: { click: e.onClickButton }, scopedSlots: e._u([e.hasChevron ? { key: "iconRight", fn: function() {
     return [e.isFilterOpen ? l("chevron-up-icon", { attrs: { "aria-hidden": "true" } }) : l("chevron-down-icon", { attrs: { "aria-hidden": "true" } })];
   }, proxy: !0 } : null], null, !0) }, [l("div", { staticClass: "b-base-filter-button__default-container" }, [l("div", { staticClass: "b-base-filter-button__label-container" }, [l("bento-typography", { staticClass: "b-base-filter-button__label", attrs: { el: "span", variant: "body", stronger: e.bold } }, [e._t("default")], 2)], 1), e.amountAppliedValues && !e.hasChevron ? l("div", { staticClass: "b-base-filter-button__counter-wrapper" }, [l("bento-typography", { staticClass: "b-base-filter-button__counter", attrs: { el: "span", variant: "body", stronger: "" } }, [e._v(" " + e._s(e.amountAppliedValues) + " ")])], 1) : e._e()])]);
-}, Sl = [], Bl = /* @__PURE__ */ U(
-  Cl,
-  gl,
-  Sl,
+}, kl = [], Il = /* @__PURE__ */ T(
+  Ul,
+  Rl,
+  kl,
   !1,
   null,
   "66b170d4",
   null,
   null
 );
-const Al = Bl.exports, Dl = x({
+const Vl = Il.exports, Ol = E({
   name: "all-filters-modal-button",
-  components: { BaseFilterButton: Al },
+  components: { BaseFilterButton: Vl },
   props: {
     /**
      * Button label to be displayed
@@ -1365,7 +1490,7 @@ const Al = Bl.exports, Dl = x({
   emits: ["click"],
   setup(t, { emit: e }) {
     return {
-      conditionalClasses: r(() => ({
+      conditionalClasses: o(() => ({
         ["b-all-filters-modal-button--with-counter"]: t.appliedFiltersCount,
         ["b-all-filters-modal-button--filter-open"]: t.isFilterOpen
       })),
@@ -1375,40 +1500,40 @@ const Al = Bl.exports, Dl = x({
     };
   }
 });
-var Tl = function() {
+var Ll = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("base-filter-button", { staticClass: "b-all-filters-modal-button", class: e.conditionalClasses, attrs: { "amount-applied-values": e.appliedFiltersCount, "is-filter-open": e.isFilterOpen, disabled: e.disabled }, on: { click: e.onClick } }, [e._v(" " + e._s(e.label) + " ")]);
-}, El = [], Pl = /* @__PURE__ */ U(
-  Dl,
-  Tl,
-  El,
+}, Nl = [], wl = /* @__PURE__ */ T(
+  Ol,
+  Ll,
+  Nl,
   !1,
   null,
   "4c415ac7",
   null,
   null
 );
-const Ul = Pl.exports;
+const Ml = wl.exports;
 let ye = 0;
-const Il = {
+const Hl = {
   beforeCreate() {
     this.uuid = ye.toString(), ye += 1;
   }
 };
-var xl = function() {
+var ql = function() {
   var e = this, l = e._self._c;
-  return l("svg", e._b({ attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", e.$attrs, !1), [e.$attrs["svg-title"] ? l("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), l("path", { attrs: { 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" } }), l("path", { attrs: { 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" } })]);
-}, $l = [], Rl = /* @__PURE__ */ U(
-  Il,
-  xl,
-  $l,
+  return l("svg", e._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", e.$attrs, !1), [e.$attrs["svg-title"] ? l("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), l("path", { attrs: { fill: "#00112C", 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" } }), l("path", { attrs: { fill: "#00112C", 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" } })]);
+}, jl = [], Yl = /* @__PURE__ */ T(
+  Hl,
+  ql,
+  jl,
   !1,
   null,
-  "6a35173c",
+  null,
   null,
   null
 );
-const kl = Rl.exports, Vl = {
+const zl = Yl.exports, Jl = {
   "en-US": {
     all: "All",
     activeFilters: "Active filters",
@@ -1421,28 +1546,28 @@ const kl = Rl.exports, Vl = {
     otherFilters: "Other filters",
     searchBar: "Search bar"
   }
-}, Ll = x({
-  i18n: { messages: Vl },
+}, Kl = E({
+  i18n: { messages: Jl },
   name: "all-filters-modal",
   components: {
-    AllFiltersModalButton: Ul,
-    BentoBooleanFilter: Ne,
-    BentoButton: tt,
-    BentoDateFilter: xe,
-    BentoDateRangeFilter: $e,
-    BentoInputFilter: Ie,
-    BentoModal: Xe,
-    BentoRangeFilter: we,
+    AllFiltersModalButton: Ml,
+    BentoBooleanFilter: Me,
+    BentoButton: nt,
+    BentoDateFilter: ke,
+    BentoDateRangeFilter: Ie,
+    BentoInputFilter: Re,
+    BentoModal: lt,
+    BentoRangeFilter: He,
     BentoSearchBar: le,
-    BentoSelectAvatarFilter: Re,
-    BentoSelectCurrencyFilter: ke,
-    BentoSelectCountryFilter: Ve,
+    BentoSelectAvatarFilter: Ve,
+    BentoSelectCurrencyFilter: Oe,
+    BentoSelectCountryFilter: Le,
     BentoSelectFilter: w,
-    BentoSelectPaymentMethodFilter: Le,
-    BentoSelectTagFilter: Oe,
+    BentoSelectPaymentMethodFilter: Ne,
+    BentoSelectTagFilter: we,
     BentoTypography: ae,
     FilterBarButton: ue,
-    SlidersIcon: kl
+    SlidersIcon: zl
   },
   props: {
     /**
@@ -1470,10 +1595,10 @@ const kl = Rl.exports, Vl = {
       default: () => []
     }
   },
-  emits: [oe.INPUT],
+  emits: [re.INPUT],
   setup(t, { emit: e }) {
-    const l = me({ value: t.value }), a = ie("all-filters-modal"), n = I([]), s = I(!1), u = I(0), d = I(null), c = I(""), { t: p } = W(), _ = De(c, R(l, "value")), F = I({});
-    re(() => {
+    const l = he({ value: t.value }), a = ie("all-filters-modal"), n = U([]), s = U(!1), c = U(0), f = U(null), u = U(""), { t: p } = W(), b = Ee(u, k(l, "value")), F = U({});
+    oe(() => {
       F.value = [];
     }), te(
       () => t.value,
@@ -1481,177 +1606,177 @@ const kl = Rl.exports, Vl = {
         l.value = t.value;
       }
     );
-    const v = (o) => (
+    const v = (r) => (
       /* eslint-disable-next-line no-nested-ternary */
-      o.sort((C, S) => C.label > S.label ? 1 : S.label > C.label ? -1 : 0)
-    ), h = r(
+      r.sort((C, S) => C.label > S.label ? 1 : S.label > C.label ? -1 : 0)
+    ), g = o(
       () => v(
-        _.value.filter(
-          (o) => {
+        b.value.filter(
+          (r) => {
             var C, S;
-            return Array.isArray(o.value) ? ((C = o.value) == null ? void 0 : C.length) && ((S = o.value) == null ? void 0 : S.find(($) => $ !== "")) : o.value;
+            return Array.isArray(r.value) ? ((C = r.value) == null ? void 0 : C.length) && ((S = r.value) == null ? void 0 : S.find((R) => R !== "")) : r.value;
           }
         )
       )
-    ), D = r(
+    ), D = o(
       () => v(
-        _.value.filter(
-          (o) => {
+        b.value.filter(
+          (r) => {
             var C, S;
-            return Array.isArray(o.value) ? ((C = o.value) == null ? void 0 : C.length) === 0 || ((S = o.value) == null ? void 0 : S.every(($) => $ === "")) : !o.value;
+            return Array.isArray(r.value) ? ((C = r.value) == null ? void 0 : C.length) === 0 || ((S = r.value) == null ? void 0 : S.every((R) => R === "")) : !r.value;
           }
         )
       )
-    ), B = r(() => {
-      var o;
-      return c.value && ((o = _.value) == null ? void 0 : o.length) === 0;
-    }), m = r(() => l.value[u.value]), g = () => {
-      const o = h.value.length ? h.value[0] : D.value[0], C = l.value.findIndex(
-        (S) => S.label === o.label && S.field === o.field
+    ), A = o(() => {
+      var r;
+      return u.value && ((r = b.value) == null ? void 0 : r.length) === 0;
+    }), m = o(() => l.value[c.value]), h = () => {
+      const r = g.value.length ? g.value[0] : D.value[0], C = l.value.findIndex(
+        (S) => S.label === r.label && S.field === r.field
       );
-      u.value = C;
+      c.value = C;
     };
-    Je(() => {
-      g();
+    me(() => {
+      h();
     });
-    const T = r(
-      () => l.value.map((o) => {
-        var C, S, $, j, H, ce;
-        switch (o.type) {
+    const P = o(
+      () => l.value.map((r) => {
+        var C, S, R, j, H, ce;
+        switch (r.type) {
           case N.SELECT:
           case N.SELECT_AVATAR:
           case N.SELECT_COUNTRY:
           case N.SELECT_CURRENCY:
           case N.SELECT_PAYMENT_METHOD:
           case N.SELECT_TAG:
-            switch ((C = o.options) == null ? void 0 : C.multiple) {
+            switch ((C = r.options) == null ? void 0 : C.multiple) {
               case !0:
                 return {
-                  label: o.label,
-                  field: o.field,
-                  count: (S = o.value) != null && S.length ? ($ = o.value) == null ? void 0 : $.length : null
+                  label: r.label,
+                  field: r.field,
+                  count: (S = r.value) != null && S.length ? (R = r.value) == null ? void 0 : R.length : null
                 };
               default:
                 return {
-                  label: o.label,
-                  field: o.field,
-                  count: o.value == null ? null : 1
+                  label: r.label,
+                  field: r.field,
+                  count: r.value == null ? null : 1
                 };
             }
           case N.DATE_RANGE:
             return {
-              label: o.label,
-              field: o.field,
-              count: ((j = o.value) == null ? void 0 : j.startDate) != null && ((H = o.value) == null ? void 0 : H.endDate) != null ? 1 : null
+              label: r.label,
+              field: r.field,
+              count: ((j = r.value) == null ? void 0 : j.startDate) != null && ((H = r.value) == null ? void 0 : H.endDate) != null ? 1 : null
             };
           case N.RANGE:
             return {
-              label: o.label,
-              field: o.field,
-              count: (ce = o.value) != null && ce.find((Me) => Me !== "") ? 1 : null
+              label: r.label,
+              field: r.field,
+              count: (ce = r.value) != null && ce.find((qe) => qe !== "") ? 1 : null
             };
           case N.INPUT:
           case N.BOOLEAN:
           case N.DATE:
           default:
             return {
-              label: o.label,
-              field: o.field,
-              count: o.value != null ? 1 : null
+              label: r.label,
+              field: r.field,
+              count: r.value != null ? 1 : null
             };
         }
       })
-    ), y = r(
+    ), y = o(
       () => {
-        var o;
-        return Array.isArray(m.value.value) ? ((o = m.value) == null ? void 0 : o.value.length) && m.value.value.find((C) => C !== "") : !!l.value[u.value].value;
+        var r;
+        return Array.isArray(m.value.value) ? ((r = m.value) == null ? void 0 : r.value.length) && m.value.value.find((C) => C !== "") : !!l.value[c.value].value;
       }
-    ), b = r(
+    ), _ = o(
       () => {
-        var o;
+        var r;
         return (
           // eslint-disable-next-line no-return-assign, no-param-reassign
-          (o = T.value) == null ? void 0 : o.reduce((C, S) => C += S.count, 0)
+          (r = P.value) == null ? void 0 : r.reduce((C, S) => C += S.count, 0)
         );
       }
-    ), A = () => {
+    ), B = () => {
       s.value ? s.value = !1 : s.value = !0;
-    }, L = (o) => {
-      var S, $, j;
-      const C = T.value.find((H) => H.field === o.field).count;
-      return o.type.includes("BentoSelect") && ((S = o.options) != null && S.multiple) && C === ((j = ($ = o.options) == null ? void 0 : $.listboxItems) == null ? void 0 : j.length) ? p("all") : C;
-    }, Y = (o, C) => {
-      u.value = l.value.findIndex(
-        (S) => S.label === o && S.field === C
+    }, O = (r) => {
+      var S, R, j;
+      const C = P.value.find((H) => H.field === r.field).count;
+      return r.type.includes("BentoSelect") && ((S = r.options) != null && S.multiple) && C === ((j = (R = r.options) == null ? void 0 : R.listboxItems) == null ? void 0 : j.length) ? p("all") : C;
+    }, Y = (r, C) => {
+      c.value = l.value.findIndex(
+        (S) => S.label === r && S.field === C
       );
     }, J = () => {
-      c.value = "";
-    }, k = () => {
-      s.value = !1, l.value = t.value, J(), g();
-    }, E = (o) => {
-      const C = l.value.map(({ value: S, ...$ }, j) => j === u.value ? { value: o.value, ...$ } : { value: S, ...$ });
+      u.value = "";
+    }, I = () => {
+      s.value = !1, l.value = t.value, J(), h();
+    }, x = (r) => {
+      const C = l.value.map(({ value: S, ...R }, j) => j === c.value ? { value: r.value, ...R } : { value: S, ...R });
       l.value = C;
-    }, P = () => {
-      E({
+    }, $ = () => {
+      x({
         field: m.value.field,
         label: m.value.label,
         type: m.value.type,
         value: void 0
       });
-    }, O = () => {
-      l.value = l.value.map(({ value: o, ...C }) => ({
+    }, L = () => {
+      l.value = l.value.map(({ value: r, ...C }) => ({
         ...C,
         value: void 0
       }));
     }, V = () => {
-      e(oe.INPUT, l.value), s.value = !1;
-    }, f = r(
+      e(re.INPUT, l.value), s.value = !1;
+    }, d = o(
       () => JSON.stringify(l.value) === JSON.stringify(t.value)
-    ), M = r(() => [
+    ), M = o(() => [
       {
         title: p("applyAll"),
-        disabled: f.value,
+        disabled: d.value,
         event: V
       },
       {
         title: p("cancel"),
-        event: k
+        event: I
       },
       {
         title: p("clearAll"),
-        disabled: !b.value,
-        event: O
+        disabled: !_.value,
+        event: L
       }
     ]);
     return {
       // Enums
-      BentoModalEvent: et,
+      BentoModalEvent: at,
       // Values
       allFiltersModalUniqueId: a,
       allFiltersModalFiltersSection: n,
       allFiltersModalFilterButtons: F,
-      numberOfActiveFilters: b,
-      isEmptyResultForSearchFilter: B,
+      numberOfActiveFilters: _,
+      isEmptyResultForSearchFilter: A,
       isModalOpen: s,
       isClearButtonEnabled: y,
-      activeFilters: h,
+      activeFilters: g,
       otherFilters: D,
       modalActions: M,
       selectedFilter: m,
-      selectedFilterRef: d,
+      selectedFilterRef: f,
       filters: l,
-      computedCounts: T,
-      searchTerm: c,
+      computedCounts: P,
+      searchTerm: u,
       // Methods
-      onClickAllFiltersModal: A,
-      getFilterCount: L,
-      cancel: k,
+      onClickAllFiltersModal: B,
+      getFilterCount: O,
+      cancel: I,
       selectFilter: Y,
-      clearFilter: P,
-      updateFilter: E,
+      clearFilter: $,
+      updateFilter: x,
       onSearchbarClear: J,
       onKeydownRight: () => {
-        at(1, d.value.$el).focus();
+        rt(1, f.value.$el).focus();
       },
       onKeydownLeft: () => {
         F.value[m.value.label].$el.focus();
@@ -1659,7 +1784,7 @@ const kl = Rl.exports, Vl = {
     };
   }
 });
-var Ol = function() {
+var Gl = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("div", { staticClass: "b-all-filters-modal" }, [l("filter-bar-button", { attrs: { "is-filter-open": e.isModalOpen, "applied-filters-count": e.numberOfActiveFilters }, on: { click: e.onClickAllFiltersModal }, scopedSlots: e._u([{ key: "iconLeft", fn: function() {
     return [l("sliders-icon", { attrs: { "aria-hidden": "true" } })];
@@ -1684,17 +1809,17 @@ var Ol = function() {
       return !a.type.indexOf("key") && e._k(a.keyCode, "left", 37, a.key, ["Left", "ArrowLeft"]) || "button" in a && a.button !== 0 ? null : e.onKeydownLeft.apply(null, arguments);
     } } }, [l("div", { staticClass: "b-all-filters-modal__selected-filter-text" }, [l("bento-typography", { attrs: { el: "div", variant: "title", medium: "" } }, [e._v(e._s(e.selectedFilter.label))]), e.selectedFilter.description ? l("bento-typography", { attrs: { el: "div", variant: "body", wide: "" } }, [e._v(" " + e._s(e.selectedFilter.description) + " ")]) : e._e()], 1), l("div", { staticClass: "b-all-filters-modal__selected-filter-component" }, [l(e.selectedFilter.type, { key: e.selectedFilter.field, ref: "selectedFilterRef", tag: "component", attrs: { field: e.selectedFilter.field, label: e.selectedFilter.label, options: e.selectedFilter.options, value: e.selectedFilter.value, "default-value": e.selectedFilter.defaultValue, "only-slot": !0 }, on: { input: e.updateFilter } })], 1), l("div", { staticClass: "b-all-filters-modal__clear-button" }, [l("bento-button", { attrs: { variant: "secondary", disabled: !e.isClearButtonEnabled }, on: { click: e.clearFilter } }, [e._v(e._s(e.$t("clear")))])], 1)])];
   }, proxy: !0 }]) })], 1);
-}, Nl = [], wl = /* @__PURE__ */ U(
-  Ll,
-  Ol,
-  Nl,
+}, Wl = [], Zl = /* @__PURE__ */ T(
+  Kl,
+  Gl,
+  Wl,
   !1,
   null,
   "97626423",
   null,
   null
 );
-const Ml = wl.exports, Hl = {
+const Ql = Zl.exports, Xl = {
   "en-US": {
     clearAll: "Clear all",
     filtersHaveBeenCleared: "Filters have been cleared.",
@@ -1703,25 +1828,26 @@ const Ml = wl.exports, Hl = {
     resetAll: "Reset all",
     searchBar: "Search bar"
   }
-}, ql = x({
-  i18n: { messages: Hl },
+}, ea = E({
+  i18n: { messages: Xl },
   name: "bento-filter-bar",
   components: {
-    AllFiltersModal: Ml,
-    BentoBooleanFilter: Ne,
-    BentoDateFilter: xe,
-    BentoDateRangeFilter: $e,
-    BentoRangeFilter: we,
-    BentoInputFilter: Ie,
+    AllFiltersModal: Ql,
+    BentoBooleanFilter: Me,
+    BentoDateFilter: ke,
+    BentoDateRangeFilter: Ie,
+    BentoRangeFilter: He,
+    BentoInputFilter: Re,
     BentoSelectFilter: w,
-    BentoSelectAvatarFilter: Re,
-    BentoSelectCountryFilter: Ve,
-    BentoSelectCurrencyFilter: ke,
-    BentoSelectPaymentMethodFilter: Le,
-    BentoSelectTagFilter: Oe,
+    BentoSelectAvatarFilter: Ve,
+    BentoSelectCountryFilter: Le,
+    BentoSelectCurrencyFilter: Oe,
+    BentoSelectPaymentMethodFilter: Ne,
+    BentoSelectTagFilter: we,
     BentoSearchBar: le,
     FilterBarButton: ue,
-    RefreshIcon: vt
+    FixedScroller: ht,
+    RefreshIcon: mt
   },
   props: {
     /**
@@ -1805,61 +1931,61 @@ const Ml = wl.exports, Hl = {
     Z.UPDATE
   ],
   setup(t, { emit: e }) {
-    const { t: l } = W(), a = r(
+    const { t: l } = W(), a = o(
       () => {
-        var y, b;
-        return (b = ((y = t.config) == null ? void 0 : y.length) > 0 ? t.config : t.value) == null ? void 0 : b.map((A) => {
+        var y, _;
+        return (_ = ((y = t.config) == null ? void 0 : y.length) > 0 ? t.config : t.value) == null ? void 0 : _.map((B) => {
           var Y;
-          const L = (Y = t.filterValues.find(({ field: J }) => J === A.field)) == null ? void 0 : Y.value;
-          return { ...A, value: L !== void 0 ? L : A == null ? void 0 : A.value };
+          const O = (Y = t.filterValues.find(({ field: J }) => J === B.field)) == null ? void 0 : Y.value;
+          return { ...B, value: O !== void 0 ? O : B == null ? void 0 : B.value };
         });
       }
-    ), n = Qe(), s = r(() => l("searchBar")), u = r(() => a.value.some(
-      ({ visible: b }) => b != null
-    ) ? a.value.some(({ visible: b }) => !b) : !1), d = r(
+    ), n = tt(), s = o(() => l("searchBar")), c = o(() => a.value.some(
+      ({ visible: _ }) => _ != null
+    ) ? a.value.some(({ visible: _ }) => !_) : !1), f = o(
       () => a.value.filter(({ defaultValue: y }) => y !== void 0)
-    ), c = r(() => a.value.some(
-      ({ visible: b }) => b != null
+    ), u = o(() => a.value.some(
+      ({ visible: _ }) => _ != null
     ) ? a.value.filter(
-      ({ defaultValue: b, visible: A }) => b === void 0 && A
-    ) : a.value.filter(({ defaultValue: b }) => b === void 0)), p = r(() => t.searchTerm != null), _ = r(
+      ({ defaultValue: _, visible: B }) => _ === void 0 && B
+    ) : a.value.filter(({ defaultValue: _ }) => _ === void 0)), p = o(() => t.searchTerm != null), b = o(
       () => a.value.filter(({ defaultValue: y }) => y == null).some(({ value: y }) => y != null)
-    ), F = r(() => d.value.length === 0 && _.value), v = r(() => d.value.length === 0 ? !1 : !a.value.filter(({ defaultValue: b }) => b !== void 0 || b !== null).every(({ value: b, defaultValue: A }) => JSON.stringify(b) === JSON.stringify(A)) || _.value), h = (y) => {
+    ), F = o(() => f.value.length === 0 && b.value), v = o(() => f.value.length === 0 ? !1 : !a.value.filter(({ defaultValue: _ }) => _ !== void 0 || _ !== null).every(({ value: _, defaultValue: B }) => JSON.stringify(_) === JSON.stringify(B)) || b.value), g = (y) => {
       e(ee.INPUT, y), e(
         ee.UPDATE_FILTER_VALUES,
-        y == null ? void 0 : y.filter(({ value: b }) => b !== null || b !== void 0).map(({ field: b, value: A }) => ({ field: b, value: A }))
+        y == null ? void 0 : y.filter(({ value: _ }) => _ !== null || _ !== void 0).map(({ field: _, value: B }) => ({ field: _, value: B }))
       );
     };
     return {
       // Values
-      hasHiddenFilters: u,
+      hasHiddenFilters: c,
       isClearAllVisible: F,
       isSearchBarEnabled: p,
       searchBarAriaLabel: s,
-      persistentFilters: d,
-      regularFilters: c,
+      persistentFilters: f,
+      regularFilters: u,
       isResetAllVisible: v,
       valueAndFilterValuesPropsMerged: a,
       // Events
-      updateAllFilters: h,
+      updateAllFilters: g,
       updateFilterHandler: (y) => {
-        const b = a.value.findIndex(
-          (L) => L.field === y.field
-        ), A = a.value.slice();
-        A[b].value = y.value, h(A);
+        const _ = a.value.findIndex(
+          (O) => O.field === y.field
+        ), B = a.value.slice();
+        B[_].value = y.value, g(B);
       },
       clearAllFilters: () => {
-        const y = a.value.slice(), b = a.value.map(({ value: A, ...L }) => ({
-          ...L,
+        const y = a.value.slice(), _ = a.value.map(({ value: B, ...O }) => ({
+          ...O,
           value: void 0
         }));
         n.addToast({
           text: l("filtersHaveBeenCleared"),
           action: {
-            handler: () => h(y),
+            handler: () => g(y),
             text: l("undo")
           }
-        }), h(b);
+        }), g(_);
       },
       onSearchbarClear: () => {
         e(Z.CLEAR);
@@ -1868,46 +1994,50 @@ const Ml = wl.exports, Hl = {
         e(Z.INPUT, y), e(Z.UPDATE, y);
       },
       resetAllFilters: () => {
-        const y = a.value.slice(), b = a.value.map(({ defaultValue: A, ...L }) => ({
-          ...L,
-          defaultValue: A,
-          value: A
+        const y = a.value.slice(), _ = a.value.map(({ defaultValue: B, ...O }) => ({
+          ...O,
+          defaultValue: B,
+          value: B
         }));
         n.addToast({
           text: l("filtersHaveBeenReset"),
           action: {
-            handler: () => h(y),
+            handler: () => g(y),
             text: l("undo")
           }
-        }), h(b);
+        }), g(_);
       }
     };
   }
 });
-var jl = function() {
+var ta = function() {
   var e = this, l = e._self._c;
-  return e._self._setupProxy, l("div", { staticClass: "b-filter-bar" }, [e.isSearchBarEnabled ? l("bento-search-bar", { staticClass: "b-filter-bar__search-bar", attrs: { "input-field-aria-label": e.searchBarAriaLabel, value: e.searchTerm, condensed: "" }, on: { input: e.onSearchbarInput, clear: e.onSearchbarClear } }) : e._e(), e.persistentFilters.length ? e._l(e.persistentFilters, function(a) {
+  return e._self._setupProxy, l("div", { staticClass: "b-filter-bar" }, [l("div", { staticClass: "b-filter-bar__container" }, [e.isSearchBarEnabled || e.hasHiddenFilters || e.isClearAllVisible || e.isResetAllVisible ? l("div", { staticClass: "b-filter-bar__before-filters" }, [e.isSearchBarEnabled ? l("bento-search-bar", { staticClass: "b-filter-bar__search-bar", attrs: { "input-field-aria-label": e.searchBarAriaLabel, value: e.searchTerm, condensed: "" }, on: { input: e.onSearchbarInput, clear: e.onSearchbarClear } }) : e._e(), e.hasHiddenFilters ? l("all-filters-modal", { staticClass: "b-filter-bar__all-filters-modal", attrs: { value: e.valueAndFilterValuesPropsMerged }, on: { input: e.updateAllFilters } }) : e._e(), l("filter-bar-button", { directives: [{ name: "show", rawName: "v-show", value: e.isClearAllVisible, expression: "isClearAllVisible" }], staticClass: "b-filter-bar__clear-all", on: { click: e.clearAllFilters }, scopedSlots: e._u([{ key: "iconLeft", fn: function() {
+    return [l("refresh-icon", { attrs: { "aria-hidden": "true" } })];
+  }, proxy: !0 }], null, !1, 3891055301) }, [e._v(" " + e._s(e.$t("clearAll")) + " ")]), l("filter-bar-button", { directives: [{ name: "show", rawName: "v-show", value: e.isResetAllVisible, expression: "isResetAllVisible" }], staticClass: "b-filter-bar__reset-all", on: { click: e.resetAllFilters }, scopedSlots: e._u([{ key: "iconLeft", fn: function() {
+    return [l("refresh-icon", { attrs: { "aria-hidden": "true" } })];
+  }, proxy: !0 }], null, !1, 3891055301) }, [e._v(" " + e._s(e.$t("resetAll")) + " ")])], 1) : e._e(), l("div", { staticClass: "b-filter-bar__filters-container" }, [l("div", { staticClass: "b-filter-bar__filters" }, [l("fixed-scroller", { attrs: { condensed: "" } }, [l("div", { staticClass: "b-filter-bar__scroller-content" }, [e.isSearchBarEnabled ? l("bento-search-bar", { staticClass: "b-filter-bar__search-bar", attrs: { "input-field-aria-label": e.searchBarAriaLabel, value: e.searchTerm, condensed: "" }, on: { input: e.onSearchbarInput, clear: e.onSearchbarClear } }) : e._e(), e.persistentFilters.length ? e._l(e.persistentFilters, function(a) {
     return l(a.type, { key: a.field, tag: "component", attrs: { field: a.field, label: a.label, options: a.options, value: a.value, "default-value": a.defaultValue }, on: { update: e.updateFilterHandler } });
   }) : e._e(), e._l(e.regularFilters, function(a) {
     return l(a.type, { key: a.field, tag: "component", attrs: { field: a.field, label: a.label, options: a.options, value: a.value }, on: { update: e.updateFilterHandler } });
-  }), e.hasHiddenFilters ? l("all-filters-modal", { attrs: { value: e.valueAndFilterValuesPropsMerged }, on: { input: e.updateAllFilters } }) : e._e(), l("filter-bar-button", { directives: [{ name: "show", rawName: "v-show", value: e.isClearAllVisible, expression: "isClearAllVisible" }], on: { click: e.clearAllFilters }, scopedSlots: e._u([{ key: "iconLeft", fn: function() {
+  })], 2)])], 1), e.hasHiddenFilters || e.isClearAllVisible || e.isResetAllVisible ? l("div", { staticClass: "b-filter-bar__actions" }, [e.hasHiddenFilters ? l("all-filters-modal", { staticClass: "b-filter-bar__all-filters-modal", attrs: { value: e.valueAndFilterValuesPropsMerged }, on: { input: e.updateAllFilters } }) : e._e(), l("filter-bar-button", { directives: [{ name: "show", rawName: "v-show", value: e.isClearAllVisible, expression: "isClearAllVisible" }], staticClass: "b-filter-bar__clear-all", on: { click: e.clearAllFilters }, scopedSlots: e._u([{ key: "iconLeft", fn: function() {
     return [l("refresh-icon", { attrs: { "aria-hidden": "true" } })];
-  }, proxy: !0 }]) }, [e._v(" " + e._s(e.$t("clearAll")) + " ")]), l("filter-bar-button", { directives: [{ name: "show", rawName: "v-show", value: e.isResetAllVisible, expression: "isResetAllVisible" }], staticClass: "b-filter-bar__reset-all", on: { click: e.resetAllFilters }, scopedSlots: e._u([{ key: "iconLeft", fn: function() {
+  }, proxy: !0 }], null, !1, 3891055301) }, [e._v(" " + e._s(e.$t("clearAll")) + " ")]), l("filter-bar-button", { directives: [{ name: "show", rawName: "v-show", value: e.isResetAllVisible, expression: "isResetAllVisible" }], staticClass: "b-filter-bar__reset-all", on: { click: e.resetAllFilters }, scopedSlots: e._u([{ key: "iconLeft", fn: function() {
     return [l("refresh-icon", { attrs: { "aria-hidden": "true" } })];
-  }, proxy: !0 }]) }, [e._v(" " + e._s(e.$t("resetAll")) + " ")])], 2);
-}, Yl = [], zl = /* @__PURE__ */ U(
-  ql,
-  jl,
-  Yl,
+  }, proxy: !0 }], null, !1, 3891055301) }, [e._v(" " + e._s(e.$t("resetAll")) + " ")])], 1) : e._e()])])]);
+}, la = [], aa = /* @__PURE__ */ T(
+  ea,
+  ta,
+  la,
   !1,
   null,
-  "39eb8244",
+  "e8f24c01",
   null,
   null
 );
-const Pa = zl.exports;
+const qa = aa.exports;
 export {
-  Pa as BentoFilterBar,
+  qa as BentoFilterBar,
   ee as BentoFilterBarEvent,
   i as BentoFilterEvent,
   N as BentoFilterItemType