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

package/dist/es/components/internal/Pagination/hooks/usePagination.js

@@ -1,42 +1,47 @@
-import { useRef as p, useCallback as P, useState as G, useMemo as a, useEffect as T } from "../../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
+import { useRef as l, useCallback as h, useState as G, useMemo as a, useEffect as T } from "../../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
 import j from "../../../../hooks/useBooleanState.js";
 import F from "../../../../hooks/useMounted.js";
 import { getClampedPageLimit as H } from "../utils.js";
 import { noop as J } from "../../../../utils/common.js";
 import { clamp as K } from "../../../../utils/value/number.js";
-const Z = (y, l, z) => {
-  const s = p(), c = p(), h = p(), r = p(), u = F(
-    P(() => {
-      s.current?.abort(), s.current = void 0;
+const Z = (V, x, z) => {
+  const u = l(), c = l(), R = l(), e = l(), n = F(
+    h(() => {
+      u.current?.abort(), u.current = void 0;
     }, [])
-  ), [t, x] = G(r.current), [i, M] = j(!1), e = a(() => H(z), [z]), { getPageCount: v, getPageParams: V, resetPageCount: S, updatePagination: A } = y, n = a(() => l ? (g) => {
-    if (!(e && Number.isInteger(g))) return;
-    const f = v(), o = g < 0 ? g + f + 1 : g;
-    o > 0 && (f ? o <= f : o === 1) && (s.current?.abort(), s.current = new AbortController(), u.current && (((r.current = o) > 1 || f) && x(r.current), (async () => {
-      const { signal: $ } = s.current, B = { ...V(o, e), limit: e, page: o };
+  ), [t, v] = G(e.current), [f, m] = j(!1), r = a(() => H(z), [z]), { getPageCount: s, getPageParams: M, resetPageCount: S, updatePagination: $ } = V, i = a(() => x ? (d) => {
+    if (!(r && Number.isInteger(d))) return;
+    const p = s(), o = d < 0 ? d + p + 1 : d;
+    o > 0 && (p ? o <= p : o === 1) && (u.current?.abort(), u.current = new AbortController(), n.current && (((e.current = o) > 1 || p) && v(e.current), (async () => {
+      const { signal: b } = u.current, B = { ...M(o, r), limit: r, page: o };
       try {
-        const d = await l(B, $);
-        if (!d || !u.current) return;
-        const { size: b, ...D } = d;
-        A(o, e, D), c.current = r.current && Math.max(r.current, c.current || -1 / 0), r.current && r.current === c.current && (h.current = b), r.current === 1 && b > 0 && x(r.current), r.current = void 0, M(!0);
-      } catch (d) {
-        if ($.aborted) return;
-        console.error(d);
+        const P = await x(B, b);
+        if (!P || !n.current) return;
+        const { size: y, ...D } = P;
+        $(o, r, D), c.current = e.current && Math.max(e.current, c.current || -1 / 0), e.current && e.current === c.current && (R.current = y), e.current === 1 && y > 0 && v(e.current), e.current = void 0, m(!0);
+      } catch (P) {
+        if (b.aborted) return;
+        console.error(P);
       }
     })()));
-  } : J, [e, l]), R = P(() => {
-    t && n(Math.min(t + 1, v()));
-  }, [n, t]), q = P(() => {
-    t && n(Math.max(t - 1, 1));
-  }, [n, t]), m = a(() => v() || t || void 0, [n, i]), w = a(() => !!(t && m) && t < m, [t, m]), E = a(() => !!t && t > 1, [t]), C = a(
-    () => c.current ? (c.current - 1) * e + (h.current || 0) : 0,
-    [n, i]
-  ), I = a(() => t ? K(0, C - (t - 1) * e, e) : 0, [e, C, t]), N = P(() => {
-    S(), c.current = h.current = r.current = void 0, u.current && x(r.current);
-  }, [S]);
+  } : J, [r, x, n, s, M, $, m]), A = h(() => {
+    t && i(Math.min(t + 1, s()));
+  }, [i, t, s]), q = h(() => {
+    t && i(Math.max(t - 1, 1));
+  }, [i, t]), g = a(
+    () => s() || t || void 0,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [s, t, f]
+  ), w = a(() => !!(t && g) && t < g, [t, g]), E = a(() => !!t && t > 1, [t]), C = a(
+    () => c.current ? (c.current - 1) * r + (R.current || 0) : 0,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [r, f]
+  ), I = a(() => t ? K(0, C - (t - 1) * r, r) : 0, [r, C, t]), N = h(() => {
+    S(), c.current = R.current = e.current = void 0, n.current && v(e.current);
+  }, [S, n]);
   return T(() => {
-    u.current && i && M(!1);
-  }, [i]), { goto: n, hasNext: w, hasPrev: E, limit: e, next: R, page: t, pages: m, pageSize: I, prev: q, resetPagination: N, size: C };
+    n.current && f && m(!1);
+  }, [f, n, m]), { goto: i, hasNext: w, hasPrev: E, limit: r, next: A, page: t, pages: g, pageSize: I, prev: q, resetPagination: N, size: C };
 };
 export {
   Z as default

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

@@ -1,12 +1,12 @@
 import { jsx as e } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import to from "../Button/ButtonActions/ButtonActions.js";
 import { ButtonActionsLayoutBasic as no } from "../Button/ButtonActions/types.js";
-import { DEFAULT_POPOVER_CLASSNAME as c, POPOVER_HEADER_TITLE_CLASSNAME as co, TOOLTIP_CONTENT_CLASSNAME as x, POPOVER_CONTENT_CLASSNAME as A, POPOVER_FOOTER_CLASSNAME as io, DEFAULT_TOOLTIP_CLASSNAME as so, POPOVER_CONTAINER_CLASSNAME as uo, POPOVER_HEADER_CLASSNAME as D } from "./constants.js";
-import ao from "./PopoverDismissButton/PopoverDismissButton.js";
+import { DEFAULT_POPOVER_CLASSNAME as i, POPOVER_HEADER_TITLE_CLASSNAME as co, TOOLTIP_CONTENT_CLASSNAME as x, POPOVER_CONTENT_CLASSNAME as A, POPOVER_FOOTER_CLASSNAME as io, DEFAULT_TOOLTIP_CLASSNAME as so, POPOVER_CONTAINER_CLASSNAME as ao, POPOVER_HEADER_CLASSNAME as D } from "./constants.js";
+import uo from "./PopoverDismissButton/PopoverDismissButton.js";
 import mo from "./PopoverTitle/PopoverTitle.js";
-import { PopoverContainerVariant as i, PopoverContainerSize as B } from "./types.js";
-import { InteractionKeyCode as lo } from "../../types.js";
-import { useClickOutside as fo, ClickOutsideVariant as po, CONTROL_ELEMENT_PROPERTY as l } from "../../../hooks/element/useClickOutside.js";
+import { PopoverContainerVariant as s, PopoverContainerSize as B } from "./types.js";
+import { InteractionKeyCode as fo } from "../../types.js";
+import { useClickOutside as lo, ClickOutsideVariant as po, CONTROL_ELEMENT_PROPERTY as l } from "../../../hooks/element/useClickOutside.js";
 import Eo from "../../../hooks/element/useFocusTrap.js";
 import Oo from "../../../hooks/element/usePopoverPositioner.js";
 import N from "../../../hooks/element/useUniqueIdentifier.js";
@@ -20,59 +20,59 @@ import { Fragment as _ } from "../../../external/.pnpm/preact@10.28.2/node_modul
 import { isFunction as Lo } from "../../../utils/value/is.js";
 import { boolOrTrue as Co } from "../../../utils/value/bool.js";
 import { getModifierClasses as _o } from "../../../utils/preact/className.js";
-const yo = (s) => {
+const Ro = (a) => {
   let u;
-  const f = s.querySelector(`:scope .${x}`)?.querySelectorAll(To);
-  return f ? (Array.prototype.some.call(f, (t) => {
-    if (Ao(t)) return u = t;
+  const p = a.querySelector(`:scope .${x}`)?.querySelectorAll(To);
+  return p ? (Array.prototype.some.call(p, (r) => {
+    if (Ao(r)) return u = r;
   }), u) : null;
-}, vo = (s) => s === i.TOOLTIP ? [10, 3, 5, 5] : [8, 8, 8, 8];
+}, yo = (a) => a === s.TOOLTIP ? [10, 3, 5, 5] : [8, 8, 8, 8];
 function Qo({
-  actions: s,
+  actions: a,
   disableFocusTrap: u = !1,
-  actionsLayout: f = no.SPACE_BETWEEN,
-  variant: t = i.TOOLTIP,
-  title: p,
-  open: a,
-  dismissible: y,
+  actionsLayout: p = no.SPACE_BETWEEN,
+  variant: r = s.TOOLTIP,
+  title: E,
+  open: m,
+  dismissible: R,
   modifiers: U,
-  divider: v,
-  fitContent: R,
+  divider: y,
+  fitContent: v,
   withoutSpace: S,
   containerSize: d,
   position: K,
-  targetElement: r,
+  targetElement: t,
   setToTargetWidth: W,
   dismiss: n,
   children: I,
   withContentPadding: H,
   classNameModifiers: j,
-  showOverlay: m = !1,
+  showOverlay: f = !1,
   fitPosition: G,
   fixedPositioning: Y = !1,
   additionalStyle: J,
   setPopoverElement: Q,
   ...X
 }) {
-  const F = w(() => Lo(n) && Co(y), [n, y]), M = N(), V = N(), $ = L(), Z = C(
+  const F = w(() => Lo(n) && Co(R), [n, R]), M = N(), V = N(), $ = L(), Z = C(
     (o) => {
-      n && n(), o && r?.current?.focus();
+      n && n(), o && t?.current?.focus();
     },
-    [n, r]
-  ), E = C(
+    [n, t]
+  ), O = C(
     (o) => {
-      o.code === lo.ESCAPE && (n && n(), (r?.current).focus());
+      o.code === fo.ESCAPE && (n && n(), (t?.current).focus());
     },
-    [n, r]
-  ), O = L(E), b = L(), h = fo(
+    [n, t]
+  ), P = L(O), b = L(), h = lo(
     Oo(
-      vo(t),
-      r,
+      yo(r),
       t,
+      r,
       K,
       M,
       W,
-      m,
+      f,
       G,
       Y,
       J,
@@ -80,56 +80,58 @@ function Qo({
       V
     ),
     n,
-    t === i.TOOLTIP && !a,
+    r === s.TOOLTIP && !m,
     po.POPOVER
-  ), z = Eo(u ? null : h, Z), P = Po(
+  ), g = Eo(u ? null : h, Z), T = Po(
     C(
-      (o, T) => {
-        T instanceof Element && (T[l] = void 0, delete T[l]), o instanceof Element && (o[l] = r.current, cancelAnimationFrame(b.current), b.current = requestAnimationFrame(() => {
-          if ($.current === a || !($.current = a)) return;
-          yo(o)?.focus();
+      (o, c) => {
+        c instanceof Element && (c[l] = void 0, delete c[l]), o instanceof Element && (o[l] = t.current, cancelAnimationFrame(b.current), b.current = requestAnimationFrame(() => {
+          if ($.current === m || !($.current = m)) return;
+          Ro(o)?.focus();
         }));
       },
-      [a, r]
+      [m, t]
     ),
-    u ? h : z
-  ), g = N(P), oo = w(
+    u ? h : g
+  ), z = N(T), oo = w(
     () => ({
-      [`${c}--medium`]: d === B.MEDIUM,
-      [`${c}--with-divider`]: !!v,
-      [`${c}--wide`]: d === B.WIDE,
-      [`${c}--fit-content`]: R,
-      [`${c}--without-space`]: S,
-      [`${c}--auto-width`]: m
+      [`${i}--medium`]: d === B.MEDIUM,
+      [`${i}--with-divider`]: !!y,
+      [`${i}--wide`]: d === B.WIDE,
+      [`${i}--fit-content`]: v,
+      [`${i}--without-space`]: S,
+      [`${i}--auto-width`]: f
     }),
-    [d, v, S, R, m]
+    [d, y, S, v, f]
   );
   q(() => {
-    const o = P.current;
-    if (o)
-      return o[l] = r.current, r.current?.setAttribute("aria-controls", o.id), () => {
-        r.current?.removeAttribute("aria-controls"), o[l] = void 0;
+    const o = T.current;
+    if (o) {
+      const c = t.current;
+      return o[l] = c, c?.setAttribute("aria-controls", o.id), () => {
+        c?.removeAttribute("aria-controls"), o[l] = void 0;
       };
-  }, [P, r]), q(() => (document.removeEventListener("keydown", O.current), document.addEventListener("keydown", O.current = E), () => document.removeEventListener("keydown", O.current)), [E]);
-  const eo = t === i.TOOLTIP ? so : `${c} ${uo}`, ro = t === i.TOOLTIP ? x : `${A}`;
+    }
+  }, [T, t]), q(() => (document.removeEventListener("keydown", P.current), document.addEventListener("keydown", P.current = O), () => document.removeEventListener("keydown", P.current)), [O]);
+  const eo = r === s.TOOLTIP ? so : `${i} ${ao}`, ro = r === s.TOOLTIP ? x : `${A}`;
   return No(
-    /* @__PURE__ */ e(_, { children: a ? /* @__PURE__ */ e(_, { children: [
-      m && /* @__PURE__ */ e("div", { className: "adyen-pe-popover__overlay" }),
+    /* @__PURE__ */ e(_, { children: m ? /* @__PURE__ */ e(_, { children: [
+      f && /* @__PURE__ */ e("div", { className: "adyen-pe-popover__overlay" }),
       /* @__PURE__ */ e(
         "div",
         {
           ...X,
           ref: (o) => {
-            g(o), Q?.(o);
+            z(o), Q?.(o);
           },
-          "aria-labelledby": r.current?.id,
+          "aria-labelledby": t.current?.id,
           className: k(eo, oo, j),
-          role: t === i.POPOVER ? "dialog" : "tooltip",
+          role: r === s.POPOVER ? "dialog" : "tooltip",
           style: { visibility: "hidden" },
           children: [
-            (p || F) && /* @__PURE__ */ e("div", { className: _o(D, U, [D]), children: [
-              p && /* @__PURE__ */ e("div", { className: co, children: /* @__PURE__ */ e(mo, { title: p }) }),
-              F && /* @__PURE__ */ e(ao, { onClick: n })
+            (E || F) && /* @__PURE__ */ e("div", { className: _o(D, U, [D]), children: [
+              E && /* @__PURE__ */ e("div", { className: co, children: /* @__PURE__ */ e(mo, { title: E }) }),
+              F && /* @__PURE__ */ e(uo, { onClick: n })
             ] }),
             I && /* @__PURE__ */ e(_, { children: [
               /* @__PURE__ */ e(
@@ -137,15 +139,15 @@ function Qo({
                 {
                   className: k(ro, {
                     [`${A}--with-padding`]: H,
-                    [`${A}--overlay`]: m
+                    [`${A}--overlay`]: f
                   }),
                   ref: V,
                   children: I
                 }
               ),
-              t === i.TOOLTIP && /* @__PURE__ */ e("span", { "data-popover-placement": "hidden", ref: M, className: "adyen-pe-tooltip__arrow" })
+              r === s.TOOLTIP && /* @__PURE__ */ e("span", { "data-popover-placement": "hidden", ref: M, className: "adyen-pe-tooltip__arrow" })
             ] }),
-            s && /* @__PURE__ */ e("div", { className: io, children: /* @__PURE__ */ e(to, { actions: s, layout: f }) })
+            a && /* @__PURE__ */ e("div", { className: io, children: /* @__PURE__ */ e(to, { actions: a, layout: p }) })
           ]
         }
       )

package/dist/es/components/internal/Popover/PopoverDismissButton/PopoverDismissButton.js

@@ -1,12 +1,12 @@
 import { jsx as o } from "../../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import { ButtonVariant as s } from "../../Button/types.js";
 /* empty css                          */
-import n from "../../../../core/Context/useCoreContext.js";
-import { memo as r } from "../../../../external/.pnpm/preact@10.28.2/node_modules/preact/compat/dist/compat.module.js";
+import { memo as n } from "../../../../external/.pnpm/preact@10.28.2/node_modules/preact/compat/dist/compat.module.js";
+import r from "../../../../core/Context/preact/useCoreContext.js";
 import l from "../../Button/Button.js";
 import { Fragment as m } from "../../../../external/.pnpm/preact@10.28.2/node_modules/preact/dist/preact.module.js";
 function a({ image: t = !0, onClick: i }) {
-  const { i18n: e } = n();
+  const { i18n: e } = r();
   return /* @__PURE__ */ o(m, { children: /* @__PURE__ */ o(
     l,
     {
@@ -30,7 +30,7 @@ function a({ image: t = !0, onClick: i }) {
     }
   ) });
 }
-const v = r(a);
+const v = n(a);
 export {
   v as default
 };

package/dist/es/components/internal/Popover/utils/popoverUtil.js

@@ -9,14 +9,14 @@ const u = /* @__PURE__ */ (() => {
       })
     )) return;
     const o = n.reduce((l, s) => {
-      const c = s instanceof Element ? e.findIndex((f) => f.element === s) : -1;
+      const c = s instanceof Element ? e.findIndex((m) => m.element === s) : -1;
       return l === -1 && c !== -1 ? c : l;
     }, -1);
     o === -1 ? i(0) : o + 1 <= e.length - 1 && i(o + 1);
   }, d = (n) => {
     const t = e.findIndex((o) => o.element === n);
     t >= 0 && e.splice(t, 1);
-  }, m = (n, t) => {
+  }, f = (n, t) => {
     e.findIndex((l) => l.element === n) >= 0 || e.push({ element: n, callback: t });
   }, i = (n) => {
     const t = e.length;
@@ -24,7 +24,7 @@ const u = /* @__PURE__ */ (() => {
       e?.[o]?.callback?.();
     e.splice(n);
   };
-  return { add: m, remove: d, closeAll: () => {
+  return { add: f, remove: d, closeAll: () => {
     e.forEach((n) => n?.callback?.()), e = [];
   }, closePopoversOutsideOfClick: r };
 })();

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

@@ -1,16 +1,16 @@
 import { jsx as a } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import { TypographyVariant as y, TypographyElement as b } from "../Typography/types.js";
-import u from "../../../core/Context/useCoreContext.js";
-import { useTabbedControl as $ } from "../../../hooks/useTabbedControl.js";
-import h from "../Typography/Typography.js";
+import u from "../../../hooks/useTabbedControl.js";
+import $ from "../Typography/Typography.js";
 /* empty css                      */
+import h from "../../../core/Context/preact/useCoreContext.js";
 function _({
   ["aria-label"]: i,
   activeItem: l,
   items: r,
   onChange: s
 }) {
-  const { activeIndex: d, onClick: c, onKeyDown: m, refs: p, uniqueId: n } = $({ onChange: s, options: r, activeOption: l }), { i18n: g } = u();
+  const { activeIndex: d, onClick: c, onKeyDown: m, refs: p, uniqueId: n } = u({ onChange: s, options: r, activeOption: l }), { i18n: g } = h();
   return /* @__PURE__ */ a("div", { children: [
     /* @__PURE__ */ a("div", { role: "radiogroup", className: "adyen-pe-segmented-control", "aria-label": i, children: r.map((e, o) => {
       const t = d === o;
@@ -29,7 +29,7 @@ function _({
           disabled: e.disabled,
           tabIndex: t ? 0 : -1,
           children: /* @__PURE__ */ a(
-            h,
+            $,
             {
               el: b.SPAN,
               variant: y.BODY,

package/dist/es/components/internal/StatusBox/useStatusBox.js

@@ -1,15 +1,15 @@
 import { useMemo as t } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
-import d from "../../../core/Context/useCoreContext.js";
-import A from "../../../hooks/useTimezoneAwareDateFormatting.js";
-import { getPaymentMethodType as M, getDisplayablePaymentMethod as h } from "./utils.js";
+import d from "../../../hooks/useTimezoneAwareDateFormatting.js";
+import { getPaymentMethodType as A, getDisplayablePaymentMethod as M } from "./utils.js";
+import h from "../../../core/Context/preact/useCoreContext.js";
 import { DATE_FORMAT_TRANSACTION_DETAILS as l } from "../../../constants/dateFormats.js";
 const P = ({ timezone: a, paymentMethodData: n, bankAccount: m, amountData: o, createdAt: e }) => {
-  const r = t(() => ({ paymentMethod: n, bankAccount: m }), [n, m]), { i18n: s } = d(), { dateFormat: u } = A(a), c = t(() => {
+  const r = t(() => ({ paymentMethod: n, bankAccount: m }), [n, m]), { i18n: s } = h(), { dateFormat: u } = d(a), c = t(() => {
     if (o) {
       const { currency: p, value: f } = o;
       return `${s.amount(f, p, { hideCurrency: !0 })} ${p}`;
     }
-  }, [o, s]), i = t(() => M(r), [r]), y = t(() => h(r), [r]), T = t(() => e && u(e, l), [e, u]);
+  }, [o, s]), i = t(() => A(r), [r]), y = t(() => M(r), [r]), T = t(() => e && u(e, l), [e, u]);
   return { amount: c, date: e, formattedDate: T, paymentMethod: y, paymentMethodType: i };
 };
 export {

package/dist/es/components/internal/Stepper/Step.js

@@ -2,13 +2,13 @@ import { jsx as e } from "../../../external/.pnpm/preact@10.28.2/node_modules/pr
 import { forwardRef as i } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/compat/dist/compat.module.js";
 import m from "classnames";
 import d from "../Typography/Typography.js";
-import { TypographyElement as l, TypographyVariant as c } from "../Typography/types.js";
+import { TypographyElement as c, TypographyVariant as l } from "../Typography/types.js";
 import { Icon as y } from "../Icon/Icon.js";
-const f = ({ completed: r, index: a }) => r ? /* @__PURE__ */ e(y, { name: "checkmark-circle-fill" }) : /* @__PURE__ */ e("span", { className: "adyen-pe-step__number", children: a + 1 }), g = i(({ index: r, active: a, completed: p, disabled: t, onClick: n, children: o, totalSteps: u }, s) => /* @__PURE__ */ e(
+const f = ({ completed: a, index: r }) => a ? /* @__PURE__ */ e(y, { name: "checkmark-circle-fill" }) : /* @__PURE__ */ e("span", { className: "adyen-pe-step__number", children: r + 1 }), g = i(({ index: a, active: r, completed: p, disabled: t, onClick: n, children: o }, s) => /* @__PURE__ */ e(
   "li",
   {
     className: m("adyen-pe-step__item", {
-      "adyen-pe-step--active": a,
+      "adyen-pe-step--active": r,
       "adyen-pe-step--completed": p,
       "adyen-pe-step--disabled": t
     }),
@@ -16,16 +16,16 @@ const f = ({ completed: r, index: a }) => r ? /* @__PURE__ */ e(y, { name: "chec
       "button",
       {
         "aria-disabled": t,
-        "aria-current": a ? "step" : void 0,
-        tabIndex: a ? 0 : -1,
+        "aria-current": r ? "step" : void 0,
+        tabIndex: r ? 0 : -1,
         ref: s,
         type: "button",
         className: "adyen-pe-step__button",
         onClick: n,
         disabled: t,
         children: [
-          /* @__PURE__ */ e("div", { className: "adyen-pe-step__icon", "aria-hidden": "true", children: /* @__PURE__ */ e(f, { completed: p, index: r }) }),
-          /* @__PURE__ */ e(d, { variant: c.BODY, el: l.SPAN, className: "adyen-pe-step__label", children: o })
+          /* @__PURE__ */ e("div", { className: "adyen-pe-step__icon", "aria-hidden": "true", children: /* @__PURE__ */ e(f, { completed: p, index: a }) }),
+          /* @__PURE__ */ e(d, { variant: l.BODY, el: c.SPAN, className: "adyen-pe-step__label", children: o })
         ]
       }
     )

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

@@ -17,7 +17,7 @@ const j = ({ activeIndex: o, onChange: i, variant: S = "vertical", children: n,
         const f = t.offsetTop - e.offsetTop;
         e.scrollTo({ top: f, behavior: "smooth" });
       }
-  }, [o, l]);
+  }, [o, l, s]);
   const r = c(
     (t) => T && t > l ? !1 : t <= l + 1,
     [l, T]

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

@@ -1,39 +1,39 @@
 import { jsx as a } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import L from "classnames";
-import { useMemo as E } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
-import { TypographyVariant as s } from "../Typography/types.js";
-import e from "../Typography/Typography.js";
-import { SL_GRID_CLASS as d, SL_LABEL_CLASS as h, SL_CONTENT_CLASS as I, SL_ITEM_CLASS as N, SL_ITEM_WITH_HIGHLIGHT_CLASS as y, SL_BASE_CLASS as D, SL_EXPANDED_CLASS as O, SL_ALIGN_END as v } from "./constants.js";
+import { useMemo as h } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
+import { TypographyVariant as _ } from "../Typography/types.js";
+import d from "../Typography/Typography.js";
+import { SL_GRID_CLASS as e, SL_LABEL_CLASS as I, SL_CONTENT_CLASS as N, SL_ITEM_CLASS as m, SL_ITEM_WITH_HIGHLIGHT_CLASS as y, SL_BASE_CLASS as v, SL_EXPANDED_CLASS as D, SL_ALIGN_END as O } from "./constants.js";
 /* empty css                    */
 import { useStructuredListItems as b } from "./useStructuredListItem.js";
-const g = "6-6";
+const $ = "6-6";
 function k({
   ["aria-label"]: n,
   items: p,
   highlightable: c,
   renderValue: S,
   renderLabel: t,
-  layout: o = g,
+  layout: l = $,
   grid: A = !0,
   classNames: i,
   align: u = "end",
-  condensed: _ = !0
+  condensed: o = !0
 }) {
-  const [C, f] = E(() => o.split("-").map((r) => `${d}--width-${r}-of-12`), [o]), m = b(p), l = _ ? s.CAPTION : s.BODY;
-  return /* @__PURE__ */ a("dl", { className: L(D, i, { [v]: u === "end", [O]: !_ }), "aria-label": n, children: m.map((r, T) => /* @__PURE__ */ a(
+  const [C, f] = h(() => l.split("-").map((r) => `${e}--width-${r}-of-12`), [l]), T = b(p), s = o ? _.CAPTION : _.BODY;
+  return /* @__PURE__ */ a("dl", { className: L(v, i, { [O]: u === "end", [D]: !o }), "aria-label": n, children: T.map((r, E) => /* @__PURE__ */ a(
     "div",
     {
-      "data-testid": r.label,
-      className: L(N, {
+      "data-testid": r.id ?? r.label,
+      className: L(m, {
         [y]: c,
-        [d]: A
+        [e]: A
       }),
       children: [
-        /* @__PURE__ */ a("dt", { className: L(h, C), children: t ? t(r.label, r.key, r.rawValue) : /* @__PURE__ */ a(e, { variant: l, children: r.label }) }),
-        /* @__PURE__ */ a("dd", { className: L(I, f), children: r.render ? r.render(r) : S ? S(r.value, r.key, r.type, r.config) : /* @__PURE__ */ a(e, { variant: l, children: r.value }) })
+        /* @__PURE__ */ a("dt", { className: L(I, C), children: t ? t(r.label, r.key, r.rawValue) : /* @__PURE__ */ a(d, { variant: s, children: r.label }) }),
+        /* @__PURE__ */ a("dd", { className: L(N, f), "data-testid": `${r.id ?? r.label}-value`, children: r.render ? r.render(r) : S ? S(r.value, r.key, r.type, r.config) : /* @__PURE__ */ a(d, { variant: s, children: r.value }) })
       ]
     },
-    `${T}_${r.id || "0"}`
+    `${E}_${r.uid || "0"}`
   )) });
 }
 export {

package/dist/es/components/internal/StructuredList/useStructuredListItem.js

@@ -1,19 +1,20 @@
-import { useMemo as u } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
-import n from "../../../core/Context/useCoreContext.js";
+import { useMemo as o } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
+import n from "../../../core/Context/preact/useCoreContext.js";
 import { uuid as a } from "../../../utils/random/uuid.js";
-const s = (e) => {
-  const { i18n: o } = n();
-  return u(() => e.map((r) => ({
+const p = (e) => {
+  const { i18n: u } = n();
+  return o(() => e.map((r) => ({
     key: r.key,
     value: r.value,
-    id: r.id || a(),
-    label: r.label ?? o.get(r.key),
+    id: r.id,
+    uid: r.id || a(),
+    label: r.label ?? u.get(r.key),
     type: r.type,
     config: r.config,
     rawValue: r.rawValue,
     render: r.render
-  })), [o, e]);
+  })), [u, e]);
 };
 export {
-  s as useStructuredListItems
+  p as useStructuredListItems
 };

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

@@ -0,0 +1,9 @@
+import { jsx as c } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import e from "classnames";
+/* empty css                 */
+import { Icon as o } from "../Icon/Icon.js";
+const i = ({ className: s }) => /* @__PURE__ */ c("div", { className: e("adyen-pe-success-icon", s), children: /* @__PURE__ */ c(o, { name: "checkmark", className: "adyen-pe-success-icon__icon" }) });
+export {
+  i as SuccessIcon,
+  i as default
+};

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

@@ -1,16 +1,16 @@
 import { jsx as i } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import { TypographyVariant as y, TypographyElement as $ } from "../Typography/types.js";
-import h from "../../../core/Context/useCoreContext.js";
-import { useTabbedControl as u } from "../../../hooks/useTabbedControl.js";
-import f from "../Typography/Typography.js";
+import h from "../../../hooks/useTabbedControl.js";
+import u from "../Typography/Typography.js";
 /* empty css          */
+import f from "../../../core/Context/preact/useCoreContext.js";
 function x({
   ["aria-label"]: t,
   activeTab: d,
   tabs: r,
   onChange: s
 }) {
-  const { activeIndex: o, onClick: p, onKeyDown: c, refs: m, uniqueId: a } = u({ onChange: s, options: r, activeOption: d }), { i18n: b } = h();
+  const { activeIndex: o, onClick: p, onKeyDown: c, refs: m, uniqueId: a } = h({ onChange: s, options: r, activeOption: d }), { i18n: b } = f();
   return /* @__PURE__ */ i("div", { children: [
     /* @__PURE__ */ i("div", { className: "adyen-pe-tabs", role: "tablist", "aria-orientation": "horizontal", "aria-label": t, children: r.map((e, n) => {
       const l = o === n;
@@ -28,7 +28,7 @@ function x({
           onKeyDown: c,
           disabled: e.disabled,
           tabIndex: l ? 0 : -1,
-          children: /* @__PURE__ */ i(f, { el: $.SPAN, variant: y.BODY, className: "adyen-pe-tabs__tab-label", stronger: !0, children: b.get(e.label) })
+          children: /* @__PURE__ */ i(u, { el: $.SPAN, variant: y.BODY, className: "adyen-pe-tabs__tab-label", stronger: !0, children: b.get(e.label) })
         },
         `tab:${a}-${e.id}`
       );

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

@@ -2,7 +2,7 @@ import { jsx as c } from "../../../external/.pnpm/preact@10.28.2/node_modules/pr
 import { useState as I, useRef as _, useMemo as r, useCallback as g } from "../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
 import { TimelineContext as C } from "./context.js";
 /* empty css              */
-function j({ children: o, showMore: t = null, timeGapLimit: a = null }) {
+function R({ children: o, showMore: t = null, timeGapLimit: a = null }) {
   const [n, u] = I([]), [l, y] = I(!1), v = _(0), m = r(() => t && n.length > t.limit ? n.length - t.limit : null, [t, n.length]), f = r(() => {
     if (!t || !n.length)
       return null;
@@ -51,5 +51,5 @@ function j({ children: o, showMore: t = null, timeGapLimit: a = null }) {
   return /* @__PURE__ */ c(C.Provider, { value: b, children: /* @__PURE__ */ c("div", { className: "adyen-pe-timeline", children: /* @__PURE__ */ c("ol", { className: "adyen-pe-timeline__items", children: o }) }) });
 }
 export {
-  j as default
+  R as default
 };

package/dist/es/components/internal/Timeline/components/TimelineItem.js

@@ -9,18 +9,18 @@ import { TypographyVariant as _, TypographyElement as h } from "../../Typography
 import { Tag as j } from "../../Tag/Tag.js";
 import K from "../../StructuredList/StructuredList.js";
 /* empty css                  */
-import F from "../../../../core/Context/useCoreContext.js";
-import { useUniqueId as H } from "../../../../hooks/useUniqueId.js";
+import F from "../../../../hooks/useUniqueId.js";
+import H from "../../../../core/Context/preact/useCoreContext.js";
 import { Icon as J } from "../../Icon/Icon.js";
 import Q from "../../Button/Button.js";
 const W = {
   day: "common.timeline.timelineItem.timeGap.unit.day"
 };
 function pe({ dataList: y = null, description: r = null, status: f = "black", tag: I, timestamp: i, title: o = null, children: N }) {
-  const { i18n: a } = F(), g = R(U);
+  const { i18n: a } = H(), g = R(U);
   if (!g)
     throw new Error("TimelineItem must be used within a Timeline component");
-  const { registerTimelineEntry: T, entries: l, showAll: x, showMoreIndex: C, hiddenItems: w, visibleIndexes: m, timeGapLimit: s, toggleShowAll: D } = g, b = M(H());
+  const { registerTimelineEntry: T, entries: l, showAll: x, showMoreIndex: C, hiddenItems: w, visibleIndexes: m, timeGapLimit: s, toggleShowAll: D } = g, b = M(F());
   P(() => {
     const t = {
       title: o || void 0,