@adyen/kyc-components 3.21.1 → 3.21.3

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

@@ -8799,159 +8799,6 @@ function InputDate(props) {
     maxLength: 10
   });
 }
-const STOCK_EXCHANGE_MIC_FIELD = ["stockExchangeMIC"];
-function StockExchangeMICField({
-  data,
-  valid,
-  errors,
-  labels: labels2,
-  placeholders,
-  readonly,
-  mask,
-  guidanceText,
-  shouldValidate,
-  handleChangeFor
-}) {
-  return jsx(MaskedInputText, {
-    name: "stockExchangeMIC",
-    label: labels2.stockExchangeMIC ?? "",
-    formatGuidance: guidanceText == null ? void 0 : guidanceText.stockExchangeMIC,
-    placeholder: placeholders == null ? void 0 : placeholders.stockExchangeMIC,
-    ...mask,
-    classNameModifiers: {
-      field: ["stockExchangeMIC"],
-      input: ["stockExchangeMIC"]
-    },
-    errorMessage: errors.stockExchangeMIC,
-    isValid: valid.stockExchangeMIC ?? false,
-    value: data.stockExchangeMIC ?? "",
-    readonly,
-    shouldValidate,
-    onInput: handleChangeFor("stockExchangeMIC", "input"),
-    onBlur: handleChangeFor("stockExchangeMIC", "blur"),
-    "aria-required": true,
-    "aria-label": labels2.stockExchangeMIC,
-    "aria-invalid": !valid.stockExchangeMIC
-  });
-}
-const stockExchangeMICFieldMetadata = {
-  label: "stockExchangeMIC",
-  validators: [validateNotEmptyOnBlur, validatePatternOnBlur(/^[a-zA-Z0-9]{4}$/)],
-  mask: {
-    mask: makeMask(...alphanumericInputs(4)),
-    transformOnType: uppercase
-  },
-  guidanceText: {
-    key: "enterNCharactersForExample",
-    values: {
-      numChars: "4",
-      example: "XNAS"
-    }
-  }
-};
-const STOCK_ISIN_FIELD = ["stockISIN"];
-function StockISINField({
-  data,
-  valid,
-  errors,
-  labels: labels2,
-  placeholders,
-  readonly,
-  mask,
-  guidanceText,
-  shouldValidate,
-  handleChangeFor
-}) {
-  return jsx(MaskedInputText, {
-    name: "stockISIN",
-    label: labels2.stockISIN ?? "",
-    formatGuidance: guidanceText == null ? void 0 : guidanceText.stockISIN,
-    placeholder: placeholders == null ? void 0 : placeholders.stockISIN,
-    ...mask,
-    classNameModifiers: {
-      field: ["stockISIN"],
-      input: ["stockISIN"]
-    },
-    errorMessage: errors.stockISIN,
-    isValid: valid.stockISIN ?? false,
-    value: data.stockISIN ?? "",
-    readonly,
-    shouldValidate,
-    onInput: handleChangeFor("stockISIN", "input"),
-    onBlur: handleChangeFor("stockISIN", "blur"),
-    "aria-required": true,
-    "aria-label": labels2.stockISIN,
-    "aria-invalid": !valid.stockISIN
-  });
-}
-const stockISINFieldMetadata = {
-  label: "stockISIN",
-  validators: [validateNotEmptyOnBlur, {
-    modes: ["blur"],
-    validate: (value) => !!value && isISIN(value)
-  }],
-  mask: {
-    mask: makeMask(...alphaInputs(2), ...alphanumericInputs(9), ...numericInputs(1)),
-    transformOnType: uppercase
-  },
-  helperText: "stockISINHelper",
-  guidanceText: {
-    key: "validationPleaseEnterAValidStockISIN",
-    values: {
-      example: "NL0012969182"
-    }
-  }
-};
-const STOCK_TICKER_SYMBOL_FIELD = ["stockTickerSymbol"];
-function StockTickerSymbolField({
-  data,
-  valid,
-  errors,
-  labels: labels2,
-  placeholders,
-  readonly,
-  mask,
-  guidanceText,
-  shouldValidate,
-  handleChangeFor
-}) {
-  return jsx(MaskedInputText, {
-    name: "stockTickerSymbol",
-    label: labels2.stockTickerSymbol ?? "",
-    formatGuidance: guidanceText == null ? void 0 : guidanceText.stockTickerSymbol,
-    placeholder: placeholders == null ? void 0 : placeholders.stockTickerSymbol,
-    ...mask,
-    classNameModifiers: {
-      field: ["stockTickerSymbol"],
-      input: ["stockTickerSymbol"]
-    },
-    errorMessage: errors.stockTickerSymbol,
-    isValid: valid.stockTickerSymbol ?? false,
-    value: data.stockTickerSymbol ?? "",
-    readonly,
-    shouldValidate,
-    onInput: handleChangeFor("stockTickerSymbol", "input"),
-    onBlur: handleChangeFor("stockTickerSymbol", "blur"),
-    "aria-required": true,
-    "aria-label": labels2.stockTickerSymbol,
-    "aria-invalid": !valid.stockTickerSymbol
-  });
-}
-const stockTickerSymbolFieldMetadata = {
-  label: "stockTickerSymbol",
-  validators: [validateNotEmptyOnBlur, validatePatternOnBlur(/^[A-Z\d]{1,5}$/)],
-  mask: {
-    mask: makeMask(...alphanumericInputs(1), ...alphanumericInputs(4)),
-    transformOnType: uppercase
-  },
-  guidanceText: {
-    key: "enterAMaximumOfNCharactersForExample",
-    values: {
-      maxChars: "5",
-      example: "ADYEN"
-    }
-  }
-};
 const defaultFieldMetadata$8 = {
   label: "taxId"
 };
