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

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

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

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

@@ -1,20 +1,20 @@
 import { jsx as o } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { ButtonVariant as n } from "../../Button/types.js";
+import { ButtonVariant as s } from "../../Button/types.js";
 /* empty css                          */
-import r from "../../../../core/Context/useCoreContext.js";
-import { memo as s } from "../../../../external/preact/compat/dist/compat.module.js";
+import n from "../../../../core/Context/useCoreContext.js";
+import { memo as r } from "../../../../external/preact/compat/dist/compat.module.js";
 import l from "../../Button/Button.js";
 import { Fragment as m } from "../../../../external/preact/dist/preact.module.js";
-function a({ image: t = !0, onClick: e }) {
-  const { i18n: i } = r();
+function a({ image: t = !0, onClick: i }) {
+  const { i18n: e } = n();
   return /* @__PURE__ */ o(m, { children: /* @__PURE__ */ o(
     l,
     {
       className: t ? "adyen-pe-popover-dismiss-button--on-image" : "",
       iconButton: !0,
-      variant: n.TERTIARY,
-      onClick: e,
-      "aria-label": i.get("closeIconLabel"),
+      variant: s.TERTIARY,
+      onClick: i,
+      "aria-label": e.get("common.actions.dismiss.labels.close"),
       children: /* @__PURE__ */ o("svg", { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none", children: [
         /* @__PURE__ */ o("title", { children: "dismiss" }),
         /* @__PURE__ */ o(
@@ -30,7 +30,7 @@ function a({ image: t = !0, onClick: e }) {
     }
   ) });
 }
-const L = s(a);
+const v = r(a);
 export {
-  L as default
+  v as default
 };

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

@@ -2,54 +2,54 @@ import { jsx as e } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.m
 import { useMemo as u } from "../../../external/preact/hooks/dist/hooks.module.js";
 import _ from "classnames";
 /* empty css                 */
-import m from "../Typography/Typography.js";
-import { TypographyVariant as o, TypographyElement as p } from "../Typography/types.js";
+import o from "../Typography/Typography.js";
+import { TypographyVariant as m, TypographyElement as p } from "../Typography/types.js";
 import { Tooltip as h } from "../Tooltip/Tooltip.js";
-import { clamp as N } from "../../../utils/value/number.js";
-const A = ({ max: a = 1, value: t, labels: r, tooltips: n, className: i }) => {
-  const c = u(() => N(0, t * 100 / a, 100), [t, a]), g = !!(r != null && r.current || r != null && r.max), y = (r == null ? void 0 : r.ariaLabel) ?? (r != null && r.current ? `${r.current}: ${t}` : `${t}/${a}`);
+import { clamp as s } from "../../../utils/value/number.js";
+const A = ({ max: c = 1, value: n, labels: r, tooltips: a, className: i }) => {
+  const t = u(() => s(0, n * 100 / c, 100), [n, c]), g = !!(r != null && r.current || r != null && r.max), y = (r == null ? void 0 : r.ariaLabel) ?? (r != null && r.current ? `${r.current}: ${n}` : `${n}/${c}`);
   return /* @__PURE__ */ e(
     "div",
     {
       role: "progressbar",
-      "aria-valuenow": t,
+      "aria-valuenow": n,
       "aria-valuemin": 0,
-      "aria-valuemax": a,
-      "aria-valuetext": `${c}%`,
+      "aria-valuemax": c,
+      "aria-valuetext": `${t}%`,
       "aria-label": y,
       className: _("adyen-pe-progress-bar", i),
       children: [
-        /* @__PURE__ */ e("div", { className: "adyen-pe-progress-bar__track", children: [
+        /* @__PURE__ */ e("div", { className: "adyen-pe-progress-bar__track", role: "presentation", children: [
           /* @__PURE__ */ e("div", { className: "adyen-pe-progress-bar__track-background" }),
           /* @__PURE__ */ e(
             d,
             {
-              tooltipContent: n == null ? void 0 : n.progress,
+              tooltipContent: a == null ? void 0 : a.progress,
               title: r == null ? void 0 : r.current,
-              percentage: c,
+              percentage: t,
               className: "adyen-pe-progress-bar__track-fill"
             }
           ),
           /* @__PURE__ */ e(
             d,
             {
-              tooltipContent: n == null ? void 0 : n.remaining,
+              tooltipContent: a == null ? void 0 : a.remaining,
               title: r == null ? void 0 : r.max,
-              percentage: 100 - c,
+              percentage: 100 - t,
               className: "adyen-pe-progress-bar__track-remaining"
             }
           )
         ] }),
         g && /* @__PURE__ */ e("div", { className: "adyen-pe-progress-bar__legend", "aria-hidden": "true", children: [
-          r.current && /* @__PURE__ */ e(m, { el: p.SPAN, variant: o.CAPTION, className: "adyen-pe-progress-bar__legend-label", children: r.current }),
-          r.max && /* @__PURE__ */ e(m, { el: p.SPAN, variant: o.CAPTION, className: "adyen-pe-progress-bar__legend-label", children: r.max })
+          r.current && /* @__PURE__ */ e(o, { el: p.SPAN, variant: m.CAPTION, className: "adyen-pe-progress-bar__legend-label", children: r.current }),
+          r.max && /* @__PURE__ */ e(o, { el: p.SPAN, variant: m.CAPTION, className: "adyen-pe-progress-bar__legend-label", children: r.max })
         ] })
       ]
     }
   );
-}, d = ({ tooltipContent: a, title: t, percentage: r, className: n }) => {
-  const i = (c) => /* @__PURE__ */ e("div", { className: n, title: c, style: { width: `${r}%` } });
-  return a ? /* @__PURE__ */ e(h, { content: a, children: i() }) : i(t);
+}, d = ({ tooltipContent: c, title: n, percentage: r, className: a }) => {
+  const i = (t) => /* @__PURE__ */ e("div", { className: a, "aria-label": t, style: { width: `${r}%` } });
+  return c ? /* @__PURE__ */ e(h, { content: c, children: i(n) }) : i(n);
 };
 export {
   A as default

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

@@ -1,49 +1,54 @@
-import { jsx as o } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { TypographyVariant as g, TypographyElement as y } from "../Typography/types.js";
+import { jsx as a } from "../../../external/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";
 /* empty css                      */
-function T({ activeItem: i, items: t, onChange: l }) {
-  const { activeIndex: d, onClick: s, onKeyDown: c, refs: m, uniqueId: n } = $({ onChange: l, options: t, activeOption: i }), { i18n: p } = u();
-  return /* @__PURE__ */ o("div", { children: [
-    /* @__PURE__ */ o("div", { role: "radiogroup", className: "adyen-pe-segmented-control", children: t.map((e, r) => {
-      const a = d === r;
-      return /* @__PURE__ */ o(
+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();
+  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;
+      return /* @__PURE__ */ a(
         "button",
         {
           role: "radio",
           name: e.id,
-          ref: m[r],
+          ref: p[o],
           id: `item:${n}-${e.id}`,
           className: "adyen-pe-segmented-control__item",
-          "aria-checked": a,
+          "aria-checked": t,
           "aria-controls": `segment:${n}-${e.id}`,
-          onClick: a ? void 0 : s,
-          onKeyDown: c,
+          onClick: t ? void 0 : c,
+          onKeyDown: m,
           disabled: e.disabled,
-          tabIndex: a ? 0 : -1,
-          children: /* @__PURE__ */ o(
+          tabIndex: t ? 0 : -1,
+          children: /* @__PURE__ */ a(
             h,
             {
-              el: y.SPAN,
-              variant: g.BODY,
+              el: b.SPAN,
+              variant: y.BODY,
               className: "adyen-pe-segmented-control__item-label",
               stronger: !0,
-              children: p.get(e.label)
+              children: g.get(e.label)
             }
           )
         },
         `item:${n}-${e.id}`
       );
     }) }),
-    /* @__PURE__ */ o("div", { className: "adyen-pe-segmented-content-container", children: t.map((e, r) => /* @__PURE__ */ o(
-      "section",
+    /* @__PURE__ */ a("div", { className: "adyen-pe-segmented-content-container", children: r.map((e, o) => /* @__PURE__ */ a(
+      "div",
       {
         id: `segment:${n}-${e.id}`,
         className: "adyen-pe-segmented-content",
         "aria-labelledby": `item:${n}-${e.id}`,
-        hidden: d !== r,
+        hidden: d !== o,
         children: e.content
       },
       `segment:${n}-${e.id}`
@@ -51,5 +56,5 @@ function T({ activeItem: i, items: t, onChange: l }) {
   ] });
 }
 export {
-  T as default
+  _ as default
 };

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

@@ -1,18 +1,18 @@
 import { jsx as A } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import O from "classnames";
-import { memo as m } from "../../../external/preact/compat/dist/compat.module.js";
+import o from "classnames";
+import { memo as l } from "../../../external/preact/compat/dist/compat.module.js";
 /* empty css               */
-import { Image as l } from "../Image/Image.js";
-import { STATUS_BOX_CLASS as c, STATUS_BOX_DATA_TAGS as a, STATUS_BOX_DATA_AMOUNT as d, STATUS_BOX_DATA_PAY_METHOD as s, STATUS_BOX_DATA_PAY_METHOD_LOGO_CONTAINER as D, STATUS_BOX_DATA_PAY_METHOD_LOGO as e, STATUS_BOX_DATA_PAY_METHOD_DETAIL as B, STATUS_BOX_DATA_LABEL as t } from "./constants.js";
-const n = ({ tag: r, amount: S, paymentMethod: o, paymentMethodType: _, date: i, classNames: T }) => /* @__PURE__ */ A("div", { className: c, children: [
-  r && /* @__PURE__ */ A("div", { className: a, children: r }),
-  S && /* @__PURE__ */ A("div", { className: O(d, T == null ? void 0 : T.amount), children: S }),
-  _ && /* @__PURE__ */ A("div", { className: s, children: [
-    /* @__PURE__ */ A("div", { className: D, children: /* @__PURE__ */ A(l, { className: e, name: _, alt: _, folder: "logos/" }) }),
-    /* @__PURE__ */ A("div", { className: B, children: o })
+import { Image as c } from "../Image/Image.js";
+import { STATUS_BOX_CLASS as d, STATUS_BOX_DATA_TAGS as e, STATUS_BOX_DATA_AMOUNT as s, STATUS_BOX_DATA_PAY_METHOD as a, STATUS_BOX_DATA_PAY_METHOD_LOGO_CONTAINER as B, STATUS_BOX_DATA_PAY_METHOD_LOGO as D, STATUS_BOX_DATA_PAY_METHOD_DETAIL as n, STATUS_BOX_DATA_LABEL as t } from "./constants.js";
+const U = ({ tag: i, amount: r, paymentMethod: O, paymentMethodType: _, date: S, formattedDate: m, classNames: T }) => /* @__PURE__ */ A("div", { className: d, children: [
+  i && /* @__PURE__ */ A("div", { className: e, children: i }),
+  r && /* @__PURE__ */ A("div", { className: o(s, T == null ? void 0 : T.amount), children: r }),
+  _ && /* @__PURE__ */ A("div", { className: a, children: [
+    /* @__PURE__ */ A("div", { className: B, children: /* @__PURE__ */ A(c, { className: D, name: _, alt: _, folder: "logos/" }) }),
+    /* @__PURE__ */ A("div", { className: n, children: O })
   ] }),
-  i && /* @__PURE__ */ A("div", { className: t, children: i })
-] }), L = m(n);
+  S && m && /* @__PURE__ */ A("div", { className: t, children: /* @__PURE__ */ A("time", { dateTime: S, children: m }) })
+] }), L = l(U);
 export {
   L as default
 };

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

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

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

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