@adyen/bento-vue3 1.3.0 → 1.4.0

package/dist/filter-bar.js

@@ -1,48 +1,52 @@
-import { defineComponent as R, computed as f, ref as P, resolveComponent as b, openBlock as v, createBlock as S, normalizeClass as ie, createSlots as ye, withCtx as m, createElementVNode as V, createVNode as g, renderSlot as pe, createElementBlock as U, createTextVNode as N, toDisplayString as L, createCommentVNode as Q, watch as ve, resolveDirective as bt, withDirectives as me, withKeys as ae, toRef as M, onBeforeUpdate as Be, nextTick as Ye, mergeProps as ee, Fragment as oe, reactive as Ke, renderList as se, normalizeProps as Ie, guardReactiveProps as De, pushScopeId as vt, popScopeId as yt, toRefs as mt, provide as Ft, onMounted as _t, resolveDynamicComponent as Fe, vShow as Ee } from "vue";
-import { _ as k } from "./chunks/_plugin-vue_export-helper.dad06003.js";
-import { a as he, B as He } from "./chunks/button.e1c39f66.js";
-import { BentoPopover as Ue, BentoPopoverPositions as Bt } from "./popover.js";
-import { B as ht } from "./chunks/directive.0408e565.js";
-import { B as gt } from "./chunks/tooltip.835d9b52.js";
-import { u as le } from "./chunks/i18n.6c402773.js";
-import { g as ge } from "./chunks/unique-id.a2a2b458.js";
-import { B as Ce, a as Se, b as Ae, d as Ct } from "./chunks/index.222d29b0.js";
-import { u as St } from "./chunks/aria-label.ac9651a5.js";
-import { u as At } from "./chunks/use-has-slot.068222e6.js";
-import { B as Tt, a as Pe } from "./chunks/base-button.20be08da.js";
-import { g as $t } from "./chunks/get-slot-text.2db867f8.js";
-import { a as It, C as Dt } from "./chunks/chevron-down.69bedf14.js";
-import { c as je, B as Et } from "./chunks/button-actions.54e28e75.js";
-import { BentoRadioGroup as Ut } from "./radio-group.js";
-import { BentoInputField as ze, BentoInputFieldType as Pt } from "./input-field.js";
-import { BentoSearchBar as be, BentoSearchBarEvent as ne } from "./search-bar.js";
-import { u as Rt } from "./chunks/toastController.0b01d2e8.js";
-import { BentoModal as kt, BentoModalEvent as Ot, BentoModalSize as Vt } from "./modal.js";
-import { B as Nt, u as Ge } from "./chunks/dropdown.8b415aac.js";
-import { g as Lt } from "./chunks/index.13949709.js";
-import { BentoDivider as Je } from "./divider.js";
-import { BentoDatePicker as Mt } from "./date-picker.js";
-import { f as de } from "./chunks/index.d27367cd.js";
-import { e as te, d as We, f as Qe } from "./chunks/index.f55fdc32.js";
-import { C as wt } from "./chunks/calendar.09b683b3.js";
-import { B as qt, D as Yt } from "./chunks/index.c9225c3b.js";
-import { D as Re } from "./chunks/date-input.9186a0bf.js";
-import { B as Kt } from "./chunks/listbox.0c7c4e5e.js";
-import { B as Ht, L as Xe } from "./chunks/listbox-option-tag.5ae8b79b.js";
-import { BentoCountry as jt, BentoCountryVariant as Ze } from "./country.js";
-import { u as zt } from "./chunks/useCountryItems.e83ef8f0.js";
-import { BentoPaymentMethod as Gt } from "./payment-method.js";
-import "./assets/index30.css";
-var c = /* @__PURE__ */ ((e) => (e.INPUT = "input", e.UPDATE = "update", e))(c || {}), x = /* @__PURE__ */ ((e) => (e.INPUT = "input", e))(x || {}), H = /* @__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))(H || {});
-const Jt = R({
-  name: "base-filter-button",
-  components: { BaseButton: Tt, BentoTypography: Ce, ChevronUpIcon: It, ChevronDownIcon: Dt },
+import { defineComponent as w, useSlots as yt, useAttrs as mt, computed as f, ref as N, openBlock as b, createBlock as S, unref as X, normalizeClass as ue, withCtx as m, createTextVNode as V, toDisplayString as k, createCommentVNode as q, createElementBlock as U, createElementVNode as R, renderSlot as ne, createVNode as g, watch as ve, resolveComponent as y, resolveDirective as _t, withDirectives as _e, withKeys as se, toRef as L, onBeforeUpdate as ge, mergeProps as x, Fragment as ie, reactive as He, createSlots as Fe, renderList as re, normalizeProps as Ie, guardReactiveProps as De, pushScopeId as Ke, popScopeId as je, toRefs as Ft, provide as ht, nextTick as Ct, onMounted as gt, resolveDynamicComponent as he, vShow as Te } from "vue";
+import { _ as O } from "./chunks/_plugin-vue_export-helper.dad06003.js";
+import { BentoPopover as Ue } from "./popover.js";
+import { B as $t } from "./chunks/directive.0408e565.js";
+import { B as Bt } from "./chunks/tooltip.e4e34b86.js";
+import { u as ae } from "./chunks/i18n.6c402773.js";
+import { g as $e } from "./chunks/unique-id.a2a2b458.js";
+import { B as be, d as St } from "./chunks/index.89b00b94.js";
+import { u as Ye } from "./chunks/aria-label.ac9651a5.js";
+import { B as ze, a as Ee } from "./chunks/base-button.6d2843c2.js";
+import { g as Je } from "./chunks/get-slot-text.bead058f.js";
+import { u as Ge } from "./chunks/use-has-slot.9fac7123.js";
+import { C as We, a as Ze } from "./chunks/chevron-up.c03b58f8.js";
+import { BentoRadioGroup as At } from "./radio-group.js";
+import { BentoInputField as Qe } from "./input-field.js";
+import { BentoSearchBar as me, BentoSearchBarEvent as oe } from "./search-bar.js";
+import { u as It } from "./chunks/toastController.0b01d2e8.js";
+import { BentoModal as Dt } from "./modal.js";
+import { e as Tt } from "./chunks/base-modal.3ccb9eb5.js";
+import { a as Ut } from "./chunks/button.a8462029.js";
+import { B as Et, u as Xe } from "./chunks/dropdown.b798a82e.js";
+import { g as Pt } from "./chunks/index.d26fdf71.js";
+import { BentoDivider as xe } from "./divider.js";
+import { BentoDatePicker as kt } from "./date-picker.js";
+import { f as pe } from "./chunks/index.e84dbeae.js";
+import { e as le, d as et, f as tt } from "./chunks/index.f55fdc32.js";
+import { C as Rt } from "./chunks/calendar.3f930683.js";
+import { B as Ot, D as Vt } from "./chunks/index.c2a80208.js";
+import { D as Pe } from "./chunks/date-input.9186a0bf.js";
+import { BentoButtonActions as Nt } from "./button.js";
+import { B as wt } from "./chunks/listbox.6b52af1a.js";
+import { B as Lt, L as lt } from "./chunks/listbox-option-tag.0c9c571e.js";
+import { BentoCountry as Mt } from "./country.js";
+import { u as qt } from "./chunks/useCountryItems.e83ef8f0.js";
+import { BentoPaymentMethod as Ht } from "./payment-method.js";
+import "./assets/index18.css";
+var v = /* @__PURE__ */ ((e) => (e.INPUT = "input", e.UPDATE = "update", e))(v || {}), te = /* @__PURE__ */ ((e) => (e.INPUT = "input", e))(te || {}), 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 Kt = { class: "b-filter-bar-button__container" }, jt = {
+  key: 1,
+  class: "b-filter-bar-button__chevron"
+}, Yt = {}, zt = /* @__PURE__ */ w({
+  ...Yt,
+  __name: "filter-bar-button",
   props: {
     /**
      * The number of applies values within the filter.
      * e.g. if 2 items in a dropdown filter have been applied, the number 2 will be shown here.
      */
-    amountAppliedValues: { type: Number, default: null },
+    appliedFiltersCount: { type: Number, default: null },
     /**
      * Disables button functionality.
      */
@@ -55,168 +59,77 @@ const Jt = R({
      * Toggles if a chevron icon should be displayed in the button.
      * The chevron will change depending on the open state of the filter.
      */
-    hasChevron: { type: Boolean, default: !1 },
-    /**
-     * Renders the text in a stronger variant.
-     */
-    bold: { type: Boolean, default: !1 }
+    hasChevron: { type: Boolean, default: !1 }
   },
-  emits: [Pe.CLICK],
-  setup(e, { slots: t, emit: a, attrs: l }) {
-    const s = f(() => t.default ? $t(t)("default") : null), u = St({ ariaLabel: s }), o = P(null), i = f(() => {
-      var y;
+  emits: ["click"],
+  setup(e, { emit: t }) {
+    const a = e, l = yt(), s = mt(), i = Ge(l), o = f(() => l.default ? Je(l)("default") : null), r = Ye({ ariaLabel: o }), n = N(null), d = f(() => {
+      var u;
       return {
-        "aria-controls": (y = l["aria-controls"]) == null ? void 0 : y.toString()
+        "aria-controls": (u = s["aria-controls"]) == null ? void 0 : u.toString()
       };
-    }), n = f(() => ({
-      ["b-base-filter-button--with-chevron"]: e.hasChevron,
-      ["b-base-filter-button--filter-open"]: e.isFilterOpen
-    }));
-    return {
-      // Enums
-      BentoTypographyElement: Se,
-      BentoTypographyVariant: Ae,
-      // Values
-      ariaAttributes: i,
-      computedAriaLabel: u,
-      conditionalClasses: n,
-      // Methods
-      onClickButton: () => {
-        e.disabled || a(Pe.CLICK);
-      },
-      hasSlot: At(t),
-      // Refs
-      baseFilterButtonRef: o
+    }), c = f(() => ({
+      "b-filter-bar-button--filter-open": a.isFilterOpen,
+      "b-filter-bar-button--with-counter": a.appliedFiltersCount,
+      "b-filter-bar-button--with-chevron": a.hasChevron
+    })), h = (u) => {
+      a.disabled || t("click", u);
     };
-  }
-});
-const Wt = { class: "b-base-filter-button__default-container" }, Qt = {
-  key: 0,
-  class: "b-base-filter-button__counter-wrapper"
-};
-function Xt(e, t, a, l, s, u) {
-  const o = b("bento-typography"), i = b("chevron-up-icon"), n = b("chevron-down-icon"), r = b("base-button");
-  return v(), S(r, {
-    ref: "baseFilterButtonRef",
-    class: ie(["b-base-filter-button", e.conditionalClasses]),
-    disabled: e.disabled,
-    "aria-label": e.computedAriaLabel,
-    "aria-controls": e.ariaAttributes["aria-controls"],
-    type: "button",
-    onClick: e.onClickButton
-  }, ye({
-    default: m(() => [
-      V("div", Wt, [
-        g(o, {
-          el: e.BentoTypographyElement.SPAN,
-          variant: e.BentoTypographyVariant.BODY,
-          stronger: e.bold,
-          class: "b-base-filter-button__label"
+    return (u, C) => (b(), S(X(ze), {
+      ref_key: "filterBarButtonRef",
+      ref: n,
+      class: ue(["b-filter-bar-button", X(c)]),
+      disabled: e.disabled,
+      "aria-label": X(r),
+      "aria-controls": X(d)["aria-controls"],
+      type: "button",
+      onClick: h
+    }, {
+      iconRight: m(() => [
+        e.appliedFiltersCount && !e.hasChevron ? (b(), S(X(be), {
+          key: 0,
+          class: "b-filter-bar-button__counter",
+          el: "span",
+          variant: "body",
+          stronger: ""
         }, {
           default: m(() => [
-            pe(e.$slots, "default", {}, void 0, !0)
+            V(k(e.appliedFiltersCount), 1)
           ]),
-          _: 3
-        }, 8, ["el", "variant", "stronger"]),
-        e.amountAppliedValues && !e.hasChevron ? (v(), U("div", Qt, [
-          g(o, {
-            class: "b-base-filter-button__counter",
-            el: e.BentoTypographyElement.SPAN,
-            variant: e.BentoTypographyVariant.BODY,
-            stronger: ""
+          _: 1
+        })) : q("", !0),
+        e.hasChevron ? (b(), U("div", jt, [
+          e.isFilterOpen ? (b(), S(X(We), {
+            key: 0,
+            "aria-hidden": "true"
+          })) : (b(), S(X(Ze), {
+            key: 1,
+            "aria-hidden": "true"
+          }))
+        ])) : q("", !0)
+      ]),
+      default: m(() => [
+        R("div", Kt, [
+          X(i)("iconLeft") ? ne(u.$slots, "iconLeft", { key: 0 }, void 0, !0) : q("", !0),
+          g(X(be), {
+            el: "span",
+            variant: "body",
+            stronger: "",
+            class: "b-filter-bar-button__label"
           }, {
             default: m(() => [
-              N(L(e.amountAppliedValues), 1)
+              ne(u.$slots, "default", {}, void 0, !0)
             ]),
-            _: 1
-          }, 8, ["el", "variant"])
-        ])) : Q("", !0)
-      ])
-    ]),
-    _: 2
-  }, [
-    e.hasChevron ? {
-      name: "iconRight",
-      fn: m(() => [
-        e.isFilterOpen ? (v(), S(i, {
-          key: 0,
-          "aria-hidden": "true"
-        })) : (v(), S(n, {
-          key: 1,
-          "aria-hidden": "true"
-        }))
+            _: 3
+          })
+        ])
       ]),
-      key: "0"
-    } : void 0
-  ]), 1032, ["class", "disabled", "aria-label", "aria-controls", "onClick"]);
-}
-const xe = /* @__PURE__ */ k(Jt, [["render", Xt], ["__scopeId", "data-v-7c207511"]]), Zt = R({
-  name: "filter-bar-filter-button",
-  components: { BaseFilterButton: xe },
-  props: {
-    /**
-     * Button label to be displayed
-     */
-    label: { type: String, required: !0 },
-    /**
-     * Total count of applied filters
-     */
-    appliedFiltersCount: { type: Number, default: null },
-    /**
-     * Indicates whether the button has a chevron
-     */
-    hasChevron: { type: Boolean, default: !1 },
-    /**
-     * Indicates whether the filter popover tied to this button is showing
-     */
-    isFilterOpen: { type: Boolean, default: !1 },
-    /**
-     * Disables button functionality.
-     */
-    disabled: { type: Boolean, default: !1 }
-  },
-  emits: ["click"],
-  setup(e, { emit: t }) {
-    const a = f(() => ({
-      ["b-filter-bar-filter-button--with-counter"]: e.appliedFiltersCount,
-      ["b-filter-bar-filter-button--filter-open"]: e.isFilterOpen
-    })), l = P(null);
-    return ve(
-      () => e.isFilterOpen,
-      (u, o) => {
-        var i, n;
-        !u && o && (n = (i = l.value) == null ? void 0 : i.baseFilterButtonRef) != null && n.bentoBaseButtonRef && l.value.baseFilterButtonRef.bentoBaseButtonRef.focus();
-      }
-    ), {
-      conditionalClasses: a,
-      // Refs
-      filterBarButtonRef: l,
-      onClick: () => {
-        t("click");
-      }
-    };
+      _: 3
+    }, 8, ["class", "disabled", "aria-label", "aria-controls"]));
   }
 });
-function xt(e, t, a, l, s, u) {
-  const o = b("base-filter-button");
-  return v(), S(o, {
-    ref: "filterBarButtonRef",
-    class: ie(["b-filter-bar-filter-button", e.conditionalClasses]),
-    bold: !0,
-    "amount-applied-values": e.appliedFiltersCount,
-    "has-chevron": e.hasChevron,
-    "is-filter-open": e.isFilterOpen,
-    disabled: e.disabled,
-    onClick: e.onClick
-  }, {
-    default: m(() => [
-      N(L(e.label), 1)
-    ]),
-    _: 1
-  }, 8, ["class", "amount-applied-values", "has-chevron", "is-filter-open", "disabled", "onClick"]);
-}
-const et = /* @__PURE__ */ k(Zt, [["render", xt], ["__scopeId", "data-v-43166ccd"]]);
-var J = /* @__PURE__ */ ((e) => (e.APPLY = "apply", e.CLEAR = "clear", e.OPEN = "open", e.CLOSE = "close", e.RESET = "reset", e))(J || {});
+const Be = /* @__PURE__ */ O(zt, [["__scopeId", "data-v-007ef3aa"]]);
+var W = /* @__PURE__ */ ((e) => (e.APPLY = "apply", e.CLEAR = "clear", e.OPEN = "open", e.CLOSE = "close", e.RESET = "reset", e))(W || {});
 const ke = {
   "en-US": {
     clear: "Clear",
@@ -243,14 +156,14 @@ const ke = {
     clear: "Borrar",
     apply: "Aplicar"
   }
-}, el = R({
+}, Jt = w({
   i18n: { messages: ke },
   name: "bento-base-filter",
   components: {
-    FilterBarFilterButton: et,
-    BentoPopover: Ue
+    BentoPopover: Ue,
+    FilterBarButton: Be
   },
-  directives: { BentoClickOutsideDirective: ht },
+  directives: { BentoClickOutsideDirective: $t },
   props: {
     /**
      * Total count of applied filters
@@ -300,119 +213,125 @@ const ke = {
     fitContent: Ue.props.fitContent
   },
   emits: [
-    J.APPLY,
-    J.CLEAR,
-    J.OPEN,
-    J.CLOSE,
-    J.RESET
+    W.APPLY,
+    W.CLEAR,
+    W.OPEN,
+    W.CLOSE,
+    W.RESET
   ],
   setup(e, { emit: t }) {
-    const { t: a } = le({ messages: ke }), l = ge("base-filter-popover"), s = P(!1), u = P(null), o = f(() => e.defaultValue !== null), i = () => {
-      s.value = !1, t(J.CLOSE);
+    const { t: a } = ae({ messages: ke }), l = $e("base-filter-popover"), s = N(!1), i = N(null), o = f(() => e.defaultValue !== null), r = () => {
+      s.value = !1, t(W.CLOSE);
     }, n = () => {
-      i(), o.value ? t(J.RESET) : t(J.CLEAR);
-    }, r = () => i(), y = () => {
-      s.value ? i() : (s.value = !0, t(J.OPEN));
-    }, B = () => {
-      i(), t(J.APPLY);
-    };
-    return {
+      r(), o.value ? t(W.RESET) : t(W.CLEAR);
+    }, d = () => r(), c = () => {
+      s.value ? r() : (s.value = !0, t(W.OPEN));
+    }, h = () => {
+      r(), t(W.APPLY);
+    }, u = f(() => [
+      {
+        title: a("apply"),
+        event: h,
+        disabled: e.disableApplyButton
+      },
+      {
+        title: o.value ? a("reset") : a("clear"),
+        event: n,
+        disabled: e.disableSecondaryButton
+      }
+    ]);
+    return ve(
+      () => s.value,
+      (C, E) => {
+        var $, B;
+        !C && E && (B = ($ = i.value) == null ? void 0 : $.filterBarButtonRef) != null && B.bentoBaseButtonRef && i.value.filterBarButtonRef.bentoBaseButtonRef.focus();
+      }
+    ), {
       // Values
-      actions: f(() => [
-        {
-          title: a("apply"),
-          event: B,
-          disabled: e.disableApplyButton
-        },
-        {
-          title: o.value ? a("reset") : a("clear"),
-          event: n,
-          disabled: e.disableSecondaryButton
-        }
-      ]),
+      actions: u,
       popoverId: l,
       isFilterOpen: s,
       isPersistentFilter: o,
       // Enums
-      BentoPopoverPositions: Bt,
-      BentoTooltipPosition: gt,
+      BentoTooltipPosition: Bt,
       // Events
-      onClickFilter: y,
-      onClickApply: B,
+      onClickFilter: c,
+      onClickApply: h,
       onClickSecondaryAction: n,
-      onClickOutside: r,
-      closePopover: i,
+      onClickOutside: d,
+      closePopover: r,
       // Refs
-      filterButtonRef: u,
-      // Enums
-      BentoButtonVariant: he,
-      BentoButtonActionsLayout: je
+      filterButtonRef: i
     };
   }
 });
-const tl = { key: 0 };
-function ll(e, t, a, l, s, u) {
-  const o = b("filter-bar-filter-button"), i = b("bento-popover"), n = bt("bento-click-outside-directive");
-  return e.onlySlot ? (v(), U("div", tl, [
-    pe(e.$slots, "default", {}, void 0, !0)
-  ])) : me((v(), U("div", {
+const Gt = { key: 0 };
+function Wt(e, t, a, l, s, i) {
+  const o = y("filter-bar-button"), r = y("bento-popover"), n = _t("bento-click-outside-directive");
+  return e.onlySlot ? (b(), U("div", Gt, [
+    ne(e.$slots, "default", {}, void 0, !0)
+  ])) : _e((b(), U("div", {
     key: 1,
     class: "b-base-filter",
-    onKeydown: t[0] || (t[0] = ae((...r) => e.closePopover && e.closePopover(...r), ["esc"]))
+    onKeydown: t[0] || (t[0] = se((...d) => e.closePopover && e.closePopover(...d), ["esc"]))
   }, [
     g(o, {
       ref: "filterButtonRef",
       "aria-controls": e.isFilterOpen ? e.popoverId : null,
       "has-chevron": e.isPersistentFilter,
       "is-filter-open": e.isFilterOpen,
-      label: e.buttonLabel || e.label,
       "applied-filters-count": e.appliedFiltersCount,
       onClick: e.onClickFilter
-    }, null, 8, ["aria-controls", "has-chevron", "is-filter-open", "label", "applied-filters-count", "onClick"]),
-    e.filterButtonRef ? (v(), S(i, {
+    }, {
+      default: m(() => [
+        V(k(e.buttonLabel || e.label), 1)
+      ]),
+      _: 1
+    }, 8, ["aria-controls", "has-chevron", "is-filter-open", "applied-filters-count", "onClick"]),
+    e.filterButtonRef ? (b(), S(r, {
       key: 0,
       id: e.popoverId,
       class: "b-base-filter__popover",
       divider: "",
       open: e.isFilterOpen,
       actions: e.controlled ? null : e.actions,
-      "actions-layout": e.BentoButtonActionsLayout.SPACE_BETWEEN,
+      "actions-layout": "space-between",
       "target-element": e.filterButtonRef,
       title: e.controlled ? null : e.label,
       "fit-content": e.fitContent,
-      position: e.BentoPopoverPositions.BOTTOM_START,
+      position: "bottom-start",
       "without-space": e.controlled
     }, {
       default: m(() => [
-        pe(e.$slots, "default", {}, void 0, !0)
+        ne(e.$slots, "default", {}, void 0, !0)
       ]),
       _: 3
-    }, 8, ["id", "open", "actions", "actions-layout", "target-element", "title", "fit-content", "position", "without-space"])) : Q("", !0)
+    }, 8, ["id", "open", "actions", "target-element", "title", "fit-content", "without-space"])) : q("", !0)
   ], 32)), [
     [n, e.onClickOutside]
   ]);
 }
-const re = /* @__PURE__ */ k(el, [["render", ll], ["__scopeId", "data-v-074dc65c"]]), nl = (e) => e instanceof Array, Oe = (e) => nl(e) ? e.length === 0 || e.every((t) => t === "") : !e, Ve = (e, t) => JSON.stringify(e) === JSON.stringify(t), ue = (e, t) => {
-  const a = P(e.value);
+const de = /* @__PURE__ */ O(Jt, [["render", Wt], ["__scopeId", "data-v-005aa7bf"]]), Zt = (e) => e instanceof Array, Re = (e) => Zt(e) ? e.length === 0 || e.every((t) => t === "") : !e, Oe = (e, t) => JSON.stringify(e) === JSON.stringify(t), ce = (e, t) => {
+  const a = N(e.value);
   ve(
     () => e.value,
     () => {
       a.value = e.value;
     }
   );
-  const l = f(() => Oe(e.value)), s = f(
-    () => t.value !== null ? Ve(t.value, e.value) : l.value
-  ), u = f(() => Ve(a.value, e.value) || Oe(a.value) && l.value);
+  const l = f(() => Re(e.value)), s = f(
+    () => t.value !== null ? Oe(t.value, e.value) : l.value
+  ), i = f(() => Oe(a.value, e.value) || Re(a.value) && l.value);
   return {
     internalFilterValue: a,
     isSecondaryButtonDisabled: s,
-    isApplyButtonDisabled: u
+    isApplyButtonDisabled: i
   };
-}, ce = (e, t) => (e == null ? void 0 : e.length) > t ? `${e.slice(0, t)}...` : e, al = R({
+}, fe = (e, t) => (e == null ? void 0 : e.length) > t ? `${e.slice(0, t)}...` : e, Qt = w({
   name: "bento-input-filter",
   components: {
-    BentoBaseFilter: re,
-    BentoInputField: ze
+    BentoBaseFilter: de,
+    BentoInputField: Qe
   },
   props: {
     /**
@@ -438,48 +357,54 @@ const re = /* @__PURE__ */ k(el, [["render", ll], ["__scopeId", "data-v-074dc65c
      */
     onlySlot: { type: Boolean, default: !1 }
   },
-  emits: [c.INPUT, c.UPDATE],
+  emits: [v.INPUT, v.UPDATE],
   setup(e, { emit: t }) {
-    const a = P(null), { internalFilterValue: l, isSecondaryButtonDisabled: s, isApplyButtonDisabled: u } = ue(
-      M(e, "value"),
-      M(e, "defaultValue")
-    ), o = f(() => e.defaultValue === null ? e.label : ce(e.value, 18)), i = f(() => e.value != null ? 1 : null), n = f(() => ({
+    const a = N(null), { internalFilterValue: l, isSecondaryButtonDisabled: s, isApplyButtonDisabled: i } = ce(
+      L(e, "value"),
+      L(e, "defaultValue")
+    ), o = f(() => e.defaultValue === null ? e.label : fe(e.value, 18)), r = f(() => e.value != null ? 1 : null), n = f(() => ({
       ["b-input-filter--only-slot"]: e.onlySlot
     }));
-    Be(() => {
+    ge(() => {
       l.value === "" && (l.value = null);
+    }), ve(a, () => {
+      var $;
+      ($ = a.value) == null || $.focusInput();
     });
-    const r = () => {
-      l.value = e.value, Ye(() => a.value.focusInput());
-    }, y = () => {
-      !l.value && e.defaultValue !== null && (l.value = e.defaultValue), t(c.UPDATE, { ...e, value: l.value });
+    const d = () => {
+      l.value = e.value;
+    }, c = () => {
+      !l.value && e.defaultValue !== null && (l.value = e.defaultValue), t(v.UPDATE, { ...e, value: l.value });
     };
     return {
       // Values
-      appliedFiltersCount: i,
+      appliedFiltersCount: r,
       buttonLabel: o,
       conditionalClasses: n,
       internalFilterValue: l,
-      isApplyButtonDisabled: u,
+      isApplyButtonDisabled: i,
       isSecondaryButtonDisabled: s,
       // Refs
       inputTextRef: a,
       // Events
-      updateFilter: y,
+      updateFilter: c,
       clearFilter: () => {
-        l.value = null, y();
+        l.value = null, c();
       },
-      openFilter: r,
-      resetFilter: () => t(c.UPDATE, { ...e, value: e.defaultValue }),
+      openFilter: d,
+      resetFilter: () => t(v.UPDATE, { ...e, value: e.defaultValue }),
       onInput: () => {
-        t(c.INPUT, { ...e, value: l.value });
+        t(v.INPUT, { ...e, value: l.value });
+      },
+      setInternalFilterValue: ($) => {
+        l.value = $;
       }
     };
   }
 });
-function ol(e, t, a, l, s, u) {
-  const o = b("bento-input-field"), i = b("bento-base-filter");
-  return v(), S(i, ee(e.$props, {
+function Xt(e, t, a, l, s, i) {
+  const o = y("bento-input-field"), r = y("bento-base-filter");
+  return b(), S(r, x(e.$props, {
     "applied-filters-count": e.appliedFiltersCount,
     "disable-apply-button": e.isApplyButtonDisabled,
     "disable-secondary-button": e.isSecondaryButtonDisabled,
@@ -491,28 +416,28 @@ function ol(e, t, a, l, s, u) {
     onReset: e.resetFilter
   }), {
     default: m(() => [
-      V("div", {
-        class: ie(["b-input-filter", e.conditionalClasses]),
-        onKeydown: t[1] || (t[1] = ae((...n) => e.updateFilter && e.updateFilter(...n), ["enter"])),
-        onInput: t[2] || (t[2] = (...n) => e.onInput && e.onInput(...n))
+      R("div", {
+        class: ue(["b-input-filter", e.conditionalClasses]),
+        onKeydown: t[0] || (t[0] = se((...n) => e.updateFilter && e.updateFilter(...n), ["enter"])),
+        onInput: t[1] || (t[1] = (...n) => e.onInput && e.onInput(...n))
       }, [
         g(o, {
           ref: "inputTextRef",
           value: e.internalFilterValue,
-          onInput: t[0] || (t[0] = (n) => e.internalFilterValue = n)
-        }, null, 8, ["value"])
+          onInput: e.setInternalFilterValue
+        }, null, 8, ["value", "onInput"])
       ], 34)
     ]),
     _: 1
   }, 16, ["applied-filters-count", "disable-apply-button", "disable-secondary-button", "button-label", "only-slot", "onApply", "onClear", "onOpen", "onReset"]);
 }
-const tt = /* @__PURE__ */ k(al, [["render", ol], ["__scopeId", "data-v-95a33d93"]]), sl = R({
+const nt = /* @__PURE__ */ O(Qt, [["render", Xt], ["__scopeId", "data-v-7aa995e2"]]), xt = w({
   name: "bento-date-filter",
   components: {
-    BentoBaseFilter: re,
-    BentoDatePicker: Mt,
-    BentoDivider: Je,
-    Calendar: wt
+    BentoBaseFilter: de,
+    BentoDatePicker: kt,
+    BentoDivider: xe,
+    Calendar: Rt
   },
   props: {
     isDateInput: { type: Boolean, default: !0 },
@@ -549,49 +474,49 @@ const tt = /* @__PURE__ */ k(al, [["render", ol], ["__scopeId", "data-v-95a33d93
      */
     value: { type: Date, default: void 0 }
   },
-  emits: [c.INPUT, c.UPDATE],
+  emits: [v.INPUT, v.UPDATE],
   setup(e, { emit: t }) {
-    const { locale: a } = le(void 0, !0), l = { de: We, enUS: te, fr: Qe }, { internalFilterValue: s, isSecondaryButtonDisabled: u, isApplyButtonDisabled: o } = ue(
-      M(e, "value"),
-      M(e, "defaultValue")
-    ), i = f(
-      () => e.defaultValue === null ? e.label : de(e.value, "dd MMM, yyyy", {
-        locale: l[a.value.substring(0, 2)] || te
+    const { locale: a } = ae(void 0, !0), l = { de: et, enUS: le, fr: tt }, { internalFilterValue: s, isSecondaryButtonDisabled: i, isApplyButtonDisabled: o } = ce(
+      L(e, "value"),
+      L(e, "defaultValue")
+    ), r = f(
+      () => e.defaultValue === null ? e.label : pe(e.value, "dd MMM, yyyy", {
+        locale: l[a.value.substring(0, 2)] || le
       })
-    ), n = f(() => e.value != null ? 1 : null), r = () => {
-      t(c.UPDATE, { ...e, value: s.value });
-    }, y = () => {
-      s.value = null, r();
-    }, B = () => {
-      s.value = e.defaultValue, r();
-    }, d = () => {
+    ), n = f(() => e.value != null ? 1 : null), d = () => {
+      t(v.UPDATE, { ...e, value: s.value });
+    }, c = () => {
+      s.value = null, d();
+    }, h = () => {
+      s.value = e.defaultValue, d();
+    }, u = () => {
       s.value = e.value;
-    }, h = (A) => {
-      s.value = A, t(c.INPUT, { ...e, value: s.value });
+    }, C = ($) => {
+      s.value = $, t(v.INPUT, { ...e, value: s.value });
     };
     return {
       // Values
       appliedFiltersCount: n,
       internalFilterValue: s,
       isApplyButtonDisabled: o,
-      isSecondaryButtonDisabled: u,
-      buttonLabel: i,
+      isSecondaryButtonDisabled: i,
+      buttonLabel: r,
       // Events
-      clearFilter: y,
-      onDateSelected: h,
-      openFilter: d,
-      updateFilter: r,
-      resetFilter: B,
-      onDateInputSelected: (A) => {
-        s.value = A, h(A), r();
+      clearFilter: c,
+      onDateSelected: C,
+      openFilter: u,
+      updateFilter: d,
+      resetFilter: h,
+      onDateInputSelected: ($) => {
+        s.value = $, C($), d();
       }
     };
   }
 });
-const il = { class: "b-date-filter" };
-function rl(e, t, a, l, s, u) {
-  const o = b("bento-date-picker"), i = b("bento-divider"), n = b("calendar"), r = b("bento-base-filter");
-  return v(), S(r, {
+const el = { class: "b-date-filter" };
+function tl(e, t, a, l, s, i) {
+  const o = y("bento-date-picker"), r = y("bento-divider"), n = y("calendar"), d = y("bento-base-filter");
+  return b(), S(d, {
     label: e.label,
     field: e.field,
     "applied-filters-count": e.appliedFiltersCount,
@@ -607,20 +532,20 @@ function rl(e, t, a, l, s, u) {
     onReset: e.resetFilter
   }, {
     default: m(() => {
-      var y, B, d, h;
+      var c, h, u, C;
       return [
-        e.onlySlot ? (v(), S(o, {
+        e.onlySlot ? (b(), S(o, {
           key: 0,
           value: e.internalFilterValue,
-          "first-day-of-week": (y = e.options) == null ? void 0 : y.firstDayOfWeek,
-          "is-date-disabled": (B = e.options) == null ? void 0 : B.isDateDisabled,
+          "first-day-of-week": (c = e.options) == null ? void 0 : c.firstDayOfWeek,
+          "is-date-disabled": (h = e.options) == null ? void 0 : h.isDateDisabled,
           onInput: e.onDateInputSelected
-        }, null, 8, ["value", "first-day-of-week", "is-date-disabled", "onInput"])) : (v(), U(oe, { key: 1 }, [
-          g(i, { class: "b-date-filter__divider" }),
-          V("div", il, [
+        }, null, 8, ["value", "first-day-of-week", "is-date-disabled", "onInput"])) : (b(), U(ie, { key: 1 }, [
+          g(r, { class: "b-date-filter__divider" }),
+          R("div", el, [
             g(n, {
-              "first-day-of-week": (d = e.options) == null ? void 0 : d.firstDayOfWeek,
-              "is-date-disabled": (h = e.options) == null ? void 0 : h.isDateDisabled,
+              "first-day-of-week": (u = e.options) == null ? void 0 : u.firstDayOfWeek,
+              "is-date-disabled": (C = e.options) == null ? void 0 : C.isDateDisabled,
               "number-of-months": 1,
               value: e.internalFilterValue,
               onInput: e.onDateSelected
@@ -632,7 +557,7 @@ function rl(e, t, a, l, s, u) {
     _: 1
   }, 8, ["label", "field", "applied-filters-count", "disable-apply-button", "disable-secondary-button", "button-label", "default-value", "only-slot", "onApply", "onClear", "onOpen", "onReset"]);
 }
-const lt = /* @__PURE__ */ k(sl, [["render", rl], ["__scopeId", "data-v-7e21017e"]]), Ne = {
+const at = /* @__PURE__ */ O(xt, [["render", tl], ["__scopeId", "data-v-7e21017e"]]), Ve = {
   "en-US": {
     clear: "Clear",
     reset: "Reset",
@@ -658,16 +583,16 @@ const lt = /* @__PURE__ */ k(sl, [["render", rl], ["__scopeId", "data-v-7e21017e
     clear: "Borrar",
     apply: "Aplicar"
   }
-}, ul = R({
-  i18n: { messages: Ne },
+}, ll = w({
+  i18n: { messages: Ve },
   name: "bento-date-range-filter",
   components: {
-    BentoBaseFilter: re,
-    BentoButtonActions: Et,
-    BentoDateRangePicker: qt,
-    BentoTypography: Ce,
-    BentoDivider: Je,
-    DateRangePickerCalendar: Yt
+    BentoBaseFilter: de,
+    BentoButtonActions: Nt,
+    BentoDateRangePicker: Ot,
+    BentoTypography: be,
+    BentoDivider: xe,
+    DateRangePickerCalendar: Vt
   },
   props: {
     /**
@@ -709,96 +634,92 @@ const lt = /* @__PURE__ */ k(sl, [["render", rl], ["__scopeId", "data-v-7e21017e
       default: () => ({ startDate: void 0, endDate: void 0 })
     }
   },
-  emits: [c.INPUT, c.UPDATE],
+  emits: [v.INPUT, v.UPDATE],
   setup(e, { emit: t }) {
-    var Y, z, W, G;
-    const { locale: a, t: l } = le({ messages: Ne }), s = { de: We, enUS: te, fr: Qe }, { internalFilterValue: u, isSecondaryButtonDisabled: o, isApplyButtonDisabled: i } = ue(
-      M(e, "value"),
-      M(e, "defaultValue")
-    ), n = (T) => T ? de(T, Re.NUMERIC_DATE_YEAR_FIRST, {
-      locale: s[a.value.substring(0, 2)] || te
-    }) : void 0, r = (T) => T ? de(T, Re.HOUR_MINUTE_SECONDS, {
-      locale: s[a.value.substring(0, 2)] || te
-    }) : "", y = P(null), B = P(!1), d = Ke({
-      startDate: n((Y = e.value) == null ? void 0 : Y.startDate),
-      endDate: n((z = e.value) == null ? void 0 : z.endDate),
-      startTime: r((W = e.value) == null ? void 0 : W.startDate),
-      endTime: r((G = e.value) == null ? void 0 : G.endDate)
-    }), h = f(
+    var K, J, Z, G;
+    const { locale: a, t: l } = ae({ messages: Ve }), s = { de: et, enUS: le, fr: tt }, { internalFilterValue: i, isSecondaryButtonDisabled: o, isApplyButtonDisabled: r } = ce(
+      L(e, "value"),
+      L(e, "defaultValue")
+    ), n = (A) => A ? pe(A, Pe.NUMERIC_DATE_YEAR_FIRST, {
+      locale: s[a.value.substring(0, 2)] || le
+    }) : void 0, d = (A) => A ? pe(A, Pe.HOUR_MINUTE_SECONDS, {
+      locale: s[a.value.substring(0, 2)] || le
+    }) : "", c = N(null), h = N(!1), u = He({
+      startDate: n((K = e.value) == null ? void 0 : K.startDate),
+      endDate: n((J = e.value) == null ? void 0 : J.endDate),
+      startTime: d((Z = e.value) == null ? void 0 : Z.startDate),
+      endTime: d((G = e.value) == null ? void 0 : G.endDate)
+    }), C = f(
       () => {
-        var T, Z;
-        return ((T = e.value) == null ? void 0 : T.startDate) != null && ((Z = e.value) == null ? void 0 : Z.endDate) != null ? 1 : null;
+        var A, ee;
+        return ((A = e.value) == null ? void 0 : A.startDate) != null && ((ee = e.value) == null ? void 0 : ee.endDate) != null ? 1 : null;
       }
-    ), O = f(
-      () => e.defaultValue === null ? e.label : `${de(e.value.startDate, "dd MMM, yyyy", {
-        locale: s[a.value.substring(0, 2)] || te
-      })} - ${de(e.value.endDate, "dd MMM, yyyy", {
-        locale: s[a.value.substring(0, 2)] || te
+    ), E = f(
+      () => e.defaultValue === null ? e.label : `${pe(e.value.startDate, "dd MMM, yyyy", {
+        locale: s[a.value.substring(0, 2)] || le
+      })} - ${pe(e.value.endDate, "dd MMM, yyyy", {
+        locale: s[a.value.substring(0, 2)] || le
       })}`
-    ), A = () => {
-      y.value.closePopover();
-      const { onlySlot: T, ...Z } = e;
-      t(c.UPDATE, { ...Z, value: u.value });
-    }, C = () => {
-      u.value = void 0, A();
-    }, q = () => {
-      u.value = e.defaultValue, A();
-    }, F = () => {
-      u.value = e.value;
-    }, _ = (T) => {
-      u.value = T, d.startDate = n(T.startDate), d.endDate = n(T.endDate), t(c.INPUT, { ...e, value: u.value });
-    }, I = (T) => {
-      _(T), t(c.INPUT, { ...e, value: u.value });
-    }, E = f(
+    ), $ = () => {
+      c.value.closePopover();
+      const { onlySlot: A, ...ee } = e;
+      t(v.UPDATE, { ...ee, value: i.value });
+    }, B = () => {
+      i.value = void 0, $();
+    }, H = () => {
+      i.value = e.defaultValue, $();
+    }, _ = () => {
+      i.value = e.value;
+    }, F = (A) => {
+      i.value = A, u.startDate = n(A.startDate), u.endDate = n(A.endDate), t(v.INPUT, { ...e, value: i.value });
+    }, D = (A) => {
+      F(A), t(v.INPUT, { ...e, value: i.value });
+    }, P = f(
       () => [
         {
           title: l("apply"),
-          event: A,
-          disabled: B.value || i.value
+          event: $,
+          disabled: h.value || r.value
         },
         {
           title: e.defaultValue ? l("reset") : l("clear"),
-          event: e.defaultValue ? q : C,
-          disabled: B.value && o.value
+          event: e.defaultValue ? H : B,
+          disabled: h.value && o.value
         }
       ]
     );
     return {
       // Refs
-      baseFilter: y,
+      baseFilter: c,
       // Values
-      actions: E,
-      appliedFiltersCount: h,
-      formData: d,
-      internalFilterValue: u,
-      isApplyButtonDisabled: i,
+      actions: P,
+      appliedFiltersCount: C,
+      formData: u,
+      internalFilterValue: i,
+      isApplyButtonDisabled: r,
       isSecondaryButtonDisabled: o,
-      buttonLabel: O,
-      // Enum
-      BentoButtonActionsLayout: je,
-      BentoTypographyElement: Se,
-      BentoTypographyVariant: Ae,
+      buttonLabel: E,
       // Events
-      onDateSelected: _,
-      openFilter: F,
-      updateFilter: A,
+      onDateSelected: F,
+      openFilter: _,
+      updateFilter: $,
       onDatePickerRangeError: () => {
-        B.value = !0, u.value = { startDate: void 0, endDate: void 0 }, t(c.INPUT, { ...e, value: u.value });
+        h.value = !0, i.value = { startDate: void 0, endDate: void 0 }, t(v.INPUT, { ...e, value: i.value });
       },
-      onDatePickerRangeFormDateInputUpdate: (T) => {
-        B.value = !1, T.startTime && (d.startTime = T.startTime), T.endTime && (d.endTime = T.endTime);
+      onDatePickerRangeFormDateInputUpdate: (A) => {
+        h.value = !1, A.startTime && (u.startTime = A.startTime), A.endTime && (u.endTime = A.endTime);
       },
-      onDateInputSelected: I
+      onDateInputSelected: D
     };
   }
 });
-const dl = {
+const nl = {
   key: 1,
   class: "b-date-range-filter"
 };
-function pl(e, t, a, l, s, u) {
-  const o = b("bento-date-range-picker"), i = b("bento-typography"), n = b("bento-divider"), r = b("bento-button-actions"), y = b("date-range-picker-calendar"), B = b("bento-base-filter");
-  return v(), S(B, {
+function al(e, t, a, l, s, i) {
+  const o = y("bento-date-range-picker"), r = y("bento-typography"), n = y("bento-divider"), d = y("bento-button-actions"), c = y("date-range-picker-calendar"), h = y("bento-base-filter");
+  return b(), S(h, {
     ref: "baseFilter",
     label: e.label,
     field: e.field,
@@ -813,24 +734,24 @@ function pl(e, t, a, l, s, u) {
     onOpen: e.openFilter
   }, {
     default: m(() => {
-      var d, h, O, A, C, q, F, _, I, E;
+      var u, C, E, $, B, H, _, F, D, P;
       return [
-        e.onlySlot ? (v(), S(o, {
+        e.onlySlot ? (b(), S(o, {
           key: 0,
-          "allow-time-input": (d = e.options) == null ? void 0 : d.allowTimeInput,
+          "allow-time-input": (u = e.options) == null ? void 0 : u.allowTimeInput,
           value: e.internalFilterValue,
-          "custom-range": (h = e.options) == null ? void 0 : h.quickSelectRanges,
-          "first-day-of-week": (O = e.options) == null ? void 0 : O.firstDayOfWeek,
-          "is-date-disabled": (A = e.options) == null ? void 0 : A.isDateDisabled,
-          "number-of-months": (C = e.options) == null ? void 0 : C.numberOfMonths,
+          "custom-range": (C = e.options) == null ? void 0 : C.quickSelectRanges,
+          "first-day-of-week": (E = e.options) == null ? void 0 : E.firstDayOfWeek,
+          "is-date-disabled": ($ = e.options) == null ? void 0 : $.isDateDisabled,
+          "number-of-months": (B = e.options) == null ? void 0 : B.numberOfMonths,
           onInput: e.onDateInputSelected
-        }, null, 8, ["allow-time-input", "value", "custom-range", "first-day-of-week", "is-date-disabled", "number-of-months", "onInput"])) : (v(), U("div", dl, [
-          g(y, {
-            "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": (_ = e.options) == null ? void 0 : _.isDateDisabled,
-            "max-range": (I = e.options) == null ? void 0 : I.maxRange,
-            "number-of-months": (E = e.options) == null ? void 0 : E.numberOfMonths,
+        }, null, 8, ["allow-time-input", "value", "custom-range", "first-day-of-week", "is-date-disabled", "number-of-months", "onInput"])) : (b(), U("div", nl, [
+          g(c, {
+            "allow-time-input": (H = e.options) == null ? void 0 : H.allowTimeInput,
+            "first-day-of-week": (_ = e.options) == null ? void 0 : _.firstDayOfWeek,
+            "is-date-disabled": (F = e.options) == null ? void 0 : F.isDateDisabled,
+            "max-range": (D = e.options) == null ? void 0 : D.maxRange,
+            "number-of-months": (P = e.options) == null ? void 0 : P.numberOfMonths,
             value: e.internalFilterValue,
             "date-form-data": e.formData,
             onInput: e.onDateSelected,
@@ -838,24 +759,24 @@ function pl(e, t, a, l, s, u) {
             onFormDate: e.onDatePickerRangeFormDateInputUpdate
           }, {
             title: m(() => [
-              g(i, {
+              g(r, {
                 strongest: "",
-                variant: e.BentoTypographyVariant.BODY,
-                el: e.BentoTypographyElement.SPAN
+                variant: "body",
+                el: "span"
               }, {
                 default: m(() => [
-                  N(L(e.label), 1)
+                  V(k(e.label), 1)
                 ]),
                 _: 1
-              }, 8, ["variant", "el"])
+              })
             ]),
             actions: m(() => [
               g(n, { class: "b-date-range-filter__divider" }),
-              g(r, {
+              g(d, {
                 class: "b-date-range-filter__actions",
                 actions: e.actions,
-                layout: e.BentoButtonActionsLayout.SPACE_BETWEEN
-              }, null, 8, ["actions", "layout"])
+                layout: "space-between"
+              }, null, 8, ["actions"])
             ]),
             _: 1
           }, 8, ["allow-time-input", "first-day-of-week", "is-date-disabled", "max-range", "number-of-months", "value", "date-form-data", "onInput", "onError", "onFormDate"])
@@ -865,20 +786,20 @@ function pl(e, t, a, l, s, u) {
     _: 1
   }, 8, ["label", "field", "applied-filters-count", "disable-apply-button", "disable-secondary-button", "button-label", "default-value", "controlled", "only-slot", "onOpen"]);
 }
-const nt = /* @__PURE__ */ k(ul, [["render", pl], ["__scopeId", "data-v-5fed922f"]]), Le = {
+const ot = /* @__PURE__ */ O(ll, [["render", al], ["__scopeId", "data-v-f5a4a5ad"]]), Ne = {
   "en-US": {
     noFiltersMatchThisSearch: "No filters match this search",
     search: "Search",
     searchFilter: "Search {filter}"
   }
-}, cl = R({
-  i18n: { messages: Le },
+}, ol = w({
+  i18n: { messages: Ne },
   name: "bento-select-filter",
   components: {
-    BentoBaseFilter: re,
-    BentoDropdown: Nt,
-    BentoListbox: Kt,
-    BentoSearchBar: be
+    BentoBaseFilter: de,
+    BentoDropdown: Et,
+    BentoListbox: wt,
+    BentoSearchBar: me
   },
   props: {
     /**
@@ -917,81 +838,81 @@ const nt = /* @__PURE__ */ k(ul, [["render", pl], ["__scopeId", "data-v-5fed922f
       default: void 0
     }
   },
-  emits: [c.INPUT, c.UPDATE],
+  emits: [v.INPUT, v.UPDATE],
   setup(e, { emit: t, slots: a }) {
-    var w, K;
-    const { internalFilterValue: l, isSecondaryButtonDisabled: s, isApplyButtonDisabled: u } = ue(
-      M(e, "value"),
-      M(e, "defaultValue")
-    ), { t: o, locale: i } = le({ messages: Le }), n = P(""), r = M(e, "options"), y = P(e.options.listboxItems);
-    ve(r, () => {
-      y.value = r.value.listboxItems;
+    var M, j;
+    const { internalFilterValue: l, isSecondaryButtonDisabled: s, isApplyButtonDisabled: i } = ce(
+      L(e, "value"),
+      L(e, "defaultValue")
+    ), { t: o, locale: r } = ae({ messages: Ne }), n = N(""), d = L(e, "options"), c = N(e.options.listboxItems);
+    ve(d, () => {
+      c.value = d.value.listboxItems;
     });
-    const B = Ge(
+    const h = Xe(
       n,
-      y,
-      (K = (w = e.options) == null ? void 0 : w.search) == null ? void 0 : K.searchEvent
-    ), d = f(() => o("noFiltersMatchThisSearch")), h = f(() => {
-      var Y, z, W;
+      c,
+      (j = (M = e.options) == null ? void 0 : M.search) == null ? void 0 : j.searchEvent
+    ), u = f(() => o("noFiltersMatchThisSearch")), C = f(() => {
+      var K, J, Z;
       if (e.defaultValue === null)
         return e.label;
       if (e.options.multiple) {
         const G = e.value.length;
         if (G === e.options.listboxItems.length)
-          return (Y = e == null ? void 0 : e.options) == null ? void 0 : Y.messages[i.value].persistentButtonLabelAllSelected;
-        const T = (z = e == null ? void 0 : e.options) == null ? void 0 : z.messages[i.value].persistentButtonLabelPartiallySelected.split("|").map((Z) => Z.trim());
-        return G === 1 ? T[0].replace("{count}", G) : T[1].replace("{count}", G);
+          return (K = e == null ? void 0 : e.options) == null ? void 0 : K.messages[r.value].persistentButtonLabelAllSelected;
+        const A = (J = e == null ? void 0 : e.options) == null ? void 0 : J.messages[r.value].persistentButtonLabelPartiallySelected.split("|").map((ee) => ee.trim());
+        return G === 1 ? A[0].replace("{count}", G) : A[1].replace("{count}", G);
       }
-      return ce((W = e.options.listboxItems.find(({ value: G }) => G === e.value)) == null ? void 0 : W.label, 18);
-    }), O = f(() => ge(`filter-listbox-${e.field}`)), A = (Y) => {
-      l.value = Y;
-      const { onlySlot: z, ...W } = e;
-      t(c.INPUT, { ...W, value: l.value });
-    }, C = () => {
+      return fe((Z = e.options.listboxItems.find(({ value: G }) => G === e.value)) == null ? void 0 : Z.label, 18);
+    }), E = f(() => $e(`filter-listbox-${e.field}`)), $ = (K) => {
+      l.value = K;
+      const { onlySlot: J, ...Z } = e;
+      t(v.INPUT, { ...Z, value: l.value });
+    }, B = () => {
       e.options.multiple && l.value && l.value.length === 0 && (l.value = e.defaultValue !== null ? e.defaultValue : void 0);
-      const { onlySlot: Y, ...z } = e;
-      t(c.UPDATE, { ...z, value: l.value });
-    }, q = () => {
+      const { onlySlot: K, ...J } = e;
+      t(v.UPDATE, { ...J, value: l.value });
+    }, H = () => {
       l.value = e.value;
-    }, F = () => {
-      n.value && (n.value = "");
     }, _ = () => {
-      l.value = e.defaultValue, C();
-    }, I = () => {
-      l.value = null, C();
+      n.value && (n.value = "");
+    }, F = () => {
+      l.value = e.defaultValue, B();
+    }, D = () => {
+      l.value = null, B();
     };
     return {
       // Values
       appliedFiltersCount: f(() => {
         if (e.value == null)
           return null;
-        const Y = 1;
-        return e.options.multiple ? e.value.length : Y;
+        const K = 1;
+        return e.options.multiple ? e.value.length : K;
       }),
-      filteredItems: B,
+      filteredItems: h,
       internalFilterValue: l,
-      isApplyButtonDisabled: u,
+      isApplyButtonDisabled: i,
       isSecondaryButtonDisabled: s,
-      listboxFilterId: O,
-      noResultsMessage: d,
+      listboxFilterId: E,
+      noResultsMessage: u,
       slots: a,
-      buttonLabel: h,
+      buttonLabel: C,
       // Search
       searchTerm: n,
       // Events
-      clearFilter: I,
-      closeFilter: F,
-      onOptionSelected: A,
-      openFilter: q,
-      updateFilter: C,
-      resetFilter: _
+      clearFilter: D,
+      closeFilter: _,
+      onOptionSelected: $,
+      openFilter: H,
+      updateFilter: B,
+      resetFilter: F
     };
   }
 });
-const fl = (e) => (vt("data-v-0ca076e6"), e = e(), yt(), e), bl = { class: "b-select-filter__search-bar" }, vl = /* @__PURE__ */ fl(() => /* @__PURE__ */ V("hr", { class: "b-select-filter__divider" }, null, -1));
-function yl(e, t, a, l, s, u) {
-  const o = b("bento-dropdown"), i = b("bento-search-bar"), n = b("bento-listbox"), r = b("bento-base-filter");
-  return v(), S(r, {
+const sl = (e) => (Ke("data-v-0ca076e6"), e = e(), je(), e), il = { class: "b-select-filter__search-bar" }, rl = /* @__PURE__ */ sl(() => /* @__PURE__ */ R("hr", { class: "b-select-filter__divider" }, null, -1));
+function ul(e, t, a, l, s, i) {
+  const o = y("bento-dropdown"), r = y("bento-search-bar"), n = y("bento-listbox"), d = y("bento-base-filter");
+  return b(), S(d, {
     label: e.label,
     field: e.field,
     "applied-filters-count": e.appliedFiltersCount,
@@ -1007,59 +928,59 @@ function yl(e, t, a, l, s, u) {
     onClose: e.closeFilter
   }, {
     default: m(() => {
-      var y, B, d, h, O, A, C, q, F, _, I;
+      var c, h, u, C, E, $, B, H, _, F, D;
       return [
-        e.onlySlot ? (v(), S(o, {
+        e.onlySlot ? (b(), S(o, {
           key: 0,
           value: e.internalFilterValue,
           class: "b-select-filter__dropdown-variant",
           items: e.options.listboxItems,
-          multiple: (y = e.options) == null ? void 0 : y.multiple,
+          multiple: (c = e.options) == null ? void 0 : c.multiple,
           "no-results-message": e.noResultsMessage,
           searching: !!e.searchTerm,
           "is-option-disabled": e.options.isOptionDisabled,
           "dynamic-filtering": !0,
           onInput: e.onOptionSelected
-        }, ye({ _: 2 }, [
-          se(e.slots, (E, w) => ({
-            name: w,
-            fn: m((K) => [
-              pe(e.$slots, w, Ie(De(K)), void 0, !0)
+        }, Fe({ _: 2 }, [
+          re(e.slots, (P, M) => ({
+            name: M,
+            fn: m((j) => [
+              ne(e.$slots, M, Ie(De(j)), void 0, !0)
             ])
           }))
-        ]), 1032, ["value", "items", "multiple", "no-results-message", "searching", "is-option-disabled", "onInput"])) : (v(), U(oe, { key: 1 }, [
-          V("div", bl, [
-            g(i, {
-              "debounce-time": (d = (B = e.options) == null ? void 0 : B.search) == null ? void 0 : d.debounceTime,
+        ]), 1032, ["value", "items", "multiple", "no-results-message", "searching", "is-option-disabled", "onInput"])) : (b(), U(ie, { key: 1 }, [
+          R("div", il, [
+            g(r, {
+              "debounce-time": (u = (h = e.options) == null ? void 0 : h.search) == null ? void 0 : u.debounceTime,
               value: e.searchTerm,
               "input-field-aria-label": e.$t("searchFilter", { filter: e.label.toLocaleLowerCase() }).toString(),
-              onInput: t[0] || (t[0] = (E) => e.searchTerm = E)
+              onInput: t[0] || (t[0] = (P) => e.searchTerm = P)
             }, null, 8, ["debounce-time", "value", "input-field-aria-label"])
           ]),
-          vl,
+          rl,
           g(n, {
             id: e.listboxFilterId,
             "aria-label": e.label,
             class: "b-select-filter__wrapper",
-            "has-more-items": (O = (h = e.options) == null ? void 0 : h.lazy) == null ? void 0 : O.hasMoreItems,
+            "has-more-items": (E = (C = e.options) == null ? void 0 : C.lazy) == null ? void 0 : E.hasMoreItems,
             items: e.filteredItems,
-            "is-option-disabled": (A = e.options) == null ? void 0 : A.isOptionDisabled,
-            "lazy-load-type": (q = (C = e.options) == null ? void 0 : C.lazy) == null ? void 0 : q.lazyLoadType,
-            loading: (_ = (F = e.options) == null ? void 0 : F.lazy) == null ? void 0 : _.loading,
-            multiple: (I = e.options) == null ? void 0 : I.multiple,
+            "is-option-disabled": ($ = e.options) == null ? void 0 : $.isOptionDisabled,
+            "lazy-load-type": (H = (B = e.options) == null ? void 0 : B.lazy) == null ? void 0 : H.lazyLoadType,
+            loading: (F = (_ = e.options) == null ? void 0 : _.lazy) == null ? void 0 : F.loading,
+            multiple: (D = e.options) == null ? void 0 : D.multiple,
             "no-results-message": e.noResultsMessage,
             searching: !!e.searchTerm,
             "selected-value": e.internalFilterValue,
             onSelect: e.onOptionSelected,
-            onShowMore: t[1] || (t[1] = (E) => {
-              var w, K;
-              return (K = (w = e.options) == null ? void 0 : w.lazy) == null ? void 0 : K.showMoreEvent();
+            onShowMore: t[1] || (t[1] = (P) => {
+              var M, j;
+              return (j = (M = e.options) == null ? void 0 : M.lazy) == null ? void 0 : j.showMoreEvent();
             })
-          }, ye({ _: 2 }, [
-            se(e.slots, (E, w) => ({
-              name: w,
-              fn: m((K) => [
-                pe(e.$slots, w, Ie(De(K)), void 0, !0)
+          }, Fe({ _: 2 }, [
+            re(e.slots, (P, M) => ({
+              name: M,
+              fn: m((j) => [
+                ne(e.$slots, M, Ie(De(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"])
@@ -1069,14 +990,14 @@ function yl(e, t, a, l, s, u) {
     _: 3
   }, 8, ["label", "field", "applied-filters-count", "disable-apply-button", "disable-secondary-button", "button-label", "default-value", "only-slot", "onApply", "onClear", "onReset", "onOpen", "onClose"]);
 }
-const j = /* @__PURE__ */ k(cl, [["render", yl], ["__scopeId", "data-v-0ca076e6"]]), ml = R({
+const z = /* @__PURE__ */ O(ol, [["render", ul], ["__scopeId", "data-v-0ca076e6"]]), dl = w({
   name: "bento-select-avatar-filter",
   components: {
-    BentoSelectFilter: j,
-    BentoAvatar: Ht
+    BentoSelectFilter: z,
+    BentoAvatar: Lt
   },
   props: {
-    ...j.props,
+    ...z.props,
     /**
      * List of options that are needed to setup the country filter
      * Available options:
@@ -1088,41 +1009,41 @@ const j = /* @__PURE__ */ k(cl, [["render", yl], ["__scopeId", "data-v-0ca076e6"
       default: void 0
     }
   },
-  emits: [c.INPUT, c.UPDATE],
+  emits: [v.INPUT, v.UPDATE],
   setup(e, { emit: t }) {
     return {
       // Enums
-      BentoFilterEvent: c,
+      BentoFilterEvent: v,
       // Methods
-      onUpdate: (l) => t(c.UPDATE, l)
+      onUpdate: (l) => t(v.UPDATE, l)
     };
   }
 });
-function Fl(e, t, a, l, s, u) {
-  const o = b("bento-avatar"), i = b("bento-select-filter");
-  return v(), S(i, ee(e.$props, {
+function cl(e, t, a, l, s, i) {
+  const o = y("bento-avatar"), r = y("bento-select-filter");
+  return b(), S(r, x(e.$props, {
     field: e.field,
     label: e.label,
     onUpdate: e.onUpdate,
     onInput: t[0] || (t[0] = (n) => e.$emit(e.BentoFilterEvent.INPUT, n))
   }), {
-    default: m(({ label: n, data: r }) => [
+    default: m(({ label: n, data: d }) => [
       g(o, {
         username: n,
-        src: r
+        src: d
       }, null, 8, ["username", "src"])
     ]),
     _: 1
   }, 16, ["field", "label", "onUpdate"]);
 }
-const at = /* @__PURE__ */ k(ml, [["render", Fl]]), _l = R({
+const st = /* @__PURE__ */ O(dl, [["render", cl]]), pl = w({
   name: "bento-select-country-filter",
   components: {
-    BentoSelectFilter: j,
-    ListboxOptionTag: Xe
+    BentoSelectFilter: z,
+    ListboxOptionTag: lt
   },
   props: {
-    ...j.props,
+    ...z.props,
     /**
      * List of options that are needed to setup the country filter
      * Available options:
@@ -1134,21 +1055,21 @@ const at = /* @__PURE__ */ k(ml, [["render", Fl]]), _l = R({
       default: void 0
     }
   },
-  emits: [c.INPUT, c.UPDATE],
+  emits: [v.INPUT, v.UPDATE],
   setup(e, { emit: t }) {
     return {
       // Enums
-      BentoFilterEvent: c,
+      BentoFilterEvent: v,
       // Methods
       onUpdate: (l) => {
-        t(c.UPDATE, l);
+        t(v.UPDATE, l);
       }
     };
   }
 });
-function Bl(e, t, a, l, s, u) {
-  const o = b("listbox-option-tag"), i = b("bento-select-filter");
-  return v(), S(i, ee(e.$props, {
+function bl(e, t, a, l, s, i) {
+  const o = y("listbox-option-tag"), r = y("bento-select-filter");
+  return b(), S(r, x(e.$props, {
     field: e.field,
     label: e.label,
     onUpdate: e.onUpdate,
@@ -1160,74 +1081,73 @@ function Bl(e, t, a, l, s, u) {
     _: 1
   }, 16, ["field", "label", "onUpdate"]);
 }
-const ot = /* @__PURE__ */ k(_l, [["render", Bl]]), hl = R({
+const it = /* @__PURE__ */ O(pl, [["render", bl]]), fl = w({
   name: "bento-select-country-filter",
   components: {
-    BentoSelectFilter: j,
-    BentoCountry: jt
+    BentoSelectFilter: z,
+    BentoCountry: Mt
   },
   props: {
-    ...j.props,
+    ...z.props,
     /**
      * List of options that are needed to setup the country filter
      * Available options:
      *   - multiple: If "true", the user will be able to select multiple items.
      *   - listboxItems: The option elements to populate the filter with {@see BentoSelectCountryFilterOptions}
-     *   - variant: Which label variant to display for the option item {@see BentoCountryVariant}.
+     *   - variant: Which label variant to display for the option item.
      */
     options: {
       type: Object,
       default: void 0
     }
   },
-  emits: [c.INPUT, c.UPDATE],
+  emits: [v.INPUT, v.UPDATE],
   setup(e, { emit: t }) {
-    const a = M(e, "options"), { listboxItems: l, variant: s } = mt(a.value), u = (n) => t(c.UPDATE, n), o = zt(s, l), i = f(() => ({
+    const a = L(e, "options"), { listboxItems: l, variant: s } = Ft(a.value), i = (n) => t(v.UPDATE, n), o = qt(s, l), r = f(() => ({
       ...e.options,
       listboxItems: o.value
     }));
-    return Ft("skipBentoCountryDeprecateMessage", !0), (!s || s.value === "custom") && Ct(
+    return ht("skipBentoCountryDeprecateMessage", !0), (!s || s.value === "custom") && St(
       'BentoSelectCountryFilter type with `options.variant==="custom"`',
       "Use any of the other BentoSelectCountryFilter variants instead OR use BentoSelectFilter type for custom labels",
       "2.0.0"
     ), {
       // Values
-      countryOptions: i,
+      countryOptions: r,
       // Methods
-      onUpdate: u,
+      onUpdate: i,
       // Enums
-      BentoCountryVariant: Ze,
-      BentoFilterEvent: c
+      BentoFilterEvent: v
     };
   }
 });
-function gl(e, t, a, l, s, u) {
-  const o = b("bento-country"), i = b("bento-select-filter");
-  return v(), S(i, ee(e.$props, {
+function vl(e, t, a, l, s, i) {
+  const o = y("bento-country"), r = y("bento-select-filter");
+  return b(), S(r, x(e.$props, {
     field: e.field,
     label: e.label,
     options: e.countryOptions,
     onUpdate: e.onUpdate,
     onInput: t[0] || (t[0] = (n) => e.$emit(e.BentoFilterEvent.INPUT, n))
   }), {
-    default: m(({ value: n, label: r }) => [
+    default: m(({ value: n, label: d }) => [
       g(o, {
         code: n,
-        label: r,
-        variant: e.BentoCountryVariant.CUSTOM
-      }, null, 8, ["code", "label", "variant"])
+        label: d,
+        variant: "custom"
+      }, null, 8, ["code", "label"])
     ]),
     _: 1
   }, 16, ["field", "label", "options", "onUpdate"]);
 }
-const st = /* @__PURE__ */ k(hl, [["render", gl]]), Cl = R({
+const rt = /* @__PURE__ */ O(fl, [["render", vl]]), yl = w({
   name: "bento-select-payment-method-filter",
   components: {
-    BentoSelectFilter: j,
-    BentoPaymentMethod: Gt
+    BentoSelectFilter: z,
+    BentoPaymentMethod: Ht
   },
   props: {
-    ...j.props,
+    ...z.props,
     /**
      * List of options that are needed to setup the payment method filter
      * Available options:
@@ -1239,41 +1159,41 @@ const st = /* @__PURE__ */ k(hl, [["render", gl]]), Cl = R({
       default: void 0
     }
   },
-  emits: [c.INPUT, c.UPDATE],
+  emits: [v.INPUT, v.UPDATE],
   setup(e, { emit: t }) {
     return {
       // Enums
-      BentoFilterEvent: c,
+      BentoFilterEvent: v,
       // Methods
-      onUpdate: (l) => t(c.UPDATE, l)
+      onUpdate: (l) => t(v.UPDATE, l)
     };
   }
 });
-function Sl(e, t, a, l, s, u) {
-  const o = b("bento-payment-method"), i = b("bento-select-filter");
-  return v(), S(i, ee(e.$props, {
+function ml(e, t, a, l, s, i) {
+  const o = y("bento-payment-method"), r = y("bento-select-filter");
+  return b(), S(r, x(e.$props, {
     field: e.field,
     label: e.label,
     onUpdate: e.onUpdate,
     onInput: t[0] || (t[0] = (n) => e.$emit(e.BentoFilterEvent.INPUT, n))
   }), {
-    default: m(({ value: n, label: r }) => [
+    default: m(({ value: n, label: d }) => [
       g(o, {
         type: n,
-        label: r
+        label: d
       }, null, 8, ["type", "label"])
     ]),
     _: 1
   }, 16, ["field", "label", "onUpdate"]);
 }
-const it = /* @__PURE__ */ k(Cl, [["render", Sl]]), Al = R({
+const ut = /* @__PURE__ */ O(yl, [["render", ml]]), _l = w({
   name: "bento-select-country-filter",
   components: {
-    BentoSelectFilter: j,
-    ListboxOptionTag: Xe
+    BentoSelectFilter: z,
+    ListboxOptionTag: lt
   },
   props: {
-    ...j.props,
+    ...z.props,
     /**
      * List of options that are needed to setup the tag filter
      * Available options:
@@ -1285,12 +1205,12 @@ const it = /* @__PURE__ */ k(Cl, [["render", Sl]]), Al = R({
       default: void 0
     }
   },
-  emits: [c.INPUT, c.UPDATE],
+  emits: [v.INPUT, v.UPDATE],
   setup(e, { emit: t }) {
-    const a = (u) => t(c.UPDATE, u), l = f(
+    const a = (i) => t(v.UPDATE, i), l = f(
       () => {
-        var u, o;
-        return (o = (u = e == null ? void 0 : e.options) == null ? void 0 : u.listboxItems) == null ? void 0 : o.map(({ label: i, value: n, variant: r }) => ({ label: i, value: n, data: r }));
+        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: n, variant: d }) => ({ label: r, value: n, data: d }));
       }
     );
     return {
@@ -1302,37 +1222,36 @@ const it = /* @__PURE__ */ k(Cl, [["render", Sl]]), Al = R({
       // Methods
       onUpdate: a,
       // Enums
-      BentoCountryVariant: Ze,
-      BentoFilterEvent: c
+      BentoFilterEvent: v
     };
   }
 });
-function Tl(e, t, a, l, s, u) {
-  const o = b("listbox-option-tag"), i = b("bento-select-filter");
-  return v(), S(i, ee(e.$props, {
+function Fl(e, t, a, l, s, i) {
+  const o = y("listbox-option-tag"), r = y("bento-select-filter");
+  return b(), S(r, x(e.$props, {
     field: e.field,
     label: e.label,
     options: e.countryOptions,
     onUpdate: e.onUpdate,
     onInput: t[0] || (t[0] = (n) => e.$emit(e.BentoFilterEvent.INPUT, n))
   }), {
-    default: m(({ label: n, data: r }) => [
+    default: m(({ label: n, data: d }) => [
       g(o, {
-        option: { value: n, data: r, label: "" }
+        option: { value: n, data: d, label: "" }
       }, null, 8, ["option"])
     ]),
     _: 1
   }, 16, ["field", "label", "options", "onUpdate"]);
 }
-const rt = /* @__PURE__ */ k(Al, [["render", Tl]]), Me = {
+const dt = /* @__PURE__ */ O(_l, [["render", Fl]]), we = {
   "en-US": {
     yes: "Yes",
     no: "No"
   }
-}, $l = R({
+}, hl = w({
   name: "bento-boolean-filter",
-  i18n: { messages: Me },
-  components: { BentoBaseFilter: re, BentoRadioGroup: Ut },
+  i18n: { messages: we },
+  components: { BentoBaseFilter: de, BentoRadioGroup: At },
   props: {
     /**
      * Default value of the filter to reset to.
@@ -1357,52 +1276,52 @@ const rt = /* @__PURE__ */ k(Al, [["render", Tl]]), Me = {
      */
     onlySlot: { type: Boolean, default: !1 }
   },
-  emits: [c.INPUT, c.UPDATE],
+  emits: [v.INPUT, v.UPDATE],
   setup(e, { emit: t }) {
-    const { t: a } = le({ messages: Me }), l = f(() => [
+    const { t: a } = ae({ messages: we }), l = f(() => [
       { value: "yes", label: a("yes") },
       { value: "no", label: a("no") }
-    ]), { internalFilterValue: s, isSecondaryButtonDisabled: u, isApplyButtonDisabled: o } = ue(
-      M(e, "value"),
-      M(e, "defaultValue")
-    ), i = f(
-      () => e.defaultValue === null ? e.label : ce(l.value.find(({ value: A }) => A === e.value).label, 18)
-    ), n = f(() => e.value != null ? 1 : null), r = f(() => ({
+    ]), { internalFilterValue: s, isSecondaryButtonDisabled: i, isApplyButtonDisabled: o } = ce(
+      L(e, "value"),
+      L(e, "defaultValue")
+    ), r = f(
+      () => e.defaultValue === null ? e.label : fe(l.value.find(({ value: $ }) => $ === e.value).label, 18)
+    ), n = f(() => e.value != null ? 1 : null), d = f(() => ({
       ["b-boolean-filter--only-slot"]: e.onlySlot
     }));
-    Be(() => {
+    ge(() => {
       s.value || (s.value = null);
     });
-    const y = (A) => {
-      s.value = A, t(c.INPUT, { ...e, value: s.value });
-    }, B = () => {
+    const c = ($) => {
+      s.value = $, t(v.INPUT, { ...e, value: s.value });
+    }, h = () => {
       s.value = e.value;
-    }, d = () => {
-      t(c.UPDATE, { ...e, value: s.value });
+    }, u = () => {
+      t(v.UPDATE, { ...e, value: s.value });
     };
     return {
       // Values
       items: l,
       appliedFiltersCount: n,
-      conditionalClasses: r,
-      buttonLabel: i,
+      conditionalClasses: d,
+      buttonLabel: r,
       internalFilterValue: s,
       isApplyButtonDisabled: o,
-      isSecondaryButtonDisabled: u,
+      isSecondaryButtonDisabled: i,
       // Events
-      onInput: y,
-      updateFilter: d,
+      onInput: c,
+      updateFilter: u,
       clearFilter: () => {
-        s.value = null, d();
+        s.value = null, u();
       },
-      openFilter: B,
-      resetFilter: () => t(c.UPDATE, { ...e, value: e.defaultValue })
+      openFilter: h,
+      resetFilter: () => t(v.UPDATE, { ...e, value: e.defaultValue })
     };
   }
 });
-function Il(e, t, a, l, s, u) {
-  const o = b("bento-radio-group"), i = b("bento-base-filter");
-  return v(), S(i, ee(e.$props, {
+function Cl(e, t, a, l, s, i) {
+  const o = y("bento-radio-group"), r = y("bento-base-filter");
+  return b(), S(r, x(e.$props, {
     "applied-filters-count": e.appliedFiltersCount,
     "disable-apply-button": e.isApplyButtonDisabled,
     "disable-secondary-button": e.isSecondaryButtonDisabled,
@@ -1414,9 +1333,9 @@ function Il(e, t, a, l, s, u) {
     onReset: e.resetFilter
   }), {
     default: m(() => [
-      V("div", {
-        class: ie(["b-boolean-filter", e.conditionalClasses]),
-        onKeydown: t[0] || (t[0] = ae((...n) => e.updateFilter && e.updateFilter(...n), ["enter"]))
+      R("div", {
+        class: ue(["b-boolean-filter", e.conditionalClasses]),
+        onKeydown: t[0] || (t[0] = se((...n) => e.updateFilter && e.updateFilter(...n), ["enter"]))
       }, [
         g(o, {
           items: e.items,
@@ -1430,15 +1349,15 @@ function Il(e, t, a, l, s, u) {
     _: 1
   }, 16, ["applied-filters-count", "disable-apply-button", "disable-secondary-button", "button-label", "only-slot", "onApply", "onClear", "onOpen", "onReset"]);
 }
-const ut = /* @__PURE__ */ k($l, [["render", Il], ["__scopeId", "data-v-781199b1"]]), Dl = {
+const ct = /* @__PURE__ */ O(hl, [["render", Cl], ["__scopeId", "data-v-781199b1"]]), gl = {
   "en-US": {
     from: "From",
     to: "To"
   }
-}, El = R({
+}, $l = w({
   name: "bento-range-filter",
-  i18n: { messages: Dl },
-  components: { BentoBaseFilter: re, BentoInputField: ze },
+  i18n: { messages: gl },
+  components: { BentoBaseFilter: de, BentoInputField: Qe },
   props: {
     /**
      * Default value of the filter to reset to.
@@ -1463,55 +1382,53 @@ const ut = /* @__PURE__ */ k($l, [["render", Il], ["__scopeId", "data-v-781199b1
      */
     onlySlot: { type: Boolean, default: !1 }
   },
-  emits: [c.INPUT, c.UPDATE],
+  emits: [v.INPUT, v.UPDATE],
   setup(e, { emit: t }) {
-    const a = P(null), { internalFilterValue: l, isSecondaryButtonDisabled: s, isApplyButtonDisabled: u } = ue(
-      M(e, "value"),
-      M(e, "defaultValue")
+    const a = N(null), { internalFilterValue: l, isSecondaryButtonDisabled: s, isApplyButtonDisabled: i } = ce(
+      L(e, "value"),
+      L(e, "defaultValue")
     ), o = f(
-      () => e.defaultValue === null ? e.label : `${ce(e.value[0], 5)}-${ce(e.value[1], 5)}`
-    ), i = f(() => e.value.find((C) => C !== "") ? 1 : null), n = f(() => ({
+      () => e.defaultValue === null ? e.label : `${fe(e.value[0], 5)}-${fe(e.value[1], 5)}`
+    ), r = f(() => e.value.find((B) => B !== "") ? 1 : null), n = f(() => ({
       ["b-range-filter--only-slot"]: e.onlySlot
-    })), r = () => {
-      l.value = e.value, Ye(() => a.value.focusInput());
-    }, y = () => {
-      t(c.INPUT, { ...e, value: l.value });
-    }, B = (C) => {
-      l.value = [C, l.value[1]], y();
-    }, d = (C) => {
-      l.value = [l.value[0], C], y();
-    }, h = () => {
-      l.value.some((C) => C) || (l.value = e.defaultValue !== null ? e.defaultValue : void 0), t(c.UPDATE, {
+    })), d = () => {
+      l.value = e.value, Ct(() => a.value.focusInput());
+    }, c = () => {
+      t(v.INPUT, { ...e, value: l.value });
+    }, h = (B) => {
+      l.value = [B, l.value[1]], c();
+    }, u = (B) => {
+      l.value = [l.value[0], B], c();
+    }, C = () => {
+      l.value.some((B) => B) || (l.value = e.defaultValue !== null ? e.defaultValue : void 0), t(v.UPDATE, {
         ...e,
         value: l.value
       });
     };
     return {
-      // Enums
-      BentoInputFieldType: Pt,
       // Values
       inputTextRef: a,
-      appliedFiltersCount: i,
+      appliedFiltersCount: r,
       conditionalClasses: n,
       internalFilterValue: l,
-      isApplyButtonDisabled: u,
+      isApplyButtonDisabled: i,
       isSecondaryButtonDisabled: s,
       buttonLabel: o,
       // Events
-      updateFrom: B,
-      updateTo: d,
-      updateFilter: h,
+      updateFrom: h,
+      updateTo: u,
+      updateFilter: C,
       clearFilter: () => {
-        l.value = ["", ""], h();
+        l.value = ["", ""], C();
       },
-      openFilter: r,
-      resetFilter: () => t(c.UPDATE, { ...e, value: e.defaultValue })
+      openFilter: d,
+      resetFilter: () => t(v.UPDATE, { ...e, value: e.defaultValue })
     };
   }
 });
-function Ul(e, t, a, l, s, u) {
-  const o = b("bento-input-field"), i = b("bento-base-filter");
-  return v(), S(i, ee(e.$props, {
+function Bl(e, t, a, l, s, i) {
+  const o = y("bento-input-field"), r = y("bento-base-filter");
+  return b(), S(r, x(e.$props, {
     "applied-filters-count": e.appliedFiltersCount,
     "disable-apply-button": e.isApplyButtonDisabled,
     "disable-secondary-button": e.isSecondaryButtonDisabled,
@@ -1523,44 +1440,157 @@ function Ul(e, t, a, l, s, u) {
     onReset: e.resetFilter
   }), {
     default: m(() => [
-      V("div", {
-        class: ie(["b-range-filter", e.conditionalClasses]),
-        onKeydown: t[0] || (t[0] = ae((...n) => e.updateFilter && e.updateFilter(...n), ["enter"]))
+      R("div", {
+        class: ue(["b-range-filter", e.conditionalClasses]),
+        onKeydown: t[0] || (t[0] = se((...n) => e.updateFilter && e.updateFilter(...n), ["enter"]))
       }, [
         g(o, {
           ref: "inputTextRef",
           value: e.internalFilterValue ? e.internalFilterValue[0] : "",
-          type: e.BentoInputFieldType.NUMBER,
+          type: "number",
           "aria-label": e.$t("from").toString(),
           onInput: e.updateFrom
         }, {
           default: m(() => [
-            N(L(e.$t("from")), 1)
+            V(k(e.$t("from")), 1)
           ]),
           _: 1
-        }, 8, ["value", "type", "aria-label", "onInput"]),
+        }, 8, ["value", "aria-label", "onInput"]),
         g(o, {
           class: "b-range-filter__input-field",
           value: e.internalFilterValue ? e.internalFilterValue[1] : "",
-          type: e.BentoInputFieldType.NUMBER,
+          type: "number",
           "aria-label": e.$t("to").toString(),
           onInput: e.updateTo
         }, {
           default: m(() => [
-            N(L(e.$t("to")), 1)
+            V(k(e.$t("to")), 1)
           ]),
           _: 1
-        }, 8, ["value", "type", "aria-label", "onInput"])
+        }, 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"]);
 }
-const dt = /* @__PURE__ */ k(El, [["render", Ul], ["__scopeId", "data-v-a248f4f6"]]);
-var _e = /* @__PURE__ */ ((e) => (e.INPUT = "input", e))(_e || {});
-const Pl = R({
+const pt = /* @__PURE__ */ O($l, [["render", Bl], ["__scopeId", "data-v-6db61e6b"]]);
+var Ce = /* @__PURE__ */ ((e) => (e.INPUT = "input", e))(Ce || {});
+const Sl = w({
+  name: "base-filter-button",
+  components: { BaseButton: ze, BentoTypography: be, ChevronUpIcon: We, ChevronDownIcon: Ze },
+  props: {
+    /**
+     * The number of applies values within the filter.
+     * e.g. if 2 items in a dropdown filter have been applied, the number 2 will be shown here.
+     */
+    amountAppliedValues: { type: Number, default: null },
+    /**
+     * Disables button functionality.
+     */
+    disabled: { type: Boolean, default: !1 },
+    /**
+     * Signifies if the filter is open or closed.
+     */
+    isFilterOpen: { type: Boolean, default: !1 },
+    /**
+     * Toggles if a chevron icon should be displayed in the button.
+     * The chevron will change depending on the open state of the filter.
+     */
+    hasChevron: { type: Boolean, default: !1 },
+    /**
+     * Renders the text in a stronger variant.
+     */
+    bold: { type: Boolean, default: !1 }
+  },
+  emits: [Ee.CLICK],
+  setup(e, { slots: t, emit: a, attrs: l }) {
+    const s = f(() => t.default ? Je(t)("default") : null), i = Ye({ ariaLabel: s }), o = N(null), r = f(() => {
+      var c;
+      return {
+        "aria-controls": (c = l["aria-controls"]) == null ? void 0 : c.toString()
+      };
+    }), n = f(() => ({
+      ["b-base-filter-button--with-chevron"]: e.hasChevron,
+      ["b-base-filter-button--filter-open"]: e.isFilterOpen
+    }));
+    return {
+      // Values
+      ariaAttributes: r,
+      computedAriaLabel: i,
+      conditionalClasses: n,
+      // Methods
+      onClickButton: () => {
+        e.disabled || a(Ee.CLICK);
+      },
+      hasSlot: Ge(t),
+      // Refs
+      baseFilterButtonRef: o
+    };
+  }
+});
+const Al = { class: "b-base-filter-button__default-container" }, Il = {
+  key: 0,
+  class: "b-base-filter-button__counter-wrapper"
+};
+function Dl(e, t, a, l, s, i) {
+  const o = y("bento-typography"), r = y("chevron-up-icon"), n = y("chevron-down-icon"), d = y("base-button");
+  return b(), S(d, {
+    ref: "baseFilterButtonRef",
+    class: ue(["b-base-filter-button", e.conditionalClasses]),
+    disabled: e.disabled,
+    "aria-label": e.computedAriaLabel,
+    "aria-controls": e.ariaAttributes["aria-controls"],
+    type: "button",
+    onClick: e.onClickButton
+  }, Fe({
+    default: m(() => [
+      R("div", Al, [
+        g(o, {
+          el: "span",
+          variant: "body",
+          stronger: e.bold,
+          class: "b-base-filter-button__label"
+        }, {
+          default: m(() => [
+            ne(e.$slots, "default", {}, void 0, !0)
+          ]),
+          _: 3
+        }, 8, ["stronger"]),
+        e.amountAppliedValues && !e.hasChevron ? (b(), U("div", Il, [
+          g(o, {
+            class: "b-base-filter-button__counter",
+            el: "span",
+            variant: "body",
+            stronger: ""
+          }, {
+            default: m(() => [
+              V(k(e.amountAppliedValues), 1)
+            ]),
+            _: 1
+          })
+        ])) : q("", !0)
+      ])
+    ]),
+    _: 2
+  }, [
+    e.hasChevron ? {
+      name: "iconRight",
+      fn: m(() => [
+        e.isFilterOpen ? (b(), S(r, {
+          key: 0,
+          "aria-hidden": "true"
+        })) : (b(), S(n, {
+          key: 1,
+          "aria-hidden": "true"
+        }))
+      ]),
+      key: "0"
+    } : void 0
+  ]), 1032, ["class", "disabled", "aria-label", "aria-controls", "onClick"]);
+}
+const Tl = /* @__PURE__ */ O(Sl, [["render", Dl], ["__scopeId", "data-v-f6db85bb"]]), Ul = w({
   name: "all-filters-modal-button",
-  components: { BaseFilterButton: xe },
+  components: { BaseFilterButton: Tl },
   props: {
     /**
      * Button label to be displayed
@@ -1592,22 +1622,22 @@ const Pl = R({
     };
   }
 });
-function Rl(e, t, a, l, s, u) {
-  const o = b("base-filter-button");
-  return v(), S(o, {
-    class: ie(["b-all-filters-modal-button", e.conditionalClasses]),
+function El(e, t, a, l, s, i) {
+  const o = y("base-filter-button");
+  return b(), S(o, {
+    class: ue(["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(L(e.label), 1)
+      V(k(e.label), 1)
     ]),
     _: 1
   }, 8, ["class", "amount-applied-values", "is-filter-open", "disabled", "onClick"]);
 }
-const kl = /* @__PURE__ */ k(Pl, [["render", Rl], ["__scopeId", "data-v-01e76c5e"]]), we = {
+const Pl = /* @__PURE__ */ O(Ul, [["render", El], ["__scopeId", "data-v-01e76c5e"]]), Le = {
   "en-US": {
     activeFilters: "Active filters",
     allFilters: "All filters",
@@ -1619,27 +1649,27 @@ const kl = /* @__PURE__ */ k(Pl, [["render", Rl], ["__scopeId", "data-v-01e76c5e
     otherFilters: "Other filters",
     searchBar: "Search bar"
   }
-}, Ol = R({
-  i18n: { messages: we },
+}, kl = w({
+  i18n: { messages: Le },
   name: "all-filters-modal",
   components: {
-    AllFiltersModalButton: kl,
-    BentoBooleanFilter: ut,
-    BentoButton: He,
-    BentoDateFilter: lt,
-    BentoDateRangeFilter: nt,
-    BentoInputFilter: tt,
-    BentoModal: kt,
-    BentoRangeFilter: dt,
-    BentoSearchBar: be,
-    BentoSelectAvatarFilter: at,
-    BentoSelectCurrencyFilter: ot,
-    BentoSelectCountryFilter: st,
-    BentoSelectFilter: j,
-    BentoSelectPaymentMethodFilter: it,
-    BentoSelectTagFilter: rt,
-    BentoTypography: Ce,
-    FilterBarFilterButton: et
+    AllFiltersModalButton: Pl,
+    BentoBooleanFilter: ct,
+    BentoButton: Ut,
+    BentoDateFilter: at,
+    BentoDateRangeFilter: ot,
+    BentoInputFilter: nt,
+    BentoModal: Dt,
+    BentoRangeFilter: pt,
+    BentoSearchBar: me,
+    BentoSelectAvatarFilter: st,
+    BentoSelectCurrencyFilter: it,
+    BentoSelectCountryFilter: rt,
+    BentoSelectFilter: z,
+    BentoSelectPaymentMethodFilter: ut,
+    BentoSelectTagFilter: dt,
+    BentoTypography: be,
+    FilterBarButton: Be
   },
   props: {
     /**
@@ -1667,66 +1697,66 @@ const kl = /* @__PURE__ */ k(Pl, [["render", Rl], ["__scopeId", "data-v-01e76c5e
       default: () => []
     }
   },
-  emits: [_e.INPUT],
+  emits: [Ce.INPUT],
   setup(e, { emit: t }) {
-    const a = Ke({ value: e.value }), l = ge("all-filters-modal"), s = P([]), u = P(!1), o = P(0), i = P(null), n = P(""), { t: r } = le({ messages: we }), y = Ge(n, M(a, "value")), B = P({});
-    Be(() => {
-      B.value = [];
+    const a = He({ value: e.value }), l = $e("all-filters-modal"), s = N([]), i = N(!1), o = N(0), r = N(null), n = N(""), { t: d } = ae({ messages: Le }), c = Xe(n, L(a, "value")), h = N({});
+    ge(() => {
+      h.value = [];
     }), ve(
       () => e.value,
       () => {
         a.value = e.value;
       }
     );
-    const d = (p) => (
+    const u = (p) => (
       /* eslint-disable-next-line no-nested-ternary */
-      p.sort(($, D) => $.label > D.label ? 1 : D.label > $.label ? -1 : 0)
-    ), h = f(
-      () => d(
-        y.value.filter(
+      p.sort((I, T) => I.label > T.label ? 1 : T.label > I.label ? -1 : 0)
+    ), C = f(
+      () => u(
+        c.value.filter(
           (p) => {
-            var $, D;
-            return Array.isArray(p.value) ? (($ = p.value) == null ? void 0 : $.length) && ((D = p.value) == null ? void 0 : D.find((X) => X !== "")) : p.value;
+            var I, T;
+            return Array.isArray(p.value) ? ((I = p.value) == null ? void 0 : I.length) && ((T = p.value) == null ? void 0 : T.find((Q) => Q !== "")) : p.value;
           }
         )
       )
-    ), O = f(
-      () => d(
-        y.value.filter(
+    ), E = f(
+      () => u(
+        c.value.filter(
           (p) => {
-            var $, D;
-            return Array.isArray(p.value) ? (($ = p.value) == null ? void 0 : $.length) === 0 || ((D = p.value) == null ? void 0 : D.every((X) => X === "")) : !p.value;
+            var I, T;
+            return Array.isArray(p.value) ? ((I = p.value) == null ? void 0 : I.length) === 0 || ((T = p.value) == null ? void 0 : T.every((Q) => Q === "")) : !p.value;
           }
         )
       )
-    ), A = f(() => {
+    ), $ = f(() => {
       var p;
-      return n.value && ((p = y.value) == null ? void 0 : p.length) === 0;
-    }), C = f(() => a.value[o.value]), q = () => {
-      const p = h.value.length ? h.value[0] : O.value[0], $ = a.value.findIndex(
-        (D) => D.label === p.label && D.field === p.field
+      return n.value && ((p = c.value) == null ? void 0 : p.length) === 0;
+    }), B = f(() => a.value[o.value]), H = () => {
+      const p = C.value.length ? C.value[0] : E.value[0], I = a.value.findIndex(
+        (T) => T.label === p.label && T.field === p.field
       );
-      o.value = $;
+      o.value = I;
     };
-    _t(() => {
-      q();
+    gt(() => {
+      H();
     });
-    const F = f(
+    const _ = f(
       () => a.value.map((p) => {
-        var $, D, X, fe, Te, $e;
+        var I, T, Q, ye, Se, Ae;
         switch (p.type) {
-          case H.SELECT:
-          case H.SELECT_AVATAR:
-          case H.SELECT_COUNTRY:
-          case H.SELECT_CURRENCY:
-          case H.SELECT_PAYMENT_METHOD:
-          case H.SELECT_TAG:
-            switch (($ = p.options) == null ? void 0 : $.multiple) {
+          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 = p.options) == null ? void 0 : I.multiple) {
               case !0:
                 return {
                   label: p.label,
                   field: p.field,
-                  count: (D = p.value) != null && D.length ? (X = p.value) == null ? void 0 : X.length : null
+                  count: (T = p.value) != null && T.length ? (Q = p.value) == null ? void 0 : Q.length : null
                 };
               default:
                 return {
@@ -1735,21 +1765,21 @@ const kl = /* @__PURE__ */ k(Pl, [["render", Rl], ["__scopeId", "data-v-01e76c5e
                   count: p.value == null ? null : 1
                 };
             }
-          case H.DATE_RANGE:
+          case Y.DATE_RANGE:
             return {
               label: p.label,
               field: p.field,
-              count: ((fe = p.value) == null ? void 0 : fe.startDate) != null && ((Te = p.value) == null ? void 0 : Te.endDate) != null ? 1 : null
+              count: ((ye = p.value) == null ? void 0 : ye.startDate) != null && ((Se = p.value) == null ? void 0 : Se.endDate) != null ? 1 : null
             };
-          case H.RANGE:
+          case Y.RANGE:
             return {
               label: p.label,
               field: p.field,
-              count: ($e = p.value) != null && $e.find((ft) => ft !== "") ? 1 : null
+              count: (Ae = p.value) != null && Ae.find((vt) => vt !== "") ? 1 : null
             };
-          case H.INPUT:
-          case H.BOOLEAN:
-          case H.DATE:
+          case Y.INPUT:
+          case Y.BOOLEAN:
+          case Y.DATE:
           default:
             return {
               label: p.label,
@@ -1758,252 +1788,250 @@ const kl = /* @__PURE__ */ k(Pl, [["render", Rl], ["__scopeId", "data-v-01e76c5e
             };
         }
       })
-    ), _ = f(
+    ), F = f(
       () => {
         var p;
-        return Array.isArray(C.value.value) ? ((p = C.value) == null ? void 0 : p.value.length) && C.value.value.find(($) => $ !== "") : !!a.value[o.value].value;
+        return Array.isArray(B.value.value) ? ((p = B.value) == null ? void 0 : p.value.length) && B.value.value.find((I) => I !== "") : !!a.value[o.value].value;
       }
-    ), I = f(
+    ), D = f(
       () => {
         var p;
         return (
           // eslint-disable-next-line no-return-assign, no-param-reassign
-          (p = F.value) == null ? void 0 : p.reduce(($, D) => $ += D.count, 0)
+          (p = _.value) == null ? void 0 : p.reduce((I, T) => I += T.count, 0)
         );
       }
-    ), E = () => {
-      u.value ? u.value = !1 : u.value = !0;
-    }, w = (p) => F.value.find(($) => $.label === p).count, K = (p, $) => {
+    ), P = () => {
+      i.value ? i.value = !1 : i.value = !0;
+    }, M = (p) => _.value.find((I) => I.label === p).count, j = (p, I) => {
       o.value = a.value.findIndex(
-        (D) => D.label === p && D.field === $
+        (T) => T.label === p && T.field === I
       );
-    }, Y = () => {
+    }, K = () => {
       n.value = "";
-    }, z = () => {
-      u.value = !1, a.value = e.value, Y(), q();
-    }, W = (p) => {
-      const $ = a.value.map(({ value: D, ...X }, fe) => fe === o.value ? { value: p.value, ...X } : { value: D, ...X });
-      a.value = $;
+    }, J = () => {
+      i.value = !1, a.value = e.value, K(), H();
+    }, Z = (p) => {
+      const I = a.value.map(({ value: T, ...Q }, ye) => ye === o.value ? { value: p.value, ...Q } : { value: T, ...Q });
+      a.value = I;
     }, G = () => {
-      W({
-        field: C.value.field,
-        label: C.value.label,
-        type: C.value.type,
+      Z({
+        field: B.value.field,
+        label: B.value.label,
+        type: B.value.type,
         value: void 0
       });
-    }, T = () => {
-      a.value = a.value.map(({ value: p, ...$ }) => ({
-        ...$,
+    }, A = () => {
+      a.value = a.value.map(({ value: p, ...I }) => ({
+        ...I,
         value: void 0
       }));
-    }, Z = () => {
-      t(_e.INPUT, a.value), u.value = !1;
-    }, pt = f(
+    }, ee = () => {
+      t(Ce.INPUT, a.value), i.value = !1;
+    }, bt = f(
       () => JSON.stringify(a.value) === JSON.stringify(e.value)
-    ), ct = f(() => [
+    ), ft = f(() => [
       {
-        title: r("applyAll"),
-        disabled: pt.value,
-        event: Z
+        title: d("applyAll"),
+        disabled: bt.value,
+        event: ee
       },
       {
-        title: r("cancel"),
-        event: z
+        title: d("cancel"),
+        event: J
       },
       {
-        title: r("clearAll"),
-        disabled: !I.value,
-        event: T
+        title: d("clearAll"),
+        disabled: !D.value,
+        event: A
       }
     ]);
     return {
       // Enums
-      BentoModalEvent: Ot,
-      BentoModalSize: Vt,
-      BentoButtonVariant: he,
-      BentoTypographyElement: Se,
-      BentoTypographyVariant: Ae,
+      BentoModalEvent: Tt,
       // Values
       allFiltersModalUniqueId: l,
       allFiltersModalFiltersSection: s,
-      allFiltersModalFilterButtons: B,
-      numberOfActiveFilters: I,
-      isEmptyResultForSearchFilter: A,
-      isModalOpen: u,
-      isClearButtonEnabled: _,
-      activeFilters: h,
-      otherFilters: O,
-      modalActions: ct,
-      selectedFilter: C,
-      selectedFilterRef: i,
+      allFiltersModalFilterButtons: h,
+      numberOfActiveFilters: D,
+      isEmptyResultForSearchFilter: $,
+      isModalOpen: i,
+      isClearButtonEnabled: F,
+      activeFilters: C,
+      otherFilters: E,
+      modalActions: ft,
+      selectedFilter: B,
+      selectedFilterRef: r,
       filters: a,
-      computedCounts: F,
+      computedCounts: _,
       searchTerm: n,
       // Methods
-      onClickAllFiltersModal: E,
-      getFilterCount: w,
-      cancel: z,
-      selectFilter: K,
+      onClickAllFiltersModal: P,
+      getFilterCount: M,
+      cancel: J,
+      selectFilter: j,
       clearFilter: G,
-      updateFilter: W,
-      onSearchbarClear: Y,
+      updateFilter: Z,
+      onSearchbarClear: K,
       onKeydownRight: () => {
-        Lt(1, i.value.$el).focus();
+        Pt(1, r.value.$el).focus();
       },
       onKeydownLeft: () => {
-        B.value[C.value.label].$el.focus();
+        h.value[B.value.label].$el.focus();
       }
     };
   }
 });
-const Vl = { class: "b-all-filters-modal" }, Nl = {
+const Rl = { class: "b-all-filters-modal" }, Ol = {
   key: 0,
   class: "b-all-filters-modal__empty-search-message"
-}, Ll = {
+}, Vl = {
   key: 1,
   class: "b-all-filters-modal__filters-section"
-}, Ml = ["aria-labelledby"], wl = {
+}, Nl = ["aria-labelledby"], wl = {
   key: 2,
   class: "b-all-filters-modal__filters-section"
-}, ql = ["aria-labelledby"], Yl = { class: "b-all-filters-modal__selected-filter-text" }, Kl = { class: "b-all-filters-modal__selected-filter-component" }, Hl = { class: "b-all-filters-modal__clear-button" };
-function jl(e, t, a, l, s, u) {
-  const o = b("filter-bar-filter-button"), i = b("bento-search-bar"), n = b("bento-typography"), r = b("all-filters-modal-button"), y = b("bento-button"), B = b("bento-modal");
-  return v(), U("div", Vl, [
+}, Ll = ["aria-labelledby"], Ml = { class: "b-all-filters-modal__selected-filter-text" }, ql = { class: "b-all-filters-modal__selected-filter-component" }, Hl = { class: "b-all-filters-modal__clear-button" };
+function Kl(e, t, a, l, s, i) {
+  const o = y("filter-bar-button"), r = y("bento-search-bar"), n = y("bento-typography"), d = y("all-filters-modal-button"), c = y("bento-button"), h = y("bento-modal");
+  return b(), U("div", Rl, [
     g(o, {
-      label: e.$t("allFilters").toString(),
       "is-filter-open": e.isModalOpen,
       "applied-filters-count": e.numberOfActiveFilters,
       onClick: e.onClickAllFiltersModal
-    }, null, 8, ["label", "is-filter-open", "applied-filters-count", "onClick"]),
-    g(B, {
+    }, {
+      default: m(() => [
+        V(k(e.$t("allFilters")), 1)
+      ]),
+      _: 1
+    }, 8, ["is-filter-open", "applied-filters-count", "onClick"]),
+    g(h, {
       class: "'b-all-filters-modal__modal'",
       "is-open": e.isModalOpen,
       "with-column-layout": !0,
-      size: e.BentoModalSize.LARGE,
+      size: "large",
       actions: e.modalActions,
       "is-dismissible": !1,
       "hide-close-button": "",
       onCloseModal: e.cancel
     }, {
       default: m(() => [
-        N(L(e.$t("allFilters")), 1)
+        V(k(e.$t("allFilters")), 1)
       ]),
       "content-col-1": m(() => [
-        V("div", {
+        R("div", {
           ref: "allFiltersModalFiltersSection",
           class: "b-all-filters-modal__filters",
-          onKeydown: t[1] || (t[1] = ae((...d) => e.onKeydownRight && e.onKeydownRight(...d), ["right"]))
+          onKeydown: t[1] || (t[1] = se((...u) => e.onKeydownRight && e.onKeydownRight(...u), ["right"]))
         }, [
-          g(i, {
+          g(r, {
             class: "b-all-filters-modal__search-bar",
             value: e.searchTerm,
             "input-field-aria-label": e.$t("searchBar").toString(),
-            onInput: t[0] || (t[0] = (d) => e.searchTerm = d),
+            onInput: t[0] || (t[0] = (u) => e.searchTerm = u),
             onClear: e.onSearchbarClear
           }, null, 8, ["value", "input-field-aria-label", "onClear"]),
-          e.isEmptyResultForSearchFilter ? (v(), U("div", Nl, [
-            g(n, {
-              el: e.BentoTypographyElement.SPAN
-            }, {
+          e.isEmptyResultForSearchFilter ? (b(), U("div", Ol, [
+            g(n, { el: "span" }, {
               default: m(() => [
-                N(L(e.$t("noFiltersMatchThisSearch")), 1)
+                V(k(e.$t("noFiltersMatchThisSearch")), 1)
               ]),
               _: 1
-            }, 8, ["el"])
-          ])) : Q("", !0),
-          e.activeFilters.length ? (v(), U("div", Ll, [
+            })
+          ])) : q("", !0),
+          e.activeFilters.length ? (b(), U("div", Vl, [
             g(n, {
               id: `active-filters-${e.allFiltersModalUniqueId}`,
               class: "b-all-filters-modal__filters-section-title",
-              el: e.BentoTypographyElement.SPAN,
-              variant: e.BentoTypographyVariant.CAPTION
+              el: "span",
+              variant: "caption"
             }, {
               default: m(() => [
-                N(L(e.$t("activeFilters")), 1)
+                V(k(e.$t("activeFilters")), 1)
               ]),
               _: 1
-            }, 8, ["id", "el", "variant"]),
-            V("ul", {
+            }, 8, ["id"]),
+            R("ul", {
               class: "b-all-filters-modal__filters-list",
               "aria-labelledby": `active-filters-${e.allFiltersModalUniqueId}`
             }, [
-              (v(!0), U(oe, null, se(e.activeFilters, (d) => (v(), U("li", {
-                key: `${d.label}-${d.field}`
+              (b(!0), U(ie, null, re(e.activeFilters, (u) => (b(), U("li", {
+                key: `${u.label}-${u.field}`
               }, [
-                g(r, {
+                g(d, {
                   ref_for: !0,
-                  ref: (h) => e.allFiltersModalFilterButtons[d.label] = h,
-                  label: d.label,
-                  "applied-filters-count": e.getFilterCount(d.label),
-                  "is-filter-open": e.selectedFilter.label === d.label,
-                  onClick: (h) => e.selectFilter(d.label, d.field)
+                  ref: (C) => e.allFiltersModalFilterButtons[u.label] = C,
+                  label: u.label,
+                  "applied-filters-count": e.getFilterCount(u.label),
+                  "is-filter-open": e.selectedFilter.label === u.label,
+                  onClick: (C) => e.selectFilter(u.label, u.field)
                 }, null, 8, ["label", "applied-filters-count", "is-filter-open", "onClick"])
               ]))), 128))
-            ], 8, Ml)
-          ])) : Q("", !0),
-          e.otherFilters.length ? (v(), U("div", wl, [
-            e.activeFilters.length ? (v(), S(n, {
+            ], 8, Nl)
+          ])) : q("", !0),
+          e.otherFilters.length ? (b(), U("div", wl, [
+            e.activeFilters.length ? (b(), S(n, {
               key: 0,
               id: `other-filters-${e.allFiltersModalUniqueId}`,
               class: "b-all-filters-modal__filters-section-title",
-              el: e.BentoTypographyElement.SPAN,
-              variant: e.BentoTypographyVariant.CAPTION
+              el: "span",
+              variant: "caption"
             }, {
               default: m(() => [
-                N(L(e.$t("otherFilters")), 1)
+                V(k(e.$t("otherFilters")), 1)
               ]),
               _: 1
-            }, 8, ["id", "el", "variant"])) : Q("", !0),
-            V("ul", {
+            }, 8, ["id"])) : q("", !0),
+            R("ul", {
               class: "b-all-filters-modal__filters-list",
               "aria-labelledby": `other-filters-${e.allFiltersModalUniqueId}`
             }, [
-              (v(!0), U(oe, null, se(e.otherFilters, (d) => (v(), U("li", {
-                key: `${d.label}-${d.field}`
+              (b(!0), U(ie, null, re(e.otherFilters, (u) => (b(), U("li", {
+                key: `${u.label}-${u.field}`
               }, [
-                g(r, {
+                g(d, {
                   ref_for: !0,
-                  ref: (h) => e.allFiltersModalFilterButtons[d.label] = h,
-                  label: d.label,
-                  "applied-filters-count": e.getFilterCount(d.label),
-                  "is-filter-open": e.selectedFilter.label === d.label,
-                  onClick: (h) => e.selectFilter(d.label, d.field)
+                  ref: (C) => e.allFiltersModalFilterButtons[u.label] = C,
+                  label: u.label,
+                  "applied-filters-count": e.getFilterCount(u.label),
+                  "is-filter-open": e.selectedFilter.label === u.label,
+                  onClick: (C) => e.selectFilter(u.label, u.field)
                 }, null, 8, ["label", "applied-filters-count", "is-filter-open", "onClick"])
               ]))), 128))
-            ], 8, ql)
-          ])) : Q("", !0)
+            ], 8, Ll)
+          ])) : q("", !0)
         ], 544)
       ]),
       "content-col-2": m(() => [
-        V("div", {
+        R("div", {
           class: "b-all-filters-modal__selected-filter-content",
-          onKeydown: t[2] || (t[2] = ae((...d) => e.onKeydownLeft && e.onKeydownLeft(...d), ["left"]))
+          onKeydown: t[2] || (t[2] = se((...u) => e.onKeydownLeft && e.onKeydownLeft(...u), ["left"]))
         }, [
-          V("div", Yl, [
+          R("div", Ml, [
             g(n, {
-              el: e.BentoTypographyElement.DIV,
-              variant: e.BentoTypographyVariant.TITLE,
+              el: "div",
+              variant: "title",
               medium: ""
             }, {
               default: m(() => [
-                N(L(e.selectedFilter.label), 1)
+                V(k(e.selectedFilter.label), 1)
               ]),
               _: 1
-            }, 8, ["el", "variant"]),
-            e.selectedFilter.description ? (v(), S(n, {
+            }),
+            e.selectedFilter.description ? (b(), S(n, {
               key: 0,
-              el: e.BentoTypographyElement.DIV,
-              variant: e.BentoTypographyVariant.BODY,
+              el: "div",
+              variant: "body",
               wide: ""
             }, {
               default: m(() => [
-                N(L(e.selectedFilter.description), 1)
+                V(k(e.selectedFilter.description), 1)
               ]),
               _: 1
-            }, 8, ["el", "variant"])) : Q("", !0)
+            })) : q("", !0)
           ]),
-          V("div", Kl, [
-            (v(), S(Fe(e.selectedFilter.type), {
+          R("div", ql, [
+            (b(), S(he(e.selectedFilter.type), {
               ref: "selectedFilterRef",
               key: e.selectedFilter.field,
               field: e.selectedFilter.field,
@@ -2015,25 +2043,48 @@ function jl(e, t, a, l, s, u) {
               onInput: e.updateFilter
             }, null, 40, ["field", "label", "options", "value", "default-value", "onInput"]))
           ]),
-          V("div", Hl, [
-            g(y, {
-              variant: e.BentoButtonVariant.SECONDARY,
+          R("div", Hl, [
+            g(c, {
+              variant: "secondary",
               disabled: !e.isClearButtonEnabled,
               onClick: e.clearFilter
             }, {
               default: m(() => [
-                N(L(e.$t("clear")), 1)
+                V(k(e.$t("clear")), 1)
               ]),
               _: 1
-            }, 8, ["variant", "disabled", "onClick"])
+            }, 8, ["disabled", "onClick"])
           ])
         ], 32)
       ]),
       _: 1
-    }, 8, ["is-open", "size", "actions", "onCloseModal"])
+    }, 8, ["is-open", "actions", "onCloseModal"])
   ]);
 }
-const zl = /* @__PURE__ */ k(Ol, [["render", jl], ["__scopeId", "data-v-c83c5109"]]), qe = {
+const jl = /* @__PURE__ */ O(kl, [["render", Kl], ["__scopeId", "data-v-d596ecc1"]]);
+let Me = 0;
+const Yl = {
+  beforeCreate() {
+    this.uuid = Me.toString(), Me += 1;
+  }
+}, zl = (e) => (Ke("data-v-35088f28"), e = e(), je(), e), Jl = { key: 0 }, Gl = /* @__PURE__ */ zl(() => /* @__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 Wl(e, t, a, l, s, i) {
+  return b(), U("svg", x({ role: "img" }, e.$attrs, {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    fill: "none"
+  }), [
+    e.$attrs["svg-title"] ? (b(), U("title", Jl, k(e.$attrs["svg-title"]), 1)) : q("", !0),
+    Gl
+  ], 16);
+}
+const Zl = /* @__PURE__ */ O(Yl, [["render", Wl], ["__scopeId", "data-v-35088f28"]]), qe = {
   "en-US": {
     clearAll: "Clear all",
     filtersHaveBeenCleared: "Filters have been cleared.",
@@ -2042,24 +2093,25 @@ const zl = /* @__PURE__ */ k(Ol, [["render", jl], ["__scopeId", "data-v-c83c5109
     resetAll: "Reset all",
     searchBar: "Search bar"
   }
-}, Gl = R({
+}, Ql = w({
   i18n: { messages: qe },
   name: "bento-filter-bar",
   components: {
-    AllFiltersModal: zl,
-    BentoButton: He,
-    BentoBooleanFilter: ut,
-    BentoDateFilter: lt,
-    BentoDateRangeFilter: nt,
-    BentoRangeFilter: dt,
-    BentoInputFilter: tt,
-    BentoSelectFilter: j,
-    BentoSelectAvatarFilter: at,
-    BentoSelectCountryFilter: st,
-    BentoSelectCurrencyFilter: ot,
-    BentoSelectPaymentMethodFilter: it,
-    BentoSelectTagFilter: rt,
-    BentoSearchBar: be
+    AllFiltersModal: jl,
+    FilterBarButton: Be,
+    BentoBooleanFilter: ct,
+    BentoDateFilter: at,
+    BentoDateRangeFilter: ot,
+    BentoRangeFilter: pt,
+    BentoInputFilter: nt,
+    BentoSelectFilter: z,
+    BentoSelectAvatarFilter: st,
+    BentoSelectCountryFilter: rt,
+    BentoSelectCurrencyFilter: it,
+    BentoSelectPaymentMethodFilter: ut,
+    BentoSelectTagFilter: dt,
+    BentoSearchBar: me,
+    RefreshIcon: Zl
   },
   props: {
     /**
@@ -2067,7 +2119,7 @@ const zl = /* @__PURE__ */ k(Ol, [["render", jl], ["__scopeId", "data-v-c83c5109
      * If the value is non-existant (null or undefined) the search bar won't be enabled.
      */
     searchTerm: {
-      type: be.props.value.type,
+      type: me.props.value.type,
       default: void 0
     },
     /**
@@ -2096,146 +2148,145 @@ const zl = /* @__PURE__ */ k(Ol, [["render", jl], ["__scopeId", "data-v-c83c5109
     }
   },
   emits: [
-    x.INPUT,
-    ne.CLEAR,
-    ne.INPUT,
-    ne.UPDATE
+    te.INPUT,
+    oe.CLEAR,
+    oe.INPUT,
+    oe.UPDATE
   ],
   setup(e, { emit: t }) {
-    const { t: a } = le({ messages: qe }), l = Rt(), s = f(() => a("searchBar")), u = f(() => e.value.some(({ visible: _ }) => _ != null) ? e.value.some(({ visible: _ }) => !_) : !1), o = f(
-      () => e.value.filter(({ defaultValue: F }) => F !== void 0)
-    ), i = f(() => e.value.some(({ visible: _ }) => _ != null) ? e.value.filter(({ defaultValue: _, visible: I }) => _ === void 0 && I) : e.value.filter(({ defaultValue: _ }) => _ === void 0)), n = f(() => e.searchTerm != null), r = f(
-      () => e.value.filter(({ defaultValue: F }) => F == null).some(({ value: F }) => F != null)
-    ), y = f(() => o.value.length === 0 && r.value), B = f(() => o.value.length === 0 ? !1 : !e.value.filter(({ defaultValue: _ }) => _ !== void 0 || _ !== null).every(({ value: _, defaultValue: I }) => JSON.stringify(_) === JSON.stringify(I)) || r.value);
+    const { t: a } = ae({ messages: qe }), l = It(), s = f(() => a("searchBar")), i = f(() => e.value.some(({ visible: F }) => F != null) ? e.value.some(({ visible: F }) => !F) : !1), o = f(
+      () => e.value.filter(({ defaultValue: _ }) => _ !== void 0)
+    ), r = f(() => e.value.some(({ visible: F }) => F != null) ? e.value.filter(({ defaultValue: F, visible: D }) => F === void 0 && D) : e.value.filter(({ defaultValue: F }) => F === void 0)), n = f(() => e.searchTerm != null), d = f(
+      () => e.value.filter(({ defaultValue: _ }) => _ == null).some(({ value: _ }) => _ != null)
+    ), c = f(() => o.value.length === 0 && d.value), h = f(() => o.value.length === 0 ? !1 : !e.value.filter(({ defaultValue: F }) => F !== void 0 || F !== null).every(({ value: F, defaultValue: D }) => JSON.stringify(F) === JSON.stringify(D)) || d.value);
     return {
       // Values
-      hasHiddenFilters: u,
-      isClearAllVisible: y,
+      hasHiddenFilters: i,
+      isClearAllVisible: c,
       isSearchBarEnabled: n,
       searchBarAriaLabel: s,
       persistentFilters: o,
-      regularFilters: i,
-      isResetAllVisible: B,
-      // Enums
-      BentoButtonVariant: he,
+      regularFilters: r,
+      isResetAllVisible: h,
       // Events
-      updateAllFilters: (F) => {
-        t(x.INPUT, F);
+      updateAllFilters: (_) => {
+        t(te.INPUT, _);
       },
-      updateFilterHandler: (F) => {
-        const _ = e.value.findIndex((E) => E.field === F.field), I = e.value.slice();
-        I[_].value = F.value, t(x.INPUT, I);
+      updateFilterHandler: (_) => {
+        const F = e.value.findIndex((P) => P.field === _.field), D = e.value.slice();
+        D[F].value = _.value, t(te.INPUT, D);
       },
       clearAllFilters: () => {
-        const F = e.value.slice(), _ = e.value.map(({ value: I, ...E }) => ({
-          ...E,
+        const _ = e.value.slice(), F = e.value.map(({ value: D, ...P }) => ({
+          ...P,
           value: void 0
         }));
         l.addToast({
           text: a("filtersHaveBeenCleared"),
           action: {
-            handler: () => t(x.INPUT, F),
+            handler: () => t(te.INPUT, _),
             text: a("undo")
           }
-        }), t(x.INPUT, _);
+        }), t(te.INPUT, F);
       },
       onSearchbarClear: () => {
-        t(ne.CLEAR);
+        t(oe.CLEAR);
       },
-      onSearchbarInput: (F) => {
-        t(ne.INPUT, F), t(ne.UPDATE, F);
+      onSearchbarInput: (_) => {
+        t(oe.INPUT, _), t(oe.UPDATE, _);
       },
       resetAllFilters: () => {
-        const F = e.value.slice(), _ = e.value.map(({ defaultValue: I, ...E }) => ({
-          ...E,
-          defaultValue: I,
-          value: I
+        const _ = e.value.slice(), F = e.value.map(({ defaultValue: D, ...P }) => ({
+          ...P,
+          defaultValue: D,
+          value: D
         }));
         l.addToast({
           text: a("filtersHaveBeenReset"),
           action: {
-            handler: () => t(x.INPUT, F),
+            handler: () => t(te.INPUT, _),
             text: a("undo")
           }
-        }), t(x.INPUT, _);
+        }), t(te.INPUT, F);
       }
     };
   }
 });
-const Jl = { class: "b-filter-bar" }, Wl = { class: "b-filter-bar__filters-wrapper" }, Ql = {
+const Xl = { class: "b-filter-bar" }, xl = { class: "b-filter-bar__filters-wrapper" }, en = {
   key: 0,
   class: "b-filter-bar__persistent-filters"
-}, Xl = { class: "b-filter-bar__regular-filters" };
-function Zl(e, t, a, l, s, u) {
-  const o = b("all-filters-modal"), i = b("bento-button"), n = b("bento-search-bar");
-  return v(), U("div", Jl, [
-    V("div", Wl, [
-      e.persistentFilters.length ? (v(), U("div", Ql, [
-        (v(!0), U(oe, null, se(e.persistentFilters, (r) => (v(), S(Fe(r.type), {
-          key: r.field,
-          field: r.field,
-          label: r.label,
-          options: r.options,
-          value: r.value,
-          "default-value": r.defaultValue,
+}, tn = { class: "b-filter-bar__regular-filters" };
+function ln(e, t, a, l, s, i) {
+  const o = y("all-filters-modal"), r = y("refresh-icon"), n = y("filter-bar-button"), d = y("bento-search-bar");
+  return b(), U("div", Xl, [
+    R("div", xl, [
+      e.persistentFilters.length ? (b(), U("div", en, [
+        (b(!0), U(ie, null, re(e.persistentFilters, (c) => (b(), S(he(c.type), {
+          key: c.field,
+          field: c.field,
+          label: c.label,
+          options: c.options,
+          value: c.value,
+          "default-value": c.defaultValue,
           onUpdate: e.updateFilterHandler
         }, null, 40, ["field", "label", "options", "value", "default-value", "onUpdate"]))), 128))
-      ])) : Q("", !0),
-      V("div", Xl, [
-        (v(!0), U(oe, null, se(e.regularFilters, (r) => (v(), S(Fe(r.type), {
-          key: r.field,
-          field: r.field,
-          label: r.label,
-          options: r.options,
-          value: r.value,
+      ])) : q("", !0),
+      R("div", tn, [
+        (b(!0), U(ie, null, re(e.regularFilters, (c) => (b(), S(he(c.type), {
+          key: c.field,
+          field: c.field,
+          label: c.label,
+          options: c.options,
+          value: c.value,
           onUpdate: e.updateFilterHandler
         }, null, 40, ["field", "label", "options", "value", "onUpdate"]))), 128)),
-        e.hasHiddenFilters ? (v(), S(o, {
+        e.hasHiddenFilters ? (b(), S(o, {
           key: 0,
           value: e.value,
           onInput: e.updateAllFilters
-        }, null, 8, ["value", "onInput"])) : Q("", !0)
+        }, null, 8, ["value", "onInput"])) : q("", !0)
       ]),
-      me(g(i, {
-        class: "b-filter-bar__clear-all",
-        variant: e.BentoButtonVariant.TERTIARY,
-        onClick: e.clearAllFilters
-      }, {
+      _e(g(n, { onClick: e.clearAllFilters }, {
+        iconLeft: m(() => [
+          g(r, { "aria-hidden": "true" })
+        ]),
         default: m(() => [
-          N(L(e.$t("clearAll")), 1)
+          V(k(e.$t("clearAll")) + " ", 1)
         ]),
         _: 1
-      }, 8, ["variant", "onClick"]), [
-        [Ee, e.isClearAllVisible]
+      }, 8, ["onClick"]), [
+        [Te, e.isClearAllVisible]
       ]),
-      me(g(i, {
+      _e(g(n, {
         class: "b-filter-bar__reset-all",
-        variant: e.BentoButtonVariant.TERTIARY,
         onClick: e.resetAllFilters
       }, {
+        iconLeft: m(() => [
+          g(r, { "aria-hidden": "true" })
+        ]),
         default: m(() => [
-          N(L(e.$t("resetAll")), 1)
+          V(k(e.$t("resetAll")) + " ", 1)
         ]),
         _: 1
-      }, 8, ["variant", "onClick"]), [
-        [Ee, e.isResetAllVisible]
+      }, 8, ["onClick"]), [
+        [Te, e.isResetAllVisible]
       ])
     ]),
-    e.isSearchBarEnabled ? (v(), S(n, {
+    e.isSearchBarEnabled ? (b(), S(d, {
       key: 0,
       class: "b-filter-bar__search-bar",
       "input-field-aria-label": e.searchBarAriaLabel,
       value: e.searchTerm,
       onInput: e.onSearchbarInput,
       onClear: e.onSearchbarClear
-    }, null, 8, ["input-field-aria-label", "value", "onInput", "onClear"])) : Q("", !0)
+    }, null, 8, ["input-field-aria-label", "value", "onInput", "onClear"])) : q("", !0)
   ]);
 }
-const Vn = /* @__PURE__ */ k(Gl, [["render", Zl], ["__scopeId", "data-v-37437d66"]]);
+const qn = /* @__PURE__ */ O(Ql, [["render", ln], ["__scopeId", "data-v-11775cf0"]]);
 export {
-  Vn as BentoFilterBar,
-  x as BentoFilterBarEvent,
-  c as BentoFilterEvent,
-  H as BentoFilterItemType
+  qn as BentoFilterBar,
+  te as BentoFilterBarEvent,
+  v as BentoFilterEvent,
+  Y as BentoFilterItemType
 };
 //# sourceMappingURL=filter-bar.js.map