@adyen/adyen-platform-experience-web 1.0.0-beta.2 → 1.0.0

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

@@ -0,0 +1,31 @@
+import { jsx as i } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { ErrorMessageDisplay as m } from "../ErrorMessageDisplay/ErrorMessageDisplay.js";
+import { getErrorMessage as u } from "../../utils/getErrorMessage.js";
+const c = ({
+  error: r,
+  errorMessage: t,
+  onContactSupport: e
+}) => {
+  const {
+    title: o,
+    message: a,
+    refreshComponent: s,
+    translationValues: n,
+    onContactSupport: p
+  } = u(r, t, e);
+  return /* @__PURE__ */ i(
+    m,
+    {
+      title: o,
+      message: a,
+      translationValues: n,
+      withImage: !0,
+      centered: !0,
+      refreshComponent: s,
+      onContactSupport: p
+    }
+  );
+}, v = c;
+export {
+  v as default
+};

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

@@ -1,26 +1,27 @@
 import { jsx as n } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import _ from "classnames";
-import { forwardRef as y } from "../../../external/preact/compat/dist/compat.module.js";
-import { useState as p, useMemo as i, useCallback as N } from "../../../external/preact/hooks/dist/hooks.module.js";
+import { forwardRef as p } from "../../../external/preact/compat/dist/compat.module.js";
+import { useState as N, useMemo as r, useCallback as y } from "../../../external/preact/hooks/dist/hooks.module.js";
 import O from "../../../core/Context/useCoreContext.js";
-import { noop as P } from "../../../utils/common/index.js";
-import I from "../Calendar/hooks/useTimezone.js";
-import { DEFAULT_FIRST_WEEK_DAY as M } from "../Calendar/calendar/timerange/presets/shared/offsetWeek.js";
-import v from "../Calendar/hooks/useCalendarControlsRendering.js";
+import P from "../Calendar/hooks/useTimezone.js";
+import { DEFAULT_FIRST_WEEK_DAY as I } from "../Calendar/calendar/timerange/presets/shared/offsetWeek.js";
+import M from "../Calendar/hooks/useCalendarControlsRendering.js";
 import "./DatePicker.scss.js";
-import x from "../../../hooks/useReflex/hooks/useReflex.js";
-import D from "./components/TimeRangeSelector/TimeRangeSelector.js";
-import E from "../Calendar/Calendar.js";
+import v from "../../../hooks/useReflex/useReflex.js";
+import x from "./components/TimeRangeSelector/TimeRangeSelector.js";
+import D from "../Calendar/Calendar.js";
 import g from "../Calendar/calendar/facade/index.js";
