@adyen/adyen-platform-experience-web 0.1.1

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

@@ -0,0 +1,236 @@
+import { jsx as T } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import ae from "classnames";
+import { useState as w, useRef as c, useCallback as l, useMemo as le, useEffect as b } from "../../../../external/preact/hooks/dist/hooks.module.js";
+import { InteractionKeyCode as s } from "../../../types.js";
+import { ARIA_ERROR_SUFFIX as ue } from "../../../../core/Errors/constants.js";
+import { noop as fe } from "../../../../utils/common/index.js";
+import me from "../../../../hooks/useCommitAction/useCommitAction.js";
+import { CommitAction as K } from "../../../../hooks/useCommitAction/types.js";
+import { useClickOutside as de } from "../../../../hooks/element/useClickOutside.js";
+import pe from "../../../../utils/uuid.js";
+import Ae from "./components/SelectButton.js";
+import be from "./components/SelectList.js";
+import ge from "./hooks/useSelect.js";
+import { DROPDOWN_BASE_CLASS as U, DROPDOWN_MULTI_SELECT_CLASS as Ee } from "./constants.js";
+import "./Select.scss.js";
+import { EMPTY_ARRAY as Y } from "../../../../utils/common/constants.js";
+const Re = ({
+  className: O,
+  classNameModifiers: _ = Y,
+  items: g = Y,
+  filterable: u = !1,
+  multiSelect: f = !1,
+  readonly: M = !1,
+  onChange: F = fe,
+  selected: j,
+  name: P,
+  isInvalid: H,
+  isValid: X,
+  placeholder: z,
+  uniqueId: h,
+  renderListItem: G,
+  isCollatingErrors: J,
+  withoutCollapseIndicator: Q = !1
+}) => {
+  const { resetSelection: m, select: I, selection: n } = ge({ items: g, multiSelect: f, selected: j }), [o, a] = w(!1), [k, d] = w(""), E = c(null), p = c(null), C = c(null), v = c(`select-${pe()}`), [V, B] = w(0), x = c(), R = c(!0), D = c(!1), L = c(n), N = c(n), Z = de(
+    c(null),
+    l(() => {
+      d(""), a(!1), o && (m(L.current), R.current = !0);
+    }, [m, o, a, d])
+  ), q = le(
+    () => ae([
+      U,
+      { [Ee]: f === !0 },
+      ..._.map((e) => `${U}--${e}`),
+      O
+    ]),
+    [O, _, f]
+  ), { commitAction: y, commitActionButtons: ee, committing: W, resetCommitAction: $ } = me({
+    resetDisabled: !n.length
+  }), i = l(() => {
+    var e;
+    d(""), a(!1), $(), R.current ? R.current = !1 : (e = C.current) == null || e.focus();
+  }, [$, a, d]), S = l(() => {
+    L.current = n;
+    const e = `${n.map(({ id: t }) => t)}`;
+    F({ target: { value: e, name: P } });
+  }, [P, F, n]);
+  b(() => {
+    switch (y) {
+      case K.APPLY:
+        S();
+        break;
+      case K.CLEAR:
+        m(), D.current = !0;
+        break;
+    }
+  }, [y, S, m]);
+  const A = l(
+    (e) => {
+      var r;
+      e.preventDefault();
+      const t = e.currentTarget && ((r = p == null ? void 0 : p.current) != null && r.contains(e.currentTarget)) ? e.currentTarget : null;
+      if (t && !t.getAttribute("data-disabled")) {
+        const oe = t.getAttribute("data-value"), ce = g.find((ie) => ie.id === oe);
+        I(ce);
+      }
+    },
+    [g, I]
+  );
+  b(() => {
+    N.current !== n && (N.current = n, (!f || D.current) && (S(), i())), D.current = !1;
+  }, [i, S, f, n]), b(() => {
+    W && (B(n.length), i());
+  }, [W, i, B, n.length]);
+  const te = l(
+    (e) => {
+      switch (e.code) {
+        case s.ESCAPE:
+        case s.TAB:
+          o && i(), R.current = e.key === s.TAB;
+          return;
+        case s.ENTER:
+        case s.SPACE:
+          if (u && o) {
+            if (e.key === s.ENTER)
+              if (k)
+                A(e);
+              else
+                break;
+            return;
+          }
+          break;
+        case s.ARROW_DOWN:
+        case s.ARROW_UP:
+          break;
+        default:
+          return;
+      }
+      e.preventDefault(), a(!0);
+    },
+    [i, u, A, o, a, k]
+  );
+  b(() => {
+    o && (cancelAnimationFrame(x.current), x.current = requestAnimationFrame(() => {
+      var e;
+      e: {
+        let t = (e = p.current) == null ? void 0 : e.firstElementChild, r;
+        for (; t; ) {
+          if (!(t.dataset.disabled && t.dataset.disabled === "true")) {
+            if (t.getAttribute("aria-selected") === "true") {
+              t.focus();
+              break e;
+            }
+            r = r || t;
+          }
+          t = t.nextElementSibling;
+        }
+        r && r.focus();
+      }
+    }));
+  }, [o]);
+  const re = l(
+    (e) => {
+      const t = e.target;
+      switch (e.code) {
+        case s.ESCAPE:
+          e.preventDefault(), i();
+          break;
+        case s.ENTER:
+        case s.SPACE:
+          A(e);
+          break;
+        case s.ARROW_DOWN: {
+          e.preventDefault();
+          let r = t.nextElementSibling;
+          for (; r; ) {
+            if (!(r.dataset.disabled && r.dataset.disabled === "true")) {
+              r.focus();
+              break;
+            }
+            r = r.nextElementSibling;
+          }
+          break;
+        }
+        case s.ARROW_UP: {
+          e.preventDefault();
+          e: {
+            let r = t.previousElementSibling;
+            for (; r; ) {
+              if (!(r.dataset.disabled && r.dataset.disabled === "true")) {
+                r.focus();
+                break e;
+              }
+              r = r.previousElementSibling;
+            }
+            u && E.current && E.current.focus();
+          }
+          break;
+        }
+        case s.TAB:
+          i();
+          break;
+      }
+    },
+    [i, u, A]
+  ), se = l(
+    (e) => {
+      const t = e.target.value;
+      d(t.toLowerCase());
+    },
+    [d]
+  ), ne = l(
+    (e) => {
+      e.preventDefault(), a((t) => !t), o && m(L.current);
+    },
+    [a, o, m]
+  );
+  return b(() => {
+    var e;
+    o && u && ((e = E.current) == null || e.focus());
+  }, [u, o]), /* @__PURE__ */ T("div", { ref: Z, className: q, children: [
+    /* @__PURE__ */ T(
+      Ae,
+      {
+        id: h ?? void 0,
+        appliedFilterNumber: V,
+        active: n,
+        filterInputRef: E,
+        filterable: u,
+        isInvalid: H,
+        isValid: X,
+        onButtonKeyDown: te,
+        onInput: se,
+        multiSelect: f,
+        placeholder: z,
+        readonly: M,
+        selectListId: v.current,
+        showList: o,
+        toggleButtonRef: C,
+        toggleList: ne,
+        withoutCollapseIndicator: Q,
+        ariaDescribedBy: !J && h ? `${h}${ue}` : ""
+      }
+    ),
+    /* @__PURE__ */ T(
+      be,
+      {
+        active: n,
+        commitActions: ee,
+        items: g,
+        multiSelect: f,
+        onKeyDown: re,
+        onSelect: A,
+        selectListId: v.current,
+        ref: p,
+        toggleButtonRef: C,
+        renderListItem: G,
+        showList: o,
+        textFilter: k
+      }
+    )
+  ] });
+}, Ne = Re;
+export {
+  Ne as default
+};

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

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

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

