@newtonschool/grauity 3.0.11 → 3.0.13

package/README.md

@@ -18,6 +18,14 @@
   <br />
   <br />
   <img src="https://github.com/Newton-School/grauity/actions/workflows/run-tests.yml/badge.svg" alt="Test status badge" />
+  <img src="https://github.com/Newton-School/grauity/actions/workflows/build-storybook.yml/badge.svg" alt="Build docs badge" />
+  <img src="https://github.com/Newton-School/grauity/actions/workflows/publish-npm-package.yml/badge.svg" alt="Publish to NPM" />
+  <div align="center">
+    <img src="http://img.shields.io/npm/v/@newtonschool/grauity.svg" alt="NPM version badge" />
+    <img src="http://img.shields.io/npm/dm/@newtonschool/grauity.svg" alt="NPM downloads badge" />
+    <img src="http://img.shields.io/bundlephobia/min/@newtonschool/grauity.svg" alt="Bundle size badge" />
+    <img src="http://img.shields.io/npm/l/@newtonschool/grauity.svg" alt="License badge" />
+  </div>
 </p>
 
 ## About gra.UI.ty
@@ -84,6 +92,7 @@ your-app$: npm run dev
 ```
 
 After you have made changes in grauity, build it.
+
 ```bash
 grauity$: npm run build
 ```
@@ -91,6 +100,7 @@ grauity$: npm run build
 If changes are not showing up even after rebuilding, you may
 have to delete `your-app/node_modules/@newtonschool/grauity` folder
 and install `grauity` again:
+
 ```bash
 grauity$: npm run build
 
