@newtonschool/grauity 3.0.22 → 3.0.23-beta.1

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import React, { NamedExoticComponent, ReactNode, RefAttributes, Component, HTMLAttributes, DetailedHTMLProps, HTMLInputTypeAttribute } from "react";
+import React, { PropsWithChildren, NamedExoticComponent, Context, ReactNode, RefAttributes, Component, HTMLAttributes, DetailedHTMLProps, HTMLInputTypeAttribute } from "react";
 import { Substitute, IStyledComponentBase } from "styled-components/dist/types";
 import { HTMLMotionProps, ForwardRefComponent } from "framer-motion";
 import { FastOmit } from "styled-components";
@@ -1051,6 +1051,54 @@ export const NS_DARK_THEME_CONFIG: {
         };
     };
 };
+export enum GrauityThemeType {
+    Light = "light",
+    Dark = "dark"
+}
+export type GrauityTheme = `${GrauityThemeType}`;
+enum ThemeClass {
+    Light = "grauity-theme-light",
+    Dark = "grauity-theme-dark"
+}
+type ThemeClassName = `${ThemeClass}`;
+export type GrauityThemeScopeProps = PropsWithChildren<{
+    /**
+     * The theme to apply within this scope. If not provided, it will
+     * inherit from the parent scope.
+     */
+    applyTheme?: GrauityTheme;
+    /**
+     * If true, it will apply the invert of the parent theme.
+     */
+    invert?: boolean;
+    /**
+     * The HTML element (like `'div'`) or React component to render as the root of this
+     * theme scope. If providing a React component, it should accept a `className` prop
+     * for the theme to be applied correctly.
+     *
+     * Defaults to a `div` element.
+     */
+    as?: React.ElementType;
+    /**
+     * Additional class names to apply to the current theme scope's root element
+     * (see `ThemeScopeProps.as`)
+     */
+    className?: string;
+}>;
+type GetThemeAndClassNameParams = {
+    /**
+     * The theme to apply within this scope.
+     */
+    applyTheme?: GrauityTheme;
+    /**
+     * The parent theme to inherit from, defaults to 'light'
+     */
+    parentTheme?: GrauityTheme;
+    /**
+     * If true, it will invert the theme from the parent scope
+     */
+    invert?: boolean;
+};
 export const NSGlobalStyle: NamedExoticComponent<any>;
 export const NS_LIGHT_THEME_CONFIG: {
     colors: {
@@ -1582,1082 +1630,34 @@ export const NS_LIGHT_THEME_CONFIG: {
         };
     };
 };
+export const GrauityThemeScopeContext: Context<{
+    theme: GrauityTheme;
+}>;
+/**
+ * Returns the theme and its corresponding class name based on the provided
+ * applyTheme and parentTheme. If applyTheme is not provided, it will inherit
+ * from the parentTheme. If invert is true, it will switch between light and dark themes.
+ * @returns {{ theme: Theme; themeClassName: ThemeClassName }} - The new theme and its class name.
+ */
+export const getGrauityThemeAndThemeClassName: ({ applyTheme, parentTheme, invert, }: GetThemeAndClassNameParams) => {
+    theme: GrauityTheme;
+    themeClassName: ThemeClassName;
+};
+export const GrauityThemeScopeProvider: ({ applyTheme, children, }: {
+    applyTheme?: GrauityTheme;
+    children?: React.ReactNode;
+}) => JSX.Element;
 /**
  * GrauityThemeProvider allows you to use multiple themes in your
  * application simultaneously, like light and dark mode.
  *
  * Wrap your app/components with this provider and also provide class name
  * of `'grauity-theme-light'` or `'grauity-theme-dark'` to the parent div of your app/component.
- *
- * @param {object} themeConfig - Configuration object for the theme
- * @param {React.ReactNode} children - Child components
- *
- * @returns {React.ReactNode} - Returns the child components wrapped in the theme provider
  */
