@adyen/bento-vue2 1.55.1 → 1.56.0

package/dist/chunks/{filter-bar.Djv7J4G1.js → filter-bar.C3-x0K8J.js}

@@ -1,48 +1,51 @@
-import { defineComponent as V, useSlots as ie, useAttrs as Ye, computed as r, ref as U, watch as K, nextTick as Ae, toRef as $, onBeforeUpdate as ue, provide as De, reactive as We, onMounted as Te } from "vue";
-import { B as me, I as Ke, b as ze } from "./popover.BVLuUYSi.js";
-import { u as z } from "./i18n.BQkEbtPM.js";
-import { g as pe } from "./generate-uid.NJ8tVoha.js";
-import { B as Ge, u as Ze } from "./teleport.5oodkxuB.js";
+import { defineComponent as x, useSlots as ie, useAttrs as Ke, computed as r, ref as P, watch as z, nextTick as Te, toRef as w, onBeforeUpdate as ue, provide as Ie, reactive as Ze, onMounted as Pe } from "vue";
+import { B as me, I as Qe, b as Xe } from "./popover.Bb9JeZVy.js";
+import { u as G } from "./i18n.BQkEbtPM.js";
+import { g as fe } from "./generate-uid.NJ8tVoha.js";
+import { u as et } from "./use-click-outside.BnhTgpSt.js";
 import "./index.Cl4_42j5.js";
-import { B as se, d as fe } from "./typography.J1v_SPG3.js";
-import { u as Pe } from "./aria-label.CaUURpnB.js";
-import { B as Ie, a as Fe } from "./base-button.-gx_u8Bd.js";
-import { g as Ee } from "./get-slot-text.BQS5Olxm.js";
-import { u as Ue } from "./use-has-slot.C9lQZ6nz.js";
-import { n as x } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { a as Qe } from "./tooltip.CfER_5In.js";
-import { B as Xe } from "./directive.Cbdox5VL.js";
-import { B as et } from "./radio-group.BuKC_n23.js";
+import { C as tt } from "./cross-small.CZqsjZDz.js";
+import { n as $ } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
+import { B as Ee, a as Fe } from "./base-button.-gx_u8Bd.js";
+import { B as se, d as pe } from "./typography.J1v_SPG3.js";
+import { u as Le } from "./use-has-slot.C9lQZ6nz.js";
+import { u as Re } from "./aria-label.CaUURpnB.js";
+import { g as Ue } from "./get-slot-text.BQS5Olxm.js";
+import { a as lt } from "./tooltip.CfER_5In.js";
+import { B as at } from "./directive.Cbdox5VL.js";
+import { B as Oe } from "./teleport.BV6zrDjA.js";
+import { B as nt } from "./radio-group.BuKC_n23.js";
 import { t as le } from "./chip.BeK9uqmW.js";
-import { B as be } from "./input-field.DcOnDLTc.js";
-import { B as ve, b as te } from "./search-bar.BPnYyZ9S.js";
-import { B as tt } from "./modal.CpZzd8fG.js";
-import { g as lt } from "./base-modal.CEHMcrwC.js";
-import { B as at } from "./button.DUApwEu1.js";
-import { u as Re, B as nt } from "./dropdown.DihPVajz.js";
-import { g as ot } from "./focus-trap.DEHn1dxN.js";
-import { a as st, C as rt } from "./chevron-up.CSVyoaTy.js";
+import { B as be } from "./input-field._ceh_k5o.js";
+import { B as ve, b as te } from "./search-bar.BxZHV9BD.js";
+import { b as ot } from "./index.48Mn1OCp.js";
+import { F as $e } from "./fixed-scroller.BJh4fxeV.js";
+import { B as st } from "./modal.BL-FWXsY.js";
+import { g as rt } from "./base-modal.B9JnRNty.js";
+import { B as it } from "./button.D7K0uXQm.js";
+import { u as xe, B as ut } from "./dropdown.aeiLxODy.js";
+import { g as ct } from "./focus-trap.DEHn1dxN.js";
+import { a as dt, C as ft } from "./chevron-up.CSVyoaTy.js";
 /* empty css              */
 import { B as _e } from "./divider.Cc4JFWG_.js";
-import { c as he, b as it } from "./use-cached-selected-values.D6lOsd0o.js";
-import { L as xe } from "./listbox-option-tag.BSQ8bM-O.js";
-import { B as ut } from "./payment-method.Cx4nPDtE.js";
-import { u as ct } from "./use-country-items.HFnjuDsG.js";
-import { B as dt } from "./avatar.BgwjpLQO.js";
-import { D as pt, B as ft, i as ce, b as bt } from "./date-range-picker.B03wCOPP.js";
-import { g as Le } from "./get-date-locale.BN8xEjY0.js";
-import { a as vt, i as _t } from "./calendar.C9bRwE-l.js";
+import { c as he, b as pt } from "./use-cached-selected-values.DHN-_Me4.js";
+import { L as ke } from "./listbox-option-tag.BSQ8bM-O.js";
+import { B as bt } from "./payment-method.Cx4nPDtE.js";
+import { u as vt } from "./use-country-items.HFnjuDsG.js";
+import { B as _t } from "./avatar.BgwjpLQO.js";
+import { D as yt, B as mt, i as ce, b as Ft } from "./date-range-picker.PzjjjdoC.js";
+import { g as Ve } from "./get-date-locale.BN8xEjY0.js";
+import { a as ht, i as St } from "./calendar.CiLR27-B.js";
 import { f as Q } from "./date.dYFFEunA.js";
-import { B as yt } from "./button-actions.C5Dp4DeK.js";
+import { B as gt } from "./button-actions.ZBlB7bp4.js";
 import { D as Se } from "./date-input.BqBdAO1E.js";
-import { B as mt } from "./date-picker.DPSJvBlj.js";
-import { R as Ft } from "./refresh.Bc9FzGjJ.js";
-import { u as ht } from "./use-bento-toast-controller.Cn_2Eogn.js";
-import { F as St } from "./fixed-scroller.C7Eug22g.js";
+import { B as Bt } from "./date-picker.2shSM0mi.js";
+import { R as Ct } from "./refresh.Bc9FzGjJ.js";
+import { u as Dt } from "./use-bento-toast-controller.Cn_2Eogn.js";
 import "../assets/filter-bar.css";
