@axos-web-dev/shared-components 1.0.56 → 1.0.58

package/dist/StepItemSet/StepItemSet.css.d.ts

@@ -1,20 +1,20 @@
 export declare const bs_section: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})` | `var(--${string}, ${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})`;
         };
         secondary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})` | `var(--${string}, ${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})`;
         };
         tertiary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})` | `var(--${string}, ${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})`;
         };
         quaternary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})` | `var(--${string}, ${string})`;
+            color: `var(--${string})` | `var(--${string}, ${string})`;
         };
     };
 }>;
@@ -42,12 +42,12 @@ export declare const sec_title: import('@vanilla-extract/recipes').RuntimeFn<{
             selectors: {
                 [x: string]: {
                     WebkitBackgroundClip: "text";
-                    backgroundImage: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    backgroundImage: `var(--${string})` | `var(--${string}, ${string})`;
                     WebkitTextFillColor: "transparent";
                     textShadow: "0px 0px #00000000";
                     color?: undefined;
                 } | {
-                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    color: `var(--${string})` | `var(--${string}, ${string})`;
                     WebkitBackgroundClip?: undefined;
                     backgroundImage?: undefined;
                     WebkitTextFillColor?: undefined;
@@ -59,12 +59,12 @@ export declare const sec_title: import('@vanilla-extract/recipes').RuntimeFn<{
             selectors: {
                 [x: string]: {
                     WebkitBackgroundClip: "text";
-                    backgroundImage: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    backgroundImage: `var(--${string})` | `var(--${string}, ${string})`;
                     WebkitTextFillColor: "transparent";
                     textShadow: "0px 0px #00000000";
                     color?: undefined;
                 } | {
-                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    color: `var(--${string})` | `var(--${string}, ${string})`;
                     WebkitBackgroundClip?: undefined;
                     backgroundImage?: undefined;
                     WebkitTextFillColor?: undefined;
@@ -73,10 +73,10 @@ export declare const sec_title: import('@vanilla-extract/recipes').RuntimeFn<{
             };
         };
         tertiary: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})`;
         };
         quaternary: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})`;
         };
     };
 }>;

package/dist/Tab/Tab.css.d.ts

@@ -1,36 +1,36 @@
 export declare const tab: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})`;
         };
         secondary: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})`;
         };
         tertiary: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})`;
         };
         quaternary: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})`;
         };
     };
 }>;
 export declare const active_tab: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            borderBottom: `4px solid var(--${string})` | `4px solid var(--${string}, ${string})` | `4px solid var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})`;
+            borderBottom: `4px solid var(--${string})` | `4px solid var(--${string}, ${string})`;
         };
         secondary: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            borderBottom: `4px solid var(--${string})` | `4px solid var(--${string}, ${string})` | `4px solid var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})`;
+            borderBottom: `4px solid var(--${string})` | `4px solid var(--${string}, ${string})`;
         };
         tertiary: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            borderBottom: `4px solid var(--${string})` | `4px solid var(--${string}, ${string})` | `4px solid var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})`;
+            borderBottom: `4px solid var(--${string})` | `4px solid var(--${string}, ${string})`;
         };
         quaternary: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            borderBottom: `4px solid var(--${string})` | `4px solid var(--${string}, ${string})` | `4px solid var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})`;
+            borderBottom: `4px solid var(--${string})` | `4px solid var(--${string}, ${string})`;
         };
     };
 }>;

package/dist/Table/Table.css.d.ts

