@newtonschool/grauity 1.0.0 → 1.0.2

package/dist/common/types.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+/**
+ * Interface representing the properties for a styled div component.
+ *
+ * @extends React.HTMLAttributes<HTMLDivElement>
+ * @property {React.Ref<HTMLDivElement>} [ref] - Optional ref for the div element.
+ */
+export interface StyledDivProps extends React.HTMLAttributes<HTMLDivElement> {
+    ref?: React.Ref<HTMLDivElement>;
+}
+/**
+ * Interface representing the properties for a styled select component.
+ *
+ * @extends React.SelectHTMLAttributes<HTMLSelectElement>
+ * @property {React.Ref<HTMLSelectElement>} [ref] - Optional ref for the select element.
+ */
+export interface StyledSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+    ref?: React.Ref<HTMLSelectElement>;
+}
+/**
+ * Interface representing the properties for a styled input component.
+ *
+ * @extends React.InputHTMLAttributes<HTMLInputElement>
+ * @property {React.Ref<HTMLInputElement>} [ref] - Optional ref to the input element.
+ */
+export interface StyledInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    ref?: React.Ref<HTMLInputElement>;
+}
+/**
+ * Interface representing the properties for a styled button component.
+ *
+ * @extends React.ButtonHTMLAttributes<HTMLButtonElement>
+ * @property {React.Ref<HTMLButtonElement>} [ref] - Optional ref to the button element.
+ */
+export interface StyledButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    ref?: React.Ref<HTMLButtonElement>;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/common/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../common/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;GAKG;AACH,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACnC;AAED;;;;;GAKG;AACH,MAAM,WAAW,iBACb,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;CACtC;AAED;;;;;GAKG;AACH,MAAM,WAAW,gBACb,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IACnD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;CACrC;AAED;;;;;GAKG;AACH,MAAM,WAAW,iBACb,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;CACtC"}

package/dist/hooks/useDisableBodyScroll.d.ts

@@ -2,6 +2,6 @@
  * Hook that makes the body scrollable or not scrollable.
  * Useful for modals, dialogs, etc.
  */
-declare const useDisableBodyScroll: () => void;
+declare const useDisableBodyScroll: (disableBodyScroll?: boolean) => void;
 export default useDisableBodyScroll;
 //# sourceMappingURL=useDisableBodyScroll.d.ts.map

package/dist/hooks/useDisableBodyScroll.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDisableBodyScroll.d.ts","sourceRoot":"","sources":["../../hooks/useDisableBodyScroll.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,QAAA,MAAM,oBAAoB,YAkBzB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"useDisableBodyScroll.d.ts","sourceRoot":"","sources":["../../hooks/useDisableBodyScroll.ts"],"names":[],"mappings":"AAGA;;;GAGG;AACH,QAAA,MAAM,oBAAoB,uBAAuB,OAAO,SAsBvD,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/index.d.ts

@@ -1,5 +1,4 @@
 import React, { ReactNode } from "react";
