@adyen/bento-vue2 1.3.0 → 1.4.0

package/dist/filter-bar.js

@@ -1,48 +1,49 @@
-import { n as T } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
-import { defineComponent as E, computed as i, ref as A, watch as Z, toRef as P, onBeforeUpdate as te, nextTick as _e, reactive as be, toRefs as Me, provide as we, onMounted as qe } from "vue";
-import { a as le, B as ve } from "./chunks/button.d0c9527d.js";
-import { BentoPopover as ue, BentoPopoverPositions as Ye } from "./popover.js";
-import { u as Y } from "./chunks/i18n.155748d6.js";
+import { n as A } from "./chunks/_plugin-vue2_normalizer.71e2aa87.js";
+import { defineComponent as P, useSlots as Le, useAttrs as we, computed as r, ref as D, watch as Z, toRef as E, onBeforeUpdate as le, reactive as _e, toRefs as Me, provide as qe, nextTick as He, onMounted as je } from "vue";
+import { BentoPopover as re } from "./popover.js";
+import { u as H } from "./chunks/i18n.155748d6.js";
 import { g as ae } from "./chunks/unique-id.a2a2b458.js";
-import { B as ne, a as se, b as oe, d as He } from "./chunks/index.56858f4e.js";
-import { u as je } from "./chunks/aria-label.ac9651a5.js";
-import { u as ze } from "./chunks/use-has-slot.068222e6.js";
-import { B as Ge, a as ce } from "./chunks/base-button.98379576.js";
-import { g as Je } from "./chunks/get-slot-text.e5c766d0.js";
-import { a as Ke, C as We } from "./chunks/chevron-down.b851a6da.js";
-import { B as Qe } from "./chunks/tooltip.2aff4fa6.js";
-import { B as Xe } from "./chunks/directive.0408e565.js";
-import { c as ye, B as Ze } from "./chunks/button-actions.bd397c79.js";
-import { BentoRadioGroup as et } from "./radio-group.js";
-import { BentoInputField as me, BentoInputFieldType as tt } from "./input-field.js";
-import { BentoSearchBar as X, BentoSearchBarEvent as H } from "./search-bar.js";
-import { u as lt } from "./chunks/toastController.0e01443d.js";
-import { BentoModal as at, BentoModalEvent as nt, BentoModalSize as st } from "./modal.js";
-import { B as ot, u as Fe } from "./chunks/dropdown.c05678d0.js";
-import { g as rt } from "./chunks/index.133e4da0.js";
-import { BentoDivider as Be } from "./divider.js";
-import { BentoDatePicker as it } from "./date-picker.js";
-import { f as K } from "./chunks/index.73d50fa6.js";
-import { e as q, d as he, f as Ce } from "./chunks/index.f55fdc32.js";
-import { C as ut } from "./chunks/calendar.0ae43a96.js";
-import { B as ct, D as dt } from "./chunks/index.10aaf539.js";
-import { D as de } from "./chunks/date-input.9186a0bf.js";
-import { B as ft } from "./chunks/listbox.116ed0c1.js";
-import { B as pt, L as ge } from "./chunks/listbox-option-tag.8d6cccac.js";
-import { BentoCountry as _t, BentoCountryVariant as Se } from "./country.js";
-import { u as bt } from "./chunks/useCountryItems.5d7b436e.js";
-import { BentoPaymentMethod as vt } from "./payment-method.js";
-import "./assets/index21.css";
-var r = /* @__PURE__ */ ((t) => (t.INPUT = "input", t.UPDATE = "update", t))(r || {}), M = /* @__PURE__ */ ((t) => (t.INPUT = "input", t))(M || {}), R = /* @__PURE__ */ ((t) => (t.INPUT = "BentoInputFilter", t.BOOLEAN = "BentoBooleanFilter", t.RANGE = "BentoRangeFilter", t.SELECT = "BentoSelectFilter", t.SELECT_AVATAR = "BentoSelectAvatarFilter", t.SELECT_COUNTRY = "BentoSelectCountryFilter", t.SELECT_CURRENCY = "BentoSelectCurrencyFilter", t.SELECT_PAYMENT_METHOD = "BentoSelectPaymentMethodFilter", t.SELECT_TAG = "BentoSelectTagFilter", t.DATE = "BentoDateFilter", t.DATE_RANGE = "BentoDateRangeFilter", t))(R || {});
-const yt = E({
-  name: "base-filter-button",
-  components: { BaseButton: Ge, BentoTypography: ne, ChevronUpIcon: Ke, ChevronDownIcon: We },
+import { B as ee, d as Ye } from "./chunks/index.45295dd3.js";
+import { u as pe } from "./chunks/aria-label.ac9651a5.js";
+import { B as be, a as ie } from "./chunks/base-button.bd8fa976.js";
+import { g as ve } from "./chunks/get-slot-text.c1114034.js";
+import { u as ye } from "./chunks/use-has-slot.6052d56a.js";
+import { a as me, C as Fe } from "./chunks/chevron-up.674ec2e5.js";
+import { B as ze } from "./chunks/tooltip.a47ace87.js";
+import { B as Je } from "./chunks/directive.0408e565.js";
+import { BentoRadioGroup as Ke } from "./radio-group.js";
+import { BentoInputField as he } from "./input-field.js";
+import { BentoSearchBar as X, BentoSearchBarEvent as j } from "./search-bar.js";
+import { u as Ge } from "./chunks/toastController.0e01443d.js";
+import { BentoModal as We } from "./modal.js";
+import { e as Ze } from "./chunks/base-modal.a365f260.js";
+import { a as Qe } from "./chunks/button.fb307df3.js";
+import { B as Xe, u as Ce } from "./chunks/dropdown.fd93f0ce.js";
+import { g as et } from "./chunks/index.c85a1ab9.js";
+import { BentoDivider as ge } from "./divider.js";
+import { BentoDatePicker as tt } from "./date-picker.js";
+import { f as G } from "./chunks/index.9902cae4.js";
+import { e as q, d as Be, f as Se } from "./chunks/index.f55fdc32.js";
+import { C as lt } from "./chunks/calendar.79ea42c1.js";
+import { B as at, D as nt } from "./chunks/index.88ff49c2.js";
+import { BentoButtonActions as st } from "./button.js";
+import { D as ue } from "./chunks/date-input.9186a0bf.js";
+import { B as ot } from "./chunks/listbox.e792d2d6.js";
+import { B as rt, L as Ae } from "./chunks/listbox-option-tag.ec42431b.js";
+import { BentoCountry as it } from "./country.js";
+import { u as ut } from "./chunks/useCountryItems.5d7b436e.js";
+import { BentoPaymentMethod as ct } from "./payment-method.js";
+import "./assets/index15.css";
+var i = /* @__PURE__ */ ((t) => (t.INPUT = "input", t.UPDATE = "update", t))(i || {}), w = /* @__PURE__ */ ((t) => (t.INPUT = "input", t))(w || {}), k = /* @__PURE__ */ ((t) => (t.INPUT = "BentoInputFilter", t.BOOLEAN = "BentoBooleanFilter", t.RANGE = "BentoRangeFilter", t.SELECT = "BentoSelectFilter", t.SELECT_AVATAR = "BentoSelectAvatarFilter", t.SELECT_COUNTRY = "BentoSelectCountryFilter", t.SELECT_CURRENCY = "BentoSelectCurrencyFilter", t.SELECT_PAYMENT_METHOD = "BentoSelectPaymentMethodFilter", t.SELECT_TAG = "BentoSelectTagFilter", t.DATE = "BentoDateFilter", t.DATE_RANGE = "BentoDateRangeFilter", t))(k || {});
+const dt = {}, ft = /* @__PURE__ */ P({
+  ...dt,
+  __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,119 +56,43 @@ const yt = E({
      * 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: [ce.CLICK],
-  setup(t, { slots: e, emit: l, attrs: a }) {
-    const n = i(() => e.default ? Je(e)("default") : null), s = je({ ariaLabel: n }), u = A(null), d = i(() => {
-      var p;
+  emits: ["click"],
+  setup(t, { emit: e }) {
+    const l = t, a = Le(), n = we(), s = ye(a), u = r(() => a.default ? ve(a)("default") : null), d = pe({ ariaLabel: u }), c = D(null), f = r(() => {
+      var v;
       return {
-        "aria-controls": (p = a["aria-controls"]) == null ? void 0 : p.toString()
+        "aria-controls": (v = n["aria-controls"]) == null ? void 0 : v.toString()
       };
-    }), c = i(() => ({
-      ["b-base-filter-button--with-chevron"]: t.hasChevron,
-      ["b-base-filter-button--filter-open"]: t.isFilterOpen
+    }), p = r(() => ({
+      "b-filter-bar-button--filter-open": l.isFilterOpen,
+      "b-filter-bar-button--with-counter": l.appliedFiltersCount,
+      "b-filter-bar-button--with-chevron": l.hasChevron
     }));
-    return {
-      // Enums
-      BentoTypographyElement: se,
-      BentoTypographyVariant: oe,
-      // Values
-      ariaAttributes: d,
-      computedAriaLabel: s,
-      conditionalClasses: c,
-      // Methods
-      onClickButton: () => {
-        t.disabled || l(ce.CLICK);
-      },
-      hasSlot: ze(e),
-      // Refs
-      baseFilterButtonRef: u
-    };
+    return { __sfc: !0, props: l, emit: e, slots: a, attrs: n, hasSlot: s, labelSlot: u, computedAriaLabel: d, filterBarButtonRef: c, ariaAttributes: f, conditionalClasses: p, onClickButton: (v) => {
+      l.disabled || e("click", v);
+    }, BentoTypography: ee, BaseButton: be, ChevronUpIcon: me, ChevronDownIcon: Fe };
   }
 });
-var mt = function() {
-  var e = this, l = e._self._c;
-  return e._self._setupProxy, l("base-button", { ref: "baseFilterButtonRef", staticClass: "b-base-filter-button", class: e.conditionalClasses, attrs: { disabled: e.disabled, "aria-label": e.computedAriaLabel, "aria-controls": e.ariaAttributes["aria-controls"], type: "button" }, on: { click: e.onClickButton }, scopedSlots: e._u([e.hasChevron ? { key: "iconRight", fn: function() {
-    return [e.isFilterOpen ? l("chevron-up-icon", { attrs: { "aria-hidden": "true" } }) : l("chevron-down-icon", { attrs: { "aria-hidden": "true" } })];
-  }, proxy: !0 } : null], null, !0) }, [l("div", { staticClass: "b-base-filter-button__default-container" }, [l("bento-typography", { staticClass: "b-base-filter-button__label", attrs: { el: e.BentoTypographyElement.SPAN, variant: e.BentoTypographyVariant.BODY, stronger: e.bold } }, [e._t("default")], 2), e.amountAppliedValues && !e.hasChevron ? l("div", { staticClass: "b-base-filter-button__counter-wrapper" }, [l("bento-typography", { staticClass: "b-base-filter-button__counter", attrs: { el: e.BentoTypographyElement.SPAN, variant: e.BentoTypographyVariant.BODY, stronger: "" } }, [e._v(" " + e._s(e.amountAppliedValues) + " ")])], 1) : e._e()], 1)]);
-}, Ft = [], Bt = /* @__PURE__ */ T(
-  yt,
-  mt,
-  Ft,
+var _t = function() {
+  var e = this, l = e._self._c, a = e._self._setupProxy;
+  return l(a.BaseButton, { ref: "filterBarButtonRef", staticClass: "b-filter-bar-button", class: a.conditionalClasses, attrs: { disabled: e.disabled, "aria-label": a.computedAriaLabel, "aria-controls": a.ariaAttributes["aria-controls"], type: "button" }, on: { click: a.onClickButton }, scopedSlots: e._u([{ key: "iconRight", fn: function() {
+    return [e.appliedFiltersCount && !e.hasChevron ? l(a.BentoTypography, { staticClass: "b-filter-bar-button__counter", attrs: { el: "span", variant: "body", stronger: "" } }, [e._v(" " + e._s(e.appliedFiltersCount) + " ")]) : e._e(), e.hasChevron ? l("div", { staticClass: "b-filter-bar-button__chevron" }, [e.isFilterOpen ? l(a.ChevronUpIcon, { attrs: { "aria-hidden": "true" } }) : l(a.ChevronDownIcon, { attrs: { "aria-hidden": "true" } })], 1) : e._e()];
+  }, proxy: !0 }]) }, [l("div", { staticClass: "b-filter-bar-button__container" }, [a.hasSlot("iconLeft") ? [e._t("iconLeft")] : e._e(), l(a.BentoTypography, { staticClass: "b-filter-bar-button__label", attrs: { el: "span", variant: "body", stronger: "" } }, [e._t("default")], 2)], 2)]);
+}, pt = [], bt = /* @__PURE__ */ A(
+  ft,
+  _t,
+  pt,
   !1,
   null,
-  "6d93f3cb",
+  "671d00fd",
   null,
   null
 );
-const Ae = Bt.exports, ht = E({
-  name: "filter-bar-filter-button",
-  components: { BaseFilterButton: Ae },
-  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(t, { emit: e }) {
-    const l = i(() => ({
-      ["b-filter-bar-filter-button--with-counter"]: t.appliedFiltersCount,
-      ["b-filter-bar-filter-button--filter-open"]: t.isFilterOpen
-    })), a = A(null);
-    return Z(
-      () => t.isFilterOpen,
-      (s, u) => {
-        var d, c;
-        !s && u && (c = (d = a.value) == null ? void 0 : d.baseFilterButtonRef) != null && c.bentoBaseButtonRef && a.value.baseFilterButtonRef.bentoBaseButtonRef.focus();
-      }
-    ), {
-      conditionalClasses: l,
-      // Refs
-      filterBarButtonRef: a,
-      onClick: () => {
-        e("click");
-      }
-    };
-  }
-});
-var Ct = function() {
-  var e = this, l = e._self._c;
-  return e._self._setupProxy, l("base-filter-button", { ref: "filterBarButtonRef", staticClass: "b-filter-bar-filter-button", class: e.conditionalClasses, attrs: { bold: !0, "amount-applied-values": e.appliedFiltersCount, "has-chevron": e.hasChevron, "is-filter-open": e.isFilterOpen, disabled: e.disabled }, on: { click: e.onClick } }, [e._v(" " + e._s(e.label) + " ")]);
-}, gt = [], St = /* @__PURE__ */ T(
-  ht,
-  Ct,
-  gt,
-  !1,
-  null,
-  "34783b9b",
-  null,
-  null
-);
-const Te = St.exports;
-var x = /* @__PURE__ */ ((t) => (t.APPLY = "apply", t.CLEAR = "clear", t.OPEN = "open", t.CLOSE = "close", t.RESET = "reset", t))(x || {});
-const At = {
+const ne = bt.exports;
+var I = /* @__PURE__ */ ((t) => (t.APPLY = "apply", t.CLEAR = "clear", t.OPEN = "open", t.CLOSE = "close", t.RESET = "reset", t))(I || {});
+const vt = {
   "en-US": {
     clear: "Clear",
     apply: "Apply",
@@ -193,14 +118,14 @@ const At = {
     clear: "Borrar",
     apply: "Aplicar"
   }
-}, Tt = E({
-  i18n: { messages: At },
+}, yt = P({
+  i18n: { messages: vt },
   name: "bento-base-filter",
   components: {
-    FilterBarFilterButton: Te,
-    BentoPopover: ue
+    BentoPopover: re,
+    FilterBarButton: ne
   },
-  directives: { BentoClickOutsideDirective: Xe },
+  directives: { BentoClickOutsideDirective: Je },
   props: {
     /**
      * Total count of applied filters
@@ -247,45 +172,50 @@ const At = {
     /**
      * Sets the size of the container to fit its content
      */
-    fitContent: ue.props.fitContent
+    fitContent: re.props.fitContent
   },
   emits: [
-    x.APPLY,
-    x.CLEAR,
-    x.OPEN,
-    x.CLOSE,
-    x.RESET
+    I.APPLY,
+    I.CLEAR,
+    I.OPEN,
+    I.CLOSE,
+    I.RESET
   ],
   setup(t, { emit: e }) {
-    const { t: l } = Y(), a = ae("base-filter-popover"), n = A(!1), s = A(null), u = i(() => t.defaultValue !== null), d = () => {
-      n.value = !1, e(x.CLOSE);
+    const { t: l } = H(), a = ae("base-filter-popover"), n = D(!1), s = D(null), u = r(() => t.defaultValue !== null), d = () => {
+      n.value = !1, e(I.CLOSE);
     }, c = () => {
-      d(), u.value ? e(x.RESET) : e(x.CLEAR);
+      d(), u.value ? e(I.RESET) : e(I.CLEAR);
     }, f = () => d(), p = () => {
-      n.value ? d() : (n.value = !0, e(x.OPEN));
+      n.value ? d() : (n.value = !0, e(I.OPEN));
     }, y = () => {
-      d(), e(x.APPLY);
-    };
-    return {
+      d(), e(I.APPLY);
+    }, v = r(() => [
+      {
+        title: l("apply"),
+        event: y,
+        disabled: t.disableApplyButton
+      },
+      {
+        title: u.value ? l("reset") : l("clear"),
+        event: c,
+        disabled: t.disableSecondaryButton
+      }
+    ]);
+    return Z(
+      () => n.value,
+      (g, S) => {
+        var _, b;
+        !g && S && (b = (_ = s.value) == null ? void 0 : _.filterBarButtonRef) != null && b.bentoBaseButtonRef && s.value.filterBarButtonRef.bentoBaseButtonRef.focus();
+      }
+    ), {
       // Values
-      actions: i(() => [
-        {
-          title: l("apply"),
-          event: y,
-          disabled: t.disableApplyButton
-        },
-        {
-          title: u.value ? l("reset") : l("clear"),
-          event: c,
-          disabled: t.disableSecondaryButton
-        }
-      ]),
+      actions: v,
       popoverId: a,
       isFilterOpen: n,
       isPersistentFilter: u,
       // Enums
-      BentoPopoverPositions: Ye,
-      BentoTooltipPosition: Qe,
+      BentoTooltipPosition: ze,
       // Events
       onClickFilter: p,
       onClickApply: y,
@@ -293,49 +223,46 @@ const At = {
       onClickOutside: f,
       closePopover: d,
       // Refs
-      filterButtonRef: s,
-      // Enums
-      BentoButtonVariant: le,
-      BentoButtonActionsLayout: ye
+      filterButtonRef: s
     };
   }
 });
-var Et = function() {
+var mt = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, e.onlySlot ? l("div", [e._t("default")], 2) : l("div", { directives: [{ name: "bento-click-outside-directive", rawName: "v-bento-click-outside-directive", value: e.onClickOutside, expression: "onClickOutside" }], staticClass: "b-base-filter", on: { keydown: function(a) {
     return !a.type.indexOf("key") && e._k(a.keyCode, "esc", 27, a.key, ["Esc", "Escape"]) ? null : e.closePopover.apply(null, arguments);
-  } } }, [l("filter-bar-filter-button", { ref: "filterButtonRef", attrs: { "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 }, on: { click: e.onClickFilter } }), e.filterButtonRef ? l("bento-popover", { staticClass: "b-base-filter__popover", attrs: { id: e.popoverId, divider: "", open: e.isFilterOpen, actions: e.controlled ? null : e.actions, "actions-layout": e.BentoButtonActionsLayout.SPACE_BETWEEN, "target-element": e.filterButtonRef, title: e.controlled ? null : e.label, "fit-content": e.fitContent, position: e.BentoPopoverPositions.BOTTOM_START, "without-space": e.controlled } }, [e._t("default")], 2) : e._e()], 1);
-}, Dt = [], Pt = /* @__PURE__ */ T(
-  Tt,
-  Et,
-  Dt,
+  } } }, [l("filter-bar-button", { ref: "filterButtonRef", attrs: { "aria-controls": e.isFilterOpen ? e.popoverId : null, "has-chevron": e.isPersistentFilter, "is-filter-open": e.isFilterOpen, "applied-filters-count": e.appliedFiltersCount }, on: { click: e.onClickFilter } }, [e._v(" " + e._s(e.buttonLabel || e.label) + " ")]), e.filterButtonRef ? l("bento-popover", { staticClass: "b-base-filter__popover", attrs: { id: e.popoverId, divider: "", open: e.isFilterOpen, actions: e.controlled ? null : e.actions, "actions-layout": "space-between", "target-element": e.filterButtonRef, title: e.controlled ? null : e.label, "fit-content": e.fitContent, position: "bottom-start", "without-space": e.controlled } }, [e._t("default")], 2) : e._e()], 1);
+}, Ft = [], ht = /* @__PURE__ */ A(
+  yt,
+  mt,
+  Ft,
   !1,
   null,
-  "7d79ea3c",
+  "58d123e2",
   null,
   null
 );
-const j = Pt.exports, Ut = (t) => t instanceof Array, fe = (t) => Ut(t) ? t.length === 0 || t.every((e) => e === "") : !t, pe = (t, e) => JSON.stringify(t) === JSON.stringify(e), z = (t, e) => {
-  const l = A(t.value);
+const Y = ht.exports, Ct = (t) => t instanceof Array, ce = (t) => Ct(t) ? t.length === 0 || t.every((e) => e === "") : !t, de = (t, e) => JSON.stringify(t) === JSON.stringify(e), z = (t, e) => {
+  const l = D(t.value);
   Z(
     () => t.value,
     () => {
       l.value = t.value;
     }
   );
-  const a = i(() => fe(t.value)), n = i(
-    () => e.value !== null ? pe(e.value, t.value) : a.value
-  ), s = i(() => pe(l.value, t.value) || fe(l.value) && a.value);
+  const a = r(() => ce(t.value)), n = r(
+    () => e.value !== null ? de(e.value, t.value) : a.value
+  ), s = r(() => de(l.value, t.value) || ce(l.value) && a.value);
   return {
     internalFilterValue: l,
     isSecondaryButtonDisabled: n,
     isApplyButtonDisabled: s
   };
-}, W = (t, e) => (t == null ? void 0 : t.length) > e ? `${t.slice(0, e)}...` : t, Rt = E({
+}, W = (t, e) => (t == null ? void 0 : t.length) > e ? `${t.slice(0, e)}...` : t, gt = P({
   name: "bento-input-filter",
   components: {
-    BentoBaseFilter: j,
-    BentoInputField: me
+    BentoBaseFilter: Y,
+    BentoInputField: he
   },
   props: {
     /**
@@ -361,21 +288,24 @@ const j = Pt.exports, Ut = (t) => t instanceof Array, fe = (t) => Ut(t) ? t.leng
      */
     onlySlot: { type: Boolean, default: !1 }
   },
-  emits: [r.INPUT, r.UPDATE],
+  emits: [i.INPUT, i.UPDATE],
   setup(t, { emit: e }) {
-    const l = A(null), { internalFilterValue: a, isSecondaryButtonDisabled: n, isApplyButtonDisabled: s } = z(
-      P(t, "value"),
-      P(t, "defaultValue")
-    ), u = i(() => t.defaultValue === null ? t.label : W(t.value, 18)), d = i(() => t.value != null ? 1 : null), c = i(() => ({
+    const l = D(null), { internalFilterValue: a, isSecondaryButtonDisabled: n, isApplyButtonDisabled: s } = z(
+      E(t, "value"),
+      E(t, "defaultValue")
+    ), u = r(() => t.defaultValue === null ? t.label : W(t.value, 18)), d = r(() => t.value != null ? 1 : null), c = r(() => ({
       ["b-input-filter--only-slot"]: t.onlySlot
     }));
-    te(() => {
+    le(() => {
       a.value === "" && (a.value = null);
+    }), Z(l, () => {
+      var _;
+      (_ = l.value) == null || _.focusInput();
     });
     const f = () => {
-      a.value = t.value, _e(() => l.value.focusInput());
+      a.value = t.value;
     }, p = () => {
-      !a.value && t.defaultValue !== null && (a.value = t.defaultValue), e(r.UPDATE, { ...t, value: a.value });
+      !a.value && t.defaultValue !== null && (a.value = t.defaultValue), e(i.UPDATE, { ...t, value: a.value });
     };
     return {
       // Values
@@ -393,37 +323,38 @@ const j = Pt.exports, Ut = (t) => t instanceof Array, fe = (t) => Ut(t) ? t.leng
         a.value = null, p();
       },
       openFilter: f,
-      resetFilter: () => e(r.UPDATE, { ...t, value: t.defaultValue }),
+      resetFilter: () => e(i.UPDATE, { ...t, value: t.defaultValue }),
       onInput: () => {
-        e(r.INPUT, { ...t, value: a.value });
+        e(i.INPUT, { ...t, value: a.value });
+      },
+      setInternalFilterValue: (_) => {
+        a.value = _;
       }
     };
   }
 });
-var It = function() {
+var Bt = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("bento-base-filter", e._b({ attrs: { "applied-filters-count": e.appliedFiltersCount, "disable-apply-button": e.isApplyButtonDisabled, "disable-secondary-button": e.isSecondaryButtonDisabled, "button-label": e.buttonLabel, "only-slot": e.onlySlot }, on: { apply: e.updateFilter, clear: e.clearFilter, open: e.openFilter, reset: e.resetFilter } }, "bento-base-filter", e.$props, !1), [l("div", { staticClass: "b-input-filter", class: e.conditionalClasses, on: { keydown: function(a) {
     return !a.type.indexOf("key") && e._k(a.keyCode, "enter", 13, a.key, "Enter") ? null : e.updateFilter.apply(null, arguments);
-  }, input: e.onInput } }, [l("bento-input-field", { ref: "inputTextRef", attrs: { value: e.internalFilterValue }, on: { input: function(a) {
-    e.internalFilterValue = a;
-  } } })], 1)]);
-}, kt = [], $t = /* @__PURE__ */ T(
-  Rt,
-  It,
-  kt,
+  }, input: e.onInput } }, [l("bento-input-field", { ref: "inputTextRef", attrs: { value: e.internalFilterValue }, on: { input: e.setInternalFilterValue } })], 1)]);
+}, St = [], At = /* @__PURE__ */ A(
+  gt,
+  Bt,
+  St,
   !1,
   null,
-  "c8acc871",
+  "cd9a0583",
   null,
   null
 );
-const Ee = $t.exports, xt = E({
+const Te = At.exports, Tt = P({
   name: "bento-date-filter",
   components: {
-    BentoBaseFilter: j,
-    BentoDatePicker: it,
-    BentoDivider: Be,
-    Calendar: ut
+    BentoBaseFilter: Y,
+    BentoDatePicker: tt,
+    BentoDivider: ge,
+    Calendar: lt
   },
   props: {
     isDateInput: { type: Boolean, default: !0 },
@@ -460,25 +391,25 @@ const Ee = $t.exports, xt = E({
      */
     value: { type: Date, default: void 0 }
   },
-  emits: [r.INPUT, r.UPDATE],
+  emits: [i.INPUT, i.UPDATE],
   setup(t, { emit: e }) {
-    const { locale: l } = Y(void 0, !0), a = { de: he, enUS: q, fr: Ce }, { internalFilterValue: n, isSecondaryButtonDisabled: s, isApplyButtonDisabled: u } = z(
-      P(t, "value"),
-      P(t, "defaultValue")
-    ), d = i(
-      () => t.defaultValue === null ? t.label : K(t.value, "dd MMM, yyyy", {
+    const { locale: l } = H(void 0, !0), a = { de: Be, enUS: q, fr: Se }, { internalFilterValue: n, isSecondaryButtonDisabled: s, isApplyButtonDisabled: u } = z(
+      E(t, "value"),
+      E(t, "defaultValue")
+    ), d = r(
+      () => t.defaultValue === null ? t.label : G(t.value, "dd MMM, yyyy", {
         locale: a[l.value.substring(0, 2)] || q
       })
-    ), c = i(() => t.value != null ? 1 : null), f = () => {
-      e(r.UPDATE, { ...t, value: n.value });
+    ), c = r(() => t.value != null ? 1 : null), f = () => {
+      e(i.UPDATE, { ...t, value: n.value });
     }, p = () => {
       n.value = null, f();
     }, y = () => {
       n.value = t.defaultValue, f();
-    }, F = () => {
+    }, v = () => {
       n.value = t.value;
-    }, g = (m) => {
-      n.value = m, e(r.INPUT, { ...t, value: n.value });
+    }, g = (_) => {
+      n.value = _, e(i.INPUT, { ...t, value: n.value });
     };
     return {
       // Values
@@ -490,30 +421,30 @@ const Ee = $t.exports, xt = E({
       // Events
       clearFilter: p,
       onDateSelected: g,
-      openFilter: F,
+      openFilter: v,
       updateFilter: f,
       resetFilter: y,
-      onDateInputSelected: (m) => {
-        n.value = m, g(m), f();
+      onDateInputSelected: (_) => {
+        n.value = _, g(_), f();
       }
     };
   }
 });
-var Ot = function() {
+var Dt = function() {
   var a, n, s, u;
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("bento-base-filter", { attrs: { label: e.label, field: e.field, "applied-filters-count": e.appliedFiltersCount, "disable-apply-button": e.isApplyButtonDisabled, "disable-secondary-button": e.isSecondaryButtonDisabled, "button-label": e.buttonLabel, "default-value": e.defaultValue, "only-slot": e.onlySlot, "fit-content": "" }, on: { apply: e.updateFilter, clear: e.clearFilter, open: e.openFilter, reset: e.resetFilter } }, [e.onlySlot ? l("bento-date-picker", { attrs: { value: e.internalFilterValue, "first-day-of-week": (a = e.options) == null ? void 0 : a.firstDayOfWeek, "is-date-disabled": (n = e.options) == null ? void 0 : n.isDateDisabled }, on: { input: e.onDateInputSelected } }) : [l("bento-divider", { staticClass: "b-date-filter__divider" }), l("div", { staticClass: "b-date-filter" }, [l("calendar", { attrs: { "first-day-of-week": (s = e.options) == null ? void 0 : s.firstDayOfWeek, "is-date-disabled": (u = e.options) == null ? void 0 : u.isDateDisabled, "number-of-months": 1, value: e.internalFilterValue }, on: { input: e.onDateSelected } })], 1)]], 2);
-}, Vt = [], Nt = /* @__PURE__ */ T(
-  xt,
-  Ot,
-  Vt,
+}, Pt = [], Et = /* @__PURE__ */ A(
+  Tt,
+  Dt,
+  Pt,
   !1,
   null,
   "be131834",
   null,
   null
 );
-const De = Nt.exports, Lt = {
+const De = Et.exports, Ut = {
   "en-US": {
     clear: "Clear",
     reset: "Reset",
@@ -539,16 +470,16 @@ const De = Nt.exports, Lt = {
     clear: "Borrar",
     apply: "Aplicar"
   }
-}, Mt = E({
-  i18n: { messages: Lt },
+}, kt = P({
+  i18n: { messages: Ut },
   name: "bento-date-range-filter",
   components: {
-    BentoBaseFilter: j,
-    BentoButtonActions: Ze,
-    BentoDateRangePicker: ct,
-    BentoTypography: ne,
-    BentoDivider: Be,
-    DateRangePickerCalendar: dt
+    BentoBaseFilter: Y,
+    BentoButtonActions: st,
+    BentoDateRangePicker: at,
+    BentoTypography: ee,
+    BentoDivider: ge,
+    DateRangePickerCalendar: nt
   },
   props: {
     /**
@@ -590,56 +521,56 @@ const De = Nt.exports, Lt = {
       default: () => ({ startDate: void 0, endDate: void 0 })
     }
   },
-  emits: [r.INPUT, r.UPDATE],
+  emits: [i.INPUT, i.UPDATE],
   setup(t, { emit: e }) {
-    var U, k, V, $;
-    const { locale: l, t: a } = Y(), n = { de: he, enUS: q, fr: Ce }, { internalFilterValue: s, isSecondaryButtonDisabled: u, isApplyButtonDisabled: d } = z(
-      P(t, "value"),
-      P(t, "defaultValue")
-    ), c = (B) => B ? K(B, de.NUMERIC_DATE_YEAR_FIRST, {
+    var U, R, V, x;
+    const { locale: l, t: a } = H(), n = { de: Be, enUS: q, fr: Se }, { internalFilterValue: s, isSecondaryButtonDisabled: u, isApplyButtonDisabled: d } = z(
+      E(t, "value"),
+      E(t, "defaultValue")
+    ), c = (h) => h ? G(h, ue.NUMERIC_DATE_YEAR_FIRST, {
       locale: n[l.value.substring(0, 2)] || q
-    }) : void 0, f = (B) => B ? K(B, de.HOUR_MINUTE_SECONDS, {
+    }) : void 0, f = (h) => h ? G(h, ue.HOUR_MINUTE_SECONDS, {
       locale: n[l.value.substring(0, 2)] || q
-    }) : "", p = A(null), y = A(!1), F = be({
+    }) : "", p = D(null), y = D(!1), v = _e({
       startDate: c((U = t.value) == null ? void 0 : U.startDate),
-      endDate: c((k = t.value) == null ? void 0 : k.endDate),
+      endDate: c((R = t.value) == null ? void 0 : R.endDate),
       startTime: f((V = t.value) == null ? void 0 : V.startDate),
-      endTime: f(($ = t.value) == null ? void 0 : $.endDate)
-    }), g = i(
+      endTime: f((x = t.value) == null ? void 0 : x.endDate)
+    }), g = r(
       () => {
-        var B, L;
-        return ((B = t.value) == null ? void 0 : B.startDate) != null && ((L = t.value) == null ? void 0 : L.endDate) != null ? 1 : null;
+        var h, L;
+        return ((h = t.value) == null ? void 0 : h.startDate) != null && ((L = t.value) == null ? void 0 : L.endDate) != null ? 1 : null;
       }
-    ), D = i(
-      () => t.defaultValue === null ? t.label : `${K(t.value.startDate, "dd MMM, yyyy", {
+    ), S = r(
+      () => t.defaultValue === null ? t.label : `${G(t.value.startDate, "dd MMM, yyyy", {
         locale: n[l.value.substring(0, 2)] || q
-      })} - ${K(t.value.endDate, "dd MMM, yyyy", {
+      })} - ${G(t.value.endDate, "dd MMM, yyyy", {
         locale: n[l.value.substring(0, 2)] || q
       })}`
-    ), m = () => {
+    ), _ = () => {
       p.value.closePopover();
-      const { onlySlot: B, ...L } = t;
-      e(r.UPDATE, { ...L, value: s.value });
-    }, _ = () => {
-      s.value = void 0, m();
-    }, w = () => {
-      s.value = t.defaultValue, m();
+      const { onlySlot: h, ...L } = t;
+      e(i.UPDATE, { ...L, value: s.value });
     }, b = () => {
+      s.value = void 0, _();
+    }, M = () => {
+      s.value = t.defaultValue, _();
+    }, m = () => {
       s.value = t.value;
-    }, v = (B) => {
-      s.value = B, F.startDate = c(B.startDate), F.endDate = c(B.endDate), e(r.INPUT, { ...t, value: s.value });
-    }, S = (B) => {
-      v(B), e(r.INPUT, { ...t, value: s.value });
-    }, O = i(
+    }, F = (h) => {
+      s.value = h, v.startDate = c(h.startDate), v.endDate = c(h.endDate), e(i.INPUT, { ...t, value: s.value });
+    }, T = (h) => {
+      F(h), e(i.INPUT, { ...t, value: s.value });
+    }, O = r(
       () => [
         {
           title: a("apply"),
-          event: m,
+          event: _,
           disabled: y.value || d.value
         },
         {
           title: t.defaultValue ? a("reset") : a("clear"),
-          event: t.defaultValue ? w : _,
+          event: t.defaultValue ? M : b,
           disabled: y.value && u.value
         }
       ]
@@ -650,60 +581,56 @@ const De = Nt.exports, Lt = {
       // Values
       actions: O,
       appliedFiltersCount: g,
-      formData: F,
+      formData: v,
       internalFilterValue: s,
       isApplyButtonDisabled: d,
       isSecondaryButtonDisabled: u,
-      buttonLabel: D,
-      // Enum
-      BentoButtonActionsLayout: ye,
-      BentoTypographyElement: se,
-      BentoTypographyVariant: oe,
+      buttonLabel: S,
       // Events
-      onDateSelected: v,
-      openFilter: b,
-      updateFilter: m,
+      onDateSelected: F,
+      openFilter: m,
+      updateFilter: _,
       onDatePickerRangeError: () => {
-        y.value = !0, s.value = { startDate: void 0, endDate: void 0 }, e(r.INPUT, { ...t, value: s.value });
+        y.value = !0, s.value = { startDate: void 0, endDate: void 0 }, e(i.INPUT, { ...t, value: s.value });
       },
-      onDatePickerRangeFormDateInputUpdate: (B) => {
-        y.value = !1, B.startTime && (F.startTime = B.startTime), B.endTime && (F.endTime = B.endTime);
+      onDatePickerRangeFormDateInputUpdate: (h) => {
+        y.value = !1, h.startTime && (v.startTime = h.startTime), h.endTime && (v.endTime = h.endTime);
       },
-      onDateInputSelected: S
+      onDateInputSelected: T
     };
   }
 });
-var wt = function() {
-  var a, n, s, u, d, c, f, p, y, F;
+var $t = function() {
+  var a, n, s, u, d, c, f, p, y, v;
   var e = this, l = e._self._c;
-  return e._self._setupProxy, l("bento-base-filter", { ref: "baseFilter", attrs: { label: e.label, field: e.field, "applied-filters-count": e.appliedFiltersCount, "disable-apply-button": e.isApplyButtonDisabled, "disable-secondary-button": e.isSecondaryButtonDisabled, "button-label": e.buttonLabel, "default-value": e.defaultValue, controlled: !e.onlySlot, "only-slot": e.onlySlot, "fit-content": "" }, on: { open: e.openFilter } }, [e.onlySlot ? l("bento-date-range-picker", { attrs: { "allow-time-input": (a = e.options) == null ? void 0 : a.allowTimeInput, value: e.internalFilterValue, "custom-range": (n = e.options) == null ? void 0 : n.quickSelectRanges, "first-day-of-week": (s = e.options) == null ? void 0 : s.firstDayOfWeek, "is-date-disabled": (u = e.options) == null ? void 0 : u.isDateDisabled, "number-of-months": (d = e.options) == null ? void 0 : d.numberOfMonths }, on: { input: e.onDateInputSelected } }) : [l("div", { staticClass: "b-date-range-filter" }, [l("date-range-picker-calendar", { attrs: { "allow-time-input": (c = e.options) == null ? void 0 : c.allowTimeInput, "first-day-of-week": (f = e.options) == null ? void 0 : f.firstDayOfWeek, "is-date-disabled": (p = e.options) == null ? void 0 : p.isDateDisabled, "max-range": (y = e.options) == null ? void 0 : y.maxRange, "number-of-months": (F = e.options) == null ? void 0 : F.numberOfMonths, value: e.internalFilterValue, "date-form-data": e.formData }, on: { input: e.onDateSelected, error: e.onDatePickerRangeError, "form-date": e.onDatePickerRangeFormDateInputUpdate }, scopedSlots: e._u([{ key: "title", fn: function() {
-    return [l("bento-typography", { attrs: { strongest: "", variant: e.BentoTypographyVariant.BODY, el: e.BentoTypographyElement.SPAN } }, [e._v(" " + e._s(e.label) + " ")])];
+  return e._self._setupProxy, l("bento-base-filter", { ref: "baseFilter", attrs: { label: e.label, field: e.field, "applied-filters-count": e.appliedFiltersCount, "disable-apply-button": e.isApplyButtonDisabled, "disable-secondary-button": e.isSecondaryButtonDisabled, "button-label": e.buttonLabel, "default-value": e.defaultValue, controlled: !e.onlySlot, "only-slot": e.onlySlot, "fit-content": "" }, on: { open: e.openFilter } }, [e.onlySlot ? l("bento-date-range-picker", { attrs: { "allow-time-input": (a = e.options) == null ? void 0 : a.allowTimeInput, value: e.internalFilterValue, "custom-range": (n = e.options) == null ? void 0 : n.quickSelectRanges, "first-day-of-week": (s = e.options) == null ? void 0 : s.firstDayOfWeek, "is-date-disabled": (u = e.options) == null ? void 0 : u.isDateDisabled, "number-of-months": (d = e.options) == null ? void 0 : d.numberOfMonths }, on: { input: e.onDateInputSelected } }) : [l("div", { staticClass: "b-date-range-filter" }, [l("date-range-picker-calendar", { attrs: { "allow-time-input": (c = e.options) == null ? void 0 : c.allowTimeInput, "first-day-of-week": (f = e.options) == null ? void 0 : f.firstDayOfWeek, "is-date-disabled": (p = e.options) == null ? void 0 : p.isDateDisabled, "max-range": (y = e.options) == null ? void 0 : y.maxRange, "number-of-months": (v = e.options) == null ? void 0 : v.numberOfMonths, value: e.internalFilterValue, "date-form-data": e.formData }, on: { input: e.onDateSelected, error: e.onDatePickerRangeError, "form-date": e.onDatePickerRangeFormDateInputUpdate }, scopedSlots: e._u([{ key: "title", fn: function() {
+    return [l("bento-typography", { attrs: { strongest: "", variant: "body", el: "span" } }, [e._v(" " + e._s(e.label) + " ")])];
   }, proxy: !0 }, { key: "actions", fn: function() {
-    return [l("bento-divider", { staticClass: "b-date-range-filter__divider" }), l("bento-button-actions", { staticClass: "b-date-range-filter__actions", attrs: { actions: e.actions, layout: e.BentoButtonActionsLayout.SPACE_BETWEEN } })];
+    return [l("bento-divider", { staticClass: "b-date-range-filter__divider" }), l("bento-button-actions", { staticClass: "b-date-range-filter__actions", attrs: { actions: e.actions, layout: "space-between" } })];
   }, proxy: !0 }]) })], 1)]], 2);
-}, qt = [], Yt = /* @__PURE__ */ T(
-  Mt,
-  wt,
-  qt,
+}, Rt = [], xt = /* @__PURE__ */ A(
+  kt,
+  $t,
+  Rt,
   !1,
   null,
-  "89cc093e",
+  "e33e97f8",
   null,
   null
 );
-const Pe = Yt.exports, Ht = {
+const Pe = xt.exports, It = {
   "en-US": {
     noFiltersMatchThisSearch: "No filters match this search",
     search: "Search",
     searchFilter: "Search {filter}"
   }
-}, jt = E({
-  i18n: { messages: Ht },
+}, Ot = P({
+  i18n: { messages: It },
   name: "bento-select-filter",
   components: {
-    BentoBaseFilter: j,
-    BentoDropdown: ot,
-    BentoListbox: ft,
+    BentoBaseFilter: Y,
+    BentoDropdown: Xe,
+    BentoListbox: ot,
     BentoSearchBar: X
   },
   props: {
@@ -743,52 +670,52 @@ const Pe = Yt.exports, Ht = {
       default: void 0
     }
   },
-  emits: [r.INPUT, r.UPDATE],
+  emits: [i.INPUT, i.UPDATE],
   setup(t, { emit: e, slots: l }) {
-    var G, J;
+    var J, K;
     const { internalFilterValue: a, isSecondaryButtonDisabled: n, isApplyButtonDisabled: s } = z(
-      P(t, "value"),
-      P(t, "defaultValue")
-    ), { t: u, locale: d } = Y(), c = A(""), f = P(t, "options"), p = A(t.options.listboxItems);
+      E(t, "value"),
+      E(t, "defaultValue")
+    ), { t: u, locale: d } = H(), c = D(""), f = E(t, "options"), p = D(t.options.listboxItems);
     Z(f, () => {
       p.value = f.value.listboxItems;
     });
-    const y = Fe(
+    const y = Ce(
       c,
       p,
-      (J = (G = t.options) == null ? void 0 : G.search) == null ? void 0 : J.searchEvent
-    ), F = i(() => u("noFiltersMatchThisSearch")), g = i(() => {
-      var U, k, V;
+      (K = (J = t.options) == null ? void 0 : J.search) == null ? void 0 : K.searchEvent
+    ), v = r(() => u("noFiltersMatchThisSearch")), g = r(() => {
+      var U, R, V;
       if (t.defaultValue === null)
         return t.label;
       if (t.options.multiple) {
-        const $ = t.value.length;
-        if ($ === t.options.listboxItems.length)
+        const x = t.value.length;
+        if (x === t.options.listboxItems.length)
           return (U = t == null ? void 0 : t.options) == null ? void 0 : U.messages[d.value].persistentButtonLabelAllSelected;
-        const B = (k = t == null ? void 0 : t.options) == null ? void 0 : k.messages[d.value].persistentButtonLabelPartiallySelected.split("|").map((L) => L.trim());
-        return $ === 1 ? B[0].replace("{count}", $) : B[1].replace("{count}", $);
+        const h = (R = t == null ? void 0 : t.options) == null ? void 0 : R.messages[d.value].persistentButtonLabelPartiallySelected.split("|").map((L) => L.trim());
+        return x === 1 ? h[0].replace("{count}", x) : h[1].replace("{count}", x);
       }
-      return W((V = t.options.listboxItems.find(({ value: $ }) => $ === t.value)) == null ? void 0 : V.label, 18);
-    }), D = i(() => ae(`filter-listbox-${t.field}`)), m = (U) => {
+      return W((V = t.options.listboxItems.find(({ value: x }) => x === t.value)) == null ? void 0 : V.label, 18);
+    }), S = r(() => ae(`filter-listbox-${t.field}`)), _ = (U) => {
       a.value = U;
-      const { onlySlot: k, ...V } = t;
-      e(r.INPUT, { ...V, value: a.value });
-    }, _ = () => {
+      const { onlySlot: R, ...V } = t;
+      e(i.INPUT, { ...V, value: a.value });
+    }, b = () => {
       t.options.multiple && a.value && a.value.length === 0 && (a.value = t.defaultValue !== null ? t.defaultValue : void 0);
-      const { onlySlot: U, ...k } = t;
-      e(r.UPDATE, { ...k, value: a.value });
-    }, w = () => {
+      const { onlySlot: U, ...R } = t;
+      e(i.UPDATE, { ...R, value: a.value });
+    }, M = () => {
       a.value = t.value;
-    }, b = () => {
+    }, m = () => {
       c.value && (c.value = "");
-    }, v = () => {
-      a.value = t.defaultValue, _();
-    }, S = () => {
-      a.value = null, _();
+    }, F = () => {
+      a.value = t.defaultValue, b();
+    }, T = () => {
+      a.value = null, b();
     };
     return {
       // Values
-      appliedFiltersCount: i(() => {
+      appliedFiltersCount: r(() => {
         if (t.value == null)
           return null;
         const U = 1;
@@ -798,57 +725,57 @@ const Pe = Yt.exports, Ht = {
       internalFilterValue: a,
       isApplyButtonDisabled: s,
       isSecondaryButtonDisabled: n,
-      listboxFilterId: D,
-      noResultsMessage: F,
+      listboxFilterId: S,
+      noResultsMessage: v,
       slots: l,
       buttonLabel: g,
       // Search
       searchTerm: c,
       // Events
-      clearFilter: S,
-      closeFilter: b,
-      onOptionSelected: m,
-      openFilter: w,
-      updateFilter: _,
-      resetFilter: v
+      clearFilter: T,
+      closeFilter: m,
+      onOptionSelected: _,
+      openFilter: M,
+      updateFilter: b,
+      resetFilter: F
     };
   }
 });
-var zt = function() {
-  var a, n, s, u, d, c, f, p, y, F, g;
+var Vt = function() {
+  var a, n, s, u, d, c, f, p, y, v, g;
   var e = this, l = e._self._c;
-  return e._self._setupProxy, l("bento-base-filter", { attrs: { label: e.label, field: e.field, "applied-filters-count": e.appliedFiltersCount, "disable-apply-button": e.isApplyButtonDisabled, "disable-secondary-button": e.isSecondaryButtonDisabled, "button-label": e.buttonLabel, "default-value": e.defaultValue, "only-slot": e.onlySlot }, on: { apply: e.updateFilter, clear: e.clearFilter, reset: e.resetFilter, open: e.openFilter, close: e.closeFilter } }, [e.onlySlot ? l("bento-dropdown", { staticClass: "b-select-filter__dropdown-variant", attrs: { value: e.internalFilterValue, items: e.options.listboxItems, multiple: (a = e.options) == null ? void 0 : a.multiple, "no-results-message": e.noResultsMessage, searching: !!e.searchTerm, "is-option-disabled": e.options.isOptionDisabled, "dynamic-filtering": !0 }, on: { input: e.onOptionSelected }, scopedSlots: e._u([e._l(e.slots, function(D, m) {
-    return { key: m, fn: function(_) {
-      return [e._t(m, null, null, _)];
+  return e._self._setupProxy, l("bento-base-filter", { attrs: { label: e.label, field: e.field, "applied-filters-count": e.appliedFiltersCount, "disable-apply-button": e.isApplyButtonDisabled, "disable-secondary-button": e.isSecondaryButtonDisabled, "button-label": e.buttonLabel, "default-value": e.defaultValue, "only-slot": e.onlySlot }, on: { apply: e.updateFilter, clear: e.clearFilter, reset: e.resetFilter, open: e.openFilter, close: e.closeFilter } }, [e.onlySlot ? l("bento-dropdown", { staticClass: "b-select-filter__dropdown-variant", attrs: { value: e.internalFilterValue, items: e.options.listboxItems, multiple: (a = e.options) == null ? void 0 : a.multiple, "no-results-message": e.noResultsMessage, searching: !!e.searchTerm, "is-option-disabled": e.options.isOptionDisabled, "dynamic-filtering": !0 }, on: { input: e.onOptionSelected }, scopedSlots: e._u([e._l(e.slots, function(S, _) {
+    return { key: _, fn: function(b) {
+      return [e._t(_, null, null, b)];
     } };
-  })], null, !0) }) : [l("div", { staticClass: "b-select-filter__search-bar" }, [l("bento-search-bar", { attrs: { "debounce-time": (s = (n = e.options) == null ? void 0 : n.search) == null ? void 0 : s.debounceTime, value: e.searchTerm, "input-field-aria-label": e.$t("searchFilter", { filter: e.label.toLocaleLowerCase() }).toString() }, on: { input: function(D) {
-    e.searchTerm = D;
-  } } })], 1), l("hr", { staticClass: "b-select-filter__divider" }), l("bento-listbox", { staticClass: "b-select-filter__wrapper", attrs: { id: e.listboxFilterId, "aria-label": e.label, "has-more-items": (d = (u = e.options) == null ? void 0 : u.lazy) == null ? void 0 : d.hasMoreItems, items: e.filteredItems, "is-option-disabled": (c = e.options) == null ? void 0 : c.isOptionDisabled, "lazy-load-type": (p = (f = e.options) == null ? void 0 : f.lazy) == null ? void 0 : p.lazyLoadType, loading: (F = (y = e.options) == null ? void 0 : y.lazy) == null ? void 0 : F.loading, multiple: (g = e.options) == null ? void 0 : g.multiple, "no-results-message": e.noResultsMessage, searching: !!e.searchTerm, "selected-value": e.internalFilterValue }, on: { select: e.onOptionSelected, "show-more": function(D) {
-    var m, _;
-    (_ = (m = e.options) == null ? void 0 : m.lazy) == null || _.showMoreEvent();
-  } }, scopedSlots: e._u([e._l(e.slots, function(D, m) {
-    return { key: m, fn: function(_) {
-      return [e._t(m, null, null, _)];
+  })], null, !0) }) : [l("div", { staticClass: "b-select-filter__search-bar" }, [l("bento-search-bar", { attrs: { "debounce-time": (s = (n = e.options) == null ? void 0 : n.search) == null ? void 0 : s.debounceTime, value: e.searchTerm, "input-field-aria-label": e.$t("searchFilter", { filter: e.label.toLocaleLowerCase() }).toString() }, on: { input: function(S) {
+    e.searchTerm = S;
+  } } })], 1), l("hr", { staticClass: "b-select-filter__divider" }), l("bento-listbox", { staticClass: "b-select-filter__wrapper", attrs: { id: e.listboxFilterId, "aria-label": e.label, "has-more-items": (d = (u = e.options) == null ? void 0 : u.lazy) == null ? void 0 : d.hasMoreItems, items: e.filteredItems, "is-option-disabled": (c = e.options) == null ? void 0 : c.isOptionDisabled, "lazy-load-type": (p = (f = e.options) == null ? void 0 : f.lazy) == null ? void 0 : p.lazyLoadType, loading: (v = (y = e.options) == null ? void 0 : y.lazy) == null ? void 0 : v.loading, multiple: (g = e.options) == null ? void 0 : g.multiple, "no-results-message": e.noResultsMessage, searching: !!e.searchTerm, "selected-value": e.internalFilterValue }, on: { select: e.onOptionSelected, "show-more": function(S) {
+    var _, b;
+    (b = (_ = e.options) == null ? void 0 : _.lazy) == null || b.showMoreEvent();
+  } }, scopedSlots: e._u([e._l(e.slots, function(S, _) {
+    return { key: _, fn: function(b) {
+      return [e._t(_, null, null, b)];
     } };
   })], null, !0) })]], 2);
-}, Gt = [], Jt = /* @__PURE__ */ T(
-  jt,
-  zt,
-  Gt,
+}, Nt = [], Lt = /* @__PURE__ */ A(
+  Ot,
+  Vt,
+  Nt,
   !1,
   null,
   "dbe46835",
   null,
   null
 );
-const I = Jt.exports, Kt = E({
+const $ = Lt.exports, wt = P({
   name: "bento-select-avatar-filter",
   components: {
-    BentoSelectFilter: I,
-    BentoAvatar: pt
+    BentoSelectFilter: $,
+    BentoAvatar: rt
   },
   props: {
-    ...I.props,
+    ...$.props,
     /**
      * List of options that are needed to setup the country filter
      * Available options:
@@ -860,39 +787,39 @@ const I = Jt.exports, Kt = E({
       default: void 0
     }
   },
-  emits: [r.INPUT, r.UPDATE],
+  emits: [i.INPUT, i.UPDATE],
   setup(t, { emit: e }) {
     return {
       // Enums
-      BentoFilterEvent: r,
+      BentoFilterEvent: i,
       // Methods
-      onUpdate: (a) => e(r.UPDATE, a)
+      onUpdate: (a) => e(i.UPDATE, a)
     };
   }
 });
-var Wt = function() {
+var Mt = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("bento-select-filter", e._b({ attrs: { field: e.field, label: e.label }, on: { update: e.onUpdate, input: (a) => e.$emit(e.BentoFilterEvent.INPUT, a) }, scopedSlots: e._u([{ key: "default", fn: function({ label: a, data: n }) {
     return [l("bento-avatar", { attrs: { username: a, src: n } })];
   } }]) }, "bento-select-filter", e.$props, !1));
-}, Qt = [], Xt = /* @__PURE__ */ T(
-  Kt,
-  Wt,
-  Qt,
+}, qt = [], Ht = /* @__PURE__ */ A(
+  wt,
+  Mt,
+  qt,
   !1,
   null,
   null,
   null,
   null
 );
-const Ue = Xt.exports, Zt = E({
+const Ee = Ht.exports, jt = P({
   name: "bento-select-country-filter",
   components: {
-    BentoSelectFilter: I,
-    ListboxOptionTag: ge
+    BentoSelectFilter: $,
+    ListboxOptionTag: Ae
   },
   props: {
-    ...I.props,
+    ...$.props,
     /**
      * List of options that are needed to setup the country filter
      * Available options:
@@ -904,60 +831,60 @@ const Ue = Xt.exports, Zt = E({
       default: void 0
     }
   },
-  emits: [r.INPUT, r.UPDATE],
+  emits: [i.INPUT, i.UPDATE],
   setup(t, { emit: e }) {
     return {
       // Enums
-      BentoFilterEvent: r,
+      BentoFilterEvent: i,
       // Methods
       onUpdate: (a) => {
-        e(r.UPDATE, a);
+        e(i.UPDATE, a);
       }
     };
   }
 });
-var el = function() {
+var Yt = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("bento-select-filter", e._b({ attrs: { field: e.field, label: e.label }, on: { update: e.onUpdate, input: (a) => e.$emit(e.BentoFilterEvent.INPUT, a) }, scopedSlots: e._u([{ key: "default", fn: function(a) {
     return [l("listbox-option-tag", { attrs: { option: a } })];
   } }]) }, "bento-select-filter", e.$props, !1));
-}, tl = [], ll = /* @__PURE__ */ T(
-  Zt,
-  el,
-  tl,
+}, zt = [], Jt = /* @__PURE__ */ A(
+  jt,
+  Yt,
+  zt,
   !1,
   null,
   null,
   null,
   null
 );
-const Re = ll.exports, al = E({
+const Ue = Jt.exports, Kt = P({
   name: "bento-select-country-filter",
   components: {
-    BentoSelectFilter: I,
-    BentoCountry: _t
+    BentoSelectFilter: $,
+    BentoCountry: it
   },
   props: {
-    ...I.props,
+    ...$.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: [r.INPUT, r.UPDATE],
+  emits: [i.INPUT, i.UPDATE],
   setup(t, { emit: e }) {
-    const l = P(t, "options"), { listboxItems: a, variant: n } = Me(l.value), s = (c) => e(r.UPDATE, c), u = bt(n, a), d = i(() => ({
+    const l = E(t, "options"), { listboxItems: a, variant: n } = Me(l.value), s = (c) => e(i.UPDATE, c), u = ut(n, a), d = r(() => ({
       ...t.options,
       listboxItems: u.value
     }));
-    return we("skipBentoCountryDeprecateMessage", !0), (!n || n.value === "custom") && He(
+    return qe("skipBentoCountryDeprecateMessage", !0), (!n || n.value === "custom") && Ye(
       'BentoSelectCountryFilter type with `options.variant==="custom"`',
       "Use any of the other BentoSelectCountryFilter variants instead OR use BentoSelectFilter type for custom labels",
       "2.0.0"
@@ -967,34 +894,33 @@ const Re = ll.exports, al = E({
       // Methods
       onUpdate: s,
       // Enums
-      BentoCountryVariant: Se,
-      BentoFilterEvent: r
+      BentoFilterEvent: i
     };
   }
 });
-var nl = function() {
+var Gt = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("bento-select-filter", e._b({ attrs: { field: e.field, label: e.label, options: e.countryOptions }, on: { update: e.onUpdate, input: (a) => e.$emit(e.BentoFilterEvent.INPUT, a) }, scopedSlots: e._u([{ key: "default", fn: function({ value: a, label: n }) {
-    return [l("bento-country", { attrs: { code: a, label: n, variant: e.BentoCountryVariant.CUSTOM } })];
+    return [l("bento-country", { attrs: { code: a, label: n, variant: "custom" } })];
   } }]) }, "bento-select-filter", e.$props, !1));
-}, sl = [], ol = /* @__PURE__ */ T(
-  al,
-  nl,
-  sl,
+}, Wt = [], Zt = /* @__PURE__ */ A(
+  Kt,
+  Gt,
+  Wt,
   !1,
   null,
   null,
   null,
   null
 );
-const Ie = ol.exports, rl = E({
+const ke = Zt.exports, Qt = P({
   name: "bento-select-payment-method-filter",
   components: {
-    BentoSelectFilter: I,
-    BentoPaymentMethod: vt
+    BentoSelectFilter: $,
+    BentoPaymentMethod: ct
   },
   props: {
-    ...I.props,
+    ...$.props,
     /**
      * List of options that are needed to setup the payment method filter
      * Available options:
@@ -1006,39 +932,39 @@ const Ie = ol.exports, rl = E({
       default: void 0
     }
   },
-  emits: [r.INPUT, r.UPDATE],
+  emits: [i.INPUT, i.UPDATE],
   setup(t, { emit: e }) {
     return {
       // Enums
-      BentoFilterEvent: r,
+      BentoFilterEvent: i,
       // Methods
-      onUpdate: (a) => e(r.UPDATE, a)
+      onUpdate: (a) => e(i.UPDATE, a)
     };
   }
 });
-var il = function() {
+var Xt = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("bento-select-filter", e._b({ attrs: { field: e.field, label: e.label }, on: { update: e.onUpdate, input: (a) => e.$emit(e.BentoFilterEvent.INPUT, a) }, scopedSlots: e._u([{ key: "default", fn: function({ value: a, label: n }) {
     return [l("bento-payment-method", { attrs: { type: a, label: n } })];
   } }]) }, "bento-select-filter", e.$props, !1));
-}, ul = [], cl = /* @__PURE__ */ T(
-  rl,
-  il,
-  ul,
+}, el = [], tl = /* @__PURE__ */ A(
+  Qt,
+  Xt,
+  el,
   !1,
   null,
   null,
   null,
   null
 );
-const ke = cl.exports, dl = E({
+const $e = tl.exports, ll = P({
   name: "bento-select-country-filter",
   components: {
-    BentoSelectFilter: I,
-    ListboxOptionTag: ge
+    BentoSelectFilter: $,
+    ListboxOptionTag: Ae
   },
   props: {
-    ...I.props,
+    ...$.props,
     /**
      * List of options that are needed to setup the tag filter
      * Available options:
@@ -1050,9 +976,9 @@ const ke = cl.exports, dl = E({
       default: void 0
     }
   },
-  emits: [r.INPUT, r.UPDATE],
+  emits: [i.INPUT, i.UPDATE],
   setup(t, { emit: e }) {
-    const l = (s) => e(r.UPDATE, s), a = i(
+    const l = (s) => e(i.UPDATE, s), a = r(
       () => {
         var s, u;
         return (u = (s = t == null ? void 0 : t.options) == null ? void 0 : s.listboxItems) == null ? void 0 : u.map(({ label: d, value: c, variant: f }) => ({ label: d, value: c, data: f }));
@@ -1060,42 +986,41 @@ const ke = cl.exports, dl = E({
     );
     return {
       // Values
-      countryOptions: i(() => ({
+      countryOptions: r(() => ({
         ...t.options,
         listboxItems: a.value
       })),
       // Methods
       onUpdate: l,
       // Enums
-      BentoCountryVariant: Se,
-      BentoFilterEvent: r
+      BentoFilterEvent: i
     };
   }
 });
-var fl = function() {
+var al = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("bento-select-filter", e._b({ attrs: { field: e.field, label: e.label, options: e.countryOptions }, on: { update: e.onUpdate, input: (a) => e.$emit(e.BentoFilterEvent.INPUT, a) }, scopedSlots: e._u([{ key: "default", fn: function({ label: a, data: n }) {
     return [l("listbox-option-tag", { attrs: { option: { value: a, data: n, label: "" } } })];
   } }]) }, "bento-select-filter", e.$props, !1));
-}, pl = [], _l = /* @__PURE__ */ T(
-  dl,
-  fl,
-  pl,
+}, nl = [], sl = /* @__PURE__ */ A(
+  ll,
+  al,
+  nl,
   !1,
   null,
   null,
   null,
   null
 );
-const $e = _l.exports, bl = {
+const Re = sl.exports, ol = {
   "en-US": {
     yes: "Yes",
     no: "No"
   }
-}, vl = E({
+}, rl = P({
   name: "bento-boolean-filter",
-  i18n: { messages: bl },
-  components: { BentoBaseFilter: j, BentoRadioGroup: et },
+  i18n: { messages: ol },
+  components: { BentoBaseFilter: Y, BentoRadioGroup: Ke },
   props: {
     /**
      * Default value of the filter to reset to.
@@ -1120,28 +1045,28 @@ const $e = _l.exports, bl = {
      */
     onlySlot: { type: Boolean, default: !1 }
   },
-  emits: [r.INPUT, r.UPDATE],
+  emits: [i.INPUT, i.UPDATE],
   setup(t, { emit: e }) {
-    const { t: l } = Y(), a = i(() => [
+    const { t: l } = H(), a = r(() => [
       { value: "yes", label: l("yes") },
       { value: "no", label: l("no") }
     ]), { internalFilterValue: n, isSecondaryButtonDisabled: s, isApplyButtonDisabled: u } = z(
-      P(t, "value"),
-      P(t, "defaultValue")
-    ), d = i(
-      () => t.defaultValue === null ? t.label : W(a.value.find(({ value: m }) => m === t.value).label, 18)
-    ), c = i(() => t.value != null ? 1 : null), f = i(() => ({
+      E(t, "value"),
+      E(t, "defaultValue")
+    ), d = r(
+      () => t.defaultValue === null ? t.label : W(a.value.find(({ value: _ }) => _ === t.value).label, 18)
+    ), c = r(() => t.value != null ? 1 : null), f = r(() => ({
       ["b-boolean-filter--only-slot"]: t.onlySlot
     }));
-    te(() => {
+    le(() => {
       n.value || (n.value = null);
     });
-    const p = (m) => {
-      n.value = m, e(r.INPUT, { ...t, value: n.value });
+    const p = (_) => {
+      n.value = _, e(i.INPUT, { ...t, value: n.value });
     }, y = () => {
       n.value = t.value;
-    }, F = () => {
-      e(r.UPDATE, { ...t, value: n.value });
+    }, v = () => {
+      e(i.UPDATE, { ...t, value: n.value });
     };
     return {
       // Values
@@ -1154,39 +1079,39 @@ const $e = _l.exports, bl = {
       isSecondaryButtonDisabled: s,
       // Events
       onInput: p,
-      updateFilter: F,
+      updateFilter: v,
       clearFilter: () => {
-        n.value = null, F();
+        n.value = null, v();
       },
       openFilter: y,
-      resetFilter: () => e(r.UPDATE, { ...t, value: t.defaultValue })
+      resetFilter: () => e(i.UPDATE, { ...t, value: t.defaultValue })
     };
   }
 });
-var yl = function() {
+var il = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("bento-base-filter", e._b({ attrs: { "applied-filters-count": e.appliedFiltersCount, "disable-apply-button": e.isApplyButtonDisabled, "disable-secondary-button": e.isSecondaryButtonDisabled, "button-label": e.buttonLabel, "only-slot": e.onlySlot }, on: { apply: e.updateFilter, clear: e.clearFilter, open: e.openFilter, reset: e.resetFilter } }, "bento-base-filter", e.$props, !1), [l("div", { staticClass: "b-boolean-filter", class: e.conditionalClasses, on: { keydown: function(a) {
     return !a.type.indexOf("key") && e._k(a.keyCode, "enter", 13, a.key, "Enter") ? null : e.updateFilter.apply(null, arguments);
   } } }, [l("bento-radio-group", { attrs: { items: e.items, label: e.label, "model-value": e.internalFilterValue, "hide-label": "" }, on: { "update:model-value": e.onInput } })], 1)]);
-}, ml = [], Fl = /* @__PURE__ */ T(
-  vl,
-  yl,
-  ml,
+}, ul = [], cl = /* @__PURE__ */ A(
+  rl,
+  il,
+  ul,
   !1,
   null,
   "275a3969",
   null,
   null
 );
-const xe = Fl.exports, Bl = {
+const xe = cl.exports, dl = {
   "en-US": {
     from: "From",
     to: "To"
   }
-}, hl = E({
+}, fl = P({
   name: "bento-range-filter",
-  i18n: { messages: Bl },
-  components: { BentoBaseFilter: j, BentoInputField: me },
+  i18n: { messages: dl },
+  components: { BentoBaseFilter: Y, BentoInputField: he },
   props: {
     /**
      * Default value of the filter to reset to.
@@ -1211,32 +1136,30 @@ const xe = Fl.exports, Bl = {
      */
     onlySlot: { type: Boolean, default: !1 }
   },
-  emits: [r.INPUT, r.UPDATE],
+  emits: [i.INPUT, i.UPDATE],
   setup(t, { emit: e }) {
-    const l = A(null), { internalFilterValue: a, isSecondaryButtonDisabled: n, isApplyButtonDisabled: s } = z(
-      P(t, "value"),
-      P(t, "defaultValue")
-    ), u = i(
+    const l = D(null), { internalFilterValue: a, isSecondaryButtonDisabled: n, isApplyButtonDisabled: s } = z(
+      E(t, "value"),
+      E(t, "defaultValue")
+    ), u = r(
       () => t.defaultValue === null ? t.label : `${W(t.value[0], 5)}-${W(t.value[1], 5)}`
-    ), d = i(() => t.value.find((_) => _ !== "") ? 1 : null), c = i(() => ({
+    ), d = r(() => t.value.find((b) => b !== "") ? 1 : null), c = r(() => ({
       ["b-range-filter--only-slot"]: t.onlySlot
     })), f = () => {
-      a.value = t.value, _e(() => l.value.focusInput());
+      a.value = t.value, He(() => l.value.focusInput());
     }, p = () => {
-      e(r.INPUT, { ...t, value: a.value });
-    }, y = (_) => {
-      a.value = [_, a.value[1]], p();
-    }, F = (_) => {
-      a.value = [a.value[0], _], p();
+      e(i.INPUT, { ...t, value: a.value });
+    }, y = (b) => {
+      a.value = [b, a.value[1]], p();
+    }, v = (b) => {
+      a.value = [a.value[0], b], p();
     }, g = () => {
-      a.value.some((_) => _) || (a.value = t.defaultValue !== null ? t.defaultValue : void 0), e(r.UPDATE, {
+      a.value.some((b) => b) || (a.value = t.defaultValue !== null ? t.defaultValue : void 0), e(i.UPDATE, {
         ...t,
         value: a.value
       });
     };
     return {
-      // Enums
-      BentoInputFieldType: tt,
       // Values
       inputTextRef: l,
       appliedFiltersCount: d,
@@ -1247,36 +1170,104 @@ const xe = Fl.exports, Bl = {
       buttonLabel: u,
       // Events
       updateFrom: y,
-      updateTo: F,
+      updateTo: v,
       updateFilter: g,
       clearFilter: () => {
         a.value = ["", ""], g();
       },
       openFilter: f,
-      resetFilter: () => e(r.UPDATE, { ...t, value: t.defaultValue })
+      resetFilter: () => e(i.UPDATE, { ...t, value: t.defaultValue })
     };
   }
 });
-var Cl = function() {
+var _l = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("bento-base-filter", e._b({ attrs: { "applied-filters-count": e.appliedFiltersCount, "disable-apply-button": e.isApplyButtonDisabled, "disable-secondary-button": e.isSecondaryButtonDisabled, "button-label": e.buttonLabel, "only-slot": e.onlySlot }, on: { apply: e.updateFilter, clear: e.clearFilter, open: e.openFilter, reset: e.resetFilter } }, "bento-base-filter", e.$props, !1), [l("div", { staticClass: "b-range-filter", class: e.conditionalClasses, on: { keydown: function(a) {
     return !a.type.indexOf("key") && e._k(a.keyCode, "enter", 13, a.key, "Enter") ? null : e.updateFilter.apply(null, arguments);
-  } } }, [l("bento-input-field", { ref: "inputTextRef", attrs: { value: e.internalFilterValue ? e.internalFilterValue[0] : "", type: e.BentoInputFieldType.NUMBER, "aria-label": e.$t("from").toString() }, on: { input: e.updateFrom } }, [e._v(" " + e._s(e.$t("from")) + " ")]), l("bento-input-field", { staticClass: "b-range-filter__input-field", attrs: { value: e.internalFilterValue ? e.internalFilterValue[1] : "", type: e.BentoInputFieldType.NUMBER, "aria-label": e.$t("to").toString() }, on: { input: e.updateTo } }, [e._v(" " + e._s(e.$t("to")) + " ")])], 1)]);
-}, gl = [], Sl = /* @__PURE__ */ T(
-  hl,
-  Cl,
-  gl,
+  } } }, [l("bento-input-field", { ref: "inputTextRef", attrs: { value: e.internalFilterValue ? e.internalFilterValue[0] : "", type: "number", "aria-label": e.$t("from").toString() }, on: { input: e.updateFrom } }, [e._v(" " + e._s(e.$t("from")) + " ")]), l("bento-input-field", { staticClass: "b-range-filter__input-field", attrs: { value: e.internalFilterValue ? e.internalFilterValue[1] : "", type: "number", "aria-label": e.$t("to").toString() }, on: { input: e.updateTo } }, [e._v(" " + e._s(e.$t("to")) + " ")])], 1)]);
+}, pl = [], bl = /* @__PURE__ */ A(
+  fl,
+  _l,
+  pl,
   !1,
   null,
-  "d6ac0220",
+  "e51c13b2",
   null,
   null
 );
-const Oe = Sl.exports;
-var ee = /* @__PURE__ */ ((t) => (t.INPUT = "input", t))(ee || {});
-const Al = E({
+const Ie = bl.exports;
+var te = /* @__PURE__ */ ((t) => (t.INPUT = "input", t))(te || {});
+const vl = P({
+  name: "base-filter-button",
+  components: { BaseButton: be, BentoTypography: ee, ChevronUpIcon: me, ChevronDownIcon: Fe },
+  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: [ie.CLICK],
+  setup(t, { slots: e, emit: l, attrs: a }) {
+    const n = r(() => e.default ? ve(e)("default") : null), s = pe({ ariaLabel: n }), u = D(null), d = r(() => {
+      var p;
+      return {
+        "aria-controls": (p = a["aria-controls"]) == null ? void 0 : p.toString()
+      };
+    }), c = r(() => ({
+      ["b-base-filter-button--with-chevron"]: t.hasChevron,
+      ["b-base-filter-button--filter-open"]: t.isFilterOpen
+    }));
+    return {
+      // Values
+      ariaAttributes: d,
+      computedAriaLabel: s,
+      conditionalClasses: c,
+      // Methods
+      onClickButton: () => {
+        t.disabled || l(ie.CLICK);
+      },
+      hasSlot: ye(e),
+      // Refs
+      baseFilterButtonRef: u
+    };
+  }
+});
+var yl = function() {
+  var e = this, l = e._self._c;
+  return e._self._setupProxy, l("base-button", { ref: "baseFilterButtonRef", staticClass: "b-base-filter-button", class: e.conditionalClasses, attrs: { disabled: e.disabled, "aria-label": e.computedAriaLabel, "aria-controls": e.ariaAttributes["aria-controls"], type: "button" }, on: { click: e.onClickButton }, scopedSlots: e._u([e.hasChevron ? { key: "iconRight", fn: function() {
+    return [e.isFilterOpen ? l("chevron-up-icon", { attrs: { "aria-hidden": "true" } }) : l("chevron-down-icon", { attrs: { "aria-hidden": "true" } })];
+  }, proxy: !0 } : null], null, !0) }, [l("div", { staticClass: "b-base-filter-button__default-container" }, [l("bento-typography", { staticClass: "b-base-filter-button__label", attrs: { el: "span", variant: "body", stronger: e.bold } }, [e._t("default")], 2), e.amountAppliedValues && !e.hasChevron ? l("div", { staticClass: "b-base-filter-button__counter-wrapper" }, [l("bento-typography", { staticClass: "b-base-filter-button__counter", attrs: { el: "span", variant: "body", stronger: "" } }, [e._v(" " + e._s(e.amountAppliedValues) + " ")])], 1) : e._e()], 1)]);
+}, ml = [], Fl = /* @__PURE__ */ A(
+  vl,
+  yl,
+  ml,
+  !1,
+  null,
+  "83d1168e",
+  null,
+  null
+);
+const hl = Fl.exports, Cl = P({
   name: "all-filters-modal-button",
-  components: { BaseFilterButton: Ae },
+  components: { BaseFilterButton: hl },
   props: {
     /**
      * Button label to be displayed
@@ -1298,7 +1289,7 @@ const Al = E({
   emits: ["click"],
   setup(t, { emit: e }) {
     return {
-      conditionalClasses: i(() => ({
+      conditionalClasses: r(() => ({
         ["b-all-filters-modal-button--with-counter"]: t.appliedFiltersCount,
         ["b-all-filters-modal-button--filter-open"]: t.isFilterOpen
       })),
@@ -1308,20 +1299,20 @@ const Al = E({
     };
   }
 });
-var Tl = function() {
+var gl = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("base-filter-button", { staticClass: "b-all-filters-modal-button", class: e.conditionalClasses, attrs: { "amount-applied-values": e.appliedFiltersCount, "is-filter-open": e.isFilterOpen, disabled: e.disabled }, on: { click: e.onClick } }, [e._v(" " + e._s(e.label) + " ")]);
-}, El = [], Dl = /* @__PURE__ */ T(
-  Al,
-  Tl,
-  El,
+}, Bl = [], Sl = /* @__PURE__ */ A(
+  Cl,
+  gl,
+  Bl,
   !1,
   null,
   "53602c1c",
   null,
   null
 );
-const Pl = Dl.exports, Ul = {
+const Al = Sl.exports, Tl = {
   "en-US": {
     activeFilters: "Active filters",
     allFilters: "All filters",
@@ -1333,27 +1324,27 @@ const Pl = Dl.exports, Ul = {
     otherFilters: "Other filters",
     searchBar: "Search bar"
   }
-}, Rl = E({
-  i18n: { messages: Ul },
+}, Dl = P({
+  i18n: { messages: Tl },
   name: "all-filters-modal",
   components: {
-    AllFiltersModalButton: Pl,
+    AllFiltersModalButton: Al,
     BentoBooleanFilter: xe,
-    BentoButton: ve,
+    BentoButton: Qe,
     BentoDateFilter: De,
     BentoDateRangeFilter: Pe,
-    BentoInputFilter: Ee,
-    BentoModal: at,
-    BentoRangeFilter: Oe,
+    BentoInputFilter: Te,
+    BentoModal: We,
+    BentoRangeFilter: Ie,
     BentoSearchBar: X,
-    BentoSelectAvatarFilter: Ue,
-    BentoSelectCurrencyFilter: Re,
-    BentoSelectCountryFilter: Ie,
-    BentoSelectFilter: I,
-    BentoSelectPaymentMethodFilter: ke,
-    BentoSelectTagFilter: $e,
-    BentoTypography: ne,
-    FilterBarFilterButton: Te
+    BentoSelectAvatarFilter: Ee,
+    BentoSelectCurrencyFilter: Ue,
+    BentoSelectCountryFilter: ke,
+    BentoSelectFilter: $,
+    BentoSelectPaymentMethodFilter: $e,
+    BentoSelectTagFilter: Re,
+    BentoTypography: ee,
+    FilterBarButton: ne
   },
   props: {
     /**
@@ -1381,10 +1372,10 @@ const Pl = Dl.exports, Ul = {
       default: () => []
     }
   },
-  emits: [ee.INPUT],
+  emits: [te.INPUT],
   setup(t, { emit: e }) {
-    const l = be({ value: t.value }), a = ae("all-filters-modal"), n = A([]), s = A(!1), u = A(0), d = A(null), c = A(""), { t: f } = Y(), p = Fe(c, P(l, "value")), y = A({});
-    te(() => {
+    const l = _e({ value: t.value }), a = ae("all-filters-modal"), n = D([]), s = D(!1), u = D(0), d = D(null), c = D(""), { t: f } = H(), p = Ce(c, E(l, "value")), y = D({});
+    le(() => {
       y.value = [];
     }), Z(
       () => t.value,
@@ -1392,55 +1383,55 @@ const Pl = Dl.exports, Ul = {
         l.value = t.value;
       }
     );
-    const F = (o) => (
+    const v = (o) => (
       /* eslint-disable-next-line no-nested-ternary */
-      o.sort((h, C) => h.label > C.label ? 1 : C.label > h.label ? -1 : 0)
-    ), g = i(
-      () => F(
+      o.sort((C, B) => C.label > B.label ? 1 : B.label > C.label ? -1 : 0)
+    ), g = r(
+      () => v(
         p.value.filter(
           (o) => {
-            var h, C;
-            return Array.isArray(o.value) ? ((h = o.value) == null ? void 0 : h.length) && ((C = o.value) == null ? void 0 : C.find((N) => N !== "")) : o.value;
+            var C, B;
+            return Array.isArray(o.value) ? ((C = o.value) == null ? void 0 : C.length) && ((B = o.value) == null ? void 0 : B.find((N) => N !== "")) : o.value;
           }
         )
       )
-    ), D = i(
-      () => F(
+    ), S = r(
+      () => v(
         p.value.filter(
           (o) => {
-            var h, C;
-            return Array.isArray(o.value) ? ((h = o.value) == null ? void 0 : h.length) === 0 || ((C = o.value) == null ? void 0 : C.every((N) => N === "")) : !o.value;
+            var C, B;
+            return Array.isArray(o.value) ? ((C = o.value) == null ? void 0 : C.length) === 0 || ((B = o.value) == null ? void 0 : B.every((N) => N === "")) : !o.value;
           }
         )
       )
-    ), m = i(() => {
+    ), _ = r(() => {
       var o;
       return c.value && ((o = p.value) == null ? void 0 : o.length) === 0;
-    }), _ = i(() => l.value[u.value]), w = () => {
-      const o = g.value.length ? g.value[0] : D.value[0], h = l.value.findIndex(
-        (C) => C.label === o.label && C.field === o.field
+    }), b = r(() => l.value[u.value]), M = () => {
+      const o = g.value.length ? g.value[0] : S.value[0], C = l.value.findIndex(
+        (B) => B.label === o.label && B.field === o.field
       );
-      u.value = h;
+      u.value = C;
     };
-    qe(() => {
-      w();
+    je(() => {
+      M();
     });
-    const b = i(
+    const m = r(
       () => l.value.map((o) => {
-        var h, C, N, Q, re, ie;
+        var C, B, N, Q, se, oe;
         switch (o.type) {
-          case R.SELECT:
-          case R.SELECT_AVATAR:
-          case R.SELECT_COUNTRY:
-          case R.SELECT_CURRENCY:
-          case R.SELECT_PAYMENT_METHOD:
-          case R.SELECT_TAG:
-            switch ((h = o.options) == null ? void 0 : h.multiple) {
+          case k.SELECT:
+          case k.SELECT_AVATAR:
+          case k.SELECT_COUNTRY:
+          case k.SELECT_CURRENCY:
+          case k.SELECT_PAYMENT_METHOD:
+          case k.SELECT_TAG:
+            switch ((C = o.options) == null ? void 0 : C.multiple) {
               case !0:
                 return {
                   label: o.label,
                   field: o.field,
-                  count: (C = o.value) != null && C.length ? (N = o.value) == null ? void 0 : N.length : null
+                  count: (B = o.value) != null && B.length ? (N = o.value) == null ? void 0 : N.length : null
                 };
               default:
                 return {
@@ -1449,21 +1440,21 @@ const Pl = Dl.exports, Ul = {
                   count: o.value == null ? null : 1
                 };
             }
-          case R.DATE_RANGE:
+          case k.DATE_RANGE:
             return {
               label: o.label,
               field: o.field,
-              count: ((Q = o.value) == null ? void 0 : Q.startDate) != null && ((re = o.value) == null ? void 0 : re.endDate) != null ? 1 : null
+              count: ((Q = o.value) == null ? void 0 : Q.startDate) != null && ((se = o.value) == null ? void 0 : se.endDate) != null ? 1 : null
             };
-          case R.RANGE:
+          case k.RANGE:
             return {
               label: o.label,
               field: o.field,
-              count: (ie = o.value) != null && ie.find((Le) => Le !== "") ? 1 : null
+              count: (oe = o.value) != null && oe.find((Ne) => Ne !== "") ? 1 : null
             };
-          case R.INPUT:
-          case R.BOOLEAN:
-          case R.DATE:
+          case k.INPUT:
+          case k.BOOLEAN:
+          case k.DATE:
           default:
             return {
               label: o.label,
@@ -1472,118 +1463,114 @@ const Pl = Dl.exports, Ul = {
             };
         }
       })
-    ), v = i(
+    ), F = r(
       () => {
         var o;
-        return Array.isArray(_.value.value) ? ((o = _.value) == null ? void 0 : o.value.length) && _.value.value.find((h) => h !== "") : !!l.value[u.value].value;
+        return Array.isArray(b.value.value) ? ((o = b.value) == null ? void 0 : o.value.length) && b.value.value.find((C) => C !== "") : !!l.value[u.value].value;
       }
-    ), S = i(
+    ), T = r(
       () => {
         var o;
         return (
           // eslint-disable-next-line no-return-assign, no-param-reassign
-          (o = b.value) == null ? void 0 : o.reduce((h, C) => h += C.count, 0)
+          (o = m.value) == null ? void 0 : o.reduce((C, B) => C += B.count, 0)
         );
       }
     ), O = () => {
       s.value ? s.value = !1 : s.value = !0;
-    }, G = (o) => b.value.find((h) => h.label === o).count, J = (o, h) => {
+    }, J = (o) => m.value.find((C) => C.label === o).count, K = (o, C) => {
       u.value = l.value.findIndex(
-        (C) => C.label === o && C.field === h
+        (B) => B.label === o && B.field === C
       );
     }, U = () => {
       c.value = "";
-    }, k = () => {
-      s.value = !1, l.value = t.value, U(), w();
+    }, R = () => {
+      s.value = !1, l.value = t.value, U(), M();
     }, V = (o) => {
-      const h = l.value.map(({ value: C, ...N }, Q) => Q === u.value ? { value: o.value, ...N } : { value: C, ...N });
-      l.value = h;
-    }, $ = () => {
+      const C = l.value.map(({ value: B, ...N }, Q) => Q === u.value ? { value: o.value, ...N } : { value: B, ...N });
+      l.value = C;
+    }, x = () => {
       V({
-        field: _.value.field,
-        label: _.value.label,
-        type: _.value.type,
+        field: b.value.field,
+        label: b.value.label,
+        type: b.value.type,
         value: void 0
       });
-    }, B = () => {
-      l.value = l.value.map(({ value: o, ...h }) => ({
-        ...h,
+    }, h = () => {
+      l.value = l.value.map(({ value: o, ...C }) => ({
+        ...C,
         value: void 0
       }));
     }, L = () => {
-      e(ee.INPUT, l.value), s.value = !1;
-    }, Ve = i(
+      e(te.INPUT, l.value), s.value = !1;
+    }, Oe = r(
       () => JSON.stringify(l.value) === JSON.stringify(t.value)
-    ), Ne = i(() => [
+    ), Ve = r(() => [
       {
         title: f("applyAll"),
-        disabled: Ve.value,
+        disabled: Oe.value,
         event: L
       },
       {
         title: f("cancel"),
-        event: k
+        event: R
       },
       {
         title: f("clearAll"),
-        disabled: !S.value,
-        event: B
+        disabled: !T.value,
+        event: h
       }
     ]);
     return {
       // Enums
-      BentoModalEvent: nt,
-      BentoModalSize: st,
-      BentoButtonVariant: le,
-      BentoTypographyElement: se,
-      BentoTypographyVariant: oe,
+      BentoModalEvent: Ze,
       // Values
       allFiltersModalUniqueId: a,
       allFiltersModalFiltersSection: n,
       allFiltersModalFilterButtons: y,
-      numberOfActiveFilters: S,
-      isEmptyResultForSearchFilter: m,
+      numberOfActiveFilters: T,
+      isEmptyResultForSearchFilter: _,
       isModalOpen: s,
-      isClearButtonEnabled: v,
+      isClearButtonEnabled: F,
       activeFilters: g,
-      otherFilters: D,
-      modalActions: Ne,
-      selectedFilter: _,
+      otherFilters: S,
+      modalActions: Ve,
+      selectedFilter: b,
       selectedFilterRef: d,
       filters: l,
-      computedCounts: b,
+      computedCounts: m,
       searchTerm: c,
       // Methods
       onClickAllFiltersModal: O,
-      getFilterCount: G,
-      cancel: k,
-      selectFilter: J,
-      clearFilter: $,
+      getFilterCount: J,
+      cancel: R,
+      selectFilter: K,
+      clearFilter: x,
       updateFilter: V,
       onSearchbarClear: U,
       onKeydownRight: () => {
-        rt(1, d.value.$el).focus();
+        et(1, d.value.$el).focus();
       },
       onKeydownLeft: () => {
-        y.value[_.value.label].$el.focus();
+        y.value[b.value.label].$el.focus();
       }
     };
   }
 });
-var Il = function() {
+var Pl = function() {
   var e = this, l = e._self._c;
-  return e._self._setupProxy, l("div", { staticClass: "b-all-filters-modal" }, [l("filter-bar-filter-button", { attrs: { label: e.$t("allFilters").toString(), "is-filter-open": e.isModalOpen, "applied-filters-count": e.numberOfActiveFilters }, on: { click: e.onClickAllFiltersModal } }), l("bento-modal", { staticClass: "'b-all-filters-modal__modal'", attrs: { "is-open": e.isModalOpen, "with-column-layout": !0, size: e.BentoModalSize.LARGE, actions: e.modalActions, "is-dismissible": !1, "hide-close-button": "" }, on: { "close-modal": e.cancel }, scopedSlots: e._u([{ key: "default", fn: function() {
+  return e._self._setupProxy, l("div", { staticClass: "b-all-filters-modal" }, [l("filter-bar-button", { attrs: { "is-filter-open": e.isModalOpen, "applied-filters-count": e.numberOfActiveFilters }, on: { click: e.onClickAllFiltersModal } }, [e._v(" " + e._s(e.$t("allFilters")) + " ")]), l("bento-modal", { staticClass: "'b-all-filters-modal__modal'", attrs: { "is-open": e.isModalOpen, "with-column-layout": !0, size: "large", actions: e.modalActions, "is-dismissible": !1, "hide-close-button": "" }, on: { "close-modal": e.cancel }, scopedSlots: e._u([{ key: "default", fn: function() {
     return [e._v(" " + e._s(e.$t("allFilters")) + " ")];
   }, proxy: !0 }, { key: "content-col-1", fn: function() {
     return [l("div", { ref: "allFiltersModalFiltersSection", staticClass: "b-all-filters-modal__filters", on: { keydown: function(a) {
       return !a.type.indexOf("key") && e._k(a.keyCode, "right", 39, a.key, ["Right", "ArrowRight"]) || "button" in a && a.button !== 2 ? null : e.onKeydownRight.apply(null, arguments);
     } } }, [l("bento-search-bar", { staticClass: "b-all-filters-modal__search-bar", attrs: { value: e.searchTerm, "input-field-aria-label": e.$t("searchBar").toString() }, on: { input: function(a) {
       e.searchTerm = a;
-    }, clear: e.onSearchbarClear } }), e.isEmptyResultForSearchFilter ? l("div", { staticClass: "b-all-filters-modal__empty-search-message" }, [l("bento-typography", { attrs: { el: e.BentoTypographyElement.SPAN } }, [e._v(" " + e._s(e.$t("noFiltersMatchThisSearch")))])], 1) : e._e(), e.activeFilters.length ? l("div", { staticClass: "b-all-filters-modal__filters-section" }, [l("bento-typography", { staticClass: "b-all-filters-modal__filters-section-title", attrs: { id: `active-filters-${e.allFiltersModalUniqueId}`, el: e.BentoTypographyElement.SPAN, variant: e.BentoTypographyVariant.CAPTION } }, [e._v(" " + e._s(e.$t("activeFilters")))]), l("ul", { staticClass: "b-all-filters-modal__filters-list", attrs: { "aria-labelledby": `active-filters-${e.allFiltersModalUniqueId}` } }, e._l(e.activeFilters, function(a) {
+    }, clear: e.onSearchbarClear } }), e.isEmptyResultForSearchFilter ? l("div", { staticClass: "b-all-filters-modal__empty-search-message" }, [l("bento-typography", { attrs: { el: "span" } }, [e._v(" " + e._s(e.$t("noFiltersMatchThisSearch")))])], 1) : e._e(), e.activeFilters.length ? l("div", { staticClass: "b-all-filters-modal__filters-section" }, [l("bento-typography", { staticClass: "b-all-filters-modal__filters-section-title", attrs: { id: `active-filters-${e.allFiltersModalUniqueId}`, el: "span", variant: "caption" } }, [e._v(" " + e._s(e.$t("activeFilters")))]), l("ul", { staticClass: "b-all-filters-modal__filters-list", attrs: { "aria-labelledby": `active-filters-${e.allFiltersModalUniqueId}` } }, e._l(e.activeFilters, function(a) {
       return l("li", { key: `${a.label}-${a.field}` }, [l("all-filters-modal-button", { ref: (n) => e.allFiltersModalFilterButtons[a.label] = n, refInFor: !0, attrs: { label: a.label, "applied-filters-count": e.getFilterCount(a.label), "is-filter-open": e.selectedFilter.label === a.label }, on: { click: function(n) {
         return e.selectFilter(a.label, a.field);
       } } })], 1);
-    }), 0)], 1) : e._e(), e.otherFilters.length ? l("div", { staticClass: "b-all-filters-modal__filters-section" }, [e.activeFilters.length ? l("bento-typography", { staticClass: "b-all-filters-modal__filters-section-title", attrs: { id: `other-filters-${e.allFiltersModalUniqueId}`, el: e.BentoTypographyElement.SPAN, variant: e.BentoTypographyVariant.CAPTION } }, [e._v(" " + e._s(e.$t("otherFilters")))]) : e._e(), l("ul", { staticClass: "b-all-filters-modal__filters-list", attrs: { "aria-labelledby": `other-filters-${e.allFiltersModalUniqueId}` } }, e._l(e.otherFilters, function(a) {
+    }), 0)], 1) : e._e(), e.otherFilters.length ? l("div", { staticClass: "b-all-filters-modal__filters-section" }, [e.activeFilters.length ? l("bento-typography", { staticClass: "b-all-filters-modal__filters-section-title", attrs: { id: `other-filters-${e.allFiltersModalUniqueId}`, el: "span", variant: "caption" } }, [e._v(" " + e._s(e.$t("otherFilters")))]) : e._e(), l("ul", { staticClass: "b-all-filters-modal__filters-list", attrs: { "aria-labelledby": `other-filters-${e.allFiltersModalUniqueId}` } }, e._l(e.otherFilters, function(a) {
       return l("li", { key: `${a.label}-${a.field}` }, [l("all-filters-modal-button", { ref: (n) => e.allFiltersModalFilterButtons[a.label] = n, refInFor: !0, attrs: { label: a.label, "applied-filters-count": e.getFilterCount(a.label), "is-filter-open": e.selectedFilter.label === a.label }, on: { click: function(n) {
         return e.selectFilter(a.label, a.field);
       } } })], 1);
@@ -1591,19 +1578,39 @@ var Il = function() {
   }, proxy: !0 }, { key: "content-col-2", fn: function() {
     return [l("div", { staticClass: "b-all-filters-modal__selected-filter-content", on: { keydown: function(a) {
       return !a.type.indexOf("key") && e._k(a.keyCode, "left", 37, a.key, ["Left", "ArrowLeft"]) || "button" in a && a.button !== 0 ? null : e.onKeydownLeft.apply(null, arguments);
-    } } }, [l("div", { staticClass: "b-all-filters-modal__selected-filter-text" }, [l("bento-typography", { attrs: { el: e.BentoTypographyElement.DIV, variant: e.BentoTypographyVariant.TITLE, medium: "" } }, [e._v(e._s(e.selectedFilter.label))]), e.selectedFilter.description ? l("bento-typography", { attrs: { el: e.BentoTypographyElement.DIV, variant: e.BentoTypographyVariant.BODY, wide: "" } }, [e._v(" " + e._s(e.selectedFilter.description) + " ")]) : e._e()], 1), l("div", { staticClass: "b-all-filters-modal__selected-filter-component" }, [l(e.selectedFilter.type, { key: e.selectedFilter.field, ref: "selectedFilterRef", tag: "component", attrs: { field: e.selectedFilter.field, label: e.selectedFilter.label, options: e.selectedFilter.options, value: e.selectedFilter.value, "default-value": e.selectedFilter.defaultValue, "only-slot": !0 }, on: { input: e.updateFilter } })], 1), l("div", { staticClass: "b-all-filters-modal__clear-button" }, [l("bento-button", { attrs: { variant: e.BentoButtonVariant.SECONDARY, disabled: !e.isClearButtonEnabled }, on: { click: e.clearFilter } }, [e._v(e._s(e.$t("clear")))])], 1)])];
+    } } }, [l("div", { staticClass: "b-all-filters-modal__selected-filter-text" }, [l("bento-typography", { attrs: { el: "div", variant: "title", medium: "" } }, [e._v(e._s(e.selectedFilter.label))]), e.selectedFilter.description ? l("bento-typography", { attrs: { el: "div", variant: "body", wide: "" } }, [e._v(" " + e._s(e.selectedFilter.description) + " ")]) : e._e()], 1), l("div", { staticClass: "b-all-filters-modal__selected-filter-component" }, [l(e.selectedFilter.type, { key: e.selectedFilter.field, ref: "selectedFilterRef", tag: "component", attrs: { field: e.selectedFilter.field, label: e.selectedFilter.label, options: e.selectedFilter.options, value: e.selectedFilter.value, "default-value": e.selectedFilter.defaultValue, "only-slot": !0 }, on: { input: e.updateFilter } })], 1), l("div", { staticClass: "b-all-filters-modal__clear-button" }, [l("bento-button", { attrs: { variant: "secondary", disabled: !e.isClearButtonEnabled }, on: { click: e.clearFilter } }, [e._v(e._s(e.$t("clear")))])], 1)])];
   }, proxy: !0 }]) })], 1);
-}, kl = [], $l = /* @__PURE__ */ T(
+}, El = [], Ul = /* @__PURE__ */ A(
+  Dl,
+  Pl,
+  El,
+  !1,
+  null,
+  "72f56264",
+  null,
+  null
+);
+const kl = Ul.exports;
+let fe = 0;
+const $l = {
+  beforeCreate() {
+    this.uuid = fe.toString(), fe += 1;
+  }
+};
+var Rl = function() {
+  var e = this, l = e._self._c;
+  return l("svg", e._b({ attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", e.$attrs, !1), [e.$attrs["svg-title"] ? l("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), l("path", { attrs: { fill: "#00112C", "fill-rule": "evenodd", d: "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" } })]);
+}, xl = [], Il = /* @__PURE__ */ A(
+  $l,
   Rl,
-  Il,
-  kl,
+  xl,
   !1,
   null,
-  "c7d27114",
+  "35088f28",
   null,
   null
 );
-const xl = $l.exports, Ol = {
+const Ol = Il.exports, Vl = {
   "en-US": {
     clearAll: "Clear all",
     filtersHaveBeenCleared: "Filters have been cleared.",
@@ -1612,24 +1619,25 @@ const xl = $l.exports, Ol = {
     resetAll: "Reset all",
     searchBar: "Search bar"
   }
-}, Vl = E({
-  i18n: { messages: Ol },
+}, Nl = P({
+  i18n: { messages: Vl },
   name: "bento-filter-bar",
   components: {
-    AllFiltersModal: xl,
-    BentoButton: ve,
+    AllFiltersModal: kl,
+    FilterBarButton: ne,
     BentoBooleanFilter: xe,
     BentoDateFilter: De,
     BentoDateRangeFilter: Pe,
-    BentoRangeFilter: Oe,
-    BentoInputFilter: Ee,
-    BentoSelectFilter: I,
-    BentoSelectAvatarFilter: Ue,
-    BentoSelectCountryFilter: Ie,
-    BentoSelectCurrencyFilter: Re,
-    BentoSelectPaymentMethodFilter: ke,
-    BentoSelectTagFilter: $e,
-    BentoSearchBar: X
+    BentoRangeFilter: Ie,
+    BentoInputFilter: Te,
+    BentoSelectFilter: $,
+    BentoSelectAvatarFilter: Ee,
+    BentoSelectCountryFilter: ke,
+    BentoSelectCurrencyFilter: Ue,
+    BentoSelectPaymentMethodFilter: $e,
+    BentoSelectTagFilter: Re,
+    BentoSearchBar: X,
+    RefreshIcon: Ol
   },
   props: {
     /**
@@ -1666,17 +1674,17 @@ const xl = $l.exports, Ol = {
     }
   },
   emits: [
-    M.INPUT,
-    H.CLEAR,
-    H.INPUT,
-    H.UPDATE
+    w.INPUT,
+    j.CLEAR,
+    j.INPUT,
+    j.UPDATE
   ],
   setup(t, { emit: e }) {
-    const { t: l } = Y(), a = lt(), n = i(() => l("searchBar")), s = i(() => t.value.some(({ visible: v }) => v != null) ? t.value.some(({ visible: v }) => !v) : !1), u = i(
-      () => t.value.filter(({ defaultValue: b }) => b !== void 0)
-    ), d = i(() => t.value.some(({ visible: v }) => v != null) ? t.value.filter(({ defaultValue: v, visible: S }) => v === void 0 && S) : t.value.filter(({ defaultValue: v }) => v === void 0)), c = i(() => t.searchTerm != null), f = i(
-      () => t.value.filter(({ defaultValue: b }) => b == null).some(({ value: b }) => b != null)
-    ), p = i(() => u.value.length === 0 && f.value), y = i(() => u.value.length === 0 ? !1 : !t.value.filter(({ defaultValue: v }) => v !== void 0 || v !== null).every(({ value: v, defaultValue: S }) => JSON.stringify(v) === JSON.stringify(S)) || f.value);
+    const { t: l } = H(), a = Ge(), n = r(() => l("searchBar")), s = r(() => t.value.some(({ visible: F }) => F != null) ? t.value.some(({ visible: F }) => !F) : !1), u = r(
+      () => t.value.filter(({ defaultValue: m }) => m !== void 0)
+    ), d = r(() => t.value.some(({ visible: F }) => F != null) ? t.value.filter(({ defaultValue: F, visible: T }) => F === void 0 && T) : t.value.filter(({ defaultValue: F }) => F === void 0)), c = r(() => t.searchTerm != null), f = r(
+      () => t.value.filter(({ defaultValue: m }) => m == null).some(({ value: m }) => m != null)
+    ), p = r(() => u.value.length === 0 && f.value), y = r(() => u.value.length === 0 ? !1 : !t.value.filter(({ defaultValue: F }) => F !== void 0 || F !== null).every(({ value: F, defaultValue: T }) => JSON.stringify(F) === JSON.stringify(T)) || f.value);
     return {
       // Values
       hasHiddenFilters: s,
@@ -1686,74 +1694,76 @@ const xl = $l.exports, Ol = {
       persistentFilters: u,
       regularFilters: d,
       isResetAllVisible: y,
-      // Enums
-      BentoButtonVariant: le,
       // Events
-      updateAllFilters: (b) => {
-        e(M.INPUT, b);
+      updateAllFilters: (m) => {
+        e(w.INPUT, m);
       },
-      updateFilterHandler: (b) => {
-        const v = t.value.findIndex((O) => O.field === b.field), S = t.value.slice();
-        S[v].value = b.value, e(M.INPUT, S);
+      updateFilterHandler: (m) => {
+        const F = t.value.findIndex((O) => O.field === m.field), T = t.value.slice();
+        T[F].value = m.value, e(w.INPUT, T);
       },
       clearAllFilters: () => {
-        const b = t.value.slice(), v = t.value.map(({ value: S, ...O }) => ({
+        const m = t.value.slice(), F = t.value.map(({ value: T, ...O }) => ({
           ...O,
           value: void 0
         }));
         a.addToast({
           text: l("filtersHaveBeenCleared"),
           action: {
-            handler: () => e(M.INPUT, b),
+            handler: () => e(w.INPUT, m),
             text: l("undo")
           }
-        }), e(M.INPUT, v);
+        }), e(w.INPUT, F);
       },
       onSearchbarClear: () => {
-        e(H.CLEAR);
+        e(j.CLEAR);
       },
-      onSearchbarInput: (b) => {
-        e(H.INPUT, b), e(H.UPDATE, b);
+      onSearchbarInput: (m) => {
+        e(j.INPUT, m), e(j.UPDATE, m);
       },
       resetAllFilters: () => {
-        const b = t.value.slice(), v = t.value.map(({ defaultValue: S, ...O }) => ({
+        const m = t.value.slice(), F = t.value.map(({ defaultValue: T, ...O }) => ({
           ...O,
-          defaultValue: S,
-          value: S
+          defaultValue: T,
+          value: T
         }));
         a.addToast({
           text: l("filtersHaveBeenReset"),
           action: {
-            handler: () => e(M.INPUT, b),
+            handler: () => e(w.INPUT, m),
             text: l("undo")
           }
-        }), e(M.INPUT, v);
+        }), e(w.INPUT, F);
       }
     };
   }
 });
-var Nl = function() {
+var Ll = function() {
   var e = this, l = e._self._c;
   return e._self._setupProxy, l("div", { staticClass: "b-filter-bar" }, [l("div", { staticClass: "b-filter-bar__filters-wrapper" }, [e.persistentFilters.length ? l("div", { staticClass: "b-filter-bar__persistent-filters" }, e._l(e.persistentFilters, function(a) {
     return l(a.type, { key: a.field, tag: "component", attrs: { field: a.field, label: a.label, options: a.options, value: a.value, "default-value": a.defaultValue }, on: { update: e.updateFilterHandler } });
   }), 1) : e._e(), l("div", { staticClass: "b-filter-bar__regular-filters" }, [e._l(e.regularFilters, function(a) {
     return l(a.type, { key: a.field, tag: "component", attrs: { field: a.field, label: a.label, options: a.options, value: a.value }, on: { update: e.updateFilterHandler } });
-  }), e.hasHiddenFilters ? l("all-filters-modal", { attrs: { value: e.value }, on: { input: e.updateAllFilters } }) : e._e()], 2), l("bento-button", { directives: [{ name: "show", rawName: "v-show", value: e.isClearAllVisible, expression: "isClearAllVisible" }], staticClass: "b-filter-bar__clear-all", attrs: { variant: e.BentoButtonVariant.TERTIARY }, on: { click: e.clearAllFilters } }, [e._v(e._s(e.$t("clearAll")))]), l("bento-button", { directives: [{ name: "show", rawName: "v-show", value: e.isResetAllVisible, expression: "isResetAllVisible" }], staticClass: "b-filter-bar__reset-all", attrs: { variant: e.BentoButtonVariant.TERTIARY }, on: { click: e.resetAllFilters } }, [e._v(" " + e._s(e.$t("resetAll")) + " ")])], 1), e.isSearchBarEnabled ? l("bento-search-bar", { staticClass: "b-filter-bar__search-bar", attrs: { "input-field-aria-label": e.searchBarAriaLabel, value: e.searchTerm }, on: { input: e.onSearchbarInput, clear: e.onSearchbarClear } }) : e._e()], 1);
-}, Ll = [], Ml = /* @__PURE__ */ T(
-  Vl,
+  }), e.hasHiddenFilters ? l("all-filters-modal", { attrs: { value: e.value }, on: { input: e.updateAllFilters } }) : e._e()], 2), l("filter-bar-button", { directives: [{ name: "show", rawName: "v-show", value: e.isClearAllVisible, expression: "isClearAllVisible" }], on: { click: e.clearAllFilters }, scopedSlots: e._u([{ key: "iconLeft", fn: function() {
+    return [l("refresh-icon", { attrs: { "aria-hidden": "true" } })];
+  }, proxy: !0 }]) }, [e._v(" " + e._s(e.$t("clearAll")) + " ")]), l("filter-bar-button", { directives: [{ name: "show", rawName: "v-show", value: e.isResetAllVisible, expression: "isResetAllVisible" }], staticClass: "b-filter-bar__reset-all", on: { click: e.resetAllFilters }, scopedSlots: e._u([{ key: "iconLeft", fn: function() {
+    return [l("refresh-icon", { attrs: { "aria-hidden": "true" } })];
+  }, proxy: !0 }]) }, [e._v(" " + e._s(e.$t("resetAll")) + " ")])], 1), e.isSearchBarEnabled ? l("bento-search-bar", { staticClass: "b-filter-bar__search-bar", attrs: { "input-field-aria-label": e.searchBarAriaLabel, value: e.searchTerm }, on: { input: e.onSearchbarInput, clear: e.onSearchbarClear } }) : e._e()], 1);
+}, wl = [], Ml = /* @__PURE__ */ A(
   Nl,
   Ll,
+  wl,
   !1,
   null,
-  "f9c04e11",
+  "19958cbd",
   null,
   null
 );
-const ga = Ml.exports;
+const Aa = Ml.exports;
 export {
-  ga as BentoFilterBar,
-  M as BentoFilterBarEvent,
-  r as BentoFilterEvent,
-  R as BentoFilterItemType
+  Aa as BentoFilterBar,
+  w as BentoFilterBarEvent,
+  i as BentoFilterEvent,
+  k as BentoFilterItemType
 };
 //# sourceMappingURL=filter-bar.js.map