@adyen/adyen-platform-experience-web 1.5.0 → 1.6.0

package/dist/es/components/internal/FormFields/Select/components/SelectList.js

@@ -1,56 +1,58 @@
 import { jsx as o } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { useResponsiveContainer as R, containerQueries as x } from "../../../../../hooks/useResponsiveContainer.js";
-import b from "../../../Popover/Popover.js";
-import { PopoverContainerPosition as A, PopoverContainerVariant as g, PopoverContainerSize as h } from "../../../Popover/types.js";
-import F from "../../../../../core/Context/useCoreContext.js";
+import { useResponsiveContainer as R, containerQueries as b } from "../../../../../hooks/useResponsiveContainer.js";
+import g from "../../../Popover/PopoverContainer.js";
+import { PopoverContainerPosition as A, PopoverContainerVariant as h, PopoverContainerSize as F } from "../../../Popover/types.js";
+import W from "../../../../../core/Context/useCoreContext.js";
 import m from "classnames";
-import { memo as W } from "../../../../../external/preact/compat/dist/compat.module.js";
+import { memo as w } from "../../../../../external/preact/compat/dist/compat.module.js";
 import { useMemo as l } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import { DROPDOWN_LIST_CLASS as w, DROPDOWN_LIST_ACTIVE_CLASS as V, DROPDOWN_ELEMENT_CLASS as z, DROPDOWN_ELEMENT_NO_OPTION_CLASS as j } from "../constants.js";
