@newtonschool/grauity 0.0.14 → 0.1.11

package/dist/index.d.ts

@@ -1,150 +1,399 @@
-import * as React from "react";
-type grauityIconSizeName = '4' | '8' | '12' | '16' | '20' | '24' | '28' | '32' | '36' | '40';
-type grauityIconColorName = 'white' | 'black' | 'grey' | 'blue' | 'red' | 'green' | 'orange' | 'yellow' | 'purple';
-type grauityIconName = 'exclamation-circle' | 'exclamation-triangle' | 'info-circle' | 'question-circle' | 'code-alt' | 'code' | 'terminal' | 'desktop' | 'gamepad' | 'lamp' | 'laptop' | 'mobile' | 'archive' | 'bookmark-fill' | 'bookmark' | 'file-alt' | 'file' | 'folder-open' | 'folder' | 'label-fill' | 'label' | 'note' | 'pen' | 'pin' | 'mic-off' | 'mic' | 'pause-circle-fill' | 'pause-circle' | 'pause' | 'play-circle-fill' | 'play-circle' | 'play' | 'video-off' | 'video' | 'volume-maximum' | 'volume-minimum' | 'volume-mute' | 'heart-fill' | 'heart' | 'lock-close' | 'lock-open' | 'message-circle' | 'message-double-question' | 'message-square-info' | 'message-square' | 'milestone' | 'quiz' | 'smiley' | 'spark-fill' | 'spark' | 'sparkle' | 'target' | 'check-badge' | 'crown' | 'flag' | 'gift' | 'medal' | 'star-fill' | 'star-half-fill' | 'star' | 'trophy' | 'arrow-double' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-up' | 'bin' | 'call-end' | 'call-start' | 'caret-double' | 'caret-down' | 'caret-left' | 'caret-right' | 'caret-up' | 'check-circle-fill' | 'check-circle' | 'check-square-fill' | 'check-square' | 'check' | 'chevron-double-down' | 'chevron-double-left' | 'chevron-double-right' | 'chevron-double-up' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'circle' | 'close-circle-fill' | 'close-circle' | 'close-square-fill' | 'close-square' | 'close' | 'download' | 'forward' | 'grip-hortizontal' | 'grip-vertical' | 'growth-down' | 'growth-up' | 'home' | 'kebab-horizontal' | 'kebab-vertical' | 'link' | 'list' | 'load' | 'maximize' | 'menu-grid' | 'menu' | 'minimize' | 'minus-circle-fill' | 'minus-circle' | 'minus-square-fill' | 'minus-square' | 'moon' | 'new-tab' | 'plus-circle-fill' | 'plus-circle' | 'plus-square-fill' | 'plus-square' | 'plus' | 'refresh' | 'reply' | 'screenshare-start' | 'screenshare-stop' | 'search' | 'settings' | 'signin' | 'signout' | 'square' | 'sun' | 'upload' | 'bell' | 'calender-check' | 'calender-plus' | 'calender' | 'clock' | 'rewatch' | 'stopwatch' | 'bot' | 'person-check' | 'person-plus' | 'person' | 'users';
+import React, { ReactNode } from "react";
+import PropTypes from "prop-types";
 export const ICON_TAGS: {
+    "exclamation-circle-filled": string[];
     "exclamation-circle": string[];
+    "exclamation-triangle-filled": string[];
     "exclamation-triangle": string[];
+    "info-circle-filled": string[];
     "info-circle": string[];
+    "question-circle-filled": string[];
     "question-circle": string[];
+    "code-alt-filled": string[];
     "code-alt": string[];
+    "code-filled": string[];
     code: string[];
+    "project-filled": string[];
+    project: string[];
+    "terminal-filled": string[];
     terminal: string[];
+    "desktop-filled": string[];
     desktop: string[];
+    "gamepad-filled": string[];
     gamepad: string[];
+    "lamp-filled": string[];
     lamp: string[];
+    "laptop-filled": string[];
     laptop: string[];
+    "mobile-filled": string[];
     mobile: string[];
+    "archive-filled": string[];
     archive: string[];
-    "bookmark-fill": string[];
+    "bookmark-filled": string[];
     bookmark: string[];
+    "file-alt-filled": string[];
     "file-alt": string[];
+    "file-filled": string[];
     file: string[];
+    "folder-filled": string[];
+    "folder-open-filled": string[];
     "folder-open": string[];
     folder: string[];
-    "label-fill": string[];
+    "label-filled": string[];
     label: string[];
+    "note-filled": string[];
     note: string[];
+    "pen-filled": string[];
     pen: string[];
+    "pin-filled": string[];
     pin: string[];
-    "mic-off": string[];
+    "headphone-filled": string[];
+    "headphone-mic-filled": string[];
+    "headphone-mic": string[];
+    headphone: string[];
+    "mic-filled": string[];
     mic: string[];
-    "pause-circle-fill": string[];
+    "micmute-filled": string[];
+    micmute: string[];
+    "pause-circle-filled": string[];
     "pause-circle": string[];
+    "pause-filled": string[];
     pause: string[];
-    "play-circle-fill": string[];
+    "play-circle-filled": string[];
     "play-circle": string[];
+    "play-filled": string[];
+    "play-rectangle-filled": string[];
+    "play-rectangle": string[];
     play: string[];
+    "video-filled": string[];
+    "video-off-filled": string[];
     "video-off": string[];
     video: string[];
+    "volume-maximum-filled": string[];
     "volume-maximum": string[];
+    "volume-minimum-filled": string[];
     "volume-minimum": string[];
+    "volume-mute-filled": string[];
     "volume-mute": string[];
-    "heart-fill": string[];
+    "comment-filled": string[];
+    comment: string[];
+    "connector-filled": string[];
+    connector: string[];
+    "doubt-alt2-filled": string[];
+    "doubt-alt2": string[];
+    "doubt-filled": string[];
+    "doubt-message-filled": string[];
+    "doubt-message": string[];
+    doubt: string[];
+    "hearing-filled": string[];
+    hearing: string[];
+    "heart-filled": string[];
     heart: string[];
-    "lock-close": string[];
+    "lock-filled": string[];
+    "lock-open-filled": string[];
     "lock-open": string[];
-    "message-circle": string[];
-    "message-double-question": string[];
-    "message-square-info": string[];
-    "message-square": string[];
+    lock: string[];
+    "message-filled": string[];
+    "message-info-filled": string[];
+    "message-info": string[];
+    message: string[];
+    "milestone-filled": string[];
     milestone: string[];
-    quiz: string[];
+    "scholar-hat-filled": string[];
+    "scholar-hat": string[];
+    "smiley-bad-filled": string[];
+    "smiley-bad": string[];
+    "smiley-filled": string[];
+    "smiley-happy-filled": string[];
+    "smiley-happy": string[];
+    "smiley-neutral-filled": string[];
+    "smiley-neutral": string[];
+    "smiley-sad-filled": string[];
+    "smiley-sad": string[];
+    "smiley-very-bad-filled": string[];
+    "smiley-very-bad": string[];
+    "smiley-very-happy-filled": string[];
+    "smiley-very-happy": string[];
     smiley: string[];
-    "spark-fill": string[];
+    "spark-filled": string[];
     spark: string[];
+    "sparkle-filled": string[];
     sparkle: string[];
+    "target-filled": string[];
     target: string[];
+    "check-badge-filled": string[];
     "check-badge": string[];
+    "crown-filled": string[];
     crown: string[];
+    "flag-filled": string[];
     flag: string[];
+    "gift-filled": string[];
     gift: string[];
+    "leaderboard-filled": string[];
+    leaderboard: string[];
+    "medal-filled": string[];
     medal: string[];
-    "star-fill": string[];
-    "star-half-fill": string[];
+    "star-filled": string[];
     star: string[];
+    "trophy-filled": string[];
     trophy: string[];
+    "arrow-double-filled": string[];
     "arrow-double": string[];
+    "arrow-down-filled": string[];
+    "arrow-down-left-filled": string[];
+    "arrow-down-left": string[];
+    "arrow-down-right-filled": string[];
+    "arrow-down-right": string[];
     "arrow-down": string[];
+    "arrow-left-filled": string[];
     "arrow-left": string[];
+    "arrow-right-filled": string[];
     "arrow-right": string[];
+    "arrow-up-filled": string[];
+    "arrow-up-left-filled": string[];
+    "arrow-up-left": string[];
+    "arrow-up-right-filled": string[];
+    "arrow-up-right": string[];
     "arrow-up": string[];
+    "ban-filled": string[];
+    ban: string[];
+    "bin-filled": string[];
     bin: string[];
+    "book-alt-filled": string[];
+    "book-alt": string[];
+    "book-alt2-filled": string[];
+    "book-alt2": string[];
+    "book-alt3-filled": string[];
+    "book-alt3": string[];
+    "book-filled": string[];
+    book: string[];
+    "briefcase-alt2-filled": string[];
+    "briefcase-alt2": string[];
+    "briefcase-filled": string[];
+    briefcase: string[];
+    "broadcast-filled": string[];
+    broadcast: string[];
+    "bug-filled": string[];
+    bug: string[];
+    "bulb-filled": string[];
+    bulb: string[];
+    "call-end-filled": string[];
     "call-end": string[];
+    "call-start-filled": string[];
     "call-start": string[];
+    "camera-filled": string[];
+    camera: string[];
+    "caret-double-filled": string[];
     "caret-double": string[];
+    "caret-down-filled": string[];
     "caret-down": string[];
+    "caret-left-filled": string[];
     "caret-left": string[];
+    "caret-right-filled": string[];
     "caret-right": string[];
+    "caret-up-filled": string[];
     "caret-up": string[];
-    "check-circle-fill": string[];
+    "check-circle-filled": string[];
     "check-circle": string[];
-    "check-square-fill": string[];
+    "check-filled": string[];
+    "check-square-filled": string[];
     "check-square": string[];
     check: string[];
-    "chevron-double-down": string[];
-    "chevron-double-left": string[];
-    "chevron-double-right": string[];
-    "chevron-double-up": string[];
+    "chevron-down-double-filled": string[];
+    "chevron-down-double": string[];
+    "chevron-down-filled": string[];
     "chevron-down": string[];
+    "chevron-left-double-filled": string[];
+    "chevron-left-double": string[];
+    "chevron-left-filled": string[];
     "chevron-left": string[];
+    "chevron-right-double-filled": string[];
+    "chevron-right-double": string[];
+    "chevron-right-filled": string[];
     "chevron-right": string[];
+    "chevron-up-double-filled": string[];
+    "chevron-up-double": string[];
+    "chevron-up-filled": string[];
     "chevron-up": string[];
+    "circle-filled": string[];
     circle: string[];
-    "close-circle-fill": string[];
+    "clock-alarm-filled": string[];
+    "clock-alarm": string[];
+    "close-circle-filled": string[];
     "close-circle": string[];
-    "close-square-fill": string[];
+    "close-filled": string[];
+    "close-square-filled": string[];
     "close-square": string[];
     close: string[];
+    "compass-filled": string[];
+    compass: string[];
+    "diamond-filled": string[];
+    diamond: string[];
+    "double-check-filled": string[];
+    "double-check": string[];
+    "download-filled": string[];
     download: string[];
+    "email-alt-filled": string[];
+    "email-alt": string[];
+    "email-filled": string[];
+    email: string[];
+    "filter-filled": string[];
+    filter: string[];
+    "floppy-filled": string[];
+    floppy: string[];
+    "forward-filled": string[];
     forward: string[];
+    "gear-filled": string[];
+    gear: string[];
+    "git-commit-filled": string[];
+    "git-commit": string[];
+    "globe-filled": string[];
+    globe: string[];
+    "grip-hortizontal-filled": string[];
     "grip-hortizontal": string[];
+    "grip-vertical-filled": string[];
     "grip-vertical": string[];
+    "growth-down-filled": string[];
     "growth-down": string[];
+    "growth-up-filled": string[];
     "growth-up": string[];
+    "help-filled": string[];
+    help: string[];
+    "hold-filled": string[];
+    hold: string[];
+    "home-filled": string[];
     home: string[];
+    "hourglass-filled": string[];
+    hourglass: string[];
+    "kebab-horizontal-filled": string[];
     "kebab-horizontal": string[];
+    "kebab-vertical-filled": string[];
     "kebab-vertical": string[];
+    "link-filled": string[];
     link: string[];
+    "list-checked-filled": string[];
+    "list-checked": string[];
+    "list-filled": string[];
     list: string[];
+    "load-filled": string[];
     load: string[];
+    "loudspeaker-filled": string[];
+    loudspeaker: string[];
+    "map-pin-alt1-filled": string[];
+    "map-pin-alt1": string[];
+    "map-pin-alt2-filled": string[];
+    "map-pin-alt2": string[];
+    "map-pin-filled": string[];
+    "map-pin": string[];
+    "maximize-filled": string[];
     maximize: string[];
+    "menu-alt2-filled": string[];
+    "menu-alt2": string[];
+    "menu-filled": string[];
+    "menu-grid-filled": string[];
     "menu-grid": string[];
     menu: string[];
+    "microchip-filled": string[];
+    microchip: string[];
+    "minimize-filled": string[];
     minimize: string[];
-    "minus-circle-fill": string[];
+    "minus-circle-filled": string[];
     "minus-circle": string[];
-    "minus-square-fill": string[];
+    "minus-square-filled": string[];
     "minus-square": string[];
+    "moon-filled": string[];
     moon: string[];
+    "new-tab-filled": string[];
     "new-tab": string[];
-    "plus-circle-fill": string[];
+    "paper-clip-filled": string[];
+    "paper-clip": string[];
+    "plus-circle-filled": string[];
     "plus-circle": string[];
-    "plus-square-fill": string[];
+    "plus-filled": string[];
+    "plus-square-filled": string[];
     "plus-square": string[];
     plus: string[];
+    "printer-filled": string[];
+    printer: string[];
+    "quiz-filled": string[];
+    quiz: string[];
+    "refresh-filled": string[];
     refresh: string[];
+    "remove-filled": string[];
+    remove: string[];
+    "reply-filled": string[];
     reply: string[];
+    "screenshare-start-filled": string[];
     "screenshare-start": string[];
+    "screenshare-stop-filled": string[];
     "screenshare-stop": string[];
+    "search-filled": string[];
     search: string[];
-    settings: string[];
+    "share-filled": string[];
+    share: string[];
+    "shield-alert-filled": string[];
+    "shield-alert": string[];
+    "shield-check-filled": string[];
+    "shield-check": string[];
+    "shield-filled": string[];
+    "shield-lock-filled": string[];
+    "shield-lock": string[];
+    "shield-x-filled": string[];
+    "shield-x": string[];
+    shield: string[];
+    "sidebar-left-filled": string[];
+    "sidebar-left": string[];
+    "sidebar-right-filled": string[];
+    "sidebar-right": string[];
+    "signin-filled": string[];
     signin: string[];
+    "signout-filled": string[];
     signout: string[];
+    "slider-filled": string[];
+    slider: string[];
+    "square-filled": string[];
     square: string[];
+    "sticky-note-filled": string[];
+    "sticky-note": string[];
+    "study-plan-filled": string[];
+    "study-plan": string[];
+    "sun-filled": string[];
     sun: string[];
+    "thumbs-down-filled": string[];
+    "thumbs-down": string[];
+    "thumbs-up-filled": string[];
+    "thumbs-up": string[];
+    "thunder-filled": string[];
+    thunder: string[];
+    "upload-filled": string[];
     upload: string[];
+    "wrench-filled": string[];
+    wrench: string[];
+    "bell-filled": string[];
     bell: string[];
+    "calender-check-filled": string[];
     "calender-check": string[];
+    "calender-filled": string[];
+    "calender-plus-filled": string[];
     "calender-plus": string[];
     calender: string[];
+    "clock-filled": string[];
     clock: string[];
+    "rewatch-filled": string[];
     rewatch: string[];
+    "stopwatch-filled": string[];
     stopwatch: string[];
+    "bot-filled": string[];
     bot: string[];
+    "person-check-filled": string[];
     "person-check": string[];
+    "person-filled": string[];
+    "person-plus-filled": string[];
     "person-plus": string[];
     person: string[];
+    "user-speak-filled": string[];
+    "user-speak": string[];
+    "users-filled": string[];
     users: string[];
 };
 export const TAG_ICONS: {
@@ -159,8 +408,10 @@ 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 grauityFlippedChoiceName = 'vertically' | 'horizontally';
 type grauityRotatedChoiceName = 'clockwise' | 'counterclockwise';
+type grauityIconSizeName = '4' | '8' | '12' | '14' | '16' | '20' | '24' | '28' | '32' | '36' | '40';
 export interface GrauityInitProps {
     /**
      * An element type to render as (string or function).
@@ -169,35 +420,67 @@ export interface GrauityInitProps {
     /**
      * The font size to be applied on this element and so will act as standard for the `ems` of all grauity components.
      * */
-    fontSize: string;
+    fontSize?: string;
     /**
      * The multiplier is multiplied will all the `ems` of the grauity components.
      * */
     multiplier?: number;
+    /**
+     * Additional classes to be added to the component
+     * */
+    className?: string;
     /**
      * The children to be rendered inside this component.
      * */
     children?: React.ReactNode;
+    /**
+     * Additional styles to be added to the component
+     * */
+    style?: object;
 }
 /**
  * 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, children }: GrauityInitProps): JSX.Element;
+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>;
+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 interface IconProps {
     /**
      * Icon can have the aria hidden attribute
@@ -222,7 +505,7 @@ export interface IconProps {
     /**
      * Color of the icon
      * */
-    color?: grauityIconColorName;
+    color?: string;
     /**
      * Additional classes to be added to the component
      * */
@@ -268,6 +551,9 @@ export interface IconProps {
      * */
     style?: React.CSSProperties;
 }
+/**
+ * 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: {
@@ -276,17 +562,17 @@ declare namespace Icon {
         as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
         bordered: PropTypes.Requireable<boolean>;
         circular: PropTypes.Requireable<boolean>;
-        color: PropTypes.Requireable<import("core").GRAUITY_COLOR>;
+        color: PropTypes.Requireable<string>;
         className: PropTypes.Requireable<string>;
         disabled: PropTypes.Requireable<boolean>;
         fitted: PropTypes.Requireable<boolean>;
-        flipped: PropTypes.Requireable<import("core/miscellaneous-choices").GRAUITY_FLIPPED_CHOICES>;
+        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("core/miscellaneous-choices").GRAUITY_ROTATED_CHOICES>;
-        size: PropTypes.Requireable<import("core").GRAUITY_SIZE>;
+        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: {
@@ -308,5 +594,789 @@ declare namespace Icon {
         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[];
+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';
+export interface ButtonProps {
+    /**
+     * 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;
+    /**
+     * Position of the icon
+     *
+     * Available choices: `left`, `right`
+     *
+     * Default: `left`
+     * */
+    iconPosition?: ButtonIconPositions;
+    /**
+     * 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;
+    /**
+     * Children of the component
+     * */
+    children?: React.ReactNode;
+    /**
+     * 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;
+}
+/**
+ * A Button is a component that is used to trigger an action.
+ * It can contain text and an icon, or only text.
+ *
+ * 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>;
+    };
+};
+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 {
+    /**
+     * Variant of the Typography element
+     *
+     * Available choices:
+     *
+     * Default: `paragraph-medium-body1`
+     * */
+    variant?: TypographyVariantType;
+    /**
+     * Color of the Typography element
+     * */
+    color?: string;
+    /**
+     * Determines the type of the element rendered
+     * Available choices:
+     *
+     * Default: `p`
+     * */
+    as?: TypographyAsType;
+    /**
+     * Text alignment of the Typography element
+     * */
+    textAlign?: string;
+    /**
+     * Text transformation of the Typography element
+     * */
+    textTransform?: string;
+    /**
+     * Font size of the Typography element
+     * */
+    fontSize?: string;
+    /**
+     * Children of the component
+     * */
+    children: React.ReactNode;
+}
+export const TYPOGRAPHY_VARIANTS_ENUM: {
+    [x: string]: TypographyVariantType;
+};
+export const TYPOGRAPHY_VARIANTS: readonly TypographyVariantType[];
+export const TYPOGRAPHY_AS_ENUM: {
+    [x: string]: TypographyAsType;
+};
+export const TYPOGRAPHY_AS_LIST: readonly TypographyAsType[];
+/**
+ * A typography component can be used to display text in different styles.
+ *
+ * Use the prop `variant` to select the style of the text.
+ *
+ * By default, prop `as` is set to `'auto'`, and the component will automatically
+ * select the HTML tag based on the prop `variant`.
+
+ * 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;
+    };
+};
+interface TableColumn {
+    /**
+     * Column key
+     * */
+    key: string;
+    /**
+     * Column display name
+     * */
+    display: string;
+    /**
+     * Column width
+     * */
+    width?: string;
+    /**
+     * Column alignment, default is center
+     * */
+    align?: 'left' | 'right' | 'center';
+    /**
+     * Row span, default is 1
+     * */
+    rowSpan?: number;
+    /**
+     * Col span, default is 1
+     * */
+    colSpan?: number;
+}
+interface TableCellInterface {
+    /**
+     * Cell display, can be a string or a React element
+     * */
+    display?: ReactNode;
+    /**
+     * Custom cell render function. If provided, display will be ignored
+     * */
+    render?: (args: TableCellInterface) => ReactNode;
+    /**
+     * Row vertical alignment, default is top
+     * */
+    vAlign?: 'top' | 'bottom' | 'middle';
+    /**
+     * Row span, default is 1
+     * */
+    rowSpan?: number;
+    /**
+     * Col span, default is 1
+     * */
+    colSpan?: number;
+    /**
+     * Row actions (rendered as buttons by default)
+     * */
+    actions?: TableCellAction[];
+    /**
+     * Row alignment
+     * */
+    align?: 'left' | 'right' | 'center';
+}
+interface TableCellAction {
+    /**
+     * Action key
+     * */
+    key: string;
+    /**
+     * Action display, can be a string or a React element
+     * */
+    display: any;
+    /**
+     * Action icon
+     * */
+    icon?: grauityIconName;
+    /**
+     * Action type, can be a button or a link, default is button
+     * */
+    as?: 'button' | 'link';
+    /**
+     * Action href, only used if the action type is link
+     * */
+    href?: string;
+    /**
+     * Action click handler
+     * */
+    handleClick?: (data: any) => void;
+}
+interface TableRow {
+    /**
+     * Table data, in JS Object format, with table column keys as keys of object
+     */
+    [columnKey: string]: TableCellInterface;
+}
+export interface TableProps {
+    /**
+     * Table columns, see type `TableColumn`
+     * */
+    columns?: TableColumn[];
+    /**
+     * Table rows, see type `TableRow`
+     * */
+    rows?: TableRow[];
+    /**
+     * Determines if the table is condensed (Reduced padding).
+     * Available choices: true, false
+     *
+     * Default: `true`
+     * */
+    condensed?: boolean;
+    /**
+     * Are alternate rows striped (shaded).
+     * Available choices: true, false
+     *
+     * Default: `false`
+     * */
+    striped?: boolean;
+    /**
+     * Determines if the table has a border around it.
+     * Available choices: true, false
+     *
+     * Default: `true`
+     * */
+    borderAround?: boolean;
+    /**
+     * Determines if the table has a border between rows.
+     * Available choices: true, false
+     *
+     * Has more precedence than `borderHorizontal` and `borderVertical`.
+     *
+     * Default: `true`
+     * */
+    borderWithin?: boolean;
+    /**
+     * Determines if the table has a border between columns.
+     *
+     * Default: `true`
+     * */
+    borderHorizontal?: boolean;
+    /**
+     * Determines if the table has a border between rows.
+     *
+     * Default: `true`
+     * */
+    borderVertical?: boolean;
+    /**
+     * Additional classes to be added to the component.
+     * */
+    className?: string;
+    /**
+     * Show that the table is loading
+     *
+     * Default: `false`
+     * */
+    loading?: boolean;
+    /**
+     * Additional styles to be used over the element
+     *
+     * Default: `{}`
+     * */
+    style?: React.CSSProperties;
+    /**
+     * Capitalize the header
+     *
+     * Default: `true`
+     * */
+    capitalizeHeaders?: boolean;
+    /**
+     * Determines if table headers should be highlighted
+     *
+     * Default: `true`
+     * */
+    highlightHeaders?: boolean;
+}
+/**
+ * A table is a component that is used to display data in a tabular format.
+ * 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;
+    };
+    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>;
+    TableHead: import("styled-components").StyledComponent<string, any, import("ui/elements/Table/types").TableHeadComponentProps, never>;
+    TableHeadingCell: import("styled-components").StyledComponent<string, any, import("ui/elements/Table/types").TableHeadingCellComponentProps, never>;
+    TableRow: import("styled-components").StyledComponent<string, any, import("ui/elements/Table/types").TableRowComponentProps, never>;
+};
+type ModalContentType = React.ReactNode;
+interface ModalStep {
+    /**
+     * Banner for the modal, can be a valid React node
+     * */
+    banner?: ModalContentType;
+    /**
+     * Title for the modal, can be a valid React node
+     * */
+    title: ModalContentType;
+    /**
+     * Description for the modal, can be a string
+     * */
+    description?: string | null;
+    /**
+     * Body for the modal, can be a valid React node
+     * */
+    body?: ModalContentType;
+    /**
+     * Text for the next button
+     * */
+    nextButtonText?: string;
+    /**
+     * Determines if the back button should be shown
+     * Available choices: `true`, `false`
+     *
+     * Default: `false`
+     * */
+    showBackButton?: boolean;
+    /**
+     * Variant for the button
+     * */
+    buttonVariant?: ButtonVariants | null;
+}
+export interface ModalProps {
+    /**
+     * Banner for the modal, can be a valid React node
+     * */
+    banner?: ModalContentType;
+    /**
+     * Title for the modal, can be a valid React node
+     * */
+    title?: ModalContentType;
+    /**
+     * Description for the modal, can be a string
+     * */
+    description?: string;
+    /**
+     * Body for the modal, can be a valid React node
+     * */
+    body?: ModalContentType;
+    /**
+     * Action for the modal, can be a valid React node
+     * */
+    action?: ModalContentType;
+    /**
+     * Determines if the modal should hide on click away
+     * Available choices: `true`, `false`
+     *
+     * Default: `false`
+     * */
+    hideOnClickAway: boolean;
+    /**
+     * Determines if the modal should blur the background
+     * Available choices: `true`, `false`
+     *
+     * Default: `false`
+     * */
+    blurBackground?: boolean;
+    /**
+     * Callback function to be called when the modal is hidden
+     * */
+    onHide?: () => void;
+    /**
+     * Determines if the modal should be full width on mobile
+     * Available choices: `true`, `false`
+     *
+     * Default: `false`
+     * */
+    mobileBottomFullWidth?: boolean;
+    /**
+     * Padding for the modal
+     * */
+    modalPadding?: string;
+    /**
+     * Margin for the modal body
+     * */
+    modalBodyMargin?: string;
+    /**
+     * Width of the modal
+     * */
+    width?: string;
+    /**
+     * Height of the modal
+     * */
+    height?: string;
+    /**
+     * Minimum height of the modal
+     * */
+    minHeight?: string;
+    /**
+     * Determines if the close button should be shown
+     *
+     * Available choices: `true`, `false`
+     *
+     * Default: `false`
+     * */
+    showCloseButton?: boolean;
+}
+interface MultiStepModalProps {
+    /**
+     * Modal steps
+     * */
+    modalSteps: ModalStep[];
+    /**
+     * Determines if the modal should show pagination if there are multiple modal steps
+     * Available choices: true, false
+     *
+     * Default: `true`
+     * */
+    showModalStepsPagination?: boolean;
+    /**
+     * Determines if the modal should hide on click away
+     * Available choices: true, false
+     *
+     * Default: `false`
+     * */
+    hideOnClickAway?: boolean;
+    /**
+     * Determines if the modal should blur the background
+     * Available choices: true, false
+     *
+     * Default: `false`
+     * */
+    blurBackground?: boolean;
+    /**
+     * Callback function to be called when the modal is hidden
+     * */
+    onHide?: () => void;
+    /**
+     * Callback function to be called when the final step is reached
+     * */
+    onFinalStep?: () => void;
+    /**
+     * Determines if the modal should be full width on mobile
+     * Available choices: true, false
+     *
+     * Default: `false`
+     * */
+    mobileBottomFullWidth?: boolean;
+    /**
+     * Callback function to be called when the step changes
+     * */
+    onStepChange?: () => void;
+    /**
+     * Determines if the modal buttons should be shown
+     * Available choices: true, false
+     *
+     * Default: `true`
+     * */
+    showModalButtons?: boolean;
+    /**
+     * Determines if the modal header should be shown
+     * Available choices: true, false
+     *
+     * Default: `true`
+     * */
+    showHeader?: boolean;
+    /**
+     * Padding for the modal
+     * */
+    modalPadding?: string;
+    /**
+     * Margin for the modal body
+     * */
+    modalBodyMargin?: string;
+    /**
+     * Width of the modal
+     * */
+    width?: string;
+    /**
+     * Height of the modal
+     * */
+    height?: string;
+    /**
+     * Minimum height of the modal
+     * */
+    minHeight?: string;
+    /**
+     * Determines if the close button should be shown
+     *
+     * Available choices: true, false
+     *
+     * NOTE: If Modal has a banner, the close button will be hidden by default
+     *
+     * Default: `false`
+     * */
+    showCloseButton?: boolean;
+}
+export interface ConfirmationDialogProps {
+    /**
+     * Text for the cancel button
+     * */
+    cancelText?: string;
+    /**
+     * Text for the confirm button
+     * */
+    confirmText?: string;
+    /**
+     * Callback function to be called when the cancel button is clicked
+     * */
+    onCancel: () => void;
+    /**
+     * Callback function to be called when the confirm button is clicked
+     * */
+    onConfirm: () => void;
+    /**
+     * Banner for the modal, can be a valid React node
+     * */
+    banner?: ModalContentType;
+    /**
+     * Title for the modal, can be a valid React node
+     * */
+    title?: ModalContentType;
+    /**
+     * Description for the modal, can be a string
+     * */
+    description?: string;
+    /**
+     * Body for the modal, can be a valid React node
+     * */
+    body?: ModalContentType;
+    /**
+     * Variant for the cancel button
+     * */
+    cancelButtonVariant?: ButtonVariants;
+    /**
+     * Variant for the confirm button
+     * */
+    confirmButtonVariant?: ButtonVariants;
+    /**
+     * Determines if the close button should be shown
+     * Available choices: `true`, `false`
+     *
+     * Default: `false`
+     * */
+    showCloseButton?: boolean;
+    /**
+     * Determines if the modal should hide on click away
+     * Available choices: `true`, `false`
+     *
+     * Default: `false`
+     * */
+    hideOnClickAway?: boolean;
+    /**
+     * Determines if the modal should blur the background
+     * Available choices: `true`, `false`
+     *
+     * Default: `false`
+     * */
+    blurBackground?: boolean;
+    /**
+     * Determines if the modal should be at bottom with full width on mobile
+     * Available choices: `true`, `false`
+     *
+     * Default: `false`
+     * */
+    mobileBottomFullWidth?: boolean;
+}
+/**
+ * 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;
+    };
+};
+/**
+ * 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>;
+};
 
 //# sourceMappingURL=index.d.ts.map