@incodetech/web 2.0.1-rc.0 → 2.1.0-rc.0

package/dist/workflow/styles.css

@@ -2880,6 +2880,51 @@
     }
   }
 
+  @media (min-width: 40rem) {
+    .incode-container {
+      max-width: 40rem;
+    }
+  }
+
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-width: 48rem;
+    }
+  }
+
+  @media (min-width: 64rem) {
+    .incode-container {
+      max-width: 64rem;
+    }
+  }
+
+  @media (min-width: 80rem) {
+    .incode-container {
+      max-width: 80rem;
+    }
+  }
+
+  @media (min-width: 96rem) {
+    .incode-container {
+      max-width: 96rem;
+    }
+  }
+
+  @media (min-width: 48rem) {
+    .incode-container {
+      max-height: var(--incode-page-max-h);
+      max-width: var(--incode-page-max-w);
+    }
+
+    @media not all and (min-width: 80rem) {
+      @media (orientation: landscape) {
+        .incode-container {
+          max-height: var(--incode-page-max-h-landscape);
+        }
+      }
+    }
+  }
+
   .incode-container {
     width: 100%;
   }
@@ -3032,10 +3077,6 @@
     resize: both;
   }
 
-  .flex-col {
-    flex-direction: column;
-  }
-
   .items-center {
     align-items: center;
   }
@@ -3371,6 +3412,11 @@
     font-weight: var(--typography-button-m-underlined-weight);
     line-height: var(--typography-button-m-underlined-line-height);
     letter-spacing: var(--typography-button-m-underlined-letter-spacing);
+    font-family: var(--typography-button-family);
+    font-size: var(--typography-button-m-underlined-size);
+    font-weight: var(--typography-button-m-underlined-weight);
+    line-height: var(--typography-button-m-underlined-line-height);
+    letter-spacing: var(--typography-button-m-underlined-letter-spacing);
     text-decoration-line: underline;
     text-decoration-style: solid;
     text-decoration-thickness: auto;
@@ -4127,23 +4173,6 @@
   display: flex;
 }
 
-.IncodeGovtValidation .IncodeGovtValidationStatus {
-  text-align: center;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  display: flex;
-}
-
-.IncodeGovtValidation .IncodeGovtValidationText {
-  margin-top: var(--spacing-12, var(--spacing-12, 12px));
-  font-family: var(--typography-headline-family);
-  font-size: var(--typography-headline-h2-size);
-  font-weight: var(--typography-headline-h2-weight);
-  line-height: var(--typography-headline-h2-line-height);
-  letter-spacing: var(--typography-headline-h2-letter-spacing);
-}
-
 .IncodeGovtValidation.IncodeGovtValidation--otp .IncodeGovtValidationPage .IncodePageContent {
   flex-direction: column;
   align-items: center;
@@ -4540,14 +4569,31 @@
   justify-content: space-between;
 }
 
+.IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeCaptureFooterCaptureSection {
+  position: relative;
+}
+
 .IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer {
-  animation: .5s ease-out forwards slideUp;
+  pointer-events: none;
+  z-index: 1000;
+  --manual-capture-tooltip-button-gap: var(--spacing-4);
+  --manual-capture-tooltip-button-top-offset: var(--spacing-12);
+  --manual-capture-tooltip-button-center-offset: calc(var(--spacing-32) + var(--manual-capture-tooltip-button-gap));
+  width: max-content;
+  left: 50%;
+  bottom: calc(100% - ( var(--manual-capture-tooltip-button-top-offset) - var(--manual-capture-tooltip-button-gap) ));
+  justify-content: center;
+  animation: .35s ease-in 3.5s forwards manualCaptureTooltipExit;
+  display: flex;
+  position: absolute;
+  transform: translateX(-50%);
 }
 
 .IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer .IncodeIdManualCaptureTooltip {
   border-radius: var(--radius-medium, var(--border-radius-medium));
   background-color: var(--color-surface-neutral-900, var(--surface-neutral-900));
   padding: var(--spacing-16, var(--spacing-16, 16px));
+  animation: .5s ease-out forwards slideUp;
 }
 
 .IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer .IncodeIdManualCaptureTooltip .IncodeIdManualCaptureTooltipList {
@@ -4574,6 +4620,18 @@
   aspect-ratio: 42 / 30;
 }
 
+@keyframes manualCaptureTooltipExit {
+  from {
+    opacity: 1;
+    transform: translateX(-50%);
+  }
+
+  to {
+    opacity: 0;
+    transform: translate(-50%, calc(50% + var(--manual-capture-tooltip-button-center-offset)));
+  }
+}
+
 .IncodeIdManualCaptureButton {
   bottom: var(--spacing-24, var(--spacing-24, 24px));
   z-index: 100;
@@ -5007,10 +5065,11 @@
 }
 
 .IncodeManualUploadPage .IncodeManualUploadHintCard li {
-  font-family: var(--font-family-dm-sans, var(--primitive-typography-family-dm-sans));
-  font-size: var(--text-14, var(--primitive-typography-size-14));
-  --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
-  font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
+  font-family: var(--typography-button-family);
+  font-size: var(--typography-button-s-size);
+  font-weight: var(--typography-button-s-weight);
+  line-height: var(--typography-button-s-line-height);
+  letter-spacing: var(--typography-button-s-letter-spacing);
   color: var(--color-text-body-primary, var(--text-body-800-primary));
 }
 
@@ -5033,12 +5092,11 @@
   padding-inline: var(--spacing-12, var(--spacing-12, 12px));
   padding-block: var(--spacing-16, var(--spacing-16, 16px));
   text-align: center;
