@adyen/bento-vue3 1.5.0 → 1.6.0

package/dist/filter-bar.js

@@ -1,45 +1,44 @@
-import { defineComponent as L, useSlots as _t, useAttrs as Ft, computed as f, ref as w, openBlock as p, createBlock as A, unref as X, normalizeClass as pe, withCtx as m, createTextVNode as N, toDisplayString as k, createCommentVNode as M, createElementBlock as E, createElementVNode as P, renderSlot as ae, createVNode as C, watch as me, resolveComponent as y, resolveDirective as ht, withDirectives as he, withKeys as ue, toRef as H, onBeforeUpdate as Se, mergeProps as x, Fragment as de, reactive as ze, createSlots as Ce, renderList as ce, normalizeProps as Ue, guardReactiveProps as Ee, pushScopeId as Be, popScopeId as Ae, toRefs as Ct, provide as gt, nextTick as $t, onMounted as St, resolveDynamicComponent as ge, vShow as Pe } from "vue";
-import { _ as R } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import { BentoPopover as ke } from "./popover.js";
-import { B as Bt } from "./chunks/directive.0408e565.js";
-import { B as At } from "./chunks/tooltip.c8350cd0.js";
-import { u as oe } from "./chunks/i18n.6c402773.js";
-import { g as Ie } from "./chunks/unique-id.a2a2b458.js";
-import { B as re, d as It } from "./chunks/index.32ed68b7.js";
-import { u as Je } from "./chunks/aria-label.ac9651a5.js";
-import { B as Ge, a as Re } from "./chunks/base-button.9740f320.js";
-import { g as Ze } from "./chunks/get-slot-text.bead058f.js";
-import { u as We } from "./chunks/use-has-slot.3daaffc6.js";
-import { a as Qe, C as Xe } from "./chunks/chevron-up.9bf21068.js";
-import { BentoRadioGroup as Dt } from "./radio-group.js";
-import { BentoInputField as xe } from "./input-field.js";
-import { BentoSearchBar as Fe, BentoSearchBarEvent as ie } from "./search-bar.js";
-import { u as Tt } from "./chunks/toastController.0b01d2e8.js";
-import { BentoModal as Ut } from "./modal.js";
-import { e as Et } from "./chunks/base-modal.be77971f.js";
-import { a as Pt } from "./chunks/button.7072457f.js";
-import { B as kt, u as et } from "./chunks/dropdown.22e51667.js";
-import { g as Rt } from "./chunks/index.604da8e9.js";
-import { BentoDivider as tt } from "./divider.js";
-import { BentoDatePicker as Ot } from "./date-picker.js";
-import { f as ve } from "./chunks/index.c62ea69f.js";
-import { e as ne, d as lt, f as nt } from "./chunks/index.f55fdc32.js";
-import { C as Vt } from "./chunks/calendar.1e50c7d1.js";
-import { B as Nt, D as wt } from "./chunks/index.a57930ba.js";
-import { D as Oe } from "./chunks/date-input.9186a0bf.js";
-import { BentoButtonActions as Lt } from "./button.js";
-import { B as Mt } from "./chunks/listbox.4205c0de.js";
-import { B as Ht, L as at } from "./chunks/listbox-option-tag.fa70334e.js";
-import { BentoCountry as qt } from "./country.js";
-import { u as Kt } from "./chunks/useCountryItems.e83ef8f0.js";
-import { BentoPaymentMethod as jt } from "./payment-method.js";
-import "./assets/index42.css";
-var v = /* @__PURE__ */ ((e) => (e.INPUT = "input", e.UPDATE = "update", e))(v || {}), ee = /* @__PURE__ */ ((e) => (e.INPUT = "input", e))(ee || {}), Y = /* @__PURE__ */ ((e) => (e.INPUT = "BentoInputFilter", e.BOOLEAN = "BentoBooleanFilter", e.RANGE = "BentoRangeFilter", e.SELECT = "BentoSelectFilter", e.SELECT_AVATAR = "BentoSelectAvatarFilter", e.SELECT_COUNTRY = "BentoSelectCountryFilter", e.SELECT_CURRENCY = "BentoSelectCurrencyFilter", e.SELECT_PAYMENT_METHOD = "BentoSelectPaymentMethodFilter", e.SELECT_TAG = "BentoSelectTagFilter", e.DATE = "BentoDateFilter", e.DATE_RANGE = "BentoDateRangeFilter", e))(Y || {});
-const Yt = { class: "b-filter-bar-button__container" }, zt = { class: "b-filter-bar-button__label-container" }, Jt = {
+import { defineComponent as q, useSlots as Ct, useAttrs as gt, computed as b, ref as H, openBlock as p, createBlock as B, unref as le, normalizeClass as ve, withCtx as _, createTextVNode as w, toDisplayString as V, createCommentVNode as K, createElementBlock as k, createElementVNode as R, renderSlot as ie, createVNode as S, watch as Fe, resolveComponent as y, resolveDirective as St, withDirectives as Se, withKeys as be, toRef as z, onBeforeUpdate as De, mergeProps as ne, Fragment as fe, reactive as We, createSlots as $e, renderList as pe, normalizeProps as ke, guardReactiveProps as Ve, pushScopeId as Ie, popScopeId as Te, toRefs as $t, provide as Bt, nextTick as At, onMounted as Dt, resolveDynamicComponent as Be, vShow as Re } from "vue";
+import { _ as L } from "./chunks/_plugin-vue_export-helper.dad06003.js";
+import { BentoPopover as Le } from "./popover.js";
+import { B as It } from "./chunks/directive.0408e565.js";
+import { B as Tt } from "./chunks/tooltip.6af06509.js";
+import { u as re } from "./chunks/i18n.6c402773.js";
+import { g as Ee } from "./chunks/unique-id.a2a2b458.js";
+import { B as ce, d as Et } from "./chunks/index.9fc54b60.js";
+import { u as Qe } from "./chunks/aria-label.ac9651a5.js";
+import { B as Xe, a as Oe } from "./chunks/base-button.90687c75.js";
+import { g as xe } from "./chunks/get-slot-text.bead058f.js";
+import { u as et } from "./chunks/use-has-slot.4d98bf29.js";
+import { a as tt, C as lt } from "./chunks/chevron-up.9bf21068.js";
+import { BentoRadioGroup as Ut } from "./radio-group.js";
+import { BentoInputField as nt } from "./input-field.js";
+import { BentoSearchBar as he, BentoSearchBarEvent as de } from "./search-bar.js";
+import { u as Pt } from "./chunks/toastController.0b01d2e8.js";
+import { BentoModal as kt } from "./modal.js";
+import { e as Vt } from "./chunks/base-modal.c956b084.js";
+import { a as Rt } from "./chunks/button.9d72e2d7.js";
+import { B as Lt, u as at } from "./chunks/dropdown.6a484461.js";
+import { g as Ot } from "./chunks/index.bc9e0cde.js";
+import { BentoDivider as ot } from "./divider.js";
+import { BentoDatePicker as Nt } from "./date-picker.js";
+import { f as se } from "./chunks/index.754349ff.js";
+import { e as ae, d as st, f as it } from "./chunks/index.f55fdc32.js";
+import { C as wt, i as Mt } from "./chunks/calendar.e7db78d0.js";
+import { B as Ht, D as qt, i as Ne } from "./chunks/index.84f6360f.js";
+import { D as we } from "./chunks/date-input.9186a0bf.js";
+import { BentoButtonActions as Kt } from "./button.js";
+import { B as jt } from "./chunks/listbox.a7255ce1.js";
+import { B as Yt, L as rt } from "./chunks/listbox-option-tag.ea9f377f.js";
+import { BentoCountry as zt } from "./country.js";
+import { u as Jt } from "./chunks/useCountryItems.e83ef8f0.js";
+import { BentoPaymentMethod as Gt } from "./payment-method.js";
+import "./assets/index13.css";
+const Zt = { class: "b-filter-bar-button__container" }, Wt = { class: "b-filter-bar-button__label-container" }, Qt = {
   key: 1,
   class: "b-filter-bar-button__chevron"
-}, Gt = {}, Zt = /* @__PURE__ */ L({
-  ...Gt,
+}, Xt = {}, xt = /* @__PURE__ */ q({
+  ...Xt,
   __name: "filter-bar-button",
   props: {
     /**
@@ -69,78 +68,78 @@ const Yt = { class: "b-filter-bar-button__container" }, zt = { class: "b-filter-
   },
   emits: ["click"],
   setup(e, { emit: t }) {
-    const n = e, l = _t(), s = Ft(), i = We(l), o = f(() => l.default ? Ze(l)("default") : null), r = Je({ ariaLabel: o }), a = w(null), u = f(() => {
-      var _;
+    const n = e, l = Ct(), o = gt(), i = et(l), s = b(() => l.default ? xe(l)("default") : null), r = Qe({ ariaLabel: s }), a = H(null), f = b(() => {
+      var F;
       return {
-        "aria-controls": (_ = s["aria-controls"]) == null ? void 0 : _.toString()
+        "aria-controls": (F = o["aria-controls"]) == null ? void 0 : F.toString()
       };
-    }), d = f(() => ({
+    }), u = b(() => ({
       "b-filter-bar-button--filter-open": n.isFilterOpen,
       "b-filter-bar-button--with-counter": n.appliedFiltersCount,
       "b-filter-bar-button--with-chevron": n.hasChevron
-    })), g = (_) => {
-      n.disabled || t("click", _);
+    })), g = (F) => {
+      n.disabled || t("click", F);
     };
-    return (_, b) => (p(), A(X(Ge), {
+    return (F, d) => (p(), B(le(Xe), {
       ref_key: "filterBarButtonRef",
       ref: a,
-      class: pe(["b-filter-bar-button", X(d)]),
+      class: ve(["b-filter-bar-button", le(u)]),
       disabled: e.disabled,
-      "aria-label": X(r),
-      "aria-controls": X(u)["aria-controls"],
+      "aria-label": le(r),
+      "aria-controls": le(f)["aria-controls"],
       type: "button",
       onClick: g
     }, {
-      iconRight: m(() => [
-        e.appliedFiltersCount && !e.hasChevron ? (p(), A(X(re), {
+      iconRight: _(() => [
+        e.appliedFiltersCount && !e.hasChevron ? (p(), B(le(ce), {
           key: 0,
           class: "b-filter-bar-button__counter",
           el: "span",
           variant: "body",
           stronger: ""
         }, {
-          default: m(() => [
-            N(k(e.appliedFiltersCount), 1)
+          default: _(() => [
+            w(V(e.appliedFiltersCount), 1)
           ]),
           _: 1
-        })) : M("", !0),
-        e.hasChevron ? (p(), E("div", Jt, [
-          e.isFilterOpen ? (p(), A(X(Qe), {
+        })) : K("", !0),
+        e.hasChevron ? (p(), k("div", Qt, [
+          e.isFilterOpen ? (p(), B(le(tt), {
             key: 0,
             "aria-hidden": "true"
-          })) : (p(), A(X(Xe), {
+          })) : (p(), B(le(lt), {
             key: 1,
             "aria-hidden": "true"
           }))
-        ])) : M("", !0)
+        ])) : K("", !0)
       ]),
-      default: m(() => [
-        P("div", Yt, [
-          X(i)("iconLeft") ? ae(_.$slots, "iconLeft", { key: 0 }, void 0, !0) : M("", !0),
-          P("div", zt, [
-            C(X(re), {
+      default: _(() => [
+        R("div", Zt, [
+          le(i)("iconLeft") ? ie(F.$slots, "iconLeft", { key: 0 }, void 0, !0) : K("", !0),
+          R("div", Wt, [
+            S(le(ce), {
               el: "span",
               variant: "body",
               stronger: "",
               class: "b-filter-bar-button__label"
             }, {
-              default: m(() => [
-                ae(_.$slots, "default", {}, void 0, !0)
+              default: _(() => [
+                ie(F.$slots, "default", {}, void 0, !0)
               ]),
               _: 3
             }),
-            e.secondaryLabel ? (p(), A(X(re), {
+            e.secondaryLabel ? (p(), B(le(ce), {
               key: 0,
               el: "span",
               variant: "body",
               stronger: "",
               class: "b-filter-bar-button__secondary-label"
             }, {
-              default: m(() => [
-                N(k(e.secondaryLabel), 1)
+              default: _(() => [
+                w(V(e.secondaryLabel), 1)
               ]),
               _: 1
-            })) : M("", !0)
+            })) : K("", !0)
           ])
         ])
       ]),
@@ -148,9 +147,9 @@ const Yt = { class: "b-filter-bar-button__container" }, zt = { class: "b-filter-
     }, 8, ["class", "disabled", "aria-label", "aria-controls"]));
   }
 });
-const De = /* @__PURE__ */ R(Zt, [["__scopeId", "data-v-b1f946e5"]]);
-var W = /* @__PURE__ */ ((e) => (e.APPLY = "apply", e.CLEAR = "clear", e.OPEN = "open", e.CLOSE = "close", e.RESET = "reset", e))(W || {});
-const Ve = {
+const Ue = /* @__PURE__ */ L(xt, [["__scopeId", "data-v-b1f946e5"]]);
+var v = /* @__PURE__ */ ((e) => (e.INPUT = "input", e.UPDATE = "update", e))(v || {}), _e = /* @__PURE__ */ ((e) => (e.INPUT = "input", e.UPDATE_FILTER_VALUES = "update:filter-values", e))(_e || {}), W = /* @__PURE__ */ ((e) => (e.INPUT = "BentoInputFilter", e.BOOLEAN = "BentoBooleanFilter", e.RANGE = "BentoRangeFilter", e.SELECT = "BentoSelectFilter", e.SELECT_AVATAR = "BentoSelectAvatarFilter", e.SELECT_COUNTRY = "BentoSelectCountryFilter", e.SELECT_CURRENCY = "BentoSelectCurrencyFilter", e.SELECT_PAYMENT_METHOD = "BentoSelectPaymentMethodFilter", e.SELECT_TAG = "BentoSelectTagFilter", e.DATE = "BentoDateFilter", e.DATE_RANGE = "BentoDateRangeFilter", e))(W || {}), ee = /* @__PURE__ */ ((e) => (e.APPLY = "apply", e.CLEAR = "clear", e.OPEN = "open", e.CLOSE = "close", e.RESET = "reset", e))(ee || {});
+const Me = {
   "en-US": {
     clear: "Clear",
     apply: "Apply",
@@ -176,14 +175,14 @@ const Ve = {
     clear: "Borrar",
     apply: "Aplicar"
   }
-}, Wt = L({
-  i18n: { messages: Ve },
+}, el = q({
+  i18n: { messages: Me },
   name: "bento-base-filter",
   components: {
-    BentoPopover: ke,
-    FilterBarButton: De
+    BentoPopover: Le,
+    FilterBarButton: Ue
   },
-  directives: { BentoClickOutsideDirective: Bt },
+  directives: { BentoClickOutsideDirective: It },
   props: {
     /**
      * Total count of applied filters
@@ -234,72 +233,72 @@ const Ve = {
     /**
      * Sets the size of the container to fit its content
      */
-    fitContent: ke.props.fitContent
+    fitContent: Le.props.fitContent
   },
   emits: [
-    W.APPLY,
-    W.CLEAR,
-    W.OPEN,
-    W.CLOSE,
-    W.RESET
+    ee.APPLY,
+    ee.CLEAR,
+    ee.OPEN,
+    ee.CLOSE,
+    ee.RESET
   ],
   setup(e, { emit: t }) {
-    const { t: n } = oe({ messages: Ve }), l = Ie("base-filter-popover"), s = w(!1), i = w(null), o = f(() => e.defaultValue !== null), r = () => {
-      s.value = !1, t(W.CLOSE);
+    const { t: n } = re({ messages: Me }), l = Ee("base-filter-popover"), o = H(!1), i = H(null), s = b(() => e.defaultValue !== null), r = () => {
+      o.value = !1, t(ee.CLOSE);
     }, a = () => {
-      r(), o.value ? t(W.RESET) : t(W.CLEAR);
-    }, u = () => r(), d = () => {
-      s.value ? r() : (s.value = !0, t(W.OPEN));
+      r(), s.value ? t(ee.RESET) : t(ee.CLEAR);
+    }, f = () => r(), u = () => {
+      o.value ? r() : (o.value = !0, t(ee.OPEN));
     }, g = () => {
-      r(), t(W.APPLY);
-    }, _ = f(() => [
+      r(), t(ee.APPLY);
+    }, F = b(() => [
       {
         title: n("apply"),
         event: g,
         disabled: e.disableApplyButton
       },
       {
-        title: o.value ? n("reset") : n("clear"),
+        title: s.value ? n("reset") : n("clear"),
         event: a,
         disabled: e.disableSecondaryButton
       }
     ]);
-    return me(
-      () => s.value,
-      (b, D) => {
-        var S, B;
-        !b && D && (B = (S = i.value) == null ? void 0 : S.filterBarButtonRef) != null && B.bentoBaseButtonRef && i.value.filterBarButtonRef.bentoBaseButtonRef.focus();
+    return Fe(
+      () => o.value,
+      (d, A) => {
+        var D, $;
+        !d && A && ($ = (D = i.value) == null ? void 0 : D.filterBarButtonRef) != null && $.bentoBaseButtonRef && i.value.filterBarButtonRef.bentoBaseButtonRef.focus();
       }
     ), {
       // Values
-      actions: _,
+      actions: F,
       popoverId: l,
-      isFilterOpen: s,
-      isPersistentFilter: o,
+      isFilterOpen: o,
+      isPersistentFilter: s,
       // Enums
-      BentoTooltipPosition: At,
+      BentoTooltipPosition: Tt,
       // Events
-      onClickFilter: d,
+      onClickFilter: u,
       onClickApply: g,
       onClickSecondaryAction: a,
-      onClickOutside: u,
+      onClickOutside: f,
       closePopover: r,
       // Refs
       filterButtonRef: i
     };
   }
 });
-const Qt = { key: 0 };
-function Xt(e, t, n, l, s, i) {
-  const o = y("filter-bar-button"), r = y("bento-popover"), a = ht("bento-click-outside-directive");
-  return e.onlySlot ? (p(), E("div", Qt, [
-    ae(e.$slots, "default", {}, void 0, !0)
-  ])) : he((p(), E("div", {
+const tl = { key: 0 };
+function ll(e, t, n, l, o, i) {
+  const s = y("filter-bar-button"), r = y("bento-popover"), a = St("bento-click-outside-directive");
+  return e.onlySlot ? (p(), k("div", tl, [
+    ie(e.$slots, "default", {}, void 0, !0)
+  ])) : Se((p(), k("div", {
     key: 1,
     class: "b-base-filter",
-    onKeydown: t[0] || (t[0] = ue((...u) => e.closePopover && e.closePopover(...u), ["esc"]))
+    onKeydown: t[0] || (t[0] = be((...f) => e.closePopover && e.closePopover(...f), ["esc"]))
   }, [
-    C(o, {
+    S(s, {
       ref: "filterButtonRef",
       "aria-controls": e.isFilterOpen ? e.popoverId : null,
       "has-chevron": e.isPersistentFilter,
@@ -308,12 +307,12 @@ function Xt(e, t, n, l, s, i) {
       "secondary-label": e.buttonSecondaryLabel,
       onClick: e.onClickFilter
     }, {
-      default: m(() => [
-        N(k(e.buttonLabel || e.label), 1)
+      default: _(() => [
+        w(V(e.buttonLabel || e.label), 1)
       ]),
       _: 1
     }, 8, ["aria-controls", "has-chevron", "is-filter-open", "applied-filters-count", "secondary-label", "onClick"]),
-    e.filterButtonRef ? (p(), A(r, {
+    e.filterButtonRef ? (p(), B(r, {
       key: 0,
       id: e.popoverId,
       class: "b-base-filter__popover",
@@ -325,38 +324,42 @@ function Xt(e, t, n, l, s, i) {
       title: e.controlled ? null : e.label,
       "fit-content": e.fitContent,
       position: "bottom-start",
-      "without-space": e.controlled
+      "without-space": e.controlled,
+      "fallback-position": ["bottom-end"]
     }, {
-      default: m(() => [
-        ae(e.$slots, "default", {}, void 0, !0)
+      default: _(() => [
+        ie(e.$slots, "default", {}, void 0, !0)
       ]),
       _: 3
-    }, 8, ["id", "open", "actions", "target-element", "title", "fit-content", "without-space"])) : M("", !0)
+    }, 8, ["id", "open", "actions", "target-element", "title", "fit-content", "without-space"])) : K("", !0)
   ], 32)), [
     [a, e.onClickOutside]
   ]);
 }
-const be = /* @__PURE__ */ R(Wt, [["render", Xt], ["__scopeId", "data-v-0324ab9b"]]), xt = (e) => e instanceof Array, Ne = (e) => xt(e) ? e.length === 0 || e.every((t) => t === "") : !e, we = (e, t) => JSON.stringify(e) === JSON.stringify(t), fe = (e, t) => {
-  const n = w(e.value);
-  me(
+const ye = /* @__PURE__ */ L(el, [["render", ll], ["__scopeId", "data-v-7f11dd78"]]), nl = (e) => e instanceof Array, He = (e) => nl(e) ? e.length === 0 || e.every((t) => t === "") : !e, qe = (e, t) => JSON.stringify(e) === JSON.stringify(t), me = (e, t) => {
+  const n = H(e.value);
+  Fe(
     () => e.value,
     () => {
       n.value = e.value;
     }
   );
-  const l = f(() => Ne(e.value)), s = f(
-    () => t.value !== null ? we(t.value, e.value) : l.value
-  ), i = f(() => we(n.value, e.value) || Ne(n.value) && l.value);
+  const l = b(() => He(e.value)), o = b(
+    () => t.value !== null ? qe(t.value, e.value) : l.value
+  ), i = b(() => qe(n.value, e.value) || He(n.value) && l.value);
   return {
     internalFilterValue: n,
-    isSecondaryButtonDisabled: s,
+    isSecondaryButtonDisabled: o,
     isApplyButtonDisabled: i
   };
-}, ye = (e, t) => (e == null ? void 0 : e.length) > t ? `${e.slice(0, t)}...` : e, el = L({
+}, oe = (e, t) => {
+  const n = e == null ? void 0 : e.toString();
+  return (n == null ? void 0 : n.length) > t ? `${n == null ? void 0 : n.slice(0, t)}...` : n;
+}, al = q({
   name: "bento-input-filter",
   components: {
-    BentoBaseFilter: be,
-    BentoInputField: xe
+    BentoBaseFilter: ye,
+    BentoInputField: nt
   },
   props: {
     /**
@@ -384,69 +387,71 @@ const be = /* @__PURE__ */ R(Wt, [["render", Xt], ["__scopeId", "data-v-0324ab9b
   },
   emits: [v.INPUT, v.UPDATE],
   setup(e, { emit: t }) {
-    const n = w(null), { internalFilterValue: l, isSecondaryButtonDisabled: s, isApplyButtonDisabled: i } = fe(
-      H(e, "value"),
-      H(e, "defaultValue")
-    ), o = f(() => e.defaultValue === null ? e.label : ye(e.value, 18)), r = f(() => e.value != null ? 1 : null), a = f(() => ({
+    const n = H(null), { internalFilterValue: l, isSecondaryButtonDisabled: o, isApplyButtonDisabled: i } = me(
+      z(e, "value"),
+      z(e, "defaultValue")
+    ), s = b(() => e.defaultValue === null ? e.label : oe(e.value, 18)), r = b(
+      () => e.defaultValue === null ? oe(e.value, 12) : null
+    ), a = b(() => ({
       ["b-input-filter--only-slot"]: e.onlySlot
     }));
-    Se(() => {
+    De(() => {
       l.value === "" && (l.value = null);
-    }), me(n, () => {
-      var S;
-      (S = n.value) == null || S.focusInput();
+    }), Fe(n, () => {
+      var D;
+      (D = n.value) == null || D.focusInput();
     });
-    const u = () => {
+    const f = () => {
       l.value = e.value;
-    }, d = () => {
+    }, u = () => {
       !l.value && e.defaultValue !== null && (l.value = e.defaultValue), t(v.UPDATE, { ...e, value: l.value });
     };
     return {
       // Values
-      appliedFiltersCount: r,
-      buttonLabel: o,
+      buttonLabel: s,
+      buttonSecondaryLabel: r,
       conditionalClasses: a,
       internalFilterValue: l,
       isApplyButtonDisabled: i,
-      isSecondaryButtonDisabled: s,
+      isSecondaryButtonDisabled: o,
       // Refs
       inputTextRef: n,
       // Events
-      updateFilter: d,
+      updateFilter: u,
       clearFilter: () => {
-        l.value = null, d();
+        l.value = null, u();
       },
-      openFilter: u,
+      openFilter: f,
       resetFilter: () => t(v.UPDATE, { ...e, value: e.defaultValue }),
       onInput: () => {
         t(v.INPUT, { ...e, value: l.value });
       },
-      setInternalFilterValue: (S) => {
-        l.value = S;
+      setInternalFilterValue: (D) => {
+        l.value = D;
       }
     };
   }
 });
-function tl(e, t, n, l, s, i) {
-  const o = y("bento-input-field"), r = y("bento-base-filter");
-  return p(), A(r, x(e.$props, {
-    "applied-filters-count": e.appliedFiltersCount,
+function ol(e, t, n, l, o, i) {
+  const s = y("bento-input-field"), r = y("bento-base-filter");
+  return p(), B(r, ne(e.$props, {
+    "button-label": e.buttonLabel,
+    "button-secondary-label": e.buttonSecondaryLabel,
     "disable-apply-button": e.isApplyButtonDisabled,
     "disable-secondary-button": e.isSecondaryButtonDisabled,
-    "button-label": e.buttonLabel,
     "only-slot": e.onlySlot,
     onApply: e.updateFilter,
     onClear: e.clearFilter,
     onOpen: e.openFilter,
     onReset: e.resetFilter
   }), {
-    default: m(() => [
-      P("div", {
-        class: pe(["b-input-filter", e.conditionalClasses]),
-        onKeydown: t[0] || (t[0] = ue((...a) => e.updateFilter && e.updateFilter(...a), ["enter"])),
+    default: _(() => [
+      R("div", {
+        class: ve(["b-input-filter", e.conditionalClasses]),
+        onKeydown: t[0] || (t[0] = be((...a) => e.updateFilter && e.updateFilter(...a), ["enter"])),
         onInput: t[1] || (t[1] = (...a) => e.onInput && e.onInput(...a))
       }, [
-        C(o, {
+        S(s, {
           ref: "inputTextRef",
           value: e.internalFilterValue,
           onInput: e.setInternalFilterValue
@@ -454,15 +459,15 @@ function tl(e, t, n, l, s, i) {
       ], 34)
     ]),
     _: 1
-  }, 16, ["applied-filters-count", "disable-apply-button", "disable-secondary-button", "button-label", "only-slot", "onApply", "onClear", "onOpen", "onReset"]);
+  }, 16, ["button-label", "button-secondary-label", "disable-apply-button", "disable-secondary-button", "only-slot", "onApply", "onClear", "onOpen", "onReset"]);
 }
-const ot = /* @__PURE__ */ R(el, [["render", tl], ["__scopeId", "data-v-7aa995e2"]]), ll = L({
+const ut = /* @__PURE__ */ L(al, [["render", ol], ["__scopeId", "data-v-331367ce"]]), sl = q({
   name: "bento-date-filter",
   components: {
-    BentoBaseFilter: be,
-    BentoDatePicker: Ot,
-    BentoDivider: tt,
-    Calendar: Vt
+    BentoBaseFilter: ye,
+    BentoDatePicker: Nt,
+    BentoDivider: ot,
+    Calendar: wt
   },
   props: {
     isDateInput: { type: Boolean, default: !0 },
@@ -501,54 +506,58 @@ const ot = /* @__PURE__ */ R(el, [["render", tl], ["__scopeId", "data-v-7aa995e2
   },
   emits: [v.INPUT, v.UPDATE],
   setup(e, { emit: t }) {
-    const { locale: n } = oe(void 0, !0), l = { de: lt, enUS: ne, fr: nt }, { internalFilterValue: s, isSecondaryButtonDisabled: i, isApplyButtonDisabled: o } = fe(
-      H(e, "value"),
-      H(e, "defaultValue")
-    ), r = f(
-      () => e.defaultValue === null ? e.label : ve(e.value, "dd MMM, yyyy", {
-        locale: l[n.value.substring(0, 2)] || ne
-      })
-    ), a = f(() => e.value != null ? 1 : null), u = () => {
-      t(v.UPDATE, { ...e, value: s.value });
-    }, d = () => {
-      s.value = null, u();
+    const { locale: n } = re(void 0, !0), l = { de: st, enUS: ae, fr: it }, { internalFilterValue: o, isSecondaryButtonDisabled: i, isApplyButtonDisabled: s } = me(
+      z(e, "value"),
+      z(e, "defaultValue")
+    ), r = b(
+      () => e.value ? se(e.value, "dd MMM, yyyy", {
+        locale: l[n.value.substring(0, 2)] || ae
+      }) : null
+    ), a = b(
+      () => e.defaultValue === null ? e.label : r.value
+    ), f = b(
+      () => e.defaultValue === null ? r.value : null
+    ), u = () => {
+      t(v.UPDATE, { ...e, value: o.value });
     }, g = () => {
-      s.value = e.defaultValue, u();
-    }, _ = () => {
-      s.value = e.value;
-    }, b = (S) => {
-      s.value = S, t(v.INPUT, { ...e, value: s.value });
+      o.value = null, u();
+    }, F = () => {
+      o.value = e.defaultValue, u();
+    }, d = () => {
+      o.value = e.value;
+    }, A = ($) => {
+      o.value = $, t(v.INPUT, { ...e, value: o.value });
     };
     return {
       // Values
-      appliedFiltersCount: a,
-      internalFilterValue: s,
-      isApplyButtonDisabled: o,
+      internalFilterValue: o,
+      isApplyButtonDisabled: s,
       isSecondaryButtonDisabled: i,
-      buttonLabel: r,
+      buttonLabel: a,
+      buttonSecondaryLabel: f,
       // Events
-      clearFilter: d,
-      onDateSelected: b,
-      openFilter: _,
+      clearFilter: g,
+      onDateSelected: A,
+      openFilter: d,
       updateFilter: u,
-      resetFilter: g,
-      onDateInputSelected: (S) => {
-        s.value = S, b(S), u();
+      resetFilter: F,
+      onDateInputSelected: ($) => {
+        o.value = $, A($), u();
       }
     };
   }
 });
-const nl = { class: "b-date-filter" };
-function al(e, t, n, l, s, i) {
-  const o = y("bento-date-picker"), r = y("bento-divider"), a = y("calendar"), u = y("bento-base-filter");
-  return p(), A(u, {
-    label: e.label,
-    field: e.field,
-    "applied-filters-count": e.appliedFiltersCount,
-    "disable-apply-button": e.isApplyButtonDisabled,
-    "disable-secondary-button": e.isSecondaryButtonDisabled,
+const il = { class: "b-date-filter" };
+function rl(e, t, n, l, o, i) {
+  const s = y("bento-date-picker"), r = y("bento-divider"), a = y("calendar"), f = y("bento-base-filter");
+  return p(), B(f, {
     "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": "",
     onApply: e.updateFilter,
@@ -556,21 +565,21 @@ function al(e, t, n, l, s, i) {
     onOpen: e.openFilter,
     onReset: e.resetFilter
   }, {
-    default: m(() => {
-      var d, g, _, b;
+    default: _(() => {
+      var u, g, F, d;
       return [
-        e.onlySlot ? (p(), A(o, {
+        e.onlySlot ? (p(), B(s, {
           key: 0,
           value: e.internalFilterValue,
-          "first-day-of-week": (d = e.options) == null ? void 0 : d.firstDayOfWeek,
+          "first-day-of-week": (u = e.options) == null ? void 0 : u.firstDayOfWeek,
           "is-date-disabled": (g = e.options) == null ? void 0 : g.isDateDisabled,
           onInput: e.onDateInputSelected
-        }, null, 8, ["value", "first-day-of-week", "is-date-disabled", "onInput"])) : (p(), E(de, { key: 1 }, [
-          C(r, { class: "b-date-filter__divider" }),
-          P("div", nl, [
-            C(a, {
-              "first-day-of-week": (_ = e.options) == null ? void 0 : _.firstDayOfWeek,
-              "is-date-disabled": (b = e.options) == null ? void 0 : b.isDateDisabled,
+        }, null, 8, ["value", "first-day-of-week", "is-date-disabled", "onInput"])) : (p(), k(fe, { key: 1 }, [
+          S(r, { class: "b-date-filter__divider" }),
+          R("div", il, [
+            S(a, {
+              "first-day-of-week": (F = e.options) == null ? void 0 : F.firstDayOfWeek,
+              "is-date-disabled": (d = e.options) == null ? void 0 : d.isDateDisabled,
               "number-of-months": 1,
               value: e.internalFilterValue,
               onInput: e.onDateSelected
@@ -580,9 +589,9 @@ function al(e, t, n, l, s, i) {
       ];
     }),
     _: 1
-  }, 8, ["label", "field", "applied-filters-count", "disable-apply-button", "disable-secondary-button", "button-label", "default-value", "only-slot", "onApply", "onClear", "onOpen", "onReset"]);
+  }, 8, ["button-label", "button-secondary-label", "default-value", "disable-apply-button", "disable-secondary-button", "field", "label", "only-slot", "onApply", "onClear", "onOpen", "onReset"]);
 }
-const st = /* @__PURE__ */ R(ll, [["render", al], ["__scopeId", "data-v-7e21017e"]]), Le = {
+const dt = /* @__PURE__ */ L(sl, [["render", rl], ["__scopeId", "data-v-66ffdc53"]]), Ke = {
   "en-US": {
     clear: "Clear",
     reset: "Reset",
@@ -608,16 +617,16 @@ const st = /* @__PURE__ */ R(ll, [["render", al], ["__scopeId", "data-v-7e21017e
     clear: "Borrar",
     apply: "Aplicar"
   }
-}, ol = L({
-  i18n: { messages: Le },
+}, ul = q({
+  i18n: { messages: Ke },
   name: "bento-date-range-filter",
   components: {
-    BentoBaseFilter: be,
-    BentoButtonActions: Lt,
-    BentoDateRangePicker: Nt,
-    BentoTypography: re,
-    BentoDivider: tt,
-    DateRangePickerCalendar: wt
+    BentoBaseFilter: ye,
+    BentoButtonActions: Kt,
+    BentoDateRangePicker: Ht,
+    BentoTypography: ce,
+    BentoDivider: ot,
+    DateRangePickerCalendar: qt
   },
   props: {
     /**
@@ -662,96 +671,110 @@ const st = /* @__PURE__ */ R(ll, [["render", al], ["__scopeId", "data-v-7e21017e
   },
   emits: [v.INPUT, v.UPDATE],
   setup(e, { emit: t }) {
-    var G, Q, Z, te;
-    const { locale: n, t: l } = oe({ messages: Le }), s = { de: lt, enUS: ne, fr: nt }, { internalFilterValue: i, isSecondaryButtonDisabled: o, isApplyButtonDisabled: r } = fe(
-      H(e, "value"),
-      H(e, "defaultValue")
-    ), a = ($) => $ ? ve($, Oe.NUMERIC_DATE_YEAR_FIRST, {
-      locale: s[n.value.substring(0, 2)] || ne
-    }) : void 0, u = ($) => $ ? ve($, Oe.HOUR_MINUTE_SECONDS, {
-      locale: s[n.value.substring(0, 2)] || ne
-    }) : "", d = w(null), g = w(!1), _ = ze({
-      startDate: a((G = e.value) == null ? void 0 : G.startDate),
-      endDate: a((Q = e.value) == null ? void 0 : Q.endDate),
-      startTime: u((Z = e.value) == null ? void 0 : Z.startDate),
-      endTime: u((te = e.value) == null ? void 0 : te.endDate)
-    }), b = f(
-      () => {
-        var $, se;
-        return (($ = e.value) == null ? void 0 : $.startDate) != null && ((se = e.value) == null ? void 0 : se.endDate) != null ? 1 : null;
+    var O, N, Z, G;
+    const { locale: n, t: l } = re({ messages: Ke }), o = { de: st, enUS: ae, fr: it }, { internalFilterValue: i, isSecondaryButtonDisabled: s, isApplyButtonDisabled: r } = me(
+      z(e, "value"),
+      z(e, "defaultValue")
+    ), a = (h) => h ? se(h, we.NUMERIC_DATE_YEAR_FIRST, {
+      locale: o[n.value.substring(0, 2)] || ae
+    }) : void 0, f = (h) => h ? se(h, we.HOUR_MINUTE_SECONDS, {
+      locale: o[n.value.substring(0, 2)] || ae
+    }) : "", u = H(null), g = H(!1), F = We({
+      startDate: a((O = e.value) == null ? void 0 : O.startDate),
+      endDate: a((N = e.value) == null ? void 0 : N.endDate),
+      startTime: f((Z = e.value) == null ? void 0 : Z.startDate),
+      endTime: f((G = e.value) == null ? void 0 : G.endDate)
+    }), d = b(() => {
+      var h, X, Ce, ge, c, T, E, Y;
+      if (!((h = e.value) != null && h.startDate) && !e.value.endDate)
+        return null;
+      if (((Ce = (X = e.options) == null ? void 0 : X.quickSelectRanges) == null ? void 0 : Ce.length) > 0) {
+        const te = (c = (ge = e.options) == null ? void 0 : ge.quickSelectRanges) == null ? void 0 : c.find(
+          ({ data: x }) => Ne(x == null ? void 0 : x.startDate, e.value.startDate) && Ne(x == null ? void 0 : x.endDate, e.value.endDate)
+        );
+        if (te)
+          return te.label;
       }
-    ), D = f(
-      () => e.defaultValue === null ? e.label : `${ve(e.value.startDate, "dd MMM, yyyy", {
-        locale: s[n.value.substring(0, 2)] || ne
-      })} - ${ve(e.value.endDate, "dd MMM, yyyy", {
-        locale: s[n.value.substring(0, 2)] || ne
-      })}`
-    ), S = () => {
-      d.value.closePopover();
-      const { onlySlot: $, ...se } = e;
-      t(v.UPDATE, { ...se, value: i.value });
-    }, B = () => {
-      i.value = void 0, S();
-    }, q = () => {
-      i.value = e.defaultValue, S();
-    }, F = () => {
+      return Mt((T = e.value) == null ? void 0 : T.startDate, (E = e.value) == null ? void 0 : E.endDate) && ((Y = e == null ? void 0 : e.options) != null && Y.allowTimeInput) ? `${se(e.value.startDate, "dd MMM, yyyy HH:mm:ss", {
+        locale: o[n.value.substring(0, 2)] || ae
+      })} - ${se(e.value.endDate, "HH:mm:ss", {
+        locale: o[n.value.substring(0, 2)] || ae
+      })}` : `${se(e.value.startDate, "dd MMM, yyyy", {
+        locale: o[n.value.substring(0, 2)] || ae
+      })} - ${se(e.value.endDate, "dd MMM, yyyy", {
+        locale: o[n.value.substring(0, 2)] || ae
+      })}`;
+    }), A = b(
+      () => e.defaultValue === null ? e.label : d.value
+    ), D = b(
+      () => e.defaultValue === null ? d.value : null
+    ), $ = () => {
+      u.value.closePopover();
+      const { onlySlot: h, ...X } = e;
+      t(v.UPDATE, { ...X, value: i.value });
+    }, P = () => {
+      i.value = void 0, $();
+    }, M = () => {
+      i.value = e.defaultValue, $();
+    }, C = () => {
       i.value = e.value;
-    }, h = ($) => {
-      i.value = $, _.startDate = a($.startDate), _.endDate = a($.endDate), t(v.INPUT, { ...e, value: i.value });
-    }, U = ($) => {
-      $ != null && $.startDate && ($ != null && $.endDate) && (i.value = $, _.startDate = a($.startDate), _.endDate = a($.endDate), t(v.INPUT, { ...e, value: i.value }));
-    }, O = ($) => {
-      h($), t(v.INPUT, { ...e, value: i.value });
-    }, V = f(
+    }, m = (h) => {
+      i.value = h, F.startDate = a(h.startDate), F.endDate = a(h.endDate), t(v.INPUT, { ...e, value: i.value });
+    }, I = (h) => {
+      h != null && h.startDate && (h != null && h.endDate) && (i.value = h, F.startDate = a(h.startDate), F.endDate = a(h.endDate), t(v.INPUT, { ...e, value: i.value }));
+    }, U = (h) => {
+      m(h), t(v.INPUT, { ...e, value: i.value });
+    }, j = b(
       () => [
         {
           title: l("apply"),
-          event: S,
+          event: $,
           disabled: g.value || r.value
         },
         {
           title: e.defaultValue ? l("reset") : l("clear"),
-          event: e.defaultValue ? q : B,
-          disabled: g.value && o.value
+          event: e.defaultValue ? M : P,
+          disabled: g.value && s.value
         }
       ]
     );
     return {
       // Refs
-      baseFilter: d,
+      baseFilter: u,
       // Values
-      appliedFiltersCount: b,
-      actions: V,
-      formData: _,
+      actions: j,
+      formData: F,
       internalFilterValue: i,
       isApplyButtonDisabled: r,
-      isSecondaryButtonDisabled: o,
-      buttonLabel: D,
+      isSecondaryButtonDisabled: s,
+      buttonLabel: A,
+      buttonSecondaryLabel: D,
       // Events
-      onDateSelected: h,
-      openFilter: F,
-      updateFilter: S,
+      onDateSelected: m,
+      openFilter: C,
+      updateFilter: $,
       onDatePickerRangeError: () => {
         g.value = !0, i.value = { startDate: void 0, endDate: void 0 }, t(v.INPUT, { ...e, value: i.value });
       },
-      onDatePickerRangeFormDateInputUpdate: ($) => {
-        g.value = !1, $.startTime && (_.startTime = $.startTime), $.endTime && (_.endTime = $.endTime);
+      onDatePickerRangeFormDateInputUpdate: (h) => {
+        g.value = !1, h.startTime && (F.startTime = h.startTime), h.endTime && (F.endTime = h.endTime);
       },
-      onDateInputSelected: O,
-      onRangeSelectorInput: U
+      onDateInputSelected: U,
+      onRangeSelectorInput: I
     };
   }
 });
-const sl = {
+const dl = {
   key: 1,
   class: "b-date-range-filter"
 };
-function il(e, t, n, l, s, i) {
-  const o = y("bento-date-range-picker"), r = y("bento-typography"), a = y("bento-divider"), u = y("bento-button-actions"), d = y("date-range-picker-calendar"), g = y("bento-base-filter");
-  return p(), A(g, {
+function cl(e, t, n, l, o, i) {
+  const s = y("bento-date-range-picker"), r = y("bento-typography"), a = y("bento-divider"), f = y("bento-button-actions"), u = y("date-range-picker-calendar"), g = y("bento-base-filter");
+  return p(), B(g, {
     ref: "baseFilter",
-    "applied-filters-count": e.appliedFiltersCount,
+    class: "b-base-filter-date-range-filter",
     "button-label": e.buttonLabel,
+    "button-secondary-label": e.buttonSecondaryLabel,
     controlled: !e.onlySlot,
     "disable-apply-button": e.isApplyButtonDisabled,
     "disable-secondary-button": e.isSecondaryButtonDisabled,
@@ -762,26 +785,26 @@ function il(e, t, n, l, s, i) {
     "fit-content": "",
     onOpen: e.openFilter
   }, {
-    default: m(() => {
-      var _, b, D, S, B, q, F, h, U, O, V;
+    default: _(() => {
+      var F, d, A, D, $, P, M, C, m, I, U;
       return [
-        e.onlySlot ? (p(), A(o, {
+        e.onlySlot ? (p(), B(s, {
           key: 0,
-          "allow-time-input": (_ = e.options) == null ? void 0 : _.allowTimeInput,
+          "allow-time-input": (F = e.options) == null ? void 0 : F.allowTimeInput,
           value: e.internalFilterValue,
-          "first-day-of-week": (b = e.options) == null ? void 0 : b.firstDayOfWeek,
-          "is-date-disabled": (D = e.options) == null ? void 0 : D.isDateDisabled,
-          "number-of-months": (S = e.options) == null ? void 0 : S.numberOfMonths,
-          "quick-select-ranges": (B = e.options) == null ? void 0 : B.quickSelectRanges,
+          "first-day-of-week": (d = e.options) == null ? void 0 : d.firstDayOfWeek,
+          "is-date-disabled": (A = e.options) == null ? void 0 : A.isDateDisabled,
+          "number-of-months": (D = e.options) == null ? void 0 : D.numberOfMonths,
+          "quick-select-ranges": ($ = e.options) == null ? void 0 : $.quickSelectRanges,
           onInput: e.onDateInputSelected
-        }, null, 8, ["allow-time-input", "value", "first-day-of-week", "is-date-disabled", "number-of-months", "quick-select-ranges", "onInput"])) : (p(), E("div", sl, [
-          C(d, {
-            "allow-time-input": (q = e.options) == null ? void 0 : q.allowTimeInput,
-            "first-day-of-week": (F = e.options) == null ? void 0 : F.firstDayOfWeek,
-            "is-date-disabled": (h = e.options) == null ? void 0 : h.isDateDisabled,
-            "max-range": (U = e.options) == null ? void 0 : U.maxRange,
-            "number-of-months": (O = e.options) == null ? void 0 : O.numberOfMonths,
-            "quick-select-ranges": (V = e.options) == null ? void 0 : V.quickSelectRanges,
+        }, null, 8, ["allow-time-input", "value", "first-day-of-week", "is-date-disabled", "number-of-months", "quick-select-ranges", "onInput"])) : (p(), k("div", dl, [
+          S(u, {
+            "allow-time-input": (P = e.options) == null ? void 0 : P.allowTimeInput,
+            "first-day-of-week": (M = e.options) == null ? void 0 : M.firstDayOfWeek,
+            "is-date-disabled": (C = e.options) == null ? void 0 : C.isDateDisabled,
+            "max-range": (m = e.options) == null ? void 0 : m.maxRange,
+            "number-of-months": (I = e.options) == null ? void 0 : I.numberOfMonths,
+            "quick-select-ranges": (U = e.options) == null ? void 0 : U.quickSelectRanges,
             value: e.internalFilterValue,
             "date-form-data": e.formData,
             onInput: e.onDateSelected,
@@ -789,21 +812,21 @@ function il(e, t, n, l, s, i) {
             onError: e.onDatePickerRangeError,
             onFormDate: e.onDatePickerRangeFormDateInputUpdate
           }, {
-            title: m(() => [
-              C(r, {
+            title: _(() => [
+              S(r, {
                 strongest: "",
                 variant: "body",
                 el: "span"
               }, {
-                default: m(() => [
-                  N(k(e.label), 1)
+                default: _(() => [
+                  w(V(e.label), 1)
                 ]),
                 _: 1
               })
             ]),
-            actions: m(() => [
-              C(a, { class: "b-date-range-filter__divider" }),
-              C(u, {
+            actions: _(() => [
+              S(a, { class: "b-date-range-filter__divider" }),
+              S(f, {
                 class: "b-date-range-filter__actions",
                 actions: e.actions,
                 layout: "space-between"
@@ -815,22 +838,23 @@ function il(e, t, n, l, s, i) {
       ];
     }),
     _: 1
-  }, 8, ["applied-filters-count", "button-label", "controlled", "disable-apply-button", "disable-secondary-button", "default-value", "field", "label", "only-slot", "onOpen"]);
+  }, 8, ["button-label", "button-secondary-label", "controlled", "disable-apply-button", "disable-secondary-button", "default-value", "field", "label", "only-slot", "onOpen"]);
 }
-const it = /* @__PURE__ */ R(ol, [["render", il], ["__scopeId", "data-v-b1a61a63"]]), Me = {
+const ct = /* @__PURE__ */ L(ul, [["render", cl], ["__scopeId", "data-v-f5976db7"]]), je = {
   "en-US": {
+    all: "All",
     noFiltersMatchThisSearch: "No filters match this search",
     search: "Search",
     searchFilter: "Search {filter}"
   }
-}, rl = L({
-  i18n: { messages: Me },
+}, bl = q({
+  i18n: { messages: je },
   name: "bento-select-filter",
   components: {
-    BentoBaseFilter: be,
-    BentoDropdown: kt,
-    BentoListbox: Mt,
-    BentoSearchBar: Fe
+    BentoBaseFilter: ye,
+    BentoDropdown: Lt,
+    BentoListbox: jt,
+    BentoSearchBar: he
   },
   props: {
     /**
@@ -871,86 +895,104 @@ const it = /* @__PURE__ */ R(ol, [["render", il], ["__scopeId", "data-v-b1a61a63
   },
   emits: [v.INPUT, v.UPDATE],
   setup(e, { emit: t, slots: n }) {
-    var V, K;
-    const { internalFilterValue: l, isSecondaryButtonDisabled: s, isApplyButtonDisabled: i } = fe(
-      H(e, "value"),
-      H(e, "defaultValue")
-    ), { t: o, locale: r } = oe({ messages: Me }), a = w(""), u = H(e, "options"), d = w(e.options.listboxItems);
-    me(u, () => {
-      d.value = u.value.listboxItems;
+    var j, ue;
+    const { internalFilterValue: l, isSecondaryButtonDisabled: o, isApplyButtonDisabled: i } = me(
+      z(e, "value"),
+      z(e, "defaultValue")
+    ), { t: s, locale: r } = re({ messages: je }), a = H(""), f = z(e, "options"), u = H(e.options.listboxItems);
+    Fe(f, () => {
+      u.value = f.value.listboxItems;
     });
-    const g = et(
+    const g = at(
       a,
-      d,
-      (K = (V = e.options) == null ? void 0 : V.search) == null ? void 0 : K.searchEvent
-    ), _ = f(() => o("noFiltersMatchThisSearch")), b = f(() => {
-      var J, G, Q;
+      u,
+      (ue = (j = e.options) == null ? void 0 : j.search) == null ? void 0 : ue.searchEvent
+    ), F = b(() => s("noFiltersMatchThisSearch")), d = b(() => {
+      var J, O, N, Z;
       if (e.defaultValue === null)
         return e.label;
       if (e.options.multiple) {
-        const Z = e.value.length;
-        if (Z === e.options.listboxItems.length)
-          return (J = e == null ? void 0 : e.options) == null ? void 0 : J.messages[r.value].persistentButtonLabelAllSelected;
-        const te = (G = e == null ? void 0 : e.options) == null ? void 0 : G.messages[r.value].persistentButtonLabelPartiallySelected.split("|").map(($) => $.trim());
-        return Z === 1 ? te[0].replace("{count}", Z) : te[1].replace("{count}", Z);
+        const G = (J = e.value) == null ? void 0 : J.length;
+        if (G === e.options.listboxItems.length)
+          return (O = e == null ? void 0 : e.options) == null ? void 0 : O.messages[r.value].persistentButtonLabelAllSelected;
+        const h = (N = e == null ? void 0 : e.options) == null ? void 0 : N.messages[r.value].persistentButtonLabelPartiallySelected.split("|").map((X) => X.trim());
+        return G === 1 ? h[0].replace("{count}", G) : h[1].replace("{count}", G);
       }
-      return ye((Q = e.options.listboxItems.find(({ value: Z }) => Z === e.value)) == null ? void 0 : Q.label, 18);
-    }), D = f(() => Ie(`filter-listbox-${e.field}`)), S = (J) => {
+      return oe((Z = e.options.listboxItems.find(({ value: G }) => G === e.value)) == null ? void 0 : Z.label, 18);
+    }), A = b(() => {
+      var J, O;
+      return e.defaultValue === null && (!e.options.multiple || ((J = e.value) == null ? void 0 : J.length) === 1) ? oe(
+        (O = e.options.listboxItems.find(
+          ({ value: N }) => {
+            var Z;
+            return Array.isArray(e.value) ? (Z = e == null ? void 0 : e.value) == null ? void 0 : Z.includes(N) : N === e.value;
+          }
+        )) == null ? void 0 : O.label,
+        12
+      ) : null;
+    }), D = b(() => Ee(`filter-listbox-${e.field}`)), $ = (J) => {
       l.value = J;
-      const { onlySlot: G, ...Q } = e;
-      t(v.INPUT, { ...Q, value: l.value });
-    }, B = () => {
-      e.options.multiple && l.value && l.value.length === 0 && (l.value = e.defaultValue !== null ? e.defaultValue : void 0);
-      const { onlySlot: J, ...G } = e;
-      t(v.UPDATE, { ...G, value: l.value });
-    }, q = () => {
+      const { onlySlot: O, ...N } = e;
+      t(v.INPUT, { ...N, value: l.value });
+    }, P = () => {
+      var N;
+      e.options.multiple && l.value && ((N = l.value) == null ? void 0 : N.length) === 0 && (l.value = e.defaultValue !== null ? e.defaultValue : void 0);
+      const { onlySlot: J, ...O } = e;
+      t(v.UPDATE, { ...O, value: l.value });
+    }, M = () => {
       l.value = e.value;
-    }, F = () => {
+    }, C = () => {
       a.value && (a.value = "");
-    }, h = () => {
-      l.value = e.defaultValue, B();
-    }, U = () => {
-      l.value = null, B();
+    }, m = () => {
+      l.value = e.defaultValue, P();
+    }, I = () => {
+      l.value = null, P();
     };
     return {
       // Values
-      appliedFiltersCount: f(() => {
-        if (e.value == null)
+      appliedFiltersCount: b(() => {
+        var N, Z;
+        if (e.value == null || e.defaultValue !== null || !e.options.multiple)
           return null;
-        const J = 1;
-        return e.options.multiple ? e.value.length : J;
+        const J = (N = e.options.listboxItems) == null ? void 0 : N.reduce((G, h) => {
+          var X;
+          return G += (X = h == null ? void 0 : h.items) != null && X.length ? h.items.length : 1, G;
+        }, 0), O = (Z = e.value) == null ? void 0 : Z.length;
+        return O === 1 ? null : O === J ? s("all") : O;
       }),
       filteredItems: g,
       internalFilterValue: l,
       isApplyButtonDisabled: i,
-      isSecondaryButtonDisabled: s,
+      isSecondaryButtonDisabled: o,
       listboxFilterId: D,
-      noResultsMessage: _,
+      noResultsMessage: F,
       slots: n,
-      buttonLabel: b,
+      buttonLabel: d,
+      buttonSecondaryLabel: A,
       // Search
       searchTerm: a,
       // Events
-      clearFilter: U,
-      closeFilter: F,
-      onOptionSelected: S,
-      openFilter: q,
-      updateFilter: B,
-      resetFilter: h
+      clearFilter: I,
+      closeFilter: C,
+      onOptionSelected: $,
+      openFilter: M,
+      updateFilter: P,
+      resetFilter: m
     };
   }
 });
-const ul = (e) => (Be("data-v-0ca076e6"), e = e(), Ae(), e), dl = { class: "b-select-filter__search-bar" }, cl = /* @__PURE__ */ ul(() => /* @__PURE__ */ P("hr", { class: "b-select-filter__divider" }, null, -1));
-function pl(e, t, n, l, s, i) {
-  const o = y("bento-dropdown"), r = y("bento-search-bar"), a = y("bento-listbox"), u = y("bento-base-filter");
-  return p(), A(u, {
-    label: e.label,
-    field: e.field,
+const fl = (e) => (Ie("data-v-b8a78549"), e = e(), Te(), e), pl = { class: "b-select-filter__search-bar" }, vl = /* @__PURE__ */ fl(() => /* @__PURE__ */ R("hr", { class: "b-select-filter__divider" }, null, -1));
+function yl(e, t, n, l, o, i) {
+  const s = y("bento-dropdown"), r = y("bento-search-bar"), a = y("bento-listbox"), f = y("bento-base-filter");
+  return p(), B(f, {
     "applied-filters-count": e.appliedFiltersCount,
+    "button-label": e.buttonLabel,
+    "button-secondary-label": e.buttonSecondaryLabel,
     "disable-apply-button": e.isApplyButtonDisabled,
     "disable-secondary-button": e.isSecondaryButtonDisabled,
-    "button-label": e.buttonLabel,
     "default-value": e.defaultValue,
+    label: e.label,
+    field: e.field,
     "only-slot": e.onlySlot,
     onApply: e.updateFilter,
     onClear: e.clearFilter,
@@ -958,60 +1000,60 @@ function pl(e, t, n, l, s, i) {
     onOpen: e.openFilter,
     onClose: e.closeFilter
   }, {
-    default: m(() => {
-      var d, g, _, b, D, S, B, q, F, h, U;
+    default: _(() => {
+      var u, g, F, d, A, D, $, P, M, C, m;
       return [
-        e.onlySlot ? (p(), A(o, {
+        e.onlySlot ? (p(), B(s, {
           key: 0,
           value: e.internalFilterValue,
           class: "b-select-filter__dropdown-variant",
           items: e.options.listboxItems,
-          multiple: (d = e.options) == null ? void 0 : d.multiple,
+          multiple: (u = e.options) == null ? void 0 : u.multiple,
           "no-results-message": e.noResultsMessage,
           searching: !!e.searchTerm,
           "is-option-disabled": e.options.isOptionDisabled,
           "dynamic-filtering": !0,
           onInput: e.onOptionSelected
-        }, Ce({ _: 2 }, [
-          ce(e.slots, (O, V) => ({
-            name: V,
-            fn: m((K) => [
-              ae(e.$slots, V, Ue(Ee(K)), void 0, !0)
+        }, $e({ _: 2 }, [
+          pe(e.slots, (I, U) => ({
+            name: U,
+            fn: _((j) => [
+              ie(e.$slots, U, ke(Ve(j)), void 0, !0)
             ])
           }))
-        ]), 1032, ["value", "items", "multiple", "no-results-message", "searching", "is-option-disabled", "onInput"])) : (p(), E(de, { key: 1 }, [
-          P("div", dl, [
-            C(r, {
-              "debounce-time": (_ = (g = e.options) == null ? void 0 : g.search) == null ? void 0 : _.debounceTime,
+        ]), 1032, ["value", "items", "multiple", "no-results-message", "searching", "is-option-disabled", "onInput"])) : (p(), k(fe, { key: 1 }, [
+          R("div", pl, [
+            S(r, {
+              "debounce-time": (F = (g = e.options) == null ? void 0 : g.search) == null ? void 0 : F.debounceTime,
               value: e.searchTerm,
               "input-field-aria-label": e.$t("searchFilter", { filter: e.label.toLocaleLowerCase() }).toString(),
-              onInput: t[0] || (t[0] = (O) => e.searchTerm = O)
+              onInput: t[0] || (t[0] = (I) => e.searchTerm = I)
             }, null, 8, ["debounce-time", "value", "input-field-aria-label"])
           ]),
-          cl,
-          C(a, {
+          vl,
+          S(a, {
             id: e.listboxFilterId,
             "aria-label": e.label,
             class: "b-select-filter__wrapper",
-            "has-more-items": (D = (b = e.options) == null ? void 0 : b.lazy) == null ? void 0 : D.hasMoreItems,
+            "has-more-items": (A = (d = e.options) == null ? void 0 : d.lazy) == null ? void 0 : A.hasMoreItems,
             items: e.filteredItems,
-            "is-option-disabled": (S = e.options) == null ? void 0 : S.isOptionDisabled,
-            "lazy-load-type": (q = (B = e.options) == null ? void 0 : B.lazy) == null ? void 0 : q.lazyLoadType,
-            loading: (h = (F = e.options) == null ? void 0 : F.lazy) == null ? void 0 : h.loading,
-            multiple: (U = e.options) == null ? void 0 : U.multiple,
+            "is-option-disabled": (D = e.options) == null ? void 0 : D.isOptionDisabled,
+            "lazy-load-type": (P = ($ = e.options) == null ? void 0 : $.lazy) == null ? void 0 : P.lazyLoadType,
+            loading: (C = (M = e.options) == null ? void 0 : M.lazy) == null ? void 0 : C.loading,
+            multiple: (m = e.options) == null ? void 0 : m.multiple,
             "no-results-message": e.noResultsMessage,
             searching: !!e.searchTerm,
             "selected-value": e.internalFilterValue,
             onSelect: e.onOptionSelected,
-            onShowMore: t[1] || (t[1] = (O) => {
-              var V, K;
-              return (K = (V = e.options) == null ? void 0 : V.lazy) == null ? void 0 : K.showMoreEvent();
+            onShowMore: t[1] || (t[1] = (I) => {
+              var U, j;
+              return (j = (U = e.options) == null ? void 0 : U.lazy) == null ? void 0 : j.showMoreEvent();
             })
-          }, Ce({ _: 2 }, [
-            ce(e.slots, (O, V) => ({
-              name: V,
-              fn: m((K) => [
-                ae(e.$slots, V, Ue(Ee(K)), void 0, !0)
+          }, $e({ _: 2 }, [
+            pe(e.slots, (I, U) => ({
+              name: U,
+              fn: _((j) => [
+                ie(e.$slots, U, ke(Ve(j)), void 0, !0)
               ])
             }))
           ]), 1032, ["id", "aria-label", "has-more-items", "items", "is-option-disabled", "lazy-load-type", "loading", "multiple", "no-results-message", "searching", "selected-value", "onSelect"])
@@ -1019,16 +1061,16 @@ function pl(e, t, n, l, s, i) {
       ];
     }),
     _: 3
-  }, 8, ["label", "field", "applied-filters-count", "disable-apply-button", "disable-secondary-button", "button-label", "default-value", "only-slot", "onApply", "onClear", "onReset", "onOpen", "onClose"]);
+  }, 8, ["applied-filters-count", "button-label", "button-secondary-label", "disable-apply-button", "disable-secondary-button", "default-value", "label", "field", "only-slot", "onApply", "onClear", "onReset", "onOpen", "onClose"]);
 }
-const z = /* @__PURE__ */ R(rl, [["render", pl], ["__scopeId", "data-v-0ca076e6"]]), bl = L({
+const Q = /* @__PURE__ */ L(bl, [["render", yl], ["__scopeId", "data-v-b8a78549"]]), ml = q({
   name: "bento-select-avatar-filter",
   components: {
-    BentoSelectFilter: z,
-    BentoAvatar: Ht
+    BentoSelectFilter: Q,
+    BentoAvatar: Yt
   },
   props: {
-    ...z.props,
+    ...Q.props,
     /**
      * List of options that are needed to setup the country filter
      * Available options:
@@ -1050,31 +1092,31 @@ const z = /* @__PURE__ */ R(rl, [["render", pl], ["__scopeId", "data-v-0ca076e6"
     };
   }
 });
-function fl(e, t, n, l, s, i) {
-  const o = y("bento-avatar"), r = y("bento-select-filter");
-  return p(), A(r, x(e.$props, {
+function _l(e, t, n, l, o, i) {
+  const s = y("bento-avatar"), r = y("bento-select-filter");
+  return p(), B(r, ne(e.$props, {
     field: e.field,
     label: e.label,
     onUpdate: e.onUpdate,
     onInput: t[0] || (t[0] = (a) => e.$emit(e.BentoFilterEvent.INPUT, a))
   }), {
-    default: m(({ label: a, data: u }) => [
-      C(o, {
+    default: _(({ label: a, data: f }) => [
+      S(s, {
         username: a,
-        src: u
+        src: f
       }, null, 8, ["username", "src"])
     ]),
     _: 1
   }, 16, ["field", "label", "onUpdate"]);
 }
-const rt = /* @__PURE__ */ R(bl, [["render", fl]]), vl = L({
+const bt = /* @__PURE__ */ L(ml, [["render", _l]]), Fl = q({
   name: "bento-select-country-filter",
   components: {
-    BentoSelectFilter: z,
-    ListboxOptionTag: at
+    BentoSelectFilter: Q,
+    ListboxOptionTag: rt
   },
   props: {
-    ...z.props,
+    ...Q.props,
     /**
      * List of options that are needed to setup the country filter
      * Available options:
@@ -1098,28 +1140,28 @@ const rt = /* @__PURE__ */ R(bl, [["render", fl]]), vl = L({
     };
   }
 });
-function yl(e, t, n, l, s, i) {
-  const o = y("listbox-option-tag"), r = y("bento-select-filter");
-  return p(), A(r, x(e.$props, {
+function hl(e, t, n, l, o, i) {
+  const s = y("listbox-option-tag"), r = y("bento-select-filter");
+  return p(), B(r, ne(e.$props, {
     field: e.field,
     label: e.label,
     onUpdate: e.onUpdate,
     onInput: t[0] || (t[0] = (a) => e.$emit(e.BentoFilterEvent.INPUT, a))
   }), {
-    default: m((a) => [
-      C(o, { option: a }, null, 8, ["option"])
+    default: _((a) => [
+      S(s, { option: a }, null, 8, ["option"])
     ]),
     _: 1
   }, 16, ["field", "label", "onUpdate"]);
 }
-const ut = /* @__PURE__ */ R(vl, [["render", yl]]), ml = L({
+const ft = /* @__PURE__ */ L(Fl, [["render", hl]]), Cl = q({
   name: "bento-select-country-filter",
   components: {
-    BentoSelectFilter: z,
-    BentoCountry: qt
+    BentoSelectFilter: Q,
+    BentoCountry: zt
   },
   props: {
-    ...z.props,
+    ...Q.props,
     /**
      * List of options that are needed to setup the country filter
      * Available options:
@@ -1134,11 +1176,11 @@ const ut = /* @__PURE__ */ R(vl, [["render", yl]]), ml = L({
   },
   emits: [v.INPUT, v.UPDATE],
   setup(e, { emit: t }) {
-    const n = H(e, "options"), { listboxItems: l, variant: s } = Ct(n.value), i = (a) => t(v.UPDATE, a), o = Kt(s, l), r = f(() => ({
+    const n = z(e, "options"), { listboxItems: l, variant: o } = $t(n.value), i = (a) => t(v.UPDATE, a), s = Jt(o, l), r = b(() => ({
       ...e.options,
-      listboxItems: o.value
+      listboxItems: s.value
     }));
-    return gt("skipBentoCountryDeprecateMessage", !0), (!s || s.value === "custom") && It(
+    return Bt("skipBentoCountryDeprecateMessage", !0), (!o || o.value === "custom") && Et(
       'BentoSelectCountryFilter type with `options.variant==="custom"`',
       "Use any of the other BentoSelectCountryFilter variants instead OR use BentoSelectFilter type for custom labels",
       "2.0.0"
@@ -1152,33 +1194,33 @@ const ut = /* @__PURE__ */ R(vl, [["render", yl]]), ml = L({
     };
   }
 });
-function _l(e, t, n, l, s, i) {
-  const o = y("bento-country"), r = y("bento-select-filter");
-  return p(), A(r, x(e.$props, {
+function gl(e, t, n, l, o, i) {
+  const s = y("bento-country"), r = y("bento-select-filter");
+  return p(), B(r, ne(e.$props, {
     field: e.field,
     label: e.label,
     options: e.countryOptions,
     onUpdate: e.onUpdate,
     onInput: t[0] || (t[0] = (a) => e.$emit(e.BentoFilterEvent.INPUT, a))
   }), {
-    default: m(({ value: a, label: u }) => [
-      C(o, {
+    default: _(({ value: a, label: f }) => [
+      S(s, {
         code: a,
-        label: u,
+        label: f,
         variant: "custom"
       }, null, 8, ["code", "label"])
     ]),
     _: 1
   }, 16, ["field", "label", "options", "onUpdate"]);
 }
-const dt = /* @__PURE__ */ R(ml, [["render", _l]]), Fl = L({
+const pt = /* @__PURE__ */ L(Cl, [["render", gl]]), Sl = q({
   name: "bento-select-payment-method-filter",
   components: {
-    BentoSelectFilter: z,
-    BentoPaymentMethod: jt
+    BentoSelectFilter: Q,
+    BentoPaymentMethod: Gt
   },
   props: {
-    ...z.props,
+    ...Q.props,
     /**
      * List of options that are needed to setup the payment method filter
      * Available options:
@@ -1200,31 +1242,31 @@ const dt = /* @__PURE__ */ R(ml, [["render", _l]]), Fl = L({
     };
   }
 });
-function hl(e, t, n, l, s, i) {
-  const o = y("bento-payment-method"), r = y("bento-select-filter");
-  return p(), A(r, x(e.$props, {
+function $l(e, t, n, l, o, i) {
+  const s = y("bento-payment-method"), r = y("bento-select-filter");
+  return p(), B(r, ne(e.$props, {
     field: e.field,
     label: e.label,
     onUpdate: e.onUpdate,
     onInput: t[0] || (t[0] = (a) => e.$emit(e.BentoFilterEvent.INPUT, a))
   }), {
-    default: m(({ value: a, label: u }) => [
-      C(o, {
+    default: _(({ value: a, label: f }) => [
+      S(s, {
         type: a,
-        label: u
+        label: f
       }, null, 8, ["type", "label"])
     ]),
     _: 1
   }, 16, ["field", "label", "onUpdate"]);
 }
-const ct = /* @__PURE__ */ R(Fl, [["render", hl]]), Cl = L({
+const vt = /* @__PURE__ */ L(Sl, [["render", $l]]), Bl = q({
   name: "bento-select-country-filter",
   components: {
-    BentoSelectFilter: z,
-    ListboxOptionTag: at
+    BentoSelectFilter: Q,
+    ListboxOptionTag: rt
   },
   props: {
-    ...z.props,
+    ...Q.props,
     /**
      * List of options that are needed to setup the tag filter
      * Available options:
@@ -1238,15 +1280,15 @@ const ct = /* @__PURE__ */ R(Fl, [["render", hl]]), Cl = L({
   },
   emits: [v.INPUT, v.UPDATE],
   setup(e, { emit: t }) {
-    const n = (i) => t(v.UPDATE, i), l = f(
+    const n = (i) => t(v.UPDATE, i), l = b(
       () => {
-        var i, o;
-        return (o = (i = e == null ? void 0 : e.options) == null ? void 0 : i.listboxItems) == null ? void 0 : o.map(({ label: r, value: a, variant: u }) => ({ label: r, value: a, data: u }));
+        var i, s;
+        return (s = (i = e == null ? void 0 : e.options) == null ? void 0 : i.listboxItems) == null ? void 0 : s.map(({ label: r, value: a, variant: f }) => ({ label: r, value: a, data: f }));
       }
     );
     return {
       // Values
-      countryOptions: f(() => ({
+      countryOptions: b(() => ({
         ...e.options,
         listboxItems: l.value
       })),
@@ -1257,32 +1299,32 @@ const ct = /* @__PURE__ */ R(Fl, [["render", hl]]), Cl = L({
     };
   }
 });
-function gl(e, t, n, l, s, i) {
-  const o = y("listbox-option-tag"), r = y("bento-select-filter");
-  return p(), A(r, x(e.$props, {
+function Al(e, t, n, l, o, i) {
+  const s = y("listbox-option-tag"), r = y("bento-select-filter");
+  return p(), B(r, ne(e.$props, {
     field: e.field,
     label: e.label,
     options: e.countryOptions,
     onUpdate: e.onUpdate,
     onInput: t[0] || (t[0] = (a) => e.$emit(e.BentoFilterEvent.INPUT, a))
   }), {
-    default: m(({ label: a, data: u }) => [
-      C(o, {
-        option: { value: a, data: u, label: "" }
+    default: _(({ label: a, data: f }) => [
+      S(s, {
+        option: { value: a, data: f, label: "" }
       }, null, 8, ["option"])
     ]),
     _: 1
   }, 16, ["field", "label", "options", "onUpdate"]);
 }
-const pt = /* @__PURE__ */ R(Cl, [["render", gl]]), He = {
+const yt = /* @__PURE__ */ L(Bl, [["render", Al]]), Ye = {
   "en-US": {
     yes: "Yes",
     no: "No"
   }
-}, $l = L({
+}, Dl = q({
   name: "bento-boolean-filter",
-  i18n: { messages: He },
-  components: { BentoBaseFilter: be, BentoRadioGroup: Dt },
+  i18n: { messages: Ye },
+  components: { BentoBaseFilter: ye, BentoRadioGroup: Ut },
   props: {
     /**
      * Default value of the filter to reset to.
@@ -1309,66 +1351,71 @@ const pt = /* @__PURE__ */ R(Cl, [["render", gl]]), He = {
   },
   emits: [v.INPUT, v.UPDATE],
   setup(e, { emit: t }) {
-    const { t: n } = oe({ messages: He }), l = f(() => [
+    const { t: n } = re({ messages: Ye }), l = b(() => [
       { value: "yes", label: n("yes") },
       { value: "no", label: n("no") }
-    ]), { internalFilterValue: s, isSecondaryButtonDisabled: i, isApplyButtonDisabled: o } = fe(
-      H(e, "value"),
-      H(e, "defaultValue")
-    ), r = f(
-      () => e.defaultValue === null ? e.label : ye(l.value.find(({ value: S }) => S === e.value).label, 18)
-    ), a = f(() => e.value != null ? 1 : null), u = f(() => ({
+    ]), { internalFilterValue: o, isSecondaryButtonDisabled: i, isApplyButtonDisabled: s } = me(
+      z(e, "value"),
+      z(e, "defaultValue")
+    ), r = b(
+      () => e.defaultValue === null ? e.label : oe(l.value.find(({ value: D }) => D === e.value).label, 18)
+    ), a = b(
+      () => {
+        var D;
+        return e.defaultValue === null ? oe((D = l.value.find(({ value: $ }) => $ === e.value)) == null ? void 0 : D.label, 12) : null;
+      }
+    ), f = b(() => ({
       ["b-boolean-filter--only-slot"]: e.onlySlot
     }));
-    Se(() => {
-      s.value || (s.value = null);
+    De(() => {
+      o.value || (o.value = null);
     });
-    const d = (S) => {
-      s.value = S, t(v.INPUT, { ...e, value: s.value });
+    const u = (D) => {
+      o.value = D, t(v.INPUT, { ...e, value: o.value });
     }, g = () => {
-      s.value = e.value;
-    }, _ = () => {
-      t(v.UPDATE, { ...e, value: s.value });
+      o.value = e.value;
+    }, F = () => {
+      t(v.UPDATE, { ...e, value: o.value });
     };
     return {
       // Values
       items: l,
-      appliedFiltersCount: a,
-      conditionalClasses: u,
+      conditionalClasses: f,
       buttonLabel: r,
-      internalFilterValue: s,
-      isApplyButtonDisabled: o,
+      buttonSecondaryLabel: a,
+      internalFilterValue: o,
+      isApplyButtonDisabled: s,
       isSecondaryButtonDisabled: i,
       // Events
-      onInput: d,
-      updateFilter: _,
+      onInput: u,
+      updateFilter: F,
       clearFilter: () => {
-        s.value = null, _();
+        o.value = null, F();
       },
       openFilter: g,
       resetFilter: () => t(v.UPDATE, { ...e, value: e.defaultValue })
     };
   }
 });
-function Sl(e, t, n, l, s, i) {
-  const o = y("bento-radio-group"), r = y("bento-base-filter");
-  return p(), A(r, x(e.$props, {
-    "applied-filters-count": e.appliedFiltersCount,
+function Il(e, t, n, l, o, i) {
+  const s = y("bento-radio-group"), r = y("bento-base-filter");
+  return p(), B(r, ne(e.$props, {
+    "button-label": e.buttonLabel,
+    "button-secondary-label": e.buttonSecondaryLabel,
     "disable-apply-button": e.isApplyButtonDisabled,
     "disable-secondary-button": e.isSecondaryButtonDisabled,
-    "button-label": e.buttonLabel,
     "only-slot": e.onlySlot,
     onApply: e.updateFilter,
     onClear: e.clearFilter,
     onOpen: e.openFilter,
     onReset: e.resetFilter
   }), {
-    default: m(() => [
-      P("div", {
-        class: pe(["b-boolean-filter", e.conditionalClasses]),
-        onKeydown: t[0] || (t[0] = ue((...a) => e.updateFilter && e.updateFilter(...a), ["enter"]))
+    default: _(() => [
+      R("div", {
+        class: ve(["b-boolean-filter", e.conditionalClasses]),
+        onKeydown: t[0] || (t[0] = be((...a) => e.updateFilter && e.updateFilter(...a), ["enter"]))
       }, [
-        C(o, {
+        S(s, {
           items: e.items,
           label: e.label,
           "model-value": e.internalFilterValue,
@@ -1378,17 +1425,17 @@ function Sl(e, t, n, l, s, i) {
       ], 34)
     ]),
     _: 1
-  }, 16, ["applied-filters-count", "disable-apply-button", "disable-secondary-button", "button-label", "only-slot", "onApply", "onClear", "onOpen", "onReset"]);
+  }, 16, ["button-label", "button-secondary-label", "disable-apply-button", "disable-secondary-button", "only-slot", "onApply", "onClear", "onOpen", "onReset"]);
 }
-const bt = /* @__PURE__ */ R($l, [["render", Sl], ["__scopeId", "data-v-781199b1"]]), Bl = {
+const mt = /* @__PURE__ */ L(Dl, [["render", Il], ["__scopeId", "data-v-3478b97b"]]), Tl = {
   "en-US": {
     from: "From",
     to: "To"
   }
-}, Al = L({
+}, El = q({
   name: "bento-range-filter",
-  i18n: { messages: Bl },
-  components: { BentoBaseFilter: be, BentoInputField: xe },
+  i18n: { messages: Tl },
+  components: { BentoBaseFilter: ye, BentoInputField: nt },
   props: {
     /**
      * Default value of the filter to reset to.
@@ -1415,23 +1462,30 @@ const bt = /* @__PURE__ */ R($l, [["render", Sl], ["__scopeId", "data-v-781199b1
   },
   emits: [v.INPUT, v.UPDATE],
   setup(e, { emit: t }) {
-    const n = w(null), { internalFilterValue: l, isSecondaryButtonDisabled: s, isApplyButtonDisabled: i } = fe(
-      H(e, "value"),
-      H(e, "defaultValue")
-    ), o = f(
-      () => e.defaultValue === null ? e.label : `${ye(e.value[0], 5)}-${ye(e.value[1], 5)}`
-    ), r = f(() => e.value.find((B) => B !== "") ? 1 : null), a = f(() => ({
+    const n = H(null), { internalFilterValue: l, isSecondaryButtonDisabled: o, isApplyButtonDisabled: i } = me(
+      z(e, "value"),
+      z(e, "defaultValue")
+    ), s = b(
+      () => {
+        var P, M;
+        return (P = e.value) != null && P[0] && ((M = e.value) != null && M[1]) ? `${oe(e.value[0], 5)} - ${oe(e.value[1], 5)}` : null;
+      }
+    ), r = b(
+      () => e.defaultValue === null ? e.label : s.value
+    ), a = b(
+      () => e.defaultValue === null ? s.value : null
+    ), f = b(() => ({
       ["b-range-filter--only-slot"]: e.onlySlot
     })), u = () => {
-      l.value = e.value, $t(() => n.value.focusInput());
-    }, d = () => {
+      l.value = e.value, At(() => n.value.focusInput());
+    }, g = () => {
       t(v.INPUT, { ...e, value: l.value });
-    }, g = (B) => {
-      l.value = [B, l.value[1]], d();
-    }, _ = (B) => {
-      l.value = [l.value[0], B], d();
-    }, b = () => {
-      l.value.some((B) => B) || (l.value = e.defaultValue !== null ? e.defaultValue : void 0), t(v.UPDATE, {
+    }, F = (P) => {
+      l.value = [P, l.value[1]], g();
+    }, d = (P) => {
+      l.value = [l.value[0], P], g();
+    }, A = () => {
+      l.value.some((P) => P) || (l.value = e.defaultValue !== null ? e.defaultValue : void 0), t(v.UPDATE, {
         ...e,
         value: l.value
       });
@@ -1439,76 +1493,76 @@ const bt = /* @__PURE__ */ R($l, [["render", Sl], ["__scopeId", "data-v-781199b1
     return {
       // Values
       inputTextRef: n,
-      appliedFiltersCount: r,
-      conditionalClasses: a,
+      conditionalClasses: f,
       internalFilterValue: l,
       isApplyButtonDisabled: i,
-      isSecondaryButtonDisabled: s,
-      buttonLabel: o,
+      isSecondaryButtonDisabled: o,
+      buttonLabel: r,
+      buttonSecondaryLabel: a,
       // Events
-      updateFrom: g,
-      updateTo: _,
-      updateFilter: b,
+      updateFrom: F,
+      updateTo: d,
+      updateFilter: A,
       clearFilter: () => {
-        l.value = ["", ""], b();
+        l.value = ["", ""], A();
       },
       openFilter: u,
       resetFilter: () => t(v.UPDATE, { ...e, value: e.defaultValue })
     };
   }
 });
-function Il(e, t, n, l, s, i) {
-  const o = y("bento-input-field"), r = y("bento-base-filter");
-  return p(), A(r, x(e.$props, {
-    "applied-filters-count": e.appliedFiltersCount,
+function Ul(e, t, n, l, o, i) {
+  const s = y("bento-input-field"), r = y("bento-base-filter");
+  return p(), B(r, ne(e.$props, {
     "disable-apply-button": e.isApplyButtonDisabled,
     "disable-secondary-button": e.isSecondaryButtonDisabled,
     "button-label": e.buttonLabel,
+    "button-secondary-label": e.buttonSecondaryLabel,
     "only-slot": e.onlySlot,
     onApply: e.updateFilter,
     onClear: e.clearFilter,
     onOpen: e.openFilter,
     onReset: e.resetFilter
   }), {
-    default: m(() => [
-      P("div", {
-        class: pe(["b-range-filter", e.conditionalClasses]),
-        onKeydown: t[0] || (t[0] = ue((...a) => e.updateFilter && e.updateFilter(...a), ["enter"]))
+    default: _(() => [
+      R("div", {
+        class: ve(["b-range-filter", e.conditionalClasses]),
+        onKeydown: t[0] || (t[0] = be((...a) => e.updateFilter && e.updateFilter(...a), ["enter"]))
       }, [
-        C(o, {
+        S(s, {
           ref: "inputTextRef",
           value: e.internalFilterValue ? e.internalFilterValue[0] : "",
           type: "number",
           "aria-label": e.$t("from").toString(),
           onInput: e.updateFrom
         }, {
-          default: m(() => [
-            N(k(e.$t("from")), 1)
+          default: _(() => [
+            w(V(e.$t("from")), 1)
           ]),
           _: 1
         }, 8, ["value", "aria-label", "onInput"]),
-        C(o, {
+        S(s, {
           class: "b-range-filter__input-field",
           value: e.internalFilterValue ? e.internalFilterValue[1] : "",
           type: "number",
           "aria-label": e.$t("to").toString(),
           onInput: e.updateTo
         }, {
-          default: m(() => [
-            N(k(e.$t("to")), 1)
+          default: _(() => [
+            w(V(e.$t("to")), 1)
           ]),
           _: 1
         }, 8, ["value", "aria-label", "onInput"])
       ], 34)
     ]),
     _: 1
-  }, 16, ["applied-filters-count", "disable-apply-button", "disable-secondary-button", "button-label", "only-slot", "onApply", "onClear", "onOpen", "onReset"]);
+  }, 16, ["disable-apply-button", "disable-secondary-button", "button-label", "button-secondary-label", "only-slot", "onApply", "onClear", "onOpen", "onReset"]);
 }
-const ft = /* @__PURE__ */ R(Al, [["render", Il], ["__scopeId", "data-v-6db61e6b"]]);
-var $e = /* @__PURE__ */ ((e) => (e.INPUT = "input", e))($e || {});
-const Dl = L({
+const _t = /* @__PURE__ */ L(El, [["render", Ul], ["__scopeId", "data-v-a4d1d149"]]);
+var Ae = /* @__PURE__ */ ((e) => (e.INPUT = "input", e))(Ae || {});
+const Pl = q({
   name: "base-filter-button",
-  components: { BaseButton: Ge, BentoTypography: re, ChevronUpIcon: Qe, ChevronDownIcon: Xe },
+  components: { BaseButton: Xe, BentoTypography: ce, ChevronUpIcon: tt, ChevronDownIcon: lt },
   props: {
     /**
      * The number of applies values within the filter.
@@ -1533,14 +1587,14 @@ const Dl = L({
      */
     bold: { type: Boolean, default: !1 }
   },
-  emits: [Re.CLICK],
+  emits: [Oe.CLICK],
   setup(e, { slots: t, emit: n, attrs: l }) {
-    const s = f(() => t.default ? Ze(t)("default") : null), i = Je({ ariaLabel: s }), o = w(null), r = f(() => {
-      var d;
+    const o = b(() => t.default ? xe(t)("default") : null), i = Qe({ ariaLabel: o }), s = H(null), r = b(() => {
+      var u;
       return {
-        "aria-controls": (d = l["aria-controls"]) == null ? void 0 : d.toString()
+        "aria-controls": (u = l["aria-controls"]) == null ? void 0 : u.toString()
       };
-    }), a = f(() => ({
+    }), a = b(() => ({
       ["b-base-filter-button--with-chevron"]: e.hasChevron,
       ["b-base-filter-button--filter-open"]: e.isFilterOpen
     }));
@@ -1551,66 +1605,68 @@ const Dl = L({
       conditionalClasses: a,
       // Methods
       onClickButton: () => {
-        e.disabled || n(Re.CLICK);
+        e.disabled || n(Oe.CLICK);
       },
-      hasSlot: We(t),
+      hasSlot: et(t),
       // Refs
-      baseFilterButtonRef: o
+      baseFilterButtonRef: s
     };
   }
 });
-const Tl = { class: "b-base-filter-button__default-container" }, Ul = {
+const kl = { class: "b-base-filter-button__default-container" }, Vl = { class: "b-base-filter-button__label-container" }, Rl = {
   key: 0,
   class: "b-base-filter-button__counter-wrapper"
 };
-function El(e, t, n, l, s, i) {
-  const o = y("bento-typography"), r = y("chevron-up-icon"), a = y("chevron-down-icon"), u = y("base-button");
-  return p(), A(u, {
+function Ll(e, t, n, l, o, i) {
+  const s = y("bento-typography"), r = y("chevron-up-icon"), a = y("chevron-down-icon"), f = y("base-button");
+  return p(), B(f, {
     ref: "baseFilterButtonRef",
-    class: pe(["b-base-filter-button", e.conditionalClasses]),
+    class: ve(["b-base-filter-button", e.conditionalClasses]),
     disabled: e.disabled,
     "aria-label": e.computedAriaLabel,
     "aria-controls": e.ariaAttributes["aria-controls"],
     type: "button",
     onClick: e.onClickButton
-  }, Ce({
-    default: m(() => [
-      P("div", Tl, [
-        C(o, {
-          el: "span",
-          variant: "body",
-          stronger: e.bold,
-          class: "b-base-filter-button__label"
-        }, {
-          default: m(() => [
-            ae(e.$slots, "default", {}, void 0, !0)
-          ]),
-          _: 3
-        }, 8, ["stronger"]),
-        e.amountAppliedValues && !e.hasChevron ? (p(), E("div", Ul, [
-          C(o, {
+  }, $e({
+    default: _(() => [
+      R("div", kl, [
+        R("div", Vl, [
+          S(s, {
+            el: "span",
+            variant: "body",
+            stronger: e.bold,
+            class: "b-base-filter-button__label"
+          }, {
+            default: _(() => [
+              ie(e.$slots, "default", {}, void 0, !0)
+            ]),
+            _: 3
+          }, 8, ["stronger"])
+        ]),
+        e.amountAppliedValues && !e.hasChevron ? (p(), k("div", Rl, [
+          S(s, {
             class: "b-base-filter-button__counter",
             el: "span",
             variant: "body",
             stronger: ""
           }, {
-            default: m(() => [
-              N(k(e.amountAppliedValues), 1)
+            default: _(() => [
+              w(V(e.amountAppliedValues), 1)
             ]),
             _: 1
           })
-        ])) : M("", !0)
+        ])) : K("", !0)
       ])
     ]),
     _: 2
   }, [
     e.hasChevron ? {
       name: "iconRight",
-      fn: m(() => [
-        e.isFilterOpen ? (p(), A(r, {
+      fn: _(() => [
+        e.isFilterOpen ? (p(), B(r, {
           key: 0,
           "aria-hidden": "true"
-        })) : (p(), A(a, {
+        })) : (p(), B(a, {
           key: 1,
           "aria-hidden": "true"
         }))
@@ -1619,9 +1675,9 @@ function El(e, t, n, l, s, i) {
     } : void 0
   ]), 1032, ["class", "disabled", "aria-label", "aria-controls", "onClick"]);
 }
-const Pl = /* @__PURE__ */ R(Dl, [["render", El], ["__scopeId", "data-v-b5898dca"]]), kl = L({
+const Ol = /* @__PURE__ */ L(Pl, [["render", Ll], ["__scopeId", "data-v-af9efc73"]]), Nl = q({
   name: "all-filters-modal-button",
-  components: { BaseFilterButton: Pl },
+  components: { BaseFilterButton: Ol },
   props: {
     /**
      * Button label to be displayed
@@ -1643,7 +1699,7 @@ const Pl = /* @__PURE__ */ R(Dl, [["render", El], ["__scopeId", "data-v-b5898dca
   emits: ["click"],
   setup(e, { emit: t }) {
     return {
-      conditionalClasses: f(() => ({
+      conditionalClasses: b(() => ({
         ["b-all-filters-modal-button--with-counter"]: e.appliedFiltersCount,
         ["b-all-filters-modal-button--filter-open"]: e.isFilterOpen
       })),
@@ -1653,51 +1709,51 @@ const Pl = /* @__PURE__ */ R(Dl, [["render", El], ["__scopeId", "data-v-b5898dca
     };
   }
 });
-function Rl(e, t, n, l, s, i) {
-  const o = y("base-filter-button");
-  return p(), A(o, {
-    class: pe(["b-all-filters-modal-button", e.conditionalClasses]),
+function wl(e, t, n, l, o, i) {
+  const s = y("base-filter-button");
+  return p(), B(s, {
+    class: ve(["b-all-filters-modal-button", e.conditionalClasses]),
     "amount-applied-values": e.appliedFiltersCount,
     "is-filter-open": e.isFilterOpen,
     disabled: e.disabled,
     onClick: e.onClick
   }, {
-    default: m(() => [
-      N(k(e.label), 1)
+    default: _(() => [
+      w(V(e.label), 1)
     ]),
     _: 1
   }, 8, ["class", "amount-applied-values", "is-filter-open", "disabled", "onClick"]);
 }
-const Ol = /* @__PURE__ */ R(kl, [["render", Rl], ["__scopeId", "data-v-b96a672f"]]);
-let qe = 0;
-const Vl = {
+const Ml = /* @__PURE__ */ L(Nl, [["render", wl], ["__scopeId", "data-v-b96a672f"]]);
+let ze = 0;
+const Hl = {
   beforeCreate() {
-    this.uuid = qe.toString(), qe += 1;
+    this.uuid = ze.toString(), ze += 1;
   }
-}, vt = (e) => (Be("data-v-6a35173c"), e = e(), Ae(), e), Nl = { key: 0 }, wl = /* @__PURE__ */ vt(() => /* @__PURE__ */ P("path", {
+}, Ft = (e) => (Ie("data-v-6a35173c"), e = e(), Te(), e), ql = { key: 0 }, Kl = /* @__PURE__ */ Ft(() => /* @__PURE__ */ R("path", {
   fill: "#00112C",
   "fill-rule": "evenodd",
   d: "M12.6465 4.58337C12.32 3.42912 11.2588 2.58337 10 2.58337C8.74122 2.58337 7.67998 3.42912 7.35352 4.58337H2C1.58579 4.58337 1.25 4.91916 1.25 5.33337C1.25 5.74759 1.58579 6.08337 2 6.08337H7.35352C7.67998 7.23763 8.74122 8.08337 10 8.08337C11.2588 8.08337 12.32 7.23763 12.6465 6.08337H14C14.4142 6.08337 14.75 5.74759 14.75 5.33337C14.75 4.91916 14.4142 4.58337 14 4.58337H12.6465ZM11.25 5.33337C11.25 4.64302 10.6904 4.08337 10 4.08337C9.30964 4.08337 8.75 4.64302 8.75 5.33337C8.75 6.02373 9.30964 6.58337 10 6.58337C10.6904 6.58337 11.25 6.02373 11.25 5.33337Z",
   "clip-rule": "evenodd"
-}, null, -1)), Ll = /* @__PURE__ */ vt(() => /* @__PURE__ */ P("path", {
+}, null, -1)), jl = /* @__PURE__ */ Ft(() => /* @__PURE__ */ R("path", {
   fill: "#00112C",
   "fill-rule": "evenodd",
   d: "M4 7.91675C5.25878 7.91675 6.32002 8.7625 6.64648 9.91675H14C14.4142 9.91675 14.75 10.2525 14.75 10.6667C14.75 11.081 14.4142 11.4167 14 11.4167H6.64648C6.32002 12.571 5.25878 13.4167 4 13.4167C2.48122 13.4167 1.25 12.1855 1.25 10.6667C1.25 9.14796 2.48122 7.91675 4 7.91675ZM5.25 10.6667C5.25 9.97639 4.69036 9.41675 4 9.41675C3.30964 9.41675 2.75 9.97639 2.75 10.6667C2.75 11.3571 3.30964 11.9167 4 11.9167C4.69036 11.9167 5.25 11.3571 5.25 10.6667Z",
   "clip-rule": "evenodd"
 }, null, -1));
-function Ml(e, t, n, l, s, i) {
-  return p(), E("svg", x({ role: "img" }, e.$attrs, {
+function Yl(e, t, n, l, o, i) {
+  return p(), k("svg", ne({ role: "img" }, e.$attrs, {
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     fill: "none"
   }), [
-    e.$attrs["svg-title"] ? (p(), E("title", Nl, k(e.$attrs["svg-title"]), 1)) : M("", !0),
-    wl,
-    Ll
+    e.$attrs["svg-title"] ? (p(), k("title", ql, V(e.$attrs["svg-title"]), 1)) : K("", !0),
+    Kl,
+    jl
   ], 16);
 }
-const Hl = /* @__PURE__ */ R(Vl, [["render", Ml], ["__scopeId", "data-v-6a35173c"]]), Ke = {
+const zl = /* @__PURE__ */ L(Hl, [["render", Yl], ["__scopeId", "data-v-6a35173c"]]), Je = {
   "en-US": {
     all: "All",
     activeFilters: "Active filters",
@@ -1710,28 +1766,28 @@ const Hl = /* @__PURE__ */ R(Vl, [["render", Ml], ["__scopeId", "data-v-6a35173c
     otherFilters: "Other filters",
     searchBar: "Search bar"
   }
-}, ql = L({
-  i18n: { messages: Ke },
+}, Jl = q({
+  i18n: { messages: Je },
   name: "all-filters-modal",
   components: {
-    AllFiltersModalButton: Ol,
-    BentoBooleanFilter: bt,
-    BentoButton: Pt,
-    BentoDateFilter: st,
-    BentoDateRangeFilter: it,
-    BentoInputFilter: ot,
-    BentoModal: Ut,
-    BentoRangeFilter: ft,
-    BentoSearchBar: Fe,
-    BentoSelectAvatarFilter: rt,
-    BentoSelectCurrencyFilter: ut,
-    BentoSelectCountryFilter: dt,
-    BentoSelectFilter: z,
-    BentoSelectPaymentMethodFilter: ct,
-    BentoSelectTagFilter: pt,
-    BentoTypography: re,
-    FilterBarButton: De,
-    SlidersIcon: Hl
+    AllFiltersModalButton: Ml,
+    BentoBooleanFilter: mt,
+    BentoButton: Rt,
+    BentoDateFilter: dt,
+    BentoDateRangeFilter: ct,
+    BentoInputFilter: ut,
+    BentoModal: kt,
+    BentoRangeFilter: _t,
+    BentoSearchBar: he,
+    BentoSelectAvatarFilter: bt,
+    BentoSelectCurrencyFilter: ft,
+    BentoSelectCountryFilter: pt,
+    BentoSelectFilter: Q,
+    BentoSelectPaymentMethodFilter: vt,
+    BentoSelectTagFilter: yt,
+    BentoTypography: ce,
+    FilterBarButton: Ue,
+    SlidersIcon: zl
   },
   props: {
     /**
@@ -1759,66 +1815,66 @@ const Hl = /* @__PURE__ */ R(Vl, [["render", Ml], ["__scopeId", "data-v-6a35173c
       default: () => []
     }
   },
-  emits: [$e.INPUT],
+  emits: [Ae.INPUT],
   setup(e, { emit: t }) {
-    const n = ze({ value: e.value }), l = Ie("all-filters-modal"), s = w([]), i = w(!1), o = w(0), r = w(null), a = w(""), { t: u } = oe({ messages: Ke }), d = et(a, H(n, "value")), g = w({});
-    Se(() => {
+    const n = We({ value: e.value }), l = Ee("all-filters-modal"), o = H([]), i = H(!1), s = H(0), r = H(null), a = H(""), { t: f } = re({ messages: Je }), u = at(a, z(n, "value")), g = H({});
+    De(() => {
       g.value = [];
-    }), me(
+    }), Fe(
       () => e.value,
       () => {
         n.value = e.value;
       }
     );
-    const _ = (c) => (
+    const F = (c) => (
       /* eslint-disable-next-line no-nested-ternary */
-      c.sort((I, T) => I.label > T.label ? 1 : T.label > I.label ? -1 : 0)
-    ), b = f(
-      () => _(
-        d.value.filter(
+      c.sort((T, E) => T.label > E.label ? 1 : E.label > T.label ? -1 : 0)
+    ), d = b(
+      () => F(
+        u.value.filter(
           (c) => {
-            var I, T;
-            return Array.isArray(c.value) ? ((I = c.value) == null ? void 0 : I.length) && ((T = c.value) == null ? void 0 : T.find((j) => j !== "")) : c.value;
+            var T, E;
+            return Array.isArray(c.value) ? ((T = c.value) == null ? void 0 : T.length) && ((E = c.value) == null ? void 0 : E.find((Y) => Y !== "")) : c.value;
           }
         )
       )
-    ), D = f(
-      () => _(
-        d.value.filter(
+    ), A = b(
+      () => F(
+        u.value.filter(
           (c) => {
-            var I, T;
-            return Array.isArray(c.value) ? ((I = c.value) == null ? void 0 : I.length) === 0 || ((T = c.value) == null ? void 0 : T.every((j) => j === "")) : !c.value;
+            var T, E;
+            return Array.isArray(c.value) ? ((T = c.value) == null ? void 0 : T.length) === 0 || ((E = c.value) == null ? void 0 : E.every((Y) => Y === "")) : !c.value;
           }
         )
       )
-    ), S = f(() => {
+    ), D = b(() => {
       var c;
-      return a.value && ((c = d.value) == null ? void 0 : c.length) === 0;
-    }), B = f(() => n.value[o.value]), q = () => {
-      const c = b.value.length ? b.value[0] : D.value[0], I = n.value.findIndex(
-        (T) => T.label === c.label && T.field === c.field
+      return a.value && ((c = u.value) == null ? void 0 : c.length) === 0;
+    }), $ = b(() => n.value[s.value]), P = () => {
+      const c = d.value.length ? d.value[0] : A.value[0], T = n.value.findIndex(
+        (E) => E.label === c.label && E.field === c.field
       );
-      o.value = I;
+      s.value = T;
     };
-    St(() => {
-      q();
+    Dt(() => {
+      P();
     });
-    const F = f(
+    const M = b(
       () => n.value.map((c) => {
-        var I, T, j, le, _e, Te;
+        var T, E, Y, te, x, Pe;
         switch (c.type) {
-          case Y.SELECT:
-          case Y.SELECT_AVATAR:
-          case Y.SELECT_COUNTRY:
-          case Y.SELECT_CURRENCY:
-          case Y.SELECT_PAYMENT_METHOD:
-          case Y.SELECT_TAG:
-            switch ((I = c.options) == null ? void 0 : I.multiple) {
+          case W.SELECT:
+          case W.SELECT_AVATAR:
+          case W.SELECT_COUNTRY:
+          case W.SELECT_CURRENCY:
+          case W.SELECT_PAYMENT_METHOD:
+          case W.SELECT_TAG:
+            switch ((T = c.options) == null ? void 0 : T.multiple) {
               case !0:
                 return {
                   label: c.label,
                   field: c.field,
-                  count: (T = c.value) != null && T.length ? (j = c.value) == null ? void 0 : j.length : null
+                  count: (E = c.value) != null && E.length ? (Y = c.value) == null ? void 0 : Y.length : null
                 };
               default:
                 return {
@@ -1827,21 +1883,21 @@ const Hl = /* @__PURE__ */ R(Vl, [["render", Ml], ["__scopeId", "data-v-6a35173c
                   count: c.value == null ? null : 1
                 };
             }
-          case Y.DATE_RANGE:
+          case W.DATE_RANGE:
             return {
               label: c.label,
               field: c.field,
-              count: ((le = c.value) == null ? void 0 : le.startDate) != null && ((_e = c.value) == null ? void 0 : _e.endDate) != null ? 1 : null
+              count: ((te = c.value) == null ? void 0 : te.startDate) != null && ((x = c.value) == null ? void 0 : x.endDate) != null ? 1 : null
             };
-          case Y.RANGE:
+          case W.RANGE:
             return {
               label: c.label,
               field: c.field,
-              count: (Te = c.value) != null && Te.find((mt) => mt !== "") ? 1 : null
+              count: (Pe = c.value) != null && Pe.find((ht) => ht !== "") ? 1 : null
             };
-          case Y.INPUT:
-          case Y.BOOLEAN:
-          case Y.DATE:
+          case W.INPUT:
+          case W.BOOLEAN:
+          case W.DATE:
           default:
             return {
               label: c.label,
@@ -1850,131 +1906,131 @@ const Hl = /* @__PURE__ */ R(Vl, [["render", Ml], ["__scopeId", "data-v-6a35173c
             };
         }
       })
-    ), h = f(
+    ), C = b(
       () => {
         var c;
-        return Array.isArray(B.value.value) ? ((c = B.value) == null ? void 0 : c.value.length) && B.value.value.find((I) => I !== "") : !!n.value[o.value].value;
+        return Array.isArray($.value.value) ? ((c = $.value) == null ? void 0 : c.value.length) && $.value.value.find((T) => T !== "") : !!n.value[s.value].value;
       }
-    ), U = f(
+    ), m = b(
       () => {
         var c;
         return (
           // eslint-disable-next-line no-return-assign, no-param-reassign
-          (c = F.value) == null ? void 0 : c.reduce((I, T) => I += T.count, 0)
+          (c = M.value) == null ? void 0 : c.reduce((T, E) => T += E.count, 0)
         );
       }
-    ), O = () => {
+    ), I = () => {
       i.value ? i.value = !1 : i.value = !0;
-    }, V = (c) => {
-      var T, j, le;
-      const I = F.value.find((_e) => _e.field === c.field).count;
-      return c.type.includes("BentoSelect") && ((T = c.options) != null && T.multiple) && I === ((le = (j = c.options) == null ? void 0 : j.listboxItems) == null ? void 0 : le.length) ? u("all") : I;
-    }, K = (c, I) => {
-      o.value = n.value.findIndex(
-        (T) => T.label === c && T.field === I
+    }, U = (c) => {
+      var E, Y, te;
+      const T = M.value.find((x) => x.field === c.field).count;
+      return c.type.includes("BentoSelect") && ((E = c.options) != null && E.multiple) && T === ((te = (Y = c.options) == null ? void 0 : Y.listboxItems) == null ? void 0 : te.length) ? f("all") : T;
+    }, j = (c, T) => {
+      s.value = n.value.findIndex(
+        (E) => E.label === c && E.field === T
       );
-    }, J = () => {
+    }, ue = () => {
       a.value = "";
-    }, G = () => {
-      i.value = !1, n.value = e.value, J(), q();
-    }, Q = (c) => {
-      const I = n.value.map(({ value: T, ...j }, le) => le === o.value ? { value: c.value, ...j } : { value: T, ...j });
-      n.value = I;
-    }, Z = () => {
-      Q({
-        field: B.value.field,
-        label: B.value.label,
-        type: B.value.type,
+    }, J = () => {
+      i.value = !1, n.value = e.value, ue(), P();
+    }, O = (c) => {
+      const T = n.value.map(({ value: E, ...Y }, te) => te === s.value ? { value: c.value, ...Y } : { value: E, ...Y });
+      n.value = T;
+    }, N = () => {
+      O({
+        field: $.value.field,
+        label: $.value.label,
+        type: $.value.type,
         value: void 0
       });
-    }, te = () => {
-      n.value = n.value.map(({ value: c, ...I }) => ({
-        ...I,
+    }, Z = () => {
+      n.value = n.value.map(({ value: c, ...T }) => ({
+        ...T,
         value: void 0
       }));
-    }, $ = () => {
-      t($e.INPUT, n.value), i.value = !1;
-    }, se = f(
+    }, G = () => {
+      t(Ae.INPUT, n.value), i.value = !1;
+    }, h = b(
       () => JSON.stringify(n.value) === JSON.stringify(e.value)
-    ), yt = f(() => [
+    ), X = b(() => [
       {
-        title: u("applyAll"),
-        disabled: se.value,
-        event: $
+        title: f("applyAll"),
+        disabled: h.value,
+        event: G
       },
       {
-        title: u("cancel"),
-        event: G
+        title: f("cancel"),
+        event: J
       },
       {
-        title: u("clearAll"),
-        disabled: !U.value,
-        event: te
+        title: f("clearAll"),
+        disabled: !m.value,
+        event: Z
       }
     ]);
     return {
       // Enums
-      BentoModalEvent: Et,
+      BentoModalEvent: Vt,
       // Values
       allFiltersModalUniqueId: l,
-      allFiltersModalFiltersSection: s,
+      allFiltersModalFiltersSection: o,
       allFiltersModalFilterButtons: g,
-      numberOfActiveFilters: U,
-      isEmptyResultForSearchFilter: S,
+      numberOfActiveFilters: m,
+      isEmptyResultForSearchFilter: D,
       isModalOpen: i,
-      isClearButtonEnabled: h,
-      activeFilters: b,
-      otherFilters: D,
-      modalActions: yt,
-      selectedFilter: B,
+      isClearButtonEnabled: C,
+      activeFilters: d,
+      otherFilters: A,
+      modalActions: X,
+      selectedFilter: $,
       selectedFilterRef: r,
       filters: n,
-      computedCounts: F,
+      computedCounts: M,
       searchTerm: a,
       // Methods
-      onClickAllFiltersModal: O,
-      getFilterCount: V,
-      cancel: G,
-      selectFilter: K,
-      clearFilter: Z,
-      updateFilter: Q,
-      onSearchbarClear: J,
+      onClickAllFiltersModal: I,
+      getFilterCount: U,
+      cancel: J,
+      selectFilter: j,
+      clearFilter: N,
+      updateFilter: O,
+      onSearchbarClear: ue,
       onKeydownRight: () => {
-        Rt(1, r.value.$el).focus();
+        Ot(1, r.value.$el).focus();
       },
       onKeydownLeft: () => {
-        g.value[B.value.label].$el.focus();
+        g.value[$.value.label].$el.focus();
       }
     };
   }
 });
-const Kl = { class: "b-all-filters-modal" }, jl = {
+const Gl = { class: "b-all-filters-modal" }, Zl = {
   key: 0,
   class: "b-all-filters-modal__empty-search-message"
-}, Yl = {
+}, Wl = {
   key: 1,
   class: "b-all-filters-modal__filters-section"
-}, zl = ["aria-labelledby"], Jl = {
+}, Ql = ["aria-labelledby"], Xl = {
   key: 2,
   class: "b-all-filters-modal__filters-section"
-}, Gl = ["aria-labelledby"], Zl = { class: "b-all-filters-modal__selected-filter-text" }, Wl = { class: "b-all-filters-modal__selected-filter-component" }, Ql = { class: "b-all-filters-modal__clear-button" };
-function Xl(e, t, n, l, s, i) {
-  const o = y("sliders-icon"), r = y("filter-bar-button"), a = y("bento-search-bar"), u = y("bento-typography"), d = y("all-filters-modal-button"), g = y("bento-button"), _ = y("bento-modal");
-  return p(), E("div", Kl, [
-    C(r, {
+}, xl = ["aria-labelledby"], en = { class: "b-all-filters-modal__selected-filter-text" }, tn = { class: "b-all-filters-modal__selected-filter-component" }, ln = { class: "b-all-filters-modal__clear-button" };
+function nn(e, t, n, l, o, i) {
+  const s = y("sliders-icon"), r = y("filter-bar-button"), a = y("bento-search-bar"), f = y("bento-typography"), u = y("all-filters-modal-button"), g = y("bento-button"), F = y("bento-modal");
+  return p(), k("div", Gl, [
+    S(r, {
       "is-filter-open": e.isModalOpen,
       "applied-filters-count": e.numberOfActiveFilters,
       onClick: e.onClickAllFiltersModal
     }, {
-      iconLeft: m(() => [
-        C(o, { "aria-hidden": "true" })
+      iconLeft: _(() => [
+        S(s, { "aria-hidden": "true" })
       ]),
-      default: m(() => [
-        N(k(e.$t("allFilters")) + " ", 1)
+      default: _(() => [
+        w(V(e.$t("allFilters")) + " ", 1)
       ]),
       _: 1
     }, 8, ["is-filter-open", "applied-filters-count", "onClick"]),
-    C(_, {
+    S(F, {
       class: "'b-all-filters-modal__modal'",
       "is-open": e.isModalOpen,
       "with-column-layout": !0,
@@ -1984,123 +2040,123 @@ function Xl(e, t, n, l, s, i) {
       "hide-close-button": "",
       onCloseModal: e.cancel
     }, {
-      default: m(() => [
-        N(k(e.$t("allFilters")), 1)
+      default: _(() => [
+        w(V(e.$t("allFilters")), 1)
       ]),
-      "content-col-1": m(() => [
-        P("div", {
+      "content-col-1": _(() => [
+        R("div", {
           ref: "allFiltersModalFiltersSection",
           class: "b-all-filters-modal__filters",
-          onKeydown: t[1] || (t[1] = ue((...b) => e.onKeydownRight && e.onKeydownRight(...b), ["right"]))
+          onKeydown: t[1] || (t[1] = be((...d) => e.onKeydownRight && e.onKeydownRight(...d), ["right"]))
         }, [
-          C(a, {
+          S(a, {
             class: "b-all-filters-modal__search-bar",
             value: e.searchTerm,
             "input-field-aria-label": e.$t("searchBar").toString(),
-            onInput: t[0] || (t[0] = (b) => e.searchTerm = b),
+            onInput: t[0] || (t[0] = (d) => e.searchTerm = d),
             onClear: e.onSearchbarClear
           }, null, 8, ["value", "input-field-aria-label", "onClear"]),
-          e.isEmptyResultForSearchFilter ? (p(), E("div", jl, [
-            C(u, { el: "span" }, {
-              default: m(() => [
-                N(k(e.$t("noFiltersMatchThisSearch")), 1)
+          e.isEmptyResultForSearchFilter ? (p(), k("div", Zl, [
+            S(f, { el: "span" }, {
+              default: _(() => [
+                w(V(e.$t("noFiltersMatchThisSearch")), 1)
               ]),
               _: 1
             })
-          ])) : M("", !0),
-          e.activeFilters.length ? (p(), E("div", Yl, [
-            C(u, {
+          ])) : K("", !0),
+          e.activeFilters.length ? (p(), k("div", Wl, [
+            S(f, {
               id: `active-filters-${e.allFiltersModalUniqueId}`,
               class: "b-all-filters-modal__filters-section-title",
               el: "span",
               variant: "caption"
             }, {
-              default: m(() => [
-                N(k(e.$t("activeFilters")), 1)
+              default: _(() => [
+                w(V(e.$t("activeFilters")), 1)
               ]),
               _: 1
             }, 8, ["id"]),
-            P("ul", {
+            R("ul", {
               class: "b-all-filters-modal__filters-list",
               "aria-labelledby": `active-filters-${e.allFiltersModalUniqueId}`
             }, [
-              (p(!0), E(de, null, ce(e.activeFilters, (b) => (p(), E("li", {
-                key: `${b.label}-${b.field}`
+              (p(!0), k(fe, null, pe(e.activeFilters, (d) => (p(), k("li", {
+                key: `${d.label}-${d.field}`
               }, [
-                C(d, {
+                S(u, {
                   ref_for: !0,
-                  ref: (D) => e.allFiltersModalFilterButtons[b.label] = D,
-                  label: b.label,
-                  "applied-filters-count": e.getFilterCount(b),
-                  "is-filter-open": e.selectedFilter.label === b.label,
-                  onClick: (D) => e.selectFilter(b.label, b.field)
+                  ref: (A) => e.allFiltersModalFilterButtons[d.label] = A,
+                  label: d.label,
+                  "applied-filters-count": e.getFilterCount(d),
+                  "is-filter-open": e.selectedFilter.label === d.label,
+                  onClick: (A) => e.selectFilter(d.label, d.field)
                 }, null, 8, ["label", "applied-filters-count", "is-filter-open", "onClick"])
               ]))), 128))
-            ], 8, zl)
-          ])) : M("", !0),
-          e.otherFilters.length ? (p(), E("div", Jl, [
-            e.activeFilters.length ? (p(), A(u, {
+            ], 8, Ql)
+          ])) : K("", !0),
+          e.otherFilters.length ? (p(), k("div", Xl, [
+            e.activeFilters.length ? (p(), B(f, {
               key: 0,
               id: `other-filters-${e.allFiltersModalUniqueId}`,
               class: "b-all-filters-modal__filters-section-title",
               el: "span",
               variant: "caption"
             }, {
-              default: m(() => [
-                N(k(e.$t("otherFilters")), 1)
+              default: _(() => [
+                w(V(e.$t("otherFilters")), 1)
               ]),
               _: 1
-            }, 8, ["id"])) : M("", !0),
-            P("ul", {
+            }, 8, ["id"])) : K("", !0),
+            R("ul", {
               class: "b-all-filters-modal__filters-list",
               "aria-labelledby": `other-filters-${e.allFiltersModalUniqueId}`
             }, [
-              (p(!0), E(de, null, ce(e.otherFilters, (b) => (p(), E("li", {
-                key: `${b.label}-${b.field}`
+              (p(!0), k(fe, null, pe(e.otherFilters, (d) => (p(), k("li", {
+                key: `${d.label}-${d.field}`
               }, [
-                C(d, {
+                S(u, {
                   ref_for: !0,
-                  ref: (D) => e.allFiltersModalFilterButtons[b.label] = D,
-                  label: b.label,
-                  "applied-filters-count": e.getFilterCount(b),
-                  "is-filter-open": e.selectedFilter.label === b.label,
-                  onClick: (D) => e.selectFilter(b.label, b.field)
+                  ref: (A) => e.allFiltersModalFilterButtons[d.label] = A,
+                  label: d.label,
+                  "applied-filters-count": e.getFilterCount(d),
+                  "is-filter-open": e.selectedFilter.label === d.label,
+                  onClick: (A) => e.selectFilter(d.label, d.field)
                 }, null, 8, ["label", "applied-filters-count", "is-filter-open", "onClick"])
               ]))), 128))
-            ], 8, Gl)
-          ])) : M("", !0)
+            ], 8, xl)
+          ])) : K("", !0)
         ], 544)
       ]),
-      "content-col-2": m(() => [
-        P("div", {
+      "content-col-2": _(() => [
+        R("div", {
           class: "b-all-filters-modal__selected-filter-content",
-          onKeydown: t[2] || (t[2] = ue((...b) => e.onKeydownLeft && e.onKeydownLeft(...b), ["left"]))
+          onKeydown: t[2] || (t[2] = be((...d) => e.onKeydownLeft && e.onKeydownLeft(...d), ["left"]))
         }, [
-          P("div", Zl, [
-            C(u, {
+          R("div", en, [
+            S(f, {
               el: "div",
               variant: "title",
               medium: ""
             }, {
-              default: m(() => [
-                N(k(e.selectedFilter.label), 1)
+              default: _(() => [
+                w(V(e.selectedFilter.label), 1)
               ]),
               _: 1
             }),
-            e.selectedFilter.description ? (p(), A(u, {
+            e.selectedFilter.description ? (p(), B(f, {
               key: 0,
               el: "div",
               variant: "body",
               wide: ""
             }, {
-              default: m(() => [
-                N(k(e.selectedFilter.description), 1)
+              default: _(() => [
+                w(V(e.selectedFilter.description), 1)
               ]),
               _: 1
-            })) : M("", !0)
+            })) : K("", !0)
           ]),
-          P("div", Wl, [
-            (p(), A(ge(e.selectedFilter.type), {
+          R("div", tn, [
+            (p(), B(Be(e.selectedFilter.type), {
               ref: "selectedFilterRef",
               key: e.selectedFilter.field,
               field: e.selectedFilter.field,
@@ -2112,14 +2168,14 @@ function Xl(e, t, n, l, s, i) {
               onInput: e.updateFilter
             }, null, 40, ["field", "label", "options", "value", "default-value", "onInput"]))
           ]),
-          P("div", Ql, [
-            C(g, {
+          R("div", ln, [
+            S(g, {
               variant: "secondary",
               disabled: !e.isClearButtonEnabled,
               onClick: e.clearFilter
             }, {
-              default: m(() => [
-                N(k(e.$t("clear")), 1)
+              default: _(() => [
+                w(V(e.$t("clear")), 1)
               ]),
               _: 1
             }, 8, ["disabled", "onClick"])
@@ -2130,30 +2186,30 @@ function Xl(e, t, n, l, s, i) {
     }, 8, ["is-open", "actions", "onCloseModal"])
   ]);
 }
-const xl = /* @__PURE__ */ R(ql, [["render", Xl], ["__scopeId", "data-v-2653c56a"]]);
-let je = 0;
-const en = {
+const an = /* @__PURE__ */ L(Jl, [["render", nn], ["__scopeId", "data-v-2653c56a"]]);
+let Ge = 0;
+const on = {
   beforeCreate() {
-    this.uuid = je.toString(), je += 1;
+    this.uuid = Ge.toString(), Ge += 1;
   }
-}, tn = (e) => (Be("data-v-35088f28"), e = e(), Ae(), e), ln = { key: 0 }, nn = /* @__PURE__ */ tn(() => /* @__PURE__ */ P("path", {
+}, sn = (e) => (Ie("data-v-35088f28"), e = e(), Te(), e), rn = { key: 0 }, un = /* @__PURE__ */ sn(() => /* @__PURE__ */ R("path", {
   fill: "#00112C",
   "fill-rule": "evenodd",
   d: "M14 1.25C14.4142 1.25 14.75 1.58579 14.75 2V6C14.75 6.41421 14.4142 6.75 14 6.75H13.6783C13.6661 6.7503 13.6539 6.7503 13.6418 6.75H10C9.58579 6.75 9.25 6.41421 9.25 6C9.25 5.58579 9.58579 5.25 10 5.25H12.4738C12.0646 4.58631 11.51 4.018 10.8465 3.59097C9.86926 2.96199 8.71093 2.67505 7.55308 2.77512C6.39523 2.8752 5.30331 3.35663 4.44847 4.14395C3.59363 4.93128 3.0242 5.97999 2.82942 7.12572C2.82642 7.14333 2.82284 7.16069 2.81868 7.17779C2.75208 7.59699 2.73609 8.02569 2.77328 8.45478C2.88357 9.72739 3.45406 10.9161 4.37787 11.7983C5.30168 12.6805 6.51543 13.1956 7.79177 13.2472C9.06811 13.2988 10.3195 12.8832 11.3114 12.0784C12.3034 11.2736 12.9679 10.1347 13.1805 8.87518C13.2494 8.46674 13.6364 8.19152 14.0448 8.26046C14.4533 8.32939 14.7285 8.71637 14.6595 9.12481C14.3862 10.7443 13.5319 12.2085 12.2565 13.2432C10.9811 14.278 9.37223 14.8123 7.73123 14.746C6.09022 14.6797 4.52968 14.0174 3.34192 12.8831C2.15417 11.7489 1.42069 10.2205 1.27888 8.58429C1.13708 6.94808 1.59668 5.3163 2.57158 3.99462C3.54649 2.67294 4.96983 1.75203 6.57496 1.40441C8.18009 1.05679 9.8569 1.3063 11.2913 2.10621C12.0495 2.52906 12.7125 3.09037 13.25 3.7543V2C13.25 1.58579 13.5858 1.25 14 1.25Z",
   "clip-rule": "evenodd"
 }, null, -1));
-function an(e, t, n, l, s, i) {
-  return p(), E("svg", x({ role: "img" }, e.$attrs, {
+function dn(e, t, n, l, o, i) {
+  return p(), k("svg", ne({ role: "img" }, e.$attrs, {
     xmlns: "http://www.w3.org/2000/svg",
     width: "16",
     height: "16",
     fill: "none"
   }), [
-    e.$attrs["svg-title"] ? (p(), E("title", ln, k(e.$attrs["svg-title"]), 1)) : M("", !0),
-    nn
+    e.$attrs["svg-title"] ? (p(), k("title", rn, V(e.$attrs["svg-title"]), 1)) : K("", !0),
+    un
   ], 16);
 }
-const on = /* @__PURE__ */ R(en, [["render", an], ["__scopeId", "data-v-35088f28"]]), Ye = {
+const cn = /* @__PURE__ */ L(on, [["render", dn], ["__scopeId", "data-v-35088f28"]]), Ze = {
   "en-US": {
     clearAll: "Clear all",
     filtersHaveBeenCleared: "Filters have been cleared.",
@@ -2162,25 +2218,25 @@ const on = /* @__PURE__ */ R(en, [["render", an], ["__scopeId", "data-v-35088f28
     resetAll: "Reset all",
     searchBar: "Search bar"
   }
-}, sn = L({
-  i18n: { messages: Ye },
+}, bn = q({
+  i18n: { messages: Ze },
   name: "bento-filter-bar",
   components: {
-    AllFiltersModal: xl,
-    FilterBarButton: De,
-    BentoBooleanFilter: bt,
-    BentoDateFilter: st,
-    BentoDateRangeFilter: it,
-    BentoRangeFilter: ft,
-    BentoInputFilter: ot,
-    BentoSelectFilter: z,
-    BentoSelectAvatarFilter: rt,
-    BentoSelectCountryFilter: dt,
-    BentoSelectCurrencyFilter: ut,
-    BentoSelectPaymentMethodFilter: ct,
-    BentoSelectTagFilter: pt,
-    BentoSearchBar: Fe,
-    RefreshIcon: on
+    AllFiltersModal: an,
+    BentoBooleanFilter: mt,
+    BentoDateFilter: dt,
+    BentoDateRangeFilter: ct,
+    BentoRangeFilter: _t,
+    BentoInputFilter: ut,
+    BentoSelectFilter: Q,
+    BentoSelectAvatarFilter: bt,
+    BentoSelectCountryFilter: pt,
+    BentoSelectCurrencyFilter: ft,
+    BentoSelectPaymentMethodFilter: vt,
+    BentoSelectTagFilter: yt,
+    BentoSearchBar: he,
+    FilterBarButton: Ue,
+    RefreshIcon: cn
   },
   props: {
     /**
@@ -2188,11 +2244,11 @@ const on = /* @__PURE__ */ R(en, [["render", an], ["__scopeId", "data-v-35088f28
      * If the value is non-existant (null or undefined) the search bar won't be enabled.
      */
     searchTerm: {
-      type: Fe.props.value.type,
+      type: he.props.value.type,
       default: void 0
     },
     /**
-     * Array of filters based on {@see FilterBarModel}.
+     * Array of filters based on {@see BentoFilterBarModel}.
      * Each one of the elements in the array correspond to a filter that will
      * be created and rendered in the FilterBar.
      *
@@ -2214,148 +2270,178 @@ const on = /* @__PURE__ */ R(en, [["render", an], ["__scopeId", "data-v-35088f28
     value: {
       type: Array,
       default: () => []
+    },
+    /**
+     * An array of the values for each filter in the filter bar.
+     * {@see BentoFilterValues}
+     *
+     *  @example
+     * [{
+     *   field: 'company',
+     *   value: '200',
+     * }, {
+     *   field: 'name',
+     *   value: 'some text',
+     * }]
+     */
+    filterValues: {
+      type: Array,
+      default: () => []
     }
   },
   emits: [
-    ee.INPUT,
-    ie.CLEAR,
-    ie.INPUT,
-    ie.UPDATE
+    _e.INPUT,
+    _e.UPDATE_FILTER_VALUES,
+    de.CLEAR,
+    de.INPUT,
+    de.UPDATE
   ],
   setup(e, { emit: t }) {
-    const { t: n } = oe({ messages: Ye }), l = Tt(), s = f(() => n("searchBar")), i = f(() => e.value.some(({ visible: h }) => h != null) ? e.value.some(({ visible: h }) => !h) : !1), o = f(
-      () => e.value.filter(({ defaultValue: F }) => F !== void 0)
-    ), r = f(() => e.value.some(({ visible: h }) => h != null) ? e.value.filter(({ defaultValue: h, visible: U }) => h === void 0 && U) : e.value.filter(({ defaultValue: h }) => h === void 0)), a = f(() => e.searchTerm != null), u = f(
-      () => e.value.filter(({ defaultValue: F }) => F == null).some(({ value: F }) => F != null)
-    ), d = f(() => o.value.length === 0 && u.value), g = f(() => o.value.length === 0 ? !1 : !e.value.filter(({ defaultValue: h }) => h !== void 0 || h !== null).every(({ value: h, defaultValue: U }) => JSON.stringify(h) === JSON.stringify(U)) || u.value);
+    const { t: n } = re({ messages: Ze }), l = b(
+      () => {
+        var C;
+        return (C = e.value) == null ? void 0 : C.map((m) => {
+          var U;
+          const I = (U = e.filterValues.find(({ field: j }) => j === m.field)) == null ? void 0 : U.value;
+          return { ...m, value: I !== void 0 ? I : m == null ? void 0 : m.value };
+        });
+      }
+    ), o = Pt(), i = b(() => n("searchBar")), s = b(() => l.value.some(
+      ({ visible: m }) => m != null
+    ) ? l.value.some(({ visible: m }) => !m) : !1), r = b(
+      () => l.value.filter(({ defaultValue: C }) => C !== void 0)
+    ), a = b(() => l.value.some(
+      ({ visible: m }) => m != null
+    ) ? l.value.filter(
+      ({ defaultValue: m, visible: I }) => m === void 0 && I
+    ) : l.value.filter(({ defaultValue: m }) => m === void 0)), f = b(() => e.searchTerm != null), u = b(
+      () => l.value.filter(({ defaultValue: C }) => C == null).some(({ value: C }) => C != null)
+    ), g = b(() => r.value.length === 0 && u.value), F = b(() => r.value.length === 0 ? !1 : !l.value.filter(({ defaultValue: m }) => m !== void 0 || m !== null).every(({ value: m, defaultValue: I }) => JSON.stringify(m) === JSON.stringify(I)) || u.value), d = (C) => {
+      t(_e.INPUT, C), t(
+        _e.UPDATE_FILTER_VALUES,
+        C == null ? void 0 : C.filter(({ value: m }) => m !== null || m !== void 0).map(({ field: m, value: I }) => ({ field: m, value: I }))
+      );
+    };
     return {
       // Values
-      hasHiddenFilters: i,
-      isClearAllVisible: d,
-      isSearchBarEnabled: a,
-      searchBarAriaLabel: s,
-      persistentFilters: o,
-      regularFilters: r,
-      isResetAllVisible: g,
+      hasHiddenFilters: s,
+      isClearAllVisible: g,
+      isSearchBarEnabled: f,
+      searchBarAriaLabel: i,
+      persistentFilters: r,
+      regularFilters: a,
+      isResetAllVisible: F,
       // Events
-      updateAllFilters: (F) => {
-        t(ee.INPUT, F);
-      },
-      updateFilterHandler: (F) => {
-        const h = e.value.findIndex((O) => O.field === F.field), U = e.value.slice();
-        U[h].value = F.value, t(ee.INPUT, U);
+      updateAllFilters: d,
+      updateFilterHandler: (C) => {
+        const m = l.value.findIndex(
+          (U) => U.field === C.field
+        ), I = l.value.slice();
+        I[m].value = C.value, d(I);
       },
       clearAllFilters: () => {
-        const F = e.value.slice(), h = e.value.map(({ value: U, ...O }) => ({
-          ...O,
+        const C = l.value.slice(), m = l.value.map(({ value: I, ...U }) => ({
+          ...U,
           value: void 0
         }));
-        l.addToast({
+        o.addToast({
           text: n("filtersHaveBeenCleared"),
           action: {
-            handler: () => t(ee.INPUT, F),
+            handler: () => d(C),
             text: n("undo")
           }
-        }), t(ee.INPUT, h);
+        }), d(m);
       },
       onSearchbarClear: () => {
-        t(ie.CLEAR);
+        t(de.CLEAR);
       },
-      onSearchbarInput: (F) => {
-        t(ie.INPUT, F), t(ie.UPDATE, F);
+      onSearchbarInput: (C) => {
+        t(de.INPUT, C), t(de.UPDATE, C);
       },
       resetAllFilters: () => {
-        const F = e.value.slice(), h = e.value.map(({ defaultValue: U, ...O }) => ({
-          ...O,
-          defaultValue: U,
-          value: U
+        const C = l.value.slice(), m = l.value.map(({ defaultValue: I, ...U }) => ({
+          ...U,
+          defaultValue: I,
+          value: I
         }));
-        l.addToast({
+        o.addToast({
           text: n("filtersHaveBeenReset"),
           action: {
-            handler: () => t(ee.INPUT, F),
+            handler: () => d(C),
             text: n("undo")
           }
-        }), t(ee.INPUT, h);
+        }), d(m);
       }
     };
   }
 });
-const rn = { class: "b-filter-bar" }, un = { class: "b-filter-bar__filters-wrapper" }, dn = {
-  key: 0,
-  class: "b-filter-bar__persistent-filters"
-}, cn = { class: "b-filter-bar__regular-filters" };
-function pn(e, t, n, l, s, i) {
-  const o = y("all-filters-modal"), r = y("refresh-icon"), a = y("filter-bar-button"), u = y("bento-search-bar");
-  return p(), E("div", rn, [
-    P("div", un, [
-      e.persistentFilters.length ? (p(), E("div", dn, [
-        (p(!0), E(de, null, ce(e.persistentFilters, (d) => (p(), A(ge(d.type), {
-          key: d.field,
-          field: d.field,
-          label: d.label,
-          options: d.options,
-          value: d.value,
-          "default-value": d.defaultValue,
-          onUpdate: e.updateFilterHandler
-        }, null, 40, ["field", "label", "options", "value", "default-value", "onUpdate"]))), 128))
-      ])) : M("", !0),
-      P("div", cn, [
-        (p(!0), E(de, null, ce(e.regularFilters, (d) => (p(), A(ge(d.type), {
-          key: d.field,
-          field: d.field,
-          label: d.label,
-          options: d.options,
-          value: d.value,
-          onUpdate: e.updateFilterHandler
-        }, null, 40, ["field", "label", "options", "value", "onUpdate"]))), 128)),
-        e.hasHiddenFilters ? (p(), A(o, {
-          key: 0,
-          value: e.value,
-          onInput: e.updateAllFilters
-        }, null, 8, ["value", "onInput"])) : M("", !0)
-      ]),
-      he(C(a, { onClick: e.clearAllFilters }, {
-        iconLeft: m(() => [
-          C(r, { "aria-hidden": "true" })
-        ]),
-        default: m(() => [
-          N(k(e.$t("clearAll")) + " ", 1)
-        ]),
-        _: 1
-      }, 8, ["onClick"]), [
-        [Pe, e.isClearAllVisible]
-      ]),
-      he(C(a, {
-        class: "b-filter-bar__reset-all",
-        onClick: e.resetAllFilters
-      }, {
-        iconLeft: m(() => [
-          C(r, { "aria-hidden": "true" })
-        ]),
-        default: m(() => [
-          N(k(e.$t("resetAll")) + " ", 1)
-        ]),
-        _: 1
-      }, 8, ["onClick"]), [
-        [Pe, e.isResetAllVisible]
-      ])
-    ]),
-    e.isSearchBarEnabled ? (p(), A(u, {
+const fn = { class: "b-filter-bar" };
+function pn(e, t, n, l, o, i) {
+  const s = y("bento-search-bar"), r = y("all-filters-modal"), a = y("refresh-icon"), f = y("filter-bar-button");
+  return p(), k("div", fn, [
+    e.isSearchBarEnabled ? (p(), B(s, {
       key: 0,
       class: "b-filter-bar__search-bar",
       "input-field-aria-label": e.searchBarAriaLabel,
       value: e.searchTerm,
+      condensed: "",
       onInput: e.onSearchbarInput,
       onClear: e.onSearchbarClear
-    }, null, 8, ["input-field-aria-label", "value", "onInput", "onClear"])) : M("", !0)
+    }, null, 8, ["input-field-aria-label", "value", "onInput", "onClear"])) : K("", !0),
+    e.persistentFilters.length ? (p(!0), k(fe, { key: 1 }, pe(e.persistentFilters, (u) => (p(), B(Be(u.type), {
+      key: u.field,
+      field: u.field,
+      label: u.label,
+      options: u.options,
+      value: u.value,
+      "default-value": u.defaultValue,
+      onUpdate: e.updateFilterHandler
+    }, null, 40, ["field", "label", "options", "value", "default-value", "onUpdate"]))), 128)) : K("", !0),
+    (p(!0), k(fe, null, pe(e.regularFilters, (u) => (p(), B(Be(u.type), {
+      key: u.field,
+      field: u.field,
+      label: u.label,
+      options: u.options,
+      value: u.value,
+      onUpdate: e.updateFilterHandler
+    }, null, 40, ["field", "label", "options", "value", "onUpdate"]))), 128)),
+    e.hasHiddenFilters ? (p(), B(r, {
+      key: 2,
+      value: e.value,
+      onInput: e.updateAllFilters
+    }, null, 8, ["value", "onInput"])) : K("", !0),
+    Se(S(f, { onClick: e.clearAllFilters }, {
+      iconLeft: _(() => [
+        S(a, { "aria-hidden": "true" })
+      ]),
+      default: _(() => [
+        w(V(e.$t("clearAll")) + " ", 1)
+      ]),
+      _: 1
+    }, 8, ["onClick"]), [
+      [Re, e.isClearAllVisible]
+    ]),
+    Se(S(f, {
+      class: "b-filter-bar__reset-all",
+      onClick: e.resetAllFilters
+    }, {
+      iconLeft: _(() => [
+        S(a, { "aria-hidden": "true" })
+      ]),
+      default: _(() => [
+        w(V(e.$t("resetAll")) + " ", 1)
+      ]),
+      _: 1
+    }, 8, ["onClick"]), [
+      [Re, e.isResetAllVisible]
+    ])
   ]);
 }
-const Wn = /* @__PURE__ */ R(sn, [["render", pn], ["__scopeId", "data-v-11775cf0"]]);
+const Wn = /* @__PURE__ */ L(bn, [["render", pn], ["__scopeId", "data-v-73c85758"]]);
 export {
   Wn as BentoFilterBar,
-  ee as BentoFilterBarEvent,
+  _e as BentoFilterBarEvent,
   v as BentoFilterEvent,
-  Y as BentoFilterItemType
+  W as BentoFilterItemType
 };
 //# sourceMappingURL=filter-bar.js.map