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

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

@@ -1,97 +1,113 @@
-import { jsx as l } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import D from "classnames";
+import { jsx as a } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import S from "classnames";
 import { useMemo as O } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import b from "../../../../../core/Context/useCoreContext.js";
-import { ButtonVariant as C } from "../../../Button/types.js";
+import A from "../../../../../core/Context/useCoreContext.js";
+import { ButtonVariant as I } from "../../../Button/types.js";
 import L from "../../../Typography/Typography.js";
-import { TypographyVariant as f, TypographyElement as u } from "../../../Typography/types.js";
-import { DROPDOWN_BUTTON_ICON_CLASS as y, DROPDOWN_BUTTON_TEXT_CLASS as B, DROPDOWN_BUTTON_MULTI_SELECT_COUNTER_CLASS as R, DROPDOWN_BUTTON_COLLAPSE_INDICATOR_CLASS as h, DROPDOWN_BUTTON_CLASS as A, DROPDOWN_BUTTON_VALID_CLASS as g, DROPDOWN_BUTTON_INVALID_CLASS as E, DROPDOWN_BUTTON_READONLY_CLASS as P, DROPDOWN_BUTTON_HAS_SELECTION_CLASS as U, DROPDOWN_BUTTON_ACTIVE_CLASS as I, DROPDOWN_BUTTON_CLASSNAME as x } from "../constants.js";
-import { Fragment as W } from "../../../../../external/preact/dist/preact.module.js";
-import p from "../../../Img/Img.js";
-import { Icon as v } from "../../../Icon/Icon.js";
-import w from "../../../Button/Button.js";
-import { boolOrFalse as V } from "../../../../../utils/value/bool.js";
-const F = ({
-  active: a,
-  disabled: m,
-  className: r,
-  filterable: i,
-  toggleButtonRef: n,
-  ...t
+import { TypographyVariant as y, TypographyElement as B } from "../../../Typography/types.js";
+import { DROPDOWN_BUTTON_ICON_CLASS as h, DROPDOWN_BUTTON_TEXT_CLASS as R, DROPDOWN_BUTTON_MULTI_SELECT_COUNTER_CLASS as v, DROPDOWN_BUTTON_COLLAPSE_INDICATOR_CLASS as E, DROPDOWN_BUTTON_CLEAR_CLASS as P, DROPDOWN_BUTTON_CLASS as g, DROPDOWN_BUTTON_VALID_CLASS as U, DROPDOWN_BUTTON_INVALID_CLASS as x, DROPDOWN_BUTTON_READONLY_CLASS as W, DROPDOWN_BUTTON_HAS_SELECTION_CLASS as w, DROPDOWN_BUTTON_ACTIVE_CLASS as V, DROPDOWN_BUTTON_CLASSNAME as K } from "../constants.js";
+import { InteractionKeyCode as u } from "../../../../types.js";
+import { Fragment as F } from "../../../../../external/preact/dist/preact.module.js";
+import k from "../../../Img/Img.js";
+import { Icon as D } from "../../../Icon/Icon.js";
+import M from "../../../Button/Button.js";
+import { boolOrFalse as C } from "../../../../../utils/value/bool.js";
+const Y = ({
+  active: e,
+  disabled: N,
+  className: t,
+  filterable: o,
+  toggleButtonRef: i,
+  buttonVariant: m,
+  ...n
 }) => {
-  const o = O(() => i ? D(x, r) : r, [r, i]);
-  return i ? /* @__PURE__ */ l("div", { ...t, className: o, ref: n }) : /* @__PURE__ */ l(
-    w,
+  const d = O(() => o ? S(K, t) : t, [t, o]);
+  return o ? /* @__PURE__ */ a("div", { ...n, className: d, ref: i }) : /* @__PURE__ */ a(
+    M,
     {
-      ...t,
-      className: o,
-      disabled: m,
-      variant: C.SECONDARY,
-      ref: n,
-      "aria-label": t["aria-label"],
-      "aria-labelledby": t["aria-labelledby"]
+      ...n,
+      className: d,
+      disabled: N,
+      variant: m ?? I.SECONDARY,
+      ref: i,
+      "aria-label": n["aria-label"],
+      "aria-labelledby": n["aria-labelledby"]
     }
   );
-}, $ = (a) => {
-  var T, s;
-  const { i18n: m } = b(), { active: r, filterable: i, multiSelect: n, placeholder: t, readonly: o, showList: d, withoutCollapseIndicator: S } = a, N = O(() => (t == null ? void 0 : t.trim()) || m.get("common.inputs.select.placeholder"), [m, t]), e = O(() => V(n) ? void 0 : r[0], [r, n]), c = O(() => {
-    var _;
-    return ((_ = e == null ? void 0 : e.name) == null ? void 0 : _.trim()) || N;
-  }, [e, N]);
-  return /* @__PURE__ */ l(
-    F,
+}, ie = (e) => {
+  const { i18n: N } = A(), { active: t, clearable: o, filterable: i, multiSelect: m, placeholder: n, onClear: d, readonly: c, showList: r, withoutCollapseIndicator: f } = e, T = O(() => n?.trim() || N.get("common.inputs.select.placeholder"), [N, n]), l = O(() => C(m) ? void 0 : t[0], [t, m]), s = O(() => l?.name?.trim() || T, [l, T]), _ = O(() => C(o) && !!t.length, [t, o]);
+  return /* @__PURE__ */ a(
+    Y,
     {
-      active: r,
-      disabled: o,
-      "aria-disabled": o,
-      "aria-expanded": d,
+      buttonVariant: e.buttonVariant,
+      active: t,
+      disabled: c,
+      "aria-disabled": c,
+      "aria-expanded": r,
       "aria-haspopup": "dialog",
-      className: D(A, {
-        [I]: d,
-        [U]: !!r.length,
-        [P]: o,
-        [E]: a.isInvalid,
-        [g]: a.isValid
+      "aria-invalid": e.isInvalid,
+      className: S(g, {
+        [V]: r,
+        [w]: !!t.length,
+        [W]: c,
+        [x]: e.isInvalid,
+        [U]: e.isValid
       }),
       filterable: i,
-      onClick: o ? void 0 : a.toggleList,
-      onKeyDown: o ? void 0 : a.onButtonKeyDown,
-      role: !i || d ? "button" : void 0,
+      name: e.name,
+      onClick: c ? void 0 : e.toggleList,
+      onKeyDown: c ? void 0 : e.onButtonKeyDown,
+      role: !i || r ? "button" : void 0,
       tabIndex: 0,
-      title: c,
-      toggleButtonRef: a.toggleButtonRef,
+      title: s,
+      toggleButtonRef: e.toggleButtonRef,
       type: i ? void 0 : "button",
-      "aria-describedby": a.ariaDescribedBy,
-      id: a.id,
-      ...d && i ? {} : { "aria-label": a["aria-label"], "aria-labelledby": a["aria-labelledby"] },
+      "aria-describedby": e.ariaDescribedBy,
+      id: e.id,
+      ...r && i ? {} : { "aria-label": e["aria-label"], "aria-labelledby": e["aria-labelledby"] },
       children: [
-        d && i ? /* @__PURE__ */ l(
+        e.renderButtonContent ? e.renderButtonContent({ item: l }) : r && i ? /* @__PURE__ */ a(
           "input",
           {
             "aria-autocomplete": "list",
-            "aria-label": a["aria-label"],
-            "aria-labelledby": a["aria-labelledby"],
-            "aria-controls": a.selectListId,
-            "aria-expanded": d,
-            "aria-owns": a.selectListId,
+            "aria-label": e["aria-label"],
+            "aria-labelledby": e["aria-labelledby"],
+            "aria-controls": e.selectListId,
+            "aria-expanded": r,
+            "aria-owns": e.selectListId,
+            "aria-invalid": e.isInvalid,
             autoComplete: "off",
             className: "adyen-pe-filter-input",
-            onInput: a.onInput,
-            placeholder: N,
-            ref: a.filterInputRef,
+            onInput: e.onInput,
+            onKeyDown: e.onFilterInputKeyDown,
+            placeholder: T,
+            ref: e.filterInputRef,
             role: "combobox",
             type: "text"
           }
-        ) : /* @__PURE__ */ l(W, { children: [
-          (e == null ? void 0 : e.icon) && /* @__PURE__ */ l(p, { className: y, src: e.icon, alt: ((T = e == null ? void 0 : e.name) == null ? void 0 : T.trim()) ?? "" }),
-          /* @__PURE__ */ l("span", { className: B, children: ((s = e == null ? void 0 : e.selectedOptionName) == null ? void 0 : s.trim()) || c }),
-          n && a.appliedFilterNumber > 0 && /* @__PURE__ */ l("div", { className: R, children: /* @__PURE__ */ l(L, { el: u.SPAN, variant: f.BODY, stronger: !0, children: a.appliedFilterNumber }) })
+        ) : /* @__PURE__ */ a(F, { children: [
+          l?.icon && /* @__PURE__ */ a(k, { className: h, src: l.icon, alt: l?.name?.trim() ?? "" }),
+          /* @__PURE__ */ a("span", { className: R, children: l?.selectedOptionName?.trim() || s }),
+          m && e.appliedFilterNumber > 0 && /* @__PURE__ */ a("div", { className: v, children: /* @__PURE__ */ a(L, { el: B.SPAN, variant: y.BODY, stronger: !0, children: e.appliedFilterNumber }) })
         ] }),
-        !S && /* @__PURE__ */ l("span", { className: h, children: /* @__PURE__ */ l(v, { name: "chevron-down" }) })
+        !f && !_ && /* @__PURE__ */ a("span", { className: E, children: /* @__PURE__ */ a(D, { name: "chevron-down" }) }),
+        _ && /* @__PURE__ */ a(
+          "span",
+          {
+            role: "button",
+            tabIndex: 0,
+            className: P,
+            onClick: d,
+            onKeyDown: (b) => {
+              (b.code === u.ENTER || b.code === u.SPACE) && d?.(b);
+            },
+            children: /* @__PURE__ */ a(D, { name: "cross-circle-fill" })
+          }
+        )
       ]
     }
   );
 };
 export {
-  $ as default
+  ie as default
 };

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

@@ -1,42 +1,44 @@
 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 { PopoverContainerPosition as w, PopoverContainerVariant as V, PopoverContainerSize as y } from "../../../Popover/types.js";
+import z from "../../../../../core/Context/useCoreContext.js";
 import a from "classnames";
-import { memo as z } from "../../../../../external/preact/compat/dist/compat.module.js";
+import { memo as F } 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 j, DROPDOWN_LIST_ACTIVE_CLASS as B, DROPDOWN_ELEMENT_CLASS as K, DROPDOWN_ELEMENT_NO_OPTION_CLASS as Q } from "../constants.js";
+import U, { renderListItemDefault as $ } from "./SelectListItem.js";
+import k from "../../../Popover/Popover.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,
     items: d,
     disableFocusTrap: f,
-    multiSelect: n,
+    multiSelect: s,
     onKeyDown: O,
     onSelect: u,
     renderListItem: i,
     selectListId: S,
     showList: t,
-    textFilter: s,
+    textFilter: n,
     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 } = z(), I = h(W.down.xs), m = d.filter((e) => !n || e.name.toLowerCase().includes(n)), R = a(j, { [B]: t }), A = a(K, Q), b = l(() => G(i) ? i : $, [i]), r = l(() => H(s), [s]);
     return t ? /* @__PURE__ */ o(
-      b,
+      k,
       {
-        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: y.MEDIUM,
+        variant: V.POPOVER,
         targetElement: C,
         withContentPadding: !1,
-        position: h.BOTTOM,
-        showOverlay: v && M,
+        position: w.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(
+          U,
           {
             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 = F(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

@@ -13,7 +13,7 @@ const u = [
     s.preventDefault();
     return;
   }
-  o(s);
+  o?.(s);
 };
 export {
   R as filterDisallowedCharacters

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

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