-import y, { renderListItemDefault as B } from "./SelectListItem.js";
-import { fixedForwardRef as Q } from "../../../../../utils/preact/fixedForwardRef.js";
-import { isFunction as U } from "../../../../../utils/value/is.js";
-import { boolOrFalse as $ } from "../../../../../utils/value/bool.js";
-const k = Q(
+import { DROPDOWN_LIST_CLASS as V, DROPDOWN_LIST_ACTIVE_CLASS as z, DROPDOWN_ELEMENT_CLASS as j, DROPDOWN_ELEMENT_NO_OPTION_CLASS as y } from "../constants.js";
+import B, { renderListItemDefault as Q } from "./SelectListItem.js";
+import { fixedForwardRef as U } from "../../../../../utils/preact/fixedForwardRef.js";
+import { isFunction as $ } from "../../../../../utils/value/is.js";
+import { boolOrFalse as k } from "../../../../../utils/value/bool.js";
+const q = U(
   ({
     active: c,
     commitActions: p,
     items: d,
-    multiSelect: s,
+    multiSelect: n,
     onKeyDown: f,
     onSelect: u,
-    renderListItem: t,
+    renderListItem: i,
     selectListId: O,
-    showList: i,
-    textFilter: n,
+    showList: t,
+    textFilter: s,
     toggleButtonRef: S,
     dismissPopover: C,
-    setToTargetWidth: N,
-    popoverClassNameModifiers: P,
+    setToTargetWidth: P,
+    popoverClassNameModifiers: N,
     showOverlay: _,
-    fitPosition: v
-  }, D) => {
-    const { i18n: E } = F(), L = R(x.down.xs), a = d.filter((e) => !n || e.name.toLowerCase().includes(n)), T = m(w, { [V]: i }), M = m(z, j), I = l(() => U(t) ? t : B, [t]), r = l(() => $(s), [s]);
-    return i ? /* @__PURE__ */ o(
-      b,
+    fitPosition: v,
+    fixedPopoverPositioning: D
+  }, E) => {
+    const { i18n: L } = W(), T = R(b.down.xs), a = d.filter((e) => !s || e.name.toLowerCase().includes(s)), M = m(V, { [z]: t }), x = m(j, y), I = l(() => $(i) ? i : Q, [i]), r = l(() => k(n), [n]);
+    return t ? /* @__PURE__ */ o(
+      g,
       {
-        classNameModifiers: P,
+        classNameModifiers: N,
         actions: r ? p : void 0,
         disableFocusTrap: !0,
         divider: !0,
         dismiss: C,
         dismissible: !1,
-        open: i,
-        setToTargetWidth: N,
-        containerSize: h.MEDIUM,
-        variant: g.POPOVER,
+        open: t,
+        setToTargetWidth: P,
+        containerSize: F.MEDIUM,
+        variant: h.POPOVER,
         targetElement: S,
         withContentPadding: !1,
         position: A.BOTTOM,
-        showOverlay: _ && L,
+        showOverlay: _ && T,
         fitPosition: v,
-        children: /* @__PURE__ */ o("ul", { className: T, id: O, ref: D, role: "listbox", "aria-multiselectable": r, children: a.length ? a.map((e) => /* @__PURE__ */ o(
-          y,
+        fixedPositioning: D,
+        children: /* @__PURE__ */ o("ul", { className: M, id: O, ref: E, role: "listbox", "aria-multiselectable": r, children: a.length ? a.map((e) => /* @__PURE__ */ o(
+          B,
           {
             item: e,
             multiSelect: r,
@@ -60,11 +62,11 @@ const k = Q(
             selected: c.includes(e)
           },
           e.id
-        )) : /* @__PURE__ */ o("div", { className: M, children: E.get("select.noOptionsFound") }) })
+        )) : /* @__PURE__ */ o("div", { className: x, children: L.get("select.noOptionsFound") }) })
       }
     ) : null;
   }
-), se = W(k);
+), se = w(q);
 export {
   se as default
 };

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

@@ -1,7 +1,7 @@
 import { jsx as t } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 /* empty css          */
-import m from "classnames";
-import { useState as p, useEffect as s } from "../../../external/preact/hooks/dist/hooks.module.js";
+import l from "classnames";
+import { useState as m, useEffect as s } from "../../../external/preact/hooks/dist/hooks.module.js";
 const e = {
   "angle-right": () => import("../../../images/icons/angle-right.svg.js"),
   "checkmark-circle-fill": () => import("../../../images/icons/checkmark-circle-fill.svg.js"),
@@ -19,19 +19,20 @@ const e = {
   filter: () => import("../../../images/icons/filter.svg.js"),
   "info-filled": () => import("../../../images/icons/info-filled.svg.js"),
   "minus-circle-outline": () => import("../../../images/icons/minus-circle-outline.svg.js"),
+  plus: () => import("../../../images/icons/plus.svg.js"),
   "plus-circle-outline": () => import("../../../images/icons/plus-circle-outline.svg.js"),
   square: () => import("../../../images/icons/square.svg.js"),
   "trash-can": () => import("../../../images/icons/trash-can.svg.js"),
   upload: () => import("../../../images/icons/upload.svg.js"),
   "warning-filled": () => import("../../../images/icons/warning-filled.svg.js"),
   warning: () => import("../../../images/icons/warning.svg.js")
-}, h = ({ className: n, name: o, ...c }) => {
-  const [r, i] = p(null);
+}, h = ({ className: n, name: o, ...p }) => {
+  const [r, i] = m(null);
   return s(() => {
-    e[o] ? e[o]().then(({ default: l }) => {
-      i(/* @__PURE__ */ t(l, {}));
+    e[o] ? e[o]().then(({ default: c }) => {
+      i(/* @__PURE__ */ t(c, {}));
     }) : (i(null), console.error(`Icon with name "${o}" does not exist.`));
-  }, [o]), r && /* @__PURE__ */ t("span", { className: m("adyen-pe-icon", n), role: "img", "aria-hidden": !0, ...c, children: r });
+  }, [o]), r && /* @__PURE__ */ t("span", { className: l("adyen-pe-icon", n), role: "img", "aria-hidden": !0, ...p, children: r });
 };
 export {
   h as Icon,

package/dist/es/components/internal/Modal/ModalContent/ModalContent.js

@@ -1,23 +1,23 @@
-import { jsx as e } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { useMemo as a } from "../../../../external/preact/hooks/dist/hooks.module.js";
-import i from "../../DataOverviewDetails/DataOverviewDetails.js";
+import { jsx as n } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useMemo as i } from "../../../../external/preact/hooks/dist/hooks.module.js";
+import a from "../../DataOverviewDetails/DataOverviewDetails.js";
 /* empty css                  */
 import { Fragment as m } from "../../../../external/preact/dist/preact.module.js";
 const c = {
   base: "adyen-pe-modal-content"
 };
-function h({ type: r, data: o, dataCustomization: s, ...n }) {
-  const t = a(() => {
+function h({ type: r, data: o, dataCustomization: t, ...e }) {
+  const s = i(() => {
     switch (r) {
       case "payout":
-        return { ...o, type: r, ...n };
+        return { ...o, type: r, ...e };
       case "transaction":
-        return { id: o, type: r, ...n };
+        return { id: o, type: r, ...e };
       default:
         return { data: o, type: r };
     }
-  }, [o, r]);
-  return /* @__PURE__ */ e(m, { children: t && /* @__PURE__ */ e("div", { className: c.base, children: /* @__PURE__ */ e(i, { ...t, dataCustomization: s }) }) });
+  }, [o, e, r]);
+  return /* @__PURE__ */ n(m, { children: s && /* @__PURE__ */ n("div", { className: c.base, children: /* @__PURE__ */ n(a, { ...s, dataCustomization: t }) }) });
 }
 export {
   h as default

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

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

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

@@ -0,0 +1,36 @@
+import { jsx as s } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useState as c, useCallback as g, useEffect as v } from "../../../external/preact/hooks/dist/hooks.module.js";
+import { PopoverContainerPosition as P } from "./types.js";
+import m from "./Popover.js";
+/* empty css             */
+function S(t) {
+  var r;
+  const [p, f] = c(performance.now()), [u, d] = c(), i = g(
+    (n) => n && t.fixedPositioning ? n.scrollHeight > n.offsetHeight : !1,
+    [t.fixedPositioning]
+  ), o = (r = t.targetElement.current) == null ? void 0 : r.offsetParent;
+  return v(() => {
+    if (!i(o)) return;
+    const { height: n, y: l } = o.getBoundingClientRect();
+    d({
+      minY: l,
+      maxY: l + n
+    });
+    let e = null;
+    const a = () => {
+      e && cancelAnimationFrame(e), e = requestAnimationFrame(() => {
+        e = null, f(performance.now());
+      });
+    };
+    return o.addEventListener("scroll", a, { passive: !0 }), () => {
+      o.removeEventListener("scroll", a), e && cancelAnimationFrame(e), e = null;
+    };
+  }, [o, i]), t.fixedPositioning ? (
+    // TODO: - Consider using same position from parent element
+    //       - Consider adding position prop to components using Popover
+    /* @__PURE__ */ s(m, { ...t, position: P.BOTTOM, additionalStyle: u })
+  ) : /* @__PURE__ */ s(m, { ...t });
+}
+export {
+  S as default
+};

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

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

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

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

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

@@ -0,0 +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";
+/* 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 })
+  ] }),
+  i && /* @__PURE__ */ A("div", { className: t, children: i })
+] }), L = m(n);
+export {
+  L as default
+};

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

