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

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

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

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

@@ -1,49 +1,62 @@
 import { jsx as s } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import N from "classnames";
-import { memo as E } from "../../../../../external/preact/compat/dist/compat.module.js";
-import { DROPDOWN_ELEMENT_CHECKMARK_CLASS as C, DROPDOWN_ELEMENT_CLASS as S, DROPDOWN_ELEMENT_DISABLED_CLASS as d, DROPDOWN_ELEMENT_ACTIVE_CLASS as D, DROPDOWN_ELEMENT_ICON_CLASS as _, DROPDOWN_ELEMENT_CONTENT_CLASS as L, DROPDOWN_ELEMENT_CHECKBOX_CLASS as O } from "../constants.js";
-import { Icon as n } from "../../../Icon/Icon.js";
-import u from "../../../Img/Img.js";
-import { Fragment as f } from "../../../../../external/preact/dist/preact.module.js";
-import { boolOrFalse as p } from "../../../../../utils/value/bool.js";
-const h = (e) => e.multiSelect ? /* @__PURE__ */ s("span", { className: O, children: e.selected ? /* @__PURE__ */ s(n, { name: "checkmark-square-fill" }) : /* @__PURE__ */ s(n, { name: "square" }) }) : null, A = (e) => e.multiSelect ? null : /* @__PURE__ */ s("span", { className: C, children: e.selected && /* @__PURE__ */ s(n, { name: "checkmark" }) }), g = (e) => /* @__PURE__ */ s(f, { children: [
-  h(e),
+import C from "classnames";
+import { memo as S } from "../../../../../external/preact/compat/dist/compat.module.js";
+import { useRef as _, useEffect as D } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import { DROPDOWN_ELEMENT_CHECKMARK_CLASS as O, DROPDOWN_ELEMENT_CLASS as f, DROPDOWN_ELEMENT_KEYBOARD_ACTIVE_CLASS as u, DROPDOWN_ELEMENT_DISABLED_CLASS as L, DROPDOWN_ELEMENT_ACTIVE_CLASS as d, DROPDOWN_ELEMENT_ICON_CLASS as p, DROPDOWN_ELEMENT_CONTENT_CLASS as h, DROPDOWN_ELEMENT_CHECKBOX_CLASS as A } from "../constants.js";
+import { Icon as r } from "../../../Icon/Icon.js";
+import R from "../../../Img/Img.js";
+import { Fragment as T } from "../../../../../external/preact/dist/preact.module.js";
+import { boolOrFalse as I } from "../../../../../utils/value/bool.js";
+const M = (e) => e.multiSelect ? /* @__PURE__ */ s("span", { className: A, children: e.selected ? /* @__PURE__ */ s(r, { name: "checkmark-square-fill" }) : /* @__PURE__ */ s(r, { name: "square" }) }) : null, k = (e) => e.multiSelect ? null : /* @__PURE__ */ s("span", { className: O, children: e.selected && /* @__PURE__ */ s(r, { name: "checkmark" }) }), K = (e) => /* @__PURE__ */ s(T, { children: [
+  M(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 }),
+    e.item.icon && /* @__PURE__ */ s(R, { className: e.iconClassName, alt: e.item.name, src: e.item.icon }),
     /* @__PURE__ */ s("span", { children: e.item.name })
   ] }),
-  A(e)
-] }), M = ({ item: e, multiSelect: m, onKeyDown: i, onSelect: t, renderListItem: c, selected: l }) => {
-  const a = !!e.disabled, o = p(e.disabled) || null, r = N(S, {
-    [D]: l,
-    [d]: a
+  k(e)
+] }), b = ({
+  item: e,
+  multiSelect: o,
+  onKeyDown: a,
+  onSelect: c,
+  renderListItem: i,
+  selected: l,
+  isKeyboardActive: n
+}) => {
+  const m = !!e.disabled, t = _(null), E = I(e.disabled) || null, N = C(f, {
+    [d]: l,
+    [L]: m,
+    [u]: n
   });
-  return /* @__PURE__ */ s(
+  return D(() => {
+    n && t.current && t.current.scrollIntoView({ block: "nearest", behavior: "smooth" });
+  }, [n]), /* @__PURE__ */ s(
     "li",
     {
-      "aria-disabled": a,
+      ref: t,
+      "aria-disabled": m,
       "aria-selected": l,
-      className: r,
-      "data-disabled": o,
+      className: N,
+      "data-disabled": E,
       "data-value": e.id,
-      onClick: t,
-      onKeyDown: i,
+      onClick: c,
+      onKeyDown: a,
       title: e.name,
       role: "option",
       tabIndex: -1,
-      children: c({
+      children: i({
         item: e,
-        multiSelect: m,
+        multiSelect: o,
         selected: l,
-        contentClassName: L,
-        iconClassName: _
+        contentClassName: h,
+        iconClassName: p
       })
     }
   );
-}, K = E(M);
+}, j = S(b);
 export {
-  K as default,
-  h as renderDefaultMultiSelectionCheckedness,
-  A as renderDefaultSingleSelectionCheckedness,
-  g as renderListItemDefault
+  j as default,
+  M as renderDefaultMultiSelectionCheckedness,
+  k as renderDefaultSingleSelectionCheckedness,
+  K as renderListItemDefault
 };

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

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

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

@@ -7,14 +7,14 @@ const u = [
   t.ARROW_UP,
   t.ARROW_DOWN,
   t.TAB
-], R = ({ event: s, inputType: c, onValidInput: o }) => {
-  const i = s.currentTarget, { key: e } = s, n = /^[0-9.,-]$/.test(e), l = /[.,]/.test(i.value), a = e === "." || e === ",", r = u.includes(e);
-  if (c === "number" && !r && (!n || l && a)) {
+], E = ({ event: s, inputType: o, onValidInput: c }) => {
+  const i = s.currentTarget, { key: e } = s, r = /^[0-9.,-]$/.test(e), l = /[.,]/.test(i.value), a = e === "." || e === ",", n = u.includes(e);
+  if (o === "number" && !n && (!r || l && a)) {
     s.preventDefault();
     return;
   }
-  o(s);
+  c == null || c(s);
 };
 export {
-  R as filterDisallowedCharacters
+  E as filterDisallowedCharacters
 };

package/dist/es/components/internal/FormWrappers/FormCalendarInput.js

@@ -0,0 +1,42 @@
+import { jsx as r } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useMemo as l } from "../../../external/preact/hooks/dist/hooks.module.js";
+import { useWizardFormContext as d } from "../../../hooks/form/wizard/WizardFormContext.js";
+import c from "./FormField.js";
+import { CalendarInput as F } from "../FormFields/CalendarInput/CalendarInput.js";
+import { VisibleField as f } from "./VisibleField.js";
+import { FieldError as g } from "../FormFields/FieldError/FieldError.js";
+import { Controller as h } from "../../../hooks/form/Controller.js";
+function j({ clearable: u, fieldName: n, label: p }) {
+  const { control: a, fieldsConfig: i } = d(), m = l(() => {
+    var o;
+    return (o = i[n]) == null ? void 0 : o.required;
+  }, [i]);
+  return /* @__PURE__ */ r(f, { name: n, children: /* @__PURE__ */ r(c, { label: p, optional: !m, children: /* @__PURE__ */ r(
+    h,
+    {
+      name: n,
+      control: a,
+      rules: {
+        required: m
+      },
+      render: ({ field: o, fieldState: e }) => {
+        var s, t;
+        return /* @__PURE__ */ r("div", { children: [
+          /* @__PURE__ */ r(
+            F,
+            {
+              value: o.value,
+              onInput: o.onInput,
+              isInvalid: !!e.error && e.isTouched,
+              clearable: u
+            }
+          ),
+          ((s = e.error) == null ? void 0 : s.message) && /* @__PURE__ */ r(g, { errorMessage: (t = e.error) == null ? void 0 : t.message, withTopMargin: !0 })
+        ] });
+      }
+    }
+  ) }) });
+}
+export {
+  j as FormCalendarInput
+};

package/dist/es/components/internal/FormWrappers/FormField.js

@@ -0,0 +1,50 @@
+import { jsx as e } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import c from "../../../core/Context/useCoreContext.js";
+import a from "../Typography/Typography.js";
+import { TypographyVariant as n, TypographyElement as r } from "../Typography/types.js";
+import d from "classnames";
+const N = ({
+  label: l,
+  optional: o,
+  supportText: i,
+  children: t,
+  className: m
+}) => {
+  const { i18n: p } = c();
+  return /* @__PURE__ */ e("div", { className: d("adyen-pe-payment-link-creation-form__field-container", m), children: [
+    /* @__PURE__ */ e("div", { className: "adyen-pe-payment-link-creation-form__field-label-container", children: [
+      /* @__PURE__ */ e(
+        a,
+        {
+          el: r.SPAN,
+          variant: n.BODY,
+          stronger: !0,
+          className: "adyen-pe-payment-link-creation-form__field-label",
+          children: l
+        }
+      ),
+      o && /* @__PURE__ */ e(
+        a,
+        {
+          el: r.SPAN,
+          variant: n.BODY,
+          className: "adyen-pe-payment-link-creation-form__field-label-optional",
+          children: `(${p.get("payByLink.common.fields.optional.label")})`
+        }
+      )
+    ] }),
+    t,
+    i && /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+      a,
+      {
+        el: r.SPAN,
+        variant: n.BODY,
+        className: "adyen-pe-payment-link-creation-form__field-support-text",
+        children: i
+      }
+    ) })
+  ] });
+};
+export {
+  N as default
+};