@@ -21,27 +21,27 @@ export declare const th: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
             color: "#4A5560";
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            borderBottom: `1px solid var(--${string})` | `1px solid var(--${string}, ${string})` | `1px solid var(--${string}, ${number})`;
+            background: `var(--${string})` | `var(--${string}, ${string})`;
+            borderBottom: `1px solid var(--${string})` | `1px solid var(--${string}, ${string})`;
         };
         secondary: {
             color: "#4A5560";
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            borderBottom: `1px solid var(--${string})` | `1px solid var(--${string}, ${string})` | `1px solid var(--${string}, ${number})`;
+            background: `var(--${string})` | `var(--${string}, ${string})`;
+            borderBottom: `1px solid var(--${string})` | `1px solid var(--${string}, ${string})`;
         };
         tertiary: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})`;
             borderBottom: "1px solid #F4F4F4";
             selectors: {
                 "&:first-child": {
-                    background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    background: `var(--${string})` | `var(--${string}, ${string})`;
                 };
             };
             "@media": {
                 "screen and (max-width: 768px)": {
                     selectors: {
                         "&:first-child": {
-                            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                            background: `var(--${string})` | `var(--${string}, ${string})`;
                         };
                     };
                 };
@@ -52,14 +52,14 @@ export declare const th: import('@vanilla-extract/recipes').RuntimeFn<{
             borderBottom: "1px solid #F4F4F4";
             selectors: {
                 "&:first-child": {
-                    background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    background: `var(--${string})` | `var(--${string}, ${string})`;
                 };
             };
             "@media": {
                 "screen and (max-width: 768px)": {
                     selectors: {
                         "&:first-child": {
-                            backgroundImage: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                            backgroundImage: `var(--${string})` | `var(--${string}, ${string})`;
                         };
                     };
                 };
@@ -73,48 +73,48 @@ export declare const th: import('@vanilla-extract/recipes').RuntimeFn<{
 export declare const td: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})` | `var(--${string}, ${string})`;
             color: "#4A5560";
             borderBottom: "1px solid #D4D4D4";
         };
         secondary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})` | `var(--${string}, ${string})`;
             color: "#4A5560";
             borderBottom: "1px solid #D4D4D4";
         };
         tertiary: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})`;
             borderBottom: "1px solid #F4F4F4";
             selectors: {
                 "&:first-child": {
-                    background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    background: `var(--${string})` | `var(--${string}, ${string})`;
+                    color: `var(--${string})` | `var(--${string}, ${string})`;
                 };
             };
             "@media": {
                 "screen and (max-width: 327px)": {
                     selectors: {
                         "&:first-child": {
-                            backgroundImage: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                            backgroundImage: `var(--${string})` | `var(--${string}, ${string})`;
                         };
                     };
                 };
             };
         };
         quaternary: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})`;
             borderBottom: "1px solid #F4F4F4";
             selectors: {
                 "&:first-child": {
-                    background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                    color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                    background: `var(--${string})` | `var(--${string}, ${string})`;
+                    color: `var(--${string})` | `var(--${string}, ${string})`;
                 };
             };
             "@media": {
                 "screen and (max-width: 327px)": {
                     selectors: {
                         "&:first-child": {
-                            backgroundImage: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+                            backgroundImage: `var(--${string})` | `var(--${string}, ${string})`;
                         };
                     };
                 };
@@ -128,10 +128,10 @@ export declare const td: import('@vanilla-extract/recipes').RuntimeFn<{
 export declare const tableWrapper: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            border: `1px solid var(--${string})` | `1px solid var(--${string}, ${string})` | `1px solid var(--${string}, ${number})`;
+            border: `1px solid var(--${string})` | `1px solid var(--${string}, ${string})`;
         };
         secondary: {
-            border: `1px solid var(--${string})` | `1px solid var(--${string}, ${string})` | `1px solid var(--${string}, ${number})`;
+            border: `1px solid var(--${string})` | `1px solid var(--${string}, ${string})`;
         };
         tertiary: {
             border: "none";
@@ -144,16 +144,16 @@ export declare const tableWrapper: import('@vanilla-extract/recipes').RuntimeFn<
 export declare const table: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})` | `var(--${string}, ${string})`;
         };
         secondary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})` | `var(--${string}, ${string})`;
         };
         tertiary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})` | `var(--${string}, ${string})`;
         };
         quaternary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})` | `var(--${string}, ${string})`;
         };
     };
 }>;

package/dist/Table/Table.js

@@ -11,7 +11,7 @@ import "../utils/allowedAxosDomains.js";
 import { getVariant } from "../utils/getVariant.js";
 import clsx from "clsx";
 import { createElement } from "react";
-import { table_section, table_container, table_container_text, table_headline, table_description_text, tableWrapper, table, highlight_first_row, highlight_last_row, alternate_color_rows, apy_table, td, th } from "./Table.css.js";
+import { table_section, table_container_text, table_headline, table_description_text, table_container, table, highlight_first_row, highlight_last_row, alternate_color_rows, apy_table, tableWrapper, td, th } from "./Table.css.js";
 const TableContainer = ({
   tableTitle,
   tableBody,

package/dist/TextBlock/TextBlock.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import clsx from "clsx";
-import { textBlockSection, textBlockHeader } from "./TextBlock.css.js";
+import { textBlockHeader, textBlockSection } from "./TextBlock.css.js";
 const TextBlock = (props) => {
   return /* @__PURE__ */ jsxs(
     "div",

package/dist/assets/Auth/SignIn.css

@@ -1,55 +1,86 @@
-._1c7jj80 {
-  padding: 2.5rem;
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  align-items: center;
-  gap: 16px;
-  background: var(--_1073cm81);
+@keyframes _1c7jj80 {
+  0% {
+    opacity: 0;
+    transform: translateY(5px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+._1c7jj81 {
+  animation: _1c7jj80 0.8s ease-out forwards;
+  animation-delay: 0.2s;
+  background: #1E3860;
   box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
-  border-radius: 16px;
-  width: 50vw;
+  color: var(--_1073cm8g);
+  gap: 16px;
+  isolation: isolate;
   margin: 0 auto;
+  opacity: 0;
+  padding: 2.5rem;
+  width: min(685px, 100%);
+  will-change: opacity, transform;
 }
-._1c7jj81 {
-  background: var(--_1073cm86);
-  color: var(--_1073cm85);
-  border: none;
+._1c7jj82 {
+  background: var(--_1073cm8k);
+  color: var(--_1073cm8j);
+  border: 1px solid var(--_1073cm8k);
   padding: 11px 24px;
   border-radius: 8px;
   font-size: 1rem;
   font-weight: bold;
   cursor: pointer;
   transition: background 0.3s ease;
+  width: min(189px, 100%);
 }
-._1c7jj81:hover {
-  background: var(--_1073cm86);
-}
-._1c7jj81:disabled {
-  background: var(--_1073cm8w);
-  color: var(--_1073cm8v);
-  cursor: not-allowed;
+._1c7jj82:hover {
+  background: transparent;
+  color: var(--_1073cm8k);
+  opacity: 0.9;
 }
-._1c7jj81:active {
-  background: var(--_1073cm86);
+._1c7jj82:active {
+  background: var(--_1073cm8k);
+  color: var(--_1073cm8j);
 }
-._1c7jj81:focus {
+._1c7jj82:focus {
+  box-shadow: 0 0 0 2px var(--_1073cm8k);
   outline: none;
-  box-shadow: 0 0 0 2px var(--_1073cm86);
 }
-._1c7jj81:focus-visible {
+._1c7jj82:focus-visible {
+  box-shadow: 0 0 0 2px var(--_1073cm8k);
   outline: none;
-  box-shadow: 0 0 0 2px var(--_1073cm86);
 }
-._1c7jj81:focus-within {
+._1c7jj82:focus-within {
+  box-shadow: 0 0 0 2px var(--_1073cm8k);
   outline: none;
-  box-shadow: 0 0 0 2px var(--_1073cm86);
 }
-._1c7jj82 {
-  display: flex;
-  gap: 12px;
+._1c7jj82:disabled {
+  background: #C7C7C7;
+  border-color: transparent;
+  color: #FFF;
+  cursor: not-allowed;
 }
 ._1c7jj83 {
+  color: hsl(216 25% 85% / 1);
   text-align: center;
-  color: var(--_1073cm82);
+  text-wrap: pretty;
+}
+._1c7jj84 {
+  display: flex;
+  gap: 12px;
+}
+._1c7jj85 {
+  width: min(434px, 100%);
+}
+._1c7jj85 ._18du0lar:focus-within {
+  color: var(--_1073cm8o);
+}
+._1c7jj85 ._18du0laf:focus-within {
+  border-color: var(--_1073cm8o);
+}
+@media (max-width: 603px) {
+  ._1c7jj81 {
+    padding-inline: 1.5rem;
+  }
 }

package/dist/icons/ArrowIcon/ArrowIcon.css.d.ts

@@ -1,13 +1,13 @@
 export declare const Arrow: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            fill: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            fill: `var(--${string})` | `var(--${string}, ${string})`;
         };
         secondary: {
-            fill: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            fill: `var(--${string})` | `var(--${string}, ${string})`;
         };
         tertiary: {
-            fill: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            fill: `var(--${string})` | `var(--${string}, ${string})`;
         };
     };
 }>;

package/dist/icons/CheckIcon/CheckIcon.css.d.ts

@@ -3,10 +3,10 @@ import { RecipeVariants } from '@vanilla-extract/recipes';
 export declare const checkColor: import('@vanilla-extract/recipes').RuntimeFn<{
     variant: {
         primary: {
-            fill: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            fill: `var(--${string})` | `var(--${string}, ${string})`;
         };
         secondary: {
-            fill: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            fill: `var(--${string})` | `var(--${string}, ${string})`;
         };
     };
 }>;

package/dist/main.js

@@ -10,7 +10,7 @@ import { ATMLocator } from "./ATMLocator/ATMLocator.js";
 import { ErrorAlert } from "./Auth/ErrorAlert.js";
 import { error_alert, error_alert_content, error_close_button, separator } from "./Auth/ErrorAlert.css.js";
 import { Logout } from "./Auth/Logout.js";
-import { body_sign_in, form_input, sign_in_button, sign_in_form } from "./Auth/SignIn.css.js";
+import { body_sign_in, fadeInUp, form_input, form_input_wrapper, sign_in_button, sign_in_form } from "./Auth/SignIn.css.js";
 import { SignIn } from "./Auth/SignInPassword.js";
 import { Avatar } from "./Avatar/index.js";
 import { awards_row, awards_section } from "./AwardsBanner/AwardsBanner.css.js";
@@ -456,6 +456,7 @@ export {
   exit_intent,
   exit_intent_backdrop,
   expand_icon,
+  fadeInUp,
   feature_header,
   feature_title,
   featured_center_vertical,
@@ -485,6 +486,7 @@ export {
   formContainer,
   formWrapper,
   form_input,
+  form_input_wrapper,
   form_nav_apply_now,
   form_row,
   ft_col,

package/dist/themes/axos.css.d.ts

@@ -1,66 +1,66 @@
 export declare const axosTheme: string, vars: {
     colors: {
         primary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            headline: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            textGradient: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            textButton: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            backgroundButton: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})` | `var(--${string}, ${string})`;
