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

package/dist/es/components/internal/DataGrid/DataGridCell.js

@@ -1,29 +1,29 @@
-import { useDataGridContext as m } from "./hooks/useDataGridContext.js";
-import { useRef as n, useEffect as f } from "../../../external/preact/hooks/dist/hooks.module.js";
+import { useDataGridContext as n } from "./hooks/useDataGridContext.js";
+import { useRef as m, useEffect as f } from "../../../external/preact/hooks/dist/hooks.module.js";
 import { isValidElement as d, cloneElement as p } from "../../../external/preact/dist/preact.module.js";
 import u from "classnames";
-import { CellTextPosition as o } from "./types.js";
+import { CellTextPosition as s } from "./types.js";
 import { jsx as c } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 function G({
   children: t,
-  column: a,
-  position: r,
+  column: r,
+  position: a,
   ...i
 }) {
   const {
-    registerCells: s
-  } = m(), e = n(null);
+    registerCells: o
+  } = n(), e = m(null);
   return f(() => {
     var l;
-    e.current && s({
-      column: a,
+    e.current && o({
+      column: r,
       width: (l = e.current) == null ? void 0 : l.getBoundingClientRect().width
     });
-  }, [a, s]), c("div", {
+  }, [r, o]), c("div", {
     role: "cell",
     className: u("adyen-pe-data-grid__cell", {
-      "adyen-pe-data-grid__cell--right": r === o.RIGHT,
-      "adyen-pe-data-grid__cell--center": r === o.CENTER
+      "adyen-pe-data-grid__cell--right": a === s.RIGHT,
+      "adyen-pe-data-grid__cell--center": a === s.CENTER
     }),
     ...i,
     children: t && d(t) ? p(t, {

package/dist/es/components/internal/DataGrid/components/Icon.js

@@ -0,0 +1,17 @@
+import r from "classnames";
+import { jsx as a } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+const e = ({
+  className: c,
+  alt: n,
+  url: o
+}) => a("div", {
+  className: "adyen-pe-data-grid__icon-container",
+  children: a("img", {
+    className: r("adyen-pe-data-grid__icon", c),
+    alt: n,
+    src: o
+  })
+}), t = e;
+export {
+  t as default
+};

package/dist/es/components/internal/DataGrid/components/SkeletonBody.js

@@ -1,4 +1,4 @@
-import c from "classnames";
+import s from "classnames";
 import "../DataGrid.scss.js";
 import { jsx as a } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import { Fragment as m } from "../../../../external/preact/dist/preact.module.js";
@@ -7,23 +7,23 @@ const _ = ({
   loading: t,
   emptyMessageDisplay: d
 }) => {
-  const l = Array.from({
+  const o = Array.from({
     length: 10
-  }, (n, e) => e), o = Array.from({
+  }, (n, e) => e), l = Array.from({
     length: r
   }, (n, e) => e);
   return a(m, {
-    children: [l.map((n, e) => a("div", {
+    children: [o.map((n, e) => a("div", {
       className: "adyen-pe-data-grid__row",
-      children: o.map((i, s) => a("div", {
+      children: l.map((i, c) => a("div", {
         className: "adyen-pe-data-grid__cell adyen-pe-data-grid__skeleton-cell",
         children: a("span", {
-          className: c({
+          className: s({
             "adyen-pe-data-grid__skeleton-cell-content adyen-pe-data-grid__skeleton-cell-content--loading": t,
             "adyen-pe-data-grid__empty-cell": !t
           })
         })
-      }, `adyen-pe-data-grid-skeleton-cell-${s}`))
+      }, `adyen-pe-data-grid-skeleton-cell-${c}`))
     }, `adyen-pe-data-grid-skeleton-row-${e}`)), !t && d && d]
   });
 }, f = _;

package/dist/es/components/internal/DataGrid/components/TableCells.js

@@ -1,42 +1,59 @@
-import l from "../DataGridCell.js";
-import { jsx as n } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { Fragment as b } from "../../../../external/preact/dist/preact.module.js";
-const o = ({
-  columns: t,
-  customCells: a,
-  item: i,
-  rowIndex: h
-}) => n(b, {
-  children: t.map(({
+import o from "../DataGridCell.js";
+import u from "./Icon.js";
+import { jsx as a } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { Fragment as v } from "../../../../external/preact/dist/preact.module.js";
+const b = (n) => !!n && typeof n == "object" && "value" in n, m = ({
+  columns: n,
+  customCells: d,
+  item: l,
+  rowIndex: c
+}) => a(v, {
+  children: n.map(({
     key: r,
-    position: d
-  }) => a != null && a[r] ? n(l, {
-    "aria-labelledby": String(r),
-    column: r,
-    position: d,
-    children: n("div", {
-      style: {
-        width: "min-content"
-      },
-      children: (
-        // TODO create safeguard to remove "as any" assertion
-        a[r]({
-          key: r,
-          value: i[r],
-          item: i,
-          rowIndex: h
+    position: t
+  }) => {
+    if (d != null && d[r])
+      return a(o, {
+        "aria-labelledby": String(r),
+        column: r,
+        position: t,
+        children: a("div", {
+          style: {
+            width: "min-content"
+          },
+          children: (
+            // TODO create safeguard to remove "as any" assertion
+            d[r]({
+              key: r,
+              value: l[r],
+              item: l,
+              rowIndex: c
+            })
+          )
         })
-      )
-    })
-  }, r) : n(l, {
-    "aria-labelledby": String(r),
-    column: r,
-    position: d,
-    children: n("div", {
-      children: i[r]
-    })
-  }, r))
+      }, r);
+    const {
+      icon: i,
+      value: e
+    } = b(l[r]) ? l[r] : {
+      value: l[r],
+      icon: void 0
+    };
+    return a(o, {
+      "aria-labelledby": String(r),
+      column: r,
+      position: t,
+      children: a("div", {
+        className: "adyen-pe-data-grid__cell-value",
+        children: [(i == null ? void 0 : i.url) && a(u, {
+          ...i
+        }), a("div", {
+          children: e
+        })]
+      })
+    }, r);
+  })
 });
 export {
-  o as TableCells
+  m as TableCells
 };

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

@@ -5,22 +5,22 @@ import { getErrorMessage as g } from "../../utils/getErrorMessage.js";
 import { jsx as e } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import { Fragment as h } from "../../../external/preact/dist/preact.module.js";
 import { useAuthContext as f } from "../../../core/Auth/context.js";
-function R({
+function x({
   balanceAccountsError: r,
-  children: m,
+  children: a,
   className: n,
   errorMessage: o,
-  isBalanceAccountIdWrong: s,
-  onContactSupport: i
+  isBalanceAccountIdWrong: i,
+  onContactSupport: s
 }) {
   const {
-    hasError: a
+    hasError: m
   } = f();
   return e("div", {
     className: c(n, {
-      [u]: a
+      [u]: m
     }),
-    children: a ? e(t, {
+    children: m ? e(t, {
       withImage: !0,
       centered: !0,
       title: "somethingWentWrong",
@@ -29,17 +29,17 @@ function R({
     }) : r ? e(t, {
       withImage: !0,
       centered: !0,
-      ...g(r, "weCouldNotLoadYourBalanceAccounts", i)
-    }) : s ? e(t, {
+      ...g(r, "weCouldNotLoadYourBalanceAccounts", s)
+    }) : i ? e(t, {
       withImage: !0,
       centered: !0,
       title: "somethingWentWrong",
       message: [o, "theSelectedBalanceAccountIsIncorrect"]
     }) : e(h, {
-      children: m
+      children: a
     })
   });
 }
 export {
-  R as default
+  x as default
 };

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

@@ -1,88 +1,88 @@
 import "./DataOverviewDetails.scss.js";
-import { useMemo as c } from "../../../external/preact/hooks/dist/hooks.module.js";
-import g from "../../../core/Context/useCoreContext.js";
-import { useFetch as I } from "../../../hooks/useFetch/useFetch.js";
-import { PayoutData as b } from "../../external/PayoutDetails/components/PayoutData.js";
-import { TransactionData as E } from "../../external/TransactionDetails/components/TransactionData.js";
-import P from "../../hooks/useBalanceAccounts.js";
-import { getErrorMessage as C } from "../../utils/getErrorMessage.js";
-import { ErrorMessageDisplay as w } from "../ErrorMessageDisplay/ErrorMessageDisplay.js";
-import N from "../Typography/Typography.js";
-import { TypographyVariant as Y } from "../Typography/types.js";
+import { useMemo as o } from "../../../external/preact/hooks/dist/hooks.module.js";
+import b from "../../../core/Context/useCoreContext.js";
+import { useFetch as E } from "../../../hooks/useFetch/useFetch.js";
+import { PayoutData as P } from "../../external/PayoutDetails/components/PayoutData.js";
+import { TransactionData as C } from "../../external/TransactionDetails/components/TransactionData.js";
+import w from "../../hooks/useBalanceAccounts.js";
+import { getErrorMessage as x } from "../../utils/getErrorMessage.js";
+import { ErrorMessageDisplay as N } from "../ErrorMessageDisplay/ErrorMessageDisplay.js";
+import Y from "../Typography/Typography.js";
+import { TypographyVariant as B } from "../Typography/types.js";
 import { jsx as e } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import B from "../Spinner/Spinner.js";
-import { useAuthContext as S } from "../../../core/Auth/context.js";
-import { EMPTY_OBJECT as _ } from "../../../utils/value/constants.js";
+import { useAuthContext as _ } from "../../../core/Auth/context.js";
+import { EMPTY_OBJECT as s } from "../../../utils/value/constants.js";
 const q = {
   transaction: "getTransaction",
   payout: "getPayout"
-}, x = {
+}, M = {
   transaction: "transactionDetails",
   payout: "payoutDetails"
-}, f = (t) => !("data" in t);
-function U(t) {
-  var s, y;
-  const a = c(() => f(t) ? null : t.data, [t]), o = c(() => f(t) ? t.id : null, [t]), {
-    i18n: D
-  } = g(), m = S().endpoints[q[t.type]], h = c(() => x[t.type], [t.type]), {
-    data: i,
-    error: r,
-    isFetching: l
-  } = I(c(() => ({
+}, d = (t) => !("data" in t);
+function R(t) {
+  var f, D;
+  const a = o(() => d(t) ? null : t.data, [t]), c = o(() => d(t) ? t.id : null, [t]), {
+    i18n: h
+  } = b(), l = _().endpoints[q[t.type]], T = o(() => M[t.type], [t.type]), {
+    data: r,
+    error: i,
+    isFetching: y
+  } = E(o(() => ({
     fetchOptions: {
-      enabled: !!o && !!m
+      enabled: !!c && !!l
     },
     queryFn: async () => {
-      const A = t.type === "transaction" ? {
+      const I = t.type === "transaction" ? {
         path: {
-          transactionId: o
+          transactionId: c
         }
       } : {
         query: {
-          balanceAccountId: o,
+          balanceAccountId: c,
           createdAt: t.date
         }
       };
-      return m(_, {
-        ...A
+      return l(s, {
+        ...I
       });
     }
-  }), [o, m, t])), T = t.type === "payout" ? t.balanceAccountDescription : i == null ? void 0 : i.balanceAccountId, v = t.type === "payout" ? t == null ? void 0 : t.balanceAccountDescription : (s = a == null ? void 0 : a.balanceAccount) == null ? void 0 : s.description, {
+  }), [c, l, t])), v = t.type === "payout" ? t.balanceAccountDescription : r == null ? void 0 : r.balanceAccountId, A = t.type === "payout" ? t == null ? void 0 : t.balanceAccountDescription : (f = a == null ? void 0 : a.balanceAccount) == null ? void 0 : f.description, {
     balanceAccounts: n
-  } = P(T, !v), d = c(() => {
-    if (r)
-      return C(r, "weCouldNotLoadYourTransactions", t.onContactSupport);
-  }, [r, t.onContactSupport]), u = a ?? i;
-  return l ? e(B, {}) : e("div", {
+  } = w(v, !A), m = o(() => {
+    if (i)
+      return x(i, "weCouldNotLoadYourTransactions", t.onContactSupport);
+  }, [i, t.onContactSupport]), g = d(t) && t.type === "transaction" ? t.extraDetails : s, u = a ?? r;
+  return e("div", {
     className: "adyen-pe-overview-details",
     children: [!t.hideTitle && e("div", {
       className: "adyen-pe-overview-details--title",
-      children: e(N, {
-        variant: Y.TITLE,
+      children: e(Y, {
+        variant: B.TITLE,
         medium: !0,
-        children: D.get(h)
+        children: h.get(T)
       })
-    }), r && d && e("div", {
+    }), i && m && e("div", {
       className: "adyen-pe-overview-details--error-container",
-      children: e(w, {
-        centered: !0,
+      children: e(N, {
         withImage: !0,
-        ...d
+        ...m
       })
-    }), t.type === "transaction" && u && e(E, {
-      transaction: {
-        ...u,
-        balanceAccount: (a == null ? void 0 : a.balanceAccount) || (n == null ? void 0 : n[0])
-      },
-      isFetching: l
-    }), t.type === "payout" && u && e(b, {
-      balanceAccountId: o,
+    }), t.type === "transaction" && e(C, {
+      transaction: u ? {
+        ...u || s,
+        balanceAccount: (a == null ? void 0 : a.balanceAccount) || (n == null ? void 0 : n[0]),
+        ...g
+      } : void 0,
+      error: !!(i && m),
+      isFetching: y
+    }), t.type === "payout" && u && e(P, {
+      balanceAccountId: c,
       payout: u,
-      balanceAccountDescription: (t == null ? void 0 : t.balanceAccountDescription) || ((y = n == null ? void 0 : n[0]) == null ? void 0 : y.description),
-      isFetching: l
+      balanceAccountDescription: (t == null ? void 0 : t.balanceAccountDescription) || ((D = n == null ? void 0 : n[0]) == null ? void 0 : D.description),
+      isFetching: y
     })]
   });
 }
 export {
-  U as default
+  R as default
 };

package/dist/es/components/internal/DataOverviewDisplay/DataOverviewHeader/DataOverviewHeader.js

@@ -0,0 +1,45 @@
+import a from "../../Typography/Typography.js";
+import m from "../../../../core/Context/useCoreContext.js";
+import { TypographyElement as d, TypographyVariant as c } from "../../Typography/types.js";
+import "./DataOverviewHeader.scss.js";
+import { jsx as r } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+const h = "adyen-pe-data-overview-header", u = ({
+  baseClassName: e = h,
+  children: t,
+  hideTitle: p,
+  titleKey: i,
+  descriptionKey: o
+}) => {
+  const {
+    i18n: n
+  } = m();
+  return r("header", {
+    className: e,
+    children: [r("div", {
+      className: `${e}__headings`,
+      children: [!p && i && r("div", {
+        className: `${e}__title`,
+        children: r(a, {
+          el: d.SPAN,
+          variant: c.TITLE,
+          medium: !0,
+          children: n.get(i)
+        })
+      }), o && r("p", {
+        className: `${e}__description`,
+        children: r(a, {
+          el: d.SPAN,
+          variant: c.BODY,
+          children: n.get(o)
+        })
+      })]
+    }), t && r("div", {
+      className: `${e}__controls`,
+      children: t
+    })]
+  });
+};
+export {
+  h as BASE_CLASS,
+  u as DataOverviewHeader
+};

package/dist/es/components/internal/DataOverviewDisplay/DataOverviewHeader/DataOverviewHeader.scss.js

@@ -0,0 +1,4 @@
+const e = "";
+export {
+  e as default
+};

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

@@ -1,30 +1,36 @@
-const e = {
-  month: "short",
-  day: "numeric",
-  year: void 0,
-  hour: "2-digit",
-  minute: "2-digit",
+const _ = "2-digit", A = "long", o = "numeric", t = "short", s = "shortOffset", T = {
+  month: A,
+  day: o,
+  year: o
+}, O = {
+  hour: _,
+  minute: _
+}, E = {
+  ...T,
+  ...O,
+  month: t,
   hour12: !1
 }, n = {
-  weekday: "long",
-  month: "long",
-  year: "numeric",
-  hour: "2-digit",
-  minute: "2-digit",
-  timeZoneName: "shortOffset"
-}, o = {
-  month: "long",
-  day: "numeric",
-  year: "numeric"
-}, t = {
-  weekday: "long",
-  month: "long",
-  day: "numeric",
-  year: "numeric"
+  ...E,
+  year: void 0
+}, R = T, M = n, S = {
+  ...T,
+  weekday: A
+}, c = {
+  ...T,
+  month: t
+}, e = E, I = n, D = {
+  ...T,
+  ...O,
+  weekday: A,
+  timeZoneName: s
 };
 export {
-  o as DATE_FORMAT_PAYOUTS,
-  t as DATE_FORMAT_PAYOUTS_DETAILS,
+  R as DATE_FORMAT_PAYOUTS,
+  M as DATE_FORMAT_PAYOUTS_MOBILE,
+  S as DATE_FORMAT_PAYOUT_DETAILS,
+  c as DATE_FORMAT_REPORTS,
   e as DATE_FORMAT_TRANSACTIONS,
-  n as DATE_FORMAT_TRANSACTION_DETAILS
+  I as DATE_FORMAT_TRANSACTIONS_MOBILE,
+  D as DATE_FORMAT_TRANSACTION_DETAILS
 };

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

@@ -1,23 +1,23 @@
 import _ from "classnames";
 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 { useState as y, useMemo as r, useCallback as N } from "../../../external/preact/hooks/dist/hooks.module.js";
 import O from "../../../core/Context/useCoreContext.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 { DEFAULT_FIRST_WEEK_DAY as x } from "../Calendar/calendar/timerange/presets/shared/offsetWeek.js";
+import D from "../Calendar/hooks/useCalendarControlsRendering.js";
 import "./DatePicker.scss.js";
 import { jsx as n } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.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 I from "../../../hooks/useReflex/useReflex.js";
+import M from "./components/TimeRangeSelector/TimeRangeSelector.js";
+import v from "../Calendar/Calendar.js";
+import u from "../Calendar/calendar/facade/index.js";
 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 b = p((e, g) => {
   const {
     i18n: i
-  } = O(), [T, k] = M(e.renderControl), [C, a] = N(performance.now()), t = r(() => E(e.showTimezoneInfo), [e.showTimezoneInfo]), {
+  } = O(), [T, k] = D(e.renderControl), [C, a] = y(performance.now()), t = r(() => E(e.showTimezoneInfo), [e.showTimezoneInfo]), {
     clockTime: m,
     GMTOffset: c
   } = P({
@@ -30,7 +30,7 @@ const b = p((e, u) => {
       offset: c,
       time: m
     }
-  } : S, [c, m, t]), o = v(A, u), R = y(() => {
+  } : S, [c, m, t]), o = I(A, g), R = N(() => {
     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]);
@@ -38,7 +38,7 @@ const b = p((e, u) => {
     className: z,
     children: [n("div", {
       className: "adyen-pe-datepicker__selector-container",
-      children: n(x, {
+      children: n(M, {
         now: e.now,
         calendarRef: o,
         onTimeRangeSelected: e.onPresetOptionSelected,
@@ -52,16 +52,17 @@ const b = p((e, u) => {
       role: "group",
       className: "adyen-pe-datepicker__controls",
       "aria-label": i.get("calendar.controls")
-    }), n(D, {
+    }), n(v, {
       ...e,
       ref: o,
-      firstWeekDay: I,
+      firstWeekDay: x,
       dynamicBlockRows: !0,
       onlyCellsWithin: !0,
-      controls: e.controls ?? g.controls.MINIMAL,
-      highlight: e.highlight ?? g.highlight.MANY,
+      controls: e.controls ?? u.controls.MINIMAL,
+      highlight: e.highlight ?? u.highlight.MANY,
       onHighlight: R,
-      renderControl: T
+      renderControl: T,
+      trackCurrentDay: !0
     }), t && n("div", {
       className: "adyen-pe-datepicker__timezone",
       children: i.get("calendar.timezone", w)

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
       })
     })