@adyen/adyen-platform-experience-web 1.1.0 → 1.2.0

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

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

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

@@ -1,71 +1,51 @@
+import { jsx as s } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import c from "classnames";
 import { memo as N } from "../../../../../external/preact/compat/dist/compat.module.js";
 import E from "../../../SVGIcons/CheckedBox.js";
 import C from "../../../SVGIcons/UncheckedBox.js";
 import d from "../../../SVGIcons/Checkmark.js";
 import { DROPDOWN_ELEMENT_CHECKMARK_CLASS as S, DROPDOWN_ELEMENT_CLASS as D, DROPDOWN_ELEMENT_ACTIVE_CLASS as _, DROPDOWN_ELEMENT_DISABLED_CLASS as p, DROPDOWN_ELEMENT_CONTENT_CLASS as L, DROPDOWN_ELEMENT_ICON_CLASS as O, DROPDOWN_ELEMENT_CHECKBOX_CLASS as f } from "../constants.js";
-import { jsx as s } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import u from "../../../Img/Img.js";
 import { Fragment as h } from "../../../../../external/preact/dist/preact.module.js";
 import { boolOrFalse as A } from "../../../../../utils/value/bool.js";
-const T = (e) => e.multiSelect ? s("span", {
-  className: f,
-  children: e.selected ? s(E, {
-    role: "presentation"
-  }) : s(C, {
-    role: "presentation"
-  })
-}) : null, M = (e) => e.multiSelect ? null : s("span", {
-  className: S,
-  children: e.selected && s(d, {
-    role: "presentation"
-  })
-}), w = (e) => s(h, {
-  children: [T(e), s("div", {
-    className: e.contentClassName,
-    children: [e.item.icon && s(u, {
-      className: e.iconClassName,
-      alt: e.item.name,
-      src: e.item.icon
-    }), s("span", {
-      children: e.item.name
-    })]
-  }), M(e)]
-}), b = ({
-  item: e,
-  multiSelect: n,
-  onKeyDown: t,
-  onSelect: r,
-  renderListItem: i,
-  selected: l
-}) => {
+const T = (e) => e.multiSelect ? /* @__PURE__ */ s("span", { className: f, children: e.selected ? /* @__PURE__ */ s(E, { role: "presentation" }) : /* @__PURE__ */ s(C, { role: "presentation" }) }) : null, b = (e) => e.multiSelect ? null : /* @__PURE__ */ s("span", { className: S, children: e.selected && /* @__PURE__ */ s(d, { role: "presentation" }) }), F = (e) => /* @__PURE__ */ s(h, { children: [
+  T(e),
+  /* @__PURE__ */ s("div", { className: e.contentClassName, children: [
+    e.item.icon && /* @__PURE__ */ s(u, { className: e.iconClassName, alt: e.item.name, src: e.item.icon }),
+    /* @__PURE__ */ s("span", { children: e.item.name })
+  ] }),
+  b(e)
+] }), M = ({ item: e, multiSelect: n, onKeyDown: t, onSelect: r, renderListItem: i, selected: l }) => {
   const o = !!e.disabled, m = A(e.disabled) || null, a = c(D, {
     [_]: l,
     [p]: o
   });
-  return s("li", {
-    "aria-disabled": o,
-    "aria-selected": l,
-    className: a,
-    "data-disabled": m,
-    "data-value": e.id,
-    onClick: r,
-    onKeyDown: t,
-    title: e.name,
-    role: "option",
-    tabIndex: -1,
-    children: i({
-      item: e,
-      multiSelect: n,
-      selected: l,
-      contentClassName: L,
-      iconClassName: O
-    })
-  });
-}, F = N(b);
+  return /* @__PURE__ */ s(
+    "li",
+    {
+      "aria-disabled": o,
+      "aria-selected": l,
+      className: a,
+      "data-disabled": m,
+      "data-value": e.id,
+      onClick: r,
+      onKeyDown: t,
+      title: e.name,
+      role: "option",
+      tabIndex: -1,
+      children: i({
+        item: e,
+        multiSelect: n,
+        selected: l,
+        contentClassName: L,
+        iconClassName: O
+      })
+    }
+  );
+}, H = N(M);
 export {
-  F as default,
+  H as default,
   T as renderDefaultMultiSelectionCheckedness,
-  M as renderDefaultSingleSelectionCheckedness,
-  w as renderListItemDefault
+  b as renderDefaultSingleSelectionCheckedness,
+  F as renderListItemDefault
 };

package/dist/es/components/internal/FormFields/Select/hooks/useSelect.js

