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

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

@@ -3,22 +3,22 @@ import { DEFAULT_PAGE_LIMIT as l } from "../constants.js";
 import { getClampedPageLimit as a } from "../utils.js";
 import { mid as d } from "../../../../utils/value/number.js";
 import { isNumber as p } from "../../../../utils/value/is.js";
-const h = (i, o) => {
-  const n = i.length - 1;
+const h = (r, o) => {
+  const n = r.length - 1;
   if (n < 0) return o;
-  if (o <= i[0]) return i[0];
-  if (o >= i[n]) return i[n];
-  let r = 0, c = 0, s = n;
+  if (o <= r[0]) return r[0];
+  if (o >= r[n]) return r[n];
+  let i = 0, c = 0, s = n;
   for (; ; ) {
-    const e = i[r = d(c, s)];
+    const e = r[i = d(c, s)];
     if (c > s || o === e) return e;
-    o > e ? c = r + 1 : s = r - 1;
+    o > e ? c = i + 1 : s = i - 1;
   }
 }, q = ({
-  preferredLimit: i = l,
+  preferredLimit: r = l,
   preferredLimitOptions: o
 }) => {
-  const n = f(), r = f(), c = m(() => {
+  const n = f(), i = f(), c = m(() => {
     try {
       const e = /* @__PURE__ */ new Set();
       for (const t of o) {
@@ -30,30 +30,29 @@ const h = (i, o) => {
     }
   }, [o]);
   return { limit: m(() => {
-    let e = a(i) || l;
-    e: try {
-      if (n.current === c) break e;
+    let e = a(r) || l;
+    t: try {
       const t = new Set(n.current = c);
       if (t.size === 0) {
         n.current = void 0;
-        break e;
+        break t;
       }
-      if (r.current !== e)
-        t: {
+      if (i.current !== e)
+        e: {
           if (t.size === t.add(e).size)
-            break t;
-          if (t.delete(e), t.size === t.add(r.current).size) {
-            if (p(r.current)) {
-              e = r.current;
-              break t;
+            break e;
+          if (t.delete(e), t.size === t.add(i.current).size) {
+            if (p(i.current)) {
+              e = i.current;
+              break e;
             }
-          } else t.delete(r.current);
+          } else t.delete(i.current);
           e = h(n.current, e);
         }
     } catch {
     }
-    return r.current = e;
-  }, [c, i]), limitOptions: c };
+    return i.current = e;
+  }, [c, r]), limitOptions: c };
 };
 export {
   q as default,

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

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

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

@@ -0,0 +1,68 @@
+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 { 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 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,
+  items: c,
+  activeValue: n,
+  onValueChange: l,
+  loading: p,
+  onContentVisibilityChange: m,
+  renderContent: v,
+  contentVisible: t,
+  renderLoadingContent: _
+}) => {
+  const a = h(b.down.xs), N = f(
+    (r) => {
+      l(r), a && m(!0);
+    },
+    [a, l, m]
+  );
+  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("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,
+        {
+          "aria-selected": r.value === n,
+          className: d("adyen-pe-secondary-nav__item", {
+            "adyen-pe-secondary-nav__item--active": r.value === n,
+            "adyen-pe-secondary-nav__item--mobile": a
+          }),
+          iconRight: a ? /* @__PURE__ */ e(w, { name: "chevron-right" }) : void 0,
+          onClick: N.bind(null, r),
+          children: /* @__PURE__ */ e(
+            k,
+            {
+              variant: g.BODY,
+              stronger: !0,
+              "data-testid": "typography",
+              className: "adyen-pe-secondary-nav__item-label",
+              children: r.label
+            }
+          )
+        }
+      ) }, r.label)) })
+    ] }),
+    !a && /* @__PURE__ */ e(y, { variant: "vertical" }),
+    t && n && v(n)
+  ] }) });
+};
+export {
+  I as SecondaryNav
+};

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

@@ -0,0 +1,36 @@
+import { jsx as e } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { forwardRef as i } from "../../../external/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 { 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(
+  "li",
+  {
+    className: m("adyen-pe-step__item", {
+      "adyen-pe-step--active": a,
+      "adyen-pe-step--completed": p,
+      "adyen-pe-step--disabled": t
+    }),
+    children: /* @__PURE__ */ e(
+      "button",
+      {
+        "aria-disabled": t,
+        "aria-current": a ? "step" : void 0,
+        tabIndex: a ? 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 })
+        ]
+      }
+    )
+  }
+));
+export {
+  g as Step
+};

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

