From 5368c661e8f633451f6651a96d1ea508b3fbca06 Mon Sep 17 00:00:00 2001
From: Gustavo Esquinca <g.esq.ca@gmail.com>
Date: Wed, 13 Nov 2019 21:48:32 -0500
Subject: [PATCH 01/17] added Text component story for color changes

---
 storybook/stories/Text.stories.js | 24 +++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/storybook/stories/Text.stories.js b/storybook/stories/Text.stories.js
index 91e114b6..d5fc9240 100644
--- a/storybook/stories/Text.stories.js
+++ b/storybook/stories/Text.stories.js
@@ -1,12 +1,30 @@
 import React from 'react';
-import { Text } from 'rimble-ui'
+import { Text } from 'rimble-ui';
 
 export default {
   title: 'Text'
-}
+};
 
 export const text = () => (
   <Text>
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam unde incidunt soluta!
   </Text>
-)
+);
+
+export const changeColors = () => (
+  <Text as={'p'} color={'white'} bg={'primary'}>
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam unde incidunt soluta!
+  </Text>
+);
+
+// export const caps = () => (
+//   <Text caps>
+//     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam unde incidunt soluta!
+//   </Text>
+// );
+
+// export const italic = () => (
+//   <Text italic>
+//     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam unde incidunt soluta!
+//   </Text>
+// );

From 35974e9afe9563e6308d0c67ab0291329d8bb7ee Mon Sep 17 00:00:00 2001
From: Gustavo Esquinca <g.esq.ca@gmail.com>
Date: Wed, 13 Nov 2019 21:48:48 -0500
Subject: [PATCH 02/17] added Heading component stories for sizes

---
 storybook/stories/Heading.stories.js | 37 +++++++++++++++++++++++++++-
 1 file changed, 36 insertions(+), 1 deletion(-)

diff --git a/storybook/stories/Heading.stories.js b/storybook/stories/Heading.stories.js
index 7b936537..9cd33935 100644
--- a/storybook/stories/Heading.stories.js
+++ b/storybook/stories/Heading.stories.js
@@ -9,4 +9,39 @@ export const heading = () => (
   <Heading>
     The quick brown fox jumps over the lazy dog
   </Heading>
-)
+);
+
+export const sizes = () => (
+  <>
+    <Heading fontSize={7}>XL - Quick zephyrs blow, vexing daft Jim.</Heading>
+    <Heading as={'h1'} fontSize={6}>H1 - Quick zephyrs blow, vexing daft Jim.</Heading>
+    <Heading as={'h2'} fontSize={5}>H2 - Quick zephyrs blow, vexing daft Jim.</Heading>
+    <Heading as={'h3'} fontSize={4}>H3 - Quick zephyrs blow, vexing daft Jim.</Heading>
+    <Heading as={'h4'} fontSize={3}>H4 - Quick zephyrs blow, vexing daft Jim.</Heading>
+    <Heading as={'h5'} fontSize={2}>H5 - Quick zephyrs blow, vexing daft Jim.</Heading>
+    <Heading as={'h6'} fontSize={1}>H6 - Quick zephyrs blow, vexing daft Jim.</Heading>
+    <Heading fontSize={0}>SX - Quick zephyrs blow, vexing daft Jim.</Heading>
+  </>
+);
+
+export const withAsNotation = () => (
+  <>
+    <Heading as={'h1'}>H1 - Quick zephyrs blow, vexing daft Jim.</Heading>
+    <Heading as={'h2'}>H2 - Quick zephyrs blow, vexing daft Jim.</Heading>
+    <Heading as={'h3'}>H3 - Quick zephyrs blow, vexing daft Jim.</Heading>
+    <Heading as={'h4'}>H4 - Quick zephyrs blow, vexing daft Jim.</Heading>
+    <Heading as={'h5'}>H5 - Quick zephyrs blow, vexing daft Jim.</Heading>
+    <Heading as={'h6'}>H6 - Quick zephyrs blow, vexing daft Jim.</Heading>
+  </>
+);
+
+export const withDotNotation = () => (
+  <>
+    <Heading.h1>H1 - Quick zephyrs blow, vexing daft Jim.</Heading.h1>
+    <Heading.h2>H2 - Quick zephyrs blow, vexing daft Jim.</Heading.h2>
+    <Heading.h3>H3 - Quick zephyrs blow, vexing daft Jim.</Heading.h3>
+    <Heading.h4>H4 - Quick zephyrs blow, vexing daft Jim.</Heading.h4>
+    <Heading.h5>H5 - Quick zephyrs blow, vexing daft Jim.</Heading.h5>
+    <Heading.h6>H6 - Quick zephyrs blow, vexing daft Jim.</Heading.h6>
+  </>
+);

From 35d24a0607099cad7ad6ddc8f6a8e221822c51da Mon Sep 17 00:00:00 2001
From: Gustavo Esquinca <g.esq.ca@gmail.com>
Date: Wed, 13 Nov 2019 21:49:20 -0500
Subject: [PATCH 03/17] added additional displays of Headings to demo app

---
 demo/src/App.js | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/demo/src/App.js b/demo/src/App.js