package/dist/es/components/internal/FormWrappers/FormSelect.js

@@ -0,0 +1,73 @@
+import { jsx as s } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useMemo as j, useEffect as h } from "../../../external/preact/hooks/dist/hooks.module.js";
+import { useWizardFormContext as w } from "../../../hooks/form/wizard/WizardFormContext.js";
+import y from "./FormField.js";
+import { VisibleField as z } from "./VisibleField.js";
+import { FieldError as C } from "../FormFields/FieldError/FieldError.js";
+import { Controller as R } from "../../../hooks/form/Controller.js";
+import W from "../FormFields/Select/Select.js";
+function L({
+  className: v,
+  clearable: F,
+  fieldName: o,
+  filterable: V,
+  hideOptionalLabel: f,
+  isRequired: i,
+  items: e,
+  label: q,
+  onChange: u,
+  preventInvalidState: x,
+  readonly: I,
+  validate: M
+}) {
+  const { control: T, fieldsConfig: c, getValues: l, setValue: t } = w(), m = j(() => {
+    var r;
+    return i ?? ((r = c[o]) == null ? void 0 : r.required);
+  }, [c, i]);
+  return h(() => {
+    if (!e.length) return;
+    const r = l(o);
+    r && !e.some((n) => n.id === r) && t(o, "");
+  }, [l, t, e]), h(() => {
+    var r;
+    e && e.length === 1 && t(o, (r = e[0]) == null ? void 0 : r.id);
+  }, [e, t, o]), /* @__PURE__ */ s(z, { name: o, children: /* @__PURE__ */ s(y, { label: q, optional: !m && !f, className: v, children: /* @__PURE__ */ s(
+    R,
+    {
+      name: o,
+      control: T,
+      rules: {
+        required: m,
+        validate: M
+      },
+      render: ({ field: r, fieldState: n }) => {
+        var p, d;
+        const E = (g) => {
+          const b = g.target.value;
+          r.onInput(b), u == null || u(g);
+        }, a = !!n.error && n.isTouched;
+        return /* @__PURE__ */ s("div", { children: [
+          /* @__PURE__ */ s(
+            W,
+            {
+              ...r,
+              isInvalid: x ? !1 : a,
+              isValid: !n.error,
+              items: e,
+              filterable: V,
+              clearable: F,
+              name: o,
+              onChange: E,
+              readonly: I,
+              selected: r.value
+            }
+          ),
+          a && ((p = n.error) == null ? void 0 : p.message) && /* @__PURE__ */ s(C, { errorMessage: (d = n.error) == null ? void 0 : d.message, withTopMargin: !0 })
+        ] });
+      }
+    }
+  ) }) });
+}
+export {
+  L as FormSelect
+};

