@adyen/kyc-components 3.17.1 → 3.18.1

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

@@ -75,6 +75,7 @@ const SINFormatCA = "XXXXXXXXX";
 const invalidFormat = "Invalid format";
 const formatIsCorrect = "Format is correct";
 const fieldIsRequired = "Field is required";
+const optional = "(optional)";
 const tooManyFiles = "Too many files";
 const duplicatedFiles = "Duplicated files";
 const unsupportedFiletype = "Unsupported filetype";
@@ -427,7 +428,8 @@ const invalidDateOfBirth = "Please enter a valid date of birth";
 const invalidDateOfIncorporation = "Please enter a valid date of incorporation";
 const successfullyUpdatedDetails = "Successfully updated details";
 const failedToUpdateDetails = "Failed to update details";
-const documentUploadfailed = "Document upload failed. Please ensure the document is not a duplicate and its size is 4MBs or less.";
+const idDocumentAlreadyUploaded = "Identity document has already been uploaded or is too large; try another";
+const bankStatementAlreadyUploaded = "Bank statement has already been uploaded, is too large, or the the account has already been added; try another";
 const successfullyVerifiedIdNumber = "Successfully verified %{idNumber}";
 const failedFetchingDecisionMaker = "Failed to get decision maker details";
 const fileUpload = "File upload";
@@ -1383,6 +1385,7 @@ const defaultTrans = {
   invalidFormat,
   formatIsCorrect,
   fieldIsRequired,
+  optional,
   tooManyFiles,
   duplicatedFiles,
   unsupportedFiletype,
@@ -1735,7 +1738,8 @@ const defaultTrans = {
   invalidDateOfIncorporation,
   successfullyUpdatedDetails,
   failedToUpdateDetails,
-  documentUploadfailed,
+  idDocumentAlreadyUploaded,
+  bankStatementAlreadyUploaded,
   successfullyVerifiedIdNumber,
   failedFetchingDecisionMaker,
   fileUpload,
@@ -3666,12 +3670,32 @@ const useAllowedCountries = () => {
   }, [acceptedCountries]);
   return allowedCountries;
 };
