diff --git a/.babelrc.js b/.babelrc.js
index 9e0a4dc16c..c479bb74c9 100644
--- a/.babelrc.js
+++ b/.babelrc.js
@@ -17,7 +17,7 @@ module.exports = {
   ],
   env: {
     test: {
-      plugins: ['babel-plugin-require-context-hook'],
+      plugins: ['babel-plugin-require-context-hook', 'babel-plugin-dynamic-import-node'],
     },
   },
   overrides: [
diff --git a/ADDONS_SUPPORT.md b/ADDONS_SUPPORT.md
index 3fbeab75b0..ae7d66dc84 100644
--- a/ADDONS_SUPPORT.md
+++ b/ADDONS_SUPPORT.md
@@ -15,6 +15,7 @@
 |[links](addons/links)                       |+|+|+|+|+|+|+| |+|+|+|
 |[notes](addons/notes)                       |+|+*|+|+|+|+|+| |+|+|+|
 |[options](addons/options)                   |+|+|+|+|+|+|+| |+|+|+|
+|[cssresources](addons/cssresources)         |+| |+|+|+|+|+|+|+|+|+|
 |[storyshots](addons/storyshots)             |+|+|+|+| | |+| |+|+| |
 |[storysource](addons/storysource)           |+| |+|+|+|+|+|+|+|+|+|
 |[viewport](addons/viewport)                 |+| |+|+|+|+|+|+|+|+|+|
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6bf3613573..558573fbe6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,4 +1,46 @@
-# 4.1.0-alpha.3 (November 15, 2018)
+## 4.1.0-alpha.8 (November 25, 2018)
+
+### Features
+
+* React: use babel presets/plugins based on CRA. ([#4836](https://github.com/storybooks/storybook/pull/4836))
+* React-native: Add ability to filter story list ([#4806](https://github.com/storybooks/storybook/pull/4806))
+
+### Bug Fixes
+
+* Core: Don't mangle production build ([#4838](https://github.com/storybooks/storybook/pull/4838))
+* HTML: Don't change rootElement when received node is the same ([#4822](https://github.com/storybooks/storybook/pull/4822))
+
+### Maintenance
+
+* Fix snapshots to use "emotion/snapshot-serializer" ([#4837](https://github.com/storybooks/storybook/pull/4837))
+
+## 4.1.0-alpha.7 (November 22, 2018)
+
+### Features
+
+* Add TypeScript support for react-scripts ([#4824](https://github.com/storybooks/storybook/pull/4824))
+
+## 4.1.0-alpha.5/6 (November 22, 2018)
+
+Publish failed
+
+## 4.1.0-alpha.4 (November 21, 2018)
+
+### Features
+
+* ADD support for all versions of react ([#4808](https://github.com/storybooks/storybook/pull/4808))
+
+### Bug Fixes
+
+* Use correct cache directory path ([#4792](https://github.com/storybooks/storybook/pull/4792))
+
+## 4.0.8 (November 21, 2018)
+
+### Bug Fixes
+
+* Addon-knobs: Vue optimize on force render ([#4773](https://github.com/storybooks/storybook/pull/4773))
+
+## 4.1.0-alpha.3 (November 15, 2018)
 
 ### Maintenance
 
@@ -9,13 +51,13 @@
 
 * Use alpha minify dependency to upgrade transitive lodash dependencies ([#4771](https://github.com/storybooks/storybook/pull/4771))
 
-# 4.0.7 (November 15, 2018)
+## 4.0.7 (November 15, 2018)
 
 ### Bug Fixes
 
 * Vue/Angular/Mithril/Polymer: Add missing "forceReRender" and "addParameters" ([#4767](https://github.com/storybooks/storybook/pull/4767))
 
-# 4.1.0-alpha.2 (November 13, 2018)
+## 4.1.0-alpha.2 (November 13, 2018)
 
 ### Features
 
@@ -50,7 +92,7 @@
 * Bump @ngrx/store from 6.1.1 to 6.1.2 ([#4678](https://github.com/storybooks/storybook/pull/4678))
 * [Security] Bump merge from 1.2.0 to 1.2.1 ([#4686](https://github.com/storybooks/storybook/pull/4686))
 
-# 4.0.6 (November 13, 2018)
+## 4.0.6 (November 13, 2018)
 
 ### Features
 
@@ -60,11 +102,11 @@
 
 * Core: fix NODE_PATH is not being loaded from .env ([#4706](https://github.com/storybooks/storybook/pull/4706))
 
-# 4.0.5 (November 13, 2018)
+## 4.0.5 (November 13, 2018)
 
 Publish failed
 
-# 4.1.0-alpha.1
+## 4.1.0-alpha.1
 
 2018-November-06
 
@@ -82,11 +124,11 @@ Publish failed
 -   Bump @ngrx/store from 6.1.1 to 6.1.2 [#4678](https://github.com/storybooks/storybook/pull/4678)
 -   [Security] Bump merge from 1.2.0 to 1.2.1 [#4686](https://github.com/storybooks/storybook/pull/4686)
 
-# 4.1.0-alpha.0
+## 4.1.0-alpha.0
 
 Publish failed
 
-# 4.0.4
+## 4.0.4
 
 2018-November-06
 
@@ -103,7 +145,7 @@ Publish failed
 -   Bump react-syntax-highlighter from 9.0.1 to 10.0.0 [#4654](https://github.com/storybooks/storybook/pull/4654)
 -   Remove SB deps from cli tests [#4705](https://github.com/storybooks/storybook/pull/4705)
 
-# 4.0.3
+##  4.0.3
 
 2018-November-06
 
@@ -161,7 +203,7 @@ Publish failed
 
 </details>
 
-# 4.0.2
+##  4.0.2
 
 2018-October-31
 
@@ -171,13 +213,13 @@ Fix broken 4.0.1 release
 
 -   Addon-knobs: fix select array values showing k [#4586](https://github.com/storybooks/storybook/pull/4586)
 
-# 4.0.1
+## 4.0.1
 
 2018-October-31
 
 Broken release - `@storybook/client-logger` [somehow didn't get published to NPM.](https://github.com/storybooks/storybook/issues/4660)
 
-# 4.0.0
+## 4.0.0
 
 2018-October-29
 
@@ -213,7 +255,7 @@ Broken release - `@storybook/client-logger` [somehow didn't get published to NPM
 There are hundreds of more fixes, features, and tweaks in the 4.0 release. See changelogs for `4.0.0-rc.*` and  `4.0.0-alpha.*` for details; check out our [migration guide](https://medium.com/storybookjs/migrating-to-storybook-4-c65b19a03d2c) for a walkthrough of how to upgrade or the 
 [migration docs](https://github.com/storybooks/storybook/blob/master/MIGRATION.md#from-version-34x-to-40x) for an enumeration of breaking changes.
 
-# 4.0.0-rc.6
+## 4.0.0-rc.6
 
 2018-October-25
 
@@ -221,7 +263,7 @@ There are hundreds of more fixes, features, and tweaks in the 4.0 release. See c
 
 -   Upgrade react-komposer to 2.0.5 [#4547](https://github.com/storybooks/storybook/pull/4547)
 
-# 4.0.0-rc.5
+## 4.0.0-rc.5
 
 2018-October-25
 
@@ -229,7 +271,7 @@ There are hundreds of more fixes, features, and tweaks in the 4.0 release. See c
 
 -   Fix issue with `sb init` on the Vue CLI [#4535](https://github.com/storybooks/storybook/pull/4535)
 
-# 4.0.0-rc.4
+## 4.0.0-rc.4
 
 2018-October-25
 
@@ -254,7 +296,7 @@ There are hundreds of more fixes, features, and tweaks in the 4.0 release. See c
 -   Bump riot from 3.12.0 to 3.13.0 [#4511](https://github.com/storybooks/storybook/pull/4511)
 
 
-# 4.0.0-rc.3
+## 4.0.0-rc.3
 
 2018-October-23
 
@@ -269,7 +311,7 @@ There are hundreds of more fixes, features, and tweaks in the 4.0 release. See c
 -   REMOVE emotion from demo components to make backwards compatibility easier && ADD demo components to official example [#4527](https://github.com/storybooks/storybook/pull/4527)
 -   Exclude story files from angular app build [#4485](https://github.com/storybooks/storybook/pull/4485)
 
-# 4.0.0-rc.2
+## 4.0.0-rc.2
 
 2018-October-22
 
@@ -295,7 +337,7 @@ There are hundreds of more fixes, features, and tweaks in the 4.0 release. See c
 -   Bump jest-image-snapshot from 2.5.0 to 2.6.0 [#4494](https://github.com/storybooks/storybook/pull/4494)
 -   Bump webpack from 4.20.2 to 4.21.0 [#4477](https://github.com/storybooks/storybook/pull/4477)
 
-# 4.0.0-rc.1
+## 4.0.0-rc.1
 
 2018-October-18
 
@@ -320,7 +362,7 @@ There are hundreds of more fixes, features, and tweaks in the 4.0 release. See c
 -   Bump marked from 0.4.0 to 0.5.1 in /docs [#4437](https://github.com/storybooks/storybook/pull/4437)
 -   Bump highlight.js from 9.12.0 to 9.13.0 in /docs [#4440](https://github.com/storybooks/storybook/pull/4440)
 
-# 4.0.0-rc.0
+## 4.0.0-rc.0
 
 2018-October-15
 
@@ -351,7 +393,7 @@ There are hundreds of more fixes, features, and tweaks in the 4.0 release. See c
 -   Bump eslint-plugin-jest from 21.24.1 to 21.25.0 [#4424](https://github.com/storybooks/storybook/pull/4424)
 -   Bump lazy-universal-dotenv from 1.9.1 to 2.0.0 [#4422](https://github.com/storybooks/storybook/pull/4422)
 
-# 4.0.0-alpha.25
+## 4.0.0-alpha.25
 
 2018-October-13
 
@@ -408,6 +450,8 @@ There are hundreds of more fixes, features, and tweaks in the 4.0 release. See c
 -   Bump husky from 1.1.1 to 1.1.2 [#4358](https://github.com/storybooks/storybook/pull/4358)
 -   Tech/upgrades 5 [#4347](https://github.com/storybooks/storybook/pull/4347)
 
+## 4.0.0-alpha.24
+
 2018-October-04
 
 #### Features
@@ -423,7 +467,7 @@ There are hundreds of more fixes, features, and tweaks in the 4.0 release. See c
 -   Addon-Notes: Fix how markdownOptions are passed to marked [#4242](https://github.com/storybooks/storybook/pull/4242)
 -   Addon-Knobs: Fix broken colorpicker [#4222](https://github.com/storybooks/storybook/pull/4222)
 
-# 4.0.0-alpha.23
+## 4.0.0-alpha.23
 
 2018-September-25
 
@@ -442,7 +486,7 @@ There are hundreds of more fixes, features, and tweaks in the 4.0 release. See c
 -   Upgrade deps dealing with license issues [#4228](https://github.com/storybooks/storybook/pull/4228)
 -   Use @emotion/snapshot-serializer [#4206](https://github.com/storybooks/storybook/pull/4206)
 
-# 4.0.0-alpha.22
+## 4.0.0-alpha.22
 
 2018-September-19
 
@@ -474,7 +518,7 @@ There are hundreds of more fixes, features, and tweaks in the 4.0 release. See c
 -   Updating react-split-pane to version 0.1.84 [#4153](https://github.com/storybooks/storybook/pull/4153)
 -   Riot tag loader missing in cli [#4122](https://github.com/storybooks/storybook/pull/4122)
 
-# 3.4.11
+## 3.4.11
 
 2018-September-17
 
@@ -482,7 +526,7 @@ There are hundreds of more fixes, features, and tweaks in the 4.0 release. See c
 
 -   Allow v1 or v2 in airbnb-js-shims [#4190](https://github.com/storybooks/storybook/pull/4190)
 
-# 4.0.0-alpha.21
+## 4.0.0-alpha.21
 
 2018-September-07
 
@@ -504,7 +548,7 @@ There are hundreds of more fixes, features, and tweaks in the 4.0 release. See c
 -   \[WIP\] Refactor core and frameworks to work with presets [#4043](https://github.com/storybooks/storybook/pull/4043)
 -   \[WIP\] presets - merge default babel configs [#4107](https://github.com/storybooks/storybook/pull/4107)
 
-# 4.0.0-alpha.20
+## 4.0.0-alpha.20
 
 2018-August-31
 
@@ -532,13 +576,13 @@ There are hundreds of more fixes, features, and tweaks in the 4.0 release. See c
 
 -   UPGRADE packages [#3996](https://github.com/storybooks/storybook/pull/3996)
 
-# 4.0.0-alpha.19
+## 4.0.0-alpha.19
 
 2018-August-31
 
 Not published to NPM
 
-# 4.0.0-alpha.18
+## 4.0.0-alpha.18
 
 2018-August-25
 
@@ -552,7 +596,7 @@ Not published to NPM
 
 -   Faster CircleCI [#4068](https://github.com/storybooks/storybook/pull/4068)
 
-# 4.0.0-alpha.17
+## 4.0.0-alpha.17
 
 2018-August-24
 
@@ -582,7 +626,7 @@ Not published to NPM
 -   Fixed homepage links \[skip ci\] [#4008](https://github.com/storybooks/storybook/pull/4008)
 -   CHANGE html-webpack-plugin for generate-page-plugin [#3919](https://github.com/storybooks/storybook/pull/3919)
 
-# 4.0.0-alpha.16
+## 4.0.0-alpha.16
 
 2018-August-06
 
@@ -601,7 +645,7 @@ Not published to NPM
 -   More dependency upgrades (major version bumps) [#3957](https://github.com/storybooks/storybook/pull/3957)
 -   UPGRADE all minor dependencies [#3954](https://github.com/storybooks/storybook/pull/3954)
 
-# 4.0.0-alpha.15
+## 4.0.0-alpha.15
 
 2018-August-03
 
@@ -635,7 +679,7 @@ Not published to NPM
 
 -   Use react-dev-utils@next [#3852](https://github.com/storybooks/storybook/pull/3852)
 
-# 3.4.10
+## 3.4.10
 
 2018-August-03
 
@@ -646,7 +690,7 @@ NOTE: `3.4.9` publish failed
 -   addons-jest: bug with the jest parameter [#3923](https://github.com/storybooks/storybook/pull/3923)
 -   addon-info: fix copy button styling [#3896](https://github.com/storybooks/storybook/pull/3896)
 
-# 4.0.0-alpha.14
+## 4.0.0-alpha.14
 
 2018-July-11
 
@@ -654,7 +698,7 @@ NOTE: `3.4.9` publish failed
 
 -   Upgrade universal-dotenv to fix core-js dependency [#3874](https://github.com/storybooks/storybook/pull/3874)
 
-# 4.0.0-alpha.13
+## 4.0.0-alpha.13
 
 2018-July-09
 
@@ -670,7 +714,7 @@ NOTE: `3.4.9` publish failed
 
 -   Added a test for parameter combination [#3844](https://github.com/storybooks/storybook/pull/3844)
 
-# 4.0.0-alpha.12
+## 4.0.0-alpha.12
 
 2018-July-03
 
@@ -678,7 +722,7 @@ NOTE: `3.4.9` publish failed
 
 -   Fix non-polyfilled themed UI components [#3829](https://github.com/storybooks/storybook/pull/3829)
 
-# 4.0.0-alpha.11
+## 4.0.0-alpha.11
 
 2018-July-02
 
@@ -693,7 +737,7 @@ NOTE: `3.4.9` publish failed
 -   Marko: fix welcome component [#3796](https://github.com/storybooks/storybook/pull/3796)
 -   Addon-a11y: Run analysis on demand [#3690](https://github.com/storybooks/storybook/pull/3690)
 
-# 4.0.0-alpha.10
+## 4.0.0-alpha.10
 
 2018-June-21
 
@@ -714,7 +758,7 @@ NOTE: `3.4.9` publish failed
 
 -   Try to fix linter issues [#3748](https://github.com/storybooks/storybook/pull/3748)
 
-# 3.4.8
+## 3.4.8
 
 2018-June-21
 
@@ -723,7 +767,7 @@ NOTE: `3.4.9` publish failed
 -   Fix centered addon for IE11 [#3735](https://github.com/storybooks/storybook/pull/3735)
 -   Display functions as variables not invocations [#3761](https://github.com/storybooks/storybook/pull/3761)
 
-# 4.0.0-alpha.9
+## 4.0.0-alpha.9
 
 2018-June-10
 
@@ -852,7 +896,7 @@ NOTE: `3.4.9` publish failed
 
 </details>
 
-# 3.4.7
+## 3.4.7
 
 2018-June-10
 
@@ -860,7 +904,7 @@ NOTE: `3.4.9` publish failed
 
 -   Remove linebreaks in notes text when they are html elements [#3731](https://github.com/storybooks/storybook/pull/3731)
 
-# 4.0.0-alpha.8
+## 4.0.0-alpha.8
 
 2018-May-26
 
@@ -938,7 +982,7 @@ NOTE: `3.4.9` publish failed
 
 </details>
 
-# 3.4.6
+## 3.4.6
 
 2018-May-26
 
@@ -946,7 +990,7 @@ NOTE: `3.4.9` publish failed
 
 -   Addon-notes: Add classname to the container component to target with styles. [#3617](https://github.com/storybooks/storybook/pull/3617)
 
-# 4.0.0-alpha.7
+## 4.0.0-alpha.7
 
 2018-May-17
 
@@ -965,7 +1009,7 @@ NOTE: As part of the generic addon decorators, we've reversed the order of addon
 
 -   Refactor transitional decorator from addon-notes [#3559](https://github.com/storybooks/storybook/pull/3559)
 
-# 3.4.5
+## 3.4.5
 
 2018-May-17
 
@@ -980,7 +1024,7 @@ NOTE: As part of the generic addon decorators, we've reversed the order of addon
 -   Ignore any unstructured output from the package managers [#3563](https://github.com/storybooks/storybook/pull/3563)
 -   Use the --use-npm flag also for version checking [#3535](https://github.com/storybooks/storybook/pull/3535)
 
-# 4.0.0-alpha.6
+## 4.0.0-alpha.6
 
 2018-May-12
 
@@ -1004,11 +1048,11 @@ NOTE: As part of the generic addon decorators, we've reversed the order of addon
 -   Clean out the store if `configure` fails [#3558](https://github.com/storybooks/storybook/pull/3558)
 -   Fix render order in preview [#3520](https://github.com/storybooks/storybook/pull/3520)
 
-# 4.0.0-alpha.5
+## 4.0.0-alpha.5
 
 Broken release (@storybook/core-events had not been published publicly)
 
-# 3.4.4
+## 3.4.4
 
 2018-May-12
 
@@ -1023,7 +1067,7 @@ Broken release (@storybook/core-events had not been published publicly)
 
 -   jest-image-snapshot version to ^2.4.1 [#3500](https://github.com/storybooks/storybook/pull/3500)
 
-# 4.0.0-alpha.4
+## 4.0.0-alpha.4
 
 2018-April-27
 
@@ -1077,7 +1121,7 @@ Broken release (@storybook/core-events had not been published publicly)
 
 </details>
 
-# 3.4.3
+## 3.4.3
 
 2018-April-27
 
@@ -1094,7 +1138,7 @@ Broken release (@storybook/core-events had not been published publicly)
 
 -   Update webpack-hot-middleware to fix HMR [#3463](https://github.com/storybooks/storybook/pull/3463)
 
-# 4.0.0-alpha.3
+## 4.0.0-alpha.3
 
 2018-April-17
 
@@ -1227,7 +1271,7 @@ Also includes changes from 3.4.2
 
 </details>
 
-# 3.4.2
+## 3.4.2
 
 2018-April-17
 
@@ -1240,7 +1284,7 @@ Also includes changes from 3.4.2
 
 -   Fix storyshots readme for image snapshotting [#3397](https://github.com/storybooks/storybook/pull/3397)
 
-# 4.0.0-alpha.2
+## 4.0.0-alpha.2
 
 2018-April-10
 
@@ -1420,7 +1464,7 @@ Also includes changes from 3.4.1
 
 </details>
 
-# 3.4.1
+## 3.4.1
 
 2018-April-10
 
@@ -1439,7 +1483,7 @@ Also includes changes from 3.4.1
 -   Add typescript docs [#3361](https://github.com/storybooks/storybook/pull/3361)
 -   Update links of the live examples for the new release [#3197](https://github.com/storybooks/storybook/pull/3197)
 
-# 3.4.0
+## 3.4.0
 
 2018-March-30
 
@@ -1536,7 +1580,7 @@ Read on for more improvements, fixes. In addition, there are hundreds of depende
 -   Update prereq yarn install level [#2638](https://github.com/storybooks/storybook/pull/2638)
 -   Separate stories in angular-cli example [#2592](https://github.com/storybooks/storybook/pull/2592)
 
-# 4.0.0-alpha.1
+## 4.0.0-alpha.1
 
 2018-March-29
 
@@ -1544,7 +1588,7 @@ Read on for more improvements, fixes. In addition, there are hundreds of depende
 
 -  \[Hotfix\]  Use published webpack 4 compatible fork of react-dev-utils [#3312](https://github.com/storybooks/storybook/pull/3312)
 
-# 4.0.0-alpha.0
+## 4.0.0-alpha.0
 
 2018-March-28
 
@@ -1654,7 +1698,7 @@ Read on for more improvements, fixes. In addition, there are hundreds of depende
 
 </details>
 
-# 3.4.0-rc.4
+## 3.4.0-rc.4
 
 2018-March-28
 
@@ -1667,7 +1711,7 @@ Read on for more improvements, fixes. In addition, there are hundreds of depende
 -   Fix storyshots renderer and serializer options [#3252](https://github.com/storybooks/storybook/pull/3252)
 -   Angular: use resolveLoader from cliCommonConfig [#3251](https://github.com/storybooks/storybook/pull/3251)
 
-# 3.4.0-rc.3
+## 3.4.0-rc.3
 
 2018-March-19
 
@@ -1744,7 +1788,7 @@ Read on for more improvements, fixes. In addition, there are hundreds of depende
 
 </details>
 
-# 3.4.0-rc.2
+## 3.4.0-rc.2
 
 2018-March-13
 
@@ -1752,7 +1796,7 @@ Fix publishing options to use exact versions for cross-dependencies per this cha
 
 -   use exact versions for cross-dependencies between our own packages [#3183](https://github.com/storybooks/storybook/pull/3183)
 
-# 3.4.0-rc.1
+## 3.4.0-rc.1
 
 2018-March-13
 
@@ -1837,7 +1881,7 @@ Fix publishing options to use exact versions for cross-dependencies per this cha
 
 </details>
 
-# 3.4.0-rc.0
+## 3.4.0-rc.0
 
 2018-March-08
 
@@ -2104,7 +2148,7 @@ Fix publishing options to use exact versions for cross-dependencies per this cha
 
 </details>
 
-# 3.3.15
+## 3.3.15
 
 2018-March-07
 
@@ -2115,7 +2159,7 @@ Fix publishing options to use exact versions for cross-dependencies per this cha
 -   Added missing key prop to NoTests component. [#3111](https://github.com/storybooks/storybook/pull/3111)
 -   Events addon: fix React keys warning [#3072](https://github.com/storybooks/storybook/pull/3072)
 
-# 3.4.0-alpha.9
+## 3.4.0-alpha.9
 
 2018-February-22
 
@@ -2327,7 +2371,7 @@ Fix publishing options to use exact versions for cross-dependencies per this cha
 
 </details>
 
-# 3.3.14
+## 3.3.14
 
 2018-February-21
 
@@ -2340,7 +2384,7 @@ Fix publishing options to use exact versions for cross-dependencies per this cha
 -   Use @storybook/podda to fix npm engine version in podda [#3033](https://github.com/storybooks/storybook/pull/3033)
 -   Addon-backgrounds: set background on iframe instead of adding a wrapper in preview [#2807](https://github.com/storybooks/storybook/pull/3033)
 
-# 3.4.0-alpha.8
+## 3.4.0-alpha.8
 
 2018-February-11
 
@@ -2467,7 +2511,7 @@ Fix publishing options to use exact versions for cross-dependencies per this cha
 
 </details>
 
-# 3.3.13
+## 3.3.13
 
 2018-February-11
 
@@ -2476,7 +2520,7 @@ Fix publishing options to use exact versions for cross-dependencies per this cha
 -   Angular: add rule for .md to webpack.config.prod.js [#2924](https://github.com/storybooks/storybook/pull/2924)
 -   Check for correct props in Flow or prop-types [#2902](https://github.com/storybooks/storybook/pull/2902)
 
-# 3.4.0-alpha.7
+## 3.4.0-alpha.7
 
 2018-February-03
 
@@ -2587,7 +2631,7 @@ Fix publishing options to use exact versions for cross-dependencies per this cha
 
 </details>
 
-# 3.3.12
+## 3.3.12
 
 2018-February-02
 
@@ -2599,7 +2643,7 @@ Fix publishing options to use exact versions for cross-dependencies per this cha
 
 -   Update url-loader from 0.5.8 to 0.6.2 in app/angular [#2847](https://github.com/storybooks/storybook/pull/2847)
 
-# 3.4.0-alpha.6
+## 3.4.0-alpha.6
 
 2018-January-27
 
@@ -2710,7 +2754,7 @@ Fix publishing options to use exact versions for cross-dependencies per this cha
 
 </details>
 
-# 3.3.11
+## 3.3.11
 
 2018-January-26
 
@@ -2718,7 +2762,7 @@ Fix publishing options to use exact versions for cross-dependencies per this cha
 
 -   Angular: update helpers.ts [#2777](https://github.com/storybooks/storybook/pull/2777)
 
-# 3.4.0-alpha.5
+## 3.4.0-alpha.5
 
 2018-January-19
 
@@ -2850,7 +2894,7 @@ Fix publishing options to use exact versions for cross-dependencies per this cha
 
 </details>
 
-# 3.3.10
+## 3.3.10
 
 2018-January-19
 
@@ -2859,13 +2903,13 @@ Fix publishing options to use exact versions for cross-dependencies per this cha
 -   Addon-backgrounds: remove redundant scrollbars [#2744](https://github.com/storybooks/storybook/pull/2744)
 -   Addon-info: add keys for separator spans in OneOfType [#2743](https://github.com/storybooks/storybook/pull/2743)
 
-# 3.4.0-alpha.4
+## 3.4.0-alpha.4
 
 2018-January-13
 
 Republish `3.4.0-alpha.3` due to potential publishing errors
 
-# 3.4.0-alpha.3
+## 3.4.0-alpha.3
 
 2018-January-13
 
@@ -2948,7 +2992,7 @@ Republish `3.4.0-alpha.3` due to potential publishing errors
 
 </details>
 
-# 3.3.9
+## 3.3.9
 
 2018-January-13
 
@@ -2958,19 +3002,19 @@ Republish `3.4.0-alpha.3` due to potential publishing errors
 -   Reflect the new peer dependencies in docs and CLI templates [#2714](https://github.com/storybooks/storybook/pull/2714)
 -   Don't mangle function names for production builds [#2705](https://github.com/storybooks/storybook/pull/2705)
 
-# 3.4.0-alpha.2
+## 3.4.0-alpha.2
 
 2018-January-11
 
 This is a duplicate of `3.4.0-alpha.1`, re-published because I accidentally published `3.4.0-alpha.1` on the `latest` NPM tag.
 
-# 3.3.8
+## 3.3.8
 
 2018-January-11
 
 This is a duplicate of `3.3.7`, re-published because I accidentally published `3.4.0-alpha.1` on the `latest` NPM tag.
 
-# 3.4.0-alpha.1
+## 3.4.0-alpha.1
 
 2018-January-10
 
@@ -3095,7 +3139,7 @@ In addition to the changes listed here, also contains fixes from [3.3.5](#335) a
 
 </details>
 
-# 3.3.7
+## 3.3.7
 
 2018-January-10
 
@@ -3109,7 +3153,7 @@ In addition to the changes listed here, also contains fixes from [3.3.5](#335) a
 -   Angular: add entry components to modulemetadata - #2701 [#2702](https://github.com/storybooks/storybook/pull/2702)
 -   Add html and markup loaders to angular and vue apps [#2692](https://github.com/storybooks/storybook/pull/2692)
 
-# 3.3.6
+## 3.3.6
 
 2018-January-08
 
@@ -3117,7 +3161,7 @@ In addition to the changes listed here, also contains fixes from [3.3.5](#335) a
 
 -   Remove `src/` from remaining `.npmignore`s [#2678](https://github.com/storybooks/storybook/pull/2678)
 
-# 3.3.5
+## 3.3.5
 
 2018-January-08
 
@@ -3125,7 +3169,7 @@ In addition to the changes listed here, also contains fixes from [3.3.5](#335) a
 
 -   Remove src from individual .npmignore files [#2677](https://github.com/storybooks/storybook/pull/2677)
 
-# 3.4.0-alpha.0
+## 3.4.0-alpha.0
 
 2018-January-07
 
@@ -3241,7 +3285,7 @@ In addition to the changes listed here, also contains fixes from [3.3.5](#335) a
 
 </details>
 
-# 3.3.4
+## 3.3.4
 
 2018-January-07
 
@@ -3287,7 +3331,7 @@ In addition to the changes listed here, also contains fixes from [3.3.5](#335) a
 
 </details>
 
-# 3.3.3
+## 3.3.3
 
 2017-December-29
 
@@ -3308,7 +3352,7 @@ In addition to the changes listed here, also contains fixes from [3.3.5](#335) a
 -   Upgraded `@storybook/addons` in `/docs` from "3.2.18" to "3.3.1" [#2580](https://github.com/storybooks/storybook/pull/2580)
 -   Upgraded `@storybook/react` in `/docs` from "3.2.18" to "3.3.1" [#2580](https://github.com/storybooks/storybook/pull/2580)
 
-# 3.3.2
+## 3.3.2
 
 2017-December-28
 
@@ -3342,7 +3386,7 @@ In addition to the changes listed here, also contains fixes from [3.3.5](#335) a
 -   Upgraded `uglifyjs-webpack-plugin` in `app/vue` from "1.1.4" to "1.1.5" [#2581](https://github.com/storybooks/storybook/pull/2581)
 -   Upgraded `karma-coverage-istanbul-reporter` in `examples/angular-cli` from "1.3.1" to "1.3.3" [#2581](https://github.com/storybooks/storybook/pull/2581)
 
-# 3.3.1
+## 3.3.1
 
 2017-December-26
 
@@ -3354,7 +3398,7 @@ In addition to the changes listed here, also contains fixes from [3.3.5](#335) a
 
 -   Add migration note about #2570 [#2571](https://github.com/storybooks/storybook/pull/2571)
 
-# 3.3.0
+## 3.3.0
 
 2017-December-26
 
@@ -3562,7 +3606,7 @@ We'll do a better job of getting out smaller releases next time around. ;-)
 
 </details>
 
-# 3.3.0-rc.1
+## 3.3.0-rc.1
 
 2017-December-26
 
@@ -3607,7 +3651,7 @@ We'll do a better job of getting out smaller releases next time around. ;-)
 
 </details>
 
-# 3.3.0-rc.0
+## 3.3.0-rc.0
 
 2017-December-23
 
@@ -3619,7 +3663,7 @@ We'll do a better job of getting out smaller releases next time around. ;-)
 
 -   UPGRADE jest & react-native [#2542](https://github.com/storybooks/storybook/pull/2542)
 
-# 3.3.0-alpha.6
+## 3.3.0-alpha.6
 
 2017-December-23
 
@@ -3711,7 +3755,7 @@ We'll do a better job of getting out smaller releases next time around. ;-)
 
 </details>
 
-# 3.3.0-alpha.4
+## 3.3.0-alpha.4
 
 2017-November-22
 
@@ -3720,7 +3764,7 @@ We'll do a better job of getting out smaller releases next time around. ;-)
 -   Fix HMR by saving the preview frame URL as the story changes [#2349](https://github.com/storybooks/storybook/pull/2349)
 -   Fix CLI babel transpilation [#2350](https://github.com/storybooks/storybook/pull/2350)
 
-# 3.3.0-alpha.3
+## 3.3.0-alpha.3
 
 2017-November-07
 
@@ -3763,7 +3807,7 @@ We'll do a better job of getting out smaller releases next time around. ;-)
 -   React-Native - Docs - Add Issues section for Android Emulator [#2078](https://github.com/storybooks/storybook/pull/2078)
 -   Upgrade eslint-config-airbnb and make it pass [#2212](https://github.com/storybooks/storybook/pull/2212)
 
-# 3.3.0-alpha.2
+## 3.3.0-alpha.2
 
 2017-October-03
 
@@ -3815,7 +3859,7 @@ We'll do a better job of getting out smaller releases next time around. ;-)
 
 -   Add config for dependencies.io [#1770](https://github.com/storybooks/storybook/pull/1770)
 
-# 3.3.0-alpha.0
+## 3.3.0-alpha.0
 
 2017-September-06
 
@@ -3865,7 +3909,7 @@ We'll do a better job of getting out smaller releases next time around. ;-)
 -   Update eslint-plugin-jest to the latest version 🚀 [#1795](https://github.com/storybooks/storybook/pull/1795)
 -   Update lerna to the latest version 🚀 [#1768](https://github.com/storybooks/storybook/pull/1768)
 
-# 3.2.19
+## 3.2.19
 
 2017-December-23
 
@@ -3945,7 +3989,7 @@ We'll do a better job of getting out smaller releases next time around. ;-)
 
 </details>
 
-# 3.2.18
+## 3.2.18
 
 2017-December-18
 
@@ -4119,7 +4163,7 @@ We'll do a better job of getting out smaller releases next time around. ;-)
 
 </details>
 
-# 3.2.17
+## 3.2.17
 
 2017-December-03
 
@@ -4234,7 +4278,7 @@ We'll do a better job of getting out smaller releases next time around. ;-)
 
 </details>
 
-# 3.2.16
+## 3.2.16
 
 2017-November-15
 
@@ -4292,7 +4336,7 @@ We'll do a better job of getting out smaller releases next time around. ;-)
 
 </details>
 
-# 3.2.15
+## 3.2.15
 
 2017-November-10
 
@@ -4333,7 +4377,7 @@ We'll do a better job of getting out smaller releases next time around. ;-)
 
 </details>
 
-# 3.2.14
+## 3.2.14
 
 2017-November-01
 
@@ -4384,7 +4428,7 @@ We'll do a better job of getting out smaller releases next time around. ;-)
 
 </details>
 
-# 3.2.13
+## 3.2.13
 
 2017-October-20
 
@@ -4475,7 +4519,7 @@ We'll do a better job of getting out smaller releases next time around. ;-)
 
 </details>
 
-# 3.2.12
+## 3.2.12
 
 2017-October-02
 
@@ -4521,7 +4565,7 @@ We'll do a better job of getting out smaller releases next time around. ;-)
 
 </details>
 
-# 3.2.11
+## 3.2.11
 
 2017-September-27
 
@@ -4538,7 +4582,7 @@ We'll do a better job of getting out smaller releases next time around. ;-)
 
 -   Updated release process documentation [#1882](https://github.com/storybooks/storybook/pull/1882)
 
-# 3.2.10
+## 3.2.10
 
 2017-September-22
 
@@ -4577,7 +4621,7 @@ We'll do a better job of getting out smaller releases next time around. ;-)
 -   Smoke test master [#1801](https://github.com/storybooks/storybook/pull/1801)
 -   Fixed Jest warnings [#1744](https://github.com/storybooks/storybook/pull/1744)
 
-# 3.2.9
+## 3.2.9
 
 2017-August-26
 
@@ -4597,7 +4641,7 @@ We'll do a better job of getting out smaller releases next time around. ;-)
 
 -   Update lerna to the latest version 🚀 [#1727](https://github.com/storybooks/storybook/pull/1727)
 
-# 3.2.8
+## 3.2.8
 
 2017-August-23
 
@@ -4610,7 +4654,7 @@ We'll do a better job of getting out smaller releases next time around. ;-)
 
 -   Add caveat about knobs date defaultValue [#1719](https://github.com/storybooks/storybook/pull/1719)
 
-# 3.2.7
+## 3.2.7
 
 2017-August-23
 
@@ -4626,7 +4670,7 @@ We'll do a better job of getting out smaller releases next time around. ;-)
 -   Enable eslint for vue-related stuff [#1715](https://github.com/storybooks/storybook/pull/1715)
 -   CLI: ensure explicit dependency on `prop-types` for RN [#1714](https://github.com/storybooks/storybook/pull/1714)
 
-# 3.2.6
+## 3.2.6
 
 2017-August-22
 
@@ -4662,7 +4706,7 @@ We'll do a better job of getting out smaller releases next time around. ;-)
 -   Upgrade react-native-compat to avoid PropTypes warnings [#1673](https://github.com/storybooks/storybook/pull/1673)
 -   Change React.PropTypes to prop-types [#1674](https://github.com/storybooks/storybook/pull/1674) [#1710](https://github.com/storybooks/storybook/pull/1710)
 
-# 3.2.5
+## 3.2.5
 
 2017-August-16
 
@@ -4681,7 +4725,7 @@ We'll do a better job of getting out smaller releases next time around. ;-)
 
 -   Upgrade react-modal to v2.2.4 [#1666](https://github.com/storybooks/storybook/pull/1666)
 
-# 3.2.4
+## 3.2.4
 
 2017-August-12
 
@@ -4706,7 +4750,7 @@ We'll do a better job of getting out smaller releases next time around. ;-)
 -   Use ReactModal for search box [#1548](https://github.com/storybooks/storybook/pull/1548)
 -   Limit react versions to >=15 [#1613](https://github.com/storybooks/storybook/pull/1613)
 
-# 3.2.3
+## 3.2.3
 
 2017-August-01
 
@@ -4719,7 +4763,7 @@ We'll do a better job of getting out smaller releases next time around. ;-)
 
 -   Add short description to addon-options readme [#1566](https://github.com/storybooks/storybook/pull/1566)
 
-# 3.2.2
+## 3.2.2
 
 2017-July-31
 
@@ -4727,7 +4771,7 @@ We'll do a better job of getting out smaller releases next time around. ;-)
 
 -   Fixed build-storybook for vue [#1564](https://github.com/storybooks/storybook/pull/1564)
 
-# 3.2.1
+## 3.2.1
 
 2017-July-31
 
@@ -4741,7 +4785,7 @@ We'll do a better job of getting out smaller releases next time around. ;-)
 -   Fix typo with Vue README referring to react [#1556](https://github.com/storybooks/storybook/pull/1556)
 -   Add state-setting FAQ [#1559](https://github.com/storybooks/storybook/pull/1559)
 
-# 3.2.0
+## 3.2.0
 
 2017-July-31
 
@@ -4808,7 +4852,7 @@ Plus many more features, documentation improvements, and bugfixes below!
 -   Remove upper bound on react-native peerDependency [#1424](https://github.com/storybooks/storybook/pull/1424)
 -   Bump `react-split-pane` version [#1495](https://github.com/storybooks/storybook/pull/1495)
 
-# 3.1.9
+## 3.1.9
 
 2017-July-16
 
@@ -4834,7 +4878,7 @@ Plus many more features, documentation improvements, and bugfixes below!
 -   Update lerna to the latest version 🚀 [#1423](https://github.com/storybooks/storybook/pull/1423)
 -   Pin gatsby version and upgrade gh-pages [#1462](https://github.com/storybooks/storybook/pull/1462)
 
-# 3.1.8
+## 3.1.8
 
 2017-July-06
 
@@ -4853,7 +4897,7 @@ Plus many more features, documentation improvements, and bugfixes below!
 -   Support webpack 3.0.0 [#1410](https://github.com/storybooks/storybook/pull/1410)
 -   Update react inspector to fix #1385 [#1408](https://github.com/storybooks/storybook/pull/1408)
 
-# 3.1.7
+## 3.1.7
 
 2017-June-28
 
@@ -4866,7 +4910,7 @@ Plus many more features, documentation improvements, and bugfixes below!
 
 -   Document Storybook release process [#1348](https://github.com/storybooks/storybook/pull/1348)
 
-# 3.1.6
+## 3.1.6
 
 2017-June-26
 
@@ -4888,7 +4932,7 @@ Plus many more features, documentation improvements, and bugfixes below!
 
 -   Update lint-staged to the latest version 🚀 [#1315](https://github.com/storybooks/storybook/pull/1315)
 
-# 3.1.5
+## 3.1.5
 
 2017-June-22
 
@@ -4913,7 +4957,7 @@ Plus many more features, documentation improvements, and bugfixes below!
 -   Use a pack -> install technique to recreate local packages [#1332](https://github.com/storybooks/storybook/pull/1332)
 -   Import demo components from @storybook/react [#1303](https://github.com/storybooks/storybook/pull/1303)
 
-# 3.1.4
+## 3.1.4
 
 2017-June-15
 
@@ -4931,7 +4975,7 @@ Plus many more features, documentation improvements, and bugfixes below!
 
 -   Add versions plugin to docs [#1269](https://github.com/storybooks/storybook/pull/1269)
 
-# 3.1.3
+## 3.1.3
 
 2017-June-10
 
@@ -4939,7 +4983,7 @@ Plus many more features, documentation improvements, and bugfixes below!
 
 -   Fix `storybook-build` manager-head.html bug [#1248](https://github.com/storybooks/storybook/pull/1248)
 
-# 3.1.2
+## 3.1.2
 
 Minor features including a new "events" addon, as well as the usual bugfixes, cleanup, etc.
 
@@ -4976,7 +5020,7 @@ Minor features including a new "events" addon, as well as the usual bugfixes, cl
 -   Update babel docgen plugin to generate docs for React.createClass and createReactClass [#1206](https://github.com/storybooks/storybook/pull/1206)
 -   Update `marksy` dependecy due broken 1.1.0 version [#1204](https://github.com/storybooks/storybook/pull/1204)
 
-# 3.0.1
+## 3.0.1
 
 Minor bug fixes and documentation updates post 3.0.0 release.
 
@@ -5006,7 +5050,7 @@ Minor bug fixes and documentation updates post 3.0.0 release.
 
 -   Replaced deprecated `markdown-to-react-components` with `marksy` [#1188](https://github.com/storybooks/storybook/pull/1188)
 
-# 3.0.0
+## 3.0.0
 
 Storybook 3.0 is our first fully community-driven release! Notable changes:
 
@@ -5127,11 +5171,11 @@ Storybook 3.0 is our first fully community-driven release! Notable changes:
 
 </details>
 
-# v2.35.3
+## v2.35.3
 
 Allow customConfig to override devtool. [PR668](https://github.com/storybooks/react-storybook/pull/668)
 
-# v2.35.2
+## v2.35.2
 
 03-January-2017
 
@@ -5139,11 +5183,11 @@ Fixes issue [#601](https://github.com/storybooks/react-storybook/issues/601) whe
 
 This release comes with the updated `babel-plugin-react-docgen`.
 
-# v2.35.1
+## v2.35.1
 
 -   Revert [PR653](https://github.com/storybooks/react-storybook/pull/653) where it's causing HMR to not working properly.
 
-# v2.35.0
+## v2.35.0
 
 18-December-2016
 
@@ -5151,90 +5195,90 @@ This release comes with the updated `babel-plugin-react-docgen`.
 -   Update css-loader dependency [PR648](https://github.com/storybooks/react-storybook/pull/648)
 -   Check if stories are loaded from Jest [PR644](https://github.com/storybooks/react-storybook/pull/644)
 
-# v2.34.0
+## v2.34.0
 
 05-December-2016
 
 Open the express router for developers (middleware.js file). [PR435](https://github.com/storybooks/react-storybook/pull/435)
 
-# v2.33.1
+## v2.33.1
 
 01-December-2016
 
 Update Typescript definition file for global addDecorator. [PR634](https://github.com/storybooks/react-storybook/pull/634)
 
-# v2.33.0
+## v2.33.0
 
 28-November-2016
 
 Completely avoid re-rendering the preview iframe. [PR631](https://github.com/storybooks/react-storybook/pull/631)
 
-# v2.32.2
+## v2.32.2
 
 28-November-2016
 
 Update postmsg channel module version [PR627](https://github.com/storybooks/react-storybook/pull/627)
 
-# v2.32.1
+## v2.32.1
 
 22-November-2016
 
 Add support for react_perf comes with React 15.4.0. [PR623](https://github.com/storybooks/react-storybook/pull/623)
 
-# v2.32.0
+## v2.32.0
 
 Incorrect publish (error when running `npm publish`)
 
-# v2.31.0
+## v2.31.0
 
 20-November-2016
 
 Add the react-storybook version to the build output. [PR621](https://github.com/storybooks/react-storybook/pull/621)
 
-# v2.30.1
+## v2.30.1
 
 17-November-2016
 
 Update the postmsg channel module to fix issue [#555](https://github.com/storybooks/react-storybook/issues/555) with [PR611](https://github.com/storybooks/react-storybook/pull/611)
 
-# v2.30.0
+## v2.30.0
 
 16-November-2016
 
 Update to the new Storybook UI which doesn't use Redux.
 
-# v2.29.7
+## v2.29.7
 
 11-November-2016
 
 Update @kadira/storybook-ui to the latest.
 
-# v2.29.6
+## v2.29.6
 
 10-November-2016
 
 Fix a typo in the story syntax error messages. [PR610](https://github.com/storybooks/react-storybook/pull/610)
 
-# v2.29.5
+## v2.29.5
 
 09-November-2016
 
 Check if regex and regex.test is available before calling it. [PR608](https://github.com/storybooks/react-storybook/pull/608)
 
-# v2.29.3
+## v2.29.3
 
 08-November-2016
 
 Update webpack-hot-middleware to version 2.13.2 to fix the issue [#543](https://github.com/storybooks/react-storybook/issues/543).
 
-# v2.29.3
+## v2.29.3
 
 03-November-2016
 
 Fix a regression caused by v2.29.2.
 There was a text called undefined listed always on the top of the preview.
 
-# v2.29.2
+## v2.29.2
 
 03-November-2016
 
@@ -5246,33 +5290,33 @@ Add various fixes.
 -   Update postcss-loader to v1.1.0 [PR599](https://github.com/storybooks/react-storybook/pull/599)
 -   fix for `module.hot` is not available in a static build [PR600](https://github.com/storybooks/react-storybook/pull/600)
 
-# v2.29.1
+## v2.29.1
 
 03-November-2016
 
 Update babel-plugin-react-docgen to v1.4.1 to fix HOC [issue](https://github.com/kadirahq/babel-plugin-react-docgen/issues/19)
 
-# v2.29.0
+## v2.29.0
 
 01-November-2016
 
 Update babel-plugin-react-docgen to 1.4.0.
 This will fix some of the compilation issues such as #580.
 
-# v2.28.1
+## v2.28.1
 
 28-October-2016
 
 Remove preview decorator support. [PR583](https://github.com/storybooks/react-storybook/pull/583).
 
-# v2.28.0
+## v2.28.0
 
 28-October-2016
 
 Add preview decorator support. [PR582](https://github.com/storybooks/react-storybook/pull/582).
 This will help us bring storybook designer with some great power.
 
-# v2.27.0
+## v2.27.0
 
 27-October-2016
 
@@ -5284,7 +5328,7 @@ Add a few usability improvements to Storybook.
 -   Update `babel-preset-react-app` to the latest. [PR576](https://github.com/storybooks/react-storybook/pull/576)
 -   Ship `json-loader` by default. [PR575](https://github.com/storybooks/react-storybook/pull/575)
 
-# v2.26.0
+## v2.26.0
 
 24-October-2016
 
@@ -5294,13 +5338,13 @@ Get some new features from CRA.
 -   Allow to use postcss for CSS @imports [PR564](https://github.com/storybooks/react-storybook/pull/564)
 -   Use process.env as a proper object [PR565](https://github.com/storybooks/react-storybook/pull/565)
 
-# v2.25.1
+## v2.25.1
 
 23-October-2016
 
 Add a potential fix to [558](https://github.com/storybooks/react-storybook/issues/558) by updating babel-plugin-react-docgen to the latest(v1.3.2).
 
-# v2.25.0
+## v2.25.0
 
 21-October-2016
 
@@ -5312,25 +5356,25 @@ With this:
 
 Additionally, added `yarn.lock`.
 
-# v2.24.1
+## v2.24.1
 
 19-October-2016
 
 Do not show git command output. [PR554](https://github.com/storybooks/react-storybook/pull/554)
 
-# v2.24.0
+## v2.24.0
 
 07-October-2016
 
 -   Export git repository info to support custom tool integrations [PR536](https://github.com/storybooks/react-storybook/pull/536)
 
-# v2.23.0
+## v2.23.0
 
 06-October-2016
 
 -   Remove the experimental database addon from react-storybook [PR535](https://github.com/storybooks/react-storybook/pull/535)
 
-# v2.22.0
+## v2.22.0
 
 05-October-2016
 
@@ -5339,80 +5383,80 @@ Add some nice development experiment based on suggestion from Dan Abramov.
 -   Set a color to the Storybook URL in the console. [PR533](https://github.com/storybooks/react-storybook/pull/533)
 -   Add better error message when there's no React element in the story. [PR534](https://github.com/storybooks/react-storybook/pull/534)
 
-# v2.21.0
+## v2.21.0
 
 05-October-2016
 
 -   Get the latest features from CRA including NODE_PATH support, public folder support and some other minor changes. [#468](https://github.com/storybooks/react-storybook/issues/468)
 -   Also bumped `@kadira/storybook-channel-postmsg` to `^1.0.3`
 
-# v2.20.1
+## v2.20.1
 
 28-September-2016
 
 -   Fix story kind order bug [PR499](https://github.com/storybooks/react-storybook/pull/499)
 -   Prefix config environment variables [PR503](https://github.com/storybooks/react-storybook/pull/503)
 
-# v2.20.0
+## v2.20.0
 
 26-September-2016
 
 -   Use postMessage channel [PR498](https://github.com/storybooks/react-storybook/pull/498)
 -   Support dynamic panel titles [PR497](https://github.com/storybooks/react-storybook/pull/497)
 
-# v2.19.0
+## v2.19.0
 
 26-September-2016
 
 -   Support layout options [PR494](https://github.com/storybooks/react-storybook/pull/494)
 -   Update Typescript definitions [PR491](https://github.com/storybooks/react-storybook/pull/491) and [PR493](https://github.com/storybooks/react-storybook/pull/493)
 
-# v2.18.1
+## v2.18.1
 
 23-September-2016
 
 -   Stop uglifyjs from mangling names [PR483](https://github.com/storybooks/react-storybook/pull/483)
 
-# v2.18.0
+## v2.18.0
 
 23-September-2016
 
 -   Remove `STORYBOOK_` prefix from config env [PR481](https://github.com/storybooks/react-storybook/pull/481)
 
-# v2.17.0
+## v2.17.0
 
 22-September-2016
 
 -   Add support for StoryShots. [PR479](https://github.com/storybooks/react-storybook/pull/479)
 -   Fix some typos: [PR477](https://github.com/storybooks/react-storybook/pull/477) & [PR478](https://github.com/storybooks/react-storybook/pull/478)
 
-# v2.16.1
+## v2.16.1
 
 21-September-2016
 
 -   Fix the 404 error for `addon-db.json` file [PR472](https://github.com/storybooks/react-storybook/pull/472)
 -   Serve/Bundle the storybook favicon [PR473](https://github.com/storybooks/react-storybook/pull/473)
 
-# v2.16.0
+## v2.16.0
 
 21-September-2016
 
 -   Move the babel config loading logic into a seperate file. [PR469](https://github.com/storybooks/react-storybook/pull/469)
 -   Update airbnd eslint rules to the latest.
 
-# v2.15.1
+## v2.15.1
 
 19-September-2016
 
 Add a fix to webpack custom resolve.alias not working. [PR465](https://github.com/storybooks/react-storybook/pull/465)
 
-# v2.15.0
+## v2.15.0
 
 19-September-2016
 
 -   Use @kadira/storybook-addons as a resolve.alias. So, we can support addons for NPM2 too. [PR462](https://github.com/storybooks/react-storybook/pull/462)
 
-# v2.14.0
+## v2.14.0
 
 14-September-2016
 
@@ -5421,26 +5465,26 @@ Add a fix to webpack custom resolve.alias not working. [PR465](https://github.co
 -   Allow to reload if HMR goes crazy. [PR448](https://github.com/storybooks/react-storybook/pull/448)
 -   Add support to get custom env variables. [PR450](https://github.com/storybooks/react-storybook/pull/450)
 
-# v2.13.1
+## v2.13.1
 
 14-September-2016
 
 -   Fix 404 error when db file does not exist [PR449](https://github.com/storybooks/react-storybook/pull/449)
 
-# v2.13.0
+## v2.13.0
 
 9-September-2016
 
 -   Fix [#443](https://github.com/storybooks/react-storybook/issues/443) where the static version of Storybook doesn't like Safari.
 -   Update postcss-loader to 0.13.0.
 
-# v2.12.1
+## v2.12.1
 
 8-September-2016
 
 -   Parse static directory provided by env as a list. [PR436](https://github.com/storybooks/react-storybook/pull/436)
 
-# v2.12.0
+## v2.12.0
 
 8-September-2016
 
@@ -5448,86 +5492,86 @@ Add a fix to webpack custom resolve.alias not working. [PR465](https://github.co
 -   Update css-loader to version 0.25.0. [PR427](https://github.com/storybooks/react-storybook/pull/427)
 -   Get the head.html values for every page request. [PR432](https://github.com/storybooks/react-storybook/pull/432)
 
-# v2.11.0
+## v2.11.0
 
 4-September-2016
 
 -   Remove babel-polyfill since we don't use it.
 -   Update versions with the help from greenkeeper. [PR421](https://github.com/storybooks/react-storybook/pull/421)
 
-# v2.10.0
+## v2.10.0
 
 3-September-2016
 
 -   Adding airbnb-js-shims again. [PR419](https://github.com/storybooks/react-storybook/pull/419)
 
-# v2.9.1
+## v2.9.1
 
 2-September-2016.
 
 -   Use the config directory to store the addon database file [PR418](https://github.com/storybooks/react-storybook/pull/418).
 
-# v2.9.0
+## v2.9.0
 
 2-September-2016.
 
 -   Copy the addon-db.json file when building static storybooks [PR417](https://github.com/storybooks/react-storybook/pull/417).
 
-# v2.8.0
+## v2.8.0
 
 2-September-2016.
 
 -   Update @kadira/storybook to get the clean query params feature. See [storybook-ui-PR37](https://github.com/kadirahq/storybook-ui/pull/37)
 
-# v2.7.0
+## v2.7.0
 
 1-September-2016
 
 -   Add addon database feature [PR415](https://github.com/storybooks/react-storybook/pull/415).
 
-# v2.6.1
+## v2.6.1
 
 31-August-2016
 
 -   Bring back HMR dev logs. [PR412](https://github.com/storybooks/react-storybook/pull/412).
 
-# v2.6.0
+## v2.6.0
 
 30-August-2016
 
 -   Allow start/build params from env variables. [PR413](https://github.com/storybooks/react-storybook/pull/413)
 
-# v2.5.2
+## v2.5.2
 
 29-August-2016
 
 -   Remove the use of babel-runtime/core-js modules. [PR410](https://github.com/storybooks/react-storybook/pull/410)
 
-# v2.5.1
+## v2.5.1
 
 24-August-2016
 
 -   Update @kadira/storybook-ui to v3.3.2
 
-# v2.5.0
+## v2.5.0
 
 24-August-2016
 
 -   We are no longer shipping extra polyfills anymore. [PR402](https://github.com/storybooks/react-storybook/pull/402)
 
-# v2.4.2
+## v2.4.2
 
 24-August-2016
 
 -   Allow file-loader URLs to work on subpaths. [PR401](https://github.com/storybooks/react-storybook/pull/401)
 
-# v2.4.1
+## v2.4.1
 
 24-August-2016
 
 -   Bump @kadira/storybook ui to v3.3.1 to fix some UI related issues.
 
-# v2.4.0
+## v2.4.0
 
 23-August-2016
 
@@ -5536,32 +5580,32 @@ Add a fix to webpack custom resolve.alias not working. [PR465](https://github.co
 -   Add webpack2 support by changing the use of OccurenceOrderPlugin. [PR397](https://github.com/storybooks/react-storybook/pull/397)
 -   Use @kadira/storybook-ui 2.3.0, which has new APIs to set URL for addons.
 
-# v2.3.0
+## v2.3.0
 
 16-August-2016
 
 -   Implement anonymous usage tracking. [PR384](https://github.com/storybooks/react-storybook/pull/384)
 
-# v2.2.3
+## v2.2.3
 
 15-August-2016
 
 -   Add a hash to media file's filename. Otherwise, it'll cause issues when there are multiple images with the same filename but in different directories. [PR380](https://github.com/storybooks/react-storybook/pull/380)
 
-# v2.2.2
+## v2.2.2
 
 10-August-2016
 
 -   Remove unused extract-text-webpack-plugin. This will add webpack2 support. [PR369](https://github.com/storybooks/react-storybook/pull/369).
 
-# v2.2.1
+## v2.2.1
 
 09-August-2016
 
 -   Use @kadira/storybook-channel modules. [#PR359](https://github.com/storybooks/react-storybook/pull/359).
 -   Update @kadira/storybook-ui to the latest.
 
-# v2.2.0
+## v2.2.0
 
 05-August-2016
 
@@ -5572,7 +5616,7 @@ This release bring some webpack config related optimizations and the NPM2 suppor
 -   Add NPM2 support. [PR356](https://github.com/storybooks/react-storybook/pull/356)
 -   Add autofixer defaults. [PR357](https://github.com/storybooks/react-storybook/pull/357)
 
-# v2.1.1
+## v2.1.1
 
 03-August-2016
 
@@ -5581,7 +5625,7 @@ Remove default webpack config for all config types. [PR348](https://github.com/s
 Now we only use the Create React App based config if there's no custom webpack config.
 This will fix issues like [#347](https://github.com/storybooks/react-storybook/issues/347).
 
-# v2.1.0
+## v2.1.0
 
 02-August-2016
 
@@ -5597,7 +5641,7 @@ Unfortunately, as of this version, there are no docs for this feature. But, you
 
 Have a look at [here](https://github.com/storybooks/react-storybook/blob/master/src/server/config.js#L88) to how to configure addons.
 
-# v2.0.0
+## v2.0.0
 
 01-August-2016
 
@@ -5611,151 +5655,151 @@ This is the starting of the next major version of Storybook. This version is alm
     -   Continue support for babel's stage-0 preset and add es2016 preset.
 -   Update @kadira/storybook-ui to v2.6.1 to remove some React warnings.
 
-# v1.41.0
+## v1.41.0
 
 -   Fix nodejs require errors [#337](https://github.com/storybooks/react-storybook/pull/337).
 -   Add getStorybook method to client API [#332](https://github.com/storybooks/react-storybook/pull/332).
 
-# v1.40.0
+## v1.40.0
 
 -   Fix duplicate decorator bug [#335](https://github.com/storybooks/react-storybook/pull/335).
 
-# v1.39.1
+## v1.39.1
 
 -   Update babel packages [#325](https://github.com/storybooks/react-storybook/pull/325).
 -   Hide HMR info logs [#331](https://github.com/storybooks/react-storybook/pull/331).
 
-# v1.39.0
+## v1.39.0
 
 -   Update @kadira/storybook-ui to get features from [v2.5.0](https://github.com/kadirahq/storybook-ui/blob/master/CHANGELOG.md#v250) and [v2.6.0](https://github.com/kadirahq/storybook-ui/blob/master/CHANGELOG.md#v260).
 
-# v1.38.3
+## v1.38.3
 
 -   Add names for action and linkTo functions [#321](https://github.com/storybooks/react-storybook/pull/321).
 
-# v1.38.2
+## v1.38.2
 
 -   Fix error in prepublish script [#319](https://github.com/storybooks/react-storybook/pull/319).
 
-# v1.38.1
+## v1.38.1
 
 -   Improve Windows support by writing prepublish script using shelljs [#308](https://github.com/storybooks/react-storybook/pull/308).
 
-# v1.38.0
+## v1.38.0
 
 -   v1.37.0 was a nightmare since it contains the npm-shrinkwrap.json. Fixed by removing it. See: [#306](https://github.com/storybooks/react-storybook/issues/306) and [#305](https://github.com/storybooks/react-storybook/pull/305).
 
-# v1.37.0
+## v1.37.0
 
 -   Update @kadira/storybook-ui to 2.4.0
 
-# v1.36.0
+## v1.36.0
 
 -   Support watchOptions configuration. See: [PR287](https://github.com/storybooks/react-storybook/pull/287)
 
-# v1.35.2
+## v1.35.2
 
 -   Add missing font-face to the ErrorDisplay's heading.
 
-# v1.35.1
+## v1.35.1
 
 -   Fix issue related to bad error handling. See issue [#275](https://github.com/storybooks/react-storybook/issues/275):
 
-# v1.35.0
+## v1.35.0
 
 -   Add fuzzy search powered search box and Redux DevTools support via [@kadira/storybook-ui@2.3.0](https://github.com/kadirahq/storybook-ui/blob/master/CHANGELOG.md#v230).
 
-# v1.34.1
+## v1.34.1
 
 -   Don't always override NODE_ENV in build-storybook. [PR272](https://github.com/storybooks/react-storybook/pull/272)
 
-# v1.34.0
+## v1.34.0
 
 -   Use storybook-ui v2.2.0 which puts shortcut state into the URL.
 
-# v1.33.0
+## v1.33.0
 
 -   Introduce an [extension API](https://github.com/storybooks/react-storybook/blob/master/docs/extensions.md) for Storybook. See: [PR258](https://github.com/storybooks/react-storybook/pull/258)
 
-# v1.32.1
+## v1.32.1
 
 -   Extend @kadira/storybook-ui provider from it's base Provider.
 
-# v1.32.0
+## v1.32.0
 
 -   Use @kadira/storybook-ui as the manager UI with the implemented provider for React. See `client/manager` for more info.
 
-# v1.31.0
+## v1.31.0
 
 -   Pass a `context` argument to stories [PR250](https://github.com/storybooks/react-storybook/pull/250)
 
-# v1.30.0
+## v1.30.0
 
 -   Fuzzy search kinds [PR247](https://github.com/storybooks/react-storybook/pull/247)
 
-# v1.29.5
+## v1.29.5
 
 -   Update dependency version to fix filter crash [PR246](https://github.com/storybooks/react-storybook/pull/246)
 
-# v1.29.4
+## v1.29.4
 
 -   Protect index.html/iframe.html from being overwritten [PR243](https://github.com/storybooks/react-storybook/pull/243)
 
-# v1.29.3
+## v1.29.3
 
 -   Update @kadira/storybook-core version [PR241](https://github.com/storybooks/react-storybook/pull/241)
 -   Add es6-shim by default [PR238](https://github.com/storybooks/react-storybook/pull/238)
 
-# v1.29.2
+## v1.29.2
 
 -   Use url.resolve instead of path.join [PR240](https://github.com/storybooks/react-storybook/pull/240)
 
-# v1.29.1
+## v1.29.1
 
 -   Copy missed manager.js.map file on static build [PR236](https://github.com/storybooks/react-storybook/pull/236)
 
-# v1.29.0
+## v1.29.0
 
 -   Multiple static dirs (comma separated) [PR229](https://github.com/storybooks/react-storybook/pull/229)
 
-# v1.28.5
+## v1.28.5
 
 -   Support ECMAScript stage-0 [PR228](https://github.com/storybooks/react-storybook/pull/228) to fix [Issue #227](https://github.com/storybooks/react-storybook/issues/227)
 
-# v1.28.4
+## v1.28.4
 
 -   Support custom webpack public path for dev-server and static build started by [PR226](https://github.com/storybooks/react-storybook/pull/226)
 
-# v1.28.3
+## v1.28.3
 
 -   Revert [PR226](https://github.com/storybooks/react-storybook/pull/226)
 
-# v1.28.2
+## v1.28.2
 
 -   Support custom webpack publicPath [PR226](https://github.com/storybooks/react-storybook/pull/226)
 
-# v1.28.1
+## v1.28.1
 
 -   Add charset meta tags to HTML heads [PR216](https://github.com/storybooks/react-storybook/pull/216)
 
-# v1.28.0
+## v1.28.0
 
 -   Moved storybook serving code into a middleware to support more advanced use cases.
 -   Refactored dev server to use storybook middleware [PR211](https://github.com/storybooks/react-storybook/pull/211)
 
-# v1.27.0
+## v1.27.0
 
 -   Move modules to storybook-core repo. [PR196](https://github.com/storybooks/react-storybook/pull/196)
 -   Add stack-source-map again only for Chrome to get better error stacks.
 -   Add ability to control the hostname. See [PR195](https://github.com/storybooks/react-storybook/pull/195) and [PR198](https://github.com/storybooks/react-storybook/pull/198)
 
-# v1.26.0
+## v1.26.0
 
 12-May-2016
 
 -   Ensure asset directory exists in the static-builder.
 
-# v1.25.0
+## v1.25.0
 
 11-May-2016
 
@@ -5767,7 +5811,7 @@ This is the starting of the next major version of Storybook. This version is alm
 -   Make left panel scrollable with keeping the filterbox always. See: [PR182](https://github.com/storybooks/react-storybook/pull/182).
 -   Add `qs` as a direct dependency as it's used in preview.
 
-# v1.24.0
+## v1.24.0
 
 10-May-2016
 
@@ -5775,34 +5819,34 @@ This is the starting of the next major version of Storybook. This version is alm
 -   Add scrolling support to the left panel. Fixes [#177](https://github.com/storybooks/react-storybook/issues/177).
 -   Remove NODE_ENV=production flag. Fixes [#158](https://github.com/storybooks/react-storybook/issues/158)
 
-# v1.23.0
+## v1.23.0
 
 09-May-2016
 
 -   Add shortcuts to jump to previous and next stories. See [PR176](https://github.com/storybooks/react-storybook/pull/176)
 -   Fix loader concatenation bug specially when custom config doesn't have a loaders section. [PR173](https://github.com/storybooks/react-storybook/pull/173)
 
-# v1.22.1
+## v1.22.1
 
 06-May-2016
 
 -   Add a potential fix for [#167](https://github.com/storybooks/react-storybook/issues/167)
     -   basically, this moved back babel-packages required by webpack.
 
-# v1.22.0
+## v1.22.0
 
 06-May-2016
 
 -   Improve the static builder time.
 
-# v1.21.0
+## v1.21.0
 
 06-May-2016
 
 -   Add configType argument to custom config function. See: [PR169](https://github.com/storybooks/react-storybook/pull/169)
 -   Add the unicode version of the Keyboard Shortcut Icon. See: [PR170](https://github.com/storybooks/react-storybook/pull/170)
 
-# v1.20.0
+## v1.20.0
 
 05-May-2016
 
@@ -5812,7 +5856,7 @@ This is the starting of the next major version of Storybook. This version is alm
 -   Remove some typo in docs. See: [PR154](https://github.com/storybooks/react-storybook/pull/154)
 -   Move UI testing libraries to devDependencies. See: [PR153](https://github.com/storybooks/react-storybook/pull/153)
 
-# v1.19.0
+## v1.19.0
 
 27-April-2016
 
@@ -5820,38 +5864,38 @@ This is the starting of the next major version of Storybook. This version is alm
 -   Remove self-closing div tag, which is invalid HTML. See: [PR148](https://github.com/storybooks/react-storybook/pull/148)
 -   Search for a .babelrc in the storybook config directory first, then the project root. See: [PR149](https://github.com/storybooks/react-storybook/pull/149)
 
-# v1.18.0
+## v1.18.0
 
 26-April-2016
 
 -   Link Storybook menu to the repo. See: [PR137](https://github.com/storybooks/react-storybook/pull/137)
 -   Implement keyboard shortcuts and fuzzy search. See: [PR141](https://github.com/storybooks/react-storybook/pull/141)
 
-# v1.17.2
+## v1.17.2
 
 25-April-2016
 
 -   Fix an error which only occurs on Firefox. See: [PR144](https://github.com/storybooks/react-storybook/pull/144)
 
-# v1.17.1
+## v1.17.1
 
 21-April-2016
 
 -   Fix a regression introduce by `v1.17.0`. See: [PR133](https://github.com/storybooks/react-storybook/pull/133)
 
-# v1.17.0
+## v1.17.0
 
 21-April-2016
 
 -   Check all the arguments passed to action for events. See: [PR132](https://github.com/storybooks/react-storybook/pull/132)
 
-# v1.16.1
+## v1.16.1
 
 21-April-2016
 
 -   Fix action logs highlighting issue, which comes as a regression of [PR126](https://github.com/storybooks/react-storybook/pull/126).
 
-# v1.16.0
+## v1.16.0
 
 20-April-2016
 
@@ -5859,37 +5903,37 @@ This is the starting of the next major version of Storybook. This version is alm
     -   Related issue: [#116](https://github.com/storybooks/react-storybook/issues/116)
     -   Related PR: [PR126](https://github.com/storybooks/react-storybook/pull/126)
 
-# v1.15.0
+## v1.15.0
 
 20-April-2016
 
 -   Improve action logger UI and increase max log count to 10. See [PR123](https://github.com/storybooks/react-storybook/pull/123)
 
-# v1.14.0
+## v1.14.0
 
 19-April-2016
 
 -   Add syntax highlights to the logger. See: [PR118](https://github.com/storybooks/react-storybook/pull/118)
 
-# v1.13.0
+## v1.13.0
 
 -   Add some UI test cases. See [PR103](https://github.com/storybooks/react-storybook/pull/103)
 -   Implement `.addDecorator()` API. See [PR115](https://github.com/storybooks/react-storybook/pull/115)
 -   Add code folding support. See [PR111](https://github.com/storybooks/react-storybook/pull/111)
 
-# v1.12.0
+## v1.12.0
 
 14-April-2016
 
 -   Add support for webpack module preLoaders. See: [PR107](https://github.com/storybooks/react-storybook/pull/107)
 
-# v1.11.0
+## v1.11.0
 
 13-April-2016
 
 -   Add support for React DevTools. See: [PR104](https://github.com/storybooks/react-storybook/pull/104)
 
-# v1.10.2
+## v1.10.2
 
 12-April-2016
 
@@ -5899,13 +5943,13 @@ Fix various issues related to static bundling.
 -   Use relative urls so, static sites can be host with paths (GH Pages)
 -   Identify SyntheticEvent using feature detection. UglifyJS mangal class names, so we can't use classnames to detect a SyntheticEvent in the static build.
 
-# v1.10.1
+## v1.10.1
 
 -   Don't serve index.html in static directory as a site index. See [PR100](https://github.com/storybooks/react-storybook/pull/100)
 -   Use cjson for parsing .babelrc files (support comments). See [PR98](https://github.com/storybooks/react-storybook/pull/98)
 -   Remove the dist directory before running babel to avoid older code. See [PR101](https://github.com/storybooks/react-storybook/pull/101)
 
-# v1.10.0
+## v1.10.0
 
 -   Add custom head support inside the iframe. See [PR77](https://github.com/storybooks/react-storybook/pull/77)
 -   Unmount components before rendering into DOM node. Fix: [#81](https://github.com/storybooks/react-storybook/issues/81)
@@ -5913,7 +5957,7 @@ Fix various issues related to static bundling.
 -   Fix search box's lineHeight to work with all the browsers. See: [PR94](https://github.com/storybooks/react-storybook/pull/94)
 -   Add the search box. See: [PR91](https://github.com/storybooks/react-storybook/pull/91).
 
-# v1.9.0
+## v1.9.0
 
 Add some minor improvements.
 
@@ -5921,48 +5965,48 @@ Add some minor improvements.
 -   Fix the React Warning about CSS property. See: [PR84](https://github.com/storybooks/react-storybook/pull/84)
 -   Transition on latest logged action. See: [PR80](https://github.com/storybooks/react-storybook/pull/80)
 
-# v1.8.0
+## v1.8.0
 
 -   Add story linking functionality.
     -   [Documentation](https://github.com/storybooks/react-storybook/blob/master/docs/api.md#linking-stories).
     -   Original feature request: [#50](https://github.com/storybooks/react-storybook/issues/50)
     -   Implementation: [PR86](https://github.com/storybooks/react-storybook/pull/86)
 
-# v1.7.0
+## v1.7.0
 
 -   Add support to React v15.0.0.
 
-# v1.6.0
+## v1.6.0
 
 -   Make scrollable layout. See: [PR](https://github.com/storybooks/react-storybook/pull/70)
 -   Add npm3 requirement to the `package.json`.
 -   Add `react` and `react-dom` to devDependencies.
 
-# v1.5.0
+## v1.5.0
 
 -   Add support for most of the custom webpack configuration. See [PR64](https://github.com/storybooks/react-storybook/pull/64)
 
-# v1.4.0
+## v1.4.0
 
 -   Add CLI option to specify the config dir. See [PR52](https://github.com/storybooks/react-storybook/pull/52).
 
-# v1.3.0
+## v1.3.0
 
 -   Load the `.babelrc` manually. Fixed: [#41](https://github.com/storybooks/react-storybook/issues/41)
 -   Add a better contributing guide. See [CONTRIBUTING.md](https://github.com/storybooks/react-storybook/blob/master/CONTRIBUTING.md)
 -   Add a development utility `npm run dev` which watches "src" directory and run `npm run prepublish`.
 
-# v1.2.0
+## v1.2.0
 
 -   Add a button to clear logs in the ActionLogger. This is requested in [PR21](https://github.com/storybooks/react-storybook/issues/21).
 -   Remove navigation list order hijacking. See [commit](https://github.com/storybooks/react-storybook/commit/166365fd38f51f79e69e028a1c11e2620eddcb99).
 -   Fix a typo in .gitignore. See [PR31](https://github.com/storybooks/react-storybook/pull/31).
 -   Add support for JSX. See [PR18](https://github.com/storybooks/react-storybook/pull/18).
 
-# v1.1.0
+## v1.1.0
 
 -   v1.0.0 was a mistake and it contains very old code. That's why we had to do a 1.1.0 release.
 
-# v1.0.0
+## v1.0.0
 
 -   Yeah!
diff --git a/LICENSE b/LICENSE
index 5b1c85124e..c9c6515841 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2018 Norbert de Langen ndelangen@me.com
+Copyright (c) 2017 Kadira Inc. <hello@kadira.io>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/README.md b/README.md
index 8a1e624c38..5aa5969efe 100644
--- a/README.md
+++ b/README.md
@@ -77,7 +77,7 @@ It runs a codemod to update all package names. Read all migration details in our
 
 For full documentation on using Storybook visit: [storybook.js.org](https://storybook.js.org)
 
-For additional help, join us [in our Discord](https://discord.gg/sMFvFsG/) or [Slack](https://now-examples-slackin-rrirkqohko.now.sh/)
+For additional help, join us [in our Discord](https://discord.gg/sMFvFsG) or [Slack](https://now-examples-slackin-rrirkqohko.now.sh/)
 
 ## Projects
 
@@ -110,6 +110,7 @@ For additional help, join us [in our Discord](https://discord.gg/sMFvFsG/) or [S
 | [actions](addons/actions/)                  | Log actions as users interact with components in the Storybook UI          |
 | [backgrounds](addons/backgrounds/)          | Let users choose backgrounds in the Storybook UI                           |
 | [centered](addons/centered/)                | Center the alignment of your components within the Storybook UI            |
+| [cssresources](addons/cssresources/)        | Dynamically add/remove css resources to the component iframe               |
 | [events](addons/events/)                    | Interactively fire events to components that respond to EventEmitter       |
 | [graphql](addons/graphql/)                  | Query a GraphQL server within Storybook stories                            |
 | [google-analytics](addons/google-analytics) | Reports google analytics on stories                                        |
diff --git a/addons/a11y/README.md b/addons/a11y/README.md
index df2c841e0f..12d34e4835 100755
--- a/addons/a11y/README.md
+++ b/addons/a11y/README.md
@@ -1,6 +1,6 @@
 # storybook-addon-a11y
 
-This storybook addon can be helpfull to make your UI components more accessibile.
+This storybook addon can be helpful to make your UI components more accessible.
 
 [Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)
 
diff --git a/addons/a11y/package.json b/addons/a11y/package.json
index b6e6dfb18a..b7f851190b 100644
--- a/addons/a11y/package.json
+++ b/addons/a11y/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "description": "a11y addon for storybook",
   "keywords": [
     "a11y",
@@ -29,10 +29,10 @@
   },
   "dependencies": {
     "@emotion/styled": "^0.10.6",
-    "@storybook/addons": "4.1.0-alpha.3",
-    "@storybook/client-logger": "4.1.0-alpha.3",
-    "@storybook/components": "4.1.0-alpha.3",
-    "@storybook/core-events": "4.1.0-alpha.3",
+    "@storybook/addons": "4.1.0-alpha.8",
+    "@storybook/client-logger": "4.1.0-alpha.8",
+    "@storybook/components": "4.1.0-alpha.8",
+    "@storybook/core-events": "4.1.0-alpha.8",
     "axe-core": "^3.1.2",
     "global": "^4.3.2",
     "prop-types": "^15.6.2"
diff --git a/addons/actions/package.json b/addons/actions/package.json
index 1fa35258fe..e310a3b7a6 100644
--- a/addons/actions/package.json
+++ b/addons/actions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "description": "Action Logger addon for storybook",
   "keywords": [
     "storybook"
@@ -26,9 +26,9 @@
     "@emotion/core": "^0.13.1",
     "@emotion/provider": "^0.11.2",
     "@emotion/styled": "^0.10.6",
-    "@storybook/addons": "4.1.0-alpha.3",
-    "@storybook/components": "4.1.0-alpha.3",
-    "@storybook/core-events": "4.1.0-alpha.3",
+    "@storybook/addons": "4.1.0-alpha.8",
+    "@storybook/components": "4.1.0-alpha.8",
+    "@storybook/core-events": "4.1.0-alpha.8",
     "fast-deep-equal": "^2.0.1",
     "global": "^4.3.2",
     "lodash": "^4.17.11",
diff --git a/addons/backgrounds/package.json b/addons/backgrounds/package.json
index bc4804def4..1ee8e39833 100644
--- a/addons/backgrounds/package.json
+++ b/addons/backgrounds/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "description": "A storybook addon to show different backgrounds for your preview",
   "keywords": [
     "addon",
@@ -28,9 +28,9 @@
   },
   "dependencies": {
     "@emotion/styled": "^0.10.6",
-    "@storybook/addons": "4.1.0-alpha.3",
-    "@storybook/components": "4.1.0-alpha.3",
-    "@storybook/core-events": "4.1.0-alpha.3",
+    "@storybook/addons": "4.1.0-alpha.8",
+    "@storybook/components": "4.1.0-alpha.8",
+    "@storybook/core-events": "4.1.0-alpha.8",
     "global": "^4.3.2",
     "prop-types": "^15.6.2",
     "util-deprecate": "^1.0.2"
diff --git a/addons/centered/package.json b/addons/centered/package.json
index adfeaef650..32e0b9da22 100644
--- a/addons/centered/package.json
+++ b/addons/centered/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-centered",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "description": "Storybook decorator to center components",
   "keywords": [
     "addon",
diff --git a/addons/cssresources/README.md b/addons/cssresources/README.md
new file mode 100644
index 0000000000..14bec5d981
--- /dev/null
+++ b/addons/cssresources/README.md
@@ -0,0 +1,63 @@
+# Storybook Addon Cssresources
+
+Storybook Addon Cssresources to switch between css resources at runtime for your story [Storybook](https://storybook.js.org).
+
+[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)
+
+![Storybook Addon Cssresources Demo](docs/demo.gif)
+
+## Installation
+
+```sh
+yarn add -D @storybook/addon-cssresources
+```
+
+## Configuration
+
+Then create a file called `addons.js` in your storybook config.
+
+Add following content to it:
+
+```js
+import '@storybook/addon-cssresources/register';
+```
+
+## Usage
+
+You need add the all the css resources at compile time using the `withCssResources` decorator. They can be added globally or per story. You can then choose which ones to load from the cssresources addon ui:
+
+```js
+// Import from @storybook/X where X is your framework
+import { configure, addDecorator, storiesOf } from '@storybook/react';
+import { withCssResources } from '@storybook/addon-cssresources';
+
+// global
+addDecorator(
+  withCssResources({
+    cssresources: [{
+        name: `bluetheme`,
+        code: `<style>body { background-color: lightblue; }</style>`,
+        picked: false,
+      },
+    ],
+  })
+);
+
+// per story
+storiesOf('Addons|Cssresources', module)
+  .addDecorator(
+    withCssResources({
+      cssresources: [{
+          name: `fontawesome`,
+          code: `<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"></link>`,
+          picked: true,
+        }, {
+          name: `whitetheme`,
+          code: `<style>.fa { color: #fff }</style>`,
+          picked: true,
+        },
+      ],
+    })
+  )
+  .add('Camera Icon', () => <i className="fa fa-camera-retro"> Camera Icon</i>);
+```
diff --git a/addons/cssresources/docs/demo.gif b/addons/cssresources/docs/demo.gif
new file mode 100644
index 0000000000..75bc3685ed
Binary files /dev/null and b/addons/cssresources/docs/demo.gif differ
diff --git a/addons/cssresources/package.json b/addons/cssresources/package.json
new file mode 100644
index 0000000000..2bf8bd19dc
--- /dev/null
+++ b/addons/cssresources/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "@storybook/addon-cssresources",
+  "version": "4.1.0-alpha.8",
+  "description": "A storybook addon to switch between css resources at runtime for your story",
+  "keywords": [
+    "addon",
+    "cssresources",
+    "react",
+    "storybook"
+  ],
+  "homepage": "https://storybook.js.org",
+  "bugs": {
+    "url": "https://github.com/storybooks/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybooks/storybook.git"
+  },
+  "license": "MIT",
+  "author": "nm123github",
+  "main": "dist/index.js",
+  "jsnext:main": "src/index.js",
+  "scripts": {
+    "prepare": "node ../../scripts/prepare.js"
+  },
+  "dependencies": {
+    "@emotion/styled": "0.10.6",
+    "@storybook/addons": "4.1.0-alpha.8",
+    "@storybook/components": "4.1.0-alpha.8",
+    "@storybook/core-events": "4.1.0-alpha.8",
+    "global": "^4.3.2",
+    "prop-types": "^15.6.2",
+    "react-syntax-highlighter": "^10.0.0",
+    "util-deprecate": "^1.0.2"
+  },
+  "peerDependencies": {
+    "react": "*"
+  }
+}
diff --git a/addons/cssresources/register.js b/addons/cssresources/register.js
new file mode 100644
index 0000000000..18cdafda57
--- /dev/null
+++ b/addons/cssresources/register.js
@@ -0,0 +1 @@
+require('./dist/register.js');
diff --git a/addons/cssresources/src/CssResourcePanel.js b/addons/cssresources/src/CssResourcePanel.js
new file mode 100644
index 0000000000..ca41679b80
--- /dev/null
+++ b/addons/cssresources/src/CssResourcePanel.js
@@ -0,0 +1,147 @@
+import { document, DOMParser } from 'global';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { monoFonts } from '@storybook/components';
+import styled from '@emotion/styled';
+
+import css from 'react-syntax-highlighter/dist/esm/languages/prism/css';
+import { darcula } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import SyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-light';
+
+SyntaxHighlighter.registerLanguage('css', css);
+
+const storybookIframe = 'storybook-preview-iframe';
+const addedElAttr = 'addedbycssresourcesaddon';
+
+// Taken from StoryPanel.js
+const highlighterTheme = {
+  ...darcula,
+  'pre[class*="language-"]': {
+    ...darcula['pre[class*="language-"]'],
+    margin: 'auto',
+    width: 'auto',
+    height: 'auto',
+    minHeight: '100%',
+    overflow: 'hidden',
+    boxSizing: 'border-box',
+    display: 'flex',
+    fontFamily: monoFonts.fontFamily,
+    fontSize: 'inherit',
+  },
+  'code[class*="language-"]': {
+    ...darcula['code[class*="language-"]'],
+    margin: 0,
+    fontFamily: 'inherit',
+  },
+};
+
+const PanelWrapper = styled.div({
+  position: 'absolute',
+  top: '10px',
+  left: '10px',
+  fontFamily: monoFonts.fontFamily,
+});
+
+export default class CssResourcePanel extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { cssresources: `` };
+    this.onAddCssresources = this.onAddCssresources.bind(this);
+    this.parser = new DOMParser();
+  }
+
+  componentDidMount() {
+    const { channel } = this.props;
+    this.iframe = document.getElementById(storybookIframe);
+    if (!this.iframe) {
+      throw new Error('Cannot find Storybook iframe');
+    }
+    channel.on('storybook/resources/add_cssresources', this.onAddCssresources);
+  }
+
+  componentWillUnmount() {
+    const { channel } = this.props;
+    channel.removeListener('storybook/resources/add_cssresources', this.onAddCssresources);
+  }
+
+  onAddCssresources(cssresources) {
+    this.loadCssresources(cssresources.filter(res => res.picked));
+    this.setState(prevState => ({ ...prevState, cssresources }));
+  }
+
+  handleChange(i, { target }) {
+    const { channel } = this.props;
+    const { cssresources = [] } = this.state;
+    cssresources[i].picked = target.checked;
+    channel.emit('storybook/resources/add_cssresources', cssresources);
+  }
+
+  loadCssresources(cssresources) {
+    // remove previously added elements!
+    this.iframe.contentDocument.head.querySelectorAll(`[${addedElAttr}]`).forEach(eL => {
+      if (eL) {
+        eL.parentNode.removeChild(eL);
+      }
+    });
+
+    // add new elements!
+    const str = cssresources.map(res => res.code).join('');
+    const parsedHtml = this.parser.parseFromString(str, 'text/html');
+    const elements = parsedHtml.querySelectorAll('head > *');
+    elements.forEach(eL => {
+      // add addedElAttr to css elements
+      eL.setAttribute(addedElAttr, '');
+      this.iframe.contentDocument.head.appendChild(eL);
+    });
+  }
+
+  render() {
+    const { cssresources = [] } = this.state;
+    const { active } = this.props;
+
+    if (!active) {
+      return null;
+    }
+
+    return (
+      <PanelWrapper className="addon-cssresources-container">
+        {cssresources &&
+          cssresources.map(({ name, code, picked }, i) => (
+            <div key={name} style={{ padding: 10 }}>
+              <div style={{ fontSize: '1.1em', marginBottom: 10 }}>
+                <input
+                  id={`cssresource${i}`}
+                  style={{ fontSize: '1.5em' }}
+                  type="checkbox"
+                  checked={picked}
+                  onChange={this.handleChange.bind(this, i)}
+                />
+                <label htmlFor={`cssresource${i}`}>#{name}</label>
+              </div>
+              <SyntaxHighlighter
+                language="css"
+                style={highlighterTheme}
+                customStyle={{ opacity: picked ? 1 : 0.5 }}
+              >
+                {code}
+              </SyntaxHighlighter>
+            </div>
+          ))}
+      </PanelWrapper>
+    );
+  }
+}
+
+CssResourcePanel.propTypes = {
+  active: PropTypes.bool.isRequired,
+  channel: PropTypes.shape({
+    on: PropTypes.func,
+    emit: PropTypes.func,
+    removeListener: PropTypes.func,
+  }).isRequired,
+  api: PropTypes.shape({
+    onStory: PropTypes.func,
+    getQueryParam: PropTypes.func,
+    setQueryParams: PropTypes.func,
+  }).isRequired,
+};
diff --git a/addons/cssresources/src/index.js b/addons/cssresources/src/index.js
new file mode 100644
index 0000000000..6625b422a4
--- /dev/null
+++ b/addons/cssresources/src/index.js
@@ -0,0 +1,23 @@
+import addons, { makeDecorator } from '@storybook/addons';
+
+export const withCssResources = makeDecorator({
+  name: 'withCssResources',
+  parameterName: 'cssresources',
+  skipIfNoParametersOrOptions: true,
+  allowDeprecatedUsage: false,
+  wrapper: (getStory, context, { options, parameters }) => {
+    const channel = addons.getChannel();
+    const storyOptions = parameters || options;
+
+    if (!Array.isArray(storyOptions) && !Array.isArray(storyOptions.cssresources)) {
+      throw new Error('The `cssresources` parameter needs to be an Array');
+    }
+
+    channel.emit(
+      'storybook/resources/add_cssresources',
+      Array.isArray(storyOptions) ? storyOptions : storyOptions.cssresources
+    );
+
+    return getStory(context);
+  },
+});
diff --git a/addons/cssresources/src/register.js b/addons/cssresources/src/register.js
new file mode 100644
index 0000000000..de7f8b91f7
--- /dev/null
+++ b/addons/cssresources/src/register.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import addons from '@storybook/addons';
+import CssResourcePanel from './CssResourcePanel';
+
+addons.register('storybook/cssresources', api => {
+  const channel = addons.getChannel();
+  addons.addPanel('storybook/cssresources/panel', {
+    title: 'Cssresources',
+    // eslint-disable-next-line react/prop-types
+    render: ({ active }) => <CssResourcePanel channel={channel} api={api} active={active} />,
+  });
+});
diff --git a/addons/events/package.json b/addons/events/package.json
index 414a9f7eb8..e2eed24aeb 100644
--- a/addons/events/package.json
+++ b/addons/events/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-events",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "description": "Add events to your Storybook stories.",
   "keywords": [
     "addon",
@@ -27,8 +27,8 @@
   },
   "dependencies": {
     "@emotion/styled": "^0.10.6",
-    "@storybook/addons": "4.1.0-alpha.3",
-    "@storybook/core-events": "4.1.0-alpha.3",
+    "@storybook/addons": "4.1.0-alpha.8",
+    "@storybook/core-events": "4.1.0-alpha.8",
     "format-json": "^1.0.3",
     "prop-types": "^15.6.2",
     "react-lifecycles-compat": "^3.0.4",
diff --git a/addons/google-analytics/package.json b/addons/google-analytics/package.json
index c68cab120e..459b49eeda 100644
--- a/addons/google-analytics/package.json
+++ b/addons/google-analytics/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-google-analytics",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "description": "Storybook addon for google analytics",
   "keywords": [
     "addon",
@@ -24,7 +24,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "4.1.0-alpha.3",
+    "@storybook/addons": "4.1.0-alpha.8",
     "global": "^4.3.2",
     "react-ga": "^2.5.3"
   }
diff --git a/addons/graphql/package.json b/addons/graphql/package.json
index b0c290d9d6..9fc2e3b67d 100644
--- a/addons/graphql/package.json
+++ b/addons/graphql/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-graphql",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "description": "Storybook addon to display the GraphiQL IDE",
   "keywords": [
     "addon",
diff --git a/addons/info/package.json b/addons/info/package.json
index dfef588afc..dac813e401 100644
--- a/addons/info/package.json
+++ b/addons/info/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-info",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "description": "A Storybook addon to show additional information for your stories.",
   "keywords": [
     "addon",
@@ -25,9 +25,9 @@
   },
   "dependencies": {
     "@emotion/styled": "^0.10.6",
-    "@storybook/addons": "4.1.0-alpha.3",
-    "@storybook/client-logger": "4.1.0-alpha.3",
-    "@storybook/components": "4.1.0-alpha.3",
+    "@storybook/addons": "4.1.0-alpha.8",
+    "@storybook/client-logger": "4.1.0-alpha.8",
+    "@storybook/components": "4.1.0-alpha.8",
     "core-js": "2.5.7",
     "global": "^4.3.2",
     "marksy": "^6.1.0",
diff --git a/addons/info/src/__snapshots__/index.test.js.snap b/addons/info/src/__snapshots__/index.test.js.snap
index 6c2fd3a43b..87f97aa866 100644
--- a/addons/info/src/__snapshots__/index.test.js.snap
+++ b/addons/info/src/__snapshots__/index.test.js.snap
@@ -2748,3 +2748,1229 @@ containing **bold**, *cursive* text, \`code\` and [a link](https://github.com)"
   </Story>
 </deprecated>
 `;
+
+exports[`addon Info should render component description 1`] = `
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-size: .88em;
+  font-family: Menlo,Monaco,"Courier New",monospace;
+  background-color: #fafafa;
+  padding: .5rem;
+  line-height: 1.5;
+  overflow-x: scroll;
+}
+
+.emotion-2 {
+  overflow: hidden;
+  border: 1px solid #eee;
+  border-radius: 3px;
+  background-color: #FFFFFF;
+  cursor: pointer;
+  font-size: 13px;
+  padding: 3px 10px;
+  -webkit-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.emotion-2:hover {
+  background-color: #f4f7fa;
+  border-color: #ddd;
+}
+
+.emotion-2:active {
+  background-color: #e9ecef;
+  border-color: #ccc;
+}
+
+.emotion-0 {
+  -webkit-transition: -webkit-transform .2s ease;
+  -webkit-transition: transform .2s ease;
+  transition: transform .2s ease;
+  height: 16px;
+  -webkit-transform: translateY(-100%) translateY(-6px);
+  -ms-transform: translateY(-100%) translateY(-6px);
+  transform: translateY(-100%) translateY(-6px);
+}
+
+<Info>
+  <Story
+    PropTable={[Function]}
+    components={
+      Object {
+        "a": [Function],
+        "code": [Function],
+        "h1": [Function],
+        "h2": [Function],
+        "h3": [Function],
+        "h4": [Function],
+        "h5": [Function],
+        "h6": [Function],
+        "li": [Function],
+        "p": [Function],
+        "ul": [Function],
+      }
+    }
+    context={
+      Object {
+        "kind": "TestComponent",
+        "story": "Basic test",
+      }
+    }
+    excludedPropTypes={Array []}
+    info=""
+    maxPropArrayLength={3}
+    maxPropObjectKeys={3}
+    maxPropStringLength={50}
+    maxPropsIntoLine={3}
+    propTables={null}
+    propTablesExclude={Array []}
+    showHeader={true}
+    showInline={true}
+    showSource={true}
+    styles={[Function]}
+  >
+    <div>
+      <div>
+        <div
+          style={
+            Object {
+              "WebkitFontSmoothing": "antialiased",
+              "backgroundColor": "#fff",
+              "border": "1px solid #eee",
+              "borderRadius": "2px",
+              "color": "#444",
+              "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
+              "fontSize": "15px",
+              "fontWeight": 300,
+              "lineHeight": 1.45,
+              "marginBottom": "20px",
+              "marginTop": "20px",
+              "padding": "20px 40px 40px",
+            }
+          }
+        >
+          <div
+            style={
+              Object {
+                "borderBottom": "1px solid #eee",
+                "marginBottom": 10,
+                "paddingTop": 10,
+              }
+            }
+          >
+            <h1
+              style={
+                Object {
+                  "fontSize": "35px",
+                  "margin": 0,
+                  "padding": 0,
+                }
+              }
+            >
+              TestComponent
+            </h1>
+            <h2
+              style={
+                Object {
+                  "fontSize": "22px",
+                  "fontWeight": 400,
+                  "margin": "0 0 10px 0",
+                  "padding": 0,
+                }
+              }
+            >
+              Basic test
+            </h2>
+          </div>
+        </div>
+      </div>
+      <div
+        id="story-root"
+        style={Object {}}
+      >
+        <div>
+          It's a 
+          Basic test
+           story:
+          <TestComponent
+            array={
+              Array [
+                1,
+                2,
+                3,
+              ]
+            }
+            bool={true}
+            func={[Function]}
+            number={7}
+            obj={
+              Object {
+                "a": "a",
+                "b": "b",
+              }
+            }
+            string="seven"
+          >
+            <div>
+              <h1>
+                function func(x) {
+        return x + 1;
+      }
+              </h1>
+              <h2>
+                [object Object]
+              </h2>
+              <h3>
+                1,2,3
+              </h3>
+              <h4>
+                7
+              </h4>
+              <h5>
+                seven
+              </h5>
+              <h6>
+                true
+              </h6>
+              <p>
+                undefined
+              </p>
+              <a
+                href="#"
+              >
+                test
+              </a>
+              <code>
+                storiesOf
+              </code>
+              <ul>
+                <li>
+                  1
+                </li>
+                <li>
+                  2
+                </li>
+              </ul>
+            </div>
+          </TestComponent>
+        </div>
+      </div>
+      <div>
+        <div
+          style={
+            Object {
+              "WebkitFontSmoothing": "antialiased",
+              "backgroundColor": "#fff",
+              "border": "1px solid #eee",
+              "borderRadius": "2px",
+              "color": "#444",
+              "fontFamily": "-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif",
+              "fontSize": "15px",
+              "fontWeight": 300,
+              "lineHeight": 1.45,
+              "marginBottom": "20px",
+              "marginTop": "20px",
+              "padding": "20px 40px 40px",
+            }
+          }
+        >
+          <div>
+            Awesome test component description
+          </div>
+          <div>
+            <h1
+              style={
+                Object {
+                  "borderBottom": "1px solid #EEE",
+                  "fontSize": "25px",
+                  "margin": "20px 0 0 0",
+                  "padding": "0 0 5px 0",
+                }
+              }
+            >
+              Story Source
+            </h1>
+            <Pre
+              theme={Object {}}
+            >
+              <ForwardRef>
+                <Styled(pre)>
+                  <pre
+                    className="emotion-4 emotion-5"
+                  >
+                    <div>
+                      <Node
+                        depth={0}
+                        key="0/.0"
+                        maxPropArrayLength={3}
+                        maxPropObjectKeys={3}
+                        maxPropStringLength={50}
+                        maxPropsIntoLine={3}
+                        node={
+                          <div>
+                            It's a 
+                            Basic test
+                             story:
+                            <TestComponent
+                              array={
+                                Array [
+                                  1,
+                                  2,
+                                  3,
+                                ]
+                              }
+                              bool={true}
+                              func={[Function]}
+                              number={7}
+                              obj={
+                                Object {
+                                  "a": "a",
+                                  "b": "b",
+                                }
+                              }
+                              string="seven"
+                            />
+                          </div>
+                        }
+                      >
+                        <div>
+                          <div
+                            style={
+                              Object {
+                                "paddingLeft": 18,
+                                "paddingRight": 3,
+                              }
+                            }
+                          >
+                            <span
+                              style={
+                                Object {
+                                  "color": "#444",
+                                }
+                              }
+                            >
+                              &lt;
+                              div
+                            </span>
+                            <Props
+                              maxPropArrayLength={3}
+                              maxPropObjectKeys={3}
+                              maxPropStringLength={50}
+                              maxPropsIntoLine={3}
+                              node={
+                                <div>
+                                  It's a 
+                                  Basic test
+                                   story:
+                                  <TestComponent
+                                    array={
+                                      Array [
+                                        1,
+                                        2,
+                                        3,
+                                      ]
+                                    }
+                                    bool={true}
+                                    func={[Function]}
+                                    number={7}
+                                    obj={
+                                      Object {
+                                        "a": "a",
+                                        "b": "b",
+                                      }
+                                    }
+                                    string="seven"
+                                  />
+                                </div>
+                              }
+                              singleLine={false}
+                            >
+                              <span />
+                            </Props>
+                            <span
+                              style={
+                                Object {
+                                  "color": "#444",
+                                }
+                              }
+                            >
+                              &gt;
+                            </span>
+                          </div>
+                          <Node
+                            depth={1}
+                            key=".0"
+                            maxPropArrayLength={3}
+                            maxPropObjectKeys={3}
+                            maxPropStringLength={50}
+                            maxPropsIntoLine={3}
+                            node="It's a "
+                          >
+                            <div
+                              style={
+                                Object {
+                                  "paddingLeft": 33,
+                                  "paddingRight": 3,
+                                }
+                              }
+                            >
+                              <span
+                                style={
+                                  Object {
+                                    "color": "#444",
+                                  }
+                                }
+                              >
+                                It's a 
+                              </span>
+                            </div>
+                          </Node>
+                          <Node
+                            depth={1}
+                            key=".1"
+                            maxPropArrayLength={3}
+                            maxPropObjectKeys={3}
+                            maxPropStringLength={50}
+                            maxPropsIntoLine={3}
+                            node="Basic test"
+                          >
+                            <div
+                              style={
+                                Object {
+                                  "paddingLeft": 33,
+                                  "paddingRight": 3,
+                                }
+                              }
+                            >
+                              <span
+                                style={
+                                  Object {
+                                    "color": "#444",
+                                  }
+                                }
+                              >
+                                Basic test
+                              </span>
+                            </div>
+                          </Node>
+                          <Node
+                            depth={1}
+                            key=".2"
+                            maxPropArrayLength={3}
+                            maxPropObjectKeys={3}
+                            maxPropStringLength={50}
+                            maxPropsIntoLine={3}
+                            node=" story:"
+                          >
+                            <div
+                              style={
+                                Object {
+                                  "paddingLeft": 33,
+                                  "paddingRight": 3,
+                                }
+                              }
+                            >
+                              <span
+                                style={
+                                  Object {
+                                    "color": "#444",
+                                  }
+                                }
+                              >
+                                 story:
+                              </span>
+                            </div>
+                          </Node>
+                          <Node
+                            depth={1}
+                            key=".3"
+                            maxPropArrayLength={3}
+                            maxPropObjectKeys={3}
+                            maxPropStringLength={50}
+                            maxPropsIntoLine={3}
+                            node={
+                              <TestComponent
+                                array={
+                                  Array [
+                                    1,
+                                    2,
+                                    3,
+                                  ]
+                                }
+                                bool={true}
+                                func={[Function]}
+                                number={7}
+                                obj={
+                                  Object {
+                                    "a": "a",
+                                    "b": "b",
+                                  }
+                                }
+                                string="seven"
+                              />
+                            }
+                          >
+                            <div
+                              style={
+                                Object {
+                                  "paddingLeft": 33,
+                                  "paddingRight": 3,
+                                }
+                              }
+                            >
+                              <span
+                                style={
+                                  Object {
+                                    "color": "#444",
+                                  }
+                                }
+                              >
+                                &lt;
+                                TestComponent
+                              </span>
+                              <Props
+                                maxPropArrayLength={3}
+                                maxPropObjectKeys={3}
+                                maxPropStringLength={50}
+                                maxPropsIntoLine={3}
+                                node={
+                                  <TestComponent
+                                    array={
+                                      Array [
+                                        1,
+                                        2,
+                                        3,
+                                      ]
+                                    }
+                                    bool={true}
+                                    func={[Function]}
+                                    number={7}
+                                    obj={
+                                      Object {
+                                        "a": "a",
+                                        "b": "b",
+                                      }
+                                    }
+                                    string="seven"
+                                  />
+                                }
+                                singleLine={true}
+                              >
+                                <span>
+                                  <span
+                                    key="func"
+                                  >
+                                    <span>
+                                      <br />
+                                        
+                                    </span>
+                                    <span
+                                      style={Object {}}
+                                    >
+                                      func
+                                    </span>
+                                    <span>
+                                      =
+                                      <span
+                                        style={Object {}}
+                                      >
+                                        {
+                                        <PropVal
+                                          level={1}
+                                          maxPropArrayLength={3}
+                                          maxPropObjectKeys={3}
+                                          maxPropStringLength={50}
+                                          maxPropsIntoLine={3}
+                                          theme={Object {}}
+                                          val={[Function]}
+                                          valueStyles={null}
+                                        >
+                                          <span
+                                            style={
+                                              Object {
+                                                "color": "#170",
+                                              }
+                                            }
+                                          >
+                                            func
+                                          </span>
+                                        </PropVal>
+                                        }
+                                      </span>
+                                    </span>
+                                  </span>
+                                  <span
+                                    key="obj"
+                                  >
+                                    <span>
+                                      <br />
+                                        
+                                    </span>
+                                    <span
+                                      style={Object {}}
+                                    >
+                                      obj
+                                    </span>
+                                    <span>
+                                      =
+                                      <span
+                                        style={Object {}}
+                                      >
+                                        {
+                                        <PropVal
+                                          level={1}
+                                          maxPropArrayLength={3}
+                                          maxPropObjectKeys={3}
+                                          maxPropStringLength={50}
+                                          maxPropsIntoLine={3}
+                                          theme={Object {}}
+                                          val={
+                                            Object {
+                                              "a": "a",
+                                              "b": "b",
+                                            }
+                                          }
+                                          valueStyles={null}
+                                        >
+                                          <PreviewObject
+                                            level={1}
+                                            maxPropObjectKeys={3}
+                                            maxPropStringLength={50}
+                                            maxPropsIntoLine={3}
+                                            val={
+                                              Object {
+                                                "a": "a",
+                                                "b": "b",
+                                              }
+                                            }
+                                            valueStyles={
+                                              Object {
+                                                "array": Object {
+                                                  "color": "#666",
+                                                },
+                                                "attr": Object {
+                                                  "color": "#666",
+                                                },
+                                                "bool": Object {
+                                                  "color": "#a11",
+                                                },
+                                                "empty": Object {
+                                                  "color": "#444",
+                                                },
+                                                "func": Object {
+                                                  "color": "#170",
+                                                },
+                                                "number": Object {
+                                                  "color": "#a11",
+                                                },
+                                                "object": Object {
+                                                  "color": "#666",
+                                                },
+                                                "string": Object {
+                                                  "color": "#22a",
+                                                  "wordBreak": "break-word",
+                                                },
+                                              }
+                                            }
+                                          >
+                                            <span
+                                              style={
+                                                Object {
+                                                  "color": "#666",
+                                                }
+                                              }
+                                            >
+                                              {
+                                              <span
+                                                key="k0/.0"
+                                              >
+                                                <span
+                                                  style={
+                                                    Object {
+                                                      "color": "#666",
+                                                    }
+                                                  }
+                                                >
+                                                  a
+                                                </span>
+                                              </span>
+                                              : 
+                                              <PropVal
+                                                key="v0/.0"
+                                                level={2}
+                                                maxPropArrayLength={3}
+                                                maxPropObjectKeys={3}
+                                                maxPropStringLength={50}
+                                                maxPropsIntoLine={3}
+                                                theme={Object {}}
+                                                val="a"
+                                                valueStyles={
+                                                  Object {
+                                                    "array": Object {
+                                                      "color": "#666",
+                                                    },
+                                                    "attr": Object {
+                                                      "color": "#666",
+                                                    },
+                                                    "bool": Object {
+                                                      "color": "#a11",
+                                                    },
+                                                    "empty": Object {
+                                                      "color": "#444",
+                                                    },
+                                                    "func": Object {
+                                                      "color": "#170",
+                                                    },
+                                                    "number": Object {
+                                                      "color": "#a11",
+                                                    },
+                                                    "object": Object {
+                                                      "color": "#666",
+                                                    },
+                                                    "string": Object {
+                                                      "color": "#22a",
+                                                      "wordBreak": "break-word",
+                                                    },
+                                                  }
+                                                }
+                                              >
+                                                <span
+                                                  style={
+                                                    Object {
+                                                      "color": "#22a",
+                                                      "wordBreak": "break-word",
+                                                    }
+                                                  }
+                                                >
+                                                  'a'
+                                                </span>
+                                              </PropVal>
+                                              ,
+                                              <span
+                                                key="k1/.0"
+                                              >
+                                                <span
+                                                  style={
+                                                    Object {
+                                                      "color": "#666",
+                                                    }
+                                                  }
+                                                >
+                                                  b
+                                                </span>
+                                              </span>
+                                              : 
+                                              <PropVal
+                                                key="v1/.0"
+                                                level={2}
+                                                maxPropArrayLength={3}
+                                                maxPropObjectKeys={3}
+                                                maxPropStringLength={50}
+                                                maxPropsIntoLine={3}
+                                                theme={Object {}}
+                                                val="b"
+                                                valueStyles={
+                                                  Object {
+                                                    "array": Object {
+                                                      "color": "#666",
+                                                    },
+                                                    "attr": Object {
+                                                      "color": "#666",
+                                                    },
+                                                    "bool": Object {
+                                                      "color": "#a11",
+                                                    },
+                                                    "empty": Object {
+                                                      "color": "#444",
+                                                    },
+                                                    "func": Object {
+                                                      "color": "#170",
+                                                    },
+                                                    "number": Object {
+                                                      "color": "#a11",
+                                                    },
+                                                    "object": Object {
+                                                      "color": "#666",
+                                                    },
+                                                    "string": Object {
+                                                      "color": "#22a",
+                                                      "wordBreak": "break-word",
+                                                    },
+                                                  }
+                                                }
+                                              >
+                                                <span
+                                                  style={
+                                                    Object {
+                                                      "color": "#22a",
+                                                      "wordBreak": "break-word",
+                                                    }
+                                                  }
+                                                >
+                                                  'b'
+                                                </span>
+                                              </PropVal>
+                                              }
+                                            </span>
+                                          </PreviewObject>
+                                        </PropVal>
+                                        }
+                                      </span>
+                                    </span>
+                                  </span>
+                                  <span
+                                    key="array"
+                                  >
+                                    <span>
+                                      <br />
+                                        
+                                    </span>
+                                    <span
+                                      style={Object {}}
+                                    >
+                                      array
+                                    </span>
+                                    <span>
+                                      =
+                                      <span
+                                        style={Object {}}
+                                      >
+                                        {
+                                        <PropVal
+                                          level={1}
+                                          maxPropArrayLength={3}
+                                          maxPropObjectKeys={3}
+                                          maxPropStringLength={50}
+                                          maxPropsIntoLine={3}
+                                          theme={Object {}}
+                                          val={
+                                            Array [
+                                              1,
+                                              2,
+                                              3,
+                                            ]
+                                          }
+                                          valueStyles={null}
+                                        >
+                                          <PreviewArray
+                                            level={1}
+                                            maxPropArrayLength={3}
+                                            maxPropStringLength={50}
+                                            maxPropsIntoLine={3}
+                                            val={
+                                              Array [
+                                                1,
+                                                2,
+                                                3,
+                                              ]
+                                            }
+                                            valueStyles={
+                                              Object {
+                                                "array": Object {
+                                                  "color": "#666",
+                                                },
+                                                "attr": Object {
+                                                  "color": "#666",
+                                                },
+                                                "bool": Object {
+                                                  "color": "#a11",
+                                                },
+                                                "empty": Object {
+                                                  "color": "#444",
+                                                },
+                                                "func": Object {
+                                                  "color": "#170",
+                                                },
+                                                "number": Object {
+                                                  "color": "#a11",
+                                                },
+                                                "object": Object {
+                                                  "color": "#666",
+                                                },
+                                                "string": Object {
+                                                  "color": "#22a",
+                                                  "wordBreak": "break-word",
+                                                },
+                                              }
+                                            }
+                                          >
+                                            <span
+                                              style={
+                                                Object {
+                                                  "color": "#666",
+                                                }
+                                              }
+                                            >
+                                              [
+                                              <span
+                                                key="n0/.0"
+                                              >
+                                                <PropVal
+                                                  level={2}
+                                                  maxPropArrayLength={3}
+                                                  maxPropObjectKeys={3}
+                                                  maxPropStringLength={50}
+                                                  maxPropsIntoLine={3}
+                                                  theme={Object {}}
+                                                  val={1}
+                                                  valueStyles={
+                                                    Object {
+                                                      "array": Object {
+                                                        "color": "#666",
+                                                      },
+                                                      "attr": Object {
+                                                        "color": "#666",
+                                                      },
+                                                      "bool": Object {
+                                                        "color": "#a11",
+                                                      },
+                                                      "empty": Object {
+                                                        "color": "#444",
+                                                      },
+                                                      "func": Object {
+                                                        "color": "#170",
+                                                      },
+                                                      "number": Object {
+                                                        "color": "#a11",
+                                                      },
+                                                      "object": Object {
+                                                        "color": "#666",
+                                                      },
+                                                      "string": Object {
+                                                        "color": "#22a",
+                                                        "wordBreak": "break-word",
+                                                      },
+                                                    }
+                                                  }
+                                                >
+                                                  <span
+                                                    style={
+                                                      Object {
+                                                        "color": "#a11",
+                                                      }
+                                                    }
+                                                  >
+                                                    1
+                                                  </span>
+                                                </PropVal>
+                                              </span>
+                                              ,
+                                              <span
+                                                key="n1/.0"
+                                              >
+                                                <PropVal
+                                                  level={2}
+                                                  maxPropArrayLength={3}
+                                                  maxPropObjectKeys={3}
+                                                  maxPropStringLength={50}
+                                                  maxPropsIntoLine={3}
+                                                  theme={Object {}}
+                                                  val={2}
+                                                  valueStyles={
+                                                    Object {
+                                                      "array": Object {
+                                                        "color": "#666",
+                                                      },
+                                                      "attr": Object {
+                                                        "color": "#666",
+                                                      },
+                                                      "bool": Object {
+                                                        "color": "#a11",
+                                                      },
+                                                      "empty": Object {
+                                                        "color": "#444",
+                                                      },
+                                                      "func": Object {
+                                                        "color": "#170",
+                                                      },
+                                                      "number": Object {
+                                                        "color": "#a11",
+                                                      },
+                                                      "object": Object {
+                                                        "color": "#666",
+                                                      },
+                                                      "string": Object {
+                                                        "color": "#22a",
+                                                        "wordBreak": "break-word",
+                                                      },
+                                                    }
+                                                  }
+                                                >
+                                                  <span
+                                                    style={
+                                                      Object {
+                                                        "color": "#a11",
+                                                      }
+                                                    }
+                                                  >
+                                                    2
+                                                  </span>
+                                                </PropVal>
+                                              </span>
+                                              ,
+                                              <span
+                                                key="n2/.0"
+                                              >
+                                                <PropVal
+                                                  level={2}
+                                                  maxPropArrayLength={3}
+                                                  maxPropObjectKeys={3}
+                                                  maxPropStringLength={50}
+                                                  maxPropsIntoLine={3}
+                                                  theme={Object {}}
+                                                  val={3}
+                                                  valueStyles={
+                                                    Object {
+                                                      "array": Object {
+                                                        "color": "#666",
+                                                      },
+                                                      "attr": Object {
+                                                        "color": "#666",
+                                                      },
+                                                      "bool": Object {
+                                                        "color": "#a11",
+                                                      },
+                                                      "empty": Object {
+                                                        "color": "#444",
+                                                      },
+                                                      "func": Object {
+                                                        "color": "#170",
+                                                      },
+                                                      "number": Object {
+                                                        "color": "#a11",
+                                                      },
+                                                      "object": Object {
+                                                        "color": "#666",
+                                                      },
+                                                      "string": Object {
+                                                        "color": "#22a",
+                                                        "wordBreak": "break-word",
+                                                      },
+                                                    }
+                                                  }
+                                                >
+                                                  <span
+                                                    style={
+                                                      Object {
+                                                        "color": "#a11",
+                                                      }
+                                                    }
+                                                  >
+                                                    3
+                                                  </span>
+                                                </PropVal>
+                                              </span>
+                                              ]
+                                            </span>
+                                          </PreviewArray>
+                                        </PropVal>
+                                        }
+                                      </span>
+                                    </span>
+                                  </span>
+                                  <span
+                                    key="number"
+                                  >
+                                    <span>
+                                      <br />
+                                        
+                                    </span>
+                                    <span
+                                      style={Object {}}
+                                    >
+                                      number
+                                    </span>
+                                    <span>
+                                      =
+                                      <span
+                                        style={Object {}}
+                                      >
+                                        {
+                                        <PropVal
+                                          level={1}
+                                          maxPropArrayLength={3}
+                                          maxPropObjectKeys={3}
+                                          maxPropStringLength={50}
+                                          maxPropsIntoLine={3}
+                                          theme={Object {}}
+                                          val={7}
+                                          valueStyles={null}
+                                        >
+                                          <span
+                                            style={
+                                              Object {
+                                                "color": "#a11",
+                                              }
+                                            }
+                                          >
+                                            7
+                                          </span>
+                                        </PropVal>
+                                        }
+                                      </span>
+                                    </span>
+                                  </span>
+                                  <span
+                                    key="string"
+                                  >
+                                    <span>
+                                      <br />
+                                        
+                                    </span>
+                                    <span
+                                      style={Object {}}
+                                    >
+                                      string
+                                    </span>
+                                    <span>
+                                      =
+                                      <span
+                                        style={Object {}}
+                                      >
+                                        "
+                                        <PropVal
+                                          level={1}
+                                          maxPropArrayLength={3}
+                                          maxPropObjectKeys={3}
+                                          maxPropStringLength={50}
+                                          maxPropsIntoLine={3}
+                                          theme={Object {}}
+                                          val="seven"
+                                          valueStyles={null}
+                                        >
+                                          <span
+                                            style={
+                                              Object {
+                                                "color": "#22a",
+                                                "wordBreak": "break-word",
+                                              }
+                                            }
+                                          >
+                                            seven
+                                          </span>
+                                        </PropVal>
+                                        "
+                                      </span>
+                                    </span>
+                                  </span>
+                                  <span
+                                    key="bool"
+                                  >
+                                    <span>
+                                      <br />
+                                        
+                                    </span>
+                                    <span
+                                      style={Object {}}
+                                    >
+                                      bool
+                                    </span>
+                                    <br />
+                                  </span>
+                                </span>
+                              </Props>
+                              <span
+                                style={
+                                  Object {
+                                    "color": "#444",
+                                  }
+                                }
+                              >
+                                /&gt;
+                              </span>
+                            </div>
+                          </Node>
+                          <div
+                            style={
+                              Object {
+                                "paddingLeft": 18,
+                                "paddingRight": 3,
+                              }
+                            }
+                          >
+                            <span
+                              style={
+                                Object {
+                                  "color": "#444",
+                                }
+                              }
+                            >
+                              &lt;/
+                              div
+                              &gt;
+                            </span>
+                          </div>
+                        </div>
+                      </Node>
+                    </div>
+                    <CopyButton
+                      onClick={[Function]}
+                      theme={Object {}}
+                      toggled={false}
+                    >
+                      <ForwardRef
+                        onClick={[Function]}
+                        styles={Object {}}
+                      >
+                        <Styled(button)
+                          onClick={[Function]}
+                          styles={Object {}}
+                        >
+                          <button
+                            className="emotion-2 emotion-3"
+                            onClick={[Function]}
+                          >
+                            <ForwardRef
+                              toggled={false}
+                            >
+                              <Styled(div)
+                                toggled={false}
+                              >
+                                <div
+                                  className="emotion-0 emotion-1"
+                                >
+                                  <div
+                                    style={
+                                      Object {
+                                        "marginBottom": 6,
+                                      }
+                                    }
+                                  >
+                                    Copied!
+                                  </div>
+                                  <div>
+                                    Copy
+                                  </div>
+                                </div>
+                              </Styled(div)>
+                            </ForwardRef>
+                          </button>
+                        </Styled(button)>
+                      </ForwardRef>
+                    </CopyButton>
+                  </pre>
+                </Styled(pre)>
+              </ForwardRef>
+            </Pre>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Story>
+</Info>
+`;
diff --git a/addons/info/src/components/Story.js b/addons/info/src/components/Story.js
index 3496bf205f..46eefe5bfa 100644
--- a/addons/info/src/components/Story.js
+++ b/addons/info/src/components/Story.js
@@ -257,7 +257,7 @@ class Story extends Component {
 
     if (Object.keys(STORYBOOK_REACT_CLASSES).length) {
       Object.keys(STORYBOOK_REACT_CLASSES).forEach(key => {
-        if (STORYBOOK_REACT_CLASSES[key].name === context.story) {
+        if (STORYBOOK_REACT_CLASSES[key].name === context.kind) {
           retDiv = <div>{STORYBOOK_REACT_CLASSES[key].docgenInfo.description}</div>;
         }
       });
diff --git a/addons/info/src/index.test.js b/addons/info/src/index.test.js
index 76a0d5070f..44b60bb69a 100644
--- a/addons/info/src/index.test.js
+++ b/addons/info/src/index.test.js
@@ -23,6 +23,16 @@ const TestComponent = ({ func, obj, array, number, string, bool, empty }) => (
   </div>);
 /* eslint-enable */
 
+const reactClassPath = 'some/path/TestComponent.jsx';
+const storybookReactClassMock = {
+  name: 'TestComponent',
+  path: reactClassPath,
+  docgenInfo: {
+    description: 'Awesome test component description',
+    name: 'TestComponent',
+  },
+};
+
 const testOptions = { propTables: false };
 
 const testMarkdown = `# Test story
@@ -63,4 +73,19 @@ describe('addon Info', () => {
     const Info = withInfo()(storyFn);
     mount(<Info />);
   });
+
+  it('should render component description', () => {
+    const previousReactClassesValue = global.STORYBOOK_REACT_CLASSES[reactClassPath];
+    Object.assign(global.STORYBOOK_REACT_CLASSES, { [reactClassPath]: storybookReactClassMock });
+
+    const Info = () =>
+      withInfo({ inline: true, propTables: false })(storyFn, {
+        kind: 'TestComponent',
+        story: 'Basic test',
+      });
+
+    expect(mount(<Info />)).toMatchSnapshot();
+
+    Object.assign(global.STORYBOOK_REACT_CLASSES, { [reactClassPath]: previousReactClassesValue });
+  });
 });
diff --git a/addons/jest/docs/storybook-addon-jest.gif b/addons/jest/docs/storybook-addon-jest.gif
index a2f7152536..4b6c71b6f9 100644
Binary files a/addons/jest/docs/storybook-addon-jest.gif and b/addons/jest/docs/storybook-addon-jest.gif differ
diff --git a/addons/jest/package.json b/addons/jest/package.json
index f1c8132890..09d790290c 100644
--- a/addons/jest/package.json
+++ b/addons/jest/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-jest",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "description": "React storybook addon that show component jest report",
   "keywords": [
     "addon",
@@ -31,8 +31,8 @@
   },
   "dependencies": {
     "@emotion/styled": "^0.10.6",
-    "@storybook/addons": "4.1.0-alpha.3",
-    "@storybook/components": "4.1.0-alpha.3",
+    "@storybook/addons": "4.1.0-alpha.8",
+    "@storybook/components": "4.1.0-alpha.8",
     "global": "^4.3.2",
     "prop-types": "^15.6.2",
     "upath": "^1.1.0",
diff --git a/addons/knobs/README.md b/addons/knobs/README.md
index a3a29311c0..d9bb8210f6 100644
--- a/addons/knobs/README.md
+++ b/addons/knobs/README.md
@@ -377,8 +377,8 @@ stories.addDecorator(withKnobs)
 stories.add('story name', () => ..., {
   knobs: {
     timestamps: true, // Doesn't emit events while user is typing.
-    escapeHTML: true // Escapes strings to be safe for inserting as innerHTML. This option is true by default in storybook for Vue, Angular, and Polymer, because those frameworks allow rendering plain HTML.
-                     // You can still set it to false, but it's strongly unrecommendend in cases when you host your storybook on some route of your main site or web app.  
+    escapeHTML: true // Escapes strings to be safe for inserting as innerHTML. This option is true by default. It's safe to set it to `false` with frameworks like React which do escaping on their side.
+                     // You can still set it to false, but it's strongly unrecommendend in cases when you host your storybook on some route of your main site or web app.
   }
 });
 ```
diff --git a/addons/knobs/package.json b/addons/knobs/package.json
index 223b6ee3a6..6dacc2a26f 100644
--- a/addons/knobs/package.json
+++ b/addons/knobs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-knobs",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "description": "Storybook Addon Prop Editor Component",
   "keywords": [
     "addon",
@@ -25,9 +25,9 @@
   },
   "dependencies": {
     "@emotion/styled": "^0.10.6",
-    "@storybook/addons": "4.1.0-alpha.3",
-    "@storybook/components": "4.1.0-alpha.3",
-    "@storybook/core-events": "4.1.0-alpha.3",
+    "@storybook/addons": "4.1.0-alpha.8",
+    "@storybook/components": "4.1.0-alpha.8",
+    "@storybook/core-events": "4.1.0-alpha.8",
     "copy-to-clipboard": "^3.0.8",
     "escape-html": "^1.0.3",
     "fast-deep-equal": "^2.0.1",
diff --git a/addons/links/package.json b/addons/links/package.json
index 7d0bc77690..5ccd564454 100644
--- a/addons/links/package.json
+++ b/addons/links/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-links",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "description": "Story Links addon for storybook",
   "keywords": [
     "addon",
@@ -24,9 +24,9 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "4.1.0-alpha.3",
-    "@storybook/components": "4.1.0-alpha.3",
-    "@storybook/core-events": "4.1.0-alpha.3",
+    "@storybook/addons": "4.1.0-alpha.8",
+    "@storybook/components": "4.1.0-alpha.8",
+    "@storybook/core-events": "4.1.0-alpha.8",
     "global": "^4.3.2",
     "prop-types": "^15.6.2"
   },
diff --git a/addons/notes/package.json b/addons/notes/package.json
index c5abf968ae..462c23e5d2 100644
--- a/addons/notes/package.json
+++ b/addons/notes/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-notes",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "description": "Write notes for your Storybook stories.",
   "keywords": [
     "addon",
@@ -26,9 +26,9 @@
   },
   "dependencies": {
     "@emotion/styled": "^0.10.6",
-    "@storybook/addons": "4.1.0-alpha.3",
-    "@storybook/components": "4.1.0-alpha.3",
-    "@storybook/core-events": "4.1.0-alpha.3",
+    "@storybook/addons": "4.1.0-alpha.8",
+    "@storybook/components": "4.1.0-alpha.8",
+    "@storybook/core-events": "4.1.0-alpha.8",
     "markdown-to-jsx": "^6.7.4",
     "prop-types": "^15.6.2"
   },
diff --git a/addons/ondevice-backgrounds/package.json b/addons/ondevice-backgrounds/package.json
index 5f53187341..d59f8ed223 100644
--- a/addons/ondevice-backgrounds/package.json
+++ b/addons/ondevice-backgrounds/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-backgrounds",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "description": "A storybook addon to show different backgrounds for your preview",
   "keywords": [
     "addon",
@@ -26,7 +26,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "4.1.0-alpha.3",
+    "@storybook/addons": "4.1.0-alpha.8",
     "prop-types": "^15.6.2"
   },
   "peerDependencies": {
diff --git a/addons/ondevice-knobs/package.json b/addons/ondevice-knobs/package.json
index fbac051b98..f255b15904 100644
--- a/addons/ondevice-knobs/package.json
+++ b/addons/ondevice-knobs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-knobs",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "description": "Display storybook story knobs on your deviced.",
   "keywords": [
     "addon",
@@ -23,7 +23,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "4.1.0-alpha.3",
+    "@storybook/addons": "4.1.0-alpha.8",
     "deep-equal": "^1.0.1",
     "prop-types": "^15.6.2",
     "react-native-color-picker": "^0.4.0",
@@ -32,7 +32,7 @@
     "react-native-switch": "^1.5.0"
   },
   "peerDependencies": {
-    "@storybook/addon-knobs": "4.1.0-alpha.3",
+    "@storybook/addon-knobs": "4.1.0-alpha.8",
     "react": "*",
     "react-native": "*"
   }
diff --git a/addons/ondevice-notes/package.json b/addons/ondevice-notes/package.json
index 5d931045a9..01611f9671 100644
--- a/addons/ondevice-notes/package.json
+++ b/addons/ondevice-notes/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-notes",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "description": "Write notes for your Storybook stories.",
   "keywords": [
     "addon",
@@ -21,7 +21,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "4.1.0-alpha.3",
+    "@storybook/addons": "4.1.0-alpha.8",
     "prop-types": "^15.6.2",
     "react-native-simple-markdown": "^1.1.0"
   },
diff --git a/addons/options/README.md b/addons/options/README.md
index 46fc3ca9c3..e678f0eb9d 100644
--- a/addons/options/README.md
+++ b/addons/options/README.md
@@ -20,7 +20,9 @@ Add this line to your `addons.js` file (create this file inside your storybook c
 import '@storybook/addon-options/register';
 ```
 
-Import and use the `withOptions` decorator in your config.js file.
+###Set options globally
+
+Import and use the `withOptions` decorator in your `config.js` file.
 
 ```js
 import { addDecorator, configure } from '@storybook/react';
@@ -113,27 +115,29 @@ configure(() => require('./stories'), module);
 The options-addon accepts story parameters on the `options` key:
 
 ```js
-import { storiesOf } from '@storybook/marko';
-import { withKnobs, text, number } from '@storybook/addon-knobs';
-import Hello from '../components/hello/index.marko';
+import { storiesOf } from '@storybook/react';
+import MyComponent from './my-component';
 
-storiesOf('Addons|Knobs/Hello', module)
+storiesOf('Addons|Custom options', module)
   // If you want to set the option for all stories in of this kind
   .addParameters({ options: { addonPanelInRight: true } })
-  .addDecorator(withKnobs)
   .add(
-    'Simple',
-    () => {
-      const name = text('Name', 'John Doe');
-      const age = number('Age', 44);
-      return Hello.renderSync({
-        name,
-        age,
-      });
-    },
+    'Story for MyComponent',
+    () => <MyComponent />,
     // If you want to set the options for a specific story
     { options: { addonPanelInRight: false } }
   );
 ```
 
 _NOTE_ that you must attach `withOptions` as a decorator (at the top-level) for this to work.
+
+## Typescript
+
+To install type definitions: `npm install -D @types/storybook__addon-options`
+
+Make sure you also have the type definitions installed for the following libs:
+
+ - node
+ - react
+ 
+You can install them using `npm install -D @types/node @types/react`, assuming you are using Typescript >2.0.
diff --git a/addons/options/package.json b/addons/options/package.json
index ee55dcb54d..2446436aee 100644
--- a/addons/options/package.json
+++ b/addons/options/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-options",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "description": "Options addon for storybook",
   "keywords": [
     "addon",
@@ -23,7 +23,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "4.1.0-alpha.3",
+    "@storybook/addons": "4.1.0-alpha.8",
     "util-deprecate": "^1.0.2"
   },
   "peerDependencies": {
diff --git a/addons/storyshots/storyshots-core/package.json b/addons/storyshots/storyshots-core/package.json
index f913bdf1f8..e05e79c912 100644
--- a/addons/storyshots/storyshots-core/package.json
+++ b/addons/storyshots/storyshots-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storyshots",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.",
   "keywords": [
     "addon",
@@ -28,17 +28,17 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.1.2",
-    "@storybook/addons": "4.1.0-alpha.3",
+    "@storybook/addons": "4.1.0-alpha.8",
     "glob": "^7.1.3",
     "global": "^4.3.2",
     "jest-specific-snapshot": "^1.0.0",
     "read-pkg-up": "^4.0.0"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "4.1.0-alpha.3",
-    "@storybook/addon-links": "4.1.0-alpha.3",
-    "@storybook/addons": "4.1.0-alpha.3",
-    "@storybook/react": "4.1.0-alpha.3",
+    "@storybook/addon-actions": "4.1.0-alpha.8",
+    "@storybook/addon-links": "4.1.0-alpha.8",
+    "@storybook/addons": "4.1.0-alpha.8",
+    "@storybook/react": "4.1.0-alpha.8",
     "enzyme-to-json": "^3.3.4",
     "react": "^16.6.0"
   }
diff --git a/addons/storyshots/storyshots-puppeteer/package.json b/addons/storyshots/storyshots-puppeteer/package.json
index 2bc14e0592..3a43d102c9 100644
--- a/addons/storyshots/storyshots-puppeteer/package.json
+++ b/addons/storyshots/storyshots-puppeteer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storyshots-puppeteer",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "description": "Image snappshots addition to StoryShots base on puppeteer",
   "keywords": [
     "addon",
@@ -25,11 +25,11 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.1.2",
-    "@storybook/node-logger": "4.1.0-alpha.3",
+    "@storybook/node-logger": "4.1.0-alpha.8",
     "jest-image-snapshot": "^2.6.0",
     "puppeteer": "^1.9.0"
   },
   "peerDependencies": {
-    "@storybook/addon-storyshots": "4.1.0-alpha.3"
+    "@storybook/addon-storyshots": "4.1.0-alpha.8"
   }
 }
diff --git a/addons/storysource/package.json b/addons/storysource/package.json
index 7450db35a2..49fd232c2b 100644
--- a/addons/storysource/package.json
+++ b/addons/storysource/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storysource",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "description": "Stories addon for storybook",
   "keywords": [
     "addon",
@@ -25,8 +25,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.1.2",
-    "@storybook/addons": "4.1.0-alpha.3",
-    "@storybook/components": "4.1.0-alpha.3",
+    "@storybook/addons": "4.1.0-alpha.8",
+    "@storybook/components": "4.1.0-alpha.8",
     "estraverse": "^4.2.0",
     "loader-utils": "^1.1.0",
     "prettier": "^1.14.3",
diff --git a/addons/viewport/package.json b/addons/viewport/package.json
index 179715ecf9..48911270a1 100644
--- a/addons/viewport/package.json
+++ b/addons/viewport/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-viewport",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "description": "Storybook addon to change the viewport size to mobile",
   "keywords": [
     "addon",
@@ -24,9 +24,9 @@
   },
   "dependencies": {
     "@emotion/styled": "^0.10.6",
-    "@storybook/addons": "4.1.0-alpha.3",
-    "@storybook/components": "4.1.0-alpha.3",
-    "@storybook/core-events": "4.1.0-alpha.3",
+    "@storybook/addons": "4.1.0-alpha.8",
+    "@storybook/components": "4.1.0-alpha.8",
+    "@storybook/core-events": "4.1.0-alpha.8",
     "global": "^4.3.2",
     "prop-types": "^15.6.2",
     "util-deprecate": "^1.0.2"
diff --git a/app/angular/package.json b/app/angular/package.json
index 1f2cea5cb2..b48a79edf6 100644
--- a/app/angular/package.json
+++ b/app/angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -29,8 +29,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.1.2",
-    "@storybook/core": "4.1.0-alpha.3",
-    "@storybook/node-logger": "4.1.0-alpha.3",
+    "@storybook/core": "4.1.0-alpha.8",
+    "@storybook/node-logger": "4.1.0-alpha.8",
     "angular2-template-loader": "^0.6.2",
     "core-js": "^2.5.7",
     "fork-ts-checker-webpack-plugin": "^0.4.14",
diff --git a/app/ember/package.json b/app/ember/package.json
index 07ef05205d..71af9744c2 100644
--- a/app/ember/package.json
+++ b/app/ember/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/ember",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
   "homepage": "https://github.com/storybooks/storybook/tree/master/app/ember",
   "publishConfig": {
@@ -27,7 +27,7 @@
   "dependencies": {
     "@babel/runtime": "^7.1.2",
     "@ember/test-helpers": "^1.0.0",
-    "@storybook/core": "4.1.0-alpha.3",
+    "@storybook/core": "4.1.0-alpha.8",
     "common-tags": "^1.8.0",
     "global": "^4.3.2",
     "react": "^16.6.0",
diff --git a/app/html/package.json b/app/html/package.json
index 426b14c31d..ca6b4de8c1 100644
--- a/app/html/package.json
+++ b/app/html/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/html",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.1.2",
-    "@storybook/core": "4.1.0-alpha.3",
+    "@storybook/core": "4.1.0-alpha.8",
     "common-tags": "^1.8.0",
     "global": "^4.3.2",
     "html-loader": "^0.5.5",
diff --git a/app/html/src/client/preview/render.js b/app/html/src/client/preview/render.js
index 75484ac511..db2632aa91 100644
--- a/app/html/src/client/preview/render.js
+++ b/app/html/src/client/preview/render.js
@@ -3,13 +3,24 @@ import { stripIndents } from 'common-tags';
 
 const rootElement = document.getElementById('root');
 
-export default function renderMain({ story, selectedKind, selectedStory, showMain, showError }) {
+export default function renderMain({
+  story,
+  selectedKind,
+  selectedStory,
+  showMain,
+  showError,
+  forceRender,
+}) {
   const component = story();
 
   showMain();
   if (typeof component === 'string') {
     rootElement.innerHTML = component;
   } else if (component instanceof Node) {
+    if (forceRender === true) {
+      return;
+    }
+
     rootElement.innerHTML = '';
     rootElement.appendChild(component);
   } else {
diff --git a/app/marko/package.json b/app/marko/package.json
index 8b97f89dc6..95758035eb 100644
--- a/app/marko/package.json
+++ b/app/marko/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/marko",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "description": "Storybook for Marko: Develop Marko Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -29,7 +29,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.1.2",
-    "@storybook/core": "4.1.0-alpha.3",
+    "@storybook/core": "4.1.0-alpha.8",
     "common-tags": "^1.8.0",
     "global": "^4.3.2",
     "marko-loader": "^1.3.3",
diff --git a/app/mithril/package.json b/app/mithril/package.json
index 9722004b50..e41849df12 100644
--- a/app/mithril/package.json
+++ b/app/mithril/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/mithril",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "description": "Storybook for Mithril: Develop Mithril Component in isolation.",
   "keywords": [
     "storybook"
@@ -30,7 +30,7 @@
   "dependencies": {
     "@babel/plugin-transform-react-jsx": "^7.0.0",
     "@babel/runtime": "^7.1.2",
-    "@storybook/core": "4.1.0-alpha.3",
+    "@storybook/core": "4.1.0-alpha.8",
     "common-tags": "^1.8.0",
     "global": "^4.3.2",
     "react": "^16.6.0",
diff --git a/app/polymer/package.json b/app/polymer/package.json
index 41943573f0..8d4601bc03 100644
--- a/app/polymer/package.json
+++ b/app/polymer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/polymer",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "description": "Storybook for Polymer: Develop Polymer components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -29,7 +29,7 @@
   "dependencies": {
     "@babel/polyfill": "^7.0.0",
     "@babel/runtime": "^7.1.2",
-    "@storybook/core": "4.1.0-alpha.3",
+    "@storybook/core": "4.1.0-alpha.8",
     "@webcomponents/webcomponentsjs": "^1.2.0",
     "common-tags": "^1.8.0",
     "global": "^4.3.2",
diff --git a/app/react-native/package.json b/app/react-native/package.json
index eb66ff872b..cc25c4f8ce 100644
--- a/app/react-native/package.json
+++ b/app/react-native/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -28,12 +28,12 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "4.1.0-alpha.3",
-    "@storybook/channel-websocket": "4.1.0-alpha.3",
-    "@storybook/channels": "4.1.0-alpha.3",
-    "@storybook/core": "4.1.0-alpha.3",
-    "@storybook/core-events": "4.1.0-alpha.3",
-    "@storybook/ui": "4.1.0-alpha.3",
+    "@storybook/addons": "4.1.0-alpha.8",
+    "@storybook/channel-websocket": "4.1.0-alpha.8",
+    "@storybook/channels": "4.1.0-alpha.8",
+    "@storybook/core": "4.1.0-alpha.8",
+    "@storybook/core-events": "4.1.0-alpha.8",
+    "@storybook/ui": "4.1.0-alpha.8",
     "babel-loader": "^8.0.4",
     "babel-plugin-macros": "^2.4.2",
     "babel-plugin-syntax-async-functions": "^6.13.0",
diff --git a/app/react-native/readme.md b/app/react-native/readme.md
index 94d2dc1874..3c951d112a 100644
--- a/app/react-native/readme.md
+++ b/app/react-native/readme.md
@@ -22,16 +22,16 @@ The next thing you need to do is make Storybook UI visible in your app.
 The easiest way to use Storybook is to simply replace your App with the Storybook UI, which is possible by replacing `App.js` with a single line of code:
 
 ```js
-export default from "./storybook";
+export default from './storybook';
 ```
 
 This will get you up and running quickly, but then you lose your app!
 There are multiple options here. for example, you can export conditionally:
 
 ```js
-import StorybookUI from "./storybook";
+import StorybookUI from './storybook';
 
-import App from "./app";
+import App from './app';
 
 module.exports = __DEV__ ? StorybookUI : App;
 ```
@@ -127,8 +127,11 @@ You can pass these parameters to getStorybookUI call in your storybook entry poi
     initialSelection: Object (null)
         -- initialize storybook with a specific story. In case a valid object is passed, it will take precedence over `shouldPersistSelection. ex: `{ kind: 'Knobs', story: 'with knobs' }`
     shouldPersistSelection: Boolean (true)
-        -- initialize storybook with the last selected story.`
-    )
+        -- initialize storybook with the last selected story.
+    shouldDisableKeyboardAvoidingView: Boolean (false)
+        -- Disable KeyboardAvoidingView wrapping Storybook's view
+    keyboardAvoidingViewVerticalOffset: Number (0)
+        -- With shouldDisableKeyboardAvoidingView=true, this will set the keyboardverticaloffset (https://facebook.github.io/react-native/docs/keyboardavoidingview#keyboardverticaloffset) value for KeyboardAvoidingView wrapping Storybook's view
 }
 ```
 
diff --git a/app/react-native/src/preview/components/OnDeviceUI/addons/wrapper.js b/app/react-native/src/preview/components/OnDeviceUI/addons/wrapper.js
index 9874e510bd..1b01c00a0c 100644
--- a/app/react-native/src/preview/components/OnDeviceUI/addons/wrapper.js
+++ b/app/react-native/src/preview/components/OnDeviceUI/addons/wrapper.js
@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import { View, ScrollView, KeyboardAvoidingView, Platform } from 'react-native';
+import { View, ScrollView } from 'react-native';
 
 import style from '../style';
 
@@ -8,8 +8,6 @@ export default class Wrapper extends PureComponent {
   render() {
     const { panels, addonSelected } = this.props;
 
-    const keyboardVerticalOffset = Platform.OS === 'ios' ? 60 : 0;
-
     const addonKeys = Object.keys(panels);
 
     return addonKeys.map(id => {
@@ -17,13 +15,7 @@ export default class Wrapper extends PureComponent {
 
       return (
         <View key={id} style={selected ? style.flex : style.invisible}>
-          <KeyboardAvoidingView
-            behavior={Platform.OS === 'android' ? null : 'padding'}
-            keyboardVerticalOffset={keyboardVerticalOffset}
-            style={style.flex}
-          >
-            <ScrollView style={style.flex}>{panels[id].render({ active: selected })}</ScrollView>
-          </KeyboardAvoidingView>
+          <ScrollView style={style.flex}>{panels[id].render({ active: selected })}</ScrollView>
         </View>
       );
     });
diff --git a/app/react-native/src/preview/components/OnDeviceUI/index.js b/app/react-native/src/preview/components/OnDeviceUI/index.js
index 8d1e82887e..ab39f6cd53 100644
--- a/app/react-native/src/preview/components/OnDeviceUI/index.js
+++ b/app/react-native/src/preview/components/OnDeviceUI/index.js
@@ -1,6 +1,13 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import { SafeAreaView, Animated, TouchableOpacity } from 'react-native';
+import {
+  Keyboard,
+  KeyboardAvoidingView,
+  Platform,
+  SafeAreaView,
+  Animated,
+  TouchableOpacity,
+} from 'react-native';
 import Events from '@storybook/core-events';
 
 import StoryListView from '../StoryListView';
@@ -22,6 +29,7 @@ import {
 import style from './style';
 
 const ANIMATION_DURATION = 300;
+const IS_IOS = Platform.OS === 'ios';
 
 export default class OnDeviceUI extends PureComponent {
   constructor(props) {
@@ -32,8 +40,8 @@ export default class OnDeviceUI extends PureComponent {
     this.state = {
       tabOpen,
       slideBetweenAnimation: false,
-      selection: props.initialStory || {},
-      storyFn: props.initialStory ? props.initialStory.storyFn : null,
+      selection: {},
+      storyFn: null,
       previewWidth: 0,
       previewHeight: 0,
     };
@@ -42,8 +50,18 @@ export default class OnDeviceUI extends PureComponent {
     this.forceRender = this.forceUpdate.bind(this);
   }
 
-  componentWillMount() {
-    const { events } = this.props;
+  async componentWillMount() {
+    const { events, getInitialStory } = this.props;
+
+    if (getInitialStory) {
+      const story = await getInitialStory();
+
+      this.setState({
+        selection: story || {},
+        storyFn: story ? story.storyFn : null,
+      });
+    }
+
     events.on(Events.SELECT_STORY, this.handleStoryChange);
     events.on(Events.FORCE_RE_RENDER, this.forceRender);
   }
@@ -95,10 +113,22 @@ export default class OnDeviceUI extends PureComponent {
       // True if swiping between navigator and addons
       slideBetweenAnimation: tabOpen + newTabOpen === PREVIEW,
     });
+
+    // close the keyboard opened from a TextInput from story list or knobs
+    if (newTabOpen === PREVIEW) {
+      Keyboard.dismiss();
+    }
   };
 
   render() {
-    const { stories, events, url, isUIHidden } = this.props;
+    const {
+      stories,
+      events,
+      url,
+      isUIHidden,
+      shouldDisableKeyboardAvoidingView,
+      keyboardAvoidingViewVerticalOffset,
+    } = this.props;
     const {
       tabOpen,
       slideBetweenAnimation,
@@ -121,40 +151,47 @@ export default class OnDeviceUI extends PureComponent {
 
     return (
       <SafeAreaView style={style.flex}>
-        <AbsolutePositionedKeyboardAwareView
-          onLayout={this.onLayout}
-          previewHeight={previewHeight}
-          previewWidth={previewWidth}
+        <KeyboardAvoidingView
+          enabled={!shouldDisableKeyboardAvoidingView || tabOpen !== PREVIEW}
+          behavior={IS_IOS ? 'padding' : null}
+          keyboardVerticalOffset={keyboardAvoidingViewVerticalOffset}
+          style={style.flex}
         >
-          <Animated.View style={previewWrapperStyles}>
-            <Animated.View style={previewStyles}>
-              <TouchableOpacity
-                accessible={false}
-                style={style.flex}
-                disabled={tabOpen === PREVIEW}
-                onPress={this.handleOpenPreview}
-              >
-                <StoryView url={url} events={events} selection={selection} storyFn={storyFn} />
-              </TouchableOpacity>
+          <AbsolutePositionedKeyboardAwareView
+            onLayout={this.onLayout}
+            previewHeight={previewHeight}
+            previewWidth={previewWidth}
+          >
+            <Animated.View style={previewWrapperStyles}>
+              <Animated.View style={previewStyles}>
+                <TouchableOpacity
+                  accessible={false}
+                  style={style.flex}
+                  disabled={tabOpen === PREVIEW}
+                  onPress={this.handleOpenPreview}
+                >
+                  <StoryView url={url} events={events} selection={selection} storyFn={storyFn} />
+                </TouchableOpacity>
+              </Animated.View>
             </Animated.View>
-          </Animated.View>
-          <Panel style={getNavigatorPanelPosition(this.animatedValue, previewWidth)}>
-            <StoryListView
-              stories={stories}
-              events={events}
-              selectedKind={selection.kind}
-              selectedStory={selection.story}
-            />
-          </Panel>
-          <Panel style={getAddonPanelPosition(this.animatedValue, previewWidth)}>
-            <Addons />
-          </Panel>
-        </AbsolutePositionedKeyboardAwareView>
-        <Navigation
-          tabOpen={tabOpen}
-          onChangeTab={this.handleToggleTab}
-          initialUiVisible={!isUIHidden}
-        />
+            <Panel style={getNavigatorPanelPosition(this.animatedValue, previewWidth)}>
+              <StoryListView
+                stories={stories}
+                events={events}
+                selectedKind={selection.kind}
+                selectedStory={selection.story}
+              />
+            </Panel>
+            <Panel style={getAddonPanelPosition(this.animatedValue, previewWidth)}>
+              <Addons />
+            </Panel>
+          </AbsolutePositionedKeyboardAwareView>
+          <Navigation
+            tabOpen={tabOpen}
+            onChangeTab={this.handleToggleTab}
+            initialUiVisible={!isUIHidden}
+          />
+        </KeyboardAvoidingView>
       </SafeAreaView>
     );
   }
@@ -175,16 +212,16 @@ OnDeviceUI.propTypes = {
   url: PropTypes.string,
   tabOpen: PropTypes.number,
   isUIHidden: PropTypes.bool,
-  initialStory: PropTypes.shape({
-    story: PropTypes.string.isRequired,
-    kind: PropTypes.string.isRequired,
-    storyFn: PropTypes.func.isRequired,
-  }),
+  getInitialStory: PropTypes.func,
+  shouldDisableKeyboardAvoidingView: PropTypes.bool,
+  keyboardAvoidingViewVerticalOffset: PropTypes.number,
 };
 
 OnDeviceUI.defaultProps = {
   url: '',
   tabOpen: 0,
   isUIHidden: false,
-  initialStory: null,
+  getInitialStory: null,
+  shouldDisableKeyboardAvoidingView: false,
+  keyboardAvoidingViewVerticalOffset: 0,
 };
diff --git a/app/react-native/src/preview/components/StoryListView/index.js b/app/react-native/src/preview/components/StoryListView/index.js
index a53522b648..750f26ab9c 100644
--- a/app/react-native/src/preview/components/StoryListView/index.js
+++ b/app/react-native/src/preview/components/StoryListView/index.js
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { SectionList, View, Text, TouchableOpacity } from 'react-native';
+import { SectionList, Text, TextInput, TouchableOpacity, View } from 'react-native';
 import Events from '@storybook/core-events';
 import style from './style';
 
@@ -40,6 +40,7 @@ export default class StoryListView extends Component {
 
     this.state = {
       data: [],
+      originalData: [],
     };
 
     this.storyAddedHandler = this.handleStoryAdded.bind(this);
@@ -71,10 +72,37 @@ export default class StoryListView extends Component {
         }),
         {}
       );
-      this.setState({
-        data,
-      });
+
+      this.setState({ data, originalData: data });
+    }
+  };
+
+  handleChangeSearchText = text => {
+    const query = text.trim();
+    const { originalData: data } = this.state;
+
+    if (!query) {
+      this.setState({ data });
+      return;
     }
+
+    const checkValue = value => value.toLowerCase().includes(query.toLowerCase());
+    const filteredData = data.reduce((acc, story) => {
+      const hasTitle = checkValue(story.title);
+      const hasKind = story.data.some(kind => checkValue(kind.name));
+
+      if (hasTitle || hasKind) {
+        acc.push({
+          ...story,
+          // in case the query matches component's title, all of its stories will be shown
+          data: !hasTitle ? story.data.filter(kind => checkValue(kind.name)) : story.data,
+        });
+      }
+
+      return acc;
+    }, []);
+
+    this.setState({ data: filteredData });
   };
 
   changeStory(kind, story) {
@@ -88,24 +116,34 @@ export default class StoryListView extends Component {
     const { data } = this.state;
 
     return (
-      <SectionList
-        testID="Storybook.ListView"
-        style={[style.list]}
-        renderItem={({ item }) => (
-          <ListItem
-            title={item.name}
-            kind={item.kind}
-            selected={item.kind === selectedKind && item.name === selectedStory}
-            onPress={() => this.changeStory(item.kind, item.name)}
-          />
-        )}
-        renderSectionHeader={({ section: { title } }) => (
-          <SectionHeader title={title} selected={title === selectedKind} />
-        )}
-        keyExtractor={(item, index) => item + index}
-        sections={data}
-        stickySectionHeadersEnabled={false}
-      />
+      <View style={style.flex}>
+        <TextInput
+          clearButtonMode="while-editing"
+          disableFullscreenUI
+          onChangeText={this.handleChangeSearchText}
+          placeholder="Filter"
+          returnKeyType="search"
+          style={style.searchBar}
+        />
+        <SectionList
+          testID="Storybook.ListView"
+          style={style.flex}
+          renderItem={({ item }) => (
+            <ListItem
+              title={item.name}
+              kind={item.kind}
+              selected={item.kind === selectedKind && item.name === selectedStory}
+              onPress={() => this.changeStory(item.kind, item.name)}
+            />
+          )}
+          renderSectionHeader={({ section: { title } }) => (
+            <SectionHeader title={title} selected={title === selectedKind} />
+          )}
+          keyExtractor={(item, index) => item + index}
+          sections={data}
+          stickySectionHeadersEnabled={false}
+        />
+      </View>
     );
   }
 }
diff --git a/app/react-native/src/preview/components/StoryListView/style.js b/app/react-native/src/preview/components/StoryListView/style.js
index fe376bbb18..5cac48f5ca 100644
--- a/app/react-native/src/preview/components/StoryListView/style.js
+++ b/app/react-native/src/preview/components/StoryListView/style.js
@@ -1,10 +1,17 @@
 export default {
-  list: {
+  searchBar: {
+    backgroundColor: '#eee',
+    borderRadius: 5,
+    fontSize: 16,
+    marginHorizontal: 5,
+    marginVertical: 5,
+    padding: 5,
+  },
+  flex: {
     flex: 1,
   },
   header: {
-    paddingTop: 5,
-    paddingBottom: 5,
+    paddingVertical: 5,
   },
   headerText: {
     fontSize: 20,
diff --git a/app/react-native/src/preview/index.js b/app/react-native/src/preview/index.js
index e01cb14b47..42c181fb50 100644
--- a/app/react-native/src/preview/index.js
+++ b/app/react-native/src/preview/index.js
@@ -1,4 +1,4 @@
-/* eslint-disable react/no-this-in-sfc, no-underscore-dangle */
+/* eslint-disable no-underscore-dangle */
 
 import React from 'react';
 import { AsyncStorage, NativeModules } from 'react-native';
@@ -46,7 +46,7 @@ export default class Preview {
     let channel = null;
 
     const onDeviceUI = params.onDeviceUI !== false;
-
+    const { initialSelection, shouldPersistSelection } = params;
     // should the initial story be sent to storybookUI
     // set to true if using disableWebsockets or if connection to WebsocketServer fails.
     let setInitialStory = false;
@@ -67,7 +67,7 @@ export default class Preview {
         const port = params.port !== false ? `:${params.port || 7007}` : '';
 
         const query = params.query || '';
-        const { initialSelection, secured, shouldPersistSelection } = params;
+        const { secured } = params;
         const websocketType = secured ? 'wss' : 'ws';
         const httpType = secured ? 'https' : 'http';
 
@@ -77,6 +77,8 @@ export default class Preview {
           url,
           async: onDeviceUI,
           onError: () => {
+            // We are both emitting event and telling the component to get initial story. It may happen that component is created before the error or vise versa.
+            // This way we handle both cases
             this._setInitialStory(initialSelection, shouldPersistSelection);
 
             setInitialStory = true;
@@ -90,7 +92,7 @@ export default class Preview {
     }
 
     channel.on(Events.GET_STORIES, () => this._sendSetStories());
-    channel.on(Events.SET_CURRENT_STORY, d => this._selectStory(d));
+    channel.on(Events.SET_CURRENT_STORY, d => this._selectStoryEvent(d));
     this._sendSetStories();
 
     // If the app is started with server running, set the story as the one selected in the browser
@@ -114,7 +116,13 @@ export default class Preview {
               url={webUrl}
               isUIOpen={params.isUIOpen}
               tabOpen={params.tabOpen}
-              initialStory={setInitialStory ? preview._getInitialStory() : null}
+              getInitialStory={
+                setInitialStory
+                  ? preview._getInitialStory(initialSelection, shouldPersistSelection)
+                  : null
+              }
+              shouldDisableKeyboardAvoidingView={params.shouldDisableKeyboardAvoidingView}
+              keyboardAvoidingViewVerticalOffset={params.keyboardAvoidingViewVerticalOffset}
             />
           );
         }
@@ -136,8 +144,15 @@ export default class Preview {
   }
 
   _setInitialStory = async (initialSelection, shouldPersistSelection = true) => {
-    let story = this._getInitialStory();
+    const story = await this._getInitialStory(initialSelection, shouldPersistSelection)();
+
+    if (story) {
+      this._selectStory(story);
+    }
+  };
 
+  _getInitialStory = (initialSelection, shouldPersistSelection = true) => async () => {
+    let story = null;
     if (initialSelection && this._checkStory(initialSelection)) {
       story = initialSelection;
     } else if (shouldPersistSelection) {
@@ -150,11 +165,9 @@ export default class Preview {
     }
 
     if (story) {
-      this._selectStory(story);
+      this._getStory(story);
     }
-  };
 
-  _getInitialStory = () => {
     const dump = this._stories.dumpStoryBook();
 
     const nonEmptyKind = dump.find(kind => kind.stories.length > 0);
@@ -171,11 +184,16 @@ export default class Preview {
     return { ...selection, storyFn };
   }
 
-  _selectStory(selection) {
-    const channel = addons.getChannel();
-
-    channel.emit(Events.SELECT_STORY, this._getStory(selection));
+  _selectStoryEvent(selection) {
     AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(selection));
+
+    const story = this._getStory(selection);
+    this._selectStory(story);
+  }
+
+  _selectStory(story) {
+    const channel = addons.getChannel();
+    channel.emit(Events.SELECT_STORY, story);
   }
 
   _checkStory(selection) {
diff --git a/app/react/package.json b/app/react/package.json
index 5e58c6db4a..bac12d10e4 100644
--- a/app/react/package.json
+++ b/app/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -28,25 +28,29 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
+    "@babel/plugin-transform-react-constant-elements": "^7.0.0",
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/runtime": "^7.1.2",
     "@emotion/styled": "^0.10.6",
-    "@storybook/core": "4.1.0-alpha.3",
-    "@storybook/node-logger": "4.1.0-alpha.3",
+    "@storybook/core": "4.1.0-alpha.8",
+    "@storybook/node-logger": "4.1.0-alpha.8",
+    "@svgr/webpack": "^4.0.3",
+    "babel-plugin-named-asset-import": "^0.2.3",
     "babel-plugin-react-docgen": "^2.0.0",
+    "babel-preset-react-app": "^6.1.0",
     "common-tags": "^1.8.0",
     "global": "^4.3.2",
     "lodash": "^4.17.11",
     "mini-css-extract-plugin": "^0.4.4",
     "prop-types": "^15.6.2",
+    "react": "^16.6.0",
     "react-dev-utils": "^6.1.0",
+    "react-dom": "^16.6.0",
     "semver": "^5.6.0",
     "webpack": "^4.23.1"
   },
   "peerDependencies": {
-    "babel-loader": "^7.0.0 || ^8.0.0",
-    "react": ">=15.0.0",
-    "react-dom": ">=15.0.0"
+    "babel-loader": "^7.0.0 || ^8.0.0"
   }
 }
diff --git a/app/react/src/client/preview/render.js b/app/react/src/client/preview/render.js
index 31ad993e31..d4bd2627c1 100644
--- a/app/react/src/client/preview/render.js
+++ b/app/react/src/client/preview/render.js
@@ -46,7 +46,7 @@ export default function renderMain({
   }
 
   // We need to unmount the existing set of components in the DOM node.
-  // Otherwise, React may not recrease instances for every story run.
+  // Otherwise, React may not recreate instances for every story run.
   // This could leads to issues like below:
   // https://github.com/storybooks/react-storybook/issues/81
   // But forceRender means that it's the same story, so we want too keep the state in that case.
diff --git a/app/react/src/server/cra-config.js b/app/react/src/server/cra-config.js
index a0fd2af4d1..d67b6fffda 100644
--- a/app/react/src/server/cra-config.js
+++ b/app/react/src/server/cra-config.js
@@ -5,74 +5,104 @@ import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 
 import { normalizeCondition } from 'webpack/lib/RuleSet';
 
+const cssExtensions = ['.css', '.scss', '.sass'];
+const cssModuleExtensions = ['.module.css', '.module.scss', '.module.sass'];
+const typeScriptExtensions = ['.ts', '.tsx'];
+
 let reactScriptsPath;
+
 export function getReactScriptsPath({ noCache } = {}) {
   if (reactScriptsPath && !noCache) return reactScriptsPath;
+
   const appDirectory = fs.realpathSync(process.cwd());
   const reactScriptsScriptPath = fs.realpathSync(
     path.join(appDirectory, '/node_modules/.bin/react-scripts')
   );
+
   reactScriptsPath = path.join(reactScriptsScriptPath, '../..');
+  const scriptsPkgJson = path.join(reactScriptsPath, 'package.json');
+
+  if (!fs.existsSync(scriptsPkgJson)) {
+    reactScriptsPath = 'react-scripts';
+  }
+
   return reactScriptsPath;
 }
 
-export function isReactScriptsInstalled() {
+export function isReactScriptsInstalled(requiredVersion = '2.0.0') {
   try {
-    // eslint-disable-next-line global-require, import/no-dynamic-require
+    // eslint-disable-next-line import/no-dynamic-require,global-require
     const reactScriptsJson = require(path.join(getReactScriptsPath(), 'package.json'));
-    if (semver.lt(reactScriptsJson.version, '2.0.0')) return false;
-    return true;
+    return !semver.lt(reactScriptsJson.version, requiredVersion);
   } catch (e) {
     return false;
   }
 }
 
-export function getStyleRules(rules) {
-  // Extensions of style rules we're interested in
-  const extensions = ['.css', '.scss', '.sass', '.module.css', '.module.scss', '.module.sass'];
-
-  return rules.reduce((styleRules, rule) => {
+export const getRules = extensions => rules =>
+  rules.reduce((craRules, rule) => {
     // If at least one style extension satisfies the rule test, the rule is one
     // we want to extract
     if (rule.test && extensions.some(normalizeCondition(rule.test))) {
       // If the base test is for styles, return early
-      return styleRules.concat(rule);
+      return craRules.concat(rule);
     }
 
     //  Get any style rules contained in rule.oneOf
     if (!rule.test && rule.oneOf) {
-      styleRules.push(...getStyleRules(rule.oneOf));
+      craRules.push(...getRules(extensions)(rule.oneOf));
     }
 
     // Get any style rules contained in rule.rules
     if (!rule.test && rule.rules) {
-      styleRules.push(...getStyleRules(rule.rules));
+      craRules.push(...getRules(extensions)(rule.rules));
     }
 
-    return styleRules;
+    return craRules;
   }, []);
-}
+
+const getStyleRules = getRules(cssExtensions.concat(cssModuleExtensions));
+const getTypeScriptRules = getRules(typeScriptExtensions);
 
 export function getCraWebpackConfig(mode) {
-  if (mode === 'production') {
-    // eslint-disable-next-line global-require, import/no-dynamic-require
-    return require(path.join(getReactScriptsPath(), 'config/webpack.config.prod'));
+  const pathToReactScripts = getReactScriptsPath();
+
+  const craWebpackConfig =
+    mode === 'production' ? 'config/webpack.config.prod' : 'config/webpack.config.dev';
+
+  let pathToWebpackConfig = require.resolve(path.join(pathToReactScripts, craWebpackConfig));
+
+  if (!fs.existsSync(pathToWebpackConfig)) {
+    pathToWebpackConfig = path.join(pathToReactScripts, 'config/webpack.config');
   }
 
-  // eslint-disable-next-line global-require, import/no-dynamic-require
-  return require(path.join(getReactScriptsPath(), 'config/webpack.config.dev'));
+  // eslint-disable-next-line import/no-dynamic-require,global-require
+  const webpackConfig = require(pathToWebpackConfig);
+
+  if (typeof webpackConfig === 'function') {
+    return webpackConfig(mode);
+  }
+
+  return webpackConfig;
 }
 
 export function applyCRAWebpackConfig(baseConfig) {
+  // Check if the user can use TypeScript (react-scripts version 2.1+).
+  const hasTsSupport = isReactScriptsInstalled('2.1.0');
+
+  const tsExtensions = hasTsSupport ? typeScriptExtensions : [];
+  const extensions = [...cssExtensions, ...tsExtensions];
+
   // Remove any rules from baseConfig that test true for any one of the extensions
-  const baseRulesExcludingStyles = baseConfig.module.rules.filter(
-    rule => !rule.test || !['.css', '.scss', '.sass'].some(normalizeCondition(rule.test))
+  const filteredBaseRules = baseConfig.module.rules.filter(
+    rule => !rule.test || !extensions.some(normalizeCondition(rule.test))
   );
 
   //  Load create-react-app config
   const craWebpackConfig = getCraWebpackConfig(baseConfig.mode);
 
   const craStyleRules = getStyleRules(craWebpackConfig.module.rules);
+  const craTypeScriptRules = hasTsSupport ? getTypeScriptRules(craWebpackConfig.module.rules) : [];
 
   //  Add css minification for production
   const plugins = [...baseConfig.plugins];
@@ -84,8 +114,12 @@ export function applyCRAWebpackConfig(baseConfig) {
     ...baseConfig,
     module: {
       ...baseConfig.module,
-      rules: [...baseRulesExcludingStyles, ...craStyleRules],
+      rules: [...filteredBaseRules, ...craStyleRules, ...craTypeScriptRules],
     },
     plugins,
+    resolve: {
+      ...baseConfig.resolve,
+      extensions: [...baseConfig.resolve.extensions, ...tsExtensions],
+    },
   };
 }
diff --git a/app/react/src/server/__tests__/cra-config.test.js b/app/react/src/server/cra-config.test.js
similarity index 93%
rename from app/react/src/server/__tests__/cra-config.test.js
rename to app/react/src/server/cra-config.test.js
index f48f38426d..bf99c6aa36 100644
--- a/app/react/src/server/__tests__/cra-config.test.js
+++ b/app/react/src/server/cra-config.test.js
@@ -1,8 +1,9 @@
 import fs from 'fs';
-import { getReactScriptsPath } from '../cra-config';
+import { getReactScriptsPath } from './cra-config';
 
 jest.mock('fs', () => ({
   realpathSync: jest.fn(),
+  existsSync: () => true,
 }));
 jest.mock('mini-css-extract-plugin', () => {});
 
diff --git a/app/react/src/server/framework-preset-cra-styles.js b/app/react/src/server/framework-preset-cra-styles.js
deleted file mode 100644
index 96ffc15ccd..0000000000
--- a/app/react/src/server/framework-preset-cra-styles.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { logger } from '@storybook/node-logger';
-import { applyCRAWebpackConfig, isReactScriptsInstalled } from './cra-config';
-
-export function webpackFinal(config) {
-  if (!isReactScriptsInstalled()) {
-    logger.info('=> Using base config because react-scripts is not installed.');
-    return config;
-  }
-
-  logger.info('=> Loading create-react-app config.');
-
-  return applyCRAWebpackConfig(config);
-}
diff --git a/app/react/src/server/framework-preset-cra.js b/app/react/src/server/framework-preset-cra.js
new file mode 100644
index 0000000000..c86bdf2e74
--- /dev/null
+++ b/app/react/src/server/framework-preset-cra.js
@@ -0,0 +1,36 @@
+import { logger } from '@storybook/node-logger';
+import { applyCRAWebpackConfig, isReactScriptsInstalled } from './cra-config';
+
+export function webpackFinal(config) {
+  if (!isReactScriptsInstalled()) {
+    logger.info('=> Using base config because react-scripts is not installed.');
+    return config;
+  }
+
+  logger.info('=> Loading create-react-app config.');
+
+  return applyCRAWebpackConfig(config);
+}
+
+export function babelDefault(config) {
+  if (!isReactScriptsInstalled()) {
+    return config;
+  }
+
+  return {
+    ...config,
+    presets: [require.resolve('babel-preset-react-app')],
+    plugins: [
+      [
+        require.resolve('babel-plugin-named-asset-import'),
+        {
+          loaderMap: {
+            svg: {
+              ReactComponent: '@svgr/webpack?-prettier,-svgo![path]',
+            },
+          },
+        },
+      ],
+    ],
+  };
+}
diff --git a/app/react/src/server/options.js b/app/react/src/server/options.js
index 643114ff9a..a14cc3f4a6 100644
--- a/app/react/src/server/options.js
+++ b/app/react/src/server/options.js
@@ -5,7 +5,7 @@ export default {
   defaultConfigName: 'create-react-app',
   frameworkPresets: [
     require.resolve('./framework-preset-react.js'),
+    require.resolve('./framework-preset-cra.js'),
     require.resolve('./framework-preset-react-docgen.js'),
-    require.resolve('./framework-preset-cra-styles.js'),
   ],
 };
diff --git a/app/riot/package.json b/app/riot/package.json
index a4d3cc8b6a..afcddfc523 100644
--- a/app/riot/package.json
+++ b/app/riot/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/riot",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "description": "Storybook for riot.js: View riot snippets in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.1.2",
-    "@storybook/core": "4.1.0-alpha.3",
+    "@storybook/core": "4.1.0-alpha.8",
     "common-tags": "^1.8.0",
     "global": "^4.3.2",
     "raw-loader": "^0.5.1",
diff --git a/app/svelte/package.json b/app/svelte/package.json
index d62959bf88..bc35ec6322 100644
--- a/app/svelte/package.json
+++ b/app/svelte/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/svelte",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -28,14 +28,14 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/core": "4.1.0-alpha.3",
+    "@storybook/core": "4.1.0-alpha.8",
     "common-tags": "^1.8.0",
     "global": "^4.3.2",
     "react": "^16.6.0",
     "react-dom": "^16.6.0"
   },
   "devDependencies": {
-    "svelte": "^2.15.2",
+    "svelte": "^2.15.3",
     "svelte-loader": "^2.11.0"
   },
   "peerDependencies": {
diff --git a/app/vue/package.json b/app/vue/package.json
index 730ccdad64..1feec061ed 100644
--- a/app/vue/package.json
+++ b/app/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -29,7 +29,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.1.2",
-    "@storybook/core": "4.1.0-alpha.3",
+    "@storybook/core": "4.1.0-alpha.8",
     "common-tags": "^1.8.0",
     "global": "^4.3.2",
     "react": "^16.6.0",
diff --git a/app/vue/src/client/preview/render.js b/app/vue/src/client/preview/render.js
index f6a4dbf091..7204bfccae 100644
--- a/app/vue/src/client/preview/render.js
+++ b/app/vue/src/client/preview/render.js
@@ -1,12 +1,26 @@
 import { stripIndents } from 'common-tags';
 import Vue from 'vue';
 
-let app = null;
+let root = null;
 
-function renderRoot(options) {
-  if (app) app.$destroy();
+function getComponentProxy(component) {
+  return Object.entries(component.props || {})
+    .map(([name, def]) => ({ [name]: def.default }))
+    .reduce((wrap, prop) => ({ ...wrap, ...prop }), {});
+}
+
+function renderRoot(component, proxy) {
+  root = new Vue({
+    el: '#root',
+    beforeCreate() {
+      this.proxy = proxy;
+    },
 
-  app = new Vue(options);
+    render(h) {
+      const props = this.proxy;
+      return h('div', { attrs: { id: 'root' } }, [h(component, { props })]);
+    },
+  });
 }
 
 export default function render({
@@ -16,6 +30,7 @@ export default function render({
   showMain,
   showError,
   showException,
+  forceRender,
 }) {
   Vue.config.errorHandler = showException;
 
@@ -33,10 +48,16 @@ export default function render({
   }
 
   showMain();
-  renderRoot({
-    el: '#root',
-    render(h) {
-      return h('div', { attrs: { id: 'root' } }, [h(component)]);
-    },
-  });
+
+  const proxy = getComponentProxy(component);
+
+  // at component creation || refresh by HMR
+  if (!root || !forceRender) {
+    if (root) root.$destroy();
+
+    renderRoot(component, proxy);
+  } else {
+    root.proxy = proxy;
+    root.$forceUpdate();
+  }
 }
diff --git a/dangerfile.js b/dangerfile.js
index f798a2e3cb..b5cd656bff 100644
--- a/dangerfile.js
+++ b/dangerfile.js
@@ -37,6 +37,8 @@ const checkRequiredLabels = labels => {
   const foundLabels = intersection(requiredLabels, labels);
   if (isEmpty(foundLabels)) {
     fail(`PR is not labeled with one of: ${JSON.stringify(requiredLabels)}`);
+  } else if (foundLabels.length > 1) {
+    fail(`Please choose only one of these labels: ${JSON.stringify(foundLabels)}`);
   }
 };
 
diff --git a/docs/package.json b/docs/package.json
index 9a6f3043da..1328083424 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -19,8 +19,8 @@
     "prepare": "npm run snyk-protect"
   },
   "dependencies": {
-    "@storybook/addon-actions": "^4.0.0",
-    "@storybook/addon-links": "^4.0.4",
+    "@storybook/addon-actions": "^4.0.9",
+    "@storybook/addon-links": "^4.0.9",
     "@storybook/addons": "^3.4.11",
     "@storybook/react": "^3.4.11",
     "babel-loader": "^6.4.1",
@@ -38,7 +38,7 @@
     "global": "^4.3.2",
     "highlight.js": "^9.13.1",
     "lodash": "^4.17.11",
-    "marked": "^0.5.1",
+    "marked": "^0.5.2",
     "prop-types": "^15.6.2",
     "react": "^15.6.2",
     "react-document-title": "^2.0.3",
@@ -47,7 +47,7 @@
     "react-router": "^4.3.1",
     "react-stack-grid": "^0.7.1",
     "sitemap": "^2.1.0",
-    "snyk": "^1.108.0"
+    "snyk": "^1.110.2"
   },
   "snyk": true
 }
diff --git a/docs/src/pages/addons/addon-gallery/index.md b/docs/src/pages/addons/addon-gallery/index.md
index 00d66bdf63..53283e7639 100644
--- a/docs/src/pages/addons/addon-gallery/index.md
+++ b/docs/src/pages/addons/addon-gallery/index.md
@@ -46,7 +46,7 @@ Storyshots is a way to automatically jest-snapshot all your stories. [More info
 
 Redirects console output (logs, errors, warnings) into Action Logger Panel. `withConsole` decorator notifies from what stories logs are coming.
 
-### [Backgrounds](https://github.com/storybooks/storybook/tree/master/addons/background)
+### [Backgrounds](https://github.com/storybooks/storybook/tree/master/addons/backgrounds)
 
 With this addon, you can switch between background colors and background images for your preview components. It is really helpful for styleguides.
 
diff --git a/docs/src/pages/addons/writing-addons/index.md b/docs/src/pages/addons/writing-addons/index.md
index abb274c675..c194c11407 100644
--- a/docs/src/pages/addons/writing-addons/index.md
+++ b/docs/src/pages/addons/writing-addons/index.md
@@ -238,7 +238,7 @@ storiesOf('Button', module)
 
 We use [emotion](https://emotion.sh) for styling, AND we provide a theme which can be set by the user!
 
-We highly recommend you also use emotion to style your components for storybook, but it's not a requirement. You can use inline styles or another css-in-js lib. You can receive the theme as a prop by using the `withCSSContext` hoc from emotion. [Read more about theming](/configuration/theming).
+We highly recommend you also use emotion to style your components for storybook, but it's not a requirement. You can use inline styles or another css-in-js lib. You can receive the theme as a prop by using the `withCSSContext` hoc from emotion. [Read more about theming](/configurations/theming).
 
 ## Re-using existing components
 
diff --git a/docs/src/pages/basics/guide-ember/index.md b/docs/src/pages/basics/guide-ember/index.md
index 0b76d9dc97..91f0976dec 100644
--- a/docs/src/pages/basics/guide-ember/index.md
+++ b/docs/src/pages/basics/guide-ember/index.md
@@ -90,10 +90,10 @@ storiesOf('Demo', module)
     return {
       template: hbs`<button {{action onClick}}>
         Hello Button
-      </button>`
-    },
-    context: {
-      onClick: (e) => console.log(e)
+      </button>`,
+      context: {
+        onClick: (e) => console.log(e)
+      }
     }
   })
   .add('component', () => {
diff --git a/docs/src/pages/basics/guide-react-native/index.md b/docs/src/pages/basics/guide-react-native/index.md
index 35527dd7a7..c9f9db8250 100644
--- a/docs/src/pages/basics/guide-react-native/index.md
+++ b/docs/src/pages/basics/guide-react-native/index.md
@@ -73,7 +73,7 @@ import '@storybook/addon-ondevice-notes/register';
  The easiest solution is to replace your app entry with:
  
 ```js
-import './storybook';
+export default from './storybook';
 ```
 
 If you cannot replace your entry point just make sure that the component exported from `./storybook` is displayed
@@ -86,6 +86,7 @@ RN application, e.g. on a tab or within an admin screen.
 Now you can write some stories inside the `storybook/stories/index.js` file, like this:
 
 ```js
+import React from 'react';
 import { storiesOf } from '@storybook/react-native';
 import { View, Text } from 'react-native';
 
@@ -102,7 +103,7 @@ const CenteredView = ({ children }) => (
   </View>
 );
 
-storiesOf('CenteredView')
+storiesOf('CenteredView', module)
   .add('default view', () => (
     <CenteredView>
       <Text>Hello Storybook</Text>
diff --git a/docs/src/pages/basics/guide-react/index.md b/docs/src/pages/basics/guide-react/index.md
index 30a240e65e..ed33c1c2e4 100644
--- a/docs/src/pages/basics/guide-react/index.md
+++ b/docs/src/pages/basics/guide-react/index.md
@@ -5,33 +5,33 @@ title: 'Storybook for React'
 
 You may have tried to use our quick start guide to setup your project for Storybook. If you want to set up Storybook manually, this is the guide for you.
 
-> This will also help you to understand how Storybook works.
+This will also help you to understand how Storybook works.
 
 ## Starter Guide React
 
-Storybook has its own Webpack setup and a dev server. Webpack setup is very similar to [Create React App](https://github.com/facebookincubator/create-react-app), but allows you to configure as you want.
+Storybook has its own Webpack setup and a dev server. Webpack setup is very similar to [Create React App](https://github.com/facebookincubator/create-react-app), but allows you to configure it as you want.
 
 In this guide, we will set up Storybook for your React project.
 
 ## Table of contents
 
 -   [Add @storybook/react](#add-storybookreact)
--   [Add react, react-dom, and babel-core](#add-react-react-dom-and-babel-core)
+-   [Add react, react-dom, @babel/core, and babel-loader](#add-react-react-dom-babel-core-and-babel-loader)
 -   [Create the config file](#create-the-config-file)
 -   [Write your stories](#write-your-stories)
 -   [Run your Storybook](#run-your-storybook)
 
 ## Add @storybook/react
 
-First of all, you need to add `@storybook/react` to your project. To do that, simply run:
+First of all, you need to add `@storybook/react` to your project. To do that, run:
 
 ```sh
 npm i --save-dev @storybook/react
 ```
 
-## Add react, react-dom, babel-core, and babel-loader
+## Add react, react-dom, @babel/core, and babel-loader
 
-Make sure that you have `react`, `react-dom`, `@babel/core`, and `babel-loader` in your dependencies as well because we list these as a peerDependency:
+Make sure that you have `react`, `react-dom`, `@babel/core`, and `babel-loader` in your dependencies as well because we list these as a peer dependencies:
 
 ```sh
 npm i --save react react-dom
@@ -39,7 +39,7 @@ npm i --save-dev @babel/core
 npm i --save-dev babel-loader
 ```
 
-Then add the following NPM script to your package json in order to start the storybook later in this guide:
+Then add the following NPM script to your `package.json` in order to start the storybook later in this guide:
 
 ```json
 {
@@ -54,9 +54,9 @@ Then add the following NPM script to your package json in order to start the sto
 Storybook can be configured in several different ways. 
 That’s why we need a config directory. We've added a `-c` option to the above NPM script mentioning `.storybook` as the config directory.
 
-For the basic Storybook configuration file, you don't need to do much, but simply tell Storybook where to find stories.
+For a basic Storybook configuration, the only thing you need to do is tell Storybook where to find stories.
 
-To do that, simply create a file at `.storybook/config.js` with the following content:
+To do that, create a file at `.storybook/config.js` with the following content:
 
 ```js
 import { configure } from '@storybook/react';
@@ -80,26 +80,25 @@ Now you can write some stories inside the `../stories/index.js` file, like this:
 ```js
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
 import { Button } from '@storybook/react/demo';
 
 storiesOf('Button', module)
   .add('with text', () => (
-    <Button onClick={action('clicked')}>Hello Button</Button>
+    <Button>Hello Button</Button>
   ))
   .add('with some emoji', () => (
-    <Button onClick={action('clicked')}><span role="img" aria-label="so cool">😀 😎 👍 💯</span></Button>
+    <Button><span role="img" aria-label="so cool">😀 😎 👍 💯</span></Button>
   ));   
 ```
 
-Story is a single state of your component. In the above case, there are two stories for the native button component:
+Each story is a single state of your component. In the above case, there are two stories for the demo button component:
 
-1.  with text
-2.  with some emoji
+1.  With text
+2.  With some emoji
 
 ## Run your Storybook
 
-Now everything is ready. Simply run your storybook with:
+Now everything is ready. Run your storybook with:
 
 ```sh
 npm run storybook
@@ -109,4 +108,4 @@ Then you can see all your stories, like this:
 
 ![Basic stories](../static/basic-stories.png)
 
-Now you can change components and write stories whenever you need to. You'll get those changes into Storybook in a snap with the help of Webpack's HMR API.
+Now you can change components and write stories whenever you need to. You'll see the changes in Storybook immediately since it uses Webpack's hot module reloading.
diff --git a/docs/src/pages/basics/guide-vue/index.md b/docs/src/pages/basics/guide-vue/index.md
index 7c50fe90e9..2fa14f4da3 100644
--- a/docs/src/pages/basics/guide-vue/index.md
+++ b/docs/src/pages/basics/guide-vue/index.md
@@ -37,8 +37,8 @@ Make sure that you have `vue`, `babel-core`, `babel-loader` in your dependencies
 
 ```sh
 npm i --save vue
-npm i --save-dev babel-core
-npm i --save-dev babel-loader
+npm i --save-dev babel-loader vue-loader vue-template-compiler
+npm i --save-dev @babel/core babel-preset-vue
 ```
 
 ## Create the NPM script
diff --git a/docs/src/pages/configurations/theming/index.md b/docs/src/pages/configurations/theming/index.md
index b30d0ebd6c..482842c52d 100644
--- a/docs/src/pages/configurations/theming/index.md
+++ b/docs/src/pages/configurations/theming/index.md
@@ -7,18 +7,29 @@ Storybook's manager UI is theme-able! You can change theme variables using [addo
 
 ## Set a theme
 
-You can do this in an decorator, addon or in `config.js`. Changing theme at runtime is supported!
+You can do this in an decorator, addon or in `.storybook/config.js`. Changing theme at runtime is supported!
 
+First, create or modify `.storybook/addons.js` to include registering addon-options:  
 ```js
-import { setOptions } from '@storybook/addon-options';
+import '@storybook/addon-options/register';
+```
+
+Then, modify `.storybook/config.js` to include your new options:  
+```js
+import { addDecorator, configure } from '@storybook/react';
+import { withOptions } from '@storybook/addon-options';
 
-setOptions({
-  theme: {},
+addDecorator(
+  withOptions({
+    theme: {},
+  })
 });
 ```
 
 When setting a theme, set a full theme object, the theme is replaced, not combined.
 
+See more addon options at https://github.com/storybooks/storybook/tree/master/addons/options
+
 ## Get a theme
 
 We have created 2 themes for you: "normal" (a light theme) and "dark" (a dark theme).
@@ -26,7 +37,17 @@ We have created 2 themes for you: "normal" (a light theme) and "dark" (a dark th
 You can get these themes like so:
 
 ```js
+import { addDecorator, configure } from '@storybook/react';
+import { withOptions } from '@storybook/addon-options';
 import { themes } from '@storybook/components';
+
+// Option defaults.
+addDecorator(
+  withOptions({
+    name: 'Foo',
+    theme: themes.dark,
+  })
+);
 ```
 
 ## Theme variables
diff --git a/docs/yarn.lock b/docs/yarn.lock
index bbc1e407be..1b1b01a528 100644
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -147,17 +147,17 @@
     react-inspector "^2.2.2"
     uuid "^3.2.1"
 
-"@storybook/addon-actions@^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-4.0.0.tgz#7dfd5f2c2d180d38faa29d111ed3ed31ce1e84e0"
-  integrity sha512-yg+oCofxOxoYq4K7V7r0fwpuIUnmGvCkwrT8Rx/TOtAVk47PqSToLWCJDmy58b+yWa9nl+EukclVpr/H9AmZVA==
+"@storybook/addon-actions@^4.0.9":
+  version "4.0.9"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-4.0.9.tgz#6733e37641329751a7b90722f71893dc019d20b5"
+  integrity sha512-CRMofmt1wF8D2MLxXlm/IKSfDpNatooUliRo57jaHMa+0F+alDQbujgQJR7mAvHVN/MFQQ2Go+5PXDnfijKkHw==
   dependencies:
     "@emotion/core" "^0.13.1"
     "@emotion/provider" "^0.11.2"
     "@emotion/styled" "^0.10.6"
-    "@storybook/addons" "4.0.0"
-    "@storybook/components" "4.0.0"
-    "@storybook/core-events" "4.0.0"
+    "@storybook/addons" "4.0.9"
+    "@storybook/components" "4.0.9"
+    "@storybook/core-events" "4.0.8"
     deep-equal "^1.0.1"
     global "^4.3.2"
     lodash "^4.17.11"
@@ -176,14 +176,14 @@
     global "^4.3.2"
     prop-types "^15.6.1"
 
-"@storybook/addon-links@^4.0.4":
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-4.0.4.tgz#0b225c460335eb5da4af6d9061a82c2bb4cb9d74"
-  integrity sha512-f8uuwY9uqmG02Q+Zu10Hppq118JG2Ksih0BvpY2X3d2JAkcWllH0YosH6Sd5g1TgxMI+OMSXLDEsAojmmMX9MQ==
+"@storybook/addon-links@^4.0.9":
+  version "4.0.9"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-4.0.9.tgz#72f594c46d70d9e7008888517765fa452c338cd6"
+  integrity sha512-n5KUirtb5r8YcXXV/pLjx0wf9E9YbzUfaaj76Z4hNkLegtG/9AJCXe0paFqwFXM7gi2nQR0ldWopdZqgVpV77g==
   dependencies:
-    "@storybook/addons" "4.0.4"
-    "@storybook/components" "4.0.4"
-    "@storybook/core-events" "4.0.4"
+    "@storybook/addons" "4.0.9"
+    "@storybook/components" "4.0.9"
+    "@storybook/core-events" "4.0.8"
     global "^4.3.2"
     prop-types "^15.6.2"
 
@@ -192,23 +192,13 @@
   resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-3.4.11.tgz#f3e27c46d80ad1f171888c4aad0a19a8a032d072"
   integrity sha512-Uf01aZ1arcpG1prrrCrBCUYW63lDaoG+r/i3TNo1iG9ZaNc+2UHWeuiEedLfHg0fi/q7UnqMNWDiyO3AkEwwrA==
 
-"@storybook/addons@4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-4.0.0.tgz#b71b545a735b902fa62934ac98fd262b65c924f7"
-  integrity sha512-hIYM9I/7ZV5bojQiuOwQTPWQT/wBYB8iCY9yi3BiL1/ob/YOf8xeSmi4NGecCyPd2j0CKIB+vxvEv/6X3tgclQ==
-  dependencies:
-    "@storybook/channels" "4.0.0"
-    "@storybook/components" "4.0.0"
-    global "^4.3.2"
-    util-deprecate "^1.0.2"
-
-"@storybook/addons@4.0.4":
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-4.0.4.tgz#133609c527435aba1149ead53ca91f694db1a490"
-  integrity sha512-e7S5kYCytPsAM2p8dMQNUV0QEnY9P9mf6zVgbVgdZ2O1b2uMwD/ABj/BhYLgsB7gdshGrcV5vkMXAAGwMsN6Sg==
+"@storybook/addons@4.0.9":
+  version "4.0.9"
+  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-4.0.9.tgz#cfa18fe10ddda454dbbc3aae17562e46d04d3955"
+  integrity sha512-D+RsN1fNywgk46UxG6Lue+p9Egf7/DpgEJtQb6RS+UoyOF24p3FlwWMh36kpRfSSgGqFZ+a0jIKhXuRSr31UNQ==
   dependencies:
-    "@storybook/channels" "4.0.4"
-    "@storybook/components" "4.0.4"
+    "@storybook/channels" "4.0.8"
+    "@storybook/components" "4.0.9"
     global "^4.3.2"
     util-deprecate "^1.0.2"
 
@@ -226,15 +216,10 @@
   resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-3.4.11.tgz#853ec40fdfa6c3ae8cff23f0cd86b77a719823f5"
   integrity sha512-49A79anI04nhMsNzyk5cF8fa3+HKZkb9RLshtaqvQmM7olQxCrks6cIdE2Y1zMBuyZxX1ARhcBCFVw+PUxkJjA==
 
-"@storybook/channels@4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-4.0.0.tgz#b712d711f67966028dbff5c57e6ddc6f53d5cbac"
-  integrity sha512-VJdct5WajZweZgl532ufGZKefk0kI8QI+SCWW93YEPrvgo+vGPBOlsZpWNZw0ozhESgnJwvSjNWYZYsSt/j1dQ==
-
-"@storybook/channels@4.0.4":
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-4.0.4.tgz#fdf717cd726d15508ac80ff93a3893b75d3ab8b8"
-  integrity sha512-EeRby5oCyyYBkBrxI7Cg8F65FkYJjVK0jbGWpIugcjtnfOeP57xLcZuukcjhLjl/oaC/RYw7A/6c0nFW4kV0GQ==
+"@storybook/channels@4.0.8":
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-4.0.8.tgz#36d96ad714c685f144fd1f1e5394faf0e0291032"
+  integrity sha512-nGMVPN4eOJlAXxS2u3a5aj7YJ4ChhlLx0+4HC6xaU5Uv+PaL6ba0gh84Zd9K73JnTSPPMq/4Mg3oncZumyeN9Q==
 
 "@storybook/client-logger@3.4.11":
   version "3.4.11"
@@ -250,10 +235,10 @@
     glamorous "^4.12.1"
     prop-types "^15.6.1"
 
-"@storybook/components@4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-4.0.0.tgz#5006f5b423eb1ae8b97fc82710b532c0e1b45805"
-  integrity sha512-H/jXW96OTUdDuJBltt5Cx+svLFH7BnAvU+XAb+/O/55ikxLoYJjtq+HnyZx3oY/y6br6mBESdOiovZisAnffhQ==
+"@storybook/components@4.0.9":
+  version "4.0.9"
+  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-4.0.9.tgz#c5cc9f52768fd7a6078d9601cecacd0e357dc130"
+  integrity sha512-EoPJitDUBkNdg4UiWyrmU6IkpLmJTjJO6KD382isHXA7qCxBJQTPb2m3GXy35KKF510NtJ9H0l4k5x7yg5Wzng==
   dependencies:
     "@emotion/core" "^0.13.1"
     "@emotion/provider" "^0.11.2"
@@ -266,31 +251,10 @@
     react-textarea-autosize "^7.0.4"
     render-fragment "^0.1.1"
 
-"@storybook/components@4.0.4":
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-4.0.4.tgz#e07fc89cd7d64e0686c933da92a3e849d8c59d60"
-  integrity sha512-v13Tm5ACYrk01bszl0EpFGKe9YyCdQjdJOEE9laDiGS6rWEydl0T5QmzhBD6yNgf+k6gs96JylxswlyyqHe32Q==
-  dependencies:
-    "@emotion/core" "^0.13.1"
-    "@emotion/provider" "^0.11.2"
-    "@emotion/styled" "^0.10.6"
-    global "^4.3.2"
-    lodash "^4.17.11"
-    prop-types "^15.6.2"
-    react-inspector "^2.3.0"
-    react-split-pane "^0.1.84"
-    react-textarea-autosize "^7.0.4"
-    render-fragment "^0.1.1"
-
-"@storybook/core-events@4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-4.0.0.tgz#9fc5e094044f161e4484139833c4cc2e743ec34c"
-  integrity sha512-RShVYSb8oB5ZGjxqZGAQuiHCYn+LCI9yFE2VLAc8a0UM4C+kQWxtFxIxjYgmF/ewTctz+Vl8miBAH3MhEDNXyA==
-
-"@storybook/core-events@4.0.4":
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-4.0.4.tgz#bf457afe9aec3fb2cd66d7cad3fa5e5821e01503"
-  integrity sha512-+OFFYTVSZd6zjZQMCUF2HQ0hIPfel9NyBBABbPxEtbvWEx/cp4RMfk5VFVISpwYJQMhnqCUU0/t3VoLTKFtm1g==
+"@storybook/core-events@4.0.8":
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-4.0.8.tgz#7af80f1c3eb32ae0eafe789be651c684dcfefd7b"
+  integrity sha512-S7g2oGnJKvLDpwcHFJ+efXww6zS7W3krimsqApf3foBfi3CVPLNJ9hrag30UGtnxQ3LDpkMj/aU4bkCWY7NRYA==
 
 "@storybook/core@3.4.11":
   version "3.4.11"
@@ -4207,6 +4171,13 @@ dir-glob@^2.0.0:
     arrify "^1.0.1"
     path-type "^3.0.0"
 
+dockerfile-ast@0.0.12:
+  version "0.0.12"
+  resolved "https://registry.yarnpkg.com/dockerfile-ast/-/dockerfile-ast-0.0.12.tgz#6f25f6ad55eeecdd297ab68b08be1b32e64b5aeb"
+  integrity sha512-cIV8oXkAxpIuN5XgG0TGg07nLDgrj4olkfrdT77OTA3VypscsYHBUg/FjHxW9K3oA+CyH4Th/qtoMgTVpzSobw==
+  dependencies:
+    vscode-languageserver-types "^3.5.0"
+
 doctrine@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
@@ -8692,10 +8663,10 @@ marked@^0.3.9:
   resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.19.tgz#5d47f709c4c9fc3c216b6d46127280f40b39d790"
   integrity sha512-ea2eGWOqNxPcXv8dyERdSr/6FmzvWwzjMxpfGB/sbMccXoct+xY+YukPD+QTUZwyvK7BZwcr4m21WBOW41pAkg==
 
-marked@^0.5.1:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/marked/-/marked-0.5.1.tgz#062f43b88b02ee80901e8e8d8e6a620ddb3aa752"
-  integrity sha512-iUkBZegCZou4AdwbKTwSW/lNDcz5OuRSl3qdcl31Ia0B2QPG0Jn+tKblh/9/eP9/6+4h27vpoh8wel/vQOV0vw==
+marked@^0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-0.5.2.tgz#3efdb27b1fd0ecec4f5aba362bddcd18120e5ba9"
+  integrity sha512-fdZvBa7/vSQIZCi4uuwo2N3q+7jJURpMVCcbaX0S1Mg65WZ5ilXvC67MviJAsdjqqgD+CEq4RKo5AYGgINkVAA==
 
 math-expression-evaluator@^1.2.14:
   version "1.2.17"
@@ -12780,12 +12751,13 @@ snyk-config@2.2.0:
     lodash "^4.17.5"
     nconf "^0.10.0"
 
-snyk-docker-plugin@1.12.1:
-  version "1.12.1"
-  resolved "https://registry.yarnpkg.com/snyk-docker-plugin/-/snyk-docker-plugin-1.12.1.tgz#66d896b18392b05bff3b34e2e47a19f7c0b7ce16"
-  integrity sha512-9/k+tZORb0CUoE+nFvG+ADc6vzHAkgiGR/7aZ35vxpuc9vW37LFWjmXZAfyoiGNOn1ICrPxSxarah8YsFEwE8Q==
+snyk-docker-plugin@1.12.3:
+  version "1.12.3"
+  resolved "https://registry.yarnpkg.com/snyk-docker-plugin/-/snyk-docker-plugin-1.12.3.tgz#a4a7c81a8e4e3c6a6cc303d4bc9aa98645274bca"
+  integrity sha512-ZbvaFCPCd0wxhqxjzU/iyf39tKlq2nvI9nPW32uZV3RGdHrkQH55BzCtBCF9d0dapxX+PKgae/4u2BKNw8hd9Q==
   dependencies:
     debug "^3"
+    dockerfile-ast "0.0.12"
     tslib "^1"
 
 snyk-go-plugin@1.6.0:
@@ -12797,10 +12769,10 @@ snyk-go-plugin@1.6.0:
     tmp "0.0.33"
     toml "^2.3.2"
 
-snyk-gradle-plugin@2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/snyk-gradle-plugin/-/snyk-gradle-plugin-2.1.0.tgz#96c8c0774df6790f67ff0d2888a0a6f0da230754"
-  integrity sha512-9gYJluomFZ5kaww5FoBvp4zUIsr27pEJ12jQJaVf0FJ0BmyYHmbCoxvHdqjCSYS2fVtF+fmPnvw0XKQOIwA1SA==
+snyk-gradle-plugin@2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/snyk-gradle-plugin/-/snyk-gradle-plugin-2.1.1.tgz#661591014508fdd1cbe5b91f4f8e6af50f68a9ac"
+  integrity sha512-aFeVC5y3XkJ5BxknHhtYo76as3xJbzSQlXACGZrQZGQ/w/UhNdM8VI1QB6Eq4uEzexleB/hcJwYxNmhI2CNCeA==
   dependencies:
     clone-deep "^0.3.0"
 
@@ -12825,10 +12797,10 @@ snyk-mvn-plugin@2.0.0:
   resolved "https://registry.yarnpkg.com/snyk-mvn-plugin/-/snyk-mvn-plugin-2.0.0.tgz#875dcfe0d77b50396321552f2469ee69ca8d1416"
   integrity sha512-9jAhZhv+7YcqtoQYCYlgMoxK+dWBKlk+wkX27Ebg3vNddNop9q5jZitRXTjsXwfSUZHRt+Ptw1f8vei9kjzZVg==
 
-snyk-nodejs-lockfile-parser@1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/snyk-nodejs-lockfile-parser/-/snyk-nodejs-lockfile-parser-1.7.0.tgz#d44c5d027051aeb5a0845c9a4c163323e4c5e1d3"
-  integrity sha512-57Gnw8o3HQbheb808GRsofnYPaJCbpt7n+zec+C7J/GZE6GJk+WA2u1EPsNQAsfTLQ3rxBwA1Sonhg498T4COA==
+snyk-nodejs-lockfile-parser@1.7.1:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/snyk-nodejs-lockfile-parser/-/snyk-nodejs-lockfile-parser-1.7.1.tgz#499fd29db9a9185e3cb90a314b204fa1244fffb6"
+  integrity sha512-0gHELqMhzUxb/t3Tg6d6G9LTDioOXCrEMt9aetOeV8wD/ZRL5VFNjwcdrm8qILLqzDFaFjFIyMc66c0OL4zFAQ==
   dependencies:
     "@yarnpkg/lockfile" "^1.0.2"
     graphlib "^2.1.5"
@@ -12929,10 +12901,10 @@ snyk-try-require@1.3.1, snyk-try-require@^1.1.1, snyk-try-require@^1.3.1:
     lru-cache "^4.0.0"
     then-fs "^2.0.0"
 
-snyk@^1.108.0:
-  version "1.108.0"
-  resolved "https://registry.yarnpkg.com/snyk/-/snyk-1.108.0.tgz#1aff9b6cbd39d27dd9895fefed45b0f225518aca"
-  integrity sha512-QKeERkklW4DFyd49sqbwZ4xNYXtHOPCcUjNUzDfcvXzNwyxfRKhTf43nmPw6lnIcgBesrY95hMozos4WmgYl3w==
+snyk@^1.110.2:
+  version "1.110.2"
+  resolved "https://registry.yarnpkg.com/snyk/-/snyk-1.110.2.tgz#0d8366ac8880abd8b60e6c6d3dc2074fb91a45f5"
+  integrity sha512-SQE4sudrscd48EoRJqy5h5S6c8YBiOw0r0Se3rfg1l6ElJGgCB9je6XEzfe+UmfES06D7ueFYepiQPxTwH4Qww==
   dependencies:
     abbrev "^1.1.1"
     ansi-escapes "^3.1.0"
@@ -12950,12 +12922,12 @@ snyk@^1.108.0:
     recursive-readdir "^2.2.2"
     semver "^5.5.0"
     snyk-config "2.2.0"
-    snyk-docker-plugin "1.12.1"
+    snyk-docker-plugin "1.12.3"
     snyk-go-plugin "1.6.0"
-    snyk-gradle-plugin "2.1.0"
+    snyk-gradle-plugin "2.1.1"
     snyk-module "1.9.1"
     snyk-mvn-plugin "2.0.0"
-    snyk-nodejs-lockfile-parser "1.7.0"
+    snyk-nodejs-lockfile-parser "1.7.1"
     snyk-nuget-plugin "1.6.5"
     snyk-php-plugin "1.5.1"
     snyk-policy "1.13.1"
@@ -14665,6 +14637,11 @@ vm-browserify@0.0.4:
   dependencies:
     indexof "0.0.1"
 
+vscode-languageserver-types@^3.5.0:
+  version "3.13.0"
+  resolved "https://registry.yarnpkg.com/vscode-languageserver-types/-/vscode-languageserver-types-3.13.0.tgz#b704b024cef059f7b326611c99b9c8753c0a18b4"
+  integrity sha512-BnJIxS+5+8UWiNKCP7W3g9FlE7fErFw0ofP5BXJe7c2tl0VeWh+nNHFbwAS2vmVC4a5kYxHBjRy0UeOtziemVA==
+
 walker@~1.0.5:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.7.tgz#2f7f9b8fd10d677262b18a884e28d19618e028fb"
diff --git a/examples-native/crna-kitchen-sink/package.json b/examples-native/crna-kitchen-sink/package.json
index 9fcfda0150..8ac2c28592 100644
--- a/examples-native/crna-kitchen-sink/package.json
+++ b/examples-native/crna-kitchen-sink/package.json
@@ -19,7 +19,7 @@
     "prop-types": "^15.6.2",
     "react": "^16.2.0",
     "react-native": "https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz",
-    "whatwg-fetch": "^2.0.4"
+    "whatwg-fetch": "^3.0.0"
   },
   "devDependencies": {
     "@storybook/addon-actions": "file:../../packs/storybook-addon-actions.tgz",
@@ -41,7 +41,7 @@
     "@storybook/addon-ondevice-knobs": "file:../../packs/storybook-addon-ondevice-knobs.tgz",
     "@storybook/addon-ondevice-notes": "file:../../packs/storybook-addon-ondevice-notes.tgz",
     "@storybook/ui": "file:../../packs/storybook-ui.tgz",
-    "jest-expo": "^30.0.0",
+    "jest-expo": "^31.0.0",
     "react-dom": "^16.2.0",
     "react-test-renderer": "^16.6.0"
   }
diff --git a/examples/angular-cli/package.json b/examples/angular-cli/package.json
index 13007a64ae..bd9196246f 100644
--- a/examples/angular-cli/package.json
+++ b/examples/angular-cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-cli",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "private": true,
   "license": "MIT",
   "scripts": {
@@ -33,18 +33,18 @@
     "@angular-devkit/build-angular": "^0.10.3",
     "@angular/cli": "^7.0.3",
     "@angular/compiler-cli": "^7.0.1",
-    "@storybook/addon-actions": "4.1.0-alpha.3",
-    "@storybook/addon-backgrounds": "4.1.0-alpha.3",
-    "@storybook/addon-centered": "4.1.0-alpha.3",
-    "@storybook/addon-jest": "4.1.0-alpha.3",
-    "@storybook/addon-knobs": "4.1.0-alpha.3",
-    "@storybook/addon-links": "4.1.0-alpha.3",
-    "@storybook/addon-notes": "4.1.0-alpha.3",
-    "@storybook/addon-options": "4.1.0-alpha.3",
-    "@storybook/addon-storyshots": "4.1.0-alpha.3",
-    "@storybook/addon-storysource": "4.1.0-alpha.3",
-    "@storybook/addons": "4.1.0-alpha.3",
-    "@storybook/angular": "4.1.0-alpha.3",
+    "@storybook/addon-actions": "4.1.0-alpha.8",
+    "@storybook/addon-backgrounds": "4.1.0-alpha.8",
+    "@storybook/addon-centered": "4.1.0-alpha.8",
+    "@storybook/addon-jest": "4.1.0-alpha.8",
+    "@storybook/addon-knobs": "4.1.0-alpha.8",
+    "@storybook/addon-links": "4.1.0-alpha.8",
+    "@storybook/addon-notes": "4.1.0-alpha.8",
+    "@storybook/addon-options": "4.1.0-alpha.8",
+    "@storybook/addon-storyshots": "4.1.0-alpha.8",
+    "@storybook/addon-storysource": "4.1.0-alpha.8",
+    "@storybook/addons": "4.1.0-alpha.8",
+    "@storybook/angular": "4.1.0-alpha.8",
     "@types/core-js": "^2.5.0",
     "@types/jest": "^23.3.9",
     "@types/node": "~10.12.1",
diff --git a/examples/cra-kitchen-sink/.storybook/config.js b/examples/cra-kitchen-sink/.storybook/config.js
index 32940cec5b..7c6868a0f1 100644
--- a/examples/cra-kitchen-sink/.storybook/config.js
+++ b/examples/cra-kitchen-sink/.storybook/config.js
@@ -1,18 +1,20 @@
-import { configure } from '@storybook/react';
-import { setOptions } from '@storybook/addon-options';
+import { configure, addDecorator } from '@storybook/react';
+import { withOptions } from '@storybook/addon-options';
 
-setOptions({
-  name: 'CRA Kitchen Sink',
-  url: 'https://github.com/storybooks/storybook/tree/master/examples/cra-kitchen-sink',
-  goFullScreen: false,
-  showAddonsPanel: true,
-  showSearchBox: false,
-  addonPanelInRight: false,
-  sortStoriesByKind: false,
-  hierarchySeparator: /\./,
-  hierarchyRootSeparator: /\|/,
-  enableShortcuts: true,
-});
+addDecorator(
+  withOptions({
+    name: 'CRA Kitchen Sink',
+    url: 'https://github.com/storybooks/storybook/tree/master/examples/cra-kitchen-sink',
+    goFullScreen: false,
+    showAddonsPanel: true,
+    showSearchBox: false,
+    addonPanelInRight: true,
+    sortStoriesByKind: false,
+    hierarchySeparator: /\./,
+    hierarchyRootSeparator: /\|/,
+    enableShortcuts: true,
+  })
+);
 
 function loadStories() {
   // put welcome screen at the top of the list so it's the first one displayed
diff --git a/examples/cra-kitchen-sink/jest.config.js b/examples/cra-kitchen-sink/jest.config.js
index 50cc5a0e36..b1ffc36fb8 100644
--- a/examples/cra-kitchen-sink/jest.config.js
+++ b/examples/cra-kitchen-sink/jest.config.js
@@ -3,5 +3,15 @@ const config = require('../../jest.config');
 module.exports = {
   ...config,
   roots: [__dirname],
+  moduleNameMapper: {
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      '<rootDir>/__mocks__/fileMock.js',
+    '\\.(css|scss)$': '<rootDir>/__mocks__/styleMock.js',
+    '\\.(md)$': '<rootDir>/__mocks__/htmlMock.js',
+  },
+  transform: {
+    ...config.transform,
+    '^.+\\.svg$': '<rootDir>/node_modules/react-scripts/config/jest/fileTransform.js',
+  },
   moduleDirectories: ['<rootDir>/node_modules', 'src'],
 };
diff --git a/examples/cra-kitchen-sink/package.json b/examples/cra-kitchen-sink/package.json
index 9847023e3c..f3dd96dda4 100644
--- a/examples/cra-kitchen-sink/package.json
+++ b/examples/cra-kitchen-sink/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cra-kitchen-sink",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "private": true,
   "scripts": {
     "build": "react-scripts build",
@@ -18,21 +18,22 @@
     "react-lifecycles-compat": "^3.0.4"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "4.1.0-alpha.3",
-    "@storybook/addon-actions": "4.1.0-alpha.3",
-    "@storybook/addon-backgrounds": "4.1.0-alpha.3",
-    "@storybook/addon-centered": "4.1.0-alpha.3",
-    "@storybook/addon-events": "4.1.0-alpha.3",
-    "@storybook/addon-info": "4.1.0-alpha.3",
-    "@storybook/addon-jest": "4.1.0-alpha.3",
-    "@storybook/addon-knobs": "4.1.0-alpha.3",
-    "@storybook/addon-links": "4.1.0-alpha.3",
-    "@storybook/addon-notes": "4.1.0-alpha.3",
-    "@storybook/addon-options": "4.1.0-alpha.3",
-    "@storybook/addon-storyshots": "4.1.0-alpha.3",
-    "@storybook/addons": "4.1.0-alpha.3",
-    "@storybook/client-logger": "4.1.0-alpha.3",
-    "@storybook/react": "4.1.0-alpha.3",
+    "@emotion/snapshot-serializer": "^0.8.2",
+    "@storybook/addon-a11y": "4.1.0-alpha.8",
+    "@storybook/addon-actions": "4.1.0-alpha.8",
+    "@storybook/addon-backgrounds": "4.1.0-alpha.8",
+    "@storybook/addon-centered": "4.1.0-alpha.8",
+    "@storybook/addon-events": "4.1.0-alpha.8",
+    "@storybook/addon-info": "4.1.0-alpha.8",
+    "@storybook/addon-jest": "4.1.0-alpha.8",
+    "@storybook/addon-knobs": "4.1.0-alpha.8",
+    "@storybook/addon-links": "4.1.0-alpha.8",
+    "@storybook/addon-notes": "4.1.0-alpha.8",
+    "@storybook/addon-options": "4.1.0-alpha.8",
+    "@storybook/addon-storyshots": "4.1.0-alpha.8",
+    "@storybook/addons": "4.1.0-alpha.8",
+    "@storybook/client-logger": "4.1.0-alpha.8",
+    "@storybook/react": "4.1.0-alpha.8",
     "enzyme": "^3.7.0",
     "enzyme-adapter-react-16": "^1.6.0",
     "enzyme-to-json": "^3.3.4",
diff --git a/examples/cra-kitchen-sink/public/index.html b/examples/cra-kitchen-sink/public/index.html
new file mode 100644
index 0000000000..f952b7c582
--- /dev/null
+++ b/examples/cra-kitchen-sink/public/index.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tag above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+      To begin the development, run `npm start`.
+      To create a production bundle, use `npm run build`.
+    -->
+  </body>
+</html>
\ No newline at end of file
diff --git a/examples/cra-kitchen-sink/src/stories/App.stories.js b/examples/cra-kitchen-sink/src/stories/App.stories.js
new file mode 100644
index 0000000000..0129759479
--- /dev/null
+++ b/examples/cra-kitchen-sink/src/stories/App.stories.js
@@ -0,0 +1,7 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+// eslint-disable-next-line import/extensions,import/no-unresolved
+import App from 'App';
+
+storiesOf('App', module).add('full app', () => <App />);
diff --git a/examples/cra-kitchen-sink/src/stories/Lifecycle.stories.js b/examples/cra-kitchen-sink/src/stories/Lifecycle.stories.js
new file mode 100644
index 0000000000..701812e1e0
--- /dev/null
+++ b/examples/cra-kitchen-sink/src/stories/Lifecycle.stories.js
@@ -0,0 +1,5 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import LifecycleLogger from '../components/LifecycleLogger';
+
+storiesOf('Lifecycle', module).add('logging', () => <LifecycleLogger />);
diff --git a/examples/cra-kitchen-sink/src/stories/__snapshots__/App.stories.storyshot b/examples/cra-kitchen-sink/src/stories/__snapshots__/App.stories.storyshot
new file mode 100644
index 0000000000..400883b641
--- /dev/null
+++ b/examples/cra-kitchen-sink/src/stories/__snapshots__/App.stories.storyshot
@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots App full app 1`] = `
+<div
+  class="App"
+>
+  <div
+    class="App-header"
+  >
+    <img
+      alt="logo"
+      class="App-logo"
+      src="logo.svg"
+    />
+    <h2>
+      Welcome to React
+    </h2>
+  </div>
+  <p
+    class="App-intro"
+  >
+    To get started, edit 
+    <code>
+      src/App.js
+    </code>
+     and save to reload.
+  </p>
+</div>
+`;
diff --git a/examples/cra-kitchen-sink/src/stories/__snapshots__/Lifecycle.stories.storyshot b/examples/cra-kitchen-sink/src/stories/__snapshots__/Lifecycle.stories.storyshot
new file mode 100644
index 0000000000..b53b1b4087
--- /dev/null
+++ b/examples/cra-kitchen-sink/src/stories/__snapshots__/Lifecycle.stories.storyshot
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Lifecycle logging 1`] = `
+<div>
+  Lifecycle methods are logged to the console
+</div>
+`;
diff --git a/examples/cra-kitchen-sink/src/stories/__snapshots__/cra-dynamic-import.stories.storyshot b/examples/cra-kitchen-sink/src/stories/__snapshots__/cra-dynamic-import.stories.storyshot
new file mode 100644
index 0000000000..0b6f8f75b6
--- /dev/null
+++ b/examples/cra-kitchen-sink/src/stories/__snapshots__/cra-dynamic-import.stories.storyshot
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots CRA Dynamic import 1`] = `
+<div>
+  Waiting for Dynamic Import
+</div>
+`;
+
+exports[`Storyshots CRA Svgr 1`] = `
+<svg>
+  logo.svg
+</svg>
+`;
diff --git a/examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot b/examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot
index 73f2c0518e..7aca90b808 100644
--- a/examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot
+++ b/examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot
@@ -1,34 +1,63 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots App full app 1`] = `
-<div
-  class="App"
->
-  <div
-    class="App-header"
-  >
-    <img
-      alt="logo"
-      class="App-logo"
-      src="file-stub"
-    />
-    <h2>
-      Welcome to React
-    </h2>
-  </div>
-  <p
-    class="App-intro"
-  >
-    To get started, edit 
-    <code>
-      src/App.js
-    </code>
-     and save to reload.
-  </p>
-</div>
-`;
-
 exports[`Storyshots Button addons composition 1`] = `
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-size: .88em;
+  font-family: Menlo,Monaco,"Courier New",monospace;
+  background-color: #fafafa;
+  padding: .5rem;
+  line-height: 1.5;
+  overflow-x: scroll;
+}
+
+.emotion-2 {
+  overflow: hidden;
+  border: 1px solid #eee;
+  border-radius: 3px;
+  background-color: #FFFFFF;
+  cursor: pointer;
+  font-size: 13px;
+  padding: 3px 10px;
+  -webkit-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.emotion-2:hover {
+  background-color: #f4f7fa;
+  border-color: #ddd;
+}
+
+.emotion-2:active {
+  background-color: #e9ecef;
+  border-color: #ccc;
+}
+
+.emotion-0 {
+  -webkit-transition: -webkit-transform .2s ease;
+  -webkit-transition: transform .2s ease;
+  transition: transform .2s ease;
+  height: 16px;
+  -webkit-transform: translateY(-100%) translateY(-6px);
+  -ms-transform: translateY(-100%) translateY(-6px);
+  transform: translateY(-100%) translateY(-6px);
+}
+
 <div>
   <div
     style="position:relative;z-index:0"
@@ -92,7 +121,7 @@ exports[`Storyshots Button addons composition 1`] = `
             Story Source
           </h1>
           <pre
-            class="css-r8d96o eyvlbql0"
+            class="emotion-4 emotion-5"
           >
             <div>
               <div>
@@ -111,13 +140,6 @@ exports[`Storyshots Button addons composition 1`] = `
                     &gt;
                   </span>
                 </div>
-                <div
-                  style="padding-left:33px;padding-right:3px"
-                >
-                  <span
-                    style="color:#444"
-                  />
-                </div>
                 <div
                   style="padding-left:33px;padding-right:3px"
                 >
@@ -181,10 +203,10 @@ exports[`Storyshots Button addons composition 1`] = `
               </div>
             </div>
             <button
-              class="css-1naocv3 eva467m0"
+              class="emotion-2 emotion-3"
             >
               <div
-                class="css-lvl6aa eva467m1"
+                class="emotion-0 emotion-1"
               >
                 <div
                   style="margin-bottom:6px"
@@ -222,6 +244,79 @@ exports[`Storyshots Button addons composition 1`] = `
 `;
 
 exports[`Storyshots Button with new info 1`] = `
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-size: .88em;
+  font-family: Menlo,Monaco,"Courier New",monospace;
+  background-color: #fafafa;
+  padding: .5rem;
+  line-height: 1.5;
+  overflow-x: scroll;
+}
+
+.emotion-2 {
+  overflow: hidden;
+  border: 1px solid #eee;
+  border-radius: 3px;
+  background-color: #FFFFFF;
+  cursor: pointer;
+  font-size: 13px;
+  padding: 3px 10px;
+  -webkit-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.emotion-2:hover {
+  background-color: #f4f7fa;
+  border-color: #ddd;
+}
+
+.emotion-2:active {
+  background-color: #e9ecef;
+  border-color: #ccc;
+}
+
+.emotion-0 {
+  -webkit-transition: -webkit-transform .2s ease;
+  -webkit-transition: transform .2s ease;
+  transition: transform .2s ease;
+  height: 16px;
+  -webkit-transform: translateY(-100%) translateY(-6px);
+  -ms-transform: translateY(-100%) translateY(-6px);
+  transform: translateY(-100%) translateY(-6px);
+}
+
+.emotion-56 {
+  border-collapse: collapse;
+}
+
+.emotion-6 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+}
+
+.emotion-16 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+  white-space: nowrap;
+  font-family: Monaco,Consolas,"Courier New",monospace;
+}
+
 <div>
   <div
     style="position:relative;z-index:0"
@@ -296,7 +391,7 @@ exports[`Storyshots Button with new info 1`] = `
             Story Source
           </h1>
           <pre
-            class="css-r8d96o eyvlbql0"
+            class="emotion-4 emotion-5"
           >
             <div>
               <div>
@@ -315,13 +410,6 @@ exports[`Storyshots Button with new info 1`] = `
                     &gt;
                   </span>
                 </div>
-                <div
-                  style="padding-left:33px;padding-right:3px"
-                >
-                  <span
-                    style="color:#444"
-                  />
-                </div>
                 <div
                   style="padding-left:33px;padding-right:3px"
                 >
@@ -385,10 +473,10 @@ exports[`Storyshots Button with new info 1`] = `
               </div>
             </div>
             <button
-              class="css-1naocv3 eva467m0"
+              class="emotion-2 emotion-3"
             >
               <div
-                class="css-lvl6aa eva467m1"
+                class="emotion-0 emotion-1"
               >
                 <div
                   style="margin-bottom:6px"
@@ -415,32 +503,32 @@ exports[`Storyshots Button with new info 1`] = `
               "Container" Component
             </h2>
             <table
-              class="css-1uhv8nx e1vdo5380"
+              class="emotion-56 emotion-57"
             >
               <thead>
                 <tr>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     property
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     propType
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     required
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     default
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     description
                   </th>
@@ -449,47 +537,47 @@ exports[`Storyshots Button with new info 1`] = `
               <tbody>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     children
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     yes
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     isAmazing
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#a11"
@@ -498,27 +586,27 @@ exports[`Storyshots Button with new info 1`] = `
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     age
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#666"
@@ -555,27 +643,27 @@ exports[`Storyshots Button with new info 1`] = `
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     title
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#22a;word-break:break-word"
@@ -584,7 +672,7 @@ exports[`Storyshots Button with new info 1`] = `
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
               </tbody>
@@ -638,26 +726,3 @@ exports[`Storyshots Button with text 1`] = `
   Hello Button
 </button>
 `;
-
-exports[`Storyshots Lifecycle logging 1`] = `
-<div>
-  Lifecycle methods are logged to the console
-</div>
-`;
-
-exports[`Storyshots Some really long story kind description with text 1`] = `
-<div
-  style="position:fixed;top:0;left:0;bottom:0;right:0;display:flex;align-items:center;overflow:auto"
->
-  <div
-    style="margin:auto;max-height:100%"
-  >
-    <button
-      style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
-      type="button"
-    >
-      Hello Button
-    </button>
-  </div>
-</div>
-`;
diff --git a/examples/cra-kitchen-sink/src/stories/__snapshots__/long-description.stories.storyshot b/examples/cra-kitchen-sink/src/stories/__snapshots__/long-description.stories.storyshot
new file mode 100644
index 0000000000..08c35849a0
--- /dev/null
+++ b/examples/cra-kitchen-sink/src/stories/__snapshots__/long-description.stories.storyshot
@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Some really long story kind description with text 1`] = `
+<div
+  style="position:fixed;top:0;left:0;bottom:0;right:0;display:flex;align-items:center;overflow:auto"
+>
+  <div
+    style="margin:auto;max-height:100%"
+  >
+    <button
+      style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
+      type="button"
+    >
+      Hello Button
+    </button>
+  </div>
+</div>
+`;
diff --git a/examples/cra-kitchen-sink/src/stories/cra-dynamic-import.stories.js b/examples/cra-kitchen-sink/src/stories/cra-dynamic-import.stories.js
new file mode 100644
index 0000000000..108e56b2d1
--- /dev/null
+++ b/examples/cra-kitchen-sink/src/stories/cra-dynamic-import.stories.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import { storiesOf, forceReRender } from '@storybook/react';
+
+let Component;
+
+storiesOf('CRA', module).add('Dynamic import', () => {
+  if (!Component) {
+    import('@storybook/react/demo').then(({ Button }) => {
+      Component = Button;
+      forceReRender();
+    });
+
+    return <div>Waiting for Dynamic Import</div>;
+  }
+
+  return <Component>Hello Button</Component>;
+});
diff --git a/examples/cra-kitchen-sink/src/stories/cra-svgr.stories.js b/examples/cra-kitchen-sink/src/stories/cra-svgr.stories.js
new file mode 100644
index 0000000000..69898bb866
--- /dev/null
+++ b/examples/cra-kitchen-sink/src/stories/cra-svgr.stories.js
@@ -0,0 +1,5 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { ReactComponent as Logo } from '../logo.svg';
+
+storiesOf('CRA', module).add('Svgr', () => <Logo />);
diff --git a/examples/cra-kitchen-sink/src/stories/index.stories.js b/examples/cra-kitchen-sink/src/stories/index.stories.js
index e8500ceb1f..550b203013 100644
--- a/examples/cra-kitchen-sink/src/stories/index.stories.js
+++ b/examples/cra-kitchen-sink/src/stories/index.stories.js
@@ -1,16 +1,11 @@
 import React from 'react';
-
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { withNotes } from '@storybook/addon-notes';
-import centered from '@storybook/addon-centered';
 import { withInfo } from '@storybook/addon-info';
 import { Button } from '@storybook/react/demo';
 
-// eslint-disable-next-line import/extensions,import/no-unresolved
-import App from 'App';
 import Container from './Container';
-import LifecycleLogger from '../components/LifecycleLogger';
 
 const InfoButton = () => (
   <span
@@ -33,22 +28,24 @@ const InfoButton = () => (
 storiesOf('Button', module)
   .addDecorator(withNotes)
   .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>, {
-    options: {
-      selectedPanel: 'storybook/actions/panel',
-    },
+    options: { selectedAddonPanel: 'storybook/actions/actions-panel' },
   })
-  .add('with some emoji', () => (
-    <Button onClick={action('clicked')}>
-      <span role="img" aria-label="so cool">
-        😀 😎 👍 💯
-      </span>
-    </Button>
-  ))
+  .add(
+    'with some emoji',
+    () => (
+      <Button onClick={action('clicked')}>
+        <span role="img" aria-label="so cool">
+          😀 😎 👍 💯
+        </span>
+      </Button>
+    ),
+    {
+      options: { selectedAddonPanel: 'storybook/actions/actions-panel' },
+    }
+  )
   .add('with notes', () => <Button>Check my notes in the notes panel</Button>, {
     notes: 'A very simple button',
-    options: {
-      selectedPanel: 'storybook/notes/panel',
-    },
+    options: { selectedAddonPanel: 'storybook/notes/panel' },
   })
   .add(
     'with new info',
@@ -58,23 +55,20 @@ storiesOf('Button', module)
       <Container>
         click the <InfoButton /> label in top right for info about "{context.story}"
       </Container>
-    ))
+    )),
+    {
+      options: { selectedAddonPanel: 'storybook/info/info-panel' },
+    }
   )
   .add(
     'addons composition',
-    withInfo('see Notes panel for composition info')(
-      withNotes('Composition: Info(Notes())')(context => (
-        <div>
-          click the <InfoButton /> label in top right for info about "{context.story}"
-        </div>
-      ))
-    )
+    withInfo('see Notes panel for composition info')(context => (
+      <div>
+        click the <InfoButton /> label in top right for info about "{context.story}"
+      </div>
+    )),
+    {
+      notes: 'Composition: Info(Notes())',
+      options: { selectedAddonPanel: 'storybook/notes/panel' },
+    }
   );
-
-storiesOf('App', module).add('full app', () => <App />);
-
-storiesOf('Some really long story kind description', module)
-  .addDecorator(centered)
-  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>);
-
-storiesOf('Lifecycle', module).add('logging', () => <LifecycleLogger />);
diff --git a/examples/cra-kitchen-sink/src/stories/long-description.stories.js b/examples/cra-kitchen-sink/src/stories/long-description.stories.js
new file mode 100644
index 0000000000..fb111e7c95
--- /dev/null
+++ b/examples/cra-kitchen-sink/src/stories/long-description.stories.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import centered from '@storybook/addon-centered';
+import { Button } from '@storybook/react/demo';
+
+storiesOf('Some really long story kind description', module)
+  .addDecorator(centered)
+  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>);
diff --git a/examples/cra-kitchen-sink/src/storyshots.test.js b/examples/cra-kitchen-sink/src/storyshots.test.js
index 257fb426bd..6efe04c26f 100644
--- a/examples/cra-kitchen-sink/src/storyshots.test.js
+++ b/examples/cra-kitchen-sink/src/storyshots.test.js
@@ -1,6 +1,6 @@
 import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-storyshots';
+import emotionSerializer from '@emotion/snapshot-serializer';
 import path from 'path';
-
 import { render as renderer, configure } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import { createSerializer } from 'enzyme-to-json';
@@ -14,5 +14,5 @@ initStoryshots({
   test: multiSnapshotWithOptions({
     renderer,
   }),
-  snapshotSerializers: [createSerializer()],
+  snapshotSerializers: [createSerializer(), emotionSerializer],
 });
diff --git a/examples/ember-cli/package.json b/examples/ember-cli/package.json
index 912c390e33..c7e5e37d98 100644
--- a/examples/ember-cli/package.json
+++ b/examples/ember-cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ember-example",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "private": true,
   "scripts": {
     "build": "ember build",
@@ -11,18 +11,18 @@
   },
   "devDependencies": {
     "@babel/core": "^7.1.2",
-    "@storybook/addon-a11y": "4.1.0-alpha.3",
-    "@storybook/addon-actions": "4.1.0-alpha.3",
-    "@storybook/addon-backgrounds": "4.1.0-alpha.3",
-    "@storybook/addon-centered": "4.1.0-alpha.3",
-    "@storybook/addon-knobs": "4.1.0-alpha.3",
-    "@storybook/addon-links": "4.1.0-alpha.3",
-    "@storybook/addon-notes": "4.1.0-alpha.3",
-    "@storybook/addon-options": "4.1.0-alpha.3",
-    "@storybook/addon-storysource": "4.1.0-alpha.3",
-    "@storybook/addon-viewport": "4.1.0-alpha.3",
-    "@storybook/addons": "4.1.0-alpha.3",
-    "@storybook/ember": "4.1.0-alpha.3",
+    "@storybook/addon-a11y": "4.1.0-alpha.8",
+    "@storybook/addon-actions": "4.1.0-alpha.8",
+    "@storybook/addon-backgrounds": "4.1.0-alpha.8",
+    "@storybook/addon-centered": "4.1.0-alpha.8",
+    "@storybook/addon-knobs": "4.1.0-alpha.8",
+    "@storybook/addon-links": "4.1.0-alpha.8",
+    "@storybook/addon-notes": "4.1.0-alpha.8",
+    "@storybook/addon-options": "4.1.0-alpha.8",
+    "@storybook/addon-storysource": "4.1.0-alpha.8",
+    "@storybook/addon-viewport": "4.1.0-alpha.8",
+    "@storybook/addons": "4.1.0-alpha.8",
+    "@storybook/ember": "4.1.0-alpha.8",
     "babel-loader": "^8",
     "broccoli-asset-rev": "^3.0.0",
     "cross-env": "^5.2.0",
diff --git a/examples/html-kitchen-sink/package.json b/examples/html-kitchen-sink/package.json
index 041124c9cb..d9d62612a0 100644
--- a/examples/html-kitchen-sink/package.json
+++ b/examples/html-kitchen-sink/package.json
@@ -1,6 +1,6 @@
 {
   "name": "html-kitchen-sink",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "private": true,
   "description": "",
   "keywords": [],
@@ -13,23 +13,23 @@
     "storybook": "start-storybook -p 9006"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "4.1.0-alpha.3",
-    "@storybook/addon-actions": "4.1.0-alpha.3",
-    "@storybook/addon-backgrounds": "4.1.0-alpha.3",
-    "@storybook/addon-centered": "4.1.0-alpha.3",
-    "@storybook/addon-events": "4.1.0-alpha.3",
-    "@storybook/addon-jest": "4.1.0-alpha.3",
-    "@storybook/addon-knobs": "4.1.0-alpha.3",
-    "@storybook/addon-links": "4.1.0-alpha.3",
-    "@storybook/addon-notes": "4.1.0-alpha.3",
-    "@storybook/addon-options": "4.1.0-alpha.3",
-    "@storybook/addon-storyshots": "4.1.0-alpha.3",
-    "@storybook/addon-storysource": "4.1.0-alpha.3",
-    "@storybook/addon-viewport": "4.1.0-alpha.3",
-    "@storybook/addons": "4.1.0-alpha.3",
-    "@storybook/core": "4.1.0-alpha.3",
-    "@storybook/core-events": "4.1.0-alpha.3",
-    "@storybook/html": "4.1.0-alpha.3",
+    "@storybook/addon-a11y": "4.1.0-alpha.8",
+    "@storybook/addon-actions": "4.1.0-alpha.8",
+    "@storybook/addon-backgrounds": "4.1.0-alpha.8",
+    "@storybook/addon-centered": "4.1.0-alpha.8",
+    "@storybook/addon-events": "4.1.0-alpha.8",
+    "@storybook/addon-jest": "4.1.0-alpha.8",
+    "@storybook/addon-knobs": "4.1.0-alpha.8",
+    "@storybook/addon-links": "4.1.0-alpha.8",
+    "@storybook/addon-notes": "4.1.0-alpha.8",
+    "@storybook/addon-options": "4.1.0-alpha.8",
+    "@storybook/addon-storyshots": "4.1.0-alpha.8",
+    "@storybook/addon-storysource": "4.1.0-alpha.8",
+    "@storybook/addon-viewport": "4.1.0-alpha.8",
+    "@storybook/addons": "4.1.0-alpha.8",
+    "@storybook/core": "4.1.0-alpha.8",
+    "@storybook/core-events": "4.1.0-alpha.8",
+    "@storybook/html": "4.1.0-alpha.8",
     "eventemitter3": "^3.1.0",
     "format-json": "^1.0.3",
     "global": "^4.3.2",
diff --git a/examples/marko-cli/package.json b/examples/marko-cli/package.json
index 65300f4e8f..d20d9715f3 100644
--- a/examples/marko-cli/package.json
+++ b/examples/marko-cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "marko-cli",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "private": true,
   "description": "Demo of how to build an app using marko-starter",
   "repository": {
@@ -22,12 +22,12 @@
     "marko-starter": "^2.0.4"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "4.1.0-alpha.3",
-    "@storybook/addon-knobs": "4.1.0-alpha.3",
-    "@storybook/addon-options": "4.1.0-alpha.3",
-    "@storybook/addon-storysource": "4.1.0-alpha.3",
-    "@storybook/addons": "4.1.0-alpha.3",
-    "@storybook/marko": "4.1.0-alpha.3",
+    "@storybook/addon-actions": "4.1.0-alpha.8",
+    "@storybook/addon-knobs": "4.1.0-alpha.8",
+    "@storybook/addon-options": "4.1.0-alpha.8",
+    "@storybook/addon-storysource": "4.1.0-alpha.8",
+    "@storybook/addons": "4.1.0-alpha.8",
+    "@storybook/marko": "4.1.0-alpha.8",
     "prettier": "^1.14.3",
     "webpack": "^4.23.1"
   }
diff --git a/examples/mithril-kitchen-sink/package.json b/examples/mithril-kitchen-sink/package.json
index 4a7101eee6..802ed57b3e 100644
--- a/examples/mithril-kitchen-sink/package.json
+++ b/examples/mithril-kitchen-sink/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mithril-example",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "private": true,
   "scripts": {
     "build-storybook": "build-storybook",
@@ -10,18 +10,18 @@
     "mithril": "^1.1.6"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "4.1.0-alpha.3",
-    "@storybook/addon-backgrounds": "4.1.0-alpha.3",
-    "@storybook/addon-centered": "4.1.0-alpha.3",
-    "@storybook/addon-knobs": "4.1.0-alpha.3",
-    "@storybook/addon-links": "4.1.0-alpha.3",
-    "@storybook/addon-notes": "4.1.0-alpha.3",
-    "@storybook/addon-options": "4.1.0-alpha.3",
-    "@storybook/addon-storyshots": "4.1.0-alpha.3",
-    "@storybook/addon-storysource": "4.1.0-alpha.3",
-    "@storybook/addon-viewport": "4.1.0-alpha.3",
-    "@storybook/addons": "4.1.0-alpha.3",
-    "@storybook/mithril": "4.1.0-alpha.3",
+    "@storybook/addon-actions": "4.1.0-alpha.8",
+    "@storybook/addon-backgrounds": "4.1.0-alpha.8",
+    "@storybook/addon-centered": "4.1.0-alpha.8",
+    "@storybook/addon-knobs": "4.1.0-alpha.8",
+    "@storybook/addon-links": "4.1.0-alpha.8",
+    "@storybook/addon-notes": "4.1.0-alpha.8",
+    "@storybook/addon-options": "4.1.0-alpha.8",
+    "@storybook/addon-storyshots": "4.1.0-alpha.8",
+    "@storybook/addon-storysource": "4.1.0-alpha.8",
+    "@storybook/addon-viewport": "4.1.0-alpha.8",
+    "@storybook/addons": "4.1.0-alpha.8",
+    "@storybook/mithril": "4.1.0-alpha.8",
     "webpack": "^4.23.1"
   }
 }
diff --git a/examples/official-storybook/addons.js b/examples/official-storybook/addons.js
index 8d78d9d821..f0b7359fda 100644
--- a/examples/official-storybook/addons.js
+++ b/examples/official-storybook/addons.js
@@ -5,6 +5,7 @@ import '@storybook/addon-events/register';
 import '@storybook/addon-notes/register';
 import '@storybook/addon-options/register';
 import '@storybook/addon-knobs/register';
+import '@storybook/addon-cssresources/register';
 import '@storybook/addon-backgrounds/register';
 import '@storybook/addon-a11y/register';
 import '@storybook/addon-jest/register';
diff --git a/examples/official-storybook/config.js b/examples/official-storybook/config.js
index 5dbfe41b3d..25917eb84c 100644
--- a/examples/official-storybook/config.js
+++ b/examples/official-storybook/config.js
@@ -5,6 +5,7 @@ import { configure, addDecorator } from '@storybook/react';
 import { themes } from '@storybook/components';
 import { withOptions } from '@storybook/addon-options';
 import { configureViewport, INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+import { withCssResources } from '@storybook/addon-cssresources';
 
 import 'react-chromatic/storybook-addon';
 import addHeadWarning from './head-warning';
@@ -44,6 +45,20 @@ const Reset = styled.div(({ theme }) => ({
 
 addDecorator((story, { kind }) => (kind === 'Core|Errors' ? story() : <Reset>{story()}</Reset>));
 
+addDecorator(
+  withCssResources({
+    cssresources: [
+      {
+        name: `bluetheme`,
+        code: `<style>body {
+  background-color: lightblue;
+}</style>`,
+        picked: false,
+      },
+    ],
+  })
+);
+
 addDecorator(
   (story, { kind }) =>
     kind === 'Core|Errors' ? (
diff --git a/examples/official-storybook/package.json b/examples/official-storybook/package.json
index 0e24685403..1e2fce24ac 100644
--- a/examples/official-storybook/package.json
+++ b/examples/official-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "official-storybook",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "private": true,
   "scripts": {
     "build-storybook": "build-storybook -c ./ -s built-storybooks",
@@ -14,28 +14,30 @@
   "devDependencies": {
     "@emotion/core": "^0.13.1",
     "@emotion/provider": "^0.11.2",
+    "@emotion/snapshot-serializer": "^0.8.2",
     "@emotion/styled": "^0.10.6",
-    "@storybook/addon-a11y": "4.1.0-alpha.3",
-    "@storybook/addon-actions": "4.1.0-alpha.3",
-    "@storybook/addon-backgrounds": "4.1.0-alpha.3",
-    "@storybook/addon-centered": "4.1.0-alpha.3",
-    "@storybook/addon-events": "4.1.0-alpha.3",
-    "@storybook/addon-graphql": "4.1.0-alpha.3",
-    "@storybook/addon-info": "4.1.0-alpha.3",
-    "@storybook/addon-jest": "4.1.0-alpha.3",
-    "@storybook/addon-knobs": "4.1.0-alpha.3",
-    "@storybook/addon-links": "4.1.0-alpha.3",
-    "@storybook/addon-notes": "4.1.0-alpha.3",
-    "@storybook/addon-options": "4.1.0-alpha.3",
-    "@storybook/addon-storyshots": "4.1.0-alpha.3",
-    "@storybook/addon-storyshots-puppeteer": "4.1.0-alpha.3",
-    "@storybook/addon-storysource": "4.1.0-alpha.3",
-    "@storybook/addon-viewport": "4.1.0-alpha.3",
-    "@storybook/addons": "4.1.0-alpha.3",
-    "@storybook/components": "4.1.0-alpha.3",
-    "@storybook/core-events": "4.1.0-alpha.3",
-    "@storybook/node-logger": "4.1.0-alpha.3",
-    "@storybook/react": "4.1.0-alpha.3",
+    "@storybook/addon-a11y": "4.1.0-alpha.8",
+    "@storybook/addon-actions": "4.1.0-alpha.8",
+    "@storybook/addon-backgrounds": "4.1.0-alpha.8",
+    "@storybook/addon-centered": "4.1.0-alpha.8",
+    "@storybook/addon-cssresources": "4.1.0-alpha.8",
+    "@storybook/addon-events": "4.1.0-alpha.8",
+    "@storybook/addon-graphql": "4.1.0-alpha.8",
+    "@storybook/addon-info": "4.1.0-alpha.8",
+    "@storybook/addon-jest": "4.1.0-alpha.8",
+    "@storybook/addon-knobs": "4.1.0-alpha.8",
+    "@storybook/addon-links": "4.1.0-alpha.8",
+    "@storybook/addon-notes": "4.1.0-alpha.8",
+    "@storybook/addon-options": "4.1.0-alpha.8",
+    "@storybook/addon-storyshots": "4.1.0-alpha.8",
+    "@storybook/addon-storyshots-puppeteer": "4.1.0-alpha.8",
+    "@storybook/addon-storysource": "4.1.0-alpha.8",
+    "@storybook/addon-viewport": "4.1.0-alpha.8",
+    "@storybook/addons": "4.1.0-alpha.8",
+    "@storybook/components": "4.1.0-alpha.8",
+    "@storybook/core-events": "4.1.0-alpha.8",
+    "@storybook/node-logger": "4.1.0-alpha.8",
+    "@storybook/react": "4.1.0-alpha.8",
     "cors": "^2.8.4",
     "cross-env": "^5.2.0",
     "enzyme-to-json": "^3.3.4",
diff --git a/examples/official-storybook/stories/__snapshots__/addon-cssresources.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-cssresources.stories.storyshot
new file mode 100644
index 0000000000..77298e639d
--- /dev/null
+++ b/examples/official-storybook/stories/__snapshots__/addon-cssresources.stories.storyshot
@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addons|Cssresources Camera Icon 1`] = `
+<i
+  class="fa fa-camera-retro"
+>
+   Camera Icon
+</i>
+`;
+
+exports[`Storyshots Addons|Cssresources Primary Large Button 1`] = `
+<button
+  class="btn btn-lg btn-primary"
+  type="button"
+>
+  Primary Large Button
+</button>
+`;
diff --git a/examples/official-storybook/stories/__snapshots__/addon-events.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-events.stories.storyshot
index c2f4ff454e..eb2b3abf04 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-events.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-events.stories.storyshot
@@ -1,11 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Addons|Events Logger 1`] = `
+.emotion-2 {
+  padding: 20px;
+}
+
+.emotion-0 {
+  margin: 0;
+}
+
 <div
-  class="css-1ruxp1v e1igy6c50"
+  class="emotion-2 emotion-3"
 >
   <h1
-    class="css-1uk1gs8 e1igy6c51"
+    class="emotion-0 emotion-1"
   >
     Logger
   </h1>
@@ -14,11 +22,19 @@ exports[`Storyshots Addons|Events Logger 1`] = `
 `;
 
 exports[`Storyshots Addons|Events.deprecated Logger 1`] = `
+.emotion-2 {
+  padding: 20px;
+}
+
+.emotion-0 {
+  margin: 0;
+}
+
 <div
-  class="css-1ruxp1v e1igy6c50"
+  class="emotion-2 emotion-3"
 >
   <h1
-    class="css-1uk1gs8 e1igy6c51"
+    class="emotion-0 emotion-1"
   >
     Logger
   </h1>
diff --git a/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot
index 7538ccc11c..b6f13985ce 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot
@@ -1,6 +1,79 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Addons|Info.Decorator Use Info as story decorator 1`] = `
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-size: .88em;
+  font-family: Menlo,Monaco,"Courier New",monospace;
+  background-color: #fafafa;
+  padding: .5rem;
+  line-height: 1.5;
+  overflow-x: scroll;
+}
+
+.emotion-2 {
+  overflow: hidden;
+  border: 1px solid #eee;
+  border-radius: 3px;
+  background-color: #FFFFFF;
+  cursor: pointer;
+  font-size: 13px;
+  padding: 3px 10px;
+  -webkit-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.emotion-2:hover {
+  background-color: #f4f7fa;
+  border-color: #ddd;
+}
+
+.emotion-2:active {
+  background-color: #e9ecef;
+  border-color: #ccc;
+}
+
+.emotion-0 {
+  -webkit-transition: -webkit-transform .2s ease;
+  -webkit-transition: transform .2s ease;
+  transition: transform .2s ease;
+  height: 16px;
+  -webkit-transform: translateY(-100%) translateY(-6px);
+  -ms-transform: translateY(-100%) translateY(-6px);
+  transform: translateY(-100%) translateY(-6px);
+}
+
+.emotion-56 {
+  border-collapse: collapse;
+}
+
+.emotion-6 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+}
+
+.emotion-16 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+  white-space: nowrap;
+  font-family: Monaco,Consolas,"Courier New",monospace;
+}
+
 <div>
   <div
     style="position:relative;z-index:0"
@@ -60,7 +133,7 @@ exports[`Storyshots Addons|Info.Decorator Use Info as story decorator 1`] = `
             Story Source
           </h1>
           <pre
-            class="css-r8d96o eyvlbql0"
+            class="emotion-4 emotion-5"
           >
             <div>
               <div
@@ -100,10 +173,10 @@ exports[`Storyshots Addons|Info.Decorator Use Info as story decorator 1`] = `
               </div>
             </div>
             <button
-              class="css-1naocv3 eva467m0"
+              class="emotion-2 emotion-3"
             >
               <div
-                class="css-lvl6aa eva467m1"
+                class="emotion-0 emotion-1"
               >
                 <div
                   style="margin-bottom:6px"
@@ -130,32 +203,32 @@ exports[`Storyshots Addons|Info.Decorator Use Info as story decorator 1`] = `
               "BaseButton" Component
             </h2>
             <table
-              class="css-1uhv8nx e1vdo5380"
+              class="emotion-56 emotion-57"
             >
               <thead>
                 <tr>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     property
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     propType
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     required
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     default
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     description
                   </th>
@@ -164,22 +237,22 @@ exports[`Storyshots Addons|Info.Decorator Use Info as story decorator 1`] = `
               <tbody>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     disabled
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#a11"
@@ -188,52 +261,52 @@ exports[`Storyshots Addons|Info.Decorator Use Info as story decorator 1`] = `
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     label
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     yes
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     onClick
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#170"
@@ -242,27 +315,27 @@ exports[`Storyshots Addons|Info.Decorator Use Info as story decorator 1`] = `
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     style
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#666"
@@ -271,7 +344,7 @@ exports[`Storyshots Addons|Info.Decorator Use Info as story decorator 1`] = `
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
               </tbody>
@@ -285,6 +358,63 @@ exports[`Storyshots Addons|Info.Decorator Use Info as story decorator 1`] = `
 `;
 
 exports[`Storyshots Addons|Info.GitHub issues #1814 1`] = `
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-size: .88em;
+  font-family: Menlo,Monaco,"Courier New",monospace;
+  background-color: #fafafa;
+  padding: .5rem;
+  line-height: 1.5;
+  overflow-x: scroll;
+}
+
+.emotion-2 {
+  overflow: hidden;
+  border: 1px solid #eee;
+  border-radius: 3px;
+  background-color: #FFFFFF;
+  cursor: pointer;
+  font-size: 13px;
+  padding: 3px 10px;
+  -webkit-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.emotion-2:hover {
+  background-color: #f4f7fa;
+  border-color: #ddd;
+}
+
+.emotion-2:active {
+  background-color: #e9ecef;
+  border-color: #ccc;
+}
+
+.emotion-0 {
+  -webkit-transition: -webkit-transform .2s ease;
+  -webkit-transition: transform .2s ease;
+  transition: transform .2s ease;
+  height: 16px;
+  -webkit-transform: translateY(-100%) translateY(-6px);
+  -ms-transform: translateY(-100%) translateY(-6px);
+  transform: translateY(-100%) translateY(-6px);
+}
+
 <div>
   <div
     style="position:relative;z-index:0"
@@ -345,7 +475,7 @@ exports[`Storyshots Addons|Info.GitHub issues #1814 1`] = `
             Story Source
           </h1>
           <pre
-            class="css-r8d96o eyvlbql0"
+            class="emotion-4 emotion-5"
           >
             <div>
               <div>
@@ -406,10 +536,10 @@ exports[`Storyshots Addons|Info.GitHub issues #1814 1`] = `
               </div>
             </div>
             <button
-              class="css-1naocv3 eva467m0"
+              class="emotion-2 emotion-3"
             >
               <div
-                class="css-lvl6aa eva467m1"
+                class="emotion-0 emotion-1"
               >
                 <div
                   style="margin-bottom:6px"
@@ -457,6 +587,79 @@ exports[`Storyshots Addons|Info.GitHub issues #1814 1`] = `
 `;
 
 exports[`Storyshots Addons|Info.JSX Displays JSX in description 1`] = `
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-size: .88em;
+  font-family: Menlo,Monaco,"Courier New",monospace;
+  background-color: #fafafa;
+  padding: .5rem;
+  line-height: 1.5;
+  overflow-x: scroll;
+}
+
+.emotion-2 {
+  overflow: hidden;
+  border: 1px solid #eee;
+  border-radius: 3px;
+  background-color: #FFFFFF;
+  cursor: pointer;
+  font-size: 13px;
+  padding: 3px 10px;
+  -webkit-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.emotion-2:hover {
+  background-color: #f4f7fa;
+  border-color: #ddd;
+}
+
+.emotion-2:active {
+  background-color: #e9ecef;
+  border-color: #ccc;
+}
+
+.emotion-0 {
+  -webkit-transition: -webkit-transform .2s ease;
+  -webkit-transition: transform .2s ease;
+  transition: transform .2s ease;
+  height: 16px;
+  -webkit-transform: translateY(-100%) translateY(-6px);
+  -ms-transform: translateY(-100%) translateY(-6px);
+  transform: translateY(-100%) translateY(-6px);
+}
+
+.emotion-56 {
+  border-collapse: collapse;
+}
+
+.emotion-6 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+}
+
+.emotion-16 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+  white-space: nowrap;
+  font-family: Monaco,Consolas,"Courier New",monospace;
+}
+
 <div>
   <div
     style="position:relative;z-index:0"
@@ -532,7 +735,7 @@ exports[`Storyshots Addons|Info.JSX Displays JSX in description 1`] = `
             Story Source
           </h1>
           <pre
-            class="css-r8d96o eyvlbql0"
+            class="emotion-4 emotion-5"
           >
             <div>
               <div
@@ -590,10 +793,10 @@ exports[`Storyshots Addons|Info.JSX Displays JSX in description 1`] = `
               </div>
             </div>
             <button
-              class="css-1naocv3 eva467m0"
+              class="emotion-2 emotion-3"
             >
               <div
-                class="css-lvl6aa eva467m1"
+                class="emotion-0 emotion-1"
               >
                 <div
                   style="margin-bottom:6px"
@@ -620,32 +823,32 @@ exports[`Storyshots Addons|Info.JSX Displays JSX in description 1`] = `
               "BaseButton" Component
             </h2>
             <table
-              class="css-1uhv8nx e1vdo5380"
+              class="emotion-56 emotion-57"
             >
               <thead>
                 <tr>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     property
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     propType
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     required
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     default
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     description
                   </th>
@@ -654,22 +857,22 @@ exports[`Storyshots Addons|Info.JSX Displays JSX in description 1`] = `
               <tbody>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     disabled
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#a11"
@@ -678,52 +881,52 @@ exports[`Storyshots Addons|Info.JSX Displays JSX in description 1`] = `
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     label
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     yes
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     onClick
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#170"
@@ -732,27 +935,27 @@ exports[`Storyshots Addons|Info.JSX Displays JSX in description 1`] = `
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     style
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#666"
@@ -761,7 +964,7 @@ exports[`Storyshots Addons|Info.JSX Displays JSX in description 1`] = `
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
               </tbody>
@@ -775,6 +978,79 @@ exports[`Storyshots Addons|Info.JSX Displays JSX in description 1`] = `
 `;
 
 exports[`Storyshots Addons|Info.Markdown Displays Markdown in description 1`] = `
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-size: .88em;
+  font-family: Menlo,Monaco,"Courier New",monospace;
+  background-color: #fafafa;
+  padding: .5rem;
+  line-height: 1.5;
+  overflow-x: scroll;
+}
+
+.emotion-2 {
+  overflow: hidden;
+  border: 1px solid #eee;
+  border-radius: 3px;
+  background-color: #FFFFFF;
+  cursor: pointer;
+  font-size: 13px;
+  padding: 3px 10px;
+  -webkit-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.emotion-2:hover {
+  background-color: #f4f7fa;
+  border-color: #ddd;
+}
+
+.emotion-2:active {
+  background-color: #e9ecef;
+  border-color: #ccc;
+}
+
+.emotion-0 {
+  -webkit-transition: -webkit-transform .2s ease;
+  -webkit-transition: transform .2s ease;
+  transition: transform .2s ease;
+  height: 16px;
+  -webkit-transform: translateY(-100%) translateY(-6px);
+  -ms-transform: translateY(-100%) translateY(-6px);
+  transform: translateY(-100%) translateY(-6px);
+}
+
+.emotion-56 {
+  border-collapse: collapse;
+}
+
+.emotion-6 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+}
+
+.emotion-16 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+  white-space: nowrap;
+  font-family: Monaco,Consolas,"Courier New",monospace;
+}
+
 <div>
   <div
     style="position:relative;z-index:0"
@@ -865,7 +1141,7 @@ exports[`Storyshots Addons|Info.Markdown Displays Markdown in description 1`] =
             Story Source
           </h1>
           <pre
-            class="css-r8d96o eyvlbql0"
+            class="emotion-4 emotion-5"
           >
             <div>
               <div
@@ -923,10 +1199,10 @@ exports[`Storyshots Addons|Info.Markdown Displays Markdown in description 1`] =
               </div>
             </div>
             <button
-              class="css-1naocv3 eva467m0"
+              class="emotion-2 emotion-3"
             >
               <div
-                class="css-lvl6aa eva467m1"
+                class="emotion-0 emotion-1"
               >
                 <div
                   style="margin-bottom:6px"
@@ -953,32 +1229,32 @@ exports[`Storyshots Addons|Info.Markdown Displays Markdown in description 1`] =
               "BaseButton" Component
             </h2>
             <table
-              class="css-1uhv8nx e1vdo5380"
+              class="emotion-56 emotion-57"
             >
               <thead>
                 <tr>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     property
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     propType
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     required
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     default
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     description
                   </th>
@@ -987,22 +1263,22 @@ exports[`Storyshots Addons|Info.Markdown Displays Markdown in description 1`] =
               <tbody>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     disabled
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#a11"
@@ -1011,52 +1287,52 @@ exports[`Storyshots Addons|Info.Markdown Displays Markdown in description 1`] =
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     label
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     yes
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     onClick
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#170"
@@ -1065,27 +1341,27 @@ exports[`Storyshots Addons|Info.Markdown Displays Markdown in description 1`] =
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     style
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#666"
@@ -1094,7 +1370,7 @@ exports[`Storyshots Addons|Info.Markdown Displays Markdown in description 1`] =
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
               </tbody>
@@ -1108,6 +1384,79 @@ exports[`Storyshots Addons|Info.Markdown Displays Markdown in description 1`] =
 `;
 
 exports[`Storyshots Addons|Info.Markdown From external Markdown file 1`] = `
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-size: .88em;
+  font-family: Menlo,Monaco,"Courier New",monospace;
+  background-color: #fafafa;
+  padding: .5rem;
+  line-height: 1.5;
+  overflow-x: scroll;
+}
+
+.emotion-2 {
+  overflow: hidden;
+  border: 1px solid #eee;
+  border-radius: 3px;
+  background-color: #FFFFFF;
+  cursor: pointer;
+  font-size: 13px;
+  padding: 3px 10px;
+  -webkit-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.emotion-2:hover {
+  background-color: #f4f7fa;
+  border-color: #ddd;
+}
+
+.emotion-2:active {
+  background-color: #e9ecef;
+  border-color: #ccc;
+}
+
+.emotion-0 {
+  -webkit-transition: -webkit-transform .2s ease;
+  -webkit-transition: transform .2s ease;
+  transition: transform .2s ease;
+  height: 16px;
+  -webkit-transform: translateY(-100%) translateY(-6px);
+  -ms-transform: translateY(-100%) translateY(-6px);
+  transform: translateY(-100%) translateY(-6px);
+}
+
+.emotion-56 {
+  border-collapse: collapse;
+}
+
+.emotion-6 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+}
+
+.emotion-16 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+  white-space: nowrap;
+  font-family: Monaco,Consolas,"Courier New",monospace;
+}
+
 <div>
   <div
     style="position:relative;z-index:0"
@@ -1167,7 +1516,7 @@ exports[`Storyshots Addons|Info.Markdown From external Markdown file 1`] = `
             Story Source
           </h1>
           <pre
-            class="css-r8d96o eyvlbql0"
+            class="emotion-4 emotion-5"
           >
             <div>
               <div
@@ -1225,10 +1574,10 @@ exports[`Storyshots Addons|Info.Markdown From external Markdown file 1`] = `
               </div>
             </div>
             <button
-              class="css-1naocv3 eva467m0"
+              class="emotion-2 emotion-3"
             >
               <div
-                class="css-lvl6aa eva467m1"
+                class="emotion-0 emotion-1"
               >
                 <div
                   style="margin-bottom:6px"
@@ -1255,32 +1604,32 @@ exports[`Storyshots Addons|Info.Markdown From external Markdown file 1`] = `
               "BaseButton" Component
             </h2>
             <table
-              class="css-1uhv8nx e1vdo5380"
+              class="emotion-56 emotion-57"
             >
               <thead>
                 <tr>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     property
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     propType
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     required
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     default
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     description
                   </th>
@@ -1289,22 +1638,22 @@ exports[`Storyshots Addons|Info.Markdown From external Markdown file 1`] = `
               <tbody>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     disabled
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#a11"
@@ -1313,52 +1662,52 @@ exports[`Storyshots Addons|Info.Markdown From external Markdown file 1`] = `
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     label
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     yes
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     onClick
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#170"
@@ -1367,27 +1716,27 @@ exports[`Storyshots Addons|Info.Markdown From external Markdown file 1`] = `
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     style
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#666"
@@ -1396,7 +1745,7 @@ exports[`Storyshots Addons|Info.Markdown From external Markdown file 1`] = `
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
               </tbody>
@@ -1410,6 +1759,79 @@ exports[`Storyshots Addons|Info.Markdown From external Markdown file 1`] = `
 `;
 
 exports[`Storyshots Addons|Info.Markdown From internal Markdown file 1`] = `
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-size: .88em;
+  font-family: Menlo,Monaco,"Courier New",monospace;
+  background-color: #fafafa;
+  padding: .5rem;
+  line-height: 1.5;
+  overflow-x: scroll;
+}
+
+.emotion-2 {
+  overflow: hidden;
+  border: 1px solid #eee;
+  border-radius: 3px;
+  background-color: #FFFFFF;
+  cursor: pointer;
+  font-size: 13px;
+  padding: 3px 10px;
+  -webkit-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.emotion-2:hover {
+  background-color: #f4f7fa;
+  border-color: #ddd;
+}
+
+.emotion-2:active {
+  background-color: #e9ecef;
+  border-color: #ccc;
+}
+
+.emotion-0 {
+  -webkit-transition: -webkit-transform .2s ease;
+  -webkit-transition: transform .2s ease;
+  transition: transform .2s ease;
+  height: 16px;
+  -webkit-transform: translateY(-100%) translateY(-6px);
+  -ms-transform: translateY(-100%) translateY(-6px);
+  transform: translateY(-100%) translateY(-6px);
+}
+
+.emotion-56 {
+  border-collapse: collapse;
+}
+
+.emotion-6 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+}
+
+.emotion-16 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+  white-space: nowrap;
+  font-family: Monaco,Consolas,"Courier New",monospace;
+}
+
 <div>
   <div
     style="position:relative;z-index:0"
@@ -1481,7 +1903,7 @@ exports[`Storyshots Addons|Info.Markdown From internal Markdown file 1`] = `
             Story Source
           </h1>
           <pre
-            class="css-r8d96o eyvlbql0"
+            class="emotion-4 emotion-5"
           >
             <div>
               <div
@@ -1539,10 +1961,10 @@ exports[`Storyshots Addons|Info.Markdown From internal Markdown file 1`] = `
               </div>
             </div>
             <button
-              class="css-1naocv3 eva467m0"
+              class="emotion-2 emotion-3"
             >
               <div
-                class="css-lvl6aa eva467m1"
+                class="emotion-0 emotion-1"
               >
                 <div
                   style="margin-bottom:6px"
@@ -1569,32 +1991,32 @@ exports[`Storyshots Addons|Info.Markdown From internal Markdown file 1`] = `
               "BaseButton" Component
             </h2>
             <table
-              class="css-1uhv8nx e1vdo5380"
+              class="emotion-56 emotion-57"
             >
               <thead>
                 <tr>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     property
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     propType
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     required
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     default
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     description
                   </th>
@@ -1603,22 +2025,22 @@ exports[`Storyshots Addons|Info.Markdown From internal Markdown file 1`] = `
               <tbody>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     disabled
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#a11"
@@ -1627,52 +2049,52 @@ exports[`Storyshots Addons|Info.Markdown From internal Markdown file 1`] = `
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     label
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     yes
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     onClick
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#170"
@@ -1681,27 +2103,27 @@ exports[`Storyshots Addons|Info.Markdown From internal Markdown file 1`] = `
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     style
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#666"
@@ -1710,7 +2132,7 @@ exports[`Storyshots Addons|Info.Markdown From internal Markdown file 1`] = `
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
               </tbody>
@@ -1724,6 +2146,63 @@ exports[`Storyshots Addons|Info.Markdown From internal Markdown file 1`] = `
 `;
 
 exports[`Storyshots Addons|Info.Options.TableComponent Use a custom component for the table 1`] = `
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-size: .88em;
+  font-family: Menlo,Monaco,"Courier New",monospace;
+  background-color: #fafafa;
+  padding: .5rem;
+  line-height: 1.5;
+  overflow-x: scroll;
+}
+
+.emotion-2 {
+  overflow: hidden;
+  border: 1px solid #eee;
+  border-radius: 3px;
+  background-color: #FFFFFF;
+  cursor: pointer;
+  font-size: 13px;
+  padding: 3px 10px;
+  -webkit-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.emotion-2:hover {
+  background-color: #f4f7fa;
+  border-color: #ddd;
+}
+
+.emotion-2:active {
+  background-color: #e9ecef;
+  border-color: #ccc;
+}
+
+.emotion-0 {
+  -webkit-transition: -webkit-transform .2s ease;
+  -webkit-transition: transform .2s ease;
+  transition: transform .2s ease;
+  height: 16px;
+  -webkit-transform: translateY(-100%) translateY(-6px);
+  -ms-transform: translateY(-100%) translateY(-6px);
+  transform: translateY(-100%) translateY(-6px);
+}
+
 <div>
   <div
     style="position:relative;z-index:0"
@@ -1774,7 +2253,7 @@ exports[`Storyshots Addons|Info.Options.TableComponent Use a custom component fo
             Story Source
           </h1>
           <pre
-            class="css-r8d96o eyvlbql0"
+            class="emotion-4 emotion-5"
           >
             <div>
               <div
@@ -1814,10 +2293,10 @@ exports[`Storyshots Addons|Info.Options.TableComponent Use a custom component fo
               </div>
             </div>
             <button
-              class="css-1naocv3 eva467m0"
+              class="emotion-2 emotion-3"
             >
               <div
-                class="css-lvl6aa eva467m1"
+                class="emotion-0 emotion-1"
               >
                 <div
                   style="margin-bottom:6px"
@@ -1913,6 +2392,79 @@ exports[`Storyshots Addons|Info.Options.TableComponent Use a custom component fo
 `;
 
 exports[`Storyshots Addons|Info.Options.excludedPropTypes Excludes propTypes that are in the excludedPropTypes array 1`] = `
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-size: .88em;
+  font-family: Menlo,Monaco,"Courier New",monospace;
+  background-color: #fafafa;
+  padding: .5rem;
+  line-height: 1.5;
+  overflow-x: scroll;
+}
+
+.emotion-2 {
+  overflow: hidden;
+  border: 1px solid #eee;
+  border-radius: 3px;
+  background-color: #FFFFFF;
+  cursor: pointer;
+  font-size: 13px;
+  padding: 3px 10px;
+  -webkit-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.emotion-2:hover {
+  background-color: #f4f7fa;
+  border-color: #ddd;
+}
+
+.emotion-2:active {
+  background-color: #e9ecef;
+  border-color: #ccc;
+}
+
+.emotion-0 {
+  -webkit-transition: -webkit-transform .2s ease;
+  -webkit-transition: transform .2s ease;
+  transition: transform .2s ease;
+  height: 16px;
+  -webkit-transform: translateY(-100%) translateY(-6px);
+  -ms-transform: translateY(-100%) translateY(-6px);
+  transform: translateY(-100%) translateY(-6px);
+}
+
+.emotion-46 {
+  border-collapse: collapse;
+}
+
+.emotion-6 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+}
+
+.emotion-16 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+  white-space: nowrap;
+  font-family: Monaco,Consolas,"Courier New",monospace;
+}
+
 <div>
   <div
     style="position:relative;z-index:0"
@@ -1972,7 +2524,7 @@ exports[`Storyshots Addons|Info.Options.excludedPropTypes Excludes propTypes tha
             Story Source
           </h1>
           <pre
-            class="css-r8d96o eyvlbql0"
+            class="emotion-4 emotion-5"
           >
             <div>
               <div
@@ -2012,10 +2564,10 @@ exports[`Storyshots Addons|Info.Options.excludedPropTypes Excludes propTypes tha
               </div>
             </div>
             <button
-              class="css-1naocv3 eva467m0"
+              class="emotion-2 emotion-3"
             >
               <div
-                class="css-lvl6aa eva467m1"
+                class="emotion-0 emotion-1"
               >
                 <div
                   style="margin-bottom:6px"
@@ -2042,32 +2594,32 @@ exports[`Storyshots Addons|Info.Options.excludedPropTypes Excludes propTypes tha
               "BaseButton" Component
             </h2>
             <table
-              class="css-1uhv8nx e1vdo5380"
+              class="emotion-46 emotion-47"
             >
               <thead>
                 <tr>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     property
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     propType
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     required
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     default
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     description
                   </th>
@@ -2076,22 +2628,22 @@ exports[`Storyshots Addons|Info.Options.excludedPropTypes Excludes propTypes tha
               <tbody>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     disabled
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#a11"
@@ -2100,27 +2652,27 @@ exports[`Storyshots Addons|Info.Options.excludedPropTypes Excludes propTypes tha
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     onClick
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#170"
@@ -2129,27 +2681,27 @@ exports[`Storyshots Addons|Info.Options.excludedPropTypes Excludes propTypes tha
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     style
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#666"
@@ -2158,7 +2710,7 @@ exports[`Storyshots Addons|Info.Options.excludedPropTypes Excludes propTypes tha
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
               </tbody>
@@ -2172,6 +2724,79 @@ exports[`Storyshots Addons|Info.Options.excludedPropTypes Excludes propTypes tha
 `;
 
 exports[`Storyshots Addons|Info.Options.header Shows or hides Info Addon header 1`] = `
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-size: .88em;
+  font-family: Menlo,Monaco,"Courier New",monospace;
+  background-color: #fafafa;
+  padding: .5rem;
+  line-height: 1.5;
+  overflow-x: scroll;
+}
+
+.emotion-2 {
+  overflow: hidden;
+  border: 1px solid #eee;
+  border-radius: 3px;
+  background-color: #FFFFFF;
+  cursor: pointer;
+  font-size: 13px;
+  padding: 3px 10px;
+  -webkit-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.emotion-2:hover {
+  background-color: #f4f7fa;
+  border-color: #ddd;
+}
+
+.emotion-2:active {
+  background-color: #e9ecef;
+  border-color: #ccc;
+}
+
+.emotion-0 {
+  -webkit-transition: -webkit-transform .2s ease;
+  -webkit-transition: transform .2s ease;
+  transition: transform .2s ease;
+  height: 16px;
+  -webkit-transform: translateY(-100%) translateY(-6px);
+  -ms-transform: translateY(-100%) translateY(-6px);
+  transform: translateY(-100%) translateY(-6px);
+}
+
+.emotion-56 {
+  border-collapse: collapse;
+}
+
+.emotion-6 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+}
+
+.emotion-16 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+  white-space: nowrap;
+  font-family: Monaco,Consolas,"Courier New",monospace;
+}
+
 <div>
   <div
     style="position:relative;z-index:0"
@@ -2217,7 +2842,7 @@ exports[`Storyshots Addons|Info.Options.header Shows or hides Info Addon header
             Story Source
           </h1>
           <pre
-            class="css-r8d96o eyvlbql0"
+            class="emotion-4 emotion-5"
           >
             <div>
               <div
@@ -2257,10 +2882,10 @@ exports[`Storyshots Addons|Info.Options.header Shows or hides Info Addon header
               </div>
             </div>
             <button
-              class="css-1naocv3 eva467m0"
+              class="emotion-2 emotion-3"
             >
               <div
-                class="css-lvl6aa eva467m1"
+                class="emotion-0 emotion-1"
               >
                 <div
                   style="margin-bottom:6px"
@@ -2287,32 +2912,32 @@ exports[`Storyshots Addons|Info.Options.header Shows or hides Info Addon header
               "BaseButton" Component
             </h2>
             <table
-              class="css-1uhv8nx e1vdo5380"
+              class="emotion-56 emotion-57"
             >
               <thead>
                 <tr>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     property
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     propType
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     required
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     default
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     description
                   </th>
@@ -2321,22 +2946,22 @@ exports[`Storyshots Addons|Info.Options.header Shows or hides Info Addon header
               <tbody>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     disabled
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#a11"
@@ -2345,52 +2970,52 @@ exports[`Storyshots Addons|Info.Options.header Shows or hides Info Addon header
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     label
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     yes
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     onClick
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#170"
@@ -2399,27 +3024,27 @@ exports[`Storyshots Addons|Info.Options.header Shows or hides Info Addon header
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     style
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#666"
@@ -2428,7 +3053,7 @@ exports[`Storyshots Addons|Info.Options.header Shows or hides Info Addon header
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
               </tbody>
@@ -2442,6 +3067,79 @@ exports[`Storyshots Addons|Info.Options.header Shows or hides Info Addon header
 `;
 
 exports[`Storyshots Addons|Info.Options.inline Inlines component inside story 1`] = `
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-size: .88em;
+  font-family: Menlo,Monaco,"Courier New",monospace;
+  background-color: #fafafa;
+  padding: .5rem;
+  line-height: 1.5;
+  overflow-x: scroll;
+}
+
+.emotion-2 {
+  overflow: hidden;
+  border: 1px solid #eee;
+  border-radius: 3px;
+  background-color: #FFFFFF;
+  cursor: pointer;
+  font-size: 13px;
+  padding: 3px 10px;
+  -webkit-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.emotion-2:hover {
+  background-color: #f4f7fa;
+  border-color: #ddd;
+}
+
+.emotion-2:active {
+  background-color: #e9ecef;
+  border-color: #ccc;
+}
+
+.emotion-0 {
+  -webkit-transition: -webkit-transform .2s ease;
+  -webkit-transition: transform .2s ease;
+  transition: transform .2s ease;
+  height: 16px;
+  -webkit-transform: translateY(-100%) translateY(-6px);
+  -ms-transform: translateY(-100%) translateY(-6px);
+  transform: translateY(-100%) translateY(-6px);
+}
+
+.emotion-56 {
+  border-collapse: collapse;
+}
+
+.emotion-6 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+}
+
+.emotion-16 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+  white-space: nowrap;
+  font-family: Monaco,Consolas,"Courier New",monospace;
+}
+
 <div>
   <div>
     <div
@@ -2492,7 +3190,7 @@ exports[`Storyshots Addons|Info.Options.inline Inlines component inside story 1`
           Story Source
         </h1>
         <pre
-          class="css-r8d96o eyvlbql0"
+          class="emotion-4 emotion-5"
         >
           <div>
             <div
@@ -2532,10 +3230,10 @@ exports[`Storyshots Addons|Info.Options.inline Inlines component inside story 1`
             </div>
           </div>
           <button
-            class="css-1naocv3 eva467m0"
+            class="emotion-2 emotion-3"
           >
             <div
-              class="css-lvl6aa eva467m1"
+              class="emotion-0 emotion-1"
             >
               <div
                 style="margin-bottom:6px"
@@ -2562,32 +3260,32 @@ exports[`Storyshots Addons|Info.Options.inline Inlines component inside story 1`
             "BaseButton" Component
           </h2>
           <table
-            class="css-1uhv8nx e1vdo5380"
+            class="emotion-56 emotion-57"
           >
             <thead>
               <tr>
                 <th
-                  class="css-11b5gui e6fp4ir1"
+                  class="emotion-6 emotion-7"
                 >
                   property
                 </th>
                 <th
-                  class="css-11b5gui e6fp4ir1"
+                  class="emotion-6 emotion-7"
                 >
                   propType
                 </th>
                 <th
-                  class="css-11b5gui e6fp4ir1"
+                  class="emotion-6 emotion-7"
                 >
                   required
                 </th>
                 <th
-                  class="css-11b5gui e6fp4ir1"
+                  class="emotion-6 emotion-7"
                 >
                   default
                 </th>
                 <th
-                  class="css-11b5gui e6fp4ir1"
+                  class="emotion-6 emotion-7"
                 >
                   description
                 </th>
@@ -2596,22 +3294,22 @@ exports[`Storyshots Addons|Info.Options.inline Inlines component inside story 1`
             <tbody>
               <tr>
                 <td
-                  class="css-1qcb1f7 e6fp4ir0"
+                  class="emotion-16 emotion-17"
                 >
                   disabled
                 </td>
                 <td
-                  class="css-1qcb1f7 e6fp4ir0"
+                  class="emotion-16 emotion-17"
                 >
                   <span />
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 >
                   -
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 >
                   <span
                     style="color:#a11"
@@ -2620,52 +3318,52 @@ exports[`Storyshots Addons|Info.Options.inline Inlines component inside story 1`
                   </span>
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 />
               </tr>
               <tr>
                 <td
-                  class="css-1qcb1f7 e6fp4ir0"
+                  class="emotion-16 emotion-17"
                 >
                   label
                 </td>
                 <td
-                  class="css-1qcb1f7 e6fp4ir0"
+                  class="emotion-16 emotion-17"
                 >
                   <span />
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 >
                   yes
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 >
                   -
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 />
               </tr>
               <tr>
                 <td
-                  class="css-1qcb1f7 e6fp4ir0"
+                  class="emotion-16 emotion-17"
                 >
                   onClick
                 </td>
                 <td
-                  class="css-1qcb1f7 e6fp4ir0"
+                  class="emotion-16 emotion-17"
                 >
                   <span />
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 >
                   -
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 >
                   <span
                     style="color:#170"
@@ -2674,27 +3372,27 @@ exports[`Storyshots Addons|Info.Options.inline Inlines component inside story 1`
                   </span>
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 />
               </tr>
               <tr>
                 <td
-                  class="css-1qcb1f7 e6fp4ir0"
+                  class="emotion-16 emotion-17"
                 >
                   style
                 </td>
                 <td
-                  class="css-1qcb1f7 e6fp4ir0"
+                  class="emotion-16 emotion-17"
                 >
                   <span />
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 >
                   -
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 >
                   <span
                     style="color:#666"
@@ -2703,7 +3401,7 @@ exports[`Storyshots Addons|Info.Options.inline Inlines component inside story 1`
                   </span>
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 />
               </tr>
             </tbody>
@@ -2716,6 +3414,79 @@ exports[`Storyshots Addons|Info.Options.inline Inlines component inside story 1`
 `;
 
 exports[`Storyshots Addons|Info.Options.maxPropsIntoLine === 0 Object and array props are broken to lines 1`] = `
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-size: .88em;
+  font-family: Menlo,Monaco,"Courier New",monospace;
+  background-color: #fafafa;
+  padding: .5rem;
+  line-height: 1.5;
+  overflow-x: scroll;
+}
+
+.emotion-2 {
+  overflow: hidden;
+  border: 1px solid #eee;
+  border-radius: 3px;
+  background-color: #FFFFFF;
+  cursor: pointer;
+  font-size: 13px;
+  padding: 3px 10px;
+  -webkit-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.emotion-2:hover {
+  background-color: #f4f7fa;
+  border-color: #ddd;
+}
+
+.emotion-2:active {
+  background-color: #e9ecef;
+  border-color: #ccc;
+}
+
+.emotion-0 {
+  -webkit-transition: -webkit-transform .2s ease;
+  -webkit-transition: transform .2s ease;
+  transition: transform .2s ease;
+  height: 16px;
+  -webkit-transform: translateY(-100%) translateY(-6px);
+  -ms-transform: translateY(-100%) translateY(-6px);
+  transform: translateY(-100%) translateY(-6px);
+}
+
+.emotion-56 {
+  border-collapse: collapse;
+}
+
+.emotion-6 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+}
+
+.emotion-16 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+  white-space: nowrap;
+  font-family: Monaco,Consolas,"Courier New",monospace;
+}
+
 <div>
   <div>
     <div
@@ -2766,7 +3537,7 @@ exports[`Storyshots Addons|Info.Options.maxPropsIntoLine === 0 Object and array
           Story Source
         </h1>
         <pre
-          class="css-r8d96o eyvlbql0"
+          class="emotion-4 emotion-5"
         >
           <div>
             <div
@@ -3506,10 +4277,10 @@ exports[`Storyshots Addons|Info.Options.maxPropsIntoLine === 0 Object and array
             </div>
           </div>
           <button
-            class="css-1naocv3 eva467m0"
+            class="emotion-2 emotion-3"
           >
             <div
-              class="css-lvl6aa eva467m1"
+              class="emotion-0 emotion-1"
             >
               <div
                 style="margin-bottom:6px"
@@ -3536,32 +4307,32 @@ exports[`Storyshots Addons|Info.Options.maxPropsIntoLine === 0 Object and array
             "BaseButton" Component
           </h2>
           <table
-            class="css-1uhv8nx e1vdo5380"
+            class="emotion-56 emotion-57"
           >
             <thead>
               <tr>
                 <th
-                  class="css-11b5gui e6fp4ir1"
+                  class="emotion-6 emotion-7"
                 >
                   property
                 </th>
                 <th
-                  class="css-11b5gui e6fp4ir1"
+                  class="emotion-6 emotion-7"
                 >
                   propType
                 </th>
                 <th
-                  class="css-11b5gui e6fp4ir1"
+                  class="emotion-6 emotion-7"
                 >
                   required
                 </th>
                 <th
-                  class="css-11b5gui e6fp4ir1"
+                  class="emotion-6 emotion-7"
                 >
                   default
                 </th>
                 <th
-                  class="css-11b5gui e6fp4ir1"
+                  class="emotion-6 emotion-7"
                 >
                   description
                 </th>
@@ -3570,22 +4341,22 @@ exports[`Storyshots Addons|Info.Options.maxPropsIntoLine === 0 Object and array
             <tbody>
               <tr>
                 <td
-                  class="css-1qcb1f7 e6fp4ir0"
+                  class="emotion-16 emotion-17"
                 >
                   disabled
                 </td>
                 <td
-                  class="css-1qcb1f7 e6fp4ir0"
+                  class="emotion-16 emotion-17"
                 >
                   <span />
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 >
                   -
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 >
                   <span
                     style="color:#a11"
@@ -3594,52 +4365,52 @@ exports[`Storyshots Addons|Info.Options.maxPropsIntoLine === 0 Object and array
                   </span>
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 />
               </tr>
               <tr>
                 <td
-                  class="css-1qcb1f7 e6fp4ir0"
+                  class="emotion-16 emotion-17"
                 >
                   label
                 </td>
                 <td
-                  class="css-1qcb1f7 e6fp4ir0"
+                  class="emotion-16 emotion-17"
                 >
                   <span />
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 >
                   yes
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 >
                   -
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 />
               </tr>
               <tr>
                 <td
-                  class="css-1qcb1f7 e6fp4ir0"
+                  class="emotion-16 emotion-17"
                 >
                   onClick
                 </td>
                 <td
-                  class="css-1qcb1f7 e6fp4ir0"
+                  class="emotion-16 emotion-17"
                 >
                   <span />
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 >
                   -
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 >
                   <span
                     style="color:#170"
@@ -3648,27 +4419,27 @@ exports[`Storyshots Addons|Info.Options.maxPropsIntoLine === 0 Object and array
                   </span>
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 />
               </tr>
               <tr>
                 <td
-                  class="css-1qcb1f7 e6fp4ir0"
+                  class="emotion-16 emotion-17"
                 >
                   style
                 </td>
                 <td
-                  class="css-1qcb1f7 e6fp4ir0"
+                  class="emotion-16 emotion-17"
                 >
                   <span />
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 >
                   -
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 >
                   <span
                     style="color:#666"
@@ -3677,7 +4448,7 @@ exports[`Storyshots Addons|Info.Options.maxPropsIntoLine === 0 Object and array
                   </span>
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 />
               </tr>
             </tbody>
@@ -3690,6 +4461,79 @@ exports[`Storyshots Addons|Info.Options.maxPropsIntoLine === 0 Object and array
 `;
 
 exports[`Storyshots Addons|Info.Options.maxPropsIntoLine === 3 Object and array props are broken to lines 1`] = `
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-size: .88em;
+  font-family: Menlo,Monaco,"Courier New",monospace;
+  background-color: #fafafa;
+  padding: .5rem;
+  line-height: 1.5;
+  overflow-x: scroll;
+}
+
+.emotion-2 {
+  overflow: hidden;
+  border: 1px solid #eee;
+  border-radius: 3px;
+  background-color: #FFFFFF;
+  cursor: pointer;
+  font-size: 13px;
+  padding: 3px 10px;
+  -webkit-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.emotion-2:hover {
+  background-color: #f4f7fa;
+  border-color: #ddd;
+}
+
+.emotion-2:active {
+  background-color: #e9ecef;
+  border-color: #ccc;
+}
+
+.emotion-0 {
+  -webkit-transition: -webkit-transform .2s ease;
+  -webkit-transition: transform .2s ease;
+  transition: transform .2s ease;
+  height: 16px;
+  -webkit-transform: translateY(-100%) translateY(-6px);
+  -ms-transform: translateY(-100%) translateY(-6px);
+  transform: translateY(-100%) translateY(-6px);
+}
+
+.emotion-56 {
+  border-collapse: collapse;
+}
+
+.emotion-6 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+}
+
+.emotion-16 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+  white-space: nowrap;
+  font-family: Monaco,Consolas,"Courier New",monospace;
+}
+
 <div>
   <div>
     <div
@@ -3740,7 +4584,7 @@ exports[`Storyshots Addons|Info.Options.maxPropsIntoLine === 3 Object and array
           Story Source
         </h1>
         <pre
-          class="css-r8d96o eyvlbql0"
+          class="emotion-4 emotion-5"
         >
           <div>
             <div
@@ -4296,10 +5140,10 @@ exports[`Storyshots Addons|Info.Options.maxPropsIntoLine === 3 Object and array
             </div>
           </div>
           <button
-            class="css-1naocv3 eva467m0"
+            class="emotion-2 emotion-3"
           >
             <div
-              class="css-lvl6aa eva467m1"
+              class="emotion-0 emotion-1"
             >
               <div
                 style="margin-bottom:6px"
@@ -4326,32 +5170,32 @@ exports[`Storyshots Addons|Info.Options.maxPropsIntoLine === 3 Object and array
             "BaseButton" Component
           </h2>
           <table
-            class="css-1uhv8nx e1vdo5380"
+            class="emotion-56 emotion-57"
           >
             <thead>
               <tr>
                 <th
-                  class="css-11b5gui e6fp4ir1"
+                  class="emotion-6 emotion-7"
                 >
                   property
                 </th>
                 <th
-                  class="css-11b5gui e6fp4ir1"
+                  class="emotion-6 emotion-7"
                 >
                   propType
                 </th>
                 <th
-                  class="css-11b5gui e6fp4ir1"
+                  class="emotion-6 emotion-7"
                 >
                   required
                 </th>
                 <th
-                  class="css-11b5gui e6fp4ir1"
+                  class="emotion-6 emotion-7"
                 >
                   default
                 </th>
                 <th
-                  class="css-11b5gui e6fp4ir1"
+                  class="emotion-6 emotion-7"
                 >
                   description
                 </th>
@@ -4360,22 +5204,22 @@ exports[`Storyshots Addons|Info.Options.maxPropsIntoLine === 3 Object and array
             <tbody>
               <tr>
                 <td
-                  class="css-1qcb1f7 e6fp4ir0"
+                  class="emotion-16 emotion-17"
                 >
                   disabled
                 </td>
                 <td
-                  class="css-1qcb1f7 e6fp4ir0"
+                  class="emotion-16 emotion-17"
                 >
                   <span />
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 >
                   -
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 >
                   <span
                     style="color:#a11"
@@ -4384,52 +5228,52 @@ exports[`Storyshots Addons|Info.Options.maxPropsIntoLine === 3 Object and array
                   </span>
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 />
               </tr>
               <tr>
                 <td
-                  class="css-1qcb1f7 e6fp4ir0"
+                  class="emotion-16 emotion-17"
                 >
                   label
                 </td>
                 <td
-                  class="css-1qcb1f7 e6fp4ir0"
+                  class="emotion-16 emotion-17"
                 >
                   <span />
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 >
                   yes
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 >
                   -
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 />
               </tr>
               <tr>
                 <td
-                  class="css-1qcb1f7 e6fp4ir0"
+                  class="emotion-16 emotion-17"
                 >
                   onClick
                 </td>
                 <td
-                  class="css-1qcb1f7 e6fp4ir0"
+                  class="emotion-16 emotion-17"
                 >
                   <span />
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 >
                   -
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 >
                   <span
                     style="color:#170"
@@ -4438,27 +5282,27 @@ exports[`Storyshots Addons|Info.Options.maxPropsIntoLine === 3 Object and array
                   </span>
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 />
               </tr>
               <tr>
                 <td
-                  class="css-1qcb1f7 e6fp4ir0"
+                  class="emotion-16 emotion-17"
                 >
                   style
                 </td>
                 <td
-                  class="css-1qcb1f7 e6fp4ir0"
+                  class="emotion-16 emotion-17"
                 >
                   <span />
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 >
                   -
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 >
                   <span
                     style="color:#666"
@@ -4467,7 +5311,7 @@ exports[`Storyshots Addons|Info.Options.maxPropsIntoLine === 3 Object and array
                   </span>
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 />
               </tr>
             </tbody>
@@ -4480,6 +5324,79 @@ exports[`Storyshots Addons|Info.Options.maxPropsIntoLine === 3 Object and array
 `;
 
 exports[`Storyshots Addons|Info.Options.propTables Shows additional component prop tables 1`] = `
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-size: .88em;
+  font-family: Menlo,Monaco,"Courier New",monospace;
+  background-color: #fafafa;
+  padding: .5rem;
+  line-height: 1.5;
+  overflow-x: scroll;
+}
+
+.emotion-2 {
+  overflow: hidden;
+  border: 1px solid #eee;
+  border-radius: 3px;
+  background-color: #FFFFFF;
+  cursor: pointer;
+  font-size: 13px;
+  padding: 3px 10px;
+  -webkit-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.emotion-2:hover {
+  background-color: #f4f7fa;
+  border-color: #ddd;
+}
+
+.emotion-2:active {
+  background-color: #e9ecef;
+  border-color: #ccc;
+}
+
+.emotion-0 {
+  -webkit-transition: -webkit-transform .2s ease;
+  -webkit-transition: transform .2s ease;
+  transition: transform .2s ease;
+  height: 16px;
+  -webkit-transform: translateY(-100%) translateY(-6px);
+  -ms-transform: translateY(-100%) translateY(-6px);
+  transform: translateY(-100%) translateY(-6px);
+}
+
+.emotion-56 {
+  border-collapse: collapse;
+}
+
+.emotion-6 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+}
+
+.emotion-16 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+  white-space: nowrap;
+  font-family: Monaco,Consolas,"Courier New",monospace;
+}
+
 <div>
   <div
     style="position:relative;z-index:0"
@@ -4539,7 +5456,7 @@ exports[`Storyshots Addons|Info.Options.propTables Shows additional component pr
             Story Source
           </h1>
           <pre
-            class="css-r8d96o eyvlbql0"
+            class="emotion-4 emotion-5"
           >
             <div>
               <div
@@ -4579,10 +5496,10 @@ exports[`Storyshots Addons|Info.Options.propTables Shows additional component pr
               </div>
             </div>
             <button
-              class="css-1naocv3 eva467m0"
+              class="emotion-2 emotion-3"
             >
               <div
-                class="css-lvl6aa eva467m1"
+                class="emotion-0 emotion-1"
               >
                 <div
                   style="margin-bottom:6px"
@@ -4609,32 +5526,32 @@ exports[`Storyshots Addons|Info.Options.propTables Shows additional component pr
               "BaseButton" Component
             </h2>
             <table
-              class="css-1uhv8nx e1vdo5380"
+              class="emotion-56 emotion-57"
             >
               <thead>
                 <tr>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     property
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     propType
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     required
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     default
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     description
                   </th>
@@ -4643,22 +5560,22 @@ exports[`Storyshots Addons|Info.Options.propTables Shows additional component pr
               <tbody>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     disabled
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#a11"
@@ -4667,52 +5584,52 @@ exports[`Storyshots Addons|Info.Options.propTables Shows additional component pr
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     label
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     yes
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     onClick
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#170"
@@ -4721,27 +5638,27 @@ exports[`Storyshots Addons|Info.Options.propTables Shows additional component pr
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     style
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#666"
@@ -4750,7 +5667,7 @@ exports[`Storyshots Addons|Info.Options.propTables Shows additional component pr
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
               </tbody>
@@ -4763,32 +5680,32 @@ exports[`Storyshots Addons|Info.Options.propTables Shows additional component pr
               "FlowTypeButton" Component
             </h2>
             <table
-              class="css-1uhv8nx e1vdo5380"
+              class="emotion-56 emotion-57"
             >
               <thead>
                 <tr>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     property
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     propType
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     required
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     default
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     description
                   </th>
@@ -4797,24 +5714,24 @@ exports[`Storyshots Addons|Info.Options.propTables Shows additional component pr
               <tbody>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     disabled
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span>
                       unknown
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#a11"
@@ -4823,29 +5740,29 @@ exports[`Storyshots Addons|Info.Options.propTables Shows additional component pr
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     onClick
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span>
                       unknown
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#170"
@@ -4854,7 +5771,7 @@ exports[`Storyshots Addons|Info.Options.propTables Shows additional component pr
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
               </tbody>
@@ -4868,6 +5785,79 @@ exports[`Storyshots Addons|Info.Options.propTables Shows additional component pr
 `;
 
 exports[`Storyshots Addons|Info.Options.propTablesExclude Exclude component from prop tables 1`] = `
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-size: .88em;
+  font-family: Menlo,Monaco,"Courier New",monospace;
+  background-color: #fafafa;
+  padding: .5rem;
+  line-height: 1.5;
+  overflow-x: scroll;
+}
+
+.emotion-2 {
+  overflow: hidden;
+  border: 1px solid #eee;
+  border-radius: 3px;
+  background-color: #FFFFFF;
+  cursor: pointer;
+  font-size: 13px;
+  padding: 3px 10px;
+  -webkit-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.emotion-2:hover {
+  background-color: #f4f7fa;
+  border-color: #ddd;
+}
+
+.emotion-2:active {
+  background-color: #e9ecef;
+  border-color: #ccc;
+}
+
+.emotion-0 {
+  -webkit-transition: -webkit-transform .2s ease;
+  -webkit-transition: transform .2s ease;
+  transition: transform .2s ease;
+  height: 16px;
+  -webkit-transform: translateY(-100%) translateY(-6px);
+  -ms-transform: translateY(-100%) translateY(-6px);
+  transform: translateY(-100%) translateY(-6px);
+}
+
+.emotion-56 {
+  border-collapse: collapse;
+}
+
+.emotion-6 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+}
+
+.emotion-16 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+  white-space: nowrap;
+  font-family: Monaco,Consolas,"Courier New",monospace;
+}
+
 <div>
   <div
     style="position:relative;z-index:0"
@@ -4934,7 +5924,7 @@ exports[`Storyshots Addons|Info.Options.propTablesExclude Exclude component from
             Story Source
           </h1>
           <pre
-            class="css-r8d96o eyvlbql0"
+            class="emotion-4 emotion-5"
           >
             <div>
               <div>
@@ -5035,10 +6025,10 @@ exports[`Storyshots Addons|Info.Options.propTablesExclude Exclude component from
               </div>
             </div>
             <button
-              class="css-1naocv3 eva467m0"
+              class="emotion-2 emotion-3"
             >
               <div
-                class="css-lvl6aa eva467m1"
+                class="emotion-0 emotion-1"
               >
                 <div
                   style="margin-bottom:6px"
@@ -5065,32 +6055,32 @@ exports[`Storyshots Addons|Info.Options.propTablesExclude Exclude component from
               "BaseButton" Component
             </h2>
             <table
-              class="css-1uhv8nx e1vdo5380"
+              class="emotion-56 emotion-57"
             >
               <thead>
                 <tr>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     property
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     propType
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     required
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     default
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     description
                   </th>
@@ -5099,22 +6089,22 @@ exports[`Storyshots Addons|Info.Options.propTablesExclude Exclude component from
               <tbody>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     disabled
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#a11"
@@ -5123,52 +6113,52 @@ exports[`Storyshots Addons|Info.Options.propTablesExclude Exclude component from
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     label
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     yes
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     onClick
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#170"
@@ -5177,27 +6167,27 @@ exports[`Storyshots Addons|Info.Options.propTablesExclude Exclude component from
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     style
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#666"
@@ -5206,7 +6196,7 @@ exports[`Storyshots Addons|Info.Options.propTablesExclude Exclude component from
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
               </tbody>
@@ -5220,6 +6210,22 @@ exports[`Storyshots Addons|Info.Options.propTablesExclude Exclude component from
 `;
 
 exports[`Storyshots Addons|Info.Options.source Shows or hides Info Addon source 1`] = `
+.emotion-50 {
+  border-collapse: collapse;
+}
+
+.emotion-0 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+}
+
+.emotion-10 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+  white-space: nowrap;
+  font-family: Monaco,Consolas,"Courier New",monospace;
+}
+
 <div>
   <div
     style="position:relative;z-index:0"
@@ -5285,32 +6291,32 @@ exports[`Storyshots Addons|Info.Options.source Shows or hides Info Addon source
               "BaseButton" Component
             </h2>
             <table
-              class="css-1uhv8nx e1vdo5380"
+              class="emotion-50 emotion-51"
             >
               <thead>
                 <tr>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-0 emotion-1"
                   >
                     property
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-0 emotion-1"
                   >
                     propType
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-0 emotion-1"
                   >
                     required
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-0 emotion-1"
                   >
                     default
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-0 emotion-1"
                   >
                     description
                   </th>
@@ -5319,22 +6325,22 @@ exports[`Storyshots Addons|Info.Options.source Shows or hides Info Addon source
               <tbody>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-10 emotion-11"
                   >
                     disabled
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-10 emotion-11"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-0 emotion-11"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-0 emotion-11"
                   >
                     <span
                       style="color:#a11"
@@ -5343,52 +6349,52 @@ exports[`Storyshots Addons|Info.Options.source Shows or hides Info Addon source
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-0 emotion-11"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-10 emotion-11"
                   >
                     label
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-10 emotion-11"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-0 emotion-11"
                   >
                     yes
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-0 emotion-11"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-0 emotion-11"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-10 emotion-11"
                   >
                     onClick
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-10 emotion-11"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-0 emotion-11"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-0 emotion-11"
                   >
                     <span
                       style="color:#170"
@@ -5397,27 +6403,27 @@ exports[`Storyshots Addons|Info.Options.source Shows or hides Info Addon source
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-0 emotion-11"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-10 emotion-11"
                   >
                     style
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-10 emotion-11"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-0 emotion-11"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-0 emotion-11"
                   >
                     <span
                       style="color:#666"
@@ -5426,7 +6432,7 @@ exports[`Storyshots Addons|Info.Options.source Shows or hides Info Addon source
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-0 emotion-11"
                   />
                 </tr>
               </tbody>
@@ -5440,6 +6446,79 @@ exports[`Storyshots Addons|Info.Options.source Shows or hides Info Addon source
 `;
 
 exports[`Storyshots Addons|Info.Options.styles Extend info styles with an object 1`] = `
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-size: .88em;
+  font-family: Menlo,Monaco,"Courier New",monospace;
+  background-color: #fafafa;
+  padding: .5rem;
+  line-height: 1.5;
+  overflow-x: scroll;
+}
+
+.emotion-2 {
+  overflow: hidden;
+  border: 1px solid #eee;
+  border-radius: 3px;
+  background-color: #FFFFFF;
+  cursor: pointer;
+  font-size: 13px;
+  padding: 3px 10px;
+  -webkit-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.emotion-2:hover {
+  background-color: #f4f7fa;
+  border-color: #ddd;
+}
+
+.emotion-2:active {
+  background-color: #e9ecef;
+  border-color: #ccc;
+}
+
+.emotion-0 {
+  -webkit-transition: -webkit-transform .2s ease;
+  -webkit-transition: transform .2s ease;
+  transition: transform .2s ease;
+  height: 16px;
+  -webkit-transform: translateY(-100%) translateY(-6px);
+  -ms-transform: translateY(-100%) translateY(-6px);
+  transform: translateY(-100%) translateY(-6px);
+}
+
+.emotion-56 {
+  border-collapse: collapse;
+}
+
+.emotion-6 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+}
+
+.emotion-16 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+  white-space: nowrap;
+  font-family: Monaco,Consolas,"Courier New",monospace;
+}
+
 <div>
   <div
     style="position:relative;z-index:0"
@@ -5490,7 +6569,7 @@ exports[`Storyshots Addons|Info.Options.styles Extend info styles with an object
             Story Source
           </h1>
           <pre
-            class="css-r8d96o eyvlbql0"
+            class="emotion-4 emotion-5"
           >
             <div>
               <div
@@ -5530,10 +6609,10 @@ exports[`Storyshots Addons|Info.Options.styles Extend info styles with an object
               </div>
             </div>
             <button
-              class="css-1naocv3 eva467m0"
+              class="emotion-2 emotion-3"
             >
               <div
-                class="css-lvl6aa eva467m1"
+                class="emotion-0 emotion-1"
               >
                 <div
                   style="margin-bottom:6px"
@@ -5560,32 +6639,32 @@ exports[`Storyshots Addons|Info.Options.styles Extend info styles with an object
               "BaseButton" Component
             </h2>
             <table
-              class="css-1uhv8nx e1vdo5380"
+              class="emotion-56 emotion-57"
             >
               <thead>
                 <tr>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     property
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     propType
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     required
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     default
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     description
                   </th>
@@ -5594,22 +6673,22 @@ exports[`Storyshots Addons|Info.Options.styles Extend info styles with an object
               <tbody>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     disabled
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#a11"
@@ -5618,52 +6697,52 @@ exports[`Storyshots Addons|Info.Options.styles Extend info styles with an object
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     label
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     yes
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     onClick
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#170"
@@ -5672,27 +6751,27 @@ exports[`Storyshots Addons|Info.Options.styles Extend info styles with an object
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     style
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#666"
@@ -5701,7 +6780,7 @@ exports[`Storyshots Addons|Info.Options.styles Extend info styles with an object
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
               </tbody>
@@ -5715,6 +6794,79 @@ exports[`Storyshots Addons|Info.Options.styles Extend info styles with an object
 `;
 
 exports[`Storyshots Addons|Info.Options.styles Full control over styles using a function 1`] = `
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-size: .88em;
+  font-family: Menlo,Monaco,"Courier New",monospace;
+  background-color: #fafafa;
+  padding: .5rem;
+  line-height: 1.5;
+  overflow-x: scroll;
+}
+
+.emotion-2 {
+  overflow: hidden;
+  border: 1px solid #eee;
+  border-radius: 3px;
+  background-color: #FFFFFF;
+  cursor: pointer;
+  font-size: 13px;
+  padding: 3px 10px;
+  -webkit-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.emotion-2:hover {
+  background-color: #f4f7fa;
+  border-color: #ddd;
+}
+
+.emotion-2:active {
+  background-color: #e9ecef;
+  border-color: #ccc;
+}
+
+.emotion-0 {
+  -webkit-transition: -webkit-transform .2s ease;
+  -webkit-transition: transform .2s ease;
+  transition: transform .2s ease;
+  height: 16px;
+  -webkit-transform: translateY(-100%) translateY(-6px);
+  -ms-transform: translateY(-100%) translateY(-6px);
+  transform: translateY(-100%) translateY(-6px);
+}
+
+.emotion-56 {
+  border-collapse: collapse;
+}
+
+.emotion-6 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+}
+
+.emotion-16 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+  white-space: nowrap;
+  font-family: Monaco,Consolas,"Courier New",monospace;
+}
+
 <div>
   <div
     style="position:relative;z-index:0"
@@ -5765,7 +6917,7 @@ exports[`Storyshots Addons|Info.Options.styles Full control over styles using a
             Story Source
           </h1>
           <pre
-            class="css-r8d96o eyvlbql0"
+            class="emotion-4 emotion-5"
           >
             <div>
               <div
@@ -5805,10 +6957,10 @@ exports[`Storyshots Addons|Info.Options.styles Full control over styles using a
               </div>
             </div>
             <button
-              class="css-1naocv3 eva467m0"
+              class="emotion-2 emotion-3"
             >
               <div
-                class="css-lvl6aa eva467m1"
+                class="emotion-0 emotion-1"
               >
                 <div
                   style="margin-bottom:6px"
@@ -5835,32 +6987,32 @@ exports[`Storyshots Addons|Info.Options.styles Full control over styles using a
               "BaseButton" Component
             </h2>
             <table
-              class="css-1uhv8nx e1vdo5380"
+              class="emotion-56 emotion-57"
             >
               <thead>
                 <tr>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     property
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     propType
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     required
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     default
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     description
                   </th>
@@ -5869,22 +7021,22 @@ exports[`Storyshots Addons|Info.Options.styles Full control over styles using a
               <tbody>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     disabled
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#a11"
@@ -5893,52 +7045,52 @@ exports[`Storyshots Addons|Info.Options.styles Full control over styles using a
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     label
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     yes
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     onClick
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#170"
@@ -5947,27 +7099,27 @@ exports[`Storyshots Addons|Info.Options.styles Full control over styles using a
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     style
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#666"
@@ -5976,7 +7128,7 @@ exports[`Storyshots Addons|Info.Options.styles Full control over styles using a
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
               </tbody>
@@ -5998,6 +7150,79 @@ exports[`Storyshots Addons|Info.Parameters Disable the addon entirely 1`] = `
 `;
 
 exports[`Storyshots Addons|Info.Parameters Overwrite the parameters with markdown variable 1`] = `
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-size: .88em;
+  font-family: Menlo,Monaco,"Courier New",monospace;
+  background-color: #fafafa;
+  padding: .5rem;
+  line-height: 1.5;
+  overflow-x: scroll;
+}
+
+.emotion-2 {
+  overflow: hidden;
+  border: 1px solid #eee;
+  border-radius: 3px;
+  background-color: #FFFFFF;
+  cursor: pointer;
+  font-size: 13px;
+  padding: 3px 10px;
+  -webkit-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.emotion-2:hover {
+  background-color: #f4f7fa;
+  border-color: #ddd;
+}
+
+.emotion-2:active {
+  background-color: #e9ecef;
+  border-color: #ccc;
+}
+
+.emotion-0 {
+  -webkit-transition: -webkit-transform .2s ease;
+  -webkit-transition: transform .2s ease;
+  transition: transform .2s ease;
+  height: 16px;
+  -webkit-transform: translateY(-100%) translateY(-6px);
+  -ms-transform: translateY(-100%) translateY(-6px);
+  transform: translateY(-100%) translateY(-6px);
+}
+
+.emotion-56 {
+  border-collapse: collapse;
+}
+
+.emotion-6 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+}
+
+.emotion-16 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+  white-space: nowrap;
+  font-family: Monaco,Consolas,"Courier New",monospace;
+}
+
 <div>
   <div
     style="position:relative;z-index:0"
@@ -6088,7 +7313,7 @@ exports[`Storyshots Addons|Info.Parameters Overwrite the parameters with markdow
             Story Source
           </h1>
           <pre
-            class="css-r8d96o eyvlbql0"
+            class="emotion-4 emotion-5"
           >
             <div>
               <div
@@ -6146,10 +7371,10 @@ exports[`Storyshots Addons|Info.Parameters Overwrite the parameters with markdow
               </div>
             </div>
             <button
-              class="css-1naocv3 eva467m0"
+              class="emotion-2 emotion-3"
             >
               <div
-                class="css-lvl6aa eva467m1"
+                class="emotion-0 emotion-1"
               >
                 <div
                   style="margin-bottom:6px"
@@ -6176,32 +7401,32 @@ exports[`Storyshots Addons|Info.Parameters Overwrite the parameters with markdow
               "BaseButton" Component
             </h2>
             <table
-              class="css-1uhv8nx e1vdo5380"
+              class="emotion-56 emotion-57"
             >
               <thead>
                 <tr>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     property
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     propType
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     required
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     default
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     description
                   </th>
@@ -6210,22 +7435,22 @@ exports[`Storyshots Addons|Info.Parameters Overwrite the parameters with markdow
               <tbody>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     disabled
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#a11"
@@ -6234,52 +7459,52 @@ exports[`Storyshots Addons|Info.Parameters Overwrite the parameters with markdow
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     label
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     yes
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     onClick
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#170"
@@ -6288,27 +7513,27 @@ exports[`Storyshots Addons|Info.Parameters Overwrite the parameters with markdow
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     style
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#666"
@@ -6317,7 +7542,7 @@ exports[`Storyshots Addons|Info.Parameters Overwrite the parameters with markdow
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
               </tbody>
@@ -6331,6 +7556,79 @@ exports[`Storyshots Addons|Info.Parameters Overwrite the parameters with markdow
 `;
 
 exports[`Storyshots Addons|Info.Parameters Overwrite the text parameter with markdown inline 1`] = `
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-size: .88em;
+  font-family: Menlo,Monaco,"Courier New",monospace;
+  background-color: #fafafa;
+  padding: .5rem;
+  line-height: 1.5;
+  overflow-x: scroll;
+}
+
+.emotion-2 {
+  overflow: hidden;
+  border: 1px solid #eee;
+  border-radius: 3px;
+  background-color: #FFFFFF;
+  cursor: pointer;
+  font-size: 13px;
+  padding: 3px 10px;
+  -webkit-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.emotion-2:hover {
+  background-color: #f4f7fa;
+  border-color: #ddd;
+}
+
+.emotion-2:active {
+  background-color: #e9ecef;
+  border-color: #ccc;
+}
+
+.emotion-0 {
+  -webkit-transition: -webkit-transform .2s ease;
+  -webkit-transition: transform .2s ease;
+  transition: transform .2s ease;
+  height: 16px;
+  -webkit-transform: translateY(-100%) translateY(-6px);
+  -ms-transform: translateY(-100%) translateY(-6px);
+  transform: translateY(-100%) translateY(-6px);
+}
+
+.emotion-56 {
+  border-collapse: collapse;
+}
+
+.emotion-6 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+}
+
+.emotion-16 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+  white-space: nowrap;
+  font-family: Monaco,Consolas,"Courier New",monospace;
+}
+
 <div>
   <div>
     <div
@@ -6392,7 +7690,7 @@ exports[`Storyshots Addons|Info.Parameters Overwrite the text parameter with mar
           Story Source
         </h1>
         <pre
-          class="css-r8d96o eyvlbql0"
+          class="emotion-4 emotion-5"
         >
           <div>
             <div
@@ -6450,10 +7748,10 @@ exports[`Storyshots Addons|Info.Parameters Overwrite the text parameter with mar
             </div>
           </div>
           <button
-            class="css-1naocv3 eva467m0"
+            class="emotion-2 emotion-3"
           >
             <div
-              class="css-lvl6aa eva467m1"
+              class="emotion-0 emotion-1"
             >
               <div
                 style="margin-bottom:6px"
@@ -6480,32 +7778,32 @@ exports[`Storyshots Addons|Info.Parameters Overwrite the text parameter with mar
             "BaseButton" Component
           </h2>
           <table
-            class="css-1uhv8nx e1vdo5380"
+            class="emotion-56 emotion-57"
           >
             <thead>
               <tr>
                 <th
-                  class="css-11b5gui e6fp4ir1"
+                  class="emotion-6 emotion-7"
                 >
                   property
                 </th>
                 <th
-                  class="css-11b5gui e6fp4ir1"
+                  class="emotion-6 emotion-7"
                 >
                   propType
                 </th>
                 <th
-                  class="css-11b5gui e6fp4ir1"
+                  class="emotion-6 emotion-7"
                 >
                   required
                 </th>
                 <th
-                  class="css-11b5gui e6fp4ir1"
+                  class="emotion-6 emotion-7"
                 >
                   default
                 </th>
                 <th
-                  class="css-11b5gui e6fp4ir1"
+                  class="emotion-6 emotion-7"
                 >
                   description
                 </th>
@@ -6514,22 +7812,22 @@ exports[`Storyshots Addons|Info.Parameters Overwrite the text parameter with mar
             <tbody>
               <tr>
                 <td
-                  class="css-1qcb1f7 e6fp4ir0"
+                  class="emotion-16 emotion-17"
                 >
                   disabled
                 </td>
                 <td
-                  class="css-1qcb1f7 e6fp4ir0"
+                  class="emotion-16 emotion-17"
                 >
                   <span />
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 >
                   -
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 >
                   <span
                     style="color:#a11"
@@ -6538,52 +7836,52 @@ exports[`Storyshots Addons|Info.Parameters Overwrite the text parameter with mar
                   </span>
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 />
               </tr>
               <tr>
                 <td
-                  class="css-1qcb1f7 e6fp4ir0"
+                  class="emotion-16 emotion-17"
                 >
                   label
                 </td>
                 <td
-                  class="css-1qcb1f7 e6fp4ir0"
+                  class="emotion-16 emotion-17"
                 >
                   <span />
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 >
                   yes
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 >
                   -
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 />
               </tr>
               <tr>
                 <td
-                  class="css-1qcb1f7 e6fp4ir0"
+                  class="emotion-16 emotion-17"
                 >
                   onClick
                 </td>
                 <td
-                  class="css-1qcb1f7 e6fp4ir0"
+                  class="emotion-16 emotion-17"
                 >
                   <span />
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 >
                   -
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 >
                   <span
                     style="color:#170"
@@ -6592,27 +7890,27 @@ exports[`Storyshots Addons|Info.Parameters Overwrite the text parameter with mar
                   </span>
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 />
               </tr>
               <tr>
                 <td
-                  class="css-1qcb1f7 e6fp4ir0"
+                  class="emotion-16 emotion-17"
                 >
                   style
                 </td>
                 <td
-                  class="css-1qcb1f7 e6fp4ir0"
+                  class="emotion-16 emotion-17"
                 >
                   <span />
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 >
                   -
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 >
                   <span
                     style="color:#666"
@@ -6621,7 +7919,7 @@ exports[`Storyshots Addons|Info.Parameters Overwrite the text parameter with mar
                   </span>
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 />
               </tr>
             </tbody>
@@ -6634,6 +7932,79 @@ exports[`Storyshots Addons|Info.Parameters Overwrite the text parameter with mar
 `;
 
 exports[`Storyshots Addons|Info.Parameters Overwriting and extending the parameters and options set stories-wise 1`] = `
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-size: .88em;
+  font-family: Menlo,Monaco,"Courier New",monospace;
+  background-color: #fafafa;
+  padding: .5rem;
+  line-height: 1.5;
+  overflow-x: scroll;
+}
+
+.emotion-2 {
+  overflow: hidden;
+  border: 1px solid #eee;
+  border-radius: 3px;
+  background-color: #FFFFFF;
+  cursor: pointer;
+  font-size: 13px;
+  padding: 3px 10px;
+  -webkit-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.emotion-2:hover {
+  background-color: #f4f7fa;
+  border-color: #ddd;
+}
+
+.emotion-2:active {
+  background-color: #e9ecef;
+  border-color: #ccc;
+}
+
+.emotion-0 {
+  -webkit-transition: -webkit-transform .2s ease;
+  -webkit-transition: transform .2s ease;
+  transition: transform .2s ease;
+  height: 16px;
+  -webkit-transform: translateY(-100%) translateY(-6px);
+  -ms-transform: translateY(-100%) translateY(-6px);
+  transform: translateY(-100%) translateY(-6px);
+}
+
+.emotion-46 {
+  border-collapse: collapse;
+}
+
+.emotion-6 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+}
+
+.emotion-16 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+  white-space: nowrap;
+  font-family: Monaco,Consolas,"Courier New",monospace;
+}
+
 <div>
   <div>
     <div
@@ -6684,7 +8055,7 @@ exports[`Storyshots Addons|Info.Parameters Overwriting and extending the paramet
           Story Source
         </h1>
         <pre
-          class="css-r8d96o eyvlbql0"
+          class="emotion-4 emotion-5"
         >
           <div>
             <div
@@ -6724,10 +8095,10 @@ exports[`Storyshots Addons|Info.Parameters Overwriting and extending the paramet
             </div>
           </div>
           <button
-            class="css-1naocv3 eva467m0"
+            class="emotion-2 emotion-3"
           >
             <div
-              class="css-lvl6aa eva467m1"
+              class="emotion-0 emotion-1"
             >
               <div
                 style="margin-bottom:6px"
@@ -6754,32 +8125,32 @@ exports[`Storyshots Addons|Info.Parameters Overwriting and extending the paramet
             "BaseButton" Component
           </h2>
           <table
-            class="css-1uhv8nx e1vdo5380"
+            class="emotion-46 emotion-47"
           >
             <thead>
               <tr>
                 <th
-                  class="css-11b5gui e6fp4ir1"
+                  class="emotion-6 emotion-7"
                 >
                   property
                 </th>
                 <th
-                  class="css-11b5gui e6fp4ir1"
+                  class="emotion-6 emotion-7"
                 >
                   propType
                 </th>
                 <th
-                  class="css-11b5gui e6fp4ir1"
+                  class="emotion-6 emotion-7"
                 >
                   required
                 </th>
                 <th
-                  class="css-11b5gui e6fp4ir1"
+                  class="emotion-6 emotion-7"
                 >
                   default
                 </th>
                 <th
-                  class="css-11b5gui e6fp4ir1"
+                  class="emotion-6 emotion-7"
                 >
                   description
                 </th>
@@ -6788,22 +8159,22 @@ exports[`Storyshots Addons|Info.Parameters Overwriting and extending the paramet
             <tbody>
               <tr>
                 <td
-                  class="css-1qcb1f7 e6fp4ir0"
+                  class="emotion-16 emotion-17"
                 >
                   disabled
                 </td>
                 <td
-                  class="css-1qcb1f7 e6fp4ir0"
+                  class="emotion-16 emotion-17"
                 >
                   <span />
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 >
                   -
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 >
                   <span
                     style="color:#a11"
@@ -6812,27 +8183,27 @@ exports[`Storyshots Addons|Info.Parameters Overwriting and extending the paramet
                   </span>
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 />
               </tr>
               <tr>
                 <td
-                  class="css-1qcb1f7 e6fp4ir0"
+                  class="emotion-16 emotion-17"
                 >
                   onClick
                 </td>
                 <td
-                  class="css-1qcb1f7 e6fp4ir0"
+                  class="emotion-16 emotion-17"
                 >
                   <span />
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 >
                   -
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 >
                   <span
                     style="color:#170"
@@ -6841,27 +8212,27 @@ exports[`Storyshots Addons|Info.Parameters Overwriting and extending the paramet
                   </span>
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 />
               </tr>
               <tr>
                 <td
-                  class="css-1qcb1f7 e6fp4ir0"
+                  class="emotion-16 emotion-17"
                 >
                   style
                 </td>
                 <td
-                  class="css-1qcb1f7 e6fp4ir0"
+                  class="emotion-16 emotion-17"
                 >
                   <span />
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 >
                   -
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 >
                   <span
                     style="color:#666"
@@ -6870,7 +8241,7 @@ exports[`Storyshots Addons|Info.Parameters Overwriting and extending the paramet
                   </span>
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 />
               </tr>
             </tbody>
@@ -6883,6 +8254,79 @@ exports[`Storyshots Addons|Info.Parameters Overwriting and extending the paramet
 `;
 
 exports[`Storyshots Addons|Info.Parameters Using paramaters across all stories 1`] = `
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-size: .88em;
+  font-family: Menlo,Monaco,"Courier New",monospace;
+  background-color: #fafafa;
+  padding: .5rem;
+  line-height: 1.5;
+  overflow-x: scroll;
+}
+
+.emotion-2 {
+  overflow: hidden;
+  border: 1px solid #eee;
+  border-radius: 3px;
+  background-color: #FFFFFF;
+  cursor: pointer;
+  font-size: 13px;
+  padding: 3px 10px;
+  -webkit-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.emotion-2:hover {
+  background-color: #f4f7fa;
+  border-color: #ddd;
+}
+
+.emotion-2:active {
+  background-color: #e9ecef;
+  border-color: #ccc;
+}
+
+.emotion-0 {
+  -webkit-transition: -webkit-transform .2s ease;
+  -webkit-transition: transform .2s ease;
+  transition: transform .2s ease;
+  height: 16px;
+  -webkit-transform: translateY(-100%) translateY(-6px);
+  -ms-transform: translateY(-100%) translateY(-6px);
+  transform: translateY(-100%) translateY(-6px);
+}
+
+.emotion-56 {
+  border-collapse: collapse;
+}
+
+.emotion-6 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+}
+
+.emotion-16 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+  white-space: nowrap;
+  font-family: Monaco,Consolas,"Courier New",monospace;
+}
+
 <div>
   <div>
     <div
@@ -6933,7 +8377,7 @@ exports[`Storyshots Addons|Info.Parameters Using paramaters across all stories 1
           Story Source
         </h1>
         <pre
-          class="css-r8d96o eyvlbql0"
+          class="emotion-4 emotion-5"
         >
           <div>
             <div
@@ -6973,10 +8417,10 @@ exports[`Storyshots Addons|Info.Parameters Using paramaters across all stories 1
             </div>
           </div>
           <button
-            class="css-1naocv3 eva467m0"
+            class="emotion-2 emotion-3"
           >
             <div
-              class="css-lvl6aa eva467m1"
+              class="emotion-0 emotion-1"
             >
               <div
                 style="margin-bottom:6px"
@@ -7003,32 +8447,32 @@ exports[`Storyshots Addons|Info.Parameters Using paramaters across all stories 1
             "BaseButton" Component
           </h2>
           <table
-            class="css-1uhv8nx e1vdo5380"
+            class="emotion-56 emotion-57"
           >
             <thead>
               <tr>
                 <th
-                  class="css-11b5gui e6fp4ir1"
+                  class="emotion-6 emotion-7"
                 >
                   property
                 </th>
                 <th
-                  class="css-11b5gui e6fp4ir1"
+                  class="emotion-6 emotion-7"
                 >
                   propType
                 </th>
                 <th
-                  class="css-11b5gui e6fp4ir1"
+                  class="emotion-6 emotion-7"
                 >
                   required
                 </th>
                 <th
-                  class="css-11b5gui e6fp4ir1"
+                  class="emotion-6 emotion-7"
                 >
                   default
                 </th>
                 <th
-                  class="css-11b5gui e6fp4ir1"
+                  class="emotion-6 emotion-7"
                 >
                   description
                 </th>
@@ -7037,22 +8481,22 @@ exports[`Storyshots Addons|Info.Parameters Using paramaters across all stories 1
             <tbody>
               <tr>
                 <td
-                  class="css-1qcb1f7 e6fp4ir0"
+                  class="emotion-16 emotion-17"
                 >
                   disabled
                 </td>
                 <td
-                  class="css-1qcb1f7 e6fp4ir0"
+                  class="emotion-16 emotion-17"
                 >
                   <span />
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 >
                   -
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 >
                   <span
                     style="color:#a11"
@@ -7061,52 +8505,52 @@ exports[`Storyshots Addons|Info.Parameters Using paramaters across all stories 1
                   </span>
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 />
               </tr>
               <tr>
                 <td
-                  class="css-1qcb1f7 e6fp4ir0"
+                  class="emotion-16 emotion-17"
                 >
                   label
                 </td>
                 <td
-                  class="css-1qcb1f7 e6fp4ir0"
+                  class="emotion-16 emotion-17"
                 >
                   <span />
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 >
                   yes
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 >
                   -
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 />
               </tr>
               <tr>
                 <td
-                  class="css-1qcb1f7 e6fp4ir0"
+                  class="emotion-16 emotion-17"
                 >
                   onClick
                 </td>
                 <td
-                  class="css-1qcb1f7 e6fp4ir0"
+                  class="emotion-16 emotion-17"
                 >
                   <span />
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 >
                   -
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 >
                   <span
                     style="color:#170"
@@ -7115,27 +8559,27 @@ exports[`Storyshots Addons|Info.Parameters Using paramaters across all stories 1
                   </span>
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 />
               </tr>
               <tr>
                 <td
-                  class="css-1qcb1f7 e6fp4ir0"
+                  class="emotion-16 emotion-17"
                 >
                   style
                 </td>
                 <td
-                  class="css-1qcb1f7 e6fp4ir0"
+                  class="emotion-16 emotion-17"
                 >
                   <span />
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 >
                   -
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 >
                   <span
                     style="color:#666"
@@ -7144,7 +8588,7 @@ exports[`Storyshots Addons|Info.Parameters Using paramaters across all stories 1
                   </span>
                 </td>
                 <td
-                  class="css-11b5gui e6fp4ir0"
+                  class="emotion-6 emotion-17"
                 />
               </tr>
             </tbody>
@@ -7157,6 +8601,79 @@ exports[`Storyshots Addons|Info.Parameters Using paramaters across all stories 1
 `;
 
 exports[`Storyshots Addons|Info.React Docgen Comments from Flow declarations 1`] = `
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-size: .88em;
+  font-family: Menlo,Monaco,"Courier New",monospace;
+  background-color: #fafafa;
+  padding: .5rem;
+  line-height: 1.5;
+  overflow-x: scroll;
+}
+
+.emotion-2 {
+  overflow: hidden;
+  border: 1px solid #eee;
+  border-radius: 3px;
+  background-color: #FFFFFF;
+  cursor: pointer;
+  font-size: 13px;
+  padding: 3px 10px;
+  -webkit-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.emotion-2:hover {
+  background-color: #f4f7fa;
+  border-color: #ddd;
+}
+
+.emotion-2:active {
+  background-color: #e9ecef;
+  border-color: #ccc;
+}
+
+.emotion-0 {
+  -webkit-transition: -webkit-transform .2s ease;
+  -webkit-transition: transform .2s ease;
+  transition: transform .2s ease;
+  height: 16px;
+  -webkit-transform: translateY(-100%) translateY(-6px);
+  -ms-transform: translateY(-100%) translateY(-6px);
+  transform: translateY(-100%) translateY(-6px);
+}
+
+.emotion-36 {
+  border-collapse: collapse;
+}
+
+.emotion-6 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+}
+
+.emotion-16 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+  white-space: nowrap;
+  font-family: Monaco,Consolas,"Courier New",monospace;
+}
+
 <div>
   <div
     style="position:relative;z-index:0"
@@ -7216,7 +8733,7 @@ exports[`Storyshots Addons|Info.React Docgen Comments from Flow declarations 1`]
             Story Source
           </h1>
           <pre
-            class="css-r8d96o eyvlbql0"
+            class="emotion-4 emotion-5"
           >
             <div>
               <div
@@ -7274,10 +8791,10 @@ exports[`Storyshots Addons|Info.React Docgen Comments from Flow declarations 1`]
               </div>
             </div>
             <button
-              class="css-1naocv3 eva467m0"
+              class="emotion-2 emotion-3"
             >
               <div
-                class="css-lvl6aa eva467m1"
+                class="emotion-0 emotion-1"
               >
                 <div
                   style="margin-bottom:6px"
@@ -7304,32 +8821,32 @@ exports[`Storyshots Addons|Info.React Docgen Comments from Flow declarations 1`]
               "FlowTypeButton" Component
             </h2>
             <table
-              class="css-1uhv8nx e1vdo5380"
+              class="emotion-36 emotion-37"
             >
               <thead>
                 <tr>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     property
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     propType
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     required
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     default
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     description
                   </th>
@@ -7338,24 +8855,24 @@ exports[`Storyshots Addons|Info.React Docgen Comments from Flow declarations 1`]
               <tbody>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     disabled
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span>
                       unknown
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#a11"
@@ -7364,29 +8881,29 @@ exports[`Storyshots Addons|Info.React Docgen Comments from Flow declarations 1`]
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     onClick
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span>
                       unknown
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#170"
@@ -7395,7 +8912,7 @@ exports[`Storyshots Addons|Info.React Docgen Comments from Flow declarations 1`]
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
               </tbody>
@@ -7409,6 +8926,79 @@ exports[`Storyshots Addons|Info.React Docgen Comments from Flow declarations 1`]
 `;
 
 exports[`Storyshots Addons|Info.React Docgen Comments from PropType declarations 1`] = `
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-size: .88em;
+  font-family: Menlo,Monaco,"Courier New",monospace;
+  background-color: #fafafa;
+  padding: .5rem;
+  line-height: 1.5;
+  overflow-x: scroll;
+}
+
+.emotion-2 {
+  overflow: hidden;
+  border: 1px solid #eee;
+  border-radius: 3px;
+  background-color: #FFFFFF;
+  cursor: pointer;
+  font-size: 13px;
+  padding: 3px 10px;
+  -webkit-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.emotion-2:hover {
+  background-color: #f4f7fa;
+  border-color: #ddd;
+}
+
+.emotion-2:active {
+  background-color: #e9ecef;
+  border-color: #ccc;
+}
+
+.emotion-0 {
+  -webkit-transition: -webkit-transform .2s ease;
+  -webkit-transition: transform .2s ease;
+  transition: transform .2s ease;
+  height: 16px;
+  -webkit-transform: translateY(-100%) translateY(-6px);
+  -ms-transform: translateY(-100%) translateY(-6px);
+  transform: translateY(-100%) translateY(-6px);
+}
+
+.emotion-146 {
+  border-collapse: collapse;
+}
+
+.emotion-6 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+}
+
+.emotion-16 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+  white-space: nowrap;
+  font-family: Monaco,Consolas,"Courier New",monospace;
+}
+
 <div>
   <div
     style="position:relative;z-index:0"
@@ -7468,7 +9058,7 @@ exports[`Storyshots Addons|Info.React Docgen Comments from PropType declarations
             Story Source
           </h1>
           <pre
-            class="css-r8d96o eyvlbql0"
+            class="emotion-4 emotion-5"
           >
             <div>
               <div
@@ -7727,10 +9317,10 @@ exports[`Storyshots Addons|Info.React Docgen Comments from PropType declarations
               </div>
             </div>
             <button
-              class="css-1naocv3 eva467m0"
+              class="emotion-2 emotion-3"
             >
               <div
-                class="css-lvl6aa eva467m1"
+                class="emotion-0 emotion-1"
               >
                 <div
                   style="margin-bottom:6px"
@@ -7757,32 +9347,32 @@ exports[`Storyshots Addons|Info.React Docgen Comments from PropType declarations
               "DocgenButton" Component
             </h2>
             <table
-              class="css-1uhv8nx e1vdo5380"
+              class="emotion-146 emotion-147"
             >
               <thead>
                 <tr>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     property
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     propType
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     required
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     default
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     description
                   </th>
@@ -7791,22 +9381,22 @@ exports[`Storyshots Addons|Info.React Docgen Comments from PropType declarations
               <tbody>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     disabled
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#a11"
@@ -7815,52 +9405,52 @@ exports[`Storyshots Addons|Info.React Docgen Comments from PropType declarations
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     label
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     yes
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     onClick
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#170"
@@ -7869,27 +9459,27 @@ exports[`Storyshots Addons|Info.React Docgen Comments from PropType declarations
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     one
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#666"
@@ -7912,27 +9502,27 @@ exports[`Storyshots Addons|Info.React Docgen Comments from PropType declarations
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     two
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#666"
@@ -7997,27 +9587,27 @@ exports[`Storyshots Addons|Info.React Docgen Comments from PropType declarations
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     obj
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#666"
@@ -8040,27 +9630,27 @@ exports[`Storyshots Addons|Info.React Docgen Comments from PropType declarations
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     shape
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#666"
@@ -8135,27 +9725,27 @@ exports[`Storyshots Addons|Info.React Docgen Comments from PropType declarations
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     arrayOf
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#666"
@@ -8188,27 +9778,27 @@ exports[`Storyshots Addons|Info.React Docgen Comments from PropType declarations
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     msg
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#666"
@@ -8217,27 +9807,27 @@ exports[`Storyshots Addons|Info.React Docgen Comments from PropType declarations
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     enm
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#22a;word-break:break-word"
@@ -8246,27 +9836,27 @@ exports[`Storyshots Addons|Info.React Docgen Comments from PropType declarations
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     enmEval
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#22a;word-break:break-word"
@@ -8275,27 +9865,27 @@ exports[`Storyshots Addons|Info.React Docgen Comments from PropType declarations
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     union
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#22a;word-break:break-word"
@@ -8304,27 +9894,27 @@ exports[`Storyshots Addons|Info.React Docgen Comments from PropType declarations
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     optionalString
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#22a;word-break:break-word"
@@ -8333,7 +9923,7 @@ exports[`Storyshots Addons|Info.React Docgen Comments from PropType declarations
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
               </tbody>
@@ -8347,6 +9937,79 @@ exports[`Storyshots Addons|Info.React Docgen Comments from PropType declarations
 `;
 
 exports[`Storyshots Addons|Info.React Docgen Comments from component declaration 1`] = `
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-size: .88em;
+  font-family: Menlo,Monaco,"Courier New",monospace;
+  background-color: #fafafa;
+  padding: .5rem;
+  line-height: 1.5;
+  overflow-x: scroll;
+}
+
+.emotion-2 {
+  overflow: hidden;
+  border: 1px solid #eee;
+  border-radius: 3px;
+  background-color: #FFFFFF;
+  cursor: pointer;
+  font-size: 13px;
+  padding: 3px 10px;
+  -webkit-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.emotion-2:hover {
+  background-color: #f4f7fa;
+  border-color: #ddd;
+}
+
+.emotion-2:active {
+  background-color: #e9ecef;
+  border-color: #ccc;
+}
+
+.emotion-0 {
+  -webkit-transition: -webkit-transform .2s ease;
+  -webkit-transition: transform .2s ease;
+  transition: transform .2s ease;
+  height: 16px;
+  -webkit-transform: translateY(-100%) translateY(-6px);
+  -ms-transform: translateY(-100%) translateY(-6px);
+  transform: translateY(-100%) translateY(-6px);
+}
+
+.emotion-56 {
+  border-collapse: collapse;
+}
+
+.emotion-6 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+}
+
+.emotion-16 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+  white-space: nowrap;
+  font-family: Monaco,Consolas,"Courier New",monospace;
+}
+
 <div>
   <div
     style="position:relative;z-index:0"
@@ -8406,7 +10069,7 @@ exports[`Storyshots Addons|Info.React Docgen Comments from component declaration
             Story Source
           </h1>
           <pre
-            class="css-r8d96o eyvlbql0"
+            class="emotion-4 emotion-5"
           >
             <div>
               <div
@@ -8464,10 +10127,10 @@ exports[`Storyshots Addons|Info.React Docgen Comments from component declaration
               </div>
             </div>
             <button
-              class="css-1naocv3 eva467m0"
+              class="emotion-2 emotion-3"
             >
               <div
-                class="css-lvl6aa eva467m1"
+                class="emotion-0 emotion-1"
               >
                 <div
                   style="margin-bottom:6px"
@@ -8494,32 +10157,32 @@ exports[`Storyshots Addons|Info.React Docgen Comments from component declaration
               "BaseButton" Component
             </h2>
             <table
-              class="css-1uhv8nx e1vdo5380"
+              class="emotion-56 emotion-57"
             >
               <thead>
                 <tr>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     property
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     propType
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     required
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     default
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     description
                   </th>
@@ -8528,22 +10191,22 @@ exports[`Storyshots Addons|Info.React Docgen Comments from component declaration
               <tbody>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     disabled
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#a11"
@@ -8552,52 +10215,52 @@ exports[`Storyshots Addons|Info.React Docgen Comments from component declaration
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     label
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     yes
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     onClick
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#170"
@@ -8606,27 +10269,27 @@ exports[`Storyshots Addons|Info.React Docgen Comments from component declaration
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     style
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#666"
@@ -8635,7 +10298,7 @@ exports[`Storyshots Addons|Info.React Docgen Comments from component declaration
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
               </tbody>
@@ -8649,6 +10312,79 @@ exports[`Storyshots Addons|Info.React Docgen Comments from component declaration
 `;
 
 exports[`Storyshots Addons|Info.React Docgen Comments from named export component declaration 1`] = `
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-size: .88em;
+  font-family: Menlo,Monaco,"Courier New",monospace;
+  background-color: #fafafa;
+  padding: .5rem;
+  line-height: 1.5;
+  overflow-x: scroll;
+}
+
+.emotion-2 {
+  overflow: hidden;
+  border: 1px solid #eee;
+  border-radius: 3px;
+  background-color: #FFFFFF;
+  cursor: pointer;
+  font-size: 13px;
+  padding: 3px 10px;
+  -webkit-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.emotion-2:hover {
+  background-color: #f4f7fa;
+  border-color: #ddd;
+}
+
+.emotion-2:active {
+  background-color: #e9ecef;
+  border-color: #ccc;
+}
+
+.emotion-0 {
+  -webkit-transition: -webkit-transform .2s ease;
+  -webkit-transition: transform .2s ease;
+  transition: transform .2s ease;
+  height: 16px;
+  -webkit-transform: translateY(-100%) translateY(-6px);
+  -ms-transform: translateY(-100%) translateY(-6px);
+  transform: translateY(-100%) translateY(-6px);
+}
+
+.emotion-56 {
+  border-collapse: collapse;
+}
+
+.emotion-6 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+}
+
+.emotion-16 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+  white-space: nowrap;
+  font-family: Monaco,Consolas,"Courier New",monospace;
+}
+
 <div>
   <div
     style="position:relative;z-index:0"
@@ -8710,7 +10446,7 @@ exports[`Storyshots Addons|Info.React Docgen Comments from named export componen
             Story Source
           </h1>
           <pre
-            class="css-r8d96o eyvlbql0"
+            class="emotion-4 emotion-5"
           >
             <div>
               <div
@@ -8768,10 +10504,10 @@ exports[`Storyshots Addons|Info.React Docgen Comments from named export componen
               </div>
             </div>
             <button
-              class="css-1naocv3 eva467m0"
+              class="emotion-2 emotion-3"
             >
               <div
-                class="css-lvl6aa eva467m1"
+                class="emotion-0 emotion-1"
               >
                 <div
                   style="margin-bottom:6px"
@@ -8798,32 +10534,32 @@ exports[`Storyshots Addons|Info.React Docgen Comments from named export componen
               "NamedExportButton" Component
             </h2>
             <table
-              class="css-1uhv8nx e1vdo5380"
+              class="emotion-56 emotion-57"
             >
               <thead>
                 <tr>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     property
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     propType
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     required
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     default
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     description
                   </th>
@@ -8832,22 +10568,22 @@ exports[`Storyshots Addons|Info.React Docgen Comments from named export componen
               <tbody>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     disabled
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#a11"
@@ -8856,52 +10592,52 @@ exports[`Storyshots Addons|Info.React Docgen Comments from named export componen
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     label
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     yes
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     onClick
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#170"
@@ -8910,27 +10646,27 @@ exports[`Storyshots Addons|Info.React Docgen Comments from named export componen
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     style
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#666"
@@ -8939,7 +10675,7 @@ exports[`Storyshots Addons|Info.React Docgen Comments from named export componen
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
               </tbody>
@@ -8953,6 +10689,79 @@ exports[`Storyshots Addons|Info.React Docgen Comments from named export componen
 `;
 
 exports[`Storyshots Addons|Info.deprecated Displays Markdown in description 1`] = `
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-size: .88em;
+  font-family: Menlo,Monaco,"Courier New",monospace;
+  background-color: #fafafa;
+  padding: .5rem;
+  line-height: 1.5;
+  overflow-x: scroll;
+}
+
+.emotion-2 {
+  overflow: hidden;
+  border: 1px solid #eee;
+  border-radius: 3px;
+  background-color: #FFFFFF;
+  cursor: pointer;
+  font-size: 13px;
+  padding: 3px 10px;
+  -webkit-align-self: flex-start;
+  -ms-flex-item-align: start;
+  align-self: flex-start;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+}
+
+.emotion-2:hover {
+  background-color: #f4f7fa;
+  border-color: #ddd;
+}
+
+.emotion-2:active {
+  background-color: #e9ecef;
+  border-color: #ccc;
+}
+
+.emotion-0 {
+  -webkit-transition: -webkit-transform .2s ease;
+  -webkit-transition: transform .2s ease;
+  transition: transform .2s ease;
+  height: 16px;
+  -webkit-transform: translateY(-100%) translateY(-6px);
+  -ms-transform: translateY(-100%) translateY(-6px);
+  transform: translateY(-100%) translateY(-6px);
+}
+
+.emotion-56 {
+  border-collapse: collapse;
+}
+
+.emotion-6 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+}
+
+.emotion-16 {
+  padding: 2px 6px;
+  border: 1px solid #ccc;
+  white-space: nowrap;
+  font-family: Monaco,Consolas,"Courier New",monospace;
+}
+
 <div>
   <div
     style="position:relative;z-index:0"
@@ -9043,7 +10852,7 @@ exports[`Storyshots Addons|Info.deprecated Displays Markdown in description 1`]
             Story Source
           </h1>
           <pre
-            class="css-r8d96o eyvlbql0"
+            class="emotion-4 emotion-5"
           >
             <div>
               <div
@@ -9101,10 +10910,10 @@ exports[`Storyshots Addons|Info.deprecated Displays Markdown in description 1`]
               </div>
             </div>
             <button
-              class="css-1naocv3 eva467m0"
+              class="emotion-2 emotion-3"
             >
               <div
-                class="css-lvl6aa eva467m1"
+                class="emotion-0 emotion-1"
               >
                 <div
                   style="margin-bottom:6px"
@@ -9131,32 +10940,32 @@ exports[`Storyshots Addons|Info.deprecated Displays Markdown in description 1`]
               "BaseButton" Component
             </h2>
             <table
-              class="css-1uhv8nx e1vdo5380"
+              class="emotion-56 emotion-57"
             >
               <thead>
                 <tr>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     property
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     propType
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     required
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     default
                   </th>
                   <th
-                    class="css-11b5gui e6fp4ir1"
+                    class="emotion-6 emotion-7"
                   >
                     description
                   </th>
@@ -9165,22 +10974,22 @@ exports[`Storyshots Addons|Info.deprecated Displays Markdown in description 1`]
               <tbody>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     disabled
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#a11"
@@ -9189,52 +10998,52 @@ exports[`Storyshots Addons|Info.deprecated Displays Markdown in description 1`]
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     label
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     yes
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     onClick
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#170"
@@ -9243,27 +11052,27 @@ exports[`Storyshots Addons|Info.deprecated Displays Markdown in description 1`]
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
                 <tr>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     style
                   </td>
                   <td
-                    class="css-1qcb1f7 e6fp4ir0"
+                    class="emotion-16 emotion-17"
                   >
                     <span />
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     -
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   >
                     <span
                       style="color:#666"
@@ -9272,7 +11081,7 @@ exports[`Storyshots Addons|Info.deprecated Displays Markdown in description 1`]
                     </span>
                   </td>
                   <td
-                    class="css-11b5gui e6fp4ir0"
+                    class="emotion-6 emotion-17"
                   />
                 </tr>
               </tbody>
diff --git a/examples/official-storybook/stories/__snapshots__/addon-viewport.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-viewport.stories.storyshot
index 3108156e6b..0d3f9f15b4 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-viewport.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-viewport.stories.storyshot
@@ -2,7 +2,7 @@
 
 exports[`Storyshots Addons|Viewport default 1`] = `
 <div
-  class="css-0 ehw333c0"
+  class="emotion-0 emotion-1"
 >
   I don't have problems being rendered using the default viewport.
 </div>
@@ -10,7 +10,7 @@ exports[`Storyshots Addons|Viewport default 1`] = `
 
 exports[`Storyshots Addons|Viewport.Custom Default (Kindle Fire 2) Inherited 1`] = `
 <div
-  class="css-0 ehw333c0"
+  class="emotion-0 emotion-1"
 >
   I've inherited 
   <b>
@@ -22,7 +22,7 @@ exports[`Storyshots Addons|Viewport.Custom Default (Kindle Fire 2) Inherited 1`]
 
 exports[`Storyshots Addons|Viewport.Custom Default (Kindle Fire 2) Overridden via "withViewport" parameterized decorator 1`] = `
 <div
-  class="css-0 ehw333c0"
+  class="emotion-0 emotion-1"
 >
   I respect my parents but I should be looking good on 
   <b>
@@ -34,7 +34,7 @@ exports[`Storyshots Addons|Viewport.Custom Default (Kindle Fire 2) Overridden vi
 
 exports[`Storyshots Addons|Viewport.deprecated Overridden via "Viewport" component 1`] = `
 <div
-  class="css-0 ehw333c0"
+  class="emotion-0 emotion-1"
 >
   I respect my parents but I should be looking good on 
   <b>
@@ -46,7 +46,7 @@ exports[`Storyshots Addons|Viewport.deprecated Overridden via "Viewport" compone
 
 exports[`Storyshots Addons|Viewport.deprecated Overridden via "withViewport" decorator 1`] = `
 <div
-  class="css-0 ehw333c0"
+  class="emotion-0 emotion-1"
 >
   I respect my parents but I should be looking good on 
   <b>
@@ -57,11 +57,19 @@ exports[`Storyshots Addons|Viewport.deprecated Overridden via "withViewport" dec
 `;
 
 exports[`Storyshots Addons|Viewport.withViewport onViewportChange 1`] = `
+.emotion-2 {
+  padding: 20px;
+}
+
+.emotion-0 {
+  margin: 0;
+}
+
 <div
-  class="css-1ruxp1v e1igy6c50"
+  class="emotion-2 emotion-3"
 >
   <h1
-    class="css-1uk1gs8 e1igy6c51"
+    class="emotion-0 emotion-1"
   >
     Select device/viewport
   </h1>
diff --git a/examples/official-storybook/stories/__snapshots__/core.stories.storyshot b/examples/official-storybook/stories/__snapshots__/core.stories.storyshot
index b8bb41d14a..6990946a49 100644
--- a/examples/official-storybook/stories/__snapshots__/core.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/core.stories.storyshot
@@ -1,8 +1,36 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Core|Events Force re-render 1`] = `
+.emotion-0 {
+  padding: 0 10px;
+  color: #444;
+  background: rgba(0,0,0,0.05);
+  border-radius: 4px;
+  -webkit-transition: border-bottom-color .3s linear;
+  transition: border-bottom-color .3s linear;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  box-sizing: border-box;
+  position: relative;
+  display: inline;
+  text-align: left;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  min-height: 32px;
+  box-sizing: border-box;
+}
+
+.emotion-0:focus {
+  outline: 0 none;
+  border-bottom-color: #9fdaff;
+}
+
 <button
-  class="css-1riodoz e1lk8yn73"
+  class="emotion-0 emotion-1"
 >
   Clicked: 0
 </button>
diff --git a/examples/official-storybook/stories/addon-cssresources.stories.js b/examples/official-storybook/stories/addon-cssresources.stories.js
new file mode 100644
index 0000000000..ee08a69c0d
--- /dev/null
+++ b/examples/official-storybook/stories/addon-cssresources.stories.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withCssResources } from '@storybook/addon-cssresources';
+
+storiesOf('Addons|Cssresources', module)
+  .addDecorator(
+    withCssResources({
+      cssresources: [
+        {
+          name: `bootstrap v4.1.3`,
+          code: `<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"></link>`,
+          picked: true,
+        },
+        {
+          name: `bootstrap v3.3.5`,
+          code: `<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"></link>`,
+          picked: false,
+        },
+      ],
+    })
+  )
+  .add('Primary Large Button', () => (
+    <button type="button" className="btn btn-lg btn-primary">
+      Primary Large Button
+    </button>
+  ));
+
+storiesOf('Addons|Cssresources', module)
+  .addDecorator(
+    withCssResources({
+      cssresources: [
+        {
+          name: `fontawesome`,
+          code: `<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"></link>`,
+          picked: true,
+        },
+        {
+          name: `whitetheme`,
+          code: `<style>.fa { color: #fff }</style>`,
+          picked: true,
+        },
+      ],
+    })
+  )
+  .add('Camera Icon', () => <i className="fa fa-camera-retro"> Camera Icon</i>);
diff --git a/examples/official-storybook/tests/storyshots.test.js b/examples/official-storybook/tests/storyshots.test.js
index 256d81f7c0..75e575557c 100644
--- a/examples/official-storybook/tests/storyshots.test.js
+++ b/examples/official-storybook/tests/storyshots.test.js
@@ -1,4 +1,5 @@
 import path from 'path';
+import emotionSerializer from '@emotion/snapshot-serializer';
 import initStoryshots, { multiSnapshotWithOptions } from '@storybook/addon-storyshots';
 import { render as renderer } from 'enzyme';
 import { createSerializer } from 'enzyme-to-json';
@@ -11,5 +12,5 @@ initStoryshots({
   test: multiSnapshotWithOptions({
     renderer,
   }),
-  snapshotSerializers: [createSerializer()],
+  snapshotSerializers: [createSerializer(), emotionSerializer],
 });
diff --git a/examples/polymer-cli/package.json b/examples/polymer-cli/package.json
index 0e29cb57dd..4a0366f7bb 100644
--- a/examples/polymer-cli/package.json
+++ b/examples/polymer-cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "polymer-cli",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "private": true,
   "scripts": {
     "build-storybook": "build-storybook",
@@ -9,15 +9,15 @@
   },
   "dependencies": {
     "@polymer/polymer": "^2.6.0",
-    "@storybook/addon-actions": "4.1.0-alpha.3",
-    "@storybook/addon-backgrounds": "4.1.0-alpha.3",
-    "@storybook/addon-knobs": "4.1.0-alpha.3",
-    "@storybook/addon-links": "4.1.0-alpha.3",
-    "@storybook/addon-notes": "4.1.0-alpha.3",
-    "@storybook/addon-options": "4.1.0-alpha.3",
-    "@storybook/addon-storysource": "4.1.0-alpha.3",
-    "@storybook/addon-viewport": "4.1.0-alpha.3",
-    "@storybook/polymer": "4.1.0-alpha.3",
+    "@storybook/addon-actions": "4.1.0-alpha.8",
+    "@storybook/addon-backgrounds": "4.1.0-alpha.8",
+    "@storybook/addon-knobs": "4.1.0-alpha.8",
+    "@storybook/addon-links": "4.1.0-alpha.8",
+    "@storybook/addon-notes": "4.1.0-alpha.8",
+    "@storybook/addon-options": "4.1.0-alpha.8",
+    "@storybook/addon-storysource": "4.1.0-alpha.8",
+    "@storybook/addon-viewport": "4.1.0-alpha.8",
+    "@storybook/polymer": "4.1.0-alpha.8",
     "@webcomponents/webcomponentsjs": "^1.2.0",
     "global": "^4.3.2",
     "lit-html": "^0.12.0",
diff --git a/examples/riot-kitchen-sink/package.json b/examples/riot-kitchen-sink/package.json
index d052d64ef3..5577b7fdaf 100644
--- a/examples/riot-kitchen-sink/package.json
+++ b/examples/riot-kitchen-sink/package.json
@@ -1,6 +1,6 @@
 {
   "name": "riot-example",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "private": true,
   "scripts": {
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
@@ -15,18 +15,18 @@
   },
   "devDependencies": {
     "@babel/core": "^7.1.2",
-    "@storybook/addon-actions": "4.1.0-alpha.3",
-    "@storybook/addon-backgrounds": "4.1.0-alpha.3",
-    "@storybook/addon-centered": "4.1.0-alpha.3",
-    "@storybook/addon-knobs": "4.1.0-alpha.3",
-    "@storybook/addon-links": "4.1.0-alpha.3",
-    "@storybook/addon-notes": "4.1.0-alpha.3",
-    "@storybook/addon-options": "4.1.0-alpha.3",
-    "@storybook/addon-storyshots": "4.1.0-alpha.3",
-    "@storybook/addon-storysource": "4.1.0-alpha.3",
-    "@storybook/addon-viewport": "4.1.0-alpha.3",
-    "@storybook/addons": "4.1.0-alpha.3",
-    "@storybook/riot": "4.1.0-alpha.3",
+    "@storybook/addon-actions": "4.1.0-alpha.8",
+    "@storybook/addon-backgrounds": "4.1.0-alpha.8",
+    "@storybook/addon-centered": "4.1.0-alpha.8",
+    "@storybook/addon-knobs": "4.1.0-alpha.8",
+    "@storybook/addon-links": "4.1.0-alpha.8",
+    "@storybook/addon-notes": "4.1.0-alpha.8",
+    "@storybook/addon-options": "4.1.0-alpha.8",
+    "@storybook/addon-storyshots": "4.1.0-alpha.8",
+    "@storybook/addon-storysource": "4.1.0-alpha.8",
+    "@storybook/addon-viewport": "4.1.0-alpha.8",
+    "@storybook/addons": "4.1.0-alpha.8",
+    "@storybook/riot": "4.1.0-alpha.8",
     "babel-loader": "^8.0.4",
     "cross-env": "^5.2.0",
     "file-loader": "^2.0.0",
diff --git a/examples/svelte-kitchen-sink/package.json b/examples/svelte-kitchen-sink/package.json
index 0bf03f213d..e63dae7f1e 100644
--- a/examples/svelte-kitchen-sink/package.json
+++ b/examples/svelte-kitchen-sink/package.json
@@ -1,6 +1,6 @@
 {
   "name": "svelte-example",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "private": true,
   "scripts": {
     "build-storybook": "build-storybook -s public",
@@ -10,17 +10,17 @@
     "global": "^4.3.2"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "4.1.0-alpha.3",
-    "@storybook/addon-backgrounds": "4.1.0-alpha.3",
-    "@storybook/addon-centered": "4.1.0-alpha.3",
-    "@storybook/addon-knobs": "4.1.0-alpha.3",
-    "@storybook/addon-links": "4.1.0-alpha.3",
-    "@storybook/addon-notes": "4.1.0-alpha.3",
-    "@storybook/addon-options": "4.1.0-alpha.3",
-    "@storybook/addon-storyshots": "4.1.0-alpha.3",
-    "@storybook/addon-storysource": "4.1.0-alpha.3",
-    "@storybook/addon-viewport": "4.1.0-alpha.3",
-    "@storybook/addons": "4.1.0-alpha.3",
-    "@storybook/svelte": "4.1.0-alpha.3"
+    "@storybook/addon-actions": "4.1.0-alpha.8",
+    "@storybook/addon-backgrounds": "4.1.0-alpha.8",
+    "@storybook/addon-centered": "4.1.0-alpha.8",
+    "@storybook/addon-knobs": "4.1.0-alpha.8",
+    "@storybook/addon-links": "4.1.0-alpha.8",
+    "@storybook/addon-notes": "4.1.0-alpha.8",
+    "@storybook/addon-options": "4.1.0-alpha.8",
+    "@storybook/addon-storyshots": "4.1.0-alpha.8",
+    "@storybook/addon-storysource": "4.1.0-alpha.8",
+    "@storybook/addon-viewport": "4.1.0-alpha.8",
+    "@storybook/addons": "4.1.0-alpha.8",
+    "@storybook/svelte": "4.1.0-alpha.8"
   }
 }
diff --git a/examples/svelte-kitchen-sink/src/stories/__snapshots__/index.storyshot b/examples/svelte-kitchen-sink/src/stories/__snapshots__/index.storyshot
index eded58791e..cc251a6663 100644
--- a/examples/svelte-kitchen-sink/src/stories/__snapshots__/index.storyshot
+++ b/examples/svelte-kitchen-sink/src/stories/__snapshots__/index.storyshot
@@ -185,9 +185,7 @@ exports[`Storyshots Welcome Welcome 1`] = `
         href="https://storybook.js.org/basics/writing-stories"
         target="_blank"
       >
-        
-			      Writing Stories
-			    
+        Writing Stories
       </a>
       
 			    section in our documentation.
diff --git a/examples/svelte-kitchen-sink/src/stories/views/WelcomeView.svelte b/examples/svelte-kitchen-sink/src/stories/views/WelcomeView.svelte
index db37b7fbbe..d401629d8a 100644
--- a/examples/svelte-kitchen-sink/src/stories/views/WelcomeView.svelte
+++ b/examples/svelte-kitchen-sink/src/stories/views/WelcomeView.svelte
@@ -26,9 +26,7 @@
       class="link"
       href="https://storybook.js.org/basics/writing-stories"
       target="_blank"
-    >
-      Writing Stories
-    </a>
+    >Writing Stories</a>
     section in our documentation.
   </p>
   <p class="note">
diff --git a/examples/vue-kitchen-sink/package.json b/examples/vue-kitchen-sink/package.json
index fb782d96c7..19d2804e82 100644
--- a/examples/vue-kitchen-sink/package.json
+++ b/examples/vue-kitchen-sink/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-example",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "private": true,
   "scripts": {
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
@@ -14,18 +14,18 @@
   },
   "devDependencies": {
     "@babel/core": "^7.1.2",
-    "@storybook/addon-actions": "4.1.0-alpha.3",
-    "@storybook/addon-backgrounds": "4.1.0-alpha.3",
-    "@storybook/addon-centered": "4.1.0-alpha.3",
-    "@storybook/addon-knobs": "4.1.0-alpha.3",
-    "@storybook/addon-links": "4.1.0-alpha.3",
-    "@storybook/addon-notes": "4.1.0-alpha.3",
-    "@storybook/addon-options": "4.1.0-alpha.3",
-    "@storybook/addon-storyshots": "4.1.0-alpha.3",
-    "@storybook/addon-storysource": "4.1.0-alpha.3",
-    "@storybook/addon-viewport": "4.1.0-alpha.3",
-    "@storybook/addons": "4.1.0-alpha.3",
-    "@storybook/vue": "4.1.0-alpha.3",
+    "@storybook/addon-actions": "4.1.0-alpha.8",
+    "@storybook/addon-backgrounds": "4.1.0-alpha.8",
+    "@storybook/addon-centered": "4.1.0-alpha.8",
+    "@storybook/addon-knobs": "4.1.0-alpha.8",
+    "@storybook/addon-links": "4.1.0-alpha.8",
+    "@storybook/addon-notes": "4.1.0-alpha.8",
+    "@storybook/addon-options": "4.1.0-alpha.8",
+    "@storybook/addon-storyshots": "4.1.0-alpha.8",
+    "@storybook/addon-storysource": "4.1.0-alpha.8",
+    "@storybook/addon-viewport": "4.1.0-alpha.8",
+    "@storybook/addons": "4.1.0-alpha.8",
+    "@storybook/vue": "4.1.0-alpha.8",
     "babel-core": "^7.0.0-bridge.0",
     "babel-loader": "^8.0.4",
     "cross-env": "^5.2.0",
diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot
index 13bf0ff02a..e851776c1d 100644
--- a/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot
+++ b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot
@@ -40,7 +40,7 @@ exports[`Storyshots Addon|Knobs All knobs 1`] = `
 
 exports[`Storyshots Addon|Knobs Simple 1`] = `
 <div>
-  I am John Doe and I'm 44 years old.
+  I am John Doe and I'm 40 years old.
 </div>
 `;
 
diff --git a/examples/vue-kitchen-sink/src/stories/addon-knobs.stories.js b/examples/vue-kitchen-sink/src/stories/addon-knobs.stories.js
index cf8a0a7d74..60f6452659 100644
--- a/examples/vue-kitchen-sink/src/stories/addon-knobs.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/addon-knobs.stories.js
@@ -12,17 +12,31 @@ import {
   button,
 } from '@storybook/addon-knobs';
 
+const logger = console;
+
 storiesOf('Addon|Knobs', module)
   .addDecorator(withKnobs)
-  .add('Simple', () => {
-    const name = text('Name', 'John Doe');
-    const age = number('Age', 44);
-    const content = `I am ${name} and I'm ${age} years old.`;
+  .add('Simple', () => ({
+    props: {
+      name: {
+        type: String,
+        default: text('Name', 'John Doe'),
+      },
+    },
 
-    return {
-      template: `<div>${content}</div>`,
-    };
-  })
+    template: `<div @click="age++">I am {{ name }} and I'm {{ age }} years old.</div>`,
+
+    data() {
+      return { age: 40 };
+    },
+
+    created() {
+      logger.log('created');
+    },
+    destroyed() {
+      logger.log('destroyed');
+    },
+  }))
   .add('All knobs', () => {
     const name = text('Name', 'Jane');
     const stock = number('Stock', 20, {
diff --git a/lerna.json b/lerna.json
index 27eec998d9..d8022ada9a 100644
--- a/lerna.json
+++ b/lerna.json
@@ -10,5 +10,5 @@
   "npmClient": "yarn",
   "useWorkspaces": true,
   "registry": "https://registry.npmjs.org",
-  "version": "4.1.0-alpha.3"
+  "version": "4.1.0-alpha.8"
 }
diff --git a/lib/addons/package.json b/lib/addons/package.json
index 47af4d65d7..9385c90175 100644
--- a/lib/addons/package.json
+++ b/lib/addons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addons",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "description": "Storybook addons store",
   "keywords": [
     "storybook"
@@ -23,7 +23,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/channels": "4.1.0-alpha.3",
+    "@storybook/channels": "4.1.0-alpha.8",
     "global": "^4.3.2",
     "util-deprecate": "^1.0.2"
   }
diff --git a/lib/channel-postmessage/package.json b/lib/channel-postmessage/package.json
index 534d2961a9..f7ce41da19 100644
--- a/lib/channel-postmessage/package.json
+++ b/lib/channel-postmessage/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/channel-postmessage",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "description": "",
   "keywords": [
     "storybook"
@@ -23,7 +23,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/channels": "4.1.0-alpha.3",
+    "@storybook/channels": "4.1.0-alpha.8",
     "global": "^4.3.2",
     "telejson": "^1.0.0"
   }
diff --git a/lib/channel-websocket/package.json b/lib/channel-websocket/package.json
index bfbf98e8ed..024ddf4b73 100644
--- a/lib/channel-websocket/package.json
+++ b/lib/channel-websocket/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/channel-websocket",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "description": "",
   "keywords": [
     "storybook"
@@ -23,7 +23,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/channels": "4.1.0-alpha.3",
+    "@storybook/channels": "4.1.0-alpha.8",
     "global": "^4.3.2",
     "json-fn": "^1.1.1"
   }
diff --git a/lib/channels/package.json b/lib/channels/package.json
index 6ccb7bcb80..614cf7fbab 100644
--- a/lib/channels/package.json
+++ b/lib/channels/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/channels",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/lib/cli/package.json b/lib/cli/package.json
index de9e8c7a92..f2db16bcd0 100644
--- a/lib/cli/package.json
+++ b/lib/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/cli",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "description": "Storybook's CLI - easiest method of adding storybook to your projects",
   "keywords": [
     "cli",
@@ -34,7 +34,7 @@
     "@babel/preset-env": "^7.1.0",
     "@babel/register": "^7.0.0",
     "@babel/runtime": "^7.1.2",
-    "@storybook/codemod": "4.1.0-alpha.3",
+    "@storybook/codemod": "4.1.0-alpha.8",
     "chalk": "^2.4.1",
     "child-process-promise": "^2.2.1",
     "commander": "^2.19.0",
@@ -48,29 +48,29 @@
     "update-notifier": "^2.5.0"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "4.1.0-alpha.3",
-    "@storybook/addon-centered": "4.1.0-alpha.3",
-    "@storybook/addon-graphql": "4.1.0-alpha.3",
-    "@storybook/addon-info": "4.1.0-alpha.3",
-    "@storybook/addon-knobs": "4.1.0-alpha.3",
-    "@storybook/addon-links": "4.1.0-alpha.3",
-    "@storybook/addon-notes": "4.1.0-alpha.3",
-    "@storybook/addon-options": "4.1.0-alpha.3",
-    "@storybook/addon-storyshots": "4.1.0-alpha.3",
-    "@storybook/addons": "4.1.0-alpha.3",
-    "@storybook/angular": "4.1.0-alpha.3",
-    "@storybook/channel-postmessage": "4.1.0-alpha.3",
-    "@storybook/channel-websocket": "4.1.0-alpha.3",
-    "@storybook/channels": "4.1.0-alpha.3",
-    "@storybook/ember": "4.1.0-alpha.3",
-    "@storybook/html": "4.1.0-alpha.3",
-    "@storybook/marko": "4.1.0-alpha.3",
-    "@storybook/mithril": "4.1.0-alpha.3",
-    "@storybook/polymer": "4.1.0-alpha.3",
-    "@storybook/react": "4.1.0-alpha.3",
-    "@storybook/react-native": "4.1.0-alpha.3",
-    "@storybook/riot": "4.1.0-alpha.3",
-    "@storybook/ui": "4.1.0-alpha.3",
-    "@storybook/vue": "4.1.0-alpha.3"
+    "@storybook/addon-actions": "4.1.0-alpha.8",
+    "@storybook/addon-centered": "4.1.0-alpha.8",
+    "@storybook/addon-graphql": "4.1.0-alpha.8",
+    "@storybook/addon-info": "4.1.0-alpha.8",
+    "@storybook/addon-knobs": "4.1.0-alpha.8",
+    "@storybook/addon-links": "4.1.0-alpha.8",
+    "@storybook/addon-notes": "4.1.0-alpha.8",
+    "@storybook/addon-options": "4.1.0-alpha.8",
+    "@storybook/addon-storyshots": "4.1.0-alpha.8",
+    "@storybook/addons": "4.1.0-alpha.8",
+    "@storybook/angular": "4.1.0-alpha.8",
+    "@storybook/channel-postmessage": "4.1.0-alpha.8",
+    "@storybook/channel-websocket": "4.1.0-alpha.8",
+    "@storybook/channels": "4.1.0-alpha.8",
+    "@storybook/ember": "4.1.0-alpha.8",
+    "@storybook/html": "4.1.0-alpha.8",
+    "@storybook/marko": "4.1.0-alpha.8",
+    "@storybook/mithril": "4.1.0-alpha.8",
+    "@storybook/polymer": "4.1.0-alpha.8",
+    "@storybook/react": "4.1.0-alpha.8",
+    "@storybook/react-native": "4.1.0-alpha.8",
+    "@storybook/riot": "4.1.0-alpha.8",
+    "@storybook/ui": "4.1.0-alpha.8",
+    "@storybook/vue": "4.1.0-alpha.8"
   }
 }
diff --git a/lib/client-logger/package.json b/lib/client-logger/package.json
index 444b1dab1e..b6665735b9 100644
--- a/lib/client-logger/package.json
+++ b/lib/client-logger/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/client-logger",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/lib/codemod/package.json b/lib/codemod/package.json
index 03beffb1b8..c7d311dcaa 100644
--- a/lib/codemod/package.json
+++ b/lib/codemod/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/codemod",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "description": "A collection of codemod scripts written with JSCodeshift",
   "keywords": [
     "storybook"
diff --git a/lib/components/package.json b/lib/components/package.json
index 8723121132..1b166505d0 100644
--- a/lib/components/package.json
+++ b/lib/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/components",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "description": "Core Storybook Components",
   "keywords": [
     "storybook"
@@ -29,8 +29,8 @@
     "@emotion/provider": "^0.11.2",
     "@emotion/styled": "^0.10.6",
     "@reach/router": "^1.1.1",
-    "@storybook/core-events": "4.1.0-alpha.3",
-    "@storybook/addons": "4.1.0-alpha.3",
+    "@storybook/core-events": "4.1.0-alpha.8",
+    "@storybook/addons": "4.1.0-alpha.8",
     "global": "^4.3.2",
     "immer": "^1.5.0",
     "js-beautify": "^1.8.6",
diff --git a/lib/components/src/form/__snapshots__/form.stories.storyshot b/lib/components/src/form/__snapshots__/form.stories.storyshot
index 73aedad475..d62b60452d 100644
--- a/lib/components/src/form/__snapshots__/form.stories.storyshot
+++ b/lib/components/src/form/__snapshots__/form.stories.storyshot
@@ -2,18 +2,102 @@
 
 exports[`Storyshots Components|Form/Button alignment 1`] = `
 Array [
-  <button
-    class="css-1vmbacw e1lk8yn73"
+  .emotion-0 {
+  padding: 0 10px;
+  color: #444;
+  background: rgba(0,0,0,0.05);
+  border-radius: 4px;
+  -webkit-transition: border-bottom-color .3s linear;
+  transition: border-bottom-color .3s linear;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  box-sizing: border-box;
+  position: relative;
+  width: 100%;
+  text-align: right;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  min-height: 32px;
+  box-sizing: border-box;
+}
+
+.emotion-0:focus {
+  outline: 0 none;
+  border-bottom-color: #9fdaff;
+}
+
+<button
+    class="emotion-0 emotion-1"
   >
     click this button
   </button>,
-  <button
-    class="css-vb63mh e1lk8yn73"
+  .emotion-0 {
+  padding: 0 10px;
+  color: #444;
+  background: rgba(0,0,0,0.05);
+  border-radius: 4px;
+  -webkit-transition: border-bottom-color .3s linear;
+  transition: border-bottom-color .3s linear;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  box-sizing: border-box;
+  position: relative;
+  width: 100%;
+  text-align: center;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  min-height: 32px;
+  box-sizing: border-box;
+}
+
+.emotion-0:focus {
+  outline: 0 none;
+  border-bottom-color: #9fdaff;
+}
+
+<button
+    class="emotion-0 emotion-1"
   >
     click this button
   </button>,
-  <button
-    class="css-k5xbe4 e1lk8yn73"
+  .emotion-0 {
+  padding: 0 10px;
+  color: #444;
+  background: rgba(0,0,0,0.05);
+  border-radius: 4px;
+  -webkit-transition: border-bottom-color .3s linear;
+  transition: border-bottom-color .3s linear;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  box-sizing: border-box;
+  position: relative;
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  min-height: 32px;
+  box-sizing: border-box;
+}
+
+.emotion-0:focus {
+  outline: 0 none;
+  border-bottom-color: #9fdaff;
+}
+
+<button
+    class="emotion-0 emotion-1"
   >
     click this button
   </button>,
@@ -22,18 +106,104 @@ Array [
 
 exports[`Storyshots Components|Form/Button sizes 1`] = `
 Array [
-  <button
-    class="css-1riodoz e1lk8yn73"
+  .emotion-0 {
+  padding: 0 10px;
+  color: #444;
+  background: rgba(0,0,0,0.05);
+  border-radius: 4px;
+  -webkit-transition: border-bottom-color .3s linear;
+  transition: border-bottom-color .3s linear;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  box-sizing: border-box;
+  position: relative;
+  display: inline;
+  text-align: left;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  min-height: 32px;
+  box-sizing: border-box;
+}
+
+.emotion-0:focus {
+  outline: 0 none;
+  border-bottom-color: #9fdaff;
+}
+
+<button
+    class="emotion-0 emotion-1"
   >
     click this button
   </button>,
-  <button
-    class="css-17iy6hf e1lk8yn73"
+  .emotion-0 {
+  padding: 0 10px;
+  color: #444;
+  background: rgba(0,0,0,0.05);
+  border-radius: 4px;
+  -webkit-transition: border-bottom-color .3s linear;
+  transition: border-bottom-color .3s linear;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  box-sizing: border-box;
+  position: relative;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  text-align: left;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  min-height: 32px;
+  box-sizing: border-box;
+}
+
+.emotion-0:focus {
+  outline: 0 none;
+  border-bottom-color: #9fdaff;
+}
+
+<button
+    class="emotion-0 emotion-1"
   >
     click this button
   </button>,
-  <button
-    class="css-k5xbe4 e1lk8yn73"
+  .emotion-0 {
+  padding: 0 10px;
+  color: #444;
+  background: rgba(0,0,0,0.05);
+  border-radius: 4px;
+  -webkit-transition: border-bottom-color .3s linear;
+  transition: border-bottom-color .3s linear;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  box-sizing: border-box;
+  position: relative;
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  min-height: 32px;
+  box-sizing: border-box;
+}
+
+.emotion-0:focus {
+  outline: 0 none;
+  border-bottom-color: #9fdaff;
+}
+
+<button
+    class="emotion-0 emotion-1"
   >
     click this button
   </button>,
@@ -42,23 +212,138 @@ Array [
 
 exports[`Storyshots Components|Form/Button validations 1`] = `
 Array [
-  <button
-    class="css-1n7kxml e1lk8yn73"
+  .emotion-0 {
+  padding: 0 10px;
+  color: #444;
+  background: rgba(0,0,0,0.05);
+  border-radius: 4px;
+  -webkit-transition: border-bottom-color .3s linear;
+  transition: border-bottom-color .3s linear;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  box-sizing: border-box;
+  position: relative;
+  width: 100%;
+  text-align: left;
+  border-bottom-color: #d53535;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  min-height: 32px;
+  box-sizing: border-box;
+}
+
+.emotion-0:focus {
+  outline: 0 none;
+  border-bottom-color: #9fdaff;
+}
+
+<button
+    class="emotion-0 emotion-1"
   >
     click this button
   </button>,
-  <button
-    class="css-1dbq55u e1lk8yn73"
+  .emotion-0 {
+  padding: 0 10px;
+  color: #444;
+  background: rgba(0,0,0,0.05);
+  border-radius: 4px;
+  -webkit-transition: border-bottom-color .3s linear;
+  transition: border-bottom-color .3s linear;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  box-sizing: border-box;
+  position: relative;
+  width: 100%;
+  text-align: left;
+  border-bottom-color: orange;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  min-height: 32px;
+  box-sizing: border-box;
+}
+
+.emotion-0:focus {
+  outline: 0 none;
+  border-bottom-color: #9fdaff;
+}
+
+<button
+    class="emotion-0 emotion-1"
   >
     click this button
   </button>,
-  <button
-    class="css-1yfwphr e1lk8yn73"
+  .emotion-0 {
+  padding: 0 10px;
+  color: #444;
+  background: rgba(0,0,0,0.05);
+  border-radius: 4px;
+  -webkit-transition: border-bottom-color .3s linear;
+  transition: border-bottom-color .3s linear;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  box-sizing: border-box;
+  position: relative;
+  width: 100%;
+  text-align: left;
+  border-bottom-color: #09833a;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  min-height: 32px;
+  box-sizing: border-box;
+}
+
+.emotion-0:focus {
+  outline: 0 none;
+  border-bottom-color: #9fdaff;
+}
+
+<button
+    class="emotion-0 emotion-1"
   >
     click this button
   </button>,
-  <button
-    class="css-k5xbe4 e1lk8yn73"
+  .emotion-0 {
+  padding: 0 10px;
+  color: #444;
+  background: rgba(0,0,0,0.05);
+  border-radius: 4px;
+  -webkit-transition: border-bottom-color .3s linear;
+  transition: border-bottom-color .3s linear;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  box-sizing: border-box;
+  position: relative;
+  width: 100%;
+  text-align: left;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  min-height: 32px;
+  box-sizing: border-box;
+}
+
+.emotion-0:focus {
+  outline: 0 none;
+  border-bottom-color: #9fdaff;
+}
+
+<button
+    class="emotion-0 emotion-1"
   >
     click this button
   </button>,
@@ -66,8 +351,36 @@ Array [
 `;
 
 exports[`Storyshots Components|Form/Button with knobs 1`] = `
+.emotion-0 {
+  padding: 0 10px;
+  color: #444;
+  background: rgba(0,0,0,0.05);
+  border-radius: 4px;
+  -webkit-transition: border-bottom-color .3s linear;
+  transition: border-bottom-color .3s linear;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  box-sizing: border-box;
+  position: relative;
+  display: inline;
+  text-align: left;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  min-height: 32px;
+  box-sizing: border-box;
+}
+
+.emotion-0:focus {
+  outline: 0 none;
+  border-bottom-color: #9fdaff;
+}
+
 <button
-  class="css-1riodoz e1lk8yn73"
+  class="emotion-0 emotion-1"
 >
   💌  love letter to storybook team
 </button>
@@ -75,8 +388,35 @@ exports[`Storyshots Components|Form/Button with knobs 1`] = `
 
 exports[`Storyshots Components|Form/Select sizes 1`] = `
 Array [
-  <select
-    class="css-1rk2lkr e1lk8yn71"
+  .emotion-0 {
+  padding: 0 10px;
+  color: #444;
+  background: rgba(0,0,0,0.05);
+  border-radius: 4px;
+  -webkit-transition: border-bottom-color .3s linear;
+  transition: border-bottom-color .3s linear;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  box-sizing: border-box;
+  position: relative;
+  display: inline;
+  text-align: left;
+  height: 32px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  padding-right: 20px;
+}
+
+.emotion-0:focus {
+  outline: 0 none;
+  border-bottom-color: #9fdaff;
+}
+
+<select
+    class="emotion-0 emotion-1"
   >
     <option
       value="val1"
@@ -95,8 +435,37 @@ Array [
       Value 3
     </option>
   </select>,
-  <select
-    class="css-p3s1kf e1lk8yn71"
+  .emotion-0 {
+  padding: 0 10px;
+  color: #444;
+  background: rgba(0,0,0,0.05);
+  border-radius: 4px;
+  -webkit-transition: border-bottom-color .3s linear;
+  transition: border-bottom-color .3s linear;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  box-sizing: border-box;
+  position: relative;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  text-align: left;
+  height: 32px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  padding-right: 20px;
+}
+
+.emotion-0:focus {
+  outline: 0 none;
+  border-bottom-color: #9fdaff;
+}
+
+<select
+    class="emotion-0 emotion-1"
   >
     <option
       value="val1"
@@ -115,8 +484,35 @@ Array [
       Value 3
     </option>
   </select>,
-  <select
-    class="css-13k1zov e1lk8yn71"
+  .emotion-0 {
+  padding: 0 10px;
+  color: #444;
+  background: rgba(0,0,0,0.05);
+  border-radius: 4px;
+  -webkit-transition: border-bottom-color .3s linear;
+  transition: border-bottom-color .3s linear;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  box-sizing: border-box;
+  position: relative;
+  width: 100%;
+  text-align: left;
+  height: 32px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  padding-right: 20px;
+}
+
+.emotion-0:focus {
+  outline: 0 none;
+  border-bottom-color: #9fdaff;
+}
+
+<select
+    class="emotion-0 emotion-1"
   >
     <option
       value="val1"
@@ -140,8 +536,36 @@ Array [
 
 exports[`Storyshots Components|Form/Select validations 1`] = `
 Array [
-  <select
-    class="css-1pvc7qr e1lk8yn71"
+  .emotion-0 {
+  padding: 0 10px;
+  color: #444;
+  background: rgba(0,0,0,0.05);
+  border-radius: 4px;
+  -webkit-transition: border-bottom-color .3s linear;
+  transition: border-bottom-color .3s linear;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  box-sizing: border-box;
+  position: relative;
+  width: 100%;
+  text-align: left;
+  border-bottom-color: #d53535;
+  height: 32px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  padding-right: 20px;
+}
+
+.emotion-0:focus {
+  outline: 0 none;
+  border-bottom-color: #9fdaff;
+}
+
+<select
+    class="emotion-0 emotion-1"
   >
     <option
       value="val1"
@@ -160,8 +584,36 @@ Array [
       Value 3
     </option>
   </select>,
-  <select
-    class="css-kdddv2 e1lk8yn71"
+  .emotion-0 {
+  padding: 0 10px;
+  color: #444;
+  background: rgba(0,0,0,0.05);
+  border-radius: 4px;
+  -webkit-transition: border-bottom-color .3s linear;
+  transition: border-bottom-color .3s linear;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  box-sizing: border-box;
+  position: relative;
+  width: 100%;
+  text-align: left;
+  border-bottom-color: orange;
+  height: 32px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  padding-right: 20px;
+}
+
+.emotion-0:focus {
+  outline: 0 none;
+  border-bottom-color: #9fdaff;
+}
+
+<select
+    class="emotion-0 emotion-1"
   >
     <option
       value="val1"
@@ -180,8 +632,36 @@ Array [
       Value 3
     </option>
   </select>,
-  <select
-    class="css-1hyanqr e1lk8yn71"
+  .emotion-0 {
+  padding: 0 10px;
+  color: #444;
+  background: rgba(0,0,0,0.05);
+  border-radius: 4px;
+  -webkit-transition: border-bottom-color .3s linear;
+  transition: border-bottom-color .3s linear;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  box-sizing: border-box;
+  position: relative;
+  width: 100%;
+  text-align: left;
+  border-bottom-color: #09833a;
+  height: 32px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  padding-right: 20px;
+}
+
+.emotion-0:focus {
+  outline: 0 none;
+  border-bottom-color: #9fdaff;
+}
+
+<select
+    class="emotion-0 emotion-1"
   >
     <option
       value="val1"
@@ -200,8 +680,35 @@ Array [
       Value 3
     </option>
   </select>,
-  <select
-    class="css-13k1zov e1lk8yn71"
+  .emotion-0 {
+  padding: 0 10px;
+  color: #444;
+  background: rgba(0,0,0,0.05);
+  border-radius: 4px;
+  -webkit-transition: border-bottom-color .3s linear;
+  transition: border-bottom-color .3s linear;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  box-sizing: border-box;
+  position: relative;
+  width: 100%;
+  text-align: left;
+  height: 32px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  padding-right: 20px;
+}
+
+.emotion-0:focus {
+  outline: 0 none;
+  border-bottom-color: #9fdaff;
+}
+
+<select
+    class="emotion-0 emotion-1"
   >
     <option
       value="val1"
@@ -225,23 +732,98 @@ Array [
 
 exports[`Storyshots Components|Form/Textarea alignment 1`] = `
 Array [
-  <textarea
+  .emotion-0 {
+  padding: 0 10px;
+  color: #444;
+  background: rgba(0,0,0,0.05);
+  border-radius: 4px;
+  -webkit-transition: border-bottom-color .3s linear;
+  transition: border-bottom-color .3s linear;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  box-sizing: border-box;
+  position: relative;
+  width: 100%;
+  text-align: right;
+  min-height: 32px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  overflow: visible;
+}
+
+.emotion-0:focus {
+  outline: 0 none;
+  border-bottom-color: #9fdaff;
+}
+
+<textarea
     align="end"
-    class="css-ikfdgv e1lk8yn72"
+    class="emotion-0 emotion-1"
     style="height:0"
   >
     text
   </textarea>,
-  <textarea
+  .emotion-0 {
+  padding: 0 10px;
+  color: #444;
+  background: rgba(0,0,0,0.05);
+  border-radius: 4px;
+  -webkit-transition: border-bottom-color .3s linear;
+  transition: border-bottom-color .3s linear;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  box-sizing: border-box;
+  position: relative;
+  width: 100%;
+  text-align: center;
+  min-height: 32px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  overflow: visible;
+}
+
+.emotion-0:focus {
+  outline: 0 none;
+  border-bottom-color: #9fdaff;
+}
+
+<textarea
     align="center"
-    class="css-7knv9k e1lk8yn72"
+    class="emotion-0 emotion-1"
     style="height:0"
   >
     text
   </textarea>,
-  <textarea
+  .emotion-0 {
+  padding: 0 10px;
+  color: #444;
+  background: rgba(0,0,0,0.05);
+  border-radius: 4px;
+  -webkit-transition: border-bottom-color .3s linear;
+  transition: border-bottom-color .3s linear;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  box-sizing: border-box;
+  position: relative;
+  width: 100%;
+  text-align: left;
+  min-height: 32px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  overflow: visible;
+}
+
+.emotion-0:focus {
+  outline: 0 none;
+  border-bottom-color: #9fdaff;
+}
+
+<textarea
     align="start"
-    class="css-33eu3a e1lk8yn72"
+    class="emotion-0 emotion-1"
     style="height:0"
   >
     text
@@ -251,20 +833,97 @@ Array [
 
 exports[`Storyshots Components|Form/Textarea sizes 1`] = `
 Array [
-  <textarea
-    class="css-1qzrepe e1lk8yn72"
+  .emotion-0 {
+  padding: 0 10px;
+  color: #444;
+  background: rgba(0,0,0,0.05);
+  border-radius: 4px;
+  -webkit-transition: border-bottom-color .3s linear;
+  transition: border-bottom-color .3s linear;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  box-sizing: border-box;
+  position: relative;
+  display: inline;
+  text-align: left;
+  min-height: 32px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  overflow: visible;
+}
+
+.emotion-0:focus {
+  outline: 0 none;
+  border-bottom-color: #9fdaff;
+}
+
+<textarea
+    class="emotion-0 emotion-1"
     style="height:0"
   >
     text
   </textarea>,
-  <textarea
-    class="css-1lgydmp e1lk8yn72"
+  .emotion-0 {
+  padding: 0 10px;
+  color: #444;
+  background: rgba(0,0,0,0.05);
+  border-radius: 4px;
+  -webkit-transition: border-bottom-color .3s linear;
+  transition: border-bottom-color .3s linear;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  box-sizing: border-box;
+  position: relative;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  text-align: left;
+  min-height: 32px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  overflow: visible;
+}
+
+.emotion-0:focus {
+  outline: 0 none;
+  border-bottom-color: #9fdaff;
+}
+
+<textarea
+    class="emotion-0 emotion-1"
     style="height:0"
   >
     text
   </textarea>,
-  <textarea
-    class="css-33eu3a e1lk8yn72"
+  .emotion-0 {
+  padding: 0 10px;
+  color: #444;
+  background: rgba(0,0,0,0.05);
+  border-radius: 4px;
+  -webkit-transition: border-bottom-color .3s linear;
+  transition: border-bottom-color .3s linear;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  box-sizing: border-box;
+  position: relative;
+  width: 100%;
+  text-align: left;
+  min-height: 32px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  overflow: visible;
+}
+
+.emotion-0:focus {
+  outline: 0 none;
+  border-bottom-color: #9fdaff;
+}
+
+<textarea
+    class="emotion-0 emotion-1"
     style="height:0"
   >
     text
@@ -274,29 +933,132 @@ Array [
 
 exports[`Storyshots Components|Form/Textarea validations 1`] = `
 Array [
-  <textarea
-    class="css-sfd7lm e1lk8yn72"
+  .emotion-0 {
+  padding: 0 10px;
+  color: #444;
+  background: rgba(0,0,0,0.05);
+  border-radius: 4px;
+  -webkit-transition: border-bottom-color .3s linear;
+  transition: border-bottom-color .3s linear;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  box-sizing: border-box;
+  position: relative;
+  width: 100%;
+  text-align: left;
+  border-bottom-color: #d53535;
+  min-height: 32px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  overflow: visible;
+}
+
+.emotion-0:focus {
+  outline: 0 none;
+  border-bottom-color: #9fdaff;
+}
+
+<textarea
+    class="emotion-0 emotion-1"
     style="height:0"
     valid="error"
   >
     text
   </textarea>,
-  <textarea
-    class="css-j4g7hp e1lk8yn72"
+  .emotion-0 {
+  padding: 0 10px;
+  color: #444;
+  background: rgba(0,0,0,0.05);
+  border-radius: 4px;
+  -webkit-transition: border-bottom-color .3s linear;
+  transition: border-bottom-color .3s linear;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  box-sizing: border-box;
+  position: relative;
+  width: 100%;
+  text-align: left;
+  border-bottom-color: orange;
+  min-height: 32px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  overflow: visible;
+}
+
+.emotion-0:focus {
+  outline: 0 none;
+  border-bottom-color: #9fdaff;
+}
+
+<textarea
+    class="emotion-0 emotion-1"
     style="height:0"
     valid="warn"
   >
     text
   </textarea>,
-  <textarea
-    class="css-1rb826s e1lk8yn72"
+  .emotion-0 {
+  padding: 0 10px;
+  color: #444;
+  background: rgba(0,0,0,0.05);
+  border-radius: 4px;
+  -webkit-transition: border-bottom-color .3s linear;
+  transition: border-bottom-color .3s linear;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  box-sizing: border-box;
+  position: relative;
+  width: 100%;
+  text-align: left;
+  border-bottom-color: #09833a;
+  min-height: 32px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  overflow: visible;
+}
+
+.emotion-0:focus {
+  outline: 0 none;
+  border-bottom-color: #9fdaff;
+}
+
+<textarea
+    class="emotion-0 emotion-1"
     style="height:0"
     valid="valid"
   >
     text
   </textarea>,
-  <textarea
-    class="css-33eu3a e1lk8yn72"
+  .emotion-0 {
+  padding: 0 10px;
+  color: #444;
+  background: rgba(0,0,0,0.05);
+  border-radius: 4px;
+  -webkit-transition: border-bottom-color .3s linear;
+  transition: border-bottom-color .3s linear;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  box-sizing: border-box;
+  position: relative;
+  width: 100%;
+  text-align: left;
+  min-height: 32px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  overflow: visible;
+}
+
+.emotion-0:focus {
+  outline: 0 none;
+  border-bottom-color: #9fdaff;
+}
+
+<textarea
+    class="emotion-0 emotion-1"
     style="height:0"
   >
     text
@@ -305,8 +1067,33 @@ Array [
 `;
 
 exports[`Storyshots Components|Form/Textarea with knobs (controlled) 1`] = `
+.emotion-0 {
+  padding: 0 10px;
+  color: #444;
+  background: rgba(0,0,0,0.05);
+  border-radius: 4px;
+  -webkit-transition: border-bottom-color .3s linear;
+  transition: border-bottom-color .3s linear;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  box-sizing: border-box;
+  position: relative;
+  width: 100%;
+  text-align: left;
+  min-height: 32px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  overflow: visible;
+}
+
+.emotion-0:focus {
+  outline: 0 none;
+  border-bottom-color: #9fdaff;
+}
+
 <textarea
-  class="css-33eu3a e1lk8yn72"
+  class="emotion-0 emotion-1"
   style="height:0"
 >
   OMG, multiple lines!
diff --git a/lib/components/src/navigation/__snapshots__/MenuLink.stories.storyshot b/lib/components/src/navigation/__snapshots__/MenuLink.stories.storyshot
index a117997ea8..212b95a874 100644
--- a/lib/components/src/navigation/__snapshots__/MenuLink.stories.storyshot
+++ b/lib/components/src/navigation/__snapshots__/MenuLink.stories.storyshot
@@ -1,8 +1,25 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Components|Navigation/MenuLink active 1`] = `
+.emotion-0 {
+  display: block;
+  color: rgba(0,0,0,0.4);
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font-size: 13px;
+  line-height: 16px;
+  padding: 1px 5px 4px;
+  margin-left: 5px;
+  position: relative;
+  z-index: 1;
+  color: inherit;
+  font-weight: bold;
+  background-color: rgba(0,0,0,0.07);
+  z-index: 0;
+}
+
 <a
-  class="css-oato19 e1s7lmdh0"
+  class="emotion-0 emotion-1"
   href="http://google.com"
 >
   Link
@@ -10,8 +27,21 @@ exports[`Storyshots Components|Navigation/MenuLink active 1`] = `
 `;
 
 exports[`Storyshots Components|Navigation/MenuLink default 1`] = `
+.emotion-0 {
+  display: block;
+  color: rgba(0,0,0,0.4);
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font-size: 13px;
+  line-height: 16px;
+  padding: 1px 5px 4px;
+  margin-left: 5px;
+  position: relative;
+  z-index: 1;
+}
+
 <a
-  class="css-1jhmhe9 e1s7lmdh0"
+  class="emotion-0 emotion-1"
   href="http://google.com"
 >
   Link
@@ -19,11 +49,28 @@ exports[`Storyshots Components|Navigation/MenuLink default 1`] = `
 `;
 
 exports[`Storyshots Components|Navigation/MenuLink with knobs 1`] = `
+.emotion-0 {
+  display: block;
+  color: rgba(0,0,0,0.4);
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font-size: 13px;
+  line-height: 16px;
+  padding: 1px 5px 4px;
+  margin-left: 5px;
+  position: relative;
+  z-index: 1;
+  color: inherit;
+  font-weight: bold;
+  background-color: rgba(0,0,0,0.07);
+  z-index: 0;
+}
+
 <div
   style="width:90px"
 >
   <a
-    class="css-oato19 e1s7lmdh0"
+    class="emotion-0 emotion-1"
     href="/"
   >
     Menu link item
diff --git a/lib/components/src/panel_actionbar/__snapshots__/panel_actionbar.stories.storyshot b/lib/components/src/panel_actionbar/__snapshots__/panel_actionbar.stories.storyshot
index 6b139ce16a..8cb52ce36c 100644
--- a/lib/components/src/panel_actionbar/__snapshots__/panel_actionbar.stories.storyshot
+++ b/lib/components/src/panel_actionbar/__snapshots__/panel_actionbar.stories.storyshot
@@ -1,32 +1,107 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Components|PanelActionBar 3 items 1`] = `
+.emotion-12 {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  max-width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  border-top: 1px solid rgba(0,0,0,0.1);
+  border-left: 1px solid rgba(0,0,0,0.1);
+  background: rgba(255,255,255,1);
+  border-radius: 4px 0 0 0;
+}
+
+.emotion-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  list-style: none;
+  padding: 0;
+  height: 26px;
+  font-size: 11px;
+  -webkit-letter-spacing: 1px;
+  -moz-letter-spacing: 1px;
+  -ms-letter-spacing: 1px;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  border-left: 0 none;
+}
+
+.emotion-0 {
+  border: 0 none;
+  display: block;
+  background: none;
+  padding: 0 10px;
+  text-transform: inherit;
+  -webkit-letter-spacing: inherit;
+  -moz-letter-spacing: inherit;
+  -ms-letter-spacing: inherit;
+  letter-spacing: inherit;
+  font-size: inherit;
+  color: inherit;
+  border-top: 2px solid transparent;
+  border-bottom: 2px solid transparent;
+}
+
+.emotion-0:focus {
+  border-bottom: 2px solid #9fdaff;
+  outline: 0 none;
+}
+
+.emotion-6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  list-style: none;
+  padding: 0;
+  height: 26px;
+  font-size: 11px;
+  -webkit-letter-spacing: 1px;
+  -moz-letter-spacing: 1px;
+  -ms-letter-spacing: 1px;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  border-left: 1px solid rgba(0,0,0,0.1);
+}
+
 <ul
-  class="css-1bx3lfx egs2kzf0"
+  class="emotion-12 emotion-13"
 >
   <li
-    class="css-wo86af egs2kzf2"
+    class="emotion-2 emotion-3"
   >
     <button
-      class="css-hu94vo egs2kzf1"
+      class="emotion-0 emotion-1"
     >
       Nr1
     </button>
   </li>
   <li
-    class="css-11rvrtb egs2kzf2"
+    class="emotion-6 emotion-3"
   >
     <button
-      class="css-hu94vo egs2kzf1"
+      class="emotion-0 emotion-1"
     >
       Nr2
     </button>
   </li>
   <li
-    class="css-11rvrtb egs2kzf2"
+    class="emotion-6 emotion-3"
   >
     <button
-      class="css-hu94vo egs2kzf1"
+      class="emotion-0 emotion-1"
     >
       Nr3
     </button>
@@ -35,14 +110,71 @@ exports[`Storyshots Components|PanelActionBar 3 items 1`] = `
 `;
 
 exports[`Storyshots Components|PanelActionBar single item 1`] = `
+.emotion-4 {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  max-width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  border-top: 1px solid rgba(0,0,0,0.1);
+  border-left: 1px solid rgba(0,0,0,0.1);
+  background: rgba(255,255,255,1);
+  border-radius: 4px 0 0 0;
+}
+
+.emotion-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  list-style: none;
+  padding: 0;
+  height: 26px;
+  font-size: 11px;
+  -webkit-letter-spacing: 1px;
+  -moz-letter-spacing: 1px;
+  -ms-letter-spacing: 1px;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  border-left: 0 none;
+}
+
+.emotion-0 {
+  border: 0 none;
+  display: block;
+  background: none;
+  padding: 0 10px;
+  text-transform: inherit;
+  -webkit-letter-spacing: inherit;
+  -moz-letter-spacing: inherit;
+  -ms-letter-spacing: inherit;
+  letter-spacing: inherit;
+  font-size: inherit;
+  color: inherit;
+  border-top: 2px solid transparent;
+  border-bottom: 2px solid transparent;
+}
+
+.emotion-0:focus {
+  border-bottom: 2px solid #9fdaff;
+  outline: 0 none;
+}
+
 <ul
-  class="css-1bx3lfx egs2kzf0"
+  class="emotion-4 emotion-5"
 >
   <li
-    class="css-wo86af egs2kzf2"
+    class="emotion-2 emotion-3"
   >
     <button
-      class="css-hu94vo egs2kzf1"
+      class="emotion-0 emotion-1"
     >
       CLEAR
     </button>
diff --git a/lib/components/src/tabs/__snapshots__/tabs.stories.storyshot b/lib/components/src/tabs/__snapshots__/tabs.stories.storyshot
index 23b87559ad..0575a8031e 100644
--- a/lib/components/src/tabs/__snapshots__/tabs.stories.storyshot
+++ b/lib/components/src/tabs/__snapshots__/tabs.stories.storyshot
@@ -1,53 +1,173 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots Components|Tabs stateful - dynamic 1`] = `
+.emotion-12 {
+  background: rgba(255,255,255,1);
+  border-bottom: 1px solid rgba(0,0,0,0.1);
+  overflow: auto;
+  padding: 0 8px;
+  white-space: nowrap;
+  height: 40px;
+}
+
+.emotion-0 {
+  white-space: normal;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  overflow: hidden;
+  vertical-align: top;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+  font-size: 11px;
+  -webkit-letter-spacing: 1px;
+  -moz-letter-spacing: 1px;
+  -ms-letter-spacing: 1px;
+  letter-spacing: 1px;
+  padding: 0 8px;
+  text-transform: uppercase;
+  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  height: 40px;
+  line-height: 12px;
+  box-sizing: border-box;
+  cursor: pointer;
+  background: transparent;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  color: rgba(0,0,0,0.4);
+  border-bottom-color: transparent;
+}
+
+.emotion-0:empty {
+  display: none;
+}
+
+.emotion-0:focus {
+  outline: 0 none;
+  border-bottom-color: #9fdaff;
+}
+
+.emotion-4 {
+  white-space: normal;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  overflow: hidden;
+  vertical-align: top;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+  font-size: 11px;
+  -webkit-letter-spacing: 1px;
+  -moz-letter-spacing: 1px;
+  -ms-letter-spacing: 1px;
+  letter-spacing: 1px;
+  padding: 0 8px;
+  text-transform: uppercase;
+  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  height: 40px;
+  line-height: 12px;
+  box-sizing: border-box;
+  cursor: pointer;
+  background: transparent;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  color: #444;
+  border-bottom-color: rgba(0,0,0,0.1);
+}
+
+.emotion-4:empty {
+  display: none;
+}
+
+.emotion-4:focus {
+  outline: 0 none;
+  border-bottom-color: #9fdaff;
+}
+
+.emotion-14 {
+  display: none;
+}
+
+.emotion-18 {
+  overflow: hidden;
+  background: rgba(255,255,255,0.89);
+  border-radius: 4px;
+  border: 1px solid rgba(0,0,0,0.1);
+  display: block;
+}
+
+.emotion-16 {
+  display: block;
+  position: relative;
+}
+
 <div
   style="height:calc(100vh - 20px)"
 >
   <div
-    class="css-8a9ncn e1lzzkxx0"
+    class="emotion-18 emotion-19"
   >
     <div
-      class="css-1whcqvw e1lzzkxx1"
+      class="emotion-12 emotion-13"
       role="tablist"
     >
       <button
-        class="css-xcko46 e1lzzkxx2"
+        class="emotion-0 emotion-1"
         role="tab"
         type="button"
       >
         Tab title #1
       </button>
       <button
-        class="css-xcko46 e1lzzkxx2"
+        class="emotion-0 emotion-1"
         role="tab"
         type="button"
       >
         Tab title #2
       </button>
       <button
-        class="css-1hf831j e1lzzkxx2"
+        class="emotion-4 emotion-1"
         role="tab"
         type="button"
       >
         Tab with scroll
       </button>
       <button
-        class="css-xcko46 e1lzzkxx2"
+        class="emotion-0 emotion-1"
         role="tab"
         type="button"
       >
         Tab title #4
       </button>
       <button
-        class="css-xcko46 e1lzzkxx2"
+        class="emotion-0 emotion-1"
         role="tab"
         type="button"
       >
         Tab title #5
       </button>
       <button
-        class="css-xcko46 e1lzzkxx2"
+        class="emotion-0 emotion-1"
         role="tab"
         type="button"
       >
@@ -55,7 +175,7 @@ exports[`Storyshots Components|Tabs stateful - dynamic 1`] = `
       </button>
     </div>
     <div
-      class="css-1bx5ylf e1lzzkxx3"
+      class="emotion-16 emotion-17"
     >
       <div
         id="test2"
@@ -113,7 +233,7 @@ exports[`Storyshots Components|Tabs stateful - dynamic 1`] = `
         />
       </div>
       <div
-        class="css-1hyfx7x e1lzzkxx4"
+        class="emotion-14 emotion-15"
       >
         <div>
           CONTENT 6
@@ -125,53 +245,173 @@ exports[`Storyshots Components|Tabs stateful - dynamic 1`] = `
 `;
 
 exports[`Storyshots Components|Tabs stateful - no initial 1`] = `
+.emotion-12 {
+  background: rgba(255,255,255,1);
+  border-bottom: 1px solid rgba(0,0,0,0.1);
+  overflow: auto;
+  padding: 0 8px;
+  white-space: nowrap;
+  height: 40px;
+}
+
+.emotion-2 {
+  white-space: normal;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  overflow: hidden;
+  vertical-align: top;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+  font-size: 11px;
+  -webkit-letter-spacing: 1px;
+  -moz-letter-spacing: 1px;
+  -ms-letter-spacing: 1px;
+  letter-spacing: 1px;
+  padding: 0 8px;
+  text-transform: uppercase;
+  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  height: 40px;
+  line-height: 12px;
+  box-sizing: border-box;
+  cursor: pointer;
+  background: transparent;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  color: rgba(0,0,0,0.4);
+  border-bottom-color: transparent;
+}
+
+.emotion-2:empty {
+  display: none;
+}
+
+.emotion-2:focus {
+  outline: 0 none;
+  border-bottom-color: #9fdaff;
+}
+
+.emotion-0 {
+  white-space: normal;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  overflow: hidden;
+  vertical-align: top;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+  font-size: 11px;
+  -webkit-letter-spacing: 1px;
+  -moz-letter-spacing: 1px;
+  -ms-letter-spacing: 1px;
+  letter-spacing: 1px;
+  padding: 0 8px;
+  text-transform: uppercase;
+  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  height: 40px;
+  line-height: 12px;
+  box-sizing: border-box;
+  cursor: pointer;
+  background: transparent;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  color: #444;
+  border-bottom-color: rgba(0,0,0,0.1);
+}
+
+.emotion-0:empty {
+  display: none;
+}
+
+.emotion-0:focus {
+  outline: 0 none;
+  border-bottom-color: #9fdaff;
+}
+
+.emotion-14 {
+  display: none;
+}
+
+.emotion-18 {
+  overflow: hidden;
+  background: rgba(255,255,255,0.89);
+  border-radius: 4px;
+  border: 1px solid rgba(0,0,0,0.1);
+  display: block;
+}
+
+.emotion-16 {
+  display: block;
+  position: relative;
+}
+
 <div
   style="height:calc(100vh - 20px)"
 >
   <div
-    class="css-8a9ncn e1lzzkxx0"
+    class="emotion-18 emotion-19"
   >
     <div
-      class="css-1whcqvw e1lzzkxx1"
+      class="emotion-12 emotion-13"
       role="tablist"
     >
       <button
-        class="css-1hf831j e1lzzkxx2"
+        class="emotion-0 emotion-1"
         role="tab"
         type="button"
       >
         Tab title #1
       </button>
       <button
-        class="css-xcko46 e1lzzkxx2"
+        class="emotion-2 emotion-1"
         role="tab"
         type="button"
       >
         Tab title #2
       </button>
       <button
-        class="css-xcko46 e1lzzkxx2"
+        class="emotion-2 emotion-1"
         role="tab"
         type="button"
       >
         Tab with scroll
       </button>
       <button
-        class="css-xcko46 e1lzzkxx2"
+        class="emotion-2 emotion-1"
         role="tab"
         type="button"
       >
         Tab title #4
       </button>
       <button
-        class="css-xcko46 e1lzzkxx2"
+        class="emotion-2 emotion-1"
         role="tab"
         type="button"
       >
         Tab title #5
       </button>
       <button
-        class="css-xcko46 e1lzzkxx2"
+        class="emotion-2 emotion-1"
         role="tab"
         type="button"
       >
@@ -179,7 +419,7 @@ exports[`Storyshots Components|Tabs stateful - no initial 1`] = `
       </button>
     </div>
     <div
-      class="css-1bx5ylf e1lzzkxx3"
+      class="emotion-16 emotion-17"
     >
       <div
         id="test1"
@@ -193,7 +433,7 @@ exports[`Storyshots Components|Tabs stateful - no initial 1`] = `
         CONTENT 2
       </div>
       <div
-        class="css-1hyfx7x e1lzzkxx4"
+        class="emotion-14 emotion-15"
       >
         <div>
           CONTENT 6
@@ -205,25 +445,145 @@ exports[`Storyshots Components|Tabs stateful - no initial 1`] = `
 `;
 
 exports[`Storyshots Components|Tabs stateful - static 1`] = `
+.emotion-4 {
+  background: rgba(255,255,255,1);
+  border-bottom: 1px solid rgba(0,0,0,0.1);
+  overflow: auto;
+  padding: 0 8px;
+  white-space: nowrap;
+  height: 40px;
+}
+
+.emotion-0 {
+  white-space: normal;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  overflow: hidden;
+  vertical-align: top;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+  font-size: 11px;
+  -webkit-letter-spacing: 1px;
+  -moz-letter-spacing: 1px;
+  -ms-letter-spacing: 1px;
+  letter-spacing: 1px;
+  padding: 0 8px;
+  text-transform: uppercase;
+  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  height: 40px;
+  line-height: 12px;
+  box-sizing: border-box;
+  cursor: pointer;
+  background: transparent;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  color: rgba(0,0,0,0.4);
+  border-bottom-color: transparent;
+}
+
+.emotion-0:empty {
+  display: none;
+}
+
+.emotion-0:focus {
+  outline: 0 none;
+  border-bottom-color: #9fdaff;
+}
+
+.emotion-2 {
+  white-space: normal;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  overflow: hidden;
+  vertical-align: top;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+  font-size: 11px;
+  -webkit-letter-spacing: 1px;
+  -moz-letter-spacing: 1px;
+  -ms-letter-spacing: 1px;
+  letter-spacing: 1px;
+  padding: 0 8px;
+  text-transform: uppercase;
+  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  height: 40px;
+  line-height: 12px;
+  box-sizing: border-box;
+  cursor: pointer;
+  background: transparent;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  color: #444;
+  border-bottom-color: rgba(0,0,0,0.1);
+}
+
+.emotion-2:empty {
+  display: none;
+}
+
+.emotion-2:focus {
+  outline: 0 none;
+  border-bottom-color: #9fdaff;
+}
+
+.emotion-10 {
+  overflow: hidden;
+  background: rgba(255,255,255,0.89);
+  border-radius: 4px;
+  border: 1px solid rgba(0,0,0,0.1);
+  display: block;
+}
+
+.emotion-8 {
+  display: block;
+  position: relative;
+}
+
+.emotion-6 {
+  display: block;
+}
+
 <div
   style="height:calc(100vh - 20px)"
 >
   <div
-    class="css-8a9ncn e1lzzkxx0"
+    class="emotion-10 emotion-11"
   >
     <div
-      class="css-1whcqvw e1lzzkxx1"
+      class="emotion-4 emotion-5"
       role="tablist"
     >
       <button
-        class="css-xcko46 e1lzzkxx2"
+        class="emotion-0 emotion-1"
         role="tab"
         type="button"
       >
         With a function
       </button>
       <button
-        class="css-1hf831j e1lzzkxx2"
+        class="emotion-2 emotion-1"
         role="tab"
         type="button"
       >
@@ -231,10 +591,10 @@ exports[`Storyshots Components|Tabs stateful - static 1`] = `
       </button>
     </div>
     <div
-      class="css-1bx5ylf e1lzzkxx3"
+      class="emotion-8 emotion-9"
     >
       <div
-        class="css-13o7eu2 e1lzzkxx4"
+        class="emotion-6 emotion-7"
         role="tabpanel"
       >
         <div>
@@ -247,53 +607,188 @@ exports[`Storyshots Components|Tabs stateful - static 1`] = `
 `;
 
 exports[`Storyshots Components|Tabs stateless - absolute 1`] = `
+.emotion-18 {
+  overflow: hidden;
+  background: rgba(255,255,255,0.89);
+  border-radius: 4px;
+  border: 1px solid rgba(0,0,0,0.1);
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.emotion-12 {
+  background: rgba(255,255,255,1);
+  border-bottom: 1px solid rgba(0,0,0,0.1);
+  overflow: auto;
+  padding: 0 8px;
+  white-space: nowrap;
+  height: 40px;
+}
+
+.emotion-0 {
+  white-space: normal;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  overflow: hidden;
+  vertical-align: top;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+  font-size: 11px;
+  -webkit-letter-spacing: 1px;
+  -moz-letter-spacing: 1px;
+  -ms-letter-spacing: 1px;
+  letter-spacing: 1px;
+  padding: 0 8px;
+  text-transform: uppercase;
+  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  height: 40px;
+  line-height: 12px;
+  box-sizing: border-box;
+  cursor: pointer;
+  background: transparent;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  color: rgba(0,0,0,0.4);
+  border-bottom-color: transparent;
+}
+
+.emotion-0:empty {
+  display: none;
+}
+
+.emotion-0:focus {
+  outline: 0 none;
+  border-bottom-color: #9fdaff;
+}
+
+.emotion-4 {
+  white-space: normal;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  overflow: hidden;
+  vertical-align: top;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+  font-size: 11px;
+  -webkit-letter-spacing: 1px;
+  -moz-letter-spacing: 1px;
+  -ms-letter-spacing: 1px;
+  letter-spacing: 1px;
+  padding: 0 8px;
+  text-transform: uppercase;
+  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  height: 40px;
+  line-height: 12px;
+  box-sizing: border-box;
+  cursor: pointer;
+  background: transparent;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  color: #444;
+  border-bottom-color: rgba(0,0,0,0.1);
+}
+
+.emotion-4:empty {
+  display: none;
+}
+
+.emotion-4:focus {
+  outline: 0 none;
+  border-bottom-color: #9fdaff;
+}
+
+.emotion-16 {
+  display: block;
+  position: relative;
+  position: relative;
+  overflow: auto;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  width: 100%;
+}
+
+.emotion-14 {
+  display: none;
+}
+
 <div
   style="height:calc(100vh - 20px)"
 >
   <div
-    class="css-d7g4da e1lzzkxx0"
+    class="emotion-18 emotion-19"
   >
     <div
-      class="css-1whcqvw e1lzzkxx1"
+      class="emotion-12 emotion-13"
       role="tablist"
     >
       <button
-        class="css-xcko46 e1lzzkxx2"
+        class="emotion-0 emotion-1"
         role="tab"
         type="button"
       >
         Tab title #1
       </button>
       <button
-        class="css-xcko46 e1lzzkxx2"
+        class="emotion-0 emotion-1"
         role="tab"
         type="button"
       >
         Tab title #2
       </button>
       <button
-        class="css-1hf831j e1lzzkxx2"
+        class="emotion-4 emotion-1"
         role="tab"
         type="button"
       >
         Tab with scroll
       </button>
       <button
-        class="css-xcko46 e1lzzkxx2"
+        class="emotion-0 emotion-1"
         role="tab"
         type="button"
       >
         Tab title #4
       </button>
       <button
-        class="css-xcko46 e1lzzkxx2"
+        class="emotion-0 emotion-1"
         role="tab"
         type="button"
       >
         Tab title #5
       </button>
       <button
-        class="css-xcko46 e1lzzkxx2"
+        class="emotion-0 emotion-1"
         role="tab"
         type="button"
       >
@@ -301,7 +796,7 @@ exports[`Storyshots Components|Tabs stateless - absolute 1`] = `
       </button>
     </div>
     <div
-      class="css-18lpvrh e1lzzkxx3"
+      class="emotion-16 emotion-17"
     >
       <div
         id="test2"
@@ -359,7 +854,7 @@ exports[`Storyshots Components|Tabs stateless - absolute 1`] = `
         />
       </div>
       <div
-        class="css-1hyfx7x e1lzzkxx4"
+        class="emotion-14 emotion-15"
       >
         <div>
           CONTENT 6
@@ -371,53 +866,173 @@ exports[`Storyshots Components|Tabs stateless - absolute 1`] = `
 `;
 
 exports[`Storyshots Components|Tabs stateless - bordered 1`] = `
+.emotion-12 {
+  background: rgba(255,255,255,1);
+  border-bottom: 1px solid rgba(0,0,0,0.1);
+  overflow: auto;
+  padding: 0 8px;
+  white-space: nowrap;
+  height: 40px;
+}
+
+.emotion-0 {
+  white-space: normal;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  overflow: hidden;
+  vertical-align: top;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+  font-size: 11px;
+  -webkit-letter-spacing: 1px;
+  -moz-letter-spacing: 1px;
+  -ms-letter-spacing: 1px;
+  letter-spacing: 1px;
+  padding: 0 8px;
+  text-transform: uppercase;
+  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  height: 40px;
+  line-height: 12px;
+  box-sizing: border-box;
+  cursor: pointer;
+  background: transparent;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  color: rgba(0,0,0,0.4);
+  border-bottom-color: transparent;
+}
+
+.emotion-0:empty {
+  display: none;
+}
+
+.emotion-0:focus {
+  outline: 0 none;
+  border-bottom-color: #9fdaff;
+}
+
+.emotion-4 {
+  white-space: normal;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  overflow: hidden;
+  vertical-align: top;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+  font-size: 11px;
+  -webkit-letter-spacing: 1px;
+  -moz-letter-spacing: 1px;
+  -ms-letter-spacing: 1px;
+  letter-spacing: 1px;
+  padding: 0 8px;
+  text-transform: uppercase;
+  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  height: 40px;
+  line-height: 12px;
+  box-sizing: border-box;
+  cursor: pointer;
+  background: transparent;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  color: #444;
+  border-bottom-color: rgba(0,0,0,0.1);
+}
+
+.emotion-4:empty {
+  display: none;
+}
+
+.emotion-4:focus {
+  outline: 0 none;
+  border-bottom-color: #9fdaff;
+}
+
+.emotion-14 {
+  display: none;
+}
+
+.emotion-18 {
+  overflow: hidden;
+  background: rgba(255,255,255,0.89);
+  border-radius: 4px;
+  border: 1px solid rgba(0,0,0,0.1);
+  display: block;
+}
+
+.emotion-16 {
+  display: block;
+  position: relative;
+}
+
 <div
   style="height:calc(100vh - 20px)"
 >
   <div
-    class="css-8a9ncn e1lzzkxx0"
+    class="emotion-18 emotion-19"
   >
     <div
-      class="css-1whcqvw e1lzzkxx1"
+      class="emotion-12 emotion-13"
       role="tablist"
     >
       <button
-        class="css-xcko46 e1lzzkxx2"
+        class="emotion-0 emotion-1"
         role="tab"
         type="button"
       >
         Tab title #1
       </button>
       <button
-        class="css-xcko46 e1lzzkxx2"
+        class="emotion-0 emotion-1"
         role="tab"
         type="button"
       >
         Tab title #2
       </button>
       <button
-        class="css-1hf831j e1lzzkxx2"
+        class="emotion-4 emotion-1"
         role="tab"
         type="button"
       >
         Tab with scroll
       </button>
       <button
-        class="css-xcko46 e1lzzkxx2"
+        class="emotion-0 emotion-1"
         role="tab"
         type="button"
       >
         Tab title #4
       </button>
       <button
-        class="css-xcko46 e1lzzkxx2"
+        class="emotion-0 emotion-1"
         role="tab"
         type="button"
       >
         Tab title #5
       </button>
       <button
-        class="css-xcko46 e1lzzkxx2"
+        class="emotion-0 emotion-1"
         role="tab"
         type="button"
       >
@@ -425,7 +1040,7 @@ exports[`Storyshots Components|Tabs stateless - bordered 1`] = `
       </button>
     </div>
     <div
-      class="css-1bx5ylf e1lzzkxx3"
+      class="emotion-16 emotion-17"
     >
       <div
         id="test2"
@@ -483,7 +1098,7 @@ exports[`Storyshots Components|Tabs stateless - bordered 1`] = `
         />
       </div>
       <div
-        class="css-1hyfx7x e1lzzkxx4"
+        class="emotion-14 emotion-15"
       >
         <div>
           CONTENT 6
@@ -495,11 +1110,20 @@ exports[`Storyshots Components|Tabs stateless - bordered 1`] = `
 `;
 
 exports[`Storyshots Components|Tabs stateless - empty 1`] = `
+.emotion-0 {
+  font-size: 11px;
+  display: block;
+  text-align: center;
+  text-transform: uppercase;
+  margin: 0;
+  padding: 20px;
+}
+
 <div
   style="height:calc(100vh - 20px)"
 >
   <p
-    class="css-hftiue ejh6i270"
+    class="emotion-0 emotion-1"
   >
     no panels available
   </p>
diff --git a/lib/components/src/theme.js b/lib/components/src/theme.js
index d0c9ee2456..a57b29bd68 100644
--- a/lib/components/src/theme.js
+++ b/lib/components/src/theme.js
@@ -33,8 +33,8 @@ export const normal = {
   dimmedTextColor: 'rgba(0,0,0,0.4)',
   highlightColor: '#9fdaff',
   menuHighlightColor: '#1ea7fd',
-  successColor: '#0edf62',
-  failColor: '#ff3f3f',
+  successColor: '#09833a',
+  failColor: '#d53535',
   warnColor: 'orange',
   mainTextSize: 13,
   monoTextFace: monoFonts.fontFamily,
diff --git a/lib/core-events/package.json b/lib/core-events/package.json
index 5deba1d448..d20b5d2ea8 100644
--- a/lib/core-events/package.json
+++ b/lib/core-events/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core-events",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "description": "Event names used in storybook core",
   "keywords": [
     "storybook"
diff --git a/lib/core/package.json b/lib/core/package.json
index b7b5a0bed1..e45c65c372 100644
--- a/lib/core/package.json
+++ b/lib/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
@@ -31,12 +31,12 @@
     "@emotion/provider": "^0.11.2",
     "@emotion/styled": "^0.10.6",
     "@ndelangen/html-webpack-harddisk-plugin": "^0.2.0",
-    "@storybook/addons": "4.1.0-alpha.3",
-    "@storybook/channel-postmessage": "4.1.0-alpha.3",
-    "@storybook/client-logger": "4.1.0-alpha.3",
-    "@storybook/core-events": "4.1.0-alpha.3",
-    "@storybook/node-logger": "4.1.0-alpha.3",
-    "@storybook/ui": "4.1.0-alpha.3",
+    "@storybook/addons": "4.1.0-alpha.8",
+    "@storybook/channel-postmessage": "4.1.0-alpha.8",
+    "@storybook/client-logger": "4.1.0-alpha.8",
+    "@storybook/core-events": "4.1.0-alpha.8",
+    "@storybook/node-logger": "4.1.0-alpha.8",
+    "@storybook/ui": "4.1.0-alpha.8",
     "airbnb-js-shims": "^1 || ^2",
     "autoprefixer": "^9.3.1",
     "babel-plugin-macros": "^2.4.2",
@@ -84,6 +84,7 @@
     "spawn-promise": "^0.1.8",
     "style-loader": "^0.23.1",
     "svg-url-loader": "^2.3.2",
+    "terser-webpack-plugin": "^1.1.0",
     "url-loader": "^1.1.2",
     "webpack": "^4.23.1",
     "webpack-dev-middleware": "^3.4.0",
diff --git a/lib/core/src/server/build-static.js b/lib/core/src/server/build-static.js
index 3a68785276..c656cee0e9 100644
--- a/lib/core/src/server/build-static.js
+++ b/lib/core/src/server/build-static.js
@@ -68,7 +68,7 @@ export async function buildStaticStandalone(options) {
         process.exit(-1);
       }
       logger.info(`=> Copying static files from: ${dir}`);
-      shelljs.cp('-r', `${dir}/*`, outputDir);
+      shelljs.cp('-r', `${dir}/!(index.html)`, outputDir);
     });
   }
 
diff --git a/lib/core/src/server/manager/manager-webpack.config.js b/lib/core/src/server/manager/manager-webpack.config.js
index e160f43ebd..297b459990 100644
--- a/lib/core/src/server/manager/manager-webpack.config.js
+++ b/lib/core/src/server/manager/manager-webpack.config.js
@@ -48,6 +48,8 @@ export default ({ configDir, entries, outputDir, configType }) => {
       modules: ['node_modules'].concat(raw.NODE_PATH || []),
       alias: {
         '@babel/runtime': getBabelRuntimePath(),
+        react: require.resolve('react'),
+        'react-dom': require.resolve('react-dom'),
       },
     },
     optimization: {
diff --git a/lib/core/src/server/preview/iframe-webpack.config.js b/lib/core/src/server/preview/iframe-webpack.config.js
index b1408691f8..56d154b434 100644
--- a/lib/core/src/server/preview/iframe-webpack.config.js
+++ b/lib/core/src/server/preview/iframe-webpack.config.js
@@ -4,6 +4,7 @@ import Dotenv from 'dotenv-webpack';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
 import WatchMissingNodeModulesPlugin from 'react-dev-utils/WatchMissingNodeModulesPlugin';
+import TerserWebpackPlugin from 'terser-webpack-plugin';
 
 import {
   includePaths,
@@ -95,6 +96,16 @@ export default ({
         chunks: 'all',
       },
       runtimeChunk: true,
+      minimizer: [
+        new TerserWebpackPlugin({
+          cache: true,
+          parallel: true,
+          sourceMap: true,
+          terserOptions: {
+            mangle: false,
+          },
+        }),
+      ],
     },
     performance: {
       hints: isProd ? 'warning' : false,
diff --git a/lib/node-logger/package.json b/lib/node-logger/package.json
index e9d231216e..effc9d6e92 100644
--- a/lib/node-logger/package.json
+++ b/lib/node-logger/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/node-logger",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/lib/ui/package.json b/lib/ui/package.json
index 7120007eda..12f01aec7b 100644
--- a/lib/ui/package.json
+++ b/lib/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/ui",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "description": "Core Storybook UI",
   "keywords": [
     "storybook"
@@ -29,10 +29,10 @@
     "@emotion/provider": "^0.11.2",
     "@emotion/styled": "^0.10.6",
     "@reach/router": "^1.1.1",
-    "@storybook/addons": "4.1.0-alpha.3",
-    "@storybook/client-logger": "4.1.0-alpha.3",
-    "@storybook/components": "4.1.0-alpha.3",
-    "@storybook/core-events": "4.1.0-alpha.3",
+    "@storybook/addons": "4.1.0-alpha.8",
+    "@storybook/client-logger": "4.1.0-alpha.8",
+    "@storybook/components": "4.1.0-alpha.8",
+    "@storybook/core-events": "4.1.0-alpha.8",
     "emotion": "^9.2.8",
     "events": "^3.0.0",
     "fast-deep-equal": "^2.0.1",
diff --git a/package.json b/package.json
index 958334e529..ca56d16ca4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/root",
-  "version": "4.1.0-alpha.3",
+  "version": "4.1.0-alpha.8",
   "private": true,
   "repository": {
     "type": "git",
@@ -65,7 +65,7 @@
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/runtime": "^7.1.2",
-    "@emotion/snapshot-serializer": "0.8.2",
+    "@emotion/snapshot-serializer": "^0.8.2",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^23.6.0",
@@ -73,6 +73,7 @@
     "babel-plugin-emotion": "^9.2.11",
     "babel-plugin-macros": "^2.4.2",
     "babel-plugin-require-context-hook": "^1.0.0",
+    "babel-plugin-dynamic-import-node": "^2.2.0",
     "babel-preset-vue": "^2.0.2",
     "chalk": "^2.4.1",
     "codecov": "^3.1.0",
@@ -103,7 +104,6 @@
     "jest-diff": "^23.6.0",
     "jest-environment-jsdom": "^23.4.0",
     "jest-enzyme": "^7.0.0",
-    "jest-glamor-react": "^4.3.1",
     "jest-image-snapshot": "^2.6.0",
     "jest-jasmine2": "^23.6.0",
     "jest-preset-angular": "^6.0.1",
@@ -166,7 +166,8 @@
   },
   "pr-log": {
     "skipLabels": [
-      "cleanup"
+      "cleanup",
+      "doc-dependencies:update"
     ],
     "validLabels": [
       [
diff --git a/yarn.lock b/yarn.lock
index c5f2f874fe..83a9081895 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -247,6 +247,26 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
+"@babel/core@^7.1.5":
+  version "7.1.6"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.1.6.tgz#3733cbee4317429bc87c62b29cf8587dba7baeb3"
+  integrity sha512-Hz6PJT6e44iUNpAn8AoyAs6B3bl60g7MJQaI0rZEar6ECzh6+srYO1xlIdssio34mPaUtAb1y+XlkkSJzok3yw==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@babel/generator" "^7.1.6"
+    "@babel/helpers" "^7.1.5"
+    "@babel/parser" "^7.1.6"
+    "@babel/template" "^7.1.2"
+    "@babel/traverse" "^7.1.6"
+    "@babel/types" "^7.1.6"
+    convert-source-map "^1.1.0"
+    debug "^4.1.0"
+    json5 "^2.1.0"
+    lodash "^4.17.10"
+    resolve "^1.3.2"
+    semver "^5.4.1"
+    source-map "^0.5.0"
+
 "@babel/generator@7.0.0-beta.44":
   version "7.0.0-beta.44"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.0.0-beta.44.tgz#c7e67b9b5284afcf69b309b50d7d37f3e5033d42"
@@ -269,6 +289,17 @@
     source-map "^0.5.0"
     trim-right "^1.0.1"
 
+"@babel/generator@^7.1.6":
+  version "7.1.6"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.1.6.tgz#001303cf87a5b9d093494a4bf251d7b5d03d3999"
+  integrity sha512-brwPBtVvdYdGxtenbQgfCdDPmtkmUBZPjUoK5SXJEBuHaA5BCubh9ly65fzXz7R6o5rA76Rs22ES8Z+HCc0YIQ==
+  dependencies:
+    "@babel/types" "^7.1.6"
+    jsesc "^2.5.1"
+    lodash "^4.17.10"
+    source-map "^0.5.0"
+    trim-right "^1.0.1"
+
 "@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"
@@ -464,6 +495,15 @@
     "@babel/traverse" "^7.1.0"
     "@babel/types" "^7.1.2"
 
+"@babel/helpers@^7.1.5":
+  version "7.1.5"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.1.5.tgz#68bfc1895d685f2b8f1995e788dbfe1f6ccb1996"
+  integrity sha512-2jkcdL02ywNBry1YNFAH/fViq4fXG0vdckHqeJk+75fpQ2OH+Az6076tX/M0835zA45E0Cqa6pV5Kiv9YOqjEg==
+  dependencies:
+    "@babel/template" "^7.1.2"
+    "@babel/traverse" "^7.1.5"
+    "@babel/types" "^7.1.5"
+
 "@babel/highlight@7.0.0-beta.44":
   version "7.0.0-beta.44"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0-beta.44.tgz#18c94ce543916a80553edcdcf681890b200747d5"
@@ -492,6 +532,11 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.1.3.tgz#2c92469bac2b7fbff810b67fca07bd138b48af77"
   integrity sha512-gqmspPZOMW3MIRb9HlrnbZHXI1/KHTOroBwN1NcLL6pWxzqzEKGvRTq0W/PxS45OtQGbaFikSQpkS5zbnsQm2w==
 
+"@babel/parser@^7.1.6":
+  version "7.1.6"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.1.6.tgz#16e97aca1ec1062324a01c5a6a7d0df8dd189854"
+  integrity sha512-dWP6LJm9nKT6ALaa+bnL247GHHMWir3vSlZ2+IHgHgktZQx0L3Uvq2uAWcuzIe+fujRsYWBW2q622C5UvGK9iQ==
+
 "@babel/plugin-proposal-async-generator-functions@^7.1.0":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.1.0.tgz#41c1a702e10081456e23a7b74d891922dd1bb6ce"
@@ -513,6 +558,16 @@
     "@babel/helper-replace-supers" "^7.1.0"
     "@babel/plugin-syntax-class-properties" "^7.0.0"
 
+"@babel/plugin-proposal-decorators@7.1.2":
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.1.2.tgz#79829bd75fced6581ec6c7ab1930e8d738e892e7"
+  integrity sha512-YooynBO6PmBgHvAd0fl5e5Tq/a0pEC6RqF62ouafme8FzdIVH41Mz/u1dn8fFVm4jzEJ+g/MsOxouwybJPuP8Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-replace-supers" "^7.1.0"
+    "@babel/helper-split-export-declaration" "^7.0.0"
+    "@babel/plugin-syntax-decorators" "^7.1.0"
+
 "@babel/plugin-proposal-export-default-from@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-default-from/-/plugin-proposal-export-default-from-7.0.0.tgz#a057bbfd4649facfe39f33a537e18554bdd2b5da"
@@ -568,6 +623,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-syntax-decorators@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.1.0.tgz#2fa7c1a7905a299c9853ebcef340306675f9cbdc"
+  integrity sha512-uQvRSbgQ0nQg3jsmIixXXDCgSpkBolJ9X7NYThMKCcjvE8dN2uWJUzTUNNAeuKOjARTd+wUQV0ztXpgunZYKzQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
 "@babel/plugin-syntax-dynamic-import@7.0.0", "@babel/plugin-syntax-dynamic-import@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.0.0.tgz#6dfb7d8b6c3be14ce952962f658f3b7eb54c33ee"
@@ -655,6 +717,14 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     lodash "^4.17.10"
 
+"@babel/plugin-transform-block-scoping@^7.1.5":
+  version "7.1.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.1.5.tgz#3e8e0bc9a5104519923302a24f748f72f2f61f37"
+  integrity sha512-jlYcDrz+5ayWC7mxgpn1Wj8zj0mmjCT2w0mPIMSwO926eXBRxpEgoN/uQVRBfjtr8ayjcmS+xk2G1jaP8JjMJQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    lodash "^4.17.10"
+
 "@babel/plugin-transform-classes@7.1.0", "@babel/plugin-transform-classes@^7.1.0":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.1.0.tgz#ab3f8a564361800cbc8ab1ca6f21108038432249"
@@ -967,6 +1037,53 @@
     js-levenshtein "^1.1.3"
     semver "^5.3.0"
 
+"@babel/preset-env@^7.1.5":
+  version "7.1.6"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.1.6.tgz#a0bf4b96b6bfcf6e000afc5b72b4abe7cc13ae97"
+  integrity sha512-YIBfpJNQMBkb6MCkjz/A9J76SNCSuGVamOVBgoUkLzpJD/z8ghHi9I42LQ4pulVX68N/MmImz6ZTixt7Azgexw==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-proposal-async-generator-functions" "^7.1.0"
+    "@babel/plugin-proposal-json-strings" "^7.0.0"
+    "@babel/plugin-proposal-object-rest-spread" "^7.0.0"
+    "@babel/plugin-proposal-optional-catch-binding" "^7.0.0"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.0.0"
+    "@babel/plugin-syntax-async-generators" "^7.0.0"
+    "@babel/plugin-syntax-object-rest-spread" "^7.0.0"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.0.0"
+    "@babel/plugin-transform-arrow-functions" "^7.0.0"
+    "@babel/plugin-transform-async-to-generator" "^7.1.0"
+    "@babel/plugin-transform-block-scoped-functions" "^7.0.0"
+    "@babel/plugin-transform-block-scoping" "^7.1.5"
+    "@babel/plugin-transform-classes" "^7.1.0"
+    "@babel/plugin-transform-computed-properties" "^7.0.0"
+    "@babel/plugin-transform-destructuring" "^7.0.0"
+    "@babel/plugin-transform-dotall-regex" "^7.0.0"
+    "@babel/plugin-transform-duplicate-keys" "^7.0.0"
+    "@babel/plugin-transform-exponentiation-operator" "^7.1.0"
+    "@babel/plugin-transform-for-of" "^7.0.0"
+    "@babel/plugin-transform-function-name" "^7.1.0"
+    "@babel/plugin-transform-literals" "^7.0.0"
+    "@babel/plugin-transform-modules-amd" "^7.1.0"
+    "@babel/plugin-transform-modules-commonjs" "^7.1.0"
+    "@babel/plugin-transform-modules-systemjs" "^7.0.0"
+    "@babel/plugin-transform-modules-umd" "^7.1.0"
+    "@babel/plugin-transform-new-target" "^7.0.0"
+    "@babel/plugin-transform-object-super" "^7.1.0"
+    "@babel/plugin-transform-parameters" "^7.1.0"
+    "@babel/plugin-transform-regenerator" "^7.0.0"
+    "@babel/plugin-transform-shorthand-properties" "^7.0.0"
+    "@babel/plugin-transform-spread" "^7.0.0"
+    "@babel/plugin-transform-sticky-regex" "^7.0.0"
+    "@babel/plugin-transform-template-literals" "^7.0.0"
+    "@babel/plugin-transform-typeof-symbol" "^7.0.0"
+    "@babel/plugin-transform-unicode-regex" "^7.0.0"
+    browserslist "^4.1.0"
+    invariant "^2.2.2"
+    js-levenshtein "^1.1.3"
+    semver "^5.3.0"
+
 "@babel/preset-flow@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/preset-flow/-/preset-flow-7.0.0.tgz#afd764835d9535ec63d8c7d4caf1c06457263da2"
@@ -1071,6 +1188,21 @@
     globals "^11.1.0"
     lodash "^4.17.10"
 
+"@babel/traverse@^7.1.5", "@babel/traverse@^7.1.6":
+  version "7.1.6"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.1.6.tgz#c8db9963ab4ce5b894222435482bd8ea854b7b5c"
+  integrity sha512-CXedit6GpISz3sC2k2FsGCUpOhUqKdyL0lqNrImQojagnUMXf8hex4AxYFRuMkNGcvJX5QAFGzB5WJQmSv8SiQ==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@babel/generator" "^7.1.6"
+    "@babel/helper-function-name" "^7.1.0"
+    "@babel/helper-split-export-declaration" "^7.0.0"
+    "@babel/parser" "^7.1.6"
+    "@babel/types" "^7.1.6"
+    debug "^4.1.0"
+    globals "^11.1.0"
+    lodash "^4.17.10"
+
 "@babel/types@7.0.0-beta.44":
   version "7.0.0-beta.44"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.44.tgz#6b1b164591f77dec0a0342aca995f2d046b3a757"
@@ -1089,6 +1221,15 @@
     lodash "^4.17.10"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.1.5", "@babel/types@^7.1.6":
+  version "7.1.6"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.1.6.tgz#0adb330c3a281348a190263aceb540e10f04bcce"
+  integrity sha512-DMiUzlY9DSjVsOylJssxLHSgj6tWM9PRFJOGW/RaOglVOK9nzTxoOMfTfRQXGUCUQ/HmlG2efwC+XqUEJ5ay4w==
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.17.10"
+    to-fast-properties "^2.0.0"
+
 "@csstools/convert-colors@^1.4.0":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7"
@@ -1184,7 +1325,7 @@
   resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.8.1.tgz#6eed686c927a1c39f5045ec45ecfa36de896819d"
   integrity sha512-p82hFBHbNkPLZ410HOeaRJZMrN1uh9rI7JAaRXIp62PP5evspPXyi3xYtxZc1+sCSlwjnQPuOIa6N88iJNtPXw==
 
-"@emotion/snapshot-serializer@0.8.2":
+"@emotion/snapshot-serializer@^0.8.2":
   version "0.8.2"
   resolved "https://registry.yarnpkg.com/@emotion/snapshot-serializer/-/snapshot-serializer-0.8.2.tgz#817a3d7aa8dc5a73da0ba33404fc1fd564679be7"
   integrity sha512-R6K9N+jxoeigSN8tDntvTVxKYDY4eSutDETmAy9O5+DTneuGxobICHFp8F5/q0t3Q5GkKfJjDVlehbBUgYIDYA==
@@ -1201,7 +1342,7 @@
     "@emotion/serialize" "^0.9.1"
     "@emotion/utils" "^0.8.2"
 
-"@emotion/styled@^0.10.6":
+"@emotion/styled@0.10.6", "@emotion/styled@^0.10.6":
   version "0.10.6"
   resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-0.10.6.tgz#1f6af1d3d4bf9fdeb05a4d220046ce11ad21a7ca"
   integrity sha512-DFNW8jlMjy1aYCj/PKsvBoJVZAQXzjmSCwtKXLs31qZzNPaUEPbTYSIKnMUtIiAOYsu0pUTGXM+l0a+MYNm4lA==
@@ -1922,6 +2063,60 @@
     semver "5.5.1"
     semver-intersect "1.4.0"
 
+"@svgr/babel-plugin-add-jsx-attribute@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.0.0.tgz#5acf239cd2747b1a36ec7e708de05d914cb9b948"
+  integrity sha512-PDvHV2WhSGCSExp+eIMEKxYd1Q0SBvXLb4gAOXbdh0dswHFFgXWzxGjCmx5aln4qGrhkuN81khzYzR/44DYaMA==
+
+"@svgr/babel-plugin-remove-jsx-attribute@^4.0.3":
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-4.0.3.tgz#32564b5c4d761b51e34492b6a4894196c0f75803"
+  integrity sha512-fpG7AzzJxz1tc8ITYS1jCAt1cq4ydK2R+sx//BMTJgvOjfk91M5GiqFolP8aYTzLcum92IGNAVFS3zEcucOQEA==
+
+"@svgr/babel-plugin-remove-jsx-empty-expression@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-4.0.0.tgz#0b59338c00671cf8137eb823bd84a3efac686502"
+  integrity sha512-nBGVl6LzXTdk1c6w3rMWcjq3mYGz+syWc5b3CdqAiEeY/nswYDoW/cnGUKKC8ofD6/LaG+G/IUnfv3jKoHz43A==
+
+"@svgr/babel-plugin-replace-jsx-attribute-value@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-4.0.0.tgz#91785643540c2300f3d89e515b37af9b5ce4e695"
+  integrity sha512-ejQqpTfORy6TT5w1x/2IQkscgfbtNFjitcFDu63GRz7qfhVTYhMdiJvJ1+Aw9hmv9bO4tXThGQDr1IF5lIvgew==
+
+"@svgr/babel-plugin-svg-dynamic-title@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-4.0.0.tgz#eb8d50b80ba0a26f9b27c7268e2a803d90f1bc9e"
+  integrity sha512-OE6GT9WRKWqd0Dk6NJ5TYXTF5OxAyn74+c/D+gTLbCXnK2A0luEXuwMbe5zR5Px4A/jow2OeEBboTENl4vtuQg==
+
+"@svgr/babel-plugin-svg-em-dimensions@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-4.0.0.tgz#0de3972c46ff1960bed765646037a3a7f9e1da3d"
+  integrity sha512-QeDRGHXfjYEBTXxV0TsjWmepsL9Up5BOOlMFD557x2JrSiVGUn2myNxHIrHiVW0+nnWnaDcrkjg/jUvbJ5nKCg==
+
+"@svgr/babel-plugin-transform-react-native-svg@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-4.0.0.tgz#5e8ecc2a9870ae05fb1e553b1fe9c6b5853a1c66"
+  integrity sha512-c6eE6ovs14k6dmHKoy26h7iRFhjWNnwYVrDWIPfouVm/gcLIeMw/ME4i91O5LEfaDHs6kTRCcVpbAVbNULZOtw==
+
+"@svgr/babel-plugin-transform-svg-component@^4.0.1":
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-4.0.1.tgz#d134a03abed4648ce5e988507366476b2406d1a8"
+  integrity sha512-bhJXVIbax1pLTuGITpYX6DilG+j/hWnIjoYliPSKnv0/zLOP3afOpymM47Pa9nvHMFmSACU9WiTEngsi+KuIUQ==
+
+"@svgr/babel-preset@^4.0.3":
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-preset/-/babel-preset-4.0.3.tgz#e5197564b41974871eddf060519d37ec4a641688"
+  integrity sha512-v1Up8izWrTd0x2zv7BDhg848PRbozDeRXiimNvBK/hhNyB5SF9MW6IroJgR3lrStayLXLlbRQ+16dsaMtvEVDg==
+  dependencies:
+    "@svgr/babel-plugin-add-jsx-attribute" "^4.0.0"
+    "@svgr/babel-plugin-remove-jsx-attribute" "^4.0.3"
+    "@svgr/babel-plugin-remove-jsx-empty-expression" "^4.0.0"
+    "@svgr/babel-plugin-replace-jsx-attribute-value" "^4.0.0"
+    "@svgr/babel-plugin-svg-dynamic-title" "^4.0.0"
+    "@svgr/babel-plugin-svg-em-dimensions" "^4.0.0"
+    "@svgr/babel-plugin-transform-react-native-svg" "^4.0.0"
+    "@svgr/babel-plugin-transform-svg-component" "^4.0.1"
+
 "@svgr/core@^2.4.1":
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/@svgr/core/-/core-2.4.1.tgz#03a407c28c4a1d84305ae95021e8eabfda8fa731"
@@ -1935,6 +2130,43 @@
     prettier "^1.14.2"
     svgo "^1.0.5"
 
+"@svgr/core@^4.0.3":
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/@svgr/core/-/core-4.0.3.tgz#1bc50f43ee123e1e9f41a9657ab1cecee1307dac"
+  integrity sha512-xPYCbunmRRiKrQLpiYYNY47R8Ktodhrm+aPitUKqlRv2+A4vqbtohM7ucJ4SUs5OT3ju4UxOGoS2dtT8Xm9zaw==
+  dependencies:
+    "@svgr/plugin-jsx" "^4.0.3"
+    camelcase "^5.0.0"
+    cosmiconfig "^5.0.7"
+
+"@svgr/hast-util-to-babel-ast@^4.0.3":
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-4.0.3.tgz#c6a7038e532d944d6d75dc169e9cabfb5d585d76"
+  integrity sha512-4b4Qx79nTjeKDv0xx0G9fKWsxsMRIOpr2Qz+/Vaw6jwqAPQ0hapQqoEWjjWT5odQmeDrAC95I1EPiOydWdlDUw==
+  dependencies:
+    "@babel/types" "^7.1.5"
+
+"@svgr/plugin-jsx@^4.0.3":
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/@svgr/plugin-jsx/-/plugin-jsx-4.0.3.tgz#91a126548aa006e971114238036e38d534df9ac0"
+  integrity sha512-yVe9iR2qcXo96udPaPZK+Zd14SXjXg667muUttJro3aE7PRt8mgBhl0O3U14DWtPWsZ4+IdnTJ2YNtSGNTDjjA==
+  dependencies:
+    "@babel/core" "^7.1.5"
+    "@svgr/babel-preset" "^4.0.3"
+    "@svgr/hast-util-to-babel-ast" "^4.0.3"
+    rehype-parse "^5.0.0"
+    unified "^7.0.1"
+    vfile "^3.0.1"
+
+"@svgr/plugin-svgo@^4.0.3":
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/@svgr/plugin-svgo/-/plugin-svgo-4.0.3.tgz#a07ea0a736c26fa3a5440fe8e222e2e887764cab"
+  integrity sha512-MgL1CrlxvNe+1tQjPUc2bIJtsdJOIE5arbHlPgW+XVWGjMZTUcyNNP8R7/IjM2Iyrc98UJY+WYiiWHrinnY9ZQ==
+  dependencies:
+    cosmiconfig "^5.0.7"
+    merge-deep "^3.0.2"
+    svgo "^1.1.1"
+
 "@svgr/webpack@2.4.1":
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/@svgr/webpack/-/webpack-2.4.1.tgz#68bc581ecb4c09fadeb7936bd1afaceb9da960d2"
@@ -1947,6 +2179,20 @@
     "@svgr/core" "^2.4.1"
     loader-utils "^1.1.0"
 
+"@svgr/webpack@^4.0.3":
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/@svgr/webpack/-/webpack-4.0.3.tgz#318907269dd93d4f911541236948e885df7f058d"
+  integrity sha512-UziJTvIYp/pznM6bjkeruXr2VgSZt6VuXQvSM2xCBXKu5Roh6+jVU/Ughnl3xO8RM6ZTNoNDthO2y/9+4OrIBQ==
+  dependencies:
+    "@babel/core" "^7.1.5"
+    "@babel/plugin-transform-react-constant-elements" "^7.0.0"
+    "@babel/preset-env" "^7.1.5"
+    "@babel/preset-react" "^7.0.0"
+    "@svgr/core" "^4.0.3"
+    "@svgr/plugin-jsx" "^4.0.3"
+    "@svgr/plugin-svgo" "^4.0.3"
+    loader-utils "^1.1.0"
+
 "@types/acorn@^4.0.3":
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/@types/acorn/-/acorn-4.0.3.tgz#d1f3e738dde52536f9aad3d3380d14e448820afd"
@@ -3494,7 +3740,7 @@ babel-plugin-debug-macros@^0.2.0-beta.6:
   dependencies:
     semver "^5.3.0"
 
-babel-plugin-dynamic-import-node@2.2.0:
+babel-plugin-dynamic-import-node@2.2.0, babel-plugin-dynamic-import-node@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.2.0.tgz#c0adfb07d95f4a4495e9aaac6ec386c4d7c2524e"
   integrity sha512-fP899ELUnTaBcIzmrW7nniyqqdYWrWuJUyPWHxFa/c7r7hS6KC8FscNfLlBNIoPSc55kYMGEEKjPjJGCLbE1qA==
@@ -3689,6 +3935,11 @@ babel-plugin-named-asset-import@^0.2.2:
   resolved "https://registry.yarnpkg.com/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.2.2.tgz#af1290f77e073411ef1a12f17fc458f1111122eb"
   integrity sha512-NtESBqk8LZuNhBd1BMLxDOh0JPytMs88LwAZFmHg1ZyuGrIAO40dw7p624w+flj0uuhfKTNY8tYKsUEAZGRRFA==
 
+babel-plugin-named-asset-import@^0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.2.3.tgz#b40ed50a848e7bb0a2a7e34d990d1f9d46fe9b38"
+  integrity sha512-9mx2Z9M4EGbutvXxoLV7aUBCY6ps3sqLFl094FeA2tFQzQffIh0XSsmwwQRxiSfpg3rnb5x/o46qRLxS/OzFTg==
+
 babel-plugin-react-docgen@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-react-docgen/-/babel-plugin-react-docgen-2.0.0.tgz#039d90f5a1a37131c8cc3015017eecafa8d78882"
@@ -4395,6 +4646,31 @@ babel-preset-react-app@^6.0.0:
     babel-plugin-macros "2.4.2"
     babel-plugin-transform-react-remove-prop-types "0.4.18"
 
+babel-preset-react-app@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-react-app/-/babel-preset-react-app-6.1.0.tgz#477ae7f8557eb99ce26d179530127913b733310d"
+  integrity sha512-8PJ4N+acfYsjhDK4gMWkqJMVRMjDKb93D+nz7lWlNe73Jcv38FNu37i5K/dVQnFDdRYHbe1SjII+Y0mCgink9A==
+  dependencies:
+    "@babel/core" "7.1.0"
+    "@babel/plugin-proposal-class-properties" "7.1.0"
+    "@babel/plugin-proposal-decorators" "7.1.2"
+    "@babel/plugin-proposal-object-rest-spread" "7.0.0"
+    "@babel/plugin-syntax-dynamic-import" "7.0.0"
+    "@babel/plugin-transform-classes" "7.1.0"
+    "@babel/plugin-transform-destructuring" "7.0.0"
+    "@babel/plugin-transform-flow-strip-types" "7.0.0"
+    "@babel/plugin-transform-react-constant-elements" "7.0.0"
+    "@babel/plugin-transform-react-display-name" "7.0.0"
+    "@babel/plugin-transform-runtime" "7.1.0"
+    "@babel/preset-env" "7.1.0"
+    "@babel/preset-react" "7.0.0"
+    "@babel/preset-typescript" "7.1.0"
+    "@babel/runtime" "7.0.0"
+    babel-loader "8.0.4"
+    babel-plugin-dynamic-import-node "2.2.0"
+    babel-plugin-macros "2.4.2"
+    babel-plugin-transform-react-remove-prop-types "0.4.18"
+
 babel-preset-react-native@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/babel-preset-react-native/-/babel-preset-react-native-4.0.1.tgz#14ff07bdb6c8df9408082c0c18b2ce8e3392e76a"
@@ -5745,6 +6021,13 @@ callbackify@^1.1.0:
   resolved "https://registry.yarnpkg.com/callbackify/-/callbackify-1.1.0.tgz#d2a36986d28aa69714526c111209beeb9979d31e"
   integrity sha1-0qNphtKKppcUUmwREgm+65l50x4=
 
+caller-callsite@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/caller-callsite/-/caller-callsite-2.0.0.tgz#847e0fce0a223750a9a027c54b33731ad3154134"
+  integrity sha1-hH4PzgoiN1CpoCfFSzNzGtMVQTQ=
+  dependencies:
+    callsites "^2.0.0"
+
 caller-path@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-0.1.0.tgz#94085ef63581ecd3daa92444a8fe94e82577751f"
@@ -5752,6 +6035,13 @@ caller-path@^0.1.0:
   dependencies:
     callsites "^0.2.0"
 
+caller-path@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-2.0.0.tgz#468f83044e369ab2010fac5f06ceee15bb2cb1f4"
+  integrity sha1-Ro+DBE42mrIBD6xfBs7uFbsssfQ=
+  dependencies:
+    caller-callsite "^2.0.0"
+
 callsite@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/callsite/-/callsite-1.0.0.tgz#280398e5d664bd74038b6f0905153e6e8af1bc20"
@@ -5879,7 +6169,7 @@ caseless@~0.12.0:
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
   integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
 
-ccount@^1.0.0:
+ccount@^1.0.0, ccount@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/ccount/-/ccount-1.0.3.tgz#f1cec43f332e2ea5a569fd46f9f5bde4e6102aff"
   integrity sha512-Jt9tIBkRc9POUof7QA/VwWd+58fKkEEfI+/t1/eOlxKM7ZhrczNzMFefge7Ai+39y1pR/pP6cI19guHy3FSLmw==
@@ -6967,6 +7257,16 @@ cosmiconfig@^5.0.0, cosmiconfig@^5.0.2, cosmiconfig@^5.0.5, cosmiconfig@^5.0.6:
     js-yaml "^3.9.0"
     parse-json "^4.0.0"
 
+cosmiconfig@^5.0.7:
+  version "5.0.7"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.0.7.tgz#39826b292ee0d78eda137dfa3173bd1c21a43b04"
+  integrity sha512-PcLqxTKiDmNT6pSpy4N6KtuPwb53W+2tzNvwOZw0WH9N6O0vLIBq0x8aj8Oj75ere4YcGi48bDFCL+3fRJdlNA==
+  dependencies:
+    import-fresh "^2.0.0"
+    is-directory "^0.3.1"
+    js-yaml "^3.9.0"
+    parse-json "^4.0.0"
+
 crc@3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/crc/-/crc-3.3.0.tgz#fa622e1bc388bf257309082d6b65200ce67090ba"
@@ -7498,7 +7798,7 @@ de-indent@^1.0.2:
   resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
   integrity sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=
 
-debug@*, debug@^4.0.1:
+debug@*, debug@^4.0.1, debug@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.0.tgz#373687bffa678b38b1cd91f861b63850035ddc87"
   integrity sha512-heNPJUJIqC+xB6ayLAMHaIrmN9HKa7aQO8MGqKpvCA+uJYVcvR6l5kgdrhRuwPFHU7P5/A1w0BjByPHwpfTDKg==
@@ -10987,6 +11287,17 @@ hasha@^2.2.0:
     is-stream "^1.0.1"
     pinkie-promise "^2.0.0"
 
+hast-util-from-parse5@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/hast-util-from-parse5/-/hast-util-from-parse5-4.0.2.tgz#b7164a7ffc88da4f751dc7c2f801ff8d7c143bab"
+  integrity sha512-I6dtjsGtDqz4fmGSiFClFyiXdKhj5bPceS6intta7k/VDuiKz9P61C6hO6WMiNNmEm1b/EtBH8f+juvz4o0uwQ==
+  dependencies:
+    ccount "^1.0.3"
+    hastscript "^4.0.0"
+    property-information "^4.0.0"
+    web-namespaces "^1.1.2"
+    xtend "^4.0.1"
+
 hast-util-parse-selector@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/hast-util-parse-selector/-/hast-util-parse-selector-2.2.0.tgz#2175f18cdd697308fc3431d5c29a9e48dfa4817a"
@@ -11181,11 +11492,6 @@ html-minifier@^3.2.3, html-minifier@^3.5.20, html-minifier@^3.5.8:
     relateurl "0.2.x"
     uglify-js "3.4.x"
 
-html-tags@^1.0.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-1.2.0.tgz#c78de65b5663aa597989dd2b7ab49200d7e4db98"
-  integrity sha1-x43mW1Zjqll5id0rerSSANfk25g=
-
 html-tags@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-2.0.0.tgz#10b30a386085f43cede353cc8fa7cb0deeea668b"
@@ -11525,6 +11831,14 @@ import-cwd@^2.0.0:
   dependencies:
     import-from "^2.1.0"
 
+import-fresh@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-2.0.0.tgz#d81355c15612d386c61f9ddd3922d4304822a546"
+  integrity sha1-2BNVwVYS04bGH53dOSLUMEgipUY=
+  dependencies:
+    caller-path "^2.0.0"
+    resolve-from "^3.0.0"
+
 import-from@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/import-from/-/import-from-2.1.0.tgz#335db7f2a7affd53aaa471d4b8021dee36b7f3b1"
@@ -12063,13 +12377,6 @@ is-hidden@^1.0.1:
   resolved "https://registry.yarnpkg.com/is-hidden/-/is-hidden-1.1.1.tgz#82ee6a93aeef3fb007ad5b9457c0584d45329f38"
   integrity sha512-175UKecS8+U4hh2PSY0j4xnm2GKYzvSKnbh+naC93JjuBA7LgIo6YxlbcsSo6seFBdQO3RuIcH980yvqqD/2cA==
 
-is-html@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-html/-/is-html-1.1.0.tgz#e04f1c18d39485111396f9a0273eab51af218464"
-  integrity sha1-4E8cGNOUhRETlvmgJz6rUa8hhGQ=
-  dependencies:
-    html-tags "^1.0.0"
-
 is-installed-globally@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/is-installed-globally/-/is-installed-globally-0.1.0.tgz#0dfd98f5a9111716dd535dda6492f67bf3d25a80"
@@ -12774,16 +13081,6 @@ jest-get-type@^22.1.0:
   resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-22.4.3.tgz#e3a8504d8479342dd4420236b322869f18900ce4"
   integrity sha512-/jsz0Y+V29w1chdXVygEKSz2nBoHoYqNShPe+QgxSNjAuP1i8+k4LbQNrfoliKej0P45sivkSCh7yiD6ubHS3w==
 
-jest-glamor-react@^4.3.1:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/jest-glamor-react/-/jest-glamor-react-4.3.1.tgz#55b22050f8f97a7fe2748e494e0a24667d553190"
-  integrity sha512-jhpraTM+0MmbtseesLh+TKzmJR4bEbWUQOS5wPjeuUVYPMGnwzCQgwNs0T83PimOLULL5nflLah3i/0ODBQCfw==
-  dependencies:
-    chalk "^2.3.2"
-    css "^2.2.1"
-    is-html "^1.1.0"
-    pretty-format "^22.4.0"
-
 jest-haste-map@21.3.0-beta.15:
   version "21.3.0-beta.15"
   resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-21.3.0-beta.15.tgz#7e65c5d6383916e9ba45998a5544ce0228f7cc6b"
@@ -16840,7 +17137,7 @@ parse5@4.0.0:
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-4.0.0.tgz#6d78656e3da8d78b4ec0b906f7c08ef1dfe3f608"
   integrity sha512-VrZ7eOd3T1Fk4XWNXMgiGBK/z0MG48BWG2uQNU4I72fkQuKUTZpl+u9k+CxEG0twMVzSmXEEz12z5Fnw1jIQFA==
 
-parse5@5.1.0:
+parse5@5.1.0, parse5@^5.0.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.1.0.tgz#c59341c9723f414c452975564c7c00a68d58acd2"
   integrity sha512-fxNG2sQjHvlVAYmzBZS9YlDp6PTSSDwa98vkD4QgVDDCAo84z5X1t5XyJQ62ImdLXx5NdIIfihey6xpum9/gRQ==
@@ -17907,14 +18204,6 @@ pretty-format@21.3.0-beta.15:
     ansi-regex "^3.0.0"
     ansi-styles "^3.2.0"
 
-pretty-format@^22.4.0:
-  version "22.4.3"
-  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-22.4.3.tgz#f873d780839a9c02e9664c8a082e9ee79eaac16f"
-  integrity sha512-S4oT9/sT6MN7/3COoOy+ZJeA92VmOnveLHgrwBE3Z1W5N9S2A1QGNYiE1z75DAENbJrXXUb+OWXhpJcg05QKQQ==
-  dependencies:
-    ansi-regex "^3.0.0"
-    ansi-styles "^3.2.0"
-
 pretty-format@^23.6.0:
   version "23.6.0"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-23.6.0.tgz#5eaac8eeb6b33b987b7fe6097ea6a8a146ab5760"
@@ -18890,6 +19179,17 @@ react-scripts@^2.1.0:
   optionalDependencies:
     fsevents "1.2.4"
 
+react-syntax-highlighter@^10.0.0:
+  version "10.1.1"
+  resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-10.1.1.tgz#1bf7ad4f2f16d2978b04594407b670671b4d3316"
+  integrity sha512-2EzDjKuU51BuL9CZ5qfGJ9+6m9BKGm+IJODyeR7ANC3g3wQY1LPxEzo6vDPsdV1EzDbYUAAai3AYtSBaKVusuw==
+  dependencies:
+    babel-runtime "^6.18.0"
+    highlight.js "~9.12.0"
+    lowlight "~1.9.1"
+    prismjs "^1.8.4"
+    refractor "^2.4.1"
+
 react-syntax-highlighter@^8.0.1:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-8.1.0.tgz#59103ff17a828a27ed7c8f035ae2558f09b6b78c"
@@ -19402,6 +19702,15 @@ regjsparser@^0.3.0:
   dependencies:
     jsesc "~0.5.0"
 
+rehype-parse@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/rehype-parse/-/rehype-parse-5.0.0.tgz#a103e2d9ee1b3a0dba9223e6f73623b8396e3682"
+  integrity sha512-nv/i5olqfyhxu/LS89zHiMdDiHtRfxsXDAe/cC6covBYIiGVnX2xbU59H23deoeSVgORtaLvHNr6sekldmca6w==
+  dependencies:
+    hast-util-from-parse5 "^4.0.0"
+    parse5 "^5.0.0"
+    xtend "^4.0.1"
+
 relateurl@0.2.x:
   version "0.2.7"
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
@@ -21697,10 +22006,10 @@ svelte-loader@^2.11.0:
     require-relative "^0.8.7"
     svelte-dev-helper "^1.1.9"
 
-svelte@^2.15.2:
-  version "2.15.2"
-  resolved "https://registry.yarnpkg.com/svelte/-/svelte-2.15.2.tgz#6aaf4a10307409099ec30dd7c73f746fef32c949"
-  integrity sha512-l/YAQQ/ArmUTlEdspyLS7viFtKX0ZRKVmYeizAlvFoJ4vKos+7/aBD8xWxQTUd8EPh1JD95DVy7NK3h8+ITlxw==
+svelte@^2.15.3:
+  version "2.15.3"
+  resolved "https://registry.yarnpkg.com/svelte/-/svelte-2.15.3.tgz#d9ba5b48eae30f5501b3266c563add2399c67b40"
+  integrity sha512-0bKpXppM/YlPZ8F0mREaUYpE8Te11RvG62ttFr+n1U3G2qdr3cZzuXCnQMcVZukwAUJAjRM55OSH7FLmXnPGRA==
 
 svg-tags@^1.0.0:
   version "1.0.0"
@@ -21715,7 +22024,7 @@ svg-url-loader@^2.3.2:
     file-loader "1.1.11"
     loader-utils "1.1.0"
 
-svgo@^1.0.0, svgo@^1.0.5:
+svgo@^1.0.0, svgo@^1.0.5, svgo@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.1.1.tgz#12384b03335bcecd85cfa5f4e3375fed671cb985"
   integrity sha512-GBkJbnTuFpM4jFbiERHDWhZc/S/kpHToqmZag3aEBjPYK44JAN2QBjvrGIxLOoCyMZjuFQIfTO2eJd8uwLY/9g==
@@ -21868,7 +22177,7 @@ term-size@^1.2.0:
   dependencies:
     execa "^0.7.0"
 
-terser-webpack-plugin@1.1.0:
+terser-webpack-plugin@1.1.0, terser-webpack-plugin@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.1.0.tgz#cf7c25a1eee25bf121f4a587bb9e004e3f80e528"
   integrity sha512-61lV0DSxMAZ8AyZG7/A4a3UPlrbOBo8NIQ4tJzLPAdGOQ+yoNC7l5ijEow27lBAL2humer01KLS6bGIMYQxKoA==
@@ -22660,6 +22969,18 @@ unified@^7.0.0:
     vfile "^3.0.0"
     x-is-string "^0.1.0"
 
+unified@^7.0.1:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/unified/-/unified-7.0.2.tgz#16aa2748a7c936b80846cc69c580cd5ebd844532"
+  integrity sha512-H7HiczCdNcPrqy4meJPtlJSch9+hm6GXLQ9FFLOUiFI1DIUbjvBhMKJtQ7YCaBhEPVXZwwqNyiot9xBUEtmlbg==
+  dependencies:
+    bail "^1.0.0"
+    extend "^3.0.0"
+    is-plain-obj "^1.1.0"
+    trough "^1.0.0"
+    vfile "^3.0.0"
+    x-is-string "^0.1.0"
+
 union-value@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/union-value/-/union-value-1.0.0.tgz#5c71c34cb5bad5dcebe3ea0cd08207ba5aa1aea4"
@@ -23069,6 +23390,16 @@ vfile@^3.0.0:
     unist-util-stringify-position "^1.0.0"
     vfile-message "^1.0.0"
 
+vfile@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/vfile/-/vfile-3.0.1.tgz#47331d2abe3282424f4a4bb6acd20a44c4121803"
+  integrity sha512-y7Y3gH9BsUSdD4KzHsuMaCzRjglXN0W2EcMf0gpvu6+SbsGhMje7xDc8AEoeXy6mIwCKMI6BkjMsRjzQbhMEjQ==
+  dependencies:
+    is-buffer "^2.0.0"
+    replace-ext "1.0.0"
+    unist-util-stringify-position "^1.0.0"
+    vfile-message "^1.0.0"
+
 vhost@~3.0.1:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/vhost/-/vhost-3.0.2.tgz#2fb1decd4c466aa88b0f9341af33dc1aff2478d5"
@@ -23248,6 +23579,11 @@ weak@^1.0.1:
     bindings "^1.2.1"
     nan "^2.0.5"
 
+web-namespaces@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/web-namespaces/-/web-namespaces-1.1.2.tgz#c8dc267ab639505276bae19e129dbd6ae72b22b4"
+  integrity sha512-II+n2ms4mPxK+RnIxRPOw3zwF2jRscdJIUE9BfkKHm4FYEg9+biIoTMnaZF5MpemE3T+VhMLrhbyD4ilkPCSbg==
+
 webdriver-js-extender@2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/webdriver-js-extender/-/webdriver-js-extender-2.1.0.tgz#57d7a93c00db4cc8d556e4d3db4b5db0a80c3bb7"