@adyen/kyc-components 3.85.0 → 3.86.0-beta.0

package/dist/{PayoutDetailsDropin-CHOa81Ot.js → PayoutDetailsDropin-CxWPXV7j.js}

@@ -2,48 +2,45 @@
 {
   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] = "22574afc-6856-434d-a685-347920a23640", e._sentryDebugIdIdentifier = "sentry-dbid-22574afc-6856-434d-a685-347920a23640");
+    n && (e._sentryDebugIds = e._sentryDebugIds || {}, e._sentryDebugIds[n] = "7fcf74fb-0eb6-4de2-ab68-e220e822bf18", e._sentryDebugIdIdentifier = "sentry-dbid-7fcf74fb-0eb6-4de2-ab68-e220e822bf18");
   } catch (e) {
   }
 }
 ;
 import { jsx, jsxs, Fragment } from "preact/jsx-runtime";
+import { signal } from "@preact/signals";
 import { useState, useEffect, useRef, useMemo, useCallback, useContext } from "preact/hooks";
-import { b as useApiContext, j as useQuery, k as httpPost, o as httpGet, aD as useMutation, aF as useQueryClient, N as createLogger, a9 as CountryCodes, u as useTranslation, c as useLegalEntity, R as ROOT_LE, y as LegalEntityTypes, a as addResourceBundles, L as Loader, J as EntityTypes, _ as __variableDynamicImportRuntimeHelper, P as useAnalyticsContext, U as Icon, x as Typography, B as Button, af as useI18nContext, ai as objectsDeepEqual, aJ as doArraysMatch, aa as isEmpty, be as getSdkToken, G as hasOwnEntityAssociationOfType, X as useExperimentsContext, m as useSettingsContext, bf as EEA_Countries, g as getLegalEntityCountry, ad as Trans, bg as isAccountIdentifierObscured, bh as hasEmptyFields, bi as extractFieldName, bj as concatenateFieldNames, aG as keysOf, ap as getCapabilityProblems, M as TaskTypes, aB as cloneObject, q as skipToken } from "./StoreProvider-BYjTSjnX.js";
-import { u as useTransferInstrument, m as mapTransferInstrumentToPayoutAccount } from "./mapTransferInstrumentToPayoutAccount-MugvfqfK.js";
-import { a as useForm, F as Field, c as Select, L as LoaderWrapper } from "./useForm-CNi1k1NR.js";
-import { E as ExperimentNames } from "./types-DHmyPbAn.js";
-import { I as InputText, S as SettingNames } from "./InputText-EX5kyD9L.js";
-import { u as useGlobalDataSlice, a as useGlobalData, b as useResetGlobalData, c as useStateContext, F as FormWrapper } from "./useGlobalData-rR_jnTzW.js";
-import { a as useInvalidateRootLegalEntity, u as useToastContext } from "./useToastContext-DHgUoF6x.js";
-import { a as augmentWithCountryConfigs, g as getPropsFromConfigurations } from "./process-field-configurations-CiECrUSj.js";
-import { g as getRequiredForms, a as addValidityToForms, u as useFormComposer } from "./dropinUtils-CCEDaAJW.js";
-import { D as DocumentGuidance, A as AdyenKycSdkError, u as uppercase, p as payoutAccountFormat, m as mapExistingFile, g as getPageName, b as useScenarioConfiguration, c as useUnifyLoadingStatus } from "./mapExistingFile-D_HVWRXe.js";
-import { u as useDataset, d as datasetIdentifier, C as Confirm, a as datasetUtilities } from "./useDataset-C0A9qR_N.js";
-import { c as currencyByCountry } from "./types-SBNit_kK.js";
-import { i as isValidationError, p as processValidationErrors, b as isIdDocumentUploadError, c as isBankStatementUploadError, a as isMaintenanceModeError, m as mapCreateOrUpdateTransferInstrumentErrorMessageToTranslatable } from "./validationError-Ci4nlmhZ.js";
-import { D as DropzoneFile, e as bytesToSize, f as defaultFileValidationOptions, h as fileValidationRules, S as StateContextSetter, a as getDocument, c as createDocumentRequest, d as documentApiUtils, b as getFileExtention } from "./validate-DzaSMOa2.js";
-import { g as getLegalEntityNameBasedOnType, b as getPayoutAccountHolderName } from "./getName-Dc03c4n_.js";
-import { I as IFrameWidget, o as omitObscuredFieldsIfUnchanged } from "./iframeWidget-BWwxgbNs.js";
+import { b as useApiContext, j as useQuery, k as httpPost, o as httpGet, a2 as useMutation, a3 as useQueryClient, P as createLogger, V as CountryCodes, u as useTranslation, c as useLegalEntity, R as ROOT_LE, z as LegalEntityTypes, a as addResourceBundles, L as Loader, M as EntityTypes, _ as __variableDynamicImportRuntimeHelper, a1 as useAnalyticsContext, a4 as Icon, y as Typography, B as Button, ao as objectsDeepEqual, a_ as doArraysMatch, X as isEmpty, $ as useExperimentsContext, bj as getSdkToken, H as hasOwnEntityAssociationOfType, K as useAccountHolder, m as useSettingsContext, bk as EEA_Countries, g as getLegalEntityCountry, ak as Trans, bl as isAccountIdentifierObscured, bm as hasEmptyFields, bn as extractFieldName, bo as concatenateFieldNames, av as keysOf, aF as getCapabilityProblems, O as TaskTypes, aG as cloneObject, r as skipToken } from "./StoreProvider-CWnZNw9D.js";
+import { u as useTransferInstrument, m as mapTransferInstrumentToPayoutAccount } from "./mapTransferInstrumentToPayoutAccount-D9lyD7nx.js";
+import { a as useForm, F as Field, S as Select, L as LoaderWrapper } from "./trackNavigation-gyYoCNvj.js";
+import { E as ExperimentNames } from "./types-DQVZ5BSQ.js";
+import { I as InputText, S as SettingNames } from "./InputText-BG-TiSNN.js";
+import { c as useUnincorporatedPartnershipMembers, u as useGlobalDataSlice, a as useGlobalData, e as useResetGlobalData, b as useStateContext } from "./useUnincorporatedPartnershipMembers-D_N_aPNq.js";
+import { a as useInvalidateRootLegalEntity, u as useToastContext } from "./useToastContext-CCxuinr_.js";
+import { a as augmentWithCountryConfigs, g as getPropsFromConfigurations } from "./process-field-configurations-D2EUZow3.js";
+import { g as getRequiredForms, a as addValidityToForms, u as useFormComposer } from "./dropinUtils-L9qJuAw0.js";
+import { A as AdyenKycSdkError, p as payoutAccountFormat, m as mapExistingFile, g as getPageName, u as useScenarioConfiguration, b as useUnifyLoadingStatus } from "./mapExistingFile-txzqej6F.js";
+import { u as useDataset, d as datasetIdentifier, C as Confirm, a as datasetUtilities } from "./useDataset-C4vcroxo.js";
+import { c as currencyByCountry, C as Currencies } from "./types-D0aacEF5.js";
+import { F as FormWrapper } from "./FormWrapper-DjWyqVD2.js";
+import { i as isValidationError, p as processValidationErrors, b as isIdDocumentUploadError, c as isBankStatementUploadError, a as isMaintenanceModeError, m as mapCreateOrUpdateTransferInstrumentErrorMessageToTranslatable } from "./validationError-DhRqgFgA.js";
+import { a as getDocument, c as createDocumentRequest, d as documentApiUtils, b as getFileExtention } from "./documentUtils-C2iCagu9.js";
+import { g as getLegalEntityNameBasedOnType, b as getPayoutAccountHolderName } from "./getName-k5oRc0oZ.js";
+import { I as IFrameWidget, o as omitObscuredFieldsIfUnchanged } from "./iframeWidget-D2CKFlJk.js";
 import { Show } from "@preact/signals/utils";
