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

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

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

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

@@ -1,13 +1,13 @@
 import { jsx as o } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.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 { 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 j } 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 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 { 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";
@@ -17,13 +17,13 @@ const J = q(
     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,
@@ -34,9 +34,9 @@ const J = q(
     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]);
+    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(
-      w,
+      k,
       {
         classNameModifiers: v,
         actions: r ? p : void 0,
@@ -46,16 +46,16 @@ const J = q(
         dismissible: !1,
         open: t,
         setToTargetWidth: N,
-        containerSize: z.MEDIUM,
-        variant: y.POPOVER,
+        containerSize: y.MEDIUM,
+        variant: V.POPOVER,
         targetElement: C,
         withContentPadding: !1,
-        position: V.BOTTOM,
+        position: w.BOTTOM,
         showOverlay: _ && I,
         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,
           {
             item: e,
             multiSelect: r,
@@ -70,7 +70,7 @@ const J = q(
       }
     ) : null;
   }
-), ce = j(J);
+), ce = F(J);
 export {
   ce as default
 };

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

@@ -7,14 +7,14 @@ const u = [
   t.ARROW_UP,
   t.ARROW_DOWN,
   t.TAB
-], 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)) {
+], 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)) {
     s.preventDefault();
     return;
   }
-  c == null || c(s);
+  o?.(s);
 };
 export {
-  E as filterDisallowedCharacters
+  R as filterDisallowedCharacters
 };

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

@@ -1,42 +1,36 @@
 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,
+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: n,
-      control: a,
+      name: e,
+      control: u,
       rules: {
-        required: m
+        required: i
       },
-      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 })
-        ] });
-      }
+      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 {
-  j as FormCalendarInput
+  T as FormCalendarInput
 };

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

@@ -1,73 +1,69 @@
 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,
+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: e,
-  label: q,
-  onChange: u,
-  preventInvalidState: x,
-  readonly: I,
-  validate: M
+  items: o,
+  label: F,
+  onChange: f,
+  preventInvalidState: C,
+  readonly: V,
+  validate: q
 }) {
-  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,
+  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: o,
-      control: T,
+      name: r,
+      control: x,
       rules: {
-        required: m,
-        validate: M
+        required: l,
+        validate: q
       },
-      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;
+      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(
-            W,
+            z,
             {
-              ...r,
-              isInvalid: x ? !1 : a,
-              isValid: !n.error,
-              items: e,
-              filterable: V,
-              clearable: F,
-              name: o,
-              onChange: E,
-              readonly: I,
-              selected: r.value
+              ...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 && ((p = n.error) == null ? void 0 : p.message) && /* @__PURE__ */ s(C, { errorMessage: (d = n.error) == null ? void 0 : d.message, withTopMargin: !0 })
+          a && e.error?.message && /* @__PURE__ */ s(w, { errorMessage: e.error?.message, withTopMargin: !0 })
         ] });
       }
     }
   ) }) });
 }
 export {
-  L as FormSelect
+  J as FormSelect
 };

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

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