@utilitywarehouse/hearth-react-native 0.1.0 → 0.3.0

package/build/core/themes.d.ts

@@ -27,6 +27,42 @@ export declare const lightTheme: {
         readonly '4/6': "66.666%";
         readonly '5/6': "83.333%";
         readonly full: DimensionValue;
+        readonly none: 0;
+        readonly '2xs': {
+            readonly base: 2;
+            readonly md: 2;
+            readonly lg: 2;
+        };
+        readonly xs: {
+            readonly base: 4;
+            readonly md: 4;
+            readonly lg: 4;
+        };
+        readonly sm: {
+            readonly base: 8;
+            readonly md: 8;
+            readonly lg: 8;
+        };
+        readonly md: {
+            readonly base: 12;
+            readonly md: 12;
+            readonly lg: 12;
+        };
+        readonly lg: {
+            readonly base: 16;
+            readonly md: 16;
+            readonly lg: 16;
+        };
+        readonly xl: {
+            readonly base: 20;
+            readonly md: 24;
+            readonly lg: 24;
+        };
+        readonly '2xl': {
+            readonly base: 28;
+            readonly md: 28;
+            readonly lg: 40;
+        };
         readonly '0': 0;
         readonly '25': 2;
         readonly '50': 4;
@@ -441,11 +477,14 @@ export declare const lightTheme: {
                 readonly margin: 16;
             };
             readonly spacing: {
-                readonly lg: 20;
-                readonly md: 16;
-                readonly sm: 12;
-                readonly xl: 28;
-                readonly xs: 8;
+                readonly '2xl': 28;
+                readonly '2xs': 2;
+                readonly lg: 16;
+                readonly md: 12;
+                readonly none: 0;
+                readonly sm: 8;
+                readonly xl: 20;
+                readonly xs: 4;
             };
         };
         readonly tablet: {
@@ -467,11 +506,14 @@ export declare const lightTheme: {
                 readonly margin: 32;
             };
             readonly spacing: {
-                readonly lg: 24;
-                readonly md: 16;
-                readonly sm: 12;
-                readonly xl: 28;
-                readonly xs: 8;
+                readonly '2xl': 28;
+                readonly '2xs': 2;
+                readonly lg: 16;
+                readonly md: 12;
+                readonly none: 0;
+                readonly sm: 8;
+                readonly xl: 24;
+                readonly xs: 4;
             };
         };
         readonly desktop: {
@@ -493,11 +535,14 @@ export declare const lightTheme: {
                 readonly margin: 32;
             };
             readonly spacing: {
-                readonly lg: 24;
-                readonly md: 16;
-                readonly sm: 12;
-                readonly xl: 40;
-                readonly xs: 8;
+                readonly '2xl': 40;
+                readonly '2xs': 2;
+                readonly lg: 16;
+                readonly md: 12;
+                readonly none: 0;
+                readonly sm: 8;
+                readonly xl: 24;
+                readonly xs: 4;
             };
         };
     };
