@adyen/kyc-components 3.41.3 → 3.41.5

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

@@ -1455,7 +1455,23 @@ const defaultLocaleTranslations = {
   yourIbanShouldBeginWith_: "Your IBAN should begin with %{countryCode}.",
   yourLoanApplicationHasBeenReceived: "Thank you for providing your additional information. The data provided is being reviewed. You'll be notified if anything else is needed.",
   zentralesVereinsregisterId: "Zentrales Vereinsregister ID",
-  zipCode: "ZIP code"
+  zipCode: "ZIP code",
+  invalidInputError: "There was an invalid input error:",
+  bankAccountNeeded: "A bank account is needed.",
+  noIssuesFound: "No issues found.",
+  newEntityAlwaysEmpty: "We still need to create this entity.",
+  missingRequiredDecisionMakers: "We don't yet have sufficient decision makers.",
+  missingRequiredTrustMembers: "We don't yet have sufficient trust members.",
+  rootLegalEntityIsEmpty: "The root legal entity only has the minimum data (is empty).",
+  legalRepresentativeNeeded: "The user is underage, therefore a legal representative is needed.",
+  dataMissingError: "We are missing required data.",
+  dataReviewNeeded: "A data review is neeced.",
+  pendingStatusError: "There is an error with a pending status.",
+  pendingCapabilities: "Some capabilities are still pending.",
+  invalidCapabilities: "Some capabilities are invalid.",
+  allCapabilitiesValid: "All capabilities are valid",
+  task: "Task",
+  reason: "Reason"
 };
 const enUS = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
@@ -12146,7 +12162,7 @@ const financialInfoValidationRules = {
   }
 };
 const financialInformationReportedValueOptions = "adyen-kyc-financial-information-reported-value-options";
