@newtonschool/grauity 2.0.3-beta.9 → 3.0.0-beta.0

package/dist/index.d.ts

@@ -2,6 +2,28 @@ import React, { NamedExoticComponent, ReactNode, RefAttributes, Component, HTMLA
 import { Substitute, IStyledComponentBase } from "styled-components/dist/types";
 import { HTMLMotionProps, ForwardRefComponent } from "framer-motion";
 import { FastOmit } from "styled-components";
+/**
+ * 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[];
@@ -335,12 +357,6 @@ export const ICON_TAGS: {
     "power-bi": string[];
     "printer-filled": string[];
     printer: string[];
-    "progress-half-filled": string[];
-    "progress-half": string[];
-    "progress-quarter-filled": string[];
-    "progress-quarter": string[];
-    "progress-zero-filled": string[];
-    "progress-zero": string[];
     "python-filled": string[];
     python: string[];
     "quiz-filled": string[];
@@ -442,7 +458,7 @@ export const TAG_ICONS: {
     Time: string[];
     User: string[];
 };
-type grauityIconName = 'exclamation-circle-filled' | 'exclamation-circle' | 'exclamation-triangle-filled' | 'exclamation-triangle' | 'info-circle-filled' | 'info-circle' | 'question-circle-filled' | 'question-circle' | 'code-alt-filled' | 'code-alt' | 'code-filled' | 'code' | 'project-filled' | 'project' | 'terminal-filled' | 'terminal' | 'desktop-filled' | 'desktop' | 'gamepad-filled' | 'gamepad' | 'lamp-filled' | 'lamp' | 'laptop-filled' | 'laptop' | 'mobile-filled' | 'mobile' | 'archive-filled' | 'archive' | 'bookmark-filled' | 'bookmark' | 'file-alt-filled' | 'file-alt' | 'file-filled' | 'file-lightning-filled' | 'file-lightning' | 'file' | 'folder-filled' | 'folder-open-filled' | 'folder-open' | 'folder' | 'label-filled' | 'label' | 'note-filled' | 'note' | 'pen-filled' | 'pen' | 'pin-filled' | 'pin' | 'currency-rupee-filled' | 'currency-rupee' | 'headphone-filled' | 'headphone-mic-filled' | 'headphone-mic' | 'headphone' | 'mic-filled' | 'mic' | 'micmute-filled' | 'micmute' | 'pause-circle-filled' | 'pause-circle' | 'pause-filled' | 'pause' | 'play-circle-filled' | 'play-circle' | 'play-filled' | 'play-rectangle-filled' | 'play-rectangle' | 'play' | 'video-filled' | 'video-off-filled' | 'video-off' | 'video' | 'volume-maximum-filled' | 'volume-maximum' | 'volume-minimum-filled' | 'volume-minimum' | 'volume-mute-filled' | 'volume-mute' | 'comment-filled' | 'comment' | 'connector-filled' | 'connector' | 'doubt-alt2-filled' | 'doubt-alt2' | 'doubt-filled' | 'doubt-message-filled' | 'doubt-message' | 'doubt' | 'hearing-filled' | 'hearing' | 'heart-filled' | 'heart' | 'hearthands-filled' | 'hearthands' | 'lock-filled' | 'lock-open-filled' | 'lock-open' | 'lock' | 'message-filled' | 'message-info-filled' | 'message-info' | 'message' | 'milestone-filled' | 'milestone' | 'scholar-hat-filled' | 'scholar-hat' | 'smiley-bad-filled' | 'smiley-bad' | 'smiley-filled' | 'smiley-happy-filled' | 'smiley-happy' | 'smiley-neutral-filled' | 'smiley-neutral' | 'smiley-sad-filled' | 'smiley-sad' | 'smiley-very-bad-filled' | 'smiley-very-bad' | 'smiley-very-happy-filled' | 'smiley-very-happy' | 'smiley' | 'spark-filled' | 'spark' | 'sparkle-filled' | 'sparkle' | 'target-filled' | 'target' | 'check-badge-filled' | 'check-badge' | 'crown-filled' | 'crown' | 'flag-filled' | 'flag' | 'gift-filled' | 'gift' | 'leaderboard-filled' | 'leaderboard' | 'medal-filled' | 'medal' | 'star-filled' | 'star' | 'trophy-filled' | 'trophy' | 'facebook' | 'linkedin' | 'twitter' | 'whatsapp' | 'arrow-double-filled' | 'arrow-double' | 'arrow-down-filled' | 'arrow-down-left-filled' | 'arrow-down-left' | 'arrow-down-right-filled' | 'arrow-down-right' | 'arrow-down' | 'arrow-left-filled' | 'arrow-left' | 'arrow-right-filled' | 'arrow-right' | 'arrow-up-filled' | 'arrow-up-left-filled' | 'arrow-up-left' | 'arrow-up-right-filled' | 'arrow-up-right' | 'arrow-up' | 'ban-filled' | 'ban' | 'bin-filled' | 'bin' | 'book-alt-filled' | 'book-alt' | 'book-alt2-filled' | 'book-alt2' | 'book-alt3-filled' | 'book-alt3' | 'book-filled' | 'book' | 'briefcase-alt2-filled' | 'briefcase-alt2' | 'briefcase-filled' | 'briefcase' | 'broadcast-filled' | 'broadcast' | 'bug-filled' | 'bug' | 'bulb-filled' | 'bulb' | 'call-end-filled' | 'call-end' | 'call-start-filled' | 'call-start' | 'camera-filled' | 'camera' | 'caret-double-filled' | 'caret-double' | 'caret-down-filled' | 'caret-down' | 'caret-left-filled' | 'caret-left' | 'caret-right-filled' | 'caret-right' | 'caret-up-filled' | 'caret-up' | 'check-circle-filled' | 'check-circle' | 'check-filled' | 'check-square-filled' | 'check-square' | 'check' | 'chevron-down-double-filled' | 'chevron-down-double' | 'chevron-down-filled' | 'chevron-down' | 'chevron-left-double-filled' | 'chevron-left-double' | 'chevron-left-filled' | 'chevron-left' | 'chevron-right-double-filled' | 'chevron-right-double' | 'chevron-right-filled' | 'chevron-right' | 'chevron-up-double-filled' | 'chevron-up-double' | 'chevron-up-filled' | 'chevron-up' | 'circle-filled' | 'circle' | 'clock-alarm-filled' | 'clock-alarm' | 'close-circle-filled' | 'close-circle' | 'close-filled' | 'close-square-filled' | 'close-square' | 'close' | 'compass-filled' | 'compass' | 'database-filled' | 'database' | 'diamond-filled' | 'diamond' | 'double-check-filled' | 'double-check' | 'download-filled' | 'download' | 'eda-filled' | 'eda' | 'email-alt-filled' | 'email-alt' | 'email-filled' | 'email' | 'filter-filled' | 'filter' | 'floppy-filled' | 'floppy' | 'forward-filled' | 'forward' | 'gear-filled' | 'gear' | 'git-commit-filled' | 'git-commit' | 'globe-filled' | 'globe' | 'grip-hortizontal-filled' | 'grip-hortizontal' | 'grip-vertical-filled' | 'grip-vertical' | 'growth-down-filled' | 'growth-down' | 'growth-up-filled' | 'growth-up' | 'help-filled' | 'help' | 'hold-filled' | 'hold' | 'home-filled' | 'home' | 'hourglass-filled' | 'hourglass' | 'kebab-horizontal-filled' | 'kebab-horizontal' | 'kebab-vertical-filled' | 'kebab-vertical' | 'link-filled' | 'link' | 'list-checked-filled' | 'list-checked' | 'list-filled' | 'list' | 'load-filled' | 'load' | 'loudspeaker-filled' | 'loudspeaker' | 'machine-learning-filled' | 'machine-learning' | 'map-pin-alt1-filled' | 'map-pin-alt1' | 'map-pin-alt2-filled' | 'map-pin-alt2' | 'map-pin-filled' | 'map-pin' | 'maximize-filled' | 'maximize' | 'menu-alt2-filled' | 'menu-alt2' | 'menu-filled' | 'menu-grid-filled' | 'menu-grid' | 'menu' | 'microchip-filled' | 'microchip' | 'minimize-filled' | 'minimize' | 'minus-circle-filled' | 'minus-circle' | 'minus-square-filled' | 'minus-square' | 'moon-filled' | 'moon' | 'new-tab-filled' | 'new-tab' | 'paper-clip-filled' | 'paper-clip' | 'plus-circle-filled' | 'plus-circle' | 'plus-filled' | 'plus-square-filled' | 'plus-square' | 'plus' | 'power-bi-filled' | 'power-bi' | 'printer-filled' | 'printer' | 'progress-half-filled' | 'progress-half' | 'progress-quarter-filled' | 'progress-quarter' | 'progress-zero-filled' | 'progress-zero' | 'python-filled' | 'python' | 'quiz-filled' | 'quiz' | 'refresh-filled' | 'refresh' | 'remove-filled' | 'remove' | 'reply-filled' | 'reply' | 'retail-filled' | 'retail' | 'screenshare-start-filled' | 'screenshare-start' | 'screenshare-stop-filled' | 'screenshare-stop' | 'search-filled' | 'search' | 'share-filled' | 'share' | 'shield-alert-filled' | 'shield-alert' | 'shield-check-filled' | 'shield-check' | 'shield-filled' | 'shield-lock-filled' | 'shield-lock' | 'shield-x-filled' | 'shield-x' | 'shield' | 'shop-filled' | 'shop' | 'sidebar-left-filled' | 'sidebar-left' | 'sidebar-right-filled' | 'sidebar-right' | 'signin-filled' | 'signin' | 'signout-filled' | 'signout' | 'slider-filled' | 'slider' | 'square-filled' | 'square' | 'sticky-note-filled' | 'sticky-note' | 'sun-filled' | 'sun' | 'thumbs-down-filled' | 'thumbs-down' | 'thumbs-up-filled' | 'thumbs-up' | 'thunder-filled' | 'thunder' | 'truck-filled' | 'truck' | 'upload-filled' | 'upload' | 'wrench-filled' | 'wrench' | 'bell-filled' | 'bell' | 'calender-check-filled' | 'calender-check' | 'calender-filled' | 'calender-plus-filled' | 'calender-plus' | 'calender' | 'clock-filled' | 'clock' | 'rewatch-filled' | 'rewatch' | 'stopwatch-filled' | 'stopwatch' | 'bot-filled' | 'bot' | 'person-check-filled' | 'person-check' | 'person-filled' | 'person-plus-filled' | 'person-plus' | 'person' | 'user-speak-filled' | 'user-speak' | 'users-filled' | 'users';
+type grauityIconName = 'exclamation-circle-filled' | 'exclamation-circle' | 'exclamation-triangle-filled' | 'exclamation-triangle' | 'info-circle-filled' | 'info-circle' | 'question-circle-filled' | 'question-circle' | 'code-alt-filled' | 'code-alt' | 'code-filled' | 'code' | 'project-filled' | 'project' | 'terminal-filled' | 'terminal' | 'desktop-filled' | 'desktop' | 'gamepad-filled' | 'gamepad' | 'lamp-filled' | 'lamp' | 'laptop-filled' | 'laptop' | 'mobile-filled' | 'mobile' | 'archive-filled' | 'archive' | 'bookmark-filled' | 'bookmark' | 'file-alt-filled' | 'file-alt' | 'file-filled' | 'file-lightning-filled' | 'file-lightning' | 'file' | 'folder-filled' | 'folder-open-filled' | 'folder-open' | 'folder' | 'label-filled' | 'label' | 'note-filled' | 'note' | 'pen-filled' | 'pen' | 'pin-filled' | 'pin' | 'currency-rupee-filled' | 'currency-rupee' | 'headphone-filled' | 'headphone-mic-filled' | 'headphone-mic' | 'headphone' | 'mic-filled' | 'mic' | 'micmute-filled' | 'micmute' | 'pause-circle-filled' | 'pause-circle' | 'pause-filled' | 'pause' | 'play-circle-filled' | 'play-circle' | 'play-filled' | 'play-rectangle-filled' | 'play-rectangle' | 'play' | 'video-filled' | 'video-off-filled' | 'video-off' | 'video' | 'volume-maximum-filled' | 'volume-maximum' | 'volume-minimum-filled' | 'volume-minimum' | 'volume-mute-filled' | 'volume-mute' | 'comment-filled' | 'comment' | 'connector-filled' | 'connector' | 'doubt-alt2-filled' | 'doubt-alt2' | 'doubt-filled' | 'doubt-message-filled' | 'doubt-message' | 'doubt' | 'hearing-filled' | 'hearing' | 'heart-filled' | 'heart' | 'hearthands-filled' | 'hearthands' | 'lock-filled' | 'lock-open-filled' | 'lock-open' | 'lock' | 'message-filled' | 'message-info-filled' | 'message-info' | 'message' | 'milestone-filled' | 'milestone' | 'scholar-hat-filled' | 'scholar-hat' | 'smiley-bad-filled' | 'smiley-bad' | 'smiley-filled' | 'smiley-happy-filled' | 'smiley-happy' | 'smiley-neutral-filled' | 'smiley-neutral' | 'smiley-sad-filled' | 'smiley-sad' | 'smiley-very-bad-filled' | 'smiley-very-bad' | 'smiley-very-happy-filled' | 'smiley-very-happy' | 'smiley' | 'spark-filled' | 'spark' | 'sparkle-filled' | 'sparkle' | 'target-filled' | 'target' | 'check-badge-filled' | 'check-badge' | 'crown-filled' | 'crown' | 'flag-filled' | 'flag' | 'gift-filled' | 'gift' | 'leaderboard-filled' | 'leaderboard' | 'medal-filled' | 'medal' | 'star-filled' | 'star' | 'trophy-filled' | 'trophy' | 'facebook' | 'linkedin' | 'twitter' | 'whatsapp' | 'arrow-double-filled' | 'arrow-double' | 'arrow-down-filled' | 'arrow-down-left-filled' | 'arrow-down-left' | 'arrow-down-right-filled' | 'arrow-down-right' | 'arrow-down' | 'arrow-left-filled' | 'arrow-left' | 'arrow-right-filled' | 'arrow-right' | 'arrow-up-filled' | 'arrow-up-left-filled' | 'arrow-up-left' | 'arrow-up-right-filled' | 'arrow-up-right' | 'arrow-up' | 'ban-filled' | 'ban' | 'bin-filled' | 'bin' | 'book-alt-filled' | 'book-alt' | 'book-alt2-filled' | 'book-alt2' | 'book-alt3-filled' | 'book-alt3' | 'book-filled' | 'book' | 'briefcase-alt2-filled' | 'briefcase-alt2' | 'briefcase-filled' | 'briefcase' | 'broadcast-filled' | 'broadcast' | 'bug-filled' | 'bug' | 'bulb-filled' | 'bulb' | 'call-end-filled' | 'call-end' | 'call-start-filled' | 'call-start' | 'camera-filled' | 'camera' | 'caret-double-filled' | 'caret-double' | 'caret-down-filled' | 'caret-down' | 'caret-left-filled' | 'caret-left' | 'caret-right-filled' | 'caret-right' | 'caret-up-filled' | 'caret-up' | 'check-circle-filled' | 'check-circle' | 'check-filled' | 'check-square-filled' | 'check-square' | 'check' | 'chevron-down-double-filled' | 'chevron-down-double' | 'chevron-down-filled' | 'chevron-down' | 'chevron-left-double-filled' | 'chevron-left-double' | 'chevron-left-filled' | 'chevron-left' | 'chevron-right-double-filled' | 'chevron-right-double' | 'chevron-right-filled' | 'chevron-right' | 'chevron-up-double-filled' | 'chevron-up-double' | 'chevron-up-filled' | 'chevron-up' | 'circle-filled' | 'circle' | 'clock-alarm-filled' | 'clock-alarm' | 'close-circle-filled' | 'close-circle' | 'close-filled' | 'close-square-filled' | 'close-square' | 'close' | 'compass-filled' | 'compass' | 'database-filled' | 'database' | 'diamond-filled' | 'diamond' | 'double-check-filled' | 'double-check' | 'download-filled' | 'download' | 'eda-filled' | 'eda' | 'email-alt-filled' | 'email-alt' | 'email-filled' | 'email' | 'filter-filled' | 'filter' | 'floppy-filled' | 'floppy' | 'forward-filled' | 'forward' | 'gear-filled' | 'gear' | 'git-commit-filled' | 'git-commit' | 'globe-filled' | 'globe' | 'grip-hortizontal-filled' | 'grip-hortizontal' | 'grip-vertical-filled' | 'grip-vertical' | 'growth-down-filled' | 'growth-down' | 'growth-up-filled' | 'growth-up' | 'help-filled' | 'help' | 'hold-filled' | 'hold' | 'home-filled' | 'home' | 'hourglass-filled' | 'hourglass' | 'kebab-horizontal-filled' | 'kebab-horizontal' | 'kebab-vertical-filled' | 'kebab-vertical' | 'link-filled' | 'link' | 'list-checked-filled' | 'list-checked' | 'list-filled' | 'list' | 'load-filled' | 'load' | 'loudspeaker-filled' | 'loudspeaker' | 'machine-learning-filled' | 'machine-learning' | 'map-pin-alt1-filled' | 'map-pin-alt1' | 'map-pin-alt2-filled' | 'map-pin-alt2' | 'map-pin-filled' | 'map-pin' | 'maximize-filled' | 'maximize' | 'menu-alt2-filled' | 'menu-alt2' | 'menu-filled' | 'menu-grid-filled' | 'menu-grid' | 'menu' | 'microchip-filled' | 'microchip' | 'minimize-filled' | 'minimize' | 'minus-circle-filled' | 'minus-circle' | 'minus-square-filled' | 'minus-square' | 'moon-filled' | 'moon' | 'new-tab-filled' | 'new-tab' | 'paper-clip-filled' | 'paper-clip' | 'plus-circle-filled' | 'plus-circle' | 'plus-filled' | 'plus-square-filled' | 'plus-square' | 'plus' | 'power-bi-filled' | 'power-bi' | 'printer-filled' | 'printer' | 'python-filled' | 'python' | 'quiz-filled' | 'quiz' | 'refresh-filled' | 'refresh' | 'remove-filled' | 'remove' | 'reply-filled' | 'reply' | 'retail-filled' | 'retail' | 'screenshare-start-filled' | 'screenshare-start' | 'screenshare-stop-filled' | 'screenshare-stop' | 'search-filled' | 'search' | 'share-filled' | 'share' | 'shield-alert-filled' | 'shield-alert' | 'shield-check-filled' | 'shield-check' | 'shield-filled' | 'shield-lock-filled' | 'shield-lock' | 'shield-x-filled' | 'shield-x' | 'shield' | 'shop-filled' | 'shop' | 'sidebar-left-filled' | 'sidebar-left' | 'sidebar-right-filled' | 'sidebar-right' | 'signin-filled' | 'signin' | 'signout-filled' | 'signout' | 'slider-filled' | 'slider' | 'square-filled' | 'square' | 'sticky-note-filled' | 'sticky-note' | 'sun-filled' | 'sun' | 'thumbs-down-filled' | 'thumbs-down' | 'thumbs-up-filled' | 'thumbs-up' | 'thunder-filled' | 'thunder' | 'truck-filled' | 'truck' | 'upload-filled' | 'upload' | 'wrench-filled' | 'wrench' | 'bell-filled' | 'bell' | 'calender-check-filled' | 'calender-check' | 'calender-filled' | 'calender-plus-filled' | 'calender-plus' | 'calender' | 'clock-filled' | 'clock' | 'rewatch-filled' | 'rewatch' | 'stopwatch-filled' | 'stopwatch' | 'bot-filled' | 'bot' | 'person-check-filled' | 'person-check' | 'person-filled' | 'person-plus-filled' | 'person-plus' | 'person' | 'user-speak-filled' | 'user-speak' | 'users-filled' | 'users';
 type grauityFlippedChoiceName = 'vertically' | 'horizontally';
 type grauityRotatedChoiceName = 'clockwise' | 'counterclockwise';
 type grauityIconSizeName = '4' | '8' | '12' | '14' | '16' | '20' | '24' | '28' | '32' | '36' | '40';
@@ -486,16 +502,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;
@@ -723,6 +754,11 @@ export const NS_DARK_THEME_CONFIG: {
                     hover: string;
                     disabled: string;
                 };
+                'invert-primary': {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
                 secondary: {
                     default: string;
                     hover: string;
@@ -777,6 +813,11 @@ export const NS_DARK_THEME_CONFIG: {
                     hover: string;
                     disabled: string;
                 };
+                'invert-primary': {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
                 secondary: {
                     default: string;
                     hover: string;
@@ -824,6 +865,11 @@ export const NS_DARK_THEME_CONFIG: {
                     hover: string;
                     disabled: string;
                 };
+                'invert-primary': {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
                 secondary: {
                     default: string;
                     hover: string;
@@ -871,6 +917,11 @@ export const NS_DARK_THEME_CONFIG: {
                     hover: string;
                     disabled: string;
                 };
+                'invert-primary': {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
                 secondary: {
                     default: string;
                     hover: string;
@@ -982,16 +1033,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;
@@ -1219,6 +1285,11 @@ export const NS_LIGHT_THEME_CONFIG: {
                     hover: string;
                     disabled: string;
                 };
+                'invert-primary': {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
                 secondary: {
                     default: string;
                     hover: string;
@@ -1273,6 +1344,11 @@ export const NS_LIGHT_THEME_CONFIG: {
                     hover: string;
                     disabled: string;
                 };
+                'invert-primary': {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
                 secondary: {
                     default: string;
                     hover: string;
@@ -1320,6 +1396,11 @@ export const NS_LIGHT_THEME_CONFIG: {
                     hover: string;
                     disabled: string;
                 };
+                'invert-primary': {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
                 secondary: {
                     default: string;
                     hover: string;
@@ -1367,6 +1448,11 @@ export const NS_LIGHT_THEME_CONFIG: {
                     hover: string;
                     disabled: string;
                 };
+                'invert-primary': {
+                    default: string;
+                    hover: string;
+                    disabled: string;
+                };
                 secondary: {
                     default: string;
                     hover: string;
@@ -1491,16 +1577,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;
@@ -1728,6 +1829,11 @@ export const GrauityThemeProvider: ({ themeConfig, children, }: {
                             hover: string;
                             disabled: string;
                         };
+                        'invert-primary': {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
                         secondary: {
                             default: string;
                             hover: string;
@@ -1782,6 +1888,11 @@ export const GrauityThemeProvider: ({ themeConfig, children, }: {
                             hover: string;
                             disabled: string;
                         };
+                        'invert-primary': {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
                         secondary: {
                             default: string;
                             hover: string;
@@ -1829,6 +1940,11 @@ export const GrauityThemeProvider: ({ themeConfig, children, }: {
                             hover: string;
                             disabled: string;
                         };
+                        'invert-primary': {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
                         secondary: {
                             default: string;
                             hover: string;
@@ -1876,6 +1992,11 @@ export const GrauityThemeProvider: ({ themeConfig, children, }: {
                             hover: string;
                             disabled: string;
                         };
+                        'invert-primary': {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
                         secondary: {
                             default: string;
                             hover: string;
@@ -1986,16 +2107,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;
@@ -2223,6 +2359,11 @@ export const GrauityThemeProvider: ({ themeConfig, children, }: {
                             hover: string;
                             disabled: string;
                         };
+                        'invert-primary': {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
                         secondary: {
                             default: string;
                             hover: string;
@@ -2277,6 +2418,11 @@ export const GrauityThemeProvider: ({ themeConfig, children, }: {
                             hover: string;
                             disabled: string;
                         };
+                        'invert-primary': {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
                         secondary: {
                             default: string;
                             hover: string;
@@ -2324,6 +2470,11 @@ export const GrauityThemeProvider: ({ themeConfig, children, }: {
                             hover: string;
                             disabled: string;
                         };
+                        'invert-primary': {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
                         secondary: {
                             default: string;
                             hover: string;
@@ -2371,6 +2522,11 @@ export const GrauityThemeProvider: ({ themeConfig, children, }: {
                             hover: string;
                             disabled: string;
                         };
+                        'invert-primary': {
+                            default: string;
+                            hover: string;
+                            disabled: string;
+                        };
                         secondary: {
                             default: string;
                             hover: string;
@@ -2483,6 +2639,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
@@ -2577,6 +2741,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.
@@ -2587,18 +2752,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`
@@ -2611,7 +2785,7 @@ export interface ButtonProps extends StyledButtonProps {
      * */
     icon?: grauityIconName;
     /**
-     * Size of the icon
+     * Size of the icon, defaults to `20`
      * */
     iconSize?: grauityIconSizeName;
     /**
@@ -2694,6 +2868,14 @@ interface IconButtonProps {
      * 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`
@@ -2780,16 +2962,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",
@@ -2843,10 +3023,14 @@ export interface AlertProps {
     icon?: grauityIconName | 'auto' | null;
     /**
      * Alert title
+     *
+     * Default: `''`
      * */
     title?: React.ReactNode;
     /**
      * Alert description
+     *
+     * Default: `''`
      * */
     description?: React.ReactNode;
     /**
@@ -2922,7 +3106,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'`
      * */
@@ -3002,14 +3186,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.
@@ -3351,19 +3527,6 @@ export interface OverlayProps {
      * Additional className to be passed to the Overlay
      */
     className?: string;
-    /**
-     * The custom position of the overlay
-     * @default { top: 0, left: 0 }
-     */
-    position?: {
-        top?: number;
-        left?: number;
-    };
-    /**
-     * Should focus on the first element in the overlay
-     * @default true
-     */
-    shouldFocusOnFirstElement?: boolean;
 }
 export const NSOverlay: React.ForwardRefExoticComponent<OverlayProps & React.RefAttributes<HTMLDivElement>>;
 type ModalContentType = React.ReactNode;
@@ -3400,6 +3563,10 @@ interface ModalStep {
      * Variant for the button
      * */
     buttonVariant?: ButtonVariants | null;
+    /**
+     * Color for the button
+     * */
+    buttonColor?: ButtonColors | null;
 }
 export interface ModalProps {
     /**
@@ -3531,11 +3698,6 @@ export interface ModalProps {
      * Click even object, to be passed by the onClick event for use with `emanate` modal animation
      * */
     clickEvent?: any;
-    /**
-     * Should focus on the first element in the modal
-     * @default true
-     */
-    shouldFocusOnFirstElement?: boolean;
 }
 export interface MultiStepModalProps {
     /**
@@ -3747,10 +3909,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`
@@ -3942,11 +4112,6 @@ interface DropdownOption {
     id: number | string;
     label: string;
 }
-/**
- * @deprecated This interface is deprecated and will be removed in future versions.
- * - Use the `DropdownMenu` component instead.
- * @see {@link https://grauity.newtonschool.co/?path=/docs/elements-dropdownmenu--docs}
- */
 export interface SelectDropdownProps {
     /**
      * Set of options available for selection.
@@ -3998,21 +4163,11 @@ export interface SelectDropdownProps {
      */
     width?: string | null;
 }
-/**
- * @deprecated This component is deprecated and will be removed in future releases.
- * - Use the `DropdownMenu` component instead.
- * @see {@link https://grauity.newtonschool.co/?path=/docs/elements-dropdownmenu--docs}
- */
 export const NSSelectDropdown: React.ForwardRefExoticComponent<SelectDropdownProps & React.RefAttributes<HTMLSelectElement>>;
 interface _DropdownOption1 {
     id: string;
     label: string;
 }
-/**
- * @deprecated This interface is deprecated and will be removed in future versions.
- * - Use the `DropdownMenu` component instead.
- * @see {@link https://grauity.newtonschool.co/?path=/docs/elements-dropdownmenu--docs}
- */
 export interface MultiSelectDropdownProps {
     /**
      * Text to display when no option is selected.
@@ -4065,11 +4220,6 @@ export interface MultiSelectDropdownProps {
      */
     triggerComponent?: React.ReactNode;
 }
-/**
- * @deprecated This component is deprecated and will be removed in future releases.
- * - Use the `DropdownMenu` component instead.
- * @see {@link https://grauity.newtonschool.co/?path=/docs/elements-dropdownmenu--docs}
- */
 export const NSMultiSelectDropdown: React.ForwardRefExoticComponent<MultiSelectDropdownProps & React.RefAttributes<HTMLSelectElement>>;
 type ChipVariants = 'brand' | 'success' | 'error' | 'warning' | 'yellow' | 'purple' | 'disabled' | 'action-brand' | 'action-success' | 'action-error' | 'action-warning' | 'action-yellow' | 'action-purple';
 type ChipSizes = 'small' | 'medium' | 'large' | 'extra-large';
@@ -4801,6 +4951,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
@@ -4841,8 +4996,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 {
@@ -4908,6 +5074,7 @@ enum TEXT_FIELD_SIZES {
     EXTRA_LARGE = "extra-large"
 }
 type TextFieldSize = `${TEXT_FIELD_SIZES}`;
+type TextFieldColors = `${ACTION_COLORS}`;
 type InputAdornmentType = React.ReactNode;
 interface InputAdornments {
     /**
@@ -4924,166 +5091,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;
@@ -5095,17 +5247,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;
     /**
@@ -5114,11 +5263,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",
@@ -5129,6 +5277,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.
@@ -5147,6 +5296,7 @@ export interface CheckboxProps {
     /**
      * The size of the checkbox.
      * @default medium
+     * @deprecated Use color prop instead
      */
     size?: CheckboxSize;
     /**
@@ -5191,9 +5341,10 @@ export interface CheckboxProps {
     value?: string | number;
     /**
      * Additional class names to apply to the checkbox.
-     * @default undefined
+     * @default brand
      */
     className?: string;
+    color?: CheckboxColors;
 }
 /**
  * A checkbox is a form element that allows the user to select one or more options from a set of choices.
@@ -5201,6 +5352,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.
@@ -5228,6 +5380,7 @@ export interface RadioButtonProps {
     /**
      * The state of the radio button.
      * @default default
+     * @deprecated Use color prop instead
      */
     state?: RadioButtonState;
     /**
@@ -5260,6 +5413,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';
@@ -5288,20 +5446,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 ''
@@ -5313,6 +5486,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.
@@ -5376,182 +5550,12 @@ export interface OtpInputFieldProps {
      * @default 'OTP is correct'
      */
     successMessage?: string;
-}
-export const NSOtpInput: ({ label, name, length, onChange, style, isOtpCorrect, isOtpWrong, isDisabled, errorMessage, successMessage, }: OtpInputFieldProps) => JSX.Element;
-export enum DropdownMenuBaseItemType {
-    SUB_HEADER = "subheader",
-    DIVIDER = "divider",
-    OPTION = "option"
-}
-export type DropdownMenuBaseItemSubHeaderProps = {
-    type: DropdownMenuBaseItemType.SUB_HEADER;
-    title: string;
-};
-export type DropdownMenuBaseItemDividerProps = {
-    type: DropdownMenuBaseItemType.DIVIDER;
-};
-export type DropdownMenuBaseItemOptionProps = {
-    type: DropdownMenuBaseItemType.OPTION;
-    label: string;
-    value: string | number;
-    description?: string;
-    leftIcon?: grauityIconName;
-    rightIcon?: grauityIconName;
-    disabled?: boolean;
-};
-export type DropdownMenuBaseItemProps = DropdownMenuBaseItemSubHeaderProps | DropdownMenuBaseItemDividerProps | DropdownMenuBaseItemOptionProps;
-export interface DropdownMenuProps {
-    /**
-     * Whether to show the header of the dropdown menu.
-     * - If `showHeader` is false, `title`, `overline`, and `subtext` will be ignored.
-     * - if `title`, `overline`, and `subtext` all are not provided, `showHeader` will be ignored.
-     * @default true
-     */
-    showHeader?: boolean;
-    /**
-     * The title of the dropdown menu.
-     * @default 'Select'
-     */
-    title?: string;
-    /**
-     * The overline text of the dropdown menu.
-     * @default ''
-     */
-    overline?: string;
-    /**
-     * The subtext of the dropdown menu.
-     * @default ''
-     */
-    subtext?: string;
-    /**
-     * Custom header component for the dropdown menu.
-     * - If `customHeader` is provided, `showHeader`, `title`, `overline`, and `subtext` will be ignored.
-     * @default null
-     */
-    customHeader?: React.ReactNode;
-    /**
-     * Whether the dropdown menu is searchable.
-     * @default false
-     */
-    searchable?: boolean;
-    /**
-     * Placeholder text for the search input.
-     * @default 'Search'
-     */
-    searchPlaceholder?: string;
-    /**
-     * Icon name for the search input.
-     * @default 'search'
-     */
-    searchIcon?: grauityIconName;
-    /**
-     * Callback function called when the search input value changes.
-     * @param value - The new value of the search input.
-     * @default A function that searches on label and description of items.
-     */
-    onSearchInputChange?: (value: string) => void;
-    /**
-     * Whether multiple items can be selected.
-     * @default false
-     */
-    multiple?: boolean;
-    /**
-     * List of items to be displayed in the dropdown menu.
-     * @type {
-            type: 'subheader'
-            title?: string;
-        } | {
-            type: 'divider'
-        } | {
-            type: 'option'
-            label: string;
-            value: string;
-            description?: string;
-            leftIcon?: grauityIconName;
-            rightIcon?: grauityIconName;
-            disabled?: boolean;
-        }
-     * @default []
-     */
-    items: DropdownMenuBaseItemProps[];
-    /**
-     * Whether to show action buttons (e.g., Apply, Clear All).
-     * @default false in single select mode, true in multiple select mode
-     */
-    showActionButtons?: boolean;
-    /**
-     * Whether to show the "Clear All" button.
-     * - If `showActionButtons` is false, `showClearAllButton` will be ignored.
-     * - If `multiple` is false, `showClearAllButton` will always be false.
-     * @default true
-     */
-    showClearAllButton?: boolean;
-    /**
-     * Text for the "Clear All" button.
-     * @default 'Clear All'
-     */
-    clearAllButtonText?: string;
-    /**
-     * Text for the "Apply" button.
-     * @default 'Apply'
-     */
-    applyButtonText?: string;
-    /**
-     * Callback function called when the "Clear All" button is clicked.
-     * @default null
-     */
-    onClearAll?: () => void;
-    /**
-     * Callback function called to apply the selected items.
-     * - In single select mode, if `showActionButtons` is false, `onApply` will be called when an option is clicked.
-     * - In multiple select mode, if `showActionButtons` is false, `onApply` will be called when clicked outside the dropdown menu.
-     * - If `showActionButtons` is true, `onApply` will be called when the "Apply" button is clicked.
-     * @param items - The selected items.
-     * @default null
-     */
-    onApply?: (items: DropdownMenuBaseItemOptionProps[] | DropdownMenuBaseItemOptionProps) => void;
-    /**
-     * Callback function called when the dropdown menu is scrolled to the bottom.
-     * @default null
-     */
-    onScrollToBottom?: () => void;
-    /**
-     * Additional class names for the dropdown menu.
-     * @default null
-     */
-    className?: string;
     /**
-     * Additional styles for the dropdown menu.
-     * @default {}
-     */
-    styles?: React.CSSProperties;
-    /**
-     * The values of the selected items.
-     * @default []
-     */
-    selectedValues?: (string | number)[];
-    /**
-     * The trigger element for the dropdown menu.
-     * - If the trigger element is not provided, the dropdown menu will be always visible.
-     * - If the trigger element is provided, initially the dropdown menu will be hidden.
-     * - If the trigger element is provided, the dropdown menu will be shown when the trigger element is clicked.
-     * @default null
-     */
-    trigger?: React.ReactNode;
-    /**
-     * The width of the dropdown menu.
-     * - If width is not provided, the width will be set to 300px.
-     * - If width is provided, the width will be set to the provided value.
-     * - If the width is 100%, the width will be equal to the width of the trigger element or parent element if trigger is not given.
-     * @default '300px'
+     * The color of the OTP input fields.
+     * @default 'brand'
      */
-    width?: string;
+    color?: OtpFieldColors;
 }
-export const NSDropdownMenu: (props: DropdownMenuProps) => JSX.Element;
-export const NSDropdownTrigger: ({ label, children, errorMessage, }: {
-    label?: string;
-    children?: string;
-    errorMessage?: string;
-}) => JSX.Element;
+export const NSOtpInput: (props: OtpInputFieldProps) => JSX.Element;
 
 //# sourceMappingURL=index.d.ts.map