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

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

@@ -1,6 +1,18 @@
-import { jsx as r } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { Header as t } from "../Header/Header.js";
-const p = (e) => /* @__PURE__ */ r(t, { ...e, subtitleKey: "capital.poweredByAdyen" });
+import { jsx as i } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useMemo as n } from "../../../external/preact/hooks/dist/hooks.module.js";
+import { TypographyVariant as s } from "../Typography/types.js";
+/* empty css                   */
+import { getCapitalHeaderSubtitleByLegalEntity as m } from "./helpers.js";
+import { useConfigContext as l } from "../../../core/ConfigContext/context.js";
+import { Header as p } from "../Header/Header.js";
+const d = (a) => {
+  var e;
+  const t = (e = l().extraConfig) == null ? void 0 : e.legalEntity, o = n(() => {
+    const r = m(t);
+    return r ? { subtitleKey: r } : {};
+  }, [t]);
+  return /* @__PURE__ */ i(p, { ...a, ...o, subtitleConfig: { variant: s.CAPTION, classNames: "adyen-pe-capital-header__subtitle" } });
+};
 export {
-  p as CapitalHeader
+  d as CapitalHeader
 };

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

@@ -0,0 +1,7 @@
+var s = /* @__PURE__ */ ((U) => (U.AU = "AU", U.EU = "EU", U.GB = "GB", U.US = "US", U))(s || {});
+const r = ["AU", "GB", "US"], e = ["EU"];
+export {
+  s as SupportedLocation,
+  r as supportedCountries,
+  e as supportedRegions
+};

package/dist/es/components/internal/CapitalHeader/helpers.js

@@ -0,0 +1,34 @@
+import { supportedCountries as n, supportedRegions as s, SupportedLocation as r } from "./constants.js";
+const u = (e) => {
+  var o;
+  const t = (o = e == null ? void 0 : e.regions) == null ? void 0 : o.find((c) => c.type === "capital");
+  return (t == null ? void 0 : t.value) ?? "";
+}, p = (e) => {
+  switch (e) {
+    case r.EU:
+      return "capital.legalSubtitleEU";
+    default:
+      return null;
+  }
+}, i = (e) => {
+  switch (e) {
+    case r.AU:
+      return "capital.legalSubtitleAU";
+    case r.GB:
+      return "capital.legalSubtitleGB";
+    case r.US:
+      return "capital.legalSubtitleUS";
+    default:
+      return null;
+  }
+}, d = (e) => {
+  const t = u(e), o = e == null ? void 0 : e.countryCode;
+  return i(o) ?? p(t);
+}, S = (e) => {
+  const t = u(e), o = (e == null ? void 0 : e.countryCode) ?? "";
+  return n.includes(o) || s.includes(t);
+};
+export {
+  d as getCapitalHeaderSubtitleByLegalEntity,
+  S as isCapitalRegionSupported
+};

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

@@ -1,12 +1,12 @@
 import { jsx as t } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import "./CapitalSlider.scss.js";
-import h from "../../../utils/random/uniqueId.js";
+/* empty css                   */
+import { uniqueId as h } from "../../../utils/random/uniqueId.js";
 import e from "../Typography/Typography.js";
 import { TypographyVariant as i } from "../Typography/types.js";
 import v from "../../../core/Context/useCoreContext.js";
 import x from "classnames";
 import A from "../Slider/Slider.js";
-const N = ({
+const Y = ({
   dynamicOffersConfig: a,
   value: p = a.minAmount.value,
   onValueChange: l,
@@ -51,7 +51,7 @@ const N = ({
       ] })
     ] })
   ] });
-}, B = N;
+};
 export {
-  B as default
+  Y as default
 };

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

@@ -1,50 +1,50 @@
 import { jsx as s } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { CARD_BASE_CLASS as O, CARD_FILLED as h, CARD_NO_OUTLINE as I, CARD_NO_PADDING as L, CARD_HEADER as n, CARD_HEADER_CONTENT as p, CARD_TITLE as d, CARD_SUBTITLE as t, CARD_BODY as f, CARD_BODY_WITH_TITLE as B, CARD_FOOTER as S } from "./constants.js";