@@ -9251,6 +9098,9 @@ const defaultFieldConfig$8 = {
     validators: validatePatternOnBlur(/^\d{12}$/)
   }
 };
+const vatAbsenceReasonMetadata = {
+  validators: [validateNotEmptyOnBlur]
+};
 const defaultFieldMetadata$7 = {
   label: "vatNumber"
 };
@@ -9898,6 +9748,159 @@ const inferTaxIdNumberType = (taxId2, country2, companyType2) => {
     }
   }
 };
+const STOCK_EXCHANGE_MIC_FIELD = ["stockExchangeMIC"];
+function StockExchangeMICField({
+  data,
+  valid,
+  errors,
+  labels: labels2,
+  placeholders,
+  readonly,
+  mask,
+  guidanceText,
+  shouldValidate,
+  handleChangeFor
+}) {
+  return jsx(MaskedInputText, {
+    name: "stockExchangeMIC",
+    label: labels2.stockExchangeMIC ?? "",
+    formatGuidance: guidanceText == null ? void 0 : guidanceText.stockExchangeMIC,
+    placeholder: placeholders == null ? void 0 : placeholders.stockExchangeMIC,
+    ...mask,
+    classNameModifiers: {
+      field: ["stockExchangeMIC"],
+      input: ["stockExchangeMIC"]
+    },
+    errorMessage: errors.stockExchangeMIC,
+    isValid: valid.stockExchangeMIC ?? false,
+    value: data.stockExchangeMIC ?? "",
+    readonly,
+    shouldValidate,
+    onInput: handleChangeFor("stockExchangeMIC", "input"),
+    onBlur: handleChangeFor("stockExchangeMIC", "blur"),
+    "aria-required": true,
+    "aria-label": labels2.stockExchangeMIC,
+    "aria-invalid": !valid.stockExchangeMIC
+  });
+}
+const stockExchangeMICFieldMetadata = {
+  label: "stockExchangeMIC",
+  validators: [validateNotEmptyOnBlur, validatePatternOnBlur(/^[a-zA-Z0-9]{4}$/)],
+  mask: {
+    mask: makeMask(...alphanumericInputs(4)),
+    transformOnType: uppercase
+  },
+  guidanceText: {
+    key: "enterNCharactersForExample",
+    values: {
+      numChars: "4",
+      example: "XNAS"
+    }
+  }
+};
+const STOCK_ISIN_FIELD = ["stockISIN"];
+function StockISINField({
+  data,
+  valid,
+  errors,
+  labels: labels2,
+  placeholders,
+  readonly,
+  mask,
+  guidanceText,
+  shouldValidate,
+  handleChangeFor
+}) {
+  return jsx(MaskedInputText, {
+    name: "stockISIN",
+    label: labels2.stockISIN ?? "",
+    formatGuidance: guidanceText == null ? void 0 : guidanceText.stockISIN,
+    placeholder: placeholders == null ? void 0 : placeholders.stockISIN,
+    ...mask,
+    classNameModifiers: {
+      field: ["stockISIN"],
+      input: ["stockISIN"]
+    },
+    errorMessage: errors.stockISIN,
+    isValid: valid.stockISIN ?? false,
+    value: data.stockISIN ?? "",
+    readonly,
+    shouldValidate,
+    onInput: handleChangeFor("stockISIN", "input"),
+    onBlur: handleChangeFor("stockISIN", "blur"),
+    "aria-required": true,
+    "aria-label": labels2.stockISIN,
+    "aria-invalid": !valid.stockISIN
+  });
+}
+const stockISINFieldMetadata = {
+  label: "stockISIN",
+  validators: [validateNotEmptyOnBlur, {
+    modes: ["blur"],
+    validate: (value) => !!value && isISIN(value)
+  }],
+  mask: {
+    mask: makeMask(...alphaInputs(2), ...alphanumericInputs(9), ...numericInputs(1)),
+    transformOnType: uppercase
+  },
+  helperText: "stockISINHelper",
+  guidanceText: {
+    key: "validationPleaseEnterAValidStockISIN",
+    values: {
+      example: "NL0012969182"
+    }
+  }
+};
+const STOCK_TICKER_SYMBOL_FIELD = ["stockTickerSymbol"];
+function StockTickerSymbolField({
+  data,
+  valid,
+  errors,
+  labels: labels2,
+  placeholders,
+  readonly,
+  mask,
+  guidanceText,
+  shouldValidate,
+  handleChangeFor
+}) {
+  return jsx(MaskedInputText, {
+    name: "stockTickerSymbol",
+    label: labels2.stockTickerSymbol ?? "",
+    formatGuidance: guidanceText == null ? void 0 : guidanceText.stockTickerSymbol,
+    placeholder: placeholders == null ? void 0 : placeholders.stockTickerSymbol,
+    ...mask,
+    classNameModifiers: {
+      field: ["stockTickerSymbol"],
+      input: ["stockTickerSymbol"]
+    },
+    errorMessage: errors.stockTickerSymbol,
+    isValid: valid.stockTickerSymbol ?? false,
+    value: data.stockTickerSymbol ?? "",
+    readonly,
+    shouldValidate,
+    onInput: handleChangeFor("stockTickerSymbol", "input"),
+    onBlur: handleChangeFor("stockTickerSymbol", "blur"),
+    "aria-required": true,
+    "aria-label": labels2.stockTickerSymbol,
+    "aria-invalid": !valid.stockTickerSymbol
+  });
+}
+const stockTickerSymbolFieldMetadata = {
+  label: "stockTickerSymbol",
+  validators: [validateNotEmptyOnBlur, validatePatternOnBlur(/^[A-Z\d]{1,5}$/)],
+  mask: {
+    mask: makeMask(...alphanumericInputs(1), ...alphanumericInputs(4)),
+    transformOnType: uppercase
+  },
+  guidanceText: {
+    key: "enterAMaximumOfNCharactersForExample",
+    values: {
+      maxChars: "5",
+      example: "ADYEN"
+    }
+  }
+};
 function TaxIdNumberTypeSelector({
   country: country2,
   companyType: companyType2,
@@ -10121,16 +10124,24 @@ const vatAbsenceReasons = [
   "belowTaxThreshold"
   /* BelowTaxThreshold */
 ];
-const vatNumberFields = ["vatNumber", "exemptedFromVat", "vatAbsenceReason"];
-function VatNumber(props) {
-  var _a, _b, _c;
-  const {
-    data: propData,
-    country: country2,
-    fieldValidationErrors,
-    dataStoreId,
-    fieldConfig = defaultFieldConfig$7
-  } = props;
+const VAT_NUMBER_FIELD = ["vatNumber", "exemptedFromVat", "vatAbsenceReason"];
+function VatNumberField({
+  data,
+  valid,
+  errors,
+  labels: labels2,
+  mask,
+  guidanceText,
+  placeholders,
+  readonly,
+  shouldValidate,
+  handleChangeFor,
+  canExempt,
+  country: country2,
+  vatNumberType,
+  setVatNumberType
+}) {
+  var _a;
   const {
     isExperimentEnabled
   } = useExperimentsContext();
@@ -10142,115 +10153,64 @@ function VatNumber(props) {
     id: VatAbsenceReason.CountryWithoutVatOrGstSystem,
     name: VatAbsenceReason.CountryWithoutVatOrGstSystem
   }]);
-  const existingTaxId = propData == null ? void 0 : propData.vatNumber;
-  const defaultTaxIdNumberType = existingTaxId ? inferTaxIdNumberType(existingTaxId, country2, void 0) : (_a = taxIdNumberOptions[country2]) == null ? void 0 : _a[0].id;
-  const [taxIdNumberType, setTaxIdNumberType] = useState(defaultTaxIdNumberType);
-  const metadata = resolveFieldMetadata(fieldConfig[country2], {
-    vatNumberType: taxIdNumberType
-  }, defaultFieldMetadata$7);
-  const mergedProps = mergeFieldMetadataIntoProps("vatNumber", metadata, props);
-  const {
-    i18n
-  } = useI18nContext();
-  const formUtils = formUtilities(mergedProps, i18n);
-  const stateRef = useRef({
-    setState: null
-  });
-  const {
-    handleChangeFor,
-    data,
-    valid,
-    errors,
-    isValid,
-    fieldProblems
-  } = useForm({
-    ...mergedProps,
-    schema: (data2) => data2.exemptedFromVat ? ["vatAbsenceReason", "exemptedFromVat"] : ["vatNumber", "exemptedFromVat"],
-    rules: mergedProps.validators,
-    defaultData: {
-      ...propData,
-      exemptedFromVat: !!(propData == null ? void 0 : propData.exemptedFromVat)
-    },
-    // exemptedFromVat should be a boolean
-    fieldProblems: fieldValidationErrors
-  });
-  useEffect(() => {
-    if (data.vatNumber || taxIdNumberType) {
-      handleChangeFor("vatNumber", "blur")(data.vatNumber);
-    }
-  }, [taxIdNumberType, country2]);
-  useEffect(() => {
-    var _a2, _b2;
-    (_b2 = (_a2 = stateRef.current) == null ? void 0 : _a2.setState) == null ? void 0 : _b2.call(_a2, {
-      type: "addToState",
-      value: {
-        data,
-        valid,
-        errors,
-        caller: "vatNumber",
-        dataStoreId
-      }
-    });
-  }, [data, valid, errors, isValid]);
-  if (!formUtils.isRequiredField("vatNumber")) return null;
-  const exemptionIsPossible = ((_b = mergedProps.requiredFields) == null ? void 0 : _b.includes("exemptedFromVat")) ?? false;
-  const showTaxIdExemptedOption = exemptionIsPossible && ((_c = taxIdNumberOptions[country2]) == null ? void 0 : _c.length) > 1;
-  const handleTaxIdNumberTypeChange = (taxIdType) => {
-    if (taxIdType === "exempted") {
-      if (!exemptionIsPossible) {
+  const showVatExemptedOption = canExempt && ((_a = taxIdNumberOptions[country2]) == null ? void 0 : _a.length) > 1;
+  const handleVatNumberTypeChange = (vatType) => {
+    if (vatType === "exempted") {
+      if (!canExempt) {
         throw Error(`${country2} does not allow VAT exemptions`);
       }
       handleChangeFor("exemptedFromVat")(true);
-      setTaxIdNumberType(void 0);
+      setVatNumberType(void 0);
       return;
     }
-    if (exemptionIsPossible && data.exemptedFromVat === true) {
+    if (canExempt && data.exemptedFromVat === true) {
       handleChangeFor("exemptedFromVat")(false);
     }
-    setTaxIdNumberType(taxIdType);
+    setVatNumberType(vatType);
   };
   return jsxs("div", {
-    className: "adyen-kyc-field--tax-id",
-    children: [jsx(StateContextSetter, {
-      stateRef
-    }), jsx(TaxIdNumberTypeSelector, {
+    className: "adyen-kyc-field__vat-number",
+    children: [jsx(TaxIdNumberTypeSelector, {
       country: country2,
-      setSelected: handleTaxIdNumberTypeChange,
-      selected: data.exemptedFromVat ? "exempted" : taxIdNumberType,
-      exemptedOption: showTaxIdExemptedOption ? formUtils.getLabel("exemptedFromVat", "iDontHaveAVatNumber") : false
+      setSelected: handleVatNumberTypeChange,
+      selected: data.exemptedFromVat ? "exempted" : vatNumberType,
+      exemptedOption: showVatExemptedOption ? labels2.exemptedFromVat : false
     }), jsx(MaskedInputText, {
-      name: "vatNumber",
-      label: formUtils.getLabel("vatNumber"),
-      formatGuidance: formUtils.getGuidanceText("vatNumber"),
-      ...formUtils.getMask("vatNumber"),
+      "aria-required": true,
+      "aria-label": labels2.vatNumber,
+      "aria-invalid": !valid.vatNumber,
       classNameModifiers: {
         field: ["tax-id"],
         input: ["vatNumber"]
       },
-      errorMessage: formUtils.getErrorMessage("vatNumber", errors, fieldProblems),
-      shouldValidate: props.shouldValidate,
-      isValid: valid.vatNumber,
-      value: data.vatNumber ?? "",
-      readonly: formUtils.isReadOnly("vatNumber"),
+      name: "vatNumber",
+      value: (data == null ? void 0 : data.vatNumber) ?? "",
+      label: labels2.vatNumber ?? "",
+      formatGuidance: (guidanceText == null ? void 0 : guidanceText.vatNumber) ?? "",
+      placeholder: placeholders == null ? void 0 : placeholders.vatNumber,
+      errorMessage: errors.vatNumber,
+      isValid: Boolean(valid.vatNumber),
       onInput: handleChangeFor("vatNumber", "input"),
       onBlur: handleChangeFor("vatNumber", "blur"),
-      disabled: data.exemptedFromVat
-    }), formUtils.isRequiredField("exemptedFromVat") && !showTaxIdExemptedOption && jsx(Checkbox, {
+      disabled: data.exemptedFromVat,
+      readonly,
+      shouldValidate,
+      ...mask
+    }), canExempt && !showVatExemptedOption && jsx(Checkbox, {
+      "aria-required": false,
+      "aria-label": labels2 == null ? void 0 : labels2.exemptedFromVat,
+      "aria-invalid": false,
       name: "exemptedFromVat",
-      label: formUtils.getLabel("exemptedFromVat", "iDontHaveAVatNumber"),
+      label: labels2 == null ? void 0 : labels2.exemptedFromVat,
       value: "exemptedFromVat",
-      readonly: formUtils.isReadOnly("exemptedFromVat"),
       classNameModifiers: ["exempted-from-tax"],
       checked: data.exemptedFromVat ?? false,
-      onChange: handleChangeFor("exemptedFromVat"),
-      "aria-required": false,
-      "aria-label": formUtils.getLabel("exemptedFromVat"),
-      "aria-invalid": false
-    }), data.exemptedFromVat ? jsx(Field, {
+      onChange: handleChangeFor("exemptedFromVat")
+    }), data.exemptedFromVat && jsx(Field, {
       name: "vatAbsenceReason",
       classNameModifiers: ["tax-id-absence-reason"],
-      label: formUtils.getLabel("vatAbsenceReason", "vatAbsenceReason"),
-      errorMessage: formUtils.getErrorMessage("vatAbsenceReason", errors, fieldProblems),
+      label: labels2 == null ? void 0 : labels2.vatAbsenceReason,
+      errorMessage: errors.vatAbsenceReason,
       isValid: valid.vatAbsenceReason,
       children: (childProps) => jsx(RadioGroup, {
         ...childProps,
@@ -10262,7 +10222,7 @@ function VatNumber(props) {
           name: reason
         }))
       })
-    }) : null]
+    })]
   });
 }
 const companyRegistrationDetailsValidationRules = {
@@ -10300,27 +10260,33 @@ const FLOWS_THAT_HIDE_REGISTRATION_NUMBER = [{
   companyType: [CompanyTypesValue.SOLE_PROPRIETORSHIP],
   country: CountryCodes.PuertoRico
 }];
-const companyRegistrationDetailsFields = ["tradingName", "sameNameAsLegalName", ...businessRegistrationNumberFields, "stockExchangeMIC", "stockISIN", "stockTickerSymbol", ...vatNumberFields, ...taxIdFields, "dateOfIncorporation"];
+const companyRegistrationDetailsFields = ["tradingName", "sameNameAsLegalName", ...businessRegistrationNumberFields, "stockExchangeMIC", "stockISIN", "stockTickerSymbol", ...VAT_NUMBER_FIELD, ...taxIdFields, "dateOfIncorporation"];
 function CompanyRegistrationDetailsComponent(props) {
-  var _a, _b;
+  var _a, _b, _c;
   const {
     i18n
   } = useI18nContext();
+  const {
+    companyNameAndCountry
+  } = useGlobalData();
   let mergedProps = props;
+  const defaultVatNumberType = ((_a = mergedProps.data) == null ? void 0 : _a.vatNumber) ? inferTaxIdNumberType((_b = mergedProps.data) == null ? void 0 : _b.vatNumber, mergedProps.country) : (_c = taxIdNumberOptions[mergedProps.country]) == null ? void 0 : _c[0].id;
+  const [vatNumberType, setVatNumberType] = useState(defaultVatNumberType);
   mergedProps = mergeFieldMetadataIntoProps("stockExchangeMIC", stockExchangeMICFieldMetadata, mergedProps);
   mergedProps = mergeFieldMetadataIntoProps("stockISIN", stockISINFieldMetadata, mergedProps);
   mergedProps = mergeFieldMetadataIntoProps("stockTickerSymbol", stockTickerSymbolFieldMetadata, mergedProps);
+  mergedProps = mergeFieldMetadataIntoProps("vatNumber", resolveFieldMetadata(defaultFieldConfig$7[mergedProps.country], {
+    vatNumberType
+  }, defaultFieldMetadata$7), mergedProps);
+  mergedProps = mergeFieldMetadataIntoProps("vatAbsenceReason", vatAbsenceReasonMetadata, mergedProps);
   const hideOptionalRegistrationNumberField = FLOWS_THAT_HIDE_REGISTRATION_NUMBER.some((f) => f.country === mergedProps.country && f.companyType.includes(mergedProps.companyType));
   const stateRef = useRef({
     setState: null
   });
-  const COMPANY_REGISTRATION_DETAILS = mergedProps.id;
+  const COMPANY_REGISTRATION_DETAILS = mergedProps.id ?? "companyRegistrationDetails";
   const requiredFields = mergedProps.requiredFields || companyRegistrationDetailsFields;
-  const directChildFields = requiredFields.filter((field) => ["tradingName", "sameNameAsLegalName", "stockExchangeMIC", "stockISIN", "stockTickerSymbol", "dateOfIncorporation"].includes(field));
-  const {
-    getData
-  } = useStateContext();
-  const legalCompanyName2 = (_b = (_a = getData()) == null ? void 0 : _a.companyNameAndCountry) == null ? void 0 : _b.legalCompanyName;
+  const directChildFields = requiredFields.filter((field) => ["tradingName", "sameNameAsLegalName", "stockExchangeMIC", "stockISIN", "stockTickerSymbol", "dateOfIncorporation", "vatNumber"].includes(field));
+  const legalCompanyName2 = companyNameAndCountry == null ? void 0 : companyNameAndCountry.legalCompanyName;
   const isSameNameAsLegalName = !mergedProps.data.tradingName ? true : mergedProps.data.tradingName === legalCompanyName2;
   const {
     handleChangeFor,
@@ -10333,7 +10299,7 @@ function CompanyRegistrationDetailsComponent(props) {
     setData
   } = useForm({
     ...mergedProps,
-    schema: directChildFields,
+    schema: (currentData) => !currentData.exemptedFromVat ? (requiredFields == null ? void 0 : requiredFields.filter((field) => field !== "vatAbsenceReason")) ?? directChildFields : (requiredFields == null ? void 0 : requiredFields.filter((field) => field !== "vatNumber")) ?? directChildFields,
     defaultData: {
       ...mergedProps.data,
       sameNameAsLegalName: isSameNameAsLegalName,
@@ -10376,7 +10342,6 @@ function CompanyRegistrationDetailsComponent(props) {
     setData("tradingName", tradingNameIsSameAsLegalName ? legalCompanyName2 : "");
   };
   const registrationNumberProps = getFieldProps(mergedProps, businessRegistrationNumberFields);
-  const vatNumberProps = getFieldProps(mergedProps, vatNumberFields);
   const taxIdProps = getFieldProps(mergedProps, taxIdFields);
   const handleChange = ({
     currentState,
@@ -10387,7 +10352,7 @@ function CompanyRegistrationDetailsComponent(props) {
       let schema = requiredFields;
       let hasSchemaChanged = false;
       if (formUtils.isRequiredField("vatNumber")) {
-        schema = currentData.exemptedFromVat ? schema.filter((child) => child !== "vatNumber") : schema.filter((child) => child !== "vatAbsenceReason");
+        schema = currentData.exemptedFromVat ? schema.filter((child) => child !== "vatNumber") : schema.filter((child) => child !== "vatAbsenceReason" && child !== "exemptedFromVat");
         hasSchemaChanged = true;
       }
       if (formUtils.isRequiredField("taxId") && currentData.exemptedFromTax) {
@@ -10501,10 +10466,22 @@ function CompanyRegistrationDetailsComponent(props) {
         companyType: mergedProps.companyType,
         country: mergedProps.country,
         dataStoreId: COMPANY_REGISTRATION_DETAILS
-      }), formUtils.isRequiredField("vatNumber") && jsx(VatNumber, {
-        ...vatNumberProps,
-        dataStoreId: COMPANY_REGISTRATION_DETAILS,
-        country: mergedProps.country
+      }), formUtils.isRequiredField("vatNumber") && jsx(VatNumberField, {
+        data: formUtils.getFieldData(data, VAT_NUMBER_FIELD),
+        valid: formUtils.getFieldValid(valid, VAT_NUMBER_FIELD),
+        errors: formUtils.getFieldErrors(errors, fieldProblems, VAT_NUMBER_FIELD),
+        labels: formUtils.getFieldLabels(VAT_NUMBER_FIELD, {
+          exemptedFromVat: "iDontHaveAVatNumber"
+        }),
+        mask: formUtils.getMask("vatNumber"),
+        guidanceText: formUtils.getFieldGuidanceText(VAT_NUMBER_FIELD),
+        placeholders: formUtils.getFieldPlaceholders(VAT_NUMBER_FIELD),
+        readonly: formUtils.isReadOnly("vatNumber"),
+        handleChangeFor,
+        country: mergedProps.country,
+        canExempt: formUtils.isRequiredField("exemptedFromVat"),
+        vatNumberType,
+        setVatNumberType
       }), formUtils.isRequiredField("taxId") && jsx(TaxId, {
         ...taxIdProps,
         dataStoreId: COMPANY_REGISTRATION_DETAILS,
@@ -14491,7 +14468,6 @@ const individualBaseMapping = {
   "personalDetails.licenseCardNumber": "individual.identificationData.cardNumber",
   "personalDetails.expiryDate": "individual.identificationData.expiryDate",
   "personalDetails.nationality": "individual.nationality",
-  "personalDetails.jobTitle": "individual.jobTitle",
   "address.city": "individual.residentialAddress.city",
   "address.country": "individual.residentialAddress.country",
   "address.postalCode": "individual.residentialAddress.postalCode",
@@ -24474,107 +24450,6 @@ const defaultFieldConfig$1 = entriesOf(defaultFieldConfig$8).reduce((fieldConfig
     };
   }
 }), {});
-const VAT_NUMBER_FIELD = ["vatNumber", "exemptedFromVat", "vatAbsenceReason"];
-function VatNumberField({
-  data,
-  valid,
-  errors,
-  labels: labels2,
-  mask,
-  guidanceText,
-  placeholders,
-  readonly,
-  shouldValidate,
-  handleChangeFor,
-  canExempt,
-  country: country2,
-  vatNumberType,
-  setVatNumberType
-}) {
-  var _a;
-  const {
-    isExperimentEnabled
-  } = useExperimentsContext();
-  const showExtraTaxExemptionReasons = isExperimentEnabled(ExperimentNames.ShowExtraTaxExemptionReasons);
-  const extraVatAbsenceReasons = vatAbsenceReasons.map((reason) => ({
-    id: reason,
-    name: reason
-  })).concat([{
-    id: VatAbsenceReason.CountryWithoutVatOrGstSystem,
-    name: VatAbsenceReason.CountryWithoutVatOrGstSystem
-  }]);
-  const showVatExemptedOption = canExempt && ((_a = taxIdNumberOptions[country2]) == null ? void 0 : _a.length) > 1;
-  const handleVatNumberTypeChange = (vatType) => {
-    if (vatType === "exempted") {
-      if (!canExempt) {
-        throw Error(`${country2} does not allow VAT exemptions`);
-      }
-      handleChangeFor("exemptedFromVat")(true);
-      setVatNumberType(void 0);
-      return;
-    }
-    if (canExempt && data.exemptedFromVat === true) {
-      handleChangeFor("exemptedFromVat")(false);
-    }
-    setVatNumberType(vatType);
-  };
-  return jsxs("div", {
-    className: "adyen-kyc-field__vat-number",
-    children: [jsx(TaxIdNumberTypeSelector, {
-      country: country2,
-      setSelected: handleVatNumberTypeChange,
-      selected: data.exemptedFromVat ? "exempted" : vatNumberType,
-      exemptedOption: showVatExemptedOption ? labels2.exemptedFromVat : false
-    }), jsx(MaskedInputText, {
-      "aria-required": true,
-      "aria-label": labels2.vatNumber,
-      "aria-invalid": !valid.vatNumber,
-      classNameModifiers: {
-        field: ["tax-id"],
-        input: ["vatNumber"]
-      },
-      name: "vatNumber",
-      value: (data == null ? void 0 : data.vatNumber) ?? "",
-      label: labels2.vatNumber ?? "",
-      formatGuidance: (guidanceText == null ? void 0 : guidanceText.vatNumber) ?? "",
-      placeholder: placeholders == null ? void 0 : placeholders.vatNumber,
-      errorMessage: errors.vatNumber,
-      isValid: Boolean(valid.vatNumber),
-      onInput: handleChangeFor("vatNumber", "input"),
-      onBlur: handleChangeFor("vatNumber", "blur"),
-      disabled: data.exemptedFromVat,
-      readonly,
-      shouldValidate,
-      ...mask
-    }), canExempt && !showVatExemptedOption && jsx(Checkbox, {
-      "aria-required": false,
-      "aria-label": labels2 == null ? void 0 : labels2.exemptedFromVat,
-      "aria-invalid": false,
-      name: "exemptedFromVat",
-      label: labels2 == null ? void 0 : labels2.exemptedFromVat,
-      value: "exemptedFromVat",
-      classNameModifiers: ["exempted-from-tax"],
-      checked: data.exemptedFromVat ?? false,
-      onChange: handleChangeFor("exemptedFromVat")
-    }), data.exemptedFromVat && jsx(Field, {
-      name: "vatAbsenceReason",
-      classNameModifiers: ["tax-id-absence-reason"],
-      label: labels2 == null ? void 0 : labels2.vatAbsenceReason,
-      errorMessage: errors.vatAbsenceReason,
-      isValid: valid.vatAbsenceReason,
-      children: (childProps) => jsx(RadioGroup, {
-        ...childProps,
-        name: "vatAbsenceReason",
-        onChange: handleChangeFor("vatAbsenceReason", "input"),
-        value: data.vatAbsenceReason,
-        items: showExtraTaxExemptionReasons ? extraVatAbsenceReasons : vatAbsenceReasons.map((reason) => ({
-          id: reason,
-          name: reason
-        }))
-      })
-    })]
-  });
-}
 const ADDITIONAL_INFORMATION_FORM_ID = "additionalInformation";
 const additionalInformationFields = [...LEGAL_COMPANY_NAME_FIELD, ...DBA_NAME_FIELD, ...BUSINESS_REGISTRATION_NUMBER_FIELD, ...TAX_INFORMATION_FIELD, ...VAT_NUMBER_FIELD, ...DATE_OF_INCORPORATION_FIELD, ...STOCK_EXCHANGE_MIC_FIELD, ...STOCK_ISIN_FIELD, ...STOCK_TICKER_SYMBOL_FIELD];
 function AdditionalInformationComponent({
@@ -24647,6 +24522,8 @@ function AdditionalInformationComponent({
           return mergeFieldMetadataIntoProps(field, resolveFieldMetadata(defaultFieldConfig$7[country2], {
             vatNumberType
           }, defaultFieldMetadata$7), acc);
+        case "vatAbsenceReason":
+          return mergeFieldMetadataIntoProps("vatAbsenceReason", vatAbsenceReasonMetadata, acc);
         case "dateOfIncorporation":
           return {
             ...acc,
@@ -25761,7 +25638,6 @@ const Modal = ({
   size = "medium",
   title,
   isDismissible = true,
-  isOpen = true,
   onClose = noop,
   role: role2 = "dialog"
 }) => {
@@ -25769,10 +25645,10 @@ const Modal = ({
     i18n
   } = useI18nContext();
   const closeModal = useCallback(() => {
-    if (isOpen && isDismissible) {
+    if (isDismissible) {
       onClose();
     }
-  }, [isDismissible, isOpen, onClose]);
+  }, [isDismissible, onClose]);
   useEffect(() => {
     const handleEscapeKey = ({
       code: code2
@@ -25781,21 +25657,17 @@ const Modal = ({
         closeModal();
       }
     };
-    if (isOpen) {
-      document.documentElement.classList.add("u-overflow-hidden");
-      document.addEventListener("keydown", handleEscapeKey);
-    } else {
+    document.documentElement.classList.add("u-overflow-hidden");
+    document.addEventListener("keydown", handleEscapeKey);
+    return () => {
       document.documentElement.classList.remove("u-overflow-hidden");
       document.removeEventListener("keydown", handleEscapeKey);
-    }
-    return () => document.removeEventListener("keydown", handleEscapeKey);
-  }, [closeModal, isDismissible, isOpen]);
+    };
+  }, [closeModal, isDismissible]);
   return jsx("div", {
-    className: cx("adyen-kyc-overlay", {
-      "adyen-kyc-overlay--visible": isOpen
-    }),
+    className: cx("adyen-kyc-overlay", "adyen-kyc-overlay--visible"),
     role: "none",
-    children: isOpen && jsxs("div", {
+    children: jsxs("div", {
       className: cx(classNames == null ? void 0 : classNames.modal, "adyen-kyc-modal", {
         "adyen-kyc-modal--small": size === "small",
         "adyen-kyc-modal--large": size === "large"
@@ -28197,6 +28069,8 @@ function CompanyOtherDetails({
           return mergeFieldMetadataIntoProps(field, resolveFieldMetadata(defaultFieldConfig$7[country2], {
             vatNumberType
           }, defaultFieldMetadata$7), acc);
+        case "vatAbsenceReason":
+          return mergeFieldMetadataIntoProps("vatAbsenceReason", vatAbsenceReasonMetadata, acc);
         default:
           return acc;
       }
@@ -39079,7 +38953,7 @@ const ConfigurationApiProvider = ({
     isEmbeddedDropin,
     loadingContext
   } = authContext;
-  const sdkVersion = "3.21.1";
+  const sdkVersion = "3.21.3";
   useAnalytics({
     onUserEvent,
     legalEntityId: rootLegalEntityId,

package/dist/types/components/CompanyRegistrationDetails/types.d.ts

@@ -3,8 +3,8 @@ import type { CompanyTypesValue } from '../../core/models/api/company-types-valu
 import type { CountryCode } from '../../core/models/country-code';
 import type { BusinessRegistrationNumberSchema } from '../internal/BusinessRegistrationNumber/types';
 import type { TaxIdSchema } from '../internal/TaxId/types';
-import type { VatNumberSchema } from '../internal/VatNumber/types';
-export interface CompanyRegistrationDetailsSchema extends BusinessRegistrationNumberSchema, TaxIdSchema, VatNumberSchema {
+import type { VatNumberFieldSchema } from '../internal/VatNumberField/types';
+export interface CompanyRegistrationDetailsSchema extends BusinessRegistrationNumberSchema, TaxIdSchema, VatNumberFieldSchema {
     tradingName?: string;
     sameNameAsLegalName?: boolean;
     stockExchangeMIC?: string;

package/dist/types/components/internal/Modal/Modal.d.ts

@@ -13,9 +13,8 @@ export interface ModalProps {
         footer?: string;
     };
     isDismissible?: boolean;
-    isOpen?: boolean;
     title?: string;
     onClose?: () => void;
     role?: JSX.AriaRole;
 }
-export declare const Modal: ({ content, footer, header, classNames, size, title, isDismissible, isOpen, onClose, role, }: ModalProps) => JSX.Element;
+export declare const Modal: ({ content, footer, header, classNames, size, title, isDismissible, onClose, role, }: ModalProps) => JSX.Element;

package/dist/types/components/internal/{VatNumber → VatNumberField}/fieldConfig.d.ts

@@ -1,10 +1,11 @@
 import type { FieldMetadata } from '../../../core/models/country-config';
 import type { PerCountryFieldConfig } from '../../../core/models/field-configurations';
 import type { TaxIdNumberType } from '../IdFieldTypeSelector/countryIdNumberTypes';
-import type { VatNumberSchema } from './types';
+import type { VatNumberFieldSchema } from './types';
+export declare const vatAbsenceReasonMetadata: FieldMetadata<VatNumberFieldSchema, 'vatAbsenceReason'>;
 interface FieldConfigParams {
     vatNumberType: TaxIdNumberType | undefined;
 }
-export declare const defaultFieldMetadata: FieldMetadata<VatNumberSchema, 'vatNumber'>;
-export declare const defaultFieldConfig: PerCountryFieldConfig<VatNumberSchema, 'vatNumber', FieldConfigParams>;
+export declare const defaultFieldMetadata: FieldMetadata<VatNumberFieldSchema, 'vatNumber'>;
+export declare const defaultFieldConfig: PerCountryFieldConfig<VatNumberFieldSchema, 'vatNumber', FieldConfigParams>;
 export {};

package/dist/types/utils/mapping/componentApiMapping.d.ts

@@ -33,7 +33,6 @@ export declare const individualComponentsKeyMapping: {
     'personalDetails.licenseCardNumber': string;
     'personalDetails.expiryDate': string;
     'personalDetails.nationality': string;
-    'personalDetails.jobTitle': string;
     'address.city': string;
     'address.country': string;
     'address.postalCode': string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adyen/kyc-components",
-  "version": "3.21.1",
+  "version": "3.21.3",
   "description": "",
   "license": "MIT",
   "files": [

package/dist/types/components/internal/VatNumber/VatNumber.d.ts

@@ -1,3 +0,0 @@
-import type { VatNumberProps, VatNumberSchema } from './types';
-export declare const vatNumberFields: Array<keyof VatNumberSchema>;
-export default function VatNumber(props: VatNumberProps): import("preact").JSX.Element;

package/dist/types/components/internal/VatNumber/index.d.ts

@@ -1 +0,0 @@
-export { default, vatNumberFields } from './VatNumber';

package/dist/types/components/internal/VatNumber/types.d.ts

@@ -1,12 +0,0 @@
-import type { BaseInnerFormProps } from '../../../core/hooks/useForm';
-import type { CountryCode } from '../../../core/models/country-code';
-import type { defaultFieldConfig } from './fieldConfig';
-export interface VatNumberSchema {
-    vatNumber?: string;
-    exemptedFromVat?: boolean;
-    vatAbsenceReason?: string;
-}
-export interface VatNumberProps extends BaseInnerFormProps<VatNumberSchema> {
-    country: CountryCode;
-    fieldConfig?: typeof defaultFieldConfig;
-}