@incodetech/web 0.0.0-dev-20260820-c751f1ee → 0.0.0-dev-20260820-e7c67ad4

package/dist/base.css

@@ -10,7 +10,6 @@
       --tw-translate-y: 0;
       --tw-translate-z: 0;
       --tw-outline-style: solid;
-      --tw-tracking: initial;
       --tw-ease: initial;
     }
   }
@@ -171,9 +170,9 @@
 
 .IncodeTransArrow {
   vertical-align: middle;
-  width: .8em;
-  height: .8em;
-  margin-inline: .2em;
+  height: var(--inline-arrow-icon-size);
+  width: var(--inline-arrow-icon-size);
+  margin-inline: var(--inline-arrow-icon-margin-x);
   display: inline-block;
 }
 
@@ -204,14 +203,14 @@
 }
 
 .IncodeButton:focus-visible {
-  outline: 2px solid var(--border-status-focus);
-  outline-offset: 2px;
+  outline: var(--focus-outline-width) solid var(--border-status-focus);
+  outline-offset: var(--focus-outline-offset);
 }
 
 .IncodeButton.IncodeButtonL {
   width: 100%;
-  max-width: 420px;
-  height: 56px;
+  max-width: var(--incode-form-max-w);
+  height: var(--primitive-scale-56);
   padding-inline: var(--spacing-16, var(--spacing-16, 16px));
   border-radius: var(--radius-medium, var(--border-radius-medium));
   font-family: var(--typography-button-family);
@@ -238,9 +237,9 @@
 }
 
 .IncodeButton.IncodeButtonS {
+  height: var(--button-s-height);
   border-radius: var(--radius-full, var(--border-radius-full));
   width: auto;
-  height: 30px;
   padding-inline: var(--spacing-16, var(--spacing-16, 16px));
   padding-block: var(--spacing-8, var(--spacing-8, 8px));
   font-family: var(--typography-button-family);
@@ -264,9 +263,14 @@
 
 .IncodeButton.IncodeButtonInline {
   margin: var(--spacing-0, var(--spacing-none, 0px));
+  min-height: var(--spacing-24, var(--spacing-24, 24px));
+  min-width: var(--spacing-24, var(--spacing-24, 24px));
   padding: var(--spacing-0, var(--spacing-none, 0px));
+  vertical-align: baseline;
+  align-items: center;
   width: auto;
   height: auto;
+  display: inline-flex;
 }
 
 .IncodeButton.IncodeButtonPrimary {
@@ -431,11 +435,11 @@
 }
 
 .IncodeCheckboxLabel {
+  align-items: center;
+  gap: var(--spacing-12, var(--spacing-12, 12px));
   cursor: pointer;
   -webkit-user-select: none;
   user-select: none;
-  align-items: center;
-  gap: 10px;
   display: inline-flex;
   position: relative;
 }
@@ -451,11 +455,11 @@
 
 .IncodeCheckboxInput {
   opacity: 0;
-  width: 28px;
-  height: 28px;
+  height: var(--incode-checkbox-input-size);
+  width: var(--incode-checkbox-input-size);
+  z-index: 1;
   margin: var(--spacing-0, var(--spacing-none, 0px));
   cursor: pointer;
-  z-index: 1;
   position: absolute;
 }
 
@@ -464,20 +468,20 @@
 }
 
 .IncodeCheckboxInput:focus-visible + .IncodeCheckboxVisual {
-  outline: 2px solid var(--border-status-focus);
-  outline-offset: 2px;
+  outline: var(--focus-outline-width) solid var(--border-status-focus);
+  outline-offset: var(--focus-outline-offset);
 }
 
 .IncodeCheckboxVisual {
+  height: var(--incode-checkbox-input-size);
+  min-height: var(--incode-checkbox-input-size);
+  width: var(--incode-checkbox-input-size);
+  min-width: var(--incode-checkbox-input-size);
   border-radius: var(--radius-checkbox, var(--checkbox-border-radius));
   border-style: var(--tw-border-style);
   border-width: 2px;
   border-color: var(--color-checkbox-border-default, var(--checkbox-border-default));
   background-color: var(--color-checkbox-surface-default, var(--checkbox-surface-default));
-  width: 28px;
-  min-width: 28px;
-  height: 28px;
-  min-height: 28px;
   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));
@@ -505,21 +509,22 @@
 
 .IncodeCheckboxText {
   color: var(--color-checkbox-text-default, var(--checkbox-text-default));
-  --tw-leading: 1.5;
-  line-height: 1.5;
-  font-family: var(--primitive-typography-family-dm-sans), system-ui, sans-serif;
 }
 
 .IncodeCheckboxTextS {
-  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);
+  font-family: var(--typography-checkbox-radio-family);
+  font-size: var(--typography-checkbox-radio-s-size);
+  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);
 }
 
 .IncodeCheckboxTextM {
-  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));
+  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);
 }
 
 .IncodeCheckboxTextDisabled {
@@ -528,16 +533,18 @@
 
 .IncodeCheckboxLabelHint {
   margin-left: var(--spacing-4, var(--spacing-4, 4px));
-  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);
+  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));
 }
 
 .IncodeCheckboxMessageWrapper {
   margin-top: var(--spacing-8, var(--spacing-8, 8px));
+  margin-left: var(--spacing-40, var(--spacing-40, 40px));
   align-items: center;
-  margin-left: 38px;
   display: flex;
 }
 