-import { c as createFormUtils, H as Header, E as ErrorPanel, m as mergeFieldMetadataIntoProps, g as getFieldProps, C as CountryField, h as getFormProps, d as summaryStep, s as summaryItem } from "./CountryField-CFppUh42.js";
-import { signal } from "@preact/signals";
-import { u as useAssociatedLegalEntity } from "./useAssociatedLegalEntity-CmhNWabq.js";
-import { b as useCapabilityProblems, g as getProblemsForEntity, T as TextArea, f as validatePatternOnBlur, r as resolveFieldMetadata, a as useAccountHolder, R as RadioGroupCard, C as ContextGuidance } from "./fieldConfigurations-BsOQ678Q.js";
-import { c as createFormRules } from "./form-rules-DhbF2mY4.js";
+import { M as Modal } from "./Modal-C9aImxis.js";
+import { c as createFormUtils, H as Header, E as ErrorPanel, k as isNotEmptyValidator, m as mergeFieldMetadataIntoProps, d as getFieldProps, C as CountryField, a as Link, g as getFormProps, f as summaryStep, s as summaryItem } from "./CountryField-Bv9P8dRJ.js";
+import { u as useAssociatedLegalEntity } from "./useAssociatedLegalEntity-CuTN8T5x.js";
+import { i as useCapabilityProblems, k as getProblemsForEntity, D as DropzoneFile, q as bytesToSize, o as defaultFileValidationOptions, p as fileValidationRules, S as StateContextSetter, t as DocumentGuidance, T as TextArea, m as makeMask, n as numericInputs, c as nonInputs, s as spacer, l as customInputs, v as validatePatternOnBlur, r as resolveFieldMetadata, M as MaskedInput, b as alphanumericInputs, u as uppercase, d as alphaInputs, I as Image, R as RadioGroupCard, C as ContextGuidance, x as createFormRules } from "./fieldConfigurations-DVV23oeM.js";
 import cx from "classnames";
 import { memo, lazy } from "preact/compat";
-import { u as useUnincorporatedPartnershipMembers } from "./useUnincorporatedPartnershipMembers-57G1Bu4k.js";
 import { b as bankStatementDescriptionPattern } from "./basePatterns-BwdnMQxI.js";
 import { createContext } from "preact";
-import { a as Alert } from "./Alert-B2qwr9au.js";
-import { A as ActionBar } from "./FormNavigation-DrejHtXO.js";
+import { a as Alert } from "./Alert-CeZqoFeT.js";
+import { A as ActionBar } from "./FormNavigation-DEdNWaAc.js";
 import OpenBankingSDK from "@adyen/openbankingsdk";