package/dist/es/components/internal/FormWrappers/FormTextInput.js

@@ -0,0 +1,80 @@
+import { jsx as n } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useMemo as z, useCallback as x } from "../../../external/preact/hooks/dist/hooks.module.js";
+import { useWizardFormContext as R } from "../../../hooks/form/wizard/WizardFormContext.js";
+import W from "./FormField.js";
+import y from "../FormFields/InputBase.js";
+import { VisibleField as A } from "./VisibleField.js";
+import E from "../../../core/Context/useCoreContext.js";
+import { Controller as G } from "../../../hooks/form/Controller.js";
+function Z({
+  className: F,
+  dropdown: d,
+  fieldName: s,
+  isRequired: a,
+  label: h,
+  onDropdownInput: c,
+  onInput: i,
+  supportText: q,
+  type: T,
+  validate: t,
+  min: V,
+  maxLength: p,
+  minLength: e,
+  dropdownPosition: M,
+  hideOptionalLabel: b
+}) {
+  const { control: B, fieldsConfig: l } = R(), { i18n: g } = E(), m = z(() => {
+    var r;
+    return a ?? ((r = l[s]) == null ? void 0 : r.required);
+  }, [l, a]), j = x(
+    (r, o) => {
+      i == null || i(r), o(r.currentTarget.value);
+    },
+    [i]
+  ), k = x(
+    (r) => {
+      const o = e && (r == null ? void 0 : r.length) < e;
+      return !r && !m ? { valid: !0 } : o ? { valid: !1, message: g.get("common.errors.minLength", { values: { minLength: e } }) } : (t == null ? void 0 : t(r)) ?? { valid: !0 };
+    },
+    [g, m, e, t]
+  );
+  return /* @__PURE__ */ n(A, { name: s, children: /* @__PURE__ */ n(W, { label: h, optional: !m && !b, supportText: q, className: F, children: /* @__PURE__ */ n(
+    G,
+    {
+      name: s,
+      control: B,
+      rules: {
+        validate: k,
+        required: m
+      },
+      render: ({ field: r, fieldState: o }) => {
+        var C;
+        const f = !!o.error && o.isTouched;
+        return /* @__PURE__ */ n(
+          y,
+          {
+            ...r,
+            value: r.value,
+            maxLength: p,
+            minLength: e,
+            name: s,
+            isValid: !o.error,
+            isInvalid: f,
+            errorMessage: (C = o.error) == null ? void 0 : C.message,
+            onDropdownInput: (...u) => {
+              c == null || c(...u), f && r.triggerValidation();
+            },
+            onInput: (u) => j(u, r.onInput),
+            type: T,
+            min: V,
+            dropdown: d,
+            dropdownPosition: M
+          }
+        );
+      }
+    }
+  ) }) });
+}
+export {
+  Z as FormTextInput
+};

