diff --git a/.gitignore b/.gitignore
index 9553a87..9ed345b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -210,4 +210,6 @@ build/
 !**/ios/**/default.pbxuser
 !**/ios/**/default.perspectivev3
 
+# SkynexUI
+examples/**/*.lock
 
diff --git a/examples/demo_base/lib/screens/home/home_screen.dart b/examples/demo_base/lib/screens/home/home_screen.dart
index 43d7f33..71dfe8a 100644
--- a/examples/demo_base/lib/screens/home/home_screen.dart
+++ b/examples/demo_base/lib/screens/home/home_screen.dart
@@ -16,10 +16,20 @@ class HomeScreen extends StatelessWidget {
             Breakpoints.xs: bg,
           },
           margin: {Breakpoints.xs: 50},
-          padding: {Breakpoints.xs: 50},
+          paddingBottom: {Breakpoints.xs: 100},
+          paddingVertical: {Breakpoints.xs: 50},
+          paddingHorizontal: {Breakpoints.xs: 50},
         ),
         children: [
-          Text('SkynexUI: $colorSelected'),
+          Text(
+            'SkynexUI: $colorSelected',
+            styleSheet: StyleSheet(
+              color: {
+                Breakpoints.xs: theme.colors.neutral.x999,
+                Breakpoints.sm: theme.colors.neutral.x000,
+              },
+            ),
+          ),
         ],
       ),
     );
diff --git a/examples/demo_base/lib/screens/home/home_screen.tsx b/examples/demo_base/lib/screens/home/home_screen.tsx
index 1886e64..7a9f04e 100644
--- a/examples/demo_base/lib/screens/home/home_screen.tsx
+++ b/examples/demo_base/lib/screens/home/home_screen.tsx
@@ -15,10 +15,17 @@ export function HomeScreen() {
           xs: bg,
         },
         margin: { xs: 50 },
-        padding: { xs: 50 },
+        paddingBottom: { xs: 100 },
+        paddingVertical: { xs: 50 },
+        paddingHorizontal: { xs: 50 },
       }}
     >
-      <Text>SkynexUI: {colorSelected}</Text>
-    </Box>
+      <Text styleSheet={{
+        color: {
+          xs: theme.colors.neutral.x999,
+          sm: theme.colors.neutral.x000,
+        },
+      }}>SkynexUI: {colorSelected}</Text>
+    </Box >
   );
 }