@@ -549,20 +556,22 @@
 .IncodeCheckboxErrorText {
   margin: var(--spacing-0, var(--spacing-none, 0px));
   color: var(--color-checkbox-text-negative, var(--checkbox-text-negative));
-  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);
-  font-family: inherit;
+  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);
   display: inline-block;
 }
 
 .IncodeCheckboxHelperText {
   margin: var(--spacing-0, var(--spacing-none, 0px));
   color: var(--color-text-body-secondary, var(--text-body-500-secondary));
-  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);
-  font-family: inherit;
+  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);
   display: inline-block;
 }
 
@@ -811,9 +820,9 @@
 
 .IncodeInput {
   width: 100%;
-  max-width: 420px;
-  height: 56px;
-  min-height: 56px;
+  max-width: var(--incode-form-max-w);
+  height: var(--primitive-scale-56);
+  min-height: var(--primitive-scale-56);
   font-family: var(--typography-input-dropdown-family);
   font-size: var(--typography-input-dropdown-m-size);
   font-weight: var(--typography-input-dropdown-m-weight);
@@ -875,8 +884,8 @@
   appearance: none;
   -moz-appearance: textfield;
   color: var(--color-input-text-field-default, var(--input-text-field-default));
+  padding-right: var(--date-input-padding-right);
   text-align: start;
-  padding-right: 44px;
 }
 
 .IncodeInput[type="date"]::-webkit-date-and-time-value {
@@ -926,8 +935,8 @@
 
 .IncodeTextArea {
   width: 100%;
-  max-width: 420px;
-  min-height: 56px;
+  max-width: var(--incode-form-max-w);
+  min-height: var(--text-area-input-min-h);
   font-family: var(--typography-input-dropdown-family);
   font-size: var(--typography-input-dropdown-m-size);
   font-weight: var(--typography-input-dropdown-m-weight);
@@ -989,7 +998,7 @@
 
 .IncodeInputComposed {
   width: 100%;
-  max-width: 420px;
+  max-width: var(--incode-form-max-w);
 }
 
 .IncodeInputComposedLabel {
@@ -1078,9 +1087,11 @@
 .IncodeInputComposedHelper {
   margin: var(--spacing-0, var(--spacing-none, 0px));
   color: var(--color-input-text-helper-default, var(--input-text-helper-default));
-  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);
+  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);
   font-family: inherit;
   display: inline-block;
 }
@@ -1436,7 +1447,7 @@
 
 .IncodeTextAreaComposed {
   width: 100%;
-  max-width: 420px;
+  max-width: var(--incode-form-max-w);
 }
 
 .IncodeTextAreaComposedLabel {
@@ -1505,7 +1516,7 @@
 
 .IncodeDropdownComposed {
   width: 100%;
-  max-width: 420px;
+  max-width: var(--incode-form-max-w);
   position: relative;
 }
 
@@ -1575,8 +1586,8 @@
   transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
   --tw-duration: .2s;
   --tw-outline-style: none;
-  height: 56px;
-  min-height: 56px;
+  height: var(--primitive-scale-56);
+  min-height: var(--primitive-scale-56);
   color: var(--color-dropdown-text-input-default, var(--dropdown-text-input-default));
   outline-style: none;
   justify-content: space-between;
@@ -1612,12 +1623,21 @@
 }
 
 .IncodeDropdownComposedTriggerText {
+  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);
   color: var(--color-dropdown-text-input-default, var(--dropdown-text-input-default));
 }
 
 .IncodeDropdownComposedTriggerPlaceholder {
+  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);
   color: var(--color-dropdown-text-input-placeholder, var(--dropdown-text-input-placeholder));
-  font-weight: 500;
 }
 
 .IncodeDropdownComposedTriggerIcon {
@@ -1642,17 +1662,17 @@
   left: var(--spacing-0, var(--spacing-none, 0px));
   z-index: 20;
   margin-top: var(--spacing-8, var(--spacing-8, 8px));
+  max-height: var(--dropdown-list-max-h);
   border-radius: var(--radius-small, var(--border-radius-small));
   border-style: var(--tw-border-style);
   border-width: 1px;
   border-color: var(--color-dropdown-border-default, var(--dropdown-border-default));
   background-color: var(--color-dropdown-surface-default, var(--dropdown-surface-default));
+  box-shadow: var(--dropdown-box-shadow);
   flex-direction: column;
-  max-height: 320px;
   display: flex;
   position: absolute;
   overflow: hidden;
-  box-shadow: 0 2px 8px #00000026;
 }
 
 .IncodeDropdownComposedList[data-error="true"] {
@@ -1816,9 +1836,11 @@
 
 .IncodeDropdownComposedError {
   margin: var(--spacing-0, var(--spacing-none, 0px));
-  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);
+  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-dropdown-text-helper-negative, var(--dropdown-text-helper-negative));
   font-family: inherit;
   display: inline-block;