@@ -552,7 +597,7 @@ export declare const lightTheme: {
         readonly variants: {
             readonly hardShadow: {
                 readonly '1': {
-                    readonly shadowColor: "#3e3c3b";
+                    readonly shadowColor: "#3a3837";
                     readonly shadowOffset: {
                         readonly width: -2;
                         readonly height: 2;
@@ -562,7 +607,7 @@ export declare const lightTheme: {
                     readonly elevation: 10;
                 };
                 readonly '2': {
-                    readonly shadowColor: "#3e3c3b";
+                    readonly shadowColor: "#3a3837";
                     readonly shadowOffset: {
                         readonly width: 0;
                         readonly height: 3;
@@ -572,7 +617,7 @@ export declare const lightTheme: {
                     readonly elevation: 10;
                 };
                 readonly '3': {
-                    readonly shadowColor: "#3e3c3b";
+                    readonly shadowColor: "#3a3837";
                     readonly shadowOffset: {
                         readonly width: 2;
                         readonly height: 2;
@@ -582,7 +627,7 @@ export declare const lightTheme: {
                     readonly elevation: 10;
                 };
                 readonly '4': {
-                    readonly shadowColor: "#3e3c3b";
+                    readonly shadowColor: "#3a3837";
                     readonly shadowOffset: {
                         readonly width: 0;
                         readonly height: -3;
@@ -592,7 +637,7 @@ export declare const lightTheme: {
                     readonly elevation: 10;
                 };
                 readonly '5': {
-                    readonly shadowColor: "#3e3c3b";
+                    readonly shadowColor: "#3a3837";
                     readonly shadowOffset: {
                         readonly width: 0;
                         readonly height: 3;
@@ -604,7 +649,7 @@ export declare const lightTheme: {
             };
             readonly softShadow: {
                 readonly '1': {
-                    readonly shadowColor: "#3e3c3b";
+                    readonly shadowColor: "#3a3837";
                     readonly shadowOffset: {
                         readonly width: 0;
                         readonly height: 0;
@@ -612,13 +657,13 @@ export declare const lightTheme: {
                     readonly shadowRadius: 10;
                     readonly shadowOpacity: 0.1;
                     readonly _android: {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly elevation: 5;
                         readonly shadowOpacity: 0.05;
                     };
                 };
                 readonly '2': {
-                    readonly shadowColor: "#3e3c3b";
+                    readonly shadowColor: "#3a3837";
                     readonly shadowOffset: {
                         readonly width: 0;
                         readonly height: 0;
@@ -627,13 +672,13 @@ export declare const lightTheme: {
                     readonly elevation: 3;
                     readonly shadowOpacity: 0.1;
                     readonly _android: {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly elevation: 10;
                         readonly shadowOpacity: 0.1;
                     };
                 };
                 readonly '3': {
-                    readonly shadowColor: "#3e3c3b";
+                    readonly shadowColor: "#3a3837";
                     readonly shadowOffset: {
                         readonly width: 0;
                         readonly height: 0;
@@ -642,13 +687,13 @@ export declare const lightTheme: {
                     readonly shadowOpacity: 0.1;
                     readonly elevation: 4;
                     readonly _android: {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly elevation: 15;
                         readonly shadowOpacity: 0.15;
                     };
                 };
                 readonly '4': {
-                    readonly shadowColor: "#3e3c3b";
+                    readonly shadowColor: "#3a3837";
                     readonly shadowOffset: {
                         readonly width: 0;
                         readonly height: 0;
@@ -657,43 +702,63 @@ export declare const lightTheme: {
                     readonly shadowOpacity: 0.1;
                     readonly elevation: 10;
                     readonly _android: {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly elevation: 20;
                         readonly shadowOpacity: 0.2;
                     };
                 };
             };
             readonly space: {
-                readonly none: {};
+                readonly none: {
+                    readonly gap: {
+                        readonly base: 0;
+                        readonly md: 0;
+                        readonly lg: 0;
+                    };
+                };
+                readonly '2xs': {
+                    readonly gap: {
+                        readonly base: 2;
+                        readonly md: 2;
+                        readonly lg: 2;
+                    };
+                };
                 readonly xs: {
+                    readonly gap: {
+                        readonly base: 4;
+                        readonly md: 4;
+                        readonly lg: 4;
+                    };
+                };
+                readonly sm: {
                     readonly gap: {
                         readonly base: 8;
                         readonly md: 8;
                         readonly lg: 8;
                     };
                 };
-                readonly sm: {
+                readonly md: {
                     readonly gap: {
                         readonly base: 12;
                         readonly md: 12;
                         readonly lg: 12;
                     };
                 };
-                readonly md: {
+                readonly lg: {
                     readonly gap: {
                         readonly base: 16;
                         readonly md: 16;
                         readonly lg: 16;
                     };
                 };
-                readonly lg: {
+                readonly xl: {
                     readonly gap: {
                         readonly base: 20;
                         readonly md: 24;
                         readonly lg: 24;
                     };
                 };
-                readonly xl: {
+                readonly '2xl': {
                     readonly gap: {
                         readonly base: 28;
                         readonly md: 28;
@@ -709,19 +774,250 @@ export declare const lightTheme: {
     readonly color: {
         readonly white: "#ffffff";
         readonly black: "#000000";
-        readonly background: "#fcfbf2";
-        readonly background1: "#ffffff";
-        readonly backgroundPurple: "#7a42c8";
-        readonly invalidText: "#de2612";
+        readonly background: {
+            readonly brand: "#7a42c8";
+            readonly primary: "#fcfbf2";
+            readonly secondary: "#ffffff";
+        };
+        readonly border: {
+            readonly strong: "#101010";
+            readonly subtle: "#d4d2c0";
+        };
+        readonly feedback: {
+            readonly danger: {
+                readonly border: "#de2612";
+                readonly foreground: {
+                    readonly default: "#101010";
+                    readonly subtle: "#de2612";
+                };
+                readonly surface: {
+                    readonly default: "#ff634a";
+                    readonly subtle: "#ffa89d";
+                };
+            };
+            readonly functional: {
+                readonly border: "#5b5b5b";
+                readonly foreground: {
+                    readonly default: "#101010";
+                    readonly subtle: "#5b5b5b";
+                };
+                readonly surface: {
+                    readonly default: "#919191";
+                    readonly subtle: "#d3d3d3";
+                };
+            };
+            readonly info: {
+                readonly border: "#1c6cd4";
+                readonly foreground: {
+                    readonly default: "#101010";
+                    readonly subtle: "#1c6cd4";
+                };
+                readonly surface: {
+                    readonly default: "#6bb0ff";
+                    readonly subtle: "#bcddff";
+                };
+            };
+            readonly positive: {
+                readonly border: "#0f834a";
+                readonly foreground: {
+                    readonly default: "#101010";
+                    readonly subtle: "#0f834a";
+                };
+                readonly surface: {
+                    readonly default: "#36bf7d";
+                    readonly subtle: "#a2e2c3";
+                };
+            };
+            readonly warning: {
+                readonly border: "#be5400";
+                readonly foreground: {
+                    readonly default: "#101010";
+                    readonly subtle: "#be5400";
+                };
+                readonly surface: {
+                    readonly default: "#ff8010";
+                    readonly subtle: "#ffcca8";
+                };
+            };
+        };
+        readonly focus: {
+            readonly inverted: "#fcfbf2";
+            readonly primary: "#101010";
+        };
+        readonly icon: {
+            readonly inverted: "#fcfbf2";
+            readonly primary: "#101010";
+        };
+        readonly interactive: {
+            readonly affirmative: {
+                readonly border: {
+                    readonly strong: "#101010";
+                    readonly subtle: "#04663a";
+                };
+                readonly foreground: {
+                    readonly strong: "#fcfbf2";
+                    readonly subtle: "#04663a";
+                };
+                readonly surface: {
+                    readonly strong: {
+                        readonly active: "#074b2a";
+                        readonly default: "#0f834a";
+                        readonly hover: "#04663a";
+                    };
+                    readonly subtle: {
+                        readonly active: "#c5edda";
+                        readonly hover: "#e7f9f0";
+                    };
+                };
+            };
+            readonly brand: {
+                readonly border: {
+                    readonly strong: "#101010";
+                };
+                readonly foreground: {
+                    readonly strong: "#fcfbf2";
+                };
+                readonly surface: {
+                    readonly strong: {
+                        readonly active: "#442484";
+                        readonly default: "#7a42c8";
+                        readonly hover: "#5c2ca9";
+                    };
+                };
+            };
+            readonly destructive: {
+                readonly border: {
+                    readonly strong: "#101010";
+                    readonly subtle: "#a4281e";
+                };
+                readonly foreground: {
+                    readonly strong: "#fcfbf2";
+                    readonly subtle: "#a4281e";
+                };
+                readonly surface: {
+                    readonly strong: {
+                        readonly active: "#6b1f1a";
+                        readonly default: "#de2612";
+                        readonly hover: "#a4281e";
+                    };
+                    readonly subtle: {
+                        readonly active: "#ffe3df";
+                        readonly hover: "#fff3f1";
+                    };
+                };
+            };
+            readonly functional: {
+                readonly border: {
+                    readonly inverted: "#f7f7f7";
+                    readonly strong: "#101010";
+                    readonly subtle: "#101010";
+                };
+                readonly foreground: {
+                    readonly inverted: "#f7f7f7";
+                    readonly strong: "#fcfbf2";
+                    readonly subtle: "#101010";
+                };
+                readonly surface: {
+                    readonly strong: {
+                        readonly active: "#4c4c4c";
+                        readonly default: "#888888";
+                        readonly hover: "#5b5b5b";
+                    };
+                    readonly subtle: {
+                        readonly active: "#d3d3d3";
+                        readonly hover: "#ebebeb";
+                        readonly inverted: {
+                            readonly active: "#3a3837";
+                            readonly hover: "#3f3f3f";
+                        };
+                    };
+                };
+            };
+            readonly highlight: {
+                readonly border: {
+                    readonly strong: "#101010";
+                };
+                readonly foreground: {
+                    readonly strong: "#101010";
+                };
+                readonly surface: {
+                    readonly strong: {
+                        readonly active: "#d1950b";
+                        readonly default: "#ffb921";
+                        readonly hover: "#eba400";
+                    };
+                };
+            };
+            readonly neutral: {
+                readonly border: {
+                    readonly subtle: "#101010";
+                };
+                readonly foreground: {
+                    readonly subtle: "#101010";
+                };
+                readonly surface: {
+                    readonly subtle: {
+                        readonly active: "#f1efe4";
+                        readonly hover: "#f7f6eb";
+                    };
+                };
+            };
+        };
         readonly shadow: {
-            readonly broadbandGreenColor: "#8cba3b";
-            readonly cashbackLilacColor: "#be7aeb";
-            readonly defaultColor: "#101010";
-            readonly energyBlueColor: "#6db5c3";
-            readonly insuranceOrangeColor: "#ff7b00";
-            readonly mobileRoseColor: "#ee6dbb";
-            readonly piggyPinkColor: "#f295ff";
-            readonly purpleColor: "#7a42c8";
+            readonly brand: "#7a42c8";
+            readonly broadband: "#8cba3b";
+            readonly cashback: "#be7aeb";
+            readonly default: "#101010";
+            readonly energy: "#6db5c3";
+            readonly insurance: "#ff7b00";
+            readonly mobile: "#ee6dbb";
+            readonly pig: "#f295ff";
+        };
+        readonly surface: {
+            readonly brand: {
+                readonly default: "#7a42c8";
+                readonly strong: "#26164f";
+                readonly subtle: "#af90de";
+            };
+            readonly broadband: {
+                readonly default: "#8cba3b";
+                readonly subtle: "#d2e6b0";
+            };
+            readonly cashback: {
+                readonly default: "#be7aeb";
+                readonly subtle: "#dfbdf5";
+            };
+            readonly energy: {
+                readonly default: "#6db5c3";
+                readonly subtle: "#bddee4";
+            };
+            readonly highlight: {
+                readonly default: "#ffb921";
+                readonly subtle: "#ffd885";
+            };
+            readonly insurance: {
+                readonly default: "#ff7b00";
+                readonly subtle: "#ffb46d";
+            };
+            readonly mobile: {
+                readonly default: "#ee6dbb";
+                readonly subtle: "#fad0e9";
+            };
+            readonly neutral: {
+                readonly strong: "#ffffff";
+                readonly subtle: "#fcfbf2";
+            };
+            readonly pig: {
+                readonly default: "#f295ff";
+                readonly subtle: "#f9ceff";
+            };
+        };
+        readonly text: {
+            readonly affirmative: "#0f834a";
+            readonly brand: "#7a42c8";
+            readonly inverted: "#fcfbf2";
+            readonly primary: "#101010";
+            readonly secondary: "#888888";
         };
         readonly blue: {
             readonly '0': "#f8fbff";
@@ -800,17 +1096,17 @@ export declare const lightTheme: {
         };
         readonly grey: {
             readonly '0': "#ffffff";
-            readonly '50': "#f6f5f5";
-            readonly '100': "#e7e6e6";
-            readonly '200': "#d1d0d0";
+            readonly '50': "#f7f7f7";
+            readonly '100': "#ebebeb";
+            readonly '200': "#d3d3d3";
             readonly '300': "#b2afae";
-            readonly '400': "#8a8686";
-            readonly '500': "#6f6c6b";
-            readonly '600': "#5f5c5b";
-            readonly '700': "#555352";
-            readonly '800': "#464444";
-            readonly '900': "#3e3c3b";
-            readonly '950': "#222222";
+            readonly '400': "#919191";
+            readonly '500': "#888888";
+            readonly '600': "#5b5b5b";
+            readonly '700': "#4c4c4c";
+            readonly '800': "#3f3f3f";
+            readonly '900': "#3a3837";
+            readonly '950': "#232323";
             readonly '975': "#191919";
             readonly '1000': "#101010";
         };
@@ -878,16 +1174,16 @@ export declare const lightTheme: {
         readonly purple: {
             readonly '0': "#f7f6f9";
             readonly '50': "#eeebf4";
-            readonly '100': "#e6dff1";
-            readonly '200': "#ddd2ef";
-            readonly '300': "#d5c3ee";
-            readonly '400': "#a782db";
-            readonly '500': "#926fd1";
-            readonly '600': "#8850cf";
+            readonly '100': "#ddd5eb";
+            readonly '200': "#c6b5e2";
+            readonly '300': "#af90de";
+            readonly '400': "#996cda";
+            readonly '500': "#8851d6";
+            readonly '600': "#8149ce";
             readonly '700': "#7a42c8";
-            readonly '800': "#6538b8";
-            readonly '900': "#5a3285";
-            readonly '950': "#492d6f";
+            readonly '800': "#5c2ca9";
+            readonly '900': "#442484";
+            readonly '950': "#331c68";
             readonly '1000': "#26164f";
         };
         readonly red: {
@@ -944,7 +1240,7 @@ export declare const darkTheme: {
         focusVisible: {
             outlineStyle: string;
             outlineWidth: number;
-            outlineColor: "#e7e6e6";
+            outlineColor: "#ebebeb";
             outlineOffset: number;
         };
     };
@@ -966,6 +1262,42 @@ export declare const darkTheme: {
         readonly '4/6': "66.666%";
         readonly '5/6': "83.333%";
         readonly full: DimensionValue;
+        readonly none: 0;
+        readonly '2xs': {
+            readonly base: 2;
+            readonly md: 2;
+            readonly lg: 2;
+        };
+        readonly xs: {
+            readonly base: 4;
+            readonly md: 4;
+            readonly lg: 4;
+        };
+        readonly sm: {
+            readonly base: 8;
+            readonly md: 8;
+            readonly lg: 8;
+        };
+        readonly md: {
+            readonly base: 12;
+            readonly md: 12;
+            readonly lg: 12;
+        };
+        readonly lg: {
+            readonly base: 16;
+            readonly md: 16;
+            readonly lg: 16;
+        };
+        readonly xl: {
+            readonly base: 20;
+            readonly md: 24;
+            readonly lg: 24;
+        };
+        readonly '2xl': {
+            readonly base: 28;
+            readonly md: 28;
+            readonly lg: 40;
+        };
         readonly '0': 0;
         readonly '25': 2;
         readonly '50': 4;
@@ -1380,11 +1712,14 @@ export declare const darkTheme: {
                 readonly margin: 16;
             };
             readonly spacing: {
-                readonly lg: 20;
-                readonly md: 16;
-                readonly sm: 12;
-                readonly xl: 28;
-                readonly xs: 8;
+                readonly '2xl': 28;
+                readonly '2xs': 2;
+                readonly lg: 16;
+                readonly md: 12;
+                readonly none: 0;
+                readonly sm: 8;
+                readonly xl: 20;
+                readonly xs: 4;
             };
         };
         readonly tablet: {
@@ -1406,11 +1741,14 @@ export declare const darkTheme: {
                 readonly margin: 32;
             };
             readonly spacing: {
-                readonly lg: 24;
-                readonly md: 16;
-                readonly sm: 12;
-                readonly xl: 28;
-                readonly xs: 8;
+                readonly '2xl': 28;
+                readonly '2xs': 2;
+                readonly lg: 16;
+                readonly md: 12;
+                readonly none: 0;
+                readonly sm: 8;
+                readonly xl: 24;
+                readonly xs: 4;
             };
         };
         readonly desktop: {
@@ -1432,11 +1770,14 @@ export declare const darkTheme: {
                 readonly margin: 32;
             };
             readonly spacing: {
-                readonly lg: 24;
-                readonly md: 16;
-                readonly sm: 12;
-                readonly xl: 40;
-                readonly xs: 8;
+                readonly '2xl': 40;
+                readonly '2xs': 2;
+                readonly lg: 16;
+                readonly md: 12;
+                readonly none: 0;
+                readonly sm: 8;
+                readonly xl: 24;
+                readonly xs: 4;
             };
         };
     };
@@ -1491,7 +1832,7 @@ export declare const darkTheme: {
         readonly variants: {
             readonly hardShadow: {
                 readonly '1': {
-                    readonly shadowColor: "#3e3c3b";
+                    readonly shadowColor: "#3a3837";
                     readonly shadowOffset: {
                         readonly width: -2;
                         readonly height: 2;
@@ -1501,7 +1842,7 @@ export declare const darkTheme: {
                     readonly elevation: 10;
                 };
                 readonly '2': {
-                    readonly shadowColor: "#3e3c3b";
+                    readonly shadowColor: "#3a3837";
                     readonly shadowOffset: {
                         readonly width: 0;
                         readonly height: 3;
@@ -1511,7 +1852,7 @@ export declare const darkTheme: {
                     readonly elevation: 10;
                 };
                 readonly '3': {
-                    readonly shadowColor: "#3e3c3b";
+                    readonly shadowColor: "#3a3837";
                     readonly shadowOffset: {
                         readonly width: 2;
                         readonly height: 2;
@@ -1521,7 +1862,7 @@ export declare const darkTheme: {
                     readonly elevation: 10;
                 };
                 readonly '4': {
-                    readonly shadowColor: "#3e3c3b";
+                    readonly shadowColor: "#3a3837";
                     readonly shadowOffset: {
                         readonly width: 0;
                         readonly height: -3;
@@ -1531,7 +1872,7 @@ export declare const darkTheme: {
                     readonly elevation: 10;
                 };
                 readonly '5': {
-                    readonly shadowColor: "#3e3c3b";
+                    readonly shadowColor: "#3a3837";
                     readonly shadowOffset: {
                         readonly width: 0;
                         readonly height: 3;
@@ -1543,7 +1884,7 @@ export declare const darkTheme: {
             };
             readonly softShadow: {
                 readonly '1': {
-                    readonly shadowColor: "#3e3c3b";
+                    readonly shadowColor: "#3a3837";
                     readonly shadowOffset: {
                         readonly width: 0;
                         readonly height: 0;
@@ -1551,13 +1892,13 @@ export declare const darkTheme: {
                     readonly shadowRadius: 10;
                     readonly shadowOpacity: 0.1;
                     readonly _android: {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly elevation: 5;
                         readonly shadowOpacity: 0.05;
                     };
                 };
                 readonly '2': {
-                    readonly shadowColor: "#3e3c3b";
+                    readonly shadowColor: "#3a3837";
                     readonly shadowOffset: {
                         readonly width: 0;
                         readonly height: 0;
@@ -1566,13 +1907,13 @@ export declare const darkTheme: {
                     readonly elevation: 3;
                     readonly shadowOpacity: 0.1;
                     readonly _android: {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly elevation: 10;
                         readonly shadowOpacity: 0.1;
                     };
                 };
                 readonly '3': {
-                    readonly shadowColor: "#3e3c3b";
+                    readonly shadowColor: "#3a3837";
                     readonly shadowOffset: {
                         readonly width: 0;
                         readonly height: 0;
@@ -1581,13 +1922,13 @@ export declare const darkTheme: {
                     readonly shadowOpacity: 0.1;
                     readonly elevation: 4;
                     readonly _android: {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly elevation: 15;
                         readonly shadowOpacity: 0.15;
                     };
                 };
                 readonly '4': {
-                    readonly shadowColor: "#3e3c3b";
+                    readonly shadowColor: "#3a3837";
                     readonly shadowOffset: {
                         readonly width: 0;
                         readonly height: 0;
@@ -1596,43 +1937,63 @@ export declare const darkTheme: {
                     readonly shadowOpacity: 0.1;
                     readonly elevation: 10;
                     readonly _android: {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly elevation: 20;
                         readonly shadowOpacity: 0.2;
                     };
                 };
             };
             readonly space: {
-                readonly none: {};
+                readonly none: {
+                    readonly gap: {
+                        readonly base: 0;
+                        readonly md: 0;
+                        readonly lg: 0;
+                    };
+                };
+                readonly '2xs': {
+                    readonly gap: {
+                        readonly base: 2;
+                        readonly md: 2;
+                        readonly lg: 2;
+                    };
+                };
                 readonly xs: {
+                    readonly gap: {
+                        readonly base: 4;
+                        readonly md: 4;
+                        readonly lg: 4;
+                    };
+                };
+                readonly sm: {
                     readonly gap: {
                         readonly base: 8;
                         readonly md: 8;
                         readonly lg: 8;
                     };
                 };
-                readonly sm: {
+                readonly md: {
                     readonly gap: {
                         readonly base: 12;
                         readonly md: 12;
                         readonly lg: 12;
                     };
                 };
-                readonly md: {
+                readonly lg: {
                     readonly gap: {
                         readonly base: 16;
                         readonly md: 16;
                         readonly lg: 16;
                     };
                 };
-                readonly lg: {
+                readonly xl: {
                     readonly gap: {
                         readonly base: 20;
                         readonly md: 24;
                         readonly lg: 24;
                     };
                 };
-                readonly xl: {
+                readonly '2xl': {
                     readonly gap: {
                         readonly base: 28;
                         readonly md: 28;
@@ -1648,19 +2009,250 @@ export declare const darkTheme: {
     readonly color: {
         readonly white: "#ffffff";
         readonly black: "#000000";
-        readonly background: "#191917";
-        readonly background1: "#222222";
-        readonly backgroundPurple: "#7a42c8";
-        readonly invalidText: "#ff7964";
+        readonly background: {
+            readonly brand: "#996cda";
+            readonly primary: "#191917";
+            readonly secondary: "#232323";
+        };
+        readonly border: {
+            readonly strong: "#ebebeb";
+            readonly subtle: "#4c473d";
+        };
+        readonly feedback: {
+            readonly danger: {
+                readonly border: "#ff7964";
+                readonly foreground: {
+                    readonly default: "#101010";
+                    readonly subtle: "#ff7964";
+                };
+                readonly surface: {
+                    readonly default: "#ff634a";
+                    readonly subtle: "#ffa89d";
+                };
+            };
+            readonly functional: {
+                readonly border: "#b2afae";
+                readonly foreground: {
+                    readonly default: "#101010";
+                    readonly subtle: "#b2afae";
+                };
+                readonly surface: {
+                    readonly default: "#919191";
+                    readonly subtle: "#d3d3d3";
+                };
+            };
+            readonly info: {
+                readonly border: "#6bb0ff";
+                readonly foreground: {
+                    readonly default: "#101010";
+                    readonly subtle: "#6bb0ff";
+                };
+                readonly surface: {
+                    readonly default: "#6bb0ff";
+                    readonly subtle: "#bcddff";
+                };
+            };
+            readonly positive: {
+                readonly border: "#58ca93";
+                readonly foreground: {
+                    readonly default: "#101010";
+                    readonly subtle: "#58ca93";
+                };
+                readonly surface: {
+                    readonly default: "#36bf7d";
+                    readonly subtle: "#a2e2c3";
+                };
+            };
+            readonly warning: {
+                readonly border: "#ff9639";
+                readonly foreground: {
+                    readonly default: "#101010";
+                    readonly subtle: "#ff9639";
+                };
+                readonly surface: {
+                    readonly default: "#ff8010";
+                    readonly subtle: "#ffcca8";
+                };
+            };
+        };
+        readonly focus: {
+            readonly inverted: "#fcfbf2";
+            readonly primary: "#ebebeb";
+        };
+        readonly icon: {
+            readonly inverted: "#fcfbf2";
+            readonly primary: "#ebebeb";
+        };
+        readonly interactive: {
+            readonly affirmative: {
+                readonly border: {
+                    readonly strong: "#ebebeb";
+                    readonly subtle: "#58ca93";
+                };
+                readonly foreground: {
+                    readonly strong: "#191917";
+                    readonly subtle: "#58ca93";
+                };
+                readonly surface: {
+                    readonly strong: {
+                        readonly active: "#58ca93";
+                        readonly default: "#19a660";
+                        readonly hover: "#36bf7d";
+                    };
+                    readonly subtle: {
+                        readonly active: "#033d21";
+                        readonly hover: "#002e18";
+                    };
+                };
+            };
+            readonly brand: {
+                readonly border: {
+                    readonly strong: "#ebebeb";
+                };
+                readonly foreground: {
+                    readonly strong: "#191917";
+                };
+                readonly surface: {
+                    readonly strong: {
+                        readonly active: "#c6b5e2";
+                        readonly default: "#996cda";
+                        readonly hover: "#af90de";
+                    };
+                };
+            };
+            readonly destructive: {
+                readonly border: {
+                    readonly strong: "#ebebeb";
+                    readonly subtle: "#ff7964";
+                };
+                readonly foreground: {
+                    readonly strong: "#191917";
+                    readonly subtle: "#ff7964";
+                };
+                readonly surface: {
+                    readonly strong: {
+                        readonly active: "#ff7964";
+                        readonly default: "#f4412a";
+                        readonly hover: "#ff634a";
+                    };
+                    readonly subtle: {
+                        readonly active: "#521a16";
+                        readonly hover: "#3b1512";
+                    };
+                };
+            };
+            readonly functional: {
+                readonly border: {
+                    readonly inverted: "#f7f7f7";
+                    readonly strong: "#ebebeb";
+                    readonly subtle: "#ebebeb";
+                };
+                readonly foreground: {
+                    readonly inverted: "#f7f7f7";
+                    readonly strong: "#fcfbf2";
+                    readonly subtle: "#ebebeb";
+                };
+                readonly surface: {
+                    readonly strong: {
+                        readonly active: "#d3d3d3";
+                        readonly default: "#919191";
+                        readonly hover: "#b2afae";
+                    };
+                    readonly subtle: {
+                        readonly active: "#4c4c4c";
+                        readonly hover: "#3a3837";
+                        readonly inverted: {
+                            readonly active: "#3a3837";
+                            readonly hover: "#3f3f3f";
+                        };
+                    };
+                };
+            };
+            readonly highlight: {
+                readonly border: {
+                    readonly strong: "#f7f7f7";
+                };
+                readonly foreground: {
+                    readonly strong: "#101010";
+                };
+                readonly surface: {
+                    readonly strong: {
+                        readonly active: "#ffd885";
+                        readonly default: "#ffb921";
+                        readonly hover: "#ffc852";
+                    };
+                };
+            };
+            readonly neutral: {
+                readonly border: {
+                    readonly subtle: "#ebebeb";
+                };
+                readonly foreground: {
+                    readonly subtle: "#ebebeb";
+                };
+                readonly surface: {
+                    readonly subtle: {
+                        readonly active: "#30302c";
+                        readonly hover: "#282825";
+                    };
+                };
+            };
+        };
         readonly shadow: {
-            readonly broadbandGreenColor: "#506c21";
-            readonly cashbackLilacColor: "#8b2bc9";
-            readonly defaultColor: "#e7e6e6";
-            readonly energyBlueColor: "#326e7a";
-            readonly insuranceOrangeColor: "#9b4c0e";
-            readonly mobileRoseColor: "#a7266d";
-            readonly piggyPinkColor: "#8f358f";
-            readonly purpleColor: "#7a42c8";
+            readonly brand: "#7a42c8";
+            readonly broadband: "#506c21";
+            readonly cashback: "#8b2bc9";
+            readonly default: "#f7f7f7";
+            readonly energy: "#326e7a";
+            readonly insurance: "#9b4c0e";
+            readonly mobile: "#a7266d";
+            readonly pig: "#8f358f";
+        };
+        readonly surface: {
+            readonly brand: {
+                readonly default: "#996cda";
+                readonly strong: "#26164f";
+                readonly subtle: "#442484";
+            };
+            readonly broadband: {
+                readonly default: "#506c21";
+                readonly subtle: "#35421c";
+            };
+            readonly cashback: {
+                readonly default: "#8b2bc9";
+                readonly subtle: "#522270";
+            };
+            readonly energy: {
+                readonly default: "#326e7a";
+                readonly subtle: "#254348";
+            };
+            readonly highlight: {
+                readonly default: "#ffb921";
+                readonly subtle: "#756230";
+            };
+            readonly insurance: {
+                readonly default: "#9b4c0e";
+                readonly subtle: "#5a3213";
+            };
+            readonly mobile: {
+                readonly default: "#a7266d";
+                readonly subtle: "#601f42";
+            };
+            readonly neutral: {
+                readonly strong: "#232323";
+                readonly subtle: "#191917";
+            };
+            readonly pig: {
+                readonly default: "#8f358f";
+                readonly subtle: "#5d2167";
+            };
+        };
+        readonly text: {
+            readonly affirmative: "#58ca93";
+            readonly brand: "#af90de";
+            readonly inverted: "#191917";
+            readonly primary: "#ebebeb";
+            readonly secondary: "#b2afae";
         };
         readonly blue: {
             readonly '0': "#f8fbff";
@@ -1739,17 +2331,17 @@ export declare const darkTheme: {
         };
         readonly grey: {
             readonly '0': "#ffffff";
-            readonly '50': "#f6f5f5";
-            readonly '100': "#e7e6e6";
-            readonly '200': "#d1d0d0";
+            readonly '50': "#f7f7f7";
+            readonly '100': "#ebebeb";
+            readonly '200': "#d3d3d3";
             readonly '300': "#b2afae";
-            readonly '400': "#8a8686";
-            readonly '500': "#6f6c6b";
-            readonly '600': "#5f5c5b";
-            readonly '700': "#555352";
-            readonly '800': "#464444";
-            readonly '900': "#3e3c3b";
-            readonly '950': "#222222";
+            readonly '400': "#919191";
+            readonly '500': "#888888";
+            readonly '600': "#5b5b5b";
+            readonly '700': "#4c4c4c";
+            readonly '800': "#3f3f3f";
+            readonly '900': "#3a3837";
+            readonly '950': "#232323";
             readonly '975': "#191919";
             readonly '1000': "#101010";
         };
@@ -1817,16 +2409,16 @@ export declare const darkTheme: {
         readonly purple: {
             readonly '0': "#f7f6f9";
             readonly '50': "#eeebf4";
-            readonly '100': "#e6dff1";
-            readonly '200': "#ddd2ef";
-            readonly '300': "#d5c3ee";
-            readonly '400': "#a782db";
-            readonly '500': "#926fd1";
-            readonly '600': "#8850cf";
+            readonly '100': "#ddd5eb";
+            readonly '200': "#c6b5e2";
+            readonly '300': "#af90de";
+            readonly '400': "#996cda";
+            readonly '500': "#8851d6";
+            readonly '600': "#8149ce";
             readonly '700': "#7a42c8";
-            readonly '800': "#6538b8";
-            readonly '900': "#5a3285";
-            readonly '950': "#492d6f";
+            readonly '800': "#5c2ca9";
+            readonly '900': "#442484";
+            readonly '950': "#331c68";
             readonly '1000': "#26164f";
         };
         readonly red: {
@@ -1906,6 +2498,42 @@ export declare const themes: {
             readonly '4/6': "66.666%";
             readonly '5/6': "83.333%";
             readonly full: DimensionValue;
+            readonly none: 0;
+            readonly '2xs': {
+                readonly base: 2;
+                readonly md: 2;
+                readonly lg: 2;
+            };
+            readonly xs: {
+                readonly base: 4;
+                readonly md: 4;
+                readonly lg: 4;
+            };
+            readonly sm: {
+                readonly base: 8;
+                readonly md: 8;
+                readonly lg: 8;
+            };
+            readonly md: {
+                readonly base: 12;
+                readonly md: 12;
+                readonly lg: 12;
+            };
+            readonly lg: {
+                readonly base: 16;
+                readonly md: 16;
+                readonly lg: 16;
+            };
+            readonly xl: {
+                readonly base: 20;
+                readonly md: 24;
+                readonly lg: 24;
+            };
+            readonly '2xl': {
+                readonly base: 28;
+                readonly md: 28;
+                readonly lg: 40;
+            };
             readonly '0': 0;
             readonly '25': 2;
             readonly '50': 4;
@@ -2320,11 +2948,14 @@ export declare const themes: {
                     readonly margin: 16;
                 };
                 readonly spacing: {
-                    readonly lg: 20;
-                    readonly md: 16;
-                    readonly sm: 12;
-                    readonly xl: 28;
-                    readonly xs: 8;
+                    readonly '2xl': 28;
+                    readonly '2xs': 2;
+                    readonly lg: 16;
+                    readonly md: 12;
+                    readonly none: 0;
+                    readonly sm: 8;
+                    readonly xl: 20;
+                    readonly xs: 4;
                 };
             };
             readonly tablet: {
@@ -2346,11 +2977,14 @@ export declare const themes: {
                     readonly margin: 32;
                 };
                 readonly spacing: {
-                    readonly lg: 24;
-                    readonly md: 16;
-                    readonly sm: 12;
-                    readonly xl: 28;
-                    readonly xs: 8;
+                    readonly '2xl': 28;
+                    readonly '2xs': 2;
+                    readonly lg: 16;
+                    readonly md: 12;
+                    readonly none: 0;
+                    readonly sm: 8;
+                    readonly xl: 24;
+                    readonly xs: 4;
                 };
             };
             readonly desktop: {
@@ -2372,11 +3006,14 @@ export declare const themes: {
                     readonly margin: 32;
                 };
                 readonly spacing: {
-                    readonly lg: 24;
-                    readonly md: 16;
-                    readonly sm: 12;
-                    readonly xl: 40;
-                    readonly xs: 8;
+                    readonly '2xl': 40;
+                    readonly '2xs': 2;
+                    readonly lg: 16;
+                    readonly md: 12;
+                    readonly none: 0;
+                    readonly sm: 8;
+                    readonly xl: 24;
+                    readonly xs: 4;
                 };
             };
         };
@@ -2431,7 +3068,7 @@ export declare const themes: {
             readonly variants: {
                 readonly hardShadow: {
                     readonly '1': {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly shadowOffset: {
                             readonly width: -2;
                             readonly height: 2;
@@ -2441,7 +3078,7 @@ export declare const themes: {
                         readonly elevation: 10;
                     };
                     readonly '2': {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly shadowOffset: {
                             readonly width: 0;
                             readonly height: 3;
@@ -2451,7 +3088,7 @@ export declare const themes: {
                         readonly elevation: 10;
                     };
                     readonly '3': {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly shadowOffset: {
                             readonly width: 2;
                             readonly height: 2;
@@ -2461,7 +3098,7 @@ export declare const themes: {
                         readonly elevation: 10;
                     };
                     readonly '4': {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly shadowOffset: {
                             readonly width: 0;
                             readonly height: -3;
@@ -2471,7 +3108,7 @@ export declare const themes: {
                         readonly elevation: 10;
                     };
                     readonly '5': {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly shadowOffset: {
                             readonly width: 0;
                             readonly height: 3;
@@ -2483,7 +3120,7 @@ export declare const themes: {
                 };
                 readonly softShadow: {
                     readonly '1': {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly shadowOffset: {
                             readonly width: 0;
                             readonly height: 0;
@@ -2491,13 +3128,13 @@ export declare const themes: {
                         readonly shadowRadius: 10;
                         readonly shadowOpacity: 0.1;
                         readonly _android: {
-                            readonly shadowColor: "#3e3c3b";
+                            readonly shadowColor: "#3a3837";
                             readonly elevation: 5;
                             readonly shadowOpacity: 0.05;
                         };
                     };
                     readonly '2': {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly shadowOffset: {
                             readonly width: 0;
                             readonly height: 0;
@@ -2506,13 +3143,13 @@ export declare const themes: {
                         readonly elevation: 3;
                         readonly shadowOpacity: 0.1;
                         readonly _android: {
-                            readonly shadowColor: "#3e3c3b";
+                            readonly shadowColor: "#3a3837";
                             readonly elevation: 10;
                             readonly shadowOpacity: 0.1;
                         };
                     };
                     readonly '3': {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly shadowOffset: {
                             readonly width: 0;
                             readonly height: 0;
@@ -2521,13 +3158,13 @@ export declare const themes: {
                         readonly shadowOpacity: 0.1;
                         readonly elevation: 4;
                         readonly _android: {
-                            readonly shadowColor: "#3e3c3b";
+                            readonly shadowColor: "#3a3837";
                             readonly elevation: 15;
                             readonly shadowOpacity: 0.15;
                         };
                     };
                     readonly '4': {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly shadowOffset: {
                             readonly width: 0;
                             readonly height: 0;
@@ -2536,43 +3173,63 @@ export declare const themes: {
                         readonly shadowOpacity: 0.1;
                         readonly elevation: 10;
                         readonly _android: {
-                            readonly shadowColor: "#3e3c3b";
+                            readonly shadowColor: "#3a3837";
                             readonly elevation: 20;
                             readonly shadowOpacity: 0.2;
                         };
                     };
                 };
                 readonly space: {
-                    readonly none: {};
+                    readonly none: {
+                        readonly gap: {
+                            readonly base: 0;
+                            readonly md: 0;
+                            readonly lg: 0;
+                        };
+                    };
+                    readonly '2xs': {
+                        readonly gap: {
+                            readonly base: 2;
+                            readonly md: 2;
+                            readonly lg: 2;
+                        };
+                    };
                     readonly xs: {
+                        readonly gap: {
+                            readonly base: 4;
+                            readonly md: 4;
+                            readonly lg: 4;
+                        };
+                    };
+                    readonly sm: {
                         readonly gap: {
                             readonly base: 8;
                             readonly md: 8;
                             readonly lg: 8;
                         };
                     };
-                    readonly sm: {
+                    readonly md: {
                         readonly gap: {
                             readonly base: 12;
                             readonly md: 12;
                             readonly lg: 12;
                         };
                     };
-                    readonly md: {
+                    readonly lg: {
                         readonly gap: {
                             readonly base: 16;
                             readonly md: 16;
                             readonly lg: 16;
                         };
                     };
-                    readonly lg: {
+                    readonly xl: {
                         readonly gap: {
                             readonly base: 20;
                             readonly md: 24;
                             readonly lg: 24;
                         };
                     };
-                    readonly xl: {
+                    readonly '2xl': {
                         readonly gap: {
                             readonly base: 28;
                             readonly md: 28;
@@ -2588,19 +3245,250 @@ export declare const themes: {
         readonly color: {
             readonly white: "#ffffff";
             readonly black: "#000000";
-            readonly background: "#fcfbf2";
-            readonly background1: "#ffffff";
-            readonly backgroundPurple: "#7a42c8";
-            readonly invalidText: "#de2612";
+            readonly background: {
+                readonly brand: "#7a42c8";
+                readonly primary: "#fcfbf2";
+                readonly secondary: "#ffffff";
+            };
+            readonly border: {
+                readonly strong: "#101010";
+                readonly subtle: "#d4d2c0";
+            };
+            readonly feedback: {
+                readonly danger: {
+                    readonly border: "#de2612";
+                    readonly foreground: {
+                        readonly default: "#101010";
+                        readonly subtle: "#de2612";
+                    };
+                    readonly surface: {
+                        readonly default: "#ff634a";
+                        readonly subtle: "#ffa89d";
+                    };
+                };
+                readonly functional: {
+                    readonly border: "#5b5b5b";
+                    readonly foreground: {
+                        readonly default: "#101010";
+                        readonly subtle: "#5b5b5b";
+                    };
+                    readonly surface: {
+                        readonly default: "#919191";
+                        readonly subtle: "#d3d3d3";
+                    };
+                };
+                readonly info: {
+                    readonly border: "#1c6cd4";
+                    readonly foreground: {
+                        readonly default: "#101010";
+                        readonly subtle: "#1c6cd4";
+                    };
+                    readonly surface: {
+                        readonly default: "#6bb0ff";
+                        readonly subtle: "#bcddff";
+                    };
+                };
+                readonly positive: {
+                    readonly border: "#0f834a";
+                    readonly foreground: {
+                        readonly default: "#101010";
+                        readonly subtle: "#0f834a";
+                    };
+                    readonly surface: {
+                        readonly default: "#36bf7d";
+                        readonly subtle: "#a2e2c3";
+                    };
+                };
+                readonly warning: {
+                    readonly border: "#be5400";
+                    readonly foreground: {
+                        readonly default: "#101010";
+                        readonly subtle: "#be5400";
+                    };
+                    readonly surface: {
+                        readonly default: "#ff8010";
+                        readonly subtle: "#ffcca8";
+                    };
+                };
+            };
+            readonly focus: {
+                readonly inverted: "#fcfbf2";
+                readonly primary: "#101010";
+            };
+            readonly icon: {
+                readonly inverted: "#fcfbf2";
+                readonly primary: "#101010";
+            };
+            readonly interactive: {
+                readonly affirmative: {
+                    readonly border: {
+                        readonly strong: "#101010";
+                        readonly subtle: "#04663a";
+                    };
+                    readonly foreground: {
+                        readonly strong: "#fcfbf2";
+                        readonly subtle: "#04663a";
+                    };
+                    readonly surface: {
+                        readonly strong: {
+                            readonly active: "#074b2a";
+                            readonly default: "#0f834a";
+                            readonly hover: "#04663a";
+                        };
+                        readonly subtle: {
+                            readonly active: "#c5edda";
+                            readonly hover: "#e7f9f0";
+                        };
+                    };
+                };
+                readonly brand: {
+                    readonly border: {
+                        readonly strong: "#101010";
+                    };
+                    readonly foreground: {
+                        readonly strong: "#fcfbf2";
+                    };
+                    readonly surface: {
+                        readonly strong: {
+                            readonly active: "#442484";
+                            readonly default: "#7a42c8";
+                            readonly hover: "#5c2ca9";
+                        };
+                    };
+                };
+                readonly destructive: {
+                    readonly border: {
+                        readonly strong: "#101010";
+                        readonly subtle: "#a4281e";
+                    };
+                    readonly foreground: {
+                        readonly strong: "#fcfbf2";
+                        readonly subtle: "#a4281e";
+                    };
+                    readonly surface: {
+                        readonly strong: {
+                            readonly active: "#6b1f1a";
+                            readonly default: "#de2612";
+                            readonly hover: "#a4281e";
+                        };
+                        readonly subtle: {
+                            readonly active: "#ffe3df";
+                            readonly hover: "#fff3f1";
+                        };
+                    };
+                };
+                readonly functional: {
+                    readonly border: {
+                        readonly inverted: "#f7f7f7";
+                        readonly strong: "#101010";
+                        readonly subtle: "#101010";
+                    };
+                    readonly foreground: {
+                        readonly inverted: "#f7f7f7";
+                        readonly strong: "#fcfbf2";
+                        readonly subtle: "#101010";
+                    };
+                    readonly surface: {
+                        readonly strong: {
+                            readonly active: "#4c4c4c";
+                            readonly default: "#888888";
+                            readonly hover: "#5b5b5b";
+                        };
+                        readonly subtle: {
+                            readonly active: "#d3d3d3";
+                            readonly hover: "#ebebeb";
+                            readonly inverted: {
+                                readonly active: "#3a3837";
+                                readonly hover: "#3f3f3f";
+                            };
+                        };
+                    };
+                };
+                readonly highlight: {
+                    readonly border: {
+                        readonly strong: "#101010";
+                    };
+                    readonly foreground: {
+                        readonly strong: "#101010";
+                    };
+                    readonly surface: {
+                        readonly strong: {
+                            readonly active: "#d1950b";
+                            readonly default: "#ffb921";
+                            readonly hover: "#eba400";
+                        };
+                    };
+                };
+                readonly neutral: {
+                    readonly border: {
+                        readonly subtle: "#101010";
+                    };
+                    readonly foreground: {
+                        readonly subtle: "#101010";
+                    };
+                    readonly surface: {
+                        readonly subtle: {
+                            readonly active: "#f1efe4";
+                            readonly hover: "#f7f6eb";
+                        };
+                    };
+                };
+            };
             readonly shadow: {
-                readonly broadbandGreenColor: "#8cba3b";
-                readonly cashbackLilacColor: "#be7aeb";
-                readonly defaultColor: "#101010";
-                readonly energyBlueColor: "#6db5c3";
-                readonly insuranceOrangeColor: "#ff7b00";
-                readonly mobileRoseColor: "#ee6dbb";
-                readonly piggyPinkColor: "#f295ff";
-                readonly purpleColor: "#7a42c8";
+                readonly brand: "#7a42c8";
+                readonly broadband: "#8cba3b";
+                readonly cashback: "#be7aeb";
+                readonly default: "#101010";
+                readonly energy: "#6db5c3";
+                readonly insurance: "#ff7b00";
+                readonly mobile: "#ee6dbb";
+                readonly pig: "#f295ff";
+            };
+            readonly surface: {
+                readonly brand: {
+                    readonly default: "#7a42c8";
+                    readonly strong: "#26164f";
+                    readonly subtle: "#af90de";
+                };
+                readonly broadband: {
+                    readonly default: "#8cba3b";
+                    readonly subtle: "#d2e6b0";
+                };
+                readonly cashback: {
+                    readonly default: "#be7aeb";
+                    readonly subtle: "#dfbdf5";
+                };
+                readonly energy: {
+                    readonly default: "#6db5c3";
+                    readonly subtle: "#bddee4";
+                };
+                readonly highlight: {
+                    readonly default: "#ffb921";
+                    readonly subtle: "#ffd885";
+                };
+                readonly insurance: {
+                    readonly default: "#ff7b00";
+                    readonly subtle: "#ffb46d";
+                };
+                readonly mobile: {
+                    readonly default: "#ee6dbb";
+                    readonly subtle: "#fad0e9";
+                };
+                readonly neutral: {
+                    readonly strong: "#ffffff";
+                    readonly subtle: "#fcfbf2";
+                };
+                readonly pig: {
+                    readonly default: "#f295ff";
+                    readonly subtle: "#f9ceff";
+                };
+            };
+            readonly text: {
+                readonly affirmative: "#0f834a";
+                readonly brand: "#7a42c8";
+                readonly inverted: "#fcfbf2";
+                readonly primary: "#101010";
+                readonly secondary: "#888888";
             };
             readonly blue: {
                 readonly '0': "#f8fbff";
@@ -2679,17 +3567,17 @@ export declare const themes: {
             };
             readonly grey: {
                 readonly '0': "#ffffff";
-                readonly '50': "#f6f5f5";
-                readonly '100': "#e7e6e6";
-                readonly '200': "#d1d0d0";
+                readonly '50': "#f7f7f7";
+                readonly '100': "#ebebeb";
+                readonly '200': "#d3d3d3";
                 readonly '300': "#b2afae";
-                readonly '400': "#8a8686";
-                readonly '500': "#6f6c6b";
-                readonly '600': "#5f5c5b";
-                readonly '700': "#555352";
-                readonly '800': "#464444";
-                readonly '900': "#3e3c3b";
-                readonly '950': "#222222";
+                readonly '400': "#919191";
+                readonly '500': "#888888";
+                readonly '600': "#5b5b5b";
+                readonly '700': "#4c4c4c";
+                readonly '800': "#3f3f3f";
+                readonly '900': "#3a3837";
+                readonly '950': "#232323";
                 readonly '975': "#191919";
                 readonly '1000': "#101010";
             };
@@ -2757,16 +3645,16 @@ export declare const themes: {
             readonly purple: {
                 readonly '0': "#f7f6f9";
                 readonly '50': "#eeebf4";
-                readonly '100': "#e6dff1";
-                readonly '200': "#ddd2ef";
-                readonly '300': "#d5c3ee";
-                readonly '400': "#a782db";
-                readonly '500': "#926fd1";
-                readonly '600': "#8850cf";
+                readonly '100': "#ddd5eb";
+                readonly '200': "#c6b5e2";
+                readonly '300': "#af90de";
+                readonly '400': "#996cda";
+                readonly '500': "#8851d6";
+                readonly '600': "#8149ce";
                 readonly '700': "#7a42c8";
-                readonly '800': "#6538b8";
-                readonly '900': "#5a3285";
-                readonly '950': "#492d6f";
+                readonly '800': "#5c2ca9";
+                readonly '900': "#442484";
+                readonly '950': "#331c68";
                 readonly '1000': "#26164f";
             };
             readonly red: {
@@ -2823,7 +3711,7 @@ export declare const themes: {
             focusVisible: {
                 outlineStyle: string;
                 outlineWidth: number;
-                outlineColor: "#e7e6e6";
+                outlineColor: "#ebebeb";
                 outlineOffset: number;
             };
         };
@@ -2845,6 +3733,42 @@ export declare const themes: {
             readonly '4/6': "66.666%";
             readonly '5/6': "83.333%";
             readonly full: DimensionValue;
+            readonly none: 0;
+            readonly '2xs': {
+                readonly base: 2;
+                readonly md: 2;
+                readonly lg: 2;
+            };
+            readonly xs: {
+                readonly base: 4;
+                readonly md: 4;
+                readonly lg: 4;
+            };
+            readonly sm: {
+                readonly base: 8;
+                readonly md: 8;
+                readonly lg: 8;
+            };
+            readonly md: {
+                readonly base: 12;
+                readonly md: 12;
+                readonly lg: 12;
+            };
+            readonly lg: {
+                readonly base: 16;
+                readonly md: 16;
+                readonly lg: 16;
+            };
+            readonly xl: {
+                readonly base: 20;
+                readonly md: 24;
+                readonly lg: 24;
+            };
+            readonly '2xl': {
+                readonly base: 28;
+                readonly md: 28;
+                readonly lg: 40;
+            };
             readonly '0': 0;
             readonly '25': 2;
             readonly '50': 4;
@@ -3259,11 +4183,14 @@ export declare const themes: {
                     readonly margin: 16;
                 };
                 readonly spacing: {
-                    readonly lg: 20;
-                    readonly md: 16;
-                    readonly sm: 12;
-                    readonly xl: 28;
-                    readonly xs: 8;
+                    readonly '2xl': 28;
+                    readonly '2xs': 2;
+                    readonly lg: 16;
+                    readonly md: 12;
+                    readonly none: 0;
+                    readonly sm: 8;
+                    readonly xl: 20;
+                    readonly xs: 4;
                 };
             };
             readonly tablet: {
@@ -3285,11 +4212,14 @@ export declare const themes: {
                     readonly margin: 32;
                 };
                 readonly spacing: {
-                    readonly lg: 24;
-                    readonly md: 16;
-                    readonly sm: 12;
-                    readonly xl: 28;
-                    readonly xs: 8;
+                    readonly '2xl': 28;
+                    readonly '2xs': 2;
+                    readonly lg: 16;
+                    readonly md: 12;
+                    readonly none: 0;
+                    readonly sm: 8;
+                    readonly xl: 24;
+                    readonly xs: 4;
                 };
             };
             readonly desktop: {
@@ -3311,11 +4241,14 @@ export declare const themes: {
                     readonly margin: 32;
                 };
                 readonly spacing: {
-                    readonly lg: 24;
-                    readonly md: 16;
-                    readonly sm: 12;
-                    readonly xl: 40;
-                    readonly xs: 8;
+                    readonly '2xl': 40;
+                    readonly '2xs': 2;
+                    readonly lg: 16;
+                    readonly md: 12;
+                    readonly none: 0;
+                    readonly sm: 8;
+                    readonly xl: 24;
+                    readonly xs: 4;
                 };
             };
         };
@@ -3370,7 +4303,7 @@ export declare const themes: {
             readonly variants: {
                 readonly hardShadow: {
                     readonly '1': {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly shadowOffset: {
                             readonly width: -2;
                             readonly height: 2;
@@ -3380,7 +4313,7 @@ export declare const themes: {
                         readonly elevation: 10;
                     };
                     readonly '2': {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly shadowOffset: {
                             readonly width: 0;
                             readonly height: 3;
@@ -3390,7 +4323,7 @@ export declare const themes: {
                         readonly elevation: 10;
                     };
                     readonly '3': {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly shadowOffset: {
                             readonly width: 2;
                             readonly height: 2;
@@ -3400,7 +4333,7 @@ export declare const themes: {
                         readonly elevation: 10;
                     };
                     readonly '4': {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly shadowOffset: {
                             readonly width: 0;
                             readonly height: -3;
@@ -3410,7 +4343,7 @@ export declare const themes: {
                         readonly elevation: 10;
                     };
                     readonly '5': {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly shadowOffset: {
                             readonly width: 0;
                             readonly height: 3;
@@ -3422,7 +4355,7 @@ export declare const themes: {
                 };
                 readonly softShadow: {
                     readonly '1': {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly shadowOffset: {
                             readonly width: 0;
                             readonly height: 0;
@@ -3430,13 +4363,13 @@ export declare const themes: {
                         readonly shadowRadius: 10;
                         readonly shadowOpacity: 0.1;
                         readonly _android: {
-                            readonly shadowColor: "#3e3c3b";
+                            readonly shadowColor: "#3a3837";
                             readonly elevation: 5;
                             readonly shadowOpacity: 0.05;
                         };
                     };
                     readonly '2': {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly shadowOffset: {
                             readonly width: 0;
                             readonly height: 0;
@@ -3445,13 +4378,13 @@ export declare const themes: {
                         readonly elevation: 3;
                         readonly shadowOpacity: 0.1;
                         readonly _android: {
-                            readonly shadowColor: "#3e3c3b";
+                            readonly shadowColor: "#3a3837";
                             readonly elevation: 10;
                             readonly shadowOpacity: 0.1;
                         };
                     };
                     readonly '3': {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly shadowOffset: {
                             readonly width: 0;
                             readonly height: 0;
@@ -3460,13 +4393,13 @@ export declare const themes: {
                         readonly shadowOpacity: 0.1;
                         readonly elevation: 4;
                         readonly _android: {
-                            readonly shadowColor: "#3e3c3b";
+                            readonly shadowColor: "#3a3837";
                             readonly elevation: 15;
                             readonly shadowOpacity: 0.15;
                         };
                     };
                     readonly '4': {
-                        readonly shadowColor: "#3e3c3b";
+                        readonly shadowColor: "#3a3837";
                         readonly shadowOffset: {
                             readonly width: 0;
                             readonly height: 0;
@@ -3475,43 +4408,63 @@ export declare const themes: {
                         readonly shadowOpacity: 0.1;
                         readonly elevation: 10;
                         readonly _android: {
-                            readonly shadowColor: "#3e3c3b";
+                            readonly shadowColor: "#3a3837";
                             readonly elevation: 20;
                             readonly shadowOpacity: 0.2;
                         };
                     };
                 };
                 readonly space: {
-                    readonly none: {};
+                    readonly none: {
+                        readonly gap: {
+                            readonly base: 0;
+                            readonly md: 0;
+                            readonly lg: 0;
+                        };
+                    };
+                    readonly '2xs': {
+                        readonly gap: {
+                            readonly base: 2;
+                            readonly md: 2;
+                            readonly lg: 2;
+                        };
+                    };
                     readonly xs: {
+                        readonly gap: {
+                            readonly base: 4;
+                            readonly md: 4;
+                            readonly lg: 4;
+                        };
+                    };
+                    readonly sm: {
                         readonly gap: {
                             readonly base: 8;
                             readonly md: 8;
                             readonly lg: 8;
                         };
                     };
-                    readonly sm: {
+                    readonly md: {
                         readonly gap: {
                             readonly base: 12;
                             readonly md: 12;
                             readonly lg: 12;
                         };
                     };
-                    readonly md: {
+                    readonly lg: {
                         readonly gap: {
                             readonly base: 16;
                             readonly md: 16;
                             readonly lg: 16;
                         };
                     };
-                    readonly lg: {
+                    readonly xl: {
                         readonly gap: {
                             readonly base: 20;
                             readonly md: 24;
                             readonly lg: 24;
                         };
                     };
-                    readonly xl: {
+                    readonly '2xl': {
                         readonly gap: {
                             readonly base: 28;
                             readonly md: 28;
@@ -3527,19 +4480,250 @@ export declare const themes: {
         readonly color: {
             readonly white: "#ffffff";
             readonly black: "#000000";
-            readonly background: "#191917";
-            readonly background1: "#222222";
-            readonly backgroundPurple: "#7a42c8";
-            readonly invalidText: "#ff7964";
+            readonly background: {
+                readonly brand: "#996cda";
+                readonly primary: "#191917";
+                readonly secondary: "#232323";
+            };
+            readonly border: {
+                readonly strong: "#ebebeb";
+                readonly subtle: "#4c473d";
+            };
+            readonly feedback: {
+                readonly danger: {
+                    readonly border: "#ff7964";
+                    readonly foreground: {
+                        readonly default: "#101010";
+                        readonly subtle: "#ff7964";
+                    };
+                    readonly surface: {
+                        readonly default: "#ff634a";
+                        readonly subtle: "#ffa89d";
+                    };
+                };
+                readonly functional: {
+                    readonly border: "#b2afae";
+                    readonly foreground: {
+                        readonly default: "#101010";
+                        readonly subtle: "#b2afae";
+                    };
+                    readonly surface: {
+                        readonly default: "#919191";
+                        readonly subtle: "#d3d3d3";
+                    };
+                };
+                readonly info: {
+                    readonly border: "#6bb0ff";
+                    readonly foreground: {
+                        readonly default: "#101010";
+                        readonly subtle: "#6bb0ff";
+                    };
+                    readonly surface: {
+                        readonly default: "#6bb0ff";
+                        readonly subtle: "#bcddff";
+                    };
+                };
+                readonly positive: {
+                    readonly border: "#58ca93";
+                    readonly foreground: {
+                        readonly default: "#101010";
+                        readonly subtle: "#58ca93";
+                    };
+                    readonly surface: {
+                        readonly default: "#36bf7d";
+                        readonly subtle: "#a2e2c3";
+                    };
+                };
+                readonly warning: {
+                    readonly border: "#ff9639";
+                    readonly foreground: {
+                        readonly default: "#101010";
+                        readonly subtle: "#ff9639";
+                    };
+                    readonly surface: {
+                        readonly default: "#ff8010";
+                        readonly subtle: "#ffcca8";
+                    };
+                };
+            };
+            readonly focus: {
+                readonly inverted: "#fcfbf2";
+                readonly primary: "#ebebeb";
+            };
+            readonly icon: {
+                readonly inverted: "#fcfbf2";
+                readonly primary: "#ebebeb";
+            };
+            readonly interactive: {
+                readonly affirmative: {
+                    readonly border: {
+                        readonly strong: "#ebebeb";
+                        readonly subtle: "#58ca93";
+                    };
+                    readonly foreground: {
+                        readonly strong: "#191917";
+                        readonly subtle: "#58ca93";
+                    };
+                    readonly surface: {
+                        readonly strong: {
+                            readonly active: "#58ca93";
+                            readonly default: "#19a660";
+                            readonly hover: "#36bf7d";
+                        };
+                        readonly subtle: {
+                            readonly active: "#033d21";
+                            readonly hover: "#002e18";
+                        };
+                    };
+                };
+                readonly brand: {
+                    readonly border: {
+                        readonly strong: "#ebebeb";
+                    };
+                    readonly foreground: {
+                        readonly strong: "#191917";
+                    };
+                    readonly surface: {
+                        readonly strong: {
+                            readonly active: "#c6b5e2";
+                            readonly default: "#996cda";
+                            readonly hover: "#af90de";
+                        };
+                    };
+                };
+                readonly destructive: {
+                    readonly border: {
+                        readonly strong: "#ebebeb";
+                        readonly subtle: "#ff7964";
+                    };
+                    readonly foreground: {
+                        readonly strong: "#191917";
+                        readonly subtle: "#ff7964";
+                    };
+                    readonly surface: {
+                        readonly strong: {
+                            readonly active: "#ff7964";
+                            readonly default: "#f4412a";
+                            readonly hover: "#ff634a";
+                        };
+                        readonly subtle: {
+                            readonly active: "#521a16";
+                            readonly hover: "#3b1512";
+                        };
+                    };
+                };
+                readonly functional: {
+                    readonly border: {
+                        readonly inverted: "#f7f7f7";
+                        readonly strong: "#ebebeb";
+                        readonly subtle: "#ebebeb";
+                    };
+                    readonly foreground: {
+                        readonly inverted: "#f7f7f7";
+                        readonly strong: "#fcfbf2";
+                        readonly subtle: "#ebebeb";
+                    };
+                    readonly surface: {
+                        readonly strong: {
+                            readonly active: "#d3d3d3";
+                            readonly default: "#919191";
+                            readonly hover: "#b2afae";
+                        };
+                        readonly subtle: {
+                            readonly active: "#4c4c4c";
+                            readonly hover: "#3a3837";
+                            readonly inverted: {
+                                readonly active: "#3a3837";
+                                readonly hover: "#3f3f3f";
+                            };
+                        };
+                    };
+                };
+                readonly highlight: {
+                    readonly border: {
+                        readonly strong: "#f7f7f7";
+                    };
+                    readonly foreground: {
+                        readonly strong: "#101010";
+                    };
+                    readonly surface: {
+                        readonly strong: {
+                            readonly active: "#ffd885";
+                            readonly default: "#ffb921";
+                            readonly hover: "#ffc852";
+                        };
+                    };
+                };
+                readonly neutral: {
+                    readonly border: {
+                        readonly subtle: "#ebebeb";
+                    };
+                    readonly foreground: {
+                        readonly subtle: "#ebebeb";
+                    };
+                    readonly surface: {
+                        readonly subtle: {
+                            readonly active: "#30302c";
+                            readonly hover: "#282825";
+                        };
+                    };
+                };
+            };
             readonly shadow: {
-                readonly broadbandGreenColor: "#506c21";
-                readonly cashbackLilacColor: "#8b2bc9";
-                readonly defaultColor: "#e7e6e6";
-                readonly energyBlueColor: "#326e7a";
-                readonly insuranceOrangeColor: "#9b4c0e";
-                readonly mobileRoseColor: "#a7266d";
-                readonly piggyPinkColor: "#8f358f";
-                readonly purpleColor: "#7a42c8";
+                readonly brand: "#7a42c8";
+                readonly broadband: "#506c21";
+                readonly cashback: "#8b2bc9";
+                readonly default: "#f7f7f7";
+                readonly energy: "#326e7a";
+                readonly insurance: "#9b4c0e";
+                readonly mobile: "#a7266d";
+                readonly pig: "#8f358f";
+            };
+            readonly surface: {
+                readonly brand: {
+                    readonly default: "#996cda";
+                    readonly strong: "#26164f";
+                    readonly subtle: "#442484";
+                };
+                readonly broadband: {
+                    readonly default: "#506c21";
+                    readonly subtle: "#35421c";
+                };
+                readonly cashback: {
+                    readonly default: "#8b2bc9";
+                    readonly subtle: "#522270";
+                };
+                readonly energy: {
+                    readonly default: "#326e7a";
+                    readonly subtle: "#254348";
+                };
+                readonly highlight: {
+                    readonly default: "#ffb921";
+                    readonly subtle: "#756230";
+                };
+                readonly insurance: {
+                    readonly default: "#9b4c0e";
+                    readonly subtle: "#5a3213";
+                };
+                readonly mobile: {
+                    readonly default: "#a7266d";
+                    readonly subtle: "#601f42";
+                };
+                readonly neutral: {
+                    readonly strong: "#232323";
+                    readonly subtle: "#191917";
+                };
+                readonly pig: {
+                    readonly default: "#8f358f";
+                    readonly subtle: "#5d2167";
+                };
+            };
+            readonly text: {
+                readonly affirmative: "#58ca93";
+                readonly brand: "#af90de";
+                readonly inverted: "#191917";
+                readonly primary: "#ebebeb";
+                readonly secondary: "#b2afae";
             };
             readonly blue: {
                 readonly '0': "#f8fbff";
@@ -3618,17 +4802,17 @@ export declare const themes: {
             };
             readonly grey: {
                 readonly '0': "#ffffff";
-                readonly '50': "#f6f5f5";
-                readonly '100': "#e7e6e6";
-                readonly '200': "#d1d0d0";
+                readonly '50': "#f7f7f7";
+                readonly '100': "#ebebeb";
+                readonly '200': "#d3d3d3";
                 readonly '300': "#b2afae";
-                readonly '400': "#8a8686";
-                readonly '500': "#6f6c6b";
-                readonly '600': "#5f5c5b";
-                readonly '700': "#555352";
-                readonly '800': "#464444";
-                readonly '900': "#3e3c3b";
-                readonly '950': "#222222";
+                readonly '400': "#919191";
+                readonly '500': "#888888";
+                readonly '600': "#5b5b5b";
+                readonly '700': "#4c4c4c";
+                readonly '800': "#3f3f3f";
+                readonly '900': "#3a3837";
+                readonly '950': "#232323";
                 readonly '975': "#191919";
                 readonly '1000': "#101010";
             };
@@ -3696,16 +4880,16 @@ export declare const themes: {
             readonly purple: {
                 readonly '0': "#f7f6f9";
                 readonly '50': "#eeebf4";
-                readonly '100': "#e6dff1";
-                readonly '200': "#ddd2ef";
-                readonly '300': "#d5c3ee";
-                readonly '400': "#a782db";
-                readonly '500': "#926fd1";
-                readonly '600': "#8850cf";
+                readonly '100': "#ddd5eb";
+                readonly '200': "#c6b5e2";
+                readonly '300': "#af90de";
+                readonly '400': "#996cda";
+                readonly '500': "#8851d6";
+                readonly '600': "#8149ce";
                 readonly '700': "#7a42c8";
-                readonly '800': "#6538b8";
-                readonly '900': "#5a3285";
-                readonly '950': "#492d6f";
+                readonly '800': "#5c2ca9";
+                readonly '900': "#442484";
+                readonly '950': "#331c68";
                 readonly '1000': "#26164f";
             };
             readonly red: {