@adyen/adyen-platform-experience-web 1.1.1 → 1.3.0

package/dist/es/components/internal/DataOverviewDetails/DataOverviewDetailsSkeleton.js

@@ -0,0 +1,14 @@
+import { jsx as e } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import m from "classnames";
+import { memo as l } from "../../../external/preact/compat/dist/compat.module.js";
+import { SKELETON_CLASS as i, SKELETON_LOADING as c, SKELETON_CONTAINER as S, STATUS_SKELETON as N } from "./constants.js";
+const p = ({ skeletonRowNumber: o = 0 }) => {
+  const t = m(i, c), a = Array.from({ length: o }), r = Array.from({ length: 2 });
+  return /* @__PURE__ */ e("div", { className: S, children: [
+    /* @__PURE__ */ e("div", { className: N, children: r.map((n, s) => /* @__PURE__ */ e("span", { className: t }, `status-skeleton-${s}`)) }),
+    a.map((n, s) => /* @__PURE__ */ e("span", { className: t }, `skeleton-${s}`))
+  ] });
+}, k = l(p);
+export {
+  k as default
+};

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

@@ -0,0 +1,8 @@
+const t = "adyen-pe-overview-details", n = `${t}__skeleton`, e = `${n}-container`, o = `${n}--loading-content`, S = `${t}__status-skeleton`;
+export {
+  t as BASE_CLASS,
+  n as SKELETON_CLASS,
+  e as SKELETON_CONTAINER,
+  o as SKELETON_LOADING,
+  S as STATUS_SKELETON
+};

package/dist/es/components/internal/DataOverviewDetails/useDataOverviewDetailsTitle.js

@@ -0,0 +1,18 @@
+import { useModalContext as c } from "../Modal/Modal.js";
+import { useState as u, useMemo as i, useEffect as f } from "../../../external/preact/hooks/dist/hooks.module.js";
+import m from "../../../core/Context/useCoreContext.js";
+import { boolOrFalse as d } from "../../../utils/value/bool.js";
+const T = {
+  transaction: "transactionDetails",
+  payout: "payoutDetails"
+}, C = ({ hideTitle: t, type: e }) => {
+  const { i18n: o } = m(), { withinModal: s } = c(), [a, r] = u(!1), n = i(() => a || d(t), [a, t]), l = i(() => o.get(T[e]), [o, e]);
+  return f(() => {
+    r(s);
+  }, [s]), { hideTitle: n, title: l };
+};
+export {
+  T as TITLES_BY_TYPE,
+  C as default,
+  C as useDataOverviewDetailsTitle
+};

package/dist/es/components/internal/DataOverviewDisplay/DataDetailsModal.js

@@ -1,36 +1,35 @@
+import { jsx as r } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import { useEffect as u } from "../../../external/preact/hooks/dist/hooks.module.js";
 import { popoverUtil as h } from "../Popover/utils/popoverUtil.js";
 import C from "../../../core/Context/useCoreContext.js";
 import M from "../Modal/ModalContent/ModalContent.js";
-import { jsx as r } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import g from "../Modal/Modal.js";
-const j = ({
+const O = ({
   children: p,
   className: f,
   selectedDetail: o,
   resetDetails: i
 }) => {
-  const {
-    i18n: m
-  } = C(), n = !!o;
+  const { i18n: n } = C(), m = !!o;
   return u(() => {
-    n && h.closeAll();
-  }, [n]), r("div", {
-    className: f,
-    children: [p, o && r(g, {
-      title: o != null && o.title ? m.get(o.title) : void 0,
-      isOpen: !!o,
-      "aria-label": m.get("payoutDetails"),
-      onClose: i,
-      isDismissible: !0,
-      headerWithBorder: !1,
-      size: (o == null ? void 0 : o.modalSize) ?? "large",
-      children: o && r(M, {
-        ...o == null ? void 0 : o.selection
-      })
-    })]
-  });
+    m && h.closeAll();
+  }, [m]), /* @__PURE__ */ r("div", { className: f, children: [
+    p,
+    o && /* @__PURE__ */ r(
+      g,
+      {
+        title: o != null && o.title ? n.get(o.title) : void 0,
+        isOpen: !!o,
+        "aria-label": n.get("payoutDetails"),
+        onClose: i,
+        isDismissible: !0,
+        headerWithBorder: !1,
+        size: (o == null ? void 0 : o.modalSize) ?? "large",
+        children: o && /* @__PURE__ */ r(M, { ...o == null ? void 0 : o.selection })
+      }
+    )
+  ] });
 };
 export {
-  j as DataDetailsModal
+  O as DataDetailsModal
 };