@@ -1826,9 +1848,11 @@
 
 .IncodeDropdownComposedHelper {
   margin: var(--spacing-0, var(--spacing-none, 0px));
-  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);
+  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-dropdown-text-helper-default, var(--dropdown-text-helper-default));
   font-family: inherit;
   display: inline-block;
@@ -1836,7 +1860,7 @@
 
 .IncodeCountrySelector {
   width: 100%;
-  max-width: 420px;
+  max-width: var(--incode-form-max-w);
 }
 
 .IncodePhoneInputComposed {
@@ -1914,7 +1938,7 @@
   display: inline-block;
 }
 
-.IncodePhoneInputComposed .IncodeSrOnly {
+.IncodePhoneInputComposed .IncodeSrOnly, .IncodeSrOnly {
   clip-path: inset(50%);
   white-space: nowrap;
   border-width: 0;
@@ -1934,52 +1958,34 @@
   display: flex;
 }
 
-.IncodeOtpInputContainer {
-  flex-direction: column;
-  align-items: center;
+.IncodeOtpInput.IncodeOtpInputComposed {
   width: 100%;
-  display: flex;
 }
 
-.IncodeOtpInputError {
-  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));
-}
-
-.IncodeOtpInputActions {
+.IncodeOtpInput .IncodeOtpInputActions {
   max-width: var(--incode-form-max-w);
   flex-direction: column;
   align-items: center;
   display: flex;
 }
 
-.IncodeOtpInputResendText {
+.IncodeOtpInput .IncodeOtpInputResendText {
   margin-block: var(--spacing-8, var(--spacing-8, 8px));
   text-align: center;
-  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));
+  font-family: var(--typography-button-family);
+  font-size: var(--typography-button-m-size);
+  font-weight: var(--typography-button-m-weight);
+  line-height: var(--typography-button-m-line-height);
+  letter-spacing: var(--typography-button-m-letter-spacing);
   color: var(--color-text-body-primary, var(--text-body-800-primary));
 }
 
-.IncodeOtpInputResendTextDisabled {
+.IncodeOtpInput .IncodeOtpInputResendText.IncodeOtpInputResendTextDisabled {
   margin-block: var(--spacing-8, var(--spacing-8, 8px));
   color: var(--color-button-tertiary-text-disabled, var(--button-tertiary-text-disabled));
 }
 
-.IncodeOtpInputLoadingText {
-  color: var(--color-button-tertiary-text-default, var(--button-tertiary-text-default));
-}
-
-.IncodeOtpInputComposed {
-  width: 100%;
-}
-
-.IncodeOtpInputComposed .IncodeOtpSingleInput input {
+.IncodeOtpInput .IncodeOtpSingleInput input {
   text-align: center;
   font-family: var(--typography-input-dropdown-family);
   font-size: var(--typography-input-dropdown-l-size);
@@ -4581,14 +4587,11 @@
 
 .IncodeComponent .IncodeTitle {
   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-leading: 115%;
-  --tw-font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
-  line-height: 115%;
-  font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
-  --tw-tracking: -1px;
-  letter-spacing: -1px;
+  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));
   --tw-outline-style: none;
   outline-style: none;
@@ -4877,8 +4880,8 @@
 }
 
 .IncodeBaseTutorialAnimationContainer {
-  max-width: 400px;
   height: 100%;
+  max-width: var(--incode-tutorial-animation-container-max-w);
   padding-inline: var(--spacing-24, var(--spacing-24, 24px));
   margin: auto;
 }
@@ -4901,7 +4904,7 @@
 }
 
 .IncodeBaseTutorialButton {
-  max-width: 420px;
+  max-width: var(--incode-form-max-w);
   margin: auto;
 }
 