-import { EMPTY_OBJECT as S } from "../../../utils/common/constants.js";
-const A = y((e, u) => {
-  const { i18n: r } = O(), [T, k] = v(e.renderControl), [C, a] = p(performance.now()), t = i(() => e.showTimezoneInfo !== !1, [e.showTimezoneInfo]), { clockTime: m, GMTOffset: c } = I({ timezone: e.timezone, withClock: t }), z = i(() => _([{ "adyen-pe-datepicker--with-timezone": t }, "adyen-pe-datepicker"]), [t]), w = i(() => t ? { values: { offset: c, time: m } } : S, [c, m, t]), o = x(P, u), R = N(() => {
+import { boolOrTrue as E } from "../../../utils/value/bool.js";
+import { EMPTY_OBJECT as S } from "../../../utils/value/constants.js";
+import { noop as A } from "../../../utils/common.js";
+const b = p((e, u) => {
+  const { i18n: i } = O(), [T, k] = M(e.renderControl), [C, a] = N(performance.now()), t = r(() => E(e.showTimezoneInfo), [e.showTimezoneInfo]), { clockTime: m, GMTOffset: c } = P({ timezone: e.timezone, withClock: t }), z = r(() => _([{ "adyen-pe-datepicker--with-timezone": t }, "adyen-pe-datepicker"]), [t]), w = r(() => t ? { values: { offset: c, time: m } } : S, [c, m, t]), o = v(A, u), R = y(() => {
     var l, s, d, f, h;
     a(performance.now()), (l = o.current) != null && l.from && ((s = o.current) != null && s.to) && ((h = e.onHighlight) == null || h.call(e, +((d = o.current) == null ? void 0 : d.from), +((f = o.current) == null ? void 0 : f.to)));
   }, [a, e.onHighlight]);
   return /* @__PURE__ */ n("div", { className: z, children: [
     /* @__PURE__ */ n("div", { className: "adyen-pe-datepicker__selector-container", children: /* @__PURE__ */ n(
-      D,
+      x,
       {
         now: e.now,
         calendarRef: o,
@@ -31,13 +32,13 @@ const A = y((e, u) => {
         timezone: e.timezone
       }
     ) }),
-    /* @__PURE__ */ n("div", { ref: k, role: "group", className: "adyen-pe-datepicker__controls", "aria-label": r.get("calendar.controls") }),
+    /* @__PURE__ */ n("div", { ref: k, role: "group", className: "adyen-pe-datepicker__controls", "aria-label": i.get("calendar.controls") }),
     /* @__PURE__ */ n(
-      E,
+      D,
       {
         ...e,
         ref: o,
-        firstWeekDay: M,
+        firstWeekDay: I,
         dynamicBlockRows: !0,
         onlyCellsWithin: !0,
         controls: e.controls ?? g.controls.MINIMAL,
@@ -46,9 +47,9 @@ const A = y((e, u) => {
         renderControl: T
       }
     ),
-    t && /* @__PURE__ */ n("div", { className: "adyen-pe-datepicker__timezone", children: r.get("calendar.timezone", w) })
+    t && /* @__PURE__ */ n("div", { className: "adyen-pe-datepicker__timezone", children: i.get("calendar.timezone", w) })
   ] });
-}), V = A;
+}), Z = b;
 export {
-  V as default
+  Z as default
 };

package/dist/es/components/internal/DatePicker/components/TimeRangeSelector/TimeRangeSelector.js

@@ -1,21 +1,21 @@
-import { jsx as C } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { useMemo as j, useCallback as w, useRef as h, useEffect as i } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import { useTimeRangeSelection as x } from "./useTimeRangeSelection.js";
+import { jsx as x } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useMemo as C, useCallback as j, useRef as h, useEffect as i } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { useTimeRangeSelection as w } from "./useTimeRangeSelection.js";
 import D from "../../../FormFields/Select/Select.js";
-const T = ({
+const a = ({
   calendarRef: t,
   onTimeRangeSelected: o,
   timestamp: s,
   ...O
 }) => {
-  const { customSelection: f, from: c, onSelection: l, options: m, selectedOption: r, to: u } = x(O), S = j(() => Object.freeze(m.map((e) => ({ id: e, name: e }))), [m]), b = w(({ target: e }) => l(e == null ? void 0 : e.value), [l]), n = h(!0), p = h(s);
+  const { customSelection: f, from: u, onSelection: l, options: m, selectedOption: r, to: c } = w(O), S = C(() => Object.freeze(m.map((e) => ({ id: e, name: e }))), [m]), b = j(({ target: e }) => l(e == null ? void 0 : e.value), [l]), n = h(!0), p = h(s);
   return i(() => {
-    t != null && t.current && c && u && (n.current = !0, t.current.from = new Date(c), t.current.to = new Date(u));
-  }, [t, c, u]), i(() => {
+    t != null && t.current && u && c && (n.current = !0, t.current.from = new Date(u), t.current.to = new Date(c));
+  }, [t, u, c]), i(() => {
     p.current !== s && (p.current = s, n.current ? n.current = !1 : f());
   }, [f, s]), i(() => {
     r && (o == null || o(r));
-  }, [r, o]), /* @__PURE__ */ C(
+  }, [r, o]), /* @__PURE__ */ x(
     D,
     {
       setToTargetWidth: !0,
@@ -26,7 +26,7 @@ const T = ({
       selected: r
     }
   );
-}, E = T;
+}, E = a;
 export {
   E as default
 };

package/dist/es/components/internal/DatePicker/components/TimeRangeSelector/useTimeRangeSelection.js

@@ -1,63 +1,64 @@
-import { useState as m, useRef as C, useMemo as i, useCallback as P } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import z from "../../../../../core/Context/useCoreContext.js";
-import I from "../../../Calendar/calendar/timerange/presets/lastNDays.js";
+import { useState as m, useRef as C, useMemo as a, useCallback as R } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import I from "../../../../../core/Context/useCoreContext.js";
+import T from "../../../Calendar/calendar/timerange/presets/lastNDays.js";
 import N from "../../../Calendar/calendar/timerange/presets/thisWeek.js";
-import E from "../../../Calendar/calendar/timerange/presets/lastWeek.js";
-import K from "../../../Calendar/calendar/timerange/presets/thisMonth.js";
-import Z from "../../../Calendar/calendar/timerange/presets/lastMonth.js";
-import _ from "../../../Calendar/calendar/timerange/presets/yearToDate.js";
-const V = () => Object.freeze({
-  "rangePreset.last7Days": I(7),
+import q from "../../../Calendar/calendar/timerange/presets/lastWeek.js";
+import E from "../../../Calendar/calendar/timerange/presets/thisMonth.js";
+import K from "../../../Calendar/calendar/timerange/presets/lastMonth.js";
+import Z from "../../../Calendar/calendar/timerange/presets/yearToDate.js";
+const X = () => Object.freeze({
+  "rangePreset.last7Days": T(7),
+  "rangePreset.last30Days": T(30),
   "rangePreset.thisWeek": N(),
-  "rangePreset.lastWeek": E(),
-  "rangePreset.thisMonth": K(),
-  "rangePreset.lastMonth": Z(),
-  "rangePreset.yearToDate": _()
-}), X = ({
-  now: a = Date.now(),
+  "rangePreset.lastWeek": q(),
+  "rangePreset.thisMonth": E(),
+  "rangePreset.lastMonth": K(),
+  "rangePreset.yearToDate": Z()
+}), Y = ({
+  now: i = Date.now(),
   options: r,
-  selectedOption: u,
-  timezone: l
+  selectedOption: l,
+  timezone: u
 }) => {
-  const { i18n: s } = z(), [R, h] = m(), [W, D] = m(), [f, g] = m(), S = C(), d = C(), [e, T, n] = i(() => {
+  const { i18n: s } = I(), [W, h] = m(), [j, D] = m(), [f, g] = m(), S = C(), d = C(), [e, y, n] = a(() => {
     const o = s.get("rangePreset.custom"), t = Object.keys(r), c = Object.freeze(t.map((O) => s.get(O)));
     return [o, (O, M = c) => {
-      const x = M.findIndex((v) => v === O);
-      return r[t[x]];
+      const v = M.findIndex((z) => z === O);
+      return r[t[v]];
     }, c];
-  }, [s, r]), [b, k] = m(u === e), y = i(() => Object.freeze([...n, e]), [e, n]), j = i(
-    () => b ? y : n,
-    [b, n, y]
-  ), p = P(
+  }, [s, r]), [P, b] = m(l === e), k = a(() => Object.freeze([...n, e]), [e, n]), x = a(
+    () => P ? k : n,
+    [P, n, k]
+  ), p = R(
     (o) => {
-      const t = T(o, n);
-      t && (h(s.fullDate(t.from)), D(s.fullDate(t.to)), k(!1), g(o));
+      const t = y(o, n);
+      t && (h(s.fullDate(t.from)), D(s.fullDate(t.to)), b(!1), g(o));
     },
-    [s, e, T, f, n]
-  ), F = P(() => {
-    h(void 0), D(void 0), k(!0), g(e);
+    [s, e, y, f, n]
+  ), F = R(() => {
+    h(void 0), D(void 0), b(!0), g(e);
   }, [e]);
-  return i(() => {
-    u === e ? g(e) : p(u);
-  }, []), i(() => {
+  return a(() => {
+    l === e ? g(e) : p(l);
+  }, []), a(() => {
     var o;
-    if (S.current !== a || d.current !== l) {
+    if (S.current !== i || d.current !== u) {
       const t = Object.values(r);
       t.forEach((c) => {
-        c.now = a, c.timezone = l;
-      }), S.current = a, d.current = (o = t[0]) == null ? void 0 : o.timezone, p(f);
+        c.now = i, c.timezone = u;
+      }), S.current = i, d.current = (o = t[0]) == null ? void 0 : o.timezone, p(f);
     }
-  }, [a, l, r]), {
+  }, [i, u, r]), {
     customSelection: F,
-    from: R,
+    from: W,
     onSelection: p,
-    options: j,
+    options: x,
     selectedOption: f,
-    to: W
+    to: j
   };
 };
 export {
-  X as default,
-  V as getTimeRangeSelectionDefaultPresetOptions,
-  X as useTimeRangeSelection
+  Y as default,
+  X as getTimeRangeSelectionDefaultPresetOptions,
+  Y as useTimeRangeSelection
 };

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

@@ -1,30 +1,29 @@
 import { jsx as r } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import l from "../Typography/Typography.js";
-import { TypographyVariant as s } from "../Typography/types.js";
-import { useCallback as A } from "../../../external/preact/hooks/dist/hooks.module.js";
-import E from "../../../core/Context/useCoreContext.js";
+import { TypographyVariant as y } from "../Typography/types.js";
+import { useCallback as T } from "../../../external/preact/hooks/dist/hooks.module.js";
+import _ from "../../../core/Context/useCoreContext.js";
 import "./ErrorMessageDisplay.scss.js";
-import _ from "../../../images/no-results.svg.js";
-import I from "../../../core/Auth/useAuthContext.js";
+import A from "../../../images/no-results.svg.js";
+import a from "../Button/Button.js";
 import { Fragment as m } from "../../../external/preact/dist/preact.module.js";
-import y from "../Button/Button.js";
-const a = {
+const s = {
   md: 680,
   lg: 1024
-}, j = ({
+}, R = ({
   title: g,
-  message: p,
-  imageDesktop: c,
+  message: o,
+  imageDesktop: t,
   imageMobile: n,
-  withImage: f,
-  centered: x,
+  withImage: x,
+  centered: f,
   refreshComponent: h,
-  onContactSupport: t,
+  onContactSupport: c,
   translationValues: i
 }) => {
-  const { i18n: e } = E(), { updateCore: u } = I(), v = A(
-    (o) => Array.isArray(o) ? o.map(
-      (d, T) => T === 0 ? /* @__PURE__ */ r(m, { children: [
+  const { i18n: e, updateCore: u } = _(), v = T(
+    (p) => Array.isArray(p) ? p.map(
+      (d, E) => E === 0 ? /* @__PURE__ */ r(m, { children: [
         e.get(d),
         i && i[d] && /* @__PURE__ */ r(m, { children: i[d] })
       ] }) : /* @__PURE__ */ r(m, { children: [
@@ -32,24 +31,24 @@ const a = {
         e.get(d),
         i && i[d] && /* @__PURE__ */ r(m, { children: i[d] })
       ] })
-    ) : e.get(o),
+    ) : e.get(p),
     [e, i]
   );
-  return /* @__PURE__ */ r("div", { className: `adyen-pe-error-message-display ${x ? "adyen-pe-error-message-display--centered" : ""}`, children: [
-    (c || n || f) && /* @__PURE__ */ r("div", { className: "adyen-pe-error-message-display__illustration", children: /* @__PURE__ */ r("picture", { children: [
-      /* @__PURE__ */ r("source", { type: "image/svg+xml", media: `(min-width: ${a.md}px)`, srcSet: c }),
-      /* @__PURE__ */ r("source", { type: "image/svg+xml", media: `(max-width: ${a.md}px)`, srcSet: n }),
-      /* @__PURE__ */ r("img", { srcSet: c ?? _, alt: e.get("thereWasAnUnexpectedError") })
+  return /* @__PURE__ */ r("div", { className: `adyen-pe-error-message-display ${f ? "adyen-pe-error-message-display--centered" : ""}`, children: [
+    (t || n || x) && /* @__PURE__ */ r("div", { className: "adyen-pe-error-message-display__illustration", children: /* @__PURE__ */ r("picture", { children: [
+      /* @__PURE__ */ r("source", { type: "image/svg+xml", media: `(min-width: ${s.md}px)`, srcSet: t }),
+      /* @__PURE__ */ r("source", { type: "image/svg+xml", media: `(max-width: ${s.md}px)`, srcSet: n }),
+      /* @__PURE__ */ r("img", { srcSet: t ?? A, alt: e.get("thereWasAnUnexpectedError") })
     ] }) }),
-    /* @__PURE__ */ r(l, { variant: s.TITLE, children: e.get(g) }),
-    p && /* @__PURE__ */ r(l, { variant: s.BODY, children: v(p) }),
-    (t || h) && /* @__PURE__ */ r("div", { className: "adyen-pe-error-message-display__button", children: [
-      t && /* @__PURE__ */ r(y, { onClick: t, children: e.get("reachOutToSupport") }),
-      !t && h && /* @__PURE__ */ r(y, { onClick: u, children: e.get("refresh") })
+    /* @__PURE__ */ r(l, { variant: y.TITLE, children: e.get(g) }),
+    o && /* @__PURE__ */ r(l, { variant: y.BODY, children: v(o) }),
+    (c || h) && /* @__PURE__ */ r("div", { className: "adyen-pe-error-message-display__button", children: [
+      c && /* @__PURE__ */ r(a, { onClick: c, children: e.get("reachOutToSupport") }),
+      !c && h && /* @__PURE__ */ r(a, { onClick: u, children: e.get("refresh") })
     ] })
   ] });
 };
 export {
-  j as ErrorMessageDisplay,
-  a as IMAGE_BREAKPOINT_SIZES
+  R as ErrorMessageDisplay,
+  s as IMAGE_BREAKPOINT_SIZES
 };

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

@@ -3,13 +3,13 @@ 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 k from "../SVGIcons/ChevronDown.js";
-import { BASE_CLASS as B, CONTAINER_CLASS as p, CONTAINER_BUTTON_CLASS as L, CONTAINER_FILLED_CLASS as m, CONTAINER_OVERLAY_ID as C, CONTENT_CLASS as N, CONTENT_EXPANDABLE_CLASS as x, CHEVRON_CLASS as R, CONTAINER_OVERLAY_CLASS as D, CONTAINER_HIDDEN_CLASS as g } from "./constants.js";
+import B from "../SVGIcons/ChevronDown.js";
+import { BASE_CLASS as D, CONTAINER_CLASS as m, CONTAINER_BUTTON_CLASS as L, CONTAINER_FILLED_CLASS as p, CONTAINER_OVERLAY_ID as N, CONTENT_CLASS as C, CONTENT_EXPANDABLE_CLASS as x, 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 { useClickOutside as F } from "../../../hooks/element/useClickOutside.js";
 import { Fragment as V } from "../../../external/preact/dist/preact.module.js";
 import T from "../BaseButton/BaseButton.js";
-const U = ({ renderHeader: o, children: u, filled: t, fullWidth: f, ...i }) => {
+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(() => {
@@ -19,14 +19,14 @@ const U = ({ renderHeader: o, children: u, filled: t, fullWidth: f, ...i }) => {
   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]), /* @__PURE__ */ e("div", { className: B, children: u ? /* @__PURE__ */ e(V, { children: [
+  }, [a, d]), /* @__PURE__ */ e("div", { className: D, children: u ? /* @__PURE__ */ e(V, { children: [
     /* @__PURE__ */ e(
       T,
       {
-        className: s(p, L, { [m]: t }),
+        className: s(m, L, { [p]: o }),
         disabled: a,
         fullWidth: f,
-        "aria-controls": C,
+        "aria-controls": N,
         "aria-expanded": a,
         "aria-hidden": a,
         onClick: r,
@@ -35,22 +35,22 @@ const U = ({ renderHeader: o, children: u, filled: t, fullWidth: f, ...i }) => {
         ...i,
         children: [
           /* @__PURE__ */ e("span", { className: "adyen-pe-sr-only", children: A.get("expandableCard.expand") }),
-          /* @__PURE__ */ e("div", { className: s(N, x), children: o }),
-          /* @__PURE__ */ e("div", { className: R, children: /* @__PURE__ */ e(k, { role: "presentation" }) })
+          /* @__PURE__ */ e("div", { className: s(C, x), children: t }),
+          /* @__PURE__ */ e("div", { className: R, children: /* @__PURE__ */ e(B, { role: "presentation" }) })
         ]
       }
     ),
     /* @__PURE__ */ e(
       T,
       {
-        id: C,
-        className: s(p, L, D, {
-          [m]: t,
-          [g]: !a
+        id: N,
+        className: s(m, L, g, {
+          [p]: o,
+          [k]: !a
         }),
         disabled: !a,
         fullWidth: f,
-        "aria-controls": C,
+        "aria-controls": N,
         "aria-expanded": a,
         "aria-hidden": !a,
         onClick: r,
@@ -59,16 +59,16 @@ const U = ({ renderHeader: o, children: u, filled: t, fullWidth: f, ...i }) => {
         ...i,
         children: [
           /* @__PURE__ */ e("span", { className: "adyen-pe-sr-only", children: A.get("expandableCard.collapse") }),
-          /* @__PURE__ */ e("div", { className: s(N, x), children: [
-            o,
+          /* @__PURE__ */ e("div", { className: s(C, x), children: [
+            t,
             /* @__PURE__ */ e("div", { children: u })
           ] }),
           /* @__PURE__ */ e("div", { className: R, children: /* @__PURE__ */ e(b, { role: "presentation" }) })
         ]
       }
     )
-  ] }) : /* @__PURE__ */ e("div", { className: s(p, { [m]: t }), ...i, children: /* @__PURE__ */ e("div", { className: N, children: o }) }) });
-}, K = U;
+  ] }) : /* @__PURE__ */ e("div", { className: s(m, { [p]: o }), ...i, children: /* @__PURE__ */ e("div", { className: C, children: t }) }) });
+}, K = w;
 export {
   K as default
 };

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

@@ -1,47 +1,47 @@
-import { jsx as r } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { useMediaQuery as s, mediaQueries as c } from "../../external/TransactionsOverview/hooks/useMediaQuery.js";
+import { jsx as e } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useResponsiveViewport as m, mediaQueries as c } from "../../external/TransactionsOverview/hooks/useResponsiveViewport.js";
 import { ButtonVariant as n } from "../Button/types.js";
 import f from "../SVGIcons/Close.js";
-import d from "../SVGIcons/Filter.js";
-import { TypographyVariant as p } from "../Typography/types.js";
-import h from "../Typography/Typography.js";
-import u from "../../../core/Context/useCoreContext.js";
+import p from "../SVGIcons/Filter.js";
+import { TypographyVariant as d } from "../Typography/types.js";
+import u from "../Typography/Typography.js";
+import h from "../../../core/Context/useCoreContext.js";
 import y from "classnames";
 import { useState as F, useEffect as b } from "../../../external/preact/hooks/dist/hooks.module.js";
 import "./FilterBar.scss.js";
-import l from "../Button/Button.js";
-import { Fragment as g } from "../../../external/preact/dist/preact.module.js";
-function V(t) {
-  const { i18n: i } = u(), e = s(c.down.xs), [o, a] = F(!e);
+import s from "../Button/Button.js";
+import { Fragment as _ } from "../../../external/preact/dist/preact.module.js";
+function k(t) {
+  const { i18n: i } = h(), r = m(c.down.xs), [o, a] = F(!r);
   return b(() => {
-    a(!e);
-  }, [e]), /* @__PURE__ */ r(g, { children: [
-    e && /* @__PURE__ */ r("div", { className: "adyen-pe-filter-bar__header", children: [
-      /* @__PURE__ */ r(h, { variant: p.SUBTITLE, children: i.get("transactions") }),
-      /* @__PURE__ */ r(
-        l,
+    a(!r);
+  }, [r]), /* @__PURE__ */ e(_, { children: [
+    r && /* @__PURE__ */ e("div", { className: "adyen-pe-filter-bar__header", children: [
+      /* @__PURE__ */ e(u, { variant: d.SUBTITLE, children: i.get("transactions") }),
+      /* @__PURE__ */ e(
+        s,
         {
           className: "adyen-pe-filter-bar__header-icon",
           variant: n.SECONDARY,
           iconButton: !0,
-          onClick: () => a((m) => !m),
-          children: o ? /* @__PURE__ */ r(f, {}) : /* @__PURE__ */ r(d, {})
+          onClick: () => a((l) => !l),
+          children: o ? /* @__PURE__ */ e(f, {}) : /* @__PURE__ */ e(p, {})
         }
       )
     ] }),
-    o && /* @__PURE__ */ r(
+    o && /* @__PURE__ */ e(
       "div",
       {
         "aria-label": i.get("filterBar"),
-        className: y("adyen-pe-filter-bar", { "adyen-pe-filter-bar__content--mobile": e }),
+        className: y("adyen-pe-filter-bar", { "adyen-pe-filter-bar__content--mobile": r }),
         children: [
           t.children,
-          t.canResetFilters && !!t.resetFilters && /* @__PURE__ */ r(l, { variant: n.TERTIARY, onClick: t.resetFilters, children: i.get("button.clearAll") })
+          t.canResetFilters && !!t.resetFilters && /* @__PURE__ */ e(s, { variant: n.TERTIARY, onClick: t.resetFilters, children: i.get("button.clearAll") })
         ]
       }
     )
   ] });
 }
 export {
-  V as default
+  k as default
 };

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

@@ -2,17 +2,17 @@ import { jsx as t } from "../../../../../external/preact/jsx-runtime/dist/jsxRun
 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 { parseClassName as F } from "../../../../../utils/class-name-utils.js";
-import { parseBoolean as N } from "../../../../../utils/common/index.js";
-import { forwardRef as d } from "../../../../../external/preact/compat/dist/compat.module.js";
 import { useMemo as e } from "../../../../../external/preact/hooks/dist/hooks.module.js";
 import "./FilterButton.scss.js";
+import { fixedForwardRef as d } from "../../../../../utils/preact/fixedForwardRef.js";
+import { parseClassName as F } from "../../../../../utils/preact/className.js";
+import { parseBooleanProp as N } from "../../../../../utils/preact/props.js";
 const g = "adyen-pe-filter-button";
-function h({ className: o, classNameModifiers: a = [], children: s, disabled: r, onClick: m, ...n }, p) {
-  const i = e(() => F("", o) || "", [o]), l = e(() => N(r), [r]), { classes: f, click: u } = c(i, a, g, l, m);
-  return /* @__PURE__ */ t("button", { className: f, ref: p, onClick: u, ...n, children: /* @__PURE__ */ t(B, { el: y.SPAN, variant: T.BODY, stronger: !0, children: s }) });
+function h({ className: o, classNameModifiers: a = [], children: m, disabled: r, onClick: n, ...s }, p) {
+  const i = e(() => F("", o) || "", [o]), l = e(() => N(r), [r]), { classes: u, click: f } = c(i, a, g, l, n);
+  return /* @__PURE__ */ t("button", { className: u, ref: p, onClick: f, ...s, children: /* @__PURE__ */ t(B, { el: y.SPAN, variant: T.BODY, stronger: !0, children: m }) });
 }
-const x = d(h);
+const k = d(h);
 export {
-  x as default
+  k as default
 };

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

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