-import PropTypes from "prop-types";
 export const ICON_TAGS: {
     "exclamation-circle-filled": string[];
     "exclamation-circle": string[];
@@ -227,6 +226,8 @@ export const ICON_TAGS: {
     close: string[];
     "compass-filled": string[];
     compass: string[];
+    "database-filled": string[];
+    database: string[];
     "diamond-filled": string[];
     diamond: string[];
     "double-check-filled": string[];
@@ -408,7 +409,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' | 'folder-filled' | 'folder-open-filled' | 'folder-open' | 'folder' | 'label-filled' | 'label' | 'note-filled' | 'note' | 'pen-filled' | 'pen' | 'pin-filled' | 'pin' | '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' | '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' | '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' | 'diamond-filled' | 'diamond' | 'double-check-filled' | 'double-check' | 'download-filled' | 'download' | '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' | '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' | 'printer-filled' | 'printer' | 'quiz-filled' | 'quiz' | 'refresh-filled' | 'refresh' | 'remove-filled' | 'remove' | 'reply-filled' | 'reply' | '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' | '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' | 'study-plan-filled' | 'study-plan' | 'sun-filled' | 'sun' | 'thumbs-down-filled' | 'thumbs-down' | 'thumbs-up-filled' | 'thumbs-up' | 'thunder-filled' | 'thunder' | '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' | 'folder-filled' | 'folder-open-filled' | 'folder-open' | 'folder' | 'label-filled' | 'label' | 'note-filled' | 'note' | 'pen-filled' | 'pen' | 'pin-filled' | 'pin' | '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' | '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' | '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' | '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' | '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' | 'printer-filled' | 'printer' | 'quiz-filled' | 'quiz' | 'refresh-filled' | 'refresh' | 'remove-filled' | 'remove' | 'reply-filled' | 'reply' | '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' | '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' | 'study-plan-filled' | 'study-plan' | 'sun-filled' | 'sun' | 'thumbs-down-filled' | 'thumbs-down' | 'thumbs-up-filled' | 'thumbs-up' | 'thunder-filled' | 'thunder' | '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';
@@ -416,7 +417,7 @@ export interface GrauityInitProps {
     /**
      * An element type to render as (string or function).
      * */
-    as: React.ElementType;
+    as?: React.ElementType;
     /**
      * The font size to be applied on this element and so will act as standard for the `ems` of all grauity components.
      * */
@@ -436,51 +437,22 @@ export interface GrauityInitProps {
     /**
      * Additional styles to be added to the component
      * */
-    style?: object;
+    style?: React.CSSProperties;
 }
 /**
  * This component is used to initialize the Grauity library. Ideally, it should be the root component of your application.
  * But nonetheless all the grauity components should be the children of this component.
  * */
 export function GrauityInit({ as, fontSize, multiplier, className, style, children, }: GrauityInitProps): JSX.Element;
-declare namespace GrauityInit {
-    var propTypes: {
-        as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
-        fontSize: PropTypes.Requireable<string>;
-        multiplier: PropTypes.Requireable<number>;
-        className: PropTypes.Requireable<string>;
-        style: PropTypes.Requireable<object>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    };
-    var defaultProps: {
-        as: string;
-        fontSize: string;
-        multiplier: number;
-        className: string;
-        style: {};
-        children: any;
-    };
-}
 type ThemeType = 'light' | 'dark';
-export const ThemeContext: React.Context<any>;
+export const NSThemeContext: React.Context<any>;
 interface ThemeWrapperProps {
     children: React.ReactNode;
     defaultTheme?: ThemeType;
     usePreferredColorScheme?: boolean;
 }
-export const ThemeWrapper: {
-    ({ children, defaultTheme, usePreferredColorScheme, }: ThemeWrapperProps): JSX.Element;
-    propTypes: {
-        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
-        defaultTheme: PropTypes.Requireable<ThemeType>;
-        usePreferredColorScheme: PropTypes.Requireable<boolean>;
-    };
-    defaultProps: {
-        defaultTheme: ThemeType;
-        usePreferredColorScheme: boolean;
-    };
-};
-export const ThemeConsumer: React.Consumer<any>;
+export const NSThemeWrapper: ({ children, defaultTheme, usePreferredColorScheme, }: ThemeWrapperProps) => JSX.Element;
+export const NSThemeConsumer: React.Consumer<any>;
 export interface IconProps {
     /**
      * Icon can have the aria hidden attribute
@@ -554,71 +526,7 @@ export interface IconProps {
 /**
  * An icon is a glyph used to represent something else.
  */
-export function Icon({ ariaHidden, ariaLabel, as, bordered, circular, color, className, disabled, fitted, flipped, inverted, link, loading, name, rotated, size, style, ...props }: IconProps): JSX.Element;
-declare namespace Icon {
-    var propTypes: {
-        ariaHidden: PropTypes.Requireable<string>;
-        ariaLabel: PropTypes.Requireable<string>;
-        as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
-        bordered: PropTypes.Requireable<boolean>;
-        circular: PropTypes.Requireable<boolean>;
-        color: PropTypes.Requireable<string>;
-        className: PropTypes.Requireable<string>;
-        disabled: PropTypes.Requireable<boolean>;
-        fitted: PropTypes.Requireable<boolean>;
-        flipped: PropTypes.Requireable<import("ui/core/miscellaneous-choices").GRAUITY_FLIPPED_CHOICES>;
-        inverted: PropTypes.Requireable<boolean>;
-        link: PropTypes.Requireable<boolean>;
-        loading: PropTypes.Requireable<boolean>;
-        name: PropTypes.Validator<string>;
-        rotated: PropTypes.Requireable<import("ui/core/miscellaneous-choices").GRAUITY_ROTATED_CHOICES>;
-        size: PropTypes.Requireable<import("ui/core").GRAUITY_SIZE>;
-        style: PropTypes.Requireable<object>;
-    };
-    var defaultProps: {
-        ariaHidden: string;
-        ariaLabel: any;
-        as: string;
-        bordered: boolean;
-        circular: boolean;
-        color: string;
-        className: any;
-        disabled: boolean;
-        fitted: boolean;
-        flipped: any;
-        inverted: boolean;
-        link: boolean;
-        loading: boolean;
-        rotated: any;
-        size: string;
-        style: any;
-    };
-}
-export enum BUTTON_VARIANTS_ENUM {
-    PRIMARY = "primary",
-    SECONDARY = "secondary",
-    TERTIARY = "tertiary",
-    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"
-}
-export enum BUTTON_SIZES_ENUM {
-    SMALL = "small",
-    MEDIUM = "medium",
-    LARGE = "large",
-    EXTRA_LARGE = "extra-large"
-}
-export enum BUTTON_ICON_POSITIONS_ENUM {
-    LEFT = "left",
-    RIGHT = "right"
-}
-export const BUTTON_VARIANTS: BUTTON_VARIANTS_ENUM[];
+export function NSIcon({ ariaHidden, ariaLabel, as, bordered, circular, color, className, disabled, fitted, flipped, inverted, link, loading, name, rotated, size, style, ...props }: IconProps): JSX.Element;
 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';
@@ -723,9 +631,123 @@ export interface ButtonProps {
      * */
     buttonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
 }
+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`
+     *
+     * Default: `primary`
+     * */
+    variant?: ButtonVariants;
+    /**
+     * Size of the button
+     * Available choices: `small`, `medium`, `large`
+     *
+     * Default: `medium`
+     * */
+    size?: ButtonSizes;
+    /**
+     * Icon to be displayed in the button.
+     * */
+    icon?: grauityIconName;
+    /**
+     * Size of the icon
+     * */
+    iconSize?: grauityIconSizeName;
+    /**
+     * Additional classes to be added to the component.
+     * */
+    className?: string;
+    /**
+     * Show that the button is inactive
+     *
+     * Default: `false`
+     * */
+    disabled?: boolean;
+    /**
+     * Show that the button is loading
+     *
+     * Default: `false`
+     * */
+    loading?: boolean;
+    /**
+     * Function to be called on click
+     *
+     * If the button is disabled, the function will not be called
+     * */
+    onClick?: (e?: any) => void;
+    /**
+     * Additional styles to be used over the element
+     *
+     * Default: `{}`
+     * */
+    style?: React.CSSProperties;
+    /**
+     * Make the button full width
+     *
+     * Default: `false`
+     * */
+    fullWidth?: boolean;
+    /**
+     * Type of the button
+     *
+     * Default: `button`
+     * */
+    type?: 'button' | 'submit' | 'reset';
+    /**
+     * Aria label for the button
+     * */
+    ariaLabel?: string;
+    /**
+     * Tooltip to be displayed on hover, uses the `title` attribute
+     * */
+    tooltip?: string;
+    /**
+     * Tab index of the button
+     * */
+    tabIndex?: number;
+    /**
+     * Function to be called on mouse enter
+     * */
+    onMouseEnter?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Function to be called on mouse leave
+     * */
+    onMouseLeave?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Additional props to be passed to the button element
+     * */
+    buttonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+}
 interface ButtonGroupProps {
     children: React.ReactNode;
 }
+export enum BUTTON_VARIANTS_ENUM {
+    PRIMARY = "primary",
+    SECONDARY = "secondary",
+    TERTIARY = "tertiary",
+    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"
+}
+export enum BUTTON_SIZES_ENUM {
+    SMALL = "small",
+    MEDIUM = "medium",
+    LARGE = "large",
+    EXTRA_LARGE = "extra-large"
+}
+export enum BUTTON_ICON_POSITIONS_ENUM {
+    LEFT = "left",
+    RIGHT = "right"
+}
+export const BUTTON_VARIANTS: BUTTON_VARIANTS_ENUM[];
 /**
  * A Button is a component that is used to trigger an action.
  * It can contain text and an icon, or only text.
@@ -733,13 +755,11 @@ interface ButtonGroupProps {
  * To create an icon button, checkout the IconButton component.
  */
 export const NSButton: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
-export const NSButtonGroup: {
-    ({ children }: ButtonGroupProps): JSX.Element;
-    defaultProps: ButtonGroupProps;
-    propTypes: {
-        children: PropTypes.Requireable<any>;
-    };
-};
+export const NSButtonGroup: ({ children }: ButtonGroupProps) => JSX.Element;
+/**
+ * An IconButton is a button that contains an icon.
+ */
+export const NSIconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
 type TypographyAsType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'label' | 'caption' | 'code' | 'auto';
 type TypographyVariantType = 'heading-semibold-h40' | 'heading-semibold-h36' | 'heading-semibold-h28' | 'heading-semibold-h24' | 'heading-semibold-h20' | 'heading-semibold-h16' | 'paragraph-semibold-body1' | 'paragraph-semibold-body2' | 'paragraph-semibold-body3' | 'paragraph-semibold-body4' | 'paragraph-semibold-label' | 'paragraph-semibold-label2' | 'paragraph-semibold-callout' | 'paragraph-medium-body1' | 'paragraph-medium-body2' | 'paragraph-medium-body3' | 'paragraph-medium-body4' | 'paragraph-medium-label' | 'paragraph-medium-label2' | 'paragraph-medium-callout' | 'paragraph-medium-code' | 'heading-semibold-overline1' | 'heading-semibold-overline2' | 'action-semibold-primary' | 'action-semibold-link' | 'blog-semibold-title' | 'blog-medium-regular' | 'blog-medium-bold' | 'blog-medium-italic';
 export interface TypographyProps {
@@ -759,7 +779,7 @@ export interface TypographyProps {
      * Determines the type of the element rendered
      * Available choices:
      *
-     * Default: `p`
+     * Default: `auto` (automatically selects the HTML tag based on the variant)
      * */
     as?: TypographyAsType;
     /**
@@ -798,27 +818,7 @@ export const TYPOGRAPHY_AS_LIST: readonly TypographyAsType[];
  * If you want the text to be rendered as a different HTML tag, provide your desired
  * value to prop `as`, such as `'h1'`, `'h2'`, `'p'`, etc.
  */
-export const NSTypography: {
-    ({ variant, as, color, textAlign, textTransform, fontSize, children, }: TypographyProps): JSX.Element;
-    propTypes: {
-        variant: PropTypes.Requireable<import("ui/elements/Typography/types").TypographyVariantType>;
-        as: PropTypes.Requireable<string>;
-        color: PropTypes.Requireable<string>;
-        textAlign: PropTypes.Requireable<string>;
-        textTransform: PropTypes.Requireable<string>;
-        fontSize: PropTypes.Requireable<string>;
-        children: PropTypes.Requireable<any>;
-    };
-    defaultProps: {
-        variant: string;
-        as: string;
-        color: string;
-        textAlign: any;
-        textTransform: any;
-        fontSize: any;
-        children: string;
-    };
-};
+export const NSTypography: ({ variant, as, color, textAlign, textTransform, fontSize, children, }: TypographyProps) => JSX.Element;
 interface TableColumn {
     /**
      * Column key
@@ -992,37 +992,7 @@ export interface TableProps {
  * It is composed of rows and columns.
  */
 export const NSTable: {
-    ({ rows, columns, ...props }: TableProps): JSX.Element;
-    propTypes: {
-        rows: PropTypes.Requireable<any[]>;
-        columns: PropTypes.Requireable<any[]>;
-        condensed: PropTypes.Requireable<boolean>;
-        striped: PropTypes.Requireable<boolean>;
-        borderAround: PropTypes.Requireable<boolean>;
-        borderWithin: PropTypes.Requireable<boolean>;
-        borderHorizontal: PropTypes.Requireable<boolean>;
-        borderVertical: PropTypes.Requireable<boolean>;
-        className: PropTypes.Requireable<string>;
-        loading: PropTypes.Requireable<boolean>;
-        style: PropTypes.Requireable<object>;
-        capitalizeHeaders: PropTypes.Requireable<boolean>;
-        highlightHeaders: PropTypes.Requireable<boolean>;
-    };
-    defaultProps: {
-        rows: any[];
-        columns: any[];
-        condensed: boolean;
-        striped: boolean;
-        borderAround: boolean;
-        borderWithin: boolean;
-        borderHorizontal: boolean;
-        borderVertical: boolean;
-        className: string;
-        loading: boolean;
-        style: {};
-        capitalizeHeaders: boolean;
-        highlightHeaders: boolean;
-    };
+    ({ rows, columns, condensed, striped, borderAround, borderWithin, borderHorizontal, borderVertical, className, style, capitalizeHeaders, highlightHeaders, }: TableProps): JSX.Element;
     NSTable: import("styled-components").StyledComponent<string, any, import("ui/elements/Table/types").TableComponentProps, never>;
     TableBody: import("styled-components").StyledComponent<string, any, import("ui/elements/Table/types").TableBodyComponentProps, never>;
     TableDataCell: import("styled-components").StyledComponent<string, any, import("ui/elements/Table/types").TableDataCellComponentProps, never>;
@@ -1302,81 +1272,113 @@ export interface ConfirmationDialogProps {
 /**
  * A confirmation dialog is a dialog box that asks the user to confirm an action.
  */
-export const NSModal: {
-    ({ cancelText, confirmText, onCancel, onConfirm, banner, title, description, body, cancelButtonVariant, confirmButtonVariant, showCloseButton, hideOnClickAway, blurBackground, mobileBottomFullWidth, }: ConfirmationDialogProps): JSX.Element;
-    propTypes: {
-        cancelText: PropTypes.Requireable<string>;
-        confirmText: PropTypes.Requireable<string>;
-        onCancel: PropTypes.Requireable<(...args: any[]) => any>;
-        onConfirm: PropTypes.Requireable<(...args: any[]) => any>;
-        banner: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        description: PropTypes.Requireable<string>;
-        body: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        cancelButtonVariant: PropTypes.Requireable<string>;
-        confirmButtonVariant: PropTypes.Requireable<string>;
-        showCloseButton: PropTypes.Requireable<boolean>;
-        hideOnClickAway: PropTypes.Requireable<boolean>;
-        blurBackground: PropTypes.Requireable<boolean>;
-        mobileBottomFullWidth: PropTypes.Requireable<boolean>;
-    };
-    defaultProps: {
-        cancelText: string;
-        confirmText: string;
-        banner: any;
-        title: string;
-        description: string;
-        body: any;
-        onCancel: () => void;
-        onConfirm: () => void;
-        cancelButtonVariant: string;
-        confirmButtonVariant: string;
-        showCloseButton: boolean;
-        hideOnClickAway: boolean;
-        blurBackground: boolean;
-        mobileBottomFullWidth: boolean;
-    };
-};
+export const NSModal: ({ cancelText, confirmText, onCancel, onConfirm, banner, title, description, body, cancelButtonVariant, confirmButtonVariant, showCloseButton, hideOnClickAway, blurBackground, mobileBottomFullWidth, }: ConfirmationDialogProps) => JSX.Element;
 /**
  * A multi-step modal is a modal that has multiple steps.
  */
 export const NSMultiStepModal: {
     ({ modalSteps, showModalStepsPagination, hideOnClickAway, blurBackground, onHide, onFinalStep, mobileBottomFullWidth, onStepChange, modalPadding, modalBodyMargin, width, height, minHeight, showCloseButton, }: MultiStepModalProps): JSX.Element;
-    propTypes: {
-        modalSteps: PropTypes.Requireable<any[]>;
-        showModalStepsPagination: PropTypes.Requireable<boolean>;
-        hideOnClickAway: PropTypes.Requireable<boolean>;
-        blurBackground: PropTypes.Requireable<boolean>;
-        onHide: PropTypes.Requireable<(...args: any[]) => any>;
-        onFinalStep: PropTypes.Requireable<(...args: any[]) => any>;
-        mobileBottomFullWidth: PropTypes.Requireable<boolean>;
-        onStepChange: PropTypes.Requireable<(...args: any[]) => any>;
-        modalPadding: PropTypes.Requireable<string>;
-        modalBodyMargin: PropTypes.Requireable<string>;
-        width: PropTypes.Requireable<string>;
-        height: PropTypes.Requireable<string>;
-        minHeight: PropTypes.Requireable<string>;
-        showCloseButton: PropTypes.Requireable<boolean>;
-    };
-    defaultProps: {
-        modalSteps: any[];
-        showModalStepsPagination: boolean;
-        hideOnClickAway: boolean;
-        blurBackground: boolean;
-        onHide: () => void;
-        onFinalStep: () => void;
-        mobileBottomFullWidth: boolean;
-        onStepChange: () => void;
-        modalPadding: string;
-        modalBodyMargin: string;
-        width: any;
-        height: any;
-        minHeight: any;
-        showCloseButton: boolean;
-    };
     PaginatedActions: import("styled-components").StyledComponent<string, any, {}, never>;
     Pagination: import("styled-components").StyledComponent<string, any, {}, never>;
     PaginationItem: import("styled-components").StyledComponent<string, any, import("ui/elements/Modal/types").ModalPaginationItemProps, never>;
 };
+interface DropdownOption {
+    id: number | string;
+    label: string;
+}
+export interface SelectDropdownProps {
+    /**
+     * Set of options available for selection.
+     * @default new Set([])
+     */
+    options?: Set<DropdownOption>;
+    /**
+     * Name of the icon to display in the dropdown button.
+     */
+    iconName?: grauityIconName;
+    /**
+     * Text to display in the dropdown button.
+     * @default Select
+     */
+    text?: string;
+    /**
+     * Flag to enable or disable the search functionality.
+     * @default true
+     */
+    shouldEnableSearch?: boolean;
+    /**
+     * Callback function triggered when the search input value changes.
+     * @param value - The current value of the search input.
+     */
+    onSearchInputChange?: (value: string) => void;
+    /**
+     * Placeholder text for the search input field.
+     * @default Search
+     */
+    searchPlaceholder?: string;
+    /**
+     * Callback function triggered when the option is selected.
+     * @param option - The selected option.
+     */
+    onChange?: (option: DropdownOption) => void;
+    /**
+     * Text to display when no option is available.
+     * @default -- No options available --
+     */
+    noOptionsText?: string;
+}
+export const NSSelectDropdown: React.ForwardRefExoticComponent<SelectDropdownProps & React.RefAttributes<HTMLSelectElement>>;
+interface _DropdownOption1 {
+    id: string;
+    label: string;
+}
+export interface MultiSelectDropdownProps {
+    /**
+     * Text to display when no option is selected.
+     * @default Select
+     */
+    noOptionSelctedText?: string;
+    /**
+     * Set of options available for selection.
+     * @default new Set([])
+     */
+    options?: Set<_DropdownOption1>;
+    /**
+     * Flag to enable or disable the search functionality.
+     * @default true
+     */
+    shouldEnableSearch?: boolean;
+    /**
+     * Callback function triggered when the search input value changes.
+     * @param value - The current value of the search input.
+     */
+    onSearchInputChange?: (value: string) => void;
+    /**
+     * Placeholder text for the search input field.
+     * @default Search
+     */
+    searchPlaceholder?: string;
+    /**
+     * Flag to enable or disable the "Select All" functionality.
+     * @default true
+     */
+    shouldEnableAllSelected?: boolean;
+    /**
+     * Flag to set all options as selected by default.
+     * @default false
+     */
+    defaultAllSelected?: boolean;
+    /**
+     * Text to display for the "Select All" option.
+     * @default All
+     */
+    allOptionText?: string;
+    /**
+     * Callback function triggered when the selected options change.
+     * @param options - The current set of selected options.
+     */
+    onOptionsChange?: (options: Set<_DropdownOption1>) => void;
+}
+export const NSMultiSelectDropdown: React.ForwardRefExoticComponent<MultiSelectDropdownProps & React.RefAttributes<HTMLSelectElement>>;
 
 //# sourceMappingURL=index.d.ts.map