@@ -5009,16 +5012,16 @@
 }
 
 .IncodeOverlay .IncodeOverlayContainer {
+  width: 100%;
+  max-width: var(--overlay-container-max-w);
   flex-direction: column;
   flex: 1;
-  width: 100%;
-  max-width: 468px;
   margin-inline: auto;
   display: flex;
 }
 
 .IncodeOverlay .IncodeOverlayHeader {
-  height: 44px;
+  height: var(--page-header-height);
   padding-inline: var(--spacing-20, var(--spacing-20, 20px));
   padding-block: var(--spacing-8, var(--spacing-8, 8px));
   flex-shrink: 0;
@@ -5073,12 +5076,12 @@
 .IncodeModalRoot .IncodeModalDialog {
   pointer-events: auto;
   z-index: 1;
+  max-height: var(--modal-dialog-max-h);
+  width: 100%;
+  max-width: var(--modal-dialog-max-w);
   --tw-outline-style: none;
   outline-style: none;
   justify-content: center;
-  width: 100%;
-  max-width: 468px;
-  max-height: min(100vh, 100%);
   display: flex;
   position: relative;
   overflow-y: auto;
@@ -5218,12 +5221,12 @@
 
 .IncodeCaptureFooter .IncodeCaptureFooterCaptureSection .IncodeCaptureFooterCaptureButton {
   margin-top: var(--spacing-12, var(--spacing-12, 12px));
+  width: var(--spacing-64, var(--spacing-64, 64px));
+  height: var(--spacing-64, var(--spacing-64, 64px));
   cursor: pointer;
   border-style: var(--tw-border-style);
   border-width: var(--border-width-none, var(--primitive-border-width-0));
   --tw-border-style: none;
-  width: 64px;
-  height: 64px;
   padding: var(--spacing-0, var(--spacing-none, 0px));
   background-color: #0000;
   border-style: none;
@@ -5250,7 +5253,7 @@
 }
 
 .IncodeCameraView {
-  background-color: var(--color-black, #000);
+  background-color: var(--capture-page-backdrop-color);
   width: 100%;
   height: 100%;
   position: relative;
@@ -5339,9 +5342,8 @@
 .IncodeCameraFrame {
   border-radius: var(--radius-medium, var(--border-radius-medium));
   --frame-border-color: var(--border-neutral-100);
-  --overlay-opacity: .8;
-  border: 4px solid var(--frame-border-color);
-  box-shadow: 0 0 0 9999px rgba(0, 0, 0, var(--overlay-opacity));
+  border: var(--id-capture-frame-border-width) solid var(--frame-border-color);
+  box-shadow: var(--camera-frame-overlay-shadow);
   justify-content: center;
   align-self: center;
   align-items: center;
@@ -5352,12 +5354,12 @@
 
 @media (min-width: 48rem) {
   .IncodeCameraFrame {
-    --overlay-opacity: 1;
+    --overlay-opacity: var(--camera-frame-overlay-opacity-active);
   }
 }
 
 .IncodeCameraFrame.IncodeCameraFrameFill {
-  border-color: #fff6;
+  border-color: var(--camera-frame-fill-border-color);
   flex: 1;
   align-self: stretch;
 }
@@ -5367,15 +5369,15 @@
 }
 
 .IncodeCameraFrame.IncodeCameraFrameHorizontal {
-  aspect-ratio: 35 / 22;
   width: 100%;
-  max-width: 640px;
+  max-width: var(--id-capture-frame-horizontal-max-width);
+  aspect-ratio: 35 / 22;
 }
 
 .IncodeCameraFrame.IncodeCameraFrameVertical {
-  aspect-ratio: 22 / 35;
   width: 100%;
-  max-width: 274px;
+  max-width: var(--id-capture-frame-vertical-max-width);
+  aspect-ratio: 22 / 35;
 }
 
 .IncodeCameraFrame.IncodeCameraFrameIdle {
@@ -5480,7 +5482,7 @@
 }
 
 .IncodeErrorContent {
-  background-color: var(--color-white, #fff);
+  background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));
 }
 
 .IncodeErrorContent .IncodeModalDialog {
@@ -5522,6 +5524,7 @@
 }
 
 .IncodeErrorContent .IncodeErrorContentTitle {
+  max-width: var(--incode-form-max-w);
   text-align: center;
   font-family: var(--typography-headline-family);
   font-size: var(--typography-headline-h2-size);
@@ -5532,6 +5535,7 @@
 }
 
 .IncodeErrorContent .IncodeErrorContentDescription {
+  max-width: var(--incode-form-max-w);
   text-align: center;
   font-family: var(--typography-headline-family);
   font-size: var(--typography-headline-h5-size);
@@ -5559,12 +5563,12 @@
 
 .IncodeIdExpiredContent {
   padding-inline: var(--spacing-20, var(--spacing-20, 20px));
+  max-height: var(--incode-page-max-h);
+  max-width: var(--incode-page-max-w);
   flex-direction: column;
   flex: 1;
   justify-content: center;
   align-items: center;
-  max-width: 800px;
-  max-height: 840px;
   margin: auto;
   display: flex;
 }
@@ -5579,12 +5583,14 @@
 }
 
 .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);
+  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));
   text-align: center;
