@newtonschool/grauity 3.0.9 → 3.0.11-beta.0

package/dist/common/utils.d.ts

@@ -1,7 +1,23 @@
+import React from 'react';
 /**
  * Get the first scrollable parent of an element.
  * @param {HTMLElement | null} element - The element to find the scrollable parent of.
  * @returns {HTMLElement | Window} The first scrollable parent of the element.
  */
 export declare function getScrollableParent(element: HTMLElement | null): HTMLElement | Window;
+/**
+ * Handles keyboard interactions in list views by mapping specific key events
+ * to corresponding callback functions.
+ *
+ * @param event - The keyboard event triggered by the user.
+ * @param onDownKeyPress - Callback function to execute when the "ArrowDown" key
+ * or "Tab" key (without Shift) is pressed.
+ * @param onUpKeyPress - Callback function to execute when the "ArrowUp" key
+ * or "Tab" key (with Shift) is pressed.
+ * @param onSelectKeyPress - Callback function to execute when the "Enter" key
+ * or the spacebar (" ") is pressed.
+ * @param onEscapeKeyPress - Callback function to execute when the "Escape" key
+ * is pressed.
+ */
+export declare function handleKeyboardInteractionInListViews(event: React.KeyboardEvent<any>, onDownKeyPress: () => void, onUpKeyPress: () => void, onSelectKeyPress: () => void, onEscapeKeyPress: () => void): void;
 //# sourceMappingURL=utils.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../common/utils.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,wBAAgB,mBAAmB,CAC/B,OAAO,EAAE,WAAW,GAAG,IAAI,GAC5B,WAAW,GAAG,MAAM,CAUtB"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../common/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;GAIG;AACH,wBAAgB,mBAAmB,CAC/B,OAAO,EAAE,WAAW,GAAG,IAAI,GAC5B,WAAW,GAAG,MAAM,CAUtB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,oCAAoC,CAChD,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,EAC/B,cAAc,EAAE,MAAM,IAAI,EAC1B,YAAY,EAAE,MAAM,IAAI,EACxB,gBAAgB,EAAE,MAAM,IAAI,EAC5B,gBAAgB,EAAE,MAAM,IAAI,QAkB/B"}

package/dist/css/grauity-icons.scss

