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

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

@@ -1,52 +1,50 @@
-import { jsx as c } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import y from "../DataGridCell.js";
-import T from "./Icon.js";
-import B from "../../Link/Link.js";
-import { ButtonVariant as D } from "../../Button/types.js";
-import a from "classnames";
-import S from "../../Button/Button.js";
-import { Fragment as I } from "../../../../external/preact/dist/preact.module.js";
-const L = (o) => !!o && typeof o == "object" && "value" in o, _ = (o) => !!o && typeof o == "object" && o.type === "icon", O = (o) => !!o && typeof o == "object" && o.type === "button", w = (o) => !!o && typeof o == "object" && o.type === "link", Y = ({
-  columns: o,
-  customCells: t,
-  item: l,
-  rowIndex: j
-}) => /* @__PURE__ */ c(I, { children: o.map(({ key: r, position: s }) => {
-  var g, u, m, b, d, h, v;
-  if (t != null && t[r])
-    return /* @__PURE__ */ c(y, { "aria-labelledby": String(r), column: r, position: s, children: /* @__PURE__ */ c("div", {
+import { jsx as a } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import p from "../DataGridCell.js";
+import b from "./Icon.js";
+import h from "../../Link/Link.js";
+import { ButtonVariant as v } from "../../Button/types.js";
+import i from "classnames";
+import N from "../../Button/Button.js";
+import { Fragment as y } from "../../../../external/preact/dist/preact.module.js";
+const _ = (t) => !!t && typeof t == "object" && "value" in t, u = (t) => !!t && typeof t == "object" && t.type === "icon", j = (t) => !!t && typeof t == "object" && t.type === "button", x = (t) => !!t && typeof t == "object" && t.type === "link", w = ({
+  columns: t,
+  customCells: l,
+  item: r,
+  rowIndex: g
+}) => /* @__PURE__ */ a(y, { children: t.map(({ key: o, position: e }) => {
+  if (l?.[o])
+    return /* @__PURE__ */ a(p, { "aria-labelledby": String(o), column: o, position: e, children: /* @__PURE__ */ a("div", {
       style: { width: "min-content" },
       // TODO create safeguard to remove "as any" assertion
-      children: t[r]({
-        key: r,
-        value: l[r],
-        item: l,
-        rowIndex: j
+      children: l[o]({
+        key: o,
+        value: r[o],
+        item: r,
+        rowIndex: g
       })
-    }) }, r);
-  const n = l[r], { value: i, type: f } = L(n) ? n : { value: n, type: "text" }, e = _(n) ? { url: (g = n == null ? void 0 : n.config) == null ? void 0 : g.src, alt: ((u = n == null ? void 0 : n.config) == null ? void 0 : u.alt) !== void 0 && ((m = n == null ? void 0 : n.config) == null ? void 0 : m.alt) !== null ? (b = n == null ? void 0 : n.config) == null ? void 0 : b.alt : n.value } : void 0, p = O(n) ? (x) => {
-    var N;
-    x.stopPropagation(), (N = n == null ? void 0 : n.config) == null || N.action();
+    }) }, o);
+  const n = r[o], { value: c, type: s } = _(n) ? n : { value: n, type: "text" }, f = u(n) ? { url: n?.config?.src, alt: n?.config?.alt !== void 0 && n?.config?.alt !== null ? n?.config?.alt : n.value } : void 0, d = j(n) ? (m) => {
+    m.stopPropagation(), n?.config?.action();
   } : void 0;
-  return /* @__PURE__ */ c(y, { "aria-labelledby": String(r), column: r, position: s, children: /* @__PURE__ */ c("div", { className: "adyen-pe-data-grid__cell-value", children: [
-    _(n) && n.config && (e == null ? void 0 : e.url) && /* @__PURE__ */ c("div", { className: a("adyen-pe-data-grid__icon-cell", (d = n == null ? void 0 : n.config) == null ? void 0 : d.className), children: [
-      /* @__PURE__ */ c(T, { ...e }),
-      i.trim() && /* @__PURE__ */ c("span", { children: i })
+  return /* @__PURE__ */ a(p, { "aria-labelledby": String(o), column: o, position: e, children: /* @__PURE__ */ a("div", { className: "adyen-pe-data-grid__cell-value", children: [
+    u(n) && n.config && f?.url && /* @__PURE__ */ a("div", { className: i("adyen-pe-data-grid__icon-cell", n?.config?.className), children: [
+      /* @__PURE__ */ a(b, { ...f }),
+      c.trim() && /* @__PURE__ */ a("span", { children: c })
     ] }),
-    f === "text" && /* @__PURE__ */ c("span", { className: a((h = n == null ? void 0 : n.config) == null ? void 0 : h.className), children: i }),
-    f === "button" && n.config && p && /* @__PURE__ */ c(S, { className: a((v = n.config) == null ? void 0 : v.className), onClick: p, variant: D.SECONDARY, children: i }),
-    w(n) && n.config && /* @__PURE__ */ c(
-      B,
+    s === "text" && /* @__PURE__ */ a("span", { className: i(n?.config?.className), children: c }),
+    s === "button" && n.config && d && /* @__PURE__ */ a(N, { className: i(n.config?.className), onClick: d, variant: v.SECONDARY, children: c }),
+    x(n) && n.config && /* @__PURE__ */ a(
+      h,
       {
         classNames: n.config.className ? [n.config.className] : [],
         href: n.config.href,
         target: n.config.target,
-        children: i
+        children: c
       }
     )
-  ] }) }, r);
+  ] }) }, o);
 }) });
 export {
-  Y as TableCells,
-  L as isCustomDataObject
+  w as TableCells,
+  _ as isCustomDataObject
 };

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

@@ -1,28 +1,27 @@
-import { jsx as n } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import l from "classnames";
-import { useDataGridContext as c } from "../hooks/useDataGridContext.js";
-import { useRef as o, useEffect as s } from "../../../../external/preact/hooks/dist/hooks.module.js";
-const f = ({ cellKey: e, position: t, label: i }) => {
-  const { registerCells: a } = c(), r = o(null);
-  return s(() => {
-    var d;
+import { jsx as d } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import i from "classnames";
+import { useDataGridContext as l } from "../hooks/useDataGridContext.js";
+import { useRef as c, useEffect as o } from "../../../../external/preact/hooks/dist/hooks.module.js";
+const _ = ({ cellKey: e, position: t, label: n }) => {
+  const { registerCells: a } = l(), r = c(null);
+  return o(() => {
     r.current && a({
       column: e,
-      width: (d = r.current) == null ? void 0 : d.getBoundingClientRect().width
+      width: r.current?.getBoundingClientRect().width
     });
-  }, [e, a]), /* @__PURE__ */ n(
+  }, [e, a]), /* @__PURE__ */ d(
     "div",
     {
       role: "columnheader",
       id: String(e),
-      className: l("adyen-pe-data-grid__cell adyen-pe-data-grid__cell--heading", {
+      className: i("adyen-pe-data-grid__cell adyen-pe-data-grid__cell--heading", {
         "adyen-pe-data-grid__cell--right": t === "right",
         "adyen-pe-data-grid__cell--center": t === "center"
       }),
-      children: /* @__PURE__ */ n("div", { ref: r, className: "adyen-pe-data-grid__cell--heading-content", children: i })
+      children: /* @__PURE__ */ d("div", { ref: r, className: "adyen-pe-data-grid__cell--heading-content", children: n })
     }
   );
 };
 export {
-  f as TableHeaderCell
+  _ as TableHeaderCell
 };

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

@@ -1,76 +1,73 @@
-import { useReducer as I, useCallback as a } from "../../../../external/preact/hooks/dist/hooks.module.js";
+import { useReducer as I, useCallback as o } from "../../../../external/preact/hooks/dist/hooks.module.js";
 import p from "../../../../hooks/useReflex.js";
-import { InteractionKeyCode as s } from "../../../types.js";
-import { INITIAL_STATE as R } from "../DataGrid.js";
-const T = ({ totalRows: x }) => {
-  const [i, o] = I(
-    (e, t) => {
-      const n = x;
-      if (n > 1) {
-        const d = t.index;
-        if (d < n && d >= 0)
-          return t.type === "ACTIVE" ? Object.freeze({ ...e, index: t.index ?? 0, activeIndex: t.index }) : Object.freeze({ ...e, index: t.index ?? 0, activeIndex: -1 });
+import { InteractionKeyCode as n } from "../../../types.js";
+import { INITIAL_STATE as u } from "../DataGrid.js";
+const T = ({ totalRows: r }) => {
+  const [t, d] = I(
+    (e, i) => {
+      const s = r;
+      if (s > 1) {
+        const x = i.index;
+        if (x < s && x >= 0)
+          return i.type === "ACTIVE" ? Object.freeze({ ...e, index: i.index ?? 0, activeIndex: i.index }) : Object.freeze({ ...e, index: i.index ?? 0, activeIndex: -1 });
       }
       return e;
     },
-    R
-  ), r = p(
-    a(
+    u
+  ), a = p(
+    o(
       (e) => {
-        var n;
         if (!(e instanceof Element)) return;
-        const t = Number((n = e.dataset) == null ? void 0 : n.index);
-        i.activeIndex === -1 && t === 0 || t === i.index ? e.setAttribute("tabindex", "0") : e.setAttribute("tabindex", "-1"), t === i.activeIndex && (e == null || e.focus());
+        const i = Number(e.dataset?.index);
+        t.activeIndex === -1 && i === 0 || i === t.index ? e.setAttribute("tabindex", "0") : e.setAttribute("tabindex", "-1"), i === t.activeIndex && e?.focus();
       },
-      [i.activeIndex, i.index]
+      [t.activeIndex, t.index]
     )
-  ), c = a(
+  ), c = o(
     (e) => {
-      var n, d;
-      if (!(((n = e.target) == null ? void 0 : n.getAttribute("role")) === "row")) {
-        e.code === s.ARROW_LEFT && o({
+      if (!(e.target?.getAttribute("role") === "row")) {
+        e.code === n.ARROW_LEFT && d({
           type: "ACTIVE",
-          index: i.index
+          index: t.index
         });
         return;
       }
       switch (e.code) {
-        case s.ARROW_DOWN:
-        case s.ARROW_UP:
-          o({
+        case n.ARROW_DOWN:
+        case n.ARROW_UP:
+          d({
             type: "ACTIVE",
-            index: e.code === s.ARROW_DOWN ? i.index + 1 : i.index - 1
+            index: e.code === n.ARROW_DOWN ? t.index + 1 : t.index - 1
           });
           break;
-        case s.HOME:
-          o({
+        case n.HOME:
+          d({
             type: "ACTIVE",
             index: 0
           });
           break;
-        case s.END:
-          o({
+        case n.END:
+          d({
             type: "ACTIVE",
-            index: x - 1
+            index: r - 1
           });
           break;
-        case s.ENTER:
-          (d = e.currentTarget) == null || d.click();
+        case n.ENTER:
+          e.currentTarget?.click();
           break;
         default:
           return;
       }
       e.stopPropagation();
     },
-    [x, i.index]
-  ), f = a(
-    (e) => (t) => {
-      var d;
-      (!(((d = t.target) == null ? void 0 : d.localName) === "tr") || i.index === -1) && o({ type: "CURRENT", index: e });
+    [r, t.index]
+  ), f = o(
+    (e) => (i) => {
+      (!(i.target?.localName === "tr") || t.index === -1) && d({ type: "CURRENT", index: e });
     },
-    [i.index]
+    [t.index]
   );
-  return { listeners: { onKeyDownCapture: c, onFocusCapture: f }, ref: r, activeIndex: i.activeIndex, currentIndex: i.index };
+  return { listeners: { onKeyDownCapture: c, onFocusCapture: f }, ref: a, activeIndex: t.activeIndex, currentIndex: t.index };
 };
 export {
   T as useInteractiveDataGrid

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

@@ -1,99 +1,72 @@
-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 l, useState as C, useCallback as g, useEffect as w } from "../../../external/preact/hooks/dist/hooks.module.js";
+import { useModalContext as S } from "../Modal/Modal.js";
+import { useFetch as _ } from "../../../hooks/useFetch.js";
+import { PayoutData as F } from "../../external/PayoutDetails/components/PayoutData.js";
+import P from "../../../hooks/useBalanceAccounts.js";
+import { getErrorMessage as k } from "../../utils/getErrorMessage.js";
+import { ErrorMessageDisplay as x } from "../ErrorMessageDisplay/ErrorMessageDisplay.js";
+import { useDataOverviewDetailsTitle as I } from "./useDataOverviewDetailsTitle.js";
+import { TX_DETAILS_RESERVED_FIELDS_SET as M } from "../../external/TransactionDetails/constants.js";
+import { PAYOUT_TABLE_FIELDS as O } from "../../external/PayoutsOverview/components/PayoutsTable/PayoutsTable.js";
+import { Header as p } from "../Header/Header.js";
+import { useConfigContext as B } from "../../../core/ConfigContext/context.js";
+import { EMPTY_OBJECT as q } from "../../../utils/value/constants.js";
+const z = {
   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 $(t) {
+  const r = B().endpoints[z[t.type]], { hideTitle: y, titleKey: f } = I(t), { withinModal: D } = S(), { data: i, error: n, isFetching: E } = _(
+    l(
       () => ({
-        fetchOptions: { enabled: !!o && !!m },
+        fetchOptions: { enabled: !!t.id && !!r },
         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 e = { query: { balanceAccountId: t.id, createdAt: t.date } };
+              return r(q, { ...e });
           }
-          return m(k, { ...a });
         }
       }),
-      [o, m, t]
+      [r, 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) {
-      let a;
+  ), s = t.id, v = t?.balanceAccountDescription, { balanceAccounts: h } = P(s, !v), c = l(() => {
+    if (n) {
+      let e;
       switch (t.type) {
-        case "transaction":
-          a = "transactions.details.errors.unavailable";
-          break;
         case "payout":
-          a = "payouts.details.errors.unavailable";
+          e = "payouts.details.errors.unavailable";
           break;
       }
-      return R(r, a, t.onContactSupport);
+      return k(n, e, 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]), u = i, [T, A] = C(), d = g(async () => {
+    if (i) {
+      const e = await t.dataCustomization?.details?.onDataRetrieve?.(i);
+      A(
+        t.dataCustomization?.details?.fields.reduce((m, a) => M.has(a.key) || O.includes(a.key) || a?.visibility === "hidden" ? m : { ...m, ...e?.[a.key] ? { [a.key]: e[a.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]), b = t.dataCustomization;
+  return w(() => {
+    d();
+  }, [d]), /* @__PURE__ */ o("div", { className: "adyen-pe-overview-details", children: [
+    /* @__PURE__ */ o(p, { hideTitle: y, titleKey: f, forwardedToRoot: !D }),
+    n && c && /* @__PURE__ */ o("div", { className: "adyen-pe-overview-details--error-container", children: /* @__PURE__ */ o(x, { withImage: !0, ...c }) }),
+    t.type === "payout" && u && /* @__PURE__ */ o(
+      F,
       {
-        balanceAccountId: o,
+        balanceAccountId: s,
         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
+        balanceAccountDescription: t?.balanceAccountDescription || h?.[0]?.description,
+        isFetching: E,
+        extraFields: T,
+        dataCustomization: b
       }
     )
   ] });
 }
 export {
-  lt as default
+  $ 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/DataOverviewDisplay/DataDetailsModal.js

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

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/DatePicker.js

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