-export const GrauityThemeProvider: ({ themeConfig, children, }: {
-    themeConfig?: {
-        light: {
-            colors: {
-                bg: {
-                    subtle: {
-                        primary: {
-                            default: string;
-                            hover: string;
-                            disabled: string;
-                        };
-                        'invert-primary': {
-                            default: string;
-                            hover: string;
-                            disabled: string;
-                        };
-                        secondary: {
-                            default: string;
-                            hover: string;
-                            disabled: string;
-                        };
-                        'invert-secondary': {
-                            default: string;
-                            hover: string;
-                            disabled: string;
-                        };
-                        tertiary: {
-                            default: string;
-                            hover: string;
-                            disabled: string;
-                        };
-                        'invert-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;
-                        };
-                        'invert-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;
-                        };
-                        'invert-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;
-                        };
-                        'invert-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;
-                        };
-                        'invert-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;
-                    textDisabled: string;
-                    textAction: string;
-                    textAction2: string;
-                    textBrand: string;
-                    textSuccess: string;
-                    textError: string;
-                    textWarning: string;
-                    textYellow: string;
-                    textPurple: string;
-                };
-                background: {
-                    bgPrimary: string;
-                    bgSecondary: string;
-                    bgTertiary: string;
-                    bgBrand: string;
-                    bgSuccess: string;
-                    bgError: string;
-                    bgWarning: string;
-                    bgYellow: string;
-                    bgPurple: string;
-                    bgDisabled: string;
-                    bgActionBrand: string;
-                    bgActionSuccess: string;
-                    bgActionError: string;
-                    bgActionWarning: string;
-                    bgActionYellow: string;
-                    bgActionPurple: string;
-                    bgInvertPrimary: string;
-                    bgInvertSecondary: string;
-                    bgInvertTertiary: string;
-                    bgPrimaryHover: string;
-                    bgInvertPrimaryHover: string;
-                    bgActionBrandHover: string;
-                    bgActionSuccessHover: string;
-                    bgActionErrorHover: string;
-                    bgActionWarningHover: string;
-                    bgActionYellowHover: string;
-                };
-                border: {
-                    border: string;
-                    borderBrand: string;
-                    borderSuccess: string;
-                    borderError: string;
-                    borderWarning: string;
-                    borderYellow: string;
-                    borderPurple: string;
-                    borderNeutral: string;
-                };
-            };
-        };
-        dark: {
-            colors: {
-                bg: {
-                    subtle: {
-                        primary: {
-                            default: string;
-                            hover: string;
-                            disabled: string;
-                        };
-                        'invert-primary': {
-                            default: string;
-                            hover: string;
-                            disabled: string;
-                        };
-                        secondary: {
-                            default: string;
-                            hover: string;
-                            disabled: string;
-                        };
-                        'invert-secondary': {
-                            default: string;
-                            hover: string;
-                            disabled: string;
-                        };
-                        tertiary: {
-                            default: string;
-                            hover: string;
-                            disabled: string;
-                        };
-                        'invert-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;
-                        };
-                        'invert-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;
-                        };
-                        'invert-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;
-                        };
-                        'invert-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;
-                        };
-                        'invert-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;
-                    textDisabled: string;
-                    textAction: string;
-                    textAction2: string;
-                    textBrand: string;
-                    textSuccess: string;
-                    textError: string;
-                    textWarning: string;
-                    textYellow: string;
-                    textPurple: string;
-                };
-                background: {
-                    bgPrimary: string;
-                    bgSecondary: string;
-                    bgTertiary: string;
-                    bgBrand: string;
-                    bgSuccess: string;
-                    bgError: string;
-                    bgWarning: string;
-                    bgYellow: string;
-                    bgPurple: string;
-                    bgDisabled: string;
-                    bgActionBrand: string;
-                    bgActionSuccess: string;
-                    bgActionError: string;
-                    bgActionWarning: string;
-                    bgActionYellow: string;
-                    bgActionPurple: string;
-                    bgInvertPrimary: string;
-                    bgInvertSecondary: string;
-                    bgInvertTertiary: string;
-                    bgPrimaryHover: string;
-                    bgInvertPrimaryHover: string;
-                    bgActionBrandHover: string;
-                    bgActionSuccessHover: string;
-                    bgActionErrorHover: string;
-                    bgActionWarningHover: string;
-                    bgActionYellowHover: string;
-                };
-                border: {
-                    border: string;
-                    borderBrand: string;
-                    borderSuccess: string;
-                    borderError: string;
-                    borderWarning: string;
-                    borderYellow: string;
-                    borderPurple: string;
-                    borderNeutral: string;
-                };
-            };
-        };
-    };
-    children?: any;
+export const GrauityThemeProvider: ({ themeConfig, children, applyTheme, }: {
+    themeConfig?: Record<string, any>;
+    children?: React.ReactNode;
+    applyTheme?: GrauityTheme;
 }) => JSX.Element;
 export const NSThemeContext: React.Context<any>;
 interface ThemeWrapperProps {
@@ -6353,5 +5353,6 @@ interface FormFieldProps {
  * - Allows updating form data and handling individual field changes.
  */
 export const useNSForm: ({ formConfig, rowStyles, whenToValidate, isMobileView, shouldFocusOnFirstError, shouldSubmitOnEnter, shouldShowSubmitButton, submitButtonProps, onSubmit, }: NSUseFormProps) => NSUseFormReturnProps;
+export const GrauityThemeScope: ({ applyTheme, invert, as: RootComponent, children, className, }: GrauityThemeScopeProps) => JSX.Element;
 
 //# sourceMappingURL=index.d.ts.map