@adyen/adyen-platform-experience-web 1.5.1 → 1.6.1

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

@@ -1,6 +1,6 @@
-var O = /* @__PURE__ */ ((T) => (T.TOOLTIP = "tooltip", T.POPOVER = "popover", T))(O || {}), E = /* @__PURE__ */ ((T) => (T.TOP = "top", T.TOP_LEFT = "top-left", T.RIGHT = "right", T.BOTTOM = "bottom", T.BOTTOM_LEFT = "bottom-left", T.LEFT = "left", T))(E || {}), l = /* @__PURE__ */ ((T) => (T.MEDIUM = "medium", T.WIDE = "wide", T))(l || {});
+var O = /* @__PURE__ */ ((T) => (T.TOOLTIP = "tooltip", T.POPOVER = "popover", T))(O || {}), E = /* @__PURE__ */ ((T) => (T.TOP = "top", T.RIGHT = "right", T.BOTTOM = "bottom", T.LEFT = "left", T.TOP_LEFT = "top-left", T.TOP_RIGHT = "top-right", T.BOTTOM_LEFT = "bottom-left", T.BOTTOM_RIGHT = "bottom-right", T))(E || {}), I = /* @__PURE__ */ ((T) => (T.MEDIUM = "medium", T.WIDE = "wide", T))(I || {});
 export {
   E as PopoverContainerPosition,
-  l as PopoverContainerSize,
+  I as PopoverContainerSize,
   O as PopoverContainerVariant
 };

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