@adyen/adyen-platform-experience-web 1.1.0 → 1.2.0

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

@@ -1,56 +1,45 @@
+import { jsx as i } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import l from "classnames";
-import s from "../SVGIcons/Close.js";
-import c from "../SVGIcons/Filter.js";
 import { ButtonVariant as n } from "../Button/types.js";
-import { useState as m, useEffect as u } from "../../../external/preact/hooks/dist/hooks.module.js";
-import f from "../../../core/Context/useCoreContext.js";
-import { useResponsiveViewport as d, mediaQueries as b } from "../../hooks/useResponsiveViewport.js";
+import { useState as s, useEffect as c } from "../../../external/preact/hooks/dist/hooks.module.js";
+import m from "../../../core/Context/useCoreContext.js";
+import { useResponsiveViewport as u, mediaQueries as f } from "../../../hooks/useResponsiveViewport.js";
 import "./FilterBar.scss.js";
-import { jsx as i } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import a from "../Button/Button.js";
-import { isFunction as p } from "../../../utils/value/is.js";
-const o = "adyen-pe-filter-bar-mobile-switch", V = () => {
-  const t = d(b.down.xs), [e, r] = m(!t);
-  return u(() => {
+import d from "../Icon/Icon.js";
+import { isFunction as b } from "../../../utils/value/is.js";
+const o = "adyen-pe-filter-bar-mobile-switch", E = () => {
+  const t = u(f.down.xs), [e, r] = s(!t);
+  return c(() => {
     r(!t);
-  }, [t]), {
-    isMobileViewport: t,
-    showingFilters: e,
-    setShowingFilters: r
-  };
-}, w = ({
-  isMobileViewport: t,
-  showingFilters: e,
-  setShowingFilters: r
-}) => t ? i("div", {
-  className: o,
-  children: i(a, {
+  }, [t]), { isMobileViewport: t, showingFilters: e, setShowingFilters: r };
+}, I = ({ isMobileViewport: t, showingFilters: e, setShowingFilters: r }) => t ? /* @__PURE__ */ i("div", { className: o, children: /* @__PURE__ */ i(
+  a,
+  {
     iconButton: !0,
     className: `${o}__button`,
-    disabled: !p(r),
+    disabled: !b(r),
     onClick: () => r == null ? void 0 : r(!e),
     variant: n.SECONDARY,
-    children: e ? i(s, {}) : i(c, {})
-  })
-}) : null, B = (t) => {
-  const {
-    i18n: e
-  } = f();
-  return t.showingFilters ? i("div", {
-    "aria-label": e.get("filterBar"),
-    className: l("adyen-pe-filter-bar", {
-      "adyen-pe-filter-bar__content--mobile": t.isMobileViewport
-    }),
-    children: [t.children, t.canResetFilters && !!t.resetFilters && i(a, {
-      variant: n.TERTIARY,
-      onClick: t.resetFilters,
-      children: e.get("button.clearAll")
-    })]
-  }) : null;
-}, y = B;
+    children: /* @__PURE__ */ i(d, { name: e ? "cross" : "filter" })
+  }
+) }) : null, B = (t) => {
+  const { i18n: e } = m();
+  return t.showingFilters ? /* @__PURE__ */ i(
+    "div",
+    {
+      "aria-label": e.get("filterBar"),
+      className: l("adyen-pe-filter-bar", { "adyen-pe-filter-bar__content--mobile": t.isMobileViewport }),
+      children: [
+        t.children,
+        t.canResetFilters && !!t.resetFilters && /* @__PURE__ */ i(a, { variant: n.TERTIARY, onClick: t.resetFilters, children: e.get("button.clearAll") })
+      ]
+    }
+  ) : null;
+}, M = B;
 export {
   B as FilterBar,
-  w as FilterBarMobileSwitch,
-  y as default,
-  V as useFilterBarState
+  I as FilterBarMobileSwitch,
+  M as default,
+  E as useFilterBarState
 };

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

@@ -1,37 +1,16 @@
+import { jsx as t } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import c from "../../../Button/hooks/useButton.js";
-import { TypographyElement as y, TypographyVariant as T } from "../../../Typography/types.js";
+import { TypographyElement as T, TypographyVariant as y } from "../../../Typography/types.js";
 import B from "../../../Typography/Typography.js";
-import { useMemo as t } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { useMemo as e } from "../../../../../external/preact/hooks/dist/hooks.module.js";
 import "./FilterButton.scss.js";