-  max-width: 350px;
+  max-width: var(--incode-form-max-w);
 }
 
 .IncodeIdExpiredAttemptsCounter {
@@ -5610,9 +5616,9 @@
 
 .IncodeProgressBar {
   height: var(--spacing-8, var(--spacing-8, 8px));
+  width: var(--progress-bar-width);
   border-radius: var(--radius-x-small, var(--border-radius-x-small));
   background-color: var(--color-surface-neutral-100, var(--surface-neutral-100));
-  width: 143px;
   overflow: hidden;
 }
 
@@ -5990,18 +5996,18 @@
   left: var(--spacing-0, var(--spacing-none, 0px));
   z-index: 10;
   margin-top: var(--spacing-8, var(--spacing-8, 8px));
-  max-height: 200px;
+  max-height: var(--autocomplete-list-max-h);
   padding: var(--spacing-0, var(--spacing-none, 0px));
   border-radius: var(--radius-small, var(--border-radius-small));
   border-style: var(--tw-border-style);
   border-width: 1px;
   border-color: var(--color-dropdown-border-default, var(--dropdown-border-default));
   background-color: var(--color-dropdown-surface-default, var(--dropdown-surface-default));
+  box-shadow: var(--dropdown-box-shadow);
   list-style-type: none;
   position: absolute;
   top: 100%;
   overflow-y: auto;
-  box-shadow: 0 2px 8px #00000026;
 }
 
 .IncodeAddressAutocomplete .IncodeAddressAutocompleteSuggestion {
@@ -6273,23 +6279,30 @@
 }
 
 .IncodeComponent .IncodeBoldWithArrowIcon {
-  margin-inline: .2em;
-  width: .8em;
-  height: .8em;
-  margin-bottom: .125rem;
+  vertical-align: middle;
+  height: var(--inline-arrow-icon-size);
+  width: var(--inline-arrow-icon-size);
+  margin-inline: var(--inline-arrow-icon-margin-x);
   display: inline-block;
 }
 
 .IncodeDeniedPage .IncodePageInner {
-  max-width: 468px;
-  padding-bottom: var(--spacing-24, var(--spacing-24, 24px));
+  max-width: var(--incode-form-max-w);
 }
 
