@adyen/adyen-platform-experience-web 1.10.2 → 1.11.0

package/dist/es/components/internal/Calendar/components/CalendarGrid/CalendarGridDate.js

@@ -1,20 +1,20 @@
 import { jsx as E } from "../../../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import { memo as u } from "../../../../../external/.pnpm/preact@10.28.2/node_modules/preact/compat/dist/compat.module.js";
-import { propsProperty as w, property as o } from "./utils.js";
-import { CalendarGridRenderToken as y } from "../../types.js";
+import { propsProperty as y, property as o } from "./utils.js";
+import { CalendarGridRenderToken as w } from "../../types.js";
 import { memoComparator as N } from "../../../../../utils/preact/memoComparator/main.js";
 import { fixedForwardRef as O } from "../../../../../utils/preact/fixedForwardRef.js";
 import { getClassName as p } from "../../../../../utils/preact/className.js";
 import { EMPTY_OBJECT as i } from "../../../../../utils/value/constants.js";
-const l = "adyen-pe-calendar__cell adyen-pe-calendar__cell--date", T = "adyen-pe-calendar__date", P = (t = i, n) => {
-  const r = w.unwrapped(
+const T = "adyen-pe-calendar__cell adyen-pe-calendar__cell--date", l = "adyen-pe-calendar__date", P = (t = i, n) => {
+  const r = y.unwrapped(
     {
-      childClassName: o.mutable(T),
+      childClassName: o.mutable(l),
       childProps: {
         children: o.restricted(),
         className: ""
       },
-      className: o.mutable(l),
+      className: o.mutable(T),
       props: {
         ...t,
         children: o.restricted(),
@@ -23,7 +23,7 @@ const l = "adyen-pe-calendar__cell adyen-pe-calendar__cell--date", T = "adyen-pe
     },
     !0
   );
-  return n?.(y.DATE, r), r;
+  return n?.(w.DATE, r), r;
 }, G = O(
   ({ grid: t, prepare: n, datetime: r, flags: e, index: m, label: _, onlyCellsWithin: C }, h) => {
     const s = e.WITHIN_BLOCK, a = {
@@ -33,19 +33,19 @@ const l = "adyen-pe-calendar__cell adyen-pe-calendar__cell--date", T = "adyen-pe
     };
     if (s) {
       const c = e.WITHIN_RANGE;
-      a["data-today"] = e.CURRENT, a["data-first-week-day"] = e.LINE_START, a["data-last-week-day"] = e.LINE_END, a["data-weekend"] = e.WEEKEND, a["data-first-month-day"] = e.BLOCK_START, a["data-last-month-day"] = e.BLOCK_END, a["data-within-range"] = c, c && (a["data-range-end"] = e.RANGE_END, a["data-range-start"] = e.RANGE_START, a["data-selection-end"] = e.SELECTION_END, a["data-selection-start"] = e.SELECTION_START, a["data-within-selection"] = e.WITHIN_SELECTION, a["aria-selected"] = `${!!(e.SELECTION_END || e.SELECTION_START || e.WITHIN_SELECTION)}`), m === +t.cursor && (a.ref = h);
+      a["data-today"] = e.CURRENT, e.CURRENT && (a["data-testid"] = "calendar-current-day"), a["data-first-week-day"] = e.LINE_START, a["data-last-week-day"] = e.LINE_END, a["data-weekend"] = e.WEEKEND, a["data-first-month-day"] = e.BLOCK_START, a["data-last-month-day"] = e.BLOCK_END, a["data-within-range"] = c, c && (a["data-range-end"] = e.RANGE_END, a["data-range-start"] = e.RANGE_START, a["data-selection-end"] = e.SELECTION_END, a["data-selection-start"] = e.SELECTION_START, a["data-within-selection"] = e.WITHIN_SELECTION, a["aria-selected"] = `${!!(e.SELECTION_END || e.SELECTION_START || e.WITHIN_SELECTION)}`), m === +t.cursor && (a.ref = h);
     }
-    const d = P(a, n), { children: x, className: I, ...A } = d.props || i, L = p(d.className, l, I);
+    const d = P(a, n), { children: x, className: I, ...A } = d.props || i, L = p(d.className, T, I);
     return /* @__PURE__ */ E("td", { ...A, ...a, className: L, children: (!C || s) && (() => {
       const {
         children: c,
-        className: S,
-        ...D
-      } = d.childProps || i, R = p(d.childClassName, T, S);
-      return /* @__PURE__ */ E("time", { ...D, className: R, dateTime: r, children: _ });
+        className: R,
+        ...S
+      } = d.childProps || i, D = p(d.childClassName, l, R);
+      return /* @__PURE__ */ E("time", { ...S, className: D, dateTime: r, children: _ });
     })() });
   }
-), F = u(
+), f = u(
   G,
   N({
     block: N.exclude,
@@ -53,5 +53,5 @@ const l = "adyen-pe-calendar__cell adyen-pe-calendar__cell--date", T = "adyen-pe
   })
 );
 export {
-  F as default
+  f as default
 };

package/dist/es/components/internal/Calendar/components/CalendarGrid/CalendarGridDayOfWeek.js

@@ -1,19 +1,19 @@
 import { jsx as t } from "../../../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { memo as y } from "../../../../../external/.pnpm/preact@10.28.2/node_modules/preact/compat/dist/compat.module.js";
-import { propsProperty as k, property as o } from "./utils.js";
-import { CalendarGridRenderToken as L } from "../../types.js";
-import { memoComparator as n } from "../../../../../utils/preact/memoComparator/main.js";
+import { memo as k } from "../../../../../external/.pnpm/preact@10.28.2/node_modules/preact/compat/dist/compat.module.js";
+import { propsProperty as L, property as o } from "./utils.js";
+import { CalendarGridRenderToken as u } from "../../types.js";
+import { memoComparator as c } from "../../../../../utils/preact/memoComparator/main.js";
 import { EMPTY_OBJECT as d } from "../../../../../utils/value/constants.js";
-import { getClassName as m } from "../../../../../utils/preact/className.js";
-const p = "adyen-pe-calendar__cell adyen-pe-calendar__cell--day-of-week", i = "adyen-pe-calendar__day-of-week", u = (e = d, r) => {
-  const a = k.unwrapped(
+import { getClassName as n } from "../../../../../utils/preact/className.js";
+const m = "adyen-pe-calendar__cell adyen-pe-calendar__cell--day-of-week", p = "adyen-pe-calendar__day-of-week", A = (e = d, r) => {
+  const a = L.unwrapped(
     {
-      childClassName: o.mutable(i),
+      childClassName: o.mutable(p),
       childProps: {
         children: o.restricted(),
         className: ""
       },
-      className: o.mutable(p),
+      className: o.mutable(m),
       props: {
         ...e,
         children: o.restricted(),
@@ -22,24 +22,30 @@ const p = "adyen-pe-calendar__cell adyen-pe-calendar__cell--day-of-week", i = "a
     },
     !0
   );
-  return r?.(L.DAY_OF_WEEK, a), a;
-}, A = ({ prepare: e, flags: r, labels: { long: a, short: _ } }) => {
+  return r?.(u.DAY_OF_WEEK, a), a;
+}, P = ({ prepare: e, flags: r, labels: { long: a, short: i } }) => {
   const l = {
     "aria-label": a,
     "data-first-week-day": r.LINE_START,
     "data-last-week-day": r.LINE_END,
     "data-weekend": r.WEEKEND,
     scope: "col"
-  }, s = u(l, e), { children: P, className: N, onCommand: D, ...c } = s.props || d, C = m(s.className, p, N), {
-    children: b,
-    className: E,
+  }, s = A(l, e), {
+    children: D,
+    className: _,
+    onCommand: b,
+    ref: N,
     ...f
-  } = s.childProps || d, h = m(s.childClassName, i, E);
-  return /* @__PURE__ */ t("th", { ...c, ref: c.ref, ...l, className: C, children: /* @__PURE__ */ t("abbr", { ...f, className: h, children: _ }) });
-}, M = y(
-  A,
-  n({
-    block: n.exclude,
+  } = s.props || d, C = n(s.className, m, _), {
+    children: T,
+    className: E,
+    ...h
+  } = s.childProps || d, y = n(s.childClassName, p, E);
+  return /* @__PURE__ */ t("th", { ...f, ref: N, ...l, className: C, children: /* @__PURE__ */ t("abbr", { ...h, className: y, children: i }) });
+}, M = k(
+  P,
+  c({
+    block: c.exclude,
     flags: (e) => +e
   })
 );

package/dist/es/components/internal/Calendar/hooks/useCalendar.js

@@ -1,13 +1,13 @@
 import { useState as q, useMemo as h, useRef as y, useCallback as J, useImperativeHandle as _, useEffect as v } from "../../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
-import G from "../../../../core/Context/useCoreContext.js";
 import { getDateObjectFromTimestamp as P } from "../calendar/utils.js";
-import Q from "../../../../hooks/element/useFocusCursor.js";
+import G from "../../../../hooks/element/useFocusCursor.js";
+import Q from "../../../../core/Context/preact/useCoreContext.js";
 import o from "../calendar/facade/index.js";
 import { EMPTY_OBJECT as g } from "../../../../utils/value/constants.js";
 import { isFunction as K } from "../../../../utils/value/is.js";
 const V = ({
-  blocks: u,
-  controls: f,
+  blocks: f,
+  controls: u,
   dynamicBlockRows: a,
   firstWeekDay: m,
   highlight: p,
@@ -21,17 +21,17 @@ const V = ({
   untilDate: T,
   useYearView: b
 }, w) => {
-  const { i18n: O } = G(), [B, H] = q(performance.now()), F = h(() => o.slice(C, T), [C, T]), I = y(g), x = h(
-    () => f ?? (K(N) ? o.controls.MINIMAL : o.controls.NONE),
-    [f, N]
+  const { i18n: O } = Q(), [B, H] = q(performance.now()), F = h(() => o.slice(C, T), [C, T]), I = y(g), x = h(
+    () => u ?? (K(N) ? o.controls.MINIMAL : o.controls.NONE),
+    [u, N]
   ), A = h(
     () => p ?? (K(l) ? o.highlight.ONE : o.highlight.NONE),
     [p, l]
-  ), { grid: e, kill: R } = h(() => {
-    const { grid: t, kill: r } = o(function() {
-      H(performance.now()), I.current = this, !(i === t.highlight.from && c === t.highlight.to) && (i = t.highlight.from, c = t.highlight.to, l?.(i, c));
+  ), { grid: i, kill: R } = h(() => {
+    const { grid: t, kill: e } = o(function() {
+      H(performance.now()), I.current = this, !(r === t.highlight.from && c === t.highlight.to) && (r = t.highlight.from, c = t.highlight.to, l?.(r, c));
     });
-    let { from: i, to: c } = t.highlight;
+    let { from: r, to: c } = t.highlight;
     return t.config.cursorIndex = (n) => {
       let s = n.target;
       for (; s && s !== n.currentTarget; ) {
@@ -42,23 +42,23 @@ const V = ({
     }, t.config.shiftFactor = function(n) {
       if (this.controls === o.controls.MINIMAL)
         return n?.shiftKey ? 12 : n?.altKey ? this.blocks : 1;
-    }, { grid: t, kill: r };
+    }, { grid: t, kill: e };
   }, []), S = h(() => {
-    const t = (r) => {
-      e.cursor(r);
+    const t = (e) => {
+      i.cursor(e);
     };
     return {
       onClickCapture: t,
       onMouseOverCapture: t,
       onPointerOverCapture: t,
-      onKeyDownCapture: (r) => {
-        e.cursor(r) && r.preventDefault();
+      onKeyDownCapture: (e) => {
+        i.cursor(e) && e.preventDefault();
       }
     };
-  }, [e]), j = Q(
+  }, [i]), j = G(
     J(
-      ((t, r) => {
-        r instanceof Element && r.removeAttribute("aria-selected"), t instanceof Element && t.setAttribute("aria-selected", "true");
+      ((t, e) => {
+        e instanceof Element && e.removeAttribute("aria-selected"), t instanceof Element && t.setAttribute("aria-selected", "true");
       }),
       []
     )
@@ -66,10 +66,10 @@ const V = ({
   return _(
     w,
     () => {
-      const { from: t, to: r } = e?.highlight || g;
+      const { from: t, to: e } = i?.highlight || g;
       return {
         clear: () => {
-          e?.highlight && (e.highlight.from = void 0);
+          i?.highlight && (i.highlight.from = void 0);
         },
         get config() {
           return { ...I.current ?? g };
@@ -77,21 +77,22 @@ const V = ({
         get from() {
           return P(t);
         },
-        set from(i) {
-          e?.highlight && i && (e.highlight.from = i.getTime());
+        set from(r) {
+          i?.highlight && r && (i.highlight.from = r.getTime());
         },
         get to() {
-          return P(r);
+          return P(e);
         },
-        set to(i) {
-          e?.highlight && i && (e.highlight.to = i.getTime());
+        set to(r) {
+          i?.highlight && r && (i.highlight.to = r.getTime());
         }
       };
     },
-    [e, B]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [i, B]
   ), v(() => {
-    e.config({
-      blocks: u,
+    i.config({
+      blocks: f,
       controls: x,
       firstWeekDay: m,
       fixedBlockHeight: !a,
@@ -105,10 +106,10 @@ const V = ({
   }, [
     x,
     A,
-    u,
+    f,
     a,
     m,
-    e,
+    i,
     O,
     d,
     F,
@@ -117,8 +118,8 @@ const V = ({
     b
   ]), v(() => {
     const t = [].concat(L).slice(0, 2).map(Number).filter(Boolean);
-    return t[0] && (e.highlight.from = +t[0]), t[1] && (e.highlight.to = +t[1]), R;
-  }, []), { cursorElementRef: j, cursorRootProps: S, grid: e };
+    return t[0] && (i.highlight.from = +t[0]), t[1] && (i.highlight.to = +t[1]), R;
+  }, []), { cursorElementRef: j, cursorRootProps: S, grid: i };
 };
 export {
   V as default

package/dist/es/components/internal/Calendar/hooks/useCalendarControlsRendering.js

@@ -1,14 +1,14 @@
 import { jsx as l } from "../../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import { ButtonVariant as u } from "../../Button/types.js";
 import { useCallback as c } from "../../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
-import f from "../../../../core/Context/useCoreContext.js";
-import d from "../../../../hooks/element/useDetachedRender.js";
+import f from "../../../../hooks/element/useDetachedRender.js";
+import d from "../../../../core/Context/preact/useCoreContext.js";
 import { Icon as p } from "../../Icon/Icon.js";
 import b from "../../Button/Button.js";
 import { isFunction as h } from "../../../../utils/value/is.js";
 const T = (e) => {
-  const { i18n: a } = f();
-  return d(
+  const { i18n: a } = d();
+  return f(
     c(
       ((m, t, r) => {
         if (!(m instanceof HTMLElement)) return null;

package/dist/es/components/internal/Calendar/hooks/useTimezone.js

@@ -13,7 +13,7 @@ const { getTimezoneTime: U, getUsedTimezone: F } = (() => {
     return [u, d];
   }, getUsedTimezone: (t) => (e.tz = t, e.tz.current) };
 })(), N = ({ timezone: o, withClock: m = !1 } = G) => {
-  const e = c(() => S(m), [m]), s = c(() => F(o), [o]), [r, t] = z(Date.now()), [T, n] = c(() => U(s, r), [r, s]);
+  const e = c(() => S(m), [m]), s = c(() => F(o), [o]), [r, t] = z(() => Date.now()), [T, n] = c(() => U(s, r), [r, s]);
   return g(() => {
     if (e)
       return M.subscribe((i) => {

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

@@ -3,7 +3,7 @@ import { useMemo as i } from "../../../external/.pnpm/preact@10.28.2/node_module
 import { TypographyVariant as n } from "../Typography/types.js";
 /* empty css                   */
 import { getCapitalHeaderSubtitleByLegalEntity as s } from "./helpers.js";
-import { useConfigContext as m } from "../../../core/ConfigContext/context.js";
+import { useConfigContext as m } from "../../../core/ConfigContext/preact/context.js";
 import { Header as l } from "../Header/Header.js";
 const b = (r) => {
   const t = m().extraConfig?.legalEntity, a = i(() => {

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

@@ -1,11 +1,11 @@
 import { jsx as e } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
 /* empty css                   */
 import { useMemo as c } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
-import { uniqueId as p } from "../../../utils/random/uniqueId.js";
+import p from "../../../utils/random/uniqueId.js";
 import r from "../Typography/Typography.js";
 import { TypographyVariant as l } from "../Typography/types.js";
-import b from "../../../core/Context/useCoreContext.js";
-import N from "classnames";
+import b from "classnames";
+import N from "../../../core/Context/preact/useCoreContext.js";
 import y from "../Slider/Slider.js";
 const E = ({
   dynamicOffersConfig: a,
@@ -14,7 +14,7 @@ const E = ({
   onRelease: v,
   className: x
 }) => {
-  const s = c(() => p("elem"), []), n = c(() => p("elem"), []), { i18n: t } = b(), d = c(
+  const s = c(() => p("elem"), []), n = c(() => p("elem"), []), { i18n: t } = N(), d = c(
     () => t.amount(i, a.minAmount.currency, { maximumFractionDigits: 0 }),
     [t, i, a.minAmount.currency]
   ), A = (m) => {
@@ -24,7 +24,7 @@ const E = ({
     const u = Number(m.target.value);
     v?.(u);
   };
-  return /* @__PURE__ */ e("div", { className: N("adyen-pe-capital-slider", x), children: [
+  return /* @__PURE__ */ e("div", { className: b("adyen-pe-capital-slider", x), children: [
     /* @__PURE__ */ e("label", { id: s, htmlFor: n, className: "adyen-pe-capital-slider__label", role: "presentation", children: /* @__PURE__ */ e(r, { variant: l.BODY, stronger: !0, children: t.get("capital.offer.selection.slider.a11y.label") }) }),
     /* @__PURE__ */ e("div", { children: [
       /* @__PURE__ */ e("output", { "aria-labelledby": s, htmlFor: n, className: "adyen-pe-capital-slider__value", "aria-live": "polite", children: /* @__PURE__ */ e(r, { variant: l.TITLE, strongest: !0, children: d }) }),

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

@@ -1,36 +1,36 @@
 import { jsx as e } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import c from "classnames";
-import { useState as v, useRef as I, useCallback as g, useEffect as q } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
-/* empty css              */
 import i from "../Typography/Typography.js";
 import { TypographyVariant as p, TypographyElement as m } from "../Typography/types.js";
+import { useState as I, useMemo as v, useCallback as T, useEffect as g } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
+/* empty css              */
 import { Icon as d } from "../Icon/Icon.js";
-import { uniqueId as T } from "../../../utils/random/uniqueId.js";
-const Y = ({ checked: a, error: h, description: n, disabled: u, id: y, label: b, name: f, value: A, onInput: r, className: _, ...k }) => {
-  const [o, t] = v(a), x = I(T()), s = y || x.current, N = g(
+import q from "../../../utils/random/uniqueId.js";
+const j = ({ checked: a, error: h, description: n, disabled: y, id: u, label: b, name: _, value: C, onInput: o, className: k, ...x }) => {
+  const [r, s] = I(a), f = v(q, []), t = u || f, N = T(
     (l) => {
-      r?.(l), a === void 0 && t(l?.currentTarget?.checked ?? !1);
+      o?.(l), a === void 0 && s(l?.currentTarget?.checked ?? !1);
     },
-    [a, r]
+    [a, o]
   );
-  return q(() => {
-    t(a);
-  }, [a]), /* @__PURE__ */ e("div", { className: c("adyen-pe-checkbox", _), children: [
+  return g(() => {
+    s(a);
+  }, [a]), /* @__PURE__ */ e("div", { className: c("adyen-pe-checkbox", k), children: [
     /* @__PURE__ */ e(
       "input",
       {
-        name: f,
+        name: _,
         type: "checkbox",
-        checked: o,
-        disabled: u,
+        checked: r,
+        disabled: y,
         className: c("adyen-pe-visually-hidden adyen-pe-checkbox__input"),
-        id: s,
+        id: t,
         onInput: N,
-        ...k
+        ...x
       }
     ),
-    /* @__PURE__ */ e("label", { className: "adyen-pe-checkbox__label", htmlFor: s, children: [
-      o ? /* @__PURE__ */ e(d, { name: "checkmark-square-fill", className: "adyen-pe-checkbox__icon" }) : /* @__PURE__ */ e(d, { name: "square", className: c("adyen-pe-checkbox__icon", { "adyen-pe-checkbox__icon--error": h }) }),
+    /* @__PURE__ */ e("label", { className: "adyen-pe-checkbox__label", htmlFor: t, children: [
+      r ? /* @__PURE__ */ e(d, { name: "checkmark-square-fill", className: "adyen-pe-checkbox__icon" }) : /* @__PURE__ */ e(d, { name: "square", className: c("adyen-pe-checkbox__icon", { "adyen-pe-checkbox__icon--error": h }) }),
       /* @__PURE__ */ e("div", { className: "adyen-pe-checkbox__label-content", children: [
         /* @__PURE__ */ e(i, { el: m.SPAN, variant: p.BODY, children: b }),
         n && /* @__PURE__ */ e(i, { el: m.SPAN, variant: p.BODY, className: "adyen-pe-checkbox__description", children: n })
@@ -39,5 +39,5 @@ const Y = ({ checked: a, error: h, description: n, disabled: u, id: y, label: b,
   ] });
 };
 export {
-  Y as Checkbox
+  j as Checkbox
 };

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

@@ -1,10 +1,10 @@
 import { jsx as e } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import B from "classnames";
-import { useState as C, useCallback as f, useMemo as b } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
-import I from "../../../core/Context/useCoreContext.js";
+import { useState as C, useCallback as u, useMemo as b } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
 import { Tooltip as _ } from "../Tooltip/Tooltip.js";
-import { ButtonVariant as S } from "../Button/types.js";
+import { ButtonVariant as I } from "../Button/types.js";
 /* empty css              */
+import S from "../../../core/Context/preact/useCoreContext.js";
 import T from "../Button/Button.js";
 import { Icon as A } from "../Icon/Icon.js";
 const o = "adyen-pe-copy-text", a = {
@@ -26,14 +26,14 @@ const o = "adyen-pe-copy-text", a = {
   stronger: l,
   ...g
 }) => {
-  const { i18n: i } = I(), [m, d] = C(!1), p = f(() => d(!1), []), N = b(() => i.get(c ?? "common.actions.copy.labels.default"), [i, c]), x = f(async () => {
+  const { i18n: i } = S(), [m, d] = C(!1), p = u(() => d(!1), []), N = b(() => i.get(c ?? "common.actions.copy.labels.default"), [i, c]), x = u(async () => {
     if (t)
       try {
         await navigator.clipboard.writeText(t), d(!0), s && s();
       } catch (y) {
         console.error(y);
       }
-  }, [t, s]), u = b(
+  }, [t, s]), f = b(
     () => /* @__PURE__ */ e(
       "span",
       {
@@ -49,11 +49,11 @@ const o = "adyen-pe-copy-text", a = {
     [n, l, r, t]
   );
   return /* @__PURE__ */ e("span", { className: a.container, ...g, children: [
-    v ? /* @__PURE__ */ e(_, { content: t, isUnderlineVisible: h, children: u }) : u,
+    v ? /* @__PURE__ */ e(_, { content: t, isUnderlineVisible: h, children: f }) : f,
     /* @__PURE__ */ e(_, { content: i.get(m ? "common.actions.copy.labels.done" : "common.actions.copy.labels.default"), children: /* @__PURE__ */ e(
       T,
       {
-        variant: S.TERTIARY,
+        variant: I.TERTIARY,
         className: a.base,
         onClick: x,
         onBlur: p,

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

@@ -10,7 +10,7 @@ import { useMemo as n } from "../../../external/.pnpm/preact@10.28.2/node_module
 import { DataGridProvider as x } from "./utils/DataGridProvider.js";
 import { useDataGridContext as T } from "./hooks/useDataGridContext.js";
 import { TableHeaderCell as k } from "./components/TableHeaderCell.js";
-import N from "../../../core/Context/useCoreContext.js";
+import N from "../../../core/Context/preact/useCoreContext.js";
 const $ = Object.freeze({
   activeIndex: -1,
   index: -1

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

@@ -1,37 +1,39 @@
-import { jsx as n } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { useDataGridContext as s } from "./hooks/useDataGridContext.js";
-import { useRef as o, useEffect as d } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
-import { cloneElement as c, isValidElement as m } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/dist/preact.module.js";
-import f from "classnames";
-function x({
+import { jsx as d } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useDataGridContext as o } from "./hooks/useDataGridContext.js";
+import { isValidElement as c, cloneElement as m } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/dist/preact.module.js";
+import { useCallback as f } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
+import g from "classnames";
+function y({
   children: e,
-  column: r,
-  position: a,
+  column: t,
+  position: r,
   ...i
 }) {
-  const { registerCells: l } = s(), t = o(null);
-  return d(() => {
-    t.current && l({
-      column: r,
-      width: t.current?.getBoundingClientRect().width
-    });
-  }, [r, l]), /* @__PURE__ */ n(
+  const { registerCells: a } = o(), n = f(
+    (l) => {
+      if (!l) return;
+      const { width: s } = l.getBoundingClientRect();
+      a({ column: t, width: s });
+    },
+    [t, a]
+  );
+  return /* @__PURE__ */ d(
     "div",
     {
       role: "cell",
-      className: f("adyen-pe-data-grid__cell", {
-        "adyen-pe-data-grid__cell--right": a === "right",
-        "adyen-pe-data-grid__cell--center": a === "center"
+      "data-testid": t,
+      className: g("adyen-pe-data-grid__cell", {
+        "adyen-pe-data-grid__cell--right": r === "right",
+        "adyen-pe-data-grid__cell--center": r === "center"
       }),
       ...i,
-      children: e && m(e) ? c(e, {
-        ...e?.props,
-        ref: t,
+      children: e && c(e) ? m(e, {
+        ref: n,
         style: { width: "min-content" }
       }) : null
     }
   );
 }
 export {
-  x as default
+  y as default
 };

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

@@ -4,7 +4,7 @@ import { ErrorMessageDisplay as e } from "../ErrorMessageDisplay/ErrorMessageDis
 import g from "classnames";
 import { getErrorMessage as u } from "../../utils/getErrorMessage.js";
 import { Fragment as f } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/dist/preact.module.js";
-import { useConfigContext as p } from "../../../core/ConfigContext/context.js";
+import { useConfigContext as p } from "../../../core/ConfigContext/preact/context.js";
 function w({
   balanceAccountsError: o,
   children: n,

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

@@ -7,11 +7,11 @@ import { PayoutData as F } from "../../external/PayoutDetails/components/PayoutD
 import P from "../../../hooks/useBalanceAccounts.js";
 import { getErrorMessage as k } from "../../utils/getErrorMessage.js";
 import { ErrorMessageDisplay as x } from "../ErrorMessageDisplay/ErrorMessageDisplay.js";
-import { useDataOverviewDetailsTitle as I } from "./useDataOverviewDetailsTitle.js";
+import I from "./useDataOverviewDetailsTitle.js";
 import { TX_DETAILS_RESERVED_FIELDS_SET as M } from "../../external/TransactionDetails/constants.js";
 import { PAYOUT_TABLE_FIELDS as O } from "../../external/PayoutsOverview/components/PayoutsTable/PayoutsTable.js";
 import { Header as p } from "../Header/Header.js";
-import { useConfigContext as B } from "../../../core/ConfigContext/context.js";
+import { useConfigContext as B } from "../../../core/ConfigContext/preact/context.js";
 import { EMPTY_OBJECT as q } from "../../../utils/value/constants.js";
 const z = {
   payout: "getPayout"
@@ -23,9 +23,10 @@ function $(t) {
         fetchOptions: { enabled: !!t.id && !!r },
         queryFn: async () => {
           switch (t.type) {
-            case "payout":
+            case "payout": {
               const e = { query: { balanceAccountId: t.id, createdAt: t.date } };
               return r(q, { ...e });
+            }
           }
         }
       }),
@@ -45,7 +46,7 @@ function $(t) {
     if (i) {
       const e = await t.dataCustomization?.details?.onDataRetrieve?.(i);
       A(
-        t.dataCustomization?.details?.fields.reduce((m, a) => M.has(a.key) || O.includes(a.key) || a?.visibility === "hidden" ? m : { ...m, ...e?.[a.key] ? { [a.key]: e[a.key] } : {} }, {})
+        t.dataCustomization?.details?.fields?.reduce((m, a) => M.has(a.key) || O.includes(a.key) || a?.visibility === "hidden" ? m : { ...m, ...e?.[a.key] ? { [a.key]: e[a.key] } : {} }, {})
       );
     }
   }, [i, t]), b = t.dataCustomization;

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

@@ -1,8 +1,8 @@
 import { jsx as r } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import { useEffect as f } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
 import { popoverUtil as l } from "../Popover/utils/popoverUtil.js";
-import d from "../../../core/Context/useCoreContext.js";
-import e from "../Modal/ModalContent/ModalContent.js";
+import d from "../Modal/ModalContent/ModalContent.js";
+import e from "../../../core/Context/preact/useCoreContext.js";
 import u from "../Modal/Modal.js";
 const z = ({
   children: m,
@@ -12,7 +12,7 @@ const z = ({
   resetDetails: a,
   dataCustomization: p
 }) => {
-  const { i18n: i } = d(), t = !!o;
+  const { i18n: i } = e(), t = !!o;
   return f(() => {
     t && l.closeAll();
   }, [t]), /* @__PURE__ */ r("div", { className: n, children: [
@@ -27,7 +27,7 @@ const z = ({
         isDismissible: !0,
         headerWithBorder: !1,
         size: o?.modalSize ?? "large",
-        children: o && /* @__PURE__ */ r(e, { dataCustomization: { details: p }, ...o?.selection })
+        children: o && /* @__PURE__ */ r(d, { dataCustomization: { details: p }, ...o?.selection })
       }
     )
   ] });