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

package/dist/{Trans-BnPbhF6c.js → Trans-CVsR_Mce.js}

@@ -1,4 +1,4 @@
-import { u as s, b as u } from "./incodeModule-7zNv7YeX.js";
+import { u as s, b as u } from "./incodeModule-C-yBwl3V.js";
 import { k as l } from "./vendor-preact-DP-hbKuj.js";
 const f = ({ class: t }) => /* @__PURE__ */ s(
   "svg",

package/dist/authentication/authentication.es.js

@@ -1,9 +1,9 @@
-import { r as a, u as e, I as o, a as l } from "../incodeModule-7zNv7YeX.js";
+import { r as a, u as e, I as o, a as l } from "../incodeModule-C-yBwl3V.js";
 import { createAuthenticationManager as m } from "@incodetech/core/authentication";
 import "../vendor-preact-DP-hbKuj.js";
 import "@incodetech/core";
-import { P as p } from "../baseTutorial-By7hI83C.js";
-import { T as c, C as d } from "../tutorial-CJs2GHe1.js";
+import { P as p } from "../baseTutorial-DmtD23I-.js";
+import { T as c, C as d } from "../tutorial-DkmCNA8p.js";
 const f = ({
   config: r,
   authHint: n,

package/dist/base.css

@@ -54,7 +54,7 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
-  color: var(--text-body-primary);
+  color: var(--text-body-800-primary);
   width: 100%;
   height: 100%;
   margin: 0;
@@ -218,7 +218,7 @@
 .IncodeTransBold {
   --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));
 }
 .IncodeTransArrow {
   vertical-align: middle;
@@ -345,14 +345,14 @@
 }
 .IncodeButton.IncodeButtonLink {
   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;
   padding: var(--spacing-0, var(--spacing-none, 0px));
-  font-family: var(--Button-family, "DM Sans");
-  font-size: var(--Button-M-Underlined-font-size, 18px);
-  font-weight: 500;
-  line-height: var(--Button-M-Underlined-line-height, 18px);
-  letter-spacing: var(--Button-M-Underlined-letter-spacing, 0);
+  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);
   -webkit-text-decoration-skip-ink: none;
   text-decoration-skip-ink: none;
   color: var(--color-button-tertiary-text-default, var(--button-tertiary-text-default));
@@ -486,7 +486,7 @@
 }
 .IncodeCheckboxHelperText {
   margin: var(--spacing-0, var(--spacing-none, 0px));
-  color: var(--color-text-body-secondary, var(--text-body-secondary));
+  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);
@@ -498,15 +498,11 @@
   max-width: 420px;
   height: 56px;
   min-height: 56px;
-  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)));
-  --tw-font-weight: var(--font-weight-normal, 400);
-  font-weight: var(--font-weight-normal, 400);
+  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);
   background-color: var(--color-input-surface-default, var(--input-surface-default));
   color: var(--color-input-text-field-default, var(--input-text-field-default));
   border-radius: var(--radius-input, var(--input-border-radius));
@@ -525,7 +521,6 @@
 }
 .IncodeInput::placeholder {
   color: var(--color-input-text-field-placeholder, var(--input-text-field-placeholder));
-  font-weight: 500;
 }
 .IncodeInput:disabled {
   border-color: var(--color-input-border-disabled, var(--input-border-disabled));
@@ -600,7 +595,7 @@
   --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
   translate: var(--tw-translate-x) var(--tw-translate-y);
   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;
   cursor: pointer;
   padding: var(--spacing-0, var(--spacing-none, 0px));
@@ -689,13 +684,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;
@@ -749,7 +742,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;
@@ -791,19 +784,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;
@@ -982,7 +973,7 @@
   font-size: var(--text-18, var(--primitive-typography-size-18));
   --tw-font-weight: var(--font-weight-normal, 400);
   font-weight: var(--font-weight-normal, 400);
-  color: var(--color-text-body-tertiary, var(--text-body-tertiary));
+  color: var(--color-text-body-tertiary, var(--text-body-300-tertiary));
 }
 .IncodeOtpInputResendText {
   margin: var(--spacing-0, var(--spacing-none, 0px));
@@ -990,13 +981,13 @@
   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));
 }
 .IncodeOtpInputLink {
   margin: 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;
   padding: var(--spacing-0, var(--spacing-none, 0px));
   font-size: var(--text-18, var(--primitive-typography-size-18));
@@ -1013,7 +1004,7 @@
 }
 .IncodeOtpInputLink:disabled {
   cursor: not-allowed;
-  color: var(--color-text-body-tertiary, var(--text-body-tertiary));
+  color: var(--color-text-body-tertiary, var(--text-body-300-tertiary));
 }
 .IncodePageContainer {
   background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));
