@newtonschool/grauity 2.2.1 → 3.0.0-beta.2

package/dist/index.d.ts

@@ -3,6 +3,28 @@ import { Substitute, IStyledComponentBase } from "styled-components/dist/types";
 import { HTMLMotionProps, ForwardRefComponent } from "framer-motion";
 import { FastOmit } from "styled-components";
 import { Schema } from "yup";
+/**
+ * The list of colors which should be available for all action components.
+ */
+enum ACTION_COLORS {
+    BRAND = "brand",
+    SUCCESS = "success",
+    WARNING = "warning",
+    ERROR = "error"
+}
+/**
+ * The list of colors which should be available for all text components.
+ */
+enum TEXT_COLORS {
+    PRIMARY = "primary",
+    SECONDARY = "secondary",
+    BRAND = "brand",
+    SUCCESS = "success",
+    WARNING = "warning",
+    ERROR = "error",
+    YELLOW = "yellow",
+    PURPLE = "purple"
+}
 export const ICON_TAGS: {
     "exclamation-circle-filled": string[];
     "exclamation-circle": string[];
@@ -502,16 +524,31 @@ export const NS_DARK_THEME_CONFIG: {
                     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;
@@ -739,6 +776,11 @@ export const NS_DARK_THEME_CONFIG: {
                     hover: string;
                     disabled: string;
                 };
+                'invert-primary': {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
                 secondary: {
                     default: string;
                     hover: string;
@@ -793,6 +835,11 @@ export const NS_DARK_THEME_CONFIG: {
                     hover: string;
                     disabled: string;
                 };
+                'invert-primary': {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
                 secondary: {
                     default: string;
                     hover: string;
@@ -840,6 +887,11 @@ export const NS_DARK_THEME_CONFIG: {
                     hover: string;
                     disabled: string;
                 };
+                'invert-primary': {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
                 secondary: {
                     default: string;
                     hover: string;
@@ -887,6 +939,11 @@ export const NS_DARK_THEME_CONFIG: {
                     hover: string;
                     disabled: string;
                 };
+                'invert-primary': {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
                 secondary: {
                     default: string;
                     hover: string;
@@ -998,16 +1055,31 @@ export const NS_LIGHT_THEME_CONFIG: {
                     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;
@@ -1235,6 +1307,11 @@ export const NS_LIGHT_THEME_CONFIG: {
                     hover: string;
                     disabled: string;
                 };
+                'invert-primary': {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
                 secondary: {
                     default: string;
                     hover: string;
@@ -1289,6 +1366,11 @@ export const NS_LIGHT_THEME_CONFIG: {
                     hover: string;
                     disabled: string;
                 };
+                'invert-primary': {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
                 secondary: {
                     default: string;
                     hover: string;
@@ -1336,6 +1418,11 @@ export const NS_LIGHT_THEME_CONFIG: {
                     hover: string;
                     disabled: string;
                 };
+                'invert-primary': {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
                 secondary: {
                     default: string;
                     hover: string;
@@ -1383,6 +1470,11 @@ export const NS_LIGHT_THEME_CONFIG: {
                     hover: string;
                     disabled: string;
                 };
+                'invert-primary': {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
                 secondary: {
                     default: string;
                     hover: string;
@@ -1507,16 +1599,31 @@ export const GrauityThemeProvider: ({ themeConfig, children, }: {
                             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;
@@ -1744,6 +1851,11 @@ export const GrauityThemeProvider: ({ themeConfig, children, }: {
                             hover: string;
                             disabled: string;
                         };
+                        'invert-primary': {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
                         secondary: {
                             default: string;
                             hover: string;
@@ -1798,6 +1910,11 @@ export const GrauityThemeProvider: ({ themeConfig, children, }: {
                             hover: string;
                             disabled: string;
                         };
+                        'invert-primary': {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
                         secondary: {
                             default: string;
                             hover: string;
@@ -1845,6 +1962,11 @@ export const GrauityThemeProvider: ({ themeConfig, children, }: {
                             hover: string;
                             disabled: string;
                         };
+                        'invert-primary': {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
                         secondary: {
                             default: string;
                             hover: string;
@@ -1892,6 +2014,11 @@ export const GrauityThemeProvider: ({ themeConfig, children, }: {
                             hover: string;
                             disabled: string;
                         };
+                        'invert-primary': {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
                         secondary: {
                             default: string;
                             hover: string;
@@ -2002,16 +2129,31 @@ export const GrauityThemeProvider: ({ themeConfig, children, }: {
                             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;
@@ -2239,6 +2381,11 @@ export const GrauityThemeProvider: ({ themeConfig, children, }: {
                             hover: string;
                             disabled: string;
                         };
+                        'invert-primary': {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
                         secondary: {
                             default: string;
                             hover: string;
@@ -2293,6 +2440,11 @@ export const GrauityThemeProvider: ({ themeConfig, children, }: {
                             hover: string;
                             disabled: string;
                         };
+                        'invert-primary': {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
                         secondary: {
                             default: string;
                             hover: string;
@@ -2340,6 +2492,11 @@ export const GrauityThemeProvider: ({ themeConfig, children, }: {
                             hover: string;
                             disabled: string;
                         };
+                        'invert-primary': {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
                         secondary: {
                             default: string;
                             hover: string;
@@ -2387,6 +2544,11 @@ export const GrauityThemeProvider: ({ themeConfig, children, }: {
                             hover: string;
                             disabled: string;
                         };
+                        'invert-primary': {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
                         secondary: {
                             default: string;
                             hover: string;
@@ -2499,6 +2661,14 @@ interface ThemeWrapperProps {
 }
 export const NSThemeWrapper: ({ children, defaultTheme, usePreferredColorScheme, }: ThemeWrapperProps) => JSX.Element;
 export const NSThemeConsumer: React.Consumer<any>;
+export enum ALERT_VARIANTS_ENUM {
+    PRIMARY = "primary",
+    SUCCESS = "success",
+    WARNING = "warning",
+    ERROR = "error",
+    DEFAULT = "default"
+}
+export const ALERT_VARIANTS: ALERT_VARIANTS_ENUM[];
 export interface IconProps {
     /**
      * Icon can have the aria hidden attribute
@@ -2593,6 +2763,7 @@ interface StyledLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
     ref?: React.Ref<HTMLLabelElement>;
     isRequired?: boolean;
     isDisabled?: boolean;
+    color?: `${TEXT_COLORS}`;
 }
 /**
  * Interface representing the properties for a styled button component.
@@ -2603,18 +2774,27 @@ interface StyledLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
 interface StyledButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     ref?: React.Ref<HTMLButtonElement>;
 }
-type ButtonVariants = 'primary' | 'secondary' | 'tertiary' | 'success' | 'danger' | 'warning' | 'primary-outlined' | 'secondary-outlined' | 'tertiary-outlined' | 'success-outlined' | 'danger-outlined' | 'warning-outlined';
-type ButtonSizes = 'small' | 'medium' | 'large' | 'extra-large';
-type ButtonIconPositions = 'left' | 'right';
+type ButtonVariants = `${BUTTON_VARIANTS_ENUM}`;
+type ButtonColors = `${BUTTON_COLORS_ENUM}`;
+type ButtonSizes = `${BUTTON_SIZES_ENUM}`;
+type ButtonIconPositions = `${BUTTON_ICON_POSITIONS_ENUM}`;
 export interface ButtonProps extends StyledButtonProps {
     /**
      * Variant of the button
      *
-     * Available choices: `primary`, `secondary`, `tertiary`, `success`, `danger`, `warning`, `primary-outlined`, `secondary-outlined`, `tertiary-outlined`, `success-outlined`, `danger-outlined`, `warning-outlined`
+     * Available choices: `primary` (solid), `secondary` (outlined), `tertiary` (text)
      *
      * Default: `primary`
      * */
     variant?: ButtonVariants;
+    /**
+     * Color of the button
+     *
+     * Available choices: `brand` (blue), `neutral` (black), `error` (red), `success` (green), `warning` (orange)
+     *
+     * Default: `brand`
+     * */
+    color?: ButtonColors;
     /**
      * Size of the button
      * Available choices: `small`, `medium`, `large`
@@ -2627,7 +2807,7 @@ export interface ButtonProps extends StyledButtonProps {
      * */
     icon?: grauityIconName;
     /**
-     * Size of the icon
+     * Size of the icon, defaults to `20`
      * */
     iconSize?: grauityIconSizeName;
     /**
@@ -2705,11 +2885,19 @@ interface IconButtonProps {
     /**
      * Variant of the button
      *
-     * Available choices: `primary`, `secondary`, `tertiary`, `success`, `danger`, `warning`, `primary-outlined`, `secondary-outlined`, `tertiary-outlined`, `success-outlined`, `danger-outlined`, `warning-outlined`
+     * Available choices: `primary` (solid filled), `secondary` (outlined), `tertiary (text)`
      *
      * Default: `primary`
      * */
     variant?: ButtonVariants;
+    /**
+     * Color of the button
+     *
+     * Available choices: `brand` (blue), `neutral` (black), `error` (red), `success` (green), `warning` (orange)
+     *
+     * Default: `brand`
+     * */
+    color?: ButtonColors;
     /**
      * Size of the button
      * Available choices: `small`, `medium`, `large`
@@ -2796,16 +2984,14 @@ interface ButtonGroupProps {
 export enum BUTTON_VARIANTS_ENUM {
     PRIMARY = "primary",
     SECONDARY = "secondary",
-    TERTIARY = "tertiary",
+    TERTIARY = "tertiary"
+}
+enum BUTTON_COLORS_ENUM {
+    BRAND = "brand",
+    NEUTRAL = "neutral",
+    ERROR = "error",
     SUCCESS = "success",
-    DANGER = "danger",
-    WARNING = "warning",
-    PRIMARY_OUTLINED = "primary-outlined",
-    SECONDARY_OUTLINED = "secondary-outlined",
-    TERTIARY_OUTLINED = "tertiary-outlined",
-    SUCCESS_OUTLINED = "success-outlined",
-    DANGER_OUTLINED = "danger-outlined",
-    WARNING_OUTLINED = "warning-outlined"
+    WARNING = "warning"
 }
 export enum BUTTON_SIZES_ENUM {
     SMALL = "small",
@@ -2859,10 +3045,14 @@ export interface AlertProps {
     icon?: grauityIconName | 'auto' | null;
     /**
      * Alert title
+     *
+     * Default: `''`
      * */
     title?: React.ReactNode;
     /**
      * Alert description
+     *
+     * Default: `''`
      * */
     description?: React.ReactNode;
     /**
@@ -2938,7 +3128,7 @@ export interface AlertBannerProps {
     /**
      * Variant of the alert banner
      *
-     * Available choices: `'primary'`, `'secondary'`, `'tertiary'`, `'success'`, `'danger'`, `'warning'`
+     * Available choices: `'primary'`, `'secondary'`, `'tertiary'`, `'success'`, `'error'`, `'warning'`
      *
      * Default: `'primary'`
      * */
@@ -3018,14 +3208,6 @@ export interface AlertBannerProps {
  * An alert component is used to display important messages to the user.
  */
 export const NSAlert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
-export enum ALERT_VARIANTS_ENUM {
-    PRIMARY = "primary",
-    SUCCESS = "success",
-    WARNING = "warning",
-    ERROR = "error",
-    DEFAULT = "default"
-}
-export const ALERT_VARIANTS: ALERT_VARIANTS_ENUM[];
 /**
  * An alert banner is a component that is used to typically display
  * important messages to the user. It is normally shown at the top of the page.
@@ -3416,6 +3598,10 @@ interface ModalStep {
      * Variant for the button
      * */
     buttonVariant?: ButtonVariants | null;
+    /**
+     * Color for the button
+     * */
+    buttonColor?: ButtonColors | null;
 }
 export interface ModalProps {
     /**
@@ -3768,10 +3954,18 @@ export interface ConfirmationDialogProps {
      * Variant for the cancel button
      * */
     cancelButtonVariant?: ButtonVariants;
+    /**
+     * Color for the cancel button
+     * */
+    cancelButtonColor?: ButtonColors;
     /**
      * Variant for the confirm button
      * */
     confirmButtonVariant?: ButtonVariants;
+    /**
+     * Color for the confirm button
+     * */
+    confirmButtonColor?: ButtonColors;
     /**
      * Determines if the close button should be shown
      * Available choices: `true`, `false`
@@ -4837,6 +5031,11 @@ export interface CarouselProps {
      * @default null
      */
     onScrollEnd?: () => void;
+    /**
+     * Gap between the carousel header and the items row in pixels.
+     * @default 12
+     */
+    headerGap?: number;
     /**
      * Gap between the carousel items in pixels.
      * @default 12
@@ -4877,8 +5076,19 @@ export interface FormRowProps {
  * @returns
  */
 export const NSFormRow: (props: FormRowProps) => JSX.Element;
+type FormTextColors = `${TEXT_COLORS}`;
 export interface LabelProps extends StyledLabelProps {
+    /**
+     * The name of the label. Required for use with form elements' `htmlFor` attribute.
+     */
     name: string;
+    /**
+     * The color of the label. Defaults to 'secondary'.
+     */
+    color?: FormTextColors;
+    /**
+     * The content of the label.
+     */
     children: React.ReactNode;
 }
 export interface HelpMessageProps {
@@ -4944,6 +5154,7 @@ enum TEXT_FIELD_SIZES {
     EXTRA_LARGE = "extra-large"
 }
 type TextFieldSize = `${TEXT_FIELD_SIZES}`;
+type TextFieldColors = `${ACTION_COLORS}`;
 type InputAdornmentType = React.ReactNode;
 interface InputAdornments {
     /**
@@ -4960,166 +5171,151 @@ interface InputAdornments {
 export interface TextFieldProps {
     /**
      * The name of the input field. Required.
-     * @type {string}
      */
     name: string;
     /**
      * The label for the input field.
-     * @type {string}
      */
     label?: string;
     /**
      * Whether the input field is required.
-     * @type {boolean}
      * @default false
      */
     isRequired?: boolean;
     /**
      * The placeholder text for the input field.
-     * @type {string}
      */
     placeholder?: string;
     /**
      * The validation message to display when the input field is invalid.
-     * @type {string}
      */
     validationMessage?: string;
     /**
      * The input value.
-     * @type {string}
      * @default ''
      */
     value?: string;
     /**
      * Whether to disable the input field.
-     * @type {boolean}
      * @default false
      */
     isDisabled?: boolean;
+    /**
+     * Whether the input field is read-only.
+     * @default false
+     */
+    isReadOnly?: boolean;
     /**
      * The function to call when the input value is changed.
-     * @type {(event: React.ChangeEvent<HTMLInputElement>) => void}
      */
     onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     /**
      * The function to call when the input field is clicked (focused).
-     * @type {(event: React.MouseEvent<HTMLInputElement>) => void}
      */
     onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;
     /**
      * The function to call when the input field is blurred (unfocused/clicked away).
-     * @type {(event: React.FocusEvent<HTMLInputElement>) => void}
      */
     onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
     /**
      * The error message to display when the input field is invalid.
-     * @type {string}
      */
     errorMessage?: string;
     /**
      * The autocomplete attribute for the input field.
-     * @type {string}
      * @default 'on'
      */
     autoComplete?: string;
     /**
      * Whether the input field should autofocus.
-     * @type {boolean}
      * @default false
      */
     autoFocus?: boolean;
     /**
      * The help message to display below the input field.
-     * @type {string}
      */
     helpMessage?: string;
     /**
      * The maximum length of the input field.
-     * @type {number}
      */
     maxLength?: number;
     /**
      * The size of the input field.
-     * @type {string}
      * @default 'medium'
      */
     size?: TextFieldSize;
     /**
      * The adornments to display on the input field.
-     * @type {InputAdornments}
      */
     adornments?: InputAdornments;
+    /**
+     * The color of the input field.
+     */
+    color?: TextFieldColors;
 }
 export const NSTextField: (props: TextFieldProps) => JSX.Element;
 type VARIANTS = `${VARIANTS_SIZES}`;
+type TextAreaColors = TextFieldColors;
 export interface TextAreaProps {
     /**
      * The name of the input field. Required.
-     * @type {string}
      */
     name: string;
     /**
      * The label for the input field.
-     * @type {string}
      */
     label?: string;
     /**
      * variant of the input field.
-     * @type {VARIANTS}
      * @default 'medium'
      */
     size?: VARIANTS;
     /**
      * Whether the input field is required.
-     * @type {boolean}
      * @default false
      */
     isRequired?: boolean;
     /**
      * The placeholder text for the input field.
-     * @type {string}
      */
     placeholder?: string;
     /**
      * The validation message to display when the input field is invalid.
-     * @type {string}
      */
     validationMessage?: string;
     /**
      * The input value.
-     * @type {string}
      * @default ''
      */
     value?: string;
     /**
      * Whether to disable the input field.
-     * @type {boolean}
      * @default false
      */
     isDisabled?: boolean;
+    /**
+     * Whether the input field is read-only.
+     * @default false
+     */
+    isReadOnly?: boolean;
     /**
      * The function to call when the input value is changed.
-     * @type {(event: React.ChangeEvent<HTMLTextAreaElement>) => void}
      */
     onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
     /**
      * The function to call when the input field is clicked (focused).
-     * @type {(event: React.MouseEvent<HTMLTextAreaElement>) => void}
      */
     onClick?: (event: React.MouseEvent<HTMLTextAreaElement>) => void;
     /**
      * The function to call when the input field is blurred (unfocused/clicked away).
-     * @type {(event: React.FocusEvent<HTMLTextAreaElement>) => void}
      */
     onBlur?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
     /**
      * The error message to display when the input field is invalid.
-     * @type {string}
      */
     errorMessage?: string;
     /**
      * The autocomplete attribute for the input field.
-     * @type {string}
      * @default 'on'
      */
     autoComplete?: string;
@@ -5131,17 +5327,14 @@ export interface TextAreaProps {
     autoFocus?: boolean;
     /**
      * The help message to display below the input field.
-     * @type {string}
      */
     helpMessage?: string;
     /**
      * The number of columns for the input field.
-     * @type {number}
      */
     cols?: number;
     /**
      * The number of rows for the input field.
-     * @type {number}
      */
     rows?: number;
     /**
@@ -5150,11 +5343,10 @@ export interface TextAreaProps {
      */
     maxLength?: number;
     /**
-     * Whether the input field is read-only.
-     * @type {boolean}
-     * @default false
+     * Color of the textarea input field.
+     * @default 'brand'
      */
-    readOnly?: boolean;
+    color?: TextAreaColors;
 }
 enum VARIANTS_SIZES {
     SMALL = "small",
@@ -5165,6 +5357,7 @@ enum VARIANTS_SIZES {
 export const NSTextArea: (props: TextAreaProps) => JSX.Element;
 type CheckboxSize = 'small' | 'medium' | 'large';
 type CheckboxState = 'default' | 'error' | 'success';
+type CheckboxColors = `${ACTION_COLORS}`;
 export interface CheckboxProps {
     /**
      * The name of the checkbox group.
@@ -5187,6 +5380,7 @@ export interface CheckboxProps {
     size?: CheckboxSize;
     /**
      * The state of the checkbox.
+     * @deprecated Use color prop instead
      * @default default
      */
     state?: CheckboxState;
@@ -5230,6 +5424,11 @@ export interface CheckboxProps {
      * @default undefined
      */
     className?: string;
+    /**
+     * The color of the checkbox.
+     * @default brand
+     */
+    color?: CheckboxColors;
 }
 /**
  * A checkbox is a form element that allows the user to select one or more options from a set of choices.
@@ -5237,6 +5436,7 @@ export interface CheckboxProps {
 export const NSCheckbox: React.FC<CheckboxProps>;
 type RadioButtonSize = 'small' | 'medium' | 'large';
 type RadioButtonState = 'default' | 'error' | 'success';
+type RadioButtonColors = `${ACTION_COLORS}`;
 export interface RadioButtonProps {
     /**
      * The name of the radio button group.
@@ -5264,6 +5464,7 @@ export interface RadioButtonProps {
     /**
      * The state of the radio button.
      * @default default
+     * @deprecated Use color prop instead
      */
     state?: RadioButtonState;
     /**
@@ -5296,6 +5497,11 @@ export interface RadioButtonProps {
      * @default undefined
      */
     className?: string;
+    /**
+     * The color of the radio button.
+     * @default brand
+     */
+    color?: RadioButtonColors;
 }
 export const NSRadioButton: (props: RadioButtonProps) => JSX.Element;
 type PaginationJustifyContent = 'space-between' | 'space-around' | 'space-evenly' | 'flex-start' | 'flex-end';
@@ -5324,20 +5530,35 @@ export interface PaginationProps {
      */
     justifyContent?: PaginationJustifyContent;
     /**
-     * The type of the pagination button. Defaults to 'tertiary'.
-     * @default 'tertiary'
+     * The type of the pagination button. Defaults to 'secondary'.
+     * @default 'secondary'
      */
     buttonVariant?: ButtonVariants;
     /**
-     * The type of the active pagination button. Defaults to 'secondary'.
-     * @default 'secondary'
+     * The color of the pagination button. Defaults to 'neutral'.
+     * @default 'neutral'
+     */
+    buttonColor?: ButtonColors;
+    /**
+     * The type of the active pagination button. Defaults to 'primary'.
+     * @default 'primary'
      */
     activeButtonVariant?: ButtonVariants;
     /**
-     * The type of the control pagination button. Defaults to 'tertiary'.
-     * @default 'tertiary'
+     * The color of the active pagination button. Defaults to 'neutral'.
+     * @default 'neutral'
+     */
+    activeButtonColor?: ButtonColors;
+    /**
+     * The type of the control pagination button. Defaults to 'secondary'.
+     * @default 'secondary'
      */
     controlButtonVariant?: ButtonVariants;
+    /**
+     * The color of the control pagination button. Defaults to 'neutral'.
+     * @default 'neutral'
+     */
+    controlButtonColor?: ButtonColors;
     /**
      * The class name of the pagination.
      * @default ''
@@ -5349,6 +5570,7 @@ export interface PaginationProps {
  */
 export const NSPagination: (props: PaginationProps) => JSX.Element;
 export const NSSuccessMessage: (props: SuccessMessageProps) => JSX.Element;
+type OtpFieldColors = TextFieldColors;
 export interface OtpInputFieldProps {
     /**
      * The label displayed above the OTP input fields.
@@ -5412,8 +5634,13 @@ export interface OtpInputFieldProps {
      * @default 'OTP is correct'
      */
     successMessage?: string;
+    /**
+     * The color of the OTP input fields.
+     * @default 'brand'
+     */
+    color?: OtpFieldColors;
 }
-export const NSOtpInput: ({ label, name, length, onChange, style, isOtpCorrect, isOtpWrong, isDisabled, errorMessage, successMessage, }: OtpInputFieldProps) => JSX.Element;
+export const NSOtpInput: (props: OtpInputFieldProps) => JSX.Element;
 export enum NSDropdownMenuBaseItemType {
     SUB_HEADER = "subheader",
     DIVIDER = "divider",