@adyen/kyc-components 4.6.0 → 4.7.0-beta.0

package/dist/{PayoutDetailsDropin-nXxBue_s.js → PayoutDetailsDropin-CLdEm9BA.js}

@@ -2,63 +2,63 @@
 {
   try {
     let e = "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof globalThis ? globalThis : "undefined" != typeof self ? self : {}, n = new e.Error().stack;
-    n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "ab442435-ec41-4648-9d4d-3ece62dd3646", e._sentryDebugIdIdentifier = "sentry-dbid-ab442435-ec41-4648-9d4d-3ece62dd3646");
+    n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "5eb48620-f6c7-48d5-8ace-540fe735d5b6", e._sentryDebugIdIdentifier = "sentry-dbid-5eb48620-f6c7-48d5-8ace-540fe735d5b6");
   } catch (e) {
   }
 }
 ;
 import { jsxs, jsx, Fragment } from "preact/jsx-runtime";
-import { signal } from "@preact/signals";
 import { useQuery, useMutation, useQueryClient, skipToken } from "@tanstack/preact-query";
 import { useState, useEffect, useRef, useCallback, useContext, useMemo as useMemo$1 } from "preact/hooks";
-import { b as useApiContext, j as httpPost, k as httpGet, ae as createLogger, a9 as CountryCodes, u as useTranslation, x as useAnalyticsContext, z as Icon, N as Typography, V as Button, ah as objectsDeepEqual, H as useToggleContext, aB as Header, ax as isEmpty, ab as translateTranslatable, q as hasOwnEntityAssociationOfType, L as LegalEntityTypes, t as useAccountHolder, m as useSettingsContext, C as Alert, a8 as getLegalEntityCountry, aQ as Trans, b3 as EEA_Countries, ap as useDataset, O as StackLayout, aq as datasetIdentifier, b4 as isAccountIdentifierObscured, b5 as hasEmptyFields, b6 as extractFieldName, b7 as concatenateFieldNames, aS as keysOf, ak as getCapabilityProblems, w as TaskTypes, an as cloneObject, am as datasetUtilities } from "./StoreProvider-DKCxUPee.js";
-import { u as useTransferInstrument, m as mapTransferInstrumentToPayoutAccount } from "./mapTransferInstrumentToPayoutAccount-DnaL9hYo.js";
-import { L as LoaderWrapper } from "./LoaderWrapper-BEzoHtmn.js";
+import { b as useApiContext, j as httpPost, k as httpGet, ae as createLogger, a9 as CountryCodes, u as useTranslation, x as useAnalyticsContext, z as Icon, N as Typography, V as Button, ah as objectsDeepEqual, H as useToggleContext, aB as Header, ax as isEmpty, ab as translateTranslatable, q as hasOwnEntityAssociationOfType, L as LegalEntityTypes, t as useAccountHolder, m as useSettingsContext, C as Alert, a8 as getLegalEntityCountry, aR as Trans, b4 as EEA_Countries, ap as useDataset, O as StackLayout, aq as datasetIdentifier, b5 as isAccountIdentifierObscured, b6 as hasEmptyFields, b7 as extractFieldName, b8 as concatenateFieldNames, aT as keysOf, ak as getCapabilityProblems, w as TaskTypes, an as cloneObject, am as datasetUtilities } from "./StoreProvider-C4og8Y8I.js";
+import { u as useTransferInstrument, m as mapTransferInstrumentToPayoutAccount } from "./mapTransferInstrumentToPayoutAccount-BM24JYqT.js";
+import { L as LoaderWrapper } from "./LoaderWrapper-CU0bf3jD.js";
 import { S as SettingNames } from "./types-Dv0COrvY.js";
-import { u as useGlobalDataSlice, a as useGlobalData, b as useResetGlobalData, c as useStateContext, F as FormWrapper } from "./useGlobalData-BydN0B8P.js";
-import { a as useInvalidateRootLegalEntity, u as useToastContext } from "./useToastContext-CN6SzXSt.js";
-import { F as FeatureNames } from "./types-CTwBMnPB.js";
-import { a as augmentWithCountryConfigs, g as getPropsFromConfigurations } from "./process-field-configurations-BxJae0v4.js";
-import { g as getRequiredForms, a as addValidityToForms, u as useFormComposer } from "./dropinUtils-14DNwEiI.js";
-import { u as uppercase, p as payoutAccountFormat, m as mapExistingFile, g as getPageName, b as useScenarioConfiguration, c as useUnifyLoadingStatus } from "./mapExistingFile-BMJL0nyv.js";
-import { C as Confirm } from "./Confirm-gEhhWD8f.js";
-import { c as currencyByCountry } from "./types-DO_d6cVD.js";
-import { i as isValidationError, p as processValidationErrors, b as isIdDocumentUploadError, c as isBankStatementUploadError, a as isMaintenanceModeError, m as mapCreateOrUpdateTransferInstrumentErrorMessageToTranslatable } from "./validationError-Cl6ZvFO8.js";
+import { u as useGlobalDataSlice, a as useGlobalData, b as useResetGlobalData, c as useStateContext, F as FormWrapper } from "./useGlobalData-DZvXyS0l.js";
+import { a as useInvalidateRootLegalEntity, u as useToastContext } from "./useToastContext-BdsMS3mt.js";
+import { F as FeatureNames } from "./types-C7ANBXKc.js";
+import { a as augmentWithCountryConfigs, g as getPropsFromConfigurations } from "./process-field-configurations-Cl2nqpBp.js";
+import { g as getRequiredForms, a as addValidityToForms, u as useFormComposer } from "./dropinUtils-vsDEK6cs.js";
+import { u as uppercase, p as payoutAccountFormat, m as mapExistingFile, g as getPageName, b as useScenarioConfiguration, c as useUnifyLoadingStatus } from "./mapExistingFile-BIYg1E5G.js";
+import { C as Confirm } from "./Confirm-BoQbVMKQ.js";
+import { c as currencyByCountry } from "./types-DsA42AXS.js";
+import { i as isValidationError, p as processValidationErrors, b as isIdDocumentUploadError, c as isBankStatementUploadError, a as isMaintenanceModeError, m as mapCreateOrUpdateTransferInstrumentErrorMessageToTranslatable } from "./validationError-XxBa8ECY.js";
 import { t as trackNavigation } from "./trackNavigation-db_h46BT.js";
-import { D as DropzoneFile, e as bytesToSize, f as defaultFileValidationOptions, h as fileValidationRules, S as StateContextSetter, i as fileToBase64, a as getDocument, c as createDocumentRequest, d as documentApiUtils, b as getFileExtention } from "./validate-Dy8GuvEF.js";
-import { b as getPayoutAccountHolderName, g as getLegalEntityNameBasedOnType } from "./getName-Z2gJognf.js";
-import { o as omitObscuredFieldsIfUnchanged } from "./omitObscuredFieldsIfUnchanged-Bbes2BVX.js";
+import { D as DropzoneFile, e as bytesToSize, f as defaultFileValidationOptions, h as fileValidationRules, S as StateContextSetter, i as fileToBase64, a as getDocument, c as createDocumentRequest, d as documentApiUtils, b as getFileExtention } from "./validate-CFI052fe.js";
+import { b as getPayoutAccountHolderName, g as getLegalEntityNameBasedOnType } from "./getName-D3Sba-PI.js";
+import { o as omitObscuredFieldsIfUnchanged } from "./omitObscuredFieldsIfUnchanged-CyJfNYkP.js";
+import { signal } from "@preact/signals";
 import { Show } from "@preact/signals/utils";
-import { s as summaryStep } from "./Summary-BMM1xjqy.js";
+import { s as summaryStep } from "./Summary-DkZ_an9u.js";
 import { g as getFieldProps, a as getFormProps } from "./getProps-Cc3J2-z9.js";
-import { c as createFormRules } from "./form-rules-DhbF2mY4.js";
-import { s as summaryItem } from "./summaryItem-CAQCQSkt.js";
 import cx from "classnames";
 import { memo, useRef as useRef$1, useState as useState$1, useMemo, useEffect as useEffect$1, lazy } from "preact/compat";