@@ -2,10 +2,10 @@ $grauity-icons-font: "grauity-icons";
 
 @font-face {
     font-family: $grauity-icons-font;
-    src: url("../fonts/grauity-icons.eot?2a41915787e0ded596a01ff087301e82#iefix") format("embedded-opentype"),
-url("../fonts/grauity-icons.woff?2a41915787e0ded596a01ff087301e82") format("woff"),
-url("../fonts/grauity-icons.woff2?2a41915787e0ded596a01ff087301e82") format("woff2"),
-url("../fonts/grauity-icons.ttf?2a41915787e0ded596a01ff087301e82") format("truetype");
+    src: url("../fonts/grauity-icons.eot?725faed33dbb5569199176528a9267d5#iefix") format("embedded-opentype"),
+url("../fonts/grauity-icons.woff?725faed33dbb5569199176528a9267d5") format("woff"),
+url("../fonts/grauity-icons.woff2?725faed33dbb5569199176528a9267d5") format("woff2"),
+url("../fonts/grauity-icons.ttf?725faed33dbb5569199176528a9267d5") format("truetype");
 }
 
 i[class^="grauity-icon-"]:before, i[class*=" grauity-icon-"]:before {
@@ -72,36 +72,36 @@ $grauity-icons-map: (
     "pin": "\f132",
     "currency-rupee-filled": "\f133",
     "currency-rupee": "\f134",
-    "ai-voice-filled": "\f135",
-    "ai-voice": "\f136",
-    "headphone-filled": "\f137",
-    "headphone-mic-filled": "\f138",
-    "headphone-mic": "\f139",
-    "headphone": "\f13a",
-    "mic-filled": "\f13b",
-    "mic": "\f13c",
-    "micmute-filled": "\f13d",
-    "micmute": "\f13e",
-    "pause-circle-filled": "\f13f",
-    "pause-circle": "\f140",
-    "pause-filled": "\f141",
-    "pause": "\f142",
-    "play-circle-filled": "\f143",
-    "play-circle": "\f144",
-    "play-filled": "\f145",
-    "play-rectangle-filled": "\f146",
-    "play-rectangle": "\f147",
-    "play": "\f148",
-    "video-filled": "\f149",
-    "video-off-filled": "\f14a",
-    "video-off": "\f14b",
-    "video": "\f14c",
-    "volume-maximum-filled": "\f14d",
-    "volume-maximum": "\f14e",
-    "volume-minimum-filled": "\f14f",
-    "volume-minimum": "\f150",
-    "volume-mute-filled": "\f151",
-    "volume-mute": "\f152",
+    "headphone-filled": "\f135",
+    "headphone-mic-filled": "\f136",
+    "headphone-mic": "\f137",
+    "headphone": "\f138",
+    "mic-filled": "\f139",
+    "mic": "\f13a",
+    "micmute-filled": "\f13b",
+    "micmute": "\f13c",
+    "pause-circle-filled": "\f13d",
+    "pause-circle": "\f13e",
+    "pause-filled": "\f13f",
+    "pause": "\f140",
+    "play-circle-filled": "\f141",
+    "play-circle": "\f142",
+    "play-filled": "\f143",
+    "play-rectangle-filled": "\f144",
+    "play-rectangle": "\f145",
+    "play": "\f146",
+    "video-filled": "\f147",
+    "video-off-filled": "\f148",
+    "video-off": "\f149",
+    "video": "\f14a",
+    "volume-maximum-filled": "\f14b",
+    "volume-maximum": "\f14c",
+    "volume-minimum-filled": "\f14d",
+    "volume-minimum": "\f14e",
+    "volume-mute-filled": "\f14f",
+    "volume-mute": "\f150",
+    "waveform-filled": "\f151",
+    "waveform": "\f152",
     "comment-filled": "\f153",
     "comment": "\f154",
     "connector-filled": "\f155",
@@ -620,12 +620,6 @@ $grauity-icons-map: (
 .grauity-icon-currency-rupee:before {
     content: map-get($grauity-icons-map, "currency-rupee");
 }
-.grauity-icon-ai-voice-filled:before {
-    content: map-get($grauity-icons-map, "ai-voice-filled");
-}
-.grauity-icon-ai-voice:before {
-    content: map-get($grauity-icons-map, "ai-voice");
-}
 .grauity-icon-headphone-filled:before {
     content: map-get($grauity-icons-map, "headphone-filled");
 }
@@ -710,6 +704,12 @@ $grauity-icons-map: (
 .grauity-icon-volume-mute:before {
     content: map-get($grauity-icons-map, "volume-mute");
 }
+.grauity-icon-waveform-filled:before {
+    content: map-get($grauity-icons-map, "waveform-filled");
+}
+.grauity-icon-waveform:before {
+    content: map-get($grauity-icons-map, "waveform");
+}
 .grauity-icon-comment-filled:before {
     content: map-get($grauity-icons-map, "comment-filled");
 }

package/dist/index.d.ts

@@ -78,8 +78,6 @@ export const ICON_TAGS: {
     pin: string[];
     "currency-rupee-filled": string[];
     "currency-rupee": string[];
-    "ai-voice-filled": string[];
-    "ai-voice": string[];
     "headphone-filled": string[];
     "headphone-mic-filled": string[];
     "headphone-mic": string[];
@@ -108,6 +106,8 @@ export const ICON_TAGS: {
     "volume-minimum": string[];
     "volume-mute-filled": string[];
     "volume-mute": string[];
+    "waveform-filled": string[];
+    waveform: string[];
     "comment-filled": string[];
     comment: string[];
     "connector-filled": string[];
@@ -484,7 +484,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' | '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' | 'ai-voice-filled' | 'ai-voice' | '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-half-filled' | 'star-half' | '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 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' | 'waveform-filled' | 'waveform' | '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-half-filled' | 'star-half' | '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';
@@ -5320,7 +5320,7 @@ export interface TextFieldProps {
      */
     color?: TextFieldColors;
 }
-export const NSTextField: (props: TextFieldProps) => JSX.Element;
+export const NSTextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;
 type VARIANTS = `${VARIANTS_SIZES}`;
 type TextAreaColors = TextFieldColors;
 export interface TextAreaProps {
@@ -5499,6 +5499,7 @@ export interface CheckboxProps {
 }
 /**
  * A checkbox is a form element that allows the user to select one or more options from a set of choices.
+ * Checkboxes are typically used in groups, where one or multiple options can be selected at a time.
  */
 export const NSCheckbox: React.FC<CheckboxProps>;
 type RadioButtonSize = 'small' | 'medium' | 'large';
@@ -5554,6 +5555,11 @@ export interface RadioButtonProps {
      * @default false
      */
     checked?: boolean;
+    /**
+     * Indicates if the radio button is checked by default.
+     * @default false
+     */
+    defaultChecked?: boolean;
     /**
      * Indicates if the radio button is disabled.
      * @default false
@@ -5570,6 +5576,10 @@ export interface RadioButtonProps {
      */
     color?: RadioButtonColors;
 }
+/**
+ * A radio button is a form element that allows the user to select one option from a set of choices.
+ * Radio buttons are typically used in groups, where only one option can be selected at a time.
+ */
 export const NSRadioButton: (props: RadioButtonProps) => JSX.Element;
 type PaginationJustifyContent = 'space-between' | 'space-around' | 'space-evenly' | 'flex-start' | 'flex-end';
 export interface PaginationProps {