@@ -120,7 +130,6 @@ export const MyComponent = () => (
 );
 ```
 
-
 # How to's
 
 ## Add new icons from `.svg` files
@@ -135,53 +144,49 @@ grauity$: git submodule update --remote --merge
 
 To add a new font icon, add your `.svg` files for the new icon in the [./iconland/seeds/](iconland/seeds) directory in the [iconland](./iconland) submodule.
 
-
 #### 3. Optimize & Generate new font files
 
 ```bash
 grauity$: npm run build-icons:optimize
 grauity$: npm run build-icons:generate
 ```
-*Alternatively*, run the command
+
+_Alternatively_, run the command
+
 ```bash
 grauity$: npm run build-icons
 ```
 
 Font files will be created in [ui/fonts](ui/fonts) folder.
 
-
 ## Use theming in your React app
 
 Without theming, only foundational (theme agnostic) CSS variables (found here: [constantGlobalStyle](ui/themes/GlobalStyle.ts)) will be provided.
 
 To enable theming, wrap your components with `GrauityThemeProvider`:
+
 ```js
 import { GrauityThemeProvider } from '@newtonschool/grauity';
 
 const App = ({ children, ...props }) => {
-  return (
-    <GrauityThemeProvider>
-      {children}
-    </GrauityThemeProvider>
-  )
+    return <GrauityThemeProvider>{children}</GrauityThemeProvider>;
 };
 
 export default App;
 ```
 
-
 Theming can be controlled by providing different class names to your root/local DOM elements, like the body element.
 
-  - Add class `grauity-theme-light` to use the light theme
-  - Add class `grauity-theme-dark` to use the dark theme
+-   Add class `grauity-theme-light` to use the light theme
+-   Add class `grauity-theme-dark` to use the dark theme
 
 Now, you will be provided with the foundational as well as themed CSS variables, whose
 value will change depending on the theme applied.
 
 These themed CSS variables can be found here:
-  - [Dark theme color mapping](./ui/themes/darkThemeConstants.ts)
-  - [Light theme color mapping](./ui/themes/lightThemeConstants.ts)
 
+-   [Dark theme color mapping](./ui/themes/darkThemeConstants.ts)
+-   [Light theme color mapping](./ui/themes/lightThemeConstants.ts)
 
 ## Use icons in your React app
 

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?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");
+    src: url("../fonts/grauity-icons.eot?c1b5f5d7b18af544c47de637dcbd8cd8#iefix") format("embedded-opentype"),
+url("../fonts/grauity-icons.woff?c1b5f5d7b18af544c47de637dcbd8cd8") format("woff"),
+url("../fonts/grauity-icons.woff2?c1b5f5d7b18af544c47de637dcbd8cd8") format("woff2"),
+url("../fonts/grauity-icons.ttf?c1b5f5d7b18af544c47de637dcbd8cd8") format("truetype");
 }
 
 i[class^="grauity-icon-"]:before, i[class*=" grauity-icon-"]:before {
@@ -274,194 +274,196 @@ $grauity-icons-map: (
     "close": "\f1fc",
     "compass-filled": "\f1fd",
     "compass": "\f1fe",
-    "database-filled": "\f1ff",
-    "database": "\f200",
-    "diamond-filled": "\f201",
-    "diamond": "\f202",
-    "double-check-filled": "\f203",
-    "double-check": "\f204",
-    "download-filled": "\f205",
-    "download": "\f206",
-    "eda-filled": "\f207",
-    "eda": "\f208",
-    "email-alt-filled": "\f209",
-    "email-alt": "\f20a",
-    "email-filled": "\f20b",
-    "email": "\f20c",
-    "filter-filled": "\f20d",
-    "filter": "\f20e",
-    "floppy-filled": "\f20f",
-    "floppy": "\f210",
-    "forward-filled": "\f211",
-    "forward": "\f212",
-    "gear-filled": "\f213",
-    "gear": "\f214",
-    "git-commit-filled": "\f215",
-    "git-commit": "\f216",
-    "globe-filled": "\f217",
-    "globe": "\f218",
-    "grip-hortizontal-filled": "\f219",
-    "grip-hortizontal": "\f21a",
-    "grip-vertical-filled": "\f21b",
-    "grip-vertical": "\f21c",
-    "growth-down-filled": "\f21d",
-    "growth-down": "\f21e",
-    "growth-up-filled": "\f21f",
-    "growth-up": "\f220",
-    "help-filled": "\f221",
-    "help": "\f222",
-    "hold-filled": "\f223",
-    "hold": "\f224",
-    "home-filled": "\f225",
-    "home": "\f226",
-    "hourglass-filled": "\f227",
-    "hourglass": "\f228",
-    "kebab-horizontal-filled": "\f229",
-    "kebab-horizontal": "\f22a",
-    "kebab-vertical-filled": "\f22b",
-    "kebab-vertical": "\f22c",
-    "link-filled": "\f22d",
-    "link": "\f22e",
-    "list-checked-filled": "\f22f",
-    "list-checked": "\f230",
-    "list-filled": "\f231",
-    "list": "\f232",
-    "load-filled": "\f233",
-    "load": "\f234",
-    "loudspeaker-filled": "\f235",
-    "loudspeaker": "\f236",
-    "machine-learning-filled": "\f237",
-    "machine-learning": "\f238",
-    "map-pin-alt1-filled": "\f239",
-    "map-pin-alt1": "\f23a",
-    "map-pin-alt2-filled": "\f23b",
-    "map-pin-alt2": "\f23c",
-    "map-pin-filled": "\f23d",
-    "map-pin": "\f23e",
-    "maximize-filled": "\f23f",
-    "maximize": "\f240",
-    "menu-alt2-filled": "\f241",
-    "menu-alt2": "\f242",
-    "menu-filled": "\f243",
-    "menu-grid-filled": "\f244",
-    "menu-grid": "\f245",
-    "menu": "\f246",
-    "microchip-filled": "\f247",
-    "microchip": "\f248",
-    "minimize-filled": "\f249",
-    "minimize": "\f24a",
-    "minus-circle-filled": "\f24b",
-    "minus-circle": "\f24c",
-    "minus-square-filled": "\f24d",
-    "minus-square": "\f24e",
-    "moon-filled": "\f24f",
-    "moon": "\f250",
-    "new-tab-filled": "\f251",
-    "new-tab": "\f252",
-    "paper-clip-filled": "\f253",
-    "paper-clip": "\f254",
-    "plus-circle-filled": "\f255",
-    "plus-circle": "\f256",
-    "plus-filled": "\f257",
-    "plus-square-filled": "\f258",
-    "plus-square": "\f259",
-    "plus": "\f25a",
-    "power-bi-filled": "\f25b",
-    "power-bi": "\f25c",
-    "printer-filled": "\f25d",
-    "printer": "\f25e",
-    "progress-half-filled": "\f25f",
-    "progress-half": "\f260",
-    "progress-quarter-filled": "\f261",
-    "progress-quarter": "\f262",
-    "progress-zero-filled": "\f263",
-    "progress-zero": "\f264",
-    "python-filled": "\f265",
-    "python": "\f266",
-    "quiz-filled": "\f267",
-    "quiz": "\f268",
-    "refresh-filled": "\f269",
-    "refresh": "\f26a",
-    "remove-filled": "\f26b",
-    "remove": "\f26c",
-    "reply-filled": "\f26d",
-    "reply": "\f26e",
-    "retail-filled": "\f26f",
-    "retail": "\f270",
-    "screenshare-start-filled": "\f271",
-    "screenshare-start": "\f272",
-    "screenshare-stop-filled": "\f273",
-    "screenshare-stop": "\f274",
-    "search-filled": "\f275",
-    "search": "\f276",
-    "share-filled": "\f277",
-    "share": "\f278",
-    "shield-alert-filled": "\f279",
-    "shield-alert": "\f27a",
-    "shield-check-filled": "\f27b",
-    "shield-check": "\f27c",
-    "shield-filled": "\f27d",
-    "shield-lock-filled": "\f27e",
-    "shield-lock": "\f27f",
-    "shield-x-filled": "\f280",
-    "shield-x": "\f281",
-    "shield": "\f282",
-    "shop-filled": "\f283",
-    "shop": "\f284",
-    "sidebar-left-filled": "\f285",
-    "sidebar-left": "\f286",
-    "sidebar-right-filled": "\f287",
-    "sidebar-right": "\f288",
-    "signin-filled": "\f289",
-    "signin": "\f28a",
-    "signout-filled": "\f28b",
-    "signout": "\f28c",
-    "slider-filled": "\f28d",
-    "slider": "\f28e",
-    "square-filled": "\f28f",
-    "square": "\f290",
-    "sticky-note-filled": "\f291",
-    "sticky-note": "\f292",
-    "sun-filled": "\f293",
-    "sun": "\f294",
-    "thumbs-down-filled": "\f295",
-    "thumbs-down": "\f296",
-    "thumbs-up-filled": "\f297",
-    "thumbs-up": "\f298",
-    "thunder-filled": "\f299",
-    "thunder": "\f29a",
-    "truck-filled": "\f29b",
-    "truck": "\f29c",
-    "upload-filled": "\f29d",
-    "upload": "\f29e",
-    "wrench-filled": "\f29f",
-    "wrench": "\f2a0",
-    "bell-filled": "\f2a1",
-    "bell": "\f2a2",
-    "calender-check-filled": "\f2a3",
-    "calender-check": "\f2a4",
-    "calender-filled": "\f2a5",
-    "calender-plus-filled": "\f2a6",
-    "calender-plus": "\f2a7",
-    "calender": "\f2a8",
-    "clock-filled": "\f2a9",
-    "clock": "\f2aa",
-    "rewatch-filled": "\f2ab",
-    "rewatch": "\f2ac",
-    "stopwatch-filled": "\f2ad",
-    "stopwatch": "\f2ae",
-    "bot-filled": "\f2af",
-    "bot": "\f2b0",
-    "person-check-filled": "\f2b1",
-    "person-check": "\f2b2",
-    "person-filled": "\f2b3",
-    "person-plus-filled": "\f2b4",
-    "person-plus": "\f2b5",
-    "person": "\f2b6",
-    "user-speak-filled": "\f2b7",
-    "user-speak": "\f2b8",
-    "users-filled": "\f2b9",
-    "users": "\f2ba",
+    "copy-filled": "\f1ff",
+    "copy": "\f200",
+    "database-filled": "\f201",
+    "database": "\f202",
+    "diamond-filled": "\f203",
+    "diamond": "\f204",
+    "double-check-filled": "\f205",
+    "double-check": "\f206",
+    "download-filled": "\f207",
+    "download": "\f208",
+    "eda-filled": "\f209",
+    "eda": "\f20a",
+    "email-alt-filled": "\f20b",
+    "email-alt": "\f20c",
+    "email-filled": "\f20d",
+    "email": "\f20e",
+    "filter-filled": "\f20f",
+    "filter": "\f210",
+    "floppy-filled": "\f211",
+    "floppy": "\f212",
+    "forward-filled": "\f213",
+    "forward": "\f214",
+    "gear-filled": "\f215",
+    "gear": "\f216",
+    "git-commit-filled": "\f217",
+    "git-commit": "\f218",
+    "globe-filled": "\f219",
+    "globe": "\f21a",
+    "grip-hortizontal-filled": "\f21b",
+    "grip-hortizontal": "\f21c",
+    "grip-vertical-filled": "\f21d",
+    "grip-vertical": "\f21e",
+    "growth-down-filled": "\f21f",
+    "growth-down": "\f220",
+    "growth-up-filled": "\f221",
+    "growth-up": "\f222",
+    "help-filled": "\f223",
+    "help": "\f224",
+    "hold-filled": "\f225",
+    "hold": "\f226",
+    "home-filled": "\f227",
+    "home": "\f228",
+    "hourglass-filled": "\f229",
+    "hourglass": "\f22a",
+    "kebab-horizontal-filled": "\f22b",
+    "kebab-horizontal": "\f22c",
+    "kebab-vertical-filled": "\f22d",
+    "kebab-vertical": "\f22e",
+    "link-filled": "\f22f",
+    "link": "\f230",
+    "list-checked-filled": "\f231",
+    "list-checked": "\f232",
+    "list-filled": "\f233",
+    "list": "\f234",
+    "load-filled": "\f235",
+    "load": "\f236",
+    "loudspeaker-filled": "\f237",
+    "loudspeaker": "\f238",
+    "machine-learning-filled": "\f239",
+    "machine-learning": "\f23a",
+    "map-pin-alt1-filled": "\f23b",
+    "map-pin-alt1": "\f23c",
+    "map-pin-alt2-filled": "\f23d",
+    "map-pin-alt2": "\f23e",
+    "map-pin-filled": "\f23f",
+    "map-pin": "\f240",
+    "maximize-filled": "\f241",
+    "maximize": "\f242",
+    "menu-alt2-filled": "\f243",
+    "menu-alt2": "\f244",
+    "menu-filled": "\f245",
+    "menu-grid-filled": "\f246",
+    "menu-grid": "\f247",
+    "menu": "\f248",
+    "microchip-filled": "\f249",
+    "microchip": "\f24a",
+    "minimize-filled": "\f24b",
+    "minimize": "\f24c",
+    "minus-circle-filled": "\f24d",
+    "minus-circle": "\f24e",
+    "minus-square-filled": "\f24f",
+    "minus-square": "\f250",
+    "moon-filled": "\f251",
+    "moon": "\f252",
+    "new-tab-filled": "\f253",
+    "new-tab": "\f254",
+    "paper-clip-filled": "\f255",
+    "paper-clip": "\f256",
+    "plus-circle-filled": "\f257",
+    "plus-circle": "\f258",
+    "plus-filled": "\f259",
+    "plus-square-filled": "\f25a",
+    "plus-square": "\f25b",
+    "plus": "\f25c",
+    "power-bi-filled": "\f25d",
+    "power-bi": "\f25e",
+    "printer-filled": "\f25f",
+    "printer": "\f260",
+    "progress-half-filled": "\f261",
+    "progress-half": "\f262",
+    "progress-quarter-filled": "\f263",
+    "progress-quarter": "\f264",
+    "progress-zero-filled": "\f265",
+    "progress-zero": "\f266",
+    "python-filled": "\f267",
+    "python": "\f268",
+    "quiz-filled": "\f269",
+    "quiz": "\f26a",
+    "refresh-filled": "\f26b",
+    "refresh": "\f26c",
+    "remove-filled": "\f26d",
+    "remove": "\f26e",
+    "reply-filled": "\f26f",
+    "reply": "\f270",
+    "retail-filled": "\f271",
+    "retail": "\f272",
+    "screenshare-start-filled": "\f273",
+    "screenshare-start": "\f274",
+    "screenshare-stop-filled": "\f275",
+    "screenshare-stop": "\f276",
+    "search-filled": "\f277",
+    "search": "\f278",
+    "share-filled": "\f279",
+    "share": "\f27a",
+    "shield-alert-filled": "\f27b",
+    "shield-alert": "\f27c",
+    "shield-check-filled": "\f27d",
+    "shield-check": "\f27e",
+    "shield-filled": "\f27f",
+    "shield-lock-filled": "\f280",
+    "shield-lock": "\f281",
+    "shield-x-filled": "\f282",
+    "shield-x": "\f283",
+    "shield": "\f284",
+    "shop-filled": "\f285",
+    "shop": "\f286",
+    "sidebar-left-filled": "\f287",
+    "sidebar-left": "\f288",
+    "sidebar-right-filled": "\f289",
+    "sidebar-right": "\f28a",
+    "signin-filled": "\f28b",
+    "signin": "\f28c",
+    "signout-filled": "\f28d",
+    "signout": "\f28e",
+    "slider-filled": "\f28f",
+    "slider": "\f290",
+    "square-filled": "\f291",
+    "square": "\f292",
+    "sticky-note-filled": "\f293",
+    "sticky-note": "\f294",
+    "sun-filled": "\f295",
+    "sun": "\f296",
+    "thumbs-down-filled": "\f297",
+    "thumbs-down": "\f298",
+    "thumbs-up-filled": "\f299",
+    "thumbs-up": "\f29a",
+    "thunder-filled": "\f29b",
+    "thunder": "\f29c",
+    "truck-filled": "\f29d",
+    "truck": "\f29e",
+    "upload-filled": "\f29f",
+    "upload": "\f2a0",
+    "wrench-filled": "\f2a1",
+    "wrench": "\f2a2",
+    "bell-filled": "\f2a3",
+    "bell": "\f2a4",
+    "calender-check-filled": "\f2a5",
+    "calender-check": "\f2a6",
+    "calender-filled": "\f2a7",
+    "calender-plus-filled": "\f2a8",
+    "calender-plus": "\f2a9",
+    "calender": "\f2aa",
+    "clock-filled": "\f2ab",
+    "clock": "\f2ac",
+    "rewatch-filled": "\f2ad",
+    "rewatch": "\f2ae",
+    "stopwatch-filled": "\f2af",
+    "stopwatch": "\f2b0",
+    "bot-filled": "\f2b1",
+    "bot": "\f2b2",
+    "person-check-filled": "\f2b3",
+    "person-check": "\f2b4",
+    "person-filled": "\f2b5",
+    "person-plus-filled": "\f2b6",
+    "person-plus": "\f2b7",
+    "person": "\f2b8",
+    "user-speak-filled": "\f2b9",
+    "user-speak": "\f2ba",
+    "users-filled": "\f2bb",
+    "users": "\f2bc",
 );
 
 .grauity-icon-exclamation-circle-filled:before {
@@ -1226,6 +1228,12 @@ $grauity-icons-map: (
 .grauity-icon-compass:before {
     content: map-get($grauity-icons-map, "compass");
 }
+.grauity-icon-copy-filled:before {
+    content: map-get($grauity-icons-map, "copy-filled");
+}
+.grauity-icon-copy:before {
+    content: map-get($grauity-icons-map, "copy");
+}
 .grauity-icon-database-filled:before {
     content: map-get($grauity-icons-map, "database-filled");
 }

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import React, { NamedExoticComponent, ReactNode, RefAttributes, Component, HTMLAttributes, DetailedHTMLProps } from "react";
+import React, { NamedExoticComponent, ReactNode, RefAttributes, Component, HTMLAttributes, DetailedHTMLProps, HTMLInputTypeAttribute } from "react";
 import { Substitute, IStyledComponentBase } from "styled-components/dist/types";
 import { HTMLMotionProps, ForwardRefComponent } from "framer-motion";
 import { FastOmit } from "styled-components";
@@ -280,6 +280,8 @@ export const ICON_TAGS: {
     close: string[];
     "compass-filled": string[];
     compass: string[];
+    "copy-filled": string[];
+    copy: string[];
     "database-filled": string[];
     database: string[];
     "diamond-filled": string[];
@@ -484,7 +486,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' | '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 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' | 'copy-filled' | 'copy' | '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';
@@ -5253,6 +5255,32 @@ export interface TextFieldProps {
      * The placeholder text for the input field.
      */
     placeholder?: string;
+    /**
+     * The type of the input field.
+     * @default 'text'
+     */
+    type?: HTMLInputTypeAttribute;
+    /**
+     * The input mode for the input field.
+     * @default 'text'
+     */
+    inputMode?: 'none' | 'text' | 'search' | 'email' | 'tel' | 'url' | 'numeric' | 'decimal' | undefined;
+    /**
+     * The pattern for the input field.
+     */
+    pattern?: string;
+    /**
+     * The minimum value for the input field.
+     */
+    min?: number;
+    /**
+     * The maximum value for the input field.
+     */
+    max?: number;
+    /**
+     * The step value for the input field.
+     */
+    step?: number;
     /**
      * The validation message to display when the input field is invalid.
      */