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

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

@@ -3,7 +3,7 @@ import { useState as v, useCallback as h, useRef as l, useEffect as I } from "..
 import "./ExpandableCard.scss.js";
 import b from "../SVGIcons/ChevronUp.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 { 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 { useClickOutside as F } from "../../../hooks/element/useClickOutside.js";
 import { jsx as e } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
@@ -28,12 +28,12 @@ const w = ({
     className: D,
     children: u ? e(V, {
       children: [e(T, {
-        className: s(m, L, {
-          [p]: o
+        className: s(p, x, {
+          [m]: o
         }),
         disabled: a,
         fullWidth: f,
-        "aria-controls": N,
+        "aria-controls": C,
         "aria-expanded": a,
         "aria-hidden": a,
         onClick: r,
@@ -44,7 +44,7 @@ const w = ({
           className: "adyen-pe-sr-only",
           children: A.get("expandableCard.expand")
         }), e("div", {
-          className: s(C, x),
+          className: s(N, L),
           children: t
         }), e("div", {
           className: R,
@@ -53,14 +53,14 @@ const w = ({
           })
         })]
       }), e(T, {
-        id: N,
-        className: s(m, L, g, {
-          [p]: o,
+        id: C,
+        className: s(p, x, g, {
+          [m]: o,
           [k]: !a
         }),
         disabled: !a,
         fullWidth: f,
-        "aria-controls": N,
+        "aria-controls": C,
         "aria-expanded": a,
         "aria-hidden": !a,
         onClick: r,
@@ -71,7 +71,7 @@ const w = ({
           className: "adyen-pe-sr-only",
           children: A.get("expandableCard.collapse")
         }), e("div", {
-          className: s(C, x),
+          className: s(N, L),
           children: [t, e("div", {
             children: u
           })]
@@ -83,12 +83,12 @@ const w = ({
         })]
       })]
     }) : e("div", {
-      className: s(m, {
-        [p]: o
+      className: s(p, {
+        [m]: o
       }),
       ...i,
       children: e("div", {
-        className: C,
+        className: N,
         children: t
       })
     })

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

@@ -1,48 +1,56 @@
-import { useResponsiveViewport as m, mediaQueries as c } from "../../external/TransactionsOverview/hooks/useResponsiveViewport.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 f from "../SVGIcons/Close.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 { 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 e } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import s from "../Button/Button.js";
-import { Fragment as _ } from "../../../external/preact/dist/preact.module.js";
-function k(t) {
+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(() => {
+    r(!t);
+  }, [t]), {
+    isMobileViewport: t,
+    showingFilters: e,
+    setShowingFilters: r
+  };
+}, w = ({
+  isMobileViewport: t,
+  showingFilters: e,
+  setShowingFilters: r
+}) => t ? i("div", {
+  className: o,
+  children: i(a, {
+    iconButton: !0,
+    className: `${o}__button`,
+    disabled: !p(r),
+    onClick: () => r == null ? void 0 : r(!e),
+    variant: n.SECONDARY,
+    children: e ? i(s, {}) : i(c, {})
+  })
+}) : null, B = (t) => {
   const {
-    i18n: i
-  } = h(), r = m(c.down.xs), [o, a] = F(!r);
-  return b(() => {
-    a(!r);
-  }, [r]), e(_, {
-    children: [r && e("div", {
-      className: "adyen-pe-filter-bar__header",
-      children: [e(u, {
-        variant: d.SUBTITLE,
-        children: i.get("transactions")
-      }), e(s, {
-        className: "adyen-pe-filter-bar__header-icon",
-        variant: n.SECONDARY,
-        iconButton: !0,
-        onClick: () => a((l) => !l),
-        children: o ? e(f, {}) : e(p, {})
-      })]
-    }), o && e("div", {
-      "aria-label": i.get("filterBar"),
-      className: y("adyen-pe-filter-bar", {
-        "adyen-pe-filter-bar__content--mobile": r
-      }),
-      children: [t.children, t.canResetFilters && !!t.resetFilters && e(s, {
-        variant: n.TERTIARY,
-        onClick: t.resetFilters,
-        children: i.get("button.clearAll")
-      })]
+    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;
 export {
-  k as default
+  B as FilterBar,
+  w as FilterBarMobileSwitch,
+  y as default,
+  V as useFilterBarState
 };

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

@@ -6,9 +6,9 @@ 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 N } from "../../../../../utils/preact/props.js";
-const g = "adyen-pe-filter-button";
-function h({
+import { parseBooleanProp as g } from "../../../../../utils/preact/props.js";
+const h = "adyen-pe-filter-button";
+function E({
   className: o,
   classNameModifiers: a = [],
   children: m,
@@ -16,24 +16,24 @@ function h({
   onClick: n,
   ...s
 }, p) {
-  const i = t(() => F("", o) || "", [o]), l = t(() => N(r), [r]), {
+  const i = t(() => F("", o) || "", [o]), l = t(() => g(r), [r]), {
     classes: u,
     click: f
-  } = c(i, a, g, l, n);
+  } = c(i, a, h, l, n);
   return e("button", {
     className: u,
     ref: p,
     onClick: f,
     ...s,
     children: e(B, {
-      el: y.SPAN,
+      el: y.DIV,
       variant: T.BODY,
       stronger: !0,
       children: m
     })
   });
 }
-const k = d(h);
+const k = d(E);
 export {
   k as default
 };

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

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

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

@@ -1,4 +1,4 @@
-import { useResponsiveViewport as g, mediaQueries as V } from "../../../../external/TransactionsOverview/hooks/useResponsiveViewport.js";
+import { useResponsiveViewport as g, mediaQueries as V } from "../../../../hooks/useResponsiveViewport.js";
 import Y from "../../components/FilterButton/FilterButton.js";
 import q from "../../../Popover/Popover.js";
 import { PopoverContainerVariant as z, PopoverContainerPosition as H } from "../../../Popover/types.js";

package/dist/es/components/internal/FormFields/InputBase.js

@@ -3,13 +3,13 @@ import _ from "classnames";
 import { forwardRef as P } from "../../../external/preact/compat/dist/compat.module.js";
 import { useCallback as r } from "../../../external/preact/hooks/dist/hooks.module.js";
 import "./FormFields.scss.js";
-import { jsx as l } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { jsx as c } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import { Fragment as k } from "../../../external/preact/dist/preact.module.js";
 import { hasOwnProperty as q } from "../../../utils/struct/property.js";
 function u({
-  onInput: i,
+  onInput: a,
   onKeyUp: d,
-  trimOnBlur: c,
+  trimOnBlur: l,
   onBlurHandler: e,
   onBlur: t,
   onFocusHandler: s,
@@ -25,22 +25,22 @@ function u({
     spellCheck: O,
     type: y,
     uniqueId: o,
-    isCollatingErrors: N,
-    disabled: $
+    isCollatingErrors: $,
+    disabled: g
   } = p;
   q(p, "onChange") && console.error("Error: Form fields that rely on InputBase may not have an onChange property");
-  const g = r((a) => {
-    i == null || i(a);
-  }, [i]), R = r((a) => {
-    d && d(a);
-  }, [d]), b = r((a) => {
-    e == null || e(a), c && (a.target.value = a.target.value.trim()), t == null || t(a);
-  }, [t, e, c]), w = r((a) => {
-    s == null || s(a);
-  }, [s]), x = _("adyen-pe-input", [`adyen-pe-input--${y}`], p.className, {
+  const N = r((i) => {
+    a == null || a(i);
+  }, [a]), x = r((i) => {
+    d && d(i);
+  }, [d]), R = r((i) => {
+    e == null || e(i), l && (i.target.value = i.target.value.trim()), t == null || t(i);
+  }, [t, e, l]), b = r((i) => {
+    s == null || s(i);
+  }, [s]), w = _("adyen-pe-input", [`adyen-pe-input--${y}`], p.className, {
     "adyen-pe-input--invalid": n,
     "adyen-pe-input--valid": C
-  }, m == null ? void 0 : m.map((a) => `adyen-pe-input--${a}`)), {
+  }, m == null ? void 0 : m.map((i) => `adyen-pe-input--${i}`)), {
     classNameModifiers: V,
     uniqueId: j,
     isInvalid: F,
@@ -48,22 +48,22 @@ function u({
     isCollatingErrors: U,
     ...E
   } = p;
-  return l(k, {
-    children: [l("input", {
+  return c(k, {
+    children: [c("input", {
       id: o,
       ...E,
       type: y,
-      className: x,
+      className: w,
       readOnly: I,
-      "aria-describedby": N ? void 0 : `${o}${h}`,
+      "aria-describedby": $ ? void 0 : `${o}${h}`,
       "aria-invalid": n,
-      onInput: g,
-      onBlur: b,
-      onFocus: w,
-      onKeyUp: R,
-      disabled: $,
+      onInput: N,
+      onBlur: R,
+      onFocus: b,
+      onKeyUp: x,
+      disabled: g,
       ref: v
-    }), n && f && l("span", {
+    }), n && f && c("span", {
       className: "adyen-pe-input__invalid-value",
       id: `${o}${h}`,
       children: f

package/dist/es/components/internal/FormFields/Select/BalanceAccountSelector/BalanceAccountSelector.js

@@ -1,6 +1,6 @@
 import { memo as n } from "../../../../../external/preact/compat/dist/compat.module.js";
 import { useCallback as a } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import { useResponsiveViewport as p, mediaQueries as C } from "../../../../external/TransactionsOverview/hooks/useResponsiveViewport.js";
+import { useResponsiveViewport as p, mediaQueries as C } from "../../../../hooks/useResponsiveViewport.js";
 import { renderDefaultSingleSelectionCheckedness as c } from "../components/SelectListItem.js";
 import "./BalanceAccountSelector.scss.js";
 import { jsx as s } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";

package/dist/es/components/internal/FormFields/Select/Select.js

@@ -44,7 +44,7 @@ const ke = ({
     items: g,
     multiSelect: m,
     selected: H
-  }), [o, i] = T(!1), [h, d] = T(""), E = a(null), p = a(null), k = a(null), v = a(`select-${Re()}`), [te, B] = T(0), N = a(), S = a(!0), C = a(!1), L = a(n), x = a(n), re = l(() => {
+  }), [o, i] = T(!1), [h, d] = T(""), E = a(null), p = a(null), k = a(null), v = a(`select-${Re()}`), [te, x] = T(0), B = a(), S = a(!0), C = a(!1), L = a(n), N = a(n), re = l(() => {
     d(""), i(!1), o && (f(L.current), S.current = !0);
   }, [f, i, d, o]), se = de(() => fe([K, {
     [Ee]: De(m)
@@ -90,10 +90,10 @@ const ke = ({
     }
   }, [g, I]);
   b(() => {
-    x.current !== n && (x.current = n, (!m || C.current) && (R(), c())), C.current = !1;
+    N.current !== n && (N.current = n, (!m || C.current) && (R(), c())), C.current = !1;
   }, [c, R, m, n]), b(() => {
-    W && (B(n.length), c());
-  }, [W, c, B, n.length]);
+    W && (x(n.length), c());
+  }, [W, c, x, n.length]);
   const oe = l((e) => {
     switch (e.code) {
       case s.ESCAPE:
@@ -120,7 +120,7 @@ const ke = ({
     e.preventDefault(), i(!0);
   }, [c, u, A, o, i, h]);
   b(() => {
-    o && (cancelAnimationFrame(N.current), N.current = requestAnimationFrame(() => {
+    o && (cancelAnimationFrame(B.current), B.current = requestAnimationFrame(() => {
       var e;
       e: {
         let t = (e = p.current) == null ? void 0 : e.firstElementChild, r;

package/dist/es/components/internal/FormFields/Select/components/SelectList.js

@@ -1,6 +1,6 @@
-import { useResponsiveViewport as R, mediaQueries as w } from "../../../../external/TransactionsOverview/hooks/useResponsiveViewport.js";
-import b from "../../../Popover/Popover.js";
-import { PopoverContainerSize as x, PopoverContainerVariant as A, PopoverContainerPosition as V } from "../../../Popover/types.js";
+import { useResponsiveViewport as R, mediaQueries as w } from "../../../../hooks/useResponsiveViewport.js";
+import x from "../../../Popover/Popover.js";
+import { PopoverContainerSize as b, PopoverContainerVariant as A, PopoverContainerPosition as V } from "../../../Popover/types.js";
 import g from "../../../../../core/Context/useCoreContext.js";
 import a from "classnames";
 import { memo as h } from "../../../../../external/preact/compat/dist/compat.module.js";
@@ -34,7 +34,7 @@ const $ = B(({
   } = g(), L = R(w.down.xs), m = d.filter((e) => !n || e.name.toLowerCase().includes(n)), T = a(F, {
     [W]: i
   }), I = a(z, j), M = l(() => Q(t) ? t : y, [t]), r = l(() => U(s), [s]);
-  return i ? o(b, {
+  return i ? o(x, {
     classNameModifiers: P,
     actions: r ? p : void 0,
     disableFocusTrap: !0,
@@ -43,7 +43,7 @@ const $ = B(({
     dismissible: !1,
     open: i,
     setToTargetWidth: N,
-    containerSize: x.MEDIUM,
+    containerSize: b.MEDIUM,
     variant: A.POPOVER,
     targetElement: S,
     withContentPadding: !1,

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

@@ -2,11 +2,11 @@ import t from "classnames";
 import { useImageUrl as i } from "../../../hooks/useImageUrl/useImageUrl.js";
 import { useMemo as p } from "../../../external/preact/hooks/dist/hooks.module.js";
 import { jsx as c } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-const f = ({
+const l = ({
   folder: m = "components/",
   className: r,
-  alt: s,
-  name: e,
+  alt: e,
+  name: s,
   extension: o
 }) => {
   const a = i({
@@ -14,14 +14,14 @@ const f = ({
       imageFolder: m,
       extension: o
     }), [o, m]),
-    name: e
+    name: s
   });
   return c("img", {
     className: t("adyen-pe__image", r),
-    alt: s,
+    alt: e,
     src: a
   });
 };
 export {
-  f as Image
+  l as Image
 };

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

@@ -5,8 +5,8 @@ import { jsx as n } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.m
 function L(s) {
   const {
     backgroundUrl: a = "",
-    className: m = "",
-    classNameModifiers: c = [],
+    className: c = "",
+    classNameModifiers: m = [],
     src: l = "",
     alt: d = "",
     showOnError: f = !1
@@ -14,9 +14,9 @@ function L(s) {
     o(!0);
   }, g = () => {
     o(f);
-  }, t = E([m], "adyen-pe-image", {
+  }, t = E([c], "adyen-pe-image", {
     "adyen-pe-image--loaded": i
-  }, ...c.map((e) => `adyen-pe-image--${e}`));
+  }, ...m.map((e) => `adyen-pe-image--${e}`));
   return y(() => {
     const e = a ? new Image() : r.current;
     e && (e.src = a || l, e.onload = u), o(!!(e != null && e.complete));

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

@@ -1,13 +1,13 @@
 import { useClickOutside as w } from "../../../hooks/element/useClickOutside.js";
-import { useResponsiveViewport as h, mediaQueries as _ } from "../../external/TransactionsOverview/hooks/useResponsiveViewport.js";
+import { useResponsiveViewport as h, mediaQueries as _ } from "../../hooks/useResponsiveViewport.js";
 import { ButtonVariant as v } from "../Button/types.js";
 import g from "../SVGIcons/Close.js";
-import E from "../../../core/Context/useCoreContext.js";
-import { useCallback as N, useEffect as k } from "../../../external/preact/hooks/dist/hooks.module.js";
+import x from "../../../core/Context/useCoreContext.js";
+import { useCallback as E, useEffect as k } from "../../../external/preact/hooks/dist/hooks.module.js";
 import m from "classnames";
 import "./Modal.scss.js";
 import { jsx as e } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import x from "../Button/Button.js";
+import N from "../Button/Button.js";
 import { Fragment as B } from "../../../external/preact/dist/preact.module.js";
 function K({
   title: n,
@@ -22,7 +22,7 @@ function K({
 }) {
   const u = h(_.down.xs), {
     i18n: f
-  } = E(), y = w(null, d), l = N((t) => {
+  } = x(), y = w(null, d), l = E((t) => {
     t.key === "Escape" && a && o && d();
   }, [a, o, d]);
   return k(() => (a ? window.addEventListener("keydown", l) : window.removeEventListener("keydown", l), () => window.removeEventListener("keydown", l)), [a, l]), e(B, {
@@ -52,7 +52,7 @@ function K({
           children: [n && e("div", {
             className: "adyen-pe-modal__header__title",
             children: n
-          }), o && e(x, {
+          }), o && e(N, {
             onClick: d,
             variant: v.TERTIARY,
             iconButton: !0,