-import { F as Field } from "./Field-BguffV12.js";
-import { M as Modal } from "./Modal-EL9MXgbw.js";
-import { T as TextArea } from "./TextArea-u_xiMf1c.js";
-import { u as useForm } from "./useForm-C1botkQ9.js";
-import { E as EndStateLayout } from "./EndStateLayout-D23FWrbD.js";
-import { E as ErrorPanel } from "./ErrorPanel-B8fHWJ7W.js";
-import { c as createFormUtils, m as mergeFieldMetadataIntoProps } from "./formUtils-DkgXgXMP.js";
+import { F as Field } from "./Field--T3FQepj.js";
+import { M as Modal } from "./Modal-C8kGCLbp.js";
+import { T as TextArea } from "./TextArea-Bu9ppy0I.js";
+import { u as useForm } from "./useForm-Y4-kimHb.js";
+import { E as EndStateLayout } from "./EndStateLayout-DURCt96r.js";
+import { E as ErrorPanel } from "./ErrorPanel-ALBlWg3_.js";
+import { c as createFormUtils, m as mergeFieldMetadataIntoProps } from "./formUtils-DFuc8i5Q.js";
 import { b as bankStatementDescriptionPattern } from "./basePatterns-BwdnMQxI.js";
 import { createContext } from "preact";
 import OpenBankingSDK from "@adyen/openbankingsdk";
-import { S as Select } from "./Select-BgkHFapB.js";
-import { m as makeMask, n as numericInputs, a as nonInputs, s as spacer, c as customInputs, M as MaskedInput, d as alphanumericInputs, b as alphaInputs } from "./MaskedInput-Ckb7nz68.js";
+import { S as Select } from "./Select-C4C8R-Ci.js";
+import { m as makeMask, n as numericInputs, a as nonInputs, s as spacer, c as customInputs, M as MaskedInput, d as alphanumericInputs, b as alphaInputs } from "./MaskedInput-BNceotwn.js";
 import { r as resolveFieldMetadata } from "./fieldConfigurations-BUT9DTUH.js";
-import { v as validatePatternOnBlur } from "./patternValidators-B7j6YIOy.js";
-import { a as isNotEmptyValidator } from "./commonValidators-dPJjXT_8.js";
-import { I as InputText } from "./InputText-C6-NIYzH.js";
+import { v as validatePatternOnBlur } from "./patternValidators-DRSnA1z7.js";
+import { a as isNotEmptyValidator } from "./commonValidators-Dd4wegC9.js";
+import { I as InputText } from "./InputText-CywP4Ojh.js";
 import { C as Currencies } from "./currency-CrdnaaDu.js";
-import { u as useUnincorporatedPartnershipMembers } from "./useUnincorporatedPartnershipMembers-z5aGwc0I.js";
-import { I as Image } from "./unincorporated-partnership-DYTYq9It.js";
-import { C as CountryField } from "./CountryField-pznzB7Uq.js";
+import { u as useUnincorporatedPartnershipMembers } from "./useUnincorporatedPartnershipMembers-D5ndPAbv.js";
+import { I as Image } from "./unincorporated-partnership-uA1X2l53.js";
+import { C as CountryField } from "./CountryField-DPtohqO0.js";
 import { C as Card } from "./Card-OQuFzmxm.js";
-import { L as Link } from "./Link-C1szPOri.js";
+import { L as Link } from "./Link-BVdY7Jkl.js";
 import { T as Tag } from "./Tag-DdkVScyr.js";