-const styles$8 = {
+const styles$a = {
   "financial-information-reported-value-options": "adyen-kyc-financial-information-reported-value-options",
   financialInformationReportedValueOptions
 };
@@ -12194,7 +12210,7 @@ const InputCurrency = ({
 };
 const reportedValue = "adyen-kyc-reported-value";
 const reportedValueInput = "adyen-kyc-reported-value-input";
-const styles$7 = {
+const styles$9 = {
   "reported-value": "adyen-kyc-reported-value",
   reportedValue,
   "reported-value-input": "adyen-kyc-reported-value-input",
@@ -12211,7 +12227,7 @@ const ReportedValue = ({
   isValid
 }) => {
   const { i18n } = useI18nContext();
-  return /* @__PURE__ */ jsx("div", { className: styles$7.reportedValue, children: /* @__PURE__ */ jsx(Field, { name: fieldName, errorMessage, isValid, helper, children: (childProps) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: styles$9.reportedValue, children: /* @__PURE__ */ jsx(Field, { name: fieldName, errorMessage, isValid, helper, children: (childProps) => /* @__PURE__ */ jsx(
     InputCurrency,
     {
       ...childProps,
@@ -12219,7 +12235,7 @@ const ReportedValue = ({
       currency,
       amount,
       onAmountChanged,
-      className: styles$7.reportedValueInput,
+      className: styles$9.reportedValueInput,
       "aria-label": label
     }
   ) }) });
@@ -12356,7 +12372,7 @@ function FinancialInformation(props) {
             ],
             onChange: updateReportedValueOption,
             showContentOnlyOnSelected: true,
-            className: styles$8.financialInformationReportedValueOptions
+            className: styles$a.financialInformationReportedValueOptions
           }
         )
       }
@@ -14785,6 +14801,7 @@ var TaskStatus = /* @__PURE__ */ ((TaskStatus2) => {
   TaskStatus2[TaskStatus2["SIGNED"] = 7] = "SIGNED";
   TaskStatus2[TaskStatus2["SUBMIT"] = 8] = "SUBMIT";
   TaskStatus2[TaskStatus2["REMOVING"] = 9] = "REMOVING";
+  TaskStatus2[TaskStatus2["UNKNOWN"] = 10] = "UNKNOWN";
   return TaskStatus2;
 })(TaskStatus || {});
 const COUNTRIES_THAT_DONT_REQUIRE_SOLE_PROP_REGISTRATION = [
@@ -16281,7 +16298,7 @@ const useIdVerificationToken = ({
 };
 const loaderWrapperLoader = "adyen-kyc-loader-wrapper-loader";
 const loaderWrapperLoaderActive = "adyen-kyc-loader-wrapper-loader-active";
-const styles$6 = {
+const styles$8 = {
   "loader-wrapper-loader": "adyen-kyc-loader-wrapper-loader",
   loaderWrapperLoader,
   "loader-wrapper-loader-active": "adyen-kyc-loader-wrapper-loader-active",
@@ -16298,13 +16315,13 @@ const LoaderWrapper = ({
   const opacitySyle = status === "loading" ? {
     opacity: formOpacityWhenLoading
   } : { opacity: 1 };
-  const loaderWrapperClass = cx(styles$6.loaderWrapperLoader, {
-    [styles$6.loaderWrapperLoaderActive]: status === "loading" && showSpinner
+  const loaderWrapperClass = cx(styles$8.loaderWrapperLoader, {
+    [styles$8.loaderWrapperLoaderActive]: status === "loading" && showSpinner
   });
-  const overlayClass = cx(styles$6.loaderWrapper, className);
+  const overlayClass = cx(styles$8.loaderWrapper, className);
   return /* @__PURE__ */ jsxs("div", { className: overlayClass, style: { position: "relative" }, children: [
     /* @__PURE__ */ jsx("div", { className: loaderWrapperClass, children: /* @__PURE__ */ jsx(Loader, { size: loaderSize }) }),
-    /* @__PURE__ */ jsx("div", { className: styles$6.loaderWrapperForm, style: opacitySyle, children })
+    /* @__PURE__ */ jsx("div", { className: styles$8.loaderWrapperForm, style: opacitySyle, children })
   ] });
 };
 const containerId = "adyen-kyc-id-verification";
@@ -18161,7 +18178,7 @@ const roleMetadata = {
     name: TrustMemberGuidanceLabel.TRUSTEE
   }
 };
-const getRoleTagVariant$1 = (role) => {
+const getRoleTagVariant = (role) => {
   var _a;
   return ((_a = roleMetadata[role]) == null ? void 0 : _a.variant) ?? "blue";
 };
@@ -22813,7 +22830,7 @@ function Card({
 const skeleton = "adyen-kyc-skeleton";
 const skeletonCircle = "adyen-kyc-skeleton-circle";
 const skeletonText = "adyen-kyc-skeleton-text";
-const styles$5 = {
+const styles$7 = {
   skeleton,
   "skeleton-circle": "adyen-kyc-skeleton-circle",
   skeletonCircle,
@@ -22826,9 +22843,9 @@ const Skeleton = ({
   height = "1em",
   width
 }) => {
-  const classNames = cx(styles$5.skeleton, {
-    [styles$5.skeletonCircle]: circle,
-    [styles$5.skeletonText]: text
+  const classNames = cx(styles$7.skeleton, {
+    [styles$7.skeletonCircle]: circle,
+    [styles$7.skeletonText]: text
   });
   return /* @__PURE__ */ jsx("div", { className: classNames, style: { height, width } });
 };
@@ -22839,7 +22856,7 @@ const preferInstantVerificationMethodText = "adyen-kyc-prefer-instant-verificati
 const preferInstantVerificationMethodInstantButton = "adyen-kyc-prefer-instant-verification-method-instant-button";
 const preferInstantVerificationMethodActions = "adyen-kyc-prefer-instant-verification-method-actions";
 const preferInstantVerificationMethodManualButtonDarker = "adyen-kyc-prefer-instant-verification-method-manual-button-darker";
-const styles$4 = {
+const styles$6 = {
   "prefer-instant-verification-method": "adyen-kyc-prefer-instant-verification-method",
   preferInstantVerificationMethod,
   "prefer-instant-verification-method-card": "adyen-kyc-prefer-instant-verification-method-card",
@@ -22889,13 +22906,13 @@ const PreferInstantVerificationMethod = ({
     setHideVerificationWidget(false);
     selectVerificationMethod("instantVerification");
   };
-  const providerBanner = provider && /* @__PURE__ */ jsx(Card, { background: "secondary", children: /* @__PURE__ */ jsxs("div", { className: styles$4.preferInstantVerificationMethodCard, children: [
+  const providerBanner = provider && /* @__PURE__ */ jsx(Card, { background: "secondary", children: /* @__PURE__ */ jsxs("div", { className: styles$6.preferInstantVerificationMethodCard, children: [
     /* @__PURE__ */ jsx(
       Svg,
       {
         type: "image",
         name: "instant-verification-method",
-        className: styles$4.preferInstantVerificationMethodImage
+        className: styles$6.preferInstantVerificationMethodImage
       }
     ),
     /* @__PURE__ */ jsx(
@@ -22903,7 +22920,7 @@ const PreferInstantVerificationMethod = ({
       {
         el: "p",
         variant: "body-stronger",
-        className: styles$4.preferInstantVerificationMethodText,
+        className: styles$6.preferInstantVerificationMethodText,
         children: i18n.get("instantlyConnectAndVerifyYourBankAccount")
       }
     ),
@@ -22914,7 +22931,7 @@ const PreferInstantVerificationMethod = ({
         label: i18n.get("connectWith", {
           values: { providerName: iconName ? "" : provider.name }
         }),
-        className: styles$4.preferInstantVerificationMethodInstantButton,
+        className: styles$6.preferInstantVerificationMethodInstantButton,
         onClick: handleClickProviderButton,
         disabled: bankInfoValidated,
         icon: iconName,
@@ -22934,16 +22951,16 @@ const PreferInstantVerificationMethod = ({
       retrieveBankAccountInfo
     }
   );
-  return /* @__PURE__ */ jsxs("div", { className: styles$4.preferInstantVerificationMethod, children: [
+  return /* @__PURE__ */ jsxs("div", { className: styles$6.preferInstantVerificationMethod, children: [
     loadingStatus === "loading" ? /* @__PURE__ */ jsx(Skeleton, { height: "21rem" }) : instantVerificationAvailable && (showVerificationWidget ? bankVerificationWidget : providerBanner),
-    /* @__PURE__ */ jsx("div", { className: styles$4.preferInstantVerificationMethodActions, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: styles$6.preferInstantVerificationMethodActions, children: /* @__PURE__ */ jsx(
       Button,
       {
         type: "button",
         label: i18n.get("addAccountManually"),
         tertiary: instantVerificationAvailable,
         className: cx({
-          [styles$4.preferInstantVerificationMethodManualButtonDarker]: instantVerificationAvailable
+          [styles$6.preferInstantVerificationMethodManualButtonDarker]: instantVerificationAvailable
         }),
         onClick: () => selectVerificationMethod("manualVerification"),
         disabled: bankInfoValidated
@@ -25089,7 +25106,8 @@ function getEntityProblems(verificationErrors, entityType, isExperimentEnabled)
           currEntityProblems.remediationActions = remediationActions;
           currEntityProblems.statusWithReason = getPriorityStatus(entityProblems, {
             status: TaskStatus.ERROR,
-            reason: "invalidInputError"
+            reason: "invalidInputError",
+            details: { verificationError }
           });
         }
         break;
@@ -25099,7 +25117,8 @@ function getEntityProblems(verificationErrors, entityType, isExperimentEnabled)
         if (!isUnRelatedErrorCode(verificationError)) {
           currEntityProblems.statusWithReason = getPriorityStatus(entityProblems, {
             status: TaskStatus.DETAILS_REQUIRED,
-            reason: "dataMissingError"
+            reason: "dataMissingError",
+            details: { verificationError }
           });
         }
         break;
@@ -26420,7 +26439,7 @@ const structuredListListItem = "adyen-kyc-structured-list-list-item";
 const adyenLayoutMd = "adyen-layout-md";
 const structuredListLabel = "adyen-kyc-structured-list-label";
 const structuredListValue = "adyen-kyc-structured-list-value";
-const styles$3 = {
+const styles$5 = {
   "structured-list": "adyen-kyc-structured-list",
   structuredList,
   "structured-list-list-item": "adyen-kyc-structured-list-list-item",
@@ -26434,9 +26453,9 @@ const styles$3 = {
 };
 const StructuredList = ({ items }) => {
   const { i18n } = useI18nContext();
-  return /* @__PURE__ */ jsx("dl", { className: styles$3.structuredList, children: items.map((item) => /* @__PURE__ */ jsxs("div", { className: styles$3.structuredListListItem, children: [
-    /* @__PURE__ */ jsx("dt", { className: styles$3.structuredListLabel, children: i18n.get(item.labelKey) }),
-    /* @__PURE__ */ jsx("dd", { className: styles$3.structuredListValue, children: item.value })
+  return /* @__PURE__ */ jsx("dl", { className: styles$5.structuredList, children: items.map((item) => /* @__PURE__ */ jsxs("div", { className: styles$5.structuredListListItem, children: [
+    /* @__PURE__ */ jsx("dt", { className: styles$5.structuredListLabel, children: i18n.get(item.labelKey) }),
+    /* @__PURE__ */ jsx("dd", { className: styles$5.structuredListValue, children: item.value })
   ] }, item.labelKey)) });
 };
 function VerifiedBusinessCard({
@@ -28777,7 +28796,7 @@ const ExpiredBanner = () => {
   return /* @__PURE__ */ jsx(Alert, { variant: "warning", title: i18n.get("thisPageIsNowInactive"), children: i18n.get("startANewSessionFromTheSamePlaceYouOriginallyAccessed") });
 };
 const Modal = ({
-  header,
+  header: header2,
   children,
   footer,
   size = "medium",
@@ -28833,7 +28852,7 @@ const Modal = ({
                     shaded: true
                   }
                 ) : /* @__PURE__ */ jsx("div", {}),
-                !movableHeader && header && /* @__PURE__ */ jsx("header", { className: "adyen-kyc-modal__header", children: header }),
+                !movableHeader && header2 && /* @__PURE__ */ jsx("header", { className: "adyen-kyc-modal__header", children: header2 }),
                 onClose ? /* @__PURE__ */ jsx(
                   Button,
                   {
@@ -28848,7 +28867,7 @@ const Modal = ({
               ]
             }
           ),
-          movableHeader && header && /* @__PURE__ */ jsx("header", { className: "adyen-kyc-modal__header", children: header }),
+          movableHeader && header2 && /* @__PURE__ */ jsx("header", { className: "adyen-kyc-modal__header", children: header2 }),
           /* @__PURE__ */ jsx("section", { className: "adyen-kyc-modal__content", children })
         ] }),
         /* @__PURE__ */ jsx("div", { children: footer && /* @__PURE__ */ jsx("footer", { className: "adyen-kyc-modal__footer", children: footer }) })
@@ -29163,7 +29182,7 @@ function FormNavigation({
   gotoForm,
   validateForm,
   className,
-  taskName,
+  taskName: taskName2,
   verificationErrors,
   trackNavigation: trackNavigation2 = noop
 }) {
@@ -29183,13 +29202,13 @@ function FormNavigation({
     return activeForm2.isValid ? void 0 : validateForm;
   };
   return /* @__PURE__ */ jsxs("div", { className: cx("adyen-kyc-form-navigation", className), children: [
-    /* @__PURE__ */ jsx("div", { className: "adyen-kyc-form-navigation__header", children: i18n.get(taskName) }),
+    /* @__PURE__ */ jsx("div", { className: "adyen-kyc-form-navigation__header", children: i18n.get(taskName2) }),
     /* @__PURE__ */ jsxs("ul", { className: "adyen-kyc-form-navigation__items", children: [
       forms && /* @__PURE__ */ jsx("li", { className: "adyen-kyc-form-navigation__home-button-item", children: /* @__PURE__ */ jsx("span", { className: "adyen-kyc-form-navigation__step-count", children: i18n.get("stepsX/YofForm", {
         values: {
           activeFormIndex: getFormIndex(activeForm) + 1,
           totalForms: forms.length,
-          taskNameTranslated: i18n.get(taskName)
+          taskNameTranslated: i18n.get(taskName2)
         }
       }) }) }),
       forms.map((form) => /* @__PURE__ */ jsx(
@@ -29207,7 +29226,7 @@ function FormNavigation({
 }
 const FormWrapper = ({
   summary: summary2,
-  taskName,
+  taskName: taskName2,
   children,
   handleNextClick,
   handleBackClick,
@@ -29250,13 +29269,13 @@ const FormWrapper = ({
     }
   };
   const showLegalCaption = ["solePropDetails", "companyDetails", "businessDetails"].includes(
-    taskName
+    taskName2
   );
   const { isExperimentEnabled } = useExperimentsContext();
   const showExtraTaxExemptionReasons = isExperimentEnabled(
     ExperimentNames.ShowExtraTaxExemptionReasons
   );
-  const showTaxExemptedLegalCaption = showExtraTaxExemptionReasons && ((_a = summaryData.companyRegistrationDetails) == null ? void 0 : _a.vatAbsenceReason) && ["companyDetails", "businessDetails"].includes(taskName);
+  const showTaxExemptedLegalCaption = showExtraTaxExemptionReasons && ((_a = summaryData.companyRegistrationDetails) == null ? void 0 : _a.vatAbsenceReason) && ["companyDetails", "businessDetails"].includes(taskName2);
   const summaryContent = /* @__PURE__ */ jsx("div", { className: "adyen-kyc-form-wrapper", children: /* @__PURE__ */ jsx(
     Summary,
     {
@@ -29353,7 +29372,7 @@ const FormWrapper = ({
           activeForm,
           gotoForm: gotoFormByFormIndex,
           validateForm,
-          taskName,
+          taskName: taskName2,
           trackNavigation: ({ fromForm, toForm, component }) => trackNavigation({ fromForm, toForm, component, baseTrackingPayload, i18n }),
           verificationErrors: problems == null ? void 0 : problems.verificationErrors
         }
@@ -29815,7 +29834,7 @@ function BusinessDetailsDropinComponent({
   parentLegalEntity,
   trackingConfig,
   capabilities,
-  taskName,
+  taskName: taskName2,
   hideDropinLayout,
   homeButtonLabel,
   taskType = TaskTypes.BUSINESS_DETAILS,
@@ -30271,7 +30290,7 @@ function BusinessDetailsDropinComponent({
   return /* @__PURE__ */ jsx(
     FormWrapper,
     {
-      taskName: taskName ?? "businessDetails",
+      taskName: taskName2 ?? "businessDetails",
       gotoFormByFormIndex: goToForm,
       hideDropinLayout,
       hideHomeButton: hideHome,
@@ -30364,7 +30383,7 @@ function CompanyDropinComponent({
   country: parentCountry,
   problems: propProblems,
   hideDropinLayout,
-  taskName,
+  taskName: taskName2,
   capabilities,
   homeButtonLabel,
   taskType = TaskTypes.COMPANY,
@@ -30710,7 +30729,7 @@ function CompanyDropinComponent({
   return /* @__PURE__ */ jsx(
     FormWrapper,
     {
-      taskName,
+      taskName: taskName2,
       handleNextClick,
       gotoFormByFormIndex,
       handleHomeClick,
@@ -32126,8 +32145,9 @@ const TaskItemStatus = ({
       );
     case TaskStatus.DETAILS_REQUIRED:
     case TaskStatus.EMPTY:
-    default:
       return /* @__PURE__ */ jsx("span", { className: "adyen-kyc-task-status-details-required", children: statusLabel || i18n.get("add") });
+    default:
+      return /* @__PURE__ */ jsx("span", { className: "adyen-kyc-task-status-details-unknown", children: i18n.get("unknown") });
   }
 };
 const VerificationErrorAlert = ({
@@ -32346,7 +32366,7 @@ const EntityAssociation = ({
           Tag,
           {
             className: "adyen-kyc-entity-association__tag",
-            variant: getRoleTagVariant$1(type),
+            variant: getRoleTagVariant(type),
             children: i18n.get(getRoleName(type))
           },
           type
@@ -32407,7 +32427,7 @@ const EntityGuidanceStatus = ({
       Tag,
       {
         className: "adyen-kyc-entity-status__tag",
-        variant: getRoleTagVariant$1(entityLabel),
+        variant: getRoleTagVariant(entityLabel),
         children: i18n.get(getRoleName(entityLabel))
       },
       entityLabel
@@ -32582,8 +32602,6 @@ const getRegularTaskStatus = ({
         status: TaskStatus.PROCESSING,
         reason: "pendingCapabilities"
       };
-    if (hasInvalidCapabilities(rootLegalEntity))
-      return { status: TaskStatus.ERROR, reason: "invalidCapabilities" };
     if (hasAllCapabilitiesValid(rootLegalEntity))
       return {
         status: TaskStatus.FINISHED,
@@ -32616,9 +32634,6 @@ const hasAllCapabilitiesResolved = (legalEntityResponse) => Object.values((legal
 const hasRejectedCapabilities = (legalEntityResponse) => Object.values((legalEntityResponse == null ? void 0 : legalEntityResponse.capabilities) ?? {}).some(
   (capability) => capability.verificationStatus === VerificationStatus.REJECTED
 );
-const hasInvalidCapabilities = (legalEntityResponse) => Object.values((legalEntityResponse == null ? void 0 : legalEntityResponse.capabilities) ?? {}).some(
-  (capability) => capability.verificationStatus === VerificationStatus.INVALID
-);
 const hasAllCapabilitiesValid = (legalEntityResponse) => Object.values((legalEntityResponse == null ? void 0 : legalEntityResponse.capabilities) ?? {}).every(
   (capability) => capability.verificationStatus === VerificationStatus.VALID
 );
@@ -32719,6 +32734,7 @@ const splitTaskIdentifier = (taskIdentifier) => {
 const determineTaskIdentifiers = ({
   taskTypes: receivedTaskTypes,
   rootLegalEntity,
+  accountHolder,
   capabilityProblems,
   trustMembers,
   transferInstruments
@@ -32739,7 +32755,11 @@ const determineTaskIdentifiers = ({
     const decisionMakers = getOwnDecisionMakersLegalEntityIds(rootLegalEntity);
     decisionMakers.forEach((id) => tasks.push(`DECISION_MAKER-${id}`));
   }
-  if (taskTypes.includes(TaskTypes.TRUST_MEMBER_OVERVIEW)) {
+  if (accountHolder === "mySoleProprietorName") {
+    tasks.push(TaskTypes.SOLE_PROPRIETOR_COMPANY);
+  }
+  if (accountHolder === "aTrust") {
+    tasks.push(TaskTypes.TRUST_MEMBER_OVERVIEW);
     trustMembers.forEach((member) => {
       if (member.trustMemberType === "undefinedBeneficiary") {
         tasks.push(`TRUST_MEMBER-undefinedBeneficiary`);
@@ -32772,6 +32792,7 @@ const computed = dist.createComputed(
   ({
     taskTypes,
     rootLegalEntity,
+    accountHolder,
     capabilityProblems,
     legalRepresentative,
     transferInstruments,
@@ -32780,6 +32801,7 @@ const computed = dist.createComputed(
     const tasks = determineTaskIdentifiers({
       taskTypes,
       rootLegalEntity,
+      accountHolder,
       capabilityProblems,
       legalRepresentative,
       transferInstruments,
@@ -32808,12 +32830,14 @@ const createTaskStore = () => createStore(
     // Defaults
     taskTypes: [],
     rootLegalEntity: void 0,
+    accountHolder: void 0,
     capabilityProblems: void 0,
     legalRepresentative: void 0,
     trustMembers: [],
     transferInstruments: [],
     setTaskTypes: (taskTypes) => set({ taskTypes }),
     setRootLegalEntity: (rootLegalEntity) => set({ rootLegalEntity }),
+    setAccountHolder: (accountHolder) => set({ accountHolder }),
     setCapabilityProblems: (capabilityProblems) => set({ capabilityProblems }),
     setLegalRepresentative: (legalRepresentative) => set({ legalRepresentative }),
     setTrustMembers: (trustMembers) => set({ trustMembers }),
@@ -32843,8 +32867,8 @@ const useGetTaskStatus = () => {
       const taskIdentifier = id ? `${taskType}-${id}` : taskType;
       const status = (_a = taskStatuses[taskIdentifier]) == null ? void 0 : _a.status;
       if (!status) {
-        logger$r.warn(`No status for task '${taskIdentifier}', returning EMPTY`);
-        return TaskStatus.EMPTY;
+        logger$r.warn(`No status for task '${taskIdentifier}', returning UNKNOWN`);
+        return TaskStatus.UNKNOWN;
       }
       return status;
     },
@@ -34047,7 +34071,7 @@ function TaskList({
               onNavigateToTask: () => handleOnNavigateToTaskPayout(),
               icon: "payout",
               title: canChangeEntityType ? i18n.get("bankAccountDetails") : i18n.get(hasPayinTaskNotPayout ? "payinDetails" : "payoutDetails"),
-              status: getTaskStatus(hasPayinTaskNotPayout ? TaskTypes.PAYIN : TaskTypes.PAYOUT) ?? TaskStatus.EMPTY,
+              status: getTaskStatus(hasPayinTaskNotPayout ? TaskTypes.PAYIN : TaskTypes.PAYOUT),
               disabled: !canAddPayoutAccount,
               problems: getEmptyBankAccountProblems()
             }
@@ -34572,7 +34596,7 @@ function IndividualDropinComponent({
   trackingConfig,
   parentLegalEntity,
   legalEntityResponse,
-  taskName,
+  taskName: taskName2,
   handleHomeClick,
   handleCloseClick,
   homeButtonLabel,
@@ -35094,7 +35118,7 @@ function IndividualDropinComponent({
   return /* @__PURE__ */ jsx(
     FormWrapper,
     {
-      taskName: taskName ?? "individualDetails",
+      taskName: taskName2 ?? "individualDetails",
       activeForm,
       summary: {
         data: formatDataForSummary2(),
@@ -35297,7 +35321,7 @@ function PayoutDetailsDropinComponent({
   onSubmit: externalOnSubmit,
   onChange,
   taskType: propTaskType,
-  taskName,
+  taskName: taskName2,
   capabilities,
   handleHomeClick,
   homeButtonLabel,
@@ -35669,7 +35693,7 @@ function PayoutDetailsDropinComponent({
   return /* @__PURE__ */ jsx(
     FormWrapper,
     {
-      taskName: taskName ?? "bankAccountDetails",
+      taskName: taskName2 ?? "bankAccountDetails",
       activeForm,
       summary: {
         data: formatDataForSummary2(),
@@ -35732,11 +35756,11 @@ function PayoutDetailsDropinComponent({
   );
 }
 const outlinedIcon = "adyen-kyc-outlined-icon";
-const styles$2 = {
+const styles$4 = {
   "outlined-icon": "adyen-kyc-outlined-icon",
   outlinedIcon
 };
-const OutlinedIcon = ({ name }) => /* @__PURE__ */ jsx("div", { className: styles$2.outlinedIcon, children: /* @__PURE__ */ jsx(Icon, { name }) });
+const OutlinedIcon = ({ name }) => /* @__PURE__ */ jsx("div", { className: styles$4.outlinedIcon, children: /* @__PURE__ */ jsx(Icon, { name }) });
 const Splashscreen = ({ title, subtitle, icon, buttonText, onClick }) => {
   const { i18n } = useI18nContext();
   return /* @__PURE__ */ jsxs("div", { className: "adyen-kyc-splashscreen", children: [
@@ -36436,12 +36460,12 @@ const TrustRoleAndEntityType = (props) => {
   ] });
 };
 const settlorExemptionReasonsList = "adyen-kyc-settlor-exemption-reasons-list";
-const styles$1 = {
+const styles$3 = {
   "settlor-exemption-reasons-list": "adyen-kyc-settlor-exemption-reasons-list",
   settlorExemptionReasonsList
 };
 const formatRolesForSummary = (roles, i18n) => roles.map((role) => i18n.get(getRoleName(role))).join(", ");
-const formatSettlorExemptionReasonsForSummary = (reasons, i18n) => /* @__PURE__ */ jsx("ul", { className: styles$1.settlorExemptionReasonsList, children: reasons.map((reason) => /* @__PURE__ */ jsx("li", { children: i18n.get(reason) }, reason)) });
+const formatSettlorExemptionReasonsForSummary = (reasons, i18n) => /* @__PURE__ */ jsx("ul", { className: styles$3.settlorExemptionReasonsList, children: reasons.map((reason) => /* @__PURE__ */ jsx("li", { children: i18n.get(reason) }, reason)) });
 const formatRoleAndEntityTypeSummary = (data, i18n, isOrganizationSettlorWithExemptionEnabled) => {
   var _a, _b;
   const { trustMemberType, roles } = data;
@@ -38564,6 +38588,7 @@ function DropinComposerComponent({
       transferInstruments: rootLegalEntity.transferInstruments ?? []
     });
   }, []);
+  useEffect(() => taskStore.setAccountHolder(accountHolder), [accountHolder]);
   const singpassBanner = isEligibleForSingpass ? /* @__PURE__ */ jsx(
     SingpassBanner,
     {
@@ -40073,7 +40098,7 @@ const embeddedStatusAvatar = "adyen-kyc-embedded-status-avatar";
 const embeddedStatusLight = "adyen-kyc-embedded-status-light";
 const embeddedStatusActionIndicator = "adyen-kyc-embedded-status-action-indicator";
 const embeddedStatusInfo = "adyen-kyc-embedded-status-info";
-const styles = {
+const styles$2 = {
   "embedded-status": "adyen-kyc-embedded-status",
   embeddedStatus,
   "embedded-status-loading": "adyen-kyc-embedded-status-loading",
@@ -40129,22 +40154,22 @@ const EmbeddedStatus = ({
     "button",
     {
       type: "button",
-      className: cx(className, styles.embeddedStatus, "adyen-kyc-externalComponent", {
-        [styles.embeddedStatusLoading]: loading,
-        [styles.embeddedStatusLight]: light
+      className: cx(className, styles$2.embeddedStatus, "adyen-kyc-externalComponent", {
+        [styles$2.embeddedStatusLoading]: loading,
+        [styles$2.embeddedStatusLight]: light
       }),
       onClick,
       ...props,
       children: [
-        /* @__PURE__ */ jsx("section", { className: styles.embeddedStatusAvatar, children: loading ? /* @__PURE__ */ jsx(Skeleton, { height: "100%", width: "100%", circle: true }) : /* @__PURE__ */ jsx(Icon, { className: styles.embeddedStatusIcon, name: iconName }) }),
-        /* @__PURE__ */ jsx("section", { className: styles.embeddedStatusInfo, children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("section", { className: styles$2.embeddedStatusAvatar, children: loading ? /* @__PURE__ */ jsx(Skeleton, { height: "100%", width: "100%", circle: true }) : /* @__PURE__ */ jsx(Icon, { className: styles$2.embeddedStatusIcon, name: iconName }) }),
+        /* @__PURE__ */ jsx("section", { className: styles$2.embeddedStatusInfo, children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(Skeleton, { text: true, width: "20ch", height: "1em" }),
           /* @__PURE__ */ jsx(Skeleton, { text: true, width: "90%", height: "1em" })
         ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(Typography, { variant: "body-stronger", children: title }),
           /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", children: subtitle })
         ] }) }),
-        actionIndicator ? /* @__PURE__ */ jsx("section", { className: styles.embeddedStatusButton, children: loading ? /* @__PURE__ */ jsx(Skeleton, { width: "5em", height: "2em" }) : /* @__PURE__ */ jsx(Typography, { variant: "body-stronger", className: styles.embeddedStatusActionIndicator, children: i18n.get(actionIndicator.labelKey) }) }) : (statusTag == null ? void 0 : statusTag.translationKey) && /* @__PURE__ */ jsx("section", { className: styles.embeddedStatusTag, children: loading ? /* @__PURE__ */ jsx(Skeleton, { width: "8ch", height: "1em" }) : /* @__PURE__ */ jsx(Tag, { variant: statusTag.variant, children: i18n.get(statusTag.translationKey) }) })
+        actionIndicator ? /* @__PURE__ */ jsx("section", { className: styles$2.embeddedStatusButton, children: loading ? /* @__PURE__ */ jsx(Skeleton, { width: "5em", height: "2em" }) : /* @__PURE__ */ jsx(Typography, { variant: "body-stronger", className: styles$2.embeddedStatusActionIndicator, children: i18n.get(actionIndicator.labelKey) }) }) : (statusTag == null ? void 0 : statusTag.translationKey) && /* @__PURE__ */ jsx("section", { className: styles$2.embeddedStatusTag, children: loading ? /* @__PURE__ */ jsx(Skeleton, { width: "8ch", height: "1em" }) : /* @__PURE__ */ jsx(Tag, { variant: statusTag.variant, children: i18n.get(statusTag.translationKey) }) })
       ]
     }
   );
@@ -40266,15 +40291,15 @@ function TermsOfServiceStatus({
     async () => getServiceAgreementAcceptanceInfos2(legalEntityId),
     [getServiceAgreementAcceptanceInfos2, legalEntityId]
   );
-  const getStatus2 = useCallback(async () => {
+  const getStatus = useCallback(async () => {
     const [signedRes, unsignedRes] = await Promise.all([getSigned(), getUnsigned()]);
     const signed = signedRes.data.map((d) => d.type);
     const unsigned = unsignedRes.termsOfServiceTypes;
     return signed.length !== 0 && unsigned.length === 0;
   }, [getUnsigned, getSigned]);
   useEffect(() => {
-    getStatus2().then((allSigned) => setHasSignedAll(allSigned)).catch((e) => logger$i.error(e)).finally(() => setIsLoading(false));
-  }, [getStatus2]);
+    getStatus().then((allSigned) => setHasSignedAll(allSigned)).catch((e) => logger$i.error(e)).finally(() => setIsLoading(false));
+  }, [getStatus]);
   return hasSignedAll ? /* @__PURE__ */ jsx(
     EmbeddedStatus,
     {
@@ -43614,7 +43639,7 @@ const ConfigurationApiProvider = ({
 }) => {
   const authContext = useAuthContext();
   const { isEmbeddedDropin, loadingContext } = authContext;
-  const sdkVersion = "3.41.3";
+  const sdkVersion = "3.41.5";
   useAnalytics({
     onUserEvent,
     legalEntityId: rootLegalEntityId,
@@ -44238,7 +44263,124 @@ class BaseElement {
     }
   }
 }
-const getRoleTagVariant = (value) => {
+const header = "adyen-kyc-header";
+const taskName = "adyen-kyc-task-name";
+const table = "adyen-kyc-table";
+const styles$1 = {
+  header,
+  "task-name": "adyen-kyc-task-name",
+  taskName,
+  table
+};
+const DebugTaskStatuses = ({ taskStatuses }) => {
+  const { i18n } = useI18nContext();
+  return /* @__PURE__ */ jsxs("table", { className: styles$1.table, children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: styles$1.header, children: [
+      /* @__PURE__ */ jsx("th", { children: i18n.get("task") }),
+      /* @__PURE__ */ jsx("th", { children: i18n.get("status") }),
+      /* @__PURE__ */ jsx("th", { children: i18n.get("reason") })
+    ] }) }),
+    /* @__PURE__ */ jsx("tbody", { children: entriesOf(taskStatuses).toSorted(([t1], [t2]) => t1.localeCompare(t2)).map(([task, status]) => {
+      const { taskType, id } = splitTaskIdentifier(task);
+      return /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsxs("td", { className: styles$1.taskName, children: [
+          taskType,
+          id ? `: ${id}` : ""
+        ] }),
+        status ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(TaskItemStatus, { status: status.status }) }),
+          /* @__PURE__ */ jsxs("td", { children: [
+            i18n.get(status.reason),
+            /* @__PURE__ */ jsx(ExplainDetails, { status })
+          ] })
+        ] }) : /* @__PURE__ */ jsx(Fragment, {})
+      ] }, task);
+    }) })
+  ] });
+};
+const ExplainDetails = ({ status }) => {
+  const { reason, details } = status;
+  switch (reason) {
+    case "invalidInputError": {
+      const verificationError = details.verificationError;
+      const subErrors = verificationError.subErrors;
+      return /* @__PURE__ */ jsxs("div", { children: [
+        verificationError.code,
+        ": ",
+        verificationError.message,
+        subErrors ? /* @__PURE__ */ jsx("ul", { children: (verificationError.subErrors ?? []).map((subError) => /* @__PURE__ */ jsxs("li", { children: [
+          subError.code,
+          ": ",
+          subError.message
+        ] }, subError.code)) }) : /* @__PURE__ */ jsx(Fragment, {})
+      ] });
+    }
+    case "dataMissingError": {
+      const verificationError = details.verificationError;
+      const subErrors = verificationError.subErrors;
+      return /* @__PURE__ */ jsxs("div", { children: [
+        verificationError.code,
+        ": ",
+        verificationError.message,
+        subErrors ? /* @__PURE__ */ jsx("ul", { children: (verificationError.subErrors ?? []).map((subError) => /* @__PURE__ */ jsxs("li", { children: [
+          subError.code,
+          ": ",
+          subError.message
+        ] }, subError.code)) }) : /* @__PURE__ */ jsx(Fragment, {})
+      ] });
+    }
+  }
+};
+const tabs = "adyen-kyc-tabs";
+const styles = {
+  tabs
+};
+const Tabs = ({ tabs: tabs2, activeTab, onChange }) => /* @__PURE__ */ jsx("div", { className: styles.tabs, children: tabs2.map(({ name, label, disabled }) => /* @__PURE__ */ jsx(
+  Button,
+  {
+    onClick: () => onChange(name),
+    label,
+    secondary: activeTab === name ? true : void 0,
+    disabled
+  },
+  name
+)) });
+const listToRecord = (list, getValue) => list.reduce(
+  (acc, k) => ({
+    ...acc,
+    [k]: getValue(k)
+  }),
+  {}
+);
+const filterData = (data, searchTerm) => data.filter(({ key }) => key.toLowerCase().includes(searchTerm.toLowerCase()));
+const sortData = (data) => [...data].toSorted(({ key: keyA }, { key: keyB }) => keyA.localeCompare(keyB));
+const DebugTable = ({
+  data,
+  heading,
+  searchTerm,
+  tagPosition = "after",
+  sort = false
+}) => {
+  const filteredData = useMemo(() => {
+    const filtered = searchTerm ? filterData(data, searchTerm) : data;
+    return sort ? sortData(filtered) : filtered;
+  }, [data, searchTerm]);
+  return /* @__PURE__ */ jsxs("div", { children: [
+    heading ? /* @__PURE__ */ jsx("h3", { children: heading }) : void 0,
+    filteredData.length === 0 ? /* @__PURE__ */ jsxs("p", { children: [
+      "No results found for ",
+      /* @__PURE__ */ jsx("strong", { children: searchTerm })
+    ] }) : /* @__PURE__ */ jsx("table", { children: /* @__PURE__ */ jsx("tbody", { children: filteredData.map(({ key, value, label, variant }) => /* @__PURE__ */ jsxs("tr", { children: [
+      tagPosition === "before" ? /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(Tag, { variant: variant ?? "grey", className: "adyen-kyc-tag--large", children: value }) }) : void 0,
+      /* @__PURE__ */ jsxs("td", { children: [
+        /* @__PURE__ */ jsx("span", { className: "adyen-kyc-debug-modal__table-key", children: key }),
+        label && /* @__PURE__ */ jsx("span", { children: label })
+      ] }),
+      tagPosition === "after" ? /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(Tag, { variant: variant ?? "grey", className: "adyen-kyc-tag--large", children: value }) }) : void 0
+    ] }, key)) }) })
+  ] });
+};
+const getSettingVariant = (value) => {
   switch (value) {
     case void 0:
       return "orange";
@@ -44250,166 +44392,184 @@ const getRoleTagVariant = (value) => {
       return "blue";
   }
 };
-const getStatus = (value) => {
-  switch (value) {
-    case void 0:
-      return "undefined";
-    case true:
-      return "Enabled";
-    case false:
-      return "Disabled";
-    default:
-      return String(value);
-  }
+const DebugExperimentsAndSettings = ({
+  experiments,
+  settings
+}) => {
+  const [searchTerm, setSearchTerm] = useState("");
+  const experimentRows = entriesOf(experiments).map(
+    ([experimentName, enabled]) => ({
+      key: `${experimentName}`,
+      value: enabled ? "Enabled" : "Disabled",
+      variant: enabled ? "green" : "red"
+    })
+  );
+  const settingRows = entriesOf(settings).map(([settingName, value]) => ({
+    key: settingName,
+    value: `${value}`,
+    variant: getSettingVariant(value)
+  }));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      InputText,
+      {
+        name: "search",
+        value: searchTerm,
+        classNameModifiers: ["search"],
+        onInput: (e) => setSearchTerm(e.target.value),
+        placeholder: "Search for Experiments/Settings 🔎",
+        trimOnBlur: true,
+        spellCheck: false,
+        "aria-label": "Search experiments or settings",
+        "aria-invalid": false
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DebugTable,
+      {
+        tagPosition: "before",
+        data: experimentRows,
+        heading: "Experiments",
+        searchTerm,
+        sort: true
+      }
+    ),
+    /* @__PURE__ */ jsx(DebugTable, { data: settingRows, heading: "Settings", searchTerm, sort: true })
+  ] });
 };
-const filterData = (data, searchTerm) => data.filter(([key]) => key.toLowerCase().includes(searchTerm.toLowerCase()));
-const sortData = (data) => [...data].sort(([keyA], [keyB]) => keyA.localeCompare(keyB));
-const DebugTable = ({ data, keyHeading, searchTerm }) => {
-  const filteredData = sortData(filterData(data, searchTerm));
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("h2", { children: keyHeading }),
-    filteredData.length === 0 ? /* @__PURE__ */ jsxs("p", { children: [
-      "No results found for ",
-      /* @__PURE__ */ jsx("strong", { children: searchTerm })
-    ] }) : /* @__PURE__ */ jsx("table", { children: /* @__PURE__ */ jsx("tbody", { children: filteredData.map(([keyName, value, label]) => /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsxs("td", { children: [
-      /* @__PURE__ */ jsx("span", { className: "adyen-kyc-debug-modal__table-key", children: keyName }),
-      label && /* @__PURE__ */ jsx("span", { className: "adyen-kyc-debug-modal__table-label", children: label }),
-      /* @__PURE__ */ jsx(Tag, { variant: getRoleTagVariant(value), className: "adyen-kyc-tag--large", children: getStatus(value) })
-    ] }) }, keyName)) }) })
+const DebugLegalEntityData = ({ legalEntityData }) => {
+  var _a;
+  if (!legalEntityData) return /* @__PURE__ */ jsx(Fragment, {});
+  const { rootLegalEntity, rootLegalEntityType } = legalEntityData;
+  const uboDetails = ((_a = rootLegalEntity.entityAssociations) == null ? void 0 : _a.map(
+    ({ name, type, jobTitle }) => (
+      // If `name` is undefined, replace the tuple with `null` to easily filter it out later. Checking this to ensure that the 'data' for DebugTable always has a keyName.
+      name ? {
+        key: name,
+        value: `${type}`,
+        label: jobTitle,
+        variant: "blue"
+      } : null
+    )
+  ).filter(Boolean)) ?? [];
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("span", { children: [
+      "Root legal entity type: ",
+      /* @__PURE__ */ jsx(Tag, { children: rootLegalEntityType })
+    ] }),
+    uboDetails.length ? /* @__PURE__ */ jsx(DebugTable, { data: uboDetails, heading: "Decision Makers" }) : void 0,
+    rootLegalEntity ? /* @__PURE__ */ jsx("pre", { children: JSON.stringify(rootLegalEntity, null, 2) }) : void 0
   ] });
 };
+const DebugMetadata = ({
+  metadata: { sdkVersion, locale, rootLegalEntityId }
+}) => {
+  const rows = [
+    { key: "SDK version", value: sdkVersion, variant: "green" },
+    { key: "Locale", value: locale, variant: "blue" },
+    { key: "Root legal entity ID", value: rootLegalEntityId, variant: "teal" }
+  ];
+  return /* @__PURE__ */ jsx("div", { className: "adyen-kyc-debug-modal__meta", children: /* @__PURE__ */ jsx(DebugTable, { data: rows }) });
+};
 const logger = createLogger("DebugModal");
 const DebugModal = ({ rootLegalEntityId, onExit, getRootLegalEntity }) => {
-  var _a;
   const { isExperimentEnabled } = useExperimentsContext();
   const { getSetting } = useSettingsContext();
-  const [rootLeData, setRootLeData] = useState();
+  const [legalEntityData, setLegalEntityData] = useState();
   const [debugInfoCopied, setDebugInfoCopied] = useState(false);
-  const [isRootLeDataEnabled, setIsRootLeDataEnabled] = useState(false);
-  const [searchTerm, setSearchTerm] = useState("");
   const { i18n } = useI18nContext();
-  const allExperimentsWithValues = valuesOf(ExperimentNames).map(
-    (experimentName) => [experimentName, isExperimentEnabled(experimentName)]
-  );
-  const allSettingsWithValues = valuesOf(SettingNames).map(
-    (settingName) => [settingName, getSetting(settingName)]
-  );
-  const debugModalMetaData = [
-    { key: "SDK version", value: "3.41.3", variant: "green" },
-    { key: "rootLegalEntityId", value: rootLegalEntityId, variant: "blue" },
-    { key: "Locale", value: i18n.locale, variant: "blue" },
-    { key: "Language", value: i18n.languageCode, variant: "blue" },
-    rootLeData && {
-      key: "rootLegalEntityType",
-      value: rootLeData.type,
-      variant: "blue"
-    }
-  ].filter(Boolean);
-  const fetchRootLeData = () => {
+  const [tab, setTab] = useState("metadata");
+  const metadata = {
+    sdkVersion: "3.41.5",
+    locale: i18n.locale,
+    rootLegalEntityId
+  };
+  const experiments = listToRecord(valuesOf(ExperimentNames), isExperimentEnabled);
+  const settings = listToRecord(valuesOf(SettingNames), getSetting);
+  const taskStatuses = useTaskStatuses();
+  const fetchLegalEntityData = async () => {
     if (!getRootLegalEntity) return;
-    getRootLegalEntity().then(setRootLeData).catch(logger.error);
-  };
-  const uboDetails = ((_a = rootLeData == null ? void 0 : rootLeData.entityAssociations) == null ? void 0 : _a.map(
-    ({ name, type, jobTitle }) => (
-      // If `name` is undefined, replace the tuple with `null` to easily filter it out later. Checking this to ensure that the 'data' for DebugTable always has a keyName.
-      name ? [name, type, jobTitle] : null
-    )
-  ).filter(
-    (item) => item !== null
-  )) ?? [];
-  const handleToggleRootLeData = () => {
-    if (!isRootLeDataEnabled) {
-      fetchRootLeData();
-    } else {
-      setRootLeData(void 0);
-    }
-    setIsRootLeDataEnabled(!isRootLeDataEnabled);
+    const rootLegalEntity = await getRootLegalEntity();
+    const data = {
+      rootLegalEntity,
+      rootLegalEntityType: rootLegalEntity.type
+    };
+    setLegalEntityData(data);
+    return data;
   };
   const copyToClipboard = async () => {
     const toCopy = {
-      sdkVersion: "3.41.3",
-      experiments: Object.fromEntries(allExperimentsWithValues),
-      settings: Object.fromEntries(allSettingsWithValues)
+      metadata,
+      experiments,
+      settings,
+      taskStatuses,
+      legalEntityData: await fetchLegalEntityData()
     };
-    if (getRootLegalEntity) {
-      toCopy.rootLegalEntity = await getRootLegalEntity();
-    }
     await window.navigator.clipboard.writeText(JSON.stringify(toCopy, null, 2));
     setDebugInfoCopied(true);
     setTimeout(() => {
       setDebugInfoCopied(false);
     }, 5e3);
   };
-  const header = /* @__PURE__ */ jsxs("div", { className: "adyen-kyc-debug-modal__header", children: [
+  const changeTab = (tab2) => {
+    if (tab2 === "legalEntityData") {
+      fetchLegalEntityData().catch(logger.error);
+    }
+    setTab(tab2);
+  };
+  const header2 = /* @__PURE__ */ jsxs("div", { className: "adyen-kyc-debug-modal__header", children: [
     /* @__PURE__ */ jsx("h1", { children: "Debug" }),
     /* @__PURE__ */ jsx(
-      InputText,
+      Tabs,
       {
-        name: "search",
-        value: searchTerm,
-        classNameModifiers: ["search"],
-        onInput: (e) => setSearchTerm(e.target.value),
-        placeholder: "Search for Experiments/Settings 🔎",
-        trimOnBlur: true,
-        spellCheck: false,
-        "aria-label": "Search experiments or settings",
-        "aria-invalid": false
+        activeTab: tab,
+        onChange: changeTab,
+        tabs: [
+          {
+            name: "metadata",
+            label: "Metadata"
+          },
+          {
+            name: "experimentsSettings",
+            label: "Experiments & Settings"
+          },
+          {
+            name: "taskStatuses",
+            label: "Task Statuses"
+          },
+          {
+            name: "legalEntityData",
+            label: "Legal Entity Data"
+          }
+        ]
       }
     )
   ] });
-  const footer = /* @__PURE__ */ jsxs("div", { className: "adyen-kyc-debug-modal__footer", children: [
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          label: "Copy debug info",
-          "aria-label": "Copy debug info",
-          icon: "document",
-          onClick: () => {
-            copyToClipboard().catch((error) => {
-              logger.error("Error copying to clipboard:", error);
-            });
-          }
-        }
-      ),
-      debugInfoCopied ? /* @__PURE__ */ jsxs("span", { className: "adyen-kyc-debug-modal__footer--copy-status", children: [
-        /* @__PURE__ */ jsx(Icon, { name: "check" }),
-        " Copied!"
-      ] }) : void 0
-    ] }),
+  const footer = /* @__PURE__ */ jsx("div", { className: "adyen-kyc-debug-modal__footer", children: /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx(
       Button,
       {
-        icon: isRootLeDataEnabled ? "show" : "hide",
-        iconPosition: "left",
-        "aria-label": isRootLeDataEnabled ? "Hide LegalEntity Data" : "Show LegalEntity Data",
-        label: isRootLeDataEnabled ? "Hide LegalEntity Data" : "Show LegalEntity Data",
-        onClick: handleToggleRootLeData
-      }
-    )
-  ] });
-  return /* @__PURE__ */ jsx(Modal, { size: "fullscreen", header, footer, onClose: onExit, children: /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: "adyen-kyc-debug-modal__meta", children: /* @__PURE__ */ jsx("table", { children: /* @__PURE__ */ jsx("tbody", { children: debugModalMetaData.map(({ key, value, variant }) => /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsxs("td", { children: [
-      /* @__PURE__ */ jsx("span", { className: "adyen-kyc-debug-modal__table-key", children: key }),
-      /* @__PURE__ */ jsx(Tag, { variant, className: "adyen-kyc-tag--large", children: value })
-    ] }) }, key)) }) }) }),
-    /* @__PURE__ */ jsxs("div", { className: "adyen-kyc-debug-modal__content", children: [
-      rootLeData ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("h2", { children: "Legal Entity Data" }),
-        /* @__PURE__ */ jsx("pre", { children: JSON.stringify(rootLeData, null, 2) })
-      ] }) : void 0,
-      (uboDetails == null ? void 0 : uboDetails.length) ? /* @__PURE__ */ jsx(DebugTable, { data: uboDetails, keyHeading: "Decision Makers", searchTerm }) : "",
-      /* @__PURE__ */ jsx(
-        DebugTable,
-        {
-          data: allExperimentsWithValues,
-          keyHeading: "Experiments",
-          searchTerm
+        label: "Copy debug info",
+        "aria-label": "Copy debug info",
+        icon: "document",
+        onClick: () => {
+          copyToClipboard().catch((error) => {
+            logger.error("Error copying to clipboard:", error);
+          });
         }
-      ),
-      /* @__PURE__ */ jsx(DebugTable, { data: allSettingsWithValues, keyHeading: "Settings", searchTerm })
-    ] })
+      }
+    ),
+    debugInfoCopied ? /* @__PURE__ */ jsxs("span", { className: "adyen-kyc-debug-modal__footer--copy-status", children: [
+      /* @__PURE__ */ jsx(Icon, { name: "check" }),
+      " Copied!"
+    ] }) : void 0
   ] }) });
+  return /* @__PURE__ */ jsx(Modal, { size: "fullscreen", header: header2, footer, onClose: onExit, children: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "adyen-kyc-debug-modal__content", children: [
+    tab === "metadata" ? /* @__PURE__ */ jsx(DebugMetadata, { metadata }) : void 0,
+    tab === "taskStatuses" ? /* @__PURE__ */ jsx(DebugTaskStatuses, { taskStatuses }) : void 0,
+    tab === "experimentsSettings" ? /* @__PURE__ */ jsx(DebugExperimentsAndSettings, { experiments, settings }) : void 0,
+    tab === "legalEntityData" ? /* @__PURE__ */ jsx(DebugLegalEntityData, { legalEntityData }) : void 0
+  ] }) }) });
 };
 const DebugWrapper = ({
   rootLegalEntityId,