@incodetech/web 0.0.0-dev-20260312-e476b70 → 0.0.0-dev-20260313-573a40c

package/dist/flow/styles.css

@@ -173,6 +173,11 @@
   }
 }
 
+.IncodeSelfieMain {
+  width: 100%;
+  height: 100%;
+}
+
 .IncodeCameraButton {
   justify-content: center;
   align-items: center;
@@ -180,7 +185,7 @@
 }
 
 .IncodeCameraButton .IncodeCameraButtonPath {
-  fill: var(--color-border-brand-500, var(--border-brand-500-static));
+  fill: var(--color-border-brand-500, var(--border-brand-500));
 }
 
 .IncodeCameraButton .IncodeCameraButtonBackground {
@@ -245,14 +250,32 @@
   transform: scaleX(-1);
 }
 
-.IncodeCaptureUploadingPage .IncodeCaptureUploadingContainer {
+.IncodeCaptureCapturingPage .IncodeCaptureCapturingActions {
+  justify-content: center;
+  margin-top: auto;
+  display: flex;
+}
+
+.IncodeCaptureVisuallyHidden {
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border-width: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
+}
+
+.IncodeCaptureStatusPage .IncodeCaptureStatusContainer {
   flex-direction: column;
   flex: 1;
-  animation: .4s ease-out fadeInScale;
+  align-items: center;
   display: flex;
 }
 
-.IncodeCaptureUploadingPage .IncodeCaptureUploadingTitle {
+.IncodeCaptureStatusPage .IncodeCaptureStatusTitle {
   text-align: center;
   font-size: var(--text-2xl, 1.5rem);
   line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
@@ -262,15 +285,11 @@
   font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
   --tw-tracking: -1px;
   letter-spacing: -1px;
-  color: var(--color-text-body-primary, var(--text-body-primary));
-}
-
-.IncodeCaptureUploadingPage .IncodeCaptureUploadingPrimaryIcon {
-  fill: var(--color-spinner-surface-primary, var(--spinner-surface-primary));
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
 }
 
-.IncodeCaptureUploadingPage .IncodeCaptureUploadingSecondaryIcon {
-  fill: var(--color-spinner-surface-secondary, var(--spinner-surface-secondary));
+.IncodeCaptureStatusPage.IncodeCaptureStatusUploading .IncodeCaptureStatusContainer {
+  animation: .4s ease-out fadeInScale;
 }
 
 @keyframes fadeInScale {
@@ -285,13 +304,6 @@
   }
 }
 
-.IncodeCaptureSuccessPage .IncodeCaptureSuccessContainer {
-  flex-direction: column;
-  flex: 1;
-  align-items: center;
-  display: flex;
-}
-
 .IncodeFaceOutline {
   height: 100%;
 }
@@ -327,7 +339,7 @@
   --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
   line-height: 1.14;
   font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
-  color: var(--color-text-body-primary, var(--text-body-primary));
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
 }
 
 .IncodeManualCaptureButtonButton {
@@ -348,7 +360,7 @@
   --tw-font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
   line-height: 1.2;
   font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
-  color: var(--color-text-body-primary, var(--text-body-primary));
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
 }
 
 .IncodeSelfieTutorial {
@@ -445,12 +457,12 @@
   padding-left: var(--spacing-16, var(--spacing-16, 16px));
   cursor: pointer;
   border-style: var(--tw-border-style);
-  border-width: var(--border-width-none, var(--border-none));
+  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-primary));
+  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;
@@ -482,7 +494,7 @@
   --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-primary));
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
 }
 
 .IncodePhonePage .IncodePhoneCountryArrow {
@@ -534,9 +546,9 @@
   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-primary));
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
   border-style: var(--tw-border-style);
-  border-width: var(--border-width-none, var(--border-none));
+  border-width: var(--border-width-none, var(--primitive-border-width-0));
   --tw-border-style: none;
   text-align: left;
   background-color: #0000;
