mainstack-design-system 0.1.0 → 0.1.2

package/README.md

@@ -12,19 +12,19 @@ To view the design system documentation, visit this [link](https://mainstack-des
 
 ## Components
 
-Components can be used by importing from the `'mainstack-design-system/src` directory. For example:
+Components can be used by importing from the `'mainstack-design-system` directory. For example:
 
-`import { Button } from 'mainstack-design-system/src';`
+`import { Button } from 'mainstack-design-system';`
 
 ## Icons
 
-Icons are imported from the `'mainstack-design-system/src` directory. For example:
+Icons are imported from the `'mainstack-design-system` directory. For example:
 
-`import { ArrowRightIcon } from 'mainstack-design-system/src';`
+`import { ArrowRightIcon } from 'mainstack-design-system';`
 
 ## Colors
 
-Colors are imported from the `mainstack-design-system/src` directory. For example:
+Colors are imported from the `mainstack-design-system` directory. For example:
 
 ```
  import {Colors} from "mainstack-design-system/src";

package/build/mainstack-design-system.js

@@ -33305,7 +33305,7 @@ const QG = ({
         "path",
         {
           d: "M10 6V13.4979",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "0.8",
           strokeMiterlimit: "10",
           strokeLinecap: "round"
@@ -33315,7 +33315,7 @@ const QG = ({
         "path",
         {
           d: "M6 10H13.4979",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "0.8",
           strokeMiterlimit: "10",
           strokeLinecap: "round"
@@ -33325,7 +33325,7 @@ const QG = ({
         "path",
         {
           d: "M1.89546 13.9079C1.21383 12.4594 0.873019 10.6702 1.04343 8.8809C1.55464 4.96156 4.62195 1.72384 8.54129 1.12742C14.6759 0.104985 19.9585 5.38757 18.9361 11.5222C18.3396 15.3563 15.1019 18.4236 11.2678 18.9349C9.05251 19.1905 7.00764 18.6793 5.30358 17.6568",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "0.8",
           strokeMiterlimit: "10",
           strokeLinecap: "round",
@@ -33336,7 +33336,7 @@ const QG = ({
         "path",
         {
           d: "M1.98021 13.993L1.29858 18.0828C1.29858 18.3384 1.46899 18.5088 1.7246 18.4236L5.21792 17.5716",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "0.8",
           strokeMiterlimit: "10",
           strokeLinecap: "round",
@@ -35308,7 +35308,7 @@ const QG = ({
       "path",
       {
         d: "M12 21C16.9705 21 21 16.9705 21 12C21 7.02943 16.9705 3 12 3C7.02943 3 3 7.02943 3 12C3 14.3967 3.93685 16.5746 5.46431 18.1875L3.65413 20.2534C3.39925 20.5443 3.60583 21 3.99259 21H12Z",
-        stroke: "#131316",
+        stroke: "currentColor",
         strokeLinecap: "round",
         strokeLinejoin: "round"
       }
@@ -35948,7 +35948,7 @@ const QG = ({
         "path",
         {
           d: "M22.9 19.5L12.2 22.7001C12.1 22.7001 12 22.7 12 22.6V8.20005C12 8.00005 12.1 7.90005 12.3 7.90005L22.8 4.60005C22.9 4.60005 22.9 4.50005 22.8 4.50005L12.2 1.30005C12.1 1.30005 11.9 1.30005 11.8 1.30005L1.3 4.50005C1.2 4.50005 1 4.70005 1 4.80005V19.4",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "1.2",
           strokeMiterlimit: "10",
           strokeLinecap: "round",
@@ -35959,7 +35959,7 @@ const QG = ({
         "path",
         {
           d: "M1.09998 4.6001L12 7.9001",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "1.2",
           strokeMiterlimit: "10",
           strokeLinecap: "round",
@@ -35970,7 +35970,7 @@ const QG = ({
         "path",
         {
           d: "M1.09998 19.4L12 22.7",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "1.2",
           strokeMiterlimit: "10",
           strokeLinecap: "round",
@@ -35981,7 +35981,7 @@ const QG = ({
         "path",
         {
           d: "M22.9 19.5V4.5",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "1.2",
           strokeMiterlimit: "10",
           strokeLinecap: "round",
@@ -35992,7 +35992,7 @@ const QG = ({
         "path",
         {
           d: "M7.69995 2.6001L17.5 6.2001",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "1.2",
           strokeMiterlimit: "10",
           strokeLinecap: "round",
@@ -36013,7 +36013,7 @@ const QG = ({
       "path",
       {
         d: "M8.54413 15.7558L15.7558 8.54413M8.49577 5.16339L6.96832 5.15196C5.96207 5.14442 5.14442 5.96207 5.15196 6.96832L5.16339 8.49577C5.16704 8.98328 4.9731 9.45149 4.62579 9.79363L3.53765 10.8657C2.82078 11.5719 2.82078 12.7282 3.53765 13.4344L4.62579 14.5063C4.9731 14.8485 5.16704 15.3167 5.16339 15.8042L5.15196 17.3317C5.14442 18.3379 5.96207 19.1555 6.96832 19.148L8.49577 19.1366C8.98328 19.133 9.45149 19.3269 9.79363 19.6742L10.8657 20.7624C11.5719 21.4792 12.7282 21.4792 13.4344 20.7624L14.5063 19.6742C14.8485 19.3269 15.3167 19.133 15.8042 19.1366L17.3317 19.148C18.3379 19.1555 19.1555 18.3379 19.148 17.3317L19.1366 15.8042C19.133 15.3167 19.3269 14.8485 19.6742 14.5063L20.7624 13.4344C21.4792 12.7282 21.4792 11.5719 20.7624 10.8657L19.6742 9.79363C19.3269 9.45149 19.133 8.98328 19.1366 8.49577L19.148 6.96832C19.1555 5.96207 18.3379 5.14442 17.3317 5.15196L15.8042 5.16339C15.3167 5.16704 14.8485 4.9731 14.5063 4.62579L13.4344 3.53765C12.7282 2.82078 11.5718 2.82078 10.8657 3.53765L9.79363 4.62579C9.45149 4.9731 8.98328 5.16704 8.49577 5.16339ZM10.4973 9.44574C10.4973 10.1096 9.95918 10.6477 9.29536 10.6477C8.63154 10.6477 8.09341 10.1096 8.09341 9.44574C8.09341 8.78192 8.63154 8.24379 9.29536 8.24379C9.95918 8.24379 10.4973 8.78192 10.4973 9.44574ZM16.2066 14.8544C16.2066 15.5182 15.6685 16.0563 15.0046 16.0563C14.3408 16.0563 13.8026 15.5182 13.8026 14.8544C13.8026 14.1905 14.3408 13.6524 15.0046 13.6524C15.6685 13.6524 16.2066 14.1905 16.2066 14.8544Z",
-        stroke: "#131316",
+        stroke: "currentColor",
         strokeLinecap: "round",
         strokeLinejoin: "round"
       }
@@ -36716,7 +36716,7 @@ const QG = ({
         "path",
         {
           d: "M22.8 17.5H1.20005C1.00005 17.5 0.800049 17.3 0.800049 17.1V14C0.800049 13.8 1.00005 13.7 1.10005 13.6C2.30005 13.5 3.30005 12.5 3.40005 11.2C3.40005 9.89998 2.40005 8.79998 1.10005 8.69998C1.00005 8.79998 0.900049 8.69998 0.900049 8.49998V5.49998C0.900049 5.29998 1.10005 5.09998 1.30005 5.09998H22.8C23 5.09998 23.2001 5.29998 23.2001 5.49998V8.39998C23.2001 8.59998 23 8.79998 22.8 8.79998C21.3 8.89998 20.2001 10.1 20.2001 11.4C20.3001 12.6 21.4 13.7 22.8 13.7C23 13.7 23.2001 13.9 23.2001 14.1V17.2C23.1001 17.4 23 17.5 22.8 17.5Z",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "1.2",
           strokeMiterlimit: "10",
           strokeLinecap: "round"
@@ -36726,7 +36726,7 @@ const QG = ({
         "path",
         {
           d: "M17 7.99998V5.09998",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "1.2",
           strokeMiterlimit: "10",
           strokeLinecap: "round"
@@ -36736,7 +36736,7 @@ const QG = ({
         "path",
         {
           d: "M17 14.5V17.5",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "1.2",
           strokeMiterlimit: "10",
           strokeLinecap: "round"
@@ -36746,7 +36746,7 @@ const QG = ({
         "path",
         {
           d: "M17 12.2V10.4",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "1.2",
           strokeMiterlimit: "10",
           strokeLinecap: "round"
@@ -36756,7 +36756,7 @@ const QG = ({
         "path",
         {
           d: "M9.7 15.2L6.4 11.9C6.2 11.7 6.2 11.4 6.4 11.3L9.7 7.99998C9.9 7.79998 10.2 7.79998 10.3 7.99998L13.6 11.3C13.8 11.5 13.8 11.8 13.6 11.9L10.3 15.2C10.2 15.4 9.9 15.4 9.7 15.2Z",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "1.2",
           strokeMiterlimit: "10",
           strokeLinecap: "round",
@@ -36848,7 +36848,7 @@ const QG = ({
         "path",
         {
           d: "M14.9621 17.3175C16.2628 17.3175 17.3172 16.2631 17.3172 14.9624C17.3172 13.6617 16.2628 12.6073 14.9621 12.6073C13.6615 12.6073 12.6071 13.6617 12.6071 14.9624C12.6071 16.2631 13.6615 17.3175 14.9621 17.3175Z",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "0.8",
           strokeMiterlimit: "10",
           strokeLinecap: "round"
@@ -36858,7 +36858,7 @@ const QG = ({
         "path",
         {
           d: "M6.8037 18.3268C10.0089 18.3268 12.6073 15.7285 12.6073 12.5232C12.6073 9.31792 10.0089 6.71954 6.8037 6.71954C3.59847 6.71954 1.00012 9.31792 1.00012 12.5232C1.00012 15.7285 3.59847 18.3268 6.8037 18.3268Z",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "0.8",
           strokeMiterlimit: "10",
           strokeLinecap: "round"
@@ -36868,7 +36868,7 @@ const QG = ({
         "path",
         {
           d: "M7.39294 6.80365C7.39294 3.60744 10.0003 1 13.1965 1C16.3927 1 19.0001 3.60744 19.0001 6.80365C19.0001 9.99986 16.3927 12.6073 13.1965 12.6073",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "0.8",
           strokeMiterlimit: "10",
           strokeLinecap: "round"
@@ -36878,7 +36878,7 @@ const QG = ({
         "path",
         {
           d: "M13.1958 9.32701V4.86914",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "0.8",
           strokeMiterlimit: "10",
           strokeLinecap: "round"
@@ -36888,7 +36888,7 @@ const QG = ({
         "path",
         {
           d: "M14.6256 6.13078L13.1957 4.19623L11.6818 6.13078",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "0.8",
           strokeMiterlimit: "10",
           strokeLinecap: "round",
@@ -38587,7 +38587,7 @@ const QG = ({
         "path",
         {
           d: "M18.4 4.69995H22.2C22.5 4.69995 22.8 4.99995 22.8 5.29995V18C22.8 18.3 22.5 18.6 22.2 18.6H1.69998C1.39998 18.6 1.09998 18.3 1.09998 18V5.29995C1.09998 4.99995 1.39998 4.69995 1.69998 4.69995H5.79998",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "1.2",
           strokeMiterlimit: "10",
           strokeLinecap: "round",
@@ -38598,7 +38598,7 @@ const QG = ({
         "path",
         {
           d: "M8.30005 21.8H15.7",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "1.2",
           strokeMiterlimit: "10",
           strokeLinecap: "round",
@@ -38609,7 +38609,7 @@ const QG = ({
         "path",
         {
           d: "M12 18.6V21.8",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "1.2",
           strokeMiterlimit: "10",
           strokeLinecap: "round",
@@ -38620,7 +38620,7 @@ const QG = ({
         "path",
         {
           d: "M17.4 16H6.60002C6.20002 16 5.90002 15.7 5.90002 15.3V2.79998C5.90002 2.39998 6.20002 2.09998 6.60002 2.09998H17.5C17.9 2.09998 18.2 2.39998 18.2 2.79998V15.2C18.1 15.7 17.8 16 17.4 16Z",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "1.2",
           strokeMiterlimit: "10",
           strokeLinecap: "round",
@@ -38631,7 +38631,7 @@ const QG = ({
         "path",
         {
           d: "M8.59998 12.9H15.4",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "1.2",
           strokeMiterlimit: "10",
           strokeLinecap: "round",
@@ -38642,7 +38642,7 @@ const QG = ({
         "path",
         {
           d: "M8.59998 9.09998H15.4",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "1.2",
           strokeMiterlimit: "10",
           strokeLinecap: "round",
@@ -38653,7 +38653,7 @@ const QG = ({
         "path",
         {
           d: "M8.59998 5.19995H15.4",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "1.2",
           strokeMiterlimit: "10",
           strokeLinecap: "round",
@@ -39086,7 +39086,7 @@ const QG = ({
         "path",
         {
           d: "M13.8 16.4H19.9",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "1.2",
           strokeMiterlimit: "10",
           strokeLinecap: "round",
@@ -39097,7 +39097,7 @@ const QG = ({
         "path",
         {
           d: "M16.9 13.4V19.5",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "1.2",
           strokeMiterlimit: "10",
           strokeLinecap: "round",
@@ -39108,7 +39108,7 @@ const QG = ({
         "path",
         {
           d: "M8.70002 9.4H1.60002C1.20002 9.4 0.900024 9.1 0.900024 8.7V1.7C0.900024 1.3 1.20002 1 1.60002 1H8.70002C9.10002 1 9.40002 1.3 9.40002 1.7V8.8C9.30002 9.1 9.00002 9.4 8.70002 9.4Z",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "1.2",
           strokeMiterlimit: "10",
           strokeLinecap: "round",
@@ -39119,7 +39119,7 @@ const QG = ({
         "path",
         {
           d: "M8.70002 20.6H1.60002C1.20002 20.6 0.900024 20.3 0.900024 19.9V12.8C0.900024 12.4 1.20002 12.1 1.60002 12.1H8.70002C9.10002 12.1 9.40002 12.4 9.40002 12.8V20C9.30002 20.3 9.00002 20.6 8.70002 20.6Z",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "1.2",
           strokeMiterlimit: "10",
           strokeLinecap: "round",
@@ -39130,7 +39130,7 @@ const QG = ({
         "path",
         {
           d: "M20.4 9.4H13.3C12.9 9.4 12.6 9.1 12.6 8.7V1.7C12.7 1.3 13 1 13.3 1H20.4C20.8 1 21.1 1.3 21.1 1.7V8.8C21.1 9.1 20.8 9.4 20.4 9.4Z",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "1.2",
           strokeMiterlimit: "10",
           strokeLinecap: "round",
@@ -39292,7 +39292,7 @@ const QG = ({
         "path",
         {
           d: "M14.2044 1.65649C15.032 2.24406 15.7559 2.96801 16.3435 3.79559C16.1192 3.94552 16.0538 4.24781 16.1984 4.47756C17.023 5.78702 17.5 7.33704 17.5 9C17.5 10.663 17.023 12.213 16.1984 13.5224C16.0538 13.7522 16.1192 14.0545 16.3435 14.2044C15.7559 15.032 15.032 15.7559 14.2044 16.3435C14.0545 16.1192 13.7522 16.0538 13.5224 16.1984C12.213 17.023 10.663 17.5 9 17.5C7.33704 17.5 5.78702 17.023 4.47756 16.1984C4.24781 16.0538 3.94552 16.1192 3.79559 16.3435C2.96801 15.7559 2.24406 15.032 1.65649 14.2044C1.88083 14.0545 1.94622 13.7522 1.80155 13.5224C0.977048 12.213 0.5 10.663 0.5 9C0.5 7.33704 0.977048 5.78702 1.80155 4.47756C1.94622 4.24781 1.88083 3.94552 1.65649 3.79559C2.24406 2.96802 2.96802 2.24406 3.79559 1.65649C3.94552 1.88083 4.24781 1.94622 4.47756 1.80155C5.78702 0.977048 7.33704 0.5 9 0.5C10.663 0.5 12.213 0.977048 13.5224 1.80155C13.7522 1.94622 14.0545 1.88083 14.2044 1.65649Z",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeLinecap: "round",
           strokeLinejoin: "round",
           strokeDasharray: "10 4"
@@ -40590,7 +40590,7 @@ const QG = ({
         "path",
         {
           d: "M0.900024 9.09998V1.79998C0.900024 1.09998 1.40002 0.599976 2.10002 0.599976H21.9C22.6 0.599976 23.1 1.09998 23.1 1.79998V13.6C23.1 14.3 22.6 14.8 21.9 14.8H16.9",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "1.2",
           strokeMiterlimit: "10",
           strokeLinecap: "round"
@@ -40600,7 +40600,7 @@ const QG = ({
         "path",
         {
           d: "M8.60002 15C9.81505 15 10.8 14.015 10.8 12.8C10.8 11.5849 9.81505 10.6 8.60002 10.6C7.385 10.6 6.40002 11.5849 6.40002 12.8C6.40002 14.015 7.385 15 8.60002 15Z",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "1.2",
           strokeMiterlimit: "10"
         }
@@ -40609,7 +40609,7 @@ const QG = ({
         "path",
         {
           d: "M14.4 11.3L13.1 12.1C13 12.2 12.9 12.3 12.9 12.4C12.9 12.6 12.9 12.7 12.9 12.8C12.9 13 12.9 13.1 12.9 13.3C12.9 13.4 13 13.6 13.1 13.6L14.4 14.4L12.8 17.1L11.5 16.3C11.4 16.2 11.2 16.2 11.1 16.3C10.9 16.5 10.6 16.6 10.4 16.7C10.3 16.8 10.2 16.9 10.2 17V18.4H7.20005V17C7.20005 16.9 7.10005 16.7 7.00005 16.7C6.70005 16.6 6.40005 16.4 6.20005 16.3C6.10005 16.2 6.10005 16.2 6.00005 16.2C5.90005 16.2 5.90005 16.2 5.80005 16.3L4.40005 17L2.80005 14.2L4.10005 13.4C4.20005 13.3 4.30005 13.2 4.30005 13.1C4.30005 12.9 4.30005 12.8 4.30005 12.7C4.30005 12.6 4.30005 12.4 4.30005 12.2C4.30005 12.1 4.20005 11.9 4.10005 11.9L2.80005 11.1L4.40005 8.39997L5.80005 9.19998C5.90005 9.29998 6.10005 9.29998 6.20005 9.19998C6.40005 8.99998 6.60005 8.89998 6.90005 8.79998C7.00005 8.69998 7.10005 8.59998 7.10005 8.49998V7.09998H10.1V8.49998C10.1 8.59998 10.2 8.79998 10.3 8.79998C10.6 8.89998 10.8 9.09998 11 9.19998C11.1 9.29998 11.3 9.29998 11.4 9.19998L12.8 8.39997L14.4 11.3Z",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "1.2",
           strokeMiterlimit: "10",
           strokeLinecap: "round",
@@ -40724,7 +40724,7 @@ const QG = ({
         "path",
         {
           d: "M10.6855 18.9084H2.37059C1.54823 18.9084 1 18.543 1 17.9034V2.00506C1 1.45685 1.54823 1 2.37059 1H15.8023C16.6247 1 17.1729 1.36548 17.1729 2.00506V6.02532",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "0.8",
           strokeMiterlimit: "10",
           strokeLinecap: "round"
@@ -40734,7 +40734,7 @@ const QG = ({
         "path",
         {
           d: "M17.3556 12.2385C18.264 12.2385 19.0003 11.5022 19.0003 10.5939C19.0003 9.68555 18.264 8.94922 17.3556 8.94922C16.4473 8.94922 15.7109 9.68555 15.7109 10.5939C15.7109 11.5022 16.4473 12.2385 17.3556 12.2385Z",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "0.8",
           strokeMiterlimit: "10"
         }
@@ -40743,7 +40743,7 @@ const QG = ({
         "path",
         {
           d: "M17.3556 19.4567C18.264 19.4567 19.0003 18.7204 19.0003 17.8121C19.0003 16.9038 18.264 16.1674 17.3556 16.1674C16.4473 16.1674 15.7109 16.9038 15.7109 17.8121C15.7109 18.7204 16.4473 19.4567 17.3556 19.4567Z",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "0.8",
           strokeMiterlimit: "10"
         }
@@ -40752,7 +40752,7 @@ const QG = ({
         "path",
         {
           d: "M10.8686 15.7105C11.7769 15.7105 12.5133 14.9742 12.5133 14.0659C12.5133 13.1575 11.7769 12.4212 10.8686 12.4212C9.96024 12.4212 9.22388 13.1575 9.22388 14.0659C9.22388 14.9742 9.96024 15.7105 10.8686 15.7105Z",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "0.8",
           strokeMiterlimit: "10"
         }
@@ -40761,7 +40761,7 @@ const QG = ({
         "path",
         {
           d: "M12.4219 13.1522L15.7113 11.0507",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "0.8",
           strokeMiterlimit: "10"
         }
@@ -40770,7 +40770,7 @@ const QG = ({
         "path",
         {
           d: "M12.4219 14.7054L16.0768 17.1724",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "0.8",
           strokeMiterlimit: "10"
         }
@@ -40779,7 +40779,7 @@ const QG = ({
         "path",
         {
           d: "M4.56384 6.66498H11.5995",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "0.8",
           strokeMiterlimit: "10",
           strokeLinecap: "round"
@@ -40800,7 +40800,7 @@ const QG = ({
         "path",
         {
           d: "M12.546 8.36962C13.3459 8.36962 13.9944 7.72113 13.9944 6.92117C13.9944 6.12121 13.3459 5.47272 12.546 5.47272C11.746 5.47272 11.0975 6.12121 11.0975 6.92117C11.0975 7.72113 11.746 8.36962 12.546 8.36962Z",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "0.8",
           strokeMiterlimit: "10"
         }
@@ -40809,7 +40809,7 @@ const QG = ({
         "path",
         {
           d: "M12.546 14.845C13.3459 14.845 13.9944 14.1965 13.9944 13.3966C13.9944 12.5966 13.3459 11.9481 12.546 11.9481C11.746 11.9481 11.0975 12.5966 11.0975 13.3966C11.0975 14.1965 11.746 14.845 12.546 14.845Z",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "0.8",
           strokeMiterlimit: "10"
         }
@@ -40818,7 +40818,7 @@ const QG = ({
         "path",
         {
           d: "M6.75229 11.4369C7.55224 11.4369 8.20074 10.7884 8.20074 9.98843C8.20074 9.18847 7.55224 8.53998 6.75229 8.53998C5.95233 8.53998 5.30383 9.18847 5.30383 9.98843C5.30383 10.7884 5.95233 11.4369 6.75229 11.4369Z",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "0.8",
           strokeMiterlimit: "10"
         }
@@ -40827,7 +40827,7 @@ const QG = ({
         "path",
         {
           d: "M8.11536 9.13643L11.0123 7.26196",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "0.8",
           strokeMiterlimit: "10"
         }
@@ -40836,7 +40836,7 @@ const QG = ({
         "path",
         {
           d: "M8.11536 10.5849L11.3531 12.8002",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "0.8",
           strokeMiterlimit: "10"
         }
@@ -40845,7 +40845,7 @@ const QG = ({
         "path",
         {
           d: "M1.89546 13.9079C1.21383 12.4594 0.873019 10.6702 1.04343 8.8809C1.55464 4.96156 4.62195 1.72384 8.54129 1.12742C14.6759 0.104985 19.9585 5.38757 18.9361 11.5222C18.3396 15.3563 15.1019 18.4236 11.2678 18.9349C9.05251 19.1905 7.00764 18.6793 5.30358 17.6568",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "0.8",
           strokeMiterlimit: "10",
           strokeLinecap: "round",
@@ -40856,7 +40856,7 @@ const QG = ({
         "path",
         {
           d: "M1.98033 13.993L1.29871 18.0828C1.29871 18.3384 1.46911 18.5088 1.72472 18.4236L5.21805 17.5716",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "0.8",
           strokeMiterlimit: "10",
           strokeLinecap: "round",
@@ -41250,7 +41250,7 @@ const QG = ({
         "path",
         {
           d: "M2.0679 19.2547H13.9732C14.5905 19.2547 15.0314 18.8137 15.0314 18.1964V6.29116C15.0314 5.67385 14.5905 5.23291 13.9732 5.23291H2.0679C1.45059 5.23291 1.00965 5.67385 1.00965 6.29116V18.1964C0.921464 18.8137 1.45059 19.2547 2.0679 19.2547Z",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "0.8",
           strokeMiterlimit: "10",
           strokeLinecap: "round"
@@ -41260,7 +41260,7 @@ const QG = ({
         "path",
         {
           d: "M15.1197 15.0218H17.9417C18.559 15.0218 19 14.5808 19 13.9635V2.05825C19 1.44094 18.559 1 17.9417 1H5.94826C5.33095 1 4.89001 1.44094 4.89001 2.05825V4.96843",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "0.8",
           strokeMiterlimit: "10",
           strokeLinecap: "round"
@@ -41270,7 +41270,7 @@ const QG = ({
         "path",
         {
           d: "M5.59583 15.5509C4.09664 14.7572 3.39115 12.9052 4.00846 11.3179C4.62577 9.7305 6.38951 8.76044 8.06507 9.20138C9.38787 9.55413 10.3579 10.7888 10.5343 12.1997",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "0.8",
           strokeMiterlimit: "10",
           strokeLinecap: "round"
@@ -41280,7 +41280,7 @@ const QG = ({
         "path",
         {
           d: "M8.76978 11.5824L10.6217 12.5525L11.5918 10.7888",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "0.8",
           strokeMiterlimit: "10",
           strokeLinecap: "round"
@@ -41613,7 +41613,7 @@ const QG = ({
         "path",
         {
           d: "M0.900024 9.09998V1.79998C0.900024 1.09998 1.40002 0.599976 2.10002 0.599976H21.9C22.6 0.599976 23.1 1.09998 23.1 1.79998V13.6C23.1 14.3 22.6 14.8 21.9 14.8H16.9",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "1.2",
           strokeMiterlimit: "10",
           strokeLinecap: "round"
@@ -41623,7 +41623,7 @@ const QG = ({
         "path",
         {
           d: "M7.39998 10.5C8.94637 10.5 10.2 9.24642 10.2 7.70002C10.2 6.15363 8.94637 4.90002 7.39998 4.90002C5.85358 4.90002 4.59998 6.15363 4.59998 7.70002C4.59998 9.24642 5.85358 10.5 7.39998 10.5Z",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "1.2",
           strokeMiterlimit: "10"
         }
@@ -41632,7 +41632,7 @@ const QG = ({
         "path",
         {
           d: "M9.00002 11H5.80002C3.10002 11 0.900024 13.2 0.900024 15.9V16.5C0.900024 17 1.30002 17.4 1.80002 17.4H12.9C13.4 17.4 13.8 17 13.8 16.5V15.9C13.9 13.1 11.7 11 9.00002 11Z",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "1.2",
           strokeMiterlimit: "10"
         }
@@ -41652,7 +41652,7 @@ const QG = ({
         "path",
         {
           d: "M0.799805 4.2H15.1998M2.3998 4.2V15.4C2.3998 16.2837 3.11615 17 3.9998 17H11.9998C12.8835 17 13.5998 16.2837 13.5998 15.4V4.2M4.7998 4.2V2.6C4.7998 1.71634 5.51615 1 6.3998 1H9.5998C10.4835 1 11.1998 1.71634 11.1998 2.6V4.2",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeLinecap: "round",
           strokeLinejoin: "round"
         }
@@ -41661,7 +41661,7 @@ const QG = ({
         "path",
         {
           d: "M9.59985 8.19995V13",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeLinecap: "round",
           strokeLinejoin: "round"
         }
@@ -41670,7 +41670,7 @@ const QG = ({
         "path",
         {
           d: "M6.39978 8.19995V13",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeLinecap: "round",
           strokeLinejoin: "round"
         }
@@ -42143,7 +42143,7 @@ const QG = ({
         "path",
         {
           d: "M22.3 14.8H1.69998C1.39998 14.8 1.09998 14.5 1.09998 14.2V1.50002C1.09998 1.20002 1.39998 0.900024 1.69998 0.900024H22.2C22.5 0.900024 22.8 1.20002 22.8 1.50002V14.2C22.9 14.6 22.6 14.8 22.3 14.8Z",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "1.2",
           strokeMiterlimit: "10",
           strokeLinecap: "round",
@@ -42154,7 +42154,7 @@ const QG = ({
         "path",
         {
           d: "M12 9.79998C13.436 9.79998 14.6 8.63592 14.6 7.19998C14.6 5.76404 13.436 4.59998 12 4.59998C10.5641 4.59998 9.40002 5.76404 9.40002 7.19998C9.40002 8.63592 10.5641 9.79998 12 9.79998Z",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "1.2",
           strokeMiterlimit: "10",
           strokeLinecap: "round",
@@ -42165,7 +42165,7 @@ const QG = ({
         "path",
         {
           d: "M7.09998 15C7.09998 12.3 9.29998 10.1 12 10.1C14.7 10.1 16.9 12.3 16.9 15",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "1.2",
           strokeMiterlimit: "10",
           strokeLinejoin: "round"
@@ -42175,7 +42175,7 @@ const QG = ({
         "path",
         {
           d: "M8.29993 18.1H15.6999",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "1.2",
           strokeMiterlimit: "10",
           strokeLinecap: "round",
@@ -42186,7 +42186,7 @@ const QG = ({
         "path",
         {
           d: "M12 14.8V18.1",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "1.2",
           strokeMiterlimit: "10",
           strokeLinecap: "round",
@@ -42270,7 +42270,7 @@ const QG = ({
         "path",
         {
           d: "M18.4 4.40002H22.2C22.5 4.40002 22.8 4.70002 22.8 5.00002V17.7C22.8 18 22.5 18.3 22.2 18.3H1.69998C1.39998 18.3 1.09998 18 1.09998 17.7V5.00002C1.09998 4.70002 1.39998 4.40002 1.69998 4.40002H5.79998",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "1.2",
           strokeMiterlimit: "10",
           strokeLinecap: "round",
@@ -42281,7 +42281,7 @@ const QG = ({
         "path",
         {
           d: "M8.30005 21.5H15.7",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "1.2",
           strokeMiterlimit: "10",
           strokeLinecap: "round",
@@ -42292,7 +42292,7 @@ const QG = ({
         "path",
         {
           d: "M12 18.3V21.5",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "1.2",
           strokeMiterlimit: "10",
           strokeLinecap: "round",
@@ -42303,7 +42303,7 @@ const QG = ({
         "path",
         {
           d: "M18.1 13.3L13.5 11H6.40005C6.10005 11 5.80005 10.8 5.80005 10.4V2.40005C5.80005 2.10005 6.00005 1.80005 6.40005 1.80005H17.5C17.8 1.80005 18.1 2.00005 18.1 2.40005V10.5V13.3Z",
-          stroke: "#131316",
+          stroke: "currentColor",
           strokeWidth: "1.2",
           strokeMiterlimit: "10",
           strokeLinecap: "round",

package/package.json

@@ -1,7 +1,12 @@
 {
   "name": "mainstack-design-system",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "type": "module",
+  "main": "build/mainstack-design-system.js",
+  "types": "build/src/index.d.ts",
+  "files": [
+    "build"
+  ],
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
@@ -15,7 +20,7 @@
     "scriptname": "cmd",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-		"prepublishOnly": "yarn build"
+    "prepublishOnly": "yarn build"
   },
   "publishConfig": {
     "@themainstack:registry": "https://npm.pkg.github.com"
@@ -32,7 +37,7 @@
       "last 1 safari version"
     ]
   },
-  "dependencies": {
+  "peerDependencies": {
     "@chakra-ui/icons": "^2.1.1",
     "@chakra-ui/react": "^2.5.1",
     "@emotion/react": "^11.10.6",
@@ -88,13 +93,9 @@
     "vite-plugin-lib-inject-css": "^1.3.0"
   },
   "description": "<!-- @format -->",
-  "main": "mainstack-design-system.js",
-	"files": [
-		 "build"
-	],
-	"sideEffects": [
-		 "**/*.css"
-	],
+  "sideEffects": [
+    "**/*.css"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://D-Ajiva@github.com/The-Mainstack/mainstack-design-system.git"