@newtonschool/grauity 1.3.1 → 2.0.0-beta.0

package/dist/index.d.ts

@@ -465,6 +465,446 @@ export interface GrauityInitProps {
 export function GrauityInit({ as, fontSize, multiplier, className, style, children, }: GrauityInitProps): JSX.Element;
 export const NS_DARK_THEME_CONFIG: {
     colors: {
+        background: {
+            subtle: {
+                primary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                secondary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                tertiary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                brand: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                success: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                error: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                warning: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                yellow: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                purple: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+            };
+            moderate: {
+                primary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                secondary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                tertiary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                brand: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                success: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                error: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                warning: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                yellow: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                purple: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+            };
+            emphasis: {
+                primary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                secondary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                tertiary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                brand: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                success: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                error: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                warning: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                yellow: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                purple: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+            };
+        };
+        text: {
+            subtle: {
+                primary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                secondary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                tertiary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                brand: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                success: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                error: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                warning: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                yellow: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                purple: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+            };
+            moderate: {
+                primary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                secondary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                tertiary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                brand: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                success: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                error: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                warning: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                yellow: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                purple: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+            };
+            emphasis: {
+                primary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                secondary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                white: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                tertiary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                brand: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                success: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                error: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                warning: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                yellow: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                purple: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+            };
+        };
+        border: {
+            subtle: {
+                primary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                secondary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                tertiary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                brand: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                success: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                error: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                warning: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                yellow: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                purple: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+            };
+            moderate: {
+                primary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                secondary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                tertiary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                brand: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                success: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                error: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                warning: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                yellow: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                purple: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+            };
+            emphasis: {
+                primary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                secondary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                tertiary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                brand: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                success: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                error: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                warning: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                yellow: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                purple: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+            };
+        };
+    };
+    visibility: {
+        lightVisible: string;
+        darkVisible: string;
+    };
+    legacyColors: {
         text: {
             textPrimary: string;
             textSecondary: string;
@@ -516,24 +956,451 @@ export const NS_DARK_THEME_CONFIG: {
             borderPurple: string;
             borderNeutral: string;
         };
-        alpha: {
-            alphaHover: string;
-            alphaPressed: string;
-            alphaOverlay: string;
+    };
+};
+export const NSGlobalStyle: import("styled-components").GlobalStyleComponent<any, import("styled-components").DefaultTheme>;
+export const NS_LIGHT_THEME_CONFIG: {
+    colors: {
+        background: {
+            subtle: {
+                primary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                secondary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                tertiary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                brand: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                success: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                error: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                warning: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                yellow: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                purple: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+            };
+            moderate: {
+                primary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                secondary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                tertiary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                brand: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                success: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                error: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                warning: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                yellow: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                purple: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+            };
+            emphasis: {
+                primary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                secondary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                tertiary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                brand: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                success: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                error: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                warning: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                yellow: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                purple: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+            };
+        };
+        text: {
+            subtle: {
+                primary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                secondary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                tertiary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                brand: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                success: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                error: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                warning: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                yellow: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                purple: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+            };
+            moderate: {
+                primary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                secondary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                tertiary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                brand: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                success: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                error: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                warning: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                yellow: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                purple: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+            };
+            emphasis: {
+                primary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                secondary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                white: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                tertiary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                brand: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                success: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                error: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                warning: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                yellow: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                purple: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+            };
+        };
+        border: {
+            subtle: {
+                primary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                secondary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                tertiary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                brand: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                success: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                error: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                warning: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                yellow: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                purple: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+            };
+            moderate: {
+                primary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                secondary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                tertiary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                brand: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                success: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                error: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                warning: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                yellow: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                purple: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+            };
+            emphasis: {
+                primary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                secondary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                tertiary: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                brand: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                success: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                error: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                warning: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                yellow: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+                purple: {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
+            };
         };
     };
     visibility: {
         lightVisible: string;
         darkVisible: string;
     };
-    font: {
-        fontFamily: string;
-        fontFamilyCode: string;
-    };
-};
-export const NSGlobalStyle: import("styled-components").GlobalStyleComponent<any, import("styled-components").DefaultTheme>;
-export const NS_LIGHT_THEME_CONFIG: {
-    colors: {
+    legacyColors: {
         text: {
             textPrimary: string;
             textSecondary: string;
@@ -585,19 +1452,6 @@ export const NS_LIGHT_THEME_CONFIG: {
             borderPurple: string;
             borderNeutral: string;
         };
-        alpha: {
-            alphaHover: string;
-            alphaPressed: string;
-            alphaOverlay: string;
-        };
-    };
-    visibility: {
-        lightVisible: string;
-        darkVisible: string;
-    };
-    font: {
-        fontFamily: string;
-        fontFamilyCode: string;
     };
 };
 /**
@@ -616,6 +1470,446 @@ export const GrauityThemeProvider: ({ themeConfig, children, }: {
     themeConfig?: {
         light: {
             colors: {
+                background: {
+                    subtle: {
+                        primary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        secondary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        tertiary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        brand: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        success: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        error: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        warning: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        yellow: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        purple: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                    };
+                    moderate: {
+                        primary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        secondary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        tertiary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        brand: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        success: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        error: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        warning: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        yellow: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        purple: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                    };
+                    emphasis: {
+                        primary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        secondary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        tertiary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        brand: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        success: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        error: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        warning: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        yellow: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        purple: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                    };
+                };
+                text: {
+                    subtle: {
+                        primary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        secondary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        tertiary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        brand: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        success: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        error: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        warning: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        yellow: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        purple: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                    };
+                    moderate: {
+                        primary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        secondary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        tertiary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        brand: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        success: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        error: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        warning: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        yellow: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        purple: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                    };
+                    emphasis: {
+                        primary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        secondary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        white: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        tertiary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        brand: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        success: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        error: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        warning: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        yellow: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        purple: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                    };
+                };
+                border: {
+                    subtle: {
+                        primary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        secondary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        tertiary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        brand: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        success: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        error: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        warning: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        yellow: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        purple: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                    };
+                    moderate: {
+                        primary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        secondary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        tertiary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        brand: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        success: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        error: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        warning: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        yellow: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        purple: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                    };
+                    emphasis: {
+                        primary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        secondary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        tertiary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        brand: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        success: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        error: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        warning: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        yellow: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        purple: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                    };
+                };
+            };
+            visibility: {
+                lightVisible: string;
+                darkVisible: string;
+            };
+            legacyColors: {
                 text: {
                     textPrimary: string;
                     textSecondary: string;
@@ -667,23 +1961,450 @@ export const GrauityThemeProvider: ({ themeConfig, children, }: {
                     borderPurple: string;
                     borderNeutral: string;
                 };
-                alpha: {
-                    alphaHover: string;
-                    alphaPressed: string;
-                    alphaOverlay: string;
+            };
+        };
+        dark: {
+            colors: {
+                background: {
+                    subtle: {
+                        primary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        secondary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        tertiary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        brand: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        success: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        error: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        warning: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        yellow: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        purple: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                    };
+                    moderate: {
+                        primary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        secondary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        tertiary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        brand: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        success: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        error: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        warning: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        yellow: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        purple: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                    };
+                    emphasis: {
+                        primary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        secondary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        tertiary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        brand: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        success: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        error: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        warning: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        yellow: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        purple: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                    };
+                };
+                text: {
+                    subtle: {
+                        primary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        secondary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        tertiary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        brand: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        success: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        error: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        warning: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        yellow: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        purple: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                    };
+                    moderate: {
+                        primary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        secondary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        tertiary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        brand: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        success: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        error: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        warning: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        yellow: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        purple: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                    };
+                    emphasis: {
+                        primary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        secondary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        white: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        tertiary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        brand: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        success: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        error: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        warning: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        yellow: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        purple: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                    };
+                };
+                border: {
+                    subtle: {
+                        primary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        secondary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        tertiary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        brand: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        success: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        error: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        warning: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        yellow: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        purple: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                    };
+                    moderate: {
+                        primary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        secondary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        tertiary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        brand: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        success: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        error: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        warning: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        yellow: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        purple: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                    };
+                    emphasis: {
+                        primary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        secondary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        tertiary: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        brand: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        success: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        error: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        warning: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        yellow: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                        purple: {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
+                    };
                 };
             };
             visibility: {
                 lightVisible: string;
                 darkVisible: string;
             };
-            font: {
-                fontFamily: string;
-                fontFamilyCode: string;
-            };
-        };
-        dark: {
-            colors: {
+            legacyColors: {
                 text: {
                     textPrimary: string;
                     textSecondary: string;
@@ -735,19 +2456,6 @@ export const GrauityThemeProvider: ({ themeConfig, children, }: {
                     borderPurple: string;
                     borderNeutral: string;
                 };
-                alpha: {
-                    alphaHover: string;
-                    alphaPressed: string;
-                    alphaOverlay: string;
-                };
-            };
-            visibility: {
-                lightVisible: string;
-                darkVisible: string;
-            };
-            font: {
-                fontFamily: string;
-                fontFamilyCode: string;
             };
         };
     };
@@ -1508,13 +3216,19 @@ export interface TableProps {
      * Default: `true`
      * */
     highlightHeaders?: boolean;
+    /**
+     * Determines if table rows should be hoverable
+     *
+     * Default: `false`
+     * */
+    hoverable?: boolean;
 }
 /**
  * A table is a component that is used to display data in a tabular format.
  * It is composed of rows and columns.
  */
 export const NSTable: {
-    ({ rows, columns, condensed, striped, borderAround, borderWithin, borderHorizontal, borderVertical, className, style, capitalizeHeaders, highlightHeaders, }: TableProps): JSX.Element;
+    ({ rows, columns, condensed, striped, borderAround, borderWithin, borderHorizontal, borderVertical, className, style, capitalizeHeaders, highlightHeaders, hoverable, }: TableProps): JSX.Element;
     NSTable: import("styled-components").StyledComponent<string, any, import("ui/elements/Table/types").TableComponentProps, never>;
     TableBody: import("styled-components").StyledComponent<string, any, import("ui/elements/Table/types").TableBodyComponentProps, never>;
     TableDataCell: import("styled-components").StyledComponent<string, any, import("ui/elements/Table/types").TableDataCellComponentProps, never>;
@@ -2060,10 +3774,6 @@ type PopOverOffset = {
     bottom?: number;
     right?: number;
 };
-type PopoverPosition = {
-    top: number;
-    left: number;
-};
 export interface PopOverProps {
     /**
      * Whether the PopOver is open or not.
@@ -2121,11 +3831,6 @@ export interface PopOverProps {
      * Height of the PopOver Content.
      */
     height?: string;
-    /**
-     * Custom position of the PopOver.
-     * This will directly open the popover at given position without any adjustments.
-     */
-    position?: PopoverPosition;
 }
 export function NSPopOver(props: PopOverProps): JSX.Element;
 interface DropdownOption {
@@ -2286,26 +3991,6 @@ export interface ChipProps {
      * Content to be displayed inside the chip.
      */
     children?: React.ReactNode;
-    /**
-     * Icon to be displayed in the button.
-     * @default null
-     * */
-    icon?: grauityIconName;
-    /**
-     * Size of the icon
-     * @default '12'
-     * */
-    iconSize?: grauityIconSizeName;
-    /**
-     * Position of the icon
-     * @default 'left'
-     * */
-    iconPosition?: ButtonIconPositions;
-    /**
-     * Additional styles to be used over the element
-     * @default {}
-     * */
-    style?: React.CSSProperties;
 }
 export const NSChip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement>>;
 export interface AccordionProps {
@@ -2488,7 +4173,6 @@ interface CalendarEvent<T = {}> {
     render?: EventRendererFn<T>;
     focused?: boolean;
 }
-type CalendarView = 'monthly' | 'weekly';
 export interface WeeklyCalendarProps<T = {}> {
     /**
      * An optional array of calendar events.
@@ -2587,78 +4271,6 @@ export interface PlaceholderProps {
 }
 export const NSPlaceholder: React.ForwardRefExoticComponent<PlaceholderProps & React.RefAttributes<HTMLDivElement>>;
 export function NSWeeklyCalendar<T>(props: WeeklyCalendarProps<T>): JSX.Element;
-export interface CalendarProps<T> {
-    /**
-     * Calendar view to display. Only supports monthly and weekly
-     * @default weekly
-     */
-    view?: CalendarView;
-    /**
-     * Calendar view callback when viewtype changes
-     */
-    onViewChange?: (viewType: CalendarView) => void;
-    /**
-     * Array of events to display in the calendar.
-     */
-    events: CalendarEvent<T>[];
-    /**
-     * Function to render each event in the calendar.
-     * @param item - The event item to render
-     */
-    eventRenderer: (item: CalendarEvent<T>, view: CalendarView) => React.ReactNode;
-    /**
-     * Whether to show navigation controls.
-     * @default true
-     */
-    shouldShowControls?: boolean;
-    /**
-     * Custom header content to display above the calendar.
-     * @default null
-     */
-    header?: React.ReactNode;
-    /**
-     * The date for which the calendar should render events
-     * @default new Date()
-     */
-    date: Date;
-    /**
-     * Callback fired when the date changes.
-     * @param date - The new date value.
-     * @default null
-     */
-    onDateChange?: (date: Date) => void;
-    /**
-     * Whether the calendar is in a loading state.
-     * @default false
-     */
-    loading?: boolean;
-    /**
-     * Weekly calendar properties, only applicable when type is 'weekly'.
-     */
-    weeklyCalendarProps?: {
-        /**
-         * The time in hours (24 hour format) to show at top initially.
-         * @default 8.5 (8:30 AM)
-         */
-        defaultScrollHour?: number;
-        /**
-         * A boolean indicating whether to scroll to the first event initially.
-         * @default true
-         */
-        shouldScrollToFirstEvent?: boolean;
-    };
-    /**
-     * Monthly calendar properties, only applicable when type is 'monthly'.
-     */
-    monthlyCalendarProps?: {
-        /**
-         * Optional alternative render function for events.
-         * @param item - The event item to render
-         * @default null
-         */
-        renderDayItem?: (item: CalendarEvent<T>, view: CalendarView) => React.ReactNode;
-    };
-}
 export interface MonthlyCalendarProps<T = {}> {
     /**
      * Array of events to display in the calendar.
@@ -2704,7 +4316,6 @@ export interface MonthlyCalendarProps<T = {}> {
     loading?: boolean;
 }
 export function NSMonthlyCalendar<T>(props: MonthlyCalendarProps<T>): JSX.Element;
-export function NSCalendar(props: CalendarProps<any>): JSX.Element;
 type RangeInputValue = {
     min: number;
     max: number;
@@ -2786,9 +4397,9 @@ enum TOOLTIP_PLACEMENT {
     RIGHT_END = "right-end"
 }
 interface TooltipConfig {
-    tooltip: {
-        maxWidth: string;
-        padding: string;
+    tooltip?: {
+        maxWidth?: string;
+        padding?: string;
         backgroundColor?: string;
     };
 }