@@ -562,21 +574,21 @@
 .IncodePhonePage .IncodePhoneCountryOptionCode {
   min-width: 52px;
   font-size: var(--text-16, var(--primitive-typography-size-16));
-  color: var(--color-text-body-secondary, var(--text-body-secondary));
+  color: var(--color-text-body-secondary, var(--text-body-500-secondary));
 }
 
 .IncodePhonePage .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-primary));
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
   flex: 1;
   overflow: hidden;
 }
 
 .IncodePhonePage .IncodePhoneInputField {
   border-style: var(--tw-border-style);
-  border-width: var(--border-width-none, var(--border-none));
+  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));
@@ -692,7 +704,7 @@
 
 .IncodeEmailPage .IncodeEmailInputField {
   border-style: var(--tw-border-style);
-  border-width: var(--border-width-none, var(--border-none));
+  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));
@@ -873,7 +885,7 @@
   background: var(--surface-neutral-50);
   border: 1px solid var(--border-neutral-300);
   height: 44px;
-  color: var(--text-body-primary);
+  color: var(--text-body-800-primary);
   text-align: center;
   border-radius: 12px;
   padding: 0 20px;
@@ -915,7 +927,7 @@
   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(--text-body-primary);
+  color: var(--text-body-800-primary);
   line-height: 125%;
 }
 
@@ -1163,7 +1175,7 @@
   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(--text-body-primary);
+  color: var(--text-body-800-primary);
   animation: fadeInTitle var(--transition-duration, .25s) linear forwards;
   animation-delay: calc(var(--animation-delay, 2.85s)  + var(--animation-duration, .8s)  + var(--transition-delay, .2s));
   opacity: 0;
@@ -1214,7 +1226,7 @@
 
 .IncodeGovtValidation .IncodeGovtValidationText {
   margin-top: var(--spacing-12, var(--spacing-12, 12px));
-  font-family: var(--primitive-typography-family-dm-sans);
+  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);
@@ -1232,13 +1244,11 @@
 }
 
 .IncodeGovtValidation.IncodeGovtValidation--otp .IncodeGovtValidationPage .IncodeGovtValidationOtpInstructions p {
-  font-family: var(--primitive-typography-family-dm-sans);
-  font-size: var(--typography-body-lg-size);
-  font-weight: var(--typography-body-lg-weight);
-  line-height: var(--typography-body-lg-line-height);
-  letter-spacing: var(--typography-body-lg-letter-spacing);
-  font-size: var(--text-lg, 1.125rem);
-  line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
+  font-family: var(--typography-input-dropdown-family);
+  font-size: var(--typography-input-dropdown-m-size);
+  font-weight: var(--typography-input-dropdown-m-weight);
+  line-height: var(--typography-input-dropdown-m-line-height);
+  letter-spacing: var(--typography-input-dropdown-m-letter-spacing);
   text-wrap: nowrap;
 }
 
@@ -1371,21 +1381,21 @@
 }
 
 .IncodeUnsupportedModule .IncodeUnsupportedModuleContent .IncodeUnsupportedModuleTitle {
-  font-family: var(--primitive-typography-family-dm-sans);
+  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-primary));
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
 }
 
 .IncodeUnsupportedModule .IncodeUnsupportedModuleContent .IncodeUnsupportedModuleMessage {
-  font-family: var(--primitive-typography-family-dm-sans);
+  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-secondary));
+  color: var(--color-text-body-secondary, var(--text-body-500-secondary));
 }
 
 .IncodeUnsupportedModule .IncodeUnsupportedModuleContent .IncodeUnsupportedModuleButton {
@@ -3087,6 +3097,78 @@
   }
 }
 