+class ValidationResult {
+  constructor(results) {
+    this.validationResults = results;
+  }
+  /** Checks if all validation rules have passed */
+  get isValid() {
+    return this.validationResults.reduce((acc, result) => acc && result.isValid, true);
+  }
+  /** Checks if any validation rule returned an error */
+  hasError() {
+    return Boolean(this.getError());
+  }
+  /** Returns the first validation result that returned an error */
+  getError() {
+    return this.validationResults.find((result) => result.hasError);
+  }
+  /** Returns all validation results that returned an error */
+  getAllErrors() {
+    return this.validationResults.filter((result) => result.hasError);
+  }
+}
 const processField = ({
   key,
   value = null,
   mode,
   defaultData,
-  obscuredFields,
   fieldContext,
   formatters,
   staticValidate,
@@ -3680,7 +3704,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 = !((obscuredFields == null ? void 0 : obscuredFields.includes(key)) && (defaultData == null ? void 0 : defaultData[key]) === value && !!(defaultData == null ? void 0 : defaultData[key]));
+  const shouldValidateField = !((defaultData == null ? void 0 : defaultData[key]) === value && !!(defaultData == null ? void 0 : defaultData[key]));
   if (shouldValidateField && value) {
     asyncValidate(key, fieldContext.state, mode);
   }
@@ -3688,11 +3712,10 @@ const processField = ({
     key,
     value: formattedValue,
     mode
-  }, fieldContext) : {
+  }, fieldContext) : new ValidationResult([{
     isValid: true,
-    hasError: () => null,
-    getError: () => null
-  };
+    hasError: false
+  }]);
   return [formattedValue, validationResult];
 };
 function init({
@@ -3700,6 +3723,7 @@ function init({
   defaultData,
   fieldProblems,
   obscuredFields,
+  optionalFields,
   formatters,
   staticValidate,
   asyncValidate
@@ -3711,10 +3735,11 @@ function init({
       mode: "blur",
       formatters,
       defaultData,
-      obscuredFields,
       fieldContext: {
         state: {
-          data: defaultData
+          data: defaultData,
+          obscuredFields,
+          optionalFields
         }
       },
       staticValidate,
@@ -3735,7 +3760,8 @@ function init({
       fieldProblems: (fieldProblems == null ? void 0 : fieldProblems[fieldKey]) ?? false
     };
   };
-  const formData = schema.reduce((acc, field) => {
+  const formFields = optionalFields ? [...schema, ...optionalFields] : schema;
+  const formData = formFields.reduce((acc, field) => {
     const {
       valid,
       errors,
@@ -3767,13 +3793,16 @@ function init({
     valid: {},
     errors: {},
     fieldProblems: {},
-    obscuredFields
+    obscuredFields,
+    optionalFields
   });
   return formData;
 }
 function reducer({
   staticValidate,
   asyncValidate,
+  obscuredFields,
+  optionalFields,
   formatters
 }) {
   return (state2, {
@@ -3784,7 +3813,6 @@ function reducer({
     schema,
     selectedSchema,
     formValue,
-    obscuredFields,
     fieldProblems,
     defaultData
   }) => {
@@ -3841,27 +3869,35 @@ function reducer({
         if (!schema) return state2;
         const defaultState = init({
           schema,
+          // requiredFields
           defaultData,
           fieldProblems,
           obscuredFields,
+          optionalFields,
           staticValidate,
           asyncValidate
         });
-        const removedSchemaFields = (_b = state2.schema) == null ? void 0 : _b.filter((field) => !schema.includes(field));
-        const newSchemaFields = schema.filter((field) => {
+        const removedFields = ((_b = state2.optionalFields) == null ? void 0 : _b.length) ? [...state2.schema.filter((field) => !schema.includes(field)), ...state2.optionalFields.filter((field) => !(optionalFields == null ? void 0 : optionalFields.includes(field)))] : state2.schema.filter((field) => !schema.includes(field));
+        const newFields = (optionalFields == null ? void 0 : optionalFields.length) ? [...schema.filter((field) => {
+          var _a2;
+          return !((_a2 = state2.schema) == null ? void 0 : _a2.includes(field));
+        }), ...optionalFields.filter((field) => {
+          var _a2;
+          return !((_a2 = state2.optionalFields) == null ? void 0 : _a2.includes(field));
+        })] : schema.filter((field) => {
           var _a2;
           return !((_a2 = state2.schema) == null ? void 0 : _a2.includes(field));
         });
         const local = {
-          data: omitKeys(state2.data, newSchemaFields),
-          errors: omitKeys(state2.errors, newSchemaFields),
-          valid: omitKeys(state2.valid, newSchemaFields),
-          fieldProblems: omitKeys(state2.fieldProblems, newSchemaFields)
+          data: omitKeys(state2.data, newFields),
+          errors: omitKeys(state2.errors, newFields),
+          valid: omitKeys(state2.valid, newFields),
+          fieldProblems: omitKeys(state2.fieldProblems, newFields)
         };
-        const updatedData = addKeys(omitKeys(state2.data, removedSchemaFields), newSchemaFields, null, defaultState.data, (_c = state2.local) == null ? void 0 : _c.data);
-        const updatedValid = addKeys(omitKeys(state2.valid, removedSchemaFields), newSchemaFields, false, defaultState.valid, (_d = state2.local) == null ? void 0 : _d.valid);
-        const updatedErrors = addKeys(omitKeys(state2.errors, removedSchemaFields), newSchemaFields, null, defaultState.errors, (_e = state2.local) == null ? void 0 : _e.errors);
-        const updatedFieldProblems = addKeys(omitKeys(state2.fieldProblems, removedSchemaFields), newSchemaFields, false, defaultState.fieldProblems, (_f = state2.local) == null ? void 0 : _f.fieldProblems);
+        const updatedData = addKeys(omitKeys(state2.data, removedFields), newFields, null, defaultState.data, (_c = state2.local) == null ? void 0 : _c.data);
+        const updatedValid = addKeys(omitKeys(state2.valid, removedFields), newFields, false, defaultState.valid, (_d = state2.local) == null ? void 0 : _d.valid);
+        const updatedErrors = addKeys(omitKeys(state2.errors, removedFields), newFields, null, defaultState.errors, (_e = state2.local) == null ? void 0 : _e.errors);
+        const updatedFieldProblems = addKeys(omitKeys(state2.fieldProblems, removedFields), newFields, false, defaultState.fieldProblems, (_f = state2.local) == null ? void 0 : _f.fieldProblems);
         return {
           ...state2,
           schema,
@@ -3869,6 +3905,8 @@ function reducer({
           valid: updatedValid,
           errors: updatedErrors,
           fieldProblems: updatedFieldProblems,
+          obscuredFields,
+          optionalFields,
           local
         };
       }
@@ -3879,7 +3917,6 @@ function reducer({
           value,
           mode,
           defaultData,
-          obscuredFields,
           formatters,
           fieldContext: {
             state: state2
@@ -3936,13 +3973,12 @@ function reducer({
       }
       case "validateForm": {
         const formValidation = validationSchema == null ? void 0 : validationSchema.reduce((acc, cur) => {
-          var _a2;
-          const [, validation] = processField({
+          var _a2, _b2;
+          const [formattedValue, validation] = processField({
             key: cur,
             value: state2.data[cur],
             mode: "blur",
             defaultData,
-            obscuredFields,
             formatters,
             fieldContext: {
               state: state2
@@ -3950,6 +3986,8 @@ function reducer({
             staticValidate,
             asyncValidate
           });
+          const oldValue = state2.data[cur];
+          const clearFieldProblems = oldValue !== formattedValue;
           return {
             valid: {
               ...acc.valid,
@@ -3958,16 +3996,22 @@ function reducer({
             errors: {
               ...acc.errors,
               [cur]: validation.getError() ?? null
+            },
+            fieldProblems: {
+              ...acc.fieldProblems,
+              [cur]: clearFieldProblems ? false : ((_b2 = state2.fieldProblems) == null ? void 0 : _b2[cur]) ?? false
             }
           };
         }, {
           valid: state2.valid,
-          errors: state2.errors
+          errors: state2.errors,
+          fieldProblems: state2.fieldProblems
         });
         return {
           ...state2,
           valid: formValidation == null ? void 0 : formValidation.valid,
-          errors: formValidation == null ? void 0 : formValidation.errors
+          errors: formValidation == null ? void 0 : formValidation.errors,
+          fieldProblems: formValidation == null ? void 0 : formValidation.fieldProblems
         };
       }
       default:
@@ -3975,27 +4019,6 @@ function reducer({
     }
   };
 }
-class ValidationResult {
-  constructor(results) {
-    this.validationResults = results;
-  }
-  /** Checks if all validation rules have passed */
-  get isValid() {
-    return this.validationResults.reduce((acc, result) => acc && result.isValid, true);
-  }
-  /** Checks if any validation rule returned an error */
-  hasError() {
-    return Boolean(this.getError());
-  }
-  /** Returns the first validation result that returned an error */
-  getError() {
-    return this.validationResults.find((result) => result.hasError);
-  }
-  /** Returns all validation results that returned an error */
-  getAllErrors() {
-    return this.validationResults.filter((result) => result.hasError);
-  }
-}
 const logger$v = createLogger("useAsyncValidator");
 const useAsyncValidator = (asyncRules) => {
   const [asyncValidationResults, setAsyncValidationResults] = useState({});
@@ -4039,10 +4062,13 @@ const useStaticValidator = (rules2) => {
     value,
     mode = "blur"
   }, context) => {
+    var _a, _b;
     const fieldRules = getRulesForField(key);
+    const isFieldOptional = !!((_a = context == null ? void 0 : context.state.optionalFields) == null ? void 0 : _a.includes(key));
+    const isFieldObscured = !!((_b = context == null ? void 0 : context.state.obscuredFields) == null ? void 0 : _b.includes(key));
     const validationRulesResult = fieldRules.map((rule) => {
-      const isValid = rule.validate(value, context);
-      const shouldValidate = rule.modes.includes(mode);
+      const shouldValidate = rule.modes.includes(mode) && !isFieldObscured;
+      const isValid = isFieldOptional && isEmpty(value) ? true : rule.validate(value, context);
       return {
         isValid,
         errorMessage: typeof rule.errorMessage === "function" ? rule.errorMessage(value, context) : rule.errorMessage,
@@ -4055,9 +4081,10 @@ const useStaticValidator = (rules2) => {
     triggerStaticValidation
   };
 };
-const mergeStaticAndAsyncErrorsState = (staticValidationErrors, asyncValidationErrors, schema) => {
-  if (!schema.length) return staticValidationErrors;
-  return schema.reduce((acc, field) => {
+const mergeStaticAndAsyncErrorsState = (staticValidationErrors, asyncValidationErrors, schema, optionalFields) => {
+  const fields = optionalFields ? [...schema, ...optionalFields] : schema;
+  if (!fields.length) return staticValidationErrors;
+  return fields.reduce((acc, field) => {
     var _a;
     return {
       ...acc,
@@ -4084,27 +4111,25 @@ function useForm({
     asyncValidationResults
   } = useAsyncValidator(asyncRules);
   const getRequiredFields = useMemo(() => typeof schema === "function" ? schema : () => schema, [schema]);
-  const getSchema = useMemo(() => {
-    if (optionalFields) {
-      return defaultData ? [...getRequiredFields(defaultData), ...optionalFields] : [];
-    }
-    return defaultData ? getRequiredFields(defaultData) : [];
-  }, [optionalFields, defaultData, getRequiredFields]);
+  const getSchema = useMemo(() => defaultData ? getRequiredFields(defaultData) : [], [defaultData, getRequiredFields]);
   const getReducer = useCallback(() => reducer({
     staticValidate: triggerStaticValidation,
     asyncValidate: triggerAsyncValidation,
+    obscuredFields,
+    optionalFields,
     formatters
-  }), [triggerStaticValidation, triggerAsyncValidation, formatters]);
-  const getInitialData = useCallback(() => ({
+  }), [triggerStaticValidation, triggerAsyncValidation, obscuredFields, optionalFields, formatters]);
+  const initialData = useMemo(() => ({
     schema: getSchema,
     defaultData,
     fieldProblems,
     obscuredFields,
+    optionalFields,
     formatters,
     staticValidate: triggerStaticValidation,
     asyncValidate: triggerAsyncValidation
-  }), [getSchema, defaultData, fieldProblems, obscuredFields, formatters, triggerStaticValidation, triggerAsyncValidation]);
-  const [state2, dispatch] = useReducer(getReducer(), getInitialData(), init);
+  }), [getSchema, defaultData, fieldProblems, obscuredFields, optionalFields, formatters, triggerStaticValidation, triggerAsyncValidation]);
+  const [state2, dispatch] = useReducer(getReducer(), initialData, init);
   const isValid = useMemo(() => {
     var _a;
     return (_a = state2.schema) == null ? void 0 : _a.every((key) => state2.valid[key]);
@@ -4151,18 +4176,16 @@ function useForm({
       key,
       value,
       mode,
-      defaultData,
-      obscuredFields
+      defaultData
     });
-  }, [defaultData, obscuredFields, getTargetValue]);
+  }, [defaultData, getTargetValue]);
   const triggerValidation = useCallback((selectedSchema) => {
     dispatch({
       type: "validateForm",
       selectedSchema,
-      defaultData,
-      obscuredFields
+      defaultData
     });
-  }, [defaultData, obscuredFields]);
+  }, [defaultData]);
   useEffect(() => {
     const newSchema = getRequiredFields(state2.data);
     if (!doArraysMatch(state2.schema, newSchema)) {
@@ -4179,7 +4202,7 @@ function useForm({
       setFieldProblems(fieldProblems);
     }
   }, [JSON.stringify(fieldProblems), setFieldProblems]);
-  const formErrors = useMemo(() => mergeStaticAndAsyncErrorsState(state2.errors, asyncValidationResults, state2.schema), [asyncValidationResults, state2.errors]);
+  const formErrors = useMemo(() => mergeStaticAndAsyncErrorsState(state2.errors, asyncValidationResults, state2.schema, state2.optionalFields), [asyncValidationResults, state2.errors, state2.optionalFields, state2.schema]);
   return {
     mergeForm,
     setData,
@@ -4308,6 +4331,7 @@ const Field = ({
   children,
   dataPlaceholder,
   disabled,
+  optional: optional2,
   errorMessage,
   filled,
   focused,
@@ -4327,6 +4351,9 @@ const Field = ({
   wrapperRef
 }) => {
   const uniqueId = useId();
+  const {
+    i18n
+  } = useI18nContext();
   const [isFilled] = useStateFromProp({
     passedValue: filled,
     skipUpdate: filled === void 0
@@ -4354,11 +4381,14 @@ const Field = ({
       name,
       onClick: onFocusField,
       useLabelElement,
-      children: [jsx("span", {
+      children: [jsxs("span", {
         className: cx("adyen-kyc-label__text", {
           "adyen-kyc-label__text--error": !!errorMessage
         }),
-        children: label
+        children: [label, optional2 && jsxs("span", {
+          className: "adyen-kyc-optional-label",
+          children: [" ", i18n.get("optional")]
+        })]
       }), helper && helperPosition === "above" && jsx("span", {
         className: "adyen-kyc-helper-text adyen-kyc-helper-text__above",
         children: helper
@@ -5721,8 +5751,8 @@ const findPossibleShifts = (mask) => {
   const inputOnlyMask = mask.filter((t) => t.type === "input");
   const optionals = inputOnlyMask.filter((t) => t.optional);
   const possibleShifts = [];
-  for (const optional of optionals) {
-    const index = inputOnlyMask.indexOf(optional);
+  for (const optional2 of optionals) {
+    const index = inputOnlyMask.indexOf(optional2);
     for (let i = index + 1; i < inputOnlyMask.length; i += 1) {
       const laterToken = inputOnlyMask[i];
       if (laterToken.type === "input") {
@@ -5904,10 +5934,15 @@ const matchAgainstMask = (pureValue, mask, acceptObscuredValue = false) => {
     }
   }
 };
-const deriveInputState = (isValid, isFocused, hasBlurred, isDisabled, errorMessage, shouldValidate, potentiallyMoreOptionalCharacters, formatGuidance, i18n) => {
+const deriveInputState = (isValid, isFocused, isDisabled, isOptional, hasNullishValue, hasBlurred, errorMessage, shouldValidate, potentiallyMoreOptionalCharacters, formatGuidance, i18n) => {
   if (isDisabled) return {
     isError: false
   };
+  if (isOptional && hasNullishValue) {
+    return {
+      isError: false
+    };
+  }
   if (isValid && (!potentiallyMoreOptionalCharacters || !isFocused)) return {
     isError: false,
     text: jsxs(Fragment, {
@@ -5946,6 +5981,7 @@ const MaskedInputText = ({
   transformOnType,
   readonly = false,
   disabled = false,
+  optional: optional2 = false,
   formatGuidance,
   classNameModifiers,
   acceptObscuredValue = false
@@ -5986,7 +6022,7 @@ const MaskedInputText = ({
   }, [mask]);
   const maskResult = useMemo(() => getMaskResult(value), [getMaskResult, value]);
   const displayValue = maskResult.outcome === "mismatch" ? maskResult.partialDisplayValue : maskResult.displayValue;
-  const inputState = deriveInputState(validationIsValid && maskResult.outcome !== "mismatch", isFocused, hasBlurred, disabled, errorMessage, shouldValidate, maskResult.outcome === "correct" && !!maskResult.potentialForMoreOptionalInput, formatGuidance, i18n);
+  const inputState = deriveInputState(validationIsValid && maskResult.outcome !== "mismatch", isFocused, disabled, optional2, !displayValue, hasBlurred, errorMessage, shouldValidate, maskResult.outcome === "correct" && !!maskResult.potentialForMoreOptionalInput, formatGuidance, i18n);
   useEffect(() => {
     if (mask && maskResult.outcome === "mismatch") {
       const strippedValue = displayValueToPure(value);
@@ -6040,6 +6076,7 @@ Falling back to partially valid value "${fallback}"`);
     helperPosition: "below",
     classNameModifiers: classNameModifiers == null ? void 0 : classNameModifiers.field,
     disabled,
+    optional: optional2,
     children: ({
       onBlurHandler: fieldOnBlur,
       onFocusHandler: fieldOnFocus,
@@ -6344,25 +6381,25 @@ const nonInputs = (str, options) => Array.from(str).map((char) => ({
   displayEagerly: (options == null ? void 0 : options.displayEagerly) ?? true
 }));
 const spacer = nonInputs(" ")[0];
-const alphaInputs = (length, optional = false) => makeArrayOfRepeatedObjects(length, {
+const alphaInputs = (length, optional2 = false) => makeArrayOfRepeatedObjects(length, {
   type: "input",
   allow: /[A-Za-z]/,
-  optional
+  optional: optional2
 });
-const numericInputs = (length, optional = false) => makeArrayOfRepeatedObjects(length, {
+const numericInputs = (length, optional2 = false) => makeArrayOfRepeatedObjects(length, {
   type: "input",
   allow: /\d/,
-  optional
+  optional: optional2
 });
-const alphanumericInputs = (length, optional = false) => makeArrayOfRepeatedObjects(length, {
+const alphanumericInputs = (length, optional2 = false) => makeArrayOfRepeatedObjects(length, {
   type: "input",
   allow: /[\dA-Za-z]/,
-  optional
+  optional: optional2
 });
-const customInputs = (length, regex, optional = false) => makeArrayOfRepeatedObjects(length, {
+const customInputs = (length, regex, optional2 = false) => makeArrayOfRepeatedObjects(length, {
   type: "input",
   allow: regex,
-  optional
+  optional: optional2
 });
 const makeMask = (...tokens) => ({
   tokens,
@@ -7740,208 +7777,62 @@ class UserEvents {
   }
 }
 const userEvents = new UserEvents();
-const AccordionContext = createContext(null);
-function Accordion({
-  children,
-  className,
-  expand = false,
-  type,
-  onExpandSection
-}) {
-  const [items, setItems] = useState([]);
-  const classNames = cx("adyen-kyc-accordion", className, {
-    "adyen-kyc-accordion--container": type === "container",
-    "adyen-kyc-accordion--guide": type === "guide"
-  });
-  const contextValue = useMemo(() => ({
-    expand,
-    items,
-    setItems,
-    onExpandSection
-  }), [expand, items, onExpandSection]);
-  return jsx(AccordionContext.Provider, {
-    value: contextValue,
-    children: jsx("div", {
-      className: classNames,
-      children
-    })
-  });
-}
-var Placement = /* @__PURE__ */ ((Placement2) => {
-  Placement2[Placement2["Left"] = 0] = "Left";
-  Placement2[Placement2["Right"] = 1] = "Right";
-  return Placement2;
-})(Placement || {});
-function CollapsibleContainer({
-  children,
-  collapsed = false,
-  animationDuration = 0
-}) {
-  const collapsibleContainerEl = useRef(null);
-  const [height, setHeight] = useState(collapsed ? 0 : void 0);
-  useEffect(() => {
-    var _a;
-    setHeight(collapsed ? 0 : (_a = collapsibleContainerEl.current) == null ? void 0 : _a.scrollHeight);
-    setTimeout(() => {
-      setHeight(collapsed ? 0 : "auto");
-    }, animationDuration * 1e3);
-  }, [collapsed]);
-  return jsx("div", {
-    className: "adyen-collapsible-container",
-    "aria-hidden": collapsed,
-    ref: collapsibleContainerEl,
-    style: {
-      height,
-      transitionDuration: `${animationDuration}s`
-    },
-    children
-  });
-}
-const useAccordionContext = () => {
-  const accordionContext = useContext(AccordionContext);
-  if (!accordionContext) {
-    throw new Error("Cannot use useAccordionContext without AccordionContext");
-  }
-  return accordionContext;
-};
-function AccordionItem({
+const ChevronDownIcon = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20viewBox='0%200%2015%2015'%3e%3cdefs%3e%3cpath%20id='chevron-down_svg__a'%20d='M2%205a1%201%200%200%201%201.74-.67L7.5%208.51l3.76-4.18a1%201%200%200%201%201.48%201.34l-4.5%205a1%201%200%200%201-1.48%200l-4.5-5A1%201%200%200%201%202%205'/%3e%3c/defs%3e%3cuse%20xlink:href='%23chevron-down_svg__a'%20fill-rule='evenodd'/%3e%3c/svg%3e";
+const Accordion = ({
+  title,
   children,
-  className,
-  open = false,
-  title = "",
-  subTitle = "",
-  expandIconPlacement = Placement.Left,
-  iconPlacement = Placement.Left,
   icon,
-  onOpen = noop,
-  onClose = noop
-}) {
-  const {
-    expand,
-    items,
-    setItems,
-    onExpandSection
-  } = useAccordionContext();
-  const [isOpen, setIsOpen] = useState(open);
-  const [id2] = useState(getUniqueId);
-  const toggle = () => {
-    const newValue = !isOpen;
-    const newItems = [...items];
-    if (!expand) {
-      setItems(newItems.map((item) => ({
-        ...item,
-        isOpen: item.id === id2 ? newValue : false
-      })));
-    } else {
-      const currentItem = newItems.find((item) => item.id === id2);
-      if (currentItem) {
-        currentItem.isOpen = newValue;
-      }
-      setItems(newItems);
-    }
+  expandOnLeft = false,
+  onToggle,
+  className
+}) => {
+  const handleToggle = (e) => {
+    onToggle(e.newState === "closed" ? "close" : "open");
   };
-  useEffect(() => {
-    setItems((items2) => [...items2, {
-      id: id2,
-      isOpen
-    }]);
-  }, []);
-  useEffect(() => {
-    setIsOpen(open);
-  }, [open]);
-  useEffect(() => {
-    const currentItem = items.find((item) => item.id === id2);
-    if (currentItem) {
-      setIsOpen(currentItem.isOpen);
-    }
-  }, [items]);
-  useEffect(() => {
-    if (isOpen) {
-      onExpandSection == null ? void 0 : onExpandSection(typeof title === "string" ? title : "");
-      onOpen();
-    } else {
-      onClose();
-    }
-  }, [isOpen]);
-  return jsxs("div", {
-    className: cx("adyen-kyc-accordion__item", className),
-    children: [jsxs("div", {
+  return jsxs("details", {
+    onToggle: handleToggle,
+    className,
+    children: [jsxs("summary", {
       role: "button",
-      className: "adyen-kyc-accordion__header",
-      tabIndex: 0,
-      onClick: toggle,
-      "aria-expanded": isOpen,
-      children: [expandIconPlacement === Placement.Left ? jsx(Icon, {
-        name: isOpen ? "chevron-up" : "chevron-down",
-        className: "adyen-kyc-accordion__toggle"
-      }) : null, icon && iconPlacement === Placement.Left ? jsx(Icon, {
-        name: icon,
-        className: "adyen-kyc-accordion__toggle"
-      }) : null, jsxs("div", {
-        className: "adyen-kyc-accordion__title-wrapper",
-        children: [jsx("div", {
-          className: "adyen-kyc-accordion__title",
-          children: title
-        }), subTitle && jsx("div", {
-          className: "adyen-kyc-accordion__subtitle",
-          children: subTitle
-        })]
-      }), expandIconPlacement === Placement.Right ? jsx(Icon, {
-        name: isOpen ? "chevron-up" : "chevron-down",
-        className: "adyen-kyc-accordion__toggle"
-      }) : null, icon && iconPlacement === Placement.Right ? jsx(Icon, {
-        name: icon,
-        className: "adyen-kyc-accordion__toggle"
-      }) : null]
-    }), jsx(CollapsibleContainer, {
-      collapsed: !isOpen,
-      animationDuration: 0.1,
-      children: jsx("div", {
-        className: "adyen-kyc-accordion__content",
-        children
-      })
+      children: [expandOnLeft && jsx("img", {
+        className: "arrow",
+        src: ChevronDownIcon,
+        alt: ""
+      }), icon, title, !expandOnLeft && jsx("img", {
+        className: "arrow arrow-right",
+        src: ChevronDownIcon,
+        alt: ""
+      })]
+    }), jsx("section", {
+      className: "content",
+      children
     })]
   });
-}
+};
 function ContextGuidance({
   page,
   title,
   content,
   titleId,
-  contentId,
-  onOpen = noop,
-  onClose = noop
+  contentId
 }) {
-  const onGuidanceOpen = () => {
-    userEvents.addEvent("Open contextual guidance information", {
-      segmentation: {
-        guidancePage: page,
-        guidanceTitleId: titleId,
-        guidanceContentId: contentId
-      }
-    });
-    onOpen();
-  };
-  const onGuidanceClose = () => {
-    userEvents.addEvent("Close contextual guidance information", {
+  const onGuidanceToggle = (status) => {
+    const eventAction = status === "open" ? "Open" : "Close";
+    userEvents.addEvent(`${eventAction} contextual guidance information`, {
       segmentation: {
         guidancePage: page,
         guidanceTitleId: titleId,
         guidanceContentId: contentId
       }
     });
-    onClose();
   };
   return jsx(Accordion, {
-    type: "guide",
-    children: jsx(AccordionItem, {
-      icon: "light-bulb",
-      expandIconPlacement: Placement.Right,
-      title,
-      onOpen: onGuidanceOpen,
-      onClose: onGuidanceClose,
-      children: content
-    })
+    title,
+    icon: jsx(Icon, {
+      name: "light-bulb"
+    }),
+    onToggle: onGuidanceToggle,
+    children: content
   });
 }
 const checkDateInputSupport = () => {
@@ -9050,6 +8941,8 @@ var ExperimentNames = /* @__PURE__ */ ((ExperimentNames2) => {
   ExperimentNames2["ShowSingPassButtonForCompanies"] = "ShowSingPassButtonForCompanies";
   ExperimentNames2["ShowExtraTaxExemptionReasons"] = "ShowExtraTaxExemptionReasons";
   ExperimentNames2["EnableCountryOfGoverningLawForUKCompanies"] = "EnableCountryOfGoverningLawForUKCompanies";
+  ExperimentNames2["HidePayoutAccountTask"] = "HidePayoutAccountTask";
+  ExperimentNames2["HidePciTask"] = "HidePciTask";
   return ExperimentNames2;
 })(ExperimentNames || {});
 var VatAbsenceReason = /* @__PURE__ */ ((VatAbsenceReason2) => {
@@ -12310,10 +12203,7 @@ function Address(props) {
   }) => {
     const isHouseNumberFirst = COUNTRIES_WITH_HOUSE_NUMBER_FIRST.includes(data.country);
     const needsComma = COUNTRIES_WITH_COMMA_SEPARATED.includes(data.country);
-    let formattedAddress = isHouseNumberFirst ? `${houseNumberOrName} ${street2}` : `${street2} ${houseNumberOrName}`;
-    if (needsComma) {
-      formattedAddress = formattedAddress.replace(" ", ", ");
-    }
+    const formattedAddress = isHouseNumberFirst ? `${houseNumberOrName}${needsComma ? ", " : " "}${street2}` : `${street2}${needsComma ? ", " : " "}${houseNumberOrName}`;
     handleChangeFor("address", "input")(formattedAddress);
   };
   const setFieldsData = (address2, field) => {
@@ -14021,8 +13911,8 @@ const mapLegalEntityToSoleProp = (legalEntity) => {
   }
   return solePropCompData;
 };
-const mapSolePropToLegalEntity = (data, isCountryOfGoverningLawEnabled = false) => {
-  var _a;
+const mapSolePropToLegalEntity = (data) => {
+  var _a, _b;
   const requestObj = {
     ...formatObject(data, solePropApiKeyMapping)
   };
@@ -14041,7 +13931,7 @@ const mapSolePropToLegalEntity = (data, isCountryOfGoverningLawEnabled = false)
   if (data.solePropRegistrationDetails.exemptedFromRegistrationNumber) {
     requestObj.soleProprietorship.registrationNumber = "";
   }
-  if (!isCountryOfGoverningLawEnabled && ((_a = data.solePropNameAndCountry) == null ? void 0 : _a.country)) {
+  if (!((_a = requestObj.soleProprietorship) == null ? void 0 : _a.countryOfGoverningLaw) && ((_b = data.solePropNameAndCountry) == null ? void 0 : _b.country)) {
     requestObj.soleProprietorship.countryOfGoverningLaw = data.solePropNameAndCountry.country;
   }
   requestObj.type = LegalEntityType.SOLE_PROPRIETORSHIP;
@@ -24282,9 +24172,12 @@ var BusinessDetailsEvents = /* @__PURE__ */ ((BusinessDetailsEvents2) => {
 })(BusinessDetailsEvents || {});
 const isMaintenanceModeError = (error) => error && "messageCode" in error && error.messageCode === "maintenanceMode";
 const API_VALIDATION_ERROR_CODE = "30_102";
-const DOCUMENT_UPLOAD_ERROR_CODE = ["30_105", "30_106"];
-const isValidationError = (error) => error && "errorCode" in error && error.errorCode === API_VALIDATION_ERROR_CODE;
-const isDocumentUploadError = (error) => error && "errorCode" in error && typeof error.errorCode === "string" && DOCUMENT_UPLOAD_ERROR_CODE.includes(error.errorCode);
+const ID_DOCUMENT_UPLOAD_ERROR_CODE = "30_105";
+const BANK_STATEMENT_UPLOAD_ERROR_CODE = "30_106";
+const validateErrorCode = (error, errorCode) => error && "errorCode" in error && error.errorCode === errorCode;
+const isValidationError = (error) => validateErrorCode(error, API_VALIDATION_ERROR_CODE);
+const isIdDocumentUploadError = (error) => validateErrorCode(error, ID_DOCUMENT_UPLOAD_ERROR_CODE);
+const isBankStatementUploadError = (error) => validateErrorCode(error, BANK_STATEMENT_UPLOAD_ERROR_CODE);
 const processValidationErrors = (validationError, dropinTask) => {
   if ((validationError == null ? void 0 : validationError.invalidFields) && (validationError == null ? void 0 : validationError.invalidFields.length) > 0) {
     return validationError == null ? void 0 : validationError.invalidFields.reduce((acc, invalidField) => {
@@ -25939,6 +25832,7 @@ function CompanyBasics({
   shouldValidate,
   formVerificationErrors,
   fieldValidationErrors,
+  allFields,
   requiredFields,
   obscuredFields,
   optionalFields,
@@ -25972,6 +25866,7 @@ function CompanyBasics({
   const defaultTaxIdNumberType = existingTaxId ? inferTaxIdNumberType(existingTaxId, country2) : (_c = getTaxIdNumberOptions(country2, companyType2)) == null ? void 0 : _c[0].id;
   const [taxIdNumberType, setTaxIdNumberType] = useState$1(defaultTaxIdNumberType);
   const initialFormUtilsProps = useMemo$1(() => ({
+    allFields,
     labels: labels2,
     placeholders,
     helperText,
@@ -25981,10 +25876,10 @@ function CompanyBasics({
     optionalFields,
     obscuredFields,
     shouldValidate
-  }), [helperText, labels2, obscuredFields, optionalFields, placeholders, readOnly, readOnlyFields, requiredFields, shouldValidate]);
+  }), [allFields, 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) => {
+    return (_a2 = initialFormUtilsProps.allFields) == null ? void 0 : _a2.reduce((acc, field) => {
       switch (field) {
         case "legalCompanyName":
           return {
@@ -26171,14 +26066,14 @@ function CompanyOtherDetails({
   shouldValidate,
   formVerificationErrors,
   fieldValidationErrors,
+  allFields,
   requiredFields,
   obscuredFields,
   optionalFields,
   readOnlyFields,
   country: country2,
   legalCompanyName: legalCompanyName2,
-  companyType: companyType2,
-  kompanyVerifiedData
+  companyType: companyType2
 }) {
   var _a, _b, _c, _d;
   const {
@@ -26197,6 +26092,7 @@ function CompanyOtherDetails({
   const [taxIdNumberType, setTaxIdNumberType] = useState$1(defaultTaxIdNumberType);
   const directChildFields = companyOtherDetailsFields.filter((field) => ["tradingName", "sameNameAsLegalName", "stockExchangeMIC", "stockISIN", "dateOfIncorporation"].includes(field));
   const initialFormUtilsProps = useMemo$1(() => ({
+    allFields,
     labels: labels2,
     placeholders,
     helperText,
@@ -26206,10 +26102,10 @@ function CompanyOtherDetails({
     optionalFields,
     obscuredFields,
     shouldValidate
-  }), [helperText, labels2, obscuredFields, optionalFields, placeholders, readOnly, readOnlyFields, requiredFields, shouldValidate]);
+  }), [allFields, 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) => {
+    return (_a2 = initialFormUtilsProps.allFields) == null ? void 0 : _a2.reduce((acc, field) => {
       switch (field) {
         case "tradingName":
           return {
@@ -26266,8 +26162,6 @@ function CompanyOtherDetails({
     shouldValidate
   });
   const formUtils = formUtilities(mergedFieldProps ?? initialFormUtilsProps, i18n);
-  useEffect$1(() => {
-  }, [kompanyVerifiedData]);
   useEffect$1(() => {
     updateStateSlice({
       schema: formSchema,
@@ -29641,6 +29535,8 @@ function TaskListComponent({
     }
   }, [isCompany, isExperimentEnabled]);
   const hasSoleProprietorship = accountHolder2 === "mySoleProprietorName" || hasSolePropInLegalEntity(legalEntityResponse);
+  const hidePayoutAccountTaskExperiment = isExperimentEnabled(ExperimentNames.HidePayoutAccountTask);
+  const hidePciTaskExperiment = isExperimentEnabled(ExperimentNames.HidePciTask);
   const transferInstruments = (legalEntityResponse == null ? void 0 : legalEntityResponse.transferInstruments) || [];
   const canAddPayoutAccount = ((_a = legalEntityResponse == null ? void 0 : legalEntityResponse.organization) == null ? void 0 : _a.legalName) || ((_b = legalEntityResponse == null ? void 0 : legalEntityResponse.individual) == null ? void 0 : _b.name);
   const hasPayinTaskNotPayout = tasks.includes(TaskTypes.PAYIN) && !tasks.includes(TaskTypes.PAYOUT);
@@ -29649,7 +29545,7 @@ function TaskListComponent({
   const isSigningRequired = (pciStatus == null ? void 0 : pciStatus.signingRequired) === "true" || (pciStatus == null ? void 0 : pciStatus.signingRequired) === true;
   const canDownloadPci = !isSigningRequired && (pciStatus == null ? void 0 : pciStatus.hasDocuments);
   const isPciTaskDisabled = !canSignPci || !isSigningRequired && !(pciStatus == null ? void 0 : pciStatus.hasDocuments) || canDownloadPci;
-  const showPciTask = canDownloadPci || isSigningRequired;
+  const showPciTask = (canDownloadPci || isSigningRequired) && !hidePciTaskExperiment;
   const showServiceAgreementTask = tasks.includes(TaskTypes.SERVICE_AGREEMENT) && ((serviceAgreementTypes == null ? void 0 : serviceAgreementTypes.length) > 0 || (serviceAgreementAcceptanceInfos == null ? void 0 : serviceAgreementAcceptanceInfos.length) > 0);
   const hasServiceAgreementSigners = legalEntityResponse.type === LegalEntityType.ORGANIZATION && getOwnSignatories(legalEntityResponse).length || legalEntityResponse.type === LegalEntityType.INDIVIDUAL && !!(legalEntityResponse == null ? void 0 : legalEntityResponse.individual);
   const areServiceAgreementTasksDisabled = !hasServiceAgreementSigners;
@@ -29774,7 +29670,7 @@ function TaskListComponent({
           title: i18n.get("trustMembers"),
           status: hasRequiredTrustMemberCount2 ? getTaskStatus(EntityType.LEGAL_ENTITY, capabilityProblems, legalEntityResponse, getOwnTrustMembersLegalEntityIds(legalEntityResponse)) : TaskStatus.DETAILS_REQUIRED
         })]
-      }), (tasks.includes(TaskTypes.PAYOUT) || tasks.includes(TaskTypes.PAYIN)) && jsx(TaskListGroup, {
+      }), (tasks.includes(TaskTypes.PAYOUT) || tasks.includes(TaskTypes.PAYIN)) && !hidePayoutAccountTaskExperiment && jsx(TaskListGroup, {
         title: isEnableNewEntryFlowEnabled ? i18n.get("letUsKnowTheBankAccountToSendReceiveFunds") : i18n.get(hasPayinTaskNotPayout ? "payinAccountsDescription" : payoutTaskDescriptionKey),
         children: transferInstruments.length > 0 ? jsxs(Fragment, {
           children: [transferInstruments.map((transferInstrument) => jsx(PayoutAccountTaskListItem, {
@@ -31017,9 +30913,14 @@ function PayoutDetailsDropinComponent({
           ...problems,
           validationErrors
         });
-      } else if (isDocumentUploadError(e)) {
+      } else if (isIdDocumentUploadError(e)) {
+        showToast({
+          label: i18n.get("idDocumentAlreadyUploaded"),
+          type: ToastType.ERROR
+        });
+      } else if (isBankStatementUploadError(e)) {
         showToast({
-          label: i18n.get("documentUploadfailed"),
+          label: i18n.get("bankStatementAlreadyUploaded"),
           type: ToastType.ERROR
         });
       } else if (isMaintenanceModeError(e)) {
@@ -32602,7 +32503,7 @@ function SolePropDropinComponent({
     const dataSubmitted = data;
     setLoadingStatus("loading");
     try {
-      const legalEntity = await handleSubmitLegalEntity(mapSolePropToLegalEntity(dataSubmitted, isCountryOfGoverningLawEnabled));
+      const legalEntity = await handleSubmitLegalEntity(mapSolePropToLegalEntity(dataSubmitted));
       await submitDocuments2({
         forms: forms2,
         legalEntity,
@@ -35046,47 +34947,50 @@ function ManageTransferInstrumentOverviewItem({
     size: "large",
     showText: false
   }) : null;
-  const title = jsxs("div", {
-    className: "adyen-kyc-manage-ti-overview-item__heading",
-    children: [status, jsx(Heading, {
-      level: 1,
-      children: transferInstrumentReference.transferInstrument.accountIdentifier
-    })]
-  });
-  const actions = jsx("div", {
+  const actions = jsxs("div", {
     className: "adyen-kyc-manage-ti-overview-item__action",
-    children: needMoreDetails && jsx(Button, {
+    children: [needMoreDetails && jsx(Button, {
       label: i18n.get("completeAddingAccount"),
       onClick: (e) => {
         e.stopPropagation();
         onEdit(transferInstrumentReference.transferInstrument.id);
       },
       secondary: true
-    })
-  });
-  const subTitle = jsxs(Fragment, {
-    children: [description2 && jsx("span", {
-      children: i18n.get(description2)
-    }), actions]
-  });
-  return jsxs(AccordionItem, {
-    className: "adyen-kyc-manage-ti-overview-item",
-    expandIconPlacement: Placement.Right,
-    title,
-    subTitle,
-    onOpen: () => onOpen(transferInstrumentReference.transferInstrument.id),
-    children: [!transferInstrument ? jsx(LoaderWrapper, {
-      className: "adyen-kyc-manage-ti-overview-item__loader",
-      status: "loading"
-    }) : jsx(ManageTransferInstrumentOverviewItemSummary, {
-      transferInstrument,
-      accountHolderName,
-      onEdit: () => onEdit(transferInstrument.id)
     }), jsx(Remove, {
       label: isRemoving ? "removing" : "removeThisBankAccount",
       onRemove: async () => onRemove(transferInstrumentReference.transferInstrument.id),
       onRemoveStatusChange: setIsRemoving
     })]
+  });
+  const title = jsxs("div", {
+    className: "adyen-kyc-manage-ti-overview-item__header",
+    children: [jsxs("div", {
+      className: "adyen-kyc-manage-ti-overview-item__title",
+      children: [status, jsx(Heading, {
+        level: 2,
+        children: transferInstrumentReference.transferInstrument.accountIdentifier
+      })]
+    }), jsx("p", {
+      className: "adyen-kyc-manage-ti-overview-item__subtitle",
+      children: description2 && i18n.get(description2)
+    })]
+  });
+  return jsx(Accordion, {
+    className: "adyen-kyc-manage-ti-overview-item",
+    title,
+    onToggle: (state2) => {
+      if (state2 === "open") onOpen(transferInstrumentReference.transferInstrument.id);
+    },
+    children: jsxs(Fragment, {
+      children: [!transferInstrument ? jsx(LoaderWrapper, {
+        className: "adyen-kyc-manage-ti-overview-item__loader",
+        status: "loading"
+      }) : jsx(ManageTransferInstrumentOverviewItemSummary, {
+        transferInstrument,
+        accountHolderName,
+        onEdit: () => onEdit(transferInstrument.id)
+      }), actions]
+    })
   }, transferInstrumentReference.transferInstrument.id);
 }
 const logger$8 = createLogger("ManageTransferInstrumentOverview");
@@ -35134,7 +35038,7 @@ function ManageTransferInstrumentOverview({
     onOpen: onShowBankDetails
   }, transferInstrumentRef.transferInstrument.id));
   return jsxs(Fragment, {
-    children: [jsx(Accordion, {
+    children: [jsx("section", {
       className: "adyen-kyc-manage-ti-overview",
       children: transferInstrumentListEle
     }), jsx("div", {
@@ -35936,7 +35840,7 @@ const ConfigurationApiProvider = ({
     isEmbeddedDropin,
     loadingContext
   } = authContext;
-  const sdkVersion = "3.17.1";
+  const sdkVersion = "3.18.1";
   useAnalytics({
     onUserEvent,
     legalEntityId: rootLegalEntityId,
@@ -36477,12 +36381,15 @@ class UIElement extends BaseElement {
                     refreshExpiry: this.props.refreshExpiry,
                     eventEmitter: this.eventEmitter,
                     children: jsx("div", {
-                      className: "adyen-kyc-dropin-container adyen-kyc-u-position-relative",
+                      className: "adyen-kyc-u-width-full",
                       children: jsx(AutoResizer, {
-                        children: jsx(ToastContextProvider, {
-                          children: jsx(StateProvider, {
-                            children: jsx(Component, {
-                              ...this.props.componentProps
+                        children: jsx("div", {
+                          className: "adyen-kyc-dropin-container adyen-kyc-u-position-relative",
+                          children: jsx(ToastContextProvider, {
+                            children: jsx(StateProvider, {
+                              children: jsx(Component, {
+                                ...this.props.componentProps
+                              })
                             })
                           })
                         })