@adyen/bento-vue3 1.55.1 → 1.56.0

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

@@ -0,0 +1,2886 @@
+import { defineComponent as z, useSlots as Le, useAttrs as Et, computed as c, ref as M, createBlock as E, openBlock as v, unref as C, normalizeClass as ie, withCtx as y, createElementVNode as j, renderSlot as re, createCommentVNode as Q, createVNode as $, createTextVNode as G, toDisplayString as Z, watch as ue, createElementBlock as J, nextTick as st, resolveComponent as P, withKeys as be, toRef as x, onBeforeUpdate as Oe, provide as it, mergeProps as oe, Fragment as Ae, reactive as Lt, createSlots as De, renderList as fe, normalizeProps as $e, guardReactiveProps as Pe, onMounted as rt, resolveDynamicComponent as Te } from "vue";
+import { B as Ue, b as he } from "./search-bar.DlVK3bBQ.js";
+import { u as Ot } from "./use-bento-toast-controller.D3LA1FCd.js";
+import { u as de } from "./i18n.B6g5VX0q.js";
+import { b as Rt } from "./index.BzJQl-2M.js";
+import { F as ut } from "./fixed-scroller.DsTyshyt.js";
+import { _ as wt } from "./modal.vue_vue_type_script_setup_true_lang.Dr847POU.js";
+import { g as Vt } from "./base-modal.qhldLovE.js";
+import { B as kt } from "./button.BHZgsGkp.js";
+import { B as Je, I as Nt, b as Mt } from "./popover.R5OM_tFu.js";
+import { B as Ht } from "./directive.Cbdox5VL.js";
+import { B as jt } from "./events.FNmSWp_P.js";
+import { g as ke } from "./generate-uid.NJ8tVoha.js";
+import { u as Kt } from "./use-click-outside.BnhTgpSt.js";
+import { C as qt } from "./cross-small.CFrBIeYK.js";
+import { _ as ee } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import { B as dt, a as ze } from "./base-button.DdNFlbgH.js";
+import { B as pe, d as Ne } from "./typography.DN5eC5ch.js";
+import { u as ct } from "./use-has-slot.B7eQSabc.js";
+import { u as pt } from "./aria-label.CaUURpnB.js";
+import { g as bt } from "./get-slot-text.DQlZEsId.js";
+import { B as ft } from "./teleport.CfGWjxe2.js";
+import { B as Jt } from "./radio-group.muZVaVEm.js";
+import { t as Se } from "./chip.DbhxDQiT.js";
+import { B as Me } from "./input-field.Cr1r2STY.js";
+import { u as vt, B as zt } from "./dropdown.CVa4_qCe.js";
+import { g as Yt } from "./focus-trap.D9cfQpl7.js";
+import { a as Wt, C as Gt } from "./chevron-up.-0oLlHmh.js";
+/* empty css              */
+import { B as He } from "./divider.qUOSAbU6.js";
+import { c as Ye, b as Zt } from "./use-cached-selected-values.DHUa2Emx.js";
+import { L as mt } from "./listbox-option-tag.BJh2kEN1.js";
+import { B as Qt } from "./payment-method.eazefwm6.js";
+import { u as Xt } from "./use-country-items.4kZgVg_l.js";
+import { B as xt } from "./avatar.B0-9jC6H.js";
+import { D as el, B as tl, i as we, b as ll } from "./date-range-picker.uGwtO7SA.js";
+import { g as yt } from "./get-date-locale.BN8xEjY0.js";
+import { D as We } from "./date-input.BqBdAO1E.js";
+import { a as al, i as nl } from "./calendar.Dymq4e0Y.js";
+import { f as ye } from "./date.CKXySBQv.js";
+import { B as ol } from "./button-actions.ODJKaCW7.js";
+import { B as sl } from "./date-picker.8jgg3MJm.js";
+import { R as Ge } from "./refresh.C20ROVDS.js";
+import "../assets/filter-bar.css";
+var g = /* @__PURE__ */ ((e) => (e.INPUT = "input", e.UPDATE = "update", e))(g || {}), _e = /* @__PURE__ */ ((e) => (e.INPUT = "input", e.UPDATE_FILTER_VALUES = "update:filter-values", e))(_e || {}), ne = /* @__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))(ne || {});
+const il = { class: "b-filter-bar-button__container" }, rl = { class: "b-filter-bar-button__label-container" }, ul = {}, dl = /* @__PURE__ */ z({
+  ...ul,
+  __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 t = e, r = n, l = Le(), a = Et(), i = ct(l), s = c(() => l.default ? bt(l)("default") : null), u = c(() => !i("default") && i("iconLeft")), p = pt({ ariaLabel: s }), f = M(null), h = c(() => {
+      var I;
+      return {
+        "aria-controls": (I = a["aria-controls"]) == null ? void 0 : I.toString()
+      };
+    }), _ = c(
+      () => (t.appliedFiltersCount || t.secondaryLabel || t.isPersistentFilter) && !t.noAppliedStateStyles
+    ), d = c(() => ({
+      "b-filter-bar-button--applied": _.value,
+      "b-filter-bar-button--filter-open": t.isFilterOpen && !_.value,
+      "b-filter-bar-button--filter-open-applied": t.isFilterOpen && _.value,
+      "b-filter-bar-button--with-secondary-label": t.secondaryLabel,
+      "b-filter-bar-button--with-counter": t.appliedFiltersCount,
+      "b-filter-bar-button--icon-only": u.value
+    })), A = (I) => {
+      I.preventDefault(), t.disabled || r("click", I);
+    };
+    return (I, T) => (v(), E(C(dt), {
+      ref_key: "filterBarButtonRef",
+      ref: f,
+      class: ie(["b-filter-bar-button", d.value]),
+      disabled: e.disabled,
+      "aria-label": C(p),
+      "aria-controls": h.value["aria-controls"],
+      type: "button",
+      onClick: A
+    }, {
+      iconRight: y(() => [
+        e.appliedFiltersCount && !u.value ? (v(), E(C(pe), {
+          key: 0,
+          class: "b-filter-bar-button__counter",
+          el: "span",
+          variant: "body",
+          stronger: ""
+        }, {
+          default: y(() => [
+            G(Z(e.appliedFiltersCount), 1)
+          ]),
+          _: 1
+        })) : Q("", !0)
+      ]),
+      default: y(() => [
+        j("div", il, [
+          C(i)("iconLeft") ? re(I.$slots, "iconLeft", { key: 0 }, void 0, !0) : Q("", !0),
+          j("div", rl, [
+            $(C(pe), {
+              el: "span",
+              variant: "body",
+              stronger: "",
+              class: "b-filter-bar-button__label"
+            }, {
+              default: y(() => [
+                j("span", null, [
+                  re(I.$slots, "default", {}, void 0, !0)
+                ]),
+                e.secondaryLabel && !u.value ? (v(), E(C(pe), {
+                  key: 0,
+                  el: "span",
+                  variant: "body",
+                  stronger: "",
+                  class: "b-filter-bar-button__label"
+                }, {
+                  default: y(() => T[0] || (T[0] = [
+                    G(":")
+                  ])),
+                  _: 1
+                })) : Q("", !0)
+              ]),
+              _: 3
+            }),
+            e.secondaryLabel && !u.value ? (v(), E(C(pe), {
+              key: 0,
+              el: "span",
+              variant: "body",
+              stronger: "",
+              class: "b-filter-bar-button__secondary-label"
+            }, {
+              default: y(() => [
+                G(Z(e.secondaryLabel), 1)
+              ]),
+              _: 1
+            })) : Q("", !0)
+          ])
+        ])
+      ]),
+      _: 3
+    }, 8, ["class", "disabled", "aria-label", "aria-controls"]));
+  }
+}), Ee = /* @__PURE__ */ ee(dl, [["__scopeId", "data-v-3556e231"]]), Ze = 430, Qe = 700;
+function cl(e, n) {
+  const t = M("div"), r = M(!1), l = M(0), a = c(() => !(l.value < Ze && n.value.small === "multi-line"));
+  function i() {
+    r.value = !1, t.value = "div";
+  }
+  function s() {
+    r.value = !0, t.value = ut;
+  }
+  function u() {
+    l.value > Qe || l.value < Qe && l.value >= Ze && n.value.medium === "multi-line" ? i() : s();
+  }
+  return ue(() => n.value, u), Rt(e, (p) => {
+    l.value = p[0].contentRect.width, u();
+  }), {
+    screenLayoutComponent: t,
+    showSearchbarInsideContainer: a,
+    isOneLineLayout: r
+  };
+}
+const pl = {}, bl = /* @__PURE__ */ z({
+  ...pl,
+  __name: "filter-bar-button-group",
+  props: {
+    isActive: { type: Boolean, default: !1 },
+    skipGrouping: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    const n = e, t = c(() => ({
+      "b-filter-bar-button-group--active": n.isActive,
+      "b-filter-bar-button-group--grouped": !n.skipGrouping
+    }));
+    return (r, l) => (v(), J("div", {
+      class: ie(["b-filter-bar-button-group", t.value])
+    }, [
+      re(r.$slots, "default", {}, void 0, !0)
+    ], 2));
+  }
+}), fl = /* @__PURE__ */ ee(bl, [["__scopeId", "data-v-5b52b43a"]]);
+var se = /* @__PURE__ */ ((e) => (e.APPLY = "apply", e.CLEAR = "clear", e.OPEN = "open", e.CLOSE = "close", e.RESET = "reset", e))(se || {});
+const Xe = {
+  "en-US": {
+    apply: "Apply",
+    clear: "Clear",
+    clearFilter: "Clear filter {function}",
+    filterButton: "Filter by {function}",
+    filtersHaveBeenCleared: "Filters have been cleared",
+    reset: "Reset",
+    resetFilter: "Reset filter {function}"
+  },
+  "ja-JP": {
+    apply: "適用",
+    clear: "クリア",
+    reset: "リセット"
+  },
+  "pt-BR": {
+    apply: "Aplicar",
+    clear: "Limpar",
+    reset: "Reiniciar"
+  }
+}, vl = z({
+  i18n: { messages: Xe },
+  name: "bento-base-filter",
+  components: {
+    BentoPopover: Je,
+    BentoTeleport: ft,
+    FilterBarButton: Ee,
+    FilterBarButtonGroup: fl,
+    CrossSmallIcon: qt
+  },
+  directives: { BentoClickOutsideDirective: Ht },
+  props: {
+    /**
+     * Total count of applied filters
+     */
+    appliedFiltersCount: { type: [String, Number], default: null },
+    /**
+     * Overrides the label of the popover visibility toggle button text.
+     */
+    buttonLabel: { type: String, default: void 0 },
+    /**
+     * Sets the secondary label text of the popover visibility toggle button text.
+     */
+    buttonSecondaryLabel: { type: String, default: void 0 },
+    /**
+     * Disables the filter from being interacted with.
+     */
+    disabled: { type: Boolean, default: !1 },
+    /**
+     * Default value of the filter to reset to.
+     */
+    defaultValue: {
+      type: [Object, Number, Boolean, Array, String, Date],
+      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 },
+    /**
+     * Allows to handle the controls (apply/clear) from outside
+     * of the component
+     */
+    controlled: { type: Boolean, default: !1 },
+    /**
+     * Disable the "apply" button
+     */
+    disableApplyButton: { type: Boolean, default: !1 },
+    /**
+     * Disable the secondary button action.
+     */
+    disableSecondaryButton: { type: Boolean, default: !1 },
+    /**
+     * 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 },
+    /**
+     * Sets the size of the container to fit its content
+     */
+    fitContent: Je.props.fitContent,
+    /**
+     * The current value of the filter, used for v-model.
+     */
+    value: {
+      type: [Object, Number, Boolean, Array, String, Date],
+      default: void 0
+    }
+  },
+  emits: [
+    se.APPLY,
+    se.CLEAR,
+    se.OPEN,
+    se.CLOSE,
+    se.RESET
+  ],
+  setup(e, { emit: n }) {
+    const { t } = de({ messages: Xe }), r = ke("base-filter-popover"), l = M(!1), a = M(null), i = M(null), s = c(() => e.defaultValue !== null), u = c(() => s.value ? JSON.stringify(e.value) !== JSON.stringify(e.defaultValue) : e.appliedFiltersCount || e.buttonSecondaryLabel), p = c(
+      () => s.value ? t("filterButton", {
+        function: e.label
+      }) : h.value
+    ), f = c(
+      () => s.value ? t("resetFilter", {
+        function: h.value
+      }) : t("clearFilter", {
+        function: h.value
+      })
+    ), h = c(() => e.buttonLabel || e.label), _ = async () => {
+      var F, R;
+      await st(), (R = (F = a.value) == null ? void 0 : F.$el) == null || R.focus();
+    }, d = () => {
+      l.value && (l.value = !1, _(), n(se.CLOSE));
+    }, A = () => {
+      s.value ? n(se.RESET) : n(se.CLEAR), _();
+    }, I = () => {
+      d(), A();
+    }, T = () => d(), V = () => {
+      l.value ? d() : (l.value = !0, n(se.OPEN));
+    }, w = () => {
+      d(), n(se.APPLY);
+    }, U = c(() => [
+      {
+        title: t("apply"),
+        event: w,
+        disabled: e.disableApplyButton
+      },
+      {
+        title: s.value ? t("reset") : t("clear"),
+        event: I,
+        disabled: e.disableSecondaryButton
+      }
+    ]);
+    return ue(
+      () => l.value,
+      (F, R) => {
+        var k, N;
+        !F && R && (N = (k = a.value) == null ? void 0 : k.filterBarButtonRef) != null && N.bentoBaseButtonRef && a.value.filterBarButtonRef.bentoBaseButtonRef.focus();
+      }
+    ), Kt(i, T, { ignore: [a] }), {
+      // Values
+      actions: U,
+      popoverId: r,
+      isFilterOpen: l,
+      isPersistentFilter: s,
+      isValueChanged: u,
+      computedAriaLabel: p,
+      computedButtonText: h,
+      computedClearButtonLabel: f,
+      // Enums
+      BentoTooltipPosition: jt,
+      // Events
+      onClickFilter: V,
+      onClickApply: w,
+      onClickSecondaryAction: I,
+      onClickOutside: T,
+      closePopover: d,
+      resetFilter: A,
+      // Refs
+      filterButtonRef: a,
+      popoverRef: i
+    };
+  }
+}), ml = { key: 0 }, yl = {
+  key: 1,
+  class: "b-base-filter"
+};
+function Fl(e, n, t, r, l, a) {
+  const i = P("filter-bar-button"), s = P("cross-small-icon"), u = P("filter-bar-button-group"), p = P("bento-popover"), f = P("bento-teleport");
+  return e.onlySlot ? (v(), J("div", ml, [
+    re(e.$slots, "default", {}, void 0, !0)
+  ])) : (v(), J("div", yl, [
+    $(u, {
+      "is-active": e.isFilterOpen,
+      "skip-grouping": !e.isValueChanged
+    }, {
+      default: y(() => [
+        $(i, {
+          ref: "filterButtonRef",
+          "aria-label": e.computedAriaLabel,
+          "aria-controls": e.isFilterOpen ? e.popoverId : null,
+          "applied-filters-count": e.appliedFiltersCount,
+          disabled: e.disabled,
+          "is-persistent-filter": e.isPersistentFilter,
+          "is-filter-open": e.isFilterOpen,
+          "secondary-label": e.buttonSecondaryLabel,
+          onClick: e.onClickFilter,
+          onKeydown: be(e.closePopover, ["esc"])
+        }, {
+          default: y(() => [
+            G(Z(e.computedButtonText), 1)
+          ]),
+          _: 1
+        }, 8, ["aria-label", "aria-controls", "applied-filters-count", "disabled", "is-persistent-filter", "is-filter-open", "secondary-label", "onClick", "onKeydown"]),
+        e.isValueChanged ? (v(), E(i, {
+          key: 0,
+          "applied-filters-count": e.appliedFiltersCount,
+          disabled: e.disabled,
+          "is-persistent-filter": e.isPersistentFilter,
+          "is-filter-open": e.isFilterOpen,
+          "secondary-label": e.buttonSecondaryLabel,
+          onClick: e.resetFilter
+        }, {
+          iconLeft: y(() => [
+            $(s, { "svg-title": e.computedClearButtonLabel }, null, 8, ["svg-title"])
+          ]),
+          _: 1
+        }, 8, ["applied-filters-count", "disabled", "is-persistent-filter", "is-filter-open", "secondary-label", "onClick"])) : Q("", !0)
+      ]),
+      _: 1
+    }, 8, ["is-active", "skip-grouping"]),
+    e.filterButtonRef ? (v(), E(f, { key: 0 }, {
+      default: y(() => [
+        e.filterButtonRef ? (v(), E(p, {
+          key: 0,
+          id: e.popoverId,
+          ref: "popoverRef",
+          class: "b-base-filter__popover",
+          divider: "",
+          open: e.isFilterOpen,
+          actions: e.controlled ? null : e.actions,
+          "actions-layout": "space-between",
+          "target-element": e.filterButtonRef,
+          title: e.controlled ? null : e.label,
+          "fit-content": e.fitContent,
+          position: "bottom-start",
+          "without-space": e.controlled,
+          "fallback-position": ["bottom-end"]
+        }, {
+          default: y(() => [
+            j("div", {
+              onKeydown: n[0] || (n[0] = be((...h) => e.closePopover && e.closePopover(...h), ["esc"]))
+            }, [
+              re(e.$slots, "default", {}, void 0, !0)
+            ], 32)
+          ]),
+          _: 3
+        }, 8, ["id", "open", "actions", "target-element", "title", "fit-content", "without-space"])) : Q("", !0)
+      ]),
+      _: 3
+    })) : Q("", !0)
+  ]));
+}
+const Fe = /* @__PURE__ */ ee(vl, [["render", Fl], ["__scopeId", "data-v-de3ab178"]]), gl = (e) => e instanceof Array, xe = (e) => gl(e) ? e.length === 0 || e.every((n) => n === "") : !e, et = (e, n) => JSON.stringify(e) === JSON.stringify(n), ve = (e, n) => {
+  const t = M(e.value);
+  ue(
+    () => e.value,
+    () => {
+      t.value = e.value;
+    }
+  );
+  const r = c(() => xe(e.value)), l = c(
+    () => n.value !== null ? et(n.value, e.value) : r.value
+  ), a = c(() => et(t.value, e.value) || xe(t.value) && r.value);
+  return {
+    internalFilterValue: t,
+    isSecondaryButtonDisabled: l,
+    isApplyButtonDisabled: a
+  };
+}, hl = {
+  name: "bento-input-filter"
+}, Sl = /* @__PURE__ */ z({
+  ...hl,
+  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 N, te;
+    const t = e, r = n, l = M(null), a = M((te = (N = t == null ? void 0 : t.options) == null ? void 0 : N.dropdown) == null ? void 0 : te.value), i = c(
+      () => {
+        var D, K;
+        return ((D = t == null ? void 0 : t.options) == null ? void 0 : D.variant) === "dropdown" && ((K = t == null ? void 0 : t.options) == null ? void 0 : K.dropdown) !== void 0;
+      }
+    ), s = c(
+      () => {
+        var D;
+        return i.value ? { ...(D = t == null ? void 0 : t.options) == null ? void 0 : D.dropdown, value: a.value } : void 0;
+      }
+    ), u = c(() => {
+      var D;
+      return ((D = t == null ? void 0 : t.options) == null ? void 0 : D.variant) === "dropdown" ? "dropdown" : "default";
+    }), p = c(
+      () => {
+        var D;
+        return i.value ? (D = t.value) == null ? void 0 : D.inputValue : t == null ? void 0 : t.value;
+      }
+    ), { internalFilterValue: f, isSecondaryButtonDisabled: h, isApplyButtonDisabled: _ } = ve(
+      p,
+      x(t, "defaultValue")
+    ), d = c(() => t.label), A = c(() => Se(p.value, 12)), I = c(() => ({
+      "b-input-filter--only-slot": t.onlySlot
+    }));
+    Oe(() => {
+      f.value === "" && (f.value = null);
+    }), ue(l, () => {
+      var D;
+      (D = l.value) == null || D.focusInput();
+    });
+    const T = () => {
+      f.value = p.value;
+    }, V = () => {
+      !f.value && t.defaultValue !== null && (f.value = t.defaultValue), r("update", {
+        ...t,
+        value: i.value ? {
+          inputValue: f.value,
+          dropdownValue: a.value
+        } : f.value
+      });
+    }, w = () => r("update", { ...t, value: t.defaultValue }), U = () => {
+      f.value = null, V();
+    }, F = () => {
+      r("input", { ...t, value: f.value });
+    }, R = (D) => {
+      f.value = D;
+    }, k = (D) => {
+      a.value = D;
+    };
+    return it(Nt, i.value), ue(
+      () => t.options,
+      () => {
+        var D, K, q;
+        ((D = t.options) != null && D.dropdown || (K = t.options) != null && K.dropdownPosition || (q = t.options) != null && q.variant) && Ne(
+          '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 }
+    ), (D, K) => (v(), E(C(Fe), oe(D.$props, {
+      "button-label": d.value,
+      "button-secondary-label": A.value,
+      "disable-apply-button": C(_),
+      "disable-secondary-button": C(h),
+      "only-slot": D.onlySlot,
+      "popover-overflow-visible": i.value,
+      onApply: V,
+      onClear: U,
+      onOpen: T,
+      onReset: w
+    }), {
+      default: y(() => {
+        var q, X;
+        return [
+          j("div", {
+            class: ie(["b-input-filter", I.value]),
+            onKeydown: be(V, ["enter"]),
+            onInput: F
+          }, [
+            $(C(Me), {
+              ref_key: "inputTextRef",
+              ref: l,
+              dropdown: s.value,
+              "dropdown-position": (q = D.options) == null ? void 0 : q.dropdownPosition,
+              placeholder: (X = D.options) == null ? void 0 : X.placeholder,
+              variant: u.value,
+              value: C(f),
+              onInput: R,
+              onDropdownInput: k
+            }, null, 8, ["dropdown", "dropdown-position", "placeholder", "variant", "value"])
+          ], 34)
+        ];
+      }),
+      _: 1
+    }, 16, ["button-label", "button-secondary-label", "disable-apply-button", "disable-secondary-button", "only-slot", "popover-overflow-visible"]));
+  }
+}), Ft = /* @__PURE__ */ ee(Sl, [["__scopeId", "data-v-3323f252"]]), Bl = {
+  name: "bento-input-with-dropdown-filter"
+}, Cl = /* @__PURE__ */ z({
+  ...Bl,
+  props: {
+    disabled: { type: Boolean },
+    defaultValue: { default: void 0 },
+    field: {},
+    label: {},
+    onlySlot: { type: Boolean, default: !1 },
+    options: { default: void 0 },
+    value: { default: void 0 }
+  },
+  emits: [g.INPUT, g.UPDATE],
+  setup(e, { emit: n }) {
+    const t = e, r = n, l = M(null), { internalFilterValue: a, isSecondaryButtonDisabled: i, isApplyButtonDisabled: s } = ve(x(t, "value"), x(t, "defaultValue")), u = c(() => t.label), p = c(() => {
+      var F;
+      return Se((F = t.value) == null ? void 0 : F.inputValue, 12);
+    }), f = c(() => {
+      var F, R;
+      return {
+        ...((F = t.options) == null ? void 0 : F.dropdown) || {},
+        value: (R = a.value) == null ? void 0 : R.dropdownValue
+      };
+    }), h = c(() => ({
+      "b-input-with-dropdown-filter--only-slot": t.onlySlot
+    })), _ = c(() => {
+      var R, k;
+      return !(!!((R = a.value) != null && R.inputValue) && !!((k = a.value) != null && k.dropdownValue)) || s.value;
+    });
+    Oe(() => {
+      var F;
+      ((F = a.value) == null ? void 0 : F.inputValue) === "" && (a.value = { ...a.value, inputValue: void 0 });
+    }), ue(l, () => {
+      var F;
+      (F = l.value) == null || F.focusInput();
+    });
+    const d = () => {
+      a.value = t.value;
+    }, A = () => {
+      var F;
+      !((F = a.value) != null && F.inputValue) && t.defaultValue !== null && (a.value = { ...t.defaultValue }), r(g.UPDATE, {
+        ...t,
+        value: a.value
+      });
+    }, I = () => r(g.UPDATE, { ...t, value: t.defaultValue }), T = () => {
+      a.value = null, A();
+    }, V = () => {
+      r(g.INPUT, { ...t, value: a.value });
+    }, w = (F) => {
+      a.value = { ...a.value, inputValue: F };
+    }, U = (F) => {
+      a.value = { ...a.value, dropdownValue: F };
+    };
+    return it(Mt, !0), (F, R) => (v(), E(C(Fe), oe(F.$props, {
+      "button-label": u.value,
+      "button-secondary-label": p.value,
+      "disable-apply-button": _.value,
+      "disable-secondary-button": C(i),
+      "only-slot": F.onlySlot,
+      onApply: A,
+      onClear: T,
+      onOpen: d,
+      onReset: I
+    }), {
+      default: y(() => {
+        var k, N;
+        return [
+          j("div", {
+            class: ie(["b-input-with-dropdown-filter", h.value]),
+            onKeydown: be(A, ["enter"]),
+            onInput: V
+          }, [
+            $(C(Me), {
+              ref_key: "inputTextRef",
+              ref: l,
+              dropdown: f.value,
+              "dropdown-position": (k = F.options) == null ? void 0 : k.dropdownPosition,
+              variant: "dropdown",
+              value: (N = C(a)) == null ? void 0 : N.inputValue,
+              onInput: w,
+              onDropdownInput: U
+            }, null, 8, ["dropdown", "dropdown-position", "value"])
+          ], 34)
+        ];
+      }),
+      _: 1
+    }, 16, ["button-label", "button-secondary-label", "disable-apply-button", "disable-secondary-button", "only-slot"]));
+  }
+}), gt = /* @__PURE__ */ ee(Cl, [["__scopeId", "data-v-f096c58d"]]), _l = z({
+  name: "bento-date-filter",
+  components: {
+    BentoBaseFilter: Fe,
+    BentoDatePicker: sl,
+    BentoDivider: He,
+    Calendar: al
+  },
+  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
+     */
+    options: {
+      type: Object,
+      default: void 0
+    },
+    /**
+     * Current value of the filter
+     */
+    value: { type: Date, default: void 0 }
+  },
+  emits: [g.INPUT, g.UPDATE],
+  setup(e, { emit: n }) {
+    const { locale: t } = de(void 0, !0), r = yt(), { internalFilterValue: l, isSecondaryButtonDisabled: a, isApplyButtonDisabled: i } = ve(
+      x(e, "value"),
+      x(e, "defaultValue")
+    ), s = c(
+      () => e.value ? ye(e.value, "dd MMM, yyyy", {
+        locale: r[t.value.substring(0, 2)] || r.enUS
+      }) : null
+    ), u = c(() => e.label), p = c(() => s.value), f = () => {
+      n(g.UPDATE, { ...e, value: l.value });
+    }, h = () => {
+      l.value = null, f();
+    }, _ = () => {
+      l.value = e.defaultValue, f();
+    }, d = () => {
+      l.value = e.value;
+    }, A = (T) => {
+      l.value = T, n(g.INPUT, { ...e, value: l.value });
+    };
+    return {
+      // Values
+      internalFilterValue: l,
+      isApplyButtonDisabled: i,
+      isSecondaryButtonDisabled: a,
+      buttonLabel: u,
+      buttonSecondaryLabel: p,
+      // Events
+      clearFilter: h,
+      onDateSelected: A,
+      openFilter: d,
+      updateFilter: f,
+      resetFilter: _,
+      onDateInputSelected: (T) => {
+        l.value = T, A(T), f();
+      }
+    };
+  }
+}), Al = { class: "b-date-filter" };
+function Dl(e, n, t, r, l, a) {
+  const i = P("bento-date-picker"), s = P("bento-divider"), u = P("calendar"), p = P("bento-base-filter");
+  return v(), E(p, {
+    "button-label": e.buttonLabel,
+    "button-secondary-label": e.buttonSecondaryLabel,
+    disabled: e.disabled,
+    "default-value": e.defaultValue,
+    "disable-apply-button": e.isApplyButtonDisabled,
+    "disable-secondary-button": e.isSecondaryButtonDisabled,
+    field: e.field,
+    label: e.label,
+    "only-slot": e.onlySlot,
+    "fit-content": "",
+    onApply: e.updateFilter,
+    onClear: e.clearFilter,
+    onOpen: e.openFilter,
+    onReset: e.resetFilter
+  }, {
+    default: y(() => {
+      var f, h, _, d, A, I;
+      return [
+        e.onlySlot ? (v(), E(i, {
+          key: 0,
+          value: e.internalFilterValue,
+          "first-day-of-week": (f = e.options) == null ? void 0 : f.firstDayOfWeek,
+          "is-date-disabled": (h = e.options) == null ? void 0 : h.isDateDisabled,
+          variant: (_ = e.options) == null ? void 0 : _.variant,
+          onInput: e.onDateInputSelected
+        }, null, 8, ["value", "first-day-of-week", "is-date-disabled", "variant", "onInput"])) : (v(), J(Ae, { key: 1 }, [
+          $(s, { class: "b-date-filter__divider" }),
+          j("div", Al, [
+            $(u, {
+              "first-day-of-week": (d = e.options) == null ? void 0 : d.firstDayOfWeek,
+              "is-date-disabled": (A = e.options) == null ? void 0 : A.isDateDisabled,
+              "number-of-months": 1,
+              value: e.internalFilterValue,
+              variant: (I = e.options) == null ? void 0 : I.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", "onApply", "onClear", "onOpen", "onReset"]);
+}
+const ht = /* @__PURE__ */ ee(_l, [["render", Dl], ["__scopeId", "data-v-1e5e2fcf"]]), tt = {
+  "en-US": {
+    apply: "Apply",
+    clear: "Clear",
+    reset: "Reset"
+  },
+  "ja-JP": {
+    apply: "適用",
+    clear: "クリア",
+    reset: "リセット"
+  },
+  "pt-BR": {
+    apply: "Aplicar",
+    clear: "Limpar",
+    reset: "Reiniciar"
+  }
+}, Il = z({
+  i18n: { messages: tt },
+  name: "bento-date-range-filter",
+  components: {
+    BentoBaseFilter: Fe,
+    BentoButtonActions: ol,
+    BentoDateRangePicker: tl,
+    BentoTypography: pe,
+    BentoDivider: He,
+    DateRangePickerCalendar: el
+  },
+  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.
+     */
+    options: {
+      type: Object,
+      default: void 0
+    },
+    /**
+     * Current value of the filter
+     */
+    value: {
+      type: Object,
+      default: () => ({ startDate: void 0, endDate: void 0 })
+    }
+  },
+  emits: [g.INPUT, g.UPDATE],
+  setup(e, { emit: n }) {
+    var q, X, B, S;
+    const { locale: t, t: r } = de({ messages: tt }), l = yt(), { internalFilterValue: a, isSecondaryButtonDisabled: i, isApplyButtonDisabled: s } = ve(
+      x(e, "value"),
+      x(e, "defaultValue")
+    ), u = M(!1), p = (o) => o ? ye(o, We.NUMERIC_DATE_YEAR_FIRST, {
+      locale: l[t.value.substring(0, 2)] || l.enUS
+    }) : void 0, f = (o) => o ? ye(o, We.HOUR_MINUTE_SECONDS, {
+      locale: l[t.value.substring(0, 2)] || l.enUS
+    }) : "", h = M(null), _ = M(!1), d = Lt({
+      startDate: p((q = e.value) == null ? void 0 : q.startDate),
+      endDate: p((X = e.value) == null ? void 0 : X.endDate),
+      startTime: f((B = e.value) == null ? void 0 : B.startDate),
+      endTime: f((S = e.value) == null ? void 0 : S.endDate)
+    });
+    function A(o) {
+      return (o == null ? void 0 : o.length) !== void 0;
+    }
+    const I = c(() => {
+      var o, L, Y, m, b, O, H, W, ae;
+      if (!((o = e.value) != null && o.startDate) && !e.value.endDate)
+        return null;
+      if (A((L = e.options) == null ? void 0 : L.quickSelectRanges) && ((m = (Y = e.options) == null ? void 0 : Y.quickSelectRanges) == null ? void 0 : m.length) > 0) {
+        const ce = (O = (b = e.options) == null ? void 0 : b.quickSelectRanges) == null ? void 0 : O.find(({ value: me, data: le }) => {
+          if (a.value.range)
+            return me === a.value.range;
+          if (!(le != null && le.endDate))
+            we(le == null ? void 0 : le.startDate, a.value.startDate) && ll(a.value.endDate);
+          else
+            return we(le == null ? void 0 : le.startDate, a.value.startDate) && we(le == null ? void 0 : le.endDate, a.value.endDate);
+        });
+        if (ce)
+          return ce.label;
+      }
+      return nl((H = e.value) == null ? void 0 : H.startDate, (W = e.value) == null ? void 0 : W.endDate) && ((ae = e == null ? void 0 : e.options) != null && ae.allowTimeInput) ? `${ye(e.value.startDate, "dd MMM, yyyy HH:mm:ss", {
+        locale: l[t.value.substring(0, 2)] || l.enUS
+      })} - ${ye(e.value.endDate, "HH:mm:ss", {
+        locale: l[t.value.substring(0, 2)] || l.enUS
+      })}` : `${ye(e.value.startDate, "dd MMM, yyyy", {
+        locale: l[t.value.substring(0, 2)] || l.enUS
+      })} - ${ye(e.value.endDate, "dd MMM, yyyy", {
+        locale: l[t.value.substring(0, 2)] || l.enUS
+      })}`;
+    }), T = c(() => e.label), V = () => {
+      h.value.closePopover();
+      const { onlySlot: o, ...L } = e;
+      n(g.UPDATE, { ...L, value: a.value });
+    }, w = () => {
+      a.value = void 0, V();
+    }, U = () => {
+      a.value = e.defaultValue, V();
+    }, F = () => {
+      a.value = e.value;
+    }, R = (o) => {
+      u.value = !1, a.value = o, d.startDate = p(o.startDate), d.endDate = p(o.endDate), n(g.INPUT, { ...e, value: a.value });
+    }, k = (o) => {
+      o != null && o.startDate && (o != null && o.endDate) && (a.value = o, d.startDate = p(o.startDate), d.endDate = p(o.endDate), n(g.INPUT, { ...e, value: a.value }));
+    }, N = (o) => {
+      R(o), n(g.INPUT, { ...e, value: a.value });
+    }, te = c(
+      () => [
+        {
+          title: r("apply"),
+          event: V,
+          disabled: u.value || _.value || s.value
+        },
+        {
+          title: e.defaultValue ? r("reset") : r("clear"),
+          event: e.defaultValue ? U : w,
+          disabled: _.value && i.value
+        }
+      ]
+    );
+    return {
+      // Refs
+      baseFilter: h,
+      // Values
+      actions: te,
+      formData: d,
+      internalFilterValue: a,
+      isApplyButtonDisabled: s,
+      isSecondaryButtonDisabled: i,
+      isSelectingDate: u,
+      buttonLabel: T,
+      buttonSecondaryLabel: I,
+      // Events
+      onDateSelected: R,
+      openFilter: F,
+      clearFilter: w,
+      resetFilter: U,
+      updateFilter: V,
+      onDatePickerRangeError: () => {
+        _.value = !0, a.value = { startDate: void 0, endDate: void 0 }, n(g.INPUT, { ...e, value: a.value });
+      },
+      onDatePickerRangeFormDateInputUpdate: (o) => {
+        _.value = !1, o.startTime && (d.startTime = o.startTime), o.endTime && (d.endTime = o.endTime);
+      },
+      onDateInputSelected: N,
+      onRangeSelectorInput: k
+    };
+  }
+}), Tl = {
+  key: 1,
+  class: "b-date-range-filter"
+};
+function $l(e, n, t, r, l, a) {
+  const i = P("bento-date-range-picker"), s = P("bento-typography"), u = P("bento-divider"), p = P("bento-button-actions"), f = P("date-range-picker-calendar"), h = P("bento-base-filter");
+  return v(), E(h, {
+    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,
+    "fit-content": "",
+    onOpen: e.openFilter,
+    onClear: e.clearFilter,
+    onReset: e.resetFilter
+  }, {
+    default: y(() => {
+      var _, d, A, I, T, V, w, U, F, R, k, N, te, D, K, q, X;
+      return [
+        e.onlySlot ? (v(), E(i, {
+          key: 0,
+          "allow-time-input": (_ = e.options) == null ? void 0 : _.allowTimeInput,
+          value: e.internalFilterValue,
+          "first-day-of-week": (d = e.options) == null ? void 0 : d.firstDayOfWeek,
+          "is-date-disabled": (A = e.options) == null ? void 0 : A.isDateDisabled,
+          "number-of-months": (I = e.options) == null ? void 0 : I.numberOfMonths,
+          "quick-select-ranges": (T = e.options) == null ? void 0 : T.quickSelectRanges,
+          variant: (V = e.options) == null ? void 0 : V.variant,
+          onInput: e.onDateInputSelected
+        }, null, 8, ["allow-time-input", "value", "first-day-of-week", "is-date-disabled", "number-of-months", "quick-select-ranges", "variant", "onInput"])) : (v(), J("div", Tl, [
+          $(f, {
+            "allow-time-input": (w = e.options) == null ? void 0 : w.allowTimeInput,
+            "first-day-of-week": (U = e.options) == null ? void 0 : U.firstDayOfWeek,
+            "is-date-disabled": (F = e.options) == null ? void 0 : F.isDateDisabled,
+            granularities: (R = e.options) == null ? void 0 : R.granularities,
+            "max-range": (k = e.options) == null ? void 0 : k.maxRange,
+            min: (N = e.options) == null ? void 0 : N.min,
+            max: (te = e.options) == null ? void 0 : te.max,
+            "number-of-months": (D = e.options) == null ? void 0 : D.numberOfMonths,
+            "quick-select-ranges": (K = e.options) == null ? void 0 : K.quickSelectRanges,
+            value: e.internalFilterValue,
+            "date-form-data": e.formData,
+            "show-end-date-on-open": (q = e.options) == null ? void 0 : q.showEndDateOnOpen,
+            variant: (X = e.options) == null ? void 0 : X.variant,
+            onInput: e.onDateSelected,
+            onCustomRange: e.onRangeSelectorInput,
+            onError: e.onDatePickerRangeError,
+            onFormDate: e.onDatePickerRangeFormDateInputUpdate,
+            onStartDateSelected: n[0] || (n[0] = (B) => e.isSelectingDate = !0)
+          }, {
+            title: y(() => [
+              $(s, {
+                strongest: "",
+                variant: "body",
+                el: "span"
+              }, {
+                default: y(() => [
+                  G(Z(e.label), 1)
+                ]),
+                _: 1
+              })
+            ]),
+            actions: y(() => [
+              $(u, { class: "b-date-range-filter__divider" }),
+              $(p, {
+                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", "onOpen", "onClear", "onReset"]);
+}
+const St = /* @__PURE__ */ ee(Il, [["render", $l], ["__scopeId", "data-v-703b3102"]]), Bt = {
+  "en-US": {
+    all: "All",
+    noFiltersMatchThisSearch: "No filters match this search",
+    searchFilter: "Search {filter}"
+  },
+  "ja-JP": {
+    all: "すべて"
+  },
+  "pt-BR": {
+    all: "Todos"
+  }
+}, Pl = { class: "b-select-filter-button__search-bar" }, Ul = { class: "b-select-filter-button__divider" }, El = {
+  i18n: { messages: Bt }
+}, Ll = /* @__PURE__ */ z({
+  ...El,
+  __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],
+      default: void 0
+    }
+  },
+  emits: ["input", "update"],
+  setup(e, { emit: n }) {
+    var X, B;
+    const t = Le(), r = n, l = e, { t: a } = de({ messages: Bt }), i = M(""), s = x(l, "options"), u = M(l.options.listboxItems ?? []), { cachedSelectedListboxOptions: p, setCachedValues: f, resetCache: h } = Ye(
+      u,
+      x(l, "value"),
+      x(s.value, "multiple")
+    ), { cachedSelectedListboxOptions: _ } = Ye(
+      u,
+      x(l, "defaultValue"),
+      x(s.value, "multiple")
+    ), { internalFilterValue: d, isSecondaryButtonDisabled: A, isApplyButtonDisabled: I } = ve(p, _);
+    ue(s, () => {
+      u.value = s.value.listboxItems ?? [];
+    });
+    const T = vt(
+      i,
+      u,
+      (B = (X = l.options) == null ? void 0 : X.search) == null ? void 0 : B.searchEvent
+    ), V = c(() => a("noFiltersMatchThisSearch")), w = c(() => l.label), U = c(() => {
+      var L, Y, m, b;
+      const S = !((L = l == null ? void 0 : l.options) != null && L.multiple) && (l == null ? void 0 : l.value), o = ((m = ((Y = l == null ? void 0 : l.options) == null ? void 0 : Y.multiple) && l.value) == null ? void 0 : m.length) === 1;
+      if (S || o) {
+        let H = (b = l.options.listboxItems.flatMap((W) => W.items ? W.items : W).find(
+          ({ value: W }) => {
+            var ae;
+            return Array.isArray(l.value) ? (ae = l == null ? void 0 : l.value) == null ? void 0 : ae.includes(W) : W === l.value;
+          }
+        )) == null ? void 0 : b.label;
+        return !H && l.value && (H = l.value[0]), Se(H, 12);
+      }
+      return null;
+    }), F = c(() => ke(`filter-listbox-${l.field}`)), R = (S) => {
+      d.value = S;
+      const { onlySlot: o, ...L } = l;
+      if (l.options.multiple) {
+        const m = S.length ? d.value.map(({ value: b }) => b) : null;
+        r(g.INPUT, { ...L, value: m });
+        return;
+      }
+      const Y = S.length ? S[0].value : null;
+      r(g.INPUT, { ...L, value: Y });
+    }, k = () => {
+      var Y, m, b;
+      const { onlySlot: S, ...o } = l;
+      if (l.options.multiple) {
+        d.value && ((Y = d.value) == null ? void 0 : Y.length) === 0 && (d.value = l.defaultValue !== null ? _.value : void 0);
+        const O = (m = d.value) != null && m.length ? (b = d.value) == null ? void 0 : b.map(({ value: H }) => H) : null;
+        r(g.UPDATE, {
+          ...o,
+          value: O
+        });
+        return;
+      }
+      const L = d.value.length ? d.value[0].value : void 0;
+      r(g.UPDATE, { ...o, value: L });
+    }, N = () => {
+      d.value = p.value;
+    }, te = () => {
+      i.value && (i.value = "");
+    }, D = () => {
+      f(_.value), d.value = _.value, k();
+    }, K = () => {
+      h(), d.value = [], k();
+    }, q = c(() => {
+      var L, Y;
+      if (l.value == null || !l.options.multiple)
+        return null;
+      const S = (L = l.options.listboxItems) == null ? void 0 : L.reduce((m, b) => {
+        var O;
+        return m += (O = b == null ? void 0 : b.items) != null && O.length ? b.items.length : 1, m;
+      }, 0), o = (Y = l.value) == null ? void 0 : Y.length;
+      return o === 1 ? null : o === S ? a("all") : o;
+    });
+    return (S, o) => (v(), E(C(Fe), {
+      "applied-filters-count": q.value,
+      "button-label": w.value,
+      "button-secondary-label": U.value,
+      disabled: e.disabled,
+      "disable-apply-button": C(I),
+      "disable-secondary-button": C(A),
+      "default-value": e.defaultValue,
+      label: e.label,
+      field: e.field,
+      "only-slot": !1,
+      value: e.value,
+      onApply: k,
+      onClear: K,
+      onReset: D,
+      onOpen: N,
+      onClose: te
+    }, {
+      default: y(() => {
+        var L, Y, m, b, O, H, W, ae, ce, me, le, je, Ke, qe;
+        return [
+          j("div", Pl, [
+            $(C(Ue), {
+              "debounce-time": (Y = (L = e.options) == null ? void 0 : L.search) == null ? void 0 : Y.debounceTime,
+              value: i.value,
+              "input-field-aria-label": C(a)("searchFilter", { filter: e.label.toLocaleLowerCase() }),
+              onInput: o[0] || (o[0] = (Re) => i.value = Re)
+            }, null, 8, ["debounce-time", "value", "input-field-aria-label"])
+          ]),
+          j("div", Ul, [
+            $(C(He))
+          ]),
+          $(C(Zt), {
+            id: F.value,
+            "aria-label": e.label,
+            class: "b-select-filter-button__wrapper",
+            "component-loading": (m = e.options) == null ? void 0 : m.loading,
+            "empty-state": (b = e.options) == null ? void 0 : b.emptyState,
+            "has-more-items": (H = (O = e.options) == null ? void 0 : O.lazy) == null ? void 0 : H.hasMoreItems,
+            items: C(T),
+            "is-option-disabled": (W = e.options) == null ? void 0 : W.isOptionDisabled,
+            "lazy-load-type": (ce = (ae = e.options) == null ? void 0 : ae.lazy) == null ? void 0 : ce.lazyLoadType,
+            loading: (le = (me = e.options) == null ? void 0 : me.lazy) == null ? void 0 : le.loading,
+            multiple: (je = e.options) == null ? void 0 : je.multiple,
+            "static-categories": (Ke = e.options) == null ? void 0 : Ke.staticCategories,
+            "no-results-message": V.value,
+            searching: !!i.value,
+            "selected-value": C(d),
+            "virtual-scroll": (qe = e.options) == null ? void 0 : qe.virtualScroll,
+            onSelect: R,
+            onSpacePressed: R,
+            onEnterPressed: R,
+            onShowMore: o[1] || (o[1] = (Re) => {
+              var Ce, Ie;
+              return (Ie = (Ce = e.options) == null ? void 0 : Ce.lazy) == null ? void 0 : Ie.showMoreEvent();
+            })
+          }, De({ _: 2 }, [
+            fe(C(t), (Re, Ce) => ({
+              name: Ce,
+              fn: y((Ie) => [
+                re(S.$slots, Ce, $e(Pe(Ie)), 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", "value"]));
+  }
+}), Ol = /* @__PURE__ */ ee(Ll, [["__scopeId", "data-v-96b1316d"]]), Ct = {
+  "en-US": {
+    noFiltersMatchThisSearch: "No filters match this search"
+  }
+}, Rl = {
+  i18n: { messages: Ct },
+  name: "select-filter-dropdown"
+}, wl = /* @__PURE__ */ z({
+  ...Rl,
+  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 } = de({ messages: Ct }), r = Le(), l = n, a = e, { internalFilterValue: i } = ve(x(a, "value"), x(a, "defaultValue")), s = x(a, "options"), u = M(a.options.listboxItems);
+    ue(s, () => {
+      u.value = s.value.listboxItems;
+    });
+    const p = c(() => t("noFiltersMatchThisSearch")), f = (h) => {
+      i.value = h;
+      const { onlySlot: _, ...d } = a;
+      l(g.INPUT, { ...d, value: i.value });
+    };
+    return (h, _) => {
+      var d, A, I, T, V;
+      return v(), E(C(zt), {
+        value: C(i),
+        items: e.options.listboxItems,
+        search: (d = e.options) == null ? void 0 : d.search,
+        multiple: (A = e.options) == null ? void 0 : A.multiple,
+        "static-categories": (I = e.options) == null ? void 0 : I.staticCategories,
+        "no-results-message": p.value,
+        "is-option-disabled": e.options.isOptionDisabled,
+        "dynamic-filtering": !0,
+        "component-loading": (T = e.options) == null ? void 0 : T.loading,
+        "empty-state": (V = e.options) == null ? void 0 : V.emptyState,
+        disabled: e.disabled,
+        onInput: f
+      }, De({ _: 2 }, [
+        fe(C(r), (w, U) => ({
+          name: U,
+          fn: y((F) => [
+            re(h.$slots, U, $e(Pe(F)))
+          ])
+        }))
+      ]), 1032, ["value", "items", "search", "multiple", "static-categories", "no-results-message", "is-option-disabled", "component-loading", "empty-state", "disabled"]);
+    };
+  }
+}), Be = {
+  /**
+   * 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
+  }
+}, Vl = {}, ge = /* @__PURE__ */ z({
+  ...Vl,
+  __name: "select-filter",
+  props: Be,
+  emits: ["input", "update"],
+  setup(e, { emit: n }) {
+    const t = Le(), r = n, l = e, a = (s) => r("input", s), i = (s) => r("update", s);
+    return rt(() => {
+      var s;
+      (s = l == null ? void 0 : l.options) != null && s.messages && Ne(
+        '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"
+      );
+    }), (s, u) => s.onlySlot ? (v(), E(C(wl), {
+      key: 0,
+      disabled: s.disabled,
+      "default-value": s.defaultValue,
+      field: s.field,
+      label: s.label,
+      options: s.options,
+      value: s.value,
+      onInput: a,
+      onUpdate: i
+    }, De({ _: 2 }, [
+      fe(C(t), (p, f) => ({
+        name: f,
+        fn: y((h) => [
+          re(s.$slots, f, $e(Pe(h)))
+        ])
+      }))
+    ]), 1032, ["disabled", "default-value", "field", "label", "options", "value"])) : (v(), E(C(Ol), {
+      key: 1,
+      disabled: s.disabled,
+      "default-value": s.defaultValue,
+      field: s.field,
+      label: s.label,
+      options: s.options,
+      value: s.value,
+      onInput: a,
+      onUpdate: i
+    }, De({ _: 2 }, [
+      fe(C(t), (p, f) => ({
+        name: f,
+        fn: y((h) => [
+          re(s.$slots, f, $e(Pe(h)))
+        ])
+      }))
+    ]), 1032, ["disabled", "default-value", "field", "label", "options", "value"]));
+  }
+}), kl = z({
+  name: "bento-select-avatar-filter",
+  components: {
+    BentoSelectFilter: ge,
+    BentoAvatar: xt
+  },
+  props: {
+    ...Be,
+    /**
+     * 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: [g.INPUT, g.UPDATE],
+  setup(e, { emit: n }) {
+    return {
+      // Enums
+      BentoFilterEvent: g,
+      // Methods
+      onUpdate: (r) => n(g.UPDATE, r)
+    };
+  }
+});
+function Nl(e, n, t, r, l, a) {
+  const i = P("bento-avatar"), s = P("bento-select-filter");
+  return v(), E(s, oe(e.$props, {
+    field: e.field,
+    label: e.label,
+    onUpdate: e.onUpdate,
+    onInput: n[0] || (n[0] = (u) => e.$emit(e.BentoFilterEvent.INPUT, u))
+  }), {
+    default: y(({ label: u, data: p }) => [
+      $(i, {
+        username: u,
+        src: p
+      }, null, 8, ["username", "src"])
+    ]),
+    _: 1
+  }, 16, ["field", "label", "onUpdate"]);
+}
+const _t = /* @__PURE__ */ ee(kl, [["render", Nl]]), Ml = z({
+  name: "bento-select-country-filter",
+  components: {
+    BentoSelectFilter: ge,
+    ListboxOptionTag: mt
+  },
+  props: {
+    ...Be,
+    /**
+     * 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: [g.INPUT, g.UPDATE],
+  setup(e, { emit: n }) {
+    return {
+      // Enums
+      BentoFilterEvent: g,
+      // Methods
+      onUpdate: (r) => {
+        n(g.UPDATE, r);
+      }
+    };
+  }
+});
+function Hl(e, n, t, r, l, a) {
+  const i = P("listbox-option-tag"), s = P("bento-select-filter");
+  return v(), E(s, oe(e.$props, {
+    field: e.field,
+    label: e.label,
+    onUpdate: e.onUpdate,
+    onInput: n[0] || (n[0] = (u) => e.$emit(e.BentoFilterEvent.INPUT, u))
+  }), {
+    default: y((u) => [
+      $(i, { option: u }, null, 8, ["option"])
+    ]),
+    _: 1
+  }, 16, ["field", "label", "onUpdate"]);
+}
+const At = /* @__PURE__ */ ee(Ml, [["render", Hl]]), jl = {
+  name: "bento-select-country-filter"
+}, Dt = /* @__PURE__ */ z({
+  ...jl,
+  props: {
+    ...Be,
+    /**
+     * 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: [g.INPUT, g.UPDATE],
+  setup(e, { emit: n }) {
+    const t = e, r = n, l = M(t.options.variant), a = M(t.options.listboxItems);
+    ue([() => t.options.variant, () => t.options.listboxItems], () => {
+      l.value = t.options.variant, a.value = t.options.listboxItems;
+    });
+    const i = (p) => r(g.UPDATE, p), s = Xt(l, a), u = c(() => ({
+      ...t != null && t.options ? t.options : {},
+      listboxItems: s.value
+    }));
+    return (!l.value || l.value === "custom") && Ne(
+      'BentoSelectCountryFilter type with `options.variant==="custom"`',
+      "Use any of the other BentoSelectCountryFilter variants instead OR use BentoSelectFilter type for custom labels",
+      "2.0.0"
+    ), (p, f) => (v(), E(ge, oe(t, {
+      field: p.field,
+      label: p.label,
+      options: u.value,
+      onUpdate: i,
+      onInput: f[0] || (f[0] = (h) => p.$emit(C(g).INPUT, h))
+    }), {
+      default: y(({ label: h }) => [
+        $(C(pe), { el: "span" }, {
+          default: y(() => [
+            G(Z(h), 1)
+          ]),
+          _: 2
+        }, 1024)
+      ]),
+      _: 1
+    }, 16, ["field", "label", "options"]));
+  }
+}), Kl = z({
+  name: "bento-select-payment-method-filter",
+  components: {
+    BentoSelectFilter: ge,
+    BentoPaymentMethod: Qt
+  },
+  props: {
+    ...Be,
+    /**
+     * 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: [g.INPUT, g.UPDATE],
+  setup(e, { emit: n }) {
+    return {
+      // Enums
+      BentoFilterEvent: g,
+      // Methods
+      onUpdate: (r) => n(g.UPDATE, r)
+    };
+  }
+});
+function ql(e, n, t, r, l, a) {
+  const i = P("bento-payment-method"), s = P("bento-select-filter");
+  return v(), E(s, oe(e.$props, {
+    field: e.field,
+    label: e.label,
+    onUpdate: e.onUpdate,
+    onInput: n[0] || (n[0] = (u) => e.$emit(e.BentoFilterEvent.INPUT, u))
+  }), {
+    default: y(({ value: u, label: p }) => [
+      $(i, {
+        type: u,
+        label: p
+      }, null, 8, ["type", "label"])
+    ]),
+    _: 1
+  }, 16, ["field", "label", "onUpdate"]);
+}
+const It = /* @__PURE__ */ ee(Kl, [["render", ql]]), Jl = z({
+  name: "bento-select-country-filter",
+  components: {
+    BentoSelectFilter: ge,
+    ListboxOptionTag: mt
+  },
+  props: {
+    ...Be,
+    /**
+     * 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: [g.INPUT, g.UPDATE],
+  setup(e, { emit: n }) {
+    const t = (a) => n(g.UPDATE, a), r = c(
+      () => {
+        var a, i;
+        return (i = (a = e == null ? void 0 : e.options) == null ? void 0 : a.listboxItems) == null ? void 0 : i.map(({ label: s, value: u, variant: p }) => ({ label: s, value: u, data: p }));
+      }
+    );
+    return {
+      // Values
+      countryOptions: c(() => ({
+        ...e.options,
+        listboxItems: r.value
+      })),
+      // Methods
+      onUpdate: t,
+      // Enums
+      BentoFilterEvent: g
+    };
+  }
+});
+function zl(e, n, t, r, l, a) {
+  const i = P("listbox-option-tag"), s = P("bento-select-filter");
+  return v(), E(s, oe(e.$props, {
+    field: e.field,
+    label: e.label,
+    options: e.countryOptions,
+    onUpdate: e.onUpdate,
+    onInput: n[0] || (n[0] = (u) => e.$emit(e.BentoFilterEvent.INPUT, u))
+  }), {
+    default: y(({ label: u, data: p }) => [
+      $(i, {
+        option: { value: u, data: p, label: "" }
+      }, null, 8, ["option"])
+    ]),
+    _: 1
+  }, 16, ["field", "label", "options", "onUpdate"]);
+}
+const Tt = /* @__PURE__ */ ee(Jl, [["render", zl]]), lt = {
+  "en-US": {
+    no: "No",
+    yes: "Yes"
+  },
+  "ja-JP": {
+    no: "いいえ",
+    yes: "はい"
+  },
+  "pt-BR": {
+    no: "Não",
+    yes: "Sim"
+  }
+}, Yl = z({
+  name: "bento-boolean-filter",
+  i18n: { messages: lt },
+  components: { BentoBaseFilter: Fe, BentoRadioGroup: Jt },
+  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:
+     *   - listboxItems: The option elements to populate the filter with.
+     */
+    options: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: [g.INPUT, g.UPDATE],
+  setup(e, { emit: n }) {
+    const { t } = de({ messages: lt }), r = (U) => typeof U == "boolean" ? U == null ? void 0 : U.toString() : U, l = (U) => {
+      var F, R, k, N;
+      return ((R = (F = e == null ? void 0 : e.options) == null ? void 0 : F.positiveOption) == null ? void 0 : R.value) !== void 0 && ((N = (k = e == null ? void 0 : e.options) == null ? void 0 : k.negativeOption) == null ? void 0 : N.value) !== void 0 && typeof e.options.positiveOption.value == "boolean" && typeof e.options.negativeOption.value == "boolean" && typeof U == "string" ? U === "true" : U;
+    }, a = c(() => r(e.defaultValue)), i = c(() => r(e.value)), s = c(() => e.options && e.options.positiveOption && e.options.negativeOption ? [
+      {
+        ...e.options.positiveOption,
+        value: r(e.options.positiveOption.value)
+      },
+      {
+        ...e.options.negativeOption,
+        value: r(e.options.negativeOption.value)
+      }
+    ] : [
+      { value: "yes", label: t("yes") },
+      { value: "no", label: t("no") }
+    ]), { internalFilterValue: u, isSecondaryButtonDisabled: p, isApplyButtonDisabled: f } = ve(
+      i,
+      a
+    ), h = c(() => e.label), _ = c(
+      () => {
+        var U;
+        return Se((U = s.value.find(({ value: F }) => F === i.value)) == null ? void 0 : U.label, 12);
+      }
+    ), d = c(() => ({
+      "b-boolean-filter--only-slot": e.onlySlot
+    }));
+    Oe(() => {
+      u.value || (u.value = null);
+    });
+    const A = (U) => {
+      u.value = U, n(g.INPUT, {
+        ...e,
+        value: l(u.value)
+      });
+    }, I = () => {
+      u.value = i.value;
+    }, T = () => {
+      n(g.UPDATE, {
+        ...e,
+        value: l(u.value)
+      });
+    };
+    return {
+      // Values
+      items: s,
+      conditionalClasses: d,
+      buttonLabel: h,
+      buttonSecondaryLabel: _,
+      internalFilterValue: u,
+      isApplyButtonDisabled: f,
+      isSecondaryButtonDisabled: p,
+      translatedValue: i,
+      translatedDefaultValue: a,
+      // Events
+      onInput: A,
+      updateFilter: T,
+      clearFilter: () => {
+        u.value = null, T();
+      },
+      openFilter: I,
+      resetFilter: () => n(g.UPDATE, { ...e, value: e.defaultValue })
+    };
+  }
+});
+function Wl(e, n, t, r, l, a) {
+  const i = P("bento-radio-group"), s = P("bento-base-filter");
+  return v(), E(s, oe(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,
+    onApply: e.updateFilter,
+    onClear: e.clearFilter,
+    onOpen: e.openFilter,
+    onReset: e.resetFilter
+  }), {
+    default: y(() => [
+      j("div", {
+        class: ie(["b-boolean-filter", e.conditionalClasses]),
+        onKeydown: n[0] || (n[0] = be((...u) => e.updateFilter && e.updateFilter(...u), ["enter"]))
+      }, [
+        $(i, {
+          items: e.items,
+          label: e.label,
+          "model-value": e.internalFilterValue,
+          "hide-label": "",
+          "onUpdate:modelValue": e.onInput
+        }, null, 8, ["items", "label", "model-value", "onUpdate:modelValue"])
+      ], 34)
+    ]),
+    _: 1
+  }, 16, ["value", "default-value", "button-label", "button-secondary-label", "disable-apply-button", "disable-secondary-button", "only-slot", "onApply", "onClear", "onOpen", "onReset"]);
+}
+const $t = /* @__PURE__ */ ee(Yl, [["render", Wl], ["__scopeId", "data-v-4619720e"]]), at = {
+  "en-US": {
+    from: "From",
+    to: "To"
+  }
+}, Gl = z({
+  name: "bento-range-filter",
+  i18n: { messages: at },
+  components: { BentoBaseFilter: Fe, BentoInputField: Me },
+  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 }
+  },
+  emits: [g.INPUT, g.UPDATE],
+  setup(e, { emit: n }) {
+    const { t } = de({ messages: at }), r = M(null), { internalFilterValue: l, isSecondaryButtonDisabled: a, isApplyButtonDisabled: i } = ve(
+      x(e, "value"),
+      x(e, "defaultValue")
+    ), s = c(() => {
+      var k, N, te, D, K, q, X, B;
+      if (!((k = e.value) != null && k[0]) && !((N = e.value) != null && N[1]))
+        return null;
+      let w = "";
+      (te = e.value) != null && te[0] ? (D = e.value) != null && D[1] || (w = "≥") : w = "≤";
+      const U = (K = e.value) != null && K[0] ? `${Se(e.value[0], 5)}` : "", F = (q = e.value) != null && q[0] && ((X = e.value) != null && X[1]) ? " - " : "", R = (B = e.value) != null && B[1] ? `${Se(e.value[1], 5)}` : "";
+      return `${w}${U}${F}${R}`;
+    }), u = c(() => e.label), p = c(() => s.value), f = c(() => ({
+      "b-range-filter--only-slot": e.onlySlot
+    })), h = () => {
+      l.value = e.value, st(() => r.value.focusInput());
+    }, _ = () => {
+      n(g.INPUT, { ...e, value: l.value });
+    }, d = (w) => {
+      l.value = [w, l.value[1]], _();
+    }, A = (w) => {
+      l.value = [l.value[0], w], _();
+    }, I = () => {
+      l.value.some((w) => w) || (l.value = e.defaultValue !== null ? e.defaultValue : void 0), n(g.UPDATE, {
+        ...e,
+        value: l.value
+      });
+    };
+    return {
+      // Values
+      inputTextRef: r,
+      conditionalClasses: f,
+      internalFilterValue: l,
+      isApplyButtonDisabled: i,
+      isSecondaryButtonDisabled: a,
+      buttonLabel: u,
+      buttonSecondaryLabel: p,
+      // Events
+      updateFrom: d,
+      updateTo: A,
+      updateFilter: I,
+      clearFilter: () => {
+        l.value = ["", ""], I();
+      },
+      openFilter: h,
+      resetFilter: () => n(g.UPDATE, { ...e, value: e.defaultValue }),
+      // Translations
+      t
+    };
+  }
+});
+function Zl(e, n, t, r, l, a) {
+  const i = P("bento-input-field"), s = P("bento-base-filter");
+  return v(), E(s, oe(e.$props, {
+    "disable-apply-button": e.isApplyButtonDisabled,
+    "disable-secondary-button": e.isSecondaryButtonDisabled,
+    "button-label": e.buttonLabel,
+    "button-secondary-label": e.buttonSecondaryLabel,
+    "only-slot": e.onlySlot,
+    onApply: e.updateFilter,
+    onClear: e.clearFilter,
+    onOpen: e.openFilter,
+    onReset: e.resetFilter
+  }), {
+    default: y(() => [
+      j("div", {
+        class: ie(["b-range-filter", e.conditionalClasses]),
+        onKeydown: n[0] || (n[0] = be((...u) => e.updateFilter && e.updateFilter(...u), ["enter"]))
+      }, [
+        $(i, {
+          ref: "inputTextRef",
+          value: e.internalFilterValue ? e.internalFilterValue[0] : "",
+          type: "number",
+          "aria-label": e.t("from").toString(),
+          onInput: e.updateFrom
+        }, {
+          default: y(() => [
+            G(Z(e.t("from")), 1)
+          ]),
+          _: 1
+        }, 8, ["value", "aria-label", "onInput"]),
+        $(i, {
+          class: "b-range-filter__input-field",
+          value: e.internalFilterValue ? e.internalFilterValue[1] : "",
+          type: "number",
+          "aria-label": e.t("to"),
+          onInput: e.updateTo
+        }, {
+          default: y(() => [
+            G(Z(e.t("to")), 1)
+          ]),
+          _: 1
+        }, 8, ["value", "aria-label", "onInput"])
+      ], 34)
+    ]),
+    _: 1
+  }, 16, ["disable-apply-button", "disable-secondary-button", "button-label", "button-secondary-label", "only-slot", "onApply", "onClear", "onOpen", "onReset"]);
+}
+const Pt = /* @__PURE__ */ ee(Gl, [["render", Zl], ["__scopeId", "data-v-e7e81bac"]]);
+var Ve = /* @__PURE__ */ ((e) => (e.INPUT = "input", e))(Ve || {});
+const Ql = z({
+  name: "base-filter-button",
+  components: { BaseButton: dt, BentoTypography: pe, ChevronUpIcon: Gt, ChevronDownIcon: Wt },
+  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: [ze.CLICK],
+  setup(e, { slots: n, emit: t, attrs: r }) {
+    const l = c(() => n.default ? bt(n)("default") : null), a = pt({ ariaLabel: l }), i = M(null), s = c(() => {
+      var f;
+      return {
+        "aria-controls": (f = r["aria-controls"]) == null ? void 0 : f.toString()
+      };
+    }), u = c(() => ({
+      "b-base-filter-button--with-chevron": e.hasChevron,
+      "b-base-filter-button--filter-open": e.isFilterOpen
+    }));
+    return {
+      // Values
+      ariaAttributes: s,
+      computedAriaLabel: a,
+      conditionalClasses: u,
+      // Methods
+      onClickButton: () => {
+        e.disabled || t(ze.CLICK);
+      },
+      hasSlot: ct(n),
+      // Refs
+      baseFilterButtonRef: i
+    };
+  }
+}), Xl = { class: "b-base-filter-button__default-container" }, xl = { class: "b-base-filter-button__label-container" }, ea = {
+  key: 0,
+  class: "b-base-filter-button__counter-wrapper"
+};
+function ta(e, n, t, r, l, a) {
+  const i = P("bento-typography"), s = P("chevron-up-icon"), u = P("chevron-down-icon"), p = P("base-button");
+  return v(), E(p, {
+    ref: "baseFilterButtonRef",
+    class: ie(["b-base-filter-button", e.conditionalClasses]),
+    disabled: e.disabled,
+    "aria-label": e.computedAriaLabel,
+    "aria-controls": e.ariaAttributes["aria-controls"],
+    type: "button",
+    onClick: e.onClickButton
+  }, De({
+    default: y(() => [
+      j("div", Xl, [
+        j("div", xl, [
+          $(i, {
+            el: "span",
+            variant: "body",
+            stronger: e.bold,
+            class: "b-base-filter-button__label"
+          }, {
+            default: y(() => [
+              re(e.$slots, "default", {}, void 0, !0)
+            ]),
+            _: 3
+          }, 8, ["stronger"])
+        ]),
+        e.amountAppliedValues && !e.hasChevron ? (v(), J("div", ea, [
+          $(i, {
+            class: "b-base-filter-button__counter",
+            el: "span",
+            variant: "body",
+            stronger: ""
+          }, {
+            default: y(() => [
+              G(Z(e.amountAppliedValues), 1)
+            ]),
+            _: 1
+          })
+        ])) : Q("", !0)
+      ])
+    ]),
+    _: 2
+  }, [
+    e.hasChevron ? {
+      name: "iconRight",
+      fn: y(() => [
+        e.isFilterOpen ? (v(), E(s, {
+          key: 0,
+          "aria-hidden": "true"
+        })) : (v(), E(u, {
+          key: 1,
+          "aria-hidden": "true"
+        }))
+      ]),
+      key: "0"
+    } : void 0
+  ]), 1032, ["class", "disabled", "aria-label", "aria-controls", "onClick"]);
+}
+const la = /* @__PURE__ */ ee(Ql, [["render", ta], ["__scopeId", "data-v-af9efc73"]]), aa = z({
+  name: "all-filters-modal-button",
+  components: { BaseFilterButton: la },
+  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: c(() => ({
+        "b-all-filters-modal-button--with-counter": e.appliedFiltersCount,
+        "b-all-filters-modal-button--filter-open": e.isFilterOpen
+      })),
+      onClick: () => {
+        n("click");
+      }
+    };
+  }
+});
+function na(e, n, t, r, l, a) {
+  const i = P("base-filter-button");
+  return v(), E(i, {
+    class: ie(["b-all-filters-modal-button", e.conditionalClasses]),
+    "amount-applied-values": e.appliedFiltersCount,
+    "is-filter-open": e.isFilterOpen,
+    disabled: e.disabled,
+    onClick: e.onClick
+  }, {
+    default: y(() => [
+      G(Z(e.label), 1)
+    ]),
+    _: 1
+  }, 8, ["class", "amount-applied-values", "is-filter-open", "disabled", "onClick"]);
+}
+const oa = /* @__PURE__ */ ee(aa, [["render", na], ["__scopeId", "data-v-b96a672f"]]);
+let nt = 0;
+const sa = {
+  beforeCreate() {
+    this.uuid = nt.toString(), nt += 1;
+  }
+}, ia = { key: 0 };
+function ra(e, n, t, r, l, a) {
+  return v(), J("svg", oe({ 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"] ? (v(), J("title", ia, Z(e.$attrs["svg-title"]), 1)) : Q("", !0),
+    n[0] || (n[0] = j("path", {
+      fill: "#00112C",
+      d: "M12.6465 4.58337C12.32 3.42912 11.2588 2.58337 10 2.58337C8.74122 2.58337 7.67998 3.42912 7.35352 4.58337H1.25V6.08337H7.35352C7.67998 7.23763 8.74122 8.08337 10 8.08337C11.2588 8.08337 12.32 7.23763 12.6465 6.08337H14.75V4.58337H12.6465ZM11.25 5.33337C11.25 6.02373 10.6904 6.58337 10 6.58337C9.30964 6.58337 8.75 6.02373 8.75 5.33337C8.75 4.64302 9.30964 4.08337 10 4.08337C10.6904 4.08337 11.25 4.64302 11.25 5.33337Z"
+    }, null, -1)),
+    n[1] || (n[1] = j("path", {
+      fill: "#00112C",
+      d: "M4 7.91687C5.25878 7.91687 6.32002 8.76262 6.64648 9.91687H14.75V11.4169H6.64648C6.32002 12.5711 5.25878 13.4169 4 13.4169C2.48122 13.4169 1.25 12.1857 1.25 10.6669C1.25 9.14809 2.48122 7.91687 4 7.91687ZM5.25 10.6669C5.25 9.97651 4.69036 9.41687 4 9.41687C3.30964 9.41687 2.75 9.97651 2.75 10.6669C2.75 11.3572 3.30964 11.9169 4 11.9169C4.69036 11.9169 5.25 11.3572 5.25 10.6669Z"
+    }, null, -1))
+  ], 16);
+}
+const ua = /* @__PURE__ */ ee(sa, [["render", ra]]), ot = {
+  "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": {
+    all: "すべて",
+    cancel: "キャンセル",
+    clear: "クリア",
+    clearAll: "すべてクリア"
+  },
+  "pt-BR": {
+    all: "Todos",
+    cancel: "Cancelar",
+    clear: "Limpar",
+    clearAll: "Limpar tudo"
+  }
+}, da = z({
+  i18n: { messages: ot },
+  name: "all-filters-modal",
+  components: {
+    AllFiltersModalButton: oa,
+    BentoBooleanFilter: $t,
+    BentoButton: kt,
+    BentoDateFilter: ht,
+    BentoDateRangeFilter: St,
+    BentoInputFilter: Ft,
+    BentoInputWithDropdownFilter: gt,
+    BentoModal: wt,
+    BentoRangeFilter: Pt,
+    BentoSearchBar: Ue,
+    BentoSelectAvatarFilter: _t,
+    BentoSelectCurrencyFilter: At,
+    BentoSelectCountryFilter: Dt,
+    BentoSelectFilter: ge,
+    BentoSelectPaymentMethodFilter: It,
+    BentoSelectTagFilter: Tt,
+    BentoTypography: pe,
+    FilterBarButton: Ee,
+    SlidersIcon: ua
+  },
+  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: [Ve.INPUT],
+  setup(e, { emit: n }) {
+    const t = M(e.value), r = ke("all-filters-modal"), l = M([]), a = M(!1), i = M(0), s = M(null), u = M(""), { t: p } = de({ messages: ot }), f = vt(u, x(t, "value")), h = M({});
+    Oe(() => {
+      h.value = [];
+    }), ue(
+      () => e.value,
+      () => {
+        a.value ? t.value = e.value.map((m, b) => ({ ...m, value: t.value[b].value })) : t.value = e.value;
+      }
+    );
+    const _ = (m) => m.sort((b, O) => b.label > O.label ? 1 : O.label > b.label ? -1 : 0), d = c(
+      () => _(
+        f.value.filter(
+          (m) => {
+            var b, O;
+            return Array.isArray(m.value) ? ((b = m.value) == null ? void 0 : b.length) && ((O = m.value) == null ? void 0 : O.find((H) => H !== "")) : m.value;
+          }
+        )
+      )
+    ), A = c(
+      () => _(
+        f.value.filter(
+          (m) => {
+            var b, O;
+            return Array.isArray(m.value) ? ((b = m.value) == null ? void 0 : b.length) === 0 || ((O = m.value) == null ? void 0 : O.every((H) => H === "")) : !m.value;
+          }
+        )
+      )
+    ), I = c(() => {
+      var m;
+      return u.value && ((m = f.value) == null ? void 0 : m.length) === 0;
+    }), T = c(() => t.value[i.value]), V = () => {
+      const m = d.value.length ? d.value[0] : A.value[0], b = t.value.findIndex(
+        (O) => O.label === m.label && O.field === m.field
+      );
+      i.value = b;
+    };
+    rt(() => {
+      V();
+    });
+    const w = (m) => m.map((b) => {
+      var O, H, W, ae, ce, me;
+      switch (b.type) {
+        case ne.SELECT:
+        case ne.SELECT_AVATAR:
+        case ne.SELECT_COUNTRY:
+        case ne.SELECT_CURRENCY:
+        case ne.SELECT_PAYMENT_METHOD:
+        case ne.SELECT_TAG:
+          switch ((O = b.options) == null ? void 0 : O.multiple) {
+            case !0:
+              return {
+                label: b.label,
+                field: b.field,
+                count: (H = b.value) != null && H.length ? (W = b.value) == null ? void 0 : W.length : null
+              };
+            default:
+              return {
+                label: b.label,
+                field: b.field,
+                count: b.value == null ? null : 1
+              };
+          }
+        case ne.DATE_RANGE:
+          return {
+            label: b.label,
+            field: b.field,
+            count: ((ae = b.value) == null ? void 0 : ae.startDate) != null && ((ce = b.value) == null ? void 0 : ce.endDate) != null ? 1 : null
+          };
+        case ne.RANGE:
+          return {
+            label: b.label,
+            field: b.field,
+            count: (me = b.value) != null && me.find((le) => le !== "") ? 1 : null
+          };
+        case ne.INPUT:
+        case ne.BOOLEAN:
+        case ne.DATE:
+        default:
+          return {
+            label: b.label,
+            field: b.field,
+            count: b.value != null ? 1 : null
+          };
+      }
+    }), U = c(
+      () => {
+        var m;
+        return Array.isArray(T.value.value) ? ((m = T.value) == null ? void 0 : m.value.length) && T.value.value.find((b) => b !== "") : !!t.value[i.value].value;
+      }
+    ), F = c(
+      () => {
+        var m;
+        return (m = w(e.value)) == null ? void 0 : m.filter(({ count: b }) => !!b).length;
+      }
+    ), R = () => {
+      a.value ? a.value = !1 : a.value = !0;
+    }, k = (m) => {
+      var O, H, W;
+      const b = w(t.value).find((ae) => ae.field === m.field).count;
+      return m.type.includes("BentoSelect") && ((O = m.options) != null && O.multiple) && b === ((W = (H = m.options) == null ? void 0 : H.listboxItems) == null ? void 0 : W.length) ? p("all") : b;
+    }, N = (m, b) => {
+      i.value = t.value.findIndex(
+        (O) => O.label === m && O.field === b
+      );
+    }, te = () => {
+      u.value = "";
+    }, D = () => {
+      a.value = !1, t.value = e.value, te(), V();
+    }, K = (m) => {
+      const b = t.value.map(({ value: O, ...H }, W) => W === i.value ? { value: m.value, ...H } : { value: O, ...H });
+      t.value = b;
+    }, q = () => {
+      K({
+        field: T.value.field,
+        label: T.value.label,
+        type: T.value.type,
+        value: void 0
+      });
+    }, X = () => {
+      t.value = e.value.map(({ value: m, ...b }) => ({
+        ...b,
+        value: void 0
+      }));
+    }, B = () => {
+      n(Ve.INPUT, t.value), a.value = !1;
+    }, S = c(
+      () => JSON.stringify(t.value) === JSON.stringify(e.value)
+    ), o = c(() => [
+      {
+        title: p("applyAll"),
+        disabled: S.value,
+        event: B
+      },
+      {
+        title: p("cancel"),
+        event: D
+      },
+      {
+        title: p("clearAll"),
+        disabled: !F.value,
+        event: X
+      }
+    ]);
+    return {
+      // Enums
+      BentoModalEvent: Vt,
+      // Values
+      allFiltersModalUniqueId: r,
+      allFiltersModalFiltersSection: l,
+      allFiltersModalFilterButtons: h,
+      numberOfActiveFilters: F,
+      isEmptyResultForSearchFilter: I,
+      isModalOpen: a,
+      isClearButtonEnabled: U,
+      activeFilters: d,
+      otherFilters: A,
+      modalActions: o,
+      selectedFilter: T,
+      selectedFilterRef: s,
+      searchTerm: u,
+      // Methods
+      onClickAllFiltersModal: R,
+      getFilterCount: k,
+      cancel: D,
+      selectFilter: N,
+      clearFilter: q,
+      updateFilter: K,
+      onSearchbarClear: te,
+      onKeydownRight: () => {
+        Yt(1, s.value.$el).focus();
+      },
+      onKeydownLeft: () => {
+        h.value[T.value.label].$el.focus();
+      },
+      // Translations
+      t: p
+    };
+  }
+}), ca = { class: "b-all-filters-modal" }, pa = {
+  key: 0,
+  class: "b-all-filters-modal__empty-search-message"
+}, ba = {
+  key: 1,
+  class: "b-all-filters-modal__filters-section"
+}, fa = ["aria-labelledby"], va = {
+  key: 2,
+  class: "b-all-filters-modal__filters-section"
+}, ma = ["aria-labelledby"], ya = { class: "b-all-filters-modal__selected-filter-text" }, Fa = { class: "b-all-filters-modal__selected-filter-component" }, ga = { class: "b-all-filters-modal__clear-button" };
+function ha(e, n, t, r, l, a) {
+  const i = P("sliders-icon"), s = P("filter-bar-button"), u = P("bento-search-bar"), p = P("bento-typography"), f = P("all-filters-modal-button"), h = P("bento-button"), _ = P("bento-modal");
+  return v(), J("div", ca, [
+    $(s, {
+      "is-filter-open": e.isModalOpen,
+      "applied-filters-count": e.numberOfActiveFilters,
+      "no-applied-state-styles": "",
+      onClick: e.onClickAllFiltersModal
+    }, {
+      iconLeft: y(() => [
+        $(i, { "aria-hidden": "true" })
+      ]),
+      default: y(() => [
+        G(Z(e.t("allFilters")) + " ", 1)
+      ]),
+      _: 1
+    }, 8, ["is-filter-open", "applied-filters-count", "onClick"]),
+    $(_, {
+      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: y(() => [
+        G(Z(e.t("allFilters")), 1)
+      ]),
+      "content-col-1": y(() => [
+        j("div", {
+          ref: "allFiltersModalFiltersSection",
+          class: "b-all-filters-modal__filters",
+          onKeydown: n[1] || (n[1] = be((...d) => e.onKeydownRight && e.onKeydownRight(...d), ["right"]))
+        }, [
+          $(u, {
+            class: "b-all-filters-modal__search-bar",
+            value: e.searchTerm,
+            "input-field-aria-label": e.t("searchBar").toString(),
+            onInput: n[0] || (n[0] = (d) => e.searchTerm = d),
+            onClear: e.onSearchbarClear
+          }, null, 8, ["value", "input-field-aria-label", "onClear"]),
+          e.isEmptyResultForSearchFilter ? (v(), J("div", pa, [
+            $(p, { el: "span" }, {
+              default: y(() => [
+                G(Z(e.t("noFiltersMatchThisSearch")), 1)
+              ]),
+              _: 1
+            })
+          ])) : Q("", !0),
+          e.activeFilters.length ? (v(), J("div", ba, [
+            $(p, {
+              id: `active-filters-${e.allFiltersModalUniqueId}`,
+              class: "b-all-filters-modal__filters-section-title",
+              el: "span",
+              variant: "caption"
+            }, {
+              default: y(() => [
+                G(Z(e.t("activeFilters")), 1)
+              ]),
+              _: 1
+            }, 8, ["id"]),
+            j("ul", {
+              class: "b-all-filters-modal__filters-list",
+              "aria-labelledby": `active-filters-${e.allFiltersModalUniqueId}`
+            }, [
+              (v(!0), J(Ae, null, fe(e.activeFilters, (d) => (v(), J("li", {
+                key: `${d.label}-${d.field}`
+              }, [
+                $(f, {
+                  ref_for: !0,
+                  ref: (A) => e.allFiltersModalFilterButtons[d.label] = A,
+                  label: d.label,
+                  "applied-filters-count": e.getFilterCount(d),
+                  "is-filter-open": e.selectedFilter.label === d.label,
+                  onClick: (A) => e.selectFilter(d.label, d.field)
+                }, null, 8, ["label", "applied-filters-count", "is-filter-open", "onClick"])
+              ]))), 128))
+            ], 8, fa)
+          ])) : Q("", !0),
+          e.otherFilters.length ? (v(), J("div", va, [
+            e.activeFilters.length ? (v(), E(p, {
+              key: 0,
+              id: `other-filters-${e.allFiltersModalUniqueId}`,
+              class: "b-all-filters-modal__filters-section-title",
+              el: "span",
+              variant: "caption"
+            }, {
+              default: y(() => [
+                G(Z(e.t("otherFilters")), 1)
+              ]),
+              _: 1
+            }, 8, ["id"])) : Q("", !0),
+            j("ul", {
+              class: "b-all-filters-modal__filters-list",
+              "aria-labelledby": `other-filters-${e.allFiltersModalUniqueId}`
+            }, [
+              (v(!0), J(Ae, null, fe(e.otherFilters, (d) => (v(), J("li", {
+                key: `${d.label}-${d.field}`
+              }, [
+                $(f, {
+                  ref_for: !0,
+                  ref: (A) => e.allFiltersModalFilterButtons[d.label] = A,
+                  label: d.label,
+                  "applied-filters-count": e.getFilterCount(d),
+                  "is-filter-open": e.selectedFilter.label === d.label,
+                  onClick: (A) => e.selectFilter(d.label, d.field)
+                }, null, 8, ["label", "applied-filters-count", "is-filter-open", "onClick"])
+              ]))), 128))
+            ], 8, ma)
+          ])) : Q("", !0)
+        ], 544)
+      ]),
+      "content-col-2": y(() => [
+        j("div", {
+          class: "b-all-filters-modal__selected-filter-content",
+          onKeydown: n[2] || (n[2] = be((...d) => e.onKeydownLeft && e.onKeydownLeft(...d), ["left"]))
+        }, [
+          j("div", ya, [
+            $(p, {
+              el: "div",
+              variant: "title",
+              medium: ""
+            }, {
+              default: y(() => [
+                G(Z(e.selectedFilter.label), 1)
+              ]),
+              _: 1
+            }),
+            e.selectedFilter.description ? (v(), E(p, {
+              key: 0,
+              el: "div",
+              variant: "body",
+              wide: ""
+            }, {
+              default: y(() => [
+                G(Z(e.selectedFilter.description), 1)
+              ]),
+              _: 1
+            })) : Q("", !0)
+          ]),
+          j("div", Fa, [
+            (v(), E(Te(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,
+              onInput: e.updateFilter
+            }, null, 40, ["field", "label", "options", "value", "default-value", "onInput"]))
+          ]),
+          j("div", ga, [
+            $(h, {
+              variant: "secondary",
+              disabled: !e.isClearButtonEnabled,
+              onClick: e.clearFilter
+            }, {
+              default: y(() => [
+                G(Z(e.t("clear")), 1)
+              ]),
+              _: 1
+            }, 8, ["disabled", "onClick"])
+          ])
+        ], 32)
+      ]),
+      _: 1
+    }, 8, ["is-open", "actions", "onCloseModal"])
+  ]);
+}
+const Sa = /* @__PURE__ */ ee(da, [["render", ha], ["__scopeId", "data-v-5fbd6554"]]), 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: "フィルターをクリアしました",
+    resetFilters: "フィルターのリセット",
+    undo: "元に戻す"
+  },
+  "pt-BR": {
+    clearFilters: "Limpar filtros",
+    filtersHaveBeenCleared: "Os filtros foram apagados",
+    resetFilters: "Redefinir filtros",
+    undo: "Desfazer"
+  }
+}, Ba = {
+  key: 0,
+  class: "b-filter-bar__search-external-container"
+}, Ca = { key: 0 }, _a = {
+  i18n: { messages: Ut },
+  name: "bento-filter-bar",
+  components: {
+    BentoBooleanFilter: $t,
+    BentoDateFilter: ht,
+    BentoDateRangeFilter: St,
+    BentoInputFilter: Ft,
+    BentoInputWithDropdownFilter: gt,
+    BentoRangeFilter: Pt,
+    BentoSelectAvatarFilter: _t,
+    BentoSelectCountryFilter: Dt,
+    BentoSelectCurrencyFilter: At,
+    BentoSelectFilter: ge,
+    BentoSelectPaymentMethodFilter: It,
+    BentoSelectTagFilter: Tt,
+    BentoTeleport: ft,
+    FixedScroller: ut
+  }
+}, Aa = /* @__PURE__ */ z({
+  ..._a,
+  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: () => [] }
+  },
+  emits: [
+    _e.INPUT,
+    _e.UPDATE_FILTER_VALUES,
+    he.CLEAR,
+    he.INPUT,
+    he.UPDATE
+  ],
+  setup(e, { expose: n, emit: t }) {
+    const r = e, l = t, { t: a } = de({ messages: Ut }), i = M(null), s = c(
+      () => {
+        var B, S;
+        return (S = ((B = r.config) == null ? void 0 : B.length) > 0 ? r.config : r.value) == null ? void 0 : S.map((o) => {
+          var Y;
+          let L = (Y = r.filterValues.find(({ field: m }) => m === o.field)) == null ? void 0 : Y.value;
+          return L === void 0 && (L = (o == null ? void 0 : o.value) === void 0 && (o == null ? void 0 : o.defaultValue) !== void 0 ? o == null ? void 0 : o.defaultValue : o == null ? void 0 : o.value), { ...o, value: L !== void 0 ? L : o == null ? void 0 : o.value };
+        });
+      }
+    ), { addToast: u } = Ot(), { screenLayoutComponent: p, showSearchbarInsideContainer: f, isOneLineLayout: h } = cl(
+      i,
+      x(r, "containerSizeLayout")
+    ), _ = c(() => ({
+      "b-filter-bar__fixed-scroller": h.value,
+      "b-filter-bar__container": !h.value
+      // Multi-line
+    })), d = c(() => ({
+      "b-filter-bar__scroller-content": h.value,
+      "b-filter-bar__filters": !h.value
+      // Multi-line
+    })), A = c(() => {
+      var B;
+      return ((B = r.search) == null ? void 0 : B.inputFieldAriaLabel) || a("searchBar");
+    }), I = c(() => {
+      if (!r.search)
+        return;
+      const { hint: B, inputFieldAriaLabel: S, debounceTime: o, placeholder: L } = r.search;
+      return { hint: B, inputFieldAriaLabel: S, debounceTime: o, placeholder: L };
+    }), T = c(() => s.value.some(
+      ({ visible: S }) => S != null
+    ) ? s.value.some(({ visible: S }) => !S) : !1), V = c(
+      () => s.value.filter(({ defaultValue: B }) => B !== void 0)
+    ), w = c(() => s.value.some(
+      ({ visible: S }) => S != null
+    ) ? s.value.filter(
+      ({ defaultValue: S, visible: o, value: L }) => (
+        // eslint-disable-next-line eqeqeq
+        S === void 0 && o || r.showAppliedHiddenFilters && L != null
+      )
+    ) : s.value.filter(
+      ({ defaultValue: S, value: o }) => (
+        // eslint-disable-next-line eqeqeq
+        S === void 0 || r.showAppliedHiddenFilters && o != null
+      )
+    )), U = c(() => r.searchTerm != null), F = c(
+      () => s.value.filter(({ defaultValue: B }) => B == null).some(({ value: B }) => B != null)
+    ), R = c(() => V.value.length === 0 && F.value), k = c(() => V.value.length === 0 ? !1 : !s.value.filter(({ defaultValue: S }) => S !== void 0 || S !== null).every(({ value: S, defaultValue: o }) => JSON.stringify(S) === JSON.stringify(o)) || F.value), N = (B) => {
+      l(_e.INPUT, B), l(
+        _e.UPDATE_FILTER_VALUES,
+        B == null ? void 0 : B.filter(({ value: S }) => S !== null || S !== void 0).map(({ field: S, value: o }) => ({ field: S, value: o }))
+      );
+    }, te = (B) => {
+      const S = s.value.findIndex(
+        (L) => L.field === B.field
+      ), o = s.value.slice();
+      o[S].value = B.value, N(o);
+    }, D = () => {
+      const B = s.value.slice(), S = s.value.map(({ value: o, ...L }) => ({
+        ...L,
+        value: void 0
+      }));
+      u({
+        text: a("filtersHaveBeenCleared"),
+        action: {
+          handler: () => N(B),
+          text: a("undo")
+        }
+      }), N(S);
+    }, K = () => {
+      const B = s.value.slice(), S = s.value.map(({ defaultValue: o, ...L }) => ({
+        ...L,
+        defaultValue: o,
+        value: o
+      }));
+      u({
+        text: a("filtersHaveBeenReset"),
+        action: {
+          handler: () => N(B),
+          text: a("undo")
+        }
+      }), N(S);
+    }, q = (B) => {
+      l(he.INPUT, B), l(he.UPDATE, B);
+    }, X = () => {
+      l(he.CLEAR);
+    };
+    return n({ isClearAllVisible: R, clearAllFilters: D, isResetAllVisible: k, resetAllFilters: K }), (B, S) => (v(), J("div", {
+      ref_key: "filterBarRef",
+      ref: i,
+      class: "b-filter-bar"
+    }, [
+      !C(f) && U.value ? (v(), J("div", Ba, [
+        $(C(Ue), oe({ class: "b-filter-bar__search-bar" }, I.value, {
+          "input-field-aria-label": A.value,
+          value: B.searchTerm,
+          condensed: "",
+          onInput: q,
+          onClear: X
+        }), null, 16, ["input-field-aria-label", "value"])
+      ])) : Q("", !0),
+      (v(), E(Te(C(p)), {
+        class: ie(_.value),
+        condensed: ""
+      }, {
+        default: y(() => [
+          j("div", {
+            class: ie(d.value)
+          }, [
+            C(f) && U.value ? (v(), J("div", Ca, [
+              $(C(Ue), oe({ class: "b-filter-bar__search-bar" }, I.value, {
+                "input-field-aria-label": A.value,
+                value: B.searchTerm,
+                condensed: "",
+                onInput: q,
+                onClear: X
+              }), null, 16, ["input-field-aria-label", "value"])
+            ])) : Q("", !0),
+            V.value.length ? (v(!0), J(Ae, { key: 1 }, fe(V.value, (o) => (v(), E(Te(o.type), {
+              key: o.field,
+              field: o.field,
+              label: o.label,
+              disabled: o == null ? void 0 : o.disabled,
+              options: o.options,
+              value: o.value,
+              "default-value": o.defaultValue,
+              onUpdate: te
+            }, null, 40, ["field", "label", "disabled", "options", "value", "default-value"]))), 128)) : Q("", !0),
+            (v(!0), J(Ae, null, fe(w.value, (o) => (v(), E(Te(o.type), {
+              key: o.field,
+              field: o.field,
+              label: o.label,
+              disabled: o == null ? void 0 : o.disabled,
+              options: o.options,
+              value: o.value,
+              onUpdate: te
+            }, null, 40, ["field", "label", "disabled", "options", "value"]))), 128)),
+            T.value ? (v(), E(Sa, {
+              key: 2,
+              class: "b-filter-bar__all-filters-modal",
+              value: s.value,
+              onInput: N
+            }, null, 8, ["value"])) : Q("", !0),
+            R.value ? (v(), E(C(Ee), {
+              key: 3,
+              class: "b-filter-bar__clear-all",
+              onClick: D
+            }, {
+              iconLeft: y(() => [
+                $(C(Ge), { "aria-hidden": "true" })
+              ]),
+              default: y(() => [
+                G(Z(C(a)("clearFilters")) + " ", 1)
+              ]),
+              _: 1
+            })) : Q("", !0),
+            k.value ? (v(), E(C(Ee), {
+              key: 4,
+              class: "b-filter-bar__reset-all",
+              onClick: K
+            }, {
+              iconLeft: y(() => [
+                $(C(Ge), { "aria-hidden": "true" })
+              ]),
+              default: y(() => [
+                G(Z(C(a)("resetFilters")) + " ", 1)
+              ]),
+              _: 1
+            })) : Q("", !0)
+          ], 2)
+        ]),
+        _: 1
+      }, 8, ["class"]))
+    ], 512));
+  }
+}), mn = /* @__PURE__ */ ee(Aa, [["__scopeId", "data-v-8336859c"]]);
+export {
+  mn as B,
+  g as a,
+  _e as b,
+  ne as c
+};
+//# sourceMappingURL=filter-bar.DfIcZ5dX.js.map