+@media (min-width: 40rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 40rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 48rem;
+  }
+}
+
+@media (min-width: 64rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 64rem;
+  }
+}
+
+@media (min-width: 80rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 80rem;
+  }
+}
+
+@media (min-width: 96rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 96rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    height: 840px;
+  }
+}
+
+@media (min-width: 40rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 40rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 48rem;
+  }
+}
+
+@media (min-width: 64rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 64rem;
+  }
+}
+
+@media (min-width: 80rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 80rem;
+  }
+}
+
+@media (min-width: 96rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    max-width: 96rem;
+  }
+}
+
+@media (min-width: 48rem) {
+  .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
+    height: 840px;
+  }
+}
+
 .IncodeCommonIssuesModal .IncodeCommonIssuesModalContent {
   width: 100%;
 }
@@ -3153,9 +3235,9 @@
   padding: var(--spacing-0, var(--spacing-none, 0px));
   cursor: pointer;
   border-style: var(--tw-border-style);
-  border-width: var(--border-width-none, var(--border-none));
+  border-width: var(--border-width-none, var(--primitive-border-width-0));
   --tw-border-style: none;
-  color: var(--color-text-body-primary, var(--text-body-primary));
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
   background-color: #0000;
   border-style: none;
   justify-content: center;
@@ -3177,7 +3259,7 @@
 }
 
 .IncodeCommonIssuesModal .IncodeCommonIssuesContent .IncodeCommonIssuesTitle {
-  font-family: var(--primitive-typography-family-dm-sans);
+  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);
@@ -3200,7 +3282,7 @@
 }
 
 .IncodeCommonIssuesModal .IncodeCommonIssuesContent .IncodeCommonIssuesCardIcon {
-  color: var(--color-text-body-primary, var(--text-body-primary));
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
   flex-shrink: 0;
 }
 
