@adyen/bento-vue3 1.72.0 → 1.74.0

package/dist/chunks/filter-bar.nX73NKNC.js

@@ -0,0 +1,2948 @@
+import { defineComponent as Q, useSlots as Ne, useAttrs as Ot, computed as p, ref as K, createBlock as w, openBlock as F, unref as T, normalizeClass as de, withCtx as C, createElementVNode as W, renderSlot as ce, createCommentVNode as Z, createVNode as R, createTextVNode as X, toDisplayString as x, watch as ie, createElementBlock as G, withDirectives as Rt, withKeys as me, nextTick as it, toRef as te, onBeforeUpdate as Ve, provide as rt, mergeProps as re, resolveComponent as N, Fragment as $e, reactive as wt, createSlots as Pe, renderList as ye, normalizeProps as Re, guardReactiveProps as we, onMounted as ut, resolveDynamicComponent as Oe } from "vue";
+import { B as ke, b as Ae } from "./search-bar.BD_R-vgA.js";
+import { u as kt } from "./use-bento-toast-controller.Kri_h7jS.js";
+import { u as pe } from "./index.pdBj0KQU.js";
+import { k as Nt } from "./index.E60QniEu.js";
+import { F as dt } from "./fixed-scroller.Dmg8r9QP.js";
+import { _ as Vt } from "./modal.vue_vue_type_script_setup_true_lang.c3Ma1oAL.js";
+import { B as Mt } from "./button.DhcxX2GJ.js";
+import { B as Ht } from "./radio-group.DWNqrkZ3.js";
+import { t as Ce } from "./truncate.BfIl_-71.js";
+import { u as jt, d as ct, h as qt, I as Kt, k as Jt, B as Yt } from "./button-actions.BQ3AFQqt.js";
+import { b as zt } from "./tooltip.Dp9_ESm_.js";
+import { _ as le } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import { g as qe } from "./generate-uid.NJ8tVoha.js";
+import { C as Wt } from "./cross-small.n1UO5wNB.js";
+import { B as pt, a as We } from "./base-button.BYhf0xf3.js";
+import { B as ve, d as Ke } from "./typography.yBEME_Gu.js";
+import { u as bt } from "./use-has-slot.B7eQSabc.js";
+import { u as ft } from "./aria-label.CaUURpnB.js";
+import { g as vt } from "./get-slot-text.DQlZEsId.js";
+import { B as Je } from "./input-field.D_tADgPG.js";
+import { u as mt, B as Gt } from "./dropdown.bLsoTZbw.js";
+import { g as Zt } from "./focus-trap.CpNGD7PH.js";
+import { C as Qt } from "./chevron-up.kfuLRpZb.js";
+import { C as Xt } from "./chevron-down.DCQ6ZLaq.js";
+/* empty css              */
+import { B as Ye } from "./divider.DnKNNyWB.js";
+import { c as Ge, b as xt } from "./use-cached-selected-values.C32tjNKy.js";
+import { L as yt } from "./listbox-option-tag.uHSB7MO6.js";
+import { B as el } from "./payment-method.CDnn1bjo.js";
+import { u as tl } from "./use-country-items.Dzbl2UsO.js";
+import { B as ll } from "./avatar.P2Fkz2I6.js";
+import { D as al, B as ol, i as He, b as nl } from "./date-range-picker.cmg75lC-.js";
+import { g as ht } from "./get-date-locale.CAyOIbcp.js";
+import { D as Ze } from "./date-format.B8RU7D42.js";
+import { b as sl, f as ge, i as il } from "./calendar.Cqjyxc69.js";
+import { B as rl } from "./date-picker.DSkvT_CA.js";
+import { R as Qe } from "./refresh.BB4ouvz_.js";
+import "../assets/filter-bar.css";
+const ul = { class: "b-filter-bar-button__container" }, dl = { class: "b-filter-bar-button__label-container" }, cl = {}, pl = /* @__PURE__ */ Q({
+  ...cl,
+  __name: "filter-bar-button",
+  props: {
+    /**
+     * The number of applied values within the filter.
+     * Text can also be applied here such as 'All'.
+     * e.g. if 2 items in a dropdown filter have been applied, the number 2 will be shown here.
+     */
+    appliedFiltersCount: { type: [String, Number], default: null },
+    /**
+     * Disables button functionality.
+     */
+    disabled: { type: Boolean, default: !1 },
+    /**
+     * Signifies if the filter is open or closed.
+     */
+    isFilterOpen: { type: Boolean, default: !1 },
+    /**
+     * Signifies if the filter is a persistent filter
+     */
+    isPersistentFilter: { type: Boolean, default: !1 },
+    /**
+     * Renders the button without the applied state styles
+     */
+    noAppliedStateStyles: { type: Boolean, default: !1 },
+    /**
+     * A secondary label to be added next to the primary for additional filtering information.
+     * i.e. Can be used to show the set value for said filter.
+     */
+    secondaryLabel: { type: String, default: null }
+  },
+  emits: ["click"],
+  setup(e, { emit: n }) {
+    const l = e, s = n, t = Ne(), o = Ot(), d = bt(t), a = p(() => t.default ? vt(t)("default") : null), i = p(() => !d("default") && d("iconLeft")), v = ft({ ariaLabel: a }), b = K(null), A = p(() => {
+      var P;
+      return {
+        "aria-controls": (P = o["aria-controls"]) == null ? void 0 : P.toString()
+      };
+    }), $ = p(
+      () => (l.appliedFiltersCount || l.secondaryLabel || l.isPersistentFilter) && !l.noAppliedStateStyles
+    ), c = p(() => ({
+      "b-filter-bar-button--applied": $.value,
+      "b-filter-bar-button--filter-open": l.isFilterOpen && !$.value,
+      "b-filter-bar-button--filter-open-applied": l.isFilterOpen && $.value,
+      "b-filter-bar-button--with-secondary-label": l.secondaryLabel,
+      "b-filter-bar-button--with-counter": l.appliedFiltersCount,
+      "b-filter-bar-button--icon-only": i.value
+    })), g = (P) => {
+      P.preventDefault(), l.disabled || s("click", P);
+    };
+    return (P, _) => (F(), w(T(pt), {
+      ref_key: "filterBarButtonRef",
+      ref: b,
+      class: de(["b-filter-bar-button", c.value]),
+      disabled: e.disabled,
+      "aria-label": T(v),
+      "aria-controls": A.value["aria-controls"],
+      type: "button",
+      onClick: g
+    }, {
+      iconRight: C(() => [
+        e.appliedFiltersCount && !i.value ? (F(), w(T(ve), {
+          key: 0,
+          class: "b-filter-bar-button__counter",
+          el: "span",
+          variant: "body",
+          stronger: ""
+        }, {
+          default: C(() => [
+            X(x(e.appliedFiltersCount), 1)
+          ]),
+          _: 1
+        })) : Z("", !0)
+      ]),
+      default: C(() => [
+        W("div", ul, [
+          T(d)("iconLeft") ? ce(P.$slots, "iconLeft", { key: 0 }, void 0, !0) : Z("", !0),
+          W("div", dl, [
+            R(T(ve), {
+              el: "span",
+              variant: "body",
+              stronger: "",
+              class: "b-filter-bar-button__label"
+            }, {
+              default: C(() => [
+                W("span", null, [
+                  ce(P.$slots, "default", {}, void 0, !0)
+                ]),
+                e.secondaryLabel && !i.value ? (F(), w(T(ve), {
+                  key: 0,
+                  el: "span",
+                  variant: "body",
+                  stronger: "",
+                  class: "b-filter-bar-button__label"
+                }, {
+                  default: C(() => _[0] || (_[0] = [
+                    X(":")
+                  ])),
+                  _: 1
+                })) : Z("", !0)
+              ]),
+              _: 3
+            }),
+            e.secondaryLabel && !i.value ? (F(), w(T(ve), {
+              key: 0,
+              el: "span",
+              variant: "body",
+              stronger: "",
+              class: "b-filter-bar-button__secondary-label"
+            }, {
+              default: C(() => [
+                X(x(e.secondaryLabel), 1)
+              ]),
+              _: 1
+            })) : Z("", !0)
+          ])
+        ])
+      ]),
+      _: 3
+    }, 8, ["class", "disabled", "aria-label", "aria-controls"]));
+  }
+}), Ee = /* @__PURE__ */ le(pl, [["__scopeId", "data-v-3556e231"]]);
+var D = /* @__PURE__ */ ((e) => (e.INPUT = "input", e.UPDATE = "update", e))(D || {}), Se = /* @__PURE__ */ ((e) => (e.INPUT = "input", e.UPDATE_FILTER_VALUES_OBJECT = "update:filter-values-object", e.UPDATE_FILTER_VALUES_ARRAY = "update:filter-values", e))(Se || {}), se = /* @__PURE__ */ ((e) => (e.BOOLEAN = "BentoBooleanFilter", e.RANGE = "BentoRangeFilter", e.INPUT = "BentoInputFilter", e.INPUT_DROPDOWN = "BentoInputWithDropdownFilter", e.SELECT = "BentoSelectFilter", e.SELECT_AVATAR = "BentoSelectAvatarFilter", e.SELECT_COUNTRY = "BentoSelectCountryFilter", e.SELECT_CURRENCY = "BentoSelectCurrencyFilter", e.SELECT_PAYMENT_METHOD = "BentoSelectPaymentMethodFilter", e.SELECT_TAG = "BentoSelectTagFilter", e.DATE = "BentoDateFilter", e.DATE_RANGE = "BentoDateRangeFilter", e))(se || {});
+const Xe = 430, xe = 700;
+function bl(e, n) {
+  const l = K("div"), s = K(!1), t = K(0), o = p(() => !(t.value < Xe && n.value.small === "multi-line"));
+  function d() {
+    s.value = !1, l.value = "div";
+  }
+  function a() {
+    s.value = !0, l.value = dt;
+  }
+  function i() {
+    t.value > xe || t.value < xe && t.value >= Xe && n.value.medium === "multi-line" ? d() : a();
+  }
+  return ie(() => n.value, i), Nt(e, (v) => {
+    t.value = v[0].contentRect.width, i();
+  }), {
+    screenLayoutComponent: l,
+    showSearchbarInsideContainer: o,
+    isOneLineLayout: s
+  };
+}
+const fl = {}, vl = /* @__PURE__ */ Q({
+  ...fl,
+  __name: "filter-bar-button-group",
+  props: {
+    isActive: { type: Boolean, default: !1 },
+    skipGrouping: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    const n = e, l = p(() => ({
+      "b-filter-bar-button-group--active": n.isActive,
+      "b-filter-bar-button-group--grouped": !n.skipGrouping
+    }));
+    return (s, t) => (F(), G("div", {
+      class: de(["b-filter-bar-button-group", l.value])
+    }, [
+      ce(s.$slots, "default", {}, void 0, !0)
+    ], 2));
+  }
+}), ml = /* @__PURE__ */ le(vl, [["__scopeId", "data-v-9ce16194"]]);
+var ne = /* @__PURE__ */ ((e) => (e.APPLY = "apply", e.CLEAR = "clear", e.OPEN = "open", e.CLOSE = "close", e.RESET = "reset", e.CANCEL = "cancel", e))(ne || {});
+const Ft = {
+  "en-US": {
+    apply: "Apply",
+    clear: "Clear",
+    clearFilter: "Clear filter {function}",
+    filtersHaveBeenCleared: "Filters have been cleared",
+    numberSelected: "{numberOfItemsSelected} selected",
+    reset: "Reset",
+    resetFilter: "Reset filter {function}"
+  },
+  "ja-JP": {
+    apply: "適用",
+    clear: "クリア",
+    reset: "リセット"
+  },
+  "pt-BR": {
+    apply: "Aplicar",
+    clear: "Limpar",
+    reset: "Reiniciar"
+  }
+}, yl = { key: 0 }, hl = {
+  key: 1,
+  class: "b-base-filter"
+}, Fl = {
+  i18n: { messages: Ft },
+  name: "bento-base-filter"
+}, gl = /* @__PURE__ */ Q({
+  ...Fl,
+  props: {
+    appliedFiltersCount: { default: null },
+    buttonLabel: { default: void 0 },
+    buttonSecondaryLabel: { default: void 0 },
+    disabled: { type: Boolean, default: !1 },
+    defaultValue: { default: null },
+    onlySlot: { type: Boolean, default: !1 },
+    controlled: { type: Boolean, default: !1 },
+    disableApplyButton: { type: Boolean, default: !1 },
+    disableSecondaryButton: { type: Boolean, default: !1 },
+    field: {},
+    label: {},
+    fitContent: { type: Boolean, default: void 0 },
+    tooltipText: { default: void 0 },
+    tooltipPosition: { default: void 0 },
+    value: { default: void 0 }
+  },
+  emits: [
+    ne.APPLY,
+    ne.CLEAR,
+    ne.OPEN,
+    ne.CLOSE,
+    ne.RESET,
+    ne.CANCEL
+  ],
+  setup(e, { expose: n, emit: l }) {
+    const s = l, t = e, { t: o } = pe({ messages: Ft }), d = qe("base-filter-popover"), a = K(!1), i = K(null), v = K(null), b = p(() => t.defaultValue !== null), A = p(() => b.value ? JSON.stringify(t.value) !== JSON.stringify(t.defaultValue) : t.appliedFiltersCount || t.buttonSecondaryLabel), $ = p(() => {
+      let I = t.buttonSecondaryLabel ? `: ${t.buttonSecondaryLabel}` : "";
+      return t.appliedFiltersCount && (I = `: ${o("numberSelected", { numberOfItemsSelected: t.appliedFiltersCount })}`), (b.value ? t.label : g.value) + I;
+    }), c = p(
+      () => b.value ? o("resetFilter", {
+        function: g.value
+      }) : o("clearFilter", {
+        function: g.value
+      })
+    ), g = p(() => t.buttonLabel || t.label), P = async () => {
+      var I, B;
+      await it(), (B = (I = i.value) == null ? void 0 : I.$el) == null || B.focus();
+    }, _ = () => {
+      a.value && (a.value = !1, P(), s(ne.CLOSE));
+    }, U = () => {
+      b.value ? s(ne.RESET) : s(ne.CLEAR), P();
+    }, H = () => {
+      _(), U();
+    }, E = () => {
+      a.value ? _() : (a.value = !0, s(ne.OPEN));
+    }, j = () => {
+      _(), s(ne.APPLY);
+    }, h = () => {
+      _(), s(ne.CANCEL);
+    }, V = () => h(), M = p(() => [
+      {
+        title: o("apply"),
+        event: j,
+        disabled: t.disableApplyButton
+      },
+      {
+        title: b.value ? o("reset") : o("clear"),
+        event: H,
+        disabled: t.disableSecondaryButton
+      }
+    ]);
+    return ie(
+      () => a.value,
+      (I, B) => {
+        var J, z;
+        !I && B && (z = (J = i.value) == null ? void 0 : J.filterBarButtonRef) != null && z.bentoBaseButtonRef && i.value.filterBarButtonRef.bentoBaseButtonRef.focus();
+      }
+    ), jt(v, V, { ignore: [i] }), n({
+      closePopover: _
+    }), (I, B) => I.onlySlot ? (F(), G("div", yl, [
+      ce(I.$slots, "default", {}, void 0, !0)
+    ])) : (F(), G("div", hl, [
+      Rt((F(), w(ml, {
+        "is-active": a.value,
+        "skip-grouping": !A.value
+      }, {
+        default: C(() => [
+          R(T(Ee), {
+            ref_key: "filterButtonRef",
+            ref: i,
+            "aria-label": $.value,
+            "aria-controls": a.value ? T(d) : null,
+            "applied-filters-count": I.appliedFiltersCount,
+            disabled: I.disabled,
+            "is-persistent-filter": b.value,
+            "is-filter-open": a.value,
+            "secondary-label": I.buttonSecondaryLabel,
+            onClick: E,
+            onKeydown: me(_, ["esc"])
+          }, {
+            default: C(() => [
+              X(x(g.value), 1)
+            ]),
+            _: 1
+          }, 8, ["aria-label", "aria-controls", "applied-filters-count", "disabled", "is-persistent-filter", "is-filter-open", "secondary-label"]),
+          A.value ? (F(), w(T(Ee), {
+            key: 0,
+            "applied-filters-count": I.appliedFiltersCount,
+            disabled: I.disabled,
+            "is-persistent-filter": b.value,
+            "is-filter-open": a.value,
+            "secondary-label": I.buttonSecondaryLabel,
+            onClick: U
+          }, {
+            iconLeft: C(() => [
+              R(T(Wt), { "svg-title": c.value }, null, 8, ["svg-title"])
+            ]),
+            _: 1
+          }, 8, ["applied-filters-count", "disabled", "is-persistent-filter", "is-filter-open", "secondary-label"])) : Z("", !0)
+        ]),
+        _: 1
+      }, 8, ["is-active", "skip-grouping"])), [
+        [T(zt), I.tooltipText, I.tooltipPosition]
+      ]),
+      i.value ? (F(), w(ct, { key: 0 }, {
+        default: C(() => [
+          i.value ? (F(), w(qt, {
+            key: 0,
+            id: T(d),
+            ref_key: "popoverRef",
+            ref: v,
+            class: "b-base-filter__popover",
+            divider: "",
+            open: a.value,
+            actions: I.controlled ? null : M.value,
+            "actions-layout": "space-between",
+            "target-element": i.value,
+            title: I.controlled ? null : I.label,
+            "fit-content": I.fitContent,
+            position: "bottom-start",
+            "without-space": I.controlled,
+            "fallback-position": ["bottom-end"]
+          }, {
+            default: C(() => [
+              W("div", {
+                onKeydown: me(h, ["esc"])
+              }, [
+                ce(I.$slots, "default", {}, void 0, !0)
+              ], 32)
+            ]),
+            _: 3
+          }, 8, ["id", "open", "actions", "target-element", "title", "fit-content", "without-space"])) : Z("", !0)
+        ]),
+        _: 3
+      })) : Z("", !0)
+    ]));
+  }
+}), Be = /* @__PURE__ */ le(gl, [["__scopeId", "data-v-7f7255ee"]]), Sl = (e) => e instanceof Array, et = (e) => Sl(e) ? e.length === 0 || e.every((n) => n === "") : !e, tt = (e, n) => JSON.stringify(e) === JSON.stringify(n), he = (e, n) => {
+  const l = K(e.value);
+  ie(
+    () => e.value,
+    () => {
+      l.value = e.value;
+    }
+  );
+  const s = p(() => et(e.value)), t = p(
+    () => n.value !== null ? tt(n.value, e.value) : s.value
+  ), o = p(() => tt(l.value, e.value) || et(l.value) && s.value);
+  return {
+    internalFilterValue: l,
+    isSecondaryButtonDisabled: t,
+    isApplyButtonDisabled: o
+  };
+}, Cl = {
+  name: "bento-input-filter"
+}, Bl = /* @__PURE__ */ Q({
+  ...Cl,
+  props: {
+    defaultValue: { default: null },
+    disabled: { type: Boolean, default: !1 },
+    field: {},
+    label: {},
+    onlySlot: { type: Boolean, default: !1 },
+    options: { default: void 0 },
+    value: { default: null }
+  },
+  emits: ["input", "update"],
+  setup(e, { emit: n }) {
+    var M, I;
+    const l = e, s = n, t = K(null), o = K((I = (M = l == null ? void 0 : l.options) == null ? void 0 : M.dropdown) == null ? void 0 : I.value), d = p(
+      () => {
+        var B, J;
+        return ((B = l == null ? void 0 : l.options) == null ? void 0 : B.variant) === "dropdown" && ((J = l == null ? void 0 : l.options) == null ? void 0 : J.dropdown) !== void 0;
+      }
+    ), a = p(
+      () => {
+        var B;
+        return d.value ? { ...(B = l == null ? void 0 : l.options) == null ? void 0 : B.dropdown, value: o.value } : void 0;
+      }
+    ), i = p(() => {
+      var B;
+      return ((B = l == null ? void 0 : l.options) == null ? void 0 : B.variant) === "dropdown" ? "dropdown" : "default";
+    }), v = p(
+      () => {
+        var B;
+        return d.value ? (B = l.value) == null ? void 0 : B.inputValue : l == null ? void 0 : l.value;
+      }
+    ), { internalFilterValue: b, isSecondaryButtonDisabled: A, isApplyButtonDisabled: $ } = he(
+      v,
+      te(l, "defaultValue")
+    ), c = p(() => l.label), g = p(() => Ce(v.value, 12)), P = p(() => ({
+      "b-input-filter--only-slot": l.onlySlot
+    }));
+    Ve(() => {
+      b.value === "" && (b.value = null);
+    }), ie(t, () => {
+      var B;
+      (B = t.value) == null || B.focusInput();
+    });
+    const _ = () => {
+      b.value = v.value;
+    }, U = () => {
+      !b.value && l.defaultValue !== null && (b.value = l.defaultValue), s("update", {
+        ...l,
+        value: d.value ? {
+          inputValue: b.value,
+          dropdownValue: o.value
+        } : b.value
+      });
+    }, H = () => s("update", { ...l, value: l.defaultValue }), E = () => {
+      b.value = null, U();
+    }, j = () => {
+      s("input", { ...l, value: b.value });
+    }, h = (B) => {
+      b.value = B;
+    }, V = (B) => {
+      o.value = B;
+    };
+    return rt(Kt, d.value), ie(
+      () => l.options,
+      () => {
+        var B, J, z;
+        ((B = l.options) != null && B.dropdown || (J = l.options) != null && J.dropdownPosition || (z = l.options) != null && z.variant) && Ke(
+          'BentoInputFilter "options" property',
+          `BentoInputFilter "options" no longer supports "dropdown", "dropdownPosition" or "variant" attributes.
+                            Use the "BentoFilterItemType.INPUT_DROPDOWN" instead of "BentoFilterItemType.INPUT"
+                            <bento-filter-bar
+                               :config="[{
+                                    field: 'name',
+                                    label: 'Name',
+                                    type: BentoFilterItemType.INPUT_DROPDOWN,
+                                    options: [...],
+                                }]"
+                            />`,
+          "2.0.0"
+        );
+      },
+      { immediate: !0 }
+    ), (B, J) => {
+      var z, ee;
+      return F(), w(T(Be), re(B.$props, {
+        "button-label": c.value,
+        "button-secondary-label": g.value,
+        "disable-apply-button": T($),
+        "disable-secondary-button": T(A),
+        "only-slot": B.onlySlot,
+        "popover-overflow-visible": d.value,
+        "tooltip-position": (z = B.options) == null ? void 0 : z.tooltipPosition,
+        "tooltip-text": (ee = B.options) == null ? void 0 : ee.tooltipText,
+        onApply: U,
+        onClear: E,
+        onOpen: _,
+        onReset: H
+      }), {
+        default: C(() => {
+          var S, f;
+          return [
+            W("div", {
+              class: de(["b-input-filter", P.value]),
+              onKeydown: me(U, ["enter"]),
+              onInput: j
+            }, [
+              R(T(Je), {
+                ref_key: "inputTextRef",
+                ref: t,
+                dropdown: a.value,
+                "dropdown-position": (S = B.options) == null ? void 0 : S.dropdownPosition,
+                placeholder: (f = B.options) == null ? void 0 : f.placeholder,
+                variant: i.value,
+                value: T(b),
+                disabled: B.disabled,
+                onInput: h,
+                onDropdownInput: V
+              }, null, 8, ["dropdown", "dropdown-position", "placeholder", "variant", "value", "disabled"])
+            ], 34)
+          ];
+        }),
+        _: 1
+      }, 16, ["button-label", "button-secondary-label", "disable-apply-button", "disable-secondary-button", "only-slot", "popover-overflow-visible", "tooltip-position", "tooltip-text"]);
+    };
+  }
+}), gt = /* @__PURE__ */ le(Bl, [["__scopeId", "data-v-cfef2e49"]]), Dl = {
+  name: "bento-input-with-dropdown-filter"
+}, Al = /* @__PURE__ */ Q({
+  ...Dl,
+  props: {
+    disabled: { type: Boolean },
+    defaultValue: { default: void 0 },
+    field: {},
+    label: {},
+    onlySlot: { type: Boolean, default: !1 },
+    options: { default: void 0 },
+    value: { default: void 0 }
+  },
+  emits: [D.INPUT, D.UPDATE],
+  setup(e, { emit: n }) {
+    const l = e, s = n, t = K(null), { internalFilterValue: o, isSecondaryButtonDisabled: d, isApplyButtonDisabled: a } = he(te(l, "value"), te(l, "defaultValue")), i = p(() => l.label), v = p(() => {
+      var h;
+      return Ce((h = l.value) == null ? void 0 : h.inputValue, 12);
+    }), b = p(
+      () => {
+        var h, V, M;
+        return ((h = o.value) == null ? void 0 : h.dropdownValue) ?? ((M = (V = l.options) == null ? void 0 : V.dropdown) == null ? void 0 : M.value);
+      }
+    ), A = p(() => {
+      var h;
+      return {
+        ...((h = l.options) == null ? void 0 : h.dropdown) || {},
+        value: b.value
+      };
+    }), $ = p(() => ({
+      "b-input-with-dropdown-filter--only-slot": l.onlySlot
+    })), c = p(() => {
+      var V;
+      return !(!!((V = o.value) != null && V.inputValue) && !!b.value) || a.value;
+    });
+    Ve(() => {
+      var h;
+      ((h = o.value) == null ? void 0 : h.inputValue) === "" && (o.value = { ...o.value, inputValue: void 0 });
+    }), ie(t, () => {
+      var h;
+      (h = t.value) == null || h.focusInput();
+    });
+    const g = () => {
+      o.value = l.value;
+    }, P = () => {
+      var h;
+      !((h = o.value) != null && h.inputValue) && l.defaultValue !== null && (o.value = { ...l.defaultValue }), s(D.UPDATE, {
+        ...l,
+        value: o.value
+      });
+    }, _ = () => s(D.UPDATE, { ...l, value: l.defaultValue }), U = () => {
+      o.value = null, P();
+    }, H = () => {
+      s(D.INPUT, { ...l, value: o.value });
+    }, E = (h) => {
+      o.value = { dropdownValue: b.value, inputValue: h };
+    }, j = (h) => {
+      o.value = { ...o.value, dropdownValue: h };
+    };
+    return rt(Jt, !0), (h, V) => {
+      var M, I;
+      return F(), w(T(Be), re(h.$props, {
+        "button-label": i.value,
+        "button-secondary-label": v.value,
+        "disable-apply-button": c.value,
+        "disable-secondary-button": T(d),
+        "only-slot": h.onlySlot,
+        "tooltip-position": (M = h.options) == null ? void 0 : M.tooltipPosition,
+        "tooltip-text": (I = h.options) == null ? void 0 : I.tooltipText,
+        onApply: P,
+        onClear: U,
+        onOpen: g,
+        onReset: _
+      }), {
+        default: C(() => {
+          var B, J;
+          return [
+            W("div", {
+              class: de(["b-input-with-dropdown-filter", $.value]),
+              onKeydown: me(P, ["enter"]),
+              onInput: H
+            }, [
+              R(T(Je), {
+                ref_key: "inputTextRef",
+                ref: t,
+                dropdown: A.value,
+                "dropdown-position": (B = h.options) == null ? void 0 : B.dropdownPosition,
+                variant: "dropdown",
+                value: (J = T(o)) == null ? void 0 : J.inputValue,
+                disabled: h.disabled,
+                onInput: E,
+                onDropdownInput: j
+              }, null, 8, ["dropdown", "dropdown-position", "value", "disabled"])
+            ], 34)
+          ];
+        }),
+        _: 1
+      }, 16, ["button-label", "button-secondary-label", "disable-apply-button", "disable-secondary-button", "only-slot", "tooltip-position", "tooltip-text"]);
+    };
+  }
+}), St = /* @__PURE__ */ le(Al, [["__scopeId", "data-v-f10e25d2"]]), Tl = Q({
+  name: "bento-date-filter",
+  components: {
+    BentoBaseFilter: Be,
+    BentoDatePicker: rl,
+    BentoDivider: Ye,
+    Calendar: sl
+  },
+  props: {
+    /**
+     * Disables the filter from being interacted with.
+     */
+    disabled: { type: Boolean, default: !1 },
+    isDateInput: { type: Boolean, default: !0 },
+    /**
+     * Default value of the filter to reset to.
+     */
+    defaultValue: { type: Date, default: null },
+    /**
+     * Filter name/key referencing the actual property name in the data set.
+     * Should be unique per filter bar.
+     */
+    field: { type: String, required: !0 },
+    /**
+     * Label text to be displayed
+     */
+    label: { type: String, required: !0 },
+    /**
+     * Renders the base filter's slot content only - leaving out the button and the popover.
+     * Used for the allFiltersModal component.
+     */
+    onlySlot: { type: Boolean, default: !1 },
+    /**
+     * List of options that are needed to setup the filter
+     * Available options:
+     *   - firstDayOfWeek: Allows you to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday
+     *   - isDateDisabled: Indicate if a date should be disabled or not
+     *   - tooltipPosition: The position of the tooltip attached to the filter button
+     *   - tooltipText: The content of the tooltip attached to the filter button
+     */
+    options: {
+      type: Object,
+      default: void 0
+    },
+    /**
+     * Current value of the filter
+     */
+    value: { type: Date, default: void 0 }
+  },
+  emits: [D.INPUT, D.UPDATE],
+  setup(e, { emit: n }) {
+    const { locale: l } = pe(void 0), s = ht(), { internalFilterValue: t, isSecondaryButtonDisabled: o, isApplyButtonDisabled: d } = he(
+      te(e, "value"),
+      te(e, "defaultValue")
+    ), a = p(
+      () => {
+        var _;
+        return e.value ? ge(e.value, "dd MMM, yyyy", {
+          locale: s[(_ = l.value) == null ? void 0 : _.substring(0, 2)] || s.enUS
+        }) : null;
+      }
+    ), i = p(() => e.label), v = p(() => a.value), b = () => {
+      n(D.UPDATE, { ...e, value: t.value });
+    }, A = () => {
+      t.value = null, b();
+    }, $ = () => {
+      t.value = e.defaultValue, b();
+    }, c = () => {
+      t.value = e.value;
+    }, g = (_) => {
+      t.value = _, n(D.INPUT, { ...e, value: t.value });
+    };
+    return {
+      // Values
+      internalFilterValue: t,
+      isApplyButtonDisabled: d,
+      isSecondaryButtonDisabled: o,
+      buttonLabel: i,
+      buttonSecondaryLabel: v,
+      // Events
+      clearFilter: A,
+      onDateSelected: g,
+      openFilter: c,
+      updateFilter: b,
+      resetFilter: $,
+      onDateInputSelected: (_) => {
+        t.value = _, g(_), b();
+      }
+    };
+  }
+}), Il = { class: "b-date-filter" };
+function _l(e, n, l, s, t, o) {
+  var b, A;
+  const d = N("bento-date-picker"), a = N("bento-divider"), i = N("calendar"), v = N("bento-base-filter");
+  return F(), w(v, {
+    "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,
+    "tooltip-position": (b = e.options) == null ? void 0 : b.tooltipPosition,
+    "tooltip-text": (A = e.options) == null ? void 0 : A.tooltipText,
+    "fit-content": "",
+    onApply: e.updateFilter,
+    onClear: e.clearFilter,
+    onOpen: e.openFilter,
+    onReset: e.resetFilter
+  }, {
+    default: C(() => {
+      var $, c, g, P, _, U;
+      return [
+        e.onlySlot ? (F(), w(d, {
+          key: 0,
+          value: e.internalFilterValue,
+          "first-day-of-week": ($ = e.options) == null ? void 0 : $.firstDayOfWeek,
+          "is-date-disabled": (c = e.options) == null ? void 0 : c.isDateDisabled,
+          variant: (g = e.options) == null ? void 0 : g.variant,
+          disabled: e.disabled,
+          onInput: e.onDateInputSelected
+        }, null, 8, ["value", "first-day-of-week", "is-date-disabled", "variant", "disabled", "onInput"])) : (F(), G($e, { key: 1 }, [
+          R(a, { class: "b-date-filter__divider" }),
+          W("div", Il, [
+            R(i, {
+              "first-day-of-week": (P = e.options) == null ? void 0 : P.firstDayOfWeek,
+              "is-date-disabled": (_ = e.options) == null ? void 0 : _.isDateDisabled,
+              "number-of-months": 1,
+              value: e.internalFilterValue,
+              variant: (U = e.options) == null ? void 0 : U.variant,
+              onInput: e.onDateSelected
+            }, null, 8, ["first-day-of-week", "is-date-disabled", "value", "variant", "onInput"])
+          ])
+        ], 64))
+      ];
+    }),
+    _: 1
+  }, 8, ["button-label", "button-secondary-label", "disabled", "default-value", "disable-apply-button", "disable-secondary-button", "field", "label", "only-slot", "tooltip-position", "tooltip-text", "onApply", "onClear", "onOpen", "onReset"]);
+}
+const Ct = /* @__PURE__ */ le(Tl, [["render", _l], ["__scopeId", "data-v-66a62c70"]]), lt = {
+  "en-US": {
+    apply: "Apply",
+    clear: "Clear",
+    reset: "Reset"
+  },
+  "ja-JP": {
+    apply: "適用",
+    clear: "クリア",
+    reset: "リセット"
+  },
+  "pt-BR": {
+    apply: "Aplicar",
+    clear: "Limpar",
+    reset: "Reiniciar"
+  }
+}, $l = Q({
+  i18n: { messages: lt },
+  name: "bento-date-range-filter",
+  components: {
+    BentoBaseFilter: Be,
+    BentoButtonActions: Yt,
+    BentoDateRangePicker: ol,
+    BentoTypography: ve,
+    BentoDivider: Ye,
+    DateRangePickerCalendar: al
+  },
+  props: {
+    /**
+     * Disables the filter from being interacted with.
+     */
+    disabled: { type: Boolean, default: !1 },
+    /**
+     * Default value of the filter to reset to.
+     */
+    defaultValue: { type: Object, default: null },
+    /**
+     * Filter name/key referencing the actual property name in the data set.
+     * Should be unique per filter bar.
+     */
+    field: { type: String, required: !0 },
+    /**
+     * Label text to be displayed
+     */
+    label: { type: String, required: !0 },
+    /**
+     * Renders the base filter's slot content only - leaving out the button and the popover.
+     * Used for the allFiltersModal component.
+     */
+    onlySlot: { type: Boolean, default: !1 },
+    /**
+     * List of options that are needed to setup the filter
+     * Available options:
+     *   - allowTimeInput: Allows user to enter time values in the form
+     *   - firstDayOfWeek: Allows user to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday
+     *   - isDateDisabled: Indicate if a date should be disabled or not
+     *   - maxRange: Set a maximum number of dates to be selectable by the range
+     *   - numberOfMonths: Number of months rendered on pane
+     *   - quickSelectRanges: An array that sets the custom range dropdown items. @see BentoDateRangePicker
+     *   - showEndDateOnOpen: Upon opening date range picker, end date's month will be pre-selected.
+     *   - granularities: A list of available granularities.
+     *   - variant: The type of calendar to display. Defaults to showing days.
+     *   - tooltipPosition: The position of the tooltip attached to the filter button
+     *   - tooltipText: The content of the tooltip attached to the filter button
+     */
+    options: {
+      type: Object,
+      default: void 0
+    },
+    /**
+     * Current value of the filter
+     */
+    value: {
+      type: Object,
+      default: () => ({ startDate: void 0, endDate: void 0 })
+    }
+  },
+  emits: [D.INPUT, D.UPDATE],
+  setup(e, { emit: n }) {
+    var f, r, O, Y;
+    const { locale: l, t: s } = pe({ messages: lt }), t = ht(), { internalFilterValue: o, isSecondaryButtonDisabled: d, isApplyButtonDisabled: a } = he(
+      te(e, "value"),
+      te(e, "defaultValue")
+    ), i = K(!1), v = p(() => {
+      var u;
+      return ((u = e == null ? void 0 : e.options) == null ? void 0 : u.quickSelectRanges) && e.options.quickSelectRanges.map((L) => {
+        const y = L.data.endDate ? void 0 : new Date(Date.now()).getTime() - L.data.startDate.getTime();
+        return {
+          ...L,
+          data: {
+            ...L.data,
+            // Adding timeDifference to calculate an up-to-date endDate on range selection
+            timeDifference: y
+          }
+        };
+      });
+    }), b = (u) => {
+      var L;
+      return u ? ge(u, Ze.NUMERIC_DATE_YEAR_FIRST, {
+        locale: t[(L = l.value) == null ? void 0 : L.substring(0, 2)] || t.enUS
+      }) : void 0;
+    }, A = (u) => {
+      var L;
+      return u ? ge(u, Ze.HOUR_MINUTE_SECONDS, {
+        locale: t[(L = l.value) == null ? void 0 : L.substring(0, 2)] || t.enUS
+      }) : "";
+    }, $ = K(null), c = K(!1), g = wt({
+      startDate: b((f = e.value) == null ? void 0 : f.startDate),
+      endDate: b((r = e.value) == null ? void 0 : r.endDate),
+      startTime: A((O = e.value) == null ? void 0 : O.startDate),
+      endTime: A((Y = e.value) == null ? void 0 : Y.endDate)
+    });
+    ie(
+      () => e.value,
+      () => {
+        var u, L, y, m;
+        g.startDate = b((u = e.value) == null ? void 0 : u.startDate), g.endDate = b((L = e.value) == null ? void 0 : L.endDate), g.startTime = A((y = e.value) == null ? void 0 : y.startDate), g.endTime = A((m = e.value) == null ? void 0 : m.endDate);
+      }
+    );
+    function P(u) {
+      return (u == null ? void 0 : u.length) !== void 0;
+    }
+    const _ = (u) => {
+      var L, y, m, k, q, ae, ue, be, fe, Fe;
+      if (!u || !(u != null && u.startDate) && !u.endDate)
+        return null;
+      if (P((L = e.options) == null ? void 0 : L.quickSelectRanges) && ((m = (y = e.options) == null ? void 0 : y.quickSelectRanges) == null ? void 0 : m.length) > 0) {
+        const Ie = (q = (k = e.options) == null ? void 0 : k.quickSelectRanges) == null ? void 0 : q.find(({ value: Le, data: oe }) => u ? u.range ? Le === u.range : !u.startDate || !u.endDate ? !1 : oe != null && oe.endDate ? He(oe == null ? void 0 : oe.startDate, u.startDate) && He(oe == null ? void 0 : oe.endDate, u.endDate) : He(oe == null ? void 0 : oe.startDate, u.startDate) && nl(u.endDate) : !1);
+        if (Ie)
+          return Ie.label;
+      }
+      return !u.startDate || !u.endDate ? null : il(u.startDate, u.endDate) && ((ae = e == null ? void 0 : e.options) != null && ae.allowTimeInput) ? `${ge(u.startDate, "dd MMM, yyyy HH:mm:ss", {
+        locale: t[(ue = l.value) == null ? void 0 : ue.substring(0, 2)] || t.enUS
+      })} - ${ge(u.endDate, "HH:mm:ss", {
+        locale: t[(be = l.value) == null ? void 0 : be.substring(0, 2)] || t.enUS
+      })}` : `${ge(u.startDate, "dd MMM, yyyy", {
+        locale: t[(fe = l.value) == null ? void 0 : fe.substring(0, 2)] || t.enUS
+      })} - ${ge(u.endDate, "dd MMM, yyyy", {
+        locale: t[(Fe = l.value) == null ? void 0 : Fe.substring(0, 2)] || t.enUS
+      })}`;
+    }, U = K(_(e.value)), H = p(() => e.label), E = () => {
+      $.value.closePopover();
+      const { onlySlot: u, ...L } = e;
+      n(D.UPDATE, { ...L, value: o.value });
+    }, j = () => {
+      o.value = void 0, E();
+    }, h = () => {
+      o.value = e.defaultValue, E();
+    }, V = () => {
+      o.value = e.value;
+    }, M = () => {
+      var u, L, y, m;
+      o.value = e.value, i.value = !1, g.startDate = b((u = e.value) == null ? void 0 : u.startDate), g.endDate = b((L = e.value) == null ? void 0 : L.endDate), g.startTime = A((y = e.value) == null ? void 0 : y.startDate), g.endTime = A((m = e.value) == null ? void 0 : m.endDate);
+    }, I = (u) => {
+      i.value = !1, o.value = u, g.startDate = b(u.startDate), g.endDate = b(u.endDate), n(D.INPUT, { ...e, value: o.value });
+    }, B = (u) => {
+      u != null && u.startDate && (u != null && u.endDate) && (o.value = u, g.startDate = b(u.startDate), g.endDate = b(u.endDate), n(D.INPUT, { ...e, value: o.value }));
+    }, J = (u) => {
+      I(u), n(D.INPUT, { ...e, value: o.value });
+    }, z = p(
+      () => [
+        {
+          title: s("apply"),
+          event: E,
+          disabled: i.value || c.value || a.value
+        },
+        {
+          title: e.defaultValue ? s("reset") : s("clear"),
+          event: e.defaultValue ? h : j,
+          disabled: c.value && d.value
+        }
+      ]
+    ), ee = () => {
+      c.value = !0, o.value = { startDate: void 0, endDate: void 0 }, n(D.INPUT, { ...e, value: o.value });
+    }, S = (u) => {
+      c.value = !1, u.startTime && (g.startTime = u.startTime), u.endTime && (g.endTime = u.endTime);
+    };
+    return ie(
+      () => e.value,
+      (u) => {
+        U.value = _(u);
+      },
+      { deep: !0 }
+    ), {
+      // Refs
+      baseFilter: $,
+      // Values
+      actions: z,
+      formData: g,
+      internalFilterValue: o,
+      isApplyButtonDisabled: a,
+      isSecondaryButtonDisabled: d,
+      isSelectingDate: i,
+      buttonLabel: H,
+      buttonSecondaryLabel: U,
+      adjustedQuickSelectRanges: v,
+      // Events
+      onCancel: M,
+      onDateSelected: I,
+      openFilter: V,
+      clearFilter: j,
+      resetFilter: h,
+      updateFilter: E,
+      onDatePickerRangeError: ee,
+      onDatePickerRangeFormDateInputUpdate: S,
+      onDateInputSelected: J,
+      onRangeSelectorInput: B
+    };
+  }
+}), Pl = {
+  key: 1,
+  class: "b-date-range-filter"
+};
+function El(e, n, l, s, t, o) {
+  var $, c;
+  const d = N("bento-date-range-picker"), a = N("bento-typography"), i = N("bento-divider"), v = N("bento-button-actions"), b = N("date-range-picker-calendar"), A = N("bento-base-filter");
+  return F(), w(A, {
+    ref: "baseFilter",
+    class: "b-base-filter-date-range-filter",
+    "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,
+    "tooltip-position": ($ = e.options) == null ? void 0 : $.tooltipPosition,
+    "tooltip-text": (c = e.options) == null ? void 0 : c.tooltipText,
+    "fit-content": "",
+    onOpen: e.openFilter,
+    onClear: e.clearFilter,
+    onReset: e.resetFilter,
+    onCancel: e.onCancel
+  }, {
+    default: C(() => {
+      var g, P, _, U, H, E, j, h, V, M, I, B, J, z, ee, S, f, r, O, Y, u;
+      return [
+        e.onlySlot ? (F(), w(d, {
+          key: 0,
+          "allow-time-input": (g = e.options) == null ? void 0 : g.allowTimeInput,
+          value: e.internalFilterValue,
+          "first-day-of-week": (P = e.options) == null ? void 0 : P.firstDayOfWeek,
+          "is-date-disabled": (_ = e.options) == null ? void 0 : _.isDateDisabled,
+          "number-of-months": (U = e.options) == null ? void 0 : U.numberOfMonths,
+          "quick-select-ranges": (H = e.options) == null ? void 0 : H.quickSelectRanges,
+          variant: (E = e.options) == null ? void 0 : E.variant,
+          disabled: e.disabled,
+          granularities: (j = e.options) == null ? void 0 : j.granularities,
+          "max-range": (h = e.options) == null ? void 0 : h.maxRange,
+          min: (V = e.options) == null ? void 0 : V.min,
+          max: (M = e.options) == null ? void 0 : M.max,
+          "date-form-data": e.formData,
+          "show-end-date-on-open": (I = e.options) == null ? void 0 : I.showEndDateOnOpen,
+          onInput: e.onDateInputSelected
+        }, null, 8, ["allow-time-input", "value", "first-day-of-week", "is-date-disabled", "number-of-months", "quick-select-ranges", "variant", "disabled", "granularities", "max-range", "min", "max", "date-form-data", "show-end-date-on-open", "onInput"])) : (F(), G("div", Pl, [
+          R(b, {
+            "allow-time-input": (B = e.options) == null ? void 0 : B.allowTimeInput,
+            "first-day-of-week": (J = e.options) == null ? void 0 : J.firstDayOfWeek,
+            "is-date-disabled": (z = e.options) == null ? void 0 : z.isDateDisabled,
+            granularities: (ee = e.options) == null ? void 0 : ee.granularities,
+            "max-range": (S = e.options) == null ? void 0 : S.maxRange,
+            min: (f = e.options) == null ? void 0 : f.min,
+            max: (r = e.options) == null ? void 0 : r.max,
+            "number-of-months": (O = e.options) == null ? void 0 : O.numberOfMonths,
+            "quick-select-ranges": e.adjustedQuickSelectRanges,
+            value: e.internalFilterValue,
+            "date-form-data": e.formData,
+            "show-end-date-on-open": (Y = e.options) == null ? void 0 : Y.showEndDateOnOpen,
+            variant: (u = e.options) == null ? void 0 : u.variant,
+            onInput: e.onDateSelected,
+            onCustomRange: e.onRangeSelectorInput,
+            onError: e.onDatePickerRangeError,
+            onFormDate: e.onDatePickerRangeFormDateInputUpdate,
+            onStartDateSelected: n[0] || (n[0] = (L) => e.isSelectingDate = !0)
+          }, {
+            title: C(() => [
+              R(a, {
+                strongest: "",
+                variant: "body",
+                el: "span"
+              }, {
+                default: C(() => [
+                  X(x(e.label), 1)
+                ]),
+                _: 1
+              })
+            ]),
+            actions: C(() => [
+              R(i, { class: "b-date-range-filter__divider" }),
+              R(v, {
+                class: "b-date-range-filter__actions",
+                actions: e.actions,
+                layout: "space-between"
+              }, null, 8, ["actions"])
+            ]),
+            _: 1
+          }, 8, ["allow-time-input", "first-day-of-week", "is-date-disabled", "granularities", "max-range", "min", "max", "number-of-months", "quick-select-ranges", "value", "date-form-data", "show-end-date-on-open", "variant", "onInput", "onCustomRange", "onError", "onFormDate"])
+        ]))
+      ];
+    }),
+    _: 1
+  }, 8, ["button-label", "button-secondary-label", "controlled", "disabled", "disable-apply-button", "disable-secondary-button", "default-value", "field", "label", "only-slot", "tooltip-position", "tooltip-text", "onOpen", "onClear", "onReset", "onCancel"]);
+}
+const Bt = /* @__PURE__ */ le($l, [["render", El], ["__scopeId", "data-v-51244862"]]), Dt = {
+  "en-US": {
+    all: "All",
+    noFiltersMatchThisSearch: "No filters match this search",
+    searchFilter: "Search {filter}"
+  },
+  "ja-JP": {
+    all: "すべて"
+  },
+  "pt-BR": {
+    all: "Todos"
+  }
+}, Ll = { class: "b-select-filter-button__search-bar-wrapper" }, Ul = {
+  key: 0,
+  class: "b-select-filter-button__search-bar"
+}, Ol = { class: "b-select-filter-button__divider" }, Rl = {
+  i18n: { messages: Dt }
+}, wl = /* @__PURE__ */ Q({
+  ...Rl,
+  __name: "select-filter-button",
+  props: {
+    /**
+     * Disables the filter from being interacted with.
+     */
+    disabled: { type: Boolean, default: !1 },
+    /**
+     * Default value of the filter to reset to.
+     *
+     */
+    defaultValue: {
+      type: [String, Number, Array],
+      default: null
+    },
+    /**
+     * Filter name/key referencing the actual property name in the data set.
+     * Should be unique per filter bar.
+     */
+    field: { type: String, required: !0 },
+    /**
+     * Label text to be displayed
+     */
+    label: { type: String, required: !0 },
+    /**
+     * Renders the base filter's slot content only - leaving out the button and the popover.
+     * Used for the allFiltersModal component.
+     */
+    onlySlot: { type: Boolean, default: !1 },
+    /**
+     * List of options that are needed to setup the filter
+     * Available options:
+     *   - multiple: If "true", the user will be able to select multiple items.
+     *   - listboxItems: The option elements to populate the filter with.
+     *
+     * @default undefined
+     */
+    options: {
+      type: Object,
+      default: void 0
+    },
+    /**
+     * Current value of the filter
+     *
+     * @default undefined
+     */
+    value: {
+      type: [String, Number, Array, Object],
+      default: void 0
+    }
+  },
+  emits: ["input", "update"],
+  setup(e, { emit: n }) {
+    var ee, S;
+    const l = Ne(), s = n, t = e, { t: o } = pe({ messages: Dt }), d = K(""), a = te(t, "options"), i = K(t.options.listboxItems ?? []), { cachedSelectedListboxOptions: v, setCachedValues: b, resetCache: A } = Ge(
+      i,
+      te(t, "value"),
+      te(a.value, "multiple")
+    ), { cachedSelectedListboxOptions: $ } = Ge(
+      i,
+      te(t, "defaultValue"),
+      te(a.value, "multiple")
+    ), { internalFilterValue: c, isSecondaryButtonDisabled: g, isApplyButtonDisabled: P } = he(v, $);
+    ie(a, () => {
+      i.value = a.value.listboxItems ?? [];
+    });
+    const _ = mt(
+      d,
+      i,
+      (S = (ee = t.options) == null ? void 0 : ee.search) == null ? void 0 : S.searchEvent
+    ), U = p(() => o("noFiltersMatchThisSearch")), H = p(() => t.label), E = p(() => {
+      var O, Y, u, L, y;
+      const f = !((O = t == null ? void 0 : t.options) != null && O.multiple) && (t == null ? void 0 : t.value), r = ((Y = t == null ? void 0 : t.options) == null ? void 0 : Y.multiple) && Array.isArray(t.value) && t.value.length === 1;
+      if (f || r) {
+        if ((u = t.options) != null && u.enableValueLabelPair) {
+          const q = ((L = c.value) == null ? void 0 : L.length) > 0 ? c.value[0].label : t.value;
+          return Ce(q, 12);
+        }
+        let k = (y = t.options.listboxItems.flatMap((q) => q.items ? q.items : q).find(
+          ({ value: q }) => {
+            var ae;
+            return Array.isArray(t.value) ? (ae = t == null ? void 0 : t.value) == null ? void 0 : ae.includes(q) : q === t.value;
+          }
+        )) == null ? void 0 : y.label;
+        return !k && t.value && (k = t.value[0]), Ce(k, 12);
+      }
+      return null;
+    }), j = p(() => qe(`filter-listbox-${t.field}`)), h = (f) => {
+      var u, L, y;
+      c.value = f;
+      const { onlySlot: r, ...O } = t;
+      if ((u = t.options) != null && u.multiple) {
+        let m;
+        (L = t.options) != null && L.enableValueLabelPair ? m = f.length ? c.value : null : m = f.length ? c.value.map(({ value: k }) => k) : null, s(D.INPUT, { ...O, value: m });
+        return;
+      }
+      let Y;
+      (y = t.options) != null && y.enableValueLabelPair ? Y = f.length ? f[0] : null : Y = f.length ? f[0].value : null, s(D.INPUT, { ...O, value: Y });
+    }, V = () => {
+      var Y, u, L, y, m, k;
+      const { onlySlot: f, ...r } = t;
+      if (t.options.multiple) {
+        c.value && ((Y = c.value) == null ? void 0 : Y.length) === 0 && (c.value = t.defaultValue !== null ? $.value : void 0);
+        let q;
+        (u = t.options) != null && u.enableValueLabelPair ? q = (L = c.value) != null && L.length ? c.value : null : q = (y = c.value) != null && y.length ? (m = c.value) == null ? void 0 : m.map(({ value: ae }) => ae) : null, s(D.UPDATE, {
+          ...r,
+          value: q
+        });
+        return;
+      }
+      let O;
+      (k = t.options) != null && k.enableValueLabelPair ? O = c.value.length ? c.value[0] : void 0 : O = c.value.length ? c.value[0].value : void 0, s(D.UPDATE, { ...r, value: O });
+    }, M = () => {
+      var f, r;
+      c.value = v.value, (r = (f = t.options) == null ? void 0 : f.onOpen) == null || r.call(f);
+    }, I = () => {
+      d.value && (d.value = "");
+    }, B = () => {
+      b($.value), c.value = $.value, V();
+    }, J = () => {
+      A(), c.value = [], V();
+    }, z = p(() => {
+      var O, Y;
+      if (t.value == null || !t.options.multiple)
+        return null;
+      const f = (O = t.options.listboxItems) == null ? void 0 : O.reduce((u, L) => {
+        var y;
+        return u += (y = L == null ? void 0 : L.items) != null && y.length ? L.items.length : 1, u;
+      }, 0), r = (Y = t.value) == null ? void 0 : Y.length;
+      return r === 1 ? null : r === f ? o("all") : r;
+    });
+    return (f, r) => {
+      var O, Y;
+      return F(), w(T(Be), {
+        "applied-filters-count": z.value,
+        "button-label": H.value,
+        "button-secondary-label": E.value,
+        disabled: e.disabled,
+        "disable-apply-button": T(P),
+        "disable-secondary-button": T(g),
+        "default-value": e.defaultValue,
+        label: e.label,
+        field: e.field,
+        "only-slot": !1,
+        "tooltip-position": (O = e.options) == null ? void 0 : O.tooltipPosition,
+        "tooltip-text": (Y = e.options) == null ? void 0 : Y.tooltipText,
+        value: e.value,
+        onApply: V,
+        onClear: J,
+        onReset: B,
+        onOpen: M,
+        onClose: I
+      }, {
+        default: C(() => {
+          var u, L, y, m, k, q, ae, ue, be, fe, Fe, Ie, Le, oe, ze;
+          return [
+            W("div", Ll, [
+              ((u = e.options) == null ? void 0 : u.dynamicFiltering) ?? !0 ? (F(), G("div", Ul, [
+                R(ke, {
+                  "debounce-time": (y = (L = e.options) == null ? void 0 : L.search) == null ? void 0 : y.debounceTime,
+                  value: d.value,
+                  "input-field-aria-label": T(o)("searchFilter", { filter: e.label.toLocaleLowerCase() }),
+                  onInput: r[0] || (r[0] = (Me) => d.value = Me)
+                }, null, 8, ["debounce-time", "value", "input-field-aria-label"])
+              ])) : Z("", !0),
+              W("div", Ol, [
+                R(T(Ye))
+              ])
+            ]),
+            R(T(xt), {
+              id: j.value,
+              "aria-label": e.label,
+              class: "b-select-filter-button__wrapper",
+              "component-loading": (m = e.options) == null ? void 0 : m.loading,
+              "empty-state": (k = e.options) == null ? void 0 : k.emptyState,
+              "has-more-items": (ae = (q = e.options) == null ? void 0 : q.lazy) == null ? void 0 : ae.hasMoreItems,
+              items: T(_),
+              "is-option-disabled": (ue = e.options) == null ? void 0 : ue.isOptionDisabled,
+              "lazy-load-type": (fe = (be = e.options) == null ? void 0 : be.lazy) == null ? void 0 : fe.lazyLoadType,
+              loading: (Ie = (Fe = e.options) == null ? void 0 : Fe.lazy) == null ? void 0 : Ie.loading,
+              multiple: (Le = e.options) == null ? void 0 : Le.multiple,
+              "static-categories": (oe = e.options) == null ? void 0 : oe.staticCategories,
+              "no-results-message": U.value,
+              searching: !!d.value,
+              "selected-value": T(c),
+              "virtual-scroll": (ze = e.options) == null ? void 0 : ze.virtualScroll,
+              onSelect: h,
+              onSpacePressed: h,
+              onEnterPressed: h,
+              onShowMore: r[1] || (r[1] = (Me) => {
+                var _e, Ue;
+                return (Ue = (_e = e.options) == null ? void 0 : _e.lazy) == null ? void 0 : Ue.showMoreEvent();
+              })
+            }, Pe({ _: 2 }, [
+              ye(T(l), (Me, _e) => ({
+                name: _e,
+                fn: C((Ue) => [
+                  ce(f.$slots, _e, Re(we(Ue)), void 0, !0)
+                ])
+              }))
+            ]), 1032, ["id", "aria-label", "component-loading", "empty-state", "has-more-items", "items", "is-option-disabled", "lazy-load-type", "loading", "multiple", "static-categories", "no-results-message", "searching", "selected-value", "virtual-scroll"])
+          ];
+        }),
+        _: 3
+      }, 8, ["applied-filters-count", "button-label", "button-secondary-label", "disabled", "disable-apply-button", "disable-secondary-button", "default-value", "label", "field", "tooltip-position", "tooltip-text", "value"]);
+    };
+  }
+}), kl = /* @__PURE__ */ le(wl, [["__scopeId", "data-v-425e708e"]]), At = {
+  "en-US": {
+    noFiltersMatchThisSearch: "No filters match this search"
+  }
+}, Nl = {
+  i18n: { messages: At },
+  name: "select-filter-dropdown"
+}, Vl = /* @__PURE__ */ Q({
+  ...Nl,
+  props: {
+    /**
+     * Disables the filter from being interacted with.
+     */
+    disabled: { type: Boolean, default: !1 },
+    /**
+     * Default value of the filter to reset to.
+     *
+     */
+    defaultValue: {
+      type: [String, Number, Array],
+      default: null
+    },
+    /**
+     * Filter name/key referencing the actual property name in the data set.
+     * Should be unique per filter bar.
+     */
+    field: { type: String, required: !0 },
+    /**
+     * Label text to be displayed
+     */
+    label: { type: String, required: !0 },
+    /**
+     * Renders the base filter's slot content only - leaving out the button and the popover.
+     * Used for the allFiltersModal component.
+     *
+     */
+    onlySlot: { type: Boolean, default: !1 },
+    /**
+     * List of options that are needed to setup the filter
+     * Available options:
+     *   - multiple: If "true", the user will be able to select multiple items.
+     *   - listboxItems: The option elements to populate the filter with.
+     *
+     * @default undefined
+     */
+    options: {
+      type: Object,
+      default: void 0
+    },
+    /**
+     * Current value of the filter
+     *
+     * @default undefined
+     */
+    value: {
+      type: [String, Number, Array],
+      default: void 0
+    }
+  },
+  emits: ["input", "update"],
+  setup(e, { emit: n }) {
+    const { t: l } = pe({ messages: At }), s = Ne(), t = n, o = e, { internalFilterValue: d } = he(te(o, "value"), te(o, "defaultValue")), a = te(o, "options"), i = K(o.options.listboxItems);
+    ie(a, () => {
+      i.value = a.value.listboxItems;
+    });
+    const v = p(() => l("noFiltersMatchThisSearch")), b = (A) => {
+      d.value = A;
+      const { onlySlot: $, ...c } = o;
+      t(D.INPUT, { ...c, value: d.value });
+    };
+    return (A, $) => {
+      var c, g, P, _, U, H, E;
+      return F(), w(T(Gt), {
+        value: T(d),
+        items: e.options.listboxItems,
+        search: (c = e.options) == null ? void 0 : c.search,
+        multiple: (g = e.options) == null ? void 0 : g.multiple,
+        "static-categories": (P = e.options) == null ? void 0 : P.staticCategories,
+        "no-results-message": v.value,
+        "is-option-disabled": e.options.isOptionDisabled,
+        "dynamic-filtering": ((_ = e.options) == null ? void 0 : _.dynamicFiltering) ?? !0,
+        "component-loading": (U = e.options) == null ? void 0 : U.loading,
+        "empty-state": (H = e.options) == null ? void 0 : H.emptyState,
+        disabled: e.disabled,
+        "enable-value-label-pair": (E = e.options) == null ? void 0 : E.enableValueLabelPair,
+        onInput: b,
+        onOpen: $[0] || ($[0] = () => {
+          var j, h;
+          return (h = (j = e.options) == null ? void 0 : j.onOpen) == null ? void 0 : h.call(j);
+        })
+      }, Pe({ _: 2 }, [
+        ye(T(s), (j, h) => ({
+          name: h,
+          fn: C((V) => [
+            ce(A.$slots, h, Re(we(V)))
+          ])
+        }))
+      ]), 1032, ["value", "items", "search", "multiple", "static-categories", "no-results-message", "is-option-disabled", "dynamic-filtering", "component-loading", "empty-state", "disabled", "enable-value-label-pair"]);
+    };
+  }
+}), Te = {
+  /**
+   * Disables the filter from being interacted with.
+   */
+  disabled: { type: Boolean, default: !1 },
+  /**
+   * Default value of the filter to reset to.
+   *
+   */
+  defaultValue: {
+    type: [String, Number, Array, Object],
+    default: null
+  },
+  /**
+   * Filter name/key referencing the actual property name in the data set.
+   * Should be unique per filter bar.
+   */
+  field: { type: String, required: !0 },
+  /**
+   * Label text to be displayed
+   */
+  label: { type: String, required: !0 },
+  /**
+   * Renders the base filter's slot content only - leaving out the button and the popover.
+   * Used for the allFiltersModal component.
+   *
+   */
+  onlySlot: { type: Boolean, default: !1 },
+  /**
+   * List of options that are needed to setup the filter
+   * Available options:
+   *   - multiple: If "true", the user will be able to select multiple items.
+   *   - listboxItems: The option elements to populate the filter with.
+   *   - tooltipPosition: The position of the tooltip attached to the filter button
+   *   - tooltipText: The content of the tooltip attached to the filter button
+   *
+   * @default undefined
+   */
+  options: {
+    type: Object,
+    default: void 0
+  },
+  /**
+   * Current value of the filter
+   *
+   * @default undefined
+   */
+  value: {
+    type: [String, Number, Array, Object],
+    default: void 0
+  }
+}, Ml = {}, De = /* @__PURE__ */ Q({
+  ...Ml,
+  __name: "select-filter",
+  props: Te,
+  emits: ["input", "update"],
+  setup(e, { emit: n }) {
+    const l = Ne(), s = n, t = e, o = (a) => s("input", a), d = (a) => s("update", a);
+    return ut(() => {
+      var a;
+      (a = t == null ? void 0 : t.options) != null && a.messages && Ke(
+        '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"
+      );
+    }), (a, i) => a.onlySlot ? (F(), w(T(Vl), {
+      key: 0,
+      disabled: a.disabled,
+      "default-value": a.defaultValue,
+      field: a.field,
+      label: a.label,
+      options: a.options,
+      value: a.value,
+      onInput: o,
+      onUpdate: d
+    }, Pe({ _: 2 }, [
+      ye(T(l), (v, b) => ({
+        name: b,
+        fn: C((A) => [
+          ce(a.$slots, b, Re(we(A)))
+        ])
+      }))
+    ]), 1032, ["disabled", "default-value", "field", "label", "options", "value"])) : (F(), w(T(kl), {
+      key: 1,
+      disabled: a.disabled,
+      "default-value": a.defaultValue,
+      field: a.field,
+      label: a.label,
+      options: a.options,
+      value: a.value,
+      onInput: o,
+      onUpdate: d
+    }, Pe({ _: 2 }, [
+      ye(T(l), (v, b) => ({
+        name: b,
+        fn: C((A) => [
+          ce(a.$slots, b, Re(we(A)))
+        ])
+      }))
+    ]), 1032, ["disabled", "default-value", "field", "label", "options", "value"]));
+  }
+}), Hl = Q({
+  name: "bento-select-avatar-filter",
+  components: {
+    BentoSelectFilter: De,
+    BentoAvatar: ll
+  },
+  props: {
+    ...Te,
+    /**
+     * List of options that are needed to setup the country filter
+     * Available options:
+     *   - multiple: If "true", the user will be able to select multiple items.
+     *   - listboxItems: The option elements to populate the filter with {@see BentoSelectCountryFilterOptions}
+     */
+    options: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: [D.INPUT, D.UPDATE],
+  setup(e, { emit: n }) {
+    return {
+      // Enums
+      BentoFilterEvent: D,
+      // Methods
+      onUpdate: (s) => n(D.UPDATE, s)
+    };
+  }
+});
+function jl(e, n, l, s, t, o) {
+  const d = N("bento-avatar"), a = N("bento-select-filter");
+  return F(), w(a, re(e.$props, {
+    field: e.field,
+    label: e.label,
+    onUpdate: e.onUpdate,
+    onInput: n[0] || (n[0] = (i) => e.$emit(e.BentoFilterEvent.INPUT, i))
+  }), {
+    default: C(({ label: i, data: v }) => [
+      R(d, {
+        username: i,
+        src: v
+      }, null, 8, ["username", "src"])
+    ]),
+    _: 1
+  }, 16, ["field", "label", "onUpdate"]);
+}
+const Tt = /* @__PURE__ */ le(Hl, [["render", jl]]), ql = Q({
+  name: "bento-select-country-filter",
+  components: {
+    BentoSelectFilter: De,
+    ListboxOptionTag: yt
+  },
+  props: {
+    ...Te,
+    /**
+     * List of options that are needed to setup the country filter
+     * Available options:
+     *   - multiple: If "true", the user will be able to select multiple items.
+     *   - listboxItems: The option elements to populate the filter with {@see BentoSelectCurrencyFilterOptions}
+     */
+    options: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: [D.INPUT, D.UPDATE],
+  setup(e, { emit: n }) {
+    return {
+      // Enums
+      BentoFilterEvent: D,
+      // Methods
+      onUpdate: (s) => {
+        n(D.UPDATE, s);
+      }
+    };
+  }
+});
+function Kl(e, n, l, s, t, o) {
+  const d = N("listbox-option-tag"), a = N("bento-select-filter");
+  return F(), w(a, re(e.$props, {
+    field: e.field,
+    label: e.label,
+    onUpdate: e.onUpdate,
+    onInput: n[0] || (n[0] = (i) => e.$emit(e.BentoFilterEvent.INPUT, i))
+  }), {
+    default: C((i) => [
+      R(d, { option: i }, null, 8, ["option"])
+    ]),
+    _: 1
+  }, 16, ["field", "label", "onUpdate"]);
+}
+const It = /* @__PURE__ */ le(ql, [["render", Kl]]), Jl = {
+  name: "bento-select-country-filter"
+}, _t = /* @__PURE__ */ Q({
+  ...Jl,
+  props: {
+    ...Te,
+    /**
+     * List of options that are needed to setup the country filter
+     * Available options:
+     *   - multiple: If "true", the user will be able to select multiple items.
+     *   - listboxItems: The option elements to populate the filter with {@see BentoSelectCountryFilterOptions}
+     *   - variant: Which label variant to display for the option item.
+     */
+    options: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: [D.INPUT, D.UPDATE],
+  setup(e, { emit: n }) {
+    const l = e, s = n, t = K(l.options.variant), o = K(l.options.listboxItems);
+    ie([() => l.options.variant, () => l.options.listboxItems], () => {
+      t.value = l.options.variant, o.value = l.options.listboxItems;
+    });
+    const d = (v) => s(D.UPDATE, v), a = tl(t, o), i = p(() => ({
+      ...l != null && l.options ? l.options : {},
+      listboxItems: a.value
+    }));
+    return (!t.value || t.value === "custom") && Ke(
+      'BentoSelectCountryFilter type with `options.variant==="custom"`',
+      "Use any of the other BentoSelectCountryFilter variants instead OR use BentoSelectFilter type for custom labels",
+      "2.0.0"
+    ), (v, b) => (F(), w(De, re(l, {
+      field: v.field,
+      label: v.label,
+      options: i.value,
+      onUpdate: d,
+      onInput: b[0] || (b[0] = (A) => v.$emit(T(D).INPUT, A))
+    }), {
+      default: C(({ label: A }) => [
+        R(T(ve), { el: "span" }, {
+          default: C(() => [
+            X(x(A), 1)
+          ]),
+          _: 2
+        }, 1024)
+      ]),
+      _: 1
+    }, 16, ["field", "label", "options"]));
+  }
+}), Yl = Q({
+  name: "bento-select-payment-method-filter",
+  components: {
+    BentoSelectFilter: De,
+    BentoPaymentMethod: el
+  },
+  props: {
+    ...Te,
+    /**
+     * List of options that are needed to setup the payment method filter
+     * Available options:
+     *   - multiple: If "true", the user will be able to select multiple items.
+     *   - listboxItems: The option elements to populate the filter with {@see BentoSelectPaymentMethodFilterOptions}
+     */
+    options: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: [D.INPUT, D.UPDATE],
+  setup(e, { emit: n }) {
+    return {
+      // Enums
+      BentoFilterEvent: D,
+      // Methods
+      onUpdate: (s) => n(D.UPDATE, s)
+    };
+  }
+});
+function zl(e, n, l, s, t, o) {
+  const d = N("bento-payment-method"), a = N("bento-select-filter");
+  return F(), w(a, re(e.$props, {
+    field: e.field,
+    label: e.label,
+    onUpdate: e.onUpdate,
+    onInput: n[0] || (n[0] = (i) => e.$emit(e.BentoFilterEvent.INPUT, i))
+  }), {
+    default: C(({ value: i, label: v }) => [
+      R(d, {
+        type: i,
+        label: v
+      }, null, 8, ["type", "label"])
+    ]),
+    _: 1
+  }, 16, ["field", "label", "onUpdate"]);
+}
+const $t = /* @__PURE__ */ le(Yl, [["render", zl]]), Wl = Q({
+  name: "bento-select-country-filter",
+  components: {
+    BentoSelectFilter: De,
+    ListboxOptionTag: yt
+  },
+  props: {
+    ...Te,
+    /**
+     * List of options that are needed to setup the tag filter
+     * Available options:
+     *   - multiple: If "true", the user will be able to select multiple items.
+     *   - listboxItems: The option elements to populate the filter with {@see BentoSelectTagFilterOptions}
+     */
+    options: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: [D.INPUT, D.UPDATE],
+  setup(e, { emit: n }) {
+    const l = (o) => n(D.UPDATE, o), s = p(
+      () => {
+        var o, d;
+        return (d = (o = e == null ? void 0 : e.options) == null ? void 0 : o.listboxItems) == null ? void 0 : d.map(({ label: a, value: i, variant: v }) => ({ label: a, value: i, data: v }));
+      }
+    );
+    return {
+      // Values
+      countryOptions: p(() => ({
+        ...e.options,
+        listboxItems: s.value
+      })),
+      // Methods
+      onUpdate: l,
+      // Enums
+      BentoFilterEvent: D
+    };
+  }
+});
+function Gl(e, n, l, s, t, o) {
+  const d = N("listbox-option-tag"), a = N("bento-select-filter");
+  return F(), w(a, re(e.$props, {
+    field: e.field,
+    label: e.label,
+    options: e.countryOptions,
+    onUpdate: e.onUpdate,
+    onInput: n[0] || (n[0] = (i) => e.$emit(e.BentoFilterEvent.INPUT, i))
+  }), {
+    default: C(({ label: i, data: v }) => [
+      R(d, {
+        option: { value: i, data: v, label: "" }
+      }, null, 8, ["option"])
+    ]),
+    _: 1
+  }, 16, ["field", "label", "options", "onUpdate"]);
+}
+const Pt = /* @__PURE__ */ le(Wl, [["render", Gl]]), at = {
+  "en-US": {
+    no: "No",
+    yes: "Yes"
+  },
+  "ja-JP": {
+    no: "いいえ",
+    yes: "はい"
+  },
+  "pt-BR": {
+    no: "Não",
+    yes: "Sim"
+  }
+}, Zl = Q({
+  name: "bento-boolean-filter",
+  i18n: { messages: at },
+  components: { BentoBaseFilter: Be, BentoRadioGroup: Ht },
+  props: {
+    /**
+     * Disables the filter from being interacted with.
+     */
+    disabled: { type: Boolean, default: !1 },
+    /**
+     * Default value of the filter to reset to.
+     */
+    defaultValue: { type: [String, Boolean], default: null },
+    /**
+     * Filter name/key referencing the actual property name in the data set.
+     * Should be unique per filter bar.
+     */
+    field: { type: String, required: !0 },
+    /**
+     * Label text to be displayed
+     */
+    label: { type: String, required: !0 },
+    /**
+     * Current value of the filter
+     */
+    value: { type: [String, Boolean], default: null },
+    /**
+     * Renders the base filter's slot content only - leaving out the button and the popover.
+     * Used for the allFiltersModal component.
+     */
+    onlySlot: { type: Boolean, default: !1 },
+    /**
+     * List of options that are needed to setup the filter
+     * Available options:
+     *   - positiveOption: The positive option label/value
+     *   - negativeOption: The positive option label/value
+     *   - tooltipPosition: The position of the tooltip attached to the filter button
+     *   - tooltipText: The content of the tooltip attached to the filter button
+     */
+    options: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: [D.INPUT, D.UPDATE],
+  setup(e, { emit: n }) {
+    const { t: l } = pe({ messages: at }), s = (E) => typeof E == "boolean" ? E == null ? void 0 : E.toString() : E, t = (E) => {
+      var j, h, V, M;
+      return ((h = (j = e == null ? void 0 : e.options) == null ? void 0 : j.positiveOption) == null ? void 0 : h.value) !== void 0 && ((M = (V = e == null ? void 0 : e.options) == null ? void 0 : V.negativeOption) == null ? void 0 : M.value) !== void 0 && typeof e.options.positiveOption.value == "boolean" && typeof e.options.negativeOption.value == "boolean" && typeof E == "string" ? E === "true" : E;
+    }, o = p(() => s(e.defaultValue)), d = p(() => s(e.value)), a = p(() => e.options && e.options.positiveOption && e.options.negativeOption ? [
+      {
+        ...e.options.positiveOption,
+        value: s(e.options.positiveOption.value)
+      },
+      {
+        ...e.options.negativeOption,
+        value: s(e.options.negativeOption.value)
+      }
+    ] : [
+      { value: "yes", label: l("yes") },
+      { value: "no", label: l("no") }
+    ]), { internalFilterValue: i, isSecondaryButtonDisabled: v, isApplyButtonDisabled: b } = he(
+      d,
+      o
+    ), A = p(() => e.label), $ = p(
+      () => {
+        var E;
+        return Ce((E = a.value.find(({ value: j }) => j === d.value)) == null ? void 0 : E.label, 12);
+      }
+    ), c = p(() => ({
+      "b-boolean-filter--only-slot": e.onlySlot
+    }));
+    Ve(() => {
+      i.value || (i.value = null);
+    });
+    const g = (E) => {
+      i.value = E, n(D.INPUT, {
+        ...e,
+        value: t(i.value)
+      });
+    }, P = () => {
+      i.value = d.value;
+    }, _ = () => {
+      n(D.UPDATE, {
+        ...e,
+        value: t(i.value)
+      });
+    };
+    return {
+      // Values
+      items: a,
+      conditionalClasses: c,
+      buttonLabel: A,
+      buttonSecondaryLabel: $,
+      internalFilterValue: i,
+      isApplyButtonDisabled: b,
+      isSecondaryButtonDisabled: v,
+      translatedValue: d,
+      translatedDefaultValue: o,
+      // Events
+      onInput: g,
+      updateFilter: _,
+      clearFilter: () => {
+        i.value = null, _();
+      },
+      openFilter: P,
+      resetFilter: () => n(D.UPDATE, { ...e, value: e.defaultValue })
+    };
+  }
+});
+function Ql(e, n, l, s, t, o) {
+  var i, v;
+  const d = N("bento-radio-group"), a = N("bento-base-filter");
+  return F(), w(a, re(e.$props, {
+    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,
+    "tooltip-position": (i = e.options) == null ? void 0 : i.tooltipPosition,
+    "tooltip-text": (v = e.options) == null ? void 0 : v.tooltipText,
+    onApply: e.updateFilter,
+    onClear: e.clearFilter,
+    onOpen: e.openFilter,
+    onReset: e.resetFilter
+  }), {
+    default: C(() => [
+      W("div", {
+        class: de(["b-boolean-filter", e.conditionalClasses]),
+        onKeydown: n[0] || (n[0] = me((...b) => e.updateFilter && e.updateFilter(...b), ["enter"]))
+      }, [
+        R(d, {
+          items: e.items,
+          label: e.label,
+          "model-value": e.internalFilterValue,
+          disabled: e.disabled,
+          "hide-label": "",
+          "onUpdate:modelValue": e.onInput
+        }, null, 8, ["items", "label", "model-value", "disabled", "onUpdate:modelValue"])
+      ], 34)
+    ]),
+    _: 1
+  }, 16, ["value", "default-value", "button-label", "button-secondary-label", "disable-apply-button", "disable-secondary-button", "only-slot", "tooltip-position", "tooltip-text", "onApply", "onClear", "onOpen", "onReset"]);
+}
+const Et = /* @__PURE__ */ le(Zl, [["render", Ql], ["__scopeId", "data-v-7772a6d5"]]), ot = {
+  "en-US": {
+    from: "From",
+    to: "To"
+  }
+}, Xl = Q({
+  name: "bento-range-filter",
+  i18n: { messages: ot },
+  components: { BentoBaseFilter: Be, BentoInputField: Je },
+  props: {
+    /**
+     * Disables the filter from being interacted with.
+     */
+    disabled: { type: Boolean, default: !1 },
+    /**
+     * Default value of the filter to reset to.
+     */
+    defaultValue: { type: Array, default: null },
+    /**
+     * Filter name/key referencing the actual property name in the data set.
+     * Should be unique per filter bar.
+     */
+    field: { type: String, required: !0 },
+    /**
+     * Label text to be displayed
+     */
+    label: { type: String, required: !0 },
+    /**
+     * Current value of the filter
+     */
+    value: { type: Array, default: () => ["", ""] },
+    /**
+     * Renders the base filter's slot content only - leaving out the button and the popover.
+     * Used for the allFiltersModal component.
+     */
+    onlySlot: { type: Boolean, default: !1 },
+    /**
+     * List of options that are needed to setup the filter
+     * Available options:
+     *   - tooltipPosition: The position of the tooltip attached to the filter button
+     *   - tooltipText: The content of the tooltip attached to the filter button
+     */
+    options: { type: Object, default: void 0 }
+  },
+  emits: [D.INPUT, D.UPDATE],
+  setup(e, { emit: n }) {
+    const { t: l } = pe({ messages: ot }), s = K(null), { internalFilterValue: t, isSecondaryButtonDisabled: o, isApplyButtonDisabled: d } = he(
+      te(e, "value"),
+      te(e, "defaultValue")
+    ), a = p(() => {
+      var V, M, I, B, J, z, ee, S;
+      if (!((V = e.value) != null && V[0]) && !((M = e.value) != null && M[1]))
+        return null;
+      let H = "";
+      (I = e.value) != null && I[0] ? (B = e.value) != null && B[1] || (H = "≥") : H = "≤";
+      const E = (J = e.value) != null && J[0] ? `${Ce(e.value[0], 5)}` : "", j = (z = e.value) != null && z[0] && ((ee = e.value) != null && ee[1]) ? " - " : "", h = (S = e.value) != null && S[1] ? `${Ce(e.value[1], 5)}` : "";
+      return `${H}${E}${j}${h}`;
+    }), i = p(() => e.label), v = p(() => a.value), b = p(() => ({
+      "b-range-filter--only-slot": e.onlySlot
+    })), A = () => {
+      t.value = e.value, it(() => s.value.focusInput());
+    }, $ = () => {
+      n(D.INPUT, { ...e, value: t.value });
+    }, c = (H) => {
+      t.value = [H, t.value[1]], $();
+    }, g = (H) => {
+      t.value = [t.value[0], H], $();
+    }, P = () => {
+      t.value.some((H) => H) || (t.value = e.defaultValue !== null ? e.defaultValue : void 0), n(D.UPDATE, {
+        ...e,
+        value: t.value
+      });
+    };
+    return {
+      // Values
+      inputTextRef: s,
+      conditionalClasses: b,
+      internalFilterValue: t,
+      isApplyButtonDisabled: d,
+      isSecondaryButtonDisabled: o,
+      buttonLabel: i,
+      buttonSecondaryLabel: v,
+      // Events
+      updateFrom: c,
+      updateTo: g,
+      updateFilter: P,
+      clearFilter: () => {
+        t.value = ["", ""], P();
+      },
+      openFilter: A,
+      resetFilter: () => n(D.UPDATE, { ...e, value: e.defaultValue }),
+      // Translations
+      t: l
+    };
+  }
+});
+function xl(e, n, l, s, t, o) {
+  var i, v;
+  const d = N("bento-input-field"), a = N("bento-base-filter");
+  return F(), w(a, re(e.$props, {
+    "disable-apply-button": e.isApplyButtonDisabled,
+    "disable-secondary-button": e.isSecondaryButtonDisabled,
+    "button-label": e.buttonLabel,
+    "button-secondary-label": e.buttonSecondaryLabel,
+    "only-slot": e.onlySlot,
+    "tooltip-position": (i = e.options) == null ? void 0 : i.tooltipPosition,
+    "tooltip-text": (v = e.options) == null ? void 0 : v.tooltipText,
+    onApply: e.updateFilter,
+    onClear: e.clearFilter,
+    onOpen: e.openFilter,
+    onReset: e.resetFilter
+  }), {
+    default: C(() => [
+      W("div", {
+        class: de(["b-range-filter", e.conditionalClasses]),
+        onKeydown: n[0] || (n[0] = me((...b) => e.updateFilter && e.updateFilter(...b), ["enter"]))
+      }, [
+        R(d, {
+          ref: "inputTextRef",
+          value: e.internalFilterValue ? e.internalFilterValue[0] : "",
+          type: "number",
+          "aria-label": e.t("from").toString(),
+          disabled: e.disabled,
+          onInput: e.updateFrom
+        }, {
+          default: C(() => [
+            X(x(e.t("from")), 1)
+          ]),
+          _: 1
+        }, 8, ["value", "aria-label", "disabled", "onInput"]),
+        R(d, {
+          class: "b-range-filter__input-field",
+          value: e.internalFilterValue ? e.internalFilterValue[1] : "",
+          type: "number",
+          "aria-label": e.t("to"),
+          disabled: e.disabled,
+          onInput: e.updateTo
+        }, {
+          default: C(() => [
+            X(x(e.t("to")), 1)
+          ]),
+          _: 1
+        }, 8, ["value", "aria-label", "disabled", "onInput"])
+      ], 34)
+    ]),
+    _: 1
+  }, 16, ["disable-apply-button", "disable-secondary-button", "button-label", "button-secondary-label", "only-slot", "tooltip-position", "tooltip-text", "onApply", "onClear", "onOpen", "onReset"]);
+}
+const Lt = /* @__PURE__ */ le(Xl, [["render", xl], ["__scopeId", "data-v-355c6c3b"]]);
+var je = /* @__PURE__ */ ((e) => (e.INPUT = "input", e))(je || {});
+const ea = Q({
+  name: "base-filter-button",
+  components: { BaseButton: pt, BentoTypography: ve, ChevronUpIcon: Qt, ChevronDownIcon: Xt },
+  props: {
+    /**
+     * The number of applies values within the filter.
+     * e.g. if 2 items in a dropdown filter have been applied, the number 2 will be shown here.
+     */
+    amountAppliedValues: { type: [Number, String], default: null },
+    /**
+     * Disables button functionality.
+     */
+    disabled: { type: Boolean, default: !1 },
+    /**
+     * Signifies if the filter is open or closed.
+     */
+    isFilterOpen: { type: Boolean, default: !1 },
+    /**
+     * Toggles if a chevron icon should be displayed in the button.
+     * The chevron will change depending on the open state of the filter.
+     */
+    hasChevron: { type: Boolean, default: !1 },
+    /**
+     * Renders the text in a stronger variant.
+     */
+    bold: { type: Boolean, default: !1 }
+  },
+  emits: [We.CLICK],
+  setup(e, { slots: n, emit: l, attrs: s }) {
+    const t = p(() => n.default ? vt(n)("default") : null), o = ft({ ariaLabel: t }), d = K(null), a = p(() => {
+      var b;
+      return {
+        "aria-controls": (b = s["aria-controls"]) == null ? void 0 : b.toString()
+      };
+    }), i = p(() => ({
+      "b-base-filter-button--with-chevron": e.hasChevron,
+      "b-base-filter-button--filter-open": e.isFilterOpen
+    }));
+    return {
+      // Values
+      ariaAttributes: a,
+      computedAriaLabel: o,
+      conditionalClasses: i,
+      // Methods
+      onClickButton: () => {
+        e.disabled || l(We.CLICK);
+      },
+      hasSlot: bt(n),
+      // Refs
+      baseFilterButtonRef: d
+    };
+  }
+}), ta = { class: "b-base-filter-button__default-container" }, la = { class: "b-base-filter-button__label-container" }, aa = {
+  key: 0,
+  class: "b-base-filter-button__counter-wrapper"
+};
+function oa(e, n, l, s, t, o) {
+  const d = N("bento-typography"), a = N("chevron-up-icon"), i = N("chevron-down-icon"), v = N("base-button");
+  return F(), w(v, {
+    ref: "baseFilterButtonRef",
+    class: de(["b-base-filter-button", e.conditionalClasses]),
+    disabled: e.disabled,
+    "aria-label": e.computedAriaLabel,
+    "aria-controls": e.ariaAttributes["aria-controls"],
+    type: "button",
+    onClick: e.onClickButton
+  }, Pe({
+    default: C(() => [
+      W("div", ta, [
+        W("div", la, [
+          R(d, {
+            el: "span",
+            variant: "body",
+            stronger: e.bold,
+            class: "b-base-filter-button__label"
+          }, {
+            default: C(() => [
+              ce(e.$slots, "default", {}, void 0, !0)
+            ]),
+            _: 3
+          }, 8, ["stronger"])
+        ]),
+        e.amountAppliedValues && !e.hasChevron ? (F(), G("div", aa, [
+          R(d, {
+            class: "b-base-filter-button__counter",
+            el: "span",
+            variant: "body",
+            stronger: ""
+          }, {
+            default: C(() => [
+              X(x(e.amountAppliedValues), 1)
+            ]),
+            _: 1
+          })
+        ])) : Z("", !0)
+      ])
+    ]),
+    _: 2
+  }, [
+    e.hasChevron ? {
+      name: "iconRight",
+      fn: C(() => [
+        e.isFilterOpen ? (F(), w(a, {
+          key: 0,
+          "aria-hidden": "true"
+        })) : (F(), w(i, {
+          key: 1,
+          "aria-hidden": "true"
+        }))
+      ]),
+      key: "0"
+    } : void 0
+  ]), 1032, ["class", "disabled", "aria-label", "aria-controls", "onClick"]);
+}
+const na = /* @__PURE__ */ le(ea, [["render", oa], ["__scopeId", "data-v-af9efc73"]]), sa = Q({
+  name: "all-filters-modal-button",
+  components: { BaseFilterButton: na },
+  props: {
+    /**
+     * Button label to be displayed
+     */
+    label: { type: String, required: !0 },
+    /**
+     * Total count of applied filters
+     */
+    appliedFiltersCount: { type: [Number, String], default: null },
+    /**
+     * Indicates whether the filter popover tied to this button is showing
+     */
+    isFilterOpen: { type: Boolean, default: !1 },
+    /**
+     * Disables button functionality.
+     */
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["click"],
+  setup(e, { emit: n }) {
+    return {
+      conditionalClasses: p(() => ({
+        "b-all-filters-modal-button--with-counter": e.appliedFiltersCount,
+        "b-all-filters-modal-button--filter-open": e.isFilterOpen
+      })),
+      onClick: () => {
+        n("click");
+      }
+    };
+  }
+});
+function ia(e, n, l, s, t, o) {
+  const d = N("base-filter-button");
+  return F(), w(d, {
+    class: de(["b-all-filters-modal-button", e.conditionalClasses]),
+    "amount-applied-values": e.appliedFiltersCount,
+    "is-filter-open": e.isFilterOpen,
+    disabled: e.disabled,
+    onClick: e.onClick
+  }, {
+    default: C(() => [
+      X(x(e.label), 1)
+    ]),
+    _: 1
+  }, 8, ["class", "amount-applied-values", "is-filter-open", "disabled", "onClick"]);
+}
+const ra = /* @__PURE__ */ le(sa, [["render", ia], ["__scopeId", "data-v-b96a672f"]]);
+let nt = 0;
+const ua = {
+  beforeCreate() {
+    this.uuid = nt.toString(), nt += 1;
+  }
+}, da = { key: 0 };
+function ca(e, n, l, s, t, o) {
+  return F(), G("svg", re({ role: "img" }, e.$attrs, {
+    class: "ui-assets-icons-16",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    fill: "none"
+  }), [
+    e.$attrs["svg-title"] ? (F(), G("title", da, x(e.$attrs["svg-title"]), 1)) : Z("", !0),
+    n[0] || (n[0] = W("path", {
+      fill: "#001222",
+      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"
+    }, null, -1)),
+    n[1] || (n[1] = W("path", {
+      fill: "#001222",
+      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"
+    }, null, -1))
+  ], 16);
+}
+const pa = /* @__PURE__ */ le(ua, [["render", ca]]), st = {
+  "en-US": {
+    activeFilters: "Active filters",
+    all: "All",
+    allFilters: "All filters",
+    applyAll: "Apply all",
+    cancel: "Cancel",
+    clear: "Clear",
+    clearAll: "Clear all",
+    noFiltersMatchThisSearch: "No filters match this search",
+    otherFilters: "Other filters",
+    searchBar: "Search bar"
+  },
+  "ja-JP": {
+    activeFilters: "適用中のフィルター",
+    all: "すべて",
+    allFilters: "すべてのフィルター",
+    applyAll: "すべて適用",
+    cancel: "キャンセル",
+    clear: "クリア",
+    clearAll: "すべてクリア",
+    noFiltersMatchThisSearch: "この検索に一致するフィルターはありません",
+    otherFilters: "その他のフィルター",
+    searchBar: "検索バー"
+  },
+  "pt-BR": {
+    activeFilters: "Filtros ativos",
+    all: "Todos",
+    allFilters: "Todos os filtros",
+    applyAll: "Aplicar tudo",
+    cancel: "Cancelar",
+    clear: "Limpar",
+    clearAll: "Limpar tudo",
+    noFiltersMatchThisSearch: "Nenhum filtro corresponde a esta pesquisa",
+    otherFilters: "Outros filtros",
+    searchBar: "Barra de pesquisa"
+  }
+}, ba = Q({
+  i18n: { messages: st },
+  name: "all-filters-modal",
+  components: {
+    AllFiltersModalButton: ra,
+    BentoBooleanFilter: Et,
+    BentoButton: Mt,
+    BentoDateFilter: Ct,
+    BentoDateRangeFilter: Bt,
+    BentoInputFilter: gt,
+    BentoInputWithDropdownFilter: St,
+    BentoModal: Vt,
+    BentoRangeFilter: Lt,
+    BentoSearchBar: ke,
+    BentoSelectAvatarFilter: Tt,
+    BentoSelectCurrencyFilter: It,
+    BentoSelectCountryFilter: _t,
+    BentoSelectFilter: De,
+    BentoSelectPaymentMethodFilter: $t,
+    BentoSelectTagFilter: Pt,
+    BentoTypography: ve,
+    FilterBarButton: Ee,
+    SlidersIcon: pa
+  },
+  props: {
+    /**
+     * Array of filters based on {@see FilterBarModel}.
+     * Each one of the elements in the array correspond to a filter that will
+     * be created and rendered in the AllFiltersModal.
+     *
+     * Can be used with v-model or independently with the @input event.
+     *
+     * @example
+     * [{
+     *   field: 'company',
+     *   label: 'Company',
+     *   value: '200',
+     *   type: FilterType.TEXT,
+     * }, {
+     *   field: 'name',
+     *   label: 'Name',
+     *   value: null,
+     *   type: FilterType.TEXT,
+     * }]
+     */
+    value: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: [je.INPUT],
+  setup(e, { emit: n }) {
+    const l = K(e.value), s = qe("all-filters-modal"), t = K([]), o = K(!1), d = K(0), a = K(null), i = K(""), { t: v, n: b } = pe({ messages: st }), A = mt(i, te(l, "value")), $ = K({});
+    Ve(() => {
+      $.value = [];
+    }), ie(
+      () => e.value,
+      () => {
+        o.value ? l.value = e.value.map((y, m) => ({ ...y, value: l.value[m].value })) : l.value = e.value;
+      }
+    );
+    const c = (y) => y.sort((m, k) => m.label > k.label ? 1 : k.label > m.label ? -1 : 0), g = p(
+      () => c(
+        A.value.filter(
+          (y) => {
+            var m, k;
+            return Array.isArray(y.value) ? ((m = y.value) == null ? void 0 : m.length) && ((k = y.value) == null ? void 0 : k.find((q) => q !== "")) : y.value;
+          }
+        )
+      )
+    ), P = p(
+      () => c(
+        A.value.filter(
+          (y) => {
+            var m, k;
+            return Array.isArray(y.value) ? ((m = y.value) == null ? void 0 : m.length) === 0 || ((k = y.value) == null ? void 0 : k.every((q) => q === "")) : !y.value;
+          }
+        )
+      )
+    ), _ = p(() => {
+      var y;
+      return i.value && ((y = A.value) == null ? void 0 : y.length) === 0;
+    }), U = p(() => l.value[d.value]), H = () => {
+      const y = g.value.length ? g.value[0] : P.value[0], m = l.value.findIndex(
+        (k) => k.label === y.label && k.field === y.field
+      );
+      d.value = m;
+    };
+    ut(() => {
+      H();
+    });
+    const E = (y) => y.map((m) => {
+      var k, q, ae, ue, be, fe;
+      switch (m.type) {
+        case se.SELECT:
+        case se.SELECT_AVATAR:
+        case se.SELECT_COUNTRY:
+        case se.SELECT_CURRENCY:
+        case se.SELECT_PAYMENT_METHOD:
+        case se.SELECT_TAG:
+          switch ((k = m.options) == null ? void 0 : k.multiple) {
+            case !0:
+              return {
+                label: m.label,
+                field: m.field,
+                count: (q = m.value) != null && q.length ? (ae = m.value) == null ? void 0 : ae.length : null
+              };
+            default:
+              return {
+                label: m.label,
+                field: m.field,
+                count: m.value == null ? null : 1
+              };
+          }
+        case se.DATE_RANGE:
+          return {
+            label: m.label,
+            field: m.field,
+            count: ((ue = m.value) == null ? void 0 : ue.startDate) != null && ((be = m.value) == null ? void 0 : be.endDate) != null ? 1 : null
+          };
+        case se.RANGE:
+          return {
+            label: m.label,
+            field: m.field,
+            count: (fe = m.value) != null && fe.find((Fe) => Fe !== "") ? 1 : null
+          };
+        case se.INPUT:
+        case se.BOOLEAN:
+        case se.DATE:
+        default:
+          return {
+            label: m.label,
+            field: m.field,
+            count: m.value != null ? 1 : null
+          };
+      }
+    }), j = p(
+      () => {
+        var y;
+        return Array.isArray(U.value.value) ? ((y = U.value) == null ? void 0 : y.value.length) && U.value.value.find((m) => m !== "") : !!l.value[d.value].value;
+      }
+    ), h = p(() => !j.value || U.value.disabled), V = p(
+      () => {
+        var y;
+        return (y = E(e.value)) == null ? void 0 : y.filter(({ count: m }) => !!m).length;
+      }
+    ), M = () => {
+      o.value ? o.value = !1 : o.value = !0;
+    }, I = (y) => {
+      var k, q, ae;
+      const m = E(l.value).find((ue) => ue.field === y.field).count;
+      return typeof y.type == "string" && // Type guard to avoid casting
+      y.type.includes("BentoSelect") && ((k = y.options) != null && k.multiple) && m === ((ae = (q = y.options) == null ? void 0 : q.listboxItems) == null ? void 0 : ae.length) ? v("all") : m === null ? null : b(m);
+    }, B = (y, m) => {
+      d.value = l.value.findIndex(
+        (k) => k.label === y && k.field === m
+      );
+    }, J = () => {
+      i.value = "";
+    }, z = () => {
+      o.value = !1, l.value = e.value, J(), H();
+    }, ee = (y) => {
+      const m = l.value.map(({ value: k, ...q }, ae) => ae === d.value ? { value: y.value, ...q } : { value: k, ...q });
+      l.value = m;
+    }, S = () => {
+      ee({
+        field: U.value.field,
+        label: U.value.label,
+        type: U.value.type,
+        value: void 0
+      });
+    }, f = () => {
+      l.value = e.value.map(({ value: y, ...m }) => ({
+        ...m,
+        value: void 0
+      }));
+    }, r = () => {
+      n(je.INPUT, l.value), o.value = !1;
+    }, O = p(
+      () => JSON.stringify(l.value) === JSON.stringify(e.value)
+    ), Y = p(() => [
+      {
+        title: v("applyAll"),
+        disabled: O.value,
+        event: r
+      },
+      {
+        title: v("cancel"),
+        event: z
+      },
+      {
+        title: v("clearAll"),
+        disabled: !V.value,
+        event: f
+      }
+    ]);
+    return {
+      // Values
+      allFiltersModalUniqueId: s,
+      allFiltersModalFiltersSection: t,
+      allFiltersModalFilterButtons: $,
+      numberOfActiveFilters: V,
+      isEmptyResultForSearchFilter: _,
+      isModalOpen: o,
+      isClearButtonDisabled: h,
+      activeFilters: g,
+      otherFilters: P,
+      modalActions: Y,
+      selectedFilter: U,
+      selectedFilterRef: a,
+      searchTerm: i,
+      // Methods
+      onClickAllFiltersModal: M,
+      getFilterCount: I,
+      cancel: z,
+      selectFilter: B,
+      clearFilter: S,
+      updateFilter: ee,
+      onSearchbarClear: J,
+      onKeydownRight: () => {
+        Zt(1, a.value.$el).focus();
+      },
+      onKeydownLeft: () => {
+        $.value[U.value.label].$el.focus();
+      },
+      // Translations
+      t: v
+    };
+  }
+}), fa = { class: "b-all-filters-modal" }, va = {
+  key: 0,
+  class: "b-all-filters-modal__empty-search-message"
+}, ma = {
+  key: 1,
+  class: "b-all-filters-modal__filters-section"
+}, ya = ["aria-labelledby"], ha = {
+  key: 2,
+  class: "b-all-filters-modal__filters-section"
+}, Fa = ["aria-labelledby"], ga = { class: "b-all-filters-modal__selected-filter-text" }, Sa = { class: "b-all-filters-modal__selected-filter-component" }, Ca = { class: "b-all-filters-modal__clear-button" };
+function Ba(e, n, l, s, t, o) {
+  const d = N("sliders-icon"), a = N("filter-bar-button"), i = N("bento-search-bar"), v = N("bento-typography"), b = N("all-filters-modal-button"), A = N("bento-button"), $ = N("bento-modal");
+  return F(), G("div", fa, [
+    R(a, {
+      "is-filter-open": e.isModalOpen,
+      "applied-filters-count": e.numberOfActiveFilters,
+      "no-applied-state-styles": "",
+      onClick: e.onClickAllFiltersModal
+    }, {
+      iconLeft: C(() => [
+        R(d, { "aria-hidden": "true" })
+      ]),
+      default: C(() => [
+        X(x(e.t("allFilters")) + " ", 1)
+      ]),
+      _: 1
+    }, 8, ["is-filter-open", "applied-filters-count", "onClick"]),
+    R($, {
+      class: "'b-all-filters-modal__modal'",
+      "is-open": e.isModalOpen,
+      "with-column-layout": !0,
+      size: "large",
+      actions: e.modalActions,
+      "is-dismissible": !1,
+      "hide-close-button": "",
+      onCloseModal: e.cancel
+    }, {
+      default: C(() => [
+        X(x(e.t("allFilters")), 1)
+      ]),
+      "content-col-1": C(() => [
+        W("div", {
+          ref: "allFiltersModalFiltersSection",
+          class: "b-all-filters-modal__filters",
+          onKeydown: n[1] || (n[1] = me((...c) => e.onKeydownRight && e.onKeydownRight(...c), ["right"]))
+        }, [
+          R(i, {
+            class: "b-all-filters-modal__search-bar",
+            value: e.searchTerm,
+            "input-field-aria-label": e.t("searchBar").toString(),
+            onInput: n[0] || (n[0] = (c) => e.searchTerm = c),
+            onClear: e.onSearchbarClear
+          }, null, 8, ["value", "input-field-aria-label", "onClear"]),
+          e.isEmptyResultForSearchFilter ? (F(), G("div", va, [
+            R(v, { el: "span" }, {
+              default: C(() => [
+                X(x(e.t("noFiltersMatchThisSearch")), 1)
+              ]),
+              _: 1
+            })
+          ])) : Z("", !0),
+          e.activeFilters.length ? (F(), G("div", ma, [
+            R(v, {
+              id: `active-filters-${e.allFiltersModalUniqueId}`,
+              class: "b-all-filters-modal__filters-section-title",
+              el: "span",
+              variant: "caption"
+            }, {
+              default: C(() => [
+                X(x(e.t("activeFilters")), 1)
+              ]),
+              _: 1
+            }, 8, ["id"]),
+            W("ul", {
+              class: "b-all-filters-modal__filters-list",
+              "aria-labelledby": `active-filters-${e.allFiltersModalUniqueId}`
+            }, [
+              (F(!0), G($e, null, ye(e.activeFilters, (c) => (F(), G("li", {
+                key: `${c.label}-${c.field}`
+              }, [
+                R(b, {
+                  ref_for: !0,
+                  ref: (g) => e.allFiltersModalFilterButtons[c.label] = g,
+                  label: c.label,
+                  "applied-filters-count": e.getFilterCount(c),
+                  "is-filter-open": e.selectedFilter.label === c.label,
+                  disabled: c.disabled,
+                  onClick: (g) => e.selectFilter(c.label, c.field)
+                }, null, 8, ["label", "applied-filters-count", "is-filter-open", "disabled", "onClick"])
+              ]))), 128))
+            ], 8, ya)
+          ])) : Z("", !0),
+          e.otherFilters.length ? (F(), G("div", ha, [
+            e.activeFilters.length ? (F(), w(v, {
+              key: 0,
+              id: `other-filters-${e.allFiltersModalUniqueId}`,
+              class: "b-all-filters-modal__filters-section-title",
+              el: "span",
+              variant: "caption"
+            }, {
+              default: C(() => [
+                X(x(e.t("otherFilters")), 1)
+              ]),
+              _: 1
+            }, 8, ["id"])) : Z("", !0),
+            W("ul", {
+              class: "b-all-filters-modal__filters-list",
+              "aria-labelledby": `other-filters-${e.allFiltersModalUniqueId}`
+            }, [
+              (F(!0), G($e, null, ye(e.otherFilters, (c) => (F(), G("li", {
+                key: `${c.label}-${c.field}`
+              }, [
+                R(b, {
+                  ref_for: !0,
+                  ref: (g) => e.allFiltersModalFilterButtons[c.label] = g,
+                  label: c.label,
+                  disabled: c.disabled,
+                  "applied-filters-count": e.getFilterCount(c),
+                  "is-filter-open": e.selectedFilter.label === c.label,
+                  onClick: (g) => e.selectFilter(c.label, c.field)
+                }, null, 8, ["label", "disabled", "applied-filters-count", "is-filter-open", "onClick"])
+              ]))), 128))
+            ], 8, Fa)
+          ])) : Z("", !0)
+        ], 544)
+      ]),
+      "content-col-2": C(() => [
+        W("div", {
+          class: "b-all-filters-modal__selected-filter-content",
+          onKeydown: n[2] || (n[2] = me((...c) => e.onKeydownLeft && e.onKeydownLeft(...c), ["left"]))
+        }, [
+          W("div", ga, [
+            R(v, {
+              el: "div",
+              variant: "title",
+              medium: ""
+            }, {
+              default: C(() => [
+                X(x(e.selectedFilter.label), 1)
+              ]),
+              _: 1
+            }),
+            e.selectedFilter.description ? (F(), w(v, {
+              key: 0,
+              el: "div",
+              variant: "body",
+              wide: ""
+            }, {
+              default: C(() => [
+                X(x(e.selectedFilter.description), 1)
+              ]),
+              _: 1
+            })) : Z("", !0)
+          ]),
+          W("div", Sa, [
+            (F(), w(Oe(e.selectedFilter.type), {
+              ref: "selectedFilterRef",
+              key: e.selectedFilter.field,
+              field: e.selectedFilter.field,
+              label: e.selectedFilter.label,
+              options: e.selectedFilter.options,
+              value: e.selectedFilter.value,
+              "default-value": e.selectedFilter.defaultValue,
+              "only-slot": !0,
+              disabled: e.selectedFilter.disabled,
+              onInput: e.updateFilter
+            }, null, 40, ["field", "label", "options", "value", "default-value", "disabled", "onInput"]))
+          ]),
+          W("div", Ca, [
+            R(A, {
+              variant: "secondary",
+              disabled: e.isClearButtonDisabled,
+              onClick: e.clearFilter
+            }, {
+              default: C(() => [
+                X(x(e.t("clear")), 1)
+              ]),
+              _: 1
+            }, 8, ["disabled", "onClick"])
+          ])
+        ], 32)
+      ]),
+      _: 1
+    }, 8, ["is-open", "actions", "onCloseModal"])
+  ]);
+}
+const Da = /* @__PURE__ */ le(ba, [["render", Ba], ["__scopeId", "data-v-cf3baf81"]]), Ut = {
+  "en-US": {
+    clearFilters: "Clear filters",
+    filtersHaveBeenCleared: "Filters have been cleared.",
+    filtersHaveBeenReset: "Filters have been reset.",
+    resetFilters: "Reset filters",
+    searchBar: "Search bar",
+    undo: "Undo"
+  },
+  "ja-JP": {
+    clearFilters: "フィルターをクリア",
+    filtersHaveBeenCleared: "フィルターをクリアしました",
+    filtersHaveBeenReset: "フィルターがリセットされました",
+    resetFilters: "フィルターのリセット",
+    searchBar: "検索バー",
+    undo: "元に戻す"
+  },
+  "pt-BR": {
+    clearFilters: "Limpar filtros",
+    filtersHaveBeenCleared: "Os filtros foram apagados",
+    filtersHaveBeenReset: "Os filtros foram redefinidos",
+    resetFilters: "Redefinir filtros",
+    searchBar: "Barra de pesquisa",
+    undo: "Desfazer"
+  }
+}, Aa = {
+  key: 0,
+  class: "b-filter-bar__search-external-container"
+}, Ta = { key: 0 }, Ia = {
+  i18n: { messages: Ut },
+  name: "bento-filter-bar",
+  components: {
+    BentoBooleanFilter: Et,
+    BentoDateFilter: Ct,
+    BentoDateRangeFilter: Bt,
+    BentoInputFilter: gt,
+    BentoInputWithDropdownFilter: St,
+    BentoRangeFilter: Lt,
+    BentoSelectAvatarFilter: Tt,
+    BentoSelectCountryFilter: _t,
+    BentoSelectCurrencyFilter: It,
+    BentoSelectFilter: De,
+    BentoSelectPaymentMethodFilter: $t,
+    BentoSelectTagFilter: Pt,
+    BentoTeleport: ct,
+    FixedScroller: dt
+  }
+}, _a = /* @__PURE__ */ Q({
+  ...Ia,
+  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 },
+    value: { default: () => [] },
+    filterValuesObject: { default: void 0 }
+  },
+  emits: [
+    Se.INPUT,
+    Se.UPDATE_FILTER_VALUES_OBJECT,
+    Se.UPDATE_FILTER_VALUES_ARRAY,
+    Ae.CLEAR,
+    Ae.INPUT,
+    Ae.UPDATE
+  ],
+  setup(e, { expose: n, emit: l }) {
+    const s = e, t = l, { t: o } = pe({ messages: Ut }), d = K(null), a = p(
+      () => {
+        var S, f;
+        return (f = ((S = s.config) == null ? void 0 : S.length) > 0 ? s.config : s.value) == null ? void 0 : f.map((r) => {
+          var Y;
+          let O = (Y = s.filterValues.find(({ field: u }) => u === r.field)) == null ? void 0 : Y.value;
+          return s.filterValuesObject && r.field in s.filterValuesObject && (O = s.filterValuesObject[r.field]), O === void 0 && (O = (r == null ? void 0 : r.value) === void 0 && (r == null ? void 0 : r.defaultValue) !== void 0 ? r == null ? void 0 : r.defaultValue : r == null ? void 0 : r.value), { ...r, value: O !== void 0 ? O : r == null ? void 0 : r.value };
+        });
+      }
+    ), { addToast: i } = kt(), { screenLayoutComponent: v, showSearchbarInsideContainer: b, isOneLineLayout: A } = bl(
+      d,
+      te(s, "containerSizeLayout")
+    ), $ = p(() => ({
+      "b-filter-bar__fixed-scroller": A.value,
+      "b-filter-bar__container": !A.value
+      // Multi-line
+    })), c = p(() => ({
+      "b-filter-bar__scroller-content": A.value,
+      "b-filter-bar__filters": !A.value
+      // Multi-line
+    })), g = p(() => {
+      var S;
+      return ((S = s.search) == null ? void 0 : S.inputFieldAriaLabel) || o("searchBar");
+    }), P = p(() => {
+      if (!s.search)
+        return;
+      const { debounceTime: S, disabled: f, inputFieldAriaLabel: r, hint: O, placeholder: Y } = s.search;
+      return { debounceTime: S, disabled: f, inputFieldAriaLabel: r, hint: O, placeholder: Y };
+    }), _ = p(() => a.value.some(
+      ({ visible: f }) => f != null
+    ) ? a.value.some(({ visible: f }) => !f) : !1), U = p(
+      () => a.value.filter(({ defaultValue: S }) => S !== void 0)
+    ), H = p(() => a.value.some(
+      ({ visible: f }) => f != null
+    ) ? a.value.filter(
+      ({ defaultValue: f, visible: r, value: O }) => (
+        // eslint-disable-next-line eqeqeq
+        f === void 0 && r || s.showAppliedHiddenFilters && O != null
+      )
+    ) : a.value.filter(
+      ({ defaultValue: f, value: r }) => (
+        // eslint-disable-next-line eqeqeq
+        f === void 0 || s.showAppliedHiddenFilters && r != null
+      )
+    )), E = p(() => s.searchTerm != null), j = p(
+      () => a.value.filter(({ defaultValue: S }) => S == null).some(({ value: S }) => S != null)
+    ), h = p(() => U.value.length === 0 && j.value), V = p(() => U.value.length === 0 ? !1 : !a.value.filter(({ defaultValue: f }) => f !== void 0 || f !== null).every(({ value: f, defaultValue: r }) => JSON.stringify(f) === JSON.stringify(r)) || j.value), M = (S) => {
+      t(Se.INPUT, S), t(
+        Se.UPDATE_FILTER_VALUES_ARRAY,
+        S == null ? void 0 : S.filter(({ value: f }) => f !== null || f !== void 0).map(({ field: f, value: r }) => ({ field: f, value: r }))
+      ), t(
+        Se.UPDATE_FILTER_VALUES_OBJECT,
+        S == null ? void 0 : S.filter(({ value: f }) => f !== null || f !== void 0).reduce((f, r) => (f[r.field] = r.value, f), {})
+      );
+    }, I = (S) => {
+      const f = a.value.findIndex(
+        (O) => O.field === S.field
+      ), r = a.value.slice();
+      r[f].value = S.value, M(r);
+    }, B = () => {
+      const S = a.value.slice(), f = a.value.map(({ value: r, ...O }) => ({
+        ...O,
+        value: void 0
+      }));
+      i({
+        text: o("filtersHaveBeenCleared"),
+        action: {
+          handler: () => M(S),
+          text: o("undo")
+        }
+      }), M(f);
+    }, J = () => {
+      const S = a.value.slice(), f = a.value.map(({ defaultValue: r, ...O }) => ({
+        ...O,
+        defaultValue: r,
+        value: r
+      }));
+      i({
+        text: o("filtersHaveBeenReset"),
+        action: {
+          handler: () => M(S),
+          text: o("undo")
+        }
+      }), M(f);
+    }, z = (S) => {
+      t(Ae.INPUT, S), t(Ae.UPDATE, S);
+    }, ee = () => {
+      t(Ae.CLEAR);
+    };
+    return n({ isClearAllVisible: h, clearAllFilters: B, isResetAllVisible: V, resetAllFilters: J }), (S, f) => (F(), G("div", {
+      ref_key: "filterBarRef",
+      ref: d,
+      class: "b-filter-bar"
+    }, [
+      !T(b) && E.value ? (F(), G("div", Aa, [
+        R(ke, re({ class: "b-filter-bar__search-bar" }, P.value, {
+          "input-field-aria-label": g.value,
+          value: S.searchTerm,
+          condensed: "",
+          onInput: z,
+          onClear: ee
+        }), null, 16, ["input-field-aria-label", "value"])
+      ])) : Z("", !0),
+      (F(), w(Oe(T(v)), {
+        class: de($.value),
+        condensed: ""
+      }, {
+        default: C(() => [
+          W("div", {
+            class: de(c.value)
+          }, [
+            T(b) && E.value ? (F(), G("div", Ta, [
+              R(ke, re({ class: "b-filter-bar__search-bar" }, P.value, {
+                "input-field-aria-label": g.value,
+                value: S.searchTerm,
+                condensed: "",
+                onInput: z,
+                onClear: ee
+              }), null, 16, ["input-field-aria-label", "value"])
+            ])) : Z("", !0),
+            U.value.length ? (F(!0), G($e, { key: 1 }, ye(U.value, (r) => (F(), w(Oe(r.type), {
+              key: r.field,
+              field: r.field,
+              label: r.label,
+              disabled: r == null ? void 0 : r.disabled,
+              options: r.options,
+              value: r.value,
+              "default-value": r.defaultValue,
+              onUpdate: I
+            }, null, 40, ["field", "label", "disabled", "options", "value", "default-value"]))), 128)) : Z("", !0),
+            (F(!0), G($e, null, ye(H.value, (r) => (F(), w(Oe(r.type), {
+              key: r.field,
+              field: r.field,
+              label: r.label,
+              disabled: r == null ? void 0 : r.disabled,
+              options: r.options,
+              value: r.value,
+              onUpdate: I
+            }, null, 40, ["field", "label", "disabled", "options", "value"]))), 128)),
+            _.value ? (F(), w(Da, {
+              key: 2,
+              class: "b-filter-bar__all-filters-modal",
+              value: a.value,
+              onInput: M
+            }, null, 8, ["value"])) : Z("", !0),
+            h.value ? (F(), w(T(Ee), {
+              key: 3,
+              class: "b-filter-bar__clear-all",
+              onClick: B
+            }, {
+              iconLeft: C(() => [
+                R(T(Qe), { "aria-hidden": "true" })
+              ]),
+              default: C(() => [
+                X(x(T(o)("clearFilters")) + " ", 1)
+              ]),
+              _: 1
+            })) : Z("", !0),
+            V.value ? (F(), w(T(Ee), {
+              key: 4,
+              class: "b-filter-bar__reset-all",
+              onClick: J
+            }, {
+              iconLeft: C(() => [
+                R(T(Qe), { "aria-hidden": "true" })
+              ]),
+              default: C(() => [
+                X(x(T(o)("resetFilters")) + " ", 1)
+              ]),
+              _: 1
+            })) : Z("", !0)
+          ], 2)
+        ]),
+        _: 1
+      }, 8, ["class"]))
+    ], 512));
+  }
+}), fo = /* @__PURE__ */ le(_a, [["__scopeId", "data-v-08825006"]]);
+export {
+  fo as B,
+  Be as a,
+  D as b,
+  Se as c,
+  se as d
+};
+//# sourceMappingURL=filter-bar.nX73NKNC.js.map