@adyen/adyen-platform-experience-web 1.7.1 → 1.8.0

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

@@ -1,73 +1,73 @@
 import { jsx as d } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { toChildArray as v, Fragment as w } from "../../../external/preact/dist/preact.module.js";
-import s from "classnames";
+import { toChildArray as w } from "../../../external/preact/dist/preact.module.js";
+import y from "classnames";
 /* empty css              */
 import { TableBody as C } from "./components/TableBody.js";
 import { InteractiveBody as _ } from "./components/InteractiveBody.js";
-import T from "./components/SkeletonBody.js";
-import { ErrorMessageDisplay as k } from "../ErrorMessageDisplay/ErrorMessageDisplay.js";
+import x 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 x } from "./utils/DataGridProvider.js";
-import { useDataGridContext as B } from "./hooks/useDataGridContext.js";
-import { TableHeaderCell as R } from "./components/TableHeaderCell.js";
+import { DataGridProvider as k } from "./utils/DataGridProvider.js";
+import { useDataGridContext as N } from "./hooks/useDataGridContext.js";
+import { TableHeaderCell as B } from "./components/TableHeaderCell.js";
+import R from "../../../core/Context/useCoreContext.js";
 const L = Object.freeze({
   activeIndex: -1,
   index: -1
 });
-function y({ errorDisplay: e, ...l }) {
-  return /* @__PURE__ */ d("div", { style: { width: "100%" }, children: /* @__PURE__ */ d(x, { children: /* @__PURE__ */ d(D, { ...l, errorDisplay: e }) }) });
+function u({ errorDisplay: e, ...o }) {
+  return /* @__PURE__ */ d("div", { style: { width: "100%" }, children: /* @__PURE__ */ d(k, { children: /* @__PURE__ */ d(D, { ...o, errorDisplay: e }) }) });
 }
-function D({ autoFitColumns: e, errorDisplay: l, ...a }) {
-  var m, c;
-  const r = n(() => v(a.children), [a.children]), u = n(() => r.find((t) => (t == null ? void 0 : t.type) === g), [r]), o = n(() => {
+function D({ autoFitColumns: e, errorDisplay: o, ...a }) {
+  var c, s;
+  const m = n(() => w(a.children), [a.children]), f = n(() => m.find((t) => (t == null ? void 0 : t.type) === g), [m]), l = n(() => {
     var t;
     return ((t = a.data) == null ? void 0 : t.length) === 0;
-  }, [a.data]), f = n(() => !a.loading && (o || a.error), [o, a.error, a.loading]), { getMinWidthByColumn: h } = B(), i = a.columns.filter((t) => t.visible !== !1).map((t) => ({ ...t, minWidth: h(t.key) })), b = i.map((t) => `minmax(${(t.minWidth || 100) + 40}px, ${t.flex || 1}fr)`).join(" ");
+  }, [a.data]), h = n(() => !a.loading && (l || a.error), [l, a.error, a.loading]), { getMinWidthByColumn: b } = N(), { getImageAsset: r } = R(), i = a.columns.filter((t) => t.visible !== !1).map((t) => ({ ...t, minWidth: b(t.key) })), v = i.map((t) => `minmax(${(t.minWidth || 100) + 40}px, ${t.flex || 1}fr)`).join(" ");
   return /* @__PURE__ */ d(
     "div",
     {
-      className: s("adyen-pe-data-grid", {
+      className: y("adyen-pe-data-grid", {
         "adyen-pe-data-grid--condensed": a.condensed,
         "adyen-pe-data-grid--outline": a.outline,
         "adyen-pe-data-grid--scrollable": a.scrollable,
         "adyen-pe-data-grid--loading": a.loading,
-        "adyen-pe-data-grid--empty": o || a.error
+        "adyen-pe-data-grid--empty": l || a.error
       }),
       style: e ? void 0 : {
         "--adyen-pe-data-grid-cols": i.length,
-        "--adyen-pe-data-grid-cells": b
+        "--adyen-pe-data-grid-cells": v
       },
-      children: /* @__PURE__ */ d(w, { children: [
+      children: [
         /* @__PURE__ */ d("div", { className: "adyen-pe-data-grid__table-wrapper", children: [
           /* @__PURE__ */ d("div", { role: "table", className: "adyen-pe-data-grid__table", children: [
-            /* @__PURE__ */ d("div", { className: "adyen-pe-data-grid__head", role: "rowgroup", children: /* @__PURE__ */ d("div", { role: "rowheader", className: "adyen-pe-data-grid__header", style: a.loading ? { width: "100%" } : {}, children: i.map((t) => /* @__PURE__ */ d(R, { label: t.label, position: t.position, cellKey: t.key }, t.key)) }) }),
-            /* @__PURE__ */ d(G, { ...a, columns: i, emptyBody: o })
+            /* @__PURE__ */ d("div", { className: "adyen-pe-data-grid__head", role: "rowgroup", children: /* @__PURE__ */ d("div", { role: "rowheader", className: "adyen-pe-data-grid__header", style: a.loading ? { width: "100%" } : {}, children: i.map((t) => /* @__PURE__ */ d(B, { label: t.label, position: t.position, cellKey: t.key }, t.key)) }) }),
+            /* @__PURE__ */ d(G, { ...a, columns: i, emptyBody: l })
           ] }),
-          f && (o && !a.error ? /* @__PURE__ */ d(
-            k,
+          h && (l && !a.error ? /* @__PURE__ */ d(
+            T,
             {
-              title: ((m = a.emptyTableMessage) == null ? void 0 : m.title) ?? "thereAreNoResults",
-              message: (c = a.emptyTableMessage) == null ? void 0 : c.message,
-              imageDesktop: N,
+              title: ((c = a.emptyTableMessage) == null ? void 0 : c.title) ?? "common.errors.noResults",
+              message: (s = a.emptyTableMessage) == null ? void 0 : s.message,
+              imageDesktop: r == null ? void 0 : r({ name: "no-data-female" }),
               centered: !0
             }
-          ) : a.error && l ? l() : null)
+          ) : a.error && o ? o() : null)
         ] }),
-        u
-      ] })
+        f
+      ]
     }
   );
 }
 function G(e) {
-  const l = n(() => e.loading || e.emptyBody || e.error, [e.emptyBody, e.error, e.loading]);
+  const o = n(() => e.loading || e.emptyBody || e.error, [e.emptyBody, e.error, e.loading]);
   return /* @__PURE__ */ d(
     "div",
     {
       role: "rowgroup",
-      className: s("adyen-pe-data-grid__body"),
-      style: l && { display: "grid", gridTemplateColumns: "1fr" },
-      children: l ? /* @__PURE__ */ d(T, { columnsNumber: e.columns.length, loading: e.loading }) : e.onRowClick ? /* @__PURE__ */ d(
+      className: y("adyen-pe-data-grid__body"),
+      style: o && { display: "grid", gridTemplateColumns: "1fr" },
+      children: o ? /* @__PURE__ */ d(x, { columnsNumber: e.columns.length, loading: e.loading }) : e.onRowClick ? /* @__PURE__ */ d(
         _,
         {
           onRowHover: e.onRowHover,
@@ -88,16 +88,16 @@ function G(e) {
     }
   );
 }
-y.Footer = g;
+u.Footer = g;
 function g({ children: e }) {
   return /* @__PURE__ */ d("div", { className: "adyen-pe-data-grid__footer", children: e });
 }
-y.defaultProps = {
+u.defaultProps = {
   condensed: !1,
   outline: !0,
   scrollable: !0
 };
 export {
   L as INITIAL_STATE,
-  y as default
+  u as default
 };

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

@@ -1,42 +1,43 @@
-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 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 = ({
-  data: e,
-  columns: c,
-  onRowClick: s,
-  customCells: n,
-  onRowHover: a
+import { jsx as a } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { TableCells as b } from "./TableCells.js";
+import { useCallback as v } from "../../../../external/preact/hooks/dist/hooks.module.js";
+import { useInteractiveDataGrid as f } from "../hooks/useInteractiveDataGrid.js";
+import { Fragment as F } from "../../../../external/preact/dist/preact.module.js";
+const B = ({
+  data: r,
+  columns: p,
+  onRowClick: e,
+  customCells: c,
+  onRowHover: s
 }) => {
-  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 } = 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",
-    {
-      role: "row",
-      tabIndex: 0,
-      onMouseEnter: t.has(`tooltip.${r == null ? void 0 : r.category}`) && a ? () => a(p) : l,
-      onFocus: t.has(`tooltip.${r == null ? void 0 : r.category}`) && a ? () => a(p) : l,
-      onMouseLeave: t.has(`tooltip.${r == null ? void 0 : r.category}`) && a ? () => a() : l,
-      onBlur: t.has(`tooltip.${r == null ? void 0 : r.category}`) && a ? () => a() : l,
-      ref: g,
-      "aria-selected": p === f,
-      "data-index": p,
-      className: "adyen-pe-data-grid__row adyen-pe-data-grid__row--clickable",
-      onClick: y(r),
-      onFocusCapture: u.onFocusCapture(p),
-      onKeyDownCapture: u.onKeyDownCapture,
-      children: /* @__PURE__ */ o(d, { columns: c, customCells: n, item: r, rowIndex: p })
-    },
-    r
-  )) });
+  const { currentIndex: d, listeners: u, ref: m } = f({ totalRows: (r == null ? void 0 : r.length) ?? 0 }), i = v(
+    (t) => () => e == null ? void 0 : e.callback(e != null && e.retrievedField ? t[e.retrievedField] : t),
+    [e]
+  );
+  return /* @__PURE__ */ a(F, { children: r == null ? void 0 : r.map((t, n) => {
+    const l = s && s.bind(null, n), o = s && s.bind(null, void 0);
+    return /* @__PURE__ */ a(
+      "div",
+      {
+        role: "row",
+        tabIndex: 0,
+        onMouseEnter: l,
+        onFocus: l,
+        onMouseLeave: o,
+        onBlur: o,
+        ref: m,
+        "aria-selected": n === d,
+        "data-index": n,
+        className: "adyen-pe-data-grid__row adyen-pe-data-grid__row--clickable",
+        onClick: i(t),
+        onFocusCapture: u.onFocusCapture(n),
+        onKeyDownCapture: u.onKeyDownCapture,
+        children: /* @__PURE__ */ a(b, { columns: p, customCells: c, item: t, rowIndex: n })
+      },
+      t
+    );
+  }) });
 };
 export {
-  j as InteractiveBody
+  B as InteractiveBody
 };

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

@@ -1,30 +1,28 @@
-import { jsx as c } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import g from "../../../../core/Context/useCoreContext.js";
-import { TableCells as h } from "./TableCells.js";
-import { Fragment as y } from "../../../../external/preact/dist/preact.module.js";
-import { noop as a } from "../../../../utils/common.js";
-const C = ({
-  data: l,
-  columns: n,
-  customCells: u,
-  onRowHover: o
-}) => {
-  const { i18n: s } = g();
-  return /* @__PURE__ */ c(y, { children: l == null ? void 0 : l.map((r, p) => /* @__PURE__ */ c(
+import { jsx as n } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { TableCells as u } from "./TableCells.js";
+import { Fragment as c } from "../../../../external/preact/dist/preact.module.js";
+const b = ({
+  data: r,
+  columns: m,
+  customCells: t,
+  onRowHover: e
+}) => /* @__PURE__ */ n(c, { children: r == null ? void 0 : r.map((o, l) => {
+  const s = e && e.bind(null, l), i = e && e.bind(null, void 0);
+  return /* @__PURE__ */ n(
     "div",
     {
       role: "row",
       tabIndex: 0,
       className: "adyen-pe-data-grid__row",
-      onMouseEnter: s.has(`tooltip.${r == null ? void 0 : r.category}`) && o ? () => o(p) : a,
-      onFocus: s.has(`tooltip.${r == null ? void 0 : r.category}`) && o ? () => o(p) : a,
-      onMouseLeave: s.has(`tooltip.${r == null ? void 0 : r.category}`) && o ? () => o() : a,
-      onBlur: s.has(`tooltip.${r == null ? void 0 : r.category}`) && o ? () => o() : a,
-      children: /* @__PURE__ */ c(h, { columns: n, customCells: u, item: r, rowIndex: p })
+      onMouseEnter: s,
+      onFocus: s,
+      onMouseLeave: i,
+      onBlur: i,
+      children: /* @__PURE__ */ n(u, { columns: m, customCells: t, item: o, rowIndex: l })
     },
-    r
-  )) });
-};
+    o
+  );
+}) });
 export {
-  C as TableBody
+  b as TableBody
 };

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

@@ -1,45 +1,45 @@
-import { jsx as e } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { jsx as r } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import { WITH_ERROR_CLASS as c } from "./constants.js";
-import { ErrorMessageDisplay as t } from "../ErrorMessageDisplay/ErrorMessageDisplay.js";
+import { ErrorMessageDisplay as e } from "../ErrorMessageDisplay/ErrorMessageDisplay.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,
+import { useConfigContext as p } from "../../../core/ConfigContext/context.js";
+function w({
+  balanceAccountsError: o,
   children: n,
-  className: a,
-  errorMessage: o,
-  isBalanceAccountIdWrong: i,
-  onContactSupport: s
+  className: i,
+  errorMessage: t,
+  isBalanceAccountIdWrong: s,
+  onContactSupport: a
 }) {
-  const { hasError: m } = h();
-  return /* @__PURE__ */ e("div", { className: g(a, { [c]: m }), children: m ? /* @__PURE__ */ e(
-    t,
+  const { hasError: m } = p();
+  return /* @__PURE__ */ r("div", { className: g(i, { [c]: m }), children: m ? /* @__PURE__ */ r(
+    e,
     {
       withImage: !0,
       centered: !0,
-      title: "somethingWentWrong",
-      message: [o, "tryRefreshingThePageOrComeBackLater"],
+      title: "common.errors.somethingWentWrong",
+      message: [t, "common.errors.retry"],
       refreshComponent: !0
     }
-  ) : r ? /* @__PURE__ */ e(
-    t,
+  ) : o ? /* @__PURE__ */ r(
+    e,
     {
       withImage: !0,
       centered: !0,
-      ...u(r, "weCouldNotLoadYourBalanceAccounts", s)
+      ...u(o, "common.errors.accountUnavailable", a)
     }
-  ) : i ? /* @__PURE__ */ e(
-    t,
+  ) : s ? /* @__PURE__ */ r(
+    e,
     {
       withImage: !0,
       centered: !0,
-      title: "somethingWentWrong",
-      message: [o, "theSelectedBalanceAccountIsIncorrect"]
+      title: "common.errors.somethingWentWrong",
+      message: [t, "common.errors.accountInvalid"]
     }
-  ) : /* @__PURE__ */ e(f, { children: n }) });
+  ) : /* @__PURE__ */ r(f, { children: n }) });
 }
 export {
-  x as default
+  w as default
 };

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

@@ -1,90 +1,99 @@
-import { jsx as n } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { jsx as c } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 /* empty css                         */
-import { useMemo as m, useState as x, useCallback as L, useEffect as N } from "../../../external/preact/hooks/dist/hooks.module.js";
-import { useFetch as O } from "../../../hooks/useFetch.js";
-import { PayoutData as B } from "../../external/PayoutDetails/components/PayoutData.js";
-import Y from "../../../hooks/useBalanceAccounts.js";
-import { getErrorMessage as q } from "../../utils/getErrorMessage.js";
-import { ErrorMessageDisplay as z } from "../ErrorMessageDisplay/ErrorMessageDisplay.js";
-import M from "../Typography/Typography.js";
-import { TypographyVariant as R } from "../Typography/types.js";
-import { useDataOverviewDetailsTitle as V } from "./useDataOverviewDetailsTitle.js";
+import { useMemo as d, useState as M, useCallback as O, useEffect as B } from "../../../external/preact/hooks/dist/hooks.module.js";
+import { useModalContext as q } from "../Modal/Modal.js";
+import { useFetch as z } from "../../../hooks/useFetch.js";
+import { PayoutData as L } from "../../external/PayoutDetails/components/PayoutData.js";
+import N from "../../../hooks/useBalanceAccounts.js";
+import { getErrorMessage as R } from "../../utils/getErrorMessage.js";
+import { ErrorMessageDisplay as Y } from "../ErrorMessageDisplay/ErrorMessageDisplay.js";
+import { useDataOverviewDetailsTitle as K } from "./useDataOverviewDetailsTitle.js";
 import { TX_DETAILS_RESERVED_FIELDS_SET as j } from "../../external/TransactionDetails/components/constants.js";
-import { PAYOUT_TABLE_FIELDS as J } from "../../external/PayoutsOverview/components/PayoutsTable/PayoutsTable.js";
+import { PAYOUT_TABLE_FIELDS as H } from "../../external/PayoutsOverview/components/PayoutsTable/PayoutsTable.js";
+import { Header as J } from "../Header/Header.js";
 import { TransactionData as U } from "../../external/TransactionDetails/components/TransactionData/TransactionData.js";
-import { useConfigContext as W } from "../../../core/ConfigContext/context.js";
-import { EMPTY_OBJECT as C } from "../../../utils/value/constants.js";
-const X = {
+import { useConfigContext as V } from "../../../core/ConfigContext/context.js";
+import { EMPTY_OBJECT as k } from "../../../utils/value/constants.js";
+const W = {
   transaction: "getTransaction",
-  payout: "getPayout",
-  dispute: "getDisputeDetail"
-}, s = (t) => !("data" in t);
-function dt(t) {
-  var f;
-  const k = m(() => s(t) ? null : t.data, [t]), o = m(() => s(t) ? t.id : null, [t]), y = W().endpoints[X[t.type]], { hideTitle: w, title: S } = V(t), { data: e, error: r, isFetching: v } = O(
-    m(
+  payout: "getPayout"
+}, y = (t) => !("data" in t);
+function lt(t) {
+  var h;
+  const C = d(() => y(t) ? null : t.data, [t]), o = d(() => y(t) ? t.id : null, [t]), m = V().endpoints[W[t.type]], { hideTitle: w, titleKey: S } = K(t), { withinModal: _ } = q(), { data: n, error: r, isFetching: b } = z(
+    d(
       () => ({
-        fetchOptions: { enabled: !!o && !!y },
+        fetchOptions: { enabled: !!o && !!m },
         queryFn: async () => {
-          let c = null;
+          let a = null;
           switch (t.type) {
             case "transaction":
-              c = { path: { transactionId: o } };
+              a = { path: { transactionId: o } };
               break;
             case "payout":
-              c = { query: { balanceAccountId: o, createdAt: t.date } };
+              a = { query: { balanceAccountId: o, createdAt: t.date } };
               break;
             default:
               break;
           }
-          return y(C, { ...c });
+          return m(k, { ...a });
         }
       }),
-      [o, y, t]
+      [o, m, t]
     )
-  ), _ = t.type === "payout" ? t.id : e == null ? void 0 : e.balanceAccountId, F = t.type === "payout" ? t == null ? void 0 : t.balanceAccountDescription : t == null ? void 0 : t.balanceAccount, { balanceAccounts: i } = Y(_, !F), D = m(() => {
-    if (r)
-      return q(r, "weCouldNotLoadYourTransactions", t.onContactSupport);
-  }, [r, t.onContactSupport]), u = k ?? e, [T, P] = x(), E = L(async () => {
-    var c, d, b, g, A;
-    if (e && (s(t) && t.type === "transaction" || t.type === "payout")) {
-      const l = await ((b = (d = (c = t.dataCustomization) == null ? void 0 : c.details) == null ? void 0 : d.onDataRetrieve) == null ? void 0 : b.call(d, e));
-      P(
-        (A = (g = t.dataCustomization) == null ? void 0 : g.details) == null ? void 0 : A.fields.reduce((I, a) => j.has(a.key) || J.includes(a.key) || (a == null ? void 0 : a.visibility) === "hidden" ? I : { ...I, ...l != null && l[a.key] ? { [a.key]: l[a.key] } : {} }, {})
+  ), F = t.type === "payout" ? t.id : n == null ? void 0 : n.balanceAccountId, P = t.type === "payout" ? t == null ? void 0 : t.balanceAccountDescription : t == null ? void 0 : t.balanceAccount, { balanceAccounts: i } = N(F, !P), D = d(() => {
+    if (r) {
+      let a;
+      switch (t.type) {
+        case "transaction":
+          a = "transactions.details.errors.unavailable";
+          break;
+        case "payout":
+          a = "payouts.details.errors.unavailable";
+          break;
+      }
+      return R(r, a, t.onContactSupport);
+    }
+  }, [r, t.onContactSupport, t.type]), u = C ?? n, [f, x] = M(), v = O(async () => {
+    var a, s, T, A, I;
+    if (n && (y(t) && t.type === "transaction" || t.type === "payout")) {
+      const l = await ((T = (s = (a = t.dataCustomization) == null ? void 0 : a.details) == null ? void 0 : s.onDataRetrieve) == null ? void 0 : T.call(s, n));
+      x(
+        (I = (A = t.dataCustomization) == null ? void 0 : A.details) == null ? void 0 : I.fields.reduce((g, e) => j.has(e.key) || H.includes(e.key) || (e == null ? void 0 : e.visibility) === "hidden" ? g : { ...g, ...l != null && l[e.key] ? { [e.key]: l[e.key] } : {} }, {})
       );
     }
-  }, [e, t]), h = s(t) && t.type === "transaction" || t.type === "payout" ? t.dataCustomization : void 0;
-  return N(() => {
-    E();
-  }, [E]), /* @__PURE__ */ n("div", { className: "adyen-pe-overview-details", children: [
-    !w && /* @__PURE__ */ n("div", { className: "adyen-pe-overview-details--title", children: /* @__PURE__ */ n(M, { variant: R.TITLE, medium: !0, children: S }) }),
-    r && D && /* @__PURE__ */ n("div", { className: "adyen-pe-overview-details--error-container", children: /* @__PURE__ */ n(z, { withImage: !0, ...D }) }),
-    t.type === "transaction" && /* @__PURE__ */ n(
+  }, [n, t]), E = y(t) && t.type === "transaction" || t.type === "payout" ? t.dataCustomization : void 0;
+  return B(() => {
+    v();
+  }, [v]), /* @__PURE__ */ c("div", { className: "adyen-pe-overview-details", children: [
+    /* @__PURE__ */ c(J, { hideTitle: w, titleKey: S, forwardedToRoot: !_ }),
+    r && D && /* @__PURE__ */ c("div", { className: "adyen-pe-overview-details--error-container", children: /* @__PURE__ */ c(Y, { withImage: !0, ...D }) }),
+    t.type === "transaction" && /* @__PURE__ */ c(
       U,
       {
         transaction: u ? {
-          ...u || C,
+          ...u || k,
           balanceAccount: (t == null ? void 0 : t.balanceAccount) || (i == null ? void 0 : i[0])
         } : void 0,
         error: !!(r && D),
-        isFetching: v,
-        extraFields: T,
-        dataCustomization: h
+        isFetching: b,
+        extraFields: f,
+        dataCustomization: E
       }
     ),
-    t.type === "payout" && u && /* @__PURE__ */ n(
-      B,
+    t.type === "payout" && u && /* @__PURE__ */ c(
+      L,
       {
         balanceAccountId: o,
         payout: u,
-        balanceAccountDescription: (t == null ? void 0 : t.balanceAccountDescription) || ((f = i == null ? void 0 : i[0]) == null ? void 0 : f.description),
-        isFetching: v,
-        extraFields: T,
-        dataCustomization: h
+        balanceAccountDescription: (t == null ? void 0 : t.balanceAccountDescription) || ((h = i == null ? void 0 : i[0]) == null ? void 0 : h.description),
+        isFetching: b,
+        extraFields: f,
+        dataCustomization: E
       }
     )
   ] });
 }
 export {
-  dt as default
+  lt as default
 };

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

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

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

@@ -1,36 +1,37 @@
 import { jsx as r } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { useEffect as C } from "../../../external/preact/hooks/dist/hooks.module.js";
-import { popoverUtil as h } from "../Popover/utils/popoverUtil.js";
-import s from "../../../core/Context/useCoreContext.js";
-import M from "../Modal/ModalContent/ModalContent.js";
-import a from "../Modal/Modal.js";
-const O = ({
+import { useEffect as h } from "../../../external/preact/hooks/dist/hooks.module.js";
+import { popoverUtil as M } from "../Popover/utils/popoverUtil.js";
+import g from "../../../core/Context/useCoreContext.js";
+import s from "../Modal/ModalContent/ModalContent.js";
+import v from "../Modal/Modal.js";
+const y = ({
   children: i,
   className: p,
+  ariaLabelKey: f,
   selectedDetail: o,
-  resetDetails: f,
-  dataCustomization: u
+  resetDetails: u,
+  dataCustomization: C
 }) => {
-  const { i18n: m } = s(), n = !!o;
-  return C(() => {
-    n && h.closeAll();
+  const { i18n: m } = g(), n = !!o;
+  return h(() => {
+    n && M.closeAll();
   }, [n]), /* @__PURE__ */ r("div", { className: p, children: [
     i,
     o && /* @__PURE__ */ r(
-      a,
+      v,
       {
         title: o != null && o.title ? m.get(o.title) : void 0,
         isOpen: !!o,
-        "aria-label": m.get("payoutDetails"),
-        onClose: f,
+        "aria-label": m.get(f),
+        onClose: u,
         isDismissible: !0,
         headerWithBorder: !1,
         size: (o == null ? void 0 : o.modalSize) ?? "large",
-        children: o && /* @__PURE__ */ r(M, { dataCustomization: { details: u }, ...o == null ? void 0 : o.selection })
+        children: o && /* @__PURE__ */ r(s, { dataCustomization: { details: C }, ...o == null ? void 0 : o.selection })
       }
     )
   ] });
 };
 export {
-  O as DataDetailsModal
+  y as DataDetailsModal
 };