@@ -3211,7 +3293,7 @@
 }
 
 .IncodeCommonIssuesModal .IncodeCommonIssuesContent .IncodeCommonIssuesCardTitle {
-  font-family: var(--primitive-typography-family-dm-sans);
+  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);
@@ -3219,12 +3301,12 @@
 }
 
 .IncodeCommonIssuesModal .IncodeCommonIssuesContent .IncodeCommonIssuesCardBody {
-  font-family: var(--primitive-typography-family-dm-sans);
-  font-size: var(--typography-body-regular-size);
-  font-weight: var(--typography-body-regular-weight);
-  line-height: var(--typography-body-regular-line-height);
-  letter-spacing: var(--typography-body-regular-letter-spacing);
-  color: var(--color-text-body-secondary, var(--text-body-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-secondary, var(--text-body-500-secondary));
 }
 
 .IncodeCommonIssuesModal .IncodeCommonIssuesContent .IncodeCommonIssuesButtons {
@@ -3236,7 +3318,7 @@
 }
 
 .IncodeCommonIssuesModal .IncodeCommonIssuesContent .IncodeCommonIssuesTakeManually {
-  color: var(--color-text-body-primary, var(--text-body-primary));
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
 }
 
 .IncodeCommonIssuesModal .IncodeCommonIssuesContent .IncodeCommonIssuesTryAgain {
@@ -3333,21 +3415,21 @@
 }
 
 .IncodeChooserPage .IncodeChooserContainer .IncodeChooserButton .IncodeChooserButtonContent .IncodeChooserButtonTitle {
-  font-family: var(--primitive-typography-family-dm-sans);
+  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-primary, var(--text-body-primary));
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
 }
 
 .IncodeChooserPage .IncodeChooserContainer .IncodeChooserButton .IncodeChooserButtonContent .IncodeChooserButtonDescription {
-  font-family: var(--primitive-typography-family-dm-sans);
-  font-size: var(--typography-body-regular-size);
-  font-weight: var(--typography-body-regular-weight);
-  line-height: var(--typography-body-regular-line-height);
-  letter-spacing: var(--typography-body-regular-letter-spacing);
-  color: var(--color-text-body-secondary, var(--text-body-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-secondary, var(--text-body-500-secondary));
   max-width: 150px;
 }
 
@@ -3362,7 +3444,7 @@
 
 .IncodeCaptureFrame {
   border-radius: var(--radius-medium, var(--border-radius-medium));
-  --frame-border-color: var(--border-neutral-0);
+  --frame-border-color: var(--border-neutral-100);
   border: 4px solid var(--frame-border-color);
   justify-content: center;
   align-self: center;
@@ -3389,7 +3471,7 @@
 }
 
 .IncodeCaptureFrame.IncodeCaptureFrameIdle {
-  --frame-border-color: var(--border-neutral-0);
+  --frame-border-color: var(--border-neutral-100);
 }
 
 .IncodeCaptureFrame.IncodeCaptureFrameCapturing, .IncodeCaptureFrame.IncodeCaptureFrameFocus {
@@ -3397,7 +3479,7 @@
 }
 
 .IncodeCaptureFrame.IncodeCaptureFrameAnalyzing, .IncodeCaptureFrame.IncodeCaptureFrameSuccess {
-  --frame-border-color: var(--border-status-positive);
+  --frame-border-color: var(--border-status-positive-static);
 }
 
 .IncodeCaptureFrame.IncodeCaptureFrameError {
@@ -3529,13 +3611,13 @@
 
 .IncodeCaptureOverlayId .IncodeCaptureFooter .IncodeIdManualCaptureTooltipContainer .IncodeIdManualCaptureTooltip .IncodeIdManualCaptureTooltipList li {
   margin: var(--spacing-0, var(--spacing-none, 0px));
-  font-family: var(--primitive-typography-family-dm-sans);
-  font-size: var(--typography-tooltip-size);
-  font-weight: var(--typography-tooltip-weight);
-  line-height: var(--typography-tooltip-line-height);
-  letter-spacing: var(--typography-tooltip-letter-spacing);
+  font-family: var(--typography-tooltip-family);
+  font-size: var(--typography-tooltip-m-size);
+  font-weight: var(--typography-tooltip-m-weight);
+  line-height: var(--typography-tooltip-m-line-height);
+  letter-spacing: var(--typography-tooltip-m-letter-spacing);
   text-wrap: nowrap;
-  color: var(--color-text-tooltip-neutral, var(--text-tooltip-neutral));
+  color: var(--color-text-body-0-static, var(--text-body-0-static));
 }
 
 .IncodeCaptureOverlayId.IncodeCaptureOverlayVertical .IncodeCaptureTopSection {
@@ -3589,13 +3671,13 @@
 
 .IncodeIdManualCaptureButton .IncodeIdManualCaptureTooltipContainer .IncodeIdManualCaptureTooltip .IncodeIdManualCaptureTooltipList li {
   margin: var(--spacing-0, var(--spacing-none, 0px));
-  font-family: var(--primitive-typography-family-dm-sans);
-  font-size: var(--typography-tooltip-size);
-  font-weight: var(--typography-tooltip-weight);
-  line-height: var(--typography-tooltip-line-height);
-  letter-spacing: var(--typography-tooltip-letter-spacing);
+  font-family: var(--typography-tooltip-family);
+  font-size: var(--typography-tooltip-m-size);
+  font-weight: var(--typography-tooltip-m-weight);
+  line-height: var(--typography-tooltip-m-line-height);
+  letter-spacing: var(--typography-tooltip-m-letter-spacing);
   text-wrap: nowrap;
-  color: var(--color-text-tooltip-neutral, var(--text-tooltip-neutral));
+  color: var(--color-text-body-0-static, var(--text-body-0-static));
 }
 
 .IncodeIdManualCaptureButton .IncodeIdManualCaptureButtonContent .IncodeIdManualCaptureButtonButton svg {
@@ -3745,13 +3827,13 @@
   align-items: center;
   gap: var(--spacing-4, var(--spacing-4, 4px));
   padding-bottom: var(--spacing-12, var(--spacing-12, 12px));
-  font-family: var(--primitive-typography-family-dm-sans);
-  font-size: var(--typography-body-regular-size);
-  font-weight: var(--typography-body-regular-weight);
-  line-height: var(--typography-body-regular-line-height);
-  letter-spacing: var(--typography-body-regular-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);
   white-space: nowrap;
-  color: var(--color-text-body-primary, var(--text-body-primary));
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
   display: flex;
 }
 
@@ -3766,12 +3848,12 @@
 }
 
 .IncodeIdProcessingLayout .IncodeAnalyzingContent .IncodeAnalyzingTitle {
-  font-family: var(--primitive-typography-family-dm-sans);
+  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-primary));
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
   text-align: center;
 }
 
