@adyen/adyen-platform-experience-web 1.10.0 → 1.10.1

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

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

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

@@ -1,33 +1,36 @@
-const x = /* @__PURE__ */ (() => {
-  let t = [];
-  const s = (e) => {
-    const n = e.reduce((o, i) => {
-      const c = i instanceof Node ? t.findIndex((u) => {
-        const g = u.element.getAttribute("id"), b = i && (i != null && i.getAttribute) ? i == null ? void 0 : i.getAttribute("id") : null;
-        return g === b;
+import { CONTROL_ELEMENT_PROPERTY as g } from "../../../../hooks/element/useClickOutside.js";
+const A = /* @__PURE__ */ (() => {
+  let e = [];
+  const s = (t) => {
+    if (t.some(
+      (l) => l instanceof Element && e.some((c) => {
+        const i = c.element[g];
+        return i instanceof Element && i.contains(l);
+      })
+    )) return;
+    const n = t.reduce((l, c) => {
+      const i = c instanceof Node ? e.findIndex((f) => {
+        const m = f.element.getAttribute("id"), p = c && c?.getAttribute ? c?.getAttribute("id") : null;
+        return m === p;
       }) : -1;
-      return o === -1 && c !== -1 ? c : o;
+      return l === -1 && i !== -1 ? i : l;
     }, -1);
-    n === -1 ? l(0) : n + 1 <= t.length - 1 && l(n + 1);
-  }, d = (e) => {
-    const n = t.findIndex((o) => o.element.getAttribute("id") === e.getAttribute("id"));
-    n >= 0 && t.splice(n, 1);
-  }, r = (e, n) => {
-    t.findIndex((i) => i.element.getAttribute("id") === e.getAttribute("id")) >= 0 || t.push({ element: e, callback: n });
-  }, l = (e) => {
-    var o, i;
-    const n = t.length;
-    for (let c = e; c < n; c++)
-      (i = (o = t == null ? void 0 : t[c]) == null ? void 0 : o.callback) == null || i.call(o);
-    t.splice(e);
+    n === -1 ? r(0) : n + 1 <= e.length - 1 && r(n + 1);
+  }, d = (t) => {
+    const o = e.findIndex((n) => n.element.getAttribute("id") === t.getAttribute("id"));
+    o >= 0 && e.splice(o, 1);
+  }, u = (t, o) => {
+    e.findIndex((l) => l.element.getAttribute("id") === t.getAttribute("id")) >= 0 || e.push({ element: t, callback: o });
+  }, r = (t) => {
+    const o = e.length;
+    for (let n = t; n < o; n++)
+      e?.[n]?.callback?.();
+    e.splice(t);
   };
-  return { add: r, remove: d, closeAll: () => {
-    t.forEach((e) => {
-      var n;
-      return (n = e == null ? void 0 : e.callback) == null ? void 0 : n.call(e);
-    }), t = [];
+  return { add: u, remove: d, closeAll: () => {
+    e.forEach((t) => t?.callback?.()), e = [];
   }, closePopoversOutsideOfClick: s };
 })();
 export {
-  x as popoverUtil
+  A as popoverUtil
 };

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

@@ -1,34 +1,33 @@
-import { struct as c, structFrom as d } from "../../../../utils/struct/main.js";
-import { enumerable as s } from "../../../../utils/struct/property.js";
-import { isUndefined as u } from "../../../../utils/value/is.js";
-const g = (() => {
-  const t = /* @__PURE__ */ new WeakMap(), n = c({
-    remove: s(function() {
+import { struct as m, structFrom as u } from "../../../../utils/struct/main.js";
+import { enumerable as o } from "../../../../utils/struct/property.js";
+import { isUndefined as d } from "../../../../utils/value/is.js";
+const h = (() => {
+  const r = /* @__PURE__ */ new WeakMap(), n = m({
+    remove: o(function() {
       v(this.observerCallback);
     })
-  }), i = (e, r) => {
-    let o = t.get(e);
-    if (u(o)) {
-      const f = new IntersectionObserver(
-        (m) => {
-          m.forEach((b) => {
-            e && e(b);
+  }), i = (e, s) => {
+    let t = r.get(e);
+    if (d(t)) {
+      const b = new IntersectionObserver(
+        (c) => {
+          c.forEach((f) => {
+            e && e(f);
           });
         },
-        { root: r ?? null, rootMargin: "", threshold: [1] }
+        { root: s ?? null, rootMargin: "", threshold: [1] }
       );
-      o = d(n, {
-        observerCallback: s(e),
-        observer: s(f)
-      }), t.set(e, o);
+      t = u(n, {
+        observerCallback: o(e),
+        observer: o(b)
+      }), r.set(e, t);
     }
-    return o;
+    return t;
   }, v = (e) => {
-    const r = t.get(e);
-    r == null || r.observer.disconnect(), t.delete(e);
+    r.get(e)?.observer.disconnect(), r.delete(e);
   };
   return i;
 })();
 export {
-  g as default
+  h as default
 };

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

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

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

@@ -1,43 +1,43 @@
 import { jsx as e } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 /* empty css                  */
 import d from "classnames";
-import { Divider as y } from "../Divider/Divider.js";
+import { Divider as t } from "../Divider/Divider.js";
 import { useResponsiveContainer as h, containerQueries as b } from "../../../hooks/useResponsiveContainer.js";
-import { useCallback as f } from "../../../external/preact/hooks/dist/hooks.module.js";
-import u from "../Button/Button.js";
+import { useCallback as u } from "../../../external/preact/hooks/dist/hooks.module.js";
+import f from "../Button/Button.js";
 import k from "../Typography/Typography.js";
 import { TypographyVariant as g } from "../Typography/types.js";
 import { Icon as w } from "../Icon/Icon.js";
-const i = ({ rowNumber: o, className: s }) => /* @__PURE__ */ e("div", { className: d("adyen-pe-secondary-nav__skeleton", s), children: [...Array(o)].map((c, n) => /* @__PURE__ */ e("div", { className: "adyen-pe-secondary-nav__skeleton-item" }, n)) }), I = ({
-  renderHeader: o,
-  className: s,
+const i = ({ rowNumber: s, className: o }) => /* @__PURE__ */ e("div", { className: d("adyen-pe-secondary-nav__skeleton", o), children: [...Array(s)].map((c, n) => /* @__PURE__ */ e("div", { className: "adyen-pe-secondary-nav__skeleton-item" }, n)) }), I = ({
+  renderHeader: s,
+  className: o,
   items: c,
   activeValue: n,
   onValueChange: l,
   loading: p,
-  onContentVisibilityChange: m,
+  onContentVisibilityChange: y,
   renderContent: v,
-  contentVisible: t,
+  contentVisible: m,
   renderLoadingContent: _
 }) => {
-  const a = h(b.down.xs), N = f(
+  const a = h(b.down.xs), N = u(
     (r) => {
-      l(r), a && m(!0);
+      l(r), a && y(!0);
     },
-    [a, l, m]
+    [a, l, y]
   );
   return p ? a ? /* @__PURE__ */ e(i, { rowNumber: 3, className: "adyen-pe-secondary-nav__skeleton--content" }) : /* @__PURE__ */ e("div", { className: d("adyen-pe-secondary-nav"), children: /* @__PURE__ */ e("div", { className: "adyen-pe-secondary-nav__container", children: [
     /* @__PURE__ */ e("div", { className: "adyen-pe-secondary-nav__skeleton--aside", children: [
       /* @__PURE__ */ e(i, { rowNumber: 1 }),
       /* @__PURE__ */ e("div", { className: "adyen-pe-secondary-nav__list", children: /* @__PURE__ */ e(i, { rowNumber: 2 }) })
     ] }),
-    /* @__PURE__ */ e(y, { variant: "vertical" }),
+    /* @__PURE__ */ e(t, { variant: "vertical" }),
     /* @__PURE__ */ e("div", { className: "adyen-pe-secondary-nav__loading-content", children: _(n) })
-  ] }) }) : /* @__PURE__ */ e("div", { className: d("adyen-pe-secondary-nav", s, { "adyen-pe-secondary-nav--mobile": a }), children: /* @__PURE__ */ e("div", { className: d("adyen-pe-secondary-nav__container", { "adyen-pe-secondary-nav__container-mobile": a }), children: [
-    (!t || !a) && /* @__PURE__ */ e("aside", { className: d("adyen-pe-secondary-nav--sidebar", { "adyen-pe-secondary-nav--sidebar-mobile": a }), children: [
-      o(),
-      /* @__PURE__ */ e("ul", { className: "adyen-pe-secondary-nav__list", children: c.map((r) => /* @__PURE__ */ e("li", { className: "adyen-pe-secondary-nav__list-item", children: /* @__PURE__ */ e(
-        u,
+  ] }) }) : /* @__PURE__ */ e("div", { className: d("adyen-pe-secondary-nav", o, { "adyen-pe-secondary-nav--mobile": a }), children: /* @__PURE__ */ e("div", { className: d("adyen-pe-secondary-nav__container", { "adyen-pe-secondary-nav__container-mobile": a }), children: [
+    (!m || !a) && /* @__PURE__ */ e("aside", { className: d("adyen-pe-secondary-nav--sidebar", { "adyen-pe-secondary-nav--sidebar-mobile": a }), children: [
+      s(),
+      /* @__PURE__ */ e("ul", { className: d("adyen-pe-secondary-nav__list", "adyen-pe-secondary-nav__menu-list"), children: c.map((r) => /* @__PURE__ */ e("li", { className: "adyen-pe-secondary-nav__list-item", children: /* @__PURE__ */ e(
+        f,
         {
           "aria-selected": r.value === n,
           className: d("adyen-pe-secondary-nav__item", {
@@ -59,8 +59,8 @@ const i = ({ rowNumber: o, className: s }) => /* @__PURE__ */ e("div", { classNa
         }
       ) }, r.label)) })
     ] }),
-    !a && /* @__PURE__ */ e(y, { variant: "vertical" }),
-    t && n && v(n)
+    !a && /* @__PURE__ */ e(t, { variant: "vertical" }),
+    m && n && v(n)
   ] }) });
 };
 export {

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 a from "classnames";
 import { memo as l } from "../../../external/preact/compat/dist/compat.module.js";
 /* empty css               */
 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: [
+import { STATUS_BOX_CLASS as O, STATUS_BOX_DATA_TAGS as e, STATUS_BOX_DATA_AMOUNT as o, STATUS_BOX_DATA_PAY_METHOD as d, 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 n } from "./constants.js";
+const t = ({ tag: T, amount: s, paymentMethod: r, paymentMethodType: _, date: i, formattedDate: m, classNames: S }) => /* @__PURE__ */ A("div", { className: O, children: [
+  T && /* @__PURE__ */ A("div", { className: e, children: T }),
+  s && /* @__PURE__ */ A("div", { className: a(o, S?.amount), children: s }),
+  _ && /* @__PURE__ */ A("div", { className: d, children: [
     /* @__PURE__ */ A("div", { className: B, children: /* @__PURE__ */ A(c, { className: D, name: _, alt: _, folder: "logos/" }) }),
-    /* @__PURE__ */ A("div", { className: n, children: O })
+    /* @__PURE__ */ A("div", { className: N, children: r })
   ] }),
-  S && m && /* @__PURE__ */ A("div", { className: t, children: /* @__PURE__ */ A("time", { dateTime: S, children: m }) })
-] }), L = l(U);
+  i && m && /* @__PURE__ */ A("div", { className: n, children: /* @__PURE__ */ A("time", { dateTime: i, children: m }) })
+] }), L = l(t);
 export {
   L as default
 };

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

@@ -1,9 +1,6 @@
-import { parsePaymentMethodType as o } from "../../external/TransactionsOverview/components/utils.js";
-const p = (e) => e != null && e.paymentMethod ? e.paymentMethod.type : e != null && e.bankAccount ? "bankTransfer" : null, y = (e) => {
-  var n;
-  return e != null && e.paymentMethod ? o(e.paymentMethod, "detail") : (n = e == null ? void 0 : e.bankAccount) == null ? void 0 : n.accountNumberLastFourDigits;
-};
+import { parsePaymentMethodType as t } from "../../external/TransactionsOverview/components/utils.js";
+const o = (e) => e?.paymentMethod ? e.paymentMethod.type : e?.bankAccount ? "bankTransfer" : null, r = (e) => e?.paymentMethod ? t(e.paymentMethod, "detail") : e?.bankAccount?.accountNumberLastFourDigits;
 export {
-  y as getDisplayablePaymentMethod,
-  p as getPaymentMethodType
+  r as getDisplayablePaymentMethod,
+  o as getPaymentMethodType
 };