index 0a36909e..befaf949 100644
--- a/demo/src/App.js
+++ b/demo/src/App.js
@@ -55,6 +55,28 @@ const selectOptions = [
 
 const testComponents = props => (
   <React.Fragment>
+
+    <h1>H1 - Quick zephyrs blow, vexing daft Jim.</h1>
+    <h2>H1 - Quick zephyrs blow, vexing daft Jim.</h2>
+    <h3>H1 - Quick zephyrs blow, vexing daft Jim.</h3>
+    <h4>H1 - Quick zephyrs blow, vexing daft Jim.</h4>
+    <h5>H1 - Quick zephyrs blow, vexing daft Jim.</h5>
+    <h6>H1 - Quick zephyrs blow, vexing daft Jim.</h6>
+
+    <Heading as={'h1'}>H1 - Quick zephyrs blow, vexing daft Jim.</Heading>
+    <Heading as={'h2'}>H2 - Quick zephyrs blow, vexing daft Jim.</Heading>
+    <Heading as={'h3'}>H3 - Quick zephyrs blow, vexing daft Jim.</Heading>
+    <Heading as={'h4'}>H4 - Quick zephyrs blow, vexing daft Jim.</Heading>
+    <Heading as={'h5'}>H5 - Quick zephyrs blow, vexing daft Jim.</Heading>
+    <Heading as={'h6'}>H6 - Quick zephyrs blow, vexing daft Jim.</Heading>
+
+    <Heading as={'h1'} fontSize={1}>H1 - Quick zephyrs blow, vexing daft Jim.</Heading>
+    <Heading as={'h2'} fontSize={2}>H2 - Quick zephyrs blow, vexing daft Jim.</Heading>
+    <Heading as={'h3'} fontSize={3}>H3 - Quick zephyrs blow, vexing daft Jim.</Heading>
+    <Heading as={'h4'} fontSize={4}>H4 - Quick zephyrs blow, vexing daft Jim.</Heading>
+    <Heading as={'h5'} fontSize={5}>H5 - Quick zephyrs blow, vexing daft Jim.</Heading>
+    <Heading as={'h6'} fontSize={6}>H6 - Quick zephyrs blow, vexing daft Jim.</Heading>
+
     <Heading fontSize={7}>XL - Quick zephyrs blow, vexing daft Jim.</Heading>
 
     <Heading as={'h1'} fontSize={6}>H1 - Quick zephyrs blow, vexing daft Jim.</Heading>

From 5f4d23dcf4e0803f8e764ba84d73a9f143a85d32 Mon Sep 17 00:00:00 2001
From: Gustavo Esquinca <g.esq.ca@gmail.com>
Date: Wed, 13 Nov 2019 21:53:11 -0500
Subject: [PATCH 04/17] updated storybook to latest version

---
 storybook/package.json |  18 +-
 storybook/yarn.lock    | 736 ++++++++++++++++++-----------------------
 2 files changed, 326 insertions(+), 428 deletions(-)

diff --git a/storybook/package.json b/storybook/package.json
index 4ea8a13b..c57e1f04 100644
--- a/storybook/package.json
+++ b/storybook/package.json
@@ -5,17 +5,17 @@
   "license": "MIT",
   "dependencies": {
     "rimble-ui": "link:..",
-    "styled-components": "^4.3.2"
+    "styled-components": "^4.4.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.6.0",
-    "@storybook/addon-a11y": "^5.2.1",
-    "@storybook/addon-actions": "^5.2.1",
-    "@storybook/addon-docs": "^5.3.0-alpha.2",
-    "@storybook/addon-links": "^5.2.1",
-    "@storybook/addon-viewport": "^5.2.1",
-    "@storybook/addons": "^5.2.1",
-    "@storybook/react": "^5.2.1",
+    "@babel/core": "^7.7.2",
+    "@storybook/addon-a11y": "^5.2.6",
+    "@storybook/addon-actions": "^5.2.6",
+    "@storybook/addon-docs": "^5.2.6",
+    "@storybook/addon-links": "^5.2.6",
+    "@storybook/addon-viewport": "^5.2.6",
+    "@storybook/addons": "^5.2.6",
+    "@storybook/react": "^5.2.6",
     "babel-loader": "^8.0.6"
   },
   "scripts": {
diff --git a/storybook/yarn.lock b/storybook/yarn.lock
index 2b3e028e..4ac6cd59 100644
--- a/storybook/yarn.lock
+++ b/storybook/yarn.lock
@@ -29,7 +29,7 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
-"@babel/core@^7.0.0", "@babel/core@^7.4.5", "@babel/core@^7.6.0":
+"@babel/core@^7.0.0", "@babel/core@^7.4.5":
   version "7.6.2"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.6.2.tgz#069a776e8d5e9eefff76236bc8845566bd31dd91"
   integrity sha512-l8zto/fuoZIbncm+01p8zPSDZu/VuuJhAfA7d/AbzM09WR7iVhavvfNDYCNpo1VvLk6E6xgAoP9P+/EMJHuRkQ==
@@ -49,6 +49,26 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
+"@babel/core@^7.7.2":
+  version "7.7.2"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.7.2.tgz#ea5b99693bcfc058116f42fa1dd54da412b29d91"
+  integrity sha512-eeD7VEZKfhK1KUXGiyPFettgF3m513f8FoBSWiQ1xTvl1RAopLs42Wp9+Ze911I6H0N9lNqJMDgoZT7gHsipeQ==
+  dependencies:
+    "@babel/code-frame" "^7.5.5"
+    "@babel/generator" "^7.7.2"
+    "@babel/helpers" "^7.7.0"
+    "@babel/parser" "^7.7.2"
+    "@babel/template" "^7.7.0"
+    "@babel/traverse" "^7.7.2"
+    "@babel/types" "^7.7.2"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    json5 "^2.1.0"
+    lodash "^4.17.13"
+    resolve "^1.3.2"
+    semver "^5.4.1"
+    source-map "^0.5.0"
+
 "@babel/generator@^7.4.0", "@babel/generator@^7.6.0", "@babel/generator@^7.6.2":
   version "7.6.2"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.6.2.tgz#dac8a3c2df118334c2a29ff3446da1636a8f8c03"
@@ -59,6 +79,16 @@
     lodash "^4.17.13"
     source-map "^0.5.0"
 
+"@babel/generator@^7.7.2":
+  version "7.7.2"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.7.2.tgz#2f4852d04131a5e17ea4f6645488b5da66ebf3af"
+  integrity sha512-WthSArvAjYLz4TcbKOi88me+KmDJdKSlfwwN8CnUYn9jBkzhq0ZEPuBfkAWIvjJ3AdEV1Cf/+eSQTnp3IDJKlQ==
+  dependencies:
+    "@babel/types" "^7.7.2"
+    jsesc "^2.5.1"
+    lodash "^4.17.13"
+    source-map "^0.5.0"
+
 "@babel/helper-annotate-as-pure@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz#323d39dd0b50e10c7c06ca7d7638e6864d8c5c32"
@@ -129,6 +159,15 @@
     "@babel/template" "^7.1.0"
     "@babel/types" "^7.0.0"
 
+"@babel/helper-function-name@^7.7.0":
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.7.0.tgz#44a5ad151cfff8ed2599c91682dda2ec2c8430a3"
+  integrity sha512-tDsJgMUAP00Ugv8O2aGEua5I2apkaQO7lBGUq1ocwN3G23JE5Dcq0uh3GvFTChPa4b40AWiAsLvCZOA2rdnQ7Q==
+  dependencies:
+    "@babel/helper-get-function-arity" "^7.7.0"
+    "@babel/template" "^7.7.0"
+    "@babel/types" "^7.7.0"
+
 "@babel/helper-get-function-arity@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0.tgz#83572d4320e2a4657263734113c42868b64e49c3"
@@ -136,6 +175,13 @@
   dependencies:
     "@babel/types" "^7.0.0"
 
+"@babel/helper-get-function-arity@^7.7.0":
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.7.0.tgz#c604886bc97287a1d1398092bc666bc3d7d7aa2d"
+  integrity sha512-tLdojOTz4vWcEnHWHCuPN5P85JLZWbm5Fx5ZsMEMPhF3Uoe3O7awrbM2nQ04bDOUToH/2tH/ezKEOR8zEYzqyw==
+  dependencies:
+    "@babel/types" "^7.7.0"
+
 "@babel/helper-hoist-variables@^7.4.4":
   version "7.4.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.4.4.tgz#0298b5f25c8c09c53102d52ac4a98f773eb2850a"
@@ -224,6 +270,13 @@
   dependencies:
     "@babel/types" "^7.4.4"
 
+"@babel/helper-split-export-declaration@^7.7.0":
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.7.0.tgz#1365e74ea6c614deeb56ebffabd71006a0eb2300"
+  integrity sha512-HgYSI8rH08neWlAH3CcdkFg9qX9YsZysZI5GD8LjhQib/mM0jGOZOVkoUiiV2Hu978fRtjtsGsW6w0pKHUWtqA==
+  dependencies:
+    "@babel/types" "^7.7.0"
+
 "@babel/helper-wrap-function@^7.1.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.2.0.tgz#c4e0012445769e2815b55296ead43a958549f6fa"
@@ -243,6 +296,15 @@
     "@babel/traverse" "^7.6.2"
     "@babel/types" "^7.6.0"
 
+"@babel/helpers@^7.7.0":
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.7.0.tgz#359bb5ac3b4726f7c1fde0ec75f64b3f4275d60b"
+  integrity sha512-VnNwL4YOhbejHb7x/b5F39Zdg5vIQpUUNzJwx0ww1EcVRt41bbGRZWhAURrfY32T5zTT3qwNOQFWpn+P0i0a2g==
+  dependencies:
+    "@babel/template" "^7.7.0"
+    "@babel/traverse" "^7.7.0"
+    "@babel/types" "^7.7.0"
+
 "@babel/highlight@^7.0.0":
   version "7.5.0"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.5.0.tgz#56d11312bd9248fa619591d02472be6e8cb32540"
@@ -257,6 +319,11 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.6.2.tgz#205e9c95e16ba3b8b96090677a67c9d6075b70a1"
   integrity sha512-mdFqWrSPCmikBoaBYMuBulzTIKuXVPtEISFbRRVNwMWpCms/hmE2kRq0bblUHaNRKrjRlmVbx1sDHmjmRgD2Xg==
 
+"@babel/parser@^7.7.0", "@babel/parser@^7.7.2":
+  version "7.7.3"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.7.3.tgz#5fad457c2529de476a248f75b0f090b3060af043"
+  integrity sha512-bqv+iCo9i+uLVbI0ILzKkvMorqxouI+GbV13ivcARXn9NNEabi2IEz912IgNpT/60BNXac5dgcfjb94NjsF33A==
+
 "@babel/plugin-proposal-async-generator-functions@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.2.0.tgz#b289b306669dce4ad20b0252889a15768c9d417e"
@@ -861,7 +928,7 @@
   dependencies:
     regenerator-runtime "^0.13.2"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5":
   version "7.6.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.6.2.tgz#c3d6e41b304ef10dcf13777a33e7694ec4a9a6dd"
   integrity sha512-EXxN64agfUqqIGeEjI5dL5z0Sw0ZwWo1mLTi4mQowCZ42O59b7DRpZAnTC6OqdF28wMBMFKNb/4uFGrVaigSpg==
@@ -877,6 +944,15 @@
     "@babel/parser" "^7.6.0"
     "@babel/types" "^7.6.0"
 
+"@babel/template@^7.7.0":
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.7.0.tgz#4fadc1b8e734d97f56de39c77de76f2562e597d0"
+  integrity sha512-OKcwSYOW1mhWbnTBgQY5lvg1Fxg+VyfQGjcBduZFljfc044J5iDlnDSfhQ867O17XHiSCxYHUxHg2b7ryitbUQ==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@babel/parser" "^7.7.0"
+    "@babel/types" "^7.7.0"
+
 "@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0", "@babel/traverse@^7.4.4", "@babel/traverse@^7.5.5", "@babel/traverse@^7.6.0", "@babel/traverse@^7.6.2":
   version "7.6.2"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.6.2.tgz#b0e2bfd401d339ce0e6c05690206d1e11502ce2c"
@@ -892,6 +968,21 @@
     globals "^11.1.0"
     lodash "^4.17.13"
 
+"@babel/traverse@^7.7.0", "@babel/traverse@^7.7.2":
+  version "7.7.2"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.7.2.tgz#ef0a65e07a2f3c550967366b3d9b62a2dcbeae09"
+  integrity sha512-TM01cXib2+rgIZrGJOLaHV/iZUAxf4A0dt5auY6KNZ+cm6aschuJGqKJM3ROTt3raPUdIDk9siAufIFEleRwtw==
+  dependencies:
+    "@babel/code-frame" "^7.5.5"
+    "@babel/generator" "^7.7.2"
+    "@babel/helper-function-name" "^7.7.0"
+    "@babel/helper-split-export-declaration" "^7.7.0"
+    "@babel/parser" "^7.7.2"
+    "@babel/types" "^7.7.2"
+    debug "^4.1.0"
+    globals "^11.1.0"
+    lodash "^4.17.13"
+
 "@babel/types@^7.0.0", "@babel/types@^7.2.0", "@babel/types@^7.3.0", "@babel/types@^7.4.4", "@babel/types@^7.5.5", "@babel/types@^7.6.0":
   version "7.6.1"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.6.1.tgz#53abf3308add3ac2a2884d539151c57c4b3ac648"
@@ -901,6 +992,15 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.7.0", "@babel/types@^7.7.2":
+  version "7.7.2"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.7.2.tgz#550b82e5571dcd174af576e23f0adba7ffc683f7"
+  integrity sha512-YTf6PXoh3+eZgRCBzzP25Bugd2ngmpQVrk7kXX0i5N9BO7TFBtIgZYs7WtxtOGs8e6A4ZI7ECkbBCEHeXocvOA==
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.17.13"
+    to-fast-properties "^2.0.0"
+
 "@d8660091/react-popper@^1.0.4":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@d8660091/react-popper/-/react-popper-1.0.4.tgz#d924bec253b756f13b155bb15a25e13190509578"
@@ -910,7 +1010,7 @@
     prop-types "^15.6.2"
     recompose "^0.27.1"
 
-"@emotion/cache@^10.0.17", "@emotion/cache@^10.0.9":
+"@emotion/cache@^10.0.17":
   version "10.0.19"
   resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.19.tgz#d258d94d9c707dcadaf1558def968b86bb87ad71"
   integrity sha512-BoiLlk4vEsGBg2dAqGSJu0vJl/PgVtCYLBFJaEO8RmQzPugXewQCXZJNXTDFaRlfCs0W+quesayav4fvaif5WQ==
@@ -920,7 +1020,7 @@
     "@emotion/utils" "0.11.2"
     "@emotion/weak-memoize" "0.2.4"
 
-"@emotion/core@^10.0.14", "@emotion/core@^10.0.17", "@emotion/core@^10.0.9":
+"@emotion/core@^10.0.14":
   version "10.0.17"
   resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.17.tgz#3367376709721f4ee2068cff54ba581d362789d8"
   integrity sha512-gykyjjr0sxzVuZBVTVK4dUmYsorc2qLhdYgSiOVK+m7WXgcYTKZevGWZ7TLAgTZvMelCTvhNq8xnf8FR1IdTbg==
@@ -932,7 +1032,7 @@
     "@emotion/sheet" "0.9.3"
     "@emotion/utils" "0.11.2"
 
-"@emotion/css@^10.0.14", "@emotion/css@^10.0.9":
+"@emotion/css@^10.0.14":
   version "10.0.14"
   resolved "https://registry.yarnpkg.com/@emotion/css/-/css-10.0.14.tgz#95dacabdd0e22845d1a1b0b5968d9afa34011139"
   integrity sha512-MozgPkBEWvorcdpqHZE5x1D/PLEHUitALQCQYt2wayf4UNhpgQs2tN0UwHYS4FMy5ROBH+0ALyCFVYJ/ywmwlg==
@@ -984,7 +1084,7 @@
     "@emotion/serialize" "^0.11.11"
     "@emotion/utils" "0.11.2"
 
-"@emotion/styled@^10.0.14", "@emotion/styled@^10.0.17":
+"@emotion/styled@^10.0.14":
   version "10.0.17"
   resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-10.0.17.tgz#0cd38b8b36259541f2c6717fc22607a120623654"
   integrity sha512-zHMgWjHDMNjD+ux64POtDnjLAObniu3znxFBLSdV/RiEhSLjHIowfvSbbd/C33/3uwtI6Uzs2KXnRZtka/PpAQ==
@@ -1012,11 +1112,6 @@
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.4.tgz#622a72bebd1e3f48d921563b4b60a762295a81fc"
   integrity sha512-6PYY5DVdAY1ifaQW6XYTnOMihmBVT27elqSjEoodchsGjzYlEsTQMcEhSud99kVawatyTZRTiVkJ/c6lwbQ7nA==
 
-"@icons/material@^0.2.4":
-  version "0.2.4"
-  resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8"
-  integrity sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==
-
 "@mdx-js/loader@^1.1.0":
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/@mdx-js/loader/-/loader-1.5.0.tgz#aca337cd78f114e0451d59a06c9c66e6aeab345e"
@@ -1084,17 +1179,17 @@
     react-lifecycles-compat "^3.0.4"
     warning "^3.0.0"
 
-"@storybook/addon-a11y@^5.2.1":
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-a11y/-/addon-a11y-5.2.1.tgz#4ab013ea7910189cdbfc2dbfecdd6c2dab5f04d8"
-  integrity sha512-DrS+FR8efOKVYjN1wtm0b1M9+FrPQeBAMSsStiQvgzJ67ixg56wjGd4Euen9xbIWfbKK5cs3HVnj22iwuePBow==
-  dependencies:
-    "@storybook/addons" "5.2.1"
-    "@storybook/api" "5.2.1"
-    "@storybook/client-logger" "5.2.1"
-    "@storybook/components" "5.2.1"
-    "@storybook/core-events" "5.2.1"
-    "@storybook/theming" "5.2.1"
+"@storybook/addon-a11y@^5.2.6":
+  version "5.2.6"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-a11y/-/addon-a11y-5.2.6.tgz#8aa603cac1eaa92ef53c51b842e502101dc5d074"
+  integrity sha512-LlY5TaZNDxl5MP8u2qCJmg8GhvbtYGXmWJv0GMof0cw1fuLMEBHKAa5vK2oWQdPjGpoSAYN80dqn3TyCqsoGnQ==
+  dependencies:
+    "@storybook/addons" "5.2.6"
+    "@storybook/api" "5.2.6"
+    "@storybook/client-logger" "5.2.6"
+    "@storybook/components" "5.2.6"
+    "@storybook/core-events" "5.2.6"
+    "@storybook/theming" "5.2.6"
     axe-core "^3.3.2"
     common-tags "^1.8.0"
     core-js "^3.0.1"
@@ -1107,17 +1202,17 @@
     redux "^4.0.1"
     util-deprecate "^1.0.2"
 
-"@storybook/addon-actions@5.2.1", "@storybook/addon-actions@^5.2.1":
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-5.2.1.tgz#2096e7f938b289be48af6f0adfd620997e7a420c"
-  integrity sha512-tu4LGeRGAq+sLlsRPE1PzGyYU9JyM3HMLXnOCh5dvRSS8wnoDw1zQ55LPOXH6aoJGdsrvktiw+uTVf4OyN7ryg==
-  dependencies:
-    "@storybook/addons" "5.2.1"
-    "@storybook/api" "5.2.1"
-    "@storybook/client-api" "5.2.1"
-    "@storybook/components" "5.2.1"
-    "@storybook/core-events" "5.2.1"
-    "@storybook/theming" "5.2.1"
+"@storybook/addon-actions@^5.2.6":
+  version "5.2.6"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-5.2.6.tgz#4fe411fc3bdb1d44058f23fbc8eb8d1bac29d521"
+  integrity sha512-CwTJPqe3NcEU7oqS5KoiCX9FXYmI2Dyp1Sh6r90JmXZ8B49ZXm6BDLX0gS3TooD6/AcdU8xdBcSvN0CkxQ5QGA==
+  dependencies:
+    "@storybook/addons" "5.2.6"
+    "@storybook/api" "5.2.6"
+    "@storybook/client-api" "5.2.6"
+    "@storybook/components" "5.2.6"
+    "@storybook/core-events" "5.2.6"
+    "@storybook/theming" "5.2.6"
     core-js "^3.0.1"
     fast-deep-equal "^2.0.1"
     global "^4.3.2"
@@ -1127,10 +1222,10 @@
     react-inspector "^3.0.2"
     uuid "^3.3.2"
 
-"@storybook/addon-docs@^5.3.0-alpha.2":
-  version "5.3.0-alpha.5"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-docs/-/addon-docs-5.3.0-alpha.5.tgz#42713cbf0fc835bb625ea5aa4d9ff0f4e1fab127"
-  integrity sha512-+qJNcGNGuHWntHHBh0tyTEwZxAWP3bnUQfs7skGGMjASGFTrJKi6egC5CZkdKc4ov9Ct0ylAYRPtSt+RZmXJpQ==
+"@storybook/addon-docs@^5.2.6":
+  version "5.2.6"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-docs/-/addon-docs-5.2.6.tgz#73184f37b2716928b81a8ff4f43ac3bf51332ab0"
+  integrity sha512-HLOlT3+FdxYWPFuMtym6tTqEpItobdOmjNNLZPVzGdbmj7lFEGDpW6JiZuYoEQaXW2rm0v7EpdoE3Szr133GOQ==
   dependencies:
     "@babel/generator" "^7.4.0"
     "@babel/parser" "^7.4.2"
@@ -1138,236 +1233,140 @@
     "@mdx-js/loader" "^1.1.0"
     "@mdx-js/mdx" "^1.1.0"
     "@mdx-js/react" "^1.0.27"
-    "@storybook/addons" "5.3.0-alpha.5"
-    "@storybook/api" "5.3.0-alpha.5"
-    "@storybook/components" "5.3.0-alpha.5"
-    "@storybook/router" "5.3.0-alpha.5"
-    "@storybook/source-loader" "5.3.0-alpha.5"
-    "@storybook/theming" "5.3.0-alpha.5"
+    "@storybook/addons" "5.2.6"
+    "@storybook/api" "5.2.6"
+    "@storybook/components" "5.2.6"
+    "@storybook/router" "5.2.6"
+    "@storybook/source-loader" "5.2.6"
+    "@storybook/theming" "5.2.6"
     core-js "^3.0.1"
     global "^4.3.2"
     js-string-escape "^1.0.1"
-    lodash "^4.17.11"
+    lodash "^4.17.15"
     prop-types "^15.7.2"
 
-"@storybook/addon-knobs@5.2.1":
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-knobs/-/addon-knobs-5.2.1.tgz#6bc2f7e254ccce09d6f5136e9cce63cd808c9853"
-  integrity sha512-JCSqrGYyVVBNkudhvla7qc9m0/Mn1UMaMzIxH5kewEE1KWZcCkdXD5hDASN39pkn3mX1yyqveP8jiyIL9vVBLg==
-  dependencies:
-    "@storybook/addons" "5.2.1"
-    "@storybook/api" "5.2.1"
-    "@storybook/client-api" "5.2.1"
-    "@storybook/components" "5.2.1"
-    "@storybook/core-events" "5.2.1"
-    "@storybook/theming" "5.2.1"
-    copy-to-clipboard "^3.0.8"
-    core-js "^3.0.1"
-    escape-html "^1.0.3"
-    fast-deep-equal "^2.0.1"
-    global "^4.3.2"
-    lodash "^4.17.11"
-    prop-types "^15.7.2"
-    qs "^6.6.0"
-    react-color "^2.17.0"
-    react-lifecycles-compat "^3.0.4"
-    react-select "^3.0.0"
-
-"@storybook/addon-links@^5.2.1":
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-5.2.1.tgz#ec1fc92ed4d840ba758f40167c752f48562a906f"
-  integrity sha512-N5f+lzai+ctHfzHoYWECYsg3lKGJuqhkVctro46fHSW7s/GB8+l78nDcV7hDjNEXDES8QN5C1fPYihatdgpSJA==
+"@storybook/addon-links@^5.2.6":
+  version "5.2.6"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-5.2.6.tgz#4428127552129a5add732a6d15ff8d12886b6373"
+  integrity sha512-YourSVtTtsCJnjQRKsb8kRD1XWd+XYv5ZR4Teuq7xDGcsFthVwavnql3pDHL60KWXHPXc46t/8r5bw7Yi8Kzzw==
   dependencies:
-    "@storybook/addons" "5.2.1"
-    "@storybook/core-events" "5.2.1"
-    "@storybook/router" "5.2.1"
+    "@storybook/addons" "5.2.6"
+    "@storybook/core-events" "5.2.6"
+    "@storybook/router" "5.2.6"
     common-tags "^1.8.0"
     core-js "^3.0.1"
     global "^4.3.2"
     prop-types "^15.7.2"
     qs "^6.6.0"
 
-"@storybook/addon-viewport@^5.2.1":
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-viewport/-/addon-viewport-5.2.1.tgz#3cc8ec9f2ee1dd0a474cb8dd47ecee8428defe77"
-  integrity sha512-RZU+l99X5SfvBfYbqAbgGgL95g19/dddPwlijLOqFcUlf+tk7WD08PRbizWlnRFZ15J0ytVgf256XSQoQ1oMCQ==
-  dependencies:
-    "@storybook/addons" "5.2.1"
-    "@storybook/api" "5.2.1"
-    "@storybook/client-logger" "5.2.1"
-    "@storybook/components" "5.2.1"
-    "@storybook/core-events" "5.2.1"
-    "@storybook/theming" "5.2.1"
+"@storybook/addon-viewport@^5.2.6":
+  version "5.2.6"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-viewport/-/addon-viewport-5.2.6.tgz#1ee72bebfde857f460e534ab7f7d591daa844c56"
+  integrity sha512-bI287K7aFp22WatVQO3PEzqMNm4JBe09Bo2Tv1Cjj+kDgAwWHdtwb0mA++4D/Q+h12lXtSXqsJKbu6pd+0R7Fw==
+  dependencies:
+    "@storybook/addons" "5.2.6"
+    "@storybook/api" "5.2.6"
+    "@storybook/client-logger" "5.2.6"
+    "@storybook/components" "5.2.6"
+    "@storybook/core-events" "5.2.6"
+    "@storybook/theming" "5.2.6"
     core-js "^3.0.1"
     global "^4.3.2"
     memoizerific "^1.11.3"
     prop-types "^15.7.2"
     util-deprecate "^1.0.2"
 
-"@storybook/addons@5.2.1", "@storybook/addons@^5.2.1":
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-5.2.1.tgz#6e52aa1fa2737e170fb675eb1fcceebd0a915a0b"
-  integrity sha512-kdx97tTKsMf/lBlT40uLYsHMF1J71mn2j41RNaCXmWw/PrKCDmiNfinemN2wtbwRSvGqb3q/BAqjKLvUtWynGg==
+"@storybook/addons@5.2.6", "@storybook/addons@^5.2.6":
+  version "5.2.6"
+  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-5.2.6.tgz#c1278137acb3502e068b0b0d07a8371c607e9c02"
+  integrity sha512-5MF64lsAhIEMxTbVpYROz5Wez595iwSw45yXyP8gWt12d+EmFO5tdy7cYJCxcMuVhDfaCI78tFqS9orr1atVyA==
   dependencies:
-    "@storybook/api" "5.2.1"
-    "@storybook/channels" "5.2.1"
-    "@storybook/client-logger" "5.2.1"
-    "@storybook/core-events" "5.2.1"
+    "@storybook/api" "5.2.6"
+    "@storybook/channels" "5.2.6"
+    "@storybook/client-logger" "5.2.6"
+    "@storybook/core-events" "5.2.6"
     core-js "^3.0.1"
     global "^4.3.2"
     util-deprecate "^1.0.2"
 
-"@storybook/addons@5.3.0-alpha.5":
-  version "5.3.0-alpha.5"
-  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-5.3.0-alpha.5.tgz#f63b79cc150b8a6c07edcd5a67cdf15f25c1fd99"
-  integrity sha512-OrZnKKWCDyqp8+Fqv9Ykv8t3xVc1ueZwFJLpepl4afUQjzwtB4sTe8sOyHCPGEahm5q0bN8afMXckQ334wK/0g==
+"@storybook/api@5.2.6":
+  version "5.2.6"
+  resolved "https://registry.yarnpkg.com/@storybook/api/-/api-5.2.6.tgz#43d3c20b90e585e6c94b36e29845d39704ae2135"
+  integrity sha512-X/di44/SAL68mD6RHTX2qdWwhjRW6BgcfPtu0dMd38ErB3AfsfP4BITXs6kFOeSM8kWiaQoyuw0pOBzA8vlYug==
   dependencies:
-    "@storybook/api" "5.3.0-alpha.5"
-    "@storybook/channels" "5.3.0-alpha.5"
-    "@storybook/client-logger" "5.3.0-alpha.5"
-    "@storybook/core-events" "5.3.0-alpha.5"
-    core-js "^3.0.1"
-    global "^4.3.2"
-    util-deprecate "^1.0.2"
-
-"@storybook/api@5.2.1":
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/@storybook/api/-/api-5.2.1.tgz#b9cd6639019e044a8ade6fb358cade79c0e3b5d3"
-  integrity sha512-EXN6sqkGHRuNq0W6BZXOlxe2I2dmN0yUdQLiUOpzH2I3mXnVHpad/0v76dRc9fZbC4LaYUSxR8lBTr0rqIb4mA==
-  dependencies:
-    "@storybook/channels" "5.2.1"
-    "@storybook/client-logger" "5.2.1"
-    "@storybook/core-events" "5.2.1"
-    "@storybook/router" "5.2.1"
-    "@storybook/theming" "5.2.1"
+    "@storybook/channels" "5.2.6"
+    "@storybook/client-logger" "5.2.6"
+    "@storybook/core-events" "5.2.6"
+    "@storybook/router" "5.2.6"
+    "@storybook/theming" "5.2.6"
     core-js "^3.0.1"
     fast-deep-equal "^2.0.1"
     global "^4.3.2"
-    lodash "^4.17.11"
+    lodash "^4.17.15"
     memoizerific "^1.11.3"
     prop-types "^15.6.2"
     react "^16.8.3"
     semver "^6.0.0"
     shallow-equal "^1.1.0"
     store2 "^2.7.1"
-    telejson "^2.2.2"
+    telejson "^3.0.2"
     util-deprecate "^1.0.2"
 
-"@storybook/api@5.3.0-alpha.5":
-  version "5.3.0-alpha.5"
-  resolved "https://registry.yarnpkg.com/@storybook/api/-/api-5.3.0-alpha.5.tgz#a0d7a46623071c9e300ca3e06019af1009621e84"
-  integrity sha512-oLVe/TfwqgYCSJYV3GCnENtntb0dgKTXgRqigZDwfFLiZjdWslY/d3gyAtu+jzO7iobfRbM7VBLdOtIYSg0v+g==
+"@storybook/channel-postmessage@5.2.6":
+  version "5.2.6"
+  resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-5.2.6.tgz#60aaef0e80300c9812a571ca3ce0f28e2c404f04"
+  integrity sha512-y+63wWiEc/Q4s4MZ3KJ//5A8j5VLufxuLvPxwv9FuS4z8lmN0fqeGJn857qIlFGbZhzsQaoRdmfsCQpBBgUneg==
   dependencies:
-    "@storybook/channels" "5.3.0-alpha.5"
-    "@storybook/client-logger" "5.3.0-alpha.5"
-    "@storybook/core-events" "5.3.0-alpha.5"
-    "@storybook/router" "5.3.0-alpha.5"
-    "@storybook/theming" "5.3.0-alpha.5"
+    "@storybook/channels" "5.2.6"
+    "@storybook/client-logger" "5.2.6"
     core-js "^3.0.1"
-    fast-deep-equal "^2.0.1"
     global "^4.3.2"
-    lodash "^4.17.11"
-    memoizerific "^1.11.3"
-    prop-types "^15.6.2"
-    react "^16.8.3"
-    semver "^6.0.0"
-    shallow-equal "^1.1.0"
-    store2 "^2.7.1"
-    telejson "^2.2.2"
-    util-deprecate "^1.0.2"
+    telejson "^3.0.2"
 
-"@storybook/channel-postmessage@5.2.1":
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-5.2.1.tgz#85541f926d61eedbe2a687bb394d37fc06252751"
-  integrity sha512-gmnn9qU1iLCpfF6bZuEM3QQOZsAviWeIpiezjrd/qkxatgr3qtbXd4EoZpcVuQw314etarWtNxVpcX6PXcASjQ==
+"@storybook/channels@5.2.6":
+  version "5.2.6"
+  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-5.2.6.tgz#e2837508864dc4d5b5e03f078886f0ce113762ea"
+  integrity sha512-/UsktYsXuvb1efjVPCEivhh5ywRhm7hl73pQnpJLJHRqyLMM2I5nGPFELTTNuU9yWy7sP9QL5gRqBBPe1sqjZQ==
   dependencies:
-    "@storybook/channels" "5.2.1"
-    "@storybook/client-logger" "5.2.1"
     core-js "^3.0.1"
-    global "^4.3.2"
-    telejson "^2.2.2"
 
-"@storybook/channels@5.2.1":
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-5.2.1.tgz#e5e35f6d9fb1b1fba4f18b171f31d5f6540f3bef"
-  integrity sha512-AsF/Hwx91SDOgiOGOBSWS8EJAgqVm939n2nkfdLSJQQmX5EdPRAc3EIE3f13tyQub2yNx0OR4UzQDWgjwfVsEQ==
-  dependencies:
-    core-js "^3.0.1"
-
-"@storybook/channels@5.3.0-alpha.5":
-  version "5.3.0-alpha.5"
-  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-5.3.0-alpha.5.tgz#e7f143bc7941602bdf65218ca21c05471d0c07af"
-  integrity sha512-AzxkRE/0BVoTMUUrh8ZA7FPtaE/DzIF/IlKSIzgHfSBu66j/L8/vLY5cTGCdvO1Kfh2VGZ4Z7upmmEPzznQthg==
-  dependencies:
-    core-js "^3.0.1"
-
-"@storybook/client-api@5.2.1":
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-5.2.1.tgz#bdd335187279a4ab45e20d6d5e9131e5f7098acf"
-  integrity sha512-VxexqxrbORCGqwx2j0/91Eu1A/vq+rSVIesWwzIowmoLfBwRwDdskO20Yn9U7iMSpux4RvHGF6y1Q1ZtnXm9aA==
-  dependencies:
-    "@storybook/addons" "5.2.1"
-    "@storybook/channel-postmessage" "5.2.1"
-    "@storybook/channels" "5.2.1"
-    "@storybook/client-logger" "5.2.1"
-    "@storybook/core-events" "5.2.1"
-    "@storybook/router" "5.2.1"
+"@storybook/client-api@5.2.6":
+  version "5.2.6"
+  resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-5.2.6.tgz#5760cb4302d82ce9210a63f3f55b1e05f04759c1"
+  integrity sha512-upynf4ER2fkThNnE+mBlfRFFJxTiOh60fho1ODFcBun9BbvRD2wOHLvw7+WigIhb99HM20vk8f2dhv3I5Udzlg==
+  dependencies:
+    "@storybook/addons" "5.2.6"
+    "@storybook/channel-postmessage" "5.2.6"
+    "@storybook/channels" "5.2.6"
+    "@storybook/client-logger" "5.2.6"
+    "@storybook/core-events" "5.2.6"
+    "@storybook/router" "5.2.6"
     common-tags "^1.8.0"
     core-js "^3.0.1"
     eventemitter3 "^4.0.0"
     global "^4.3.2"
     is-plain-object "^3.0.0"
-    lodash "^4.17.11"
+    lodash "^4.17.15"
     memoizerific "^1.11.3"
     qs "^6.6.0"
     util-deprecate "^1.0.2"
 
-"@storybook/client-logger@5.2.1":
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-5.2.1.tgz#5c1f122b65386f04a6ad648808dfa89f2d852d7a"
-  integrity sha512-wzxSE9t3DaLCdd/gnGFnjevmYRZ92F3TEwhUP/QDXM9cZkNsRKHkjE61qjiO5aQPaZQG6Ea9ayWEQEMgZXDucg==
+"@storybook/client-logger@5.2.6":
+  version "5.2.6"
+  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-5.2.6.tgz#cfc4536e9b724b086f7509c2bb34c221016713c9"
+  integrity sha512-hJvPD267cCwLIRMOISjDH8h9wbwOcXIJip29UlJbU9iMtZtgE+YelmlpmZJvqcDfUiXWWrOh7tP76mj8EAfwIQ==
   dependencies:
     core-js "^3.0.1"
 
-"@storybook/client-logger@5.3.0-alpha.5":
-  version "5.3.0-alpha.5"
-  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-5.3.0-alpha.5.tgz#c9f0e036e2279c4cfa5fa8c670c3f33cf5967436"
-  integrity sha512-PzMzmPC7CdvqennPmCIzfwZEvyhxcvIPJFql2+HLcMgT5xXsf4+oF3JdwKCWO5EQR9MoT6LtruUb0pxbYd79AA==
-  dependencies:
-    core-js "^3.0.1"
-
-"@storybook/components@5.2.1":
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-5.2.1.tgz#a4519c5d435c2c25c481e2b64a768e1e568a223f"
-  integrity sha512-cik5J/mTm1b1TOI17qM+2Mikk3rjb3SbBD4WlNz3Zvn+Hw0ukgbx6kQwVBgujhMlDtsHreidyEgIg4TM13S0Tg==
-  dependencies:
-    "@storybook/client-logger" "5.2.1"
-    "@storybook/theming" "5.2.1"
-    "@types/react-syntax-highlighter" "10.1.0"
-    core-js "^3.0.1"
-    global "^4.3.2"
-    markdown-to-jsx "^6.9.1"
-    memoizerific "^1.11.3"
-    polished "^3.3.1"
-    popper.js "^1.14.7"
-    prop-types "^15.7.2"
-    react "^16.8.3"
-    react-dom "^16.8.3"
-    react-focus-lock "^1.18.3"
-    react-helmet-async "^1.0.2"
-    react-popper-tooltip "^2.8.3"
-    react-syntax-highlighter "^8.0.1"
-    react-textarea-autosize "^7.1.0"
-    simplebar-react "^1.0.0-alpha.6"
-
-"@storybook/components@5.3.0-alpha.5":
-  version "5.3.0-alpha.5"
-  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-5.3.0-alpha.5.tgz#dca569dce1b12ff23f1c64f31d555c302be734a7"
-  integrity sha512-7otNAUtw+2sN3s+mIIVJSpDNUILZQ1e9+UQvJNa3RzI2SdW+7IlZP7+4GWTDbUE14YTlb8joGfmYmbJiXfo2dQ==
+"@storybook/components@5.2.6":
+  version "5.2.6"
+  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-5.2.6.tgz#cddb60227720aea7cae34fe782d0370bcdbd4005"
+  integrity sha512-C7OS90bZ1ZvxlWUZ3B2MPFFggqAtUo7X8DqqS3IwsuDUiK9dD/KS0MwPgOuFDnOTW1R5XqmQd/ylt53w3s/U5g==
   dependencies:
-    "@storybook/client-logger" "5.3.0-alpha.5"
-    "@storybook/theming" "5.3.0-alpha.5"
+    "@storybook/client-logger" "5.2.6"
+    "@storybook/theming" "5.2.6"
     "@types/react-syntax-highlighter" "10.1.0"
+    "@types/react-textarea-autosize" "^4.3.3"
     core-js "^3.0.1"
     global "^4.3.2"
     markdown-to-jsx "^6.9.1"
@@ -1383,41 +1382,33 @@
     react-syntax-highlighter "^8.0.1"
     react-textarea-autosize "^7.1.0"
     simplebar-react "^1.0.0-alpha.6"
-    ts-dedent "^1.1.0"
-
-"@storybook/core-events@5.2.1":
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-5.2.1.tgz#bc28d704938d26dd544d0362d38ef08e8cfed916"
-  integrity sha512-AIYV/I+baQ0KxvEM7QAKqUedLn2os0XU9HTdtfZJTC3U9wjmR2ah2ScD6T0n7PBz3MderkvZG6dNjs9h8gRquQ==
-  dependencies:
-    core-js "^3.0.1"
 
-"@storybook/core-events@5.3.0-alpha.5":
-  version "5.3.0-alpha.5"
-  resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-5.3.0-alpha.5.tgz#9e8bf8e7ad52d14279786fbbf72aa0b31e286e9a"
-  integrity sha512-xXrs+Aa8nVbjsGXLjCThxPbC2Ek85tA7lp6aYIcvHu/Y20aTPlD7wVamZDr94jQSDfu+q+Ff2vevN3N+6WU0AA==
+"@storybook/core-events@5.2.6":
+  version "5.2.6"
+  resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-5.2.6.tgz#34c9aae256e7e5f4a565b81f1e77dda8bccc6752"
+  integrity sha512-W8kLJ7tc0aAxs11CPUxUOCReocKL4MYGyjTg8qwk0USLzPUb/FUQWmhcm2ilFz6Nz8dXLcKrXdRVYTmiMsgAeg==
   dependencies:
     core-js "^3.0.1"
 
-"@storybook/core@5.2.1":
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/@storybook/core/-/core-5.2.1.tgz#3aa17c6fa9b02704723501d32884453869e3c06c"
-  integrity sha512-mGGvN3GWeLxZ9lYZ4IuD1IoJD+cn6XXm2Arzw+k6KEtJJDFrC5SjESTDGLVFienX5s2tgH4FjYb9Ps9sKfhHlg==
+"@storybook/core@5.2.6":
+  version "5.2.6"
+  resolved "https://registry.yarnpkg.com/@storybook/core/-/core-5.2.6.tgz#60c092607158d7d28db59f7e67da4f7e12703fb2"
+  integrity sha512-q7Ful7TCm9nmjgLsJFqIwVv395NlaOXgGajyaQCQlCKB2V+jgs7GDmdCNNdWAOue4eAsFU6wQSP9lWtq0yzK4w==
   dependencies:
     "@babel/plugin-proposal-class-properties" "^7.3.3"
     "@babel/plugin-proposal-object-rest-spread" "^7.3.2"
     "@babel/plugin-syntax-dynamic-import" "^7.2.0"
     "@babel/plugin-transform-react-constant-elements" "^7.2.0"
     "@babel/preset-env" "^7.4.5"
-    "@storybook/addons" "5.2.1"
-    "@storybook/channel-postmessage" "5.2.1"
-    "@storybook/client-api" "5.2.1"
-    "@storybook/client-logger" "5.2.1"
-    "@storybook/core-events" "5.2.1"
-    "@storybook/node-logger" "5.2.1"
-    "@storybook/router" "5.2.1"
-    "@storybook/theming" "5.2.1"
-    "@storybook/ui" "5.2.1"
+    "@storybook/addons" "5.2.6"
+    "@storybook/channel-postmessage" "5.2.6"
+    "@storybook/client-api" "5.2.6"
+    "@storybook/client-logger" "5.2.6"
+    "@storybook/core-events" "5.2.6"
+    "@storybook/node-logger" "5.2.6"
+    "@storybook/router" "5.2.6"
+    "@storybook/theming" "5.2.6"
+    "@storybook/ui" "5.2.6"
     airbnb-js-shims "^1 || ^2"
     ansi-to-html "^0.6.11"
     autoprefixer "^9.4.9"
@@ -1473,10 +1464,10 @@
     webpack-dev-middleware "^3.7.0"
     webpack-hot-middleware "^2.25.0"
 
-"@storybook/node-logger@5.2.1":
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-5.2.1.tgz#00d8c0dc9dfd482e7d1d244a59c46726c6b761d9"
-  integrity sha512-rz+snXZyKwTegKEf15w4uaFWIKpgaWzTw+Ar8mxa+mX7C2DP65TOc+JGYZ7lsXdred+0WP0DhnmhGu2cX8z3lA==
+"@storybook/node-logger@5.2.6":
+  version "5.2.6"
+  resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-5.2.6.tgz#e353aff14375bef9e922c217a0afb50f93e2ceb1"
+  integrity sha512-Z3mn9CUSiG7kR2OBoz4lNeoeBS094h5d9wufZSp5S+M47L6KEXmTgNcuePKj+t8Z8KT/Ph8B63bjChseKp3DNw==
   dependencies:
     chalk "^2.4.2"
     core-js "^3.0.1"
@@ -1484,18 +1475,19 @@
     pretty-hrtime "^1.0.3"
     regenerator-runtime "^0.12.1"
 
-"@storybook/react@^5.2.1":
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/@storybook/react/-/react-5.2.1.tgz#860970fa8f0d49967862b496af4ef3712f0b96dd"
-  integrity sha512-brUG8iK2+1Fk5VFZWpAoSokCx21MaPX1zSAVA+Z/Ia0I0sFfurhpQgAGlVePTy9r7dtEEEdniZVtJOH/tHqk4Q==
+"@storybook/react@^5.2.6":
+  version "5.2.6"
+  resolved "https://registry.yarnpkg.com/@storybook/react/-/react-5.2.6.tgz#e61c0ed184add9e715191649ddb995eead756a90"
+  integrity sha512-yzhxxuoUx4jwn+PymU5wemzLb9ryXD9Y2Dv5kipCDkUS4cqDJwKcVO8tyhMigFUGTHREmJTmAESCKKPDR45SiQ==
   dependencies:
     "@babel/plugin-transform-react-constant-elements" "^7.2.0"
     "@babel/preset-flow" "^7.0.0"
     "@babel/preset-react" "^7.0.0"
-    "@storybook/addons" "5.2.1"
-    "@storybook/core" "5.2.1"
-    "@storybook/node-logger" "5.2.1"
+    "@storybook/addons" "5.2.6"
+    "@storybook/core" "5.2.6"
+    "@storybook/node-logger" "5.2.6"
     "@svgr/webpack" "^4.0.3"
+    "@types/webpack-env" "^1.13.7"
     babel-plugin-add-react-displayname "^0.0.5"
     babel-plugin-named-asset-import "^0.3.1"
     babel-plugin-react-docgen "^3.0.0"
@@ -1503,7 +1495,7 @@
     common-tags "^1.8.0"
     core-js "^3.0.1"
     global "^4.3.2"
-    lodash "^4.17.11"
+    lodash "^4.17.15"
     mini-css-extract-plugin "^0.7.0"
     prop-types "^15.7.2"
     react-dev-utils "^9.0.0"
@@ -1511,39 +1503,26 @@
     semver "^6.0.0"
     webpack "^4.33.0"
 
-"@storybook/router@5.2.1":
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/@storybook/router/-/router-5.2.1.tgz#9c49df79343d3be10c7f984858fb5c9ae3eb7491"
-  integrity sha512-Mlk275cyPoKtnP4DwQ5D8gTfnaRPL6kDZOSn0wbTMa6pQOfYKgJsa7tjzeAtZuZ/j8hKI4gAfT/auMgH6g+94A==
-  dependencies:
-    "@reach/router" "^1.2.1"
-    "@types/reach__router" "^1.2.3"
-    core-js "^3.0.1"
-    global "^4.3.2"
-    lodash "^4.17.11"
-    memoizerific "^1.11.3"
-    qs "^6.6.0"
-
-"@storybook/router@5.3.0-alpha.5":
-  version "5.3.0-alpha.5"
-  resolved "https://registry.yarnpkg.com/@storybook/router/-/router-5.3.0-alpha.5.tgz#5e954ebe0169cc169a2e461b717e54c37d29d569"
-  integrity sha512-48ajXTFaBWI0McFihYkDnnAHjwCn1gsjmaFf/in5Q36OPmemIRUFh7cDtQEt5RmstpGzo+Z8ku/ltByJGcKKAg==
+"@storybook/router@5.2.6":
+  version "5.2.6"
+  resolved "https://registry.yarnpkg.com/@storybook/router/-/router-5.2.6.tgz#5180d3785501699283c6c3717986c877f84fead5"
+  integrity sha512-/FZd3fYg5s2QzOqSIP8UMOSnCIFFIlli/jKlOxvm3WpcpxgwQOY4lfHsLO+r9ThCLs2UvVg2R/HqGrOHqDFU7A==
   dependencies:
     "@reach/router" "^1.2.1"
     "@types/reach__router" "^1.2.3"
     core-js "^3.0.1"
     global "^4.3.2"
-    lodash "^4.17.11"
+    lodash "^4.17.15"
     memoizerific "^1.11.3"
     qs "^6.6.0"
 
-"@storybook/source-loader@5.3.0-alpha.5":
-  version "5.3.0-alpha.5"
-  resolved "https://registry.yarnpkg.com/@storybook/source-loader/-/source-loader-5.3.0-alpha.5.tgz#9df226ed82a7a517970972806e7a43ab07d8b372"
-  integrity sha512-bdqCnXSZn6aQVnVOuHI6kZR9TxuX8XF3ZN/z7b14WtsJRG7YAA6uZvL8lOihdafoWaTrxr94qBU3iYUj9nrjHQ==
+"@storybook/source-loader@5.2.6":
+  version "5.2.6"
+  resolved "https://registry.yarnpkg.com/@storybook/source-loader/-/source-loader-5.2.6.tgz#06e6b5e93ea4c635c7d05c517ad8711de9030ba3"
+  integrity sha512-OJWmmLlt84efk+xLEqkyVQBlD5n9tbPlkrepQKtGBpR0JXeGyyvJ/3S8jnpW3NYUrFjUgHPkSWBp/c5CfzPwSw==
   dependencies:
-    "@storybook/addons" "5.3.0-alpha.5"
-    "@storybook/router" "5.3.0-alpha.5"
+    "@storybook/addons" "5.2.6"
+    "@storybook/router" "5.2.6"
     core-js "^3.0.1"
     estraverse "^4.2.0"
     global "^4.3.2"
@@ -1552,14 +1531,14 @@
     prop-types "^15.7.2"
     regenerator-runtime "^0.12.1"
 
-"@storybook/theming@5.2.1":
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-5.2.1.tgz#913e383632e4702035a107c2cc5e5cb27231b389"
-  integrity sha512-lbAfcyI7Tx8swduIPmlu/jdWzqTBN/v82IEQbZbPR4LS5OHRPmhXPNgFGrcH4kFAiD0GoezSsdum1x0ZZpsQUQ==
+"@storybook/theming@5.2.6":
+  version "5.2.6"
+  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-5.2.6.tgz#e04170b3e53dcfc791b2381c8a39192ae88cd291"
+  integrity sha512-Xa9R/H8DDgmvxsCHloJUJ2d9ZQl80AeqHrL+c/AKNpx05s9lV74DcinusCf0kz72YGUO/Xt1bAjuOvLnAaS8Gw==
   dependencies:
     "@emotion/core" "^10.0.14"
     "@emotion/styled" "^10.0.14"
-    "@storybook/client-logger" "5.2.1"
+    "@storybook/client-logger" "5.2.6"
     common-tags "^1.8.0"
     core-js "^3.0.1"
     deep-object-diff "^1.1.0"
@@ -1570,39 +1549,19 @@
     prop-types "^15.7.2"
     resolve-from "^5.0.0"
 
-"@storybook/theming@5.3.0-alpha.5":
-  version "5.3.0-alpha.5"
-  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-5.3.0-alpha.5.tgz#ed575b30c50345e8cc80a90d94dea5118f9818f6"
-  integrity sha512-X2D/pv4ld0qX/o6yyuq8gxktSZfX42dj3BBFz0Oe6Yap31Q5TBycMjjuj6B35czb1wxYHPeQJrjXQQB5YZRZkA==
-  dependencies:
-    "@emotion/core" "^10.0.17"
-    "@emotion/styled" "^10.0.17"
-    "@storybook/client-logger" "5.3.0-alpha.5"
-    core-js "^3.0.1"
-    deep-object-diff "^1.1.0"
-    emotion-theming "^10.0.19"
-    global "^4.3.2"
-    memoizerific "^1.11.3"
-    polished "^3.3.1"
-    prop-types "^15.7.2"
-    resolve-from "^5.0.0"
-    ts-dedent "^1.1.0"
-
-"@storybook/ui@5.2.1":
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/@storybook/ui/-/ui-5.2.1.tgz#ceba1657a232efd10f839027f8ae274e370c89f6"
-  integrity sha512-h6Yf1ro/nZcz4nQAU+eSVPxVmpqv7uT7RMb3Vz+VLTY59IEA/sWcoIgA4MIxwf14nVcWOqSmVBJzNKWwc+NGJw==
-  dependencies:
-    "@storybook/addon-actions" "5.2.1"
-    "@storybook/addon-knobs" "5.2.1"
-    "@storybook/addons" "5.2.1"
-    "@storybook/api" "5.2.1"
-    "@storybook/channels" "5.2.1"
-    "@storybook/client-logger" "5.2.1"
-    "@storybook/components" "5.2.1"
-    "@storybook/core-events" "5.2.1"
-    "@storybook/router" "5.2.1"
-    "@storybook/theming" "5.2.1"
+"@storybook/ui@5.2.6":
+  version "5.2.6"
+  resolved "https://registry.yarnpkg.com/@storybook/ui/-/ui-5.2.6.tgz#33df2f2e03d9cf81dc52928a0dc4db280ee8f56a"
+  integrity sha512-jT3PtpEsTqnESO0U8BotC+5P971Xqy0s2leSZcgU9PNe4Eb7NaxypSULOulPgPAx1JOmMipUBdK54PP/nyudkA==
+  dependencies:
+    "@storybook/addons" "5.2.6"
+    "@storybook/api" "5.2.6"
+    "@storybook/channels" "5.2.6"
+    "@storybook/client-logger" "5.2.6"
+    "@storybook/components" "5.2.6"
+    "@storybook/core-events" "5.2.6"
+    "@storybook/router" "5.2.6"
+    "@storybook/theming" "5.2.6"
     copy-to-clipboard "^3.0.8"
     core-js "^3.0.1"
     core-js-pure "^3.0.1"
@@ -1610,7 +1569,7 @@
     fast-deep-equal "^2.0.1"
     fuse.js "^3.4.4"
     global "^4.3.2"
-    lodash "^4.17.11"
+    lodash "^4.17.15"
     markdown-to-jsx "^6.9.3"
     memoizerific "^1.11.3"
     polished "^3.3.1"
@@ -1618,7 +1577,7 @@
     qs "^6.6.0"
     react "^16.8.3"
     react-dom "^16.8.3"
-    react-draggable "^3.3.2"
+    react-draggable "^4.0.3"
     react-helmet-async "^1.0.2"
     react-hotkeys "2.0.0-pre4"
     react-sizeme "^2.6.7"
@@ -1626,7 +1585,7 @@
     resolve-from "^5.0.0"
     semver "^6.0.0"
     store2 "^2.7.1"
-    telejson "^2.2.2"
+    telejson "^3.0.2"
     util-deprecate "^1.0.2"
 
 "@svgr/babel-plugin-add-jsx-attribute@^4.2.0":
@@ -1751,6 +1710,11 @@
   resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.3.tgz#856c99cdc1551d22c22b18b5402719affec9839a"
   integrity sha512-cS5owqtwzLN5kY+l+KgKdRJ/Cee8tlmQoGQuIE9tWnSmS3JMKzmxo2HIAk2wODMifGwO20d62xZQLYz+RLfXmw==
 
+"@types/is-function@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@types/is-function/-/is-function-1.0.0.tgz#1b0b819b1636c7baf0d6785d030d12edf70c3e83"
+  integrity sha512-iTs9HReBu7evG77Q4EC8hZnqRt57irBDkK9nvmHroiOIVwYMQc4IvYvdRgwKfYepunIY7Oh/dBuuld+Gj9uo6w==
+
 "@types/prop-types@*":
   version "15.7.3"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
@@ -1776,6 +1740,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-textarea-autosize@^4.3.3":
+  version "4.3.5"
+  resolved "https://registry.yarnpkg.com/@types/react-textarea-autosize/-/react-textarea-autosize-4.3.5.tgz#6c4d2753fa1864c98c0b2b517f67bb1f6e4c46de"
+  integrity sha512-PiDL83kPMTolyZAWW3lyzO6ktooTb9tFTntVy7CA83/qFLWKLJ5bLeRboy6J6j3b1e8h2Eec6gBTEOOJRjV14A==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*":
   version "16.9.4"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.4.tgz#de8cf5e5e2838659fb78fa93181078469eeb19fc"
@@ -1789,6 +1760,11 @@
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.3.tgz#9c088679876f374eb5983f150d4787aa6fb32d7e"
   integrity sha512-FvUupuM3rlRsRtCN+fDudtmytGO6iHJuuRKS1Ss0pG5z8oX0diNEw94UEL7hgDbpN94rgaK5R7sWm6RrSkZuAQ==
 
+"@types/webpack-env@^1.13.7":
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.14.1.tgz#0d8a53f308f017c53a5ddc3d07f4d6fa76b790d7"
+  integrity sha512-0Ki9jAAhKDSuLDXOIMADg54Hu60SuBTEsWaJGGy5cV+SSUQ63J2a+RrYYGrErzz39fXzTibhKrAQJAb8M7PNcA==
+
 "@webassemblyjs/ast@1.8.5":
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.8.5.tgz#51b1c5fe6576a34953bf4b253df9f0d490d9e359"
@@ -3164,6 +3140,13 @@ convert-source-map@^1.1.0, convert-source-map@^1.5.0:
   dependencies:
     safe-buffer "~5.1.1"
 
+convert-source-map@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"
+  integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==
+  dependencies:
+    safe-buffer "~5.1.1"
+
 cookie-signature@1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
@@ -3590,13 +3573,6 @@ dom-converter@^0.2:
   dependencies:
     utila "~0.4"
 
-dom-helpers@^3.4.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8"
-  integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==
-  dependencies:
-    "@babel/runtime" "^7.1.2"
-
 dom-serializer@0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.1.tgz#13650c850daffea35d8b626a4cfc4d3a17643fdb"
@@ -3737,7 +3713,7 @@ emojis-list@^2.0.0:
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
   integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k=
 
-emotion-theming@^10.0.14, emotion-theming@^10.0.19:
+emotion-theming@^10.0.14:
   version "10.0.19"
   resolved "https://registry.yarnpkg.com/emotion-theming/-/emotion-theming-10.0.19.tgz#66d13db74fccaefad71ba57c915b306cf2250295"
   integrity sha512-dQRBPLAAQ6eA8JKhkLCIWC8fdjPbiNC1zNTdFF292h9amhZXofcNGUP7axHoHX4XesqQESYwZrXp53OPInMrKw==
@@ -3833,7 +3809,7 @@ es6-shim@^0.35.5:
   resolved "https://registry.yarnpkg.com/es6-shim/-/es6-shim-0.35.5.tgz#46f59dc0a84a1c5029e8ff1166ca0a902077a9ab"
   integrity sha512-E9kK/bjtCQRpN1K28Xh4BlmP8egvZBGJJ+9GtnzOwt7mdqtrjHFuVGr7QJfdjBIKqrlU5duPf3pCBoDrkjVYFg==
 
-escape-html@^1.0.3, escape-html@~1.0.3:
+escape-html@~1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
   integrity sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=
@@ -4383,7 +4359,7 @@ global-prefix@^3.0.0:
     kind-of "^6.0.2"
     which "^1.3.1"
 
-global@^4.3.2:
+global@^4.3.2, global@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/global/-/global-4.4.0.tgz#3e7b105179006a323ed71aafca3e9c57a5cc6406"
   integrity sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==
@@ -5352,7 +5328,7 @@ lodash.uniq@4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@^4.0.1, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14:
+lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
   integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
@@ -5442,11 +5418,6 @@ markdown-to-jsx@^6.9.1, markdown-to-jsx@^6.9.3:
     prop-types "^15.6.2"
     unquote "^1.1.0"
 
-material-colors@^1.2.1:
-  version "1.2.6"
-  resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
-  integrity sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==
-
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -6287,11 +6258,6 @@ pbkdf2@^3.0.3:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
-performance-now@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
-  integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
-
 pify@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
@@ -6508,7 +6474,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@15.7.2, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@15.7.2, prop-types@^15.5.4, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -6645,13 +6611,6 @@ querystringify@^2.1.1:
   resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.1.1.tgz#60e5a5fd64a7f8bfa4d2ab2ed6fdf4c85bad154e"
   integrity sha512-w7fLxIRCRT7U8Qu53jQnJyPkYZIaR4n5151KMfcJlO/A9397Wxb1amJvROTK6TOnp7PfoAmg/qXiNHI+08jRfA==
 
-raf@^3.4.0:
-  version "3.4.1"
-  resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
-  integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
-  dependencies:
-    performance-now "^2.1.0"
-
 ramda@^0.21.0:
   version "0.21.0"
   resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.21.0.tgz#a001abedb3ff61077d4ff1d577d44de77e8d0a35"
@@ -6712,18 +6671,6 @@ react-clientside-effect@^1.2.0:
   dependencies:
     "@babel/runtime" "^7.0.0"
 
-react-color@^2.17.0:
-  version "2.17.3"
-  resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.17.3.tgz#b8556d744f95193468c7061d2aa19180118d4a48"
-  integrity sha512-1dtO8LqAVotPIChlmo6kLtFS1FP89ll8/OiA8EcFRDR+ntcK+0ukJgByuIQHRtzvigf26dV5HklnxDIvhON9VQ==
-  dependencies:
-    "@icons/material" "^0.2.4"
-    lodash "^4.17.11"
-    material-colors "^1.2.1"
-    prop-types "^15.5.10"
-    reactcss "^1.2.0"
-    tinycolor2 "^1.4.1"
-
 react-dev-utils@^9.0.0:
   version "9.0.4"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-9.0.4.tgz#5c71a8e8afdec0232c44d4e049d21baa437a92af"
@@ -6778,10 +6725,10 @@ react-dom@^16.8.3:
     prop-types "^15.6.2"
     scheduler "^0.16.1"
 
-react-draggable@^3.3.2:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-3.3.2.tgz#966ef1d90f2387af3c2d8bd3516f601ea42ca359"
-  integrity sha512-oaz8a6enjbPtx5qb0oDWxtDNuybOylvto1QLydsXgKmwT7e3GXC2eMVDwEMIUYJIFqVG72XpOv673UuuAq6LhA==
+react-draggable@^4.0.3:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.1.0.tgz#e1c5b774001e32f0bff397254e1e9d5448ac92a4"
+  integrity sha512-Or/qe70cfymshqoC8Lsp0ukTzijJObehb7Vfl7tb5JRxoV+b6PDkOGoqYaWBzZ59k9dH/bwraLGsnlW78/3vrA==
   dependencies:
     classnames "^2.2.5"
     prop-types "^15.6.0"
@@ -6824,13 +6771,6 @@ react-hotkeys@2.0.0-pre4:
   dependencies:
     prop-types "^15.6.1"
 
-react-input-autosize@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-2.2.1.tgz#ec428fa15b1592994fb5f9aa15bb1eb6baf420f8"
-  integrity sha512-3+K4CD13iE4lQQ2WlF8PuV5htfmTRLH6MDnfndHM6LuBRszuXnuyIfE7nhSKt8AzRBZ50bu0sAhkNMeS5pxQQA==
-  dependencies:
-    prop-types "^15.5.8"
-
 react-inspector@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/react-inspector/-/react-inspector-3.0.2.tgz#c530a06101f562475537e47df428e1d7aff16ed8"
@@ -6882,22 +6822,6 @@ react-redux@^7.0.2:
     prop-types "^15.7.2"
     react-is "^16.9.0"
 
-react-select@^3.0.0:
-  version "3.0.5"
-  resolved "https://registry.yarnpkg.com/react-select/-/react-select-3.0.5.tgz#f2810e63fa8a6be375b3fa6f390284e9e33c9573"
-  integrity sha512-2tBXZ1XSqbk2boMUzSmKXwGl/6W46VkSMSLMy+ShccOVyD1kDTLPwLX7lugISkRMmL0v5BcLtriXOLfYwO0otw==
-  dependencies:
-    "@babel/runtime" "^7.4.4"
-    "@emotion/cache" "^10.0.9"
-    "@emotion/core" "^10.0.9"
-    "@emotion/css" "^10.0.9"
-    classnames "^2.2.5"
-    memoize-one "^5.0.0"
-    prop-types "^15.6.0"
-    raf "^3.4.0"
-    react-input-autosize "^2.2.1"
-    react-transition-group "^2.2.1"
-
 react-sizeme@^2.5.2, react-sizeme@^2.6.7:
   version "2.6.7"
   resolved "https://registry.yarnpkg.com/react-sizeme/-/react-sizeme-2.6.7.tgz#231339ce8821ac2c26424c791e0027f89dae3e90"
@@ -6927,16 +6851,6 @@ react-textarea-autosize@^7.1.0:
     "@babel/runtime" "^7.1.2"
     prop-types "^15.6.0"
 
-react-transition-group@^2.2.1:
-  version "2.9.0"
-  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d"
-  integrity sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==
-  dependencies:
-    dom-helpers "^3.4.0"
-    loose-envify "^1.4.0"
-    prop-types "^15.6.2"
-    react-lifecycles-compat "^3.0.4"
-
 react@^16.8.3:
   version "16.10.1"
   resolved "https://registry.yarnpkg.com/react/-/react-16.10.1.tgz#967c1e71a2767dfa699e6ba702a00483e3b0573f"
@@ -6946,13 +6860,6 @@ react@^16.8.3:
     object-assign "^4.1.1"
     prop-types "^15.6.2"
 
-reactcss@^1.2.0:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.3.tgz#c00013875e557b1cf0dfd9a368a1c3dab3b548dd"
-  integrity sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==
-  dependencies:
-    lodash "^4.0.1"
-
 "readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@~2.3.6:
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.6.tgz#b11c27d88b8ff1fbe070643cf94b0c79ae1b0aaf"
@@ -7838,10 +7745,10 @@ style-to-object@0.2.3, style-to-object@^0.2.1:
   dependencies:
     inline-style-parser "0.1.1"
 
-styled-components@^4.3.2:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-4.4.0.tgz#4e381e2dab831d0e6ea431c2840a96323e84e21b"
-  integrity sha512-xQ6vTI/0zNjZ1BBDRxyjvBddrxhQ3DxjeCdaLM1lSn5FDnkTOQgRkmWvcUiTajqc5nJqKVl+7sUioMqktD0+Zw==
+styled-components@^4.4.1:
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-4.4.1.tgz#e0631e889f01db67df4de576fedaca463f05c2f2"
+  integrity sha512-RNqj14kYzw++6Sr38n7197xG33ipEOktGElty4I70IKzQF1jzaD1U4xQ+Ny/i03UUhHlC5NWEO+d8olRCDji6g==
   dependencies:
     "@babel/helper-module-imports" "^7.0.0"
     "@babel/traverse" "^7.0.0"
@@ -7955,17 +7862,18 @@ tar@^4:
     safe-buffer "^5.1.2"
     yallist "^3.0.3"
 
-telejson@^2.2.2:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/telejson/-/telejson-2.2.2.tgz#d61d721d21849a6e4070d547aab302a9bd22c720"
-  integrity sha512-YyNwnKY0ilabOwYgC/J754En1xOe5PBIUIw+C9e0+5HjVVcnQE5/gdu2yET2pmSbp5bxIDqYNjvndj2PUkIiYA==
+telejson@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/telejson/-/telejson-3.1.0.tgz#c648479afe0d8edd90aeaf478b0b8a2fe9f59513"
+  integrity sha512-mhiVy+xp2atri1bzSzdy/gVGXlOhibaoZ092AUq5xhnrZGdzhF0fLaOduHJQghkro+qmjYMwhsOL9CkD2zTicg==
   dependencies:
-    global "^4.3.2"
+    "@types/is-function" "^1.0.0"
+    global "^4.4.0"
     is-function "^1.0.1"
     is-regex "^1.0.4"
     is-symbol "^1.0.2"
-    isobject "^3.0.1"
-    lodash "^4.17.11"
+    isobject "^4.0.0"
+    lodash "^4.17.15"
     memoizerific "^1.11.3"
 
 term-size@^1.2.0:
@@ -8034,11 +7942,6 @@ tiny-emitter@^2.0.0:
   resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
   integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
 
-tinycolor2@^1.4.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
-  integrity sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g=
-
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
@@ -8111,11 +8014,6 @@ trough@^1.0.0:
   resolved "https://registry.yarnpkg.com/trough/-/trough-1.0.4.tgz#3b52b1f13924f460c3fbfd0df69b587dbcbc762e"
   integrity sha512-tdzBRDGWcI1OpPVmChbdSKhvSVurznZ8X36AYURAcl+0o2ldlCY2XPzyXNNxwJwwyIU+rIglTCG4kxtNKBQH7Q==
 
-ts-dedent@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/ts-dedent/-/ts-dedent-1.1.0.tgz#67983940793183dc7c7f820acb66ba02cdc33c6e"
-  integrity sha512-CVCvDwMBWZKjDxpN3mU/Dx1v3k+sJgE8nrhXcC9vRopRfoa7vVzilNvHEAUi5jQnmFHpnxDx5jZdI1TpG8ny2g==
-
 ts-pnp@^1.1.2:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.1.4.tgz#ae27126960ebaefb874c6d7fa4729729ab200d90"

From 4fc12235487ebb6512f069fc19b616aa9e7b4048 Mon Sep 17 00:00:00 2001
From: Gustavo Esquinca <g.esq.ca@gmail.com>
Date: Wed, 20 Nov 2019 12:25:33 -0500
Subject: [PATCH 05/17] updated modal example

- adds styles for better modal friendlyness
---
 storybook/stories/Modal.stories.js | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/storybook/stories/Modal.stories.js b/storybook/stories/Modal.stories.js
index cb5c6c4f..d6bd1920 100644
--- a/storybook/stories/Modal.stories.js
+++ b/storybook/stories/Modal.stories.js
@@ -40,7 +40,7 @@ class MyCustomModal extends Component {
       <React.Fragment>
         <Button onClick={this.openModal}>Open Modal</Button>
         <Modal isOpen={this.state.isOpen}>
-          <Card width={'420px'} p={0}>
+          <Card width={'420px'} maxWidth={'100%'} p={0}>
             <Button.Text
               icononly
               icon={'Close'}
@@ -53,22 +53,23 @@ class MyCustomModal extends Component {
               onClick={this.closeModal}
             />
             <Box p={4} mb={3}>
-              <Heading.h3>
+              <Heading fontSize={3} mb={3} mr={4}>
                 Confirm {'{'}Action Name{'}'}
-              </Heading.h3>
+              </Heading>
               <Text>
                 Are you sure you want to {'{'}Action Name{'}'}?
               </Text>
             </Box>
             <Flex
+              flexDirection={['column', 'row-reverse']}
+              justifyContent={'flex-start'}
               px={4}
               py={3}
               borderTop={1}
-              borderColor={'#E8E8E8'}
-              justifyContent={'flex-end'}
+              borderColor={'blacks.3'}
             >
-              <Button.Outline>Cancel</Button.Outline>
-              <Button ml={3}>Confirm</Button>
+              <Button ml={[0, 3]} mb={[2, 0]}>Confirm</Button>
+              <Button.Outline >Cancel</Button.Outline>
             </Flex>
           </Card>
         </Modal>

From b19ced77196d0b653d75f1d0da8750262b6164da Mon Sep 17 00:00:00 2001
From: Gustavo Esquinca <g.esq.ca@gmail.com>
Date: Wed, 20 Nov 2019 12:54:56 -0500
Subject: [PATCH 06/17] updated Slider input

- inherit styled from StyledInput.
- add default aria-label.
- clean up css styles.
- add default props.
---
 src/Slider/index.js | 35 ++++++++++++++++++-----------------
 1 file changed, 18 insertions(+), 17 deletions(-)

diff --git a/src/Slider/index.js b/src/Slider/index.js
index b951d56a..cefacf7b 100644
--- a/src/Slider/index.js
+++ b/src/Slider/index.js
@@ -1,16 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { COMMON } from '../constants';
+import { StyledInput } from '../Input';
 import theme from '../theme';
 
-const StyledSlider = styled('input').attrs(props => ({
-  type: 'range',
-}))`
+const StyledSlider = styled(StyledInput)`
   & {
     appearance: none;
-    height: 2rem;
-    min-width: 200px;
+  }
+  &:hover {
+    box-shadow: none;
   }
   &::-webkit-slider-runnable-track {
     box-sizing: border-box;
@@ -67,28 +66,30 @@ const StyledSlider = styled('input').attrs(props => ({
       border-color: currentColor;
     }
   }
-  ${COMMON}
 `;
 
 const Slider = React.forwardRef((props, ref) => (
-  <StyledSlider ref={ref} {...props} />
+  <StyledSlider ref={ref} {...props} type={'range'} />
 ));
 
 StyledSlider.defaultProps = {
-  theme,
-  m: 0,
   color: 'primary',
+  bg: 'none',
+  height: '2rem',
+  minWidth: '200px',
+  m: 0,
+  p: 0,
+  border: 'none',
+  boxShadow: 'none',
+  theme,
 };
 
-// Slider.defaultProps = {
-//   theme,
-//   m: 0,
-//   color: 'primary',
-// };
+Slider.defaultProps = {
+  'aria-label': 'range slider',
+};
 
 Slider.propTypes = {
-  ...COMMON.propTypes,
-  theme: PropTypes.object,
+  'aria-label': PropTypes.string,
 };
 
 Slider.displayName = 'Slider';

From 4bf98567d6e16d160cffe225084be0cc57924e59 Mon Sep 17 00:00:00 2001
From: Gustavo Esquinca <g.esq.ca@gmail.com>
Date: Wed, 20 Nov 2019 12:55:37 -0500
Subject: [PATCH 07/17] updated examples

- add `disabled` example to demo
- add `disabled` story
---
 demo/src/App.js                     |  1 +
 storybook/stories/Slider.stories.js | 21 ++++++++++++++-------
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/demo/src/App.js b/demo/src/App.js
index 0a36909e..e97a80dd 100644
--- a/demo/src/App.js
+++ b/demo/src/App.js
@@ -126,6 +126,7 @@ const testComponents = props => (
     <Avatar size="large" />
     <Textarea rows={4} defaultValue="Type here…" />
     <Slider />
+    <Slider disabled />
     <Select>
       <optgroup label="4-legged pets">
         <option value="dog">Dog</option>
diff --git a/storybook/stories/Slider.stories.js b/storybook/stories/Slider.stories.js
index ee468734..62aa61be 100644
--- a/storybook/stories/Slider.stories.js
+++ b/storybook/stories/Slider.stories.js
@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
-import { Slider } from 'rimble-ui'
+import { Slider, Text,  } from 'rimble-ui';
 
 export default {
   title: 'Slider'
-}
+};
 
 class MyCustomSlider extends Component {
   constructor(props) {
@@ -20,20 +20,27 @@ class MyCustomSlider extends Component {
 
   render() {
     return (
-      <div>
+      <>
         <Slider
           min={'0'}
           max={'100'}
           step={'10'}
           value={this.state.sliderValue}
           onChange={this.handleChange}
+          {...this.props}
         />
-        <div>Value: {this.state.sliderValue}</div>
-      </div>
+        <Text>Value: {this.state.sliderValue}</Text>
+      </>
     );
   }
 }
 
 export const slider = () => (
-  <MyCustomSlider></MyCustomSlider>
-)
+  <MyCustomSlider>
+  </MyCustomSlider>
+
+);
+
+export const disabledSlider = () => (
+  <MyCustomSlider disabled/>
+);

From 972a59f7e87d280441110c3aea49cf4a39b55739 Mon Sep 17 00:00:00 2001
From: Gustavo Esquinca <g.esq.ca@gmail.com>
Date: Wed, 20 Nov 2019 13:34:17 -0500
Subject: [PATCH 08/17] updated Icon component

- only passes `name` and `size` to svg element.
- passes `ref` and all other props to wrapper `Box` component.
- removed unnessary styled wrapper div.
- sets default display to `inline-flex` for more predictable sizing and display.
- reorder propTypes
---
 src/Icon/index.js | 35 ++++++++++++-----------------------
 1 file changed, 12 insertions(+), 23 deletions(-)

diff --git a/src/Icon/index.js b/src/Icon/index.js
index e4738fc7..b2a804e3 100644
--- a/src/Icon/index.js
+++ b/src/Icon/index.js
@@ -1,31 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
 import { Icon as RmdIcon } from 'rmdi';
-import theme from '../theme';
 import Box from '../Box';
+import theme from '../theme';
 
-const StyledBox = styled('div')``;
-
-const Icon = React.forwardRef((props, ref) => (
-  <StyledBox ref={ref}>
-    <RmdIcon.default {...props} />
-  </StyledBox>
+const Icon = React.forwardRef(({ name, size, ...rest }, ref) => (
+  <Box ref={ref} {...rest}>
+    <RmdIcon.default name={name} size={size} />
+  </Box>
 ));
 
-// RmdIcon.default.defaultProps = {
-//   theme,
-//   color: 'inherit'
-// };
-
-StyledBox.defaultProps = {
-  theme,
-};
-
 Icon.defaultProps = {
-  // theme,
-  display: 'block',
+  name: '',
   size: '24px',
+  display: 'inline-flex',
+  theme,
 };
 
 Icon.propTypes = {
@@ -33,14 +22,14 @@ Icon.propTypes = {
    * Sets which icon to display
    */
   name: PropTypes.string.isRequired,
-  /**
-   * Sets the element display property
-   */
-  display: PropTypes.string,
   /**
    * Sets the width and height in pixels
    */
   size: PropTypes.string,
+  /**
+   * Sets the element display property
+   */
+  display: PropTypes.string,
   theme: PropTypes.object,
 };
 

From 631fe93aab603b68d1c4db0a8cdde9e12fdeab47 Mon Sep 17 00:00:00 2001
From: Gustavo Esquinca <g.esq.ca@gmail.com>
Date: Wed, 20 Nov 2019 13:34:33 -0500
Subject: [PATCH 09/17] updated examples for testing

---
 storybook/stories/Icon.stories.js | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/storybook/stories/Icon.stories.js b/storybook/stories/Icon.stories.js
index ecf913b1..6e28a428 100644
--- a/storybook/stories/Icon.stories.js
+++ b/storybook/stories/Icon.stories.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon } from 'rimble-ui'
+import { Icon, Tooltip } from 'rimble-ui'
 
 export default {
   title: 'Icon'
@@ -16,3 +16,24 @@ export const withColor = () => (
 export const withColorAndSize = () => (
   <Icon name={'MoneyOff'} color={'red'} size={'80'} />
 )
+
+export const withMarginAndPadding = () => (
+  <Icon
+    name={'MoneyOff'}
+    color={'red'}
+    size={'80'}
+    p={4}
+    m={3}
+  />
+)
+
+export const withTooltip = () => (
+  <Tooltip message={'this is a tooltip icon'}>
+    <Icon
+      name={'Info'}
+      color={'primary'}
+      size={'2rem'}
+      m={5}
+    />
+  </Tooltip>
+)

From d769f76cf15ad4908a670ee6f595c9ab15c8552e Mon Sep 17 00:00:00 2001
From: Gustavo Esquinca <g.esq.ca@gmail.com>
Date: Wed, 20 Nov 2019 13:38:18 -0500
Subject: [PATCH 10/17] udpated snapshot tests

---
 src/Button/__snapshots__/Button.test.js.snap  |   75 +-
 .../__snapshots__/EthAddress.test.js.snap     |  106 +-
 src/Icon/__snapshots__/Icon.test.js.snap      |   30 +-
 .../__snapshots__/FileInput.test.js.snap      |   30 +-
 .../__snapshots__/ToastMessage.test.js.snap   | 2459 +++++++++++------
 .../__snapshots__/Tooltip.test.js.snap        |   12 +-
 6 files changed, 1810 insertions(+), 902 deletions(-)

diff --git a/src/Button/__snapshots__/Button.test.js.snap b/src/Button/__snapshots__/Button.test.js.snap
index 3cc12595..68be9573 100644
--- a/src/Button/__snapshots__/Button.test.js.snap
+++ b/src/Button/__snapshots__/Button.test.js.snap
@@ -1,6 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Button Icon component sanity matches default snapshot 1`] = `
+.c1 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c1 {
+  box-sizing: border-box;
+}
+
 .c0 {
   color: #fff;
   background-color: #999;
@@ -142,11 +153,11 @@ exports[`Button Icon component sanity matches default snapshot 1`] = `
   height="3rem"
 >
   <div
-    class=""
+    class="c1"
+    display="inline-flex"
   >
     <svg
       class=""
-      display="block"
       fill="currentcolor"
       height="24px"
       viewBox="0 0 24 24"
@@ -161,6 +172,17 @@ exports[`Button Icon component sanity matches default snapshot 1`] = `
 `;
 
 exports[`Button Icon component sanity matches themed snapshot 1`] = `
+.c1 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c1 {
+  box-sizing: border-box;
+}
+
 .c0 {
   color: #fff;
   background-color: #999;
@@ -302,11 +324,11 @@ exports[`Button Icon component sanity matches themed snapshot 1`] = `
   height="3rem"
 >
   <div
-    class=""
+    class="c1"
+    display="inline-flex"
   >
     <svg
       class=""
-      display="block"
       fill="currentcolor"
       height="24px"
       viewBox="0 0 24 24"
@@ -321,6 +343,17 @@ exports[`Button Icon component sanity matches themed snapshot 1`] = `
 `;
 
 exports[`Button Icon only component sanity matches default snapshot 1`] = `
+.c1 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c1 {
+  box-sizing: border-box;
+}
+
 .c0 {
   color: #fff;
   background-color: #999;
@@ -463,11 +496,11 @@ exports[`Button Icon only component sanity matches default snapshot 1`] = `
   height="3rem"
 >
   <div
-    class=""
+    class="c1"
+    display="inline-flex"
   >
     <svg
       class=""
-      display="block"
       fill="currentcolor"
       height="24px"
       viewBox="0 0 24 24"
@@ -482,6 +515,17 @@ exports[`Button Icon only component sanity matches default snapshot 1`] = `
 `;
 
 exports[`Button Icon with position prop component sanity matches default snapshot 1`] = `
+.c1 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c1 {
+  box-sizing: border-box;
+}
+
 .c0 {
   color: #fff;
   background-color: #999;
@@ -623,11 +667,11 @@ exports[`Button Icon with position prop component sanity matches default snapsho
   height="3rem"
 >
   <div
-    class=""
+    class="c1"
+    display="inline-flex"
   >
     <svg
       class=""
-      display="block"
       fill="currentcolor"
       height="24px"
       viewBox="0 0 24 24"
@@ -2996,6 +3040,17 @@ exports[`Loading Button component sanity matches default snapshot 1`] = `
 `;
 
 exports[`Loading Button component sanity matches default snapshot 2`] = `
+.c1 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c1 {
+  box-sizing: border-box;
+}
+
 .c0 {
   color: #fff;
   background-color: #999;
@@ -3138,11 +3193,11 @@ exports[`Loading Button component sanity matches default snapshot 2`] = `
   height="3rem"
 >
   <div
-    class=""
+    class="c1"
+    display="inline-flex"
   >
     <svg
       class=""
-      display="block"
       fill="currentcolor"
       height="24px"
       viewBox="0 0 24 24"
diff --git a/src/EthAddress/__snapshots__/EthAddress.test.js.snap b/src/EthAddress/__snapshots__/EthAddress.test.js.snap
index 4686e1ce..f5c82da6 100644
--- a/src/EthAddress/__snapshots__/EthAddress.test.js.snap
+++ b/src/EthAddress/__snapshots__/EthAddress.test.js.snap
@@ -19,6 +19,17 @@ exports[`EthAddress component sanity matches default snapshot 1`] = `
   box-sizing: border-box;
 }
 
+.c6 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c6 {
+  box-sizing: border-box;
+}
+
 .c5 {
   color: #fff;
   background-color: #999;
@@ -158,7 +169,7 @@ exports[`EthAddress component sanity matches default snapshot 1`] = `
   pointer-events: none;
 }
 
-.c6 {
+.c7 {
   color: #fff;
   background-color: #999;
   margin: 0;
@@ -187,7 +198,7 @@ exports[`EthAddress component sanity matches default snapshot 1`] = `
   padding: 0 1rem;
 }
 
-.c6 {
+.c7 {
   -webkit-font-smoothing: antialiased;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -216,24 +227,24 @@ exports[`EthAddress component sanity matches default snapshot 1`] = `
   padding: 0;
 }
 
-.c6:hover {
+.c7:hover {
   cursor: pointer;
 }
 
-.c6:disabled {
+.c7:disabled {
   opacity: 0.5;
   pointer-events: none;
 }
 
-.c6 > span.button-text {
+.c7 > span.button-text {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
 }
 
-.c6 > div > svg,
-.c6 > span.button-text {
+.c7 > div > svg,
+.c7 > span.button-text {
   position: relative;
   z-index: 1;
   -webkit-user-select: none;
@@ -243,25 +254,25 @@ exports[`EthAddress component sanity matches default snapshot 1`] = `
   pointer-events: none;
 }
 
-.c6 > div > svg {
+.c7 > div > svg {
   display: block;
 }
 
-.c6 > div:first-child > svg {
+.c7 > div:first-child > svg {
   margin-left: -0.5rem;
   margin-right: .5rem;
 }
 
-.c6 > div:last-child > svg {
+.c7 > div:last-child > svg {
   margin-left: .5rem;
   margin-right: -0.5rem;
 }
 
-.c6 > div:first-child:last-child > svg {
+.c7 > div:first-child:last-child > svg {
   margin: 0;
 }
 
-.c6 {
+.c7 {
   color: var(--contrast-color);
   background: #FFF;
   z-index: 0;
@@ -269,22 +280,22 @@ exports[`EthAddress component sanity matches default snapshot 1`] = `
   transition: all 0.15s ease;
 }
 
-.c6:hover {
+.c7:hover {
   -webkit-text-decoration: inherit;
   text-decoration: inherit;
   box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
 }
 
-.c6:hover::before {
+.c7:hover::before {
   opacity: 0.9;
 }
 
-.c6:active {
+.c7:active {
   box-shadow: none;
   background: #000;
 }
 
-.c6::before {
+.c7::before {
   content: '';
   position: absolute;
   top: 0;
@@ -444,11 +455,11 @@ exports[`EthAddress component sanity matches default snapshot 1`] = `
           class="button-text"
         >
           <div
-            class=""
+            class="c6"
+            display="inline-flex"
           >
             <svg
               class=""
-              display="block"
               fill="currentcolor"
               height="24px"
               viewBox="0 0 24 24"
@@ -463,7 +474,7 @@ exports[`EthAddress component sanity matches default snapshot 1`] = `
       </button>
     </div>
     <button
-      class="c6"
+      class="c7"
       color="white"
       font-family="sansSerif"
       font-size="inherit"
@@ -474,11 +485,11 @@ exports[`EthAddress component sanity matches default snapshot 1`] = `
         class="button-text"
       >
         <div
-          class=""
+          class="c6"
+          display="inline-flex"
         >
           <svg
             class=""
-            display="block"
             fill="currentcolor"
             height="24px"
             viewBox="0 0 24 24"
@@ -975,6 +986,17 @@ exports[`EthAddress component sanity matches themed snapshot 1`] = `
   box-sizing: border-box;
 }
 
+.c6 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c6 {
+  box-sizing: border-box;
+}
+
 .c5 {
   color: #fff;
   background-color: #999;
@@ -1114,7 +1136,7 @@ exports[`EthAddress component sanity matches themed snapshot 1`] = `
   pointer-events: none;
 }
 
-.c6 {
+.c7 {
   color: #fff;
   background-color: #999;
   margin: 0;
@@ -1143,7 +1165,7 @@ exports[`EthAddress component sanity matches themed snapshot 1`] = `
   padding: 0 1rem;
 }
 
-.c6 {
+.c7 {
   -webkit-font-smoothing: antialiased;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -1172,24 +1194,24 @@ exports[`EthAddress component sanity matches themed snapshot 1`] = `
   padding: 0;
 }
 
-.c6:hover {
+.c7:hover {
   cursor: pointer;
 }
 
-.c6:disabled {
+.c7:disabled {
   opacity: 0.5;
   pointer-events: none;
 }
 
-.c6 > span.button-text {
+.c7 > span.button-text {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
 }
 
-.c6 > div > svg,
-.c6 > span.button-text {
+.c7 > div > svg,
+.c7 > span.button-text {
   position: relative;
   z-index: 1;
   -webkit-user-select: none;
@@ -1199,25 +1221,25 @@ exports[`EthAddress component sanity matches themed snapshot 1`] = `
   pointer-events: none;
 }
 
-.c6 > div > svg {
+.c7 > div > svg {
   display: block;
 }
 
-.c6 > div:first-child > svg {
+.c7 > div:first-child > svg {
   margin-left: -0.5rem;
   margin-right: .5rem;
 }
 
-.c6 > div:last-child > svg {
+.c7 > div:last-child > svg {
   margin-left: .5rem;
   margin-right: -0.5rem;
 }
 
-.c6 > div:first-child:last-child > svg {
+.c7 > div:first-child:last-child > svg {
   margin: 0;
 }
 
-.c6 {
+.c7 {
   color: var(--contrast-color);
   background: #FFF;
   z-index: 0;
@@ -1225,22 +1247,22 @@ exports[`EthAddress component sanity matches themed snapshot 1`] = `
   transition: all 0.15s ease;
 }
 
-.c6:hover {
+.c7:hover {
   -webkit-text-decoration: inherit;
   text-decoration: inherit;
   box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
 }
 
-.c6:hover::before {
+.c7:hover::before {
   opacity: 0.9;
 }
 
-.c6:active {
+.c7:active {
   box-shadow: none;
   background: #000;
 }
 
-.c6::before {
+.c7::before {
   content: '';
   position: absolute;
   top: 0;
@@ -1400,11 +1422,11 @@ exports[`EthAddress component sanity matches themed snapshot 1`] = `
           class="button-text"
         >
           <div
-            class=""
+            class="c6"
+            display="inline-flex"
           >
             <svg
               class=""
-              display="block"
               fill="currentcolor"
               height="24px"
               viewBox="0 0 24 24"
@@ -1419,7 +1441,7 @@ exports[`EthAddress component sanity matches themed snapshot 1`] = `
       </button>
     </div>
     <button
-      class="c6"
+      class="c7"
       color="white"
       font-family="sansSerif"
       font-size="inherit"
@@ -1430,11 +1452,11 @@ exports[`EthAddress component sanity matches themed snapshot 1`] = `
         class="button-text"
       >
         <div
-          class=""
+          class="c6"
+          display="inline-flex"
         >
           <svg
             class=""
-            display="block"
             fill="currentcolor"
             height="24px"
             viewBox="0 0 24 24"
diff --git a/src/Icon/__snapshots__/Icon.test.js.snap b/src/Icon/__snapshots__/Icon.test.js.snap
index b266466f..1a4d6836 100644
--- a/src/Icon/__snapshots__/Icon.test.js.snap
+++ b/src/Icon/__snapshots__/Icon.test.js.snap
@@ -1,12 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Icon component sanity matches default snapshot 1`] = `
+.c0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c0 {
+  box-sizing: border-box;
+}
+
 <div
-  class=""
+  class="c0"
+  display="inline-flex"
 >
   <svg
     class=""
-    display="block"
     fill="currentcolor"
     height="24px"
     viewBox="0 0 24 24"
@@ -20,12 +31,23 @@ exports[`Icon component sanity matches default snapshot 1`] = `
 `;
 
 exports[`Icon component sanity matches themed snapshot 1`] = `
+.c0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c0 {
+  box-sizing: border-box;
+}
+
 <div
-  class=""
+  class="c0"
+  display="inline-flex"
 >
   <svg
     class=""
-    display="block"
     fill="currentcolor"
     height="24px"
     viewBox="0 0 24 24"
diff --git a/src/Input/__snapshots__/FileInput.test.js.snap b/src/Input/__snapshots__/FileInput.test.js.snap
index 60af1b9b..02479288 100644
--- a/src/Input/__snapshots__/FileInput.test.js.snap
+++ b/src/Input/__snapshots__/FileInput.test.js.snap
@@ -1,6 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`File Input component sanity matches default snapshot 1`] = `
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c3 {
+  box-sizing: border-box;
+}
+
 .c2 {
   color: #fff;
   background-color: #999;
@@ -164,11 +175,11 @@ exports[`File Input component sanity matches default snapshot 1`] = `
     height="3rem"
   >
     <div
-      class=""
+      class="c3"
+      display="inline-flex"
     >
       <svg
         class=""
-        display="block"
         fill="currentcolor"
         height="24px"
         viewBox="0 0 24 24"
@@ -189,6 +200,17 @@ exports[`File Input component sanity matches default snapshot 1`] = `
 `;
 
 exports[`File Input component sanity matches themed snapshot 1`] = `
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c3 {
+  box-sizing: border-box;
+}
+
 .c2 {
   color: #fff;
   background-color: #999;
@@ -352,11 +374,11 @@ exports[`File Input component sanity matches themed snapshot 1`] = `
     height="3rem"
   >
     <div
-      class=""
+      class="c3"
+      display="inline-flex"
     >
       <svg
         class=""
-        display="block"
         fill="currentcolor"
         height="24px"
         viewBox="0 0 24 24"
diff --git a/src/ToastMessage/__snapshots__/ToastMessage.test.js.snap b/src/ToastMessage/__snapshots__/ToastMessage.test.js.snap
index c428837e..a78b3ea1 100644
--- a/src/ToastMessage/__snapshots__/ToastMessage.test.js.snap
+++ b/src/ToastMessage/__snapshots__/ToastMessage.test.js.snap
@@ -574,6 +574,18 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`]
   box-sizing: border-box;
 }
 
+.c3 {
+  color: #4E3FCE;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+
+.c3 {
+  box-sizing: border-box;
+}
+
 .c6 {
   margin-left: 8px;
   margin-right: 8px;
@@ -621,10 +633,6 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`]
   box-sizing: border-box;
 }
 
-.c3 {
-  color: #4E3FCE;
-}
-
 .c7 {
   font-family: "Source Sans Pro",-apple-system,sans-serif;
   font-size: 14px;
@@ -1288,7 +1296,7 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`]
               "$$typeof": Symbol(react.forward_ref),
               "attrs": Array [],
               "componentStyle": ComponentStyle {
-                "componentId": "sc-iIQDRA",
+                "componentId": "sc-hJwwgy",
                 "isStatic": false,
                 "lastClassName": "c0",
                 "rules": Array [
@@ -1416,7 +1424,7 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`]
                 "zIndex": [Function],
               },
               "render": [Function],
-              "styledComponentId": "sc-iIQDRA",
+              "styledComponentId": "sc-hJwwgy",
               "target": Object {
                 "$$typeof": Symbol(react.forward_ref),
                 "displayName": "Box",
@@ -3161,862 +3169,1390 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`]
                         >
                           <Icon
                             color="primary"
-                            display="block"
+                            display="inline-flex"
                             name="InfoOutline"
                             size="32px"
-                          >
-                            <styled.div
-                              theme={
-                                Object {
-                                  "borderWidths": Array [
-                                    "0",
-                                    "1px",
-                                    "2px",
-                                    "4px",
-                                  ],
-                                  "borders": Array [
-                                    0,
-                                    "1px solid transparent",
-                                  ],
-                                  "breakpoints": Array [
-                                    "40em",
-                                    "52em",
-                                    "64em",
-                                  ],
-                                  "buttonSizes": Object {
-                                    "large": Object {
-                                      "fontSize": "1.5rem",
-                                      "height": "4rem",
-                                      "minWidth": "4rem",
-                                    },
-                                    "medium": Object {
-                                      "fontSize": "1rem",
-                                      "height": "3rem",
-                                      "minWidth": "3rem",
-                                    },
-                                    "small": Object {
-                                      "fontSize": "0.75rem",
-                                      "height": "2rem",
-                                      "minWidth": "2rem",
-                                      "padding": "0 1rem",
-                                    },
+                            theme={
+                              Object {
+                                "borderWidths": Array [
+                                  "0",
+                                  "1px",
+                                  "2px",
+                                  "4px",
+                                ],
+                                "borders": Array [
+                                  0,
+                                  "1px solid transparent",
+                                ],
+                                "breakpoints": Array [
+                                  "40em",
+                                  "52em",
+                                  "64em",
+                                ],
+                                "buttonSizes": Object {
+                                  "large": Object {
+                                    "fontSize": "1.5rem",
+                                    "height": "4rem",
+                                    "minWidth": "4rem",
                                   },
-                                  "buttons": Object {
-                                    "danger": Object {
-                                      "--contrast-color": "#fff",
-                                      "--main-color": "#DC2C10",
-                                    },
-                                    "primary": Object {
-                                      "--contrast-color": "#fff",
-                                      "--main-color": "#4E3FCE",
-                                      "backgroundColor": "#4E3FCE",
-                                      "color": "#fff",
-                                    },
-                                    "success": Object {
-                                      "--contrast-color": "#FFF",
-                                      "--main-color": "#28C081",
-                                    },
+                                  "medium": Object {
+                                    "fontSize": "1rem",
+                                    "height": "3rem",
+                                    "minWidth": "3rem",
                                   },
-                                  "colors": Object {
-                                    "background": "#fff",
-                                    "black": "#000",
-                                    "blacks": Array [
-                                      "rgba(0,0,0,.0125)",
-                                      "rgba(0,0,0,.025)",
-                                      "rgba(0,0,0,.05)",
-                                      "rgba(0,0,0,.1)",
-                                      "rgba(0,0,0,.2)",
-                                      "rgba(0,0,0,.3)",
-                                      "rgba(0,0,0,.4)",
-                                      "rgba(0,0,0,.5)",
-                                      "rgba(0,0,0,.6)",
-                                      "rgba(0,0,0,.7)",
-                                      "rgba(0,0,0,.8)",
-                                      "rgba(0,0,0,.9)",
-                                    ],
-                                    "blue": "#3259D6",
-                                    "danger": "#DC2C10",
-                                    "dark-gray": "#333",
-                                    "grey": "#CCC",
-                                    "info": "#36ADF1",
-                                    "light-gray": "#eee",
-                                    "light-silver": "#aaa",
-                                    "mid-gray": "#555",
-                                    "moon-gray": "#ccc",
-                                    "near-black": "#111",
-                                    "near-white": "#f4f4f4",
-                                    "primary": "#4E3FCE",
-                                    "primary-dark": "#3e32a4",
-                                    "primary-light": "#7165d7",
-                                    "silver": "#999",
-                                    "success": "#28C081",
-                                    "text": "#3F3D4B",
-                                    "transparent": "transparent",
-                                    "warning": "#FD9D28",
-                                    "white": "#fff",
-                                    "whites": Array [
-                                      "rgba(255,255,255,.0125)",
-                                      "rgba(255,255,255,.025)",
-                                      "rgba(255,255,255,.05)",
-                                      "rgba(255,255,255,.1)",
-                                      "rgba(255,255,255,.2)",
-                                      "rgba(255,255,255,.3)",
-                                      "rgba(255,255,255,.4)",
-                                      "rgba(255,255,255,.5)",
-                                      "rgba(255,255,255,.6)",
-                                      "rgba(255,255,255,.7)",
-                                      "rgba(255,255,255,.8)",
-                                      "rgba(255,255,255,.9)",
-                                    ],
+                                  "small": Object {
+                                    "fontSize": "0.75rem",
+                                    "height": "2rem",
+                                    "minWidth": "2rem",
+                                    "padding": "0 1rem",
                                   },
-                                  "fontSizes": Array [
-                                    12,
-                                    14,
-                                    16,
-                                    20,
-                                    24,
-                                    32,
-                                    48,
-                                    64,
-                                  ],
-                                  "fontWeights": Array [
-                                    0,
-                                    300,
-                                    400,
-                                    600,
-                                    700,
-                                  ],
-                                  "fonts": Object {
-                                    "mono": "\\"Source Code Pro\\", -apple-system, monospace",
-                                    "sansSerif": "\\"Source Sans Pro\\", -apple-system, sans-serif",
-                                    "serif": "athelas, georgia, times, serif",
+                                },
+                                "buttons": Object {
+                                  "danger": Object {
+                                    "--contrast-color": "#fff",
+                                    "--main-color": "#DC2C10",
                                   },
-                                  "heights": Array [
-                                    0,
-                                    16,
-                                    32,
-                                    64,
-                                    128,
-                                    256,
-                                  ],
-                                  "letterSpacings": Array [
-                                    0,
-                                    1,
-                                    2,
-                                    4,
-                                    8,
-                                  ],
-                                  "lineHeights": Object {
-                                    "copy": 1.5,
-                                    "solid": 1,
-                                    "title": 1.25,
+                                  "primary": Object {
+                                    "--contrast-color": "#fff",
+                                    "--main-color": "#4E3FCE",
+                                    "backgroundColor": "#4E3FCE",
+                                    "color": "#fff",
                                   },
-                                  "maxHeights": Array [
-                                    0,
-                                    16,
-                                    32,
-                                    64,
-                                    128,
-                                    256,
-                                  ],
-                                  "maxWidths": Array [
-                                    0,
-                                    16,
-                                    32,
-                                    64,
-                                    128,
-                                    256,
-                                    512,
-                                    768,
-                                    1024,
-                                    1536,
-                                  ],
-                                  "messageStyle": Object {
-                                    "base": Object {
-                                      "backgroundColor": "#f6f6f6",
-                                      "borderColor": "#AAA",
-                                      "color": "#666",
-                                    },
-                                    "danger": Object {
-                                      "backgroundColor": "#fbe9e7",
-                                      "borderColor": "#DC2C10",
-                                      "color": "#841a09",
-                                    },
-                                    "info": Object {
-                                      "backgroundColor": "#eaf6fd",
-                                      "borderColor": "#36ADF1",
-                                      "color": "#206790",
-                                    },
-                                    "success": Object {
-                                      "backgroundColor": "#e9f8f2",
-                                      "borderColor": "#28C081",
-                                      "color": "#18734d",
-                                    },
-                                    "warning": Object {
-                                      "backgroundColor": "#fef5e9",
-                                      "borderColor": "#FD9D28",
-                                      "color": "#975e18",
-                                    },
+                                  "success": Object {
+                                    "--contrast-color": "#FFF",
+                                    "--main-color": "#28C081",
                                   },
-                                  "minHeights": Array [
-                                    0,
-                                    16,
-                                    32,
-                                    64,
-                                    128,
-                                    256,
-                                  ],
-                                  "minWidths": Array [
-                                    0,
-                                    16,
-                                    32,
-                                    64,
-                                    128,
-                                    256,
+                                },
+                                "colors": Object {
+                                  "background": "#fff",
+                                  "black": "#000",
+                                  "blacks": Array [
+                                    "rgba(0,0,0,.0125)",
+                                    "rgba(0,0,0,.025)",
+                                    "rgba(0,0,0,.05)",
+                                    "rgba(0,0,0,.1)",
+                                    "rgba(0,0,0,.2)",
+                                    "rgba(0,0,0,.3)",
+                                    "rgba(0,0,0,.4)",
+                                    "rgba(0,0,0,.5)",
+                                    "rgba(0,0,0,.6)",
+                                    "rgba(0,0,0,.7)",
+                                    "rgba(0,0,0,.8)",
+                                    "rgba(0,0,0,.9)",
                                   ],
-                                  "opacity": Object {
-                                    "disabled": 0.4,
+                                  "blue": "#3259D6",
+                                  "danger": "#DC2C10",
+                                  "dark-gray": "#333",
+                                  "grey": "#CCC",
+                                  "info": "#36ADF1",
+                                  "light-gray": "#eee",
+                                  "light-silver": "#aaa",
+                                  "mid-gray": "#555",
+                                  "moon-gray": "#ccc",
+                                  "near-black": "#111",
+                                  "near-white": "#f4f4f4",
+                                  "primary": "#4E3FCE",
+                                  "primary-dark": "#3e32a4",
+                                  "primary-light": "#7165d7",
+                                  "silver": "#999",
+                                  "success": "#28C081",
+                                  "text": "#3F3D4B",
+                                  "transparent": "transparent",
+                                  "warning": "#FD9D28",
+                                  "white": "#fff",
+                                  "whites": Array [
+                                    "rgba(255,255,255,.0125)",
+                                    "rgba(255,255,255,.025)",
+                                    "rgba(255,255,255,.05)",
+                                    "rgba(255,255,255,.1)",
+                                    "rgba(255,255,255,.2)",
+                                    "rgba(255,255,255,.3)",
+                                    "rgba(255,255,255,.4)",
+                                    "rgba(255,255,255,.5)",
+                                    "rgba(255,255,255,.6)",
+                                    "rgba(255,255,255,.7)",
+                                    "rgba(255,255,255,.8)",
+                                    "rgba(255,255,255,.9)",
+                                  ],
+                                },
+                                "fontSizes": Array [
+                                  12,
+                                  14,
+                                  16,
+                                  20,
+                                  24,
+                                  32,
+                                  48,
+                                  64,
+                                ],
+                                "fontWeights": Array [
+                                  0,
+                                  300,
+                                  400,
+                                  600,
+                                  700,
+                                ],
+                                "fonts": Object {
+                                  "mono": "\\"Source Code Pro\\", -apple-system, monospace",
+                                  "sansSerif": "\\"Source Sans Pro\\", -apple-system, sans-serif",
+                                  "serif": "athelas, georgia, times, serif",
+                                },
+                                "heights": Array [
+                                  0,
+                                  16,
+                                  32,
+                                  64,
+                                  128,
+                                  256,
+                                ],
+                                "letterSpacings": Array [
+                                  0,
+                                  1,
+                                  2,
+                                  4,
+                                  8,
+                                ],
+                                "lineHeights": Object {
+                                  "copy": 1.5,
+                                  "solid": 1,
+                                  "title": 1.25,
+                                },
+                                "maxHeights": Array [
+                                  0,
+                                  16,
+                                  32,
+                                  64,
+                                  128,
+                                  256,
+                                ],
+                                "maxWidths": Array [
+                                  0,
+                                  16,
+                                  32,
+                                  64,
+                                  128,
+                                  256,
+                                  512,
+                                  768,
+                                  1024,
+                                  1536,
+                                ],
+                                "messageStyle": Object {
+                                  "base": Object {
+                                    "backgroundColor": "#f6f6f6",
+                                    "borderColor": "#AAA",
+                                    "color": "#666",
                                   },
-                                  "radii": Array [
+                                  "danger": Object {
+                                    "backgroundColor": "#fbe9e7",
+                                    "borderColor": "#DC2C10",
+                                    "color": "#841a09",
+                                  },
+                                  "info": Object {
+                                    "backgroundColor": "#eaf6fd",
+                                    "borderColor": "#36ADF1",
+                                    "color": "#206790",
+                                  },
+                                  "success": Object {
+                                    "backgroundColor": "#e9f8f2",
+                                    "borderColor": "#28C081",
+                                    "color": "#18734d",
+                                  },
+                                  "warning": Object {
+                                    "backgroundColor": "#fef5e9",
+                                    "borderColor": "#FD9D28",
+                                    "color": "#975e18",
+                                  },
+                                },
+                                "minHeights": Array [
+                                  0,
+                                  16,
+                                  32,
+                                  64,
+                                  128,
+                                  256,
+                                ],
+                                "minWidths": Array [
+                                  0,
+                                  16,
+                                  32,
+                                  64,
+                                  128,
+                                  256,
+                                ],
+                                "opacity": Object {
+                                  "disabled": 0.4,
+                                },
+                                "radii": Array [
+                                  "0",
+                                  "4px",
+                                  "8px",
+                                  "16px",
+                                  "32px",
+                                ],
+                                "shadows": Array [
+                                  "0",
+                                  "0px 2px 4px rgba(0, 0, 0, 0.1)",
+                                  "0px 8px 16px rgba(0, 0, 0, 0.1)",
+                                  "0 7px 14px rgba(50,50,93,.1)",
+                                ],
+                                "space": Array [
+                                  0,
+                                  4,
+                                  8,
+                                  16,
+                                  32,
+                                  64,
+                                  128,
+                                  256,
+                                ],
+                                "width": Array [
+                                  0,
+                                  16,
+                                  32,
+                                  64,
+                                  128,
+                                  256,
+                                ],
+                                "zIndices": Array [
+                                  0,
+                                  9,
+                                  99,
+                                  999,
+                                  9999,
+                                ],
+                              }
+                            }
+                          >
+                            <Box
+                              color="primary"
+                              display="inline-flex"
+                              theme={
+                                Object {
+                                  "borderWidths": Array [
                                     "0",
+                                    "1px",
+                                    "2px",
                                     "4px",
-                                    "8px",
-                                    "16px",
-                                    "32px",
-                                  ],
-                                  "shadows": Array [
-                                    "0",
-                                    "0px 2px 4px rgba(0, 0, 0, 0.1)",
-                                    "0px 8px 16px rgba(0, 0, 0, 0.1)",
-                                    "0 7px 14px rgba(50,50,93,.1)",
-                                  ],
-                                  "space": Array [
-                                    0,
-                                    4,
-                                    8,
-                                    16,
-                                    32,
-                                    64,
-                                    128,
-                                    256,
                                   ],
-                                  "width": Array [
+                                  "borders": Array [
                                     0,
-                                    16,
-                                    32,
-                                    64,
-                                    128,
-                                    256,
+                                    "1px solid transparent",
                                   ],
-                                  "zIndices": Array [
-                                    0,
-                                    9,
-                                    99,
-                                    999,
-                                    9999,
+                                  "breakpoints": Array [
+                                    "40em",
+                                    "52em",
+                                    "64em",
                                   ],
-                                }
-                              }
-                            >
-                              <StyledComponent
-                                forwardedComponent={
-                                  Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "_foldedDefaultProps": Object {
-                                      "theme": Object {
-                                        "borderWidths": Array [
-                                          "0",
-                                          "1px",
-                                          "2px",
-                                          "4px",
-                                        ],
-                                        "borders": Array [
-                                          0,
-                                          "1px solid transparent",
-                                        ],
-                                        "breakpoints": Array [
-                                          "40em",
-                                          "52em",
-                                          "64em",
-                                        ],
-                                        "buttonSizes": Object {
-                                          "large": Object {
-                                            "fontSize": "1.5rem",
-                                            "height": "4rem",
-                                            "minWidth": "4rem",
-                                          },
-                                          "medium": Object {
-                                            "fontSize": "1rem",
-                                            "height": "3rem",
-                                            "minWidth": "3rem",
-                                          },
-                                          "small": Object {
-                                            "fontSize": "0.75rem",
-                                            "height": "2rem",
-                                            "minWidth": "2rem",
-                                            "padding": "0 1rem",
-                                          },
-                                        },
-                                        "buttons": Object {
-                                          "danger": Object {
-                                            "--contrast-color": "#fff",
-                                            "--main-color": "#DC2C10",
-                                          },
-                                          "primary": Object {
-                                            "--contrast-color": "#fff",
-                                            "--main-color": "#4E3FCE",
-                                            "backgroundColor": "#4E3FCE",
-                                            "color": "#fff",
-                                          },
-                                          "success": Object {
-                                            "--contrast-color": "#FFF",
-                                            "--main-color": "#28C081",
-                                          },
-                                        },
-                                        "colors": Object {
-                                          "background": "#fff",
-                                          "black": "#000",
-                                          "blacks": Array [
-                                            "rgba(0,0,0,.0125)",
-                                            "rgba(0,0,0,.025)",
-                                            "rgba(0,0,0,.05)",
-                                            "rgba(0,0,0,.1)",
-                                            "rgba(0,0,0,.2)",
-                                            "rgba(0,0,0,.3)",
-                                            "rgba(0,0,0,.4)",
-                                            "rgba(0,0,0,.5)",
-                                            "rgba(0,0,0,.6)",
-                                            "rgba(0,0,0,.7)",
-                                            "rgba(0,0,0,.8)",
-                                            "rgba(0,0,0,.9)",
+                                  "buttonSizes": Object {
+                                    "large": Object {
+                                      "fontSize": "1.5rem",
+                                      "height": "4rem",
+                                      "minWidth": "4rem",
+                                    },
+                                    "medium": Object {
+                                      "fontSize": "1rem",
+                                      "height": "3rem",
+                                      "minWidth": "3rem",
+                                    },
+                                    "small": Object {
+                                      "fontSize": "0.75rem",
+                                      "height": "2rem",
+                                      "minWidth": "2rem",
+                                      "padding": "0 1rem",
+                                    },
+                                  },
+                                  "buttons": Object {
+                                    "danger": Object {
+                                      "--contrast-color": "#fff",
+                                      "--main-color": "#DC2C10",
+                                    },
+                                    "primary": Object {
+                                      "--contrast-color": "#fff",
+                                      "--main-color": "#4E3FCE",
+                                      "backgroundColor": "#4E3FCE",
+                                      "color": "#fff",
+                                    },
+                                    "success": Object {
+                                      "--contrast-color": "#FFF",
+                                      "--main-color": "#28C081",
+                                    },
+                                  },
+                                  "colors": Object {
+                                    "background": "#fff",
+                                    "black": "#000",
+                                    "blacks": Array [
+                                      "rgba(0,0,0,.0125)",
+                                      "rgba(0,0,0,.025)",
+                                      "rgba(0,0,0,.05)",
+                                      "rgba(0,0,0,.1)",
+                                      "rgba(0,0,0,.2)",
+                                      "rgba(0,0,0,.3)",
+                                      "rgba(0,0,0,.4)",
+                                      "rgba(0,0,0,.5)",
+                                      "rgba(0,0,0,.6)",
+                                      "rgba(0,0,0,.7)",
+                                      "rgba(0,0,0,.8)",
+                                      "rgba(0,0,0,.9)",
+                                    ],
+                                    "blue": "#3259D6",
+                                    "danger": "#DC2C10",
+                                    "dark-gray": "#333",
+                                    "grey": "#CCC",
+                                    "info": "#36ADF1",
+                                    "light-gray": "#eee",
+                                    "light-silver": "#aaa",
+                                    "mid-gray": "#555",
+                                    "moon-gray": "#ccc",
+                                    "near-black": "#111",
+                                    "near-white": "#f4f4f4",
+                                    "primary": "#4E3FCE",
+                                    "primary-dark": "#3e32a4",
+                                    "primary-light": "#7165d7",
+                                    "silver": "#999",
+                                    "success": "#28C081",
+                                    "text": "#3F3D4B",
+                                    "transparent": "transparent",
+                                    "warning": "#FD9D28",
+                                    "white": "#fff",
+                                    "whites": Array [
+                                      "rgba(255,255,255,.0125)",
+                                      "rgba(255,255,255,.025)",
+                                      "rgba(255,255,255,.05)",
+                                      "rgba(255,255,255,.1)",
+                                      "rgba(255,255,255,.2)",
+                                      "rgba(255,255,255,.3)",
+                                      "rgba(255,255,255,.4)",
+                                      "rgba(255,255,255,.5)",
+                                      "rgba(255,255,255,.6)",
+                                      "rgba(255,255,255,.7)",
+                                      "rgba(255,255,255,.8)",
+                                      "rgba(255,255,255,.9)",
+                                    ],
+                                  },
+                                  "fontSizes": Array [
+                                    12,
+                                    14,
+                                    16,
+                                    20,
+                                    24,
+                                    32,
+                                    48,
+                                    64,
+                                  ],
+                                  "fontWeights": Array [
+                                    0,
+                                    300,
+                                    400,
+                                    600,
+                                    700,
+                                  ],
+                                  "fonts": Object {
+                                    "mono": "\\"Source Code Pro\\", -apple-system, monospace",
+                                    "sansSerif": "\\"Source Sans Pro\\", -apple-system, sans-serif",
+                                    "serif": "athelas, georgia, times, serif",
+                                  },
+                                  "heights": Array [
+                                    0,
+                                    16,
+                                    32,
+                                    64,
+                                    128,
+                                    256,
+                                  ],
+                                  "letterSpacings": Array [
+                                    0,
+                                    1,
+                                    2,
+                                    4,
+                                    8,
+                                  ],
+                                  "lineHeights": Object {
+                                    "copy": 1.5,
+                                    "solid": 1,
+                                    "title": 1.25,
+                                  },
+                                  "maxHeights": Array [
+                                    0,
+                                    16,
+                                    32,
+                                    64,
+                                    128,
+                                    256,
+                                  ],
+                                  "maxWidths": Array [
+                                    0,
+                                    16,
+                                    32,
+                                    64,
+                                    128,
+                                    256,
+                                    512,
+                                    768,
+                                    1024,
+                                    1536,
+                                  ],
+                                  "messageStyle": Object {
+                                    "base": Object {
+                                      "backgroundColor": "#f6f6f6",
+                                      "borderColor": "#AAA",
+                                      "color": "#666",
+                                    },
+                                    "danger": Object {
+                                      "backgroundColor": "#fbe9e7",
+                                      "borderColor": "#DC2C10",
+                                      "color": "#841a09",
+                                    },
+                                    "info": Object {
+                                      "backgroundColor": "#eaf6fd",
+                                      "borderColor": "#36ADF1",
+                                      "color": "#206790",
+                                    },
+                                    "success": Object {
+                                      "backgroundColor": "#e9f8f2",
+                                      "borderColor": "#28C081",
+                                      "color": "#18734d",
+                                    },
+                                    "warning": Object {
+                                      "backgroundColor": "#fef5e9",
+                                      "borderColor": "#FD9D28",
+                                      "color": "#975e18",
+                                    },
+                                  },
+                                  "minHeights": Array [
+                                    0,
+                                    16,
+                                    32,
+                                    64,
+                                    128,
+                                    256,
+                                  ],
+                                  "minWidths": Array [
+                                    0,
+                                    16,
+                                    32,
+                                    64,
+                                    128,
+                                    256,
+                                  ],
+                                  "opacity": Object {
+                                    "disabled": 0.4,
+                                  },
+                                  "radii": Array [
+                                    "0",
+                                    "4px",
+                                    "8px",
+                                    "16px",
+                                    "32px",
+                                  ],
+                                  "shadows": Array [
+                                    "0",
+                                    "0px 2px 4px rgba(0, 0, 0, 0.1)",
+                                    "0px 8px 16px rgba(0, 0, 0, 0.1)",
+                                    "0 7px 14px rgba(50,50,93,.1)",
+                                  ],
+                                  "space": Array [
+                                    0,
+                                    4,
+                                    8,
+                                    16,
+                                    32,
+                                    64,
+                                    128,
+                                    256,
+                                  ],
+                                  "width": Array [
+                                    0,
+                                    16,
+                                    32,
+                                    64,
+                                    128,
+                                    256,
+                                  ],
+                                  "zIndices": Array [
+                                    0,
+                                    9,
+                                    99,
+                                    999,
+                                    9999,
+                                  ],
+                                }
+                              }
+                            >
+                              <styled.div
+                                color="primary"
+                                display="inline-flex"
+                                theme={
+                                  Object {
+                                    "borderWidths": Array [
+                                      "0",
+                                      "1px",
+                                      "2px",
+                                      "4px",
+                                    ],
+                                    "borders": Array [
+                                      0,
+                                      "1px solid transparent",
+                                    ],
+                                    "breakpoints": Array [
+                                      "40em",
+                                      "52em",
+                                      "64em",
+                                    ],
+                                    "buttonSizes": Object {
+                                      "large": Object {
+                                        "fontSize": "1.5rem",
+                                        "height": "4rem",
+                                        "minWidth": "4rem",
+                                      },
+                                      "medium": Object {
+                                        "fontSize": "1rem",
+                                        "height": "3rem",
+                                        "minWidth": "3rem",
+                                      },
+                                      "small": Object {
+                                        "fontSize": "0.75rem",
+                                        "height": "2rem",
+                                        "minWidth": "2rem",
+                                        "padding": "0 1rem",
+                                      },
+                                    },
+                                    "buttons": Object {
+                                      "danger": Object {
+                                        "--contrast-color": "#fff",
+                                        "--main-color": "#DC2C10",
+                                      },
+                                      "primary": Object {
+                                        "--contrast-color": "#fff",
+                                        "--main-color": "#4E3FCE",
+                                        "backgroundColor": "#4E3FCE",
+                                        "color": "#fff",
+                                      },
+                                      "success": Object {
+                                        "--contrast-color": "#FFF",
+                                        "--main-color": "#28C081",
+                                      },
+                                    },
+                                    "colors": Object {
+                                      "background": "#fff",
+                                      "black": "#000",
+                                      "blacks": Array [
+                                        "rgba(0,0,0,.0125)",
+                                        "rgba(0,0,0,.025)",
+                                        "rgba(0,0,0,.05)",
+                                        "rgba(0,0,0,.1)",
+                                        "rgba(0,0,0,.2)",
+                                        "rgba(0,0,0,.3)",
+                                        "rgba(0,0,0,.4)",
+                                        "rgba(0,0,0,.5)",
+                                        "rgba(0,0,0,.6)",
+                                        "rgba(0,0,0,.7)",
+                                        "rgba(0,0,0,.8)",
+                                        "rgba(0,0,0,.9)",
+                                      ],
+                                      "blue": "#3259D6",
+                                      "danger": "#DC2C10",
+                                      "dark-gray": "#333",
+                                      "grey": "#CCC",
+                                      "info": "#36ADF1",
+                                      "light-gray": "#eee",
+                                      "light-silver": "#aaa",
+                                      "mid-gray": "#555",
+                                      "moon-gray": "#ccc",
+                                      "near-black": "#111",
+                                      "near-white": "#f4f4f4",
+                                      "primary": "#4E3FCE",
+                                      "primary-dark": "#3e32a4",
+                                      "primary-light": "#7165d7",
+                                      "silver": "#999",
+                                      "success": "#28C081",
+                                      "text": "#3F3D4B",
+                                      "transparent": "transparent",
+                                      "warning": "#FD9D28",
+                                      "white": "#fff",
+                                      "whites": Array [
+                                        "rgba(255,255,255,.0125)",
+                                        "rgba(255,255,255,.025)",
+                                        "rgba(255,255,255,.05)",
+                                        "rgba(255,255,255,.1)",
+                                        "rgba(255,255,255,.2)",
+                                        "rgba(255,255,255,.3)",
+                                        "rgba(255,255,255,.4)",
+                                        "rgba(255,255,255,.5)",
+                                        "rgba(255,255,255,.6)",
+                                        "rgba(255,255,255,.7)",
+                                        "rgba(255,255,255,.8)",
+                                        "rgba(255,255,255,.9)",
+                                      ],
+                                    },
+                                    "fontSizes": Array [
+                                      12,
+                                      14,
+                                      16,
+                                      20,
+                                      24,
+                                      32,
+                                      48,
+                                      64,
+                                    ],
+                                    "fontWeights": Array [
+                                      0,
+                                      300,
+                                      400,
+                                      600,
+                                      700,
+                                    ],
+                                    "fonts": Object {
+                                      "mono": "\\"Source Code Pro\\", -apple-system, monospace",
+                                      "sansSerif": "\\"Source Sans Pro\\", -apple-system, sans-serif",
+                                      "serif": "athelas, georgia, times, serif",
+                                    },
+                                    "heights": Array [
+                                      0,
+                                      16,
+                                      32,
+                                      64,
+                                      128,
+                                      256,
+                                    ],
+                                    "letterSpacings": Array [
+                                      0,
+                                      1,
+                                      2,
+                                      4,
+                                      8,
+                                    ],
+                                    "lineHeights": Object {
+                                      "copy": 1.5,
+                                      "solid": 1,
+                                      "title": 1.25,
+                                    },
+                                    "maxHeights": Array [
+                                      0,
+                                      16,
+                                      32,
+                                      64,
+                                      128,
+                                      256,
+                                    ],
+                                    "maxWidths": Array [
+                                      0,
+                                      16,
+                                      32,
+                                      64,
+                                      128,
+                                      256,
+                                      512,
+                                      768,
+                                      1024,
+                                      1536,
+                                    ],
+                                    "messageStyle": Object {
+                                      "base": Object {
+                                        "backgroundColor": "#f6f6f6",
+                                        "borderColor": "#AAA",
+                                        "color": "#666",
+                                      },
+                                      "danger": Object {
+                                        "backgroundColor": "#fbe9e7",
+                                        "borderColor": "#DC2C10",
+                                        "color": "#841a09",
+                                      },
+                                      "info": Object {
+                                        "backgroundColor": "#eaf6fd",
+                                        "borderColor": "#36ADF1",
+                                        "color": "#206790",
+                                      },
+                                      "success": Object {
+                                        "backgroundColor": "#e9f8f2",
+                                        "borderColor": "#28C081",
+                                        "color": "#18734d",
+                                      },
+                                      "warning": Object {
+                                        "backgroundColor": "#fef5e9",
+                                        "borderColor": "#FD9D28",
+                                        "color": "#975e18",
+                                      },
+                                    },
+                                    "minHeights": Array [
+                                      0,
+                                      16,
+                                      32,
+                                      64,
+                                      128,
+                                      256,
+                                    ],
+                                    "minWidths": Array [
+                                      0,
+                                      16,
+                                      32,
+                                      64,
+                                      128,
+                                      256,
+                                    ],
+                                    "opacity": Object {
+                                      "disabled": 0.4,
+                                    },
+                                    "radii": Array [
+                                      "0",
+                                      "4px",
+                                      "8px",
+                                      "16px",
+                                      "32px",
+                                    ],
+                                    "shadows": Array [
+                                      "0",
+                                      "0px 2px 4px rgba(0, 0, 0, 0.1)",
+                                      "0px 8px 16px rgba(0, 0, 0, 0.1)",
+                                      "0 7px 14px rgba(50,50,93,.1)",
+                                    ],
+                                    "space": Array [
+                                      0,
+                                      4,
+                                      8,
+                                      16,
+                                      32,
+                                      64,
+                                      128,
+                                      256,
+                                    ],
+                                    "width": Array [
+                                      0,
+                                      16,
+                                      32,
+                                      64,
+                                      128,
+                                      256,
+                                    ],
+                                    "zIndices": Array [
+                                      0,
+                                      9,
+                                      99,
+                                      999,
+                                      9999,
+                                    ],
+                                  }
+                                }
+                              >
+                                <StyledComponent
+                                  color="primary"
+                                  display="inline-flex"
+                                  forwardedComponent={
+                                    Object {
+                                      "$$typeof": Symbol(react.forward_ref),
+                                      "_foldedDefaultProps": Object {
+                                        "theme": Object {
+                                          "borderWidths": Array [
+                                            "0",
+                                            "1px",
+                                            "2px",
+                                            "4px",
                                           ],
-                                          "blue": "#3259D6",
-                                          "danger": "#DC2C10",
-                                          "dark-gray": "#333",
-                                          "grey": "#CCC",
-                                          "info": "#36ADF1",
-                                          "light-gray": "#eee",
-                                          "light-silver": "#aaa",
-                                          "mid-gray": "#555",
-                                          "moon-gray": "#ccc",
-                                          "near-black": "#111",
-                                          "near-white": "#f4f4f4",
-                                          "primary": "#4E3FCE",
-                                          "primary-dark": "#3e32a4",
-                                          "primary-light": "#7165d7",
-                                          "silver": "#999",
-                                          "success": "#28C081",
-                                          "text": "#3F3D4B",
-                                          "transparent": "transparent",
-                                          "warning": "#FD9D28",
-                                          "white": "#fff",
-                                          "whites": Array [
-                                            "rgba(255,255,255,.0125)",
-                                            "rgba(255,255,255,.025)",
-                                            "rgba(255,255,255,.05)",
-                                            "rgba(255,255,255,.1)",
-                                            "rgba(255,255,255,.2)",
-                                            "rgba(255,255,255,.3)",
-                                            "rgba(255,255,255,.4)",
-                                            "rgba(255,255,255,.5)",
-                                            "rgba(255,255,255,.6)",
-                                            "rgba(255,255,255,.7)",
-                                            "rgba(255,255,255,.8)",
-                                            "rgba(255,255,255,.9)",
+                                          "borders": Array [
+                                            0,
+                                            "1px solid transparent",
                                           ],
-                                        },
-                                        "fontSizes": Array [
-                                          12,
-                                          14,
-                                          16,
-                                          20,
-                                          24,
-                                          32,
-                                          48,
-                                          64,
-                                        ],
-                                        "fontWeights": Array [
-                                          0,
-                                          300,
-                                          400,
-                                          600,
-                                          700,
-                                        ],
-                                        "fonts": Object {
-                                          "mono": "\\"Source Code Pro\\", -apple-system, monospace",
-                                          "sansSerif": "\\"Source Sans Pro\\", -apple-system, sans-serif",
-                                          "serif": "athelas, georgia, times, serif",
-                                        },
-                                        "heights": Array [
-                                          0,
-                                          16,
-                                          32,
-                                          64,
-                                          128,
-                                          256,
-                                        ],
-                                        "letterSpacings": Array [
-                                          0,
-                                          1,
-                                          2,
-                                          4,
-                                          8,
-                                        ],
-                                        "lineHeights": Object {
-                                          "copy": 1.5,
-                                          "solid": 1,
-                                          "title": 1.25,
-                                        },
-                                        "maxHeights": Array [
-                                          0,
-                                          16,
-                                          32,
-                                          64,
-                                          128,
-                                          256,
-                                        ],
-                                        "maxWidths": Array [
-                                          0,
-                                          16,
-                                          32,
-                                          64,
-                                          128,
-                                          256,
-                                          512,
-                                          768,
-                                          1024,
-                                          1536,
-                                        ],
-                                        "messageStyle": Object {
-                                          "base": Object {
-                                            "backgroundColor": "#f6f6f6",
-                                            "borderColor": "#AAA",
-                                            "color": "#666",
+                                          "breakpoints": Array [
+                                            "40em",
+                                            "52em",
+                                            "64em",
+                                          ],
+                                          "buttonSizes": Object {
+                                            "large": Object {
+                                              "fontSize": "1.5rem",
+                                              "height": "4rem",
+                                              "minWidth": "4rem",
+                                            },
+                                            "medium": Object {
+                                              "fontSize": "1rem",
+                                              "height": "3rem",
+                                              "minWidth": "3rem",
+                                            },
+                                            "small": Object {
+                                              "fontSize": "0.75rem",
+                                              "height": "2rem",
+                                              "minWidth": "2rem",
+                                              "padding": "0 1rem",
+                                            },
+                                          },
+                                          "buttons": Object {
+                                            "danger": Object {
+                                              "--contrast-color": "#fff",
+                                              "--main-color": "#DC2C10",
+                                            },
+                                            "primary": Object {
+                                              "--contrast-color": "#fff",
+                                              "--main-color": "#4E3FCE",
+                                              "backgroundColor": "#4E3FCE",
+                                              "color": "#fff",
+                                            },
+                                            "success": Object {
+                                              "--contrast-color": "#FFF",
+                                              "--main-color": "#28C081",
+                                            },
+                                          },
+                                          "colors": Object {
+                                            "background": "#fff",
+                                            "black": "#000",
+                                            "blacks": Array [
+                                              "rgba(0,0,0,.0125)",
+                                              "rgba(0,0,0,.025)",
+                                              "rgba(0,0,0,.05)",
+                                              "rgba(0,0,0,.1)",
+                                              "rgba(0,0,0,.2)",
+                                              "rgba(0,0,0,.3)",
+                                              "rgba(0,0,0,.4)",
+                                              "rgba(0,0,0,.5)",
+                                              "rgba(0,0,0,.6)",
+                                              "rgba(0,0,0,.7)",
+                                              "rgba(0,0,0,.8)",
+                                              "rgba(0,0,0,.9)",
+                                            ],
+                                            "blue": "#3259D6",
+                                            "danger": "#DC2C10",
+                                            "dark-gray": "#333",
+                                            "grey": "#CCC",
+                                            "info": "#36ADF1",
+                                            "light-gray": "#eee",
+                                            "light-silver": "#aaa",
+                                            "mid-gray": "#555",
+                                            "moon-gray": "#ccc",
+                                            "near-black": "#111",
+                                            "near-white": "#f4f4f4",
+                                            "primary": "#4E3FCE",
+                                            "primary-dark": "#3e32a4",
+                                            "primary-light": "#7165d7",
+                                            "silver": "#999",
+                                            "success": "#28C081",
+                                            "text": "#3F3D4B",
+                                            "transparent": "transparent",
+                                            "warning": "#FD9D28",
+                                            "white": "#fff",
+                                            "whites": Array [
+                                              "rgba(255,255,255,.0125)",
+                                              "rgba(255,255,255,.025)",
+                                              "rgba(255,255,255,.05)",
+                                              "rgba(255,255,255,.1)",
+                                              "rgba(255,255,255,.2)",
+                                              "rgba(255,255,255,.3)",
+                                              "rgba(255,255,255,.4)",
+                                              "rgba(255,255,255,.5)",
+                                              "rgba(255,255,255,.6)",
+                                              "rgba(255,255,255,.7)",
+                                              "rgba(255,255,255,.8)",
+                                              "rgba(255,255,255,.9)",
+                                            ],
                                           },
-                                          "danger": Object {
-                                            "backgroundColor": "#fbe9e7",
-                                            "borderColor": "#DC2C10",
-                                            "color": "#841a09",
+                                          "fontSizes": Array [
+                                            12,
+                                            14,
+                                            16,
+                                            20,
+                                            24,
+                                            32,
+                                            48,
+                                            64,
+                                          ],
+                                          "fontWeights": Array [
+                                            0,
+                                            300,
+                                            400,
+                                            600,
+                                            700,
+                                          ],
+                                          "fonts": Object {
+                                            "mono": "\\"Source Code Pro\\", -apple-system, monospace",
+                                            "sansSerif": "\\"Source Sans Pro\\", -apple-system, sans-serif",
+                                            "serif": "athelas, georgia, times, serif",
                                           },
-                                          "info": Object {
-                                            "backgroundColor": "#eaf6fd",
-                                            "borderColor": "#36ADF1",
-                                            "color": "#206790",
+                                          "heights": Array [
+                                            0,
+                                            16,
+                                            32,
+                                            64,
+                                            128,
+                                            256,
+                                          ],
+                                          "letterSpacings": Array [
+                                            0,
+                                            1,
+                                            2,
+                                            4,
+                                            8,
+                                          ],
+                                          "lineHeights": Object {
+                                            "copy": 1.5,
+                                            "solid": 1,
+                                            "title": 1.25,
                                           },
-                                          "success": Object {
-                                            "backgroundColor": "#e9f8f2",
-                                            "borderColor": "#28C081",
-                                            "color": "#18734d",
+                                          "maxHeights": Array [
+                                            0,
+                                            16,
+                                            32,
+                                            64,
+                                            128,
+                                            256,
+                                          ],
+                                          "maxWidths": Array [
+                                            0,
+                                            16,
+                                            32,
+                                            64,
+                                            128,
+                                            256,
+                                            512,
+                                            768,
+                                            1024,
+                                            1536,
+                                          ],
+                                          "messageStyle": Object {
+                                            "base": Object {
+                                              "backgroundColor": "#f6f6f6",
+                                              "borderColor": "#AAA",
+                                              "color": "#666",
+                                            },
+                                            "danger": Object {
+                                              "backgroundColor": "#fbe9e7",
+                                              "borderColor": "#DC2C10",
+                                              "color": "#841a09",
+                                            },
+                                            "info": Object {
+                                              "backgroundColor": "#eaf6fd",
+                                              "borderColor": "#36ADF1",
+                                              "color": "#206790",
+                                            },
+                                            "success": Object {
+                                              "backgroundColor": "#e9f8f2",
+                                              "borderColor": "#28C081",
+                                              "color": "#18734d",
+                                            },
+                                            "warning": Object {
+                                              "backgroundColor": "#fef5e9",
+                                              "borderColor": "#FD9D28",
+                                              "color": "#975e18",
+                                            },
                                           },
-                                          "warning": Object {
-                                            "backgroundColor": "#fef5e9",
-                                            "borderColor": "#FD9D28",
-                                            "color": "#975e18",
+                                          "minHeights": Array [
+                                            0,
+                                            16,
+                                            32,
+                                            64,
+                                            128,
+                                            256,
+                                          ],
+                                          "minWidths": Array [
+                                            0,
+                                            16,
+                                            32,
+                                            64,
+                                            128,
+                                            256,
+                                          ],
+                                          "opacity": Object {
+                                            "disabled": 0.4,
                                           },
-                                        },
-                                        "minHeights": Array [
-                                          0,
-                                          16,
-                                          32,
-                                          64,
-                                          128,
-                                          256,
-                                        ],
-                                        "minWidths": Array [
-                                          0,
-                                          16,
-                                          32,
-                                          64,
-                                          128,
-                                          256,
-                                        ],
-                                        "opacity": Object {
-                                          "disabled": 0.4,
-                                        },
-                                        "radii": Array [
-                                          "0",
-                                          "4px",
-                                          "8px",
-                                          "16px",
-                                          "32px",
-                                        ],
-                                        "shadows": Array [
-                                          "0",
-                                          "0px 2px 4px rgba(0, 0, 0, 0.1)",
-                                          "0px 8px 16px rgba(0, 0, 0, 0.1)",
-                                          "0 7px 14px rgba(50,50,93,.1)",
-                                        ],
-                                        "space": Array [
-                                          0,
-                                          4,
-                                          8,
-                                          16,
-                                          32,
-                                          64,
-                                          128,
-                                          256,
-                                        ],
-                                        "width": Array [
-                                          0,
-                                          16,
-                                          32,
-                                          64,
-                                          128,
-                                          256,
-                                        ],
-                                        "zIndices": Array [
-                                          0,
-                                          9,
-                                          99,
-                                          999,
-                                          9999,
-                                        ],
-                                      },
-                                    },
-                                    "attrs": Array [],
-                                    "componentStyle": ComponentStyle {
-                                      "componentId": "sc-gyfYDX",
-                                      "isStatic": false,
-                                      "lastClassName": "ijYAvN",
-                                      "rules": Array [],
-                                    },
-                                    "displayName": "styled.div",
-                                    "foldedComponentIds": Array [],
-                                    "render": [Function],
-                                    "styledComponentId": "sc-gyfYDX",
-                                    "target": "div",
-                                    "toString": [Function],
-                                    "usesTheme": false,
-                                    "warnTooManyClasses": [Function],
-                                    "withComponent": [Function],
-                                  }
-                                }
-                                forwardedRef={null}
-                                theme={
-                                  Object {
-                                    "borderWidths": Array [
-                                      "0",
-                                      "1px",
-                                      "2px",
-                                      "4px",
-                                    ],
-                                    "borders": Array [
-                                      0,
-                                      "1px solid transparent",
-                                    ],
-                                    "breakpoints": Array [
-                                      "40em",
-                                      "52em",
-                                      "64em",
-                                    ],
-                                    "buttonSizes": Object {
-                                      "large": Object {
-                                        "fontSize": "1.5rem",
-                                        "height": "4rem",
-                                        "minWidth": "4rem",
-                                      },
-                                      "medium": Object {
-                                        "fontSize": "1rem",
-                                        "height": "3rem",
-                                        "minWidth": "3rem",
-                                      },
-                                      "small": Object {
-                                        "fontSize": "0.75rem",
-                                        "height": "2rem",
-                                        "minWidth": "2rem",
-                                        "padding": "0 1rem",
-                                      },
-                                    },
-                                    "buttons": Object {
-                                      "danger": Object {
-                                        "--contrast-color": "#fff",
-                                        "--main-color": "#DC2C10",
-                                      },
-                                      "primary": Object {
-                                        "--contrast-color": "#fff",
-                                        "--main-color": "#4E3FCE",
-                                        "backgroundColor": "#4E3FCE",
-                                        "color": "#fff",
+                                          "radii": Array [
+                                            "0",
+                                            "4px",
+                                            "8px",
+                                            "16px",
+                                            "32px",
+                                          ],
+                                          "shadows": Array [
+                                            "0",
+                                            "0px 2px 4px rgba(0, 0, 0, 0.1)",
+                                            "0px 8px 16px rgba(0, 0, 0, 0.1)",
+                                            "0 7px 14px rgba(50,50,93,.1)",
+                                          ],
+                                          "space": Array [
+                                            0,
+                                            4,
+                                            8,
+                                            16,
+                                            32,
+                                            64,
+                                            128,
+                                            256,
+                                          ],
+                                          "width": Array [
+                                            0,
+                                            16,
+                                            32,
+                                            64,
+                                            128,
+                                            256,
+                                          ],
+                                          "zIndices": Array [
+                                            0,
+                                            9,
+                                            99,
+                                            999,
+                                            9999,
+                                          ],
+                                        },
                                       },
-                                      "success": Object {
-                                        "--contrast-color": "#FFF",
-                                        "--main-color": "#28C081",
+                                      "attrs": Array [],
+                                      "componentStyle": ComponentStyle {
+                                        "componentId": "sc-bdVaJa",
+                                        "isStatic": false,
+                                        "lastClassName": "c14",
+                                        "rules": Array [
+                                          "
+  & {
+    box-sizing: border-box;
+  }
+
+  ",
+                                          [Function],
+                                          "
+  ",
+                                          [Function],
+                                          "
+  ",
+                                          [Function],
+                                          "
+  ",
+                                          [Function],
+                                          "
+  ",
+                                          [Function],
+                                          "
+  ",
+                                          [Function],
+                                          "
+",
+                                        ],
                                       },
-                                    },
-                                    "colors": Object {
-                                      "background": "#fff",
-                                      "black": "#000",
-                                      "blacks": Array [
-                                        "rgba(0,0,0,.0125)",
-                                        "rgba(0,0,0,.025)",
-                                        "rgba(0,0,0,.05)",
-                                        "rgba(0,0,0,.1)",
-                                        "rgba(0,0,0,.2)",
-                                        "rgba(0,0,0,.3)",
-                                        "rgba(0,0,0,.4)",
-                                        "rgba(0,0,0,.5)",
-                                        "rgba(0,0,0,.6)",
-                                        "rgba(0,0,0,.7)",
-                                        "rgba(0,0,0,.8)",
-                                        "rgba(0,0,0,.9)",
+                                      "displayName": "styled.div",
+                                      "foldedComponentIds": Array [],
+                                      "render": [Function],
+                                      "styledComponentId": "sc-bdVaJa",
+                                      "target": "div",
+                                      "toString": [Function],
+                                      "usesTheme": false,
+                                      "warnTooManyClasses": [Function],
+                                      "withComponent": [Function],
+                                    }
+                                  }
+                                  forwardedRef={null}
+                                  theme={
+                                    Object {
+                                      "borderWidths": Array [
+                                        "0",
+                                        "1px",
+                                        "2px",
+                                        "4px",
                                       ],
-                                      "blue": "#3259D6",
-                                      "danger": "#DC2C10",
-                                      "dark-gray": "#333",
-                                      "grey": "#CCC",
-                                      "info": "#36ADF1",
-                                      "light-gray": "#eee",
-                                      "light-silver": "#aaa",
-                                      "mid-gray": "#555",
-                                      "moon-gray": "#ccc",
-                                      "near-black": "#111",
-                                      "near-white": "#f4f4f4",
-                                      "primary": "#4E3FCE",
-                                      "primary-dark": "#3e32a4",
-                                      "primary-light": "#7165d7",
-                                      "silver": "#999",
-                                      "success": "#28C081",
-                                      "text": "#3F3D4B",
-                                      "transparent": "transparent",
-                                      "warning": "#FD9D28",
-                                      "white": "#fff",
-                                      "whites": Array [
-                                        "rgba(255,255,255,.0125)",
-                                        "rgba(255,255,255,.025)",
-                                        "rgba(255,255,255,.05)",
-                                        "rgba(255,255,255,.1)",
-                                        "rgba(255,255,255,.2)",
-                                        "rgba(255,255,255,.3)",
-                                        "rgba(255,255,255,.4)",
-                                        "rgba(255,255,255,.5)",
-                                        "rgba(255,255,255,.6)",
-                                        "rgba(255,255,255,.7)",
-                                        "rgba(255,255,255,.8)",
-                                        "rgba(255,255,255,.9)",
+                                      "borders": Array [
+                                        0,
+                                        "1px solid transparent",
                                       ],
-                                    },
-                                    "fontSizes": Array [
-                                      12,
-                                      14,
-                                      16,
-                                      20,
-                                      24,
-                                      32,
-                                      48,
-                                      64,
-                                    ],
-                                    "fontWeights": Array [
-                                      0,
-                                      300,
-                                      400,
-                                      600,
-                                      700,
-                                    ],
-                                    "fonts": Object {
-                                      "mono": "\\"Source Code Pro\\", -apple-system, monospace",
-                                      "sansSerif": "\\"Source Sans Pro\\", -apple-system, sans-serif",
-                                      "serif": "athelas, georgia, times, serif",
-                                    },
-                                    "heights": Array [
-                                      0,
-                                      16,
-                                      32,
-                                      64,
-                                      128,
-                                      256,
-                                    ],
-                                    "letterSpacings": Array [
-                                      0,
-                                      1,
-                                      2,
-                                      4,
-                                      8,
-                                    ],
-                                    "lineHeights": Object {
-                                      "copy": 1.5,
-                                      "solid": 1,
-                                      "title": 1.25,
-                                    },
-                                    "maxHeights": Array [
-                                      0,
-                                      16,
-                                      32,
-                                      64,
-                                      128,
-                                      256,
-                                    ],
-                                    "maxWidths": Array [
-                                      0,
-                                      16,
-                                      32,
-                                      64,
-                                      128,
-                                      256,
-                                      512,
-                                      768,
-                                      1024,
-                                      1536,
-                                    ],
-                                    "messageStyle": Object {
-                                      "base": Object {
-                                        "backgroundColor": "#f6f6f6",
-                                        "borderColor": "#AAA",
-                                        "color": "#666",
+                                      "breakpoints": Array [
+                                        "40em",
+                                        "52em",
+                                        "64em",
+                                      ],
+                                      "buttonSizes": Object {
+                                        "large": Object {
+                                          "fontSize": "1.5rem",
+                                          "height": "4rem",
+                                          "minWidth": "4rem",
+                                        },
+                                        "medium": Object {
+                                          "fontSize": "1rem",
+                                          "height": "3rem",
+                                          "minWidth": "3rem",
+                                        },
+                                        "small": Object {
+                                          "fontSize": "0.75rem",
+                                          "height": "2rem",
+                                          "minWidth": "2rem",
+                                          "padding": "0 1rem",
+                                        },
+                                      },
+                                      "buttons": Object {
+                                        "danger": Object {
+                                          "--contrast-color": "#fff",
+                                          "--main-color": "#DC2C10",
+                                        },
+                                        "primary": Object {
+                                          "--contrast-color": "#fff",
+                                          "--main-color": "#4E3FCE",
+                                          "backgroundColor": "#4E3FCE",
+                                          "color": "#fff",
+                                        },
+                                        "success": Object {
+                                          "--contrast-color": "#FFF",
+                                          "--main-color": "#28C081",
+                                        },
+                                      },
+                                      "colors": Object {
+                                        "background": "#fff",
+                                        "black": "#000",
+                                        "blacks": Array [
+                                          "rgba(0,0,0,.0125)",
+                                          "rgba(0,0,0,.025)",
+                                          "rgba(0,0,0,.05)",
+                                          "rgba(0,0,0,.1)",
+                                          "rgba(0,0,0,.2)",
+                                          "rgba(0,0,0,.3)",
+                                          "rgba(0,0,0,.4)",
+                                          "rgba(0,0,0,.5)",
+                                          "rgba(0,0,0,.6)",
+                                          "rgba(0,0,0,.7)",
+                                          "rgba(0,0,0,.8)",
+                                          "rgba(0,0,0,.9)",
+                                        ],
+                                        "blue": "#3259D6",
+                                        "danger": "#DC2C10",
+                                        "dark-gray": "#333",
+                                        "grey": "#CCC",
+                                        "info": "#36ADF1",
+                                        "light-gray": "#eee",
+                                        "light-silver": "#aaa",
+                                        "mid-gray": "#555",
+                                        "moon-gray": "#ccc",
+                                        "near-black": "#111",
+                                        "near-white": "#f4f4f4",
+                                        "primary": "#4E3FCE",
+                                        "primary-dark": "#3e32a4",
+                                        "primary-light": "#7165d7",
+                                        "silver": "#999",
+                                        "success": "#28C081",
+                                        "text": "#3F3D4B",
+                                        "transparent": "transparent",
+                                        "warning": "#FD9D28",
+                                        "white": "#fff",
+                                        "whites": Array [
+                                          "rgba(255,255,255,.0125)",
+                                          "rgba(255,255,255,.025)",
+                                          "rgba(255,255,255,.05)",
+                                          "rgba(255,255,255,.1)",
+                                          "rgba(255,255,255,.2)",
+                                          "rgba(255,255,255,.3)",
+                                          "rgba(255,255,255,.4)",
+                                          "rgba(255,255,255,.5)",
+                                          "rgba(255,255,255,.6)",
+                                          "rgba(255,255,255,.7)",
+                                          "rgba(255,255,255,.8)",
+                                          "rgba(255,255,255,.9)",
+                                        ],
                                       },
-                                      "danger": Object {
-                                        "backgroundColor": "#fbe9e7",
-                                        "borderColor": "#DC2C10",
-                                        "color": "#841a09",
+                                      "fontSizes": Array [
+                                        12,
+                                        14,
+                                        16,
+                                        20,
+                                        24,
+                                        32,
+                                        48,
+                                        64,
+                                      ],
+                                      "fontWeights": Array [
+                                        0,
+                                        300,
+                                        400,
+                                        600,
+                                        700,
+                                      ],
+                                      "fonts": Object {
+                                        "mono": "\\"Source Code Pro\\", -apple-system, monospace",
+                                        "sansSerif": "\\"Source Sans Pro\\", -apple-system, sans-serif",
+                                        "serif": "athelas, georgia, times, serif",
                                       },
-                                      "info": Object {
-                                        "backgroundColor": "#eaf6fd",
-                                        "borderColor": "#36ADF1",
-                                        "color": "#206790",
+                                      "heights": Array [
+                                        0,
+                                        16,
+                                        32,
+                                        64,
+                                        128,
+                                        256,
+                                      ],
+                                      "letterSpacings": Array [
+                                        0,
+                                        1,
+                                        2,
+                                        4,
+                                        8,
+                                      ],
+                                      "lineHeights": Object {
+                                        "copy": 1.5,
+                                        "solid": 1,
+                                        "title": 1.25,
                                       },
-                                      "success": Object {
-                                        "backgroundColor": "#e9f8f2",
-                                        "borderColor": "#28C081",
-                                        "color": "#18734d",
+                                      "maxHeights": Array [
+                                        0,
+                                        16,
+                                        32,
+                                        64,
+                                        128,
+                                        256,
+                                      ],
+                                      "maxWidths": Array [
+                                        0,
+                                        16,
+                                        32,
+                                        64,
+                                        128,
+                                        256,
+                                        512,
+                                        768,
+                                        1024,
+                                        1536,
+                                      ],
+                                      "messageStyle": Object {
+                                        "base": Object {
+                                          "backgroundColor": "#f6f6f6",
+                                          "borderColor": "#AAA",
+                                          "color": "#666",
+                                        },
+                                        "danger": Object {
+                                          "backgroundColor": "#fbe9e7",
+                                          "borderColor": "#DC2C10",
+                                          "color": "#841a09",
+                                        },
+                                        "info": Object {
+                                          "backgroundColor": "#eaf6fd",
+                                          "borderColor": "#36ADF1",
+                                          "color": "#206790",
+                                        },
+                                        "success": Object {
+                                          "backgroundColor": "#e9f8f2",
+                                          "borderColor": "#28C081",
+                                          "color": "#18734d",
+                                        },
+                                        "warning": Object {
+                                          "backgroundColor": "#fef5e9",
+                                          "borderColor": "#FD9D28",
+                                          "color": "#975e18",
+                                        },
                                       },
-                                      "warning": Object {
-                                        "backgroundColor": "#fef5e9",
-                                        "borderColor": "#FD9D28",
-                                        "color": "#975e18",
+                                      "minHeights": Array [
+                                        0,
+                                        16,
+                                        32,
+                                        64,
+                                        128,
+                                        256,
+                                      ],
+                                      "minWidths": Array [
+                                        0,
+                                        16,
+                                        32,
+                                        64,
+                                        128,
+                                        256,
+                                      ],
+                                      "opacity": Object {
+                                        "disabled": 0.4,
                                       },
-                                    },
-                                    "minHeights": Array [
-                                      0,
-                                      16,
-                                      32,
-                                      64,
-                                      128,
-                                      256,
-                                    ],
-                                    "minWidths": Array [
-                                      0,
-                                      16,
-                                      32,
-                                      64,
-                                      128,
-                                      256,
-                                    ],
-                                    "opacity": Object {
-                                      "disabled": 0.4,
-                                    },
-                                    "radii": Array [
-                                      "0",
-                                      "4px",
-                                      "8px",
-                                      "16px",
-                                      "32px",
-                                    ],
-                                    "shadows": Array [
-                                      "0",
-                                      "0px 2px 4px rgba(0, 0, 0, 0.1)",
-                                      "0px 8px 16px rgba(0, 0, 0, 0.1)",
-                                      "0 7px 14px rgba(50,50,93,.1)",
-                                    ],
-                                    "space": Array [
-                                      0,
-                                      4,
-                                      8,
-                                      16,
-                                      32,
-                                      64,
-                                      128,
-                                      256,
-                                    ],
-                                    "width": Array [
-                                      0,
-                                      16,
-                                      32,
-                                      64,
-                                      128,
-                                      256,
-                                    ],
-                                    "zIndices": Array [
-                                      0,
-                                      9,
-                                      99,
-                                      999,
-                                      9999,
-                                    ],
+                                      "radii": Array [
+                                        "0",
+                                        "4px",
+                                        "8px",
+                                        "16px",
+                                        "32px",
+                                      ],
+                                      "shadows": Array [
+                                        "0",
+                                        "0px 2px 4px rgba(0, 0, 0, 0.1)",
+                                        "0px 8px 16px rgba(0, 0, 0, 0.1)",
+                                        "0 7px 14px rgba(50,50,93,.1)",
+                                      ],
+                                      "space": Array [
+                                        0,
+                                        4,
+                                        8,
+                                        16,
+                                        32,
+                                        64,
+                                        128,
+                                        256,
+                                      ],
+                                      "width": Array [
+                                        0,
+                                        16,
+                                        32,
+                                        64,
+                                        128,
+                                        256,
+                                      ],
+                                      "zIndices": Array [
+                                        0,
+                                        9,
+                                        99,
+                                        999,
+                                        9999,
+                                      ],
+                                    }
                                   }
-                                }
-                              >
-                                <div
-                                  className=""
                                 >
-                                  <Icon
+                                  <div
+                                    className="c3"
                                     color="primary"
-                                    display="block"
-                                    name="InfoOutline"
-                                    size="32px"
+                                    display="inline-flex"
                                   >
-                                    <InfoOutlineIcon
-                                      color="primary"
-                                      display="block"
+                                    <Icon
+                                      name="InfoOutline"
                                       size="32px"
                                     >
-                                      <StyledComponent
-                                        color="primary"
-                                        display="block"
-                                        forwardedComponent={
-                                          Object {
-                                            "$$typeof": Symbol(react.forward_ref),
-                                            "_foldedDefaultProps": Object {
-                                              "size": 24,
-                                            },
-                                            "attrs": Array [],
-                                            "componentStyle": ComponentStyle {
-                                              "componentId": "sc-iLVFha",
-                                              "isStatic": false,
-                                              "lastClassName": "c3",
-                                              "rules": Array [
-                                                [Function],
-                                                [Function],
-                                              ],
-                                            },
-                                            "displayName": "InfoOutlineIcon",
-                                            "foldedComponentIds": Array [],
-                                            "render": [Function],
-                                            "styledComponentId": "sc-iLVFha",
-                                            "target": [Function],
-                                            "toString": [Function],
-                                            "usesTheme": false,
-                                            "warnTooManyClasses": [Function],
-                                            "withComponent": [Function],
-                                          }
-                                        }
-                                        forwardedRef={null}
+                                      <InfoOutlineIcon
                                         size="32px"
                                       >
-                                        <Icon
-                                          className="c3"
-                                          color="primary"
-                                          display="block"
+                                        <StyledComponent
+                                          forwardedComponent={
+                                            Object {
+                                              "$$typeof": Symbol(react.forward_ref),
+                                              "_foldedDefaultProps": Object {
+                                                "size": 24,
+                                              },
+                                              "attrs": Array [],
+                                              "componentStyle": ComponentStyle {
+                                                "componentId": "sc-iLVFha",
+                                                "isStatic": false,
+                                                "lastClassName": "jVwufP",
+                                                "rules": Array [
+                                                  [Function],
+                                                  [Function],
+                                                ],
+                                              },
+                                              "displayName": "InfoOutlineIcon",
+                                              "foldedComponentIds": Array [],
+                                              "render": [Function],
+                                              "styledComponentId": "sc-iLVFha",
+                                              "target": [Function],
+                                              "toString": [Function],
+                                              "usesTheme": false,
+                                              "warnTooManyClasses": [Function],
+                                              "withComponent": [Function],
+                                            }
+                                          }
+                                          forwardedRef={null}
                                           size="32px"
                                         >
-                                          <svg
-                                            className="c3"
-                                            color="primary"
-                                            display="block"
-                                            fill="currentcolor"
-                                            height="32px"
-                                            viewBox="0 0 24 24"
-                                            width="32px"
+                                          <Icon
+                                            className=""
+                                            size="32px"
                                           >
-                                            <path
-                                              d="M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z"
-                                            />
-                                          </svg>
-                                        </Icon>
-                                      </StyledComponent>
-                                    </InfoOutlineIcon>
-                                  </Icon>
-                                </div>
-                              </StyledComponent>
-                            </styled.div>
+                                            <svg
+                                              className=""
+                                              fill="currentcolor"
+                                              height="32px"
+                                              viewBox="0 0 24 24"
+                                              width="32px"
+                                            >
+                                              <path
+                                                d="M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z"
+                                              />
+                                            </svg>
+                                          </Icon>
+                                        </StyledComponent>
+                                      </InfoOutlineIcon>
+                                    </Icon>
+                                  </div>
+                                </StyledComponent>
+                              </styled.div>
+                            </Box>
                           </Icon>
                         </div>
                       </StyledComponent>
@@ -5538,7 +6074,7 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`]
                                         "$$typeof": Symbol(react.forward_ref),
                                         "attrs": Array [],
                                         "componentStyle": ComponentStyle {
-                                          "componentId": "sc-jZIEzD",
+                                          "componentId": "sc-gyfYDX",
                                           "isStatic": false,
                                           "lastClassName": "c7",
                                           "rules": Array [
@@ -5620,7 +6156,7 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`]
                                           "zIndex": [Function],
                                         },
                                         "render": [Function],
-                                        "styledComponentId": "sc-jZIEzD",
+                                        "styledComponentId": "sc-gyfYDX",
                                         "target": Object {
                                           "$$typeof": Symbol(react.forward_ref),
                                           "displayName": "Box",
@@ -7564,7 +8100,7 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`]
                                         "$$typeof": Symbol(react.forward_ref),
                                         "attrs": Array [],
                                         "componentStyle": ComponentStyle {
-                                          "componentId": "sc-jZIEzD",
+                                          "componentId": "sc-gyfYDX",
                                           "isStatic": false,
                                           "lastClassName": "c7",
                                           "rules": Array [
@@ -7646,7 +8182,7 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`]
                                           "zIndex": [Function],
                                         },
                                         "render": [Function],
-                                        "styledComponentId": "sc-jZIEzD",
+                                        "styledComponentId": "sc-gyfYDX",
                                         "target": Object {
                                           "$$typeof": Symbol(react.forward_ref),
                                           "displayName": "Box",
@@ -9600,7 +10136,7 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`]
                             "$$typeof": Symbol(react.forward_ref),
                             "attrs": Array [],
                             "componentStyle": ComponentStyle {
-                              "componentId": "sc-jZIEzD",
+                              "componentId": "sc-gyfYDX",
                               "isStatic": false,
                               "lastClassName": "c7",
                               "rules": Array [
@@ -9682,7 +10218,7 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`]
                               "zIndex": [Function],
                             },
                             "render": [Function],
-                            "styledComponentId": "sc-jZIEzD",
+                            "styledComponentId": "sc-gyfYDX",
                             "target": Object {
                               "$$typeof": Symbol(react.forward_ref),
                               "displayName": "Box",
@@ -11632,7 +12168,7 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`]
                                           },
                                           "attrs": Array [],
                                           "componentStyle": ComponentStyle {
-                                            "componentId": "sc-gQORMK",
+                                            "componentId": "sc-jZIEzD",
                                             "isStatic": false,
                                             "lastClassName": "c13",
                                             "rules": Array [
@@ -11732,7 +12268,7 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`]
                                           "render": [Function],
                                           "s": [Function],
                                           "span": [Function],
-                                          "styledComponentId": "sc-gQORMK",
+                                          "styledComponentId": "sc-jZIEzD",
                                           "target": Object {
                                             "$$typeof": Symbol(react.forward_ref),
                                             "defaultProps": Object {
@@ -12867,7 +13403,7 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`]
                                                 "$$typeof": Symbol(react.forward_ref),
                                                 "attrs": Array [],
                                                 "componentStyle": ComponentStyle {
-                                                  "componentId": "sc-jZIEzD",
+                                                  "componentId": "sc-gyfYDX",
                                                   "isStatic": false,
                                                   "lastClassName": "c7",
                                                   "rules": Array [
@@ -12949,7 +13485,7 @@ exports[`ToastMessage component sanity matches full component mount snapshot 1`]
                                                   "zIndex": [Function],
                                                 },
                                                 "render": [Function],
-                                                "styledComponentId": "sc-jZIEzD",
+                                                "styledComponentId": "sc-gyfYDX",
                                                 "target": Object {
                                                   "$$typeof": Symbol(react.forward_ref),
                                                   "displayName": "Box",
@@ -14422,7 +14958,7 @@ exports[`ToastMessage component sanity matches full component shallow snapshot 1
       "$$typeof": Symbol(react.forward_ref),
       "attrs": Array [],
       "componentStyle": ComponentStyle {
-        "componentId": "sc-iIQDRA",
+        "componentId": "sc-hJwwgy",
         "isStatic": false,
         "rules": Array [
           "
@@ -14452,7 +14988,7 @@ exports[`ToastMessage component sanity matches full component shallow snapshot 1
   }
 
   > ",
-          ".sc-hJwwgy",
+          ".sc-eZbwru",
           " > div {
     overflow: hidden;
     white-space: nowrap;
@@ -14549,7 +15085,7 @@ exports[`ToastMessage component sanity matches full component shallow snapshot 1
         "zIndex": [Function],
       },
       "render": [Function],
-      "styledComponentId": "sc-iIQDRA",
+      "styledComponentId": "sc-hJwwgy",
       "target": Object {
         "$$typeof": Symbol(react.forward_ref),
         "displayName": "Box",
@@ -14636,9 +15172,260 @@ exports[`ToastMessage component sanity matches full component shallow snapshot 1
   >
     <Icon
       color="primary"
-      display="block"
+      display="inline-flex"
       name="InfoOutline"
       size="32px"
+      theme={
+        Object {
+          "borderWidths": Array [
+            "0",
+            "1px",
+            "2px",
+            "4px",
+          ],
+          "borders": Array [
+            0,
+            "1px solid transparent",
+          ],
+          "breakpoints": Array [
+            "40em",
+            "52em",
+            "64em",
+          ],
+          "buttonSizes": Object {
+            "large": Object {
+              "fontSize": "1.5rem",
+              "height": "4rem",
+              "minWidth": "4rem",
+            },
+            "medium": Object {
+              "fontSize": "1rem",
+              "height": "3rem",
+              "minWidth": "3rem",
+            },
+            "small": Object {
+              "fontSize": "0.75rem",
+              "height": "2rem",
+              "minWidth": "2rem",
+              "padding": "0 1rem",
+            },
+          },
+          "buttons": Object {
+            "danger": Object {
+              "--contrast-color": "#fff",
+              "--main-color": "#DC2C10",
+            },
+            "primary": Object {
+              "--contrast-color": "#fff",
+              "--main-color": "#4E3FCE",
+              "backgroundColor": "#4E3FCE",
+              "color": "#fff",
+            },
+            "success": Object {
+              "--contrast-color": "#FFF",
+              "--main-color": "#28C081",
+            },
+          },
+          "colors": Object {
+            "background": "#fff",
+            "black": "#000",
+            "blacks": Array [
+              "rgba(0,0,0,.0125)",
+              "rgba(0,0,0,.025)",
+              "rgba(0,0,0,.05)",
+              "rgba(0,0,0,.1)",
+              "rgba(0,0,0,.2)",
+              "rgba(0,0,0,.3)",
+              "rgba(0,0,0,.4)",
+              "rgba(0,0,0,.5)",
+              "rgba(0,0,0,.6)",
+              "rgba(0,0,0,.7)",
+              "rgba(0,0,0,.8)",
+              "rgba(0,0,0,.9)",
+            ],
+            "blue": "#3259D6",
+            "danger": "#DC2C10",
+            "dark-gray": "#333",
+            "grey": "#CCC",
+            "info": "#36ADF1",
+            "light-gray": "#eee",
+            "light-silver": "#aaa",
+            "mid-gray": "#555",
+            "moon-gray": "#ccc",
+            "near-black": "#111",
+            "near-white": "#f4f4f4",
+            "primary": "#4E3FCE",
+            "primary-dark": "#3e32a4",
+            "primary-light": "#7165d7",
+            "silver": "#999",
+            "success": "#28C081",
+            "text": "#3F3D4B",
+            "transparent": "transparent",
+            "warning": "#FD9D28",
+            "white": "#fff",
+            "whites": Array [
+              "rgba(255,255,255,.0125)",
+              "rgba(255,255,255,.025)",
+              "rgba(255,255,255,.05)",
+              "rgba(255,255,255,.1)",
+              "rgba(255,255,255,.2)",
+              "rgba(255,255,255,.3)",
+              "rgba(255,255,255,.4)",
+              "rgba(255,255,255,.5)",
+              "rgba(255,255,255,.6)",
+              "rgba(255,255,255,.7)",
+              "rgba(255,255,255,.8)",
+              "rgba(255,255,255,.9)",
+            ],
+          },
+          "fontSizes": Array [
+            12,
+            14,
+            16,
+            20,
+            24,
+            32,
+            48,
+            64,
+          ],
+          "fontWeights": Array [
+            0,
+            300,
+            400,
+            600,
+            700,
+          ],
+          "fonts": Object {
+            "mono": "\\"Source Code Pro\\", -apple-system, monospace",
+            "sansSerif": "\\"Source Sans Pro\\", -apple-system, sans-serif",
+            "serif": "athelas, georgia, times, serif",
+          },
+          "heights": Array [
+            0,
+            16,
+            32,
+            64,
+            128,
+            256,
+          ],
+          "letterSpacings": Array [
+            0,
+            1,
+            2,
+            4,
+            8,
+          ],
+          "lineHeights": Object {
+            "copy": 1.5,
+            "solid": 1,
+            "title": 1.25,
+          },
+          "maxHeights": Array [
+            0,
+            16,
+            32,
+            64,
+            128,
+            256,
+          ],
+          "maxWidths": Array [
+            0,
+            16,
+            32,
+            64,
+            128,
+            256,
+            512,
+            768,
+            1024,
+            1536,
+          ],
+          "messageStyle": Object {
+            "base": Object {
+              "backgroundColor": "#f6f6f6",
+              "borderColor": "#AAA",
+              "color": "#666",
+            },
+            "danger": Object {
+              "backgroundColor": "#fbe9e7",
+              "borderColor": "#DC2C10",
+              "color": "#841a09",
+            },
+            "info": Object {
+              "backgroundColor": "#eaf6fd",
+              "borderColor": "#36ADF1",
+              "color": "#206790",
+            },
+            "success": Object {
+              "backgroundColor": "#e9f8f2",
+              "borderColor": "#28C081",
+              "color": "#18734d",
+            },
+            "warning": Object {
+              "backgroundColor": "#fef5e9",
+              "borderColor": "#FD9D28",
+              "color": "#975e18",
+            },
+          },
+          "minHeights": Array [
+            0,
+            16,
+            32,
+            64,
+            128,
+            256,
+          ],
+          "minWidths": Array [
+            0,
+            16,
+            32,
+            64,
+            128,
+            256,
+          ],
+          "opacity": Object {
+            "disabled": 0.4,
+          },
+          "radii": Array [
+            "0",
+            "4px",
+            "8px",
+            "16px",
+            "32px",
+          ],
+          "shadows": Array [
+            "0",
+            "0px 2px 4px rgba(0, 0, 0, 0.1)",
+            "0px 8px 16px rgba(0, 0, 0, 0.1)",
+            "0 7px 14px rgba(50,50,93,.1)",
+          ],
+          "space": Array [
+            0,
+            4,
+            8,
+            16,
+            32,
+            64,
+            128,
+            256,
+          ],
+          "width": Array [
+            0,
+            16,
+            32,
+            64,
+            128,
+            256,
+          ],
+          "zIndices": Array [
+            0,
+            9,
+            99,
+            999,
+            9999,
+          ],
+        }
+      }
     />
   </Box>
   <Styled(Box)
@@ -15456,7 +16243,7 @@ exports[`ToastMessage component sanity matches generic snapshot 1`] = `
       "$$typeof": Symbol(react.forward_ref),
       "attrs": Array [],
       "componentStyle": ComponentStyle {
-        "componentId": "sc-iIQDRA",
+        "componentId": "sc-hJwwgy",
         "isStatic": false,
         "rules": Array [
           "
@@ -15486,7 +16273,7 @@ exports[`ToastMessage component sanity matches generic snapshot 1`] = `
   }
 
   > ",
-          ".sc-hJwwgy",
+          ".sc-eZbwru",
           " > div {
     overflow: hidden;
     white-space: nowrap;
@@ -15583,7 +16370,7 @@ exports[`ToastMessage component sanity matches generic snapshot 1`] = `
         "zIndex": [Function],
       },
       "render": [Function],
-      "styledComponentId": "sc-iIQDRA",
+      "styledComponentId": "sc-hJwwgy",
       "target": Object {
         "$$typeof": Symbol(react.forward_ref),
         "displayName": "Box",
diff --git a/src/Tooltip/__snapshots__/Tooltip.test.js.snap b/src/Tooltip/__snapshots__/Tooltip.test.js.snap
index 5a887f30..dced1adc 100644
--- a/src/Tooltip/__snapshots__/Tooltip.test.js.snap
+++ b/src/Tooltip/__snapshots__/Tooltip.test.js.snap
@@ -1039,7 +1039,7 @@ exports[`Tooltip component sanity matches default snapshot 1`] = `
                         },
                         "attrs": Array [],
                         "componentStyle": ComponentStyle {
-                          "componentId": "sc-kDkoGq",
+                          "componentId": "sc-bGbZqa",
                           "isStatic": false,
                           "lastClassName": "c0",
                           "rules": Array [
@@ -1170,10 +1170,10 @@ exports[`Tooltip component sanity matches default snapshot 1`] = `
                         },
                         "displayName": "Styled(styled.button)",
                         "foldedComponentIds": Array [
-                          "sc-eiqfgm",
+                          "sc-gQORMK",
                         ],
                         "render": [Function],
-                        "styledComponentId": "sc-kDkoGq",
+                        "styledComponentId": "sc-bGbZqa",
                         "target": "button",
                         "toString": [Function],
                         "usesTheme": false,
@@ -3017,7 +3017,7 @@ exports[`Tooltip component sanity matches themed snapshot 1`] = `
                             },
                             "attrs": Array [],
                             "componentStyle": ComponentStyle {
-                              "componentId": "sc-kDkoGq",
+                              "componentId": "sc-bGbZqa",
                               "isStatic": false,
                               "lastClassName": "c0",
                               "rules": Array [
@@ -3148,10 +3148,10 @@ exports[`Tooltip component sanity matches themed snapshot 1`] = `
                             },
                             "displayName": "Styled(styled.button)",
                             "foldedComponentIds": Array [
-                              "sc-eiqfgm",
+                              "sc-gQORMK",
                             ],
                             "render": [Function],
-                            "styledComponentId": "sc-kDkoGq",
+                            "styledComponentId": "sc-bGbZqa",
                             "target": "button",
                             "toString": [Function],
                             "usesTheme": false,

From c851fa16930dd4385b28519ba5c77dabede12488 Mon Sep 17 00:00:00 2001
From: Gustavo Esquinca <g.esq.ca@gmail.com>
Date: Wed, 20 Nov 2019 13:40:22 -0500
Subject: [PATCH 11/17] udpated snapshot tests

---
 src/Slider/__snapshots__/Slider.test.js.snap | 188 ++++++++++++++++++-
 1 file changed, 186 insertions(+), 2 deletions(-)

diff --git a/src/Slider/__snapshots__/Slider.test.js.snap b/src/Slider/__snapshots__/Slider.test.js.snap
index 9746bc2e..f5087190 100644
--- a/src/Slider/__snapshots__/Slider.test.js.snap
+++ b/src/Slider/__snapshots__/Slider.test.js.snap
@@ -3,15 +3,103 @@
 exports[`Slider component sanity matches default snapshot 1`] = `
 .c0 {
   color: #4E3FCE;
+  background-color: none;
   margin: 0;
+  padding: 0;
+  height: 2rem;
+  min-width: 200px;
+  border: none;
+  border-color: #CCC;
+  border-radius: 4px;
+  box-shadow: none;
+  font-family: "Source Sans Pro",-apple-system,sans-serif;
+  font-size: 1rem;
+  line-height: 1;
 }
 
 .c0 {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
+  box-sizing: border-box;
+}
+
+.c0:hover {
+  box-shadow: 0px 2px 6px rgba(0,0,0,0.3);
+}
+
+.c0:focus {
+  outline: none;
+  border-color: #4E3FCE;
+}
+
+.c0:disabled {
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+.c0[type="color"] {
+  min-width: 3rem;
+  padding: 0;
+}
+
+.c0[type="color"]::-webkit-color-swatch-wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.c0[type="color"]::-webkit-color-swatch {
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
   height: 2rem;
-  min-width: 200px;
+  width: 2rem;
+  border: none;
+  border-radius: 100%;
+}
+
+.c0[type="color"]::-moz-color-swatch {
+  height: 2rem;
+  width: 2rem;
+  border: none;
+  border-radius: 100%;
+}
+
+.was-validated .c0:valid {
+  border-color: #28C081;
+}
+
+.was-validated .c0:valid ~ svg.icon-valid {
+  visibility: visible;
+}
+
+.was-validated .c0:invalid {
+  border-color: #DC2C10;
+}
+
+.was-validated .c0:invalid ~ svg.icon-invalid {
+  visibility: visible;
+}
+
+.c0 {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+.c0:hover {
+  box-shadow: none;
 }
 
 .c0::-webkit-slider-runnable-track {
@@ -105,8 +193,12 @@ exports[`Slider component sanity matches default snapshot 1`] = `
 }
 
 <input
+  aria-label="range slider"
   class="c0"
   color="primary"
+  font-family="sansSerif"
+  font-size="1rem"
+  height="2rem"
   type="range"
 />
 `;
@@ -114,15 +206,103 @@ exports[`Slider component sanity matches default snapshot 1`] = `
 exports[`Slider component sanity matches themed snapshot 1`] = `
 .c0 {
   color: #4E3FCE;
+  background-color: none;
   margin: 0;
+  padding: 0;
+  height: 2rem;
+  min-width: 200px;
+  border: none;
+  border-color: #CCC;
+  border-radius: 4px;
+  box-shadow: none;
+  font-family: "Source Sans Pro",-apple-system,sans-serif;
+  font-size: 1rem;
+  line-height: 1;
 }
 
 .c0 {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
+  box-sizing: border-box;
+}
+
+.c0:hover {
+  box-shadow: 0px 2px 6px rgba(0,0,0,0.3);
+}
+
+.c0:focus {
+  outline: none;
+  border-color: #4E3FCE;
+}
+
+.c0:disabled {
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+.c0[type="color"] {
+  min-width: 3rem;
+  padding: 0;
+}
+
+.c0[type="color"]::-webkit-color-swatch-wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.c0[type="color"]::-webkit-color-swatch {
+  -webkit-flex: 0 0 auto;
+  -ms-flex: 0 0 auto;
+  flex: 0 0 auto;
   height: 2rem;
-  min-width: 200px;
+  width: 2rem;
+  border: none;
+  border-radius: 100%;
+}
+
+.c0[type="color"]::-moz-color-swatch {
+  height: 2rem;
+  width: 2rem;
+  border: none;
+  border-radius: 100%;
+}
+
+.was-validated .c0:valid {
+  border-color: #28C081;
+}
+
+.was-validated .c0:valid ~ svg.icon-valid {
+  visibility: visible;
+}
+
+.was-validated .c0:invalid {
+  border-color: #DC2C10;
+}
+
+.was-validated .c0:invalid ~ svg.icon-invalid {
+  visibility: visible;
+}
+
+.c0 {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+.c0:hover {
+  box-shadow: none;
 }
 
 .c0::-webkit-slider-runnable-track {
@@ -216,8 +396,12 @@ exports[`Slider component sanity matches themed snapshot 1`] = `
 }
 
 <input
+  aria-label="range slider"
   class="c0"
   color="primary"
+  font-family="sansSerif"
+  font-size="1rem"
+  height="2rem"
   type="range"
 />
 `;

From 28b4d2beb50dcbafc0c4cf851227d660d3ab6a9b Mon Sep 17 00:00:00 2001
From: Gustavo Esquinca <g.esq.ca@gmail.com>
Date: Wed, 20 Nov 2019 14:10:10 -0500
Subject: [PATCH 12/17] udpate icon fill to use solid colors and not opacity
 dependent values

---
 src/ToastMessage/icon-negative.svg | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ToastMessage/icon-negative.svg b/src/ToastMessage/icon-negative.svg
index e7dd1e83..d95f4dbf 100644
--- a/src/ToastMessage/icon-negative.svg
+++ b/src/ToastMessage/icon-negative.svg
@@ -1,5 +1,5 @@
 <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="36" height="36" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M17.083 3.52612C17.4665 2.85255 18.4374 2.85255 18.8209 3.52612L35.0527 32.0323C35.4323 32.6989 34.9509 33.5271 34.1837 33.5271H1.72016C0.953015 33.5271 0.471571 32.6989 0.85117 32.0323L17.083 3.52612Z" fill="#DC2C10" fill-opacity="0.15"/>
+<rect width="36" height="36" fill="none"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.083 3.52612C17.4665 2.85255 18.4374 2.85255 18.8209 3.52612L35.0527 32.0323C35.4323 32.6989 34.9509 33.5271 34.1837 33.5271H1.72016C0.953015 33.5271 0.471571 32.6989 0.85117 32.0323L17.083 3.52612Z" fill="#fbe1de"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M18 15C17.4477 15 17 15.4477 17 16V22C17 22.5523 17.4477 23 18 23C18.5523 23 19 22.5523 19 22V16C19 15.4477 18.5523 15 18 15ZM17 25.3333C17 24.781 17.4477 24.3333 18 24.3333C18.5523 24.3333 19 24.781 19 25.3333C19 25.8856 18.5523 26.3333 18 26.3333C17.4477 26.3333 17 25.8856 17 25.3333Z" fill="#DC2C10"/>
 </svg>

From 000fa0ccbc38bf8bb7ce481a5542be8aeac08157 Mon Sep 17 00:00:00 2001
From: Gustavo Esquinca <g.esq.ca@gmail.com>
Date: Wed, 20 Nov 2019 14:10:38 -0500
Subject: [PATCH 13/17] added stories for dark style messages

---
 storybook/stories/ToastMessage.stories.js | 80 ++++++++++++++++-------
 1 file changed, 58 insertions(+), 22 deletions(-)

diff --git a/storybook/stories/ToastMessage.stories.js b/storybook/stories/ToastMessage.stories.js
index 5557d9d6..7759961e 100644
--- a/storybook/stories/ToastMessage.stories.js
+++ b/storybook/stories/ToastMessage.stories.js
@@ -10,38 +10,74 @@ export const light = () => (
 )
 
 export const dark = () => (
-  <ToastMessage message={'0xAc0...e5A connected'} colorTheme={'dark'} />
+  <ToastMessage
+    message={'0xAc0...e5A connected'}
+    colorTheme={'dark'}
+  />
 )
 
 export const icon = () => (
-  <ToastMessage
-    message={'Write update here [Required]'}
-    secondaryMessage={'Supporting information for update [Optional]'}
-    icon={'InfoOutline'}
-    actionText={'Link'}
-    actionHref={'#!'}
-  />
+  <>
+    <ToastMessage
+      message={'Write update here [Required]'}
+      secondaryMessage={'Supporting information for update [Optional]'}
+      icon={'InfoOutline'}
+      actionText={'Link'}
+      actionHref={'#!'}
+    />
+    <ToastMessage
+      message={'Write update here [Required]'}
+      secondaryMessage={'Supporting information for update [Optional]'}
+      icon={'InfoOutline'}
+      actionText={'Link'}
+      actionHref={'#!'}
+      colorTheme={'dark'}
+    />
+  </>
 )
 
 export const success = () => (
-  <ToastMessage
-    message={'Payment sent'}
-    secondaryMessage={'You have 4.20 ETH remaining'}
-    variant={'success'}
-  />
+  <>
+    <ToastMessage
+      message={'Payment sent'}
+      secondaryMessage={'You have 4.20 ETH remaining'}
+      variant={'success'}
+    />
+    <ToastMessage
+      message={'Payment sent'}
+      secondaryMessage={'You have 4.20 ETH remaining'}
+      variant={'success'}
+      colorTheme={'dark'}
+    />
+  </>
 )
 
 export const failure = () => (
-  <ToastMessage
-    message={'Transaction failed'}
-    secondaryMessage={"You didn't have enough Ether"}
-    variant={'failure'}
-  />
+  <>
+    <ToastMessage
+      message={'Transaction failed'}
+      secondaryMessage={"You didn't have enough Ether"}
+      variant={'failure'}
+    />
+    <ToastMessage
+      message={'Transaction failed'}
+      secondaryMessage={"You didn't have enough Ether"}
+      variant={'failure'}
+      colorTheme={'dark'}
+    />
+  </>
 )
 
 export const processing = () => (
-  <ToastMessage
-    message={'Processing payment...'}
-    variant={'processing'}
-  />
+  <>
+    <ToastMessage
+      message={'Processing payment...'}
+      variant={'processing'}
+    />
+    <ToastMessage
+      message={'Processing payment...'}
+      variant={'processing'}
+      colorTheme={'dark'}
+    />
+  </>
 )

From e8556172cc570e83c22fe906496ac94ab7c64e49 Mon Sep 17 00:00:00 2001
From: Gustavo Esquinca <g.esq.ca@gmail.com>
Date: Thu, 21 Nov 2019 08:04:39 -0500
Subject: [PATCH 14/17] added ThemeProvider and BaseStyles to storybook stories

---
 storybook/.storybook/config.js | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/storybook/.storybook/config.js b/storybook/.storybook/config.js
index 9915a738..f8da4b04 100644
--- a/storybook/.storybook/config.js
+++ b/storybook/.storybook/config.js
@@ -1,7 +1,8 @@
+import React from 'react';
 import { configure, addParameters, addDecorator } from '@storybook/react';
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 import { withA11y } from '@storybook/addon-a11y';
-
+import { ThemeProvider, BaseStyles } from 'rimble-ui'
 import rimbleTheme from './rimbleTheme';
 
 addParameters({
@@ -18,5 +19,13 @@ addParameters({
 
 addDecorator(withA11y)
 
+addDecorator(storyFn =>
+  <ThemeProvider>
+    <BaseStyles>
+      {storyFn()}
+    </BaseStyles>
+  </ThemeProvider>
+);
+
 // automatically import all files ending in *.stories.js
-configure(require.context('../stories', true, /\.stories\.js$/), module);
+configure(require.context('../stories', true, /\.stories\.(js|mdx)$/), module);

From faa04d52bc592f587e34ab075d7f235ded61d2e5 Mon Sep 17 00:00:00 2001
From: Gustavo Esquinca <g.esq.ca@gmail.com>
Date: Thu, 21 Nov 2019 08:05:01 -0500
Subject: [PATCH 15/17] added fonts imports to storybook

---
 storybook/.storybook/preview-head.html | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 storybook/.storybook/preview-head.html

diff --git a/storybook/.storybook/preview-head.html b/storybook/.storybook/preview-head.html
new file mode 100644
index 00000000..00e7d9b5
--- /dev/null
+++ b/storybook/.storybook/preview-head.html
@@ -0,0 +1 @@
+<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro|Source+Sans+Pro&display=swap" rel="stylesheet">

From 3466a7593ddcb77cdef8cc825cbee480dedad8cb Mon Sep 17 00:00:00 2001
From: Gustavo Esquinca <g.esq.ca@gmail.com>
Date: Tue, 26 Nov 2019 10:19:27 -0500
Subject: [PATCH 16/17] updated changelog

---
 README.md | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 1f1c4721..cb5e9c35 100644
--- a/README.md
+++ b/README.md
@@ -35,8 +35,16 @@ class Example extends Component {
 
 ## Change log
 
+### 0.11.1
+
+🐛 Bug Fix
+- Fixed icon background color on `ToastMessage` component. #381
+- fixed display prop not rendering correctly for `Icon` component. #380
+- fixed disabled styling for `Slider` component. #414
+
+
 ### 0.11.0
- 
+
 🚀 New Feature
 - Added `BaseStyles` component
 

From 46543e123003322150d8a181216bb7860d46f189 Mon Sep 17 00:00:00 2001
From: Gustavo Esquinca <g.esq.ca@gmail.com>
Date: Tue, 26 Nov 2019 10:19:38 -0500
Subject: [PATCH 17/17] updated package version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 0bb18116..874bd954 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rimble-ui",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "description": "Rimble Design System react component library.",
   "author": "ConsenSys Design",
   "homepage": "https://rimble.consensys.design/",