-  font-family: var(--font-family-dm-sans, var(--primitive-typography-family-dm-sans));
-  font-size: var(--text-16, var(--primitive-typography-size-16));
-  --tw-leading: var(--spacing-16, var(--spacing-16, 16px));
-  line-height: var(--spacing-16, var(--spacing-16, 16px));
-  --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
-  font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
+  font-family: var(--typography-checkbox-radio-family);
+  font-size: var(--typography-checkbox-radio-m-size);
+  font-weight: var(--typography-checkbox-radio-m-weight);
+  line-height: var(--typography-checkbox-radio-m-line-height);
+  letter-spacing: var(--typography-checkbox-radio-m-letter-spacing);
   color: var(--color-text-body-secondary, var(--text-body-500-secondary));
   background-color: #0000;
   border-style: solid;
@@ -5056,8 +5114,6 @@
 
 .IncodeManualUploadPage .IncodeManualUploadTabTrigger--active {
   border-bottom-color: var(--color-button-primary-surface-default, var(--button-primary-surface-default));
-  --tw-font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
-  font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
   color: var(--color-text-body-primary, var(--text-body-800-primary));
 }
 
@@ -5089,6 +5145,7 @@
 }
 
 .IncodeManualUploadSlot {
+  cursor: pointer;
   align-items: center;
   gap: var(--spacing-12, var(--spacing-12, 12px));
   border-radius: var(--radius-medium, var(--border-radius-medium));
@@ -5102,6 +5159,7 @@
   padding-block: var(--spacing-24, var(--spacing-24, 24px));
   padding-right: var(--spacing-24, var(--spacing-24, 24px));
   padding-left: var(--spacing-20, var(--spacing-20, 20px));
+  text-align: left;
   display: flex;
 }
 
@@ -5132,11 +5190,7 @@
 }
 
 .IncodeManualUploadSlot .IncodeManualUploadSlotAction {
-  cursor: pointer;
   border-radius: var(--radius-full, var(--border-radius-full));
-  border-style: var(--tw-border-style);
-  border-width: var(--border-width-none, var(--primitive-border-width-0));
-  --tw-border-style: none;
   background-color: var(--color-button-primary-surface-default, var(--button-primary-surface-default));
   padding: var(--spacing-8, var(--spacing-8, 8px));
   color: var(--color-button-primary-text-default, var(--button-primary-text-default));
@@ -5144,7 +5198,6 @@
   transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));
   transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
   --tw-duration: .2s;
-  border-style: none;
   flex-shrink: 0;
   justify-content: center;
   align-items: center;
@@ -5152,27 +5205,34 @@
   display: inline-flex;
 }
 