@@ -2104,12 +2095,14 @@
 }
 .IncodePageContainer .IncodePageTitle {
   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);
-  color: var(--color-text-body-primary, var(--text-body-primary));
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
+  --tw-outline-style: none;
+  outline-style: none;
 }
 .IncodePageContainer .IncodePageSubtitle {
   text-align: center;
@@ -2121,7 +2114,7 @@
   font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
   --tw-tracking: -.5px;
   letter-spacing: -.5px;
-  color: var(--color-text-body-secondary, var(--text-body-secondary));
+  color: var(--color-text-body-secondary, var(--text-body-500-secondary));
 }
 .IncodePageContainer .IncodePageContent {
   flex-direction: column;
@@ -2145,7 +2138,7 @@
   }
 }
 .IncodeFillWithPrimary {
-  fill: var(--color-text-body-primary, var(--text-body-primary));
+  fill: var(--color-text-body-primary, var(--text-body-800-primary));
 }
 .IncodeComponent .IncodeTitle {
   text-align: center;
@@ -2157,31 +2150,33 @@
   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));
+  --tw-outline-style: none;
+  outline-style: none;
 }
 .IncodeComponent .IncodeTypographyH1 {
-  font-family: var(--primitive-typography-family-dm-sans);
+  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);
 }
 .IncodeComponent .IncodeTypographyH3 {
-  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);
 }
 .IncodeComponent .IncodeTypographyH4 {
-  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);
 }
 .IncodeComponent .IncodeTypographyH5 {
-  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);
@@ -2380,7 +2375,7 @@
   font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
   --tw-tracking: -.5px;
   letter-spacing: -.5px;
-  color: var(--color-text-body-secondary, var(--text-body-secondary));
+  color: var(--color-text-body-secondary, var(--text-body-500-secondary));
 }
 .IncodeBaseTutorialButtonContainer {
   padding-inline: var(--spacing-8, var(--spacing-8, 8px));
@@ -2483,10 +2478,10 @@
 .IncodeModal .IncodeModalCloseButton {
   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;
   padding: var(--spacing-0, var(--spacing-none, 0px));
-  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;
@@ -2514,11 +2509,11 @@
   justify-content: center;
   align-items: center;
   gap: var(--spacing-4, var(--spacing-4, 4px));
-  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-0-static, var(--text-body-0-static));
   display: flex;
@@ -2532,7 +2527,7 @@
   margin-top: var(--spacing-12, var(--spacing-12, 12px));
   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: 64px;
   height: 64px;
@@ -2607,7 +2602,7 @@
   opacity: 0;
 }
 .IncodeCameraOverlayHeader .IncodeCameraOverlayHeaderTitle {
-  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);
@@ -2616,16 +2611,16 @@
   text-align: center;
 }
 .IncodeCameraOverlayHeader .IncodeCameraOverlayHeaderSubtitle {
-  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));
   text-align: center;
 }
 .IncodeCameraFrame {
-  --frame-border-color: var(--border-neutral-0);
+  --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));
@@ -2661,13 +2656,13 @@
   max-width: 274px;
 }
 .IncodeCameraFrame.IncodeCameraFrameIdle {
-  --frame-border-color: var(--border-neutral-0);
+  --frame-border-color: var(--border-neutral-100);
 }
 .IncodeCameraFrame.IncodeCameraFrameCapturing, .IncodeCameraFrame.IncodeCameraFrameFocus {
   --frame-border-color: var(--border-status-focus);
 }
 .IncodeCameraFrame.IncodeCameraFrameAnalyzing, .IncodeCameraFrame.IncodeCameraFrameSuccess {
-  --frame-border-color: var(--border-status-positive);
+  --frame-border-color: var(--border-status-positive-static);
 }
 .IncodeCameraFrame.IncodeCameraFrameError {
   --frame-border-color: var(--border-status-negative);
@@ -2677,7 +2672,7 @@
   background-color: var(--color-countdown-surface-default, var(--countdown-surface-default));
   padding-inline: var(--spacing-32, var(--spacing-32, 32px));
   padding-block: var(--spacing-20, var(--spacing-20, 20px));
-  font-family: var(--primitive-typography-family-rethink-sans);
+  font-family: var(--typography-display-family);
   font-size: var(--typography-display-d2-size);
   font-weight: var(--typography-display-d2-weight);
   line-height: var(--typography-display-d2-line-height);
@@ -2716,21 +2711,21 @@
   display: flex;
 }
 .IncodeErrorContent .IncodeErrorContentTitle {
-  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));
 }
 .IncodeErrorContent .IncodeErrorContentDescription {
   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));
 }
 .IncodeErrorContent .IncodeErrorContentAttemptsContainer {
   flex-direction: column;
@@ -2739,12 +2734,12 @@
   display: flex;
 }
 .IncodeErrorContent .IncodeErrorContentAttemptsText {
-  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));
 }
 .IncodeProgressBarContainer {
   flex-direction: column;
@@ -2759,7 +2754,7 @@
   overflow: hidden;
 }
 .IncodeProgressBar .IncodeProgressBarFill {
-  background-color: var(--color-icon-status-positive, var(--icon-status-positive-static));
+  background-color: var(--color-icon-status-positive, var(--icon-status-positive));
   height: 100%;
   transition-property: width;
   transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));