-import { C as ContextGuidance } from "./ContextGuidance-B4qWRid4.js";
+import { C as ContextGuidance } from "./ContextGuidance-CoDkF9Kh.js";
+import { c as createFormRules } from "./form-rules-DhbF2mY4.js";
+import { s as summaryItem } from "./summaryItem-CAQCQSkt.js";
 const getCheck = async (legalEntityId, baseUrl, data) => {
   return httpPost(
     {
@@ -189,6 +189,7 @@ const getAccountFormatsForCountry = async (country) => {
   };
   return expandedBankFormats;
 };
+const showInstantVerificationPayoutModal = signal(false);
 const validateAccountIdentification = async (baseUrl, data) => {
   return httpPost(
     {
@@ -567,7 +568,10 @@ function BankDocumentClassification(props) {
     fieldValidationErrors,
     formVerificationErrors,
     shouldValidate,
-    country
+    country,
+    handleFieldChange,
+    valid: propValid,
+    errors: propErrors
   } = props;
   const { t } = useTranslation("banking");
   const { t: commonT } = useTranslation("common");
@@ -602,7 +606,7 @@ function BankDocumentClassification(props) {
     }),
     [bankStatementValidationOptions, validators]
   );
-  const { handleChangeFor, data, setData, valid, fieldProblems, errors, triggerValidation } = useForm({
+  const localForm = useForm({
     ...props,
     schema: bankDocumentClassificationFields,
     defaultData: bankData,
@@ -610,6 +614,13 @@ function BankDocumentClassification(props) {
     fieldProblems: fieldValidationErrors,
     shouldValidate
   });
+  const useMultiFormMode = !!handleFieldChange;
+  const data = useMultiFormMode ? bankData : localForm.data;
+  const valid = useMultiFormMode ? propValid : localForm.valid;
+  const errors = useMultiFormMode ? propErrors : localForm.errors;
+  const fieldProblems = useMultiFormMode ? fieldValidationErrors : localForm.fieldProblems;
+  const handleChange = useMultiFormMode ? handleFieldChange : localForm.handleChangeFor;
+  const { triggerValidation, setData } = localForm;
   const validateDocumentMutation = useValidateDocument({
     onSuccess: (response) => {
       userEvents.addEvent("Success", {
@@ -652,8 +663,10 @@ function BankDocumentClassification(props) {
     }
   });
   const handleDocumentUpload = async (files) => {
-    setData("bankStatementDocument", files);
-    triggerValidation();
+    handleChange("bankStatementDocument")(files);
+    if (!useMultiFormMode) {
+      triggerValidation();
+    }
     if (!enableBankDocumentClassification && !isShadowMode) return;
     if (files.length > 0) {
       const file = files[0];
@@ -679,34 +692,42 @@ function BankDocumentClassification(props) {
     }
   };
   useEffect$1(() => {
-    if (formIsActive && isBankStatementOptional) {
+    if (!useMultiFormMode && formIsActive && isBankStatementOptional) {
       triggerValidation();
     }
-  }, [formIsActive, isBankStatementOptional, triggerValidation]);
+  }, [formIsActive, isBankStatementOptional, triggerValidation, useMultiFormMode]);
   const alreadyUploadedDocuments = useMemo(
     () => bankData?.bankStatementDocument ?? [],
     [bankData?.bankStatementDocument]
   );
   useEffect$1(() => {
-    if (alreadyUploadedDocuments.length > 0) {
+    if (!useMultiFormMode && alreadyUploadedDocuments.length > 0) {
       setData("bankStatementDocument", alreadyUploadedDocuments);
       if (bankData?.description) setData("description", bankData.description);
       triggerValidation();
     }
-  }, [alreadyUploadedDocuments, bankData?.description, setData, triggerValidation]);
+  }, [
+    alreadyUploadedDocuments,
+    bankData?.description,
+    setData,
+    triggerValidation,
+    useMultiFormMode
+  ]);
   useEffect$1(() => {
-    stateRef.current?.setState?.({
-      type: "addToState",
-      value: {
-        data,
-        valid,
-        errors,
-        fieldProblems,
-        dataStoreId: id,
-        schema: bankDocumentClassificationFields
-      }
-    });
-  }, [data, valid, errors, fieldProblems, id]);
+    if (!useMultiFormMode) {
+      stateRef.current?.setState?.({
+        type: "addToState",
+        value: {
+          data,
+          valid,
+          errors,
+          fieldProblems,
+          dataStoreId: id,
+          schema: bankDocumentClassificationFields
+        }
+      });
+    }
+  }, [data, valid, errors, fieldProblems, id, useMultiFormMode]);
   const handleUploadNewDocument = () => {
     userEvents.addEvent("Clicked button", {
       actionType: "next",
@@ -731,7 +752,7 @@ function BankDocumentClassification(props) {
     });
   };
   const documentPreview = useMemo(() => {
-    if (!data.bankStatementDocument?.[0] || !showReviewModal) return null;
+    if (!data?.bankStatementDocument?.[0] || !showReviewModal) return null;
     const file = data.bankStatementDocument?.[0];
     return file.type === "application/pdf" || file.name.toLowerCase().endsWith(".pdf") ? /* @__PURE__ */ jsx(
       "object",
@@ -747,7 +768,7 @@ function BankDocumentClassification(props) {
   }, [data?.bankStatementDocument, showReviewModal, t]);
   return /* @__PURE__ */ jsxs("div", { className: styles$3.bankDocumentPage, children: [
     /* @__PURE__ */ jsxs("form", { className: styles$3.bankDocumentClassification, children: [
-      /* @__PURE__ */ jsx(StateContextSetter, { owner: id, stateRef }),
+      !useMultiFormMode && /* @__PURE__ */ jsx(StateContextSetter, { owner: id, stateRef }),
       /* @__PURE__ */ jsx(
         Header,
         {
@@ -780,7 +801,7 @@ function BankDocumentClassification(props) {
         {
           className: cx("adyen-kyc-upload-field"),
           name: "bankStatementDocument",
-          isValid: valid.bankStatementDocument,
+          isValid: valid?.bankStatementDocument ?? true,
           children: (childProps) => /* @__PURE__ */ jsx(
             "div",
             {
@@ -790,10 +811,10 @@ function BankDocumentClassification(props) {
                 {
                   ...childProps,
                   name: "bankStatementDocument",
-                  files: data.bankStatementDocument ?? [],
+                  files: data?.bankStatementDocument ?? [],
                   setFiles: handleDocumentUpload,
-                  isValid: valid.bankStatementDocument ?? isBankStatementOptional,
-                  errorMessage: errors.bankStatementDocument?.errorMessage,
+                  isValid: valid?.bankStatementDocument ?? isBankStatementOptional,
+                  errorMessage: errors?.bankStatementDocument?.errorMessage,
                   loading: validateDocumentMutation.isPending && !isShadowMode,
                   ...bankStatementValidationOptions
                 }
@@ -802,23 +823,23 @@ function BankDocumentClassification(props) {
           )
         }
       ),
-      data.bankStatementDocument?.length ? /* @__PURE__ */ jsx(
+      data?.bankStatementDocument?.length ? /* @__PURE__ */ jsx(
         Field,
         {
           className: "adyen-kyc-document-description",
           name: "description",
           label: formUtils.getLabel("bankDocumentFileDescription"),
           errorMessage: formUtils.getErrorMessage("description", errors, fieldProblems),
-          isValid: valid.description,
+          isValid: valid?.description,
           children: (childProps) => /* @__PURE__ */ jsx(
             TextArea,
             {
               ...childProps,
               name: "description",
-              value: data.description,
+              value: data?.description,
               maxLength: CHARACTERS_LIMIT,
-              onInput: handleChangeFor("description"),
-              "aria-invalid": !valid.description
+              onInput: handleChange("description"),
+              "aria-invalid": valid?.description === false
             }
           )
         }
@@ -1132,55 +1153,68 @@ function BankVerification(props) {
     data: propData,
     provider,
     id,
-    fieldValidationErrors
+    fieldValidationErrors,
+    handleFieldChange,
+    valid: propValid,
+    errors: propErrors
   } = props;
   const invalidateRootLegalEntity = useInvalidateRootLegalEntity();
   const schema = accountVerificationFields;
   const stateRef = useRef({ setState: null });
-  const { handleChangeFor, data, valid, errors, isValid, triggerValidation, fieldProblems } = useForm({
+  const localForm = useForm({
     ...props,
     schema,
     defaultData: propData,
     rules: bankVerificationValidationRules,
     fieldProblems: fieldValidationErrors
   });
+  const useMultiFormMode = !!handleFieldChange;
+  const data = useMultiFormMode ? propData : localForm.data;
+  const valid = useMultiFormMode ? propValid : localForm.valid;
+  const errors = useMultiFormMode ? propErrors : localForm.errors;
+  const fieldProblems = useMultiFormMode ? fieldValidationErrors : localForm.fieldProblems;
+  const handleChange = useMultiFormMode ? handleFieldChange : localForm.handleChangeFor;
   const retrieveBankAccountInfo = async ({
     realLastFour,
     number,
     bankName
   }) => {
-    handleChangeFor("verifiedBankAccountNumber")(realLastFour ? `*******${realLastFour}` : number);
-    handleChangeFor("verifiedBankName")(bankName);
-    handleChangeFor("verifiedBankCountry")(country);
-    handleChangeFor("verifiedAccountHolder")(propData?.verifiedAccountHolder);
-    handleChangeFor("verifiedCurrencyCode")(
+    handleChange("verifiedBankAccountNumber")(realLastFour ? `*******${realLastFour}` : number);
+    handleChange("verifiedBankName")(bankName);
+    handleChange("verifiedBankCountry")(country);
+    handleChange("verifiedAccountHolder")(propData?.verifiedAccountHolder);
+    handleChange("verifiedCurrencyCode")(
       propData?.verifiedCurrencyCode ?? currencyByCountry[country]?.[0]
     );
     setBankInfoValidated?.(true);
     hideSidebar?.(false);
-    triggerValidation();
+    if (!useMultiFormMode) {
+      localForm.triggerValidation();
+    }
     await invalidateRootLegalEntity();
     showInstantVerificationPayoutModal.value = false;
   };
   useEffect(() => {
-    stateRef.current.setState?.({
-      type: "addToState",
-      value: {
-        data,
-        valid,
-        errors,
-        fieldProblems,
-        dataStoreId: id,
-        schema
-      }
-    });
-  }, [data, valid, errors, isValid]);
+    if (!useMultiFormMode) {
+      stateRef.current.setState?.({
+        type: "addToState",
+        value: {
+          data,
+          valid,
+          errors,
+          fieldProblems,
+          dataStoreId: id,
+          schema
+        }
+      });
+    }
+  }, [data, valid, errors, localForm.isValid, useMultiFormMode]);
   if (provider) {
     if (bankInfoValidated || !showInstantVerificationPayoutModal.value) {
       return null;
     }
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(StateContextSetter, { owner: id, stateRef }),
+      !useMultiFormMode && /* @__PURE__ */ jsx(StateContextSetter, { owner: id, stateRef }),
       /* @__PURE__ */ jsx(
         BankVerificationOverlay,
         {
@@ -1223,7 +1257,6 @@ function BankAccountFormat(props) {
 const simpleBankAccountNumberMetadata = (example, length, maxLength) => {
   if (maxLength) {
     return {
-      label: "bankAccountNumber",
       validators: validatePatternOnBlur(new RegExp(`^\\d{${length},${maxLength}}$`)),
       mask: {
         mask: makeMask(...numericInputs(length), ...numericInputs(maxLength - length, true))
@@ -1238,7 +1271,6 @@ const simpleBankAccountNumberMetadata = (example, length, maxLength) => {
     };
   }
   return {
-    label: "bankAccountNumber",
     validators: validatePatternOnBlur(new RegExp(`^\\d{${length}}$`)),
     mask: { mask: makeMask(...numericInputs(length)) },
     guidanceText: {
@@ -1251,13 +1283,11 @@ const simpleBankAccountNumberMetadata = (example, length, maxLength) => {
   };
 };
 const defaultFieldMetadata$3 = {
-  label: "bankAccountNumber",
   validators: isNotEmptyValidator
 };
 const defaultFieldConfig$3 = {
   [CountryCodes.CzechRepublic]: {
     // Validators & masks pulled from https://docs.adyen.com/api-explorer/legalentity/4/post/transferInstruments#request-bankAccount-accountIdentification-CZLocalAccountIdentification
-    label: "bankAccountNumber",
     validators: validatePatternOnBlur(/^((\d{2}|\d{6})-)?\d*\d{2}$/),
     mask: {
       mask: makeMask(
@@ -1285,7 +1315,6 @@ const defaultFieldConfig$3 = {
   [CountryCodes.Brazil]: simpleBankAccountNumberMetadata("0009795493", 4, 12),
   [CountryCodes.Canada]: simpleBankAccountNumberMetadata("10220001111", 5, 12),
   [CountryCodes.HongKong]: {
-    label: "bankAccountNumber",
     validators: validatePatternOnBlur(new RegExp(`^\\d{${6},${18}}$`)),
     mask: {
       mask: makeMask(...numericInputs(6), ...numericInputs(12, true))
@@ -1304,7 +1333,6 @@ const defaultFieldConfig$3 = {
   [CountryCodes.Sweden]: simpleBankAccountNumberMetadata("123456789", 7, 10),
   [CountryCodes.UnitedStates]: simpleBankAccountNumberMetadata("10220001111", 3, 17),
   [CountryCodes.Poland]: {
-    label: "bankAccountNumber",
     validators: validatePatternOnBlur(/^\d{26}$/),
     mask: {
       mask: makeMask(
@@ -1332,7 +1360,6 @@ const defaultFieldConfig$3 = {
     }
   },
   [CountryCodes.NewZealand]: {
-    label: "bankAccountNumber",
     validators: validatePatternOnBlur(/^\d{15,16}$/),
     mask: {
       mask: makeMask(
@@ -1359,10 +1386,20 @@ const defaultFieldConfig$3 = {
 const bankAccountNumberFields = ["bankAccountNumber"];
 function BankAccountNumber(props) {
   const { t } = useTranslation("common");
-  const { country, fieldConfig = defaultFieldConfig$3, onFocus, onBlur } = props;
+  const {
+    country,
+    fieldConfig = defaultFieldConfig$3,
+    onFocus,
+    onBlur,
+    handleFieldChange,
+    data: propsData,
+    valid: propsValid,
+    errors: propsErrors,
+    fieldValidationErrors: propsFieldValidationErrors
+  } = props;
   const metadata = resolveFieldMetadata(fieldConfig[country], {}, defaultFieldMetadata$3);
   const mergedProps = mergeFieldMetadataIntoProps("bankAccountNumber", metadata, props);
-  const { handleChangeFor, data, valid, errors, fieldProblems } = useForm({
+  const localForm = useForm({
     ...mergedProps,
     schema: bankAccountNumberFields,
     rules: mergedProps.validators,
@@ -1370,34 +1407,42 @@ function BankAccountNumber(props) {
     fieldProblems: mergedProps?.fieldValidationErrors,
     obscuredFields: mergedProps.obscuredFields
   });
+  const useMultiFormMode = !!handleFieldChange;
+  const data = useMultiFormMode ? propsData : localForm.data;
+  const valid = useMultiFormMode ? propsValid : localForm.valid;
+  const errors = useMultiFormMode ? propsErrors : localForm.errors;
+  const fieldProblems = useMultiFormMode ? propsFieldValidationErrors : localForm.fieldProblems;
+  const handleChange = useMultiFormMode ? handleFieldChange : localForm.handleChangeFor;
   const handleBlur = () => {
     onBlur?.();
-    handleChangeFor("bankAccountNumber", "blur");
+    handleChange("bankAccountNumber", "blur");
   };
   const { updateStateSlice } = useGlobalDataSlice(
     "payoutAccountDetails"
   );
   useEffect(() => {
-    updateStateSlice({ data, valid, errors, fieldProblems });
-  }, [data, valid, errors]);
+    if (!useMultiFormMode) {
+      updateStateSlice({ data, valid, errors, fieldProblems });
+    }
+  }, [data, valid, errors, fieldProblems, useMultiFormMode]);
   const formUtils = createFormUtils(mergedProps, t);
   return /* @__PURE__ */ jsx(
     MaskedInput,
     {
       name: "bankAccountNumber",
       type: "text",
-      label: formUtils.getLabel("bankAccountNumber"),
+      label: t(($) => $["bankAccountNumber"]),
       formatGuidance: translateTranslatable(t, metadata.guidanceText),
       ...formUtils.getMask("bankAccountNumber"),
-      isValid: valid.bankAccountNumber,
+      isValid: valid?.bankAccountNumber ?? true,
       errorMessage: formUtils.getErrorMessage("bankAccountNumber", errors, fieldProblems),
       "aria-required": true,
-      "aria-invalid": !valid.bankAccountNumber,
+      "aria-invalid": !valid?.bankAccountNumber,
       onBlur: handleBlur,
-      onInput: handleChangeFor("bankAccountNumber", "input"),
+      onInput: handleChange("bankAccountNumber", "input"),
       onFocus,
       readonly: formUtils.isReadOnly("bankAccountNumber"),
-      value: data.bankAccountNumber ?? "",
+      value: data?.bankAccountNumber ?? "",
       acceptObscuredValue: formUtils.isObscured("bankAccountNumber")
     }
   );
@@ -1405,39 +1450,54 @@ function BankAccountNumber(props) {
 const bankCityFields = ["bankCity"];
 function BankCity(props) {
   const { t } = useTranslation("common");
-  const { validators, data: bankCityData, fieldValidationErrors } = props;
-  const { handleChangeFor, data, valid, errors, fieldProblems } = useForm({
+  const {
+    validators,
+    data: bankCityData,
+    valid: propsValid,
+    errors: propsErrors,
+    fieldValidationErrors,
+    handleFieldChange
+  } = props;
+  const localForm = useForm({
     ...props,
     schema: bankCityFields,
     rules: validators,
     defaultData: bankCityData,
     fieldProblems: fieldValidationErrors
   });
+  const useMultiFormMode = !!handleFieldChange;
+  const data = useMultiFormMode ? bankCityData : localForm.data;
+  const valid = useMultiFormMode ? propsValid : localForm.valid;
+  const errors = useMultiFormMode ? propsErrors : localForm.errors;
+  const fieldProblems = useMultiFormMode ? fieldValidationErrors : localForm.fieldProblems;
+  const handleChange = useMultiFormMode ? handleFieldChange : localForm.handleChangeFor;
   const { updateStateSlice } = useGlobalDataSlice(
     "payoutAccountDetails"
   );
   useEffect(() => {
-    updateStateSlice({ data, valid, errors, fieldProblems });
-  }, [data, valid, errors]);
+    if (!useMultiFormMode) {
+      updateStateSlice({ data, valid, errors, fieldProblems });
+    }
+  }, [data, valid, errors, fieldProblems, useMultiFormMode]);
   const formUtils = createFormUtils(props, t);
   return /* @__PURE__ */ jsx(
     Field,
     {
       name: "bankCity",
-      label: formUtils.getLabel("bankCity"),
+      label: t(($) => $["bankCityTown"]),
       errorMessage: formUtils.getErrorMessage("bankCity", errors, fieldProblems),
-      isValid: valid.bankCity,
+      isValid: valid?.bankCity ?? true,
       children: (childProps) => /* @__PURE__ */ jsx(
         InputText,
         {
           ...childProps,
           name: "bankCity",
-          value: data.bankCity,
+          value: data?.bankCity,
           readonly: formUtils.isReadOnly("bankCity"),
-          onInput: handleChangeFor("bankCity", "input"),
-          onBlur: handleChangeFor("bankCity", "blur"),
+          onInput: handleChange("bankCity", "input"),
+          onBlur: handleChange("bankCity", "blur"),
           "aria-required": true,
-          "aria-invalid": !valid.bankCity
+          "aria-invalid": !valid?.bankCity
         }
       )
     }
@@ -1466,7 +1526,7 @@ const defaultFieldConfig$2 = {
   [CountryCodes.Canada]: simpleBankCodeMetadata(3, "100", "institutionNumber"),
   [CountryCodes.CzechRepublic]: simpleBankCodeMetadata(4, "0800"),
   [CountryCodes.Denmark]: simpleBankCodeMetadata(4, "5051"),
-  [CountryCodes.HongKong]: simpleBankCodeMetadata(3, "250", "bankCode"),
+  [CountryCodes.HongKong]: simpleBankCodeMetadata(3, "250"),
   [CountryCodes.Norway]: simpleBankCodeMetadata(4, "8601"),
   // Not yet implemented
   [CountryCodes.Ecuador]: simpleBankCodeMetadata(4, "1234"),
@@ -1476,22 +1536,38 @@ const defaultFieldConfig$2 = {
 const bankCodeFields = ["bankCode"];
 function BankCode(props) {
   const { t } = useTranslation("common");
-  const { country, fieldConfig = defaultFieldConfig$2 } = props;
+  const {
+    country,
+    fieldConfig = defaultFieldConfig$2,
+    handleFieldChange,
+    data: propsData,
+    valid: propsValid,
+    errors: propsErrors,
+    fieldValidationErrors: propsFieldValidationErrors
+  } = props;
   const metadata = resolveFieldMetadata(fieldConfig[country], {}, defaultFieldMetadata$2);
   const mergedProps = mergeFieldMetadataIntoProps("bankCode", metadata, props);
-  const { handleChangeFor, data, valid, errors, fieldProblems } = useForm({
+  const localForm = useForm({
     ...mergedProps,
     schema: bankCodeFields,
     rules: mergedProps.validators,
     defaultData: mergedProps.data,
     fieldProblems: mergedProps.fieldValidationErrors
   });
+  const useMultiFormMode = !!handleFieldChange;
+  const data = useMultiFormMode ? propsData : localForm.data;
+  const valid = useMultiFormMode ? propsValid : localForm.valid;
+  const errors = useMultiFormMode ? propsErrors : localForm.errors;
+  const fieldProblems = useMultiFormMode ? propsFieldValidationErrors : localForm.fieldProblems;
+  const handleChange = useMultiFormMode ? handleFieldChange : localForm.handleChangeFor;
   const { updateStateSlice } = useGlobalDataSlice(
     "payoutAccountDetails"
   );
   useEffect(() => {
-    updateStateSlice({ data, valid, errors, fieldProblems });
-  }, [data, valid, errors]);
+    if (!useMultiFormMode) {
+      updateStateSlice({ data, valid, errors, fieldProblems });
+    }
+  }, [data, valid, errors, fieldProblems, useMultiFormMode]);
   const formUtils = createFormUtils(mergedProps, t);
   return /* @__PURE__ */ jsx(
     MaskedInput,
@@ -1502,52 +1578,67 @@ function BankCode(props) {
       errorMessage: formUtils.getErrorMessage("bankCode", errors, fieldProblems),
       formatGuidance: translateTranslatable(t, metadata.guidanceText),
       ...formUtils.getMask("bankCode"),
-      isValid: valid.bankCode,
-      value: data.bankCode ?? "",
+      isValid: valid?.bankCode ?? true,
+      value: data?.bankCode ?? "",
       readonly: formUtils.isReadOnly("bankCode"),
-      onInput: handleChangeFor("bankCode", "input"),
-      onBlur: handleChangeFor("bankCode", "blur"),
+      onInput: handleChange("bankCode", "input"),
+      onBlur: handleChange("bankCode", "blur"),
       "aria-required": true,
-      "aria-invalid": !valid.bankCode
+      "aria-invalid": !valid?.bankCode
     }
   );
 }
 const bankNameFields = ["bankName"];
 function BankName(props) {
   const { t } = useTranslation("common");
-  const { validators, data: bankNameData, fieldValidationErrors } = props;
-  const { handleChangeFor, data, valid, errors, fieldProblems } = useForm({
+  const {
+    validators,
+    data: bankNameData,
+    valid: propsValid,
+    errors: propsErrors,
+    fieldValidationErrors,
+    handleFieldChange
+  } = props;
+  const localForm = useForm({
     ...props,
     schema: bankNameFields,
     rules: validators,
     defaultData: bankNameData,
     fieldProblems: fieldValidationErrors
   });
+  const useMultiFormMode = !!handleFieldChange;
+  const data = useMultiFormMode ? bankNameData : localForm.data;
+  const valid = useMultiFormMode ? propsValid : localForm.valid;
+  const errors = useMultiFormMode ? propsErrors : localForm.errors;
+  const fieldProblems = useMultiFormMode ? fieldValidationErrors : localForm.fieldProblems;
+  const handleChange = useMultiFormMode ? handleFieldChange : localForm.handleChangeFor;
   const { updateStateSlice } = useGlobalDataSlice(
     "payoutAccountDetails"
   );
   useEffect(() => {
-    updateStateSlice({ data, valid, errors, fieldProblems });
-  }, [data, valid, errors]);
+    if (!useMultiFormMode) {
+      updateStateSlice({ data, valid, errors, fieldProblems });
+    }
+  }, [data, valid, errors, fieldProblems, useMultiFormMode]);
   const formUtils = createFormUtils(props, t);
   return /* @__PURE__ */ jsx(
     Field,
     {
       name: "bankName",
-      label: formUtils.getLabel("bankName"),
+      label: t(($) => $["bankName"]),
       errorMessage: formUtils.getErrorMessage("bankName", errors, fieldProblems),
-      isValid: valid.bankName,
+      isValid: valid?.bankName ?? true,
       children: (childProps) => /* @__PURE__ */ jsx(
         InputText,
         {
           ...childProps,
           name: "bankName",
-          value: data.bankName,
+          value: data?.bankName,
           readonly: formUtils.isReadOnly("bankName"),
-          onInput: handleChangeFor("bankName", "input"),
-          onBlur: handleChangeFor("bankName", "blur"),
+          onInput: handleChange("bankName", "input"),
+          onBlur: handleChange("bankName", "blur"),
           "aria-required": true,
-          "aria-invalid": !valid.bankName
+          "aria-invalid": !valid?.bankName
         }
       )
     }
@@ -1646,26 +1737,44 @@ const defaultFieldConfig$1 = {
 const branchCodeFields = ["branchCode"];
 function BranchCode(props) {
   const { t } = useTranslation("common");
-  const { country, fieldConfig = defaultFieldConfig$1, onFocus, onBlur } = props;
+  const {
+    country,
+    fieldConfig = defaultFieldConfig$1,
+    onFocus,
+    onBlur,
+    handleFieldChange,
+    data: propsData,
+    valid: propsValid,
+    errors: propsErrors,
+    fieldValidationErrors: propsFieldValidationErrors
+  } = props;
   const metadata = resolveFieldMetadata(fieldConfig[country], {}, defaultFieldMetadata$1);
   const mergedProps = mergeFieldMetadataIntoProps("branchCode", metadata, props);
-  const { handleChangeFor, data, valid, errors, fieldProblems } = useForm({
+  const localForm = useForm({
     ...mergedProps,
     schema: branchCodeFields,
     rules: mergedProps.validators,
     defaultData: mergedProps.data,
     fieldProblems: mergedProps?.fieldValidationErrors
   });
+  const useMultiFormMode = !!handleFieldChange;
+  const data = useMultiFormMode ? propsData : localForm.data;
+  const valid = useMultiFormMode ? propsValid : localForm.valid;
+  const errors = useMultiFormMode ? propsErrors : localForm.errors;
+  const fieldProblems = useMultiFormMode ? propsFieldValidationErrors : localForm.fieldProblems;
+  const handleChange = useMultiFormMode ? handleFieldChange : localForm.handleChangeFor;
   const { updateStateSlice } = useGlobalDataSlice(
     "payoutAccountDetails"
   );
   const handleBlur = () => {
     onBlur?.();
-    handleChangeFor("branchCode", "blur");
+    handleChange("branchCode", "blur");
   };
   useEffect(() => {
-    updateStateSlice({ data, valid, errors, fieldProblems });
-  }, [data, valid, errors]);
+    if (!useMultiFormMode) {
+      updateStateSlice({ data, valid, errors, fieldProblems });
+    }
+  }, [data, valid, errors, fieldProblems, useMultiFormMode]);
   const formUtils = createFormUtils(mergedProps, t);
   return /* @__PURE__ */ jsx(
     MaskedInput,
@@ -1676,14 +1785,14 @@ function BranchCode(props) {
       formatGuidance: translateTranslatable(t, metadata.guidanceText),
       ...formUtils.getMask("branchCode"),
       errorMessage: formUtils.getErrorMessage("branchCode", errors, fieldProblems),
-      isValid: valid.branchCode,
-      value: data.branchCode ?? "",
+      isValid: valid?.branchCode ?? true,
+      value: data?.branchCode ?? "",
       readonly: formUtils.isReadOnly("branchCode"),
-      onInput: handleChangeFor("branchCode", "input"),
+      onInput: handleChange("branchCode", "input"),
       onBlur: handleBlur,
       onFocus,
       "aria-required": true,
-      "aria-invalid": !valid.branchCode
+      "aria-invalid": !valid?.branchCode
     }
   );
 }
@@ -1841,7 +1950,6 @@ const ibanGuidance = (type, numDigitsOrChars, example) => type === "digits" ? {
   }
 };
 const ibanMetadata = (country, inputLength, example, allowLettersInBban) => ({
-  label: "iban",
   validators: validateIbanOnBlurAndInput(country),
   mask: ibanMask(country, inputLength, allowLettersInBban),
   guidanceText: ibanGuidance(allowLettersInBban ? "characters" : "digits", inputLength, example)
@@ -1853,7 +1961,6 @@ const gbIbanMetadata = ibanMetadata(
   true
 );
 const defaultFieldMetadata = {
-  label: "iban",
   validators: isNotEmptyValidator
 };
 const defaultFieldConfig = {
@@ -1978,12 +2085,15 @@ function Iban(props) {
     country,
     fieldConfig = defaultFieldConfig,
     data: ibanData,
+    valid: propsValid,
+    errors: propsErrors,
     obscuredFields,
-    fieldValidationErrors
+    fieldValidationErrors,
+    handleFieldChange
   } = props;
   const metadata = resolveFieldMetadata(fieldConfig[country], {}, defaultFieldMetadata);
   const mergedProps = mergeFieldMetadataIntoProps("iban", metadata, props);
-  const { handleChangeFor, data, valid, errors, fieldProblems } = useForm({
+  const localForm = useForm({
     ...mergedProps,
     schema: ibanFields,
     rules: mergedProps.validators,
@@ -1991,35 +2101,42 @@ function Iban(props) {
     fieldProblems: fieldValidationErrors,
     obscuredFields
   });
+  const useMultiFormMode = !!handleFieldChange;
+  const data = useMultiFormMode ? ibanData : localForm.data;
+  const valid = useMultiFormMode ? propsValid : localForm.valid;
+  const errors = useMultiFormMode ? propsErrors : localForm.errors;
+  const fieldProblems = useMultiFormMode ? fieldValidationErrors : localForm.fieldProblems;
+  const handleChange = useMultiFormMode ? handleFieldChange : localForm.handleChangeFor;
   const { updateStateSlice } = useGlobalDataSlice(
     "payoutAccountDetails"
   );
   useEffect(() => {
-    updateStateSlice({ data, valid, errors, fieldProblems });
-  }, [data, errors, valid]);
+    if (!useMultiFormMode) {
+      updateStateSlice({ data, valid, errors, fieldProblems });
+    }
+  }, [data, errors, valid, fieldProblems, useMultiFormMode]);
   const formUtils = createFormUtils(mergedProps, t);
   return /* @__PURE__ */ jsx(
     MaskedInput,
     {
       name: "iban",
       type: "text",
-      label: formUtils.getLabel("iban"),
+      label: t(($) => $["iban"]),
       formatGuidance: translateTranslatable(t, metadata.guidanceText),
       ...formUtils.getMask("iban"),
       errorMessage: formUtils.getErrorMessage("iban", errors, fieldProblems),
-      isValid: valid.iban,
-      value: data.iban ?? "",
+      isValid: valid?.iban ?? true,
+      value: data?.iban ?? "",
       readonly: formUtils.isReadOnly("iban"),
-      onInput: handleChangeFor("iban", "blur"),
-      onBlur: handleChangeFor("iban", "blur"),
+      onInput: handleChange("iban", "input"),
+      onBlur: handleChange("iban", "blur"),
       "aria-required": true,
-      "aria-invalid": !valid.iban,
+      "aria-invalid": valid?.iban === false,
       acceptObscuredValue: formUtils.isObscured("iban")
     }
   );
 }
 const swiftCodeFieldMetadata = {
-  label: "bicSwift",
   validators: validatePatternOnBlur(/^([a-zA-Z0-9]{8}|[a-zA-Z0-9]{11})$/),
   mask: {
     mask: makeMask(...alphaInputs(6), ...alphanumericInputs(2), ...alphanumericInputs(3, true)),
@@ -2029,27 +2146,42 @@ const swiftCodeFieldMetadata = {
 const swiftCodeFields = ["swiftCode"];
 function SwiftCode(props) {
   const { t } = useTranslation("common");
+  const {
+    handleFieldChange,
+    data: propsData,
+    valid: propsValid,
+    errors: propsErrors,
+    fieldValidationErrors: propsFieldValidationErrors
+  } = props;
   const mergedProps = mergeFieldMetadataIntoProps("swiftCode", swiftCodeFieldMetadata, props);
-  const { handleChangeFor, data, valid, errors, fieldProblems } = useForm({
+  const localForm = useForm({
     ...mergedProps,
     schema: swiftCodeFields,
     rules: mergedProps.validators,
     defaultData: mergedProps.data,
     fieldProblems: mergedProps?.fieldValidationErrors
   });
+  const useMultiFormMode = !!handleFieldChange;
+  const data = useMultiFormMode ? propsData : localForm.data;
+  const valid = useMultiFormMode ? propsValid : localForm.valid;
+  const errors = useMultiFormMode ? propsErrors : localForm.errors;
+  const fieldProblems = useMultiFormMode ? propsFieldValidationErrors : localForm.fieldProblems;
+  const handleChange = useMultiFormMode ? handleFieldChange : localForm.handleChangeFor;
   const { updateStateSlice } = useGlobalDataSlice(
     "payoutAccountDetails"
   );
   useEffect(() => {
-    updateStateSlice({ data, valid, errors, fieldProblems });
-  }, [data, valid, errors]);
+    if (!useMultiFormMode) {
+      updateStateSlice({ data, valid, errors, fieldProblems });
+    }
+  }, [data, valid, errors, fieldProblems, useMultiFormMode]);
   const formUtils = createFormUtils(mergedProps, t);
   return /* @__PURE__ */ jsx(
     MaskedInput,
     {
       name: "swiftCode",
       type: "text",
-      label: formUtils.getLabel("swiftCode"),
+      label: t(($) => $["bicSwift"]),
       formatGuidance: t(($) => $["enterXOrYCharactersForExample"], {
         xChars: "8",
         yChars: "11",
@@ -2057,13 +2189,13 @@ function SwiftCode(props) {
       }),
       ...formUtils.getMask("swiftCode"),
       errorMessage: formUtils.getErrorMessage("swiftCode", errors, fieldProblems),
-      isValid: valid.swiftCode,
-      value: data.swiftCode ?? "",
+      isValid: valid?.swiftCode ?? true,
+      value: data?.swiftCode ?? "",
       readonly: formUtils.isReadOnly("swiftCode"),
-      onInput: handleChangeFor("swiftCode", "input"),
-      onBlur: handleChangeFor("swiftCode", "blur"),
+      onInput: handleChange("swiftCode", "input"),
+      onBlur: handleChange("swiftCode", "blur"),
       "aria-required": true,
-      "aria-invalid": !valid.swiftCode
+      "aria-invalid": valid?.swiftCode === false
     }
   );
 }
@@ -2295,7 +2427,10 @@ function PayoutAccount(props) {
     formVerificationErrors,
     fieldValidationErrors,
     preferredCurrencyCode,
-    data
+    data,
+    errors,
+    valid,
+    handleFieldChange
   } = props;
   const showCheckGuidance = shouldShowCheckGuidance(country);
   const formUtils = createFormUtils({ ...props, requiredFields }, commonT);
@@ -2330,6 +2465,13 @@ function PayoutAccount(props) {
       handleAccountFormatChange?.("numberAndBic");
     }
   }, [country, preferredCurrencyCode]);
+  const multiFormProps = handleFieldChange ? {
+    data,
+    valid,
+    errors,
+    fieldValidationErrors,
+    handleFieldChange
+  } : {};
   return /* @__PURE__ */ jsxs("form", { className: "adyen-kyc-individual__payout-account", "aria-describedby": "ariaErrorField", children: [
     heading && /* @__PURE__ */ jsx(Header, { title: heading, children: /* @__PURE__ */ jsx(
       AccountHolderDescriptionFragment,
@@ -2362,7 +2504,8 @@ function PayoutAccount(props) {
         country,
         dataStoreId: id,
         onFocus: showCheckGuidance ? () => setCheckAnnotation("routing") : void 0,
-        onBlur: showCheckGuidance ? () => setCheckAnnotation(void 0) : void 0
+        onBlur: showCheckGuidance ? () => setCheckAnnotation(void 0) : void 0,
+        ...multiFormProps
       }
     ),
     formUtils.isRequiredField("bankAccountNumber") && /* @__PURE__ */ jsx(
@@ -2372,14 +2515,15 @@ function PayoutAccount(props) {
         country,
         dataStoreId: id,
         onFocus: showCheckGuidance ? () => setCheckAnnotation("account") : void 0,
-        onBlur: showCheckGuidance ? () => setCheckAnnotation(void 0) : void 0
+        onBlur: showCheckGuidance ? () => setCheckAnnotation(void 0) : void 0,
+        ...multiFormProps
       }
     ),
-    formUtils.isRequiredField("iban") && /* @__PURE__ */ jsx(Iban, { ...ibanProps, dataStoreId: id, country }),
-    formUtils.isRequiredField("swiftCode") && /* @__PURE__ */ jsx(SwiftCode, { ...swiftCodeProps, dataStoreId: id }),
-    formUtils.isRequiredField("bankName") && /* @__PURE__ */ jsx(BankName, { ...bankNameProps, dataStoreId: id }),
-    formUtils.isRequiredField("bankCode") && /* @__PURE__ */ jsx(BankCode, { ...bankCodeProps, country, dataStoreId: id }),
-    formUtils.isRequiredField("bankCity") && /* @__PURE__ */ jsx(BankCity, { ...bankCityProps, dataStoreId: id }),
+    formUtils.isRequiredField("iban") && /* @__PURE__ */ jsx(Iban, { ...ibanProps, dataStoreId: id, country, ...multiFormProps }),
+    formUtils.isRequiredField("swiftCode") && /* @__PURE__ */ jsx(SwiftCode, { ...swiftCodeProps, dataStoreId: id, ...multiFormProps }),
+    formUtils.isRequiredField("bankName") && /* @__PURE__ */ jsx(BankName, { ...bankNameProps, dataStoreId: id, ...multiFormProps }),
+    formUtils.isRequiredField("bankCode") && /* @__PURE__ */ jsx(BankCode, { ...bankCodeProps, country, dataStoreId: id, ...multiFormProps }),
+    formUtils.isRequiredField("bankCity") && /* @__PURE__ */ jsx(BankCity, { ...bankCityProps, dataStoreId: id, ...multiFormProps }),
     shouldShowPayoutAlert(country) && !isCrossBorderPayoutsEnabled && /* @__PURE__ */ jsx(
       Alert,
       {
@@ -2552,7 +2696,15 @@ const DEFAULT_CURRENCY_FALLBACK = "USD";
 const getDefaultCurrencyForCountry = (country) => currencyByCountry[country]?.[0] ?? DEFAULT_CURRENCY_FALLBACK;
 const getCountryCodeFromEvent = (event) => event?.target?.value;
 function PayoutCountryDetails(props) {
-  const { legalEntityResponse, data: propData, provider } = props;
+  const {
+    legalEntityResponse,
+    data: propData,
+    provider,
+    handleFieldChange,
+    valid: propValid,
+    errors: propErrors,
+    fieldValidationErrors: propFieldValidationErrors
+  } = props;
   const { t: commonT } = useTranslation("common");
   const { t } = useTranslation("banking");
   const { isSettingEnabled } = useSettingsContext();
@@ -2560,7 +2712,7 @@ function PayoutCountryDetails(props) {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const legalEntityType = legalEntityResponse.type;
   const defaultCurrency = getDefaultCurrencyForCountry(country);
-  const { handleChangeFor, data, valid, errors, fieldProblems } = useForm({
+  const localForm = useForm({
     ...props,
     schema: payoutCountryDetailsFields,
     defaultData: {
@@ -2569,6 +2721,12 @@ function PayoutCountryDetails(props) {
     },
     shouldValidate: true
   });
+  const useMultiFormMode = !!handleFieldChange;
+  const data = useMultiFormMode ? propData : localForm.data;
+  const valid = useMultiFormMode ? propValid : localForm.valid;
+  const errors = useMultiFormMode ? propErrors : localForm.errors;
+  const fieldProblems = useMultiFormMode ? propFieldValidationErrors : localForm.fieldProblems;
+  const handleChange = useMultiFormMode ? handleFieldChange : localForm.handleChangeFor;
   const formUtils = createFormUtils(props, commonT);
   const allowedBankCountries = Object.keys(currencyByCountry);
   const canChangeEntityType = isSettingEnabled(SettingNames.AllowLegalEntityTypeChange);
@@ -2616,12 +2774,26 @@ function PayoutCountryDetails(props) {
     "payoutCountryDetails"
   );
   useEffect(() => {
-    updateStateSlice({ data, valid, errors, fieldProblems });
-  }, [data, valid, errors, updateStateSlice, fieldProblems]);
+    if (!useMultiFormMode) {
+      updateStateSlice({
+        data: localForm.data,
+        valid: localForm.valid,
+        errors: localForm.errors,
+        fieldProblems: localForm.fieldProblems
+      });
+    }
+  }, [
+    localForm.data,
+    localForm.valid,
+    localForm.errors,
+    updateStateSlice,
+    localForm.fieldProblems,
+    useMultiFormMode
+  ]);
   const updateCountryField = (event) => {
     const updatedCountry = getCountryCodeFromEvent(event);
-    handleChangeFor("bankCountry", "input")(updatedCountry);
-    handleChangeFor("preferredCurrency", "input")(getDefaultCurrencyForCountry(updatedCountry));
+    handleChange("bankCountry", "input")(updatedCountry);
+    handleChange("preferredCurrency", "input")(getDefaultCurrencyForCountry(updatedCountry));
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("form", { style: { minHeight: "480px" }, children: [
@@ -2632,8 +2804,8 @@ function PayoutCountryDetails(props) {
       /* @__PURE__ */ jsx(
         CountryField,
         {
-          data: { country: data.bankCountry },
-          valid: { country: valid?.bankCountry },
+          data: { country: data?.bankCountry },
+          valid: { country: valid?.bankCountry ?? true },
           errors: { country: formUtils.getErrorMessage("bankCountry", errors, fieldProblems) },
           labels: { country: t(($) => $["bankAccountCountryRegion"]) },
           readonly: false,
@@ -2644,9 +2816,9 @@ function PayoutCountryDetails(props) {
       /* @__PURE__ */ jsx(
         PreferredCurrency,
         {
-          country: data.bankCountry,
-          preferredCurrency: data.preferredCurrency ?? defaultCurrency,
-          handleChangeFor
+          country: data?.bankCountry ?? country,
+          preferredCurrency: data?.preferredCurrency ?? defaultCurrency,
+          handleChangeFor: handleChange
         }
       )
     ] }),
@@ -2811,7 +2983,10 @@ function PayoutVerificationMethod(props) {
     bankInfoValidated,
     data: payoutVerificationMethodData,
     fieldValidationErrors,
-    formVerificationErrors
+    formVerificationErrors,
+    handleFieldChange,
+    valid: propValid,
+    errors: propErrors
   } = props;
   const { type: legalEntityType } = legalEntityResponse;
   const { t } = useTranslation("banking");
@@ -2824,7 +2999,7 @@ function PayoutVerificationMethod(props) {
     SettingNames.AllowIntraRegionCrossBorderPayout
   );
   const [hasSelectedMethod, setHasSelectedMethod] = useState(false);
-  const { handleChangeFor, data, valid, errors, fieldProblems } = useForm({
+  const localForm = useForm({
     ...props,
     schema: payoutVerificationMethodFields,
     defaultData: {
@@ -2841,48 +3016,62 @@ function PayoutVerificationMethod(props) {
     },
     fieldProblems: fieldValidationErrors
   });
+  const useMultiFormMode = !!handleFieldChange;
+  const data = useMultiFormMode ? payoutVerificationMethodData : localForm.data;
+  const valid = useMultiFormMode ? propValid : localForm.valid;
+  const errors = useMultiFormMode ? propErrors : localForm.errors;
+  const fieldProblems = useMultiFormMode ? fieldValidationErrors : localForm.fieldProblems;
+  const handleChange = useMultiFormMode ? handleFieldChange : localForm.handleChangeFor;
   const formUtils = createFormUtils(props, commonT);
   const { sliceData, updateStateSlice } = useGlobalDataSlice("payoutVerificationMethod");
   const { clearStateSlice: clearPayoutAccountDetails } = useGlobalDataSlice("payoutAccountDetails");
-  useEffect(
-    () => updateStateSlice({ data: { ...sliceData, ...data }, errors, valid, fieldProblems }),
-    [data, errors, fieldProblems, valid]
-  );
+  useEffect(() => {
+    if (!useMultiFormMode) {
+      updateStateSlice({
+        data: { ...sliceData, ...localForm.data },
+        errors: localForm.errors,
+        valid: localForm.valid,
+        fieldProblems: localForm.fieldProblems
+      });
+    }
+  }, [localForm.data, localForm.errors, localForm.fieldProblems, localForm.valid]);
   const methodsMetadata = makePayoutVerificationMethodsMetadata(provider?.name);
   const selectVerificationMethod = (method) => {
     setHasSelectedMethod(true);
-    handleChangeFor("payoutVerificationMethod")(method);
+    handleChange("payoutVerificationMethod")(method);
   };
   useEffect(() => {
     if (bankInfoValidated) return;
-    if (!hasSelectedMethod && instantVerificationAvailable && data.payoutVerificationMethod !== "instantVerification") {
-      handleChangeFor("payoutVerificationMethod")("instantVerification");
+    if (!hasSelectedMethod && instantVerificationAvailable && data?.payoutVerificationMethod !== "instantVerification") {
+      handleChange("payoutVerificationMethod")("instantVerification");
     }
-    if (!instantVerificationAvailable && data.payoutVerificationMethod !== "manualVerification") {
-      handleChangeFor("payoutVerificationMethod")("manualVerification");
+    if (!instantVerificationAvailable && data?.payoutVerificationMethod !== "manualVerification") {
+      handleChange("payoutVerificationMethod")("manualVerification");
     }
   }, [
-    data.payoutVerificationMethod,
-    handleChangeFor,
+    data?.payoutVerificationMethod,
+    handleChange,
     instantVerificationAvailable,
     hasSelectedMethod,
     bankInfoValidated
   ]);
   const { dataset: countries } = useDataset(datasetIdentifier.country);
-  const bankCountryName = countries.find((country2) => country2.id === data.bankCountry)?.name ?? data.bankCountry;
+  const bankCountryName = countries.find((country2) => country2.id === data?.bankCountry)?.name ?? data?.bankCountry;
   const allowedBankCountries = getAllowedBankCountries(country);
   const countryField = /* @__PURE__ */ jsx(
     CountryField,
     {
-      data: { country: data.bankCountry },
-      valid: { country: valid?.bankCountry },
+      data: { country: data?.bankCountry },
+      valid: { country: valid?.bankCountry ?? true },
       errors: { country: formUtils.getErrorMessage("bankCountry", errors, fieldProblems) },
       labels: { country: t(($) => $["bankAccountCountryRegion"]) },
       readonly: !intraRegionCrossBorderPayoutsAllowed || allowedBankCountries.length === 1 || bankInfoValidated,
       allowedCountries: allowedBankCountries,
       handleChangeFor: () => (e) => {
-        clearPayoutAccountDetails();
-        return handleChangeFor("bankCountry", "input")(e);
+        if (!useMultiFormMode) {
+          clearPayoutAccountDetails();
+        }
+        return handleChange("bankCountry", "input")(e);
       },
       helperText: intraRegionCrossBorderPayoutsAllowed ? void 0 : t(
         ($) => $[legalEntityType === LegalEntityTypes.INDIVIDUAL ? "youCanOnlyUseABankAccountInTheCountryRegionWhereYouLive" : "youCanOnlyUseABankAccountInTheCountryRegionWhereYourCompanyIsRegistered"]
@@ -2935,7 +3124,7 @@ function PayoutVerificationMethod(props) {
               tag: /* @__PURE__ */ jsx(Tag, { variant: "blue", className: "adyen-kyc-u-margin-bottom-8", children: t(($) => $["recommended"]) }),
               selectVerificationMethod,
               methodsMetadata,
-              payoutVerificationMethod: data.payoutVerificationMethod,
+              payoutVerificationMethod: data?.payoutVerificationMethod,
               instantVerificationAvailable,
               bankInfoValidated
             }
@@ -2948,7 +3137,7 @@ function PayoutVerificationMethod(props) {
               subtitle: t(($) => $["enterYourAccountsDetailsOnYourOwn"]),
               selectVerificationMethod,
               methodsMetadata,
-              payoutVerificationMethod: data.payoutVerificationMethod
+              payoutVerificationMethod: data?.payoutVerificationMethod
             }
           )
         ] })
@@ -3181,7 +3370,11 @@ function PayoutDetails(props) {
     ) })
   ] });
 }
-const rules = ({ data, requiredFields }) => createFormRules({
+const rules = ({
+  data,
+  requiredFields,
+  isFeatureEnabled
+}) => createFormRules({
   whenUsingManualVerification: () => {
     if (!data.payoutVerificationMethod) return;
     if (data?.payoutVerificationMethod?.payoutVerificationMethod === "manualVerification") {
@@ -3202,6 +3395,9 @@ const rules = ({ data, requiredFields }) => createFormRules({
     }
   },
   bankStatementRequirement: () => {
+    if (isFeatureEnabled?.("EnablePayoutDetailsMultiForm")) {
+      return "REQUIRED";
+    }
     if (data?.payoutVerificationMethod?.payoutVerificationMethod === "manualVerification") {
       return requiredFields?.bankStatementRequirement;
     }
@@ -3264,22 +3460,6 @@ const mapPayoutDocumentsToApiDocuments = async (data, entityId) => {
     existingDocument
   });
 };
-const CUSTOM_LABELS = {
-  verifiedAccountHolder: "accountHolder",
-  verifiedBankCountry: "bankCountry",
-  verifiedBankName: "bankName",
-  verifiedCurrencyCode: "currencyCode",
-  verifiedBankAccountNumber: "bankAccountNumber"
-};
-const formatAccountVerificationSummary = (data) => {
-  if (!data) return {};
-  const summary = {};
-  keysOf(CUSTOM_LABELS).forEach((key) => {
-    if (!data[key]) return;
-    summary[key] = summaryItem(CUSTOM_LABELS[key], data[key]);
-  });
-  return summary;
-};
 const obscuredPayoutFields = ["bankAccountNumber", "iban"];
 const payoutDetailsCountryConfig = {
   [CountryCodes.Canada]: {
@@ -3318,6 +3498,9 @@ function parsePayoutScenarios({
     bankCountry: {
       rule: "REQUIRED"
     },
+    preferredCurrency: {
+      rule: "REQUIRED"
+    },
     bankStatementDocument: {
       rule: "bankStatementRequirement"
     },
@@ -3369,6 +3552,13 @@ const getAppropriatePayoutDetailsSteps = (isEditing, instantVerificationAvailabl
   }
   return dependentSteps;
 };
+const CUSTOM_LABELS = {
+  verifiedAccountHolder: "accountHolder",
+  verifiedBankCountry: "bankCountry",
+  verifiedBankName: "bankName",
+  verifiedCurrencyCode: "currencyCode",
+  verifiedBankAccountNumber: "bankAccountNumber"
+};
 const getInvalidFieldsErrorHeader = (invalidField) => {
   switch (invalidField) {
     case "LEGAL_BUSINESS_NAME":
@@ -3416,7 +3606,15 @@ const getPayoutVerificationMethod = (transferInstrument, instantVerificationEnab
     return instantVerificationEnabled ? "instantVerification" : "manualVerification";
   }
 };
-const showInstantVerificationPayoutModal = signal(false);
+const formatAccountVerificationSummary = (data) => {
+  if (!data) return {};
+  const summary = {};
+  keysOf(CUSTOM_LABELS).forEach((key) => {
+    if (!data[key]) return;
+    summary[key] = summaryItem(CUSTOM_LABELS[key], data[key]);
+  });
+  return summary;
+};
 function PayoutDetailsDropin({
   legalEntityResponse,
   problems: propProblems,
@@ -3562,7 +3760,8 @@ function PayoutDetailsDropin({
   const fieldsFromCustomRules = useMemo$1(
     () => rules({
       data,
-      requiredFields
+      requiredFields,
+      isFeatureEnabled
     }),
     [bankAccountCountry, data, taskType, isFeatureEnabled]
   );
@@ -3983,5 +4182,45 @@ function PayoutDetailsDropin({
   );
 }
 export {
-  PayoutDetailsDropin as P
+  rules as A,
+  BankVerification as B,
+  mapPayoutAccountSchemaToApiBankAccount as C,
+  useCheck as D,
+  getAppropriatePayoutDetailsSteps as E,
+  mapApiDocumentToPayoutDocuments as F,
+  getInvalidFieldsErrorMessage as G,
+  parseConfiguration as H,
+  InstantVerificationErrorContext as I,
+  mapPayoutDetailsToTransferInstrument as J,
+  createTransferInstrument as K,
+  formatAccountVerificationSummary as L,
+  MemoizedBankDocumentClassification as M,
+  mapPayoutDocumentsToApiDocuments as N,
+  PayoutDetailsDropin as P,
+  useAsyncAccountDetailsValidationRules as a,
+  PayoutAccount as b,
+  PayoutVerificationMethod as c,
+  PayoutCountryDetails as d,
+  bankVerificationValidationRules as e,
+  bankDocumentValidationRules as f,
+  getAccountIdentificationFromPayoutAccountSchema as g,
+  defaultFieldMetadata$1 as h,
+  defaultFieldConfig$1 as i,
+  defaultFieldMetadata$3 as j,
+  defaultFieldConfig$3 as k,
+  defaultFieldMetadata as l,
+  defaultFieldConfig as m,
+  defaultFieldMetadata$2 as n,
+  defaultFieldConfig$2 as o,
+  payoutSteps as p,
+  swiftCodeFieldMetadata as q,
+  useUpdateTransferInstrument as r,
+  showInstantVerificationPayoutModal as s,
+  useUpdateTrustedTransferInstrument as t,
+  useInstantVerificationErrorNotification as u,
+  useCreateTrustedTransferInstrument as v,
+  getPayoutVerificationMethod as w,
+  getDefaultCurrencyForCountry as x,
+  useBankVerificationProviders as y,
+  getAccountFormatsForCountry as z
 };