@@ -0,0 +1,91 @@
+import { jsx as a } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import T from "classnames";
+import { useMemo as N } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import S from "../../../../../core/Context/useCoreContext.js";
+import C from "../../../Img/Img.js";
+import f from "../../../Button/Button.js";
+import { ButtonVariant as L } from "../../../Button/types.js";
+import u from "../../../Typography/Typography.js";
+import B from "../../../SVGIcons/ChevronDown.js";
+import { TypographyElement as p, TypographyVariant as R } from "../../../Typography/types.js";
+import { DROPDOWN_BUTTON_CLASS as h, DROPDOWN_BUTTON_ACTIVE_CLASS as y, DROPDOWN_BUTTON_HAS_SELECTION_CLASS as A, DROPDOWN_BUTTON_READONLY_CLASS as E, DROPDOWN_BUTTON_INVALID_CLASS as P, DROPDOWN_BUTTON_VALID_CLASS as U, DROPDOWN_BUTTON_ICON_CLASS as g, DROPDOWN_BUTTON_TEXT_CLASS as x, DROPDOWN_BUTTON_MULTI_SELECT_COUNTER_CLASS as I, DROPDOWN_BUTTON_COLLAPSE_INDICATOR_CLASS as W, DROPDOWN_BUTTON_CLASSNAME as b } from "../constants.js";
+import { Fragment as w } from "preact";
+const V = ({
+  active: e,
+  disabled: m,
+  className: o,
+  filterable: i,
+  toggleButtonRef: l,
+  ...n
+}) => {
+  const r = N(() => i ? T(b, o) : o, [o, i]);
+  return i ? /* @__PURE__ */ a("div", { ...n, className: r, ref: l }) : /* @__PURE__ */ a(
+    f,
+    {
+      ...n,
+      className: r,
+      disabled: m,
+      variant: L.SECONDARY,
+      ref: l
+    }
+  );
+}, v = (e) => {
+  var d;
+  const { i18n: m } = S(), { active: o, filterable: i, multiSelect: l, placeholder: n, readonly: r, showList: s, withoutCollapseIndicator: _ } = e, O = N(() => (n == null ? void 0 : n.trim()) || m.get("select.filter.placeholder"), [m, n]), t = N(() => l === !0 ? void 0 : o[0], [o, l]), D = N(() => {
+    var c;
+    return ((c = t == null ? void 0 : t.name) == null ? void 0 : c.trim()) || O;
+  }, [t, O]);
+  return /* @__PURE__ */ a(
+    V,
+    {
+      active: o,
+      disabled: r,
+      "aria-disabled": r,
+      "aria-expanded": s,
+      "aria-haspopup": "listbox",
+      className: T(h, {
+        [y]: s,
+        [A]: !!o.length,
+        [E]: r,
+        [P]: e.isInvalid,
+        [U]: e.isValid
+      }),
+      filterable: i,
+      onClick: r ? void 0 : e.toggleList,
+      onKeyDown: r ? void 0 : e.onButtonKeyDown,
+      role: i ? "button" : void 0,
+      tabIndex: 0,
+      title: D,
+      toggleButtonRef: e.toggleButtonRef,
+      type: i ? "" : "button",
+      "aria-describedby": e.ariaDescribedBy,
+      id: e.id ?? "",
+      children: [
+        s && i ? /* @__PURE__ */ a(
+          "input",
+          {
+            "aria-autocomplete": "list",
+            "aria-controls": e.selectListId,
+            "aria-expanded": s,
+            "aria-owns": e.selectListId,
+            autoComplete: "off",
+            className: "adyen-fp-filter-input",
+            onInput: e.onInput,
+            placeholder: O,
+            ref: e.filterInputRef,
+            role: "combobox",
+            type: "text"
+          }
+        ) : /* @__PURE__ */ a(w, { children: [
+          (t == null ? void 0 : t.icon) && /* @__PURE__ */ a(C, { className: g, src: t.icon, alt: t.name.trim() }),
+          /* @__PURE__ */ a("span", { className: x, children: ((d = t == null ? void 0 : t.selectedOptionName) == null ? void 0 : d.trim()) || (t == null ? void 0 : t.name.trim()) || O }),
+          l && e.appliedFilterNumber > 0 && /* @__PURE__ */ a("div", { className: I, children: /* @__PURE__ */ a(u, { el: p.SPAN, variant: R.BODY, stronger: !0, children: e.appliedFilterNumber }) })
+        ] }),
+        !_ && /* @__PURE__ */ a("span", { className: W, children: /* @__PURE__ */ a(B, { role: "presentation" }) })
+      ]
+    }
+  );
+}, J = v;
+export {
+  J as default
+};

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