-var v = /* @__PURE__ */ ((a) => (a.INPUT = "input", a.UPDATE = "update", a))(v || {}), oe = /* @__PURE__ */ ((a) => (a.INPUT = "input", a.UPDATE_FILTER_VALUES = "update:filter-values", a))(oe || {}), J = /* @__PURE__ */ ((a) => (a.BOOLEAN = "BentoBooleanFilter", a.RANGE = "BentoRangeFilter", a.INPUT = "BentoInputFilter", a.INPUT_DROPDOWN = "BentoInputWithDropdownFilter", a.SELECT = "BentoSelectFilter", a.SELECT_AVATAR = "BentoSelectAvatarFilter", a.SELECT_COUNTRY = "BentoSelectCountryFilter", a.SELECT_CURRENCY = "BentoSelectCurrencyFilter", a.SELECT_PAYMENT_METHOD = "BentoSelectPaymentMethodFilter", a.SELECT_TAG = "BentoSelectTagFilter", a.DATE = "BentoDateFilter", a.DATE_RANGE = "BentoDateRangeFilter", a))(J || {});
-const Bt = {}, gt = /* @__PURE__ */ V({
-  ...Bt,
+var v = /* @__PURE__ */ ((a) => (a.INPUT = "input", a.UPDATE = "update", a))(v || {}), oe = /* @__PURE__ */ ((a) => (a.INPUT = "input", a.UPDATE_FILTER_VALUES = "update:filter-values", a))(oe || {}), Y = /* @__PURE__ */ ((a) => (a.BOOLEAN = "BentoBooleanFilter", a.RANGE = "BentoRangeFilter", a.INPUT = "BentoInputFilter", a.INPUT_DROPDOWN = "BentoInputWithDropdownFilter", a.SELECT = "BentoSelectFilter", a.SELECT_AVATAR = "BentoSelectAvatarFilter", a.SELECT_COUNTRY = "BentoSelectCountryFilter", a.SELECT_CURRENCY = "BentoSelectCurrencyFilter", a.SELECT_PAYMENT_METHOD = "BentoSelectPaymentMethodFilter", a.SELECT_TAG = "BentoSelectTagFilter", a.DATE = "BentoDateFilter", a.DATE_RANGE = "BentoDateRangeFilter", a))(Y || {});
+const At = {}, Tt = /* @__PURE__ */ x({
+  ...At,
   __name: "filter-bar-button",
   props: {
     /**
@@ -75,46 +78,76 @@ const Bt = {}, gt = /* @__PURE__ */ V({
   },
   emits: ["click"],
   setup(a, { emit: e }) {
-    const t = a, l = ie(), n = Ye(), o = Ue(l), s = r(() => l.default ? Ee(l)("default") : null), b = Pe({ ariaLabel: s }), c = U(null), f = r(() => {
-      var B;
+    const t = a, l = ie(), n = Ke(), o = Le(l), s = r(() => l.default ? Ue(l)("default") : null), c = r(() => !o("default") && o("iconLeft")), u = Re({ ariaLabel: s }), f = P(null), F = r(() => {
+      var D;
       return {
-        "aria-controls": (B = n["aria-controls"]) == null ? void 0 : B.toString()
+        "aria-controls": (D = n["aria-controls"]) == null ? void 0 : D.toString()
       };
-    }), _ = r(
+    }), h = r(
       () => (t.appliedFiltersCount || t.secondaryLabel || t.isPersistentFilter) && !t.noAppliedStateStyles
-    ), g = r(() => ({
-      "b-filter-bar-button--applied": _.value,
-      "b-filter-bar-button--filter-open": t.isFilterOpen && !_.value,
-      "b-filter-bar-button--filter-open-applied": t.isFilterOpen && _.value,
+    ), m = r(() => ({
+      "b-filter-bar-button--applied": h.value,
+      "b-filter-bar-button--filter-open": t.isFilterOpen && !h.value,
+      "b-filter-bar-button--filter-open-applied": t.isFilterOpen && h.value,
       "b-filter-bar-button--with-secondary-label": t.secondaryLabel,
-      "b-filter-bar-button--with-counter": t.appliedFiltersCount
+      "b-filter-bar-button--with-counter": t.appliedFiltersCount,
+      "b-filter-bar-button--icon-only": c.value
     }));
-    return { __sfc: !0, props: t, emit: e, slots: l, attrs: n, hasSlot: o, labelSlot: s, computedAriaLabel: b, filterBarButtonRef: c, ariaAttributes: f, isAppliedFilter: _, conditionalClasses: g, onClickButton: (B) => {
-      B.preventDefault(), t.disabled || e("click", B);
-    }, BentoTypography: se, BaseButton: Ie };
+    return { __sfc: !0, props: t, emit: e, slots: l, attrs: n, hasSlot: o, labelSlot: s, isIconOnly: c, computedAriaLabel: u, filterBarButtonRef: f, ariaAttributes: F, isAppliedFilter: h, conditionalClasses: m, onClickButton: (D) => {
+      D.preventDefault(), t.disabled || e("click", D);
+    }, BaseButton: Ee, BentoTypography: se };
   }
 });
-var Ct = function() {
+var It = function() {
   var e = this, t = e._self._c, l = e._self._setupProxy;
   return t(l.BaseButton, { ref: "filterBarButtonRef", staticClass: "b-filter-bar-button", class: l.conditionalClasses, attrs: { disabled: e.disabled, "aria-label": l.computedAriaLabel, "aria-controls": l.ariaAttributes["aria-controls"], type: "button" }, on: { click: l.onClickButton }, scopedSlots: e._u([{ key: "iconRight", fn: function() {
-    return [e.appliedFiltersCount ? t(l.BentoTypography, { staticClass: "b-filter-bar-button__counter", attrs: { el: "span", variant: "body", stronger: "" } }, [e._v(" " + e._s(e.appliedFiltersCount) + " ")]) : e._e()];
-  }, proxy: !0 }]) }, [t("div", { staticClass: "b-filter-bar-button__container" }, [l.hasSlot("iconLeft") ? [e._t("iconLeft")] : e._e(), t("div", { staticClass: "b-filter-bar-button__label-container" }, [t(l.BentoTypography, { staticClass: "b-filter-bar-button__label", attrs: { el: "span", variant: "body", stronger: "" } }, [t("span", [e._t("default")], 2), e.secondaryLabel ? t(l.BentoTypography, { staticClass: "b-filter-bar-button__label", attrs: { el: "span", variant: "body", stronger: "" } }, [e._v(":")]) : e._e()], 1), e.secondaryLabel ? t(l.BentoTypography, { staticClass: "b-filter-bar-button__secondary-label", attrs: { el: "span", variant: "body", stronger: "" } }, [e._v(" " + e._s(e.secondaryLabel) + " ")]) : e._e()], 1)], 2)]);
-}, At = [], Dt = /* @__PURE__ */ x(
-  gt,
-  Ct,
-  At,
+    return [e.appliedFiltersCount && !l.isIconOnly ? t(l.BentoTypography, { staticClass: "b-filter-bar-button__counter", attrs: { el: "span", variant: "body", stronger: "" } }, [e._v(" " + e._s(e.appliedFiltersCount) + " ")]) : e._e()];
+  }, proxy: !0 }]) }, [t("div", { staticClass: "b-filter-bar-button__container" }, [l.hasSlot("iconLeft") ? [e._t("iconLeft")] : e._e(), t("div", { staticClass: "b-filter-bar-button__label-container" }, [t(l.BentoTypography, { staticClass: "b-filter-bar-button__label", attrs: { el: "span", variant: "body", stronger: "" } }, [t("span", [e._t("default")], 2), e.secondaryLabel && !l.isIconOnly ? t(l.BentoTypography, { staticClass: "b-filter-bar-button__label", attrs: { el: "span", variant: "body", stronger: "" } }, [e._v(":")]) : e._e()], 1), e.secondaryLabel && !l.isIconOnly ? t(l.BentoTypography, { staticClass: "b-filter-bar-button__secondary-label", attrs: { el: "span", variant: "body", stronger: "" } }, [e._v(" " + e._s(e.secondaryLabel) + " ")]) : e._e()], 1)], 2)]);
+}, Pt = [], Et = /* @__PURE__ */ $(
+  Tt,
+  It,
+  Pt,
   !1,
   null,
-  "b6c66ab1"
+  "a64471d2"
 );
-const ye = Dt.exports;
-var Y = /* @__PURE__ */ ((a) => (a.APPLY = "apply", a.CLEAR = "clear", a.OPEN = "open", a.CLOSE = "close", a.RESET = "reset", a))(Y || {});
-const Tt = {
+const ye = Et.exports, Lt = {}, Rt = /* @__PURE__ */ x({
+  ...Lt,
+  __name: "filter-bar-button-group",
+  props: {
+    isActive: { type: Boolean, default: !1 },
+    skipGrouping: { type: Boolean, default: !1 }
+  },
+  setup(a) {
+    const e = a, t = r(() => ({
+      "b-filter-bar-button-group--active": e.isActive,
+      "b-filter-bar-button-group--grouped": !e.skipGrouping
+    }));
+    return { __sfc: !0, props: e, conditionalClasses: t };
+  }
+});
+var Ut = function() {
+  var e = this, t = e._self._c, l = e._self._setupProxy;
+  return t("div", { staticClass: "b-filter-bar-button-group", class: l.conditionalClasses }, [e._t("default")], 2);
+}, Ot = [], $t = /* @__PURE__ */ $(
+  Rt,
+  Ut,
+  Ot,
+  !1,
+  null,
+  "803bca9f"
+);
+const xt = $t.exports;
+var W = /* @__PURE__ */ ((a) => (a.APPLY = "apply", a.CLEAR = "clear", a.OPEN = "open", a.CLOSE = "close", a.RESET = "reset", a))(W || {});
+const kt = {
   "en-US": {
     apply: "Apply",
     clear: "Clear",
+    clearFilter: "Clear filter {function}",
     filterButton: "Filter by {function}",
-    reset: "Reset"
+    filtersHaveBeenCleared: "Filters have been cleared",
+    reset: "Reset",
+    resetFilter: "Reset filter {function}"
   },
   "ja-JP": {
     apply: "適用",
@@ -126,15 +159,17 @@ const Tt = {
     clear: "Limpar",
     reset: "Reiniciar"
   }
-}, Pt = V({
-  i18n: { messages: Tt },
+}, Vt = x({
+  i18n: { messages: kt },
   name: "bento-base-filter",
   components: {
     BentoPopover: me,
-    BentoTeleport: Ge,
-    FilterBarButton: ye
+    BentoTeleport: Oe,
+    FilterBarButton: ye,
+    FilterBarButtonGroup: xt,
+    CrossSmallIcon: tt
   },
-  directives: { BentoClickOutsideDirective: Xe },
+  directives: { BentoClickOutsideDirective: at },
   props: {
     /**
      * Total count of applied filters
@@ -189,106 +224,126 @@ const Tt = {
     /**
      * Sets the size of the container to fit its content
      */
-    fitContent: me.props.fitContent
+    fitContent: me.props.fitContent,
+    /**
+     * The current value of the filter, used for v-model.
+     */
+    value: {
+      type: [Object, Number, Boolean, Array, String, Date],
+      default: void 0
+    }
   },
   emits: [
-    Y.APPLY,
-    Y.CLEAR,
-    Y.OPEN,
-    Y.CLOSE,
-    Y.RESET
+    W.APPLY,
+    W.CLEAR,
+    W.OPEN,
+    W.CLOSE,
+    W.RESET
   ],
   setup(a, { emit: e }) {
-    const { t } = z(), l = pe("base-filter-popover"), n = U(!1), o = U(null), s = U(null), b = r(() => a.defaultValue !== null), c = r(
-      () => b.value ? t("filterButton", {
+    const { t } = G(), l = fe("base-filter-popover"), n = P(!1), o = P(null), s = P(null), c = r(() => a.defaultValue !== null), u = r(() => c.value ? JSON.stringify(a.value) !== JSON.stringify(a.defaultValue) : a.appliedFiltersCount || a.buttonSecondaryLabel), f = r(
+      () => c.value ? t("filterButton", {
         function: a.label
-      }) : f.value
-    ), f = r(() => a.buttonLabel || a.label), _ = () => {
-      n.value && (n.value = !1, Ae(() => {
-        var S, I;
-        (I = (S = o.value) == null ? void 0 : S.$el) == null || I.focus();
-      }), e(Y.CLOSE));
+      }) : h.value
+    ), F = r(
+      () => c.value ? t("resetFilter", {
+        function: h.value
+      }) : t("clearFilter", {
+        function: h.value
+      })
+    ), h = r(() => a.buttonLabel || a.label), m = async () => {
+      var C, L;
+      await Te(), (L = (C = o.value) == null ? void 0 : C.$el) == null || L.focus();
     }, g = () => {
-      _(), b.value ? e(Y.RESET) : e(Y.CLEAR);
-    }, h = () => _(), B = () => {
-      n.value ? _() : (n.value = !0, e(Y.OPEN));
+      n.value && (n.value = !1, m(), e(W.CLOSE));
     }, D = () => {
-      _(), e(Y.APPLY);
-    }, E = r(() => [
+      c.value ? e(W.RESET) : e(W.CLEAR), m();
+    }, E = () => {
+      g(), D();
+    }, B = () => g(), R = () => {
+      n.value ? g() : (n.value = !0, e(W.OPEN));
+    }, A = () => {
+      g(), e(W.APPLY);
+    }, d = r(() => [
       {
         title: t("apply"),
-        event: D,
+        event: A,
         disabled: a.disableApplyButton
       },
       {
-        title: b.value ? t("reset") : t("clear"),
-        event: g,
+        title: c.value ? t("reset") : t("clear"),
+        event: E,
         disabled: a.disableSecondaryButton
       }
     ]);
-    return K(
+    return z(
       () => n.value,
-      (S, I) => {
-        var C, u;
-        !S && I && (u = (C = o.value) == null ? void 0 : C.filterBarButtonRef) != null && u.bentoBaseButtonRef && o.value.filterBarButtonRef.bentoBaseButtonRef.focus();
+      (C, L) => {
+        var U, k;
+        !C && L && (k = (U = o.value) == null ? void 0 : U.filterBarButtonRef) != null && k.bentoBaseButtonRef && o.value.filterBarButtonRef.bentoBaseButtonRef.focus();
       }
-    ), Ze(s, h, { ignore: [o] }), {
+    ), et(s, B, { ignore: [o] }), {
       // Values
-      actions: E,
+      actions: d,
       popoverId: l,
       isFilterOpen: n,
-      isPersistentFilter: b,
-      computedAriaLabel: c,
-      computedButtonText: f,
+      isPersistentFilter: c,
+      isValueChanged: u,
+      computedAriaLabel: f,
+      computedButtonText: h,
+      computedClearButtonLabel: F,
       // Enums
-      BentoTooltipPosition: Qe,
+      BentoTooltipPosition: lt,
       // Events
-      onClickFilter: B,
-      onClickApply: D,
-      onClickSecondaryAction: g,
-      onClickOutside: h,
-      closePopover: _,
+      onClickFilter: R,
+      onClickApply: A,
+      onClickSecondaryAction: E,
+      onClickOutside: B,
+      closePopover: g,
+      resetFilter: D,
       // Refs
       filterButtonRef: o,
       popoverRef: s
     };
   }
 });
-var It = function() {
+var wt = function() {
   var e = this, t = e._self._c;
-  return e._self._setupProxy, e.onlySlot ? t("div", [e._t("default")], 2) : t("div", { staticClass: "b-base-filter" }, [t("filter-bar-button", { ref: "filterButtonRef", attrs: { "aria-label": e.computedAriaLabel, "aria-controls": e.isFilterOpen ? e.popoverId : null, "applied-filters-count": e.appliedFiltersCount, disabled: e.disabled, "is-persistent-filter": e.isPersistentFilter, "is-filter-open": e.isFilterOpen, "secondary-label": e.buttonSecondaryLabel }, on: { click: e.onClickFilter, keydown: function(l) {
+  return e._self._setupProxy, e.onlySlot ? t("div", [e._t("default")], 2) : t("div", { staticClass: "b-base-filter" }, [t("filter-bar-button-group", { attrs: { "is-active": e.isFilterOpen, "skip-grouping": !e.isValueChanged } }, [t("filter-bar-button", { ref: "filterButtonRef", attrs: { "aria-label": e.computedAriaLabel, "aria-controls": e.isFilterOpen ? e.popoverId : null, "applied-filters-count": e.appliedFiltersCount, disabled: e.disabled, "is-persistent-filter": e.isPersistentFilter, "is-filter-open": e.isFilterOpen, "secondary-label": e.buttonSecondaryLabel }, on: { click: e.onClickFilter, keydown: function(l) {
     return !l.type.indexOf("key") && e._k(l.keyCode, "esc", 27, l.key, ["Esc", "Escape"]) ? null : e.closePopover.apply(null, arguments);
-  } } }, [e._v(" " + e._s(e.computedButtonText) + " ")]), e.filterButtonRef ? t("bento-teleport", [e.filterButtonRef ? t("bento-popover", { ref: "popoverRef", staticClass: "b-base-filter__popover", attrs: { id: e.popoverId, divider: "", open: e.isFilterOpen, actions: e.controlled ? null : e.actions, "actions-layout": "space-between", "target-element": e.filterButtonRef, title: e.controlled ? null : e.label, "fit-content": e.fitContent, position: "bottom-start", "without-space": e.controlled, "fallback-position": ["bottom-end"] } }, [t("div", { on: { keydown: function(l) {
+  } } }, [e._v(" " + e._s(e.computedButtonText) + " ")]), e.isValueChanged ? t("filter-bar-button", { attrs: { "applied-filters-count": e.appliedFiltersCount, disabled: e.disabled, "is-persistent-filter": e.isPersistentFilter, "is-filter-open": e.isFilterOpen, "secondary-label": e.buttonSecondaryLabel }, on: { click: e.resetFilter }, scopedSlots: e._u([{ key: "iconLeft", fn: function() {
+    return [t("cross-small-icon", { attrs: { "svg-title": e.computedClearButtonLabel } })];
+  }, proxy: !0 }], null, !1, 3850482025) }) : e._e()], 1), e.filterButtonRef ? t("bento-teleport", [e.filterButtonRef ? t("bento-popover", { ref: "popoverRef", staticClass: "b-base-filter__popover", attrs: { id: e.popoverId, divider: "", open: e.isFilterOpen, actions: e.controlled ? null : e.actions, "actions-layout": "space-between", "target-element": e.filterButtonRef, title: e.controlled ? null : e.label, "fit-content": e.fitContent, position: "bottom-start", "without-space": e.controlled, "fallback-position": ["bottom-end"] } }, [t("div", { on: { keydown: function(l) {
     return !l.type.indexOf("key") && e._k(l.keyCode, "esc", 27, l.key, ["Esc", "Escape"]) ? null : e.closePopover.apply(null, arguments);
   } } }, [e._t("default")], 2)]) : e._e()], 1) : e._e()], 1);
-}, Et = [], Ut = /* @__PURE__ */ x(
-  Pt,
-  It,
-  Et,
+}, Nt = [], Mt = /* @__PURE__ */ $(
+  Vt,
+  wt,
+  Nt,
   !1,
   null,
-  "16bfaad0"
+  "2f8feeb4"
 );
-const X = Ut.exports, Rt = (a) => a instanceof Array, Be = (a) => Rt(a) ? a.length === 0 || a.every((e) => e === "") : !a, ge = (a, e) => JSON.stringify(a) === JSON.stringify(e), G = (a, e) => {
-  const t = U(a.value);
-  K(
+const X = Mt.exports, Ht = (a) => a instanceof Array, ge = (a) => Ht(a) ? a.length === 0 || a.every((e) => e === "") : !a, Be = (a, e) => JSON.stringify(a) === JSON.stringify(e), K = (a, e) => {
+  const t = P(a.value);
+  z(
     () => a.value,
     () => {
       t.value = a.value;
     }
   );
-  const l = r(() => Be(a.value)), n = r(
-    () => e.value !== null ? ge(e.value, a.value) : l.value
-  ), o = r(() => ge(t.value, a.value) || Be(t.value) && l.value);
+  const l = r(() => ge(a.value)), n = r(
+    () => e.value !== null ? Be(e.value, a.value) : l.value
+  ), o = r(() => Be(t.value, a.value) || ge(t.value) && l.value);
   return {
     internalFilterValue: t,
     isSecondaryButtonDisabled: n,
     isApplyButtonDisabled: o
   };
-}, xt = {
+}, jt = {
   name: "bento-input-filter"
-}, Lt = /* @__PURE__ */ V({
-  ...xt,
+}, qt = /* @__PURE__ */ x({
+  ...jt,
   props: {
     defaultValue: { default: null },
     disabled: { type: Boolean, default: !1 },
@@ -300,40 +355,40 @@ const X = Ut.exports, Rt = (a) => a instanceof Array, Be = (a) => Rt(a) ? a.leng
   },
   emits: ["input", "update"],
   setup(a, { emit: e }) {
-    var y, m;
-    const t = a, l = U(null), n = U((m = (y = t == null ? void 0 : t.options) == null ? void 0 : y.dropdown) == null ? void 0 : m.value), o = r(
+    var U, k;
+    const t = a, l = P(null), n = P((k = (U = t == null ? void 0 : t.options) == null ? void 0 : U.dropdown) == null ? void 0 : k.value), o = r(
       () => {
-        var i, P;
-        return ((i = t == null ? void 0 : t.options) == null ? void 0 : i.variant) === "dropdown" && ((P = t == null ? void 0 : t.options) == null ? void 0 : P.dropdown) !== void 0;
+        var T, N;
+        return ((T = t == null ? void 0 : t.options) == null ? void 0 : T.variant) === "dropdown" && ((N = t == null ? void 0 : t.options) == null ? void 0 : N.dropdown) !== void 0;
       }
     ), s = r(
       () => {
-        var i;
-        return o.value ? { ...(i = t == null ? void 0 : t.options) == null ? void 0 : i.dropdown, value: n.value } : void 0;
+        var T;
+        return o.value ? { ...(T = t == null ? void 0 : t.options) == null ? void 0 : T.dropdown, value: n.value } : void 0;
       }
-    ), b = r(() => {
-      var i;
-      return ((i = t == null ? void 0 : t.options) == null ? void 0 : i.variant) === "dropdown" ? "dropdown" : "default";
-    }), c = r(
+    ), c = r(() => {
+      var T;
+      return ((T = t == null ? void 0 : t.options) == null ? void 0 : T.variant) === "dropdown" ? "dropdown" : "default";
+    }), u = r(
       () => {
-        var i;
-        return o.value ? (i = t.value) == null ? void 0 : i.inputValue : t == null ? void 0 : t.value;
+        var T;
+        return o.value ? (T = t.value) == null ? void 0 : T.inputValue : t == null ? void 0 : t.value;
       }
-    ), { internalFilterValue: f, isSecondaryButtonDisabled: _, isApplyButtonDisabled: g } = G(
-      c,
-      $(t, "defaultValue")
-    ), h = r(() => t.label), B = r(() => le(c.value, 12)), D = r(() => ({
+    ), { internalFilterValue: f, isSecondaryButtonDisabled: F, isApplyButtonDisabled: h } = K(
+      u,
+      w(t, "defaultValue")
+    ), m = r(() => t.label), g = r(() => le(u.value, 12)), D = r(() => ({
       "b-input-filter--only-slot": t.onlySlot
     }));
     ue(() => {
       f.value === "" && (f.value = null);
-    }), K(l, () => {
-      var i;
-      (i = l.value) == null || i.focusInput();
+    }), z(l, () => {
+      var T;
+      (T = l.value) == null || T.focusInput();
     });
     const E = () => {
-      f.value = c.value;
-    }, S = () => {
+      f.value = u.value;
+    }, B = () => {
       !f.value && t.defaultValue !== null && (f.value = t.defaultValue), e("update", {
         ...t,
         value: o.value ? {
@@ -341,20 +396,20 @@ const X = Ut.exports, Rt = (a) => a instanceof Array, Be = (a) => Rt(a) ? a.leng
           dropdownValue: n.value
         } : f.value
       });
-    }, I = () => e("update", { ...t, value: t.defaultValue }), C = () => {
-      f.value = null, S();
-    }, u = () => {
+    }, R = () => e("update", { ...t, value: t.defaultValue }), A = () => {
+      f.value = null, B();
+    }, d = () => {
       e("input", { ...t, value: f.value });
-    }, T = (i) => {
-      f.value = i;
-    }, L = (i) => {
-      n.value = i;
+    }, C = (T) => {
+      f.value = T;
+    }, L = (T) => {
+      n.value = T;
     };
-    return De(Ke, o.value), K(
+    return Ie(Qe, o.value), z(
       () => t.options,
       () => {
-        var i, P, w;
-        ((i = t.options) != null && i.dropdown || (P = t.options) != null && P.dropdownPosition || (w = t.options) != null && w.variant) && fe(
+        var T, N, j;
+        ((T = t.options) != null && T.dropdown || (N = t.options) != null && N.dropdownPosition || (j = t.options) != null && j.variant) && pe(
           'BentoInputFilter "options" property',
           `BentoInputFilter "options" no longer supports "dropdown", "dropdownPosition" or "variant" attributes.
                             Use the "BentoFilterItemType.INPUT_DROPDOWN" instead of "BentoFilterItemType.INPUT"
@@ -370,27 +425,27 @@ const X = Ut.exports, Rt = (a) => a instanceof Array, Be = (a) => Rt(a) ? a.leng
         );
       },
       { immediate: !0 }
-    ), { __sfc: !0, props: t, emit: e, inputTextRef: l, dropdownValue: n, isDropdownVariant: o, dropdownProp: s, inputVariant: b, valueProp: c, internalFilterValue: f, isSecondaryButtonDisabled: _, isApplyButtonDisabled: g, buttonLabel: h, buttonSecondaryLabel: B, conditionalClasses: D, openFilter: E, updateFilter: S, resetFilter: I, clearFilter: C, onInput: u, setInternalFilterValue: T, onDropdownInput: L, BentoBaseFilter: X, BentoInputField: be };
+    ), { __sfc: !0, props: t, emit: e, inputTextRef: l, dropdownValue: n, isDropdownVariant: o, dropdownProp: s, inputVariant: c, valueProp: u, internalFilterValue: f, isSecondaryButtonDisabled: F, isApplyButtonDisabled: h, buttonLabel: m, buttonSecondaryLabel: g, conditionalClasses: D, openFilter: E, updateFilter: B, resetFilter: R, clearFilter: A, onInput: d, setInternalFilterValue: C, onDropdownInput: L, BentoBaseFilter: X, BentoInputField: be };
   }
 });
-var Vt = function() {
+var Jt = function() {
   var n, o;
   var e = this, t = e._self._c, l = e._self._setupProxy;
   return t(l.BentoBaseFilter, e._b({ attrs: { "button-label": l.buttonLabel, "button-secondary-label": l.buttonSecondaryLabel, "disable-apply-button": l.isApplyButtonDisabled, "disable-secondary-button": l.isSecondaryButtonDisabled, "only-slot": e.onlySlot, "popover-overflow-visible": l.isDropdownVariant }, on: { apply: l.updateFilter, clear: l.clearFilter, open: l.openFilter, reset: l.resetFilter } }, "bento-base-filter", e.$props, !1), [t("div", { staticClass: "b-input-filter", class: l.conditionalClasses, on: { keydown: function(s) {
     return !s.type.indexOf("key") && e._k(s.keyCode, "enter", 13, s.key, "Enter") ? null : l.updateFilter.apply(null, arguments);
   }, input: l.onInput } }, [t(l.BentoInputField, { ref: "inputTextRef", attrs: { dropdown: l.dropdownProp, "dropdown-position": (n = e.options) == null ? void 0 : n.dropdownPosition, placeholder: (o = e.options) == null ? void 0 : o.placeholder, variant: l.inputVariant, value: l.internalFilterValue }, on: { input: l.setInternalFilterValue, "dropdown-input": l.onDropdownInput } })], 1)]);
-}, $t = [], Ot = /* @__PURE__ */ x(
-  Lt,
-  Vt,
-  $t,
+}, Yt = [], Wt = /* @__PURE__ */ $(
+  qt,
+  Jt,
+  Yt,
   !1,
   null,
   "84f6bd65"
 );
-const Ve = Ot.exports, kt = {
+const we = Wt.exports, zt = {
   name: "bento-input-with-dropdown-filter"
-}, wt = /* @__PURE__ */ V({
-  ...kt,
+}, Gt = /* @__PURE__ */ x({
+  ...zt,
   props: {
     disabled: { type: Boolean },
     defaultValue: { default: void 0 },
@@ -402,69 +457,69 @@ const Ve = Ot.exports, kt = {
   },
   emits: [v.INPUT, v.UPDATE],
   setup(a, { emit: e }) {
-    const t = a, l = U(null), { internalFilterValue: n, isSecondaryButtonDisabled: o, isApplyButtonDisabled: s } = G($(t, "value"), $(t, "defaultValue")), b = r(() => t.label), c = r(() => {
-      var u;
-      return le((u = t.value) == null ? void 0 : u.inputValue, 12);
+    const t = a, l = P(null), { internalFilterValue: n, isSecondaryButtonDisabled: o, isApplyButtonDisabled: s } = K(w(t, "value"), w(t, "defaultValue")), c = r(() => t.label), u = r(() => {
+      var d;
+      return le((d = t.value) == null ? void 0 : d.inputValue, 12);
     }), f = r(() => {
-      var u, T;
+      var d, C;
       return {
-        ...((u = t.options) == null ? void 0 : u.dropdown) || {},
-        value: (T = n.value) == null ? void 0 : T.dropdownValue
+        ...((d = t.options) == null ? void 0 : d.dropdown) || {},
+        value: (C = n.value) == null ? void 0 : C.dropdownValue
       };
-    }), _ = r(() => ({
+    }), F = r(() => ({
       "b-input-with-dropdown-filter--only-slot": t.onlySlot
-    })), g = r(() => {
-      var T, L;
-      return !(!!((T = n.value) != null && T.inputValue) && !!((L = n.value) != null && L.dropdownValue)) || s.value;
+    })), h = r(() => {
+      var C, L;
+      return !(!!((C = n.value) != null && C.inputValue) && !!((L = n.value) != null && L.dropdownValue)) || s.value;
     });
     ue(() => {
-      var u;
-      ((u = n.value) == null ? void 0 : u.inputValue) === "" && (n.value = { ...n.value, inputValue: void 0 });
-    }), K(l, () => {
-      var u;
-      (u = l.value) == null || u.focusInput();
+      var d;
+      ((d = n.value) == null ? void 0 : d.inputValue) === "" && (n.value = { ...n.value, inputValue: void 0 });
+    }), z(l, () => {
+      var d;
+      (d = l.value) == null || d.focusInput();
     });
-    const h = () => {
+    const m = () => {
       n.value = t.value;
-    }, B = () => {
-      var u;
-      !((u = n.value) != null && u.inputValue) && t.defaultValue !== null && (n.value = { ...t.defaultValue }), e(v.UPDATE, {
+    }, g = () => {
+      var d;
+      !((d = n.value) != null && d.inputValue) && t.defaultValue !== null && (n.value = { ...t.defaultValue }), e(v.UPDATE, {
         ...t,
         value: n.value
       });
     }, D = () => e(v.UPDATE, { ...t, value: t.defaultValue }), E = () => {
-      n.value = null, B();
-    }, S = () => {
+      n.value = null, g();
+    }, B = () => {
       e(v.INPUT, { ...t, value: n.value });
-    }, I = (u) => {
-      n.value = { ...n.value, inputValue: u };
-    }, C = (u) => {
-      n.value = { ...n.value, dropdownValue: u };
+    }, R = (d) => {
+      n.value = { ...n.value, inputValue: d };
+    }, A = (d) => {
+      n.value = { ...n.value, dropdownValue: d };
     };
-    return De(ze, !0), { __sfc: !0, props: t, emit: e, inputTextRef: l, internalFilterValue: n, isSecondaryButtonDisabled: o, isApplyButtonDisabled: s, buttonLabel: b, buttonSecondaryLabel: c, dropdownOptions: f, conditionalClasses: _, shouldDisableApply: g, openFilter: h, updateFilter: B, resetFilter: D, clearFilter: E, onInput: S, setInternalFilterValue: I, onDropdownInput: C, BentoBaseFilter: X, BentoInputField: be };
+    return Ie(Xe, !0), { __sfc: !0, props: t, emit: e, inputTextRef: l, internalFilterValue: n, isSecondaryButtonDisabled: o, isApplyButtonDisabled: s, buttonLabel: c, buttonSecondaryLabel: u, dropdownOptions: f, conditionalClasses: F, shouldDisableApply: h, openFilter: m, updateFilter: g, resetFilter: D, clearFilter: E, onInput: B, setInternalFilterValue: R, onDropdownInput: A, BentoBaseFilter: X, BentoInputField: be };
   }
 });
-var Nt = function() {
+var Kt = function() {
   var n, o;
   var e = this, t = e._self._c, l = e._self._setupProxy;
   return t(l.BentoBaseFilter, e._b({ attrs: { "button-label": l.buttonLabel, "button-secondary-label": l.buttonSecondaryLabel, "disable-apply-button": l.shouldDisableApply, "disable-secondary-button": l.isSecondaryButtonDisabled, "only-slot": e.onlySlot }, on: { apply: l.updateFilter, clear: l.clearFilter, open: l.openFilter, reset: l.resetFilter } }, "bento-base-filter", e.$props, !1), [t("div", { staticClass: "b-input-with-dropdown-filter", class: l.conditionalClasses, on: { keydown: function(s) {
     return !s.type.indexOf("key") && e._k(s.keyCode, "enter", 13, s.key, "Enter") ? null : l.updateFilter.apply(null, arguments);
   }, input: l.onInput } }, [t(l.BentoInputField, { ref: "inputTextRef", attrs: { dropdown: l.dropdownOptions, "dropdown-position": (n = e.options) == null ? void 0 : n.dropdownPosition, variant: "dropdown", value: (o = l.internalFilterValue) == null ? void 0 : o.inputValue }, on: { input: l.setInternalFilterValue, "dropdown-input": l.onDropdownInput } })], 1)]);
-}, Mt = [], Ht = /* @__PURE__ */ x(
-  wt,
-  Nt,
-  Mt,
+}, Zt = [], Qt = /* @__PURE__ */ $(
+  Gt,
+  Kt,
+  Zt,
   !1,
   null,
   "0406187f"
 );
-const $e = Ht.exports, jt = V({
+const Ne = Qt.exports, Xt = x({
   name: "bento-date-filter",
   components: {
     BentoBaseFilter: X,
-    BentoDatePicker: mt,
+    BentoDatePicker: Bt,
     BentoDivider: _e,
-    Calendar: vt
+    Calendar: ht
   },
   props: {
     /**
@@ -507,56 +562,56 @@ const $e = Ht.exports, jt = V({
   },
   emits: [v.INPUT, v.UPDATE],
   setup(a, { emit: e }) {
-    const { locale: t } = z(void 0, !0), l = Le(), { internalFilterValue: n, isSecondaryButtonDisabled: o, isApplyButtonDisabled: s } = G(
-      $(a, "value"),
-      $(a, "defaultValue")
-    ), b = r(
+    const { locale: t } = G(void 0, !0), l = Ve(), { internalFilterValue: n, isSecondaryButtonDisabled: o, isApplyButtonDisabled: s } = K(
+      w(a, "value"),
+      w(a, "defaultValue")
+    ), c = r(
       () => a.value ? Q(a.value, "dd MMM, yyyy", {
         locale: l[t.value.substring(0, 2)] || l.enUS
       }) : null
-    ), c = r(() => a.label), f = r(() => b.value), _ = () => {
+    ), u = r(() => a.label), f = r(() => c.value), F = () => {
       e(v.UPDATE, { ...a, value: n.value });
-    }, g = () => {
-      n.value = null, _();
     }, h = () => {
-      n.value = a.defaultValue, _();
-    }, B = () => {
+      n.value = null, F();
+    }, m = () => {
+      n.value = a.defaultValue, F();
+    }, g = () => {
       n.value = a.value;
-    }, D = (S) => {
-      n.value = S, e(v.INPUT, { ...a, value: n.value });
+    }, D = (B) => {
+      n.value = B, e(v.INPUT, { ...a, value: n.value });
     };
     return {
       // Values
       internalFilterValue: n,
       isApplyButtonDisabled: s,
       isSecondaryButtonDisabled: o,
-      buttonLabel: c,
+      buttonLabel: u,
       buttonSecondaryLabel: f,
       // Events
-      clearFilter: g,
+      clearFilter: h,
       onDateSelected: D,
-      openFilter: B,
-      updateFilter: _,
-      resetFilter: h,
-      onDateInputSelected: (S) => {
-        n.value = S, D(S), _();
+      openFilter: g,
+      updateFilter: F,
+      resetFilter: m,
+      onDateInputSelected: (B) => {
+        n.value = B, D(B), F();
       }
     };
   }
 });
-var qt = function() {
-  var l, n, o, s, b, c;
+var el = function() {
+  var l, n, o, s, c, u;
   var e = this, t = e._self._c;
-  return e._self._setupProxy, t("bento-base-filter", { attrs: { "button-label": e.buttonLabel, "button-secondary-label": e.buttonSecondaryLabel, disabled: e.disabled, "default-value": e.defaultValue, "disable-apply-button": e.isApplyButtonDisabled, "disable-secondary-button": e.isSecondaryButtonDisabled, field: e.field, label: e.label, "only-slot": e.onlySlot, "fit-content": "" }, on: { apply: e.updateFilter, clear: e.clearFilter, open: e.openFilter, reset: e.resetFilter } }, [e.onlySlot ? t("bento-date-picker", { attrs: { value: e.internalFilterValue, "first-day-of-week": (l = e.options) == null ? void 0 : l.firstDayOfWeek, "is-date-disabled": (n = e.options) == null ? void 0 : n.isDateDisabled, variant: (o = e.options) == null ? void 0 : o.variant }, on: { input: e.onDateInputSelected } }) : [t("bento-divider", { staticClass: "b-date-filter__divider" }), t("div", { staticClass: "b-date-filter" }, [t("calendar", { attrs: { "first-day-of-week": (s = e.options) == null ? void 0 : s.firstDayOfWeek, "is-date-disabled": (b = e.options) == null ? void 0 : b.isDateDisabled, "number-of-months": 1, value: e.internalFilterValue, variant: (c = e.options) == null ? void 0 : c.variant }, on: { input: e.onDateSelected } })], 1)]], 2);
-}, Jt = [], Yt = /* @__PURE__ */ x(
-  jt,
-  qt,
-  Jt,
+  return e._self._setupProxy, t("bento-base-filter", { attrs: { "button-label": e.buttonLabel, "button-secondary-label": e.buttonSecondaryLabel, disabled: e.disabled, "default-value": e.defaultValue, "disable-apply-button": e.isApplyButtonDisabled, "disable-secondary-button": e.isSecondaryButtonDisabled, field: e.field, label: e.label, "only-slot": e.onlySlot, "fit-content": "" }, on: { apply: e.updateFilter, clear: e.clearFilter, open: e.openFilter, reset: e.resetFilter } }, [e.onlySlot ? t("bento-date-picker", { attrs: { value: e.internalFilterValue, "first-day-of-week": (l = e.options) == null ? void 0 : l.firstDayOfWeek, "is-date-disabled": (n = e.options) == null ? void 0 : n.isDateDisabled, variant: (o = e.options) == null ? void 0 : o.variant }, on: { input: e.onDateInputSelected } }) : [t("bento-divider", { staticClass: "b-date-filter__divider" }), t("div", { staticClass: "b-date-filter" }, [t("calendar", { attrs: { "first-day-of-week": (s = e.options) == null ? void 0 : s.firstDayOfWeek, "is-date-disabled": (c = e.options) == null ? void 0 : c.isDateDisabled, "number-of-months": 1, value: e.internalFilterValue, variant: (u = e.options) == null ? void 0 : u.variant }, on: { input: e.onDateSelected } })], 1)]], 2);
+}, tl = [], ll = /* @__PURE__ */ $(
+  Xt,
+  el,
+  tl,
   !1,
   null,
   "cc990c60"
 );
-const Oe = Yt.exports, Wt = {
+const Me = ll.exports, al = {
   "en-US": {
     apply: "Apply",
     clear: "Clear",
@@ -572,16 +627,16 @@ const Oe = Yt.exports, Wt = {
     clear: "Limpar",
     reset: "Reiniciar"
   }
-}, Kt = V({
-  i18n: { messages: Wt },
+}, nl = x({
+  i18n: { messages: al },
   name: "bento-date-range-filter",
   components: {
     BentoBaseFilter: X,
-    BentoButtonActions: yt,
-    BentoDateRangePicker: ft,
+    BentoButtonActions: gt,
+    BentoDateRangePicker: mt,
     BentoTypography: se,
     BentoDivider: _e,
-    DateRangePickerCalendar: pt
+    DateRangePickerCalendar: yt
   },
   props: {
     /**
@@ -631,40 +686,40 @@ const Oe = Yt.exports, Wt = {
   },
   emits: [v.INPUT, v.UPDATE],
   setup(a, { emit: e }) {
-    var q, W, O, N;
-    const { locale: t, t: l } = z(), n = Le(), { internalFilterValue: o, isSecondaryButtonDisabled: s, isApplyButtonDisabled: b } = G(
-      $(a, "value"),
-      $(a, "defaultValue")
-    ), c = U(!1), f = (F) => F ? Q(F, Se.NUMERIC_DATE_YEAR_FIRST, {
+    var J, S, _, y;
+    const { locale: t, t: l } = G(), n = Ve(), { internalFilterValue: o, isSecondaryButtonDisabled: s, isApplyButtonDisabled: c } = K(
+      w(a, "value"),
+      w(a, "defaultValue")
+    ), u = P(!1), f = (i) => i ? Q(i, Se.NUMERIC_DATE_YEAR_FIRST, {
       locale: n[t.value.substring(0, 2)] || n.enUS
-    }) : void 0, _ = (F) => F ? Q(F, Se.HOUR_MINUTE_SECONDS, {
+    }) : void 0, F = (i) => i ? Q(i, Se.HOUR_MINUTE_SECONDS, {
       locale: n[t.value.substring(0, 2)] || n.enUS
-    }) : "", g = U(null), h = U(!1), B = We({
-      startDate: f((q = a.value) == null ? void 0 : q.startDate),
-      endDate: f((W = a.value) == null ? void 0 : W.endDate),
-      startTime: _((O = a.value) == null ? void 0 : O.startDate),
-      endTime: _((N = a.value) == null ? void 0 : N.endDate)
+    }) : "", h = P(null), m = P(!1), g = Ze({
+      startDate: f((J = a.value) == null ? void 0 : J.startDate),
+      endDate: f((S = a.value) == null ? void 0 : S.endDate),
+      startTime: F((_ = a.value) == null ? void 0 : _.startDate),
+      endTime: F((y = a.value) == null ? void 0 : y.endDate)
     });
-    function D(F) {
-      return (F == null ? void 0 : F.length) !== void 0;
+    function D(i) {
+      return (i == null ? void 0 : i.length) !== void 0;
     }
     const E = r(() => {
-      var F, k, M, d, p, A, R, j, Z;
-      if (!((F = a.value) != null && F.startDate) && !a.value.endDate)
+      var i, V, M, p, b, I, O, q, Z;
+      if (!((i = a.value) != null && i.startDate) && !a.value.endDate)
         return null;
-      if (D((k = a.options) == null ? void 0 : k.quickSelectRanges) && ((d = (M = a.options) == null ? void 0 : M.quickSelectRanges) == null ? void 0 : d.length) > 0) {
-        const ne = (A = (p = a.options) == null ? void 0 : p.quickSelectRanges) == null ? void 0 : A.find(({ value: re, data: H }) => {
+      if (D((V = a.options) == null ? void 0 : V.quickSelectRanges) && ((p = (M = a.options) == null ? void 0 : M.quickSelectRanges) == null ? void 0 : p.length) > 0) {
+        const ne = (I = (b = a.options) == null ? void 0 : b.quickSelectRanges) == null ? void 0 : I.find(({ value: re, data: H }) => {
           if (o.value.range)
             return re === o.value.range;
           if (!(H != null && H.endDate))
-            ce(H == null ? void 0 : H.startDate, o.value.startDate) && bt(o.value.endDate);
+            ce(H == null ? void 0 : H.startDate, o.value.startDate) && Ft(o.value.endDate);
           else
             return ce(H == null ? void 0 : H.startDate, o.value.startDate) && ce(H == null ? void 0 : H.endDate, o.value.endDate);
         });
         if (ne)
           return ne.label;
       }
-      return _t((R = a.value) == null ? void 0 : R.startDate, (j = a.value) == null ? void 0 : j.endDate) && ((Z = a == null ? void 0 : a.options) != null && Z.allowTimeInput) ? `${Q(a.value.startDate, "dd MMM, yyyy HH:mm:ss", {
+      return St((O = a.value) == null ? void 0 : O.startDate, (q = a.value) == null ? void 0 : q.endDate) && ((Z = a == null ? void 0 : a.options) != null && Z.allowTimeInput) ? `${Q(a.value.startDate, "dd MMM, yyyy HH:mm:ss", {
         locale: n[t.value.substring(0, 2)] || n.enUS
       })} - ${Q(a.value.endDate, "HH:mm:ss", {
         locale: n[t.value.substring(0, 2)] || n.enUS
@@ -673,82 +728,84 @@ const Oe = Yt.exports, Wt = {
       })} - ${Q(a.value.endDate, "dd MMM, yyyy", {
         locale: n[t.value.substring(0, 2)] || n.enUS
       })}`;
-    }), S = r(() => a.label), I = () => {
-      g.value.closePopover();
-      const { onlySlot: F, ...k } = a;
-      e(v.UPDATE, { ...k, value: o.value });
+    }), B = r(() => a.label), R = () => {
+      h.value.closePopover();
+      const { onlySlot: i, ...V } = a;
+      e(v.UPDATE, { ...V, value: o.value });
+    }, A = () => {
+      o.value = void 0, R();
+    }, d = () => {
+      o.value = a.defaultValue, R();
     }, C = () => {
-      o.value = void 0, I();
-    }, u = () => {
-      o.value = a.defaultValue, I();
-    }, T = () => {
       o.value = a.value;
-    }, L = (F) => {
-      c.value = !1, o.value = F, B.startDate = f(F.startDate), B.endDate = f(F.endDate), e(v.INPUT, { ...a, value: o.value });
-    }, y = (F) => {
-      F != null && F.startDate && (F != null && F.endDate) && (o.value = F, B.startDate = f(F.startDate), B.endDate = f(F.endDate), e(v.INPUT, { ...a, value: o.value }));
-    }, m = (F) => {
-      L(F), e(v.INPUT, { ...a, value: o.value });
-    }, i = r(
+    }, L = (i) => {
+      u.value = !1, o.value = i, g.startDate = f(i.startDate), g.endDate = f(i.endDate), e(v.INPUT, { ...a, value: o.value });
+    }, U = (i) => {
+      i != null && i.startDate && (i != null && i.endDate) && (o.value = i, g.startDate = f(i.startDate), g.endDate = f(i.endDate), e(v.INPUT, { ...a, value: o.value }));
+    }, k = (i) => {
+      L(i), e(v.INPUT, { ...a, value: o.value });
+    }, T = r(
       () => [
         {
           title: l("apply"),
-          event: I,
-          disabled: c.value || h.value || b.value
+          event: R,
+          disabled: u.value || m.value || c.value
         },
         {
           title: a.defaultValue ? l("reset") : l("clear"),
-          event: a.defaultValue ? u : C,
-          disabled: h.value && s.value
+          event: a.defaultValue ? d : A,
+          disabled: m.value && s.value
         }
       ]
     );
     return {
       // Refs
-      baseFilter: g,
+      baseFilter: h,
       // Values
-      actions: i,
-      formData: B,
+      actions: T,
+      formData: g,
       internalFilterValue: o,
-      isApplyButtonDisabled: b,
+      isApplyButtonDisabled: c,
       isSecondaryButtonDisabled: s,
-      isSelectingDate: c,
-      buttonLabel: S,
+      isSelectingDate: u,
+      buttonLabel: B,
       buttonSecondaryLabel: E,
       // Events
       onDateSelected: L,
-      openFilter: T,
-      updateFilter: I,
+      openFilter: C,
+      clearFilter: A,
+      resetFilter: d,
+      updateFilter: R,
       onDatePickerRangeError: () => {
-        h.value = !0, o.value = { startDate: void 0, endDate: void 0 }, e(v.INPUT, { ...a, value: o.value });
+        m.value = !0, o.value = { startDate: void 0, endDate: void 0 }, e(v.INPUT, { ...a, value: o.value });
       },
-      onDatePickerRangeFormDateInputUpdate: (F) => {
-        h.value = !1, F.startTime && (B.startTime = F.startTime), F.endTime && (B.endTime = F.endTime);
+      onDatePickerRangeFormDateInputUpdate: (i) => {
+        m.value = !1, i.startTime && (g.startTime = i.startTime), i.endTime && (g.endTime = i.endTime);
       },
-      onDateInputSelected: m,
-      onRangeSelectorInput: y
+      onDateInputSelected: k,
+      onRangeSelectorInput: U
     };
   }
 });
-var zt = function() {
-  var l, n, o, s, b, c, f, _, g, h, B, D, E, S, I, C, u;
+var ol = function() {
+  var l, n, o, s, c, u, f, F, h, m, g, D, E, B, R, A, d;
   var e = this, t = e._self._c;
-  return e._self._setupProxy, t("bento-base-filter", { ref: "baseFilter", staticClass: "b-base-filter-date-range-filter", attrs: { "button-label": e.buttonLabel, "button-secondary-label": e.buttonSecondaryLabel, controlled: !e.onlySlot, disabled: e.disabled, "disable-apply-button": e.isApplyButtonDisabled, "disable-secondary-button": e.isSecondaryButtonDisabled, "default-value": e.defaultValue, field: e.field, label: e.label, "only-slot": e.onlySlot, "fit-content": "" }, on: { open: e.openFilter } }, [e.onlySlot ? t("bento-date-range-picker", { attrs: { "allow-time-input": (l = e.options) == null ? void 0 : l.allowTimeInput, value: e.internalFilterValue, "first-day-of-week": (n = e.options) == null ? void 0 : n.firstDayOfWeek, "is-date-disabled": (o = e.options) == null ? void 0 : o.isDateDisabled, "number-of-months": (s = e.options) == null ? void 0 : s.numberOfMonths, "quick-select-ranges": (b = e.options) == null ? void 0 : b.quickSelectRanges, variant: (c = e.options) == null ? void 0 : c.variant }, on: { input: e.onDateInputSelected } }) : [t("div", { staticClass: "b-date-range-filter" }, [t("date-range-picker-calendar", { attrs: { "allow-time-input": (f = e.options) == null ? void 0 : f.allowTimeInput, "first-day-of-week": (_ = e.options) == null ? void 0 : _.firstDayOfWeek, "is-date-disabled": (g = e.options) == null ? void 0 : g.isDateDisabled, granularities: (h = e.options) == null ? void 0 : h.granularities, "max-range": (B = e.options) == null ? void 0 : B.maxRange, min: (D = e.options) == null ? void 0 : D.min, max: (E = e.options) == null ? void 0 : E.max, "number-of-months": (S = e.options) == null ? void 0 : S.numberOfMonths, "quick-select-ranges": (I = e.options) == null ? void 0 : I.quickSelectRanges, value: e.internalFilterValue, "date-form-data": e.formData, "show-end-date-on-open": (C = e.options) == null ? void 0 : C.showEndDateOnOpen, variant: (u = e.options) == null ? void 0 : u.variant }, on: { input: e.onDateSelected, "custom-range": e.onRangeSelectorInput, error: e.onDatePickerRangeError, "form-date": e.onDatePickerRangeFormDateInputUpdate, "start-date-selected": function(T) {
+  return e._self._setupProxy, t("bento-base-filter", { ref: "baseFilter", staticClass: "b-base-filter-date-range-filter", attrs: { "button-label": e.buttonLabel, "button-secondary-label": e.buttonSecondaryLabel, controlled: !e.onlySlot, disabled: e.disabled, "disable-apply-button": e.isApplyButtonDisabled, "disable-secondary-button": e.isSecondaryButtonDisabled, "default-value": e.defaultValue, field: e.field, label: e.label, "only-slot": e.onlySlot, "fit-content": "" }, on: { open: e.openFilter, clear: e.clearFilter, reset: e.resetFilter } }, [e.onlySlot ? t("bento-date-range-picker", { attrs: { "allow-time-input": (l = e.options) == null ? void 0 : l.allowTimeInput, value: e.internalFilterValue, "first-day-of-week": (n = e.options) == null ? void 0 : n.firstDayOfWeek, "is-date-disabled": (o = e.options) == null ? void 0 : o.isDateDisabled, "number-of-months": (s = e.options) == null ? void 0 : s.numberOfMonths, "quick-select-ranges": (c = e.options) == null ? void 0 : c.quickSelectRanges, variant: (u = e.options) == null ? void 0 : u.variant }, on: { input: e.onDateInputSelected } }) : [t("div", { staticClass: "b-date-range-filter" }, [t("date-range-picker-calendar", { attrs: { "allow-time-input": (f = e.options) == null ? void 0 : f.allowTimeInput, "first-day-of-week": (F = e.options) == null ? void 0 : F.firstDayOfWeek, "is-date-disabled": (h = e.options) == null ? void 0 : h.isDateDisabled, granularities: (m = e.options) == null ? void 0 : m.granularities, "max-range": (g = e.options) == null ? void 0 : g.maxRange, min: (D = e.options) == null ? void 0 : D.min, max: (E = e.options) == null ? void 0 : E.max, "number-of-months": (B = e.options) == null ? void 0 : B.numberOfMonths, "quick-select-ranges": (R = e.options) == null ? void 0 : R.quickSelectRanges, value: e.internalFilterValue, "date-form-data": e.formData, "show-end-date-on-open": (A = e.options) == null ? void 0 : A.showEndDateOnOpen, variant: (d = e.options) == null ? void 0 : d.variant }, on: { input: e.onDateSelected, "custom-range": e.onRangeSelectorInput, error: e.onDatePickerRangeError, "form-date": e.onDatePickerRangeFormDateInputUpdate, "start-date-selected": function(C) {
     e.isSelectingDate = !0;
   } }, scopedSlots: e._u([{ key: "title", fn: function() {
     return [t("bento-typography", { attrs: { strongest: "", variant: "body", el: "span" } }, [e._v(" " + e._s(e.label) + " ")])];
   }, proxy: !0 }, { key: "actions", fn: function() {
     return [t("bento-divider", { staticClass: "b-date-range-filter__divider" }), t("bento-button-actions", { staticClass: "b-date-range-filter__actions", attrs: { actions: e.actions, layout: "space-between" } })];
   }, proxy: !0 }]) })], 1)]], 2);
-}, Gt = [], Zt = /* @__PURE__ */ x(
-  Kt,
-  zt,
-  Gt,
+}, sl = [], rl = /* @__PURE__ */ $(
+  nl,
+  ol,
+  sl,
   !1,
   null,
-  "f342a732"
+  "aac23949"
 );
-const ke = Zt.exports, Qt = {
+const He = rl.exports, il = {
   "en-US": {
     all: "All",
     noFiltersMatchThisSearch: "No filters match this search",
@@ -760,10 +817,10 @@ const ke = Zt.exports, Qt = {
   "pt-BR": {
     all: "Todos"
   }
-}, Xt = {
-  i18n: { messages: Qt }
-}, el = /* @__PURE__ */ V({
-  ...Xt,
+}, ul = {
+  i18n: { messages: il }
+}, cl = /* @__PURE__ */ x({
+  ...ul,
   __name: "select-filter-button",
   props: {
     /**
@@ -816,111 +873,111 @@ const ke = Zt.exports, Qt = {
   },
   emits: ["input", "update"],
   setup(a, { emit: e }) {
-    var q, W;
-    const t = a, l = ie(), { t: n } = z(), o = U(""), s = $(t, "options"), b = U(t.options.listboxItems ?? []), { cachedSelectedListboxOptions: c, setCachedValues: f, resetCache: _ } = he(
-      b,
-      $(t, "value"),
-      $(s.value, "multiple")
-    ), { cachedSelectedListboxOptions: g } = he(
-      b,
-      $(t, "defaultValue"),
-      $(s.value, "multiple")
-    ), { internalFilterValue: h, isSecondaryButtonDisabled: B, isApplyButtonDisabled: D } = G(c, g);
-    K(s, () => {
-      b.value = s.value.listboxItems ?? [];
+    var J, S;
+    const t = a, l = ie(), { t: n } = G(), o = P(""), s = w(t, "options"), c = P(t.options.listboxItems ?? []), { cachedSelectedListboxOptions: u, setCachedValues: f, resetCache: F } = he(
+      c,
+      w(t, "value"),
+      w(s.value, "multiple")
+    ), { cachedSelectedListboxOptions: h } = he(
+      c,
+      w(t, "defaultValue"),
+      w(s.value, "multiple")
+    ), { internalFilterValue: m, isSecondaryButtonDisabled: g, isApplyButtonDisabled: D } = K(u, h);
+    z(s, () => {
+      c.value = s.value.listboxItems ?? [];
     });
-    const E = Re(
+    const E = xe(
       o,
-      b,
-      (W = (q = t.options) == null ? void 0 : q.search) == null ? void 0 : W.searchEvent
-    ), S = r(() => n("noFiltersMatchThisSearch")), I = r(() => t.label), C = r(() => {
-      var F, k, M, d;
-      const O = !((F = t == null ? void 0 : t.options) != null && F.multiple) && (t == null ? void 0 : t.value), N = ((M = ((k = t == null ? void 0 : t.options) == null ? void 0 : k.multiple) && t.value) == null ? void 0 : M.length) === 1;
-      if (O || N) {
-        let A = (d = t.options.listboxItems.flatMap((R) => R.items ? R.items : R).find(
-          ({ value: R }) => {
-            var j;
-            return Array.isArray(t.value) ? (j = t == null ? void 0 : t.value) == null ? void 0 : j.includes(R) : R === t.value;
+      c,
+      (S = (J = t.options) == null ? void 0 : J.search) == null ? void 0 : S.searchEvent
+    ), B = r(() => n("noFiltersMatchThisSearch")), R = r(() => t.label), A = r(() => {
+      var i, V, M, p;
+      const _ = !((i = t == null ? void 0 : t.options) != null && i.multiple) && (t == null ? void 0 : t.value), y = ((M = ((V = t == null ? void 0 : t.options) == null ? void 0 : V.multiple) && t.value) == null ? void 0 : M.length) === 1;
+      if (_ || y) {
+        let I = (p = t.options.listboxItems.flatMap((O) => O.items ? O.items : O).find(
+          ({ value: O }) => {
+            var q;
+            return Array.isArray(t.value) ? (q = t == null ? void 0 : t.value) == null ? void 0 : q.includes(O) : O === t.value;
           }
-        )) == null ? void 0 : d.label;
-        return !A && t.value && (A = t.value[0]), le(A, 12);
+        )) == null ? void 0 : p.label;
+        return !I && t.value && (I = t.value[0]), le(I, 12);
       }
       return null;
-    }), u = r(() => pe(`filter-listbox-${t.field}`)), T = (O) => {
-      h.value = O;
-      const { onlySlot: N, ...F } = t;
+    }), d = r(() => fe(`filter-listbox-${t.field}`)), C = (_) => {
+      m.value = _;
+      const { onlySlot: y, ...i } = t;
       if (t.options.multiple) {
-        const M = O.length ? h.value.map(({ value: d }) => d) : null;
-        e(v.INPUT, { ...F, value: M });
+        const M = _.length ? m.value.map(({ value: p }) => p) : null;
+        e(v.INPUT, { ...i, value: M });
         return;
       }
-      const k = O.length ? O[0].value : null;
-      e(v.INPUT, { ...F, value: k });
+      const V = _.length ? _[0].value : null;
+      e(v.INPUT, { ...i, value: V });
     }, L = () => {
-      var k, M, d;
-      const { onlySlot: O, ...N } = t;
+      var V, M, p;
+      const { onlySlot: _, ...y } = t;
       if (t.options.multiple) {
-        h.value && ((k = h.value) == null ? void 0 : k.length) === 0 && (h.value = t.defaultValue !== null ? g.value : void 0);
-        const p = (M = h.value) != null && M.length ? (d = h.value) == null ? void 0 : d.map(({ value: A }) => A) : null;
+        m.value && ((V = m.value) == null ? void 0 : V.length) === 0 && (m.value = t.defaultValue !== null ? h.value : void 0);
+        const b = (M = m.value) != null && M.length ? (p = m.value) == null ? void 0 : p.map(({ value: I }) => I) : null;
         e(v.UPDATE, {
-          ...N,
-          value: p
+          ...y,
+          value: b
         });
         return;
       }
-      const F = h.value.length ? h.value[0].value : void 0;
-      e(v.UPDATE, { ...N, value: F });
-    }, y = () => {
-      h.value = c.value;
-    }, m = () => {
+      const i = m.value.length ? m.value[0].value : void 0;
+      e(v.UPDATE, { ...y, value: i });
+    }, U = () => {
+      m.value = u.value;
+    }, k = () => {
       o.value && (o.value = "");
-    }, i = () => {
-      f(g.value), h.value = g.value, L();
-    }, P = () => {
-      _(), h.value = [], L();
-    }, w = r(() => {
-      var F, k;
+    }, T = () => {
+      f(h.value), m.value = h.value, L();
+    }, N = () => {
+      F(), m.value = [], L();
+    }, j = r(() => {
+      var i, V;
       if (t.value == null || !t.options.multiple)
         return null;
-      const O = (F = t.options.listboxItems) == null ? void 0 : F.reduce((M, d) => {
-        var p;
-        return M += (p = d == null ? void 0 : d.items) != null && p.length ? d.items.length : 1, M;
-      }, 0), N = (k = t.value) == null ? void 0 : k.length;
-      return N === 1 ? null : N === O ? n("all") : N;
+      const _ = (i = t.options.listboxItems) == null ? void 0 : i.reduce((M, p) => {
+        var b;
+        return M += (b = p == null ? void 0 : p.items) != null && b.length ? p.items.length : 1, M;
+      }, 0), y = (V = t.value) == null ? void 0 : V.length;
+      return y === 1 ? null : y === _ ? n("all") : y;
     });
-    return { __sfc: !0, slots: l, emit: e, props: t, t: n, searchTerm: o, optionsRef: s, itemsRef: b, cachedSelectedListboxOptions: c, setCachedValues: f, resetCache: _, cachedDefaultSelectedListboxOptions: g, internalFilterValue: h, isSecondaryButtonDisabled: B, isApplyButtonDisabled: D, filteredItems: E, noResultsMessage: S, buttonLabel: I, buttonSecondaryLabel: C, listboxFilterId: u, onOptionSelected: T, updateFilter: L, openFilter: y, closeFilter: m, resetFilter: i, clearFilter: P, appliedFiltersCount: w, BentoSearchBar: ve, BentoDivider: _e, BentoListbox: it, BentoBaseFilter: X };
+    return { __sfc: !0, slots: l, emit: e, props: t, t: n, searchTerm: o, optionsRef: s, itemsRef: c, cachedSelectedListboxOptions: u, setCachedValues: f, resetCache: F, cachedDefaultSelectedListboxOptions: h, internalFilterValue: m, isSecondaryButtonDisabled: g, isApplyButtonDisabled: D, filteredItems: E, noResultsMessage: B, buttonLabel: R, buttonSecondaryLabel: A, listboxFilterId: d, onOptionSelected: C, updateFilter: L, openFilter: U, closeFilter: k, resetFilter: T, clearFilter: N, appliedFiltersCount: j, BentoSearchBar: ve, BentoDivider: _e, BentoListbox: pt, BentoBaseFilter: X };
   }
 });
-var tl = function() {
-  var n, o, s, b, c, f, _, g, h, B, D, E, S, I;
+var dl = function() {
+  var n, o, s, c, u, f, F, h, m, g, D, E, B, R;
   var e = this, t = e._self._c, l = e._self._setupProxy;
-  return t(l.BentoBaseFilter, { attrs: { "applied-filters-count": l.appliedFiltersCount, "button-label": l.buttonLabel, "button-secondary-label": l.buttonSecondaryLabel, disabled: e.disabled, "disable-apply-button": l.isApplyButtonDisabled, "disable-secondary-button": l.isSecondaryButtonDisabled, "default-value": e.defaultValue, label: e.label, field: e.field, "only-slot": !1 }, on: { apply: l.updateFilter, clear: l.clearFilter, reset: l.resetFilter, open: l.openFilter, close: l.closeFilter } }, [t("div", { staticClass: "b-select-filter-button__search-bar" }, [t(l.BentoSearchBar, { attrs: { "debounce-time": (o = (n = e.options) == null ? void 0 : n.search) == null ? void 0 : o.debounceTime, value: l.searchTerm, "input-field-aria-label": l.t("searchFilter", { filter: e.label.toLocaleLowerCase() }) }, on: { input: function(C) {
-    l.searchTerm = C;
-  } } })], 1), t("div", { staticClass: "b-select-filter-button__divider" }, [t(l.BentoDivider)], 1), t(l.BentoListbox, { staticClass: "b-select-filter-button__wrapper", attrs: { id: l.listboxFilterId, "aria-label": e.label, "component-loading": (s = e.options) == null ? void 0 : s.loading, "empty-state": (b = e.options) == null ? void 0 : b.emptyState, "has-more-items": (f = (c = e.options) == null ? void 0 : c.lazy) == null ? void 0 : f.hasMoreItems, items: l.filteredItems, "is-option-disabled": (_ = e.options) == null ? void 0 : _.isOptionDisabled, "lazy-load-type": (h = (g = e.options) == null ? void 0 : g.lazy) == null ? void 0 : h.lazyLoadType, loading: (D = (B = e.options) == null ? void 0 : B.lazy) == null ? void 0 : D.loading, multiple: (E = e.options) == null ? void 0 : E.multiple, "static-categories": (S = e.options) == null ? void 0 : S.staticCategories, "no-results-message": l.noResultsMessage, searching: !!l.searchTerm, "selected-value": l.internalFilterValue, "virtual-scroll": (I = e.options) == null ? void 0 : I.virtualScroll }, on: { select: l.onOptionSelected, "space-pressed": l.onOptionSelected, "enter-pressed": l.onOptionSelected, "show-more": function(C) {
-    var u, T;
-    (T = (u = e.options) == null ? void 0 : u.lazy) == null || T.showMoreEvent();
-  } }, scopedSlots: e._u([e._l(l.slots, function(C, u) {
-    return { key: u, fn: function(T) {
-      return [e._t(u, null, null, T)];
+  return t(l.BentoBaseFilter, { attrs: { "applied-filters-count": l.appliedFiltersCount, "button-label": l.buttonLabel, "button-secondary-label": l.buttonSecondaryLabel, disabled: e.disabled, "disable-apply-button": l.isApplyButtonDisabled, "disable-secondary-button": l.isSecondaryButtonDisabled, "default-value": e.defaultValue, label: e.label, field: e.field, "only-slot": !1, value: e.value }, on: { apply: l.updateFilter, clear: l.clearFilter, reset: l.resetFilter, open: l.openFilter, close: l.closeFilter } }, [t("div", { staticClass: "b-select-filter-button__search-bar" }, [t(l.BentoSearchBar, { attrs: { "debounce-time": (o = (n = e.options) == null ? void 0 : n.search) == null ? void 0 : o.debounceTime, value: l.searchTerm, "input-field-aria-label": l.t("searchFilter", { filter: e.label.toLocaleLowerCase() }) }, on: { input: function(A) {
+    l.searchTerm = A;
+  } } })], 1), t("div", { staticClass: "b-select-filter-button__divider" }, [t(l.BentoDivider)], 1), t(l.BentoListbox, { staticClass: "b-select-filter-button__wrapper", attrs: { id: l.listboxFilterId, "aria-label": e.label, "component-loading": (s = e.options) == null ? void 0 : s.loading, "empty-state": (c = e.options) == null ? void 0 : c.emptyState, "has-more-items": (f = (u = e.options) == null ? void 0 : u.lazy) == null ? void 0 : f.hasMoreItems, items: l.filteredItems, "is-option-disabled": (F = e.options) == null ? void 0 : F.isOptionDisabled, "lazy-load-type": (m = (h = e.options) == null ? void 0 : h.lazy) == null ? void 0 : m.lazyLoadType, loading: (D = (g = e.options) == null ? void 0 : g.lazy) == null ? void 0 : D.loading, multiple: (E = e.options) == null ? void 0 : E.multiple, "static-categories": (B = e.options) == null ? void 0 : B.staticCategories, "no-results-message": l.noResultsMessage, searching: !!l.searchTerm, "selected-value": l.internalFilterValue, "virtual-scroll": (R = e.options) == null ? void 0 : R.virtualScroll }, on: { select: l.onOptionSelected, "space-pressed": l.onOptionSelected, "enter-pressed": l.onOptionSelected, "show-more": function(A) {
+    var d, C;
+    (C = (d = e.options) == null ? void 0 : d.lazy) == null || C.showMoreEvent();
+  } }, scopedSlots: e._u([e._l(l.slots, function(A, d) {
+    return { key: d, fn: function(C) {
+      return [e._t(d, null, null, C)];
     } };
   })], null, !0) })], 1);
-}, ll = [], al = /* @__PURE__ */ x(
-  el,
-  tl,
-  ll,
+}, fl = [], pl = /* @__PURE__ */ $(
+  cl,
+  dl,
+  fl,
   !1,
   null,
-  "0a100ee7"
+  "ad56b38b"
 );
-const nl = al.exports, ol = {
+const bl = pl.exports, vl = {
   "en-US": {
     noFiltersMatchThisSearch: "No filters match this search"
   }
-}, sl = {
-  i18n: { messages: ol },
+}, _l = {
+  i18n: { messages: vl },
   name: "select-filter-dropdown"
-}, rl = /* @__PURE__ */ V({
-  ...sl,
+}, yl = /* @__PURE__ */ x({
+  ..._l,
   props: {
     /**
      * Disables the filter from being interacted with.
@@ -973,35 +1030,35 @@ const nl = al.exports, ol = {
   },
   emits: ["input", "update"],
   setup(a, { emit: e }) {
-    const t = a, { t: l } = z(), n = ie(), { internalFilterValue: o } = G($(t, "value"), $(t, "defaultValue")), s = $(t, "options"), b = U(t.options.listboxItems);
-    K(s, () => {
-      b.value = s.value.listboxItems;
+    const t = a, { t: l } = G(), n = ie(), { internalFilterValue: o } = K(w(t, "value"), w(t, "defaultValue")), s = w(t, "options"), c = P(t.options.listboxItems);
+    z(s, () => {
+      c.value = s.value.listboxItems;
     });
-    const c = r(() => l("noFiltersMatchThisSearch"));
-    return { __sfc: !0, t: l, slots: n, emit: e, props: t, internalFilterValue: o, optionsRef: s, itemsRef: b, noResultsMessage: c, onOptionSelected: (_) => {
-      o.value = _;
-      const { onlySlot: g, ...h } = t;
-      e(v.INPUT, { ...h, value: o.value });
-    }, BentoDropdown: nt };
+    const u = r(() => l("noFiltersMatchThisSearch"));
+    return { __sfc: !0, t: l, slots: n, emit: e, props: t, internalFilterValue: o, optionsRef: s, itemsRef: c, noResultsMessage: u, onOptionSelected: (F) => {
+      o.value = F;
+      const { onlySlot: h, ...m } = t;
+      e(v.INPUT, { ...m, value: o.value });
+    }, BentoDropdown: ut };
   }
 });
-var il = function() {
-  var n, o, s, b, c;
+var ml = function() {
+  var n, o, s, c, u;
   var e = this, t = e._self._c, l = e._self._setupProxy;
-  return t(l.BentoDropdown, { attrs: { value: l.internalFilterValue, items: e.options.listboxItems, search: (n = e.options) == null ? void 0 : n.search, multiple: (o = e.options) == null ? void 0 : o.multiple, "static-categories": (s = e.options) == null ? void 0 : s.staticCategories, "no-results-message": l.noResultsMessage, "is-option-disabled": e.options.isOptionDisabled, "dynamic-filtering": !0, "component-loading": (b = e.options) == null ? void 0 : b.loading, "empty-state": (c = e.options) == null ? void 0 : c.emptyState, disabled: e.disabled }, on: { input: l.onOptionSelected }, scopedSlots: e._u([e._l(l.slots, function(f, _) {
-    return { key: _, fn: function(g) {
-      return [e._t(_, null, null, g)];
+  return t(l.BentoDropdown, { attrs: { value: l.internalFilterValue, items: e.options.listboxItems, search: (n = e.options) == null ? void 0 : n.search, multiple: (o = e.options) == null ? void 0 : o.multiple, "static-categories": (s = e.options) == null ? void 0 : s.staticCategories, "no-results-message": l.noResultsMessage, "is-option-disabled": e.options.isOptionDisabled, "dynamic-filtering": !0, "component-loading": (c = e.options) == null ? void 0 : c.loading, "empty-state": (u = e.options) == null ? void 0 : u.emptyState, disabled: e.disabled }, on: { input: l.onOptionSelected }, scopedSlots: e._u([e._l(l.slots, function(f, F) {
+    return { key: F, fn: function(h) {
+      return [e._t(F, null, null, h)];
     } };
   })], null, !0) });
-}, ul = [], cl = /* @__PURE__ */ x(
-  rl,
-  il,
-  ul,
+}, Fl = [], hl = /* @__PURE__ */ $(
+  yl,
+  ml,
+  Fl,
   !1,
   null,
   null
 );
-const dl = cl.exports, ae = {
+const Sl = hl.exports, ae = {
   /**
    * Disables the filter from being interacted with.
    */
@@ -1050,25 +1107,25 @@ const dl = cl.exports, ae = {
     type: [String, Number, Array],
     default: void 0
   }
-}, pl = {}, fl = /* @__PURE__ */ V({
-  ...pl,
+}, gl = {}, Bl = /* @__PURE__ */ x({
+  ...gl,
   __name: "select-filter",
   props: ae,
   emits: ["input", "update"],
   setup(a, { emit: e }) {
     const t = a, l = ie(), n = (s) => e("input", s), o = (s) => e("update", s);
-    return Te(() => {
+    return Pe(() => {
       var s;
-      (s = t == null ? void 0 : t.options) != null && s.messages && fe(
+      (s = t == null ? void 0 : t.options) != null && s.messages && pe(
         'BentoFilterBar filter of type "BentoFilterItemType.SELECT" options message property',
         `Please remove the "options.messages" property from this filter, it is not required any more for persistent filters.
                         This will be the default behavior in the v2 and "options.messages" will be removed.`,
         "2.0.0"
       );
-    }), { __sfc: !0, slots: l, emit: e, props: t, onInput: n, onUpdate: o, SelectFilterButton: nl, SelectFilterDropdown: dl };
+    }), { __sfc: !0, slots: l, emit: e, props: t, onInput: n, onUpdate: o, SelectFilterButton: bl, SelectFilterDropdown: Sl };
   }
 });
-var bl = function() {
+var Cl = function() {
   var e = this, t = e._self._c, l = e._self._setupProxy;
   return e.onlySlot ? t(l.SelectFilterDropdown, { attrs: { disabled: e.disabled, "default-value": e.defaultValue, field: e.field, label: e.label, options: e.options, value: e.value }, on: { input: l.onInput, update: l.onUpdate }, scopedSlots: e._u([e._l(l.slots, function(n, o) {
     return { key: o, fn: function(s) {
@@ -1079,19 +1136,19 @@ var bl = function() {
       return [e._t(o, null, null, s)];
     } };
   })], null, !0) });
-}, vl = [], _l = /* @__PURE__ */ x(
-  fl,
-  bl,
-  vl,
+}, Dl = [], Al = /* @__PURE__ */ $(
+  Bl,
+  Cl,
+  Dl,
   !1,
   null,
   null
 );
-const ee = _l.exports, yl = V({
+const ee = Al.exports, Tl = x({
   name: "bento-select-avatar-filter",
   components: {
     BentoSelectFilter: ee,
-    BentoAvatar: dt
+    BentoAvatar: _t
   },
   props: {
     ...ae,
@@ -1116,24 +1173,24 @@ const ee = _l.exports, yl = V({
     };
   }
 });
-var ml = function() {
+var Il = function() {
   var e = this, t = e._self._c;
   return e._self._setupProxy, t("bento-select-filter", e._b({ attrs: { field: e.field, label: e.label }, on: { update: e.onUpdate, input: (l) => e.$emit(e.BentoFilterEvent.INPUT, l) }, scopedSlots: e._u([{ key: "default", fn: function({ label: l, data: n }) {
     return [t("bento-avatar", { attrs: { username: l, src: n } })];
   } }]) }, "bento-select-filter", e.$props, !1));
-}, Fl = [], hl = /* @__PURE__ */ x(
-  yl,
-  ml,
-  Fl,
+}, Pl = [], El = /* @__PURE__ */ $(
+  Tl,
+  Il,
+  Pl,
   !1,
   null,
   null
 );
-const we = hl.exports, Sl = V({
+const je = El.exports, Ll = x({
   name: "bento-select-country-filter",
   components: {
     BentoSelectFilter: ee,
-    ListboxOptionTag: xe
+    ListboxOptionTag: ke
   },
   props: {
     ...ae,
@@ -1160,23 +1217,23 @@ const we = hl.exports, Sl = V({
     };
   }
 });
-var Bl = function() {
+var Rl = function() {
   var e = this, t = e._self._c;
   return e._self._setupProxy, t("bento-select-filter", e._b({ attrs: { field: e.field, label: e.label }, on: { update: e.onUpdate, input: (l) => e.$emit(e.BentoFilterEvent.INPUT, l) }, scopedSlots: e._u([{ key: "default", fn: function(l) {
     return [t("listbox-option-tag", { attrs: { option: l } })];
   } }]) }, "bento-select-filter", e.$props, !1));
-}, gl = [], Cl = /* @__PURE__ */ x(
-  Sl,
-  Bl,
-  gl,
+}, Ul = [], Ol = /* @__PURE__ */ $(
+  Ll,
+  Rl,
+  Ul,
   !1,
   null,
   null
 );
-const Ne = Cl.exports, Al = {
+const qe = Ol.exports, $l = {
   name: "bento-select-country-filter"
-}, Dl = /* @__PURE__ */ V({
-  ...Al,
+}, xl = /* @__PURE__ */ x({
+  ...$l,
   props: {
     ...ae,
     /**
@@ -1193,39 +1250,39 @@ const Ne = Cl.exports, Al = {
   },
   emits: [v.INPUT, v.UPDATE],
   setup(a, { emit: e }) {
-    const t = a, l = U(t.options.variant), n = U(t.options.listboxItems);
-    K([() => t.options.variant, () => t.options.listboxItems], () => {
+    const t = a, l = P(t.options.variant), n = P(t.options.listboxItems);
+    z([() => t.options.variant, () => t.options.listboxItems], () => {
       l.value = t.options.variant, n.value = t.options.listboxItems;
     });
-    const o = (c) => e(v.UPDATE, c), s = ct(l, n), b = r(() => ({
+    const o = (u) => e(v.UPDATE, u), s = vt(l, n), c = r(() => ({
       ...t != null && t.options ? t.options : {},
       listboxItems: s.value
     }));
-    return (!l.value || l.value === "custom") && fe(
+    return (!l.value || l.value === "custom") && pe(
       'BentoSelectCountryFilter type with `options.variant==="custom"`',
       "Use any of the other BentoSelectCountryFilter variants instead OR use BentoSelectFilter type for custom labels",
       "2.0.0"
-    ), { __sfc: !0, props: t, emit: e, variant: l, listboxItems: n, onUpdate: o, countryItems: s, countryOptions: b, BentoFilterEvent: v, BentoTypography: se, BentoSelectFilter: ee };
+    ), { __sfc: !0, props: t, emit: e, variant: l, listboxItems: n, onUpdate: o, countryItems: s, countryOptions: c, BentoFilterEvent: v, BentoTypography: se, BentoSelectFilter: ee };
   }
 });
-var Tl = function() {
+var kl = function() {
   var e = this, t = e._self._c, l = e._self._setupProxy;
   return t(l.BentoSelectFilter, e._b({ attrs: { field: e.field, label: e.label, options: l.countryOptions }, on: { update: l.onUpdate, input: (n) => e.$emit(l.BentoFilterEvent.INPUT, n) }, scopedSlots: e._u([{ key: "default", fn: function({ label: n }) {
     return [t(l.BentoTypography, { attrs: { el: "span" } }, [e._v(e._s(n))])];
   } }]) }, "bento-select-filter", l.props, !1));
-}, Pl = [], Il = /* @__PURE__ */ x(
-  Dl,
-  Tl,
-  Pl,
+}, Vl = [], wl = /* @__PURE__ */ $(
+  xl,
+  kl,
+  Vl,
   !1,
   null,
   null
 );
-const Me = Il.exports, El = V({
+const Je = wl.exports, Nl = x({
   name: "bento-select-payment-method-filter",
   components: {
     BentoSelectFilter: ee,
-    BentoPaymentMethod: ut
+    BentoPaymentMethod: bt
   },
   props: {
     ...ae,
@@ -1250,24 +1307,24 @@ const Me = Il.exports, El = V({
     };
   }
 });
-var Ul = function() {
+var Ml = function() {
   var e = this, t = e._self._c;
   return e._self._setupProxy, t("bento-select-filter", e._b({ attrs: { field: e.field, label: e.label }, on: { update: e.onUpdate, input: (l) => e.$emit(e.BentoFilterEvent.INPUT, l) }, scopedSlots: e._u([{ key: "default", fn: function({ value: l, label: n }) {
     return [t("bento-payment-method", { attrs: { type: l, label: n } })];
   } }]) }, "bento-select-filter", e.$props, !1));
-}, Rl = [], xl = /* @__PURE__ */ x(
-  El,
-  Ul,
-  Rl,
+}, Hl = [], jl = /* @__PURE__ */ $(
+  Nl,
+  Ml,
+  Hl,
   !1,
   null,
   null
 );
-const He = xl.exports, Ll = V({
+const Ye = jl.exports, ql = x({
   name: "bento-select-country-filter",
   components: {
     BentoSelectFilter: ee,
-    ListboxOptionTag: xe
+    ListboxOptionTag: ke
   },
   props: {
     ...ae,
@@ -1287,7 +1344,7 @@ const He = xl.exports, Ll = V({
     const t = (o) => e(v.UPDATE, o), l = r(
       () => {
         var o, s;
-        return (s = (o = a == null ? void 0 : a.options) == null ? void 0 : o.listboxItems) == null ? void 0 : s.map(({ label: b, value: c, variant: f }) => ({ label: b, value: c, data: f }));
+        return (s = (o = a == null ? void 0 : a.options) == null ? void 0 : o.listboxItems) == null ? void 0 : s.map(({ label: c, value: u, variant: f }) => ({ label: c, value: u, data: f }));
       }
     );
     return {
@@ -1303,20 +1360,20 @@ const He = xl.exports, Ll = V({
     };
   }
 });
-var Vl = function() {
+var Jl = function() {
   var e = this, t = e._self._c;
   return e._self._setupProxy, t("bento-select-filter", e._b({ attrs: { field: e.field, label: e.label, options: e.countryOptions }, on: { update: e.onUpdate, input: (l) => e.$emit(e.BentoFilterEvent.INPUT, l) }, scopedSlots: e._u([{ key: "default", fn: function({ label: l, data: n }) {
     return [t("listbox-option-tag", { attrs: { option: { value: l, data: n, label: "" } } })];
   } }]) }, "bento-select-filter", e.$props, !1));
-}, $l = [], Ol = /* @__PURE__ */ x(
-  Ll,
-  Vl,
-  $l,
+}, Yl = [], Wl = /* @__PURE__ */ $(
+  ql,
+  Jl,
+  Yl,
   !1,
   null,
   null
 );
-const je = Ol.exports, kl = {
+const We = Wl.exports, zl = {
   "en-US": {
     no: "No",
     yes: "Yes"
@@ -1329,10 +1386,10 @@ const je = Ol.exports, kl = {
     no: "Não",
     yes: "Sim"
   }
-}, wl = V({
+}, Gl = x({
   name: "bento-boolean-filter",
-  i18n: { messages: kl },
-  components: { BentoBaseFilter: X, BentoRadioGroup: et },
+  i18n: { messages: zl },
+  components: { BentoBaseFilter: X, BentoRadioGroup: nt },
   props: {
     /**
      * Disables the filter from being interacted with.
@@ -1372,10 +1429,10 @@ const je = Ol.exports, kl = {
   },
   emits: [v.INPUT, v.UPDATE],
   setup(a, { emit: e }) {
-    const { t } = z(), l = (u) => typeof u == "boolean" ? u == null ? void 0 : u.toString() : u, n = (u) => {
-      var T, L, y, m;
-      return ((L = (T = a == null ? void 0 : a.options) == null ? void 0 : T.positiveOption) == null ? void 0 : L.value) !== void 0 && ((m = (y = a == null ? void 0 : a.options) == null ? void 0 : y.negativeOption) == null ? void 0 : m.value) !== void 0 && typeof a.options.positiveOption.value == "boolean" && typeof a.options.negativeOption.value == "boolean" && typeof u == "string" ? u === "true" : u;
-    }, o = r(() => l(a.defaultValue)), s = r(() => l(a.value)), b = r(() => a.options && a.options.positiveOption && a.options.negativeOption ? [
+    const { t } = G(), l = (d) => typeof d == "boolean" ? d == null ? void 0 : d.toString() : d, n = (d) => {
+      var C, L, U, k;
+      return ((L = (C = a == null ? void 0 : a.options) == null ? void 0 : C.positiveOption) == null ? void 0 : L.value) !== void 0 && ((k = (U = a == null ? void 0 : a.options) == null ? void 0 : U.negativeOption) == null ? void 0 : k.value) !== void 0 && typeof a.options.positiveOption.value == "boolean" && typeof a.options.negativeOption.value == "boolean" && typeof d == "string" ? d === "true" : d;
+    }, o = r(() => l(a.defaultValue)), s = r(() => l(a.value)), c = r(() => a.options && a.options.positiveOption && a.options.negativeOption ? [
       {
         ...a.options.positiveOption,
         value: l(a.options.positiveOption.value)
@@ -1387,76 +1444,76 @@ const je = Ol.exports, kl = {
     ] : [
       { value: "yes", label: t("yes") },
       { value: "no", label: t("no") }
-    ]), { internalFilterValue: c, isSecondaryButtonDisabled: f, isApplyButtonDisabled: _ } = G(
+    ]), { internalFilterValue: u, isSecondaryButtonDisabled: f, isApplyButtonDisabled: F } = K(
       s,
       o
-    ), g = r(() => a.label), h = r(
+    ), h = r(() => a.label), m = r(
       () => {
-        var u;
-        return le((u = b.value.find(({ value: T }) => T === s.value)) == null ? void 0 : u.label, 12);
+        var d;
+        return le((d = c.value.find(({ value: C }) => C === s.value)) == null ? void 0 : d.label, 12);
       }
-    ), B = r(() => ({
+    ), g = r(() => ({
       "b-boolean-filter--only-slot": a.onlySlot
     }));
     ue(() => {
-      c.value || (c.value = null);
+      u.value || (u.value = null);
     });
-    const D = (u) => {
-      c.value = u, e(v.INPUT, {
+    const D = (d) => {
+      u.value = d, e(v.INPUT, {
         ...a,
-        value: n(c.value)
+        value: n(u.value)
       });
     }, E = () => {
-      c.value = s.value;
-    }, S = () => {
+      u.value = s.value;
+    }, B = () => {
       e(v.UPDATE, {
         ...a,
-        value: n(c.value)
+        value: n(u.value)
       });
     };
     return {
       // Values
-      items: b,
-      conditionalClasses: B,
-      buttonLabel: g,
-      buttonSecondaryLabel: h,
-      internalFilterValue: c,
-      isApplyButtonDisabled: _,
+      items: c,
+      conditionalClasses: g,
+      buttonLabel: h,
+      buttonSecondaryLabel: m,
+      internalFilterValue: u,
+      isApplyButtonDisabled: F,
       isSecondaryButtonDisabled: f,
       translatedValue: s,
       translatedDefaultValue: o,
       // Events
       onInput: D,
-      updateFilter: S,
+      updateFilter: B,
       clearFilter: () => {
-        c.value = null, S();
+        u.value = null, B();
       },
       openFilter: E,
       resetFilter: () => e(v.UPDATE, { ...a, value: a.defaultValue })
     };
   }
 });
-var Nl = function() {
+var Kl = function() {
   var e = this, t = e._self._c;
   return e._self._setupProxy, t("bento-base-filter", e._b({ attrs: { value: e.translatedValue, "default-value": e.translatedDefaultValue, "button-label": e.buttonLabel, "button-secondary-label": e.buttonSecondaryLabel, "disable-apply-button": e.isApplyButtonDisabled, "disable-secondary-button": e.isSecondaryButtonDisabled, "only-slot": e.onlySlot }, on: { apply: e.updateFilter, clear: e.clearFilter, open: e.openFilter, reset: e.resetFilter } }, "bento-base-filter", e.$props, !1), [t("div", { staticClass: "b-boolean-filter", class: e.conditionalClasses, on: { keydown: function(l) {
     return !l.type.indexOf("key") && e._k(l.keyCode, "enter", 13, l.key, "Enter") ? null : e.updateFilter.apply(null, arguments);
   } } }, [t("bento-radio-group", { attrs: { items: e.items, label: e.label, "model-value": e.internalFilterValue, "hide-label": "" }, on: { "update:model-value": e.onInput } })], 1)]);
-}, Ml = [], Hl = /* @__PURE__ */ x(
-  wl,
-  Nl,
-  Ml,
+}, Zl = [], Ql = /* @__PURE__ */ $(
+  Gl,
+  Kl,
+  Zl,
   !1,
   null,
   "c8af6e48"
 );
-const qe = Hl.exports, jl = {
+const ze = Ql.exports, Xl = {
   "en-US": {
     from: "From",
     to: "To"
   }
-}, ql = V({
+}, ea = x({
   name: "bento-range-filter",
-  i18n: { messages: jl },
+  i18n: { messages: Xl },
   components: { BentoBaseFilter: X, BentoInputField: be },
   props: {
     /**
@@ -1488,29 +1545,29 @@ const qe = Hl.exports, jl = {
   },
   emits: [v.INPUT, v.UPDATE],
   setup(a, { emit: e }) {
-    const { t } = z(), l = U(null), { internalFilterValue: n, isSecondaryButtonDisabled: o, isApplyButtonDisabled: s } = G(
-      $(a, "value"),
-      $(a, "defaultValue")
-    ), b = r(() => {
-      var y, m, i, P, w, q, W, O;
-      if (!((y = a.value) != null && y[0]) && !((m = a.value) != null && m[1]))
+    const { t } = G(), l = P(null), { internalFilterValue: n, isSecondaryButtonDisabled: o, isApplyButtonDisabled: s } = K(
+      w(a, "value"),
+      w(a, "defaultValue")
+    ), c = r(() => {
+      var U, k, T, N, j, J, S, _;
+      if (!((U = a.value) != null && U[0]) && !((k = a.value) != null && k[1]))
         return null;
-      let C = "";
-      (i = a.value) != null && i[0] ? (P = a.value) != null && P[1] || (C = "≥") : C = "≤";
-      const u = (w = a.value) != null && w[0] ? `${le(a.value[0], 5)}` : "", T = (q = a.value) != null && q[0] && ((W = a.value) != null && W[1]) ? " - " : "", L = (O = a.value) != null && O[1] ? `${le(a.value[1], 5)}` : "";
-      return `${C}${u}${T}${L}`;
-    }), c = r(() => a.label), f = r(() => b.value), _ = r(() => ({
+      let A = "";
+      (T = a.value) != null && T[0] ? (N = a.value) != null && N[1] || (A = "≥") : A = "≤";
+      const d = (j = a.value) != null && j[0] ? `${le(a.value[0], 5)}` : "", C = (J = a.value) != null && J[0] && ((S = a.value) != null && S[1]) ? " - " : "", L = (_ = a.value) != null && _[1] ? `${le(a.value[1], 5)}` : "";
+      return `${A}${d}${C}${L}`;
+    }), u = r(() => a.label), f = r(() => c.value), F = r(() => ({
       "b-range-filter--only-slot": a.onlySlot
-    })), g = () => {
-      n.value = a.value, Ae(() => l.value.focusInput());
-    }, h = () => {
+    })), h = () => {
+      n.value = a.value, Te(() => l.value.focusInput());
+    }, m = () => {
       e(v.INPUT, { ...a, value: n.value });
-    }, B = (C) => {
-      n.value = [C, n.value[1]], h();
-    }, D = (C) => {
-      n.value = [n.value[0], C], h();
+    }, g = (A) => {
+      n.value = [A, n.value[1]], m();
+    }, D = (A) => {
+      n.value = [n.value[0], A], m();
     }, E = () => {
-      n.value.some((C) => C) || (n.value = a.defaultValue !== null ? a.defaultValue : void 0), e(v.UPDATE, {
+      n.value.some((A) => A) || (n.value = a.defaultValue !== null ? a.defaultValue : void 0), e(v.UPDATE, {
         ...a,
         value: n.value
       });
@@ -1518,44 +1575,63 @@ const qe = Hl.exports, jl = {
     return {
       // Values
       inputTextRef: l,
-      conditionalClasses: _,
+      conditionalClasses: F,
       internalFilterValue: n,
       isApplyButtonDisabled: s,
       isSecondaryButtonDisabled: o,
-      buttonLabel: c,
+      buttonLabel: u,
       buttonSecondaryLabel: f,
       // Events
-      updateFrom: B,
+      updateFrom: g,
       updateTo: D,
       updateFilter: E,
       clearFilter: () => {
         n.value = ["", ""], E();
       },
-      openFilter: g,
+      openFilter: h,
       resetFilter: () => e(v.UPDATE, { ...a, value: a.defaultValue }),
       // Translations
       t
     };
   }
 });
-var Jl = function() {
+var ta = function() {
   var e = this, t = e._self._c;
   return e._self._setupProxy, t("bento-base-filter", e._b({ attrs: { "disable-apply-button": e.isApplyButtonDisabled, "disable-secondary-button": e.isSecondaryButtonDisabled, "button-label": e.buttonLabel, "button-secondary-label": e.buttonSecondaryLabel, "only-slot": e.onlySlot }, on: { apply: e.updateFilter, clear: e.clearFilter, open: e.openFilter, reset: e.resetFilter } }, "bento-base-filter", e.$props, !1), [t("div", { staticClass: "b-range-filter", class: e.conditionalClasses, on: { keydown: function(l) {
     return !l.type.indexOf("key") && e._k(l.keyCode, "enter", 13, l.key, "Enter") ? null : e.updateFilter.apply(null, arguments);
   } } }, [t("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")) + " ")]), t("bento-input-field", { staticClass: "b-range-filter__input-field", attrs: { value: e.internalFilterValue ? e.internalFilterValue[1] : "", type: "number", "aria-label": e.t("to") }, on: { input: e.updateTo } }, [e._v(" " + e._s(e.t("to")) + " ")])], 1)]);
-}, Yl = [], Wl = /* @__PURE__ */ x(
-  ql,
-  Jl,
-  Yl,
+}, la = [], aa = /* @__PURE__ */ $(
+  ea,
+  ta,
+  la,
   !1,
   null,
   "0d8531d1"
 );
-const Je = Wl.exports;
+const Ge = aa.exports, Ce = 430, De = 700;
+function na(a, e) {
+  const t = P("div"), l = P(!1), n = P(0), o = r(() => !(n.value < Ce && e.value.small === "multi-line"));
+  function s() {
+    l.value = !1, t.value = "div";
+  }
+  function c() {
+    l.value = !0, t.value = $e;
+  }
+  function u() {
+    n.value > De || n.value < De && n.value >= Ce && e.value.medium === "multi-line" ? s() : c();
+  }
+  return z(() => e.value, u), ot(a, (f) => {
+    n.value = f[0].contentRect.width, u();
+  }), {
+    screenLayoutComponent: t,
+    showSearchbarInsideContainer: o,
+    isOneLineLayout: l
+  };
+}
 var de = /* @__PURE__ */ ((a) => (a.INPUT = "input", a))(de || {});
-const Kl = V({
+const oa = x({
   name: "base-filter-button",
-  components: { BaseButton: Ie, BentoTypography: se, ChevronUpIcon: rt, ChevronDownIcon: st },
+  components: { BaseButton: Ee, BentoTypography: se, ChevronUpIcon: ft, ChevronDownIcon: dt },
   props: {
     /**
      * The number of applies values within the filter.
@@ -1582,46 +1658,46 @@ const Kl = V({
   },
   emits: [Fe.CLICK],
   setup(a, { slots: e, emit: t, attrs: l }) {
-    const n = r(() => e.default ? Ee(e)("default") : null), o = Pe({ ariaLabel: n }), s = U(null), b = r(() => {
-      var _;
+    const n = r(() => e.default ? Ue(e)("default") : null), o = Re({ ariaLabel: n }), s = P(null), c = r(() => {
+      var F;
       return {
-        "aria-controls": (_ = l["aria-controls"]) == null ? void 0 : _.toString()
+        "aria-controls": (F = l["aria-controls"]) == null ? void 0 : F.toString()
       };
-    }), c = r(() => ({
+    }), u = r(() => ({
       "b-base-filter-button--with-chevron": a.hasChevron,
       "b-base-filter-button--filter-open": a.isFilterOpen
     }));
     return {
       // Values
-      ariaAttributes: b,
+      ariaAttributes: c,
       computedAriaLabel: o,
-      conditionalClasses: c,
+      conditionalClasses: u,
       // Methods
       onClickButton: () => {
         a.disabled || t(Fe.CLICK);
       },
-      hasSlot: Ue(e),
+      hasSlot: Le(e),
       // Refs
       baseFilterButtonRef: s
     };
   }
 });
-var zl = function() {
+var sa = function() {
   var e = this, t = e._self._c;
   return e._self._setupProxy, t("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 ? t("chevron-up-icon", { attrs: { "aria-hidden": "true" } }) : t("chevron-down-icon", { attrs: { "aria-hidden": "true" } })];
   }, proxy: !0 } : null], null, !0) }, [t("div", { staticClass: "b-base-filter-button__default-container" }, [t("div", { staticClass: "b-base-filter-button__label-container" }, [t("bento-typography", { staticClass: "b-base-filter-button__label", attrs: { el: "span", variant: "body", stronger: e.bold } }, [e._t("default")], 2)], 1), e.amountAppliedValues && !e.hasChevron ? t("div", { staticClass: "b-base-filter-button__counter-wrapper" }, [t("bento-typography", { staticClass: "b-base-filter-button__counter", attrs: { el: "span", variant: "body", stronger: "" } }, [e._v(" " + e._s(e.amountAppliedValues) + " ")])], 1) : e._e()])]);
-}, Gl = [], Zl = /* @__PURE__ */ x(
-  Kl,
-  zl,
-  Gl,
+}, ra = [], ia = /* @__PURE__ */ $(
+  oa,
+  sa,
+  ra,
   !1,
   null,
   "66b170d4"
 );
-const Ql = Zl.exports, Xl = V({
+const ua = ia.exports, ca = x({
   name: "all-filters-modal-button",
-  components: { BaseFilterButton: Ql },
+  components: { BaseFilterButton: ua },
   props: {
     /**
      * Button label to be displayed
@@ -1653,36 +1729,36 @@ const Ql = Zl.exports, Xl = V({
     };
   }
 });
-var ea = function() {
+var da = function() {
   var e = this, t = e._self._c;
   return e._self._setupProxy, t("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) + " ")]);
-}, ta = [], la = /* @__PURE__ */ x(
-  Xl,
-  ea,
-  ta,
+}, fa = [], pa = /* @__PURE__ */ $(
+  ca,
+  da,
+  fa,
   !1,
   null,
   "4c415ac7"
 );
-const aa = la.exports;
-let Ce = 0;
-const na = {
+const ba = pa.exports;
+let Ae = 0;
+const va = {
   beforeCreate() {
-    this.uuid = Ce.toString(), Ce += 1;
+    this.uuid = Ae.toString(), Ae += 1;
   }
 };
-var oa = function() {
+var _a = function() {
   var e = this, t = e._self._c;
   return t("svg", e._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", e.$attrs, !1), [e.$attrs["svg-title"] ? t("title", [e._v(e._s(e.$attrs["svg-title"]))]) : e._e(), t("path", { attrs: { fill: "#00112C", d: "M12.6465 4.58337C12.32 3.42912 11.2588 2.58337 10 2.58337C8.74122 2.58337 7.67998 3.42912 7.35352 4.58337H1.25V6.08337H7.35352C7.67998 7.23763 8.74122 8.08337 10 8.08337C11.2588 8.08337 12.32 7.23763 12.6465 6.08337H14.75V4.58337H12.6465ZM11.25 5.33337C11.25 6.02373 10.6904 6.58337 10 6.58337C9.30964 6.58337 8.75 6.02373 8.75 5.33337C8.75 4.64302 9.30964 4.08337 10 4.08337C10.6904 4.08337 11.25 4.64302 11.25 5.33337Z" } }), t("path", { attrs: { fill: "#00112C", d: "M4 7.91687C5.25878 7.91687 6.32002 8.76262 6.64648 9.91687H14.75V11.4169H6.64648C6.32002 12.5711 5.25878 13.4169 4 13.4169C2.48122 13.4169 1.25 12.1857 1.25 10.6669C1.25 9.14809 2.48122 7.91687 4 7.91687ZM5.25 10.6669C5.25 9.97651 4.69036 9.41687 4 9.41687C3.30964 9.41687 2.75 9.97651 2.75 10.6669C2.75 11.3572 3.30964 11.9169 4 11.9169C4.69036 11.9169 5.25 11.3572 5.25 10.6669Z" } })]);
-}, sa = [], ra = /* @__PURE__ */ x(
-  na,
-  oa,
-  sa,
+}, ya = [], ma = /* @__PURE__ */ $(
+  va,
+  _a,
+  ya,
   !1,
   null,
   null
 );
-const ia = ra.exports, ua = {
+const Fa = ma.exports, ha = {
   "en-US": {
     activeFilters: "Active filters",
     all: "All",
@@ -1707,29 +1783,29 @@ const ia = ra.exports, ua = {
     clear: "Limpar",
     clearAll: "Limpar tudo"
   }
-}, ca = V({
-  i18n: { messages: ua },
+}, Sa = x({
+  i18n: { messages: ha },
   name: "all-filters-modal",
   components: {
-    AllFiltersModalButton: aa,
-    BentoBooleanFilter: qe,
-    BentoButton: at,
-    BentoDateFilter: Oe,
-    BentoDateRangeFilter: ke,
-    BentoInputFilter: Ve,
-    BentoInputWithDropdownFilter: $e,
-    BentoModal: tt,
-    BentoRangeFilter: Je,
+    AllFiltersModalButton: ba,
+    BentoBooleanFilter: ze,
+    BentoButton: it,
+    BentoDateFilter: Me,
+    BentoDateRangeFilter: He,
+    BentoInputFilter: we,
+    BentoInputWithDropdownFilter: Ne,
+    BentoModal: st,
+    BentoRangeFilter: Ge,
     BentoSearchBar: ve,
-    BentoSelectAvatarFilter: we,
-    BentoSelectCurrencyFilter: Ne,
-    BentoSelectCountryFilter: Me,
+    BentoSelectAvatarFilter: je,
+    BentoSelectCurrencyFilter: qe,
+    BentoSelectCountryFilter: Je,
     BentoSelectFilter: ee,
-    BentoSelectPaymentMethodFilter: He,
-    BentoSelectTagFilter: je,
+    BentoSelectPaymentMethodFilter: Ye,
+    BentoSelectTagFilter: We,
     BentoTypography: se,
     FilterBarButton: ye,
-    SlidersIcon: ia
+    SlidersIcon: Fa
   },
   props: {
     /**
@@ -1759,186 +1835,186 @@ const ia = ra.exports, ua = {
   },
   emits: [de.INPUT],
   setup(a, { emit: e }) {
-    const t = U(a.value), l = pe("all-filters-modal"), n = U([]), o = U(!1), s = U(0), b = U(null), c = U(""), { t: f } = z(), _ = Re(c, $(t, "value")), g = U({});
+    const t = P(a.value), l = fe("all-filters-modal"), n = P([]), o = P(!1), s = P(0), c = P(null), u = P(""), { t: f } = G(), F = xe(u, w(t, "value")), h = P({});
     ue(() => {
-      g.value = [];
-    }), K(
+      h.value = [];
+    }), z(
       () => a.value,
       () => {
-        o.value ? t.value = a.value.map((d, p) => ({ ...d, value: t.value[p].value })) : t.value = a.value;
+        o.value ? t.value = a.value.map((p, b) => ({ ...p, value: t.value[b].value })) : t.value = a.value;
       }
     );
-    const h = (d) => d.sort((p, A) => p.label > A.label ? 1 : A.label > p.label ? -1 : 0), B = r(
-      () => h(
-        _.value.filter(
-          (d) => {
-            var p, A;
-            return Array.isArray(d.value) ? ((p = d.value) == null ? void 0 : p.length) && ((A = d.value) == null ? void 0 : A.find((R) => R !== "")) : d.value;
+    const m = (p) => p.sort((b, I) => b.label > I.label ? 1 : I.label > b.label ? -1 : 0), g = r(
+      () => m(
+        F.value.filter(
+          (p) => {
+            var b, I;
+            return Array.isArray(p.value) ? ((b = p.value) == null ? void 0 : b.length) && ((I = p.value) == null ? void 0 : I.find((O) => O !== "")) : p.value;
           }
         )
       )
     ), D = r(
-      () => h(
-        _.value.filter(
-          (d) => {
-            var p, A;
-            return Array.isArray(d.value) ? ((p = d.value) == null ? void 0 : p.length) === 0 || ((A = d.value) == null ? void 0 : A.every((R) => R === "")) : !d.value;
+      () => m(
+        F.value.filter(
+          (p) => {
+            var b, I;
+            return Array.isArray(p.value) ? ((b = p.value) == null ? void 0 : b.length) === 0 || ((I = p.value) == null ? void 0 : I.every((O) => O === "")) : !p.value;
           }
         )
       )
     ), E = r(() => {
-      var d;
-      return c.value && ((d = _.value) == null ? void 0 : d.length) === 0;
-    }), S = r(() => t.value[s.value]), I = () => {
-      const d = B.value.length ? B.value[0] : D.value[0], p = t.value.findIndex(
-        (A) => A.label === d.label && A.field === d.field
+      var p;
+      return u.value && ((p = F.value) == null ? void 0 : p.length) === 0;
+    }), B = r(() => t.value[s.value]), R = () => {
+      const p = g.value.length ? g.value[0] : D.value[0], b = t.value.findIndex(
+        (I) => I.label === p.label && I.field === p.field
       );
-      s.value = p;
+      s.value = b;
     };
-    Te(() => {
-      I();
+    Pe(() => {
+      R();
     });
-    const C = (d) => d.map((p) => {
-      var A, R, j, Z, ne, re;
-      switch (p.type) {
-        case J.SELECT:
-        case J.SELECT_AVATAR:
-        case J.SELECT_COUNTRY:
-        case J.SELECT_CURRENCY:
-        case J.SELECT_PAYMENT_METHOD:
-        case J.SELECT_TAG:
-          switch ((A = p.options) == null ? void 0 : A.multiple) {
+    const A = (p) => p.map((b) => {
+      var I, O, q, Z, ne, re;
+      switch (b.type) {
+        case Y.SELECT:
+        case Y.SELECT_AVATAR:
+        case Y.SELECT_COUNTRY:
+        case Y.SELECT_CURRENCY:
+        case Y.SELECT_PAYMENT_METHOD:
+        case Y.SELECT_TAG:
+          switch ((I = b.options) == null ? void 0 : I.multiple) {
             case !0:
               return {
-                label: p.label,
-                field: p.field,
-                count: (R = p.value) != null && R.length ? (j = p.value) == null ? void 0 : j.length : null
+                label: b.label,
+                field: b.field,
+                count: (O = b.value) != null && O.length ? (q = b.value) == null ? void 0 : q.length : null
               };
             default:
               return {
-                label: p.label,
-                field: p.field,
-                count: p.value == null ? null : 1
+                label: b.label,
+                field: b.field,
+                count: b.value == null ? null : 1
               };
           }
-        case J.DATE_RANGE:
+        case Y.DATE_RANGE:
           return {
-            label: p.label,
-            field: p.field,
-            count: ((Z = p.value) == null ? void 0 : Z.startDate) != null && ((ne = p.value) == null ? void 0 : ne.endDate) != null ? 1 : null
+            label: b.label,
+            field: b.field,
+            count: ((Z = b.value) == null ? void 0 : Z.startDate) != null && ((ne = b.value) == null ? void 0 : ne.endDate) != null ? 1 : null
           };
-        case J.RANGE:
+        case Y.RANGE:
           return {
-            label: p.label,
-            field: p.field,
-            count: (re = p.value) != null && re.find((H) => H !== "") ? 1 : null
+            label: b.label,
+            field: b.field,
+            count: (re = b.value) != null && re.find((H) => H !== "") ? 1 : null
           };
-        case J.INPUT:
-        case J.BOOLEAN:
-        case J.DATE:
+        case Y.INPUT:
+        case Y.BOOLEAN:
+        case Y.DATE:
         default:
           return {
-            label: p.label,
-            field: p.field,
-            count: p.value != null ? 1 : null
+            label: b.label,
+            field: b.field,
+            count: b.value != null ? 1 : null
           };
       }
-    }), u = r(
+    }), d = r(
       () => {
-        var d;
-        return Array.isArray(S.value.value) ? ((d = S.value) == null ? void 0 : d.value.length) && S.value.value.find((p) => p !== "") : !!t.value[s.value].value;
+        var p;
+        return Array.isArray(B.value.value) ? ((p = B.value) == null ? void 0 : p.value.length) && B.value.value.find((b) => b !== "") : !!t.value[s.value].value;
       }
-    ), T = r(
+    ), C = r(
       () => {
-        var d;
-        return (d = C(a.value)) == null ? void 0 : d.filter(({ count: p }) => !!p).length;
+        var p;
+        return (p = A(a.value)) == null ? void 0 : p.filter(({ count: b }) => !!b).length;
       }
     ), L = () => {
       o.value ? o.value = !1 : o.value = !0;
-    }, y = (d) => {
-      var A, R, j;
-      const p = C(t.value).find((Z) => Z.field === d.field).count;
-      return d.type.includes("BentoSelect") && ((A = d.options) != null && A.multiple) && p === ((j = (R = d.options) == null ? void 0 : R.listboxItems) == null ? void 0 : j.length) ? f("all") : p;
-    }, m = (d, p) => {
+    }, U = (p) => {
+      var I, O, q;
+      const b = A(t.value).find((Z) => Z.field === p.field).count;
+      return p.type.includes("BentoSelect") && ((I = p.options) != null && I.multiple) && b === ((q = (O = p.options) == null ? void 0 : O.listboxItems) == null ? void 0 : q.length) ? f("all") : b;
+    }, k = (p, b) => {
       s.value = t.value.findIndex(
-        (A) => A.label === d && A.field === p
+        (I) => I.label === p && I.field === b
       );
-    }, i = () => {
-      c.value = "";
-    }, P = () => {
-      o.value = !1, t.value = a.value, i(), I();
-    }, w = (d) => {
-      const p = t.value.map(({ value: A, ...R }, j) => j === s.value ? { value: d.value, ...R } : { value: A, ...R });
-      t.value = p;
-    }, q = () => {
-      w({
-        field: S.value.field,
-        label: S.value.label,
-        type: S.value.type,
+    }, T = () => {
+      u.value = "";
+    }, N = () => {
+      o.value = !1, t.value = a.value, T(), R();
+    }, j = (p) => {
+      const b = t.value.map(({ value: I, ...O }, q) => q === s.value ? { value: p.value, ...O } : { value: I, ...O });
+      t.value = b;
+    }, J = () => {
+      j({
+        field: B.value.field,
+        label: B.value.label,
+        type: B.value.type,
         value: void 0
       });
-    }, W = () => {
-      t.value = a.value.map(({ value: d, ...p }) => ({
-        ...p,
+    }, S = () => {
+      t.value = a.value.map(({ value: p, ...b }) => ({
+        ...b,
         value: void 0
       }));
-    }, O = () => {
+    }, _ = () => {
       e(de.INPUT, t.value), o.value = !1;
-    }, N = r(
+    }, y = r(
       () => JSON.stringify(t.value) === JSON.stringify(a.value)
-    ), F = r(() => [
+    ), i = r(() => [
       {
         title: f("applyAll"),
-        disabled: N.value,
-        event: O
+        disabled: y.value,
+        event: _
       },
       {
         title: f("cancel"),
-        event: P
+        event: N
       },
       {
         title: f("clearAll"),
-        disabled: !T.value,
-        event: W
+        disabled: !C.value,
+        event: S
       }
     ]);
     return {
       // Enums
-      BentoModalEvent: lt,
+      BentoModalEvent: rt,
       // Values
       allFiltersModalUniqueId: l,
       allFiltersModalFiltersSection: n,
-      allFiltersModalFilterButtons: g,
-      numberOfActiveFilters: T,
+      allFiltersModalFilterButtons: h,
+      numberOfActiveFilters: C,
       isEmptyResultForSearchFilter: E,
       isModalOpen: o,
-      isClearButtonEnabled: u,
-      activeFilters: B,
+      isClearButtonEnabled: d,
+      activeFilters: g,
       otherFilters: D,
-      modalActions: F,
-      selectedFilter: S,
-      selectedFilterRef: b,
-      searchTerm: c,
+      modalActions: i,
+      selectedFilter: B,
+      selectedFilterRef: c,
+      searchTerm: u,
       // Methods
       onClickAllFiltersModal: L,
-      getFilterCount: y,
-      cancel: P,
-      selectFilter: m,
-      clearFilter: q,
-      updateFilter: w,
-      onSearchbarClear: i,
+      getFilterCount: U,
+      cancel: N,
+      selectFilter: k,
+      clearFilter: J,
+      updateFilter: j,
+      onSearchbarClear: T,
       onKeydownRight: () => {
-        ot(1, b.value.$el).focus();
+        ct(1, c.value.$el).focus();
       },
       onKeydownLeft: () => {
-        g.value[S.value.label].$el.focus();
+        h.value[B.value.label].$el.focus();
       },
       // Translations
       t: f
     };
   }
 });
-var da = function() {
+var ga = function() {
   var e = this, t = e._self._c;
   return e._self._setupProxy, t("div", { staticClass: "b-all-filters-modal" }, [t("filter-bar-button", { attrs: { "is-filter-open": e.isModalOpen, "applied-filters-count": e.numberOfActiveFilters, "no-applied-state-styles": "" }, on: { click: e.onClickAllFiltersModal }, scopedSlots: e._u([{ key: "iconLeft", fn: function() {
     return [t("sliders-icon", { attrs: { "aria-hidden": "true" } })];
@@ -1963,15 +2039,15 @@ var da = function() {
       return !l.type.indexOf("key") && e._k(l.keyCode, "left", 37, l.key, ["Left", "ArrowLeft"]) || "button" in l && l.button !== 0 ? null : e.onKeydownLeft.apply(null, arguments);
     } } }, [t("div", { staticClass: "b-all-filters-modal__selected-filter-text" }, [t("bento-typography", { attrs: { el: "div", variant: "title", medium: "" } }, [e._v(e._s(e.selectedFilter.label))]), e.selectedFilter.description ? t("bento-typography", { attrs: { el: "div", variant: "body", wide: "" } }, [e._v(" " + e._s(e.selectedFilter.description) + " ")]) : e._e()], 1), t("div", { staticClass: "b-all-filters-modal__selected-filter-component" }, [t(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), t("div", { staticClass: "b-all-filters-modal__clear-button" }, [t("bento-button", { attrs: { variant: "secondary", disabled: !e.isClearButtonEnabled }, on: { click: e.clearFilter } }, [e._v(e._s(e.t("clear")))])], 1)])];
   }, proxy: !0 }]) })], 1);
-}, pa = [], fa = /* @__PURE__ */ x(
-  ca,
-  da,
-  pa,
+}, Ba = [], Ca = /* @__PURE__ */ $(
+  Sa,
+  ga,
+  Ba,
   !1,
   null,
   "20df0a7f"
 );
-const ba = fa.exports, va = {
+const Da = Ca.exports, Aa = {
   "en-US": {
     clearFilters: "Clear filters",
     filtersHaveBeenCleared: "Filters have been cleared.",
@@ -1992,28 +2068,34 @@ const ba = fa.exports, va = {
     resetFilters: "Redefinir filtros",
     undo: "Desfazer"
   }
-}, _a = {
-  i18n: { messages: va },
+}, Ta = {
+  i18n: { messages: Aa },
   name: "bento-filter-bar",
   components: {
-    BentoBooleanFilter: qe,
-    BentoDateFilter: Oe,
-    BentoDateRangeFilter: ke,
-    BentoInputFilter: Ve,
-    BentoInputWithDropdownFilter: $e,
-    BentoRangeFilter: Je,
-    BentoSelectAvatarFilter: we,
-    BentoSelectCountryFilter: Me,
-    BentoSelectCurrencyFilter: Ne,
+    BentoBooleanFilter: ze,
+    BentoDateFilter: Me,
+    BentoDateRangeFilter: He,
+    BentoInputFilter: we,
+    BentoInputWithDropdownFilter: Ne,
+    BentoRangeFilter: Ge,
+    BentoSelectAvatarFilter: je,
+    BentoSelectCountryFilter: Je,
+    BentoSelectCurrencyFilter: qe,
     BentoSelectFilter: ee,
-    BentoSelectPaymentMethodFilter: He,
-    BentoSelectTagFilter: je
+    BentoSelectPaymentMethodFilter: Ye,
+    BentoSelectTagFilter: We,
+    BentoTeleport: Oe,
+    FixedScroller: $e
   }
-}, ya = /* @__PURE__ */ V({
-  ..._a,
+}, Ia = /* @__PURE__ */ x({
+  ...Ta,
   props: {
     config: { default: () => [] },
     filterValues: { default: () => [] },
+    containerSizeLayout: { default: () => ({
+      medium: "one-line",
+      small: "multi-line"
+    }) },
     search: { default: void 0 },
     searchTerm: { default: void 0 },
     showAppliedHiddenFilters: { type: Boolean, default: !1 },
@@ -2027,108 +2109,119 @@ const ba = fa.exports, va = {
     te.UPDATE
   ],
   setup(a, { expose: e, emit: t }) {
-    const l = a, { t: n } = z(), o = r(
+    const l = a, { t: n } = G(), o = P(null), s = r(
       () => {
-        var y, m;
-        return (m = ((y = l.config) == null ? void 0 : y.length) > 0 ? l.config : l.value) == null ? void 0 : m.map((i) => {
-          var w;
-          let P = (w = l.filterValues.find(({ field: q }) => q === i.field)) == null ? void 0 : w.value;
-          return P === void 0 && (P = (i == null ? void 0 : i.value) === void 0 && (i == null ? void 0 : i.defaultValue) !== void 0 ? i == null ? void 0 : i.defaultValue : i == null ? void 0 : i.value), { ...i, value: P !== void 0 ? P : i == null ? void 0 : i.value };
+        var S, _;
+        return (_ = ((S = l.config) == null ? void 0 : S.length) > 0 ? l.config : l.value) == null ? void 0 : _.map((y) => {
+          var V;
+          let i = (V = l.filterValues.find(({ field: M }) => M === y.field)) == null ? void 0 : V.value;
+          return i === void 0 && (i = (y == null ? void 0 : y.value) === void 0 && (y == null ? void 0 : y.defaultValue) !== void 0 ? y == null ? void 0 : y.defaultValue : y == null ? void 0 : y.value), { ...y, value: i !== void 0 ? i : y == null ? void 0 : y.value };
         });
       }
-    ), { addToast: s } = ht(), b = r(() => {
-      var y;
-      return ((y = l.search) == null ? void 0 : y.inputFieldAriaLabel) || n("searchBar");
-    }), c = r(() => {
+    ), { addToast: c } = Dt(), { screenLayoutComponent: u, showSearchbarInsideContainer: f, isOneLineLayout: F } = na(
+      o,
+      w(l, "containerSizeLayout")
+    ), h = r(() => ({
+      "b-filter-bar__fixed-scroller": F.value,
+      "b-filter-bar__container": !F.value
+      // Multi-line
+    })), m = r(() => ({
+      "b-filter-bar__scroller-content": F.value,
+      "b-filter-bar__filters": !F.value
+      // Multi-line
+    })), g = r(() => {
+      var S;
+      return ((S = l.search) == null ? void 0 : S.inputFieldAriaLabel) || n("searchBar");
+    }), D = r(() => {
       if (!l.search)
         return;
-      const { hint: y, inputFieldAriaLabel: m, debounceTime: i, placeholder: P } = l.search;
-      return { hint: y, inputFieldAriaLabel: m, debounceTime: i, placeholder: P };
-    }), f = r(() => o.value.some(
-      ({ visible: m }) => m != null
-    ) ? o.value.some(({ visible: m }) => !m) : !1), _ = r(
-      () => o.value.filter(({ defaultValue: y }) => y !== void 0)
-    ), g = r(() => o.value.some(
-      ({ visible: m }) => m != null
-    ) ? o.value.filter(
-      ({ defaultValue: m, visible: i, value: P }) => (
+      const { hint: S, inputFieldAriaLabel: _, debounceTime: y, placeholder: i } = l.search;
+      return { hint: S, inputFieldAriaLabel: _, debounceTime: y, placeholder: i };
+    }), E = r(() => s.value.some(
+      ({ visible: _ }) => _ != null
+    ) ? s.value.some(({ visible: _ }) => !_) : !1), B = r(
+      () => s.value.filter(({ defaultValue: S }) => S !== void 0)
+    ), R = r(() => s.value.some(
+      ({ visible: _ }) => _ != null
+    ) ? s.value.filter(
+      ({ defaultValue: _, visible: y, value: i }) => (
         // eslint-disable-next-line eqeqeq
-        m === void 0 && i || l.showAppliedHiddenFilters && P != null
+        _ === void 0 && y || l.showAppliedHiddenFilters && i != null
       )
-    ) : o.value.filter(
-      ({ defaultValue: m, value: i }) => (
+    ) : s.value.filter(
+      ({ defaultValue: _, value: y }) => (
         // eslint-disable-next-line eqeqeq
-        m === void 0 || l.showAppliedHiddenFilters && i != null
+        _ === void 0 || l.showAppliedHiddenFilters && y != null
       )
-    )), h = r(() => l.searchTerm != null), B = r(
-      () => o.value.filter(({ defaultValue: y }) => y == null).some(({ value: y }) => y != null)
-    ), D = r(() => _.value.length === 0 && B.value), E = r(() => _.value.length === 0 ? !1 : !o.value.filter(({ defaultValue: m }) => m !== void 0 || m !== null).every(({ value: m, defaultValue: i }) => JSON.stringify(m) === JSON.stringify(i)) || B.value), S = (y) => {
-      t(oe.INPUT, y), t(
+    )), A = r(() => l.searchTerm != null), d = r(
+      () => s.value.filter(({ defaultValue: S }) => S == null).some(({ value: S }) => S != null)
+    ), C = r(() => B.value.length === 0 && d.value), L = r(() => B.value.length === 0 ? !1 : !s.value.filter(({ defaultValue: _ }) => _ !== void 0 || _ !== null).every(({ value: _, defaultValue: y }) => JSON.stringify(_) === JSON.stringify(y)) || d.value), U = (S) => {
+      t(oe.INPUT, S), t(
         oe.UPDATE_FILTER_VALUES,
-        y == null ? void 0 : y.filter(({ value: m }) => m !== null || m !== void 0).map(({ field: m, value: i }) => ({ field: m, value: i }))
+        S == null ? void 0 : S.filter(({ value: _ }) => _ !== null || _ !== void 0).map(({ field: _, value: y }) => ({ field: _, value: y }))
       );
-    }, I = (y) => {
-      const m = o.value.findIndex(
-        (P) => P.field === y.field
-      ), i = o.value.slice();
-      i[m].value = y.value, S(i);
-    }, C = () => {
-      const y = o.value.slice(), m = o.value.map(({ value: i, ...P }) => ({
-        ...P,
+    }, k = (S) => {
+      const _ = s.value.findIndex(
+        (i) => i.field === S.field
+      ), y = s.value.slice();
+      y[_].value = S.value, U(y);
+    }, T = () => {
+      const S = s.value.slice(), _ = s.value.map(({ value: y, ...i }) => ({
+        ...i,
         value: void 0
       }));
-      s({
+      c({
         text: n("filtersHaveBeenCleared"),
         action: {
-          handler: () => S(y),
+          handler: () => U(S),
           text: n("undo")
         }
-      }), S(m);
-    }, u = () => {
-      const y = o.value.slice(), m = o.value.map(({ defaultValue: i, ...P }) => ({
-        ...P,
-        defaultValue: i,
-        value: i
+      }), U(_);
+    }, N = () => {
+      const S = s.value.slice(), _ = s.value.map(({ defaultValue: y, ...i }) => ({
+        ...i,
+        defaultValue: y,
+        value: y
       }));
-      s({
+      c({
         text: n("filtersHaveBeenReset"),
         action: {
-          handler: () => S(y),
+          handler: () => U(S),
           text: n("undo")
         }
-      }), S(m);
-    }, T = (y) => {
-      t(te.INPUT, y), t(te.UPDATE, y);
-    }, L = () => {
+      }), U(_);
+    }, j = (S) => {
+      t(te.INPUT, S), t(te.UPDATE, S);
+    }, J = () => {
       t(te.CLEAR);
     };
-    return e({ isClearAllVisible: D, clearAllFilters: C, isResetAllVisible: E, resetAllFilters: u }), { __sfc: !0, props: l, emit: t, t: n, valueAndFilterValuesPropsMerged: o, addToast: s, searchBarAriaLabel: b, searchBarProps: c, hasHiddenFilters: f, persistentFilters: _, regularFilters: g, isSearchBarEnabled: h, hasActiveFilters: B, isClearAllVisible: D, isResetAllVisible: E, updateAllFilters: S, updateFilterHandler: I, clearAllFilters: C, resetAllFilters: u, onSearchbarInput: T, onSearchbarClear: L, FilterBarButton: ye, BentoSearchBar: ve, FixedScroller: St, AllFiltersModal: ba, RefreshIcon: Ft };
+    return e({ isClearAllVisible: C, clearAllFilters: T, isResetAllVisible: L, resetAllFilters: N }), { __sfc: !0, props: l, emit: t, t: n, filterBarRef: o, valueAndFilterValuesPropsMerged: s, addToast: c, screenLayoutComponent: u, showSearchbarInsideContainer: f, isOneLineLayout: F, containerConditionalClasses: h, contentConditionalClasses: m, searchBarAriaLabel: g, searchBarProps: D, hasHiddenFilters: E, persistentFilters: B, regularFilters: R, isSearchBarEnabled: A, hasActiveFilters: d, isClearAllVisible: C, isResetAllVisible: L, updateAllFilters: U, updateFilterHandler: k, clearAllFilters: T, resetAllFilters: N, onSearchbarInput: j, onSearchbarClear: J, FilterBarButton: ye, BentoSearchBar: ve, AllFiltersModal: Da, RefreshIcon: Ct };
   }
 });
-var ma = function() {
+var Pa = function() {
   var e = this, t = e._self._c, l = e._self._setupProxy;
-  return t("div", { staticClass: "b-filter-bar" }, [t("div", { staticClass: "b-filter-bar__container" }, [t("div", { staticClass: "b-filter-bar__filters" }, [t(l.FixedScroller, { staticClass: "b-filter-bar__fixed-scroller", attrs: { condensed: "" } }, [t("div", { staticClass: "b-filter-bar__scroller-content" }, [l.isSearchBarEnabled ? t(l.BentoSearchBar, e._b({ staticClass: "b-filter-bar__search-bar", attrs: { "input-field-aria-label": l.searchBarAriaLabel, value: e.searchTerm, condensed: "" }, on: { input: l.onSearchbarInput, clear: l.onSearchbarClear } }, "bento-search-bar", l.searchBarProps, !1)) : e._e(), l.persistentFilters.length ? e._l(l.persistentFilters, function(n) {
+  return t("div", { ref: "filterBarRef", staticClass: "b-filter-bar" }, [!l.showSearchbarInsideContainer && l.isSearchBarEnabled ? t("div", { staticClass: "b-filter-bar__search-external-container" }, [t(l.BentoSearchBar, e._b({ staticClass: "b-filter-bar__search-bar", attrs: { "input-field-aria-label": l.searchBarAriaLabel, value: e.searchTerm, condensed: "" }, on: { input: l.onSearchbarInput, clear: l.onSearchbarClear } }, "bento-search-bar", l.searchBarProps, !1))], 1) : e._e(), t(l.screenLayoutComponent, { tag: "component", class: l.containerConditionalClasses, attrs: { condensed: "" } }, [t("div", { class: l.contentConditionalClasses }, [l.showSearchbarInsideContainer && l.isSearchBarEnabled ? t("div", [t(l.BentoSearchBar, e._b({ staticClass: "b-filter-bar__search-bar", attrs: { "input-field-aria-label": l.searchBarAriaLabel, value: e.searchTerm, condensed: "" }, on: { input: l.onSearchbarInput, clear: l.onSearchbarClear } }, "bento-search-bar", l.searchBarProps, !1))], 1) : e._e(), l.persistentFilters.length ? e._l(l.persistentFilters, function(n) {
     return t(n.type, { key: n.field, tag: "component", attrs: { field: n.field, label: n.label, disabled: n == null ? void 0 : n.disabled, options: n.options, value: n.value, "default-value": n.defaultValue }, on: { update: l.updateFilterHandler } });
   }) : e._e(), e._l(l.regularFilters, function(n) {
     return t(n.type, { key: n.field, tag: "component", attrs: { field: n.field, label: n.label, disabled: n == null ? void 0 : n.disabled, options: n.options, value: n.value }, on: { update: l.updateFilterHandler } });
-  })], 2)])], 1), l.hasHiddenFilters || l.isClearAllVisible || l.isResetAllVisible ? t("div", { staticClass: "b-filter-bar__actions" }, [l.hasHiddenFilters ? t(l.AllFiltersModal, { staticClass: "b-filter-bar__all-filters-modal", attrs: { value: l.valueAndFilterValuesPropsMerged }, on: { input: l.updateAllFilters } }) : e._e(), t(l.FilterBarButton, { directives: [{ name: "show", rawName: "v-show", value: l.isClearAllVisible, expression: "isClearAllVisible" }], staticClass: "b-filter-bar__clear-all", on: { click: l.clearAllFilters }, scopedSlots: e._u([{ key: "iconLeft", fn: function() {
+  }), l.hasHiddenFilters ? t(l.AllFiltersModal, { staticClass: "b-filter-bar__all-filters-modal", attrs: { value: l.valueAndFilterValuesPropsMerged }, on: { input: l.updateAllFilters } }) : e._e(), l.isClearAllVisible ? t(l.FilterBarButton, { staticClass: "b-filter-bar__clear-all", on: { click: l.clearAllFilters }, scopedSlots: e._u([{ key: "iconLeft", fn: function() {
     return [t(l.RefreshIcon, { attrs: { "aria-hidden": "true" } })];
-  }, proxy: !0 }], null, !1, 4046500904) }, [e._v(" " + e._s(l.t("clearFilters")) + " ")]), t(l.FilterBarButton, { directives: [{ name: "show", rawName: "v-show", value: l.isResetAllVisible, expression: "isResetAllVisible" }], staticClass: "b-filter-bar__reset-all", on: { click: l.resetAllFilters }, scopedSlots: e._u([{ key: "iconLeft", fn: function() {
+  }, proxy: !0 }], null, !1, 4046500904) }, [e._v(" " + e._s(l.t("clearFilters")) + " ")]) : e._e(), l.isResetAllVisible ? t(l.FilterBarButton, { staticClass: "b-filter-bar__reset-all", on: { click: l.resetAllFilters }, scopedSlots: e._u([{ key: "iconLeft", fn: function() {
     return [t(l.RefreshIcon, { attrs: { "aria-hidden": "true" } })];
-  }, proxy: !0 }], null, !1, 4046500904) }, [e._v(" " + e._s(l.t("resetFilters")) + " ")])], 1) : e._e()])]);
-}, Fa = [], ha = /* @__PURE__ */ x(
-  ya,
-  ma,
-  Fa,
+  }, proxy: !0 }], null, !1, 4046500904) }, [e._v(" " + e._s(l.t("resetFilters")) + " ")]) : e._e()], 2)])], 1);
+}, Ea = [], La = /* @__PURE__ */ $(
+  Ia,
+  Pa,
+  Ea,
   !1,
   null,
-  "6b3fcb5a"
+  "7e269195"
 );
-const un = ha.exports;
+const Bn = La.exports;
 export {
-  un as B,
+  Bn as B,
   v as a,
   oe as b,
-  J as c
+  Y as c
 };
-//# sourceMappingURL=filter-bar.Djv7J4G1.js.map
+//# sourceMappingURL=filter-bar.C3-x0K8J.js.map