diff --git a/.storybook/main.js b/.storybook/main.js
index bf3c7a6f..866086e2 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -1,5 +1,5 @@
 module.exports = {
-	stories: ['../src/**/*.stories.(ts|tsx|js|jsx|mdx)'],
+	stories: ['../src/**/*.stories.@(ts|tsx|js|jsx|mdx)'],
 	addons: [
 		'@storybook/addon-links',
 		'@storybook/addon-essentials',
diff --git a/package-lock.json b/package-lock.json
index 8c9ed346..ee34900e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1278,7 +1278,6 @@
 			"version": "10.0.29",
 			"resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz",
 			"integrity": "sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==",
-			"dev": true,
 			"requires": {
 				"@emotion/sheet": "0.9.4",
 				"@emotion/stylis": "0.8.5",
@@ -1287,10 +1286,9 @@
 			}
 		},
 		"@emotion/core": {
-			"version": "10.0.35",
-			"resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.0.35.tgz",
-			"integrity": "sha512-sH++vJCdk025fBlRZSAhkRlSUoqSqgCzYf5fMOmqqi3bM6how+sQpg3hkgJonj8GxXM4WbD7dRO+4tegDB9fUw==",
-			"dev": true,
+			"version": "10.0.28",
+			"resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.0.28.tgz",
+			"integrity": "sha512-pH8UueKYO5jgg0Iq+AmCLxBsvuGtvlmiDCOuv8fGNYn3cowFpLN98L8zO56U0H1PjDIyAlXymgL3Wu7u7v6hbA==",
 			"requires": {
 				"@babel/runtime": "^7.5.5",
 				"@emotion/cache": "^10.0.27",
@@ -1304,7 +1302,6 @@
 			"version": "10.0.27",
 			"resolved": "https://registry.npmjs.org/@emotion/css/-/css-10.0.27.tgz",
 			"integrity": "sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==",
-			"dev": true,
 			"requires": {
 				"@emotion/serialize": "^0.11.15",
 				"@emotion/utils": "0.11.3",
@@ -1314,8 +1311,7 @@
 		"@emotion/hash": {
 			"version": "0.8.0",
 			"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
-			"integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==",
-			"dev": true
+			"integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
 		},
 		"@emotion/is-prop-valid": {
 			"version": "0.8.8",
@@ -1329,14 +1325,12 @@
 		"@emotion/memoize": {
 			"version": "0.7.4",
 			"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
-			"integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
-			"dev": true
+			"integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
 		},
 		"@emotion/serialize": {
 			"version": "0.11.16",
 			"resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz",
 			"integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==",
-			"dev": true,
 			"requires": {
 				"@emotion/hash": "0.8.0",
 				"@emotion/memoize": "0.7.4",
@@ -1348,8 +1342,7 @@
 		"@emotion/sheet": {
 			"version": "0.9.4",
 			"resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz",
-			"integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==",
-			"dev": true
+			"integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA=="
 		},
 		"@emotion/styled": {
 			"version": "10.0.27",
@@ -1376,26 +1369,22 @@
 		"@emotion/stylis": {
 			"version": "0.8.5",
 			"resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
-			"integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==",
-			"dev": true
+			"integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
 		},
 		"@emotion/unitless": {
 			"version": "0.7.5",
 			"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
-			"integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==",
-			"dev": true
+			"integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
 		},
 		"@emotion/utils": {
 			"version": "0.11.3",
 			"resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz",
-			"integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==",
-			"dev": true
+			"integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw=="
 		},
 		"@emotion/weak-memoize": {
 			"version": "0.2.5",
 			"resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
-			"integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==",
-			"dev": true
+			"integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
 		},
 		"@hapi/address": {
 			"version": "2.1.4",
@@ -2171,17 +2160,17 @@
 			}
 		},
 		"@storybook/addon-actions": {
-			"version": "6.0.12",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-6.0.12.tgz",
-			"integrity": "sha512-Qs54RCIKXoBo3lYbAevrDHnKm6BMIxN+WNkVrBfxCvlgk+jxaSvyjoU/UkfVAmZWDuPLcKNmONIK0HoQS9xhtQ==",
+			"version": "6.0.16",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-6.0.16.tgz",
+			"integrity": "sha512-kyPGMP2frdhUgJAm6ChqvndaUawwQE9Vx7pN1pk/Q4qnyVlWCneZVojQf0iAgL45q0az0XI1tOPr4ooroaniYg==",
 			"dev": true,
 			"requires": {
-				"@storybook/addons": "6.0.12",
-				"@storybook/api": "6.0.12",
-				"@storybook/client-api": "6.0.12",
-				"@storybook/components": "6.0.12",
-				"@storybook/core-events": "6.0.12",
-				"@storybook/theming": "6.0.12",
+				"@storybook/addons": "6.0.16",
+				"@storybook/api": "6.0.16",
+				"@storybook/client-api": "6.0.16",
+				"@storybook/components": "6.0.16",
+				"@storybook/core-events": "6.0.16",
+				"@storybook/theming": "6.0.16",
 				"core-js": "^3.0.1",
 				"fast-deep-equal": "^3.1.1",
 				"global": "^4.3.2",
@@ -2205,17 +2194,17 @@
 			}
 		},
 		"@storybook/addon-backgrounds": {
-			"version": "6.0.12",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-6.0.12.tgz",
-			"integrity": "sha512-udRYxbjCvb7ZNcsIv5zyEUVpBXGQrKeAkfn/pVdzTFZhv1A5G5ho0gtVrbpfz7k8gj4tb3CGb3hLM4D7chLVKg==",
+			"version": "6.0.16",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-6.0.16.tgz",
+			"integrity": "sha512-0sH7hlZh4bHt6zV6QyG3ryNGJsxD42iXVwWdwAShzfWJKGfLy5XwdvHUKkMEBbY9bOPeoI9oMli2RAfsD6juLQ==",
 			"dev": true,
 			"requires": {
-				"@storybook/addons": "6.0.12",
-				"@storybook/api": "6.0.12",
-				"@storybook/client-logger": "6.0.12",
-				"@storybook/components": "6.0.12",
-				"@storybook/core-events": "6.0.12",
-				"@storybook/theming": "6.0.12",
+				"@storybook/addons": "6.0.16",
+				"@storybook/api": "6.0.16",
+				"@storybook/client-logger": "6.0.16",
+				"@storybook/components": "6.0.16",
+				"@storybook/core-events": "6.0.16",
+				"@storybook/theming": "6.0.16",
 				"core-js": "^3.0.1",
 				"memoizerific": "^1.11.3",
 				"react": "^16.8.3",
@@ -2223,25 +2212,25 @@
 			}
 		},
 		"@storybook/addon-controls": {
-			"version": "6.0.12",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-6.0.12.tgz",
-			"integrity": "sha512-tTyvJLvLIZOI4Zz8S9z9fcWU2FNJ28973AKiSoqjVr0VM2Rs9MsvPMibaZCsKgaTuHvtBpinBsZdWSEOz8Oagw==",
+			"version": "6.0.16",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-6.0.16.tgz",
+			"integrity": "sha512-RgBOply9o3PYoWI7TNKef2AQixw7l620pT1fCJbXykp/lu17eqKaIa5KYHRE9vEajun5RuEQxGnSzQOV3OZAsA==",
 			"dev": true,
 			"requires": {
-				"@storybook/addons": "6.0.12",
-				"@storybook/api": "6.0.12",
-				"@storybook/client-api": "6.0.12",
-				"@storybook/components": "6.0.12",
-				"@storybook/node-logger": "6.0.12",
-				"@storybook/theming": "6.0.12",
+				"@storybook/addons": "6.0.16",
+				"@storybook/api": "6.0.16",
+				"@storybook/client-api": "6.0.16",
+				"@storybook/components": "6.0.16",
+				"@storybook/node-logger": "6.0.16",
+				"@storybook/theming": "6.0.16",
 				"core-js": "^3.0.1",
 				"ts-dedent": "^1.1.1"
 			}
 		},
 		"@storybook/addon-docs": {
-			"version": "6.0.12",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-6.0.12.tgz",
-			"integrity": "sha512-OsIDSYQWCNY0y6HOehDcrgOyPKD9bKhA0XkFjYUURLF/vnW8/+cxU2IDaDjdtLmjVQUdEe413B8stbb0tZDuVA==",
+			"version": "6.0.16",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-6.0.16.tgz",
+			"integrity": "sha512-7gM/0lQ3mSybpOpQbgR8fjAU+u3zgAWyOM1a+LR7zVn5lNjgBhZD2pfHuwViTeAGG/IIpvmOsd57BKlFJw5TPA==",
 			"dev": true,
 			"requires": {
 				"@babel/generator": "^7.9.6",
@@ -2252,18 +2241,18 @@
 				"@mdx-js/loader": "^1.5.1",
 				"@mdx-js/mdx": "^1.5.1",
 				"@mdx-js/react": "^1.5.1",
-				"@storybook/addons": "6.0.12",
-				"@storybook/api": "6.0.12",
-				"@storybook/client-api": "6.0.12",
-				"@storybook/client-logger": "6.0.12",
-				"@storybook/components": "6.0.12",
-				"@storybook/core": "6.0.12",
-				"@storybook/core-events": "6.0.12",
+				"@storybook/addons": "6.0.16",
+				"@storybook/api": "6.0.16",
+				"@storybook/client-api": "6.0.16",
+				"@storybook/client-logger": "6.0.16",
+				"@storybook/components": "6.0.16",
+				"@storybook/core": "6.0.16",
+				"@storybook/core-events": "6.0.16",
 				"@storybook/csf": "0.0.1",
-				"@storybook/node-logger": "6.0.12",
-				"@storybook/postinstall": "6.0.12",
-				"@storybook/source-loader": "6.0.12",
-				"@storybook/theming": "6.0.12",
+				"@storybook/node-logger": "6.0.16",
+				"@storybook/postinstall": "6.0.16",
+				"@storybook/source-loader": "6.0.16",
+				"@storybook/theming": "6.0.16",
 				"acorn": "^7.1.0",
 				"acorn-jsx": "^5.1.0",
 				"acorn-walk": "^7.0.0",
@@ -2585,36 +2574,36 @@
 			}
 		},
 		"@storybook/addon-essentials": {
-			"version": "6.0.12",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-6.0.12.tgz",
-			"integrity": "sha512-HPag/8EatgKIoPDEJKecvvwBXT2BYr8d19qaeqvlk+wItnOuULvF8hRlrovLx4P1AsXRI5laFE9UrH28tIVN+w==",
+			"version": "6.0.16",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-6.0.16.tgz",
+			"integrity": "sha512-tHH2B4cGYihaPytzIlcFlc/jDSu1PUMgaQM4uzIDOn6SCYZJMp5vygK97zF7hf41x/TXv+8i9ZMN5iUJ7l1+fw==",
 			"dev": true,
 			"requires": {
-				"@storybook/addon-actions": "6.0.12",
-				"@storybook/addon-backgrounds": "6.0.12",
-				"@storybook/addon-controls": "6.0.12",
-				"@storybook/addon-docs": "6.0.12",
-				"@storybook/addon-toolbars": "6.0.12",
-				"@storybook/addon-viewport": "6.0.12",
-				"@storybook/addons": "6.0.12",
-				"@storybook/api": "6.0.12",
-				"@storybook/node-logger": "6.0.12",
+				"@storybook/addon-actions": "6.0.16",
+				"@storybook/addon-backgrounds": "6.0.16",
+				"@storybook/addon-controls": "6.0.16",
+				"@storybook/addon-docs": "6.0.16",
+				"@storybook/addon-toolbars": "6.0.16",
+				"@storybook/addon-viewport": "6.0.16",
+				"@storybook/addons": "6.0.16",
+				"@storybook/api": "6.0.16",
+				"@storybook/node-logger": "6.0.16",
 				"core-js": "^3.0.1",
 				"regenerator-runtime": "^0.13.3",
 				"ts-dedent": "^1.1.1"
 			}
 		},
 		"@storybook/addon-links": {
-			"version": "6.0.12",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-6.0.12.tgz",
-			"integrity": "sha512-qc5fkfwP8BWEhXp0eA0VnK8UB9OyVve0itx109st6Y1q8JT7ruDrI2E1V/b5AjUEQDFTRA7yekInKnes2zLefA==",
+			"version": "6.0.16",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-6.0.16.tgz",
+			"integrity": "sha512-5rQLzrjqQWmukBAIYghrQKZUrz/X9bx83DSh0W3RH+y1X+MJguah0WxbARePtJxggwb0s2rkoE/oR/uFePO+Pg==",
 			"dev": true,
 			"requires": {
-				"@storybook/addons": "6.0.12",
-				"@storybook/client-logger": "6.0.12",
-				"@storybook/core-events": "6.0.12",
+				"@storybook/addons": "6.0.16",
+				"@storybook/client-logger": "6.0.16",
+				"@storybook/core-events": "6.0.16",
 				"@storybook/csf": "0.0.1",
-				"@storybook/router": "6.0.12",
+				"@storybook/router": "6.0.16",
 				"@types/qs": "^6.9.0",
 				"core-js": "^3.0.1",
 				"global": "^4.3.2",
@@ -2633,15 +2622,15 @@
 			}
 		},
 		"@storybook/addon-storyshots": {
-			"version": "6.0.12",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-storyshots/-/addon-storyshots-6.0.12.tgz",
-			"integrity": "sha512-m0CnVg02voPG85KMJtQBhYoQKPW339ejaWeeRMBb8h8DwJhcKKuixn9QLXa+Zt15FMR19XgLblFUEkp3XOPGKQ==",
+			"version": "6.0.16",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-storyshots/-/addon-storyshots-6.0.16.tgz",
+			"integrity": "sha512-wQhM6pnjUCLTr/6BMXTptGeqiMPnnTrvLeaRwG1cDChGK/qs3YqTsa2QqLXQ17IvNUDTHLUNQlYk5af+HrCGhg==",
 			"dev": true,
 			"requires": {
 				"@jest/transform": "^26.0.0",
-				"@storybook/addons": "6.0.12",
-				"@storybook/client-api": "6.0.12",
-				"@storybook/core": "6.0.12",
+				"@storybook/addons": "6.0.16",
+				"@storybook/client-api": "6.0.16",
+				"@storybook/core": "6.0.16",
 				"@types/glob": "^7.1.1",
 				"@types/jest": "^25.1.1",
 				"@types/jest-specific-snapshot": "^0.5.3",
@@ -3166,30 +3155,30 @@
 			}
 		},
 		"@storybook/addon-toolbars": {
-			"version": "6.0.12",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-6.0.12.tgz",
-			"integrity": "sha512-mxn52Zz6LR6uQAXK6NmGXnGs9iepkoYiZblvnulouq8fBhpSuS5A0fQggIdmYzuP8XHR9K/3hZ7Hqe4TrgCI4w==",
+			"version": "6.0.16",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-6.0.16.tgz",
+			"integrity": "sha512-6ulvPqe38NJRbQp0zajeNsDJQKZzGqbCMsSw3gtkFOMt8D/V625MF8YY/Y9UZ+xHWor17GUgE1k9hljdyZe1Nw==",
 			"dev": true,
 			"requires": {
-				"@storybook/addons": "6.0.12",
-				"@storybook/api": "6.0.12",
-				"@storybook/client-api": "6.0.12",
-				"@storybook/components": "6.0.12",
+				"@storybook/addons": "6.0.16",
+				"@storybook/api": "6.0.16",
+				"@storybook/client-api": "6.0.16",
+				"@storybook/components": "6.0.16",
 				"core-js": "^3.0.1"
 			}
 		},
 		"@storybook/addon-viewport": {
-			"version": "6.0.12",
-			"resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-6.0.12.tgz",
-			"integrity": "sha512-P9DEi2LRgYYSiJGqNc10JwLAXWQWdW9a8MhUX4PFZtgLq6Aao+c2fxFkCsRbotSy321v8xLvVDKXnKQshIhf0Q==",
+			"version": "6.0.16",
+			"resolved": "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-6.0.16.tgz",
+			"integrity": "sha512-3vk6lBZrKJrK9rwxglLT1p579WkLvoJxgW5ddpvSsu31NPAKfDufkDqOZOQGyMmcgIFzZJEc9eKjoTcLiHxppw==",
 			"dev": true,
 			"requires": {
-				"@storybook/addons": "6.0.12",
-				"@storybook/api": "6.0.12",
-				"@storybook/client-logger": "6.0.12",
-				"@storybook/components": "6.0.12",
-				"@storybook/core-events": "6.0.12",
-				"@storybook/theming": "6.0.12",
+				"@storybook/addons": "6.0.16",
+				"@storybook/api": "6.0.16",
+				"@storybook/client-logger": "6.0.16",
+				"@storybook/components": "6.0.16",
+				"@storybook/core-events": "6.0.16",
+				"@storybook/theming": "6.0.16",
 				"core-js": "^3.0.1",
 				"global": "^4.3.2",
 				"memoizerific": "^1.11.3",
@@ -3198,36 +3187,36 @@
 			}
 		},
 		"@storybook/addons": {
-			"version": "6.0.12",
-			"resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-6.0.12.tgz",
-			"integrity": "sha512-gVCyWK4jys5cUY0d3/Bxi02oeCsgdi6xVvA+T4v+SgeduAfm/k01tdO2qDXL37Sl+2TT9HBQGazDrsIUW4d7Ug==",
+			"version": "6.0.16",
+			"resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-6.0.16.tgz",
+			"integrity": "sha512-jGMaOJYTM2yZeX1tI6whEn+4xpI1aAybZBrc+OD21CcGoQrbF/jplZMq7xKI0Y6vOMguuTGulpUNCezD3LbBjA==",
 			"dev": true,
 			"requires": {
-				"@storybook/api": "6.0.12",
-				"@storybook/channels": "6.0.12",
-				"@storybook/client-logger": "6.0.12",
-				"@storybook/core-events": "6.0.12",
-				"@storybook/router": "6.0.12",
-				"@storybook/theming": "6.0.12",
+				"@storybook/api": "6.0.16",
+				"@storybook/channels": "6.0.16",
+				"@storybook/client-logger": "6.0.16",
+				"@storybook/core-events": "6.0.16",
+				"@storybook/router": "6.0.16",
+				"@storybook/theming": "6.0.16",
 				"core-js": "^3.0.1",
 				"global": "^4.3.2",
 				"regenerator-runtime": "^0.13.3"
 			}
 		},
 		"@storybook/api": {
-			"version": "6.0.12",
-			"resolved": "https://registry.npmjs.org/@storybook/api/-/api-6.0.12.tgz",
-			"integrity": "sha512-8+jPtfhUVM1hT22OT4rjHRxkW924gbWrAxCFYUXOw80a0x7BcT4sL2ah1D4FWf0IpCT/onLf9jLvSVXr8V0xOw==",
+			"version": "6.0.16",
+			"resolved": "https://registry.npmjs.org/@storybook/api/-/api-6.0.16.tgz",
+			"integrity": "sha512-RTC4BKmH5i8bJUQejOHEtjebVKtOaHkmEagI2HQRalsokBc1GLAf84EGrO2TaZiRrItAPL5zZQgEnKUblsGJGw==",
 			"dev": true,
 			"requires": {
 				"@reach/router": "^1.3.3",
-				"@storybook/channels": "6.0.12",
-				"@storybook/client-logger": "6.0.12",
-				"@storybook/core-events": "6.0.12",
+				"@storybook/channels": "6.0.16",
+				"@storybook/client-logger": "6.0.16",
+				"@storybook/core-events": "6.0.16",
 				"@storybook/csf": "0.0.1",
-				"@storybook/router": "6.0.12",
+				"@storybook/router": "6.0.16",
 				"@storybook/semver": "^7.3.2",
-				"@storybook/theming": "6.0.12",
+				"@storybook/theming": "6.0.16",
 				"@types/reach__router": "^1.3.5",
 				"core-js": "^3.0.1",
 				"fast-deep-equal": "^3.1.1",
@@ -3289,14 +3278,14 @@
 			}
 		},
 		"@storybook/channel-postmessage": {
-			"version": "6.0.12",
-			"resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-6.0.12.tgz",
-			"integrity": "sha512-Hmb8/g1nqErOHcGBagIFlIuLb/Rc9cOSFrGumbYckl7M90CHFGJsgxhO5JwGzIR3WevYHrTutVlMHl1xs7S1mQ==",
+			"version": "6.0.16",
+			"resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-6.0.16.tgz",
+			"integrity": "sha512-66B4FH5R7k9i7LBhGsr/hYOxwE4UBM1JMPGV0rhAnFY8m91GiUWl4YWTRdbYIkeaZxf/0oT4sgPScqz44hnw6Q==",
 			"dev": true,
 			"requires": {
-				"@storybook/channels": "6.0.12",
-				"@storybook/client-logger": "6.0.12",
-				"@storybook/core-events": "6.0.12",
+				"@storybook/channels": "6.0.16",
+				"@storybook/client-logger": "6.0.16",
+				"@storybook/core-events": "6.0.16",
 				"core-js": "^3.0.1",
 				"global": "^4.3.2",
 				"qs": "^6.6.0",
@@ -3312,9 +3301,9 @@
 			}
 		},
 		"@storybook/channels": {
-			"version": "6.0.12",
-			"resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.0.12.tgz",
-			"integrity": "sha512-0EMtjde4tRrBnJj5jOXSgtMYfMxGZgoe/0hvVSJuOABf0FY5x6xrqNNDfory7+TtgieuoQE4idl2/tdHE6QJJA==",
+			"version": "6.0.16",
+			"resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.0.16.tgz",
+			"integrity": "sha512-TsI4GA7lKD4L2w6IjODMRfnEOkmvEp4eJDgf3MKm7+sMbxwi1y1d6yrW1UQbnmwoNJWk60ArMN2yqDBV+5MNJQ==",
 			"dev": true,
 			"requires": {
 				"core-js": "^3.0.1",
@@ -3323,16 +3312,16 @@
 			}
 		},
 		"@storybook/client-api": {
-			"version": "6.0.12",
-			"resolved": "https://registry.npmjs.org/@storybook/client-api/-/client-api-6.0.12.tgz",
-			"integrity": "sha512-mG5H+2UTbnwN4i8mTZ2ArO5WqHaB1oUgyN7yA1S2dweqQ9hkgKw4AkqZM+SYOXZmvSHc69ZuCiq+SQDKlj2vkQ==",
+			"version": "6.0.16",
+			"resolved": "https://registry.npmjs.org/@storybook/client-api/-/client-api-6.0.16.tgz",
+			"integrity": "sha512-fFsp53lt9W2QHSumqdfFRbh+DI9fvd7li0GDxqLeNESXaUVw48yg8lQiyRNK+j5Pl4VBS3AqytLugJ+0MGm2cA==",
 			"dev": true,
 			"requires": {
-				"@storybook/addons": "6.0.12",
-				"@storybook/channel-postmessage": "6.0.12",
-				"@storybook/channels": "6.0.12",
-				"@storybook/client-logger": "6.0.12",
-				"@storybook/core-events": "6.0.12",
+				"@storybook/addons": "6.0.16",
+				"@storybook/channel-postmessage": "6.0.16",
+				"@storybook/channels": "6.0.16",
+				"@storybook/client-logger": "6.0.16",
+				"@storybook/core-events": "6.0.16",
 				"@storybook/csf": "0.0.1",
 				"@types/qs": "^6.9.0",
 				"@types/webpack-env": "^1.15.2",
@@ -3356,9 +3345,9 @@
 			}
 		},
 		"@storybook/client-logger": {
-			"version": "6.0.12",
-			"resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.0.12.tgz",
-			"integrity": "sha512-MEFDlBbbqcivF/Xmxitx/ky8kxN7TVBZ7K754/pPEI5q6UW32DecJIRg79UWp/1nBPMX/A0U3ORwv+0MjgDZBQ==",
+			"version": "6.0.16",
+			"resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.0.16.tgz",
+			"integrity": "sha512-xM61Aewxqoo8500UxV7iPpfqwikITojiCX3+w8ZiCJ2NizSaXkis95TEFAeHqyozfNym5CqG+6v2NWvGYV3ncQ==",
 			"dev": true,
 			"requires": {
 				"core-js": "^3.0.1",
@@ -3366,14 +3355,14 @@
 			}
 		},
 		"@storybook/components": {
-			"version": "6.0.12",
-			"resolved": "https://registry.npmjs.org/@storybook/components/-/components-6.0.12.tgz",
-			"integrity": "sha512-w41jNwqhYYpc3S3g/IPqQG9Q9yI+6FaXwJtUjl2BvP4L0nJI3EH2s5lwFG59fp04FNifp7pQfyJb2RjmKZqg1g==",
+			"version": "6.0.16",
+			"resolved": "https://registry.npmjs.org/@storybook/components/-/components-6.0.16.tgz",
+			"integrity": "sha512-zpYGt3tWiN0yT7V0VhBl2T5Mr0COiNnTQUGCpA9Gl3pUBmAov2jCVf1sUxsIcBcMMZmDRcfo6NbJ/LqCFeUg+Q==",
 			"dev": true,
 			"requires": {
-				"@storybook/client-logger": "6.0.12",
+				"@storybook/client-logger": "6.0.16",
 				"@storybook/csf": "0.0.1",
-				"@storybook/theming": "6.0.12",
+				"@storybook/theming": "6.0.16",
 				"@types/overlayscrollbars": "^1.9.0",
 				"@types/react-color": "^3.0.1",
 				"@types/react-syntax-highlighter": "11.0.4",
@@ -3396,9 +3385,9 @@
 			}
 		},
 		"@storybook/core": {
-			"version": "6.0.12",
-			"resolved": "https://registry.npmjs.org/@storybook/core/-/core-6.0.12.tgz",
-			"integrity": "sha512-eivPFB/j+QLpfpJixy/g+yIr3XkRcsL8r6SUMhHJkEB+zbKz10q7MfQMaiXZwRDRrhjck1eIPxY2Uu/BvmJ2+w==",
+			"version": "6.0.16",
+			"resolved": "https://registry.npmjs.org/@storybook/core/-/core-6.0.16.tgz",
+			"integrity": "sha512-dVgw03bB8rSMrYDw+v07Yiqyy4yas1olnXpytscWCWdbBuflSAQU+mtqcHMIH9YlhucIT2dYiErDDDNmqP+6tw==",
 			"dev": true,
 			"requires": {
 				"@babel/plugin-proposal-class-properties": "^7.8.3",
@@ -3422,20 +3411,20 @@
 				"@babel/preset-react": "^7.8.3",
 				"@babel/preset-typescript": "^7.9.0",
 				"@babel/register": "^7.10.5",
-				"@storybook/addons": "6.0.12",
-				"@storybook/api": "6.0.12",
-				"@storybook/channel-postmessage": "6.0.12",
-				"@storybook/channels": "6.0.12",
-				"@storybook/client-api": "6.0.12",
-				"@storybook/client-logger": "6.0.12",
-				"@storybook/components": "6.0.12",
-				"@storybook/core-events": "6.0.12",
+				"@storybook/addons": "6.0.16",
+				"@storybook/api": "6.0.16",
+				"@storybook/channel-postmessage": "6.0.16",
+				"@storybook/channels": "6.0.16",
+				"@storybook/client-api": "6.0.16",
+				"@storybook/client-logger": "6.0.16",
+				"@storybook/components": "6.0.16",
+				"@storybook/core-events": "6.0.16",
 				"@storybook/csf": "0.0.1",
-				"@storybook/node-logger": "6.0.12",
-				"@storybook/router": "6.0.12",
+				"@storybook/node-logger": "6.0.16",
+				"@storybook/router": "6.0.16",
 				"@storybook/semver": "^7.3.2",
-				"@storybook/theming": "6.0.12",
-				"@storybook/ui": "6.0.12",
+				"@storybook/theming": "6.0.16",
+				"@storybook/ui": "6.0.16",
 				"@types/glob-base": "^0.3.0",
 				"@types/micromatch": "^4.0.1",
 				"@types/node-fetch": "^2.5.4",
@@ -4257,9 +4246,9 @@
 			}
 		},
 		"@storybook/core-events": {
-			"version": "6.0.12",
-			"resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-6.0.12.tgz",
-			"integrity": "sha512-52yNnp+dBkHiG9S+rQO7Nv3PdSDi0XnBt7FoQ+v8H31vGpgdBLEhy8w5ZA4eTrL951VaU/4/XoOaG2+yPALaoA==",
+			"version": "6.0.16",
+			"resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-6.0.16.tgz",
+			"integrity": "sha512-ib+58N4OY8AOix2qcBH9ICRmVHUocpGaGRVlIo79WxJrpnB/HNQ8pEaniD+OAavDRq1B7uJqFlMkTXCC0GoFiQ==",
 			"dev": true,
 			"requires": {
 				"core-js": "^3.0.1"
@@ -4275,9 +4264,9 @@
 			}
 		},
 		"@storybook/node-logger": {
-			"version": "6.0.12",
-			"resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-6.0.12.tgz",
-			"integrity": "sha512-7Yr0b25ktt8ea9cPKVHtbmf5oKW3LiMkRcT6j5+LUtsNaDf3FUZF6Z1Rz6cTJLqoI2VYhQKsAcS0cc9b5JpCHw==",
+			"version": "6.0.16",
+			"resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-6.0.16.tgz",
+			"integrity": "sha512-mD6so/puFV5oByBkDp9rv2mV/WyGy21QdrwXpXdtLDKNgqPuJjHZuF1RA/+MmDK4P1CjvP1no2H5WDKg+aW4QQ==",
 			"dev": true,
 			"requires": {
 				"@types/npmlog": "^4.1.2",
@@ -4340,9 +4329,9 @@
 			}
 		},
 		"@storybook/postinstall": {
-			"version": "6.0.12",
-			"resolved": "https://registry.npmjs.org/@storybook/postinstall/-/postinstall-6.0.12.tgz",
-			"integrity": "sha512-Tu1j9KWC+6WjBYxodXrkkKs+XzKLOqzsQLecasvG1Z9Ivhj0dTsAkq8BbCrTY+kJGBb5I+DQzvftON4voPBlMA==",
+			"version": "6.0.16",
+			"resolved": "https://registry.npmjs.org/@storybook/postinstall/-/postinstall-6.0.16.tgz",
+			"integrity": "sha512-gZgPNJK/58VepIBodK0pSlD1jPQgIVTEFWot5/iDjxv9cnSl9V+LbIEW5jZp/lzoAONSj8AS646ZZjAM87S4RQ==",
 			"dev": true,
 			"requires": {
 				"core-js": "^3.0.1"
@@ -4371,16 +4360,16 @@
 			}
 		},
 		"@storybook/react": {
-			"version": "6.0.12",
-			"resolved": "https://registry.npmjs.org/@storybook/react/-/react-6.0.12.tgz",
-			"integrity": "sha512-5GSEyEXtiAYY7U8nb5jcG73tY2RI9/VRkyzjArBfvOL3sAiWf1Nrs4p33jIndrBtoopnulAsPtJLVCT2ZpsufQ==",
+			"version": "6.0.16",
+			"resolved": "https://registry.npmjs.org/@storybook/react/-/react-6.0.16.tgz",
+			"integrity": "sha512-cxnBwewx37rL1BjXo3TQFIvvCv9z26r3yuRRWh527/0QODfwGz8TT+/sJHeqBA5JIQzLwAHNqNJhLp6xzfr5Dw==",
 			"dev": true,
 			"requires": {
 				"@babel/preset-flow": "^7.0.0",
 				"@babel/preset-react": "^7.0.0",
-				"@storybook/addons": "6.0.12",
-				"@storybook/core": "6.0.12",
-				"@storybook/node-logger": "6.0.12",
+				"@storybook/addons": "6.0.16",
+				"@storybook/core": "6.0.16",
+				"@storybook/node-logger": "6.0.16",
 				"@storybook/semver": "^7.3.2",
 				"@svgr/webpack": "^5.4.0",
 				"@types/webpack-env": "^1.15.2",
@@ -4942,9 +4931,9 @@
 			}
 		},
 		"@storybook/router": {
-			"version": "6.0.12",
-			"resolved": "https://registry.npmjs.org/@storybook/router/-/router-6.0.12.tgz",
-			"integrity": "sha512-vv1jHOOGelSzmDJnp9SdC/KR5RpE2am568ImOAQ9/XCmXNDhVshVlIS7ajy6yCKN/mS/63zKflbRNef+3SLU9Q==",
+			"version": "6.0.16",
+			"resolved": "https://registry.npmjs.org/@storybook/router/-/router-6.0.16.tgz",
+			"integrity": "sha512-zijPJ3CR4ytHE0v+pGdaWT3H+es+mLHRkR6hkqcD0ABT5HVfwMlmXJ9FkQGCVpnnNeBOz7+QKCdE13HMelQpqg==",
 			"dev": true,
 			"requires": {
 				"@reach/router": "^1.3.3",
@@ -4964,13 +4953,13 @@
 			}
 		},
 		"@storybook/source-loader": {
-			"version": "6.0.12",
-			"resolved": "https://registry.npmjs.org/@storybook/source-loader/-/source-loader-6.0.12.tgz",
-			"integrity": "sha512-NX0ewdGc1semXAqCXL9bJS7aB57gZjJ/j8KyI8KJag7hgY/XfFsBHtAuuqH8ZJ6b6JjBqyyEKbKvWN14+YVteA==",
+			"version": "6.0.16",
+			"resolved": "https://registry.npmjs.org/@storybook/source-loader/-/source-loader-6.0.16.tgz",
+			"integrity": "sha512-Ub6bU7o2JJUigzu9MSrFH1RD2SmpZZnym+WEidWI9A1gseKp1Rd4KDq36AqJo/oL3hAzoAOirrv3ZixIwXLFMg==",
 			"dev": true,
 			"requires": {
-				"@storybook/addons": "6.0.12",
-				"@storybook/client-logger": "6.0.12",
+				"@storybook/addons": "6.0.16",
+				"@storybook/client-logger": "6.0.16",
 				"@storybook/csf": "0.0.1",
 				"core-js": "^3.0.1",
 				"estraverse": "^4.2.0",
@@ -4995,15 +4984,15 @@
 			}
 		},
 		"@storybook/theming": {
-			"version": "6.0.12",
-			"resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-6.0.12.tgz",
-			"integrity": "sha512-hmF6EIbm2A7G84+JR36UQWteElSwSNfGLzccAlUMiZIhdMG0SuCtyHe6FmckAWC226Mv+MW14fr+a4+OuRpM4g==",
+			"version": "6.0.16",
+			"resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-6.0.16.tgz",
+			"integrity": "sha512-6D7oMEbeABYZdDY8e3i+O39XLrk6fvG3GBaSGp31BE30d269NcPkGPxMKY/nzc6MY30a+/LbBbM7b6gRKe6b4Q==",
 			"dev": true,
 			"requires": {
 				"@emotion/core": "^10.0.20",
 				"@emotion/is-prop-valid": "^0.8.6",
 				"@emotion/styled": "^10.0.17",
-				"@storybook/client-logger": "6.0.12",
+				"@storybook/client-logger": "6.0.16",
 				"core-js": "^3.0.1",
 				"deep-object-diff": "^1.1.0",
 				"emotion-theming": "^10.0.19",
@@ -5023,21 +5012,21 @@
 			}
 		},
 		"@storybook/ui": {
-			"version": "6.0.12",
-			"resolved": "https://registry.npmjs.org/@storybook/ui/-/ui-6.0.12.tgz",
-			"integrity": "sha512-uo2YVozW7HP0kA6YfVw8C/CHU9GWXo4KhiJ8KGxMsGH2RhukQ02316a6Q7EM65pAFu698QSnL/2NJ9+e056k+w==",
+			"version": "6.0.16",
+			"resolved": "https://registry.npmjs.org/@storybook/ui/-/ui-6.0.16.tgz",
+			"integrity": "sha512-4F21kwQVaMwgqoJmO+566j7MXmvPp+7jfWBMPAvyGsf5uIZ4q6V29h5mMLvTOFA4qHw0lHZk2k8V0g5gk/tjCA==",
 			"dev": true,
 			"requires": {
 				"@emotion/core": "^10.0.20",
-				"@storybook/addons": "6.0.12",
-				"@storybook/api": "6.0.12",
-				"@storybook/channels": "6.0.12",
-				"@storybook/client-logger": "6.0.12",
-				"@storybook/components": "6.0.12",
-				"@storybook/core-events": "6.0.12",
-				"@storybook/router": "6.0.12",
+				"@storybook/addons": "6.0.16",
+				"@storybook/api": "6.0.16",
+				"@storybook/channels": "6.0.16",
+				"@storybook/client-logger": "6.0.16",
+				"@storybook/components": "6.0.16",
+				"@storybook/core-events": "6.0.16",
+				"@storybook/router": "6.0.16",
 				"@storybook/semver": "^7.3.2",
-				"@storybook/theming": "6.0.12",
+				"@storybook/theming": "6.0.16",
 				"@types/markdown-to-jsx": "^6.11.0",
 				"copy-to-clipboard": "^3.0.8",
 				"core-js": "^3.0.1",
@@ -7163,7 +7152,6 @@
 			"version": "10.0.33",
 			"resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.0.33.tgz",
 			"integrity": "sha512-bxZbTTGz0AJQDHm8k6Rf3RQJ8tX2scsfsRyKVgAbiUPUNIRtlK+7JxP+TAd1kRLABFxe0CFm2VdK4ePkoA9FxQ==",
-			"dev": true,
 			"requires": {
 				"@babel/helper-module-imports": "^7.0.0",
 				"@emotion/hash": "0.8.0",
@@ -7378,8 +7366,7 @@
 		"babel-plugin-syntax-jsx": {
 			"version": "6.18.0",
 			"resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
-			"integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=",
-			"dev": true
+			"integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
 		},
 		"babel-plugin-syntax-object-rest-spread": {
 			"version": "6.13.0",
@@ -11179,10 +11166,9 @@
 			}
 		},
 		"csstype": {
-			"version": "2.6.13",
-			"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.13.tgz",
-			"integrity": "sha512-ul26pfSQTZW8dcOnD2iiJssfXw0gdNVX9IJDH/X3K5DGPfj+fUYe3kB+swUY6BF3oZDxaID3AJt+9/ojSAE05A==",
-			"dev": true
+			"version": "2.6.11",
+			"resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.11.tgz",
+			"integrity": "sha512-l8YyEC9NBkSm783PFTvh0FmJy7s5pFKrDp49ZL7zBGX3fWkO+N4EEyan1qqp8cwPLDcD0OSdyY6hAMoxp34JFw=="
 		},
 		"cyclist": {
 			"version": "1.0.1",
@@ -13243,8 +13229,7 @@
 		"find-root": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
-			"integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
-			"dev": true
+			"integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
 		},
 		"find-up": {
 			"version": "3.0.0",
@@ -15565,15 +15550,15 @@
 					"dev": true
 				},
 				"expect": {
-					"version": "26.4.0",
-					"resolved": "https://registry.npmjs.org/expect/-/expect-26.4.0.tgz",
-					"integrity": "sha512-dbYDJhFcqQsamlos6nEwAMe+ahdckJBk5fmw1DYGLQGabGSlUuT+Fm2jHYw5119zG3uIhP+lCQbjJhFEdZMJtg==",
+					"version": "26.4.1",
+					"resolved": "https://registry.npmjs.org/expect/-/expect-26.4.1.tgz",
+					"integrity": "sha512-PnsyF/VmPRH/HAWELjrIAgQ5h+4JLTiomA1A2djx+jXrCQzQ/4egZYBOEx9hShoX+mQLS4enYk6Ouxk8b4kcEw==",
 					"dev": true,
 					"requires": {
 						"@jest/types": "^26.3.0",
 						"ansi-styles": "^4.0.0",
 						"jest-get-type": "^26.3.0",
-						"jest-matcher-utils": "^26.4.0",
+						"jest-matcher-utils": "^26.4.1",
 						"jest-message-util": "^26.3.0",
 						"jest-regex-util": "^26.0.0"
 					}
@@ -15650,9 +15635,9 @@
 					}
 				},
 				"jest-matcher-utils": {
-					"version": "26.4.0",
-					"resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-26.4.0.tgz",
-					"integrity": "sha512-u+xdCdq+F262DH+PutJKXLGr2H5P3DImdJCir51PGSfi3TtbLQ5tbzKaN8BkXbiTIU6ayuAYBWTlU1nyckVdzA==",
+					"version": "26.4.1",
+					"resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-26.4.1.tgz",
+					"integrity": "sha512-nmHWaOz54R/w6zJju5tuW0bw6+m38Rb1jnDKehKM/bOngDDL0UwtN634cRxpFoUNVRUrX8Wa0Z34xq/f8iuP5A==",
 					"dev": true,
 					"requires": {
 						"chalk": "^4.0.0",
@@ -15710,21 +15695,21 @@
 					}
 				},
 				"jest-snapshot": {
-					"version": "26.4.0",
-					"resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-26.4.0.tgz",
-					"integrity": "sha512-vFGmNGWHMBomrlOpheTMoqihymovuH3GqfmaEIWoPpsxUXyxT3IlbxI5I4m2vg0uv3HUJYg5JoGrkgMzVsAwCg==",
+					"version": "26.4.1",
+					"resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-26.4.1.tgz",
+					"integrity": "sha512-5DsxbSSuYA8rZ/ynO+l5J65wSIyzDB2AXjuIvep90YmtslrROqDtba2hBgq1Cj6L6A0j/jv6h8JydEe2WYPM/g==",
 					"dev": true,
 					"requires": {
 						"@babel/types": "^7.0.0",
 						"@jest/types": "^26.3.0",
 						"@types/prettier": "^2.0.0",
 						"chalk": "^4.0.0",
-						"expect": "^26.4.0",
+						"expect": "^26.4.1",
 						"graceful-fs": "^4.2.4",
 						"jest-diff": "^26.4.0",
 						"jest-get-type": "^26.3.0",
 						"jest-haste-map": "^26.3.0",
-						"jest-matcher-utils": "^26.4.0",
+						"jest-matcher-utils": "^26.4.1",
 						"jest-message-util": "^26.3.0",
 						"jest-resolve": "^26.4.0",
 						"natural-compare": "^1.4.0",
@@ -20709,6 +20694,14 @@
 			"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==",
 			"dev": true
 		},
+		"react-loading-skeleton": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/react-loading-skeleton/-/react-loading-skeleton-2.1.1.tgz",
+			"integrity": "sha512-+fGvgG9ieUw4D5QVgpqJkJ75jhzUdz96GRsA0HjTlR0Mpj9DJUEFc0AKELs7ZkqWVH8/DiroaaufSrOPld1kGA==",
+			"requires": {
+				"@emotion/core": "^10.0.22"
+			}
+		},
 		"react-popper": {
 			"version": "1.3.7",
 			"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.7.tgz",
diff --git a/package.json b/package.json
index c16b7a2b..52bc2805 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
 		"react": "^16.13.1",
 		"react-dom": "^16.13.1",
 		"react-jss": "^10.4.0",
+		"react-loading-skeleton": "^2.1.1",
 		"react-scripts": "^3.4.3",
 		"rollup": "^2.23.0",
 		"rollup-plugin-typescript2": "^0.27.1",
@@ -59,13 +60,13 @@
 		]
 	},
 	"devDependencies": {
-		"@storybook/addon-actions": "^6.0.12",
-		"@storybook/addon-essentials": "^6.0.12",
-		"@storybook/addon-links": "^6.0.12",
-		"@storybook/addon-storyshots": "^6.0.12",
-		"@storybook/addons": "^6.0.12",
+		"@storybook/addon-actions": "^6.0.16",
+		"@storybook/addon-essentials": "^6.0.16",
+		"@storybook/addon-links": "^6.0.16",
+		"@storybook/addon-storyshots": "^6.0.16",
+		"@storybook/addons": "^6.0.16",
 		"@storybook/preset-create-react-app": "^3.1.4",
-		"@storybook/react": "^6.0.12",
+		"@storybook/react": "^6.0.16",
 		"@types/classnames": "^2.2.10",
 		"@types/enzyme": "^3.10.5",
 		"@types/enzyme-adapter-react-16": "^1.0.6",
diff --git a/src/__snapshots__/storybook.test.ts.snap b/src/__snapshots__/storybook.test.ts.snap
index bde56b6f..2f9fd953 100644
--- a/src/__snapshots__/storybook.test.ts.snap
+++ b/src/__snapshots__/storybook.test.ts.snap
@@ -85,6 +85,114 @@ exports[`Storyshots Button Primary Disabled 1`] = `
 </button>
 `;
 
+exports[`Storyshots InputField Default 1`] = `
+<div
+  className="container-0-2-3 container-d0-0-2-8"
+>
+  <div
+    className="label-0-2-6"
+  >
+    Field Label
+  </div>
+  <input
+    className="ant-input"
+    disabled={false}
+    onBlur={[Function]}
+    onChange={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    placeholder=""
+    type="text"
+    value=""
+  />
+</div>
+`;
+
+exports[`Storyshots InputField Error 1`] = `
+<div
+  className="container-0-2-3 container-d4-0-2-12"
+>
+  <div
+    className="label-0-2-6"
+  >
+    Field Label
+  </div>
+  <input
+    className="ant-input error-0-2-4"
+    disabled={false}
+    onBlur={[Function]}
+    onChange={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    placeholder=""
+    type="text"
+    value=""
+  />
+</div>
+`;
+
+exports[`Storyshots InputField Full Width 1`] = `
+<div
+  className="container-0-2-3 container-d3-0-2-11"
+>
+  <div
+    className="label-0-2-6"
+  >
+    Field Label
+  </div>
+  <input
+    className="ant-input"
+    disabled={false}
+    onBlur={[Function]}
+    onChange={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    placeholder=""
+    type="text"
+    value=""
+  />
+</div>
+`;
+
+exports[`Storyshots InputField Loading 1`] = `
+<div
+  className="container-0-2-3 container-d2-0-2-10"
+>
+  <div
+    className="label-0-2-6"
+  >
+    <span>
+      <span
+        className="react-loading-skeleton css-1vmnjpn-skeletonStyles-Skeleton"
+        style={
+          Object {
+            "width": 100,
+          }
+        }
+      >
+        ‌
+      </span>
+    </span>
+  </div>
+  <div
+    className="input-0-2-5"
+  >
+    <span>
+      <span
+        className="react-loading-skeleton css-1vmnjpn-skeletonStyles-Skeleton"
+        style={
+          Object {
+            "height": 13,
+          }
+        }
+      >
+        ‌
+      </span>
+    </span>
+  </div>
+</div>
+`;
+
 exports[`Storyshots Link Default 1`] = `
 <a
   className="ant-typography"
diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
index 295d799c..7807b52d 100644
--- a/src/components/Button/Button.stories.tsx
+++ b/src/components/Button/Button.stories.tsx
@@ -8,32 +8,28 @@ import { Meta, Story } from '@storybook/react/types-6-0'
 export default {
 	argTypes: {
 		children: { control: 'text' },
-		classes: { control: 'array' }
+		classes: { control: 'array' },
+		onClick: { defaultValue: action('onClick') }
 	},
 	component: Button,
 	title: 'Button'
 } as Meta
 
-const actionsData = {
-	onClick: action('onClick')
-}
-
 const Template: Story<ButtonProps> = args => (
 	<Button {...args}>{args.children}</Button>
 )
 
 export const Default = Template.bind({})
-Default.args = { ...actionsData, children: 'Default' }
+Default.args = { children: 'Default' }
 
 export const Disabled = Template.bind({})
-Disabled.args = { ...actionsData, children: 'Disabled', disabled: true }
+Disabled.args = { children: 'Disabled', disabled: true }
 
 export const Primary = Template.bind({})
-Primary.args = { ...actionsData, children: 'Primary', primary: true }
+Primary.args = { children: 'Primary', primary: true }
 
 export const PrimaryDisabled = Template.bind({})
 PrimaryDisabled.args = {
-	...actionsData,
 	children: 'Primary Disabled',
 	disabled: true,
 	primary: true
@@ -65,7 +61,6 @@ const GoogleTemplate: Story<ButtonProps> = ({ ...args }: ButtonProps) => {
 
 export const Google = GoogleTemplate.bind({})
 Google.args = {
-	...actionsData,
 	children: 'Sign in with Google',
 	classes: ['google']
 }
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 15454d1c..8d82328e 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -2,7 +2,6 @@ import 'antd/lib/button/style/index.css'
 import { Button as AntDButton } from 'antd'
 import { ButtonProps as AntDButtonProps } from 'antd/es/button'
 import classnames from 'classnames'
-
 import React, { FC, ReactNode } from 'react'
 
 export interface ButtonProps {
diff --git a/src/components/InputField/InputField.stories.tsx b/src/components/InputField/InputField.stories.tsx
new file mode 100644
index 00000000..0e1e1078
--- /dev/null
+++ b/src/components/InputField/InputField.stories.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import InputField, { InputFieldProps } from './index'
+import { Meta, Story } from '@storybook/react/types-6-0'
+
+export default {
+	argTypes: {
+		classes: { control: 'array' },
+		fieldLabel: { defaultValue: 'Field Label' },
+		value: { control: { disable: true } }
+	},
+	component: InputField,
+	title: 'InputField'
+} as Meta
+
+const Template: Story<InputFieldProps> = args => <InputField {...args} />
+
+export const Default = Template.bind({})
+
+export const Loading = Template.bind({})
+Loading.args = { loading: true }
+
+export const FullWidth = Template.bind({})
+FullWidth.args = { fullWidth: true }
+
+export const Error = Template.bind({})
+Error.args = { error: true }
diff --git a/src/components/InputField/InputField.test.tsx b/src/components/InputField/InputField.test.tsx
new file mode 100644
index 00000000..6e089062
--- /dev/null
+++ b/src/components/InputField/InputField.test.tsx
@@ -0,0 +1,140 @@
+import { Input } from 'antd'
+import React from 'react'
+import Skeleton from 'react-loading-skeleton'
+import InputField, { InputFieldProps } from './index'
+import { mount, ReactWrapper, shallow } from 'enzyme'
+
+let wrapper: ReactWrapper
+
+const mockProps: InputFieldProps = {
+	fieldLabel: 'Field Label'
+}
+
+beforeEach(() => {
+	wrapper = mount(<InputField {...mockProps} />)
+})
+
+describe('InputField', () => {
+	it('renders', () => {
+		const inputField = wrapper.find(InputField)
+
+		expect(inputField).toHaveLength(1)
+	})
+
+	it('renders a label if one exists', () => {
+		const inputField = wrapper.find(InputField)
+
+		expect(inputField.text()).toContain('Field Label')
+	})
+
+	it('throws an error if value is passed without an onClick', () => {
+		expect(() => shallow(<InputField value='abc' />)).toThrow()
+	})
+
+	it('should pass onChange and value to the input component if the props exist', () => {
+		const mockOnChange = jest.fn()
+		wrapper = mount(<InputField onChange={mockOnChange} value='abc' />)
+
+		expect(wrapper.find(Input).props().onChange).toEqual(mockOnChange)
+		expect(wrapper.find(Input).props().value).toEqual('abc')
+	})
+
+	it('correctly passes the disabled prop', () => {
+		wrapper = mount(<InputField disabled />)
+
+		expect(wrapper.find(Input).props().disabled).toBeTruthy()
+	})
+
+	it('correctly passes the placeholder prop', () => {
+		wrapper = mount(<InputField placeholder='Testing' />)
+
+		expect(wrapper.find(Input).props().placeholder).toEqual('Testing')
+	})
+
+	describe('type', () => {
+		it('defaults to type text if no type is specified', () => {
+			expect(wrapper.find(Input).props().type).toEqual('text')
+		})
+
+		it('correctly passes the input type prop', () => {
+			wrapper = mount(<InputField type='password' />)
+
+			expect(wrapper.find(Input).props().type).toEqual('password')
+		})
+	})
+
+	describe('loading', () => {
+		it('renders a loading skeleton', () => {
+			wrapper = mount(<InputField loading />)
+
+			expect(wrapper.find(Skeleton)).toHaveLength(1)
+		})
+
+		it('renders a loading skeleton for the label if there is one', () => {
+			wrapper = mount(<InputField fieldLabel='test' loading />)
+
+			expect(wrapper.find(Skeleton)).toHaveLength(2)
+		})
+	})
+
+	describe('fullWidth', () => {
+		beforeEach(() => {
+			// Mounting to document.body throws a React error, so create a temporary container div for the tests to mount the element to
+			const div = document.createElement('div')
+			div.setAttribute('id', 'container')
+			document.body.appendChild(div)
+		})
+
+		afterEach(() => {
+			const div = document.getElementById('container')
+
+			if (div) {
+				document.body.removeChild(div)
+			}
+		})
+
+		it('renders a container that will span the width of its parent container if set to true', () => {
+			wrapper = mount(<InputField fullWidth />, {
+				attachTo: document.getElementById('container')
+			})
+
+			const element = document.getElementsByClassName(
+				wrapper.getDOMNode().className
+			)[0]
+			const style = window.getComputedStyle(element)
+
+			expect(style.width).toEqual('100%')
+		})
+
+		it('does not render a container that will span the width of its parent container by default', () => {
+			wrapper = mount(<InputField />, {
+				attachTo: document.getElementById('container')
+			})
+
+			const element = document.getElementsByClassName(
+				wrapper.getDOMNode().className
+			)[0]
+			const style = window.getComputedStyle(element)
+
+			expect(style.width).not.toEqual('100%')
+		})
+	})
+
+	describe('required', () => {
+		it('passes the correct required class to field label container', () => {
+			wrapper = mount(<InputField fieldLabel='Field Label' required />)
+
+			expect(wrapper.getDOMNode().children[0].className).toContain(
+				'required'
+			)
+		})
+	})
+
+	describe('error', () => {
+		it('passes the correct error class to input', () => {
+			wrapper = mount(<InputField error />)
+
+			expect(wrapper.find(Input).hasClass(/error-*/)).toBeTruthy()
+		})
+	})
+})
diff --git a/src/components/InputField/index.tsx b/src/components/InputField/index.tsx
new file mode 100644
index 00000000..cbdc02f0
--- /dev/null
+++ b/src/components/InputField/index.tsx
@@ -0,0 +1,176 @@
+import 'antd/lib/input/style/index.css'
+import cn from 'classnames'
+import { createUseStyles } from 'react-jss'
+import { Input } from 'antd'
+import Skeleton from 'react-loading-skeleton'
+import React, { FC } from 'react'
+
+const useStyles = createUseStyles({
+	'@keyframes shake': {
+		'0%, 100%': { left: '0rem' },
+		'20%, 60%': { left: '0.5rem' },
+		'40%, 80%': { left: '-0.5rem' }
+	},
+	container: {
+		display: 'flex',
+		flexDirection: 'column',
+		width: props => (props.fullWidth ? '100%' : '300px')
+	},
+	error: {
+		animation: 'shake 0.2s ease-in-out 0s 2',
+		border: '1px solid orange'
+	},
+	input: {
+		border: '1px solid #DEDEDF',
+		borderRadius: '4px',
+		padding: '8.5px 14px'
+	},
+	label: {
+		fontSize: '14px',
+		paddingBottom: '5px'
+	},
+	required: {
+		'&::after': {
+			color: 'red',
+			// eslint-disable-next-line quotes
+			content: "'*'",
+			paddingLeft: '5px'
+		}
+	}
+})
+
+const InputFieldSkeleton: FC<InputFieldProps> = (props: InputFieldProps) => {
+	const { fieldLabel } = props
+	const classes = useStyles(props)
+
+	return (
+		<div className={classes.container}>
+			{fieldLabel && (
+				<div className={classes.label}>
+					<Skeleton width={100} />
+				</div>
+			)}
+			<div className={classes.input}>
+				<Skeleton height={13} />
+			</div>
+		</div>
+	)
+}
+
+export interface InputFieldProps {
+	/**
+	 * Array of classes to pass to button.
+	 * @default []
+	 */
+	classes?: string[]
+	/**
+	 * Adds the disabled attribute and styles (opacity, gray scale filter, no pointer events).
+	 * @default false
+	 */
+	disabled?: boolean
+	/**
+	 * Whether or not to show error state and animation
+	 * @default false
+	 */
+	error?: boolean
+	/**
+	 * Adds a label above the input
+	 */
+	fieldLabel?: string
+	/**
+	 * Whether or not input spans the full width of the parent container
+	 * @default false
+	 */
+	fullWidth?: boolean
+	/**
+	 * Whether or not to show skeleton loader
+	 * @default false
+	 */
+	loading?: boolean
+	/**
+	 * Callback that runs when input is updated
+	 * @default () => {}
+	 */
+	onChange?: () => void
+	/**
+	 * Describes expected value of input
+	 */
+	placeholder?: string
+	/**
+	 * Adds an asterisk to the label that indicates field is required
+	 * @default false
+	 */
+	required?: boolean
+	/**
+	 * Type of input (ex: text, password)
+	 * @default text
+	 */
+	type?: 'text' | 'password'
+	/**
+	 * Input content value for controlled inputs. Requires an onChange to be passed
+	 */
+	value?: string
+}
+
+const InputField: FC<InputFieldProps> = (props: InputFieldProps) => {
+	const {
+		classes = [],
+		disabled = false,
+		onChange,
+		error = false,
+		fieldLabel = '',
+		loading = false,
+		placeholder = '',
+		required = false,
+		type = 'text',
+		value
+	} = props
+
+	const componentClasses = useStyles(props)
+
+	const inputClasses: string = cn(
+		{
+			[componentClasses.error]: error
+		},
+		classes
+	)
+
+	let controlledCmpProps = {}
+
+	if (onChange) {
+		controlledCmpProps = {
+			onChange,
+			value
+		}
+	}
+
+	if (value && !onChange) {
+		throw new Error('Controlled inputs require an onChange prop')
+	}
+
+	return loading ? (
+		<InputFieldSkeleton {...props} />
+	) : (
+		<div className={componentClasses.container}>
+			{fieldLabel && (
+				<div
+					className={cn({
+						[componentClasses.label]: true,
+						[componentClasses.required]: required
+					})}
+				>
+					{fieldLabel}
+				</div>
+			)}
+			<Input
+				className={inputClasses}
+				disabled={disabled}
+				placeholder={placeholder}
+				type={type}
+				{...controlledCmpProps}
+			/>
+		</div>
+	)
+}
+
+export default InputField
diff --git a/src/components/index.ts b/src/components/index.ts
index 49944001..124c4d6e 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,5 +1,6 @@
 import 'normalize.css'
 import '../styles/index.css'
 export { default as Button } from './Button'
+export { default as InputField } from './InputField'
 export { default as Link } from './Link'
 export { default as Tag } from './Tag'