@@ -0,0 +1,100 @@
+import { jsx as y } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useState as O, useRef as d, useMemo as F, useEffect as K, useCallback as s } from "../../../external/preact/hooks/dist/hooks.module.js";
+import M from "classnames";
+import { InteractionKeyCode as c } from "../../types.js";
+import { Step as P } from "./Step.js";
+/* empty css             */
+const v = ({ activeIndex: r, onChange: i, variant: h = "vertical", children: n, nextStepDisabled: k, ariaLabel: N }) => {
+  const [l, T] = O(r), W = d(null), f = d([]), [p, m] = O(r), S = F(() => (Array.isArray(n) ? n : [n]).filter(Boolean), [n]), A = S.length, a = h === "horizontal";
+  K(() => {
+    r > l && T(r);
+    const e = f.current[r];
+    e && e.scrollIntoView({
+      block: "nearest",
+      inline: "nearest",
+      behavior: "smooth"
+    });
+  }, [r, l]);
+  const o = s(
+    (e) => k && e > l ? !1 : e <= l + 1,
+    [l, k]
+  ), w = s(
+    (e) => {
+      o(e) && (m(e), i(e));
+    },
+    [o, i]
+  ), u = s((e) => {
+    m(e);
+    const t = f.current[e];
+    t && t.focus();
+  }, []), R = s(() => {
+    const e = Math.min(p + 1, A - 1);
+    o(e) && u(e);
+  }, [o, u, p, A]), b = s(() => {
+    const e = Math.max(p - 1, 0);
+    u(e);
+  }, [u, p]), E = s(() => {
+    const e = document.activeElement, t = f.current.indexOf(e);
+    t !== -1 && o(t) && i(t);
+  }, [o, i]), z = s(
+    (e) => {
+      switch (e.code) {
+        case c.ARROW_RIGHT:
+          a && (e.preventDefault(), R());
+          break;
+        case c.ARROW_LEFT:
+          a && (e.preventDefault(), b());
+          break;
+        case c.ARROW_DOWN:
+          a || (e.preventDefault(), R());
+          break;
+        case c.ARROW_UP:
+          a || (e.preventDefault(), b());
+          break;
+        case c.TAB:
+          m(r);
+          break;
+        case c.ENTER:
+        case c.SPACE:
+          e.preventDefault(), E();
+          break;
+      }
+    },
+    [a, r, E, R, b]
+  );
+  return /* @__PURE__ */ y("div", { className: "adyen-pe-stepper", children: /* @__PURE__ */ y(
+    "ol",
+    {
+      "aria-label": N,
+      ref: W,
+      role: "toolbar",
+      "aria-orientation": h,
+      className: M("adyen-pe-stepper__list", {
+        "adyen-pe-stepper__list--horizontal": a
+      }),
+      onKeyDown: z,
+      children: S.map((e, t) => {
+        var _;
+        return /* @__PURE__ */ y(
+          P,
+          {
+            totalSteps: A,
+            index: t,
+            active: t === r,
+            completed: t < r,
+            disabled: !o(t),
+            onClick: () => w(t),
+            ref: (D) => {
+              D && (f.current[t] = D);
+            },
+            children: ((_ = e.props) == null ? void 0 : _.children) || e
+          },
+          t
+        );
+      })
+    }
+  ) });
+};
+export {
+  v as Stepper
+};

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