@@ -1,33 +1,34 @@
-import { useCallback as i, useState as p, useEffect as O } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { useCallback as i, useState as O, useEffect as g } from "../../../../../external/preact/hooks/dist/hooks.module.js";
 import { EMPTY_ARRAY as t } from "../../../../../utils/value/constants.js";
-const g = ({
-  items: f,
-  multiSelect: r,
-  selected: l
-}) => {
-  const a = i((c = t) => {
-    const e = t.concat(c ?? t).filter(Boolean), n = f.filter((b) => e.includes(b.id)), o = r ? n : n.slice(0, 1);
-    return o.length ? Object.freeze(o) : t;
-  }, [f, r]), [d, s] = p(a(l)), u = i((c = t) => {
-    const e = c.filter((n) => f.includes(n));
-    s(e.length ? Object.freeze(e) : t);
-  }, [f, s]), x = i((c) => {
-    s((e) => {
-      const n = e.indexOf(c);
-      if (n < 0)
-        return Object.freeze((r ? e : t).concat(c));
-      if (!r)
-        return e;
-      const o = [...e];
-      return o.splice(n, 1), o.length ? Object.freeze(o) : t;
-    });
-  }, [r, s]);
-  return O(() => s(a(l)), [a, l, s]), {
-    resetSelection: u,
-    select: x,
-    selection: d
-  };
-}, _ = g;
+const h = ({ items: f, multiSelect: r, selected: l }) => {
+  const a = i(
+    (c = t) => {
+      const e = t.concat(c ?? t).filter(Boolean), n = f.filter((x) => e.includes(x.id)), o = r ? n : n.slice(0, 1);
+      return o.length ? Object.freeze(o) : t;
+    },
+    [f, r]
+  ), [d, s] = O(a(l)), u = i(
+    (c = t) => {
+      const e = c.filter((n) => f.includes(n));
+      s(e.length ? Object.freeze(e) : t);
+    },
+    [f, s]
+  ), b = i(
+    (c) => {
+      s((e) => {
+        const n = e.indexOf(c);
+        if (n < 0)
+          return Object.freeze((r ? e : t).concat(c));
+        if (!r)
+          return e;
+        const o = [...e];
+        return o.splice(n, 1), o.length ? Object.freeze(o) : t;
+      });
+    },
+    [r, s]
+  );
+  return g(() => s(a(l)), [a, l, s]), { resetSelection: u, select: b, selection: d };
+}, z = h;
 export {
-  _ as default
+  z as default
 };

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

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

package/dist/es/components/internal/Header/Header.scss.js

@@ -0,0 +1,4 @@
+const e = "";
+export {
+  e as default
+};

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

