@adyen/adyen-platform-experience-web 1.1.1 → 1.3.0

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

@@ -1,99 +1,78 @@
-import s from "classnames";
-import { useState as v, useCallback as h, useRef as l, useEffect as I } from "../../../external/preact/hooks/dist/hooks.module.js";
-import "./ExpandableCard.scss.js";
-import b from "../SVGIcons/ChevronUp.js";
-import B from "../SVGIcons/ChevronDown.js";
-import { BASE_CLASS as D, CONTAINER_CLASS as p, CONTAINER_BUTTON_CLASS as x, CONTAINER_FILLED_CLASS as m, CONTAINER_OVERLAY_ID as C, CONTENT_CLASS as N, CONTENT_EXPANDABLE_CLASS as L, CHEVRON_CLASS as R, CONTAINER_OVERLAY_CLASS as g, CONTAINER_HIDDEN_CLASS as k } from "./constants.js";
-import y from "../../../core/Context/useCoreContext.js";
+import { jsx as r } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import n from "classnames";
+import { useState as g, useMemo as k, useCallback as T, useRef as i, useEffect as B } from "../../../external/preact/hooks/dist/hooks.module.js";
 import { useClickOutside as F } from "../../../hooks/element/useClickOutside.js";
-import { jsx as e } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { Fragment as V } from "../../../external/preact/dist/preact.module.js";
-import T from "../BaseButton/BaseButton.js";
-const w = ({
-  renderHeader: t,
-  children: u,
-  filled: o,
-  fullWidth: f,
-  ...i
-}) => {
-  const {
-    i18n: A
-  } = y(), [a, S] = v(!1), r = h(() => S((n) => !n), [S]), E = l(null), c = l(!1), O = l(a), d = F(void 0, h(() => {
-    a && (r(), c.current = !0);
-  }, [a, r]));
-  return I(() => {
-    var n, _;
-    a ? (n = d.current) == null || n.focus() : (O.current !== a && !c.current && ((_ = E.current) == null || _.focus()), c.current = !1), O.current = a;
-  }, [a, d]), e("div", {
-    className: D,
-    children: u ? e(V, {
-      children: [e(T, {
-        className: s(p, x, {
-          [m]: o
-        }),
-        disabled: a,
-        fullWidth: f,
-        "aria-controls": C,
-        "aria-expanded": a,
-        "aria-hidden": a,
-        onClick: r,
-        ref: E,
+import P from "../../../core/Context/useCoreContext.js";
+import H from "../SVGIcons/ChevronUp.js";
+import V from "../SVGIcons/ChevronDown.js";
+/* empty css                    */
+import { BASE_CLASS as Y, CONTAINER_CLASS as f, CONTAINER_BUTTON_CLASS as x, CONTAINER_FILLED_CLASS as C, CONTAINER_OVERLAY_ID as u, CONTENT_CLASS as A, CONTENT_EXPANDABLE_CLASS as I, CHEVRON_CLASS as v, CONTAINER_OVERLAY_CLASS as w, CONTAINER_HIDDEN_CLASS as U, CONTAINER_IN_FLOW_CLASS as j, CARD_HEIGHT_PROPERTY as b } from "./constants.js";
+import { Fragment as q } from "../../../external/preact/dist/preact.module.js";
+import y from "../BaseButton/BaseButton.js";
+const re = ({ renderHeader: c, children: O, filled: l, fullWidth: S, inFlow: _, ...d }) => {
+  const { i18n: E } = P(), [e, R] = g(!1), a = k(() => _ === !0, [_]), o = T(() => R((s) => !s), [R]), p = i(null), h = i(a), m = i(!1), L = i(e), N = F(
+    void 0,
+    T(() => {
+      e && (o(), m.current = !0);
+    }, [e, o])
+  ), D = (s) => {
+    var t;
+    s && (a ? (!e || h.current !== a) && s.style.setProperty(b, `${((t = p.current) == null ? void 0 : t.offsetHeight) || 0}px`) : e || s.style.removeProperty(b), h.current = a);
+  };
+  return B(() => {
+    var s, t;
+    e ? (s = N.current) == null || s.focus() : (L.current !== e && !m.current && ((t = p.current) == null || t.focus()), m.current = !1), L.current = e;
+  }, [e, N]), /* @__PURE__ */ r("div", { ref: D, className: Y, children: O ? /* @__PURE__ */ r(q, { children: [
+    /* @__PURE__ */ r(
+      y,
+      {
+        className: n(f, x, { [C]: l }),
+        disabled: e,
+        fullWidth: S,
+        "aria-controls": u,
+        "aria-expanded": e,
+        "aria-hidden": e,
+        onClick: o,
+        ref: p,
         "data-testid": "expand-button",
-        ...i,
-        children: [e("span", {
-          className: "adyen-pe-sr-only",
-          children: A.get("expandableCard.expand")
-        }), e("div", {
-          className: s(N, L),
-          children: t
-        }), e("div", {
-          className: R,
-          children: e(B, {
-            role: "presentation"
-          })
-        })]
-      }), e(T, {
-        id: C,
-        className: s(p, x, g, {
-          [m]: o,
-          [k]: !a
+        ...d,
+        children: [
+          /* @__PURE__ */ r("span", { className: "adyen-pe-sr-only", children: E.get("expandableCard.expand") }),
+          /* @__PURE__ */ r("div", { className: n(A, I), children: c }),
+          /* @__PURE__ */ r("div", { className: v, children: /* @__PURE__ */ r(V, { role: "presentation" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ r(
+      y,
+      {
+        id: u,
+        className: n(f, x, w, {
+          [C]: l,
+          [U]: !e,
+          [j]: a
         }),
-        disabled: !a,
-        fullWidth: f,
-        "aria-controls": C,
-        "aria-expanded": a,
-        "aria-hidden": !a,
-        onClick: r,
-        ref: d,
+        disabled: !e,
+        fullWidth: S,
+        "aria-controls": u,
+        "aria-expanded": e,
+        "aria-hidden": !e,
+        onClick: o,
+        ref: N,
         "data-testid": "collapse-button",
-        ...i,
-        children: [e("span", {
-          className: "adyen-pe-sr-only",
-          children: A.get("expandableCard.collapse")
-        }), e("div", {
-          className: s(N, L),
-          children: [t, e("div", {
-            children: u
-          })]
-        }), e("div", {
-          className: R,
-          children: e(b, {
-            role: "presentation"
-          })
-        })]
-      })]
-    }) : e("div", {
-      className: s(p, {
-        [m]: o
-      }),
-      ...i,
-      children: e("div", {
-        className: N,
-        children: t
-      })
-    })
-  });
-}, K = w;
+        ...d,
+        children: [
+          /* @__PURE__ */ r("span", { className: "adyen-pe-sr-only", children: E.get("expandableCard.collapse") }),
+          /* @__PURE__ */ r("div", { className: n(A, I), children: [
+            c,
+            /* @__PURE__ */ r("div", { children: O })
+          ] }),
+          /* @__PURE__ */ r("div", { className: v, children: /* @__PURE__ */ r(H, { role: "presentation" }) })
+        ]
+      }
+    )
+  ] }) : /* @__PURE__ */ r("div", { className: n(f, { [C]: l }), ...d, children: /* @__PURE__ */ r("div", { className: A, children: c }) }) });
+};
 export {
-  K as default
+  re as default
 };

package/dist/es/components/internal/ExpandableCard/constants.js

@@ -1,13 +1,15 @@
-const n = "adyen-pe-expandable-card", _ = n + "__container", S = _ + "--button", C = _ + "--filled", o = _ + "--hidden", A = _ + "--overlay", t = A, N = n + "__content", E = N + "--expandable", c = n + "__chevron";
+const n = "adyen-pe-expandable-card", A = n, _ = A + "__container", N = A + "__content", S = A + "__chevron", E = _ + "--button", o = _ + "--filled", t = _ + "--hidden", c = _ + "--in-flow", C = _ + "--overlay", L = N + "--expandable", O = `--${n}-height`, T = C;
 export {
-  n as BASE_CLASS,
-  c as CHEVRON_CLASS,
-  S as CONTAINER_BUTTON_CLASS,
+  A as BASE_CLASS,
+  O as CARD_HEIGHT_PROPERTY,
+  S as CHEVRON_CLASS,
+  E as CONTAINER_BUTTON_CLASS,
   _ as CONTAINER_CLASS,
-  C as CONTAINER_FILLED_CLASS,
-  o as CONTAINER_HIDDEN_CLASS,
-  A as CONTAINER_OVERLAY_CLASS,
-  t as CONTAINER_OVERLAY_ID,
+  o as CONTAINER_FILLED_CLASS,
+  t as CONTAINER_HIDDEN_CLASS,
+  c as CONTAINER_IN_FLOW_CLASS,
+  C as CONTAINER_OVERLAY_CLASS,
+  T as CONTAINER_OVERLAY_ID,
   N as CONTENT_CLASS,
-  E as CONTENT_EXPANDABLE_CLASS
+  L as CONTENT_EXPANDABLE_CLASS
 };

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 "./FilterBar.scss.js";
-import { jsx as i } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.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";
+/* empty css               */
 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(() => {
-    r(!t);
-  }, [t]), {
-    isMobileViewport: t,
-    showingFilters: e,
-    setShowingFilters: r
-  };
-}, w = ({
-  isMobileViewport: t,
-  showingFilters: e,
-  setShowingFilters: r
-}) => t ? i("div", {
-  className: o,
-  children: i(a, {
+import { Icon as d } from "../Icon/Icon.js";
+import { isFunction as b } from "../../../utils/value/is.js";
+const o = "adyen-pe-filter-bar-mobile-switch", E = () => {
+  const e = u(f.down.xs), [t, r] = s(!e);
+  return c(() => {
+    r(!e);
+  }, [e]), { isMobileViewport: e, showingFilters: t, setShowingFilters: r };
+}, F = ({ isMobileViewport: e, showingFilters: t, setShowingFilters: r }) => e ? /* @__PURE__ */ i("div", { className: o, children: /* @__PURE__ */ i(
+  a,
+  {
     iconButton: !0,
     className: `${o}__button`,
-    disabled: !p(r),
-    onClick: () => r == null ? void 0 : r(!e),
+    disabled: !b(r),
+    onClick: () => r == null ? void 0 : r(!t),
     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: t ? "cross" : "filter" })
+  }
+) }) : null, I = (e) => {
+  const { i18n: t } = m();
+  return e.showingFilters ? /* @__PURE__ */ i(
+    "div",
+    {
+      "aria-label": t.get("filterBar"),
+      className: l("adyen-pe-filter-bar", { "adyen-pe-filter-bar__content--mobile": e.isMobileViewport }),
+      children: [
+        e.children,
+        e.canResetFilters && !!e.resetFilters && /* @__PURE__ */ i(a, { variant: n.TERTIARY, onClick: e.resetFilters, children: t.get("button.clearAll") })
+      ]
+    }
+  ) : null;
+};
 export {
-  B as FilterBar,
-  w as FilterBarMobileSwitch,
-  y as default,
-  V as useFilterBarState
+  I as FilterBar,
+  F as FilterBarMobileSwitch,
+  I as default,
+  E as useFilterBarState
 };

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

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

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

@@ -1,62 +1,57 @@
+import { jsx as I } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 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 { useState as u, useMemo as w, useCallback as T } 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 F from "../BaseFilter/BaseFilter.js";
+import { AMOUNT_MULTIPLIER as E } from "./constants.js";
+import D 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);
+import { EMPTY_OBJECT as F } from "../../../../../utils/value/constants.js";
+const d = ({ updateFilters: $, selectedCurrencies: t, availableCurrencies: m, ...x }) => {
+  const { i18n: g } = B(), [y, L] = u(), [p, h] = u(), 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 = T(
+    (n, o) => {
+      const A = (t == null ? void 0 : t[0]) || (m == null ? void 0 : m[0]), V = o && A ? {
+        style: "currency",
+        currency: A,
+        currencyDisplay: "symbol"
+      } : void 0;
+      return n.toLocaleString(g.locale, V);
+    },
+    [m, g, t]
+  ), U = T(
+    (n) => {
+      const { minAmount: o, maxAmount: A } = n ?? F;
+      L({ minAmount: o, maxAmount: A }), f(o) && f(A) && h(void 0), $({
+        minAmount: f(o) ? void 0 : String(Math.round(o * E)),
+        maxAmount: f(A) ? void 0 : String(Math.round(A * E))
+      });
+    },
+    [$]
+  );
+  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__ */ I(
+    D,
+    {
+      ...x,
+      updateFilters: $,
+      minAmount: x.minAmount,
+      maxAmount: x.maxAmount,
+      onChange: U,
+      value: p,
+      label: p || x.label,
+      type: "text",
+      containerSize: z.MEDIUM,
+      selectedCurrencies: t,
+      availableCurrencies: m,
+      render: P
+    }
+  );
 };
 export {
-  G as AmountFilter
+  d as AmountFilter
 };

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

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