@@ -0,0 +1,34 @@
+import { jsx as o } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useCallback as s } from "../../../external/preact/hooks/dist/hooks.module.js";
+import { StoreSelectorButtonContent as a } from "./StoreSelectorButton/StoreSelectorButton.js";
+import { StoreSelectorItem as c } from "./StoreSelectorItem/StoreSelectorItem.js";
+import { useResponsiveContainer as p, containerQueries as u } from "../../../hooks/useResponsiveContainer.js";
+/* empty css                   */
+import f from "../FormFields/Select/Select.js";
+const v = ({ stores: t = [], selectedStoreId: n, setSelectedStoreId: r }) => {
+  const i = p(u.down.xs), l = s(
+    ({ target: e }) => {
+      r(e.value);
+    },
+    [r]
+  ), m = (e) => e.item ? /* @__PURE__ */ o(a, { name: e.item.storeCode, description: e.item.description }) : null;
+  return !t || !t.length || t.length === 1 ? null : /* @__PURE__ */ o(
+    f,
+    {
+      className: "adyen-pe-dropdown__store",
+      filterable: !1,
+      items: t,
+      multiSelect: !1,
+      onChange: l,
+      renderButtonContent: m,
+      renderListItem: (e) => /* @__PURE__ */ o(c, { name: e.item.name, description: e.item.description }),
+      selected: n,
+      setToTargetWidth: i,
+      showOverlay: !1,
+      withoutCollapseIndicator: !0
+    }
+  );
+};
+export {
+  v as StoreSelector
+};

package/dist/es/components/internal/StoreSelector/StoreSelectorButton/StoreSelectorButton.js

@@ -0,0 +1,15 @@
+import { jsx as e } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import o from "../../Typography/Typography.js";
+import { TypographyVariant as t, TypographyElement as r } from "../../Typography/types.js";
+/* empty css                         */
+import { Icon as s } from "../../Icon/Icon.js";
+const d = ({ name: n, description: a }) => /* @__PURE__ */ e("div", { className: "adyen-pe-store-selector-button", children: [
+  /* @__PURE__ */ e("div", { className: "adyen-pe-store-selector-button__labels", children: [
+    /* @__PURE__ */ e(o, { el: r.SPAN, variant: t.BODY, className: "adyen-pe-store-selector-button__name", children: n }),
+    /* @__PURE__ */ e(o, { el: r.SPAN, variant: t.CAPTION, className: "adyen-pe-store-selector-button__description", children: a })
+  ] }),
+  /* @__PURE__ */ e(s, { name: "chevron-up-down", size: "medium", className: "adyen-pe-store-selector-button__icon" })
+] });
+export {
+  d as StoreSelectorButtonContent
+};

package/dist/es/components/internal/StoreSelector/StoreSelectorItem/StoreSelectorItem.js

@@ -0,0 +1,11 @@
+import { jsx as e } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import r from "../../Typography/Typography.js";
+import { TypographyVariant as t, TypographyElement as o } from "../../Typography/types.js";
+/* empty css                       */
+const n = ({ name: a, description: i }) => /* @__PURE__ */ e("div", { className: "adyen-pe-store-selector-item", children: [
+  /* @__PURE__ */ e(r, { el: o.SPAN, variant: t.BODY, className: "adyen-pe-store-selector-item__name", children: a }),
+  /* @__PURE__ */ e(r, { el: o.SPAN, variant: t.CAPTION, className: "adyen-pe-store-selector-item__description", children: i })
+] });
+export {
+  n as StoreSelectorItem
+};

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

@@ -1,40 +1,41 @@
 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 L from "classnames";
+import { useMemo as E } from "../../../external/preact/hooks/dist/hooks.module.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";
+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";
 /* empty css                    */
