@adyen/bento-vue3 1.41.0 → 1.43.0

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

@@ -0,0 +1,2867 @@
+import { defineComponent as q, useSlots as we, useAttrs as Tt, computed as p, ref as k, openBlock as g, createBlock as w, unref as $, normalizeClass as me, withCtx as h, createTextVNode as H, toDisplayString as j, createCommentVNode as Z, createElementVNode as M, renderSlot as re, createVNode as T, watch as ue, nextTick as ot, resolveComponent as A, createElementBlock as Y, withKeys as pe, toRef as z, onBeforeUpdate as Ve, provide as st, mergeProps as ie, Fragment as Ie, reactive as it, createSlots as Ae, renderList as fe, normalizeProps as Te, guardReactiveProps as Pe, onMounted as rt, resolveDynamicComponent as Oe, withDirectives as qe, vShow as Ke } from "vue";
+import { B as Ue, b as he } from "./search-bar.Dy0dBek2.js";
+import { u as Pt } from "./use-bento-toast-controller.C2wUDcoc.js";
+import { u as de } from "./i18n.CPGoe9tN.js";
+import { _ as Ut } from "./modal.vue_vue_type_script_setup_true_lang.CjD91zJo.js";
+import { g as Et } from "./base-modal.ku0lyHOs.js";
+import { B as wt } from "./button.pwNCxwPu.js";
+import { B as Je, I as Vt, b as Rt } from "./popover.D9Zw4w9l.js";
+import { B as Ot } from "./directive.O3yEdalv.js";
+import { B as Lt } from "./events.FNmSWp_P.js";
+import { g as ke } from "./generate-uid.D-HFI38h.js";
+import { u as kt } from "./use-click-outside.D6aIgS15.js";
+import { B as be, d as Ne } from "./typography.DNzU41ah.js";
+import { u as ut } from "./aria-label.CaUURpnB.js";
+import { B as dt, a as Ye } from "./base-button.N4QTXNIp.js";
+import { g as ct } from "./get-slot-text.D5WBGjic.js";
+import { u as bt } from "./use-has-slot.B7eQSabc.js";
+import { _ as W } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import { B as Nt } from "./teleport.CI0k6eaC.js";
+import { B as Mt } from "./radio-group.DIyCKfOQ.js";
+import { B as Me } from "./input-field.BQKEQIZd.js";
+import { u as pt, B as Ht } from "./dropdown.DpjMobyf.js";
+import { g as jt } from "./focus-trap.CwkbHfT8.js";
+import { C as qt, a as Kt } from "./chevron-up.DQZG_BP3.js";
+import { B as He } from "./divider.ugNXYI-T.js";
+import { B as Jt } from "./date-picker.DDsfecHp.js";
+import { f as ye } from "./date.DVGj7WKQ.js";
+import { g as ft } from "./get-date-locale.BN8xEjY0.js";
+import { a as Yt, i as zt } from "./calendar.S9HFQA8j.js";
+import { B as Wt, D as Gt, i as ze } from "./date-range-picker.DjPmRy0E.js";
+import { D as We } from "./date-input.BqBdAO1E.js";
+import { B as Zt } from "./button-actions.Bjfo46Q_.js";
+import { B as Qt } from "./avatar.DqdDHXay.js";
+import { c as Ge, b as Xt } from "./use-cached-selected-values.BOZK76mN.js";
+import { L as vt } from "./listbox-option-tag.DU_NVK_z.js";
+import { u as xt } from "./use-country-items.CTyhUEHS.js";
+import { B as el } from "./payment-method.Lwl-3chY.js";
+import { R as Ze } from "./refresh.DvQeGwUF.js";
+import { F as tl } from "./fixed-scroller.DM2JOokC.js";
+import "../assets/filter-bar.css";
+const ll = { class: "b-filter-bar-button__container" }, al = { class: "b-filter-bar-button__label-container" }, nl = {}, ol = /* @__PURE__ */ q({
+  ...nl,
+  __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 },
+    /**
+     * 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: l }) {
+    const a = e, i = l, t = we(), n = Tt(), o = bt(t), s = p(() => t.default ? ct(t)("default") : null), r = ut({ ariaLabel: s }), b = k(null), f = p(() => {
+      var u;
+      return {
+        "aria-controls": (u = n["aria-controls"]) == null ? void 0 : u.toString()
+      };
+    }), I = p(() => ({
+      "b-filter-bar-button--attention": a.appliedFiltersCount || a.secondaryLabel || a.isPersistentFilter,
+      "b-filter-bar-button--filter-open": a.isFilterOpen,
+      "b-filter-bar-button--with-secondary-label": a.secondaryLabel,
+      "b-filter-bar-button--with-counter": a.appliedFiltersCount
+    })), D = (u) => {
+      u.preventDefault(), a.disabled || i("click", u);
+    };
+    return (u, B) => (g(), w($(dt), {
+      ref_key: "filterBarButtonRef",
+      ref: b,
+      class: me(["b-filter-bar-button", I.value]),
+      disabled: e.disabled,
+      "aria-label": $(r),
+      "aria-controls": f.value["aria-controls"],
+      type: "button",
+      onClick: D
+    }, {
+      iconRight: h(() => [
+        e.appliedFiltersCount ? (g(), w($(be), {
+          key: 0,
+          class: "b-filter-bar-button__counter",
+          el: "span",
+          variant: "body",
+          stronger: ""
+        }, {
+          default: h(() => [
+            H(j(e.appliedFiltersCount), 1)
+          ]),
+          _: 1
+        })) : Z("", !0)
+      ]),
+      default: h(() => [
+        M("div", ll, [
+          $(o)("iconLeft") ? re(u.$slots, "iconLeft", { key: 0 }, void 0, !0) : Z("", !0),
+          M("div", al, [
+            T($(be), {
+              el: "span",
+              variant: "body",
+              stronger: "",
+              class: "b-filter-bar-button__label"
+            }, {
+              default: h(() => [
+                M("span", null, [
+                  re(u.$slots, "default", {}, void 0, !0)
+                ]),
+                e.secondaryLabel ? (g(), w($(be), {
+                  key: 0,
+                  el: "span",
+                  variant: "body",
+                  stronger: "",
+                  class: "b-filter-bar-button__label"
+                }, {
+                  default: h(() => B[0] || (B[0] = [
+                    H(":")
+                  ])),
+                  _: 1
+                })) : Z("", !0)
+              ]),
+              _: 3
+            }),
+            e.secondaryLabel ? (g(), w($(be), {
+              key: 0,
+              el: "span",
+              variant: "body",
+              stronger: "",
+              class: "b-filter-bar-button__secondary-label"
+            }, {
+              default: h(() => [
+                H(j(e.secondaryLabel), 1)
+              ]),
+              _: 1
+            })) : Z("", !0)
+          ])
+        ])
+      ]),
+      _: 3
+    }, 8, ["class", "disabled", "aria-label", "aria-controls"]));
+  }
+}), Ee = /* @__PURE__ */ W(ol, [["__scopeId", "data-v-fc0dbb83"]]);
+var v = /* @__PURE__ */ ((e) => (e.INPUT = "input", e.UPDATE = "update", e))(v || {}), Ce = /* @__PURE__ */ ((e) => (e.INPUT = "input", e.UPDATE_FILTER_VALUES = "update:filter-values", e))(Ce || {}), te = /* @__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))(te || {}), ae = /* @__PURE__ */ ((e) => (e.APPLY = "apply", e.CLEAR = "clear", e.OPEN = "open", e.CLOSE = "close", e.RESET = "reset", e))(ae || {});
+const Qe = {
+  "en-US": {
+    clear: "Clear",
+    apply: "Apply",
+    reset: "Reset",
+    filterButton: "Filter by {function}"
+  },
+  "pt-BR": {
+    clear: "Limpar",
+    apply: "Aplicar",
+    reset: "Reiniciar"
+  },
+  "ja-JP": {
+    clear: "クリア",
+    apply: "適用",
+    reset: "リセット"
+  }
+}, sl = q({
+  i18n: { messages: Qe },
+  name: "bento-base-filter",
+  components: {
+    BentoPopover: Je,
+    BentoTeleport: Nt,
+    FilterBarButton: Ee
+  },
+  directives: { BentoClickOutsideDirective: Ot },
+  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
+  },
+  emits: [
+    ae.APPLY,
+    ae.CLEAR,
+    ae.OPEN,
+    ae.CLOSE,
+    ae.RESET
+  ],
+  setup(e, { emit: l }) {
+    const { t: a } = de({ messages: Qe }), i = ke("base-filter-popover"), t = k(!1), n = k(null), o = k(null), s = p(() => e.defaultValue !== null), r = p(
+      () => s.value ? a("filterButton", {
+        function: e.label
+      }) : b.value
+    ), b = p(() => e.buttonLabel || e.label), f = () => {
+      t.value && (t.value = !1, ot(() => {
+        var P, V;
+        (V = (P = n.value) == null ? void 0 : P.$el) == null || V.focus();
+      }), l(ae.CLOSE));
+    }, I = () => {
+      f(), s.value ? l(ae.RESET) : l(ae.CLEAR);
+    }, D = () => f(), u = () => {
+      t.value ? f() : (t.value = !0, l(ae.OPEN));
+    }, B = () => {
+      f(), l(ae.APPLY);
+    }, R = p(() => [
+      {
+        title: a("apply"),
+        event: B,
+        disabled: e.disableApplyButton
+      },
+      {
+        title: s.value ? a("reset") : a("clear"),
+        event: I,
+        disabled: e.disableSecondaryButton
+      }
+    ]);
+    return ue(
+      () => t.value,
+      (P, V) => {
+        var U, _;
+        !P && V && (_ = (U = n.value) == null ? void 0 : U.filterBarButtonRef) != null && _.bentoBaseButtonRef && n.value.filterBarButtonRef.bentoBaseButtonRef.focus();
+      }
+    ), kt(o, D, { ignore: [n] }), {
+      // Values
+      actions: R,
+      popoverId: i,
+      isFilterOpen: t,
+      isPersistentFilter: s,
+      computedAriaLabel: r,
+      computedButtonText: b,
+      // Enums
+      BentoTooltipPosition: Lt,
+      // Events
+      onClickFilter: u,
+      onClickApply: B,
+      onClickSecondaryAction: I,
+      onClickOutside: D,
+      closePopover: f,
+      // Refs
+      filterButtonRef: n,
+      popoverRef: o
+    };
+  }
+}), il = { key: 0 }, rl = {
+  key: 1,
+  class: "b-base-filter"
+};
+function ul(e, l, a, i, t, n) {
+  const o = A("filter-bar-button"), s = A("bento-popover"), r = A("bento-teleport");
+  return e.onlySlot ? (g(), Y("div", il, [
+    re(e.$slots, "default", {}, void 0, !0)
+  ])) : (g(), Y("div", rl, [
+    T(o, {
+      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: pe(e.closePopover, ["esc"])
+    }, {
+      default: h(() => [
+        H(j(e.computedButtonText), 1)
+      ]),
+      _: 1
+    }, 8, ["aria-label", "aria-controls", "applied-filters-count", "disabled", "is-persistent-filter", "is-filter-open", "secondary-label", "onClick", "onKeydown"]),
+    e.filterButtonRef ? (g(), w(r, { key: 0 }, {
+      default: h(() => [
+        e.filterButtonRef ? (g(), w(s, {
+          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: h(() => [
+            M("div", {
+              onKeydown: l[0] || (l[0] = pe((...b) => e.closePopover && e.closePopover(...b), ["esc"]))
+            }, [
+              re(e.$slots, "default", {}, void 0, !0)
+            ], 32)
+          ]),
+          _: 3
+        }, 8, ["id", "open", "actions", "target-element", "title", "fit-content", "without-space"])) : Z("", !0)
+      ]),
+      _: 3
+    })) : Z("", !0)
+  ]));
+}
+const Fe = /* @__PURE__ */ W(sl, [["render", ul], ["__scopeId", "data-v-5245899a"]]), dl = (e) => e instanceof Array, Xe = (e) => dl(e) ? e.length === 0 || e.every((l) => l === "") : !e, xe = (e, l) => JSON.stringify(e) === JSON.stringify(l), ve = (e, l) => {
+  const a = k(e.value);
+  ue(
+    () => e.value,
+    () => {
+      a.value = e.value;
+    }
+  );
+  const i = p(() => Xe(e.value)), t = p(
+    () => l.value !== null ? xe(l.value, e.value) : i.value
+  ), n = p(() => xe(a.value, e.value) || Xe(a.value) && i.value);
+  return {
+    internalFilterValue: a,
+    isSecondaryButtonDisabled: t,
+    isApplyButtonDisabled: n
+  };
+}, Se = (e, l) => {
+  const a = e == null ? void 0 : e.toString();
+  return (a == null ? void 0 : a.length) > l ? `${a == null ? void 0 : a.slice(0, l)}...` : a;
+}, cl = q({
+  name: "bento-input-filter",
+  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: String, 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.
+     * If the options.variant is equal to 'dropdown', the value should be of type `{ inputValue: string | null; dropdownValue?: string }`.
+     */
+    value: { type: [String, Object], 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:
+     *   - dropdown: all the dropdown properties that can be set in the inner dropdown of the input field. @see BentoDropdown for more info.
+     *   - dropdownPosition: allow the user to set the dropdown on the left or right side. Accepts the `start` or `end` values.
+     */
+    options: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: [v.INPUT, v.UPDATE],
+  setup(e, { emit: l }) {
+    var O, y;
+    const a = k(null), i = k((y = (O = e == null ? void 0 : e.options) == null ? void 0 : O.dropdown) == null ? void 0 : y.value), t = p(
+      () => {
+        var d, c;
+        return ((d = e == null ? void 0 : e.options) == null ? void 0 : d.variant) === "dropdown" && ((c = e == null ? void 0 : e.options) == null ? void 0 : c.dropdown) !== void 0;
+      }
+    ), n = p(
+      () => {
+        var d;
+        return t.value ? { ...(d = e == null ? void 0 : e.options) == null ? void 0 : d.dropdown, value: i.value } : void 0;
+      }
+    ), o = p(() => {
+      var d;
+      return ((d = e == null ? void 0 : e.options) == null ? void 0 : d.variant) === "dropdown" ? "dropdown" : "default";
+    }), s = p(
+      () => {
+        var d;
+        return t.value ? (d = e.value) == null ? void 0 : d.inputValue : e == null ? void 0 : e.value;
+      }
+    ), { internalFilterValue: r, isSecondaryButtonDisabled: b, isApplyButtonDisabled: f } = ve(
+      s,
+      z(e, "defaultValue")
+    ), I = p(() => e.label), D = p(() => Se(s.value, 12)), u = p(() => ({
+      "b-input-filter--only-slot": e.onlySlot
+    }));
+    Ve(() => {
+      r.value === "" && (r.value = null);
+    }), ue(a, () => {
+      var d;
+      (d = a.value) == null || d.focusInput();
+    });
+    const B = () => {
+      r.value = s.value;
+    }, R = () => {
+      !r.value && e.defaultValue !== null && (r.value = e.defaultValue), l(v.UPDATE, {
+        ...e,
+        value: t.value ? { inputValue: r.value, dropdownValue: i.value } : r.value
+      });
+    }, P = () => l(v.UPDATE, { ...e, value: e.defaultValue }), V = () => {
+      r.value = null, R();
+    }, U = () => {
+      l(v.INPUT, { ...e, value: r.value });
+    }, _ = (d) => {
+      r.value = d;
+    }, C = (d) => {
+      i.value = d;
+    };
+    return st(Vt, t.value), ue(
+      () => e.options,
+      () => {
+        var d, c, L;
+        ((d = e.options) != null && d.dropdown || (c = e.options) != null && c.dropdownPosition || (L = e.options) != null && L.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 }
+    ), {
+      // Values
+      buttonLabel: I,
+      buttonSecondaryLabel: D,
+      conditionalClasses: u,
+      dropdownProp: n,
+      inputVariant: o,
+      internalFilterValue: r,
+      isApplyButtonDisabled: f,
+      isDropdownVariant: t,
+      isSecondaryButtonDisabled: b,
+      // Refs
+      inputTextRef: a,
+      // Events
+      updateFilter: R,
+      clearFilter: V,
+      openFilter: B,
+      resetFilter: P,
+      onDropdownInput: C,
+      onInput: U,
+      setInternalFilterValue: _
+    };
+  }
+});
+function bl(e, l, a, i, t, n) {
+  const o = A("bento-input-field"), s = A("bento-base-filter");
+  return g(), w(s, ie(e.$props, {
+    "button-label": e.buttonLabel,
+    "button-secondary-label": e.buttonSecondaryLabel,
+    "disable-apply-button": e.isApplyButtonDisabled,
+    "disable-secondary-button": e.isSecondaryButtonDisabled,
+    "only-slot": e.onlySlot,
+    "popover-overflow-visible": e.isDropdownVariant,
+    onApply: e.updateFilter,
+    onClear: e.clearFilter,
+    onOpen: e.openFilter,
+    onReset: e.resetFilter
+  }), {
+    default: h(() => {
+      var r;
+      return [
+        M("div", {
+          class: me(["b-input-filter", e.conditionalClasses]),
+          onKeydown: l[0] || (l[0] = pe((...b) => e.updateFilter && e.updateFilter(...b), ["enter"])),
+          onInput: l[1] || (l[1] = (...b) => e.onInput && e.onInput(...b))
+        }, [
+          T(o, {
+            ref: "inputTextRef",
+            dropdown: e.dropdownProp,
+            "dropdown-position": (r = e.options) == null ? void 0 : r.dropdownPosition,
+            variant: e.inputVariant,
+            value: e.internalFilterValue,
+            onInput: e.setInternalFilterValue,
+            onDropdownInput: e.onDropdownInput
+          }, null, 8, ["dropdown", "dropdown-position", "variant", "value", "onInput", "onDropdownInput"])
+        ], 34)
+      ];
+    }),
+    _: 1
+  }, 16, ["button-label", "button-secondary-label", "disable-apply-button", "disable-secondary-button", "only-slot", "popover-overflow-visible", "onApply", "onClear", "onOpen", "onReset"]);
+}
+const yt = /* @__PURE__ */ W(cl, [["render", bl], ["__scopeId", "data-v-fa484ab1"]]), pl = {
+  name: "bento-input-with-dropdown-filter"
+}, fl = /* @__PURE__ */ q({
+  ...pl,
+  props: {
+    disabled: { type: Boolean },
+    defaultValue: { default: void 0 },
+    field: {},
+    label: {},
+    onlySlot: { type: Boolean, default: !1 },
+    options: { default: void 0 },
+    value: { default: void 0 }
+  },
+  emits: [v.INPUT, v.UPDATE],
+  setup(e, { emit: l }) {
+    const a = e, i = l, t = k(null), { internalFilterValue: n, isSecondaryButtonDisabled: o, isApplyButtonDisabled: s } = ve(z(a, "value"), z(a, "defaultValue")), r = p(() => a.label), b = p(() => {
+      var C;
+      return Se((C = a.value) == null ? void 0 : C.inputValue, 12);
+    }), f = p(() => {
+      var C, O;
+      return {
+        ...((C = a.options) == null ? void 0 : C.dropdown) || {},
+        value: (O = n.value) == null ? void 0 : O.dropdownValue
+      };
+    }), I = p(() => ({
+      "b-input-with-dropdown-filter--only-slot": a.onlySlot
+    })), D = p(() => {
+      var O, y;
+      return !(!!((O = n.value) != null && O.inputValue) && !!((y = n.value) != null && y.dropdownValue)) || s.value;
+    });
+    Ve(() => {
+      var C;
+      ((C = n.value) == null ? void 0 : C.inputValue) === "" && (n.value = { ...n.value, inputValue: void 0 });
+    }), ue(t, () => {
+      var C;
+      (C = t.value) == null || C.focusInput();
+    });
+    const u = () => {
+      n.value = a.value;
+    }, B = () => {
+      var C;
+      !((C = n.value) != null && C.inputValue) && a.defaultValue !== null && (n.value = { ...a.defaultValue }), i(v.UPDATE, {
+        ...a,
+        value: n.value
+      });
+    }, R = () => i(v.UPDATE, { ...a, value: a.defaultValue }), P = () => {
+      n.value = null, B();
+    }, V = () => {
+      i(v.INPUT, { ...a, value: n.value });
+    }, U = (C) => {
+      n.value = { ...n.value, inputValue: C };
+    }, _ = (C) => {
+      n.value = { ...n.value, dropdownValue: C };
+    };
+    return st(Rt, !0), (C, O) => (g(), w($(Fe), ie(C.$props, {
+      "button-label": r.value,
+      "button-secondary-label": b.value,
+      "disable-apply-button": D.value,
+      "disable-secondary-button": $(o),
+      "only-slot": C.onlySlot,
+      onApply: B,
+      onClear: P,
+      onOpen: u,
+      onReset: R
+    }), {
+      default: h(() => {
+        var y, d;
+        return [
+          M("div", {
+            class: me(["b-input-with-dropdown-filter", I.value]),
+            onKeydown: pe(B, ["enter"]),
+            onInput: V
+          }, [
+            T($(Me), {
+              ref_key: "inputTextRef",
+              ref: t,
+              dropdown: f.value,
+              "dropdown-position": (y = C.options) == null ? void 0 : y.dropdownPosition,
+              variant: "dropdown",
+              value: (d = $(n)) == null ? void 0 : d.inputValue,
+              onInput: U,
+              onDropdownInput: _
+            }, null, 8, ["dropdown", "dropdown-position", "value"])
+          ], 34)
+        ];
+      }),
+      _: 1
+    }, 16, ["button-label", "button-secondary-label", "disable-apply-button", "disable-secondary-button", "only-slot"]));
+  }
+}), vl = /* @__PURE__ */ W(fl, [["__scopeId", "data-v-f096c58d"]]), yl = q({
+  name: "bento-date-filter",
+  components: {
+    BentoBaseFilter: Fe,
+    BentoDatePicker: Jt,
+    BentoDivider: He,
+    Calendar: Yt
+  },
+  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: [v.INPUT, v.UPDATE],
+  setup(e, { emit: l }) {
+    const { locale: a } = de(void 0, !0), i = ft(), { internalFilterValue: t, isSecondaryButtonDisabled: n, isApplyButtonDisabled: o } = ve(
+      z(e, "value"),
+      z(e, "defaultValue")
+    ), s = p(
+      () => e.value ? ye(e.value, "dd MMM, yyyy", {
+        locale: i[a.value.substring(0, 2)] || i.enUS
+      }) : null
+    ), r = p(() => e.label), b = p(() => s.value), f = () => {
+      l(v.UPDATE, { ...e, value: t.value });
+    }, I = () => {
+      t.value = null, f();
+    }, D = () => {
+      t.value = e.defaultValue, f();
+    }, u = () => {
+      t.value = e.value;
+    }, B = (P) => {
+      t.value = P, l(v.INPUT, { ...e, value: t.value });
+    };
+    return {
+      // Values
+      internalFilterValue: t,
+      isApplyButtonDisabled: o,
+      isSecondaryButtonDisabled: n,
+      buttonLabel: r,
+      buttonSecondaryLabel: b,
+      // Events
+      clearFilter: I,
+      onDateSelected: B,
+      openFilter: u,
+      updateFilter: f,
+      resetFilter: D,
+      onDateInputSelected: (P) => {
+        t.value = P, B(P), f();
+      }
+    };
+  }
+}), ml = { class: "b-date-filter" };
+function Fl(e, l, a, i, t, n) {
+  const o = A("bento-date-picker"), s = A("bento-divider"), r = A("calendar"), b = A("bento-base-filter");
+  return g(), w(b, {
+    "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: h(() => {
+      var f, I, D, u;
+      return [
+        e.onlySlot ? (g(), w(o, {
+          key: 0,
+          value: e.internalFilterValue,
+          "first-day-of-week": (f = e.options) == null ? void 0 : f.firstDayOfWeek,
+          "is-date-disabled": (I = e.options) == null ? void 0 : I.isDateDisabled,
+          onInput: e.onDateInputSelected
+        }, null, 8, ["value", "first-day-of-week", "is-date-disabled", "onInput"])) : (g(), Y(Ie, { key: 1 }, [
+          T(s, { class: "b-date-filter__divider" }),
+          M("div", ml, [
+            T(r, {
+              "first-day-of-week": (D = e.options) == null ? void 0 : D.firstDayOfWeek,
+              "is-date-disabled": (u = e.options) == null ? void 0 : u.isDateDisabled,
+              "number-of-months": 1,
+              value: e.internalFilterValue,
+              onInput: e.onDateSelected
+            }, null, 8, ["first-day-of-week", "is-date-disabled", "value", "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 mt = /* @__PURE__ */ W(yl, [["render", Fl], ["__scopeId", "data-v-389ccc27"]]), et = {
+  "en-US": {
+    apply: "Apply",
+    clear: "Clear",
+    reset: "Reset"
+  },
+  "pt-BR": {
+    apply: "Aplicar",
+    clear: "Limpar",
+    reset: "Reiniciar"
+  },
+  "ja-JP": {
+    apply: "適用",
+    clear: "クリア",
+    reset: "リセット"
+  }
+}, gl = q({
+  i18n: { messages: et },
+  name: "bento-date-range-filter",
+  components: {
+    BentoBaseFilter: Fe,
+    BentoButtonActions: Zt,
+    BentoDateRangePicker: Wt,
+    BentoTypography: be,
+    BentoDivider: He,
+    DateRangePickerCalendar: Gt
+  },
+  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: [v.INPUT, v.UPDATE],
+  setup(e, { emit: l }) {
+    var ne, oe, Q, K;
+    const { locale: a, t: i } = de({ messages: et }), t = ft(), { internalFilterValue: n, isSecondaryButtonDisabled: o, isApplyButtonDisabled: s } = ve(
+      z(e, "value"),
+      z(e, "defaultValue")
+    ), r = k(!1), b = (S) => S ? ye(S, We.NUMERIC_DATE_YEAR_FIRST, {
+      locale: t[a.value.substring(0, 2)] || t.enUS
+    }) : void 0, f = (S) => S ? ye(S, We.HOUR_MINUTE_SECONDS, {
+      locale: t[a.value.substring(0, 2)] || t.enUS
+    }) : "", I = k(null), D = k(!1), u = it({
+      startDate: b((ne = e.value) == null ? void 0 : ne.startDate),
+      endDate: b((oe = e.value) == null ? void 0 : oe.endDate),
+      startTime: f((Q = e.value) == null ? void 0 : Q.startDate),
+      endTime: f((K = e.value) == null ? void 0 : K.endDate)
+    });
+    function B(S) {
+      return (S == null ? void 0 : S.length) !== void 0;
+    }
+    const R = p(() => {
+      var S, J, G, m, F, E, N, X, se;
+      if (!((S = e.value) != null && S.startDate) && !e.value.endDate)
+        return null;
+      if (B((J = e.options) == null ? void 0 : J.quickSelectRanges) && ((m = (G = e.options) == null ? void 0 : G.quickSelectRanges) == null ? void 0 : m.length) > 0) {
+        const ce = (E = (F = e.options) == null ? void 0 : F.quickSelectRanges) == null ? void 0 : E.find(
+          ({ data: ee }) => ze(ee == null ? void 0 : ee.startDate, e.value.startDate) && ze(ee == null ? void 0 : ee.endDate, e.value.endDate)
+        );
+        if (ce)
+          return ce.label;
+      }
+      return zt((N = e.value) == null ? void 0 : N.startDate, (X = e.value) == null ? void 0 : X.endDate) && ((se = e == null ? void 0 : e.options) != null && se.allowTimeInput) ? `${ye(e.value.startDate, "dd MMM, yyyy HH:mm:ss", {
+        locale: t[a.value.substring(0, 2)] || t.enUS
+      })} - ${ye(e.value.endDate, "HH:mm:ss", {
+        locale: t[a.value.substring(0, 2)] || t.enUS
+      })}` : `${ye(e.value.startDate, "dd MMM, yyyy", {
+        locale: t[a.value.substring(0, 2)] || t.enUS
+      })} - ${ye(e.value.endDate, "dd MMM, yyyy", {
+        locale: t[a.value.substring(0, 2)] || t.enUS
+      })}`;
+    }), P = p(() => e.label), V = p(() => R.value), U = () => {
+      I.value.closePopover();
+      const { onlySlot: S, ...J } = e;
+      l(v.UPDATE, { ...J, value: n.value });
+    }, _ = () => {
+      n.value = void 0, U();
+    }, C = () => {
+      n.value = e.defaultValue, U();
+    }, O = () => {
+      n.value = e.value;
+    }, y = (S) => {
+      r.value = !1, n.value = S, u.startDate = b(S.startDate), u.endDate = b(S.endDate), l(v.INPUT, { ...e, value: n.value });
+    }, d = (S) => {
+      S != null && S.startDate && (S != null && S.endDate) && (n.value = S, u.startDate = b(S.startDate), u.endDate = b(S.endDate), l(v.INPUT, { ...e, value: n.value }));
+    }, c = (S) => {
+      y(S), l(v.INPUT, { ...e, value: n.value });
+    }, L = p(
+      () => [
+        {
+          title: i("apply"),
+          event: U,
+          disabled: r.value || D.value || s.value
+        },
+        {
+          title: e.defaultValue ? i("reset") : i("clear"),
+          event: e.defaultValue ? C : _,
+          disabled: D.value && o.value
+        }
+      ]
+    );
+    return {
+      // Refs
+      baseFilter: I,
+      // Values
+      actions: L,
+      formData: u,
+      internalFilterValue: n,
+      isApplyButtonDisabled: s,
+      isSecondaryButtonDisabled: o,
+      isSelectingDate: r,
+      buttonLabel: P,
+      buttonSecondaryLabel: V,
+      // Events
+      onDateSelected: y,
+      openFilter: O,
+      updateFilter: U,
+      onDatePickerRangeError: () => {
+        D.value = !0, n.value = { startDate: void 0, endDate: void 0 }, l(v.INPUT, { ...e, value: n.value });
+      },
+      onDatePickerRangeFormDateInputUpdate: (S) => {
+        D.value = !1, S.startTime && (u.startTime = S.startTime), S.endTime && (u.endTime = S.endTime);
+      },
+      onDateInputSelected: c,
+      onRangeSelectorInput: d
+    };
+  }
+}), hl = {
+  key: 1,
+  class: "b-date-range-filter"
+};
+function Sl(e, l, a, i, t, n) {
+  const o = A("bento-date-range-picker"), s = A("bento-typography"), r = A("bento-divider"), b = A("bento-button-actions"), f = A("date-range-picker-calendar"), I = A("bento-base-filter");
+  return g(), w(I, {
+    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
+  }, {
+    default: h(() => {
+      var D, u, B, R, P, V, U, _, C, O, y, d, c, L, x;
+      return [
+        e.onlySlot ? (g(), w(o, {
+          key: 0,
+          "allow-time-input": (D = e.options) == null ? void 0 : D.allowTimeInput,
+          value: e.internalFilterValue,
+          "first-day-of-week": (u = e.options) == null ? void 0 : u.firstDayOfWeek,
+          "is-date-disabled": (B = e.options) == null ? void 0 : B.isDateDisabled,
+          "number-of-months": (R = e.options) == null ? void 0 : R.numberOfMonths,
+          "quick-select-ranges": (P = e.options) == null ? void 0 : P.quickSelectRanges,
+          onInput: e.onDateInputSelected
+        }, null, 8, ["allow-time-input", "value", "first-day-of-week", "is-date-disabled", "number-of-months", "quick-select-ranges", "onInput"])) : (g(), Y("div", hl, [
+          T(f, {
+            "allow-time-input": (V = e.options) == null ? void 0 : V.allowTimeInput,
+            "first-day-of-week": (U = e.options) == null ? void 0 : U.firstDayOfWeek,
+            "is-date-disabled": (_ = e.options) == null ? void 0 : _.isDateDisabled,
+            granularities: (C = e.options) == null ? void 0 : C.granularities,
+            "max-range": (O = e.options) == null ? void 0 : O.maxRange,
+            min: (y = e.options) == null ? void 0 : y.min,
+            max: (d = e.options) == null ? void 0 : d.max,
+            "number-of-months": (c = e.options) == null ? void 0 : c.numberOfMonths,
+            "quick-select-ranges": (L = e.options) == null ? void 0 : L.quickSelectRanges,
+            value: e.internalFilterValue,
+            "date-form-data": e.formData,
+            "show-end-date-on-open": (x = e.options) == null ? void 0 : x.showEndDateOnOpen,
+            onInput: e.onDateSelected,
+            onCustomRange: e.onRangeSelectorInput,
+            onError: e.onDatePickerRangeError,
+            onFormDate: e.onDatePickerRangeFormDateInputUpdate,
+            onStartDateSelected: l[0] || (l[0] = (le) => e.isSelectingDate = !0)
+          }, {
+            title: h(() => [
+              T(s, {
+                strongest: "",
+                variant: "body",
+                el: "span"
+              }, {
+                default: h(() => [
+                  H(j(e.label), 1)
+                ]),
+                _: 1
+              })
+            ]),
+            actions: h(() => [
+              T(r, { class: "b-date-range-filter__divider" }),
+              T(b, {
+                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", "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"]);
+}
+const Ft = /* @__PURE__ */ W(gl, [["render", Sl], ["__scopeId", "data-v-77570933"]]), gt = {
+  "en-US": {
+    all: "All",
+    noFiltersMatchThisSearch: "No filters match this search",
+    searchFilter: "Search {filter}"
+  },
+  "pt-BR": {
+    all: "Todos"
+  },
+  "ja-JP": {
+    all: "すべて"
+  }
+}, Bl = { class: "b-select-filter-button__search-bar" }, Dl = { class: "b-select-filter-button__divider" }, Cl = {
+  i18n: { messages: gt }
+}, Il = /* @__PURE__ */ q({
+  ...Cl,
+  __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: l }) {
+    var ne, oe;
+    const a = we(), i = l, t = e, { t: n } = de({ messages: gt }), o = k(""), s = z(t, "options"), r = k(t.options.listboxItems ?? []), { cachedSelectedListboxOptions: b, setCachedValues: f, resetCache: I } = Ge(
+      r,
+      z(t, "value"),
+      z(s.value, "multiple")
+    ), { cachedSelectedListboxOptions: D } = Ge(
+      r,
+      z(t, "defaultValue"),
+      z(s.value, "multiple")
+    ), { internalFilterValue: u, isSecondaryButtonDisabled: B, isApplyButtonDisabled: R } = ve(b, D);
+    ue(s, () => {
+      r.value = s.value.listboxItems ?? [];
+    });
+    const P = pt(
+      o,
+      r,
+      (oe = (ne = t.options) == null ? void 0 : ne.search) == null ? void 0 : oe.searchEvent
+    ), V = p(() => n("noFiltersMatchThisSearch")), U = p(() => t.label), _ = p(() => {
+      var S, J, G, m;
+      const Q = !((S = t == null ? void 0 : t.options) != null && S.multiple) && (t == null ? void 0 : t.value), K = ((G = ((J = t == null ? void 0 : t.options) == null ? void 0 : J.multiple) && t.value) == null ? void 0 : G.length) === 1;
+      if (Q || K) {
+        let E = (m = t.options.listboxItems.flatMap((N) => N.items ? N.items : N).find(
+          ({ value: N }) => {
+            var X;
+            return Array.isArray(t.value) ? (X = t == null ? void 0 : t.value) == null ? void 0 : X.includes(N) : N === t.value;
+          }
+        )) == null ? void 0 : m.label;
+        return !E && t.value && (E = t.value[0]), Se(E, 12);
+      }
+      return null;
+    }), C = p(() => ke(`filter-listbox-${t.field}`)), O = (Q) => {
+      u.value = Q;
+      const { onlySlot: K, ...S } = t;
+      if (t.options.multiple) {
+        const G = Q.length ? u.value.map(({ value: m }) => m) : null;
+        i(v.INPUT, { ...S, value: G });
+        return;
+      }
+      const J = Q.length ? Q[0].value : null;
+      i(v.INPUT, { ...S, value: J });
+    }, y = () => {
+      var J, G, m;
+      const { onlySlot: Q, ...K } = t;
+      if (t.options.multiple) {
+        u.value && ((J = u.value) == null ? void 0 : J.length) === 0 && (u.value = t.defaultValue !== null ? D.value : void 0);
+        const F = (G = u.value) != null && G.length ? (m = u.value) == null ? void 0 : m.map(({ value: E }) => E) : null;
+        i(v.UPDATE, {
+          ...K,
+          value: F
+        });
+        return;
+      }
+      const S = u.value.length ? u.value[0].value : void 0;
+      i(v.UPDATE, { ...K, value: S });
+    }, d = () => {
+      u.value = b.value;
+    }, c = () => {
+      o.value && (o.value = "");
+    }, L = () => {
+      f(D.value), u.value = D.value, y();
+    }, x = () => {
+      I(), u.value = [], y();
+    }, le = p(() => {
+      var S, J;
+      if (t.value == null || !t.options.multiple)
+        return null;
+      const Q = (S = t.options.listboxItems) == null ? void 0 : S.reduce((G, m) => {
+        var F;
+        return G += (F = m == null ? void 0 : m.items) != null && F.length ? m.items.length : 1, G;
+      }, 0), K = (J = t.value) == null ? void 0 : J.length;
+      return K === 1 ? null : K === Q ? n("all") : K;
+    });
+    return (Q, K) => (g(), w($(Fe), {
+      "applied-filters-count": le.value,
+      "button-label": U.value,
+      "button-secondary-label": _.value,
+      disabled: e.disabled,
+      "disable-apply-button": $(R),
+      "disable-secondary-button": $(B),
+      "default-value": e.defaultValue,
+      label: e.label,
+      field: e.field,
+      "only-slot": !1,
+      onApply: y,
+      onClear: x,
+      onReset: L,
+      onOpen: d,
+      onClose: c
+    }, {
+      default: h(() => {
+        var S, J, G, m, F, E, N, X, se, ce, ee, _e, je;
+        return [
+          M("div", Bl, [
+            T($(Ue), {
+              "debounce-time": (J = (S = e.options) == null ? void 0 : S.search) == null ? void 0 : J.debounceTime,
+              value: o.value,
+              "input-field-aria-label": $(n)("searchFilter", { filter: e.label.toLocaleLowerCase() }),
+              onInput: K[0] || (K[0] = (Re) => o.value = Re)
+            }, null, 8, ["debounce-time", "value", "input-field-aria-label"])
+          ]),
+          M("div", Dl, [
+            T($(He))
+          ]),
+          T($(Xt), {
+            id: C.value,
+            "aria-label": e.label,
+            class: "b-select-filter-button__wrapper",
+            "empty-state": (G = e.options) == null ? void 0 : G.emptyState,
+            "has-more-items": (F = (m = e.options) == null ? void 0 : m.lazy) == null ? void 0 : F.hasMoreItems,
+            items: $(P),
+            "is-option-disabled": (E = e.options) == null ? void 0 : E.isOptionDisabled,
+            "lazy-load-type": (X = (N = e.options) == null ? void 0 : N.lazy) == null ? void 0 : X.lazyLoadType,
+            loading: (ce = (se = e.options) == null ? void 0 : se.lazy) == null ? void 0 : ce.loading,
+            multiple: (ee = e.options) == null ? void 0 : ee.multiple,
+            "static-categories": (_e = e.options) == null ? void 0 : _e.staticCategories,
+            "no-results-message": V.value,
+            searching: !!o.value,
+            "selected-value": $(u),
+            "virtual-scroll": (je = e.options) == null ? void 0 : je.virtualScroll,
+            onSelect: O,
+            onSpacePressed: O,
+            onEnterPressed: O,
+            onShowMore: K[1] || (K[1] = (Re) => {
+              var De, $e;
+              return ($e = (De = e.options) == null ? void 0 : De.lazy) == null ? void 0 : $e.showMoreEvent();
+            })
+          }, Ae({ _: 2 }, [
+            fe($(a), (Re, De) => ({
+              name: De,
+              fn: h(($e) => [
+                re(Q.$slots, De, Te(Pe($e)), void 0, !0)
+              ])
+            }))
+          ]), 1032, ["id", "aria-label", "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"]));
+  }
+}), Al = /* @__PURE__ */ W(Il, [["__scopeId", "data-v-3cbbd712"]]), ht = {
+  "en-US": {
+    noFiltersMatchThisSearch: "No filters match this search"
+  }
+}, _l = {
+  i18n: { messages: ht },
+  name: "select-filter-dropdown"
+}, $l = /* @__PURE__ */ q({
+  ..._l,
+  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: l }) {
+    const { t: a } = de({ messages: ht }), i = we(), t = l, n = e, { internalFilterValue: o } = ve(z(n, "value"), z(n, "defaultValue")), s = k(""), r = z(n, "options"), b = k(n.options.listboxItems);
+    ue(r, () => {
+      b.value = r.value.listboxItems;
+    });
+    const f = p(() => a("noFiltersMatchThisSearch")), I = (D) => {
+      o.value = D;
+      const { onlySlot: u, ...B } = n;
+      t(v.INPUT, { ...B, value: o.value });
+    };
+    return (D, u) => {
+      var B, R, P;
+      return g(), w($(Ht), {
+        value: $(o),
+        items: e.options.listboxItems,
+        multiple: (B = e.options) == null ? void 0 : B.multiple,
+        "static-categories": (R = e.options) == null ? void 0 : R.staticCategories,
+        "no-results-message": f.value,
+        searching: !!s.value,
+        "is-option-disabled": e.options.isOptionDisabled,
+        "dynamic-filtering": !0,
+        "empty-state": (P = e.options) == null ? void 0 : P.emptyState,
+        disabled: e.disabled,
+        onInput: I
+      }, Ae({ _: 2 }, [
+        fe($(i), (V, U) => ({
+          name: U,
+          fn: h((_) => [
+            re(D.$slots, U, Te(Pe(_)))
+          ])
+        }))
+      ]), 1032, ["value", "items", "multiple", "static-categories", "no-results-message", "searching", "is-option-disabled", "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
+  }
+}, Tl = {}, ge = /* @__PURE__ */ q({
+  ...Tl,
+  __name: "select-filter",
+  props: Be,
+  emits: ["input", "update"],
+  setup(e, { emit: l }) {
+    const a = we(), i = l, t = e, n = (s) => i("input", s), o = (s) => i("update", s);
+    return rt(() => {
+      var s;
+      (s = t == null ? void 0 : t.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, r) => s.onlySlot ? (g(), w($($l), {
+      key: 0,
+      disabled: s.disabled,
+      "default-value": s.defaultValue,
+      field: s.field,
+      label: s.label,
+      options: s.options,
+      value: s.value,
+      onInput: n,
+      onUpdate: o
+    }, Ae({ _: 2 }, [
+      fe($(a), (b, f) => ({
+        name: f,
+        fn: h((I) => [
+          re(s.$slots, f, Te(Pe(I)))
+        ])
+      }))
+    ]), 1032, ["disabled", "default-value", "field", "label", "options", "value"])) : (g(), w($(Al), {
+      key: 1,
+      disabled: s.disabled,
+      "default-value": s.defaultValue,
+      field: s.field,
+      label: s.label,
+      options: s.options,
+      value: s.value,
+      onInput: n,
+      onUpdate: o
+    }, Ae({ _: 2 }, [
+      fe($(a), (b, f) => ({
+        name: f,
+        fn: h((I) => [
+          re(s.$slots, f, Te(Pe(I)))
+        ])
+      }))
+    ]), 1032, ["disabled", "default-value", "field", "label", "options", "value"]));
+  }
+}), Pl = q({
+  name: "bento-select-avatar-filter",
+  components: {
+    BentoSelectFilter: ge,
+    BentoAvatar: Qt
+  },
+  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: [v.INPUT, v.UPDATE],
+  setup(e, { emit: l }) {
+    return {
+      // Enums
+      BentoFilterEvent: v,
+      // Methods
+      onUpdate: (i) => l(v.UPDATE, i)
+    };
+  }
+});
+function Ul(e, l, a, i, t, n) {
+  const o = A("bento-avatar"), s = A("bento-select-filter");
+  return g(), w(s, ie(e.$props, {
+    field: e.field,
+    label: e.label,
+    onUpdate: e.onUpdate,
+    onInput: l[0] || (l[0] = (r) => e.$emit(e.BentoFilterEvent.INPUT, r))
+  }), {
+    default: h(({ label: r, data: b }) => [
+      T(o, {
+        username: r,
+        src: b
+      }, null, 8, ["username", "src"])
+    ]),
+    _: 1
+  }, 16, ["field", "label", "onUpdate"]);
+}
+const St = /* @__PURE__ */ W(Pl, [["render", Ul]]), El = q({
+  name: "bento-select-country-filter",
+  components: {
+    BentoSelectFilter: ge,
+    ListboxOptionTag: vt
+  },
+  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: [v.INPUT, v.UPDATE],
+  setup(e, { emit: l }) {
+    return {
+      // Enums
+      BentoFilterEvent: v,
+      // Methods
+      onUpdate: (i) => {
+        l(v.UPDATE, i);
+      }
+    };
+  }
+});
+function wl(e, l, a, i, t, n) {
+  const o = A("listbox-option-tag"), s = A("bento-select-filter");
+  return g(), w(s, ie(e.$props, {
+    field: e.field,
+    label: e.label,
+    onUpdate: e.onUpdate,
+    onInput: l[0] || (l[0] = (r) => e.$emit(e.BentoFilterEvent.INPUT, r))
+  }), {
+    default: h((r) => [
+      T(o, { option: r }, null, 8, ["option"])
+    ]),
+    _: 1
+  }, 16, ["field", "label", "onUpdate"]);
+}
+const Bt = /* @__PURE__ */ W(El, [["render", wl]]), Vl = {
+  name: "bento-select-country-filter"
+}, Dt = /* @__PURE__ */ q({
+  ...Vl,
+  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: [v.INPUT, v.UPDATE],
+  setup(e, { emit: l }) {
+    const a = e, i = l, t = k(a.options.variant), n = k(a.options.listboxItems);
+    ue([() => a.options.variant, () => a.options.listboxItems], () => {
+      t.value = a.options.variant, n.value = a.options.listboxItems;
+    });
+    const o = (b) => i(v.UPDATE, b), s = xt(t, n), r = p(() => ({
+      ...a != null && a.options ? a.options : {},
+      listboxItems: s.value
+    }));
+    return (!t.value || t.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"
+    ), (b, f) => (g(), w(ge, ie(a, {
+      field: b.field,
+      label: b.label,
+      options: r.value,
+      onUpdate: o,
+      onInput: f[0] || (f[0] = (I) => b.$emit($(v).INPUT, I))
+    }), {
+      default: h(({ label: I }) => [
+        T($(be), { el: "span" }, {
+          default: h(() => [
+            H(j(I), 1)
+          ]),
+          _: 2
+        }, 1024)
+      ]),
+      _: 1
+    }, 16, ["field", "label", "options"]));
+  }
+}), Rl = q({
+  name: "bento-select-payment-method-filter",
+  components: {
+    BentoSelectFilter: ge,
+    BentoPaymentMethod: el
+  },
+  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: [v.INPUT, v.UPDATE],
+  setup(e, { emit: l }) {
+    return {
+      // Enums
+      BentoFilterEvent: v,
+      // Methods
+      onUpdate: (i) => l(v.UPDATE, i)
+    };
+  }
+});
+function Ol(e, l, a, i, t, n) {
+  const o = A("bento-payment-method"), s = A("bento-select-filter");
+  return g(), w(s, ie(e.$props, {
+    field: e.field,
+    label: e.label,
+    onUpdate: e.onUpdate,
+    onInput: l[0] || (l[0] = (r) => e.$emit(e.BentoFilterEvent.INPUT, r))
+  }), {
+    default: h(({ value: r, label: b }) => [
+      T(o, {
+        type: r,
+        label: b
+      }, null, 8, ["type", "label"])
+    ]),
+    _: 1
+  }, 16, ["field", "label", "onUpdate"]);
+}
+const Ct = /* @__PURE__ */ W(Rl, [["render", Ol]]), Ll = q({
+  name: "bento-select-country-filter",
+  components: {
+    BentoSelectFilter: ge,
+    ListboxOptionTag: vt
+  },
+  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: [v.INPUT, v.UPDATE],
+  setup(e, { emit: l }) {
+    const a = (n) => l(v.UPDATE, n), i = p(
+      () => {
+        var n, o;
+        return (o = (n = e == null ? void 0 : e.options) == null ? void 0 : n.listboxItems) == null ? void 0 : o.map(({ label: s, value: r, variant: b }) => ({ label: s, value: r, data: b }));
+      }
+    );
+    return {
+      // Values
+      countryOptions: p(() => ({
+        ...e.options,
+        listboxItems: i.value
+      })),
+      // Methods
+      onUpdate: a,
+      // Enums
+      BentoFilterEvent: v
+    };
+  }
+});
+function kl(e, l, a, i, t, n) {
+  const o = A("listbox-option-tag"), s = A("bento-select-filter");
+  return g(), w(s, ie(e.$props, {
+    field: e.field,
+    label: e.label,
+    options: e.countryOptions,
+    onUpdate: e.onUpdate,
+    onInput: l[0] || (l[0] = (r) => e.$emit(e.BentoFilterEvent.INPUT, r))
+  }), {
+    default: h(({ label: r, data: b }) => [
+      T(o, {
+        option: { value: r, data: b, label: "" }
+      }, null, 8, ["option"])
+    ]),
+    _: 1
+  }, 16, ["field", "label", "options", "onUpdate"]);
+}
+const It = /* @__PURE__ */ W(Ll, [["render", kl]]), tt = {
+  "en-US": {
+    no: "No",
+    yes: "Yes"
+  },
+  "pt-BR": {
+    yes: "Sim",
+    no: "Não"
+  },
+  "ja-JP": {
+    no: "いいえ",
+    yes: "はい"
+  }
+}, Nl = q({
+  name: "bento-boolean-filter",
+  i18n: { messages: tt },
+  components: { BentoBaseFilter: Fe, BentoRadioGroup: Mt },
+  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: [v.INPUT, v.UPDATE],
+  setup(e, { emit: l }) {
+    const { t: a } = de({ messages: tt }), i = (_) => typeof _ == "boolean" ? _ == null ? void 0 : _.toString() : _, t = (_) => {
+      var C, O, y, d;
+      return ((O = (C = e == null ? void 0 : e.options) == null ? void 0 : C.positiveOption) == null ? void 0 : O.value) !== void 0 && ((d = (y = e == null ? void 0 : e.options) == null ? void 0 : y.negativeOption) == null ? void 0 : d.value) !== void 0 && typeof e.options.positiveOption.value == "boolean" && typeof e.options.negativeOption.value == "boolean" && typeof _ == "string" ? _ === "true" : _;
+    }, n = p(() => i(e.defaultValue)), o = p(() => i(e.value)), s = p(() => e.options && e.options.positiveOption && e.options.negativeOption ? [
+      {
+        ...e.options.positiveOption,
+        value: i(e.options.positiveOption.value)
+      },
+      {
+        ...e.options.negativeOption,
+        value: i(e.options.negativeOption.value)
+      }
+    ] : [
+      { value: "yes", label: a("yes") },
+      { value: "no", label: a("no") }
+    ]), { internalFilterValue: r, isSecondaryButtonDisabled: b, isApplyButtonDisabled: f } = ve(
+      o,
+      n
+    ), I = p(() => e.label), D = p(
+      () => {
+        var _;
+        return Se((_ = s.value.find(({ value: C }) => C === o.value)) == null ? void 0 : _.label, 12);
+      }
+    ), u = p(() => ({
+      "b-boolean-filter--only-slot": e.onlySlot
+    }));
+    Ve(() => {
+      r.value || (r.value = null);
+    });
+    const B = (_) => {
+      r.value = _, l(v.INPUT, {
+        ...e,
+        value: t(r.value)
+      });
+    }, R = () => {
+      r.value = o.value;
+    }, P = () => {
+      l(v.UPDATE, {
+        ...e,
+        value: t(r.value)
+      });
+    };
+    return {
+      // Values
+      items: s,
+      conditionalClasses: u,
+      buttonLabel: I,
+      buttonSecondaryLabel: D,
+      internalFilterValue: r,
+      isApplyButtonDisabled: f,
+      isSecondaryButtonDisabled: b,
+      translatedValue: o,
+      translatedDefaultValue: n,
+      // Events
+      onInput: B,
+      updateFilter: P,
+      clearFilter: () => {
+        r.value = null, P();
+      },
+      openFilter: R,
+      resetFilter: () => l(v.UPDATE, { ...e, value: e.defaultValue })
+    };
+  }
+});
+function Ml(e, l, a, i, t, n) {
+  const o = A("bento-radio-group"), s = A("bento-base-filter");
+  return g(), w(s, ie(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: h(() => [
+      M("div", {
+        class: me(["b-boolean-filter", e.conditionalClasses]),
+        onKeydown: l[0] || (l[0] = pe((...r) => e.updateFilter && e.updateFilter(...r), ["enter"]))
+      }, [
+        T(o, {
+          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 At = /* @__PURE__ */ W(Nl, [["render", Ml], ["__scopeId", "data-v-4619720e"]]), lt = {
+  "en-US": {
+    from: "From",
+    to: "To"
+  }
+}, Hl = q({
+  name: "bento-range-filter",
+  i18n: { messages: lt },
+  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: [v.INPUT, v.UPDATE],
+  setup(e, { emit: l }) {
+    const { t: a } = de({ messages: lt }), i = k(null), { internalFilterValue: t, isSecondaryButtonDisabled: n, isApplyButtonDisabled: o } = ve(
+      z(e, "value"),
+      z(e, "defaultValue")
+    ), s = p(() => {
+      var y, d, c, L, x, le, ne, oe;
+      if (!((y = e.value) != null && y[0]) && !((d = e.value) != null && d[1]))
+        return null;
+      let U = "";
+      (c = e.value) != null && c[0] ? (L = e.value) != null && L[1] || (U = "≥") : U = "≤";
+      const _ = (x = e.value) != null && x[0] ? `${Se(e.value[0], 5)}` : "", C = (le = e.value) != null && le[0] && ((ne = e.value) != null && ne[1]) ? " - " : "", O = (oe = e.value) != null && oe[1] ? `${Se(e.value[1], 5)}` : "";
+      return `${U}${_}${C}${O}`;
+    }), r = p(() => e.label), b = p(() => s.value), f = p(() => ({
+      "b-range-filter--only-slot": e.onlySlot
+    })), I = () => {
+      t.value = e.value, ot(() => i.value.focusInput());
+    }, D = () => {
+      l(v.INPUT, { ...e, value: t.value });
+    }, u = (U) => {
+      t.value = [U, t.value[1]], D();
+    }, B = (U) => {
+      t.value = [t.value[0], U], D();
+    }, R = () => {
+      t.value.some((U) => U) || (t.value = e.defaultValue !== null ? e.defaultValue : void 0), l(v.UPDATE, {
+        ...e,
+        value: t.value
+      });
+    };
+    return {
+      // Values
+      inputTextRef: i,
+      conditionalClasses: f,
+      internalFilterValue: t,
+      isApplyButtonDisabled: o,
+      isSecondaryButtonDisabled: n,
+      buttonLabel: r,
+      buttonSecondaryLabel: b,
+      // Events
+      updateFrom: u,
+      updateTo: B,
+      updateFilter: R,
+      clearFilter: () => {
+        t.value = ["", ""], R();
+      },
+      openFilter: I,
+      resetFilter: () => l(v.UPDATE, { ...e, value: e.defaultValue }),
+      // Translations
+      t: a
+    };
+  }
+});
+function jl(e, l, a, i, t, n) {
+  const o = A("bento-input-field"), s = A("bento-base-filter");
+  return g(), w(s, ie(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: h(() => [
+      M("div", {
+        class: me(["b-range-filter", e.conditionalClasses]),
+        onKeydown: l[0] || (l[0] = pe((...r) => e.updateFilter && e.updateFilter(...r), ["enter"]))
+      }, [
+        T(o, {
+          ref: "inputTextRef",
+          value: e.internalFilterValue ? e.internalFilterValue[0] : "",
+          type: "number",
+          "aria-label": e.t("from").toString(),
+          onInput: e.updateFrom
+        }, {
+          default: h(() => [
+            H(j(e.t("from")), 1)
+          ]),
+          _: 1
+        }, 8, ["value", "aria-label", "onInput"]),
+        T(o, {
+          class: "b-range-filter__input-field",
+          value: e.internalFilterValue ? e.internalFilterValue[1] : "",
+          type: "number",
+          "aria-label": e.t("to"),
+          onInput: e.updateTo
+        }, {
+          default: h(() => [
+            H(j(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 _t = /* @__PURE__ */ W(Hl, [["render", jl], ["__scopeId", "data-v-e7e81bac"]]);
+var Le = /* @__PURE__ */ ((e) => (e.INPUT = "input", e))(Le || {});
+const ql = q({
+  name: "base-filter-button",
+  components: { BaseButton: dt, BentoTypography: be, ChevronUpIcon: qt, ChevronDownIcon: Kt },
+  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: [Ye.CLICK],
+  setup(e, { slots: l, emit: a, attrs: i }) {
+    const t = p(() => l.default ? ct(l)("default") : null), n = ut({ ariaLabel: t }), o = k(null), s = p(() => {
+      var f;
+      return {
+        "aria-controls": (f = i["aria-controls"]) == null ? void 0 : f.toString()
+      };
+    }), r = p(() => ({
+      "b-base-filter-button--with-chevron": e.hasChevron,
+      "b-base-filter-button--filter-open": e.isFilterOpen
+    }));
+    return {
+      // Values
+      ariaAttributes: s,
+      computedAriaLabel: n,
+      conditionalClasses: r,
+      // Methods
+      onClickButton: () => {
+        e.disabled || a(Ye.CLICK);
+      },
+      hasSlot: bt(l),
+      // Refs
+      baseFilterButtonRef: o
+    };
+  }
+}), Kl = { class: "b-base-filter-button__default-container" }, Jl = { class: "b-base-filter-button__label-container" }, Yl = {
+  key: 0,
+  class: "b-base-filter-button__counter-wrapper"
+};
+function zl(e, l, a, i, t, n) {
+  const o = A("bento-typography"), s = A("chevron-up-icon"), r = A("chevron-down-icon"), b = A("base-button");
+  return g(), w(b, {
+    ref: "baseFilterButtonRef",
+    class: me(["b-base-filter-button", e.conditionalClasses]),
+    disabled: e.disabled,
+    "aria-label": e.computedAriaLabel,
+    "aria-controls": e.ariaAttributes["aria-controls"],
+    type: "button",
+    onClick: e.onClickButton
+  }, Ae({
+    default: h(() => [
+      M("div", Kl, [
+        M("div", Jl, [
+          T(o, {
+            el: "span",
+            variant: "body",
+            stronger: e.bold,
+            class: "b-base-filter-button__label"
+          }, {
+            default: h(() => [
+              re(e.$slots, "default", {}, void 0, !0)
+            ]),
+            _: 3
+          }, 8, ["stronger"])
+        ]),
+        e.amountAppliedValues && !e.hasChevron ? (g(), Y("div", Yl, [
+          T(o, {
+            class: "b-base-filter-button__counter",
+            el: "span",
+            variant: "body",
+            stronger: ""
+          }, {
+            default: h(() => [
+              H(j(e.amountAppliedValues), 1)
+            ]),
+            _: 1
+          })
+        ])) : Z("", !0)
+      ])
+    ]),
+    _: 2
+  }, [
+    e.hasChevron ? {
+      name: "iconRight",
+      fn: h(() => [
+        e.isFilterOpen ? (g(), w(s, {
+          key: 0,
+          "aria-hidden": "true"
+        })) : (g(), w(r, {
+          key: 1,
+          "aria-hidden": "true"
+        }))
+      ]),
+      key: "0"
+    } : void 0
+  ]), 1032, ["class", "disabled", "aria-label", "aria-controls", "onClick"]);
+}
+const Wl = /* @__PURE__ */ W(ql, [["render", zl], ["__scopeId", "data-v-af9efc73"]]), Gl = q({
+  name: "all-filters-modal-button",
+  components: { BaseFilterButton: Wl },
+  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: l }) {
+    return {
+      conditionalClasses: p(() => ({
+        "b-all-filters-modal-button--with-counter": e.appliedFiltersCount,
+        "b-all-filters-modal-button--filter-open": e.isFilterOpen
+      })),
+      onClick: () => {
+        l("click");
+      }
+    };
+  }
+});
+function Zl(e, l, a, i, t, n) {
+  const o = A("base-filter-button");
+  return g(), w(o, {
+    class: me(["b-all-filters-modal-button", e.conditionalClasses]),
+    "amount-applied-values": e.appliedFiltersCount,
+    "is-filter-open": e.isFilterOpen,
+    disabled: e.disabled,
+    onClick: e.onClick
+  }, {
+    default: h(() => [
+      H(j(e.label), 1)
+    ]),
+    _: 1
+  }, 8, ["class", "amount-applied-values", "is-filter-open", "disabled", "onClick"]);
+}
+const Ql = /* @__PURE__ */ W(Gl, [["render", Zl], ["__scopeId", "data-v-b96a672f"]]);
+let at = 0;
+const Xl = {
+  beforeCreate() {
+    this.uuid = at.toString(), at += 1;
+  }
+}, xl = { key: 0 };
+function ea(e, l, a, i, t, n) {
+  return g(), Y("svg", ie({ 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"] ? (g(), Y("title", xl, j(e.$attrs["svg-title"]), 1)) : Z("", !0),
+    l[0] || (l[0] = M("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)),
+    l[1] || (l[1] = M("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 ta = /* @__PURE__ */ W(Xl, [["render", ea]]), nt = {
+  "en-US": {
+    all: "All",
+    activeFilters: "Active filters",
+    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"
+  },
+  "pt-BR": {
+    all: "Todos",
+    cancel: "Cancelar",
+    clear: "Limpar",
+    clearAll: "Limpar tudo"
+  },
+  "ja-JP": {
+    all: "すべて",
+    cancel: "キャンセル",
+    clear: "クリア",
+    clearAll: "すべてクリア"
+  }
+}, la = q({
+  i18n: { messages: nt },
+  name: "all-filters-modal",
+  components: {
+    AllFiltersModalButton: Ql,
+    BentoBooleanFilter: At,
+    BentoButton: wt,
+    BentoDateFilter: mt,
+    BentoDateRangeFilter: Ft,
+    BentoInputFilter: yt,
+    BentoModal: Ut,
+    BentoRangeFilter: _t,
+    BentoSearchBar: Ue,
+    BentoSelectAvatarFilter: St,
+    BentoSelectCurrencyFilter: Bt,
+    BentoSelectCountryFilter: Dt,
+    BentoSelectFilter: ge,
+    BentoSelectPaymentMethodFilter: Ct,
+    BentoSelectTagFilter: It,
+    BentoTypography: be,
+    FilterBarButton: Ee,
+    SlidersIcon: ta
+  },
+  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: [Le.INPUT],
+  setup(e, { emit: l }) {
+    const a = it({ value: e.value }), i = k(a.value), t = ke("all-filters-modal"), n = k([]), o = k(!1), s = k(0), r = k(null), b = k(""), { t: f } = de({ messages: nt }), I = pt(b, z(i, "value")), D = k({});
+    Ve(() => {
+      D.value = [];
+    }), ue(
+      () => e.value,
+      () => {
+        a.value = e.value, i.value = e.value;
+      }
+    );
+    const u = (m) => (
+      /* eslint-disable-next-line no-nested-ternary */
+      m.sort((F, E) => F.label > E.label ? 1 : E.label > F.label ? -1 : 0)
+    ), B = p(
+      () => u(
+        I.value.filter(
+          (m) => {
+            var F, E;
+            return Array.isArray(m.value) ? ((F = m.value) == null ? void 0 : F.length) && ((E = m.value) == null ? void 0 : E.find((N) => N !== "")) : m.value;
+          }
+        )
+      )
+    ), R = p(
+      () => u(
+        I.value.filter(
+          (m) => {
+            var F, E;
+            return Array.isArray(m.value) ? ((F = m.value) == null ? void 0 : F.length) === 0 || ((E = m.value) == null ? void 0 : E.every((N) => N === "")) : !m.value;
+          }
+        )
+      )
+    ), P = p(() => {
+      var m;
+      return b.value && ((m = I.value) == null ? void 0 : m.length) === 0;
+    }), V = p(() => i.value[s.value]), U = () => {
+      const m = B.value.length ? B.value[0] : R.value[0], F = i.value.findIndex(
+        (E) => E.label === m.label && E.field === m.field
+      );
+      s.value = F;
+    };
+    rt(() => {
+      U();
+    });
+    const _ = (m) => m.map((F) => {
+      var E, N, X, se, ce, ee;
+      switch (F.type) {
+        case te.SELECT:
+        case te.SELECT_AVATAR:
+        case te.SELECT_COUNTRY:
+        case te.SELECT_CURRENCY:
+        case te.SELECT_PAYMENT_METHOD:
+        case te.SELECT_TAG:
+          switch ((E = F.options) == null ? void 0 : E.multiple) {
+            case !0:
+              return {
+                label: F.label,
+                field: F.field,
+                count: (N = F.value) != null && N.length ? (X = F.value) == null ? void 0 : X.length : null
+              };
+            default:
+              return {
+                label: F.label,
+                field: F.field,
+                count: F.value == null ? null : 1
+              };
+          }
+        case te.DATE_RANGE:
+          return {
+            label: F.label,
+            field: F.field,
+            count: ((se = F.value) == null ? void 0 : se.startDate) != null && ((ce = F.value) == null ? void 0 : ce.endDate) != null ? 1 : null
+          };
+        case te.RANGE:
+          return {
+            label: F.label,
+            field: F.field,
+            count: (ee = F.value) != null && ee.find((_e) => _e !== "") ? 1 : null
+          };
+        case te.INPUT:
+        case te.BOOLEAN:
+        case te.DATE:
+        default:
+          return {
+            label: F.label,
+            field: F.field,
+            count: F.value != null ? 1 : null
+          };
+      }
+    }), C = p(
+      () => {
+        var m;
+        return Array.isArray(V.value.value) ? ((m = V.value) == null ? void 0 : m.value.length) && V.value.value.find((F) => F !== "") : !!i.value[s.value].value;
+      }
+    ), O = p(
+      () => {
+        var m;
+        return (m = _(a.value)) == null ? void 0 : m.filter(({ count: F }) => !!F).length;
+      }
+    ), y = () => {
+      o.value ? o.value = !1 : o.value = !0;
+    }, d = (m) => {
+      var E, N, X;
+      const F = _(i.value).find((se) => se.field === m.field).count;
+      return m.type.includes("BentoSelect") && ((E = m.options) != null && E.multiple) && F === ((X = (N = m.options) == null ? void 0 : N.listboxItems) == null ? void 0 : X.length) ? f("all") : F;
+    }, c = (m, F) => {
+      s.value = i.value.findIndex(
+        (E) => E.label === m && E.field === F
+      );
+    }, L = () => {
+      b.value = "";
+    }, x = () => {
+      o.value = !1, a.value = e.value, i.value = e.value, L(), U();
+    }, le = (m) => {
+      const F = i.value.map(({ value: E, ...N }, X) => X === s.value ? { value: m.value, ...N } : { value: E, ...N });
+      i.value = F;
+    }, ne = () => {
+      le({
+        field: V.value.field,
+        label: V.value.label,
+        type: V.value.type,
+        value: void 0
+      });
+    }, oe = () => {
+      i.value = a.value.map(({ value: m, ...F }) => ({
+        ...F,
+        value: void 0
+      }));
+    }, Q = () => {
+      l(Le.INPUT, i.value), o.value = !1;
+    }, K = p(
+      () => JSON.stringify(i.value) === JSON.stringify(e.value)
+    ), S = p(() => [
+      {
+        title: f("applyAll"),
+        disabled: K.value,
+        event: Q
+      },
+      {
+        title: f("cancel"),
+        event: x
+      },
+      {
+        title: f("clearAll"),
+        disabled: !O.value,
+        event: oe
+      }
+    ]);
+    return {
+      // Enums
+      BentoModalEvent: Et,
+      // Values
+      allFiltersModalUniqueId: t,
+      allFiltersModalFiltersSection: n,
+      allFiltersModalFilterButtons: D,
+      numberOfActiveFilters: O,
+      isEmptyResultForSearchFilter: P,
+      isModalOpen: o,
+      isClearButtonEnabled: C,
+      activeFilters: B,
+      otherFilters: R,
+      modalActions: S,
+      selectedFilter: V,
+      selectedFilterRef: r,
+      filters: a,
+      searchTerm: b,
+      // Methods
+      onClickAllFiltersModal: y,
+      getFilterCount: d,
+      cancel: x,
+      selectFilter: c,
+      clearFilter: ne,
+      updateFilter: le,
+      onSearchbarClear: L,
+      onKeydownRight: () => {
+        jt(1, r.value.$el).focus();
+      },
+      onKeydownLeft: () => {
+        D.value[V.value.label].$el.focus();
+      },
+      // Translations
+      t: f
+    };
+  }
+}), aa = { class: "b-all-filters-modal" }, na = {
+  key: 0,
+  class: "b-all-filters-modal__empty-search-message"
+}, oa = {
+  key: 1,
+  class: "b-all-filters-modal__filters-section"
+}, sa = ["aria-labelledby"], ia = {
+  key: 2,
+  class: "b-all-filters-modal__filters-section"
+}, ra = ["aria-labelledby"], ua = { class: "b-all-filters-modal__selected-filter-text" }, da = { class: "b-all-filters-modal__selected-filter-component" }, ca = { class: "b-all-filters-modal__clear-button" };
+function ba(e, l, a, i, t, n) {
+  const o = A("sliders-icon"), s = A("filter-bar-button"), r = A("bento-search-bar"), b = A("bento-typography"), f = A("all-filters-modal-button"), I = A("bento-button"), D = A("bento-modal");
+  return g(), Y("div", aa, [
+    T(s, {
+      "is-filter-open": e.isModalOpen,
+      "applied-filters-count": e.numberOfActiveFilters,
+      onClick: e.onClickAllFiltersModal
+    }, {
+      iconLeft: h(() => [
+        T(o, { "aria-hidden": "true" })
+      ]),
+      default: h(() => [
+        H(j(e.t("allFilters")) + " ", 1)
+      ]),
+      _: 1
+    }, 8, ["is-filter-open", "applied-filters-count", "onClick"]),
+    T(D, {
+      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: h(() => [
+        H(j(e.t("allFilters")), 1)
+      ]),
+      "content-col-1": h(() => [
+        M("div", {
+          ref: "allFiltersModalFiltersSection",
+          class: "b-all-filters-modal__filters",
+          onKeydown: l[1] || (l[1] = pe((...u) => e.onKeydownRight && e.onKeydownRight(...u), ["right"]))
+        }, [
+          T(r, {
+            class: "b-all-filters-modal__search-bar",
+            value: e.searchTerm,
+            "input-field-aria-label": e.t("searchBar").toString(),
+            onInput: l[0] || (l[0] = (u) => e.searchTerm = u),
+            onClear: e.onSearchbarClear
+          }, null, 8, ["value", "input-field-aria-label", "onClear"]),
+          e.isEmptyResultForSearchFilter ? (g(), Y("div", na, [
+            T(b, { el: "span" }, {
+              default: h(() => [
+                H(j(e.t("noFiltersMatchThisSearch")), 1)
+              ]),
+              _: 1
+            })
+          ])) : Z("", !0),
+          e.activeFilters.length ? (g(), Y("div", oa, [
+            T(b, {
+              id: `active-filters-${e.allFiltersModalUniqueId}`,
+              class: "b-all-filters-modal__filters-section-title",
+              el: "span",
+              variant: "caption"
+            }, {
+              default: h(() => [
+                H(j(e.t("activeFilters")), 1)
+              ]),
+              _: 1
+            }, 8, ["id"]),
+            M("ul", {
+              class: "b-all-filters-modal__filters-list",
+              "aria-labelledby": `active-filters-${e.allFiltersModalUniqueId}`
+            }, [
+              (g(!0), Y(Ie, null, fe(e.activeFilters, (u) => (g(), Y("li", {
+                key: `${u.label}-${u.field}`
+              }, [
+                T(f, {
+                  ref_for: !0,
+                  ref: (B) => e.allFiltersModalFilterButtons[u.label] = B,
+                  label: u.label,
+                  "applied-filters-count": e.getFilterCount(u),
+                  "is-filter-open": e.selectedFilter.label === u.label,
+                  onClick: (B) => e.selectFilter(u.label, u.field)
+                }, null, 8, ["label", "applied-filters-count", "is-filter-open", "onClick"])
+              ]))), 128))
+            ], 8, sa)
+          ])) : Z("", !0),
+          e.otherFilters.length ? (g(), Y("div", ia, [
+            e.activeFilters.length ? (g(), w(b, {
+              key: 0,
+              id: `other-filters-${e.allFiltersModalUniqueId}`,
+              class: "b-all-filters-modal__filters-section-title",
+              el: "span",
+              variant: "caption"
+            }, {
+              default: h(() => [
+                H(j(e.t("otherFilters")), 1)
+              ]),
+              _: 1
+            }, 8, ["id"])) : Z("", !0),
+            M("ul", {
+              class: "b-all-filters-modal__filters-list",
+              "aria-labelledby": `other-filters-${e.allFiltersModalUniqueId}`
+            }, [
+              (g(!0), Y(Ie, null, fe(e.otherFilters, (u) => (g(), Y("li", {
+                key: `${u.label}-${u.field}`
+              }, [
+                T(f, {
+                  ref_for: !0,
+                  ref: (B) => e.allFiltersModalFilterButtons[u.label] = B,
+                  label: u.label,
+                  "applied-filters-count": e.getFilterCount(u),
+                  "is-filter-open": e.selectedFilter.label === u.label,
+                  onClick: (B) => e.selectFilter(u.label, u.field)
+                }, null, 8, ["label", "applied-filters-count", "is-filter-open", "onClick"])
+              ]))), 128))
+            ], 8, ra)
+          ])) : Z("", !0)
+        ], 544)
+      ]),
+      "content-col-2": h(() => [
+        M("div", {
+          class: "b-all-filters-modal__selected-filter-content",
+          onKeydown: l[2] || (l[2] = pe((...u) => e.onKeydownLeft && e.onKeydownLeft(...u), ["left"]))
+        }, [
+          M("div", ua, [
+            T(b, {
+              el: "div",
+              variant: "title",
+              medium: ""
+            }, {
+              default: h(() => [
+                H(j(e.selectedFilter.label), 1)
+              ]),
+              _: 1
+            }),
+            e.selectedFilter.description ? (g(), w(b, {
+              key: 0,
+              el: "div",
+              variant: "body",
+              wide: ""
+            }, {
+              default: h(() => [
+                H(j(e.selectedFilter.description), 1)
+              ]),
+              _: 1
+            })) : Z("", !0)
+          ]),
+          M("div", da, [
+            (g(), w(Oe(e.selectedFilter.type), {
+              ref: "selectedFilterRef",
+              key: e.selectedFilter.field,
+              field: e.selectedFilter.field,
+              label: e.selectedFilter.label,
+              options: e.selectedFilter.options,
+              value: e.selectedFilter.value,
+              "default-value": e.selectedFilter.defaultValue,
+              "only-slot": !0,
+              onInput: e.updateFilter
+            }, null, 40, ["field", "label", "options", "value", "default-value", "onInput"]))
+          ]),
+          M("div", ca, [
+            T(I, {
+              variant: "secondary",
+              disabled: !e.isClearButtonEnabled,
+              onClick: e.clearFilter
+            }, {
+              default: h(() => [
+                H(j(e.t("clear")), 1)
+              ]),
+              _: 1
+            }, 8, ["disabled", "onClick"])
+          ])
+        ], 32)
+      ]),
+      _: 1
+    }, 8, ["is-open", "actions", "onCloseModal"])
+  ]);
+}
+const pa = /* @__PURE__ */ W(la, [["render", ba], ["__scopeId", "data-v-eb3ae500"]]), $t = {
+  "en-US": {
+    clearFilters: "Clear filters",
+    filtersHaveBeenCleared: "Filters have been cleared.",
+    filtersHaveBeenReset: "Filters have been reset.",
+    undo: "Undo",
+    resetFilters: "Reset filters",
+    searchBar: "Search bar"
+  },
+  "pt-BR": {
+    clearFilters: "Limpar filtros",
+    filtersHaveBeenCleared: "Os filtros foram apagados",
+    undo: "Desfazer",
+    resetFilters: "Redefinir filtros"
+  },
+  "ja-JP": {
+    clearFilters: "フィルターをクリア",
+    filtersHaveBeenCleared: "フィルターをクリアしました",
+    undo: "元に戻す",
+    resetFilters: "フィルターのリセット"
+  }
+}, fa = { class: "b-filter-bar" }, va = { class: "b-filter-bar__container" }, ya = { class: "b-filter-bar__filters" }, ma = { class: "b-filter-bar__scroller-content" }, Fa = {
+  key: 0,
+  class: "b-filter-bar__actions"
+}, ga = {
+  i18n: { messages: $t },
+  name: "bento-filter-bar",
+  components: {
+    BentoBooleanFilter: At,
+    BentoDateFilter: mt,
+    BentoDateRangeFilter: Ft,
+    BentoInputFilter: yt,
+    BentoInputWithDropdownFilter: vl,
+    BentoRangeFilter: _t,
+    BentoSelectAvatarFilter: St,
+    BentoSelectCountryFilter: Dt,
+    BentoSelectCurrencyFilter: Bt,
+    BentoSelectFilter: ge,
+    BentoSelectPaymentMethodFilter: Ct,
+    BentoSelectTagFilter: It
+  }
+}, ha = /* @__PURE__ */ q({
+  ...ga,
+  props: {
+    /**
+     * Array of filters based on {@see BentoFilterBarModel}.
+     * Each one of the elements in the array correspond to a filter that will
+     * be created and rendered in the FilterBar.
+     *
+     * @example
+     * [{
+     *   field: 'company',
+     *   label: 'Company',
+     *   type: FilterType.TEXT,
+     * }, {
+     *   field: 'name',
+     *   label: 'Name',
+     *   type: FilterType.TEXT,
+     * }]
+     */
+    config: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * Search term useful to filter all the data by text.
+     * If the value is non-existant (null or undefined) the search bar won't be enabled.
+     */
+    searchTerm: {
+      type: Ue.props.value.type,
+      default: void 0
+    },
+    /**
+     * @deprecated from version 2.0.0. Use the config property instead.
+     */
+    /**
+     * Array of filters based on {@see BentoFilterBarModel}.
+     * Each one of the elements in the array correspond to a filter that will
+     * be created and rendered in the FilterBar.
+     *
+     * 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: () => []
+    },
+    /**
+     * An array of the values for each filter in the filter bar.
+     * {@see BentoFilterValues}
+     *
+     *  @example
+     * [{
+     *   field: 'company',
+     *   value: '200',
+     * }, {
+     *   field: 'name',
+     *   value: 'some text',
+     * }]
+     */
+    filterValues: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * Will show all applied filters even if their visibility is set to false.
+     */
+    showAppliedHiddenFilters: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: [
+    Ce.INPUT,
+    Ce.UPDATE_FILTER_VALUES,
+    he.CLEAR,
+    he.INPUT,
+    he.UPDATE
+  ],
+  setup(e, { expose: l, emit: a }) {
+    const i = e, t = a, { t: n } = de({ messages: $t }), o = p(
+      () => {
+        var y, d;
+        return (d = ((y = i.config) == null ? void 0 : y.length) > 0 ? i.config : i.value) == null ? void 0 : d.map((c) => {
+          var x;
+          let L = (x = i.filterValues.find(({ field: le }) => le === c.field)) == null ? void 0 : x.value;
+          return L === void 0 && (L = (c == null ? void 0 : c.value) === void 0 && (c == null ? void 0 : c.defaultValue) !== void 0 ? c == null ? void 0 : c.defaultValue : c == null ? void 0 : c.value), { ...c, value: L !== void 0 ? L : c == null ? void 0 : c.value };
+        });
+      }
+    ), { addToast: s } = Pt(), r = p(() => n("searchBar")), b = p(() => o.value.some(
+      ({ visible: d }) => d != null
+    ) ? o.value.some(({ visible: d }) => !d) : !1), f = p(
+      () => o.value.filter(({ defaultValue: y }) => y !== void 0)
+    ), I = p(() => o.value.some(
+      ({ visible: d }) => d != null
+    ) ? o.value.filter(
+      ({ defaultValue: d, visible: c, value: L }) => d === void 0 && c || i.showAppliedHiddenFilters && L != null
+    ) : o.value.filter(
+      ({ defaultValue: d, value: c }) => d === void 0 || i.showAppliedHiddenFilters && c != null
+    )), D = p(() => i.searchTerm != null), u = p(
+      () => o.value.filter(({ defaultValue: y }) => y == null).some(({ value: y }) => y != null)
+    ), B = p(() => f.value.length === 0 && u.value), R = p(() => f.value.length === 0 ? !1 : !o.value.filter(({ defaultValue: d }) => d !== void 0 || d !== null).every(({ value: d, defaultValue: c }) => JSON.stringify(d) === JSON.stringify(c)) || u.value), P = (y) => {
+      t(Ce.INPUT, y), t(
+        Ce.UPDATE_FILTER_VALUES,
+        y == null ? void 0 : y.filter(({ value: d }) => d !== null || d !== void 0).map(({ field: d, value: c }) => ({ field: d, value: c }))
+      );
+    }, V = (y) => {
+      const d = o.value.findIndex(
+        (L) => L.field === y.field
+      ), c = o.value.slice();
+      c[d].value = y.value, P(c);
+    }, U = () => {
+      const y = o.value.slice(), d = o.value.map(({ value: c, ...L }) => ({
+        ...L,
+        value: void 0
+      }));
+      s({
+        text: n("filtersHaveBeenCleared"),
+        action: {
+          handler: () => P(y),
+          text: n("undo")
+        }
+      }), P(d);
+    }, _ = () => {
+      const y = o.value.slice(), d = o.value.map(({ defaultValue: c, ...L }) => ({
+        ...L,
+        defaultValue: c,
+        value: c
+      }));
+      s({
+        text: n("filtersHaveBeenReset"),
+        action: {
+          handler: () => P(y),
+          text: n("undo")
+        }
+      }), P(d);
+    }, C = (y) => {
+      t(he.INPUT, y), t(he.UPDATE, y);
+    }, O = () => {
+      t(he.CLEAR);
+    };
+    return l({ isClearAllVisible: B, clearAllFilters: U, isResetAllVisible: R, resetAllFilters: _ }), (y, d) => (g(), Y("div", fa, [
+      M("div", va, [
+        M("div", ya, [
+          T($(tl), {
+            class: "b-filter-bar__fixed-scroller",
+            condensed: ""
+          }, {
+            default: h(() => [
+              M("div", ma, [
+                D.value ? (g(), w($(Ue), {
+                  key: 0,
+                  class: "b-filter-bar__search-bar",
+                  "input-field-aria-label": r.value,
+                  value: e.searchTerm,
+                  condensed: "",
+                  onInput: C,
+                  onClear: O
+                }, null, 8, ["input-field-aria-label", "value"])) : Z("", !0),
+                f.value.length ? (g(!0), Y(Ie, { key: 1 }, fe(f.value, (c) => (g(), w(Oe(c.type), {
+                  key: c.field,
+                  field: c.field,
+                  label: c.label,
+                  disabled: c == null ? void 0 : c.disabled,
+                  options: c.options,
+                  value: c.value,
+                  "default-value": c.defaultValue,
+                  onUpdate: V
+                }, null, 40, ["field", "label", "disabled", "options", "value", "default-value"]))), 128)) : Z("", !0),
+                (g(!0), Y(Ie, null, fe(I.value, (c) => (g(), w(Oe(c.type), {
+                  key: c.field,
+                  field: c.field,
+                  label: c.label,
+                  disabled: c == null ? void 0 : c.disabled,
+                  options: c.options,
+                  value: c.value,
+                  onUpdate: V
+                }, null, 40, ["field", "label", "disabled", "options", "value"]))), 128))
+              ])
+            ]),
+            _: 1
+          })
+        ]),
+        b.value || B.value || R.value ? (g(), Y("div", Fa, [
+          b.value ? (g(), w(pa, {
+            key: 0,
+            class: "b-filter-bar__all-filters-modal",
+            value: o.value,
+            onInput: P
+          }, null, 8, ["value"])) : Z("", !0),
+          qe(T($(Ee), {
+            class: "b-filter-bar__clear-all",
+            onClick: U
+          }, {
+            iconLeft: h(() => [
+              T($(Ze), { "aria-hidden": "true" })
+            ]),
+            default: h(() => [
+              H(j($(n)("clearFilters")) + " ", 1)
+            ]),
+            _: 1
+          }, 512), [
+            [Ke, B.value]
+          ]),
+          qe(T($(Ee), {
+            class: "b-filter-bar__reset-all",
+            onClick: _
+          }, {
+            iconLeft: h(() => [
+              T($(Ze), { "aria-hidden": "true" })
+            ]),
+            default: h(() => [
+              H(j($(n)("resetFilters")) + " ", 1)
+            ]),
+            _: 1
+          }, 512), [
+            [Ke, R.value]
+          ])
+        ])) : Z("", !0)
+      ])
+    ]));
+  }
+}), sn = /* @__PURE__ */ W(ha, [["__scopeId", "data-v-bc928237"]]);
+export {
+  sn as B,
+  v as a,
+  Ce as b,
+  te as c
+};
+//# sourceMappingURL=filter-bar.BwJTrH5U.js.map