@adyen/adyen-platform-experience-web 1.10.2 → 1.11.0

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

@@ -1,9 +1,9 @@
 import { jsx as _ } from "../../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
 import ve from "classnames";
-import { useState as y, useRef as f, useMemo as H, useCallback as i, useEffect as D } from "../../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
+import { useState as y, useRef as d, useMemo as H, useCallback as c, useEffect as D } from "../../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
 import { InteractionKeyCode as a } from "../../../types.js";
 import { ARIA_ERROR_SUFFIX as Le } from "../../../../core/Errors/constants.js";
-import { useUniqueId as X } from "../../../../hooks/useUniqueId.js";
+import X from "../../../../hooks/useUniqueId.js";
 import Pe from "./components/SelectButton.js";
 import Ce from "./components/SelectList.js";
 import Te from "./hooks/useSelect.js";
@@ -27,26 +27,26 @@ const Ve = ({
   readonly: Z = !1,
   onChange: k = ye,
   selected: ee,
-  name: g,
+  name: R,
   isInvalid: te,
   isValid: re,
   placeholder: ne,
   uniqueId: se,
   renderListItem: ae,
   renderButtonContent: oe,
-  isCollatingErrors: ce,
-  setToTargetWidth: ie,
+  isCollatingErrors: ie,
+  setToTargetWidth: ce,
   withoutCollapseIndicator: le = !1,
   showOverlay: ue = !1,
-  fitPosition: de,
-  fixedPopoverPositioning: fe,
+  fitPosition: fe,
+  fixedPopoverPositioning: de,
   onResetAction: me,
   buttonVariant: pe,
   ...Ae
 }) => {
-  const { resetSelection: p, select: x, selection: c } = Te({ items: b, multiSelect: m, selected: ee }), [s, d] = y(!1), [I, R] = y(""), [A, u] = y(-1), w = f(null), C = f(null), T = f(null), be = `elem-${X()}`, F = se ?? be, U = `select-${X()}`, $ = f(), v = f(!0), O = f(!1), h = f(c), q = f(c), ge = H(() => c.length, [c]), Ie = i(() => {
-    R(""), d(!1), u(-1), s && (p(h.current), v.current = !0);
-  }, [p, d, R, s]), Re = H(
+  const { resetSelection: p, select: x, selection: i } = Te({ items: b, multiSelect: m, selected: ee }), [s, f] = y(!1), [g, I] = y(""), [A, u] = y(-1), w = d(null), C = d(null), T = d(null), be = `elem-${X()}`, F = se ?? be, U = `select-${X()}`, $ = d(), v = d(!0), O = d(!1), h = d(i), q = d(i), Re = H(() => i.length, [i]), ge = c(() => {
+    I(""), f(!1), u(-1), s && (p(h.current), v.current = !0);
+  }, [p, f, I, s]), Ie = H(
     () => ve([
       z,
       { [Fe]: _e(m) },
@@ -55,17 +55,17 @@ const Ve = ({
     ]),
     [W, N, m]
   ), { commitAction: Y, commitActionButtons: Ee, committing: M, resetCommitAction: j } = Oe({
-    resetDisabled: !c.length,
+    resetDisabled: !i.length,
     onResetAction: me
-  }), l = i(() => {
-    R(""), d(!1), u(-1), j(), v.current ? v.current = !1 : K || T.current?.focus();
-  }, [K, j, d, R]), L = i(() => {
-    h.current = c;
-    const e = `${c.map(({ id: t }) => t)}`;
-    k({ target: { value: e, name: g } });
-  }, [g, k, c]), P = i(() => {
-    p(), h.current = B, k({ target: { value: "", name: g } });
-  }, [g, k, p]);
+  }), l = c(() => {
+    I(""), f(!1), u(-1), j(), v.current ? v.current = !1 : K || T.current?.focus();
+  }, [K, j, f, I]), L = c(() => {
+    h.current = i;
+    const e = `${i.map(({ id: t }) => t)}`;
+    k({ target: { value: e, name: R } });
+  }, [R, k, i]), P = c(() => {
+    p(), h.current = B, k({ target: { value: "", name: R } });
+  }, [R, k, p]);
   D(() => {
     switch (Y) {
       case G.APPLY:
@@ -75,8 +75,8 @@ const Ve = ({
         O.current = !0, P();
         break;
     }
-  }, [P, Y, L, g, k, p]);
-  const S = i(
+  }, [P, Y, L, R, k, p]);
+  const S = c(
     (e) => {
       e.preventDefault();
       const t = e.currentTarget && C?.current?.contains(e.currentTarget) ? e.currentTarget : null;
@@ -88,13 +88,13 @@ const Ve = ({
     [b, x]
   );
   D(() => {
-    q.current !== c && (q.current = c, (!m || O.current) && s && (L(), l())), O.current = !1;
-  }, [l, L, m, c, s]), D(() => {
+    q.current !== i && (q.current = i, (!m || O.current) && s && (L(), l())), O.current = !1;
+  }, [l, L, m, i, s]), D(() => {
     M && l();
   }, [M, l]), D(() => {
-    s || (h.current = c);
-  }, [c, s]);
-  const De = i(
+    s || (h.current = i);
+  }, [i, s]);
+  const De = c(
     (e) => {
       switch (e.code) {
         case a.ESCAPE:
@@ -105,8 +105,10 @@ const Ve = ({
         case a.SPACE:
           if (o && s) {
             if (e.key === a.ENTER)
-              if (I) S(e);
-              else break;
+              if (g)
+                S(e);
+              else
+                break;
             return;
           }
           break;
@@ -118,9 +120,9 @@ const Ve = ({
         default:
           return;
       }
-      e.preventDefault(), d(!0);
+      e.preventDefault(), f(!0);
     },
-    [l, o, S, s, d, I]
+    [l, o, S, s, f, g]
   );
   D(() => {
     s && (cancelAnimationFrame($.current), $.current = requestAnimationFrame(() => {
@@ -140,7 +142,7 @@ const Ve = ({
       }
     }));
   }, [o, s]);
-  const ke = i(
+  const ke = c(
     (e) => {
       const t = e.target;
       switch (e.code) {
@@ -181,10 +183,10 @@ const Ve = ({
       }
     },
     [l, o, S]
-  ), he = i(
+  ), he = c(
     (e) => {
       if (!o || !s) return;
-      const t = b.filter((n) => !I || n.name.toLowerCase().includes(I)), r = t.filter((n) => !n.disabled);
+      const t = b.filter((n) => !g || n.name.toLowerCase().includes(g)), r = t.filter((n) => !n.disabled);
       switch (e.code) {
         case a.ESCAPE:
           e.preventDefault(), l();
@@ -229,18 +231,18 @@ const Ve = ({
         }
       }
     },
-    [o, s, b, I, A, l, x]
-  ), Se = i(
+    [o, s, b, g, A, l, x]
+  ), Se = c(
     (e) => {
       const t = e.target.value;
-      R(t.toLowerCase()), u(-1);
+      I(t.toLowerCase()), u(-1);
     },
-    [R]
-  ), xe = i(
+    [I]
+  ), xe = c(
     (e) => {
-      e.preventDefault(), d((t) => !t), s && p(h.current);
+      e.preventDefault(), f((t) => !t), s && p(h.current);
     },
-    [d, s, p]
+    [f, s, p]
   );
   D(() => {
     if (s && o) {
@@ -250,26 +252,26 @@ const Ve = ({
       return u(-1), () => cancelAnimationFrame(e);
     }
   }, [o, s]);
-  const we = i(
+  const we = c(
     (e) => {
       e?.preventDefault?.(), e?.stopPropagation?.(), P();
     },
     [P]
   );
-  return /* @__PURE__ */ _("div", { className: Re, children: [
+  return /* @__PURE__ */ _("div", { className: Ie, children: [
     /* @__PURE__ */ _(
       Pe,
       {
         buttonVariant: pe,
         id: F,
-        appliedFilterNumber: ge,
-        active: c,
+        appliedFilterNumber: Re,
+        active: i,
         clearable: J,
         filterInputRef: w,
         filterable: o,
         isInvalid: te,
         isValid: re,
-        name: g,
+        name: R,
         onClear: we,
         onButtonKeyDown: De,
         onFilterInputKeyDown: he,
@@ -282,7 +284,7 @@ const Ve = ({
         toggleButtonRef: T,
         toggleList: xe,
         withoutCollapseIndicator: le,
-        ariaDescribedBy: !ce && F ? `${F}${Le}` : void 0,
+        ariaDescribedBy: !ie && F ? `${F}${Le}` : void 0,
         ...Ae,
         onInput: Se
       }
@@ -291,9 +293,9 @@ const Ve = ({
       Ce,
       {
         popoverClassNameModifiers: Q,
-        setToTargetWidth: ie,
-        dismissPopover: Ie,
-        active: c,
+        setToTargetWidth: ce,
+        dismissPopover: ge,
+        active: i,
         commitActions: Ee,
         items: b,
         multiSelect: m,
@@ -306,11 +308,11 @@ const Ve = ({
         renderListItem: ae,
         showList: s,
         showOverlay: ue,
-        textFilter: I,
+        textFilter: g,
         activeIndex: o ? A : void 0,
         filterable: o,
-        fitPosition: de,
-        fixedPopoverPositioning: fe
+        fitPosition: fe,
+        fixedPopoverPositioning: de
       }
     )
   ] });

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

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

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

@@ -1,17 +1,17 @@
 import { jsx as o } from "../../../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.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 F } from "../../../../../external/.pnpm/preact@10.28.2/node_modules/preact/compat/dist/compat.module.js";
+import { memo as z } from "../../../../../external/.pnpm/preact@10.28.2/node_modules/preact/compat/dist/compat.module.js";
 import { useMemo as l } from "../../../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
-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 { DROPDOWN_LIST_CLASS as F, DROPDOWN_LIST_ACTIVE_CLASS as j, DROPDOWN_ELEMENT_CLASS as B, DROPDOWN_ELEMENT_NO_OPTION_CLASS as K } from "../constants.js";
+import Q, { renderListItemDefault as U } from "./SelectListItem.js";
+import $ from "../../../Popover/Popover.js";
+import { fixedForwardRef as k } from "../../../../../utils/preact/fixedForwardRef.js";
+import q from "../../../../../core/Context/preact/useCoreContext.js";
 import { isFunction as G } from "../../../../../utils/value/is.js";
 import { boolOrFalse as H } from "../../../../../utils/value/bool.js";
-const J = q(
+const J = k(
   ({
     active: c,
     commitActions: p,
@@ -34,9 +34,9 @@ const J = q(
     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]);
+    const { i18n: x } = q(), I = h(W.down.xs), m = d.filter((e) => !n || e.name.toLowerCase().includes(n)), R = a(F, { [j]: t }), A = a(B, K), b = l(() => G(i) ? i : U, [i]), r = l(() => H(s), [s]);
     return t ? /* @__PURE__ */ o(
-      k,
+      $,
       {
         classNameModifiers: v,
         actions: r ? p : void 0,
@@ -55,7 +55,7 @@ const J = q(
         fitPosition: D,
         fixedPositioning: E,
         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,
+          Q,
           {
             item: e,
             multiSelect: r,
@@ -70,7 +70,7 @@ const J = q(
       }
     ) : null;
   }
-), ce = F(J);
+), ce = z(J);
 export {
   ce as default
 };

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

@@ -1,17 +1,18 @@
 import { jsx as e } from "../../../external/.pnpm/preact@10.28.2/node_modules/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 = ({
+import c from "classnames";
+import s from "../../../core/Context/preact/useCoreContext.js";
+const k = ({
   label: l,
   optional: o,
   supportText: i,
   children: t,
-  className: m
+  className: m,
+  testId: p
 }) => {
-  const { i18n: p } = c();
-  return /* @__PURE__ */ e("div", { className: d("adyen-pe-payment-link-creation-form__field-container", m), children: [
+  const { i18n: d } = s();
+  return /* @__PURE__ */ e("div", { className: c("adyen-pe-payment-link-creation-form__field-container", m), "data-testid": p, children: [
     /* @__PURE__ */ e("div", { className: "adyen-pe-payment-link-creation-form__field-label-container", children: [
       /* @__PURE__ */ e(
         a,
@@ -29,7 +30,7 @@ const N = ({
           el: r.SPAN,
           variant: n.BODY,
           className: "adyen-pe-payment-link-creation-form__field-label-optional",
-          children: `(${p.get("payByLink.common.fields.optional.label")})`
+          children: `(${d.get("payByLink.common.fields.optional.label")})`
         }
       )
     ] }),
@@ -46,5 +47,5 @@ const N = ({
   ] });
 };
 export {
-  N as default
+  k as default
 };