@@ -2772,7 +2767,7 @@
 }
 .IncodeProgressBarLabel {
   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);
@@ -2789,7 +2784,7 @@
 .IncodeBoldWithArrow {
   --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));
   display: inline;
 }
 .IncodeComponent .IncodeBoldWithArrowIcon {
@@ -2839,7 +2834,7 @@
   display: flex;
 }
 .IncodeDeniedStepTextContainer .IncodeDeniedStepTextSilent {
-  color: var(--color-text-body-secondary, var(--text-body-secondary));
+  color: var(--color-text-body-secondary, var(--text-body-500-secondary));
 }
 .IncodeDeniedStepTextContainer .IncodeDeniedStepSubtext {
   display: inline;
@@ -2852,10 +2847,10 @@
   font-weight: var(--font-weight-normal, 400);
   --tw-tracking: -.5px;
   letter-spacing: -.5px;
-  color: var(--color-text-body-secondary, var(--text-body-secondary));
+  color: var(--color-text-body-secondary, var(--text-body-500-secondary));
 }
 .IncodeDeniedStepsList strong {
-  color: var(--color-text-body-primary, var(--text-body-primary));
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
 }
 .IncodeDeniedActions {
   flex-direction: column;
@@ -2864,7 +2859,19 @@
   margin-top: auto;
   display: flex;
 }
+.IncodeSrOnly {
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border-width: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
+}
 .IncodeDeniedDesktopContainer {
+  gap: var(--spacing-8, var(--spacing-8, 8px));
   flex-direction: column;
   display: flex;
 }
@@ -2873,6 +2880,16 @@
   gap: var(--spacing-8, var(--spacing-8, 8px));
   display: flex;
 }
+.IncodeDeniedDesktopStepNumberColumn {
+  flex-direction: column;
+  align-items: center;
+  display: flex;
+  position: relative;
+}
+.IncodeDeniedDesktopStepNumberColumn > .IncodeNumberedStepConnector {
+  position: absolute;
+  top: 100%;
+}
 .IncodeLearnMorePage .IncodePageContent {
   max-width: 420px;
   margin-inline: auto;
@@ -2938,10 +2955,9 @@
   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));
-  color: var(--color-text-body-primary, var(--text-body-primary));
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
 }
 .IncodeNumberedStepConnector {
-  margin-left: var(--spacing-24, var(--spacing-24, 24px));
   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));
@@ -2982,10 +2998,10 @@
   display: flex;
 }
 .IncodePermissionsModalTitle {
-  color: var(--color-text-body-primary, var(--text-body-primary));
+  color: var(--color-text-body-primary, var(--text-body-800-primary));
 }
 .IncodePermissionsModalSubtitle {
-  color: var(--color-text-body-secondary, var(--text-body-secondary));
+  color: var(--color-text-body-secondary, var(--text-body-500-secondary));
 }
 .IncodePermissionsModalActions {
   align-items: center;