@@ -0,0 +1,36 @@
+import { jsx as t } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import "./Icon.scss.js";
+import m from "classnames";
+import { useState as p, 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"),
+  "checkmark-square-fill": () => import("../../../images/icons/checkmark-square-fill.svg.js"),
+  checkmark: () => import("../../../images/icons/checkmark.svg.js"),
+  "chevron-down": () => import("../../../images/icons/chevron-down.svg.js"),
+  "chevron-left": () => import("../../../images/icons/chevron-left.svg.js"),
+  "chevron-right": () => import("../../../images/icons/chevron-right.svg.js"),
+  "chevron-up": () => import("../../../images/icons/chevron-up.svg.js"),
+  copy: () => import("../../../images/icons/copy.svg.js"),
+  "cross-circle-fill": () => import("../../../images/icons/cross-circle-fill.svg.js"),
+  cross: () => import("../../../images/icons/cross.svg.js"),
+  download: () => import("../../../images/icons/download.svg.js"),
+  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-circle-outline": () => import("../../../images/icons/plus-circle-outline.svg.js"),
+  square: () => import("../../../images/icons/square.svg.js"),
+  "warning-filled": () => import("../../../images/icons/warning-filled.svg.js"),
+  warning: () => import("../../../images/icons/warning.svg.js")
+}, a = ({ className: n, name: o, ...c }) => {
+  const [r, i] = p(null);
+  return s(() => {
+    e[o] ? e[o]().then(({ default: l }) => {
+      i(/* @__PURE__ */ t(l, {}));
+    }) : (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 });
+}, g = a;
+export {
+  a as Icon,
+  g as default
+};

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

@@ -0,0 +1,4 @@
+const o = "";
+export {
+  o as default
+};

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

@@ -1,26 +1,13 @@
-import t from "classnames";
-import { useImageUrl as i } from "../../../hooks/useImageUrl/useImageUrl.js";
-import { useMemo as p } from "../../../external/preact/hooks/dist/hooks.module.js";
-import { jsx as c } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-const l = ({
-  folder: m = "components/",
-  className: r,
-  alt: e,
-  name: s,
-  extension: o
-}) => {
-  const a = i({
-    options: p(() => ({
-      imageFolder: m,
-      extension: o
-    }), [o, m]),
+import { jsx as t } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import i from "classnames";
+import { useImageUrl as p } from "../../../hooks/useImageUrl.js";
+import { useMemo as c } from "../../../external/preact/hooks/dist/hooks.module.js";
+const l = ({ folder: m = "components/", className: r, alt: e, name: s, extension: o }) => {
+  const a = p({
+    options: c(() => ({ imageFolder: m, extension: o }), [o, m]),
     name: s
   });
-  return c("img", {
-    className: t("adyen-pe__image", r),
-    alt: e,
-    src: a
-  });
+  return /* @__PURE__ */ t("img", { className: i("adyen-pe__image", r), alt: e, src: a });
 };
 export {
   l as Image

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

@@ -1,38 +1,22 @@
-import { useState as p, useRef as N, useEffect as y } from "../../../external/preact/hooks/dist/hooks.module.js";
-import E from "classnames";
-import "./Img.scss.js";
 import { jsx as n } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useState as p, useRef as y, useEffect as N } from "../../../external/preact/hooks/dist/hooks.module.js";
+import h from "classnames";
+import "./Img.scss.js";
 function L(s) {
-  const {
-    backgroundUrl: a = "",
-    className: c = "",
-    classNameModifiers: m = [],
-    src: l = "",
-    alt: d = "",
-    showOnError: f = !1
-  } = s, [i, o] = p(!1), r = N(null), u = () => {
+  const { backgroundUrl: a = "", className: c = "", classNameModifiers: m = [], src: l = "", alt: d = "", showOnError: f = !1 } = s, [i, o] = p(!1), r = y(null), u = () => {
     o(!0);
   }, g = () => {
     o(f);
-  }, t = E([c], "adyen-pe-image", {
-    "adyen-pe-image--loaded": i
-  }, ...m.map((e) => `adyen-pe-image--${e}`));
-  return y(() => {
+  }, t = h(
+    [c],
+    "adyen-pe-image",
+    { "adyen-pe-image--loaded": i },
+    ...m.map((e) => `adyen-pe-image--${e}`)
+  );
+  return N(() => {
     const e = a ? new Image() : r.current;
     e && (e.src = a || l, e.onload = u), o(!!(e != null && e.complete));
-  }, []), a ? n("div", {
-    style: {
-      backgroundUrl: a
-    },
-    ...s,
-    className: t
-  }) : n("img", {
-    ...s,
-    alt: d,
-    ref: r,
-    className: t,
-    onError: g
-  });
+  }, []), a ? /* @__PURE__ */ n("div", { style: { backgroundUrl: a }, ...s, className: t }) : /* @__PURE__ */ n("img", { ...s, alt: d, ref: r, className: t, onError: g });
 }
 export {
   L as default

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

@@ -0,0 +1,7 @@
+import { jsx as a } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import e from "classnames";
+import "./InfoBox.scss.js";
+const f = ({ className: o, el: s = "div", children: t }) => /* @__PURE__ */ a(s, { className: e("adyen-pe-info-box", o), children: t }), x = f;
+export {
+  x as default
+};

package/dist/es/components/internal/InfoBox/InfoBox.scss.js

@@ -0,0 +1,4 @@
+const o = "";
+export {
+  o as default
+};

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

@@ -1,74 +1,88 @@
-import { useClickOutside as w } from "../../../hooks/element/useClickOutside.js";
-import { useResponsiveViewport as h, mediaQueries as _ } from "../../hooks/useResponsiveViewport.js";
-import { ButtonVariant as v } from "../Button/types.js";
-import g from "../SVGIcons/Close.js";
-import x from "../../../core/Context/useCoreContext.js";
-import { useCallback as E, useEffect as k } from "../../../external/preact/hooks/dist/hooks.module.js";
+import { jsx as e } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useClickOutside as h } from "../../../hooks/element/useClickOutside.js";
+import { useResponsiveViewport as v, mediaQueries as _ } from "../../../hooks/useResponsiveViewport.js";
+import { ButtonVariant as x } from "../Button/types.js";
+import g from "../../../core/Context/useCoreContext.js";
+import { useContext as E, useCallback as k, useEffect as N } from "../../../external/preact/hooks/dist/hooks.module.js";
+import { createContext as C, Fragment as M } from "../../../external/preact/dist/preact.module.js";
 import m from "classnames";
 import "./Modal.scss.js";
-import { jsx as e } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import N from "../Button/Button.js";
-import { Fragment as B } from "../../../external/preact/dist/preact.module.js";
-function K({
+import b from "../Button/Button.js";
+import B from "../Icon/Icon.js";
+const i = C({ withinModal: !1 }), P = () => E(i);
+function Q({
   title: n,
-  children: i,
+  children: c,
   classNameModifiers: p = [],
   isOpen: a,
-  onClose: d,
-  isDismissible: o = !0,
-  headerWithBorder: c = !0,
+  onClose: o,
+  isDismissible: d = !0,
+  headerWithBorder: s = !0,
   size: r = "fluid",
-  ...s
+  ...u
 }) {
-  const u = h(_.down.xs), {
-    i18n: f
-  } = x(), y = w(null, d), l = E((t) => {
-    t.key === "Escape" && a && o && d();
-  }, [a, o, d]);
-  return k(() => (a ? window.addEventListener("keydown", l) : window.removeEventListener("keydown", l), () => window.removeEventListener("keydown", l)), [a, l]), e(B, {
-    children: a && e("div", {
-      className: m("adyen-pe-modal-wrapper", p.map((t) => `adyen-pe-modal-wrapper--${t}`), {
-        "adyen-pe-modal-wrapper--open": a,
-        "adyen-pe-modal-wrapper--dismissible": o
-      }),
+  const f = v(_.down.xs), { i18n: y } = g(), w = h(null, o), t = k(
+    (l) => {
+      l.key === "Escape" && a && d && o();
+    },
+    [a, d, o]
+  );
+  return N(() => (a ? window.addEventListener("keydown", t) : window.removeEventListener("keydown", t), () => window.removeEventListener("keydown", t)), [a, t]), /* @__PURE__ */ e(M, { children: a && /* @__PURE__ */ e(
+    "div",
+    {
+      className: m(
+        "adyen-pe-modal-wrapper",
+        p.map((l) => `adyen-pe-modal-wrapper--${l}`),
+        { "adyen-pe-modal-wrapper--open": a, "adyen-pe-modal-wrapper--dismissible": d }
+      ),
       role: "dialog",
       "aria-modal": "true",
       "aria-hidden": !open,
-      ...s,
-      children: e("div", {
-        className: m("adyen-pe-modal", {
-          "adyen-pe-modal--fluid": r === "fluid",
-          "adyen-pe-modal--small": r === "small",
-          "adyen-pe-modal--large": r === "large",
-          "adyen-pe-modal--extra-large": r === "extra-large",
-          "adyen-pe-modal--full-screen": r === "full-screen" || u
-        }),
-        ref: y,
-        children: [e("div", {
-          className: m("adyen-pe-modal__header", {
-            "adyen-pe-modal__header--with-title": n,
-            "adyen-pe-modal__header--with-border-bottom": c
+      ...u,
+      children: /* @__PURE__ */ e(i.Provider, { value: { withinModal: !0 }, children: /* @__PURE__ */ e(
+        "div",
+        {
+          className: m("adyen-pe-modal", {
+            "adyen-pe-modal--fluid": r === "fluid",
+            "adyen-pe-modal--small": r === "small",
+            "adyen-pe-modal--large": r === "large",
+            "adyen-pe-modal--extra-large": r === "extra-large",
+            "adyen-pe-modal--full-screen": r === "full-screen" || f
           }),
-          children: [n && e("div", {
-            className: "adyen-pe-modal__header__title",
-            children: n
-          }), o && e(N, {
-            onClick: d,
-            variant: v.TERTIARY,
-            iconButton: !0,
-            classNameModifiers: ["circle"],
-            className: "adyen-pe-modal__header-icon",
-            "aria-label": f.get("dismiss"),
-            children: e(g, {})
-          })]
-        }), e("div", {
-          className: "adyen-pe-modal__content",
-          children: i
-        })]
-      })
-    })
-  });
+          ref: w,
+          children: [
+            /* @__PURE__ */ e(
+              "div",
+              {
+                className: m("adyen-pe-modal__header", {
+                  "adyen-pe-modal__header--with-title": n,
+                  "adyen-pe-modal__header--with-border-bottom": s
+                }),
+                children: [
+                  n && /* @__PURE__ */ e("div", { className: "adyen-pe-modal__header__title", children: n }),
+                  d && /* @__PURE__ */ e(
+                    b,
+                    {
+                      onClick: o,
+                      variant: x.TERTIARY,
+                      iconButton: !0,
+                      classNameModifiers: ["circle"],
+                      className: "adyen-pe-modal__header-icon",
+                      "aria-label": y.get("dismiss"),
+                      children: /* @__PURE__ */ e(B, { name: "cross" })
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ e("div", { className: "adyen-pe-modal__content", children: c })
+          ]
+        }
+      ) })
+    }
+  ) });
 }
 export {
-  K as default
+  Q as default,
+  P as useModalContext
 };