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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,21 +1,21 @@
 import { jsx as n } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import d from "../DataGridCell.js";
-import { Fragment as p } from "../../../../external/preact/dist/preact.module.js";
-const g = ({
-  columns: b,
+import l from "../DataGridCell.js";
+import { Fragment as b } from "../../../../external/preact/dist/preact.module.js";
+const o = ({
+  columns: t,
   customCells: a,
   item: i,
-  rowIndex: l
-}) => /* @__PURE__ */ n(p, { children: b.map(({ key: r }) => a != null && a[r] ? /* @__PURE__ */ n(d, {
-  "aria-labelledby": String(r),
+  rowIndex: h
+}) => /* @__PURE__ */ n(b, { children: t.map(({ key: r, position: d }) => a != null && a[r] ? /* @__PURE__ */ n(l, { "aria-labelledby": String(r), column: r, position: d, children: /* @__PURE__ */ n("div", {
+  style: { width: "min-content" },
   // TODO create safeguard to remove "as any" assertion
   children: a[r]({
     key: r,
     value: i[r],
     item: i,
-    rowIndex: l
+    rowIndex: h
   })
-}, r) : /* @__PURE__ */ n(d, { "aria-labelledby": String(r), children: i[r] }, r)) });
+}) }, r) : /* @__PURE__ */ n(l, { "aria-labelledby": String(r), column: r, position: d, children: /* @__PURE__ */ n("div", { children: i[r] }) }, r)) });
 export {
-  g as TableCells
+  o as TableCells
 };

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

@@ -0,0 +1,29 @@
+import { jsx as i } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import o from "classnames";
+import { CellTextPosition as n } from "../types.js";
+import { useDataGridContext as c } from "../hooks/useDataGridContext.js";
+import { useRef as s, useEffect as m } from "../../../../external/preact/hooks/dist/hooks.module.js";
+const h = ({ cellKey: e, position: t, label: l }) => {
+  const { registerCells: a } = c(), r = s(null);
+  return m(() => {
+    var d;
+    r.current && a({
+      column: e,
+      width: (d = r.current) == null ? void 0 : d.getBoundingClientRect().width
+    });
+  }, [e, a]), /* @__PURE__ */ i(
+    "div",
+    {
+      role: "columnheader",
+      id: String(e),
+      className: o("adyen-pe-data-grid__cell adyen-pe-data-grid__cell--heading", {
+        "adyen-pe-data-grid__cell--right": t === n.RIGHT,
+        "adyen-pe-data-grid__cell--center": t === n.CENTER
+      }),
+      children: /* @__PURE__ */ i("div", { ref: r, className: "adyen-pe-data-grid__cell--heading-content", children: l })
+    }
+  );
+};
+export {
+  h as TableHeaderCell
+};

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

@@ -0,0 +1,8 @@
+import { createContext as t } from "../../../../external/preact/dist/preact.module.js";
+import { useContext as o } from "../../../../external/preact/hooks/dist/hooks.module.js";
+import { EMPTY_OBJECT as r } from "../../../../utils/value/constants.js";
+const e = t(r), s = () => o(e);
+export {
+  e as DataGridContext,
+  s as useDataGridContext
+};

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

@@ -1,8 +1,8 @@
 import { useReducer as I, useCallback as o } from "../../../../external/preact/hooks/dist/hooks.module.js";
 import { InteractionKeyCode as s } from "../../../types.js";
 import { INITIAL_STATE as p } from "../DataGrid.js";
-import R from "../../../../hooks/useReflex/hooks/useReflex.js";
-const l = ({ totalRows: x }) => {
+import R from "../../../../hooks/useReflex/useReflex.js";
+const m = ({ totalRows: x }) => {
   const [i, a] = I(
     (e, t) => {
       const n = x;
@@ -74,5 +74,5 @@ const l = ({ totalRows: x }) => {
   return { listeners: { onKeyDownCapture: c, onFocusCapture: f }, ref: r, activeIndex: i.activeIndex, currentIndex: i.index };
 };
 export {
-  l as useInteractiveDataGrid
+  m as useInteractiveDataGrid
 };

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

@@ -0,0 +1,23 @@
+import { jsx as m } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { DataGridContext as d } from "../hooks/useDataGridContext.js";
+import { toChildArray as l } from "../../../../external/preact/dist/preact.module.js";
+import { useMemo as f, useCallback as s } from "../../../../external/preact/hooks/dist/hooks.module.js";
+const x = ({ children: i }) => {
+  const t = f(() => /* @__PURE__ */ new Map(), []), o = s(
+    ({ column: r, width: e }) => {
+      if (t.has(r)) {
+        const n = t.get(r);
+        e > n && t.set(r, e);
+      } else
+        t.set(r, e);
+    },
+    [t]
+  ), a = s(
+    (r) => t.get(r),
+    [t]
+  );
+  return /* @__PURE__ */ m(d.Provider, { value: { registerCells: o, getMinWidthByColumn: a }, children: l(i) });
+};
+export {
+  x as DataGridProvider
+};

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

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

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

@@ -0,0 +1,4 @@
+const e = "adyen-pe-data-overview-container--with-error";
+export {
+  e as WITH_ERROR_CLASS
+};

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

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

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

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

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

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

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

@@ -0,0 +1,11 @@
+const e = {
+  weekday: "long",
+  month: "long",
+  year: "numeric",
+  hour: "2-digit",
+  minute: "2-digit",
+  timeZoneName: "shortOffset"
+};
+export {
+  e as DATE_FORMAT
+};