package/dist/es/components/internal/FormWrappers/VisibleField.js

@@ -0,0 +1,11 @@
+import { jsx as e } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useWizardFormContext as m } from "../../../hooks/form/wizard/WizardFormContext.js";
+import { Fragment as n } from "../../../external/preact/dist/preact.module.js";
+function u({ name: o, children: r }) {
+  var i;
+  const { fieldsConfig: t } = m();
+  return (i = t[o]) != null && i.visible ? /* @__PURE__ */ e(n, { children: r }) : null;
+}
+export {
+  u as VisibleField
+};

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

@@ -1,40 +1,47 @@
 import { jsx as t } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
 /* empty css          */
-import l from "classnames";
-import { useState as m, useEffect as s } from "../../../external/preact/hooks/dist/hooks.module.js";
+import c from "classnames";
+import { useState as l, useEffect as s } from "../../../external/preact/hooks/dist/hooks.module.js";
 const e = {
   "angle-right": () => import("../../../images/icons/angle-right.svg.js"),
+  "arrow-right": () => import("../../../images/icons/arrow-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"),
+  "checkbox-disabled": () => import("../../../images/icons/checkbox-disabled.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"),
+  "chevron-up-down": () => import("../../../images/icons/chevron-up-down.svg.js"),
   copy: () => import("../../../images/icons/copy.svg.js"),
   "cross-circle-fill": () => import("../../../images/icons/cross-circle-fill.svg.js"),
+  search: () => import("../../../images/icons/search.svg.js"),
   cross: () => import("../../../images/icons/cross.svg.js"),
   download: () => import("../../../images/icons/download.svg.js"),
   "external-link": () => import("../../../images/icons/external-link.svg.js"),
   filter: () => import("../../../images/icons/filter.svg.js"),
+  info: () => import("../../../images/icons/info.svg.js"),
   "info-filled": () => import("../../../images/icons/info-filled.svg.js"),
   "minus-circle-outline": () => import("../../../images/icons/minus-circle-outline.svg.js"),
   plus: () => import("../../../images/icons/plus.svg.js"),
   "plus-circle-outline": () => import("../../../images/icons/plus-circle-outline.svg.js"),
   square: () => import("../../../images/icons/square.svg.js"),
+  "square-small-fill": () => import("../../../images/icons/square-small-fill.svg.js"),
   "trash-can": () => import("../../../images/icons/trash-can.svg.js"),
+  cog: () => import("../../../images/icons/cog.svg.js"),
   upload: () => import("../../../images/icons/upload.svg.js"),
   "warning-filled": () => import("../../../images/icons/warning-filled.svg.js"),
   warning: () => import("../../../images/icons/warning.svg.js")
-}, h = ({ className: n, name: o, ...p }) => {
-  const [r, i] = m(null);
+}, d = ({ className: p, name: o, ...m }) => {
+  const [r, i] = l(null);
   return s(() => {
-    e[o] ? e[o]().then(({ default: c }) => {
-      i(/* @__PURE__ */ t(c, {}));
+    e[o] ? e[o]().then(({ default: n }) => {
+      i(/* @__PURE__ */ t(n, {}));
     }) : (i(null), console.error(`Icon with name "${o}" does not exist.`));
-  }, [o]), r && /* @__PURE__ */ t("span", { className: l("adyen-pe-icon", n), role: "img", "aria-hidden": !0, ...p, children: r });
+  }, [o]), r && /* @__PURE__ */ t("span", { className: c("adyen-pe-icon", p), role: "img", "aria-hidden": !0, ...m, children: r });
 };
 export {
-  h as Icon,
-  h as default
+  d as Icon,
+  d as default
 };

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

@@ -1,19 +1,15 @@
-import { jsx as s } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import { useMemo as t } from "../../../../external/preact/hooks/dist/hooks.module.js";
-import u from "../../DataOverviewDetails/DataOverviewDetails.js";
-function a({ type: r, data: o, dataCustomization: i, ...n }) {
-  const e = t(() => {
-    switch (r) {
+import { jsx as i } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { useMemo as a } from "../../../../external/preact/hooks/dist/hooks.module.js";
+import m from "../../DataOverviewDetails/DataOverviewDetails.js";
+function c({ type: o, data: r, dataCustomization: s, ...t }) {
+  const e = a(() => {
+    switch (o) {
       case "payout":
-        return { ...o, type: r, ...n };
-      case "transaction":
-        return { id: o, type: r, ...n };
-      default:
-        return { data: o, type: r };
+        return { ...r, type: o, ...t };
     }
-  }, [o, n, r]);
-  return e && /* @__PURE__ */ s(u, { ...e, dataCustomization: i });
+  }, [r, t, o]);
+  return e && /* @__PURE__ */ i(m, { ...e, dataCustomization: s });
 }
 export {
-  a as default
+  c as default
 };