-.IncodeManualUploadSlot .IncodeManualUploadSlotAction:hover:not(:disabled) {
+.IncodeManualUploadSlot:focus-visible {
+  outline-style: var(--tw-outline-style);
+  outline-offset: 2px;
+  outline-width: 2px;
+  outline-color: var(--color-border-status-focus, var(--border-status-focus));
+}
+
+.IncodeManualUploadSlot:hover:not(:disabled) .IncodeManualUploadSlotAction {
   background-color: var(--color-button-primary-surface-hover, var(--button-primary-surface-hover));
 }
 
-.IncodeManualUploadSlot .IncodeManualUploadSlotAction:disabled {
+.IncodeManualUploadSlot:disabled {
   cursor: not-allowed;
+  opacity: .5;
+}
+
+.IncodeManualUploadSlot:disabled .IncodeManualUploadSlotAction {
   background-color: var(--color-button-primary-surface-disabled, var(--button-primary-surface-disabled));
   color: var(--color-button-primary-text-disabled, var(--button-primary-text-disabled));
 }
 
-.IncodeManualUploadSlot.IncodeManualUploadSlot--uploaded .IncodeManualUploadSlotAction, .IncodeManualUploadSlot.IncodeManualUploadSlot--uploaded .IncodeManualUploadSlotAction:hover:not(:disabled) {
+.IncodeManualUploadSlot.IncodeManualUploadSlot--uploaded .IncodeManualUploadSlotAction, .IncodeManualUploadSlot.IncodeManualUploadSlot--uploaded:hover:not(:disabled) .IncodeManualUploadSlotAction {
   padding: var(--spacing-0, var(--spacing-none, 0px));
   color: var(--color-surface-status-positive-500, var(--surface-status-positive-500));
   background-color: #0000;
 }
 
-.IncodeManualUploadSlot.IncodeManualUploadSlot--disabled {
-  opacity: .5;
-}
-
-.IncodeManualUploadSlot .IncodeManualUploadSlotInput {
+.IncodeManualUploadSlot + .IncodeManualUploadSlotInput {
   clip-path: inset(50%);
   white-space: nowrap;
   border-width: 0;
@@ -5320,25 +5380,16 @@
   overflow: hidden;
 }
 
-.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadProgressBar {
+.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadProgressBar .IncodeProgressBar {
   border-radius: var(--radius-full, var(--border-radius-full));
   background-color: var(--color-surface-neutral-200, var(--surface-neutral-200));
   width: var(--digital-id-progress-bar-w);
   height: var(--digital-id-progress-bar-h);
-  position: relative;
   overflow: hidden;
 }
 
-.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadProgressBar > span {
-  top: var(--spacing-0, var(--spacing-none, 0px));
-  left: var(--spacing-0, var(--spacing-none, 0px));
+.IncodeDigitalIdUploadPage .IncodeDigitalIdUploadProgressBar .IncodeProgressBarFill {
   border-radius: var(--radius-full, var(--border-radius-full));
-  height: 100%;
-  transition-property: all;
-  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));
-  transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
-  background-color: var(--color-icon-status-positive, var(--icon-status-positive));
-  position: absolute;
 }
 
 .IncodeDigitalIdUploadPage .IncodeDigitalIdUploadLaserOverlay {
@@ -5746,11 +5797,8 @@
 }
 
 .IncodeDocumentCapturePdfCard .ImageDocumentCapturePdfPreviewContainer .ImageDocumentCapturePdfPreview {
-  border-style: var(--tw-border-style);
-  border-width: 0;
-  width: calc(100% + 4px);
-  height: calc(100% + 4px);
-  margin: -2px;
+  width: 100%;
+  height: 100%;
 }
 
 .IncodeDocumentCapturePdfCard .IncodeDocumentCapturePdfFileName {
@@ -6036,8 +6084,9 @@
 }
 
 .IncodeEkycPage {
-  max-width: 480px;
+  animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
   margin-inline: auto;
+  animation-fill-mode: both;
 }
 
 @media (min-width: 48rem) {
@@ -6056,6 +6105,7 @@
   gap: var(--spacing-16, var(--spacing-16, 16px));
   flex-direction: column;
   width: 100%;
+  height: 100%;
   display: flex;
 }
 
@@ -6077,13 +6127,13 @@
   margin-inline: auto;
   margin-top: var(--spacing-16, var(--spacing-16, 16px));
   width: 100%;
-  max-width: 420px;
+  max-width: var(--incode-form-max-w);
   padding-block: var(--spacing-12, var(--spacing-12, 12px));
 }
 
 .IncodeEkycPage .IncodeEkycRadioGroup {
   width: 100%;
-  max-width: 420px;
+  max-width: var(--incode-form-max-w);
   margin-inline: auto;
 }
 
@@ -6107,6 +6157,10 @@
   margin-top: 0;
 }
 
+.IncodeEkycPage .IncodeEkycFooter button {
+  margin-bottom: var(--spacing-16, var(--spacing-16, 16px));
+}
+
 @media (min-width: 768px) {
   .IncodeEkycPage.IncodePageContainer {
     height: 100dvh;
@@ -6132,17 +6186,15 @@
     overflow-y: auto;
   }
 
-  .IncodeEkycPage.IncodeEkycPageScrollable .IncodeEkycForm {
-    margin-left: var(--spacing-8, var(--spacing-8, 8px));
-  }
-
   .IncodeEkycPage .IncodeEkycFooter {
     flex-shrink: 0;
   }
 }
 
 .IncodeEkybPage {
+  animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
   margin-inline: auto;
+  animation-fill-mode: both;
 }
 
 .IncodeEkybPage .IncodeEkybSpinner {
@@ -6298,7 +6350,6 @@
   max-width: var(--redirect-card-max-width);
   min-height: min(var(--redirect-card-max-width), var(--redirect-card-min-height));
   flex-direction: column;
-  justify-content: space-between;
   align-items: center;
   display: flex;
   overflow-x: clip;
@@ -6392,24 +6443,31 @@
 }
 
 .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectBottomNav {
-  --max-width-bottom-nav: 390px;
   align-items: center;
   gap: var(--spacing-40, var(--spacing-40, 40px));
   width: 100%;
-  max-width: var(--max-width-bottom-nav);
+  max-width: var(--redirect-form-column-max-width);
   flex-direction: column;
   display: flex;
 }
 
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectBottomNav .IncodeRedirectVerifiedBy {
+.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectBottomNav .IncodeRedirectFooterContent {
+  flex-direction: column;
   justify-content: center;
   align-items: center;
-  gap: var(--spacing-4, var(--spacing-4, 4px));
-  padding-top: var(--spacing-8, var(--spacing-8, 8px));
-  padding-bottom: var(--spacing-12, var(--spacing-12, 12px));
+  width: 100%;
   display: flex;
 }
 
+.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectBottomNav .IncodeRedirectFooterContentText {
+  margin-block: var(--spacing-32, var(--spacing-32, 32px));
+  font-family: var(--Button-family, "DM Sans");
+  letter-spacing: 0;
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 100%;
+}
+
 .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectTabs {
   justify-content: center;
   align-items: flex-end;
@@ -6460,6 +6518,7 @@
 }
 
 .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodeRedirectTabDescription {
+  margin-top: var(--spacing-32, var(--spacing-32, 32px));
   text-align: center;
   font-family: var(--typography-headline-family);
   font-size: var(--typography-headline-h5-size);
@@ -6482,357 +6541,112 @@
   display: flex;
 }
 
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneInput, .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneInputContainer {
+.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneInputComposed {
+  --phone-input-country-code-width: var(--redirect-phone-input-country-code-width);
+  max-width: var(--redirect-form-column-max-width);
+}
+
+.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodeRedirectSmsSendButton {
+  width: 100%;
+  max-width: var(--redirect-form-column-max-width);
+}
+
+.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodeRedirectLinkSent {
   flex-direction: column;
   align-items: center;
-  width: 100%;
   display: flex;
 }
 
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneInputRow {
-  --max-width-phone-input-row: 340px;
-  align-items: stretch;
-  gap: var(--spacing-8, var(--spacing-8, 8px));
-  width: 100%;
-  max-width: var(--max-width-phone-input-row);
+.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodeRedirectLinkSent .IncodeRedirectLinkSentTitle {
+  text-align: center;
+  font-family: var(--typography-headline-family);
+  font-size: var(--typography-headline-h2-size);
+  font-weight: var(--typography-headline-h2-weight);
+  line-height: var(--typography-headline-h2-line-height);
+  letter-spacing: var(--typography-headline-h2-letter-spacing);
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
+}
+
+.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodeRedirectLinkSent .IncodeRedirectLinkSentPhone {
+  text-align: center;
+  font-family: var(--typography-headline-family);
+  font-size: var(--typography-headline-h5-size);
+  font-weight: var(--typography-headline-h5-weight);
+  line-height: var(--typography-headline-h5-line-height);
+  letter-spacing: var(--typography-headline-h5-letter-spacing);
+  color: var(--color-text-body-secondary, var(--text-body-500-secondary));
+}
+
+.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodeRedirectLinkSent .IncodeRedirectLinkSentActions {
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacing-4, var(--spacing-4, 4px));
+  font-family: var(--Button-family, "DM Sans");
+  letter-spacing: 0;
+  width: var(--redirect-form-column-max-width);
+  flex-wrap: wrap;
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 100%;
   display: flex;
-  position: relative;
 }
 
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneInputWrapper {
-  border-radius: var(--radius-small, var(--border-radius-small));
-  border-style: var(--tw-border-style);
-  border-width: 1px;
-  border-color: var(--color-input-border-default, var(--input-border-default));
-  background-color: var(--color-input-surface-default, var(--input-surface-default));
-  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
-  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));
-  transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
-  --tw-duration: .2s;
-  flex: 1;
+.IncodeRedirectFinishedContainer {
+  flex-direction: column;
+  justify-content: center;
   align-items: center;
-  transition-duration: .2s;
+  width: 100%;
+  height: 100%;
   display: flex;
 }
 
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneInputWrapper:focus-within {
-  border-color: var(--color-input-border-focused, var(--input-border-focused));
+.IncodeRedirectFinishedContainer .IncodeRedirectLogo {
+  max-height: var(--logo-height, 44px);
 }
 
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneInputWrapper.IncodePhoneInputWrapperError {
-  border-color: var(--color-input-border-negative, var(--input-border-negative));
+.IncodeRedirectFinishedContainer .IncodeRedirectFinishedTitle {
+  --width-finished-title: 500px;
+  margin-block: var(--spacing-20, var(--spacing-20, 20px));
+  text-align: center;
+  font-size: var(--text-3xl, 1.875rem);
+  line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)));
+  --tw-font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
+  font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
+  width: var(--width-finished-title);
 }
 
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneInputWrapper.IncodePhoneInputWrapperDisabled {
-  border-color: var(--color-input-border-disabled, var(--input-border-disabled));
-  background-color: var(--color-input-surface-disabled, var(--input-surface-disabled));
+.IncodeRedirectFinishedContainer .IncodeRedirectFinishedSubtitle {
+  --width-finished-subtitle: 400px;
+  text-align: center;
+  font-size: var(--text-2xl, 1.5rem);
+  line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
+  --tw-font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
+  font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
+  width: var(--width-finished-subtitle);
 }
 
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountrySelector {
-  --width-country-selector: 124px;
-  border-radius: var(--radius-small, var(--border-radius-small));
-  border-style: var(--tw-border-style);
-  border-width: 1px;
-  border-color: var(--color-input-border-default, var(--input-border-default));
-  background-color: var(--color-input-surface-default, var(--input-surface-default));
-  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
-  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));
-  transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
-  --tw-duration: .2s;
-  width: var(--width-country-selector);
-  flex-shrink: 0;
-  transition-duration: .2s;
-  position: static;
+.IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText, .IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText .markup {
+  display: inline;
 }
 
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountrySelector.IncodePhoneCountrySelectorOpen {
-  border-color: var(--color-input-border-focused, var(--input-border-focused));
+.IncodeConsentPage {
+  height: 100%;
+  animation: fadeIn var(--motion-fade-in-duration, .7s) ease-out;
+  animation-fill-mode: both;
 }
 
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountrySelector.IncodePhoneCountrySelectorDisabled {
-  border-color: var(--color-input-border-disabled, var(--input-border-disabled));
-  background-color: var(--color-input-surface-disabled, var(--input-surface-disabled));
-}
-
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountryButton {
-  width: 100%;
-  height: 100%;
-  padding: var(--spacing-8, var(--spacing-8, 8px));
-  padding-left: var(--spacing-16, var(--spacing-16, 16px));
-  cursor: pointer;
-  border-style: var(--tw-border-style);
-  border-width: var(--border-width-none, var(--primitive-border-width-0));
-  --tw-border-style: none;
-  font-size: var(--text-18, var(--primitive-typography-size-18));
-  --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
-  font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
-  color: var(--color-text-body-primary, var(--text-body-800-primary));
-  border-radius: var(--radius-small, var(--border-radius-small));
-  background-color: #0000;
-  border-style: none;
-  justify-content: center;
-  align-items: center;
-  font-family: inherit;
-  display: flex;
-}
-
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountryButton:disabled {
-  cursor: not-allowed;
-  color: var(--color-input-text-field-disabled, var(--input-text-field-disabled));
-}
-
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountryButton:focus {
-  --tw-outline-style: none;
-  outline-style: none;
-}
-
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountryFlag {
-  font-size: var(--text-24, var(--primitive-typography-size-24));
-  --tw-leading: 1;
-  line-height: 1;
-}
-
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountryCode {
-  margin-left: var(--spacing-4, var(--spacing-4, 4px));
-  font-size: var(--text-18, var(--primitive-typography-size-18));
-  --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
-  font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
-  white-space: nowrap;
-  color: var(--color-text-body-primary, var(--text-body-800-primary));
-}
-
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountryArrow {
-  margin-left: var(--spacing-8, var(--spacing-8, 8px));
-  height: var(--spacing-24, var(--spacing-24, 24px));
-  width: var(--spacing-24, var(--spacing-24, 24px));
-  color: var(--color-icon-neutral-500, var(--icon-neutral-500));
-  transition-property: transform, translate, scale, rotate;
-  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));
-  transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
-  --tw-duration: .2s;
-  transition-duration: .2s;
-}
-
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountryArrowUp {
-  rotate: 180deg;
-}
-
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountryButton:disabled .IncodePhoneCountryArrow {
-  color: var(--color-icon-neutral-300, var(--icon-neutral-300));
-}
-
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountryDropdown {
-  --max-height-country-dropdown: 320px;
-  top: 100%;
-  right: var(--spacing-0, var(--spacing-none, 0px));
-  left: var(--spacing-0, var(--spacing-none, 0px));
-  z-index: 50;
-  margin-top: var(--spacing-8, var(--spacing-8, 8px));
-  border-radius: var(--radius-small, var(--border-radius-small));
-  border-style: var(--tw-border-style);
-  border-width: 1px;
-  border-color: var(--color-input-border-default, var(--input-border-default));
-  background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));
-  padding: var(--spacing-8, var(--spacing-8, 8px));
-  max-height: var(--max-height-country-dropdown);
-  position: absolute;
-  overflow-y: auto;
-  box-shadow: 0 4px 16px #0000001f;
-}
-
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountryOption {
-  cursor: pointer;
-  align-items: center;
-  gap: var(--spacing-12, var(--spacing-12, 12px));
-  border-radius: var(--radius-small, var(--border-radius-small));
-  width: 100%;
-  padding-inline: var(--spacing-12, var(--spacing-12, 12px));
-  padding-block: var(--spacing-12, var(--spacing-12, 12px));
-  font-size: var(--text-16, var(--primitive-typography-size-16));
-  --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
-  font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
-  color: var(--color-text-body-primary, var(--text-body-800-primary));
-  border-style: var(--tw-border-style);
-  border-width: var(--border-width-none, var(--primitive-border-width-0));
-  --tw-border-style: none;
-  text-align: left;
-  background-color: #0000;
-  border-style: none;
-  font-family: inherit;
-  display: flex;
-}
-
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountryOption:hover {
-  background-color: var(--color-surface-neutral-100, var(--surface-neutral-100));
-}
-
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountryOption:focus {
-  background-color: var(--color-surface-neutral-100, var(--surface-neutral-100));
-  --tw-outline-style: none;
-  outline-style: none;
-}
-
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountryOptionSelected, .IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountryOptionSelected:hover {
-  background-color: var(--color-surface-brand-50, var(--surface-brand-50));
-}
-
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountryOptionCode {
-  --min-width-country-code: 52px;
-  font-size: var(--text-16, var(--primitive-typography-size-16));
-  color: var(--color-text-body-secondary, var(--text-body-500-secondary));
-  min-width: var(--min-width-country-code);
-}
-
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneCountryOptionName {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: var(--text-16, var(--primitive-typography-size-16));
-  color: var(--color-text-body-primary, var(--text-body-800-primary));
-  flex: 1;
-  overflow: hidden;
-}
-
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneInputField {
-  border-style: var(--tw-border-style);
-  border-width: var(--border-width-none, var(--primitive-border-width-0));
-  --tw-border-style: none;
-  width: 100%;
-  padding-inline: var(--spacing-16, var(--spacing-16, 16px));
-  padding-block: var(--spacing-16, var(--spacing-16, 16px));
-  font-size: var(--text-18, var(--primitive-typography-size-18));
-  --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
-  font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
-  color: var(--color-input-text-field-default, var(--input-text-field-default));
-  --tw-outline-style: none;
-  border-radius: var(--radius-small, var(--border-radius-small));
-  background-color: #0000;
-  border-style: none;
-  outline-style: none;
-}
-
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneInputField::placeholder {
-  --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
-  font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
-  color: var(--color-input-text-field-placeholder, var(--input-text-field-placeholder));
-}
-
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneInputField:disabled {
-  cursor: not-allowed;
-  color: var(--color-input-text-field-disabled, var(--input-text-field-disabled));
-}
-
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodePhoneInputError {
-  margin: var(--spacing-0, var(--spacing-none, 0px));
-  text-align: center;
-  font-size: var(--text-14, var(--primitive-typography-size-14));
-  --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
-  font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
-  color: var(--color-input-text-helper-negative, var(--input-text-helper-negative));
-}
-
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodeRedirectSmsSendButton {
-  --max-width-sms-button: 335px;
-  width: 100%;
-  max-width: var(--max-width-sms-button);
-}
-
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodeRedirectLinkSent {
-  flex-direction: column;
-  align-items: center;
-  display: flex;
-}
-
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodeRedirectLinkSent .IncodeRedirectLinkSentTitle {
-  text-align: center;
-  font-family: var(--typography-headline-family);
-  font-size: var(--typography-headline-h2-size);
-  font-weight: var(--typography-headline-h2-weight);
-  line-height: var(--typography-headline-h2-line-height);
-  letter-spacing: var(--typography-headline-h2-letter-spacing);
-  color: var(--color-text-body-primary, var(--text-body-800-primary));
-}
-
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodeRedirectLinkSent .IncodeRedirectLinkSentPhone {
-  text-align: center;
-  font-family: var(--typography-headline-family);
-  font-size: var(--typography-headline-h5-size);
-  font-weight: var(--typography-headline-h5-weight);
-  line-height: var(--typography-headline-h5-line-height);
-  letter-spacing: var(--typography-headline-h5-letter-spacing);
-  color: var(--color-text-body-secondary, var(--text-body-500-secondary));
-}
-
-.IncodeRedirectContainer .IncodeRedirectCard .IncodeRedirectOptions .IncodeRedirectLinkSent .IncodeRedirectLinkSentActions {
-  --width-link-sent-actions: 335px;
-  justify-content: center;
-  align-items: center;
-  gap: var(--spacing-4, var(--spacing-4, 4px));
-  font-family: var(--Button-family, "DM Sans");
-  letter-spacing: 0;
-  width: var(--width-link-sent-actions);
-  flex-wrap: wrap;
-  font-size: 18px;
-  font-weight: 500;
-  line-height: 100%;
-  display: flex;
-}
-
-.IncodeRedirectFinishedContainer {
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  display: flex;
-}
-
-.IncodeRedirectFinishedContainer .IncodeRedirectLogo {
-  max-height: var(--logo-height, 44px);
-}
-
-.IncodeRedirectFinishedContainer .IncodeRedirectFinishedTitle {
-  --width-finished-title: 500px;
-  margin-block: var(--spacing-20, var(--spacing-20, 20px));
-  text-align: center;
-  font-size: var(--text-3xl, 1.875rem);
-  line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)));
-  --tw-font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
-  font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
-  color: var(--color-text-body-primary, var(--text-body-800-primary));
-  width: var(--width-finished-title);
-}
-
-.IncodeRedirectFinishedContainer .IncodeRedirectFinishedSubtitle {
-  --width-finished-subtitle: 400px;
-  text-align: center;
-  font-size: var(--text-2xl, 1.5rem);
-  line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
-  --tw-font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
-  font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
-  color: var(--color-text-body-primary, var(--text-body-800-primary));
-  width: var(--width-finished-subtitle);
-}
-
-.IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText, .IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText .markup {
-  display: inline;
-}
-
-.IncodeConsentPage {
-  height: 100%;
-}
-
-.IncodeConsentPage .IncodePageInner {
-  padding: var(--spacing-24, var(--spacing-24, 24px));
-}
-
-.IncodeConsentPage .IncodePageContent {
-  min-height: var(--spacing-0, var(--spacing-none, 0px));
+.IncodeConsentPage .IncodePageContent {
+  min-height: var(--spacing-0, var(--spacing-none, 0px));
 }
 
 .IncodeConsentPage .IncodeConsentContent {
+  margin-top: var(--spacing-24, var(--spacing-24, 24px));
   height: 100%;
   min-height: var(--spacing-0, var(--spacing-none, 0px));
   justify-content: space-between;
+  align-items: center;
   gap: var(--spacing-24, var(--spacing-24, 24px));
   flex-direction: column;
   display: flex;
@@ -6840,7 +6654,9 @@
 
 .IncodeConsentPage .IncodeConsentBody {
   min-height: var(--spacing-0, var(--spacing-none, 0px));
-  gap: var(--spacing-16, var(--spacing-16, 16px));
+  width: 100%;
+  max-width: var(--incode-form-max-w);
+  gap: var(--spacing-24, var(--spacing-24, 24px));
   flex-direction: column;
   flex: 1;
   display: flex;
@@ -6849,24 +6665,21 @@
 
 .IncodeConsentPage .IncodeConsentBody .IncodeRichText .markup h2, .IncodeConsentPage .IncodeConsentBody .IncodeRichText h2 {
   margin-bottom: var(--spacing-12, var(--spacing-12, 12px));
-  font-family: var(--typography-headline-family);
-  font-size: var(--typography-headline-h2-size);
-  font-weight: var(--typography-headline-h2-weight);
-  line-height: var(--typography-headline-h2-line-height);
-  letter-spacing: var(--typography-headline-h2-letter-spacing);
-}
-
-.IncodeConsentPage .IncodeConsentTitle {
-  font-family: var(--typography-headline-family);
-  font-size: var(--typography-headline-h1-size);
-  font-weight: var(--typography-headline-h1-weight);
-  line-height: var(--typography-headline-h1-line-height);
-  letter-spacing: var(--typography-headline-h1-letter-spacing);
+  font-family: var(--typography-body-family);
+  font-size: var(--typography-body-m-regular-size);
+  font-weight: var(--typography-body-m-regular-weight);
+  line-height: var(--typography-body-m-regular-line-height);
+  letter-spacing: var(--typography-body-m-regular-letter-spacing);
   color: var(--color-text-body-primary, var(--text-body-800-primary));
 }
 
 .IncodeConsentPage .IncodeConsentSubtitle {
-  color: var(--color-text-body-secondary, var(--text-body-500-secondary));
+  font-family: var(--typography-body-family);
+  font-size: var(--typography-body-m-regular-size);
+  font-weight: var(--typography-body-m-regular-weight);
+  line-height: var(--typography-body-m-regular-line-height);
+  letter-spacing: var(--typography-body-m-regular-letter-spacing);
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
 }
 
 .IncodeConsentPage .IncodeConsentCheckboxList {
@@ -6879,7 +6692,8 @@
   border-radius: var(--radius-medium, var(--border-radius-medium));
   background-color: var(--color-surface-brand-50, var(--surface-brand-50));
   width: 100%;
-  padding: var(--spacing-16, var(--spacing-16, 16px));
+  padding-inline: var(--spacing-16, var(--spacing-16, 16px));
+  padding-block: var(--spacing-20, var(--spacing-20, 20px));
 }
 
 .IncodeConsentPage .IncodeConsentCheckbox .IncodeCheckboxLabel {
@@ -6900,7 +6714,7 @@
   font-weight: var(--typography-checkbox-radio-s-weight);
   line-height: var(--typography-checkbox-radio-s-line-height);
   letter-spacing: var(--typography-checkbox-radio-s-letter-spacing);
-  color: var(--color-text-body-primary, var(--text-body-800-primary));
+  color: var(--color-checkbox-text-default, var(--checkbox-text-default));
 }
 
 .IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText, .IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText .markup {
@@ -6918,10 +6732,11 @@
 }
 
 .IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText .markup a, .IncodeConsentPage .IncodeConsentCheckboxLabel .IncodeRichText a {
-  color: var(--color-surface-brand-600, var(--surface-brand-600-static));
+  color: var(--color-link-default, var(--link-default));
 }
 
 .IncodeConsentPage .IncodeConsentButton {
+  margin-bottom: var(--spacing-16, var(--spacing-16, 16px));
   width: 100%;
 }
 
@@ -6933,6 +6748,30 @@
   display: flex;
 }
 
+.IncodeConsentPage .IncodeConsentSubmitError {
+  margin-bottom: var(--spacing-12, var(--spacing-12, 12px));
+  text-align: center;
+  font-family: var(--typography-headline-family);
+  font-size: var(--typography-headline-h5-size);
+  font-weight: var(--typography-headline-h5-weight);
+  line-height: var(--typography-headline-h5-line-height);
+  letter-spacing: var(--typography-headline-h5-letter-spacing);
+  color: var(--color-input-text-helper-negative, var(--input-text-helper-negative));
+  margin-top: 0;
+}
+
+.IncodeSignature .IncodeSrOnly {
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border-width: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
+}
+
 .IncodeSignature .IncodeSignatureContent {
   width: 100%;
   height: 100%;
@@ -6951,17 +6790,15 @@
   animation-fill-mode: both;
 }
 
-.IncodeSignature .IncodeSignatureButtonContainer .IncodeButton.IncodeButtonPrimary {
-  transition: background-color .35s ease-out, color .35s ease-out, border-color .35s ease-out, opacity .35s ease-out, box-shadow .35s ease-out;
-}
-
 .IncodeSignature .SignatureCanvasContainer {
   width: 100%;
   padding-inline: var(--spacing-16, var(--spacing-16, 16px));
   padding-block: var(--spacing-8, var(--spacing-8, 8px));
   border-radius: var(--radius-small, var(--border-radius-small));
   border-style: var(--tw-border-style);
-  border-width: 1px;
+  border-width: var(--border-width-regular, var(--primitive-border-width-1));
+  --tw-border-style: solid;
+  border-style: solid;
   border-color: var(--color-input-border-default, var(--input-border-default));
   background-color: var(--color-input-surface-default, var(--input-surface-default));
   height: var(--signature-canvas-height);
@@ -7005,6 +6842,191 @@
   display: flex;
 }
 
+.IncodeIdentityReusePage {
+  animation: .4s ease-out fadeIn;
+}
+
+.IncodeIdentityReusePage .IncodeIdentityReuseBody {
+  padding-top: var(--spacing-32);
+  flex-direction: column;
+  flex: 1;
+  display: flex;
+}
+
+.IncodeIdentityReusePage .IncodeIdentityReuseList {
+  gap: var(--spacing-8, var(--spacing-8, 8px));
+  flex-direction: column;
+  width: 100%;
+  display: flex;
+}
+
+.IncodeIdentityReusePage .IncodeIdentityReuseCard {
+  cursor: pointer;
+  border-radius: var(--radius-medium, var(--border-radius-medium));
+  border-style: var(--tw-border-style);
+  width: 100%;
+  padding: var(--spacing-16, var(--spacing-16, 16px));
+  text-align: left;
+  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));
+  transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
+  --tw-duration: .2s;
+  background-color: var(--surface-neutral-0);
+  border-width: 1px;
+  border-color: var(--border-neutral-100);
+  flex-direction: column;
+  align-items: stretch;
+  transition-duration: .2s;
+  display: flex;
+}
+
+.IncodeIdentityReusePage .IncodeIdentityReuseCard:hover {
+  border-color: var(--border-neutral-200);
+}
+
+.IncodeIdentityReusePage .IncodeIdentityReuseCard:focus-visible {
+  outline: var(--focus-outline-width) solid var(--border-status-focus);
+  outline-offset: var(--focus-outline-width);
+}
+
+.IncodeIdentityReusePage .IncodeIdentityReuseCardSelected, .IncodeIdentityReusePage .IncodeIdentityReuseCardSelected:hover {
+  background-color: var(--surface-brand-50);
+  border-color: var(--border-brand-500);
+}
+
+.IncodeIdentityReusePage .IncodeIdentityReuseCardBody {
+  gap: var(--spacing-8, var(--spacing-8, 8px));
+  flex-direction: column;
+  flex: 1;
+  display: flex;
+}
+
+.IncodeIdentityReusePage .IncodeIdentityReuseCardHeader {
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  display: flex;
+}
+
+.IncodeIdentityReusePage .IncodeIdentityReuseCardHeaderLeft {
+  align-items: center;
+  gap: var(--spacing-12, var(--spacing-12, 12px));
+  display: flex;
+}
+
+.IncodeIdentityReusePage .IncodeIdentityReuseCardTypeLabel {
+  font-family: var(--typography-body-family);
+  font-size: var(--typography-body-m-regular-size);
+  font-weight: var(--typography-body-m-regular-weight);
+  line-height: var(--typography-body-m-regular-line-height);
+  letter-spacing: var(--typography-body-m-regular-letter-spacing);
+  color: var(--text-body-800-primary);
+}
+
+.IncodeIdentityReusePage .IncodeIdentityReuseCardIdentifier {
+  margin: var(--spacing-0, var(--spacing-none, 0px));
+  align-items: center;
+  gap: var(--spacing-8, var(--spacing-8, 8px));
+  font-family: var(--typography-headline-family);
+  font-size: var(--typography-headline-h5-size);
+  font-weight: var(--typography-headline-h5-weight);
+  line-height: var(--typography-headline-h5-line-height);
+  letter-spacing: var(--typography-headline-h5-letter-spacing);
+  color: var(--text-body-800-primary);
+  display: flex;
+}
+
+.IncodeIdentityReusePage .IncodeIdentityReuseCardVerified {
+  margin: var(--spacing-0, var(--spacing-none, 0px));
+  font-family: var(--typography-body-family);
+  font-size: var(--typography-body-m-regular-size);
+  font-weight: var(--typography-body-m-regular-weight);
+  line-height: var(--typography-body-m-regular-line-height);
+  letter-spacing: var(--typography-body-m-regular-letter-spacing);
+  color: var(--text-body-500-secondary);
+}
+
+.IncodeIdentityReusePage .IncodeIdentityReuseBadgeRecommended {
+  border-radius: var(--radius-x-small, var(--border-radius-x-small));
+  padding-inline: var(--spacing-4, var(--spacing-4, 4px));
+  padding-block: var(--spacing-2, var(--spacing-2, 2px));
+  font-family: var(--typography-body-family);
+  font-size: var(--typography-body-s-regular-size);
+  font-weight: var(--typography-body-s-regular-weight);
+  line-height: var(--typography-body-s-regular-line-height);
+  letter-spacing: var(--typography-body-s-regular-letter-spacing);
+  background-color: var(--surface-brand-500-static);
+  color: var(--text-body-0-static);
+  align-items: center;
+  display: inline-flex;
+}
+
+.IncodeIdentityReusePage .IncodeIdentityReuseBadgeSlowest {
+  border-radius: var(--radius-x-small, var(--border-radius-x-small));
+  border-style: var(--tw-border-style);
+  padding-inline: var(--spacing-4, var(--spacing-4, 4px));
+  padding-block: var(--spacing-2, var(--spacing-2, 2px));
+  font-family: var(--typography-body-family);
+  font-size: var(--typography-body-s-regular-size);
+  font-weight: var(--typography-body-s-regular-weight);
+  line-height: var(--typography-body-s-regular-line-height);
+  letter-spacing: var(--typography-body-s-regular-letter-spacing);
+  background-color: var(--surface-neutral-50);
+  border-width: 1px;
+  border-color: var(--border-neutral-200);
+  color: var(--text-body-800-primary);
+  align-items: center;
+  display: inline-flex;
+}
+
+.IncodeIdentityReusePage .IncodeIdentityReuseScanNewCard {
+  align-items: center;
+  gap: var(--spacing-20);
+  flex-direction: row;
+}
+
+.IncodeIdentityReusePage .IncodeIdentityReuseScanNewBody {
+  align-items: center;
+  gap: var(--spacing-12, var(--spacing-12, 12px));
+  flex: 1;
+  display: flex;
+}
+
+.IncodeIdentityReusePage .IncodeIdentityReuseRadio {
+  border-radius: var(--radius-full, var(--border-radius-full));
+  border-style: var(--tw-border-style);
+  width: var(--spacing-24);
+  height: var(--spacing-24);
+  background-color: var(--surface-neutral-50);
+  border-width: 1px;
+  border-color: var(--border-neutral-200);
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+}
+
+.IncodeIdentityReusePage .IncodeIdentityReuseRadioChecked {
+  background-color: var(--surface-brand-500-static);
+  border-color: var(--surface-brand-500-static);
+}
+
+.IncodeIdentityReusePage .IncodeIdentityReuseRadioInner {
+  border-radius: var(--radius-full, var(--border-radius-full));
+  width: var(--spacing-8);
+  height: var(--spacing-8);
+  background-color: var(--surface-neutral-0-static);
+  display: block;
+}
+
+.IncodeIdentityReusePage .IncodeIdentityReuseActions {
+  gap: var(--spacing-12, var(--spacing-12, 12px));
+  padding-top: var(--spacing-16);
+  flex-direction: column;
+  margin-top: auto;
+  display: flex;
+}
+
 .IncodeHome {
   background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));
   width: 100%;
@@ -7173,13 +7195,13 @@
 }
 
 .IncodeVerificationResult__center {
+  width: 100%;
+  max-width: var(--incode-form-max-w);
   justify-content: center;
   align-items: center;
   gap: var(--spacing-16, var(--spacing-16, 16px));
   flex-direction: column;
   flex: 1;
-  width: 100%;
-  max-width: 420px;
   margin-inline: auto;
   display: flex;
 }
@@ -7195,10 +7217,10 @@
 }
 
 .IncodeVerificationResult__actions {
+  width: 100%;
+  max-width: var(--incode-form-max-w);
   gap: var(--spacing-12, var(--spacing-12, 12px));
   flex-direction: column;
-  width: 100%;
-  max-width: 420px;
   margin-inline: auto;
   display: flex;
 }