diff --git a/examples/demo_base/tsconfig.json b/examples/demo_base/tsconfig.json
index 35d51ea..5bee8c4 100644
--- a/examples/demo_base/tsconfig.json
+++ b/examples/demo_base/tsconfig.json
@@ -16,7 +16,8 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "incremental": true
   },
   "include": [
     "next-env.d.ts",
diff --git a/examples/demo_base/yarn.lock b/examples/demo_base/yarn.lock
deleted file mode 100644
index 2b30896..0000000
--- a/examples/demo_base/yarn.lock
+++ /dev/null
@@ -1,673 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-# yarn lockfile v1
-
-
-"@babel/code-frame@^7.10.4":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.16.7.tgz#44416b6bd7624b998f5b1af5d470856c40138789"
-  integrity sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==
-  dependencies:
-    "@babel/highlight" "^7.16.7"
-
-"@babel/helper-plugin-utils@^7.14.5":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz#aa3a8ab4c3cceff8e65eb9e73d87dc4ff320b2f5"
-  integrity sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==
-
-"@babel/helper-validator-identifier@^7.14.9", "@babel/helper-validator-identifier@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz#e8c602438c4a8195751243da9031d1607d247cad"
-  integrity sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==
-
-"@babel/highlight@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.16.7.tgz#81a01d7d675046f0d96f82450d9d9578bdfd6b0b"
-  integrity sha512-aKpPMfLvGO3Q97V0qhw/V2SWNWlwfJknuwAunU7wZLSfrM4xTBvg7E5opUVi1kJTBKihE38CPg4nBiqX83PWYw==
-  dependencies:
-    "@babel/helper-validator-identifier" "^7.16.7"
-    chalk "^2.0.0"
-    js-tokens "^4.0.0"
-
-"@babel/plugin-syntax-jsx@7.14.5":
-  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.14.5.tgz#000e2e25d8673cce49300517a3eda44c263e4201"
-  integrity sha512-ohuFIsOMXJnbOMRfX7/w7LocdR6R7whhuRD4ax8IipLcLPlZGJKkBxgHp++U4N/vKyU16/YDQr2f5seajD3jIw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.14.5"
-
-"@babel/runtime@^7.12.5":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.7.tgz#03ff99f64106588c9c403c6ecb8c3bafbbdff1fa"
-  integrity sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ==
-  dependencies:
-    regenerator-runtime "^0.13.4"
-
-"@babel/types@7.15.0":
-  version "7.15.0"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.15.0.tgz#61af11f2286c4e9c69ca8deb5f4375a73c72dcbd"
-  integrity sha512-OBvfqnllOIdX4ojTHpwZbpvz4j3EWyjkZEdmjH0/cgsd6QOdSgU8rLSk6ard/pcW7rlmjdVSX/AWOaORR1uNOQ==
-  dependencies:
-    "@babel/helper-validator-identifier" "^7.14.9"
-    to-fast-properties "^2.0.0"
-
-"@fortawesome/fontawesome-common-types@^0.2.36":
-  version "0.2.36"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz#b44e52db3b6b20523e0c57ef8c42d315532cb903"
-  integrity sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==
-
-"@fortawesome/fontawesome-free@^5.15.4":
-  version "5.15.4"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.4.tgz#ecda5712b61ac852c760d8b3c79c96adca5554e5"
-  integrity sha512-eYm8vijH/hpzr/6/1CJ/V/Eb1xQFW2nnUKArb3z+yUWv7HTwj6M7SP957oMjfZjAHU6qpoNc2wQvIxBLWYa/Jg==
-
-"@fortawesome/fontawesome-svg-core@^1.2.36":
-  version "1.2.36"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.36.tgz#4f2ea6f778298e0c47c6524ce2e7fd58eb6930e3"
-  integrity sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==
-  dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.2.36"
-
-"@fortawesome/free-solid-svg-icons@^5.15.4":
-  version "5.15.4"
-  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz#2a68f3fc3ddda12e52645654142b9e4e8fbb6cc5"
-  integrity sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==
-  dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.2.36"
-
-"@fortawesome/react-fontawesome@^0.1.16":
-  version "0.1.16"
-  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.16.tgz#ce7665490214e20f929368d6b65f68884a99276a"
-  integrity sha512-aLmzDwC9rEOAJv2UJdMns89VZR5Ry4IHu5dQQh24Z/lWKEm44lfQr1UNalZlkUaQN8d155tNh+CS7ntntj1VMA==
-  dependencies:
-    prop-types "^15.7.2"
-
-"@next/env@12.0.8":
-  version "12.0.8"
-  resolved "https://registry.yarnpkg.com/@next/env/-/env-12.0.8.tgz#a32ca0a97d464307f2e6ff106ce09b19aac108cf"
-  integrity sha512-Wa0gOeioB9PHap9wtZDZEhgOSE3/+qE/UALWjJHuNvH4J3oE+13EjVOiEsr1JcPCXUN8ESQE+phDKlo6qJ8P9g==
-
-"@next/react-refresh-utils@12.0.8":
-  version "12.0.8"
-  resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-12.0.8.tgz#481760a95ef442abd091663db6582d4dc1b31f06"
-  integrity sha512-Bq4T/aOOFQUkCF9b8k9x+HpjOevu65ZPxsYJOpgEtBuJyvb+sZREtDDLKb/RtjUeLMrWrsGD0aLteyFFtiS8Og==
-
-"@next/swc-android-arm64@12.0.8":
-  version "12.0.8"
-  resolved "https://registry.yarnpkg.com/@next/swc-android-arm64/-/swc-android-arm64-12.0.8.tgz#f8dc9663da367a75982730cac058339fb310d79a"
-  integrity sha512-BiXMcOZNnXSIXv+FQvbRgbMb+iYayLX/Sb2MwR0wja+eMs46BY1x/ssXDwUBADP1M8YtrGTlSPHZqUiCU94+Mg==
-
-"@next/swc-darwin-arm64@12.0.8":
-  version "12.0.8"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-12.0.8.tgz#d6aced7d0a04815dd1324e7982accb3de6a643e8"
-  integrity sha512-6EGMmvcIwPpwt0/iqLbXDGx6oKHAXzbowyyVXK8cqmIvhoghRFjqfiNGBs+ar6wEBGt68zhwn/77vE3iQWoFJw==
-
-"@next/swc-darwin-x64@12.0.8":
-  version "12.0.8"
-  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-12.0.8.tgz#f4fe58d2ed852538410b15a0c80d78908050c716"
-  integrity sha512-todxgQOGP/ucz5UH2kKR3XGDdkWmWr0VZAAbzgTbiFm45Ol4ih602k2nNR3xSbza9IqNhxNuUVsMpBgeo19CFQ==
-
-"@next/swc-linux-arm-gnueabihf@12.0.8":
-  version "12.0.8"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-12.0.8.tgz#2c02d824fb46e8c6094d7e758c5d7e965070f574"
-  integrity sha512-KULmdrfI+DJxBuhEyV47MQllB/WpC3P2xbwhHezxL/LkC2nkz5SbV4k432qpx2ebjIRf9SjdQ5Oz1FjD8Urayw==
-
-"@next/swc-linux-arm64-gnu@12.0.8":
-  version "12.0.8"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-12.0.8.tgz#fc32caf3373b299558ede1d889e8555b9ba10ffb"
-  integrity sha512-1XO87wgIVPvt5fx5i8CqdhksRdcpqyzCOLW4KrE0f9pUCIT04EbsFiKdmsH9c73aqjNZMnCMXpbV+cn4hN8x1w==
-
-"@next/swc-linux-arm64-musl@12.0.8":
-  version "12.0.8"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-12.0.8.tgz#c2d3d7bc2c34da81412b74bdd6e11d0615ae1886"
-  integrity sha512-NStRZEy/rkk2G18Yhc/Jzi1Q2Dv+zH176oO8479zlDQ5syRfc6AvRHVV4iNRc8Pai58If83r/nOJkwFgGwkKLw==
-
-"@next/swc-linux-x64-gnu@12.0.8":
-  version "12.0.8"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.0.8.tgz#029d84f856801b818e5525ab1406f2446821d48c"
-  integrity sha512-rHxTGtTEDFsdT9/VjewzxE19S7W1NE+aZpm4TwbT1pSNGK9KQxQGcXjqoHMeB+VZCFknzNEoIU/vydbjZMlAuw==
-
-"@next/swc-linux-x64-musl@12.0.8":
-  version "12.0.8"
-  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.0.8.tgz#db572da90ab3bce0bc58595c6b8c2d32ec64a2d3"
-  integrity sha512-1F4kuFRQE10GSx7LMSvRmjMXFGpxT30g8rZzq9r/p/WKdErA4WB4uxaKEX0P8AINfuN63i4luKdR+LoacgBhYw==
-
-"@next/swc-win32-arm64-msvc@12.0.8":
-  version "12.0.8"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-12.0.8.tgz#f33e2e56a96489935f87c6dd28f79a7b7ed3778f"
-  integrity sha512-QuRe49jqCV61TysGopC1P0HPqFAMZMWe1nbIQLyOkDLkULmZR8N2eYZq7fwqvZE5YwhMmJA/grwWFVBqSEh5Kg==
-
-"@next/swc-win32-ia32-msvc@12.0.8":
-  version "12.0.8"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-12.0.8.tgz#0f6c7f3e50fc1a4752aed5c862f53c86ce77e3b8"
-  integrity sha512-0RV3/julybJr1IlPCowIWrJJZyAl+sOakJEM15y1NOOsbwTQ5eKZZXSi+7e23TN4wmy5HwNvn2dKzgOEVJ+jbA==
-
-"@next/swc-win32-x64-msvc@12.0.8":
-  version "12.0.8"
-  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.0.8.tgz#eae6d4c94dc8aae8ba177e2de02080339d0d4563"
-  integrity sha512-tTga6OFfO2JS+Yt5hdryng259c/tzNgSWkdiU2E+RBHiysAIOta57n4PJ8iPahOSqEqjaToPI76wM+o441GaNQ==
-
-"@skynexui/components@latest":
-  version "1.10.1"
-  resolved "https://registry.yarnpkg.com/@skynexui/components/-/components-1.10.1.tgz#e3a2b9c2c670f338dde3565c7dd2f7cbbb36928c"
-  integrity sha512-xfPSzEXMVJB9xwWpVoTgUTctsb/JgabhVnoNZ6Of1GjbskkT2jIQ/cITwamHUUf6dGfYROkZ0oRIqygPYFDDbQ==
-  dependencies:
-    "@fortawesome/fontawesome-common-types" "^0.2.36"
-    "@fortawesome/fontawesome-free" "^5.15.4"
-    "@fortawesome/fontawesome-svg-core" "^1.2.36"
-    "@fortawesome/free-solid-svg-icons" "^5.15.4"
-    "@fortawesome/react-fontawesome" "^0.1.16"
-    "@testing-library/react" "^12.1.2"
-    lodash "^4.17.21"
-    node-fetch "^3.1.0"
-    react-icons "^4.3.1"
-    react-ripples "^2.2.1"
-
-"@testing-library/dom@^8.0.0":
-  version "8.11.2"
-  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.11.2.tgz#fc110c665a066c2287be765e4a35ba8dad737015"
-  integrity sha512-idsS/cqbYudXcVWngc1PuWNmXs416oBy2g/7Q8QAUREt5Z3MUkAL2XJD7xazLJ6esDfqRDi/ZBxk+OPPXitHRw==
-  dependencies:
-    "@babel/code-frame" "^7.10.4"
-    "@babel/runtime" "^7.12.5"
-    "@types/aria-query" "^4.2.0"
-    aria-query "^5.0.0"
-    chalk "^4.1.0"
-    dom-accessibility-api "^0.5.9"
-    lz-string "^1.4.4"
-    pretty-format "^27.0.2"
-
-"@testing-library/react@^12.1.2":
-  version "12.1.2"
-  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-12.1.2.tgz#f1bc9a45943461fa2a598bb4597df1ae044cfc76"
-  integrity sha512-ihQiEOklNyHIpo2Y8FREkyD1QAea054U0MVbwH1m8N9TxeFz+KoJ9LkqoKqJlzx2JDm56DVwaJ1r36JYxZM05g==
-  dependencies:
-    "@babel/runtime" "^7.12.5"
-    "@testing-library/dom" "^8.0.0"
-
-"@types/aria-query@^4.2.0":
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-4.2.2.tgz#ed4e0ad92306a704f9fb132a0cfcf77486dbe2bc"
-  integrity sha512-HnYpAE1Y6kRyKM/XkEuiRQhTHvkzMBurTHnpFLYLBGPIylZNPs9jJcuOOYWxPLJCSEtmZT0Y8rHDokKN7rRTig==
-
-"@types/node@*":
-  version "17.0.8"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.8.tgz#50d680c8a8a78fe30abe6906453b21ad8ab0ad7b"
-  integrity sha512-YofkM6fGv4gDJq78g4j0mMuGMkZVxZDgtU0JRdx6FgiJDG+0fY0GKVolOV8WqVmEhLCXkQRjwDdKyPxJp/uucg==
-
-"@types/prop-types@*":
-  version "15.7.4"
-  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
-  integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
-
-"@types/react@^17.0.38":
-  version "17.0.38"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.38.tgz#f24249fefd89357d5fa71f739a686b8d7c7202bd"
-  integrity sha512-SI92X1IA+FMnP3qM5m4QReluXzhcmovhZnLNm3pyeQlooi02qI7sLiepEYqT678uNiyc25XfCqxREFpy3W7YhQ==
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/scheduler" "*"
-    csstype "^3.0.2"
-
-"@types/scheduler@*":
-  version "0.16.2"
-  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
-  integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
-
-ansi-regex@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
-  integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
-
-ansi-styles@^3.2.1:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
-  integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
-  dependencies:
-    color-convert "^1.9.0"
-
-ansi-styles@^4.1.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
-  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
-  dependencies:
-    color-convert "^2.0.1"
-
-ansi-styles@^5.0.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-5.2.0.tgz#07449690ad45777d1924ac2abb2fc8895dba836b"
-  integrity sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==
-
-aria-query@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.0.0.tgz#210c21aaf469613ee8c9a62c7f86525e058db52c"
-  integrity sha512-V+SM7AbUwJ+EBnB8+DXs0hPZHO0W6pqBcc0dW90OwtVG02PswOu/teuARoLQjdDOH+t9pJgGnW5/Qmouf3gPJg==
-
-big.js@^5.2.2:
-  version "5.2.2"
-  resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
-  integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==
-
-caniuse-lite@^1.0.30001283:
-  version "1.0.30001299"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001299.tgz#d753bf6444ed401eb503cbbe17aa3e1451b5a68c"
-  integrity sha512-iujN4+x7QzqA2NCSrS5VUy+4gLmRd4xv6vbBBsmfVqTx8bLAD8097euLqQgKxSVLvxjSDcvF1T/i9ocgnUFexw==
-
-chalk@^2.0.0:
-  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
-  integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
-  dependencies:
-    ansi-styles "^3.2.1"
-    escape-string-regexp "^1.0.5"
-    supports-color "^5.3.0"
-
-chalk@^4.1.0:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
-  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
-  dependencies:
-    ansi-styles "^4.1.0"
-    supports-color "^7.1.0"
-
-color-convert@^1.9.0:
-  version "1.9.3"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
-  integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
-  dependencies:
-    color-name "1.1.3"
-
-color-convert@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
-  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
-  dependencies:
-    color-name "~1.1.4"
-
-color-name@1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
-  integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
-
-color-name@~1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
-  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
-
-colorette@^1.2.2:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.4.0.tgz#5190fbb87276259a86ad700bff2c6d6faa3fca40"
-  integrity sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==
-
-convert-source-map@1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"
-  integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==
-  dependencies:
-    safe-buffer "~5.1.1"
-
-csstype@^3.0.2:
-  version "3.0.10"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.10.tgz#2ad3a7bed70f35b965707c092e5f30b327c290e5"
-  integrity sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==
-
-data-uri-to-buffer@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-4.0.0.tgz#b5db46aea50f6176428ac05b73be39a57701a64b"
-  integrity sha512-Vr3mLBA8qWmcuschSLAOogKgQ/Jwxulv3RNE4FXnYWRGujzrRWQI4m12fQqRkwX06C0KanhLr4hK+GydchZsaA==
-
-dom-accessibility-api@^0.5.9:
-  version "0.5.10"
-  resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.10.tgz#caa6d08f60388d0bb4539dd75fe458a9a1d0014c"
-  integrity sha512-Xu9mD0UjrJisTmv7lmVSDMagQcU9R5hwAbxsaAE/35XPnPLJobbuREfV/rraiSaEj/UOvgrzQs66zyTWTlyd+g==
-
-emojis-list@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
-  integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k=
-
-escape-string-regexp@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
-  integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
-
-fetch-blob@^3.1.2, fetch-blob@^3.1.3:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/fetch-blob/-/fetch-blob-3.1.3.tgz#a7dca4855e39d3e3c5a1da62d4ee335c37d26012"
-  integrity sha512-ax1Y5I9w+9+JiM+wdHkhBoxew+zG4AJ2SvAD1v1szpddUIiPERVGBxrMcB2ZqW0Y3PP8bOWYv2zqQq1Jp2kqUQ==
-  dependencies:
-    web-streams-polyfill "^3.0.3"
-
-formdata-polyfill@^4.0.10:
-  version "4.0.10"
-  resolved "https://registry.yarnpkg.com/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz#24807c31c9d402e002ab3d8c720144ceb8848423"
-  integrity sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==
-  dependencies:
-    fetch-blob "^3.1.2"
-
-has-flag@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
-  integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0=
-
-has-flag@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
-  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
-
-inherits@^2.0.3, inherits@~2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
-  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
-
-jest-worker@27.0.0-next.5:
-  version "27.0.0-next.5"
-  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-27.0.0-next.5.tgz#5985ee29b12a4e191f4aae4bb73b97971d86ec28"
-  integrity sha512-mk0umAQ5lT+CaOJ+Qp01N6kz48sJG2kr2n1rX0koqKf6FIygQV0qLOdN9SCYID4IVeSigDOcPeGLozdMLYfb5g==
-  dependencies:
-    "@types/node" "*"
-    merge-stream "^2.0.0"
-    supports-color "^8.0.0"
-
-"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
-  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
-
-json5@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
-  integrity sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==
-  dependencies:
-    minimist "^1.2.0"
-
-loader-utils@1.2.3:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.2.3.tgz#1ff5dc6911c9f0a062531a4c04b609406108c2c7"
-  integrity sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==
-  dependencies:
-    big.js "^5.2.2"
-    emojis-list "^2.0.0"
-    json5 "^1.0.1"
-
-lodash@^4.17.21:
-  version "4.17.21"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
-  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
-
-loose-envify@^1.1.0, loose-envify@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
-  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
-  dependencies:
-    js-tokens "^3.0.0 || ^4.0.0"
-
-lz-string@^1.4.4:
-  version "1.4.4"
-  resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26"
-  integrity sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=
-
-merge-stream@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
-  integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
-
-minimist@^1.2.0:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
-  integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
-
-nanoid@^3.1.23:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.2.0.tgz#62667522da6673971cca916a6d3eff3f415ff80c"
-  integrity sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA==
-
-next@^12.0.8:
-  version "12.0.8"
-  resolved "https://registry.yarnpkg.com/next/-/next-12.0.8.tgz#29138f7cdd045e4bbba466af45bf430e769634b4"
-  integrity sha512-g5c1Kuh1F8tSXJn2rVvzYBzqe9EXaR6+rY3/KrQ7y0D9FueRLfHI35wM0DRadDcPSc3+vncspfhYH3jnYE/KjA==
-  dependencies:
-    "@next/env" "12.0.8"
-    "@next/react-refresh-utils" "12.0.8"
-    caniuse-lite "^1.0.30001283"
-    jest-worker "27.0.0-next.5"
-    node-fetch "2.6.1"
-    postcss "8.2.15"
-    react-is "17.0.2"
-    react-refresh "0.8.3"
-    stream-browserify "3.0.0"
-    styled-jsx "5.0.0-beta.6"
-    use-subscription "1.5.1"
-  optionalDependencies:
-    "@next/swc-android-arm64" "12.0.8"
-    "@next/swc-darwin-arm64" "12.0.8"
-    "@next/swc-darwin-x64" "12.0.8"
-    "@next/swc-linux-arm-gnueabihf" "12.0.8"
-    "@next/swc-linux-arm64-gnu" "12.0.8"
-    "@next/swc-linux-arm64-musl" "12.0.8"
-    "@next/swc-linux-x64-gnu" "12.0.8"
-    "@next/swc-linux-x64-musl" "12.0.8"
-    "@next/swc-win32-arm64-msvc" "12.0.8"
-    "@next/swc-win32-ia32-msvc" "12.0.8"
-    "@next/swc-win32-x64-msvc" "12.0.8"
-
-node-fetch@2.6.1:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
-  integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
-
-node-fetch@^3.1.0:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-3.1.1.tgz#d0d9607e455b3087e3092b821b5b1f1ebf4c2147"
-  integrity sha512-SMk+vKgU77PYotRdWzqZGTZeuFKlsJ0hu4KPviQKkfY+N3vn2MIzr0rvpnYpR8MtB3IEuhlEcuOLbGvLRlA+yg==
-  dependencies:
-    data-uri-to-buffer "^4.0.0"
-    fetch-blob "^3.1.3"
-    formdata-polyfill "^4.0.10"
-
-object-assign@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
-  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
-
-postcss@8.2.15:
-  version "8.2.15"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.2.15.tgz#9e66ccf07292817d226fc315cbbf9bc148fbca65"
-  integrity sha512-2zO3b26eJD/8rb106Qu2o7Qgg52ND5HPjcyQiK2B98O388h43A448LCslC0dI2P97wCAQRJsFvwTRcXxTKds+Q==
-  dependencies:
-    colorette "^1.2.2"
-    nanoid "^3.1.23"
-    source-map "^0.6.1"
-
-pretty-format@^27.0.2:
-  version "27.4.6"
-  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.4.6.tgz#1b784d2f53c68db31797b2348fa39b49e31846b7"
-  integrity sha512-NblstegA1y/RJW2VyML+3LlpFjzx62cUrtBIKIWDXEDkjNeleA7Od7nrzcs/VLQvAeV4CgSYhrN39DRN88Qi/g==
-  dependencies:
-    ansi-regex "^5.0.1"
-    ansi-styles "^5.0.0"
-    react-is "^17.0.1"
-
-prop-types@^15.7.2:
-  version "15.8.1"
-  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
-  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
-  dependencies:
-    loose-envify "^1.4.0"
-    object-assign "^4.1.1"
-    react-is "^16.13.1"
-
-react-dom@^17.0.2:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
-  integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    scheduler "^0.20.2"
-
-react-icons@^4.3.1:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.3.1.tgz#2fa92aebbbc71f43d2db2ed1aed07361124e91ca"
-  integrity sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==
-
-react-is@17.0.2, react-is@^17.0.1:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
-  integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
-
-react-is@^16.13.1:
-  version "16.13.1"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
-  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
-
-react-refresh@0.8.3:
-  version "0.8.3"
-  resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
-  integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
-
-react-ripples@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/react-ripples/-/react-ripples-2.2.1.tgz#bab529eb10e06f7e660561d97e2442a38b9f4687"
-  integrity sha512-TfLjgZICQlsYCN2iX4fdeZNjoDzhJVC7r+R3irqyaNvCtWezouS9j+sE+nwSk747irtV8RKRDHmwMmsNBOw8Qg==
-
-react@^17.0.2:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
-  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-
-readable-stream@^3.5.0:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
-  integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
-  dependencies:
-    inherits "^2.0.3"
-    string_decoder "^1.1.1"
-    util-deprecate "^1.0.1"
-
-regenerator-runtime@^0.13.4:
-  version "0.13.9"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
-  integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
-
-safe-buffer@~5.1.1:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
-  integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
-
-safe-buffer@~5.2.0:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
-  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
-
-scheduler@^0.20.2:
-  version "0.20.2"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
-  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-
-source-map@0.7.3:
-  version "0.7.3"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
-  integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
-
-source-map@^0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
-  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
-
-stream-browserify@3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-3.0.0.tgz#22b0a2850cdf6503e73085da1fc7b7d0c2122f2f"
-  integrity sha512-H73RAHsVBapbim0tU2JwwOiXUj+fikfiaoYAKHF3VJfA0pe2BCzkhAHBlLG6REzE+2WNZcxOXjK7lkso+9euLA==
-  dependencies:
-    inherits "~2.0.4"
-    readable-stream "^3.5.0"
-
-string-hash@1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b"
-  integrity sha1-6Kr8CsGFW0Zmkp7X3RJ1311sgRs=
-
-string_decoder@^1.1.1:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"
-  integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
-  dependencies:
-    safe-buffer "~5.2.0"
-
-styled-jsx@5.0.0-beta.6:
-  version "5.0.0-beta.6"
-  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-5.0.0-beta.6.tgz#666552f8831a06f80c9084a47afc4b32b0c9f461"
-  integrity sha512-b1cM7Xyp2r1lsNpvoZ6wmTI8qxD0557vH2feHakNU8LMkzfJDgTQMul6O7sSYY0GxQ73pKEN69hCDp71w6Q0nA==
-  dependencies:
-    "@babel/plugin-syntax-jsx" "7.14.5"
-    "@babel/types" "7.15.0"
-    convert-source-map "1.7.0"
-    loader-utils "1.2.3"
-    source-map "0.7.3"
-    string-hash "1.1.3"
-    stylis "3.5.4"
-    stylis-rule-sheet "0.0.10"
-
-stylis-rule-sheet@0.0.10:
-  version "0.0.10"
-  resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"
-  integrity sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==
-
-stylis@3.5.4:
-  version "3.5.4"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
-  integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==
-
-supports-color@^5.3.0:
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
-  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
-  dependencies:
-    has-flag "^3.0.0"
-
-supports-color@^7.1.0:
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
-  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
-  dependencies:
-    has-flag "^4.0.0"
-
-supports-color@^8.0.0:
-  version "8.1.1"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-8.1.1.tgz#cd6fc17e28500cff56c1b86c0a7fd4a54a73005c"
-  integrity sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==
-  dependencies:
-    has-flag "^4.0.0"
-
-to-fast-properties@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
-  integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=
-
-typescript@^4.5.4:
-  version "4.5.4"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.5.4.tgz#a17d3a0263bf5c8723b9c52f43c5084edf13c2e8"
-  integrity sha512-VgYs2A2QIRuGphtzFV7aQJduJ2gyfTljngLzjpfW9FoYZF6xuw1W0vW9ghCKLfcWrCFxK81CSGRAvS1pn4fIUg==
-
-use-subscription@1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/use-subscription/-/use-subscription-1.5.1.tgz#73501107f02fad84c6dd57965beb0b75c68c42d1"
-  integrity sha512-Xv2a1P/yReAjAbhylMfFplFKj9GssgTwN7RlcTxBujFQcloStWNDQdc4g4NRWH9xS4i/FDk04vQBptAXoF3VcA==
-  dependencies:
-    object-assign "^4.1.1"
-
-util-deprecate@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
-  integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
-
-web-streams-polyfill@^3.0.3:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/web-streams-polyfill/-/web-streams-polyfill-3.2.0.tgz#a6b74026b38e4885869fb5c589e90b95ccfc7965"
-  integrity sha512-EqPmREeOzttaLRm5HS7io98goBgZ7IVz79aDvqjD0kYXLtFZTc0T/U6wHTPKyIjb+MdN7DFIIX6hgdBEpWmfPA==
diff --git a/lib/components/box/box.dart b/lib/components/box/box.dart
index ada92af..541541d 100644
--- a/lib/components/box/box.dart
+++ b/lib/components/box/box.dart
@@ -1,21 +1,5 @@
 import 'package:skynexui_components/components.dart';
-
-extension HexColor on Color {
-  /// String is in the format "aabbcc" or "ffaabbcc" with an optional leading "#".
-  static Color fromHex(String hexString) {
-    final buffer = StringBuffer();
-    if (hexString.length == 6 || hexString.length == 7) buffer.write('ff');
-    buffer.write(hexString.replaceFirst('#', ''));
-    return Color(int.parse(buffer.toString(), radix: 16));
-  }
-
-  /// Prefixes a hash sign if [leadingHashSign] is set to `true` (default is `true`).
-  String toHex({bool leadingHashSign = true}) => '${leadingHashSign ? '#' : ''}'
-      '${alpha.toRadixString(16).padLeft(2, '0')}'
-      '${red.toRadixString(16).padLeft(2, '0')}'
-      '${green.toRadixString(16).padLeft(2, '0')}'
-      '${blue.toRadixString(16).padLeft(2, '0')}';
-}
+import 'package:skynexui_components/components/box/flutter/box_base_styles.dart';
 
 class Box extends StatelessWidget {
   final List<Widget>? children;
@@ -29,38 +13,35 @@ class Box extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    // ignore: todo
-    // TODO: Refactor this to use a loop or other stuff to make everything be grouped together.
-
-    const activeBreakpoint = Breakpoints.xs;
-    var padding =
-        resolveValueForBreakpoint(styleSheet.padding, activeBreakpoint);
-    var margin = resolveValueForBreakpoint(styleSheet.margin, activeBreakpoint);
-
-    var backgroundColorValue =
-        resolveValueForBreakpoint(styleSheet.backgroundColor, activeBreakpoint);
-    var backgroundColor = (backgroundColorValue != null)
-        ? HexColor.fromHex(backgroundColorValue)
-        : Colors.transparent;
+    var activeBreakpoint = getActiveBreakpoint(context);
+    var styles = BoxBaseStyles(
+      activeBreakpoint: activeBreakpoint,
+      styleSheet: styleSheet,
+    );
 
     var child = children![0];
-    return Container(
-      margin: EdgeInsets.only(
-        bottom: margin,
-        left: margin,
-        right: margin,
-        top: margin,
-      ),
-      padding: EdgeInsets.only(
-        bottom: padding,
-        left: padding,
-        right: padding,
-        top: padding,
+    return DefaultTextStyle.merge(
+      style: TextStyle(
+        color: styles.color,
       ),
-      decoration: BoxDecoration(
-        color: backgroundColor,
+      child: Container(
+        margin: EdgeInsets.only(
+          bottom: styles.marginBottom,
+          left: styles.marginLeft,
+          right: styles.marginRight,
+          top: styles.marginTop,
+        ),
+        padding: EdgeInsets.only(
+          bottom: styles.paddingBottom,
+          left: styles.paddingLeft,
+          right: styles.paddingRight,
+          top: styles.paddingTop,
+        ),
+        decoration: BoxDecoration(
+          color: styles.backgroundColor,
+        ),
+        child: child,
       ),
-      child: child,
     );
   }
 }
diff --git a/lib/components/box/flutter/box_base_styles.dart b/lib/components/box/flutter/box_base_styles.dart
new file mode 100644
index 0000000..5c04bb5
--- /dev/null
+++ b/lib/components/box/flutter/box_base_styles.dart
@@ -0,0 +1,85 @@
+import 'package:skynexui_components/components.dart';
+import 'package:skynexui_components/components/box/flutter/hexcolor.dart';
+
+class BoxBaseStyles {
+  StyleSheet styleSheet;
+  Breakpoints activeBreakpoint;
+  dynamic color;
+  dynamic backgroundColor;
+  dynamic padding;
+  dynamic paddingTop;
+  dynamic paddingLeft;
+  dynamic paddingRight;
+  dynamic paddingBottom;
+  dynamic paddingVertical;
+  dynamic paddingHorizontal;
+  dynamic margin;
+  dynamic marginTop;
+  dynamic marginLeft;
+  dynamic marginRight;
+  dynamic marginBottom;
+  dynamic marginVertical;
+  dynamic marginHorizontal;
+
+  BoxBaseStyles({
+    required this.styleSheet,
+    required this.activeBreakpoint,
+  }) {
+    // [color]
+    var colorValue =
+        resolveValueForBreakpoint(styleSheet.color, activeBreakpoint);
+    color = (colorValue != null) ? HexColor.fromHex(colorValue) : Colors.black;
+
+    // [backgroundColor]
+    var backgroundColorValue =
+        resolveValueForBreakpoint(styleSheet.backgroundColor, activeBreakpoint);
+    backgroundColor = (backgroundColorValue != null)
+        ? HexColor.fromHex(backgroundColorValue)
+        : Colors.transparent;
+
+    // [margin]
+    margin = resolveValueForBreakpoint(styleSheet.margin, activeBreakpoint);
+    marginVertical =
+        resolveValueForBreakpoint(styleSheet.marginVertical, activeBreakpoint);
+    marginHorizontal = resolveValueForBreakpoint(
+        styleSheet.marginHorizontal, activeBreakpoint);
+    marginTop =
+        resolveValueForBreakpoint(styleSheet.marginTop, activeBreakpoint) ??
+            marginVertical ??
+            margin;
+    marginLeft =
+        resolveValueForBreakpoint(styleSheet.marginLeft, activeBreakpoint) ??
+            marginHorizontal ??
+            margin;
+    marginRight =
+        resolveValueForBreakpoint(styleSheet.marginRight, activeBreakpoint) ??
+            marginHorizontal ??
+            margin;
+    marginBottom =
+        resolveValueForBreakpoint(styleSheet.marginBottom, activeBreakpoint) ??
+            marginVertical ??
+            margin;
+    // [padding]
+    padding = resolveValueForBreakpoint(styleSheet.padding, activeBreakpoint);
+    paddingVertical =
+        resolveValueForBreakpoint(styleSheet.paddingVertical, activeBreakpoint);
+    paddingHorizontal = resolveValueForBreakpoint(
+        styleSheet.paddingHorizontal, activeBreakpoint);
+    paddingTop =
+        resolveValueForBreakpoint(styleSheet.paddingTop, activeBreakpoint) ??
+            paddingVertical ??
+            padding;
+    paddingLeft =
+        resolveValueForBreakpoint(styleSheet.paddingLeft, activeBreakpoint) ??
+            paddingHorizontal ??
+            padding;
+    paddingRight =
+        resolveValueForBreakpoint(styleSheet.paddingRight, activeBreakpoint) ??
+            paddingHorizontal ??
+            padding;
+    paddingBottom =
+        resolveValueForBreakpoint(styleSheet.paddingBottom, activeBreakpoint) ??
+            paddingVertical ??
+            padding;
+  }
+}
diff --git a/lib/components/box/flutter/hexcolor.dart b/lib/components/box/flutter/hexcolor.dart
new file mode 100644
index 0000000..a79ff6a
--- /dev/null
+++ b/lib/components/box/flutter/hexcolor.dart
@@ -0,0 +1,18 @@
+import 'package:skynexui_components/components.dart';
+
+extension HexColor on Color {
+  /// String is in the format "aabbcc" or "ffaabbcc" with an optional leading "#".
+  static Color fromHex(String hexString) {
+    final buffer = StringBuffer();
+    if (hexString.length == 6 || hexString.length == 7) buffer.write('ff');
+    buffer.write(hexString.replaceFirst('#', ''));
+    return Color(int.parse(buffer.toString(), radix: 16));
+  }
+
+  /// Prefixes a hash sign if [leadingHashSign] is set to `true` (default is `true`).
+  String toHex({bool leadingHashSign = true}) => '${leadingHashSign ? '#' : ''}'
+      '${alpha.toRadixString(16).padLeft(2, '0')}'
+      '${red.toRadixString(16).padLeft(2, '0')}'
+      '${green.toRadixString(16).padLeft(2, '0')}'
+      '${blue.toRadixString(16).padLeft(2, '0')}';
+}
diff --git a/lib/components/provider/provider.dart b/lib/components/provider/provider.dart
index 0c69ecd..f56f28f 100644
--- a/lib/components/provider/provider.dart
+++ b/lib/components/provider/provider.dart
@@ -5,7 +5,18 @@ Theme useTheme(BuildContext context) {
   return context.watch<SkynexUIProvider>().theme;
 }
 
+Breakpoints getActiveBreakpoint(BuildContext context) {
+  return Provider.of<SkynexUIProvider>(context).getActiveBreakpoint(context);
+}
+
 class SkynexUIProvider extends ChangeNotifier {
   final Theme _theme = Theme();
   Theme get theme => _theme;
+
+  Breakpoints getActiveBreakpoint(BuildContext context) {
+    var screenSize = MediaQuery.of(context).size.width;
+    var activeBreakpoint = getCurrentBreakpoint(screenSize);
+
+    return activeBreakpoint;
+  }
 }
diff --git a/lib/components/text/text.dart b/lib/components/text/text.dart
index 129948d..ac8038d 100644
--- a/lib/components/text/text.dart
+++ b/lib/components/text/text.dart
@@ -15,6 +15,7 @@ class Text extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Box(
+      styleSheet: styleSheet,
       children: [
         flutter.Text(
           data,
diff --git a/lib/core/stylesheet/stylesheet.dart b/lib/core/stylesheet/stylesheet.dart
index c3a0b42..1b958bc 100644
--- a/lib/core/stylesheet/stylesheet.dart
+++ b/lib/core/stylesheet/stylesheet.dart
@@ -1,5 +1,4 @@
 import 'package:skynexui_components/core/breakpoints/breakpoints.dart';
-import 'package:flutter/material.dart';
 
 const Map<Breakpoints, String?> defaultStringEmptyValue = {
   Breakpoints.xs: null,
@@ -22,78 +21,42 @@ const Map<Breakpoints, double?> defaultDoubleEmptyValue = {
 
 class StyleSheet {
 // %%[CODER_START]:StyleSheet_attributes%%
-  final Map<Breakpoints, double?> paddingRight;
-  final Map<Breakpoints, double?> paddingLeft;
-  final Map<Breakpoints, double?> paddingTop;
-  final Map<Breakpoints, double> padding;
-  final Map<Breakpoints, String?> backgroundColor;
+  final Map<Breakpoints,double?> marginHorizontal;
+  final Map<Breakpoints,double?> marginVertical;
+  final Map<Breakpoints,double?> marginBottom;
+  final Map<Breakpoints,double?> marginRight;
+  final Map<Breakpoints,double?> marginLeft;
+  final Map<Breakpoints,double?> marginTop;
+  final Map<Breakpoints,double> margin;
+  final Map<Breakpoints,double?> paddingHorizontal;
+  final Map<Breakpoints,double?> paddingVertical;
+  final Map<Breakpoints,double?> paddingBottom;
+  final Map<Breakpoints,double?> paddingRight;
+  final Map<Breakpoints,double?> paddingLeft;
+  final Map<Breakpoints,double?> paddingTop;
+  final Map<Breakpoints,double> padding;
+  final Map<Breakpoints,String?> backgroundColor;
+  final Map<Breakpoints,String?> color; 
 // %%[CODER_END]:StyleSheet_attributes%%
-  final double? width;
-  final double? height;
-  final Map<Breakpoints, Color> color;
-  final Map<Breakpoints, double?> paddingBottom;
-  final Map<Breakpoints, double?> paddingVertical;
-  final Map<Breakpoints, double?> paddingHorizontal;
-  final Map<Breakpoints, double> margin;
-  final Map<Breakpoints, double?> marginTop;
-  final Map<Breakpoints, double?> marginLeft;
-  final Map<Breakpoints, double?> marginRight;
-  final Map<Breakpoints, double?> marginBottom;
-  final Map<Breakpoints, double?> marginVertical;
-  final Map<Breakpoints, double?> marginHorizontal;
-  final Map<Breakpoints, double> borderRadius;
-  final Map<Breakpoints, double?> borderRadiusBottomLeft;
-  final Map<Breakpoints, double?> borderRadiusBottomRight;
-  final Map<Breakpoints, String?> as;
-  final Map<Breakpoints, String?> position;
-  final Map<Breakpoints, double?> top;
-  final Map<Breakpoints, double?> right;
-  final Map<Breakpoints, double?> bottom;
-  final Map<Breakpoints, double?> left;
-  final Map<Breakpoints, int?> flex;
-  // mainAxisAlignment:  "center|start|end|spaceBetween|spaceAround|spaceEvenly" [MainAxisAlignment],
-  final Map<Breakpoints, String> mainAxisAlignment;
-  // crossAxisAlignment: "stretch|start|end|center"                              [CrossAxisAlignment],
-  final Map<Breakpoints, String> crossAxisAlignment;
-
-  // ===============
 
   const StyleSheet({
-    this.width,
-    this.height,
-    this.backgroundColor = defaultStringEmptyValue,
-    this.color = const {
-      Breakpoints.xs: Colors.black,
-    },
-    this.padding = defaultDoubleZeroValue,
-    this.paddingTop = defaultDoubleEmptyValue,
-    this.paddingLeft = defaultDoubleEmptyValue,
-    this.paddingRight = defaultDoubleEmptyValue,
-    this.paddingBottom = defaultDoubleEmptyValue,
-    this.paddingVertical = defaultDoubleEmptyValue,
-    this.paddingHorizontal = defaultDoubleEmptyValue,
-    this.margin = defaultDoubleZeroValue,
-    this.marginTop = defaultDoubleEmptyValue,
-    this.marginLeft = defaultDoubleEmptyValue,
-    this.marginRight = defaultDoubleEmptyValue,
-    this.marginBottom = defaultDoubleEmptyValue,
-    this.marginVertical = defaultDoubleEmptyValue,
+// %%[CODER_START]:StyleSheet_constructor%%
     this.marginHorizontal = defaultDoubleEmptyValue,
-    this.borderRadius = defaultDoubleZeroValue,
-    this.borderRadiusBottomLeft = defaultDoubleEmptyValue,
-    this.borderRadiusBottomRight = defaultDoubleEmptyValue,
-    this.position = defaultStringEmptyValue,
-    this.top = defaultDoubleEmptyValue,
-    this.right = defaultDoubleEmptyValue,
-    this.bottom = defaultDoubleEmptyValue,
-    this.left = defaultDoubleEmptyValue,
-    this.as = defaultStringEmptyValue,
-    this.flex = defaultIntEmptyValue,
-    this.mainAxisAlignment = const {
-      Breakpoints.xs: 'start',
-    },
-    this.crossAxisAlignment = const {
-      Breakpoints.xs: 'start',
-    },
+    this.marginVertical = defaultDoubleEmptyValue,
+    this.marginBottom = defaultDoubleEmptyValue,
+    this.marginRight = defaultDoubleEmptyValue,
+    this.marginLeft = defaultDoubleEmptyValue,
+    this.marginTop = defaultDoubleEmptyValue,
+    this.margin = defaultDoubleZeroValue,
+    this.paddingHorizontal = defaultDoubleEmptyValue,
+    this.paddingVertical = defaultDoubleEmptyValue,
+    this.paddingBottom = defaultDoubleEmptyValue,
+    this.paddingRight = defaultDoubleEmptyValue,
+    this.paddingLeft = defaultDoubleEmptyValue,
+    this.paddingTop = defaultDoubleEmptyValue,
+    this.padding = defaultDoubleZeroValue,
+    this.backgroundColor = defaultStringEmptyValue,
+    this.color = defaultStringEmptyValue, 
+// %%[CODER_END]:StyleSheet_constructor%%
   });
 }
diff --git a/lib/core/stylesheet/stylesheet.json b/lib/core/stylesheet/stylesheet.json
index ac2319b..45d25be 100644
--- a/lib/core/stylesheet/stylesheet.json
+++ b/lib/core/stylesheet/stylesheet.json
@@ -1,4 +1,8 @@
 {
+  "color": {
+    "type": "String?",
+    "default": "defaultStringEmptyValue"
+  },
   "backgroundColor": {
     "type": "String?",
     "default": "defaultStringEmptyValue"
@@ -18,5 +22,45 @@
   "paddingRight": {
     "type": "double?",
     "default": "defaultDoubleEmptyValue"
+  },
+  "paddingBottom": {
+    "type": "double?",
+    "default": "defaultDoubleEmptyValue"
+  },
+  "paddingVertical": {
+    "type": "double?",
+    "default": "defaultDoubleEmptyValue"
+  },
+  "paddingHorizontal": {
+    "type": "double?",
+    "default": "defaultDoubleEmptyValue"
+  },
+  "margin": {
+    "type": "double",
+    "default": "defaultDoubleZeroValue"
+  },
+  "marginTop": {
+    "type": "double?",
+    "default": "defaultDoubleEmptyValue"
+  },
+  "marginLeft": {
+    "type": "double?",
+    "default": "defaultDoubleEmptyValue"
+  },
+  "marginRight": {
+    "type": "double?",
+    "default": "defaultDoubleEmptyValue"
+  },
+  "marginBottom": {
+    "type": "double?",
+    "default": "defaultDoubleEmptyValue"
+  },
+  "marginVertical": {
+    "type": "double?",
+    "default": "defaultDoubleEmptyValue"
+  },
+  "marginHorizontal": {
+    "type": "double?",
+    "default": "defaultDoubleEmptyValue"
   }
 }
diff --git a/lib/core/stylesheet/stylesheet.ts b/lib/core/stylesheet/stylesheet.ts
index f3ca6aa..cd0de83 100644
--- a/lib/core/stylesheet/stylesheet.ts
+++ b/lib/core/stylesheet/stylesheet.ts
@@ -4,11 +4,22 @@ type ResponsiveProperty<Type> = Partial<Record<Breakpoints, Type>>;
 
 export interface StyleSheet {
   // %%[CODER_START]:StyleSheet_attributes%%
+  marginHorizontal?: ResponsiveProperty<number | string> | string;
+  marginVertical?: ResponsiveProperty<number | string> | string;
+  marginBottom?: ResponsiveProperty<number | string> | string;
+  marginRight?: ResponsiveProperty<number | string> | string;
+  marginLeft?: ResponsiveProperty<number | string> | string;
+  marginTop?: ResponsiveProperty<number | string> | string;
+  margin?: ResponsiveProperty<number | string> | string;
+  paddingHorizontal?: ResponsiveProperty<number | string> | string;
+  paddingVertical?: ResponsiveProperty<number | string> | string;
+  paddingBottom?: ResponsiveProperty<number | string> | string;
   paddingRight?: ResponsiveProperty<number | string> | string;
   paddingLeft?: ResponsiveProperty<number | string> | string;
   paddingTop?: ResponsiveProperty<number | string> | string;
   padding?: ResponsiveProperty<number | string> | string;
   backgroundColor?: ResponsiveProperty<string> | string;
+  color?: ResponsiveProperty<string> | string;
   // %%[CODER_END]:StyleSheet_attributes%%
   srOnly?: boolean;
   borderStyle?: string;
@@ -26,17 +37,9 @@ export interface StyleSheet {
   cursor?: ResponsiveProperty<string> | string;
   display?: ResponsiveProperty<string> | string;
   maxWidth?: ResponsiveProperty<string> | string;
-  color?: ResponsiveProperty<string> | string;
   border?: ResponsiveProperty<string> | string;
   borderWidth?: ResponsiveProperty<string> | string;
   borderColor?: ResponsiveProperty<string> | string;
-  margin?: ResponsiveProperty<number | string> | string;
-  marginLeft?: ResponsiveProperty<number | string> | string;
-  marginRight?: ResponsiveProperty<number | string> | string;
-  marginBottom?: ResponsiveProperty<number | string> | string;
-  marginTop?: ResponsiveProperty<number | string> | string;
-  marginHorizontal?: ResponsiveProperty<number | string> | string;
-  marginVertical?: ResponsiveProperty<number | string> | string;
   opacity?: ResponsiveProperty<number | string> | string;
   flex?: ResponsiveProperty<number> | number;
   textAlign?: ResponsiveProperty<string> | string;
diff --git a/lib/core/theme/colors/theme_colors.dart b/lib/core/theme/colors/theme_colors.dart
index d6d2f95..611f0d0 100644
--- a/lib/core/theme/colors/theme_colors.dart
+++ b/lib/core/theme/colors/theme_colors.dart
@@ -39,7 +39,7 @@ ThemeColorSet neutralDefault = ThemeColorSet(
   x700: skynexUIBaseTheme["colors"]!["neutral"]!["x700"] as String,
   x800: skynexUIBaseTheme["colors"]!["neutral"]!["x800"] as String,
   x900: skynexUIBaseTheme["colors"]!["neutral"]!["x900"] as String,
-  x999: skynexUIBaseTheme["colors"]!["neutral"]!["x000"] as String,
+  x999: skynexUIBaseTheme["colors"]!["neutral"]!["x999"] as String,
 );
 
 ThemeColorSet positiveDefault = ThemeColorSet(
diff --git a/scripts/coder/coder.js b/scripts/coder/coder.js
index 4de50d6..4d48a60 100644
--- a/scripts/coder/coder.js
+++ b/scripts/coder/coder.js
@@ -5,3 +5,4 @@ console.log('[Coder] running...');
 const stylesheetFile = require('./files/stylesheet');
 
 stylesheetFile.generators.StyleSheet_attributes();
+stylesheetFile.generators.StyleSheet_constructor();
diff --git a/scripts/coder/core/core.js b/scripts/coder/core/core.js
index c72b2ee..9c058cd 100644
--- a/scripts/coder/core/core.js
+++ b/scripts/coder/core/core.js
@@ -44,7 +44,7 @@ module.exports = {
     );
     fileOutput = fileOutput.replace(
       REGEX_CODER_CLEAR,
-      `$1 \n// %%[CODER_END]:StyleSheet_attributes%%`
+      `$1 \n// %%[CODER_END]:${name}%%`
     );
 
     Object.entries(contract).forEach(([key, value], index) => {
diff --git a/scripts/coder/files/stylesheet.js b/scripts/coder/files/stylesheet.js
index 94e25fd..19c89f3 100644
--- a/scripts/coder/files/stylesheet.js
+++ b/scripts/coder/files/stylesheet.js
@@ -4,13 +4,23 @@ const core = require('../core/core');
 const path = './lib/core/stylesheet';
 
 const generators = {
+  StyleSheet_constructor() {
+    const contract = {
+      name: 'StyleSheet_constructor',
+      contract: core.readFile(`${path}/stylesheet.json`, 'json'),
+    };
+
+    core.applyContract(contract, `${path}/stylesheet.dart`, ([name, value]) => {
+      return `    this.${name} = ${value.default},`;
+    });
+  },
   StyleSheet_attributes() {
     const contract = {
       name: 'StyleSheet_attributes',
       contract: core.readFile(`${path}/stylesheet.json`, 'json'),
     };
     core.applyContract(contract, `${path}/stylesheet.dart`, ([name, value]) => {
-      return `final Map<Breakpoints,${value.type}> ${name};`;
+      return `  final Map<Breakpoints,${value.type}> ${name};`;
     });
 
     core.applyContract(contract, `${path}/stylesheet.ts`, ([name, value]) => {