-import C from "classnames";
-import "./Card.scss.js";
-const v = ({
-  title: c,
+import { CARD_BASE_CLASS as h, CARD_FILLED as o, CARD_NO_OUTLINE as I, CARD_NO_PADDING as L, CARD_HEADER as p, CARD_HEADER_CONTENT as n, CARD_TITLE as d, CARD_SUBTITLE as f, CARD_BODY as t, CARD_BODY_WITH_TITLE as B, CARD_FOOTER as S } from "./constants.js";
+import m from "classnames";
+/* empty css          */
+const Y = ({
+  title: D,
   subTitle: _,
-  children: m,
+  children: C,
   footer: A,
   el: R,
   renderHeader: a,
-  renderFooter: D,
+  renderFooter: c,
   filled: N,
   noOutline: E,
   noPadding: i,
   classNameModifiers: T,
   testId: l
 }) => {
-  const o = R || "header";
+  const O = R || "header";
   return /* @__PURE__ */ s(
     "section",
     {
-      className: C(
-        O,
-        { [h]: N, [I]: E, [L]: i },
+      className: m(
+        h,
+        { [o]: N, [I]: E, [L]: i },
         T
       ),
       "data-testid": l,
       children: [
-        (c || a) && /* @__PURE__ */ s(o, { className: n, children: (c || a) && /* @__PURE__ */ s("div", { className: p, children: [
-          a || /* @__PURE__ */ s("span", { className: d, children: c }),
-          _ && /* @__PURE__ */ s("div", { className: t, children: _ })
+        (D || a) && /* @__PURE__ */ s(O, { className: p, children: (D || a) && /* @__PURE__ */ s("div", { className: n, children: [
+          a || /* @__PURE__ */ s("span", { className: d, children: D }),
+          _ && /* @__PURE__ */ s("div", { className: f, children: _ })
         ] }) }),
         /* @__PURE__ */ s(
           "div",
           {
-            className: C(f, {
-              [B]: c || a
+            className: m(t, {
+              [B]: D || a
             }),
-            children: m
+            children: C
           }
         ),
-        (A || D) && /* @__PURE__ */ s("footer", { className: S, children: D || A })
+        (A || c) && /* @__PURE__ */ s("footer", { className: S, children: c || A })
       ]
     }
   );
-}, g = v;
+};
 export {
-  g as default
+  Y as default
 };

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

@@ -1,25 +1,25 @@
 import { jsx as t } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import a from "classnames";
-import { useState as y, useCallback as p } from "../../../external/preact/hooks/dist/hooks.module.js";
-import f from "../../../core/Context/useCoreContext.js";
+import { useState as f, useCallback as p } from "../../../external/preact/hooks/dist/hooks.module.js";
+import x from "../../../core/Context/useCoreContext.js";
 import { ButtonVariant as u } from "../Button/types.js";
 import { Tooltip as s } from "../Tooltip/Tooltip.js";
-import "./CopyText.scss.js";
+/* empty css              */
 import h from "../Button/Button.js";
-import L from "../Icon/Icon.js";
-const k = ({
+import { Icon as L } from "../Icon/Icon.js";
+const D = ({
   textToCopy: o,
   isHovered: l,
   buttonLabel: i,
   showCopyTextTooltip: m = !0,
   type: e = "Link"
 }) => {
-  const { i18n: n } = f(), [d, c] = y(n.get("copy")), _ = p(async () => {
+  const { i18n: n } = x(), [d, c] = f(n.get("copy")), _ = p(async () => {
     if (o)
       try {
         await navigator.clipboard.writeText(o), c(n.get("copied"));
-      } catch (x) {
-        console.log(x);
+      } catch (y) {
+        console.log(y);
       }
   }, [n, o]), r = p(() => {
     c(n.get("copy"));
@@ -66,7 +66,7 @@ const k = ({
                 className: a("adyen-pe-copy-text__icon", {
                   "adyen-pe-copy-text__icon--information": e === "Link"
                 }),
-                children: /* @__PURE__ */ t(L, { name: "copy" })
+                children: /* @__PURE__ */ t(L, { name: "copy", "data-testid": "copy-icon" })
               }
             )
           }
@@ -74,7 +74,7 @@ const k = ({
       ]
     }
   );
-}, I = k;
+};
 export {
-  I as default
+  D as default
 };

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

@@ -1,14 +1,14 @@
 import { jsx as d } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import { toChildArray as b, Fragment as v } from "../../../external/preact/dist/preact.module.js";
 import c from "classnames";
-import "./DataGrid.scss.js";
+/* empty css              */
 import { TableBody as w } from "./components/TableBody.js";
 import { InteractiveBody as C } from "./components/InteractiveBody.js";
 import _ from "./components/SkeletonBody.js";
 import { ErrorMessageDisplay as T } from "../ErrorMessageDisplay/ErrorMessageDisplay.js";
 import { useMemo as n } from "../../../external/preact/hooks/dist/hooks.module.js";
-import N from "../../../images/no-data-female.svg.js";
-import { DataGridProvider as k } from "./utils/DataGridProvider.js";
+import k from "../../../images/no-data-female.svg.js";
+import { DataGridProvider as N } from "./utils/DataGridProvider.js";
 import { useDataGridContext as x } from "./hooks/useDataGridContext.js";
 import { TableHeaderCell as B } from "./components/TableHeaderCell.js";
 const K = Object.freeze({
@@ -16,7 +16,7 @@ const K = Object.freeze({
   index: -1
 });
 function s({ errorDisplay: e, ...a }) {
-  return /* @__PURE__ */ d("div", { style: { width: "100%" }, children: /* @__PURE__ */ d(k, { children: /* @__PURE__ */ d(R, { ...a, errorDisplay: e }) }) });
+  return /* @__PURE__ */ d("div", { style: { width: "100%" }, children: /* @__PURE__ */ d(N, { children: /* @__PURE__ */ d(R, { ...a, errorDisplay: e }) }) });
 }
 function R({ errorDisplay: e, ...a }) {
   var r, m;
@@ -46,7 +46,7 @@ function R({ errorDisplay: e, ...a }) {
             {
               title: ((r = a.emptyTableMessage) == null ? void 0 : r.title) ?? "thereAreNoResults",
               message: (m = a.emptyTableMessage) == null ? void 0 : m.message,
-              imageDesktop: N,
+              imageDesktop: k,
               centered: !0
             }
           ) : a.error && e ? e() : null)

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

@@ -4,7 +4,7 @@ import { useRef as f, useEffect as d } from "../../../external/preact/hooks/dist
 import { isValidElement as p, cloneElement as u } from "../../../external/preact/dist/preact.module.js";
 import c from "classnames";
 import { CellTextPosition as s } from "./types.js";
-function R({
+function G({
   children: t,
   column: r,
   position: a,
@@ -35,5 +35,5 @@ function R({
   );
 }
 export {
-  R as default
+  G as default
 };

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

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

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

@@ -1,8 +1,8 @@
 import { jsx as o } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import { TableCells as d } from "./TableCells.js";
 import h from "../../../../core/Context/useCoreContext.js";
-import { useCallback as b } from "../../../../external/preact/hooks/dist/hooks.module.js";
-import { useInteractiveDataGrid as F } from "../hooks/useInteractiveDataGrid.js";
+import { useCallback as F } from "../../../../external/preact/hooks/dist/hooks.module.js";
+import { useInteractiveDataGrid as b } from "../hooks/useInteractiveDataGrid.js";
 import { Fragment as I } from "../../../../external/preact/dist/preact.module.js";
 import { noop as l } from "../../../../utils/common.js";
 const j = ({
@@ -12,10 +12,10 @@ const j = ({
   customCells: n,
   onRowHover: a
 }) => {
-  const y = b(
+  const y = F(
     (r) => () => s == null ? void 0 : s.callback(s != null && s.retrievedField ? r[s.retrievedField] : r),
     [s]
-  ), { i18n: t } = h(), { currentIndex: f, listeners: u, ref: g } = F({ totalRows: (e == null ? void 0 : e.length) ?? 0 });
+  ), { i18n: t } = h(), { currentIndex: f, listeners: u, ref: g } = b({ totalRows: (e == null ? void 0 : e.length) ?? 0 });
   return /* @__PURE__ */ o(I, { children: e == null ? void 0 : e.map((r, p) => /* @__PURE__ */ o(
     "div",
     {

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

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

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

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

package/dist/es/components/internal/DataGrid/hooks/useInteractiveDataGrid.js

@@ -18,8 +18,7 @@ const T = ({ totalRows: x }) => {
     a(
       (e) => {
         var n;
-        if (!(e instanceof Element))
-          return;
+        if (!(e instanceof Element)) return;
         const t = Number((n = e.dataset) == null ? void 0 : n.index);
         i.activeIndex === -1 && t === 0 || t === i.index ? e.setAttribute("tabindex", "0") : e.setAttribute("tabindex", "-1"), t === i.activeIndex && (e == null || e.focus());
       },

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

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

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

@@ -1,5 +1,5 @@
-import { jsx as a } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import "./DataOverviewDetails.scss.js";
+import { jsx as e } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+/* empty css                         */
 import { useMemo as r } from "../../../external/preact/hooks/dist/hooks.module.js";
 import { useFetch as I } from "../../../hooks/useFetch.js";
 import { PayoutData as b } from "../../external/PayoutDetails/components/PayoutData.js";
@@ -7,10 +7,10 @@ import w from "../../../hooks/useBalanceAccounts.js";
 import { getErrorMessage as E } from "../../utils/getErrorMessage.js";
 import { ErrorMessageDisplay as P } from "../ErrorMessageDisplay/ErrorMessageDisplay.js";
 import x from "../Typography/Typography.js";
-import { TypographyVariant as N } from "../Typography/types.js";
-import C from "./useDataOverviewDetailsTitle.js";
+import { TypographyVariant as C } from "../Typography/types.js";
+import { useDataOverviewDetailsTitle as N } from "./useDataOverviewDetailsTitle.js";
 import { TransactionData as O } from "../../external/TransactionDetails/components/TransactionData/TransactionData.js";
-import { useAuthContext as B } from "../../../core/Auth/context.js";
+import { useConfigContext as B } from "../../../core/ConfigContext/context.js";
 import { EMPTY_OBJECT as d } from "../../../utils/value/constants.js";
 const F = {
   transaction: "getTransaction",
@@ -18,46 +18,46 @@ const F = {
 }, m = (t) => !("data" in t);
 function K(t) {
   var s;
-  const f = r(() => m(t) ? null : t.data, [t]), n = r(() => m(t) ? t.id : null, [t]), l = B().endpoints[F[t.type]], { hideTitle: D, title: h } = C(t), { data: c, error: i, isFetching: y } = I(
+  const f = r(() => m(t) ? null : t.data, [t]), n = r(() => m(t) ? t.id : null, [t]), l = B().endpoints[F[t.type]], { hideTitle: D, title: h } = N(t), { data: c, error: i, isFetching: y } = I(
     r(
       () => ({
         fetchOptions: { enabled: !!n && !!l },
         queryFn: async () => {
-          const g = t.type === "transaction" ? {
+          const A = t.type === "transaction" ? {
             path: { transactionId: n }
           } : {
             query: { balanceAccountId: n, createdAt: t.date }
           };
-          return l(d, { ...g });
+          return l(d, { ...A });
         }
       }),
       [n, l, t]
     )
-  ), v = t.type === "payout" ? t.id : c == null ? void 0 : c.balanceAccountId, T = t.type === "payout" ? t == null ? void 0 : t.balanceAccountDescription : t == null ? void 0 : t.balanceAccount, { balanceAccounts: e } = w(v, !T), u = r(() => {
+  ), v = t.type === "payout" ? t.id : c == null ? void 0 : c.balanceAccountId, T = t.type === "payout" ? t == null ? void 0 : t.balanceAccountDescription : t == null ? void 0 : t.balanceAccount, { balanceAccounts: a } = w(v, !T), u = r(() => {
     if (i)
       return E(i, "weCouldNotLoadYourTransactions", t.onContactSupport);
-  }, [i, t.onContactSupport]), A = m(t) && t.type === "transaction" ? t.extraDetails : d, o = f ?? c;
-  return /* @__PURE__ */ a("div", { className: "adyen-pe-overview-details", children: [
-    !D && /* @__PURE__ */ a("div", { className: "adyen-pe-overview-details--title", children: /* @__PURE__ */ a(x, { variant: N.TITLE, medium: !0, children: h }) }),
-    i && u && /* @__PURE__ */ a("div", { className: "adyen-pe-overview-details--error-container", children: /* @__PURE__ */ a(P, { withImage: !0, ...u }) }),
-    t.type === "transaction" && /* @__PURE__ */ a(
+  }, [i, t.onContactSupport]), g = m(t) && t.type === "transaction" ? t.extraDetails : d, o = f ?? c;
+  return /* @__PURE__ */ e("div", { className: "adyen-pe-overview-details", children: [
+    !D && /* @__PURE__ */ e("div", { className: "adyen-pe-overview-details--title", children: /* @__PURE__ */ e(x, { variant: C.TITLE, medium: !0, children: h }) }),
+    i && u && /* @__PURE__ */ e("div", { className: "adyen-pe-overview-details--error-container", children: /* @__PURE__ */ e(P, { withImage: !0, ...u }) }),
+    t.type === "transaction" && /* @__PURE__ */ e(
       O,
       {
         transaction: o ? {
           ...o || d,
-          balanceAccount: (t == null ? void 0 : t.balanceAccount) || (e == null ? void 0 : e[0])
+          balanceAccount: (t == null ? void 0 : t.balanceAccount) || (a == null ? void 0 : a[0])
         } : void 0,
         error: !!(i && u),
         isFetching: y,
-        extraFields: A
+        extraFields: g
       }
     ),
-    t.type === "payout" && o && /* @__PURE__ */ a(
+    t.type === "payout" && o && /* @__PURE__ */ e(
       b,
       {
         balanceAccountId: n,
         payout: o,
-        balanceAccountDescription: (t == null ? void 0 : t.balanceAccountDescription) || ((s = e == null ? void 0 : e[0]) == null ? void 0 : s.description),
+        balanceAccountDescription: (t == null ? void 0 : t.balanceAccountDescription) || ((s = a == null ? void 0 : a[0]) == null ? void 0 : s.description),
         isFetching: y
       }
     )

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

@@ -1,18 +1,18 @@
 import { useModalContext as c } from "../Modal/Modal.js";
 import { useState as u, useMemo as i, useEffect as f } from "../../../external/preact/hooks/dist/hooks.module.js";
 import m from "../../../core/Context/useCoreContext.js";
-import { boolOrFalse as T } from "../../../utils/value/bool.js";
-const d = {
+import { boolOrFalse as d } from "../../../utils/value/bool.js";
+const T = {
   transaction: "transactionDetails",
   payout: "payoutDetails"
-}, p = ({ hideTitle: t, type: e }) => {
-  const { i18n: o } = m(), { withinModal: s } = c(), [a, r] = u(!1), n = i(() => a || T(t), [a, t]), l = i(() => o.get(d[e]), [o, e]);
+}, C = ({ hideTitle: t, type: e }) => {
+  const { i18n: o } = m(), { withinModal: s } = c(), [a, r] = u(!1), n = i(() => a || d(t), [a, t]), l = i(() => o.get(T[e]), [o, e]);
   return f(() => {
     r(s);
   }, [s]), { hideTitle: n, title: l };
-}, x = p;
+};
 export {
-  d as TITLES_BY_TYPE,
-  x as default,
-  p as useDataOverviewDetailsTitle
+  T as TITLES_BY_TYPE,
+  C as default,
+  C as useDataOverviewDetailsTitle
 };

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

@@ -10,17 +10,17 @@ const O = ({
   selectedDetail: o,
   resetDetails: i
 }) => {
-  const { i18n: m } = C(), n = !!o;
+  const { i18n: n } = C(), m = !!o;
   return u(() => {
-    n && h.closeAll();
-  }, [n]), /* @__PURE__ */ r("div", { className: f, children: [
+    m && h.closeAll();
+  }, [m]), /* @__PURE__ */ r("div", { className: f, children: [
     p,
     o && /* @__PURE__ */ r(
       g,
       {
-        title: o != null && o.title ? m.get(o.title) : void 0,
+        title: o != null && o.title ? n.get(o.title) : void 0,
         isOpen: !!o,
-        "aria-label": m.get("payoutDetails"),
+        "aria-label": n.get("payoutDetails"),
         onClose: i,
         isDismissible: !0,
         headerWithBorder: !1,

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

@@ -2,7 +2,7 @@ import { jsx as r } from "../../../../external/preact/jsx-runtime/dist/jsxRuntim
 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";
+/* empty css                        */
 const h = "adyen-pe-data-overview-header", u = ({ baseClassName: e = h, children: t, hideTitle: p, titleKey: i, descriptionKey: o }) => {
   const { i18n: n } = m();
   return /* @__PURE__ */ r("header", { className: e, children: [

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

@@ -1,7 +1,7 @@
-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 = ({
+import { jsx as m } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { ErrorMessageDisplay as u } from "../ErrorMessageDisplay/ErrorMessageDisplay.js";
+import { getErrorMessage as i } from "../../utils/getErrorMessage.js";
+const l = ({
   error: r,
   errorMessage: t,
   onContactSupport: e
@@ -12,9 +12,9 @@ const c = ({
     refreshComponent: s,
     translationValues: n,
     onContactSupport: p
-  } = u(r, t, e);
-  return /* @__PURE__ */ i(
-    m,
+  } = i(r, t, e);
+  return /* @__PURE__ */ m(
+    u,
     {
       title: o,
       message: a,
@@ -25,7 +25,7 @@ const c = ({
       onContactSupport: p
     }
   );
-}, v = c;
+};
 export {
-  v as default
+  l as default
 };