@adyen/bento-vue3 1.32.0 → 1.33.0

package/dist/chunks/filter-bar.-G1-moOO.js

@@ -0,0 +1,2767 @@
+import { defineComponent as G, useSlots as we, useAttrs as Ut, computed as b, ref as R, openBlock as m, createBlock as E, unref as _, normalizeClass as _e, withCtx as F, createTextVNode as H, toDisplayString as M, createCommentVNode as J, createElementBlock as q, createElementVNode as w, renderSlot as re, createVNode as C, watch as he, nextTick as st, resolveComponent as D, withKeys as ye, toRef as Q, onBeforeUpdate as He, provide as Vt, mergeProps as ue, Fragment as Te, reactive as it, createSlots as Ee, renderList as ce, normalizeProps as Re, guardReactiveProps as Oe, onMounted as kt, resolveDynamicComponent as Me, withDirectives as Ve, vShow as ke } from "vue";
+import { B as Ie, b as Se } from "./search-bar.C__L0enF.js";
+import { u as Lt } from "./use-bento-toast-controller.BDYlxAYq.js";
+import { u as de } from "./i18n.DL9GT2-k.js";
+import { _ as Rt } from "./modal.vue_vue_type_script_setup_true_lang.Bh6Q4yIf.js";
+import { g as Ot } from "./base-modal.BPaKKH3Q.js";
+import { B as wt } from "./button.Br6CyG40.js";
+import { B as ze, I as Nt } from "./popover.CczC6Fhk.js";
+import { B as Mt } from "./directive.O3yEdalv.js";
+import { a as Kt } from "./tooltip.DvsfWV0-.js";
+import { g as qe } from "./unique-id.XFfoKuc2.js";
+import { u as Ht } from "./use-click-outside.D6aIgS15.js";
+import { B as me, d as qt } from "./typography.z9P0Ec3Q.js";
+import { u as rt } from "./aria-label.CaUURpnB.js";
+import { B as ut, a as Je } from "./base-button.BxUrydaP.js";
+import { g as dt } from "./get-slot-text.D5WBGjic.js";
+import { u as ct } from "./use-has-slot.B7eQSabc.js";
+import { C as bt, a as ft } from "./chevron-up.DQZG_BP3.js";
+import { _ as W } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import { B as jt } from "./teleport.L8qFCYpr.js";
+import { B as Yt } from "./radio-group.C18T8QQs.js";
+import { B as vt } from "./input-field.f4lqnh2q.js";
+import { u as pt, B as zt } from "./dropdown.DQpKDlC-.js";
+import { g as Jt } from "./focus-trap.CwkbHfT8.js";
+import { B as je } from "./divider.ugNXYI-T.js";
+import { B as Gt } from "./date-picker.D36sJUDB.js";
+import { f as pe } from "./date.D8rQMzMG.js";
+import { l as ie, a as mt, b as yt } from "./index.B_UZQ6qF.js";
+import { a as Wt, i as Zt } from "./calendar.D--sOCBT.js";
+import { B as Qt, D as Xt, i as Ge } from "./date-range-picker.rytlJBZs.js";
+import { D as We } from "./date-input.BqBdAO1E.js";
+import { B as xt } from "./button-actions.hdK5IgrZ.js";
+import { B as el } from "./avatar.mNlMngHQ.js";
+import { c as Ze, b as tl } from "./use-cached-selected-values.DaSn9dB9.js";
+import { L as ht } from "./listbox-option-tag.QqDEHMKB.js";
+import { u as ll } from "./use-country-items.DQR8plsq.js";
+import { B as al } from "./payment-method.-3VYG5ud.js";
+import { R as Le } from "./refresh.DvQeGwUF.js";
+import { F as nl } from "./fixed-scroller.DwYB1pqo.js";
+import "../assets/filter-bar.css";
+const ol = { class: "b-filter-bar-button__container" }, sl = { class: "b-filter-bar-button__label-container" }, il = {
+  key: 1,
+  class: "b-filter-bar-button__chevron"
+}, rl = {}, ul = /* @__PURE__ */ G({
+  ...rl,
+  __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 },
+    /**
+     * 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 },
+    /**
+     * 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 n = e, s = l, t = we(), i = Ut(), a = ct(t), u = b(() => t.default ? dt(t)("default") : null), o = rt({ ariaLabel: u }), r = R(null), p = b(() => {
+      var d;
+      return {
+        "aria-controls": (d = i["aria-controls"]) == null ? void 0 : d.toString()
+      };
+    }), I = b(() => ({
+      "b-filter-bar-button--filter-open": n.isFilterOpen,
+      "b-filter-bar-button--active": n.appliedFiltersCount || n.secondaryLabel || n.hasChevron,
+      "b-filter-bar-button--with-secondary-label": n.secondaryLabel,
+      "b-filter-bar-button--with-chevron": n.hasChevron
+    })), A = (d) => {
+      n.disabled || s("click", d);
+    };
+    return (d, g) => (m(), E(_(ut), {
+      ref_key: "filterBarButtonRef",
+      ref: r,
+      class: _e(["b-filter-bar-button", I.value]),
+      disabled: e.disabled,
+      "aria-label": _(o),
+      "aria-controls": p.value["aria-controls"],
+      type: "button",
+      onClick: A
+    }, {
+      iconRight: F(() => [
+        e.appliedFiltersCount && !e.hasChevron ? (m(), E(_(me), {
+          key: 0,
+          class: "b-filter-bar-button__counter",
+          el: "span",
+          variant: "body",
+          stronger: ""
+        }, {
+          default: F(() => [
+            H(M(e.appliedFiltersCount), 1)
+          ]),
+          _: 1
+        })) : J("", !0),
+        e.hasChevron ? (m(), q("div", il, [
+          e.isFilterOpen ? (m(), E(_(bt), {
+            key: 0,
+            "aria-hidden": "true"
+          })) : (m(), E(_(ft), {
+            key: 1,
+            "aria-hidden": "true"
+          }))
+        ])) : J("", !0)
+      ]),
+      default: F(() => [
+        w("div", ol, [
+          _(a)("iconLeft") ? re(d.$slots, "iconLeft", { key: 0 }, void 0, !0) : J("", !0),
+          w("div", sl, [
+            C(_(me), {
+              el: "span",
+              variant: "body",
+              stronger: "",
+              class: "b-filter-bar-button__label"
+            }, {
+              default: F(() => [
+                re(d.$slots, "default", {}, void 0, !0)
+              ]),
+              _: 3
+            }),
+            e.secondaryLabel ? (m(), E(_(me), {
+              key: 0,
+              el: "span",
+              variant: "body",
+              stronger: "",
+              class: "b-filter-bar-button__secondary-label"
+            }, {
+              default: F(() => [
+                H(M(e.secondaryLabel), 1)
+              ]),
+              _: 1
+            })) : J("", !0)
+          ])
+        ])
+      ]),
+      _: 3
+    }, 8, ["class", "disabled", "aria-label", "aria-controls"]));
+  }
+}), Be = /* @__PURE__ */ W(ul, [["__scopeId", "data-v-fe3e2223"]]);
+var S = /* @__PURE__ */ ((e) => (e.INPUT = "input", e.UPDATE = "update", e))(S || {}), De = /* @__PURE__ */ ((e) => (e.INPUT = "input", e.UPDATE_FILTER_VALUES = "update:filter-values", e))(De || {}), le = /* @__PURE__ */ ((e) => (e.INPUT = "BentoInputFilter", e.BOOLEAN = "BentoBooleanFilter", e.RANGE = "BentoRangeFilter", 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))(le || {}), ne = /* @__PURE__ */ ((e) => (e.APPLY = "apply", e.CLEAR = "clear", e.OPEN = "open", e.CLOSE = "close", e.RESET = "reset", e))(ne || {});
+const Qe = {
+  "en-US": {
+    clear: "Clear",
+    apply: "Apply",
+    reset: "Reset",
+    filterButton: "Filter by {function}"
+  },
+  "de-DE": {
+    clear: "Alle löschen",
+    apply: "Bewerben"
+  },
+  "fr-FR": {
+    clear: "Effacer",
+    apply: "Postuler"
+  },
+  "ja-JP": {
+    clear: "クリア",
+    apply: "適用"
+  },
+  "pt-BR": {
+    clear: "Limpar",
+    apply: "Candidatar-se"
+  },
+  "es-ES": {
+    clear: "Borrar",
+    apply: "Aplicar"
+  }
+}, dl = G({
+  i18n: { messages: Qe },
+  name: "bento-base-filter",
+  components: {
+    BentoPopover: ze,
+    BentoTeleport: jt,
+    FilterBarButton: Be
+  },
+  directives: { BentoClickOutsideDirective: Mt },
+  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 },
+    /**
+     * Default value of the filter to reset to.
+     */
+    defaultValue: {
+      type: [Object, Number, Boolean, Array, String],
+      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: ze.props.fitContent
+  },
+  emits: [
+    ne.APPLY,
+    ne.CLEAR,
+    ne.OPEN,
+    ne.CLOSE,
+    ne.RESET
+  ],
+  setup(e, { emit: l }) {
+    const { t: n } = de({ messages: Qe }), s = qe("base-filter-popover"), t = R(!1), i = R(null), a = R(null), u = b(() => e.defaultValue !== null), o = b(
+      () => u.value ? n("filterButton", {
+        function: e.label
+      }) : r.value
+    ), r = b(() => e.buttonLabel || e.label), p = () => {
+      t.value && (t.value = !1, st(() => {
+        var P, k;
+        (k = (P = i.value) == null ? void 0 : P.$el) == null || k.focus();
+      }), l(ne.CLOSE));
+    }, I = () => {
+      p(), u.value ? l(ne.RESET) : l(ne.CLEAR);
+    }, A = () => p(), d = () => {
+      t.value ? p() : (t.value = !0, l(ne.OPEN));
+    }, g = () => {
+      p(), l(ne.APPLY);
+    }, V = b(() => [
+      {
+        title: n("apply"),
+        event: g,
+        disabled: e.disableApplyButton
+      },
+      {
+        title: u.value ? n("reset") : n("clear"),
+        event: I,
+        disabled: e.disableSecondaryButton
+      }
+    ]);
+    return he(
+      () => t.value,
+      (P, k) => {
+        var U, $;
+        !P && k && ($ = (U = i.value) == null ? void 0 : U.filterBarButtonRef) != null && $.bentoBaseButtonRef && i.value.filterBarButtonRef.bentoBaseButtonRef.focus();
+      }
+    ), Ht(a, A, { ignore: [i] }), {
+      // Values
+      actions: V,
+      popoverId: s,
+      isFilterOpen: t,
+      isPersistentFilter: u,
+      computedAriaLabel: o,
+      computedButtonText: r,
+      // Enums
+      BentoTooltipPosition: Kt,
+      // Events
+      onClickFilter: d,
+      onClickApply: g,
+      onClickSecondaryAction: I,
+      onClickOutside: A,
+      closePopover: p,
+      // Refs
+      filterButtonRef: i,
+      popoverRef: a
+    };
+  }
+}), cl = { key: 0 }, bl = {
+  key: 1,
+  class: "b-base-filter"
+};
+function fl(e, l, n, s, t, i) {
+  const a = D("filter-bar-button"), u = D("bento-popover"), o = D("bento-teleport");
+  return e.onlySlot ? (m(), q("div", cl, [
+    re(e.$slots, "default", {}, void 0, !0)
+  ])) : (m(), q("div", bl, [
+    C(a, {
+      ref: "filterButtonRef",
+      "aria-label": e.computedAriaLabel,
+      "aria-controls": e.isFilterOpen ? e.popoverId : null,
+      "has-chevron": e.isPersistentFilter,
+      "is-filter-open": e.isFilterOpen,
+      "applied-filters-count": e.appliedFiltersCount,
+      "secondary-label": e.buttonSecondaryLabel,
+      onClick: e.onClickFilter,
+      onKeydown: ye(e.closePopover, ["esc"])
+    }, {
+      default: F(() => [
+        H(M(e.computedButtonText), 1)
+      ]),
+      _: 1
+    }, 8, ["aria-label", "aria-controls", "has-chevron", "is-filter-open", "applied-filters-count", "secondary-label", "onClick", "onKeydown"]),
+    e.filterButtonRef ? (m(), E(o, { key: 0 }, {
+      default: F(() => [
+        e.filterButtonRef ? (m(), E(u, {
+          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: F(() => [
+            w("div", {
+              onKeydown: l[0] || (l[0] = ye((...r) => e.closePopover && e.closePopover(...r), ["esc"]))
+            }, [
+              re(e.$slots, "default", {}, void 0, !0)
+            ], 32)
+          ]),
+          _: 3
+        }, 8, ["id", "open", "actions", "target-element", "title", "fit-content", "without-space"])) : J("", !0)
+      ]),
+      _: 3
+    })) : J("", !0)
+  ]));
+}
+const Ce = /* @__PURE__ */ W(dl, [["render", fl], ["__scopeId", "data-v-f1b07c85"]]), vl = (e) => e instanceof Array, Xe = (e) => vl(e) ? e.length === 0 || e.every((l) => l === "") : !e, xe = (e, l) => JSON.stringify(e) === JSON.stringify(l), Fe = (e, l) => {
+  const n = R(e.value);
+  he(
+    () => e.value,
+    () => {
+      n.value = e.value;
+    }
+  );
+  const s = b(() => Xe(e.value)), t = b(
+    () => l.value !== null ? xe(l.value, e.value) : s.value
+  ), i = b(() => xe(n.value, e.value) || Xe(n.value) && s.value);
+  return {
+    internalFilterValue: n,
+    isSecondaryButtonDisabled: t,
+    isApplyButtonDisabled: i
+  };
+}, be = (e, l) => {
+  const n = e == null ? void 0 : e.toString();
+  return (n == null ? void 0 : n.length) > l ? `${n == null ? void 0 : n.slice(0, l)}...` : n;
+}, pl = G({
+  name: "bento-input-filter",
+  components: {
+    BentoBaseFilter: Ce,
+    BentoInputField: vt
+  },
+  props: {
+    /**
+     * 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: [S.INPUT, S.UPDATE],
+  setup(e, { emit: l }) {
+    var Y, B;
+    const n = R(null), s = R((B = (Y = e == null ? void 0 : e.options) == null ? void 0 : Y.dropdown) == null ? void 0 : B.value), t = b(
+      () => {
+        var c, f;
+        return ((c = e == null ? void 0 : e.options) == null ? void 0 : c.variant) === "dropdown" && ((f = e == null ? void 0 : e.options) == null ? void 0 : f.dropdown) !== void 0;
+      }
+    ), i = b(
+      () => {
+        var c;
+        return t.value ? { ...(c = e == null ? void 0 : e.options) == null ? void 0 : c.dropdown, value: s.value } : void 0;
+      }
+    ), a = b(() => {
+      var c;
+      return ((c = e == null ? void 0 : e.options) == null ? void 0 : c.variant) === "dropdown" ? "dropdown" : "default";
+    }), u = b(
+      () => {
+        var c;
+        return t.value ? (c = e.value) == null ? void 0 : c.inputValue : e == null ? void 0 : e.value;
+      }
+    ), { internalFilterValue: o, isSecondaryButtonDisabled: r, isApplyButtonDisabled: p } = Fe(
+      u,
+      Q(e, "defaultValue")
+    ), I = b(
+      () => e.defaultValue === null ? e.label : be(u.value, 18)
+    ), A = b(
+      () => e.defaultValue === null ? be(u.value, 12) : null
+    ), d = b(() => ({
+      "b-input-filter--only-slot": e.onlySlot
+    }));
+    He(() => {
+      o.value === "" && (o.value = null);
+    }), he(n, () => {
+      var c;
+      (c = n.value) == null || c.focusInput();
+    });
+    const g = () => {
+      o.value = u.value;
+    }, V = () => {
+      !o.value && e.defaultValue !== null && (o.value = e.defaultValue), l(S.UPDATE, {
+        ...e,
+        value: t.value ? { inputValue: o.value, dropdownValue: s.value } : o.value
+      });
+    }, P = () => l(S.UPDATE, { ...e, value: e.defaultValue }), k = () => {
+      o.value = null, V();
+    }, U = () => {
+      l(S.INPUT, { ...e, value: o.value });
+    }, $ = (c) => {
+      o.value = c;
+    }, j = (c) => {
+      s.value = c;
+    };
+    return Vt(Nt, t.value), {
+      // Values
+      buttonLabel: I,
+      buttonSecondaryLabel: A,
+      conditionalClasses: d,
+      dropdownProp: i,
+      inputVariant: a,
+      internalFilterValue: o,
+      isApplyButtonDisabled: p,
+      isDropdownVariant: t,
+      isSecondaryButtonDisabled: r,
+      // Refs
+      inputTextRef: n,
+      // Events
+      updateFilter: V,
+      clearFilter: k,
+      openFilter: g,
+      resetFilter: P,
+      onDropdownInput: j,
+      onInput: U,
+      setInternalFilterValue: $
+    };
+  }
+});
+function ml(e, l, n, s, t, i) {
+  const a = D("bento-input-field"), u = D("bento-base-filter");
+  return m(), E(u, ue(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: F(() => {
+      var o;
+      return [
+        w("div", {
+          class: _e(["b-input-filter", e.conditionalClasses]),
+          onKeydown: l[0] || (l[0] = ye((...r) => e.updateFilter && e.updateFilter(...r), ["enter"])),
+          onInput: l[1] || (l[1] = (...r) => e.onInput && e.onInput(...r))
+        }, [
+          C(a, {
+            ref: "inputTextRef",
+            dropdown: e.dropdownProp,
+            "dropdown-position": (o = e.options) == null ? void 0 : o.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 Ft = /* @__PURE__ */ W(pl, [["render", ml], ["__scopeId", "data-v-4f3a323d"]]), yl = G({
+  name: "bento-date-filter",
+  components: {
+    BentoBaseFilter: Ce,
+    BentoDatePicker: Gt,
+    BentoDivider: je,
+    Calendar: Wt
+  },
+  props: {
+    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: [S.INPUT, S.UPDATE],
+  setup(e, { emit: l }) {
+    const { locale: n } = de(void 0, !0), s = { de: mt, enUS: ie, fr: yt }, { internalFilterValue: t, isSecondaryButtonDisabled: i, isApplyButtonDisabled: a } = Fe(
+      Q(e, "value"),
+      Q(e, "defaultValue")
+    ), u = b(
+      () => e.value ? pe(e.value, "dd MMM, yyyy", {
+        locale: s[n.value.substring(0, 2)] || ie
+      }) : null
+    ), o = b(
+      () => e.defaultValue === null ? e.label : u.value
+    ), r = b(
+      () => e.defaultValue === null ? u.value : null
+    ), p = () => {
+      l(S.UPDATE, { ...e, value: t.value });
+    }, I = () => {
+      t.value = null, p();
+    }, A = () => {
+      t.value = e.defaultValue, p();
+    }, d = () => {
+      t.value = e.value;
+    }, g = (P) => {
+      t.value = P, l(S.INPUT, { ...e, value: t.value });
+    };
+    return {
+      // Values
+      internalFilterValue: t,
+      isApplyButtonDisabled: a,
+      isSecondaryButtonDisabled: i,
+      buttonLabel: o,
+      buttonSecondaryLabel: r,
+      // Events
+      clearFilter: I,
+      onDateSelected: g,
+      openFilter: d,
+      updateFilter: p,
+      resetFilter: A,
+      onDateInputSelected: (P) => {
+        t.value = P, g(P), p();
+      }
+    };
+  }
+}), hl = { class: "b-date-filter" };
+function Fl(e, l, n, s, t, i) {
+  const a = D("bento-date-picker"), u = D("bento-divider"), o = D("calendar"), r = D("bento-base-filter");
+  return m(), E(r, {
+    "button-label": e.buttonLabel,
+    "button-secondary-label": e.buttonSecondaryLabel,
+    "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: F(() => {
+      var p, I, A, d;
+      return [
+        e.onlySlot ? (m(), E(a, {
+          key: 0,
+          value: e.internalFilterValue,
+          "first-day-of-week": (p = e.options) == null ? void 0 : p.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"])) : (m(), q(Te, { key: 1 }, [
+          C(u, { class: "b-date-filter__divider" }),
+          w("div", hl, [
+            C(o, {
+              "first-day-of-week": (A = e.options) == null ? void 0 : A.firstDayOfWeek,
+              "is-date-disabled": (d = e.options) == null ? void 0 : d.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", "default-value", "disable-apply-button", "disable-secondary-button", "field", "label", "only-slot", "onApply", "onClear", "onOpen", "onReset"]);
+}
+const gt = /* @__PURE__ */ W(yl, [["render", Fl], ["__scopeId", "data-v-66ffdc53"]]), et = {
+  "en-US": {
+    clear: "Clear",
+    reset: "Reset",
+    apply: "Apply"
+  },
+  "de-DE": {
+    clear: "Alle löschen",
+    apply: "Bewerben"
+  },
+  "fr-FR": {
+    clear: "Effacer",
+    apply: "Postuler"
+  },
+  "ja-JP": {
+    clear: "クリア",
+    apply: "適用"
+  },
+  "pt-BR": {
+    clear: "Limpar",
+    apply: "Candidatar-se"
+  },
+  "es-ES": {
+    clear: "Borrar",
+    apply: "Aplicar"
+  }
+}, gl = G({
+  i18n: { messages: et },
+  name: "bento-date-range-filter",
+  components: {
+    BentoBaseFilter: Ce,
+    BentoButtonActions: xt,
+    BentoDateRangePicker: Qt,
+    BentoTypography: me,
+    BentoDivider: je,
+    DateRangePickerCalendar: Xt
+  },
+  props: {
+    /**
+     * 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: [S.INPUT, S.UPDATE],
+  setup(e, { emit: l }) {
+    var se, oe, fe, z;
+    const { locale: n, t: s } = de({ messages: et }), t = { de: mt, enUS: ie, fr: yt }, { internalFilterValue: i, isSecondaryButtonDisabled: a, isApplyButtonDisabled: u } = Fe(
+      Q(e, "value"),
+      Q(e, "defaultValue")
+    ), o = R(!1), r = (h) => h ? pe(h, We.NUMERIC_DATE_YEAR_FIRST, {
+      locale: t[n.value.substring(0, 2)] || ie
+    }) : void 0, p = (h) => h ? pe(h, We.HOUR_MINUTE_SECONDS, {
+      locale: t[n.value.substring(0, 2)] || ie
+    }) : "", I = R(null), A = R(!1), d = it({
+      startDate: r((se = e.value) == null ? void 0 : se.startDate),
+      endDate: r((oe = e.value) == null ? void 0 : oe.endDate),
+      startTime: p((fe = e.value) == null ? void 0 : fe.startDate),
+      endTime: p((z = e.value) == null ? void 0 : z.endDate)
+    });
+    function g(h) {
+      return (h == null ? void 0 : h.length) !== void 0;
+    }
+    const V = b(() => {
+      var h, K, O, y, v, T, N, Z, x;
+      if (!((h = e.value) != null && h.startDate) && !e.value.endDate)
+        return null;
+      if (g((K = e.options) == null ? void 0 : K.quickSelectRanges) && ((y = (O = e.options) == null ? void 0 : O.quickSelectRanges) == null ? void 0 : y.length) > 0) {
+        const ee = (T = (v = e.options) == null ? void 0 : v.quickSelectRanges) == null ? void 0 : T.find(
+          ({ data: te }) => Ge(te == null ? void 0 : te.startDate, e.value.startDate) && Ge(te == null ? void 0 : te.endDate, e.value.endDate)
+        );
+        if (ee)
+          return ee.label;
+      }
+      return Zt((N = e.value) == null ? void 0 : N.startDate, (Z = e.value) == null ? void 0 : Z.endDate) && ((x = e == null ? void 0 : e.options) != null && x.allowTimeInput) ? `${pe(e.value.startDate, "dd MMM, yyyy HH:mm:ss", {
+        locale: t[n.value.substring(0, 2)] || ie
+      })} - ${pe(e.value.endDate, "HH:mm:ss", {
+        locale: t[n.value.substring(0, 2)] || ie
+      })}` : `${pe(e.value.startDate, "dd MMM, yyyy", {
+        locale: t[n.value.substring(0, 2)] || ie
+      })} - ${pe(e.value.endDate, "dd MMM, yyyy", {
+        locale: t[n.value.substring(0, 2)] || ie
+      })}`;
+    }), P = b(
+      () => e.defaultValue === null ? e.label : V.value
+    ), k = b(
+      () => e.defaultValue === null ? V.value : null
+    ), U = () => {
+      I.value.closePopover();
+      const { onlySlot: h, ...K } = e;
+      l(S.UPDATE, { ...K, value: i.value });
+    }, $ = () => {
+      i.value = void 0, U();
+    }, j = () => {
+      i.value = e.defaultValue, U();
+    }, Y = () => {
+      i.value = e.value;
+    }, B = (h) => {
+      o.value = !1, i.value = h, d.startDate = r(h.startDate), d.endDate = r(h.endDate), l(S.INPUT, { ...e, value: i.value });
+    }, c = (h) => {
+      h != null && h.startDate && (h != null && h.endDate) && (i.value = h, d.startDate = r(h.startDate), d.endDate = r(h.endDate), l(S.INPUT, { ...e, value: i.value }));
+    }, f = (h) => {
+      B(h), l(S.INPUT, { ...e, value: i.value });
+    }, L = b(
+      () => [
+        {
+          title: s("apply"),
+          event: U,
+          disabled: o.value || A.value || u.value
+        },
+        {
+          title: e.defaultValue ? s("reset") : s("clear"),
+          event: e.defaultValue ? j : $,
+          disabled: A.value && a.value
+        }
+      ]
+    );
+    return {
+      // Refs
+      baseFilter: I,
+      // Values
+      actions: L,
+      formData: d,
+      internalFilterValue: i,
+      isApplyButtonDisabled: u,
+      isSecondaryButtonDisabled: a,
+      isSelectingDate: o,
+      buttonLabel: P,
+      buttonSecondaryLabel: k,
+      // Events
+      onDateSelected: B,
+      openFilter: Y,
+      updateFilter: U,
+      onDatePickerRangeError: () => {
+        A.value = !0, i.value = { startDate: void 0, endDate: void 0 }, l(S.INPUT, { ...e, value: i.value });
+      },
+      onDatePickerRangeFormDateInputUpdate: (h) => {
+        A.value = !1, h.startTime && (d.startTime = h.startTime), h.endTime && (d.endTime = h.endTime);
+      },
+      onDateInputSelected: f,
+      onRangeSelectorInput: c
+    };
+  }
+}), Sl = {
+  key: 1,
+  class: "b-date-range-filter"
+};
+function Bl(e, l, n, s, t, i) {
+  const a = D("bento-date-range-picker"), u = D("bento-typography"), o = D("bento-divider"), r = D("bento-button-actions"), p = D("date-range-picker-calendar"), I = D("bento-base-filter");
+  return m(), E(I, {
+    ref: "baseFilter",
+    class: "b-base-filter-date-range-filter",
+    "button-label": e.buttonLabel,
+    "button-secondary-label": e.buttonSecondaryLabel,
+    controlled: !e.onlySlot,
+    "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: F(() => {
+      var A, d, g, V, P, k, U, $, j, Y, B, c, f, L, X;
+      return [
+        e.onlySlot ? (m(), E(a, {
+          key: 0,
+          "allow-time-input": (A = e.options) == null ? void 0 : A.allowTimeInput,
+          value: e.internalFilterValue,
+          "first-day-of-week": (d = e.options) == null ? void 0 : d.firstDayOfWeek,
+          "is-date-disabled": (g = e.options) == null ? void 0 : g.isDateDisabled,
+          "number-of-months": (V = e.options) == null ? void 0 : V.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"])) : (m(), q("div", Sl, [
+          C(p, {
+            "allow-time-input": (k = e.options) == null ? void 0 : k.allowTimeInput,
+            "first-day-of-week": (U = e.options) == null ? void 0 : U.firstDayOfWeek,
+            "is-date-disabled": ($ = e.options) == null ? void 0 : $.isDateDisabled,
+            granularities: (j = e.options) == null ? void 0 : j.granularities,
+            "max-range": (Y = e.options) == null ? void 0 : Y.maxRange,
+            min: (B = e.options) == null ? void 0 : B.min,
+            max: (c = e.options) == null ? void 0 : c.max,
+            "number-of-months": (f = e.options) == null ? void 0 : f.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] = (ae) => e.isSelectingDate = !0)
+          }, {
+            title: F(() => [
+              C(u, {
+                strongest: "",
+                variant: "body",
+                el: "span"
+              }, {
+                default: F(() => [
+                  H(M(e.label), 1)
+                ]),
+                _: 1
+              })
+            ]),
+            actions: F(() => [
+              C(o, { class: "b-date-range-filter__divider" }),
+              C(r, {
+                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", "disable-apply-button", "disable-secondary-button", "default-value", "field", "label", "only-slot", "onOpen"]);
+}
+const St = /* @__PURE__ */ W(gl, [["render", Bl], ["__scopeId", "data-v-d02451b0"]]), Bt = {
+  "en-US": {
+    all: "All",
+    noFiltersMatchThisSearch: "No filters match this search",
+    searchFilter: "Search {filter}"
+  }
+}, _l = { class: "b-select-filter-button__search-bar" }, Cl = { class: "b-select-filter-button__divider" }, Al = {
+  i18n: { messages: Bt }
+}, $l = /* @__PURE__ */ G({
+  ...Al,
+  __name: "select-filter-button",
+  props: {
+    /**
+     * 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 oe, fe;
+    const n = we(), s = l, t = e, { t: i, locale: a } = de({ messages: Bt }), u = R(""), o = Q(t, "options"), r = R(t.options.listboxItems), { cachedSelectedListboxOptions: p, setCachedValues: I, resetCache: A } = Ze(
+      r,
+      Q(t, "value"),
+      Q(o.value, "multiple")
+    ), { cachedSelectedListboxOptions: d } = Ze(
+      r,
+      Q(t, "defaultValue"),
+      Q(o.value, "multiple")
+    ), { internalFilterValue: g, isSecondaryButtonDisabled: V, isApplyButtonDisabled: P } = Fe(p, d);
+    he(o, () => {
+      r.value = o.value.listboxItems;
+    });
+    const k = pt(
+      u,
+      r,
+      (fe = (oe = t.options) == null ? void 0 : oe.search) == null ? void 0 : fe.searchEvent
+    ), U = b(() => i("noFiltersMatchThisSearch")), $ = b(() => {
+      var z, h, K, O, y, v, T, N, Z, x;
+      if (t.defaultValue === null)
+        return t.label;
+      if (t.options.multiple) {
+        const ee = (z = t.value) == null ? void 0 : z.length;
+        if (ee === t.options.listboxItems.length)
+          return (h = t == null ? void 0 : t.options) != null && h.messagesPersistentButtonLabelAllSelectedKey ? (O = t == null ? void 0 : t.options) == null ? void 0 : O.messages[a.value][(K = t == null ? void 0 : t.options) == null ? void 0 : K.messagesPersistentButtonLabelAllSelectedKey] : (y = t == null ? void 0 : t.options) == null ? void 0 : y.messages[a.value].persistentButtonLabelAllSelected;
+        const ve = ((v = t == null ? void 0 : t.options) != null && v.messagesPersistentButtonLabelPartiallySelectedKey ? (N = t == null ? void 0 : t.options) == null ? void 0 : N.messages[a.value][(T = t == null ? void 0 : t.options) == null ? void 0 : T.messagesPersistentButtonLabelPartiallySelectedKey] : (Z = t == null ? void 0 : t.options) == null ? void 0 : Z.messages[a.value].persistentButtonLabelPartiallySelected).split("|").map((Pe) => Pe.trim());
+        return ee === 1 ? ve[0].replace("{count}", ee) : ve[1].replace("{count}", ee);
+      }
+      return (x = p.value) != null && x.length ? be(p.value[0].label, 18) : "";
+    }), j = b(() => {
+      var z, h;
+      if (t.defaultValue === null && (!t.options.multiple || ((z = t.value) == null ? void 0 : z.length) === 1)) {
+        const K = t.options.listboxItems.flatMap((O) => O.items ? O.items : O);
+        return be(
+          (h = K.find(
+            ({ value: O }) => {
+              var y;
+              return Array.isArray(t.value) ? (y = t == null ? void 0 : t.value) == null ? void 0 : y.includes(O) : O === t.value;
+            }
+          )) == null ? void 0 : h.label,
+          12
+        );
+      }
+      return null;
+    }), Y = b(() => qe(`filter-listbox-${t.field}`)), B = (z) => {
+      g.value = z;
+      const { onlySlot: h, ...K } = t;
+      if (t.options.multiple) {
+        const y = z.length ? g.value.map(({ value: v }) => v) : null;
+        s(S.INPUT, { ...K, value: y });
+        return;
+      }
+      const O = z.length ? z[0].value : null;
+      s(S.INPUT, { ...K, value: O });
+    }, c = () => {
+      var O, y, v;
+      const { onlySlot: z, ...h } = t;
+      if (t.options.multiple) {
+        g.value && ((O = g.value) == null ? void 0 : O.length) === 0 && (g.value = t.defaultValue !== null ? d.value : void 0);
+        const T = (y = g.value) != null && y.length ? (v = g.value) == null ? void 0 : v.map(({ value: N }) => N) : null;
+        s(S.UPDATE, {
+          ...h,
+          value: T
+        });
+        return;
+      }
+      const K = g.value.length ? g.value[0].value : void 0;
+      s(S.UPDATE, { ...h, value: K });
+    }, f = () => {
+      g.value = p.value;
+    }, L = () => {
+      u.value && (u.value = "");
+    }, X = () => {
+      I(d.value), g.value = d.value, c();
+    }, ae = () => {
+      A(), g.value = [], c();
+    }, se = b(() => {
+      var K, O;
+      if (t.value == null || t.defaultValue !== null || !t.options.multiple)
+        return null;
+      const z = (K = t.options.listboxItems) == null ? void 0 : K.reduce((y, v) => {
+        var T;
+        return y += (T = v == null ? void 0 : v.items) != null && T.length ? v.items.length : 1, y;
+      }, 0), h = (O = t.value) == null ? void 0 : O.length;
+      return h === 1 ? null : h === z ? i("all") : h;
+    });
+    return (z, h) => (m(), E(_(Ce), {
+      "applied-filters-count": se.value,
+      "button-label": $.value,
+      "button-secondary-label": j.value,
+      "disable-apply-button": _(P),
+      "disable-secondary-button": _(V),
+      "default-value": e.defaultValue,
+      label: e.label,
+      field: e.field,
+      "only-slot": !1,
+      onApply: c,
+      onClear: ae,
+      onReset: X,
+      onOpen: f,
+      onClose: L
+    }, {
+      default: F(() => {
+        var K, O, y, v, T, N, Z, x, ee, te, ve, Pe, Ye;
+        return [
+          w("div", _l, [
+            C(_(Ie), {
+              "debounce-time": (O = (K = e.options) == null ? void 0 : K.search) == null ? void 0 : O.debounceTime,
+              value: u.value,
+              "input-field-aria-label": _(i)("searchFilter", { filter: e.label.toLocaleLowerCase() }),
+              onInput: h[0] || (h[0] = (Ne) => u.value = Ne)
+            }, null, 8, ["debounce-time", "value", "input-field-aria-label"])
+          ]),
+          w("div", Cl, [
+            C(_(je))
+          ]),
+          C(_(tl), {
+            id: Y.value,
+            "aria-label": e.label,
+            class: "b-select-filter-button__wrapper",
+            "empty-state": (y = e.options) == null ? void 0 : y.emptyState,
+            "has-more-items": (T = (v = e.options) == null ? void 0 : v.lazy) == null ? void 0 : T.hasMoreItems,
+            items: _(k),
+            "is-option-disabled": (N = e.options) == null ? void 0 : N.isOptionDisabled,
+            "lazy-load-type": (x = (Z = e.options) == null ? void 0 : Z.lazy) == null ? void 0 : x.lazyLoadType,
+            loading: (te = (ee = e.options) == null ? void 0 : ee.lazy) == null ? void 0 : te.loading,
+            multiple: (ve = e.options) == null ? void 0 : ve.multiple,
+            "static-categories": (Pe = e.options) == null ? void 0 : Pe.staticCategories,
+            "no-results-message": U.value,
+            searching: !!u.value,
+            "selected-value": _(g),
+            "virtual-scroll": (Ye = e.options) == null ? void 0 : Ye.virtualScroll,
+            onSelect: B,
+            onSpacePressed: B,
+            onEnterPressed: B,
+            onShowMore: h[1] || (h[1] = (Ne) => {
+              var $e, Ue;
+              return (Ue = ($e = e.options) == null ? void 0 : $e.lazy) == null ? void 0 : Ue.showMoreEvent();
+            })
+          }, Ee({ _: 2 }, [
+            ce(_(n), (Ne, $e) => ({
+              name: $e,
+              fn: F((Ue) => [
+                re(z.$slots, $e, Re(Oe(Ue)), 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", "disable-apply-button", "disable-secondary-button", "default-value", "label", "field"]));
+  }
+}), Dl = /* @__PURE__ */ W($l, [["__scopeId", "data-v-f85eb0e9"]]), _t = {
+  "en-US": {
+    noFiltersMatchThisSearch: "No filters match this search"
+  }
+}, Il = {
+  i18n: { messages: _t },
+  name: "select-filter-dropdown"
+}, Tl = /* @__PURE__ */ G({
+  ...Il,
+  props: {
+    /**
+     * 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: n } = de({ messages: _t }), s = we(), t = l, i = e, { internalFilterValue: a } = Fe(Q(i, "value"), Q(i, "defaultValue")), u = R(""), o = Q(i, "options"), r = R(i.options.listboxItems);
+    he(o, () => {
+      r.value = o.value.listboxItems;
+    });
+    const p = b(() => n("noFiltersMatchThisSearch")), I = (A) => {
+      a.value = A;
+      const { onlySlot: d, ...g } = i;
+      t(S.INPUT, { ...g, value: a.value });
+    };
+    return (A, d) => {
+      var g, V, P;
+      return m(), E(_(zt), {
+        value: _(a),
+        items: e.options.listboxItems,
+        multiple: (g = e.options) == null ? void 0 : g.multiple,
+        "static-categories": (V = e.options) == null ? void 0 : V.staticCategories,
+        "no-results-message": p.value,
+        searching: !!u.value,
+        "is-option-disabled": e.options.isOptionDisabled,
+        "dynamic-filtering": !0,
+        "empty-state": (P = e.options) == null ? void 0 : P.emptyState,
+        onInput: I
+      }, Ee({ _: 2 }, [
+        ce(_(s), (k, U) => ({
+          name: U,
+          fn: F(($) => [
+            re(A.$slots, U, Re(Oe($)))
+          ])
+        }))
+      ]), 1032, ["value", "items", "multiple", "static-categories", "no-results-message", "searching", "is-option-disabled", "empty-state"]);
+    };
+  }
+}), Ae = {
+  /**
+   * 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
+  }
+}, El = {}, ge = /* @__PURE__ */ G({
+  ...El,
+  __name: "select-filter",
+  props: Ae,
+  emits: ["input", "update"],
+  setup(e, { emit: l }) {
+    const n = we(), s = l, t = (a) => s("input", a), i = (a) => s("update", a);
+    return (a, u) => a.onlySlot ? (m(), E(_(Tl), {
+      key: 0,
+      "default-value": a.defaultValue,
+      field: a.field,
+      label: a.label,
+      options: a.options,
+      value: a.value,
+      onInput: t,
+      onUpdate: i
+    }, Ee({ _: 2 }, [
+      ce(_(n), (o, r) => ({
+        name: r,
+        fn: F((p) => [
+          re(a.$slots, r, Re(Oe(p)))
+        ])
+      }))
+    ]), 1032, ["default-value", "field", "label", "options", "value"])) : (m(), E(_(Dl), {
+      key: 1,
+      "default-value": a.defaultValue,
+      field: a.field,
+      label: a.label,
+      options: a.options,
+      value: a.value,
+      onInput: t,
+      onUpdate: i
+    }, Ee({ _: 2 }, [
+      ce(_(n), (o, r) => ({
+        name: r,
+        fn: F((p) => [
+          re(a.$slots, r, Re(Oe(p)))
+        ])
+      }))
+    ]), 1032, ["default-value", "field", "label", "options", "value"]));
+  }
+}), Pl = G({
+  name: "bento-select-avatar-filter",
+  components: {
+    BentoSelectFilter: ge,
+    BentoAvatar: el
+  },
+  props: {
+    ...Ae,
+    /**
+     * 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: [S.INPUT, S.UPDATE],
+  setup(e, { emit: l }) {
+    return {
+      // Enums
+      BentoFilterEvent: S,
+      // Methods
+      onUpdate: (s) => l(S.UPDATE, s)
+    };
+  }
+});
+function Ul(e, l, n, s, t, i) {
+  const a = D("bento-avatar"), u = D("bento-select-filter");
+  return m(), E(u, ue(e.$props, {
+    field: e.field,
+    label: e.label,
+    onUpdate: e.onUpdate,
+    onInput: l[0] || (l[0] = (o) => e.$emit(e.BentoFilterEvent.INPUT, o))
+  }), {
+    default: F(({ label: o, data: r }) => [
+      C(a, {
+        username: o,
+        src: r
+      }, null, 8, ["username", "src"])
+    ]),
+    _: 1
+  }, 16, ["field", "label", "onUpdate"]);
+}
+const Ct = /* @__PURE__ */ W(Pl, [["render", Ul]]), Vl = G({
+  name: "bento-select-country-filter",
+  components: {
+    BentoSelectFilter: ge,
+    ListboxOptionTag: ht
+  },
+  props: {
+    ...Ae,
+    /**
+     * 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: [S.INPUT, S.UPDATE],
+  setup(e, { emit: l }) {
+    return {
+      // Enums
+      BentoFilterEvent: S,
+      // Methods
+      onUpdate: (s) => {
+        l(S.UPDATE, s);
+      }
+    };
+  }
+});
+function kl(e, l, n, s, t, i) {
+  const a = D("listbox-option-tag"), u = D("bento-select-filter");
+  return m(), E(u, ue(e.$props, {
+    field: e.field,
+    label: e.label,
+    onUpdate: e.onUpdate,
+    onInput: l[0] || (l[0] = (o) => e.$emit(e.BentoFilterEvent.INPUT, o))
+  }), {
+    default: F((o) => [
+      C(a, { option: o }, null, 8, ["option"])
+    ]),
+    _: 1
+  }, 16, ["field", "label", "onUpdate"]);
+}
+const At = /* @__PURE__ */ W(Vl, [["render", kl]]), Ll = {
+  name: "bento-select-country-filter"
+}, $t = /* @__PURE__ */ G({
+  ...Ll,
+  props: {
+    ...Ae,
+    /**
+     * 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: [S.INPUT, S.UPDATE],
+  setup(e, { emit: l }) {
+    const n = e, s = l, t = R(n.options.variant), i = R(n.options.listboxItems);
+    he([() => n.options.variant, () => n.options.listboxItems], () => {
+      t.value = n.options.variant, i.value = n.options.listboxItems;
+    });
+    const a = (r) => s(S.UPDATE, r), u = ll(t, i), o = b(() => ({
+      ...n != null && n.options ? n.options : {},
+      listboxItems: u.value
+    }));
+    return (!t.value || t.value === "custom") && qt(
+      'BentoSelectCountryFilter type with `options.variant==="custom"`',
+      "Use any of the other BentoSelectCountryFilter variants instead OR use BentoSelectFilter type for custom labels",
+      "2.0.0"
+    ), (r, p) => (m(), E(ge, ue(n, {
+      field: r.field,
+      label: r.label,
+      options: o.value,
+      onUpdate: a,
+      onInput: p[0] || (p[0] = (I) => r.$emit(_(S).INPUT, I))
+    }), {
+      default: F(({ label: I }) => [
+        C(_(me), { el: "span" }, {
+          default: F(() => [
+            H(M(I), 1)
+          ]),
+          _: 2
+        }, 1024)
+      ]),
+      _: 1
+    }, 16, ["field", "label", "options"]));
+  }
+}), Rl = G({
+  name: "bento-select-payment-method-filter",
+  components: {
+    BentoSelectFilter: ge,
+    BentoPaymentMethod: al
+  },
+  props: {
+    ...Ae,
+    /**
+     * 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: [S.INPUT, S.UPDATE],
+  setup(e, { emit: l }) {
+    return {
+      // Enums
+      BentoFilterEvent: S,
+      // Methods
+      onUpdate: (s) => l(S.UPDATE, s)
+    };
+  }
+});
+function Ol(e, l, n, s, t, i) {
+  const a = D("bento-payment-method"), u = D("bento-select-filter");
+  return m(), E(u, ue(e.$props, {
+    field: e.field,
+    label: e.label,
+    onUpdate: e.onUpdate,
+    onInput: l[0] || (l[0] = (o) => e.$emit(e.BentoFilterEvent.INPUT, o))
+  }), {
+    default: F(({ value: o, label: r }) => [
+      C(a, {
+        type: o,
+        label: r
+      }, null, 8, ["type", "label"])
+    ]),
+    _: 1
+  }, 16, ["field", "label", "onUpdate"]);
+}
+const Dt = /* @__PURE__ */ W(Rl, [["render", Ol]]), wl = G({
+  name: "bento-select-country-filter",
+  components: {
+    BentoSelectFilter: ge,
+    ListboxOptionTag: ht
+  },
+  props: {
+    ...Ae,
+    /**
+     * 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: [S.INPUT, S.UPDATE],
+  setup(e, { emit: l }) {
+    const n = (i) => l(S.UPDATE, i), s = b(
+      () => {
+        var i, a;
+        return (a = (i = e == null ? void 0 : e.options) == null ? void 0 : i.listboxItems) == null ? void 0 : a.map(({ label: u, value: o, variant: r }) => ({ label: u, value: o, data: r }));
+      }
+    );
+    return {
+      // Values
+      countryOptions: b(() => ({
+        ...e.options,
+        listboxItems: s.value
+      })),
+      // Methods
+      onUpdate: n,
+      // Enums
+      BentoFilterEvent: S
+    };
+  }
+});
+function Nl(e, l, n, s, t, i) {
+  const a = D("listbox-option-tag"), u = D("bento-select-filter");
+  return m(), E(u, ue(e.$props, {
+    field: e.field,
+    label: e.label,
+    options: e.countryOptions,
+    onUpdate: e.onUpdate,
+    onInput: l[0] || (l[0] = (o) => e.$emit(e.BentoFilterEvent.INPUT, o))
+  }), {
+    default: F(({ label: o, data: r }) => [
+      C(a, {
+        option: { value: o, data: r, label: "" }
+      }, null, 8, ["option"])
+    ]),
+    _: 1
+  }, 16, ["field", "label", "options", "onUpdate"]);
+}
+const It = /* @__PURE__ */ W(wl, [["render", Nl]]), tt = {
+  "en-US": {
+    yes: "Yes",
+    no: "No"
+  }
+}, Ml = G({
+  name: "bento-boolean-filter",
+  i18n: { messages: tt },
+  components: { BentoBaseFilter: Ce, BentoRadioGroup: Yt },
+  props: {
+    /**
+     * 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: [S.INPUT, S.UPDATE],
+  setup(e, { emit: l }) {
+    const { t: n } = de({ messages: tt }), s = ($) => typeof $ == "boolean" ? $ == null ? void 0 : $.toString() : $, t = ($) => {
+      var j, Y, B, c;
+      return ((Y = (j = e == null ? void 0 : e.options) == null ? void 0 : j.positiveOption) == null ? void 0 : Y.value) !== void 0 && ((c = (B = e == null ? void 0 : e.options) == null ? void 0 : B.negativeOption) == null ? void 0 : c.value) !== void 0 && typeof e.options.positiveOption.value == "boolean" && typeof e.options.negativeOption.value == "boolean" && typeof $ == "string" ? $ === "true" : $;
+    }, i = b(() => s(e.defaultValue)), a = b(() => s(e.value)), u = b(() => e.options && e.options.positiveOption && e.options.negativeOption ? [
+      {
+        ...e.options.positiveOption,
+        value: s(e.options.positiveOption.value)
+      },
+      {
+        ...e.options.negativeOption,
+        value: s(e.options.negativeOption.value)
+      }
+    ] : [
+      { value: "yes", label: n("yes") },
+      { value: "no", label: n("no") }
+    ]), { internalFilterValue: o, isSecondaryButtonDisabled: r, isApplyButtonDisabled: p } = Fe(
+      a,
+      i
+    ), I = b(
+      () => e.defaultValue === null ? e.label : be(u.value.find(({ value: $ }) => $ === a.value).label, 18)
+    ), A = b(
+      () => {
+        var $;
+        return e.defaultValue === null ? be(($ = u.value.find(({ value: j }) => j === a.value)) == null ? void 0 : $.label, 12) : null;
+      }
+    ), d = b(() => ({
+      "b-boolean-filter--only-slot": e.onlySlot
+    }));
+    He(() => {
+      o.value || (o.value = null);
+    });
+    const g = ($) => {
+      o.value = $, l(S.INPUT, {
+        ...e,
+        value: t(o.value)
+      });
+    }, V = () => {
+      o.value = a.value;
+    }, P = () => {
+      l(S.UPDATE, {
+        ...e,
+        value: t(o.value)
+      });
+    };
+    return {
+      // Values
+      items: u,
+      conditionalClasses: d,
+      buttonLabel: I,
+      buttonSecondaryLabel: A,
+      internalFilterValue: o,
+      isApplyButtonDisabled: p,
+      isSecondaryButtonDisabled: r,
+      translatedValue: a,
+      translatedDefaultValue: i,
+      // Events
+      onInput: g,
+      updateFilter: P,
+      clearFilter: () => {
+        o.value = null, P();
+      },
+      openFilter: V,
+      resetFilter: () => l(S.UPDATE, { ...e, value: e.defaultValue })
+    };
+  }
+});
+function Kl(e, l, n, s, t, i) {
+  const a = D("bento-radio-group"), u = D("bento-base-filter");
+  return m(), E(u, ue(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: F(() => [
+      w("div", {
+        class: _e(["b-boolean-filter", e.conditionalClasses]),
+        onKeydown: l[0] || (l[0] = ye((...o) => e.updateFilter && e.updateFilter(...o), ["enter"]))
+      }, [
+        C(a, {
+          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 Tt = /* @__PURE__ */ W(Ml, [["render", Kl], ["__scopeId", "data-v-1fa97477"]]), lt = {
+  "en-US": {
+    from: "From",
+    to: "To"
+  }
+}, Hl = G({
+  name: "bento-range-filter",
+  i18n: { messages: lt },
+  components: { BentoBaseFilter: Ce, BentoInputField: vt },
+  props: {
+    /**
+     * 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: [S.INPUT, S.UPDATE],
+  setup(e, { emit: l }) {
+    const { t: n } = de({ messages: lt }), s = R(null), { internalFilterValue: t, isSecondaryButtonDisabled: i, isApplyButtonDisabled: a } = Fe(
+      Q(e, "value"),
+      Q(e, "defaultValue")
+    ), u = b(() => {
+      var B, c, f, L, X, ae, se, oe;
+      if (!((B = e.value) != null && B[0]) && !((c = e.value) != null && c[1]))
+        return null;
+      let U = "";
+      (f = e.value) != null && f[0] ? (L = e.value) != null && L[1] || (U = "≥") : U = "≤";
+      const $ = (X = e.value) != null && X[0] ? `${be(e.value[0], 5)}` : "", j = (ae = e.value) != null && ae[0] && ((se = e.value) != null && se[1]) ? " - " : "", Y = (oe = e.value) != null && oe[1] ? `${be(e.value[1], 5)}` : "";
+      return `${U}${$}${j}${Y}`;
+    }), o = b(
+      () => e.defaultValue === null ? e.label : u.value
+    ), r = b(
+      () => e.defaultValue === null ? u.value : null
+    ), p = b(() => ({
+      "b-range-filter--only-slot": e.onlySlot
+    })), I = () => {
+      t.value = e.value, st(() => s.value.focusInput());
+    }, A = () => {
+      l(S.INPUT, { ...e, value: t.value });
+    }, d = (U) => {
+      t.value = [U, t.value[1]], A();
+    }, g = (U) => {
+      t.value = [t.value[0], U], A();
+    }, V = () => {
+      t.value.some((U) => U) || (t.value = e.defaultValue !== null ? e.defaultValue : void 0), l(S.UPDATE, {
+        ...e,
+        value: t.value
+      });
+    };
+    return {
+      // Values
+      inputTextRef: s,
+      conditionalClasses: p,
+      internalFilterValue: t,
+      isApplyButtonDisabled: a,
+      isSecondaryButtonDisabled: i,
+      buttonLabel: o,
+      buttonSecondaryLabel: r,
+      // Events
+      updateFrom: d,
+      updateTo: g,
+      updateFilter: V,
+      clearFilter: () => {
+        t.value = ["", ""], V();
+      },
+      openFilter: I,
+      resetFilter: () => l(S.UPDATE, { ...e, value: e.defaultValue }),
+      // Translations
+      t: n
+    };
+  }
+});
+function ql(e, l, n, s, t, i) {
+  const a = D("bento-input-field"), u = D("bento-base-filter");
+  return m(), E(u, ue(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: F(() => [
+      w("div", {
+        class: _e(["b-range-filter", e.conditionalClasses]),
+        onKeydown: l[0] || (l[0] = ye((...o) => e.updateFilter && e.updateFilter(...o), ["enter"]))
+      }, [
+        C(a, {
+          ref: "inputTextRef",
+          value: e.internalFilterValue ? e.internalFilterValue[0] : "",
+          type: "number",
+          "aria-label": e.t("from").toString(),
+          onInput: e.updateFrom
+        }, {
+          default: F(() => [
+            H(M(e.t("from")), 1)
+          ]),
+          _: 1
+        }, 8, ["value", "aria-label", "onInput"]),
+        C(a, {
+          class: "b-range-filter__input-field",
+          value: e.internalFilterValue ? e.internalFilterValue[1] : "",
+          type: "number",
+          "aria-label": e.t("to"),
+          onInput: e.updateTo
+        }, {
+          default: F(() => [
+            H(M(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 Et = /* @__PURE__ */ W(Hl, [["render", ql], ["__scopeId", "data-v-901ba107"]]);
+var Ke = /* @__PURE__ */ ((e) => (e.INPUT = "input", e))(Ke || {});
+const jl = G({
+  name: "base-filter-button",
+  components: { BaseButton: ut, BentoTypography: me, ChevronUpIcon: bt, ChevronDownIcon: ft },
+  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: [Je.CLICK],
+  setup(e, { slots: l, emit: n, attrs: s }) {
+    const t = b(() => l.default ? dt(l)("default") : null), i = rt({ ariaLabel: t }), a = R(null), u = b(() => {
+      var p;
+      return {
+        "aria-controls": (p = s["aria-controls"]) == null ? void 0 : p.toString()
+      };
+    }), o = b(() => ({
+      "b-base-filter-button--with-chevron": e.hasChevron,
+      "b-base-filter-button--filter-open": e.isFilterOpen
+    }));
+    return {
+      // Values
+      ariaAttributes: u,
+      computedAriaLabel: i,
+      conditionalClasses: o,
+      // Methods
+      onClickButton: () => {
+        e.disabled || n(Je.CLICK);
+      },
+      hasSlot: ct(l),
+      // Refs
+      baseFilterButtonRef: a
+    };
+  }
+}), Yl = { class: "b-base-filter-button__default-container" }, zl = { class: "b-base-filter-button__label-container" }, Jl = {
+  key: 0,
+  class: "b-base-filter-button__counter-wrapper"
+};
+function Gl(e, l, n, s, t, i) {
+  const a = D("bento-typography"), u = D("chevron-up-icon"), o = D("chevron-down-icon"), r = D("base-button");
+  return m(), E(r, {
+    ref: "baseFilterButtonRef",
+    class: _e(["b-base-filter-button", e.conditionalClasses]),
+    disabled: e.disabled,
+    "aria-label": e.computedAriaLabel,
+    "aria-controls": e.ariaAttributes["aria-controls"],
+    type: "button",
+    onClick: e.onClickButton
+  }, Ee({
+    default: F(() => [
+      w("div", Yl, [
+        w("div", zl, [
+          C(a, {
+            el: "span",
+            variant: "body",
+            stronger: e.bold,
+            class: "b-base-filter-button__label"
+          }, {
+            default: F(() => [
+              re(e.$slots, "default", {}, void 0, !0)
+            ]),
+            _: 3
+          }, 8, ["stronger"])
+        ]),
+        e.amountAppliedValues && !e.hasChevron ? (m(), q("div", Jl, [
+          C(a, {
+            class: "b-base-filter-button__counter",
+            el: "span",
+            variant: "body",
+            stronger: ""
+          }, {
+            default: F(() => [
+              H(M(e.amountAppliedValues), 1)
+            ]),
+            _: 1
+          })
+        ])) : J("", !0)
+      ])
+    ]),
+    _: 2
+  }, [
+    e.hasChevron ? {
+      name: "iconRight",
+      fn: F(() => [
+        e.isFilterOpen ? (m(), E(u, {
+          key: 0,
+          "aria-hidden": "true"
+        })) : (m(), E(o, {
+          key: 1,
+          "aria-hidden": "true"
+        }))
+      ]),
+      key: "0"
+    } : void 0
+  ]), 1032, ["class", "disabled", "aria-label", "aria-controls", "onClick"]);
+}
+const Wl = /* @__PURE__ */ W(jl, [["render", Gl], ["__scopeId", "data-v-af9efc73"]]), Zl = G({
+  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: b(() => ({
+        "b-all-filters-modal-button--with-counter": e.appliedFiltersCount,
+        "b-all-filters-modal-button--filter-open": e.isFilterOpen
+      })),
+      onClick: () => {
+        l("click");
+      }
+    };
+  }
+});
+function Ql(e, l, n, s, t, i) {
+  const a = D("base-filter-button");
+  return m(), E(a, {
+    class: _e(["b-all-filters-modal-button", e.conditionalClasses]),
+    "amount-applied-values": e.appliedFiltersCount,
+    "is-filter-open": e.isFilterOpen,
+    disabled: e.disabled,
+    onClick: e.onClick
+  }, {
+    default: F(() => [
+      H(M(e.label), 1)
+    ]),
+    _: 1
+  }, 8, ["class", "amount-applied-values", "is-filter-open", "disabled", "onClick"]);
+}
+const Xl = /* @__PURE__ */ W(Zl, [["render", Ql], ["__scopeId", "data-v-b96a672f"]]);
+let at = 0;
+const xl = {
+  beforeCreate() {
+    this.uuid = at.toString(), at += 1;
+  }
+}, ea = { key: 0 };
+function ta(e, l, n, s, t, i) {
+  return m(), q("svg", ue({ 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"] ? (m(), q("title", ea, M(e.$attrs["svg-title"]), 1)) : J("", !0),
+    l[0] || (l[0] = w("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] = w("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 la = /* @__PURE__ */ W(xl, [["render", ta]]), 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"
+  }
+}, aa = G({
+  i18n: { messages: nt },
+  name: "all-filters-modal",
+  components: {
+    AllFiltersModalButton: Xl,
+    BentoBooleanFilter: Tt,
+    BentoButton: wt,
+    BentoDateFilter: gt,
+    BentoDateRangeFilter: St,
+    BentoInputFilter: Ft,
+    BentoModal: Rt,
+    BentoRangeFilter: Et,
+    BentoSearchBar: Ie,
+    BentoSelectAvatarFilter: Ct,
+    BentoSelectCurrencyFilter: At,
+    BentoSelectCountryFilter: $t,
+    BentoSelectFilter: ge,
+    BentoSelectPaymentMethodFilter: Dt,
+    BentoSelectTagFilter: It,
+    BentoTypography: me,
+    FilterBarButton: Be,
+    SlidersIcon: la
+  },
+  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: [Ke.INPUT],
+  setup(e, { emit: l }) {
+    const n = it({ value: e.value }), s = R(n.value), t = qe("all-filters-modal"), i = R([]), a = R(!1), u = R(0), o = R(null), r = R(""), { t: p } = de({ messages: nt }), I = pt(r, Q(s, "value")), A = R({});
+    He(() => {
+      A.value = [];
+    }), he(
+      () => e.value,
+      () => {
+        n.value = e.value, s.value = e.value;
+      }
+    );
+    const d = (y) => (
+      /* eslint-disable-next-line no-nested-ternary */
+      y.sort((v, T) => v.label > T.label ? 1 : T.label > v.label ? -1 : 0)
+    ), g = b(
+      () => d(
+        I.value.filter(
+          (y) => {
+            var v, T;
+            return Array.isArray(y.value) ? ((v = y.value) == null ? void 0 : v.length) && ((T = y.value) == null ? void 0 : T.find((N) => N !== "")) : y.value;
+          }
+        )
+      )
+    ), V = b(
+      () => d(
+        I.value.filter(
+          (y) => {
+            var v, T;
+            return Array.isArray(y.value) ? ((v = y.value) == null ? void 0 : v.length) === 0 || ((T = y.value) == null ? void 0 : T.every((N) => N === "")) : !y.value;
+          }
+        )
+      )
+    ), P = b(() => {
+      var y;
+      return r.value && ((y = I.value) == null ? void 0 : y.length) === 0;
+    }), k = b(() => s.value[u.value]), U = () => {
+      const y = g.value.length ? g.value[0] : V.value[0], v = s.value.findIndex(
+        (T) => T.label === y.label && T.field === y.field
+      );
+      u.value = v;
+    };
+    kt(() => {
+      U();
+    });
+    const $ = (y) => y.map((v) => {
+      var T, N, Z, x, ee, te;
+      switch (v.type) {
+        case le.SELECT:
+        case le.SELECT_AVATAR:
+        case le.SELECT_COUNTRY:
+        case le.SELECT_CURRENCY:
+        case le.SELECT_PAYMENT_METHOD:
+        case le.SELECT_TAG:
+          switch ((T = v.options) == null ? void 0 : T.multiple) {
+            case !0:
+              return {
+                label: v.label,
+                field: v.field,
+                count: (N = v.value) != null && N.length ? (Z = v.value) == null ? void 0 : Z.length : null
+              };
+            default:
+              return {
+                label: v.label,
+                field: v.field,
+                count: v.value == null ? null : 1
+              };
+          }
+        case le.DATE_RANGE:
+          return {
+            label: v.label,
+            field: v.field,
+            count: ((x = v.value) == null ? void 0 : x.startDate) != null && ((ee = v.value) == null ? void 0 : ee.endDate) != null ? 1 : null
+          };
+        case le.RANGE:
+          return {
+            label: v.label,
+            field: v.field,
+            count: (te = v.value) != null && te.find((ve) => ve !== "") ? 1 : null
+          };
+        case le.INPUT:
+        case le.BOOLEAN:
+        case le.DATE:
+        default:
+          return {
+            label: v.label,
+            field: v.field,
+            count: v.value != null ? 1 : null
+          };
+      }
+    }), j = b(
+      () => {
+        var y;
+        return Array.isArray(k.value.value) ? ((y = k.value) == null ? void 0 : y.value.length) && k.value.value.find((v) => v !== "") : !!s.value[u.value].value;
+      }
+    ), Y = b(
+      () => {
+        var y;
+        return (y = $(n.value)) == null ? void 0 : y.filter(({ count: v }) => !!v).length;
+      }
+    ), B = () => {
+      a.value ? a.value = !1 : a.value = !0;
+    }, c = (y) => {
+      var T, N, Z;
+      const v = $(s.value).find((x) => x.field === y.field).count;
+      return y.type.includes("BentoSelect") && ((T = y.options) != null && T.multiple) && v === ((Z = (N = y.options) == null ? void 0 : N.listboxItems) == null ? void 0 : Z.length) ? p("all") : v;
+    }, f = (y, v) => {
+      u.value = s.value.findIndex(
+        (T) => T.label === y && T.field === v
+      );
+    }, L = () => {
+      r.value = "";
+    }, X = () => {
+      a.value = !1, n.value = e.value, s.value = e.value, L(), U();
+    }, ae = (y) => {
+      const v = s.value.map(({ value: T, ...N }, Z) => Z === u.value ? { value: y.value, ...N } : { value: T, ...N });
+      s.value = v;
+    }, se = () => {
+      ae({
+        field: k.value.field,
+        label: k.value.label,
+        type: k.value.type,
+        value: void 0
+      });
+    }, oe = () => {
+      s.value = n.value.map(({ value: y, ...v }) => ({
+        ...v,
+        value: void 0
+      }));
+    }, fe = () => {
+      l(Ke.INPUT, s.value), a.value = !1;
+    }, z = b(
+      () => JSON.stringify(s.value) === JSON.stringify(e.value)
+    ), h = b(() => [
+      {
+        title: p("applyAll"),
+        disabled: z.value,
+        event: fe
+      },
+      {
+        title: p("cancel"),
+        event: X
+      },
+      {
+        title: p("clearAll"),
+        disabled: !Y.value,
+        event: oe
+      }
+    ]);
+    return {
+      // Enums
+      BentoModalEvent: Ot,
+      // Values
+      allFiltersModalUniqueId: t,
+      allFiltersModalFiltersSection: i,
+      allFiltersModalFilterButtons: A,
+      numberOfActiveFilters: Y,
+      isEmptyResultForSearchFilter: P,
+      isModalOpen: a,
+      isClearButtonEnabled: j,
+      activeFilters: g,
+      otherFilters: V,
+      modalActions: h,
+      selectedFilter: k,
+      selectedFilterRef: o,
+      filters: n,
+      searchTerm: r,
+      // Methods
+      onClickAllFiltersModal: B,
+      getFilterCount: c,
+      cancel: X,
+      selectFilter: f,
+      clearFilter: se,
+      updateFilter: ae,
+      onSearchbarClear: L,
+      onKeydownRight: () => {
+        Jt(1, o.value.$el).focus();
+      },
+      onKeydownLeft: () => {
+        A.value[k.value.label].$el.focus();
+      },
+      // Translations
+      t: p
+    };
+  }
+}), na = { class: "b-all-filters-modal" }, oa = {
+  key: 0,
+  class: "b-all-filters-modal__empty-search-message"
+}, sa = {
+  key: 1,
+  class: "b-all-filters-modal__filters-section"
+}, ia = ["aria-labelledby"], ra = {
+  key: 2,
+  class: "b-all-filters-modal__filters-section"
+}, ua = ["aria-labelledby"], da = { class: "b-all-filters-modal__selected-filter-text" }, ca = { class: "b-all-filters-modal__selected-filter-component" }, ba = { class: "b-all-filters-modal__clear-button" };
+function fa(e, l, n, s, t, i) {
+  const a = D("sliders-icon"), u = D("filter-bar-button"), o = D("bento-search-bar"), r = D("bento-typography"), p = D("all-filters-modal-button"), I = D("bento-button"), A = D("bento-modal");
+  return m(), q("div", na, [
+    C(u, {
+      "is-filter-open": e.isModalOpen,
+      "applied-filters-count": e.numberOfActiveFilters,
+      onClick: e.onClickAllFiltersModal
+    }, {
+      iconLeft: F(() => [
+        C(a, { "aria-hidden": "true" })
+      ]),
+      default: F(() => [
+        H(M(e.t("allFilters")) + " ", 1)
+      ]),
+      _: 1
+    }, 8, ["is-filter-open", "applied-filters-count", "onClick"]),
+    C(A, {
+      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: F(() => [
+        H(M(e.t("allFilters")), 1)
+      ]),
+      "content-col-1": F(() => [
+        w("div", {
+          ref: "allFiltersModalFiltersSection",
+          class: "b-all-filters-modal__filters",
+          onKeydown: l[1] || (l[1] = ye((...d) => e.onKeydownRight && e.onKeydownRight(...d), ["right"]))
+        }, [
+          C(o, {
+            class: "b-all-filters-modal__search-bar",
+            value: e.searchTerm,
+            "input-field-aria-label": e.t("searchBar").toString(),
+            onInput: l[0] || (l[0] = (d) => e.searchTerm = d),
+            onClear: e.onSearchbarClear
+          }, null, 8, ["value", "input-field-aria-label", "onClear"]),
+          e.isEmptyResultForSearchFilter ? (m(), q("div", oa, [
+            C(r, { el: "span" }, {
+              default: F(() => [
+                H(M(e.t("noFiltersMatchThisSearch")), 1)
+              ]),
+              _: 1
+            })
+          ])) : J("", !0),
+          e.activeFilters.length ? (m(), q("div", sa, [
+            C(r, {
+              id: `active-filters-${e.allFiltersModalUniqueId}`,
+              class: "b-all-filters-modal__filters-section-title",
+              el: "span",
+              variant: "caption"
+            }, {
+              default: F(() => [
+                H(M(e.t("activeFilters")), 1)
+              ]),
+              _: 1
+            }, 8, ["id"]),
+            w("ul", {
+              class: "b-all-filters-modal__filters-list",
+              "aria-labelledby": `active-filters-${e.allFiltersModalUniqueId}`
+            }, [
+              (m(!0), q(Te, null, ce(e.activeFilters, (d) => (m(), q("li", {
+                key: `${d.label}-${d.field}`
+              }, [
+                C(p, {
+                  ref_for: !0,
+                  ref: (g) => e.allFiltersModalFilterButtons[d.label] = g,
+                  label: d.label,
+                  "applied-filters-count": e.getFilterCount(d),
+                  "is-filter-open": e.selectedFilter.label === d.label,
+                  onClick: (g) => e.selectFilter(d.label, d.field)
+                }, null, 8, ["label", "applied-filters-count", "is-filter-open", "onClick"])
+              ]))), 128))
+            ], 8, ia)
+          ])) : J("", !0),
+          e.otherFilters.length ? (m(), q("div", ra, [
+            e.activeFilters.length ? (m(), E(r, {
+              key: 0,
+              id: `other-filters-${e.allFiltersModalUniqueId}`,
+              class: "b-all-filters-modal__filters-section-title",
+              el: "span",
+              variant: "caption"
+            }, {
+              default: F(() => [
+                H(M(e.t("otherFilters")), 1)
+              ]),
+              _: 1
+            }, 8, ["id"])) : J("", !0),
+            w("ul", {
+              class: "b-all-filters-modal__filters-list",
+              "aria-labelledby": `other-filters-${e.allFiltersModalUniqueId}`
+            }, [
+              (m(!0), q(Te, null, ce(e.otherFilters, (d) => (m(), q("li", {
+                key: `${d.label}-${d.field}`
+              }, [
+                C(p, {
+                  ref_for: !0,
+                  ref: (g) => e.allFiltersModalFilterButtons[d.label] = g,
+                  label: d.label,
+                  "applied-filters-count": e.getFilterCount(d),
+                  "is-filter-open": e.selectedFilter.label === d.label,
+                  onClick: (g) => e.selectFilter(d.label, d.field)
+                }, null, 8, ["label", "applied-filters-count", "is-filter-open", "onClick"])
+              ]))), 128))
+            ], 8, ua)
+          ])) : J("", !0)
+        ], 544)
+      ]),
+      "content-col-2": F(() => [
+        w("div", {
+          class: "b-all-filters-modal__selected-filter-content",
+          onKeydown: l[2] || (l[2] = ye((...d) => e.onKeydownLeft && e.onKeydownLeft(...d), ["left"]))
+        }, [
+          w("div", da, [
+            C(r, {
+              el: "div",
+              variant: "title",
+              medium: ""
+            }, {
+              default: F(() => [
+                H(M(e.selectedFilter.label), 1)
+              ]),
+              _: 1
+            }),
+            e.selectedFilter.description ? (m(), E(r, {
+              key: 0,
+              el: "div",
+              variant: "body",
+              wide: ""
+            }, {
+              default: F(() => [
+                H(M(e.selectedFilter.description), 1)
+              ]),
+              _: 1
+            })) : J("", !0)
+          ]),
+          w("div", ca, [
+            (m(), E(Me(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"]))
+          ]),
+          w("div", ba, [
+            C(I, {
+              variant: "secondary",
+              disabled: !e.isClearButtonEnabled,
+              onClick: e.clearFilter
+            }, {
+              default: F(() => [
+                H(M(e.t("clear")), 1)
+              ]),
+              _: 1
+            }, 8, ["disabled", "onClick"])
+          ])
+        ], 32)
+      ]),
+      _: 1
+    }, 8, ["is-open", "actions", "onCloseModal"])
+  ]);
+}
+const ot = /* @__PURE__ */ W(aa, [["render", fa], ["__scopeId", "data-v-c106a692"]]), Pt = {
+  "en-US": {
+    clearAll: "Clear filters",
+    filtersHaveBeenCleared: "Filters have been cleared.",
+    filtersHaveBeenReset: "Filters have been reset.",
+    undo: "Undo",
+    resetAll: "Reset filters",
+    searchBar: "Search bar"
+  }
+}, va = { class: "b-filter-bar" }, pa = { class: "b-filter-bar__container" }, ma = {
+  key: 0,
+  class: "b-filter-bar__before-filters"
+}, ya = { class: "b-filter-bar__filters-container" }, ha = { class: "b-filter-bar__filters" }, Fa = { class: "b-filter-bar__scroller-content" }, ga = {
+  key: 0,
+  class: "b-filter-bar__actions"
+}, Sa = {
+  i18n: { messages: Pt },
+  name: "bento-filter-bar",
+  components: {
+    BentoBooleanFilter: Tt,
+    BentoDateFilter: gt,
+    BentoDateRangeFilter: St,
+    BentoInputFilter: Ft,
+    BentoRangeFilter: Et,
+    BentoSelectAvatarFilter: Ct,
+    BentoSelectCountryFilter: $t,
+    BentoSelectCurrencyFilter: At,
+    BentoSelectFilter: ge,
+    BentoSelectPaymentMethodFilter: Dt,
+    BentoSelectTagFilter: It
+  }
+}, Ba = /* @__PURE__ */ G({
+  ...Sa,
+  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: Ie.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: [
+    De.INPUT,
+    De.UPDATE_FILTER_VALUES,
+    Se.CLEAR,
+    Se.INPUT,
+    Se.UPDATE
+  ],
+  setup(e, { expose: l, emit: n }) {
+    const s = e, t = n, { t: i } = de({ messages: Pt }), a = b(
+      () => {
+        var B, c;
+        return (c = ((B = s.config) == null ? void 0 : B.length) > 0 ? s.config : s.value) == null ? void 0 : c.map((f) => {
+          var X;
+          let L = (X = s.filterValues.find(({ field: ae }) => ae === f.field)) == null ? void 0 : X.value;
+          return L === void 0 && (L = (f == null ? void 0 : f.value) === void 0 && (f == null ? void 0 : f.defaultValue) !== void 0 ? f == null ? void 0 : f.defaultValue : f == null ? void 0 : f.value), { ...f, value: L !== void 0 ? L : f == null ? void 0 : f.value };
+        });
+      }
+    ), { addToast: u } = Lt(), o = b(() => i("searchBar")), r = b(() => a.value.some(
+      ({ visible: c }) => c != null
+    ) ? a.value.some(({ visible: c }) => !c) : !1), p = b(
+      () => a.value.filter(({ defaultValue: B }) => B !== void 0)
+    ), I = b(() => a.value.some(
+      ({ visible: c }) => c != null
+    ) ? a.value.filter(
+      ({ defaultValue: c, visible: f, value: L }) => c === void 0 && f || s.showAppliedHiddenFilters && L != null
+    ) : a.value.filter(
+      ({ defaultValue: c, value: f }) => c === void 0 || s.showAppliedHiddenFilters && f != null
+    )), A = b(() => s.searchTerm != null), d = b(
+      () => a.value.filter(({ defaultValue: B }) => B == null).some(({ value: B }) => B != null)
+    ), g = b(() => p.value.length === 0 && d.value), V = b(() => p.value.length === 0 ? !1 : !a.value.filter(({ defaultValue: c }) => c !== void 0 || c !== null).every(({ value: c, defaultValue: f }) => JSON.stringify(c) === JSON.stringify(f)) || d.value), P = (B) => {
+      t(De.INPUT, B), t(
+        De.UPDATE_FILTER_VALUES,
+        B == null ? void 0 : B.filter(({ value: c }) => c !== null || c !== void 0).map(({ field: c, value: f }) => ({ field: c, value: f }))
+      );
+    }, k = (B) => {
+      const c = a.value.findIndex(
+        (L) => L.field === B.field
+      ), f = a.value.slice();
+      f[c].value = B.value, P(f);
+    }, U = () => {
+      const B = a.value.slice(), c = a.value.map(({ value: f, ...L }) => ({
+        ...L,
+        value: void 0
+      }));
+      u({
+        text: i("filtersHaveBeenCleared"),
+        action: {
+          handler: () => P(B),
+          text: i("undo")
+        }
+      }), P(c);
+    }, $ = () => {
+      const B = a.value.slice(), c = a.value.map(({ defaultValue: f, ...L }) => ({
+        ...L,
+        defaultValue: f,
+        value: f
+      }));
+      u({
+        text: i("filtersHaveBeenReset"),
+        action: {
+          handler: () => P(B),
+          text: i("undo")
+        }
+      }), P(c);
+    }, j = (B) => {
+      t(Se.INPUT, B), t(Se.UPDATE, B);
+    }, Y = () => {
+      t(Se.CLEAR);
+    };
+    return l({ isClearAllVisible: g, clearAllFilters: U, isResetAllVisible: V, resetAllFilters: $ }), (B, c) => (m(), q("div", va, [
+      w("div", pa, [
+        A.value || r.value || g.value || V.value ? (m(), q("div", ma, [
+          A.value ? (m(), E(_(Ie), {
+            key: 0,
+            class: "b-filter-bar__search-bar",
+            "input-field-aria-label": o.value,
+            value: e.searchTerm,
+            condensed: "",
+            onInput: j,
+            onClear: Y
+          }, null, 8, ["input-field-aria-label", "value"])) : J("", !0),
+          r.value ? (m(), E(ot, {
+            key: 1,
+            class: "b-filter-bar__all-filters-modal",
+            value: a.value,
+            onInput: P
+          }, null, 8, ["value"])) : J("", !0),
+          Ve(C(_(Be), {
+            class: "b-filter-bar__clear-all",
+            onClick: U
+          }, {
+            iconLeft: F(() => [
+              C(_(Le), { "aria-hidden": "true" })
+            ]),
+            default: F(() => [
+              H(M(_(i)("clearAll")) + " ", 1)
+            ]),
+            _: 1
+          }, 512), [
+            [ke, g.value]
+          ]),
+          Ve(C(_(Be), {
+            class: "b-filter-bar__reset-all",
+            onClick: $
+          }, {
+            iconLeft: F(() => [
+              C(_(Le), { "aria-hidden": "true" })
+            ]),
+            default: F(() => [
+              H(M(_(i)("resetAll")) + " ", 1)
+            ]),
+            _: 1
+          }, 512), [
+            [ke, V.value]
+          ])
+        ])) : J("", !0),
+        w("div", ya, [
+          w("div", ha, [
+            C(_(nl), {
+              class: "b-filter-bar__fixed-scroller",
+              condensed: ""
+            }, {
+              default: F(() => [
+                w("div", Fa, [
+                  A.value ? (m(), E(_(Ie), {
+                    key: 0,
+                    class: "b-filter-bar__search-bar",
+                    "input-field-aria-label": o.value,
+                    value: e.searchTerm,
+                    condensed: "",
+                    onInput: j,
+                    onClear: Y
+                  }, null, 8, ["input-field-aria-label", "value"])) : J("", !0),
+                  p.value.length ? (m(!0), q(Te, { key: 1 }, ce(p.value, (f) => (m(), E(Me(f.type), {
+                    key: f.field,
+                    field: f.field,
+                    label: f.label,
+                    options: f.options,
+                    value: f.value,
+                    "default-value": f.defaultValue,
+                    onUpdate: k
+                  }, null, 40, ["field", "label", "options", "value", "default-value"]))), 128)) : J("", !0),
+                  (m(!0), q(Te, null, ce(I.value, (f) => (m(), E(Me(f.type), {
+                    key: f.field,
+                    field: f.field,
+                    label: f.label,
+                    options: f.options,
+                    value: f.value,
+                    onUpdate: k
+                  }, null, 40, ["field", "label", "options", "value"]))), 128))
+                ])
+              ]),
+              _: 1
+            })
+          ]),
+          r.value || g.value || V.value ? (m(), q("div", ga, [
+            r.value ? (m(), E(ot, {
+              key: 0,
+              class: "b-filter-bar__all-filters-modal",
+              value: a.value,
+              onInput: P
+            }, null, 8, ["value"])) : J("", !0),
+            Ve(C(_(Be), {
+              class: "b-filter-bar__clear-all",
+              onClick: U
+            }, {
+              iconLeft: F(() => [
+                C(_(Le), { "aria-hidden": "true" })
+              ]),
+              default: F(() => [
+                H(M(_(i)("clearAll")) + " ", 1)
+              ]),
+              _: 1
+            }, 512), [
+              [ke, g.value]
+            ]),
+            Ve(C(_(Be), {
+              class: "b-filter-bar__reset-all",
+              onClick: $
+            }, {
+              iconLeft: F(() => [
+                C(_(Le), { "aria-hidden": "true" })
+              ]),
+              default: F(() => [
+                H(M(_(i)("resetAll")) + " ", 1)
+              ]),
+              _: 1
+            }, 512), [
+              [ke, V.value]
+            ])
+          ])) : J("", !0)
+        ])
+      ])
+    ]));
+  }
+}), un = /* @__PURE__ */ W(Ba, [["__scopeId", "data-v-1bd520ea"]]);
+export {
+  un as B,
+  S as a,
+  De as b,
+  le as c
+};
+//# sourceMappingURL=filter-bar.-G1-moOO.js.map