@incodetech/web 0.0.0-dev-20260313-82ba0ca → 0.0.0-dev-20260313-2675d26

package/dist/flow/styles.css

@@ -5133,156 +5133,164 @@
 
 .IncodeEkycPage {
   max-width: 480px;
-  margin: 0 auto;
+  margin-inline: auto;
 }
 
-.IncodeEkyc__form {
+.IncodeEkycForm {
+  margin-top: var(--spacing-32, var(--spacing-32, 32px));
+  gap: var(--spacing-16, var(--spacing-16, 16px));
   flex-direction: column;
-  gap: 16px;
   width: 100%;
-  margin-top: 32px;
   display: flex;
 }
 
+.IncodeEkycForm .IncodeInputComposed, .IncodeEkycForm .IncodeDropdownComposed, .IncodeEkycForm .IncodeDateInputComposed, .IncodeEkycForm .IncodeAddressAutocomplete {
+  margin-inline: auto;
+}
+
+.IncodeEkycForm .IncodeFormField {
+  margin-bottom: var(--spacing-0, var(--spacing-none, 0px));
+}
+
 @media (min-width: 768px) {
   .IncodePageContainer.IncodeEkycPage {
     height: 100dvh;
     max-height: none;
-    margin-top: 0;
+    margin-top: var(--spacing-0, var(--spacing-none, 0px));
   }
 
   .IncodeEkycPage .IncodePageInner {
     height: 100%;
   }
 
-  .IncodePageContainer.IncodeEkycPage--scrollable {
+  .IncodePageContainer.IncodeEkycPageScrollable {
     max-width: 500px;
   }
 
   .IncodeEkycPage .IncodePageContent {
-    min-height: 0;
+    min-height: var(--spacing-0, var(--spacing-none, 0px));
   }
 
-  .IncodeEkycPage .IncodeEkyc__form {
+  .IncodeEkycPage .IncodeEkycForm {
+    min-height: var(--spacing-0, var(--spacing-none, 0px));
+    padding-bottom: var(--spacing-8, var(--spacing-8, 8px));
     flex: 1;
-    min-height: 0;
-    padding-bottom: 8px;
     overflow-y: auto;
   }
 
-  .IncodeEkycPage--scrollable .IncodeEkyc__form {
-    margin-left: 8px;
+  .IncodeEkycPageScrollable .IncodeEkycForm {
+    margin-left: var(--spacing-8, var(--spacing-8, 8px));
   }
 
-  .IncodeEkyc__footer {
+  .IncodeEkycFooter {
     flex-shrink: 0;
   }
 }
 
-.IncodeEkyc__form .IncodeInputComposed, .IncodeEkyc__form .IncodeDropdownComposed, .IncodeEkyc__form .IncodeDateInputComposed, .IncodeEkyc__form .IncodeAddressAutocomplete {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.IncodeEkyc__form .IncodeFormField {
-  margin-bottom: 0;
-}
-
-.IncodeEkycPage .IncodeEkyc__sectionHeader {
+.IncodeEkycPage .IncodeEkycSectionHeader {
   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-800-primary));
+  --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-input-text-label-default, var(--input-text-label-default));
+  margin-inline: auto;
+  margin-top: var(--spacing-16, var(--spacing-16, 16px));
   width: 100%;
   max-width: 420px;
-  margin: 16px auto 0;
-  padding: 12px 0;
-  font-weight: 700;
+  padding-block: var(--spacing-12, var(--spacing-12, 12px));
 }
 
-.IncodeEkyc__radioGroup {
+.IncodeEkycRadioGroup {
   width: 100%;
   max-width: 420px;
-  margin-left: auto;
-  margin-right: auto;
+  margin-inline: auto;
 }
 
-.IncodeEkyc__radioLabel {
-  color: var(--input-text-label-default, #262831);
-  margin-bottom: 8px;
-  font-size: 14px;
-  font-weight: 700;
-  line-height: 14px;
+.IncodeEkycRadioLabel {
+  margin-bottom: var(--spacing-8, var(--spacing-8, 8px));
+  font-size: var(--text-14, var(--primitive-typography-size-14));
+  --tw-leading: 1;
+  --tw-font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
+  line-height: 1;
+  font-weight: var(--font-weight-bold, var(--primitive-typography-weight-bold));
+  color: var(--color-input-text-label-default, var(--input-text-label-default));
   display: block;
 }
 
-.IncodeEkyc__radioOptions {
-  gap: 24px;
+.IncodeEkycRadioOptions {
+  gap: var(--spacing-24, var(--spacing-24, 24px));
   display: flex;
 }
 
-.IncodeEkyc__radioOption {
-  color: var(--radio-button-text-default, var(--text-body-800-primary, #262831));
+.IncodeEkycRadioOption {
   cursor: pointer;
   align-items: center;
-  gap: 12px;
-  font-size: 16px;
-  font-weight: 500;
-  line-height: 16px;
+  gap: var(--spacing-12, var(--spacing-12, 12px));
+  font-size: var(--text-16, var(--primitive-typography-size-16));
+  --tw-leading: 1;
+  --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
+  line-height: 1;
+  font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
+  color: var(--color-radio-button-text-default, var(--radio-button-text-default));
   display: flex;
 }
 
-.IncodeEkyc__radioOption input[type="radio"] {
-  appearance: none;
-  border: 2px solid var(--radio-button-border-default, #82879a);
-  background: var(--radio-button-surface-default, #fcfcfd);
+.IncodeEkycRadioOption input[type="radio"] {
+  margin: var(--spacing-0, var(--spacing-none, 0px));
   cursor: pointer;
-  border-radius: 9999px;
+  border-radius: var(--radius-full, var(--border-radius-full));
+  border-style: var(--tw-border-style);
+  border-width: var(--border-width-bold, var(--primitive-border-width-2));
+  border-color: var(--color-radio-button-border-default, var(--radio-button-border-default));
+  background-color: var(--color-radio-button-surface-default, var(--radio-button-surface-default));
+  appearance: none;
   width: 28px;
   min-width: 28px;
   height: 28px;
   min-height: 28px;
-  margin: 0;
   position: relative;
 }
 
-.IncodeEkyc__radioOption input[type="radio"]:after {
-  content: "";
+.IncodeEkycRadioOption input[type="radio"]:after {
+  inset: var(--spacing-0, var(--spacing-none, 0px));
+  border-radius: var(--radius-full, var(--border-radius-full));
   opacity: 0;
-  background: #fff;
-  border-radius: 9999px;
+  content: "";
+  background-color: var(--color-radio-button-icon-default, var(--radio-button-icon-default));
   width: 10px;
   height: 10px;
   margin: auto;
   display: block;
   position: absolute;
-  inset: 0;
 }
 
-.IncodeEkyc__radioOption input[type="radio"]:checked {
-  border-color: var(--radio-button-surface-selected, #006aff);
-  background: var(--radio-button-surface-selected, #006aff);
+.IncodeEkycRadioOption input[type="radio"]:checked {
+  border-color: var(--color-radio-button-border-selected, var(--radio-button-border-selected));
+  background-color: var(--color-radio-button-surface-selected, var(--radio-button-surface-selected));
 }
 
-.IncodeEkyc__radioOption input[type="radio"]:checked:after {
+.IncodeEkycRadioOption input[type="radio"]:checked:after {
   opacity: 1;
 }
 
-.IncodeEkyc__fieldError {
-  color: var(--input-text-helper-negative, #dc2626);
-  margin-top: 8px;
-  font-size: 14px;
+.IncodeEkycFieldError {
+  margin-top: var(--spacing-8, var(--spacing-8, 8px));
+  font-size: var(--text-14, var(--primitive-typography-size-14));
+  color: var(--color-input-text-helper-negative, var(--input-text-helper-negative));
   display: block;
 }
 
-.IncodeEkyc__submitError {
-  color: var(--input-text-helper-negative, #dc2626);
+.IncodeEkycSubmitError {
+  margin-bottom: var(--spacing-12, var(--spacing-12, 12px));
   text-align: center;
-  margin: 0 0 12px;
-  font-size: 16px;
-  font-weight: 500;
+  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-input-text-helper-negative, var(--input-text-helper-negative));
+  margin-top: 0;
 }
 
 .IncodeAddressAutocomplete {
@@ -5290,233 +5298,283 @@
   position: relative;
 }
 
-.IncodeAddressAutocomplete__suggestions {
+.IncodeAddressAutocompleteSuggestions {
+  right: var(--spacing-0, var(--spacing-none, 0px));
+  left: var(--spacing-0, var(--spacing-none, 0px));
   z-index: 10;
-  background: var(--surface-neutral-0, #fff);
-  border: 1px solid var(--input-border-default, #82879a);
-  border-radius: 8px;
+  margin-top: var(--spacing-8, var(--spacing-8, 8px));
   max-height: 200px;
-  margin: 8px 0 0;
-  padding: 0;
-  list-style: none;
+  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));
+  list-style-type: none;
   position: absolute;
   top: 100%;
-  left: 0;
-  right: 0;
   overflow-y: auto;
   box-shadow: 0 2px 8px #00000026;
 }
 
-.IncodeAddressAutocomplete__suggestion {
+.IncodeAddressAutocompleteSuggestion {
   cursor: pointer;
-  color: var(--text-body-800-primary, #262831);
-  border-bottom: 1px solid var(--input-border-default, #82879a);
-  padding: 12px 16px;
-  font-size: 16px;
-  font-weight: 500;
+  border-bottom-style: var(--tw-border-style);
+  border-bottom-width: 1px;
+  border-color: var(--color-dropdown-border-default, var(--dropdown-border-default));
+  padding-inline: var(--spacing-16, var(--spacing-16, 16px));
+  padding-block: var(--spacing-12, var(--spacing-12, 12px));
+  font-size: var(--text-16, var(--primitive-typography-size-16));
+  --tw-font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
+  font-weight: var(--font-weight-medium, var(--primitive-typography-weight-medium));
+  color: var(--color-dropdown-text-input-default, var(--dropdown-text-input-default));
 }
 
-.IncodeAddressAutocomplete__suggestion:last-child {
-  border-bottom: none;
+.IncodeAddressAutocompleteSuggestion:last-child {
+  border-bottom-style: var(--tw-border-style);
+  border-bottom-width: 0;
 }
 
-.IncodeAddressAutocomplete__suggestion:hover {
-  background: var(--surface-neutral-100, #f5f5f7);
+.IncodeAddressAutocompleteSuggestion:hover {
+  background-color: var(--color-surface-neutral-100, var(--surface-neutral-100));
 }
 
-.IncodeAddressAutocomplete__modalOverlay {
+.IncodeAddressAutocompleteModalOverlay {
+  inset: var(--spacing-0, var(--spacing-none, 0px));
   z-index: 50;
-  background: #00000080;
+  background-color: var(--color-surface-neutral-1000, var(--surface-neutral-1000));
   align-items: flex-end;
   display: flex;
   position: fixed;
-  inset: 0;
 }
 
-.IncodeAddressAutocomplete__modal {
-  background: var(--surface-primary, #fff);
-  border-radius: 1rem 1rem 0 0;
+@supports (color: color-mix(in lab, red, red)) {
+  .IncodeAddressAutocompleteModalOverlay {
+    background-color: color-mix(in oklab, var(--color-surface-neutral-1000, var(--surface-neutral-1000)) 50%, transparent);
+  }
+}
+
+.IncodeAddressAutocompleteModal {
+  background-color: var(--color-surface-neutral-0, var(--surface-neutral-0));
+  border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
   flex-direction: column;
   width: 100%;
   max-height: 90vh;
   display: flex;
 }
 
-.IncodeAddressAutocomplete__modalHeader {
-  border-bottom: 1px solid var(--input-border-default, #e5e7eb);
+.IncodeAddressAutocompleteModalHeader {
+  border-bottom-style: var(--tw-border-style);
+  border-bottom-width: 1px;
+  border-color: var(--color-dropdown-border-default, var(--dropdown-border-default));
+  padding-inline: var(--spacing-24, var(--spacing-24, 24px));
+  padding-block: var(--spacing-16, var(--spacing-16, 16px));
   justify-content: space-between;
   align-items: center;
-  padding: 1rem 1.5rem;
   display: flex;
 }
 
-.IncodeAddressAutocomplete__modalHeader h3 {
-  margin: 0;
-  font-size: 1.125rem;
-  font-weight: 600;
+.IncodeAddressAutocompleteModalHeader h3 {
+  margin: var(--spacing-0, var(--spacing-none, 0px));
+  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-input-text-label-default, var(--input-text-label-default));
 }
 
-.IncodeAddressAutocomplete__modalClose {
+.IncodeAddressAutocompleteModalClose {
   cursor: pointer;
-  color: var(--text-secondary, #6b7280);
-  background: none;
-  border: none;
-  padding: 0;
-  font-size: 1.5rem;
+  border-style: var(--tw-border-style);
+  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-24, var(--primitive-typography-size-24));
+  --tw-leading: 1;
+  color: var(--color-text-body-secondary, var(--text-body-500-secondary));
+  background-color: #0000;
+  border-style: none;
   line-height: 1;
 }
 
-.IncodeAddressAutocomplete__modalBody {
+.IncodeAddressAutocompleteModalBody {
+  padding-inline: var(--spacing-24, var(--spacing-24, 24px));
+  padding-block: var(--spacing-16, var(--spacing-16, 16px));
   flex: 1;
-  padding: 1rem 1.5rem;
   overflow-y: auto;
 }
 
-.IncodeAddressAutocomplete__modalInput {
-  border: 1px solid var(--input-border-default, #d1d5db);
-  border-radius: .375rem;
-  outline: none;
+.IncodeAddressAutocompleteModalInput {
+  margin-bottom: var(--spacing-12, var(--spacing-12, 12px));
+  border-radius: var(--radius-small, var(--border-radius-small));
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  border-color: var(--color-input-border-default, var(--input-border-default));
+  background-color: var(--color-input-surface-default, var(--input-surface-default));
   width: 100%;
-  margin-bottom: .75rem;
-  padding: .75rem 1rem;
-  font-size: 1rem;
+  padding-inline: var(--spacing-16, var(--spacing-16, 16px));
+  padding-block: var(--spacing-12, var(--spacing-12, 12px));
+  font-size: var(--text-16, var(--primitive-typography-size-16));
+  color: var(--color-input-text-field-default, var(--input-text-field-default));
+  --tw-outline-style: none;
+  outline-style: none;
 }
 
-.IncodeAddressAutocomplete__modalInput:focus {
-  border-color: var(--button-primary-surface-default, #3b82f6);
+.IncodeAddressAutocompleteModalInput::placeholder {
+  color: var(--color-input-text-field-placeholder, var(--input-text-field-placeholder));
 }
 
-.IncodeAddressAutocomplete__modalSuggestions {
-  margin: 0;
-  padding: 0;
-  list-style: none;
+.IncodeAddressAutocompleteModalInput:focus {
+  border-color: var(--color-input-border-active, var(--input-border-active));
+}
+
+.IncodeAddressAutocompleteModalSuggestions {
+  margin: var(--spacing-0, var(--spacing-none, 0px));
+  padding: var(--spacing-0, var(--spacing-none, 0px));
+  list-style-type: none;
 }
 
-.IncodeAddressAutocomplete__modalSuggestion {
+.IncodeAddressAutocompleteModalSuggestion {
   cursor: pointer;
-  color: var(--text-primary, #111827);
-  border-bottom: 1px solid var(--input-border-default, #f3f4f6);
-  padding: .75rem 0;
-  font-size: .875rem;
+  border-bottom-style: var(--tw-border-style);
+  border-bottom-width: 1px;
+  border-color: var(--color-dropdown-border-default, var(--dropdown-border-default));
+  padding-block: var(--spacing-12, var(--spacing-12, 12px));
+  font-size: var(--text-14, var(--primitive-typography-size-14));
+  color: var(--color-dropdown-text-input-default, var(--dropdown-text-input-default));
 }
 
-.IncodeAddressAutocomplete__enterManually {
-  border: 1px solid var(--input-border-default, #d1d5db);
-  width: 100%;
-  color: var(--text-secondary, #6b7280);
+.IncodeAddressAutocompleteEnterManually {
+  margin-top: var(--spacing-12, var(--spacing-12, 12px));
   cursor: pointer;
+  border-radius: var(--radius-small, var(--border-radius-small));
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  border-color: var(--color-button-secondary-border-default, var(--button-secondary-border-default));
+  width: 100%;
+  padding: var(--spacing-12, var(--spacing-12, 12px));
   text-align: center;
-  background: none;
-  border-radius: .375rem;
-  margin-top: .75rem;
-  padding: .75rem;
-  font-size: .875rem;
+  font-size: var(--text-14, var(--primitive-typography-size-14));
+  color: var(--color-button-secondary-text-default, var(--button-secondary-text-default));
+  background-color: #0000;
 }
 
 .IncodeEkybPage {
   max-width: 480px;
-  margin: 0 auto;
+  margin-inline: auto;
 }
 
-.IncodeEkyb__form {
+.IncodeEkybForm {
+  margin-top: var(--spacing-32, var(--spacing-32, 32px));
+  gap: var(--spacing-16, var(--spacing-16, 16px));
   flex-direction: column;
-  gap: 16px;
   width: 100%;
-  margin-top: 32px;
   display: flex;
 }
 
+.IncodeEkybForm .IncodeInputComposed, .IncodeEkybForm .IncodeDropdownComposed, .IncodeEkybForm .IncodeFormField {
+  margin-inline: auto;
+}
+
+.IncodeEkybForm .IncodeFormField {
+  margin-bottom: var(--spacing-0, var(--spacing-none, 0px));
+}
+
 @media (min-width: 768px) {
   .IncodePageContainer.IncodeEkybPage {
+    margin-top: var(--spacing-0, var(--spacing-none, 0px));
     height: 95dvh;
     max-height: none;
-    margin-top: 0;
   }
 
   .IncodeEkybPage .IncodePageInner {
     height: 95%;
   }
 
-  .IncodePageContainer.IncodeEkybPage--scrollable {
+  .IncodePageContainer.IncodeEkybPageScrollable {
     max-width: 500px;
   }
 
   .IncodeEkybPage .IncodePageContent {
-    min-height: 0;
+    min-height: var(--spacing-0, var(--spacing-none, 0px));
   }
 
-  .IncodeEkybPage .IncodeEkyb__form {
+  .IncodeEkybPage .IncodeEkybForm {
+    min-height: var(--spacing-0, var(--spacing-none, 0px));
+    padding-bottom: var(--spacing-8, var(--spacing-8, 8px));
     flex: 1;
-    min-height: 0;
-    padding-bottom: 8px;
     overflow-y: auto;
   }
 
-  .IncodeEkybPage--scrollable .IncodeEkyb__form {
-    margin-left: 8px;
+  .IncodeEkybPageScrollable .IncodeEkybForm {
+    margin-left: var(--spacing-8, var(--spacing-8, 8px));
   }
 
-  .IncodeEkyb__footer {
+  .IncodeEkybFooter {
     flex-shrink: 0;
   }
 }
 
-.IncodeEkyb__form .IncodeInputComposed, .IncodeEkyb__form .IncodeDropdownComposed, .IncodeEkyb__form .IncodeFormField {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.IncodeEkyb__form .IncodeFormField {
-  margin-bottom: 0;
-}
-
-.IncodeEkybPage .IncodeEkyb__sectionHeader {
+.IncodeEkybPage .IncodeEkybSectionHeader {
   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-800-primary));
+  --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-input-text-label-default, var(--input-text-label-default));
+  margin-inline: auto;
+  margin-top: var(--spacing-16, var(--spacing-16, 16px));
   width: 100%;
   max-width: 420px;
-  margin: 16px auto 0;
-  padding: 12px 0;
-  font-weight: 700;
+  padding-block: var(--spacing-12, var(--spacing-12, 12px));
 }
 
-.IncodeEkyb__ubos, .IncodeEkyb__uboEntry {
+.IncodeEkybUbos, .IncodeEkybUboEntry {
+  gap: var(--spacing-16, var(--spacing-16, 16px));
   flex-direction: column;
-  gap: 16px;
   display: flex;
 }
 
-.IncodeEkyb__removeUbo {
-  color: var(--text-error, #dc2626);
+.IncodeEkybRemoveUbo {
   cursor: pointer;
-  background: none;
-  border: none;
-  padding: 0;
-  font-size: .75rem;
+  border-style: var(--tw-border-style);
+  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-12, var(--primitive-typography-size-12));
+  color: var(--color-text-status-negative, var(--text-status-negative));
+  background-color: #0000;
+  border-style: none;
 }
 
-.IncodeEkyb__addUbo {
-  color: var(--button-primary-surface-default, #006aff);
+.IncodeEkybAddUbo {
   cursor: pointer;
+  border-style: var(--tw-border-style);
+  border-width: var(--border-width-none, var(--primitive-border-width-0));
+  --tw-border-style: none;
+  padding-block: var(--spacing-8, var(--spacing-8, 8px));
   text-align: center;
-  background: none;
-  border: none;
-  padding: 8px 0;
-  font-size: 18px;
-  font-weight: 500;
-  line-height: 18px;
-  text-decoration: underline;
+  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-primary-surface-default, var(--button-primary-surface-default));
+  background-color: #0000;
+  border-style: none;
+  text-decoration-line: underline;
+  text-decoration-style: solid;
+  text-decoration-thickness: auto;
 }
 
-.IncodeEkyb__addUbo:hover {
+.IncodeEkybAddUbo:hover {
   opacity: .8;
 }
 
-.IncodeEkyb__countrySelector {
+.IncodeEkybCountrySelector {
   width: 100%;
 }
 

package/dist/themes/dark.css

@@ -835,6 +835,17 @@
   --checkbox-text-disabled: var(--text-body-500-secondary);
   --checkbox-text-negative: var(--text-status-negative);
 
+  /* Radio Button */
+  --radio-button-surface-default: var(--checkbox-surface-default);
+  --radio-button-surface-selected: var(--checkbox-surface-selected);
+
+  --radio-button-border-default: var(--checkbox-border-default);
+  --radio-button-border-selected: var(--radio-button-surface-selected);
+
+  --radio-button-icon-default: var(--checkbox-icon-default);
+
+  --radio-button-text-default: var(--checkbox-text-default);
+
   /* Card */
   --card-surface-primary: var(--surface-neutral-800);
 

package/dist/themes/light.css

@@ -835,6 +835,17 @@
   --checkbox-text-disabled: var(--text-body-500-secondary);
   --checkbox-text-negative: var(--text-status-negative);
 
+  /* Radio Button */
+  --radio-button-surface-default: var(--checkbox-surface-default);
+  --radio-button-surface-selected: var(--checkbox-surface-selected);
+
+  --radio-button-border-default: var(--checkbox-border-default);
+  --radio-button-border-selected: var(--radio-button-surface-selected);
+
+  --radio-button-icon-default: var(--checkbox-icon-default);
+
+  --radio-button-text-default: var(--checkbox-text-default);
+
   /* Card */
   --card-surface-primary: var(--surface-neutral-800);