@adyen/kyc-components 2.28.0 → 2.29.1

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

@@ -2,8 +2,8 @@ import { useContext, useState, useCallback, useEffect, useMemo, useReducer, useR
 import { createContext, createElement, render } from "preact";
 import { sanitize } from "isomorphic-dompurify";
 import cx from "classnames";
+import { lazy, Suspense, useId, forwardRef, memo, useMemo as useMemo$1, useEffect as useEffect$1, useState as useState$1, useCallback as useCallback$1 } from "preact/compat";
 import { jsx, jsxs, Fragment } from "preact/jsx-runtime";
-import { useId, forwardRef, memo, useMemo as useMemo$1, useEffect as useEffect$1, useState as useState$1, useCallback as useCallback$1 } from "preact/compat";
 import { debounce, noop as noop$1, isEmpty as isEmpty$1, range } from "lodash";
 import OpenBankingSDK from "@adyen/openbankingsdk";
 import "@adyen/adyen-document-viewer/dist/adyen-document-viewer.min.css";
@@ -65,7 +65,7 @@ const contactDetails = "Contact Details";
 const uploadDocument = "Upload Document";
 const individualDetails = "Individual details";
 const last4DigitsOfSocialSecurityNumber = "Last 4 digits of Social Security Number (SSN)";
-const socialSecurityNumber9Digits = "Social Security Number (SSN)";
+const socialSecurityNumber = "Social Security Number (SSN)";
 const socialInsuranceNumber = "Social Insurance Number (SIN)";
 const codiceFiscale = "Codice fiscale";
 const personnummer = "Personnummer";
@@ -74,7 +74,7 @@ const nie = "NIE";
 const peselNumber = "PESEL number";
 const detCentralePersonregister = "Det Centrale Personregister (CPR)";
 const codNumericPersonal = "Cod Numeric Personal (CNP)";
-const cadastroDePessoasFisicas = "Cadastro de Pessoas Físicas (CFP)";
+const cadastroDePessoasFisicas = "Cadastro de Pessoas Físicas (CPF)";
 const invalidFormatExpects = "Invalid format. Expected format: %{format}";
 const invalidFormatForAuPassportNumber = "This isn't a valid Australian passport number. Expected format: 1-2 letters followed by 7 numbers.";
 const invalidFormatForNZPassportNumber = "Expected format should be 8-9 alphanumeric characters. For example: PA094043.";
@@ -302,6 +302,7 @@ const bankAccountNumber = "Account number";
 const iban = "IBAN";
 const swiftCode = "Swift code";
 const bic = "BIC";
+const bicSwift = "BIC / SWIFT";
 const bsbNumber = "BSB Number";
 const branchCode = "Branch code";
 const transitNumber = "Transit number";
@@ -343,8 +344,7 @@ const confirm = "Confirm";
 const goToDecisionMakers = "Go to list of decision-makers";
 const theSubmitWasSuccessful = "The submit was successful";
 const thereWasAnErrorTryAgain = "There was an error, please try again";
-const proofOfIdentityCard = "State-issued proof of identity card";
-const proofOfIdentityCardNumber = "Identity card number";
+const stateIssuedProofOfIdentityCard = "State-issued proof of identity card";
 const proofOfResidence = "Proof of residency";
 const proofOfNationalId = "Proof of national ID";
 const backToTaskList = "Back to task list";
@@ -700,13 +700,17 @@ const liRegistrationNumber = "Unternehmensnummer";
 const Mehrwertsteuernummer = "Mehrwertsteuernummer (MwST), Numéro de TVA, Numero dell’imposta sul valore aggiunto (IVA), VAT number";
 const enterNDigitsForExample = "Enter %{numDigits} digits. For example, %{example}";
 const enterNCharactersForExample = "Enter %{numChars} characters. For example, %{example}";
+const enterLastNDigitsForExample = "Enter the last %{numDigits} digits. For example, %{example}";
 const enterXToYDigitsForExample = "Enter %{minDigits} to %{maxDigits} digits. For example, %{example}";
+const enterXOrYDigitsForExample = "Enter %{xDigits} or %{yDigits} digits. For example, %{example}";
 const enterXToYCharactersForExample = "Enter %{minChars} to %{maxChars} characters. For example, %{example}";
+const enterXOrYCharactersForExample = "Enter %{xChars} or %{yChars} characters. For example, %{example}";
 const enterXToYCharactersWithAMixForExample = "Enter %{minChars} to %{maxChars} characters, with a mix of letters and numbers. For example, %{example}";
 const enterAMaximumOfNDigitsForExample = "Enter a maximum of %{maxDigits} digits. For example, %{example}";
 const enterAMaximumOfNMoreDigitsForExample = "Enter a maximum of %{maxDigits} more digits. For example, %{example}";
 const enterAMaximumOfNCharactersForExample = "Enter a maximum of %{maxChars} characters. For example, %{example}";
 const enterAMaximumOfNCharactersWithAMixForExample = "Enter a maximum of %{maxChars} characters, with a mix of letters and numbers. For example, %{example}";
+const enterNCharactersWithAMixForExample = "Enter %{numChars} characters, with a mix of letters and numbers. For example, %{example}";
 const enterNDigitsAndThen1LetterForExample = "Enter %{numDigits} digits and then 1 letter. For example, %{example}";
 const enter1LetterAndThenNDigitsForExample = "Enter 1 letter and then %{numDigits} digits. For example, %{example}";
 const enter1LetterAndThenXToYDigitsForExample = "Enter 1 letter and then %{minDigits} to %{maxDigits} digits. For example, %{example}";
@@ -1205,6 +1209,7 @@ const introductionScreenAccountDescriptionP2 = "This is the bank account you use
 const introductionScreenEpilogueTitle = "Why do we need this information?";
 const introductionScreenEpilogueDescriptionP1 = "We check all this information against official records to verify your identity and comply with financial regulations.";
 const introductionScreenEpilogueDescriptionP2 = "Your information will be used only for these purposes.";
+const oib = "OIB";
 const defaultTrans = {
   close,
   individual,
@@ -1255,7 +1260,7 @@ const defaultTrans = {
   uploadDocument,
   individualDetails,
   last4DigitsOfSocialSecurityNumber,
-  socialSecurityNumber9Digits,
+  socialSecurityNumber,
   socialInsuranceNumber,
   codiceFiscale,
   personnummer,
@@ -1492,6 +1497,7 @@ const defaultTrans = {
   iban,
   swiftCode,
   bic,
+  bicSwift,
   bsbNumber,
   branchCode,
   transitNumber,
@@ -1533,8 +1539,7 @@ const defaultTrans = {
   goToDecisionMakers,
   theSubmitWasSuccessful,
   thereWasAnErrorTryAgain,
-  proofOfIdentityCard,
-  proofOfIdentityCardNumber,
+  stateIssuedProofOfIdentityCard,
   proofOfResidence,
   proofOfNationalId,
   backToTaskList,
@@ -1897,13 +1902,17 @@ const defaultTrans = {
   Mehrwertsteuernummer,
   enterNDigitsForExample,
   enterNCharactersForExample,
+  enterLastNDigitsForExample,
   enterXToYDigitsForExample,
+  enterXOrYDigitsForExample,
   enterXToYCharactersForExample,
+  enterXOrYCharactersForExample,
   enterXToYCharactersWithAMixForExample,
   enterAMaximumOfNDigitsForExample,
   enterAMaximumOfNMoreDigitsForExample,
   enterAMaximumOfNCharactersForExample,
   enterAMaximumOfNCharactersWithAMixForExample,
+  enterNCharactersWithAMixForExample,
   enterNDigitsAndThen1LetterForExample,
   enter1LetterAndThenNDigitsForExample,
   enter1LetterAndThenXToYDigitsForExample,
@@ -2402,7 +2411,8 @@ const defaultTrans = {
   introductionScreenAccountDescriptionP2,
   introductionScreenEpilogueTitle,
   introductionScreenEpilogueDescriptionP1,
-  introductionScreenEpilogueDescriptionP2
+  introductionScreenEpilogueDescriptionP2,
+  oib
 };
 const FALLBACK_LOCALE = "en-US";
 const defaultTranslation = defaultTrans;
@@ -2712,6 +2722,7 @@ const formUtilities = (props, i18n) => ({
     return this.isRequiredField(field, showIfNotInRequiredFields) || this.isOptionalField(field);
   },
   isReadOnly: (field) => props.readOnly || (props.readOnlyFields ? props.readOnlyFields.includes(field) : false),
+  isObscured: (field) => props.obscuredFields ? props.obscuredFields.includes(field) : false,
   getVal: (val) => i18n.get(val),
   getErrorMessage: (field, errors, fieldProblems) => {
     var _a;
@@ -2811,10 +2822,6 @@ const mergeFieldMetadataIntoProps = (fieldName, metadata, otherProps) => {
   };
 };
 const MAX_LENGTH = 30;
-const getMaxLengthByFormatRuleset = (formattingRules, field) => {
-  var _a;
-  return ((_a = formattingRules[field]) == null ? void 0 : _a.maxlength) || MAX_LENGTH;
-};
 const getMaxLengthByFieldAndCountry = (formattingRules, field, country2, ignoreIfFormatterExists) => {
   var _a, _b, _c, _d;
   if (ignoreIfFormatterExists && ((_b = (_a = formattingRules[country2]) == null ? void 0 : _a[field]) == null ? void 0 : _b.formatter)) {
@@ -2823,64 +2830,8 @@ const getMaxLengthByFieldAndCountry = (formattingRules, field, country2, ignoreI
   const maxLength = (_d = (_c = formattingRules[country2]) == null ? void 0 : _c[field]) == null ? void 0 : _d.maxlength;
   return maxLength || MAX_LENGTH;
 };
-function mergeCountryBasedValidators(defaultValidatorsObj, countryBasedValidators, country2) {
-  if (!country2 || !countryBasedValidators[country2]) {
-    return defaultValidatorsObj;
-  }
-  const mergedValidators = {};
-  Object.entries(defaultValidatorsObj).forEach(([field, validatorsByField]) => {
-    const countryBasedFieldValidators = countryBasedValidators[country2][field];
-    if (!countryBasedFieldValidators) {
-      mergedValidators[field] = validatorsByField;
-    } else {
-      const defaultFieldValidatorsArray = !Array.isArray(validatorsByField) ? [validatorsByField] : [...validatorsByField];
-      const countryFieldValidatorsArray = !Array.isArray(countryBasedFieldValidators) ? [countryBasedFieldValidators] : [...countryBasedFieldValidators];
-      mergedValidators[field] = [...countryFieldValidatorsArray];
-      defaultFieldValidatorsArray.forEach((rule) => {
-        const defaultModesArr = rule.modes;
-        let modeArraysMatch = false;
-        countryFieldValidatorsArray.every((item) => {
-          modeArraysMatch = doArraysMatch(item.modes, defaultModesArr);
-          return !modeArraysMatch;
-        });
-        if (!modeArraysMatch) {
-          mergedValidators[field].unshift(rule);
-        }
-      });
-    }
-  });
-  Object.entries(countryBasedValidators[country2]).forEach(([field, validators]) => {
-    if (!mergedValidators[field]) {
-      mergedValidators[field] = validators;
-    }
-  });
-  return mergedValidators;
-}
-function mergeCountryBasedRulesets(defaultRuleset, countryBasedRuleset, country2) {
-  if (!country2 || !countryBasedRuleset[country2]) {
-    return defaultRuleset;
-  }
-  const mergedRuleset = {};
-  Object.entries(defaultRuleset).forEach(([field, ruleset]) => {
-    const countryBasedFieldRuleset = countryBasedRuleset[country2][field];
-    if (!countryBasedFieldRuleset) {
-      mergedRuleset[field] = ruleset;
-    } else {
-      mergedRuleset[field] = {
-        ...ruleset,
-        ...countryBasedFieldRuleset
-      };
-    }
-  });
-  Object.entries(countryBasedRuleset[country2]).forEach(([field, ruleset]) => {
-    if (!mergedRuleset[field]) {
-      mergedRuleset[field] = ruleset;
-    }
-  });
-  return mergedRuleset;
-}
-const isUndefinedOrNull = (input) => !!(input === void 0 || input === null);
-const isEmpty = (input) => !!(isUndefinedOrNull(input) || typeof input === "object" && Object.keys(input).length === 0 || typeof input === "string" && /^[\s]*$/.test(input));
+const isUndefinedOrNull = (input) => input === void 0 || input === null;
+const isEmpty = (input) => isUndefinedOrNull(input) || typeof input === "object" && Object.keys(input).length === 0 || typeof input === "string" && /^\s*$/.test(input);
 const isString = (input) => typeof input === "string" || input instanceof String;
 const hasText = (input) => isString(input) && !isEmpty(input);
 const SPECIAL_CHARS = "?\\-\\+_=!@#$%^&*(){}~<>\\[\\]\\/\\\\";
@@ -2891,21 +2842,90 @@ const exactLength = (input, length) => {
   }
   return input.length === length;
 };
-const lengthIsBetween = (input, minLength, maxLength) => (input == null ? void 0 : input.length) >= minLength && (input == null ? void 0 : input.length) <= maxLength;
+const lengthIsBetween = (input, minLength, maxLength) => Boolean(input && input.length >= minLength && input.length <= maxLength);
 const trimValWithOneSpace = (val) => val.trimStart().replace(/\s+/g, " ");
 const _button_component = "";
 const _link_component = "";
-const _icon = "";
+const Icon$1 = "";
+let suppressed = false;
+const consoleMethodsPrefixable = Object.freeze(["debug", "info", "log", "warn", "error", "trace"]);
+const stringSubstitutionRegex = /%([soOc]|(\.\d)?[dif])/;
+const createLogger = (namespace) => {
+  const methods = {};
+  consoleMethodsPrefixable.forEach((method) => {
+    methods[method] = (arg1, ...args) => {
+      if (!console[method] || suppressed)
+        return;
+      if (!namespace) {
+        console[method](arg1, ...args);
+      } else if (stringSubstitutionRegex.test(arg1)) {
+        console[method](`[${namespace}] ${arg1}`, ...args);
+      } else {
+        console[method](`[${namespace}]`, arg1, ...args);
+      }
+    };
+  });
+  return methods;
+};
+const icons = {
+  "arrow-left": lazy(() => import("./arrow-left-3d6cd330.mjs")),
+  "arrow-right": lazy(() => import("./arrow-right-994e40f8.mjs")),
+  bin: lazy(() => import("./bin-191739de.mjs")),
+  check: lazy(() => import("./check-b5a70376.mjs")),
+  checkmark: lazy(() => import("./checkmark-fd78da6f.mjs")),
+  "checkmark-small": lazy(() => import("./checkmark-small-bf41309f.mjs")),
+  "chevron-down": lazy(() => import("./chevron-down-df0a3ac6.mjs")),
+  "chevron-right": lazy(() => import("./chevron-right-23ff6e47.mjs")),
+  "chevron-up": lazy(() => import("./chevron-up-abfe0e90.mjs")),
+  company: lazy(() => import("./company-4f71e406.mjs")),
+  contract: lazy(() => import("./contract-5bc99018.mjs")),
+  "controlling-person": lazy(() => import("./controlling-person-88da578f.mjs")),
+  cross: lazy(() => import("./cross-c2431982.mjs")),
+  "decision-maker": lazy(() => import("./decision-maker-a2182544.mjs")),
+  document: lazy(() => import("./document-88abec41.mjs")),
+  download: lazy(() => import("./download-54b1a163.mjs")),
+  edit: lazy(() => import("./edit-e3629680.mjs")),
+  "field-error": lazy(() => import("./field-error-620e1903.mjs")),
+  "info-circle": lazy(() => import("./info-circle-3d2e7ba8.mjs")),
+  "light-bulb": lazy(() => import("./light-bulb-d403fe24.mjs")),
+  location: lazy(() => import("./location-e7c2a8f5.mjs")),
+  "more-horiz": lazy(() => import("./more-horiz-0ca4ec23.mjs")),
+  "new-document": lazy(() => import("./new-document-cfa14b7f.mjs")),
+  owners: lazy(() => import("./owners-a58a9f25.mjs")),
+  payout: lazy(() => import("./payout-575951ec.mjs")),
+  pci: lazy(() => import("./pci-f4b6e5f5.mjs")),
+  plus: lazy(() => import("./plus-25579839.mjs")),
+  remove: lazy(() => import("./remove-6a123f82.mjs")),
+  review: lazy(() => import("./review-14953b30.mjs")),
+  search: lazy(() => import("./search-3edfe795.mjs")),
+  signatory: lazy(() => import("./signatory-c8417fb2.mjs")),
+  store: lazy(() => import("./store-9fc075e6.mjs")),
+  trust: lazy(() => import("./trust-0e40337d.mjs")),
+  warning: lazy(() => import("./warning-bb000c6b.mjs")),
+  wrong: lazy(() => import("./wrong-652db543.mjs"))
+};
+const logger$t = createLogger("Icon");
 const Icon = ({
-  className = "",
+  className,
   name,
   testId
-}) => jsx("i", {
-  className: cx("adyen-kyc-icon", `adyen-kyc-icon-${name}`, className),
-  role: "img",
-  "aria-hidden": true,
-  "data-testid": testId
-});
+}) => {
+  const LazyLoadedIcon = icons[name];
+  if (!LazyLoadedIcon) {
+    logger$t.error(`No such icon: "${name}"`);
+    return null;
+  }
+  return jsx("span", {
+    className: cx("adyen-kyc-icon", `adyen-kyc-icon-${name}`, className),
+    role: "img",
+    "aria-hidden": true,
+    "data-testid": testId,
+    children: jsx(Suspense, {
+      fallback: null,
+      children: jsx(LazyLoadedIcon, {})
+    })
+  });
+};
 const Spinner$1 = "";
 const Spinner = ({
   inline = false,
@@ -3099,26 +3119,6 @@ function useFormRouterContext() {
   }
   return context;
 }
-let suppressed = false;
-const consoleMethodsPrefixable = Object.freeze(["debug", "info", "log", "warn", "error", "trace"]);
-const stringSubstitutionRegex = /%([soOc]|(\.\d)?[dif])/;
-const createLogger = (namespace) => {
-  const methods = {};
-  consoleMethodsPrefixable.forEach((method) => {
-    methods[method] = (arg1, ...args) => {
-      if (!console[method] || suppressed)
-        return;
-      if (!namespace) {
-        console[method](arg1, ...args);
-      } else if (stringSubstitutionRegex.test(arg1)) {
-        console[method](`[${namespace}] ${arg1}`, ...args);
-      } else {
-        console[method](`[${namespace}]`, arg1, ...args);
-      }
-    };
-  });
-  return methods;
-};
 const logger$s = createLogger("Link");
 const getIconClass = (icon, external) => {
   if (external) {
@@ -3292,7 +3292,7 @@ function getFormProps(props, innerFormId) {
     readOnlyFields: ((_g = props.readOnlyFields) == null ? void 0 : _g[innerFormId]) ?? [],
     requiredFields: ((_h = props.requiredFields) == null ? void 0 : _h[innerFormId]) ?? [],
     optionalFields: ((_i = props.optionalFields) == null ? void 0 : _i[innerFormId]) ?? [],
-    maskedFields: ((_j = props.maskedFields) == null ? void 0 : _j[innerFormId]) ?? [],
+    obscuredFields: ((_j = props.obscuredFields) == null ? void 0 : _j[innerFormId]) ?? [],
     verifyFields: ((_k = props.verifyFields) == null ? void 0 : _k[innerFormId]) ?? [],
     formVerificationErrors: ((_m = (_l = props.problems) == null ? void 0 : _l.verificationErrors) == null ? void 0 : _m[innerFormId]) ?? {},
     fieldValidationErrors: ((_o = (_n = props.problems) == null ? void 0 : _n.validationErrors) == null ? void 0 : _o[innerFormId]) ?? {},
@@ -3319,7 +3319,7 @@ function getFieldProps(props, innerFormFields) {
       masks: {},
       data: {},
       requiredFields: [],
-      maskedFields: [],
+      obscuredFields: [],
       optionalFields: [],
       readOnlyFields: [],
       verifyFields: [],
@@ -3347,8 +3347,8 @@ function getFieldProps(props, innerFormFields) {
       if ((_j = props.fieldValidationErrors) == null ? void 0 : _j[field]) {
         nestedFormProps.fieldValidationErrors[field] = props.fieldValidationErrors[field];
       }
-      if ((_k = props.maskedFields) == null ? void 0 : _k.includes(field)) {
-        nestedFormProps.maskedFields.push(field);
+      if ((_k = props.obscuredFields) == null ? void 0 : _k.includes(field)) {
+        nestedFormProps.obscuredFields.push(field);
       }
       if ((_l = props.validators) == null ? void 0 : _l[field]) {
         if (!(nestedFormProps == null ? void 0 : nestedFormProps.validators)) {
@@ -3426,7 +3426,7 @@ const processField = ({
   value = null,
   mode,
   defaultData,
-  maskedFields,
+  obscuredFields,
   fieldContext,
   formatters,
   staticValidate,
@@ -3435,7 +3435,7 @@ const processField = ({
   var _a, _b;
   const formatterFn = ((_a = formatters == null ? void 0 : formatters[key]) == null ? void 0 : _a.formatter) ? (_b = formatters[key]) == null ? void 0 : _b.formatter : formatters == null ? void 0 : formatters[key];
   const formattedValue = formatterFn && typeof formatterFn === "function" ? formatterFn(value, fieldContext) : value;
-  const shouldValidateField = !((maskedFields == null ? void 0 : maskedFields.includes(key)) && (defaultData == null ? void 0 : defaultData[key]) === value && !!(defaultData == null ? void 0 : defaultData[key]));
+  const shouldValidateField = !((obscuredFields == null ? void 0 : obscuredFields.includes(key)) && (defaultData == null ? void 0 : defaultData[key]) === value && !!(defaultData == null ? void 0 : defaultData[key]));
   if (shouldValidateField && value) {
     asyncValidate(key, fieldContext.state, mode);
   }
@@ -3454,7 +3454,7 @@ function init({
   schema,
   defaultData,
   fieldProblems,
-  maskedFields,
+  obscuredFields,
   formatters,
   staticValidate,
   asyncValidate
@@ -3466,7 +3466,7 @@ function init({
       mode: "blur",
       formatters,
       defaultData,
-      maskedFields,
+      obscuredFields,
       fieldContext: {
         state: {
           data: defaultData
@@ -3522,7 +3522,7 @@ function init({
     valid: {},
     errors: {},
     fieldProblems: {},
-    maskedFields
+    obscuredFields
   });
   return formData;
 }
@@ -3539,7 +3539,7 @@ function reducer({
     schema,
     selectedSchema,
     formValue,
-    maskedFields,
+    obscuredFields,
     fieldProblems,
     defaultData
   }) => {
@@ -3602,7 +3602,7 @@ function reducer({
           schema,
           defaultData,
           fieldProblems,
-          maskedFields,
+          obscuredFields,
           staticValidate,
           asyncValidate
         });
@@ -3639,7 +3639,7 @@ function reducer({
           value,
           mode,
           defaultData,
-          maskedFields,
+          obscuredFields,
           formatters,
           fieldContext: {
             state: state2
@@ -3702,7 +3702,7 @@ function reducer({
             value: state2.data[cur],
             mode: "blur",
             defaultData,
-            maskedFields,
+            obscuredFields,
             formatters,
             fieldContext: {
               state: state2
@@ -3834,7 +3834,7 @@ function useForm({
   rules: rules2,
   asyncRules,
   fieldProblems,
-  maskedFields,
+  obscuredFields,
   optionalFields,
   formatters,
   shouldValidate = false
@@ -3862,11 +3862,11 @@ function useForm({
     schema: getSchema,
     defaultData,
     fieldProblems,
-    maskedFields,
+    obscuredFields,
     formatters,
     staticValidate: triggerStaticValidation,
     asyncValidate: triggerAsyncValidation
-  }), [getSchema, defaultData, fieldProblems, maskedFields, formatters, triggerStaticValidation, triggerAsyncValidation]);
+  }), [getSchema, defaultData, fieldProblems, obscuredFields, formatters, triggerStaticValidation, triggerAsyncValidation]);
   const [state2, dispatch] = useReducer(getReducer(), getInitialData(), init);
   const isValid = useMemo(() => {
     var _a;
@@ -3916,17 +3916,17 @@ function useForm({
       value,
       mode,
       defaultData,
-      maskedFields
+      obscuredFields
     });
-  }, [defaultData, maskedFields, getTargetValue]);
+  }, [defaultData, obscuredFields, getTargetValue]);
   const triggerValidation = useCallback((selectedSchema) => {
     dispatch({
       type: "validateForm",
       selectedSchema,
       defaultData,
-      maskedFields
+      obscuredFields
     });
-  }, [defaultData, maskedFields]);
+  }, [defaultData, obscuredFields]);
   useEffect(() => {
     const newSchema = getRequiredFields(state2.data);
     if (!doArraysMatch(state2.schema, newSchema)) {
@@ -4756,12 +4756,9 @@ const SelectButtonContentSingle = ({
 }) => {
   const activeSingle = active.pop();
   return !showList || !filterable ? jsxs(Fragment, {
-    children: [(activeSingle == null ? void 0 : activeSingle.sprite) && jsx("svg", {
+    children: [(activeSingle == null ? void 0 : activeSingle.icon) && jsx("span", {
       className: "adyen-kyc-dropdown-button__icon",
-      role: "img",
-      children: jsx("use", {
-        href: activeSingle.sprite
-      })
+      children: activeSingle.icon
     }), isSearch && jsx(Icon, {
       name: "search",
       className: "adyen-kyc-dropdown-button-search__icon"
@@ -4883,20 +4880,10 @@ const SelectListItem = ({
     checked: selected,
     name: `adyen-kyc-dropdown-element__checkbox adyen-kyc-dropdown-element__checkbox--${item.id}`
   }) : children ? [children] : jsxs(Fragment, {
-    children: [!item.sprite ? item.icon && jsx("img", {
-      className: "adyen-kyc-dropdown-element__icon",
-      alt: item.name,
-      src: item.icon
-    }) : jsx("svg", {
+    children: [item.icon && jsx("span", {
       className: "adyen-kyc-dropdown-element__icon",
-      role: "img",
-      children: jsx("use", {
-        href: item.sprite
-      })
-    }), !item.description ? jsx("span", {
-      className: "adyen-kyc-dropdown-element__label",
-      children: item.name
-    }) : jsxs(Fragment, {
+      children: item.icon
+    }), item.description ? jsxs(Fragment, {
       children: [jsx("span", {
         className: "adyen-kyc-dropdown-element__label adl-u-font-weight-semi-bold",
         children: item.name
@@ -4904,6 +4891,9 @@ const SelectListItem = ({
         className: "adyen-kyc-dropdown-element-description__text",
         children: item.description
       })]
+    }) : jsx("span", {
+      className: "adyen-kyc-dropdown-element__label",
+      children: item.name
     })]
   })
 });
@@ -5204,7 +5194,308 @@ const Select = ({
     })]
   });
 };
-const logger$p = createLogger("CountryField");
+const Flag$1 = "";
+const isIntersectionObserverSupported = typeof IntersectionObserver === "function";
+function useIsElementVisible(ref, fallback = true) {
+  const [isOnScreen, setIsOnScreen] = useState(isIntersectionObserverSupported ? false : fallback);
+  const observerRef = useRef();
+  useEffect(() => {
+    if (!isIntersectionObserverSupported)
+      return;
+    observerRef.current = new IntersectionObserver(([entry]) => setIsOnScreen(entry.isIntersecting));
+  }, []);
+  useEffect(() => {
+    var _a;
+    if (!ref.current)
+      return;
+    (_a = observerRef.current) == null ? void 0 : _a.observe(ref.current);
+    return () => {
+      var _a2;
+      (_a2 = observerRef.current) == null ? void 0 : _a2.disconnect();
+    };
+  }, [ref]);
+  return isOnScreen;
+}
+const logger$p = createLogger("Flag");
+const flagImports = /* @__PURE__ */ Object.assign({
+  "../../../../assets/flags/ad.svg": () => import("./ad-e09b987a.mjs"),
+  "../../../../assets/flags/ae.svg": () => import("./ae-8ca1be27.mjs"),
+  "../../../../assets/flags/af.svg": () => import("./af-342e1bf5.mjs"),
+  "../../../../assets/flags/ag.svg": () => import("./ag-997e3f88.mjs"),
+  "../../../../assets/flags/ai.svg": () => import("./ai-402dc201.mjs"),
+  "../../../../assets/flags/al.svg": () => import("./al-38b31dad.mjs"),
+  "../../../../assets/flags/am.svg": () => import("./am-bc1403ea.mjs"),
+  "../../../../assets/flags/an.svg": () => import("./an-70336f96.mjs"),
+  "../../../../assets/flags/ao.svg": () => import("./ao-eedf3279.mjs"),
+  "../../../../assets/flags/aq.svg": () => import("./aq-2220e7e0.mjs"),
+  "../../../../assets/flags/ar.svg": () => import("./ar-87abe42d.mjs"),
+  "../../../../assets/flags/as.svg": () => import("./as-6e35c5ec.mjs"),
+  "../../../../assets/flags/at.svg": () => import("./at-4310d424.mjs"),
+  "../../../../assets/flags/au.svg": () => import("./au-50f94ba8.mjs"),
+  "../../../../assets/flags/aw.svg": () => import("./aw-97918c9f.mjs"),
+  "../../../../assets/flags/ax.svg": () => import("./ax-567f3585.mjs"),
+  "../../../../assets/flags/az.svg": () => import("./az-85dbb96d.mjs"),
+  "../../../../assets/flags/ba.svg": () => import("./ba-8afe4a33.mjs"),
+  "../../../../assets/flags/bb.svg": () => import("./bb-c4d79528.mjs"),
+  "../../../../assets/flags/bd.svg": () => import("./bd-0f87f359.mjs"),
+  "../../../../assets/flags/be.svg": () => import("./be-63be2126.mjs"),
+  "../../../../assets/flags/bf.svg": () => import("./bf-621f8737.mjs"),
+  "../../../../assets/flags/bg.svg": () => import("./bg-30061757.mjs"),
+  "../../../../assets/flags/bh.svg": () => import("./bh-a858ad79.mjs"),
+  "../../../../assets/flags/bi.svg": () => import("./bi-c08e68ba.mjs"),
+  "../../../../assets/flags/bj.svg": () => import("./bj-8e17226d.mjs"),
+  "../../../../assets/flags/bl.svg": () => import("./bl-b7b32ae6.mjs"),
+  "../../../../assets/flags/bm.svg": () => import("./bm-b728ab56.mjs"),
+  "../../../../assets/flags/bn.svg": () => import("./bn-c706c05b.mjs"),
+  "../../../../assets/flags/bo.svg": () => import("./bo-1fad8399.mjs"),
+  "../../../../assets/flags/br.svg": () => import("./br-11b9980d.mjs"),
+  "../../../../assets/flags/bs.svg": () => import("./bs-090f5bd7.mjs"),
+  "../../../../assets/flags/bt.svg": () => import("./bt-c56334d3.mjs"),
+  "../../../../assets/flags/bv.svg": () => import("./bv-570dcd11.mjs"),
+  "../../../../assets/flags/bw.svg": () => import("./bw-5de93ae1.mjs"),
+  "../../../../assets/flags/by.svg": () => import("./by-e2457131.mjs"),
+  "../../../../assets/flags/bz.svg": () => import("./bz-30bbd0de.mjs"),
+  "../../../../assets/flags/ca.svg": () => import("./ca-39c0e436.mjs"),
+  "../../../../assets/flags/cc.svg": () => import("./cc-ddc2a1db.mjs"),
+  "../../../../assets/flags/cd.svg": () => import("./cd-eab01270.mjs"),
+  "../../../../assets/flags/cf.svg": () => import("./cf-50f7241b.mjs"),
+  "../../../../assets/flags/cg.svg": () => import("./cg-e87aa981.mjs"),
+  "../../../../assets/flags/ch.svg": () => import("./ch-9637f347.mjs"),
+  "../../../../assets/flags/ci.svg": () => import("./ci-41814a2b.mjs"),
+  "../../../../assets/flags/ck.svg": () => import("./ck-60b0d769.mjs"),
+  "../../../../assets/flags/cl.svg": () => import("./cl-931fd7da.mjs"),
+  "../../../../assets/flags/cm.svg": () => import("./cm-55c02792.mjs"),
+  "../../../../assets/flags/cn.svg": () => import("./cn-1526dac5.mjs"),
+  "../../../../assets/flags/co.svg": () => import("./co-c7ada338.mjs"),
+  "../../../../assets/flags/cr.svg": () => import("./cr-bac1e451.mjs"),
+  "../../../../assets/flags/cu.svg": () => import("./cu-af98b602.mjs"),
+  "../../../../assets/flags/cv.svg": () => import("./cv-575fe55b.mjs"),
+  "../../../../assets/flags/cw.svg": () => import("./cw-6f1c60ce.mjs"),
+  "../../../../assets/flags/cx.svg": () => import("./cx-7687e3a9.mjs"),
+  "../../../../assets/flags/cy.svg": () => import("./cy-eeff5dbd.mjs"),
+  "../../../../assets/flags/cz.svg": () => import("./cz-24eff96c.mjs"),
+  "../../../../assets/flags/de.svg": () => import("./de-8e2b6f6c.mjs"),
+  "../../../../assets/flags/dj.svg": () => import("./dj-e0f41411.mjs"),
+  "../../../../assets/flags/dk.svg": () => import("./dk-a5073c43.mjs"),
+  "../../../../assets/flags/dm.svg": () => import("./dm-9a3ee195.mjs"),
+  "../../../../assets/flags/do.svg": () => import("./do-5aa635df.mjs"),
+  "../../../../assets/flags/dz.svg": () => import("./dz-7452e74d.mjs"),
+  "../../../../assets/flags/ec.svg": () => import("./ec-c68c940e.mjs"),
+  "../../../../assets/flags/ee.svg": () => import("./ee-1dbd9a40.mjs"),
+  "../../../../assets/flags/eg.svg": () => import("./eg-40f9b2b5.mjs"),
+  "../../../../assets/flags/eh.svg": () => import("./eh-51f4bae2.mjs"),
+  "../../../../assets/flags/er.svg": () => import("./er-61cda111.mjs"),
+  "../../../../assets/flags/es.svg": () => import("./es-78250575.mjs"),
+  "../../../../assets/flags/et.svg": () => import("./et-63dc8d1e.mjs"),
+  "../../../../assets/flags/fi.svg": () => import("./fi-e2d1f3df.mjs"),
+  "../../../../assets/flags/fj.svg": () => import("./fj-02f497c5.mjs"),
+  "../../../../assets/flags/fk.svg": () => import("./fk-56af40af.mjs"),
+  "../../../../assets/flags/fm.svg": () => import("./fm-0292f2ce.mjs"),
+  "../../../../assets/flags/fo.svg": () => import("./fo-5063373c.mjs"),
+  "../../../../assets/flags/fr.svg": () => import("./fr-fb20da2b.mjs"),
+  "../../../../assets/flags/fx.svg": () => import("./fx-ca4da212.mjs"),
+  "../../../../assets/flags/ga.svg": () => import("./ga-31f5afca.mjs"),
+  "../../../../assets/flags/gb.svg": () => import("./gb-4ae48840.mjs"),
+  "../../../../assets/flags/gd.svg": () => import("./gd-25e40717.mjs"),
+  "../../../../assets/flags/ge.svg": () => import("./ge-939c150e.mjs"),
+  "../../../../assets/flags/gf.svg": () => import("./gf-b8736c20.mjs"),
+  "../../../../assets/flags/gg.svg": () => import("./gg-4c532713.mjs"),
+  "../../../../assets/flags/gh.svg": () => import("./gh-7b187c5f.mjs"),
+  "../../../../assets/flags/gi.svg": () => import("./gi-e59b72be.mjs"),
+  "../../../../assets/flags/gl.svg": () => import("./gl-31e9b8e5.mjs"),
+  "../../../../assets/flags/gm.svg": () => import("./gm-975999b2.mjs"),
+  "../../../../assets/flags/gn.svg": () => import("./gn-3701984d.mjs"),
+  "../../../../assets/flags/gp.svg": () => import("./gp-40fbae20.mjs"),
+  "../../../../assets/flags/gq.svg": () => import("./gq-86021eca.mjs"),
+  "../../../../assets/flags/gr.svg": () => import("./gr-3b0c7597.mjs"),
+  "../../../../assets/flags/gs.svg": () => import("./gs-00bc8674.mjs"),
+  "../../../../assets/flags/gt.svg": () => import("./gt-05eb5f87.mjs"),
+  "../../../../assets/flags/gu.svg": () => import("./gu-497f9b0b.mjs"),
+  "../../../../assets/flags/gw.svg": () => import("./gw-b54f1365.mjs"),
+  "../../../../assets/flags/gy.svg": () => import("./gy-e917fca1.mjs"),
+  "../../../../assets/flags/hk.svg": () => import("./hk-ddd60484.mjs"),
+  "../../../../assets/flags/hm.svg": () => import("./hm-03a2df0b.mjs"),
+  "../../../../assets/flags/hn.svg": () => import("./hn-1748eed1.mjs"),
+  "../../../../assets/flags/hr.svg": () => import("./hr-6b1bd9c8.mjs"),
+  "../../../../assets/flags/ht.svg": () => import("./ht-13a1ab82.mjs"),
+  "../../../../assets/flags/hu.svg": () => import("./hu-81872148.mjs"),
+  "../../../../assets/flags/id.svg": () => import("./id-2c9c4235.mjs"),
+  "../../../../assets/flags/ie.svg": () => import("./ie-ef96fd76.mjs"),
+  "../../../../assets/flags/il.svg": () => import("./il-20c3ccd4.mjs"),
+  "../../../../assets/flags/im.svg": () => import("./im-eb7a7143.mjs"),
+  "../../../../assets/flags/in.svg": () => import("./in-67c16223.mjs"),
+  "../../../../assets/flags/io.svg": () => import("./io-9adeb690.mjs"),
+  "../../../../assets/flags/iq.svg": () => import("./iq-61ffc408.mjs"),
+  "../../../../assets/flags/ir.svg": () => import("./ir-bc3341c2.mjs"),
+  "../../../../assets/flags/is.svg": () => import("./is-7c19d0ff.mjs"),
+  "../../../../assets/flags/it.svg": () => import("./it-fa0dd04c.mjs"),
+  "../../../../assets/flags/je.svg": () => import("./je-a29e157d.mjs"),
+  "../../../../assets/flags/jm.svg": () => import("./jm-53f8ddb8.mjs"),
+  "../../../../assets/flags/jo.svg": () => import("./jo-89d49ef8.mjs"),
+  "../../../../assets/flags/jp.svg": () => import("./jp-f97d7972.mjs"),
+  "../../../../assets/flags/ke.svg": () => import("./ke-545eb9cb.mjs"),
+  "../../../../assets/flags/kg.svg": () => import("./kg-066a524e.mjs"),
+  "../../../../assets/flags/kh.svg": () => import("./kh-39620e7b.mjs"),
+  "../../../../assets/flags/ki.svg": () => import("./ki-900be23e.mjs"),
+  "../../../../assets/flags/km.svg": () => import("./km-b4e8c8ba.mjs"),
+  "../../../../assets/flags/kn.svg": () => import("./kn-8ec9ee75.mjs"),
+  "../../../../assets/flags/kp.svg": () => import("./kp-1cdc64be.mjs"),
+  "../../../../assets/flags/kr.svg": () => import("./kr-53eac37f.mjs"),
+  "../../../../assets/flags/kw.svg": () => import("./kw-c4347b38.mjs"),
+  "../../../../assets/flags/ky.svg": () => import("./ky-a104dc86.mjs"),
+  "../../../../assets/flags/kz.svg": () => import("./kz-d64ba71d.mjs"),
+  "../../../../assets/flags/la.svg": () => import("./la-04577eb2.mjs"),
+  "../../../../assets/flags/lb.svg": () => import("./lb-c2470dd0.mjs"),
+  "../../../../assets/flags/lc.svg": () => import("./lc-58fb8706.mjs"),
+  "../../../../assets/flags/li.svg": () => import("./li-c887f5b7.mjs"),
+  "../../../../assets/flags/lk.svg": () => import("./lk-d10f8746.mjs"),
+  "../../../../assets/flags/lr.svg": () => import("./lr-8422af8e.mjs"),
+  "../../../../assets/flags/ls.svg": () => import("./ls-bdcefbbc.mjs"),
+  "../../../../assets/flags/lt.svg": () => import("./lt-07e70fec.mjs"),
+  "../../../../assets/flags/lu.svg": () => import("./lu-b7c93ece.mjs"),
+  "../../../../assets/flags/lv.svg": () => import("./lv-97900494.mjs"),
+  "../../../../assets/flags/ly.svg": () => import("./ly-86ceab07.mjs"),
+  "../../../../assets/flags/ma.svg": () => import("./ma-21b21bdf.mjs"),
+  "../../../../assets/flags/mc.svg": () => import("./mc-f23b73f0.mjs"),
+  "../../../../assets/flags/md.svg": () => import("./md-82ed1b49.mjs"),
+  "../../../../assets/flags/me.svg": () => import("./me-c45ff596.mjs"),
+  "../../../../assets/flags/mf.svg": () => import("./mf-11563bd1.mjs"),
+  "../../../../assets/flags/mg.svg": () => import("./mg-f5f0546b.mjs"),
+  "../../../../assets/flags/mh.svg": () => import("./mh-06a860ed.mjs"),
+  "../../../../assets/flags/mk.svg": () => import("./mk-91356e13.mjs"),
+  "../../../../assets/flags/ml.svg": () => import("./ml-c3f2014e.mjs"),
+  "../../../../assets/flags/mm.svg": () => import("./mm-d138bd76.mjs"),
+  "../../../../assets/flags/mn.svg": () => import("./mn-9c4664d8.mjs"),
+  "../../../../assets/flags/mo.svg": () => import("./mo-54bd2fbe.mjs"),
+  "../../../../assets/flags/mp.svg": () => import("./mp-796516e8.mjs"),
+  "../../../../assets/flags/mq.svg": () => import("./mq-3511a92a.mjs"),
+  "../../../../assets/flags/mr.svg": () => import("./mr-a4b18b6d.mjs"),
+  "../../../../assets/flags/ms.svg": () => import("./ms-91e4dcef.mjs"),
+  "../../../../assets/flags/mt.svg": () => import("./mt-9b58b6a6.mjs"),
+  "../../../../assets/flags/mu.svg": () => import("./mu-2307760c.mjs"),
+  "../../../../assets/flags/mv.svg": () => import("./mv-32c9699b.mjs"),
+  "../../../../assets/flags/mw.svg": () => import("./mw-2b9505ac.mjs"),
+  "../../../../assets/flags/mx.svg": () => import("./mx-98a49b74.mjs"),
+  "../../../../assets/flags/my.svg": () => import("./my-217f9384.mjs"),
+  "../../../../assets/flags/mz.svg": () => import("./mz-92e1e39c.mjs"),
+  "../../../../assets/flags/na.svg": () => import("./na-3c30775f.mjs"),
+  "../../../../assets/flags/nc.svg": () => import("./nc-c80aff50.mjs"),
+  "../../../../assets/flags/ne.svg": () => import("./ne-b38208ab.mjs"),
+  "../../../../assets/flags/nf.svg": () => import("./nf-780a37dd.mjs"),
+  "../../../../assets/flags/ng.svg": () => import("./ng-f5ea4118.mjs"),
+  "../../../../assets/flags/ni.svg": () => import("./ni-60b41460.mjs"),
+  "../../../../assets/flags/nl.svg": () => import("./nl-975a8624.mjs"),
+  "../../../../assets/flags/no.svg": () => import("./no-952bf512.mjs"),
+  "../../../../assets/flags/np.svg": () => import("./np-5135aa90.mjs"),
+  "../../../../assets/flags/nr.svg": () => import("./nr-cecf1f05.mjs"),
+  "../../../../assets/flags/nu.svg": () => import("./nu-c1ad2dc9.mjs"),
+  "../../../../assets/flags/nz.svg": () => import("./nz-70a6e29f.mjs"),
+  "../../../../assets/flags/om.svg": () => import("./om-e5c99d1e.mjs"),
+  "../../../../assets/flags/pa.svg": () => import("./pa-0e401aff.mjs"),
+  "../../../../assets/flags/pe.svg": () => import("./pe-823d3b3f.mjs"),
+  "../../../../assets/flags/pf.svg": () => import("./pf-5c60fe59.mjs"),
+  "../../../../assets/flags/pg.svg": () => import("./pg-71e8aaec.mjs"),
+  "../../../../assets/flags/ph.svg": () => import("./ph-52f55ac4.mjs"),
+  "../../../../assets/flags/pk.svg": () => import("./pk-372b07db.mjs"),
+  "../../../../assets/flags/pl.svg": () => import("./pl-2c472f58.mjs"),
+  "../../../../assets/flags/pm.svg": () => import("./pm-2195603b.mjs"),
+  "../../../../assets/flags/pn.svg": () => import("./pn-ec73a623.mjs"),
+  "../../../../assets/flags/pr.svg": () => import("./pr-8f159ad6.mjs"),
+  "../../../../assets/flags/ps.svg": () => import("./ps-34dd64b7.mjs"),
+  "../../../../assets/flags/pt.svg": () => import("./pt-b210cd4c.mjs"),
+  "../../../../assets/flags/pw.svg": () => import("./pw-a474545d.mjs"),
+  "../../../../assets/flags/py.svg": () => import("./py-e271f15f.mjs"),
+  "../../../../assets/flags/qa.svg": () => import("./qa-a7ad70ed.mjs"),
+  "../../../../assets/flags/re.svg": () => import("./re-a1440f32.mjs"),
+  "../../../../assets/flags/ro.svg": () => import("./ro-8a071708.mjs"),
+  "../../../../assets/flags/rs.svg": () => import("./rs-f3ea0f97.mjs"),
+  "../../../../assets/flags/ru.svg": () => import("./ru-edd59839.mjs"),
+  "../../../../assets/flags/rw.svg": () => import("./rw-df210dff.mjs"),
+  "../../../../assets/flags/sa.svg": () => import("./sa-18c28dc4.mjs"),
+  "../../../../assets/flags/sb.svg": () => import("./sb-35c0ab8d.mjs"),
+  "../../../../assets/flags/sc.svg": () => import("./sc-82eb7101.mjs"),
+  "../../../../assets/flags/sd.svg": () => import("./sd-dc5fb244.mjs"),
+  "../../../../assets/flags/se.svg": () => import("./se-0413b6f1.mjs"),
+  "../../../../assets/flags/sg.svg": () => import("./sg-8ff78597.mjs"),
+  "../../../../assets/flags/sh.svg": () => import("./sh-7b636341.mjs"),
+  "../../../../assets/flags/si.svg": () => import("./si-2c09bba0.mjs"),
+  "../../../../assets/flags/sj.svg": () => import("./sj-8aff2627.mjs"),
+  "../../../../assets/flags/sk.svg": () => import("./sk-8da1fee7.mjs"),
+  "../../../../assets/flags/sl.svg": () => import("./sl-92cb9116.mjs"),
+  "../../../../assets/flags/sm.svg": () => import("./sm-6fd64a6a.mjs"),
+  "../../../../assets/flags/sn.svg": () => import("./sn-57e8c34b.mjs"),
+  "../../../../assets/flags/so.svg": () => import("./so-f2f0ac03.mjs"),
+  "../../../../assets/flags/sr.svg": () => import("./sr-7869b748.mjs"),
+  "../../../../assets/flags/ss.svg": () => import("./ss-8e9c79ca.mjs"),
+  "../../../../assets/flags/st.svg": () => import("./st-6b3e911c.mjs"),
+  "../../../../assets/flags/sv.svg": () => import("./sv-922ba5ea.mjs"),
+  "../../../../assets/flags/sx.svg": () => import("./sx-c078bfd1.mjs"),
+  "../../../../assets/flags/sy.svg": () => import("./sy-995ec1ee.mjs"),
+  "../../../../assets/flags/sz.svg": () => import("./sz-da33c6e8.mjs"),
+  "../../../../assets/flags/tc.svg": () => import("./tc-1a465526.mjs"),
+  "../../../../assets/flags/td.svg": () => import("./td-a7ff3830.mjs"),
+  "../../../../assets/flags/tf.svg": () => import("./tf-c71eed4a.mjs"),
+  "../../../../assets/flags/tg.svg": () => import("./tg-613f7f5a.mjs"),
+  "../../../../assets/flags/th.svg": () => import("./th-f517ca34.mjs"),
+  "../../../../assets/flags/tj.svg": () => import("./tj-b99ac64f.mjs"),
+  "../../../../assets/flags/tk.svg": () => import("./tk-c0dfeac1.mjs"),
+  "../../../../assets/flags/tl.svg": () => import("./tl-35cc3595.mjs"),
+  "../../../../assets/flags/tm.svg": () => import("./tm-0deecc32.mjs"),
+  "../../../../assets/flags/tn.svg": () => import("./tn-190a49a0.mjs"),
+  "../../../../assets/flags/to.svg": () => import("./to-790cac18.mjs"),
+  "../../../../assets/flags/tr.svg": () => import("./tr-1db5a437.mjs"),
+  "../../../../assets/flags/tt.svg": () => import("./tt-85ae901c.mjs"),
+  "../../../../assets/flags/tv.svg": () => import("./tv-9f2b4198.mjs"),
+  "../../../../assets/flags/tw.svg": () => import("./tw-74aa27b3.mjs"),
+  "../../../../assets/flags/tz.svg": () => import("./tz-2a5cf5e6.mjs"),
+  "../../../../assets/flags/ua.svg": () => import("./ua-9fedceaa.mjs"),
+  "../../../../assets/flags/ug.svg": () => import("./ug-1a8fee80.mjs"),
+  "../../../../assets/flags/um.svg": () => import("./um-d774b142.mjs"),
+  "../../../../assets/flags/us.svg": () => import("./us-20ac3d88.mjs"),
+  "../../../../assets/flags/uy.svg": () => import("./uy-c22e1eb1.mjs"),
+  "../../../../assets/flags/uz.svg": () => import("./uz-f8be4086.mjs"),
+  "../../../../assets/flags/va.svg": () => import("./va-d1f00296.mjs"),
+  "../../../../assets/flags/vc.svg": () => import("./vc-0a06f1c2.mjs"),
+  "../../../../assets/flags/ve.svg": () => import("./ve-3bc33c40.mjs"),
+  "../../../../assets/flags/vg.svg": () => import("./vg-3ad787bf.mjs"),
+  "../../../../assets/flags/vi.svg": () => import("./vi-5a78bf74.mjs"),
+  "../../../../assets/flags/vn.svg": () => import("./vn-50e78ae2.mjs"),
+  "../../../../assets/flags/vu.svg": () => import("./vu-72d9304c.mjs"),
+  "../../../../assets/flags/wf.svg": () => import("./wf-8cdbeff9.mjs"),
+  "../../../../assets/flags/ws.svg": () => import("./ws-745fc88c.mjs"),
+  "../../../../assets/flags/ye.svg": () => import("./ye-f4eaca91.mjs"),
+  "../../../../assets/flags/yt.svg": () => import("./yt-93635c9a.mjs"),
+  "../../../../assets/flags/za.svg": () => import("./za-42d70d0b.mjs"),
+  "../../../../assets/flags/zm.svg": () => import("./zm-571a963f.mjs"),
+  "../../../../assets/flags/zw.svg": () => import("./zw-6cf765c3.mjs"),
+  "../../../../assets/flags/zz.svg": () => import("./zz-067ccc58.mjs")
+});
+const getLazyLoadedSvgComponent = (country2) => {
+  const importForCountry = flagImports[`../../../../assets/flags/${country2.toLowerCase()}.svg`];
+  if (!importForCountry) {
+    logger$p.error(`No flag available for ${country2}`);
+    return void 0;
+  }
+  return lazy(importForCountry);
+};
+const Flag = ({
+  country: country2
+}) => {
+  const containerRef = useRef(null);
+  const isVisible = useIsElementVisible(containerRef);
+  const placeholder = jsx("span", {
+    className: "adyen-kyc-flag__placeholder"
+  });
+  const LazyLoadedSvgComponent = isVisible ? getLazyLoadedSvgComponent(country2) : void 0;
+  return jsx("span", {
+    ref: containerRef,
+    className: "adyen-kyc-flag__container",
+    children: jsx(Suspense, {
+      fallback: placeholder,
+      children: LazyLoadedSvgComponent ? jsx(LazyLoadedSvgComponent, {}) : placeholder
+    })
+  });
+};
 const COUNTRY_FIELD = ["country"];
 function CountryField({
   data,
@@ -5220,19 +5511,15 @@ function CountryField({
   const {
     i18n
   } = useI18nContext();
-  const {
-    loadFlags: loadFlags2
-  } = useConfigurationApi();
   const {
     dataset: countriesFromApi
   } = useDataset(datasetIdentifier.country);
-  useEffect(() => {
-    loadFlags2().catch(logger$p.error);
-  }, [loadFlags2]);
-  const countries = countriesFromApi.filter((country2) => allowedCountries ? allowedCountries.includes(country2.id) : true).map((item) => ({
+  const countries = useMemo(() => countriesFromApi.filter((country2) => allowedCountries ? allowedCountries.includes(country2.id) : true).map((item) => ({
     ...item,
-    sprite: `#adl-flag-${item.id.toLowerCase()}`
-  }));
+    icon: jsx(Flag, {
+      country: item.id
+    })
+  })), [allowedCountries, countriesFromApi]);
   return jsx(Field, {
     name: "country",
     label: (labels2 == null ? void 0 : labels2.country) || i18n.get("country"),
@@ -5844,6 +6131,10 @@ const displayValueToPureValue = (displayValue, mask) => {
   const stripPattern = cachedStripPatterns.get(mask) ?? makeStripPattern(mask);
   return displayValue.replaceAll(stripPattern, "");
 };
+const isValueObscured = (value) => {
+  var _a;
+  return typeof value === "string" && !!((_a = value.match(/[*]{1,}/)) == null ? void 0 : _a.length);
+};
 const getAvailableInputTokens = (tokens) => {
   const availableTokens = [];
   for (const token of tokens) {
@@ -5882,11 +6173,17 @@ const getEagerSuffix = (tokens) => {
   return suffix;
 };
 const getPotentialForMoreOptionalInput = (tokens) => tokens.some((token) => token.type === "input" && token.optional);
-const matchAgainstMask = (pureValue, mask) => {
+const matchAgainstMask = (pureValue, mask, acceptObscuredValue = false) => {
   let tokensToProcess = [...mask.tokens];
   let charsToProcess = pureValue;
   let charIndex = 0;
   let displayValue = "";
+  if (acceptObscuredValue && isValueObscured(pureValue)) {
+    return {
+      outcome: "obscureCorrect",
+      displayValue: pureValue
+    };
+  }
   const shiftChars = (increment) => {
     charIndex += increment;
     charsToProcess = charsToProcess.slice(increment);
@@ -5995,7 +6292,8 @@ const MaskedInputText = ({
   readonly = false,
   disabled = false,
   formatGuidance,
-  classNameModifiers
+  classNameModifiers,
+  acceptObscuredValue = false
 }) => {
   const hasExistingData = !isEmpty(value);
   const [isFocused, setIsFocused] = useState(false);
@@ -6028,8 +6326,8 @@ const MaskedInputText = ({
         outcome: "partialCorrect",
         displayValue: pureValue
       };
-    return matchAgainstMask(transformOnType ? transformOnType(pureValue) : pureValue, mask);
-  }, [mask, transformOnType]);
+    return matchAgainstMask(transformOnType ? transformOnType(pureValue) : pureValue, mask, acceptObscuredValue);
+  }, [mask, transformOnType, acceptObscuredValue]);
   const displayValueToPure = useCallback((displayValue2) => {
     if (!mask)
       return displayValue2;
@@ -6174,6 +6472,11 @@ const alphanumericInputs = (length, optional = false) => makeArrayOfRepeatedObje
   allow: /[\dA-Za-z]/,
   optional
 });
+const customInputs = (length, regex, optional = false) => makeArrayOfRepeatedObjects(length, {
+  type: "input",
+  allow: regex,
+  optional
+});
 const makeMask = (...tokens) => ({
   tokens
 });
@@ -6631,49 +6934,49 @@ const businessRegistrationNumberPatterns = {
   }
 };
 const CountryIdNumberPatterns = {
-  [CountryCodes.Brazil]: /(^\d{3}\.\d{3}\.\d{3}-\d{2}$)|(^\d{2}\.\d{3}\.\d{3}\/\d{4}-\d{2}$)/,
+  [CountryCodes.Brazil]: /^\d{11}$/,
   [CountryCodes.Canada]: /^\d{9}$/,
-  [CountryCodes.Denmark]: /(^\d{6}-\d{4}$)/,
+  [CountryCodes.Croatia]: /^\d{11}$/,
+  [CountryCodes.Denmark]: /^\d{10}$/,
   [CountryCodes.Italy]: /^[A-Z]{6}[0-9]{2}[ABCDEHLMPRST][0-9]{2}[A-Z][0-9]{3}[A-Z]$/,
   [CountryCodes.Poland]: /^\d{11}$/,
   [CountryCodes.Romania]: /^\d{13}$/,
-  [CountryCodes.Singapore]: /^[a-zA-Z0-9]{9,10}$/,
-  [CountryCodes.Spain]: /(^[KL]?\d{7,8}[A-Z]$)|(^[MXYZ]\d{7}[A-Z]$)/,
-  [CountryCodes.Sweden]: /(^\d{6}-\d{4}$)|(^\d{8}-\d{4}$)/,
-  [CountryCodes.UnitedStates]: /^\d{4}$/,
-  US9: /^\d{9}$/
-};
-const customPatternsPerIdNumberType = {
+  [CountryCodes.Singapore]: /^[A-Z][0-9]{6}[A-Z]$/,
   [CountryCodes.Spain]: {
-    dni: /(^[KL]?\d{7,8}[A-Z]$)/,
-    nie: /(^[MXYZ]\d{7}[A-Z]$)/
+    dni: /(^[KL]?\d{8}[A-Z]$)/,
+    nie: /(^[MXYZ]\d{7,8}[A-Z]$)/
+  },
+  [CountryCodes.Sweden]: /^\d{10}$|^\d{12}$/,
+  [CountryCodes.UnitedStates]: {
+    ssn: /^\d{9}$/,
+    ssnLastFour: /^\d{4}$/
   }
 };
 const DriversLicenseCardNumberPatterns = {
-  [CountryCodes.NewZealand]: /^[\d]{3}$/
+  [CountryCodes.NewZealand]: /^[\d]{3}$/,
+  [CountryCodes.Australia]: /^[A-Z0-9]{6,10}$/
 };
 const DriversLicenseNumberPatterns = {
-  [CountryCodes.Australia]: /^[A-Za-z\d]{6,11}$/,
-  [CountryCodes.HongKong]: /^[A-Z]{1}[A-Z0-9]{7}$/,
-  [CountryCodes.NewZealand]: /^[A-Za-z]{2}[\d]{6}$/
+  [CountryCodes.Australia]: /^[A-Za-z0-9]{6,11}$/,
+  [CountryCodes.HongKong]: /^[A-Z0-9]{8}$/,
+  [CountryCodes.NewZealand]: /^[A-Z]{2}[0-9]{6}$/
 };
 const PassportNumberPatterns = {
   [CountryCodes.Australia]: /^[A-Z]{1,2}\d{7}$/,
-  [CountryCodes.HongKong]: /^(?=.{9}$)[A-Z]{1,2}\d{6}[A-Z0-9]{1,2}$/,
-  [CountryCodes.NewZealand]: /[A-Za-z0-9]{8,9}/
+  [CountryCodes.HongKong]: /^[A-Z]{1,2}\d{6}[A-Z0-9]{1,2}$/,
+  [CountryCodes.NewZealand]: /[A-Z]{2}[0-9]{6,7}/
 };
 const ProofOfIdentityCardPatterns = {
-  [CountryCodes.Australia]: /^[A-Za-z\d]{6,10}$/,
   [CountryCodes.HongKong]: /^[A-Z]{1,2}[0-9]{6}[0-9A]$/
 };
 const validatePatternOnBlur = (pattern) => ({
   modes: ["blur"],
   validate: (val) => !!val && pattern.test(val)
 });
-const defaultFieldMetadata$3 = {
+const defaultFieldMetadata$8 = {
   label: "registrationNumber"
 };
-const defaultFieldConfig$3 = {
+const defaultFieldConfig$8 = {
   [CountryCodes.Australia]: {
     label: "australianBusinessNumberAcn",
     mask: businessRegistrationNumberMasks[CountryCodes.Australia].default,
@@ -7326,7 +7629,7 @@ const defaultFieldConfig$3 = {
 const businessRegistrationNumberFields = ["registrationNumber", "exemptedFromRegistrationNumber"];
 function BusinessRegistrationNumber(props) {
   var _a;
-  const fieldConfig = props.fieldConfig ?? defaultFieldConfig$3;
+  const fieldConfig = props.fieldConfig ?? defaultFieldConfig$8;
   const {
     i18n
   } = useI18nContext();
@@ -7342,7 +7645,7 @@ function BusinessRegistrationNumber(props) {
   const metadata = resolveFieldMetadata(fieldConfig[country2], {
     companyType: companyType2,
     registrationNumberType
-  }, defaultFieldMetadata$3);
+  }, defaultFieldMetadata$8);
   const mergedProps = mergeFieldMetadataIntoProps("registrationNumber", metadata, {
     requiredFields: schema
   });
@@ -7570,7 +7873,7 @@ function AccordionItem({
   subTitle = "",
   expandIconPlacement = Placement.Left,
   iconPlacement = Placement.Left,
-  icon = "",
+  icon,
   onOpen = noop,
   onClose = noop
 }) {
@@ -7828,6 +8131,32 @@ const individualIdNumberOptions = {
     name: "nie"
   }]
 };
+const additionallIdNumberOptions = {
+  [CountryCodes.NewZealand]: [{
+    id: "driversLicense",
+    name: "driversLicense"
+  }, {
+    id: "passport",
+    name: "passportNumber"
+  }],
+  [CountryCodes.HongKong]: [{
+    id: "proofOfIdentityCard",
+    name: "stateIssuedProofOfIdentityCard"
+  }, {
+    id: "driversLicense",
+    name: "driversLicense"
+  }, {
+    id: "passport",
+    name: "passportNumber"
+  }],
+  [CountryCodes.Australia]: [{
+    id: "driversLicense",
+    name: "driversLicense"
+  }, {
+    id: "passport",
+    name: "passportNumber"
+  }]
+};
 const taxIdNumberOptions = {
   [CountryCodes.Denmark]: [{
     id: "momsregistreringsnummerCVR",
@@ -7855,7 +8184,7 @@ const taxIdNumberOptions = {
     name: "employerIdentificationNumber"
   }, {
     id: "ssn",
-    name: "socialSecurityNumber9Digits",
+    name: "socialSecurityNumber",
     applicableOnlyFor: [CompanyTypesValue.SOLE_PROPRIETORSHIP]
   }, {
     id: "ssnLastFour",
@@ -7904,7 +8233,7 @@ function CompanyRegistrationNumberTypeSelector({
 }
 const inferCompanyRegistrationNumberType = (registrationNumber2, country2, companyType2) => {
   const optionsForCountry = companyRegistrationNumberOptions[country2];
-  const metadataFn = defaultFieldConfig$3[country2];
+  const metadataFn = defaultFieldConfig$8[country2];
   if (!optionsForCountry || !metadataFn || typeof metadataFn !== "function")
     return void 0;
   for (const option of optionsForCountry) {
@@ -7920,10 +8249,10 @@ const inferCompanyRegistrationNumberType = (registrationNumber2, country2, compa
     }
   }
 };
-const defaultFieldMetadata$2 = {
+const defaultFieldMetadata$7 = {
   label: "taxId"
 };
-const defaultFieldConfig$2 = {
+const defaultFieldConfig$7 = {
   [CountryCodes.Canada]: {
     label: "businessNumber",
     validators: validatePatternOnBlur(/^\d{9}$/),
@@ -8002,7 +8331,7 @@ const defaultFieldConfig$2 = {
     switch (taxIdNumberType) {
       case "ssn":
         return {
-          label: "socialSecurityNumber9Digits",
+          label: "socialSecurityNumber",
           validators: validatePatternOnBlur(/^\d{9}$/),
           mask: {
             mask: makeMask(...numericInputs(9))
@@ -8052,10 +8381,10 @@ const defaultFieldConfig$2 = {
     validators: validatePatternOnBlur(/^\d{12}$/)
   }
 };
-const defaultFieldMetadata$1 = {
+const defaultFieldMetadata$6 = {
   label: "vatNumber"
 };
-const defaultFieldConfig$1 = {
+const defaultFieldConfig$6 = {
   [CountryCodes.Austria]: {
     label: "UST-ID",
     validators: validatePatternOnBlur(/^ATU\d{8}$/),
@@ -8684,7 +9013,7 @@ const defaultFieldConfig$1 = {
 };
 const inferTaxIdNumberType = (taxId2, country2) => {
   const optionsForCountry = taxIdNumberOptions[country2];
-  const metadataFn = defaultFieldConfig$1[country2] ?? defaultFieldConfig$2[country2];
+  const metadataFn = defaultFieldConfig$6[country2] ?? defaultFieldConfig$7[country2];
   if (!optionsForCountry || !metadataFn || typeof metadataFn !== "function")
     return void 0;
   for (const option of optionsForCountry) {
@@ -8740,11 +9069,11 @@ function TaxId(props) {
     fieldValidationErrors,
     dataStoreId,
     taxIdNumberType,
-    fieldConfig = defaultFieldConfig$2
+    fieldConfig = defaultFieldConfig$7
   } = props;
   const metadata = resolveFieldMetadata(fieldConfig[country2], {
     taxIdNumberType
-  }, defaultFieldMetadata$2);
+  }, defaultFieldMetadata$7);
   const mergedProps = mergeFieldMetadataIntoProps("taxId", metadata, props);
   const {
     i18n
@@ -8859,12 +9188,12 @@ function VatNumber(props) {
     country: country2,
     fieldValidationErrors,
     dataStoreId,
-    fieldConfig = defaultFieldConfig$1,
+    fieldConfig = defaultFieldConfig$6,
     vatNumberType
   } = props;
   const metadata = resolveFieldMetadata(fieldConfig[country2], {
     vatNumberType
-  }, defaultFieldMetadata$1);
+  }, defaultFieldMetadata$6);
   const mergedProps = mergeFieldMetadataIntoProps("vatNumber", metadata, props);
   const {
     i18n
@@ -11272,19 +11601,6 @@ function FieldContainer(props) {
   }
   return renderField(fieldName);
 }
-function useIsElementVisible(element) {
-  const [isIntersecting, setIntersecting] = useState(false);
-  useEffect(() => {
-    if (element) {
-      const observer = new IntersectionObserver(([entry]) => setIntersecting(entry.isIntersecting));
-      observer.observe(element);
-      return () => {
-        observer.disconnect();
-      };
-    }
-  }, [element]);
-  return isIntersecting;
-}
 const logger$l = createLogger("SearchAddress");
 const SearchAddress = ({
   data,
@@ -11305,7 +11621,7 @@ const SearchAddress = ({
   const [searchText, setSearchText] = useState(null);
   const [showSearchList, setShowSearchList] = useState(false);
   const searchBoxRef = useRef(null);
-  const isVisible = useIsElementVisible(searchBoxRef.current);
+  const isVisible = useIsElementVisible(searchBoxRef);
   const canAutoFillKompanyAddress = kompanyAddress && searchText !== kompanyAddress && addressType === "registrationAddress";
   useEffect(() => {
     setSearchText(kompanyAddress);
@@ -11860,7 +12176,7 @@ function Address(props) {
     formatters: addressFormatters,
     rules: rules2,
     fieldProblems: fieldValidationErrorsProp,
-    maskedFields: []
+    obscuredFields: []
   });
   const formUtils = formUtilities({
     ...props,
@@ -12013,12 +12329,12 @@ function Address(props) {
           addressType,
           kompanyAddress
         }), jsxs("div", {
-          className: "adyen-kyc-search-address--location",
+          className: "adyen-kyc-search-address--below",
           children: [jsxs("span", {
-            className: "adyen-kyc-search-address--location-country",
+            className: "adyen-kyc-search-address--below-location",
             children: [jsx(Icon, {
               name: "location"
-            }), " ", datasetUtils.getCountryName(dataProp.country)]
+            }), datasetUtils.getCountryName(dataProp.country)]
           }), showAddAddressButton && jsx(Button, {
             showAsLink: true,
             testId: "addAddressManuallyBtn",
@@ -12104,7 +12420,7 @@ function RegistrationAddressComponent(props) {
     schema: ["operationalAddressIsSame"],
     defaultData: data,
     rules: validators || registrationAddressValidationRules,
-    maskedFields: [],
+    obscuredFields: [],
     optionalFields
   });
   const formUtils = formUtilities(props, i18n);
@@ -12645,7 +12961,7 @@ function isTransferInstrument(account) {
   return account.bankAccount !== void 0;
 }
 const isInstantVerifiedAccount = (account) => Boolean(isTransferInstrument(account) ? account.bankAccount.trustedSource : account.trustedSource);
-const getMaskedAccountNumber = ({
+const getObscuredAccountNumber = ({
   accountIdentifier,
   realLastFour
 }) => realLastFour ? `*******${realLastFour}` : accountIdentifier;
@@ -12813,55 +13129,6 @@ const updateTaxInformation = ({
   }
   return updatedEntity;
 };
-function cleanNonNumbers(value) {
-  return value.replace(/[^0-9]/g, "").trim();
-}
-function maskCPF(value) {
-  return value.replace(/\W/gi, "").replace(/(\d{3})(?!$)/g, "$1.").replace(/(.{11}).(\d{1,2})$/g, "$1-$2");
-}
-function maskCNPJ(value) {
-  return value.replace(/^(\d{2})(\d{3})(\d{3})?(\d{4})?(\d{1,2})?$/g, (match, g1, g2, g3, g4 = "", g5 = "") => `${g1}.${g2}.${g3}/${g4}${g5.length ? `-${g5}` : ""}`);
-}
-function formatBrazilSSN(value) {
-  if (!value || typeof value !== "string")
-    return "";
-  const cleanValue = cleanNonNumbers(value);
-  const formattedValue = cleanValue.length > 11 ? maskCNPJ(cleanValue) : maskCPF(cleanValue);
-  return formattedValue;
-}
-function formatDenmarkCPR(value) {
-  if (!value || typeof value !== "string")
-    return "";
-  const cleanValue = cleanNonNumbers(value);
-  return cleanValue.replace(/^(\d{6})(\d{4})/g, (match, g1, g2) => `${g1}-${g2}`);
-}
-function formatSwedenPersonnummer(value) {
-  if (!value || typeof value !== "string")
-    return "";
-  const cleanValue = cleanNonNumbers(value);
-  if (cleanValue.length > 10) {
-    return cleanValue.replace(/^(\d{8})(\d{4})$/g, (match, g1, g2) => `${g1}-${g2}`);
-  }
-  return cleanValue.replace(/^(\d{6})(\d{4})/g, (match, g1, g2) => `${g1}-${g2}`);
-}
-const validatePerIdNumberType = (input, idNumberType, fallbackCountryCode = null) => {
-  var _a, _b;
-  const countryCode = fallbackCountryCode || ((input || "").toUpperCase().match(/^[A-Z]{2}/) || [])[0];
-  if (!input || !hasText(input) || input.length < 3) {
-    return false;
-  }
-  if (countryCode in customPatternsPerIdNumberType) {
-    return input ? !!((_b = (_a = customPatternsPerIdNumberType == null ? void 0 : customPatternsPerIdNumberType[countryCode]) == null ? void 0 : _a[idNumberType]) == null ? void 0 : _b.test(input)) : false;
-  }
-  return false;
-};
-const formattedCountries = [CountryCodes.Denmark, CountryCodes.Sweden];
-const stripCountryIdFormat = (value, country2) => {
-  if (value && formattedCountries.includes(country2)) {
-    return cleanNonNumbers(value);
-  }
-  return value;
-};
 const mandatoryApiFields = {
   INDIVIDUAL: ["personalDetails.firstName", "personalDetails.lastName", "personalDetails.residencyCountry"],
   DECISIONMAKER: ["personalDetails.firstName", "personalDetails.lastName", "personalDetails.residencyCountry", "personalDetails.role", "personalDetails.jobTitle"],
@@ -12870,7 +13137,7 @@ const mandatoryApiFields = {
   SOLE_PROPRIETORSHIP: ["solePropNameAndCountry.legalCompanyName", "solePropNameAndCountry.country"],
   TRUST: ["trustRegistrationDetails.legalName", "trustRegistrationDetails.country"]
 };
-const individualMaskedFields = ["personalDetails.idNumber", "personalDetails.idNumberExempt"];
+const individualObscuredFields = ["personalDetails.idNumber", "personalDetails.idNumberExempt"];
 const individualBaseMapping = {
   "personalDetails.firstName": "individual.name.firstName",
   "personalDetails.lastName": "individual.name.lastName",
@@ -13168,7 +13435,7 @@ const adjustIdentificationData = (data, apiData) => {
   } = data;
   const identificationData = {
     ...apiData,
-    number: stripCountryIdFormat(idNumber2, residencyCountry2),
+    number: idNumber2,
     type: getIdentityTypeToApiIdentityTypeMap(data)[typeOfIdentity2] ?? "nationalIdNumber"
   };
   switch (typeOfIdentity2) {
@@ -15129,273 +15396,463 @@ const ContactDetailsComp = memo(ContactDetailsComponent, (prevProps, nextProps)
 ContactDetailsComponent.defaultProps = {
   data: {}
 };
-const IdentityNumber$1 = "";
-const CHECKCHARACTER_ODD_VALUE = {
-  0: 1,
-  1: 0,
-  2: 5,
-  3: 7,
-  4: 9,
-  5: 13,
-  6: 15,
-  7: 17,
-  8: 19,
-  9: 21,
-  A: 1,
-  B: 0,
-  C: 5,
-  D: 7,
-  E: 9,
-  F: 13,
-  G: 15,
-  H: 17,
-  I: 19,
-  J: 21,
-  K: 2,
-  L: 4,
-  M: 18,
-  N: 20,
-  O: 11,
-  P: 3,
-  Q: 6,
-  R: 8,
-  S: 12,
-  T: 14,
-  U: 16,
-  V: 10,
-  W: 22,
-  X: 25,
-  Y: 24,
-  Z: 23
-};
-const CHECKCHARACTER_EVEN_VALUE = {
-  0: 0,
-  1: 1,
-  2: 2,
-  3: 3,
-  4: 4,
-  5: 5,
-  6: 6,
-  7: 7,
-  8: 8,
-  9: 9,
-  A: 0,
-  B: 1,
-  C: 2,
-  D: 3,
-  E: 4,
-  F: 5,
-  G: 6,
-  H: 7,
-  I: 8,
-  J: 9,
-  K: 10,
-  L: 11,
-  M: 12,
-  N: 13,
-  O: 14,
-  P: 15,
-  Q: 16,
-  R: 17,
-  S: 18,
-  T: 19,
-  U: 20,
-  V: 21,
-  W: 22,
-  X: 23,
-  Y: 24,
-  Z: 25
-};
-function validCheckCharacter(input, calculationInput) {
-  if (!/^[A-Z]$/.test(input)) {
-    return false;
-  }
-  let total = 0;
-  for (let i = 0; i < 15; i += 1) {
-    const set = i % 2 === 1 ? CHECKCHARACTER_EVEN_VALUE : CHECKCHARACTER_ODD_VALUE;
-    const token = calculationInput.substring(i, i + 1);
-    const value = set[token];
-    if (value == null) {
-      return true;
-    }
-    total = (total + value) % 26;
-  }
-  return total >= 0 && total <= 26 && "ABCDEFGHIJKLMNOPQRSTUVWXYZ".charAt(total) === input;
-}
-const createErrorMessageObject = (format, idType) => ({
-  key: "validationPleaseEnterAValidIdNumberWithFormat",
-  values: {
-    format,
-    idType
-  }
-});
-const countryIdNumberFormatters = {
+const IdentityNumber = "";
+const defaultFieldMetadata$5 = {
+  label: "idNumber"
+};
+const defaultFieldConfig$5 = {
   [CountryCodes.Brazil]: {
-    idNumber: {
-      formatter: formatBrazilSSN,
-      maxlength: 18
-    }
-  },
-  [CountryCodes.Denmark]: {
-    idNumber: {
-      formatter: formatDenmarkCPR,
-      maxlength: 11
-    }
-  },
-  [CountryCodes.Sweden]: {
-    idNumber: {
-      formatter: formatSwedenPersonnummer,
-      maxlength: 13
+    label: "cadastroDePessoasFisicas",
+    mask: {
+      mask: makeMask(...numericInputs(3), ...nonInputs(" . "), ...numericInputs(3), ...nonInputs(" . "), ...numericInputs(3), ...nonInputs(" - "), ...numericInputs(2))
+    },
+    validators: validatePatternOnBlur(CountryIdNumberPatterns[CountryCodes.Brazil]),
+    guidanceText: {
+      key: "enterNDigitsForExample",
+      values: {
+        numDigits: "11",
+        example: "231.002.999-00"
+      }
     }
   },
-  [CountryCodes.UnitedStates]: {
-    idNumber: {
-      maxlength: 4
+  [CountryCodes.Canada]: {
+    label: "socialInsuranceNumber",
+    mask: {
+      mask: makeMask(...numericInputs(3), spacer, ...numericInputs(3), spacer, ...numericInputs(3))
+    },
+    validators: validatePatternOnBlur(CountryIdNumberPatterns[CountryCodes.Canada]),
+    guidanceText: {
+      key: "enterNDigitsForExample",
+      values: {
+        numDigits: "9",
+        example: "046 454 286"
+      }
     }
   },
-  US9: {
-    idNumber: {
-      maxlength: 9
+  [CountryCodes.Croatia]: {
+    label: "oib",
+    mask: {
+      mask: makeMask(...numericInputs(11))
+    },
+    validators: validatePatternOnBlur(CountryIdNumberPatterns[CountryCodes.Croatia]),
+    guidanceText: {
+      key: "enterNDigitsForExample",
+      values: {
+        numDigits: "11",
+        example: "94577403194"
+      }
     }
-  }
-};
-const IdNumberValidationRules = {
-  idNumber: [{
-    validate: (value) => !!value,
-    modes: ["blur"],
-    errorMessage: "fieldIsRequired"
-  }]
-};
-const countryIdNumberValidationRules = {
-  [CountryCodes.Brazil]: {
-    idNumber: [{
-      validate: (idNumber2) => idNumber2 ? CountryIdNumberPatterns.BR.test(idNumber2) : false,
-      modes: ["blur"],
-      errorMessage: "invalidFormatIdentityNumberBR"
-    }]
-  },
-  [CountryCodes.Canada]: {
-    idNumber: [{
-      validate: (idNumber2) => idNumber2 ? CountryIdNumberPatterns.CA.test(idNumber2) : false,
-      modes: ["blur"],
-      errorMessage: "invalidFormatIdentityNumberCA"
-    }]
   },
   [CountryCodes.Denmark]: {
-    idNumber: [{
-      validate: (idNumber2) => idNumber2 ? CountryIdNumberPatterns.DK.test(idNumber2) : false,
-      modes: ["blur"],
-      errorMessage: "invalidFormatIdentityNumberDK"
-    }]
+    label: "detCentralePersonregister",
+    mask: {
+      mask: makeMask(...numericInputs(6), ...nonInputs(" - "), ...numericInputs(4))
+    },
+    validators: validatePatternOnBlur(CountryIdNumberPatterns[CountryCodes.Denmark]),
+    guidanceText: {
+      key: "enterNDigitsForExample",
+      values: {
+        numDigits: "10",
+        example: "010111-1113"
+      }
+    }
   },
   [CountryCodes.Italy]: {
-    idNumber: [{
-      validate: (idNumber2) => idNumber2 ? CountryIdNumberPatterns.IT.test(idNumber2) && validCheckCharacter(idNumber2.substring(15, 16), idNumber2.substring(0, 15)) : false,
-      modes: ["blur"],
-      errorMessage: "invalidFormatIdentityNumberIT"
-    }]
+    label: "codiceFiscale",
+    mask: {
+      mask: makeMask(...alphaInputs(6), ...numericInputs(2), ...customInputs(1, /^[ABCDEHLMPRST]$/), ...numericInputs(2), ...alphaInputs(1), ...numericInputs(3), ...alphaInputs(1)),
+      transformOnType: uppercase
+    },
+    validators: validatePatternOnBlur(CountryIdNumberPatterns[CountryCodes.Italy]),
+    guidanceText: {
+      key: "enterNCharactersWithAMixForExample",
+      values: {
+        numChars: "16",
+        example: "YULSQG40E60L271T"
+      }
+    }
   },
   [CountryCodes.Poland]: {
-    idNumber: [{
-      validate: (idNumber2) => idNumber2 ? CountryIdNumberPatterns.PL.test(idNumber2) : false,
-      modes: ["blur"],
-      errorMessage: "invalidFormatIdentityNumberPL"
-    }]
-  },
-  [CountryCodes.Romania]: {
-    idNumber: [{
-      validate: (idNumber2) => idNumber2 ? CountryIdNumberPatterns.RO.test(idNumber2) : false,
-      modes: ["blur"],
-      errorMessage: "invalidFormatIdentityNumberRO"
-    }]
-  },
-  [CountryCodes.Singapore]: {
-    idNumber: [{
-      validate: (idNumber2) => idNumber2 ? CountryIdNumberPatterns.SG.test(idNumber2) : false,
-      modes: ["blur"],
-      errorMessage: "invalidFormatIdentityNumberSG"
-    }]
-  },
-  [CountryCodes.Spain]: {
-    idNumber: [{
-      validate: (idNumber2) => idNumber2 ? CountryIdNumberPatterns.ES.test(idNumber2) : false,
-      modes: ["blur"],
-      errorMessage: "invalidFormatIdentityNumberES"
-    }]
-  },
-  [CountryCodes.Sweden]: {
-    idNumber: [{
-      validate: (idNumber2) => idNumber2 ? CountryIdNumberPatterns.SE.test(idNumber2) : false,
-      modes: ["blur"],
-      errorMessage: "invalidFormatIdentityNumberSE"
-    }]
-  },
-  [CountryCodes.UnitedStates]: {
-    idNumber: [{
-      validate: (idNumber2) => idNumber2 ? CountryIdNumberPatterns.US.test(idNumber2) : false,
-      modes: ["blur"],
-      errorMessage: "invalidFormatIdentityNumberUS"
-    }]
-  },
-  US9: {
-    idNumber: [{
-      validate: (idNumber2) => idNumber2 ? CountryIdNumberPatterns.US9.test(idNumber2) : false,
-      modes: ["blur"],
-      errorMessage: "invalidFormatIdentityNumberUS9"
-    }]
-  }
-};
-const idNumberCustomValidationRules = {
-  [CountryCodes.Spain]: {
-    dni: {
-      idNumber: [{
-        validate: (idNumber2) => validatePerIdNumberType(idNumber2, "dni", CountryCodes.Spain),
-        modes: ["blur"],
-        errorMessage: createErrorMessageObject("L0000000J", "DNI")
-      }]
+    label: "peselNumber",
+    mask: {
+      mask: makeMask(...numericInputs(11))
     },
-    nie: {
-      idNumber: [{
-        validate: (idNumber2) => validatePerIdNumberType(idNumber2, "nie", CountryCodes.Spain),
-        modes: ["blur"],
-        errorMessage: createErrorMessageObject("M0000000L", "NIE")
-      }]
+    validators: validatePatternOnBlur(CountryIdNumberPatterns[CountryCodes.Poland]),
+    guidanceText: {
+      key: "enterNDigitsForExample",
+      values: {
+        numDigits: "11",
+        example: "23012224757"
+      }
+    }
+  },
+  [CountryCodes.PuertoRico]: ({
+    idNumberType
+  }) => {
+    switch (idNumberType) {
+      case "ssn":
+        return {
+          label: "socialSecurityNumber",
+          mask: {
+            mask: makeMask(...numericInputs(3), ...nonInputs(" - "), ...numericInputs(2), ...nonInputs(" - "), ...numericInputs(4))
+          },
+          validators: validatePatternOnBlur(CountryIdNumberPatterns[CountryCodes.UnitedStates].ssn),
+          guidanceText: {
+            key: "enterNDigitsForExample",
+            values: {
+              numDigits: "9",
+              example: "123-12-1234"
+            }
+          }
+        };
+      case "ssnLastFour":
+      default:
+        return {
+          label: "socialSecurityNumber",
+          mask: {
+            mask: makeMask(...nonInputs("***"), ...nonInputs(" - "), ...nonInputs("**"), ...nonInputs(" - "), ...numericInputs(4))
+          },
+          validators: validatePatternOnBlur(CountryIdNumberPatterns[CountryCodes.UnitedStates].ssnLastFour),
+          guidanceText: {
+            key: "enterLastNDigitsForExample",
+            values: {
+              numDigits: "4",
+              example: "***-**-1234"
+            }
+          }
+        };
+    }
+  },
+  [CountryCodes.Romania]: {
+    label: "codNumericPersonal",
+    mask: {
+      mask: makeMask(...numericInputs(13))
+    },
+    validators: validatePatternOnBlur(CountryIdNumberPatterns[CountryCodes.Romania]),
+    guidanceText: {
+      key: "enterNDigitsForExample",
+      values: {
+        numDigits: "13",
+        example: "8001011234567"
+      }
+    }
+  },
+  [CountryCodes.Singapore]: {
+    label: "nric",
+    mask: {
+      mask: makeMask(...alphaInputs(1), ...numericInputs(6), ...alphaInputs(1)),
+      transformOnType: uppercase
+    },
+    validators: validatePatternOnBlur(CountryIdNumberPatterns[CountryCodes.Singapore]),
+    guidanceText: {
+      key: "enterNCharactersWithAMixForExample",
+      values: {
+        numChars: "8",
+        example: "T0123456J"
+      }
+    }
+  },
+  [CountryCodes.Spain]: ({
+    idNumberType
+  }) => {
+    switch (idNumberType) {
+      case "dni":
+        return {
+          label: "dni",
+          mask: {
+            mask: makeMask(...customInputs(1, /^[KL]$/, true), ...numericInputs(8), ...alphaInputs(1)),
+            transformOnType: uppercase
+          },
+          validators: validatePatternOnBlur(CountryIdNumberPatterns[CountryCodes.Spain].dni),
+          guidanceText: {
+            key: "enterXToYCharactersWithAMixForExample",
+            values: {
+              minChars: "9",
+              maxChars: "10",
+              example: "12345678A or L12345678A"
+            }
+          }
+        };
+      case "nie":
+      default:
+        return {
+          label: "nie",
+          mask: {
+            mask: makeMask(...customInputs(1, /^[MXYZ]$/), ...numericInputs(7), ...numericInputs(1, true), ...alphaInputs(1)),
+            transformOnType: uppercase
+          },
+          validators: validatePatternOnBlur(CountryIdNumberPatterns[CountryCodes.Spain].nie),
+          guidanceText: {
+            key: "enterXToYCharactersWithAMixForExample",
+            values: {
+              minChars: "9",
+              maxChars: "10",
+              example: "X12345678A or Z6527153N"
+            }
+          }
+        };
+    }
+  },
+  [CountryCodes.Sweden]: {
+    label: "personnummer",
+    mask: {
+      mask: makeMask(...numericInputs(6), ...numericInputs(2, true), ...nonInputs(" - "), ...numericInputs(4))
+    },
+    validators: validatePatternOnBlur(CountryIdNumberPatterns[CountryCodes.Sweden]),
+    guidanceText: {
+      key: "enterXOrYDigitsForExample",
+      values: {
+        xDigits: "10",
+        yDigits: "12",
+        example: "640823-3234 or 19640823-3234"
+      }
+    }
+  },
+  [CountryCodes.UnitedStates]: ({
+    idNumberType
+  }) => {
+    switch (idNumberType) {
+      case "ssn":
+        return {
+          label: "socialSecurityNumber",
+          mask: {
+            mask: makeMask(...numericInputs(3), ...nonInputs(" - "), ...numericInputs(2), ...nonInputs(" - "), ...numericInputs(4))
+          },
+          validators: validatePatternOnBlur(CountryIdNumberPatterns[CountryCodes.UnitedStates].ssn),
+          guidanceText: {
+            key: "enterNDigitsForExample",
+            values: {
+              numDigits: "9",
+              example: "123-12-1234"
+            }
+          }
+        };
+      case "ssnLastFour":
+      default:
+        return {
+          label: "socialSecurityNumber",
+          mask: {
+            mask: makeMask(...nonInputs("***"), ...nonInputs(" - "), ...nonInputs("**"), ...nonInputs(" - "), ...numericInputs(4))
+          },
+          validators: validatePatternOnBlur(CountryIdNumberPatterns[CountryCodes.UnitedStates].ssnLastFour),
+          guidanceText: {
+            key: "enterLastNDigitsForExample",
+            values: {
+              numDigits: "4",
+              example: "***-**-1234"
+            }
+          }
+        };
+    }
+  },
+  [CountryCodes.NewZealand]: ({
+    idNumberType
+  }) => {
+    switch (idNumberType) {
+      case "passport":
+        return {
+          label: "passportNumber",
+          mask: {
+            mask: makeMask(...alphaInputs(2), ...numericInputs(6), ...numericInputs(1, true)),
+            transformOnType: uppercase
+          },
+          validators: validatePatternOnBlur(PassportNumberPatterns[CountryCodes.NewZealand]),
+          guidanceText: {
+            key: "enterXToYCharactersWithAMixForExample",
+            values: {
+              minChars: "8",
+              maxChars: "9",
+              example: "RA000750"
+            }
+          }
+        };
+      case "driversLicense":
+      default:
+        return {
+          label: "driversLicense",
+          mask: {
+            mask: makeMask(...alphaInputs(2), ...numericInputs(6)),
+            transformOnType: uppercase
+          },
+          validators: validatePatternOnBlur(DriversLicenseNumberPatterns[CountryCodes.NewZealand]),
+          guidanceText: {
+            key: "enterNCharactersWithAMixForExample",
+            values: {
+              numChars: "8",
+              example: "KA111112"
+            }
+          }
+        };
+    }
+  },
+  [CountryCodes.HongKong]: ({
+    idNumberType
+  }) => {
+    switch (idNumberType) {
+      case "proofOfIdentityCard":
+        return {
+          label: "hkid",
+          mask: {
+            mask: makeMask(...alphaInputs(1), ...alphaInputs(1, true), ...numericInputs(6), ...nonInputs("("), ...customInputs(1, /^[0-9A]$/), ...nonInputs(")")),
+            transformOnType: uppercase
+          },
+          validators: validatePatternOnBlur(ProofOfIdentityCardPatterns[CountryCodes.HongKong]),
+          guidanceText: {
+            key: "enterXToYCharactersWithAMixForExample",
+            values: {
+              minChars: "8",
+              maxChars: "9",
+              example: "Z683365(5) or AB123456(A)"
+            }
+          }
+        };
+      case "passport":
+        return {
+          label: "passportNumber",
+          mask: {
+            mask: makeMask(...alphaInputs(1), ...alphaInputs(1, true), ...numericInputs(6), ...alphanumericInputs(1), ...alphanumericInputs(1, true)),
+            transformOnType: uppercase
+          },
+          validators: validatePatternOnBlur(PassportNumberPatterns[CountryCodes.HongKong]),
+          guidanceText: {
+            key: "enterXToYCharactersWithAMixForExample",
+            values: {
+              minChars: "8",
+              maxChars: "10",
+              example: "H12345678"
+            }
+          }
+        };
+      case "driversLicense":
+      default:
+        return {
+          label: "driversLicense",
+          mask: {
+            mask: makeMask(...alphanumericInputs(7), spacer, ...alphanumericInputs(1))
+          },
+          validators: validatePatternOnBlur(DriversLicenseNumberPatterns[CountryCodes.HongKong]),
+          guidanceText: {
+            key: "enterNCharactersForExample",
+            values: {
+              numChars: "8",
+              example: "A123452 0"
+            }
+          }
+        };
+    }
+  },
+  [CountryCodes.Australia]: ({
+    idNumberType
+  }) => {
+    switch (idNumberType) {
+      case "passport":
+        return {
+          label: "passportNumber",
+          mask: {
+            mask: makeMask(...alphaInputs(1), ...alphaInputs(1, true), ...numericInputs(7)),
+            transformOnType: uppercase
+          },
+          validators: validatePatternOnBlur(PassportNumberPatterns[CountryCodes.Australia]),
+          guidanceText: {
+            key: "enterXToYCharactersWithAMixForExample",
+            values: {
+              minChars: "8",
+              maxChars: "9",
+              example: "RA0123456"
+            }
+          }
+        };
+      case "driversLicense":
+      default:
+        return {
+          label: "driversLicense",
+          mask: {
+            mask: makeMask(...alphanumericInputs(6), ...alphanumericInputs(5, true)),
+            transformOnType: uppercase
+          },
+          validators: validatePatternOnBlur(DriversLicenseNumberPatterns[CountryCodes.Australia]),
+          guidanceText: {
+            key: "enterXToYCharactersWithAMixForExample",
+            values: {
+              minChars: "6",
+              maxChars: "11",
+              example: "1314159 or GN7073"
+            }
+          }
+        };
+    }
+  }
+};
+const licenseCardNumberDefaultMetadata = {
+  label: "licenseCardNumber"
+};
+const licenseCardNumberDefaultConfig = {
+  [CountryCodes.NewZealand]: {
+    label: "licenceVersionNumber",
+    mask: {
+      mask: makeMask(...numericInputs(3))
+    },
+    validators: validatePatternOnBlur(DriversLicenseCardNumberPatterns[CountryCodes.NewZealand]),
+    guidanceText: {
+      key: "enterNDigitsForExample",
+      values: {
+        numDigits: "3",
+        example: "108"
+      }
+    }
+  },
+  [CountryCodes.Australia]: {
+    label: "licenseCardNumber",
+    mask: {
+      mask: makeMask(...alphanumericInputs(6), ...alphanumericInputs(4, true)),
+      transformOnType: uppercase
+    },
+    validators: validatePatternOnBlur(DriversLicenseCardNumberPatterns[CountryCodes.Australia]),
+    guidanceText: {
+      key: "enterXToYCharactersWithAMixForExample",
+      values: {
+        minChars: "6",
+        maxChars: "10",
+        example: "FCC3456789 or 1898442"
+      }
     }
   }
 };
 const idNumberFields = ["idNumber", "idNumberExempt"];
-function IdentityNumber(props) {
+function IdentityNumberComponent(props) {
   const {
     i18n
   } = useI18nContext();
   const {
-    classNames,
     country: country2,
     data: propData = {},
-    dataPlaceholder,
     dataStoreId,
     errors: propErrors,
     fieldValidationErrors,
-    idNumberType = "idNumber",
-    maskedFields,
-    requiredFields
+    idNumberType,
+    obscuredFields,
+    requiredFields,
+    fieldConfig: propFieldConfig,
+    shouldValidate: propShouldValidate
   } = props;
   const stateRef = useRef({
     setState: null
   });
-  const formUtils = formUtilities(props, i18n);
   const [errors, setErrors] = useState(propErrors);
   const [data, setData] = useState({
     ...propData,
     idNumberExempt: !!(propData == null ? void 0 : propData.idNumberExempt)
   });
-  const formattingRules = useMemo(() => mergeCountryBasedRulesets({}, countryIdNumberFormatters, country2), [country2]);
-  const validationRules = useMemo(() => mergeCountryBasedValidators(IdNumberValidationRules, countryIdNumberValidationRules, country2), [country2]);
-  const maxLengthForField = getMaxLengthByFormatRuleset(formattingRules, "idNumber");
-  const customRules = useMemo(() => {
-    var _a;
-    return (_a = idNumberCustomValidationRules == null ? void 0 : idNumberCustomValidationRules[props.country]) == null ? void 0 : _a[idNumberType];
-  }, [props.country, idNumberType]);
+  const schema = requiredFields ?? idNumberFields;
+  const fieldConfig = propFieldConfig ?? defaultFieldConfig$5;
+  const metadata = resolveFieldMetadata(fieldConfig[country2], {
+    idNumberType
+  }, defaultFieldMetadata$5);
+  const mergedProps = mergeFieldMetadataIntoProps("idNumber", metadata, {
+    requiredFields: schema,
+    obscuredFields
+  });
+  const formUtils = formUtilities(mergedProps, i18n);
   const {
     handleChangeFor,
     data: formData,
@@ -15406,13 +15863,12 @@ function IdentityNumber(props) {
     setErrors: setFormErrors,
     triggerValidation
   } = useForm({
-    ...props,
-    schema: requiredFields ?? idNumberFields,
-    formatters: formattingRules,
-    rules: customRules || validationRules,
+    ...mergedProps,
+    schema,
     defaultData: propData,
+    rules: mergedProps.validators,
     fieldProblems: fieldValidationErrors,
-    maskedFields
+    obscuredFields
   });
   useEffect(() => {
     if (propErrors && propErrors.idNumber) {
@@ -15471,37 +15927,30 @@ function IdentityNumber(props) {
       }
     });
   }, [data, valid, errors, fieldProblems, dataStoreId]);
-  const classModifiers = [formUtils.isRequiredField("idNumberExempt") ? "idNumberWithExempt" : "idNumber"];
-  if (classNames)
-    classModifiers.push(...classNames);
   return jsx("div", {
     className: "adyen-kyc-field__id-number",
     children: formUtils.isRequiredField("idNumber") && jsxs(Fragment, {
-      children: [jsx(Field, {
+      children: [jsx(MaskedInputText, {
         name: "idNumber",
-        label: formUtils.getLabel("idNumber"),
-        classNameModifiers: classModifiers,
+        label: formUtils.getLabel("idNumber", "idNumber"),
+        formatGuidance: formUtils.getGuidanceText("idNumber"),
+        classNameModifiers: {
+          field: ["idNumber"],
+          input: ["idNumber"]
+        },
         errorMessage: formUtils.getErrorMessage("idNumber", errors, fieldProblems),
-        disabled: data.idNumberExempt,
+        shouldValidate: propShouldValidate,
         isValid: valid.idNumber,
-        dataPlaceholder: data.idNumber && dataPlaceholder,
-        children: (childProps) => jsx(InputText, {
-          ...childProps,
-          name: "idNumber",
-          value: data.idNumber,
-          placeholder: formUtils.getPlaceholder("idNumber"),
-          readonly: formUtils.isReadOnly("idNumber"),
-          onInput: handleChangeFor("idNumber", "input"),
-          onBlur: handleChangeFor("idNumber", "blur"),
-          "aria-required": true,
-          "aria-label": formUtils.getLabel("idNumber", "idNumber"),
-          "aria-invalid": !valid.idNumber,
-          inputMode: "numeric",
-          maxLength: maxLengthForField,
-          ...data.idNumberExempt && {
-            disabled: true
-          }
-        })
+        "aria-required": formUtils.isRequiredField("idNumber"),
+        "aria-label": formUtils.getLabel("idNumber"),
+        "aria-invalid": !valid.idNumber,
+        disabled: data.idNumberExempt,
+        onBlur: handleChangeFor("idNumber", "blur"),
+        readonly: formUtils.isReadOnly("idNumber"),
+        value: data.idNumber ?? "",
+        onInput: handleChangeFor("idNumber", "input"),
+        acceptObscuredValue: formUtils == null ? void 0 : formUtils.isObscured("idNumber"),
+        ...formUtils.getMask("idNumber")
       }), jsx(Field, {
         classNameModifiers: ["idNumber__checkbox"],
         name: "idNumberExempt",
@@ -15520,7 +15969,6 @@ function IdentityNumber(props) {
     })
   });
 }
-const IdentityNumberComponent = memo(IdentityNumber, (prevProps, nextProps) => prevProps.country === nextProps.country && prevProps.shouldValidate === nextProps.shouldValidate && objectsDeepEqual(prevProps.errors, nextProps.errors) && objectsDeepEqual(prevProps.labels, nextProps.labels) && objectsDeepEqual(prevProps.requiredFields, nextProps.requiredFields) && objectsDeepEqual(prevProps.formVerificationErrors, nextProps.formVerificationErrors) && objectsDeepEqual(prevProps.fieldValidationErrors, nextProps.fieldValidationErrors));
 const roleMetadata = {
   [DecisionMakerType.CONTROLLING_PERSON]: {
     name: "controllingPerson",
@@ -15909,12 +16357,8 @@ const personalDetailsValidationRules = {
     errorMessage: "fieldIsRequired"
   }
 };
-const mapIdentityTypeToItem = (type, label) => ({
-  id: type,
-  name: label
-});
 const TypeOfIdentity = ({
-  availableIdentityTypes,
+  availableIdentityTypesOptions,
   selectedIdentityType,
   setSelectedIdentityType,
   label,
@@ -15933,7 +16377,13 @@ const TypeOfIdentity = ({
     children: (childProps) => jsx(Select, {
       ...childProps,
       isInvalid: false,
-      items: availableIdentityTypes.map((type) => mapIdentityTypeToItem(type, i18n.get(type))),
+      items: availableIdentityTypesOptions.map(({
+        id: id2,
+        name
+      }) => ({
+        id: id2,
+        name: i18n.get(name)
+      })),
       placeholder: i18n.get("id"),
       selected: selectedIdentityType,
       onChange: (event) => setSelectedIdentityType(event.target.value)
@@ -15945,48 +16395,26 @@ const isTruthyValidator = {
   modes: ["blur"],
   errorMessage: "fieldIsRequired"
 };
+const isNotEmptyValidator = {
+  validate: (value) => !isEmpty(value),
+  modes: ["blur"],
+  errorMessage: "fieldIsRequired"
+};
 const auIdentityValidationRules = {
   typeOfIdentity: [isTruthyValidator],
-  idNumber: [{
-    validate: (value, context) => {
-      switch (context == null ? void 0 : context.state.data.typeOfIdentity) {
-        case "passport":
-          return PassportNumberPatterns.AU.test(value ?? "");
-        case "driversLicense":
-          return DriversLicenseNumberPatterns.AU.test(value ?? "");
-        default:
-          return false;
-      }
-    },
-    errorMessage: (_, context) => {
-      switch (context == null ? void 0 : context.state.data.typeOfIdentity) {
-        case "passport":
-          return "invalidFormatForAuPassportNumber";
-        case "driversLicense":
-          return "invalidFormatForAuDriversLicenseNumber";
-      }
-    },
-    modes: ["blur"]
-  }],
-  licenseCardNumber: [{
-    validate: (value) => DriversLicenseNumberPatterns.AU.test(value ?? ""),
-    errorMessage: "invalidFormatForAuDriversLicenseCardNumber",
-    modes: ["blur"]
-  }],
   issuerState: [isTruthyValidator]
 };
-const DriversLicense$2 = ({
+const DriversLicense$1 = ({
   driversLicense: driversLicense2,
   onIssuerStateChange,
   onLicenseNumberInput,
   onLicenseNumberBlur,
   onCardNumberInput,
   onCardNumberBlur,
-  formUtils: {
-    getLabel
-  },
+  formUtils,
   isValid,
-  errorMessages
+  errorMessages,
+  shouldValidate
 }) => {
   const {
     i18n
@@ -15997,7 +16425,7 @@ const DriversLicense$2 = ({
   return jsxs(Fragment, {
     children: [jsx(Field, {
       name: "issuerState",
-      label: getLabel("issuerState"),
+      label: formUtils.getLabel("issuerState"),
       isValid: isValid.issuerState,
       errorMessage: errorMessages.issuerState,
       children: (childProps) => jsx(Select, {
@@ -16010,32 +16438,46 @@ const DriversLicense$2 = ({
       })
     }), jsxs("div", {
       className: "adyen-kyc-field-wrapper",
-      children: [jsx(Field, {
-        name: "licenseNumber",
-        label: getLabel("idNumber", "licenseNumber"),
+      children: [jsx(MaskedInputText, {
+        name: "idNumber",
+        label: formUtils.getLabel("idNumber", "idNumber"),
+        formatGuidance: formUtils.getGuidanceText("idNumber"),
+        classNameModifiers: {
+          field: ["idNumber"],
+          input: ["idNumber"]
+        },
+        errorMessage: formUtils.getErrorMessage("idNumber", null, void 0),
+        shouldValidate,
         isValid: isValid.idNumber,
-        errorMessage: errorMessages.idNumber,
-        children: (childProps) => jsx(InputText, {
-          ...childProps,
-          name: "licenseNumber",
-          value: driversLicense2.idNumber,
-          onInput: onLicenseNumberInput,
-          onBlur: onLicenseNumberBlur,
-          placeholder: ""
-        })
-      }), jsx(Field, {
+        "aria-required": formUtils.isRequiredField("idNumber"),
+        "aria-label": formUtils.getLabel("idNumber"),
+        "aria-invalid": !isValid.idNumber,
+        onBlur: onLicenseNumberBlur,
+        readonly: formUtils.isReadOnly("idNumber"),
+        value: driversLicense2.idNumber ?? "",
+        onInput: onLicenseNumberInput,
+        acceptObscuredValue: formUtils == null ? void 0 : formUtils.isObscured("idNumber"),
+        ...formUtils.getMask("idNumber")
+      }), jsx(MaskedInputText, {
         name: "licenseCardNumber",
-        label: getLabel("licenseCardNumber"),
+        label: formUtils.getLabel("licenseCardNumber", "licenseCardNumber"),
+        formatGuidance: formUtils.getGuidanceText("licenseCardNumber"),
+        classNameModifiers: {
+          field: ["licenseCardNumber"],
+          input: ["licenseCardNumber"]
+        },
+        errorMessage: formUtils.getErrorMessage("licenseCardNumber", null, void 0),
+        shouldValidate,
         isValid: isValid.licenseCardNumber,
-        errorMessage: errorMessages.licenseCardNumber,
-        children: (childProps) => jsx(InputText, {
-          ...childProps,
-          name: "licenseCardNumber",
-          value: driversLicense2.licenseCardNumber,
-          onInput: onCardNumberInput,
-          onBlur: onCardNumberBlur,
-          placeholder: ""
-        })
+        "aria-required": formUtils.isRequiredField("licenseCardNumber"),
+        "aria-label": formUtils.getLabel("licenseCardNumber"),
+        "aria-invalid": !isValid.licenseCardNumber,
+        onBlur: onCardNumberBlur,
+        readonly: formUtils.isReadOnly("licenseCardNumber"),
+        value: driversLicense2.licenseCardNumber ?? "",
+        onInput: onCardNumberInput,
+        acceptObscuredValue: formUtils == null ? void 0 : formUtils.isObscured("licenseCardNumber"),
+        ...formUtils.getMask("licenseCardNumber")
       })]
     }), jsx(ContextGuidance, {
       page: "Personal details",
@@ -16053,34 +16495,43 @@ const DriversLicense$2 = ({
     })]
   });
 };
-const PassportNumber$2 = ({
-  passportNumber: passportNumber2,
-  onInput,
-  onBlur,
-  formUtils: {
-    getLabel
-  },
-  errorMessage,
-  isValid
-}) => jsx(Field, {
-  name: "passportNumber",
-  label: getLabel("idNumber", "passportNumber"),
-  errorMessage,
-  isValid,
-  children: (childProps) => jsx(InputText, {
-    ...childProps,
-    name: "passportNumber",
-    value: passportNumber2,
-    onInput,
-    onBlur,
-    placeholder: ""
-  })
-});
-function IdentityAuComponent(props) {
-  var _a;
-  if (((_a = props.data) == null ? void 0 : _a.typeOfIdentity) === "nationalIdNumber") {
-    props.data.typeOfIdentity = void 0;
+const licenseCardNumberMetaData$1 = resolveFieldMetadata(licenseCardNumberDefaultConfig[CountryCodes.Australia], {}, licenseCardNumberDefaultMetadata);
+function IdentityAuComponent({
+  labels: labels2,
+  data: propsData,
+  placeholders,
+  helperText,
+  requiredFields,
+  readOnlyFields,
+  optionalFields,
+  obscuredFields,
+  shouldValidate,
+  fieldValidationErrors,
+  validators
+}) {
+  const [identityType, setIdentityType] = useState(propsData == null ? void 0 : propsData.typeOfIdentity);
+  if ((propsData == null ? void 0 : propsData.typeOfIdentity) === "nationalIdNumber") {
+    propsData.typeOfIdentity = void 0;
   }
+  const initialFormUtilProps = {
+    validators: {
+      ...auIdentityValidationRules,
+      ...validators
+    },
+    labels: labels2,
+    obscuredFields,
+    placeholders,
+    helperText,
+    readOnlyFields,
+    optionalFields,
+    requiredFields
+  };
+  const mergedProps = useMemo(() => {
+    const idNumberMetadata = resolveFieldMetadata(defaultFieldConfig$5[CountryCodes.Australia], {
+      idNumberType: identityType
+    }, defaultFieldMetadata$5);
+    return mergeFieldMetadataIntoProps("idNumber", idNumberMetadata, mergeFieldMetadataIntoProps("licenseCardNumber", licenseCardNumberMetaData$1, initialFormUtilProps));
+  }, [identityType]);
   const {
     handleChangeFor,
     triggerValidation,
@@ -16089,16 +16540,17 @@ function IdentityAuComponent(props) {
     fieldProblems,
     valid
   } = useForm({
-    ...props,
-    schema: props.requiredFields ?? [],
-    defaultData: props.data,
-    fieldProblems: props.fieldValidationErrors,
-    rules: auIdentityValidationRules,
-    maskedFields: props.maskedFields
+    schema: requiredFields ?? [],
+    defaultData: propsData,
+    fieldProblems: fieldValidationErrors,
+    rules: mergedProps.validators,
+    obscuredFields,
+    shouldValidate
   });
   useEffect(() => {
-    if (data.typeOfIdentity)
-      triggerValidation(["idNumber"]);
+    if (data.typeOfIdentity) {
+      setIdentityType(data.typeOfIdentity);
+    }
   }, [data.typeOfIdentity]);
   const {
     sliceData,
@@ -16116,25 +16568,36 @@ function IdentityAuComponent(props) {
   const {
     i18n
   } = useI18nContext();
-  const formUtils = formUtilities(props, i18n);
-  const availableIdentityTypes = ["passport", "driversLicense"];
-  const selectedIdentityType = data.typeOfIdentity;
+  const formUtils = useMemo(() => formUtilities(mergedProps, i18n), [mergedProps]);
   return jsxs(Fragment, {
     children: [jsx(TypeOfIdentity, {
-      availableIdentityTypes,
-      selectedIdentityType,
+      availableIdentityTypesOptions: additionallIdNumberOptions.AU,
+      selectedIdentityType: identityType,
       setSelectedIdentityType: handleChangeFor("typeOfIdentity"),
       label: formUtils.getLabel("typeOfIdentity"),
       isValid: valid.typeOfIdentity,
       errorMessage: formUtils.getErrorMessage("typeOfIdentity", errors, fieldProblems)
-    }), data.typeOfIdentity === "passport" ? jsx(PassportNumber$2, {
-      passportNumber: data.idNumber ?? "",
-      onInput: handleChangeFor("idNumber", "input"),
-      onBlur: handleChangeFor("idNumber", "blur"),
-      formUtils,
+    }), data.typeOfIdentity === "passport" ? jsx(MaskedInputText, {
+      name: "idNumber",
+      label: formUtils.getLabel("idNumber", "idNumber"),
+      formatGuidance: formUtils.getGuidanceText("idNumber"),
+      classNameModifiers: {
+        field: ["idNumber"],
+        input: ["idNumber"]
+      },
+      errorMessage: formUtils.getErrorMessage("idNumber", errors, fieldProblems),
+      shouldValidate,
       isValid: valid.idNumber,
-      errorMessage: formUtils.getErrorMessage("idNumber", errors, fieldProblems)
-    }) : data.typeOfIdentity === "driversLicense" ? jsx(DriversLicense$2, {
+      "aria-required": formUtils.isRequiredField("idNumber"),
+      "aria-label": formUtils.getLabel("idNumber"),
+      "aria-invalid": !valid.idNumber,
+      onBlur: handleChangeFor("idNumber", "blur"),
+      readonly: formUtils.isReadOnly("idNumber"),
+      value: data.idNumber ?? "",
+      onInput: handleChangeFor("idNumber", "input"),
+      acceptObscuredValue: formUtils == null ? void 0 : formUtils.isObscured("idNumber"),
+      ...formUtils.getMask("idNumber")
+    }) : data.typeOfIdentity === "driversLicense" ? jsx(DriversLicense$1, {
       driversLicense: data,
       onIssuerStateChange: handleChangeFor("issuerState"),
       onLicenseNumberInput: handleChangeFor("idNumber", "input"),
@@ -16151,132 +16614,66 @@ function IdentityAuComponent(props) {
         idNumber: formUtils.getErrorMessage("idNumber", errors, fieldProblems),
         licenseCardNumber: formUtils.getErrorMessage("licenseCardNumber", errors, fieldProblems),
         issuerState: formUtils.getErrorMessage("issuerState", errors, fieldProblems)
-      }
+      },
+      shouldValidate
     }) : void 0]
   });
 }
-const isValidatePassportNumber = (value) => PassportNumberPatterns.HK.test(value);
 const identityValidationRules = {
-  typeOfIdentity: [isTruthyValidator],
-  idNumber: [{
-    validate: (val, context) => {
-      const value = val ?? "";
-      switch (context == null ? void 0 : context.state.data.typeOfIdentity) {
-        case "passport":
-          return isValidatePassportNumber(value);
-        case "driversLicense":
-          return DriversLicenseNumberPatterns.HK.test(value);
-        case "proofOfIdentityCard":
-          return ProofOfIdentityCardPatterns.HK.test(value);
-        default:
-          return false;
-      }
-    },
-    errorMessage: (_, context) => {
-      switch (context == null ? void 0 : context.state.data.typeOfIdentity) {
-        case "passport":
-          return "invalidFormatForHKPassportNumber";
-        case "driversLicense":
-          return "invalidFormatForHKDriversLicenseNumber";
-        case "proofOfIdentityCard":
-          return "invalidFormatForHKIdentityCardNumber";
-      }
-    },
-    modes: ["blur"]
-  }]
+  typeOfIdentity: [isTruthyValidator]
 };
-const DriversLicense$1 = ({
-  driversLicense: driversLicense2,
-  onLicenseNumberInput,
-  onLicenseNumberBlur,
-  isValid,
-  errorMessages,
-  label
-}) => {
-  useI18nContext();
-  return jsx("div", {
-    className: "adyen-kyc-field-wrapper",
-    children: jsx(Field, {
-      name: "licenseNumber",
-      label,
-      isValid: isValid.idNumber,
-      errorMessage: errorMessages.idNumber,
-      children: (childProps) => jsx(InputText, {
-        ...childProps,
-        name: "licenseNumber",
-        value: driversLicense2.idNumber,
-        onInput: onLicenseNumberInput,
-        onBlur: onLicenseNumberBlur,
-        placeholder: ""
-      })
-    })
-  });
-};
-const PassportNumber$1 = ({
-  passportNumber: passportNumber2,
-  onInput,
-  onBlur,
-  errorMessage,
-  isValid,
-  label
-}) => jsx(Field, {
-  name: "passportNumber",
-  label,
-  errorMessage,
-  isValid,
-  children: (childProps) => jsx(InputText, {
-    ...childProps,
-    name: "passportNumber",
-    value: passportNumber2,
-    onInput,
-    onBlur,
-    placeholder: ""
-  })
-});
-const ProofOfIdentityCard = ({
-  cardNumber,
-  onInput,
-  onBlur,
-  label,
-  errorMessage,
-  isValid
-}) => jsx(Field, {
-  name: "cardNumber",
-  label,
-  errorMessage,
-  isValid,
-  children: (childProps) => jsx(InputText, {
-    ...childProps,
-    name: "cardNumber",
-    value: cardNumber,
-    onInput,
-    onBlur,
-    placeholder: ""
-  })
-});
-function IdentityHKComponent(props) {
-  var _a;
-  if (((_a = props.data) == null ? void 0 : _a.typeOfIdentity) === "nationalIdNumber") {
-    props.data.typeOfIdentity = void 0;
+function IdentityHKComponent({
+  labels: labels2,
+  data: propsData,
+  placeholders,
+  helperText,
+  requiredFields,
+  readOnlyFields,
+  optionalFields,
+  obscuredFields,
+  shouldValidate,
+  fieldValidationErrors,
+  validators
+}) {
+  const [identityType, setIdentityType] = useState(propsData == null ? void 0 : propsData.typeOfIdentity);
+  if ((propsData == null ? void 0 : propsData.typeOfIdentity) === "nationalIdNumber") {
+    propsData.typeOfIdentity = void 0;
   }
+  const initialFormUtilProps = {
+    validators: {
+      ...identityValidationRules,
+      ...validators
+    },
+    labels: labels2,
+    obscuredFields,
+    placeholders,
+    helperText,
+    readOnlyFields,
+    optionalFields,
+    requiredFields
+  };
+  const mergedProps = useMemo(() => {
+    const idNumberMetadata = resolveFieldMetadata(defaultFieldConfig$5[CountryCodes.HongKong], {
+      idNumberType: identityType
+    }, defaultFieldMetadata$5);
+    return mergeFieldMetadataIntoProps("idNumber", idNumberMetadata, initialFormUtilProps);
+  }, [identityType]);
   const {
     handleChangeFor,
-    triggerValidation,
     data,
     errors,
     fieldProblems,
     valid
   } = useForm({
-    ...props,
-    schema: props.requiredFields ?? [],
-    defaultData: props.data,
-    fieldProblems: props.fieldValidationErrors,
-    rules: identityValidationRules,
-    maskedFields: props.maskedFields
+    schema: requiredFields ?? [],
+    defaultData: propsData,
+    fieldProblems: fieldValidationErrors,
+    rules: mergedProps.validators,
+    obscuredFields
   });
   useEffect(() => {
     if (data.typeOfIdentity) {
-      triggerValidation(["idNumber"]);
+      setIdentityType(data.typeOfIdentity);
     }
   }, [data.typeOfIdentity]);
   const {
@@ -16297,76 +16694,40 @@ function IdentityHKComponent(props) {
   const {
     i18n
   } = useI18nContext();
-  const formUtils = formUtilities(props, i18n);
-  const availableIdentityTypes = ["passport", "driversLicense", "proofOfIdentityCard"];
-  const selectedIdentityType = data.typeOfIdentity;
+  const formUtils = formUtilities(mergedProps, i18n);
   return jsxs(Fragment, {
     children: [jsx(TypeOfIdentity, {
-      availableIdentityTypes,
-      selectedIdentityType,
+      availableIdentityTypesOptions: additionallIdNumberOptions.HK,
+      selectedIdentityType: identityType,
       setSelectedIdentityType: handleChangeFor("typeOfIdentity"),
       label: formUtils.getLabel("typeOfIdentity"),
       isValid: valid.typeOfIdentity,
       errorMessage: formUtils.getErrorMessage("typeOfIdentity", errors, fieldProblems)
-    }), data.typeOfIdentity === "passport" ? jsx(PassportNumber$1, {
-      passportNumber: data.idNumber ?? "",
-      onInput: handleChangeFor("idNumber", "input"),
-      onBlur: handleChangeFor("idNumber", "blur"),
+    }), jsx(MaskedInputText, {
+      name: "idNumber",
+      label: formUtils.getLabel("idNumber", "idNumber"),
+      formatGuidance: formUtils.getGuidanceText("idNumber"),
+      classNameModifiers: {
+        field: ["idNumber"],
+        input: ["idNumber"]
+      },
+      errorMessage: formUtils.getErrorMessage("idNumber", errors, fieldProblems),
+      shouldValidate,
       isValid: valid.idNumber,
-      label: formUtils.getLabel("idNumber", "passportNumber"),
-      errorMessage: formUtils.getErrorMessage("idNumber", errors, fieldProblems)
-    }) : data.typeOfIdentity === "proofOfIdentityCard" ? jsx(ProofOfIdentityCard, {
-      cardNumber: data.idNumber ?? "",
-      onInput: handleChangeFor("idNumber", "input"),
+      "aria-required": formUtils.isRequiredField("idNumber"),
+      "aria-label": formUtils.getLabel("idNumber"),
+      "aria-invalid": !valid.idNumber,
       onBlur: handleChangeFor("idNumber", "blur"),
-      isValid: valid.idNumber,
-      label: formUtils.getLabel("idNumber", "hkid"),
-      errorMessage: formUtils.getErrorMessage("idNumber", errors, fieldProblems)
-    }) : data.typeOfIdentity === "driversLicense" ? jsx(DriversLicense$1, {
-      driversLicense: data,
-      onLicenseNumberInput: handleChangeFor("idNumber", "input"),
-      onLicenseNumberBlur: handleChangeFor("idNumber", "blur"),
-      label: formUtils.getLabel("idNumber", "driverLicense"),
-      isValid: {
-        idNumber: valid.idNumber
-      },
-      errorMessages: {
-        idNumber: formUtils.getErrorMessage("idNumber", errors, fieldProblems)
-      }
-    }) : void 0]
+      readonly: formUtils.isReadOnly("idNumber"),
+      value: data.idNumber ?? "",
+      onInput: handleChangeFor("idNumber", "input"),
+      acceptObscuredValue: formUtils == null ? void 0 : formUtils.isObscured("idNumber"),
+      ...formUtils.getMask("idNumber")
+    })]
   });
 }
 const nzIdentityValidationRules = {
-  typeOfIdentity: [isTruthyValidator],
-  idNumber: [{
-    validate: (val, context) => {
-      var _a, _b;
-      const value = val ?? "";
-      switch ((_b = (_a = context == null ? void 0 : context.state) == null ? void 0 : _a.data) == null ? void 0 : _b.typeOfIdentity) {
-        case "passport":
-          return PassportNumberPatterns[CountryCodes.NewZealand].test(value);
-        case "driversLicense":
-          return DriversLicenseNumberPatterns[CountryCodes.NewZealand].test(value);
-        default:
-          return false;
-      }
-    },
-    errorMessage: (_, context) => {
-      var _a, _b;
-      switch ((_b = (_a = context == null ? void 0 : context.state) == null ? void 0 : _a.data) == null ? void 0 : _b.typeOfIdentity) {
-        case "passport":
-          return "invalidFormatForNZPassportNumber";
-        case "driversLicense":
-          return "invalidFormatForNZDriversLicenseNumber";
-      }
-    },
-    modes: ["blur"]
-  }],
-  licenseCardNumber: [{
-    validate: (value) => DriversLicenseCardNumberPatterns[CountryCodes.NewZealand].test(value ?? ""),
-    errorMessage: "invalidFormatForNZDriversLicenseCardNumber",
-    modes: ["blur"]
-  }]
+  typeOfIdentity: [isTruthyValidator]
 };
 const DriversLicense = ({
   driversLicense: driversLicense2,
@@ -16374,11 +16735,10 @@ const DriversLicense = ({
   onLicenseNumberBlur,
   onCardNumberInput,
   onCardNumberBlur,
-  formUtils: {
-    getLabel
-  },
+  formUtils,
   isValid,
-  errorMessages
+  errorMessages,
+  shouldValidate
 }) => {
   const {
     i18n
@@ -16386,32 +16746,46 @@ const DriversLicense = ({
   return jsxs(Fragment, {
     children: [jsxs("div", {
       className: "adyen-kyc-field-wrapper",
-      children: [jsx(Field, {
-        name: "licenseNumber",
-        label: getLabel("idNumber", "licenseNumber"),
-        isValid: isValid.idNumber,
+      children: [jsx(MaskedInputText, {
+        name: "idNumber",
+        label: formUtils.getLabel("idNumber", "idNumber"),
+        formatGuidance: formUtils.getGuidanceText("idNumber"),
+        classNameModifiers: {
+          field: ["idNumber"],
+          input: ["idNumber"]
+        },
         errorMessage: errorMessages.idNumber,
-        children: (childProps) => jsx(InputText, {
-          ...childProps,
-          name: "licenseNumber",
-          value: driversLicense2.idNumber,
-          onInput: onLicenseNumberInput,
-          onBlur: onLicenseNumberBlur,
-          placeholder: ""
-        })
-      }), jsx(Field, {
+        shouldValidate,
+        isValid: isValid.idNumber,
+        "aria-required": formUtils.isRequiredField("idNumber"),
+        "aria-label": formUtils.getLabel("idNumber"),
+        "aria-invalid": !isValid.idNumber,
+        onBlur: onLicenseNumberBlur,
+        readonly: formUtils.isReadOnly("idNumber"),
+        value: driversLicense2.idNumber ?? "",
+        onInput: onLicenseNumberInput,
+        acceptObscuredValue: formUtils == null ? void 0 : formUtils.isObscured("idNumber"),
+        ...formUtils.getMask("idNumber")
+      }), jsx(MaskedInputText, {
         name: "licenseCardNumber",
-        label: getLabel("licenceVersionNumber"),
-        isValid: isValid.licenseCardNumber,
+        label: formUtils.getLabel("licenseCardNumber", "licenseCardNumber"),
+        formatGuidance: formUtils.getGuidanceText("licenseCardNumber"),
+        classNameModifiers: {
+          field: ["licenseCardNumber"],
+          input: ["licenseCardNumber"]
+        },
         errorMessage: errorMessages.licenseCardNumber,
-        children: (childProps) => jsx(InputText, {
-          ...childProps,
-          name: "licenseCardNumber",
-          value: driversLicense2.licenseCardNumber,
-          onInput: onCardNumberInput,
-          onBlur: onCardNumberBlur,
-          placeholder: ""
-        })
+        shouldValidate,
+        isValid: isValid.licenseCardNumber,
+        "aria-required": formUtils.isRequiredField("licenseCardNumber"),
+        "aria-label": formUtils.getLabel("licenseCardNumber"),
+        "aria-invalid": !isValid.licenseCardNumber,
+        onBlur: onCardNumberBlur,
+        readonly: formUtils.isReadOnly("licenseCardNumber"),
+        value: driversLicense2.licenseCardNumber ?? "",
+        onInput: onCardNumberInput,
+        acceptObscuredValue: formUtils == null ? void 0 : formUtils.isObscured("licenseCardNumber"),
+        ...formUtils.getMask("licenseCardNumber")
       })]
     }), jsx(ContextGuidance, {
       page: "Personal details",
@@ -16429,34 +16803,43 @@ const DriversLicense = ({
     })]
   });
 };
-const PassportNumber = ({
-  passportNumber: passportNumber2,
-  onInput,
-  onBlur,
-  formUtils: {
-    getLabel
-  },
-  errorMessage,
-  isValid
-}) => jsx(Field, {
-  name: "passportNumber",
-  label: getLabel("idNumber", "passportNumber"),
-  errorMessage,
-  isValid,
-  children: (childProps) => jsx(InputText, {
-    ...childProps,
-    name: "passportNumber",
-    value: passportNumber2,
-    onInput,
-    onBlur,
-    placeholder: ""
-  })
-});
-function IdentityNZComponent(props) {
-  var _a;
-  if (((_a = props.data) == null ? void 0 : _a.typeOfIdentity) === "nationalIdNumber") {
-    props.data.typeOfIdentity = void 0;
+const licenseCardNumberMetaData = resolveFieldMetadata(licenseCardNumberDefaultConfig[CountryCodes.NewZealand], {}, licenseCardNumberDefaultMetadata);
+function IdentityNZComponent({
+  labels: labels2,
+  data: propsData,
+  placeholders,
+  helperText,
+  requiredFields,
+  readOnlyFields,
+  optionalFields,
+  obscuredFields,
+  shouldValidate,
+  fieldValidationErrors,
+  validators
+}) {
+  const [identityType, setIdentityType] = useState(propsData == null ? void 0 : propsData.typeOfIdentity);
+  if ((propsData == null ? void 0 : propsData.typeOfIdentity) === "nationalIdNumber") {
+    propsData.typeOfIdentity = void 0;
   }
+  const initialFormUtilProps = {
+    validators: {
+      ...nzIdentityValidationRules,
+      ...validators
+    },
+    labels: labels2,
+    obscuredFields,
+    placeholders,
+    helperText,
+    readOnlyFields,
+    optionalFields,
+    requiredFields
+  };
+  const mergedProps = useMemo(() => {
+    const idNumberMetadata = resolveFieldMetadata(defaultFieldConfig$5[CountryCodes.NewZealand], {
+      idNumberType: identityType
+    }, defaultFieldMetadata$5);
+    return mergeFieldMetadataIntoProps("idNumber", idNumberMetadata, mergeFieldMetadataIntoProps("licenseCardNumber", licenseCardNumberMetaData, initialFormUtilProps));
+  }, [identityType]);
   const {
     handleChangeFor,
     triggerValidation,
@@ -16465,16 +16848,17 @@ function IdentityNZComponent(props) {
     fieldProblems,
     valid
   } = useForm({
-    ...props,
-    schema: props.requiredFields ?? [],
-    defaultData: props.data,
-    fieldProblems: props.fieldValidationErrors,
-    rules: nzIdentityValidationRules,
-    maskedFields: props.maskedFields
+    schema: requiredFields ?? [],
+    defaultData: propsData,
+    fieldProblems: fieldValidationErrors,
+    rules: mergedProps.validators,
+    obscuredFields,
+    shouldValidate
   });
   useEffect(() => {
-    if (data.typeOfIdentity)
-      triggerValidation(["idNumber"]);
+    if (data.typeOfIdentity) {
+      setIdentityType(data.typeOfIdentity);
+    }
   }, [data.typeOfIdentity]);
   const {
     sliceData,
@@ -16492,28 +16876,39 @@ function IdentityNZComponent(props) {
   const {
     i18n
   } = useI18nContext();
-  const formUtils = formUtilities(props, i18n);
-  const availableIdentityTypes = ["passport", "driversLicense"];
-  const selectedIdentityType = data.typeOfIdentity;
+  const formUtils = formUtilities(mergedProps, i18n);
   const today = /* @__PURE__ */ new Date();
   const maxExpiryDateSelection = new Date((/* @__PURE__ */ new Date()).setFullYear(today.getFullYear() + 10));
   return jsxs(Fragment, {
     children: [jsx(TypeOfIdentity, {
-      availableIdentityTypes,
-      selectedIdentityType,
+      availableIdentityTypesOptions: additionallIdNumberOptions.NZ,
+      selectedIdentityType: identityType,
       setSelectedIdentityType: handleChangeFor("typeOfIdentity"),
       label: formUtils.getLabel("typeOfIdentity"),
       isValid: valid.typeOfIdentity,
       errorMessage: formUtils.getErrorMessage("typeOfIdentity", errors, fieldProblems)
     }), data.typeOfIdentity === "passport" ? jsxs("div", {
       className: "adyen-kyc-field-wrapper",
-      children: [jsx(PassportNumber, {
-        passportNumber: data.idNumber ?? "",
-        onInput: handleChangeFor("idNumber", "input"),
-        onBlur: handleChangeFor("idNumber", "blur"),
-        formUtils,
+      children: [jsx(MaskedInputText, {
+        name: "idNumber",
+        label: formUtils.getLabel("idNumber", "idNumber"),
+        formatGuidance: formUtils.getGuidanceText("idNumber"),
+        classNameModifiers: {
+          field: ["idNumber"],
+          input: ["idNumber"]
+        },
+        errorMessage: formUtils.getErrorMessage("idNumber", errors, fieldProblems),
+        shouldValidate,
         isValid: valid.idNumber,
-        errorMessage: formUtils.getErrorMessage("idNumber", errors, fieldProblems)
+        "aria-required": formUtils.isRequiredField("idNumber"),
+        "aria-label": formUtils.getLabel("idNumber"),
+        "aria-invalid": !valid.idNumber,
+        onBlur: handleChangeFor("idNumber", "blur"),
+        readonly: formUtils.isReadOnly("idNumber"),
+        value: data.idNumber ?? "",
+        onInput: handleChangeFor("idNumber", "input"),
+        acceptObscuredValue: formUtils == null ? void 0 : formUtils.isObscured("idNumber"),
+        ...formUtils.getMask("idNumber")
       }), jsx(Field, {
         name: "expiryDate",
         label: formUtils.getLabel("passportExpiryDate"),
@@ -16549,7 +16944,8 @@ function IdentityNZComponent(props) {
       errorMessages: {
         idNumber: formUtils.getErrorMessage("idNumber", errors, fieldProblems),
         licenseCardNumber: formUtils.getErrorMessage("licenseCardNumber", errors, fieldProblems)
-      }
+      },
+      shouldValidate
     }) : void 0]
   });
 }
@@ -16558,41 +16954,14 @@ const ERROR_CODES = {
   SSN_4_DIGITS_VALIDATION: "1_3062",
   PERSONAL_DETAILS_VALIDATION: "1_30"
 };
-const OPTIONS_SSN = {
-  fourDigits: "4DigitSSN",
-  nineDigits: "entireSSN"
-};
 const IdentityUSComponent = forwardRef((props, ref) => {
   var _a, _b, _c, _d;
   const individualDetailsError = (_a = props.formVerificationErrors) == null ? void 0 : _a[ERROR_CODES.PERSONAL_DETAILS_VALIDATION];
   const fourDigitsValidationError = (_b = individualDetailsError == null ? void 0 : individualDetailsError[ERROR_CODES.SSN_4_DIGITS_VALIDATION]) == null ? void 0 : _b.some((error) => error.code === ERROR_CODES.SSN_REMEDIATION);
-  const ssnType = fourDigitsValidationError || ((_d = (_c = props.data) == null ? void 0 : _c.idNumber) == null ? void 0 : _d.length) === 9 ? OPTIONS_SSN.nineDigits : OPTIONS_SSN.fourDigits;
-  let USIdentityProps = {
-    ...props
-  };
-  if (ssnType === OPTIONS_SSN.nineDigits) {
-    const nineDigitsProps = {
-      labels: {
-        ...props.labels,
-        idNumber: "socialSecurityNumber9Digits"
-      },
-      country: "US9",
-      placeholders: {
-        ...props.placeholders,
-        idNumber: "SSNFormatUS9Digits"
-      }
-    };
-    USIdentityProps = {
-      ...props,
-      ...nineDigitsProps
-    };
-  }
-  if (ssnType === OPTIONS_SSN.fourDigits) {
-    USIdentityProps.classNames = ["us4DigitsNumberId"];
-    USIdentityProps.dataPlaceholder = "*** — ** — ";
-  }
+  const ssnType = fourDigitsValidationError || ((_d = (_c = props.data) == null ? void 0 : _c.idNumber) == null ? void 0 : _d.length) === 9 ? "ssn" : "ssnLastFour";
   return jsx(IdentityNumberComponent, {
-    ...USIdentityProps,
+    ...props,
+    idNumberType: ssnType,
     ref
   });
 });
@@ -16645,9 +17014,6 @@ function IdentityComponent(props) {
     dataStoreId
   });
 }
-const customFieldlabels = (selected) => ({
-  idNumber: selected
-});
 const personalDetailsFields = [...nameFields, "birthDate", ...idNumberFields, ...additionalIdentityInfoFields, "residencyCountry", "nationality", "jobTitle", ...decisionMakerRoleFields, ...contactDetailFields, ...accountHolderFields];
 function PersonalDetailsComponent(props) {
   var _a;
@@ -16745,7 +17111,6 @@ function PersonalDetailsComponent(props) {
   useEffect(() => {
     setIdNumberType(defaultIdNumberType);
   }, [props.data.residencyCountry]);
-  const idNumberCustomLabel = customFieldlabels ? customFieldlabels(idNumberType) : {};
   useEffect(() => {
     stateRef.current.setState({
       type: "addToState",
@@ -16852,8 +17217,7 @@ function PersonalDetailsComponent(props) {
         personalDetails: props,
         country: data.residencyCountry,
         errors: externalErrors,
-        idNumberType,
-        labels: idNumberCustomLabel
+        idNumberType
       }), (data.residencyCountry === "SG" || data.residencyCountry === "HK") && formUtils.isRequiredField("nationality") && jsx(CountryField, {
         data: {
           country: data.nationality
@@ -18167,10 +18531,82 @@ function BankAccountFormat(props) {
     })
   });
 }
-const stripNonAlphanumeric = (value) => value.replaceAll(/[^0-9a-zA-Z]/g, "");
-const isValueMasked = (value) => {
-  var _a;
-  return typeof value === "string" && !!((_a = value.match(/[*]{2,}/)) == null ? void 0 : _a.length);
+const simpleBankAccountNumberMetadata = (example, length, maxLength) => {
+  if (maxLength) {
+    return {
+      label: "bankAccountNumber",
+      validators: validatePatternOnBlur(new RegExp(`^\\d{${length},${maxLength}}$`)),
+      mask: {
+        mask: makeMask(...numericInputs(length), ...numericInputs(maxLength - length, true))
+      },
+      guidanceText: {
+        key: "enterAMaximumOfNDigitsForExample",
+        values: {
+          maxDigits: `${maxLength}`,
+          example
+        }
+      }
+    };
+  }
+  return {
+    label: "bankAccountNumber",
+    validators: validatePatternOnBlur(new RegExp(`^\\d{${length}}$`)),
+    mask: {
+      mask: makeMask(...numericInputs(length))
+    },
+    guidanceText: {
+      key: "enterNDigitsForExample",
+      values: {
+        numDigits: `${length}`,
+        example
+      }
+    }
+  };
+};
+const defaultFieldMetadata$4 = {
+  label: "bankAccountNumber",
+  validators: isNotEmptyValidator
+};
+const defaultFieldConfig$4 = {
+  [CountryCodes.Denmark]: simpleBankAccountNumberMetadata("2621955959", 10),
+  [CountryCodes.Norway]: simpleBankAccountNumberMetadata("1117947", 7),
+  [CountryCodes.UnitedKingdom]: simpleBankAccountNumberMetadata("10000003", 8),
+  [CountryCodes.Australia]: simpleBankAccountNumberMetadata("0001234", 5, 10),
+  [CountryCodes.Brazil]: simpleBankAccountNumberMetadata("0009795493", 4, 12),
+  [CountryCodes.Canada]: simpleBankAccountNumberMetadata("10220001111", 5, 12),
+  [CountryCodes.HongKong]: simpleBankAccountNumberMetadata("123456789001", 6, 18),
+  [CountryCodes.Singapore]: simpleBankAccountNumberMetadata("0052312891876", 4, 19),
+  [CountryCodes.Sweden]: simpleBankAccountNumberMetadata("123456789", 7, 10),
+  [CountryCodes.UnitedStates]: simpleBankAccountNumberMetadata("10220001111", 3, 17),
+  [CountryCodes.Poland]: {
+    label: "bankAccountNumber",
+    validators: validatePatternOnBlur(/^\d{26}$/),
+    mask: {
+      mask: makeMask(...numericInputs(2), spacer, ...numericInputs(4), spacer, ...numericInputs(4), spacer, ...numericInputs(4), spacer, ...numericInputs(4), spacer, ...numericInputs(4), spacer, ...numericInputs(4))
+    },
+    guidanceText: {
+      key: "enterNDigitsForExample",
+      values: {
+        numDigits: "26",
+        example: "98 1090 2402 7474 4662 2173 1624"
+      }
+    }
+  },
+  [CountryCodes.NewZealand]: {
+    label: "bankAccountNumber",
+    validators: validatePatternOnBlur(/^\d{26}$/),
+    mask: {
+      mask: makeMask(...numericInputs(2), ...nonInputs(" - "), ...numericInputs(4), ...nonInputs(" - "), ...numericInputs(7), ...nonInputs(" - "), ...numericInputs(2), ...numericInputs(1, true))
+    },
+    guidanceText: {
+      key: "enterXToYDigitsForExample",
+      values: {
+        minDigits: "15",
+        maxDigits: "16",
+        example: "12-8765-9876543-043"
+      }
+    }
+  }
 };
 const bankAccountNumberFields = ["bankAccountNumber"];
 function BankAccountNumber(props) {
@@ -18178,69 +18614,56 @@ function BankAccountNumber(props) {
     i18n
   } = useI18nContext();
   const {
-    dataStoreId,
-    validators
+    country: country2,
+    fieldConfig = defaultFieldConfig$4
   } = props;
-  const stateRef = useRef({
-    setState: null
-  });
+  const metadata = resolveFieldMetadata(fieldConfig[country2], {}, defaultFieldMetadata$4);
+  const mergedProps = mergeFieldMetadataIntoProps("bankAccountNumber", metadata, props);
   const {
     handleChangeFor,
     data,
     valid,
     errors,
-    isValid,
     fieldProblems
   } = useForm({
-    ...props,
+    ...mergedProps,
     schema: bankAccountNumberFields,
-    rules: validators,
-    defaultData: props.data,
-    fieldProblems: props == null ? void 0 : props.fieldValidationErrors,
-    formatters: {
-      bankAccountNumber: {
-        formatter: (v) => v && !isValueMasked(v) ? stripNonAlphanumeric(v) : v
-      }
-    },
-    maskedFields: props.maskedFields
+    rules: mergedProps.validators,
+    defaultData: mergedProps.data,
+    fieldProblems: mergedProps == null ? void 0 : mergedProps.fieldValidationErrors,
+    obscuredFields: mergedProps.obscuredFields
   });
+  const {
+    updateStateSlice
+  } = useGlobalDataSlice("payoutAccountDetails", "bankAccountNumber");
   useEffect(() => {
-    var _a, _b;
-    (_b = (_a = stateRef == null ? void 0 : stateRef.current) == null ? void 0 : _a.setState) == null ? void 0 : _b.call(_a, {
-      type: "addToState",
-      value: {
-        data,
-        valid,
-        errors,
-        fieldProblems,
-        caller: "bankAccountNumber",
-        dataStoreId
-      }
+    updateStateSlice({
+      data,
+      valid,
+      errors,
+      fieldProblems
     });
-  }, [data, valid, errors, isValid]);
-  const formUtils = formUtilities(props, i18n);
-  return jsxs(Fragment, {
-    children: [jsx(StateContextSetter, {
-      stateRef
-    }), jsx(Field, {
-      classNameModifiers: ["bankAccountNumber"],
-      errorMessage: formUtils.getErrorMessage("bankAccountNumber", errors, fieldProblems) || "",
-      isValid: valid.bankAccountNumber,
-      label: formUtils.getLabel("bankAccountNumber"),
-      name: "bankAccountNumber",
-      children: (childProps) => jsx(InputText, {
-        ...childProps,
-        "aria-required": true,
-        "aria-invalid": !valid.bankAccountNumber,
-        "aria-label": formUtils.getLabel("bankAccountNumber"),
-        classNameModifiers: ["bankAccountNumber"],
-        name: "bankAccountNumber",
-        onBlur: handleChangeFor("bankAccountNumber", "blur"),
-        onInput: handleChangeFor("bankAccountNumber", "input"),
-        readonly: formUtils.isReadOnly("bankAccountNumber"),
-        value: data.bankAccountNumber
-      })
-    })]
+  }, [data, valid, errors]);
+  const formUtils = formUtilities(mergedProps, i18n);
+  return jsx(MaskedInputText, {
+    name: "bankAccountNumber",
+    label: formUtils.getLabel("bankAccountNumber"),
+    formatGuidance: formUtils.getGuidanceText("bankAccountNumber"),
+    ...formUtils.getMask("bankAccountNumber"),
+    isValid: valid.bankAccountNumber,
+    errorMessage: formUtils.getErrorMessage("bankAccountNumber", errors, fieldProblems),
+    "aria-required": true,
+    "aria-invalid": !valid.bankAccountNumber,
+    "aria-label": formUtils.getLabel("bankAccountNumber"),
+    classNameModifiers: {
+      field: ["bankAccountNumber"],
+      input: ["bankAccountNumber"]
+    },
+    onBlur: handleChangeFor("bankAccountNumber", "blur"),
+    onInput: handleChangeFor("bankAccountNumber", "input"),
+    readonly: formUtils.isReadOnly("bankAccountNumber"),
+    value: data.bankAccountNumber ?? "",
+    acceptObscuredValue: formUtils.isObscured("bankAccountNumber")
   });
 }
 const bankCityFields = ["bankCity"];
@@ -18249,18 +18672,13 @@ function BankCity(props) {
     i18n
   } = useI18nContext();
   const {
-    dataStoreId,
     validators
   } = props;
-  const stateRef = useRef({
-    setState: null
-  });
   const {
     handleChangeFor,
     data,
     valid,
     errors,
-    isValid,
     fieldProblems
   } = useForm({
     ...props,
@@ -18269,106 +18687,120 @@ function BankCity(props) {
     defaultData: props.data,
     fieldProblems: props == null ? void 0 : props.fieldValidationErrors
   });
+  const {
+    updateStateSlice
+  } = useGlobalDataSlice("payoutAccountDetails", "bankCity");
   useEffect(() => {
-    var _a, _b;
-    (_b = (_a = stateRef == null ? void 0 : stateRef.current) == null ? void 0 : _a.setState) == null ? void 0 : _b.call(_a, {
-      type: "addToState",
-      value: {
-        data,
-        valid,
-        errors,
-        fieldProblems,
-        caller: "bankCity",
-        dataStoreId
-      }
+    updateStateSlice({
+      data,
+      valid,
+      errors,
+      fieldProblems
     });
-  }, [data, valid, errors, isValid]);
+  }, [data, valid, errors]);
   const formUtils = formUtilities(props, i18n);
-  return jsxs(Fragment, {
-    children: [jsx(StateContextSetter, {
-      stateRef
-    }), jsx(Field, {
+  return jsx(Field, {
+    name: "bankCity",
+    label: formUtils.getLabel("bankCity"),
+    classNameModifiers: ["bankCity"],
+    errorMessage: formUtils.getErrorMessage("bankCity", errors, fieldProblems),
+    isValid: valid.bankCity,
+    children: (childProps) => jsx(InputText, {
+      ...childProps,
       name: "bankCity",
-      label: formUtils.getLabel("bankCity"),
-      classNameModifiers: ["bankCity"],
-      errorMessage: formUtils.getErrorMessage("bankCity", errors, fieldProblems),
-      isValid: valid.bankCity,
-      children: (childProps) => jsx(InputText, {
-        ...childProps,
-        name: "bankCity",
-        value: data.bankCity,
-        readonly: formUtils.isReadOnly("bankCity"),
-        onInput: handleChangeFor("bankCity", "input"),
-        onBlur: handleChangeFor("bankCity", "blur"),
-        "aria-required": true,
-        "aria-label": formUtils.getLabel("bankCity"),
-        "aria-invalid": !valid.bankCity
-      })
-    })]
+      value: data.bankCity,
+      readonly: formUtils.isReadOnly("bankCity"),
+      onInput: handleChangeFor("bankCity", "input"),
+      onBlur: handleChangeFor("bankCity", "blur"),
+      "aria-required": true,
+      "aria-label": formUtils.getLabel("bankCity"),
+      "aria-invalid": !valid.bankCity
+    })
   });
 }
+const defaultFieldMetadata$3 = {
+  label: "bankCode",
+  validators: isNotEmptyValidator
+};
+const simpleBankCodeMetadata = (length, example, label) => ({
+  label: label ?? "bankCode",
+  validators: validatePatternOnBlur(new RegExp(`^\\d{${length}}$`)),
+  mask: {
+    mask: makeMask(...numericInputs(length))
+  },
+  guidanceText: {
+    key: "enterNDigitsForExample",
+    values: {
+      numDigits: `${length}`,
+      example
+    }
+  }
+});
+const defaultFieldConfig$3 = {
+  [CountryCodes.Brazil]: simpleBankCodeMetadata(3, "123"),
+  [CountryCodes.Canada]: simpleBankCodeMetadata(3, "100", "institutionNumber"),
+  [CountryCodes.Denmark]: simpleBankCodeMetadata(4, "5051"),
+  [CountryCodes.HongKong]: simpleBankCodeMetadata(3, "321", "clearingCode"),
+  [CountryCodes.Norway]: simpleBankCodeMetadata(4, "8601"),
+  // Not yet implemented
+  [CountryCodes.Ecuador]: simpleBankCodeMetadata(4, "1234"),
+  [CountryCodes.Japan]: simpleBankCodeMetadata(4, "1234"),
+  [CountryCodes.Taiwan]: simpleBankCodeMetadata(3, "123")
+};
 const bankCodeFields = ["bankCode"];
 function BankCode(props) {
   const {
     i18n
   } = useI18nContext();
   const {
-    dataStoreId,
-    validators
+    country: country2,
+    fieldConfig = defaultFieldConfig$3
   } = props;
-  const stateRef = useRef({
-    setState: null
-  });
+  const metadata = resolveFieldMetadata(fieldConfig[country2], {}, defaultFieldMetadata$3);
+  const mergedProps = mergeFieldMetadataIntoProps("bankCode", metadata, props);
   const {
     handleChangeFor,
     data,
     valid,
     errors,
-    isValid,
     fieldProblems
   } = useForm({
-    ...props,
+    ...mergedProps,
     schema: bankCodeFields,
-    rules: validators,
-    defaultData: props.data,
-    fieldProblems: props == null ? void 0 : props.fieldValidationErrors
+    rules: mergedProps.validators,
+    defaultData: mergedProps.data,
+    fieldProblems: mergedProps.fieldValidationErrors
   });
+  const {
+    updateStateSlice
+  } = useGlobalDataSlice("payoutAccountDetails", "bankCode");
   useEffect(() => {
-    var _a, _b;
-    (_b = (_a = stateRef == null ? void 0 : stateRef.current) == null ? void 0 : _a.setState) == null ? void 0 : _b.call(_a, {
-      type: "addToState",
-      value: {
-        data,
-        valid,
-        errors,
-        fieldProblems,
-        caller: "bankCode",
-        dataStoreId
-      }
+    updateStateSlice({
+      data,
+      valid,
+      errors,
+      fieldProblems
     });
-  }, [data, valid, errors, isValid]);
-  const formUtils = formUtilities(props, i18n);
-  return jsxs(Fragment, {
-    children: [jsx(StateContextSetter, {
-      stateRef
-    }), jsx(Field, {
-      name: "bankCode",
-      label: formUtils.getLabel("bankCode"),
-      classNameModifiers: ["bankCode"],
-      errorMessage: formUtils.getErrorMessage("bankCode", errors, fieldProblems) || "",
-      isValid: valid.bankCode,
-      children: (childProps) => jsx(InputText, {
-        ...childProps,
-        name: "bankCode",
-        value: data.bankCode,
-        readonly: formUtils.isReadOnly("bankCode"),
-        onInput: handleChangeFor("bankCode", "input"),
-        onBlur: handleChangeFor("bankCode", "blur"),
-        "aria-required": true,
-        "aria-label": formUtils.getLabel("bankCode"),
-        "aria-invalid": !valid.bankCode
-      })
-    })]
+  }, [data, valid, errors]);
+  const formUtils = formUtilities(mergedProps, i18n);
+  return jsx(MaskedInputText, {
+    name: "bankCode",
+    label: formUtils.getLabel("bankCode"),
+    classNameModifiers: {
+      field: ["bankCode"],
+      input: ["bankCode"]
+    },
+    errorMessage: formUtils.getErrorMessage("bankCode", errors, fieldProblems),
+    formatGuidance: formUtils.getGuidanceText("bankCode"),
+    ...formUtils.getMask("bankCode"),
+    isValid: valid.bankCode,
+    value: data.bankCode ?? "",
+    readonly: formUtils.isReadOnly("bankCode"),
+    onInput: handleChangeFor("bankCode", "input"),
+    onBlur: handleChangeFor("bankCode", "blur"),
+    "aria-required": true,
+    "aria-label": formUtils.getLabel("bankCode"),
+    "aria-invalid": !valid.bankCode
   });
 }
 const bankNameFields = ["bankName"];
@@ -18377,18 +18809,13 @@ function BankName(props) {
     i18n
   } = useI18nContext();
   const {
-    dataStoreId,
     validators
   } = props;
-  const stateRef = useRef({
-    setState: null
-  });
   const {
     handleChangeFor,
     data,
     valid,
     errors,
-    isValid,
     fieldProblems
   } = useForm({
     ...props,
@@ -18397,106 +18824,186 @@ function BankName(props) {
     defaultData: props.data,
     fieldProblems: props == null ? void 0 : props.fieldValidationErrors
   });
+  const {
+    updateStateSlice
+  } = useGlobalDataSlice("payoutAccountDetails", "bankName");
   useEffect(() => {
-    var _a, _b;
-    (_b = (_a = stateRef == null ? void 0 : stateRef.current) == null ? void 0 : _a.setState) == null ? void 0 : _b.call(_a, {
-      type: "addToState",
-      value: {
-        data,
-        valid,
-        errors,
-        fieldProblems,
-        caller: "bankName",
-        dataStoreId
-      }
+    updateStateSlice({
+      data,
+      valid,
+      errors,
+      fieldProblems
     });
-  }, [data, valid, errors, isValid]);
+  }, [data, valid, errors]);
   const formUtils = formUtilities(props, i18n);
-  return jsxs(Fragment, {
-    children: [jsx(StateContextSetter, {
-      stateRef
-    }), jsx(Field, {
+  return jsx(Field, {
+    name: "bankName",
+    label: formUtils.getLabel("bankName"),
+    classNameModifiers: ["bankName"],
+    errorMessage: formUtils.getErrorMessage("bankName", errors, fieldProblems),
+    isValid: valid.bankName,
+    children: (childProps) => jsx(InputText, {
+      ...childProps,
       name: "bankName",
-      label: formUtils.getLabel("bankName"),
-      classNameModifiers: ["bankName"],
-      errorMessage: formUtils.getErrorMessage("bankName", errors, fieldProblems) || "",
-      isValid: valid.bankName,
-      children: (childProps) => jsx(InputText, {
-        ...childProps,
-        name: "bankName",
-        value: data.bankName,
-        readonly: formUtils.isReadOnly("bankName"),
-        onInput: handleChangeFor("bankName", "input"),
-        onBlur: handleChangeFor("bankName", "blur"),
-        "aria-required": true,
-        "aria-label": formUtils.getLabel("bankName"),
-        "aria-invalid": !valid.bankName
-      })
-    })]
+      value: data.bankName,
+      readonly: formUtils.isReadOnly("bankName"),
+      onInput: handleChangeFor("bankName", "input"),
+      onBlur: handleChangeFor("bankName", "blur"),
+      "aria-required": true,
+      "aria-label": formUtils.getLabel("bankName"),
+      "aria-invalid": !valid.bankName
+    })
   });
 }
+const defaultFieldMetadata$2 = {
+  label: "branchCode",
+  validators: isNotEmptyValidator
+};
+const defaultFieldConfig$2 = {
+  [CountryCodes.UnitedKingdom]: {
+    label: "sortCode",
+    validators: validatePatternOnBlur(/^\d{6}$/),
+    mask: {
+      mask: makeMask(...numericInputs(6))
+    },
+    guidanceText: {
+      key: "enterNDigitsForExample",
+      values: {
+        numDigits: "6",
+        example: "401199"
+      }
+    }
+  },
+  [CountryCodes.Australia]: {
+    label: "bsbNumber",
+    validators: validatePatternOnBlur(/^\d{6}$/),
+    mask: {
+      mask: makeMask(...numericInputs(3), ...nonInputs(" - "), ...numericInputs(3))
+    },
+    guidanceText: {
+      key: "enterNDigitsForExample",
+      values: {
+        numDigits: "6",
+        example: "033-547"
+      }
+    }
+  },
+  [CountryCodes.Brazil]: {
+    label: "branchCode",
+    validators: validatePatternOnBlur(/^\d{1,5}$/),
+    mask: {
+      mask: makeMask(...numericInputs(1), ...numericInputs(4, true))
+    },
+    guidanceText: {
+      key: "enterAMaximumOfNDigitsForExample",
+      values: {
+        maxDigits: "5",
+        example: "36257"
+      }
+    }
+  },
+  [CountryCodes.Canada]: {
+    label: "transitNumber",
+    validators: validatePatternOnBlur(/^\d{5}$/),
+    mask: {
+      mask: makeMask(...numericInputs(5))
+    },
+    guidanceText: {
+      key: "enterNDigitsForExample",
+      values: {
+        numDigits: "5",
+        example: "27601"
+      }
+    }
+  },
+  [CountryCodes.HongKong]: {
+    label: "branchCode",
+    validators: validatePatternOnBlur(/^\d{3}$/),
+    mask: {
+      mask: makeMask(...numericInputs(3))
+    },
+    guidanceText: {
+      key: "enterNDigitsForExample",
+      values: {
+        numDigits: "3",
+        example: "100"
+      }
+    }
+  },
+  [CountryCodes.UnitedStates]: {
+    label: "achRoutingNumber",
+    validators: validatePatternOnBlur(/^\d{9}$/),
+    mask: {
+      mask: makeMask(...numericInputs(9))
+    },
+    guidanceText: {
+      key: "enterNDigitsForExample",
+      values: {
+        numDigits: "9",
+        example: "107005432"
+      }
+    }
+  },
+  // Not yet implemented
+  [CountryCodes.Indonesia]: {
+    label: "clearingCode",
+    validators: isNotEmptyValidator
+  }
+};
 const branchCodeFields = ["branchCode"];
 function BranchCode(props) {
   const {
     i18n
   } = useI18nContext();
   const {
-    dataStoreId,
-    validators
+    country: country2,
+    fieldConfig = defaultFieldConfig$2
   } = props;
-  const stateRef = useRef({
-    setState: null
-  });
+  const metadata = resolveFieldMetadata(fieldConfig[country2], {}, defaultFieldMetadata$2);
+  const mergedProps = mergeFieldMetadataIntoProps("branchCode", metadata, props);
   const {
     handleChangeFor,
     data,
     valid,
     errors,
-    isValid,
     fieldProblems
   } = useForm({
-    ...props,
+    ...mergedProps,
     schema: branchCodeFields,
-    rules: validators,
-    defaultData: props.data,
-    fieldProblems: props == null ? void 0 : props.fieldValidationErrors
+    rules: mergedProps.validators,
+    defaultData: mergedProps.data,
+    fieldProblems: mergedProps == null ? void 0 : mergedProps.fieldValidationErrors
   });
+  const {
+    updateStateSlice
+  } = useGlobalDataSlice("payoutAccountDetails", "branchCode");
   useEffect(() => {
-    var _a, _b;
-    (_b = (_a = stateRef == null ? void 0 : stateRef.current) == null ? void 0 : _a.setState) == null ? void 0 : _b.call(_a, {
-      type: "addToState",
-      value: {
-        data,
-        valid,
-        errors,
-        fieldProblems,
-        caller: "branchCode",
-        dataStoreId
-      }
+    updateStateSlice({
+      data,
+      valid,
+      errors,
+      fieldProblems
     });
-  }, [data, valid, errors, isValid]);
-  const formUtils = formUtilities(props, i18n);
-  return jsxs(Fragment, {
-    children: [jsx(StateContextSetter, {
-      stateRef
-    }), jsx(Field, {
-      name: "branchCode",
-      label: formUtils.getLabel("branchCode"),
-      classNameModifiers: ["branchCode"],
-      errorMessage: formUtils.getErrorMessage("branchCode", errors, fieldProblems) || "",
-      isValid: valid.branchCode,
-      children: (childProps) => jsx(InputText, {
-        ...childProps,
-        name: "branchCode",
-        value: data.branchCode,
-        readonly: formUtils.isReadOnly("branchCode"),
-        onInput: handleChangeFor("branchCode", "input"),
-        onBlur: handleChangeFor("branchCode", "blur"),
-        "aria-required": true,
-        "aria-label": formUtils.getLabel("branchCode"),
-        "aria-invalid": !valid.branchCode
-      })
-    })]
+  }, [data, valid, errors]);
+  const formUtils = formUtilities(mergedProps, i18n);
+  return jsx(MaskedInputText, {
+    name: "branchCode",
+    label: formUtils.getLabel("branchCode"),
+    formatGuidance: formUtils.getGuidanceText("branchCode"),
+    ...formUtils.getMask("branchCode"),
+    classNameModifiers: {
+      field: ["branchCode"],
+      input: ["branchCode"]
+    },
+    errorMessage: formUtils.getErrorMessage("branchCode", errors, fieldProblems),
+    isValid: valid.branchCode,
+    value: data.branchCode ?? "",
+    readonly: formUtils.isReadOnly("branchCode"),
+    onInput: handleChangeFor("branchCode", "input"),
+    onBlur: handleChangeFor("branchCode", "blur"),
+    "aria-required": true,
+    "aria-label": formUtils.getLabel("branchCode"),
+    "aria-invalid": !valid.branchCode
   });
 }
 const currencyFields = ["currency"];
@@ -18566,23 +19073,25 @@ const bbanPatternsByCountry = {
   GB: /[A-Z]{4}\d{14}/,
   VG: /[\dA-Z]{4}\d{16}/
 };
-const regionsWithSharedIbanFormat = {
-  GB: ["GG", "IM", "JE"]
+const customPrefixByCountry = {
+  [CountryCodes.Guernsey]: "GB",
+  [CountryCodes.Jersey]: "GB",
+  [CountryCodes.IsleOfMan]: "GB"
 };
-function ibanValidator(input, bankCountries) {
-  var _a;
+function ibanValidator(input, bankCountry2) {
   if (isEmpty(input))
-    return "fieldIsRequired";
+    return false;
   const ibanInput = input.replace(/ /g, "").toUpperCase();
   if (!/^([a-zA-Z0-9]{4} ){2,8}[a-zA-Z0-9]{1,4}|[a-zA-Z0-9]{12,34}$/.test(ibanInput)) {
-    return "validationPleaseEnterAValidIban";
+    return false;
   }
   const countryCode = ibanInput.substring(0, 2);
-  if (bankCountries && !bankCountries.includes(countryCode) && !((_a = regionsWithSharedIbanFormat[countryCode]) == null ? void 0 : _a.includes(bankCountries[0]))) {
+  const allowedPrefix = customPrefixByCountry[bankCountry2] ?? bankCountry2;
+  if (countryCode !== allowedPrefix) {
     return {
       key: "yourIbanShouldBeginWith_",
       values: {
-        countryCode: bankCountries.join("/")
+        countryCode: allowedPrefix
       }
     };
   }
@@ -18590,7 +19099,7 @@ function ibanValidator(input, bankCountries) {
   if (bbanPattern) {
     const ibanPattern = new RegExp(`^[A-Z]{2}\\d{2}${bbanPattern.source}$`, "");
     if (!ibanPattern.test(ibanInput)) {
-      return "validationPleaseEnterAValidIban";
+      return false;
     }
   }
   const ibanCheck = ibanInput.substring(4, ibanInput.length) + ibanInput.substring(0, 4);
@@ -18611,33 +19120,129 @@ function ibanValidator(input, bankCountries) {
     const cOperator = +`${cRest}${cChar}`;
     cRest = cOperator % 97;
   }
-  return cRest === 1 ? void 0 : "validationPleaseEnterAValidIban";
+  return cRest === 1;
 }
-const ibanFormatter = {
-  iban: {
-    formatter: (val) => val ? val.replaceAll(" ", "") : ""
+const validateIbanOnBlurAndInput = (country2) => ({
+  modes: ["blur", "input"],
+  validate: (iban2) => ibanValidator(iban2, country2) === true,
+  errorMessage: (iban2) => {
+    const result = ibanValidator(iban2, country2);
+    return typeof result === "boolean" ? void 0 : result;
   }
+});
+const ibanMask = (country2, inputLength, includesBankCode) => {
+  const tokens = [];
+  tokens.push(...nonInputs(country2, {
+    includeInValue: true
+  }), ...numericInputs(2), spacer);
+  inputLength -= 2;
+  if (includesBankCode) {
+    tokens.push(...alphaInputs(4), spacer);
+    inputLength -= 4;
+  }
+  const numGroups = Math.floor(inputLength / 4);
+  const remainder = inputLength % 4;
+  for (let i = 0; i < numGroups; i += 1) {
+    tokens.push(...numericInputs(4), spacer);
+  }
+  tokens.push(...numericInputs(remainder));
+  return {
+    mask: {
+      tokens
+    },
+    transformOnType: includesBankCode ? uppercase : void 0
+  };
 };
-const ibanFields = ["iban"];
-const addCountryValidationForIban = (allowedCountries) => ({
-  iban: [{
-    modes: ["blur", "input"],
-    validate: (iban2) => ibanValidator(iban2, allowedCountries) === void 0,
-    errorMessage: (iban2) => ibanValidator(iban2, allowedCountries)
-  }]
+const ibanGuidance = (type, numDigitsOrChars, example) => type === "digits" ? {
+  key: "enterTheRemainingNDigitsForExample",
+  values: {
+    numDigits: `${numDigitsOrChars}`,
+    example
+  }
+} : {
+  key: "enterTheRemainingNCharactersForExample",
+  values: {
+    numChars: `${numDigitsOrChars}`,
+    example
+  }
+};
+const ibanMetadata = (country2, inputLength, example, includesBankCode) => ({
+  label: "iban",
+  validators: validateIbanOnBlurAndInput(country2),
+  mask: ibanMask(country2, inputLength, includesBankCode),
+  guidanceText: ibanGuidance(includesBankCode ? "characters" : "digits", inputLength, example)
 });
+const gbIbanMetadata = ibanMetadata(CountryCodes.UnitedKingdom, 20, "GB09 BARC 2003 9554 8297 59", true);
+const defaultFieldMetadata$1 = {
+  label: "iban",
+  validators: isNotEmptyValidator
+};
+const defaultFieldConfig$1 = {
+  [CountryCodes.Austria]: ibanMetadata(CountryCodes.Austria, 18, "AT88 5400 0746 7265 9747"),
+  [CountryCodes.Belgium]: ibanMetadata(CountryCodes.Belgium, 14, "BE59 9788 6743 2226"),
+  [CountryCodes.Croatia]: ibanMetadata(CountryCodes.Croatia, 19, "HR51 2484 0083 5929 6973 8"),
+  [CountryCodes.Cyprus]: ibanMetadata(CountryCodes.Cyprus, 26, "CY16 5183 1221 8756 5858 5388 7678"),
+  [CountryCodes.CzechRepublic]: ibanMetadata(CountryCodes.CzechRepublic, 22, "CZ23 5051 3674 5924 5233 3465"),
+  [CountryCodes.Estonia]: ibanMetadata(CountryCodes.Estonia, 18, "EE26 1291 5123 1542 6371"),
+  [CountryCodes.Finland]: ibanMetadata(CountryCodes.Finland, 16, "FI03 9319 8995 3742 51"),
+  [CountryCodes.Germany]: ibanMetadata(CountryCodes.Germany, 20, "DE91 1000 0000 0123 4567 89"),
+  [CountryCodes.Greece]: ibanMetadata(CountryCodes.Greece, 25, "GR57 0107 7142 7681 6687 9575 217"),
+  [CountryCodes.Hungary]: ibanMetadata(CountryCodes.Hungary, 26, "HU68 1070 0024 3428 4128 3192 4812"),
+  [CountryCodes.Italy]: ibanMetadata(CountryCodes.Italy, 25, "IT06 L030 0203 2809 8485 8934 882"),
+  [CountryCodes.Lithuania]: ibanMetadata(CountryCodes.Lithuania, 18, "LT59 9244 6228 2176 2762"),
+  [CountryCodes.Luxembourg]: ibanMetadata(CountryCodes.Luxembourg, 18, "LU71 0106 9242 5365 8562"),
+  [CountryCodes.Monaco]: ibanMetadata(CountryCodes.Monaco, 25, "MC58 1122 2000 0101 2345 6789 030"),
+  [CountryCodes.Portugal]: ibanMetadata(CountryCodes.Portugal, 23, "PT42 0035 0651 8646 9119 5263 5"),
+  [CountryCodes.Slovakia]: ibanMetadata(CountryCodes.Slovakia, 22, "SK25 5173 1333 4916 3219 3521"),
+  [CountryCodes.Spain]: ibanMetadata(CountryCodes.Spain, 22, "ES76 1465 5599 9226 7623 2635"),
+  // These include 4-letter bank codes
+  [CountryCodes.Bulgaria]: ibanMetadata(CountryCodes.Bulgaria, 20, "BG03 BNJE 8736 1280 1193 83", true),
+  [CountryCodes.Gibraltar]: ibanMetadata(CountryCodes.Gibraltar, 21, "GI75 HYKN 0120 0320 7038 453", true),
+  [CountryCodes.Ireland]: ibanMetadata(CountryCodes.Ireland, 20, "IE64 IRCE 9205 0112 3456 78", true),
+  [CountryCodes.Latvia]: ibanMetadata(CountryCodes.Latvia, 19, "LV80 BANK 0000 4351 9500 1", true),
+  [CountryCodes.Malta]: ibanMetadata(CountryCodes.Malta, 29, "MT03 VIXW 2487 8926 8575 8586 8929 858", true),
+  [CountryCodes.Netherlands]: ibanMetadata(CountryCodes.Netherlands, 16, "NL50 ABNA 4452 7591 49", true),
+  [CountryCodes.Romania]: ibanMetadata(CountryCodes.Romania, 22, "RO36 PORL 9596 9966 4965 4284", true),
+  [CountryCodes.UnitedKingdom]: gbIbanMetadata,
+  // IBANs for Guernsey, Jersey, and Isle of Man also use United Kingdom's format (starting with `GB`)
+  [CountryCodes.Guernsey]: gbIbanMetadata,
+  [CountryCodes.Jersey]: gbIbanMetadata,
+  [CountryCodes.IsleOfMan]: gbIbanMetadata,
+  // These are a little bit different
+  [CountryCodes.France]: {
+    label: "iban",
+    validators: validateIbanOnBlurAndInput(CountryCodes.France),
+    mask: {
+      mask: makeMask(...nonInputs("FR", {
+        includeInValue: true
+      }), ...numericInputs(2), spacer, ...numericInputs(4), spacer, ...numericInputs(4), spacer, ...numericInputs(4), spacer, ...numericInputs(4), spacer, ...numericInputs(4), spacer, ...alphaInputs(1), ...numericInputs(2)),
+      transformOnType: uppercase
+    },
+    guidanceText: ibanGuidance("characters", 25, "FR64 1009 6000 4035 3425 9742 Y90")
+  },
+  [CountryCodes.Liechtenstein]: {
+    label: "iban",
+    validators: validateIbanOnBlurAndInput(CountryCodes.Liechtenstein),
+    mask: {
+      mask: makeMask(...nonInputs("LT", {
+        includeInValue: true
+      }), ...numericInputs(2), spacer, ...numericInputs(4), spacer, ...numericInputs(4), spacer, ...numericInputs(4), spacer, ...numericInputs(3), ...alphaInputs(1), spacer, ...alphaInputs(1)),
+      transformOnType: uppercase
+    },
+    guidanceText: ibanGuidance("characters", 19, "LI21 0881 0000 2324 013A A")
+  }
+};
+const ibanFields = ["iban"];
 function Iban(props) {
   const {
     i18n
   } = useI18nContext();
   const {
-    dataStoreId,
-    country: country2
+    country: country2,
+    fieldConfig = defaultFieldConfig$1
   } = props;
-  const stateRef = useRef({
-    setState: null
-  });
-  const rules2 = useMemo(() => addCountryValidationForIban([country2]), [country2]);
+  const metadata = resolveFieldMetadata(fieldConfig[country2], {}, defaultFieldMetadata$1);
+  const mergedProps = mergeFieldMetadataIntoProps("iban", metadata, props);
   const {
     handleChangeFor,
     data,
@@ -18645,115 +19250,111 @@ function Iban(props) {
     errors,
     fieldProblems
   } = useForm({
-    ...props,
+    ...mergedProps,
     schema: ibanFields,
-    rules: rules2,
+    rules: mergedProps.validators,
     defaultData: props.data,
-    formatters: ibanFormatter,
     fieldProblems: props == null ? void 0 : props.fieldValidationErrors,
-    maskedFields: props.maskedFields
+    obscuredFields: props.obscuredFields
   });
+  const {
+    updateStateSlice
+  } = useGlobalDataSlice("payoutAccountDetails", "iban");
   useEffect(() => {
-    var _a, _b;
-    (_b = (_a = stateRef.current) == null ? void 0 : _a.setState) == null ? void 0 : _b.call(_a, {
-      type: "addToState",
-      value: {
-        data,
-        valid,
-        errors,
-        fieldProblems,
-        caller: "iban",
-        dataStoreId
-      }
+    updateStateSlice({
+      data,
+      valid,
+      errors,
+      fieldProblems
     });
   }, [data, errors, valid]);
-  const formUtils = formUtilities(props, i18n);
-  return jsxs(Fragment, {
-    children: [jsx(StateContextSetter, {
-      stateRef
-    }), jsx(Field, {
-      name: "iban",
-      label: formUtils.getLabel("iban"),
-      errorMessage: formUtils.getErrorMessage("iban", errors, fieldProblems) || "",
-      isValid: valid.iban,
-      children: (childProps) => jsx(InputText, {
-        ...childProps,
-        name: "iban",
-        value: data.iban,
-        readonly: formUtils.isReadOnly("iban"),
-        classNameModifiers: ["iban"],
-        onInput: handleChangeFor("iban", "blur"),
-        onBlur: handleChangeFor("iban", "blur"),
-        "aria-required": true,
-        "aria-label": formUtils.getLabel("iban"),
-        "aria-invalid": !valid.iban,
-        transformInput: (value) => value.toUpperCase()
-      })
-    })]
+  const formUtils = formUtilities(mergedProps, i18n);
+  return jsx(MaskedInputText, {
+    name: "iban",
+    label: formUtils.getLabel("iban"),
+    formatGuidance: formUtils.getGuidanceText("iban"),
+    ...formUtils.getMask("iban"),
+    errorMessage: formUtils.getErrorMessage("iban", errors, fieldProblems),
+    isValid: valid.iban,
+    value: data.iban ?? "",
+    readonly: formUtils.isReadOnly("iban"),
+    classNameModifiers: {
+      field: ["iban"],
+      input: ["iban"]
+    },
+    onInput: handleChangeFor("iban", "blur"),
+    onBlur: handleChangeFor("iban", "blur"),
+    "aria-required": true,
+    "aria-label": formUtils.getLabel("iban"),
+    "aria-invalid": !valid.iban,
+    acceptObscuredValue: formUtils.isObscured("iban")
   });
 }
+const swiftCodeFieldMetadata = {
+  label: "bicSwift",
+  validators: validatePatternOnBlur(/^([a-zA-Z0-9]{8}|[a-zA-Z0-9]{11})$/),
+  mask: {
+    mask: makeMask(...alphaInputs(6), ...alphanumericInputs(2), ...alphanumericInputs(3, true)),
+    transformOnType: uppercase
+  },
+  guidanceText: {
+    key: "enterXOrYCharactersForExample",
+    values: {
+      xChars: "8",
+      yChars: "11",
+      example: "BANKDE65287"
+    }
+  }
+};
 const swiftCodeFields = ["swiftCode"];
 function SwiftCode(props) {
   const {
     i18n
   } = useI18nContext();
-  const {
-    dataStoreId,
-    validators
-  } = props;
-  const stateRef = useRef({
-    setState: null
-  });
+  const mergedProps = mergeFieldMetadataIntoProps("swiftCode", swiftCodeFieldMetadata, props);
   const {
     handleChangeFor,
     data,
     valid,
     errors,
-    isValid,
     fieldProblems
   } = useForm({
-    ...props,
+    ...mergedProps,
     schema: swiftCodeFields,
-    rules: validators,
-    defaultData: props.data,
-    fieldProblems: props == null ? void 0 : props.fieldValidationErrors
+    rules: mergedProps.validators,
+    defaultData: mergedProps.data,
+    fieldProblems: mergedProps == null ? void 0 : mergedProps.fieldValidationErrors
   });
+  const {
+    updateStateSlice
+  } = useGlobalDataSlice("payoutAccountDetails", "swiftCode");
   useEffect(() => {
-    var _a, _b;
-    (_b = (_a = stateRef == null ? void 0 : stateRef.current) == null ? void 0 : _a.setState) == null ? void 0 : _b.call(_a, {
-      type: "addToState",
-      value: {
-        data,
-        valid,
-        errors,
-        fieldProblems,
-        caller: "swiftCode",
-        dataStoreId
-      }
+    updateStateSlice({
+      data,
+      valid,
+      errors,
+      fieldProblems
     });
-  }, [data, valid, errors, isValid]);
-  const formUtils = formUtilities(props, i18n);
-  return jsxs(Fragment, {
-    children: [jsx(StateContextSetter, {
-      stateRef
-    }), jsx(Field, {
-      name: "swiftCode",
-      label: formUtils.getLabel("swiftCode"),
-      classNameModifiers: ["swiftCode"],
-      errorMessage: formUtils.getErrorMessage("swiftCode", errors, fieldProblems),
-      isValid: valid.swiftCode,
-      children: (childProps) => jsx(InputText, {
-        ...childProps,
-        name: "swiftCode",
-        value: data.swiftCode,
-        readonly: formUtils.isReadOnly("swiftCode"),
-        onInput: handleChangeFor("swiftCode", "input"),
-        onBlur: handleChangeFor("swiftCode", "blur"),
-        "aria-required": true,
-        "aria-label": formUtils.getLabel("swiftCode"),
-        "aria-invalid": !valid.swiftCode
-      })
-    })]
+  }, [data, valid, errors]);
+  const formUtils = formUtilities(mergedProps, i18n);
+  return jsx(MaskedInputText, {
+    name: "swiftCode",
+    label: formUtils.getLabel("swiftCode"),
+    formatGuidance: formUtils.getGuidanceText("swiftCode"),
+    ...formUtils.getMask("swiftCode"),
+    classNameModifiers: {
+      field: ["swiftCode"],
+      input: ["swiftCode"]
+    },
+    errorMessage: formUtils.getErrorMessage("swiftCode", errors, fieldProblems),
+    isValid: valid.swiftCode,
+    value: data.swiftCode ?? "",
+    readonly: formUtils.isReadOnly("swiftCode"),
+    onInput: handleChangeFor("swiftCode", "input"),
+    onBlur: handleChangeFor("swiftCode", "blur"),
+    "aria-required": true,
+    "aria-label": formUtils.getLabel("swiftCode"),
+    "aria-invalid": !valid.swiftCode
   });
 }
 const payoutAccountFields = ["accountHolder", ...ibanFields, ...branchCodeFields, ...swiftCodeFields, ...currencyFields, ...bankAccountNumberFields, ...bankNameFields, ...bankCodeFields];
@@ -18776,14 +19377,10 @@ function PayoutAccountComponent(props) {
     legalEntityResponse,
     requiredFields = []
   } = props;
-  const stateRef = useRef({
-    setState: null
-  });
   const {
     data,
     valid,
     errors,
-    isValid,
     handleChangeFor,
     schema
   } = useForm({
@@ -18797,20 +19394,17 @@ function PayoutAccountComponent(props) {
     ...props,
     requiredFields
   }, i18n);
+  const {
+    updateStateSlice
+  } = useGlobalDataSlice("payoutAccountDetails");
   useEffect(() => {
-    var _a, _b;
-    (_b = (_a = stateRef.current).setState) == null ? void 0 : _b.call(_a, {
-      type: "addToState",
-      value: {
-        data,
-        valid,
-        errors,
-        caller: id2,
-        dataStoreId: id2,
-        schema
-      }
+    updateStateSlice({
+      data,
+      valid,
+      errors,
+      schema
     });
-  }, [data, valid, errors, isValid]);
+  }, [data, valid, errors]);
   const bankAccountNumberProps = getFieldProps(props, bankAccountNumberFields);
   const swiftCodeProps = getFieldProps(props, swiftCodeFields);
   const ibanProps = getFieldProps(props, ibanFields);
@@ -18824,10 +19418,7 @@ function PayoutAccountComponent(props) {
   return jsxs("form", {
     className: "adyen-kyc-individual__payout-account",
     "aria-describedby": "ariaErrorField",
-    children: [jsx(StateContextSetter, {
-      owner: id2,
-      stateRef
-    }), jsx(FormHeader, {
+    children: [jsx(FormHeader, {
       heading: props.heading
     }), jsx(ErrorPanel, {
       verificationErrors: props == null ? void 0 : props.formVerificationErrors,
@@ -18863,6 +19454,7 @@ function PayoutAccountComponent(props) {
       handleAccountFormatChange: setAccountFormat
     }), formUtils.isRequiredField("bankAccountNumber") && jsx(BankAccountNumber, {
       ...bankAccountNumberProps,
+      country: country2,
       dataStoreId: id2
     }), formUtils.isRequiredField("iban") && jsx(Iban, {
       ...ibanProps,
@@ -18876,9 +19468,11 @@ function PayoutAccountComponent(props) {
       dataStoreId: id2
     }), formUtils.isRequiredField("bankCode") && jsx(BankCode, {
       ...bankCodeProps,
+      country: country2,
       dataStoreId: id2
     }), formUtils.isRequiredField("branchCode") && jsx(BranchCode, {
       ...branchCodeProps,
+      country: country2,
       dataStoreId: id2
     }), formUtils.isRequiredField("bankCity") && jsx(BankCity, {
       ...bankCityProps,
@@ -21499,28 +22093,18 @@ const payoutFieldsMapping = {
   // not sure about this field
   OWNER_CITY: "accountHolderCity"
 };
-const maskedPayoutFields = [payoutFieldsMapping.NUMBER, payoutFieldsMapping.IBAN];
+const obscuredPayoutFields = [payoutFieldsMapping.NUMBER, payoutFieldsMapping.IBAN];
 const countryConfig$2 = {
-  [CountryCodes.Australia]: {
-    branchCode: {
-      label: "bsbNumber"
-    }
-  },
+  [CountryCodes.Australia]: {},
   [CountryCodes.Brazil]: {
     bankCode: {
       label: "bankCode"
-    },
-    branchCode: {
-      label: "branchCode"
     }
   },
   [CountryCodes.Canada]: {
     bankCode: {
       label: "institutionNumber"
     },
-    branchCode: {
-      label: "transitNumber"
-    },
     bankStatementDocument: {
       label: "listitemVoidedChequeBankLetterBankStatementOnline"
     }
@@ -21528,39 +22112,23 @@ const countryConfig$2 = {
   [CountryCodes.HongKong]: {
     bankCode: {
       label: "clearingCode"
-    },
-    branchCode: {
-      label: "branchCode"
-    }
-  },
-  [CountryCodes.Indonesia]: {
-    branchCode: {
-      label: "clearingCode"
     }
   },
+  [CountryCodes.Indonesia]: {},
   [CountryCodes.NewZealand]: {
     bankCode: {
       label: "bankCode"
-    },
-    branchCode: {
-      label: "branchCode"
     }
   },
   [CountryCodes.Singapore]: {
     bankCode: {
       label: "bankCode"
     },
-    branchCode: {
-      label: "branchCode"
-    },
     swiftCode: {
       label: "bic"
     }
   },
   [CountryCodes.UnitedKingdom]: {
-    branchCode: {
-      label: "sortCode"
-    },
     bankCity: {
       label: "bankCityTown"
     },
@@ -21568,11 +22136,7 @@ const countryConfig$2 = {
       label: "listitemVoidedChequeBankLetterBankStatementOnline"
     }
   },
-  [CountryCodes.UnitedStates]: {
-    branchCode: {
-      label: "achRoutingNumber"
-    }
-  }
+  [CountryCodes.UnitedStates]: {}
 };
 const parseValidationRule = (validationRule) => {
   const [name, start, end] = validationRule.split(":");
@@ -21818,7 +22382,7 @@ const identityNumber = {
   idNumber: {
     rule: "isDirectorIdNumberRequiredForCountry",
     verify: "isVerificationAllowedForCountry",
-    masked: true
+    obscured: true
   },
   idNumberExempt: {
     rules: ["idNumberExemptIfApplicableCountry", "isDirectorIdNumberRequiredForCountry"]
@@ -22115,7 +22679,7 @@ function parsePayoutScenarios({
         rule: bankVerificationAvailable ? "whenUsingManualVerification" : "REQUIRED",
         validators: [requiredValidatorRule]
       };
-      fieldConfigurations[fieldName].masked = maskedPayoutFields.includes(fieldName);
+      fieldConfigurations[fieldName].obscured = obscuredPayoutFields.includes(fieldName);
     }
   });
   if (bankVerificationAvailable) {
@@ -22174,7 +22738,7 @@ function getPropsFromConfigurations(scenarioConfiguration, forms2, remediationAc
   const helperText = {};
   const masks = {};
   const validators = {};
-  const maskedFields = {};
+  const obscuredFields = {};
   if (!scenarioConfiguration) {
     return;
   }
@@ -22241,8 +22805,8 @@ function getPropsFromConfigurations(scenarioConfiguration, forms2, remediationAc
             [field]: fieldConfigurations.validators
           };
         }
-        if (fieldConfigurations.masked) {
-          maskedFields[formId] = maskedFields[formId] ? [...maskedFields[formId], field] : [field];
+        if (fieldConfigurations.obscured) {
+          obscuredFields[formId] = obscuredFields[formId] ? [...obscuredFields[formId], field] : [field];
         }
       }
     });
@@ -22255,7 +22819,7 @@ function getPropsFromConfigurations(scenarioConfiguration, forms2, remediationAc
     verifyFields,
     placeholders,
     validators,
-    maskedFields,
+    obscuredFields,
     helperText,
     masks
   };
@@ -23786,15 +24350,6 @@ function useCompanySearch({
     reset
   };
 }
-const mapKompanyOrganizationTypeToCompanyType = (organizationType) => {
-  const organizationTypeValue = organizationType == null ? void 0 : organizationType.toLowerCase();
-  switch (organizationTypeValue) {
-    case "business":
-      return CompanyTypesValue.PRIVATE_COMPANY;
-    default:
-      return void 0;
-  }
-};
 const mapCompanyDataResponseToFormSchema = (company2) => ({
   companyBasics: {
     country: company2.country,
@@ -23809,9 +24364,10 @@ const mapCompanyDataResponseToFormSchema = (company2) => ({
       postalCode: company2.zipcode
     }
   },
-  companyStructure: {
-    entityType: mapKompanyOrganizationTypeToCompanyType(company2.organizationType)
-  },
+  // TODO: use this when CORE-6950 is completed (BE ticket)
+  // companyStructure: {
+  //   entityType: mapOrganizationTypeToCompanyType(company.organizationType),
+  // },
   companyOtherDetails: {
     registrationNumber: company2.registrationNumber
   }
@@ -24274,15 +24830,15 @@ function TaxInformationField({
     })]
   });
 }
-const defaultFieldMetadata = defaultFieldMetadata$2;
-const defaultFieldConfig = entriesOf(defaultFieldConfig$2).reduce((fieldConfig, [country2, countryEntry]) => ({
+const defaultFieldMetadata = defaultFieldMetadata$7;
+const defaultFieldConfig = entriesOf(defaultFieldConfig$7).reduce((fieldConfig, [country2, countryEntry]) => ({
   ...fieldConfig,
   [country2]: ({
     taxIdNumberType
   }) => {
     const fieldMetadata = resolveFieldMetadata(countryEntry, {
       taxIdNumberType
-    }, defaultFieldMetadata$2);
+    }, defaultFieldMetadata$7);
     const taxIdValidators = fieldMetadata.validators ? Array.isArray(fieldMetadata.validators) ? fieldMetadata.validators : [fieldMetadata.validators] : [];
     const mappedValidators = taxIdValidators.map((validator) => ({
       ...validator,
@@ -24319,7 +24875,7 @@ function CompanyBasics({
   formVerificationErrors,
   fieldValidationErrors,
   requiredFields,
-  maskedFields,
+  obscuredFields,
   optionalFields,
   readOnlyFields,
   handleCompanyIndexSearch,
@@ -24329,7 +24885,7 @@ function CompanyBasics({
   handleVerifyTin,
   country: country2,
   isTopLevelEntity,
-  kompanyAddress,
+  kompanyVerifiedData,
   setKompanyAddress,
   setKompanyVerifiedData
 }) {
@@ -24353,9 +24909,9 @@ function CompanyBasics({
     requiredFields,
     readOnlyFields,
     optionalFields,
-    maskedFields,
+    obscuredFields,
     shouldValidate
-  }), [helperText, labels2, maskedFields, optionalFields, placeholders, readOnly, readOnlyFields, requiredFields, shouldValidate]);
+  }), [helperText, labels2, obscuredFields, optionalFields, placeholders, readOnly, readOnlyFields, requiredFields, shouldValidate]);
   const mergedFieldProps = useMemo$1(() => {
     var _a2;
     return (_a2 = initialFormUtilsProps.requiredFields) == null ? void 0 : _a2.reduce((acc, field) => {
@@ -24407,7 +24963,7 @@ function CompanyBasics({
     defaultData: data,
     rules: mergedFieldProps == null ? void 0 : mergedFieldProps.validators,
     optionalFields: mergedFieldProps == null ? void 0 : mergedFieldProps.optionalFields,
-    maskedFields: mergedFieldProps == null ? void 0 : mergedFieldProps.maskedFields,
+    obscuredFields: mergedFieldProps == null ? void 0 : mergedFieldProps.obscuredFields,
     fieldProblems: fieldValidationErrors,
     shouldValidate
   });
@@ -24415,7 +24971,7 @@ function CompanyBasics({
   const formUtils = formUtilities(mergedFieldProps ?? initialFormUtilsProps, i18n);
   const hasCompanySearchProvider = formData.country && COUNTRIES_WITH_IN_APP_SEARCH_COMPANY_VERIFICATION.includes(formData.country);
   const currentCountryTaxIdNumber = (_b = (_a = formData.taxInformation) == null ? void 0 : _a.find((taxInfo) => taxInfo.country === formData.country)) == null ? void 0 : _b.number;
-  const disabled = (field) => formUtils.isReadOnly(field) || Boolean(kompanyAddress) || loading2;
+  const disabled = (field) => formUtils.isReadOnly(field) || Boolean(kompanyVerifiedData) || loading2;
   useEffect$1(() => {
     updateStateSlice({
       schema: formSchema,
@@ -24507,7 +25063,7 @@ function CompanyBasics({
     })]
   });
 }
-const CompanyBasicsComponent = memo(CompanyBasics, (prevProps, nextProps) => objectsDeepEqual(prevProps.data, nextProps.data) && objectsDeepEqual(prevProps.labels, nextProps.labels) && objectsDeepEqual(prevProps.placeholders, nextProps.placeholders) && objectsDeepEqual(prevProps.helperText, nextProps.helperText) && objectsDeepEqual(prevProps.formVerificationErrors, nextProps.formVerificationErrors) && objectsDeepEqual(prevProps.fieldValidationErrors, nextProps.fieldValidationErrors) && prevProps.heading === nextProps.heading && prevProps.description === nextProps.description && prevProps.readOnly === nextProps.readOnly && prevProps.requiredFields === nextProps.requiredFields && prevProps.maskedFields === nextProps.maskedFields && prevProps.optionalFields === nextProps.optionalFields && prevProps.readOnlyFields === nextProps.readOnlyFields && prevProps.shouldValidate === nextProps.shouldValidate && prevProps.kompanyAddress === nextProps.kompanyAddress);
+const CompanyBasicsComponent = memo(CompanyBasics, (prevProps, nextProps) => objectsDeepEqual(prevProps.data, nextProps.data) && objectsDeepEqual(prevProps.labels, nextProps.labels) && objectsDeepEqual(prevProps.placeholders, nextProps.placeholders) && objectsDeepEqual(prevProps.helperText, nextProps.helperText) && objectsDeepEqual(prevProps.formVerificationErrors, nextProps.formVerificationErrors) && objectsDeepEqual(prevProps.fieldValidationErrors, nextProps.fieldValidationErrors) && prevProps.heading === nextProps.heading && prevProps.description === nextProps.description && prevProps.readOnly === nextProps.readOnly && prevProps.requiredFields === nextProps.requiredFields && prevProps.obscuredFields === nextProps.obscuredFields && prevProps.optionalFields === nextProps.optionalFields && prevProps.readOnlyFields === nextProps.readOnlyFields && prevProps.shouldValidate === nextProps.shouldValidate && objectsDeepEqual(prevProps.kompanyVerifiedData, nextProps.kompanyVerifiedData));
 const CompanyOtherDetailsComponent$1 = "";
 const BUSINESS_REGISTRATION_NUMBER_FIELD = ["registrationNumber", "exemptedFromRegistrationNumber"];
 function BusinessRegistrationNumberField({
@@ -24822,7 +25378,7 @@ function CompanyOtherDetails({
   formVerificationErrors,
   fieldValidationErrors,
   requiredFields,
-  maskedFields,
+  obscuredFields,
   optionalFields,
   readOnlyFields,
   country: country2,
@@ -24855,9 +25411,9 @@ function CompanyOtherDetails({
     requiredFields,
     readOnlyFields,
     optionalFields,
-    maskedFields,
+    obscuredFields,
     shouldValidate
-  }), [helperText, labels2, maskedFields, optionalFields, placeholders, readOnly, readOnlyFields, requiredFields, shouldValidate]);
+  }), [helperText, labels2, obscuredFields, optionalFields, placeholders, readOnly, readOnlyFields, requiredFields, shouldValidate]);
   const mergedFieldProps = useMemo$1(() => {
     var _a2;
     return (_a2 = initialFormUtilsProps.requiredFields) == null ? void 0 : _a2.reduce((acc, field) => {
@@ -24895,18 +25451,18 @@ function CompanyOtherDetails({
             }
           };
         case "registrationNumber":
-          return mergeFieldMetadataIntoProps(field, resolveFieldMetadata(defaultFieldConfig$3[country2], {
+          return mergeFieldMetadataIntoProps(field, resolveFieldMetadata(defaultFieldConfig$8[country2], {
             companyType: companyType2,
             registrationNumberType
-          }, defaultFieldMetadata$3), acc);
+          }, defaultFieldMetadata$8), acc);
         case "taxInformation":
           return mergeFieldMetadataIntoProps(field, resolveFieldMetadata(defaultFieldConfig[country2], {
             taxIdNumberType: taxIdentificationNumberType
           }, defaultFieldMetadata), acc);
         case "vatNumber":
-          return mergeFieldMetadataIntoProps(field, resolveFieldMetadata(defaultFieldConfig$1[country2], {
+          return mergeFieldMetadataIntoProps(field, resolveFieldMetadata(defaultFieldConfig$6[country2], {
             vatNumberType: taxIdentificationNumberType
-          }, defaultFieldMetadata$1), acc);
+          }, defaultFieldMetadata$6), acc);
         default:
           return acc;
       }
@@ -24925,7 +25481,7 @@ function CompanyOtherDetails({
     defaultData: data,
     rules: mergedFieldProps == null ? void 0 : mergedFieldProps.validators,
     optionalFields: mergedFieldProps == null ? void 0 : mergedFieldProps.optionalFields,
-    maskedFields: mergedFieldProps == null ? void 0 : mergedFieldProps.maskedFields,
+    obscuredFields: mergedFieldProps == null ? void 0 : mergedFieldProps.obscuredFields,
     fieldProblems: fieldValidationErrors,
     shouldValidate
   });
@@ -25074,7 +25630,7 @@ function CompanyOtherDetails({
     })]
   });
 }
-const CompanyOtherDetailsComponent = memo(CompanyOtherDetails, (prevProps, nextProps) => objectsDeepEqual(prevProps.data, nextProps.data) && objectsDeepEqual(prevProps.labels, nextProps.labels) && objectsDeepEqual(prevProps.placeholders, nextProps.placeholders) && objectsDeepEqual(prevProps.helperText, nextProps.helperText) && objectsDeepEqual(prevProps.formVerificationErrors, nextProps.formVerificationErrors) && objectsDeepEqual(prevProps.fieldValidationErrors, nextProps.fieldValidationErrors) && prevProps.heading === nextProps.heading && prevProps.description === nextProps.description && prevProps.requiredFields === nextProps.requiredFields && prevProps.maskedFields === nextProps.maskedFields && prevProps.optionalFields === nextProps.optionalFields && prevProps.readOnlyFields === nextProps.readOnlyFields && prevProps.shouldValidate === nextProps.shouldValidate && prevProps.readOnly === nextProps.readOnly && prevProps.country === nextProps.country && prevProps.legalCompanyName === nextProps.legalCompanyName && prevProps.companyType === nextProps.companyType && prevProps.kompanyVerifiedData === nextProps.kompanyVerifiedData);
+const CompanyOtherDetailsComponent = memo(CompanyOtherDetails, (prevProps, nextProps) => objectsDeepEqual(prevProps.data, nextProps.data) && objectsDeepEqual(prevProps.labels, nextProps.labels) && objectsDeepEqual(prevProps.placeholders, nextProps.placeholders) && objectsDeepEqual(prevProps.helperText, nextProps.helperText) && objectsDeepEqual(prevProps.formVerificationErrors, nextProps.formVerificationErrors) && objectsDeepEqual(prevProps.fieldValidationErrors, nextProps.fieldValidationErrors) && prevProps.heading === nextProps.heading && prevProps.description === nextProps.description && prevProps.requiredFields === nextProps.requiredFields && prevProps.obscuredFields === nextProps.obscuredFields && prevProps.optionalFields === nextProps.optionalFields && prevProps.readOnlyFields === nextProps.readOnlyFields && prevProps.shouldValidate === nextProps.shouldValidate && prevProps.readOnly === nextProps.readOnly && prevProps.country === nextProps.country && prevProps.legalCompanyName === nextProps.legalCompanyName && prevProps.companyType === nextProps.companyType && prevProps.kompanyVerifiedData === nextProps.kompanyVerifiedData);
 const CompanyStructureComponent$1 = "";
 const CompanyStructureValidation = {
   entityType: {
@@ -25586,7 +26142,7 @@ function CompanySearchComponent(props) {
         handleGetCompanyDataset,
         handleRefreshCompanyDataset,
         handleVerifyTin,
-        kompanyAddress,
+        kompanyVerifiedData,
         setKompanyAddress,
         setKompanyVerifiedData
       })
@@ -26717,7 +27273,7 @@ const Remove = ({
     })
   }) : jsx(Button, {
     type: "button",
-    icon: !hasLabel ? "bin" : "",
+    icon: !hasLabel ? "bin" : void 0,
     ghost: !hasLabel,
     secondary: hasLabel,
     negative: hasLabel,
@@ -27563,13 +28119,13 @@ const PayoutAccountTaskListItem = ({
   const [isDeletingTransferInstrument, setIsDeletingTransferInstrument] = useState(false);
   const isInstantVerificationAccount = isInstantVerifiedAccount(account);
   const [isRemoveDisabled, setIsRemoveDisabled] = useState(false);
-  const maskedAccountNumber = getMaskedAccountNumber(account);
+  const obscuredAccountNumber = getObscuredAccountNumber(account);
   const status = getTaskStatus(EntityType.BANK_ACCOUNT, capabilityProblems, legalEntityResponse, [account.id], isInstantVerificationAccount);
   return jsx(TaskListItem, {
     disabled: isInstantVerificationAccount && status === TaskStatus.PROCESSING,
     onNavigateToTask: isInstantVerificationAccount ? void 0 : onNavigateToTask,
     icon: "payout",
-    title: maskedAccountNumber,
+    title: obscuredAccountNumber,
     tagline: isExperimentEnabled("EnableNewEntryFlow") ? void 0 : i18n.get("payoutDetails"),
     status,
     problems: (_a = capabilityProblems == null ? void 0 : capabilityProblems.BankAccount) == null ? void 0 : _a[account.id],
@@ -27805,7 +28361,7 @@ function TaskListComponent({
         title: i18n.get("pleaseEnsureTheFollowing"),
         children: jsx(TaskListItem, {
           onNavigateToTask: handleOnNavigateToTaskReview,
-          icon: "ari",
+          icon: "review",
           title: i18n.get("submitReviewOfYourData"),
           status: TaskStatus.SUBMIT,
           problems: (_m = capabilityProblems == null ? void 0 : capabilityProblems.LegalEntity) == null ? void 0 : _m[legalEntityResponse.id],
@@ -28139,16 +28695,16 @@ const TrustMembersOverview = ({
     })
   });
 };
-const omitMaskedFieldsIfUnchanged = (maskedFields, dataSubmitted, savedData) => {
+const omitObscuredFieldsIfUnchanged = (obscuredFields, dataSubmitted, savedData) => {
   if (!dataSubmitted) {
     return;
   }
   const filtered = cloneObject(dataSubmitted);
-  maskedFields.forEach((maskedField) => {
-    const prevValue = getProp(savedData, maskedField);
-    const newValue = getProp(dataSubmitted, maskedField);
-    if (prevValue === newValue && isValueMasked(newValue)) {
-      deleteProp(maskedField, filtered);
+  obscuredFields.forEach((obscuredField) => {
+    const prevValue = getProp(savedData, obscuredField);
+    const newValue = getProp(dataSubmitted, obscuredField);
+    if (prevValue === newValue && isValueObscured(newValue)) {
+      deleteProp(obscuredField, filtered);
     }
   });
   return filtered;
@@ -28401,7 +28957,7 @@ function IndividualDropinComponent({
   const onSubmit = async () => {
     var _a2, _b2;
     setLoadingStatus("loading");
-    const dataSubmitted = omitMaskedFieldsIfUnchanged(individualMaskedFields, data, dataFromResponse);
+    const dataSubmitted = omitObscuredFieldsIfUnchanged(individualObscuredFields, data, dataFromResponse);
     try {
       const legalEntity = mapIndividualToLegalEntity(dataSubmitted);
       const idDocumentType = (_a2 = idDocumentTypeOptions.find(({
@@ -28951,7 +29507,7 @@ function PayoutDetailsDropinComponent({
       if (defaultPayoutCountry === CountryCodes.Sweden && "iban" in payoutAccountDetails) {
         payoutAccountDetails.currency = Currency.EUR;
       }
-      dataSubmitted.payoutAccountDetails = omitMaskedFieldsIfUnchanged(maskedPayoutFields, payoutAccountDetails, existingPayoutDetails == null ? void 0 : existingPayoutDetails.payoutAccountDetails);
+      dataSubmitted.payoutAccountDetails = omitObscuredFieldsIfUnchanged(obscuredPayoutFields, payoutAccountDetails, existingPayoutDetails == null ? void 0 : existingPayoutDetails.payoutAccountDetails);
     }
     const event = {
       segmentation: {
@@ -32414,31 +32970,6 @@ const AuthProvider = ({
     children
   });
 };
-const fontFormats = ["eot", "woff", "woff2", "ttf", "otf"];
-const formatFullNames = {
-  eot: "embedded-opentype",
-  woff: "woff",
-  woff2: "woff2",
-  ttf: "truetype",
-  otf: "opentype"
-};
-const getFontFaceRule = (fontFamily, fontStyle, fontWeight, fontPath, formats) => {
-  const fontSources = formats.map((format) => `url(${fontPath}.${format}) format(${formatFullNames[format]})`);
-  const ruleLines = [`font-family: '${fontFamily}'`, `font-style: ${fontStyle}`, `font-weight: ${fontWeight}`, `src: ${fontSources.join(",")}`];
-  return `@font-face {${ruleLines.join(";")}}`;
-};
-const addStyleTagForFont = (fontFamily, fontStyle, fontWeight, fontPath, formats) => {
-  const style = document.createElement("style");
-  style.setAttribute("type", "text/css");
-  style.innerText = getFontFaceRule(fontFamily, fontStyle, fontWeight, fontPath, formats);
-  document.head.insertBefore(style, document.head.firstChild);
-};
-const addStyleTagForADLIconFont = (loadingContext) => {
-  const fontPath = `${loadingContext}static/fonts`;
-  const iconFontPath = `${fontPath}/adyen-kyc-icons`;
-  addStyleTagForFont("adyen-kyc-icons", "normal", "normal", iconFontPath, fontFormats);
-};
-let isFlagsLoaded = false;
 let isDocumentGuidanceLoaded = false;
 const getIconContainer = () => {
   const container = document.createElement("div");
@@ -32452,16 +32983,6 @@ const buildSpriteDOMFromResponse = (responseData) => {
   iconContainer.innerHTML = responseData;
   return iconContainer;
 };
-const loadFlags = async (loadingContext) => {
-  if (isFlagsLoaded)
-    return;
-  isFlagsLoaded = true;
-  const responseData = await http({
-    loadingContext,
-    path: "static/images/country-flags.svg"
-  }, null, "text");
-  document.body.insertBefore(buildSpriteDOMFromResponse(responseData), document.body.firstChild);
-};
 const loadDocumentGuidance = async (loadingContext) => {
   if (isDocumentGuidanceLoaded)
     return;
@@ -32594,7 +33115,6 @@ const getEmbeddedApi = ({
       ...baseRequestContext,
       loadingContext
     }, datasetIdentifier2, locale),
-    loadFlags: async () => loadFlags(base),
     loadDocumentGuidance: async () => loadDocumentGuidance(base),
     getImageUrl: () => `${base}static/images/`,
     getAllowedCountries: async () => getSupportedCountries(baseRequestContext),
@@ -32738,7 +33258,6 @@ const getKycExternalApi = ({
     loadingContext,
     clientKey
   }, name, locale),
-  loadFlags: async () => loadFlags(loadingContext),
   loadDocumentGuidance: async () => loadDocumentGuidance(loadingContext),
   verifyIdNumber: async (request) => verifyIdNumber({
     loadingContext,
@@ -32773,15 +33292,9 @@ const CoreProvider = ({
   enableNewEntryFlowExperiment = false,
   children
 }) => {
-  const {
-    loadingContext
-  } = useAuthContext();
   const [contextCountry, setContextCountry] = useState(initialContextCountry);
   const [accountHolder2, setAccountHolder] = useAccountHolder(enableNewEntryFlowExperiment);
   const [accountFormat, setAccountFormat] = useState("local");
-  useEffect(() => {
-    addStyleTagForADLIconFont(loadingContext);
-  }, [loadingContext]);
   const allowedCountries = useAllowedCountries();
   const isCountryAllowed = (allowedCountries == null ? void 0 : allowedCountries.includes(contextCountry)) ?? true;
   useEffect(() => {