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

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

@@ -1,12 +1,12 @@
-import { jsx as d } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { jsx as t } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import { toChildArray as w } from "../../../external/preact/dist/preact.module.js";
-import y from "classnames";
+import u from "classnames";
 /* empty css              */
 import { TableBody as C } from "./components/TableBody.js";
 import { InteractiveBody as _ } from "./components/InteractiveBody.js";
 import x from "./components/SkeletonBody.js";
 import { ErrorMessageDisplay as T } from "../ErrorMessageDisplay/ErrorMessageDisplay.js";
-import { useMemo as n } from "../../../external/preact/hooks/dist/hooks.module.js";
+import { useMemo as r } from "../../../external/preact/hooks/dist/hooks.module.js";
 import { DataGridProvider as k } from "./utils/DataGridProvider.js";
 import { useDataGridContext as N } from "./hooks/useDataGridContext.js";
 import { TableHeaderCell as B } from "./components/TableHeaderCell.js";
@@ -15,41 +15,43 @@ const L = Object.freeze({
   activeIndex: -1,
   index: -1
 });
-function u({ errorDisplay: e, ...o }) {
-  return /* @__PURE__ */ d("div", { style: { width: "100%" }, children: /* @__PURE__ */ d(k, { children: /* @__PURE__ */ d(D, { ...o, errorDisplay: e }) }) });
+function y({ errorDisplay: e, ...o }) {
+  return /* @__PURE__ */ t("div", { style: { width: "100%" }, children: /* @__PURE__ */ t(k, { children: /* @__PURE__ */ t(D, { ...o, errorDisplay: e }) }) });
 }
 function D({ autoFitColumns: e, errorDisplay: o, ...a }) {
   var c, s;
-  const m = n(() => w(a.children), [a.children]), f = n(() => m.find((t) => (t == null ? void 0 : t.type) === g), [m]), l = n(() => {
-    var t;
-    return ((t = a.data) == null ? void 0 : t.length) === 0;
-  }, [a.data]), h = n(() => !a.loading && (l || a.error), [l, a.error, a.loading]), { getMinWidthByColumn: b } = N(), { getImageAsset: r } = R(), i = a.columns.filter((t) => t.visible !== !1).map((t) => ({ ...t, minWidth: b(t.key) })), v = i.map((t) => `minmax(${(t.minWidth || 100) + 40}px, ${t.flex || 1}fr)`).join(" ");
-  return /* @__PURE__ */ d(
+  const m = r(() => w(a.children), [a.children]), f = r(() => m.find((d) => (d == null ? void 0 : d.type) === g), [m]), n = r(() => {
+    var d;
+    return ((d = a.data) == null ? void 0 : d.length) === 0;
+  }, [a.data]), h = r(() => !a.loading && (n || a.error), [n, a.error, a.loading]), { getMinWidthByColumn: b } = N(), { getImageAsset: l } = R(), i = a.columns.filter((d) => d.visible !== !1).map((d) => ({ ...d, minWidth: b(d.key) })), v = i.map((d) => `minmax(${(d.minWidth || 100) + (a.narrowColumns ? 0 : 40)}px, ${d.flex || 1}fr)`).join(" ");
+  return /* @__PURE__ */ t(
     "div",
     {
-      className: y("adyen-pe-data-grid", {
+      className: u("adyen-pe-data-grid", {
         "adyen-pe-data-grid--condensed": a.condensed,
         "adyen-pe-data-grid--outline": a.outline,
         "adyen-pe-data-grid--scrollable": a.scrollable,
         "adyen-pe-data-grid--loading": a.loading,
-        "adyen-pe-data-grid--empty": l || a.error
+        "adyen-pe-data-grid--empty": n || a.error
       }),
       style: e ? void 0 : {
         "--adyen-pe-data-grid-cols": i.length,
         "--adyen-pe-data-grid-cells": v
       },
       children: [
-        /* @__PURE__ */ d("div", { className: "adyen-pe-data-grid__table-wrapper", children: [
-          /* @__PURE__ */ d("div", { role: "table", className: "adyen-pe-data-grid__table", children: [
-            /* @__PURE__ */ d("div", { className: "adyen-pe-data-grid__head", role: "rowgroup", children: /* @__PURE__ */ d("div", { role: "rowheader", className: "adyen-pe-data-grid__header", style: a.loading ? { width: "100%" } : {}, children: i.map((t) => /* @__PURE__ */ d(B, { label: t.label, position: t.position, cellKey: t.key }, t.key)) }) }),
-            /* @__PURE__ */ d(G, { ...a, columns: i, emptyBody: l })
+        /* @__PURE__ */ t("div", { className: "adyen-pe-data-grid__table-wrapper", children: [
+          /* @__PURE__ */ t("div", { role: "table", className: "adyen-pe-data-grid__table", children: [
+            /* @__PURE__ */ t("div", { className: "adyen-pe-data-grid__head", role: "rowgroup", children: /* @__PURE__ */ t("div", { role: "rowheader", className: "adyen-pe-data-grid__header", style: a.loading ? { width: "100%" } : {}, children: i.map((d) => /* @__PURE__ */ t(B, { label: d.label, position: d.position, cellKey: d.key }, d.key)) }) }),
+            /* @__PURE__ */ t(H, { ...a, columns: i, emptyBody: n })
           ] }),
-          h && (l && !a.error ? /* @__PURE__ */ d(
+          h && (n && !a.error ? /* @__PURE__ */ t(
             T,
             {
+              withHeaderOffset: !0,
               title: ((c = a.emptyTableMessage) == null ? void 0 : c.title) ?? "common.errors.noResults",
               message: (s = a.emptyTableMessage) == null ? void 0 : s.message,
-              imageDesktop: r == null ? void 0 : r({ name: "no-data-female" }),
+              imageDesktop: l == null ? void 0 : l({ name: "no-results-found" }),
+              imageMobile: l == null ? void 0 : l({ name: "no-results-found", subFolder: "images/small" }),
               centered: !0
             }
           ) : a.error && o ? o() : null)
@@ -59,15 +61,15 @@ function D({ autoFitColumns: e, errorDisplay: o, ...a }) {
     }
   );
 }
-function G(e) {
-  const o = n(() => e.loading || e.emptyBody || e.error, [e.emptyBody, e.error, e.loading]);
-  return /* @__PURE__ */ d(
+function H(e) {
+  const o = r(() => e.loading || e.emptyBody || e.error, [e.emptyBody, e.error, e.loading]);
+  return /* @__PURE__ */ t(
     "div",
     {
       role: "rowgroup",
-      className: y("adyen-pe-data-grid__body"),
+      className: u("adyen-pe-data-grid__body"),
       style: o && { display: "grid", gridTemplateColumns: "1fr" },
-      children: o ? /* @__PURE__ */ d(x, { columnsNumber: e.columns.length, loading: e.loading }) : e.onRowClick ? /* @__PURE__ */ d(
+      children: o ? /* @__PURE__ */ t(x, { columnsNumber: e.columns.length, loading: e.loading }) : e.onRowClick ? /* @__PURE__ */ t(
         _,
         {
           onRowHover: e.onRowHover,
@@ -76,7 +78,7 @@ function G(e) {
           onRowClick: e.onRowClick,
           customCells: e.customCells
         }
-      ) : /* @__PURE__ */ d(
+      ) : /* @__PURE__ */ t(
         C,
         {
           onRowHover: e.onRowHover,
@@ -88,16 +90,16 @@ function G(e) {
     }
   );
 }
-u.Footer = g;
+y.Footer = g;
 function g({ children: e }) {
-  return /* @__PURE__ */ d("div", { className: "adyen-pe-data-grid__footer", children: e });
+  return /* @__PURE__ */ t("div", { className: "adyen-pe-data-grid__footer", children: e });
 }
-u.defaultProps = {
+y.defaultProps = {
   condensed: !1,
   outline: !0,
   scrollable: !0
 };
 export {
   L as INITIAL_STATE,
-  u as default
+  y as default
 };

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

@@ -1,99 +1,74 @@
-import { jsx as c } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { jsx as o } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 /* empty css                         */
-import { useMemo as d, useState as M, useCallback as O, useEffect as B } from "../../../external/preact/hooks/dist/hooks.module.js";
-import { useModalContext as q } from "../Modal/Modal.js";
-import { useFetch as z } from "../../../hooks/useFetch.js";
-import { PayoutData as L } from "../../external/PayoutDetails/components/PayoutData.js";
-import N from "../../../hooks/useBalanceAccounts.js";
-import { getErrorMessage as R } from "../../utils/getErrorMessage.js";
-import { ErrorMessageDisplay as Y } from "../ErrorMessageDisplay/ErrorMessageDisplay.js";
-import { useDataOverviewDetailsTitle as K } from "./useDataOverviewDetailsTitle.js";
-import { TX_DETAILS_RESERVED_FIELDS_SET as j } from "../../external/TransactionDetails/components/constants.js";
-import { PAYOUT_TABLE_FIELDS as H } from "../../external/PayoutsOverview/components/PayoutsTable/PayoutsTable.js";
-import { Header as J } from "../Header/Header.js";
-import { TransactionData as U } from "../../external/TransactionDetails/components/TransactionData/TransactionData.js";
-import { useConfigContext as V } from "../../../core/ConfigContext/context.js";
-import { EMPTY_OBJECT as k } from "../../../utils/value/constants.js";
-const W = {
-  transaction: "getTransaction",
+import { useMemo as T, useState as P, useCallback as k, useEffect as x } from "../../../external/preact/hooks/dist/hooks.module.js";
+import { useModalContext as I } from "../Modal/Modal.js";
+import { useFetch as M } from "../../../hooks/useFetch.js";
+import { PayoutData as O } from "../../external/PayoutDetails/components/PayoutData.js";
+import B from "../../../hooks/useBalanceAccounts.js";
+import { getErrorMessage as q } from "../../utils/getErrorMessage.js";
+import { ErrorMessageDisplay as z } from "../ErrorMessageDisplay/ErrorMessageDisplay.js";
+import { useDataOverviewDetailsTitle as L } from "./useDataOverviewDetailsTitle.js";
+import { TX_DETAILS_RESERVED_FIELDS_SET as N } from "../../external/TransactionDetails/constants.js";
+import { PAYOUT_TABLE_FIELDS as R } from "../../external/PayoutsOverview/components/PayoutsTable/PayoutsTable.js";
+import { Header as Y } from "../Header/Header.js";
+import { useConfigContext as K } from "../../../core/ConfigContext/context.js";
+import { EMPTY_OBJECT as j } from "../../../utils/value/constants.js";
+const H = {
   payout: "getPayout"
-}, y = (t) => !("data" in t);
-function lt(t) {
-  var h;
-  const C = d(() => y(t) ? null : t.data, [t]), o = d(() => y(t) ? t.id : null, [t]), m = V().endpoints[W[t.type]], { hideTitle: w, titleKey: S } = K(t), { withinModal: _ } = q(), { data: n, error: r, isFetching: b } = z(
-    d(
+};
+function nt(t) {
+  var D;
+  const s = K().endpoints[H[t.type]], { hideTitle: C, titleKey: g } = L(t), { withinModal: w } = I(), { data: i, error: n, isFetching: A } = M(
+    T(
       () => ({
-        fetchOptions: { enabled: !!o && !!m },
+        fetchOptions: { enabled: !!t.id && !!s },
         queryFn: async () => {
-          let a = null;
           switch (t.type) {
-            case "transaction":
-              a = { path: { transactionId: o } };
-              break;
             case "payout":
-              a = { query: { balanceAccountId: o, createdAt: t.date } };
-              break;
-            default:
-              break;
+              const a = { query: { balanceAccountId: t.id, createdAt: t.date } };
+              return s(j, { ...a });
           }
-          return m(k, { ...a });
         }
       }),
-      [o, m, t]
+      [s, t]
     )
-  ), F = t.type === "payout" ? t.id : n == null ? void 0 : n.balanceAccountId, P = t.type === "payout" ? t == null ? void 0 : t.balanceAccountDescription : t == null ? void 0 : t.balanceAccount, { balanceAccounts: i } = N(F, !P), D = d(() => {
-    if (r) {
+  ), m = t.id, b = t == null ? void 0 : t.balanceAccountDescription, { balanceAccounts: u } = B(m, !b), d = T(() => {
+    if (n) {
       let a;
       switch (t.type) {
-        case "transaction":
-          a = "transactions.details.errors.unavailable";
-          break;
         case "payout":
           a = "payouts.details.errors.unavailable";
           break;
       }
-      return R(r, a, t.onContactSupport);
+      return q(n, a, t.onContactSupport);
     }
-  }, [r, t.onContactSupport, t.type]), u = C ?? n, [f, x] = M(), v = O(async () => {
-    var a, s, T, A, I;
-    if (n && (y(t) && t.type === "transaction" || t.type === "payout")) {
-      const l = await ((T = (s = (a = t.dataCustomization) == null ? void 0 : a.details) == null ? void 0 : s.onDataRetrieve) == null ? void 0 : T.call(s, n));
-      x(
-        (I = (A = t.dataCustomization) == null ? void 0 : A.details) == null ? void 0 : I.fields.reduce((g, e) => j.has(e.key) || H.includes(e.key) || (e == null ? void 0 : e.visibility) === "hidden" ? g : { ...g, ...l != null && l[e.key] ? { [e.key]: l[e.key] } : {} }, {})
+  }, [n, t.onContactSupport, t.type]), y = i, [S, _] = P(), l = k(async () => {
+    var a, r, E, f, v;
+    if (i) {
+      const c = await ((E = (r = (a = t.dataCustomization) == null ? void 0 : a.details) == null ? void 0 : r.onDataRetrieve) == null ? void 0 : E.call(r, i));
+      _(
+        (v = (f = t.dataCustomization) == null ? void 0 : f.details) == null ? void 0 : v.fields.reduce((h, e) => N.has(e.key) || R.includes(e.key) || (e == null ? void 0 : e.visibility) === "hidden" ? h : { ...h, ...c != null && c[e.key] ? { [e.key]: c[e.key] } : {} }, {})
       );
     }
-  }, [n, t]), E = y(t) && t.type === "transaction" || t.type === "payout" ? t.dataCustomization : void 0;
-  return B(() => {
-    v();
-  }, [v]), /* @__PURE__ */ c("div", { className: "adyen-pe-overview-details", children: [
-    /* @__PURE__ */ c(J, { hideTitle: w, titleKey: S, forwardedToRoot: !_ }),
-    r && D && /* @__PURE__ */ c("div", { className: "adyen-pe-overview-details--error-container", children: /* @__PURE__ */ c(Y, { withImage: !0, ...D }) }),
-    t.type === "transaction" && /* @__PURE__ */ c(
-      U,
-      {
-        transaction: u ? {
-          ...u || k,
-          balanceAccount: (t == null ? void 0 : t.balanceAccount) || (i == null ? void 0 : i[0])
-        } : void 0,
-        error: !!(r && D),
-        isFetching: b,
-        extraFields: f,
-        dataCustomization: E
-      }
-    ),
-    t.type === "payout" && u && /* @__PURE__ */ c(
-      L,
+  }, [i, t]), F = t.dataCustomization;
+  return x(() => {
+    l();
+  }, [l]), /* @__PURE__ */ o("div", { className: "adyen-pe-overview-details", children: [
+    /* @__PURE__ */ o(Y, { hideTitle: C, titleKey: g, forwardedToRoot: !w }),
+    n && d && /* @__PURE__ */ o("div", { className: "adyen-pe-overview-details--error-container", children: /* @__PURE__ */ o(z, { withImage: !0, ...d }) }),
+    t.type === "payout" && y && /* @__PURE__ */ o(
+      O,
       {
-        balanceAccountId: o,
-        payout: u,
-        balanceAccountDescription: (t == null ? void 0 : t.balanceAccountDescription) || ((h = i == null ? void 0 : i[0]) == null ? void 0 : h.description),
-        isFetching: b,
-        extraFields: f,
-        dataCustomization: E
+        balanceAccountId: m,
+        payout: y,
+        balanceAccountDescription: (t == null ? void 0 : t.balanceAccountDescription) || ((D = u == null ? void 0 : u[0]) == null ? void 0 : D.description),
+        isFetching: A,
+        extraFields: S,
+        dataCustomization: F
       }
     )
   ] });
 }
 export {
-  lt as default
+  nt as default
 };

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

@@ -1,12 +1,11 @@
 import { useModalContext as r } from "../Modal/Modal.js";
-import { useState as n, useEffect as d } from "../../../external/preact/hooks/dist/hooks.module.js";
-import { boolOrFalse as c } from "../../../utils/value/bool.js";
+import { useState as d, useEffect as c } from "../../../external/preact/hooks/dist/hooks.module.js";
+import { boolOrFalse as n } from "../../../utils/value/bool.js";
 const f = {
-  transaction: "transactions.details.title",
   payout: "payouts.details.title"
 }, p = ({ hideTitle: e, type: o }) => {
-  const { withinModal: t } = r(), [i, s] = n(!1), a = i || c(e), l = f[o];
-  return d(() => {
+  const { withinModal: t } = r(), [i, s] = d(!1), a = i || n(e), l = f[o];
+  return c(() => {
     s(t);
   }, [t]), { hideTitle: a, titleKey: l };
 };

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

@@ -1,9 +1,9 @@
-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";
+import { jsx as u } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { ErrorMessageDisplay as i } from "../ErrorMessageDisplay/ErrorMessageDisplay.js";
+import { getErrorMessage as m } from "../../utils/getErrorMessage.js";
 const l = ({
-  error: r,
-  errorMessage: t,
+  error: t,
+  errorMessage: r,
   onContactSupport: e
 }) => {
   const {
@@ -12,10 +12,11 @@ const l = ({
     refreshComponent: s,
     translationValues: n,
     onContactSupport: p
-  } = i(r, t, e);
-  return /* @__PURE__ */ m(
-    u,
+  } = m(t, r, e);
+  return /* @__PURE__ */ u(
+    i,
     {
+      withHeaderOffset: !0,
       title: o,
       message: a,
       translationValues: n,

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

@@ -1,64 +1,84 @@
-import { useState as a, useRef as C, useMemo as i, useCallback as R } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import N from "../../../../../core/Context/useCoreContext.js";
-import q from "../../../Calendar/calendar/timerange/presets/yearToDate.js";
-import A from "../../../Calendar/calendar/timerange/presets/lastMonth.js";
-import E from "../../../Calendar/calendar/timerange/presets/thisMonth.js";
-import K from "../../../Calendar/calendar/timerange/presets/lastWeek.js";
-import Z from "../../../Calendar/calendar/timerange/presets/thisWeek.js";
-import W from "../../../Calendar/calendar/timerange/presets/lastNDays.js";
-const Y = () => Object.freeze({
-  "common.filters.types.date.rangeSelect.options.last7Days": W(7),
-  "common.filters.types.date.rangeSelect.options.last30Days": W(30),
-  "common.filters.types.date.rangeSelect.options.thisWeek": Z(),
-  "common.filters.types.date.rangeSelect.options.lastWeek": K(),
-  "common.filters.types.date.rangeSelect.options.thisMonth": E(),
-  "common.filters.types.date.rangeSelect.options.lastMonth": A(),
-  "common.filters.types.date.rangeSelect.options.yearToDate": q()
-}), _ = ({
-  now: r = Date.now(),
-  options: n,
-  selectedOption: m,
-  timezone: l
+import { useState as S, useRef as b, useMemo as l, useCallback as I } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import C from "../../../../../core/Context/useCoreContext.js";
+import k from "../../../Calendar/calendar/timerange/presets/yearToDate.js";
+import K from "../../../Calendar/calendar/timerange/presets/lastMonth.js";
+import z from "../../../Calendar/calendar/timerange/presets/thisMonth.js";
+import F from "../../../Calendar/calendar/timerange/presets/lastWeek.js";
+import v from "../../../Calendar/calendar/timerange/presets/thisWeek.js";
+import u from "../../../Calendar/calendar/timerange/presets/lastNDays.js";
+const n = Object.freeze({
+  LAST_7_DAYS: "common.filters.types.date.rangeSelect.options.last7Days",
+  LAST_30_DAYS: "common.filters.types.date.rangeSelect.options.last30Days",
+  LAST_90_DAYS: "common.filters.types.date.rangeSelect.options.last90Days",
+  THIS_WEEK: "common.filters.types.date.rangeSelect.options.thisWeek",
+  LAST_WEEK: "common.filters.types.date.rangeSelect.options.lastWeek",
+  THIS_MONTH: "common.filters.types.date.rangeSelect.options.thisMonth",
+  LAST_MONTH: "common.filters.types.date.rangeSelect.options.lastMonth",
+  YEAR_TO_DATE: "common.filters.types.date.rangeSelect.options.yearToDate"
+}), U = ({
+  exclude: t = []
+} = {}) => {
+  const o = {
+    [n.LAST_7_DAYS]: u(7),
+    [n.LAST_30_DAYS]: u(30),
+    [n.LAST_90_DAYS]: u(90),
+    [n.THIS_WEEK]: v(),
+    [n.LAST_WEEK]: F(),
+    [n.THIS_MONTH]: z(),
+    [n.LAST_MONTH]: K(),
+    [n.YEAR_TO_DATE]: k()
+  };
+  if (!(t != null && t.length)) return Object.freeze(o);
+  const i = new Set(t);
+  return Object.freeze(
+    Object.fromEntries(Object.entries(o).filter(([a]) => !i.has(a)))
+  );
+}, V = ({
+  now: t = Date.now(),
+  options: o,
+  selectedOption: i,
+  timezone: a
 }) => {
-  const { i18n: p } = N(), [j, S] = a(), [M, y] = a(), [f, u] = a(), O = C(), h = C(), [e, D, s] = i(() => {
-    const o = p.get("common.filters.types.date.rangeSelect.options.custom"), t = Object.keys(n), c = Object.freeze(t.map((d) => p.get(d)));
-    return [o, (d, v = c) => {
-      const z = v.findIndex((I) => I === d);
-      return n[t[z]];
-    }, c];
-  }, [p, n]), [T, b] = a(m === e), k = i(() => Object.freeze([...s, e]), [e, s]), x = i(
-    () => T ? k : s,
-    [T, s, k]
-  ), g = R(
-    (o) => {
-      const t = D(o, s);
-      t && (S(t.from), y(t.to), b(!1), u(o));
+  const { i18n: p } = C(), [M, A] = S(), [R, g] = S(), [f, T] = S(), E = b(), y = b(), [s, D, c] = l(() => {
+    const r = p.get("common.filters.types.date.rangeSelect.options.custom"), e = Object.keys(o), m = Object.freeze(e.map((O) => p.get(O)));
+    return [r, (O, N = m) => {
+      const Y = N.findIndex((H) => H === O);
+      return o[e[Y]];
+    }, m];
+  }, [p, o]), [d, h] = S(i === s), L = l(() => Object.freeze([...c, s]), [s, c]), W = l(
+    () => d ? L : c,
+    [d, c, L]
+  ), _ = I(
+    (r) => {
+      const e = D(r, c);
+      e && (A(e.from), g(e.to), h(!1), T(r));
     },
-    [e, D, f, s]
-  ), F = R(() => {
-    S(void 0), y(void 0), b(!0), u(e);
-  }, [e]);
-  return i(() => {
-    m === e ? u(e) : g(m);
-  }, []), i(() => {
-    var o;
-    if (O.current !== r || h.current !== l) {
-      const t = Object.values(n);
-      t.forEach((c) => {
-        c.now = r, c.timezone = l;
-      }), O.current = r, h.current = (o = t[0]) == null ? void 0 : o.timezone, g(f);
+    [s, D, f, c]
+  ), j = I(() => {
+    A(void 0), g(void 0), h(!0), T(s);
+  }, [s]);
+  return l(() => {
+    i === s ? T(s) : _(i);
+  }, []), l(() => {
+    var r;
+    if (E.current !== t || y.current !== a) {
+      const e = Object.values(o);
+      e.forEach((m) => {
+        m.now = t, m.timezone = a;
+      }), E.current = t, y.current = (r = e[0]) == null ? void 0 : r.timezone, _(f);
     }
-  }, [r, l, n]), {
-    customSelection: F,
-    from: j,
-    onSelection: g,
-    options: x,
+  }, [t, a, o]), {
+    customSelection: j,
+    from: M,
+    onSelection: _,
+    options: W,
     selectedOption: f,
-    to: M
+    to: R
   };
 };
 export {
-  _ as default,
-  Y as getTimeRangeSelectionDefaultPresetOptions,
-  _ as useTimeRangeSelection
+  n as TIME_RANGE_SELECTION_PRESET_OPTION_KEYS,
+  V as default,
+  U as getTimeRangeSelectionDefaultPresetOptions,
+  V as useTimeRangeSelection
 };

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

@@ -1,8 +1,8 @@
-import { jsx as o } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { jsx as i } 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) });
+import { DIVIDER_CLASS_NAMES as r } from "./constants.js";
+const p = ({ className: o, variant: t = "horizontal" }) => /* @__PURE__ */ i("hr", { className: m(r.base, t === "vertical" && r.vertical, o) });
 export {
-  a as Divider
+  p as Divider
 };

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

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

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

@@ -1,74 +1,87 @@
 import { jsx as e } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import I from "classnames";
-import u from "../Typography/Typography.js";
-import N from "../../../core/Context/useCoreContext.js";
-import { TypographyVariant as _, TypographyElement as P } from "../Typography/types.js";
-import { useCallback as C } from "../../../external/preact/hooks/dist/hooks.module.js";
+import A from "classnames";
+import _ from "../Typography/Typography.js";
+import C from "../../../core/Context/useCoreContext.js";
+import { TypographyVariant as u, TypographyElement as M } from "../Typography/types.js";
+import { useCallback as S } from "../../../external/preact/hooks/dist/hooks.module.js";
 /* empty css                         */
-import { Fragment as f } from "../../../external/preact/dist/preact.module.js";
-import g from "../Button/Button.js";
-const r = "adyen-pe-error-message-display", y = 680, t = {
+import { Fragment as y } from "../../../external/preact/dist/preact.module.js";
+import f from "../Button/Button.js";
+const r = "adyen-pe-error-message-display", g = 680, i = {
   base: r,
   base_absolutePosition: r + "--absolute-position",
   base_centered: r + "--centered",
   base_outlined: r + "--outlined",
   base_withBackground: r + "--with-background",
+  base_withHeaderOffset: r + "--with-header-offset",
+  base_condensed: r + "--condensed",
   button: r + "__button",
   illustration: r + "__illustration"
-}, M = () => /* @__PURE__ */ e(f, { children: [
+}, D = () => /* @__PURE__ */ e(y, { children: [
   " ",
   /* @__PURE__ */ e("br", {}),
   " "
-] }), K = ({
-  title: x,
-  message: n,
-  imageDesktop: a,
-  imageMobile: d,
-  withImage: E,
-  centered: v,
-  refreshComponent: p,
-  onContactSupport: o,
-  translationValues: s,
-  absolutePosition: T = !0,
-  outlined: b = !0,
+] }), R = ({
+  title: w,
+  message: l,
+  imageDesktop: n,
+  imageMobile: m,
+  withImage: v,
+  centered: x,
+  refreshComponent: b,
+  onContactSupport: s,
+  translationValues: a,
+  absolutePosition: E = !0,
+  outlined: h = !0,
   renderSecondaryButton: c,
-  withBackground: k
+  withBackground: T,
+  withHeaderOffset: k,
+  condensed: O
 }) => {
-  const { i18n: i, updateCore: w, getImageAsset: l } = N(), A = C(
-    (m) => Array.isArray(m) ? m.map((h, B) => /* @__PURE__ */ e(f, { children: [
-      B > 0 && /* @__PURE__ */ e(M, {}),
-      i.get(h),
-      s == null ? void 0 : s[h]
-    ] })) : i.get(m),
-    [i, s]
+  const { i18n: t, updateCore: B, getImageAsset: o } = C(), N = S(
+    (d) => Array.isArray(d) ? d.map((p, P) => /* @__PURE__ */ e(y, { children: [
+      P > 0 && /* @__PURE__ */ e(D, {}),
+      t.get(p),
+      a == null ? void 0 : a[p]
+    ] })) : t.get(d),
+    [t, a]
   );
   return /* @__PURE__ */ e(
     "div",
     {
-      className: I(t.base, {
-        [t.base_absolutePosition]: T,
-        [t.base_centered]: v,
-        [t.base_outlined]: b,
-        [t.base_withBackground]: k !== !1 && !b
+      className: A(i.base, {
+        [i.base_absolutePosition]: E,
+        [i.base_centered]: x,
+        [i.base_outlined]: h,
+        [i.base_withBackground]: T !== !1 && !h,
+        [i.base_withHeaderOffset]: k,
+        [i.base_condensed]: O
       }),
       children: [
-        (a || d || E) && /* @__PURE__ */ e("div", { className: t.illustration, children: /* @__PURE__ */ e("picture", { children: [
-          /* @__PURE__ */ e("source", { type: "image/svg+xml", media: `(min-width: ${y}px)`, srcSet: a }),
-          /* @__PURE__ */ e("source", { type: "image/svg+xml", media: `(max-width: ${y}px)`, srcSet: d }),
-          /* @__PURE__ */ e("img", { srcSet: a ?? (l == null ? void 0 : l({ name: "no-results" })), alt: "" })
+        (n || m || v) && /* @__PURE__ */ e("div", { className: i.illustration, children: /* @__PURE__ */ e("picture", { children: [
+          /* @__PURE__ */ e("source", { type: "image/svg+xml", media: `(min-width: ${g}px)`, srcSet: n }),
+          /* @__PURE__ */ e(
+            "source",
+            {
+              type: "image/svg+xml",
+              media: `(max-width: ${g}px)`,
+              srcSet: m ?? (o == null ? void 0 : o({ name: "wrong-environment", subFolder: "images/small" }))
+            }
+          ),
+          /* @__PURE__ */ e("img", { srcSet: n ?? (o == null ? void 0 : o({ name: "wrong-environment" })), alt: "" })
         ] }) }),
-        /* @__PURE__ */ e(u, { el: P.DIV, variant: _.TITLE, children: i.get(x) }),
-        n && /* @__PURE__ */ e(u, { variant: _.BODY, children: A(n) }),
-        (o || p || c) && /* @__PURE__ */ e("div", { className: t.button, children: [
+        /* @__PURE__ */ e(_, { el: M.DIV, variant: u.TITLE, children: t.get(w) }),
+        l && /* @__PURE__ */ e(_, { variant: u.BODY, children: N(l) }),
+        (s || b || c) && /* @__PURE__ */ e("div", { className: i.button, children: [
           c && c(),
-          o && /* @__PURE__ */ e(g, { onClick: o, children: i.get("common.actions.contactSupport.labels.reachOut") }),
-          !o && p && /* @__PURE__ */ e(g, { onClick: w, children: i.get("common.actions.refresh.labels.default") })
+          s && /* @__PURE__ */ e(f, { onClick: s, children: t.get("common.actions.contactSupport.labels.reachOut") }),
+          !s && b && /* @__PURE__ */ e(f, { onClick: B, children: t.get("common.actions.refresh.labels.default") })
         ] })
       ]
     }
   );
 };
 export {
-  K as ErrorMessageDisplay,
-  y as IMAGE_BREAKPOINT_MEDIUM_PX
+  R as ErrorMessageDisplay,
+  g as IMAGE_BREAKPOINT_MEDIUM_PX
 };