package/dist/es/components/internal/DataOverviewDisplay/DataOverviewHeader/DataOverviewHeader.js

@@ -1,43 +1,17 @@
+import { jsx as r } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import a from "../../Typography/Typography.js";
 import m from "../../../../core/Context/useCoreContext.js";
 import { TypographyElement as d, TypographyVariant as c } from "../../Typography/types.js";
-import "./DataOverviewHeader.scss.js";
-import { jsx as r } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-const h = "adyen-pe-data-overview-header", u = ({
-  baseClassName: e = h,
-  children: t,
-  hideTitle: p,
-  titleKey: i,
-  descriptionKey: o
-}) => {
-  const {
-    i18n: n
-  } = m();
-  return r("header", {
-    className: e,
-    children: [r("div", {
-      className: `${e}__headings`,
-      children: [!p && i && r("div", {
-        className: `${e}__title`,
-        children: r(a, {
-          el: d.SPAN,
-          variant: c.TITLE,
-          medium: !0,
-          children: n.get(i)
-        })
-      }), o && r("p", {
-        className: `${e}__description`,
-        children: r(a, {
-          el: d.SPAN,
-          variant: c.BODY,
-          children: n.get(o)
-        })
-      })]
-    }), t && r("div", {
-      className: `${e}__controls`,
-      children: t
-    })]
-  });
+/* empty css                        */
+const h = "adyen-pe-data-overview-header", u = ({ baseClassName: e = h, children: t, hideTitle: p, titleKey: i, descriptionKey: o }) => {
+  const { i18n: n } = m();
+  return /* @__PURE__ */ r("header", { className: e, children: [
+    /* @__PURE__ */ r("div", { className: `${e}__headings`, children: [
+      !p && i && /* @__PURE__ */ r("div", { className: `${e}__title`, children: /* @__PURE__ */ r(a, { el: d.SPAN, variant: c.TITLE, medium: !0, children: n.get(i) }) }),
+      o && /* @__PURE__ */ r("p", { className: `${e}__description`, children: /* @__PURE__ */ r(a, { el: d.SPAN, variant: c.BODY, children: n.get(o) }) })
+    ] }),
+    t && /* @__PURE__ */ r("div", { className: `${e}__controls`, children: t })
+  ] });
 };
 export {
   h as BASE_CLASS,

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

@@ -1,7 +1,7 @@
-import { ErrorMessageDisplay as i } from "../ErrorMessageDisplay/ErrorMessageDisplay.js";
-import { getErrorMessage as m } from "../../utils/getErrorMessage.js";
-import { jsx as u } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-const c = ({
+import { jsx as m } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { ErrorMessageDisplay as u } from "../ErrorMessageDisplay/ErrorMessageDisplay.js";
+import { getErrorMessage as i } from "../../utils/getErrorMessage.js";
+const l = ({
   error: r,
   errorMessage: t,
   onContactSupport: e
@@ -12,17 +12,20 @@ const c = ({
     refreshComponent: s,
     translationValues: n,
     onContactSupport: p
-  } = m(r, t, e);
-  return u(i, {
-    title: o,
-    message: a,
-    translationValues: n,
-    withImage: !0,
-    centered: !0,
-    refreshComponent: s,
-    onContactSupport: p
-  });
-}, v = c;
+  } = i(r, t, e);
+  return /* @__PURE__ */ m(
+    u,
+    {
+      title: o,
+      message: a,
+      translationValues: n,
+      withImage: !0,
+      centered: !0,
+      refreshComponent: s,
+      onContactSupport: p
+    }
+  );
+};
 export {
-  v as default
+  l as default
 };

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

@@ -1,74 +1,56 @@
-import _ from "classnames";
-import { forwardRef as p } from "../../../external/preact/compat/dist/compat.module.js";
-import { useState as y, useMemo as r, useCallback as N } from "../../../external/preact/hooks/dist/hooks.module.js";
-import O from "../../../core/Context/useCoreContext.js";
-import P from "../Calendar/hooks/useTimezone.js";
-import { DEFAULT_FIRST_WEEK_DAY as x } from "../Calendar/calendar/timerange/presets/shared/offsetWeek.js";
-import D from "../Calendar/hooks/useCalendarControlsRendering.js";
-import "./DatePicker.scss.js";
 import { jsx as n } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import I from "../../../hooks/useReflex/useReflex.js";
-import M from "./components/TimeRangeSelector/TimeRangeSelector.js";
-import v from "../Calendar/Calendar.js";
+import _ from "classnames";
+import { forwardRef as y } from "../../../external/preact/compat/dist/compat.module.js";
+import { useState as p, useMemo as r, useCallback as O } from "../../../external/preact/hooks/dist/hooks.module.js";
+import N from "../../../core/Context/useCoreContext.js";
+import D from "../../../hooks/useReflex.js";
+import I from "../Calendar/hooks/useTimezone.js";
+import { DEFAULT_FIRST_WEEK_DAY as M } from "../Calendar/calendar/timerange/presets/shared/offsetWeek.js";
+import P from "../Calendar/hooks/useCalendarControlsRendering.js";
+/* empty css                */
+import v from "./components/TimeRangeSelector/TimeRangeSelector.js";
+import x from "../Calendar/Calendar.js";
 import u from "../Calendar/calendar/facade/index.js";
 import { boolOrTrue as E } from "../../../utils/value/bool.js";
 import { EMPTY_OBJECT as S } from "../../../utils/value/constants.js";
 import { noop as A } from "../../../utils/common.js";
-const b = p((e, g) => {
-  const {
-    i18n: i
-  } = O(), [T, k] = D(e.renderControl), [C, a] = y(performance.now()), t = r(() => E(e.showTimezoneInfo), [e.showTimezoneInfo]), {
-    clockTime: m,
-    GMTOffset: c
-  } = P({
-    timezone: e.timezone,
-    withClock: t
-  }), z = r(() => _([{
-    "adyen-pe-datepicker--with-timezone": t
-  }, "adyen-pe-datepicker"]), [t]), w = r(() => t ? {
-    values: {
-      offset: c,
-      time: m
-    }
-  } : S, [c, m, t]), o = I(A, g), R = N(() => {
+const Z = y((e, g) => {
+  const { i18n: i } = N(), [T, C] = P(e.renderControl), [k, a] = p(performance.now()), t = r(() => E(e.showTimezoneInfo), [e.showTimezoneInfo]), { clockTime: m, GMTOffset: c } = I({ timezone: e.timezone, withClock: t }), z = r(() => _([{ "adyen-pe-datepicker--with-timezone": t }, "adyen-pe-datepicker"]), [t]), w = r(() => t ? { values: { offset: c, time: m } } : S, [c, m, t]), o = D(A, g), R = O(() => {
     var l, s, d, f, h;
     a(performance.now()), (l = o.current) != null && l.from && ((s = o.current) != null && s.to) && ((h = e.onHighlight) == null || h.call(e, +((d = o.current) == null ? void 0 : d.from), +((f = o.current) == null ? void 0 : f.to)));
   }, [a, e.onHighlight]);
-  return n("div", {
-    className: z,
-    children: [n("div", {
-      className: "adyen-pe-datepicker__selector-container",
-      children: n(M, {
+  return /* @__PURE__ */ n("div", { className: z, children: [
+    /* @__PURE__ */ n("div", { className: "adyen-pe-datepicker__selector-container", children: /* @__PURE__ */ n(
+      v,
+      {
         now: e.now,
         calendarRef: o,
         onTimeRangeSelected: e.onPresetOptionSelected,
         options: e.timeRangePresetOptions,
         selectedOption: e.selectedPresetOption,
-        timestamp: C,
+        timestamp: k,
         timezone: e.timezone
-      })
-    }), n("div", {
-      ref: k,
-      role: "group",
-      className: "adyen-pe-datepicker__controls",
-      "aria-label": i.get("calendar.controls")
-    }), n(v, {
-      ...e,
-      ref: o,
-      firstWeekDay: x,
-      dynamicBlockRows: !0,
-      onlyCellsWithin: !0,
-      controls: e.controls ?? u.controls.MINIMAL,
-      highlight: e.highlight ?? u.highlight.MANY,
-      onHighlight: R,
-      renderControl: T,
-      trackCurrentDay: !0
-    }), t && n("div", {
-      className: "adyen-pe-datepicker__timezone",
-      children: i.get("calendar.timezone", w)
-    })]
-  });
-}), Z = b;
+      }
+    ) }),
+    /* @__PURE__ */ n("div", { ref: C, role: "group", className: "adyen-pe-datepicker__controls", "aria-label": i.get("calendar.controls") }),
+    /* @__PURE__ */ n(
+      x,
+      {
+        ...e,
+        ref: o,
+        firstWeekDay: M,
+        dynamicBlockRows: !0,
+        onlyCellsWithin: !0,
+        controls: e.controls ?? u.controls.MINIMAL,
+        highlight: e.highlight ?? u.highlight.MANY,
+        onHighlight: R,
+        renderControl: T,
+        trackCurrentDay: !0
+      }
+    ),
+    t && /* @__PURE__ */ n("div", { className: "adyen-pe-datepicker__timezone", children: i.get("calendar.timezone", w) })
+  ] });
+});
 export {
   Z as default
 };

package/dist/es/components/internal/DatePicker/components/TimeRangeSelector/TimeRangeSelector.js

@@ -1,41 +1,32 @@
-import { useMemo as x, useCallback as C, useRef as h, useEffect as i } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import { useTimeRangeSelection as j } from "./useTimeRangeSelection.js";
-import { jsx as w } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { jsx as S } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useMemo as j, useCallback as w, useRef as h, useEffect as i } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { useTimeRangeSelection as x } from "./useTimeRangeSelection.js";
 import D from "../../../FormFields/Select/Select.js";
-const a = ({
+const z = ({
   calendarRef: t,
   onTimeRangeSelected: o,
   timestamp: s,
   ...O
 }) => {
-  const {
-    customSelection: f,
-    from: u,
-    onSelection: l,
-    options: m,
-    selectedOption: r,
-    to: c
-  } = j(O), S = x(() => Object.freeze(m.map((e) => ({
-    id: e,
-    name: e
-  }))), [m]), b = C(({
-    target: e
-  }) => l(e == null ? void 0 : e.value), [l]), n = h(!0), p = h(s);
+  const { customSelection: f, from: u, onSelection: l, options: m, selectedOption: r, to: c } = x(O), b = j(() => Object.freeze(m.map((e) => ({ id: e, name: e }))), [m]), C = w(({ target: e }) => l(e == null ? void 0 : e.value), [l]), n = h(!0), p = h(s);
   return i(() => {
     t != null && t.current && u && c && (n.current = !0, t.current.from = new Date(u), t.current.to = new Date(c));
   }, [t, u, c]), i(() => {
     p.current !== s && (p.current = s, n.current ? n.current = !1 : f());
   }, [f, s]), i(() => {
     r && (o == null || o(r));
-  }, [r, o]), w(D, {
-    setToTargetWidth: !0,
-    items: S,
-    filterable: !1,
-    multiSelect: !1,
-    onChange: b,
-    selected: r
-  });
-}, E = a;
+  }, [r, o]), /* @__PURE__ */ S(
+    D,
+    {
+      setToTargetWidth: !0,
+      items: b,
+      filterable: !1,
+      multiSelect: !1,
+      onChange: C,
+      selected: r
+    }
+  );
+};
 export {
-  E as default
+  z as default
 };

package/dist/es/components/internal/DatePicker/components/TimeRangeSelector/useTimeRangeSelection.js

@@ -1,55 +1,59 @@
-import { useState as i, useRef as C, useMemo as c, useCallback as R } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import I from "../../../../../core/Context/useCoreContext.js";
-import T from "../../../Calendar/calendar/timerange/presets/lastNDays.js";
-import N from "../../../Calendar/calendar/timerange/presets/thisWeek.js";
-import q from "../../../Calendar/calendar/timerange/presets/lastWeek.js";
-import E from "../../../Calendar/calendar/timerange/presets/thisMonth.js";
-import K from "../../../Calendar/calendar/timerange/presets/lastMonth.js";
-import Z from "../../../Calendar/calendar/timerange/presets/yearToDate.js";
+import { useState as i, useRef as k, useMemo as c, useCallback as C } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import N from "../../../../../core/Context/useCoreContext.js";
+import R from "../../../Calendar/calendar/timerange/presets/lastNDays.js";
+import q from "../../../Calendar/calendar/timerange/presets/thisWeek.js";
+import v from "../../../Calendar/calendar/timerange/presets/lastWeek.js";
+import A from "../../../Calendar/calendar/timerange/presets/thisMonth.js";
+import E from "../../../Calendar/calendar/timerange/presets/lastMonth.js";
+import K from "../../../Calendar/calendar/timerange/presets/yearToDate.js";
 const X = () => Object.freeze({
-  "rangePreset.last7Days": T(7),
-  "rangePreset.last30Days": T(30),
-  "rangePreset.thisWeek": N(),
-  "rangePreset.lastWeek": q(),
-  "rangePreset.thisMonth": E(),
-  "rangePreset.lastMonth": K(),
-  "rangePreset.yearToDate": Z()
+  "rangePreset.last7Days": R(7),
+  "rangePreset.last30Days": R(30),
+  "rangePreset.thisWeek": q(),
+  "rangePreset.lastWeek": v(),
+  "rangePreset.thisMonth": A(),
+  "rangePreset.lastMonth": E(),
+  "rangePreset.yearToDate": K()
 }), Y = ({
   now: a = Date.now(),
-  options: n,
+  options: s,
   selectedOption: m,
   timezone: u
 }) => {
-  const {
-    i18n: l
-  } = I(), [W, h] = i(), [j, S] = i(), [f, g] = i(), d = C(), y = C(), [e, D, s] = c(() => {
-    const o = l.get("rangePreset.custom"), t = Object.keys(n), r = Object.freeze(t.map((O) => l.get(O)));
-    return [o, (O, M = r) => {
-      const v = M.findIndex((z) => z === O);
-      return n[t[v]];
+  const { i18n: f } = N(), [W, h] = i(), [j, d] = i(), [l, g] = i(), S = k(), y = k(), [t, D, n] = c(() => {
+    const o = f.get("rangePreset.custom"), e = Object.keys(s), r = Object.freeze(e.map((O) => f.get(O)));
+    return [o, (O, F = r) => {
+      const z = F.findIndex((I) => I === O);
+      return s[e[z]];
     }, r];
-  }, [l, n]), [P, b] = i(m === e), k = c(() => Object.freeze([...s, e]), [e, s]), x = c(() => P ? k : s, [P, s, k]), p = R((o) => {
-    const t = D(o, s);
-    t && (h(t.from), S(t.to), b(!1), g(o));
-  }, [e, D, f, s]), F = R(() => {
-    h(void 0), S(void 0), b(!0), g(e);
-  }, [e]);
+  }, [f, s]), [P, T] = i(m === t), b = c(() => Object.freeze([...n, t]), [t, n]), M = c(
+    () => P ? b : n,
+    [P, n, b]
+  ), p = C(
+    (o) => {
+      const e = D(o, n);
+      e && (h(e.from), d(e.to), T(!1), g(o));
+    },
+    [t, D, l, n]
+  ), x = C(() => {
+    h(void 0), d(void 0), T(!0), g(t);
+  }, [t]);
   return c(() => {
-    m === e ? g(e) : p(m);
+    m === t ? g(t) : p(m);
   }, []), c(() => {
     var o;
-    if (d.current !== a || y.current !== u) {
-      const t = Object.values(n);
-      t.forEach((r) => {
+    if (S.current !== a || y.current !== u) {
+      const e = Object.values(s);
+      e.forEach((r) => {
         r.now = a, r.timezone = u;
-      }), d.current = a, y.current = (o = t[0]) == null ? void 0 : o.timezone, p(f);
+      }), S.current = a, y.current = (o = e[0]) == null ? void 0 : o.timezone, p(l);
     }
-  }, [a, u, n]), {
-    customSelection: F,
+  }, [a, u, s]), {
+    customSelection: x,
     from: W,
     onSelection: p,
-    options: x,
-    selectedOption: f,
+    options: M,
+    selectedOption: l,
     to: j
   };
 };

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

@@ -0,0 +1,8 @@
+import { jsx as o } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import m from "classnames";
+/* empty css             */
+import { DIVIDER_CLASS_NAMES as t } from "./constants.js";
+const a = ({ className: r }) => /* @__PURE__ */ o("hr", { className: m(t.base, r) });
+export {
+  a as Divider
+};

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

@@ -0,0 +1,6 @@
+const e = {
+  base: "adyen-pe-divider"
+};
+export {
+  e as DIVIDER_CLASS_NAMES
+};

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

@@ -1,75 +1,70 @@
-import l from "../Typography/Typography.js";
-import { TypographyVariant as y } from "../Typography/types.js";
-import { useCallback as T } from "../../../external/preact/hooks/dist/hooks.module.js";
-import _ from "../../../core/Context/useCoreContext.js";
-import "./ErrorMessageDisplay.scss.js";
-import A from "../../../images/no-results.svg.js";
 import { jsx as r } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import a from "../Button/Button.js";
-import { Fragment as m } from "../../../external/preact/dist/preact.module.js";
-const s = {
+import n from "../Typography/Typography.js";
+import { TypographyVariant as h } from "../Typography/types.js";
+import { useCallback as b } from "../../../external/preact/hooks/dist/hooks.module.js";
+import I from "../../../core/Context/useCoreContext.js";
+/* empty css                         */
+import N from "../../../images/no-results.svg.js";
+import k from "classnames";
+import g from "../Button/Button.js";
+import { Fragment as p } from "../../../external/preact/dist/preact.module.js";
+const f = {
   md: 680,
   lg: 1024
-}, R = ({
-  title: g,
-  message: o,
+}, K = ({
+  title: x,
+  message: s,
   imageDesktop: t,
-  imageMobile: n,
-  withImage: x,
-  centered: f,
-  refreshComponent: h,
-  onContactSupport: c,
-  translationValues: i
+  imageMobile: a,
+  withImage: u,
+  centered: v,
+  refreshComponent: l,
+  onContactSupport: m,
+  translationValues: i,
+  absolutePosition: E = !0,
+  outlined: y = !0,
+  renderSecondaryButton: c
 }) => {
-  const {
-    i18n: e,
-    updateCore: u
-  } = _(), v = T((p) => Array.isArray(p) ? p.map((d, E) => E === 0 ? r(m, {
-    children: [e.get(d), i && i[d] && r(m, {
-      children: i[d]
-    })]
-  }) : r(m, {
-    children: [r("br", {}), e.get(d), i && i[d] && r(m, {
-      children: i[d]
-    })]
-  })) : e.get(p), [e, i]);
-  return r("div", {
-    className: `adyen-pe-error-message-display ${f ? "adyen-pe-error-message-display--centered" : ""}`,
-    children: [(t || n || x) && r("div", {
-      className: "adyen-pe-error-message-display__illustration",
-      children: r("picture", {
-        children: [r("source", {
-          type: "image/svg+xml",
-          media: `(min-width: ${s.md}px)`,
-          srcSet: t
-        }), r("source", {
-          type: "image/svg+xml",
-          media: `(max-width: ${s.md}px)`,
-          srcSet: n
-        }), r("img", {
-          srcSet: t ?? A,
-          alt: e.get("thereWasAnUnexpectedError")
-        })]
-      })
-    }), r(l, {
-      variant: y.TITLE,
-      children: e.get(g)
-    }), o && r(l, {
-      variant: y.BODY,
-      children: v(o)
-    }), (c || h) && r("div", {
-      className: "adyen-pe-error-message-display__button",
-      children: [c && r(a, {
-        onClick: c,
-        children: e.get("reachOutToSupport")
-      }), !c && h && r(a, {
-        onClick: u,
-        children: e.get("refresh")
-      })]
-    })]
-  });
+  const { i18n: e, updateCore: _ } = I(), A = b(
+    (o) => Array.isArray(o) ? o.map(
+      (d, T) => T === 0 ? /* @__PURE__ */ r(p, { children: [
+        e.get(d),
+        i && i[d] && /* @__PURE__ */ r(p, { children: i[d] })
+      ] }) : /* @__PURE__ */ r(p, { children: [
+        /* @__PURE__ */ r("br", {}),
+        e.get(d),
+        i && i[d] && /* @__PURE__ */ r(p, { children: i[d] })
+      ] })
+    ) : e.get(o),
+    [e, i]
+  );
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: k(["adyen-pe-error-message-display"], {
+        "adyen-pe-error-message-display--absolute-position": E,
+        "adyen-pe-error-message-display--outlined": y,
+        "adyen-pe-error-message-display--with-background": !y,
+        "adyen-pe-error-message-display--centered": v
+      }),
+      children: [
+        (t || a || u) && /* @__PURE__ */ r("div", { className: "adyen-pe-error-message-display__illustration", children: /* @__PURE__ */ r("picture", { children: [
+          /* @__PURE__ */ r("source", { type: "image/svg+xml", media: `(min-width: ${f.md}px)`, srcSet: t }),
+          /* @__PURE__ */ r("source", { type: "image/svg+xml", media: `(max-width: ${f.md}px)`, srcSet: a }),
+          /* @__PURE__ */ r("img", { srcSet: t ?? N, alt: e.get("thereWasAnUnexpectedError") })
+        ] }) }),
+        /* @__PURE__ */ r(n, { variant: h.TITLE, children: e.get(x) }),
+        s && /* @__PURE__ */ r(n, { variant: h.BODY, children: A(s) }),
+        (m || l || c) && /* @__PURE__ */ r("div", { className: "adyen-pe-error-message-display__button", children: [
+          c && c(),
+          m && /* @__PURE__ */ r(g, { onClick: m, children: e.get("contactSupport") }),
+          !m && l && /* @__PURE__ */ r(g, { onClick: _, children: e.get("refresh") })
+        ] })
+      ]
+    }
+  );
 };
 export {
-  R as ErrorMessageDisplay,
-  s as IMAGE_BREAKPOINT_SIZES
+  K as ErrorMessageDisplay,
+  f as IMAGE_BREAKPOINT_SIZES
 };