diff --git a/.size-snapshot.json b/.size-snapshot.json
index a8269c307..afe1dad08 100644
--- a/.size-snapshot.json
+++ b/.size-snapshot.json
@@ -1,137 +1,109 @@
 {
   "bundle.js": {
-    "bundled": 827878,
-    "minified": 759096,
-    "gzipped": 90513
+    "bundled": 818457,
+    "minified": 751998,
+    "gzipped": 89501
   },
   "bundle.umd.js": {
-    "bundled": 837576,
-    "minified": 734730,
-    "gzipped": 86642
+    "bundled": 827928,
+    "minified": 728400,
+    "gzipped": 85626
   },
-  "icons/icons/arrow.js": {
-    "bundled": 209,
-    "minified": 177,
-    "gzipped": 148,
-    "treeshaked": {
-      "rollup": {
-        "code": 66,
-        "import_statements": 66
-      },
-      "webpack": {
-        "code": 1087
-      }
-    }
-  },
-  "utils/colors/index.js": {
-    "bundled": 166,
-    "minified": 129,
-    "gzipped": 117,
-    "treeshaked": {
-      "rollup": {
-        "code": 19,
-        "import_statements": 19
-      },
-      "webpack": {
-        "code": 1003
-      }
-    }
-  },
-  "constants/breakpoints/index.js": {
-    "bundled": 232,
-    "minified": 200,
-    "gzipped": 158,
+  "constants/zScale/index.js": {
+    "bundled": 234,
+    "minified": 94,
+    "gzipped": 100,
     "treeshaked": {
       "rollup": {
-        "code": 107,
-        "import_statements": 57
+        "code": 0,
+        "import_statements": 0
       },
       "webpack": {
-        "code": 1101
+        "code": 951
       }
     }
   },
-  "shared-components/button/components/linkButton/style.js": {
-    "bundled": 1745,
-    "minified": 1496,
-    "gzipped": 860,
+  "utils/shouldShowForEnvironment/index.js": {
+    "bundled": 431,
+    "minified": 275,
+    "gzipped": 185,
     "treeshaked": {
       "rollup": {
-        "code": 41,
-        "import_statements": 41
+        "code": 0,
+        "import_statements": 0
       },
       "webpack": {
-        "code": 1062
+        "code": 951
       }
     }
   },
-  "icons/icons/arrowLeftIcon.js": {
-    "bundled": 257,
-    "minified": 225,
-    "gzipped": 154,
+  "constants/fonts/primary.js": {
+    "bundled": 338,
+    "minified": 321,
+    "gzipped": 234,
     "treeshaked": {
       "rollup": {
-        "code": 74,
-        "import_statements": 74
+        "code": 0,
+        "import_statements": 0
       },
       "webpack": {
-        "code": 1095
+        "code": 951
       }
     }
   },
-  "icons/icons/circleSolidIcon.js": {
-    "bundled": 269,
-    "minified": 237,
-    "gzipped": 153,
+  "constants/fonts/secondary.js": {
+    "bundled": 347,
+    "minified": 330,
+    "gzipped": 240,
     "treeshaked": {
       "rollup": {
-        "code": 76,
-        "import_statements": 76
+        "code": 0,
+        "import_statements": 0
       },
       "webpack": {
-        "code": 1097
+        "code": 951
       }
     }
   },
-  "icons/icons/chevronIcon.js": {
-    "bundled": 245,
-    "minified": 213,
-    "gzipped": 153,
+  "constants/spacer/index.js": {
+    "bundled": 360,
+    "minified": 205,
+    "gzipped": 129,
     "treeshaked": {
       "rollup": {
-        "code": 72,
-        "import_statements": 72
+        "code": 0,
+        "import_statements": 0
       },
       "webpack": {
-        "code": 1093
+        "code": 951
       }
     }
   },
-  "icons/icons/arrowRightIcon.js": {
-    "bundled": 263,
-    "minified": 231,
-    "gzipped": 156,
+  "constants/progressBarStatus/index.js": {
+    "bundled": 128,
+    "minified": 111,
+    "gzipped": 99,
     "treeshaked": {
       "rollup": {
-        "code": 75,
-        "import_statements": 75
+        "code": 0,
+        "import_statements": 0
       },
       "webpack": {
-        "code": 1096
+        "code": 951
       }
     }
   },
-  "constants/themes/primaryTheme.js": {
-    "bundled": 345,
-    "minified": 306,
-    "gzipped": 182,
+  "constants/animation/index.js": {
+    "bundled": 72,
+    "minified": 63,
+    "gzipped": 70,
     "treeshaked": {
       "rollup": {
-        "code": 97,
-        "import_statements": 97
+        "code": 0,
+        "import_statements": 0
       },
       "webpack": {
-        "code": 1207
+        "code": 951
       }
     }
   },
@@ -149,87 +121,101 @@
       }
     }
   },
-  "icons/icons/crossIcon.js": {
-    "bundled": 233,
-    "minified": 201,
-    "gzipped": 151,
+  "utils/throwOnUndefinedProperty/index.js": {
+    "bundled": 531,
+    "minified": 245,
+    "gzipped": 179,
     "treeshaked": {
       "rollup": {
-        "code": 70,
-        "import_statements": 70
+        "code": 0,
+        "import_statements": 0
       },
       "webpack": {
-        "code": 1091
+        "code": 951
       }
     }
   },
-  "utils/accessibility/useResetFocus.js": {
-    "bundled": 735,
-    "minified": 179,
-    "gzipped": 140,
+  "shared-components/radioButton/index.js": {
+    "bundled": 1994,
+    "minified": 1051,
+    "gzipped": 515,
     "treeshaked": {
       "rollup": {
-        "code": 14,
-        "import_statements": 14
+        "code": 369,
+        "import_statements": 230
       },
       "webpack": {
-        "code": 998
+        "code": 1968
       }
     }
   },
-  "icons/icons/checkmarkIcon.js": {
-    "bundled": 257,
-    "minified": 225,
-    "gzipped": 154,
+  "constants/typography/secondaryTypography.js": {
+    "bundled": 396,
+    "minified": 259,
+    "gzipped": 188,
     "treeshaked": {
       "rollup": {
-        "code": 74,
-        "import_statements": 74
+        "code": 0,
+        "import_statements": 0
       },
       "webpack": {
-        "code": 1095
+        "code": 951
       }
     }
   },
-  "constants/themes/secondaryTheme.js": {
-    "bundled": 369,
-    "minified": 330,
-    "gzipped": 183,
+  "shared-components/avatar/index.js": {
+    "bundled": 550,
+    "minified": 389,
+    "gzipped": 256,
     "treeshaked": {
       "rollup": {
-        "code": 103,
-        "import_statements": 103
+        "code": 178,
+        "import_statements": 102
       },
       "webpack": {
-        "code": 1215
+        "code": 1254
       }
     }
   },
-  "icons/icons/errorIcon.js": {
-    "bundled": 233,
-    "minified": 201,
-    "gzipped": 151,
+  "shared-components/avatar/style.js": {
+    "bundled": 1585,
+    "minified": 1420,
+    "gzipped": 953,
     "treeshaked": {
       "rollup": {
-        "code": 70,
-        "import_statements": 70
+        "code": 334,
+        "import_statements": 36
       },
       "webpack": {
-        "code": 1091
+        "code": 1320
       }
     }
   },
-  "shared-components/banner/index.js": {
-    "bundled": 1437,
-    "minified": 911,
-    "gzipped": 440,
+  "icons/icons/checkmarkIcon.js": {
+    "bundled": 257,
+    "minified": 225,
+    "gzipped": 154,
     "treeshaked": {
       "rollup": {
-        "code": 426,
-        "import_statements": 353
+        "code": 74,
+        "import_statements": 74
       },
       "webpack": {
-        "code": 1578
+        "code": 1095
+      }
+    }
+  },
+  "shared-components/button/components/linkButton/style.js": {
+    "bundled": 1745,
+    "minified": 1496,
+    "gzipped": 878,
+    "treeshaked": {
+      "rollup": {
+        "code": 41,
+        "import_statements": 41
+      },
+      "webpack": {
+        "code": 1062
       }
     }
   },
@@ -247,437 +233,437 @@
       }
     }
   },
-  "shared-components/verificationMessages/index.js": {
-    "bundled": 1802,
-    "minified": 942,
-    "gzipped": 462,
+  "constants/breakpoints/index.js": {
+    "bundled": 232,
+    "minified": 200,
+    "gzipped": 158,
     "treeshaked": {
       "rollup": {
-        "code": 367,
-        "import_statements": 312
+        "code": 107,
+        "import_statements": 57
       },
       "webpack": {
-        "code": 1444
+        "code": 1101
       }
     }
   },
-  "shared-components/optionButton/index.js": {
-    "bundled": 2173,
-    "minified": 1429,
-    "gzipped": 621,
+  "shared-components/callout/index.js": {
+    "bundled": 1274,
+    "minified": 588,
+    "gzipped": 344,
     "treeshaked": {
       "rollup": {
-        "code": 507,
-        "import_statements": 365
+        "code": 492,
+        "import_statements": 209
       },
       "webpack": {
-        "code": 1491
+        "code": 1683
       }
     }
   },
-  "shared-components/avatar/index.js": {
-    "bundled": 550,
-    "minified": 389,
-    "gzipped": 256,
+  "constants/typography/index.js": {
+    "bundled": 564,
+    "minified": 427,
+    "gzipped": 248,
     "treeshaked": {
       "rollup": {
-        "code": 178,
-        "import_statements": 102
+        "code": 242,
+        "import_statements": 57
       },
       "webpack": {
-        "code": 1254
+        "code": 1240
       }
     }
   },
-  "shared-components/callout/index.js": {
-    "bundled": 1274,
-    "minified": 588,
-    "gzipped": 344,
+  "icons/icons/arrowLeftIcon.js": {
+    "bundled": 257,
+    "minified": 225,
+    "gzipped": 154,
     "treeshaked": {
       "rollup": {
-        "code": 492,
-        "import_statements": 209
+        "code": 74,
+        "import_statements": 74
       },
       "webpack": {
-        "code": 1683
+        "code": 1095
       }
     }
   },
-  "shared-components/button/constants.js": {
-    "bundled": 603,
-    "minified": 390,
-    "gzipped": 211,
+  "shared-components/button/deprecatedPropsHandler.js": {
+    "bundled": 466,
+    "minified": 339,
+    "gzipped": 213,
     "treeshaked": {
       "rollup": {
-        "code": 48,
-        "import_statements": 48
+        "code": 0,
+        "import_statements": 0
       },
       "webpack": {
-        "code": 1036
+        "code": 951
       }
     }
   },
-  "shared-components/avatar/style.js": {
-    "bundled": 1585,
-    "minified": 1420,
-    "gzipped": 953,
+  "icons/icons/circleSolidIcon.js": {
+    "bundled": 269,
+    "minified": 237,
+    "gzipped": 153,
     "treeshaked": {
-      "rollup": {
-        "code": 334,
-        "import_statements": 36
+      "rollup": {
+        "code": 76,
+        "import_statements": 76
       },
       "webpack": {
-        "code": 1320
+        "code": 1097
       }
     }
   },
-  "shared-components/chip/index.js": {
-    "bundled": 867,
-    "minified": 378,
-    "gzipped": 249,
+  "constants/themes/primaryTheme.js": {
+    "bundled": 345,
+    "minified": 306,
+    "gzipped": 182,
     "treeshaked": {
       "rollup": {
-        "code": 201,
-        "import_statements": 130
+        "code": 97,
+        "import_statements": 97
       },
       "webpack": {
-        "code": 1247
+        "code": 1207
       }
     }
   },
-  "constants/typography/index.js": {
-    "bundled": 564,
-    "minified": 427,
-    "gzipped": 248,
+  "icons/icons/crossIcon.js": {
+    "bundled": 233,
+    "minified": 201,
+    "gzipped": 151,
     "treeshaked": {
       "rollup": {
-        "code": 242,
-        "import_statements": 57
+        "code": 70,
+        "import_statements": 70
       },
       "webpack": {
-        "code": 1240
+        "code": 1091
       }
     }
   },
-  "shared-components/transitions/index.js": {
-    "bundled": 730,
-    "minified": 487,
-    "gzipped": 281,
+  "icons/icons/arrowRightIcon.js": {
+    "bundled": 263,
+    "minified": 231,
+    "gzipped": 156,
     "treeshaked": {
       "rollup": {
-        "code": 155,
-        "import_statements": 121
+        "code": 75,
+        "import_statements": 75
       },
       "webpack": {
-        "code": 1212
+        "code": 1096
       }
     }
   },
-  "constants/spacer/index.js": {
-    "bundled": 360,
-    "minified": 205,
-    "gzipped": 129,
+  "constants/themes/secondaryTheme.js": {
+    "bundled": 369,
+    "minified": 330,
+    "gzipped": 183,
     "treeshaked": {
       "rollup": {
-        "code": 0,
-        "import_statements": 0
+        "code": 103,
+        "import_statements": 103
       },
       "webpack": {
-        "code": 951
+        "code": 1215
       }
     }
   },
-  "constants/progressBarStatus/index.js": {
-    "bundled": 128,
-    "minified": 111,
-    "gzipped": 99,
+  "shared-components/chip/index.js": {
+    "bundled": 867,
+    "minified": 378,
+    "gzipped": 249,
     "treeshaked": {
       "rollup": {
-        "code": 0,
-        "import_statements": 0
+        "code": 201,
+        "import_statements": 130
       },
       "webpack": {
-        "code": 951
+        "code": 1247
       }
     }
   },
-  "constants/typography/primaryTypography.js": {
-    "bundled": 391,
-    "minified": 254,
-    "gzipped": 185,
+  "icons/icons/errorIcon.js": {
+    "bundled": 233,
+    "minified": 201,
+    "gzipped": 151,
     "treeshaked": {
       "rollup": {
-        "code": 0,
-        "import_statements": 0
+        "code": 70,
+        "import_statements": 70
       },
       "webpack": {
-        "code": 951
+        "code": 1091
       }
     }
   },
-  "utils/shouldShowForEnvironment/index.js": {
-    "bundled": 431,
-    "minified": 275,
-    "gzipped": 185,
+  "shared-components/optionButton/index.js": {
+    "bundled": 2173,
+    "minified": 1429,
+    "gzipped": 621,
     "treeshaked": {
       "rollup": {
-        "code": 0,
-        "import_statements": 0
+        "code": 507,
+        "import_statements": 365
       },
       "webpack": {
-        "code": 951
+        "code": 1491
       }
     }
   },
-  "constants/fonts/primary.js": {
-    "bundled": 338,
-    "minified": 321,
-    "gzipped": 234,
+  "shared-components/accordion/index.js": {
+    "bundled": 3291,
+    "minified": 1731,
+    "gzipped": 813,
     "treeshaked": {
       "rollup": {
-        "code": 0,
-        "import_statements": 0
+        "code": 1464,
+        "import_statements": 460
       },
       "webpack": {
-        "code": 951
+        "code": 2768
       }
     }
   },
-  "utils/styles/buttonReset.js": {
-    "bundled": 93,
-    "minified": 86,
-    "gzipped": 93,
+  "shared-components/icon/style.js": {
+    "bundled": 1496,
+    "minified": 1343,
+    "gzipped": 889,
     "treeshaked": {
       "rollup": {
-        "code": 0,
-        "import_statements": 0
+        "code": 61,
+        "import_statements": 61
       },
       "webpack": {
-        "code": 951
+        "code": 1082
       }
     }
   },
-  "constants/typography/secondaryTypography.js": {
-    "bundled": 396,
-    "minified": 259,
-    "gzipped": 188,
+  "shared-components/button/index.js": {
+    "bundled": 3658,
+    "minified": 1977,
+    "gzipped": 804,
     "treeshaked": {
       "rollup": {
-        "code": 0,
-        "import_statements": 0
+        "code": 1626,
+        "import_statements": 608
       },
       "webpack": {
-        "code": 951
+        "code": 2994
       }
     }
   },
-  "shared-components/toggle/index.js": {
-    "bundled": 1804,
-    "minified": 993,
-    "gzipped": 520,
+  "shared-components/button/constants.js": {
+    "bundled": 603,
+    "minified": 390,
+    "gzipped": 211,
     "treeshaked": {
       "rollup": {
-        "code": 302,
-        "import_statements": 268
+        "code": 48,
+        "import_statements": 48
       },
       "webpack": {
-        "code": 1330
+        "code": 1036
       }
     }
   },
-  "constants/zScale/index.js": {
-    "bundled": 234,
-    "minified": 94,
-    "gzipped": 100,
+  "utils/withDeprecationWarning/index.js": {
+    "bundled": 812,
+    "minified": 339,
+    "gzipped": 230,
     "treeshaked": {
       "rollup": {
-        "code": 0,
-        "import_statements": 0
+        "code": 44,
+        "import_statements": 44
       },
       "webpack": {
-        "code": 951
+        "code": 1029
       }
     }
   },
-  "constants/animation/index.js": {
-    "bundled": 72,
-    "minified": 63,
-    "gzipped": 70,
+  "utils/accessibility/useResetFocus.js": {
+    "bundled": 735,
+    "minified": 179,
+    "gzipped": 140,
     "treeshaked": {
       "rollup": {
-        "code": 0,
-        "import_statements": 0
+        "code": 14,
+        "import_statements": 14
       },
       "webpack": {
-        "code": 951
+        "code": 998
       }
     }
   },
-  "constants/fonts/secondary.js": {
-    "bundled": 347,
-    "minified": 330,
-    "gzipped": 240,
+  "shared-components/transitions/index.js": {
+    "bundled": 730,
+    "minified": 487,
+    "gzipped": 281,
     "treeshaked": {
       "rollup": {
-        "code": 0,
-        "import_statements": 0
+        "code": 155,
+        "import_statements": 121
       },
       "webpack": {
-        "code": 951
+        "code": 1212
       }
     }
   },
-  "shared-components/icon/style.js": {
-    "bundled": 1496,
-    "minified": 1343,
-    "gzipped": 889,
+  "utils/colors/index.js": {
+    "bundled": 166,
+    "minified": 129,
+    "gzipped": 117,
     "treeshaked": {
       "rollup": {
-        "code": 61,
-        "import_statements": 61
+        "code": 19,
+        "import_statements": 19
       },
       "webpack": {
-        "code": 1082
+        "code": 1003
       }
     }
   },
-  "utils/throwOnUndefinedProperty/index.js": {
-    "bundled": 531,
-    "minified": 245,
-    "gzipped": 179,
+  "icons/icons/chevronIcon.js": {
+    "bundled": 245,
+    "minified": 213,
+    "gzipped": 153,
     "treeshaked": {
       "rollup": {
-        "code": 0,
-        "import_statements": 0
+        "code": 72,
+        "import_statements": 72
       },
       "webpack": {
-        "code": 951
+        "code": 1093
       }
     }
   },
-  "shared-components/accordion/index.js": {
-    "bundled": 3291,
-    "minified": 1731,
-    "gzipped": 813,
+  "shared-components/button/shared-components/container/index.js": {
+    "bundled": 7040,
+    "minified": 6805,
+    "gzipped": 2030,
     "treeshaked": {
       "rollup": {
-        "code": 1464,
-        "import_statements": 460
+        "code": 887,
+        "import_statements": 190
       },
       "webpack": {
-        "code": 2768
+        "code": 2071
       }
     }
   },
-  "shared-components/loadingSpinner/index.js": {
-    "bundled": 1625,
-    "minified": 802,
-    "gzipped": 368,
+  "shared-components/checkbox/index.js": {
+    "bundled": 2188,
+    "minified": 1077,
+    "gzipped": 531,
     "treeshaked": {
       "rollup": {
-        "code": 239,
-        "import_statements": 194
+        "code": 369,
+        "import_statements": 230
       },
       "webpack": {
-        "code": 1284
+        "code": 2006
       }
     }
   },
-  "shared-components/button/deprecatedPropsHandler.js": {
-    "bundled": 466,
-    "minified": 339,
-    "gzipped": 213,
+  "shared-components/dropdown/desktopDropdown.js": {
+    "bundled": 9417,
+    "minified": 7800,
+    "gzipped": 3383,
     "treeshaked": {
       "rollup": {
-        "code": 0,
-        "import_statements": 0
+        "code": 245,
+        "import_statements": 245
       },
       "webpack": {
-        "code": 951
+        "code": 1469
       }
     }
   },
-  "shared-components/checkbox/index.js": {
-    "bundled": 2188,
-    "minified": 1077,
-    "gzipped": 531,
+  "shared-components/typography/index.js": {
+    "bundled": 59378,
+    "minified": 58060,
+    "gzipped": 3862,
     "treeshaked": {
       "rollup": {
-        "code": 369,
-        "import_statements": 230
+        "code": 3046,
+        "import_statements": 119
       },
       "webpack": {
-        "code": 2006
+        "code": 4232
       }
     }
   },
-  "shared-components/progressBar/index.js": {
-    "bundled": 2005,
-    "minified": 1082,
-    "gzipped": 521,
+  "shared-components/field/index.js": {
+    "bundled": 2775,
+    "minified": 1460,
+    "gzipped": 660,
     "treeshaked": {
       "rollup": {
-        "code": 412,
-        "import_statements": 326
+        "code": 1250,
+        "import_statements": 399
       },
       "webpack": {
-        "code": 1513
+        "code": 2545
       }
     }
   },
-  "utils/withDeprecationWarning/index.js": {
-    "bundled": 812,
-    "minified": 339,
-    "gzipped": 230,
+  "shared-components/toggle/style.js": {
+    "bundled": 6921,
+    "minified": 6691,
+    "gzipped": 2463,
     "treeshaked": {
       "rollup": {
-        "code": 44,
-        "import_statements": 44
+        "code": 735,
+        "import_statements": 126
       },
       "webpack": {
-        "code": 1029
+        "code": 1825
       }
     }
   },
-  "shared-components/typography/index.js": {
-    "bundled": 59378,
-    "minified": 58060,
-    "gzipped": 3862,
+  "_virtual/_rollupPluginBabelHelpers.js": {
+    "bundled": 5593,
+    "minified": 3899,
+    "gzipped": 1264,
     "treeshaked": {
       "rollup": {
-        "code": 3046,
-        "import_statements": 119
+        "code": 0,
+        "import_statements": 0
       },
       "webpack": {
-        "code": 4232
+        "code": 951
       }
     }
   },
-  "shared-components/tooltip/index.js": {
-    "bundled": 5385,
-    "minified": 2521,
-    "gzipped": 1024,
+  "shared-components/dialogModal/index.js": {
+    "bundled": 3417,
+    "minified": 1831,
+    "gzipped": 884,
     "treeshaked": {
       "rollup": {
-        "code": 639,
-        "import_statements": 438
+        "code": 533,
+        "import_statements": 499
       },
       "webpack": {
-        "code": 1686
+        "code": 1543
       }
     }
   },
-  "shared-components/button/shared-components/loader/index.js": {
-    "bundled": 856,
-    "minified": 452,
-    "gzipped": 270,
+  "shared-components/carousel/arrow/style.js": {
+    "bundled": 5005,
+    "minified": 4677,
+    "gzipped": 2054,
     "treeshaked": {
       "rollup": {
-        "code": 55,
-        "import_statements": 55
+        "code": 1000,
+        "import_statements": 122
       },
       "webpack": {
-        "code": 1105
+        "code": 2092
       }
     }
   },
@@ -695,283 +681,311 @@
       }
     }
   },
-  "shared-components/button/shared-components/container/index.js": {
-    "bundled": 7040,
-    "minified": 6805,
-    "gzipped": 2030,
+  "shared-components/tabs/index.js": {
+    "bundled": 1365,
+    "minified": 775,
+    "gzipped": 414,
     "treeshaked": {
       "rollup": {
-        "code": 887,
-        "import_statements": 190
+        "code": 320,
+        "import_statements": 223
       },
       "webpack": {
-        "code": 2071
+        "code": 1366
       }
     }
   },
-  "shared-components/progressBar/style.js": {
-    "bundled": 7851,
-    "minified": 7395,
-    "gzipped": 2196,
+  "shared-components/callout/style.js": {
+    "bundled": 7501,
+    "minified": 7166,
+    "gzipped": 1608,
     "treeshaked": {
       "rollup": {
-        "code": 1495,
-        "import_statements": 258
+        "code": 765,
+        "import_statements": 126
       },
       "webpack": {
-        "code": 2657
+        "code": 1863
       }
     }
   },
-  "shared-components/button/components/textButton/style.js": {
-    "bundled": 1886,
-    "minified": 1743,
-    "gzipped": 1128,
+  "shared-components/dropdown/mobileDropdown.js": {
+    "bundled": 1572,
+    "minified": 749,
+    "gzipped": 420,
     "treeshaked": {
       "rollup": {
-        "code": 548,
-        "import_statements": 126
+        "code": 116,
+        "import_statements": 116
       },
       "webpack": {
-        "code": 1636
+        "code": 1236
       }
     }
   },
-  "shared-components/dropdown/desktopDropdown.js": {
-    "bundled": 9422,
-    "minified": 7805,
-    "gzipped": 3380,
+  "shared-components/carousel/arrow/index.js": {
+    "bundled": 1536,
+    "minified": 829,
+    "gzipped": 371,
+    "treeshaked": {
+      "rollup": {
+        "code": 183,
+        "import_statements": 183
+      },
+      "webpack": {
+        "code": 1350
+      }
+    }
+  },
+  "shared-components/button/shared-components/loader/index.js": {
+    "bundled": 856,
+    "minified": 452,
+    "gzipped": 270,
     "treeshaked": {
       "rollup": {
-        "code": 246,
-        "import_statements": 246
+        "code": 55,
+        "import_statements": 55
       },
       "webpack": {
-        "code": 1474
+        "code": 1105
       }
     }
   },
-  "shared-components/field/index.js": {
-    "bundled": 2775,
-    "minified": 1460,
-    "gzipped": 660,
+  "shared-components/selectorButton/index.js": {
+    "bundled": 10115,
+    "minified": 9113,
+    "gzipped": 2566,
     "treeshaked": {
       "rollup": {
-        "code": 1250,
-        "import_statements": 399
+        "code": 604,
+        "import_statements": 435
       },
       "webpack": {
-        "code": 2545
+        "code": 1659
       }
     }
   },
-  "shared-components/carousel/style.js": {
-    "bundled": 20339,
-    "minified": 19698,
-    "gzipped": 4811,
+  "shared-components/verificationMessages/index.js": {
+    "bundled": 1802,
+    "minified": 942,
+    "gzipped": 462,
     "treeshaked": {
       "rollup": {
-        "code": 3136,
-        "import_statements": 79
+        "code": 367,
+        "import_statements": 312
       },
       "webpack": {
-        "code": 4187
+        "code": 1444
       }
     }
   },
-  "shared-components/accordion/thumbnails/style.js": {
-    "bundled": 11587,
-    "minified": 11311,
-    "gzipped": 2350,
+  "shared-components/verificationMessages/formatMessage/index.js": {
+    "bundled": 527,
+    "minified": 358,
+    "gzipped": 216,
     "treeshaked": {
       "rollup": {
-        "code": 920,
-        "import_statements": 147
+        "code": 60,
+        "import_statements": 60
       },
       "webpack": {
-        "code": 2030
+        "code": 1110
       }
     }
   },
-  "_virtual/_rollupPluginBabelHelpers.js": {
-    "bundled": 5593,
-    "minified": 3899,
-    "gzipped": 1264,
+  "shared-components/loadingSpinner/style.js": {
+    "bundled": 9585,
+    "minified": 9204,
+    "gzipped": 2761,
     "treeshaked": {
       "rollup": {
-        "code": 0,
-        "import_statements": 0
+        "code": 1413,
+        "import_statements": 158
       },
       "webpack": {
-        "code": 951
+        "code": 2481
       }
     }
   },
-  "shared-components/banner/style.js": {
-    "bundled": 14602,
-    "minified": 14062,
-    "gzipped": 3327,
+  "shared-components/button/components/textButton/style.js": {
+    "bundled": 1886,
+    "minified": 1743,
+    "gzipped": 1128,
     "treeshaked": {
       "rollup": {
-        "code": 1593,
-        "import_statements": 282
+        "code": 548,
+        "import_statements": 126
       },
       "webpack": {
-        "code": 2802
+        "code": 1636
       }
     }
   },
-  "shared-components/button/components/textButton/index.js": {
-    "bundled": 1440,
-    "minified": 736,
-    "gzipped": 387,
+  "shared-components/toggle/index.js": {
+    "bundled": 1804,
+    "minified": 993,
+    "gzipped": 520,
     "treeshaked": {
       "rollup": {
-        "code": 267,
-        "import_statements": 235
+        "code": 302,
+        "import_statements": 268
       },
       "webpack": {
-        "code": 1357
+        "code": 1330
       }
     }
   },
-  "shared-components/carousel/index.js": {
-    "bundled": 5328,
-    "minified": 2239,
-    "gzipped": 1017,
+  "shared-components/progressBar/index.js": {
+    "bundled": 2005,
+    "minified": 1082,
+    "gzipped": 521,
     "treeshaked": {
       "rollup": {
-        "code": 1868,
-        "import_statements": 359
+        "code": 412,
+        "import_statements": 326
       },
       "webpack": {
-        "code": 3227
+        "code": 1513
       }
     }
   },
-  "shared-components/accordion/thumbnails/index.js": {
-    "bundled": 1158,
-    "minified": 568,
-    "gzipped": 295,
+  "shared-components/carousel/style.js": {
+    "bundled": 20339,
+    "minified": 19698,
+    "gzipped": 4811,
     "treeshaked": {
       "rollup": {
-        "code": 55,
-        "import_statements": 55
+        "code": 3136,
+        "import_statements": 79
       },
       "webpack": {
-        "code": 1105
+        "code": 4187
+      }
+    }
+  },
+  "utils/helperTransition/index.js": {
+    "bundled": 1617,
+    "minified": 1056,
+    "gzipped": 455,
+    "treeshaked": {
+      "rollup": {
+        "code": 154,
+        "import_statements": 154
+      },
+      "webpack": {
+        "code": 1278
       }
     }
   },
-  "shared-components/accordion/style.js": {
-    "bundled": 36006,
-    "minified": 34950,
-    "gzipped": 4790,
+  "shared-components/tabs/style.js": {
+    "bundled": 5295,
+    "minified": 5081,
+    "gzipped": 2411,
     "treeshaked": {
       "rollup": {
-        "code": 2701,
-        "import_statements": 220
+        "code": 1094,
+        "import_statements": 326
       },
       "webpack": {
-        "code": 3885
+        "code": 2323
       }
     }
   },
-  "constants/boxShadows/index.js": {
-    "bundled": 1688,
-    "minified": 1530,
-    "gzipped": 520,
+  "shared-components/button/components/textButton/index.js": {
+    "bundled": 1440,
+    "minified": 736,
+    "gzipped": 387,
     "treeshaked": {
       "rollup": {
-        "code": 916,
-        "import_statements": 162
+        "code": 267,
+        "import_statements": 235
       },
       "webpack": {
-        "code": 2168
+        "code": 1357
       }
     }
   },
-  "constants/mediaQueries/index.js": {
-    "bundled": 717,
-    "minified": 606,
-    "gzipped": 338,
+  "shared-components/offClickWrapper/index.js": {
+    "bundled": 1252,
+    "minified": 704,
+    "gzipped": 363,
     "treeshaked": {
       "rollup": {
-        "code": 365,
-        "import_statements": 206
+        "code": 153,
+        "import_statements": 108
       },
       "webpack": {
-        "code": 1472
+        "code": 1171
       }
     }
   },
-  "constants/colors/secondary.js": {
-    "bundled": 1490,
-    "minified": 1167,
-    "gzipped": 502,
+  "shared-components/loadingSpinner/index.js": {
+    "bundled": 1625,
+    "minified": 802,
+    "gzipped": 368,
     "treeshaked": {
       "rollup": {
-        "code": 1017,
-        "import_statements": 26
+        "code": 239,
+        "import_statements": 194
       },
       "webpack": {
-        "code": 2011
+        "code": 1284
       }
     }
   },
-  "shared-components/dropdown/mobileDropdown.js": {
-    "bundled": 1572,
-    "minified": 749,
-    "gzipped": 420,
+  "shared-components/dropdown/index.js": {
+    "bundled": 3810,
+    "minified": 1689,
+    "gzipped": 738,
     "treeshaked": {
       "rollup": {
-        "code": 116,
-        "import_statements": 116
+        "code": 496,
+        "import_statements": 275
       },
       "webpack": {
-        "code": 1236
+        "code": 1577
       }
     }
   },
-  "shared-components/radioButton/index.js": {
-    "bundled": 1994,
-    "minified": 1051,
-    "gzipped": 515,
+  "shared-components/accordion/thumbnails/index.js": {
+    "bundled": 1158,
+    "minified": 568,
+    "gzipped": 295,
     "treeshaked": {
       "rollup": {
-        "code": 369,
-        "import_statements": 230
+        "code": 55,
+        "import_statements": 55
       },
       "webpack": {
-        "code": 1968
+        "code": 1105
       }
     }
   },
-  "shared-components/loadingSpinner/style.js": {
-    "bundled": 9585,
-    "minified": 9204,
-    "gzipped": 2761,
+  "constants/mediaQueries/index.js": {
+    "bundled": 717,
+    "minified": 606,
+    "gzipped": 338,
     "treeshaked": {
       "rollup": {
-        "code": 1413,
-        "import_statements": 158
+        "code": 365,
+        "import_statements": 206
       },
       "webpack": {
-        "code": 2481
+        "code": 1472
       }
     }
   },
-  "shared-components/button/index.js": {
-    "bundled": 3730,
-    "minified": 1995,
-    "gzipped": 813,
+  "constants/themes/types.js": {
+    "bundled": 440,
+    "minified": 411,
+    "gzipped": 230,
     "treeshaked": {
       "rollup": {
-        "code": 1644,
-        "import_statements": 608
+        "code": 278,
+        "import_statements": 204
       },
       "webpack": {
-        "code": 3012
+        "code": 1385
       }
     }
   },
@@ -989,262 +1003,234 @@
       }
     }
   },
-  "shared-components/dialogModal/index.js": {
-    "bundled": 3417,
-    "minified": 1831,
-    "gzipped": 884,
-    "treeshaked": {
-      "rollup": {
-        "code": 533,
-        "import_statements": 499
-      },
-      "webpack": {
-        "code": 1543
-      }
-    }
-  },
-  "shared-components/verificationMessages/formatMessage/index.js": {
-    "bundled": 527,
-    "minified": 358,
-    "gzipped": 216,
-    "treeshaked": {
-      "rollup": {
-        "code": 60,
-        "import_statements": 60
-      },
-      "webpack": {
-        "code": 1110
-      }
-    }
-  },
-  "shared-components/container/style.js": {
-    "bundled": 17313,
-    "minified": 16568,
-    "gzipped": 2878,
+  "shared-components/optionButton/style.js": {
+    "bundled": 38105,
+    "minified": 36924,
+    "gzipped": 4850,
     "treeshaked": {
       "rollup": {
-        "code": 1322,
-        "import_statements": 201
+        "code": 2620,
+        "import_statements": 273
       },
       "webpack": {
-        "code": 2504
+        "code": 3821
       }
     }
   },
-  "shared-components/toggle/style.js": {
-    "bundled": 6921,
-    "minified": 6691,
-    "gzipped": 2463,
+  "shared-components/progressBar/style.js": {
+    "bundled": 7851,
+    "minified": 7395,
+    "gzipped": 2196,
     "treeshaked": {
       "rollup": {
-        "code": 735,
-        "import_statements": 126
+        "code": 1495,
+        "import_statements": 258
       },
       "webpack": {
-        "code": 1825
+        "code": 2657
       }
     }
   },
-  "shared-components/alert/style.js": {
-    "bundled": 35145,
-    "minified": 34180,
-    "gzipped": 5189,
+  "shared-components/accordion/thumbnails/style.js": {
+    "bundled": 11577,
+    "minified": 11297,
+    "gzipped": 2344,
     "treeshaked": {
       "rollup": {
-        "code": 3041,
-        "import_statements": 390
+        "code": 927,
+        "import_statements": 154
       },
       "webpack": {
-        "code": 4404
+        "code": 2012
       }
     }
   },
-  "shared-components/chip/style.js": {
-    "bundled": 7256,
-    "minified": 6771,
-    "gzipped": 2590,
+  "constants/colors/index.js": {
+    "bundled": 5038,
+    "minified": 4069,
+    "gzipped": 1475,
     "treeshaked": {
       "rollup": {
-        "code": 1300,
-        "import_statements": 172
+        "code": 2904,
+        "import_statements": 182
       },
       "webpack": {
-        "code": 2408
+        "code": 4131
       }
     }
   },
-  "utils/helperTransition/index.js": {
-    "bundled": 1617,
-    "minified": 1056,
-    "gzipped": 455,
+  "shared-components/transitions/style.js": {
+    "bundled": 8240,
+    "minified": 7838,
+    "gzipped": 1877,
     "treeshaked": {
       "rollup": {
-        "code": 154,
-        "import_statements": 154
+        "code": 761,
+        "import_statements": 213
       },
       "webpack": {
-        "code": 1278
+        "code": 1975
       }
     }
   },
   "shared-components/button/components/linkButton/index.js": {
-    "bundled": 2830,
-    "minified": 1432,
-    "gzipped": 651,
+    "bundled": 2758,
+    "minified": 1414,
+    "gzipped": 642,
     "treeshaked": {
       "rollup": {
-        "code": 1138,
+        "code": 1120,
         "import_statements": 414
       },
       "webpack": {
-        "code": 2472
+        "code": 2454
       }
     }
   },
-  "shared-components/dialogModal/style.js": {
-    "bundled": 15808,
-    "minified": 15583,
-    "gzipped": 3598,
+  "constants/colors/secondary.js": {
+    "bundled": 1156,
+    "minified": 991,
+    "gzipped": 442,
     "treeshaked": {
       "rollup": {
-        "code": 1798,
-        "import_statements": 255
+        "code": 841,
+        "import_statements": 26
       },
       "webpack": {
-        "code": 3024
+        "code": 1835
       }
     }
   },
-  "shared-components/tabs/style.js": {
-    "bundled": 5300,
-    "minified": 5086,
-    "gzipped": 2407,
+  "constants/boxShadows/index.js": {
+    "bundled": 1730,
+    "minified": 1572,
+    "gzipped": 530,
     "treeshaked": {
       "rollup": {
-        "code": 1095,
-        "import_statements": 327
+        "code": 918,
+        "import_statements": 164
       },
       "webpack": {
-        "code": 2328
+        "code": 2170
       }
     }
   },
-  "shared-components/tabs/index.js": {
-    "bundled": 1365,
-    "minified": 775,
-    "gzipped": 414,
+  "icons/icons/svgs/CrossIcon.js": {
+    "bundled": 498,
+    "minified": 427,
+    "gzipped": 304,
     "treeshaked": {
       "rollup": {
-        "code": 320,
-        "import_statements": 223
+        "code": 84,
+        "import_statements": 84
       },
       "webpack": {
-        "code": 1366
+        "code": 1141
       }
     }
   },
-  "shared-components/carousel/arrow/index.js": {
-    "bundled": 1536,
-    "minified": 829,
-    "gzipped": 371,
+  "shared-components/chip/style.js": {
+    "bundled": 7239,
+    "minified": 6754,
+    "gzipped": 2593,
     "treeshaked": {
       "rollup": {
-        "code": 183,
-        "import_statements": 183
+        "code": 1295,
+        "import_statements": 172
       },
       "webpack": {
-        "code": 1350
+        "code": 2403
       }
     }
   },
-  "shared-components/offClickWrapper/index.js": {
-    "bundled": 1252,
-    "minified": 704,
-    "gzipped": 363,
+  "shared-components/dialogModal/style.js": {
+    "bundled": 15808,
+    "minified": 15583,
+    "gzipped": 3598,
     "treeshaked": {
       "rollup": {
-        "code": 153,
-        "import_statements": 108
+        "code": 1798,
+        "import_statements": 255
       },
       "webpack": {
-        "code": 1171
+        "code": 3024
       }
     }
   },
-  "shared-components/callout/style.js": {
-    "bundled": 7538,
-    "minified": 7203,
-    "gzipped": 1632,
+  "shared-components/button/components/roundButton/index.js": {
+    "bundled": 3706,
+    "minified": 1962,
+    "gzipped": 805,
     "treeshaked": {
       "rollup": {
-        "code": 770,
-        "import_statements": 126
+        "code": 1535,
+        "import_statements": 623
       },
       "webpack": {
-        "code": 1868
+        "code": 2893
       }
     }
   },
-  "shared-components/dropdown/index.js": {
-    "bundled": 3810,
-    "minified": 1689,
-    "gzipped": 738,
+  "shared-components/accordion/style.js": {
+    "bundled": 36046,
+    "minified": 34990,
+    "gzipped": 4796,
     "treeshaked": {
       "rollup": {
-        "code": 496,
-        "import_statements": 275
+        "code": 2705,
+        "import_statements": 220
       },
       "webpack": {
-        "code": 1577
+        "code": 3889
       }
     }
   },
-  "shared-components/dropdown/style.js": {
-    "bundled": 44185,
-    "minified": 43006,
-    "gzipped": 5906,
+  "shared-components/container/style.js": {
+    "bundled": 17296,
+    "minified": 16551,
+    "gzipped": 2909,
     "treeshaked": {
       "rollup": {
-        "code": 2644,
-        "import_statements": 241
+        "code": 1321,
+        "import_statements": 201
       },
       "webpack": {
-        "code": 3865
+        "code": 2503
       }
     }
   },
-  "shared-components/optionButton/style.js": {
-    "bundled": 38105,
-    "minified": 36924,
-    "gzipped": 4850,
+  "icons/icons/svgs/ArrowRightIcon.js": {
+    "bundled": 475,
+    "minified": 404,
+    "gzipped": 307,
     "treeshaked": {
       "rollup": {
-        "code": 2620,
-        "import_statements": 273
+        "code": 84,
+        "import_statements": 84
       },
       "webpack": {
-        "code": 3821
+        "code": 1141
       }
     }
   },
-  "shared-components/carousel/arrow/style.js": {
-    "bundled": 5005,
-    "minified": 4677,
-    "gzipped": 2054,
+  "shared-components/tooltip/index.js": {
+    "bundled": 5385,
+    "minified": 2521,
+    "gzipped": 1024,
     "treeshaked": {
       "rollup": {
-        "code": 1000,
-        "import_statements": 122
+        "code": 639,
+        "import_statements": 438
       },
       "webpack": {
-        "code": 2092
+        "code": 1686
       }
     }
   },
   "index.js": {
     "bundled": 2185,
     "minified": 2005,
-    "gzipped": 465,
+    "gzipped": 466,
     "treeshaked": {
       "rollup": {
         "code": 1472,
@@ -1255,24 +1241,24 @@
       }
     }
   },
-  "shared-components/selectorButton/index.js": {
-    "bundled": 10115,
-    "minified": 9113,
-    "gzipped": 2566,
+  "shared-components/dropdown/style.js": {
+    "bundled": 44091,
+    "minified": 42912,
+    "gzipped": 5892,
     "treeshaked": {
       "rollup": {
-        "code": 604,
-        "import_statements": 435
+        "code": 2634,
+        "import_statements": 241
       },
       "webpack": {
-        "code": 1659
+        "code": 3855
       }
     }
   },
-  "icons/icons/svgs/ArrowRightIcon.js": {
-    "bundled": 475,
-    "minified": 404,
-    "gzipped": 307,
+  "icons/icons/svgs/ArrowLeftIcon.js": {
+    "bundled": 465,
+    "minified": 394,
+    "gzipped": 300,
     "treeshaked": {
       "rollup": {
         "code": 84,
@@ -1283,24 +1269,10 @@
       }
     }
   },
-  "constants/themes/types.js": {
-    "bundled": 440,
-    "minified": 411,
-    "gzipped": 230,
-    "treeshaked": {
-      "rollup": {
-        "code": 278,
-        "import_statements": 204
-      },
-      "webpack": {
-        "code": 1385
-      }
-    }
-  },
-  "icons/icons/svgs/ArrowLeftIcon.js": {
-    "bundled": 465,
-    "minified": 394,
-    "gzipped": 300,
+  "icons/icons/svgs/Arrow.js": {
+    "bundled": 430,
+    "minified": 359,
+    "gzipped": 281,
     "treeshaked": {
       "rollup": {
         "code": 84,
@@ -1311,52 +1283,52 @@
       }
     }
   },
-  "shared-components/transitions/style.js": {
-    "bundled": 8240,
-    "minified": 7838,
-    "gzipped": 1877,
+  "constants/colors/primary.js": {
+    "bundled": 1146,
+    "minified": 981,
+    "gzipped": 464,
     "treeshaked": {
       "rollup": {
-        "code": 761,
-        "import_statements": 213
+        "code": 841,
+        "import_statements": 26
       },
       "webpack": {
-        "code": 1975
+        "code": 1835
       }
     }
   },
-  "constants/colors/primary.js": {
-    "bundled": 1872,
-    "minified": 1566,
-    "gzipped": 520,
+  "shared-components/field/style.js": {
+    "bundled": 34937,
+    "minified": 34194,
+    "gzipped": 4747,
     "treeshaked": {
       "rollup": {
-        "code": 1214,
-        "import_statements": 52
+        "code": 2496,
+        "import_statements": 254
       },
       "webpack": {
-        "code": 2327
+        "code": 3720
       }
     }
   },
-  "constants/colors/index.js": {
-    "bundled": 5038,
-    "minified": 4069,
-    "gzipped": 1475,
+  "shared-components/carousel/index.js": {
+    "bundled": 5328,
+    "minified": 2239,
+    "gzipped": 1017,
     "treeshaked": {
       "rollup": {
-        "code": 2904,
-        "import_statements": 182
+        "code": 1868,
+        "import_statements": 359
       },
       "webpack": {
-        "code": 4131
+        "code": 3227
       }
     }
   },
   "shared-components/button/shared-components/loader/style.js": {
     "bundled": 6670,
     "minified": 5901,
-    "gzipped": 2570,
+    "gzipped": 2568,
     "treeshaked": {
       "rollup": {
         "code": 1710,
@@ -1367,115 +1339,101 @@
       }
     }
   },
-  "shared-components/selectorButton/style.js": {
-    "bundled": 23656,
-    "minified": 22922,
-    "gzipped": 4162,
-    "treeshaked": {
-      "rollup": {
-        "code": 2157,
-        "import_statements": 172
-      },
-      "webpack": {
-        "code": 3294
-      }
-    }
-  },
-  "shared-components/button/components/roundButton/index.js": {
-    "bundled": 3778,
-    "minified": 1980,
-    "gzipped": 811,
+  "shared-components/button/components/roundButton/style.js": {
+    "bundled": 25574,
+    "minified": 24267,
+    "gzipped": 4798,
     "treeshaked": {
       "rollup": {
-        "code": 1553,
-        "import_statements": 623
+        "code": 594,
+        "import_statements": 186
       },
       "webpack": {
-        "code": 2911
+        "code": 1764
       }
     }
   },
-  "shared-components/field/style.js": {
-    "bundled": 34905,
-    "minified": 34162,
-    "gzipped": 4783,
+  "icons/icons/svgs/ChevronIcon.js": {
+    "bundled": 452,
+    "minified": 381,
+    "gzipped": 285,
     "treeshaked": {
       "rollup": {
-        "code": 2492,
-        "import_statements": 254
+        "code": 84,
+        "import_statements": 84
       },
       "webpack": {
-        "code": 3716
+        "code": 1141
       }
     }
   },
-  "icons/icons/svgs/CrossIcon.js": {
-    "bundled": 498,
-    "minified": 427,
-    "gzipped": 304,
+  "shared-components/icon/index.js": {
+    "bundled": 1924,
+    "minified": 1065,
+    "gzipped": 512,
     "treeshaked": {
       "rollup": {
-        "code": 84,
-        "import_statements": 84
+        "code": 346,
+        "import_statements": 221
       },
       "webpack": {
-        "code": 1141
+        "code": 1933
       }
     }
   },
-  "shared-components/button/components/roundButton/style.js": {
-    "bundled": 28663,
-    "minified": 26957,
-    "gzipped": 5167,
+  "shared-components/selectorButton/style.js": {
+    "bundled": 23656,
+    "minified": 22922,
+    "gzipped": 4162,
     "treeshaked": {
       "rollup": {
-        "code": 594,
-        "import_statements": 186
+        "code": 2157,
+        "import_statements": 172
       },
       "webpack": {
-        "code": 1764
+        "code": 3294
       }
     }
   },
-  "shared-components/icon/index.js": {
-    "bundled": 1924,
-    "minified": 1065,
-    "gzipped": 512,
+  "shared-components/tooltip/style.js": {
+    "bundled": 113561,
+    "minified": 111686,
+    "gzipped": 8309,
     "treeshaked": {
       "rollup": {
-        "code": 346,
-        "import_statements": 221
+        "code": 3213,
+        "import_statements": 162
       },
       "webpack": {
-        "code": 1933
+        "code": 4402
       }
     }
   },
-  "icons/icons/svgs/ErrorIcon.js": {
-    "bundled": 836,
-    "minified": 753,
-    "gzipped": 470,
+  "shared-components/alert/style.js": {
+    "bundled": 35145,
+    "minified": 34180,
+    "gzipped": 5189,
     "treeshaked": {
       "rollup": {
-        "code": 84,
-        "import_statements": 84
+        "code": 3041,
+        "import_statements": 390
       },
       "webpack": {
-        "code": 1141
+        "code": 4404
       }
     }
   },
-  "icons/icons/svgs/Arrow.js": {
-    "bundled": 430,
-    "minified": 359,
-    "gzipped": 281,
+  "shared-components/button/style.js": {
+    "bundled": 35880,
+    "minified": 34012,
+    "gzipped": 6753,
     "treeshaked": {
       "rollup": {
-        "code": 84,
-        "import_statements": 84
+        "code": 4652,
+        "import_statements": 308
       },
       "webpack": {
-        "code": 1141
+        "code": 6094
       }
     }
   },
@@ -1493,10 +1451,10 @@
       }
     }
   },
-  "icons/icons/svgs/CircleSolidIcon.js": {
-    "bundled": 474,
-    "minified": 379,
-    "gzipped": 275,
+  "icons/icons/svgs/ErrorIcon.js": {
+    "bundled": 836,
+    "minified": 753,
+    "gzipped": 470,
     "treeshaked": {
       "rollup": {
         "code": 84,
@@ -1507,10 +1465,10 @@
       }
     }
   },
-  "icons/icons/svgs/ChevronIcon.js": {
-    "bundled": 452,
-    "minified": 381,
-    "gzipped": 285,
+  "icons/icons/svgs/CircleSolidIcon.js": {
+    "bundled": 474,
+    "minified": 379,
+    "gzipped": 275,
     "treeshaked": {
       "rollup": {
         "code": 84,
@@ -1521,31 +1479,31 @@
       }
     }
   },
-  "shared-components/button/style.js": {
-    "bundled": 35866,
-    "minified": 33998,
-    "gzipped": 6763,
+  "shared-components/alert/index.js": {
+    "bundled": 5684,
+    "minified": 2498,
+    "gzipped": 1098,
     "treeshaked": {
       "rollup": {
-        "code": 4650,
-        "import_statements": 308
+        "code": 2019,
+        "import_statements": 636
       },
       "webpack": {
-        "code": 6092
+        "code": 3554
       }
     }
   },
   "shared-components/immersiveModal/style.js": {
-    "bundled": 103152,
-    "minified": 101936,
-    "gzipped": 7724,
+    "bundled": 103147,
+    "minified": 101931,
+    "gzipped": 7727,
     "treeshaked": {
       "rollup": {
-        "code": 4482,
-        "import_statements": 408
+        "code": 4481,
+        "import_statements": 407
       },
       "webpack": {
-        "code": 5865
+        "code": 5860
       }
     }
   },
@@ -1563,45 +1521,73 @@
       }
     }
   },
-  "shared-components/tooltip/style.js": {
-    "bundled": 113561,
-    "minified": 111686,
-    "gzipped": 8309,
+  "icons/icons/svgs/InfoIcon.js": {
+    "bundled": 478,
+    "minified": 407,
+    "gzipped": 307,
     "treeshaked": {
       "rollup": {
-        "code": 3213,
-        "import_statements": 162
+        "code": 84,
+        "import_statements": 84
       },
       "webpack": {
-        "code": 4402
+        "code": 1141
       }
     }
   },
-  "shared-components/alert/index.js": {
-    "bundled": 5684,
-    "minified": 2498,
-    "gzipped": 1098,
+  "shared-components/banner/index.js": {
+    "bundled": 1437,
+    "minified": 911,
+    "gzipped": 440,
     "treeshaked": {
       "rollup": {
-        "code": 2019,
-        "import_statements": 636
+        "code": 426,
+        "import_statements": 353
       },
       "webpack": {
-        "code": 3554
+        "code": 1578
       }
     }
   },
-  "icons/icons/svgs/InfoIcon.js": {
-    "bundled": 478,
-    "minified": 407,
-    "gzipped": 307,
+  "icons/icons/arrow.js": {
+    "bundled": 209,
+    "minified": 177,
+    "gzipped": 148,
     "treeshaked": {
       "rollup": {
-        "code": 84,
-        "import_statements": 84
+        "code": 66,
+        "import_statements": 66
       },
       "webpack": {
-        "code": 1141
+        "code": 1087
+      }
+    }
+  },
+  "constants/typography/primaryTypography.js": {
+    "bundled": 391,
+    "minified": 254,
+    "gzipped": 185,
+    "treeshaked": {
+      "rollup": {
+        "code": 0,
+        "import_statements": 0
+      },
+      "webpack": {
+        "code": 951
+      }
+    }
+  },
+  "shared-components/banner/style.js": {
+    "bundled": 14597,
+    "minified": 14057,
+    "gzipped": 3329,
+    "treeshaked": {
+      "rollup": {
+        "code": 1592,
+        "import_statements": 281
+      },
+      "webpack": {
+        "code": 2797
       }
     }
   }
diff --git a/src/constants/boxShadows/index.ts b/src/constants/boxShadows/index.ts
index f45be726a..b59499dc5 100644
--- a/src/constants/boxShadows/index.ts
+++ b/src/constants/boxShadows/index.ts
@@ -3,17 +3,18 @@
  */
 
 import { transparentize } from '../../utils';
-import COLORS from '../colors';
+// TODO: Add theme support for box shadow
+import PRIMARY_COLORS from '../colors/primary';
 
-const boxShadowColor = `${COLORS.primary}`;
+const boxShadowColor = `${PRIMARY_COLORS.primary}`;
 const boxShadowOverlayColor = '#505050';
 
 export const BASE_CONFIG = {
   clickable: `0px 8px 24px rgba(52, 51, 82, 0.05)`,
   clickableHover: `0px 8px 24px rgba(52, 51, 82, 0.10)`,
   message: `0 12px 20px 0 ${transparentize(boxShadowColor, 0.05)}`,
-  focus: `0px 0px 0px 2px ${COLORS.white}, 0px 0px 0px 4px ${COLORS.primary}`,
-  focusInner: `inset 0px 0px 0px 2px ${COLORS.primary}`,
+  focus: `0px 0px 0px 2px ${PRIMARY_COLORS.white}, 0px 0px 0px 4px ${PRIMARY_COLORS.primary}`,
+  focusInner: `inset 0px 0px 0px 2px ${PRIMARY_COLORS.primary}`,
 } as const;
 
 export const OLD_BASE_CONFIG = {
diff --git a/src/constants/colors/index.ts b/src/constants/colors/index.ts
deleted file mode 100644
index e676a1c65..000000000
--- a/src/constants/colors/index.ts
+++ /dev/null
@@ -1,186 +0,0 @@
-/*
- * Note: Each config is exported separately to be rendered in storybook:
- * https://github.com/PocketDerm/PocketDerm/blob/master/resources/assets/component-library/stories/colors/index.js#L5
- */
-
-import PropTypes from 'prop-types';
-
-import { withDeprecationWarning } from '../../utils';
-
-const DEFAULT = '#706D87';
-const DEFAULT_BACKGROUND = '#ededf0';
-const DEFAULT_BORDER = '#e1e0e6';
-
-export const brandColors = {
-  // Primary 1
-  purple100: '#332e54',
-  purple85: '#524D6E',
-  purple70: DEFAULT,
-  purple30: '#c3c0cd',
-  purple15: DEFAULT_BORDER,
-  purple10: DEFAULT_BACKGROUND,
-  purple4: '#f8f8fa',
-
-  // Primary 2
-  lavender100: '#a6a1e2',
-  lavender80: '#b8b4e8',
-  lavender60: '#cac7ee',
-  lavender10: '#efeef7',
-
-  // Secondary
-  brown: '#b76706',
-  green: '#6c9d4b',
-  greenLight: '#cad1b4',
-  peach: '#efd4c7',
-  red: '#ff5e4d',
-
-  // Status
-  statusGreen: '#2B6E33',
-  statusGreenBackground: '#EAF1EB',
-  statusGreenBorder: '#DFE9E0',
-  statusPurple: '#554CB3',
-  statusPurpleBackground: '#EEEDF7',
-  statusPurpleBorder: '#E5E3F3',
-  statusRed: '#BD200F',
-  statusRedBackground: '#F7EAE8',
-  statusRedBorder: '#F3DEDC',
-  statusGrey: DEFAULT,
-  statusGreyBackground: DEFAULT_BACKGROUND,
-  statusGreyBorder: DEFAULT_BORDER,
-
-  // Misc
-  black: '#000000',
-  white: '#ffffff',
-  yellow: '#eed153',
-  facebookBlue: '#305c99',
-} as const;
-
-export const legacyColors = {
-  charcoal: '#353a39',
-  grey1: '#999999', // numbers go from darkest to lightest
-  orange: '#fc7b65',
-  teal: '#d5e9e5',
-  yellowLight: '#f4f2b0',
-  purple80: '#5C5876',
-  purple60: '#858298',
-} as const;
-
-export const colorAliases = {
-  // Legacy
-  purple: brandColors.purple100,
-  purpleTint1: brandColors.purple85,
-  purpleTint2: brandColors.purple70,
-
-  // brand colors
-  primary: brandColors.purple100,
-  primaryTint1: brandColors.purple85,
-  primaryTint2: brandColors.purple70,
-  primaryTint3: brandColors.purple30,
-  primaryTint4: brandColors.purple15,
-  secondary: brandColors.lavender100,
-  tertiary: brandColors.purple4,
-
-  // general colors
-  success: brandColors.statusGreen,
-  successBackground: brandColors.statusGreenBackground,
-  successBorder: brandColors.statusGreenBorder,
-  info: brandColors.statusPurple,
-  infoBackground: brandColors.statusPurpleBackground,
-  infoBorder: brandColors.statusPurpleBorder,
-  error: brandColors.statusRed,
-  errorBackground: brandColors.statusRedBackground,
-  errorBorder: brandColors.statusRedBorder,
-  default: brandColors.purple70,
-  defaultBackground: brandColors.purple10,
-  defaultBorder: brandColors.purple15,
-  accent: brandColors.red,
-  disabled: brandColors.purple10,
-  failure: brandColors.red,
-  hover: brandColors.purple4,
-  warning: legacyColors.yellowLight,
-
-  // ui colors
-  background: brandColors.purple4,
-  backgroundDark: brandColors.purple4,
-  border: brandColors.purple10,
-  divider: brandColors.purple10,
-
-  // form colors
-  radioBorder: brandColors.purple30,
-  radioBorderSelected: brandColors.lavender100,
-
-  // typography
-  textMuted: brandColors.purple70,
-  textGhost: brandColors.purple30,
-  textDisabled: brandColors.purple30,
-
-  // overlay
-  overlay: 'rgba(45, 45, 48, 0.7)',
-  overlayHidden: 'rgba(45, 45, 48, 0)',
-  overlaySolid: 'rgba(45, 45, 48, 1)',
-  overlayTransition: 'rgba(45, 45, 48, 0.3)',
-} as const;
-
-export const postcardColors = {
-  postcardSocialBg: '#f2f2f2',
-  postcardWhite: brandColors.purple4,
-  postcardGreen: '#b8dca6',
-  postcardBlue: '#cae9f1',
-  postcardNude: '#e0c2b1',
-  postcardPeach: '#ffd3b0',
-  postcardOrange: legacyColors.orange,
-  postcardBlack: '#414141',
-  postcardGrey: '#bfc6cb',
-  postcardYellow: brandColors.yellow,
-} as const;
-
-// Dont change these keys -- will affect treatment page guide colors
-export const guideColors = {
-  sunscreenGuide: '#fcf4d5',
-  bigZitsGuide: '#f3d7be',
-  birthControlGuide: '#d0eae5',
-  oilySkinGuide: '#bdc5cb',
-  dietGuide: '#efd5ca',
-  drySkinGuide: '#f3f1a4',
-  makeupGuide: '#f7a9b7',
-  azelaicAcidGuide: '#9ddcc5',
-  vitaminCGuide: '#f5c065',
-  tretinoinGuide: '#d2c8b0',
-  niacinamideGuide: '#f2a486',
-  clindamycinGuide: '#bad383',
-  zincPyrithioneGuide: '#83c6e3',
-  ourFavoriteMoisturizersGuide: '#a7a0cf',
-  recommendedCleansersGuide: '#cad1b5',
-} as const;
-
-const sharedColors = {
-  ...brandColors,
-  ...colorAliases,
-  ...postcardColors,
-  ...guideColors,
-} as const;
-
-const colorsCompilation = {
-  ...sharedColors,
-  ...legacyColors,
-} as const;
-
-const deprecatedProperties = {
-  purple80: 'purple80 is deprecated. Use purple85 instead',
-  purple60: 'purple60 is deprecated. Use purple70 instead',
-} as const;
-
-// Do not include deprecated properties in PropTypes or it will trigger warning
-// eslint-disable-next-line
-const { purple80, purple60, ...allOtherLegacyColors } = legacyColors;
-
-const NON_DEPRECATED_COLORS = {
-  ...sharedColors,
-  ...allOtherLegacyColors,
-} as const;
-
-export const COLORS_PROP_TYPES = PropTypes.oneOf(
-  Object.values(NON_DEPRECATED_COLORS),
-);
-
-export default withDeprecationWarning(colorsCompilation, deprecatedProperties);
diff --git a/src/constants/colors/primary.ts b/src/constants/colors/primary.ts
index 966a42d89..2abc2dda0 100644
--- a/src/constants/colors/primary.ts
+++ b/src/constants/colors/primary.ts
@@ -1,65 +1,41 @@
 import PropTypes from 'prop-types';
 
-import COLORS from '.';
-
 const PRIMARY_COLORS = {
-  // brand colors
-  primary: COLORS.purple100,
-  primaryTint1: COLORS.purple85,
-  primaryTint2: COLORS.purple70,
-  primaryTint3: COLORS.purple30,
-  primaryTint4: COLORS.purple15,
-  secondary: COLORS.lavender100,
-  secondaryTint1: COLORS.lavender80,
-  secondaryTint2: COLORS.lavender60,
-  secondaryTint3: COLORS.lavender10,
-  secondaryTint4: COLORS.lavender10,
-  tertiary: COLORS.purple4,
-  tertiaryTint1: COLORS.purple4,
-  tertiaryTint2: COLORS.purple4,
-  tertiaryTint3: COLORS.purple4,
-  tertiaryTint4: COLORS.purple4,
-
-  // general colors
-  success: COLORS.statusGreen,
-  successBackground: COLORS.statusGreenBackground,
-  successBorder: COLORS.statusGreenBorder,
-  info: COLORS.statusPurple,
-  infoBackground: COLORS.statusPurpleBackground,
-  infoBorder: COLORS.statusPurpleBorder,
-  error: COLORS.statusRed,
-  errorBackground: COLORS.statusRedBackground,
-  errorBorder: COLORS.statusRedBorder,
-  default: COLORS.purple70,
-  defaultBackground: COLORS.purple10,
-  defaultBorder: COLORS.purple15,
-  accent: COLORS.red,
-  disabled: COLORS.purple10,
-  failure: COLORS.red,
-  hover: COLORS.purple4,
-  warning: COLORS.yellowLight,
-
-  // ui colors
-  background: COLORS.purple4,
-  backgroundDark: COLORS.purple4,
-  border: COLORS.purple10,
-  divider: COLORS.purple10,
-
-  // form colors
-  radioBorder: COLORS.purple30,
-  radioBorderSelected: COLORS.lavender100,
-
-  // typography
-  textMuted: COLORS.purple70,
-  textGhost: COLORS.purple30,
-  textDisabled: COLORS.purple30,
-
-  // overlay
+  primary: '#332E54',
+  primaryTint1: '#524D6E',
+  primaryTint2: '#706D87',
+  primaryTint3: '#C3C0CD',
+  primaryTint4: '#E1E0E6',
+  secondary: '#A6A1E2',
+  secondaryTint1: '#B8B4E8',
+  secondaryTint2: '#CAC7EE',
+  secondaryTint3: '#EFEEF7',
+  secondaryTint4: '#EFEEF7',
+  tertiary: '#F8F8FA',
+  tertiaryTint1: '#F8F8FA',
+  tertiaryTint2: '#F8F8FA',
+  tertiaryTint3: '#F8F8FA',
+  tertiaryTint4: '#F8F8FA',
+  default: '#706D87',
+  defaultLight: '#EDEDF0',
+  defaultBorder: '#E1E0E6',
+  success: '#2B6E33',
+  successLight: '#EAF1EB',
+  successBorder: '#DFE9E0',
+  error: '#BD200F',
+  errorLight: '#F7EAE8',
+  errorBorder: '#F3DEDC',
+  info: '#554CB3',
+  infoLight: '#EEEDF7',
+  infoBorder: '#E5E3F3',
+  background: '#F8F8FA',
+  backgroundDark: '#F8F8FA',
   overlay: 'rgba(45, 45, 48, 0.7)',
-  overlaySolid: 'rgba(45, 45, 48, 1)',
-
-  black: COLORS.black,
-  white: COLORS.white,
+  overlaySolid: '#2D2D30',
+  border: '#EDEDF0',
+  textDisabled: '#C3C0CD',
+  black: '#000000',
+  white: '#FFFFFF',
   transparent: 'transparent',
 } as const;
 
diff --git a/src/constants/colors/secondary.ts b/src/constants/colors/secondary.ts
index c2681477d..6ba1518f6 100644
--- a/src/constants/colors/secondary.ts
+++ b/src/constants/colors/secondary.ts
@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
 
 const SECONDARY_COLORS = {
-  // brand colors
   primary: '#2D2926',
   primaryTint1: '#2D2926',
   primaryTint2: '#2D2926',
@@ -17,45 +16,24 @@ const SECONDARY_COLORS = {
   tertiaryTint2: '#E5E2DF',
   tertiaryTint3: '#F2F0EF',
   tertiaryTint4: '#F2F0EF',
-
-  // general colors
+  default: '#2C2A25',
+  defaultLight: '#F0EEEC',
+  defaultBorder: '#F0EEEC',
   success: '#406237',
-  successBackground: '#ECEFEB',
+  successLight: '#ECEFEB',
   successBorder: '#ECEFEB',
-  info: '#2C2A25',
-  infoBackground: '#FDF9D3',
-  infoBorder: '#FDF9D3',
   error: '#A33F29',
-  errorBackground: '#F6ECEA',
+  errorLight: '#F6ECEA',
   errorBorder: '#F6ECEA',
-  default: '#2C2A25',
-  defaultBackground: '#F0EEEC',
-  defaultBorder: '#F0EEEC',
-  accent: '#F0EEEC',
-  disabled: '',
-  failure: '',
-  hover: '',
-  warning: '',
-
-  // ui colors
+  info: '#2C2A25',
+  infoLight: '#FDF9D3',
+  infoBorder: '#FDF9D3',
   background: '#FFFDF2',
   backgroundDark: '#C4BFB7',
-  border: '#E5E2DF',
-  divider: '#E5E2DF',
-
-  // form colors
-  radioBorder: '',
-  radioBorderSelected: '',
-
-  // typography
-  textMuted: '#2D2926',
-  textGhost: '#CBC5BF', // TODO: Delete?
-  textDisabled: '#CBC5BF',
-
-  // overlay
   overlay: 'rgba(45, 41, 38, 0.7)',
   overlaySolid: '#2D2926',
-
+  border: '#E5E2DF',
+  textDisabled: '#CBC5BF',
   black: '#2D2926',
   white: '#FFFDF2',
   transparent: 'transparent',
diff --git a/src/constants/index.ts b/src/constants/index.ts
index a4015eb98..07e634204 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -1,8 +1,6 @@
 export { default as ANIMATION } from './animation';
 export { default as BOX_SHADOWS } from './boxShadows';
 export { default as BREAKPOINTS } from './breakpoints';
-// TODO: Remove once all consumer usage is using theming
-export { default as COLORS } from './colors';
 export { default as FONTS } from './fonts';
 export { default as GRID } from './grid';
 export { default as LAYOUT } from './layout';
diff --git a/src/shared-components/accordion/__snapshots__/test.tsx.snap b/src/shared-components/accordion/__snapshots__/test.tsx.snap
index 0a06112d0..e0b4863a4 100644
--- a/src/shared-components/accordion/__snapshots__/test.tsx.snap
+++ b/src/shared-components/accordion/__snapshots__/test.tsx.snap
@@ -25,7 +25,7 @@ exports[`<Accordion /> renders disabled accordion 1`] = `
   -webkit-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
-  color: #332e54;
+  color: #332E54;
   -webkit-transition: color 350ms,-webkit-transform 350ms;
   -webkit-transition: color 350ms,transform 350ms;
   transition: color 350ms,transform 350ms;
@@ -39,11 +39,11 @@ exports[`<Accordion /> renders disabled accordion 1`] = `
 }
 
 .emotion-9 {
-  border: 1px solid #ededf0;
+  border: 1px solid #EDEDF0;
   width: 100%;
   opacity: 0.4;
-  background-color: #ededf0;
-  border-color: #c3c0cd;
+  background-color: #EDEDF0;
+  border-color: #C3C0CD;
 }
 
 .emotion-9:not(:last-child) {
@@ -64,7 +64,7 @@ exports[`<Accordion /> renders disabled accordion 1`] = `
 
 .emotion-5:focus {
   outline: none;
-  box-shadow: inset 0px 0px 0px 2px #332e54;
+  box-shadow: inset 0px 0px 0px 2px #332E54;
 }
 
 .emotion-10:last-of-type .emotion-5:focus {
@@ -98,7 +98,7 @@ exports[`<Accordion /> renders disabled accordion 1`] = `
     >
       <svg
         className="emotion-2"
-        fill="#332e54"
+        fill="#332E54"
         height={16}
         viewBox="0 0 16 16"
         width={16}
@@ -140,7 +140,7 @@ exports[`<Accordion /> renders no border accordion 1`] = `
 
 .emotion-5:focus {
   outline: none;
-  box-shadow: inset 0px 0px 0px 2px #332e54;
+  box-shadow: inset 0px 0px 0px 2px #332E54;
 }
 
 .emotion-10:last-of-type .emotion-5:focus {
@@ -172,7 +172,7 @@ exports[`<Accordion /> renders no border accordion 1`] = `
   -webkit-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
-  color: #332e54;
+  color: #332E54;
   -webkit-transition: color 350ms,-webkit-transform 350ms;
   -webkit-transition: color 350ms,transform 350ms;
   transition: color 350ms,transform 350ms;
@@ -219,7 +219,7 @@ exports[`<Accordion /> renders no border accordion 1`] = `
     >
       <svg
         className="emotion-2"
-        fill="#332e54"
+        fill="#332E54"
         height={16}
         viewBox="0 0 16 16"
         width={16}
@@ -248,7 +248,7 @@ exports[`<Accordion /> renders no border accordion 1`] = `
 
 exports[`<Accordion /> renders regular accordion 1`] = `
 .emotion-9 {
-  border: 1px solid #ededf0;
+  border: 1px solid #EDEDF0;
   width: 100%;
 }
 
@@ -270,7 +270,7 @@ exports[`<Accordion /> renders regular accordion 1`] = `
 
 .emotion-5:focus {
   outline: none;
-  box-shadow: inset 0px 0px 0px 2px #332e54;
+  box-shadow: inset 0px 0px 0px 2px #332E54;
 }
 
 .emotion-10:last-of-type .emotion-5:focus {
@@ -302,7 +302,7 @@ exports[`<Accordion /> renders regular accordion 1`] = `
   -webkit-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
-  color: #332e54;
+  color: #332E54;
   -webkit-transition: color 350ms,-webkit-transform 350ms;
   -webkit-transition: color 350ms,transform 350ms;
   transition: color 350ms,transform 350ms;
@@ -341,7 +341,7 @@ exports[`<Accordion /> renders regular accordion 1`] = `
     >
       <svg
         className="emotion-2"
-        fill="#332e54"
+        fill="#332E54"
         height={16}
         viewBox="0 0 16 16"
         width={16}
diff --git a/src/shared-components/accordion/style.ts b/src/shared-components/accordion/style.ts
index 1a544d4fb..a34af3bfc 100644
--- a/src/shared-components/accordion/style.ts
+++ b/src/shared-components/accordion/style.ts
@@ -45,7 +45,7 @@ export const AccordionBox = styled.div<{
     disabled
       ? `
     opacity: 0.4;
-    background-color: ${theme.COLORS.disabled};
+    background-color: ${theme.COLORS.defaultLight};
     border-color: ${theme.COLORS.primaryTint3};
   `
       : ''};
diff --git a/src/shared-components/alert/__snapshots__/test.tsx.snap b/src/shared-components/alert/__snapshots__/test.tsx.snap
index 4448a361a..49029e0ae 100644
--- a/src/shared-components/alert/__snapshots__/test.tsx.snap
+++ b/src/shared-components/alert/__snapshots__/test.tsx.snap
@@ -50,13 +50,13 @@ exports[`Alert UI snapshots renders a default alert 1`] = `
   -webkit-transform: translate3d(0,0,0);
   -ms-transform: translate3d(0,0,0);
   transform: translate3d(0,0,0);
-  background-color: #332e54;
+  background-color: #332E54;
   box-shadow: 0px 8px 24px rgba(51,46,84,0.05);
 }
 
 .emotion-7:focus {
   outline: none;
-  box-shadow: 0px 0px 0px 2px #ffffff,0px 0px 0px 4px #332e54;
+  box-shadow: 0px 0px 0px 2px #FFFFFF,0px 0px 0px 4px #332E54;
 }
 
 @media (min-width:768px) {
@@ -86,7 +86,7 @@ exports[`Alert UI snapshots renders a default alert 1`] = `
   -webkit-box-align: flex-start;
   -ms-flex-align: flex-start;
   align-items: flex-start;
-  color: #ffffff;
+  color: #FFFFFF;
   font-size: 0.875rem;
   padding: 1rem;
 }
@@ -94,7 +94,7 @@ exports[`Alert UI snapshots renders a default alert 1`] = `
 .emotion-1 svg {
   height: 1rem;
   width: 1rem;
-  fill: #ffffff;
+  fill: #FFFFFF;
 }
 
 .emotion-0 {
@@ -102,7 +102,7 @@ exports[`Alert UI snapshots renders a default alert 1`] = `
   -webkit-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
-  color: #ffffff;
+  color: #FFFFFF;
   -webkit-transition: color 350ms,-webkit-transform 350ms;
   -webkit-transition: color 350ms,transform 350ms;
   transition: color 350ms,transform 350ms;
@@ -125,7 +125,7 @@ exports[`Alert UI snapshots renders a default alert 1`] = `
     >
       <svg
         className="emotion-0"
-        fill="#ffffff"
+        fill="#FFFFFF"
         height={16}
         viewBox="0 0 16 16"
         width={16}
@@ -260,13 +260,13 @@ exports[`Alert UI snapshots renders a sticky alert 1`] = `
   -webkit-transform: translate3d(0,0,0);
   -ms-transform: translate3d(0,0,0);
   transform: translate3d(0,0,0);
-  background-color: #332e54;
+  background-color: #332E54;
   box-shadow: 0px 8px 24px rgba(51,46,84,0.05);
 }
 
 .emotion-7:focus {
   outline: none;
-  box-shadow: 0px 0px 0px 2px #ffffff,0px 0px 0px 4px #332e54;
+  box-shadow: 0px 0px 0px 2px #FFFFFF,0px 0px 0px 4px #332E54;
 }
 
 @media (min-width:768px) {
@@ -296,7 +296,7 @@ exports[`Alert UI snapshots renders a sticky alert 1`] = `
   -webkit-box-align: flex-start;
   -ms-flex-align: flex-start;
   align-items: flex-start;
-  color: #ffffff;
+  color: #FFFFFF;
   font-size: 0.875rem;
   padding: 1rem;
 }
@@ -304,7 +304,7 @@ exports[`Alert UI snapshots renders a sticky alert 1`] = `
 .emotion-1 svg {
   height: 1rem;
   width: 1rem;
-  fill: #ffffff;
+  fill: #FFFFFF;
 }
 
 .emotion-0 {
@@ -312,7 +312,7 @@ exports[`Alert UI snapshots renders a sticky alert 1`] = `
   -webkit-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
-  color: #ffffff;
+  color: #FFFFFF;
   -webkit-transition: color 350ms,-webkit-transform 350ms;
   -webkit-transition: color 350ms,transform 350ms;
   transition: color 350ms,transform 350ms;
@@ -335,7 +335,7 @@ exports[`Alert UI snapshots renders a sticky alert 1`] = `
     >
       <svg
         className="emotion-0"
-        fill="#ffffff"
+        fill="#FFFFFF"
         height={16}
         viewBox="0 0 16 16"
         width={16}
@@ -470,13 +470,13 @@ exports[`Alert UI snapshots renders custom component passed in content prop 1`]
   -webkit-transform: translate3d(0,0,0);
   -ms-transform: translate3d(0,0,0);
   transform: translate3d(0,0,0);
-  background-color: #332e54;
+  background-color: #332E54;
   box-shadow: 0px 8px 24px rgba(51,46,84,0.05);
 }
 
 .emotion-7:focus {
   outline: none;
-  box-shadow: 0px 0px 0px 2px #ffffff,0px 0px 0px 4px #332e54;
+  box-shadow: 0px 0px 0px 2px #FFFFFF,0px 0px 0px 4px #332E54;
 }
 
 @media (min-width:768px) {
@@ -506,7 +506,7 @@ exports[`Alert UI snapshots renders custom component passed in content prop 1`]
   -webkit-box-align: flex-start;
   -ms-flex-align: flex-start;
   align-items: flex-start;
-  color: #ffffff;
+  color: #FFFFFF;
   font-size: 0.875rem;
   padding: 1rem;
 }
@@ -514,7 +514,7 @@ exports[`Alert UI snapshots renders custom component passed in content prop 1`]
 .emotion-1 svg {
   height: 1rem;
   width: 1rem;
-  fill: #ffffff;
+  fill: #FFFFFF;
 }
 
 .emotion-0 {
@@ -522,7 +522,7 @@ exports[`Alert UI snapshots renders custom component passed in content prop 1`]
   -webkit-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
-  color: #ffffff;
+  color: #FFFFFF;
   -webkit-transition: color 350ms,-webkit-transform 350ms;
   -webkit-transition: color 350ms,transform 350ms;
   transition: color 350ms,transform 350ms;
@@ -545,7 +545,7 @@ exports[`Alert UI snapshots renders custom component passed in content prop 1`]
     >
       <svg
         className="emotion-0"
-        fill="#ffffff"
+        fill="#FFFFFF"
         height={16}
         viewBox="0 0 16 16"
         width={16}
@@ -689,7 +689,7 @@ exports[`Alert UI snapshots renders error alert 1`] = `
   -webkit-box-align: flex-start;
   -ms-flex-align: flex-start;
   align-items: flex-start;
-  color: #ffffff;
+  color: #FFFFFF;
   font-size: 0.875rem;
   padding: 1rem;
 }
@@ -697,7 +697,7 @@ exports[`Alert UI snapshots renders error alert 1`] = `
 .emotion-1 svg {
   height: 1rem;
   width: 1rem;
-  fill: #ffffff;
+  fill: #FFFFFF;
 }
 
 .emotion-0 {
@@ -705,7 +705,7 @@ exports[`Alert UI snapshots renders error alert 1`] = `
   -webkit-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
-  color: #ffffff;
+  color: #FFFFFF;
   -webkit-transition: color 350ms,-webkit-transform 350ms;
   -webkit-transition: color 350ms,transform 350ms;
   transition: color 350ms,transform 350ms;
@@ -739,7 +739,7 @@ exports[`Alert UI snapshots renders error alert 1`] = `
 
 .emotion-7:focus {
   outline: none;
-  box-shadow: 0px 0px 0px 2px #ffffff,0px 0px 0px 4px #332e54;
+  box-shadow: 0px 0px 0px 2px #FFFFFF,0px 0px 0px 4px #332E54;
 }
 
 @media (min-width:768px) {
@@ -765,7 +765,7 @@ exports[`Alert UI snapshots renders error alert 1`] = `
     >
       <svg
         className="emotion-0"
-        fill="#ffffff"
+        fill="#FFFFFF"
         height={16}
         viewBox="0 0 16 16"
         width={16}
@@ -869,7 +869,7 @@ exports[`Alert UI snapshots renders success alert 1`] = `
   -webkit-box-align: flex-start;
   -ms-flex-align: flex-start;
   align-items: flex-start;
-  color: #ffffff;
+  color: #FFFFFF;
   font-size: 0.875rem;
   padding: 1rem;
 }
@@ -877,7 +877,7 @@ exports[`Alert UI snapshots renders success alert 1`] = `
 .emotion-1 svg {
   height: 1rem;
   width: 1rem;
-  fill: #ffffff;
+  fill: #FFFFFF;
 }
 
 .emotion-0 {
@@ -885,7 +885,7 @@ exports[`Alert UI snapshots renders success alert 1`] = `
   -webkit-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
-  color: #ffffff;
+  color: #FFFFFF;
   -webkit-transition: color 350ms,-webkit-transform 350ms;
   -webkit-transition: color 350ms,transform 350ms;
   transition: color 350ms,transform 350ms;
@@ -919,7 +919,7 @@ exports[`Alert UI snapshots renders success alert 1`] = `
 
 .emotion-7:focus {
   outline: none;
-  box-shadow: 0px 0px 0px 2px #ffffff,0px 0px 0px 4px #332e54;
+  box-shadow: 0px 0px 0px 2px #FFFFFF,0px 0px 0px 4px #332E54;
 }
 
 @media (min-width:768px) {
@@ -945,7 +945,7 @@ exports[`Alert UI snapshots renders success alert 1`] = `
     >
       <svg
         className="emotion-0"
-        fill="#ffffff"
+        fill="#FFFFFF"
         height={16}
         viewBox="0 0 16 16"
         width={16}
diff --git a/src/shared-components/avatar/__snapshots__/test.tsx.snap b/src/shared-components/avatar/__snapshots__/test.tsx.snap
index 92e9dffde..438a30417 100644
--- a/src/shared-components/avatar/__snapshots__/test.tsx.snap
+++ b/src/shared-components/avatar/__snapshots__/test.tsx.snap
@@ -4,7 +4,7 @@ exports[`<Avatar /> UI snapshot render with size large styles 1`] = `
 .emotion-0 {
   height: 80px;
   width: 80px;
-  background-color: #a6a1e2;
+  background-color: #A6A1E2;
   border-radius: 50%;
   overflow: hidden;
 }
@@ -20,7 +20,7 @@ exports[`<Avatar /> UI snapshot render with size medium styles 1`] = `
 .emotion-0 {
   height: 48px;
   width: 48px;
-  background-color: #a6a1e2;
+  background-color: #A6A1E2;
   border-radius: 50%;
   overflow: hidden;
 }
@@ -36,7 +36,7 @@ exports[`<Avatar /> UI snapshot renders the component with default props 1`] = `
 .emotion-0 {
   height: 32px;
   width: 32px;
-  background-color: #a6a1e2;
+  background-color: #A6A1E2;
   border-radius: 50%;
   overflow: hidden;
 }
diff --git a/src/shared-components/banner/__snapshots__/test.tsx.snap b/src/shared-components/banner/__snapshots__/test.tsx.snap
index da945bc1b..b28621133 100644
--- a/src/shared-components/banner/__snapshots__/test.tsx.snap
+++ b/src/shared-components/banner/__snapshots__/test.tsx.snap
@@ -18,14 +18,14 @@ exports[`Banner UI snapshots renders error type and text 1`] = `
   -webkit-box-align: flex-start;
   -ms-flex-align: flex-start;
   align-items: flex-start;
-  color: #ffffff;
+  color: #FFFFFF;
   font-size: 0.875rem;
 }
 
 .emotion-1 svg {
   height: 1rem;
   width: 1rem;
-  fill: #ffffff;
+  fill: #FFFFFF;
 }
 
 .emotion-0 {
@@ -33,7 +33,7 @@ exports[`Banner UI snapshots renders error type and text 1`] = `
   -webkit-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
-  color: #ffffff;
+  color: #FFFFFF;
   -webkit-transition: color 350ms,-webkit-transform 350ms;
   -webkit-transition: color 350ms,transform 350ms;
   transition: color 350ms,transform 350ms;
@@ -58,7 +58,7 @@ exports[`Banner UI snapshots renders error type and text 1`] = `
 
 .emotion-7:focus {
   outline: none;
-  box-shadow: 0px 0px 0px 2px #ffffff,0px 0px 0px 4px #332e54;
+  box-shadow: 0px 0px 0px 2px #FFFFFF,0px 0px 0px 4px #332E54;
 }
 
 @media (min-width:768px) {
@@ -79,7 +79,7 @@ exports[`Banner UI snapshots renders error type and text 1`] = `
     >
       <svg
         className="emotion-0"
-        fill="#ffffff"
+        fill="#FFFFFF"
         height={16}
         viewBox="0 0 16 16"
         width={16}
@@ -120,14 +120,14 @@ exports[`Banner UI snapshots renders info type and text 1`] = `
   -webkit-box-align: flex-start;
   -ms-flex-align: flex-start;
   align-items: flex-start;
-  color: #ffffff;
+  color: #FFFFFF;
   font-size: 0.875rem;
 }
 
 .emotion-1 svg {
   height: 1rem;
   width: 1rem;
-  fill: #ffffff;
+  fill: #FFFFFF;
 }
 
 .emotion-0 {
@@ -135,7 +135,7 @@ exports[`Banner UI snapshots renders info type and text 1`] = `
   -webkit-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
-  color: #ffffff;
+  color: #FFFFFF;
   -webkit-transition: color 350ms,-webkit-transform 350ms;
   -webkit-transition: color 350ms,transform 350ms;
   transition: color 350ms,transform 350ms;
@@ -154,13 +154,13 @@ exports[`Banner UI snapshots renders info type and text 1`] = `
   margin: 0 auto 0.5rem;
   padding: 1rem;
   border-radius: 0.5rem;
-  background-color: #332e54;
+  background-color: #332E54;
   box-shadow: 0px 8px 24px rgba(51,46,84,0.05);
 }
 
 .emotion-7:focus {
   outline: none;
-  box-shadow: 0px 0px 0px 2px #ffffff,0px 0px 0px 4px #332e54;
+  box-shadow: 0px 0px 0px 2px #FFFFFF,0px 0px 0px 4px #332E54;
 }
 
 @media (min-width:768px) {
@@ -181,7 +181,7 @@ exports[`Banner UI snapshots renders info type and text 1`] = `
     >
       <svg
         className="emotion-0"
-        fill="#ffffff"
+        fill="#FFFFFF"
         height={16}
         viewBox="0 0 16 16"
         width={16}
@@ -218,7 +218,7 @@ exports[`Banner UI snapshots renders success type and text 1`] = `
 
 .emotion-7:focus {
   outline: none;
-  box-shadow: 0px 0px 0px 2px #ffffff,0px 0px 0px 4px #332e54;
+  box-shadow: 0px 0px 0px 2px #FFFFFF,0px 0px 0px 4px #332E54;
 }
 
 @media (min-width:768px) {
@@ -244,14 +244,14 @@ exports[`Banner UI snapshots renders success type and text 1`] = `
   -webkit-box-align: flex-start;
   -ms-flex-align: flex-start;
   align-items: flex-start;
-  color: #ffffff;
+  color: #FFFFFF;
   font-size: 0.875rem;
 }
 
 .emotion-1 svg {
   height: 1rem;
   width: 1rem;
-  fill: #ffffff;
+  fill: #FFFFFF;
 }
 
 .emotion-0 {
@@ -259,7 +259,7 @@ exports[`Banner UI snapshots renders success type and text 1`] = `
   -webkit-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
-  color: #ffffff;
+  color: #FFFFFF;
   -webkit-transition: color 350ms,-webkit-transform 350ms;
   -webkit-transition: color 350ms,transform 350ms;
   transition: color 350ms,transform 350ms;
@@ -281,7 +281,7 @@ exports[`Banner UI snapshots renders success type and text 1`] = `
     >
       <svg
         className="emotion-0"
-        fill="#ffffff"
+        fill="#FFFFFF"
         height={16}
         viewBox="0 0 16 16"
         width={16}
diff --git a/src/shared-components/button/__snapshots__/test.tsx.snap b/src/shared-components/button/__snapshots__/test.tsx.snap
index fb060bef5..1957a71f3 100644
--- a/src/shared-components/button/__snapshots__/test.tsx.snap
+++ b/src/shared-components/button/__snapshots__/test.tsx.snap
@@ -118,11 +118,11 @@ exports[`<Button /> UI snapshots renders with props 1`] = `
   transition: all 350ms ease-in-out;
   -webkit-text-decoration: none;
   text-decoration: none;
-  background-color: #ededf0;
-  border-color: #ededf0;
-  color: #c3c0cd;
+  background-color: #EDEDF0;
+  border-color: #EDEDF0;
+  color: #C3C0CD;
   cursor: not-allowed;
-  fill: #c3c0cd;
+  fill: #C3C0CD;
   min-width: 208px;
   max-width: 325px;
   width: -webkit-max-content;
@@ -138,13 +138,13 @@ exports[`<Button /> UI snapshots renders with props 1`] = `
 .emotion-7:active,
 .emotion-7:focus {
   outline: none;
-  box-shadow: 0px 0px 0px 2px #ffffff,0px 0px 0px 4px #332e54;
+  box-shadow: 0px 0px 0px 2px #FFFFFF,0px 0px 0px 4px #332E54;
 }
 
 .emotion-7:visited,
 .emotion-7:hover {
   opacity: 1;
-  color: #c3c0cd;
+  color: #C3C0CD;
 }
 
 .emotion-3 {
diff --git a/src/shared-components/button/components/linkButton/__snapshots__/test.tsx.snap b/src/shared-components/button/components/linkButton/__snapshots__/test.tsx.snap
index 79a6931af..814e42b08 100644
--- a/src/shared-components/button/components/linkButton/__snapshots__/test.tsx.snap
+++ b/src/shared-components/button/components/linkButton/__snapshots__/test.tsx.snap
@@ -28,10 +28,10 @@ exports[`<LinkButton/> UI snapshots renders with props 1`] = `
   transition: all 350ms ease-in-out;
   -webkit-text-decoration: none;
   text-decoration: none;
-  background-color: #332e54;
-  border-color: #332e54;
-  color: #ffffff;
-  fill: #ffffff;
+  background-color: #332E54;
+  border-color: #332E54;
+  color: #FFFFFF;
+  fill: #FFFFFF;
   min-width: 208px;
   max-width: 325px;
   width: -webkit-max-content;
@@ -47,7 +47,7 @@ exports[`<LinkButton/> UI snapshots renders with props 1`] = `
 .emotion-4:active,
 .emotion-4:focus {
   outline: none;
-  box-shadow: 0px 0px 0px 2px #ffffff,0px 0px 0px 4px #332e54;
+  box-shadow: 0px 0px 0px 2px #FFFFFF,0px 0px 0px 4px #332E54;
 }
 
 .emotion-4:visited,
@@ -58,7 +58,7 @@ exports[`<LinkButton/> UI snapshots renders with props 1`] = `
 .emotion-4:focus,
 .emotion-4:not([href]):not([tabindex]):hover,
 .emotion-4:not([href]):not([tabindex]):focus {
-  color: #ffffff;
+  color: #FFFFFF;
 }
 
 .emotion-2 {
diff --git a/src/shared-components/button/components/linkButton/index.tsx b/src/shared-components/button/components/linkButton/index.tsx
index 19d1bc0cb..44b8f3e5f 100644
--- a/src/shared-components/button/components/linkButton/index.tsx
+++ b/src/shared-components/button/components/linkButton/index.tsx
@@ -45,7 +45,7 @@ export const LinkButton = ({
   children,
   disabled = false,
   onClick = () => undefined,
-  textColor = '',
+  textColor,
   ...rest
 }: LinkProps) => {
   const theme = useTheme();
diff --git a/src/shared-components/button/components/linkButton/style.ts b/src/shared-components/button/components/linkButton/style.ts
index 701fd0d80..96df354a4 100644
--- a/src/shared-components/button/components/linkButton/style.ts
+++ b/src/shared-components/button/components/linkButton/style.ts
@@ -14,7 +14,7 @@ export const linkButtonStyles = ({
   disabled: boolean;
   buttonType: ButtonType;
   buttonColor: ThemeColors;
-  textColor: ThemeColors;
+  textColor?: ThemeColors;
   theme: ThemeType;
 }) => css`
   ${baseButtonStyles({
diff --git a/src/shared-components/button/components/roundButton/__snapshots__/test.tsx.snap b/src/shared-components/button/components/roundButton/__snapshots__/test.tsx.snap
index b9d80169a..f2a418810 100644
--- a/src/shared-components/button/components/roundButton/__snapshots__/test.tsx.snap
+++ b/src/shared-components/button/components/roundButton/__snapshots__/test.tsx.snap
@@ -136,11 +136,11 @@ exports[`<RoundButton /> UI snapshots renders with props 1`] = `
   transition: all 350ms ease-in-out;
   -webkit-text-decoration: none;
   text-decoration: none;
-  background-color: #ededf0;
-  border-color: #ededf0;
-  color: #c3c0cd;
+  background-color: #EDEDF0;
+  border-color: #EDEDF0;
+  color: #C3C0CD;
   cursor: not-allowed;
-  fill: #c3c0cd;
+  fill: #C3C0CD;
   min-width: 208px;
   max-width: 325px;
   width: -webkit-max-content;
@@ -163,13 +163,13 @@ exports[`<RoundButton /> UI snapshots renders with props 1`] = `
 .emotion-3:active,
 .emotion-3:focus {
   outline: none;
-  box-shadow: 0px 0px 0px 2px #ffffff,0px 0px 0px 4px #332e54;
+  box-shadow: 0px 0px 0px 2px #FFFFFF,0px 0px 0px 4px #332E54;
 }
 
 .emotion-3:visited,
 .emotion-3:hover {
   opacity: 1;
-  color: #c3c0cd;
+  color: #C3C0CD;
 }
 
 .emotion-3 > svg {
@@ -237,7 +237,7 @@ exports[`<RoundButton /> UI snapshots renders with props 1`] = `
 }
 
 .emotion-1 span {
-  background-color: #ffffff;
+  background-color: #FFFFFF;
 }
 
 .emotion-5 {
diff --git a/src/shared-components/button/components/roundButton/index.tsx b/src/shared-components/button/components/roundButton/index.tsx
index e5d43bac6..8b8a1d576 100644
--- a/src/shared-components/button/components/roundButton/index.tsx
+++ b/src/shared-components/button/components/roundButton/index.tsx
@@ -62,7 +62,7 @@ export const RoundButton = ({
   isLoading = false,
   loading = undefined,
   onClick = () => undefined,
-  textColor = '',
+  textColor,
   ...rest
 }: RoundButtonProps) => {
   const theme = useTheme();
@@ -93,7 +93,7 @@ export const RoundButton = ({
         />
       </RoundButtonBase>
       {children && (
-        <p css={roundButtonTextStyles(buttonColorWithTheme, textColor, theme)}>
+        <p css={roundButtonTextStyles(buttonColorWithTheme, theme, textColor)}>
           {children}
         </p>
       )}
diff --git a/src/shared-components/button/components/roundButton/style.ts b/src/shared-components/button/components/roundButton/style.ts
index b858c61c9..7c9f907b7 100644
--- a/src/shared-components/button/components/roundButton/style.ts
+++ b/src/shared-components/button/components/roundButton/style.ts
@@ -68,8 +68,6 @@ export const roundButtonLoader = (disabled: boolean, theme: ThemeType) => css`
 /**
  * Given a color as an argument,
  * determine an alternate color for pairing
- * @param  string color   the current color name of the round button (e.g purple, primary, etc.)
- * @return string         hex string of the alternate color (e.g. #efefef)
  */
 const determineAlternateTextColor = (
   buttonColor: ThemeColors,
@@ -90,7 +88,7 @@ const determineAlternateTextColor = (
   const contrastLevel: tinycolor.WCAG2Options = { level: 'AA', size: 'large' };
 
   const lighterIsReadable = tinycolor.isReadable(
-    theme.COLORS.defaultBackground,
+    theme.COLORS.defaultLight,
     lighterVersion,
     contrastLevel,
   );
@@ -101,16 +99,13 @@ const determineAlternateTextColor = (
 
 /**
  * get the text color of the button
- * @param  string color       the current color name of the round button (e.g purple, primary, etc.)
- * @param  string textColor   custom override for the text color
- * @return string             hex string of the text color
  */
 const buttonTextColor = (
   buttonColor: ThemeColors,
-  textColor: string,
   theme: ThemeType,
+  textColor?: ThemeColors,
 ) => {
-  if (textColor !== '') {
+  if (textColor) {
     return textColor;
   }
 
@@ -123,9 +118,9 @@ const buttonTextColor = (
 
 export const roundButtonTextStyles = (
   buttonColor: ThemeColors,
-  textColor: string,
   theme: ThemeType,
+  textColor?: ThemeColors,
 ) => css`
-  color: ${buttonTextColor(buttonColor, textColor, theme)};
+  color: ${buttonTextColor(buttonColor, theme, textColor)};
   margin: 10px 0;
 `;
diff --git a/src/shared-components/button/components/textButton/__snapshots__/test.tsx.snap b/src/shared-components/button/components/textButton/__snapshots__/test.tsx.snap
index 1e4e39c16..46e1defbe 100644
--- a/src/shared-components/button/components/textButton/__snapshots__/test.tsx.snap
+++ b/src/shared-components/button/components/textButton/__snapshots__/test.tsx.snap
@@ -37,7 +37,7 @@ exports[`<TextButton /> UI snapshots renders with disabled prop 1`] = `
   border-color: transparent;
   background-color: transparent;
   border-radius: 0.25rem;
-  color: #c3c0cd;
+  color: #C3C0CD;
   cursor: not-allowed;
 }
 
@@ -49,7 +49,7 @@ exports[`<TextButton /> UI snapshots renders with disabled prop 1`] = `
 .emotion-2:active,
 .emotion-2:focus {
   outline: none;
-  box-shadow: 0px 0px 0px 2px #ffffff,0px 0px 0px 4px #332e54;
+  box-shadow: 0px 0px 0px 2px #FFFFFF,0px 0px 0px 4px #332E54;
 }
 
 <button
@@ -70,7 +70,7 @@ exports[`<TextButton /> UI snapshots renders without any props 1`] = `
   border-color: transparent;
   background-color: transparent;
   border-radius: 0.25rem;
-  color: #332e54;
+  color: #332E54;
   cursor: pointer;
 }
 
@@ -82,7 +82,7 @@ exports[`<TextButton /> UI snapshots renders without any props 1`] = `
 .emotion-2:active,
 .emotion-2:focus {
   outline: none;
-  box-shadow: 0px 0px 0px 2px #ffffff,0px 0px 0px 4px #332e54;
+  box-shadow: 0px 0px 0px 2px #FFFFFF,0px 0px 0px 4px #332E54;
 }
 
 .emotion-0 {
diff --git a/src/shared-components/button/index.tsx b/src/shared-components/button/index.tsx
index 09301b54d..a73ca2e8b 100644
--- a/src/shared-components/button/index.tsx
+++ b/src/shared-components/button/index.tsx
@@ -72,7 +72,7 @@ export const Button = ({
   isLoading = false,
   loading = undefined,
   onClick,
-  textColor = '',
+  textColor,
   ...rest
 }: ButtonProps) => {
   const theme = useTheme();
diff --git a/src/shared-components/button/shared-components/loader/index.tsx b/src/shared-components/button/shared-components/loader/index.tsx
index 4e4b1d0f6..bf7cf9fc0 100644
--- a/src/shared-components/button/shared-components/loader/index.tsx
+++ b/src/shared-components/button/shared-components/loader/index.tsx
@@ -11,7 +11,7 @@ type LoaderProps = {
   disabled: boolean;
   isFullWidth?: boolean;
   isLoading: boolean;
-  textColor: ThemeColors;
+  textColor?: ThemeColors;
 };
 
 const Loader = ({
diff --git a/src/shared-components/button/shared-components/loader/style.ts b/src/shared-components/button/shared-components/loader/style.ts
index cff5033fb..385f6dd1b 100644
--- a/src/shared-components/button/shared-components/loader/style.ts
+++ b/src/shared-components/button/shared-components/loader/style.ts
@@ -37,7 +37,7 @@ const ButtonLoader = styled.div<{
   disabled: boolean;
   isFullWidth: boolean;
   isLoading: boolean;
-  textColor: ThemeColors;
+  textColor?: ThemeColors;
 }>`
   display: flex;
   align-items: center;
diff --git a/src/shared-components/button/style.ts b/src/shared-components/button/style.ts
index cbfffe6f3..8204d85f1 100644
--- a/src/shared-components/button/style.ts
+++ b/src/shared-components/button/style.ts
@@ -118,8 +118,8 @@ const loadingStyles = `
 `;
 
 const disabledStyles = (theme: ThemeType) => `
-  background-color: ${theme.COLORS.disabled};
-  border-color: ${theme.COLORS.disabled};
+  background-color: ${theme.COLORS.defaultLight};
+  border-color: ${theme.COLORS.border};
   color: ${theme.COLORS.textDisabled};
   cursor: not-allowed;
   fill: ${theme.COLORS.textDisabled};
@@ -161,7 +161,7 @@ type BaseButtonStylesTypes = {
   buttonType: ButtonTypeWithAction;
   buttonColor: ThemeColors;
   isLoading?: boolean;
-  textColor: ThemeColors;
+  textColor?: ThemeColors;
   isFullWidth?: boolean;
   theme: ThemeType;
 };
diff --git a/src/shared-components/callout/__snapshots__/test.tsx.snap b/src/shared-components/callout/__snapshots__/test.tsx.snap
index 2381159ec..9a12f76ac 100644
--- a/src/shared-components/callout/__snapshots__/test.tsx.snap
+++ b/src/shared-components/callout/__snapshots__/test.tsx.snap
@@ -23,7 +23,7 @@ exports[`<Callout /> UI snapshots renders a simple callout 1`] = `
 }
 
 .emotion-0 {
-  color: #332e54;
+  color: #332E54;
   font-size: 0.875rem;
 }
 
diff --git a/src/shared-components/callout/style.ts b/src/shared-components/callout/style.ts
index a922b0beb..6dd802d6b 100644
--- a/src/shared-components/callout/style.ts
+++ b/src/shared-components/callout/style.ts
@@ -7,7 +7,7 @@ const ParentContainer = styled.div`
 `;
 
 const CalloutContainer = styled.div`
-  background-color: ${({ theme }) => theme.COLORS.infoBackground};
+  background-color: ${({ theme }) => theme.COLORS.infoLight};
   padding: ${SPACER.medium};
   border-radius: 8px;
   display: flex;
diff --git a/src/shared-components/carousel/__snapshots__/test.tsx.snap b/src/shared-components/carousel/__snapshots__/test.tsx.snap
index 53abd44da..f74129b53 100644
--- a/src/shared-components/carousel/__snapshots__/test.tsx.snap
+++ b/src/shared-components/carousel/__snapshots__/test.tsx.snap
@@ -163,7 +163,7 @@ exports[`<Carousel /> UI snapshots renders with bottom right aligned arrows 1`]
 }
 
 .emotion-2 .slick-dots li {
-  background-color: #332e54;
+  background-color: #332E54;
 }
 
 .emotion-0 {
@@ -410,7 +410,7 @@ exports[`<Carousel /> UI snapshots renders with props 1`] = `
 }
 
 .emotion-2 .slick-dots li {
-  background-color: #332e54;
+  background-color: #332E54;
 }
 
 .emotion-0 {
diff --git a/src/shared-components/carousel/arrow/__snapshots__/test.tsx.snap b/src/shared-components/carousel/arrow/__snapshots__/test.tsx.snap
index ddc94e7fd..439ef5ff1 100644
--- a/src/shared-components/carousel/arrow/__snapshots__/test.tsx.snap
+++ b/src/shared-components/carousel/arrow/__snapshots__/test.tsx.snap
@@ -223,12 +223,12 @@ exports[`<Arrow /> UI snapshots renders with bottom right alignment 1`] = `
 
 .emotion-7 button {
   background-color: none;
-  border-color: #332e54;
-  color: #332e54;
+  border-color: #332E54;
+  color: #332E54;
 }
 
 .emotion-7 button:hover {
-  color: #332e54;
+  color: #332E54;
 }
 
 .emotion-3 {
@@ -258,11 +258,11 @@ exports[`<Arrow /> UI snapshots renders with bottom right alignment 1`] = `
   transition: all 350ms ease-in-out;
   -webkit-text-decoration: none;
   text-decoration: none;
-  background-color: #ededf0;
-  border-color: #ededf0;
-  color: #c3c0cd;
+  background-color: #EDEDF0;
+  border-color: #EDEDF0;
+  color: #C3C0CD;
   cursor: not-allowed;
-  fill: #c3c0cd;
+  fill: #C3C0CD;
   min-width: 208px;
   max-width: 325px;
   width: -webkit-max-content;
@@ -285,13 +285,13 @@ exports[`<Arrow /> UI snapshots renders with bottom right alignment 1`] = `
 .emotion-3:active,
 .emotion-3:focus {
   outline: none;
-  box-shadow: 0px 0px 0px 2px #ffffff,0px 0px 0px 4px #332e54;
+  box-shadow: 0px 0px 0px 2px #FFFFFF,0px 0px 0px 4px #332E54;
 }
 
 .emotion-3:visited,
 .emotion-3:hover {
   opacity: 1;
-  color: #c3c0cd;
+  color: #C3C0CD;
 }
 
 .emotion-3 > svg {
@@ -349,7 +349,7 @@ exports[`<Arrow /> UI snapshots renders with bottom right alignment 1`] = `
 }
 
 .emotion-1 span {
-  background-color: #ffffff;
+  background-color: #FFFFFF;
 }
 
 <div
@@ -542,10 +542,10 @@ exports[`<Arrow /> UI snapshots renders with props 1`] = `
   -webkit-text-decoration: none;
   text-decoration: none;
   border-width: 1px;
-  border-color: #ededf0;
-  background-color: #ffffff;
-  color: #332e54;
-  fill: #332e54;
+  border-color: #EDEDF0;
+  background-color: #FFFFFF;
+  color: #332E54;
+  fill: #332E54;
   box-shadow: 0px 8px 24px rgba(52,51,82,0.05);
   min-width: 208px;
   max-width: 325px;
@@ -569,7 +569,7 @@ exports[`<Arrow /> UI snapshots renders with props 1`] = `
 .emotion-3:active,
 .emotion-3:focus {
   outline: none;
-  box-shadow: 0px 0px 0px 2px #ffffff,0px 0px 0px 4px #332e54;
+  box-shadow: 0px 0px 0px 2px #FFFFFF,0px 0px 0px 4px #332E54;
 }
 
 .emotion-3:hover {
@@ -624,7 +624,7 @@ exports[`<Arrow /> UI snapshots renders with props 1`] = `
 }
 
 .emotion-1 span {
-  background-color: #332e54;
+  background-color: #332E54;
   border-radius: 50%;
   display: inline-block;
   height: 4px;
diff --git a/src/shared-components/chip/__snapshots__/test.tsx.snap b/src/shared-components/chip/__snapshots__/test.tsx.snap
index adee4b636..1a6031459 100644
--- a/src/shared-components/chip/__snapshots__/test.tsx.snap
+++ b/src/shared-components/chip/__snapshots__/test.tsx.snap
@@ -28,7 +28,7 @@ exports[`<Chip /> UI snapshots renders the correct css and text 1`] = `
 }
 
 .emotion-2 .emotion-1 {
-  color: #ffffff;
+  color: #FFFFFF;
 }
 
 .emotion-0 {
diff --git a/src/shared-components/chip/style.ts b/src/shared-components/chip/style.ts
index 80223bc91..b87868f27 100644
--- a/src/shared-components/chip/style.ts
+++ b/src/shared-components/chip/style.ts
@@ -13,7 +13,7 @@ export const ChipText = styled.span`
 `;
 
 const defaultStyle = (theme: ThemeType) => `
-  background-color: ${theme.COLORS.defaultBackground};
+  background-color: ${theme.COLORS.defaultLight};
   ${ChipText} {
     color: ${theme.COLORS.primary};
   }
diff --git a/src/shared-components/container/__snapshots__/test.tsx.snap b/src/shared-components/container/__snapshots__/test.tsx.snap
index 84b87bc91..7b24e56a6 100644
--- a/src/shared-components/container/__snapshots__/test.tsx.snap
+++ b/src/shared-components/container/__snapshots__/test.tsx.snap
@@ -2,8 +2,8 @@
 
 exports[`Container UI snapshots renders basic container 1`] = `
 .emotion-0 {
-  background-color: #ffffff;
-  border: 1px solid #ededf0;
+  background-color: #FFFFFF;
+  border: 1px solid #EDEDF0;
 }
 
 <div
@@ -15,8 +15,8 @@ exports[`Container UI snapshots renders basic container 1`] = `
 
 exports[`Container UI snapshots renders clickable container 1`] = `
 .emotion-0 {
-  background-color: #ffffff;
-  border: 1px solid #ededf0;
+  background-color: #FFFFFF;
+  border: 1px solid #EDEDF0;
   box-shadow: 0px 8px 24px rgba(52,51,82,0.05);
   cursor: pointer;
   -webkit-transition: box-shadow 200ms;
@@ -37,8 +37,8 @@ exports[`Container UI snapshots renders clickable container 1`] = `
 
 exports[`Container UI snapshots renders container helper components 1`] = `
 .emotion-8 {
-  background-color: #ffffff;
-  border: 1px solid #ededf0;
+  background-color: #FFFFFF;
+  border: 1px solid #EDEDF0;
 }
 
 .emotion-0 {
@@ -54,7 +54,7 @@ exports[`Container UI snapshots renders container helper components 1`] = `
 
 .emotion-2 {
   margin: 0 1.5rem;
-  border-bottom: 1px solid #ededf0;
+  border-bottom: 1px solid #EDEDF0;
 }
 
 @media (min-width:992px) {
@@ -96,8 +96,8 @@ exports[`Container UI snapshots renders container helper components 1`] = `
 
 exports[`Container UI snapshots renders message type container 1`] = `
 .emotion-0 {
-  background-color: #ffffff;
-  border: 1px solid #ededf0;
+  background-color: #FFFFFF;
+  border: 1px solid #EDEDF0;
   border-radius: 16px;
   box-shadow: 0 12px 20px 0 rgba(51,46,84,0.05);
 }
diff --git a/src/shared-components/container/style.ts b/src/shared-components/container/style.ts
index 7fefbaf2b..b1be9196f 100644
--- a/src/shared-components/container/style.ts
+++ b/src/shared-components/container/style.ts
@@ -50,7 +50,7 @@ export const Section = styled.div`
 
 export const Divider = styled.div`
   margin: 0 ${SPACER.large};
-  border-bottom: ${({ theme }) => `1px solid ${theme.COLORS.divider}`};
+  border-bottom: ${({ theme }) => `1px solid ${theme.COLORS.border}`};
 
   ${MEDIA_QUERIES.lgUp} {
     margin: 0 ${SPACER.x2large};
diff --git a/src/shared-components/dropdown/__snapshots__/test.tsx.snap b/src/shared-components/dropdown/__snapshots__/test.tsx.snap
index 588a4802d..9c3d45095 100644
--- a/src/shared-components/dropdown/__snapshots__/test.tsx.snap
+++ b/src/shared-components/dropdown/__snapshots__/test.tsx.snap
@@ -16,12 +16,12 @@ exports[`<MobileDropdown /> UI snapshots renders correctly 1`] = `
   -moz-appearance: none;
   appearance: none;
   box-shadow: 0px 8px 24px rgba(52,51,82,0.05);
-  background: #ffffff;
+  background: #FFFFFF;
   background-image: none;
   width: 100%;
   min-height: 3.5rem;
   max-height: 3.5rem;
-  border: 1px solid #ededf0;
+  border: 1px solid #EDEDF0;
   border-radius: 4px;
   color: #524D6E;
   line-height: 3.5rem;
diff --git a/src/shared-components/dropdown/style.ts b/src/shared-components/dropdown/style.ts
index 21f9315ea..c0e453c1a 100644
--- a/src/shared-components/dropdown/style.ts
+++ b/src/shared-components/dropdown/style.ts
@@ -168,12 +168,12 @@ export const DropdownOption = styled.li<{
   padding: 18px ${SPACER.medium} 14px ${SPACER.medium};
 
   &:hover {
-    background-color: ${({ theme }) => theme.COLORS.infoBackground};
+    background-color: ${({ theme }) => theme.COLORS.infoLight};
   }
 
   &:focus {
     outline: none;
-    background-color: ${({ theme }) => theme.COLORS.infoBackground};
+    background-color: ${({ theme }) => theme.COLORS.infoLight};
     box-shadow: ${BOX_SHADOWS.focusInner};
   }
 
diff --git a/src/shared-components/field/__snapshots__/test.tsx.snap b/src/shared-components/field/__snapshots__/test.tsx.snap
index d10b80189..06e36a1c1 100644
--- a/src/shared-components/field/__snapshots__/test.tsx.snap
+++ b/src/shared-components/field/__snapshots__/test.tsx.snap
@@ -43,8 +43,8 @@ exports[`<Field /> UI Snapshot renders with default props 1`] = `
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  background: #ffffff;
-  border: 1px solid #ededf0;
+  background: #FFFFFF;
+  border: 1px solid #EDEDF0;
   border-radius: 0.25rem;
   color: #524D6E;
   -webkit-transition: border-color 350ms;
@@ -58,8 +58,8 @@ exports[`<Field /> UI Snapshot renders with default props 1`] = `
 .emotion-1:active,
 .emotion-1:focus {
   outline: none;
-  border-color: #332e54;
-  box-shadow: 0px 0px 0px 2px #ffffff,0px 0px 0px 4px #332e54;
+  border-color: #332E54;
+  box-shadow: 0px 0px 0px 2px #FFFFFF,0px 0px 0px 4px #332E54;
 }
 
 .emotion-1:active ~ .e1gqjikl0,
@@ -70,26 +70,26 @@ exports[`<Field /> UI Snapshot renders with default props 1`] = `
 }
 
 .emotion-1::-webkit-input-placeholder {
-  color: #c3c0cd;
+  color: #C3C0CD;
 }
 
 .emotion-1::-moz-placeholder {
-  color: #c3c0cd;
+  color: #C3C0CD;
 }
 
 .emotion-1:-ms-input-placeholder {
-  color: #c3c0cd;
+  color: #C3C0CD;
 }
 
 .emotion-1::placeholder {
-  color: #c3c0cd;
+  color: #C3C0CD;
 }
 
 .emotion-1[disabled] {
-  background-color: #ededf0;
-  color: #c3c0cd;
+  background-color: #EDEDF0;
+  color: #C3C0CD;
   cursor: not-allowed;
-  border: 1px solid #ededf0;
+  border: 1px solid #EDEDF0;
   box-shadow: none;
 }
 
@@ -149,8 +149,8 @@ exports[`<Field /> UI Snapshot renders with errorMessage, hintMessage and hideMe
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  background: #ffffff;
-  border: 1px solid #ededf0;
+  background: #FFFFFF;
+  border: 1px solid #EDEDF0;
   border-radius: 0.25rem;
   color: #524D6E;
   -webkit-transition: border-color 350ms;
@@ -164,8 +164,8 @@ exports[`<Field /> UI Snapshot renders with errorMessage, hintMessage and hideMe
 .emotion-0:active,
 .emotion-0:focus {
   outline: none;
-  border-color: #332e54;
-  box-shadow: 0px 0px 0px 2px #ffffff,0px 0px 0px 4px #332e54;
+  border-color: #332E54;
+  box-shadow: 0px 0px 0px 2px #FFFFFF,0px 0px 0px 4px #332E54;
 }
 
 .emotion-0:active ~ .emotion-3,
@@ -176,26 +176,26 @@ exports[`<Field /> UI Snapshot renders with errorMessage, hintMessage and hideMe
 }
 
 .emotion-0::-webkit-input-placeholder {
-  color: #c3c0cd;
+  color: #C3C0CD;
 }
 
 .emotion-0::-moz-placeholder {
-  color: #c3c0cd;
+  color: #C3C0CD;
 }
 
 .emotion-0:-ms-input-placeholder {
-  color: #c3c0cd;
+  color: #C3C0CD;
 }
 
 .emotion-0::placeholder {
-  color: #c3c0cd;
+  color: #C3C0CD;
 }
 
 .emotion-0[disabled] {
-  background-color: #ededf0;
-  color: #c3c0cd;
+  background-color: #EDEDF0;
+  color: #C3C0CD;
   cursor: not-allowed;
-  border: 1px solid #ededf0;
+  border: 1px solid #EDEDF0;
   box-shadow: none;
 }
 
@@ -231,7 +231,7 @@ exports[`<Field /> UI Snapshot renders with errorMessage, hintMessage and hideMe
 .emotion-8 .e1gqjikl4:focus,
 .emotion-8 .emotion-1:focus {
   border-color: #BD200F;
-  box-shadow: 0px 0px 0px 2px #ffffff,0px 0px 0px 4px #332e54;
+  box-shadow: 0px 0px 0px 2px #FFFFFF,0px 0px 0px 4px #332E54;
 }
 
 .emotion-2 {
@@ -340,8 +340,8 @@ exports[`<Field /> UI Snapshot renders with label and labelFor props 1`] = `
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  background: #ffffff;
-  border: 1px solid #ededf0;
+  background: #FFFFFF;
+  border: 1px solid #EDEDF0;
   border-radius: 0.25rem;
   color: #524D6E;
   -webkit-transition: border-color 350ms;
@@ -355,8 +355,8 @@ exports[`<Field /> UI Snapshot renders with label and labelFor props 1`] = `
 .emotion-3:active,
 .emotion-3:focus {
   outline: none;
-  border-color: #332e54;
-  box-shadow: 0px 0px 0px 2px #ffffff,0px 0px 0px 4px #332e54;
+  border-color: #332E54;
+  box-shadow: 0px 0px 0px 2px #FFFFFF,0px 0px 0px 4px #332E54;
 }
 
 .emotion-3:active ~ .e1gqjikl0,
@@ -367,26 +367,26 @@ exports[`<Field /> UI Snapshot renders with label and labelFor props 1`] = `
 }
 
 .emotion-3::-webkit-input-placeholder {
-  color: #c3c0cd;
+  color: #C3C0CD;
 }
 
 .emotion-3::-moz-placeholder {
-  color: #c3c0cd;
+  color: #C3C0CD;
 }
 
 .emotion-3:-ms-input-placeholder {
-  color: #c3c0cd;
+  color: #C3C0CD;
 }
 
 .emotion-3::placeholder {
-  color: #c3c0cd;
+  color: #C3C0CD;
 }
 
 .emotion-3[disabled] {
-  background-color: #ededf0;
-  color: #c3c0cd;
+  background-color: #EDEDF0;
+  color: #C3C0CD;
   cursor: not-allowed;
-  border: 1px solid #ededf0;
+  border: 1px solid #EDEDF0;
   box-shadow: none;
 }
 
diff --git a/src/shared-components/field/style.ts b/src/shared-components/field/style.ts
index 8e7bed31a..48e0f8fb1 100644
--- a/src/shared-components/field/style.ts
+++ b/src/shared-components/field/style.ts
@@ -55,7 +55,7 @@ const inputStyles = (theme: ThemeType) => css`
   }
 
   &[disabled] {
-    background-color: ${theme.COLORS.disabled};
+    background-color: ${theme.COLORS.defaultLight};
     color: ${theme.COLORS.textDisabled};
     cursor: not-allowed;
     border: 1px solid ${theme.COLORS.border};
diff --git a/src/shared-components/indicator/__snapshots__/test.tsx.snap b/src/shared-components/indicator/__snapshots__/test.tsx.snap
index 070ff488f..0c054ae04 100644
--- a/src/shared-components/indicator/__snapshots__/test.tsx.snap
+++ b/src/shared-components/indicator/__snapshots__/test.tsx.snap
@@ -35,7 +35,7 @@ exports[`<Indicator /> UI snapshots renders the correct css with a number 1`] =
   font-size: 0.75rem;
   line-height: 1.67;
   font-weight: bold;
-  color: #ffffff;
+  color: #FFFFFF;
 }
 
 <div
@@ -82,7 +82,7 @@ exports[`<Indicator /> UI snapshots renders the correct css with a text 1`] = `
   font-size: 0.75rem;
   line-height: 1.67;
   font-weight: bold;
-  color: #ffffff;
+  color: #FFFFFF;
 }
 
 <div
diff --git a/src/shared-components/loadingSpinner/__snapshots__/test.tsx.snap b/src/shared-components/loadingSpinner/__snapshots__/test.tsx.snap
index 35576da29..d4ad31302 100644
--- a/src/shared-components/loadingSpinner/__snapshots__/test.tsx.snap
+++ b/src/shared-components/loadingSpinner/__snapshots__/test.tsx.snap
@@ -65,7 +65,7 @@ exports[`<LoadingSpinner /> UI snapshots renders the correct css with custom pro
   display: block;
   height: 20px;
   width: 20px;
-  background-color: #ffffff;
+  background-color: #FFFFFF;
   border-radius: 50%;
   opacity: 0;
   -webkit-animation-name: animation-0;
@@ -154,7 +154,7 @@ exports[`<LoadingSpinner /> UI snapshots renders the correct css with default pr
   left: 0;
   bottom: 0;
   right: 0;
-  background-color: #f8f8fa;
+  background-color: #F8F8FA;
 }
 
 .emotion-6 {
@@ -177,7 +177,7 @@ exports[`<LoadingSpinner /> UI snapshots renders the correct css with default pr
   display: block;
   height: 14px;
   width: 14px;
-  background-color: #332e54;
+  background-color: #332E54;
   border-radius: 50%;
   opacity: 0;
   -webkit-animation-name: animation-0;
diff --git a/src/shared-components/optionButton/__snapshots__/test.tsx.snap b/src/shared-components/optionButton/__snapshots__/test.tsx.snap
index acee65d31..ed28221fe 100644
--- a/src/shared-components/optionButton/__snapshots__/test.tsx.snap
+++ b/src/shared-components/optionButton/__snapshots__/test.tsx.snap
@@ -3,8 +3,8 @@
 exports[`<OptionButton /> UI snapshots checkbox selected, without custom icon 1`] = `
 .emotion-9 {
   border-radius: 4px;
-  background-color: #ffffff;
-  border: 1px solid #ededf0;
+  background-color: #FFFFFF;
+  border: 1px solid #EDEDF0;
   box-shadow: 0px 8px 24px rgba(52,51,82,0.05);
   cursor: pointer;
   -webkit-transition: box-shadow 200ms;
@@ -21,7 +21,7 @@ exports[`<OptionButton /> UI snapshots checkbox selected, without custom icon 1`
 
 .emotion-9:focus {
   outline: none;
-  box-shadow: 0px 0px 0px 2px #ffffff,0px 0px 0px 4px #332e54;
+  box-shadow: 0px 0px 0px 2px #FFFFFF,0px 0px 0px 4px #332E54;
 }
 
 .emotion-7 {
@@ -44,8 +44,8 @@ exports[`<OptionButton /> UI snapshots checkbox selected, without custom icon 1`
 
 .emotion-1 {
   border: 1px solid;
-  border-color: #332e54;
-  background: #ffffff;
+  border-color: #332E54;
+  background: #FFFFFF;
   width: 32px;
   height: 32px;
   display: -webkit-box;
@@ -69,8 +69,8 @@ exports[`<OptionButton /> UI snapshots checkbox selected, without custom icon 1`
   -webkit-transition: all 350ms;
   transition: all 350ms;
   border-radius: 4px;
-  background: #332e54;
-  border-color: #332e54;
+  background: #332E54;
+  border-color: #332E54;
 }
 
 .emotion-1 svg {
@@ -81,8 +81,8 @@ exports[`<OptionButton /> UI snapshots checkbox selected, without custom icon 1`
 
 .emotion-1 svg {
   opacity: 1;
-  color: #ffffff;
-  fill: #ffffff;
+  color: #FFFFFF;
+  fill: #FFFFFF;
 }
 
 .emotion-0 {
@@ -147,8 +147,8 @@ exports[`<OptionButton /> UI snapshots checkbox selected, without custom icon 1`
 exports[`<OptionButton /> UI snapshots radio unselected, with icon node prop 1`] = `
 .emotion-9 {
   border-radius: 4px;
-  background-color: #ffffff;
-  border: 1px solid #ededf0;
+  background-color: #FFFFFF;
+  border: 1px solid #EDEDF0;
   box-shadow: 0px 8px 24px rgba(52,51,82,0.05);
   cursor: pointer;
   -webkit-transition: box-shadow 200ms;
@@ -165,7 +165,7 @@ exports[`<OptionButton /> UI snapshots radio unselected, with icon node prop 1`]
 
 .emotion-9:focus {
   outline: none;
-  box-shadow: 0px 0px 0px 2px #ffffff,0px 0px 0px 4px #332e54;
+  box-shadow: 0px 0px 0px 2px #FFFFFF,0px 0px 0px 4px #332E54;
 }
 
 .emotion-7 {
@@ -207,8 +207,8 @@ exports[`<OptionButton /> UI snapshots radio unselected, with icon node prop 1`]
 
 .emotion-1 {
   border: 1px solid;
-  border-color: #332e54;
-  background: #ffffff;
+  border-color: #332E54;
+  background: #FFFFFF;
   width: 32px;
   height: 32px;
   display: -webkit-box;
@@ -244,8 +244,8 @@ exports[`<OptionButton /> UI snapshots radio unselected, with icon node prop 1`]
 
 .emotion-1 svg {
   opacity: 1;
-  color: #332e54;
-  fill: #332e54;
+  color: #332E54;
+  fill: #332E54;
 }
 
 <button
diff --git a/src/shared-components/progressBar/__snapshots__/test.tsx.snap b/src/shared-components/progressBar/__snapshots__/test.tsx.snap
index fb4a46ca5..4098acb1d 100644
--- a/src/shared-components/progressBar/__snapshots__/test.tsx.snap
+++ b/src/shared-components/progressBar/__snapshots__/test.tsx.snap
@@ -47,7 +47,7 @@ exports[`<ProgressBar /> UI snapshot renders with custom props 1`] = `
   position: absolute;
   width: 100%;
   height: 5px;
-  background-color: #f4f2b0;
+  background-color: #554CB3;
   -webkit-animation: animation-0 30s ease-in;
   animation: animation-0 30s ease-in;
   -webkit-transform: translateX(-5%);
@@ -93,7 +93,7 @@ exports[`<ProgressBar /> UI snapshot renders with default props 1`] = `
   top: 0;
   left: 0;
   right: 0;
-  background: #f8f8fa;
+  background: #F8F8FA;
   overflow: hidden;
   -webkit-transition: opacity 350ms ease-in-out 500ms;
   transition: opacity 350ms ease-in-out 500ms;
@@ -106,7 +106,7 @@ exports[`<ProgressBar /> UI snapshot renders with default props 1`] = `
   position: absolute;
   width: 100%;
   height: 4px;
-  background-color: #332e54;
+  background-color: #332E54;
   -webkit-animation: animation-0 20s ease-in;
   animation: animation-0 20s ease-in;
   -webkit-transform: translateX(-5%);
diff --git a/src/shared-components/progressBar/test.tsx b/src/shared-components/progressBar/test.tsx
index 9b6e1e157..0a0d75e83 100644
--- a/src/shared-components/progressBar/test.tsx
+++ b/src/shared-components/progressBar/test.tsx
@@ -18,7 +18,7 @@ describe('<ProgressBar />', () => {
         <ProgressBar
           status="loading"
           backgroundColor={primaryTheme.COLORS.error}
-          barColor={primaryTheme.COLORS.warning}
+          barColor={primaryTheme.COLORS.info}
           height={5}
           loadingTime="30s"
           customProp="allows ..rest props"
diff --git a/src/shared-components/selectorButton/__snapshots__/test.tsx.snap b/src/shared-components/selectorButton/__snapshots__/test.tsx.snap
index 3c5f0ead2..1e4f5cd85 100644
--- a/src/shared-components/selectorButton/__snapshots__/test.tsx.snap
+++ b/src/shared-components/selectorButton/__snapshots__/test.tsx.snap
@@ -43,7 +43,7 @@ exports[`<SelectorButton /> UI snapshots when Icon added displays check mark for
   -webkit-transition: color 350ms,-webkit-transform 350ms;
   -webkit-transition: color 350ms,transform 350ms;
   transition: color 350ms,transform 350ms;
-  color: #ffffff;
+  color: #FFFFFF;
 }
 
 .emotion-9 {
@@ -68,7 +68,7 @@ exports[`<SelectorButton /> UI snapshots when Icon added displays check mark for
 }
 
 .emotion-9:focus .emotion-6 {
-  box-shadow: 0px 0px 0px 2px #ffffff,0px 0px 0px 4px #332e54;
+  box-shadow: 0px 0px 0px 2px #FFFFFF,0px 0px 0px 4px #332E54;
   border-radius: 4px;
 }
 
@@ -95,8 +95,8 @@ exports[`<SelectorButton /> UI snapshots when Icon added displays check mark for
   -webkit-transition: background-color 350ms;
   transition: background-color 350ms;
   border-radius: 4px;
-  background-color: #332e54;
-  border-color: #332e54;
+  background-color: #332E54;
+  border-color: #332E54;
 }
 
 .emotion-3:active,
@@ -172,7 +172,7 @@ exports[`<SelectorButton /> UI snapshots when Icon added displays check mark for
 }
 
 .emotion-9:focus .emotion-6 {
-  box-shadow: 0px 0px 0px 2px #ffffff,0px 0px 0px 4px #332e54;
+  box-shadow: 0px 0px 0px 2px #FFFFFF,0px 0px 0px 4px #332E54;
   border-radius: 100%;
 }
 
@@ -218,7 +218,7 @@ exports[`<SelectorButton /> UI snapshots when Icon added displays check mark for
   -webkit-transition: color 350ms,-webkit-transform 350ms;
   -webkit-transition: color 350ms,transform 350ms;
   transition: color 350ms,transform 350ms;
-  color: #ffffff;
+  color: #FFFFFF;
 }
 
 .emotion-3 {
@@ -244,8 +244,8 @@ exports[`<SelectorButton /> UI snapshots when Icon added displays check mark for
   -webkit-transition: background-color 350ms;
   transition: background-color 350ms;
   border-radius: 100%;
-  background-color: #332e54;
-  border-color: #332e54;
+  background-color: #332E54;
+  border-color: #332E54;
 }
 
 .emotion-3:active,
@@ -359,7 +359,7 @@ exports[`<SelectorButton /> UI snapshots when Icon added displays icon for check
 }
 
 .emotion-9:focus .emotion-6 {
-  box-shadow: 0px 0px 0px 2px #ffffff,0px 0px 0px 4px #332e54;
+  box-shadow: 0px 0px 0px 2px #FFFFFF,0px 0px 0px 4px #332E54;
   border-radius: 4px;
 }
 
@@ -397,7 +397,7 @@ exports[`<SelectorButton /> UI snapshots when Icon added displays icon for check
   transition: background-color 350ms;
   border-radius: 4px;
   background-color: transparent;
-  border-color: #332e54;
+  border-color: #332E54;
 }
 
 .emotion-3:active,
@@ -473,7 +473,7 @@ exports[`<SelectorButton /> UI snapshots when Icon added displays icon for radio
 }
 
 .emotion-9:focus .emotion-6 {
-  box-shadow: 0px 0px 0px 2px #ffffff,0px 0px 0px 4px #332e54;
+  box-shadow: 0px 0px 0px 2px #FFFFFF,0px 0px 0px 4px #332E54;
   border-radius: 100%;
 }
 
@@ -545,7 +545,7 @@ exports[`<SelectorButton /> UI snapshots when Icon added displays icon for radio
   transition: background-color 350ms;
   border-radius: 100%;
   background-color: transparent;
-  border-color: #332e54;
+  border-color: #332E54;
 }
 
 .emotion-3:active,
@@ -655,7 +655,7 @@ exports[`<SelectorButton /> UI snapshots when Icon added hides icon for checkbox
 }
 
 .emotion-8:focus .emotion-5 {
-  box-shadow: 0px 0px 0px 2px #ffffff,0px 0px 0px 4px #332e54;
+  box-shadow: 0px 0px 0px 2px #FFFFFF,0px 0px 0px 4px #332E54;
   border-radius: 4px;
 }
 
@@ -683,7 +683,7 @@ exports[`<SelectorButton /> UI snapshots when Icon added hides icon for checkbox
   transition: background-color 350ms;
   border-radius: 4px;
   background-color: transparent;
-  border-color: #332e54;
+  border-color: #332E54;
 }
 
 .emotion-2:active,
@@ -745,7 +745,7 @@ exports[`<SelectorButton /> UI snapshots when Icon added hides icon for radio bu
 }
 
 .emotion-8:focus .emotion-5 {
-  box-shadow: 0px 0px 0px 2px #ffffff,0px 0px 0px 4px #332e54;
+  box-shadow: 0px 0px 0px 2px #FFFFFF,0px 0px 0px 4px #332E54;
   border-radius: 100%;
 }
 
@@ -800,7 +800,7 @@ exports[`<SelectorButton /> UI snapshots when Icon added hides icon for radio bu
   transition: background-color 350ms;
   border-radius: 100%;
   background-color: transparent;
-  border-color: #332e54;
+  border-color: #332E54;
 }
 
 .emotion-2:active,
@@ -869,7 +869,7 @@ exports[`<SelectorButton /> UI snapshots when checked type is primary 1`] = `
 }
 
 .emotion-9:focus .emotion-6 {
-  box-shadow: 0px 0px 0px 2px #ffffff,0px 0px 0px 4px #332e54;
+  box-shadow: 0px 0px 0px 2px #FFFFFF,0px 0px 0px 4px #332E54;
   border-radius: 100%;
 }
 
@@ -915,7 +915,7 @@ exports[`<SelectorButton /> UI snapshots when checked type is primary 1`] = `
   -webkit-transition: color 350ms,-webkit-transform 350ms;
   -webkit-transition: color 350ms,transform 350ms;
   transition: color 350ms,transform 350ms;
-  color: #ffffff;
+  color: #FFFFFF;
 }
 
 .emotion-3 {
@@ -941,8 +941,8 @@ exports[`<SelectorButton /> UI snapshots when checked type is primary 1`] = `
   -webkit-transition: background-color 350ms;
   transition: background-color 350ms;
   border-radius: 100%;
-  background-color: #332e54;
-  border-color: #332e54;
+  background-color: #332E54;
+  border-color: #332E54;
 }
 
 .emotion-3:active,
@@ -1022,7 +1022,7 @@ exports[`<SelectorButton /> UI snapshots when checked type is secondary 1`] = `
 }
 
 .emotion-9:focus .emotion-6 {
-  box-shadow: 0px 0px 0px 2px #ffffff,0px 0px 0px 4px #332e54;
+  box-shadow: 0px 0px 0px 2px #FFFFFF,0px 0px 0px 4px #332E54;
   border-radius: 100%;
 }
 
@@ -1068,7 +1068,7 @@ exports[`<SelectorButton /> UI snapshots when checked type is secondary 1`] = `
   -webkit-transition: color 350ms,-webkit-transform 350ms;
   -webkit-transition: color 350ms,transform 350ms;
   transition: color 350ms,transform 350ms;
-  color: #ffffff;
+  color: #FFFFFF;
 }
 
 .emotion-3 {
@@ -1094,8 +1094,8 @@ exports[`<SelectorButton /> UI snapshots when checked type is secondary 1`] = `
   -webkit-transition: background-color 350ms;
   transition: background-color 350ms;
   border-radius: 100%;
-  background-color: #a6a1e2;
-  border-color: #a6a1e2;
+  background-color: #A6A1E2;
+  border-color: #A6A1E2;
 }
 
 .emotion-3:active,
@@ -1175,7 +1175,7 @@ exports[`<SelectorButton /> UI snapshots when children is a node 1`] = `
 }
 
 .emotion-8:focus .emotion-5 {
-  box-shadow: 0px 0px 0px 2px #ffffff,0px 0px 0px 4px #332e54;
+  box-shadow: 0px 0px 0px 2px #FFFFFF,0px 0px 0px 4px #332E54;
   border-radius: 100%;
 }
 
@@ -1230,7 +1230,7 @@ exports[`<SelectorButton /> UI snapshots when children is a node 1`] = `
   transition: background-color 350ms;
   border-radius: 100%;
   background-color: transparent;
-  border-color: #332e54;
+  border-color: #332E54;
 }
 
 .emotion-2:active,
@@ -1299,7 +1299,7 @@ exports[`<SelectorButton /> UI snapshots when children is undefined 1`] = `
 }
 
 .emotion-6:focus .emotion-5 {
-  box-shadow: 0px 0px 0px 2px #ffffff,0px 0px 0px 4px #332e54;
+  box-shadow: 0px 0px 0px 2px #FFFFFF,0px 0px 0px 4px #332E54;
   border-radius: 100%;
 }
 
@@ -1354,7 +1354,7 @@ exports[`<SelectorButton /> UI snapshots when children is undefined 1`] = `
   transition: background-color 350ms;
   border-radius: 100%;
   background-color: transparent;
-  border-color: #332e54;
+  border-color: #332E54;
 }
 
 .emotion-2:active,
@@ -1445,7 +1445,7 @@ exports[`<SelectorButton /> UI snapshots when is checkbox 1`] = `
 }
 
 .emotion-8:focus .emotion-5 {
-  box-shadow: 0px 0px 0px 2px #ffffff,0px 0px 0px 4px #332e54;
+  box-shadow: 0px 0px 0px 2px #FFFFFF,0px 0px 0px 4px #332E54;
   border-radius: 4px;
 }
 
@@ -1473,7 +1473,7 @@ exports[`<SelectorButton /> UI snapshots when is checkbox 1`] = `
   transition: background-color 350ms;
   border-radius: 4px;
   background-color: transparent;
-  border-color: #332e54;
+  border-color: #332E54;
 }
 
 .emotion-2:active,
diff --git a/src/shared-components/tabs/__snapshots__/test.tsx.snap b/src/shared-components/tabs/__snapshots__/test.tsx.snap
index c0850e96d..f35a433fc 100644
--- a/src/shared-components/tabs/__snapshots__/test.tsx.snap
+++ b/src/shared-components/tabs/__snapshots__/test.tsx.snap
@@ -63,18 +63,18 @@ exports[`<Tabs /> UI snapshot renders with default props 1`] = `
   -webkit-transition: 350ms;
   transition: 350ms;
   border-radius: 0.25rem;
-  color: #332e54;
+  color: #332E54;
 }
 
 .emotion-0:hover {
-  color: #332e54;
+  color: #332E54;
   -webkit-transition: 350ms;
   transition: 350ms;
 }
 
 .emotion-0:focus {
   outline: none;
-  box-shadow: 0px 0px 0px 2px #ffffff,0px 0px 0px 4px #332e54;
+  box-shadow: 0px 0px 0px 2px #FFFFFF,0px 0px 0px 4px #332E54;
 }
 
 .emotion-2 {
@@ -107,18 +107,18 @@ exports[`<Tabs /> UI snapshot renders with default props 1`] = `
   -webkit-transition: 350ms;
   transition: 350ms;
   border-radius: 0.25rem;
-  color: #c3c0cd;
+  color: #C3C0CD;
 }
 
 .emotion-2:hover {
-  color: #332e54;
+  color: #332E54;
   -webkit-transition: 350ms;
   transition: 350ms;
 }
 
 .emotion-2:focus {
   outline: none;
-  box-shadow: 0px 0px 0px 2px #ffffff,0px 0px 0px 4px #332e54;
+  box-shadow: 0px 0px 0px 2px #FFFFFF,0px 0px 0px 4px #332E54;
 }
 
 <div
@@ -208,18 +208,18 @@ exports[`<Tabs /> UI snapshot renders with initialActiveTabId and onClick props
   -webkit-transition: 350ms;
   transition: 350ms;
   border-radius: 0.25rem;
-  color: #332e54;
+  color: #332E54;
 }
 
 .emotion-2:hover {
-  color: #332e54;
+  color: #332E54;
   -webkit-transition: 350ms;
   transition: 350ms;
 }
 
 .emotion-2:focus {
   outline: none;
-  box-shadow: 0px 0px 0px 2px #ffffff,0px 0px 0px 4px #332e54;
+  box-shadow: 0px 0px 0px 2px #FFFFFF,0px 0px 0px 4px #332E54;
 }
 
 .emotion-0 {
@@ -252,18 +252,18 @@ exports[`<Tabs /> UI snapshot renders with initialActiveTabId and onClick props
   -webkit-transition: 350ms;
   transition: 350ms;
   border-radius: 0.25rem;
-  color: #c3c0cd;
+  color: #C3C0CD;
 }
 
 .emotion-0:hover {
-  color: #332e54;
+  color: #332E54;
   -webkit-transition: 350ms;
   transition: 350ms;
 }
 
 .emotion-0:focus {
   outline: none;
-  box-shadow: 0px 0px 0px 2px #ffffff,0px 0px 0px 4px #332e54;
+  box-shadow: 0px 0px 0px 2px #FFFFFF,0px 0px 0px 4px #332E54;
 }
 
 <div
diff --git a/src/shared-components/toggle/__snapshots__/test.tsx.snap b/src/shared-components/toggle/__snapshots__/test.tsx.snap
index 4735aeb1f..2656441ed 100644
--- a/src/shared-components/toggle/__snapshots__/test.tsx.snap
+++ b/src/shared-components/toggle/__snapshots__/test.tsx.snap
@@ -41,7 +41,7 @@ exports[`<Toggle /> UI snapshot renders the component 1`] = `
 }
 
 .emotion-2 > div:first-of-type > input:focus {
-  box-shadow: 0px 0px 0px 2px #ffffff,0px 0px 0px 4px #332e54;
+  box-shadow: 0px 0px 0px 2px #FFFFFF,0px 0px 0px 4px #332E54;
   outline: none;
   border-radius: 12px;
 }
@@ -164,9 +164,9 @@ exports[`<Toggle /> UI snapshot renders the component 1`] = `
               "MozBoxSizing": "border-box",
               "WebkitBoxSizing": "border-box",
               "alignSelf": "center",
-              "background": "#ffffff",
+              "background": "#FFFFFF",
               "backgroundColor": "rgb(255,255,255)",
-              "border": "1px solid #ededf0",
+              "border": "1px solid #EDEDF0",
               "borderRadius": "50%",
               "boxShadow": "none",
               "boxSizing": "border-box",
diff --git a/src/shared-components/tooltip/__snapshots__/test.tsx.snap b/src/shared-components/tooltip/__snapshots__/test.tsx.snap
index 773036379..9bdad2018 100644
--- a/src/shared-components/tooltip/__snapshots__/test.tsx.snap
+++ b/src/shared-components/tooltip/__snapshots__/test.tsx.snap
@@ -19,10 +19,10 @@ exports[`<Tooltip /> UI snapshot renders content and children 1`] = `
 .emotion-7 {
   max-width: none;
   top: 120%;
-  background: #332e54;
+  background: #332E54;
   box-shadow: 0px 8px 24px rgba(51,46,84,0.05);
   border-radius: 0.5rem;
-  color: #ffffff;
+  color: #FFFFFF;
   min-width: 100px;
   opacity: 0;
   padding: 1rem;
@@ -64,7 +64,7 @@ exports[`<Tooltip /> UI snapshot renders content and children 1`] = `
   -webkit-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
-  color: #332e54;
+  color: #332E54;
   -webkit-transition: color 350ms,-webkit-transform 350ms;
   -webkit-transition: color 350ms,transform 350ms;
   transition: color 350ms,transform 350ms;
@@ -96,7 +96,7 @@ exports[`<Tooltip /> UI snapshot renders content and children 1`] = `
       >
         <svg
           className="emotion-4"
-          fill="#332e54"
+          fill="#332E54"
           height={16}
           viewBox="0 0 46.29 32.92"
           width={16}
diff --git a/stories/constants/availableConstants.stories.tsx b/stories/constants/availableConstants.stories.tsx
index e32b55ee1..1dc927d14 100644
--- a/stories/constants/availableConstants.stories.tsx
+++ b/stories/constants/availableConstants.stories.tsx
@@ -8,7 +8,6 @@ import renderConstantsMap from './renderConstantsMap';
 /* eslint-disable @typescript-eslint/no-unused-vars */
 const {
   BOX_SHADOWS,
-  COLORS,
   COLORS_PROP_TYPES,
   // TODO-theming: Add to story once finalized,
   // otherwise visual tests will fail with every change
diff --git a/stories/constants/color.tsx b/stories/constants/color.tsx
index e025cabcb..37aef31ea 100644
--- a/stories/constants/color.tsx
+++ b/stories/constants/color.tsx
@@ -3,30 +3,27 @@ import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 
 const ColorContainer = styled.div`
+  margin: 48px 48px 0 0;
   display: flex;
-  flex-direction: column;
-  align-items: center;
+  flex-flow: column nowrap;
   justify-content: center;
-  flex: 1;
-  padding: 16px;
+  align-items: center;
 `;
 
 const ColorSample = styled.div`
-  height: 25px;
-  width: 25px;
+  height: 40px;
+  width: 40px;
   background-color: ${(props) => props.color};
-  border-radius: 99999px;
-  border: 1px solid #000;
-  overflow: hidden;
+  border-radius: 40px;
 `;
 
 const ColorName = styled.div`
-  font-size: 12px;
+  font-size: 14px;
   padding-top: 8px;
 `;
 
 const ColorHex = styled.div`
-  font-size: 8px;
+  font-size: 12px;
 `;
 
 type ColorProps = {
diff --git a/stories/constants/colors.stories.tsx b/stories/constants/colors.stories.tsx
index b50ecf24e..ce28c97b6 100644
--- a/stories/constants/colors.stories.tsx
+++ b/stories/constants/colors.stories.tsx
@@ -1,54 +1,28 @@
 import React from 'react';
 import styled from '@emotion/styled';
-import { SPACER } from 'src/constants';
-import { Typography } from 'src/shared-components';
-import * as ALL_COLORS from 'src/constants/colors';
+import { useTheme } from 'emotion-theming';
 
 import Color from './color';
 
 const MainContainer = styled.div`
-  padding: ${SPACER.xlarge};
-`;
-
-const ColorsContainer = styled.div`
-  margin: ${SPACER.xlarge} 0;
   display: flex;
   flex-flow: row wrap;
-  justify-content: space-around;
+  justify-content: flex-start;
   align-items: center;
 `;
 
-/* eslint-disable @typescript-eslint/no-unused-vars */
-const {
-  default: defaultExport,
-  COLORS_PROP_TYPES,
-  ...VALID_COLORS
-} = ALL_COLORS;
-/* eslint-enable @typescript-eslint/no-unused-vars */
-
 export const COLORS = () => {
-  const colorKeys = Object.keys(VALID_COLORS) as Array<
-    keyof typeof VALID_COLORS
+  const theme = useTheme();
+  const colorKeys = Object.keys(theme.COLORS) as Array<
+    keyof typeof theme['COLORS']
   >;
 
   return (
     <MainContainer>
-      {colorKeys.map((category) => {
-        const categoryColors = VALID_COLORS[category];
-
+      {colorKeys.map((colorKey) => {
+        const colorHex = theme.COLORS[colorKey];
         return (
-          <React.Fragment key={category}>
-            <Typography.Title>{category}:</Typography.Title>
-            <ColorsContainer>
-              {Object.keys(categoryColors).map((color) => {
-                const colorHex = categoryColors[color] as string;
-
-                return (
-                  <Color key={color} colorName={color} colorHex={colorHex} />
-                );
-              })}
-            </ColorsContainer>
-          </React.Fragment>
+          <Color key={colorKey} colorName={colorKey} colorHex={colorHex} />
         );
       })}
     </MainContainer>
diff --git a/stories/constants/index.stories.tsx b/stories/constants/index.stories.tsx
index d406fbcb5..658c9b494 100644
--- a/stories/constants/index.stories.tsx
+++ b/stories/constants/index.stories.tsx
@@ -26,7 +26,7 @@ export default {
           <Source
             language="tsx"
             code={
-              "import { BOX_SHADOWS, COLORS, SPACER } from 'radiance-ui/lib/constants';"
+              "import { BOX_SHADOWS, SPACER } from 'radiance-ui/lib/constants';"
             }
           />
           <Stories includePrimary />