@@ -3787,22 +3869,22 @@
 }
 
 .IncodeIdProcessingLayout .IncodeIdProcessingResultTitle {
-  font-family: var(--primitive-typography-family-dm-sans);
+  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-primary));
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
   text-align: center;
 }
 
 .IncodeIdProcessingLayout .IncodeIdProcessingResultSubtitle {
-  font-family: var(--primitive-typography-family-dm-sans);
+  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-secondary));
+  color: var(--color-text-body-secondary, var(--text-body-500-secondary));
   text-align: center;
   max-width: 300px;
 }
@@ -3818,12 +3900,12 @@
 .IncodeIdProcessingLayout .IncodeIdProcessingResultAttempts {
   padding-block: var(--spacing-12, var(--spacing-12, 12px));
   text-align: center;
-  font-family: var(--primitive-typography-family-dm-sans);
+  font-family: var(--typography-headline-family);
   font-size: var(--typography-headline-h4-size);
   font-weight: var(--typography-headline-h4-weight);
   line-height: var(--typography-headline-h4-line-height);
   letter-spacing: var(--typography-headline-h4-letter-spacing);
-  color: var(--color-text-body-secondary, var(--text-body-secondary));
+  color: var(--color-text-body-secondary, var(--text-body-500-secondary));
 }
 
 .IncodeIdError {
@@ -3867,14 +3949,14 @@
 
 .IncodeIdExpiredTitle {
   text-align: center;
-  color: var(--color-text-body-primary, var(--text-body-primary));
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
 }
 
 .IncodeIdExpiredSubtitle {
   font-size: var(--text-14, var(--primitive-typography-size-14));
   --tw-font-weight: var(--font-weight-normal, 400);
   font-weight: var(--font-weight-normal, 400);
-  color: var(--color-text-body-secondary, var(--text-body-secondary));
+  color: var(--color-text-body-secondary, var(--text-body-500-secondary));
   text-align: center;
   max-width: 350px;
 }
@@ -3928,7 +4010,7 @@
 }
 
 .IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationText .IncodeIdCaptureNotificationTitle {
-  font-family: var(--primitive-typography-family-dm-sans);
+  font-family: var(--typography-headline-family);
   font-size: var(--typography-headline-h3-size);
   font-weight: var(--typography-headline-h3-weight);
   line-height: var(--typography-headline-h3-line-height);
@@ -3936,12 +4018,12 @@
 }
 
 .IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationText .IncodeIdCaptureNotificationDescription {
-  font-family: var(--primitive-typography-family-dm-sans);
+  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-tertiary, var(--text-body-tertiary));
+  color: var(--color-text-body-tertiary, var(--text-body-300-tertiary));
 }
 
 .IncodeIdCaptureNotification .IncodeIdCaptureNotificationContent .IncodeIdCaptureNotificationAnimation {
@@ -4122,24 +4204,24 @@
   align-items: center;
   gap: var(--spacing-16, var(--spacing-16, 16px));
   border-style: var(--tw-border-style);
-  border-width: var(--border-width-none, var(--border-none));
+  border-width: var(--border-width-none, var(--primitive-border-width-0));
   --tw-border-style: none;
   width: 100%;
   padding-inline: var(--spacing-12, var(--spacing-12, 12px));
   padding-block: var(--spacing-16, var(--spacing-16, 16px));
-  font-family: var(--primitive-typography-family-dm-sans);
+  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-primary, var(--text-body-primary));
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
   background-color: #0000;
   border-style: none;
   display: flex;
 }
 
 .IncodeDocumentCaptureOverlay .IncodeDocumentCaptureBottomSheetContainer .IncodeDocumentCaptureBottomSheet .IncodeDocumentCaptureBottomSheetOptions .IncodeDocumentCaptureBottomSheetOption svg {
-  color: var(--color-text-body-primary, var(--text-body-primary));
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
   flex-shrink: 0;
 }
 