@@ -0,0 +1,11 @@
+const _ = "adyen-pe-status-box", S = `${_}__amount`, O = `${_}__label`, A = `${_}__payment-method`, t = `${A}-detail`, T = `${A}-logo`, o = `${T}-container`, n = `${_}__tags`;
+export {
+  _ as STATUS_BOX_CLASS,
+  S as STATUS_BOX_DATA_AMOUNT,
+  O as STATUS_BOX_DATA_LABEL,
+  A as STATUS_BOX_DATA_PAY_METHOD,
+  t as STATUS_BOX_DATA_PAY_METHOD_DETAIL,
+  T as STATUS_BOX_DATA_PAY_METHOD_LOGO,
+  o as STATUS_BOX_DATA_PAY_METHOD_LOGO_CONTAINER,
+  n as STATUS_BOX_DATA_TAGS
+};

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

@@ -0,0 +1,17 @@
+import { useMemo as e } 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(() => {
+    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 };
+};
+export {
+  P as default
+};

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

@@ -0,0 +1,9 @@
+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;
+};
+export {
+  y as getDisplayablePaymentMethod,
+  p as getPaymentMethodType
+};

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

@@ -0,0 +1,47 @@
+import { jsx as n } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { TypographyVariant as b, TypographyElement as y } from "../Typography/types.js";
+import $ from "../../../core/Context/useCoreContext.js";
+import { useTabbedControl as h } from "../../../hooks/useTabbedControl.js";
+import u from "../Typography/Typography.js";
+/* empty css          */
+function T({ activeTab: d, tabs: t, onChange: s }) {
+  const { activeIndex: r, onClick: p, onKeyDown: c, refs: m, uniqueId: a } = h({ onChange: s, options: t, activeOption: d }), { i18n: l } = $();
+  return /* @__PURE__ */ n("section", { "aria-label": l.get("tabs"), children: [
+    /* @__PURE__ */ n("div", { className: "adyen-pe-tabs", role: "tablist", "aria-orientation": "horizontal", children: t.map((e, i) => {
+      const o = r === i;
+      return /* @__PURE__ */ n(
+        "button",
+        {
+          role: "tab",
+          name: e.id,
+          ref: m[i],
+          id: `tab:${a}-${e.id}`,
+          className: "adyen-pe-tabs__tab",
+          "aria-controls": `panel:${a}-${e.id}`,
+          "aria-selected": o,
+          onClick: o ? void 0 : p,
+          onKeyDown: c,
+          disabled: e.disabled,
+          tabIndex: o ? 0 : -1,
+          children: /* @__PURE__ */ n(u, { el: y.SPAN, variant: b.BODY, className: "adyen-pe-tabs__tab-label", stronger: !0, children: l.get(e.label) })
+        },
+        `tab:${a}-${e.id}`
+      );
+    }) }),
+    /* @__PURE__ */ n("div", { className: "adyen-pe-tabpanels", children: t.map((e, i) => /* @__PURE__ */ n(
+      "section",
+      {
+        role: "tabpanel",
+        id: `panel:${a}-${e.id}`,
+        className: "adyen-pe-tabpanels__panel",
+        "aria-labelledby": `tab:${a}-${e.id}`,
+        hidden: r !== i,
+        children: e.content
+      },
+      `panel:${a}-${e.id}`
+    )) })
+  ] });
+}
+export {
+  T as default
+};