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

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

@@ -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 t } from "../Divider/Divider.js";
+import { useResponsiveContainer as h, containerQueries as b } from "../../../hooks/useResponsiveContainer.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: 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: y,
+  renderContent: v,
+  contentVisible: m,
+  renderLoadingContent: _
+}) => {
+  const a = h(b.down.xs), N = u(
+    (r) => {
+      l(r), a && y(!0);
+    },
+    [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(t, { variant: "vertical" }),
+    /* @__PURE__ */ e("div", { className: "adyen-pe-secondary-nav__loading-content", children: _(n) })
+  ] }) }) : /* @__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", {
+            "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(t, { variant: "vertical" }),
+    m && n && v(n)
+  ] }) });
+};
+export {
+  I as SecondaryNav
+};

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
 };

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,97 @@
+import { jsx as y } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useState as D, useRef as O, useMemo as z, useEffect as F, useCallback as s } from "../../../external/preact/hooks/dist/hooks.module.js";
+import K from "classnames";
+import { InteractionKeyCode as c } from "../../types.js";
+import { Step as M } from "./Step.js";
+/* empty css             */
+const q = ({ activeIndex: r, onChange: i, variant: h = "vertical", children: n, nextStepDisabled: k, ariaLabel: d }) => {
+  const [l, N] = D(r), T = O(null), f = O([]), [p, m] = D(r), S = z(() => (Array.isArray(n) ? n : [n]).filter(Boolean), [n]), A = S.length, a = h === "horizontal";
+  F(() => {
+    r > l && N(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]), w = 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": d,
+      ref: T,
+      role: "toolbar",
+      "aria-orientation": h,
+      className: K("adyen-pe-stepper__list", {
+        "adyen-pe-stepper__list--horizontal": a
+      }),
+      onKeyDown: w,
+      children: S.map((e, t) => /* @__PURE__ */ y(
+        M,
+        {
+          totalSteps: A,
+          index: t,
+          active: t === r,
+          completed: t < r,
+          disabled: !o(t),
+          onClick: () => W(t),
+          ref: (_) => {
+            _ && (f.current[t] = _);
+          },
+          children: e.props?.children || e
+        },
+        t
+      ))
+    }
+  ) });
+};
+export {
+  q 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
+};