-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-DB6EYmfa.js";
-import { a as isNotEmptyValidator } from "./commonValidators-BLvtzPWZ.js";
-import { C as Currencies } from "./currency-BGwQyxBo.js";
-import { I as Image } from "./Image-BhBefhke.js";
-import { L as Link } from "./Link-BS6Zpegg.js";
+import { T as Tag } from "./Tag-DdkVScyr.js";
+import { C as Card } from "./Card-Bz2B4J0v.js";
 const getCheck = async (legalEntityId, baseUrl, data) => {
   return httpPost(
     {
@@ -334,7 +331,7 @@ function PayoutDetailsPage({
   );
   const capabilityProblems = useCapabilityProblems();
   addResourceBundles(i18n, i18n.language, [
-    { ns: "banking", importFn: () => __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "../language/bg-BG.json": () => import("./bg-BG-z3gZQvGq.js"), "../language/cs-CZ.json": () => import("./cs-CZ-C5lyVYlZ.js"), "../language/da-DK.json": () => import("./da-DK-CYl2jko-.js"), "../language/de-DE.json": () => import("./de-DE-DlUEkik0.js"), "../language/el-GR.json": () => import("./el-GR-DZ8GheJK.js"), "../language/en-US.json": () => import("./en-US-DjF6iC7G.js"), "../language/es-ES.json": () => import("./es-ES-D0c0MoqK.js"), "../language/et-EE.json": () => import("./et-EE-C4Fwyr7-.js"), "../language/fi-FI.json": () => import("./fi-FI-bRXb-Q_i.js"), "../language/fr-FR.json": () => import("./fr-FR-JLPKgufm.js"), "../language/hr-HR.json": () => import("./hr-HR-D26Gz-HL.js"), "../language/hu-HU.json": () => import("./hu-HU-BZCFneWx.js"), "../language/it-IT.json": () => import("./it-IT-mScKLwBR.js"), "../language/ja-JP.json": () => import("./ja-JP-DyELKS9Q.js"), "../language/lt-LT.json": () => import("./lt-LT-CLPQVRpJ.js"), "../language/lv-LV.json": () => import("./lv-LV-Cu-MJMVO.js"), "../language/nl-NL.json": () => import("./nl-NL-pVdpCCOx.js"), "../language/no-NO.json": () => import("./no-NO-CRULNwNn.js"), "../language/pl-PL.json": () => import("./pl-PL-CxCiWdAF.js"), "../language/pt-BR.json": () => import("./pt-BR-apPtB2cK.js"), "../language/pt-PT.json": () => import("./pt-PT-Coa6J7SM.js"), "../language/ro-RO.json": () => import("./ro-RO-BTqq5BPM.js"), "../language/sk-SK.json": () => import("./sk-SK-welR06By.js"), "../language/sl-SI.json": () => import("./sl-SI-B9N6vA08.js"), "../language/sv-SE.json": () => import("./sv-SE-D6al0j6W.js") }), `../language/${i18n.language}.json`, 3) }
+    { ns: "banking", importFn: () => __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "../language/bg-BG.json": () => import("./bg-BG-D8qq7TQJ.js"), "../language/cs-CZ.json": () => import("./cs-CZ-ChGeQ9s0.js"), "../language/da-DK.json": () => import("./da-DK-CyHH8kX3.js"), "../language/de-DE.json": () => import("./de-DE-DL6SrIBE.js"), "../language/el-GR.json": () => import("./el-GR-l0JeDNPy.js"), "../language/en-US.json": () => import("./en-US-BxEW5N6f.js"), "../language/es-ES.json": () => import("./es-ES-C1ClJ2XE.js"), "../language/et-EE.json": () => import("./et-EE-BG_Y29oV.js"), "../language/fi-FI.json": () => import("./fi-FI-bIhXiQPL.js"), "../language/fr-FR.json": () => import("./fr-FR-Bj275MRb.js"), "../language/hr-HR.json": () => import("./hr-HR-CL0q_D2U.js"), "../language/hu-HU.json": () => import("./hu-HU-cLqGFTTR.js"), "../language/it-IT.json": () => import("./it-IT-C0Qk47kh.js"), "../language/ja-JP.json": () => import("./ja-JP-DSdZj-it.js"), "../language/lt-LT.json": () => import("./lt-LT-C-dKiExL.js"), "../language/lv-LV.json": () => import("./lv-LV-UkEOuqFz.js"), "../language/nl-NL.json": () => import("./nl-NL-Cfr5hMtI.js"), "../language/no-NO.json": () => import("./no-NO-ASO8Je2l.js"), "../language/pl-PL.json": () => import("./pl-PL-CG4rvgUo.js"), "../language/pt-BR.json": () => import("./pt-BR-IWTcYKu9.js"), "../language/pt-PT.json": () => import("./pt-PT-LZZYQKaC.js"), "../language/ro-RO.json": () => import("./ro-RO-nVSeNtIQ.js"), "../language/sk-SK.json": () => import("./sk-SK-BX0wsQH4.js"), "../language/sl-SI.json": () => import("./sl-SI-Dt7rovIT.js"), "../language/sv-SE.json": () => import("./sv-SE-DqzH809e.js") }), `../language/${i18n.language}.json`, 3) }
   ]);
   if (!rootLe || associatedLeIsLoading) {
     return /* @__PURE__ */ jsx(Loader, {});
@@ -490,14 +487,14 @@ function FilePicker({
 const bankDocument = "adyen-kyc-bank-document";
 const bankDocumentDocumentUpload = "adyen-kyc-bank-document-document-upload";
 const bankDocumentDocumentDescription = "adyen-kyc-bank-document-document-description";
-const styles$2 = {
+const styles$3 = {
   bankDocument,
   bankDocumentDocumentUpload,
   bankDocumentDocumentDescription
 };
 const documentRequirements = "adyen-kyc-document-requirements";
 const documentRequirementsSubtitle = "adyen-kyc-document-requirements-subtitle";
-const styles$1 = {
+const styles$2 = {
   documentRequirements,
   documentRequirementsSubtitle
 };
@@ -582,7 +579,7 @@ const applyNamedModifiers = (country, documentModifiers) => {
       switch (documentModifiers.associatedEntityType) {
         case LegalEntityTypes.TRUST:
           return {
-            key: accountNameRequirementWithLegalArrangement[LegalEntityTypes.INDIVIDUAL][LegalEntityTypes.TRUST]?.[country] ?? accountNameRequirementWithLegalArrangement[LegalEntityTypes.INDIVIDUAL][LegalEntityTypes.TRUST]?.default,
+            key: accountNameRequirementWithLegalArrangement[LegalEntityTypes.INDIVIDUAL][LegalEntityTypes.TRUST]?.[country] ?? accountNameRequirementWithLegalArrangement[LegalEntityTypes.INDIVIDUAL][LegalEntityTypes.TRUST].default,
             options: {
               values: {
                 trusteeName: documentModifiers.rootEntityLegalName,
@@ -593,7 +590,7 @@ const applyNamedModifiers = (country, documentModifiers) => {
           };
         case LegalEntityTypes.UNINCORPORATED_PARTNERSHIP:
           return {
-            key: accountNameRequirementWithLegalArrangement[LegalEntityTypes.INDIVIDUAL][LegalEntityTypes.UNINCORPORATED_PARTNERSHIP]?.[country] ?? accountNameRequirementWithLegalArrangement[LegalEntityTypes.INDIVIDUAL][LegalEntityTypes.UNINCORPORATED_PARTNERSHIP]?.default,
+            key: accountNameRequirementWithLegalArrangement[LegalEntityTypes.INDIVIDUAL][LegalEntityTypes.UNINCORPORATED_PARTNERSHIP]?.[country] ?? accountNameRequirementWithLegalArrangement[LegalEntityTypes.INDIVIDUAL][LegalEntityTypes.UNINCORPORATED_PARTNERSHIP].default,
             options: {
               values: {
                 partnerNames: documentModifiers.unincorporatedPartnershipMembers || "",
@@ -604,7 +601,7 @@ const applyNamedModifiers = (country, documentModifiers) => {
         case LegalEntityTypes.SOLE_PROPRIETORSHIP:
         default:
           return {
-            key: accountNameRequirementWithLegalArrangement[LegalEntityTypes.INDIVIDUAL][LegalEntityTypes.SOLE_PROPRIETORSHIP]?.default,
+            key: accountNameRequirementWithLegalArrangement[LegalEntityTypes.INDIVIDUAL][LegalEntityTypes.SOLE_PROPRIETORSHIP].default,
             options: {
               values: {
                 individualLegalName: documentModifiers.rootEntityLegalName,
@@ -618,7 +615,7 @@ const applyNamedModifiers = (country, documentModifiers) => {
       switch (documentModifiers.associatedEntityType) {
         case LegalEntityTypes.TRUST:
           return {
-            key: accountNameRequirementWithLegalArrangement[LegalEntityTypes.ORGANIZATION][LegalEntityTypes.TRUST]?.[country] ?? accountNameRequirementWithLegalArrangement[LegalEntityTypes.ORGANIZATION][LegalEntityTypes.TRUST]?.default,
+            key: accountNameRequirementWithLegalArrangement[LegalEntityTypes.ORGANIZATION][LegalEntityTypes.TRUST]?.[country] ?? accountNameRequirementWithLegalArrangement[LegalEntityTypes.ORGANIZATION][LegalEntityTypes.TRUST].default,
             options: {
               values: {
                 trusteeName: documentModifiers.rootEntityLegalName,
@@ -629,7 +626,7 @@ const applyNamedModifiers = (country, documentModifiers) => {
           };
         case LegalEntityTypes.UNINCORPORATED_PARTNERSHIP:
           return {
-            key: accountNameRequirementWithLegalArrangement[LegalEntityTypes.ORGANIZATION][LegalEntityTypes.UNINCORPORATED_PARTNERSHIP]?.[country] ?? accountNameRequirementWithLegalArrangement[LegalEntityTypes.ORGANIZATION][LegalEntityTypes.UNINCORPORATED_PARTNERSHIP]?.default,
+            key: accountNameRequirementWithLegalArrangement[LegalEntityTypes.ORGANIZATION][LegalEntityTypes.UNINCORPORATED_PARTNERSHIP]?.[country] ?? accountNameRequirementWithLegalArrangement[LegalEntityTypes.ORGANIZATION][LegalEntityTypes.UNINCORPORATED_PARTNERSHIP].default,
             options: {
               values: {
                 partnerNames: documentModifiers.unincorporatedPartnershipMembers || "",
@@ -675,15 +672,16 @@ const BankDocumentRequirements = ({
   documentType,
   documentModifiers
 }) => {
-  const { i18n } = useI18nContext();
+  const { t } = useTranslation("banking");
+  const { t: commonT } = useTranslation("common");
   const documentRequirements2 = getBankDocumentRequirements(
     country,
     documentType,
     documentModifiers
   );
-  return /* @__PURE__ */ jsxs("div", { className: styles$1.documentRequirements, children: [
-    /* @__PURE__ */ jsx("strong", { className: styles$1.documentRequirementsSubtitle, children: i18n.get("documentRequirements") }),
-    /* @__PURE__ */ jsx("ul", { children: documentRequirements2.map(({ key, options }, i) => /* @__PURE__ */ jsx("li", { "data-testid": key, children: i18n.get(key, options) }, i)) })
+  return /* @__PURE__ */ jsxs("div", { className: styles$2.documentRequirements, children: [
+    /* @__PURE__ */ jsx("strong", { className: styles$2.documentRequirementsSubtitle, children: commonT(($) => $["documentRequirements"]) }),
+    /* @__PURE__ */ jsx("ul", { children: documentRequirements2.map(({ key, options }, i) => /* @__PURE__ */ jsx("li", { "data-testid": key, children: t(($) => $[key], options?.values) }, i)) })
   ] });
 };
 const bankDocumentValidationRules = {
@@ -714,10 +712,11 @@ function BankDocument(props) {
     fieldValidationErrors,
     shouldValidate
   } = props;
-  const { t } = useTranslation("common");
+  const { t } = useTranslation("banking");
+  const { t: commonT } = useTranslation("common");
   const stateRef = useRef({ setState: null });
   const isBankStatementOptional = optionalFields?.includes("bankStatementDocument") ?? false;
-  const formUtils = createFormUtils(props, t);
+  const formUtils = createFormUtils(props, commonT);
   const bankStatementValidationOptions = useMemo(
     () => ({
       ...defaultFileValidationOptions,
@@ -790,7 +789,7 @@ function BankDocument(props) {
     }),
     [legalEntity, associatedLegalArrangement, unincorporatedPartnershipMembers]
   );
-  return /* @__PURE__ */ jsxs("form", { className: styles$2.bankDocument, children: [
+  return /* @__PURE__ */ jsxs("form", { className: styles$3.bankDocument, children: [
     /* @__PURE__ */ jsx(StateContextSetter, { owner: id, stateRef }),
     heading && /* @__PURE__ */ jsx(Header, { title: heading, description }),
     /* @__PURE__ */ jsx(
@@ -815,7 +814,7 @@ function BankDocument(props) {
               ...childProps,
               onChange: handleChangeFor("documentType"),
               name: "documentType",
-              placeholder: t(($) => $["selectDocument"]),
+              placeholder: commonT(($) => $["selectDocument"]),
               isInvalid: false,
               items: getBankDocumentOptions(),
               selected: data.documentType
@@ -837,7 +836,7 @@ function BankDocument(props) {
       data.documentType || usingExistingUploadedDocuments ? /* @__PURE__ */ jsx(
         Field,
         {
-          className: cx(styles$2.bankDocumentDocumentUpload, "adyen-kyc-upload-field"),
+          className: cx(styles$3.bankDocumentDocumentUpload, "adyen-kyc-upload-field"),
           name: "bankStatementDocument",
           isValid: valid.bankStatementDocument,
           children: (childProps) => /* @__PURE__ */ jsx(
@@ -858,7 +857,7 @@ function BankDocument(props) {
     data.documentType || usingExistingUploadedDocuments ? /* @__PURE__ */ jsx(
       Field,
       {
-        className: cx(styles$2.bankDocumentDocumentDescription),
+        className: cx(styles$3.bankDocumentDocumentDescription),
         name: "description",
         label: formUtils.getLabel("bankDocumentFileDescription"),
         errorMessage: formUtils.getErrorMessage("description", errors, fieldProblems),
@@ -943,8 +942,9 @@ function BankVerificationWidget({
   createTrustedTransferInstrument: createTrustedTransferInstrument2,
   fullscreen
 }) {
-  const { i18n } = useI18nContext();
+  const { t } = useTranslation("banking");
   const userEvents = useAnalyticsContext();
+  const { isExperimentEnabled } = useExperimentsContext();
   const widgetContainerRef = useRef(null);
   const sdkToken = getSdkToken();
   const { mutateAsync: handleBankVerificationError2 } = useHandleBankVerificationError();
@@ -957,12 +957,12 @@ function BankVerificationWidget({
   };
   const DEFAULT_ERROR = {
     error: "UNKNOWN_ERROR",
-    message: i18n.get("weCouldntCompleteTheAccountCheck")
+    message: t(($) => $["weCouldntCompleteTheAccountCheck"])
   };
   setBankVerificationError(null);
   const widgetCallback = useCallback(
     (payload) => {
-      const errorContent = i18n.get("tryAgainOrManualAccountDetails");
+      const errorContent = t(($) => $["tryAgainOrManualAccountDetails"]);
       switch (payload.action) {
         case VerificationWidgetCallbackActions.HANDLE_EXCEPTION: {
           let errorTitle;
@@ -972,14 +972,14 @@ function BankVerificationWidget({
               errorTitle = "";
               break;
             case "CONNECTION_ERROR":
-              errorTitle = i18n.get("couldNotEstablishBankConnection");
+              errorTitle = t(($) => $["couldNotEstablishBankConnection"]);
               break;
             case "GENERIC_ERROR":
-              errorTitle = i18n.get("ranIntoTechnicalError");
+              errorTitle = t(($) => $["ranIntoTechnicalError"]);
               break;
             case "UNKNOWN_ERROR":
             default: {
-              errorTitle = i18n.get("couldNotCompleteAccountCheck");
+              errorTitle = t(($) => $["couldNotCompleteAccountCheck"]);
               break;
             }
           }
@@ -987,12 +987,15 @@ function BankVerificationWidget({
             setBankVerificationError({ title: errorTitle, content: errorContent });
           }
           setHideVerificationWidget(true);
+          if (isExperimentEnabled(ExperimentNames.EnablePayoutVerificationMethodPageRedesign)) {
+            showInstantVerificationPayoutModal.value = false;
+          }
           onBack?.();
           break;
         }
         case VerificationWidgetCallbackActions.RETRY_VERIFICATION:
           setBankVerificationError({
-            title: i18n.get("failedInitializeInstantVerification"),
+            title: t(($) => $["failedInitializeInstantVerification"]),
             content: errorContent
           });
           setHideVerificationWidget(true);
@@ -1012,7 +1015,7 @@ function BankVerificationWidget({
         }
       }
     },
-    [i18n, retrieveBankAccountInfo, onBack, setBankVerificationError, setHideVerificationWidget]
+    [t, retrieveBankAccountInfo, onBack, setBankVerificationError, setHideVerificationWidget]
   );
   useEffect(
     () => {
@@ -1178,7 +1181,9 @@ function BankVerification(props) {
     id,
     fieldValidationErrors
   } = props;
-  const { i18n } = useI18nContext();
+  const { t } = useTranslation("banking");
+  const { t: commonT } = useTranslation("common");
+  const { isExperimentEnabled } = useExperimentsContext();
   const invalidateRootLegalEntity = useInvalidateRootLegalEntity();
   const schema = accountVerificationFields;
   const stateRef = useRef({ setState: null });
@@ -1206,6 +1211,9 @@ function BankVerification(props) {
     hideSidebar?.(false);
     triggerValidation();
     await invalidateRootLegalEntity();
+    if (isExperimentEnabled(ExperimentNames.EnablePayoutVerificationMethodPageRedesign)) {
+      showInstantVerificationPayoutModal.value = false;
+    }
   };
   const handleOnBack = () => {
     setHideVerificationWidget(false);
@@ -1232,7 +1240,7 @@ function BankVerification(props) {
     /* @__PURE__ */ jsx(StateContextSetter, { owner: id, stateRef }),
     bankInfoValidated && /* @__PURE__ */ jsxs(Fragment, { children: [
       heading && /* @__PURE__ */ jsx(Header, { title: heading }),
-      /* @__PURE__ */ jsx(Alert, { title: i18n.get("youSuccessfullyVerifiedAccount"), variant: "success" })
+      /* @__PURE__ */ jsx(Alert, { title: t(($) => $["youSuccessfullyVerifiedAccount"]), variant: "success" })
     ] }),
     provider && formIsActive && !bankInfoValidated && /* @__PURE__ */ jsx("div", { className: "adyen-kyc-bank-verification-container", children: /* @__PURE__ */ jsx("form", { className: "adyen-kyc-bank-verification", children: !hideVerificationWidget ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
@@ -1247,7 +1255,7 @@ function BankVerification(props) {
           createTrustedTransferInstrument: createTrustedTransferInstrument2
         }
       ),
-      /* @__PURE__ */ jsx(ActionBar, { onBack: handleOnBack, backButtonLabel: i18n.get("goBack") })
+      /* @__PURE__ */ jsx(ActionBar, { onBack: handleOnBack, backButtonLabel: commonT(($) => $["goBack"]) })
     ] }) : void 0 }) })
   ] });
 }
@@ -2158,7 +2166,7 @@ const payoutCurrencySupport = {
 const shouldShowCheckGuidance = (country) => country === "US";
 const shouldShowPayoutAccountFormatSelector = (country) => countriesWithLocalFormat.has(country);
 const shouldShowPayoutAlert = (country) => shouldShowPayoutAccountFormatSelector(country) || countriesWithMultipleCurrencies.has(country);
-const getSupportedCurrencyGuidance = (i18n, country, requiredFields) => {
+const getSupportedCurrencyGuidance = (t, country, requiredFields) => {
   const format = requiredFields.includes("iban") ? "iban" : "local";
   if (!shouldShowPayoutAlert(country)) {
     return;
@@ -2167,11 +2175,10 @@ const getSupportedCurrencyGuidance = (i18n, country, requiredFields) => {
   if (!supportedCurrencies) {
     return;
   }
-  return supportedCurrencies.length > 1 ? i18n.get("payoutIn_Or_", {
-    values: { currencyOne: supportedCurrencies[0], currencyTwo: supportedCurrencies[1] }
-  }) : i18n.get("payoutInOnly_", {
-    values: { currency: supportedCurrencies[0] }
-  });
+  return supportedCurrencies.length > 1 ? t(($) => $["payoutIn_Or_"], {
+    currencyOne: supportedCurrencies[0],
+    currencyTwo: supportedCurrencies[1]
+  }) : t(($) => $["payoutInOnly_"], { currency: supportedCurrencies[0] });
 };
 const getSupportedCurrenciesPerFormat = (country, format) => {
   const supportedCurrencies = payoutCurrencySupport[country];
@@ -2194,7 +2201,7 @@ const isLocalCurrency = (country, currency) => {
 const AccountHolderDescriptionFragment = ({
   legalEntityResponse
 }) => {
-  const { i18n } = useI18nContext();
+  const { t } = useTranslation("banking");
   const hasSolePropEntityAssociations = hasOwnEntityAssociationOfType(
     LegalEntityTypes.SOLE_PROPRIETORSHIP,
     legalEntityResponse.entityAssociations,
@@ -2208,7 +2215,7 @@ const AccountHolderDescriptionFragment = ({
     );
     const { individual: individual2 } = legalEntityResponse;
     return /* @__PURE__ */ jsxs(Typography, { children: [
-      `${i18n.get("bankAccountHasToBeInYourName")} `,
+      `${t(($) => $["bankAccountHasToBeInYourName"])} `,
       /* @__PURE__ */ jsx(
         Typography,
         {
@@ -2217,7 +2224,7 @@ const AccountHolderDescriptionFragment = ({
           children: `${individual2?.name.firstName} ${individual2?.name.lastName}`
         }
       ),
-      ` ${i18n.get("orSoleProprietorshipName")} `,
+      ` ${t(($) => $["orSoleProprietorshipName"])} `,
       " ",
       /* @__PURE__ */ jsx(Typography, { el: "span", variant: "body-stronger", children: `${soleProp?.name ?? ""}` })
     ] });
@@ -2231,29 +2238,23 @@ const AccountHolderDescriptionFragment = ({
     const trust = legalEntityResponse.entityAssociations?.find((ea) => ea.entityType === "trust");
     if (legalEntityResponse.type === LegalEntityTypes.INDIVIDUAL) {
       return /* @__PURE__ */ jsxs(Typography, { children: [
-        `${i18n.get("bankAccountToHaveSameNameAsTrust")} `,
-        /* @__PURE__ */ jsx(Typography, { el: "span", variant: "body-stronger", children: i18n.get("trusteeAsTrusteeForTrust", {
-          values: {
-            trusteeName: `${legalEntityResponse?.individual?.name.firstName} ${legalEntityResponse?.individual?.name.lastName}`,
-            trustName: trust?.name ?? ""
-          }
+        `${t(($) => $["bankAccountToHaveSameNameAsTrust"])} `,
+        /* @__PURE__ */ jsx(Typography, { el: "span", variant: "body-stronger", children: t(($) => $["trusteeAsTrusteeForTrust"], {
+          trusteeName: `${legalEntityResponse?.individual?.name.firstName} ${legalEntityResponse?.individual?.name.lastName}`,
+          trustName: trust?.name ?? ""
         }) })
       ] });
     }
-    const companyTrusteeBankAccountName = legalEntityResponse?.organization?.legalName !== legalEntityResponse?.organization?.doingBusinessAs ? i18n.get("trusteeAsTrusteeForTrustDoingBusinessAs", {
-      values: {
-        trusteeName: legalEntityResponse?.organization?.legalName ?? "",
-        trustName: trust?.name ?? "",
-        tradingName: legalEntityResponse?.organization?.doingBusinessAs
-      }
-    }) : i18n.get("trusteeAsTrusteeForTrust", {
-      values: {
-        trusteeName: legalEntityResponse?.organization?.legalName ?? "",
-        trustName: trust?.name ?? ""
-      }
+    const companyTrusteeBankAccountName = legalEntityResponse?.organization?.legalName !== legalEntityResponse?.organization?.doingBusinessAs ? t(($) => $["trusteeAsTrusteeForTrustDoingBusinessAs"], {
+      trusteeName: legalEntityResponse?.organization?.legalName ?? "",
+      trustName: trust?.name ?? "",
+      tradingName: legalEntityResponse?.organization?.doingBusinessAs
+    }) : t(($) => $["trusteeAsTrusteeForTrust"], {
+      trusteeName: legalEntityResponse?.organization?.legalName ?? "",
+      trustName: trust?.name ?? ""
     });
     return /* @__PURE__ */ jsxs(Typography, { children: [
-      `${i18n.get("bankAccountToHaveSameNameAsTrust")} `,
+      `${t(($) => $["bankAccountToHaveSameNameAsTrust"])} `,
       /* @__PURE__ */ jsx(Typography, { el: "span", variant: "body-stronger", children: companyTrusteeBankAccountName })
     ] });
   }
@@ -2267,22 +2268,20 @@ const AccountHolderDescriptionFragment = ({
       (ea) => ea.entityType === "unincorporatedPartnership"
     );
     const partnerNames = unincorporatedPartnershipMembers?.map((member) => member?.name)?.sort();
-    return /* @__PURE__ */ jsx(Typography, { children: `${i18n.get("bankAccountToHaveSameNameAsUnincorporatedPartnership", {
-      values: {
-        partnerNames: `${partnerNames?.join(", ")}`,
-        partnershipName: unincorporatedPartnership?.name ?? ""
-      }
+    return /* @__PURE__ */ jsx(Typography, { children: `${t(($) => $["bankAccountToHaveSameNameAsUnincorporatedPartnership"], {
+      partnerNames: `${partnerNames?.join(", ")}`,
+      partnershipName: unincorporatedPartnership?.name ?? ""
     })} ` });
   }
   if (legalEntityResponse.type === LegalEntityTypes.ORGANIZATION) {
     return /* @__PURE__ */ jsxs(Typography, { children: [
-      `${i18n.get("bankAccountHasToBeInYourCompanyName")} `,
+      `${t(($) => $["bankAccountHasToBeInYourCompanyName"])} `,
       /* @__PURE__ */ jsx(Typography, { el: "span", variant: "body-stronger", children: legalEntityResponse?.organization?.legalName })
     ] });
   }
   const { individual } = legalEntityResponse;
   return /* @__PURE__ */ jsxs(Typography, { children: [
-    `${i18n.get("bankAccountHasToBeInYourName")} `,
+    `${t(($) => $["bankAccountHasToBeInYourName"])} `,
     /* @__PURE__ */ jsx(
       Typography,
       {
@@ -2297,7 +2296,7 @@ const checkGuidance = "adyen-kyc-check-guidance";
 const checkGuidanceImage = "adyen-kyc-check-guidance-image";
 const checkGuidanceAnnotated = "adyen-kyc-check-guidance-annotated";
 const checkGuidanceInactive = "adyen-kyc-check-guidance-inactive";
-const styles = {
+const styles$1 = {
   checkGuidance,
   checkGuidanceImage,
   checkGuidanceAnnotated,
@@ -2307,13 +2306,13 @@ const usCheckAccount = lazy(() => import("./us-check-account-number-C7KE5YzX.js"
 const usCheckRouting = lazy(() => import("./us-check-routing-number-DUbhsYAR.js"));
 const usCheck = lazy(() => import("./us-check-CYY6Crhr.js"));
 const CheckGuidance = ({ annotated }) => {
-  return /* @__PURE__ */ jsxs("div", { className: styles.checkGuidance, children: [
+  return /* @__PURE__ */ jsxs("div", { className: styles$1.checkGuidance, children: [
     /* @__PURE__ */ jsx(
       Image,
       {
         lazyLoadedImage: usCheckAccount,
-        className: cx(styles.checkGuidanceImage, styles.checkGuidanceAnnotated, {
-          [styles.checkGuidanceInactive]: annotated !== "account"
+        className: cx(styles$1.checkGuidanceImage, styles$1.checkGuidanceAnnotated, {
+          [styles$1.checkGuidanceInactive]: annotated !== "account"
         })
       }
     ),
@@ -2321,12 +2320,12 @@ const CheckGuidance = ({ annotated }) => {
       Image,
       {
         lazyLoadedImage: usCheckRouting,
-        className: cx(styles.checkGuidanceImage, styles.checkGuidanceAnnotated, {
-          [styles.checkGuidanceInactive]: annotated !== "routing"
+        className: cx(styles$1.checkGuidanceImage, styles$1.checkGuidanceAnnotated, {
+          [styles$1.checkGuidanceInactive]: annotated !== "routing"
         })
       }
     ),
-    /* @__PURE__ */ jsx(Image, { lazyLoadedImage: usCheck, className: styles.checkGuidanceImage })
+    /* @__PURE__ */ jsx(Image, { lazyLoadedImage: usCheck, className: styles$1.checkGuidanceImage })
   ] });
 };
 const payoutAccountFields = [
@@ -2342,7 +2341,6 @@ function PayoutAccount(props) {
   const accountFormat = payoutAccountFormat.value;
   const { t } = useTranslation("banking");
   const { t: commonT } = useTranslation("common");
-  const { i18n } = useI18nContext();
   const [checkAnnotation, setCheckAnnotation] = useState();
   const { isExperimentEnabled } = useExperimentsContext();
   const isCrossBorderPayoutsEnabled = isExperimentEnabled("EnableCrossBorderPayouts");
@@ -2447,7 +2445,7 @@ function PayoutAccount(props) {
     shouldShowPayoutAlert(country) && !isCrossBorderPayoutsEnabled && /* @__PURE__ */ jsx(
       Alert,
       {
-        title: getSupportedCurrencyGuidance(i18n, country, requiredFields),
+        title: getSupportedCurrencyGuidance(t, country, requiredFields),
         className: "adyen-kyc-u-margin-bottom-8"
       }
     ),
@@ -2623,6 +2621,12 @@ const instantVerificationImage = lazy(
 const manualVerificationImage = lazy(
   () => import("./manual-verification-BvZWqA00.js")
 );
+const instantVerificationImageNew = lazy(
+  () => import("./payout-verification-instant-5u-wvFKv.js")
+);
+const manualVerificationImageNew = lazy(
+  () => import("./payout-verification-manual-BJsf7QPE.js")
+);
 const getProviderIconName = (providerName) => {
   switch (providerName?.toLowerCase()) {
     case "tink":
@@ -2635,12 +2639,12 @@ const getProviderIconName = (providerName) => {
       return void 0;
   }
 };
-const makePayoutVerificationMethodsMetadata = (instantVerificationProviderName) => ({
+const makePayoutVerificationMethodsMetadata = (instantVerificationProviderName, makePayoutVerificationMethodsMetadata2) => ({
   instantVerification: {
     name: "verifyViaMobileBankingAppOrWebsite",
     subtitle: "instant",
+    svgImport: makePayoutVerificationMethodsMetadata2 ? instantVerificationImageNew : instantVerificationImage,
     description: "instantVerificationDescription",
-    svgImport: instantVerificationImage,
     provider: instantVerificationProviderName ? {
       name: instantVerificationProviderName,
       svgImport: getProviderIconName(instantVerificationProviderName)
@@ -2650,7 +2654,7 @@ const makePayoutVerificationMethodsMetadata = (instantVerificationProviderName)
     name: "uploadABankStatement",
     subtitle: "mayTakeAFewDays",
     description: "manualVerificationDescription",
-    svgImport: manualVerificationImage
+    svgImport: makePayoutVerificationMethodsMetadata2 ? manualVerificationImageNew : manualVerificationImage
   }
 });
 const payoutVerificationMethods = ["instantVerification", "manualVerification"];
@@ -2667,22 +2671,32 @@ const getMustHaveSameAccountHolderNameTransKey = (legalEntityType) => {
       return "theBankAccountHolderMustHaveTheSameNameAsYourCompany";
   }
 };
-const PayoutVerificationMethodOptionFooter = ({
+const fieldVerificationMethods = "adyen-kyc-field-verification-methods";
+const fieldVerificationMethodsCard = "adyen-kyc-field-verification-methods-card";
+const fieldVerificationMethodsFooter = "adyen-kyc-field-verification-methods-footer";
+const fieldVerificationMethodsLogo = "adyen-kyc-field-verification-methods-logo";
+const instantVerificationError = "adyen-kyc-instant-verification-error";
+const payoutVerificationMethodCard = "adyen-kyc-payout-verification-method-card";
+const payoutVerificationMethodCardImage = "adyen-kyc-payout-verification-method-card-image";
+const payoutVerificationMethodCardBody = "adyen-kyc-payout-verification-method-card-body";
+const payoutVerificationMethodCardImageContainer = "adyen-kyc-payout-verification-method-card-image-container";
+const styles = {
+  fieldVerificationMethods,
+  fieldVerificationMethodsCard,
+  fieldVerificationMethodsFooter,
+  fieldVerificationMethodsLogo,
+  instantVerificationError,
+  payoutVerificationMethodCard,
+  payoutVerificationMethodCardImage,
+  payoutVerificationMethodCardBody,
+  payoutVerificationMethodCardImageContainer
+};
+const PayoutVerificationMethodOptionIcon = ({
   method,
   methodsMetadata
 }) => {
-  const { i18n } = useI18nContext();
-  const { provider } = methodsMetadata[method];
-  return provider ? /* @__PURE__ */ jsxs(Typography, { el: "div", variant: "caption", className: "adyen-kyc-field-verification-methods__footer", children: [
-    i18n.get("poweredBy"),
-    provider.svgImport ? /* @__PURE__ */ jsx(
-      Image,
-      {
-        className: "adyen-kyc-field-verification-methods__logo",
-        lazyLoadedImage: provider.svgImport
-      }
-    ) : ` ${provider.name}`
-  ] }) : null;
+  const { svgImport } = methodsMetadata[method];
+  return /* @__PURE__ */ jsx(Image, { className: styles.payoutVerificationMethodCardImage, lazyLoadedImage: svgImport });
 };
 const payoutVerificationMethodFields = ["payoutVerificationMethod", "bankCountry", ...accountVerificationFields];
 function PayoutVerificationMethod(props) {
@@ -2703,10 +2717,13 @@ function PayoutVerificationMethod(props) {
   const { type: legalEntityType } = legalEntityResponse;
   const { t } = useTranslation("banking");
   const { t: commonT } = useTranslation("common");
-  const instantVerificationError = useContext(InstantVerificationErrorContext);
+  const instantVerificationError2 = useContext(InstantVerificationErrorContext);
   const { isSettingEnabled } = useSettingsContext();
   const { isExperimentEnabled } = useExperimentsContext();
   const canChangeEntityType = isSettingEnabled(SettingNames.AllowLegalEntityTypeChange);
+  const isPayoutVerificationMethodPageRedesignEnabled = isExperimentEnabled(
+    ExperimentNames.EnablePayoutVerificationMethodPageRedesign
+  );
   const intraRegionCrossBorderPayoutsAllowed = isSettingEnabled(
     SettingNames.AllowIntraRegionCrossBorderPayout
   );
@@ -2738,18 +2755,40 @@ function PayoutVerificationMethod(props) {
     () => updateStateSlice({ data: { ...sliceData, ...data }, errors, valid, fieldProblems }),
     [data, errors, fieldProblems, valid]
   );
-  const methodsMetadata = makePayoutVerificationMethodsMetadata(provider?.name);
+  const methodsMetadata = makePayoutVerificationMethodsMetadata(
+    provider?.name,
+    isPayoutVerificationMethodPageRedesignEnabled
+  );
+  const PayoutVerificationMethodOptionFooter = ({
+    method,
+    methodsMetadata: methodsMetadata2
+  }) => {
+    const { t: t2 } = useTranslation("common");
+    const { provider: provider2 } = methodsMetadata2[method];
+    return provider2 ? /* @__PURE__ */ jsxs(Typography, { el: "div", variant: "caption", className: styles.fieldVerificationMethodsFooter, children: [
+      t2(($) => $["poweredBy"]),
+      provider2.svgImport ? /* @__PURE__ */ jsx(
+        Image,
+        {
+          className: styles.fieldVerificationMethodsLogo,
+          lazyLoadedImage: provider2.svgImport
+        }
+      ) : ` ${provider2.name}`
+    ] }) : null;
+  };
   const selectVerificationMethod = (method) => {
     setHasSelectedMethod(true);
     handleChangeFor("payoutVerificationMethod")(method);
   };
   useEffect(() => {
     if (bankInfoValidated || enabledUnbiasedVerificationMethod) return;
-    if (!hasSelectedMethod && instantVerificationAvailable && data.payoutVerificationMethod !== "instantVerification") {
-      handleChangeFor("payoutVerificationMethod")("instantVerification");
-    }
-    if (!instantVerificationAvailable && data.payoutVerificationMethod !== "manualVerification") {
-      handleChangeFor("payoutVerificationMethod")("manualVerification");
+    if (!isExperimentEnabled(ExperimentNames.EnablePayoutVerificationMethodPageRedesign)) {
+      if (!hasSelectedMethod && instantVerificationAvailable && data.payoutVerificationMethod !== "instantVerification") {
+        handleChangeFor("payoutVerificationMethod")("instantVerification");
+      }
+      if (!instantVerificationAvailable && data.payoutVerificationMethod !== "manualVerification") {
+        handleChangeFor("payoutVerificationMethod")("manualVerification");
+      }
     }
   }, [
     data.payoutVerificationMethod,
@@ -2794,15 +2833,47 @@ function PayoutVerificationMethod(props) {
       }
     )
   ] });
-  return /* @__PURE__ */ jsxs("form", { className: "adyen-kyc-payout-verification-method", children: [
+  const PayoutVerificationMethodOptionCard = ({
+    payoutMethod,
+    title,
+    subtitle,
+    tag
+  }) => /* @__PURE__ */ jsxs(
+    Card,
+    {
+      className: cx(styles.payoutVerificationMethodCard, {
+        "adyen-kyc-u-margin-bottom-8": payoutMethod === "instantVerification"
+      }),
+      bodyClassName: styles.payoutVerificationMethodCardBody,
+      onClick: () => selectVerificationMethod(payoutMethod),
+      stateful: true,
+      active: payoutMethod === data.payoutVerificationMethod,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: styles.payoutVerificationMethodCardImageContainer, children: /* @__PURE__ */ jsx(
+          PayoutVerificationMethodOptionIcon,
+          {
+            method: payoutMethod,
+            methodsMetadata
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "adyen-kyc-u-margin-16", children: [
+          tag,
+          /* @__PURE__ */ jsx(Typography, { el: "h4", variant: "body-strongest", className: "adyen-kyc-u-margin-bottom-8", children: title }),
+          /* @__PURE__ */ jsx(Typography, { el: "p", variant: "body", children: subtitle })
+        ] })
+      ]
+    },
+    payoutMethod
+  );
+  return /* @__PURE__ */ jsxs("form", { className: styles.payoutVerificationMethod, children: [
     heading && /* @__PURE__ */ jsx(Header, { title: heading, children: /* @__PURE__ */ jsx("template", { slot: "description", children: description }) }),
-    instantVerificationError && /* @__PURE__ */ jsx(
+    instantVerificationError2 && /* @__PURE__ */ jsx(
       Alert,
       {
         variant: "error",
-        className: "adyen-kyc-instant-verification-error",
-        title: instantVerificationError.title,
-        children: instantVerificationError.content && /* @__PURE__ */ jsx("p", { className: "adyen-kyc-u-margin-0", children: instantVerificationError.content })
+        className: styles.instantVerificationError,
+        title: instantVerificationError2.title,
+        children: instantVerificationError2.content && /* @__PURE__ */ jsx("p", { className: "adyen-kyc-u-margin-0", children: instantVerificationError2.content })
       }
     ),
     !isExperimentEnabled(ExperimentNames.EnableCrossBorderPayouts) && countryField,
@@ -2816,7 +2887,25 @@ function PayoutVerificationMethod(props) {
         helper: instantVerificationAvailable ? void 0 : t(($) => $["weDoNotYetSupportInstantVerificationForBankAccountsIn"], {
           countryName: bankCountryName
         }),
-        children: (childProps) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+        children: (childProps) => isPayoutVerificationMethodPageRedesignEnabled ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            PayoutVerificationMethodOptionCard,
+            {
+              payoutMethod: "instantVerification",
+              title: t(($) => $["verifyViaMobileBankingAppOrWebsite"]),
+              subtitle: t(($) => $["instantVerificationDescription"]),
+              tag: /* @__PURE__ */ jsx(Tag, { variant: "blue", className: "adyen-kyc-u-margin-bottom-8", children: t(($) => $["recommended"]) })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            PayoutVerificationMethodOptionCard,
+            {
+              payoutMethod: "manualVerification",
+              title: t(($) => $["uploadABankStatement"]),
+              subtitle: t(($) => $["mayTakeAFewDays"])
+            }
+          )
+        ] }) : /* @__PURE__ */ jsx(
           RadioGroupCard,
           {
             ...childProps,
@@ -2828,12 +2917,18 @@ function PayoutVerificationMethod(props) {
             optionName: (method) => t(($) => $[methodsMetadata[method].name]),
             optionDescription: (method) => t(($) => $[methodsMetadata[method].description]),
             optionSubtitle: (method) => t(($) => $[methodsMetadata[method].subtitle]),
-            className: "adyen-kyc-field-verification-methods",
+            className: styles.fieldVerificationMethods,
             optionClassNames: () => ({
-              label: "adyen-kyc-field-verification-methods__card"
+              label: styles.fieldVerificationMethodsCard
             }),
             isOptionDisabled: (option) => bankInfoValidated || option === "instantVerification" && !instantVerificationAvailable,
-            renderOptionIcon: (method) => /* @__PURE__ */ jsx("div", { className: "adyen-kyc-radio-group-card__illustration", children: methodsMetadata[method]?.svgImport && /* @__PURE__ */ jsx(Image, { lazyLoadedImage: methodsMetadata[method].svgImport }) }),
+            renderOptionIcon: (method) => /* @__PURE__ */ jsx(
+              PayoutVerificationMethodOptionIcon,
+              {
+                method,
+                methodsMetadata
+              }
+            ),
             renderOptionFooter: (method) => /* @__PURE__ */ jsx(
               PayoutVerificationMethodOptionFooter,
               {
@@ -2843,7 +2938,7 @@ function PayoutVerificationMethod(props) {
             ),
             floatingRadio: true
           }
-        ) })
+        )
       }
     ),
     /* @__PURE__ */ jsx(
@@ -2899,7 +2994,6 @@ const payoutSteps = {
     formId: "payoutAccountDocuments",
     formName: "bankDocument",
     formHeader: "bankDocumentHeader",
-    formDescription: "bankDocumentDescription",
     fields: bankDocumentFields
   },
   payoutAccountVerification: {
@@ -2932,7 +3026,7 @@ function PayoutDetails(props) {
     onBack,
     trustedTransferInstrumentId
   } = props;
-  const [instantVerificationError, setInstantVerificationError] = useInstantVerificationErrorNotification(1e4);
+  const [instantVerificationError2, setInstantVerificationError] = useInstantVerificationErrorNotification(1e4);
   const payoutCountryDetailsFormProps = getFormProps(props, PayoutCountryDetailsFormID);
   const verificationMethodFormProps = getFormProps(props, PayoutVerificationMethodFormID);
   const accountVerificationFormProps = getFormProps(props, PayoutAccountVerificationFormID);
@@ -3003,7 +3097,7 @@ function PayoutDetails(props) {
       "div",
       {
         className: activeForm?.formId !== PayoutVerificationMethodFormID ? "adyen-kyc-form-wrapper adyen-kyc-form-wrapper--hidden" : "adyen-kyc-form-wrapper",
-        children: /* @__PURE__ */ jsx(InstantVerificationErrorContext.Provider, { value: instantVerificationError, children: /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsx(InstantVerificationErrorContext.Provider, { value: instantVerificationError2, children: /* @__PURE__ */ jsx(
           PayoutVerificationMethod,
           {
             ...verificationMethodFormProps,
@@ -3096,7 +3190,24 @@ function PayoutDetails(props) {
           showPayoutVerificationMethodError.value = false;
         }
       }
-    ) })
+    ) }),
+    /* @__PURE__ */ jsx(Show, { when: showInstantVerificationPayoutModal, children: /* @__PURE__ */ jsx(Modal, { ariaLabel: "Bank Verification Modal", children: /* @__PURE__ */ jsx(
+      BankVerification,
+      {
+        ...accountVerificationFormProps,
+        heading: t(($) => $["bankAccountVerification"]),
+        id: PayoutAccountVerificationFormID,
+        provider,
+        country: bankCountry,
+        onBack,
+        hideSidebar: setHideSidebar,
+        setBankVerificationError: setInstantVerificationError,
+        bankInfoValidated,
+        setBankInfoValidated,
+        formIsActive: activeForm?.formId === PayoutVerificationMethodFormID,
+        createTrustedTransferInstrument: createTrustedTransferInstrument2
+      }
+    ) }) })
   ] });
 }
 const rules = ({
@@ -3341,6 +3452,7 @@ const getPayoutVerificationMethod = (transferInstrument, instantVerificationEnab
     return enabledUnbiasedVerificationMethod || !instantVerificationEnabled ? void 0 : "instantVerification";
   }
 };
+const showInstantVerificationPayoutModal = signal(false);
 function PayoutDetailsDropin({
   legalEntityResponse,
   associatedLegalArrangement,
@@ -3372,8 +3484,8 @@ function PayoutDetailsDropin({
   const [previousTrustedInstrumentStatus, setPreviousTrustedInstrumentStatus] = useState(
     createTrustedTransferInstrumentStatus
   );
-  const { t, i18n: i18next } = useTranslation("common");
-  const { i18n } = useI18nContext();
+  const { t, i18n: i18next } = useTranslation("banking");
+  const { t: commonT } = useTranslation("common");
   const userEvents = useAnalyticsContext();
   const { showToast, clearToasts } = useToastContext();
   const { isExperimentEnabled } = useExperimentsContext();
@@ -3390,6 +3502,9 @@ function PayoutDetailsDropin({
   const enabledUnbiasedVerificationMethod = isExperimentEnabled(
     "BankVerificationMethodAutonomy_UnbiasedSelection"
   );
+  const isPayoutVerificationMethodPageRedesignEnabled = isExperimentEnabled(
+    ExperimentNames.EnablePayoutVerificationMethodPageRedesign
+  );
   const accountHolder = getPayoutAccountHolderName(legalEntityResponse, t);
   const fallbackCurrency = currencyByCountry[defaultPayoutCountry]?.[0];
   const accountHolderName = accountHolder || getLegalEntityNameBasedOnType(legalEntityResponse);
@@ -3520,6 +3635,8 @@ function PayoutDetailsDropin({
   });
   const checkAsAServiceResultStatus = checkAsAServiceData?.status;
   const checkAsAServiceResultErrors = checkAsAServiceData?.errors;
+  const provider = providers?.[0];
+  const isInstantVerificationFlow = data.payoutVerificationMethod?.payoutVerificationMethod === "instantVerification";
   const [isModalOpen, setIsModalOpen] = useState(false);
   const payoutDetailsSteps = useMemo(() => {
     const appropriatePayoutDetailsSteps = getAppropriatePayoutDetailsSteps(
@@ -3578,7 +3695,10 @@ function PayoutDetailsDropin({
       documentUtils.fetchDocuments(transferInstrument.documentDetails, transferInstrument.id).then(() => {
         setDocuments(mapApiDocumentToPayoutDocuments(transferInstrument.id));
       }).catch(() => {
-        showToast({ label: i18n.get("failedToFetchRelevantDocuments"), variant: "error" });
+        showToast({
+          label: commonT(($) => $["failedToFetchRelevantDocuments"]),
+          variant: "error"
+        });
       });
     }
   }, [transferInstrument?.documentDetails]);
@@ -3614,7 +3734,7 @@ function PayoutDetailsDropin({
               payoutAccountDocuments: { bankStatementDocument: true }
             }
           });
-          throw new Error(i18n.get("remediationMessage_1_704"));
+          throw new Error(commonT(($) => $["remediationMessage_1_704"]));
         } finally {
           await refetchTransferInstrument?.();
         }
@@ -3674,18 +3794,18 @@ function PayoutDetailsDropin({
         const validationErrors = processValidationErrors(e, taskType);
         setProblems({ ...problems, validationErrors });
       } else if (isIdDocumentUploadError(e)) {
-        showToast({ label: i18n.get("idDocumentAlreadyUploaded"), variant: "error" });
+        showToast({ label: t(($) => $["idDocumentAlreadyUploaded"]), variant: "error" });
       } else if (isBankStatementUploadError(e)) {
-        showToast({ label: i18n.get("bankStatementAlreadyUploaded"), variant: "error" });
+        showToast({ label: t(($) => $["bankStatementAlreadyUploaded"]), variant: "error" });
       } else if (isMaintenanceModeError(e)) {
         showToast({
-          label: i18n.get("maintenanceModeMessage"),
+          label: commonT(($) => $["maintenanceModeMessage"]),
           variant: "error",
           duration: "indefinite"
         });
       } else {
         const errorTranslatable = mapCreateOrUpdateTransferInstrumentErrorMessageToTranslatable(e);
-        showToast({ label: i18n.get(errorTranslatable), variant: "error" });
+        showToast({ label: commonT(($) => $[errorTranslatable]), variant: "error" });
       }
       setIsSubmitting(false);
       userEvents.addTaskEvent("Encountered error", {
@@ -3700,13 +3820,13 @@ function PayoutDetailsDropin({
   const formatFileSummaryData = (bankDocuments) => {
     const bankStatementDocument = bankDocuments?.bankStatementDocument?.[0];
     return {
-      documentType: bankDocuments?.documentType && i18n.get(bankDocuments?.documentType),
+      documentType: bankDocuments?.documentType && commonT(($) => $[bankDocuments?.documentType]),
       fileName: bankStatementDocument?.name,
       description: bankDocuments?.description
     };
   };
   const canSubmit = () => {
-    if (data.payoutVerificationMethod?.payoutVerificationMethod === "instantVerification") {
+    if (isInstantVerificationFlow) {
       return false;
     }
     const bankDetails = data.payoutAccountDetails;
@@ -3743,7 +3863,7 @@ function PayoutDetailsDropin({
       refetchBankVerificationProviders();
       const errorTranslatable = mapCreateOrUpdateTransferInstrumentErrorMessageToTranslatable(e);
       if (errorTranslatable === "transferInstrumentLimitHasAlreadyBeenMet") {
-        showToast({ label: i18n.get(errorTranslatable), variant: "error" });
+        showToast({ label: commonT(($) => $[errorTranslatable]), variant: "error" });
       }
       throw e;
     }
@@ -3787,6 +3907,14 @@ function PayoutDetailsDropin({
     setIsCaasCalled(false);
   }, [forms, checkAsAServiceResultStatus, isCaasCalled]);
   const handleFormNextClick = async () => {
+    if (isPayoutVerificationMethodPageRedesignEnabled && activeForm.formId === "payoutVerificationMethod") {
+      if (isInstantVerificationFlow) {
+        showInstantVerificationPayoutModal.value = true;
+        return;
+      } else {
+        handleNextClick();
+      }
+    }
     if (!data?.payoutVerificationMethod?.payoutVerificationMethod) {
       showPayoutVerificationMethodError.value = true;
       return;
@@ -3797,8 +3925,6 @@ function PayoutDetailsDropin({
         setIsCaasCalled(true);
         if (response?.status === "INCOMPLETE_INPUT") {
           setIsModalOpen(true);
-        } else {
-          handleNextClick();
         }
       } catch {
         handleNextClick();
@@ -3812,6 +3938,10 @@ function PayoutDetailsDropin({
       handleNextClick();
       setPreviousTrustedInstrumentStatus(createTrustedTransferInstrumentStatus);
     }
+    if (isExperimentEnabled(ExperimentNames.EnablePayoutVerificationMethodPageRedesign) && activeForm.formId === "payoutVerificationMethod" && createTrustedTransferInstrumentStatus === "success") {
+      gotoFormByFormIndex(forms.length - 1);
+      setPreviousTrustedInstrumentStatus(createTrustedTransferInstrumentStatus);
+    }
   }
   const omittedForms = data?.payoutVerificationMethod?.payoutVerificationMethod === "instantVerification" ? [] : [payoutSteps.payoutVerificationMethod.formId];
   const { header: invalidFieldHeader, content: invalidFieldContent } = getInvalidFieldsErrorMessage(
@@ -3827,10 +3957,10 @@ function PayoutDetailsDropin({
         isModalOpen && /* @__PURE__ */ jsx(
           Confirm,
           {
-            title: i18n.get(invalidFieldHeader),
-            description: i18n.get(invalidFieldContent),
-            cancelText: i18n.get("editDetails"),
-            confirmText: i18n.get("continueAnyway"),
+            title: t(($) => $[invalidFieldHeader]),
+            description: t(($) => $[invalidFieldContent]),
+            cancelText: commonT(($) => $["editDetails"]),
+            confirmText: t(($) => $["continueAnyway"]),
             onConfirm: () => {
               handleNextClick();
               setIsModalOpen(false);
@@ -3854,7 +3984,7 @@ function PayoutDetailsDropin({
                 summaryEditButton: ["payoutVerificationMethod"]
               }
             },
-            handleBackClick,
+            handleBackClick: !isPayoutVerificationMethodPageRedesignEnabled || activeForm.formId !== "summary" ? handleBackClick : void 0,
             handleNextClick: handleFormNextClick,
             handleHomeClick,
             handleCloseClick,
@@ -3882,7 +4012,7 @@ function PayoutDetailsDropin({
                 setSkipSubmit,
                 legalEntityResponse,
                 associatedLegalArrangement,
-                provider: providers?.[0],
+                provider,
                 bankVendorsLoadingStatus,
                 instantVerificationAvailable,
                 createTrustedTransferInstrument: createTrustedTransferInstrumentHandler,