@newtonschool/grauity 3.3.1 → 3.3.3

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import React, { NamedExoticComponent, ReactNode, RefAttributes, Component, HTMLAttributes, DetailedHTMLProps, HTMLInputTypeAttribute } from "react";
+import React, { 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";
@@ -525,2143 +525,106 @@ export interface GrauityInitProps {
  * But nonetheless all the grauity components should be the children of this component.
  * */
 export function GrauityInit({ as, fontSize, multiplier, className, style, children, }: GrauityInitProps): JSX.Element;
-export const NS_DARK_THEME_CONFIG: {
-    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;
-                };
+export enum NSThemeType {
+    Light = "light",
+    Dark = "dark"
+}
+export type NSTheme = `${NSThemeType}`;
+enum ThemeClass {
+    Light = "grauity-theme-light",
+    Dark = "grauity-theme-dark"
+}
+type ThemeClassName = `${ThemeClass}`;
+type RequiredProps = 'className';
+type ForbiddenProps = 'applyTheme' | 'invert' | 'as';
+type AllowedComponentProps<T extends React.ElementType> = Omit<React.ComponentPropsWithoutRef<T>, ForbiddenProps>;
+type EnforceComponentType<T extends React.ElementType> = RequiredProps extends keyof React.ComponentPropsWithoutRef<T> ? ForbiddenProps & keyof React.ComponentPropsWithoutRef<T> extends never ? T : never : never;
+export type NSThemeScopeProps<T extends React.ElementType> = {
+    /**
+     * The theme to apply within this scope. If not provided, it will
+     * inherit from the parent scope. Takes precedence over `invert` prop.
+     */
+    applyTheme?: NSTheme;
+    /**
+     * 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 a React component, it must accept a `className` prop and apply it at the outermost HTML element for the theme to be
+     * applied correctly.
+     *
+     * Defaults to a `div` element.
+     */
+    as?: EnforceComponentType<T>;
+} & AllowedComponentProps<T>;
+type GetThemeAndClassNameParams = {
+    /**
+     * The theme to apply within this scope.
+     */
+    applyTheme?: NSTheme;
+    /**
+     * The parent theme to inherit from, defaults to 'light'
+     */
+    parentTheme?: NSTheme;
+    /**
+     * If true, it will invert the theme from the parent scope
+     */
+    invert?: boolean;
+};
+type ThemeColorObjType = {
+    [colorCategory: string]: {
+        [colorIntensity: string]: {
+            [colorName: string]: {
+                [colorState: string]: 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;
-        };
-    };
 };
+type ThemeConfigType = {
+    colors: ThemeColorObjType;
+    [otherThemeProperty: string]: any;
+};
+export const NS_DARK_THEME_CONFIG: ThemeConfigType;
 export const NSGlobalStyle: NamedExoticComponent<any>;
-export const NS_LIGHT_THEME_CONFIG: {
-    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;
-        };
-    };
+export const NS_LIGHT_THEME_CONFIG: ThemeConfigType;
+export const NSThemeScopeContext: Context<{
+    theme: NSTheme;
+}>;
+/**
+ * Key used in styled-components theme object to store the current scoped theme.
+ */
+export const NS_SC_THEME_SCOPE_THEME_KEY = "scopedTheme";
+/**
+ * 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 getNSThemeAndThemeClassName: ({ applyTheme, parentTheme, invert, }: GetThemeAndClassNameParams) => {
+    theme: NSTheme;
+    themeClassName: ThemeClassName;
 };
+export const NSThemeScopeProvider: ({ applyTheme, children, }: {
+    applyTheme?: NSTheme;
+    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
+ * Wrap your root level element (e.g. in your App component) with this provider.
  *
- * @returns {React.ReactNode} - Returns the child components wrapped in the theme provider
+ * It uses `ThemeScope` to set the initial theme for the application that you provide
+ * using the `rootThemeScopeTheme` prop. You can then use ThemeScope anywhere in
+ * your application to switch themes for that section of the app.
  */
-export const GrauityThemeProvider: ({ themeConfig, children, }: {
+export const GrauityThemeProvider: ({ themeConfig, children, rootThemeScopeTheme, }: {
     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;
-                };
-            };
-        };
+        [theme: string]: ThemeConfigType;
     };
-    children?: any;
+    children?: React.ReactNode;
+    rootThemeScopeTheme?: NSTheme;
 }) => JSX.Element;
 export const NSThemeContext: React.Context<any>;
 interface ThemeWrapperProps {
@@ -3551,6 +1514,32 @@ export const NSTable: {
     TableHeadingCell: IStyledComponentBase<"web", Substitute<React.DetailedHTMLProps<React.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, TableHeadingCellComponentProps>> & string;
     TableRow: IStyledComponentBase<"web", Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, TableRowComponentProps>> & string;
 };
+/**
+ * `ThemeScope` is used to apply a different theme to a section of your application.
+ * You can use the `applyTheme` prop to set the theme to either 'light' or 'dark'.
+ * If you want to invert the current theme, you can use the `invert` prop.
+ *
+ * ThemeScope also provides a way to detect the locally scoped theme in any child styled-component
+ * using the `scopedTheme` prop from the theme object, i.e. by accessing `props.theme.scopedTheme`.
+ *
+ * To only detect the current theme (without changing it), you can use the `useThemeScope` hook.
+ */
+export function NSThemeScope<T extends React.ElementType = 'div'>({ applyTheme, invert, as, className, children, ...rest }: NSThemeScopeProps<T>): JSX.Element;
+/**
+ * `useThemeScope` is a hook that allows you to get the current scoped theme (set using `ThemeScope`).
+ *
+ * You can use this hook in any child component of the `ThemeScope` wrapper to get the current theme.
+ */
+export function useNSThemeScope(): {
+    /**
+     * The current scoped theme name (i.e., 'light' or 'dark')
+     */
+    theme: "light" | "dark";
+    /**
+     * Class name used for applying the theme.
+     */
+    themeClassName: "grauity-theme-light" | "grauity-theme-dark";
+};
 export interface OverlayProps {
     /**
      * Content to be displayed inside the Overlay.
@@ -5828,6 +3817,12 @@ export const NSPagination: (props: PaginationProps) => JSX.Element;
 export const NSSuccessMessage: (props: SuccessMessageProps) => JSX.Element;
 type OtpFieldColors = TextFieldColors;
 export interface OtpInputFieldProps {
+    /**
+     * The initial value of the OTP input fields.
+     * @default ''
+     * @type string
+     */
+    value?: string;
     /**
      * The label displayed above the OTP input fields.
      * @type string
@@ -5855,6 +3850,17 @@ export interface OtpInputFieldProps {
             value: string;
         };
     }) => void;
+    /**
+     * Callback triggered when the whole OTP input field loses focus.
+     * @param event - The event object containing the updated OTP value.
+     * @type (event: { target: { name: string; value: string } }) => void
+     */
+    onBlur?: (event: {
+        target: {
+            name: string;
+            value: string;
+        };
+    }) => void;
     /**
      * Inline styles applied to the OTP input fields.
      * @type React.CSSProperties