-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: o = v,
-  grid: c = !0,
-  classNames: n,
-  align: p = "end"
+import { useStructuredListItems as b } from "./useStructuredListItem.js";
+const g = "6-6";
+function k({
+  ["aria-label"]: n,
+  items: p,
+  highlightable: c,
+  renderValue: S,
+  renderLabel: t,
+  layout: o = g,
+  grid: A = !0,
+  classNames: i,
+  align: u = "end",
+  condensed: _ = !0
 }) {
-  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(
+  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(
     "div",
     {
       "data-testid": r.label,
-      className: t(E, {
-        [I]: i,
-        [_]: c
+      className: L(N, {
+        [y]: c,
+        [d]: A
       }),
       children: [
-        /* @__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 }) })
+        /* @__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 }) })
       ]
     },
-    `${u}_${r.id || "0"}`
+    `${T}_${r.id || "0"}`
   )) });
 }
 export {
-  M as default
+  k as default
 };

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

@@ -1,10 +1,11 @@
-const _ = "adyen-pe-structured-list", L = `${_}--align-end`, S = `${_}__item`, t = `${_}__grid`, n = `${_}__content`, s = `${_}__label`, c = `${S}--has-highlight`;
+const _ = "adyen-pe-structured-list", L = `${_}--align-end`, t = `${_}--expanded`, S = `${_}__item`, n = `${_}__grid`, s = `${_}__content`, A = `${_}__label`, c = `${S}--has-highlight`;
 export {
   L as SL_ALIGN_END,
   _ as SL_BASE_CLASS,
-  n as SL_CONTENT_CLASS,
-  t as SL_GRID_CLASS,
+  s as SL_CONTENT_CLASS,
+  t as SL_EXPANDED_CLASS,
+  n as SL_GRID_CLASS,
   S as SL_ITEM_CLASS,
   c as SL_ITEM_WITH_HIGHLIGHT_CLASS,
-  s as SL_LABEL_CLASS
+  A as SL_LABEL_CLASS
 };

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

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

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

@@ -0,0 +1,55 @@
+import { jsx as c } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useState as I, useRef as _, useMemo as r, useCallback as g } from "../../../external/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 }) {
+  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;
+    const e = Array.from(n.keys());
+    if (t.placement === "before-last") {
+      const i = e[e.length - 1];
+      return i === void 0 ? e.slice(0, t.limit) : [...e.slice(0, t.limit - 1), i];
+    }
+    if (t.placement === "after-first") {
+      const i = e[0];
+      return i === void 0 ? e.slice(0, t.limit) : [i, ...e.slice(-(t.limit - 1))];
+    }
+    return e.slice(0, t.limit);
+  }, [n, t]), d = r(() => {
+    if (!t)
+      return null;
+    switch (t.placement) {
+      case "before-last":
+        return t.limit - 2;
+      case "after-first":
+        return 0;
+      case "bottom":
+      default:
+        return t.limit - 1;
+    }
+  }, [t]), p = g((e) => {
+    const i = v.current++, A = { ...e, _id: i };
+    return u((s) => [...s, A]), () => {
+      u((s) => s.filter((T) => T._id !== i));
+    };
+  }, []), x = g(() => {
+    y(!l);
+  }, [l]), b = r(
+    () => ({
+      registerTimelineEntry: p,
+      entries: n,
+      showAll: l,
+      showMoreIndex: d,
+      hiddenItems: m,
+      visibleIndexes: f,
+      timeGapLimit: a,
+      toggleShowAll: x
+    }),
+    [p, n, l, d, m, f, a, x]
+  );
+  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
+};

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

@@ -0,0 +1,83 @@
+import { jsx as c } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useMemo as d } from "../../../../external/preact/hooks/dist/hooks.module.js";
+import { TimelineDateFormat as e } from "../types.js";
+import T from "../../../../hooks/useTimezoneAwareDateFormatting.js";
+import { Fragment as h } from "../../../../external/preact/dist/preact.module.js";
+function g(t) {
+  switch (t) {
+    case e.FULL_DATE:
+      return {
+        year: "numeric",
+        month: "short",
+        day: "numeric"
+      };
+    case e.FULL_DATE_EXACT_TIME:
+    case e.FULL_DATE_EXACT_TIME_WITHOUT_PERIOD:
+      return {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+        hour12: !1
+      };
+    case e.FULL_DATE_EXACT_TIME_WITHOUT_SECONDS:
+      return {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: !1
+      };
+    case e.SHORT_DATE:
+      return {
+        year: "numeric",
+        month: "2-digit",
+        day: "2-digit"
+      };
+    case e.SHORT_DATE_TIME:
+      return {
+        year: "numeric",
+        month: "2-digit",
+        day: "2-digit",
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: !1
+      };
+    default:
+      return {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+        hour12: !1
+      };
+  }
+}
+function p({ date: t, format: r, timezone: a }) {
+  const { dateFormat: n } = T(a), u = d(() => {
+    const o = g(r);
+    return n(t, o);
+  }, [t, n, r]);
+  return /* @__PURE__ */ c(h, { children: u });
+}
+function L(t, r, a) {
+  const n = t.getTime(), u = r.getTime(), o = Math.abs(n - u), s = 1e3 * 60 * 60 * 24;
+  let i, m;
+  switch (a.unit) {
+    case "day":
+      i = o / s, m = "day";
+      break;
+    default:
+      i = o / s, m = "day";
+  }
+  return i = Math.round(i), { value: i, unit: m };
+}
+export {
+  p as DateText,
+  L as formatDistanceStrict
+};