@@ -0,0 +1,56 @@
+import { jsx as o } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import a from "classnames";
+import { useMemo as m } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { memo as E } from "../../../../../external/preact/compat/dist/compat.module.js";
+import { isFunction as L } from "../../../../../utils/common/index.js";
+import v from "../../../../../core/Context/useCoreContext.js";
+import I from "../../../../../utils/fixedForwardRef.js";
+import T, { renderSelectListItemDefault as x } from "./SelectListItem.js";
+import { DROPDOWN_LIST_CLASS as R, DROPDOWN_LIST_ACTIVE_CLASS as A, DROPDOWN_ELEMENT_CLASS as M, DROPDOWN_ELEMENT_NO_OPTION_CLASS as g } from "../constants.js";
+import F from "../../../Popover/Popover.js";
+import { PopoverContainerSize as W, PopoverContainerVariant as b } from "../../../Popover/types.js";
+const h = I(
+  ({
+    active: c,
+    commitActions: p,
+    items: d,
+    multiSelect: n,
+    onKeyDown: f,
+    onSelect: S,
+    renderListItem: t,
+    selectListId: u,
+    showList: r,
+    textFilter: s,
+    toggleButtonRef: O
+  }, C) => {
+    const { i18n: N } = v(), l = d.filter((e) => !s || e.name.toLowerCase().includes(s)), P = a(R, { [A]: r }), _ = a(M, g), D = m(() => L(t) ? t : x, [t]), i = m(() => n === !0, [n]);
+    return r ? /* @__PURE__ */ o(
+      F,
+      {
+        actions: i ? p : void 0,
+        disableFocusTrap: !0,
+        divider: !0,
+        open: r,
+        containerSize: W.MEDIUM,
+        variant: b.POPOVER,
+        targetElement: O,
+        withContentPadding: !1,
+        children: /* @__PURE__ */ o("ul", { className: P, id: u, ref: C, role: "listbox", "aria-multiselectable": i, children: l.length ? l.map((e) => /* @__PURE__ */ o(
+          T,
+          {
+            item: e,
+            multiSelect: i,
+            onKeyDown: f,
+            onSelect: S,
+            renderListItem: D,
+            selected: c.includes(e)
+          },
+          e.id
+        )) : /* @__PURE__ */ o("div", { className: _, children: N.get("select.noOptionsFound") }) })
+      }
+    ) : null;
+  }
+), H = E(h);
+export {
+  H as default
+};

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

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

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

