@adyen/adyen-platform-experience-web 1.7.1 → 1.8.1

package/dist/es/components/internal/FilterBar/FilterBar.js

@@ -1,45 +1,61 @@
-import { jsx as i } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import l from "classnames";
-import { ButtonVariant as o } from "../Button/types.js";
-import { useState as c, useEffect as s } from "../../../external/preact/hooks/dist/hooks.module.js";
+import { jsx as a } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import b from "classnames";
+import { ButtonVariant as c } from "../Button/types.js";
+import { useState as C, useEffect as B, useMemo as I } from "../../../external/preact/hooks/dist/hooks.module.js";
 import m from "../../../core/Context/useCoreContext.js";
-import { useResponsiveContainer as u, containerQueries as f } from "../../../hooks/useResponsiveContainer.js";
+import { useResponsiveContainer as x, containerQueries as E } from "../../../hooks/useResponsiveContainer.js";
 /* empty css               */
-import a from "../Button/Button.js";
-import { Icon as d } from "../Icon/Icon.js";
-import { isFunction as b } from "../../../utils/value/is.js";
-const n = "adyen-pe-filter-bar-mobile-switch", E = () => {
-  const t = u(f.down.xs), [e, r] = c(!t);
-  return s(() => {
-    r(!t);
-  }, [t]), { isMobileContainer: t, showingFilters: e, setShowingFilters: r };
-}, F = ({ isMobileContainer: t, showingFilters: e, setShowingFilters: r }) => t ? /* @__PURE__ */ i("div", { className: n, children: /* @__PURE__ */ i(
-  a,
-  {
-    iconButton: !0,
-    className: `${n}__button`,
-    disabled: !b(r),
-    onClick: () => r == null ? void 0 : r(!e),
-    variant: o.SECONDARY,
-    children: /* @__PURE__ */ i(d, { name: e ? "cross" : "filter" })
-  }
-) }) : null, I = (t) => {
-  const { i18n: e } = m();
-  return t.showingFilters ? /* @__PURE__ */ i(
+import { useUniqueId as p } from "../../../hooks/useUniqueId.js";
+import d from "../Button/Button.js";
+import { Icon as v } from "../Icon/Icon.js";
+import { isFunction as y } from "../../../utils/value/is.js";
+const s = "adyen-pe-filter-bar-mobile-switch", O = () => {
+  const e = x(E.down.xs), [t, i] = C(!e), r = `filters-${p()}`;
+  return B(() => {
+    i(!e);
+  }, [e]), { filterBarElementId: r, isMobileContainer: e, showingFilters: t, setShowingFilters: i };
+}, Y = ({
+  ariaLabelKey: e,
+  filterBarElementId: t,
+  isMobileContainer: i,
+  showingFilters: r,
+  setShowingFilters: o
+}) => {
+  const { i18n: n } = m(), f = I(() => n.get(e ?? "common.filters.mobile.label"), [n]), l = !y(o), u = !l && !!r;
+  return i ? /* @__PURE__ */ a("div", { className: s, children: /* @__PURE__ */ a(
+    d,
+    {
+      iconButton: !0,
+      className: `${s}__button`,
+      disabled: l,
+      "aria-label": f,
+      "aria-expanded": u,
+      "aria-controls": t,
+      onClick: () => o == null ? void 0 : o(!r),
+      variant: c.SECONDARY,
+      children: /* @__PURE__ */ a(v, { name: r ? "cross" : "filter" })
+    }
+  ) }) : null;
+}, $ = (e) => {
+  const { i18n: t } = m();
+  return e.showingFilters ? /* @__PURE__ */ a(
     "div",
     {
-      "aria-label": e.get("filterBar"),
-      className: l("adyen-pe-filter-bar", { "adyen-pe-filter-bar__content--mobile": t.isMobileContainer }),
+      role: "group",
+      "data-testId": "filter-bar",
+      "aria-label": t.get(e.ariaLabelKey ?? "common.filters.label"),
+      className: b("adyen-pe-filter-bar", { "adyen-pe-filter-bar--mobile": e.isMobileContainer }),
+      id: e.filterBarElementId,
       children: [
-        t.children,
-        t.canResetFilters && !!t.resetFilters && /* @__PURE__ */ i(a, { variant: o.TERTIARY, onClick: t.resetFilters, children: e.get("button.clearAll") })
+        e.children,
+        e.canResetFilters && !!e.resetFilters && /* @__PURE__ */ a(d, { variant: c.TERTIARY, onClick: e.resetFilters, children: t.get("common.filters.controls.resetAll.label") })
       ]
     }
   ) : null;
 };
 export {
-  I as FilterBar,
-  F as FilterBarMobileSwitch,
-  I as default,
-  E as useFilterBarState
+  $ as FilterBar,
+  Y as FilterBarMobileSwitch,
+  $ as default,
+  O as useFilterBarState
 };

package/dist/es/components/internal/FilterBar/filters/AmountFilter/AmountFilter.js

@@ -1,57 +1,65 @@
-import { jsx as P } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { RangeSelection as w } from "./RangeSelection.js";
-import { useState as T, useMemo as z, useCallback as E } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import { PopoverContainerSize as B } from "../../../Popover/types.js";
-import D from "../../../../../core/Context/useCoreContext.js";
-import { AMOUNT_MULTIPLIER as L } from "./constants.js";
-import F from "../BaseFilter/BaseFilter.js";
-import { EMPTY_OBJECT as O } from "../../../../../utils/value/constants.js";
-import { isUndefined as f } from "../../../../../utils/value/is.js";
-const G = ({ updateFilters: $, selectedCurrencies: t, availableCurrencies: m, ...y }) => {
-  const { i18n: g } = D(), [h, U] = T(), [p, x] = T(), M = z(() => (t == null ? void 0 : t.length) === 1 || (m == null ? void 0 : m.length) === 1, [m == null ? void 0 : m.length, t == null ? void 0 : t.length]), S = E(
-    (n, o) => {
-      const A = (t == null ? void 0 : t[0]) || (m == null ? void 0 : m[0]), I = o && A ? {
-        style: "currency",
-        currency: A,
-        currencyDisplay: "symbol"
-      } : void 0;
-      return n.toLocaleString(g.locale, I);
-    },
-    [m, g, t]
-  ), V = E(
-    (n) => {
-      const { minAmount: o, maxAmount: A } = n ?? O;
-      U({ minAmount: o, maxAmount: A }), f(o) && f(A) && x(void 0), $({
-        minAmount: f(o) ? void 0 : String(Math.round(o * L)),
-        maxAmount: f(A) ? void 0 : String(Math.round(A * L))
+import { jsx as A } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { RangeSelection as k } from "./RangeSelection.js";
+import { useState as i, useMemo as E, useCallback as T, useEffect as b } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { PopoverContainerSize as w } from "../../../Popover/types.js";
+import F from "../../../../../core/Context/useCoreContext.js";
+import { AMOUNT_MULTIPLIER as p } from "./constants.js";
+import U from "../BaseFilter/BaseFilter.js";
+import { EMPTY_OBJECT as V } from "../../../../../utils/value/constants.js";
+import { isUndefined as r } from "../../../../../utils/value/is.js";
+const d = (m, t) => !r(t) && t >= 0 ? !r(m) && m > t ? 0 : m === t || t === 0 ? 2 : m && m > 0 ? 1 : 3 : r(t) && m && m > 0 ? 4 : 0, I = (m) => /* @__PURE__ */ A(k, { ...m }), j = ({ updateFilters: m, selectedCurrencies: t, availableCurrencies: f, ...e }) => {
+  const { i18n: u } = F(), [g, l] = i(), [M, x] = i(), S = E(() => {
+    const a = (t == null ? void 0 : t[0]) || (f == null ? void 0 : f[0]), n = ((f == null ? void 0 : f.length) === 1 || (t == null ? void 0 : t.length) === 1) && a ? { currency: a, currencyDisplay: "symbol", style: "currency" } : void 0;
+    return (s) => s.toLocaleString(u.locale, n);
+  }, [u, f, t]), c = T(
+    (a) => {
+      let { minAmount: o, maxAmount: n } = a ?? V;
+      o = r(o) ? o : Number(o), n = r(n) ? n : Number(n), x({ minAmount: o, maxAmount: n }), r(o) && r(n) && l(void 0), m({
+        minAmount: r(o) ? o : String(Math.round(o * p)),
+        maxAmount: r(n) ? n : String(Math.round(n * p))
       });
     },
-    [$]
+    [m]
   );
-  if (h && (h.minAmount || h.maxAmount)) {
-    const { minAmount: n, maxAmount: o } = h ?? {};
-    !f(n) && !f(o) && n <= o ? x(
-      `${S(n, M)} ${g.get("to").toLowerCase()} ${S(o, M)}`
-    ) : !f(n) && f(o) && n >= 0 ? x(`${g.get("from")} ${S(n, M)}`) : f(n) && !f(o) ? x(`${g.get("to")} ${S(o, M)}`) : x(void 0);
-  }
-  return /* @__PURE__ */ P(
-    F,
+  return b(() => {
+    const { minAmount: a, maxAmount: o } = M ?? {}, n = d(a, o), s = r(o) ? o : S(o), h = r(a) ? a : S(a);
+    let y;
+    switch (n) {
+      case 1:
+        y = u.get("common.filters.types.amount.range.between", {
+          values: { minAmount: h, maxAmount: s }
+        });
+        break;
+      case 2:
+        y = u.get("common.filters.types.amount.range.only", { values: { amount: s } });
+        break;
+      case 3:
+        y = u.get("common.filters.types.amount.range.max", { values: { amount: s } });
+        break;
+      case 4:
+        y = u.get("common.filters.types.amount.range.min", { values: { amount: h } });
+        break;
+    }
+    l(y);
+  }, [u, M]), /* @__PURE__ */ A(
+    U,
     {
-      ...y,
-      updateFilters: $,
-      minAmount: y.minAmount,
-      maxAmount: y.maxAmount,
-      onChange: V,
-      value: p,
-      label: p || y.label,
+      ...e,
+      updateFilters: m,
+      minAmount: e.minAmount,
+      maxAmount: e.maxAmount,
+      onChange: c,
+      value: g,
+      label: g || e.label,
       type: "text",
-      containerSize: B.MEDIUM,
+      containerSize: w.MEDIUM,
       selectedCurrencies: t,
-      availableCurrencies: m,
-      render: w
+      availableCurrencies: f,
+      render: I,
+      "aria-label": e.label
     }
   );
 };
 export {
-  G as AmountFilter
+  j as AmountFilter
 };

package/dist/es/components/internal/FilterBar/filters/AmountFilter/RangeSelection.js

@@ -1,77 +1,80 @@
-import { jsx as n } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import g from "../../../FormFields/InputBase.js";
+import { jsx as r } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import x from "../../../FormFields/InputBase.js";
 /* empty css                  */
-import { useState as p, useCallback as x, useEffect as T, useMemo as N } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import h from "../../../../../core/Context/useCoreContext.js";
-import { AMOUNT_MULTIPLIER as b } from "./constants.js";
+import { useRef as I, useState as y, useCallback as b, useEffect as f, useMemo as M } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import N from "../../../../../core/Context/useCoreContext.js";
+import { AMOUNT_MULTIPLIER as T } from "./constants.js";
 import { isUndefined as m } from "../../../../../utils/value/is.js";
 import { CommitAction as F } from "../../../../../hooks/useCommitAction/types.js";
-const S = ({
+const k = ({
   onChange: i,
-  editAction: o,
+  editAction: l,
   onValueUpdated: u,
-  selectedCurrencies: y,
-  availableCurrencies: I,
-  value: M,
-  ...l
+  selectedCurrencies: R,
+  availableCurrencies: V,
+  value: _,
+  ...o
 }) => {
-  const { i18n: r } = h(), [t, c] = p(
-    m(l.minAmount) ? void 0 : parseFloat(l.minAmount) / b
-  ), [a, d] = p(
-    m(l.maxAmount) ? void 0 : parseFloat(l.maxAmount) / b
-  ), v = x(() => {
-    i({ minAmount: t, maxAmount: a });
-  }, [a, t, i]), f = x(() => {
-    i({ minAmount: void 0, maxAmount: void 0 }), d(void 0), c(void 0);
+  const { i18n: a } = N(), s = I(null), [t, d] = y(
+    m(o.minAmount) ? void 0 : parseFloat(o.minAmount) / T
+  ), [n, p] = y(
+    m(o.maxAmount) ? void 0 : parseFloat(o.maxAmount) / T
+  ), v = b(() => {
+    i({ minAmount: t, maxAmount: n });
+  }, [n, t, i]), A = b(() => {
+    i({ minAmount: void 0, maxAmount: void 0 }), p(void 0), d(void 0);
   }, [i]);
-  T(() => {
-    o === F.APPLY && v(), o === F.CLEAR && f();
-  }, [v, f, o]);
-  const A = N(() => ({ minAmount: Number(t), maxAmount: Number(a) }), [a, t]);
-  return T(() => {
-    const { maxAmount: e, minAmount: s } = A;
-    m(e) && m(s) || s > e ? u(null) : u(`${s}-${e}`);
-  }, [A, u]), /* @__PURE__ */ n("div", { className: "adyen-pe-range-selection-filter", children: [
-    /* @__PURE__ */ n("div", { className: "adyen-pe-range-selection-filter__input", children: [
-      /* @__PURE__ */ n("label", { htmlFor: "minValue", children: `${r.get("from")}:` }),
-      /* @__PURE__ */ n(
-        g,
+  f(() => {
+    l === F.APPLY && v(), l === F.CLEAR && A();
+  }, [v, A, l]);
+  const g = M(() => ({ minAmount: Number(t), maxAmount: Number(n) }), [n, t]);
+  return f(() => {
+    const { maxAmount: e, minAmount: c } = g;
+    m(e) && m(c) || c > e ? u(null) : u(`${c}-${e}`);
+  }, [g, u]), f(() => {
+    s.current && s.current.focus();
+  }, []), /* @__PURE__ */ r("div", { className: "adyen-pe-range-selection-filter", children: [
+    /* @__PURE__ */ r("div", { className: "adyen-pe-range-selection-filter__input", children: [
+      /* @__PURE__ */ r("label", { htmlFor: "minValue", children: `${a.get("common.filters.types.amount.inputs.min.label")}:` }),
+      /* @__PURE__ */ r(
+        x,
         {
+          ref: s,
           "data-testid": "minValueFilter",
-          lang: r.locale,
+          lang: a.locale,
           name: "minValue",
           type: "number",
           value: t,
           onInput: (e) => {
-            e.currentTarget && c(e.currentTarget.value !== "" ? e.currentTarget.value : void 0);
+            e.currentTarget && d(e.currentTarget.value !== "" ? e.currentTarget.value : void 0);
           },
           min: 0,
           isInvalid: t ? t < 0 : !1,
-          errorMessage: r.get("noNegativeNumbersAllowed")
+          errorMessage: a.get("common.filters.types.amount.errors.negative")
         }
       )
     ] }),
-    /* @__PURE__ */ n("div", { className: "adyen-pe-range-selection-filter__input", children: [
-      /* @__PURE__ */ n("label", { htmlFor: "maxValue", children: `${r.get("to")}:` }),
-      /* @__PURE__ */ n(
-        g,
+    /* @__PURE__ */ r("div", { className: "adyen-pe-range-selection-filter__input", children: [
+      /* @__PURE__ */ r("label", { htmlFor: "maxValue", children: `${a.get("common.filters.types.amount.inputs.max.label")}:` }),
+      /* @__PURE__ */ r(
+        x,
         {
           "data-testid": "maxValueFilter",
-          lang: r.locale,
+          lang: a.locale,
           name: "maxValue",
           type: "number",
-          value: a,
+          value: n,
           onInput: (e) => {
-            e.currentTarget && d(e.currentTarget.value !== "" ? e.currentTarget.value : void 0);
+            e.currentTarget && p(e.currentTarget.value !== "" ? e.currentTarget.value : void 0);
           },
           min: t,
-          isInvalid: !m(a) && !m(t) && a < t,
-          errorMessage: r.get("toValueShouldBeGreaterThanTheFromValue")
+          isInvalid: !m(n) && n < (t ?? 0),
+          errorMessage: a.get("common.filters.types.amount.errors.smallerMax")
         }
       )
     ] })
   ] });
 };
 export {
-  S as RangeSelection
+  k as RangeSelection
 };

package/dist/es/components/internal/FilterBar/filters/BaseFilter/BaseFilter.js

@@ -1,94 +1,97 @@
-import { jsx as a } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { useResponsiveContainer as g, containerQueries as C } from "../../../../../hooks/useResponsiveContainer.js";
-import $ from "../../components/FilterButton/FilterButton.js";
-import q from "../../../Popover/Popover.js";
-import { PopoverContainerPosition as z, PopoverContainerVariant as H } from "../../../Popover/types.js";
-import { TypographyVariant as B, TypographyElement as O } from "../../../Typography/types.js";
-import S from "../../../Typography/Typography.js";
-import L from "../../../../../hooks/element/useUniqueIdentifier.js";
-import { memo as j } from "../../../../../external/preact/compat/dist/compat.module.js";
-import { useMemo as E, useCallback as D, useEffect as A, useState as Q } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import c from "../../../../../hooks/useBooleanState.js";
-import G from "../../../FormFields/InputText.js";
-import J from "../../../../../hooks/useCommitAction/useCommitAction.js";
-import { Fragment as K } from "../../../../../external/preact/dist/preact.module.js";
-import { isNull as W } from "../../../../../utils/value/is.js";
-import { isEmptyString as X } from "../../../../../utils/value/string.js";
-import { CommitAction as _ } from "../../../../../hooks/useCommitAction/types.js";
-const Z = (r) => !r || X(r), ee = /* @__PURE__ */ (() => {
-  const r = (e) => {
-    const { editAction: f, name: i, onChange: u, onValueUpdated: s } = e, [l, n] = Q(e.value), m = D(
-      (t) => {
-        const y = t.target.value.trim();
-        n(y), s(y);
+import { jsx as i } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useResponsiveContainer as b, containerQueries as g } from "../../../../../hooks/useResponsiveContainer.js";
+import z from "../../components/FilterButton/FilterButton.js";
+import H from "../../../Popover/Popover.js";
+import { PopoverContainerPosition as L, PopoverContainerVariant as j } from "../../../Popover/types.js";
+import { TypographyVariant as O, TypographyElement as S } from "../../../Typography/types.js";
+import _ from "../../../Typography/Typography.js";
+import { memo as Q } from "../../../../../external/preact/compat/dist/compat.module.js";
+import { useMemo as p, useRef as G, useCallback as I, useEffect as C, useState as J } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import f from "../../../../../hooks/useBooleanState.js";
+import { useUniqueId as K } from "../../../../../hooks/useUniqueId.js";
+import W from "../../../FormFields/InputText.js";
+import X from "../../../../../hooks/useCommitAction/useCommitAction.js";
+import { Fragment as Z } from "../../../../../external/preact/dist/preact.module.js";
+import { isNull as ee } from "../../../../../utils/value/is.js";
+import { isEmptyString as te } from "../../../../../utils/value/string.js";
+import { CommitAction as D } from "../../../../../hooks/useCommitAction/types.js";
+const ae = (s) => !s || te(s), ie = /* @__PURE__ */ (() => {
+  const s = (u) => {
+    const { editAction: e, name: A, onChange: t, onValueUpdated: r } = u, [c, d] = J(u.value), l = I(
+      (a) => {
+        const n = a.target.value.trim();
+        d(n), r(n);
       },
-      [s]
+      [r]
     );
-    return A(() => {
-      if (f === _.CLEAR) {
-        const t = "";
-        n(t), s(t), u(t);
+    return C(() => {
+      if (e === D.CLEAR) {
+        const a = "";
+        d(a), r(a), t(a);
       }
-      f === _.APPLY && u(l ?? "");
-    }, [l, f, u, s]), /* @__PURE__ */ a(G, { name: i, value: l, onInput: m });
+      e === D.APPLY && t(c ?? "");
+    }, [c, e, t, r]), /* @__PURE__ */ i(W, { name: A, value: c, onInput: l });
   };
-  return (e) => /* @__PURE__ */ a(r, { ...e });
-})(), te = ({ render: r, ...e }) => {
+  return (u) => /* @__PURE__ */ i(s, { ...u });
+})(), ne = ({ render: s, ["aria-label"]: u, ...e }) => {
   var N;
-  const f = g(C.down.xs), [i, u] = c(!1), [s, l] = c(!1), n = E(() => e.isValueEmpty ?? Z, [e.isValueEmpty]), [m, t] = c(n(e.value)), [y, v] = c(!1), [T, h] = c(!1), [I, M] = c(n(e.value)), b = L(), w = E(() => r ?? ee, [r]), k = D(
+  const A = b(g.down.xs), [t, r] = f(!1), [c, d] = f(!1), l = p(() => e.isValueEmpty ?? ae, [e.isValueEmpty]), [a, n] = f(l(e.value)), [M, v] = f(!1), [T, h] = f(!1), [w, V] = f(l(e.value)), E = G(null), R = `elem-${K()}`, k = p(() => s ?? ie, [s]), x = I(
     (o) => {
-      const d = n(o ?? void 0);
-      t(d), M(W(o)), h(y ? o !== e.value : !d);
+      const m = l(o ?? void 0);
+      n(m), V(ee(o)), h(M ? o !== e.value : !m);
     },
-    [n, t, M, h, y, e.value]
-  ), { commitAction: x, commitActionButtons: R, committing: V, resetCommitAction: P } = J({
-    applyDisabled: I || !T,
-    resetDisabled: m
-  }), [p, F] = E(() => {
-    const o = (d) => () => {
-      d !== i && (d && (P(), h(!1), v(!1)), u(d), l(d));
+    [l, n, V, h, M, e.value]
+  ), { commitAction: U, commitActionButtons: Y, committing: P, resetCommitAction: B } = X({
+    applyDisabled: w || !T,
+    resetDisabled: a,
+    onResetAction: e == null ? void 0 : e.onResetAction
+  }), [y, F] = p(() => {
+    const o = (m) => () => {
+      m !== t && (m && (B(), h(!1), v(!1)), r(m), d(m));
     };
     return [o(!1), o(!0)];
-  }, [u, i, P, l, v, h]);
-  A(() => {
-    if (s) {
-      const o = n(e.value);
-      l(!1), t(o), v(!o);
+  }, [r, t, B, d, v, h]);
+  C(() => {
+    if (c) {
+      const o = l(e.value);
+      d(!1), n(o), v(!o);
     }
-  }, [e.value, s, n, l, t, v]), A(() => {
-    V && p(), t(m);
-  }, [V, p, t, m]);
-  const U = g(C.only.sm), Y = g(C.only.md);
-  return /* @__PURE__ */ a(K, { children: [
-    /* @__PURE__ */ a("div", { className: `adyen-pe-filter adyen-pe-filter--${e.type}`, children: E(
-      () => /* @__PURE__ */ a(
-        $,
+  }, [e.value, c, l, d, n, v]), C(() => {
+    P && y(), n(a);
+  }, [P, y, n, a]);
+  const $ = b(g.only.sm), q = b(g.only.md);
+  return /* @__PURE__ */ i(Z, { children: [
+    /* @__PURE__ */ i("div", { className: `adyen-pe-filter adyen-pe-filter--${e.type}`, children: p(
+      () => /* @__PURE__ */ i(
+        z,
         {
           classNameModifiers: [
             ...e.appliedFilterAmount ? ["with-counter"] : [],
             ...e.classNameModifiers ?? [],
-            ...i ? ["active"] : [],
-            ...m ? [] : ["has-selection"]
+            ...t ? ["active"] : [],
+            ...a ? [] : ["has-selection"]
           ],
-          onClick: i ? p : F,
+          "aria-label": u,
+          id: R,
+          onClick: t ? y : F,
+          ref: E,
           tabIndex: 0,
-          ref: b,
-          children: /* @__PURE__ */ a("div", { className: "adyen-pe-filter-button__default-container", children: [
-            /* @__PURE__ */ a(
-              S,
+          children: /* @__PURE__ */ i("div", { className: "adyen-pe-filter-button__default-container", children: [
+            /* @__PURE__ */ i(
+              _,
               {
-                el: O.SPAN,
-                variant: B.BODY,
+                el: S.SPAN,
+                variant: O.BODY,
                 stronger: !0,
                 className: "adyen-pe-filter-button__label",
                 children: e.label
               }
             ),
-            !!e.appliedFilterAmount && /* @__PURE__ */ a("div", { className: "adyen-pe-filter-button__counter-wrapper", children: /* @__PURE__ */ a(
-              S,
+            !!e.appliedFilterAmount && /* @__PURE__ */ i("div", { className: "adyen-pe-filter-button__counter-wrapper", children: /* @__PURE__ */ i(
+              _,
               {
-                el: O.SPAN,
-                variant: B.BODY,
+                el: S.SPAN,
+                variant: O.BODY,
                 stronger: !0,
                 className: "adyen-pe-filter-button__counter",
                 children: e.appliedFilterAmount
@@ -101,37 +104,36 @@ const Z = (r) => !r || X(r), ee = /* @__PURE__ */ (() => {
         e.appliedFilterAmount,
         e.classNameModifiers,
         e.label,
-        i,
-        m,
-        p,
+        t,
+        a,
+        y,
         F,
-        b
+        E
       ]
     ) }),
-    i && /* @__PURE__ */ a(
-      q,
+    t && /* @__PURE__ */ i(
+      H,
       {
-        actions: R,
+        actions: Y,
         title: (N = e.title) == null ? void 0 : N.trim(),
-        variant: H.POPOVER,
+        variant: j.POPOVER,
         modifiers: ["filter"],
-        open: i,
-        "aria-label": `${e.label}`,
-        dismiss: p,
+        open: t,
+        dismiss: y,
         dismissible: !1,
         withContentPadding: e.withContentPadding ?? !0,
         divider: !0,
-        targetElement: b,
+        targetElement: E,
         disableFocusTrap: !1,
-        position: z.BOTTOM,
+        position: L.BOTTOM,
         containerSize: e.containerSize,
-        showOverlay: f,
-        fitPosition: U || Y,
-        children: w({ ...e, editAction: x, onValueUpdated: k })
+        showOverlay: A,
+        fitPosition: $ || q,
+        children: k({ ...e, editAction: U, onValueUpdated: x })
       }
     )
   ] });
-}, be = j(te);
+}, Ce = Q(ne);
 export {
-  be as default
+  Ce as default
 };