@newtonschool/grauity 3.0.23-beta.1 → 3.0.23

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, NamedExoticComponent, Context, ReactNode, RefAttributes, Component, HTMLAttributes, DetailedHTMLProps, HTMLInputTypeAttribute } from "react";
+import React, { NamedExoticComponent, 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,54 +1051,6 @@ 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: {
@@ -1630,34 +1582,1082 @@ 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, applyTheme, }: {
-    themeConfig?: Record<string, any>;
-    children?: React.ReactNode;
-    applyTheme?: GrauityTheme;
+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;
 }) => JSX.Element;
 export const NSThemeContext: React.Context<any>;
 interface ThemeWrapperProps {
@@ -5353,6 +6353,5 @@ 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