@@ -4175,7 +4257,7 @@
 
 .IncodeDocumentCaptureReviewLayout .IncodeDocumentCaptureReviewHeader .IncodeDocumentCaptureReviewTitle {
   text-align: center;
-  font-family: var(--primitive-typography-family-dm-sans);
+  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);
@@ -4184,12 +4266,12 @@
 
 .IncodeDocumentCaptureReviewLayout .IncodeDocumentCaptureReviewHeader .IncodeDocumentCaptureReviewSubtitle {
   text-align: center;
-  font-family: var(--primitive-typography-family-dm-sans);
+  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-secondary));
+  color: var(--color-text-body-secondary, var(--text-body-500-secondary));
 }
 
 .IncodeDocumentCaptureReviewLayout .IncodeDocumentCaptureReviewPreview {
@@ -4304,17 +4386,17 @@
 
 .IncodeDocumentCapturePdfCard .IncodeDocumentCapturePdfFileName {
   text-align: center;
-  font-family: var(--primitive-typography-family-dm-sans);
+  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-primary, var(--text-body-primary));
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
   overflow-wrap: break-word;
 }
 
 .IncodeModal .IncodeDocumentCommonIssuesTitle {
-  font-family: var(--primitive-typography-family-dm-sans);
+  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);
@@ -4338,7 +4420,7 @@
 }
 
 .IncodeModal .IncodeDocumentCommonIssuesCards .IncodeDocumentCommonIssuesCard .IncodeDocumentCommonIssuesCardIcon {
-  color: var(--color-text-body-primary, var(--text-body-primary));
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
   flex-shrink: 0;
 }
 