@@ -0,0 +1,29 @@
+import { DEFAULT_BUTTON_CLASSNAME as N } from "../../Button/constants.js";
+import { ButtonVariant as D } from "../../Button/types.js";
+import { getModifierClasses as t } from "../../../../utils/class-name-utils.js";
+const S = "adyen-fp-dropdown", C = t(N, [D.SECONDARY], [N]), _ = `${S}__button`, n = `${_}--active`, A = `${_}-collapse-indicator`, c = `${_}--has-selection`, s = `${_}-icon`, R = `${_}-multiselect-counter`, e = `${_}--readonly`, P = `${_}-text`, W = `${_}--valid`, i = `${_}--invalid`, O = `${S}__element`, $ = `${O}--active`, I = `${O}-checkbox`, B = `${O}-checkmark`, U = `${O}-content`, a = `${O}--disabled`, l = `${O}-icon`, r = `${O}--no-option`, T = `${S}__list`, M = `${T}--active`, d = `${S}--multiselect`;
+export {
+  S as DROPDOWN_BASE_CLASS,
+  n as DROPDOWN_BUTTON_ACTIVE_CLASS,
+  _ as DROPDOWN_BUTTON_CLASS,
+  C as DROPDOWN_BUTTON_CLASSNAME,
+  A as DROPDOWN_BUTTON_COLLAPSE_INDICATOR_CLASS,
+  c as DROPDOWN_BUTTON_HAS_SELECTION_CLASS,
+  s as DROPDOWN_BUTTON_ICON_CLASS,
+  i as DROPDOWN_BUTTON_INVALID_CLASS,
+  R as DROPDOWN_BUTTON_MULTI_SELECT_COUNTER_CLASS,
+  e as DROPDOWN_BUTTON_READONLY_CLASS,
+  P as DROPDOWN_BUTTON_TEXT_CLASS,
+  W as DROPDOWN_BUTTON_VALID_CLASS,
+  $ as DROPDOWN_ELEMENT_ACTIVE_CLASS,
+  I as DROPDOWN_ELEMENT_CHECKBOX_CLASS,
+  B as DROPDOWN_ELEMENT_CHECKMARK_CLASS,
+  O as DROPDOWN_ELEMENT_CLASS,
+  U as DROPDOWN_ELEMENT_CONTENT_CLASS,
+  a as DROPDOWN_ELEMENT_DISABLED_CLASS,
+  l as DROPDOWN_ELEMENT_ICON_CLASS,
+  r as DROPDOWN_ELEMENT_NO_OPTION_CLASS,
+  M as DROPDOWN_LIST_ACTIVE_CLASS,
+  T as DROPDOWN_LIST_CLASS,
+  d as DROPDOWN_MULTI_SELECT_CLASS
+};

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

@@ -0,0 +1,34 @@
+import { useCallback as i, useState as x, useEffect as O } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { EMPTY_ARRAY as t } from "../../../../../utils/common/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((p) => e.includes(p.id)), o = r ? n : n.slice(0, 1);
+      return o.length ? Object.freeze(o) : t;
+    },
+    [f, r]
+  ), [d, s] = x(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 O(() => s(a(l)), [a, l, s]), { resetSelection: u, select: b, selection: d };
+}, z = g;
+export {
+  z as default
+};

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