-.IncodeDeniedPage .IncodeTitle {
+@media (min-width: 48rem) {
+  .IncodeDeniedPage .IncodePageInner {
+    padding-inline: var(--spacing-0, var(--spacing-none, 0px));
+    padding-top: var(--spacing-0, var(--spacing-none, 0px));
+    padding-bottom: var(--spacing-24, var(--spacing-24, 24px));
+  }
+}
+
+.IncodeDeniedPage .IncodePageInner .IncodeTitle {
   text-align: left;
 }
 
-.IncodeDeniedContainer {
+.IncodeDeniedPage .IncodePageInner .IncodeDeniedContainer {
   justify-content: center;
   align-items: center;
   gap: var(--spacing-24, var(--spacing-24, 24px));
@@ -6298,29 +6311,40 @@
   display: flex;
 }
 
-.IncodeDeniedInstructionsContainer {
+@media (min-width: 48rem) {
+  .IncodeDeniedPage .IncodePageInner .IncodeDeniedContainer {
+    margin-bottom: var(--spacing-24, var(--spacing-24, 24px));
+  }
+}
+
+.IncodeDeniedPage .IncodePageInner .IncodeDeniedInstructionsContainer {
   width: 100%;
-  max-width: 420px;
 }
 
-.IncodeDeniedStepsList {
-  gap: var(--spacing-16, var(--spacing-16, 16px));
+.IncodeDeniedPage .IncodePageInner .IncodeDeniedStepsList {
+  gap: var(--spacing-12, var(--spacing-12, 12px));
   flex-direction: column;
   display: flex;
 }
 
-.IncodeDeniedStepItem {
+@media (min-width: 48rem) {
+  .IncodeDeniedPage .IncodePageInner .IncodeDeniedStepsList {
+    gap: var(--spacing-16, var(--spacing-16, 16px));
+  }
+}
+
+.IncodeDeniedPage .IncodePageInner .IncodeDeniedStepItem {
   align-items: center;
   gap: var(--spacing-12, var(--spacing-12, 12px));
   width: 100%;
   display: flex;
 }
 
-.IncodeDeniedStepIconContainer {
+.IncodeDeniedPage .IncodePageInner .IncodeDeniedStepIconContainer {
   flex-shrink: 0;
 }
 
-.IncodeDeniedStepTextContainer {
+.IncodeDeniedPage .IncodePageInner .IncodeDeniedStepTextContainer {
   align-items: center;
   gap: var(--spacing-4, var(--spacing-4, 4px));
   flex-wrap: wrap;
@@ -6328,30 +6352,28 @@
   display: flex;
 }
 
-.IncodeDeniedStepTextContainer .IncodeDeniedStepTextSilent {
+.IncodeDeniedPage .IncodePageInner .IncodeDeniedStepTextContainer .IncodeDeniedStepTextSilent {
   color: var(--color-text-body-secondary, var(--text-body-500-secondary));
 }
 
-.IncodeDeniedStepTextContainer .IncodeDeniedStepSubtext {
+.IncodeDeniedPage .IncodePageInner .IncodeDeniedStepTextContainer .IncodeDeniedStepSubtext {
   display: inline;
 }
 
-.IncodeDeniedStepText {
-  font-size: var(--text-18, var(--primitive-typography-size-18));
-  --tw-leading: 114%;
-  --tw-font-weight: var(--font-weight-normal, 400);
-  line-height: 114%;
-  font-weight: var(--font-weight-normal, 400);
-  --tw-tracking: -.5px;
-  letter-spacing: -.5px;
+.IncodeDeniedPage .IncodePageInner .IncodeDeniedStepText {
+  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-500-secondary));
 }
 
-.IncodeDeniedStepsList strong {
+.IncodeDeniedPage .IncodePageInner .IncodeDeniedStepsList strong {
   color: var(--color-text-body-primary, var(--text-body-800-primary));
 }
 
-.IncodeDeniedActions {
+.IncodeDeniedPage .IncodePageInner .IncodeDeniedActions {
   flex-direction: column;
   align-items: center;
   width: 100%;
@@ -6359,7 +6381,7 @@
   display: flex;
 }
 
-.IncodeSrOnly {
+.IncodeDeniedPage .IncodePageInner .IncodeSrOnly {
   clip-path: inset(50%);
   white-space: nowrap;
   border-width: 0;
@@ -6377,31 +6399,36 @@
   display: flex;
 }
 
-.IncodeDeniedDesktopStep {
+.IncodeDeniedDesktopContainer .IncodeDeniedDesktopStep {
   align-items: center;
   gap: var(--spacing-8, var(--spacing-8, 8px));
   display: flex;
 }
 
-.IncodeDeniedDesktopStepNumberColumn {
+.IncodeDeniedDesktopContainer .IncodeDeniedDesktopStepNumberColumn {
   flex-direction: column;
   align-items: center;
   display: flex;
   position: relative;
 }
 
-.IncodeDeniedDesktopStepNumberColumn > .IncodeNumberedStepConnector {
+.IncodeDeniedDesktopContainer .IncodeDeniedDesktopStepNumberColumn > .IncodeNumberedStepConnector {
   position: absolute;
   top: 100%;
 }
 
+.IncodeDeniedDesktopContainer .IncodeNumberedStepConnector {
+  height: var(--spacing-8, var(--spacing-8, 8px));
+  width: var(--spacing-2, var(--spacing-2, 2px));
+  background-color: var(--color-border-neutral-100, var(--border-neutral-100));
+}
+
 .IncodeLearnMorePage .IncodePageContent {
-  max-width: 420px;
-  padding-bottom: var(--spacing-24, var(--spacing-24, 24px));
+  max-width: var(--incode-form-max-w);
   margin-inline: auto;
 }
 
-.IncodeLearnMoreContainer {
+.IncodeLearnMorePage .IncodePageContent .IncodeLearnMoreContainer {
   justify-content: center;
   align-items: center;
   gap: var(--spacing-32, var(--spacing-32, 32px));
@@ -6410,36 +6437,36 @@
   display: flex;
 }
 
-.IncodeLearnMoreTitleContainer {
+.IncodeLearnMorePage .IncodePageContent .IncodeLearnMoreTitleContainer {
   justify-content: center;
   align-items: center;
-  gap: var(--spacing-12, var(--spacing-12, 12px));
+  gap: var(--spacing-16, var(--spacing-16, 16px));
   flex-direction: column;
   width: 100%;
   display: flex;
 }
 
-.IncodeLearnMoreInstructionsContainer {
+.IncodeLearnMorePage .IncodePageContent .IncodeLearnMoreInstructionsContainer {
   align-items: center;
   gap: var(--spacing-24, var(--spacing-24, 24px));
   flex-direction: column;
   display: flex;
 }
 
-.IncodeLearnMoreInstruction {
+.IncodeLearnMorePage .IncodePageContent .IncodeLearnMoreInstruction {
   align-items: center;
   gap: var(--spacing-12, var(--spacing-12, 12px));
   width: 100%;
   display: flex;
 }
 
-.IncodeLearnMoreInstructionIcon {
+.IncodeLearnMorePage .IncodePageContent .IncodeLearnMoreInstructionIcon {
   height: var(--spacing-32, var(--spacing-32, 32px));
   width: var(--spacing-32, var(--spacing-32, 32px));
   color: var(--color-icon-neutral-500, var(--icon-neutral-500));
 }
 
-.IncodeLearnMoreActions {
+.IncodeLearnMorePage .IncodePageContent .IncodeLearnMoreActions {
   align-items: center;
   gap: var(--spacing-12, var(--spacing-12, 12px));
   flex-direction: column;
@@ -6449,6 +6476,10 @@
 }
 
 .IncodeNumberedStep {
+  height: var(--spacing-40, var(--spacing-40, 40px));
+  min-height: var(--spacing-40, var(--spacing-40, 40px));
+  width: var(--spacing-40, var(--spacing-40, 40px));
+  min-width: var(--spacing-40, var(--spacing-40, 40px));
   border-radius: var(--radius-small, var(--border-radius-small));
   border-style: var(--tw-border-style);
   --tw-border-style: solid;
@@ -6458,26 +6489,18 @@
   background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));
   justify-content: center;
   align-items: center;
-  width: 46px;
-  min-width: 46px;
-  height: 46px;
-  min-height: 46px;
   display: flex;
 }
 
-.IncodeNumberedStepText {
-  font-size: var(--text-18, var(--primitive-typography-size-18));
-  --tw-font-weight: var(--font-weight-semibold, var(--primitive-typography-weight-semibold));
-  font-weight: var(--font-weight-semibold, var(--primitive-typography-weight-semibold));
+.IncodeNumberedStep .IncodeNumberedStepText {
+  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-800-primary));
 }
 
-.IncodeNumberedStepConnector {
-  height: var(--spacing-12, var(--spacing-12, 12px));
-  width: var(--spacing-2, var(--spacing-2, 2px));
-  background-color: var(--color-border-neutral-100, var(--border-neutral-100));
-}
-
 .IncodePermissionsBottomSheet {
   padding-inline: var(--spacing-12, var(--spacing-12, 12px));
 }
@@ -6530,13 +6553,15 @@
   text-align: center;
   z-index: 999999999;
   box-sizing: border-box;
+  padding: var(--landscape-blocker-padding);
+  font-weight: var(--landscape-blocker-font-weight);
+  width: 100dvw;
+  height: 100dvh;
+  width: var(--landscape-blocker-viewport-width-fallback);
+  height: var(--landscape-blocker-viewport-height-fallback);
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  width: 100vw;
-  height: 100vh;
-  padding: 50px;
-  font-weight: 700;
   display: flex;
   position: fixed;
   inset: 0;
@@ -6544,24 +6569,24 @@
 }
 
 .IncodeLandscapeBlocker-icon {
-  height: 90px;
-  margin-bottom: 25px;
+  height: var(--landscape-blocker-icon-height);
+  margin-bottom: var(--landscape-blocker-icon-margin-bottom);
 }
 
 .IncodeLandscapeBlocker-text {
+  font-size: var(--landscape-blocker-text-font-size);
   margin: 0;
-  font-size: 22px;
   display: block;
 }
 
 .IncodeVerificationOptionCardList {
-  flex-direction: column;
   width: 100%;
-  max-width: 26.25rem;
+  max-width: var(--incode-form-max-w);
+  flex-direction: column;
   display: flex;
 }
 
-.IncodeVerificationOptionCard {
+.IncodeVerificationOptionCardList .IncodeVerificationOptionCard {
   cursor: pointer;
   touch-action: manipulation;
   align-items: flex-start;
@@ -6576,63 +6601,62 @@
   width: 100%;
   padding-inline: var(--spacing-12, var(--spacing-12, 12px));
   padding-block: var(--spacing-8, var(--spacing-8, 8px));
-  max-width: 26.25rem;
+  max-width: var(--incode-form-max-w);
   display: flex;
   position: relative;
 }
 
-.IncodeVerificationOptionCard:first-child {
+.IncodeVerificationOptionCardList .IncodeVerificationOptionCard:first-child {
   border-top-left-radius: var(--radius-medium, var(--border-radius-medium));
   border-top-right-radius: var(--radius-medium, var(--border-radius-medium));
 }
 
-.IncodeVerificationOptionCard:last-child {
+.IncodeVerificationOptionCardList .IncodeVerificationOptionCard:last-child {
   border-bottom-right-radius: var(--radius-medium, var(--border-radius-medium));
   border-bottom-left-radius: var(--radius-medium, var(--border-radius-medium));
 }
 
-.IncodeVerificationOptionCard:only-child {
+.IncodeVerificationOptionCardList .IncodeVerificationOptionCard:only-child {
   border-radius: var(--radius-medium, var(--border-radius-medium));
 }
 
-.IncodeVerificationOptionCard + .IncodeVerificationOptionCard {
+.IncodeVerificationOptionCardList .IncodeVerificationOptionCard + :is(.IncodeVerificationOptionCardList .IncodeVerificationOptionCard) {
   border-top-style: var(--tw-border-style);
   border-top-width: var(--border-width-none, var(--primitive-border-width-0));
 }
 
-.IncodeVerificationOptionCard:focus-visible {
+.IncodeVerificationOptionCardList .IncodeVerificationOptionCard:focus-visible {
   z-index: 1;
-  outline-width: 1px;
   outline-style: var(--tw-outline-style);
   outline-offset: 2px;
   outline-width: 2px;
   outline-color: var(--color-border-status-focus, var(--border-status-focus));
 }
 
-.IncodeVerificationOptionCard:disabled {
+.IncodeVerificationOptionCardList .IncodeVerificationOptionCard:disabled {
   cursor: not-allowed;
   opacity: .6;
 }
 
-.IncodeVerificationOptionCard .IncodeVerificationOptionCardIcon {
+.IncodeVerificationOptionCardList .IncodeVerificationOptionCard .IncodeVerificationOptionCardIcon {
+  width: var(--id-capture-verification-option-card-size);
+  height: var(--id-capture-verification-option-card-size);
   flex-shrink: 0;
   justify-content: center;
   align-items: center;
-  width: 3.75rem;
-  height: 3.75rem;
   display: flex;
 }
 
-.IncodeVerificationOptionCard .IncodeVerificationOptionCardIcon svg {
+.IncodeVerificationOptionCardList .IncodeVerificationOptionCard .IncodeVerificationOptionCardIcon svg {
   width: 100%;
   height: auto;
 }
 
-.IncodeVerificationOptionCard .IncodeVerificationOptionCardIcon .IncodeIdCardIconFill, .IncodeVerificationOptionCard .IncodeVerificationOptionCardIcon .IncodeUploadIdIconFill, .IncodeVerificationOptionCard .IncodeVerificationOptionCardIcon .IncodePassportIconFill, .IncodeVerificationOptionCard .IncodeVerificationOptionCardIcon .IncodeDeviceWalletsIconFill, .IncodeVerificationOptionCard .IncodeVerificationOptionCardIcon .IncodeDigitalIdIconFill {
+.IncodeVerificationOptionCardList .IncodeVerificationOptionCard .IncodeVerificationOptionCardIcon .IncodeIdCardIconFill, .IncodeVerificationOptionCardList .IncodeVerificationOptionCard .IncodeVerificationOptionCardIcon .IncodeUploadIdIconFill, .IncodeVerificationOptionCardList .IncodeVerificationOptionCard .IncodeVerificationOptionCardIcon .IncodePassportIconFill, .IncodeVerificationOptionCardList .IncodeVerificationOptionCard .IncodeVerificationOptionCardIcon .IncodeDeviceWalletsIconFill, .IncodeVerificationOptionCardList .IncodeVerificationOptionCard .IncodeVerificationOptionCardIcon .IncodeDigitalIdIconFill {
   fill: var(--color-surface-brand-500, var(--surface-brand-500-static));
 }
 
-.IncodeVerificationOptionCard .IncodeVerificationOptionCardTag {
+.IncodeVerificationOptionCardList .IncodeVerificationOptionCard .IncodeVerificationOptionCardTag {
   align-items: center;
   gap: var(--spacing-2, var(--spacing-2, 2px));
   border-radius: var(--radius-small, var(--border-radius-small));
@@ -6649,14 +6673,14 @@
   display: flex;
 }
 
-.IncodeVerificationOptionCard .IncodeVerificationOptionCardTitleTagContainer {
+.IncodeVerificationOptionCardList .IncodeVerificationOptionCard .IncodeVerificationOptionCardTitleTagContainer {
   gap: var(--spacing-8, var(--spacing-8, 8px));
   color: var(--color-text-body-primary, var(--text-body-800-primary));
   flex-direction: column;
   display: flex;
 }
 
-.IncodeVerificationOptionCard .IncodeVerificationOptionCardTitle {
+.IncodeVerificationOptionCardList .IncodeVerificationOptionCard .IncodeVerificationOptionCardTitle {
   font-family: var(--typography-headline-family);
   font-size: var(--typography-headline-h5-size);
   font-weight: var(--typography-headline-h5-weight);
@@ -6664,7 +6688,7 @@
   letter-spacing: var(--typography-headline-h5-letter-spacing);
 }
 
-.IncodeVerificationOptionCard .IncodeVerificationOptionCardContent {
+.IncodeVerificationOptionCardList .IncodeVerificationOptionCard .IncodeVerificationOptionCardContent {
   flex: 1;
   justify-content: space-between;
   align-items: center;
@@ -6672,7 +6696,7 @@
   display: flex;
 }
 
-.IncodeVerificationOptionCard .IncodeVerificationOptionCardContent .IncodeVerificationOptionCardArrow {
+.IncodeVerificationOptionCardList .IncodeVerificationOptionCard .IncodeVerificationOptionCardContent .IncodeVerificationOptionCardArrow {
   color: var(--color-icon-neutral-500, var(--icon-neutral-500));
   flex-shrink: 0;
   justify-content: center;
@@ -6725,11 +6749,6 @@
   initial-value: solid;
 }
 
-@property --tw-tracking {
-  syntax: "*";
-  inherits: false
-}
-
 @property --tw-ease {
   syntax: "*";
   inherits: false