@adyen/kyc-components 3.28.1 → 3.29.0

package/dist/es/adyen-kyc-components.es.js

@@ -95,7 +95,6 @@ const defaultTrans = {
   accountNumberOrIbanVisible: "Includes your account number or IBAN",
   accountNumberVisible: "Includes your account number",
   accountVerification: "Account Verification",
-  achRoutingNumber: "ACH routing number",
   acknowledgePciRequirements: "We hereby acknowledge that we must remain compliant with the aforementioned PCI DSS requirements at all times as long as we want to receive payments. Consequently, we must continuously reassess our environment and implement any additional PCI DSS requirements if our environment changes.",
   actionNeeded: "Action needed",
   add: "Add",
@@ -137,6 +136,7 @@ const defaultTrans = {
   areYouACompany: "Are you a company?",
   areYouAnIndividual: "Are you an individual?",
   areYouSureToLeave: "Are you sure you want to leave?",
+  areYouSureYouWantToDeleteThisBankAccount: "Are you sure you want to delete this bank account?",
   arithmosEngraphes: "Αριθμός Εγγραφής Φ.Π.Α.",
   articlesOfIncorporation: "Articles of incorporation",
   arvonlisaveronumeroMervardesskattenummer: "Arvonlisäveronumero Mervärdesskattenummer",
@@ -238,6 +238,7 @@ const defaultTrans = {
   chamberOfCommerceExtract: "Chamber of Commerce extract",
   chamberOfCommerceRegistrationNumber: "Chamber of Commerce registration number",
   changeYourBusinessSetup: "Change your business setup?",
+  chargeCardUserAgreement: "Charge Card User Agreement",
   charitableTrust: "Charitable trust",
   charityNumber: "Charity number",
   charter: "Charter",
@@ -335,6 +336,7 @@ const defaultTrans = {
   decisionMakers: "Decision-makers",
   definedBeneficiary: "Defined beneficiary",
   definedBeneficiaryDescription: "A natural person, corporate entity, or member of a class in whose interest the trust is principally constituted or operates.",
+  "delete": "Delete",
   depositSlip: "Deposit slip",
   describeWhoIsABeneficiaryInYourTrust: "Describe in open format who is set to be a beneficiary in your trust deed",
   description: "Description",
@@ -406,6 +408,7 @@ const defaultTrans = {
   enterAMaximumOfNCharactersWithAMixForExample: "Enter a maximum of %{maxChars} characters, with a mix of letters and numbers. For example, %{example}",
   enterAMaximumOfNDigitsForExample: "Enter a maximum of %{maxDigits} digits. For example, %{example}",
   enterAMaximumOfNMoreDigitsForExample: "Enter a maximum of %{maxDigits} more digits. For example, %{example}",
+  enterEnglishLetterFollowedByXtoYDigitsForExample: "Enter an English-equivalent letter (C for HE, O for AE, P for Σ) followed by %{minDigits} - %{maxDigits} digits. For example, %{example}",
   enterLastNDigitsForExample: "Enter the last %{numDigits} digits. For example, %{example}",
   enterLastNameExactlyAsAppearInID: "Enter your last name(s) exactly as it appears on your identity document",
   enterNCharactersForExample: "Enter %{numChars} characters. For example, %{example}",
@@ -1023,6 +1026,7 @@ const defaultTrans = {
   parentCompany: "Parent company",
   parentCompanyInformation: "Parent company information",
   partitaIVA: "Partita IVA",
+  codiceFiscalePartitaIVA: "Codice Fiscale / Partita IVA",
   partnerShipAgreement: "Partnership agreement",
   partnership: "Partnership",
   partnershipIncorporated: "Incorporated partnership",
@@ -1053,6 +1057,7 @@ const defaultTrans = {
   pciDssQuestionnaire: "PCI DSS questionnaire",
   pciSignFailed: "PCI signing failed",
   pciSignedSuccessfully: "PCI signed successfully",
+  pciDssSelfAssesmentSignedSuccessfully: "PCI-DSS Self assesment questionnaire signed and dated",
   personAppointmentUnderTrustInstrument: "The person appointed under the trust instrument to direct or restrain the trustees in relation to their administration of the trust.",
   personalDetails: "Personal details",
   personnummer: "Personnummer",
@@ -1108,7 +1113,7 @@ const defaultTrans = {
   reasonForFillingIndividualAddressDetails: "We have to make sure that everyone who uses our services is who they say they are. To do that, we'll check all of this information against official records. This is a part of the financial regulations that we have to follow as a payments provider.",
   reasonForFillingIndividualPersonalDetails: "We have to make sure that everyone who uses our services is who they say they are. To do that, we'll check all of this information against official records. This is a part of the financial regulations that we have to follow as a payments provider.",
   reasonForFillingPayoutAccountDetails: "We have to make sure the businesses using our services will not be misusing the funds or causing harm. To do that, we'll check all of this information against official records. This is a part of the financial regulations that we have to follow as a payments provider.",
-  reasonForFillingPayoutDetails: "We have to make sure the businesses using our services will not be misusing the funds or causing harm. To do that, we'll check all of this information against official records. This is a part of the financial regulations that we have to follow as a payments provider.",
+  reasonForFillingPayoutDetails: "This bank account will be verified to prevent fraud or other misuse of funds in compliance with global regulations.",
   region: "Region",
   registeredAddress: "Registered address",
   registeredAddressHeaderDescription: "The address as it appears on your company's official registration documents.",
@@ -1225,8 +1230,10 @@ const defaultTrans = {
   selectTheApplicableRoles: "Select the applicable role(s)",
   selectTheBankToReceivePayouts: "After this page, you can select the bank where you would like to receive the payouts.",
   selectedSomeRolesBasedOnMyinfo: "We selected some roles based on Myinfo business data about your company's appointment holders and shareholders.",
+  serviceAgreements: "Service agreements",
   serviceAgreementSignFailed: "Service agreement signing failed",
   serviceAgreementSignedSuccessfully: "Service agreement signed successfully",
+  serviceAgreementSignedAndDated: "Service agreement signed and dated",
   sessionTimeout: "Session timeout",
   setUpYourAccount: "Set up your account",
   settlerDetailsIncl: "Settlor details including their full legal name and home address",
@@ -2052,6 +2059,21 @@ function useBusinessData({
   const [cachedBusiness, setCachedBusiness] = useState();
   const [verifiedBusiness, setVerifiedBusiness] = useState();
   const [invalidTin, setInvalidTin] = useState(false);
+  const primarySourceSearch = async (data, indexSearch, deepSearch) => {
+    let response;
+    try {
+      response = await deepSearch({
+        ...data,
+        limit: data.limit ?? 15
+      });
+    } catch (e) {
+      response = await indexSearch({
+        ...data,
+        limit: data.limit ?? 15
+      });
+    }
+    return response;
+  };
   const searchForBusiness = useCallback(async (data) => {
     if (!handleCompanyDeepSearch || !handleCompanyIndexSearch) {
       logger$I.log("Missing handlers for searchForBusiness");
@@ -2060,17 +2082,15 @@ function useBusinessData({
     if (searchResults && objectsDeepEqual(cachedSearch, data)) return;
     try {
       setSearching("loading");
-      const {
-        results
-      } = KNOWN_BROKEN_PRIMARY_SOURCE_CONNECTIONS.includes(data.state) ? await handleCompanyIndexSearch({
+      const response = KNOWN_BROKEN_PRIMARY_SOURCE_CONNECTIONS.includes(data.state) ? await handleCompanyIndexSearch({
         ...data,
         limit: data.limit ?? 15
-      }) : await handleCompanyDeepSearch({
+      }) : await primarySourceSearch({
         ...data,
         limit: data.limit ?? 15
-      });
-      setSearchResults(results);
-      return results;
+      }, handleCompanyIndexSearch, handleCompanyDeepSearch);
+      setSearchResults(response == null ? void 0 : response.results);
+      return response == null ? void 0 : response.results;
     } catch (e) {
       setSearching("error");
       logger$I.error(e);
@@ -2381,8 +2401,9 @@ const mergeFieldMetadataIntoProps = (fieldName, metadata, otherProps) => {
 const MAX_LENGTH = 30;
 const getMaxLengthByFieldAndCountry = (formattingRules, field, country, ignoreIfFormatterExists) => {
   var _a, _b, _c, _d;
+  if (!country) return void 0;
   if ((_b = (_a = formattingRules[country]) == null ? void 0 : _a[field]) == null ? void 0 : _b.formatter) {
-    return null;
+    return void 0;
   }
   const maxLength = (_d = (_c = formattingRules[country]) == null ? void 0 : _c[field]) == null ? void 0 : _d.maxlength;
   return maxLength || MAX_LENGTH;
@@ -2466,6 +2487,9 @@ const svgs = {
   "document-cutoff": lazy(() => import("./document-cut-off-D2vCeeIS.js")),
   "document-expired": lazy(() => import("./document-expired-_4Syh1xW.js")),
   "document-front": lazy(() => import("./document-front-9Glzn7ZR.js")),
+  "us-check": lazy(() => import("./us-check-o5Ax_0LS.js")),
+  "us-check-routing-number": lazy(() => import("./us-check-routing-number-BtVf7GH3.js")),
+  "us-check-account-number": lazy(() => import("./us-check-account-number-CHnzmLNd.js")),
   "id-blurred": lazy(() => import("./id-blurred-A45CVnPk.js")),
   "id-cutoff": lazy(() => import("./id-cut-off-DMoJYcGr.js")),
   "id-front": lazy(() => import("./id-front-CTIDY7Nu.js")),
@@ -2552,6 +2576,7 @@ const Button = ({
   role,
   small,
   block,
+  critical,
   shaded,
   label = "",
   icon,
@@ -2598,6 +2623,7 @@ const Button = ({
     "adyen-kyc-button--secondary": secondary,
     "adyen-kyc-button--tertiary": tertiary && !secondary,
     "adyen-kyc-button--block": block,
+    "adyen-kyc-button--critical": critical,
     "adyen-kyc-button--small": small && label,
     "adyen-kyc-button--shaded": shaded && icon && tertiary,
     // disallow shaded effect if not just tertiary icon
@@ -3783,6 +3809,7 @@ const datasetIdentifier = {
 function datasetUtilities(locale) {
   return {
     getCountryName: (countryCode) => {
+      if (!countryCode) return null;
       const datasetKey = createDatasetKey(datasetIdentifier.country, locale);
       return getDataName(datasetKey, countryCode);
     },
@@ -3974,15 +4001,31 @@ const Tag = ({
     children
   });
 };
-const styles$4 = {
+const adyenKycDropdown = "adyen-kyc-dropdown";
+const adyenKycDropdownButton = "adyen-kyc-dropdown-button";
+const adyenKycDropdownButtonActive = "adyen-kyc-dropdown-button--active";
+const adyenKycFilterInput = "adyen-kyc-filter-input";
+const adyenKycDropdownList = "adyen-kyc-dropdown-list";
+const adyenKycDropdownListTransformer = "adyen-kyc-dropdown-list__transformer";
+const adyenKycDropdownListActive = "adyen-kyc-dropdown-list--active";
+const adyenKycDropdownElement = "adyen-kyc-dropdown-element";
+const styles$7 = {
   "adyen-kyc-dropdown": "adyen-kyc-dropdown",
+  adyenKycDropdown,
   "adyen-kyc-dropdown-button": "adyen-kyc-dropdown-button",
+  adyenKycDropdownButton,
   "adyen-kyc-dropdown-button--active": "adyen-kyc-dropdown-button--active",
+  adyenKycDropdownButtonActive,
   "adyen-kyc-filter-input": "adyen-kyc-filter-input",
+  adyenKycFilterInput,
   "adyen-kyc-dropdown-list": "adyen-kyc-dropdown-list",
+  adyenKycDropdownList,
   "adyen-kyc-dropdown-list__transformer": "adyen-kyc-dropdown-list__transformer",
+  adyenKycDropdownListTransformer,
   "adyen-kyc-dropdown-list--active": "adyen-kyc-dropdown-list--active",
-  "adyen-kyc-dropdown-element": "adyen-kyc-dropdown-element"
+  adyenKycDropdownListActive,
+  "adyen-kyc-dropdown-element": "adyen-kyc-dropdown-element",
+  adyenKycDropdownElement
 };
 function SelectButtonElement({
   filterable,
@@ -4031,10 +4074,10 @@ function SelectButton({
     "aria-haspopup": "listbox",
     className: cx({
       "adyen-kyc-dropdown-button": true,
-      [styles$4["adyen-kyc-dropdown-button"]]: true,
+      [styles$7["adyen-kyc-dropdown-button"]]: true,
       "adyen-kyc-dropdown-button--readonly": readonly,
       "adyen-kyc-dropdown-button--active": showList,
-      [styles$4["adyen-kyc-dropdown-button--active"]]: showList,
+      [styles$7["adyen-kyc-dropdown-button--active"]]: showList,
       "adyen-kyc-dropdown-button--invalid": isInvalid,
       "adyen-kyc-dropdown-field--valid": isValid,
       "adyen-kyc-dropdown-button-search": isSearch
@@ -4104,7 +4147,7 @@ const SelectButtonContentSingle = ({
       "aria-expanded": showList,
       "aria-owns": selectListId,
       autoComplete: "off",
-      className: cx("adyen-kyc-filter-input", [styles$4["adyen-kyc-filter-input"]]),
+      className: cx("adyen-kyc-filter-input", [styles$7["adyen-kyc-filter-input"]]),
       onInput,
       placeholder,
       ref: filterInputRef,
@@ -4192,7 +4235,7 @@ const SelectListItem = ({
 }) => jsx("li", {
   "aria-disabled": !!item.disabled,
   "aria-selected": selected,
-  className: cx(["adyen-kyc-dropdown-element", styles$4["adyen-kyc-dropdown-element"], {
+  className: cx(["adyen-kyc-dropdown-element", styles$7["adyen-kyc-dropdown-element"], {
     "adyen-kyc-dropdown-element--active": selected,
     "adyen-kyc-dropdown-element--disabled": !!item.disabled,
     "adyen-kyc-dropdown-multi-element": isMulti,
@@ -4323,9 +4366,9 @@ function SelectList({
       test: true,
       "adyen-kyc-dropdown-list--above": showAbove,
       "adyen-kyc-dropdown-list": true,
-      [styles$4["adyen-kyc-dropdown-list"]]: true,
+      [styles$7["adyen-kyc-dropdown-list"]]: true,
       "adyen-kyc-dropdown-list--active": showList,
-      [styles$4["adyen-kyc-dropdown-list--active"]]: showList
+      [styles$7["adyen-kyc-dropdown-list--active"]]: showList
     }),
     id: props.selectListId,
     role: "listbox",
@@ -4528,7 +4571,7 @@ const Select = ({
     };
   }, []);
   return jsxs("div", {
-    className: cx(["adyen-kyc-dropdown", styles$4["adyen-kyc-dropdown"], className, ...classNameModifiers.map((m) => `adyen-kyc-dropdown--${m}`)]),
+    className: cx(["adyen-kyc-dropdown", styles$7["adyen-kyc-dropdown"], className, ...classNameModifiers.map((m) => `adyen-kyc-dropdown--${m}`)]),
     ref: selectContainerRef,
     onClick: (e) => {
       e.stopPropagation();
@@ -5562,7 +5605,7 @@ const businessRegistrationNumberMasks = {
   },
   [CountryCodes.Cyprus]: {
     default: {
-      mask: makeMask(...alphaInputs(1), ...alphaInputs(1, true), ...numericInputs(1), ...numericInputs(7, true)),
+      mask: makeMask(...customInputs(1, /^[COP]$/), ...numericInputs(1), ...numericInputs(7, true)),
       transformOnType: uppercase
     }
   },
@@ -6403,7 +6446,7 @@ const businessRegistrationNumberPatterns = {
     soleProprietorship: /^\d{8}$/
   },
   [CountryCodes.Cyprus]: {
-    default: /^[A-Z]{1,2}\d{1,8}$/
+    default: /^[COP]{1}\d{1,8}$/
   },
   [CountryCodes.CzechRepublic]: {
     default: /^\d{8,10}$/
@@ -6750,13 +6793,11 @@ const defaultFieldConfig$9 = {
     mask: businessRegistrationNumberMasks[CountryCodes.Cyprus].default,
     validators: validatePatternOnBlur(businessRegistrationNumberPatterns[CountryCodes.Cyprus].default),
     guidanceText: {
-      key: "enterXToYLettersAndThenWToZDigitsForExample",
+      key: "enterEnglishLetterFollowedByXtoYDigitsForExample",
       values: {
-        minLetters: "1",
-        maxLetters: "2",
         minDigits: "1",
         maxDigits: "8",
-        example: "HE337518"
+        example: "C12345678"
       }
     }
   },
@@ -6952,18 +6993,16 @@ const defaultFieldConfig$9 = {
       case "partitaIVA":
       default:
         return {
-          label: "partitaIVA",
+          label: "codiceFiscalePartitaIVA",
           validators: validatePatternOnBlur(/^\d{11}$/),
           mask: {
-            mask: makeMask(...nonInputs("IT", {
-              includeInValue: false
-            }), spacer, ...numericInputs(11))
+            mask: makeMask(spacer, ...numericInputs(11))
           },
           guidanceText: {
             key: "enterTheRemainingNDigitsForExample",
             values: {
               numDigits: "11",
-              example: "IT47040001100"
+              example: "47040001100"
             }
           }
         };
@@ -7458,6 +7497,7 @@ const MaskedInputText = ({
   value,
   onInput,
   onBlur,
+  onFocus,
   onMismatch: onMismatchExternal,
   isValid: validationIsValid,
   errorMessage,
@@ -7625,6 +7665,7 @@ Falling back to partially valid value "${fallback}"`);
         }
       },
       onFocusHandler: (event) => {
+        onFocus == null ? void 0 : onFocus();
         fieldOnFocus(event);
         setIsFocused(true);
       },
@@ -7719,7 +7760,7 @@ const companyRegistrationNumberOptions = {
   }],
   [CountryCodes.Italy]: [{
     id: "partitaIVA",
-    name: "partitaIVA"
+    name: "codiceFiscalePartitaIVA"
   }, {
     id: "CCIAA",
     name: "CCIAA"
@@ -11950,7 +11991,7 @@ const LABELS = {
   }
 };
 const getKeyForField = (fieldName, country) => country ? LABELS[fieldName][country] || LABELS[fieldName].default : LABELS[fieldName].default;
-const getAddressSchemaForCountry = (country) => ADDRESS_SCHEMAS[country] || ADDRESS_SCHEMAS.default;
+const getAddressSchemaForCountry = (country) => country && ADDRESS_SCHEMAS[country] ? ADDRESS_SCHEMAS[country] : ADDRESS_SCHEMAS.default;
 const getAddressSchemaLabelsByCountry = (country) => {
   const schema = getAddressSchemaForCountry(country);
   return schema.reduce((labels2, field) => ({
@@ -12786,11 +12827,10 @@ function Address(props) {
   const stateRef = useRef({
     setState: null
   });
-  const addressFields = ADDRESS_SCHEMAS[dataProp == null ? void 0 : dataProp.country] ?? ADDRESS_SCHEMAS.default;
   const datasetUtils = datasetUtilities(i18n.locale);
-  const requiredFields = (requiredFieldsProp == null ? void 0 : requiredFieldsProp.includes("stateOrProvince")) || dataProp.country && COUNTRIES_WITH_STATES_DATASET.includes(dataProp.country) ? addressFields : addressFields.filter((ad) => ad !== "stateOrProvince");
-  const rules2 = useMemo(() => addressValidationRules(dataProp.country), [dataProp.country]);
-  const rulesV4 = useMemo(() => addressValidationRulesV4(dataProp.country, i18n), [dataProp.country, i18n]);
+  const requiredFields = (requiredFieldsProp == null ? void 0 : requiredFieldsProp.includes("stateOrProvince")) || (dataProp == null ? void 0 : dataProp.country) && COUNTRIES_WITH_STATES_DATASET.includes(dataProp == null ? void 0 : dataProp.country) ? getAddressSchemaForCountry(dataProp == null ? void 0 : dataProp.country) : getAddressSchemaForCountry(dataProp == null ? void 0 : dataProp.country).filter((ad) => ad !== "stateOrProvince");
+  const rules2 = useMemo(() => (dataProp == null ? void 0 : dataProp.country) ? addressValidationRules(dataProp == null ? void 0 : dataProp.country) : {}, [dataProp == null ? void 0 : dataProp.country]);
+  const rulesV4 = useMemo(() => (dataProp == null ? void 0 : dataProp.country) ? addressValidationRulesV4(dataProp == null ? void 0 : dataProp.country, i18n) : {}, [dataProp == null ? void 0 : dataProp.country, i18n]);
   const {
     data,
     errors,
@@ -12818,7 +12858,7 @@ function Address(props) {
     optionalFields: optionalFieldsProp
   }, i18n);
   useEffect(() => {
-    if (dataProp.country !== data.country && dataProp.country) {
+    if ((dataProp == null ? void 0 : dataProp.country) !== data.country && (dataProp == null ? void 0 : dataProp.country)) {
       requiredFields.forEach((field) => {
         handleChangeFor(field, "input")("");
       });
@@ -12826,7 +12866,7 @@ function Address(props) {
       setShowAutocompletedAddressFields(false);
       setShowAddAddressButton(true);
     }
-  }, [dataProp.country]);
+  }, [dataProp == null ? void 0 : dataProp.country]);
   useEffect(() => {
     if (handleAddressSearch && handleFindAddress) {
       setIsHandlerPresent(true);
@@ -12837,12 +12877,13 @@ function Address(props) {
     }
   }, []);
   useEffect(() => {
+    var _a, _b;
     const processedData = ADDRESS_SCHEMA.reduce((acc, cur) => {
       if (!formUtils.isRequiredField(cur)) {
         delete acc[cur];
         return acc;
       }
-      const fallbackValue = !formUtils.isRequiredField(cur) && !data[cur] && dataProp[cur] ? dataProp[cur] : "N/A";
+      const fallbackValue = !formUtils.isRequiredField(cur) && !data[cur] && (dataProp == null ? void 0 : dataProp[cur]) ? dataProp[cur] : "N/A";
       return {
         ...acc,
         [cur]: formUtils.isRequiredField(cur) || !!data[cur] ? data[cur] : fallbackValue
@@ -12877,7 +12918,7 @@ function Address(props) {
       },
       isValid
     });
-    stateRef.current.setState({
+    (_b = (_a = stateRef.current).setState) == null ? void 0 : _b.call(_a, {
       type: "addToState",
       value: {
         ...addressState,
@@ -12937,8 +12978,8 @@ function Address(props) {
   }) => {
     const hasHouseNumber = !!houseNumberOrName;
     if (hasHouseNumber) {
-      const isHouseNumberFirst = COUNTRIES_WITH_HOUSE_NUMBER_FIRST.includes(data.country);
-      const needsComma = COUNTRIES_WITH_COMMA_SEPARATED.includes(data.country);
+      const isHouseNumberFirst = data.country ? COUNTRIES_WITH_HOUSE_NUMBER_FIRST.includes(data.country) : false;
+      const needsComma = data.country ? COUNTRIES_WITH_COMMA_SEPARATED.includes(data.country) : false;
       const formattedAddress = isHouseNumberFirst ? `${houseNumberOrName}${needsComma ? ", " : " "}${street}` : `${street}${needsComma ? ", " : " "}${houseNumberOrName}`;
       return handleChangeFor("address", "input")(formattedAddress);
     }
@@ -12980,7 +13021,7 @@ function Address(props) {
         className: "adyen-kyc-search-address",
         children: [jsx(SearchAddress, {
           handleChangeFor,
-          data: dataProp,
+          data: dataProp ?? {},
           handleAddressSearch,
           handleFindAddress,
           legalEntityId,
@@ -12994,7 +13035,7 @@ function Address(props) {
             className: "adyen-kyc-search-address--below-location",
             children: [jsx(Icon, {
               name: "location"
-            }), datasetUtils.getCountryName(dataProp.country)]
+            }), datasetUtils.getCountryName(dataProp == null ? void 0 : dataProp.country)]
           }), showAddAddressButton && jsx(Button, {
             showAsLink: true,
             testId: "addAddressManuallyBtn",
@@ -15090,21 +15131,49 @@ const useIdVerificationToken = ({
     loadingStatus
   };
 };
-const styles$3 = {
+const adyenKycLoadingInputForm = "adyen-kyc-loading-input__form";
+const adyenKycLoadingInputFormLoadingOpacity0 = "adyen-kyc-loading-input__form--loading-opacity0";
+const adyenKycLoadingInputFormLoadingOpacity01 = "adyen-kyc-loading-input__form--loading-opacity0-1";
+const adyenKycLoadingInputFormLoadingOpacity02 = "adyen-kyc-loading-input__form--loading-opacity0-2";
+const adyenKycLoadingInputFormLoadingOpacity03 = "adyen-kyc-loading-input__form--loading-opacity0-3";
+const adyenKycLoadingInputFormLoadingOpacity04 = "adyen-kyc-loading-input__form--loading-opacity0-4";
+const adyenKycLoadingInputFormLoadingOpacity05 = "adyen-kyc-loading-input__form--loading-opacity0-5";
+const adyenKycLoadingInputFormLoadingOpacity06 = "adyen-kyc-loading-input__form--loading-opacity0-6";
+const adyenKycLoadingInputFormLoadingOpacity07 = "adyen-kyc-loading-input__form--loading-opacity0-7";
+const adyenKycLoadingInputFormLoadingOpacity08 = "adyen-kyc-loading-input__form--loading-opacity0-8";
+const adyenKycLoadingInputFormLoadingOpacity09 = "adyen-kyc-loading-input__form--loading-opacity0-9";
+const adyenKycLoadingInputFormLoadingOpacity1 = "adyen-kyc-loading-input__form--loading-opacity1";
+const adyenKycLoadingInputLoader = "adyen-kyc-loading-input__loader";
+const adyenKycLoadingInputLoaderActive = "adyen-kyc-loading-input__loader--active";
+const styles$6 = {
   "adyen-kyc-loading-input__form": "adyen-kyc-loading-input__form",
+  adyenKycLoadingInputForm,
   "adyen-kyc-loading-input__form--loading-opacity0": "adyen-kyc-loading-input__form--loading-opacity0",
+  adyenKycLoadingInputFormLoadingOpacity0,
   "adyen-kyc-loading-input__form--loading-opacity0-1": "adyen-kyc-loading-input__form--loading-opacity0-1",
+  adyenKycLoadingInputFormLoadingOpacity01,
   "adyen-kyc-loading-input__form--loading-opacity0-2": "adyen-kyc-loading-input__form--loading-opacity0-2",
+  adyenKycLoadingInputFormLoadingOpacity02,
   "adyen-kyc-loading-input__form--loading-opacity0-3": "adyen-kyc-loading-input__form--loading-opacity0-3",
+  adyenKycLoadingInputFormLoadingOpacity03,
   "adyen-kyc-loading-input__form--loading-opacity0-4": "adyen-kyc-loading-input__form--loading-opacity0-4",
+  adyenKycLoadingInputFormLoadingOpacity04,
   "adyen-kyc-loading-input__form--loading-opacity0-5": "adyen-kyc-loading-input__form--loading-opacity0-5",
+  adyenKycLoadingInputFormLoadingOpacity05,
   "adyen-kyc-loading-input__form--loading-opacity0-6": "adyen-kyc-loading-input__form--loading-opacity0-6",
+  adyenKycLoadingInputFormLoadingOpacity06,
   "adyen-kyc-loading-input__form--loading-opacity0-7": "adyen-kyc-loading-input__form--loading-opacity0-7",
+  adyenKycLoadingInputFormLoadingOpacity07,
   "adyen-kyc-loading-input__form--loading-opacity0-8": "adyen-kyc-loading-input__form--loading-opacity0-8",
+  adyenKycLoadingInputFormLoadingOpacity08,
   "adyen-kyc-loading-input__form--loading-opacity0-9": "adyen-kyc-loading-input__form--loading-opacity0-9",
+  adyenKycLoadingInputFormLoadingOpacity09,
   "adyen-kyc-loading-input__form--loading-opacity1": "adyen-kyc-loading-input__form--loading-opacity1",
+  adyenKycLoadingInputFormLoadingOpacity1,
   "adyen-kyc-loading-input__loader": "adyen-kyc-loading-input__loader",
-  "adyen-kyc-loading-input__loader--active": "adyen-kyc-loading-input__loader--active"
+  adyenKycLoadingInputLoader,
+  "adyen-kyc-loading-input__loader--active": "adyen-kyc-loading-input__loader--active",
+  adyenKycLoadingInputLoaderActive
 };
 const LoaderWrapper = ({
   children,
@@ -15118,12 +15187,12 @@ const LoaderWrapper = ({
   const digit = formOpacityStrArr[0];
   const decimal = formOpacityStrArr[1];
   const opacity = decimal ? `${digit}-${decimal}` : `${digit}`;
-  const wrapperClass = cx("adyen-kyc-loading-input__form", styles$3["adyen-kyc-loading-input__form"], {
-    [styles$3[`adyen-kyc-loading-input__form--loading-opacity${opacity}`]]: status === "loading"
+  const wrapperClass = cx("adyen-kyc-loading-input__form", styles$6["adyen-kyc-loading-input__form"], {
+    [styles$6[`adyen-kyc-loading-input__form--loading-opacity${opacity}`]]: status === "loading"
   });
   const loaderWrapperClass = cx({
-    [styles$3["adyen-kyc-loading-input__loader"]]: true,
-    [styles$3["adyen-kyc-loading-input__loader--active"]]: status === "loading" && showSpinner
+    [styles$6["adyen-kyc-loading-input__loader"]]: true,
+    [styles$6["adyen-kyc-loading-input__loader--active"]]: status === "loading" && showSpinner
   });
   const overlayClass = cx("adyen-kyc-loading-input", className);
   return jsxs("div", {
@@ -16638,11 +16707,19 @@ const handleKeys = (keys, callback, propagationMode = "stopIfMatches") => (event
     callback();
   }
 };
-const styles$2 = {
+const adyenKycMultiSelectList = "adyen-kyc-multi-select-list";
+const adyenKycMultiSelectListItem = "adyen-kyc-multi-select-list-item";
+const adyenKycMultiSelectListItemWithDescription = "adyen-kyc-multi-select-list-item--with-description";
+const adyenKycCheckboxLabel = "adyen-kyc-checkbox__label";
+const styles$5 = {
   "adyen-kyc-multi-select-list": "adyen-kyc-multi-select-list",
+  adyenKycMultiSelectList,
   "adyen-kyc-multi-select-list-item": "adyen-kyc-multi-select-list-item",
+  adyenKycMultiSelectListItem,
   "adyen-kyc-multi-select-list-item--with-description": "adyen-kyc-multi-select-list-item--with-description",
-  "adyen-kyc-checkbox__label": "adyen-kyc-checkbox__label"
+  adyenKycMultiSelectListItemWithDescription,
+  "adyen-kyc-checkbox__label": "adyen-kyc-checkbox__label",
+  adyenKycCheckboxLabel
 };
 const MultiSelectList = ({
   options,
@@ -16650,7 +16727,7 @@ const MultiSelectList = ({
   onSelect,
   mapToSelectItem
 }) => jsx("ul", {
-  className: styles$2["adyen-kyc-multi-select-list"],
+  className: styles$5["adyen-kyc-multi-select-list"],
   children: options.map((option) => {
     const item = mapToSelectItem(option);
     const isSelected = selected.includes(option);
@@ -16664,8 +16741,8 @@ const MultiSelectList = ({
       onKeyDown: handleKeys(["Enter", " "], handleSelect),
       onSelect: handleSelect,
       isMulti: true,
-      className: cx([styles$2["adyen-kyc-multi-select-list-item"], {
-        [styles$2["adyen-kyc-multi-select-list-item--with-description"]]: !!item.description
+      className: cx([styles$5["adyen-kyc-multi-select-list-item"], {
+        [styles$5["adyen-kyc-multi-select-list-item--with-description"]]: !!item.description
       }])
     }, item.id);
   })
@@ -16686,7 +16763,7 @@ const DecisionMakerRoleComponent = (props) => {
     fieldValidationErrors,
     requiredFields,
     allowedRoles,
-    trustedRoles
+    trustedRoles = []
   } = props;
   const {
     i18n
@@ -16744,7 +16821,7 @@ const DecisionMakerRoleComponent = (props) => {
         onSelect: changeRoles,
         mapToSelectItem: (role) => ({
           ...makeSelectItemForRole(role, i18n),
-          disabled: allowedRoles ? !(allowedRoles == null ? void 0 : allowedRoles.includes(role)) : trustedRoles.includes(role)
+          disabled: allowedRoles && !allowedRoles.includes(role) || trustedRoles.includes(role)
         })
       })
     })]
@@ -19641,7 +19718,8 @@ function InstantBankVerification({
           case "GENERIC_ERROR":
             errorTitle = i18n.get("ranIntoTechnicalError");
             break;
-          case "UNKNOWN_ERROR": {
+          case "UNKNOWN_ERROR":
+          default: {
             errorTitle = i18n.get("couldNotCompleteAccountCheck");
             break;
           }
@@ -19812,6 +19890,7 @@ const payoutCurrencySupport = {
     iban: [Currencies.CAD, Currencies.USD]
   }
 };
+const shouldShowCheckGuidance = (country) => country === "US";
 const shouldShowPayoutAccountFormatSelector = (country) => countriesWithLocalFormat.has(country);
 const shouldShowPayoutAlert = (country) => shouldShowPayoutAccountFormatSelector(country) || countriesWithMultipleCurrencies.has(country);
 const getSupportedCurrencyGuidance = (i18n, country, requiredFields) => {
@@ -19963,7 +20042,9 @@ function BankAccountNumber(props) {
   } = useI18nContext();
   const {
     country,
-    fieldConfig = defaultFieldConfig$4
+    fieldConfig = defaultFieldConfig$4,
+    onFocus,
+    onBlur
   } = props;
   const metadata = resolveFieldMetadata(fieldConfig[country], {}, defaultFieldMetadata$4);
   const mergedProps = mergeFieldMetadataIntoProps("bankAccountNumber", metadata, props);
@@ -19981,6 +20062,10 @@ function BankAccountNumber(props) {
     fieldProblems: mergedProps == null ? void 0 : mergedProps.fieldValidationErrors,
     obscuredFields: mergedProps.obscuredFields
   });
+  const handleBlur = () => {
+    onBlur == null ? void 0 : onBlur();
+    handleChangeFor("bankAccountNumber", "blur");
+  };
   const {
     updateStateSlice
   } = useGlobalDataSlice("payoutAccountDetails", "bankAccountNumber");
@@ -20007,8 +20092,9 @@ function BankAccountNumber(props) {
       field: ["bankAccountNumber"],
       input: ["bankAccountNumber"]
     },
-    onBlur: handleChangeFor("bankAccountNumber", "blur"),
+    onBlur: handleBlur,
     onInput: handleChangeFor("bankAccountNumber", "input"),
+    onFocus,
     readonly: formUtils.isReadOnly("bankAccountNumber"),
     value: data.bankAccountNumber ?? "",
     acceptObscuredValue: formUtils.isObscured("bankAccountNumber")
@@ -20265,7 +20351,7 @@ const defaultFieldConfig$2 = {
     }
   },
   [CountryCodes.UnitedStates]: {
-    label: "achRoutingNumber",
+    label: "routingNumber",
     validators: validatePatternOnBlur(/^\d{9}$/),
     mask: {
       mask: makeMask(...numericInputs(9))
@@ -20308,7 +20394,9 @@ function BranchCode(props) {
   } = useI18nContext();
   const {
     country,
-    fieldConfig = defaultFieldConfig$2
+    fieldConfig = defaultFieldConfig$2,
+    onFocus,
+    onBlur
   } = props;
   const metadata = resolveFieldMetadata(fieldConfig[country], {}, defaultFieldMetadata$2);
   const mergedProps = mergeFieldMetadataIntoProps("branchCode", metadata, props);
@@ -20328,6 +20416,10 @@ function BranchCode(props) {
   const {
     updateStateSlice
   } = useGlobalDataSlice("payoutAccountDetails", "branchCode");
+  const handleBlur = () => {
+    onBlur == null ? void 0 : onBlur();
+    handleChangeFor("branchCode", "blur");
+  };
   useEffect(() => {
     updateStateSlice({
       data,
@@ -20351,7 +20443,8 @@ function BranchCode(props) {
     value: data.branchCode ?? "",
     readonly: formUtils.isReadOnly("branchCode"),
     onInput: handleChangeFor("branchCode", "input"),
-    onBlur: handleChangeFor("branchCode", "blur"),
+    onBlur: handleBlur,
+    onFocus,
     "aria-required": true,
     "aria-label": formUtils.getLabel("branchCode"),
     "aria-invalid": !valid.branchCode
@@ -20689,6 +20782,48 @@ function SwiftCode(props) {
     "aria-invalid": !valid.swiftCode
   });
 }
+const adyenKycCheckGuidance = "adyen-kyc-check-guidance";
+const adyenKycCheckGuidanceImage = "adyen-kyc-check-guidance__image";
+const adyenKycCheckGuidanceImageAnnotated = "adyen-kyc-check-guidance__image--annotated";
+const adyenKycCheckGuidanceImageInactive = "adyen-kyc-check-guidance__image--inactive";
+const adyenKycUsCheckAccountNumber = "adyen-kyc-us-check-account-number";
+const adyenKycUsCheckRoutingNumber = "adyen-kyc-us-check-routing-number";
+const styles$4 = {
+  "adyen-kyc-check-guidance": "adyen-kyc-check-guidance",
+  adyenKycCheckGuidance,
+  "adyen-kyc-check-guidance__image": "adyen-kyc-check-guidance__image",
+  adyenKycCheckGuidanceImage,
+  "adyen-kyc-check-guidance__image--annotated": "adyen-kyc-check-guidance__image--annotated",
+  adyenKycCheckGuidanceImageAnnotated,
+  "adyen-kyc-check-guidance__image--inactive": "adyen-kyc-check-guidance__image--inactive",
+  adyenKycCheckGuidanceImageInactive,
+  "adyen-kyc-us-check-account-number": "adyen-kyc-us-check-account-number",
+  adyenKycUsCheckAccountNumber,
+  "adyen-kyc-us-check-routing-number": "adyen-kyc-us-check-routing-number",
+  adyenKycUsCheckRoutingNumber
+};
+const CheckGuidance = ({
+  annotated
+}) => jsxs("div", {
+  className: styles$4["adyen-kyc-check-guidance"],
+  children: [jsx(Svg, {
+    type: "image",
+    name: "us-check-account-number",
+    className: cx(styles$4["adyen-kyc-check-guidance__image"], styles$4["adyen-kyc-check-guidance__image--annotated"], {
+      [styles$4["adyen-kyc-check-guidance__image--inactive"]]: annotated !== "account"
+    })
+  }), jsx(Svg, {
+    type: "image",
+    name: "us-check-routing-number",
+    className: cx(styles$4["adyen-kyc-check-guidance__image"], styles$4["adyen-kyc-check-guidance__image--annotated"], {
+      [styles$4["adyen-kyc-check-guidance__image--inactive"]]: annotated !== "routing"
+    })
+  }), jsx(Svg, {
+    name: "us-check",
+    type: "image",
+    className: styles$4["adyen-kyc-check-guidance__image"]
+  })]
+});
 const payoutAccountFields = ["accountHolder", ...ibanFields, ...branchCodeFields, ...swiftCodeFields, ...currencyFields, ...bankAccountNumberFields, ...bankNameFields, ...bankCodeFields];
 function PayoutAccountComponent(props) {
   const {
@@ -20699,11 +20834,13 @@ function PayoutAccountComponent(props) {
   const {
     i18n
   } = useI18nContext();
+  const [checkAnnotation, setCheckAnnotation] = useState();
   const {
     isSettingEnabled
   } = useSettingsContext();
   const bankAccountFormatSelectionAllowed = isSettingEnabled(SettingNames.AllowBankAccountFormatSelection);
   const {
+    heading,
     country,
     id,
     legalEntityResponse,
@@ -20711,6 +20848,7 @@ function PayoutAccountComponent(props) {
     arePayoutAccountDetailsInvalid,
     invalidFieldNames
   } = props;
+  const showCheckGuidance = shouldShowCheckGuidance(country);
   const {
     data,
     valid,
@@ -20753,19 +20891,15 @@ function PayoutAccountComponent(props) {
     className: "adyen-kyc-individual__payout-account",
     "aria-describedby": "ariaErrorField",
     children: [jsx(FormHeader, {
-      heading: props.heading
+      heading
     }), jsx(ErrorPanel, {
       verificationErrors: props == null ? void 0 : props.formVerificationErrors,
       validationErrors: props == null ? void 0 : props.fieldValidationErrors,
       formUtils,
       id: "ariaErrorField"
-    }), jsx(ContextGuidance, {
-      page: "Payout account details",
-      titleId: "whyDoINeedToFillInThisInformation",
-      contentId: "reasonForFillingPayoutDetails",
-      title: i18n.get("whyDoINeedToFillInThisInformation"),
-      content: i18n.get("reasonForFillingPayoutDetails")
-    }), formUtils.isRequiredField("accountHolder") && jsx(Field, {
+    }), showCheckGuidance ? jsx(CheckGuidance, {
+      annotated: checkAnnotation
+    }) : void 0, formUtils.isRequiredField("accountHolder") && jsx(Field, {
       name: "accountHolder",
       label: formUtils.getLabel("accountHolder"),
       helper: i18n.get(accountHolderDescriptionKey),
@@ -20789,7 +20923,9 @@ function PayoutAccountComponent(props) {
     }), formUtils.isRequiredField("bankAccountNumber") && jsx(BankAccountNumber, {
       ...bankAccountNumberProps,
       country,
-      dataStoreId: id
+      dataStoreId: id,
+      onFocus: showCheckGuidance ? () => setCheckAnnotation("account") : void 0,
+      onBlur: showCheckGuidance ? () => setCheckAnnotation(void 0) : void 0
     }), formUtils.isRequiredField("iban") && jsx(Iban, {
       ...ibanProps,
       dataStoreId: id,
@@ -20807,12 +20943,18 @@ function PayoutAccountComponent(props) {
     }), formUtils.isRequiredField("branchCode") && jsx(BranchCode, {
       ...branchCodeProps,
       country,
-      dataStoreId: id
+      dataStoreId: id,
+      onFocus: showCheckGuidance ? () => setCheckAnnotation("routing") : void 0,
+      onBlur: showCheckGuidance ? () => setCheckAnnotation(void 0) : void 0
     }), formUtils.isRequiredField("bankCity") && jsx(BankCity, {
       ...bankCityProps,
       dataStoreId: id
     }), shouldShowPayoutAlert(country) && jsx(Alert, {
       title: getSupportedCurrencyGuidance(i18n, country, requiredFields)
+    }), jsx(Typography, {
+      variant: "caption",
+      color: "tertiary",
+      children: i18n.get("reasonForFillingPayoutDetails")
     }), arePayoutAccountDetailsInvalid && jsx(Alert, {
       className: "adyen-kyc-u-margin-top-16",
       variant: "error",
@@ -24254,12 +24396,22 @@ const dbaNameFieldMetadata = {
   label: "dbaName",
   validators: [validateNotEmptyOnBlur]
 };
-const styles$1 = {
+const adyenKycStructuredList = "adyen-kyc-structured-list";
+const adyenKycStructuredListListItem = "adyen-kyc-structured-list__list-item";
+const adyenLayoutMd = "adyen-layout-md";
+const adyenKycStructuredListLabel = "adyen-kyc-structured-list__label";
+const adyenKycStructuredListValue = "adyen-kyc-structured-list__value";
+const styles$3 = {
   "adyen-kyc-structured-list": "adyen-kyc-structured-list",
+  adyenKycStructuredList,
   "adyen-kyc-structured-list__list-item": "adyen-kyc-structured-list__list-item",
+  adyenKycStructuredListListItem,
   "adyen-layout-md": "adyen-layout-md",
+  adyenLayoutMd,
   "adyen-kyc-structured-list__label": "adyen-kyc-structured-list__label",
-  "adyen-kyc-structured-list__value": "adyen-kyc-structured-list__value"
+  adyenKycStructuredListLabel,
+  "adyen-kyc-structured-list__value": "adyen-kyc-structured-list__value",
+  adyenKycStructuredListValue
 };
 const StructuredList = ({
   items
@@ -24268,14 +24420,14 @@ const StructuredList = ({
     i18n
   } = useI18nContext();
   return jsx("dl", {
-    className: styles$1["adyen-kyc-structured-list"],
+    className: styles$3["adyen-kyc-structured-list"],
     children: items.map((item) => jsxs("div", {
-      className: styles$1["adyen-kyc-structured-list__list-item"],
+      className: styles$3["adyen-kyc-structured-list__list-item"],
       children: [jsx("dt", {
-        className: styles$1["adyen-kyc-structured-list__label"],
+        className: styles$3["adyen-kyc-structured-list__label"],
         children: i18n.get(item.labelKey)
       }), jsx("dd", {
-        className: styles$1["adyen-kyc-structured-list__value"],
+        className: styles$3["adyen-kyc-structured-list__value"],
         children: item.value
       })]
     }, item.labelKey))
@@ -24724,8 +24876,8 @@ function AdditionalInformationComponent({
           variant: "title",
           children: i18n.get("registeredBusinessAddress")
         }), jsx(Typography, {
-          el: "h4",
-          variant: "caption",
+          el: "p",
+          variant: "body",
           children: i18n.get("registeredBusinessAddressDescription")
         })]
       }), jsx(Address, {
@@ -24754,8 +24906,8 @@ function AdditionalInformationComponent({
           variant: "title",
           children: i18n.get("principalPlaceOfBusiness")
         }), jsx(Typography, {
-          el: "h4",
-          variant: "caption",
+          el: "p",
+          variant: "body",
           children: i18n.get("principalPlaceOfBusinessDescription")
         })]
       }), jsx(Field, {
@@ -26272,14 +26424,14 @@ const Modal = ({
             tertiary: true,
             "aria-label": "back",
             icon: "arrow-left",
-            className: "adyen-kyc-modal-button-blur",
+            className: "adyen-kyc-modal-button",
             onClick: onBack,
             shaded: true
           }) : jsx("div", {}), onClose ? jsx(Button, {
             tertiary: true,
             "aria-label": "close",
             icon: "cross",
-            className: "adyen-kyc-modal-button-blur",
+            className: "adyen-kyc-modal-button",
             onClick: onClose,
             shaded: true
           }) : jsx("div", {})]
@@ -26607,16 +26759,11 @@ const DropinLayout = ({
   if (modalOpen) {
     return jsx(Modal, {
       footer,
-      onClose: handleClose,
+      onClose: !onBack ? handleClose : void 0,
       onBack,
       children: jsx("div", {
-        className: "adyen-kyc-dropin",
-        children: jsx("div", {
-          className: "adyen-kyc-dropin__content",
-          children: jsx("div", {
-            children: content
-          })
-        })
+        className: "adyen-kyc-modal-content",
+        children: content
       })
     });
   }
@@ -34676,6 +34823,47 @@ function RoleAndTypeDropinComponent({
     content
   });
 }
+const adyenKycOutlinedIcon = "adyen-kyc-outlined-icon";
+const styles$2 = {
+  "adyen-kyc-outlined-icon": "adyen-kyc-outlined-icon",
+  adyenKycOutlinedIcon
+};
+const OutlinedIcon = ({
+  name
+}) => jsx("div", {
+  className: styles$2["adyen-kyc-outlined-icon"],
+  children: jsx(Icon, {
+    name
+  })
+});
+const Splashscreen = ({
+  title,
+  subtitle,
+  icon,
+  buttonText,
+  onClick
+}) => {
+  const {
+    i18n
+  } = useI18nContext();
+  return jsxs("div", {
+    className: "adyen-kyc-splashscreen",
+    children: [icon && jsx(OutlinedIcon, {
+      name: icon
+    }), jsx(Typography, {
+      el: "h2",
+      variant: "title-l",
+      children: title
+    }), jsx(Typography, {
+      el: "p",
+      variant: "body",
+      children: subtitle
+    }), onClick && jsx(Button, {
+      onClick,
+      label: buttonText ?? i18n.get("finish")
+    })]
+  });
+};
 const serviceAgreementValidationRules = {
   signer: {
     modes: ["blur"],
@@ -34769,7 +34957,8 @@ const serviceAgreementTypesTranslationMapping = {
   adyenAccount: "businessAccountTerms",
   adyenCard: "cardUserTerms",
   adyenFranchisee: "franchiseesTAndCs",
-  adyenPccr: "pccr"
+  adyenPccr: "pccr",
+  adyenChargeCard: "chargeCardUserAgreement"
 };
 const logger$i = createLogger("ServiceAgreementDropinComponent");
 const FALLBACK_LANGUAGE_CODE = "en";
@@ -34823,7 +35012,9 @@ function ServiceAgreementDropinComponent({
   const forms2 = [...signedForms, ...formsToBeSigned];
   const [activeFormIndex, setActiveFormIndex] = useState(0);
   const [activeForm, setActiveForm] = useState(forms2[activeFormIndex]);
+  const [hasFinished, setHasFinished] = useState(false);
   const canSign = (serviceAgreementTypes == null ? void 0 : serviceAgreementTypes.includes(activeForm.serviceAgreementType)) && !activeForm.acceptanceId;
+  const isLastStep = activeFormIndex === forms2.length - 1;
   const showSignerCard = !!activeForm.acceptanceId;
   const handleServiceAgreementIsNotAvailableInThatLanguage = useCallback(() => {
     showToast({
@@ -35076,7 +35267,7 @@ function ServiceAgreementDropinComponent({
       homeButtonLabel: i18n.get("goToOverview"),
       onNext: canSign ? handleSignClick : () => gotoForm(activeFormIndex + 1),
       nextButtonLabel: i18n.get(canSign ? "sign" : "next"),
-      nextButtonDisabled: !canSign && activeFormIndex === forms2.length - 1,
+      nextButtonDisabled: !canSign && isLastStep,
       onBack: () => gotoForm(activeFormIndex - 1),
       hideBackButton: activeFormIndex === 0,
       backButtonLabel: i18n.get("previous")
@@ -35084,6 +35275,15 @@ function ServiceAgreementDropinComponent({
   });
   const currentStep = signedForms.length;
   const totalSteps = forms2.length;
+  const handleClick = async () => {
+    if (canSign) {
+      await handleSignClick();
+    } else if (!isLastStep) {
+      gotoForm(activeFormIndex + 1);
+    } else {
+      setHasFinished(true);
+    }
+  };
   const footer = jsx(EmbeddedActionBar, {
     left: jsx(StepProgressIndicator, {
       activeStepIndex: currentStep ?? 0,
@@ -35096,15 +35296,20 @@ function ServiceAgreementDropinComponent({
       jsx(Button, {
         secondary: !canSign,
         label: i18n.get(canSign ? "signAndContinue" : "next"),
-        onClick: canSign ? handleSignClick : () => gotoForm(activeFormIndex + 1)
+        onClick: handleClick
       })
     )
   });
+  const endScreen = hasFinished && jsx(Splashscreen, {
+    icon: "check",
+    title: i18n.get("serviceAgreementSignedAndDated"),
+    onClick: handleCloseClick
+  });
   return jsx(DropinLayout, {
     showAsModal: asModal,
     onClose: handleCloseClick,
     content: jsxs(Fragment, {
-      children: [!asEmbedded && sidebar, content]
+      children: [!asEmbedded && sidebar, endScreen || content]
     }),
     footer: asEmbedded ? footer : void 0
   });
@@ -37664,7 +37869,8 @@ function CreateContractingComponent({
     getServiceAgreementAcceptanceInfos: getServiceAgreementAcceptanceInfos2,
     getAcceptedServiceAgreement: getAcceptedServiceAgreement2,
     downloadAcceptedServiceAgreement,
-    downloadUnacceptedServiceAgreement
+    downloadUnacceptedServiceAgreement,
+    acceptServiceAgreement: acceptServiceAgreement2
   } = useComponentApi(legalEntityId);
   const [isLoading, setIsLoading] = useState(true);
   const [legalEntity, setLegalEntity] = useState();
@@ -37686,6 +37892,14 @@ function CreateContractingComponent({
       data
     }) => setServiceAgreementAcceptanceInfos(data)).catch(logger$g.error);
   }, [getServiceAgreementAcceptanceInfos2, legalEntityId]);
+  const handleSign = useCallback(
+    // @ts-ignore-error:next-line ts does not infer type correctly
+    async (...params) => {
+      await acceptServiceAgreement2(...params);
+      await Promise.all([fetchLegalEntity(), fetchUnsigned(), fetchSigned()]);
+    },
+    [acceptServiceAgreement2, fetchLegalEntity, fetchSigned, fetchUnsigned]
+  );
   useEffect(() => {
     (async () => {
       setIsLoading(true);
@@ -37696,8 +37910,6 @@ function CreateContractingComponent({
   }, [fetchLegalEntity, fetchSigned, fetchUnsigned]);
   const handleHomeClick = () => {
   };
-  const handleSign = () => {
-  };
   return isLoading || !legalEntity ? jsx(Loader, {
     size: "medium"
   }) : jsx(ServiceAgreementDropinComponent, {
@@ -37873,14 +38085,19 @@ function CreateTransferInstrumentComponent({
     taskType: TaskTypes.PAYOUT
   });
 }
-var OnboardingStatus = /* @__PURE__ */ ((OnboardingStatus2) => {
-  OnboardingStatus2["AWAITING_DATA"] = "AWAITING_DATA";
-  OnboardingStatus2["IN_REVIEW"] = "IN_REVIEW";
-  OnboardingStatus2["UNSUCCESSFUL"] = "UNSUCCESSFUL";
-  OnboardingStatus2["REJECTED"] = "REJECTED";
-  OnboardingStatus2["VERIFIED"] = "VERIFIED";
-  return OnboardingStatus2;
-})(OnboardingStatus || {});
+const adyenKycSkeleton = "adyen-kyc-skeleton";
+const skeleton = "skeleton";
+const adyenKycSkeletonCircle = "adyen-kyc-skeleton__circle";
+const adyenKycSkeletonText = "adyen-kyc-skeleton__text";
+const styles$1 = {
+  "adyen-kyc-skeleton": "adyen-kyc-skeleton",
+  adyenKycSkeleton,
+  skeleton,
+  "adyen-kyc-skeleton__circle": "adyen-kyc-skeleton__circle",
+  adyenKycSkeletonCircle,
+  "adyen-kyc-skeleton__text": "adyen-kyc-skeleton__text",
+  adyenKycSkeletonText
+};
 const Skeleton = ({
   circle = false,
   text = false,
@@ -37888,8 +38105,8 @@ const Skeleton = ({
   width
 }) => {
   const classNames = cx("adyen-kyc-skeleton", {
-    "adyen-kyc-skeleton__circle": circle,
-    "adyen-kyc-skeleton__text": text
+    [styles$1["adyen-kyc-skeleton__circle"]]: circle,
+    [styles$1["adyen-kyc-skeleton__text"]]: text
   });
   return jsx("div", {
     className: classNames,
@@ -37899,14 +38116,34 @@ const Skeleton = ({
     }
   });
 };
+const adyenKycEmbeddedStatus = "adyen-kyc-embedded-status";
+const adyenKycEmbeddedStatusLoading = "adyen-kyc-embedded-status--loading";
+const adyenKycEmbeddedStatusAvatar = "adyen-kyc-embedded-status__avatar";
+const adyenKycEmbeddedStatusLight = "adyen-kyc-embedded-status--light";
+const adyenKycEmbeddedStatusIcon = "adyen-kyc-embedded-status__icon";
+const adyenKycEmbeddedStatusInfo = "adyen-kyc-embedded-status__info";
 const styles = {
   "adyen-kyc-embedded-status": "adyen-kyc-embedded-status",
+  adyenKycEmbeddedStatus,
   "adyen-kyc-embedded-status--loading": "adyen-kyc-embedded-status--loading",
+  adyenKycEmbeddedStatusLoading,
   "adyen-kyc-embedded-status__avatar": "adyen-kyc-embedded-status__avatar",
+  adyenKycEmbeddedStatusAvatar,
   "adyen-kyc-embedded-status--light": "adyen-kyc-embedded-status--light",
+  adyenKycEmbeddedStatusLight,
   "adyen-kyc-embedded-status__icon": "adyen-kyc-embedded-status__icon",
-  "adyen-kyc-embedded-status__info": "adyen-kyc-embedded-status__info"
+  adyenKycEmbeddedStatusIcon,
+  "adyen-kyc-embedded-status__info": "adyen-kyc-embedded-status__info",
+  adyenKycEmbeddedStatusInfo
 };
+var OnboardingStatus = /* @__PURE__ */ ((OnboardingStatus2) => {
+  OnboardingStatus2["AWAITING_DATA"] = "AWAITING_DATA";
+  OnboardingStatus2["IN_REVIEW"] = "IN_REVIEW";
+  OnboardingStatus2["UNSUCCESSFUL"] = "UNSUCCESSFUL";
+  OnboardingStatus2["REJECTED"] = "REJECTED";
+  OnboardingStatus2["VERIFIED"] = "VERIFIED";
+  return OnboardingStatus2;
+})(OnboardingStatus || {});
 const statusToTag = (status) => {
   switch (status) {
     case OnboardingStatus.IN_REVIEW:
@@ -37974,8 +38211,8 @@ const EmbeddedStatus = ({
   return jsxs("button", {
     type: "button",
     className: cx(className, styles["adyen-kyc-embedded-status"], {
-      "adyen-kyc-embedded-status--loading": loading,
-      "adyen-kyc-embedded-status--light": light
+      [styles["adyen-kyc-embedded-status--loading"]]: loading,
+      [styles["adyen-kyc-embedded-status--light"]]: light
     }),
     onClick,
     ...props,
@@ -38037,6 +38274,66 @@ const EmbeddedStatus = ({
     })]
   });
 };
+function ContractingStatus({
+  legalEntityId,
+  onClick,
+  title,
+  subtitle = ""
+}) {
+  const {
+    getServiceAgreementStatus: getServiceAgreementStatus2,
+    getServiceAgreementAcceptanceInfos: getServiceAgreementAcceptanceInfos2
+  } = useComponentApi(legalEntityId);
+  const [isLoading, setIsLoading] = useState(true);
+  const [hasSignedAll, setHasSignedAll] = useState(false);
+  const getUnsigned = useCallback(async () => getServiceAgreementStatus2(legalEntityId), [getServiceAgreementStatus2, legalEntityId]);
+  const getSigned = useCallback(async () => getServiceAgreementAcceptanceInfos2(legalEntityId), [getServiceAgreementAcceptanceInfos2, legalEntityId]);
+  const getStatus = useCallback(async () => {
+    const [signedRes, unsignedRes] = await Promise.all([getSigned(), getUnsigned()]);
+    const signed = signedRes.data.map((d) => d.type);
+    const unsigned = unsignedRes.termsOfServiceTypes;
+    return signed.length !== 0 && unsigned.length === 0;
+  }, [getUnsigned, getSigned]);
+  useEffect(() => {
+    getStatus().then((allSigned) => {
+      setIsLoading(false);
+      setHasSignedAll(allSigned);
+    }).catch(() => {
+    });
+  });
+  const handleClick = () => {
+    onClick == null ? void 0 : onClick();
+  };
+  return hasSignedAll ? jsx(EmbeddedStatus, {
+    onClick,
+    title,
+    subtitle,
+    tagLabel: "complete",
+    loading: isLoading
+  }) : jsx(EmbeddedStatus, {
+    onClick,
+    actionButton: {
+      labelKey: "sign",
+      onClick: handleClick
+    },
+    title,
+    subtitle,
+    loading: isLoading
+  });
+}
+function ManageContractingComponent({
+  legalEntityId,
+  onClick
+}) {
+  const {
+    i18n
+  } = useI18nContext();
+  return jsx(ContractingStatus, {
+    legalEntityId,
+    title: i18n.get("serviceAgreements"),
+    onClick
+  });
+}
 function LegalEntityStatus({
   legalEntityId,
   onClick
@@ -38125,6 +38422,51 @@ function useInterval(callback, initialDelay = DEFAULT_POLLING_INTERVAL) {
   }, [timeoutId]);
   return timeoutId;
 }
+const Confirm = ({
+  onConfirm,
+  title,
+  confirmBtnLabel,
+  onClose
+}) => {
+  const {
+    i18n
+  } = useI18nContext();
+  const [isInFlight, setIsInFlight] = useState(false);
+  const handleConfirm = async () => {
+    setIsInFlight(true);
+    try {
+      await onConfirm();
+    } finally {
+      setIsInFlight(false);
+      onClose();
+    }
+  };
+  const modalHeader = jsx(Typography, {
+    variant: "title",
+    el: "h3",
+    className: "adyen-kyc-u-margin-top-8 adyen-kyc-u-margin-left-8",
+    children: title
+  });
+  const modalFooter = jsx(EmbeddedActionBar, {
+    right: jsxs(Fragment, {
+      children: [jsx(Button, {
+        label: i18n.get("cancel"),
+        onClick: onClose,
+        secondary: true
+      }), jsx(Button, {
+        label: confirmBtnLabel || i18n.get("confirm"),
+        onClick: handleConfirm,
+        critical: true,
+        disabled: isInFlight
+      })]
+    })
+  });
+  return jsx(Modal, {
+    header: modalHeader,
+    footer: modalFooter,
+    size: "small"
+  });
+};
 function ManageTransferInstrumentOverviewItemModal({
   status,
   transferInstrument,
@@ -38136,6 +38478,7 @@ function ManageTransferInstrumentOverviewItemModal({
   const {
     i18n
   } = useI18nContext();
+  const [confirmOpen, setConfirmOpen] = useState(false);
   const datasetUtils = datasetUtilities(i18n.locale);
   const isReviewInProgress = status === "PROCESSING";
   const showEditButton = status !== "ERROR" && !(transferInstrument == null ? void 0 : transferInstrument.bankAccount.trustedSource);
@@ -38192,14 +38535,23 @@ function ManageTransferInstrumentOverviewItemModal({
   };
   const modalHeader = jsx(Typography, {
     variant: "title-l",
+    el: "h3",
+    className: "adyen-kyc-manage-ti-overview-item-summary__header",
     children: i18n.get("bankAccount")
   });
+  const handleRemove = async () => {
+    await onRemove(transferInstrument.id);
+    onClose();
+  };
   const modalFooter = () => {
     if (!transferInstrument) return;
     const actions = jsxs(Fragment, {
-      children: [jsx(Remove, {
-        onRemove: async () => onRemove(transferInstrument.id),
-        isRemoveDisabled: isReviewInProgress
+      children: [jsx(Button, {
+        title: i18n.get("delete"),
+        icon: "bin",
+        secondary: true,
+        disabled: isReviewInProgress,
+        onClick: () => setConfirmOpen(true)
       }), showEditButton && jsx(Button, {
         label: i18n.get("edit"),
         onClick: () => onEdit(transferInstrument.id),
@@ -38210,28 +38562,35 @@ function ManageTransferInstrumentOverviewItemModal({
       right: actions
     });
   };
-  return jsx(Modal, {
-    header: modalHeader,
-    onClose: () => onClose(),
-    footer: modalFooter(),
-    children: !transferInstrument ? jsx(Loader, {}) : jsxs("div", {
-      className: "adyen-kyc-manage-ti-overview-item-summary",
-      children: [!!((_b = (_a = problems.BankAccount) == null ? void 0 : _a[transferInstrument.id]) == null ? void 0 : _b.verificationErrors) && jsx(VerificationErrorAlert, {
-        className: "adyen-kyc-manage-ti-overview-item-summary__error",
-        problems: (_c = problems.BankAccount) == null ? void 0 : _c[transferInstrument.id],
-        children: jsx(Button, {
-          className: "adyen-kyc-manage-ti-overview-item-summary__error-button",
-          label: i18n.get("editDetails"),
-          tertiary: true,
-          onClick: () => onEdit(transferInstrument.id)
-        })
-      }), getStructuredLists().map((listItems) => jsx(Card, {
-        className: "adyen-kyc-manage-ti-overview-item-summary__card",
-        children: jsx(StructuredList, {
-          items: listItems
-        })
-      }, listItems))]
-    })
+  return jsxs(Fragment, {
+    children: [jsx(Modal, {
+      header: modalHeader,
+      onClose,
+      footer: modalFooter(),
+      children: !transferInstrument ? jsx(Loader, {}) : jsxs("div", {
+        className: "adyen-kyc-manage-ti-overview-item-summary",
+        children: [!!((_b = (_a = problems.BankAccount) == null ? void 0 : _a[transferInstrument.id]) == null ? void 0 : _b.verificationErrors) && jsx(VerificationErrorAlert, {
+          className: "adyen-kyc-manage-ti-overview-item-summary__error",
+          problems: (_c = problems.BankAccount) == null ? void 0 : _c[transferInstrument.id],
+          children: jsx(Button, {
+            className: "adyen-kyc-manage-ti-overview-item-summary__error-button",
+            label: i18n.get("editDetails"),
+            tertiary: true,
+            onClick: () => onEdit(transferInstrument.id)
+          })
+        }), getStructuredLists().map((listItems) => jsx(Card, {
+          className: "adyen-kyc-manage-ti-overview-item-summary__card",
+          children: jsx(StructuredList, {
+            items: listItems
+          })
+        }, listItems))]
+      })
+    }), confirmOpen && jsx(Confirm, {
+      title: i18n.get("areYouSureYouWantToDeleteThisBankAccount"),
+      confirmBtnLabel: i18n.get("delete"),
+      onConfirm: handleRemove,
+      onClose: () => setConfirmOpen(false)
+    })]
   });
 }
 function ManageTransferInstrumentOverviewItem({
@@ -38285,6 +38644,9 @@ function ManageTransferInstrumentOverview({
   const {
     i18n
   } = useI18nContext();
+  const {
+    showToast
+  } = useToastContext();
   const {
     getTransferInstrument: getTransferInstrument2,
     deleteTransferInstrument: deleteTransferInstrument2
@@ -38307,6 +38669,10 @@ function ManageTransferInstrumentOverview({
       await deleteTransferInstrument2(transferInstrumentId);
       onRemove(transferInstrumentId);
     } catch (e) {
+      showToast({
+        label: i18n.get("thereWasAnErrorTryAgain"),
+        type: "error"
+      });
       logger$d.error(e);
     }
   };
@@ -40409,6 +40775,7 @@ const componentsMap = {
   onboardingDropinComponent: OnboardingDropinComponent,
   manageIndividualComponent: ManageIndividualComponent,
   createContractingComponent: CreateContractingComponent,
+  manageContractingComponent: ManageContractingComponent,
   viewVerificationStatusComponent: ViewVerificationStatusComponent,
   updateLegalEntityForHighExposureComponent: UpdateLegalEntityForHighExposure
 };
@@ -40865,7 +41232,7 @@ const ConfigurationApiProvider = ({
     isEmbeddedDropin,
     loadingContext
   } = authContext;
-  const sdkVersion = "3.28.1";
+  const sdkVersion = "3.29.0";
   useAnalytics({
     onUserEvent,
     legalEntityId: rootLegalEntityId,
@@ -41547,7 +41914,7 @@ const DebugModal = ({
   };
   const copyToClipboard = async () => {
     const toCopy = {
-      sdkVersion: "3.28.1",
+      sdkVersion: "3.29.0",
       experiments: Object.fromEntries(allExperimentsWithValues),
       settings: Object.fromEntries(allSettingsWithValues)
     };
@@ -41586,7 +41953,7 @@ const DebugModal = ({
       children: [jsxs("div", {
         className: "adyen-kyc-debug-modal__meta",
         children: [jsxs("span", {
-          children: ["SDK version: ", "3.28.1"]
+          children: ["SDK version: ", "3.29.0"]
         }), jsxs("span", {
           children: ["rootLegalEntityId: ", rootLegalEntityId]
         })]
@@ -42505,6 +42872,11 @@ const createContractingComponentSchema = {
     type: "boolean"
   }
 };
+const manageContractingComponentSchema = {
+  legalEntityId: {
+    type: "string"
+  }
+};
 const viewVerificationStatusComponentSchema = {
   legalEntityId: {
     type: "string",
@@ -42565,6 +42937,7 @@ const componentsSchemaMap = {
   createIndividualComponent: createIndividualComponentSchema,
   manageIndividualComponent: manageIndividualComponentSchema,
   createContractingComponent: createContractingComponentSchema,
+  manageContractingComponent: manageContractingComponentSchema,
   createTransferInstrumentComponent: createTransferInstrumentComponentSchema,
   viewVerificationStatusComponent: viewVerificationStatusComponentSchema,
   updateLegalEntityForHighExposureComponent: updateLegalEntityForHighExposureComponentSchema,