+            body: `var(--${string})` | `var(--${string}, ${string})`;
+            headline: `var(--${string})` | `var(--${string}, ${string})`;
+            textGradient: `var(--${string})` | `var(--${string}, ${string})`;
+            textButton: `var(--${string})` | `var(--${string}, ${string})`;
+            backgroundButton: `var(--${string})` | `var(--${string}, ${string})`;
+            border: `var(--${string})` | `var(--${string}, ${string})`;
         };
         secondary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            headline: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            textGradient: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            textButton: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            backgroundButton: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})` | `var(--${string}, ${string})`;
+            body: `var(--${string})` | `var(--${string}, ${string})`;
+            headline: `var(--${string})` | `var(--${string}, ${string})`;
+            textGradient: `var(--${string})` | `var(--${string}, ${string})`;
+            textButton: `var(--${string})` | `var(--${string}, ${string})`;
+            backgroundButton: `var(--${string})` | `var(--${string}, ${string})`;
+            border: `var(--${string})` | `var(--${string}, ${string})`;
         };
         tertiary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            headline: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            textGradient: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            textButton: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            backgroundButton: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})` | `var(--${string}, ${string})`;
+            body: `var(--${string})` | `var(--${string}, ${string})`;
+            headline: `var(--${string})` | `var(--${string}, ${string})`;
+            textGradient: `var(--${string})` | `var(--${string}, ${string})`;
+            textButton: `var(--${string})` | `var(--${string}, ${string})`;
+            backgroundButton: `var(--${string})` | `var(--${string}, ${string})`;
+            border: `var(--${string})` | `var(--${string}, ${string})`;
         };
         quaternary: {
-            background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            headline: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            textGradient: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            textButton: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            backgroundButton: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            background: `var(--${string})` | `var(--${string}, ${string})`;
+            body: `var(--${string})` | `var(--${string}, ${string})`;
+            headline: `var(--${string})` | `var(--${string}, ${string})`;
+            textGradient: `var(--${string})` | `var(--${string}, ${string})`;
+            textButton: `var(--${string})` | `var(--${string}, ${string})`;
+            backgroundButton: `var(--${string})` | `var(--${string}, ${string})`;
+            border: `var(--${string})` | `var(--${string}, ${string})`;
         };
     };
-    error: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    error: `var(--${string})` | `var(--${string}, ${string})`;
     disabled: {
-        border: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        background: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        border: `var(--${string})` | `var(--${string}, ${string})`;
+        color: `var(--${string})` | `var(--${string}, ${string})`;
+        background: `var(--${string})` | `var(--${string}, ${string})`;
     };
     icons: {
         check: {
-            primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            primary: `var(--${string})` | `var(--${string}, ${string})`;
+            secondary: `var(--${string})` | `var(--${string}, ${string})`;
         };
     };
     table: {
-        highlight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        highlight: `var(--${string})` | `var(--${string}, ${string})`;
+        color: `var(--${string})` | `var(--${string}, ${string})`;
     };
     footer: {
         link: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})`;
         };
     };
     selecction: {
         icon: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+            color: `var(--${string})` | `var(--${string}, ${string})`;
         };
     };
 };