@newtonschool/grauity 3.0.0-beta.0 → 3.0.0

package/dist/index.d.ts

@@ -2,6 +2,7 @@ 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";
+import { Schema } from "yup";
 /**
  * The list of colors which should be available for all action components.
  */
@@ -41,6 +42,8 @@ export const ICON_TAGS: {
     project: string[];
     "terminal-filled": string[];
     terminal: string[];
+    "nst-filled": string[];
+    nst: string[];
     "desktop-filled": string[];
     desktop: string[];
     "gamepad-filled": string[];
@@ -123,6 +126,8 @@ export const ICON_TAGS: {
     "lock-open-filled": string[];
     "lock-open": string[];
     lock: string[];
+    "magic-orb-filled": string[];
+    "magic-orb": string[];
     "message-filled": string[];
     "message-info-filled": string[];
     "message-info": string[];
@@ -167,10 +172,20 @@ export const ICON_TAGS: {
     star: string[];
     "trophy-filled": string[];
     trophy: string[];
+    codechef: string[];
+    codeforces: string[];
     facebook: string[];
+    github: string[];
+    google: string[];
+    hackerearth: string[];
+    hackerrank: string[];
+    instagram: string[];
+    leetcode: string[];
     linkedin: string[];
     twitter: string[];
     whatsapp: string[];
+    x: string[];
+    youtube: string[];
     "arrow-double-filled": string[];
     "arrow-double": string[];
     "arrow-down-filled": string[];
@@ -357,6 +372,12 @@ 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[];
@@ -447,6 +468,7 @@ export const ICON_TAGS: {
 export const TAG_ICONS: {
     Alert: string[];
     Code: string[];
+    College: string[];
     Device: string[];
     Docs: string[];
     Finance: string[];
@@ -458,7 +480,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' | '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' | 'nst-filled' | 'nst' | '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' | 'magic-orb-filled' | 'magic-orb' | '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' | 'codechef' | 'codeforces' | 'facebook' | 'github' | 'google' | 'hackerearth' | 'hackerrank' | 'instagram' | 'leetcode' | 'linkedin' | 'twitter' | 'whatsapp' | 'x' | 'youtube' | '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 grauityFlippedChoiceName = 'vertically' | 'horizontally';
 type grauityRotatedChoiceName = 'clockwise' | 'counterclockwise';
 type grauityIconSizeName = '4' | '8' | '12' | '14' | '16' | '20' | '24' | '28' | '32' | '36' | '40';
@@ -2863,7 +2885,7 @@ 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`
      * */
@@ -3527,6 +3549,19 @@ 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;
@@ -3698,6 +3733,16 @@ 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;
+    /**
+     * Flag to determine if the background scroll should be disabled.
+     * @default true
+     */
+    shouldDisableScroll?: boolean;
 }
 export interface MultiStepModalProps {
     /**
@@ -4106,12 +4151,22 @@ export interface PopOverProps {
      * This will directly open the popover at given position without any adjustments.
      */
     position?: PopoverPosition;
+    /**
+     * Should focus on the first element in the popover
+     * @default true
+     */
+    shouldFocusOnFirstElement?: boolean;
 }
 export function NSPopOver(props: PopOverProps): JSX.Element;
 interface DropdownOption {
     id: number | string;
     label: string;
 }
+/**
+ * @deprecated This interface is deprecated and will be removed in future versions.
+ * - Use the `Dropdown` component instead.
+ * @see {@link https://grauity.newtonschool.co/?path=/docs/elements-form-dropdown--docs}
+ */
 export interface SelectDropdownProps {
     /**
      * Set of options available for selection.
@@ -4163,11 +4218,21 @@ export interface SelectDropdownProps {
      */
     width?: string | null;
 }
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * - Use the `Dropdown` component instead.
+ * @see {@link https://grauity.newtonschool.co/?path=/docs/elements-form-dropdown--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 `Dropdown` component instead.
+ * @see {@link https://grauity.newtonschool.co/?path=/docs/elements-form-dropdown--docs}
+ */
 export interface MultiSelectDropdownProps {
     /**
      * Text to display when no option is selected.
@@ -4220,6 +4285,11 @@ export interface MultiSelectDropdownProps {
      */
     triggerComponent?: React.ReactNode;
 }
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * - Use the `Dropdown` component instead.
+ * @see {@link https://grauity.newtonschool.co/?path=/docs/elements-form-dropdown--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';
@@ -4377,6 +4447,16 @@ export interface BottomSheetProps {
      * Additional class name to be passed to the BottomSheet.
      */
     className?: string;
+    /**
+     * Should focus on the first element in the bottomsheet
+     * @default true
+     */
+    shouldFocusOnFirstElement?: boolean;
+    /**
+     * Flag to determine if the background scroll should be disabled.
+     * @default true
+     */
+    shouldDisableScroll?: boolean;
 }
 export const NSBottomSheet: React.ForwardRefExoticComponent<BottomSheetProps & React.RefAttributes<HTMLDivElement>>;
 export interface CalendarEventProps {
@@ -5296,11 +5376,11 @@ export interface CheckboxProps {
     /**
      * The size of the checkbox.
      * @default medium
-     * @deprecated Use color prop instead
      */
     size?: CheckboxSize;
     /**
      * The state of the checkbox.
+     * @deprecated Use color prop instead
      * @default default
      */
     state?: CheckboxState;
@@ -5341,9 +5421,13 @@ export interface CheckboxProps {
     value?: string | number;
     /**
      * Additional class names to apply to the checkbox.
-     * @default brand
+     * @default undefined
      */
     className?: string;
+    /**
+     * The color of the checkbox.
+     * @default brand
+     */
     color?: CheckboxColors;
 }
 /**
@@ -5557,5 +5641,582 @@ export interface OtpInputFieldProps {
     color?: OtpFieldColors;
 }
 export const NSOtpInput: (props: OtpInputFieldProps) => JSX.Element;
+export enum NSDropdownMenuBaseItemType {
+    SUB_HEADER = "subheader",
+    DIVIDER = "divider",
+    OPTION = "option"
+}
+type OptionValue = string | number;
+export type NSDropdownMenuBaseItemSubHeaderProps = {
+    type: NSDropdownMenuBaseItemType.SUB_HEADER;
+    title: string;
+};
+export type NSDropdownMenuBaseItemDividerProps = {
+    type: NSDropdownMenuBaseItemType.DIVIDER;
+};
+export type NSDropdownMenuBaseItemOptionProps = {
+    type: NSDropdownMenuBaseItemType.OPTION;
+    label: string;
+    value: OptionValue;
+    description?: string;
+    leftIcon?: grauityIconName;
+    rightIcon?: grauityIconName;
+    disabled?: boolean;
+};
+export type NSDropdownMenuBaseItemProps = NSDropdownMenuBaseItemSubHeaderProps | NSDropdownMenuBaseItemDividerProps | NSDropdownMenuBaseItemOptionProps;
+export interface NSDropdownMenuProps {
+    /**
+     * 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: NSDropdownMenuBaseItemProps[];
+    /**
+     * 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, `onChange` will be called when an option is clicked.
+     * - In multiple select mode, if `showActionButtons` is false, `onChange` will be called when clicked outside the dropdown menu.
+     * - If `showActionButtons` is true, `onChange` will be called when the "Apply" button is clicked.
+     * @param items - The selected items.
+     * - If `multiple` is false, `items` will be a single object.
+     * - If `multiple` is true, `items` will be an array of objects.
+     * @default null
+     */
+    onChange?: (items: NSDropdownMenuBaseItemOptionProps | NSDropdownMenuBaseItemOptionProps[]) => 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.
+     * - If `multiple` is false, `value` should be a selected object
+     * - If `multiple` is true, `value` should be an array of selected objects
+     * @default null
+     */
+    value?: NSDropdownMenuBaseItemOptionProps | NSDropdownMenuBaseItemOptionProps[];
+    /**
+     * The width of the dropdown menu.
+     * @default '300px'
+     */
+    width?: string;
+}
+export const NSDropdownMenu: React.ForwardRefExoticComponent<NSDropdownMenuProps & React.RefAttributes<HTMLDivElement>>;
+interface DropdownTriggerProps {
+    /**
+     * The name of the dropdown field
+     * @required
+     */
+    name: string;
+    /**
+     * The label for the dropdown field
+     */
+    label?: string;
+    /**
+     * The placeholder text for the dropdown field
+     * @default 'Select'
+     */
+    placeholder?: string;
+    /**
+     * Whether the dropdown field is required
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * Whether to disable the dropdown field
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * The help message to display below the dropdown field
+     */
+    helpMessage?: string;
+    /**
+     * The error message to display when the dropdown field is invalid
+     */
+    errorMessage?: string;
+    /**
+     * Whether to show the selected value on trigger
+     * - If it is false, the placeholder will be shown always.
+     * - In single select mode, value will be shown.
+     * - In multi select mode, 'n selected' will be shown.
+     * @default true
+     */
+    showSelectedValueOnTrigger?: boolean;
+    /**
+     * The custom trigger element to display in the dropdown
+     * @default null
+     * @example <Button>Click me</Button>
+     */
+    trigger?: React.ReactNode;
+    /**
+     * The function to call when the dropdown menu is closed
+     *
+     * @param value The selected value(s) in the dropdown menu
+     */
+    onClose?: (value: NSDropdownMenuBaseItemOptionProps | NSDropdownMenuBaseItemOptionProps[]) => void;
+}
+export interface DropdownProps extends DropdownTriggerProps, NSDropdownMenuProps {
+    menuProps?: {
+        /**
+         * The width of the dropdown menu.
+         * @default '300px'
+         */
+        width?: string;
+        /**
+         * Whether the dropdown menu is same width as trigger
+         * @default true
+         */
+        fullWidth?: boolean;
+    };
+}
+export const NSDropdown: (props: DropdownProps) => JSX.Element;
+type CheckBoxValue = string | number;
+interface CheckboxItemProps extends Omit<CheckboxProps, 'name'> {
+    name?: string;
+}
+export interface CheckboxGroupProps {
+    /**
+     * The name of the checkbox fields.
+     * @required
+     */
+    name: string;
+    /**
+     * The label for the checkbox group.
+     * @default undefined
+     */
+    label?: string;
+    /**
+     * The items available in the checkbox group.
+     * Each item should adhere to the `CheckboxProps` interface.
+     * @default []
+     */
+    items: CheckboxItemProps[];
+    /**
+     * The currently selected values in the checkbox group.
+     * @default []
+     */
+    value?: CheckBoxValue[];
+    /**
+     * Callback function to handle changes in the checkbox group.
+     * @param value - The updated array of selected values.
+     */
+    onChange?: (value: CheckBoxValue[]) => void;
+    /**
+     * Whether the checkbox group is required.
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * The help message for the checkbox group.
+     * @default undefined
+     */
+    helpMessage?: string;
+    /**
+     * The error message for the checkbox group.
+     * @default undefined
+     */
+    errorMessage?: string;
+    /**
+     * Additional class names to apply to the checkbox.
+     * @default undefined
+     */
+    className?: string;
+}
+export const NSCheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLDivElement>>;
+type RadioButtonValue = string | number;
+interface RadioButtonItemProps extends Omit<RadioButtonProps, 'name'> {
+    name?: string;
+}
+export interface RadioButtonGroupProps {
+    /**
+     * The name of the radio button group.
+     * @required
+     */
+    name: string;
+    /**
+     * The label for the radio button group.
+     * @default undefined
+     */
+    label?: string;
+    /**
+     * The items available in the radio button group.
+     * Each item should adhere to the `RadioButtonProps` interface.
+     * @default []
+     */
+    items: RadioButtonItemProps[];
+    /**
+     * The currently selected value in the radio button group.
+     * @default null
+     */
+    value?: RadioButtonValue;
+    /**
+     * Callback function to handle changes in the radio button group.
+     * @param value - The updated value.
+     */
+    onChange?: (value: RadioButtonValue) => void;
+    /**
+     * Whether the radio button group is required.
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * The help message for the radio button group.
+     * @default undefined
+     */
+    helpMessage?: string;
+    /**
+     * The error message for the radio button group.
+     * @default undefined
+     */
+    errorMessage?: string;
+    /**
+     * Additional class names to apply to the radio button.
+     * @default undefined
+     */
+    className?: string;
+}
+/**
+ * RadioButtonGroup component is used to render a group of radio buttons.
+ * - It is used to select one option from a list of options.
+ * - It can be used to render a list of radio buttons with a label, help message, and error message.
+ *
+ * @example
+ * <RadioButtonGroup
+ *      name="radio-button-group"
+ *      label="Radio button group"
+ *      items={[
+ *          { value: 'option1', label: 'Option 1' },
+ *          { value: 'option2', label: 'Option 2' },
+ *          { value: 'option3', label: 'Option 3' },
+ *          { value: 'option4', label: 'Option 4', isDisabled: true },
+ *      ]}
+ *      value="option1"
+ *      onChange={(value) => {
+ *          console.log(value);
+ *      }}
+ *      isRequired={true}
+ *      helpMessage="This is a help message"
+ *      errorMessage="This is an error message"
+ *      className=""
+ * />
+ */
+export const NSRadioButtonGroup: React.ForwardRefExoticComponent<RadioButtonGroupProps & React.RefAttributes<HTMLDivElement>>;
+export type NSFieldName = string;
+export interface NSFormState {
+    [key: NSFieldName]: any;
+}
+export interface NSFormErrors {
+    [key: NSFieldName]: string;
+}
+export enum NSFormFieldType {
+    TEXTFIELD = "textfield",
+    DROPDOWN = "dropdown",
+    DROPDOWN_MENU = "dropdown-menu",
+    CHECKBOX_GROUP = "checkbox-group",
+    RADIOBUTTON_GROUP = "radio-button-group",
+    CUSTOM = "custom"
+}
+export interface NSConditionalProp {
+    prop: string;
+    is: (data: NSFormState) => boolean;
+    then?: any;
+    otherwise?: any;
+}
+export interface NSFormFieldBaseProps {
+    type: NSFormFieldType;
+    renderer?: (props: FormFieldProps) => React.ReactNode;
+    rendererProps?: any;
+    conditionalProps?: NSConditionalProp[];
+    configProps?: any;
+}
+export interface NSFormFieldTextFieldProps extends NSFormFieldBaseProps {
+    type: NSFormFieldType.TEXTFIELD;
+    rendererProps: TextFieldProps;
+}
+export interface NSFormFieldDropdownProps extends NSFormFieldBaseProps {
+    type: NSFormFieldType.DROPDOWN;
+    rendererProps: DropdownProps;
+}
+export interface NSFormFieldDropdownMenuProps extends NSFormFieldBaseProps {
+    type: NSFormFieldType.DROPDOWN_MENU;
+    rendererProps: DropdownProps;
+}
+export interface NSFormFieldCheckboxGroupProps extends NSFormFieldBaseProps {
+    type: NSFormFieldType.CHECKBOX_GROUP;
+    rendererProps: CheckboxGroupProps;
+}
+interface FormFieldRadioButtonGroupProps extends NSFormFieldBaseProps {
+    type: NSFormFieldType.RADIOBUTTON_GROUP;
+    rendererProps: RadioButtonGroupProps;
+}
+export interface NSFormFieldCustomProps extends NSFormFieldBaseProps {
+    type: NSFormFieldType.CUSTOM;
+    rendererProps: any;
+}
+export type NSFormField = NSFormFieldTextFieldProps | NSFormFieldDropdownProps | NSFormFieldDropdownMenuProps | NSFormFieldCheckboxGroupProps | FormFieldRadioButtonGroupProps | NSFormFieldCustomProps;
+export interface NSFormFields {
+    [key: NSFieldName]: NSFormField;
+}
+export interface NSFormRowProps {
+    widths?: string;
+    column?: NSFormRowColumnCondition;
+    items?: NSFormField[];
+}
+export enum NSFormRowColumnCondition {
+    ALWAYS_COLUMN = "always-column",
+    ALWAYS_ROW = "always-row",
+    COLUMN_ON_MOBILE = "column-on-mobile"
+}
+export interface NSFormConfig {
+    fieldNames: NSFieldName[];
+    initialState: NSFormState;
+    rows: NSFormRowProps[];
+    schema?: Schema;
+}
+export enum NSFormValidationType {
+    ON_BLUR = "onBlur",
+    ON_CHANGE = "onChange"
+}
+export interface NSUseFormProps {
+    /**
+     * The form configuration object.
+     * - This object contains the form field names, initial state, and form rows.
+     * - `fieldNames`: An array of strings representing the field names.
+     * - `initialState`: An object with the field name as the key and the initial value as the value.
+     * - `rows`: An array of objects with the following properties:
+     *      - `widths`: A string representing the column widths for the row. (Eg: '1fr 1fr')
+     *      - `column`: A string representing the column condition for the row. (Options: 'always-column', 'always-row', 'column-on-mobile')
+     *      - `items`: An array of form field objects.
+     *          - Each form field object contains the following properties:
+     *          - `type`: A string representing the form field type. (Options: 'textfield', 'dropdown', 'dropdown-menu', 'checkbox-group', 'radio-button-group', 'custom')
+     *          - `renderer`: A function that returns a React node. (Props: formField, error, formData, handleChange)
+     *          - `rendererProps`: Props required for the form field renderer. (Eg: name, label, placeholder, etc.)
+     *          - `configProps`: An object with additional form field props required at user side.
+     * - `schema`: A Yup schema object to validate the form fields.
+     * @required
+     */
+    formConfig: NSFormConfig;
+    /**
+     * CSS properties to style the form rows.
+     * @default {}
+     */
+    rowStyles?: React.CSSProperties;
+    /**
+     * The type of validation to be used for the form fields.
+     * - 'onBlur': Validate the form fields on blur.
+     * - 'onChange': Validate the form fields on change.
+     * - If not provided, all fields will be validated on submit.
+     * @default null
+     */
+    whenToValidate?: NSFormValidationType;
+    /**
+     * Flag to indicate if the form is being viewed on a mobile device.
+     * @default false
+     */
+    isMobileView?: boolean;
+    /**
+     * Flag to indicate if the form should focus on the first error when the form is validated.
+     * @default true
+     */
+    shouldFocusOnFirstError?: boolean;
+    /**
+     * Flag to indicate if the form should submit on pressing the 'Enter' key.
+     * @default true
+     */
+    shouldSubmitOnEnter?: boolean;
+    /**
+     * Flag to indicate if the form should show the submit button.
+     * - A default submit button will be rendered at the end of the form.
+     * - If set to false, the user can provide a custom submit button and call the `submit` function to submit the form.
+     * @default true
+     */
+    shouldShowSubmitButton?: boolean;
+    /**
+     * Props for the submit button.
+     * - These props will be passed to the default submit button.
+     */
+    submitButtonProps?: ButtonProps;
+    /**
+     * Function to be called when the form is submitted.
+     * - This function will be called after the form is validated and there are no errors.
+     * @param data - The form data to be submitted.
+     */
+    onSubmit?: (data: NSFormState) => void;
+}
+export interface NSUseFormReturnProps {
+    /**
+     * The current state of the form.
+     */
+    formData: NSFormState;
+    /**
+     * The form renderer to render the form fields.
+     * - This is a React node that renders the form fields based on the form configuration.
+     * - Place this node in the component to render the form.
+     */
+    formRenderer: React.ReactNode;
+    /**
+     * Function to validate the form fields.
+     * @param fields - The form fields to validate. (Default: All fields)
+     * @param data - The form data to validate. (Default: Current form data)
+     */
+    validate: (fields: NSFieldName[], data: NSFormState) => void;
+    /**
+     * Function to submit the form.
+     * - This function will validate the form fields and submit the form if there are no errors.
+     * - Will be called on pressing Enter key if the `shouldSubmitOnEnter` flag is set to true.
+     * - Will be called on pressing Submit button if the `shouldShowSubmitButton` flag is set to true.
+     * - If the `shouldShowSubmitButton` flag is set to false, the user can create a custom submit button and call this function to submit the form.
+     */
+    submit: () => void;
+    /**
+     * Function to change the form data.
+     * @param newData - The new form data to update.
+     */
+    changeFormData: (newData: NSFormState) => void;
+}
+interface HandleFormFieldChangeProps {
+    name: string;
+    value: any;
+}
+interface FormFieldProps {
+    formField: NSFormField;
+    error?: string;
+    formData: NSFormState;
+    handleChange: (props: HandleFormFieldChangeProps) => void;
+    whenToValidate?: NSFormValidationType;
+    handleValidate: (props: HandleFormFieldChangeProps) => void;
+}
+/**
+ * Custom hook to manage form state, validation, submission and rendering.
+ *
+ * @param {Object} formConfig - Configuration object for the form.
+ * @param {Object} [rowStyles={}] - Optional styles for form rows.
+ * @param {string} whenToValidate - Determines when to validate the form fields.
+ * @param {boolean} [isMobileView=false] - Flag to indicate if the form is in mobile view.
+ * @param {boolean} [shouldFocusOnFirstError=true] - Flag to indicate if the first error field should be focused.
+ * @param {boolean} [shouldSubmitOnEnter=true] - Flag to indicate if the form should be submitted on pressing Enter.
+ * @param {boolean} [shouldShowSubmitButton=true] - Flag to indicate if the submit button should be shown.
+ * @param {Object} [submitButtonProps={}] - Optional properties for the submit button.
+ * @param {Function} [onSubmit=() => {}] - Callback function to handle form submission.
+ *
+ * @returns {Object} - Returns an object containing:
+ * - `formData`: The current state of the form data.
+ * - `formRenderer`: The rendered form component.
+ * - `validate`: Function to validate form fields.
+ * - `submit`: Function to submit the form.
+ * - `changeFormData`: Function to update form data externally.
+ *
+ * @description
+ * This hook provides the following functionalities:
+ * - Validates form fields based on the provided schema in `formConfig`.
+ * - Handles form submission and triggers the `onSubmit` callback if there are no validation errors.
+ * - Provides a form renderer component to render the form UI with default submit button.
+ * - Allows updating form data and handling individual field changes.
+ */
+export const useNSForm: ({ formConfig, rowStyles, whenToValidate, isMobileView, shouldFocusOnFirstError, shouldSubmitOnEnter, shouldShowSubmitButton, submitButtonProps, onSubmit, }: NSUseFormProps) => NSUseFormReturnProps;
 
 //# sourceMappingURL=index.d.ts.map