@@ -4349,7 +4431,7 @@
 }
 
 .IncodeModal .IncodeDocumentCommonIssuesCards .IncodeDocumentCommonIssuesCard .IncodeDocumentCommonIssuesCardText .IncodeDocumentCommonIssuesCardTitle {
-  font-family: var(--primitive-typography-family-dm-sans);
+  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);
@@ -4357,12 +4439,12 @@
 }
 
 .IncodeModal .IncodeDocumentCommonIssuesCards .IncodeDocumentCommonIssuesCard .IncodeDocumentCommonIssuesCardText .IncodeDocumentCommonIssuesCardBody {
-  font-family: var(--primitive-typography-family-dm-sans);
-  font-size: var(--typography-body-regular-size);
-  font-weight: var(--typography-body-regular-weight);
-  line-height: var(--typography-body-regular-line-height);
-  letter-spacing: var(--typography-body-regular-letter-spacing);
-  color: var(--color-text-body-secondary, var(--text-body-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-secondary, var(--text-body-500-secondary));
 }
 
 .IncodeModal .IncodeDocumentCommonIssuesButtons {
@@ -4408,13 +4490,11 @@
   background-color: var(--color-input-surface-default, var(--input-surface-default));
   width: 100%;
   padding: var(--spacing-16, var(--spacing-16, 16px));
-  font-family: var(--primitive-typography-family-dm-sans);
-  font-size: var(--typography-body-lg-size);
-  font-weight: var(--typography-body-lg-weight);
-  line-height: var(--typography-body-lg-line-height);
-  letter-spacing: var(--typography-body-lg-letter-spacing);
-  font-size: var(--text-lg, 1.125rem);
-  line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
+  font-family: var(--typography-input-dropdown-family);
+  font-size: var(--typography-input-dropdown-m-size);
+  font-weight: var(--typography-input-dropdown-m-weight);
+  line-height: var(--typography-input-dropdown-m-line-height);
+  letter-spacing: var(--typography-input-dropdown-m-letter-spacing);
   --tw-font-weight: var(--font-weight-normal, 400);
   font-weight: var(--font-weight-normal, 400);
   color: var(--color-input-text-field-default, var(--input-text-field-default));
@@ -4491,7 +4571,7 @@
 }
 
 .IncodeDateInputComposedIcon {
-  color: var(--text-body-tertiary, var(--color-text-body-tertiary));
+  color: var(--text-body-300-tertiary, var(--color-text-body-tertiary));
 }
 
 .IncodeDateInputComposedIconButton {
@@ -4500,7 +4580,7 @@
   z-index: 10;
   cursor: pointer;
   border-style: var(--tw-border-style);
-  border-width: var(--border-width-none, var(--border-none));
+  border-width: var(--border-width-none, var(--primitive-border-width-0));
   --tw-border-style: none;
   width: 44px;
   height: 100%;
@@ -4604,13 +4684,11 @@
   width: 100%;
   padding: var(--spacing-16, var(--spacing-16, 16px));
   text-align: left;
-  font-family: var(--primitive-typography-family-dm-sans);
-  font-size: var(--typography-body-lg-size);
-  font-weight: var(--typography-body-lg-weight);
-  line-height: var(--typography-body-lg-line-height);
-  letter-spacing: var(--typography-body-lg-letter-spacing);
-  font-size: var(--text-lg, 1.125rem);
-  line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
+  font-family: var(--typography-input-dropdown-family);
+  font-size: var(--typography-input-dropdown-m-size);
+  font-weight: var(--typography-input-dropdown-m-weight);
+  line-height: var(--typography-input-dropdown-m-line-height);
+  letter-spacing: var(--typography-input-dropdown-m-letter-spacing);
   --tw-font-weight: var(--font-weight-normal, 400);
   font-weight: var(--font-weight-normal, 400);
   transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
@@ -4672,7 +4750,7 @@
   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;
-  color: var(--text-body-tertiary, var(--color-text-body-tertiary));
+  color: var(--text-body-300-tertiary, var(--color-text-body-tertiary));
   flex-shrink: 0;
   transition-duration: .2s;
   display: flex;
@@ -4720,19 +4798,17 @@
 .IncodeDropdownComposedSearchInput {
   box-sizing: border-box;
   border-style: var(--tw-border-style);
-  border-width: var(--border-width-none, var(--border-none));
+  border-width: var(--border-width-none, var(--primitive-border-width-0));
   --tw-border-style: none;
   width: 100%;
   padding-block: var(--spacing-8, var(--spacing-8, 8px));
   padding-right: var(--spacing-40, var(--spacing-40, 40px));
   padding-left: var(--spacing-12, var(--spacing-12, 12px));
-  font-family: var(--primitive-typography-family-dm-sans);
-  font-size: var(--typography-body-lg-size);
-  font-weight: var(--typography-body-lg-weight);
-  line-height: var(--typography-body-lg-line-height);
-  letter-spacing: var(--typography-body-lg-letter-spacing);
-  font-size: var(--text-lg, 1.125rem);
-  line-height: var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
+  font-family: var(--typography-input-dropdown-family);
+  font-size: var(--typography-input-dropdown-m-size);
+  font-weight: var(--typography-input-dropdown-m-weight);
+  line-height: var(--typography-input-dropdown-m-line-height);
+  letter-spacing: var(--typography-input-dropdown-m-letter-spacing);
   --tw-font-weight: var(--font-weight-normal, 400);
   font-weight: var(--font-weight-normal, 400);
   --tw-outline-style: none;
@@ -4878,7 +4954,7 @@
   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-text-body-primary, var(--text-body-primary));
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
 }
 
 .IncodeCurpConfirm {
@@ -4934,14 +5010,14 @@
   font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
   --tw-tracking: -1px;
   letter-spacing: -1px;
-  color: var(--color-text-body-primary, var(--text-body-primary));
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
 }
 
 .IncodeCurpFailureHint {
   margin: var(--spacing-0, var(--spacing-none, 0px));
   text-align: center;
   font-size: var(--text-16, var(--primitive-typography-size-16));
-  color: var(--color-text-body-secondary, var(--text-body-secondary));
+  color: var(--color-text-body-secondary, var(--text-body-500-secondary));
 }
 
 .IncodeGeolocationPage {
@@ -4985,12 +5061,12 @@
 
 .IncodeGeolocationPage.IncodeGeolocationPermissionPage .IncodeGeolocationPermissionSectionTitle {
   margin: var(--spacing-0, var(--spacing-none, 0px));
-  font-family: var(--primitive-typography-family-dm-sans);
+  font-family: var(--typography-headline-family);
   font-size: var(--typography-headline-h4-size);
   font-weight: var(--typography-headline-h4-weight);
   line-height: var(--typography-headline-h4-line-height);
   letter-spacing: var(--typography-headline-h4-letter-spacing);
-  color: var(--color-text-body-primary, var(--text-body-primary));
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
 }
 
 .IncodeGeolocationPage.IncodeGeolocationPermissionPage .IncodeGeolocationPermissionStepsList {
@@ -5041,13 +5117,13 @@
   line-height: var(--leading-snug, 1.375);
   --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-secondary, var(--text-body-secondary));
+  color: var(--color-text-body-secondary, var(--text-body-500-secondary));
 }
 
 .IncodeGeolocationPage.IncodeGeolocationPermissionPage .IncodeGeolocationPermissionStepTextBold {
   --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-primary));
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
 }
 
 .IncodeGeolocationPage.IncodeGeolocationPermissionPage .IncodeGeolocationPermissionArrow {
@@ -5113,12 +5189,12 @@
 }
 
 .IncodeEkycPage .IncodeEkyc__sectionHeader {
-  font-family: var(--primitive-typography-family-dm-sans);
+  font-family: var(--typography-headline-family);
   font-size: var(--typography-headline-h3-size);
   font-weight: var(--typography-headline-h3-weight);
   line-height: var(--typography-headline-h3-line-height);
   letter-spacing: var(--typography-headline-h3-letter-spacing);
-  color: var(--color-text-body-primary, var(--text-body-primary));
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
   width: 100%;
   max-width: 420px;
   margin: 16px auto 0;
@@ -5148,7 +5224,7 @@
 }
 
 .IncodeEkyc__radioOption {
-  color: var(--radio-button-text-default, var(--text-body-primary, #262831));
+  color: var(--radio-button-text-default, var(--text-body-800-primary, #262831));
   cursor: pointer;
   align-items: center;
   gap: 12px;
@@ -5233,7 +5309,7 @@
 
 .IncodeAddressAutocomplete__suggestion {
   cursor: pointer;
-  color: var(--text-body-primary, #262831);
+  color: var(--text-body-800-primary, #262831);
   border-bottom: 1px solid var(--input-border-default, #82879a);
   padding: 12px 16px;
   font-size: 16px;
@@ -5395,12 +5471,12 @@
 }
 
 .IncodeEkybPage .IncodeEkyb__sectionHeader {
-  font-family: var(--primitive-typography-family-dm-sans);
+  font-family: var(--typography-headline-family);
   font-size: var(--typography-headline-h3-size);
   font-weight: var(--typography-headline-h3-weight);
   line-height: var(--typography-headline-h3-line-height);
   letter-spacing: var(--typography-headline-h3-letter-spacing);
-  color: var(--color-text-body-primary, var(--text-body-primary));
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
   width: 100%;
   max-width: 420px;
   margin: 16px auto 0;
@@ -5463,14 +5539,14 @@
 
 .IncodeVerificationResult__title {
   text-align: center;
-  font-family: var(--primitive-typography-family-dm-sans);
+  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);
   --tw-tracking: -1px;
   letter-spacing: -1px;
-  color: var(--color-text-body-primary, var(--text-body-primary));
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
 }
 
 .IncodeVerificationResult__actions {