@@ -0,0 +1,14 @@
+import { jsx as t } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import i from "classnames";
+import { useImageUrl as p } from "../../../hooks/useImageUrl/useImageUrl.js";
+import { useMemo as c } from "../../../external/preact/hooks/dist/hooks.module.js";
+const u = ({ 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 /* @__PURE__ */ t("img", { className: i("adyen-fp__image", r), alt: e, src: a });
+};
+export {
+  u as Image
+};

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

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

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

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

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

@@ -0,0 +1,98 @@
+import { jsx as e } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import s from "../Button/Button.js";
+import { ButtonVariant as _ } from "../Button/types.js";
+import g from "../../../core/Context/useCoreContext.js";
+import { useRef as L, useCallback as c, useEffect as C } from "../../../external/preact/hooks/dist/hooks.module.js";
+import m from "classnames";
+import "./Modal.scss.js";
+function k(d) {
+  return !(!d || !("nodeType" in d));
+}
+function M({
+  title: d,
+  children: i,
+  classNameModifiers: u = [],
+  isOpen: a,
+  onClose: l,
+  isDismissible: r = !0,
+  headerWithBorder: y = !0,
+  size: o = "fluid",
+  ...h
+}) {
+  const t = L(null), { i18n: w } = g(), v = c(
+    (n) => {
+      var p;
+      r && a && k(n.target) && !((p = t == null ? void 0 : t.current) != null && p.contains(n.target)) && l();
+    },
+    [r, a, l]
+  ), f = c(
+    (n) => {
+      n.key === "Escape" && a && r && l();
+    },
+    [a, r, l]
+  );
+  return C(() => (a ? window.addEventListener("keydown", f) : window.removeEventListener("keydown", f), () => window.removeEventListener("keydown", f)), [a, f]), /* @__PURE__ */ e(
+    "div",
+    {
+      className: m(
+        "adyen-fp-modal-wrapper",
+        u.map((n) => `adyen-fp-modal-wrapper--${n}`),
+        { "adyen-fp-modal-wrapper--open": a, "adyen-fp-modal-wrapper--dismissible": r }
+      ),
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-hidden": !open,
+      onClick: v,
+      ...h,
+      children: /* @__PURE__ */ e(
+        "div",
+        {
+          className: m("adyen-fp-modal", {
+            "adyen-fp-modal--fluid": o === "fluid",
+            "adyen-fp-modal--small": o === "small",
+            "adyen-fp-modal--large": o === "large",
+            "adyen-fp-modal--extra-large": o === "extra-large",
+            "adyen-fp-modal--full-screen": o === "full-screen"
+          }),
+          ref: t,
+          children: [
+            /* @__PURE__ */ e(
+              "div",
+              {
+                className: m("adyen-fp-modal__header", {
+                  "adyen-fp-modal__header--with-title": d,
+                  "adyen-fp-modal__header--with-border-bottom": y
+                }),
+                children: [
+                  d && /* @__PURE__ */ e("div", { className: "adyen-fp-modal__header__title", children: d }),
+                  r && /* @__PURE__ */ e(
+                    s,
+                    {
+                      onClick: l,
+                      variant: _.TERTIARY,
+                      className: "adyen-fp-modal__header-icon",
+                      "aria-label": w.get("dismiss"),
+                      children: /* @__PURE__ */ e("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ e(
+                        "path",
+                        {
+                          fillRule: "evenodd",
+                          clipRule: "evenodd",
+                          d: "M13.6569 4.07112C14.0474 3.6806 14.0474 3.04743 13.6569 2.65691C13.2664 2.26638 12.6332 2.26638 12.2427 2.65691L8.00005 6.89954L3.75745 2.65694C3.36692 2.26641 2.73376 2.26641 2.34324 2.65694C1.95271 3.04746 1.95271 3.68063 2.34324 4.07115L6.58584 8.31375L2.34319 12.5564C1.95266 12.9469 1.95266 13.5801 2.34319 13.9706C2.73371 14.3611 3.36688 14.3611 3.7574 13.9706L8.00005 9.72796L12.2427 13.9706C12.6333 14.3612 13.2664 14.3612 13.6569 13.9706C14.0475 13.5801 14.0475 12.947 13.6569 12.5564L9.41426 8.31375L13.6569 4.07112Z",
+                          fill: "#000"
+                        }
+                      ) })
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ e("div", { className: "adyen-fp-modal__content", children: i })
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  M as default
+};

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

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