-import { jsx as e } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import { fixedForwardRef as d } from "../../../../../utils/preact/fixedForwardRef.js";
 import { parseClassName as F } from "../../../../../utils/preact/className.js";
 import { parseBooleanProp as g } from "../../../../../utils/preact/props.js";
 const h = "adyen-pe-filter-button";
-function E({
-  className: o,
-  classNameModifiers: a = [],
-  children: m,
-  disabled: r,
-  onClick: n,
-  ...s
-}, p) {
-  const i = t(() => F("", o) || "", [o]), l = t(() => g(r), [r]), {
-    classes: u,
-    click: f
-  } = c(i, a, h, l, n);
-  return e("button", {
-    className: u,
-    ref: p,
-    onClick: f,
-    ...s,
-    children: e(B, {
-      el: y.DIV,
-      variant: T.BODY,
-      stronger: !0,
-      children: m
-    })
-  });
+function E({ className: o, classNameModifiers: a = [], children: m, disabled: r, onClick: n, ...s }, p) {
+  const i = e(() => F("", o) || "", [o]), l = e(() => g(r), [r]), { classes: u, click: f } = c(i, a, h, l, n);
+  return /* @__PURE__ */ t("button", { className: u, ref: p, onClick: f, ...s, children: /* @__PURE__ */ t(B, { el: T.DIV, variant: y.BODY, stronger: !0, children: m }) });
 }
 const k = d(E);
 export {

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

@@ -1,61 +1,56 @@
-import { RangeSelection as P } from "./RangeSelection.js";
-import { useState as E, useMemo as w, useCallback as L } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import { PopoverContainerSize as z } from "../../../Popover/types.js";
-import B from "../../../../../core/Context/useCoreContext.js";
-import { AMOUNT_MULTIPLIER as T } from "./constants.js";
-import { jsx as D } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+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 { isUndefined as f } from "../../../../../utils/value/is.js";
 import { EMPTY_OBJECT as O } from "../../../../../utils/value/constants.js";
-const G = ({
-  updateFilters: p,
-  selectedCurrencies: t,
-  availableCurrencies: m,
-  ...y
-}) => {
-  const {
-    i18n: g
-  } = B(), [h, U] = E(), [$, x] = E(), M = w(() => (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 = L((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 = L((n) => {
-    const {
-      minAmount: o,
-      maxAmount: A
-    } = n ?? O;
-    U({
-      minAmount: o,
-      maxAmount: A
-    }), f(o) && f(A) && x(void 0), p({
-      minAmount: f(o) ? void 0 : String(Math.round(o * T)),
-      maxAmount: f(A) ? void 0 : String(Math.round(A * T))
-    });
-  }, [p]);
-  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);
+const G = ({ updateFilters: $, selectedCurrencies: t, availableCurrencies: m, ...x }) => {
+  const { i18n: g } = D(), [y, U] = T(), [p, h] = 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) && h(void 0), $({
+        minAmount: f(o) ? void 0 : String(Math.round(o * L)),
+        maxAmount: f(A) ? void 0 : String(Math.round(A * L))
+      });
+    },
+    [$]
+  );
+  if (y && (y.minAmount || y.maxAmount)) {
+    const { minAmount: n, maxAmount: o } = y ?? {};
+    !f(n) && !f(o) && n <= o ? h(
+      `${S(n, M)} ${g.get("to").toLowerCase()} ${S(o, M)}`
+    ) : !f(n) && f(o) && n >= 0 ? h(`${g.get("from")} ${S(n, M)}`) : f(n) && !f(o) ? h(`${g.get("to")} ${S(o, M)}`) : h(void 0);
   }
-  return D(F, {
-    ...y,
-    updateFilters: p,
-    minAmount: y.minAmount,
-    maxAmount: y.maxAmount,
-    onChange: V,
-    value: $,
-    label: $ || y.label,
-    type: "text",
-    containerSize: z.MEDIUM,
-    selectedCurrencies: t,
-    availableCurrencies: m,
-    render: P
-  });
+  return /* @__PURE__ */ P(
+    F,
+    {
+      ...x,
+      updateFilters: $,
+      minAmount: x.minAmount,
+      maxAmount: x.maxAmount,
+      onChange: V,
+      value: p,
+      label: p || x.label,
+      type: "text",
+      containerSize: B.MEDIUM,
+      selectedCurrencies: t,
+      availableCurrencies: m,
+      render: w
+    }
+  );
 };
 export {
   G as AmountFilter

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

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

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

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