diff --git a/.eslintignore b/.eslintignore
index 73cb24becbf2..af5321f2b3bb 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -10,6 +10,7 @@ lib/cli/test
 scripts/storage
 *.bundle.js
 *.js.map
+*.d.ts
 
 !.remarkrc.js
 !.babelrc.js
@@ -18,7 +19,3 @@ scripts/storage
 !.jest.config.js
 !.storybook
 
-REACT_NATIVE
-examples-native
-react-native
-ondevice-*
\ No newline at end of file
diff --git a/.github/automention.yml b/.github/automention.yml
index b137b453dbc3..d81044a919e5 100644
--- a/.github/automention.yml
+++ b/.github/automention.yml
@@ -5,7 +5,7 @@
 'app: polymer': ['stijnkoopal', 'ndelangen']
 'app: preact': ['BartWaardenburg']
 'app: react-native': ['benoitdion', 'gongreg']
-'app: react-native-server': ['benoitdion', 'igor-dv']
+'app: react-native-server': ['benoitdion', 'gongreg']
 'app: svelte': ['cam-stitt', 'plumpNation']
 'app: vue': ['backbone87', 'elevatebart', 'pksunkara']
 'api: addons': ['ndelangen']
diff --git a/CHANGELOG.md b/CHANGELOG.md
index ec565d470609..70df979a20ae 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,75 @@
+## 5.2.0-alpha.36 (July 5, 2019)
+
+### Features
+
+* Addon-docs: Added inline option to Story block ([#7308](https://github.com/storybookjs/storybook/pull/7308))
+* Addon-knobs: Ensure unique knob names across groups ([#6793](https://github.com/storybookjs/storybook/pull/6793))
+* Core: Enable webpack to rebuild changes in node_modules ([#6265](https://github.com/storybooorybook/pull/6265))
+* Addons: Disable option for addon tab ([#6923](https://github.com/storybookjs/storybook/pull/6923))
+
+### Bug Fixes
+
+* Fix lint error from #6923 ([#7311](https://github.com/storybookjs/storybook/pull/7311))
+* Addon-actions: fix serialization performance ([#7256](https://github.com/storybookjs/storybook/pull/7256))
+
+### Maintenance
+
+* Typescript: Migrate @storybook/addon-event ([#7190](https://github.com/storybookjs/storybook/pull/7190))
+* Typescript: Improve actions type ([#7012](https://github.com/storybookjs/storybook/pull/7012))
+
+## 5.2.0-alpha.35 (July 3, 2019)
+
+### Bug Fixes
+
+* React-Native: Fix null story check ([#7243](https://github.com/storybookjs/storybook/pull/7243))
+
+## 5.2.0-alpha.34 (July 2, 2019)
+
+### Bug Fixes
+
+* CLI: Fix `--preview-url` for static builds ([#7245](https://github.com/storybookjs/storybook/pull/7245))
+* Addon-docs: Fix non-React support & add Vue example ([#7222](https://github.com/storybookjs/storybook/pull/7222))
+* CLI: Move the free port logic so that loadOptions don't override it ([#7237](https://github.com/storybookjs/storybook/pull/7237))
+
+## 5.2.0-alpha.33 (July 1, 2019)
+
+### Features
+
+* CLI: Add `--preview-url` for custom preview ([#7235](https://github.com/storybookjs/storybook/pull/7235))
+
+### Bug Fixes
+
+* React-Native: Upgrade to new `story_store` API ([#7234](https://github.com/storybookjs/storybook/pull/7234))
+
+## 5.2.0-alpha.32 (June 29, 2019)
+
+### Features
+
+* Addon-docs: Add .story.mdx support to preset ([#7229](https://github.com/storybookjs/storybook/pull/7229))
+
+### Bug Fixes
+
+* React-native: Fix react native server ([#7187](https://github.com/storybookjs/storybook/pull/7187))
+* Addon-docs: Fix source-loader in monorepo examples ([#7214](https://github.com/storybookjs/storybook/pull/7214))
+
+### Maintenance
+
+* Addon-docs: Convert repo stories to new module format ([#7175](https://github.com/storybookjs/storybook/pull/7175))
+
+## 5.2.0-alpha.31 (June 27, 2019)
+
+### Breaking Changes
+
+* Module format: story field for name/parameters annotation ([#7202](https://github.com/storybookjs/storybook/pull/7202))
+
+### Features
+
+* Core: Story sorting ([#6472](https://github.com/storybookjs/storybook/pull/6472))
+
+### Maintenance
+
+* Addon-docs: Fix source-loader CI errors ([#7203](https://github.com/storybookjs/storybook/pull/7203))
+
 ## 5.2.0-alpha.30 (June 25, 2019)
 
 This release merges `release/docs-technical-preview` branch back into `next` through a series of PRs. It also contains other changes that came in on `next` since the last alpha.
@@ -34,6 +106,19 @@ This release merges `release/docs-technical-preview` branch back into `next` thr
 * Upgrade core-js to 3.x in devkits ([#7171](https://github.com/storybookjs/storybook/pull/7171))
 * UPGRADE lazy-universal-dotenv ([#7151](https://github.com/storybookjs/storybook/pull/7151))
 
+## 5.1.9 (June 20, 2019)
+
+### Bug Fixes
+
+* Core: Fix JSON babel config error reporting ([#7104](https://github.com/storybookjs/storybook/pull/7104))
+* UI: Fix about page version check message ([#7105](https://github.com/storybookjs/storybook/pull/7105))
+
+### Dependency Upgrades
+
+* Add missing dependencies to ui/react ([#7081](https://github.com/storybookjs/storybook/pull/7081))
+* UPGRADE lazy-universal-dotenv ([#7151](https://github.com/storybookjs/storybook/pull/7151))
+* Make compatible with yarn Pnp ([#6922](https://github.com/storybookjs/storybook/pull/6922))
+
 ## 5.2.0-alpha.29 (June 17, 2019)
 
 ### Features
@@ -65,160 +150,81 @@ Publish failed
 * CLI: improve bootstrap list ([#6993](https://github.com/storybookjs/storybook/pull/6993))
 * CLI: replaced merge-dirs dependency by fs-extra ([#7100](https://github.com/storybookjs/storybook/pull/7100))
 
-## 5.2.0-alpha.26 (June 14, 2019)
-
-- Merge in changes from 5.1.7/next branch.
-- Fix earlier merge problems relating to addon-docs:
-  - Restore `--docs` command-line functionality
-  - Fix refreshing docs page bug
-
-## 5.2.0-alpha.25 (June 14, 2019)
+## 5.1.8 (June 14, 2019)
 
-Publish failed
-
-## 5.2.0-alpha.24 (June 13, 2019)
-
-Merge in changes from 5.1.3/next branch.
+### Bug Fixes
 
-## 5.2.0-alpha.23 (June 10, 2019)
+* CLI: Fix RN template to not import addons ([#7096](https://github.com/storybookjs/storybook/pull/7096))
 
-Merge in changes from 5.1.3/next branch. Releasing from the addon-docs branch to keep things moving until we can merge addon-docs into next.
-
-## 5.2.0-alpha.22 (June 7, 2019)
+## 5.1.7 (June 14, 2019)
 
-- Merge in changes from 5.1.1
-- Addon-docs:
-  - Inline stories respect height prop
-  - Export Description block
+### Bug Fixes
 
-## 5.2.0-alpha.21 (June 2, 2019)
+* UI: Fix warning of loading prop not being a string ([#7080](https://github.com/storybookjs/storybook/pull/7080))
 
-- Core: Convert module format to use default export for metadata
-- Addon-docs: Compile MDX to default export modules format
-- Source-loader: Support parameter injection for default export metadata
+## 5.1.6 (June 14, 2019)
 
-## 5.2.0-alpha.20 (May 31, 2019)
+Publish failed
 
-- Addon-docs: Use Meta doc block instead of exporting componentMeta
+## 5.1.5 (June 14, 2019)
 
-## 5.2.0-alpha.19 (May 28, 2019)
+### Bug Fixes
 
-- Source-loader: Fix bad package dependencies
+* Core: Upgrade plugin core-js fix ([#7086](https://github.com/storybookjs/storybook/pull/7086))
+* UI: Fix sidebar loading visibility ([#7073](https://github.com/storybookjs/storybook/pull/7073))
+* UI: Fix unnecessary large bundlesize ([#7091](https://github.com/storybookjs/storybook/pull/7091))
+* Addon-contexts, RN-server: Add core-js dep ([#7094](https://github.com/storybookjs/storybook/pull/7094))
 
-## 5.2.0-alpha.18 (May 26, 2019)
-
-- Addon-docs: Codemod for adding component parameters
-- Core: Babel config loading bugfix ([#6878](https://github.com/storybookjs/storybook/pull/6878))
+## 5.2.0-alpha.26 (June 14, 2019)
 
-## 5.2.0-alpha.17 (May 26, 2019)
+- Merge in changes from 5.1.7/next branch.
+- Fix earlier merge problems relating to addon-docs:
+  - Restore `--docs` command-line functionality
+  - Fix refreshing docs page bug
 
-- Addon-docs: Refer to selected story/component with `id="."` / `of="."`
+## 5.2.0-alpha.25 (June 14, 2019)
 
-## 5.2.0-alpha.16 (May 25, 2019)
+Publish failed
 
-- Addon-docs: Auto-configure `inlineStories` & `getPropDefs` based on framework
+## 5.1.4 (June 13, 2019)
 
-## 5.2.0-alpha.15 (May 25, 2019)
+### Bug Fixes
 
-- Addon-docs: Expanded Vue support
-  - Props table support
-  - iframeHeight configuration parameter
+* Core: Fix core-js 3 errors ([#7051](https://github.com/storybookjs/storybook/pull/7051))
+* UI: Fix syntax highlighter plain text not visible ([#7057](https://github.com/storybookjs/storybook/pull/7057))
+* Addon-actions: Add default options to action(s) ([#6438](https://github.com/storybookjs/storybook/pull/6438))
 
-## 5.2.0-alpha.14 (May 25, 2019)
+### Dependency Upgrades
 
-- Addon-docs: Expanded source formats via `@storybook/source-loader`
-  - Legacy `storiesOf` format x (JS / TSX)
-  - Component modules format x (JS / TSX)
-  - Component MDX format
+* fix: add missing core-js dependency ([#7016](https://github.com/storybookjs/storybook/pull/7016))
+* chore: set react version to 16.8.3 to match react native ([#7008](https://github.com/storybookjs/storybook/pull/7008))
 
-## 5.2.0-alpha.13 (May 24, 2019)
+## 5.2.0-alpha.24 (June 13, 2019)
 
-- Addon-docs: Add documentation-only `--docs` option to build storybook
+Merge in changes from 5.1.3/next branch.
 
-## 5.2.0-alpha.12 (May 21, 2019)
+## 5.2.0-alpha.23 (June 10, 2019)
 
-- Addon-docs: Fix regression in preview source for legacy stories
+Merge in changes from 5.1.3/next branch. Releasing from the addon-docs branch to keep things moving until we can merge addon-docs into next.
 
-## 5.2.0-alpha.11 (May 21, 2019)
+## 5.2.0-alpha.22 (June 7, 2019)
 
+- Merge in changes from 5.1.1
 - Addon-docs:
-  - Source refer to stories by name
-  - Source support for multi-story previews
-  - Fix loader bug for plaintext stories
-
-## 5.2.0-alpha.10 (May 19, 2019)
-
-- Addon-docs: Display source dropdown in preview component
-
-## 5.2.0-alpha.9 (May 17, 2019)
-
-- Addon-docs bugfixes:
-  - Fix broken components stories
-  - Fix regression in iframe preview
-  - Fix docgen props block
-  - Fix margin styling on docs page
-
-## 5.2.0-alpha.8 (May 15, 2019)
-
-- Addon-docs: Optimize docs pane rerendering
-
-## 5.2.0-alpha.7 (May 15, 2019)
-
-- Addon-docs: Docs page bugfix
-- Addon-docs: Fix source block for legacy stories
-
-NOTE: use `@storybook/addon-storysource/loader` with option `injectParameters: true` for legacy source
-
-## 5.2.0-alpha.6 (May 14, 2019)
-
-- Addon-docs: Docs page content update
-- Addon-docs: Preview component redefinition
-
-#### Breaking changes
-
-Preview behavior has been updated. Docs page content has been updated.
-
-Before:
-
-- `<Story name="a">` defines a story, `<Preview id="x--a"/>` references it
-
-After:
-
-- `<Story name="a">` defines a story, `<Story id="x--a"/>` references it
-- `<Preview><Story .../><Story .../><Component/></Preview>` shows one or more stories in a grid
-
-## 5.2.0-alpha.5 (May 12, 2019)
-
-- Addon-docs: Description block refactor and bugfixes
-
-## 5.2.0-alpha.4 (May 11, 2019)
-
-- Addon-docs: Source, Props, DocsPage doc blocks
-
-#### Breaking changes
-
-- Doc blocks & presets have moved. Update your MDX stories and `presets.js` file accordingly:
-  - `import { Preview, Story } from '@storybook/addon-docs/blocks';
-  - `module.exports = ['@storybook/addon-docs/common/preset'];`
-
-## 5.2.0-alpha.3 (May 1, 2019)
-
-- Addon-docs: Add Story decorator and parameter support
-- Addon-docs: Remove need for extra project babelrc
+  - Inline stories respect height prop
+  - Export Description block
 
-## 5.2.0-alpha.2 (April 30, 2019)
+## 5.1.3 (June 6, 2019)
 
-- Addon-docs: Streamline setup, fix MDX dependencies, improve MDX import, and update guide
+### Bug Fixes
 
-## 5.2.0-alpha.0 (April 29, 2019)
+* UI: Fix links that are not working with plain left click ([#6970](https://github.com/storybookjs/storybook/pull/6970))
+* Core: Don't redefine `process` variable ([#6991](https://github.com/storybookjs/storybook/pull/6991))
+* Core: Don't mutate user's babel config ([#6987](https://github.com/storybookjs/storybook/pull/6987))
 
-Storybook Docs technical preview:
+## 5.1.2 (June 6, 2019)
 
-- Docs addon
-- MDX story format
-- Module story format
-- Load API
-- [Guide](https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing)
+Publish failed
 
 ## 5.1.1 (June 5, 2019)
 
@@ -264,6 +270,16 @@ Publish failed
 * Core: Fix webpack `process.*` variable definitions ([#6946](https://github.com/storybookjs/storybook/pull/6946))
 * Angular: Fix tsconfig.app.json detection for Angular 8 ([#6940](https://github.com/storybookjs/storybook/pull/6940))
 
+## 5.2.0-alpha.21 (June 2, 2019)
+
+- Core: Convert module format to use default export for metadata
+- Addon-docs: Compile MDX to default export modules format
+- Source-loader: Support parameter injection for default export metadata
+
+## 5.2.0-alpha.20 (May 31, 2019)
+
+- Addon-docs: Use Meta doc block instead of exporting componentMeta
+
 ## 5.1.0-rc.3 (May 29, 2019)
 
 ### Features
@@ -284,12 +300,46 @@ Publish failed
 * Bump ts-node from 8.1.0 to 8.2.0 ([#6890](https://github.com/storybookjs/storybook/pull/6890))
 * Bump svelte from 3.4.2 to 3.4.4 ([#6892](https://github.com/storybookjs/storybook/pull/6892))
 
+## 5.2.0-alpha.19 (May 28, 2019)
+
+- Source-loader: Fix bad package dependencies
+
 ## 5.1.0-rc.2 (May 27, 2019)
 
 ### Bug Fixes
 
 * Core: Fix JS/JSON loading babel config ([#6878](https://github.com/storybookjs/storybook/pull/6878))
 
+## 5.2.0-alpha.18 (May 26, 2019)
+
+- Addon-docs: Codemod for adding component parameters
+- Core: Babel config loading bugfix ([#6878](https://github.com/storybookjs/storybook/pull/6878))
+
+## 5.2.0-alpha.17 (May 26, 2019)
+
+- Addon-docs: Refer to selected story/component with `id="."` / `of="."`
+
+## 5.2.0-alpha.16 (May 25, 2019)
+
+- Addon-docs: Auto-configure `inlineStories` & `getPropDefs` based on framework
+
+## 5.2.0-alpha.15 (May 25, 2019)
+
+- Addon-docs: Expanded Vue support
+  - Props table support
+  - iframeHeight configuration parameter
+
+## 5.2.0-alpha.14 (May 25, 2019)
+
+- Addon-docs: Expanded source formats via `@storybook/source-loader`
+  - Legacy `storiesOf` format x (JS / TSX)
+  - Component modules format x (JS / TSX)
+  - Component MDX format
+
+## 5.2.0-alpha.13 (May 24, 2019)
+
+- Addon-docs: Add documentation-only `--docs` option to build storybook
+
 ## 5.1.0-rc.1 (May 24, 2019)
 
 ### Features
@@ -344,6 +394,29 @@ Publish failed
 * Bump svelte from 3.4.1 to 3.4.2 ([#6838](https://github.com/storybookjs/storybook/pull/6838))
 * Misc upgrades ([#6820](https://github.com/storybookjs/storybook/pull/6820))
 
+## 5.2.0-alpha.12 (May 21, 2019)
+
+- Addon-docs: Fix regression in preview source for legacy stories
+
+## 5.2.0-alpha.11 (May 21, 2019)
+
+- Addon-docs:
+  - Source refer to stories by name
+  - Source support for multi-story previews
+  - Fix loader bug for plaintext stories
+
+## 5.2.0-alpha.10 (May 19, 2019)
+
+- Addon-docs: Display source dropdown in preview component
+
+## 5.2.0-alpha.9 (May 17, 2019)
+
+- Addon-docs bugfixes:
+  - Fix broken components stories
+  - Fix regression in iframe preview
+  - Fix docgen props block
+  - Fix margin styling on docs page
+
 ## 5.1.0-beta.1 (May 16, 2019)
 
 ### Bug Fixes
@@ -361,6 +434,49 @@ Publish failed
 
 * Bump fs-extra from 7.0.1 to 8.0.1 ([#6776](https://github.com/storybookjs/storybook/pull/6776))
 
+## 5.2.0-alpha.8 (May 15, 2019)
+
+- Addon-docs: Optimize docs pane rerendering
+
+## 5.2.0-alpha.7 (May 15, 2019)
+
+- Addon-docs: Docs page bugfix
+- Addon-docs: Fix source block for legacy stories
+
+NOTE: use `@storybook/addon-storysource/loader` with option `injectParameters: true` for legacy source
+
+## 5.2.0-alpha.6 (May 14, 2019)
+
+- Addon-docs: Docs page content update
+- Addon-docs: Preview component redefinition
+
+#### Breaking changes
+
+Preview behavior has been updated. Docs page content has been updated.
+
+Before:
+
+- `<Story name="a">` defines a story, `<Preview id="x--a"/>` references it
+
+After:
+
+- `<Story name="a">` defines a story, `<Story id="x--a"/>` references it
+- `<Preview><Story .../><Story .../><Component/></Preview>` shows one or more stories in a grid
+
+## 5.2.0-alpha.5 (May 12, 2019)
+
+- Addon-docs: Description block refactor and bugfixes
+
+## 5.2.0-alpha.4 (May 11, 2019)
+
+- Addon-docs: Source, Props, DocsPage doc blocks
+
+#### Breaking changes
+
+- Doc blocks & presets have moved. Update your MDX stories and `presets.js` file accordingly:
+  - `import { Preview, Story } from '@storybook/addon-docs/blocks';
+  - `module.exports = ['@storybook/addon-docs/common/preset'];`
+
 ## 5.1.0-beta.0 (May 10, 2019)
 
 Welcome to the 5.1 beta! Feature development's done; `beta.0` kicks off the stabilization process for the 5.1 final release. 🚀
@@ -426,6 +542,25 @@ Failed publish
 
 - CLI: Refactor how we install dev dependencies in cli ([#6695](https://github.com/storybookjs/storybook/pull/6695))
 
+## 5.2.0-alpha.3 (May 1, 2019)
+
+- Addon-docs: Add Story decorator and parameter support
+- Addon-docs: Remove need for extra project babelrc
+
+## 5.2.0-alpha.2 (April 30, 2019)
+
+- Addon-docs: Streamline setup, fix MDX dependencies, improve MDX import, and update guide
+
+## 5.2.0-alpha.0 (April 29, 2019)
+
+Storybook Docs technical preview:
+
+- Docs addon
+- MDX story format
+- Module story format
+- Load API
+- [Guide](https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing)
+
 ## 5.0.11 (April 28, 2019)
 
 ### Bug Fixes
diff --git a/MIGRATION.md b/MIGRATION.md
index 593bc601f8ee..9d1c4b5985e1 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1,62 +1,66 @@
 # Migration
 
-- [From version 5.1.x to 5.2.x](#from-version-51x-to-52x)
-  - [Docs mode docgen](#docs-mode-docgen)
-- [From version 5.0.x to 5.1.x](#from-version-50x-to-51x)
-  - [React native server](#react-native-server)
-  - [Angular 7](#angular-7)
-  - [CoreJS 3](#corejs-3)
-- [From version 5.0.1 to 5.0.2](#from-version-501-to-502)
-  - [Deprecate webpack extend mode](#deprecate-webpack-extend-mode)
-- [From version 4.1.x to 5.0.x](#from-version-41x-to-50x)
-  - [Webpack config simplification](#webpack-config-simplification)
-  - [Theming overhaul](#theming-overhaul)
-  - [Story hierarchy defaults](#story-hierarchy-defaults)
-  - [Options addon deprecated](#options-addon-deprecated)
-  - [Individual story decorators](#individual-story-decorators)
-  - [Addon backgrounds uses parameters](#addon-backgrounds-uses-parameters)
-  - [Addon cssresources name attribute renamed](#addon-cssresources-name-attribute-renamed)
-  - [Addon viewport uses parameters](#addon-viewport-uses-parameters)
-  - [Addon a11y uses parameters](#addon-a11y-uses-parameters-decorator-renamed)
-  - [New keyboard shortcuts defaults](#new-keyboard-shortcuts-defaults)
-  - [New URL structure](#new-url-structure)
-  - [Vue integration](#vue-integration)
-- [From version 4.0.x to 4.1.x](#from-version-40x-to-41x)
-  - [Private addon config](#private-addon-config)
-  - [React 15.x](#react-15x)
-- [From version 3.4.x to 4.0.x](#from-version-34x-to-40x)
-  - [React 16.3+](#react-163)
-  - [Generic addons](#generic-addons)
-  - [Knobs select ordering](#knobs-select-ordering)
-  - [Knobs URL parameters](#knobs-url-parameters)
-  - [Keyboard shortcuts moved](#keyboard-shortcuts-moved)
-  - [Removed addWithInfo](#removed-addwithinfo)
-  - [Removed RN packager](#removed-rn-packager)
-  - [Removed RN addons](#removed-rn-addons)
-  - [Storyshots Changes](#storyshots-changes)
-  - [Webpack 4](#webpack-4)
-  - [Babel 7](#babel-7)
-  - [Create-react-app](#create-react-app)
-    - [Upgrade CRA1 to babel 7](#upgrade-cra1-to-babel-7)
-    - [Migrate CRA1 while keeping babel 6](#migrate-cra1-while-keeping-babel-6)
-  - [start-storybook opens browser](#start-storybook-opens-browser)
-  - [CLI Rename](#cli-rename)
-  - [Addon story parameters](#addon-story-parameters)
-- [From version 3.3.x to 3.4.x](#from-version-33x-to-34x)
-- [From version 3.2.x to 3.3.x](#from-version-32x-to-33x)
-  - [`babel-core` is now a peer dependency (#2494)](#babel-core-is-now-a-peer-dependency-2494)
-  - [Base webpack config now contains vital plugins (#1775)](#base-webpack-config-now-contains-vital-plugins-1775)
-  - [Refactored Knobs](#refactored-knobs)
-- [From version 3.1.x to 3.2.x](#from-version-31x-to-32x)
-  - [Moved TypeScript addons definitions](#moved-typescript-addons-definitions)
-  - [Updated Addons API](#updated-addons-api)
-- [From version 3.0.x to 3.1.x](#from-version-30x-to-31x)
-  - [Moved TypeScript definitions](#moved-typescript-definitions)
-  - [Deprecated head.html](#deprecated-headhtml)
-- [From version 2.x.x to 3.x.x](#from-version-2xx-to-3xx)
-  - [Webpack upgrade](#webpack-upgrade)
-  - [Packages renaming](#packages-renaming)
-  - [Deprecated embedded addons](#deprecated-embedded-addons)
+- [Migration](#Migration)
+  - [From version 5.1.x to 5.2.x](#From-version-51x-to-52x)
+    - [Docs mode docgen](#Docs-mode-docgen)
+    - [storySort option](#storySort-option)
+  - [From version 5.0.x to 5.1.x](#From-version-50x-to-51x)
+    - [React native server](#React-native-server)
+    - [Angular 7](#Angular-7)
+    - [CoreJS 3](#CoreJS-3)
+  - [From version 5.0.1 to 5.0.2](#From-version-501-to-502)
+    - [Deprecate webpack extend mode](#Deprecate-webpack-extend-mode)
+  - [From version 4.1.x to 5.0.x](#From-version-41x-to-50x)
+    - [sortStoriesByKind](#sortStoriesByKind)
+  - [Webpack config simplification](#Webpack-config-simplification)
+  - [Theming overhaul](#Theming-overhaul)
+  - [Story hierarchy defaults](#Story-hierarchy-defaults)
+  - [Options addon deprecated](#Options-addon-deprecated)
+  - [Individual story decorators](#Individual-story-decorators)
+  - [Addon backgrounds uses parameters](#Addon-backgrounds-uses-parameters)
+  - [Addon cssresources name attribute renamed](#Addon-cssresources-name-attribute-renamed)
+  - [Addon viewport uses parameters](#Addon-viewport-uses-parameters)
+  - [Addon a11y uses parameters, decorator renamed](#Addon-a11y-uses-parameters-decorator-renamed)
+  - [New keyboard shortcuts defaults](#New-keyboard-shortcuts-defaults)
+  - [New URL structure](#New-URL-structure)
+  - [Rename of the `--secure` cli parameter to `--https`](#Rename-of-the---secure-cli-parameter-to---https)
+  - [Vue integration](#Vue-integration)
+  - [From version 4.0.x to 4.1.x](#From-version-40x-to-41x)
+  - [Private addon config](#Private-addon-config)
+  - [React 15.x](#React-15x)
+  - [From version 3.4.x to 4.0.x](#From-version-34x-to-40x)
+    - [React 16.3+](#React-163)
+    - [Generic addons](#Generic-addons)
+    - [Knobs select ordering](#Knobs-select-ordering)
+    - [Knobs URL parameters](#Knobs-URL-parameters)
+    - [Keyboard shortcuts moved](#Keyboard-shortcuts-moved)
+    - [Removed addWithInfo](#Removed-addWithInfo)
+    - [Removed RN packager](#Removed-RN-packager)
+    - [Removed RN addons](#Removed-RN-addons)
+    - [Storyshots Changes](#Storyshots-Changes)
+    - [Webpack 4](#Webpack-4)
+    - [Babel 7](#Babel-7)
+    - [Create-react-app](#Create-react-app)
+      - [Upgrade CRA1 to babel 7](#Upgrade-CRA1-to-babel-7)
+      - [Migrate CRA1 while keeping babel 6](#Migrate-CRA1-while-keeping-babel-6)
+    - [start-storybook opens browser](#start-storybook-opens-browser)
+    - [CLI Rename](#CLI-Rename)
+    - [Addon story parameters](#Addon-story-parameters)
+  - [From version 3.3.x to 3.4.x](#From-version-33x-to-34x)
+  - [From version 3.2.x to 3.3.x](#From-version-32x-to-33x)
+    - [`babel-core` is now a peer dependency (#2494)](#babel-core-is-now-a-peer-dependency-2494)
+    - [Base webpack config now contains vital plugins (#1775)](#Base-webpack-config-now-contains-vital-plugins-1775)
+    - [Refactored Knobs](#Refactored-Knobs)
+  - [From version 3.1.x to 3.2.x](#From-version-31x-to-32x)
+    - [Moved TypeScript addons definitions](#Moved-TypeScript-addons-definitions)
+    - [Updated Addons API](#Updated-Addons-API)
+  - [From version 3.0.x to 3.1.x](#From-version-30x-to-31x)
+    - [Moved TypeScript definitions](#Moved-TypeScript-definitions)
+    - [Deprecated head.html](#Deprecated-headhtml)
+  - [From version 2.x.x to 3.x.x](#From-version-2xx-to-3xx)
+    - [Webpack upgrade](#Webpack-upgrade)
+    - [Packages renaming](#Packages-renaming)
+    - [Deprecated embedded addons](#Deprecated-embedded-addons)
 
 ## From version 5.1.x to 5.2.x
 
@@ -67,6 +71,20 @@ This isn't a breaking change per se, because `addon-docs` is a new feature. Howe
 1. Support for only one prop table
 2. Prop table docgen info should be stored on the component and not in the global variable `STORYBOOK_REACT_CLASSES` as before.
 
+### storySort option
+
+In 5.0.x the global option `sortStoriesByKind` option was [inadverttly removed](#sortstoriesbykind). In 5.2 we've introduced a new option, `storySort`, to replace it. `storySort` takes a comparator function, so it is strictly more powerful than `sortStoriesByKind`.
+
+For example, here's how to sort by story ID using `storySort`:
+
+```js
+addParameters({
+  options: {
+    storySort: (a, b) => a[1].id.localeCompare(b[1].id),
+  },
+});
+```
+
 ## From version 5.0.x to 5.1.x
 
 ### React native server
diff --git a/addons/a11y/package.json b/addons/a11y/package.json
index 7605352ad11c..455f356162db 100644
--- a/addons/a11y/package.json
+++ b/addons/a11y/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "a11y addon for storybook",
   "keywords": [
     "a11y",
@@ -26,12 +26,12 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.30",
-    "@storybook/api": "5.2.0-alpha.30",
-    "@storybook/client-logger": "5.2.0-alpha.30",
-    "@storybook/components": "5.2.0-alpha.30",
-    "@storybook/core-events": "5.2.0-alpha.30",
-    "@storybook/theming": "5.2.0-alpha.30",
+    "@storybook/addons": "5.2.0-alpha.36",
+    "@storybook/api": "5.2.0-alpha.36",
+    "@storybook/client-logger": "5.2.0-alpha.36",
+    "@storybook/components": "5.2.0-alpha.36",
+    "@storybook/core-events": "5.2.0-alpha.36",
+    "@storybook/theming": "5.2.0-alpha.36",
     "axe-core": "^3.2.2",
     "common-tags": "^1.8.0",
     "core-js": "^3.0.1",
diff --git a/addons/a11y/src/register.tsx b/addons/a11y/src/register.tsx
index a0995ab4fcee..9b360ec97d4c 100644
--- a/addons/a11y/src/register.tsx
+++ b/addons/a11y/src/register.tsx
@@ -2,7 +2,7 @@ import React, { Fragment, FunctionComponent } from 'react';
 import { styled } from '@storybook/theming';
 
 import { addons, types } from '@storybook/addons';
-import { ADDON_ID, PANEL_ID } from './constants';
+import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
 import { ColorBlindness } from './components/ColorBlindness';
 import { A11YPanel } from './components/A11YPanel';
 
@@ -94,6 +94,7 @@ addons.register(ADDON_ID, api => {
     title: 'Accessibility',
     type: types.PANEL,
     render: ({ active, key }) => <A11YPanel key={key} api={api} active={active} />,
+    paramKey: PARAM_KEY,
   });
 
   addons.add(PANEL_ID, {
diff --git a/addons/actions/package.json b/addons/actions/package.json
index 8c9d126aa810..e0defa858bc7 100644
--- a/addons/actions/package.json
+++ b/addons/actions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "Action Logger addon for storybook",
   "keywords": [
     "storybook"
@@ -21,11 +21,11 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.30",
-    "@storybook/api": "5.2.0-alpha.30",
-    "@storybook/components": "5.2.0-alpha.30",
-    "@storybook/core-events": "5.2.0-alpha.30",
-    "@storybook/theming": "5.2.0-alpha.30",
+    "@storybook/addons": "5.2.0-alpha.36",
+    "@storybook/api": "5.2.0-alpha.36",
+    "@storybook/components": "5.2.0-alpha.36",
+    "@storybook/core-events": "5.2.0-alpha.36",
+    "@storybook/theming": "5.2.0-alpha.36",
     "core-js": "^3.0.1",
     "fast-deep-equal": "^2.0.1",
     "global": "^4.3.2",
diff --git a/addons/actions/src/constants.ts b/addons/actions/src/constants.ts
index 1bc018e8d9ba..9bc6f11ef5c4 100644
--- a/addons/actions/src/constants.ts
+++ b/addons/actions/src/constants.ts
@@ -1,3 +1,4 @@
+export const PARAM_KEY = 'actions';
 export const ADDON_ID = 'storybook/actions';
 export const PANEL_ID = `${ADDON_ID}/panel`;
 export const EVENT_ID = `${ADDON_ID}/action-event`;
diff --git a/addons/actions/src/manager.tsx b/addons/actions/src/manager.tsx
index be1e6f8e1261..d77272be077b 100644
--- a/addons/actions/src/manager.tsx
+++ b/addons/actions/src/manager.tsx
@@ -1,13 +1,14 @@
 import React from 'react';
 import addons from '@storybook/addons';
 import ActionLogger from './containers/ActionLogger';
-import { ADDON_ID, PANEL_ID } from '.';
+import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
 
 export function register() {
   addons.register(ADDON_ID, api => {
     addons.addPanel(PANEL_ID, {
       title: 'Actions',
       render: ({ active, key }) => <ActionLogger key={key} api={api} active={active} />,
+      paramKey: PARAM_KEY,
     });
   });
 }
diff --git a/addons/actions/src/models/ActionOptions.ts b/addons/actions/src/models/ActionOptions.ts
index 548c9c5075bb..c4a838b17c25 100644
--- a/addons/actions/src/models/ActionOptions.ts
+++ b/addons/actions/src/models/ActionOptions.ts
@@ -2,4 +2,5 @@ export interface ActionOptions {
   depth?: number;
   clearOnStoryChange?: boolean;
   limit?: number;
+  allowFunction?: boolean;
 }
diff --git a/addons/actions/src/models/ActionsFunction.ts b/addons/actions/src/models/ActionsFunction.ts
new file mode 100644
index 000000000000..8c870cdf5ad1
--- /dev/null
+++ b/addons/actions/src/models/ActionsFunction.ts
@@ -0,0 +1,81 @@
+import { ActionOptions } from './ActionOptions';
+import { ActionsMap } from './ActionsMap';
+
+export interface ActionsFunction {
+  <T extends string>(handlerMap: Record<T, string>, options?: ActionOptions): ActionsMap<T>;
+  <T extends string>(...handlers: T[]): ActionsMap<T>;
+
+  <T extends string>(handler1: T, options?: ActionOptions): ActionsMap<T>;
+  <T extends string>(handler1: T, handler2: T, options?: ActionOptions): ActionsMap<T>;
+  <T extends string>(handler1: T, handler2: T, handler3: T, options?: ActionOptions): ActionsMap<T>;
+  <T extends string>(
+    handler1: T,
+    handler2: T,
+    handler3: T,
+    handler4: T,
+    options?: ActionOptions
+  ): ActionsMap<T>;
+  <T extends string>(
+    handler1: T,
+    handler2: T,
+    handler3: T,
+    handler4: T,
+    handler5: T,
+    options?: ActionOptions
+  ): ActionsMap<T>;
+  <T extends string>(
+    handler1: T,
+    handler2: T,
+    handler3: T,
+    handler4: T,
+    handler5: T,
+    handler6: T,
+    options?: ActionOptions
+  ): ActionsMap<T>;
+  <T extends string>(
+    handler1: T,
+    handler2: T,
+    handler3: T,
+    handler4: T,
+    handler5: T,
+    handler6: T,
+    handler7: T,
+    options?: ActionOptions
+  ): ActionsMap<T>;
+  <T extends string>(
+    handler1: T,
+    handler2: T,
+    handler3: T,
+    handler4: T,
+    handler5: T,
+    handler6: T,
+    handler7: T,
+    handler8: T,
+    options?: ActionOptions
+  ): ActionsMap<T>;
+  <T extends string>(
+    handler1: T,
+    handler2: T,
+    handler3: T,
+    handler4: T,
+    handler5: T,
+    handler6: T,
+    handler7: T,
+    handler8: T,
+    handler9: T,
+    options?: ActionOptions
+  ): ActionsMap<T>;
+  <T extends string>(
+    handler1: T,
+    handler2: T,
+    handler3: T,
+    handler4: T,
+    handler5: T,
+    handler6: T,
+    handler7: T,
+    handler8: T,
+    handler9: T,
+    handler10: T,
+    options?: ActionOptions
+  ): ActionsMap<T>;
+}
diff --git a/addons/actions/src/models/ActionsMap.ts b/addons/actions/src/models/ActionsMap.ts
index d7d1b6f05a37..7dde0c7c0ddd 100644
--- a/addons/actions/src/models/ActionsMap.ts
+++ b/addons/actions/src/models/ActionsMap.ts
@@ -1,5 +1,3 @@
 import { HandlerFunction } from './HandlerFunction';
 
-export interface ActionsMap {
-  [key: string]: HandlerFunction;
-}
+export type ActionsMap<T extends string = string> = Record<T, HandlerFunction>;
diff --git a/addons/actions/src/models/index.ts b/addons/actions/src/models/index.ts
index eb72774241b1..d8c7de6271d0 100644
--- a/addons/actions/src/models/index.ts
+++ b/addons/actions/src/models/index.ts
@@ -1,4 +1,5 @@
 export * from './ActionDisplay';
+export * from './ActionsFunction';
 export * from './ActionOptions';
 export * from './ActionsMap';
 export * from './DecoratorFunction';
diff --git a/addons/actions/src/preview/__tests__/action.test.js b/addons/actions/src/preview/__tests__/action.test.js
index 75128b8b5c25..36a954efdb58 100644
--- a/addons/actions/src/preview/__tests__/action.test.js
+++ b/addons/actions/src/preview/__tests__/action.test.js
@@ -91,3 +91,62 @@ describe('Depth config', () => {
     });
   });
 });
+
+describe('allowFunction config', () => {
+  it('with global allowFunction false', () => {
+    const channel = createChannel();
+
+    const allowFunction = false;
+
+    configureActions({
+      allowFunction,
+    });
+
+    action('test-action')({
+      root: {
+        one: {
+          a: 1,
+          b: () => 'foo',
+        },
+      },
+    });
+
+    expect(getChannelData(channel)[0]).toEqual({
+      root: {
+        one: {
+          a: 1,
+          b: expect.any(Function),
+        },
+      },
+    });
+  });
+
+  // TODO: this test is pretty pointless, as the real channel isn't used, nothing is changed
+  it('with global allowFunction true', () => {
+    const channel = createChannel();
+
+    const allowFunction = true;
+
+    configureActions({
+      allowFunction,
+    });
+
+    action('test-action')({
+      root: {
+        one: {
+          a: 1,
+          b: () => 'foo',
+        },
+      },
+    });
+
+    expect(getChannelData(channel)[0]).toEqual({
+      root: {
+        one: {
+          a: 1,
+          b: expect.any(Function),
+        },
+      },
+    });
+  });
+});
diff --git a/addons/actions/src/preview/action.ts b/addons/actions/src/preview/action.ts
index f24843595593..1a3642325579 100644
--- a/addons/actions/src/preview/action.ts
+++ b/addons/actions/src/preview/action.ts
@@ -22,6 +22,7 @@ export function action(name: string, options: ActionOptions = {}): HandlerFuncti
       options: {
         ...actionOptions,
         depth: minDepth + (actionOptions.depth || 3),
+        allowFunction: actionOptions.allowFunction || false,
       },
     };
     channel.emit(EVENT_ID, actionDisplayToEmit);
diff --git a/addons/actions/src/preview/actions.ts b/addons/actions/src/preview/actions.ts
index 416440a66cee..41c6d077a6a4 100644
--- a/addons/actions/src/preview/actions.ts
+++ b/addons/actions/src/preview/actions.ts
@@ -1,8 +1,8 @@
 import { action } from './action';
-import { ActionOptions, ActionsMap } from '../models';
+import { ActionsFunction, ActionOptions, ActionsMap } from '../models';
 import { config } from './configureActions';
 
-export function actions(...args: any[]): ActionsMap {
+export const actions: ActionsFunction = (...args: any[]) => {
   let options: ActionOptions = config;
   const names = args;
   // last argument can be options
@@ -26,4 +26,4 @@ export function actions(...args: any[]): ActionsMap {
     actionsObject[name] = action(namesObject[name], options);
   });
   return actionsObject;
-}
+};
diff --git a/addons/backgrounds/package.json b/addons/backgrounds/package.json
index 47835f1e5f12..83f032a17cb3 100644
--- a/addons/backgrounds/package.json
+++ b/addons/backgrounds/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "A storybook addon to show different backgrounds for your preview",
   "keywords": [
     "addon",
@@ -25,12 +25,12 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.30",
-    "@storybook/api": "5.2.0-alpha.30",
-    "@storybook/client-logger": "5.2.0-alpha.30",
-    "@storybook/components": "5.2.0-alpha.30",
-    "@storybook/core-events": "5.2.0-alpha.30",
-    "@storybook/theming": "5.2.0-alpha.30",
+    "@storybook/addons": "5.2.0-alpha.36",
+    "@storybook/api": "5.2.0-alpha.36",
+    "@storybook/client-logger": "5.2.0-alpha.36",
+    "@storybook/components": "5.2.0-alpha.36",
+    "@storybook/core-events": "5.2.0-alpha.36",
+    "@storybook/theming": "5.2.0-alpha.36",
     "core-js": "^3.0.1",
     "memoizerific": "^1.11.3",
     "react": "^16.8.3",
diff --git a/addons/centered/package.json b/addons/centered/package.json
index 1e74c0af8fb5..aaf82a990dd6 100644
--- a/addons/centered/package.json
+++ b/addons/centered/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-centered",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "Storybook decorator to center components",
   "keywords": [
     "addon",
@@ -28,9 +28,12 @@
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
-    "@types/mithril": "^1.1.16"
+    "@types/mithril": "^1.1.16",
+    "mithril": "*",
+    "preact": "*",
+    "react": "*"
   },
-  "optionalDependencies": {
+  "peerDependencies": {
     "mithril": "*",
     "preact": "*",
     "react": "*"
diff --git a/addons/contexts/package.json b/addons/contexts/package.json
index fef15dd8e282..6ee78d994d4a 100644
--- a/addons/contexts/package.json
+++ b/addons/contexts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-contexts",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "Storybook Addon Contexts",
   "keywords": [
     "storybook",
@@ -28,17 +28,20 @@
     "dev:check-types": "tsc --noEmit"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.30",
-    "@storybook/api": "5.2.0-alpha.30",
-    "@storybook/components": "5.2.0-alpha.30",
-    "@storybook/core-events": "5.2.0-alpha.30",
+    "@storybook/addons": "5.2.0-alpha.36",
+    "@storybook/api": "5.2.0-alpha.36",
+    "@storybook/components": "5.2.0-alpha.36",
+    "@storybook/core-events": "5.2.0-alpha.36",
     "core-js": "^3.0.1"
   },
   "peerDependencies": {
     "global": "*",
-    "qs": "*"
+    "qs": "*",
+    "preact": "*",
+    "react": "*",
+    "vue": "*"
   },
-  "optionalDependencies": {
+  "devDependencies": {
     "preact": "*",
     "react": "*",
     "vue": "*"
diff --git a/addons/cssresources/package.json b/addons/cssresources/package.json
index 65652d32938e..483e88cad34a 100644
--- a/addons/cssresources/package.json
+++ b/addons/cssresources/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-cssresources",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "A storybook addon to switch between css resources at runtime for your story",
   "keywords": [
     "addon",
@@ -25,10 +25,10 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.30",
-    "@storybook/api": "5.2.0-alpha.30",
-    "@storybook/components": "5.2.0-alpha.30",
-    "@storybook/core-events": "5.2.0-alpha.30",
+    "@storybook/addons": "5.2.0-alpha.36",
+    "@storybook/api": "5.2.0-alpha.36",
+    "@storybook/components": "5.2.0-alpha.36",
+    "@storybook/core-events": "5.2.0-alpha.36",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "react": "^16.8.3"
diff --git a/addons/cssresources/src/register.tsx b/addons/cssresources/src/register.tsx
index 4c893c5ccc92..4366ea61801a 100644
--- a/addons/cssresources/src/register.tsx
+++ b/addons/cssresources/src/register.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { addons, types } from '@storybook/addons';
 
-import { ADDON_ID, PANEL_ID } from './constants';
+import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
 import { CssResourcePanel } from './css-resource-panel';
 
 addons.register(ADDON_ID, api => {
@@ -10,5 +10,6 @@ addons.register(ADDON_ID, api => {
     type: types.PANEL,
     title: 'CSS resources',
     render: ({ active }) => <CssResourcePanel key={PANEL_ID} api={api} active={active} />,
+    paramKey: PARAM_KEY,
   });
 });
diff --git a/addons/design-assets/package.json b/addons/design-assets/package.json
index 67c1a2b18489..f7a97800c79d 100644
--- a/addons/design-assets/package.json
+++ b/addons/design-assets/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-design-assets",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "Design asset preview for storybook",
   "keywords": [
     "addon",
@@ -27,12 +27,12 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.30",
-    "@storybook/api": "5.2.0-alpha.30",
-    "@storybook/client-logger": "5.2.0-alpha.30",
-    "@storybook/components": "5.2.0-alpha.30",
-    "@storybook/core-events": "5.2.0-alpha.30",
-    "@storybook/theming": "5.2.0-alpha.30",
+    "@storybook/addons": "5.2.0-alpha.36",
+    "@storybook/api": "5.2.0-alpha.36",
+    "@storybook/client-logger": "5.2.0-alpha.36",
+    "@storybook/components": "5.2.0-alpha.36",
+    "@storybook/core-events": "5.2.0-alpha.36",
+    "@storybook/theming": "5.2.0-alpha.36",
     "common-tags": "^1.8.0",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
diff --git a/addons/design-assets/src/register.tsx b/addons/design-assets/src/register.tsx
index 61fda7a988db..fb903ec514e5 100644
--- a/addons/design-assets/src/register.tsx
+++ b/addons/design-assets/src/register.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import { addons, types } from '@storybook/addons';
 import { AddonPanel } from '@storybook/components';
-import { ADDON_ID, PANEL_ID } from './constants';
+import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
 import { Panel } from './panel';
 
 addons.register(ADDON_ID, () => {
@@ -14,5 +14,6 @@ addons.register(ADDON_ID, () => {
         <Panel />
       </AddonPanel>
     ),
+    paramKey: PARAM_KEY,
   });
 });
diff --git a/addons/docs/__snapshots__/mdx-compiler-plugin.test.js.snap b/addons/docs/__snapshots__/mdx-compiler-plugin.test.js.snap
index 39e17c6b1afe..34e98971afbf 100644
--- a/addons/docs/__snapshots__/mdx-compiler-plugin.test.js.snap
+++ b/addons/docs/__snapshots__/mdx-compiler-plugin.test.js.snap
@@ -90,7 +90,8 @@ function MDXContent({ components, ...props }) {
 MDXContent.isMDXComponent = true;
 
 export const one = () => <Button>One</Button>;
-one.parameters = { mdxSource: \`<Button>One</Button>\` };
+one.story = {};
+one.story.parameters = { mdxSource: \`<Button>One</Button>\` };
 
 const componentMeta = {
   title: 'Button',
@@ -159,11 +160,13 @@ function MDXContent({ components, ...props }) {
 MDXContent.isMDXComponent = true;
 
 export const one = () => <Button>One</Button>;
-one.parameters = { mdxSource: \`<Button>One</Button>\` };
+one.story = {};
+one.story.parameters = { mdxSource: \`<Button>One</Button>\` };
 
 export const helloStory = () => <Button>Hello button</Button>;
-helloStory.title = 'hello story';
-helloStory.parameters = { mdxSource: \`<Button>Hello button</Button>\` };
+helloStory.story = {};
+helloStory.story.name = 'hello story';
+helloStory.story.parameters = { mdxSource: \`<Button>Hello button</Button>\` };
 
 const componentMeta = { title: 'Button', includeStories: ['one', 'helloStory'] };
 
@@ -229,8 +232,9 @@ export const toStorybook = () => ({
     declarations: [Welcome],
   },
 });
-toStorybook.title = 'to storybook';
-toStorybook.parameters = {
+toStorybook.story = {};
+toStorybook.story.name = 'to storybook';
+toStorybook.story.parameters = {
   mdxSource: \`{
   template: \\\\\`<storybook-welcome-component (showApp)=\\"showApp()\\"></storybook-welcome-component>\\\\\`,
   props: {
@@ -304,12 +308,14 @@ function MDXContent({ components, ...props }) {
 MDXContent.isMDXComponent = true;
 
 export const componentNotes = () => <Button>Component notes</Button>;
-componentNotes.title = 'component notes';
-componentNotes.parameters = { mdxSource: \`<Button>Component notes</Button>\` };
+componentNotes.story = {};
+componentNotes.story.name = 'component notes';
+componentNotes.story.parameters = { mdxSource: \`<Button>Component notes</Button>\` };
 
 export const storyNotes = () => <Button>Story notes</Button>;
-storyNotes.title = 'story notes';
-storyNotes.parameters = {
+storyNotes.story = {};
+storyNotes.story.name = 'story notes';
+storyNotes.story.parameters = {
   mdxSource: \`<Button>Story notes</Button>\`,
   ...{
     notes: 'story notes',
@@ -385,11 +391,13 @@ function MDXContent({ components, ...props }) {
 MDXContent.isMDXComponent = true;
 
 export const helloButton = () => <Button>Hello button</Button>;
-helloButton.title = 'hello button';
-helloButton.parameters = { mdxSource: \`<Button>Hello button</Button>\` };
+helloButton.story = {};
+helloButton.story.name = 'hello button';
+helloButton.story.parameters = { mdxSource: \`<Button>Hello button</Button>\` };
 
 export const two = () => <Button>Two</Button>;
-two.parameters = { mdxSource: \`<Button>Two</Button>\` };
+two.story = {};
+two.story.parameters = { mdxSource: \`<Button>Two</Button>\` };
 
 const componentMeta = {
   title: 'Button',
@@ -448,11 +456,13 @@ function MDXContent({ components, ...props }) {
 MDXContent.isMDXComponent = true;
 
 export const one = () => <Button>One</Button>;
-one.parameters = { mdxSource: \`<Button>One</Button>\` };
+one.story = {};
+one.story.parameters = { mdxSource: \`<Button>One</Button>\` };
 
 export const helloStory = () => <Button>Hello button</Button>;
-helloStory.title = 'hello story';
-helloStory.parameters = { mdxSource: \`<Button>Hello button</Button>\` };
+helloStory.story = {};
+helloStory.story.name = 'hello story';
+helloStory.story.parameters = { mdxSource: \`<Button>Hello button</Button>\` };
 
 const componentMeta = { title: 'Button', includeStories: ['one', 'helloStory'] };
 
@@ -542,7 +552,8 @@ function MDXContent({ components, ...props }) {
 MDXContent.isMDXComponent = true;
 
 export const text = () => 'Plain text';
-text.parameters = { mdxSource: \`'Plain text'\` };
+text.story = {};
+text.story.parameters = { mdxSource: \`'Plain text'\` };
 
 const componentMeta = { title: 'Text', includeStories: ['text'] };
 
diff --git a/addons/docs/angular/index.js b/addons/docs/angular/index.js
new file mode 100644
index 000000000000..38c1756201b7
--- /dev/null
+++ b/addons/docs/angular/index.js
@@ -0,0 +1 @@
+module.exports = require('../common/index');
diff --git a/addons/docs/angular/preset.js b/addons/docs/angular/preset.js
new file mode 100644
index 000000000000..a9b8af2cce0a
--- /dev/null
+++ b/addons/docs/angular/preset.js
@@ -0,0 +1 @@
+module.exports = require('../common/preset');
diff --git a/addons/docs/common/preset.js b/addons/docs/common/preset.js
index da25537f1083..3831a573b203 100644
--- a/addons/docs/common/preset.js
+++ b/addons/docs/common/preset.js
@@ -26,20 +26,8 @@ function webpack(webpackConfig = {}, options = {}) {
       ...module,
       rules: [
         ...(module.rules || []),
-        // {
-        //   test: [/\.stories\.(jsx?$|ts?$)/],
-        //   enforce: 'pre',
-        //   use: [
-        //     {
-        //       loader: require.resolve('@storybook/addon-storysource/loader'),
-        //       options: {
-        //         injectParameters: true,
-        //       },
-        //     },
-        //   ],
-        // },
         {
-          test: /\.stories.mdx$/,
+          test: /\.(stories|story).mdx$/,
           use: [
             {
               loader: 'babel-loader',
@@ -55,7 +43,7 @@ function webpack(webpackConfig = {}, options = {}) {
         },
         {
           test: /\.mdx$/,
-          exclude: /\.stories.mdx$/,
+          exclude: /\.(stories|story).mdx$/,
           use: [
             {
               loader: 'babel-loader',
@@ -72,11 +60,7 @@ function webpack(webpackConfig = {}, options = {}) {
 }
 
 function addons(entry = []) {
-  return [
-    ...entry,
-    // require.resolve('@storybook/addon-storysource/register'),
-    require.resolve('../register'),
-  ];
+  return [...entry, require.resolve('../register')];
 }
 
 module.exports = { webpack, addons };
diff --git a/addons/docs/mdx-compiler-plugin.js b/addons/docs/mdx-compiler-plugin.js
index 6c520273b467..c5586977381b 100644
--- a/addons/docs/mdx-compiler-plugin.js
+++ b/addons/docs/mdx-compiler-plugin.js
@@ -65,9 +65,10 @@ function genStoryExport(ast, counter) {
       ${storyCode}
     );`
   );
+  statements.push(`${storyKey}.story = {};`);
 
   if (storyName !== storyKey) {
-    statements.push(`${storyKey}.title = '${storyName}';`);
+    statements.push(`${storyKey}.story.name = '${storyName}';`);
   }
 
   let parameters = getAttr(ast.openingElement, 'parameters');
@@ -76,9 +77,9 @@ function genStoryExport(ast, counter) {
   if (parameters) {
     const { code: params } = generate(parameters, {});
     // FIXME: hack in the story's source as a parameter
-    statements.push(`${storyKey}.parameters = { mdxSource: ${source}, ...${params} };`);
+    statements.push(`${storyKey}.story.parameters = { mdxSource: ${source}, ...${params} };`);
   } else {
-    statements.push(`${storyKey}.parameters = { mdxSource: ${source} };`);
+    statements.push(`${storyKey}.story.parameters = { mdxSource: ${source} };`);
   }
 
   // console.log(statements);
diff --git a/addons/docs/package.json b/addons/docs/package.json
index 1c66b826cda9..e4d17072cf2e 100644
--- a/addons/docs/package.json
+++ b/addons/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "Superior documentation for your components",
   "keywords": [
     "addon",
@@ -28,11 +28,11 @@
     "@mdx-js/loader": "^1.0.0",
     "@mdx-js/mdx": "^1.0.0",
     "@mdx-js/react": "^1.0.16",
-    "@storybook/addons": "5.2.0-alpha.30",
-    "@storybook/api": "5.2.0-alpha.30",
-    "@storybook/components": "5.2.0-alpha.30",
-    "@storybook/router": "5.2.0-alpha.30",
-    "@storybook/theming": "5.2.0-alpha.30",
+    "@storybook/addons": "5.2.0-alpha.36",
+    "@storybook/api": "5.2.0-alpha.36",
+    "@storybook/components": "5.2.0-alpha.36",
+    "@storybook/router": "5.2.0-alpha.36",
+    "@storybook/theming": "5.2.0-alpha.36",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "lodash": "^4.17.11",
diff --git a/addons/docs/src/blocks/Story.tsx b/addons/docs/src/blocks/Story.tsx
index 7fde8e353b34..888d379c6ef4 100644
--- a/addons/docs/src/blocks/Story.tsx
+++ b/addons/docs/src/blocks/Story.tsx
@@ -7,6 +7,7 @@ import { DocsContext, DocsContextProps } from './DocsContext';
 
 interface CommonProps {
   height?: string;
+  inline?: boolean;
 }
 
 type StoryDefProps = {
@@ -38,13 +39,15 @@ export const getStoryProps = (
   const inputId = id === CURRENT_SELECTION ? currentId : id;
   const previewId = inputId || toId(mdxKind, name);
 
-  const { height } = props;
+  const { height, inline } = props;
   const data = storyStore.fromId(previewId);
   const { framework = null } = parameters || {};
+
+  // prefer props, then global options, then framework-inferred values
   const { inlineStories = inferInlineStories(framework), iframeHeight = undefined } =
     (parameters && parameters.options && parameters.options.docs) || {};
   return {
-    inline: inlineStories,
+    inline: typeof inline === 'boolean' ? inline : inlineStories,
     id: previewId,
     storyFn: data && data.getDecorated(),
     height: height || iframeHeight,
diff --git a/addons/events/package.json b/addons/events/package.json
index dbd2d88cb668..c9d4ece739e4 100644
--- a/addons/events/package.json
+++ b/addons/events/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-events",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "Add events to your Storybook stories.",
   "keywords": [
     "addon",
@@ -19,14 +19,15 @@
   },
   "license": "MIT",
   "main": "dist/index.js",
-  "jsnext:main": "src/index.js",
+  "types": "dist/index.d.ts",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.30",
-    "@storybook/core-events": "5.2.0-alpha.30",
-    "@storybook/theming": "5.2.0-alpha.30",
+    "@storybook/addons": "5.2.0-alpha.36",
+    "@storybook/api": "5.2.0-alpha.36",
+    "@storybook/core-events": "5.2.0-alpha.36",
+    "@storybook/theming": "5.2.0-alpha.36",
     "core-js": "^3.0.1",
     "format-json": "^1.0.3",
     "lodash": "^4.17.11",
diff --git a/addons/events/src/components/Event.js b/addons/events/src/components/Event.tsx
similarity index 78%
rename from addons/events/src/components/Event.js
rename to addons/events/src/components/Event.tsx
index 7e3634959479..fec6b93aae8f 100644
--- a/addons/events/src/components/Event.js
+++ b/addons/events/src/components/Event.tsx
@@ -5,10 +5,19 @@ import isEqual from 'lodash/isEqual';
 
 import { styled } from '@storybook/theming';
 import json from 'format-json';
-
 import Textarea from 'react-textarea-autosize';
+import { OnEmitEvent } from '../index';
+
+interface StyledTextareaProps {
+  shown: boolean;
+  failed: boolean;
+  value?: string;
+  onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+}
 
-const StyledTextarea = styled(Textarea)(
+const StyledTextarea = styled(({ shown, failed, ...rest }: StyledTextareaProps) => (
+  <Textarea {...rest} />
+))(
   {
     flex: '1 0 0',
     boxSizing: 'border-box',
@@ -67,7 +76,7 @@ const Label = styled.label({
   textAlign: 'right',
   width: 100,
   fontWeight: '600',
-});
+} as any);
 
 const Wrapper = styled.div({
   display: 'flex',
@@ -77,15 +86,29 @@ const Wrapper = styled.div({
   width: '100%',
 });
 
-function getJSONFromString(str) {
+function getJSONFromString(str: string) {
   try {
     return JSON.parse(str);
   } catch (e) {
     return str;
   }
 }
+interface ItemProps {
+  name: string;
+  title: string;
+  onEmit: (event: OnEmitEvent) => void;
+  payload: unknown;
+}
+
+interface ItemState {
+  isTextAreaShowed: boolean;
+  failed: boolean;
+  payload: unknown;
+  payloadString: string;
+  prevPayload: unknown;
+}
 
-class Item extends Component {
+class Item extends Component<ItemProps, ItemState> {
   static propTypes = {
     name: PropTypes.string.isRequired,
     title: PropTypes.string.isRequired,
@@ -98,12 +121,16 @@ class Item extends Component {
     payload: {},
   };
 
-  state = {
+  state: ItemState = {
     isTextAreaShowed: false,
+    failed: false,
+    payload: null,
+    payloadString: '',
+    prevPayload: null,
   };
 
-  onChange = ({ target: { value } }) => {
-    const newState = {
+  onChange = ({ target: { value } }: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const newState: Partial<ItemState> = {
       payloadString: value,
     };
 
@@ -114,7 +141,7 @@ class Item extends Component {
       newState.failed = true;
     }
 
-    this.setState(newState);
+    this.setState(state => ({ ...state, ...newState }));
   };
 
   onEmitClick = () => {
@@ -133,7 +160,7 @@ class Item extends Component {
     }));
   };
 
-  static getDerivedStateFromProps = ({ payload }, { prevPayload }) => {
+  static getDerivedStateFromProps = ({ payload }: ItemProps, { prevPayload }: ItemState) => {
     if (!isEqual(payload, prevPayload)) {
       const payloadString = json.plain(payload);
       const refinedPayload = getJSONFromString(payloadString);
@@ -150,7 +177,6 @@ class Item extends Component {
   render() {
     const { title, name } = this.props;
     const { failed, isTextAreaShowed, payloadString } = this.state;
-
     return (
       <Wrapper>
         <Label htmlFor={`addon-event-${name}`}>{title}</Label>
diff --git a/addons/events/src/components/Panel.js b/addons/events/src/components/Panel.tsx
similarity index 73%
rename from addons/events/src/components/Panel.js
rename to addons/events/src/components/Panel.tsx
index 4c37e0727a50..6c79a5ff2e5d 100644
--- a/addons/events/src/components/Panel.js
+++ b/addons/events/src/components/Panel.tsx
@@ -2,9 +2,11 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
 import { styled } from '@storybook/theming';
+import { API } from '@storybook/api';
 
 import { EVENTS } from '../constants';
 import Event from './Event';
+import { Event as EventType, OnEmitEvent } from '../index';
 
 const Wrapper = styled.div({
   width: '100%',
@@ -13,7 +15,15 @@ const Wrapper = styled.div({
   minHeight: '100%',
 });
 
-export default class EventsPanel extends Component {
+interface EventsPanelProps {
+  active: boolean;
+  api: API;
+}
+interface EventsPanelState {
+  events: EventType[];
+}
+
+export default class EventsPanel extends Component<EventsPanelProps, EventsPanelState> {
   static propTypes = {
     active: PropTypes.bool.isRequired,
     api: PropTypes.shape({
@@ -23,7 +33,7 @@ export default class EventsPanel extends Component {
     }).isRequired,
   };
 
-  state = {
+  state: EventsPanelState = {
     events: [],
   };
 
@@ -39,13 +49,12 @@ export default class EventsPanel extends Component {
     api.off(EVENTS.ADD, this.onAdd);
   }
 
-  onAdd = events => {
+  onAdd = (events: EventType[]) => {
     this.setState({ events });
   };
 
-  onEmit = event => {
+  onEmit = (event: OnEmitEvent) => {
     const { api } = this.props;
-
     api.emit(EVENTS.EMIT, event);
   };
 
diff --git a/addons/events/src/constants.js b/addons/events/src/constants.ts
similarity index 84%
rename from addons/events/src/constants.js
rename to addons/events/src/constants.ts
index cf57a2570904..3d765994293b 100644
--- a/addons/events/src/constants.js
+++ b/addons/events/src/constants.ts
@@ -1,3 +1,5 @@
+export const PARAM_KEY = 'events';
+
 export const ADDON_ID = 'storybook/events';
 
 export const PANEL_ID = `${ADDON_ID}/panel`;
diff --git a/addons/events/src/index.js b/addons/events/src/index.ts
similarity index 61%
rename from addons/events/src/index.js
rename to addons/events/src/index.ts
index 31eb1960e36f..db09b493cad1 100644
--- a/addons/events/src/index.js
+++ b/addons/events/src/index.ts
@@ -1,13 +1,20 @@
+import { ReactNode } from 'react';
+
 import addons from '@storybook/addons';
 import CoreEvents from '@storybook/core-events';
 import deprecate from 'util-deprecate';
 
 import { EVENTS } from './constants';
 
-let prevEvents;
-let currentEmit;
+let prevEvents: Event[];
+let currentEmit: (name: string, payload: unknown) => void;
+
+export interface OnEmitEvent {
+  name: string;
+  payload: unknown;
+}
 
-const onEmit = event => {
+const onEmit = (event: OnEmitEvent) => {
   currentEmit(event.name, event.payload);
 };
 
@@ -21,7 +28,7 @@ const subscription = () => {
   };
 };
 
-const addEvents = ({ emit, events }) => {
+const addEvents = ({ emit, events }: Options) => {
   if (prevEvents !== events) {
     addons.getChannel().emit(EVENTS.ADD, events);
     prevEvents = events;
@@ -30,16 +37,28 @@ const addEvents = ({ emit, events }) => {
   addons.getChannel().emit(CoreEvents.REGISTER_SUBSCRIPTION, subscription);
 };
 
-const WithEvents = deprecate(({ children, ...options }) => {
+export interface Event {
+  name: string;
+  title: string;
+  payload: unknown;
+}
+
+interface Options {
+  children?: ReactNode;
+  emit: (eventName: string, ...args: any) => void;
+  events: Event[];
+}
+
+const WithEvents = deprecate(({ children, ...options }: Options) => {
   addEvents(options);
   return children;
 }, `<WithEvents> usage is deprecated, use .addDecorator(withEvents({emit, events})) instead`);
 
-export default options => {
+export default (options: Options) => {
   if (options.children) {
     return WithEvents(options);
   }
-  return storyFn => {
+  return (storyFn: () => ReactNode) => {
     addEvents(options);
     return storyFn();
   };
diff --git a/addons/events/src/manager.js b/addons/events/src/manager.tsx
similarity index 76%
rename from addons/events/src/manager.js
rename to addons/events/src/manager.tsx
index 6d8bea634686..8b98db2cb2b7 100644
--- a/addons/events/src/manager.js
+++ b/addons/events/src/manager.tsx
@@ -2,14 +2,14 @@ import React from 'react';
 import addons from '@storybook/addons';
 
 import Panel from './components/Panel';
-import { ADDON_ID, PANEL_ID } from './constants';
+import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
 
 export function register() {
   addons.register(ADDON_ID, api => {
     addons.addPanel(PANEL_ID, {
       title: 'Events',
-      // eslint-disable-next-line react/prop-types
       render: ({ active, key }) => <Panel key={key} api={api} active={active} />,
+      paramKey: PARAM_KEY,
     });
   });
 }
diff --git a/addons/events/src/typings.d.ts b/addons/events/src/typings.d.ts
new file mode 100644
index 000000000000..d6932d989ba0
--- /dev/null
+++ b/addons/events/src/typings.d.ts
@@ -0,0 +1,2 @@
+declare module 'react-lifecycles-compat';
+declare module 'format-json';
diff --git a/addons/events/tsconfig.json b/addons/events/tsconfig.json
new file mode 100644
index 000000000000..8876bb6737a1
--- /dev/null
+++ b/addons/events/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "types": ["webpack-env"]
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "src/__tests__/**/*"
+  ]
+}
diff --git a/addons/google-analytics/package.json b/addons/google-analytics/package.json
index 00e2c4699b7a..9e2c25a55426 100644
--- a/addons/google-analytics/package.json
+++ b/addons/google-analytics/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-google-analytics",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "Storybook addon for google analytics",
   "keywords": [
     "addon",
@@ -20,8 +20,8 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.30",
-    "@storybook/core-events": "5.2.0-alpha.30",
+    "@storybook/addons": "5.2.0-alpha.36",
+    "@storybook/core-events": "5.2.0-alpha.36",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "react-ga": "^2.5.7"
diff --git a/addons/graphql/package.json b/addons/graphql/package.json
index ff363401efe9..d0e81b57d967 100644
--- a/addons/graphql/package.json
+++ b/addons/graphql/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-graphql",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "Storybook addon to display the GraphiQL IDE",
   "keywords": [
     "addon",
@@ -22,8 +22,8 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.30",
-    "@storybook/api": "5.2.0-alpha.30",
+    "@storybook/addons": "5.2.0-alpha.36",
+    "@storybook/api": "5.2.0-alpha.36",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "graphiql": "^0.13.0",
diff --git a/addons/graphql/src/register.ts b/addons/graphql/src/register.ts
index d69b5af63619..68d41a5dd20e 100644
--- a/addons/graphql/src/register.ts
+++ b/addons/graphql/src/register.ts
@@ -1,7 +1,7 @@
 import { addons, types } from '@storybook/addons';
 
 import GQL from './manager';
-import { ADDON_ID } from '.';
+import { ADDON_ID, PARAM_KEY } from '.';
 
 export const register = () => {
   addons.register(ADDON_ID, () => {
@@ -11,6 +11,7 @@ export const register = () => {
       route: ({ storyId }) => `/graphql/${storyId}`,
       match: ({ viewMode }) => viewMode === 'graphql',
       render: GQL,
+      paramKey: PARAM_KEY,
     });
   });
 };
diff --git a/addons/info/package.json b/addons/info/package.json
index 132b03dfc35e..572a38c684eb 100644
--- a/addons/info/package.json
+++ b/addons/info/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-info",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "A Storybook addon to show additional information for your stories.",
   "keywords": [
     "addon",
@@ -22,10 +22,10 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.30",
-    "@storybook/client-logger": "5.2.0-alpha.30",
-    "@storybook/components": "5.2.0-alpha.30",
-    "@storybook/theming": "5.2.0-alpha.30",
+    "@storybook/addons": "5.2.0-alpha.36",
+    "@storybook/client-logger": "5.2.0-alpha.36",
+    "@storybook/components": "5.2.0-alpha.36",
+    "@storybook/theming": "5.2.0-alpha.36",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "jsx-to-string": "^1.4.0",
diff --git a/addons/jest/package.json b/addons/jest/package.json
index 6ef8f08a604a..cd1c65fcf598 100644
--- a/addons/jest/package.json
+++ b/addons/jest/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-jest",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "React storybook addon that show component jest report",
   "keywords": [
     "addon",
@@ -28,11 +28,11 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.30",
-    "@storybook/api": "5.2.0-alpha.30",
-    "@storybook/components": "5.2.0-alpha.30",
-    "@storybook/core-events": "5.2.0-alpha.30",
-    "@storybook/theming": "5.2.0-alpha.30",
+    "@storybook/addons": "5.2.0-alpha.36",
+    "@storybook/api": "5.2.0-alpha.36",
+    "@storybook/components": "5.2.0-alpha.36",
+    "@storybook/core-events": "5.2.0-alpha.36",
+    "@storybook/theming": "5.2.0-alpha.36",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "react": "^16.8.3",
diff --git a/addons/jest/src/register.tsx b/addons/jest/src/register.tsx
index b3058d321dd6..a8d3b2c97bad 100644
--- a/addons/jest/src/register.tsx
+++ b/addons/jest/src/register.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import addons from '@storybook/addons';
-import { ADDON_ID, PANEL_ID } from './shared';
+import { ADDON_ID, PANEL_ID, PARAM_KEY } from './shared';
 
 import Panel from './components/Panel';
 
@@ -8,5 +8,6 @@ addons.register(ADDON_ID, api => {
   addons.addPanel(PANEL_ID, {
     title: 'tests',
     render: ({ active, key }) => <Panel key={key} api={api} active={active} />,
+    paramKey: PARAM_KEY,
   });
 });
diff --git a/addons/jest/src/shared.ts b/addons/jest/src/shared.ts
index 08438c671482..17e74d304d48 100644
--- a/addons/jest/src/shared.ts
+++ b/addons/jest/src/shared.ts
@@ -1,4 +1,5 @@
 // addons, panels and events get unique names using a prefix
+export const PARAM_KEY = 'test';
 export const ADDON_ID = 'storybookjs/test';
 export const PANEL_ID = `${ADDON_ID}/panel`;
 
diff --git a/addons/knobs/package.json b/addons/knobs/package.json
index d09ac60b2a9a..0a8f478bc7fb 100644
--- a/addons/knobs/package.json
+++ b/addons/knobs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-knobs",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "Storybook Addon Prop Editor Component",
   "keywords": [
     "addon",
@@ -22,11 +22,11 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.30",
-    "@storybook/client-api": "5.2.0-alpha.30",
-    "@storybook/components": "5.2.0-alpha.30",
-    "@storybook/core-events": "5.2.0-alpha.30",
-    "@storybook/theming": "5.2.0-alpha.30",
+    "@storybook/addons": "5.2.0-alpha.36",
+    "@storybook/client-api": "5.2.0-alpha.36",
+    "@storybook/components": "5.2.0-alpha.36",
+    "@storybook/core-events": "5.2.0-alpha.36",
+    "@storybook/theming": "5.2.0-alpha.36",
     "copy-to-clipboard": "^3.0.8",
     "core-js": "^3.0.1",
     "escape-html": "^1.0.3",
diff --git a/addons/knobs/src/KnobManager.js b/addons/knobs/src/KnobManager.js
index dc76bd5ef47d..afad9bd3d642 100644
--- a/addons/knobs/src/KnobManager.js
+++ b/addons/knobs/src/KnobManager.js
@@ -58,8 +58,10 @@ export default class KnobManager {
   knob(name, options) {
     this._mayCallChannel();
 
+    const knobName = options.groupId ? `${name}_${options.groupId}` : name;
+
     const { knobStore } = this;
-    const existingKnob = knobStore.get(name);
+    const existingKnob = knobStore.get(knobName);
 
     // We need to return the value set by the knob editor via this.
     // Normally the knobs are reset and so re-use is safe as long as the types match
@@ -77,22 +79,23 @@ export default class KnobManager {
 
     const knobInfo = {
       ...options,
-      name,
+      name: knobName,
+      label: name,
     };
 
-    if (knobValuesFromUrl[name]) {
-      const value = deserializers[options.type](knobValuesFromUrl[name]);
+    if (knobValuesFromUrl[knobName]) {
+      const value = deserializers[options.type](knobValuesFromUrl[knobName]);
 
       knobInfo.defaultValue = value;
       knobInfo.value = value;
 
-      delete knobValuesFromUrl[name];
+      delete knobValuesFromUrl[knobName];
     } else {
       knobInfo.defaultValue = options.value;
     }
 
-    knobStore.set(name, knobInfo);
-    return this.getKnobValue(knobStore.get(name));
+    knobStore.set(knobName, knobInfo);
+    return this.getKnobValue(knobStore.get(knobName));
   }
 
   _mayCallChannel() {
diff --git a/addons/knobs/src/KnobManager.test.js b/addons/knobs/src/KnobManager.test.js
index f6a9e6db1db5..afb46034f516 100644
--- a/addons/knobs/src/KnobManager.test.js
+++ b/addons/knobs/src/KnobManager.test.js
@@ -56,6 +56,7 @@ describe('KnobManager', () => {
 
         const newKnob = {
           ...defaultKnob,
+          label: 'foo',
           defaultValue: defaultKnob.value,
         };
 
@@ -86,6 +87,7 @@ describe('KnobManager', () => {
 
         const newKnob = {
           ...defaultKnob,
+          label: 'foo',
           defaultValue: defaultKnob.value,
         };
 
diff --git a/addons/knobs/src/components/PropForm.js b/addons/knobs/src/components/PropForm.js
index 05df92a1e273..aefbb46355bd 100644
--- a/addons/knobs/src/components/PropForm.js
+++ b/addons/knobs/src/components/PropForm.js
@@ -26,7 +26,7 @@ export default class PropForm extends Component {
           const InputType = TypeMap[knob.type] || InvalidType;
 
           return (
-            <Form.Field key={knob.name} label={!knob.hideLabel && `${knob.name}`}>
+            <Form.Field key={knob.name} label={!knob.hideLabel && `${knob.label || knob.name}`}>
               <InputType knob={knob} onChange={changeHandler} onClick={onFieldClick} />
             </Form.Field>
           );
diff --git a/addons/knobs/src/register.js b/addons/knobs/src/register.js
index e8eeddb512c1..2808815b3958 100644
--- a/addons/knobs/src/register.js
+++ b/addons/knobs/src/register.js
@@ -1,12 +1,13 @@
 import React from 'react';
 import addons from '@storybook/addons';
 import Panel from './components/Panel';
-import { ADDON_ID, PANEL_ID } from './shared';
+import { ADDON_ID, PANEL_ID, PARAM_KEY } from './shared';
 
 addons.register(ADDON_ID, api => {
   addons.addPanel(PANEL_ID, {
     title: 'Knobs',
     // eslint-disable-next-line react/prop-types
     render: ({ active, key }) => <Panel api={api} key={key} active={active} />,
+    paramKey: PARAM_KEY,
   });
 });
diff --git a/addons/knobs/src/shared.js b/addons/knobs/src/shared.js
index 64aa6af2d923..267862d05d10 100644
--- a/addons/knobs/src/shared.js
+++ b/addons/knobs/src/shared.js
@@ -1,4 +1,5 @@
 // addons, panels and events get unique names using a prefix
+export const PARAM_KEY = 'knobs';
 export const ADDON_ID = 'storybookjs/knobs';
 export const PANEL_ID = `${ADDON_ID}/panel`;
 
diff --git a/addons/links/package.json b/addons/links/package.json
index 321e51ac1405..80e81d94b641 100644
--- a/addons/links/package.json
+++ b/addons/links/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-links",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "Story Links addon for storybook",
   "keywords": [
     "addon",
@@ -22,9 +22,9 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.30",
-    "@storybook/core-events": "5.2.0-alpha.30",
-    "@storybook/router": "5.2.0-alpha.30",
+    "@storybook/addons": "5.2.0-alpha.36",
+    "@storybook/core-events": "5.2.0-alpha.36",
+    "@storybook/router": "5.2.0-alpha.36",
     "common-tags": "^1.8.0",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
diff --git a/addons/notes/package.json b/addons/notes/package.json
index 5d08236c8656..78af4074290e 100644
--- a/addons/notes/package.json
+++ b/addons/notes/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-notes",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "Write notes for your Storybook stories.",
   "keywords": [
     "addon",
@@ -23,13 +23,13 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.30",
-    "@storybook/api": "5.2.0-alpha.30",
-    "@storybook/client-logger": "5.2.0-alpha.30",
-    "@storybook/components": "5.2.0-alpha.30",
-    "@storybook/core-events": "5.2.0-alpha.30",
-    "@storybook/router": "5.2.0-alpha.30",
-    "@storybook/theming": "5.2.0-alpha.30",
+    "@storybook/addons": "5.2.0-alpha.36",
+    "@storybook/api": "5.2.0-alpha.36",
+    "@storybook/client-logger": "5.2.0-alpha.36",
+    "@storybook/components": "5.2.0-alpha.36",
+    "@storybook/core-events": "5.2.0-alpha.36",
+    "@storybook/router": "5.2.0-alpha.36",
+    "@storybook/theming": "5.2.0-alpha.36",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "markdown-to-jsx": "^6.9.3",
diff --git a/addons/notes/src/register.tsx b/addons/notes/src/register.tsx
index 17d3c8d4189f..0e56ab83ae1a 100644
--- a/addons/notes/src/register.tsx
+++ b/addons/notes/src/register.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import addons, { types } from '@storybook/addons';
 
-import { ADDON_ID, PANEL_ID } from './shared';
+import { ADDON_ID, PANEL_ID, PARAM_KEY } from './shared';
 
 // TODO: fix eslint in tslint (igor said he fixed it, should ask him)
 import Panel from './Panel';
@@ -14,6 +14,7 @@ export default function register(type: types) {
       route: ({ storyId }) => `/info/${storyId}`, // todo add type
       match: ({ viewMode }) => viewMode === 'info', // todo add type
       render: ({ active }) => <Panel api={api} active={active} />,
+      paramKey: PARAM_KEY,
     });
   });
 }
diff --git a/addons/ondevice-actions/package.json b/addons/ondevice-actions/package.json
index 71e6b9949157..a5d87d406046 100644
--- a/addons/ondevice-actions/package.json
+++ b/addons/ondevice-actions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-actions",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "Action Logger addon for react-native storybook",
   "keywords": [
     "storybook"
@@ -19,13 +19,13 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.30",
-    "@storybook/core-events": "5.2.0-alpha.30",
+    "@storybook/addons": "5.2.0-alpha.36",
+    "@storybook/core-events": "5.2.0-alpha.36",
     "core-js": "^2.5.7",
     "fast-deep-equal": "^2.0.1"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "5.2.0-alpha.30"
+    "@storybook/addon-actions": "5.2.0-alpha.36"
   },
   "peerDependencies": {
     "@storybook/addon-actions": "*",
diff --git a/addons/ondevice-actions/src/components/ActionLogger/Inspect.tsx b/addons/ondevice-actions/src/components/ActionLogger/Inspect.tsx
index bcf4f1fcac2e..fb7ffbe513dd 100644
--- a/addons/ondevice-actions/src/components/ActionLogger/Inspect.tsx
+++ b/addons/ondevice-actions/src/components/ActionLogger/Inspect.tsx
@@ -1,3 +1,5 @@
+/* eslint-disable react/no-array-index-key */
+/* eslint-disable no-nested-ternary */
 import React from 'react';
 import { Button, View, Text } from 'react-native';
 
@@ -22,6 +24,7 @@ const theme = {
 
 class Inspect extends React.Component<{ name?: string; value: any }, { expanded: boolean }> {
   state = { expanded: false };
+
   render() {
     const { name, value } = this.props;
     const { expanded } = this.state;
@@ -52,7 +55,7 @@ class Inspect extends React.Component<{ name?: string; value: any }, { expanded:
             <View style={{ flexDirection: 'row', alignItems: 'center' }}>
               {toggle}
               {nameComponent}
-              <Text>{': ' + (value.length === 0 ? '[]' : expanded ? '[' : '[...]')}</Text>
+              <Text>{`: ${value.length === 0 ? '[]' : expanded ? '[' : '[...]'}`}</Text>
             </View>
             {expanded ? (
               <View style={{ marginLeft: 40 }}>
@@ -62,7 +65,7 @@ class Inspect extends React.Component<{ name?: string; value: any }, { expanded:
                   </View>
                 ))}
                 <View style={{ marginLeft: 20 }}>
-                  <Text>{']'}</Text>
+                  <Text>]</Text>
                 </View>
               </View>
             ) : null}
@@ -71,13 +74,13 @@ class Inspect extends React.Component<{ name?: string; value: any }, { expanded:
       }
       return (
         <View>
-          <Text>{'['}</Text>
+          <Text>[</Text>
           {value.map((v, i) => (
             <View key={i} style={{ marginLeft: 20 }}>
               <Inspect value={v} />
             </View>
           ))}
-          <Text>{']'}</Text>
+          <Text>]</Text>
         </View>
       );
     }
@@ -89,7 +92,7 @@ class Inspect extends React.Component<{ name?: string; value: any }, { expanded:
               {toggle}
               {nameComponent}
               <Text>
-                {': ' + (Object.keys(value).length === 0 ? '{}' : expanded ? '{' : '{...}')}
+                {`: ${Object.keys(value).length === 0 ? '{}' : expanded ? '{' : '{...}'}`}
               </Text>
             </View>
             {expanded ? (
@@ -124,7 +127,7 @@ class Inspect extends React.Component<{ name?: string; value: any }, { expanded:
         <View style={{ flexDirection: 'row', alignItems: 'center' }}>
           {toggle}
           {nameComponent}
-          <Text>{': '}</Text>
+          <Text>: </Text>
           <Value value={value} />
         </View>
       );
@@ -147,7 +150,7 @@ function Value({ value }: { value: any }) {
   if (value instanceof RegExp) {
     return (
       <Text style={{ color: theme.OBJECT_VALUE_REGEXP_COLOR }}>
-        {'/' + value.source + '/' + value.flags}
+        {`/${value.source}/${value.flags}`}
       </Text>
     );
   }
@@ -166,8 +169,9 @@ function Value({ value }: { value: any }) {
       );
     case 'function':
       return <Text style={{ color: theme.OBJECT_VALUE_FUNCTION_PREFIX_COLOR }}>[Function]</Text>;
+    default:
+      return <Text>{JSON.stringify(value)}</Text>;
   }
-  return <Text>{JSON.stringify(value)}</Text>;
 }
 
 export default Inspect;
diff --git a/addons/ondevice-actions/src/index.tsx b/addons/ondevice-actions/src/index.tsx
index 76602d22ae9c..63b71d68a676 100644
--- a/addons/ondevice-actions/src/index.tsx
+++ b/addons/ondevice-actions/src/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import addons from '@storybook/addons';
-import { ADDON_ID, PANEL_ID } from '@storybook/addon-actions';
+import { ADDON_ID, PANEL_ID, PARAM_KEY } from '@storybook/addon-actions';
 import ActionLogger from './containers/ActionLogger';
 
 export function register() {
@@ -8,6 +8,7 @@ export function register() {
     addons.addPanel(PANEL_ID, {
       title: 'Actions',
       render: ({ active, key }) => <ActionLogger key={key} active={active} />,
+      paramKey: PARAM_KEY,
     });
   });
 }
diff --git a/addons/ondevice-backgrounds/package.json b/addons/ondevice-backgrounds/package.json
index 03828fcb511f..f0b72924f7eb 100644
--- a/addons/ondevice-backgrounds/package.json
+++ b/addons/ondevice-backgrounds/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-backgrounds",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "A react-native storybook addon to show different backgrounds for your preview",
   "keywords": [
     "addon",
@@ -24,7 +24,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.30",
+    "@storybook/addons": "5.2.0-alpha.36",
     "core-js": "^3.0.1",
     "prop-types": "^15.7.2"
   },
diff --git a/addons/ondevice-backgrounds/src/BackgroundPanel.js b/addons/ondevice-backgrounds/src/BackgroundPanel.js
index cd28c6d73c11..30800f7ca8e0 100644
--- a/addons/ondevice-backgrounds/src/BackgroundPanel.js
+++ b/addons/ondevice-backgrounds/src/BackgroundPanel.js
@@ -1,8 +1,9 @@
+/* eslint-disable react/prop-types, react/destructuring-assignment, import/no-extraneous-dependencies */
 import React, { Component } from 'react';
 import { View, Text } from 'react-native';
 import Events from '@storybook/core-events';
 import Swatch from './Swatch';
-import Constants from './constants';
+import BackgroundEvents, { PARAM_KEY } from './constants';
 
 const codeSample = `
 import { storiesOf } from '@storybook/react-native';
@@ -36,10 +37,6 @@ const Instructions = () => (
 );
 
 export default class BackgroundPanel extends Component {
-  setBackgroundFromSwatch = background => {
-    this.props.channel.emit(Constants.UPDATE_BACKGROUND, background);
-  };
-
   componentDidMount() {
     this.props.channel.on(Events.SELECT_STORY, this.onStorySelected);
   }
@@ -48,6 +45,10 @@ export default class BackgroundPanel extends Component {
     this.props.channel.removeListener(Events.SELECT_STORY, this.onStorySelected);
   }
 
+  setBackgroundFromSwatch = background => {
+    this.props.channel.emit(BackgroundEvents.UPDATE_BACKGROUND, background);
+  };
+
   onStorySelected = selection => {
     this.setState({ selection });
   };
@@ -62,7 +63,7 @@ export default class BackgroundPanel extends Component {
     const story = api
       .store()
       .getStoryAndParameters(this.state.selection.kind, this.state.selection.story);
-    const backgrounds = story.parameters[Constants.PARAM_KEY];
+    const backgrounds = story.parameters[PARAM_KEY];
 
     return (
       <View>
diff --git a/addons/ondevice-backgrounds/src/constants.js b/addons/ondevice-backgrounds/src/constants.js
index 7e0fcc42dae1..8e876dace84d 100644
--- a/addons/ondevice-backgrounds/src/constants.js
+++ b/addons/ondevice-backgrounds/src/constants.js
@@ -1,3 +1,4 @@
+export const PARAM_KEY = 'background';
 export const ADDON_ID = 'storybook-addon-background';
 export const PANEL_ID = `${ADDON_ID}/background-panel`;
 
@@ -5,5 +6,4 @@ export default {
   SET: `${ADDON_ID}:set`,
   UNSET: `${ADDON_ID}:unset`,
   UPDATE_BACKGROUND: `${ADDON_ID}:update`,
-  PARAM_KEY: 'backgrounds',
 };
diff --git a/addons/ondevice-backgrounds/src/container.js b/addons/ondevice-backgrounds/src/container.js
index f5b03964bb15..523e4ae4a31e 100644
--- a/addons/ondevice-backgrounds/src/container.js
+++ b/addons/ondevice-backgrounds/src/container.js
@@ -19,9 +19,9 @@ export default class Container extends React.Component {
     channel.removeListener(Constants.UPDATE_BACKGROUND, this.onBackgroundChange);
   }
 
-  onBackgroundChange = (background) => {
+  onBackgroundChange = background => {
     this.setState({ background });
-  }
+  };
 
   render() {
     const { background } = this.state;
diff --git a/addons/ondevice-backgrounds/src/register.js b/addons/ondevice-backgrounds/src/register.js
index 0bd614430dae..2714689abb25 100644
--- a/addons/ondevice-backgrounds/src/register.js
+++ b/addons/ondevice-backgrounds/src/register.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import addons from '@storybook/addons';
 
-import { ADDON_ID, PANEL_ID } from './constants';
+import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
 import BackgroundPanel from './BackgroundPanel';
 
 addons.register(ADDON_ID, api => {
@@ -10,5 +10,6 @@ addons.register(ADDON_ID, api => {
     title: 'Backgrounds',
     // eslint-disable-next-line react/prop-types
     render: ({ active }) => <BackgroundPanel channel={channel} api={api} active={active} />,
+    paramKey: PARAM_KEY,
   });
 });
diff --git a/addons/ondevice-knobs/package.json b/addons/ondevice-knobs/package.json
index 39ec05807e06..a3aa791da3c7 100644
--- a/addons/ondevice-knobs/package.json
+++ b/addons/ondevice-knobs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-knobs",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "Display storybook story knobs on your deviced.",
   "keywords": [
     "addon",
@@ -21,8 +21,8 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.30",
-    "@storybook/core-events": "5.2.0-alpha.30",
+    "@storybook/addons": "5.2.0-alpha.36",
+    "@storybook/core-events": "5.2.0-alpha.36",
     "core-js": "^3.0.1",
     "deep-equal": "^1.0.1",
     "prop-types": "^15.7.2",
diff --git a/addons/ondevice-knobs/src/PropForm.js b/addons/ondevice-knobs/src/PropForm.js
index 93770e5e3e71..e0c35334cf1b 100644
--- a/addons/ondevice-knobs/src/PropForm.js
+++ b/addons/ondevice-knobs/src/PropForm.js
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { View } from 'react-native';
 import PropField from './PropField';
 
-export default class propForm extends React.Component {
+export default class PropForm extends React.Component {
   makeChangeHandler(name, type) {
     return value => {
       const { onFieldChange } = this.props;
@@ -38,13 +38,13 @@ export default class propForm extends React.Component {
   }
 }
 
-propForm.displayName = 'propForm';
+PropForm.displayName = 'PropForm';
 
-propForm.defaultProps = {
+PropForm.defaultProps = {
   knobs: [],
 };
 
-propForm.propTypes = {
+PropForm.propTypes = {
   knobs: PropTypes.arrayOf(
     PropTypes.shape({
       name: PropTypes.string,
diff --git a/addons/ondevice-knobs/src/index.js b/addons/ondevice-knobs/src/index.js
index 8286083ad1ed..9e46af4a4071 100644
--- a/addons/ondevice-knobs/src/index.js
+++ b/addons/ondevice-knobs/src/index.js
@@ -9,6 +9,7 @@ export function register() {
       title: 'Knobs',
       // eslint-disable-next-line react/prop-types
       render: ({ active, key }) => <Panel key={key} channel={channel} active={active} />,
+      paramKey: 'knobs',
     });
   });
 }
diff --git a/addons/ondevice-notes/package.json b/addons/ondevice-notes/package.json
index bc22f860f236..d3ca22ab409f 100644
--- a/addons/ondevice-notes/package.json
+++ b/addons/ondevice-notes/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-notes",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "Write notes for your react-native Storybook stories.",
   "keywords": [
     "addon",
@@ -20,7 +20,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.30",
+    "@storybook/addons": "5.2.0-alpha.36",
     "core-js": "^3.0.1",
     "prop-types": "^15.7.2",
     "react-native-simple-markdown": "^1.1.0"
diff --git a/addons/ondevice-notes/src/index.js b/addons/ondevice-notes/src/index.js
index 5200b63f8454..28be51837efa 100644
--- a/addons/ondevice-notes/src/index.js
+++ b/addons/ondevice-notes/src/index.js
@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-undef
 if (__DEV__) {
   console.log("import '@storybook/addon-ondevice-notes/register' to register the notes addon");
-}
\ No newline at end of file
+}
diff --git a/addons/ondevice-notes/src/register.js b/addons/ondevice-notes/src/register.js
index 1ed3a38bfcdf..c3850db2047a 100644
--- a/addons/ondevice-notes/src/register.js
+++ b/addons/ondevice-notes/src/register.js
@@ -1,3 +1,6 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable react/destructuring-assignment */
+/* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 import { View } from 'react-native';
 import Markdown from 'react-native-simple-markdown';
@@ -7,10 +10,6 @@ import Events from '@storybook/core-events';
 export const PARAM_KEY = `notes`;
 
 class Notes extends React.Component {
-  setBackgroundFromSwatch = background => {
-    this.props.channel.emit(Constants.UPDATE_BACKGROUND, background);
-  };
-
   componentDidMount() {
     this.props.channel.on(Events.SELECT_STORY, this.onStorySelected);
   }
@@ -50,5 +49,6 @@ addons.register('storybook/notes', api => {
   addons.addPanel('storybook/notes/panel', {
     title: 'Notes',
     render: ({ active, key }) => <Notes key={key} channel={channel} api={api} active={active} />,
+    paramKey: PARAM_KEY,
   });
 });
diff --git a/addons/options/package.json b/addons/options/package.json
index f794d8eed7e4..285040488ce2 100644
--- a/addons/options/package.json
+++ b/addons/options/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-options",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "Options addon for storybook",
   "keywords": [
     "addon",
@@ -22,7 +22,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.30",
+    "@storybook/addons": "5.2.0-alpha.36",
     "core-js": "^3.0.1",
     "util-deprecate": "^1.0.2"
   },
diff --git a/addons/queryparams/package.json b/addons/queryparams/package.json
index dd15b573a4e1..8998ffbfb809 100644
--- a/addons/queryparams/package.json
+++ b/addons/queryparams/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-queryparams",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "parameter addon for storybook",
   "keywords": [
     "addon",
@@ -23,12 +23,12 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.30",
-    "@storybook/api": "5.2.0-alpha.30",
-    "@storybook/client-logger": "5.2.0-alpha.30",
-    "@storybook/components": "5.2.0-alpha.30",
-    "@storybook/core-events": "5.2.0-alpha.30",
-    "@storybook/theming": "5.2.0-alpha.30",
+    "@storybook/addons": "5.2.0-alpha.36",
+    "@storybook/api": "5.2.0-alpha.36",
+    "@storybook/client-logger": "5.2.0-alpha.36",
+    "@storybook/components": "5.2.0-alpha.36",
+    "@storybook/core-events": "5.2.0-alpha.36",
+    "@storybook/theming": "5.2.0-alpha.36",
     "common-tags": "^1.8.0",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
diff --git a/addons/storyshots/storyshots-core/package.json b/addons/storyshots/storyshots-core/package.json
index 3779d7fa69f5..3c56037304e3 100644
--- a/addons/storyshots/storyshots-core/package.json
+++ b/addons/storyshots/storyshots-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storyshots",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.",
   "keywords": [
     "addon",
@@ -25,7 +25,7 @@
     "storybook": "start-storybook -p 6006"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.30",
+    "@storybook/addons": "5.2.0-alpha.36",
     "core-js": "^3.0.1",
     "glob": "^7.1.3",
     "global": "^4.3.2",
diff --git a/addons/storyshots/storyshots-core/src/api/integrityTestTemplate.js b/addons/storyshots/storyshots-core/src/api/integrityTestTemplate.js
index 684c99c4b9e9..cc7fa979914e 100644
--- a/addons/storyshots/storyshots-core/src/api/integrityTestTemplate.js
+++ b/addons/storyshots/storyshots-core/src/api/integrityTestTemplate.js
@@ -16,7 +16,8 @@ function integrityTest(integrityOptions, stories2snapsConverter) {
         const possibleStoriesFiles = stories2snapsConverter.getPossibleStoriesFiles(fileName);
         return !possibleStoriesFiles.some(fs.existsSync);
       });
-      expect(abandonedStoryshots.length).toBe(0);
+
+      expect(abandonedStoryshots).toEqual([]);
     });
   });
 }
diff --git a/addons/storyshots/storyshots-puppeteer/package.json b/addons/storyshots/storyshots-puppeteer/package.json
index b98115bf3520..05e2ebffc6f0 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": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "Image snappshots addition to StoryShots base on puppeteer",
   "keywords": [
     "addon",
@@ -22,8 +22,8 @@
     "prepare": "node ../../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/node-logger": "5.2.0-alpha.30",
-    "@storybook/router": "5.2.0-alpha.30",
+    "@storybook/node-logger": "5.2.0-alpha.36",
+    "@storybook/router": "5.2.0-alpha.36",
     "core-js": "^3.0.1",
     "jest-image-snapshot": "^2.8.2",
     "regenerator-runtime": "^0.12.1"
@@ -32,7 +32,7 @@
     "puppeteer": "^1.12.2"
   },
   "peerDependencies": {
-    "@storybook/addon-storyshots": "5.2.0-alpha.23",
+    "@storybook/addon-storyshots": "5.2.0-alpha.35",
     "puppeteer": "^1.12.2"
   },
   "publishConfig": {
diff --git a/addons/storysource/package.json b/addons/storysource/package.json
index d7801d56f87a..6dc5951cb766 100644
--- a/addons/storysource/package.json
+++ b/addons/storysource/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storysource",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "Stories addon for storybook",
   "keywords": [
     "addon",
@@ -22,10 +22,10 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.30",
-    "@storybook/components": "5.2.0-alpha.30",
-    "@storybook/router": "5.2.0-alpha.30",
-    "@storybook/theming": "5.2.0-alpha.30",
+    "@storybook/addons": "5.2.0-alpha.36",
+    "@storybook/components": "5.2.0-alpha.36",
+    "@storybook/router": "5.2.0-alpha.36",
+    "@storybook/theming": "5.2.0-alpha.36",
     "core-js": "^3.0.1",
     "estraverse": "^4.2.0",
     "loader-utils": "^1.2.3",
diff --git a/addons/viewport/package.json b/addons/viewport/package.json
index 045b7e651b89..0acb76b9d2a3 100644
--- a/addons/viewport/package.json
+++ b/addons/viewport/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-viewport",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "Storybook addon to change the viewport size to mobile",
   "keywords": [
     "addon",
@@ -21,12 +21,12 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.30",
-    "@storybook/api": "5.2.0-alpha.30",
-    "@storybook/client-logger": "5.2.0-alpha.30",
-    "@storybook/components": "5.2.0-alpha.30",
-    "@storybook/core-events": "5.2.0-alpha.30",
-    "@storybook/theming": "5.2.0-alpha.30",
+    "@storybook/addons": "5.2.0-alpha.36",
+    "@storybook/api": "5.2.0-alpha.36",
+    "@storybook/client-logger": "5.2.0-alpha.36",
+    "@storybook/components": "5.2.0-alpha.36",
+    "@storybook/core-events": "5.2.0-alpha.36",
+    "@storybook/theming": "5.2.0-alpha.36",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "memoizerific": "^1.11.3",
diff --git a/app/angular/package.json b/app/angular/package.json
index 003b47141693..6ab7b608e28e 100644
--- a/app/angular/package.json
+++ b/app/angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -26,8 +26,8 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/core": "5.2.0-alpha.30",
-    "@storybook/node-logger": "5.2.0-alpha.30",
+    "@storybook/core": "5.2.0-alpha.36",
+    "@storybook/node-logger": "5.2.0-alpha.36",
     "angular2-template-loader": "^0.6.2",
     "core-js": "^3.0.1",
     "fork-ts-checker-webpack-plugin": "^1.3.4",
diff --git a/app/ember/package.json b/app/ember/package.json
index 17bb64021cff..3dd8ed9d8273 100644
--- a/app/ember/package.json
+++ b/app/ember/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/ember",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
   "homepage": "https://github.com/storybookjs/storybook/tree/master/app/ember",
   "bugs": {
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@ember/test-helpers": "^1.5.0",
-    "@storybook/core": "5.2.0-alpha.30",
+    "@storybook/core": "5.2.0-alpha.36",
     "common-tags": "^1.8.0",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
diff --git a/app/html/package.json b/app/html/package.json
index e813a88ea80a..58e4c51432d9 100644
--- a/app/html/package.json
+++ b/app/html/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/html",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -25,7 +25,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/core": "5.2.0-alpha.30",
+    "@storybook/core": "5.2.0-alpha.36",
     "common-tags": "^1.8.0",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
diff --git a/app/marko/package.json b/app/marko/package.json
index 4692cbf8bb23..df2816d87017 100644
--- a/app/marko/package.json
+++ b/app/marko/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/marko",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "Storybook for Marko: Develop Marko Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -26,7 +26,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/core": "5.2.0-alpha.30",
+    "@storybook/core": "5.2.0-alpha.36",
     "common-tags": "^1.8.0",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
diff --git a/app/mithril/package.json b/app/mithril/package.json
index 8979996f609e..41d5b8a98fb4 100644
--- a/app/mithril/package.json
+++ b/app/mithril/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/mithril",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "Storybook for Mithril: Develop Mithril Component in isolation.",
   "keywords": [
     "storybook"
@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "@babel/plugin-transform-react-jsx": "^7.3.0",
-    "@storybook/core": "5.2.0-alpha.30",
+    "@storybook/core": "5.2.0-alpha.36",
     "common-tags": "^1.8.0",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
diff --git a/app/polymer/package.json b/app/polymer/package.json
index 51e2682889f0..d4c38a250ce0 100644
--- a/app/polymer/package.json
+++ b/app/polymer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/polymer",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "Storybook for Polymer: Develop Polymer components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -25,7 +25,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/core": "5.2.0-alpha.30",
+    "@storybook/core": "5.2.0-alpha.36",
     "@webcomponents/webcomponentsjs": "^1.2.0",
     "common-tags": "^1.8.0",
     "core-js": "^3.0.1",
diff --git a/app/preact/package.json b/app/preact/package.json
index 294f9276bb3a..31626e5780bf 100644
--- a/app/preact/package.json
+++ b/app/preact/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preact",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "Storybook for Preact: Develop Preact Component in isolation.",
   "keywords": [
     "storybook"
@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "@babel/plugin-transform-react-jsx": "^7.3.0",
-    "@storybook/core": "5.2.0-alpha.30",
+    "@storybook/core": "5.2.0-alpha.36",
     "common-tags": "^1.8.0",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
diff --git a/app/rax/package.json b/app/rax/package.json
index dcee7cef19f2..cc0c4abf49fb 100644
--- a/app/rax/package.json
+++ b/app/rax/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/rax",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "Storybook for Rax: Develop Rax Component in isolation.",
   "keywords": [
     "storybook",
@@ -27,7 +27,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/core": "5.2.0-alpha.30",
+    "@storybook/core": "5.2.0-alpha.36",
     "babel-preset-rax": "^1.0.0-beta.0",
     "common-tags": "^1.8.0",
     "core-js": "^2.6.2",
diff --git a/app/rax/src/client/index.js b/app/rax/src/client/index.js
index 21d3f4bf39c9..17b16c61bc58 100644
--- a/app/rax/src/client/index.js
+++ b/app/rax/src/client/index.js
@@ -7,4 +7,5 @@ export {
   getStorybook,
   forceReRender,
   raw,
+  load,
 } from './preview';
diff --git a/app/rax/src/client/preview/index.js b/app/rax/src/client/preview/index.js
index 877b04bca126..8ba31e86c30f 100644
--- a/app/rax/src/client/preview/index.js
+++ b/app/rax/src/client/preview/index.js
@@ -3,10 +3,9 @@ import { start } from '@storybook/core/client';
 import './globals';
 import render from './render';
 
-const { clientApi, configApi, forceReRender } = start(render);
+const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
 
 export const {
-  storiesOf,
   setAddon,
   addDecorator,
   addParameters,
@@ -15,5 +14,9 @@ export const {
   raw,
 } = clientApi;
 
+const framework = 'rax';
+export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
+export const load = (...args) => coreLoad(...args, framework);
+
 export const { configure } = configApi;
 export { forceReRender };
diff --git a/app/react-native-server/package.json b/app/react-native-server/package.json
index 7e30a34331ce..fb1173fa25a7 100644
--- a/app/react-native-server/package.json
+++ b/app/react-native-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-server",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -24,12 +24,12 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.30",
-    "@storybook/api": "5.2.0-alpha.30",
-    "@storybook/channel-websocket": "5.2.0-alpha.30",
-    "@storybook/core": "5.2.0-alpha.30",
-    "@storybook/core-events": "5.2.0-alpha.30",
-    "@storybook/ui": "5.2.0-alpha.30",
+    "@storybook/addons": "5.2.0-alpha.36",
+    "@storybook/api": "5.2.0-alpha.36",
+    "@storybook/channel-websocket": "5.2.0-alpha.36",
+    "@storybook/core": "5.2.0-alpha.36",
+    "@storybook/core-events": "5.2.0-alpha.36",
+    "@storybook/ui": "5.2.0-alpha.36",
     "commander": "^2.19.0",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
diff --git a/app/react-native-server/src/client/manager/provider.js b/app/react-native-server/src/client/manager/provider.js
index 334a5a40167f..688ed6f7e833 100644
--- a/app/react-native-server/src/client/manager/provider.js
+++ b/app/react-native-server/src/client/manager/provider.js
@@ -51,8 +51,7 @@ export default class ReactProvider extends Provider {
       <Consumer filter={mapper} pure>
         {({ storiesHash, storyId, api, viewMode }) => {
           if (storiesHash[storyId]) {
-            const { kind, story } = storiesHash[storyId];
-            api.emit(Events.SET_CURRENT_STORY, { kind, story });
+            api.emit(Events.SET_CURRENT_STORY, { storyId });
           }
           return viewMode === 'story' ? <PreviewHelp /> : null;
         }}
@@ -62,12 +61,6 @@ export default class ReactProvider extends Provider {
 
   handleAPI(api) {
     addons.loadAddons(api);
-    api.on(Events.STORY_CHANGED, () => {
-      api.emit(Events.SET_CURRENT_STORY, this.selection);
-    });
-    api.on(Events.GET_CURRENT_STORY, () => {
-      api.emit(Events.SET_CURRENT_STORY, this.selection);
-    });
     api.emit(Events.GET_STORIES);
   }
 }
diff --git a/app/react-native/package.json b/app/react-native/package.json
index 33f689970f29..1473751abc05 100644
--- a/app/react-native/package.json
+++ b/app/react-native/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -23,11 +23,11 @@
   },
   "dependencies": {
     "@emotion/native": "^10.0.10",
-    "@storybook/addons": "5.2.0-alpha.30",
-    "@storybook/channel-websocket": "5.2.0-alpha.30",
-    "@storybook/channels": "5.2.0-alpha.30",
-    "@storybook/client-api": "5.2.0-alpha.30",
-    "@storybook/core-events": "5.2.0-alpha.30",
+    "@storybook/addons": "5.2.0-alpha.36",
+    "@storybook/channel-websocket": "5.2.0-alpha.36",
+    "@storybook/channels": "5.2.0-alpha.36",
+    "@storybook/client-api": "5.2.0-alpha.36",
+    "@storybook/core-events": "5.2.0-alpha.36",
     "core-js": "^3.0.1",
     "react-native-swipe-gestures": "^1.0.3",
     "rn-host-detect": "^1.1.5"
diff --git a/app/react-native/src/index.ts b/app/react-native/src/index.ts
index 98b2a8d5c06e..a13cd197f7d9 100644
--- a/app/react-native/src/index.ts
+++ b/app/react-native/src/index.ts
@@ -1,3 +1,4 @@
+/* eslint-disable prefer-destructuring */
 import Preview from './preview';
 
 const preview = new Preview();
diff --git a/app/react-native/src/preview/components/OnDeviceUI/absolute-positioned-keyboard-aware-view.tsx b/app/react-native/src/preview/components/OnDeviceUI/absolute-positioned-keyboard-aware-view.tsx
index 51c49e1e95f9..d368802cdd5f 100644
--- a/app/react-native/src/preview/components/OnDeviceUI/absolute-positioned-keyboard-aware-view.tsx
+++ b/app/react-native/src/preview/components/OnDeviceUI/absolute-positioned-keyboard-aware-view.tsx
@@ -22,7 +22,9 @@ type Props = {
 // To avoid issues we use absolute positioned element with predefined screen size
 export default class AbsolutePositionedKeyboardAwareView extends PureComponent<Props> {
   keyboardDidShowListener: EmitterSubscription;
+
   keyboardDidHideListener: EmitterSubscription;
+
   keyboardOpen: boolean;
 
   componentWillMount() {
diff --git a/app/react-native/src/preview/components/OnDeviceUI/animation.ts b/app/react-native/src/preview/components/OnDeviceUI/animation.ts
index 4ce7747b158e..f19ef152fd80 100644
--- a/app/react-native/src/preview/components/OnDeviceUI/animation.ts
+++ b/app/react-native/src/preview/components/OnDeviceUI/animation.ts
@@ -1,5 +1,5 @@
-import { NAVIGATOR, PREVIEW, ADDONS } from './navigation/constants';
 import { Animated } from 'react-native';
+import { NAVIGATOR, PREVIEW, ADDONS } from './navigation/constants';
 
 const PREVIEW_SCALE = 0.3;
 
diff --git a/app/react-native/src/preview/components/OnDeviceUI/index.tsx b/app/react-native/src/preview/components/OnDeviceUI/index.tsx
index e875ec9394bb..5718b0d86e19 100644
--- a/app/react-native/src/preview/components/OnDeviceUI/index.tsx
+++ b/app/react-native/src/preview/components/OnDeviceUI/index.tsx
@@ -8,7 +8,6 @@ import {
   TouchableOpacityProps,
 } from 'react-native';
 import styled from '@emotion/native';
-import Events from '@storybook/core-events';
 import addons from '@storybook/addons';
 import Channel from '@storybook/channels';
 import StoryListView from '../StoryListView';
@@ -36,14 +35,11 @@ interface OnDeviceUIProps {
   url?: string;
   tabOpen?: number;
   isUIHidden?: boolean;
-  getInitialStory?: (...args: any[]) => any;
   shouldDisableKeyboardAvoidingView?: boolean;
   keyboardAvoidingViewVerticalOffset?: number;
 }
 
 interface OnDeviceUIState {
-  selection: any;
-  storyFn: any;
   tabOpen: number;
   slideBetweenAnimation: boolean;
   previewWidth: number;
@@ -64,6 +60,7 @@ const Preview: typeof TouchableOpacity = styled.TouchableOpacity`
 
 export default class OnDeviceUI extends PureComponent<OnDeviceUIProps, OnDeviceUIState> {
   animatedValue: Animated.Value;
+
   channel: Channel;
 
   constructor(props: OnDeviceUIProps) {
@@ -72,8 +69,6 @@ export default class OnDeviceUI extends PureComponent<OnDeviceUIProps, OnDeviceU
     this.state = {
       tabOpen,
       slideBetweenAnimation: false,
-      selection: {},
-      storyFn: null,
       previewWidth: 0,
       previewHeight: 0,
     };
@@ -81,24 +76,6 @@ export default class OnDeviceUI extends PureComponent<OnDeviceUIProps, OnDeviceU
     this.channel = addons.getChannel();
   }
 
-  async componentWillMount() {
-    const { getInitialStory } = this.props;
-    if (getInitialStory) {
-      const story = await getInitialStory();
-      this.setState({
-        selection: story || {},
-        storyFn: story ? story.storyFn : null,
-      });
-    }
-    this.channel.on(Events.SELECT_STORY, this.handleStoryChange);
-    this.channel.on(Events.FORCE_RE_RENDER, this.forceReRender);
-  }
-
-  componentWillUnmount() {
-    this.channel.removeListener(Events.SELECT_STORY, this.handleStoryChange);
-    this.channel.removeListener(Events.FORCE_RE_RENDER, this.forceReRender);
-  }
-
   onLayout = ({ previewWidth, previewHeight }: PreviewDimens) => {
     this.setState({ previewWidth, previewHeight });
   };
@@ -107,24 +84,6 @@ export default class OnDeviceUI extends PureComponent<OnDeviceUIProps, OnDeviceU
     this.handleToggleTab(PREVIEW);
   };
 
-  forceReRender = () => {
-    this.forceUpdate();
-  };
-
-  handleStoryChange = (selection: any) => {
-    const { selection: prevSelection } = this.state;
-    if (selection.kind === prevSelection.kind && selection.story === prevSelection.story) {
-      this.handleToggleTab(PREVIEW);
-    }
-    this.setState({
-      selection: {
-        kind: selection.kind,
-        story: selection.story,
-      },
-      storyFn: selection.storyFn,
-    });
-  };
-
   handleToggleTab = (newTabOpen: number) => {
     const { tabOpen } = this.state;
     if (newTabOpen === tabOpen) {
@@ -155,14 +114,7 @@ export default class OnDeviceUI extends PureComponent<OnDeviceUIProps, OnDeviceU
       keyboardAvoidingViewVerticalOffset,
     } = this.props;
 
-    const {
-      tabOpen,
-      slideBetweenAnimation,
-      selection,
-      storyFn,
-      previewWidth,
-      previewHeight,
-    } = this.state;
+    const { tabOpen, slideBetweenAnimation, previewWidth, previewHeight } = this.state;
 
     const previewWrapperStyles = [
       { flex: 1 },
@@ -190,21 +142,12 @@ export default class OnDeviceUI extends PureComponent<OnDeviceUIProps, OnDeviceU
                 disabled={tabOpen === PREVIEW}
                 onPress={this.handleOpenPreview}
               >
-                <StoryView
-                  url={url}
-                  selection={selection}
-                  storyFn={storyFn}
-                  listenToEvents={false}
-                />
+                <StoryView url={url} onDevice stories={stories} />
               </Preview>
             </Animated.View>
           </Animated.View>
           <Panel style={getNavigatorPanelPosition(this.animatedValue, previewWidth)}>
-            <StoryListView
-              stories={stories}
-              selectedKind={selection.kind}
-              selectedStory={selection.story}
-            />
+            <StoryListView stories={stories} />
           </Panel>
           <Panel style={getAddonPanelPosition(this.animatedValue, previewWidth)}>
             <Addons />
diff --git a/app/react-native/src/preview/components/OnDeviceUI/navigation/index.tsx b/app/react-native/src/preview/components/OnDeviceUI/navigation/index.tsx
index f2d03cf9aa9e..7e30ebe39825 100644
--- a/app/react-native/src/preview/components/OnDeviceUI/navigation/index.tsx
+++ b/app/react-native/src/preview/components/OnDeviceUI/navigation/index.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/destructuring-assignment */
 import React, { PureComponent } from 'react';
 import { View, SafeAreaView, StyleSheet } from 'react-native';
 import GestureRecognizer, { GestureRecognizerConfig } from 'react-native-swipe-gestures';
diff --git a/app/react-native/src/preview/components/StoryListView/index.tsx b/app/react-native/src/preview/components/StoryListView/index.tsx
index 3f296918c679..1d386c7d655a 100644
--- a/app/react-native/src/preview/components/StoryListView/index.tsx
+++ b/app/react-native/src/preview/components/StoryListView/index.tsx
@@ -64,8 +64,6 @@ const ListItem: React.FunctionComponent<ListItemProps> = ({ kind, title, selecte
 
 interface Props {
   stories: any;
-  selectedKind?: string;
-  selectedStory?: string;
 }
 
 interface State {
@@ -90,28 +88,35 @@ export default class StoryListView extends Component<Props, State> {
   componentDidMount() {
     const channel = addons.getChannel();
     channel.on(Events.STORY_ADDED, this.handleStoryAdded);
+    channel.on(Events.SELECT_STORY, this.forceReRender);
     this.handleStoryAdded();
   }
 
   componentWillUnmount() {
     const channel = addons.getChannel();
     channel.removeListener(Events.STORY_ADDED, this.handleStoryAdded);
+    channel.removeListener(Events.SELECT_STORY, this.forceReRender);
   }
 
+  forceReRender = () => {
+    this.forceUpdate();
+  };
+
   handleStoryAdded = () => {
     const { stories } = this.props;
 
     if (stories) {
-      const data = stories.dumpStoryBook().map(
-        (section: any) => ({
-          title: section.kind,
-          data: section.stories.map((story: any) => ({
-            key: story,
-            name: story,
-            kind: section.kind,
-          })),
-        }),
-        {}
+      const data = Object.values(
+        stories
+          .raw()
+          .reduce((acc: { [kind: string]: { title: string; data: any[] } }, story: any) => {
+            acc[story.kind] = {
+              title: story.kind,
+              data: (acc[story.kind] ? acc[story.kind].data : []).concat(story),
+            };
+
+            return acc;
+          }, {})
       );
 
       this.setState({ data, originalData: data });
@@ -146,13 +151,15 @@ export default class StoryListView extends Component<Props, State> {
     this.setState({ data: filteredData });
   };
 
-  changeStory(kind: string, story: string) {
+  changeStory(storyId: string) {
     const channel = addons.getChannel();
-    channel.emit(Events.SET_CURRENT_STORY, { kind, story });
+    channel.emit(Events.SET_CURRENT_STORY, { storyId });
   }
 
   render() {
-    const { selectedKind, selectedStory } = this.props;
+    const { stories } = this.props;
+    const { storyId } = stories.getSelection();
+    const selectedStory = stories.fromId(storyId);
     const { data } = this.state;
 
     return (
@@ -171,12 +178,12 @@ export default class StoryListView extends Component<Props, State> {
             <ListItem
               title={item.name}
               kind={item.kind}
-              selected={item.kind === selectedKind && item.name === selectedStory}
-              onPress={() => this.changeStory(item.kind, item.name)}
+              selected={selectedStory && item.id === selectedStory.id}
+              onPress={() => this.changeStory(item.id)}
             />
           )}
           renderSectionHeader={({ section: { title } }) => (
-            <SectionHeader title={title} selected={title === selectedKind} />
+            <SectionHeader title={title} selected={selectedStory && title === selectedStory.kind} />
           )}
           keyExtractor={(item, index) => item + index}
           sections={data}
diff --git a/app/react-native/src/preview/components/StoryView/index.tsx b/app/react-native/src/preview/components/StoryView/index.tsx
index 3318b568773f..5b75ecaf7040 100644
--- a/app/react-native/src/preview/components/StoryView/index.tsx
+++ b/app/react-native/src/preview/components/StoryView/index.tsx
@@ -5,15 +5,9 @@ import addons from '@storybook/addons';
 import Events from '@storybook/core-events';
 
 interface Props {
-  listenToEvents: boolean;
-  selection?: any;
-  storyFn?: any;
+  stories: any;
   url: string;
-}
-
-interface State {
-  storyFn?: any;
-  selection?: any;
+  onDevice?: boolean;
 }
 
 const HelpContainer = styled.View`
@@ -24,33 +18,23 @@ const HelpContainer = styled.View`
   justify-content: center;
 `;
 
-export default class StoryView extends Component<Props, State> {
+export default class StoryView extends Component<Props> {
   componentDidMount() {
-    if (this.props.listenToEvents) {
-      const channel = addons.getChannel();
-      channel.on(Events.SELECT_STORY, this.selectStory);
-      channel.on(Events.FORCE_RE_RENDER, this.forceReRender);
-    }
+    const channel = addons.getChannel();
+    channel.on(Events.STORY_RENDER, this.forceReRender);
+    channel.on(Events.FORCE_RE_RENDER, this.forceReRender);
   }
 
   componentWillUnmount() {
-    const { listenToEvents } = this.props;
-
-    if (listenToEvents) {
-      const channel = addons.getChannel();
-      channel.removeListener(Events.SELECT_STORY, this.selectStory);
-      channel.removeListener(Events.FORCE_RE_RENDER, this.forceReRender);
-    }
+    const channel = addons.getChannel();
+    channel.removeListener(Events.STORY_RENDER, this.forceReRender);
+    channel.removeListener(Events.FORCE_RE_RENDER, this.forceReRender);
   }
 
   forceReRender = () => {
     this.forceUpdate();
   };
 
-  selectStory = (selection: any) => {
-    this.setState({ storyFn: selection.storyFn, selection });
-  };
-
   renderHelp = () => {
     const { url } = this.props;
     return (
@@ -75,41 +59,23 @@ export default class StoryView extends Component<Props, State> {
   );
 
   render() {
-    const { listenToEvents } = this.props;
-
-    if (listenToEvents) {
-      return this.renderListening();
-    } else {
-      return this.renderOnDevice();
+    const { onDevice, stories } = this.props;
+    const { storyId } = stories.getSelection();
+    const story = stories.fromId(storyId);
+
+    if (story && story.storyFn) {
+      const { id, storyFn } = story;
+      return (
+        <View key={id} style={{ flex: 1 }}>
+          {storyFn()}
+        </View>
+      );
     }
-  }
 
-  renderListening = () => {
-    if (!this.state) {
-      return null;
+    if (onDevice) {
+      return this.renderOnDeviceUIHelp();
     }
-    const { storyFn, selection } = this.state;
-    const { kind, story } = selection;
-
-    return storyFn ? (
-      <View key={`${kind}:::${story}`} style={{ flex: 1 }}>
-        {storyFn()}
-      </View>
-    ) : (
-      this.renderHelp()
-    );
-  };
 
-  renderOnDevice = () => {
-    const { storyFn, selection } = this.props;
-    const { kind, story } = selection;
-
-    return storyFn ? (
-      <View key={`${kind}:::${story}`} style={{ flex: 1 }}>
-        {storyFn()}
-      </View>
-    ) : (
-      this.renderOnDeviceUIHelp()
-    );
-  };
+    return this.renderHelp();
+  }
 }
diff --git a/app/react-native/src/preview/index.tsx b/app/react-native/src/preview/index.tsx
index b45f3b4b454c..7b7fc682317e 100644
--- a/app/react-native/src/preview/index.tsx
+++ b/app/react-native/src/preview/index.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies, no-underscore-dangle */
 import React from 'react';
 import { AsyncStorage } from 'react-native';
 import { ThemeProvider } from 'emotion-theming';
@@ -32,16 +33,19 @@ export type Params = {
 } & EmotionProps;
 
 export default class Preview {
-  currentStory: any;
   _clientApi: ClientApi;
+
   _stories: StoryStore;
+
   _addons: any;
+
   _decorators: any[];
 
+  _asyncStorageStoryId: string;
+
   constructor() {
     this._addons = {};
     this._decorators = [];
-
     this._stories = new StoryStore({});
     this._clientApi = new ClientApi({ storyStore: this._stories });
   }
@@ -64,9 +68,6 @@ export default class Preview {
 
     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;
 
     try {
       channel = addons.getChannel();
@@ -78,6 +79,7 @@ export default class Preview {
     if (!channel || params.resetStorybook) {
       if (onDeviceUI && params.disableWebsockets) {
         channel = new Channel({ async: true });
+        this._setInitialStory(initialSelection, shouldPersistSelection);
       } else {
         const host = getHost(params.host || 'localhost');
         const port = `:${params.port || 7007}`;
@@ -93,11 +95,7 @@ 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;
           },
         });
       }
@@ -113,13 +111,6 @@ export default class Preview {
 
     this._sendSetStories();
 
-    // If the app is started with server running, set the story as the one selected in the browser
-    if (webUrl) {
-      this._sendGetCurrentStory();
-    } else {
-      setInitialStory = true;
-    }
-
     const preview = this;
 
     addons.loadAddons(this._clientApi);
@@ -127,7 +118,6 @@ export default class Preview {
     const appliedTheme = { ...theme, ...params.theme };
 
     // react-native hot module loader must take in a Class - https://github.com/facebook/react-native/issues/10991
-    // eslint-disable-next-line react/prefer-stateless-function
     return class StorybookRoot extends React.PureComponent {
       render() {
         if (onDeviceUI) {
@@ -138,11 +128,6 @@ export default class Preview {
                 url={webUrl}
                 isUIHidden={params.isUIHidden}
                 tabOpen={params.tabOpen}
-                getInitialStory={
-                  setInitialStory
-                    ? preview._getInitialStory(initialSelection, shouldPersistSelection)
-                    : null
-                }
                 shouldDisableKeyboardAvoidingView={params.shouldDisableKeyboardAvoidingView}
                 keyboardAvoidingViewVerticalOffset={params.keyboardAvoidingViewVerticalOffset}
               />
@@ -152,7 +137,7 @@ export default class Preview {
 
         return (
           <ThemeProvider theme={appliedTheme}>
-            <StoryView url={webUrl} listenToEvents />
+            <StoryView stories={preview._stories} url={webUrl} />
           </ThemeProvider>
         );
       }
@@ -164,14 +149,6 @@ export default class Preview {
     const stories = this._stories.extract();
     channel.emit(Events.SET_STORIES, { stories });
     channel.emit(Events.STORIES_CONFIGURED);
-    if (this.currentStory) {
-      channel.emit(Events.SET_CURRENT_STORY, this.currentStory);
-    }
-  }
-
-  _sendGetCurrentStory() {
-    const channel = addons.getChannel();
-    channel.emit(Events.GET_CURRENT_STORY);
   }
 
   _setInitialStory = async (initialSelection: any, shouldPersistSelection = true) => {
@@ -187,11 +164,18 @@ export default class Preview {
     if (initialSelection && this._checkStory(initialSelection)) {
       story = initialSelection;
     } else if (shouldPersistSelection) {
-      const value = await AsyncStorage.getItem(STORAGE_KEY);
-      const previousStory = JSON.parse(value);
+      try {
+        let value = this._asyncStorageStoryId;
+        if (!value) {
+          value = JSON.parse(await AsyncStorage.getItem(STORAGE_KEY));
+          this._asyncStorageStoryId = value;
+        }
 
-      if (this._checkStory(previousStory)) {
-        story = previousStory;
+        if (this._checkStory(value)) {
+          story = value;
+        }
+      } catch (e) {
+        //
       }
     }
 
@@ -199,43 +183,44 @@ export default class Preview {
       return this._getStory(story);
     }
 
-    const dump = this._stories.dumpStoryBook();
-
-    const nonEmptyKind = dump.find((kind: any) => kind.stories.length > 0);
-    if (nonEmptyKind) {
-      return this._getStory({ kind: nonEmptyKind.kind, story: nonEmptyKind.stories[0] });
+    const stories = this._stories.raw();
+    if (stories && stories.length) {
+      return this._getStory(stories[0].id);
     }
 
     return null;
   };
 
-  _getStory(selection: { kind: string; story: string }) {
-    const { kind, story } = selection;
-    const storyFn = this._stories.getStoryWithContext(kind, story);
-    return { ...selection, storyFn };
+  _getStory(storyId: string) {
+    return this._stories.fromId(storyId);
   }
 
-  _selectStoryEvent(selection: { kind: string; story: string }) {
-    AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(selection));
+  _selectStoryEvent({ storyId }: { storyId: string }) {
+    if (storyId) {
+      try {
+        AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(storyId));
+      } catch (e) {
+        //
+      }
 
-    if (selection) {
-      const story = this._getStory(selection);
+      const story = this._getStory(storyId);
       this._selectStory(story);
     }
   }
 
   _selectStory(story: any) {
-    this.currentStory = story;
     const channel = addons.getChannel();
+
+    this._stories.setSelection({ storyId: story.id });
     channel.emit(Events.SELECT_STORY, story);
   }
 
-  _checkStory(selection: any) {
-    if (!selection || typeof selection !== 'object' || !selection.kind || !selection.story) {
+  _checkStory(storyId: string) {
+    if (!storyId) {
       return null;
     }
 
-    const story = this._getStory(selection);
+    const story = this._getStory(storyId);
 
     if (story.storyFn === null) {
       return null;
diff --git a/app/react/package.json b/app/react/package.json
index b6a641a9663c..ce2eb6e13407 100644
--- a/app/react/package.json
+++ b/app/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -29,8 +29,8 @@
     "@babel/plugin-transform-react-constant-elements": "^7.2.0",
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
-    "@storybook/core": "5.2.0-alpha.30",
-    "@storybook/node-logger": "5.2.0-alpha.30",
+    "@storybook/core": "5.2.0-alpha.36",
+    "@storybook/node-logger": "5.2.0-alpha.36",
     "@svgr/webpack": "^4.0.3",
     "babel-plugin-add-react-displayname": "^0.0.5",
     "babel-plugin-named-asset-import": "^0.3.1",
diff --git a/app/riot/package.json b/app/riot/package.json
index 96b04f5f3e9d..d64bf5515bbc 100644
--- a/app/riot/package.json
+++ b/app/riot/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/riot",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "Storybook for riot.js: View riot snippets in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -25,7 +25,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/core": "5.2.0-alpha.30",
+    "@storybook/core": "5.2.0-alpha.36",
     "common-tags": "^1.8.0",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
diff --git a/app/svelte/package.json b/app/svelte/package.json
index 46b88a334598..50176c9ea9b7 100644
--- a/app/svelte/package.json
+++ b/app/svelte/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/svelte",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -26,7 +26,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/core": "5.2.0-alpha.30",
+    "@storybook/core": "5.2.0-alpha.36",
     "common-tags": "^1.8.0",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
diff --git a/app/vue/package.json b/app/vue/package.json
index 7dc31ce7be8e..ee9944cfd80d 100644
--- a/app/vue/package.json
+++ b/app/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -26,7 +26,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/core": "5.2.0-alpha.30",
+    "@storybook/core": "5.2.0-alpha.36",
     "common-tags": "^1.8.0",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
diff --git a/dev-kits/addon-parameter/package.json b/dev-kits/addon-parameter/package.json
index 660d194e46a9..dd195bd344ac 100644
--- a/dev-kits/addon-parameter/package.json
+++ b/dev-kits/addon-parameter/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-parameter",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "parameter addon for storybook",
   "keywords": [
     "devkit",
@@ -24,12 +24,12 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.30",
-    "@storybook/api": "5.2.0-alpha.30",
-    "@storybook/client-logger": "5.2.0-alpha.30",
-    "@storybook/components": "5.2.0-alpha.30",
-    "@storybook/core-events": "5.2.0-alpha.30",
-    "@storybook/theming": "5.2.0-alpha.30",
+    "@storybook/addons": "5.2.0-alpha.36",
+    "@storybook/api": "5.2.0-alpha.36",
+    "@storybook/client-logger": "5.2.0-alpha.36",
+    "@storybook/components": "5.2.0-alpha.36",
+    "@storybook/core-events": "5.2.0-alpha.36",
+    "@storybook/theming": "5.2.0-alpha.36",
     "common-tags": "^1.8.0",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
diff --git a/dev-kits/addon-roundtrip/package.json b/dev-kits/addon-roundtrip/package.json
index 1e2a16197587..befeaf7b9e15 100644
--- a/dev-kits/addon-roundtrip/package.json
+++ b/dev-kits/addon-roundtrip/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-roundtrip",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "roundtrip addon for storybook",
   "keywords": [
     "devkit",
@@ -24,12 +24,12 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.30",
-    "@storybook/api": "5.2.0-alpha.30",
-    "@storybook/client-logger": "5.2.0-alpha.30",
-    "@storybook/components": "5.2.0-alpha.30",
-    "@storybook/core-events": "5.2.0-alpha.30",
-    "@storybook/theming": "5.2.0-alpha.30",
+    "@storybook/addons": "5.2.0-alpha.36",
+    "@storybook/api": "5.2.0-alpha.36",
+    "@storybook/client-logger": "5.2.0-alpha.36",
+    "@storybook/components": "5.2.0-alpha.36",
+    "@storybook/core-events": "5.2.0-alpha.36",
+    "@storybook/theming": "5.2.0-alpha.36",
     "common-tags": "^1.8.0",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
diff --git a/docs/package.json b/docs/package.json
index 6267ab5887e7..d9b2a703eeec 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -15,10 +15,10 @@
     "serve": "gatsby serve"
   },
   "dependencies": {
-    "@storybook/components": "5.2.0-alpha.23",
-    "@storybook/theming": "5.2.0-alpha.23",
+    "@storybook/components": "5.2.0-alpha.34",
+    "@storybook/theming": "5.2.0-alpha.35",
     "babel-loader": "^6.4.1",
-    "babel-plugin-styled-components": "^1.10.1",
+    "babel-plugin-styled-components": "^1.10.6",
     "bootstrap": "^4.3.1",
     "common-tags": "^1.8.0",
     "gatsby": "^1.9.279",
@@ -36,7 +36,7 @@
     "html-react-parser": "^0.8.0",
     "is-builtin-module": "^3.0.0",
     "lodash": "^4.17.11",
-    "marked": "^0.6.2",
+    "marked": "^0.6.3",
     "polished": "^3.4.1",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
@@ -47,7 +47,7 @@
     "react-router": "^4.3.1",
     "react-stack-grid": "^0.7.1",
     "recompose": "^0.30.0",
-    "sitemap": "^2.2.0",
+    "sitemap": "^3.0.0",
     "styled-components": "^4.3.2",
     "validatorjs": "^3.15.1"
   }
diff --git a/docs/src/pages/addons/using-addons/index.md b/docs/src/pages/addons/using-addons/index.md
index 42cec71d9e4c..cbfcb08e0caf 100644
--- a/docs/src/pages/addons/using-addons/index.md
+++ b/docs/src/pages/addons/using-addons/index.md
@@ -65,6 +65,29 @@ Then you'll be able to see those notes when you are viewing the story.
 
 ![Stories with notes](../static/stories-with-notes.png)
 
+## Disable the addon
+
+You can disable an addon panel for a story by adding a `disabled` parameter.
+
+```js
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import Button from './Button';
+
+storiesOf('Button', module).add(
+  'with some emoji',
+  () => (
+    <Button onClick={action('clicked')}>
+      <span role="img" aria-label="so cool">
+        😀 😎 👍 💯
+      </span>
+    </Button>
+  ),
+  { notes: { disabled: true } }
+);
+```
+
 ## Global Configuration
 
 Sometimes you might want to configure an addon globally, as in the case of collocating stories with components, or just simply to keep your stories file cleaner. To do that, you can add your decorators to a config file, typically in `.storybook/config.js`. Here's an example of how you might do that.
diff --git a/docs/src/pages/addons/writing-addons/index.md b/docs/src/pages/addons/writing-addons/index.md
index 6e4d5338bff1..8e3380cd92ed 100644
--- a/docs/src/pages/addons/writing-addons/index.md
+++ b/docs/src/pages/addons/writing-addons/index.md
@@ -89,6 +89,7 @@ addons.register(ADDON_ID, api => {
     type: types.PANEL,
     title,
     render,
+    paramKey: PARAM_KEY,
   });
 });
 ```
@@ -246,6 +247,34 @@ storiesOf('Button', module)
   });
 ```
 
+### Disabling an addon panel
+
+It's possible to disable an addon panel for a particular story.
+ 
+To offer that capability, you need to pass the paramKey when you register the panel
+```js
+addons.register(ADDON_ID, () => {
+  addons.add(PANEL_ID, {
+    type: types.PANEL,
+    title: 'My Addon',
+    render: () => <div>Addon tab content</div>,
+    paramKey: 'myAddon',
+  });
+});
+```
+
+While adding a story, you can then pass a `disabled` parameter.
+
+```js
+storiesOf('Button', module)
+  .add('with text', () => <Button>Hello Button</Button>, {
+    myAddon: {
+      disabled: true,
+    },
+  });
+```
+
+
 ## Styling your addon
 
 We use [emotion](https://emotion.sh) for styling, AND we provide a theme which can be set by the user!
diff --git a/docs/src/pages/configurations/options-parameter/index.md b/docs/src/pages/configurations/options-parameter/index.md
index a7a6c7440366..a4586badd353 100644
--- a/docs/src/pages/configurations/options-parameter/index.md
+++ b/docs/src/pages/configurations/options-parameter/index.md
@@ -74,6 +74,14 @@ addParameters({
      * theme storybook, see link below
      */
     theme: undefined,
+    /**
+    * function to sort stories in the tree view
+    * common use is alphabetical `(a, b) => a[1].id.localeCompare(b[1].id)`
+    * if left undefined, then the order in which the stories are imported will
+    * be the order they display
+    * @type {Function}
+    */
+    storySort: undefined
   },
 });
 ```
diff --git a/docs/src/versions/next.json b/docs/src/versions/next.json
index 1e53ad711201..cf9a0840318b 100644
--- a/docs/src/versions/next.json
+++ b/docs/src/versions/next.json
@@ -1 +1 @@
-{"version":"5.2.0-alpha.30","info":{"plain":"This release merges `release/docs-technical-preview` branch back into `next` through a series of PRs. It also contains other changes that came in on `next` since the last alpha.\n\n### Features\n\n* CLI: Add info command to print environment information ([#6937](https://github.com/storybookjs/storybook/pull/6937))\n* CLI: Use process.env.CI if available ([#7118](https://github.com/storybookjs/storybook/pull/7118))\n* Addon-docs: Source loader library ([#7117](https://github.com/storybookjs/storybook/pull/7117))\n* Addon-docs: Support non-story exports in MDX ([#7188](https://github.com/storybookjs/storybook/pull/7188))\n* Addon-docs: Support non-story exports in module format ([#7185](https://github.com/storybookjs/storybook/pull/7185))\n* Addon-docs: Docs mode with `--docs` flag ([#7154](https://github.com/storybookjs/storybook/pull/7154))\n* Addon-docs: Convert to module format codemod ([#7174](https://github.com/storybookjs/storybook/pull/7174))\n* Addon-docs: MDX support ([#7145](https://github.com/storybookjs/storybook/pull/7145))\n* Addon-docs: Component parameter codemod ([#7155](https://github.com/storybookjs/storybook/pull/7155))\n* Addon-docs: DocsPage and doc blocks ([#7119](https://github.com/storybookjs/storybook/pull/7119))\n* Addon-docs: Module story format & framework param ([#7110](https://github.com/storybookjs/storybook/pull/7110))\n* Addon-docs: Basic skeleton, UI viewMode handling ([#7107](https://github.com/storybookjs/storybook/pull/7107))\n\n### Bug Fixes\n\n* Addon-backgrounds: Fix unstretched preview background wrapper ([#7173](https://github.com/storybookjs/storybook/pull/7173))\n* Addon-notes/info: Fix indenting on markdown code blocks ([#7158](https://github.com/storybookjs/storybook/pull/7158))\n* Core: Improve HMR error reporting, no refreshes needed for error recovery ([#6972](https://github.com/storybookjs/storybook/pull/6972))\n* Addon-info: change stylesheetBase info height from 110vh to 100vh ([#7141](https://github.com/storybookjs/storybook/pull/7141))\n\n### Maintenance\n\n* Typescript: Migrate addon viewport ([#7177](https://github.com/storybookjs/storybook/pull/7177))\n\n### Dependency Upgrades\n\n* Bump css-loader from 2.1.1 to 3.0.0 ([#7122](https://github.com/storybookjs/storybook/pull/7122))\n* Upgrade core-js to 3.x in devkits ([#7171](https://github.com/storybookjs/storybook/pull/7171))\n* UPGRADE lazy-universal-dotenv ([#7151](https://github.com/storybookjs/storybook/pull/7151))"}}
\ No newline at end of file
+{"version":"5.2.0-alpha.36","info":{"plain":"### Features\n\n* Addon-docs: Added inline option to Story block ([#7308](https://github.com/storybookjs/storybook/pull/7308))\n* Addon-knobs: Ensure unique knob names across groups ([#6793](https://github.com/storybookjs/storybook/pull/6793))\n* Core: Enable webpack to rebuild changes in node_modules ([#6265](https://github.com/storybooorybook/pull/6265))\n* Addons: Disable option for addon tab ([#6923](https://github.com/storybookjs/storybook/pull/6923))\n\n### Bug Fixes\n\n* Fix lint error from #6923 ([#7311](https://github.com/storybookjs/storybook/pull/7311))\n* Addon-actions: fix serialization performance ([#7256](https://github.com/storybookjs/storybook/pull/7256))\n\n### Maintenance\n\n* Typescript: Migrate @storybook/addon-event ([#7190](https://github.com/storybookjs/storybook/pull/7190))\n* Typescript: Improve actions type ([#7012](https://github.com/storybookjs/storybook/pull/7012))"}}
\ No newline at end of file
diff --git a/docs/yarn.lock b/docs/yarn.lock
index 56b317a50c55..d29449f476bc 100644
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -254,17 +254,6 @@
   dependencies:
     "@ndhoule/each" "^2.0.1"
 
-"@reach/router@^1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@reach/router/-/router-1.2.1.tgz#34ae3541a5ac44fa7796e5506a5d7274a162be4e"
-  integrity sha512-kTaX08X4g27tzIFQGRukaHmNbtMYDS3LEWIS8+l6OayGIw6Oyo1HIF/JzeuR2FoF9z6oV+x/wJSVSq4v8tcUGQ==
-  dependencies:
-    create-react-context "^0.2.1"
-    invariant "^2.2.3"
-    prop-types "^15.6.1"
-    react-lifecycles-compat "^3.0.4"
-    warning "^3.0.0"
-
 "@segment/snippet@^4.0.1":
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/@segment/snippet/-/snippet-4.4.0.tgz#153f17b8048a2764bbb1343a61f3c3c24da038e2"
@@ -272,21 +261,27 @@
   dependencies:
     "@ndhoule/map" "^2.0.1"
 
-"@storybook/client-logger@5.2.0-alpha.23":
-  version "5.2.0-alpha.23"
-  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-5.2.0-alpha.23.tgz#c59078b0041b8f443edeb24841e4b7a4908e3d0c"
-  integrity sha512-2TdYE+LBfmiiefRPt3DXVfRAxIu28vkc5pksgCbEwk1jscL6rAtD423HvcwhNR2nMdIDTzjBjkxq0ISp5dEmxw==
+"@storybook/client-logger@5.2.0-alpha.34":
+  version "5.2.0-alpha.34"
+  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-5.2.0-alpha.34.tgz#9de93faf736fb58b1f3bd04b500f40dc6231e3d9"
+  integrity sha512-ukvCH+Fudey0RagrbxbVCy/ZwWfScVDFjGe8yieFCXVLRyfMERuEWgz/WBrgwFIVhzGt4JQgewolv27QLDysNg==
+  dependencies:
+    core-js "^3.0.1"
+
+"@storybook/client-logger@5.2.0-alpha.35":
+  version "5.2.0-alpha.35"
+  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-5.2.0-alpha.35.tgz#73ddcf2bfa5885407da580b0ffac2bcbe904e260"
+  integrity sha512-/G/nmW2k4H45nl/cghbmfXraixkFAJd0NrZ5Ch9ZsCuZYYsvMLfasF6Y4FQYykzadMCsdlrpK1dVK2P9YqhyNQ==
   dependencies:
     core-js "^3.0.1"
 
-"@storybook/components@5.2.0-alpha.23":
-  version "5.2.0-alpha.23"
-  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-5.2.0-alpha.23.tgz#df38d9dc5cf8245025dec25b247f4ce1b593f2c6"
-  integrity sha512-NaeB+r3eZPoyfZ6FrZk58Sy4zJVoTpVLhUHpc1cAhlQol8chuptUxreBDo6aRFYtVKOd/9rnyU/7B32ddxI+OA==
+"@storybook/components@5.2.0-alpha.34":
+  version "5.2.0-alpha.34"
+  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-5.2.0-alpha.34.tgz#397f146419d6570661d50db6e5638b98803a4b30"
+  integrity sha512-LStRAgiKSlIouZiK2xtSF430gg42CHD/gwpncdJYQFLY8mWr46Ms0Fzk5YWbXi/xrjFnuX6aQxl7n28CjPmoqg==
   dependencies:
-    "@storybook/client-logger" "5.2.0-alpha.23"
-    "@storybook/router" "5.2.0-alpha.23"
-    "@storybook/theming" "5.2.0-alpha.23"
+    "@storybook/client-logger" "5.2.0-alpha.34"
+    "@storybook/theming" "5.2.0-alpha.34"
     core-js "^3.0.1"
     global "^4.3.2"
     markdown-to-jsx "^6.9.1"
@@ -295,7 +290,6 @@
     popper.js "^1.14.7"
     prop-types "^15.7.2"
     react "^16.8.3"
-    react-addons-create-fragment "^15.6.2"
     react-dom "^16.8.3"
     react-focus-lock "^1.18.3"
     react-helmet-async "^1.0.2"
@@ -305,25 +299,32 @@
     recompose "^0.30.0"
     simplebar-react "^1.0.0-alpha.6"
 
-"@storybook/router@5.2.0-alpha.23":
-  version "5.2.0-alpha.23"
-  resolved "https://registry.yarnpkg.com/@storybook/router/-/router-5.2.0-alpha.23.tgz#ce3d1bf997ad0e18925fb270d48a92514242e456"
-  integrity sha512-eTjJUN3GzwCHIR+nXzcVNEqvr/dlJExhC68JmkQ8QuabHXodnhWYLRyrUNc8ATJjUxdlc2VT/PBj0xq+PsUuHg==
+"@storybook/theming@5.2.0-alpha.34":
+  version "5.2.0-alpha.34"
+  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-5.2.0-alpha.34.tgz#fa65fa34af6231a5332e2bebd0f4174023f9bb4d"
+  integrity sha512-F900cTk2JkwrghPr5wFZ95zhAb+Ygp8zKp9MGe0aL4c/2OJrKrNhhA7nvtskdcLg2jJoBXSkwaRqe9rxtzND/g==
   dependencies:
-    "@reach/router" "^1.2.1"
+    "@emotion/core" "^10.0.9"
+    "@emotion/styled" "^10.0.7"
+    "@storybook/client-logger" "5.2.0-alpha.34"
+    common-tags "^1.8.0"
     core-js "^3.0.1"
+    deep-object-diff "^1.1.0"
+    emotion-theming "^10.0.9"
     global "^4.3.2"
     memoizerific "^1.11.3"
-    qs "^6.6.0"
+    polished "^3.3.1"
+    prop-types "^15.7.2"
+    resolve-from "^5.0.0"
 
-"@storybook/theming@5.2.0-alpha.23":
-  version "5.2.0-alpha.23"
-  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-5.2.0-alpha.23.tgz#8f0ae7345416b605db619896656393f567a72396"
-  integrity sha512-8kUpX7ojq4pZH082MOxTC3lHLBrO7POwKrmviZHMWt+93FvaLfSerl9CK0lbEbWt+L8ZdsG+cXRNJbc+PJEI7A==
+"@storybook/theming@5.2.0-alpha.35":
+  version "5.2.0-alpha.35"
+  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-5.2.0-alpha.35.tgz#6d97548b7c31e7b50f4e28acbbae8b04cef26111"
+  integrity sha512-s+6b3BvxPs+LLsU2JIGDEId5+WNd+xkTzyKZAmf5/aS9e6j0p3tSJFiB+7gObt256yyo/SPe9Ke2szQdPfTIUg==
   dependencies:
     "@emotion/core" "^10.0.9"
     "@emotion/styled" "^10.0.7"
-    "@storybook/client-logger" "5.2.0-alpha.23"
+    "@storybook/client-logger" "5.2.0-alpha.35"
     common-tags "^1.8.0"
     core-js "^3.0.1"
     deep-object-diff "^1.1.0"
@@ -1097,10 +1098,10 @@ babel-plugin-macros@^2.0.0:
     cosmiconfig "^5.2.0"
     resolve "^1.10.0"
 
-"babel-plugin-styled-components@>= 1", babel-plugin-styled-components@^1.10.1:
-  version "1.10.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.1.tgz#cc89ac5a13476ce675e13fbe53a826f9bb0ca4cd"
-  integrity sha512-F6R2TnPGNN6iuXCs0xQ+EsrunwNoWI55J5I8Pkd/+fzzbv1I4gFgTaZepMOVpLobYWU2XaLIm+73L0zD3CnOdQ==
+"babel-plugin-styled-components@>= 1", babel-plugin-styled-components@^1.10.6:
+  version "1.10.6"
+  resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.6.tgz#f8782953751115faf09a9f92431436912c34006b"
+  integrity sha512-gyQj/Zf1kQti66100PhrCRjI5ldjaze9O0M3emXRPAN80Zsf8+e1thpTpaXJXVHXtaM4/+dJEgZHyS9Its+8SA==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.0.0"
     "@babel/helper-module-imports" "^7.0.0"
@@ -2978,12 +2979,7 @@ core-js@^1.0.0, core-js@^1.2.6:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
   integrity sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=
 
-core-js@^2.4.0, core-js@^2.5.0:
-  version "2.6.5"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.5.tgz#44bc8d249e7fb2ff5d00e0341a7ffb94fbf67895"
-  integrity sha512-klh/kDpwX8hryYL14M9w/xei6vrv6sE8gTHDG7/T/+SEovB/G4ejwcfE/CBzO6Edsu+OETZMZ3wcX/EjUkrl5A==
-
-core-js@^2.4.1:
+core-js@^2.4.0, core-js@^2.4.1, core-js@^2.5.0:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.9.tgz#6b4b214620c834152e179323727fc19741b084f2"
   integrity sha512-HOpZf6eXmnl7la+cUdMnLvUxKNqLUzJvgIziQ0DiF3JwSImNphIqdGqzj6hIKyX04MmV0poclQ7+wjWvxQyR2A==
@@ -3063,14 +3059,6 @@ create-react-context@<=0.2.2:
     fbjs "^0.8.0"
     gud "^1.0.0"
 
-create-react-context@^0.2.1:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.3.tgz#9ec140a6914a22ef04b8b09b7771de89567cb6f3"
-  integrity sha512-CQBmD0+QGgTaxDL3OX1IDXYqjkp2It4RIbcb99jS6AEg27Ga+a9G3JtK6SIu0HBwPLZlmwt9F7UwWA4Bn92Rag==
-  dependencies:
-    fbjs "^0.8.0"
-    gud "^1.0.0"
-
 cross-env@^3.1.1:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-3.2.4.tgz#9e0585f277864ed421ce756f81a980ff0d698aba"
@@ -4410,7 +4398,7 @@ fbjs@1.0.0:
     setimmediate "^1.0.5"
     ua-parser-js "^0.7.18"
 
-fbjs@^0.8.0, fbjs@^0.8.1, fbjs@^0.8.14, fbjs@^0.8.4, fbjs@^0.8.9:
+fbjs@^0.8.0, fbjs@^0.8.1, fbjs@^0.8.14, fbjs@^0.8.9:
   version "0.8.17"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
   integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
@@ -6112,7 +6100,7 @@ interpret@^1.0.0:
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.2.0.tgz#d5061a6224be58e8083985f5014d844359576296"
   integrity sha512-mT34yGKMNceBQUoVn7iCDKDntA7SC6gycMAWzGx1z/CMCTV7b2AAtXlo3nRyHZ1FelRkQbQjprHSYGwzLtkVbw==
 
-invariant@2.2.4, invariant@^2.2.0, invariant@^2.2.2, invariant@^2.2.3, invariant@^2.2.4:
+invariant@2.2.4, invariant@^2.2.0, invariant@^2.2.2, invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
   integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
@@ -7338,6 +7326,11 @@ lodash.some@^4.4.0:
   resolved "https://registry.yarnpkg.com/lodash.some/-/lodash.some-4.6.0.tgz#1bb9f314ef6b8baded13b549169b2a945eb68e4d"
   integrity sha1-G7nzFO9ri63tE7VJFpsqlF62jk0=
 
+lodash.sortby@^4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
+  integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
+
 lodash.template@^3.0.0:
   version "3.6.2"
   resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-3.6.2.tgz#f8cdecc6169a255be9098ae8b0c53d378931d14f"
@@ -7560,10 +7553,10 @@ markdown-to-jsx@^6.9.1:
     prop-types "^15.6.2"
     unquote "^1.1.0"
 
-marked@^0.6.2:
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/marked/-/marked-0.6.2.tgz#c574be8b545a8b48641456ca1dbe0e37b6dccc1a"
-  integrity sha512-LqxwVH3P/rqKX4EKGz7+c2G9r98WeM/SW34ybhgNGhUQNKtf1GmmSkJ6cDGJ/t6tiyae49qRkpyTw2B9HOrgUA==
+marked@^0.6.3:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-0.6.3.tgz#79babad78af638ba4d522a9e715cdfdd2429e946"
+  integrity sha512-Fqa7eq+UaxfMriqzYLayfqAE40WN03jf+zHjT18/uXNuzjq3TY0XTbrAoPeqSJrAmPz11VuUA+kBPYOhHt9oOQ==
 
 math-expression-evaluator@^1.2.14:
   version "1.2.17"
@@ -9706,11 +9699,6 @@ qs@6.5.2, qs@~6.5.2:
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
   integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==
 
-qs@^6.6.0:
-  version "6.7.0"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
-  integrity sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==
-
 query-string@^4.1.0:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb"
@@ -9806,15 +9794,6 @@ react-15@0.2.0:
     fbjs "1.0.0"
     object-assign "4.1.1"
 
-react-addons-create-fragment@^15.6.2:
-  version "15.6.2"
-  resolved "https://registry.yarnpkg.com/react-addons-create-fragment/-/react-addons-create-fragment-15.6.2.tgz#a394de7c2c7becd6b5475ba1b97ac472ce7c74f8"
-  integrity sha1-o5TefCx77Na1R1uhuXrEcs58dPg=
-  dependencies:
-    fbjs "^0.8.4"
-    loose-envify "^1.3.1"
-    object-assign "^4.1.0"
-
 react-clientside-effect@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.0.tgz#db823695f75e9616a5e4dd6d908e5ea627fb2516"
@@ -9946,7 +9925,7 @@ react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
   integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==
 
-react-lifecycles-compat@^3.0.2, react-lifecycles-compat@^3.0.4:
+react-lifecycles-compat@^3.0.2:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
@@ -11228,14 +11207,14 @@ simplebar@^4.0.0-alpha.9:
     resize-observer-polyfill "^1.5.1"
     scrollbarwidth "^0.1.3"
 
-sitemap@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/sitemap/-/sitemap-2.2.0.tgz#98b8502762c5d7e8c77c9be5061dce85b326f1b0"
-  integrity sha512-9Zoi3UBhSIt5jWENDRUbzsqLMJ+Fha3P2aQ2PRghmh0FOivtHsC4FAJdkAEKHvATajd74BWp/57Yh7kz/UA53Q==
+sitemap@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/sitemap/-/sitemap-3.0.0.tgz#8533913a282b0da341a1cef86db1b3402ba6fb92"
+  integrity sha512-sI8X+/9OYNcmTqBxt/i8/fICFuiLAGzxQPdiu5CBCLfLwy2utRlqPpEvVsN9PM618DkX0amiX2vZ8IErhTMlSA==
   dependencies:
-    lodash "^4.17.10"
-    url-join "^4.0.0"
-    xmlbuilder "^10.0.0"
+    lodash "^4.17.11"
+    whatwg-url "^7.0.0"
+    xmlbuilder "^13.0.0"
 
 slash@^1.0.0:
   version "1.0.0"
@@ -12204,6 +12183,13 @@ toxic@^1.0.0:
   dependencies:
     lodash "^4.17.10"
 
+tr46@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-1.0.1.tgz#a8b13fd6bfd2489519674ccde55ba3693b706d09"
+  integrity sha1-qLE/1r/SSJUZZ0zN5VujaTtwbQk=
+  dependencies:
+    punycode "^2.1.0"
+
 traceur@0.0.105:
   version "0.0.105"
   resolved "https://registry.yarnpkg.com/traceur/-/traceur-0.0.105.tgz#5cf9dee83d6b77861c3d6c44d53859aed7ab0479"
@@ -12560,11 +12546,6 @@ urix@^0.1.0:
   resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
   integrity sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=
 
-url-join@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/url-join/-/url-join-4.0.0.tgz#4d3340e807d3773bda9991f8305acdcc2a665d2a"
-  integrity sha1-TTNA6AfTdzvamZH4MFrNzCpmXSo=
-
 url-loader@^0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-0.6.2.tgz#a007a7109620e9d988d14bce677a1decb9a993f7"
@@ -12867,6 +12848,11 @@ web-namespaces@^1.0.0:
   resolved "https://registry.yarnpkg.com/web-namespaces/-/web-namespaces-1.1.3.tgz#9bbf5c99ff0908d2da031f1d732492a96571a83f"
   integrity sha512-r8sAtNmgR0WKOKOxzuSgk09JsHlpKlB+uHi937qypOu3PZ17UxPrierFKDye/uNHjNTTEshu5PId8rojIPj/tA==
 
+webidl-conversions@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
+  integrity sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==
+
 webpack-configurator@^0.3.0:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/webpack-configurator/-/webpack-configurator-0.3.1.tgz#d16802afa674101a0cbfa6fc344d415c9649540b"
@@ -13013,6 +12999,15 @@ whatwg-fetch@>=0.10.0:
   resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz#fc804e458cc460009b1a2b966bc8817d2578aefb"
   integrity sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q==
 
+whatwg-url@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-7.0.0.tgz#fde926fa54a599f3adf82dff25a9f7be02dc6edd"
+  integrity sha512-37GeVSIJ3kn1JgKyjiYNmSLP1yzbpb29jdmwBSgkD9h40/hyrR/OifpVUndji3tmwGgD8qpw7iQu3RSbCrBpsQ==
+  dependencies:
+    lodash.sortby "^4.7.0"
+    tr46 "^1.0.1"
+    webidl-conversions "^4.0.2"
+
 when@^3.7.5:
   version "3.7.8"
   resolved "https://registry.yarnpkg.com/when/-/when-3.7.8.tgz#c7130b6a7ea04693e842cdc9e7a1f2aa39a39f82"
@@ -13155,10 +13150,10 @@ xml2js@^0.4.5:
     sax ">=0.6.0"
     xmlbuilder "~9.0.1"
 
-xmlbuilder@^10.0.0:
-  version "10.1.1"
-  resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-10.1.1.tgz#8cae6688cc9b38d850b7c8d3c0a4161dcaf475b0"
-  integrity sha512-OyzrcFLL/nb6fMGHbiRDuPup9ljBycsdCypwuyg5AAHvyWzGfChJpCXMG88AGTIMFhGZ9RccFN1e6lhg3hkwKg==
+xmlbuilder@^13.0.0:
+  version "13.0.2"
+  resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-13.0.2.tgz#02ae33614b6a047d1c32b5389c1fdacb2bce47a7"
+  integrity sha512-Eux0i2QdDYKbdbA6AM6xE4m6ZTZr4G4xF9kahI2ukSEMCzwce2eX9WlTI5J3s+NU7hpasFsr8hWIONae7LluAQ==
 
 xmlbuilder@~9.0.1:
   version "9.0.7"
diff --git a/examples-native/crna-kitchen-sink/App.js b/examples-native/crna-kitchen-sink/App.js
index cf84ee1adb00..cf409b5aa655 100644
--- a/examples-native/crna-kitchen-sink/App.js
+++ b/examples-native/crna-kitchen-sink/App.js
@@ -1,4 +1,6 @@
-export default from './storybook';
+import StorybookUIRoot from './storybook';
+
+export { StorybookUIRoot as default };
 
 // NOTE: The code below is what CRNA generates out of the box. We currently
 // have no clever way of replacing this with Storybook's UI (Vanilla RN does!)
diff --git a/examples-native/crna-kitchen-sink/metro.config.js b/examples-native/crna-kitchen-sink/metro.config.js
index 1f4f7e6fabdd..1badc02560ca 100644
--- a/examples-native/crna-kitchen-sink/metro.config.js
+++ b/examples-native/crna-kitchen-sink/metro.config.js
@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 const path = require('path');
 const blacklist = require('metro-config/src/defaults/blacklist');
 
diff --git a/examples-native/crna-kitchen-sink/package.json b/examples-native/crna-kitchen-sink/package.json
index a17a0a267199..4cf15abcc051 100644
--- a/examples-native/crna-kitchen-sink/package.json
+++ b/examples-native/crna-kitchen-sink/package.json
@@ -1,6 +1,6 @@
 {
   "name": "crna-kitchen-sink",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "private": true,
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {
@@ -24,14 +24,14 @@
   "devDependencies": {
     "@babel/core": "^7.2.2",
     "@babel/plugin-transform-react-jsx-source": "^7.2.0",
-    "@storybook/addon-actions": "5.2.0-alpha.30",
-    "@storybook/addon-knobs": "5.2.0-alpha.30",
-    "@storybook/addon-ondevice-actions": "5.2.0-alpha.30",
-    "@storybook/addon-ondevice-backgrounds": "5.2.0-alpha.30",
-    "@storybook/addon-ondevice-knobs": "5.2.0-alpha.30",
-    "@storybook/addon-ondevice-notes": "5.2.0-alpha.30",
-    "@storybook/addons": "5.2.0-alpha.30",
-    "@storybook/react-native": "5.2.0-alpha.30",
+    "@storybook/addon-actions": "5.2.0-alpha.36",
+    "@storybook/addon-knobs": "5.2.0-alpha.36",
+    "@storybook/addon-ondevice-actions": "5.2.0-alpha.36",
+    "@storybook/addon-ondevice-backgrounds": "5.2.0-alpha.36",
+    "@storybook/addon-ondevice-knobs": "5.2.0-alpha.36",
+    "@storybook/addon-ondevice-notes": "5.2.0-alpha.36",
+    "@storybook/addons": "5.2.0-alpha.36",
+    "@storybook/react-native": "5.2.0-alpha.36",
     "babel-loader": "^8.0.4",
     "babel-plugin-module-resolver": "^3.2.0",
     "babel-preset-expo": "^5.1.1",
diff --git a/examples-native/crna-kitchen-sink/storybook/addons.js b/examples-native/crna-kitchen-sink/storybook/addons.js
index 8741fd55b89f..e8a3976c7539 100644
--- a/examples-native/crna-kitchen-sink/storybook/addons.js
+++ b/examples-native/crna-kitchen-sink/storybook/addons.js
@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import '@storybook/addon-actions/register';
 import '@storybook/addon-links/register';
 import '@storybook/addon-options/register';
diff --git a/examples-native/crna-kitchen-sink/storybook/stories/index.js b/examples-native/crna-kitchen-sink/storybook/stories/index.js
index b1e80c977bd7..a4fb250cbdad 100644
--- a/examples-native/crna-kitchen-sink/storybook/stories/index.js
+++ b/examples-native/crna-kitchen-sink/storybook/stories/index.js
@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 import { Text } from 'react-native';
 
@@ -7,6 +8,7 @@ import { linkTo } from '@storybook/addon-links';
 import { withKnobs } from '@storybook/addon-knobs';
 import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds';
 import knobsWrapper from './Knobs';
+// eslint-disable-next-line import/no-unresolved, import/extensions
 import Button from './Button';
 import CenterView from './CenterView';
 import Welcome from './Welcome';
@@ -20,19 +22,22 @@ addParameters({
   ],
 });
 
-storiesOf('Welcome', module).addParameters({
-  component: Welcome
-}).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />, {
-  notes: `
+storiesOf('Welcome', module)
+  .addParameters({
+    component: Welcome,
+  })
+  .add('to Storybook', () => <Welcome showApp={linkTo('Button')} />, {
+    notes: `
 # Markdown!\n
 * List Item
 * [List Item with Link](https://storybook.js.org)
 `,
-});
+  });
 
-storiesOf('Button', module).addParameters({
-  component: Button
-})
+storiesOf('Button', module)
+  .addParameters({
+    component: Button,
+  })
   .addParameters({
     backgrounds: [
       { name: 'dark', value: '#222222' },
diff --git a/examples/angular-cli/.storybook/config.ts b/examples/angular-cli/.storybook/config.ts
index 4b5a2f1a4993..7510105da2c5 100644
--- a/examples/angular-cli/.storybook/config.ts
+++ b/examples/angular-cli/.storybook/config.ts
@@ -1,6 +1,6 @@
-/* eslint-disable global-require */
-import { configure, addParameters, addDecorator } from '@storybook/angular';
+import { load, addParameters, addDecorator } from '@storybook/angular';
 import { withA11y } from '@storybook/addon-a11y';
+import { DocsPage } from '@storybook/addon-docs/blocks';
 import addCssWarning from '../src/cssWarning';
 
 addDecorator(withA11y);
@@ -9,16 +9,12 @@ addCssWarning();
 addParameters({
   options: {
     hierarchyRootSeparator: /\|/,
+    docs: {
+      iframeHeight: '60px',
+    },
   },
+  docs: DocsPage,
 });
 
-function loadStories() {
-  // put welcome screen at the top of the list so it's the first one displayed
-  require('../src/stories');
-
-  // automatically import all story ts files that end with *.stories.ts
-  const req = require.context('../src/stories', true, /\.stories\.ts$/);
-  req.keys().forEach(filename => req(filename));
-}
-
-configure(loadStories, module);
+load(require.context('../src/stories', true, /\.stories\.ts$/), module);
+load(require.context('../src/stories', true, /\.stories\.mdx$/), module);
diff --git a/examples/angular-cli/.storybook/presets.js b/examples/angular-cli/.storybook/presets.js
new file mode 100644
index 000000000000..d8d6ff57fc33
--- /dev/null
+++ b/examples/angular-cli/.storybook/presets.js
@@ -0,0 +1,8 @@
+module.exports = [
+  {
+    name: '@storybook/addon-docs/angular/preset',
+    options: {
+      configureJSX: true,
+    },
+  },
+];
diff --git a/examples/angular-cli/.storybook/webpack.config.ts b/examples/angular-cli/.storybook/webpack.config.ts
index 3a8badcaf3a1..3a2d1f390e3f 100644
--- a/examples/angular-cli/.storybook/webpack.config.ts
+++ b/examples/angular-cli/.storybook/webpack.config.ts
@@ -5,7 +5,7 @@ module.exports = async ({ config }: { config: any }) => {
     test: [/\.stories\.tsx?$/, /index\.ts$/],
     loaders: [
       {
-        loader: require.resolve('@storybook/source-loader'),
+        loader: require.resolve('@storybook/addon-storysource/loader'),
         options: {
           parser: 'typescript',
         },
diff --git a/examples/angular-cli/package.json b/examples/angular-cli/package.json
index f80d3dd96a5a..1db3ec95ea31 100644
--- a/examples/angular-cli/package.json
+++ b/examples/angular-cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-cli",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "private": true,
   "license": "MIT",
   "scripts": {
@@ -34,19 +34,21 @@
     "@angular-devkit/build-angular": "^0.13.4",
     "@angular/cli": "^7.3.6",
     "@angular/compiler-cli": "^7.2.6",
-    "@storybook/addon-a11y": "5.2.0-alpha.30",
-    "@storybook/addon-actions": "5.2.0-alpha.30",
-    "@storybook/addon-backgrounds": "5.2.0-alpha.30",
-    "@storybook/addon-centered": "5.2.0-alpha.30",
-    "@storybook/addon-jest": "5.2.0-alpha.30",
-    "@storybook/addon-knobs": "5.2.0-alpha.30",
-    "@storybook/addon-links": "5.2.0-alpha.30",
-    "@storybook/addon-notes": "5.2.0-alpha.30",
-    "@storybook/addon-options": "5.2.0-alpha.30",
-    "@storybook/addon-storyshots": "5.2.0-alpha.30",
-    "@storybook/addon-storysource": "5.2.0-alpha.30",
-    "@storybook/addons": "5.2.0-alpha.30",
-    "@storybook/angular": "5.2.0-alpha.30",
+    "@storybook/addon-a11y": "5.2.0-alpha.36",
+    "@storybook/addon-actions": "5.2.0-alpha.36",
+    "@storybook/addon-backgrounds": "5.2.0-alpha.36",
+    "@storybook/addon-centered": "5.2.0-alpha.36",
+    "@storybook/addon-jest": "5.2.0-alpha.36",
+    "@storybook/addon-knobs": "5.2.0-alpha.36",
+    "@storybook/addon-links": "5.2.0-alpha.36",
+    "@storybook/addon-docs": "5.2.0-alpha.36",
+    "@storybook/addon-notes": "5.2.0-alpha.36",
+    "@storybook/addon-options": "5.2.0-alpha.36",
+    "@storybook/addon-storyshots": "5.2.0-alpha.36",
+    "@storybook/addon-storysource": "5.2.0-alpha.36",
+    "@storybook/addons": "5.2.0-alpha.36",
+    "@storybook/angular": "5.2.0-alpha.36",
+    "@storybook/source-loader": "5.2.0-alpha.36",
     "@types/core-js": "^2.5.0",
     "@types/jest": "^24.0.11",
     "@types/node": "~12.0.2",
diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-actions.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-actions.stories.storyshot
index b2ec516143dc..aceb663dd9cd 100644
--- a/examples/angular-cli/src/stories/__snapshots__/addon-actions.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/addon-actions.stories.storyshot
@@ -7,10 +7,10 @@ exports[`Storyshots Addon|Actions Action and method 1`] = `
   target={[Function ViewContainerRef_]}
 >
   <storybook-button-component
-    _nghost-a-c4=""
+    _nghost-a-c1=""
   >
     <button
-      _ngcontent-a-c4=""
+      _ngcontent-a-c1=""
     >
       Action and Method
     </button>
@@ -25,10 +25,10 @@ exports[`Storyshots Addon|Actions Action only 1`] = `
   target={[Function ViewContainerRef_]}
 >
   <storybook-button-component
-    _nghost-a-c3=""
+    _nghost-a-c0=""
   >
     <button
-      _ngcontent-a-c3=""
+      _ngcontent-a-c0=""
     >
       Action only
     </button>
diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-background.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-background.stories.storyshot
index e1225c5c8ad3..2e50937f7f3f 100644
--- a/examples/angular-cli/src/stories/__snapshots__/addon-background.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/addon-background.stories.storyshot
@@ -72,11 +72,11 @@ exports[`Storyshots Addon|Background background template 1`] = `
 >
   <ng-component>
     <storybook-button-component
-      _nghost-a-c5=""
+      _nghost-a-c2=""
       ng-reflect-text="Hello Button"
     >
       <button
-        _ngcontent-a-c5=""
+        _ngcontent-a-c2=""
       >
         Hello Button
       </button>
diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-centered.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-centered.stories.storyshot
index fbbda4a2a622..518603dd9fd3 100644
--- a/examples/angular-cli/src/stories/__snapshots__/addon-centered.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/addon-centered.stories.storyshot
@@ -92,11 +92,11 @@ exports[`Storyshots Addon|Centered centered template 1`] = `
         style="margin: auto; max-height: 100%;"
       >
         <storybook-button-component
-          _nghost-a-c6=""
+          _nghost-a-c3=""
           ng-reflect-text="Hello Button"
         >
           <button
-            _ngcontent-a-c6=""
+            _ngcontent-a-c3=""
           >
             Hello Button
           </button>
diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-links.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-links.stories.storyshot
index 3befab713faa..d582fdc9b04b 100644
--- a/examples/angular-cli/src/stories/__snapshots__/addon-links.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/addon-links.stories.storyshot
@@ -7,10 +7,10 @@ exports[`Storyshots Addon|Links button with link to another story 1`] = `
   target={[Function ViewContainerRef_]}
 >
   <storybook-button-component
-    _nghost-a-c7=""
+    _nghost-a-c4=""
   >
     <button
-      _ngcontent-a-c7=""
+      _ngcontent-a-c4=""
     >
       Go to Welcome Story
     </button>
diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-notes.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-notes.stories.storyshot
index cb225344a79d..ce3742208373 100644
--- a/examples/angular-cli/src/stories/__snapshots__/addon-notes.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/addon-notes.stories.storyshot
@@ -7,10 +7,10 @@ exports[`Storyshots Addon|Notes Note with HTML 1`] = `
   target={[Function ViewContainerRef_]}
 >
   <storybook-button-component
-    _nghost-a-c9=""
+    _nghost-a-c6=""
   >
     <button
-      _ngcontent-a-c9=""
+      _ngcontent-a-c6=""
     >
       Notes with HTML
     </button>
@@ -25,10 +25,10 @@ exports[`Storyshots Addon|Notes Simple note 1`] = `
   target={[Function ViewContainerRef_]}
 >
   <storybook-button-component
-    _nghost-a-c8=""
+    _nghost-a-c5=""
   >
     <button
-      _ngcontent-a-c8=""
+      _ngcontent-a-c5=""
     >
       Notes on some Button
     </button>
diff --git a/examples/angular-cli/src/stories/__snapshots__/core.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/core.stories.storyshot
index 0025d65968cf..a69a126861f6 100644
--- a/examples/angular-cli/src/stories/__snapshots__/core.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/core.stories.storyshot
@@ -7,12 +7,12 @@ exports[`Storyshots Core|Parameters passed to story 1`] = `
   target={[Function ViewContainerRef_]}
 >
   <storybook-button-component
-    _nghost-a-c10=""
+    _nghost-a-c7=""
   >
     <button
-      _ngcontent-a-c10=""
+      _ngcontent-a-c7=""
     >
-      Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{}},"globalParameter":"globalParameter","framework":"angular","chapterParameter":"chapterParameter","storyParameter":"storyParameter"}
+      Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{},"docs":{"iframeHeight":"60px"}},"globalParameter":"globalParameter","framework":"angular","chapterParameter":"chapterParameter","storyParameter":"storyParameter"}
     </button>
   </storybook-button-component>
 </storybook-dynamic-app-root>
diff --git a/examples/angular-cli/src/stories/__snapshots__/custom-styles.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/custom-styles.stories.storyshot
index 5b5535931a45..2dda80850d23 100644
--- a/examples/angular-cli/src/stories/__snapshots__/custom-styles.stories.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/custom-styles.stories.storyshot
@@ -8,11 +8,11 @@ exports[`Storyshots Custom|Style Default 1`] = `
 >
   <ng-component>
     <storybook-button-component
-      _nghost-a-c11=""
+      _nghost-a-c8=""
       ng-reflect-text="Button with custom styles"
     >
       <button
-        _ngcontent-a-c11=""
+        _ngcontent-a-c8=""
       >
         Button with custom styles
       </button>
@@ -29,11 +29,11 @@ exports[`Storyshots Custom|Style With Knobs 1`] = `
 >
   <ng-component>
     <storybook-button-component
-      _nghost-a-c12=""
+      _nghost-a-c9=""
       ng-reflect-text="Button with custom styles"
     >
       <button
-        _ngcontent-a-c12=""
+        _ngcontent-a-c9=""
       >
         Button with custom styles
       </button>
diff --git a/examples/angular-cli/src/stories/__snapshots__/index.storyshot b/examples/angular-cli/src/stories/__snapshots__/index.stories.storyshot
similarity index 81%
rename from examples/angular-cli/src/stories/__snapshots__/index.storyshot
rename to examples/angular-cli/src/stories/__snapshots__/index.stories.storyshot
index 34b1c6b6e163..6ffc693b1131 100644
--- a/examples/angular-cli/src/stories/__snapshots__/index.storyshot
+++ b/examples/angular-cli/src/stories/__snapshots__/index.stories.storyshot
@@ -8,11 +8,11 @@ exports[`Storyshots Button with some emoji 1`] = `
 >
   <ng-component>
     <storybook-button-component
-      _nghost-a-c2=""
+      _nghost-a-c12=""
       ng-reflect-text="😀 😎 👍 💯"
     >
       <button
-        _ngcontent-a-c2=""
+        _ngcontent-a-c12=""
       >
         😀 😎 👍 💯
       </button>
@@ -29,11 +29,11 @@ exports[`Storyshots Button with text 1`] = `
 >
   <ng-component>
     <storybook-button-component
-      _nghost-a-c1=""
+      _nghost-a-c11=""
       ng-reflect-text="Hello Button"
     >
       <button
-        _ngcontent-a-c1=""
+        _ngcontent-a-c11=""
       >
         Hello Button
       </button>
@@ -50,47 +50,47 @@ exports[`Storyshots Welcome to Storybook 1`] = `
 >
   <ng-component>
     <storybook-welcome-component
-      _nghost-a-c0=""
+      _nghost-a-c10=""
     >
       <main
-        _ngcontent-a-c0=""
+        _ngcontent-a-c10=""
       >
         <h1
-          _ngcontent-a-c0=""
+          _ngcontent-a-c10=""
         >
           Welcome to storybook
         </h1>
         <p
-          _ngcontent-a-c0=""
+          _ngcontent-a-c10=""
         >
           This is a UI component dev environment for your app.
         </p>
         <p
-          _ngcontent-a-c0=""
+          _ngcontent-a-c10=""
         >
            We've added some basic stories inside the 
           <span
-            _ngcontent-a-c0=""
+            _ngcontent-a-c10=""
             class="inline-code"
           >
             src/stories
           </span>
            directory. 
           <br
-            _ngcontent-a-c0=""
+            _ngcontent-a-c10=""
           />
            A story is a single state of one or more UI components. You can have as many stories as you want. 
           <br
-            _ngcontent-a-c0=""
+            _ngcontent-a-c10=""
           />
            (Basically a story is like a visual test case.) 
         </p>
         <p
-          _ngcontent-a-c0=""
+          _ngcontent-a-c10=""
         >
            See these sample 
           <a
-            _ngcontent-a-c0=""
+            _ngcontent-a-c10=""
             role="button"
             tabindex="0"
           >
@@ -98,7 +98,7 @@ exports[`Storyshots Welcome to Storybook 1`] = `
           </a>
            for a component called 
           <span
-            _ngcontent-a-c0=""
+            _ngcontent-a-c10=""
             class="inline-code"
           >
             Button
@@ -106,26 +106,26 @@ exports[`Storyshots Welcome to Storybook 1`] = `
            . 
         </p>
         <p
-          _ngcontent-a-c0=""
+          _ngcontent-a-c10=""
         >
            Just like that, you can add your own components as stories. 
           <br
-            _ngcontent-a-c0=""
+            _ngcontent-a-c10=""
           />
            You can also edit those components and see changes right away. 
           <br
-            _ngcontent-a-c0=""
+            _ngcontent-a-c10=""
           />
            (Try editing the 
           <span
-            _ngcontent-a-c0=""
+            _ngcontent-a-c10=""
             class="inline-code"
           >
             Button
           </span>
            stories located at 
           <span
-            _ngcontent-a-c0=""
+            _ngcontent-a-c10=""
             class="inline-code"
           >
             src/stories/index.js
@@ -133,15 +133,15 @@ exports[`Storyshots Welcome to Storybook 1`] = `
           .) 
         </p>
         <p
-          _ngcontent-a-c0=""
+          _ngcontent-a-c10=""
         >
            Usually we create stories with smaller UI components in the app.
           <br
-            _ngcontent-a-c0=""
+            _ngcontent-a-c10=""
           />
            Have a look at the 
           <a
-            _ngcontent-a-c0=""
+            _ngcontent-a-c10=""
             href="https://storybook.js.org/basics/writing-stories"
             rel="noopener noreferrer"
             target="_blank"
@@ -151,20 +151,20 @@ exports[`Storyshots Welcome to Storybook 1`] = `
            section in our documentation. 
         </p>
         <p
-          _ngcontent-a-c0=""
+          _ngcontent-a-c10=""
           class="note"
         >
           <b
-            _ngcontent-a-c0=""
+            _ngcontent-a-c10=""
           >
             NOTE:
           </b>
           <br
-            _ngcontent-a-c0=""
+            _ngcontent-a-c10=""
           />
            Have a look at the 
           <span
-            _ngcontent-a-c0=""
+            _ngcontent-a-c10=""
             class="inline-code"
           >
             .storybook/webpack.config.js
diff --git a/examples/angular-cli/src/stories/addon-docs.stories.mdx b/examples/angular-cli/src/stories/addon-docs.stories.mdx
new file mode 100644
index 000000000000..318db4f30800
--- /dev/null
+++ b/examples/angular-cli/src/stories/addon-docs.stories.mdx
@@ -0,0 +1,82 @@
+import { moduleMetadata } from '@storybook/angular';
+import { Story, Meta } from '@storybook/addon-docs/blocks';
+import { Welcome, Button } from '@storybook/angular/demo';
+import { linkTo } from '@storybook/addon-links';
+
+# Storybook Docs for Angular
+
+Storybook supports every major view layer:
+React, Vue, Angular, Ember, React Native, etc.
+
+Storybook Docs does too.
+
+<Story id="welcome--to-storybook" height="400px" />
+
+Hallelujah! Angular is working out of the box without modification.
+How you like them apples?!
+
+## Component Declaration
+
+Just like in React, we first declare our component.
+
+<Meta title="Addon|Docs" decorators={[moduleMetadata({ declarations: [Button] })]} />
+
+This declaration doesn't show up in the MDX output.
+
+## SB5 "Classic" Angular Stories
+
+Next let's declare some stories.
+
+But first let's review how it's done in SB5 for Angular.
+
+```
+storiesOf('Button', module)
+  .addDecorator(
+    moduleMetadata({
+      declarations: [Button],
+    })
+  )
+  .add('with text', () => ({
+    template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
+    props: {
+      text: 'Hello Button',
+      onClick: () => {},
+    },
+  }));
+```
+
+## MDX Stories
+
+Similarly, here's how we do it in the Docs MDX format. We've already added the decorator above in the component declaration, so we just need to declare a story.
+
+<Story name="with text">
+  {{
+    template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
+    props: {
+      text: 'Hello Button',
+      onClick: () => {},
+    },
+  }}
+</Story>
+
+## Another one
+
+Let's add another one. The UI updates automatically as you'd expect.
+
+<Story name="with some emoji">
+  {{
+    template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
+    props: {
+      text: '😀 😎 👍 💯',
+      onClick: () => {},
+    },
+  }}
+</Story>
+
+## More info
+
+For more info, check out the [Storybook Docs Technical Preview](https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing).
+
+We want your feedback to help make this more useful.
+
+Follow us on Twitter for more short demos & project updates! ❤️📈🛠
diff --git a/examples/angular-cli/src/stories/index.ts b/examples/angular-cli/src/stories/index.stories.ts
similarity index 97%
rename from examples/angular-cli/src/stories/index.ts
rename to examples/angular-cli/src/stories/index.stories.ts
index 2c1d1a624428..44f29c327388 100644
--- a/examples/angular-cli/src/stories/index.ts
+++ b/examples/angular-cli/src/stories/index.stories.ts
@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 import { storiesOf, moduleMetadata } from '@storybook/angular';
 import { Welcome, Button } from '@storybook/angular/demo';
 import { linkTo } from '@storybook/addon-links';
diff --git a/examples/cra-kitchen-sink/.storybook/config.js b/examples/cra-kitchen-sink/.storybook/config.js
index 4561957a6fb3..ebbb2759a1a8 100644
--- a/examples/cra-kitchen-sink/.storybook/config.js
+++ b/examples/cra-kitchen-sink/.storybook/config.js
@@ -1,4 +1,4 @@
-import { configure, addParameters, addDecorator } from '@storybook/react';
+import { load, addParameters, addDecorator } from '@storybook/react';
 import { create } from '@storybook/theming';
 import { withA11y } from '@storybook/addon-a11y';
 
@@ -18,16 +18,8 @@ addParameters({
       brandUrl: 'https://github.com/storybookjs/storybook/tree/master/examples/cra-kitchen-sink',
       gridCellSize: 12,
     }),
+    storySort: (a, b) => a[1].id.localeCompare(b[1].id),
   },
 });
 
-function loadStories() {
-  // put welcome screen at the top of the list so it's the first one displayed
-  require('../src/stories/welcome');
-
-  // automatically import all story js files that end with *.stories.js
-  const req = require.context('../src/stories', true, /\.stories\.js$/);
-  req.keys().forEach(filename => req(filename));
-}
-
-configure(loadStories, module);
+load(require.context('../src/stories', true, /\.stories\.js$/), module);
diff --git a/examples/cra-kitchen-sink/package.json b/examples/cra-kitchen-sink/package.json
index bb4ccf11638e..80b11e3cf902 100644
--- a/examples/cra-kitchen-sink/package.json
+++ b/examples/cra-kitchen-sink/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cra-kitchen-sink",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "private": true,
   "scripts": {
     "build": "react-scripts build",
@@ -19,22 +19,22 @@
     "react-lifecycles-compat": "^3.0.4"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "5.2.0-alpha.30",
-    "@storybook/addon-actions": "5.2.0-alpha.30",
-    "@storybook/addon-backgrounds": "5.2.0-alpha.30",
-    "@storybook/addon-centered": "5.2.0-alpha.30",
-    "@storybook/addon-events": "5.2.0-alpha.30",
-    "@storybook/addon-info": "5.2.0-alpha.30",
-    "@storybook/addon-jest": "5.2.0-alpha.30",
-    "@storybook/addon-knobs": "5.2.0-alpha.30",
-    "@storybook/addon-links": "5.2.0-alpha.30",
-    "@storybook/addon-notes": "5.2.0-alpha.30",
-    "@storybook/addon-options": "5.2.0-alpha.30",
-    "@storybook/addon-storyshots": "5.2.0-alpha.30",
-    "@storybook/addons": "5.2.0-alpha.30",
-    "@storybook/client-logger": "5.2.0-alpha.30",
-    "@storybook/react": "5.2.0-alpha.30",
-    "@storybook/theming": "5.2.0-alpha.30",
+    "@storybook/addon-a11y": "5.2.0-alpha.36",
+    "@storybook/addon-actions": "5.2.0-alpha.36",
+    "@storybook/addon-backgrounds": "5.2.0-alpha.36",
+    "@storybook/addon-centered": "5.2.0-alpha.36",
+    "@storybook/addon-events": "5.2.0-alpha.36",
+    "@storybook/addon-info": "5.2.0-alpha.36",
+    "@storybook/addon-jest": "5.2.0-alpha.36",
+    "@storybook/addon-knobs": "5.2.0-alpha.36",
+    "@storybook/addon-links": "5.2.0-alpha.36",
+    "@storybook/addon-notes": "5.2.0-alpha.36",
+    "@storybook/addon-options": "5.2.0-alpha.36",
+    "@storybook/addon-storyshots": "5.2.0-alpha.36",
+    "@storybook/addons": "5.2.0-alpha.36",
+    "@storybook/client-logger": "5.2.0-alpha.36",
+    "@storybook/react": "5.2.0-alpha.36",
+    "@storybook/theming": "5.2.0-alpha.36",
     "react-scripts": "^3.0.1"
   }
 }
diff --git a/examples/cra-kitchen-sink/src/stories/App.stories.js b/examples/cra-kitchen-sink/src/stories/App.stories.js
index b9e23a32d875..953d945c6f44 100644
--- a/examples/cra-kitchen-sink/src/stories/App.stories.js
+++ b/examples/cra-kitchen-sink/src/stories/App.stories.js
@@ -1,8 +1,15 @@
 // FIXME: svgr issue @igor-dv
 
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 
 import App from '../App';
 
-storiesOf('App', module).add('full app', () => <App />);
+export default {
+  title: 'App',
+};
+
+export const fullApp = () => <App />;
+
+fullApp.story = {
+  name: 'full app',
+};
diff --git a/examples/cra-kitchen-sink/src/stories/Lifecycle.stories.js b/examples/cra-kitchen-sink/src/stories/Lifecycle.stories.js
index 701812e1e03c..0b48d1a40321 100644
--- a/examples/cra-kitchen-sink/src/stories/Lifecycle.stories.js
+++ b/examples/cra-kitchen-sink/src/stories/Lifecycle.stories.js
@@ -1,5 +1,8 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import LifecycleLogger from '../components/LifecycleLogger';
 
-storiesOf('Lifecycle', module).add('logging', () => <LifecycleLogger />);
+export default {
+  title: 'Lifecycle',
+};
+
+export const logging = () => <LifecycleLogger />;
diff --git a/examples/cra-kitchen-sink/src/stories/__snapshots__/Lifecycle.stories.storyshot b/examples/cra-kitchen-sink/src/stories/__snapshots__/Lifecycle.stories.storyshot
deleted file mode 100644
index b53b1b408776..000000000000
--- a/examples/cra-kitchen-sink/src/stories/__snapshots__/Lifecycle.stories.storyshot
+++ /dev/null
@@ -1,7 +0,0 @@
-// 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
deleted file mode 100644
index 92268dda996f..000000000000
--- a/examples/cra-kitchen-sink/src/stories/__snapshots__/cra-dynamic-import.stories.storyshot
+++ /dev/null
@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots CRA Dynamic import 1`] = `
-<div>
-  Waiting for Dynamic Import
-</div>
-`;
diff --git a/examples/cra-kitchen-sink/src/stories/__snapshots__/force-rerender.stories.storyshot b/examples/cra-kitchen-sink/src/stories/__snapshots__/force-rerender.stories.storyshot
deleted file mode 100644
index 9316ca88f5d3..000000000000
--- a/examples/cra-kitchen-sink/src/stories/__snapshots__/force-rerender.stories.storyshot
+++ /dev/null
@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Force ReRender button 1`] = `
-<button
-  type="button"
->
-  Click me to increment: 0
-</button>
-`;
diff --git a/examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot b/examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot
deleted file mode 100644
index 214d9e9d9e2f..000000000000
--- a/examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot
+++ /dev/null
@@ -1,388 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Button with new info 1`] = `
-<div>
-  <div
-    style="position:relative;z-index:0"
-  >
-    <div
-      title="the best container ever"
-    >
-      <span>
-        click the 
-        <span
-          style="font-family:sans-serif;font-size:12px;text-decoration:none;background:#027ac5;color:#fff;padding:5px 15px;margin:10px;border-radius:0px 0px 0px 5px"
-        >
-           Show Info 
-        </span>
-         label in top right for info about "with new info"
-      </span>
-    </div>
-  </div>
-  <button
-    class="info__show-button"
-    style="font-family:sans-serif;font-size:12px;display:block;position:fixed;border:none;background:#027ac5;color:#fff;padding:5px 15px;cursor:pointer;top:0;right:0;border-radius:0 0 0 5px"
-    type="button"
-  >
-    Show Info
-  </button>
-  <div
-    class="info__overlay"
-    style="position:fixed;background:white;top:0;bottom:0;left:0;right:0;padding:0 40px;overflow:auto;z-index:99999;display:none"
-  >
-    <button
-      class="info__close-button"
-      style="font-family:sans-serif;font-size:12px;display:block;position:fixed;border:none;background:#027ac5;color:#fff;padding:5px 15px;cursor:pointer;top:0;right:0;border-radius:0 0 0 5px"
-      type="button"
-    >
-      ×
-    </button>
-    <div>
-      <div
-        style="font-family:Helvetica Neue, Helvetica, Segoe UI, Arial, freesans, sans-serif;color:black;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
-      >
-        <div
-          style="border-bottom:1px solid #eee;padding-top:10px;margin-bottom:10px"
-        >
-          <h1
-            style="margin:0;padding:0;font-size:35px"
-          >
-            Button
-          </h1>
-          <h2
-            style="margin:0 0 10px 0;padding:0;font-weight:400;font-size:22px"
-          >
-            with new info
-          </h2>
-        </div>
-        <div
-          style="margin-bottom:0"
-        >
-          <div
-            style="font-size:15px"
-          >
-            Use the 
-            <a
-              href="https://github.com/storybookjs/storybook/tree/master/addons/info"
-              rel="noopener noreferrer"
-              style="color:#3498db"
-              target="_blank"
-            >
-              info addon
-            </a>
-             with its new painless API.
-          </div>
-        </div>
-        <div>
-          <h1
-            style="margin:20px 0 0 0;padding:0 0 5px 0;font-size:25px;border-bottom:1px solid #EEE"
-          >
-            Story Source
-          </h1>
-          <pre
-            style="display:flex;justify-content:space-between;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"
-          >
-            <div>
-              <div>
-                <div
-                  style="padding-left:18px;padding-right:3px"
-                >
-                  <span
-                    style="color:#444"
-                  >
-                    &lt;Container
-                  </span>
-                  <span />
-                  <span
-                    style="color:#444"
-                  >
-                    &gt;
-                  </span>
-                </div>
-                <div>
-                  <div
-                    style="padding-left:33px;padding-right:3px"
-                  >
-                    <span
-                      style="color:#444"
-                    >
-                      &lt;span
-                    </span>
-                    <span />
-                    <span
-                      style="color:#444"
-                    >
-                      &gt;
-                    </span>
-                  </div>
-                  <div
-                    style="padding-left:48px;padding-right:3px"
-                  >
-                    <span
-                      style="color:#444"
-                    >
-                      click the 
-                    </span>
-                  </div>
-                  <div
-                    style="padding-left:48px;padding-right:3px"
-                  >
-                    <span
-                      style="color:#444"
-                    >
-                      &lt;InfoButton
-                    </span>
-                    <span />
-                    <span
-                      style="color:#444"
-                    >
-                      /&gt;
-                    </span>
-                  </div>
-                  <div
-                    style="padding-left:48px;padding-right:3px"
-                  >
-                    <span
-                      style="color:#444"
-                    >
-                       label in top right for info about "
-                    </span>
-                  </div>
-                  <div
-                    style="padding-left:48px;padding-right:3px"
-                  >
-                    <span
-                      style="color:#444"
-                    >
-                      with new info
-                    </span>
-                  </div>
-                  <div
-                    style="padding-left:48px;padding-right:3px"
-                  >
-                    <span
-                      style="color:#444"
-                    >
-                      "
-                    </span>
-                  </div>
-                  <div
-                    style="padding-left:33px;padding-right:3px"
-                  >
-                    <span
-                      style="color:#444"
-                    >
-                      &lt;/span&gt;
-                    </span>
-                  </div>
-                </div>
-                <div
-                  style="padding-left:18px;padding-right:3px"
-                >
-                  <span
-                    style="color:#444"
-                  >
-                    &lt;/Container&gt;
-                  </span>
-                </div>
-              </div>
-            </div>
-            <button
-              style="background-color:rgb(255, 255, 255);cursor:pointer;font-size:13px;align-self:flex-start;flex-shrink:0;overflow:hidden;border-width:1px;border-style:solid;border-color:rgb(238, 238, 238);border-image:initial;border-radius:3px;padding:3px 10px"
-              type="button"
-            >
-              Copy
-            </button>
-          </pre>
-        </div>
-        <div>
-          <h1
-            style="margin:20px 0 0 0;padding:0 0 5px 0;font-size:25px;border-bottom:1px solid #EEE"
-          >
-            Prop Types
-          </h1>
-          <div>
-            <h3
-              style="margin:20px 0 0 0"
-            >
-              "Container" Component
-            </h3>
-            <table
-              class="info-table"
-            >
-              <thead>
-                <tr>
-                  <th>
-                    property
-                  </th>
-                  <th>
-                    propType
-                  </th>
-                  <th>
-                    required
-                  </th>
-                  <th>
-                    default
-                  </th>
-                  <th>
-                    description
-                  </th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td
-                    class="info-table-monospace"
-                  >
-                    children
-                  </td>
-                  <td
-                    class="info-table-monospace"
-                  >
-                    <span>
-                      node
-                    </span>
-                  </td>
-                  <td>
-                    yes
-                  </td>
-                  <td>
-                    -
-                  </td>
-                  <td />
-                </tr>
-                <tr>
-                  <td
-                    class="info-table-monospace"
-                  >
-                    isAmazing
-                  </td>
-                  <td
-                    class="info-table-monospace"
-                  >
-                    <span>
-                      bool
-                    </span>
-                  </td>
-                  <td>
-                    -
-                  </td>
-                  <td>
-                    <span>
-                      false
-                    </span>
-                  </td>
-                  <td />
-                </tr>
-                <tr>
-                  <td
-                    class="info-table-monospace"
-                  >
-                    age
-                  </td>
-                  <td
-                    class="info-table-monospace"
-                  >
-                    <span>
-                      other
-                    </span>
-                  </td>
-                  <td>
-                    -
-                  </td>
-                  <td>
-                    <span>
-                      {
-                      <span>
-                        <span>
-                          isOld
-                        </span>
-                      </span>
-                      : 
-                      <span>
-                        false
-                      </span>
-                      ,
-                      <span>
-                        <span>
-                          value
-                        </span>
-                      </span>
-                      : 
-                      <span>
-                        0
-                      </span>
-                      }
-                    </span>
-                  </td>
-                  <td />
-                </tr>
-                <tr>
-                  <td
-                    class="info-table-monospace"
-                  >
-                    title
-                  </td>
-                  <td
-                    class="info-table-monospace"
-                  >
-                    <span>
-                      string
-                    </span>
-                  </td>
-                  <td>
-                    -
-                  </td>
-                  <td>
-                    <span>
-                      the best container ever
-                    </span>
-                  </td>
-                  <td />
-                </tr>
-              </tbody>
-            </table>
-          </div>
-          <div>
-            <h3
-              style="margin:20px 0 0 0"
-            >
-              "InfoButton" Component
-            </h3>
-            <small>
-              No propTypes defined!
-            </small>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Button with notes 1`] = `
-<button
-  style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
-  type="button"
->
-  Check my notes in the notes panel
-</button>
-`;
-
-exports[`Storyshots Button with some emoji 1`] = `
-<button
-  style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
-  type="button"
->
-  😀 😎 👍 💯
-</button>
-`;
-
-exports[`Storyshots Button with text 1`] = `
-<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>
-`;
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
deleted file mode 100644
index 2b7e153d8ac7..000000000000
--- a/examples/cra-kitchen-sink/src/stories/__snapshots__/long-description.stories.storyshot
+++ /dev/null
@@ -1,18 +0,0 @@
-// 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%;overflow:auto"
-  >
-    <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__/welcome.storyshot b/examples/cra-kitchen-sink/src/stories/__snapshots__/welcome.storyshot
deleted file mode 100644
index 2408d8cf68a5..000000000000
--- a/examples/cra-kitchen-sink/src/stories/__snapshots__/welcome.storyshot
+++ /dev/null
@@ -1,91 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Welcome to Storybook 1`] = `
-<article
-  style="padding:15px;line-height:1.4;font-family:\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif;background-color:#fff"
->
-  <h1>
-    Welcome to storybook
-  </h1>
-  <p>
-    This is a UI component dev environment for your app.
-  </p>
-  <p>
-    We've added some basic stories inside the 
-    <code
-      style="font-size:15px;font-weight:600;padding:2px 5px;border:1px solid #eae9e9;border-radius:4px;background-color:#f3f2f2;color:#3a3a3a"
-    >
-      src/stories
-    </code>
-     directory.
-    <br />
-    A story is a single state of one or more UI components. You can have as many stories as you want.
-    <br />
-    (Basically a story is like a visual test case.)
-  </p>
-  <p>
-    See these sample 
-    <button
-      style="color:#1474f3;text-decoration:none;border-bottom:1px solid #1474f3;padding-bottom:2px;border-top:none;border-right:none;border-left:none;background-color:transparent;padding:0;cursor:pointer;font:inherit"
-      type="button"
-    >
-      stories
-    </button>
-     for a component called 
-    <code
-      style="font-size:15px;font-weight:600;padding:2px 5px;border:1px solid #eae9e9;border-radius:4px;background-color:#f3f2f2;color:#3a3a3a"
-    >
-      Button
-    </code>
-    .
-  </p>
-  <p>
-    Just like that, you can add your own components as stories.
-    <br />
-    You can also edit those components and see changes right away.
-    <br />
-    (Try editing the 
-    <code
-      style="font-size:15px;font-weight:600;padding:2px 5px;border:1px solid #eae9e9;border-radius:4px;background-color:#f3f2f2;color:#3a3a3a"
-    >
-      Button
-    </code>
-     stories located at 
-    <code
-      style="font-size:15px;font-weight:600;padding:2px 5px;border:1px solid #eae9e9;border-radius:4px;background-color:#f3f2f2;color:#3a3a3a"
-    >
-      src/stories/index.js
-    </code>
-    .)
-  </p>
-  <p>
-    Usually we create stories with smaller UI components in the app.
-    <br />
-    Have a look at the 
-    <a
-      href="https://storybook.js.org/basics/writing-stories"
-      rel="noopener noreferrer"
-      style="color:#1474f3;text-decoration:none;border-bottom:1px solid #1474f3;padding-bottom:2px"
-      target="_blank"
-    >
-      Writing Stories
-    </a>
-     section in our documentation.
-  </p>
-  <p
-    style="opacity:0.5"
-  >
-    <b>
-      NOTE:
-    </b>
-    <br />
-    Have a look at the 
-    <code
-      style="font-size:15px;font-weight:600;padding:2px 5px;border:1px solid #eae9e9;border-radius:4px;background-color:#f3f2f2;color:#3a3a3a"
-    >
-      .storybook/webpack.config.js
-    </code>
-     to add webpack loaders and plugins you are using in this project.
-  </p>
-</article>
-`;
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
index 108e56b2d14b..45fb81c14241 100644
--- a/examples/cra-kitchen-sink/src/stories/cra-dynamic-import.stories.js
+++ b/examples/cra-kitchen-sink/src/stories/cra-dynamic-import.stories.js
@@ -1,9 +1,13 @@
 import React from 'react';
-import { storiesOf, forceReRender } from '@storybook/react';
+import { forceReRender } from '@storybook/react';
 
 let Component;
 
-storiesOf('CRA', module).add('Dynamic import', () => {
+export default {
+  title: 'CRA',
+};
+
+export const story1 = () => {
   if (!Component) {
     import('@storybook/react/demo').then(({ Button }) => {
       Component = Button;
@@ -14,4 +18,6 @@ storiesOf('CRA', module).add('Dynamic import', () => {
   }
 
   return <Component>Hello Button</Component>;
-});
+};
+
+story1.story = { name: 'Dynamic import' };
diff --git a/examples/cra-kitchen-sink/src/stories/force-rerender.stories.js b/examples/cra-kitchen-sink/src/stories/force-rerender.stories.js
index 07e1a2d19568..ad1c9edb4f68 100644
--- a/examples/cra-kitchen-sink/src/stories/force-rerender.stories.js
+++ b/examples/cra-kitchen-sink/src/stories/force-rerender.stories.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { storiesOf, forceReRender } from '@storybook/react';
+import { forceReRender } from '@storybook/react';
 
 let count = 0;
 const increment = () => {
@@ -7,8 +7,12 @@ const increment = () => {
   forceReRender();
 };
 
-storiesOf('Force ReRender', module).add('button', () => (
+export default {
+  title: 'Force ReRender',
+};
+
+export const button = () => (
   <button type="button" onClick={increment}>
     Click me to increment: {count}
   </button>
-));
+);
diff --git a/examples/cra-kitchen-sink/src/stories/index.stories.js b/examples/cra-kitchen-sink/src/stories/index.stories.js
index 3f0d43a8cc7f..0f0d2610399f 100644
--- a/examples/cra-kitchen-sink/src/stories/index.stories.js
+++ b/examples/cra-kitchen-sink/src/stories/index.stories.js
@@ -1,5 +1,5 @@
+/* eslint-disable react/destructuring-assignment */
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { withInfo } from '@storybook/addon-info';
 import { Button } from '@storybook/react/demo';
@@ -23,46 +23,61 @@ const InfoButton = () => (
   </span>
 );
 
-storiesOf('Button', module)
-  .addParameters({
+export default {
+  title: 'Button',
+
+  parameters: {
     component: Button,
-  })
-  .add('with text', () => <Button onClick={action('clicked', { depth: 1 })}>Hello Button</Button>, {
+  },
+};
+
+export const story1 = () => <Button onClick={action('clicked', { depth: 1 })}>Hello Button</Button>;
+story1.story = {
+  name: 'with text',
+  parameters: {
+    options: { selectedPanel: 'storybook/actions/panel' },
+  },
+};
+
+export const story2 = () => (
+  <Button onClick={action('clicked')}>
+    <span role="img" aria-label="yolo">
+      😀 😎 👍 💯
+    </span>
+  </Button>
+);
+story2.story = {
+  name: 'with some emoji',
+  parameters: {
     options: { selectedPanel: 'storybook/actions/panel' },
-  })
-  .add(
-    'with some emoji',
-    () => (
-      <Button onClick={action('clicked')}>
-        <span role="img" aria-label="yolo">
-          😀 😎 👍 💯
-        </span>
-      </Button>
-    ),
-    {
-      options: { selectedPanel: 'storybook/actions/panel' },
-    }
-  )
-  .add('with notes', () => <Button>Check my notes in the notes panel</Button>, {
+  },
+};
+
+export const story3 = () => <Button>Check my notes in the notes panel</Button>;
+story3.story = {
+  name: 'with notes',
+  parameters: {
     notes: 'A very simple button',
     options: { selectedPanel: 'storybook/notes/panel' },
-  })
-  .add(
-    'with new info',
-    context => (
-      <Container>
-        <span>
-          click the <InfoButton /> label in top right for info about "{context.name}"
-        </span>
-      </Container>
-    ),
-    {
-      notes: 'Composition: Info(Notes())',
-      options: { selectedPanel: 'storybook/info/panel' },
-      decorators: [
-        withInfo(
-          'Use the [info addon](https://github.com/storybookjs/storybook/tree/master/addons/info) with its new painless API.'
-        ),
-      ],
-    }
-  );
+  },
+};
+
+export const story4 = context => (
+  <Container>
+    <span>
+      click the <InfoButton /> label in top right for info about "{context.name}"
+    </span>
+  </Container>
+);
+story4.story = {
+  name: 'with new info',
+  parameters: {
+    notes: 'Composition: Info(Notes())',
+    options: { selectedPanel: 'storybook/info/panel' },
+    decorators: [
+      withInfo(
+        'Use the [info addon](https://github.com/storybookjs/storybook/tree/master/addons/info) with its new painless API.'
+      ),
+    ],
+  },
+};
diff --git a/examples/cra-kitchen-sink/src/stories/long-description.stories.js b/examples/cra-kitchen-sink/src/stories/long-description.stories.js
index d5d6124ab875..02b61f388686 100644
--- a/examples/cra-kitchen-sink/src/stories/long-description.stories.js
+++ b/examples/cra-kitchen-sink/src/stories/long-description.stories.js
@@ -1,9 +1,12 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import centered from '@storybook/addon-centered/react';
 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>);
+export default {
+  title: 'Some really long story kind description',
+  decorators: [centered],
+};
+
+export const story1 = () => <Button onClick={action('clicked')}>Hello Button</Button>;
+story1.story = { name: 'with text' };
diff --git a/examples/cra-kitchen-sink/src/stories/welcome.js b/examples/cra-kitchen-sink/src/stories/welcome.js
index 936d40e39e31..cbadd8d9b90f 100644
--- a/examples/cra-kitchen-sink/src/stories/welcome.js
+++ b/examples/cra-kitchen-sink/src/stories/welcome.js
@@ -1,10 +1,14 @@
 import React from 'react';
 import { Welcome } from '@storybook/react/demo';
-import { storiesOf } from '@storybook/react';
 import { linkTo } from '@storybook/addon-links';
 
-storiesOf('Welcome', module)
-  .addParameters({
+export default {
+  title: 'Welcome',
+
+  parameters: {
     component: Welcome,
-  })
-  .add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
+  },
+};
+
+export const story1 = () => <Welcome showApp={linkTo('Button')} />;
+story1.title = 'to Storybook';
diff --git a/examples/cra-react15/.storybook/config.js b/examples/cra-react15/.storybook/config.js
index 171047231878..115943f0f4f4 100644
--- a/examples/cra-react15/.storybook/config.js
+++ b/examples/cra-react15/.storybook/config.js
@@ -1,14 +1,10 @@
-import { configure, addParameters } from '@storybook/react';
+import { load, addParameters } from '@storybook/react';
 import { create } from '@storybook/theming/create';
 
-function loadStories() {
-  require('../src/stories');
-}
-
 addParameters({
   options: {
     theme: create({ colorPrimary: 'hotpink', colorSecondary: 'orangered' }),
   },
 });
 
-configure(loadStories, module);
+load(require.context('../src/stories', true, /\.stories\.js$/), module);
diff --git a/examples/cra-react15/package.json b/examples/cra-react15/package.json
index 9ed94139a401..dc3981c1fab4 100644
--- a/examples/cra-react15/package.json
+++ b/examples/cra-react15/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cra-react15",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "private": true,
   "dependencies": {
     "babel-loader": "8.0.6",
@@ -19,10 +19,10 @@
     "build-storybook": "build-storybook -s public"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "5.2.0-alpha.30",
-    "@storybook/addon-links": "5.2.0-alpha.30",
-    "@storybook/react": "5.2.0-alpha.30",
-    "@storybook/theming": "5.2.0-alpha.30",
+    "@storybook/addon-actions": "5.2.0-alpha.36",
+    "@storybook/addon-links": "5.2.0-alpha.36",
+    "@storybook/react": "5.2.0-alpha.36",
+    "@storybook/theming": "5.2.0-alpha.36",
     "babel-core": "6",
     "babel-runtime": "6"
   }
diff --git a/examples/cra-react15/src/stories/button.stories.js b/examples/cra-react15/src/stories/button.stories.js
new file mode 100644
index 000000000000..3c443e29464f
--- /dev/null
+++ b/examples/cra-react15/src/stories/button.stories.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { Button } from '@storybook/react/demo';
+
+export default {
+  title: 'Button',
+  parameters: {
+    component: Button,
+  },
+};
+
+export const story1 = () => <Button onClick={action('clicked')}>Hello Button</Button>;
+story1.story = { name: 'with text' };
+
+export const story2 = () => (
+  <Button onClick={action('clicked')}>
+    <span role="img" aria-label="so cool">
+      😀 😎 👍 💯
+    </span>
+  </Button>
+);
+story2.story = { name: 'with some emoji' };
diff --git a/examples/cra-react15/src/stories/index.js b/examples/cra-react15/src/stories/index.js
deleted file mode 100644
index 9813c023564c..000000000000
--- a/examples/cra-react15/src/stories/index.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import { linkTo } from '@storybook/addon-links';
-
-import { Button, Welcome } from '@storybook/react/demo';
-
-storiesOf('Welcome', module)
-  .addParameters({
-    component: Welcome,
-  })
-  .add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
-
-storiesOf('Button', module)
-  .addParameters({
-    component: Button,
-  })
-  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
-  .add('with some emoji', () => (
-    <Button onClick={action('clicked')}>
-      <span role="img" aria-label="so cool">
-        😀 😎 👍 💯
-      </span>
-    </Button>
-  ));
diff --git a/examples/cra-react15/src/stories/welcome.stories.js b/examples/cra-react15/src/stories/welcome.stories.js
new file mode 100644
index 000000000000..b32255e04085
--- /dev/null
+++ b/examples/cra-react15/src/stories/welcome.stories.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import { linkTo } from '@storybook/addon-links';
+import { Welcome } from '@storybook/react/demo';
+
+export default {
+  title: 'Welcome',
+  parameters: {
+    component: Welcome,
+  },
+};
+
+export const story1 = () => <Welcome showApp={linkTo('Button')} />;
+story1.story = { name: 'to Storybook' };
diff --git a/examples/cra-ts-kitchen-sink/package.json b/examples/cra-ts-kitchen-sink/package.json
index 7a8f3ff7a69a..250d459d1745 100644
--- a/examples/cra-ts-kitchen-sink/package.json
+++ b/examples/cra-ts-kitchen-sink/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cra-ts-kitchen-sink",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "private": true,
   "scripts": {
     "build-storybook": "build-storybook -s public",
@@ -14,12 +14,12 @@
     "react-dom": "^16.8.3"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "5.2.0-alpha.30",
-    "@storybook/addon-actions": "5.2.0-alpha.30",
-    "@storybook/addon-info": "5.2.0-alpha.30",
-    "@storybook/addon-options": "5.2.0-alpha.30",
-    "@storybook/addons": "5.2.0-alpha.30",
-    "@storybook/react": "5.2.0-alpha.30",
+    "@storybook/addon-a11y": "5.2.0-alpha.36",
+    "@storybook/addon-actions": "5.2.0-alpha.36",
+    "@storybook/addon-info": "5.2.0-alpha.36",
+    "@storybook/addon-options": "5.2.0-alpha.36",
+    "@storybook/addons": "5.2.0-alpha.36",
+    "@storybook/react": "5.2.0-alpha.36",
     "@types/enzyme": "^3.9.0",
     "@types/react": "^16.8.3",
     "@types/react-dom": "^16.8.2",
diff --git a/examples/dev-kits/package.json b/examples/dev-kits/package.json
index 30de809fba9c..64f3ccbbe5d3 100644
--- a/examples/dev-kits/package.json
+++ b/examples/dev-kits/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/example-devkits",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "private": true,
   "scripts": {
     "build-storybook": "build-storybook -c ./ -s built-storybooks",
@@ -8,14 +8,14 @@
     "storybook": "start-storybook -p 9011 -c ./"
   },
   "devDependencies": {
-    "@storybook/addon-parameter": "5.2.0-alpha.30",
-    "@storybook/addon-roundtrip": "5.2.0-alpha.30",
-    "@storybook/addons": "5.2.0-alpha.30",
-    "@storybook/components": "5.2.0-alpha.30",
-    "@storybook/core-events": "5.2.0-alpha.30",
-    "@storybook/node-logger": "5.2.0-alpha.30",
-    "@storybook/react": "5.2.0-alpha.30",
-    "@storybook/theming": "5.2.0-alpha.30",
+    "@storybook/addon-parameter": "5.2.0-alpha.36",
+    "@storybook/addon-roundtrip": "5.2.0-alpha.36",
+    "@storybook/addons": "5.2.0-alpha.36",
+    "@storybook/components": "5.2.0-alpha.36",
+    "@storybook/core-events": "5.2.0-alpha.36",
+    "@storybook/node-logger": "5.2.0-alpha.36",
+    "@storybook/react": "5.2.0-alpha.36",
+    "@storybook/theming": "5.2.0-alpha.36",
     "cors": "^2.8.5",
     "cross-env": "^5.2.0",
     "enzyme-to-json": "^3.3.5",
diff --git a/examples/ember-cli/.storybook/config.js b/examples/ember-cli/.storybook/config.js
index e887baca878e..06eca1d4f6aa 100644
--- a/examples/ember-cli/.storybook/config.js
+++ b/examples/ember-cli/.storybook/config.js
@@ -1,4 +1,4 @@
-import { configure, addParameters, addDecorator } from '@storybook/ember';
+import { load, addParameters, addDecorator } from '@storybook/ember';
 import { withA11y } from '@storybook/addon-a11y';
 
 addDecorator(withA11y);
@@ -9,11 +9,4 @@ addParameters({
   },
 });
 
-function loadStories() {
-  require('../stories/index.stories');
-
-  const req = require.context('../stories', true, /\.stories\.js$/);
-  req.keys().forEach(filename => req(filename));
-}
-
-configure(loadStories, module);
+load(require.context('../stories', true, /\.stories\.js$/), module);
diff --git a/examples/ember-cli/.storybook/webpack.config.js b/examples/ember-cli/.storybook/webpack.config.js
index d382a097d811..915eb22693e8 100644
--- a/examples/ember-cli/.storybook/webpack.config.js
+++ b/examples/ember-cli/.storybook/webpack.config.js
@@ -3,7 +3,7 @@ const path = require('path');
 module.exports = async ({ config }) => {
   config.module.rules.push({
     test: [/\.stories\.js$/, /index\.js$/],
-    loaders: [require.resolve('@storybook/source-loader')],
+    loaders: [require.resolve('@storybook/addon-storysource/loader')],
     include: [path.resolve(__dirname, '../')],
     enforce: 'pre',
   });
diff --git a/examples/ember-cli/package.json b/examples/ember-cli/package.json
index 23db471de259..a74c0a75e9ba 100644
--- a/examples/ember-cli/package.json
+++ b/examples/ember-cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ember-example",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "private": true,
   "scripts": {
     "build": "ember build",
@@ -15,19 +15,19 @@
   },
   "devDependencies": {
     "@babel/core": "^7.3.4",
-    "@storybook/addon-a11y": "5.2.0-alpha.30",
-    "@storybook/addon-actions": "5.2.0-alpha.30",
-    "@storybook/addon-backgrounds": "5.2.0-alpha.30",
-    "@storybook/addon-centered": "5.2.0-alpha.30",
-    "@storybook/addon-knobs": "5.2.0-alpha.30",
-    "@storybook/addon-links": "5.2.0-alpha.30",
-    "@storybook/addon-notes": "5.2.0-alpha.30",
-    "@storybook/addon-options": "5.2.0-alpha.30",
-    "@storybook/addon-storysource": "5.2.0-alpha.30",
-    "@storybook/addon-viewport": "5.2.0-alpha.30",
-    "@storybook/addons": "5.2.0-alpha.30",
-    "@storybook/ember": "5.2.0-alpha.30",
-    "@storybook/source-loader": "5.2.0-alpha.30",
+    "@storybook/addon-a11y": "5.2.0-alpha.36",
+    "@storybook/addon-actions": "5.2.0-alpha.36",
+    "@storybook/addon-backgrounds": "5.2.0-alpha.36",
+    "@storybook/addon-centered": "5.2.0-alpha.36",
+    "@storybook/addon-knobs": "5.2.0-alpha.36",
+    "@storybook/addon-links": "5.2.0-alpha.36",
+    "@storybook/addon-notes": "5.2.0-alpha.36",
+    "@storybook/addon-options": "5.2.0-alpha.36",
+    "@storybook/addon-storysource": "5.2.0-alpha.36",
+    "@storybook/addon-viewport": "5.2.0-alpha.36",
+    "@storybook/addons": "5.2.0-alpha.36",
+    "@storybook/ember": "5.2.0-alpha.36",
+    "@storybook/source-loader": "5.2.0-alpha.36",
     "babel-loader": "^8",
     "broccoli-asset-rev": "^3.0.0",
     "cross-env": "^5.2.0",
diff --git a/examples/ember-cli/stories/addon-a11y.stories.js b/examples/ember-cli/stories/addon-a11y.stories.js
index 83649432ade1..66ca80ec35af 100644
--- a/examples/ember-cli/stories/addon-a11y.stories.js
+++ b/examples/ember-cli/stories/addon-a11y.stories.js
@@ -1,15 +1,22 @@
 import hbs from 'htmlbars-inline-precompile';
-import { storiesOf } from '@storybook/ember';
 import { checkA11y } from '@storybook/addon-a11y';
 
-storiesOf('Addon|a11y', module)
-  .addDecorator(checkA11y)
-  .addParameters({ options: { selectedPanel: '@storybook/a11y/panel' } })
-  .add('Default', () => hbs`<button></button>`)
-  .add('Label', () => hbs`<button>Testing the a11y addon</button>`)
-  .add('Disabled', () => hbs`<button disabled>Testing the a11y addon</button>`)
-  .add(
-    'Invalid contrast',
-    () =>
-      hbs`<button style="color: black; background-color: brown;">Testing the a11y addon</button>`
-  );
+export default {
+  title: 'Addon|a11y',
+  decorators: [checkA11y],
+
+  parameters: {
+    options: { selectedPanel: '@storybook/a11y/panel' },
+  },
+};
+
+export const Default = () => hbs`<button></button>`;
+export const Label = () => hbs`<button>Testing the a11y addon</button>`;
+export const Disabled = () => hbs`<button disabled>Testing the a11y addon</button>`;
+
+export const invalidContrast = () =>
+  hbs`<button style="color: black; background-color: brown;">Testing the a11y addon</button>`;
+
+invalidContrast.story = {
+  name: 'Invalid contrast',
+};
diff --git a/examples/ember-cli/stories/addon-actions.stories.js b/examples/ember-cli/stories/addon-actions.stories.js
index a85fc34b9229..e11f8c8201b7 100644
--- a/examples/ember-cli/stories/addon-actions.stories.js
+++ b/examples/ember-cli/stories/addon-actions.stories.js
@@ -1,16 +1,19 @@
 import hbs from 'htmlbars-inline-precompile';
-import { storiesOf } from '@storybook/ember';
 import { action } from '@storybook/addon-actions';
 
-storiesOf('Addon|Actions', module)
-  .addParameters({
+export default {
+  title: 'Addon|Actions',
+
+  parameters: {
     options: {
       selectedPanel: 'storybook/actions/panel',
     },
-  })
-  .add('button', () => ({
-    template: hbs`<button {{action onClick}}>Click Me</button>`,
-    context: {
-      onClick: action('clicked'),
-    },
-  }));
+  },
+};
+
+export const button = () => ({
+  template: hbs`<button {{action onClick}}>Click Me</button>`,
+  context: {
+    onClick: action('clicked'),
+  },
+});
diff --git a/examples/ember-cli/stories/addon-backgrounds.stories.js b/examples/ember-cli/stories/addon-backgrounds.stories.js
index 18d610d52c5e..ea282fa81c5c 100644
--- a/examples/ember-cli/stories/addon-backgrounds.stories.js
+++ b/examples/ember-cli/stories/addon-backgrounds.stories.js
@@ -1,16 +1,28 @@
 import hbs from 'htmlbars-inline-precompile';
-import { storiesOf } from '@storybook/ember';
 
-storiesOf('Addon|Backgrounds', module)
-  .addParameters({
+export default {
+  title: 'Addon|Backgrounds',
+
+  parameters: {
     backgrounds: [
       { name: 'light', value: '#eeeeee' },
       { name: 'dark', value: '#222222', default: true },
     ],
-  })
-  .add('story 1', () => ({
-    template: hbs`<button>You should be able to switch backgrounds for this story</button>`,
-  }))
-  .add('story 2', () => ({
-    template: hbs`<button>This one too!</button>`,
-  }));
+  },
+};
+
+export const story1 = () => ({
+  template: hbs`<button>You should be able to switch backgrounds for this story</button>`,
+});
+
+story1.story = {
+  name: 'story 1',
+};
+
+export const story2 = () => ({
+  template: hbs`<button>This one too!</button>`,
+});
+
+story2.story = {
+  name: 'story 2',
+};
diff --git a/examples/ember-cli/stories/addon-centered.stories.js b/examples/ember-cli/stories/addon-centered.stories.js
index dd08c80cd26e..3cdd11dee89d 100644
--- a/examples/ember-cli/stories/addon-centered.stories.js
+++ b/examples/ember-cli/stories/addon-centered.stories.js
@@ -1,12 +1,15 @@
 import hbs from 'htmlbars-inline-precompile';
-import { storiesOf } from '@storybook/ember';
 import Centered from '@storybook/addon-centered/ember';
 
-storiesOf('Addon|Centered', module)
-  .addParameters({
+export default {
+  title: 'Addon|Centered',
+  decorators: [Centered],
+
+  parameters: {
     component: Centered,
-  })
-  .addDecorator(Centered)
-  .add('button', () => ({
-    template: hbs`<button>A Button</button>`,
-  }));
+  },
+};
+
+export const button = () => ({
+  template: hbs`<button>A Button</button>`,
+});
diff --git a/examples/ember-cli/stories/addon-knobs.stories.js b/examples/ember-cli/stories/addon-knobs.stories.js
index 146d459ac053..f0fcbb19c4d4 100644
--- a/examples/ember-cli/stories/addon-knobs.stories.js
+++ b/examples/ember-cli/stories/addon-knobs.stories.js
@@ -1,13 +1,18 @@
 import hbs from 'htmlbars-inline-precompile';
-import { storiesOf } from '@storybook/ember';
 import { withKnobs, text, color, boolean } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 
-storiesOf('Addon|Knobs', module)
-  .addDecorator(withKnobs)
-  .addParameters({ options: { selectedPanel: 'storybookjs/knobs/panel' } })
-  .add('with text', () => ({
-    template: hbs`
+export default {
+  title: 'Addon|Knobs',
+  decorators: [withKnobs],
+
+  parameters: {
+    options: { selectedPanel: 'storybookjs/knobs/panel' },
+  },
+};
+
+export const withText = () => ({
+  template: hbs`
       {{welcome-banner
         style=(if hidden "display: none")
         backgroundColor=backgroundColor
@@ -18,13 +23,17 @@ storiesOf('Addon|Knobs', module)
         click=(action onClick)
       }}
     `,
-    context: {
-      hidden: boolean('hidden', false),
-      backgroundColor: color('backgroundColor', '#FDF4E7'),
-      titleColor: color('titleColor', '#DF4D37'),
-      subTitleColor: color('subTitleColor', '#B8854F'),
-      title: text('title', 'Welcome to storybook'),
-      subtitle: text('subtitle', 'This environment is completely editable'),
-      onClick: action('clicked'),
-    },
-  }));
+  context: {
+    hidden: boolean('hidden', false),
+    backgroundColor: color('backgroundColor', '#FDF4E7'),
+    titleColor: color('titleColor', '#DF4D37'),
+    subTitleColor: color('subTitleColor', '#B8854F'),
+    title: text('title', 'Welcome to storybook'),
+    subtitle: text('subtitle', 'This environment is completely editable'),
+    onClick: action('clicked'),
+  },
+});
+
+withText.story = {
+  name: 'with text',
+};
diff --git a/examples/ember-cli/stories/addon-links.stories.js b/examples/ember-cli/stories/addon-links.stories.js
index 8357abb41569..6e1e16610e22 100644
--- a/examples/ember-cli/stories/addon-links.stories.js
+++ b/examples/ember-cli/stories/addon-links.stories.js
@@ -1,10 +1,17 @@
 import hbs from 'htmlbars-inline-precompile';
-import { storiesOf } from '@storybook/ember';
 import { linkTo } from '@storybook/addon-links';
 
-storiesOf('Addon|Links', module).add('Go to welcome', () => ({
+export default {
+  title: 'Addon|Links',
+};
+
+export const goToWelcome = () => ({
   template: hbs`<button {{action onClick}}>This button brings you to welcome</button>`,
   context: {
     onClick: linkTo('Welcome'),
   },
-}));
+});
+
+goToWelcome.story = {
+  name: 'Go to welcome',
+};
diff --git a/examples/ember-cli/stories/addon-notes.stories.js b/examples/ember-cli/stories/addon-notes.stories.js
index 431fb6ae630b..ac437cc62135 100644
--- a/examples/ember-cli/stories/addon-notes.stories.js
+++ b/examples/ember-cli/stories/addon-notes.stories.js
@@ -1,26 +1,32 @@
 import hbs from 'htmlbars-inline-precompile';
-import { storiesOf } from '@storybook/ember';
-
-storiesOf('Addon|Notes', module)
-  .add(
-    'Simple note',
-    () => ({
-      template: hbs`<p><strong>Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.</strong></p>`,
-    }),
-    { notes: 'My notes on some bold text' }
-  )
-  .add(
-    'Note with HTML',
-    () => ({
-      template: hbs`<p>🤔😳😯😮<br/>😄😩😓😱<br/>🤓😑😶😊</p>`,
-    }),
-    {
-      notes: `
-      <h2>My notes on emojies</h2>
-
-      <em>It's not all that important to be honest, but..</em>
-
-      Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
-    `,
-    }
-  );
+
+export default {
+  title: 'Addon|Notes',
+};
+
+export const simpleNote = () => ({
+  template: hbs`<p><strong>Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.</strong></p>`,
+});
+
+simpleNote.story = {
+  name: 'Simple note',
+  parameters: { notes: 'My notes on some bold text' },
+};
+
+export const noteWithHtml = () => ({
+  template: hbs`<p>🤔😳😯😮<br/>😄😩😓😱<br/>🤓😑😶😊</p>`,
+});
+
+noteWithHtml.story = {
+  name: 'Note with HTML',
+
+  parameters: {
+    notes: `
+    <h2>My notes on emojies</h2>
+
+    <em>It's not all that important to be honest, but..</em>
+
+    Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
+  `,
+  },
+};
diff --git a/examples/ember-cli/stories/index.stories.js b/examples/ember-cli/stories/index.stories.js
index 9b0f4314edfb..4c194a8a2dde 100644
--- a/examples/ember-cli/stories/index.stories.js
+++ b/examples/ember-cli/stories/index.stories.js
@@ -1,10 +1,15 @@
 import hbs from 'htmlbars-inline-precompile';
-import { storiesOf } from '@storybook/ember';
 
-storiesOf('Welcome', module)
-  .addParameters({ options: { showPanel: false } })
-  .add('basic', () => ({
-    template: hbs`
+export default {
+  title: 'Welcome',
+
+  parameters: {
+    options: { showPanel: false },
+  },
+};
+
+export const basic = () => ({
+  template: hbs`
         {{welcome-page}}
       `,
-  }));
+});
diff --git a/examples/ember-cli/stories/welcome-banner.stories.js b/examples/ember-cli/stories/welcome-banner.stories.js
index f322ec9bc053..3a914a80b414 100644
--- a/examples/ember-cli/stories/welcome-banner.stories.js
+++ b/examples/ember-cli/stories/welcome-banner.stories.js
@@ -1,8 +1,11 @@
 import hbs from 'htmlbars-inline-precompile';
-import { storiesOf } from '@storybook/ember';
 import { action } from '@storybook/addon-actions';
 
-storiesOf('welcome-banner', module).add('basic', () => ({
+export default {
+  title: 'welcome-banner',
+};
+
+export const basic = () => ({
   template: hbs`
       {{welcome-banner
         backgroundColor=backgroundColor
@@ -21,4 +24,4 @@ storiesOf('welcome-banner', module).add('basic', () => ({
     subtitle: 'This environment is completely editable',
     onClick: action('clicked'),
   },
-}));
+});
diff --git a/examples/html-kitchen-sink/.storybook/config.js b/examples/html-kitchen-sink/.storybook/config.js
index df93c95611ea..eeb82641683e 100644
--- a/examples/html-kitchen-sink/.storybook/config.js
+++ b/examples/html-kitchen-sink/.storybook/config.js
@@ -1,4 +1,4 @@
-import { configure, addParameters, addDecorator } from '@storybook/html';
+import { load, addParameters, addDecorator } from '@storybook/html';
 import { withA11y } from '@storybook/addon-a11y';
 
 addDecorator(withA11y);
@@ -16,12 +16,4 @@ addParameters({
   },
 });
 
-// automatically import all files ending in *.stories.js
-const req = require.context('../stories', true, /\.stories\.js$/);
-function loadStories() {
-  // Make welcome story default
-  require('../stories/index.stories');
-  req.keys().forEach(filename => req(filename));
-}
-
-configure(loadStories, module);
+load(require.context('../stories', true, /\.stories\.js$/), module);
diff --git a/examples/html-kitchen-sink/.storybook/webpack.config.js b/examples/html-kitchen-sink/.storybook/webpack.config.js
index 49d6279ea521..d2d694457e04 100644
--- a/examples/html-kitchen-sink/.storybook/webpack.config.js
+++ b/examples/html-kitchen-sink/.storybook/webpack.config.js
@@ -3,7 +3,7 @@ const path = require('path');
 module.exports = async ({ config }) => {
   config.module.rules.push({
     test: [/\.stories\.js$/, /index\.js$/],
-    loaders: [require.resolve('@storybook/source-loader')],
+    loaders: [require.resolve('@storybook/addon-storysource/loader')],
     include: [path.resolve(__dirname, '../stories')],
     enforce: 'pre',
   });
diff --git a/examples/html-kitchen-sink/package.json b/examples/html-kitchen-sink/package.json
index 9e1e41e34438..3d0341ada218 100644
--- a/examples/html-kitchen-sink/package.json
+++ b/examples/html-kitchen-sink/package.json
@@ -1,6 +1,6 @@
 {
   "name": "html-kitchen-sink",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "private": true,
   "description": "",
   "keywords": [],
@@ -14,24 +14,24 @@
     "storybook": "start-storybook -p 9006"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "5.2.0-alpha.30",
-    "@storybook/addon-actions": "5.2.0-alpha.30",
-    "@storybook/addon-backgrounds": "5.2.0-alpha.30",
-    "@storybook/addon-centered": "5.2.0-alpha.30",
-    "@storybook/addon-events": "5.2.0-alpha.30",
-    "@storybook/addon-jest": "5.2.0-alpha.30",
-    "@storybook/addon-knobs": "5.2.0-alpha.30",
-    "@storybook/addon-links": "5.2.0-alpha.30",
-    "@storybook/addon-notes": "5.2.0-alpha.30",
-    "@storybook/addon-options": "5.2.0-alpha.30",
-    "@storybook/addon-storyshots": "5.2.0-alpha.30",
-    "@storybook/addon-storysource": "5.2.0-alpha.30",
-    "@storybook/addon-viewport": "5.2.0-alpha.30",
-    "@storybook/addons": "5.2.0-alpha.30",
-    "@storybook/core": "5.2.0-alpha.30",
-    "@storybook/core-events": "5.2.0-alpha.30",
-    "@storybook/html": "5.2.0-alpha.30",
-    "@storybook/source-loader": "5.2.0-alpha.30",
+    "@storybook/addon-a11y": "5.2.0-alpha.36",
+    "@storybook/addon-actions": "5.2.0-alpha.36",
+    "@storybook/addon-backgrounds": "5.2.0-alpha.36",
+    "@storybook/addon-centered": "5.2.0-alpha.36",
+    "@storybook/addon-events": "5.2.0-alpha.36",
+    "@storybook/addon-jest": "5.2.0-alpha.36",
+    "@storybook/addon-knobs": "5.2.0-alpha.36",
+    "@storybook/addon-links": "5.2.0-alpha.36",
+    "@storybook/addon-notes": "5.2.0-alpha.36",
+    "@storybook/addon-options": "5.2.0-alpha.36",
+    "@storybook/addon-storyshots": "5.2.0-alpha.36",
+    "@storybook/addon-storysource": "5.2.0-alpha.36",
+    "@storybook/addon-viewport": "5.2.0-alpha.36",
+    "@storybook/addons": "5.2.0-alpha.36",
+    "@storybook/core": "5.2.0-alpha.36",
+    "@storybook/core-events": "5.2.0-alpha.36",
+    "@storybook/html": "5.2.0-alpha.36",
+    "@storybook/source-loader": "5.2.0-alpha.36",
     "eventemitter3": "^3.1.0",
     "format-json": "^1.0.3",
     "global": "^4.3.2"
diff --git a/examples/html-kitchen-sink/stories/__snapshots__/addon-a11y.stories.storyshot b/examples/html-kitchen-sink/stories/__snapshots__/addon-a11y.stories.storyshot
deleted file mode 100644
index 8c979f07574a..000000000000
--- a/examples/html-kitchen-sink/stories/__snapshots__/addon-a11y.stories.storyshot
+++ /dev/null
@@ -1,27 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|a11y Default 1`] = `<button />`;
-
-exports[`Storyshots Addons|a11y Delayed render 1`] = `<div />`;
-
-exports[`Storyshots Addons|a11y Disabled 1`] = `
-<button
-  disabled=""
->
-  Testing the a11y addon
-</button>
-`;
-
-exports[`Storyshots Addons|a11y Invalid contrast 1`] = `
-<button
-  style="color: black; background-color: brown;"
->
-  Testing the a11y addon
-</button>
-`;
-
-exports[`Storyshots Addons|a11y Label 1`] = `
-<button>
-  Testing the a11y addon
-</button>
-`;
diff --git a/examples/html-kitchen-sink/stories/__snapshots__/addon-actions.stories.storyshot b/examples/html-kitchen-sink/stories/__snapshots__/addon-actions.stories.storyshot
deleted file mode 100644
index b5a33580d65d..000000000000
--- a/examples/html-kitchen-sink/stories/__snapshots__/addon-actions.stories.storyshot
+++ /dev/null
@@ -1,62 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|Actions Decorated actions + config 1`] = `
-<button
-  type="button"
->
-  Hello World
-</button>
-`;
-
-exports[`Storyshots Addons|Actions Decorated actions 1`] = `
-<button
-  type="button"
->
-  Hello World
-</button>
-`;
-
-exports[`Storyshots Addons|Actions Hello World 1`] = `
-<button
-  type="button"
->
-  Hello World
-</button>
-`;
-
-exports[`Storyshots Addons|Actions Multiple actions + config 1`] = `
-<button
-  type="button"
->
-  Hello World
-</button>
-`;
-
-exports[`Storyshots Addons|Actions Multiple actions 1`] = `
-<button
-  type="button"
->
-  Hello World
-</button>
-`;
-
-exports[`Storyshots Addons|Actions Multiple actions, object + config 1`] = `
-<button
-  type="button"
->
-  Hello World
-</button>
-`;
-
-exports[`Storyshots Addons|Actions Multiple actions, object 1`] = `
-<button
-  type="button"
->
-  Hello World
-</button>
-`;
-
-exports[`Storyshots Addons|Actions Multiple actions, selector 1`] = `
-
-        
-`;
diff --git a/examples/html-kitchen-sink/stories/__snapshots__/addon-backgrounds.stories.storyshot b/examples/html-kitchen-sink/stories/__snapshots__/addon-backgrounds.stories.storyshot
deleted file mode 100644
index 211e0b453450..000000000000
--- a/examples/html-kitchen-sink/stories/__snapshots__/addon-backgrounds.stories.storyshot
+++ /dev/null
@@ -1,17 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|Backgrounds story 1 1`] = `
-<span
-  style="color: white"
->
-  You should be able to switch backgrounds for this story
-</span>
-`;
-
-exports[`Storyshots Addons|Backgrounds story 2 1`] = `
-<span
-  style="color: white"
->
-  This one too!
-</span>
-`;
diff --git a/examples/html-kitchen-sink/stories/__snapshots__/addon-centered.stories.storyshot b/examples/html-kitchen-sink/stories/__snapshots__/addon-centered.stories.storyshot
deleted file mode 100644
index 681a29fffda8..000000000000
--- a/examples/html-kitchen-sink/stories/__snapshots__/addon-centered.stories.storyshot
+++ /dev/null
@@ -1,17 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|Centered button in center 1`] = `
-<div
-  id="sb-addon-centered-wrapper"
-  style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; align-items: center; overflow: auto;"
->
-  <div
-    id="sb-addon-centered-inner"
-    style="margin: auto; max-height: 100%;"
-  >
-    <button>
-      I am a Button !
-    </button>
-  </div>
-</div>
-`;
diff --git a/examples/html-kitchen-sink/stories/__snapshots__/addon-events.stories.storyshot b/examples/html-kitchen-sink/stories/__snapshots__/addon-events.stories.storyshot
deleted file mode 100644
index 84466dd440ae..000000000000
--- a/examples/html-kitchen-sink/stories/__snapshots__/addon-events.stories.storyshot
+++ /dev/null
@@ -1,6 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|Events Logger 1`] = `
-
-      
-`;
diff --git a/examples/html-kitchen-sink/stories/__snapshots__/addon-jest.stories.storyshot b/examples/html-kitchen-sink/stories/__snapshots__/addon-jest.stories.storyshot
deleted file mode 100644
index 7c83d5b812b4..000000000000
--- a/examples/html-kitchen-sink/stories/__snapshots__/addon-jest.stories.storyshot
+++ /dev/null
@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|Jest withTests 1`] = `This story shows test results`;
diff --git a/examples/html-kitchen-sink/stories/__snapshots__/addon-knobs.stories.storyshot b/examples/html-kitchen-sink/stories/__snapshots__/addon-knobs.stories.storyshot
deleted file mode 100644
index 7a21a63b844a..000000000000
--- a/examples/html-kitchen-sink/stories/__snapshots__/addon-knobs.stories.storyshot
+++ /dev/null
@@ -1,70 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|Knobs All knobs 1`] = `
-<div
-  style="border: 2px dotted deeppink; padding: 8px 22px; border-radius: 8px"
->
-  
-        
-  <h1>
-    My name is Jane,
-  </h1>
-  
-        
-  <h3>
-    today is January 20, 2017
-  </h3>
-  
-        
-  <p>
-    I have a stock of 20 apples, costing $2.25 each.
-  </p>
-  
-        
-  <p>
-    Also, I have:
-  </p>
-  
-        
-  <ul>
-    <li>
-      Laptop
-    </li>
-    <li>
-      Book
-    </li>
-    <li>
-      Whiskey
-    </li>
-  </ul>
-  
-        
-  <p>
-    Nice to meet you!
-  </p>
-  
-      
-</div>
-`;
-
-exports[`Storyshots Addons|Knobs CSS transitions 1`] = `
-<p
-  style="transition: color 0.5s ease-out; color: orangered;"
->
-  John Doe
-</p>
-`;
-
-exports[`Storyshots Addons|Knobs DOM 1`] = `
-<p>
-  John Doe
-</p>
-`;
-
-exports[`Storyshots Addons|Knobs Simple 1`] = `
-<div>
-  I am John Doe and I'm 44 years old.
-</div>
-`;
-
-exports[`Storyshots Addons|Knobs XSS safety 1`] = `&lt;img src=x onerror="alert('XSS Attack')" &gt;`;
diff --git a/examples/html-kitchen-sink/stories/__snapshots__/addon-notes.stories.storyshot b/examples/html-kitchen-sink/stories/__snapshots__/addon-notes.stories.storyshot
deleted file mode 100644
index b7b58fa7badb..000000000000
--- a/examples/html-kitchen-sink/stories/__snapshots__/addon-notes.stories.storyshot
+++ /dev/null
@@ -1,15 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|Notes Simple note 1`] = `
-<p>
-  
-        
-  <strong>
-    
-          This is a fragment of HTML
-        
-  </strong>
-  
-      
-</p>
-`;
diff --git a/examples/html-kitchen-sink/stories/__snapshots__/index.stories.storyshot b/examples/html-kitchen-sink/stories/__snapshots__/index.stories.storyshot
deleted file mode 100644
index 9fc155940224..000000000000
--- a/examples/html-kitchen-sink/stories/__snapshots__/index.stories.storyshot
+++ /dev/null
@@ -1,130 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Demo button 1`] = `
-<button>
-  Hello Button
-</button>
-`;
-
-exports[`Storyshots Demo heading 1`] = `
-<h1>
-  Hello World
-</h1>
-`;
-
-exports[`Storyshots Demo headings 1`] = `
-<section>
-  <h1>
-    Hello World
-  </h1>
-  <h2>
-    Hello World
-  </h2>
-  <h3>
-    Hello World
-  </h3>
-  <h4>
-    Hello World
-  </h4>
-</section>
-`;
-
-exports[`Storyshots Welcome Welcome 1`] = `
-<div
-  class="main"
->
-  
-  
-  <h1>
-    Welcome to Storybook for HTML
-  </h1>
-  
-  
-  <p>
-    This is a UI component dev environment for your plain HTML snippets.
-  </p>
-  
-  
-  <p>
-    
-    We've added some basic stories inside the 
-    <code
-      class="code"
-    >
-      stories
-    </code>
-     directory.
-    
-    <br />
-    
-    A story is a single state of one or more UI components. You can have as many stories as you want.
-    
-    <br />
-    
-    (Basically a story is like a visual test case.)
-  
-  </p>
-  
-  
-  <p>
-    
-    See these sample 
-    <a
-      class="link"
-      data-sb-kind="Demo"
-      data-sb-story="button"
-      href="#"
-    >
-      stories
-    </a>
-    
-  
-  </p>
-  
-  
-  <p>
-    <img
-      class="logo"
-      src="logo.svg"
-    />
-  </p>
-  
-  
-  <p>
-    
-    Just like that, you can add your own snippets as stories.
-    
-    <br />
-    
-    You can also edit those snippets and see changes right away.
-    
-    <br />
-    
-  
-  </p>
-  
-  
-  <p>
-    
-    Usually we create stories with smaller UI components in the app.
-    <br />
-    
-    Have a look at the
-    
-    <a
-      class="link"
-      href="https://storybook.js.org/basics/writing-stories"
-      target="_blank"
-    >
-      
-      Writing Stories
-    
-    </a>
-    
-    section in our documentation.
-  
-  </p>
-  
-
-</div>
-`;
diff --git a/examples/html-kitchen-sink/stories/addon-a11y.stories.js b/examples/html-kitchen-sink/stories/addon-a11y.stories.js
index d6b2c50319e4..d34e5fa623c8 100644
--- a/examples/html-kitchen-sink/stories/addon-a11y.stories.js
+++ b/examples/html-kitchen-sink/stories/addon-a11y.stories.js
@@ -1,23 +1,28 @@
 import { document, setTimeout } from 'global';
-import { storiesOf } from '@storybook/html';
 import { withA11y } from '@storybook/addon-a11y';
 
 const text = 'Testing the a11y addon';
 
-storiesOf('Addons|a11y', module)
-  .addDecorator(withA11y)
-  .addParameters({ options: { selectedPanel: 'storybook/a11y/panel' } })
-  .add('Default', () => `<button></button>`)
-  .add('Label', () => `<button>${text}</button>`)
-  .add('Disabled', () => `<button disabled>${text}</button>`)
-  .add(
-    'Invalid contrast',
-    () => `<button style="color: black; background-color: brown;">${text}</button>`
-  )
-  .add('Delayed render', () => {
-    const div = document.createElement('div');
-    setTimeout(() => {
-      div.innerHTML = `<button>This button has a delayed render of 1s</button>`;
-    }, 1000);
-    return div;
-  });
+export default {
+  title: 'Addons|a11y',
+  decorators: [withA11y],
+  parameters: {
+    options: { selectedPanel: 'storybook/a11y/panel' },
+  },
+};
+
+export const Default = () => `<button></button>`;
+export const Label = () => `<button>${text}</button>`;
+export const Disabled = () => `<button disabled>${text}</button>`;
+export const story4 = () =>
+  `<button style="color: black; background-color: brown;">${text}</button>`;
+story4.story = { name: 'Invalid contrast' };
+
+export const story5 = () => {
+  const div = document.createElement('div');
+  setTimeout(() => {
+    div.innerHTML = `<button>This button has a delayed render of 1s</button>`;
+  }, 1000);
+  return div;
+};
+story5.story = { name: 'Delayed render' };
diff --git a/examples/html-kitchen-sink/stories/addon-actions.stories.js b/examples/html-kitchen-sink/stories/addon-actions.stories.js
index 09f606d58dd4..82008bb1115e 100644
--- a/examples/html-kitchen-sink/stories/addon-actions.stories.js
+++ b/examples/html-kitchen-sink/stories/addon-actions.stories.js
@@ -1,34 +1,44 @@
-import { storiesOf } from '@storybook/html';
 import { withActions, decorate } from '@storybook/addon-actions';
 
 const pickTarget = decorate([args => [args[0].target]]);
 
 const button = () => `<button type="button">Hello World</button>`;
 
-storiesOf('Addons|Actions', module)
-  .add('Hello World', () => withActions('click')(button))
-  .add('Multiple actions', () => withActions('click', 'contextmenu')(button))
-  .add('Multiple actions + config', () =>
-    withActions('click', 'contextmenu', { clearOnStoryChange: false })(button)
-  )
-  .add('Multiple actions, object', () =>
-    withActions({ click: 'clicked', contextmenu: 'right clicked' })(button)
-  )
-  .add('Multiple actions, selector', () =>
-    withActions({ 'click .btn': 'clicked', contextmenu: 'right clicked' })(
-      () => `
+export default {
+  title: 'Addons|Actions',
+};
+
+export const story1 = () => withActions('click')(button);
+story1.story = { name: 'Hello World' };
+export const story2 = () => withActions('click', 'contextmenu')(button);
+story2.story = { name: 'Multiple actions' };
+
+export const story3 = () =>
+  withActions('click', 'contextmenu', { clearOnStoryChange: false })(button);
+story3.story = { name: 'Multiple actions + config' };
+
+export const story4 = () => withActions({ click: 'clicked', contextmenu: 'right clicked' })(button);
+story4.story = { name: 'Multiple actions, object' };
+
+export const story5 = () =>
+  withActions({ 'click .btn': 'clicked', contextmenu: 'right clicked' })(
+    () => `
         <div>
           Clicks on this button will be logged: <button class="btn" type="button">Button</button>
         </div>
       `
-    )
-  )
-  .add('Multiple actions, object + config', () =>
-    withActions({ click: 'clicked', contextmenu: 'right clicked' }, { clearOnStoryChange: false })(
-      button
-    )
-  )
-  .add('Decorated actions', () => pickTarget.withActions('click', 'contextmenu')(button))
-  .add('Decorated actions + config', () =>
-    pickTarget.withActions('click', 'contextmenu', { clearOnStoryChange: false })(button)
   );
+story5.story = { name: 'Multiple actions, selector' };
+
+export const story6 = () =>
+  withActions({ click: 'clicked', contextmenu: 'right clicked' }, { clearOnStoryChange: false })(
+    button
+  );
+story6.story = { name: 'Multiple actions, object + config' };
+
+export const story7 = () => pickTarget.withActions('click', 'contextmenu')(button);
+story7.story = { name: 'Decorated actions' };
+
+export const story8 = () =>
+  pickTarget.withActions('click', 'contextmenu', { clearOnStoryChange: false })(button);
+story8.story = { name: 'Decorated actions + config' };
diff --git a/examples/html-kitchen-sink/stories/addon-backgrounds.stories.js b/examples/html-kitchen-sink/stories/addon-backgrounds.stories.js
index 7e8689f96560..4a63ab1fce60 100644
--- a/examples/html-kitchen-sink/stories/addon-backgrounds.stories.js
+++ b/examples/html-kitchen-sink/stories/addon-backgrounds.stories.js
@@ -1,15 +1,16 @@
-import { storiesOf } from '@storybook/html';
-
-storiesOf('Addons|Backgrounds', module)
-  .addParameters({
+export default {
+  title: 'Addons|Backgrounds',
+  parameters: {
     backgrounds: [
       { name: 'light', value: '#eeeeee' },
       { name: 'dark', value: '#222222', default: true },
     ],
-  })
-  .add(
-    'story 1',
-    () =>
-      '<span style="color: white">You should be able to switch backgrounds for this story</span>'
-  )
-  .add('story 2', () => '<span style="color: white">This one too!</span>');
+  },
+};
+
+export const story1 = () =>
+  '<span style="color: white">You should be able to switch backgrounds for this story</span>';
+story1.story = { name: 'story 1' };
+
+export const story2 = () => '<span style="color: white">This one too!</span>';
+story2.story = { name: 'story 2' };
diff --git a/examples/html-kitchen-sink/stories/addon-centered.stories.js b/examples/html-kitchen-sink/stories/addon-centered.stories.js
index 49edcdfb4821..8242764f7fee 100644
--- a/examples/html-kitchen-sink/stories/addon-centered.stories.js
+++ b/examples/html-kitchen-sink/stories/addon-centered.stories.js
@@ -1,6 +1,9 @@
-import { storiesOf } from '@storybook/html';
 import centered from '@storybook/addon-centered/html';
 
-storiesOf('Addons|Centered', module)
-  .addDecorator(centered)
-  .add('button in center', () => '<button>I am a Button !</button>');
+export default {
+  title: 'Addons|Centered',
+  decorators: [centered],
+};
+
+export const story1 = () => '<button>I am a Button !</button>';
+story1.story = { name: 'button in center' };
diff --git a/examples/html-kitchen-sink/stories/addon-events.stories.js b/examples/html-kitchen-sink/stories/addon-events.stories.js
index 5da5b3b9c38a..812ddc22cb10 100644
--- a/examples/html-kitchen-sink/stories/addon-events.stories.js
+++ b/examples/html-kitchen-sink/stories/addon-events.stories.js
@@ -1,5 +1,4 @@
 import EventEmitter from 'eventemitter3';
-import { storiesOf } from '@storybook/html';
 import addons from '@storybook/addons';
 import CoreEvents from '@storybook/core-events';
 import json from 'format-json';
@@ -32,8 +31,9 @@ const subscription = () => {
   return () => eventHandlers.forEach(({ name, handler }) => emitter.removeListener(name, handler));
 };
 
-storiesOf('Addons|Events', module)
-  .addDecorator(
+export default {
+  title: 'Addons|Events',
+  decorators: [
     withEvents({
       emit,
       events: [
@@ -83,33 +83,32 @@ storiesOf('Addons|Events', module)
           ],
         },
       ],
-    })
-  )
-  .addDecorator(storyFn => {
-    addons.getChannel().emit(CoreEvents.REGISTER_SUBSCRIPTION, subscription);
-    return storyFn();
-  })
-  .add(
-    'Logger',
-    () => `
-      <div class="wrapper">
-        <h1 class="title">Logger</h1>
-        <dl>
-          ${events
-            .map(
-              ({ name, payload }) => `
-                <div class="item">
-                  <dt>
-                    <b>Event name:</b> ${name}
-                  </dt>
-                  <dd>
-                    <b>Event payload:</b> ${json.plain(payload)}
-                  </dd>
-                </div>
-              `
-            )
-            .join('')}
-        </dl>
-      </div>
-    `
-  );
+    }),
+    storyFn => {
+      addons.getChannel().emit(CoreEvents.REGISTER_SUBSCRIPTION, subscription);
+      return storyFn();
+    },
+  ],
+};
+
+export const Logger = () => `
+  <div class="wrapper">
+    <h1 class="title">Logger</h1>
+    <dl>
+      ${events
+        .map(
+          ({ name, payload }) => `
+            <div class="item">
+              <dt>
+                <b>Event name:</b> ${name}
+              </dt>
+              <dd>
+                <b>Event payload:</b> ${json.plain(payload)}
+              </dd>
+            </div>
+          `
+        )
+        .join('')}
+    </dl>
+  </div>
+`;
diff --git a/examples/html-kitchen-sink/stories/addon-jest.stories.js b/examples/html-kitchen-sink/stories/addon-jest.stories.js
index 11a88e0570e7..d39a86527ed5 100644
--- a/examples/html-kitchen-sink/stories/addon-jest.stories.js
+++ b/examples/html-kitchen-sink/stories/addon-jest.stories.js
@@ -1,8 +1,10 @@
-import { storiesOf } from '@storybook/html';
-
-import { withTests } from '@storybook/addon-jest';
+import { withTests as wt } from '@storybook/addon-jest';
 import results from './addon-jest.testresults.json';
 
-storiesOf('Addons|Jest', module)
-  .addDecorator(withTests({ results }))
-  .add('withTests', () => 'This story shows test results', { jest: 'addon-jest' });
+export default {
+  title: 'Addons|Jest',
+  decorators: [wt({ results })],
+};
+
+export const withTests = () => 'This story shows test results';
+withTests.parameters = { jest: 'addon-jest' };
diff --git a/examples/html-kitchen-sink/stories/addon-knobs.stories.js b/examples/html-kitchen-sink/stories/addon-knobs.stories.js
index 85a364b5b686..edae4ae89339 100644
--- a/examples/html-kitchen-sink/stories/addon-knobs.stories.js
+++ b/examples/html-kitchen-sink/stories/addon-knobs.stories.js
@@ -1,4 +1,3 @@
-import { storiesOf } from '@storybook/html';
 import { action } from '@storybook/addon-actions';
 import { document } from 'global';
 
@@ -15,63 +14,68 @@ import {
 } from '@storybook/addon-knobs';
 
 const cachedContainer = document.createElement('p');
-storiesOf('Addons|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.`;
 
-    return `<div>${content}</div>`;
-  })
-  .add('DOM', () => {
-    const name = text('Name', 'John Doe');
-    const container = document.createElement('p');
-    container.textContent = name;
-    return container;
-  })
-  .add('CSS transitions', () => {
-    const name = text('Name', 'John Doe');
-    const textColor = color('Text color', 'orangered');
-    cachedContainer.textContent = name;
-    cachedContainer.style.transition = 'color 0.5s ease-out';
-    cachedContainer.style.color = textColor;
-    return cachedContainer;
-  })
-  .add('All knobs', () => {
-    const name = text('Name', 'Jane');
-    const stock = number('Stock', 20, {
-      range: true,
-      min: 0,
-      max: 30,
-      step: 5,
-    });
-    const fruits = {
-      Apple: 'apples',
-      Banana: 'bananas',
-      Cherry: 'cherries',
-    };
-    const fruit = select('Fruit', fruits, 'apples');
+export default {
+  title: 'Addons|Knobs',
+  decorators: [withKnobs],
+};
 
-    const price = number('Price', 2.25);
+export const Simple = () => {
+  const name = text('Name', 'John Doe');
+  const age = number('Age', 44);
+  const content = `I am ${name} and I'm ${age} years old.`;
+  return `<div>${content}</div>`;
+};
 
-    const colour = color('Border', 'deeppink');
-    const today = date('Today', new Date('Jan 20 2017 GMT+0'));
-    const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
-    const nice = boolean('Nice', true);
+export const DOM = () => {
+  const name = text('Name', 'John Doe');
+  const container = document.createElement('p');
+  container.textContent = name;
+  return container;
+};
 
-    const stockMessage = stock
-      ? `I have a stock of ${stock} ${fruit}, costing &dollar;${price} each.`
-      : `I'm out of ${fruit}${nice ? ', Sorry!' : '.'}`;
+export const story3 = () => {
+  const name = text('Name', 'John Doe');
+  const textColor = color('Text color', 'orangered');
+  cachedContainer.textContent = name;
+  cachedContainer.style.transition = 'color 0.5s ease-out';
+  cachedContainer.style.color = textColor;
+  return cachedContainer;
+};
+story3.story = { name: 'CSS transitions' };
 
-    const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
-    const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' };
+export const story4 = () => {
+  const name = text('Name', 'Jane');
+  const stock = number('Stock', 20, {
+    range: true,
+    min: 0,
+    max: 30,
+    step: 5,
+  });
+  const fruits = {
+    Apple: 'apples',
+    Banana: 'bananas',
+    Cherry: 'cherries',
+  };
+  const fruit = select('Fruit', fruits, 'apples');
+  const price = number('Price', 2.25);
+  const colour = color('Border', 'deeppink');
+  const today = date('Today', new Date('Jan 20 2017 GMT+0'));
+  const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
+  const nice = boolean('Nice', true);
 
-    button('Arbitrary action', action('You clicked it!'));
+  const stockMessage = stock
+    ? `I have a stock of ${stock} ${fruit}, costing &dollar;${price} each.`
+    : `I'm out of ${fruit}${nice ? ', Sorry!' : '.'}`;
 
-    const style = `border: 2px dotted ${colour}; padding: 8px 22px; border-radius: 8px`;
+  const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
+  const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' };
 
-    return `<div style="${style}">
+  button('Arbitrary action', action('You clicked it!'));
+
+  const style = `border: 2px dotted ${colour}; padding: 8px 22px; border-radius: 8px`;
+
+  return `<div style="${style}">
         <h1>My name is ${name},</h1>
         <h3>today is ${new Date(today).toLocaleDateString('en-US', dateOptions)}</h3>
         <p>${stockMessage}</p>
@@ -80,5 +84,8 @@ storiesOf('Addons|Knobs', module)
         <p>${salutation}</p>
       </div>
     `;
-  })
-  .add('XSS safety', () => text('Rendered string', '<img src=x onerror="alert(\'XSS Attack\')" >'));
+};
+story4.story = { name: 'All knobs' };
+
+export const story5 = () => text('Rendered string', '<img src=x onerror="alert(\'XSS Attack\')" >');
+story5.story = { name: 'XSS safety' };
diff --git a/examples/html-kitchen-sink/stories/addon-notes.stories.js b/examples/html-kitchen-sink/stories/addon-notes.stories.js
index fab6f368a321..8fd33be9c37c 100644
--- a/examples/html-kitchen-sink/stories/addon-notes.stories.js
+++ b/examples/html-kitchen-sink/stories/addon-notes.stories.js
@@ -1,14 +1,16 @@
-import { storiesOf } from '@storybook/html';
+export default {
+  title: 'Addons|Notes',
+};
 
-storiesOf('Addons|Notes', module).add(
-  'Simple note',
-  () =>
-    `<p>
-        <strong>
-          This is a fragment of HTML
-        </strong>
-      </p>`,
-  {
+export const story1 = () =>
+  `<p>
+      <strong>
+        This is a fragment of HTML
+      </strong>
+    </p>`;
+story1.story = {
+  name: 'Simple note',
+  parameters: {
     notes: 'My notes on some bold text',
-  }
-);
+  },
+};
diff --git a/examples/html-kitchen-sink/stories/button.stories.js b/examples/html-kitchen-sink/stories/button.stories.js
new file mode 100644
index 000000000000..02ed6aae869b
--- /dev/null
+++ b/examples/html-kitchen-sink/stories/button.stories.js
@@ -0,0 +1,17 @@
+import { document } from 'global';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'Demo',
+};
+
+export const heading = () => '<h1>Hello World</h1>';
+export const headings = () =>
+  '<h1>Hello World</h1><h2>Hello World</h2><h3>Hello World</h3><h4>Hello World</h4>';
+
+export const button = () => {
+  const btn = document.createElement('button');
+  btn.innerHTML = 'Hello Button';
+  btn.addEventListener('click', action('Click'));
+  return btn;
+};
diff --git a/examples/html-kitchen-sink/stories/index.stories.js b/examples/html-kitchen-sink/stories/index.stories.js
deleted file mode 100644
index 1dcedbdb3522..000000000000
--- a/examples/html-kitchen-sink/stories/index.stories.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { document } from 'global';
-import { storiesOf } from '@storybook/html';
-import { action } from '@storybook/addon-actions';
-import { withLinks } from '@storybook/addon-links';
-
-import './welcome.css';
-import welcome from './welcome.html';
-
-storiesOf('Welcome', module)
-  .addDecorator(withLinks)
-  .add('Welcome', () => welcome);
-
-storiesOf('Demo', module)
-  .add('heading', () => '<h1>Hello World</h1>')
-  .add(
-    'headings',
-    () => '<h1>Hello World</h1><h2>Hello World</h2><h3>Hello World</h3><h4>Hello World</h4>'
-  )
-  .add('button', () => {
-    const button = document.createElement('button');
-    button.innerHTML = 'Hello Button';
-    button.addEventListener('click', action('Click'));
-    return button;
-  });
diff --git a/examples/html-kitchen-sink/stories/welcome.stories.js b/examples/html-kitchen-sink/stories/welcome.stories.js
new file mode 100644
index 000000000000..6410a83ee835
--- /dev/null
+++ b/examples/html-kitchen-sink/stories/welcome.stories.js
@@ -0,0 +1,11 @@
+import { withLinks } from '@storybook/addon-links';
+
+import './welcome.css';
+import welcome from './welcome.html';
+
+export default {
+  title: 'Welcome',
+  decorators: [withLinks],
+};
+
+export const Welcome = () => welcome;
diff --git a/examples/html-kitchen-sink/tests/__snapshots__/htmlshots.test.js.snap b/examples/html-kitchen-sink/tests/__snapshots__/htmlshots.test.js.snap
new file mode 100644
index 000000000000..01411c235cb7
--- /dev/null
+++ b/examples/html-kitchen-sink/tests/__snapshots__/htmlshots.test.js.snap
@@ -0,0 +1,339 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addons|Actions Decorated actions + config 1`] = `
+<button
+  type="button"
+>
+  Hello World
+</button>
+`;
+
+exports[`Storyshots Addons|Actions Decorated actions 1`] = `
+<button
+  type="button"
+>
+  Hello World
+</button>
+`;
+
+exports[`Storyshots Addons|Actions Hello World 1`] = `
+<button
+  type="button"
+>
+  Hello World
+</button>
+`;
+
+exports[`Storyshots Addons|Actions Multiple actions + config 1`] = `
+<button
+  type="button"
+>
+  Hello World
+</button>
+`;
+
+exports[`Storyshots Addons|Actions Multiple actions 1`] = `
+<button
+  type="button"
+>
+  Hello World
+</button>
+`;
+
+exports[`Storyshots Addons|Actions Multiple actions, object + config 1`] = `
+<button
+  type="button"
+>
+  Hello World
+</button>
+`;
+
+exports[`Storyshots Addons|Actions Multiple actions, object 1`] = `
+<button
+  type="button"
+>
+  Hello World
+</button>
+`;
+
+exports[`Storyshots Addons|Actions Multiple actions, selector 1`] = `
+
+        
+`;
+
+exports[`Storyshots Addons|Backgrounds story 1 1`] = `
+<span
+  style="color: white"
+>
+  You should be able to switch backgrounds for this story
+</span>
+`;
+
+exports[`Storyshots Addons|Backgrounds story 2 1`] = `
+<span
+  style="color: white"
+>
+  This one too!
+</span>
+`;
+
+exports[`Storyshots Addons|Centered button in center 1`] = `
+<div
+  id="sb-addon-centered-wrapper"
+  style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; align-items: center; overflow: auto;"
+>
+  <div
+    id="sb-addon-centered-inner"
+    style="margin: auto; max-height: 100%;"
+  >
+    <button>
+      I am a Button !
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Addons|Events Logger 1`] = `
+
+  
+`;
+
+exports[`Storyshots Addons|Jest withTests 1`] = `This story shows test results`;
+
+exports[`Storyshots Addons|Knobs All knobs 1`] = `
+<div
+  style="border: 2px dotted deeppink; padding: 8px 22px; border-radius: 8px"
+>
+  
+        
+  <h1>
+    My name is Jane,
+  </h1>
+  
+        
+  <h3>
+    today is January 20, 2017
+  </h3>
+  
+        
+  <p>
+    I have a stock of 20 apples, costing $2.25 each.
+  </p>
+  
+        
+  <p>
+    Also, I have:
+  </p>
+  
+        
+  <ul>
+    <li>
+      Laptop
+    </li>
+    <li>
+      Book
+    </li>
+    <li>
+      Whiskey
+    </li>
+  </ul>
+  
+        
+  <p>
+    Nice to meet you!
+  </p>
+  
+      
+</div>
+`;
+
+exports[`Storyshots Addons|Knobs CSS transitions 1`] = `
+<p
+  style="transition: color 0.5s ease-out; color: orangered;"
+>
+  John Doe
+</p>
+`;
+
+exports[`Storyshots Addons|Knobs DOM 1`] = `
+<p>
+  John Doe
+</p>
+`;
+
+exports[`Storyshots Addons|Knobs Simple 1`] = `
+<div>
+  I am John Doe and I'm 44 years old.
+</div>
+`;
+
+exports[`Storyshots Addons|Knobs XSS safety 1`] = `&lt;img src=x onerror="alert('XSS Attack')" &gt;`;
+
+exports[`Storyshots Addons|Notes Simple note 1`] = `
+<p>
+  
+      
+  <strong>
+    
+        This is a fragment of HTML
+      
+  </strong>
+  
+    
+</p>
+`;
+
+exports[`Storyshots Addons|a11y Default 1`] = `<button />`;
+
+exports[`Storyshots Addons|a11y Delayed render 1`] = `<div />`;
+
+exports[`Storyshots Addons|a11y Disabled 1`] = `
+<button
+  disabled=""
+>
+  Testing the a11y addon
+</button>
+`;
+
+exports[`Storyshots Addons|a11y Invalid contrast 1`] = `
+<button
+  style="color: black; background-color: brown;"
+>
+  Testing the a11y addon
+</button>
+`;
+
+exports[`Storyshots Addons|a11y Label 1`] = `
+<button>
+  Testing the a11y addon
+</button>
+`;
+
+exports[`Storyshots Demo button 1`] = `
+<button>
+  Hello Button
+</button>
+`;
+
+exports[`Storyshots Demo heading 1`] = `
+<h1>
+  Hello World
+</h1>
+`;
+
+exports[`Storyshots Demo headings 1`] = `
+<section>
+  <h1>
+    Hello World
+  </h1>
+  <h2>
+    Hello World
+  </h2>
+  <h3>
+    Hello World
+  </h3>
+  <h4>
+    Hello World
+  </h4>
+</section>
+`;
+
+exports[`Storyshots Welcome Welcome 1`] = `
+<div
+  class="main"
+>
+  
+  
+  <h1>
+    Welcome to Storybook for HTML
+  </h1>
+  
+  
+  <p>
+    This is a UI component dev environment for your plain HTML snippets.
+  </p>
+  
+  
+  <p>
+    
+    We've added some basic stories inside the 
+    <code
+      class="code"
+    >
+      stories
+    </code>
+     directory.
+    
+    <br />
+    
+    A story is a single state of one or more UI components. You can have as many stories as you want.
+    
+    <br />
+    
+    (Basically a story is like a visual test case.)
+  
+  </p>
+  
+  
+  <p>
+    
+    See these sample 
+    <a
+      class="link"
+      data-sb-kind="Demo"
+      data-sb-story="button"
+      href="#"
+    >
+      stories
+    </a>
+    
+  
+  </p>
+  
+  
+  <p>
+    <img
+      class="logo"
+      src="logo.svg"
+    />
+  </p>
+  
+  
+  <p>
+    
+    Just like that, you can add your own snippets as stories.
+    
+    <br />
+    
+    You can also edit those snippets and see changes right away.
+    
+    <br />
+    
+  
+  </p>
+  
+  
+  <p>
+    
+    Usually we create stories with smaller UI components in the app.
+    <br />
+    
+    Have a look at the
+    
+    <a
+      class="link"
+      href="https://storybook.js.org/basics/writing-stories"
+      target="_blank"
+    >
+      
+      Writing Stories
+    
+    </a>
+    
+    section in our documentation.
+  
+  </p>
+  
+
+</div>
+`;
diff --git a/examples/marko-cli/.storybook/config.js b/examples/marko-cli/.storybook/config.js
index bee4a6743547..9964ec17b8e5 100644
--- a/examples/marko-cli/.storybook/config.js
+++ b/examples/marko-cli/.storybook/config.js
@@ -1,4 +1,4 @@
-import { configure, addParameters, addDecorator } from '@storybook/marko';
+import { load, addParameters, addDecorator } from '@storybook/marko';
 import { withA11y } from '@storybook/addon-a11y';
 
 addDecorator(withA11y);
@@ -8,13 +8,4 @@ addParameters({
   },
 });
 
-function loadStories() {
-  // put welcome screen at the top of the list so it's the first one displayed
-  // require('../src/stories/welcome');
-
-  // automatically import all story js files that end with *.stories.js
-  const req = require.context('../src/stories', true, /\.stories\.js$/);
-  req.keys().forEach(filename => req(filename));
-}
-
-configure(loadStories, module);
+load(require.context('../src/stories', true, /\.stories\.js$/), module);
diff --git a/examples/marko-cli/.storybook/webpack.config.js b/examples/marko-cli/.storybook/webpack.config.js
index 5c4768c30ce1..8c62bf31bd42 100644
--- a/examples/marko-cli/.storybook/webpack.config.js
+++ b/examples/marko-cli/.storybook/webpack.config.js
@@ -3,7 +3,7 @@ const path = require('path');
 module.exports = async ({ config }) => {
   config.module.rules.push({
     test: [/\.stories\.js$/],
-    loaders: [require.resolve('@storybook/source-loader')],
+    loaders: [require.resolve('@storybook/addon-storysource/loader')],
     include: [path.resolve(__dirname, '../src')],
     enforce: 'pre',
   });
diff --git a/examples/marko-cli/package.json b/examples/marko-cli/package.json
index 212822acd7db..eb3d3779d262 100644
--- a/examples/marko-cli/package.json
+++ b/examples/marko-cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "marko-cli",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "private": true,
   "description": "Demo of how to build an app using marko-starter",
   "repository": {
@@ -24,14 +24,14 @@
     "marko-starter": "^2.0.4"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "5.2.0-alpha.30",
-    "@storybook/addon-actions": "5.2.0-alpha.30",
-    "@storybook/addon-knobs": "5.2.0-alpha.30",
-    "@storybook/addon-options": "5.2.0-alpha.30",
-    "@storybook/addon-storysource": "5.2.0-alpha.30",
-    "@storybook/addons": "5.2.0-alpha.30",
-    "@storybook/marko": "5.2.0-alpha.30",
-    "@storybook/source-loader": "5.2.0-alpha.30",
+    "@storybook/addon-a11y": "5.2.0-alpha.36",
+    "@storybook/addon-actions": "5.2.0-alpha.36",
+    "@storybook/addon-knobs": "5.2.0-alpha.36",
+    "@storybook/addon-options": "5.2.0-alpha.36",
+    "@storybook/addon-storysource": "5.2.0-alpha.36",
+    "@storybook/addons": "5.2.0-alpha.36",
+    "@storybook/marko": "5.2.0-alpha.36",
+    "@storybook/source-loader": "5.2.0-alpha.36",
     "prettier": "^1.16.4",
     "webpack": "^4.33.0"
   }
diff --git a/examples/marko-cli/src/stories/addon-actions.stories.js b/examples/marko-cli/src/stories/addon-actions.stories.js
index fe094b3f4acd..aeb7e22788b3 100644
--- a/examples/marko-cli/src/stories/addon-actions.stories.js
+++ b/examples/marko-cli/src/stories/addon-actions.stories.js
@@ -1,9 +1,11 @@
-import { storiesOf } from '@storybook/marko';
 import { action } from '@storybook/addon-actions';
 import Button from '../components/action-button/index.marko';
 
-storiesOf('Addons|Actions/Button', module)
-  .addParameters({
+export default {
+  title: 'Addons|Actions/Button',
+  parameters: {
     component: Button,
-  })
-  .add('Simple', () => Button.renderSync({ click: action('action logged!') }));
+  },
+};
+
+export const Simple = () => Button.renderSync({ click: action('action logged!') });
diff --git a/examples/marko-cli/src/stories/addon-knobs.stories.js b/examples/marko-cli/src/stories/addon-knobs.stories.js
index f6236d9862a0..88595ecee276 100644
--- a/examples/marko-cli/src/stories/addon-knobs.stories.js
+++ b/examples/marko-cli/src/stories/addon-knobs.stories.js
@@ -1,18 +1,20 @@
-import { storiesOf } from '@storybook/marko';
 import { withKnobs, text, number } from '@storybook/addon-knobs';
 import Hello from '../components/hello/index.marko';
 
-storiesOf('Addons|Knobs/Hello', module)
-  .addParameters({
+export default {
+  title: 'Addons|Knobs/Hello',
+  decorators: [withKnobs],
+  parameters: {
     component: Hello,
-  })
-  .addParameters({ options: { panelPosition: 'right' } })
-  .addDecorator(withKnobs)
-  .add('Simple', () => {
-    const name = text('Name', 'John Doe');
-    const age = number('Age', 44);
-    return Hello.renderSync({
-      name,
-      age,
-    });
+    options: { panelPosition: 'right' },
+  },
+};
+
+export const Simple = () => {
+  const name = text('Name', 'John Doe');
+  const age = number('Age', 44);
+  return Hello.renderSync({
+    name,
+    age,
   });
+};
diff --git a/examples/marko-cli/src/stories/clickcount.stories.js b/examples/marko-cli/src/stories/clickcount.stories.js
new file mode 100644
index 000000000000..351c07daca61
--- /dev/null
+++ b/examples/marko-cli/src/stories/clickcount.stories.js
@@ -0,0 +1,11 @@
+import ClickCount from '../components/click-count/index.marko';
+
+export default {
+  title: 'Main|ClickCount',
+
+  parameters: {
+    component: ClickCount,
+  },
+};
+
+export const Simple = () => ClickCount.renderSync({});
diff --git a/examples/marko-cli/src/stories/hello.stories.js b/examples/marko-cli/src/stories/hello.stories.js
new file mode 100644
index 000000000000..bdefe281dc1a
--- /dev/null
+++ b/examples/marko-cli/src/stories/hello.stories.js
@@ -0,0 +1,12 @@
+import Hello from '../components/hello/index.marko';
+
+export default {
+  title: 'Main|Hello',
+  parameters: {
+    component: Hello,
+  },
+};
+
+export const Simple = () => Hello.renderSync({ name: 'abc', age: 20 });
+export const story2 = () => 'NOT A MARKO RENDER_RESULT';
+story2.story = { name: 'with ERROR!' };
diff --git a/examples/marko-cli/src/stories/index.stories.js b/examples/marko-cli/src/stories/index.stories.js
deleted file mode 100644
index 9437d7ff170e..000000000000
--- a/examples/marko-cli/src/stories/index.stories.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { storiesOf } from '@storybook/marko';
-import Hello from '../components/hello/index.marko';
-import ClickCount from '../components/click-count/index.marko';
-import StopWatch from '../components/stop-watch/index.marko';
-import Welcome from '../components/welcome/index.marko';
-
-storiesOf('Main|Welcome', module)
-  .addParameters({
-    component: Welcome,
-  })
-  .add('welcome', () => Welcome.renderSync({}));
-
-storiesOf('Main|Hello', module)
-  .addParameters({
-    component: Hello,
-  })
-  .add('Simple', () => Hello.renderSync({ name: 'abc', age: 20 }))
-  .add('with ERROR!', () => 'NOT A MARKO RENDER_RESULT');
-
-storiesOf('Main|ClickCount', module)
-  .addParameters({
-    component: ClickCount,
-  })
-  .add('Simple', () => ClickCount.renderSync({}));
-
-storiesOf('Main|StopWatch', module)
-  .addParameters({
-    component: StopWatch,
-  })
-  .add('Simple', () => StopWatch.renderSync({}));
diff --git a/examples/marko-cli/src/stories/stopwatch.stories.js b/examples/marko-cli/src/stories/stopwatch.stories.js
new file mode 100644
index 000000000000..3fc37effb062
--- /dev/null
+++ b/examples/marko-cli/src/stories/stopwatch.stories.js
@@ -0,0 +1,10 @@
+import StopWatch from '../components/stop-watch/index.marko';
+
+export default {
+  title: 'Main|StopWatch',
+  parameters: {
+    component: StopWatch,
+  },
+};
+
+export const Simple = () => StopWatch.renderSync({});
diff --git a/examples/marko-cli/src/stories/welcome.stories.js b/examples/marko-cli/src/stories/welcome.stories.js
new file mode 100644
index 000000000000..9cd2db677092
--- /dev/null
+++ b/examples/marko-cli/src/stories/welcome.stories.js
@@ -0,0 +1,10 @@
+import Welcome from '../components/welcome/index.marko';
+
+export default {
+  title: 'Main|Welcome',
+  parameters: {
+    component: Welcome,
+  },
+};
+
+export const welcome = () => Welcome.renderSync({});
diff --git a/examples/mithril-kitchen-sink/.storybook/config.js b/examples/mithril-kitchen-sink/.storybook/config.js
index 1155598a41c8..952cb333b8ce 100644
--- a/examples/mithril-kitchen-sink/.storybook/config.js
+++ b/examples/mithril-kitchen-sink/.storybook/config.js
@@ -1,4 +1,4 @@
-import { configure, addParameters, addDecorator } from '@storybook/mithril';
+import { load, addParameters, addDecorator } from '@storybook/mithril';
 import { withA11y } from '@storybook/addon-a11y';
 
 addDecorator(withA11y);
@@ -8,9 +8,4 @@ addParameters({
   },
 });
 
-function loadStories() {
-  const req = require.context('../src/stories', true, /\.stories\.js$/);
-  req.keys().forEach(filename => req(filename));
-}
-
-configure(loadStories, module);
+load(require.context('../src/stories', true, /\.stories\.js$/), module);
diff --git a/examples/mithril-kitchen-sink/.storybook/webpack.config.js b/examples/mithril-kitchen-sink/.storybook/webpack.config.js
index 5c4768c30ce1..8c62bf31bd42 100644
--- a/examples/mithril-kitchen-sink/.storybook/webpack.config.js
+++ b/examples/mithril-kitchen-sink/.storybook/webpack.config.js
@@ -3,7 +3,7 @@ const path = require('path');
 module.exports = async ({ config }) => {
   config.module.rules.push({
     test: [/\.stories\.js$/],
-    loaders: [require.resolve('@storybook/source-loader')],
+    loaders: [require.resolve('@storybook/addon-storysource/loader')],
     include: [path.resolve(__dirname, '../src')],
     enforce: 'pre',
   });
diff --git a/examples/mithril-kitchen-sink/package.json b/examples/mithril-kitchen-sink/package.json
index ee7812816791..31fe856acf64 100644
--- a/examples/mithril-kitchen-sink/package.json
+++ b/examples/mithril-kitchen-sink/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mithril-example",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "private": true,
   "scripts": {
     "build-storybook": "build-storybook",
@@ -11,20 +11,20 @@
     "mithril": "^1.1.6"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "5.2.0-alpha.30",
-    "@storybook/addon-actions": "5.2.0-alpha.30",
-    "@storybook/addon-backgrounds": "5.2.0-alpha.30",
-    "@storybook/addon-centered": "5.2.0-alpha.30",
-    "@storybook/addon-knobs": "5.2.0-alpha.30",
-    "@storybook/addon-links": "5.2.0-alpha.30",
-    "@storybook/addon-notes": "5.2.0-alpha.30",
-    "@storybook/addon-options": "5.2.0-alpha.30",
-    "@storybook/addon-storyshots": "5.2.0-alpha.30",
-    "@storybook/addon-storysource": "5.2.0-alpha.30",
-    "@storybook/addon-viewport": "5.2.0-alpha.30",
-    "@storybook/addons": "5.2.0-alpha.30",
-    "@storybook/mithril": "5.2.0-alpha.30",
-    "@storybook/source-loader": "5.2.0-alpha.30",
+    "@storybook/addon-a11y": "5.2.0-alpha.36",
+    "@storybook/addon-actions": "5.2.0-alpha.36",
+    "@storybook/addon-backgrounds": "5.2.0-alpha.36",
+    "@storybook/addon-centered": "5.2.0-alpha.36",
+    "@storybook/addon-knobs": "5.2.0-alpha.36",
+    "@storybook/addon-links": "5.2.0-alpha.36",
+    "@storybook/addon-notes": "5.2.0-alpha.36",
+    "@storybook/addon-options": "5.2.0-alpha.36",
+    "@storybook/addon-storyshots": "5.2.0-alpha.36",
+    "@storybook/addon-storysource": "5.2.0-alpha.36",
+    "@storybook/addon-viewport": "5.2.0-alpha.36",
+    "@storybook/addons": "5.2.0-alpha.36",
+    "@storybook/mithril": "5.2.0-alpha.36",
+    "@storybook/source-loader": "5.2.0-alpha.36",
     "webpack": "^4.33.0"
   }
 }
diff --git a/examples/mithril-kitchen-sink/src/stories/addon-actions.stories.js b/examples/mithril-kitchen-sink/src/stories/addon-actions.stories.js
index 358031795d45..58e06373596e 100644
--- a/examples/mithril-kitchen-sink/src/stories/addon-actions.stories.js
+++ b/examples/mithril-kitchen-sink/src/stories/addon-actions.stories.js
@@ -1,37 +1,44 @@
 /** @jsx m */
 
 import m from 'mithril';
-
-import { storiesOf } from '@storybook/mithril';
 import { action, actions } from '@storybook/addon-actions';
 import Button from '../Button';
 
-storiesOf('Addons|Actions', module)
-  .add('Action only', () => ({
-    view: () => <Button onclick={action('logo1')}>Click me to log the action</Button>,
-  }))
-  .add('Multiple actions', () => ({
-    view: () => (
-      <Button {...actions('onclick', 'ondblclick')}>(Double) click me to log the action</Button>
-    ),
-  }))
-  .add('Multiple actions, object', () => ({
-    view: () => (
-      <Button {...actions({ onclick: 'clicked', ondblclick: 'double clicked' })}>
-        (Double) click me to log the action
-      </Button>
-    ),
-  }))
+export default {
+  title: 'Addons|Actions',
+};
+
+export const story1 = () => ({
+  view: () => <Button onclick={action('logo1')}>Click me to log the action</Button>,
+});
+story1.story = { name: 'Action only' };
+
+export const story2 = () => ({
+  view: () => (
+    <Button {...actions('onclick', 'ondblclick')}>(Double) click me to log the action</Button>
+  ),
+});
+story2.story = { name: 'Multiple actions' };
+
+export const story3 = () => ({
+  view: () => (
+    <Button {...actions({ onclick: 'clicked', ondblclick: 'double clicked' })}>
+      (Double) click me to log the action
+    </Button>
+  ),
+});
+story3.story = { name: 'Multiple actions, object' };
 
-  .add('Action and method', () => ({
-    view: () => (
-      <Button
-        onclick={e => {
-          e.preventDefault();
-          action('log2')(e.target);
-        }}
-      >
-        Click me to log the action
-      </Button>
-    ),
-  }));
+export const story4 = () => ({
+  view: () => (
+    <Button
+      onclick={e => {
+        e.preventDefault();
+        action('log2')(e.target);
+      }}
+    >
+      Click me to log the action
+    </Button>
+  ),
+});
+story4.story = { name: 'Action and method' };
diff --git a/examples/mithril-kitchen-sink/src/stories/addon-backgrounds.stories.js b/examples/mithril-kitchen-sink/src/stories/addon-backgrounds.stories.js
index ea67de2836c9..2a6e62c39d31 100644
--- a/examples/mithril-kitchen-sink/src/stories/addon-backgrounds.stories.js
+++ b/examples/mithril-kitchen-sink/src/stories/addon-backgrounds.stories.js
@@ -1,21 +1,24 @@
 /** @jsx m */
 
 import m from 'mithril';
-
-import { storiesOf } from '@storybook/mithril';
-
 import BaseButton from '../BaseButton';
 
-storiesOf('Addons|Backgrounds', module)
-  .addParameters({
+export default {
+  title: 'Addons|Backgrounds',
+  parameters: {
     backgrounds: [
       { name: 'light', value: '#eeeeee' },
       { name: 'dark', value: '#222222', default: true },
     ],
-  })
-  .add('story 1', () => ({
-    view: () => <BaseButton label="You should be able to switch backgrounds for this story" />,
-  }))
-  .add('story 2', () => ({
-    view: () => <BaseButton label="This one too!" />,
-  }));
+  },
+};
+
+export const story1 = () => ({
+  view: () => <BaseButton label="You should be able to switch backgrounds for this story" />,
+});
+story1.story = { name: 'story 1' };
+
+export const story2 = () => ({
+  view: () => <BaseButton label="This one too!" />,
+});
+story2.story = { name: 'story 2' };
diff --git a/examples/mithril-kitchen-sink/src/stories/addon-centered.stories.js b/examples/mithril-kitchen-sink/src/stories/addon-centered.stories.js
index 3623a83e701b..f646d74b4a23 100644
--- a/examples/mithril-kitchen-sink/src/stories/addon-centered.stories.js
+++ b/examples/mithril-kitchen-sink/src/stories/addon-centered.stories.js
@@ -1,16 +1,17 @@
 /** @jsx m */
 
 import m from 'mithril';
-
-import { storiesOf } from '@storybook/mithril';
 import Centered from '@storybook/addon-centered/mithril';
 import Button from '../Button';
 
-storiesOf('Addons|Centered', module)
-  .addParameters({
+export default {
+  title: 'Addons|Centered',
+  decorators: [Centered],
+  parameters: {
     component: Centered,
-  })
-  .addDecorator(Centered)
-  .add('button', () => ({
-    view: () => <Button>A button</Button>,
-  }));
+  },
+};
+
+export const button = () => ({
+  view: () => <Button>A button</Button>,
+});
diff --git a/examples/mithril-kitchen-sink/src/stories/addon-knobs.stories.js b/examples/mithril-kitchen-sink/src/stories/addon-knobs.stories.js
index 244a3bd8a505..6d08bc923f19 100644
--- a/examples/mithril-kitchen-sink/src/stories/addon-knobs.stories.js
+++ b/examples/mithril-kitchen-sink/src/stories/addon-knobs.stories.js
@@ -1,8 +1,6 @@
 /** @jsx m */
 
 import m from 'mithril';
-
-import { storiesOf } from '@storybook/mithril';
 import { action } from '@storybook/addon-actions';
 import {
   withKnobs,
@@ -16,63 +14,70 @@ import {
   button,
 } from '@storybook/addon-knobs';
 
-storiesOf('Addons|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.`;
+export default {
+  title: 'Addons|Knobs',
+  decorators: [withKnobs],
+};
+
+export const Simple = () => {
+  const name = text('Name', 'John Doe');
+  const age = number('Age', 44);
+  const content = `I am ${name} and I'm ${age} years old.`;
+
+  return {
+    view: () => <div>{content}</div>,
+  };
+};
+
+export const story2 = () => {
+  const name = text('Name', 'Jane');
+  const stock = number('Stock', 20, {
+    range: true,
+    min: 0,
+    max: 30,
+    step: 5,
+  });
+  const fruits = {
+    Apple: 'apples',
+    Banana: 'bananas',
+    Cherry: 'cherries',
+  };
+  const fruit = select('Fruit', fruits, 'apples');
+  const price = number('Price', 2.25);
 
-    return {
-      view: () => <div>{content}</div>,
-    };
-  })
-  .add('All knobs', () => {
-    const name = text('Name', 'Jane');
-    const stock = number('Stock', 20, {
-      range: true,
-      min: 0,
-      max: 30,
-      step: 5,
-    });
-    const fruits = {
-      Apple: 'apples',
-      Banana: 'bananas',
-      Cherry: 'cherries',
-    };
-    const fruit = select('Fruit', fruits, 'apples');
-    const price = number('Price', 2.25);
+  const colour = color('Border', 'deeppink');
+  const today = date('Today', new Date('Jan 20 2017 GMT+0'));
+  const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
+  const nice = boolean('Nice', true);
 
-    const colour = color('Border', 'deeppink');
-    const today = date('Today', new Date('Jan 20 2017 GMT+0'));
-    const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
-    const nice = boolean('Nice', true);
+  const stockMessage = stock
+    ? `I have a stock of ${stock} ${fruit}, costing &dollar;${price} each.`
+    : `I'm out of ${fruit}${nice ? ', Sorry!' : '.'}`;
+  const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
+  const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' };
 
-    const stockMessage = stock
-      ? `I have a stock of ${stock} ${fruit}, costing &dollar;${price} each.`
-      : `I'm out of ${fruit}${nice ? ', Sorry!' : '.'}`;
-    const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
-    const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' };
+  button('Arbitrary action', action('You clicked it!'));
 
-    button('Arbitrary action', action('You clicked it!'));
+  return {
+    view: () => (
+      <div style={`border:2px dotted ${colour}; padding: 8px 22px; border-radius: 8px`}>
+        <h1>My name is {name},</h1>
+        <h3>today is {new Date(today).toLocaleDateString('en-US', dateOptions)}</h3>
+        <p>{stockMessage}</p>
+        <p>Also, I have:</p>
+        <ul>
+          {items.map(item => (
+            <li key={item}>{item}</li>
+          ))}
+        </ul>
+        <p>{salutation}</p>
+      </div>
+    ),
+  };
+};
+story2.story = { name: 'All knobs' };
 
-    return {
-      view: () => (
-        <div style={`border:2px dotted ${colour}; padding: 8px 22px; border-radius: 8px`}>
-          <h1>My name is {name},</h1>
-          <h3>today is {new Date(today).toLocaleDateString('en-US', dateOptions)}</h3>
-          <p>{stockMessage}</p>
-          <p>Also, I have:</p>
-          <ul>
-            {items.map(item => (
-              <li key={item}>{item}</li>
-            ))}
-          </ul>
-          <p>{salutation}</p>
-        </div>
-      ),
-    };
-  })
-  .add('XSS safety', () => ({
-    view: () => text('Rendered string', '<img src=x onerror="alert(\'XSS Attack\')" >'),
-  }));
+export const story3 = () => ({
+  view: () => text('Rendered string', '<img src=x onerror="alert(\'XSS Attack\')" >'),
+});
+story3.story = { name: 'XSS safety' };
diff --git a/examples/mithril-kitchen-sink/src/stories/addon-links.stories.js b/examples/mithril-kitchen-sink/src/stories/addon-links.stories.js
index 51e786293367..63ea9c04ab56 100644
--- a/examples/mithril-kitchen-sink/src/stories/addon-links.stories.js
+++ b/examples/mithril-kitchen-sink/src/stories/addon-links.stories.js
@@ -2,10 +2,14 @@
 
 import m from 'mithril';
 
-import { storiesOf } from '@storybook/mithril';
 import { linkTo } from '@storybook/addon-links';
 import Button from '../Button';
 
-storiesOf('Addons|Links', module).add('Go to welcome', () => ({
+export default {
+  title: 'Addons|Links',
+};
+
+export const story1 = () => ({
   view: () => <Button onclick={linkTo('Welcome')}>This buttons links to Welcome</Button>,
-}));
+});
+story1.story = { name: 'Go to welcome' };
diff --git a/examples/mithril-kitchen-sink/src/stories/addon-notes.stories.js b/examples/mithril-kitchen-sink/src/stories/addon-notes.stories.js
index 4e5287f1aeba..6af53269ecdb 100644
--- a/examples/mithril-kitchen-sink/src/stories/addon-notes.stories.js
+++ b/examples/mithril-kitchen-sink/src/stories/addon-notes.stories.js
@@ -1,47 +1,52 @@
 /** @jsx m */
 
 import m from 'mithril';
-import { storiesOf } from '@storybook/mithril';
-
-storiesOf('Addons|Notes', module)
-  .add(
-    'Simple note',
-    () => ({
-      view: () => (
-        <p>
-          <strong>
-            Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam
-            sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec
-            consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus
-            arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at
-            fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam,
-            efficitur pulvinar mi urna id urna.
-          </strong>
-        </p>
-      ),
-    }),
-    { notes: 'My notes on some bold text' }
-  )
-  .add(
-    'Note with HTML',
-    () => ({
-      view: () => (
-        <p>
-          <span>🤔😳😯😮</span>
-          <br />
-          <span>😄😩😓😱</span>
-          <br />
-          <span>🤓😑😶😊</span>
-        </p>
-      ),
-    }),
-    {
-      notes: `
-        <h2>My notes on emojies</h2>
-
-        <em>It's not all that important to be honest, but..</em>
-
-        Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
-      `,
-    }
-  );
+
+export default {
+  title: 'Addons|Notes',
+};
+
+export const story1 = () => ({
+  view: () => (
+    <p>
+      <strong>
+        Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed
+        vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur
+        velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit
+        amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla
+        sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi
+        urna id urna.
+      </strong>
+    </p>
+  ),
+});
+
+story1.story = {
+  name: 'Simple note',
+  parameters: { notes: 'My notes on some bold text' },
+};
+
+export const story2 = () => ({
+  view: () => (
+    <p>
+      <span>🤔😳😯😮</span>
+      <br />
+      <span>😄😩😓😱</span>
+      <br />
+      <span>🤓😑😶😊</span>
+    </p>
+  ),
+});
+
+story2.story = {
+  name: 'Note with HTML',
+  parameters: {
+    notes: `
+    <h2>My notes on emojies</h2>
+
+    <em>It's not all that important to be honest, but..</em>
+
+    Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
+  `,
+  },
+};
diff --git a/examples/mithril-kitchen-sink/src/stories/button.stories.js b/examples/mithril-kitchen-sink/src/stories/button.stories.js
new file mode 100644
index 000000000000..ef051b16dec0
--- /dev/null
+++ b/examples/mithril-kitchen-sink/src/stories/button.stories.js
@@ -0,0 +1,28 @@
+import m from 'mithril';
+
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import Button from '../Button';
+
+export default {
+  title: 'Button',
+  parameters: {
+    component: Button,
+  },
+};
+
+export const story1 = () => ({
+  view: () => m(Button, { onclick: action('clicked') }, 'Hello Button'),
+});
+story1.story = { name: 'with text' };
+
+export const story2 = () => ({
+  view: () =>
+    m(
+      Button,
+      { onclick: action('clicked') },
+      m('span', { role: 'img', ariaLabel: 'so cool' }, '😀 😎 👍 💯')
+    ),
+});
+story2.story = { name: 'with some emoji' };
diff --git a/examples/mithril-kitchen-sink/src/stories/index.stories.js b/examples/mithril-kitchen-sink/src/stories/index.stories.js
deleted file mode 100644
index fb5175691afd..000000000000
--- a/examples/mithril-kitchen-sink/src/stories/index.stories.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import m from 'mithril';
-
-import { storiesOf } from '@storybook/mithril';
-import { action } from '@storybook/addon-actions';
-import { linkTo } from '@storybook/addon-links';
-
-import Button from '../Button';
-import Welcome from '../Welcome';
-
-storiesOf('Welcome', module)
-  .addParameters({
-    component: Welcome,
-  })
-  .add('to Storybook', () => ({
-    view: () => m(Welcome, { showApp: linkTo('Button') }),
-  }));
-
-storiesOf('Button', module)
-  .addParameters({
-    component: Button,
-  })
-  .add('with text', () => ({
-    view: () => m(Button, { onclick: action('clicked') }, 'Hello Button'),
-  }))
-  .add('with some emoji', () => ({
-    view: () =>
-      m(
-        Button,
-        { onclick: action('clicked') },
-        m('span', { role: 'img', ariaLabel: 'so cool' }, '😀 😎 👍 💯')
-      ),
-  }));
diff --git a/examples/mithril-kitchen-sink/src/stories/welcome.stories.js b/examples/mithril-kitchen-sink/src/stories/welcome.stories.js
new file mode 100644
index 000000000000..a67ad2aa91a2
--- /dev/null
+++ b/examples/mithril-kitchen-sink/src/stories/welcome.stories.js
@@ -0,0 +1,15 @@
+import m from 'mithril';
+import { linkTo } from '@storybook/addon-links';
+import Welcome from '../Welcome';
+
+export default {
+  title: 'Welcome',
+  parameters: {
+    component: Welcome,
+  },
+};
+
+export const story1 = () => ({
+  view: () => m(Welcome, { showApp: linkTo('Button') }),
+});
+story1.story = { name: 'to Storybook' };
diff --git a/examples/official-storybook/package.json b/examples/official-storybook/package.json
index 5cec7a35d518..68bafe59d27f 100644
--- a/examples/official-storybook/package.json
+++ b/examples/official-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "official-storybook",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "private": true,
   "scripts": {
     "build-storybook": "build-storybook -c ./ -s built-storybooks",
@@ -15,34 +15,34 @@
   },
   "devDependencies": {
     "@packtracker/webpack-plugin": "^2.0.1",
-    "@storybook/addon-a11y": "5.2.0-alpha.30",
-    "@storybook/addon-actions": "5.2.0-alpha.30",
-    "@storybook/addon-backgrounds": "5.2.0-alpha.30",
-    "@storybook/addon-centered": "5.2.0-alpha.30",
-    "@storybook/addon-contexts": "5.2.0-alpha.30",
-    "@storybook/addon-cssresources": "5.2.0-alpha.30",
-    "@storybook/addon-design-assets": "5.2.0-alpha.30",
-    "@storybook/addon-docs": "5.2.0-alpha.30",
-    "@storybook/addon-events": "5.2.0-alpha.30",
-    "@storybook/addon-graphql": "5.2.0-alpha.30",
-    "@storybook/addon-info": "5.2.0-alpha.30",
-    "@storybook/addon-jest": "5.2.0-alpha.30",
-    "@storybook/addon-knobs": "5.2.0-alpha.30",
-    "@storybook/addon-links": "5.2.0-alpha.30",
-    "@storybook/addon-notes": "5.2.0-alpha.30",
-    "@storybook/addon-options": "5.2.0-alpha.30",
-    "@storybook/addon-queryparams": "5.2.0-alpha.30",
-    "@storybook/addon-storyshots": "5.2.0-alpha.30",
-    "@storybook/addon-storyshots-puppeteer": "5.2.0-alpha.30",
-    "@storybook/addon-storysource": "5.2.0-alpha.30",
-    "@storybook/addon-viewport": "5.2.0-alpha.30",
-    "@storybook/addons": "5.2.0-alpha.30",
-    "@storybook/components": "5.2.0-alpha.30",
-    "@storybook/core-events": "5.2.0-alpha.30",
-    "@storybook/node-logger": "5.2.0-alpha.30",
-    "@storybook/react": "5.2.0-alpha.30",
-    "@storybook/source-loader": "5.2.0-alpha.30",
-    "@storybook/theming": "5.2.0-alpha.30",
+    "@storybook/addon-a11y": "5.2.0-alpha.36",
+    "@storybook/addon-actions": "5.2.0-alpha.36",
+    "@storybook/addon-backgrounds": "5.2.0-alpha.36",
+    "@storybook/addon-centered": "5.2.0-alpha.36",
+    "@storybook/addon-contexts": "5.2.0-alpha.36",
+    "@storybook/addon-cssresources": "5.2.0-alpha.36",
+    "@storybook/addon-design-assets": "5.2.0-alpha.36",
+    "@storybook/addon-docs": "5.2.0-alpha.36",
+    "@storybook/addon-events": "5.2.0-alpha.36",
+    "@storybook/addon-graphql": "5.2.0-alpha.36",
+    "@storybook/addon-info": "5.2.0-alpha.36",
+    "@storybook/addon-jest": "5.2.0-alpha.36",
+    "@storybook/addon-knobs": "5.2.0-alpha.36",
+    "@storybook/addon-links": "5.2.0-alpha.36",
+    "@storybook/addon-notes": "5.2.0-alpha.36",
+    "@storybook/addon-options": "5.2.0-alpha.36",
+    "@storybook/addon-queryparams": "5.2.0-alpha.36",
+    "@storybook/addon-storyshots": "5.2.0-alpha.36",
+    "@storybook/addon-storyshots-puppeteer": "5.2.0-alpha.36",
+    "@storybook/addon-storysource": "5.2.0-alpha.36",
+    "@storybook/addon-viewport": "5.2.0-alpha.36",
+    "@storybook/addons": "5.2.0-alpha.36",
+    "@storybook/components": "5.2.0-alpha.36",
+    "@storybook/core-events": "5.2.0-alpha.36",
+    "@storybook/node-logger": "5.2.0-alpha.36",
+    "@storybook/react": "5.2.0-alpha.36",
+    "@storybook/source-loader": "5.2.0-alpha.36",
+    "@storybook/theming": "5.2.0-alpha.36",
     "cors": "^2.8.5",
     "cross-env": "^5.2.0",
     "enzyme-to-json": "^3.3.5",
diff --git a/examples/official-storybook/stories/addon-a11y.stories.js b/examples/official-storybook/stories/addon-a11y.stories.js
deleted file mode 100644
index c8e18e16662f..000000000000
--- a/examples/official-storybook/stories/addon-a11y.stories.js
+++ /dev/null
@@ -1,95 +0,0 @@
-import React, { Fragment } from 'react';
-import { storiesOf } from '@storybook/react';
-
-import { Form } from '@storybook/components';
-import BaseButton from '../components/BaseButton';
-import DelayedRender from '../components/DelayedRender';
-import Button from '../components/addon-a11y/Button';
-
-const text = 'Testing the a11y addon';
-const image = 'http://placehold.it/350x150';
-// eslint-disable-next-line no-script-url
-const href = 'javascript:void 0';
-
-storiesOf('Addons|A11y/BaseButton', module)
-  .addParameters({
-    component: BaseButton,
-  })
-  .addParameters({ options: { selectedPanel: 'storybook/a11y/panel' } })
-  .add('Default', () => <BaseButton label="" />)
-  .add('Label', () => <BaseButton label={text} />)
-  .add('Disabled', () => <BaseButton disabled label={text} />)
-  .add('Invalid contrast', () => (
-    // FIXME: has no effect on score
-    <BaseButton style={{ color: 'black', backgroundColor: 'black' }} label={text} />
-  ))
-  .add('delayed render', () => (
-    <DelayedRender>
-      <BaseButton label="This button has a delayed render of 1s" />
-    </DelayedRender>
-  ));
-
-storiesOf('Addons|A11y/Button', module)
-  .addParameters({
-    component: Button,
-  })
-  .addParameters({ options: { selectedPanel: 'storybook/a11y/panel' } })
-  .add('Default', () => <Button />)
-  .add('Content', () => <Button content={text} />)
-  .add('Label', () => <Button label={text} />)
-  .add('Disabled', () => <Button disabled content={text} />)
-  .add('Invalid contrast', () => <Button contrast="wrong" content={text} />);
-
-storiesOf('Addons|A11y/Form', module)
-  .addParameters({
-    component: Form,
-  })
-  .addParameters({ options: { selectedPanel: 'storybook/a11y/panel' } })
-  .add('Without Label', () => (
-    <Form.Field label="">
-      <Form.Input />
-    </Form.Field>
-  ))
-  .add('With label', () => (
-    <Form.Field label={text}>
-      <Form.Input id="1" />
-    </Form.Field>
-  ))
-  .add('With placeholder', () => (
-    <Form.Field label="">
-      <Form.Input id="1" placeholder={text} />
-    </Form.Field>
-  ));
-
-storiesOf('Addons|A11y/Image', module)
-  .addParameters({ options: { selectedPanel: 'storybook/a11y/panel' } })
-  /* eslint-disable jsx-a11y/alt-text */
-  .add('Without alt', () => <img src={image} />)
-  .add('Without alt but unchecked', () => <img src={image} />, {
-    a11y: {
-      config: {
-        disableOtherRules: true,
-        rules: [],
-      },
-      options: {},
-    },
-  })
-  .add('With alt', () => <img src={image} alt={text} />)
-  .add('Presentation', () => <img role="presentation" src={image} />);
-
-storiesOf('Addons|A11y/Typography', module)
-  .addParameters({ options: { selectedPanel: 'storybook/a11y/panel' } })
-  .add('Correct', () => (
-    <Fragment>
-      <h1>{text}</h1>
-      <p>{text}</p>
-      <a href={href}>{`${text}...`}</a>
-    </Fragment>
-  ))
-  /* eslint-disable jsx-a11y/heading-has-content */
-  .add('Empty Heading', () => <h1 />)
-  .add('Empty Paragraph', () => <p />)
-  /* eslint-disable jsx-a11y/anchor-has-content */
-  .add('Empty Link', () => <a href={href} />)
-  /* eslint-disable jsx-a11y/anchor-is-valid */
-  .add('Link without href', () => <a>{`${text}...`}</a>);
diff --git a/examples/official-storybook/stories/addon-a11y/base-button.stories.js b/examples/official-storybook/stories/addon-a11y/base-button.stories.js
new file mode 100644
index 000000000000..5aa1e2e528de
--- /dev/null
+++ b/examples/official-storybook/stories/addon-a11y/base-button.stories.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import BaseButton from '../../components/BaseButton';
+import DelayedRender from '../../components/DelayedRender';
+
+const text = 'Testing the a11y addon';
+
+export default {
+  title: 'Addons|A11y/BaseButton',
+  parameters: {
+    component: BaseButton,
+    options: { selectedPanel: 'storybook/a11y/panel' },
+  },
+};
+
+export const Default = () => <BaseButton label="" />;
+export const Label = () => <BaseButton label={text} />;
+export const Disabled = () => <BaseButton disabled label={text} />;
+
+export const invalidContrast = () => (
+  // FIXME: has no effect on score
+  <BaseButton style={{ color: 'black', backgroundColor: 'black' }} label={text} />
+);
+invalidContrast.story = {
+  name: 'Invalid contrast',
+};
+
+export const delayedRender = () => (
+  <DelayedRender>
+    <BaseButton label="This button has a delayed render of 1s" />
+  </DelayedRender>
+);
+delayedRender.story = {
+  name: 'delayed render',
+};
diff --git a/examples/official-storybook/stories/addon-a11y/button.stories.js b/examples/official-storybook/stories/addon-a11y/button.stories.js
new file mode 100644
index 000000000000..f3eaeffbb2a6
--- /dev/null
+++ b/examples/official-storybook/stories/addon-a11y/button.stories.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import Button from '../../components/addon-a11y/Button';
+
+const text = 'Testing the a11y addon';
+
+export default {
+  title: 'Addons|A11y/Button',
+  parameters: {
+    component: Button,
+    options: { selectedPanel: 'storybook/a11y/panel' },
+  },
+};
+
+export const Default = () => <Button />;
+export const Content = () => <Button content={text} />;
+export const Label = () => <Button label={text} />;
+export const Disabled = () => <Button disabled content={text} />;
+export const invalidContrast = () => <Button contrast="wrong" content={text} />;
+invalidContrast.story = {
+  name: 'Invalid contrast',
+};
diff --git a/examples/official-storybook/stories/addon-a11y/form.stories.js b/examples/official-storybook/stories/addon-a11y/form.stories.js
new file mode 100644
index 000000000000..ee7a7d2bd606
--- /dev/null
+++ b/examples/official-storybook/stories/addon-a11y/form.stories.js
@@ -0,0 +1,40 @@
+import React from 'react';
+
+import { Form } from '@storybook/components';
+
+const text = 'Testing the a11y addon';
+
+export default {
+  title: 'Addons|A11y/Form',
+  parameters: {
+    component: Form,
+    options: { selectedPanel: 'storybook/a11y/panel' },
+  },
+};
+
+export const withoutLabel = () => (
+  <Form.Field label="">
+    <Form.Input />
+  </Form.Field>
+);
+withoutLabel.story = {
+  name: 'Without Label',
+};
+
+export const withLabel = () => (
+  <Form.Field label={text}>
+    <Form.Input id="1" />
+  </Form.Field>
+);
+withLabel.story = {
+  name: 'With label',
+};
+
+export const withPlaceholder = () => (
+  <Form.Field label="">
+    <Form.Input id="1" placeholder={text} />
+  </Form.Field>
+);
+withPlaceholder.story = {
+  name: 'With placeholder',
+};
diff --git a/examples/official-storybook/stories/addon-a11y/image.stories.js b/examples/official-storybook/stories/addon-a11y/image.stories.js
new file mode 100644
index 000000000000..49961fd93304
--- /dev/null
+++ b/examples/official-storybook/stories/addon-a11y/image.stories.js
@@ -0,0 +1,38 @@
+/* eslint-disable */
+import React from 'react';
+
+const text = 'Testing the a11y addon';
+const image = 'http://placehold.it/350x150';
+
+export default {
+  title: 'Addons|A11y/Image',
+  parameters: {
+    options: { selectedPanel: 'storybook/a11y/panel' },
+  },
+};
+
+export const withoutAlt = () => <img src={image} />;
+withoutAlt.story = {
+  name: 'Without alt',
+};
+
+export const withoutAltButUnchecked = () => <img src={image} />;
+withoutAltButUnchecked.story = {
+  name: 'Without alt but unchecked',
+  parameters: {
+    a11y: {
+      config: {
+        disableOtherRules: true,
+        rules: [],
+      },
+      options: {},
+    },
+  },
+};
+
+export const withAlt = () => <img src={image} alt={text} />;
+withAlt.story = {
+  name: 'With alt',
+};
+
+export const Presentation = () => <img role="presentation" src={image} />;
diff --git a/examples/official-storybook/stories/addon-a11y/typography.stories.js b/examples/official-storybook/stories/addon-a11y/typography.stories.js
new file mode 100644
index 000000000000..a147933e190b
--- /dev/null
+++ b/examples/official-storybook/stories/addon-a11y/typography.stories.js
@@ -0,0 +1,44 @@
+/* eslint-disable */
+import React, { Fragment } from 'react';
+
+const text = 'Testing the a11y addon';
+const href = 'javascript:void 0';
+
+export default {
+  title: 'Addons|A11y/Typography',
+  parameters: {
+    options: { selectedPanel: 'storybook/a11y/panel' },
+  },
+};
+
+export const Correct = () => (
+  <Fragment>
+    <h1>{text}</h1>
+    <p>{text}</p>
+    <a href={href}>{`${text}...`}</a>
+  </Fragment>
+);
+
+export const emptyHeading = () => <h1 />;
+
+emptyHeading.story = {
+  name: 'Empty Heading',
+};
+
+export const emptyParagraph = () => <p />;
+
+emptyParagraph.story = {
+  name: 'Empty Paragraph',
+};
+
+export const emptyLink = () => <a href={href} />;
+
+emptyLink.story = {
+  name: 'Empty Link',
+};
+
+export const linkWithoutHref = () => <a>{`${text}...`}</a>;
+
+linkWithoutHref.story = {
+  name: 'Link without href',
+};
diff --git a/examples/official-storybook/stories/addon-actions.stories.js b/examples/official-storybook/stories/addon-actions.stories.js
index a5a00ef71091..8e3afb2858fb 100644
--- a/examples/official-storybook/stories/addon-actions.stories.js
+++ b/examples/official-storybook/stories/addon-actions.stories.js
@@ -1,6 +1,5 @@
 import { window, File } from 'global';
 import React, { Fragment } from 'react';
-import { storiesOf } from '@storybook/react';
 import {
   action,
   actions,
@@ -15,152 +14,218 @@ const { Button } = Form;
 const pickNative = decorate([args => [args[0].nativeEvent]]);
 const pickNativeAction = decorateAction([args => [args[0].nativeEvent]]);
 
-storiesOf('Addons|Actions', module)
-  .addParameters({
+export default {
+  title: 'Addons|Actions',
+  parameters: {
     options: {
       selectedPanel: 'storybook/actions/panel',
     },
-  })
-
-  .add('Basic example', () => <Button onClick={action('hello-world')}>Hello World</Button>)
-  .add('Multiple actions', () => (
-    <Button {...actions('onClick', 'onMouseOver')}>Hello World</Button>
-  ))
-  .add('Multiple actions + config', () => (
-    <Button {...actions('onClick', 'onMouseOver', { clearOnStoryChange: false })}>
-      Moving away from this story will persist the action logger
-    </Button>
-  ))
-  .add('Multiple actions as object', () => (
-    <Button {...actions({ onClick: 'clicked', onMouseOver: 'hovered' })}>Hello World</Button>
-  ))
-  .add('Multiple actions, object + config', () => (
-    <Button
-      {...actions({ onClick: 'clicked', onMouseOver: 'hovered' }, { clearOnStoryChange: false })}
-    >
-      Moving away from this story will persist the action logger
-    </Button>
-  ))
-  .add('Decorated action', () => (
-    <Button onClick={pickNative.action('decorated')}>Native Event</Button>
-  ))
-  .add('Decorated action + config', () => (
-    <Button onClick={pickNative.action('decorated', { clearOnStoryChange: false })}>
-      Moving away from this story will persist the action logger
-    </Button>
-  ))
-  .add('Decorated actions', () => (
-    <Button {...pickNative.actions('onClick', 'onMouseOver')}>Native Event</Button>
-  ))
-  .add('Decorated actions + config', () => (
-    <Button {...pickNative.actions('onClick', 'onMouseOver', { clearOnStoryChange: false })}>
-      Moving away from this story will persist the action logger
-    </Button>
-  ))
-  .add('Circular Payload', () => {
-    const circular = { foo: {} };
-    circular.foo.circular = circular;
-    return <Button onClick={() => action('circular')(circular)}>Circular Payload</Button>;
-  })
-  .add('Reserved keyword as name', () => <Button onClick={action('delete')}>Delete</Button>)
-  .add('All types', () => {
-    function A() {}
-    function B() {}
-
-    const bound = B.bind({});
-
-    let file;
-    try {
-      file = new File([''], 'filename.txt', { type: 'text/plain', lastModified: new Date() });
-    } catch (error) {
-      file = error;
-    }
-    const reg = /fooBar/g;
-
-    return (
-      <Fragment>
-        <Button onClick={() => action('Array')(['foo', 'bar', { foo: 'bar' }])}>Array</Button>
-        <Button onClick={() => action('Boolean')(false)}>Boolean</Button>
-        <Button onClick={() => action('Empty Object')({})}>Empty Object</Button>
-        <Button onClick={() => action('File')(file)}>File</Button>
-        <Button onClick={() => action('Function')(A)}>Function A</Button>
-        <Button onClick={() => action('Function (bound)')(bound)}>Bound Function B</Button>
-        <Button onClick={() => action('Infinity')(Infinity)}>Infinity</Button>
-        <Button onClick={() => action('-Infinity')(-Infinity)}>-Infinity</Button>
-        <Button onClick={() => action('NaN')(NaN)}>NaN</Button>
-        <Button onClick={() => action('null')(null)}>null</Button>
-        <Button onClick={() => action('Number')(10000)}>Number</Button>
-        <Button
-          onClick={() =>
-            action('Multiple')(
-              'foo',
-              1000,
-              true,
-              false,
-              [1, 2, 3],
-              null,
-              undefined,
-              { foo: 'bar' },
-              window
-            )
-          }
-        >
-          Multiple
-        </Button>
-        <Button onClick={() => action('Plain Object')({ foo: { bar: { baz: { bar: 'foo' } } } })}>
-          Plain Object
-        </Button>
-        <Button
-          onClick={() =>
-            action('ObjectDepth2', { depth: 2 })({ root: { one: { two: { three: 'foo' } } } })
-          }
-        >
-          Object (depth: 2)
-        </Button>
-        <Button onClick={() => action('RegExp')(reg)}>RegExp</Button>
-        <Button onClick={() => action('String')('foo')}>String</Button>
-        <Button onClick={() => action('Symbol')(Symbol('A_SYMBOL'))}>Symbol</Button>
-        <Button onClick={action('SyntheticMouseEvent')}>SyntheticEvent</Button>
-        <Button onClick={() => action('undefined')(undefined)}>undefined</Button>
-        <Button onClick={() => action('window')(window)}>Window</Button>
-      </Fragment>
-    );
-  })
-
-  .add('configureActionsDepth', () => {
-    configureActions({
-      depth: 2,
-    });
-
-    return (
+  },
+};
+
+export const basicExample = () => <Button onClick={action('hello-world')}>Hello World</Button>;
+
+basicExample.story = {
+  name: 'Basic example',
+};
+
+export const multipleActions = () => (
+  <Button {...actions('onClick', 'onMouseOver')}>Hello World</Button>
+);
+
+multipleActions.story = {
+  name: 'Multiple actions',
+};
+
+export const multipleActionsConfig = () => (
+  <Button {...actions('onClick', 'onMouseOver', { clearOnStoryChange: false })}>
+    Moving away from this story will persist the action logger
+  </Button>
+);
+
+multipleActionsConfig.story = {
+  name: 'Multiple actions + config',
+};
+
+export const multipleActionsAsObject = () => (
+  <Button {...actions({ onClick: 'clicked', onMouseOver: 'hovered' })}>Hello World</Button>
+);
+
+multipleActionsAsObject.story = {
+  name: 'Multiple actions as object',
+};
+
+export const multipleActionsObjectConfig = () => (
+  <Button
+    {...actions({ onClick: 'clicked', onMouseOver: 'hovered' }, { clearOnStoryChange: false })}
+  >
+    Moving away from this story will persist the action logger
+  </Button>
+);
+
+multipleActionsObjectConfig.story = {
+  name: 'Multiple actions, object + config',
+};
+
+export const decoratedAction = () => (
+  <Button onClick={pickNative.action('decorated')}>Native Event</Button>
+);
+
+decoratedAction.story = {
+  name: 'Decorated action',
+};
+
+export const decoratedActionConfig = () => (
+  <Button onClick={pickNative.action('decorated', { clearOnStoryChange: false })}>
+    Moving away from this story will persist the action logger
+  </Button>
+);
+
+decoratedActionConfig.story = {
+  name: 'Decorated action + config',
+};
+
+export const decoratedActions = () => (
+  <Button {...pickNative.actions('onClick', 'onMouseOver')}>Native Event</Button>
+);
+
+decoratedActions.story = {
+  name: 'Decorated actions',
+};
+
+export const decoratedActionsConfig = () => (
+  <Button {...pickNative.actions('onClick', 'onMouseOver', { clearOnStoryChange: false })}>
+    Moving away from this story will persist the action logger
+  </Button>
+);
+
+decoratedActionsConfig.story = {
+  name: 'Decorated actions + config',
+};
+
+export const circularPayload = () => {
+  const circular = { foo: {} };
+  circular.foo.circular = circular;
+  return <Button onClick={() => action('circular')(circular)}>Circular Payload</Button>;
+};
+
+circularPayload.story = {
+  name: 'Circular Payload',
+};
+
+export const reservedKeywordAsName = () => <Button onClick={action('delete')}>Delete</Button>;
+
+reservedKeywordAsName.story = {
+  name: 'Reserved keyword as name',
+};
+
+export const allTypes = () => {
+  function A() {}
+  function B() {}
+
+  const bound = B.bind({});
+
+  let file;
+  try {
+    file = new File([''], 'filename.txt', { type: 'text/plain', lastModified: new Date() });
+  } catch (error) {
+    file = error;
+  }
+  const reg = /fooBar/g;
+
+  return (
+    <Fragment>
+      <Button onClick={() => action('Array')(['foo', 'bar', { foo: 'bar' }])}>Array</Button>
+      <Button onClick={() => action('Boolean')(false)}>Boolean</Button>
+      <Button onClick={() => action('Empty Object')({})}>Empty Object</Button>
+      <Button onClick={() => action('File')(file)}>File</Button>
+      <Button onClick={() => action('Function', { allowFunction: true })(A)}>Function A</Button>
+      <Button onClick={() => action('Function (bound)', { allowFunction: true })(bound)}>
+        Bound Function B
+      </Button>
+      <Button onClick={() => action('Infinity')(Infinity)}>Infinity</Button>
+      <Button onClick={() => action('-Infinity')(-Infinity)}>-Infinity</Button>
+      <Button onClick={() => action('NaN')(NaN)}>NaN</Button>
+      <Button onClick={() => action('null')(null)}>null</Button>
+      <Button onClick={() => action('Number')(10000)}>Number</Button>
       <Button
-        onClick={() => action('ConfiguredDepth')({ root: { one: { two: { three: 'foo' } } } })}
+        onClick={() =>
+          action('Multiple')(
+            'foo',
+            1000,
+            true,
+            false,
+            [1, 2, 3],
+            null,
+            undefined,
+            { foo: 'bar' },
+            window
+          )
+        }
       >
-        Object (configured depth: 2)
+        Multiple
       </Button>
-    );
-  })
-  .add('Persisting the action logger', () => (
-    <Fragment>
-      <p>Moving away from this story will persist the action logger</p>
-      <Button onClick={action('clear-action-logger', { clearOnStoryChange: false })}>
-        Object (configured clearOnStoryChange: false)
+      <Button onClick={() => action('Plain Object')({ foo: { bar: { baz: { bar: 'foo' } } } })}>
+        Plain Object
+      </Button>
+      <Button
+        onClick={() =>
+          action('ObjectDepth2', { depth: 2 })({ root: { one: { two: { three: 'foo' } } } })
+        }
+      >
+        Object (depth: 2)
       </Button>
+      <Button onClick={() => action('RegExp')(reg)}>RegExp</Button>
+      <Button onClick={() => action('String')('foo')}>String</Button>
+      <Button onClick={() => action('Symbol')(Symbol('A_SYMBOL'))}>Symbol</Button>
+      <Button onClick={action('SyntheticMouseEvent')}>SyntheticEvent</Button>
+      <Button onClick={() => action('undefined')(undefined)}>undefined</Button>
+      <Button onClick={() => action('window')(window)}>Window</Button>
     </Fragment>
-  ))
-  .add('Limit Action Output', () => {
-    configureActions({
-      limit: 2,
-    });
-
-    return (
-      <Fragment>
-        <Button onClick={() => action('False')(false)}>False</Button>
-        <Button onClick={() => action('True')(true)}>True</Button>
-      </Fragment>
-    );
+  );
+};
+
+allTypes.story = {
+  name: 'All types',
+};
+
+export const configureActionsDepth = () => {
+  configureActions({
+    depth: 2,
   });
 
-storiesOf('Addons|Actions.deprecated', module).add('Decorated Action', () => (
-  <Button onClick={pickNativeAction('decorated')}>Native Event</Button>
-));
+  return (
+    <Button onClick={() => action('ConfiguredDepth')({ root: { one: { two: { three: 'foo' } } } })}>
+      Object (configured depth: 2)
+    </Button>
+  );
+};
+
+export const persistingTheActionLogger = () => (
+  <Fragment>
+    <p>Moving away from this story will persist the action logger</p>
+    <Button onClick={action('clear-action-logger', { clearOnStoryChange: false })}>
+      Object (configured clearOnStoryChange: false)
+    </Button>
+  </Fragment>
+);
+
+persistingTheActionLogger.story = {
+  name: 'Persisting the action logger',
+};
+
+export const limitActionOutput = () => {
+  configureActions({
+    limit: 2,
+  });
+
+  return (
+    <Fragment>
+      <Button onClick={() => action('False')(false)}>False</Button>
+      <Button onClick={() => action('True')(true)}>True</Button>
+    </Fragment>
+  );
+};
+limitActionOutput.story = {
+  name: 'Limit Action Output',
+};
diff --git a/examples/official-storybook/stories/addon-backgrounds.stories.js b/examples/official-storybook/stories/addon-backgrounds.stories.js
index dc8cfbd0060e..bf16d591860d 100644
--- a/examples/official-storybook/stories/addon-backgrounds.stories.js
+++ b/examples/official-storybook/stories/addon-backgrounds.stories.js
@@ -1,10 +1,11 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 
 import BaseButton from '../components/BaseButton';
 
-storiesOf('Addons|Backgrounds', module)
-  .addParameters({
+export default {
+  title: 'Addons|Backgrounds',
+
+  parameters: {
     backgrounds: [
       { name: 'white', value: '#ffffff' },
       { name: 'light', value: '#eeeeee' },
@@ -12,24 +13,52 @@ storiesOf('Addons|Backgrounds', module)
       { name: 'dark', value: '#222222', default: true },
       { name: 'black', value: '#000000' },
     ],
-  })
-  .add('story 1', () => (
-    <BaseButton label="You should be able to switch backgrounds for this story" />
-  ))
-  .add('story 2', () => <BaseButton label="This one too!" />)
-  .add('overriden', () => <BaseButton label="This one should have different backgrounds" />, {
+  },
+};
+
+export const story1 = () => (
+  <BaseButton label="You should be able to switch backgrounds for this story" />
+);
+
+story1.story = {
+  name: 'story 1',
+};
+
+export const story2 = () => <BaseButton label="This one too!" />;
+
+story2.story = {
+  name: 'story 2',
+};
+
+export const overriden = () => <BaseButton label="This one should have different backgrounds" />;
+
+overriden.story = {
+  parameters: {
     backgrounds: [
       { name: 'pink', value: 'hotpink' },
       { name: 'blue', value: 'deepskyblue', default: true },
     ],
-  })
-  .add('disabled via []', () => <BaseButton label="This one should not use backgrounds" />, {
+  },
+};
+
+export const disabledVia = () => <BaseButton label="This one should not use backgrounds" />;
+
+disabledVia.story = {
+  name: 'disabled via []',
+
+  parameters: {
     backgrounds: [],
-  })
-  .add(
-    'skipped via disable:true',
-    () => <BaseButton label="This one should not use backgrounds either" />,
-    {
-      backgrounds: { disable: true },
-    }
-  );
+  },
+};
+
+export const skippedViaDisableTrue = () => (
+  <BaseButton label="This one should not use backgrounds either" />
+);
+
+skippedViaDisableTrue.story = {
+  name: 'skipped via disable:true',
+
+  parameters: {
+    backgrounds: { disable: true },
+  },
+};
diff --git a/examples/official-storybook/stories/addon-centered.stories.js b/examples/official-storybook/stories/addon-centered.stories.js
index 743e753dd89a..a657323ae1fe 100644
--- a/examples/official-storybook/stories/addon-centered.stories.js
+++ b/examples/official-storybook/stories/addon-centered.stories.js
@@ -1,9 +1,15 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import centered from '@storybook/addon-centered/react';
 
 import BaseButton from '../components/BaseButton';
 
-storiesOf('Addons|Centered', module)
-  .addDecorator(centered)
-  .add('story 1', () => <BaseButton label="This story should be centered" />);
+export default {
+  title: 'Addons|Centered',
+  decorators: [centered],
+};
+
+export const story1 = () => <BaseButton label="This story should be centered" />;
+
+story1.story = {
+  name: 'story 1',
+};
diff --git a/examples/official-storybook/stories/addon-contexts.stories.js b/examples/official-storybook/stories/addon-contexts.stories.js
index 7f646826d736..9edc06cbf673 100644
--- a/examples/official-storybook/stories/addon-contexts.stories.js
+++ b/examples/official-storybook/stories/addon-contexts.stories.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { withContexts } from '@storybook/addon-contexts/react';
 
 // Example A: Simple CSS Theming
@@ -39,15 +38,20 @@ const storyLevelContexts = [
   },
 ];
 
-const stories = storiesOf('Addons|Contexts', module).addDecorator(withContexts(topLevelContexts));
+export default {
+  title: 'Addons|Contexts',
+  decorators: [withContexts(topLevelContexts)],
+};
 
-stories.add(
-  'Simple CSS Theming',
-  () => <>I'm a children of the injected 'div' (where provides a theming context).</>,
-  {
-    contexts: storyLevelContexts,
-  }
+export const simpleCssTheming = () => (
+  <>I'm a children of the injected 'div' (where provides a theming context).</>
 );
+simpleCssTheming.story = {
+  name: 'Simple CSS Theming',
+  parameters: {
+    contexts: storyLevelContexts,
+  },
+};
 
 // Example B: Language (React Contexts API)
 const NaiveIntlContext = React.createContext({
@@ -55,14 +59,14 @@ const NaiveIntlContext = React.createContext({
   greeting: 'NULL',
 });
 
-stories.add(
-  'Languages',
-  () => (
-    <NaiveIntlContext.Consumer>
-      {({ locale, greeting }) => `Your locale is "${locale}", so I say "${greeting}"!`}
-    </NaiveIntlContext.Consumer>
-  ),
-  {
+export const Languages = () => (
+  <NaiveIntlContext.Consumer>
+    {({ locale, greeting }) => `Your locale is "${locale}", so I say "${greeting}"!`}
+  </NaiveIntlContext.Consumer>
+);
+
+Languages.story = {
+  parameters: {
     contexts: [
       {
         icon: 'globe',
@@ -93,5 +97,5 @@ stories.add(
         },
       },
     ],
-  }
-);
+  },
+};
diff --git a/examples/official-storybook/stories/addon-cssresources.stories.js b/examples/official-storybook/stories/addon-cssresources.stories.js
index 4cc9bceef29d..70a29ac628e4 100644
--- a/examples/official-storybook/stories/addon-cssresources.stories.js
+++ b/examples/official-storybook/stories/addon-cssresources.stories.js
@@ -1,8 +1,17 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 
-storiesOf('Addons|Cssresources', module)
-  .addParameters({
+export default {
+  title: 'Addons|Cssresources',
+};
+
+export const primaryLargeButton = () => (
+  <button type="button" className="btn btn-lg btn-primary">
+    Primary Large Button
+  </button>
+);
+primaryLargeButton.story = {
+  name: 'Primary Large Button',
+  parameters: {
     cssresources: [
       {
         id: `bootstrap v4.1.3`,
@@ -18,15 +27,13 @@ storiesOf('Addons|Cssresources', module)
     options: {
       selectedPanel: 'storybook/cssresources/panel',
     },
-  })
-  .add('Primary Large Button', () => (
-    <button type="button" className="btn btn-lg btn-primary">
-      Primary Large Button
-    </button>
-  ));
+  },
+};
 
-storiesOf('Addons|Cssresources', module)
-  .addParameters({
+export const cameraIcon = () => <i className="fa fa-camera-retro"> Camera Icon</i>;
+cameraIcon.story = {
+  name: 'Camera Icon',
+  parameters: {
     cssresources: [
       {
         id: `fontawesome`,
@@ -42,6 +49,5 @@ storiesOf('Addons|Cssresources', module)
     options: {
       selectedPanel: 'storybook/cssresources/panel',
     },
-  })
-
-  .add('Camera Icon', () => <i className="fa fa-camera-retro"> Camera Icon</i>);
+  },
+};
diff --git a/examples/official-storybook/stories/addon-design-assets.stories.js b/examples/official-storybook/stories/addon-design-assets.stories.js
index da56eca8c529..9b5185fcea5d 100644
--- a/examples/official-storybook/stories/addon-design-assets.stories.js
+++ b/examples/official-storybook/stories/addon-design-assets.stories.js
@@ -1,33 +1,66 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 
-storiesOf('Addons|Design assets', module)
-  .addParameters({
+export default {
+  title: 'Addons|Design assets',
+
+  parameters: {
     options: {
       selectedPanel: 'storybook/design-assets/panel',
     },
-  })
-  .add('single image', () => <div>This story should a single image in the assets panel</div>, {
+  },
+};
+
+export const singleImage = () => <div>This story should a single image in the assets panel</div>;
+
+singleImage.story = {
+  name: 'single image',
+
+  parameters: {
     assets: ['https://via.placeholder.com/300/09f/fff.png'],
-  })
-  .add('single webpage', () => <div>This story should a single image in the assets panel</div>, {
+  },
+};
+
+export const singleWebpage = () => <div>This story should a single image in the assets panel</div>;
+
+singleWebpage.story = {
+  name: 'single webpage',
+
+  parameters: {
     assets: ['https://www.example.com'],
-  })
-  .add('youtube video', () => <div>This story should a single image in the assets panel</div>, {
+  },
+};
+
+export const youtubeVideo = () => <div>This story should a single image in the assets panel</div>;
+
+youtubeVideo.story = {
+  name: 'youtube video',
+
+  parameters: {
     assets: ['https://www.youtube.com/embed/p-LFh5Y89eM'],
-  })
-
-  .add(
-    'multiple images',
-    () => <div>This story should a multiple images in the assets panel</div>,
-    {
-      assets: [
-        'https://via.placeholder.com/600/09f/fff.png',
-        'https://via.placeholder.com/600/f90/fff.png',
-      ],
-    }
-  )
-  .add('named assets', () => <div>This story should a single image in the assets panel</div>, {
+  },
+};
+
+export const multipleImages = () => (
+  <div>This story should a multiple images in the assets panel</div>
+);
+
+multipleImages.story = {
+  name: 'multiple images',
+
+  parameters: {
+    assets: [
+      'https://via.placeholder.com/600/09f/fff.png',
+      'https://via.placeholder.com/600/f90/fff.png',
+    ],
+  },
+};
+
+export const namedAssets = () => <div>This story should a single image in the assets panel</div>;
+
+namedAssets.story = {
+  name: 'named assets',
+
+  parameters: {
     assets: [
       {
         name: 'blue',
@@ -38,11 +71,17 @@ storiesOf('Addons|Design assets', module)
         url: 'https://via.placeholder.com/300/f90/fff.png',
       },
     ],
-  })
-  .add(
-    'url replacement',
-    () => <div>This story should have a webpge, with within it's url the storyId</div>,
-    {
-      assets: ['https://via.placeholder.com/600.png?text={id}'],
-    }
-  );
+  },
+};
+
+export const urlReplacement = () => (
+  <div>This story should have a webpge, with within it's url the storyId</div>
+);
+
+urlReplacement.story = {
+  name: 'url replacement',
+
+  parameters: {
+    assets: ['https://via.placeholder.com/600.png?text={id}'],
+  },
+};
diff --git a/examples/official-storybook/stories/addon-docs.stories.js b/examples/official-storybook/stories/addon-docs.stories.js
index 533f7adbe662..163744b595a2 100644
--- a/examples/official-storybook/stories/addon-docs.stories.js
+++ b/examples/official-storybook/stories/addon-docs.stories.js
@@ -13,25 +13,31 @@ export default {
 export const basic = () => <div>Click docs tab to see basic docs</div>;
 
 export const withNotes = () => <div>Click docs tab to see DocsPage docs</div>;
-withNotes.title = 'with notes';
-withNotes.parameters = {
-  notes,
+withNotes.story = {
+  name: 'with notes',
+  parameters: { notes },
 };
 
 export const withInfo = () => <div>Click docs tab to see DocsPage docs</div>;
-withInfo.title = 'with info';
-withInfo.parameters = {
-  info: 'some user info string',
+withInfo.story = {
+  name: 'with info',
+  parameters: {
+    info: 'some user info string',
+  },
 };
 
 export const mdxOverride = () => <div>Click docs tab to see MDX-overridden docs</div>;
-mdxOverride.title = 'mdx override';
-mdxOverride.parameters = {
-  docs: mdxNotes,
+mdxOverride.story = {
+  name: 'mdx override',
+  parameters: {
+    docs: mdxNotes,
+  },
 };
 
 export const jsxOverride = () => <div>Click docs tab to see JSX-overridden docs</div>;
-jsxOverride.title = 'jsx override';
-jsxOverride.parameters = {
-  docs: () => <div>Hello docs</div>,
+jsxOverride.story = {
+  name: 'jsx override',
+  parameters: {
+    docs: () => <div>Hello docs</div>,
+  },
 };
diff --git a/examples/official-storybook/stories/addon-docs.stories.mdx b/examples/official-storybook/stories/addon-docs.stories.mdx
index 88dcf8a67b4e..18720dddbde3 100644
--- a/examples/official-storybook/stories/addon-docs.stories.mdx
+++ b/examples/official-storybook/stories/addon-docs.stories.mdx
@@ -10,6 +10,8 @@ import {
 } from '@storybook/addon-docs/blocks';
 import { action } from '@storybook/addon-actions';
 import { Button } from '@storybook/react/demo';
+import FlowTypeButton from '../components/FlowTypeButton';
+import DocgenButton from '../components/DocgenButton';
 
 <Meta
   title="Addons|Docs/mdx"
@@ -75,6 +77,10 @@ export const nonStory2 = () => <Button>Not a story</Button>; // another one
   <Button onClick={action('clicked')}>solo</Button>
 </Story>
 
+<Story name="iframe story" inline={false} height="100px">
+  <>This is an iframe!</>
+</Story>
+
 <Source name="hello story" />
 
 ## Configurable height
@@ -86,3 +92,15 @@ export const nonStory2 = () => <Button>Not a story</Button>; // another one
 <Description markdown="this is _markdown_" />
 
 <Description of={Button} />
+
+## Props
+
+### Docgen
+
+<Props of={DocgenButton} />
+
+### Flow
+
+Flow types are not officially supported
+
+<Props of={FlowTypeButton} />
diff --git a/examples/official-storybook/stories/addon-events.stories.js b/examples/official-storybook/stories/addon-events.stories.js
index 8c17d0a917a5..7f280c366b01 100644
--- a/examples/official-storybook/stories/addon-events.stories.js
+++ b/examples/official-storybook/stories/addon-events.stories.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import EventEmitter from 'eventemitter3';
-import { storiesOf } from '@storybook/react';
 
 import withEvents from '@storybook/addon-events';
 import Logger from './Logger';
@@ -67,25 +66,17 @@ const events = [
   },
 ];
 
-storiesOf('Addons|Events', module)
-  .addParameters({
+export default {
+  title: 'Addons|Events',
+  decorators: [withEvents({ emit, events })],
+  parameters: {
     options: {
       selectedPanel: 'storybook/events/panel',
     },
-  })
-  .addDecorator(withEvents({ emit, events }))
-  .add('Logger', () => <Logger emitter={emitter} />);
+  },
+};
 
-const WithEvents = withEvents;
-storiesOf('Addons|Events.deprecated', module)
-  .addParameters({
-    options: {
-      selectedPanel: 'storybook/events/panel',
-    },
-  })
-  .addDecorator(storyFn => (
-    <WithEvents emit={emit} events={events}>
-      {storyFn()}
-    </WithEvents>
-  ))
-  .add('Logger', () => <Logger emitter={emitter} />);
+export const logger = () => <Logger emitter={emitter} />;
+logger.story = {
+  name: 'Logger',
+};
diff --git a/examples/official-storybook/stories/addon-graphql.stories.js b/examples/official-storybook/stories/addon-graphql.stories.js
index b10970c95c38..44187c83c6bc 100644
--- a/examples/official-storybook/stories/addon-graphql.stories.js
+++ b/examples/official-storybook/stories/addon-graphql.stories.js
@@ -1,43 +1,47 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
-// import { setupGraphiQL } from '@storybook/addon-graphql';
 
-// const graphiql = setupGraphiQL({
-//   url: 'https://graphql-pokemon.now.sh/?',
-// });
+export default {
+  title: 'Addons|GraphQL',
+};
 
-storiesOf('Addons|GraphQL', module).add('get Pickachu', () => <div>hello</div>, {
-  graphiql: {
-    query: `{
-        pokemon(name: "Pikachu") {
-          id
-          number
-          name
-          attacks {
-            special {
-              name
-              type
-              damage
-            }
-          }
-          evolutions {
+export const getPickachu = () => <div>hello</div>;
+
+getPickachu.story = {
+  name: 'get Pickachu',
+
+  parameters: {
+    graphiql: {
+      query: `{
+          pokemon(name: "Pikachu") {
             id
             number
             name
-            weight {
-              minimum
-              maximum
-            }
             attacks {
-              fast {
+              special {
                 name
                 type
                 damage
               }
             }
+            evolutions {
+              id
+              number
+              name
+              weight {
+                minimum
+                maximum
+              }
+              attacks {
+                fast {
+                  name
+                  type
+                  damage
+                }
+              }
+            }
           }
-        }
-      }`,
-    url: 'https://graphql-pokemon.now.sh/?',
+        }`,
+      url: 'https://graphql-pokemon.now.sh/?',
+    },
   },
-});
+};
diff --git a/examples/official-storybook/stories/addon-info.stories.js b/examples/official-storybook/stories/addon-info.stories.js
deleted file mode 100644
index 4229f8ad5094..000000000000
--- a/examples/official-storybook/stories/addon-info.stories.js
+++ /dev/null
@@ -1,414 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
-import { action } from '@storybook/addon-actions';
-
-import DocgenButton from '../components/DocgenButton';
-import FlowTypeButton from '../components/FlowTypeButton';
-import BaseButton from '../components/BaseButton';
-import ForwardedRefButton from '../components/ForwardedRefButton';
-import ForwardedRefButtonWDisplayName from '../components/ForwardedRefButtonWDisplayName';
-import { NamedExportButton } from '../components/NamedExportButton';
-import TableComponent from '../components/TableComponent';
-import externalMdDocs from './addon-info-resources/EXAMPLE.md';
-
-storiesOf('Addons|Info/React Docgen', module)
-  .addDecorator(withInfo)
-  .add(
-    'Comments from PropType declarations',
-    () => (
-      <DocgenButton
-        onClick={action('clicked')}
-        label="Docgen Button"
-        disabled={false}
-        one={{ key: 1 }}
-        shape={{
-          id: 3,
-          arr: [],
-          shape: {
-            shape: {
-              foo: 'bar',
-            },
-          },
-          func: () => {},
-        }}
-        arrayOf={[1, 2, 3]}
-      />
-    ),
-    {
-      info:
-        'Comments above the PropType declarations should be extracted from the React component file itself and rendered in the Info Addon prop table',
-    }
-  )
-  .add(
-    'Comments from Flow declarations',
-    () => <FlowTypeButton onClick={action('clicked')} label="Flow Typed Button" />,
-    {
-      info:
-        'Comments above the Flow declarations should be extracted from the React component file itself and rendered in the Info Addon prop table',
-    }
-  )
-  .add(
-    'Comments from component declaration',
-    () => <BaseButton onClick={action('clicked')} label="Button" />,
-    {
-      info:
-        'Comments above the component declaration should be extracted from the React component file itself and rendered below the Info Addon heading',
-    }
-  )
-  .add(
-    'Comments from named export component declaration',
-    () => <NamedExportButton onClick={action('clicked')} label="Button" />,
-    {
-      info:
-        'Comments above the component declaration should be extracted from the React component file itself and rendered below the Info Addon heading',
-    }
-  );
-
-const markdownDescription = `
-#### You can use markdown in your withInfo description.
-
-Sometimes you might want to manually include some \`code\` examples:
-
-~~~js
-const Button = () => <button />;
-~~~
-
-classes in javascript
-
-~~~javascript
-export class FromComponent {
-  form = new FormControl({
-    searchTerm: new FromControl(''),
-    searchDate: new FromControl(''),
-    endDate: new FromControl(''),
-  })
-}
-~~~
-
-html with special formatting
-
-~~~html
-<foo-outer property-a="value"
-           property-b="value"
-           property-c="value">
-  <foo-inner property-a="value"
-             property-b="value" />
-</foo-outer>
-~~~
-
-
-Maybe include a [link](http://storybook.js.org) to your project as well.
-`;
-
-storiesOf('Addons|Info/Markdown', module)
-  .addDecorator(withInfo)
-  .add(
-    'Displays Markdown in description',
-    () => <BaseButton onClick={action('clicked')} label="Button" />,
-    { info: markdownDescription }
-  )
-  .add(
-    'From internal Markdown file',
-    () => <BaseButton onClick={action('clicked')} label="Button" />,
-    {
-      info: `
-      # internal
-      ## markdown
-      file
-    `,
-    }
-  )
-  .add(
-    'From external Markdown file',
-    () => <BaseButton onClick={action('clicked')} label="Button" />,
-    { info: externalMdDocs }
-  );
-
-const JSXDescription = (
-  <div>
-    <h2>This is a JSX info section</h2>
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare massa rutrum metus
-      commodo, a mattis velit dignissim. Fusce vestibulum turpis sed massa egestas pharetra. Sed at
-      libero nulla.
-    </p>
-    <p>
-      <a href="https://github.com/storybookjs/react-storybook-addon-info">This is a link</a>
-    </p>
-    <p>
-      <img alt="350x150" src="http://placehold.it/350x150" />
-    </p>
-  </div>
-);
-
-storiesOf('Addons|Info/JSX', module)
-  .addDecorator(withInfo)
-  .add(
-    'Displays JSX in description',
-    () => <BaseButton onClick={action('clicked')} label="Button" />,
-    {
-      info: { text: JSXDescription },
-    }
-  );
-
-storiesOf('Addons|Info/Options.inline', module)
-  .addDecorator(withInfo)
-  .add('Inlines component inside story', () => <BaseButton label="Button" />, {
-    info: {
-      text: 'Component should be inlined between description and PropType table',
-      inline: true, // Displays info inline vs click button to view
-    },
-  });
-
-storiesOf('Addons|Info/Options.excludedPropTypes', module)
-  .addDecorator(withInfo)
-  .add(
-    'Excludes propTypes that are in the excludedPropTypes array',
-    () => <BaseButton label="Button" />,
-    {
-      info: {
-        text: 'Label propType should be excluded',
-        excludedPropTypes: ['label'],
-      },
-    }
-  );
-
-storiesOf('Addons|Info/Options.header', module)
-  .addDecorator(withInfo)
-  .add('Shows or hides Info Addon header', () => <BaseButton label="Button" />, {
-    info: {
-      text: 'The Info Addon header should be hidden',
-      header: false, // Toggles display of header with component name and description
-    },
-  });
-
-storiesOf('Addons|Info/Options.source', module)
-  .addDecorator(withInfo)
-  .add('Shows or hides Info Addon source', () => <BaseButton label="Button" />, {
-    info: {
-      text: 'The Info Addon source section should be hidden',
-      source: false, // Displays the source of story Component
-    },
-  });
-
-storiesOf('Addons|Info/Options.propTables', module)
-  .addDecorator(withInfo)
-  .add('Shows additional component prop tables', () => <BaseButton label="Button" />, {
-    info: {
-      text: 'There should be a prop table added for a component not included in the story',
-      propTables: [FlowTypeButton],
-    },
-  });
-
-storiesOf('Addons|Info/Options.propTablesExclude', module)
-  .addDecorator(withInfo)
-  .add(
-    'Exclude component from prop tables',
-    () => (
-      <div>
-        <BaseButton label="Button" />
-        <FlowTypeButton label="Flow Typed Button" />
-      </div>
-    ),
-    {
-      info: {
-        text: 'This can exclude extraneous components from being displayed in prop tables.',
-        propTablesExclude: [FlowTypeButton],
-      },
-    }
-  );
-
-storiesOf('Addons|Info/Options.styles', module)
-  .addDecorator(withInfo)
-  .add('Extend info styles with an object', () => <BaseButton label="Button" />, {
-    info: {
-      styles: {
-        button: {
-          base: {
-            background: 'purple',
-          },
-        },
-        header: {
-          h1: {
-            color: 'green',
-          },
-        },
-      },
-    },
-  })
-  .add('Full control over styles using a function', () => <BaseButton label="Button" />, {
-    info: {
-      styles: stylesheet => ({
-        ...stylesheet,
-        header: {
-          ...stylesheet.header,
-          h1: {
-            ...stylesheet.header.h1,
-            color: 'red',
-          },
-        },
-      }),
-    },
-  });
-
-storiesOf('Addons|Info/Options.TableComponent', module)
-  .addParameters({
-    component: TableComponent,
-  })
-  .addDecorator(withInfo)
-  .add('Use a custom component for the table', () => <BaseButton label="Button" />, {
-    info: {
-      TableComponent,
-    },
-  });
-
-storiesOf('Addons|Info/Decorator', module)
-  .addDecorator(withInfo('Info can take options via the global or local decorator as well.'))
-  .add('Use Info as story decorator', () => <BaseButton label="Button" />);
-
-const hoc = WrapComponent => ({ ...props }) => <WrapComponent {...props} />;
-
-const Input = hoc(() => <input type="text" />);
-
-const TextArea = hoc(({ children }) => <textarea>{children}</textarea>);
-
-storiesOf('Addons|Info/GitHub issues', module)
-  .addDecorator(withInfo)
-  .add(
-    '#1814',
-    () => (
-      <div>
-        <Input />
-        <TextArea />
-      </div>
-    ),
-    {
-      info: 'Allow Duplicate DisplayNames for HOC #1814',
-    }
-  );
-
-storiesOf('Addons|Info/Parameters', module)
-  .addDecorator(
-    withInfo({
-      styles: {
-        header: {
-          h1: {
-            color: 'green',
-          },
-        },
-      },
-    })
-  )
-  .addParameters({
-    info: {
-      text:
-        'This text should be displayed on every story and the component should be inlined between description and PropType table',
-      inline: true, // Displays info inline vs click button to view
-    },
-  })
-  .add('Using paramaters across all stories', () => <BaseButton label="Button" />)
-  .add(
-    'Overwriting and extending the parameters and options set stories-wise',
-    () => <BaseButton label="Button" />,
-    {
-      info: {
-        text: 'Label propType should be excluded',
-        excludedPropTypes: ['label'],
-      },
-    }
-  )
-  .add(
-    'Overwrite the parameters with markdown variable',
-    () => <BaseButton onClick={action('clicked')} label="Button" />,
-    { info: markdownDescription }
-  )
-  .add(
-    'Overwrite the text parameter with markdown inline',
-    () => <BaseButton onClick={action('clicked')} label="Button" />,
-    {
-      info: {
-        text: `
-        description or documentation about my component, supports markdown
-
-        ~~~js
-        <Button>Click Here</Button>
-        ~~~
-      `,
-      },
-    }
-  )
-  .add(
-    'Disable the addon entirely',
-    () => <BaseButton onClick={action('clicked')} label="Button" />,
-    { info: { disable: true } }
-  );
-
-storiesOf('Addons|Info/ForwardRef', module)
-  .addDecorator(withInfo)
-  .add('Displays forwarded ref components correctly', () => (
-    <ForwardedRefButton label="Forwarded Ref Button" />
-  ))
-  .add('Uses forwardRef displayName if available', () => (
-    <ForwardedRefButtonWDisplayName label="Forwarded Ref Button w/ Display Name" />
-  ));
-
-storiesOf('Addons|Info/deprecated', module).add(
-  'Displays Markdown in description',
-  withInfo(markdownDescription)(() => <BaseButton onClick={action('clicked')} label="Button" />)
-);
-
-storiesOf('Addons|Info/Story Source', module)
-  .addDecorator(withInfo)
-  .add('One prop', () => <BaseButton label="Button" />)
-  .add('Many props', () => <BaseButton label="Button" onClick={action('clicked')} disabled />)
-  .add('Children', () => (
-    <div>
-      <p>Here is my nice button:</p>
-      <BaseButton label="Button" onClick={action('clicked')} />
-    </div>
-  ))
-  .add('Array prop', () => {
-    const propDefs = [
-      {
-        property: 'label',
-        propType: { name: 'string' },
-        required: true,
-        description: 'Text to display inside button',
-      },
-      {
-        property: 'disabled',
-        propType: { name: 'boolean' },
-        required: false,
-        defaultValue: false,
-      },
-      {
-        property: 'onClick',
-        propType: { name: 'function' },
-        description: 'Callback for when button is clicked',
-        required: true,
-        defaultValue: () => {},
-      },
-      {
-        property: 'style',
-        propType: { name: 'object' },
-        description: 'Styles to apply to button',
-        required: false,
-        defaultValue: {},
-      },
-    ];
-    return <TableComponent propDefinitions={propDefs} />;
-  })
-  .add('Object prop', () => (
-    <BaseButton
-      label="Button"
-      style={{
-        color: 'midnightblue',
-        backgroundColor: 'powderblue',
-        fontSize: '16px',
-        boxShadow: '1px 1px rgba(0, 0, 0, .07)',
-        borderRadius: '5px',
-        padding: '4px 8px',
-      }}
-    />
-  ));
diff --git a/examples/official-storybook/stories/addon-info-resources/EXAMPLE.md b/examples/official-storybook/stories/addon-info/EXAMPLE.md
similarity index 100%
rename from examples/official-storybook/stories/addon-info-resources/EXAMPLE.md
rename to examples/official-storybook/stories/addon-info/EXAMPLE.md
diff --git a/examples/official-storybook/stories/addon-info/decorators.stories.js b/examples/official-storybook/stories/addon-info/decorators.stories.js
new file mode 100644
index 000000000000..fc0d763ee9f0
--- /dev/null
+++ b/examples/official-storybook/stories/addon-info/decorators.stories.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import { withInfo } from '@storybook/addon-info';
+import BaseButton from '../../components/BaseButton';
+
+export default {
+  title: 'Addons|Info/Decorator',
+  decorators: [withInfo('Info can take options via the global or local decorator as well.')],
+};
+
+export const useInfo = () => <BaseButton label="Button" />;
+useInfo.story = { name: 'Use Info as story decorator' };
diff --git a/examples/official-storybook/stories/addon-info/forward-ref.stories.js b/examples/official-storybook/stories/addon-info/forward-ref.stories.js
new file mode 100644
index 000000000000..c4e674be1795
--- /dev/null
+++ b/examples/official-storybook/stories/addon-info/forward-ref.stories.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import { withInfo } from '@storybook/addon-info';
+import ForwardedRefButton from '../../components/ForwardedRefButton';
+import ForwardedRefButtonWDisplayName from '../../components/ForwardedRefButtonWDisplayName';
+
+export default {
+  title: 'Addons|Info/ForwardRef',
+  decorators: [withInfo],
+};
+
+export const displaysCorrectly = () => <ForwardedRefButton label="Forwarded Ref Button" />;
+displaysCorrectly.story = { name: 'Displays forwarded ref components correctly' };
+
+export const displayName = () => (
+  <ForwardedRefButtonWDisplayName label="Forwarded Ref Button w/ Display Name" />
+);
+displayName.story = { name: 'Uses forwardRef displayName if available' };
diff --git a/examples/official-storybook/stories/addon-info/github-issues.js b/examples/official-storybook/stories/addon-info/github-issues.js
new file mode 100644
index 000000000000..c3832af3fb02
--- /dev/null
+++ b/examples/official-storybook/stories/addon-info/github-issues.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import { withInfo } from '@storybook/addon-info';
+
+const hoc = WrapComponent => ({ ...props }) => <WrapComponent {...props} />;
+
+const Input = hoc(() => <input type="text" />);
+
+const TextArea = hoc(({ children }) => <textarea>{children}</textarea>);
+
+export default {
+  title: 'Addons|Info/GitHub issues',
+  decorators: [withInfo],
+};
+
+export const issue1814 = () => (
+  <div>
+    <Input />
+    <TextArea />
+  </div>
+);
+
+issue1814.story = {
+  name: '#1814',
+  parameters: {
+    info: 'Allow Duplicate DisplayNames for HOC #1814',
+  },
+};
diff --git a/examples/official-storybook/stories/addon-info/jsx.stories.js b/examples/official-storybook/stories/addon-info/jsx.stories.js
new file mode 100644
index 000000000000..dcdd37d6d48d
--- /dev/null
+++ b/examples/official-storybook/stories/addon-info/jsx.stories.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import { withInfo } from '@storybook/addon-info';
+import { action } from '@storybook/addon-actions';
+import BaseButton from '../../components/BaseButton';
+
+const JSXDescription = (
+  <div>
+    <h2>This is a JSX info section</h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare massa rutrum metus
+      commodo, a mattis velit dignissim. Fusce vestibulum turpis sed massa egestas pharetra. Sed at
+      libero nulla.
+    </p>
+    <p>
+      <a href="https://github.com/storybookjs/react-storybook-addon-info">This is a link</a>
+    </p>
+    <p>
+      <img alt="350x150" src="http://placehold.it/350x150" />
+    </p>
+  </div>
+);
+
+export default {
+  title: 'Addons|Info/JSX',
+  decorators: [withInfo],
+};
+
+export const displaysJsxInDescription = () => (
+  <BaseButton onClick={action('clicked')} label="Button" />
+);
+
+displaysJsxInDescription.story = {
+  name: 'Displays JSX in description',
+
+  parameters: {
+    info: { text: JSXDescription },
+  },
+};
diff --git a/examples/official-storybook/stories/addon-info/markdown.stories.js b/examples/official-storybook/stories/addon-info/markdown.stories.js
new file mode 100644
index 000000000000..5f9048be9bc7
--- /dev/null
+++ b/examples/official-storybook/stories/addon-info/markdown.stories.js
@@ -0,0 +1,82 @@
+import React from 'react';
+import { withInfo } from '@storybook/addon-info';
+import { action } from '@storybook/addon-actions';
+
+import BaseButton from '../../components/BaseButton';
+import externalMdDocs from './EXAMPLE.md';
+
+export default {
+  title: 'Addons|Info/Markdown',
+  decorators: [withInfo],
+  excludeStories: ['markdownDescription'],
+};
+
+export const markdownDescription = `
+#### You can use markdown in your withInfo description.
+
+Sometimes you might want to manually include some \`code\` examples:
+
+~~~js
+const Button = () => <button />;
+~~~
+
+classes in javascript
+
+~~~javascript
+export class FromComponent {
+  form = new FormControl({
+    searchTerm: new FromControl(''),
+    searchDate: new FromControl(''),
+    endDate: new FromControl(''),
+  })
+}
+~~~
+
+html with special formatting
+
+~~~html
+<foo-outer property-a="value"
+           property-b="value"
+           property-c="value">
+  <foo-inner property-a="value"
+             property-b="value" />
+</foo-outer>
+~~~
+
+
+Maybe include a [link](http://storybook.js.org) to your project as well.
+`;
+
+export const displaysMarkdownInDescription = () => (
+  <BaseButton onClick={action('clicked')} label="Button" />
+);
+
+displaysMarkdownInDescription.story = {
+  name: 'Displays Markdown in description',
+  parameters: { info: markdownDescription },
+};
+
+export const fromInternalMarkdownFile = () => (
+  <BaseButton onClick={action('clicked')} label="Button" />
+);
+
+fromInternalMarkdownFile.story = {
+  name: 'From internal Markdown file',
+
+  parameters: {
+    info: `
+    # internal
+    ## markdown
+    file
+  `,
+  },
+};
+
+export const fromExternalMarkdownFile = () => (
+  <BaseButton onClick={action('clicked')} label="Button" />
+);
+
+fromExternalMarkdownFile.story = {
+  name: 'From external Markdown file',
+  parameters: { info: externalMdDocs },
+};
diff --git a/examples/official-storybook/stories/addon-info/options.stories.js b/examples/official-storybook/stories/addon-info/options.stories.js
new file mode 100644
index 000000000000..95d04d672da0
--- /dev/null
+++ b/examples/official-storybook/stories/addon-info/options.stories.js
@@ -0,0 +1,200 @@
+import React from 'react';
+import { withInfo } from '@storybook/addon-info';
+import { action } from '@storybook/addon-actions';
+
+import FlowTypeButton from '../../components/FlowTypeButton';
+import BaseButton from '../../components/BaseButton';
+import TableComponent from '../../components/TableComponent';
+import { markdownDescription } from './markdown.stories';
+
+export default {
+  title: 'Addons|Info/Options',
+  decorators: [withInfo],
+};
+
+export const inlinesComponentInsideStory = () => <BaseButton label="Button" />;
+inlinesComponentInsideStory.story = {
+  name: 'Inlines component inside story',
+  parameters: {
+    info: {
+      text: 'Component should be inlined between description and PropType table',
+      inline: true, // Displays info inline vs click button to view
+    },
+  },
+};
+
+export const excludesPropTypesThatAreInTheExcludedPropTypesArray = () => (
+  <BaseButton label="Button" />
+);
+excludesPropTypesThatAreInTheExcludedPropTypesArray.story = {
+  name: 'Excludes propTypes that are in the excludedPropTypes array',
+  parameters: {
+    info: {
+      text: 'Label propType should be excluded',
+      excludedPropTypes: ['label'],
+    },
+  },
+};
+
+export const showsOrHidesInfoAddonHeader = () => <BaseButton label="Button" />;
+showsOrHidesInfoAddonHeader.story = {
+  name: 'Shows or hides Info Addon header',
+  parameters: {
+    info: {
+      text: 'The Info Addon header should be hidden',
+      header: false, // Toggles display of header with component name and description
+    },
+  },
+};
+
+export const showsOrHidesInfoAddonSource = () => <BaseButton label="Button" />;
+showsOrHidesInfoAddonSource.story = {
+  name: 'Shows or hides Info Addon source',
+  parameters: {
+    info: {
+      text: 'The Info Addon source section should be hidden',
+      source: false, // Displays the source of story Component
+    },
+  },
+};
+
+export const showsAdditionalComponentPropTables = () => <BaseButton label="Button" />;
+showsAdditionalComponentPropTables.story = {
+  name: 'Shows additional component prop tables',
+  parameters: {
+    info: {
+      text: 'There should be a prop table added for a component not included in the story',
+      propTables: [FlowTypeButton],
+    },
+  },
+};
+
+export const excludeComponentFromPropTables = () => (
+  <div>
+    <BaseButton label="Button" />
+    <FlowTypeButton label="Flow Typed Button" />
+  </div>
+);
+excludeComponentFromPropTables.story = {
+  name: 'Exclude component from prop tables',
+  parameters: {
+    info: {
+      text: 'This can exclude extraneous components from being displayed in prop tables.',
+      propTablesExclude: [FlowTypeButton],
+    },
+  },
+};
+
+export const extendInfoStylesWithAnObject = () => <BaseButton label="Button" />;
+extendInfoStylesWithAnObject.story = {
+  name: 'Extend info styles with an object',
+  parameters: {
+    info: {
+      styles: {
+        button: {
+          base: {
+            background: 'purple',
+          },
+        },
+        header: {
+          h1: {
+            color: 'green',
+          },
+        },
+      },
+    },
+  },
+};
+
+export const fullControlOverStylesUsingAFunction = () => <BaseButton label="Button" />;
+fullControlOverStylesUsingAFunction.story = {
+  name: 'Full control over styles using a function',
+  parameters: {
+    info: {
+      styles: stylesheet => ({
+        ...stylesheet,
+        header: {
+          ...stylesheet.header,
+          h1: {
+            ...stylesheet.header.h1,
+            color: 'red',
+          },
+        },
+      }),
+    },
+  },
+};
+
+export const useACustomComponentForTheTable = () => <BaseButton label="Button" />;
+useACustomComponentForTheTable.story = {
+  name: 'Use a custom component for the table',
+  parameters: {
+    component: TableComponent,
+    info: {
+      TableComponent,
+    },
+  },
+};
+
+export const useInfoAsStoryDecorator = () => <BaseButton label="Button" />;
+
+useInfoAsStoryDecorator.story = {
+  name: 'Use Info as story decorator',
+  parameters: {
+    decorators: [withInfo('Info can take options via the global or local decorator as well.')],
+  },
+};
+
+export const usingParamatersAcrossAllStories = () => <BaseButton label="Button" />;
+usingParamatersAcrossAllStories.story = {
+  name: 'Using paramaters across all stories',
+};
+
+export const overwritingAndExtendingTheParametersAndOptionsSetStoriesWise = () => (
+  <BaseButton label="Button" />
+);
+overwritingAndExtendingTheParametersAndOptionsSetStoriesWise.story = {
+  name: 'Overwriting and extending the parameters and options set stories-wise',
+  parameters: {
+    info: {
+      text: 'Label propType should be excluded',
+      excludedPropTypes: ['label'],
+    },
+  },
+};
+
+export const overwriteTheParametersWithMarkdownVariable = () => (
+  <BaseButton onClick={action('clicked')} label="Button" />
+);
+
+overwriteTheParametersWithMarkdownVariable.story = {
+  name: 'Overwrite the parameters with markdown variable',
+  parameters: { info: markdownDescription },
+};
+
+export const overwriteTheTextParameterWithMarkdownInline = () => (
+  <BaseButton onClick={action('clicked')} label="Button" />
+);
+
+overwriteTheTextParameterWithMarkdownInline.story = {
+  name: 'Overwrite the text parameter with markdown inline',
+  parameters: {
+    info: {
+      text: `
+      description or documentation about my component, supports markdown
+
+      ~~~js
+      <Button>Click Here</Button>
+      ~~~
+    `,
+    },
+  },
+};
+
+export const disableTheAddonEntirely = () => (
+  <BaseButton onClick={action('clicked')} label="Button" />
+);
+disableTheAddonEntirely.story = {
+  name: 'Disable the addon entirely',
+  parameters: { info: { disable: true } },
+};
diff --git a/examples/official-storybook/stories/addon-info/parameters.stories.js b/examples/official-storybook/stories/addon-info/parameters.stories.js
new file mode 100644
index 000000000000..20239e58f7da
--- /dev/null
+++ b/examples/official-storybook/stories/addon-info/parameters.stories.js
@@ -0,0 +1,80 @@
+import React from 'react';
+import { withInfo } from '@storybook/addon-info';
+import { action } from '@storybook/addon-actions';
+
+import BaseButton from '../../components/BaseButton';
+import { markdownDescription } from './markdown.stories';
+
+export default {
+  title: 'Addons|Info/Parameters',
+  decorators: [
+    withInfo({
+      styles: {
+        header: {
+          h1: {
+            color: 'green',
+          },
+        },
+      },
+    }),
+  ],
+  parameters: {
+    info: {
+      text:
+        'This text should be displayed on every story and the component should be inlined between description and PropType table',
+      inline: true, // Displays info inline vs click button to view
+    },
+  },
+};
+
+export const usingParamatersAcrossAllStories = () => <BaseButton label="Button" />;
+usingParamatersAcrossAllStories.story = {
+  name: 'Using paramaters across all stories',
+};
+
+export const overwritingAndExtendingTheParametersAndOptionsSetStoriesWise = () => (
+  <BaseButton label="Button" />
+);
+overwritingAndExtendingTheParametersAndOptionsSetStoriesWise.story = {
+  name: 'Overwriting and extending the parameters and options set stories-wise',
+  parameters: {
+    info: {
+      text: 'Label propType should be excluded',
+      excludedPropTypes: ['label'],
+    },
+  },
+};
+
+export const overwriteTheParametersWithMarkdownVariable = () => (
+  <BaseButton onClick={action('clicked')} label="Button" />
+);
+overwriteTheParametersWithMarkdownVariable.story = {
+  name: 'Overwrite the parameters with markdown variable',
+  parameters: { info: markdownDescription },
+};
+
+export const overwriteTheTextParameterWithMarkdownInline = () => (
+  <BaseButton onClick={action('clicked')} label="Button" />
+);
+overwriteTheTextParameterWithMarkdownInline.story = {
+  name: 'Overwrite the text parameter with markdown inline',
+  parameters: {
+    info: {
+      text: `
+      description or documentation about my component, supports markdown
+
+      ~~~js
+      <Button>Click Here</Button>
+      ~~~
+    `,
+    },
+  },
+};
+
+export const disableTheAddonEntirely = () => (
+  <BaseButton onClick={action('clicked')} label="Button" />
+);
+disableTheAddonEntirely.story = {
+  name: 'Disable the addon entirely',
+  parameters: { info: { disable: true } },
+};
diff --git a/examples/official-storybook/stories/addon-info/react-docgen.stories.js b/examples/official-storybook/stories/addon-info/react-docgen.stories.js
new file mode 100644
index 000000000000..91400f9e18a4
--- /dev/null
+++ b/examples/official-storybook/stories/addon-info/react-docgen.stories.js
@@ -0,0 +1,117 @@
+import React from 'react';
+import { withInfo } from '@storybook/addon-info';
+import { action } from '@storybook/addon-actions';
+
+import DocgenButton from '../../components/DocgenButton';
+import FlowTypeButton from '../../components/FlowTypeButton';
+import BaseButton from '../../components/BaseButton';
+import { NamedExportButton } from '../../components/NamedExportButton';
+
+export default {
+  title: 'Addons|Info/React Docgen',
+  decorators: [withInfo],
+};
+
+export const commentsFromPropTypeDeclarations = () => (
+  <DocgenButton
+    onClick={action('clicked')}
+    label="Docgen Button"
+    disabled={false}
+    one={{ key: 1 }}
+    shape={{
+      id: 3,
+      arr: [],
+      shape: {
+        shape: {
+          foo: 'bar',
+        },
+      },
+      func: () => {},
+    }}
+    arrayOf={[1, 2, 3]}
+  />
+);
+
+commentsFromPropTypeDeclarations.story = {
+  name: 'Comments from PropType declarations',
+
+  parameters: {
+    info:
+      'Comments above the PropType declarations should be extracted from the React component file itself and rendered in the Info Addon prop table',
+  },
+};
+
+export const commentsFromFlowDeclarations = () => (
+  <FlowTypeButton onClick={action('clicked')} label="Flow Typed Button" />
+);
+
+commentsFromFlowDeclarations.story = {
+  name: 'Comments from Flow declarations',
+
+  parameters: {
+    info:
+      'Comments above the Flow declarations should be extracted from the React component file itself and rendered in the Info Addon prop table',
+  },
+};
+
+export const commentsFromComponentDeclaration = () => (
+  <BaseButton onClick={action('clicked')} label="Button" />
+);
+
+commentsFromComponentDeclaration.story = {
+  name: 'Comments from component declaration',
+
+  parameters: {
+    info:
+      'Comments above the component declaration should be extracted from the React component file itself and rendered below the Info Addon heading',
+  },
+};
+
+export const commentsFromNamedExportComponentDeclaration = () => (
+  <NamedExportButton onClick={action('clicked')} label="Button" />
+);
+
+commentsFromNamedExportComponentDeclaration.story = {
+  name: 'Comments from named export component declaration',
+
+  parameters: {
+    info:
+      'Comments above the component declaration should be extracted from the React component file itself and rendered below the Info Addon heading',
+  },
+};
+
+const markdownDescription = `
+#### You can use markdown in your withInfo description.
+
+Sometimes you might want to manually include some \`code\` examples:
+
+~~~js
+const Button = () => <button />;
+~~~
+
+classes in javascript
+
+~~~javascript
+export class FromComponent {
+  form = new FormControl({
+    searchTerm: new FromControl(''),
+    searchDate: new FromControl(''),
+    endDate: new FromControl(''),
+  })
+}
+~~~
+
+html with special formatting
+
+~~~html
+<foo-outer property-a="value"
+           property-b="value"
+           property-c="value">
+  <foo-inner property-a="value"
+             property-b="value" />
+</foo-outer>
+~~~
+
+
+Maybe include a [link](http://storybook.js.org) to your project as well.
+`;
diff --git a/examples/official-storybook/stories/addon-info/story-source.stories.js b/examples/official-storybook/stories/addon-info/story-source.stories.js
new file mode 100644
index 000000000000..51659a3ce200
--- /dev/null
+++ b/examples/official-storybook/stories/addon-info/story-source.stories.js
@@ -0,0 +1,73 @@
+import React from 'react';
+import { withInfo } from '@storybook/addon-info';
+import { action } from '@storybook/addon-actions';
+
+import BaseButton from '../../components/BaseButton';
+import TableComponent from '../../components/TableComponent';
+
+export default {
+  title: 'Addons|Info/Story Source',
+  decorators: [withInfo],
+};
+
+export const oneProp = () => <BaseButton label="Button" />;
+oneProp.story = { name: 'One prop' };
+
+export const manyProps = () => <BaseButton label="Button" onClick={action('clicked')} disabled />;
+manyProps.story = { name: 'Many props' };
+
+export const children = () => (
+  <div>
+    <p>Here is my nice button:</p>
+    <BaseButton label="Button" onClick={action('clicked')} />
+  </div>
+);
+children.story = { name: 'Children' };
+
+export const arrayProp = () => {
+  const propDefs = [
+    {
+      property: 'label',
+      propType: { name: 'string' },
+      required: true,
+      description: 'Text to display inside button',
+    },
+    {
+      property: 'disabled',
+      propType: { name: 'boolean' },
+      required: false,
+      defaultValue: false,
+    },
+    {
+      property: 'onClick',
+      propType: { name: 'function' },
+      description: 'Callback for when button is clicked',
+      required: true,
+      defaultValue: () => {},
+    },
+    {
+      property: 'style',
+      propType: { name: 'object' },
+      description: 'Styles to apply to button',
+      required: false,
+      defaultValue: {},
+    },
+  ];
+  return <TableComponent propDefinitions={propDefs} />;
+};
+arrayProp.story = { name: 'Array prop' };
+
+export const objectProp = () => (
+  <BaseButton
+    label="Button"
+    style={{
+      color: 'midnightblue',
+      backgroundColor: 'powderblue',
+      fontSize: '16px',
+      boxShadow: '1px 1px rgba(0, 0, 0, .07)',
+      borderRadius: '5px',
+      padding: '4px 8px',
+    }}
+  />
+);
+objectProp.story = { name: 'Object prop' };
diff --git a/examples/official-storybook/stories/addon-jest.stories.js b/examples/official-storybook/stories/addon-jest.stories.js
index 34a4cb51141a..b86d7f17b85c 100644
--- a/examples/official-storybook/stories/addon-jest.stories.js
+++ b/examples/official-storybook/stories/addon-jest.stories.js
@@ -1,9 +1,14 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { withTests } from '@storybook/addon-jest';
+import { withTests as withTestsHOC } from '@storybook/addon-jest';
 
 import results from './addon-jest.testresults.json';
 
-storiesOf('Addons|Jest', module)
-  .addDecorator(withTests({ results }))
-  .add('withTests', () => <p>Hello</p>, { jest: 'addon-jest' });
+export default {
+  title: 'Addons|Jest',
+  decorators: [withTestsHOC({ results })],
+};
+
+export const withTests = () => <p>Hello</p>;
+withTests.story = {
+  parameters: { jest: 'addon-jest' },
+};
diff --git a/examples/official-storybook/stories/addon-knobs.stories.js b/examples/official-storybook/stories/addon-knobs.stories.js
index c6f24d0b8615..25622355aacd 100644
--- a/examples/official-storybook/stories/addon-knobs.stories.js
+++ b/examples/official-storybook/stories/addon-knobs.stories.js
@@ -42,9 +42,6 @@ let injectedItems = [];
 let injectedIsLoading = false;
 
 storiesOf('Addons|Knobs.withKnobs', module)
-  .addParameters({
-    component: withKnobs,
-  })
   .addDecorator(withKnobs)
   .add('tweaks static values', () => {
     const name = text('Name', 'Storyteller');
@@ -141,12 +138,14 @@ storiesOf('Addons|Knobs.withKnobs', module)
       GROUP_IDS.GENERAL
     );
     const years = number('Years in NY', 9, {}, GROUP_IDS.GENERAL);
+    const generalNotes = text('Notes', '', GROUP_IDS.GENERAL);
 
     // Favorites
     const nice = boolean('Nice', true, GROUP_IDS.FAVORITES);
     const fruit = select('Fruit', fruits, 'apple', GROUP_IDS.FAVORITES);
     const otherFruit = radios('Other Fruit', otherFruits, 'watermelon', GROUP_IDS.FAVORITES);
     const items = array('Items', ['Laptop', 'Book', 'Whiskey'], ',', GROUP_IDS.FAVORITES);
+    const favoritesNotes = text('Notes', '', GROUP_IDS.FAVORITES);
 
     // Display
     const backgroundColor = color('Color', 'rgba(126, 211, 33, 0.22)', GROUP_IDS.DISPLAY);
@@ -173,6 +172,7 @@ storiesOf('Addons|Knobs.withKnobs', module)
         <p>Birthday: {new Date(birthday).toLocaleDateString('en-US', dateOptions)}</p>
         <p>Account Balance: {dollars}</p>
         <p>Years in NY: {years}</p>
+        <p>Notes: {generalNotes}</p>
         <hr />
         <h1>Favorites</h1>
         <p>Catchphrase: {salutation}</p>
@@ -185,6 +185,7 @@ storiesOf('Addons|Knobs.withKnobs', module)
           ))}
         </ul>
         <p>When I'm by myself, I say: "{ungrouped}"</p>
+        <p>Notes: {favoritesNotes}</p>
       </div>
     );
   })
diff --git a/examples/official-storybook/stories/addon-knobs/with-knobs-options.stories.js b/examples/official-storybook/stories/addon-knobs/with-knobs-options.stories.js
new file mode 100644
index 000000000000..77f24abc2322
--- /dev/null
+++ b/examples/official-storybook/stories/addon-knobs/with-knobs-options.stories.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { withKnobs, text } from '@storybook/addon-knobs';
+
+export default {
+  title: 'Addons|Knobs.withKnobs using options',
+  decorators: [
+    withKnobs({
+      escapeHTML: false,
+    }),
+  ],
+};
+
+export const acceptsOptions = () => <div>{text('Rendered string', '<h1>Hello</h1>')}</div>;
+acceptsOptions.story = {
+  name: 'accepts options',
+};
diff --git a/examples/official-storybook/stories/addon-knobs/with-knobs.stories.js b/examples/official-storybook/stories/addon-knobs/with-knobs.stories.js
new file mode 100644
index 000000000000..b03ae5d218b8
--- /dev/null
+++ b/examples/official-storybook/stories/addon-knobs/with-knobs.stories.js
@@ -0,0 +1,355 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  withKnobs,
+  text,
+  number,
+  boolean,
+  color,
+  select,
+  radios,
+  array,
+  date,
+  button,
+  object,
+  files,
+  optionsKnob as options,
+} from '@storybook/addon-knobs';
+
+const ItemLoader = ({ isLoading, items }) => {
+  if (isLoading) {
+    return <p>Loading data</p>;
+  }
+  if (!items.length) {
+    return <p>No items loaded</p>;
+  }
+  return (
+    <ul>
+      {items.map(i => (
+        <li key={i}>{i}</li>
+      ))}
+    </ul>
+  );
+};
+
+ItemLoader.propTypes = {
+  isLoading: PropTypes.bool.isRequired,
+  items: PropTypes.arrayOf(PropTypes.string).isRequired,
+};
+let injectedItems = [];
+let injectedIsLoading = false;
+
+export default {
+  title: 'Addons|Knobs.withKnobs',
+  decorators: [withKnobs],
+
+  parameters: {
+    component: withKnobs,
+  },
+};
+
+export const tweaksStaticValues = () => {
+  const name = text('Name', 'Storyteller');
+  const age = number('Age', 70, { range: true, min: 0, max: 90, step: 5 });
+  const fruits = {
+    Apple: 'apple',
+    Banana: 'banana',
+    Cherry: 'cherry',
+  };
+  const fruit = select('Fruit', fruits, 'apple');
+
+  const otherFruits = {
+    Kiwi: 'kiwi',
+    Guava: 'guava',
+    Watermelon: 'watermelon',
+  };
+  const otherFruit = radios('Other Fruit', otherFruits, 'watermelon');
+  const dollars = number('Dollars', 12.5, { min: 0, max: 100, step: 0.01 });
+  const years = number('Years in NY', 9);
+
+  const backgroundColor = color('background', '#dedede');
+  const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
+  const otherStyles = object('Styles', {
+    border: '2px dashed silver',
+    borderRadius: 10,
+    padding: '10px',
+  });
+  const nice = boolean('Nice', true);
+  const images = files('Happy Picture', 'image/*', [
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfiARwMCyEWcOFPAAAAP0lEQVQoz8WQMQoAIAwDL/7/z3GwghSp4KDZyiUpBMCYUgd8rehtH16/l3XewgU2KAzapjXBbNFaPS6lDMlKB6OiDv3iAH1OAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE4LTAxLTI4VDEyOjExOjMzLTA3OjAwlAHQBgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOC0wMS0yOFQxMjoxMTozMy0wNzowMOVcaLoAAAAASUVORK5CYII=',
+  ]);
+
+  // NOTE: the default value must not change - e.g., do not do date('Label', new Date()) or date('Label')
+  const defaultBirthday = new Date('Jan 20 2017 GMT+0');
+  const birthday = date('Birthday', defaultBirthday);
+
+  const intro = `My name is ${name}, I'm ${age} years old, and my favorite fruit is ${fruit}. I also enjoy ${otherFruit}.`;
+  const style = { backgroundColor, ...otherStyles };
+  const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
+  const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' };
+
+  return (
+    <div style={style}>
+      <p>{intro}</p>
+      <p>My birthday is: {new Date(birthday).toLocaleDateString('en-US', dateOptions)}</p>
+      <p>I live in NY for {years} years.</p>
+      <p>My wallet contains: ${dollars.toFixed(2)}</p>
+      <p>In my backpack, I have:</p>
+      <ul>
+        {items.map(item => (
+          <li key={item}>{item}</li>
+        ))}
+      </ul>
+      <p>{salutation}</p>
+      <p>
+        When I am happy I look like this: <img src={images[0]} alt="happy" />
+      </p>
+    </div>
+  );
+};
+tweaksStaticValues.story = {
+  name: 'tweaks static values',
+};
+
+export const tweaksStaticValuesOrganizedInGroups = () => {
+  const GROUP_IDS = {
+    DISPLAY: 'Display',
+    GENERAL: 'General',
+    FAVORITES: 'Favorites',
+  };
+
+  const fruits = {
+    Apple: 'apple',
+    Banana: 'banana',
+    Cherry: 'cherry',
+  };
+
+  const otherFruits = {
+    Kiwi: 'kiwi',
+    Guava: 'guava',
+    Watermelon: 'watermelon',
+  };
+
+  // NOTE: the default value must not change - e.g., do not do date('Label', new Date()) or date('Label')
+  const defaultBirthday = new Date('Jan 20 2017 GMT+0');
+
+  // Ungrouped
+  const ungrouped = text('Ungrouped', 'Mumble');
+
+  // General
+  const name = text('Name', 'Storyteller', GROUP_IDS.GENERAL);
+  const age = number('Age', 70, { range: true, min: 0, max: 90, step: 5 }, GROUP_IDS.GENERAL);
+  const birthday = date('Birthday', defaultBirthday, GROUP_IDS.GENERAL);
+  const dollars = number(
+    'Account Balance',
+    12.5,
+    { min: 0, max: 100, step: 0.01 },
+    GROUP_IDS.GENERAL
+  );
+  const years = number('Years in NY', 9, {}, GROUP_IDS.GENERAL);
+
+  // Favorites
+  const nice = boolean('Nice', true, GROUP_IDS.FAVORITES);
+  const fruit = select('Fruit', fruits, 'apple', GROUP_IDS.FAVORITES);
+  const otherFruit = radios('Other Fruit', otherFruits, 'watermelon', GROUP_IDS.FAVORITES);
+  const items = array('Items', ['Laptop', 'Book', 'Whiskey'], ',', GROUP_IDS.FAVORITES);
+
+  // Display
+  const backgroundColor = color('Color', 'rgba(126, 211, 33, 0.22)', GROUP_IDS.DISPLAY);
+  const otherStyles = object(
+    'Styles',
+    {
+      border: '2px dashed silver',
+      borderRadius: 10,
+      padding: '10px',
+    },
+    GROUP_IDS.DISPLAY
+  );
+
+  const style = { backgroundColor, ...otherStyles };
+
+  const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
+  const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' };
+
+  return (
+    <div style={style}>
+      <h1>General Information</h1>
+      <p>Name: {name}</p>
+      <p>Age: {age}</p>
+      <p>Birthday: {new Date(birthday).toLocaleDateString('en-US', dateOptions)}</p>
+      <p>Account Balance: {dollars}</p>
+      <p>Years in NY: {years}</p>
+      <hr />
+      <h1>Favorites</h1>
+      <p>Catchphrase: {salutation}</p>
+      <p>Fruit: {fruit}</p>
+      <p>Other Fruit: {otherFruit}</p>
+      <p>Items:</p>
+      <ul>
+        {items.map(item => (
+          <li key={`${item}`}>{item}</li>
+        ))}
+      </ul>
+      <p>When I'm by myself, I say: "{ungrouped}"</p>
+    </div>
+  );
+};
+tweaksStaticValuesOrganizedInGroups.story = {
+  name: 'tweaks static values organized in groups',
+};
+
+export const dynamicKnobs = () => {
+  const showOptional = select('Show optional', ['yes', 'no'], 'yes');
+  return (
+    <Fragment>
+      <div>{text('compulsory', 'I must be here')}</div>
+      {showOptional === 'yes' ? <div>{text('optional', 'I can disappear')}</div> : null}
+    </Fragment>
+  );
+};
+dynamicKnobs.story = {
+  name: 'dynamic knobs',
+};
+
+export const complexSelect = () => {
+  const m = select(
+    'complex',
+    {
+      number: 1,
+      string: 'string',
+      object: {},
+      array: [1, 2, 3],
+      function: () => {},
+    },
+    'string'
+  );
+  const value = m.toString();
+  const type = Array.isArray(m) ? 'array' : typeof m;
+  return (
+    <pre>
+      the type of {JSON.stringify(value, null, 2)} = {type}
+    </pre>
+  );
+};
+complexSelect.story = {
+  name: 'complex select',
+};
+
+export const optionsKnob = () => {
+  const valuesRadio = {
+    Monday: 'Monday',
+    Tuesday: 'Tuesday',
+    Wednesday: 'Wednesday',
+  };
+  const optionRadio = options('Radio', valuesRadio, 'Tuesday', { display: 'radio' });
+
+  const valuesInlineRadio = {
+    Saturday: 'Saturday',
+    Sunday: 'Sunday',
+  };
+  const optionInlineRadio = options('Inline Radio', valuesInlineRadio, 'Saturday', {
+    display: 'inline-radio',
+  });
+
+  const valuesSelect = {
+    January: 'January',
+    February: 'February',
+    March: 'March',
+  };
+  const optionSelect = options('Select', valuesSelect, 'January', { display: 'select' });
+
+  const valuesMultiSelect = {
+    Apple: 'apple',
+    Banana: 'banana',
+    Cherry: 'cherry',
+  };
+  const optionsMultiSelect = options('Multi Select', valuesMultiSelect, ['apple'], {
+    display: 'multi-select',
+  });
+
+  const valuesCheck = {
+    Corn: 'corn',
+    Carrot: 'carrot',
+    Cucumber: 'cucumber',
+  };
+  const optionsCheck = options('Check', valuesCheck, ['carrot'], { display: 'check' });
+
+  const valuesInlineCheck = {
+    Milk: 'milk',
+    Cheese: 'cheese',
+    Butter: 'butter',
+  };
+  const optionsInlineCheck = options('Inline Check', valuesInlineCheck, ['milk'], {
+    display: 'inline-check',
+  });
+
+  return (
+    <div>
+      <p>Weekday: {optionRadio}</p>
+      <p>Weekend: {optionInlineRadio}</p>
+      <p>Month: {optionSelect}</p>
+      <p>Fruit:</p>
+      <ul>
+        {optionsMultiSelect.map(item => (
+          <li key={item}>{item}</li>
+        ))}
+      </ul>
+      <p>Vegetables:</p>
+      <ul>
+        {optionsCheck.map(item => (
+          <li key={item}>{item}</li>
+        ))}
+      </ul>
+      <p>Dairy:</p>
+      <ul>
+        {optionsInlineCheck.map(item => (
+          <li key={item}>{item}</li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export const triggersActionsViaButton = () => {
+  button('Toggle item list state', () => {
+    if (!injectedIsLoading && injectedItems.length === 0) {
+      injectedIsLoading = true;
+    } else if (injectedIsLoading && injectedItems.length === 0) {
+      injectedIsLoading = false;
+      injectedItems = ['pencil', 'pen', 'eraser'];
+    } else if (injectedItems.length > 0) {
+      injectedItems = [];
+    }
+  });
+  return (
+    <Fragment>
+      <p>Hit the knob button and it will toggle the items list into multiple states.</p>
+      <ItemLoader isLoading={injectedIsLoading} items={injectedItems} />
+    </Fragment>
+  );
+};
+triggersActionsViaButton.story = {
+  name: 'triggers actions via button',
+};
+
+export const xssSafety = () => (
+  <div
+    // eslint-disable-next-line react/no-danger
+    dangerouslySetInnerHTML={{
+      __html: text('Rendered string', '<img src="x" onerror="alert(\'XSS Attack\')" >'),
+    }}
+  />
+);
+xssSafety.story = {
+  name: 'XSS safety',
+};
+
+export const acceptsStoryParameters = () => <div>{text('Rendered string', '<h1>Hello</h1>')}</div>;
+acceptsStoryParameters.story = {
+  name: 'accepts story parameters',
+
+  parameters: {
+    knobs: { escapeHTML: false },
+  },
+};
diff --git a/examples/official-storybook/stories/addon-links.stories.js b/examples/official-storybook/stories/addon-links.stories.js
deleted file mode 100644
index c5f6a148ba6d..000000000000
--- a/examples/official-storybook/stories/addon-links.stories.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import React, { Fragment } from 'react';
-import { storiesOf } from '@storybook/react';
-import { linkTo, hrefTo } from '@storybook/addon-links';
-import { action } from '@storybook/addon-actions';
-
-import LinkTo from '@storybook/addon-links/react';
-
-storiesOf('Addons|Links.Link', module)
-  .add('First', () => <LinkTo story="Second">Go to Second</LinkTo>)
-  .add('Second', () => <LinkTo story="First">Go to First</LinkTo>);
-
-storiesOf('Addons|Links.Button', module)
-  .add('First', () => (
-    <button type="button" onClick={linkTo('Addons|Links.Button', 'Second')}>
-      Go to "Second"
-    </button>
-  ))
-  .add('Second', () => (
-    <button type="button" onClick={linkTo('Addons|Links.Button', 'First')}>
-      Go to "First"
-    </button>
-  ));
-
-storiesOf('Addons|Links.Select', module)
-  .add('Index', () => (
-    <select value="Index" onChange={linkTo('Addons|Links.Select', e => e.currentTarget.value)}>
-      <option>Index</option>
-      <option>First</option>
-      <option>Second</option>
-      <option>Third</option>
-    </select>
-  ))
-  .add('First', () => <LinkTo story="Index">Go back</LinkTo>)
-  .add('Second', () => <LinkTo story="Index">Go back</LinkTo>)
-  .add('Third', () => <LinkTo story="Index">Go back</LinkTo>);
-
-storiesOf('Addons|Links.Href', module).add(
-  'log',
-  () => {
-    hrefTo('Addons|Links.Href', 'log').then(href => action('URL of this story')(href));
-
-    return <span>See action logger</span>;
-  },
-  {
-    options: {
-      panel: 'storybook/actions/panel',
-    },
-  }
-);
-
-storiesOf('Addons|Links.Scroll position', module)
-  .addDecorator(storyFn => (
-    <Fragment>
-      <div style={{ marginBottom: '100vh' }}>Scroll down to see the link</div>
-      {storyFn()}
-    </Fragment>
-  ))
-  .add('First', () => <LinkTo story="Second">Go to Second</LinkTo>)
-  .add('Second', () => <LinkTo story="First">Go to First</LinkTo>);
diff --git a/examples/official-storybook/stories/addon-links/button.stories.js b/examples/official-storybook/stories/addon-links/button.stories.js
new file mode 100644
index 000000000000..6f63a99ed189
--- /dev/null
+++ b/examples/official-storybook/stories/addon-links/button.stories.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { linkTo } from '@storybook/addon-links';
+
+export default {
+  title: 'Addons|Links.Button',
+};
+
+export const First = () => (
+  <button type="button" onClick={linkTo('Addons|Links.Button', 'Second')}>
+    Go to "Second"
+  </button>
+);
+
+export const Second = () => (
+  <button type="button" onClick={linkTo('Addons|Links.Button', 'First')}>
+    Go to "First"
+  </button>
+);
diff --git a/examples/official-storybook/stories/addon-links/href.stories.js b/examples/official-storybook/stories/addon-links/href.stories.js
new file mode 100644
index 000000000000..d2b82ad448e6
--- /dev/null
+++ b/examples/official-storybook/stories/addon-links/href.stories.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { hrefTo } from '@storybook/addon-links';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'Addons|Links.Href',
+};
+
+export const log = () => {
+  hrefTo('Addons|Links.Href', 'log').then(href => action('URL of this story')(href));
+
+  return <span>See action logger</span>;
+};
+log.story = {
+  parameters: {
+    options: {
+      panel: 'storybook/actions/panel',
+    },
+  },
+};
diff --git a/examples/official-storybook/stories/addon-links/link.stories.js b/examples/official-storybook/stories/addon-links/link.stories.js
new file mode 100644
index 000000000000..84d2c457960f
--- /dev/null
+++ b/examples/official-storybook/stories/addon-links/link.stories.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import LinkTo from '@storybook/addon-links/react';
+
+export default {
+  title: 'Addons|Links.Link',
+};
+
+export const First = () => <LinkTo story="Second">Go to Second</LinkTo>;
+export const Second = () => <LinkTo story="First">Go to First</LinkTo>;
diff --git a/examples/official-storybook/stories/addon-links/scroll.stories.js b/examples/official-storybook/stories/addon-links/scroll.stories.js
new file mode 100644
index 000000000000..3b72fac54e1f
--- /dev/null
+++ b/examples/official-storybook/stories/addon-links/scroll.stories.js
@@ -0,0 +1,17 @@
+import React, { Fragment } from 'react';
+import LinkTo from '@storybook/addon-links/react';
+
+export default {
+  title: 'Addons|Links.Scroll position',
+  decorators: [
+    storyFn => (
+      <Fragment>
+        <div style={{ marginBottom: '100vh' }}>Scroll down to see the link</div>
+        {storyFn()}
+      </Fragment>
+    ),
+  ],
+};
+
+export const First = () => <LinkTo story="Second">Go to Second</LinkTo>;
+export const Second = () => <LinkTo story="First">Go to First</LinkTo>;
diff --git a/examples/official-storybook/stories/addon-links/select.stories.js b/examples/official-storybook/stories/addon-links/select.stories.js
new file mode 100644
index 000000000000..5e751f539443
--- /dev/null
+++ b/examples/official-storybook/stories/addon-links/select.stories.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { linkTo } from '@storybook/addon-links';
+import LinkTo from '@storybook/addon-links/react';
+
+export default {
+  title: 'Addons|Links.Select',
+};
+
+export const Index = () => (
+  <select value="Index" onChange={linkTo('Addons|Links.Select', e => e.currentTarget.value)}>
+    <option>Index</option>
+    <option>First</option>
+    <option>Second</option>
+    <option>Third</option>
+  </select>
+);
+
+export const First = () => <LinkTo story="Index">Go back</LinkTo>;
+export const Second = () => <LinkTo story="Index">Go back</LinkTo>;
+export const Third = () => <LinkTo story="Index">Go back</LinkTo>;
diff --git a/examples/official-storybook/stories/addon-notes.stories.js b/examples/official-storybook/stories/addon-notes.stories.js
index 0cc5fe6facf9..178497d939c1 100644
--- a/examples/official-storybook/stories/addon-notes.stories.js
+++ b/examples/official-storybook/stories/addon-notes.stories.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 
 import BaseButton from '../components/BaseButton';
 import markdownNotes from './notes/notes.md';
@@ -72,20 +71,57 @@ const giphyMarkdown = `
 <Giphy query="cheese" />
 `;
 
-storiesOf('Addons|Notes', module)
-  .add('addon notes', baseStory, {
+export default {
+  title: 'Addons|Notes',
+};
+
+export const addonNotes = baseStory;
+
+addonNotes.story = {
+  name: 'addon notes',
+
+  parameters: {
     notes:
       'This is the notes for a button. This is helpful for adding details about a story in a separate panel.',
-  })
-  .add('addon notes rendering imported markdown', baseStory, {
+  },
+};
+
+export const addonNotesRenderingImportedMarkdown = baseStory;
+
+addonNotesRenderingImportedMarkdown.story = {
+  name: 'addon notes rendering imported markdown',
+
+  parameters: {
     notes: { markdown: markdownNotes },
-  })
-  .add('addon notes rendering inline, github-flavored markdown', baseStory, {
+  },
+};
+
+export const addonNotesRenderingInlineGithubFlavoredMarkdown = baseStory;
+
+addonNotesRenderingInlineGithubFlavoredMarkdown.story = {
+  name: 'addon notes rendering inline, github-flavored markdown',
+
+  parameters: {
     notes: { markdown: markdownString },
-  })
-  .add('with a markdown table', baseStory, {
+  },
+};
+
+export const withAMarkdownTable = baseStory;
+
+withAMarkdownTable.story = {
+  name: 'with a markdown table',
+
+  parameters: {
     notes: { markdown: markdownTable },
-  })
-  .add('with a markdown giphy', baseStory, {
+  },
+};
+
+export const withAMarkdownGiphy = baseStory;
+
+withAMarkdownGiphy.story = {
+  name: 'with a markdown giphy',
+
+  parameters: {
     notes: { markdown: giphyMarkdown },
-  });
+  },
+};
diff --git a/examples/official-storybook/stories/addon-options.stories.js b/examples/official-storybook/stories/addon-options.stories.js
index 0c1fdac5c352..6fc0d0296436 100644
--- a/examples/official-storybook/stories/addon-options.stories.js
+++ b/examples/official-storybook/stories/addon-options.stories.js
@@ -1,18 +1,33 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 
-storiesOf('Addons|Options', module)
-  .add('setting name', () => <div>This story should have changed the name of the storybook</div>, {
+export default {
+  title: 'Addons|Options',
+};
+
+export const settingName = () => (
+  <div>This story should have changed the name of the storybook</div>
+);
+
+settingName.story = {
+  name: 'setting name',
+
+  parameters: {
     options: {
       name: 'Custom Storybook',
     },
-  })
-  .add(
-    'hiding addon panel',
-    () => <div>This story should have changed hidden the addons panel</div>,
-    {
-      options: {
-        showPanel: false,
-      },
-    }
-  );
+  },
+};
+
+export const hidingAddonPanel = () => (
+  <div>This story should have changed hidden the addons panel</div>
+);
+
+hidingAddonPanel.story = {
+  name: 'hiding addon panel',
+
+  parameters: {
+    options: {
+      showPanel: false,
+    },
+  },
+};
diff --git a/examples/official-storybook/stories/addon-queryparams.stories.js b/examples/official-storybook/stories/addon-queryparams.stories.js
index 7c32fca677e3..72bf9b7c2c94 100644
--- a/examples/official-storybook/stories/addon-queryparams.stories.js
+++ b/examples/official-storybook/stories/addon-queryparams.stories.js
@@ -1,22 +1,31 @@
 import { document } from 'global';
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { withQuery } from '@storybook/addon-queryparams';
 
-// debugger;
+export default {
+  title: 'Addons|QueryParams',
+  decorators: [withQuery],
 
-storiesOf('Addons|QueryParams', module)
-  .addDecorator(withQuery)
-  .addParameters({
+  parameters: {
     query: {
       mock: true,
     },
-  })
-  .add('mock is true', () => (
-    <div>This story should have an extra url query param: {document.location.search}</div>
-  ))
-  .add(
-    'mock is 4',
-    () => <div>This story should have an extra url query param: {document.location.search}</div>,
-    { query: { mock: 4 } }
-  );
+  },
+};
+
+export const mockIsTrue = () => (
+  <div>This story should have an extra url query param: {document.location.search}</div>
+);
+
+mockIsTrue.story = {
+  name: 'mock is true',
+};
+
+export const mockIs4 = () => (
+  <div>This story should have an extra url query param: {document.location.search}</div>
+);
+
+mockIs4.story = {
+  name: 'mock is 4',
+  parameters: { query: { mock: 4 } },
+};
diff --git a/examples/official-storybook/stories/addon-storyshots.stories.js b/examples/official-storybook/stories/addon-storyshots.stories.js
index ec5bedb61598..9e9c27a10990 100644
--- a/examples/official-storybook/stories/addon-storyshots.stories.js
+++ b/examples/official-storybook/stories/addon-storyshots.stories.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { styled } from '@storybook/theming';
 
 const Block = styled.div({
@@ -9,4 +8,8 @@ const Block = styled.div({
   background: 'hotpink',
 });
 
-storiesOf('Addons|Storyshots', module).add('block', () => <Block />);
+export default {
+  title: 'Addons|Storyshots',
+};
+
+export const block = () => <Block />;
diff --git a/examples/official-storybook/stories/addon-viewport.stories.js b/examples/official-storybook/stories/addon-viewport.stories.js
deleted file mode 100644
index 987764632389..000000000000
--- a/examples/official-storybook/stories/addon-viewport.stories.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-
-import { styled } from '@storybook/theming';
-
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
-
-const Panel = styled.div();
-
-storiesOf('Addons|Viewport', module).add('default', () => (
-  <Panel>I don't have problems being rendered using the default viewport.</Panel>
-));
-
-storiesOf('Addons|Viewport.Custom Default (Kindle Fire 2)', module)
-  .addParameters({
-    viewport: {
-      viewports: {
-        ...INITIAL_VIEWPORTS,
-        kindleFire2: {
-          name: 'Kindle Fire 2',
-          styles: {
-            width: '600px',
-            height: '963px',
-          },
-        },
-      },
-    },
-  })
-  .add('Inherited', () => (
-    <Panel>
-      I've inherited <b>Kindle Fire 2</b> viewport from my parent.
-    </Panel>
-  ))
-  .add(
-    'Overridden via "withViewport" parameterized decorator',
-    () => (
-      <Panel>
-        I respect my parents but I should be looking good on <b>iPad</b>.
-      </Panel>
-    ),
-    { viewport: { defaultViewport: 'ipad' } }
-  )
-  .add('Disabled', () => <Panel>There should be no viewport selector in the toolbar</Panel>, {
-    viewport: { disable: true },
-  });
diff --git a/examples/official-storybook/stories/addon-viewport/custom-default.stories.js b/examples/official-storybook/stories/addon-viewport/custom-default.stories.js
new file mode 100644
index 000000000000..83c8ab021ddd
--- /dev/null
+++ b/examples/official-storybook/stories/addon-viewport/custom-default.stories.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import { styled } from '@storybook/theming';
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+
+const Panel = styled.div();
+
+export default {
+  title: 'Addons|Viewport.Custom Default (Kindle Fire 2)',
+  parameters: {
+    viewport: {
+      viewports: {
+        ...INITIAL_VIEWPORTS,
+        kindleFire2: {
+          name: 'Kindle Fire 2',
+          styles: {
+            width: '600px',
+            height: '963px',
+          },
+        },
+      },
+    },
+  },
+};
+
+export const Inherited = () => (
+  <Panel>
+    I've inherited <b>Kindle Fire 2</b> viewport from my parent.
+  </Panel>
+);
+
+export const overriddenViaWithViewportParameterizedDecorator = () => (
+  <Panel>
+    I respect my parents but I should be looking good on <b>iPad</b>.
+  </Panel>
+);
+overriddenViaWithViewportParameterizedDecorator.story = {
+  name: 'Overridden via "withViewport" parameterized decorator',
+  parameters: { viewport: { defaultViewport: 'ipad' } },
+};
+
+export const Disabled = () => <Panel>There should be no viewport selector in the toolbar</Panel>;
+Disabled.story = {
+  parameters: {
+    viewport: { disable: true },
+  },
+};
diff --git a/examples/official-storybook/stories/addon-viewport/default.stories.js b/examples/official-storybook/stories/addon-viewport/default.stories.js
new file mode 100644
index 000000000000..85739e83d922
--- /dev/null
+++ b/examples/official-storybook/stories/addon-viewport/default.stories.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import { styled } from '@storybook/theming';
+
+const Panel = styled.div();
+
+export default {
+  title: 'Addons|Viewport',
+};
+export const defaultFn = () => (
+  <Panel>I don't have problems being rendered using the default viewport.</Panel>
+);
+defaultFn.story = { name: 'default' };
diff --git a/examples/official-storybook/stories/core/__snapshots__/unicode.stories.storyshot b/examples/official-storybook/stories/core/__snapshots__/unicode.stories.storyshot
deleted file mode 100644
index 8d2102535065..000000000000
--- a/examples/official-storybook/stories/core/__snapshots__/unicode.stories.storyshot
+++ /dev/null
@@ -1,19 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Core|Unicode Кнопки 1`] = `
-<p>
-  нормальный
-</p>
-`;
-
-exports[`Storyshots Core|Unicode 바보 1`] = `
-<p>
-  🤷🏻‍♂️
-</p>
-`;
-
-exports[`Storyshots Core|Unicode 😀 1`] = `
-<p>
-  ❤️
-</p>
-`;
diff --git a/examples/official-storybook/stories/core/decorators.stories.js b/examples/official-storybook/stories/core/decorators.stories.js
index 2edb62f9d66f..314ac9308386 100644
--- a/examples/official-storybook/stories/core/decorators.stories.js
+++ b/examples/official-storybook/stories/core/decorators.stories.js
@@ -27,13 +27,15 @@ export default {
 };
 
 export const all = () => <p>Story</p>;
-all.parameters = {
-  decorators: [
-    s => (
-      <>
-        <p>Local Decorator</p>
-        {s()}
-      </>
-    ),
-  ],
+all.story = {
+  parameters: {
+    decorators: [
+      s => (
+        <>
+          <p>Local Decorator</p>
+          {s()}
+        </>
+      ),
+    ],
+  },
 };
diff --git a/examples/official-storybook/stories/core/errors.stories.js b/examples/official-storybook/stories/core/errors.stories.js
index c1e530833def..962a37a4d458 100644
--- a/examples/official-storybook/stories/core/errors.stories.js
+++ b/examples/official-storybook/stories/core/errors.stories.js
@@ -9,10 +9,12 @@ export default {
 export const exception = () => {
   throw new Error('storyFn threw an error! WHOOPS');
 };
-exception.title = 'story throws exception';
-exception.parameters = {
-  storyshots: { disable: true },
-  chromatic: { disable: true },
+exception.story = {
+  name: 'story throws exception',
+  parameters: {
+    storyshots: { disable: true },
+    chromatic: { disable: true },
+  },
 };
 
 export const badComponent = () => (
@@ -21,17 +23,21 @@ export const badComponent = () => (
     <BadComponent />
   </Fragment>
 );
-badComponent.title = 'story errors - variant error';
-badComponent.parameters = {
-  notes: 'Story does not return something react can render',
-  storyshots: { disable: true },
-  chromatic: { disable: true },
+badComponent.story = {
+  name: 'story errors - variant error',
+  parameters: {
+    notes: 'Story does not return something react can render',
+    storyshots: { disable: true },
+    chromatic: { disable: true },
+  },
 };
 
 export const badStory = () => false;
-badStory.title = 'story errors - story un-renderable type';
-badStory.parameters = {
-  notes: 'Story does not return something react can render',
-  storyshots: { disable: true },
-  chromatic: { disable: true },
+badStory.story = {
+  name: 'story errors - story un-renderable type',
+  parameters: {
+    notes: 'Story does not return something react can render',
+    storyshots: { disable: true },
+    chromatic: { disable: true },
+  },
 };
diff --git a/examples/official-storybook/stories/core/events.stories.js b/examples/official-storybook/stories/core/events.stories.js
index 2cfc555d1054..0b6949d139d6 100644
--- a/examples/official-storybook/stories/core/events.stories.js
+++ b/examples/official-storybook/stories/core/events.stories.js
@@ -14,4 +14,4 @@ export default {
 };
 
 export const force = () => <Button onClick={increment}>Clicked: {timesClicked}</Button>;
-force.title = 'Force re-render';
+force.story = { name: 'Force re-render' };
diff --git a/examples/official-storybook/stories/core/parameters.stories.js b/examples/official-storybook/stories/core/parameters.stories.js
index b5ab588400a5..d32c78d74277 100644
--- a/examples/official-storybook/stories/core/parameters.stories.js
+++ b/examples/official-storybook/stories/core/parameters.stories.js
@@ -19,5 +19,7 @@ export const passed = ({
   // eslint-disable-next-line react/prop-types
   parameters: { options, ...parameters },
 }) => <pre>Parameters are {JSON.stringify(parameters, null, 2)}</pre>;
-passed.title = 'passed to story';
-passed.parameters = { storyParameter: 'storyParameter' };
+passed.story = {
+  name: 'passed to story',
+  parameters: { storyParameter: 'storyParameter' },
+};
diff --git a/examples/official-storybook/stories/core/scroll.stories.js b/examples/official-storybook/stories/core/scroll.stories.js
index 8b1e255497b8..e77afec9ae79 100644
--- a/examples/official-storybook/stories/core/scroll.stories.js
+++ b/examples/official-storybook/stories/core/scroll.stories.js
@@ -14,7 +14,7 @@ export const story1 = () => (
     </pre>
   </div>
 );
-story1.title = 'story with 100vh padding 1';
+story1.story = { name: 'story with 100vh padding 1' };
 
 export const story2 = () => (
   <div>
@@ -26,4 +26,4 @@ export const story2 = () => (
     </pre>
   </div>
 );
-story2.title = 'story with 100vh padding 2';
+story2.story = { name: 'story with 100vh padding 2' };
diff --git a/examples/official-storybook/stories/demo/button.stories.js b/examples/official-storybook/stories/demo/button.stories.js
new file mode 100644
index 000000000000..a232e29bcce4
--- /dev/null
+++ b/examples/official-storybook/stories/demo/button.stories.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { Button } from '@storybook/react/demo';
+
+export default {
+  title: 'Other|Demo/Button',
+  parameters: {
+    component: Button,
+  },
+};
+
+export const withText = () => <Button onClick={action('clicked')}>Hello Button</Button>;
+withText.story = {
+  name: 'with text',
+};
+
+export const withSomeEmoji = () => (
+  <Button onClick={action('clicked')}>
+    <span role="img" aria-label="so cool">
+      😀 😎 👍 💯
+    </span>
+  </Button>
+);
+
+withSomeEmoji.story = {
+  name: 'with some emoji',
+};
diff --git a/examples/official-storybook/stories/demo/welcome.stories.js b/examples/official-storybook/stories/demo/welcome.stories.js
new file mode 100644
index 000000000000..809d2f340122
--- /dev/null
+++ b/examples/official-storybook/stories/demo/welcome.stories.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import { linkTo } from '@storybook/addon-links';
+import { Welcome } from '@storybook/react/demo';
+
+export default {
+  title: 'Other|Demo/Welcome',
+  parameters: {
+    component: Welcome,
+  },
+};
+
+export const toStorybook = () => <Welcome showApp={linkTo('Button')} />;
+toStorybook.story = {
+  name: 'to Storybook',
+};
diff --git a/examples/official-storybook/stories/deprecated/addon-actions.stories.js b/examples/official-storybook/stories/deprecated/addon-actions.stories.js
new file mode 100644
index 000000000000..a907ba9dfb30
--- /dev/null
+++ b/examples/official-storybook/stories/deprecated/addon-actions.stories.js
@@ -0,0 +1,27 @@
+import { window, File } from 'global';
+import React, { Fragment } from 'react';
+import {
+  action,
+  actions,
+  configureActions,
+  decorate,
+  decorateAction,
+} from '@storybook/addon-actions';
+import { Form } from '@storybook/components';
+
+const { Button } = Form;
+
+const pickNative = decorate([args => [args[0].nativeEvent]]);
+const pickNativeAction = decorateAction([args => [args[0].nativeEvent]]);
+
+export default {
+  title: 'Addons|Actions.deprecated',
+};
+
+export const decoratedAction = () => (
+  <Button onClick={pickNativeAction('decorated')}>Native Event</Button>
+);
+
+decoratedAction.story = {
+  name: 'Decorated Action',
+};
diff --git a/examples/official-storybook/stories/deprecated/addon-events.stories.js b/examples/official-storybook/stories/deprecated/addon-events.stories.js
new file mode 100644
index 000000000000..cb832b0c73b9
--- /dev/null
+++ b/examples/official-storybook/stories/deprecated/addon-events.stories.js
@@ -0,0 +1,86 @@
+import React from 'react';
+import EventEmitter from 'eventemitter3';
+import WithEvents from '@storybook/addon-events';
+import Logger from '../Logger';
+
+const EVENTS = {
+  TEST_EVENT_1: 'test-event-1',
+  TEST_EVENT_2: 'test-event-2',
+  TEST_EVENT_3: 'test-event-3',
+  TEST_EVENT_4: 'test-event-4',
+};
+
+const emitter = new EventEmitter();
+const emit = emitter.emit.bind(emitter);
+
+const eventHandler = name => payload => emit(Logger.LOG_EVENT, { name, payload });
+
+Object.keys(EVENTS).forEach(event => emitter.on(EVENTS[event], eventHandler(EVENTS[event])));
+
+const events = [
+  {
+    name: EVENTS.TEST_EVENT_1,
+    title: 'Test event 1',
+    payload: 0,
+  },
+  {
+    name: EVENTS.TEST_EVENT_2,
+    title: 'Test event 2',
+    payload: 'Test event 2',
+  },
+  {
+    name: EVENTS.TEST_EVENT_3,
+    title: 'Test event 3',
+    payload: {
+      string: 'value',
+      number: 123,
+      array: [1, 2, 3],
+      object: {
+        string: 'value',
+        number: 123,
+        array: [1, 2, 3],
+      },
+    },
+  },
+  {
+    name: EVENTS.TEST_EVENT_4,
+    title: 'Test event 4',
+    payload: [
+      {
+        string: 'value',
+        number: 123,
+        array: [1, 2, 3],
+      },
+      {
+        string: 'value',
+        number: 123,
+        array: [1, 2, 3],
+      },
+      {
+        string: 'value',
+        number: 123,
+        array: [1, 2, 3],
+      },
+    ],
+  },
+];
+
+export default {
+  title: 'Addons|Events.deprecated',
+  decorators: [
+    storyFn => (
+      <WithEvents emit={emit} events={events}>
+        {storyFn()}
+      </WithEvents>
+    ),
+  ],
+
+  parameters: {
+    options: {
+      selectedPanel: 'storybook/events/panel',
+    },
+  },
+};
+
+export const logger = () => <Logger emitter={emitter} />;
+logger.story = { name: 'Logger' };
diff --git a/examples/official-storybook/stories/deprecated/addon-info.stories.js b/examples/official-storybook/stories/deprecated/addon-info.stories.js
new file mode 100644
index 000000000000..6de7dd79182f
--- /dev/null
+++ b/examples/official-storybook/stories/deprecated/addon-info.stories.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { withInfo } from '@storybook/addon-info';
+import { action } from '@storybook/addon-actions';
+import BaseButton from '../../components/BaseButton';
+
+import { markdownDescription } from '../addon-info/markdown.stories';
+
+export default {
+  title: 'Addons|Info/deprecated',
+};
+
+export const displaysMarkdown = withInfo(markdownDescription)(() => (
+  <BaseButton onClick={action('clicked')} label="Button" />
+));
+
+displaysMarkdown.story = { name: 'Displays Markdown in description' };
diff --git a/examples/official-storybook/stories/other-demo.stories.js b/examples/official-storybook/stories/other-demo.stories.js
deleted file mode 100644
index 80b486a46400..000000000000
--- a/examples/official-storybook/stories/other-demo.stories.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import { linkTo } from '@storybook/addon-links';
-
-import { Button, Welcome } from '@storybook/react/demo';
-
-storiesOf('Other|Demo/Welcome', module)
-  .addParameters({
-    component: Welcome,
-  })
-  .add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
-
-storiesOf('Other|Demo/Button', module)
-  .addParameters({
-    component: Button,
-  })
-  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
-  .add('with some emoji', () => (
-    <Button onClick={action('clicked')}>
-      <span role="img" aria-label="so cool">
-        😀 😎 👍 💯
-      </span>
-    </Button>
-  ));
diff --git a/examples/official-storybook/stories/other-dirname.stories.js b/examples/official-storybook/stories/other-dirname.stories.js
index e1b20029b7c0..ed0f1e6540f1 100644
--- a/examples/official-storybook/stories/other-dirname.stories.js
+++ b/examples/official-storybook/stories/other-dirname.stories.js
@@ -1,10 +1,16 @@
 import React from 'react';
 import base from 'paths.macro';
 
-import { storiesOf } from '@storybook/react';
-
 import BaseButton from '../components/BaseButton';
 
-storiesOf(`Other|${base}/Dirname Example`, module)
-  .add('story 1', () => <BaseButton label="Story 1" />)
-  .add('story 2', () => <BaseButton label="Story 2" />);
+export const story1 = () => <BaseButton label="Story 1" />;
+
+story1.story = {
+  name: 'story 1',
+};
+
+export const story2 = () => <BaseButton label="Story 2" />;
+
+story2.story = {
+  name: 'story 2',
+};
diff --git a/examples/official-storybook/webpack.config.js b/examples/official-storybook/webpack.config.js
index b027a4b06a0e..bb05ac7a919f 100644
--- a/examples/official-storybook/webpack.config.js
+++ b/examples/official-storybook/webpack.config.js
@@ -39,13 +39,13 @@ module.exports = async ({ config }) => ({
         exclude: [/node_modules/, /dist/],
       },
       {
-        test: /\.stories\.[tj]sx?$/,
-        use: [
-          {
-            loader: require.resolve('@storybook/source-loader'),
-            options: { injectParameters: true },
-          },
-        ],
+        test: /\.stories\.jsx?$/,
+        loader: require.resolve('@storybook/source-loader'),
+        options: {
+          injectParameters: true,
+          inspectLocalDependencies: false,
+          inspectDependencies: false,
+        },
         include: [
           path.resolve(__dirname, './stories'),
           path.resolve(__dirname, '../../lib/ui/src'),
diff --git a/examples/polymer-cli/.storybook/config.js b/examples/polymer-cli/.storybook/config.js
index 4f54cad44601..af962f732066 100644
--- a/examples/polymer-cli/.storybook/config.js
+++ b/examples/polymer-cli/.storybook/config.js
@@ -1,4 +1,4 @@
-import { configure, addParameters, addDecorator } from '@storybook/polymer';
+import { load, addParameters, addDecorator } from '@storybook/polymer';
 import { withA11y } from '@storybook/addon-a11y';
 
 addDecorator(withA11y);
@@ -8,11 +8,4 @@ addParameters({
   },
 });
 
-function loadStories() {
-  require('../src/stories/index.stories');
-
-  const req = require.context('../src/stories', true, /\.stories\.js$/);
-  req.keys().forEach(filename => req(filename));
-}
-
-configure(loadStories, module);
+load(require.context('../src/stories', true, /\.stories\.js$/), module);
diff --git a/examples/polymer-cli/.storybook/webpack.config.js b/examples/polymer-cli/.storybook/webpack.config.js
index 0be010861597..3e7ae19f52be 100644
--- a/examples/polymer-cli/.storybook/webpack.config.js
+++ b/examples/polymer-cli/.storybook/webpack.config.js
@@ -4,7 +4,7 @@ const webpack = require('webpack');
 module.exports = async ({ config }) => {
   config.module.rules.push({
     test: [/\.stories\.js$/, /index\.js$/],
-    loaders: [require.resolve('@storybook/source-loader')],
+    loaders: [require.resolve('@storybook/addon-storysource/loader')],
     include: [path.resolve(__dirname, '../src')],
     enforce: 'pre',
   });
diff --git a/examples/polymer-cli/package.json b/examples/polymer-cli/package.json
index fbce072ef150..b5c149284e40 100644
--- a/examples/polymer-cli/package.json
+++ b/examples/polymer-cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "polymer-cli",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "private": true,
   "scripts": {
     "build-storybook": "build-storybook",
@@ -10,17 +10,17 @@
   },
   "dependencies": {
     "@polymer/polymer": "^2.6.0",
-    "@storybook/addon-a11y": "5.2.0-alpha.30",
-    "@storybook/addon-actions": "5.2.0-alpha.30",
-    "@storybook/addon-backgrounds": "5.2.0-alpha.30",
-    "@storybook/addon-knobs": "5.2.0-alpha.30",
-    "@storybook/addon-links": "5.2.0-alpha.30",
-    "@storybook/addon-notes": "5.2.0-alpha.30",
-    "@storybook/addon-options": "5.2.0-alpha.30",
-    "@storybook/addon-storysource": "5.2.0-alpha.30",
-    "@storybook/addon-viewport": "5.2.0-alpha.30",
-    "@storybook/polymer": "5.2.0-alpha.30",
-    "@storybook/source-loader": "5.2.0-alpha.30",
+    "@storybook/addon-a11y": "5.2.0-alpha.36",
+    "@storybook/addon-actions": "5.2.0-alpha.36",
+    "@storybook/addon-backgrounds": "5.2.0-alpha.36",
+    "@storybook/addon-knobs": "5.2.0-alpha.36",
+    "@storybook/addon-links": "5.2.0-alpha.36",
+    "@storybook/addon-notes": "5.2.0-alpha.36",
+    "@storybook/addon-options": "5.2.0-alpha.36",
+    "@storybook/addon-storysource": "5.2.0-alpha.36",
+    "@storybook/addon-viewport": "5.2.0-alpha.36",
+    "@storybook/polymer": "5.2.0-alpha.36",
+    "@storybook/source-loader": "5.2.0-alpha.36",
     "@webcomponents/webcomponentsjs": "^1.2.0",
     "global": "^4.3.2",
     "lit-html": "^1.0.0",
diff --git a/examples/polymer-cli/src/stories/addon-actions.stories.js b/examples/polymer-cli/src/stories/addon-actions.stories.js
index 3b29471cbc13..9e0ee92c5475 100644
--- a/examples/polymer-cli/src/stories/addon-actions.stories.js
+++ b/examples/polymer-cli/src/stories/addon-actions.stories.js
@@ -1,17 +1,28 @@
-import { storiesOf } from '@storybook/polymer';
 import { action } from '@storybook/addon-actions';
 import { document } from 'global';
 
 import '../simple-button.html';
 
-storiesOf('Addon|Actions', module)
-  .add('Action only', () => {
-    const el = document.createElement('simple-button');
-    el.addEventListener('click', action('log1'));
-    return el;
-  })
-  .add('Action and method', () => {
-    const el = document.createElement('simple-button');
-    el.addEventListener('click', e => action('log2')(e.target));
-    return el;
-  });
+export default {
+  title: 'Addon|Actions',
+};
+
+export const actionOnly = () => {
+  const el = document.createElement('simple-button');
+  el.addEventListener('click', action('log1'));
+  return el;
+};
+
+actionOnly.story = {
+  name: 'Action only',
+};
+
+export const actionAndMethod = () => {
+  const el = document.createElement('simple-button');
+  el.addEventListener('click', e => action('log2')(e.target));
+  return el;
+};
+
+actionAndMethod.story = {
+  name: 'Action and method',
+};
diff --git a/examples/polymer-cli/src/stories/addon-backgrounds.stories.js b/examples/polymer-cli/src/stories/addon-backgrounds.stories.js
index 11ae7370b446..bf7f776d9616 100644
--- a/examples/polymer-cli/src/stories/addon-backgrounds.stories.js
+++ b/examples/polymer-cli/src/stories/addon-backgrounds.stories.js
@@ -1,10 +1,16 @@
-import { storiesOf } from '@storybook/polymer';
+export default {
+  title: 'Addon|Backgrounds',
 
-storiesOf('Addon|Backgrounds', module)
-  .addParameters({
+  parameters: {
     backgrounds: [
       { name: 'light', value: '#eeeeee' },
       { name: 'dark', value: '#222222', default: true },
     ],
-  })
-  .add('button with text', () => '<button>Click me</button>');
+  },
+};
+
+export const buttonWithText = () => '<button>Click me</button>';
+
+buttonWithText.story = {
+  name: 'button with text',
+};
diff --git a/examples/polymer-cli/src/stories/addon-links.stories.js b/examples/polymer-cli/src/stories/addon-links.stories.js
index ee4ecf88660d..e3bb16249e53 100644
--- a/examples/polymer-cli/src/stories/addon-links.stories.js
+++ b/examples/polymer-cli/src/stories/addon-links.stories.js
@@ -1,12 +1,19 @@
-import { storiesOf } from '@storybook/polymer';
 import { linkTo } from '@storybook/addon-links';
 import { document } from 'global';
 
 import '../simple-button.html';
 
-storiesOf('Addon|Links', module).add('With Create Element', () => {
+export default {
+  title: 'Addon|Links',
+};
+
+export const withCreateElement = () => {
   const el = document.createElement('simple-button');
   el.title = 'Go to welcome';
   el.handleClick = linkTo('Welcome');
   return el;
-});
+};
+
+withCreateElement.story = {
+  name: 'With Create Element',
+};
diff --git a/examples/polymer-cli/src/stories/addon-notes.stories.js b/examples/polymer-cli/src/stories/addon-notes.stories.js
index 8263fe9c7762..8c9dcd9a1748 100644
--- a/examples/polymer-cli/src/stories/addon-notes.stories.js
+++ b/examples/polymer-cli/src/stories/addon-notes.stories.js
@@ -1,20 +1,28 @@
-import { storiesOf } from '@storybook/polymer';
+export default {
+  title: 'Addon|Notes',
+};
 
-storiesOf('Addon|Notes', module)
-  .add(
-    'Simple note',
-    () =>
-      '<p><strong>Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.</strong></p>',
-    {
-      notes: 'My notes on some bold text',
-    }
-  )
-  .add('Note with HTML', () => '<p>🤔😳😯😮<br/>😄😩😓😱<br/>🤓😑😶😊</p>', {
+export const simpleNote = () =>
+  '<p><strong>Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.</strong></p>';
+
+simpleNote.story = {
+  name: 'Simple note',
+  parameters: {
+    notes: 'My notes on some bold text',
+  },
+};
+
+export const noteWithHtml = () => '<p>🤔😳😯😮<br/>😄😩😓😱<br/>🤓😑😶😊</p>';
+
+noteWithHtml.story = {
+  name: 'Note with HTML',
+  parameters: {
     notes: `
-      <h2>My notes on emojies</h2>
+        <h2>My notes on emojies</h2>
 
-      <em>It's not all that important to be honest, but..</em>
+        <em>It's not all that important to be honest, but..</em>
 
-      Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
-    `,
-  });
+        Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
+      `,
+  },
+};
diff --git a/examples/polymer-cli/src/stories/components/app.stories.js b/examples/polymer-cli/src/stories/components/app.stories.js
new file mode 100644
index 000000000000..95173e6dc762
--- /dev/null
+++ b/examples/polymer-cli/src/stories/components/app.stories.js
@@ -0,0 +1,11 @@
+import '../../polymer-playground-app.html';
+
+export default {
+  title: 'App',
+};
+
+export const fullApp = () =>
+  '<polymer-playground-app title="Storybook for Polymer"></polymer-playground-app>';
+fullApp.story = {
+  name: 'full app',
+};
diff --git a/examples/polymer-cli/src/stories/components/button.stories.js b/examples/polymer-cli/src/stories/components/button.stories.js
new file mode 100644
index 000000000000..bbea3969239e
--- /dev/null
+++ b/examples/polymer-cli/src/stories/components/button.stories.js
@@ -0,0 +1,8 @@
+import '../../playground-button.html';
+
+export default {
+  title: 'Button',
+};
+
+export const rounded = () => '<playground-button></playground-button>';
+export const square = () => '<playground-button is-square></playground-button>';
diff --git a/examples/polymer-cli/src/stories/components/welcome.stories.js b/examples/polymer-cli/src/stories/components/welcome.stories.js
new file mode 100644
index 000000000000..2113c1bd1049
--- /dev/null
+++ b/examples/polymer-cli/src/stories/components/welcome.stories.js
@@ -0,0 +1,14 @@
+import { linkTo } from '@storybook/addon-links';
+import { document } from 'global';
+
+import '../storybook-welcome-to-polymer.html';
+
+export default {
+  title: 'Welcome',
+};
+
+export const Welcome = () => {
+  const el = document.createElement('storybook-welcome-to-polymer');
+  el.goToButton = linkTo('Button');
+  return el;
+};
diff --git a/examples/polymer-cli/src/stories/core.stories.js b/examples/polymer-cli/src/stories/core.stories.js
index 4fefac0a6df0..96633026df64 100644
--- a/examples/polymer-cli/src/stories/core.stories.js
+++ b/examples/polymer-cli/src/stories/core.stories.js
@@ -1,4 +1,4 @@
-import { storiesOf, addParameters } from '@storybook/polymer';
+import { addParameters } from '@storybook/polymer';
 
 const globalParameter = 'globalParameter';
 const chapterParameter = 'chapterParameter';
@@ -6,13 +6,21 @@ const storyParameter = 'storyParameter';
 
 addParameters({ globalParameter });
 
-storiesOf('Core|Parameters', module)
-  .addParameters({ chapterParameter })
-  .add(
-    'passed to story',
-    ({ parameters: { fileName, ...parameters } }) =>
-      `<div>Parameters are ${JSON.stringify(parameters)}</div>`,
-    {
-      storyParameter,
-    }
-  );
+export default {
+  title: 'Core|Parameters',
+
+  parameters: {
+    chapterParameter,
+  },
+};
+
+export const passedToStory = ({ parameters: { fileName, ...parameters } }) =>
+  `<div>Parameters are ${JSON.stringify(parameters)}</div>`;
+
+passedToStory.story = {
+  name: 'passed to story',
+
+  parameters: {
+    storyParameter,
+  },
+};
diff --git a/examples/polymer-cli/src/stories/custom-decorators.stories.js b/examples/polymer-cli/src/stories/custom-decorators.stories.js
index 158b8be733cc..f83b5575062f 100644
--- a/examples/polymer-cli/src/stories/custom-decorators.stories.js
+++ b/examples/polymer-cli/src/stories/custom-decorators.stories.js
@@ -1,14 +1,23 @@
-import { storiesOf } from '@storybook/polymer';
 import { document } from 'global';
 
-storiesOf('Custom|Decorator', module)
-  .addDecorator(storyFn => {
-    const el = storyFn();
-    el.setAttribute('title', `${el.getAttribute('title')} - decorated`);
-    return el;
-  })
-  .add('example decoration', () => {
-    const el = document.createElement('playground-button');
-    el.setAttribute('title', 'An example title');
-    return el;
-  });
+export default {
+  title: 'Custom|Decorator',
+
+  decorators: [
+    storyFn => {
+      const el = storyFn();
+      el.setAttribute('title', `${el.getAttribute('title')} - decorated`);
+      return el;
+    },
+  ],
+};
+
+export const exampleDecoration = () => {
+  const el = document.createElement('playground-button');
+  el.setAttribute('title', 'An example title');
+  return el;
+};
+
+exampleDecoration.story = {
+  name: 'example decoration',
+};
diff --git a/examples/polymer-cli/src/stories/index.stories.js b/examples/polymer-cli/src/stories/index.stories.js
deleted file mode 100644
index 9dea636686ef..000000000000
--- a/examples/polymer-cli/src/stories/index.stories.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { storiesOf } from '@storybook/polymer';
-import { linkTo } from '@storybook/addon-links';
-import { document } from 'global';
-
-import '../polymer-playground-app.html';
-import '../playground-button.html';
-import './storybook-welcome-to-polymer.html';
-
-storiesOf('Welcome', module).add('Welcome', () => {
-  const el = document.createElement('storybook-welcome-to-polymer');
-  el.goToButton = linkTo('Button');
-  return el;
-});
-
-storiesOf('App', module).add(
-  'full app',
-  () => '<polymer-playground-app title="Storybook for Polymer"></polymer-playground-app>'
-);
-
-storiesOf('Button', module)
-  .add('rounded', () => '<playground-button></playground-button>')
-  .add('square', () => '<playground-button is-square></playground-button>');
diff --git a/examples/preact-kitchen-sink/.storybook/config.js b/examples/preact-kitchen-sink/.storybook/config.js
index 1394b0a1b2b6..abc8f9d4a3e1 100644
--- a/examples/preact-kitchen-sink/.storybook/config.js
+++ b/examples/preact-kitchen-sink/.storybook/config.js
@@ -1,5 +1,5 @@
 /** @jsx h */
-import { addParameters, configure, addDecorator } from '@storybook/preact';
+import { load, addParameters, addDecorator } from '@storybook/preact';
 import { withA11y } from '@storybook/addon-a11y';
 
 addDecorator(withA11y);
@@ -10,12 +10,4 @@ addParameters({
   },
 });
 
-const loadStories = () => {
-  require('../src/stories/index.stories');
-
-  const requireContext = require.context('../src', true, /\.stories\.js$/);
-
-  requireContext.keys().forEach(filename => requireContext(filename));
-};
-
-configure(loadStories, module);
+load(require.context('../src', true, /\.stories\.js$/), module);
diff --git a/examples/preact-kitchen-sink/.storybook/webpack.config.js b/examples/preact-kitchen-sink/.storybook/webpack.config.js
index c8a75926b7ca..46ba330e6665 100644
--- a/examples/preact-kitchen-sink/.storybook/webpack.config.js
+++ b/examples/preact-kitchen-sink/.storybook/webpack.config.js
@@ -3,7 +3,7 @@ const path = require('path');
 module.exports = ({ config }) => {
   config.module.rules.push({
     test: [/\.stories\.js$/],
-    loaders: [require.resolve('@storybook/source-loader')],
+    loaders: [require.resolve('@storybook/addon-storysource/loader')],
     include: [path.resolve(__dirname, '../src')],
     enforce: 'pre',
   });
diff --git a/examples/preact-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot b/examples/preact-kitchen-sink/__snapshots__/preactshots.test.js.snap
similarity index 57%
rename from examples/preact-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot
rename to examples/preact-kitchen-sink/__snapshots__/preactshots.test.js.snap
index 9e0d000a05e2..b2a8566165f5 100644
--- a/examples/preact-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot
+++ b/examples/preact-kitchen-sink/__snapshots__/preactshots.test.js.snap
@@ -1,5 +1,180 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Storyshots Addons|Actions Action and method 1`] = `
+<button
+  class="button"
+  onclick={[Function]}
+>
+  Click me to log the action
+</button>
+`;
+
+exports[`Storyshots Addons|Actions Action only 1`] = `
+<button
+  class="button"
+  onclick={[Function]}
+>
+  Click me to log the action
+</button>
+`;
+
+exports[`Storyshots Addons|Actions Multiple actions 1`] = `
+<button
+  class="button"
+  onclick={[Function]}
+  ondblclick={[Function]}
+>
+  (Double) click me to log the action
+</button>
+`;
+
+exports[`Storyshots Addons|Actions Multiple actions, object 1`] = `
+<button
+  class="button"
+  onclick={[Function]}
+  ondblclick={[Function]}
+>
+  (Double) click me to log the action
+</button>
+`;
+
+exports[`Storyshots Addons|Backgrounds Example 1 1`] = `
+<button
+  class="button"
+>
+  You should be able to switch backgrounds for this story
+</button>
+`;
+
+exports[`Storyshots Addons|Backgrounds Example 2 1`] = `
+<button
+  class="button"
+>
+  This one too!
+</button>
+`;
+
+exports[`Storyshots Addons|Centered Button  1`] = `
+<div
+  style={
+    Object {
+      "alignItems": "center",
+      "bottom": "0",
+      "display": "flex",
+      "left": "0",
+      "overflow": "auto",
+      "position": "fixed",
+      "right": "0",
+      "top": "0",
+    }
+  }
+>
+  <div
+    style={
+      Object {
+        "margin": "auto",
+        "maxHeight": "100%",
+      }
+    }
+  >
+    <button
+      class="button"
+    >
+      A button
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Addons|Contexts Simple CSS Theming 1`] = `
+<div
+  style={
+    Object {
+      "background": "#173F5F",
+      "color": "white",
+      "height": "100vh",
+      "padding": "10px",
+    }
+  }
+>
+  <div>
+    I'm a children of the injected 'div' (where provides a theming context).
+  </div>
+</div>
+`;
+
+exports[`Storyshots Addons|Knobs All knobs 1`] = `
+<div
+  style="border:2px dotted deeppink; padding: 8px 22px; border-radius: 8px"
+>
+  <h1>
+    My name is Jane,
+  </h1>
+  <h3>
+    today is January 20, 2017
+  </h3>
+  <p>
+    I have a stock of 20 apples, costing &dollar;2.25 each.
+  </p>
+  <p>
+    Also, I have:
+  </p>
+  <ul>
+    <li>
+      Laptop
+    </li>
+    <li>
+      Book
+    </li>
+    <li>
+      Whiskey
+    </li>
+  </ul>
+  <p>
+    Nice to meet you!
+  </p>
+</div>
+`;
+
+exports[`Storyshots Addons|Knobs Simple 1`] = `
+<div>
+  I am John Doe and I'm 44 years old.
+</div>
+`;
+
+exports[`Storyshots Addons|Links Go to welcome 1`] = `
+<button
+  class="button"
+  onclick={[Function]}
+>
+  This button links to Welcome
+</button>
+`;
+
+exports[`Storyshots Addons|Notes Note with HTML 1`] = `
+<p>
+  <span>
+    🤔😳😯😮
+  </span>
+  <br />
+  <span>
+    😄😩😓😱
+  </span>
+  <br />
+  <span>
+    🤓😑😶😊
+  </span>
+</p>
+`;
+
+exports[`Storyshots Addons|Notes Simple note 1`] = `
+<p>
+  <strong>
+    Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.
+  </strong>
+</p>
+`;
+
 exports[`Storyshots Button with some emoji 1`] = `
 <button
   class="button"
diff --git a/examples/preact-kitchen-sink/package.json b/examples/preact-kitchen-sink/package.json
index ee28667207a5..594e2266b3dc 100644
--- a/examples/preact-kitchen-sink/package.json
+++ b/examples/preact-kitchen-sink/package.json
@@ -1,6 +1,6 @@
 {
   "name": "preact-example",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "private": true,
   "scripts": {
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
@@ -16,21 +16,21 @@
   "devDependencies": {
     "@babel/core": "^7.3.4",
     "@babel/plugin-transform-runtime": "^7.2.0",
-    "@storybook/addon-a11y": "5.2.0-alpha.30",
-    "@storybook/addon-actions": "5.2.0-alpha.30",
-    "@storybook/addon-backgrounds": "5.2.0-alpha.30",
-    "@storybook/addon-centered": "5.2.0-alpha.30",
-    "@storybook/addon-contexts": "5.2.0-alpha.30",
-    "@storybook/addon-knobs": "5.2.0-alpha.30",
-    "@storybook/addon-links": "5.2.0-alpha.30",
-    "@storybook/addon-notes": "5.2.0-alpha.30",
-    "@storybook/addon-options": "5.2.0-alpha.30",
-    "@storybook/addon-storyshots": "5.2.0-alpha.30",
-    "@storybook/addon-storysource": "5.2.0-alpha.30",
-    "@storybook/addon-viewport": "5.2.0-alpha.30",
-    "@storybook/addons": "5.2.0-alpha.30",
-    "@storybook/preact": "5.2.0-alpha.30",
-    "@storybook/source-loader": "5.2.0-alpha.30",
+    "@storybook/addon-a11y": "5.2.0-alpha.36",
+    "@storybook/addon-actions": "5.2.0-alpha.36",
+    "@storybook/addon-backgrounds": "5.2.0-alpha.36",
+    "@storybook/addon-centered": "5.2.0-alpha.36",
+    "@storybook/addon-contexts": "5.2.0-alpha.36",
+    "@storybook/addon-knobs": "5.2.0-alpha.36",
+    "@storybook/addon-links": "5.2.0-alpha.36",
+    "@storybook/addon-notes": "5.2.0-alpha.36",
+    "@storybook/addon-options": "5.2.0-alpha.36",
+    "@storybook/addon-storyshots": "5.2.0-alpha.36",
+    "@storybook/addon-storysource": "5.2.0-alpha.36",
+    "@storybook/addon-viewport": "5.2.0-alpha.36",
+    "@storybook/addons": "5.2.0-alpha.36",
+    "@storybook/preact": "5.2.0-alpha.36",
+    "@storybook/source-loader": "5.2.0-alpha.36",
     "babel-loader": "^8.0.4",
     "cross-env": "^5.2.0",
     "file-loader": "^3.0.1",
diff --git a/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot b/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot
deleted file mode 100644
index aa941ace1975..000000000000
--- a/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot
+++ /dev/null
@@ -1,39 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|Actions Action and method 1`] = `
-<button
-  class="button"
-  onclick={[Function]}
->
-  Click me to log the action
-</button>
-`;
-
-exports[`Storyshots Addons|Actions Action only 1`] = `
-<button
-  class="button"
-  onclick={[Function]}
->
-  Click me to log the action
-</button>
-`;
-
-exports[`Storyshots Addons|Actions Multiple actions 1`] = `
-<button
-  class="button"
-  onclick={[Function]}
-  ondblclick={[Function]}
->
-  (Double) click me to log the action
-</button>
-`;
-
-exports[`Storyshots Addons|Actions Multiple actions, object 1`] = `
-<button
-  class="button"
-  onclick={[Function]}
-  ondblclick={[Function]}
->
-  (Double) click me to log the action
-</button>
-`;
diff --git a/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-backgrounds.stories.storyshot b/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-backgrounds.stories.storyshot
deleted file mode 100644
index 82a8e7a135eb..000000000000
--- a/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-backgrounds.stories.storyshot
+++ /dev/null
@@ -1,17 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|Backgrounds Example 1 1`] = `
-<button
-  class="button"
->
-  You should be able to switch backgrounds for this story
-</button>
-`;
-
-exports[`Storyshots Addons|Backgrounds Example 2 1`] = `
-<button
-  class="button"
->
-  This one too!
-</button>
-`;
diff --git a/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-centered.stories.storyshot b/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-centered.stories.storyshot
deleted file mode 100644
index 665531383967..000000000000
--- a/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-centered.stories.storyshot
+++ /dev/null
@@ -1,33 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|Centered Button 1`] = `
-<div
-  style={
-    Object {
-      "alignItems": "center",
-      "bottom": "0",
-      "display": "flex",
-      "left": "0",
-      "overflow": "auto",
-      "position": "fixed",
-      "right": "0",
-      "top": "0",
-    }
-  }
->
-  <div
-    style={
-      Object {
-        "margin": "auto",
-        "maxHeight": "100%",
-      }
-    }
-  >
-    <button
-      class="button"
-    >
-      A button
-    </button>
-  </div>
-</div>
-`;
diff --git a/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-contexts.stories.storyshot b/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-contexts.stories.storyshot
deleted file mode 100644
index 8e9fe610526f..000000000000
--- a/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-contexts.stories.storyshot
+++ /dev/null
@@ -1,18 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|Contexts Simple CSS Theming 1`] = `
-<div
-  style={
-    Object {
-      "background": "#173F5F",
-      "color": "white",
-      "height": "100vh",
-      "padding": "10px",
-    }
-  }
->
-  <div>
-    I'm a children of the injected 'div' (where provides a theming context).
-  </div>
-</div>
-`;
diff --git a/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot b/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot
deleted file mode 100644
index efbb8b520b25..000000000000
--- a/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot
+++ /dev/null
@@ -1,40 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|Knobs All knobs 1`] = `
-<div
-  style="border:2px dotted deeppink; padding: 8px 22px; border-radius: 8px"
->
-  <h1>
-    My name is Jane,
-  </h1>
-  <h3>
-    today is January 20, 2017
-  </h3>
-  <p>
-    I have a stock of 20 apples, costing &dollar;2.25 each.
-  </p>
-  <p>
-    Also, I have:
-  </p>
-  <ul>
-    <li>
-      Laptop
-    </li>
-    <li>
-      Book
-    </li>
-    <li>
-      Whiskey
-    </li>
-  </ul>
-  <p>
-    Nice to meet you!
-  </p>
-</div>
-`;
-
-exports[`Storyshots Addons|Knobs Simple 1`] = `
-<div>
-  I am John Doe and I'm 44 years old.
-</div>
-`;
diff --git a/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-links.stories.storyshot b/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-links.stories.storyshot
deleted file mode 100644
index 6696d465f097..000000000000
--- a/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-links.stories.storyshot
+++ /dev/null
@@ -1,10 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|Links Go to welcome 1`] = `
-<button
-  class="button"
-  onclick={[Function]}
->
-  This button links to Welcome
-</button>
-`;
diff --git a/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot b/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot
deleted file mode 100644
index fbbf169e2064..000000000000
--- a/examples/preact-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot
+++ /dev/null
@@ -1,25 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|Notes Note with HTML 1`] = `
-<p>
-  <span>
-    🤔😳😯😮
-  </span>
-  <br />
-  <span>
-    😄😩😓😱
-  </span>
-  <br />
-  <span>
-    🤓😑😶😊
-  </span>
-</p>
-`;
-
-exports[`Storyshots Addons|Notes Simple note 1`] = `
-<p>
-  <strong>
-    Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.
-  </strong>
-</p>
-`;
diff --git a/examples/preact-kitchen-sink/src/stories/addon-actions.stories.js b/examples/preact-kitchen-sink/src/stories/addon-actions.stories.js
index dfd9b9ddc544..d673f08625b1 100644
--- a/examples/preact-kitchen-sink/src/stories/addon-actions.stories.js
+++ b/examples/preact-kitchen-sink/src/stories/addon-actions.stories.js
@@ -2,27 +2,48 @@
 
 import { h } from 'preact';
 
-import { storiesOf } from '@storybook/preact';
 import { action, actions } from '@storybook/addon-actions';
 import Button from '../Button';
 
-storiesOf('Addons|Actions', module)
-  .add('Action only', () => <Button onclick={action('log')}>Click me to log the action</Button>)
-  .add('Multiple actions', () => (
-    <Button {...actions('onclick', 'ondblclick')}>(Double) click me to log the action</Button>
-  ))
-  .add('Multiple actions, object', () => (
-    <Button {...actions({ onclick: 'click', ondblclick: 'double-click' })}>
-      (Double) click me to log the action
-    </Button>
-  ))
-  .add('Action and method', () => (
-    <Button
-      onclick={event => {
-        event.preventDefault();
-        action('method-log')(event.target);
-      }}
-    >
-      Click me to log the action
-    </Button>
-  ));
+export default {
+  title: 'Addons|Actions',
+};
+
+export const actionOnly = () => <Button onclick={action('log')}>Click me to log the action</Button>;
+
+actionOnly.story = {
+  name: 'Action only',
+};
+
+export const multipleActions = () => (
+  <Button {...actions('onclick', 'ondblclick')}>(Double) click me to log the action</Button>
+);
+
+multipleActions.story = {
+  name: 'Multiple actions',
+};
+
+export const multipleActionsObject = () => (
+  <Button {...actions({ onclick: 'click', ondblclick: 'double-click' })}>
+    (Double) click me to log the action
+  </Button>
+);
+
+multipleActionsObject.story = {
+  name: 'Multiple actions, object',
+};
+
+export const actionAndMethod = () => (
+  <Button
+    onclick={event => {
+      event.preventDefault();
+      action('method-log')(event.target);
+    }}
+  >
+    Click me to log the action
+  </Button>
+);
+
+actionAndMethod.story = {
+  name: 'Action and method',
+};
diff --git a/examples/preact-kitchen-sink/src/stories/addon-backgrounds.stories.js b/examples/preact-kitchen-sink/src/stories/addon-backgrounds.stories.js
index 185665961421..844af43ad487 100644
--- a/examples/preact-kitchen-sink/src/stories/addon-backgrounds.stories.js
+++ b/examples/preact-kitchen-sink/src/stories/addon-backgrounds.stories.js
@@ -2,16 +2,29 @@
 
 import { h } from 'preact';
 
-import { storiesOf } from '@storybook/preact';
-
 import Button from '../Button';
 
-storiesOf('Addons|Backgrounds', module)
-  .addParameters({
+export default {
+  title: 'Addons|Backgrounds',
+
+  parameters: {
     backgrounds: [
       { name: 'twitter', value: '#00aced' },
       { name: 'facebook', value: '#3b5998', default: true },
     ],
-  })
-  .add('Example 1', () => <Button>You should be able to switch backgrounds for this story</Button>)
-  .add('Example 2', () => <Button>This one too!</Button>);
+  },
+};
+
+export const example1 = () => (
+  <Button>You should be able to switch backgrounds for this story</Button>
+);
+
+example1.story = {
+  name: 'Example 1',
+};
+
+export const example2 = () => <Button>This one too!</Button>;
+
+example2.story = {
+  name: 'Example 2',
+};
diff --git a/examples/preact-kitchen-sink/src/stories/addon-centered.stories.js b/examples/preact-kitchen-sink/src/stories/addon-centered.stories.js
index dd02c14b3c34..3af8adceef40 100644
--- a/examples/preact-kitchen-sink/src/stories/addon-centered.stories.js
+++ b/examples/preact-kitchen-sink/src/stories/addon-centered.stories.js
@@ -2,13 +2,17 @@
 
 import { h } from 'preact';
 
-import { storiesOf } from '@storybook/preact';
 import Centered from '@storybook/addon-centered/preact';
 import Button from '../Button';
 
-storiesOf('Addons|Centered', module)
-  .addParameters({
+export default {
+  title: 'Addons|Centered',
+  decorators: [Centered],
+
+  parameters: {
     component: Centered,
-  })
-  .addDecorator(Centered)
-  .add('Button', () => <Button>A button</Button>);
+  },
+};
+
+export const button = () => <Button>A button</Button>;
+button.story = { name: 'Button ' };
diff --git a/examples/preact-kitchen-sink/src/stories/addon-contexts.stories.js b/examples/preact-kitchen-sink/src/stories/addon-contexts.stories.js
index cb20874a7279..2fad6842ffc3 100644
--- a/examples/preact-kitchen-sink/src/stories/addon-contexts.stories.js
+++ b/examples/preact-kitchen-sink/src/stories/addon-contexts.stories.js
@@ -1,6 +1,5 @@
 /** @jsx h */
 import { h } from 'preact';
-import { storiesOf } from '@storybook/preact';
 import { withContexts } from '@storybook/addon-contexts/preact';
 
 // Example A: Simple CSS Theming
@@ -41,60 +40,19 @@ const storyLevelContexts = [
   },
 ];
 
-const stories = storiesOf('Addons|Contexts', module).addDecorator(withContexts(topLevelContexts));
+export default {
+  title: 'Addons|Contexts',
+  decorators: [withContexts(topLevelContexts)],
+};
 
-stories.add(
-  'Simple CSS Theming',
-  () => <div>I'm a children of the injected 'div' (where provides a theming context).</div>,
-  {
-    contexts: storyLevelContexts,
-  }
+export const simpleCssTheming = () => (
+  <div>I'm a children of the injected 'div' (where provides a theming context).</div>
 );
 
-// TODO: uncomment code block after the adaption of Preact X (need to be imported)
-// Example B: Language (Preact X contextAPI)
-// const NaiveIntlContext = createContext({
-//   locale: 'unknown',
-//   greeting: 'NULL',
-// });
-//
-// stories.add(
-//   'Languages',
-//   () => (
-//     <NaiveIntlContext.Consumer>
-//       {({ locale, greeting }) => `Your locale is "${locale}", so I say "${greeting}"!`}
-//     </NaiveIntlContext.Consumer>
-//   ),
-//   {
-//     contexts: [
-//       {
-//         icon: 'globe',
-//         title: 'Languages',
-//         components: [NaiveIntlContext.Provider],
-//         params: [
-//           {
-//             name: 'English',
-//             props: {
-//               value: { locale: 'en', greeting: 'Hello' },
-//             },
-//           },
-//           {
-//             name: 'French',
-//             props: {
-//               value: { locale: 'fr', greeting: 'Bonjour' },
-//             },
-//           },
-//           {
-//             name: 'Chinese',
-//             props: {
-//               value: { locale: 'cn', greeting: '你好' },
-//             },
-//           },
-//         ],
-//         options: {
-//           cancelable: true,
-//         },
-//       },
-//     ],
-//   }
-// );
+simpleCssTheming.story = {
+  name: 'Simple CSS Theming',
+
+  parameters: {
+    contexts: storyLevelContexts,
+  },
+};
diff --git a/examples/preact-kitchen-sink/src/stories/addon-knobs.stories.js b/examples/preact-kitchen-sink/src/stories/addon-knobs.stories.js
index ac6e18626e29..b06af614d223 100644
--- a/examples/preact-kitchen-sink/src/stories/addon-knobs.stories.js
+++ b/examples/preact-kitchen-sink/src/stories/addon-knobs.stories.js
@@ -2,7 +2,6 @@
 
 import { h } from 'preact';
 
-import { storiesOf } from '@storybook/preact';
 import { action } from '@storybook/addon-actions';
 import {
   withKnobs,
@@ -16,56 +15,64 @@ import {
   button,
 } from '@storybook/addon-knobs';
 
-storiesOf('Addons|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.`;
+export default {
+  title: 'Addons|Knobs',
+  decorators: [withKnobs],
+};
 
-    return <div>{content}</div>;
-  })
-  .add('All knobs', () => {
-    const name = text('Name', 'Jane');
-    const stock = number('Stock', 20, {
-      range: true,
-      min: 0,
-      max: 30,
-      step: 5,
-    });
-    const fruits = {
-      Apple: 'apples',
-      Banana: 'bananas',
-      Cherry: 'cherries',
-    };
-    const fruit = select('Fruit', fruits, 'apples');
-    const price = number('Price', 2.25);
+export const Simple = () => {
+  const name = text('Name', 'John Doe');
+  const age = number('Age', 44);
+  const content = `I am ${name} and I'm ${age} years old.`;
 
-    const colour = color('Border', 'deeppink');
-    const today = date('Today', new Date('Jan 20 2017 GMT+0'));
-    const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
-    const nice = boolean('Nice', true);
+  return <div>{content}</div>;
+};
 
-    const stockMessage = stock
-      ? `I have a stock of ${stock} ${fruit}, costing &dollar;${price} each.`
-      : `I'm out of ${fruit}${nice ? ', Sorry!' : '.'}`;
-    const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
-    const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' };
+export const allKnobs = () => {
+  const name = text('Name', 'Jane');
+  const stock = number('Stock', 20, {
+    range: true,
+    min: 0,
+    max: 30,
+    step: 5,
+  });
+  const fruits = {
+    Apple: 'apples',
+    Banana: 'bananas',
+    Cherry: 'cherries',
+  };
+  const fruit = select('Fruit', fruits, 'apples');
+  const price = number('Price', 2.25);
 
-    button('Arbitrary action', action('You clicked it!'));
+  const colour = color('Border', 'deeppink');
+  const today = date('Today', new Date('Jan 20 2017 GMT+0'));
+  const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
+  const nice = boolean('Nice', true);
 
-    return (
-      <div style={`border:2px dotted ${colour}; padding: 8px 22px; border-radius: 8px`}>
-        <h1>My name is {name},</h1>
-        <h3>today is {new Date(today).toLocaleDateString('en-US', dateOptions)}</h3>
-        <p>{stockMessage}</p>
-        <p>Also, I have:</p>
-        <ul>
-          {items.map(item => (
-            <li key={item}>{item}</li>
-          ))}
-        </ul>
-        <p>{salutation}</p>
-      </div>
-    );
-  });
+  const stockMessage = stock
+    ? `I have a stock of ${stock} ${fruit}, costing &dollar;${price} each.`
+    : `I'm out of ${fruit}${nice ? ', Sorry!' : '.'}`;
+  const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
+  const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' };
+
+  button('Arbitrary action', action('You clicked it!'));
+
+  return (
+    <div style={`border:2px dotted ${colour}; padding: 8px 22px; border-radius: 8px`}>
+      <h1>My name is {name},</h1>
+      <h3>today is {new Date(today).toLocaleDateString('en-US', dateOptions)}</h3>
+      <p>{stockMessage}</p>
+      <p>Also, I have:</p>
+      <ul>
+        {items.map(item => (
+          <li key={item}>{item}</li>
+        ))}
+      </ul>
+      <p>{salutation}</p>
+    </div>
+  );
+};
+
+allKnobs.story = {
+  name: 'All knobs',
+};
diff --git a/examples/preact-kitchen-sink/src/stories/addon-links.stories.js b/examples/preact-kitchen-sink/src/stories/addon-links.stories.js
index 470cd246650d..c1ab6fd55243 100644
--- a/examples/preact-kitchen-sink/src/stories/addon-links.stories.js
+++ b/examples/preact-kitchen-sink/src/stories/addon-links.stories.js
@@ -2,11 +2,18 @@
 
 import { h } from 'preact';
 
-import { storiesOf } from '@storybook/preact';
 import { linkTo } from '@storybook/addon-links';
 
 import Button from '../Button';
 
-storiesOf('Addons|Links', module).add('Go to welcome', () => (
+export default {
+  title: 'Addons|Links',
+};
+
+export const goToWelcome = () => (
   <Button onclick={linkTo('Welcome')}>This button links to Welcome</Button>
-));
+);
+
+goToWelcome.story = {
+  name: 'Go to welcome',
+};
diff --git a/examples/preact-kitchen-sink/src/stories/addon-notes.stories.js b/examples/preact-kitchen-sink/src/stories/addon-notes.stories.js
index 198f425fa4bf..bec417849127 100644
--- a/examples/preact-kitchen-sink/src/stories/addon-notes.stories.js
+++ b/examples/preact-kitchen-sink/src/stories/addon-notes.stories.js
@@ -2,45 +2,51 @@
 
 import { h } from 'preact';
 
-import { storiesOf } from '@storybook/preact';
 import { withNotes } from '@storybook/addon-notes';
 
-storiesOf('Addons|Notes', module)
-  .addDecorator(withNotes)
-  .add(
-    'Simple note',
-    () => (
-      <p>
-        <strong>
-          Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed
-          vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec
-          consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus
-          arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at
-          fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam,
-          efficitur pulvinar mi urna id urna.
-        </strong>
-      </p>
-    ),
-    { notes: 'My notes on some bold text' }
-  )
-  .add(
-    'Note with HTML',
-    () => (
-      <p>
-        <span>🤔😳😯😮</span>
-        <br />
-        <span>😄😩😓😱</span>
-        <br />
-        <span>🤓😑😶😊</span>
-      </p>
-    ),
-    {
-      notes: `
-      <h2>My notes on emojies</h2>
-
-      <em>It's not all that important to be honest, but..</em>
-
-      Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
-    `,
-    }
-  );
+export default {
+  title: 'Addons|Notes',
+  decorators: [withNotes],
+};
+
+export const simpleNote = () => (
+  <p>
+    <strong>
+      Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed
+      vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur
+      velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit
+      amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla
+      sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna
+      id urna.
+    </strong>
+  </p>
+);
+
+simpleNote.story = {
+  name: 'Simple note',
+  parameters: { notes: 'My notes on some bold text' },
+};
+
+export const noteWithHtml = () => (
+  <p>
+    <span>🤔😳😯😮</span>
+    <br />
+    <span>😄😩😓😱</span>
+    <br />
+    <span>🤓😑😶😊</span>
+  </p>
+);
+
+noteWithHtml.story = {
+  name: 'Note with HTML',
+
+  parameters: {
+    notes: `
+    <h2>My notes on emojies</h2>
+
+    <em>It's not all that important to be honest, but..</em>
+
+    Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
+  `,
+  },
+};
diff --git a/examples/preact-kitchen-sink/src/stories/button.stories.js b/examples/preact-kitchen-sink/src/stories/button.stories.js
new file mode 100644
index 000000000000..193b7310393c
--- /dev/null
+++ b/examples/preact-kitchen-sink/src/stories/button.stories.js
@@ -0,0 +1,32 @@
+/** @jsx h */
+
+import { h } from 'preact';
+import { action } from '@storybook/addon-actions';
+
+import Button from '../Button';
+
+export default {
+  title: 'Button',
+
+  parameters: {
+    component: Button,
+  },
+};
+
+export const withText = () => <Button onclick={action('clicked')}>Hello Button</Button>;
+
+withText.story = {
+  name: 'with text',
+};
+
+export const withSomeEmoji = () => (
+  <Button onclick={action('clicked')}>
+    <span role="img" aria-label="so cool">
+      😀 😎 👍 💯
+    </span>
+  </Button>
+);
+
+withSomeEmoji.story = {
+  name: 'with some emoji',
+};
diff --git a/examples/preact-kitchen-sink/src/stories/index.stories.js b/examples/preact-kitchen-sink/src/stories/index.stories.js
deleted file mode 100644
index 7f64391f913a..000000000000
--- a/examples/preact-kitchen-sink/src/stories/index.stories.js
+++ /dev/null
@@ -1,29 +0,0 @@
-/** @jsx h */
-
-import { h } from 'preact';
-
-import { storiesOf } from '@storybook/preact';
-import { action } from '@storybook/addon-actions';
-import { linkTo } from '@storybook/addon-links';
-
-import Welcome from '../Welcome';
-import Button from '../Button';
-
-storiesOf('Welcome', module)
-  .addParameters({
-    component: Welcome,
-  })
-  .add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
-
-storiesOf('Button', module)
-  .addParameters({
-    component: Button,
-  })
-  .add('with text', () => <Button onclick={action('clicked')}>Hello Button</Button>)
-  .add('with some emoji', () => (
-    <Button onclick={action('clicked')}>
-      <span role="img" aria-label="so cool">
-        😀 😎 👍 💯
-      </span>
-    </Button>
-  ));
diff --git a/examples/preact-kitchen-sink/src/stories/welcome.stories.js b/examples/preact-kitchen-sink/src/stories/welcome.stories.js
new file mode 100644
index 000000000000..1a996cfe809b
--- /dev/null
+++ b/examples/preact-kitchen-sink/src/stories/welcome.stories.js
@@ -0,0 +1,19 @@
+/** @jsx h */
+
+import { h } from 'preact';
+import { linkTo } from '@storybook/addon-links';
+
+import Welcome from '../Welcome';
+
+export default {
+  title: 'Welcome',
+  parameters: {
+    component: Welcome,
+  },
+};
+
+export const toStorybook = () => <Welcome showApp={linkTo('Button')} />;
+
+toStorybook.story = {
+  name: 'to Storybook',
+};
diff --git a/examples/rax-kitchen-sink/.storybook/config.js b/examples/rax-kitchen-sink/.storybook/config.js
index 4e9f0a1a1edd..b94a39df032b 100644
--- a/examples/rax-kitchen-sink/.storybook/config.js
+++ b/examples/rax-kitchen-sink/.storybook/config.js
@@ -1,4 +1,4 @@
-import { configure, addParameters } from '@storybook/rax';
+import { load, addParameters } from '@storybook/rax';
 
 addParameters({
   options: {
@@ -15,13 +15,4 @@ addParameters({
   },
 });
 
-function loadStories() {
-  // put welcome screen at the top of the list so it's the first one displayed
-  require('../src/stories/index.stories');
-
-  // automatically import all story js files that end with *.stories.js
-  const req = require.context('../src/stories', true, /\.stories\.js$/);
-  req.keys().forEach(filename => req(filename));
-}
-
-configure(loadStories, module);
+load(require.context('../src/stories', true, /\.stories\.js$/), module);
diff --git a/examples/rax-kitchen-sink/.storybook/webpack.config.js b/examples/rax-kitchen-sink/.storybook/webpack.config.js
index 39dff33950d1..99e298d739f2 100644
--- a/examples/rax-kitchen-sink/.storybook/webpack.config.js
+++ b/examples/rax-kitchen-sink/.storybook/webpack.config.js
@@ -5,7 +5,7 @@ module.exports = {
     rules: [
       {
         test: [/\.stories\.js$/, /index\.js$/],
-        loaders: [require.resolve('@storybook/source-loader')],
+        loaders: [require.resolve('@storybook/addon-storysource/loader')],
         include: [path.resolve(__dirname, '../src')],
         enforce: 'pre',
       },
diff --git a/examples/rax-kitchen-sink/package.json b/examples/rax-kitchen-sink/package.json
index c74a2e92e10b..97d2afe1bdcd 100644
--- a/examples/rax-kitchen-sink/package.json
+++ b/examples/rax-kitchen-sink/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rax-kitchen-sink",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "private": true,
   "scripts": {
     "test:generate-output": "jest --json --outputFile=jest-test-results.json --config=./jest-addon.config.js",
@@ -24,23 +24,23 @@
     "rax-view": "^0.6.5"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "5.2.0-alpha.30",
-    "@storybook/addon-actions": "5.2.0-alpha.30",
-    "@storybook/addon-backgrounds": "5.2.0-alpha.30",
-    "@storybook/addon-centered": "5.2.0-alpha.30",
-    "@storybook/addon-events": "5.2.0-alpha.30",
-    "@storybook/addon-info": "5.2.0-alpha.30",
-    "@storybook/addon-jest": "5.2.0-alpha.30",
-    "@storybook/addon-knobs": "5.2.0-alpha.30",
-    "@storybook/addon-links": "5.2.0-alpha.30",
-    "@storybook/addon-notes": "5.2.0-alpha.30",
-    "@storybook/addon-options": "5.2.0-alpha.30",
-    "@storybook/addon-storyshots": "5.2.0-alpha.30",
-    "@storybook/addon-storysource": "5.2.0-alpha.30",
-    "@storybook/addon-viewport": "5.2.0-alpha.30",
-    "@storybook/addons": "5.2.0-alpha.30",
-    "@storybook/rax": "5.2.0-alpha.30",
-    "@storybook/source-loader": "5.2.0-alpha.30",
+    "@storybook/addon-a11y": "5.2.0-alpha.36",
+    "@storybook/addon-actions": "5.2.0-alpha.36",
+    "@storybook/addon-backgrounds": "5.2.0-alpha.36",
+    "@storybook/addon-centered": "5.2.0-alpha.36",
+    "@storybook/addon-events": "5.2.0-alpha.36",
+    "@storybook/addon-info": "5.2.0-alpha.36",
+    "@storybook/addon-jest": "5.2.0-alpha.36",
+    "@storybook/addon-knobs": "5.2.0-alpha.36",
+    "@storybook/addon-links": "5.2.0-alpha.36",
+    "@storybook/addon-notes": "5.2.0-alpha.36",
+    "@storybook/addon-options": "5.2.0-alpha.36",
+    "@storybook/addon-storyshots": "5.2.0-alpha.36",
+    "@storybook/addon-storysource": "5.2.0-alpha.36",
+    "@storybook/addon-viewport": "5.2.0-alpha.36",
+    "@storybook/addons": "5.2.0-alpha.36",
+    "@storybook/rax": "5.2.0-alpha.36",
+    "@storybook/source-loader": "5.2.0-alpha.36",
     "babel-eslint": "^8.2.2",
     "babel-preset-rax": "^1.0.0-beta.0",
     "rax-scripts": "^1.0.0-beta.10",
diff --git a/examples/rax-kitchen-sink/src/stories/addon-a11y.stories.js b/examples/rax-kitchen-sink/src/stories/addon-a11y.stories.js
index c182229a2b2d..a13959df30ef 100644
--- a/examples/rax-kitchen-sink/src/stories/addon-a11y.stories.js
+++ b/examples/rax-kitchen-sink/src/stories/addon-a11y.stories.js
@@ -1,31 +1,45 @@
 import { createElement } from 'rax';
-import { storiesOf } from '@storybook/rax';
 import { withA11Y } from '@storybook/addon-a11y';
 import Text from 'rax-text';
 import View from 'rax-view';
 import Button from 'rax-button';
 import markdown from './note.md';
 
-storiesOf('Addon|addon-a11y', module)
-  .addDecorator(withA11Y)
-  .add('basic', () => <Text>RAX TEXT NODE</Text>, { notes: 'super awesome note' })
-  .add('with style', () => <Text style={{ fontSize: 20, color: 'blue' }}>Styled text</Text>, {
+export default {
+  title: 'Addon|addon-a11y',
+  decorators: [withA11Y],
+};
+
+export const basic = () => <Text>RAX TEXT NODE</Text>;
+
+basic.story = {
+  parameters: { notes: 'super awesome note' },
+};
+
+export const withStyle = () => <Text style={{ fontSize: 20, color: 'blue' }}>Styled text</Text>;
+
+withStyle.story = {
+  name: 'with style',
+  parameters: {
     notes: ' this is a note with emojis 🚀🚀🚀🚀🚀',
-  })
-  .add(
-    'with markdown',
-    () => (
-      <Button>
-        {' '}
-        <Text id="text1">😀 😎 👍 💯</Text>
-        <View>
-          <Text id="text1">aaa</Text>
-        </View>{' '}
-      </Button>
-    ),
-    {
-      notes: {
-        markdown,
-      },
-    }
-  );
+  },
+};
+
+export const withMarkdown = () => (
+  <Button>
+    {' '}
+    <Text id="text1">😀 😎 👍 💯</Text>
+    <View>
+      <Text id="text1">aaa</Text>
+    </View>{' '}
+  </Button>
+);
+
+withMarkdown.story = {
+  name: 'with markdown',
+  parameters: {
+    notes: {
+      markdown,
+    },
+  },
+};
diff --git a/examples/rax-kitchen-sink/src/stories/addon-actions.stories.js b/examples/rax-kitchen-sink/src/stories/addon-actions.stories.js
index 8af5c45494b8..908ed8b87092 100644
--- a/examples/rax-kitchen-sink/src/stories/addon-actions.stories.js
+++ b/examples/rax-kitchen-sink/src/stories/addon-actions.stories.js
@@ -1,16 +1,27 @@
 import { createElement } from 'rax';
-import { storiesOf } from '@storybook/rax';
 import { action } from '@storybook/addon-actions';
 
 import Button from 'rax-button';
 import Text from 'rax-text';
 
-storiesOf('Addon|addon-actions', module)
-  .add('with text', () => <Button onclick={action('clicked')}>Hello Button</Button>)
-  .add('with some emoji', () => (
-    <Button onclick={action('clicked')}>
-      <Text role="img" aria-label="so cool">
-        😀 😎 👍 💯
-      </Text>
-    </Button>
-  ));
+export default {
+  title: 'Addon|addon-actions',
+};
+
+export const withText = () => <Button onclick={action('clicked')}>Hello Button</Button>;
+
+withText.story = {
+  name: 'with text',
+};
+
+export const withSomeEmoji = () => (
+  <Button onclick={action('clicked')}>
+    <Text role="img" aria-label="so cool">
+      😀 😎 👍 💯
+    </Text>
+  </Button>
+);
+
+withSomeEmoji.story = {
+  name: 'with some emoji',
+};
diff --git a/examples/rax-kitchen-sink/src/stories/addon-centered.stories.js b/examples/rax-kitchen-sink/src/stories/addon-centered.stories.js
index a57ea752cde5..d6afa8ed0567 100644
--- a/examples/rax-kitchen-sink/src/stories/addon-centered.stories.js
+++ b/examples/rax-kitchen-sink/src/stories/addon-centered.stories.js
@@ -1,15 +1,20 @@
 import { createElement } from 'rax';
 import Centered from '@storybook/addon-centered/rax';
-import { storiesOf } from '@storybook/rax';
 import Button from 'rax-button';
 import Text from 'rax-text';
 import App from '../components/App';
 
-storiesOf('Addon|addon-centered', module)
-  .addDecorator(Centered)
-  .add('Button', () => (
-    <Button>
-      <Text>BUTTON</Text>
-    </Button>
-  ))
-  .add('App', () => <App />);
+export default {
+  title: 'Addon|addon-centered',
+  decorators: [Centered],
+};
+
+export const button = () => (
+  <Button>
+    <Text>BUTTON</Text>
+  </Button>
+);
+button.story = { name: 'Button' };
+
+export const app = () => <App />;
+app.story = { name: 'App' };
diff --git a/examples/rax-kitchen-sink/src/stories/addon-events.stories.js b/examples/rax-kitchen-sink/src/stories/addon-events.stories.js
index 339a8f269b71..ec064c38108a 100644
--- a/examples/rax-kitchen-sink/src/stories/addon-events.stories.js
+++ b/examples/rax-kitchen-sink/src/stories/addon-events.stories.js
@@ -1,5 +1,4 @@
 import { createElement } from 'rax';
-import { storiesOf } from '@storybook/rax';
 import withEvents from '@storybook/addon-events';
 import ee from 'event-emitter';
 import Logger, { EVENTS } from '../components/Logger';
@@ -30,6 +29,13 @@ const decorator = withEvents({
   ],
 });
 
-storiesOf('Addon|addon-events', module)
-  .addDecorator(decorator)
-  .add('Events Logger', () => <Logger emitter={emitter} />);
+export default {
+  title: 'Addon|addon-events',
+  decorators: [decorator],
+};
+
+export const eventsLogger = () => <Logger emitter={emitter} />;
+
+eventsLogger.story = {
+  name: 'Events Logger',
+};
diff --git a/examples/rax-kitchen-sink/src/stories/addon-jest.stories.js b/examples/rax-kitchen-sink/src/stories/addon-jest.stories.js
index a14cec68e01d..a931ce29287f 100644
--- a/examples/rax-kitchen-sink/src/stories/addon-jest.stories.js
+++ b/examples/rax-kitchen-sink/src/stories/addon-jest.stories.js
@@ -1,12 +1,23 @@
 import { createElement } from 'rax';
-import { storiesOf } from '@storybook/rax';
 import { withTests } from '@storybook/addon-jest';
 import App from '../components/App';
 import Welcome from '../components/Welcome';
 // eslint-disable-next-line import/no-unresolved
 import results from '../../jest-test-results.json';
 
-storiesOf('Addon|addon-jest', module)
-  .addDecorator(withTests({ results }))
-  .add('App', () => <App />, { jest: ['components/App/App.test.js'] })
-  .add('Welcome', () => <Welcome />, { jest: ['components/Welcome/Welcome.test.js'] });
+export default {
+  title: 'Addon|addon-jest',
+  decorators: [withTests({ results })],
+};
+
+export const app = () => <App />;
+app.story = {
+  name: 'App',
+  parameters: { jest: ['components/App/App.test.js'] },
+};
+
+export const welcome = () => <Welcome />;
+welcome.story = {
+  name: 'Welcome',
+  parameters: { jest: ['components/Welcome/Welcome.test.js'] },
+};
diff --git a/examples/rax-kitchen-sink/src/stories/addon-knobs.stories.js b/examples/rax-kitchen-sink/src/stories/addon-knobs.stories.js
index 40c234978920..45ad805ae6ab 100644
--- a/examples/rax-kitchen-sink/src/stories/addon-knobs.stories.js
+++ b/examples/rax-kitchen-sink/src/stories/addon-knobs.stories.js
@@ -1,18 +1,15 @@
 import { createElement } from 'rax';
-import { storiesOf } from '@storybook/rax';
 import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';
 
 import Button from 'rax-button';
 import Text from 'rax-text';
 
-const stories = storiesOf('Addon|addon-knobs', module);
+export default {
+  title: 'Addon|addon-knobs',
+  decorators: [withKnobs],
+};
 
-// Add the `withKnobs` decorator to add knobs support to your stories.
-// You can also configure `withKnobs` as a global decorator.
-stories.addDecorator(withKnobs);
-
-// Knobs for Rax props
-stories.add('with a button', () => {
+export const withAButton = () => {
   const disabled = boolean('Disabled', false);
   const hasStyle = boolean('Has Style', false);
   const style = hasStyle
@@ -36,13 +33,20 @@ stories.add('with a button', () => {
       <Text style={textStyle}>{text('Label', 'Hello Storybook')}</Text>
     </Button>
   );
-});
+};
+
+withAButton.story = {
+  name: 'with a button',
+};
 
-// Knobs as dynamic variables.
-stories.add('as dynamic variables', () => {
+export const asDynamicVariables = () => {
   const name = text('Name', 'Benjamin Button');
   const age = number('Age', 89);
 
   const content = `I am ${name} and I'm ${age} years old.`;
   return <Text>{content}</Text>;
-});
+};
+
+asDynamicVariables.story = {
+  name: 'as dynamic variables',
+};
diff --git a/examples/rax-kitchen-sink/src/stories/addon-links.stories.js b/examples/rax-kitchen-sink/src/stories/addon-links.stories.js
index e811ffc68b96..e95e6934c260 100644
--- a/examples/rax-kitchen-sink/src/stories/addon-links.stories.js
+++ b/examples/rax-kitchen-sink/src/stories/addon-links.stories.js
@@ -1,20 +1,31 @@
 import { createElement } from 'rax';
-import { storiesOf } from '@storybook/rax';
 import { linkTo } from '@storybook/addon-links';
 import Picker from 'rax-picker';
 import Welcome from '../components/Welcome';
 
-storiesOf('Addon|addon-links', module)
-  .add('Link to notes', () => {
-    return (
-      <Picker onValueChange={linkTo('Addon|addon-notes', value => value)}>
-        <Picker.Item label="Choose story in Addon|addon-notes" />
-        <Picker.Item value="basic" label="basic" />
-        <Picker.Item value="with emojies" label="with emojies" />
-        <Picker.Item value="with markdown" label="with markdown" />
-      </Picker>
-    );
-  })
-  .add('Welcome screen with link to Basic > Button', () => (
-    <Welcome showApp={linkTo('Basic', 'Button')} />
-  ));
+export default {
+  title: 'Addon|addon-links',
+};
+
+export const linkToNotes = () => {
+  return (
+    <Picker onValueChange={linkTo('Addon|addon-notes', value => value)}>
+      <Picker.Item label="Choose story in Addon|addon-notes" />
+      <Picker.Item value="basic" label="basic" />
+      <Picker.Item value="with emojies" label="with emojies" />
+      <Picker.Item value="with markdown" label="with markdown" />
+    </Picker>
+  );
+};
+
+linkToNotes.story = {
+  name: 'Link to notes',
+};
+
+export const welcomeScreenWithLinkToBasicButton = () => (
+  <Welcome showApp={linkTo('Basic', 'Button')} />
+);
+
+welcomeScreenWithLinkToBasicButton.story = {
+  name: 'Welcome screen with link to Basic > Button',
+};
diff --git a/examples/rax-kitchen-sink/src/stories/addon-notes.stories.js b/examples/rax-kitchen-sink/src/stories/addon-notes.stories.js
index d9bfd66942ca..fd70ef90343e 100644
--- a/examples/rax-kitchen-sink/src/stories/addon-notes.stories.js
+++ b/examples/rax-kitchen-sink/src/stories/addon-notes.stories.js
@@ -1,17 +1,35 @@
 import { createElement } from 'rax';
-import { storiesOf } from '@storybook/rax';
 import { withNotes } from '@storybook/addon-notes';
 import Text from 'rax-text';
 import markdown from './note.md';
 
-storiesOf('Addon|addon-notes', module)
-  .addDecorator(withNotes)
-  .add('basic', () => <Text>RAX TEXT NODE</Text>, { notes: 'super awesome note' })
-  .add('with emojies', () => <Text style={{ fontSize: 20, color: 'blue' }}>Styled text</Text>, {
+export default {
+  title: 'Addon|addon-notes',
+  decorators: [withNotes],
+};
+
+export const basic = () => <Text>RAX TEXT NODE</Text>;
+
+basic.story = {
+  parameters: { notes: 'super awesome note' },
+};
+
+export const withEmojies = () => <Text style={{ fontSize: 20, color: 'blue' }}>Styled text</Text>;
+
+withEmojies.story = {
+  name: 'with emojies',
+  parameters: {
     notes: ' this is a note with emojies 🚀🚀🚀🚀🚀',
-  })
-  .add('with markdown', () => <Text>😀 😎 👍 💯</Text>, {
+  },
+};
+
+export const withMarkdown = () => <Text>😀 😎 👍 💯</Text>;
+
+withMarkdown.story = {
+  name: 'with markdown',
+  parameters: {
     notes: {
       markdown,
     },
-  });
+  },
+};
diff --git a/examples/rax-kitchen-sink/src/stories/index.stories.js b/examples/rax-kitchen-sink/src/stories/index.stories.js
index 9e656f9110ac..793c7ddc5eeb 100644
--- a/examples/rax-kitchen-sink/src/stories/index.stories.js
+++ b/examples/rax-kitchen-sink/src/stories/index.stories.js
@@ -1,9 +1,18 @@
 import { createElement } from 'rax';
-import { storiesOf } from '@storybook/rax';
 import { linkTo } from '@storybook/addon-links';
 import App from '../components/App';
 import Welcome from '../components/Welcome';
 
-storiesOf('Basic', module)
-  .add('Welcome screen', () => <Welcome showApp={linkTo('Addon|addon-actions', 'with text')} />)
-  .add('App', () => <App />);
+export default {
+  title: 'Basic',
+};
+
+export const welcomeScreen = () => <Welcome showApp={linkTo('Addon|addon-actions', 'with text')} />;
+welcomeScreen.story = {
+  name: 'Welcome screen',
+};
+
+export const app = () => <App />;
+app.story = {
+  name: 'App',
+};
diff --git a/examples/riot-kitchen-sink/.storybook/config.js b/examples/riot-kitchen-sink/.storybook/config.js
index a17118312c50..782deea25ec2 100644
--- a/examples/riot-kitchen-sink/.storybook/config.js
+++ b/examples/riot-kitchen-sink/.storybook/config.js
@@ -1,4 +1,4 @@
-import { configure, addParameters, addDecorator } from '@storybook/riot';
+import { load, addParameters, addDecorator } from '@storybook/riot';
 import { withA11y } from '@storybook/addon-a11y';
 
 addDecorator(withA11y);
@@ -8,11 +8,4 @@ addParameters({
   },
 });
 
-function loadStories() {
-  require('../src/stories');
-
-  const req = require.context('../src/stories', true, /\.stories\.js$/);
-  req.keys().forEach(filename => req(filename));
-}
-
-configure(loadStories, module);
+load(require.context('../src/stories', true, /\.stories\.js$/), module);
diff --git a/examples/riot-kitchen-sink/.storybook/webpack.config.js b/examples/riot-kitchen-sink/.storybook/webpack.config.js
index 5f6354c3c594..9eb381789988 100644
--- a/examples/riot-kitchen-sink/.storybook/webpack.config.js
+++ b/examples/riot-kitchen-sink/.storybook/webpack.config.js
@@ -3,7 +3,7 @@ const path = require('path');
 module.exports = async ({ config }) => {
   config.module.rules.push({
     test: [/\.stories\.js$/, /index\.js$/],
-    loaders: [require.resolve('@storybook/source-loader')],
+    loaders: [require.resolve('@storybook/addon-storysource/loader')],
     include: [path.resolve(__dirname, '../src')],
     enforce: 'pre',
   });
diff --git a/examples/riot-kitchen-sink/src/stories/__snapshots__/story-code.stories.storyshot b/examples/riot-kitchen-sink/__snapshots__/riotshots.test.js.snap
similarity index 53%
rename from examples/riot-kitchen-sink/src/stories/__snapshots__/story-code.stories.storyshot
rename to examples/riot-kitchen-sink/__snapshots__/riotshots.test.js.snap
index 94cdcf3a7192..30ef3f9f04b4 100644
--- a/examples/riot-kitchen-sink/src/stories/__snapshots__/story-code.stories.storyshot
+++ b/examples/riot-kitchen-sink/__snapshots__/riotshots.test.js.snap
@@ -1,5 +1,197 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Storyshots Addon|Actions Action only 1`] = `
+<div
+  data-is="my-button"
+  id="root"
+>
+  <button
+    class="button"
+    style="color: #42b983; border-color: #42b983"
+  >
+    Click me to log the action!
+  </button>
+</div>
+`;
+
+exports[`Storyshots Addon|Actions Multiple actions 1`] = `
+<div
+  data-is="my-button"
+  id="root"
+>
+  <button
+    class="button"
+    style="color: #42b983; border-color: #42b983"
+  >
+    Double Click me to log the action!
+  </button>
+</div>
+`;
+
+exports[`Storyshots Addon|Backgrounds story 1 1`] = `
+<div
+  data-is="root"
+  id="root"
+>
+  <my-button>
+    <button
+      class="button"
+      style="color: #42b983; border-color: #42b983"
+    >
+      You should be able to switch backgrounds for this story!
+    </button>
+  </my-button>
+</div>
+`;
+
+exports[`Storyshots Addon|Backgrounds story 2 1`] = `
+<div
+  data-is="root"
+  id="root"
+>
+  <my-button>
+    <button
+      class="button"
+      style="color: #42b983; border-color: #42b983"
+    >
+      This one too!!
+    </button>
+  </my-button>
+</div>
+`;
+
+exports[`Storyshots Addon|Knobs All knobs 1`] = `
+<div
+  data-is="root"
+  id="root"
+>
+  <whatigot>
+    <div
+      style="border:2px dotted deeppink; padding: 8px 22px; border-radius: 8px"
+    >
+       
+      <h1>
+        My name is Jane,
+      </h1>
+       
+      <h3>
+        today is January 20, 2017
+      </h3>
+       
+      <p>
+        I have a stock of 20 apples, costing $2.25 each.
+      </p>
+       
+      <p>
+        Also, I have:
+      </p>
+       
+      <ul>
+         
+        <li
+          key="Laptop"
+        >
+          Laptop
+        </li>
+        <li
+          key="Book"
+        >
+          Book
+        </li>
+        <li
+          key="Whiskey"
+        >
+          Whiskey
+        </li>
+         
+      </ul>
+       
+      <p>
+        Nice to meet you!
+      </p>
+       
+    </div>
+  </whatigot>
+</div>
+`;
+
+exports[`Storyshots Addon|Knobs Simple 1`] = `
+<div
+  data-is="root"
+  id="root"
+>
+  <div>
+    I am John Doe and I'm 44 years old.
+  </div>
+</div>
+`;
+
+exports[`Storyshots Addon|Knobs XSS safety 1`] = `
+<div
+  data-is="root"
+  id="root"
+>
+  <div>
+     &lt;img src=x onerror="alert('XSS Attack')" &gt; 
+  </div>
+</div>
+`;
+
+exports[`Storyshots Addon|Links Go to welcome 1`] = `
+<div
+  data-is="my-button"
+  id="root"
+>
+  <button
+    class="rounded button"
+    style="color: #42b983; border-color: #42b983"
+  >
+    This button links to Welcome!
+  </button>
+</div>
+`;
+
+exports[`Storyshots Addon|Notes Note with HTML 1`] = `
+<div
+  data-is="root"
+  id="root"
+>
+  <div>
+    <p>
+      🤔😳😯😮
+      <br />
+      😄😩😓😱
+      <br />
+      🤓😑😶😊
+    </p>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Addon|Notes Simple note 1`] = `
+<div
+  data-is="root"
+  id="root"
+>
+  <p>
+    <strong>
+      Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.
+    </strong>
+  </p>
+</div>
+`;
+
+exports[`Storyshots Core|Parameters passed to story 1`] = `
+<div
+  data-is="parameters"
+  id="root"
+>
+  <div>
+    Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{}},"globalParameter":"globalParameter","framework":"riot","chapterParameter":"chapterParameter","storyParameter":"storyParameter","id":"root","dataIs":"parameters"}
+  </div>
+</div>
+`;
+
 exports[`Storyshots Story|How to create a story built as string 1`] = `
 <div
   data-is="root"
diff --git a/examples/riot-kitchen-sink/package.json b/examples/riot-kitchen-sink/package.json
index 2bc1f2a4a5f7..9e2bc513a218 100644
--- a/examples/riot-kitchen-sink/package.json
+++ b/examples/riot-kitchen-sink/package.json
@@ -1,6 +1,6 @@
 {
   "name": "riot-example",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "private": true,
   "scripts": {
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
@@ -16,20 +16,20 @@
   },
   "devDependencies": {
     "@babel/core": "^7.3.4",
-    "@storybook/addon-a11y": "5.2.0-alpha.30",
-    "@storybook/addon-actions": "5.2.0-alpha.30",
-    "@storybook/addon-backgrounds": "5.2.0-alpha.30",
-    "@storybook/addon-centered": "5.2.0-alpha.30",
-    "@storybook/addon-knobs": "5.2.0-alpha.30",
-    "@storybook/addon-links": "5.2.0-alpha.30",
-    "@storybook/addon-notes": "5.2.0-alpha.30",
-    "@storybook/addon-options": "5.2.0-alpha.30",
-    "@storybook/addon-storyshots": "5.2.0-alpha.30",
-    "@storybook/addon-storysource": "5.2.0-alpha.30",
-    "@storybook/addon-viewport": "5.2.0-alpha.30",
-    "@storybook/addons": "5.2.0-alpha.30",
-    "@storybook/riot": "5.2.0-alpha.30",
-    "@storybook/source-loader": "5.2.0-alpha.30",
+    "@storybook/addon-a11y": "5.2.0-alpha.36",
+    "@storybook/addon-actions": "5.2.0-alpha.36",
+    "@storybook/addon-backgrounds": "5.2.0-alpha.36",
+    "@storybook/addon-centered": "5.2.0-alpha.36",
+    "@storybook/addon-knobs": "5.2.0-alpha.36",
+    "@storybook/addon-links": "5.2.0-alpha.36",
+    "@storybook/addon-notes": "5.2.0-alpha.36",
+    "@storybook/addon-options": "5.2.0-alpha.36",
+    "@storybook/addon-storyshots": "5.2.0-alpha.36",
+    "@storybook/addon-storysource": "5.2.0-alpha.36",
+    "@storybook/addon-viewport": "5.2.0-alpha.36",
+    "@storybook/addons": "5.2.0-alpha.36",
+    "@storybook/riot": "5.2.0-alpha.36",
+    "@storybook/source-loader": "5.2.0-alpha.36",
     "babel-loader": "^8.0.4",
     "cross-env": "^5.2.0",
     "file-loader": "^3.0.1",
diff --git a/examples/riot-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot b/examples/riot-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot
deleted file mode 100644
index 5a00ea1a4a17..000000000000
--- a/examples/riot-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot
+++ /dev/null
@@ -1,29 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addon|Actions Action only 1`] = `
-<div
-  data-is="my-button"
-  id="root"
->
-  <button
-    class="button"
-    style="color: #42b983; border-color: #42b983"
-  >
-    Click me to log the action!
-  </button>
-</div>
-`;
-
-exports[`Storyshots Addon|Actions Multiple actions 1`] = `
-<div
-  data-is="my-button"
-  id="root"
->
-  <button
-    class="button"
-    style="color: #42b983; border-color: #42b983"
-  >
-    Double Click me to log the action!
-  </button>
-</div>
-`;
diff --git a/examples/riot-kitchen-sink/src/stories/__snapshots__/addon-backgrounds.stories.storyshot b/examples/riot-kitchen-sink/src/stories/__snapshots__/addon-backgrounds.stories.storyshot
deleted file mode 100644
index 8119431de1da..000000000000
--- a/examples/riot-kitchen-sink/src/stories/__snapshots__/addon-backgrounds.stories.storyshot
+++ /dev/null
@@ -1,33 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addon|Backgrounds story 1 1`] = `
-<div
-  data-is="root"
-  id="root"
->
-  <my-button>
-    <button
-      class="button"
-      style="color: #42b983; border-color: #42b983"
-    >
-      You should be able to switch backgrounds for this story!
-    </button>
-  </my-button>
-</div>
-`;
-
-exports[`Storyshots Addon|Backgrounds story 2 1`] = `
-<div
-  data-is="root"
-  id="root"
->
-  <my-button>
-    <button
-      class="button"
-      style="color: #42b983; border-color: #42b983"
-    >
-      This one too!!
-    </button>
-  </my-button>
-</div>
-`;
diff --git a/examples/riot-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot b/examples/riot-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot
deleted file mode 100644
index 14ea273a2b52..000000000000
--- a/examples/riot-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot
+++ /dev/null
@@ -1,78 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addon|Knobs All knobs 1`] = `
-<div
-  data-is="root"
-  id="root"
->
-  <whatigot>
-    <div
-      style="border:2px dotted deeppink; padding: 8px 22px; border-radius: 8px"
-    >
-       
-      <h1>
-        My name is Jane,
-      </h1>
-       
-      <h3>
-        today is January 20, 2017
-      </h3>
-       
-      <p>
-        I have a stock of 20 apples, costing $2.25 each.
-      </p>
-       
-      <p>
-        Also, I have:
-      </p>
-       
-      <ul>
-         
-        <li
-          key="Laptop"
-        >
-          Laptop
-        </li>
-        <li
-          key="Book"
-        >
-          Book
-        </li>
-        <li
-          key="Whiskey"
-        >
-          Whiskey
-        </li>
-         
-      </ul>
-       
-      <p>
-        Nice to meet you!
-      </p>
-       
-    </div>
-  </whatigot>
-</div>
-`;
-
-exports[`Storyshots Addon|Knobs Simple 1`] = `
-<div
-  data-is="root"
-  id="root"
->
-  <div>
-    I am John Doe and I'm 44 years old.
-  </div>
-</div>
-`;
-
-exports[`Storyshots Addon|Knobs XSS safety 1`] = `
-<div
-  data-is="root"
-  id="root"
->
-  <div>
-     &lt;img src=x onerror="alert('XSS Attack')" &gt; 
-  </div>
-</div>
-`;
diff --git a/examples/riot-kitchen-sink/src/stories/__snapshots__/addon-links.stories.storyshot b/examples/riot-kitchen-sink/src/stories/__snapshots__/addon-links.stories.storyshot
deleted file mode 100644
index ec5b61b5ceaf..000000000000
--- a/examples/riot-kitchen-sink/src/stories/__snapshots__/addon-links.stories.storyshot
+++ /dev/null
@@ -1,15 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addon|Links Go to welcome 1`] = `
-<div
-  data-is="my-button"
-  id="root"
->
-  <button
-    class="rounded button"
-    style="color: #42b983; border-color: #42b983"
-  >
-    This button links to Welcome!
-  </button>
-</div>
-`;
diff --git a/examples/riot-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot b/examples/riot-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot
deleted file mode 100644
index 51e06c5623f6..000000000000
--- a/examples/riot-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot
+++ /dev/null
@@ -1,31 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addon|Notes Note with HTML 1`] = `
-<div
-  data-is="root"
-  id="root"
->
-  <div>
-    <p>
-      🤔😳😯😮
-      <br />
-      😄😩😓😱
-      <br />
-      🤓😑😶😊
-    </p>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Addon|Notes Simple note 1`] = `
-<div
-  data-is="root"
-  id="root"
->
-  <p>
-    <strong>
-      Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.
-    </strong>
-  </p>
-</div>
-`;
diff --git a/examples/riot-kitchen-sink/src/stories/__snapshots__/core.stories.storyshot b/examples/riot-kitchen-sink/src/stories/__snapshots__/core.stories.storyshot
deleted file mode 100644
index 2a250274756c..000000000000
--- a/examples/riot-kitchen-sink/src/stories/__snapshots__/core.stories.storyshot
+++ /dev/null
@@ -1,12 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Core|Parameters passed to story 1`] = `
-<div
-  data-is="parameters"
-  id="root"
->
-  <div>
-    Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{}},"globalParameter":"globalParameter","framework":"riot","chapterParameter":"chapterParameter","storyParameter":"storyParameter","id":"root","dataIs":"parameters"}
-  </div>
-</div>
-`;
diff --git a/examples/riot-kitchen-sink/src/stories/__snapshots__/index.storyshot b/examples/riot-kitchen-sink/src/stories/__snapshots__/index.storyshot
deleted file mode 100644
index ae019fd518c1..000000000000
--- a/examples/riot-kitchen-sink/src/stories/__snapshots__/index.storyshot
+++ /dev/null
@@ -1,244 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots App App 1`] = `
-<div
-  data-is="app"
-  id="root"
->
-  <div
-    id="app"
-  >
-     
-    <img
-      src="./logo.png"
-    />
-     
-    <h1 />
-     
-    <h2>
-      Essential Links
-    </h2>
-     
-    <ul>
-       
-      <li>
-        <a
-          href="https://riot.js.org/"
-          target="_blank"
-        >
-          riot.js Docs
-        </a>
-      </li>
-       
-      <li>
-        <a
-          href="https://riot.js.org/made-with-riot/"
-          target="_blank"
-        >
-          Showcase
-        </a>
-      </li>
-       
-      <li>
-        <a
-          href="https://riot.js.org/download/"
-          target="_blank"
-        >
-          Download now
-        </a>
-      </li>
-       
-    </ul>
-     
-    <h2>
-      Ecosystem
-    </h2>
-     
-    <ul>
-       
-      <li>
-        <a
-          href="https://riotgear.js.org/"
-          target="_blank"
-        >
-          riot gear
-        </a>
-      </li>
-       
-      <li>
-        <a
-          href="https://riotgear2.github.io/"
-          target="_blank"
-        >
-          riot gear 2
-        </a>
-      </li>
-       
-      <li>
-        <a
-          href="https://kysonic.github.io/riot-mui/"
-          target="_blank"
-        >
-          riot material UI
-        </a>
-      </li>
-       
-      <li>
-        <a
-          href="https://devhints.io/riot"
-          target="_blank"
-        >
-          riot cheatsheet
-        </a>
-      </li>
-       
-    </ul>
-     
-  </div>
-</div>
-`;
-
-exports[`Storyshots Button rounded 1`] = `
-<div
-  data-is="root"
-  id="root"
->
-  <my-button
-    rounded="true"
-  >
-    <button
-      class="rounded button"
-      style="color: #42b983; border-color: #42b983"
-    >
-      A Button with rounded edges!
-    </button>
-  </my-button>
-</div>
-`;
-
-exports[`Storyshots Button square 1`] = `
-<div
-  data-is="root"
-  id="root"
->
-  <my-button>
-    <button
-      class="button"
-      style="color: #42b983; border-color: #42b983"
-    >
-      A Button with square edges!
-    </button>
-  </my-button>
-</div>
-`;
-
-exports[`Storyshots Welcome Welcome 1`] = `
-<div
-  data-is="welcome"
-  id="root"
->
-  <div
-    class="main"
-  >
-     
-    <h1>
-      Welcome to Storybook for riot.js
-    </h1>
-     
-    <p>
-       This is a UI component dev environment for your riot app. 
-    </p>
-     
-    <p>
-       We've added some basic stories inside the 
-      <code
-        class="code"
-      >
-        src/stories
-      </code>
-       directory. 
-      <br />
-       A story is a single state of one or more UI components. You can have as many stories as you want. 
-      <br />
-       (Basically a story is like a visual test case.) 
-    </p>
-     
-    <p>
-       See these sample 
-      <a
-        class="link"
-      >
-        stories
-      </a>
-       for a component called 
-      <code
-        class="code"
-      >
-        Button
-      </code>
-       . 
-    </p>
-     
-    <p
-      style="text-align:center"
-    >
-      <img
-        src="../logo.png"
-      />
-    </p>
-     
-    <p>
-       Just like that, you can add your own components as stories. 
-      <br />
-       You can also edit those components and see changes right away. 
-      <br />
-       (Try editing the 
-      <code
-        class="code"
-      >
-        Button
-      </code>
-       component located at 
-      <code
-        class="code"
-      >
-        src/stories/Button.tag
-      </code>
-      .) 
-    </p>
-     
-    <p>
-       Usually we create stories with smaller UI components in the app.
-      <br />
-       Have a look at the 
-      <a
-        class="link"
-        href="https://storybook.js.org/basics/writing-stories"
-        target="_blank"
-      >
-         Writing Stories 
-      </a>
-       section in our documentation. 
-    </p>
-     
-    <p
-      class="note"
-    >
-       
-      <b>
-        NOTE:
-      </b>
-       
-      <br />
-       Have a look at the 
-      <code
-        class="code"
-      >
-        .storybook/webpack.config.js
-      </code>
-       to add webpack loaders and plugins you are using in this project. 
-    </p>
-     
-  </div>
-</div>
-`;
diff --git a/examples/riot-kitchen-sink/src/stories/addon-actions.stories.js b/examples/riot-kitchen-sink/src/stories/addon-actions.stories.js
index 4561beb45221..b571a52f3dda 100644
--- a/examples/riot-kitchen-sink/src/stories/addon-actions.stories.js
+++ b/examples/riot-kitchen-sink/src/stories/addon-actions.stories.js
@@ -1,19 +1,29 @@
-import { mount, storiesOf, compileNow } from '@storybook/riot';
+import { mount, compileNow } from '@storybook/riot';
 import { action } from '@storybook/addon-actions';
 import ButtonRaw from './Button.txt';
 
 compileNow(ButtonRaw);
 
-storiesOf('Addon|Actions', module)
-  .add('Action only', () =>
-    mount('my-button', {
-      handleClick: action('button-click'),
-      content: 'Click me to log the action',
-    })
-  )
-  .add('Multiple actions', () =>
-    mount('my-button', {
-      handleDblClick: action('button-double-click'),
-      content: 'Double Click me to log the action',
-    })
-  );
+export default {
+  title: 'Addon|Actions',
+};
+
+export const actionOnly = () =>
+  mount('my-button', {
+    handleClick: action('button-click'),
+    content: 'Click me to log the action',
+  });
+
+actionOnly.story = {
+  name: 'Action only',
+};
+
+export const multipleActions = () =>
+  mount('my-button', {
+    handleDblClick: action('button-double-click'),
+    content: 'Double Click me to log the action',
+  });
+
+multipleActions.story = {
+  name: 'Multiple actions',
+};
diff --git a/examples/riot-kitchen-sink/src/stories/addon-backgrounds.stories.js b/examples/riot-kitchen-sink/src/stories/addon-backgrounds.stories.js
index 43f40d39e36e..eac0791294f3 100644
--- a/examples/riot-kitchen-sink/src/stories/addon-backgrounds.stories.js
+++ b/examples/riot-kitchen-sink/src/stories/addon-backgrounds.stories.js
@@ -1,26 +1,37 @@
-import { storiesOf } from '@storybook/riot';
 import ButtonRaw from './Button.txt';
 
-storiesOf('Addon|Backgrounds', module)
-  .addParameters({
+export default {
+  title: 'Addon|Backgrounds',
+  parameters: {
     backgrounds: [
       { name: 'light', value: '#eeeeee' },
       { name: 'dark', value: '#222222', default: true },
     ],
-  })
-  .add('story 1', () => {
-    const content = 'You should be able to switch backgrounds for this story';
+  },
+};
 
-    return {
-      tags: [{ boundAs: 'my-button', content: ButtonRaw }],
-      template: `<my-button>${content}</my-button>`,
-    };
-  })
-  .add('story 2', () => {
-    const content = 'This one too!';
+export const story1 = () => {
+  const content = 'You should be able to switch backgrounds for this story';
 
-    return {
-      tags: [{ boundAs: 'my-button', content: ButtonRaw }],
-      template: `<my-button>${content}</my-button>`,
-    };
-  });
+  return {
+    tags: [{ boundAs: 'my-button', content: ButtonRaw }],
+    template: `<my-button>${content}</my-button>`,
+  };
+};
+
+story1.story = {
+  name: 'story 1',
+};
+
+export const story2 = () => {
+  const content = 'This one too!';
+
+  return {
+    tags: [{ boundAs: 'my-button', content: ButtonRaw }],
+    template: `<my-button>${content}</my-button>`,
+  };
+};
+
+story2.story = {
+  name: 'story 2',
+};
diff --git a/examples/riot-kitchen-sink/src/stories/addon-knobs.stories.js b/examples/riot-kitchen-sink/src/stories/addon-knobs.stories.js
index 7a51bfcdd1b0..9b44ceb8bdfc 100644
--- a/examples/riot-kitchen-sink/src/stories/addon-knobs.stories.js
+++ b/examples/riot-kitchen-sink/src/stories/addon-knobs.stories.js
@@ -1,4 +1,3 @@
-import { storiesOf } from '@storybook/riot';
 import { action } from '@storybook/addon-actions';
 import {
   withKnobs,
@@ -12,49 +11,53 @@ import {
   button,
 } from '@storybook/addon-knobs';
 
-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.`;
+export default {
+  title: 'Addon|Knobs',
+  decorators: [withKnobs],
+};
 
-    return {
-      tags: [`<div>${content}</div>`],
-    };
-  })
-  .add('All knobs', () => {
-    const name = text('Name', 'Jane');
-    const stock = number('Stock', 20, {
-      range: true,
-      min: 0,
-      max: 30,
-      step: 5,
-    });
-    const fruits = {
-      Apple: 'apples',
-      Banana: 'bananas',
-      Cherry: 'cherries',
-    };
-    const fruit = select('Fruit', fruits, 'apples');
-    const price = number('Price', 2.25);
+export const Simple = () => {
+  const name = text('Name', 'John Doe');
+  const age = number('Age', 44);
+  const content = `I am ${name} and I'm ${age} years old.`;
 
-    const colour = color('Border', 'deeppink');
-    const today = date('Today', new Date('Jan 20 2017 GMT+0'));
-    const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
-    const nice = boolean('Nice', true);
+  return {
+    tags: [`<div>${content}</div>`],
+  };
+};
 
-    const stockMessage = stock
-      ? `I have a stock of ${stock} ${fruit}, costing &dollar;${price} each.`
-      : `I'm out of ${fruit}${nice ? ', Sorry!' : '.'}`;
-    const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
-    const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' };
+export const allKnobs = () => {
+  const name = text('Name', 'Jane');
+  const stock = number('Stock', 20, {
+    range: true,
+    min: 0,
+    max: 30,
+    step: 5,
+  });
+  const fruits = {
+    Apple: 'apples',
+    Banana: 'bananas',
+    Cherry: 'cherries',
+  };
+  const fruit = select('Fruit', fruits, 'apples');
+  const price = number('Price', 2.25);
 
-    button('Arbitrary action', action('You clicked it!'));
+  const colour = color('Border', 'deeppink');
+  const today = date('Today', new Date('Jan 20 2017 GMT+0'));
+  const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
+  const nice = boolean('Nice', true);
 
-    return {
-      tags: [
-        `
+  const stockMessage = stock
+    ? `I have a stock of ${stock} ${fruit}, costing &dollar;${price} each.`
+    : `I'm out of ${fruit}${nice ? ', Sorry!' : '.'}`;
+  const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
+  const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' };
+
+  button('Arbitrary action', action('You clicked it!'));
+
+  return {
+    tags: [
+      `
           <WhatIGot><div style="border:2px dotted ${colour}; padding: 8px 22px; border-radius: 8px">
             <h1>My name is ${name},</h1>
             <h3>today is ${new Date(today).toLocaleDateString('en-US', dateOptions)}</h3>
@@ -66,15 +69,24 @@ storiesOf('Addon|Knobs', module)
             <p>${salutation}</p>
           </div></WhatIGot>
         `,
-      ],
-    };
-  })
-  .add('XSS safety', () => ({
-    tags: [
-      `
+    ],
+  };
+};
+
+allKnobs.story = {
+  name: 'All knobs',
+};
+
+export const xssSafety = () => ({
+  tags: [
+    `
       <div>
         ${text('Rendered string', '<img src=x onerror="alert(\'XSS Attack\')" >')}
       </div>
     `,
-    ],
-  }));
+  ],
+});
+
+xssSafety.story = {
+  name: 'XSS safety',
+};
diff --git a/examples/riot-kitchen-sink/src/stories/addon-links.stories.js b/examples/riot-kitchen-sink/src/stories/addon-links.stories.js
index 99f8d642e0f9..56af1084748d 100644
--- a/examples/riot-kitchen-sink/src/stories/addon-links.stories.js
+++ b/examples/riot-kitchen-sink/src/stories/addon-links.stories.js
@@ -1,14 +1,21 @@
-import { mount, storiesOf, compileNow } from '@storybook/riot';
+import { mount, compileNow } from '@storybook/riot';
 import { linkTo } from '@storybook/addon-links';
 import ButtonRaw from './Button.txt';
 
 compileNow(ButtonRaw);
 
-storiesOf('Addon|Links', module).add('Go to welcome', () =>
+export default {
+  title: 'Addon|Links',
+};
+
+export const goToWelcome = () =>
   mount('my-button', {
     rounded: true,
     content: 'This button links to Welcome',
     value: 'with a parameter',
     handleClick: linkTo('Welcome', 'Welcome'),
-  })
-);
+  });
+
+goToWelcome.story = {
+  name: 'Go to welcome',
+};
diff --git a/examples/riot-kitchen-sink/src/stories/addon-notes.stories.js b/examples/riot-kitchen-sink/src/stories/addon-notes.stories.js
index 4f47074660fc..c0fb19120403 100644
--- a/examples/riot-kitchen-sink/src/stories/addon-notes.stories.js
+++ b/examples/riot-kitchen-sink/src/stories/addon-notes.stories.js
@@ -1,27 +1,31 @@
-import { storiesOf } from '@storybook/riot';
+export default {
+  title: 'Addon|Notes',
+};
 
-storiesOf('Addon|Notes', module)
-  .add(
-    'Simple note',
-    () => ({
-      tags: [
-        '<p><strong>Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.</strong></p>',
-      ],
-    }),
-    { notes: 'My notes on some bold text' }
-  )
-  .add(
-    'Note with HTML',
-    () => ({
-      tags: ['<div><p>🤔😳😯😮<br/>😄😩😓😱<br/>🤓😑😶😊</p></div>'],
-    }),
-    {
-      notes: `
-      <h2>My notes on emojies</h2>
+export const simpleNote = () => ({
+  tags: [
+    '<p><strong>Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.</strong></p>',
+  ],
+});
 
-      <em>It's not all that important to be honest, but..</em>
+simpleNote.story = {
+  name: 'Simple note',
+  parameters: { notes: 'My notes on some bold text' },
+};
 
-      Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
-    `,
-    }
-  );
+export const noteWithHtml = () => ({
+  tags: ['<div><p>🤔😳😯😮<br/>😄😩😓😱<br/>🤓😑😶😊</p></div>'],
+});
+
+noteWithHtml.story = {
+  name: 'Note with HTML',
+  parameters: {
+    notes: `
+    <h2>My notes on emojies</h2>
+
+    <em>It's not all that important to be honest, but..</em>
+
+    Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
+  `,
+  },
+};
diff --git a/examples/riot-kitchen-sink/src/stories/core.stories.js b/examples/riot-kitchen-sink/src/stories/core.stories.js
index 12ae3823b4a1..9ffa8d32b535 100644
--- a/examples/riot-kitchen-sink/src/stories/core.stories.js
+++ b/examples/riot-kitchen-sink/src/stories/core.stories.js
@@ -1,4 +1,4 @@
-import { tag, mount, storiesOf, addParameters } from '@storybook/riot';
+import { tag, mount, addParameters } from '@storybook/riot';
 
 const globalParameter = 'globalParameter';
 const chapterParameter = 'chapterParameter';
@@ -8,8 +8,16 @@ tag('parameters', '<div>Parameters are {JSON.stringify (this.opts)}</div>', '',
 
 addParameters({ globalParameter });
 
-storiesOf('Core|Parameters', module)
-  .addParameters({ chapterParameter })
-  .add('passed to story', ({ parameters: { fileName, ...parameters } }) =>
-    mount('parameters', { ...parameters, storyParameter })
-  );
+export default {
+  title: 'Core|Parameters',
+  parameters: {
+    chapterParameter,
+  },
+};
+
+export const passedToStory = ({ parameters: { fileName, ...parameters } }) =>
+  mount('parameters', { ...parameters, storyParameter });
+
+passedToStory.story = {
+  name: 'passed to story',
+};
diff --git a/examples/riot-kitchen-sink/src/stories/index.js b/examples/riot-kitchen-sink/src/stories/index.js
deleted file mode 100644
index 1a8b42d9c24a..000000000000
--- a/examples/riot-kitchen-sink/src/stories/index.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { mount, storiesOf } from '@storybook/riot';
-import { linkTo } from '@storybook/addon-links';
-import ButtonRaw from './Button.txt';
-import './Welcome.tag';
-import '../App.tag';
-
-storiesOf('Welcome', module).add('Welcome', () =>
-  mount('welcome', { goToButton: linkTo('Button') })
-);
-
-storiesOf('App', module).add('App', () => mount('app', {}));
-
-storiesOf('Button', module)
-  // Works if riot.component is called in the config.js in .storybook
-  .add('rounded', () => ({
-    tags: [{ boundAs: 'my-button', content: ButtonRaw }],
-    template: '<my-button rounded={true}>A Button with rounded edges</my-button>',
-  }))
-  .add('square', () => ({
-    tags: [{ boundAs: 'my-button', content: ButtonRaw }],
-    template: '<my-button rounded={false}>A Button with square edges</my-button>',
-  }));
diff --git a/examples/riot-kitchen-sink/src/stories/nested-tags.stories.js b/examples/riot-kitchen-sink/src/stories/nested-tags.stories.js
new file mode 100644
index 000000000000..3664f40bb5ca
--- /dev/null
+++ b/examples/riot-kitchen-sink/src/stories/nested-tags.stories.js
@@ -0,0 +1,32 @@
+import { tag, mount, asCompiledCode } from '@storybook/riot';
+import SimpleTestRaw from './SimpleTest.txt';
+import './AnotherTest.tag';
+
+const simpleTestCompiled = asCompiledCode(SimpleTestRaw);
+
+export default {
+  title: 'Story|Nest tags',
+};
+
+export const threeTags = () => ({
+  tags: [
+    '<WebPage><PageHeader>Simple title</PageHeader><PageBody>Simple Content</PageBody></WebPage>',
+    '<PageHeader><h1><yield/></h1></PageHeader>',
+    '<PageBody><div style="border-radius: 1em;border-right: solid 1px #cac9c9;border-bottom: solid 1px #cac9c9;box-shadow: 1em 1em 2em #eae9e9; margin: 3em; padding: 3em;min-height: 10em;min-width: 30em"><yield/></div></PageBody>',
+  ],
+});
+
+threeTags.story = {
+  name: 'Three tags',
+};
+
+export const Matriochka = () => ({
+  tags: [
+    '<Tag1><div>Inside tag1:<ul><li><Tag2><yield/></Tag2></li></ul></div></Tag1>',
+    '<Tag2><div>Inside tag2:<ul><li><Tag3><yield/></Tag3></li></ul></div></Tag2>',
+    '<Tag3><div>Inside tag3:<ul><li><Tag4><yield/></Tag4></li></ul></div></Tag3>',
+    '<Tag4><div>Inside tag4:<ul><li><Tag5><yield/></Tag5></li></ul></div></Tag4>',
+    '<Tag5><div>Inside tag5:<ul><li><yield/></li></ul></div></Tag5>',
+  ],
+  template: '<Matriochka><div><Tag1>Content</Tag1></div></Matriochka>',
+});
diff --git a/examples/riot-kitchen-sink/src/stories/story-code.stories.js b/examples/riot-kitchen-sink/src/stories/story-code.stories.js
index d19ca29bb908..da34681f8b0d 100644
--- a/examples/riot-kitchen-sink/src/stories/story-code.stories.js
+++ b/examples/riot-kitchen-sink/src/stories/story-code.stories.js
@@ -1,73 +1,83 @@
-import { tag, mount, storiesOf, asCompiledCode } from '@storybook/riot';
+import { tag, mount, asCompiledCode } from '@storybook/riot';
 import SimpleTestRaw from './SimpleTest.txt';
 import './AnotherTest.tag';
 
 const simpleTestCompiled = asCompiledCode(SimpleTestRaw);
 
-storiesOf('Story|How to create a story', module)
-  .add(
-    'built with tag',
-    () =>
-      tag('test', '<div>simple test ({ opts.value })</div>', '', '', () => {}) &&
-      mount('test', { value: 'with a parameter' })
-  )
-
-  .add('built as string', () => ({ tags: ['<test><div>simple test</div></test>'] }))
-
-  .add('built from raw import', () => simpleTestCompiled)
-
-  .add(
-    'built from tags and template',
-    () => ({
-      tags: [{ content: SimpleTestRaw, boundAs: 'mustBeUniquePlease' }],
-      template:
-        '<SimpleTest test={ "with a parameter" } value={"value is mapped to riotValue"}></SimpleTest>',
-    }),
+export default {
+  title: 'Story|How to create a story',
+};
+
+export const builtWithTag = () =>
+  tag('test', '<div>simple test ({ opts.value })</div>', '', '', () => {}) &&
+  mount('test', { value: 'with a parameter' });
+
+builtWithTag.story = {
+  name: 'built with tag',
+};
+
+export const builtAsString = () => ({ tags: ['<test><div>simple test</div></test>'] });
+
+builtAsString.story = {
+  name: 'built as string',
+};
+
+export const builtFromRawImport = () => simpleTestCompiled;
+
+builtFromRawImport.story = {
+  name: 'built from raw import',
+};
+
+export const builtFromTagsAndTemplate = () => ({
+  tags: [{ content: SimpleTestRaw, boundAs: 'mustBeUniquePlease' }],
+  template:
+    '<SimpleTest test={ "with a parameter" } value={"value is mapped to riotValue"}></SimpleTest>',
+});
+
+builtFromTagsAndTemplate.story = {
+  name: 'built from tags and template',
+  parameters: {
+    notes:
+      'WARN : the tag file root element must have exactly the same name (or else you will see nothing)',
+  },
+};
+
+export const tagsTemplateAndTagConstructorAtOnce = () => ({
+  tags: [
     {
-      notes:
-        'WARN : the tag file root element must have exactly the same name (or else you will see nothing)',
-    }
-  )
-
-  .add('tags, template and tagConstructor at once', () => ({
-    tags: [
-      {
-        content:
-          "<SimpleTest><div>HACKED : {opts.hacked} ; simple test ({opts.test || 'without parameter'}). Oh, by the way ({opts.riotValue || '... well, nothing'})</div></SimpleTest>",
-        boundAs: 'mustBeUniquePlease',
-      },
-    ],
-    template:
-      '<SimpleTest hacked={hacked} test={ "with a parameter" } value={"value is mapped to riotValue"}></SimpleTest>',
-    tagConstructor: function tagConstructor() {
-      this.hacked = true;
+      content:
+        "<SimpleTest><div>HACKED : {opts.hacked} ; simple test ({opts.test || 'without parameter'}). Oh, by the way ({opts.riotValue || '... well, nothing'})</div></SimpleTest>",
+      boundAs: 'mustBeUniquePlease',
     },
-  }))
+  ],
+  template:
+    '<SimpleTest hacked={hacked} test={ "with a parameter" } value={"value is mapped to riotValue"}></SimpleTest>',
+  tagConstructor: function tagConstructor() {
+    this.hacked = true;
+  },
+});
+
+tagsTemplateAndTagConstructorAtOnce.story = {
+  name: 'tags, template and tagConstructor at once',
+};
 
-  .add('built from the precompilation', () => mount('anothertest', {}), {
+export const builtFromThePrecompilation = () => mount('anothertest', {});
+
+builtFromThePrecompilation.story = {
+  name: 'built from the precompilation',
+  parameters: {
     notes: 'WARN, only works in lower case, never upper case with precompiled templates',
-  })
-
-  .add('the mount instruction is not necessary', () => ({ tagName: 'anothertest', opts: {} }))
-
-  .add('the opts value is not necessary', () => ({ tagName: 'anothertest' }));
-
-storiesOf('Story|Nest tags', module)
-  .add('Three tags', () => ({
-    tags: [
-      '<WebPage><PageHeader>Simple title</PageHeader><PageBody>Simple Content</PageBody></WebPage>',
-      '<PageHeader><h1><yield/></h1></PageHeader>',
-      '<PageBody><div style="border-radius: 1em;border-right: solid 1px #cac9c9;border-bottom: solid 1px #cac9c9;box-shadow: 1em 1em 2em #eae9e9; margin: 3em; padding: 3em;min-height: 10em;min-width: 30em"><yield/></div></PageBody>',
-    ],
-  }))
-
-  .add('Matriochka', () => ({
-    tags: [
-      '<Tag1><div>Inside tag1:<ul><li><Tag2><yield/></Tag2></li></ul></div></Tag1>',
-      '<Tag2><div>Inside tag2:<ul><li><Tag3><yield/></Tag3></li></ul></div></Tag2>',
-      '<Tag3><div>Inside tag3:<ul><li><Tag4><yield/></Tag4></li></ul></div></Tag3>',
-      '<Tag4><div>Inside tag4:<ul><li><Tag5><yield/></Tag5></li></ul></div></Tag4>',
-      '<Tag5><div>Inside tag5:<ul><li><yield/></li></ul></div></Tag5>',
-    ],
-    template: '<Matriochka><div><Tag1>Content</Tag1></div></Matriochka>',
-  }));
+  },
+};
+
+export const theMountInstructionIsNotNecessary = () => ({ tagName: 'anothertest', opts: {} });
+
+theMountInstructionIsNotNecessary.story = {
+  name: 'the mount instruction is not necessary',
+};
+
+export const theOptsValueIsNotNecessary = () => ({ tagName: 'anothertest' });
+
+theOptsValueIsNotNecessary.story = {
+  name: 'the opts value is not necessary',
+};
diff --git a/examples/standalone-preview/.babelrc.js b/examples/standalone-preview/.babelrc.js
new file mode 100644
index 000000000000..f053ebf7976e
--- /dev/null
+++ b/examples/standalone-preview/.babelrc.js
@@ -0,0 +1 @@
+module.exports = {};
diff --git a/examples/standalone-preview/README.md b/examples/standalone-preview/README.md
new file mode 100644
index 000000000000..50637155cae7
--- /dev/null
+++ b/examples/standalone-preview/README.md
@@ -0,0 +1,20 @@
+# Standalone Preview
+
+This project demonstrates a preview running in standalone mode using `parcel`.
+
+To run the standalone preview:
+
+```
+yarn storybook
+```
+
+This starts a `parcel` dev server on port `1337`.
+
+To view the stories in the storybook UI:
+
+```
+cd ../official-storybook
+yarn storybook --preview-url=http://localhost:1337/iframe.html
+```
+
+This runs the Storybook dev server, but instead of showing `official-storybook`'s stories, it attaches to the `parcel` dev server, lists its stories in the navigation, and shows its stories in the preview iframe.
diff --git a/examples/standalone-preview/package.json b/examples/standalone-preview/package.json
new file mode 100644
index 000000000000..bcd015de4f74
--- /dev/null
+++ b/examples/standalone-preview/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "standalone-preview",
+  "version": "5.2.0-alpha.36",
+  "private": true,
+  "scripts": {
+    "storybook": "parcel ./storybook.html --port 1337"
+  },
+  "devDependencies": {
+    "@storybook/react": "5.1.0-alpha.32",
+    "parcel": "^1.12.3",
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4"
+  }
+}
diff --git a/examples/standalone-preview/storybook.html b/examples/standalone-preview/storybook.html
new file mode 100644
index 000000000000..ee1a10affe69
--- /dev/null
+++ b/examples/standalone-preview/storybook.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title></title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="./storybook.tsx"></script>
+    <div class="sb-errordisplay sb-wrapper">
+      <div id="error-message" class="sb-heading"></div>
+      <pre class="sb-errordisplay_code"><code id="error-stack"></code></pre>
+    </div>
+  </body>
+</html>
diff --git a/examples/standalone-preview/storybook.tsx b/examples/standalone-preview/storybook.tsx
new file mode 100644
index 000000000000..8c0e649e1685
--- /dev/null
+++ b/examples/standalone-preview/storybook.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { configure, storiesOf } from '@storybook/react';
+
+configure(() => {
+  storiesOf('Component 1', module).add('Story 1', () => <div>Component 1 - Story 1</div>);
+
+  storiesOf('Component 2', module)
+    .add('Story 1', () => <div>Category 2 - Story 1</div>)
+    .add('Story 2', () => <div>Category 2 - Story 2</div>);
+}, module);
diff --git a/examples/svelte-kitchen-sink/.storybook/config.js b/examples/svelte-kitchen-sink/.storybook/config.js
index 74c96cf4295f..df6d13b09462 100644
--- a/examples/svelte-kitchen-sink/.storybook/config.js
+++ b/examples/svelte-kitchen-sink/.storybook/config.js
@@ -1,4 +1,4 @@
-import { configure, addParameters, addDecorator } from '@storybook/svelte';
+import { load, addParameters, addDecorator } from '@storybook/svelte';
 import { withA11y } from '@storybook/addon-a11y';
 
 addDecorator(withA11y);
@@ -8,12 +8,4 @@ addParameters({
   },
 });
 
-function loadStories() {
-  require('../src/stories');
-
-  const req = require.context('../src/stories', true, /\.stories\.js$/);
-
-  req.keys().forEach(filename => req(filename));
-}
-
-configure(loadStories, module);
+load(require.context('../src/stories', true, /\.stories\.js$/), module);
diff --git a/examples/svelte-kitchen-sink/.storybook/webpack.config.js b/examples/svelte-kitchen-sink/.storybook/webpack.config.js
index 243b6489507a..a943831441ac 100644
--- a/examples/svelte-kitchen-sink/.storybook/webpack.config.js
+++ b/examples/svelte-kitchen-sink/.storybook/webpack.config.js
@@ -3,7 +3,7 @@ const path = require('path');
 module.exports = async ({ config }) => {
   config.module.rules.push({
     test: [/\.stories\.js$/, /index\.js$/],
-    loaders: [require.resolve('@storybook/source-loader')],
+    loaders: [require.resolve('@storybook/addon-storysource/loader')],
     include: [path.resolve(__dirname, '../src')],
     enforce: 'pre',
   });
diff --git a/examples/svelte-kitchen-sink/__snapshots__/svelteshots.test.js.snap b/examples/svelte-kitchen-sink/__snapshots__/svelteshots.test.js.snap
new file mode 100644
index 000000000000..3f995d18506c
--- /dev/null
+++ b/examples/svelte-kitchen-sink/__snapshots__/svelteshots.test.js.snap
@@ -0,0 +1,471 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon|Actions Action on component method 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <button
+    class="button svelte-n2tx93 rounded"
+  >
+    <strong>
+      Round
+       corners
+    </strong>
+    <br />
+     
+    Custom text
+     
+  </button>
+</section>
+`;
+
+exports[`Storyshots Addon|Actions Action on view method 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <h1>
+    Button view
+  </h1>
+   
+  <button
+    class="button svelte-n2tx93"
+  >
+    <strong>
+      Square
+       corners
+    </strong>
+    <br />
+     
+    
+     
+    You clicked
+    : 
+    0
+  </button>
+   
+  <p>
+    A little text to show this is a view.
+  </p>
+   
+  <p>
+    If we need to test components in a Svelte environment, for instance to test slot behaviour,
+  </p>
+   
+  <p>
+    then wrapping the component up in a view
+  </p>
+   
+  <p>
+    made just for the story is the simplest way to achieve this.
+  </p>
+</section>
+`;
+
+exports[`Storyshots Addon|Backgrounds story 1 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <h1>
+    Button view
+  </h1>
+   
+  <button
+    class="button svelte-n2tx93"
+  >
+    <strong>
+      Square
+       corners
+    </strong>
+    <br />
+     
+    
+     
+    You clicked
+    : 
+    0
+  </button>
+   
+  <p>
+    A little text to show this is a view.
+  </p>
+   
+  <p>
+    If we need to test components in a Svelte environment, for instance to test slot behaviour,
+  </p>
+   
+  <p>
+    then wrapping the component up in a view
+  </p>
+   
+  <p>
+    made just for the story is the simplest way to achieve this.
+  </p>
+</section>
+`;
+
+exports[`Storyshots Addon|Centered rounded 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <button
+    class="button svelte-n2tx93 rounded"
+  >
+    <strong>
+      Round
+       corners
+    </strong>
+    <br />
+     
+    Look, I'm centered!
+     
+  </button>
+</section>
+`;
+
+exports[`Storyshots Addon|Centered with action 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <button
+    class="button svelte-n2tx93 rounded"
+  >
+    <strong>
+      Round
+       corners
+    </strong>
+    <br />
+     
+    
+     
+  </button>
+</section>
+`;
+
+exports[`Storyshots Addon|Knobs Simple 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <div
+    style="width: 200px; height: 200px; background-color: green;"
+  >
+    <p>
+      I am interactive
+    </p>
+  </div>
+</section>
+`;
+
+exports[`Storyshots Addon|Links Go to welcome view 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <div
+    class="main"
+  >
+    <h1>
+      Link Action
+    </h1>
+     
+    <button
+      class="link"
+    >
+      
+			    Return to the 
+      <code
+        class="code"
+      >
+        Welcome
+      </code>
+       view story.
+			  
+    </button>
+  </div>
+</section>
+`;
+
+exports[`Storyshots Addon|Notes Note with HTML 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <h1>
+    Button view
+  </h1>
+   
+  <button
+    class="button svelte-n2tx93"
+  >
+    <strong>
+      Square
+       corners
+    </strong>
+    <br />
+     
+    
+     
+    🤔😳😯😮😄😩😓😱🤓😑😶😊
+    : 
+    0
+  </button>
+   
+  <p>
+    A little text to show this is a view.
+  </p>
+   
+  <p>
+    If we need to test components in a Svelte environment, for instance to test slot behaviour,
+  </p>
+   
+  <p>
+    then wrapping the component up in a view
+  </p>
+   
+  <p>
+    made just for the story is the simplest way to achieve this.
+  </p>
+</section>
+`;
+
+exports[`Storyshots Addon|Notes Simple note 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <h1>
+    Button view
+  </h1>
+   
+  <button
+    class="button svelte-n2tx93"
+  >
+    <strong>
+      Square
+       corners
+    </strong>
+    <br />
+     
+    
+     
+    You clicked
+    : 
+    0
+  </button>
+   
+  <p>
+    A little text to show this is a view.
+  </p>
+   
+  <p>
+    If we need to test components in a Svelte environment, for instance to test slot behaviour,
+  </p>
+   
+  <p>
+    then wrapping the component up in a view
+  </p>
+   
+  <p>
+    made just for the story is the simplest way to achieve this.
+  </p>
+</section>
+`;
+
+exports[`Storyshots Button rounded 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <h1>
+    Button view
+  </h1>
+   
+  <button
+    class="button svelte-n2tx93 rounded"
+  >
+    <strong>
+      Round
+       corners
+    </strong>
+    <br />
+     
+    
+     
+    You clicked
+    : 
+    0
+  </button>
+   
+  <p>
+    A little text to show this is a view.
+  </p>
+   
+  <p>
+    If we need to test components in a Svelte environment, for instance to test slot behaviour,
+  </p>
+   
+  <p>
+    then wrapping the component up in a view
+  </p>
+   
+  <p>
+    made just for the story is the simplest way to achieve this.
+  </p>
+</section>
+`;
+
+exports[`Storyshots Button square 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <h1>
+    Button view
+  </h1>
+   
+  <button
+    class="button svelte-n2tx93"
+  >
+    <strong>
+      Square
+       corners
+    </strong>
+    <br />
+     
+    
+     
+    You clicked
+    : 
+    0
+  </button>
+   
+  <p>
+    A little text to show this is a view.
+  </p>
+   
+  <p>
+    If we need to test components in a Svelte environment, for instance to test slot behaviour,
+  </p>
+   
+  <p>
+    then wrapping the component up in a view
+  </p>
+   
+  <p>
+    made just for the story is the simplest way to achieve this.
+  </p>
+</section>
+`;
+
+exports[`Storyshots Welcome Welcome 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <div
+    class="main svelte-5n9a95"
+  >
+    <h1>
+      Welcome to Storybook for Svelte
+    </h1>
+    
+			  
+    <p>
+      
+			    This is a UI component dev environment for your svelte app.
+			  
+    </p>
+    
+			  
+    <p>
+      
+			    We've added some basic stories inside the 
+      <code
+        class="code svelte-5n9a95"
+      >
+        src/stories
+      </code>
+       directory.
+			    
+      <strong>
+        A story is like a visual test case
+      </strong>
+      
+			    and represents a single state of one or more UI components.
+			    You can have as many stories as you want.
+			  
+    </p>
+    
+
+			  
+    <h1
+      class="logo svelte-5n9a95"
+    >
+      Svelte
+    </h1>
+    
+
+			  
+    <p>
+      
+			    Just like that, you can add your own components as stories.
+			    You can also edit those components and see changes right away.
+			    
+      <br />
+      
+			    (Try editing the 
+      <code
+        class="code svelte-5n9a95"
+      >
+        Button
+      </code>
+       component
+			    located at 
+      <code
+        class="code svelte-5n9a95"
+      >
+        src/stories/views/Welcome.svelte
+      </code>
+      .)
+			  
+    </p>
+    
+			  
+    <p>
+      
+			    Usually we create stories with smaller UI components in the app.
+      <br />
+      
+			    Have a look at the
+			    
+      <a
+        class="link svelte-5n9a95"
+        href="https://storybook.js.org/basics/writing-stories"
+        target="_blank"
+      >
+        Writing Stories
+      </a>
+      
+			    section in our documentation.
+			  
+    </p>
+    
+			  
+    <p
+      class="note svelte-5n9a95"
+    >
+      <b>
+        NOTE:
+      </b>
+      
+			    
+      <br />
+      
+			    Have a look at the
+			    
+      <code
+        class="code svelte-5n9a95"
+      >
+        .storybook/webpack.config.js
+      </code>
+      
+			    to add webpack
+			    loaders and plugins you are using in this project.
+			  
+    </p>
+  </div>
+</section>
+`;
diff --git a/examples/svelte-kitchen-sink/package.json b/examples/svelte-kitchen-sink/package.json
index 4f9eb7dfcab1..405d6dfc5ac7 100644
--- a/examples/svelte-kitchen-sink/package.json
+++ b/examples/svelte-kitchen-sink/package.json
@@ -1,6 +1,6 @@
 {
   "name": "svelte-example",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "private": true,
   "scripts": {
     "build-storybook": "build-storybook -s public",
@@ -11,19 +11,19 @@
     "global": "^4.3.2"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "5.2.0-alpha.30",
-    "@storybook/addon-actions": "5.2.0-alpha.30",
-    "@storybook/addon-backgrounds": "5.2.0-alpha.30",
-    "@storybook/addon-centered": "5.2.0-alpha.30",
-    "@storybook/addon-knobs": "5.2.0-alpha.30",
-    "@storybook/addon-links": "5.2.0-alpha.30",
-    "@storybook/addon-notes": "5.2.0-alpha.30",
-    "@storybook/addon-options": "5.2.0-alpha.30",
-    "@storybook/addon-storyshots": "5.2.0-alpha.30",
-    "@storybook/addon-storysource": "5.2.0-alpha.30",
-    "@storybook/addon-viewport": "5.2.0-alpha.30",
-    "@storybook/addons": "5.2.0-alpha.30",
-    "@storybook/source-loader": "5.2.0-alpha.30",
-    "@storybook/svelte": "5.2.0-alpha.30"
+    "@storybook/addon-a11y": "5.2.0-alpha.36",
+    "@storybook/addon-actions": "5.2.0-alpha.36",
+    "@storybook/addon-backgrounds": "5.2.0-alpha.36",
+    "@storybook/addon-centered": "5.2.0-alpha.36",
+    "@storybook/addon-knobs": "5.2.0-alpha.36",
+    "@storybook/addon-links": "5.2.0-alpha.36",
+    "@storybook/addon-notes": "5.2.0-alpha.36",
+    "@storybook/addon-options": "5.2.0-alpha.36",
+    "@storybook/addon-storyshots": "5.2.0-alpha.36",
+    "@storybook/addon-storysource": "5.2.0-alpha.36",
+    "@storybook/addon-viewport": "5.2.0-alpha.36",
+    "@storybook/addons": "5.2.0-alpha.36",
+    "@storybook/source-loader": "5.2.0-alpha.36",
+    "@storybook/svelte": "5.2.0-alpha.36"
   }
 }
diff --git a/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot b/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot
deleted file mode 100644
index c3dc6821fc20..000000000000
--- a/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot
+++ /dev/null
@@ -1,62 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addon|Actions Action on component method 1`] = `
-<section
-  class="storybook-snapshot-container"
->
-  <button
-    class="button svelte-n2tx93 rounded"
-  >
-    <strong>
-      Round
-       corners
-    </strong>
-    <br />
-     
-    Custom text
-     
-  </button>
-</section>
-`;
-
-exports[`Storyshots Addon|Actions Action on view method 1`] = `
-<section
-  class="storybook-snapshot-container"
->
-  <h1>
-    Button view
-  </h1>
-   
-  <button
-    class="button svelte-n2tx93"
-  >
-    <strong>
-      Square
-       corners
-    </strong>
-    <br />
-     
-    
-     
-    You clicked
-    : 
-    0
-  </button>
-   
-  <p>
-    A little text to show this is a view.
-  </p>
-   
-  <p>
-    If we need to test components in a Svelte environment, for instance to test slot behaviour,
-  </p>
-   
-  <p>
-    then wrapping the component up in a view
-  </p>
-   
-  <p>
-    made just for the story is the simplest way to achieve this.
-  </p>
-</section>
-`;
diff --git a/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-backgrounds.stories.storyshot b/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-backgrounds.stories.storyshot
deleted file mode 100644
index 3f40c77cc6d2..000000000000
--- a/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-backgrounds.stories.storyshot
+++ /dev/null
@@ -1,43 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addon|Backgrounds story 1 1`] = `
-<section
-  class="storybook-snapshot-container"
->
-  <h1>
-    Button view
-  </h1>
-   
-  <button
-    class="button svelte-n2tx93"
-  >
-    <strong>
-      Square
-       corners
-    </strong>
-    <br />
-     
-    
-     
-    You clicked
-    : 
-    0
-  </button>
-   
-  <p>
-    A little text to show this is a view.
-  </p>
-   
-  <p>
-    If we need to test components in a Svelte environment, for instance to test slot behaviour,
-  </p>
-   
-  <p>
-    then wrapping the component up in a view
-  </p>
-   
-  <p>
-    made just for the story is the simplest way to achieve this.
-  </p>
-</section>
-`;
diff --git a/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-centered.stories.storyshot b/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-centered.stories.storyshot
deleted file mode 100644
index 1232bcea2ae0..000000000000
--- a/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-centered.stories.storyshot
+++ /dev/null
@@ -1,39 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addon|Centered rounded 1`] = `
-<section
-  class="storybook-snapshot-container"
->
-  <button
-    class="button svelte-n2tx93 rounded"
-  >
-    <strong>
-      Round
-       corners
-    </strong>
-    <br />
-     
-    Look, I'm centered!
-     
-  </button>
-</section>
-`;
-
-exports[`Storyshots Addon|Centered with action 1`] = `
-<section
-  class="storybook-snapshot-container"
->
-  <button
-    class="button svelte-n2tx93 rounded"
-  >
-    <strong>
-      Round
-       corners
-    </strong>
-    <br />
-     
-    
-     
-  </button>
-</section>
-`;
diff --git a/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot b/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot
deleted file mode 100644
index 9ad2c1cc73db..000000000000
--- a/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot
+++ /dev/null
@@ -1,15 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addon|Knobs Simple 1`] = `
-<section
-  class="storybook-snapshot-container"
->
-  <div
-    style="width: 200px; height: 200px; background-color: green;"
-  >
-    <p>
-      I am interactive
-    </p>
-  </div>
-</section>
-`;
diff --git a/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-links.stories.storyshot b/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-links.stories.storyshot
deleted file mode 100644
index 8e8009d5083f..000000000000
--- a/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-links.stories.storyshot
+++ /dev/null
@@ -1,29 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addon|Links Go to welcome view 1`] = `
-<section
-  class="storybook-snapshot-container"
->
-  <div
-    class="main"
-  >
-    <h1>
-      Link Action
-    </h1>
-     
-    <button
-      class="link"
-    >
-      
-			    Return to the 
-      <code
-        class="code"
-      >
-        Welcome
-      </code>
-       view story.
-			  
-    </button>
-  </div>
-</section>
-`;
diff --git a/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot b/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot
deleted file mode 100644
index 4f71436ef5dd..000000000000
--- a/examples/svelte-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot
+++ /dev/null
@@ -1,85 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addon|Notes Note with HTML 1`] = `
-<section
-  class="storybook-snapshot-container"
->
-  <h1>
-    Button view
-  </h1>
-   
-  <button
-    class="button svelte-n2tx93"
-  >
-    <strong>
-      Square
-       corners
-    </strong>
-    <br />
-     
-    
-     
-    🤔😳😯😮😄😩😓😱🤓😑😶😊
-    : 
-    0
-  </button>
-   
-  <p>
-    A little text to show this is a view.
-  </p>
-   
-  <p>
-    If we need to test components in a Svelte environment, for instance to test slot behaviour,
-  </p>
-   
-  <p>
-    then wrapping the component up in a view
-  </p>
-   
-  <p>
-    made just for the story is the simplest way to achieve this.
-  </p>
-</section>
-`;
-
-exports[`Storyshots Addon|Notes Simple note 1`] = `
-<section
-  class="storybook-snapshot-container"
->
-  <h1>
-    Button view
-  </h1>
-   
-  <button
-    class="button svelte-n2tx93"
-  >
-    <strong>
-      Square
-       corners
-    </strong>
-    <br />
-     
-    
-     
-    You clicked
-    : 
-    0
-  </button>
-   
-  <p>
-    A little text to show this is a view.
-  </p>
-   
-  <p>
-    If we need to test components in a Svelte environment, for instance to test slot behaviour,
-  </p>
-   
-  <p>
-    then wrapping the component up in a view
-  </p>
-   
-  <p>
-    made just for the story is the simplest way to achieve this.
-  </p>
-</section>
-`;
diff --git a/examples/svelte-kitchen-sink/src/stories/__snapshots__/index.storyshot b/examples/svelte-kitchen-sink/src/stories/__snapshots__/index.storyshot
deleted file mode 100644
index 3d58a6b41277..000000000000
--- a/examples/svelte-kitchen-sink/src/stories/__snapshots__/index.storyshot
+++ /dev/null
@@ -1,204 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Button rounded 1`] = `
-<section
-  class="storybook-snapshot-container"
->
-  <h1>
-    Button view
-  </h1>
-   
-  <button
-    class="button svelte-n2tx93 rounded"
-  >
-    <strong>
-      Round
-       corners
-    </strong>
-    <br />
-     
-    
-     
-    You clicked
-    : 
-    0
-  </button>
-   
-  <p>
-    A little text to show this is a view.
-  </p>
-   
-  <p>
-    If we need to test components in a Svelte environment, for instance to test slot behaviour,
-  </p>
-   
-  <p>
-    then wrapping the component up in a view
-  </p>
-   
-  <p>
-    made just for the story is the simplest way to achieve this.
-  </p>
-</section>
-`;
-
-exports[`Storyshots Button square 1`] = `
-<section
-  class="storybook-snapshot-container"
->
-  <h1>
-    Button view
-  </h1>
-   
-  <button
-    class="button svelte-n2tx93"
-  >
-    <strong>
-      Square
-       corners
-    </strong>
-    <br />
-     
-    
-     
-    You clicked
-    : 
-    0
-  </button>
-   
-  <p>
-    A little text to show this is a view.
-  </p>
-   
-  <p>
-    If we need to test components in a Svelte environment, for instance to test slot behaviour,
-  </p>
-   
-  <p>
-    then wrapping the component up in a view
-  </p>
-   
-  <p>
-    made just for the story is the simplest way to achieve this.
-  </p>
-</section>
-`;
-
-exports[`Storyshots Welcome Welcome 1`] = `
-<section
-  class="storybook-snapshot-container"
->
-  <div
-    class="main svelte-5n9a95"
-  >
-    <h1>
-      Welcome to Storybook for Svelte
-    </h1>
-    
-			  
-    <p>
-      
-			    This is a UI component dev environment for your svelte app.
-			  
-    </p>
-    
-			  
-    <p>
-      
-			    We've added some basic stories inside the 
-      <code
-        class="code svelte-5n9a95"
-      >
-        src/stories
-      </code>
-       directory.
-			    
-      <strong>
-        A story is like a visual test case
-      </strong>
-      
-			    and represents a single state of one or more UI components.
-			    You can have as many stories as you want.
-			  
-    </p>
-    
-
-			  
-    <h1
-      class="logo svelte-5n9a95"
-    >
-      Svelte
-    </h1>
-    
-
-			  
-    <p>
-      
-			    Just like that, you can add your own components as stories.
-			    You can also edit those components and see changes right away.
-			    
-      <br />
-      
-			    (Try editing the 
-      <code
-        class="code svelte-5n9a95"
-      >
-        Button
-      </code>
-       component
-			    located at 
-      <code
-        class="code svelte-5n9a95"
-      >
-        src/stories/views/Welcome.svelte
-      </code>
-      .)
-			  
-    </p>
-    
-			  
-    <p>
-      
-			    Usually we create stories with smaller UI components in the app.
-      <br />
-      
-			    Have a look at the
-			    
-      <a
-        class="link svelte-5n9a95"
-        href="https://storybook.js.org/basics/writing-stories"
-        target="_blank"
-      >
-        Writing Stories
-      </a>
-      
-			    section in our documentation.
-			  
-    </p>
-    
-			  
-    <p
-      class="note svelte-5n9a95"
-    >
-      <b>
-        NOTE:
-      </b>
-      
-			    
-      <br />
-      
-			    Have a look at the
-			    
-      <code
-        class="code svelte-5n9a95"
-      >
-        .storybook/webpack.config.js
-      </code>
-      
-			    to add webpack
-			    loaders and plugins you are using in this project.
-			  
-    </p>
-  </div>
-</section>
-`;
diff --git a/examples/svelte-kitchen-sink/src/stories/addon-actions.stories.js b/examples/svelte-kitchen-sink/src/stories/addon-actions.stories.js
index 5562e468b979..74fbb9a15e76 100644
--- a/examples/svelte-kitchen-sink/src/stories/addon-actions.stories.js
+++ b/examples/svelte-kitchen-sink/src/stories/addon-actions.stories.js
@@ -1,22 +1,33 @@
-import { storiesOf } from '@storybook/svelte';
 import { action } from '@storybook/addon-actions';
 
 import ButtonView from './views/ButtonView.svelte';
 import Button from '../components/Button.svelte';
 
-storiesOf('Addon|Actions', module)
-  .add('Action on view method', () => ({
-    Component: ButtonView,
-    props: {
-      click: action('I am logging in the actions tab'),
-    },
-  }))
-  .add('Action on component method', () => ({
-    Component: Button,
-    props: {
-      text: 'Custom text',
-    },
-    on: {
-      click: action('I am logging in the actions tab too'),
-    },
-  }));
+export default {
+  title: 'Addon|Actions',
+};
+
+export const actionOnViewMethod = () => ({
+  Component: ButtonView,
+  props: {
+    click: action('I am logging in the actions tab'),
+  },
+});
+
+actionOnViewMethod.story = {
+  name: 'Action on view method',
+};
+
+export const actionOnComponentMethod = () => ({
+  Component: Button,
+  props: {
+    text: 'Custom text',
+  },
+  on: {
+    click: action('I am logging in the actions tab too'),
+  },
+});
+
+actionOnComponentMethod.story = {
+  name: 'Action on component method',
+};
diff --git a/examples/svelte-kitchen-sink/src/stories/addon-backgrounds.stories.js b/examples/svelte-kitchen-sink/src/stories/addon-backgrounds.stories.js
index a03bafbed00e..df858cd1c2c2 100644
--- a/examples/svelte-kitchen-sink/src/stories/addon-backgrounds.stories.js
+++ b/examples/svelte-kitchen-sink/src/stories/addon-backgrounds.stories.js
@@ -1,14 +1,19 @@
-import { storiesOf } from '@storybook/svelte';
-
 import ButtonView from './views/ButtonView.svelte';
 
-storiesOf('Addon|Backgrounds', module)
-  .addParameters({
+export default {
+  title: 'Addon|Backgrounds',
+  parameters: {
     backgrounds: [
       { name: 'light', value: '#eeeeee' },
       { name: 'dark', value: '#222222', default: true },
     ],
-  })
-  .add('story 1', () => ({
-    Component: ButtonView,
-  }));
+  },
+};
+
+export const story1 = () => ({
+  Component: ButtonView,
+});
+
+story1.story = {
+  name: 'story 1',
+};
diff --git a/examples/svelte-kitchen-sink/src/stories/addon-centered.stories.js b/examples/svelte-kitchen-sink/src/stories/addon-centered.stories.js
index 51fac4c214b1..f1fcb4a169a5 100644
--- a/examples/svelte-kitchen-sink/src/stories/addon-centered.stories.js
+++ b/examples/svelte-kitchen-sink/src/stories/addon-centered.stories.js
@@ -1,24 +1,31 @@
-import { storiesOf } from '@storybook/svelte';
 import Centered from '@storybook/addon-centered/svelte';
 import { action } from '@storybook/addon-actions';
 
 import Button from '../components/Button.svelte';
 
-storiesOf('Addon|Centered', module)
-  .addParameters({
+export default {
+  title: 'Addon|Centered',
+  decorators: [Centered],
+  parameters: {
     component: Centered,
-  })
-  .addDecorator(Centered)
-  .add('rounded', () => ({
-    Component: Button,
-    props: {
-      rounded: true,
-      text: "Look, I'm centered!",
-    },
-  }))
-  .add('with action', () => ({
-    Component: Button,
-    on: {
-      click: action(`Tell me it ain't so! Centered and with actions! Thanks @ekhaled :)`),
-    },
-  }));
+  },
+};
+
+export const rounded = () => ({
+  Component: Button,
+  props: {
+    rounded: true,
+    text: "Look, I'm centered!",
+  },
+});
+
+export const withAction = () => ({
+  Component: Button,
+  on: {
+    click: action(`Tell me it ain't so! Centered and with actions! Thanks @ekhaled :)`),
+  },
+});
+
+withAction.story = {
+  name: 'with action',
+};
diff --git a/examples/svelte-kitchen-sink/src/stories/addon-knobs.stories.js b/examples/svelte-kitchen-sink/src/stories/addon-knobs.stories.js
index 8490050d15e4..b97019cab838 100644
--- a/examples/svelte-kitchen-sink/src/stories/addon-knobs.stories.js
+++ b/examples/svelte-kitchen-sink/src/stories/addon-knobs.stories.js
@@ -1,32 +1,34 @@
-import { storiesOf } from '@storybook/svelte';
 import { withKnobs, text, number } from '@storybook/addon-knobs';
 
 import ActionKnobView from './views/ActionKnobView.svelte';
 
-storiesOf('Addon|Knobs', module)
-  .addDecorator(withKnobs)
-  .add('Simple', () => {
-    const backgroundColor = text('Background', 'green');
-    const width = number('Width', 200, {
-      range: true,
-      min: 100,
-      max: 1000,
-      step: 100,
-    });
+export default {
+  title: 'Addon|Knobs',
+  decorators: [withKnobs],
+};
 
-    const height = number('Height', 200, {
-      range: true,
-      min: 100,
-      max: 1000,
-      step: 100,
-    });
+export const Simple = () => {
+  const backgroundColor = text('Background', 'green');
+  const width = number('Width', 200, {
+    range: true,
+    min: 100,
+    max: 1000,
+    step: 100,
+  });
 
-    return {
-      Component: ActionKnobView,
-      props: {
-        backgroundColor,
-        width,
-        height,
-      },
-    };
+  const height = number('Height', 200, {
+    range: true,
+    min: 100,
+    max: 1000,
+    step: 100,
   });
+
+  return {
+    Component: ActionKnobView,
+    props: {
+      backgroundColor,
+      width,
+      height,
+    },
+  };
+};
diff --git a/examples/svelte-kitchen-sink/src/stories/addon-links.stories.js b/examples/svelte-kitchen-sink/src/stories/addon-links.stories.js
index ff8d0cbe6dd9..e76a4d3875da 100644
--- a/examples/svelte-kitchen-sink/src/stories/addon-links.stories.js
+++ b/examples/svelte-kitchen-sink/src/stories/addon-links.stories.js
@@ -1,11 +1,18 @@
-import { storiesOf } from '@storybook/svelte';
 import { linkTo } from '@storybook/addon-links';
 
 import ActionLinkView from './views/ActionLinkView.svelte';
 
-storiesOf('Addon|Links', module).add('Go to welcome view', () => ({
+export default {
+  title: 'Addon|Links',
+};
+
+export const goToWelcomeView = () => ({
   Component: ActionLinkView,
   on: {
     click: linkTo('Welcome'),
   },
-}));
+});
+
+goToWelcomeView.story = {
+  name: 'Go to welcome view',
+};
diff --git a/examples/svelte-kitchen-sink/src/stories/addon-notes.stories.js b/examples/svelte-kitchen-sink/src/stories/addon-notes.stories.js
index 0b020f6a929a..c64445c16136 100644
--- a/examples/svelte-kitchen-sink/src/stories/addon-notes.stories.js
+++ b/examples/svelte-kitchen-sink/src/stories/addon-notes.stories.js
@@ -1,30 +1,34 @@
-import { storiesOf } from '@storybook/svelte';
-
 import ButtonView from './views/ButtonView.svelte';
 
-storiesOf('Addon|Notes', module)
-  .add(
-    'Simple note',
-    () => ({
-      Component: ButtonView,
-    }),
-    { notes: 'My notes on the [ButtonView](/story/addon-notes--simple-note) component' }
-  )
-  .add(
-    'Note with HTML',
-    () => ({
-      Component: ButtonView,
-      props: {
-        text: '🤔😳😯😮😄😩😓😱🤓😑😶😊',
-      },
-    }),
-    {
-      notes: `
-      <h2>My notes on emojies</h2>
+export default {
+  title: 'Addon|Notes',
+};
+
+export const simpleNote = () => ({
+  Component: ButtonView,
+});
+
+simpleNote.story = {
+  name: 'Simple note',
+  parameters: { notes: 'My notes on the [ButtonView](/story/addon-notes--simple-note) component' },
+};
+
+export const noteWithHtml = () => ({
+  Component: ButtonView,
+  props: {
+    text: '🤔😳😯😮😄😩😓😱🤓😑😶😊',
+  },
+});
+
+noteWithHtml.story = {
+  name: 'Note with HTML',
+  parameters: {
+    notes: `
+    <h2>My notes on emojies</h2>
 
-      <em>It's not all that important to be honest, but..</em>
+    <em>It's not all that important to be honest, but..</em>
 
-      Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
-    `,
-    }
-  );
+    Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
+  `,
+  },
+};
diff --git a/examples/svelte-kitchen-sink/src/stories/button.stories.js b/examples/svelte-kitchen-sink/src/stories/button.stories.js
new file mode 100644
index 000000000000..a68a4d865b13
--- /dev/null
+++ b/examples/svelte-kitchen-sink/src/stories/button.stories.js
@@ -0,0 +1,21 @@
+import ButtonView from './views/ButtonView.svelte';
+
+export default {
+  title: 'Button',
+};
+
+export const rounded = () => ({
+  Component: ButtonView,
+  props: {
+    rounded: true,
+    message: 'Rounded text',
+  },
+});
+
+export const square = () => ({
+  Component: ButtonView,
+  props: {
+    rounded: false,
+    message: 'Squared text',
+  },
+});
diff --git a/examples/svelte-kitchen-sink/src/stories/index.js b/examples/svelte-kitchen-sink/src/stories/index.js
deleted file mode 100644
index ee0d59093eb5..000000000000
--- a/examples/svelte-kitchen-sink/src/stories/index.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { storiesOf } from '@storybook/svelte';
-
-import WelcomeView from './views/WelcomeView.svelte';
-import ButtonView from './views/ButtonView.svelte';
-
-storiesOf('Welcome', module).add('Welcome', () => ({
-  Component: WelcomeView,
-}));
-
-storiesOf('Button', module)
-  .add('rounded', () => ({
-    Component: ButtonView,
-    props: {
-      rounded: true,
-      message: 'Rounded text',
-    },
-  }))
-  .add('square', () => ({
-    Component: ButtonView,
-    props: {
-      rounded: false,
-      message: 'Squared text',
-    },
-  }));
diff --git a/examples/svelte-kitchen-sink/src/stories/welcome.stories.js b/examples/svelte-kitchen-sink/src/stories/welcome.stories.js
new file mode 100644
index 000000000000..865dbdc60663
--- /dev/null
+++ b/examples/svelte-kitchen-sink/src/stories/welcome.stories.js
@@ -0,0 +1,9 @@
+import WelcomeView from './views/WelcomeView.svelte';
+
+export default {
+  title: 'Welcome',
+};
+
+export const Welcome = () => ({
+  Component: WelcomeView,
+});
diff --git a/examples/vue-kitchen-sink/.storybook/config.js b/examples/vue-kitchen-sink/.storybook/config.js
index a6e5cee86579..9fbd5064f928 100644
--- a/examples/vue-kitchen-sink/.storybook/config.js
+++ b/examples/vue-kitchen-sink/.storybook/config.js
@@ -1,4 +1,4 @@
-import { configure, addParameters, addDecorator } from '@storybook/vue';
+import { load, addParameters, addDecorator } from '@storybook/vue';
 import Vue from 'vue';
 import Vuex from 'vuex';
 import { withA11y } from '@storybook/addon-a11y';
@@ -13,15 +13,12 @@ Vue.use(Vuex);
 addParameters({
   options: {
     hierarchyRootSeparator: /\|/,
+    docs: {
+      iframeHeight: '60px',
+    },
   },
   docs: DocsPage,
 });
 
-function loadStories() {
-  require('../src/stories');
-
-  const req = require.context('../src/stories', true, /\.stories\.js$/);
-  req.keys().forEach(filename => req(filename));
-}
-
-configure(loadStories, module);
+load(require.context('../src/stories', true, /\.stories\.js$/), module);
+load(require.context('../src/stories', true, /\.stories\.mdx$/), module);
diff --git a/examples/vue-kitchen-sink/.storybook/presets.js b/examples/vue-kitchen-sink/.storybook/presets.js
new file mode 100644
index 000000000000..f140053de1f8
--- /dev/null
+++ b/examples/vue-kitchen-sink/.storybook/presets.js
@@ -0,0 +1,8 @@
+module.exports = [
+  {
+    name: '@storybook/addon-docs/vue/preset',
+    options: {
+      configureJSX: true,
+    },
+  },
+];
diff --git a/examples/vue-kitchen-sink/.storybook/webpack.config.js b/examples/vue-kitchen-sink/.storybook/webpack.config.js
index 243b6489507a..567ca493a535 100644
--- a/examples/vue-kitchen-sink/.storybook/webpack.config.js
+++ b/examples/vue-kitchen-sink/.storybook/webpack.config.js
@@ -1,9 +1,14 @@
 const path = require('path');
 
 module.exports = async ({ config }) => {
+  config.module.rules.push({
+    test: /\.vue$/,
+    loader: 'storybook-addon-vue-info/loader',
+    enforce: 'post',
+  });
   config.module.rules.push({
     test: [/\.stories\.js$/, /index\.js$/],
-    loaders: [require.resolve('@storybook/source-loader')],
+    loaders: [require.resolve('@storybook/addon-storysource/loader')],
     include: [path.resolve(__dirname, '../src')],
     enforce: 'pre',
   });
diff --git a/examples/vue-kitchen-sink/__snapshots__/vueshots.test.js.snap b/examples/vue-kitchen-sink/__snapshots__/vueshots.test.js.snap
new file mode 100644
index 000000000000..228495f79c6f
--- /dev/null
+++ b/examples/vue-kitchen-sink/__snapshots__/vueshots.test.js.snap
@@ -0,0 +1,562 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon|Actions Action and method 1`] = `
+<button
+  class="button"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  Click me to log the action!
+</button>
+`;
+
+exports[`Storyshots Addon|Actions Action only 1`] = `
+<button
+  class="button"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  Click me to log the action!
+</button>
+`;
+
+exports[`Storyshots Addon|Actions Multiple actions 1`] = `
+<button
+  class="button"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  (Double) click me to log the action!
+</button>
+`;
+
+exports[`Storyshots Addon|Actions Multiple actions, object 1`] = `
+<button
+  class="button"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  (Double) click me to log the action!
+</button>
+`;
+
+exports[`Storyshots Addon|Backgrounds story 1 1`] = `
+<button>
+  You should be able to switch backgrounds for this story
+</button>
+`;
+
+exports[`Storyshots Addon|Backgrounds story 2 1`] = `
+<button>
+  This one too!
+</button>
+`;
+
+exports[`Storyshots Addon|Centered rounded 1`] = `
+<div
+  style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; align-items: center; overflow: auto;"
+>
+  <div
+    style="margin: auto; max-height: 100%;"
+  >
+    <button
+      class="button rounded"
+      style="color: rgb(66, 185, 131); border-color: #42b983;"
+    >
+      A Button with rounded edges!
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Addon|Contexts Languages 1`] = `
+<div
+  style="color: white; background: rgb(23, 63, 95); height: 100vh; padding: 10px;"
+>
+  <div>
+    
+      Your locale is unknown, so I say NULL!
+    
+  </div>
+</div>
+`;
+
+exports[`Storyshots Addon|Contexts Simple CSS Theming 1`] = `
+<div
+  style="color: white; background: rgb(23, 63, 95); height: 100vh; padding: 10px;"
+>
+  <span>
+    I'm a children of the injected 'div' (where provides a theming context).
+  </span>
+</div>
+`;
+
+exports[`Storyshots Addon|Knobs All knobs 1`] = `
+<div
+  style="border: 2px dotted; padding: 8px 22px; border-radius: 8px; border-color: deeppink;"
+>
+  <h1>
+    My name is Jane,
+  </h1>
+   
+  <h3>
+    today is January 20, 2017
+  </h3>
+   
+  <p>
+    I have a stock of 20 apples, costing $2.25 each.
+  </p>
+   
+  <p>
+    Also, I have:
+  </p>
+   
+  <ul>
+    <li>
+      Laptop
+    </li>
+    <li>
+      Book
+    </li>
+    <li>
+      Whiskey
+    </li>
+  </ul>
+   
+  <p>
+    Nice to meet you!
+  </p>
+</div>
+`;
+
+exports[`Storyshots Addon|Knobs Simple 1`] = `
+<div>
+  I am John Doe and I'm 40 years old.
+</div>
+`;
+
+exports[`Storyshots Addon|Knobs XSS safety 1`] = `
+<div>
+  &lt;img src=x onerror="alert('XSS Attack')" &gt;
+</div>
+`;
+
+exports[`Storyshots Addon|Links Go to welcome 1`] = `
+<button
+  class="button rounded"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  This buttons links to Welcome!
+</button>
+`;
+
+exports[`Storyshots Addon|Notes Note with HTML 1`] = `
+<p>
+  🤔😳😯😮
+  <br />
+  😄😩😓😱
+  <br />
+  🤓😑😶😊
+</p>
+`;
+
+exports[`Storyshots Addon|Notes Simple note 1`] = `
+<p>
+  <strong>
+    Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.
+  </strong>
+</p>
+`;
+
+exports[`Storyshots App App 1`] = `
+<div
+  id="app"
+>
+  <img
+    src="./logo.png"
+  />
+   
+  <h1 />
+   
+  <h2>
+    Essential Links
+  </h2>
+   
+  <ul>
+    <li>
+      <a
+        href="https://vuejs.org"
+        target="_blank"
+      >
+        Core Docs
+      </a>
+    </li>
+     
+    <li>
+      <a
+        href="https://forum.vuejs.org"
+        target="_blank"
+      >
+        Forum
+      </a>
+    </li>
+     
+    <li>
+      <a
+        href="https://gitter.im/vuejs/vue"
+        target="_blank"
+      >
+        Gitter Chat
+      </a>
+    </li>
+     
+    <li>
+      <a
+        href="https://twitter.com/vuejs"
+        target="_blank"
+      >
+        Twitter
+      </a>
+    </li>
+  </ul>
+   
+  <h2>
+    Ecosystem
+  </h2>
+   
+  <ul>
+    <li>
+      <a
+        href="http://router.vuejs.org/"
+        target="_blank"
+      >
+        vue-router
+      </a>
+    </li>
+     
+    <li>
+      <a
+        href="http://vuex.vuejs.org/"
+        target="_blank"
+      >
+        vuex
+      </a>
+    </li>
+     
+    <li>
+      <a
+        href="http://vue-loader.vuejs.org/"
+        target="_blank"
+      >
+        vue-loader
+      </a>
+    </li>
+     
+    <li>
+      <a
+        href="https://github.com/vuejs/awesome-vue"
+        target="_blank"
+      >
+        awesome-vue
+      </a>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`Storyshots Button rounded 1`] = `
+<button
+  class="button rounded"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  A Button with rounded edges!
+</button>
+`;
+
+exports[`Storyshots Button square 1`] = `
+<button
+  class="button"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  A Button with square edges!
+</button>
+`;
+
+exports[`Storyshots Core|Parameters passed to story 1`] = `
+<div>
+  Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{},"docs":{"iframeHeight":"60px"}},"globalParameter":"globalParameter","framework":"vue","chapterParameter":"chapterParameter","storyParameter":"storyParameter"}
+</div>
+`;
+
+exports[`Storyshots Core|Template string only 1`] = `
+<button
+  class="button"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  A Button with square edges!
+</button>
+`;
+
+exports[`Storyshots Custom|Decorator for Vue render 1`] = `
+<div
+  style="border: medium solid blue;"
+>
+  <div
+    style="border: medium solid red;"
+  >
+    <button
+      class="button"
+      style="color: pink; border-color: pink;"
+    >
+      renders component: MyButton!
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Custom|Decorator for Vue template 1`] = `
+<div
+  style="border: medium solid blue;"
+>
+  <div
+    style="border: medium solid red;"
+  >
+    <button
+      class="button"
+      style="color: rgb(66, 185, 131); border-color: #42b983;"
+    >
+      MyButton with template!
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Custom|Method for rendering Vue JSX 1`] = `
+<button
+  class="button"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  MyButton rendered with JSX!
+</button>
+`;
+
+exports[`Storyshots Custom|Method for rendering Vue pre-registered component 1`] = `
+<p>
+  <em>
+    This component was pre-registered in .storybook/config.js
+  </em>
+  <br />
+   
+  <button
+    class="button"
+    style="color: rgb(66, 185, 131); border-color: #42b983;"
+  >
+    MyButton rendered in a template!
+  </button>
+</p>
+`;
+
+exports[`Storyshots Custom|Method for rendering Vue render + component 1`] = `
+<button
+  class="button"
+  style="color: pink; border-color: pink;"
+>
+  renders component: MyButton!
+</button>
+`;
+
+exports[`Storyshots Custom|Method for rendering Vue render 1`] = `
+<div>
+  renders a div with some text in it..
+</div>
+`;
+
+exports[`Storyshots Custom|Method for rendering Vue template + component 1`] = `
+<button
+  class="button"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  MyButton rendered in a template!
+</button>
+`;
+
+exports[`Storyshots Custom|Method for rendering Vue template + methods 1`] = `
+<p>
+  <em>
+    Clicking the button will navigate to another story using the 'addon-links'
+  </em>
+  <br />
+   
+  <button
+    class="button rounded"
+    style="color: rgb(66, 185, 131); border-color: #42b983;"
+  >
+    MyButton rendered in a template + props & methods!
+  </button>
+</p>
+`;
+
+exports[`Storyshots Custom|Method for rendering Vue template 1`] = `
+<div>
+  <h1>
+    A template
+  </h1>
+   
+  <p>
+    rendered in vue in storybook
+  </p>
+</div>
+`;
+
+exports[`Storyshots Custom|Method for rendering Vue vuex + actions 1`] = `
+<button
+  class="button"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  with vuex: 0!
+</button>
+`;
+
+exports[`Storyshots Custom|Method for rendering Vue whatever you want 1`] = `
+<button
+  class="button"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  with awesomeness: 0!
+</button>
+`;
+
+exports[`Storyshots Welcome welcome 1`] = `
+<div
+  class="main"
+>
+  <h1>
+    Welcome to Storybook for Vue
+  </h1>
+   
+  <p>
+    
+    This is a UI component dev environment for your vue app.
+  
+  </p>
+   
+  <p>
+    
+    We've added some basic stories inside the
+    
+    <code
+      class="code"
+    >
+      src/stories
+    </code>
+    
+    directory.
+    
+    <br />
+    
+    A story is a single state of one or more UI components.
+    You can have as many stories as you want.
+    
+    <br />
+    
+    (Basically a story is like a visual test case.)
+  
+  </p>
+   
+  <p>
+    
+    See these sample
+    
+    <a
+      class="link"
+    >
+      stories
+    </a>
+    
+    for a component called
+    
+    <code
+      class="code"
+    >
+      Button
+    </code>
+    
+    .
+  
+  </p>
+   
+  <p
+    style="text-align: center;"
+  >
+    <img
+      src="../logo.png"
+    />
+  </p>
+   
+  <p>
+    
+    Just like that, you can add your own components as stories.
+    
+    <br />
+    
+    You can also edit those components and see changes right away.
+    
+    <br />
+    
+    (Try editing the 
+    <code
+      class="code"
+    >
+      Button
+    </code>
+     component
+    located at 
+    <code
+      class="code"
+    >
+      src/stories/Button.js
+    </code>
+    .)
+  
+  </p>
+   
+  <p>
+    
+    Usually we create stories with smaller UI components in the app.
+    <br />
+    
+    Have a look at the
+    
+    <a
+      class="link"
+      href="https://storybook.js.org/basics/writing-stories"
+      target="_blank"
+    >
+      
+      Writing Stories
+    
+    </a>
+    
+    section in our documentation.
+  
+  </p>
+   
+  <p
+    class="note"
+  >
+    <b>
+      NOTE:
+    </b>
+     
+    <br />
+    
+    Have a look at the
+    
+    <code
+      class="code"
+    >
+      .storybook/webpack.config.js
+    </code>
+    
+    to add webpack
+    loaders and plugins you are using in this project.
+  
+  </p>
+</div>
+`;
diff --git a/examples/vue-kitchen-sink/package.json b/examples/vue-kitchen-sink/package.json
index 86448520eb90..fd11d245df39 100644
--- a/examples/vue-kitchen-sink/package.json
+++ b/examples/vue-kitchen-sink/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-example",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "private": true,
   "scripts": {
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
@@ -15,26 +15,28 @@
   },
   "devDependencies": {
     "@babel/core": "^7.3.4",
-    "@storybook/addon-a11y": "5.2.0-alpha.30",
-    "@storybook/addon-actions": "5.2.0-alpha.30",
-    "@storybook/addon-backgrounds": "5.2.0-alpha.30",
-    "@storybook/addon-centered": "5.2.0-alpha.30",
-    "@storybook/addon-contexts": "5.2.0-alpha.30",
-    "@storybook/addon-docs": "5.2.0-alpha.30",
-    "@storybook/addon-knobs": "5.2.0-alpha.30",
-    "@storybook/addon-links": "5.2.0-alpha.30",
-    "@storybook/addon-notes": "5.2.0-alpha.30",
-    "@storybook/addon-options": "5.2.0-alpha.30",
-    "@storybook/addon-storyshots": "5.2.0-alpha.30",
-    "@storybook/addon-storysource": "5.2.0-alpha.30",
-    "@storybook/addon-viewport": "5.2.0-alpha.30",
-    "@storybook/addons": "5.2.0-alpha.30",
-    "@storybook/source-loader": "5.2.0-alpha.30",
-    "@storybook/vue": "5.2.0-alpha.30",
+    "@storybook/addon-a11y": "5.2.0-alpha.36",
+    "@storybook/addon-actions": "5.2.0-alpha.36",
+    "@storybook/addon-backgrounds": "5.2.0-alpha.36",
+    "@storybook/addon-centered": "5.2.0-alpha.36",
+    "@storybook/addon-contexts": "5.2.0-alpha.36",
+    "@storybook/addon-docs": "5.2.0-alpha.36",
+    "@storybook/addon-knobs": "5.2.0-alpha.36",
+    "@storybook/addon-links": "5.2.0-alpha.36",
+    "@storybook/addon-notes": "5.2.0-alpha.36",
+    "@storybook/addon-options": "5.2.0-alpha.36",
+    "@storybook/addon-storyshots": "5.2.0-alpha.36",
+    "@storybook/addon-storysource": "5.2.0-alpha.36",
+    "@storybook/addon-viewport": "5.2.0-alpha.36",
+    "@storybook/addons": "5.2.0-alpha.36",
+    "@storybook/source-loader": "5.2.0-alpha.36",
+    "@storybook/vue": "5.2.0-alpha.36",
     "babel-core": "^7.0.0-bridge.0",
     "babel-loader": "^8.0.5",
     "cross-env": "^5.2.0",
     "file-loader": "^3.0.1",
+    "prop-types": "^15.7.2",
+    "storybook-addon-vue-info": "^1.2.1",
     "svg-url-loader": "^2.3.2",
     "vue-loader": "^15.7.0",
     "webpack": "^4.33.0",
diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot
deleted file mode 100644
index d52d817bf2a0..000000000000
--- a/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-actions.stories.storyshot
+++ /dev/null
@@ -1,37 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addon|Actions Action and method 1`] = `
-<button
-  class="button"
-  style="color: rgb(66, 185, 131); border-color: #42b983;"
->
-  Click me to log the action!
-</button>
-`;
-
-exports[`Storyshots Addon|Actions Action only 1`] = `
-<button
-  class="button"
-  style="color: rgb(66, 185, 131); border-color: #42b983;"
->
-  Click me to log the action!
-</button>
-`;
-
-exports[`Storyshots Addon|Actions Multiple actions 1`] = `
-<button
-  class="button"
-  style="color: rgb(66, 185, 131); border-color: #42b983;"
->
-  (Double) click me to log the action!
-</button>
-`;
-
-exports[`Storyshots Addon|Actions Multiple actions, object 1`] = `
-<button
-  class="button"
-  style="color: rgb(66, 185, 131); border-color: #42b983;"
->
-  (Double) click me to log the action!
-</button>
-`;
diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-backgrounds.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-backgrounds.stories.storyshot
deleted file mode 100644
index 085173afdc95..000000000000
--- a/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-backgrounds.stories.storyshot
+++ /dev/null
@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addon|Backgrounds story 1 1`] = `
-<button>
-  You should be able to switch backgrounds for this story
-</button>
-`;
-
-exports[`Storyshots Addon|Backgrounds story 2 1`] = `
-<button>
-  This one too!
-</button>
-`;
diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-centered.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-centered.stories.storyshot
deleted file mode 100644
index d19663d8679c..000000000000
--- a/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-centered.stories.storyshot
+++ /dev/null
@@ -1,18 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addon|Centered rounded 1`] = `
-<div
-  style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; align-items: center; overflow: auto;"
->
-  <div
-    style="margin: auto; max-height: 100%;"
-  >
-    <button
-      class="button rounded"
-      style="color: rgb(66, 185, 131); border-color: #42b983;"
-    >
-      A Button with rounded edges!
-    </button>
-  </div>
-</div>
-`;
diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-contexts.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-contexts.stories.storyshot
deleted file mode 100644
index 6dc9d78191d9..000000000000
--- a/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-contexts.stories.storyshot
+++ /dev/null
@@ -1,23 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addon|Contexts Languages 1`] = `
-<div
-  style="color: white; background: rgb(23, 63, 95); height: 100vh; padding: 10px;"
->
-  <div>
-    
-        Your locale is unknown, so I say NULL!
-      
-  </div>
-</div>
-`;
-
-exports[`Storyshots Addon|Contexts Simple CSS Theming 1`] = `
-<div
-  style="color: white; background: rgb(23, 63, 95); height: 100vh; padding: 10px;"
->
-  <span>
-    I'm a children of the injected 'div' (where provides a theming context).
-  </span>
-</div>
-`;
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
deleted file mode 100644
index eeb3153aca71..000000000000
--- a/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-knobs.stories.storyshot
+++ /dev/null
@@ -1,51 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addon|Knobs All knobs 1`] = `
-<div
-  style="border: 2px dotted; padding: 8px 22px; border-radius: 8px; border-color: deeppink;"
->
-  <h1>
-    My name is Jane,
-  </h1>
-   
-  <h3>
-    today is January 20, 2017
-  </h3>
-   
-  <p>
-    I have a stock of 20 apples, costing $2.25 each.
-  </p>
-   
-  <p>
-    Also, I have:
-  </p>
-   
-  <ul>
-    <li>
-      Laptop
-    </li>
-    <li>
-      Book
-    </li>
-    <li>
-      Whiskey
-    </li>
-  </ul>
-   
-  <p>
-    Nice to meet you!
-  </p>
-</div>
-`;
-
-exports[`Storyshots Addon|Knobs Simple 1`] = `
-<div>
-  I am John Doe and I'm 40 years old.
-</div>
-`;
-
-exports[`Storyshots Addon|Knobs XSS safety 1`] = `
-<div>
-  &lt;img src=x onerror="alert('XSS Attack')" &gt;
-</div>
-`;
diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-links.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-links.stories.storyshot
deleted file mode 100644
index 9fbbe1b43856..000000000000
--- a/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-links.stories.storyshot
+++ /dev/null
@@ -1,10 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addon|Links Go to welcome 1`] = `
-<button
-  class="button rounded"
-  style="color: rgb(66, 185, 131); border-color: #42b983;"
->
-  This buttons links to Welcome!
-</button>
-`;
diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot
deleted file mode 100644
index a005840d537d..000000000000
--- a/examples/vue-kitchen-sink/src/stories/__snapshots__/addon-notes.stories.storyshot
+++ /dev/null
@@ -1,19 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addon|Notes Note with HTML 1`] = `
-<p>
-  🤔😳😯😮
-  <br />
-  😄😩😓😱
-  <br />
-  🤓😑😶😊
-</p>
-`;
-
-exports[`Storyshots Addon|Notes Simple note 1`] = `
-<p>
-  <strong>
-    Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.
-  </strong>
-</p>
-`;
diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/core-template.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/core-template.stories.storyshot
deleted file mode 100644
index 7f9ee9188fc4..000000000000
--- a/examples/vue-kitchen-sink/src/stories/__snapshots__/core-template.stories.storyshot
+++ /dev/null
@@ -1,10 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Core|Template string only 1`] = `
-<button
-  class="button"
-  style="color: rgb(66, 185, 131); border-color: #42b983;"
->
-  A Button with square edges!
-</button>
-`;
diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/core.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/core.stories.storyshot
deleted file mode 100644
index 40d7a887f8a3..000000000000
--- a/examples/vue-kitchen-sink/src/stories/__snapshots__/core.stories.storyshot
+++ /dev/null
@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Core|Parameters passed to story 1`] = `
-<div>
-  Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{}},"globalParameter":"globalParameter","framework":"vue","chapterParameter":"chapterParameter","storyParameter":"storyParameter"}
-</div>
-`;
diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/custom-decorators.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/custom-decorators.stories.storyshot
deleted file mode 100644
index a91f694293e5..000000000000
--- a/examples/vue-kitchen-sink/src/stories/__snapshots__/custom-decorators.stories.storyshot
+++ /dev/null
@@ -1,35 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Custom|Decorator for Vue render 1`] = `
-<div
-  style="border: medium solid blue;"
->
-  <div
-    style="border: medium solid red;"
-  >
-    <button
-      class="button"
-      style="color: pink; border-color: pink;"
-    >
-      renders component: MyButton!
-    </button>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Custom|Decorator for Vue template 1`] = `
-<div
-  style="border: medium solid blue;"
->
-  <div
-    style="border: medium solid red;"
-  >
-    <button
-      class="button"
-      style="color: rgb(66, 185, 131); border-color: #42b983;"
-    >
-      MyButton with template!
-    </button>
-  </div>
-</div>
-`;
diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/custom-rendering.stories.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/custom-rendering.stories.storyshot
deleted file mode 100644
index 27a54c7eedde..000000000000
--- a/examples/vue-kitchen-sink/src/stories/__snapshots__/custom-rendering.stories.storyshot
+++ /dev/null
@@ -1,96 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Custom|Method for rendering Vue JSX 1`] = `
-<button
-  class="button"
-  style="color: rgb(66, 185, 131); border-color: #42b983;"
->
-  MyButton rendered with JSX!
-</button>
-`;
-
-exports[`Storyshots Custom|Method for rendering Vue pre-registered component 1`] = `
-<p>
-  <em>
-    This component was pre-registered in .storybook/config.js
-  </em>
-  <br />
-   
-  <button
-    class="button"
-    style="color: rgb(66, 185, 131); border-color: #42b983;"
-  >
-    MyButton rendered in a template!
-  </button>
-</p>
-`;
-
-exports[`Storyshots Custom|Method for rendering Vue render + component 1`] = `
-<button
-  class="button"
-  style="color: pink; border-color: pink;"
->
-  renders component: MyButton!
-</button>
-`;
-
-exports[`Storyshots Custom|Method for rendering Vue render 1`] = `
-<div>
-  renders a div with some text in it..
-</div>
-`;
-
-exports[`Storyshots Custom|Method for rendering Vue template + component 1`] = `
-<button
-  class="button"
-  style="color: rgb(66, 185, 131); border-color: #42b983;"
->
-  MyButton rendered in a template!
-</button>
-`;
-
-exports[`Storyshots Custom|Method for rendering Vue template + methods 1`] = `
-<p>
-  <em>
-    Clicking the button will navigate to another story using the 'addon-links'
-  </em>
-  <br />
-   
-  <button
-    class="button rounded"
-    style="color: rgb(66, 185, 131); border-color: #42b983;"
-  >
-    MyButton rendered in a template + props & methods!
-  </button>
-</p>
-`;
-
-exports[`Storyshots Custom|Method for rendering Vue template 1`] = `
-<div>
-  <h1>
-    A template
-  </h1>
-   
-  <p>
-    rendered in vue in storybook
-  </p>
-</div>
-`;
-
-exports[`Storyshots Custom|Method for rendering Vue vuex + actions 1`] = `
-<button
-  class="button"
-  style="color: rgb(66, 185, 131); border-color: #42b983;"
->
-  with vuex: 0!
-</button>
-`;
-
-exports[`Storyshots Custom|Method for rendering Vue whatever you want 1`] = `
-<button
-  class="button"
-  style="color: rgb(66, 185, 131); border-color: #42b983;"
->
-  with awesomeness: 0!
-</button>
-`;
diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/index.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/index.storyshot
deleted file mode 100644
index ead0957f1d88..000000000000
--- a/examples/vue-kitchen-sink/src/stories/__snapshots__/index.storyshot
+++ /dev/null
@@ -1,254 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots App App 1`] = `
-<div
-  id="app"
->
-  <img
-    src="./logo.png"
-  />
-   
-  <h1 />
-   
-  <h2>
-    Essential Links
-  </h2>
-   
-  <ul>
-    <li>
-      <a
-        href="https://vuejs.org"
-        target="_blank"
-      >
-        Core Docs
-      </a>
-    </li>
-     
-    <li>
-      <a
-        href="https://forum.vuejs.org"
-        target="_blank"
-      >
-        Forum
-      </a>
-    </li>
-     
-    <li>
-      <a
-        href="https://gitter.im/vuejs/vue"
-        target="_blank"
-      >
-        Gitter Chat
-      </a>
-    </li>
-     
-    <li>
-      <a
-        href="https://twitter.com/vuejs"
-        target="_blank"
-      >
-        Twitter
-      </a>
-    </li>
-  </ul>
-   
-  <h2>
-    Ecosystem
-  </h2>
-   
-  <ul>
-    <li>
-      <a
-        href="http://router.vuejs.org/"
-        target="_blank"
-      >
-        vue-router
-      </a>
-    </li>
-     
-    <li>
-      <a
-        href="http://vuex.vuejs.org/"
-        target="_blank"
-      >
-        vuex
-      </a>
-    </li>
-     
-    <li>
-      <a
-        href="http://vue-loader.vuejs.org/"
-        target="_blank"
-      >
-        vue-loader
-      </a>
-    </li>
-     
-    <li>
-      <a
-        href="https://github.com/vuejs/awesome-vue"
-        target="_blank"
-      >
-        awesome-vue
-      </a>
-    </li>
-  </ul>
-</div>
-`;
-
-exports[`Storyshots Button rounded 1`] = `
-<button
-  class="button rounded"
-  style="color: rgb(66, 185, 131); border-color: #42b983;"
->
-  A Button with rounded edges!
-</button>
-`;
-
-exports[`Storyshots Button square 1`] = `
-<button
-  class="button"
-  style="color: rgb(66, 185, 131); border-color: #42b983;"
->
-  A Button with square edges!
-</button>
-`;
-
-exports[`Storyshots Welcome Welcome 1`] = `
-<div
-  class="main"
->
-  <h1>
-    Welcome to Storybook for Vue
-  </h1>
-   
-  <p>
-    
-    This is a UI component dev environment for your vue app.
-  
-  </p>
-   
-  <p>
-    
-    We've added some basic stories inside the
-    
-    <code
-      class="code"
-    >
-      src/stories
-    </code>
-    
-    directory.
-    
-    <br />
-    
-    A story is a single state of one or more UI components.
-    You can have as many stories as you want.
-    
-    <br />
-    
-    (Basically a story is like a visual test case.)
-  
-  </p>
-   
-  <p>
-    
-    See these sample
-    
-    <a
-      class="link"
-    >
-      stories
-    </a>
-    
-    for a component called
-    
-    <code
-      class="code"
-    >
-      Button
-    </code>
-    
-    .
-  
-  </p>
-   
-  <p
-    style="text-align: center;"
-  >
-    <img
-      src="../logo.png"
-    />
-  </p>
-   
-  <p>
-    
-    Just like that, you can add your own components as stories.
-    
-    <br />
-    
-    You can also edit those components and see changes right away.
-    
-    <br />
-    
-    (Try editing the 
-    <code
-      class="code"
-    >
-      Button
-    </code>
-     component
-    located at 
-    <code
-      class="code"
-    >
-      src/stories/Button.js
-    </code>
-    .)
-  
-  </p>
-   
-  <p>
-    
-    Usually we create stories with smaller UI components in the app.
-    <br />
-    
-    Have a look at the
-    
-    <a
-      class="link"
-      href="https://storybook.js.org/basics/writing-stories"
-      target="_blank"
-    >
-      
-      Writing Stories
-    
-    </a>
-    
-    section in our documentation.
-  
-  </p>
-   
-  <p
-    class="note"
-  >
-    <b>
-      NOTE:
-    </b>
-     
-    <br />
-    
-    Have a look at the
-    
-    <code
-      class="code"
-    >
-      .storybook/webpack.config.js
-    </code>
-    
-    to add webpack
-    loaders and plugins you are using in this project.
-  
-  </p>
-</div>
-`;
diff --git a/examples/vue-kitchen-sink/src/stories/addon-actions.stories.js b/examples/vue-kitchen-sink/src/stories/addon-actions.stories.js
index ab21140ec939..d7f4c74ecc30 100644
--- a/examples/vue-kitchen-sink/src/stories/addon-actions.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/addon-actions.stories.js
@@ -1,29 +1,50 @@
-import { storiesOf } from '@storybook/vue';
 import { action, actions } from '@storybook/addon-actions';
 
-storiesOf('Addon|Actions', module)
-  .add('Action only', () => ({
-    template: '<my-button :handle-click="log">Click me to log the action</my-button>',
-    methods: {
-      log: action('log1'),
-    },
-  }))
-  .add('Multiple actions', () => ({
-    template:
-      '<my-button :handle-click="click" :handle-dblclick="doubleclick">(Double) click me to log the action</my-button>',
-    methods: actions('click', 'doubleclick'),
-  }))
-  .add('Multiple actions, object', () => ({
-    template:
-      '<my-button :handle-click="click" :handle-dblclick="doubleclick">(Double) click me to log the action</my-button>',
-    methods: actions({ click: 'clicked', doubleclick: 'double clicked' }),
-  }))
-  .add('Action and method', () => ({
-    template: '<my-button :handle-click="log">Click me to log the action</my-button>',
-    methods: {
-      log: e => {
-        e.preventDefault();
-        action('log2')(e.target);
-      },
+export default {
+  title: 'Addon|Actions',
+};
+
+export const actionOnly = () => ({
+  template: '<my-button :handle-click="log">Click me to log the action</my-button>',
+  methods: {
+    log: action('log1'),
+  },
+});
+
+actionOnly.story = {
+  name: 'Action only',
+};
+
+export const multipleActions = () => ({
+  template:
+    '<my-button :handle-click="click" :handle-dblclick="doubleclick">(Double) click me to log the action</my-button>',
+  methods: actions('click', 'doubleclick'),
+});
+
+multipleActions.story = {
+  name: 'Multiple actions',
+};
+
+export const multipleActionsObject = () => ({
+  template:
+    '<my-button :handle-click="click" :handle-dblclick="doubleclick">(Double) click me to log the action</my-button>',
+  methods: actions({ click: 'clicked', doubleclick: 'double clicked' }),
+});
+
+multipleActionsObject.story = {
+  name: 'Multiple actions, object',
+};
+
+export const actionAndMethod = () => ({
+  template: '<my-button :handle-click="log">Click me to log the action</my-button>',
+  methods: {
+    log: e => {
+      e.preventDefault();
+      action('log2')(e.target);
     },
-  }));
+  },
+});
+
+actionAndMethod.story = {
+  name: 'Action and method',
+};
diff --git a/examples/vue-kitchen-sink/src/stories/addon-backgrounds.stories.js b/examples/vue-kitchen-sink/src/stories/addon-backgrounds.stories.js
index 6a539fd04c8d..9e829e54c5de 100644
--- a/examples/vue-kitchen-sink/src/stories/addon-backgrounds.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/addon-backgrounds.stories.js
@@ -1,23 +1,33 @@
-import { storiesOf } from '@storybook/vue';
-
-storiesOf('Addon|Backgrounds', module)
-  .addParameters({
+export default {
+  title: 'Addon|Backgrounds',
+  parameters: {
     backgrounds: [
       { name: 'light', value: '#eeeeee' },
       { name: 'dark', value: '#222222', default: true },
     ],
-  })
-  .add('story 1', () => {
-    const content = 'You should be able to switch backgrounds for this story';
+  },
+};
+
+export const story1 = () => {
+  const content = 'You should be able to switch backgrounds for this story';
+
+  return {
+    template: `<button>${content}</button>`,
+  };
+};
+
+story1.story = {
+  name: 'story 1',
+};
+
+export const story2 = () => {
+  const content = 'This one too!';
 
-    return {
-      template: `<button>${content}</button>`,
-    };
-  })
-  .add('story 2', () => {
-    const content = 'This one too!';
+  return {
+    template: `<button>${content}</button>`,
+  };
+};
 
-    return {
-      template: `<button>${content}</button>`,
-    };
-  });
+story2.story = {
+  name: 'story 2',
+};
diff --git a/examples/vue-kitchen-sink/src/stories/addon-centered.stories.js b/examples/vue-kitchen-sink/src/stories/addon-centered.stories.js
index 83a0ad0ccf39..6503a63f35ca 100644
--- a/examples/vue-kitchen-sink/src/stories/addon-centered.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/addon-centered.stories.js
@@ -1,14 +1,16 @@
-import { storiesOf } from '@storybook/vue';
 import Centered from '@storybook/addon-centered/vue';
 
 import MyButton from './Button.vue';
 
-storiesOf('Addon|Centered', module)
-  .addParameters({
+export default {
+  title: 'Addon|Centered',
+  decorators: [Centered],
+  parameters: {
     component: Centered,
-  })
-  .addDecorator(Centered)
-  .add('rounded', () => ({
-    components: { MyButton },
-    template: '<my-button :rounded="true">A Button with rounded edges</my-button>',
-  }));
+  },
+};
+
+export const rounded = () => ({
+  components: { MyButton },
+  template: '<my-button :rounded="true">A Button with rounded edges</my-button>',
+});
diff --git a/examples/vue-kitchen-sink/src/stories/addon-contexts.stories.js b/examples/vue-kitchen-sink/src/stories/addon-contexts.stories.js
index 6aa46012d4a8..a2bdc400cf6a 100644
--- a/examples/vue-kitchen-sink/src/stories/addon-contexts.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/addon-contexts.stories.js
@@ -1,4 +1,3 @@
-import { storiesOf } from '@storybook/vue';
 import { withContexts } from '@storybook/addon-contexts/vue';
 
 // Example A: Simple CSS Theming
@@ -39,18 +38,21 @@ const storyLevelContexts = [
   },
 ];
 
-const stories = storiesOf('Addon|Contexts', module).addDecorator(withContexts(topLevelContexts));
+export default {
+  title: 'Addon|Contexts',
+  decorators: [withContexts(topLevelContexts)],
+};
 
-stories.add(
-  'Simple CSS Theming',
-  () => ({
-    template:
-      "<span>I'm a children of the injected 'div' (where provides a theming context).</span>",
-  }),
-  {
+export const simpleCssTheming = () => ({
+  template: "<span>I'm a children of the injected 'div' (where provides a theming context).</span>",
+});
+
+simpleCssTheming.story = {
+  name: 'Simple CSS Theming',
+  parameters: {
     contexts: storyLevelContexts,
-  }
-);
+  },
+};
 
 // Example B: Language (Vue provide/inject API)
 const createContext = initialValue => {
@@ -99,17 +101,17 @@ const NaiveIntlContext = createContext({
   greeting: 'NULL',
 });
 
-stories.add(
-  'Languages',
-  () => ({
-    components: { 'NaiveIntlContext.Consumer': NaiveIntlContext.Consumer },
-    template: `
-      <NaiveIntlContext.Consumer v-slot="{ locale, greeting }">
-        Your locale is {{ locale }}, so I say {{ greeting }}!
-      </NaiveIntlContext.Consumer>
-    `,
-  }),
-  {
+export const Languages = () => ({
+  components: { 'NaiveIntlContext.Consumer': NaiveIntlContext.Consumer },
+  template: `
+    <NaiveIntlContext.Consumer v-slot="{ locale, greeting }">
+      Your locale is {{ locale }}, so I say {{ greeting }}!
+    </NaiveIntlContext.Consumer>
+  `,
+});
+
+Languages.story = {
+  parameters: {
     contexts: [
       {
         icon: 'globe',
@@ -140,5 +142,5 @@ stories.add(
         },
       },
     ],
-  }
-);
+  },
+};
diff --git a/examples/vue-kitchen-sink/src/stories/addon-docs.stories.mdx b/examples/vue-kitchen-sink/src/stories/addon-docs.stories.mdx
new file mode 100644
index 000000000000..445657fe2a1f
--- /dev/null
+++ b/examples/vue-kitchen-sink/src/stories/addon-docs.stories.mdx
@@ -0,0 +1,82 @@
+import { Story, Preview, Meta } from '@storybook/addon-docs/blocks';
+
+# Storybook Docs for Vue
+
+Storybook supports every major view layer:
+React, Vue, Angular, Ember, React Native, etc.
+
+Storybook Docs does too.
+
+<Story id="welcome--welcome" height="370px" />
+
+Let's check out a Vue prototype to see how this works.
+
+## Component Declaration
+
+Just like in React, we first declare our component.
+
+<Meta title="Addon|Docs" />
+
+This declaration doesn't show up in the MDX output.
+
+## SB5 "Classic" Vue Stories
+
+Next let's declare some stories.
+
+But first let's review how it's done in SB5 for Vue.
+
+```
+storiesOf('Button', module)
+  .add('rounded', () => ({
+    template: '<my-button :rounded="true">A Button with rounded edges</my-button>',
+  }))
+```
+
+## MDX Stories
+
+Similarly, here's how we do it in the Docs MDX format:
+
+<Story name="rounded" height="60px">
+  {{
+    template: '<my-button :rounded="true">A Button with rounded edges</my-button>',
+  }}
+</Story>
+
+This isn't the final syntax, but it gets the job done.
+
+## Another one
+
+Let's add another one. The UI updates automatically as you'd expect.
+
+<Story name="square" height="60px">
+  {{
+    template: '<my-button :rounded="false">A Button with square edges</my-button>',
+  }}
+</Story>
+
+## Longform docs
+
+And just like in the React, case we're generating long-form docs as we go.
+
+The primary difference is that for Vue Docs we generate an iframe per story.
+
+## Optimization
+
+This can be optimized using a library like [Vuera](https://github.com/akxcv/vuera)
+for embedding Vue components in React.
+
+We could also change the JSX rendering to render the entire page in Vue.
+
+## Previews
+
+Just like in React, we can easily reference other stories in our docs:
+
+<Story id="addon-knobs--all-knobs" height="400px" />
+
+## More info
+
+For more info, check out the [Storybook Docs Technical Preview](https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing).
+
+We want your feedback to help make this more useful.
+
+Follow us on Twitter for more short demos & project updates! ❤️📈🛠
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 c20bca71a12e..87f10e0c0455 100644
--- a/examples/vue-kitchen-sink/src/stories/addon-knobs.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/addon-knobs.stories.js
@@ -1,4 +1,3 @@
-import { storiesOf } from '@storybook/vue';
 import { action } from '@storybook/addon-actions';
 import {
   withKnobs,
@@ -14,80 +13,83 @@ import {
 
 const logger = console;
 
-storiesOf('Addon|Knobs', module)
-  .addDecorator(withKnobs)
-  .add('Simple', () => ({
-    props: {
-      name: {
-        type: String,
-        default: text('Name', 'John Doe'),
-      },
+export default {
+  title: 'Addon|Knobs',
+  decorators: [withKnobs],
+};
+
+export const Simple = () => ({
+  props: {
+    name: {
+      type: String,
+      default: text('Name', 'John Doe'),
     },
+  },
 
-    template: `<div @click="age++">I am {{ name }} and I'm {{ age }} years old.</div>`,
+  template: `<div @click="age++">I am {{ name }} and I'm {{ age }} years old.</div>`,
 
-    data() {
-      return { age: 40 };
-    },
+  data() {
+    return { age: 40 };
+  },
+  created() {
+    logger.debug('created');
+  },
+  destroyed() {
+    logger.debug('destroyed');
+  },
+});
 
-    created() {
-      logger.debug('created');
-    },
-    destroyed() {
-      logger.debug('destroyed');
-    },
-  }))
-  .add('All knobs', () => {
-    const fruits = {
-      Apple: 'apples',
-      Banana: 'bananas',
-      Cherry: 'cherries',
-    };
+export const allKnobs = () => {
+  const fruits = {
+    Apple: 'apples',
+    Banana: 'bananas',
+    Cherry: 'cherries',
+  };
 
-    button('Arbitrary action', action('You clicked it!'));
+  button('Arbitrary action', action('You clicked it!'));
 
-    return {
-      props: {
-        name: { default: text('Name', 'Jane') },
-        stock: {
-          default: number('Stock', 20, {
-            range: true,
-            min: 0,
-            max: 30,
-            step: 5,
-          }),
-        },
-        fruit: { default: select('Fruit', fruits, 'apples') },
-        price: { default: number('Price', 2.25) },
-        colour: { default: color('Border', 'deeppink') },
-        today: { default: date('Today', new Date('Jan 20 2017 GMT+0')) },
-        // this is necessary, because we cant use arrays/objects directly in vue prop default values
-        // a factory function is required, but we need to make sure the knob is only called once
-        items: { default: (items => () => items)(array('Items', ['Laptop', 'Book', 'Whiskey'])) },
-        nice: { default: boolean('Nice', true) },
+  return {
+    props: {
+      name: { default: text('Name', 'Jane') },
+      stock: {
+        default: number('Stock', 20, {
+          range: true,
+          min: 0,
+          max: 30,
+          step: 5,
+        }),
+      },
+      fruit: { default: select('Fruit', fruits, 'apples') },
+      price: { default: number('Price', 2.25) },
+      colour: { default: color('Border', 'deeppink') },
+      today: { default: date('Today', new Date('Jan 20 2017 GMT+0')) },
+      // this is necessary, because we cant use arrays/objects directly in vue prop default values
+      // a factory function is required, but we need to make sure the knob is only called once
+      items: { default: (items => () => items)(array('Items', ['Laptop', 'Book', 'Whiskey'])) },
+      nice: { default: boolean('Nice', true) },
+    },
+    data: () => ({
+      dateOptions: { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' },
+    }),
+    computed: {
+      stockMessage() {
+        return this.stock
+          ? `I have a stock of ${this.stock} ${this.fruit}, costing $${this.price} each.`
+          : `I'm out of ${this.fruit}${this.nice ? ', Sorry!' : '.'}`;
       },
-      data: () => ({
-        dateOptions: { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' },
-      }),
-      computed: {
-        stockMessage() {
-          return this.stock
-            ? `I have a stock of ${this.stock} ${this.fruit}, costing $${this.price} each.`
-            : `I'm out of ${this.fruit}${this.nice ? ', Sorry!' : '.'}`;
-        },
-        salutation() {
-          return this.nice ? 'Nice to meet you!' : 'Leave me alone!';
-        },
-        formattedDate() {
-          return new Date(this.today).toLocaleDateString('en-US', this.dateOptions);
-        },
-        style() {
-          return {
-            'border-color': this.colour,
-          };
-        },
+      salutation() {
+        return this.nice ? 'Nice to meet you!' : 'Leave me alone!';
       },
-      template: `
+      formattedDate() {
+        return new Date(this.today).toLocaleDateString('en-US', this.dateOptions);
+      },
+      style() {
+        return {
+          'border-color': this.colour,
+        };
+      },
+    },
+    template: `
           <div style="border: 2px dotted; padding: 8px 22px; border-radius: 8px" :style="style">
             <h1>My name is {{ name }},</h1>
             <h3>today is {{ formattedDate }}</h3>
@@ -99,11 +101,20 @@ storiesOf('Addon|Knobs', module)
             <p>{{ salutation }}</p>
           </div>
         `,
-    };
-  })
-  .add('XSS safety', () => ({
-    props: {
-      text: { default: text('Rendered string', '<img src=x onerror="alert(\'XSS Attack\')" >') },
-    },
-    template: '<div v-html="text"></div>',
-  }));
+  };
+};
+
+allKnobs.story = {
+  name: 'All knobs',
+};
+
+export const xssSafety = () => ({
+  props: {
+    text: { default: text('Rendered string', '<img src=x onerror="alert(\'XSS Attack\')" >') },
+  },
+  template: '<div v-html="text"></div>',
+});
+
+xssSafety.story = {
+  name: 'XSS safety',
+};
diff --git a/examples/vue-kitchen-sink/src/stories/addon-links.stories.js b/examples/vue-kitchen-sink/src/stories/addon-links.stories.js
index 647d681d10cc..7a4a37cb106f 100644
--- a/examples/vue-kitchen-sink/src/stories/addon-links.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/addon-links.stories.js
@@ -1,10 +1,17 @@
-import { storiesOf } from '@storybook/vue';
 import { linkTo } from '@storybook/addon-links';
 
-storiesOf('Addon|Links', module).add('Go to welcome', () => ({
+export default {
+  title: 'Addon|Links',
+};
+
+export const goToWelcome = () => ({
   template:
     '<my-button :rounded="true" :handle-click="click" >This buttons links to Welcome</my-button>',
   methods: {
     click: linkTo('Welcome'),
   },
-}));
+});
+
+goToWelcome.story = {
+  name: 'Go to welcome',
+};
diff --git a/examples/vue-kitchen-sink/src/stories/addon-notes.stories.js b/examples/vue-kitchen-sink/src/stories/addon-notes.stories.js
index 5cd909644a04..afa675554542 100644
--- a/examples/vue-kitchen-sink/src/stories/addon-notes.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/addon-notes.stories.js
@@ -1,26 +1,31 @@
-import { storiesOf } from '@storybook/vue';
+export default {
+  title: 'Addon|Notes',
+};
 
-storiesOf('Addon|Notes', module)
-  .add(
-    'Simple note',
-    () => ({
-      template:
-        '<p><strong>Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.</strong></p>',
-    }),
-    { notes: 'My notes on some bold text' }
-  )
-  .add(
-    'Note with HTML',
-    () => ({
-      template: '<p>🤔😳😯😮<br/>😄😩😓😱<br/>🤓😑😶😊</p>',
-    }),
-    {
-      notes: `
-      <h2>My notes on emojies</h2>
+export const simpleNote = () => ({
+  template:
+    '<p><strong>Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.</strong></p>',
+});
 
-      <em>It's not all that important to be honest, but..</em>
+simpleNote.story = {
+  name: 'Simple note',
+  parameters: { notes: 'My notes on some bold text' },
+};
 
-      Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
-    `,
-    }
-  );
+export const noteWithHtml = () => ({
+  template: '<p>🤔😳😯😮<br/>😄😩😓😱<br/>🤓😑😶😊</p>',
+});
+
+noteWithHtml.story = {
+  name: 'Note with HTML',
+
+  parameters: {
+    notes: `
+    <h2>My notes on emojies</h2>
+
+    <em>It's not all that important to be honest, but..</em>
+
+    Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
+  `,
+  },
+};
diff --git a/examples/vue-kitchen-sink/src/stories/components/app.stories.js b/examples/vue-kitchen-sink/src/stories/components/app.stories.js
new file mode 100644
index 000000000000..76fc82880324
--- /dev/null
+++ b/examples/vue-kitchen-sink/src/stories/components/app.stories.js
@@ -0,0 +1,14 @@
+import App from '../../App.vue';
+
+export default {
+  title: 'App',
+
+  parameters: {
+    component: App,
+  },
+};
+
+export const app = () => ({
+  render: h => h(App),
+});
+app.story = { name: 'App' };
diff --git a/examples/vue-kitchen-sink/src/stories/components/button.stories.js b/examples/vue-kitchen-sink/src/stories/components/button.stories.js
new file mode 100644
index 000000000000..bb32c5132635
--- /dev/null
+++ b/examples/vue-kitchen-sink/src/stories/components/button.stories.js
@@ -0,0 +1,16 @@
+import Button from '../Button.vue';
+
+export default {
+  title: 'Button',
+  parameters: {
+    component: Button,
+  },
+};
+
+export const rounded = () => ({
+  template: '<my-button :rounded="true">A Button with rounded edges</my-button>',
+});
+
+export const square = () => ({
+  template: '<my-button :rounded="false">A Button with square edges</my-button>',
+});
diff --git a/examples/vue-kitchen-sink/src/stories/components/welcome.stories.js b/examples/vue-kitchen-sink/src/stories/components/welcome.stories.js
new file mode 100644
index 000000000000..fd5f87471b05
--- /dev/null
+++ b/examples/vue-kitchen-sink/src/stories/components/welcome.stories.js
@@ -0,0 +1,16 @@
+import { linkTo } from '@storybook/addon-links';
+
+import Welcome from '../Welcome.vue';
+
+export default {
+  title: 'Welcome',
+  parameters: {
+    component: Welcome,
+  },
+};
+
+export const welcome = () => {
+  return {
+    render: h => h(Welcome, { props: { goToButton: linkTo('Button') } }),
+  };
+};
diff --git a/examples/vue-kitchen-sink/src/stories/core-template.stories.js b/examples/vue-kitchen-sink/src/stories/core-template.stories.js
index 8acb4bd11b06..d1d2d3768c46 100644
--- a/examples/vue-kitchen-sink/src/stories/core-template.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/core-template.stories.js
@@ -1,6 +1,10 @@
-import { storiesOf } from '@storybook/vue';
+export default {
+  title: 'Core|Template',
+};
 
-storiesOf('Core|Template', module).add(
-  'string only',
-  () => '<my-button :rounded="false">A Button with square edges</my-button>'
-);
+export const stringOnly = () =>
+  '<my-button :rounded="false">A Button with square edges</my-button>';
+
+stringOnly.story = {
+  name: 'string only',
+};
diff --git a/examples/vue-kitchen-sink/src/stories/core.stories.js b/examples/vue-kitchen-sink/src/stories/core.stories.js
index a03d25cb5a6c..0d1a92abde23 100644
--- a/examples/vue-kitchen-sink/src/stories/core.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/core.stories.js
@@ -1,4 +1,4 @@
-import { storiesOf, addParameters } from '@storybook/vue';
+import { addParameters } from '@storybook/vue';
 
 const globalParameter = 'globalParameter';
 const chapterParameter = 'chapterParameter';
@@ -6,14 +6,21 @@ const storyParameter = 'storyParameter';
 
 addParameters({ globalParameter });
 
-storiesOf('Core|Parameters', module)
-  .addParameters({ chapterParameter })
-  .add(
-    'passed to story',
-    ({ parameters: { fileName, ...parameters } }) => ({
-      template: `<div>Parameters are ${JSON.stringify(parameters)}</div>`,
-    }),
-    {
-      storyParameter,
-    }
-  );
+export default {
+  title: 'Core|Parameters',
+  parameters: {
+    chapterParameter,
+  },
+};
+
+export const passedToStory = ({ parameters: { fileName, ...parameters } }) => ({
+  template: `<div>Parameters are ${JSON.stringify(parameters)}</div>`,
+});
+
+passedToStory.story = {
+  name: 'passed to story',
+
+  parameters: {
+    storyParameter,
+  },
+};
diff --git a/examples/vue-kitchen-sink/src/stories/custom-decorators.stories.js b/examples/vue-kitchen-sink/src/stories/custom-decorators.stories.js
index 3c3a022d3cdd..c6103cbdb224 100644
--- a/examples/vue-kitchen-sink/src/stories/custom-decorators.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/custom-decorators.stories.js
@@ -1,33 +1,37 @@
-import { storiesOf } from '@storybook/vue';
-
 import MyButton from './Button.vue';
 
-storiesOf('Custom|Decorator for Vue', module)
-  .addDecorator(storyFn => {
-    // Decorated with story-function
-    const WrapButton = storyFn();
-    return {
-      components: { WrapButton },
-      template: '<div :style="{ border: borderStyle }"><wrap-button/></div>',
-      data() {
-        return { borderStyle: 'medium solid red' };
-      },
-    };
-  })
-  .addDecorator(() => ({
-    // Decorated with `story` component
-    template: '<div :style="{ border: borderStyle }"><story/></div>',
-    data() {
+export default {
+  title: 'Custom|Decorator for Vue',
+  decorators: [
+    storyFn => {
+      // Decorated with story-function
+      const WrapButton = storyFn();
       return {
-        borderStyle: 'medium solid blue',
+        components: { WrapButton },
+        template: '<div :style="{ border: borderStyle }"><wrap-button/></div>',
+        data() {
+          return { borderStyle: 'medium solid red' };
+        },
       };
     },
-  }))
-  .add('template', () => ({
-    template: '<my-button>MyButton with template</my-button>',
-  }))
-  .add('render', () => ({
-    render(h) {
-      return h(MyButton, { props: { color: 'pink' } }, ['renders component: MyButton']);
-    },
-  }));
+    () => ({
+      // Decorated with `story` component
+      template: '<div :style="{ border: borderStyle }"><story/></div>',
+      data() {
+        return {
+          borderStyle: 'medium solid blue',
+        };
+      },
+    }),
+  ],
+};
+
+export const template = () => ({
+  template: '<my-button>MyButton with template</my-button>',
+});
+
+export const render = () => ({
+  render(h) {
+    return h(MyButton, { props: { color: 'pink' } }, ['renders component: MyButton']);
+  },
+});
diff --git a/examples/vue-kitchen-sink/src/stories/custom-rendering.stories.js b/examples/vue-kitchen-sink/src/stories/custom-rendering.stories.js
index cfbde6349393..e7facaa8b8bf 100644
--- a/examples/vue-kitchen-sink/src/stories/custom-rendering.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/custom-rendering.stories.js
@@ -1,92 +1,125 @@
 import Vuex from 'vuex';
-import { storiesOf } from '@storybook/vue';
 import { action } from '@storybook/addon-actions';
 import { linkTo } from '@storybook/addon-links';
 
 import MyButton from './Button.vue';
 
-storiesOf('Custom|Method for rendering Vue', module)
-  .add('render', () => ({
-    render: h => h('div', ['renders a div with some text in it..']),
-  }))
-  .add('render + component', () => ({
-    render(h) {
-      return h(MyButton, { props: { color: 'pink' } }, ['renders component: MyButton']);
-    },
-  }))
-  .add('template', () => ({
-    template: `
+export default {
+  title: 'Custom|Method for rendering Vue',
+};
+
+export const render = () => ({
+  render: h => h('div', ['renders a div with some text in it..']),
+});
+
+export const renderComponent = () => ({
+  render(h) {
+    return h(MyButton, { props: { color: 'pink' } }, ['renders component: MyButton']);
+  },
+});
+
+renderComponent.story = {
+  name: 'render + component',
+};
+
+export const template = () => ({
+  template: `
       <div>
         <h1>A template</h1>
         <p>rendered in vue in storybook</p>
       </div>`,
-  }))
-  .add('template + component', () => ({
-    components: { MyButton },
-    template: '<my-button>MyButton rendered in a template</my-button>',
-  }))
-  .add('template + methods', () => ({
-    components: { MyButton },
-    template: `
+});
+
+export const templateComponent = () => ({
+  components: { MyButton },
+  template: '<my-button>MyButton rendered in a template</my-button>',
+});
+
+templateComponent.story = {
+  name: 'template + component',
+};
+
+export const templateMethods = () => ({
+  components: { MyButton },
+  template: `
       <p>
         <em>Clicking the button will navigate to another story using the 'addon-links'</em><br/>
         <my-button :rounded="true" :handle-click="action">MyButton rendered in a template + props & methods</my-button>
       </p>`,
-    methods: {
-      action: linkTo('Button'),
+  methods: {
+    action: linkTo('Button'),
+  },
+});
+
+templateMethods.story = {
+  name: 'template + methods',
+};
+
+export const JSX = () => ({
+  components: { MyButton },
+  render() {
+    // eslint-disable-next-line react/react-in-jsx-scope
+    return <my-button>MyButton rendered with JSX</my-button>;
+  },
+});
+
+export const vuexActions = () => ({
+  components: { MyButton },
+  template: '<my-button :handle-click="log">with vuex: {{ $store.state.count }}</my-button>',
+  store: new Vuex.Store({
+    state: { count: 0 },
+    mutations: {
+      increment(state) {
+        state.count += 1; // eslint-disable-line
+        action('vuex state')(state);
+      },
     },
-  }))
-  .add('JSX', () => ({
-    components: { MyButton },
-    render() {
-      // eslint-disable-next-line react/react-in-jsx-scope
-      return <my-button>MyButton rendered with JSX</my-button>;
+  }),
+  methods: {
+    log() {
+      this.$store.commit('increment');
     },
-  }))
-  .add('vuex + actions', () => ({
-    components: { MyButton },
-    template: '<my-button :handle-click="log">with vuex: {{ $store.state.count }}</my-button>',
-    store: new Vuex.Store({
-      state: { count: 0 },
-      mutations: {
-        increment(state) {
-          state.count += 1; // eslint-disable-line
-          action('vuex state')(state);
-        },
-      },
-    }),
-    methods: {
-      log() {
-        this.$store.commit('increment');
+  },
+});
+
+vuexActions.story = {
+  name: 'vuex + actions',
+};
+
+export const whateverYouWant = () => ({
+  components: { MyButton },
+  template: '<my-button :handle-click="log">with awesomeness: {{ $store.state.count }}</my-button>',
+  store: new Vuex.Store({
+    state: { count: 0 },
+    mutations: {
+      increment(state) {
+        state.count += 1; // eslint-disable-line
+        action('vuex state')(state);
       },
     },
-  }))
-  .add('whatever you want', () => ({
-    components: { MyButton },
-    template:
-      '<my-button :handle-click="log">with awesomeness: {{ $store.state.count }}</my-button>',
-    store: new Vuex.Store({
-      state: { count: 0 },
-      mutations: {
-        increment(state) {
-          state.count += 1; // eslint-disable-line
-          action('vuex state')(state);
-        },
-      },
-    }),
-    methods: {
-      log() {
-        this.$store.commit('increment');
-      },
+  }),
+  methods: {
+    log() {
+      this.$store.commit('increment');
     },
-  }))
-  .add('pre-registered component', () => ({
-    /* By pre-registering component in config.js,
-     * the need to register all components with each story is removed.
-     * You'll only need the template */
-    template: `
+  },
+});
+
+whateverYouWant.story = {
+  name: 'whatever you want',
+};
+
+export const preRegisteredComponent = () => ({
+  /* By pre-registering component in config.js,
+   * the need to register all components with each story is removed.
+   * You'll only need the template */
+  template: `
       <p>
         <em>This component was pre-registered in .storybook/config.js</em><br/>
         <my-button>MyButton rendered in a template</my-button>
       </p>`,
-  }));
+});
+
+preRegisteredComponent.story = {
+  name: 'pre-registered component',
+};
diff --git a/examples/vue-kitchen-sink/src/stories/index.js b/examples/vue-kitchen-sink/src/stories/index.js
deleted file mode 100644
index a89f9ee6e3b6..000000000000
--- a/examples/vue-kitchen-sink/src/stories/index.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { storiesOf } from '@storybook/vue';
-import { linkTo } from '@storybook/addon-links';
-
-import Welcome from './Welcome.vue';
-import App from '../App.vue';
-
-storiesOf('Welcome', module)
-  .addParameters({
-    component: Welcome,
-  })
-  .add('Welcome', () => ({
-    render: h => h(Welcome, { props: { goToButton: linkTo('Button') } }),
-  }));
-
-storiesOf('App', module)
-  .addParameters({
-    component: App,
-  })
-  .add('App', () => ({
-    render: h => h(App),
-  }));
-
-storiesOf('Button', module)
-  // Works if Vue.component is called in the config.js in .storybook
-  .add('rounded', () => ({
-    template: '<my-button :rounded="true">A Button with rounded edges</my-button>',
-  }))
-  .add('square', () => ({
-    template: '<my-button :rounded="false">A Button with square edges</my-button>',
-  }));
diff --git a/jest.config.js b/jest.config.js
index f5a57e846929..64bded141437 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -3,7 +3,7 @@ module.exports = {
   clearMocks: true,
   moduleNameMapper: {
     // non-js files
-    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|mdx)$':
       '<rootDir>/__mocks__/fileMock.js',
     '\\.(css|scss|stylesheet)$': '<rootDir>/__mocks__/styleMock.js',
     '\\.(md)$': '<rootDir>/__mocks__/htmlMock.js',
@@ -71,6 +71,7 @@ module.exports = {
   ],
   globals: {
     DOCS_MODE: false,
+    PREVIEW_URL: undefined,
   },
   snapshotSerializers: ['jest-emotion', 'enzyme-to-json/serializer'],
   coverageDirectory: 'coverage',
diff --git a/lerna.json b/lerna.json
index 017e937e98c4..3ba5a00a947b 100644
--- a/lerna.json
+++ b/lerna.json
@@ -2,5 +2,5 @@
   "npmClient": "yarn",
   "useWorkspaces": true,
   "registry": "https://registry.npmjs.org",
-  "version": "5.2.0-alpha.30"
+  "version": "5.2.0-alpha.36"
 }
diff --git a/lib/addons/package.json b/lib/addons/package.json
index 7ef15b611b5b..758732ddf491 100644
--- a/lib/addons/package.json
+++ b/lib/addons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addons",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "Storybook addons store",
   "keywords": [
     "storybook"
@@ -21,9 +21,9 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/api": "5.2.0-alpha.30",
-    "@storybook/channels": "5.2.0-alpha.30",
-    "@storybook/client-logger": "5.2.0-alpha.30",
+    "@storybook/api": "5.2.0-alpha.36",
+    "@storybook/channels": "5.2.0-alpha.36",
+    "@storybook/client-logger": "5.2.0-alpha.36",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "util-deprecate": "^1.0.2"
diff --git a/lib/addons/src/index.ts b/lib/addons/src/index.ts
index 046b59d403cc..5e4843cbaf17 100644
--- a/lib/addons/src/index.ts
+++ b/lib/addons/src/index.ts
@@ -24,6 +24,7 @@ export interface Addon {
   route?: (routeOptions: RouteOptions) => string;
   match?: (matchOptions: MatchOptions) => boolean;
   render: (renderOptions: RenderOptions) => ReactElement<any>;
+  paramKey?: string;
 }
 
 export type Loader = (api: API) => void;
diff --git a/lib/api/package.json b/lib/api/package.json
index 869eeca709b3..60bb18a821ab 100644
--- a/lib/api/package.json
+++ b/lib/api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/api",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "Core Storybook API & Context",
   "keywords": [
     "storybook"
@@ -20,11 +20,11 @@
     "prepare": "node ./scripts/generateVersion.js && node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/channels": "5.2.0-alpha.30",
-    "@storybook/client-logger": "5.2.0-alpha.30",
-    "@storybook/core-events": "5.2.0-alpha.30",
-    "@storybook/router": "5.2.0-alpha.30",
-    "@storybook/theming": "5.2.0-alpha.30",
+    "@storybook/channels": "5.2.0-alpha.36",
+    "@storybook/client-logger": "5.2.0-alpha.36",
+    "@storybook/core-events": "5.2.0-alpha.36",
+    "@storybook/router": "5.2.0-alpha.36",
+    "@storybook/theming": "5.2.0-alpha.36",
     "core-js": "^3.0.1",
     "fast-deep-equal": "^2.0.1",
     "global": "^4.3.2",
diff --git a/lib/api/src/modules/addons.ts b/lib/api/src/modules/addons.ts
index efc6a1758b3f..ce95b9765bde 100644
--- a/lib/api/src/modules/addons.ts
+++ b/lib/api/src/modules/addons.ts
@@ -1,6 +1,6 @@
 import { ReactElement } from 'react';
 
-import { Module, State } from '../index';
+import { Module } from '../index';
 import { Options } from '../store';
 
 export enum types {
@@ -31,6 +31,7 @@ export interface Addon {
   route?: (routeOptions: RouteOptions) => string;
   match?: (matchOptions: MatchOptions) => boolean;
   render: (renderOptions: RenderOptions) => ReactElement<any>;
+  paramKey?: string;
 }
 export interface Collection {
   [key: string]: Addon;
@@ -42,9 +43,16 @@ interface Panels {
 
 type StateMerger<S> = (input: S) => S;
 
+interface StoryInput {
+  parameters: {
+    [parameterName: string]: any;
+  };
+}
+
 export interface SubAPI {
   getElements: (type: Types) => Collection;
   getPanels: () => Collection;
+  getStoryPanels: () => Collection;
   getSelectedPanel: () => string;
   setSelectedPanel: (panelName: string) => void;
   setAddonState<S>(
@@ -72,6 +80,28 @@ export default ({ provider, store }: Module) => {
   const api: SubAPI = {
     getElements: type => provider.getElements(type),
     getPanels: () => api.getElements(types.PANEL),
+    getStoryPanels: () => {
+      const allPanels = api.getPanels();
+      const { storyId, storiesHash } = store.getState();
+      const storyInput = storyId && (storiesHash[storyId] as StoryInput);
+
+      if (!allPanels || !storyInput) {
+        return allPanels;
+      }
+
+      const { parameters } = storyInput;
+
+      const filteredPanels: Collection = {};
+      Object.entries(allPanels).forEach(([id, panel]) => {
+        const { paramKey } = panel;
+        if (paramKey && parameters[paramKey] && parameters[paramKey].disabled) {
+          return;
+        }
+        filteredPanels[id] = panel;
+      });
+
+      return filteredPanels;
+    },
     getSelectedPanel: () => {
       const { selectedPanel } = store.getState();
       return ensurePanel(api.getPanels(), selectedPanel, selectedPanel);
diff --git a/lib/api/src/tests/addons.test.js b/lib/api/src/tests/addons.test.js
new file mode 100644
index 000000000000..c17c485518ec
--- /dev/null
+++ b/lib/api/src/tests/addons.test.js
@@ -0,0 +1,159 @@
+import initAddons, { types } from '../modules/addons';
+
+const PANELS = {
+  a11y: {
+    title: 'Accessibility',
+    paramKey: 'a11y',
+  },
+  actions: {
+    title: 'Actions',
+    paramKey: 'actions',
+  },
+  knobs: {
+    title: 'Knobs',
+    paramKey: 'knobs',
+  },
+};
+
+const provider = {
+  getElements(type) {
+    if (type === types.PANEL) {
+      return PANELS;
+    }
+    return null;
+  },
+};
+
+const store = {
+  getState: () => ({
+    selectedPanel: '',
+  }),
+  setState: jest.fn(),
+};
+
+describe('Addons API', () => {
+  describe('#getElements', () => {
+    it('should return provider elements', () => {
+      // given
+      const { api } = initAddons({ provider, store });
+
+      // when
+      const panels = api.getElements(types.PANEL);
+
+      // then
+      expect(panels).toBe(PANELS);
+    });
+  });
+
+  describe('#getPanels', () => {
+    it('should return provider panels', () => {
+      // given
+      const { api } = initAddons({ provider, store });
+
+      // when
+      const panels = api.getPanels();
+
+      // then
+      expect(panels).toBe(PANELS);
+    });
+  });
+
+  describe('#getStoryPanels', () => {
+    it('should return all panels by default', () => {
+      // given
+      const { api } = initAddons({ provider, store });
+
+      // when
+      const filteredPanels = api.getStoryPanels();
+
+      // then
+      expect(filteredPanels).toBe(PANELS);
+    });
+
+    it('should filter disabled addons', () => {
+      // given
+      const storyId = 'story 1';
+      const storeWithStory = {
+        getState: () => ({
+          storyId,
+          storiesHash: {
+            [storyId]: {
+              parameters: {
+                a11y: { disabled: true },
+              },
+            },
+          },
+        }),
+        setState: jest.fn(),
+      };
+
+      const { api } = initAddons({ provider, store: storeWithStory });
+
+      // when
+      const filteredPanels = api.getStoryPanels();
+
+      // then
+      expect(filteredPanels).toEqual({
+        actions: PANELS.actions,
+        knobs: PANELS.knobs,
+      });
+    });
+  });
+
+  describe('#getSelectedPanel', () => {
+    it('should return provider panels', () => {
+      // given
+      const storeWithSelectedPanel = {
+        getState: () => ({
+          selectedPanel: 'actions',
+        }),
+        setState: jest.fn(),
+      };
+      const { api } = initAddons({ provider, store: storeWithSelectedPanel });
+
+      // when
+      const selectedPanel = api.getSelectedPanel();
+
+      // then
+      expect(selectedPanel).toBe('actions');
+    });
+
+    it('should return first panel when selected is not a panel', () => {
+      // given
+      const storeWithSelectedPanel = {
+        getState: () => ({
+          selectedPanel: 'unknown',
+        }),
+        setState: jest.fn(),
+      };
+      const { api } = initAddons({ provider, store: storeWithSelectedPanel });
+
+      // when
+      const selectedPanel = api.getSelectedPanel();
+
+      // then
+      expect(selectedPanel).toBe('a11y');
+    });
+  });
+
+  describe('#setSelectedPanel', () => {
+    it('should set value inn store', () => {
+      // given
+      const setState = jest.fn();
+      const storeWithSelectedPanel = {
+        getState: () => ({
+          selectedPanel: 'actions',
+        }),
+        setState,
+      };
+      const { api } = initAddons({ provider, store: storeWithSelectedPanel });
+      expect(setState).not.toHaveBeenCalled();
+
+      // when
+      api.setSelectedPanel('knobs');
+
+      // then
+      expect(setState).toHaveBeenCalledWith({ selectedPanel: 'knobs' }, { persistence: 'session' });
+    });
+  });
+});
diff --git a/lib/api/src/version.ts b/lib/api/src/version.ts
index 8e933696cb8a..954f4f3dd02c 100644
--- a/lib/api/src/version.ts
+++ b/lib/api/src/version.ts
@@ -1 +1 @@
-export const version = '5.2.0-alpha.30';
+export const version = '5.2.0-alpha.36';
diff --git a/lib/channel-postmessage/package.json b/lib/channel-postmessage/package.json
index 3f0aba581328..c2cf127c4739 100644
--- a/lib/channel-postmessage/package.json
+++ b/lib/channel-postmessage/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/channel-postmessage",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "",
   "keywords": [
     "storybook"
@@ -21,8 +21,8 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/channels": "5.2.0-alpha.30",
-    "@storybook/client-logger": "5.2.0-alpha.30",
+    "@storybook/channels": "5.2.0-alpha.36",
+    "@storybook/client-logger": "5.2.0-alpha.36",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "telejson": "^2.2.1"
diff --git a/lib/channel-postmessage/src/index.ts b/lib/channel-postmessage/src/index.ts
index 8b8cd2faee6e..a2a01a4ea836 100644
--- a/lib/channel-postmessage/src/index.ts
+++ b/lib/channel-postmessage/src/index.ts
@@ -67,12 +67,18 @@ export class PostmsgTransport {
       });
     }
     let depth = 15;
+    let allowFunction = true;
+
+    if (options && typeof options.allowFunction === 'boolean') {
+      // eslint-disable-next-line prefer-destructuring
+      allowFunction = options.allowFunction;
+    }
     if (options && Number.isInteger(options.depth)) {
       // eslint-disable-next-line prefer-destructuring
       depth = options.depth;
     }
 
-    const data = stringify({ key: KEY, event }, { maxDepth: depth });
+    const data = stringify({ key: KEY, event }, { maxDepth: depth, allowFunction });
 
     // TODO: investigate http://blog.teamtreehouse.com/cross-domain-messaging-with-postmessage
     // might replace '*' with document.location ?
diff --git a/lib/channel-websocket/package.json b/lib/channel-websocket/package.json
index b87eda02fc2e..db4d41f832d2 100644
--- a/lib/channel-websocket/package.json
+++ b/lib/channel-websocket/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/channel-websocket",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "",
   "keywords": [
     "storybook"
@@ -21,7 +21,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/channels": "5.2.0-alpha.30",
+    "@storybook/channels": "5.2.0-alpha.36",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "json-fn": "^1.1.1"
diff --git a/lib/channels/package.json b/lib/channels/package.json
index 62a251784a45..e5e87ec42856 100644
--- a/lib/channels/package.json
+++ b/lib/channels/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/channels",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/lib/cli/generators/REACT_NATIVE/index.js b/lib/cli/generators/REACT_NATIVE/index.js
index b488122772c8..c289ec326364 100644
--- a/lib/cli/generators/REACT_NATIVE/index.js
+++ b/lib/cli/generators/REACT_NATIVE/index.js
@@ -12,17 +12,12 @@ import {
 } from '../../lib/helpers';
 
 export default async (npmOptions, installServer) => {
-  const [
-    storybookVersion,
-    addonsVersion,
-    actionsVersion,
-    linksVersion,
-  ] = await getVersions(
+  const [storybookVersion, addonsVersion, actionsVersion, linksVersion] = await getVersions(
     npmOptions,
     '@storybook/react-native',
     '@storybook/addons',
     '@storybook/addon-actions',
-    '@storybook/addon-links',
+    '@storybook/addon-links'
   );
 
   // copy all files from the template directory to project directory
@@ -76,8 +71,5 @@ export default async (npmOptions, installServer) => {
 
   const babelDependencies = await getBabelDependencies(npmOptions, packageJson);
 
-  installDependencies(npmOptions, [
-    ...devDependencies,
-    ...babelDependencies,
-  ]);
+  installDependencies(npmOptions, [...devDependencies, ...babelDependencies]);
 };
diff --git a/lib/cli/generators/REACT_NATIVE/template/storybook/stories/index.js b/lib/cli/generators/REACT_NATIVE/template/storybook/stories/index.js
index 63f1a6266717..b354a462808b 100644
--- a/lib/cli/generators/REACT_NATIVE/template/storybook/stories/index.js
+++ b/lib/cli/generators/REACT_NATIVE/template/storybook/stories/index.js
@@ -5,6 +5,7 @@ import { storiesOf } from '@storybook/react-native';
 import { action } from '@storybook/addon-actions';
 import { linkTo } from '@storybook/addon-links';
 
+// eslint-disable-next-line import/extensions
 import Button from './Button';
 import CenterView from './CenterView';
 import Welcome from './Welcome';
diff --git a/lib/cli/package.json b/lib/cli/package.json
index b2f8c07abaa0..956253937924 100644
--- a/lib/cli/package.json
+++ b/lib/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/cli",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "Storybook's CLI - easiest method of adding storybook to your projects",
   "keywords": [
     "cli",
@@ -30,7 +30,7 @@
     "@babel/core": "^7.4.5",
     "@babel/preset-env": "^7.4.5",
     "@babel/register": "^7.0.0",
-    "@storybook/codemod": "5.2.0-alpha.30",
+    "@storybook/codemod": "5.2.0-alpha.36",
     "chalk": "^2.4.1",
     "commander": "^2.19.0",
     "core-js": "^3.0.1",
@@ -45,33 +45,33 @@
     "update-notifier": "^3.0.0"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "5.2.0-alpha.30",
-    "@storybook/addon-centered": "5.2.0-alpha.30",
-    "@storybook/addon-graphql": "5.2.0-alpha.30",
-    "@storybook/addon-info": "5.2.0-alpha.30",
-    "@storybook/addon-knobs": "5.2.0-alpha.30",
-    "@storybook/addon-links": "5.2.0-alpha.30",
-    "@storybook/addon-notes": "5.2.0-alpha.30",
-    "@storybook/addon-options": "5.2.0-alpha.30",
-    "@storybook/addon-storyshots": "5.2.0-alpha.30",
-    "@storybook/addons": "5.2.0-alpha.30",
-    "@storybook/angular": "5.2.0-alpha.30",
-    "@storybook/channel-postmessage": "5.2.0-alpha.30",
-    "@storybook/channel-websocket": "5.2.0-alpha.30",
-    "@storybook/channels": "5.2.0-alpha.30",
-    "@storybook/ember": "5.2.0-alpha.30",
-    "@storybook/html": "5.2.0-alpha.30",
-    "@storybook/marko": "5.2.0-alpha.30",
-    "@storybook/mithril": "5.2.0-alpha.30",
-    "@storybook/polymer": "5.2.0-alpha.30",
-    "@storybook/preact": "5.2.0-alpha.30",
-    "@storybook/rax": "5.2.0-alpha.30",
-    "@storybook/react": "5.2.0-alpha.30",
-    "@storybook/react-native": "5.2.0-alpha.30",
-    "@storybook/riot": "5.2.0-alpha.30",
-    "@storybook/svelte": "5.2.0-alpha.30",
-    "@storybook/ui": "5.2.0-alpha.30",
-    "@storybook/vue": "5.2.0-alpha.30"
+    "@storybook/addon-actions": "5.2.0-alpha.36",
+    "@storybook/addon-centered": "5.2.0-alpha.36",
+    "@storybook/addon-graphql": "5.2.0-alpha.36",
+    "@storybook/addon-info": "5.2.0-alpha.36",
+    "@storybook/addon-knobs": "5.2.0-alpha.36",
+    "@storybook/addon-links": "5.2.0-alpha.36",
+    "@storybook/addon-notes": "5.2.0-alpha.36",
+    "@storybook/addon-options": "5.2.0-alpha.36",
+    "@storybook/addon-storyshots": "5.2.0-alpha.36",
+    "@storybook/addons": "5.2.0-alpha.36",
+    "@storybook/angular": "5.2.0-alpha.36",
+    "@storybook/channel-postmessage": "5.2.0-alpha.36",
+    "@storybook/channel-websocket": "5.2.0-alpha.36",
+    "@storybook/channels": "5.2.0-alpha.36",
+    "@storybook/ember": "5.2.0-alpha.36",
+    "@storybook/html": "5.2.0-alpha.36",
+    "@storybook/marko": "5.2.0-alpha.36",
+    "@storybook/mithril": "5.2.0-alpha.36",
+    "@storybook/polymer": "5.2.0-alpha.36",
+    "@storybook/preact": "5.2.0-alpha.36",
+    "@storybook/rax": "5.2.0-alpha.36",
+    "@storybook/react": "5.2.0-alpha.36",
+    "@storybook/react-native": "5.2.0-alpha.36",
+    "@storybook/riot": "5.2.0-alpha.36",
+    "@storybook/svelte": "5.2.0-alpha.36",
+    "@storybook/ui": "5.2.0-alpha.36",
+    "@storybook/vue": "5.2.0-alpha.36"
   },
   "publishConfig": {
     "access": "public"
diff --git a/lib/client-api/package.json b/lib/client-api/package.json
index f797bf87aea4..b1ec1b0ff34e 100644
--- a/lib/client-api/package.json
+++ b/lib/client-api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/client-api",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "Storybook Client API",
   "keywords": [
     "storybook"
@@ -20,10 +20,10 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.30",
-    "@storybook/client-logger": "5.2.0-alpha.30",
-    "@storybook/core-events": "5.2.0-alpha.30",
-    "@storybook/router": "5.2.0-alpha.30",
+    "@storybook/addons": "5.2.0-alpha.36",
+    "@storybook/client-logger": "5.2.0-alpha.36",
+    "@storybook/core-events": "5.2.0-alpha.36",
+    "@storybook/router": "5.2.0-alpha.36",
     "common-tags": "^1.8.0",
     "core-js": "^3.0.1",
     "eventemitter3": "^3.1.0",
diff --git a/lib/client-api/src/story_store.js b/lib/client-api/src/story_store.js
index 1ccf26a2588d..cf13ee725ee2 100644
--- a/lib/client-api/src/story_store.js
+++ b/lib/client-api/src/story_store.js
@@ -76,11 +76,19 @@ export default class StoryStore extends EventEmitter {
   }
 
   extract() {
+    const stories = Object.entries(this._data);
+    // determine if we should apply a sort to the stories or just use default import order
+    if (Object.values(this._data).length > 0) {
+      const index = Object.keys(this._data).find(
+        key => this._data[key] && this._data[key].parameters && this._data[key].parameters.options
+      );
+      if (index && this._data[index].parameters.options.storySort) {
+        const sortFn = this._data[index].parameters.options.storySort;
+        stories.sort(sortFn);
+      }
+    }
     // removes function values from all stories so they are safe to transport over the channel
-    return Object.entries(this._data).reduce(
-      (a, [k, v]) => Object.assign(a, { [k]: toExtracted(v) }),
-      {}
-    );
+    return stories.reduce((a, [k, v]) => Object.assign(a, { [k]: toExtracted(v) }), {});
   }
 
   setSelection = (data, error) => {
@@ -89,7 +97,15 @@ export default class StoryStore extends EventEmitter {
     this._selection = data === undefined ? this._selection : { storyId, viewMode };
     this._error = error === undefined ? this._error : error;
 
-    setTimeout(() => this.emit(Events.STORY_RENDER), 1);
+    setTimeout(() => {
+      // preferred method to emit event.
+      if (this._channel) {
+        this._channel.emit(Events.STORY_RENDER);
+      }
+
+      // should be deprecated in future.
+      this.emit(Events.STORY_RENDER);
+    }, 1);
   };
 
   getSelection = () => this._selection;
@@ -98,7 +114,16 @@ export default class StoryStore extends EventEmitter {
 
   remove = id => {
     const { _data } = this;
+    const story = _data[id];
     delete _data[id];
+
+    if (story) {
+      const { kind, name } = story;
+      const kindData = this._legacydata[toKey(kind)];
+      if (kindData) {
+        delete kindData.stories[toKey(name)];
+      }
+    }
   };
 
   addStory(
@@ -255,6 +280,13 @@ export default class StoryStore extends EventEmitter {
   removeStoryKind(kind) {
     if (this.hasStoryKind(kind)) {
       this._legacydata[toKey(kind)].stories = {};
+
+      this._data = Object.entries(this._data).reduce((acc, [id, story]) => {
+        if (story.kind !== kind) {
+          Object.assign(acc, { [id]: story });
+        }
+        return acc;
+      }, {});
     }
   }
 
diff --git a/lib/client-api/src/story_store.test.js b/lib/client-api/src/story_store.test.js
index e587e62027aa..1ac523c4bbe5 100644
--- a/lib/client-api/src/story_store.test.js
+++ b/lib/client-api/src/story_store.test.js
@@ -95,6 +95,41 @@ describe('preview.story_store', () => {
       const store = new StoryStore({ channel });
       store.removeStoryKind('kind');
     });
+    it('should remove the kind in both modern and legacy APIs', () => {
+      const store = new StoryStore({ channel });
+      store.addStory(...make('kind-1', 'story-1.1', () => 0));
+      store.addStory(...make('kind-1', 'story-1.2', () => 0));
+      store.addStory(...make('kind-2', 'story-2.1', () => 0));
+      store.addStory(...make('kind-2', 'story-2.2', () => 0));
+
+      store.removeStoryKind('kind-1');
+
+      // _legacydata
+      expect(store.hasStory('kind-1', 'story-1.1')).toBeFalsy();
+      expect(store.hasStory('kind-2', 'story-2.1')).toBeTruthy();
+
+      // _data
+      expect(store.fromId(toId('kind-1', 'story-1.1'))).toBeFalsy();
+      expect(store.fromId(toId('kind-2', 'story-2.1'))).toBeTruthy();
+    });
+  });
+
+  describe('remove', () => {
+    it('should remove the kind in both modern and legacy APIs', () => {
+      const store = new StoryStore({ channel });
+      store.addStory(...make('kind-1', 'story-1.1', () => 0));
+      store.addStory(...make('kind-1', 'story-1.2', () => 0));
+
+      store.remove(toId('kind-1', 'story-1.1'));
+
+      // _legacydata
+      expect(store.hasStory('kind-1', 'story-1.1')).toBeFalsy();
+      expect(store.hasStory('kind-1', 'story-1.2')).toBeTruthy();
+
+      // _data
+      expect(store.fromId(toId('kind-1', 'story-1.1'))).toBeFalsy();
+      expect(store.fromId(toId('kind-1', 'story-1.2'))).toBeTruthy();
+    });
   });
 
   describe('getStoryAndParameters', () => {
@@ -132,4 +167,29 @@ describe('preview.story_store', () => {
       });
     });
   });
+
+  describe('story sorting', () => {
+    const storySort = (a, b) => a[1].id.localeCompare(b[1].id);
+    it('should use the sorting function of the story parameter object', () => {
+      const store = new StoryStore({ channel });
+      store.addStory(
+        ...make('kind-2', 'a-story-2.1', () => 0, { fileName: 'bar.js', options: { storySort } })
+      );
+      store.addStory(
+        ...make('kind-1', 'z-story-1.1', () => 0, { fileName: 'foo.js', options: { storySort } })
+      );
+      store.addStory(
+        ...make('kind-1', 'story-1.2', () => 0, { fileName: 'foo-2.js', options: { storySort } })
+      );
+      store.addStory(
+        ...make('kind-2', 'story-2.1', () => 0, { fileName: 'bar.js', options: { storySort } })
+      );
+
+      const stories = Object.values(store.extract());
+      expect(stories[0].id).toBe('kind-1--story-1-2');
+      expect(stories[1].id).toBe('kind-1--z-story-1-1');
+      expect(stories[2].id).toBe('kind-2--a-story-2-1');
+      expect(stories[3].id).toBe('kind-2--story-2-1');
+    });
+  });
 });
diff --git a/lib/client-logger/package.json b/lib/client-logger/package.json
index e41437673ddc..ca24a83d8e5e 100644
--- a/lib/client-logger/package.json
+++ b/lib/client-logger/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/client-logger",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/lib/codemod/package.json b/lib/codemod/package.json
index e84968133d92..1f67a262585b 100644
--- a/lib/codemod/package.json
+++ b/lib/codemod/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/codemod",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "A collection of codemod scripts written with JSCodeshift",
   "keywords": [
     "storybook"
@@ -23,6 +23,7 @@
   "dependencies": {
     "core-js": "^3.0.1",
     "jscodeshift": "^0.6.3",
+    "lodash": "^4.17.11",
     "prettier": "^1.16.4",
     "regenerator-runtime": "^0.12.1"
   },
diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/basic.output.js b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/basic.output.js
index 1a8cd5c0b5ca..169a5b3ebc91 100644
--- a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/basic.output.js
+++ b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/basic.output.js
@@ -10,14 +10,19 @@ export default {
 };
 
 export const story1 = () => <Button label="Story 1" />;
-export const story2 = () => <Button label="Story 2" onClick={action('click')} />;
-story2.title = 'second story';
+export const secondStory = () => <Button label="Story 2" onClick={action('click')} />;
 
-export const story3 = () => (
+secondStory.story = {
+  name: 'second story',
+};
+
+export const complexStory = () => (
   <div>
     <Button label="The Button" onClick={action('onClick')} />
     <br />
   </div>
 );
 
-story3.title = 'complex story';
+complexStory.story = {
+  name: 'complex story',
+};
diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/decorators.output.js b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/decorators.output.js
index 3a7e19019ce1..26ab8c2c07e3 100644
--- a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/decorators.output.js
+++ b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/decorators.output.js
@@ -7,5 +7,8 @@ export default {
   decorators: [withKnobs, storyFn => <div className="foo">{storyFn}</div>],
 };
 
-export const story1 = () => <Button label="The Button" />;
-story1.title = 'with decorator';
+export const withDecorator = () => <Button label="The Button" />;
+
+withDecorator.story = {
+  name: 'with decorator',
+};
diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/default.input.js b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/default.input.js
new file mode 100644
index 000000000000..d242ed9a688c
--- /dev/null
+++ b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/default.input.js
@@ -0,0 +1,7 @@
+/* eslint-disable */
+import React from 'react';
+import Button from './Button';
+
+import { storiesOf } from '@storybook/react';
+
+storiesOf('Button', module).add('default', () => <Button label="Story 1" />);
diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/default.output.js b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/default.output.js
new file mode 100644
index 000000000000..c75670b2030c
--- /dev/null
+++ b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/default.output.js
@@ -0,0 +1,13 @@
+/* eslint-disable */
+import React from 'react';
+import Button from './Button';
+
+export default {
+  title: 'Button',
+};
+
+export const defaultStory = () => <Button label="Story 1" />;
+
+defaultStory.story = {
+  name: 'default',
+};
diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/parameters.output.js b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/parameters.output.js
index 1eb4e9209981..021adda2932a 100644
--- a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/parameters.output.js
+++ b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/parameters.output.js
@@ -12,5 +12,8 @@ export default {
   },
 };
 
-export const story1 = () => <Button label="The Button" />;
-story1.title = 'with kind parameters';
+export const withKindParameters = () => <Button label="The Button" />;
+
+withKindParameters.story = {
+  name: 'with kind parameters',
+};
diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/story-parameters.output.js b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/story-parameters.output.js
index f89b007cb6e5..6d0b9a5afe40 100644
--- a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/story-parameters.output.js
+++ b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/story-parameters.output.js
@@ -6,16 +6,21 @@ export default {
   title: 'Button',
 };
 
-export const story1 = () => <Button label="The Button" />;
-story1.title = 'with story parameters';
+export const withStoryParameters = () => <Button label="The Button" />;
 
-story1.parameters = {
-  header: false,
-  inline: true,
+withStoryParameters.story = {
+  name: 'with story parameters',
+
+  parameters: {
+    header: false,
+    inline: true,
+  },
 };
 
 export const foo = () => <Button label="Foo" />;
 
-foo.parameters = {
-  bar: 1,
+foo.story = {
+  parameters: {
+    bar: 1,
+  },
 };
diff --git a/lib/codemod/src/transforms/__tests__/convert-to-module-format.test.js b/lib/codemod/src/transforms/__tests__/convert-to-module-format.test.js
index b3f6d6930c28..774a46824fee 100644
--- a/lib/codemod/src/transforms/__tests__/convert-to-module-format.test.js
+++ b/lib/codemod/src/transforms/__tests__/convert-to-module-format.test.js
@@ -1,6 +1,14 @@
 import { defineTest } from 'jscodeshift/dist/testUtils';
 
-const testNames = ['basic', 'decorators', 'parameters', 'story-parameters', 'module', 'multi'];
+const testNames = [
+  'basic',
+  'decorators',
+  'parameters',
+  'story-parameters',
+  'module',
+  'multi',
+  'default',
+];
 
 testNames.forEach(testName => {
   defineTest(__dirname, `convert-to-module-format`, null, `convert-to-module-format/${testName}`);
diff --git a/lib/codemod/src/transforms/convert-to-module-format.js b/lib/codemod/src/transforms/convert-to-module-format.js
index a776cc505483..7ba932f71278 100644
--- a/lib/codemod/src/transforms/convert-to-module-format.js
+++ b/lib/codemod/src/transforms/convert-to-module-format.js
@@ -1,4 +1,5 @@
 import prettier from 'prettier';
+import camelCase from 'lodash/camelCase';
 
 /**
  * Convert a legacy story file to module format
@@ -28,7 +29,6 @@ export default function transformer(file, api, options) {
   function convertToModuleExports(path) {
     const base = j(path);
 
-    let counter = 1;
     const statements = [];
     const extraExports = [];
 
@@ -100,39 +100,43 @@ export default function transformer(file, api, options) {
     adds.push(path);
 
     adds.forEach(add => {
-      let name = add.node.arguments[0].value;
-      let title = null;
-      if (/\s/.exec(name)) {
-        title = name;
-        name = `story${counter}`;
+      let key = add.node.arguments[0].value;
+      let name = null;
+      if (/\s/.exec(key)) {
+        name = key;
+        key = camelCase(key);
+      } else if (key === 'default') {
+        name = key;
+        key = 'defaultStory';
       }
       const val = add.node.arguments[1];
       statements.push(
         j.exportDeclaration(
           false,
-          j.variableDeclaration('const', [j.variableDeclarator(j.identifier(name), val)])
+          j.variableDeclaration('const', [j.variableDeclarator(j.identifier(key), val)])
         )
       );
-      if (title) {
-        statements.push(
-          j.assignmentStatement(
-            '=',
-            j.memberExpression(j.identifier(name), j.identifier('title')),
-            j.literal(title)
-          )
-        );
+
+      const storyAnnotations = [];
+
+      if (name) {
+        storyAnnotations.push(j.property('init', j.identifier('name'), j.literal(name)));
       }
+
       if (add.node.arguments.length > 2) {
         const storyParams = add.node.arguments[2];
+        storyAnnotations.push(j.property('init', j.identifier('parameters'), storyParams));
+      }
+
+      if (storyAnnotations.length > 0) {
         statements.push(
           j.assignmentStatement(
             '=',
-            j.memberExpression(j.identifier(name), j.identifier('parameters')),
-            storyParams
+            j.memberExpression(j.identifier(key), j.identifier('story')),
+            j.objectExpression(storyAnnotations)
           )
         );
       }
-      counter += 1;
     });
 
     statements.reverse();
diff --git a/lib/components/package.json b/lib/components/package.json
index adc8fbdc7ccb..21cc143019db 100644
--- a/lib/components/package.json
+++ b/lib/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/components",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "Core Storybook Components",
   "keywords": [
     "storybook"
@@ -21,8 +21,8 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/client-logger": "5.2.0-alpha.30",
-    "@storybook/theming": "5.2.0-alpha.30",
+    "@storybook/client-logger": "5.2.0-alpha.36",
+    "@storybook/theming": "5.2.0-alpha.36",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "markdown-to-jsx": "^6.9.1",
diff --git a/lib/components/src/Badge/__snapshots__/Badge.stories.storyshot b/lib/components/src/Badge/__snapshots__/Badge.stories.storyshot
deleted file mode 100644
index 47f8c347e83c..000000000000
--- a/lib/components/src/Badge/__snapshots__/Badge.stories.storyshot
+++ /dev/null
@@ -1,96 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Basics|Badge all badges 1`] = `
-.emotion-0 {
-  display: inline-block;
-  font-size: 11px;
-  line-height: 12px;
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-  padding: 4px 12px;
-  border-radius: 3em;
-  font-weight: 700;
-  color: #66BF3C;
-  background: #E1FFD4;
-}
-
-.emotion-0 svg {
-  height: 12px;
-  width: 12px;
-  margin-right: 4px;
-  margin-top: -2px;
-}
-
-.emotion-0 svg path {
-  fill: currentColor;
-}
-
-.emotion-1 {
-  display: inline-block;
-  font-size: 11px;
-  line-height: 12px;
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-  padding: 4px 12px;
-  border-radius: 3em;
-  font-weight: 700;
-  color: #FF4400;
-  background: #FEDED2;
-}
-
-.emotion-1 svg {
-  height: 12px;
-  width: 12px;
-  margin-right: 4px;
-  margin-top: -2px;
-}
-
-.emotion-1 svg path {
-  fill: currentColor;
-}
-
-.emotion-2 {
-  display: inline-block;
-  font-size: 11px;
-  line-height: 12px;
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-  padding: 4px 12px;
-  border-radius: 3em;
-  font-weight: 700;
-  color: #666666;
-  background: #EEEEEE;
-}
-
-.emotion-2 svg {
-  height: 12px;
-  width: 12px;
-  margin-right: 4px;
-  margin-top: -2px;
-}
-
-.emotion-2 svg path {
-  fill: currentColor;
-}
-
-<div>
-  <div
-    class="emotion-0"
-  >
-    Positive
-  </div>
-  <div
-    class="emotion-1"
-  >
-    Negative
-  </div>
-  <div
-    class="emotion-2"
-  >
-    Neutral
-  </div>
-</div>
-`;
diff --git a/lib/components/src/Button/__snapshots__/Button.stories.storyshot b/lib/components/src/Button/__snapshots__/Button.stories.storyshot
deleted file mode 100644
index b3095259427a..000000000000
--- a/lib/components/src/Button/__snapshots__/Button.stories.storyshot
+++ /dev/null
@@ -1,1028 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Basics|Button all buttons 1`] = `
-.emotion-4 {
-  shape-rendering: inherit;
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-  display: block;
-}
-
-.emotion-3 {
-  fill: currentColor;
-}
-
-.emotion-0 {
-  border: 0;
-  border-radius: 3em;
-  cursor: pointer;
-  display: inline-block;
-  overflow: hidden;
-  padding: 10px 16px;
-  position: relative;
-  text-align: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-  vertical-align: top;
-  white-space: nowrap;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  opacity: 1;
-  margin: 0;
-  background: transparent;
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 1;
-  background: #fafafa;
-  color: #333333;
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
-  display: inline;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  overflow: visible;
-  z-index: 2;
-}
-
-.emotion-0 svg {
-  display: inline-block;
-  height: 14px;
-  width: 14px;
-  vertical-align: top;
-  margin-right: 4px;
-  margin-top: -1px;
-  margin-bottom: -1px;
-  pointer-events: none;
-}
-
-.emotion-0 svg path {
-  fill: currentColor;
-}
-
-.emotion-0:hover {
-  background: #f2f2f2;
-}
-
-.emotion-0:active {
-  background: #FFFFFF;
-}
-
-.emotion-0:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
-}
-
-.emotion-0:hover {
-  -webkit-transform: none;
-  -ms-transform: none;
-  transform: none;
-}
-
-.emotion-1 {
-  border: 0;
-  border-radius: 3em;
-  cursor: pointer;
-  display: inline-block;
-  overflow: hidden;
-  padding: 13px 20px;
-  position: relative;
-  text-align: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-  vertical-align: top;
-  white-space: nowrap;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  opacity: 1;
-  margin: 0;
-  background: transparent;
-  font-size: 13px;
-  font-weight: 700;
-  line-height: 1;
-  background: #FF4785;
-  color: #FFFFFF;
-}
-
-.emotion-1 svg {
-  display: inline-block;
-  height: 16px;
-  width: 16px;
-  vertical-align: top;
-  margin-right: 6px;
-  margin-top: -2px;
-  margin-bottom: -2px;
-  pointer-events: none;
-}
-
-.emotion-1 svg path {
-  fill: currentColor;
-}
-
-.emotion-1:hover {
-  background: #ff2d74;
-}
-
-.emotion-1:active {
-  box-shadow: rgba(0,0,0,0.1) 0 0 0 3em inset;
-}
-
-.emotion-1:focus {
-  box-shadow: rgba(255,71,133,0.4) 0 1px 9px 2px;
-}
-
-.emotion-1:focus:hover {
-  box-shadow: rgba(255,71,133,0.2) 0 8px 18px 0px;
-}
-
-.emotion-2 {
-  border: 0;
-  border-radius: 3em;
-  cursor: pointer;
-  display: inline-block;
-  overflow: hidden;
-  padding: 13px 20px;
-  position: relative;
-  text-align: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-  vertical-align: top;
-  white-space: nowrap;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  opacity: 1;
-  margin: 0;
-  background: transparent;
-  font-size: 13px;
-  font-weight: 700;
-  line-height: 1;
-  background: #1EA7FD;
-  color: #FFFFFF;
-}
-
-.emotion-2 svg {
-  display: inline-block;
-  height: 16px;
-  width: 16px;
-  vertical-align: top;
-  margin-right: 6px;
-  margin-top: -2px;
-  margin-bottom: -2px;
-  pointer-events: none;
-}
-
-.emotion-2 svg path {
-  fill: currentColor;
-}
-
-.emotion-2:hover {
-  background: #059dfd;
-}
-
-.emotion-2:active {
-  box-shadow: rgba(0,0,0,0.1) 0 0 0 3em inset;
-}
-
-.emotion-2:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
-}
-
-.emotion-2:focus:hover {
-  box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
-}
-
-.emotion-5 {
-  border: 0;
-  border-radius: 3em;
-  cursor: pointer;
-  display: inline-block;
-  overflow: hidden;
-  padding: 13px 20px;
-  position: relative;
-  text-align: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-  vertical-align: top;
-  white-space: nowrap;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  opacity: 1;
-  margin: 0;
-  background: transparent;
-  font-size: 13px;
-  font-weight: 700;
-  line-height: 1;
-  padding: 12px;
-  box-shadow: rgba(51,51,51,0.2) 0 0 0 1px inset;
-  color: rgba(51,51,51,0.7);
-  background: transparent;
-}
-
-.emotion-5 svg {
-  display: inline-block;
-  height: 16px;
-  width: 16px;
-  vertical-align: top;
-  margin-right: 6px;
-  margin-top: -2px;
-  margin-bottom: -2px;
-  pointer-events: none;
-}
-
-.emotion-5 svg path {
-  fill: currentColor;
-}
-
-.emotion-5 svg {
-  display: block;
-  margin: 0;
-}
-
-.emotion-5:hover {
-  box-shadow: rgba(51,51,51,0.5) 0 0 0 1px inset;
-}
-
-.emotion-5:active {
-  box-shadow: rgba(51,51,51,0.5) 0 0 0 2px inset;
-  color: #333;
-}
-
-.emotion-6 {
-  border: 0;
-  border-radius: 3em;
-  cursor: pointer;
-  display: inline-block;
-  overflow: hidden;
-  padding: 13px 20px;
-  position: relative;
-  text-align: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-  vertical-align: top;
-  white-space: nowrap;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  opacity: 1;
-  margin: 0;
-  background: transparent;
-  font-size: 13px;
-  font-weight: 700;
-  line-height: 1;
-  box-shadow: rgba(51,51,51,0.2) 0 0 0 1px inset;
-  color: rgba(51,51,51,0.7);
-  background: transparent;
-}
-
-.emotion-6 svg {
-  display: inline-block;
-  height: 16px;
-  width: 16px;
-  vertical-align: top;
-  margin-right: 6px;
-  margin-top: -2px;
-  margin-bottom: -2px;
-  pointer-events: none;
-}
-
-.emotion-6 svg path {
-  fill: currentColor;
-}
-
-.emotion-6:hover {
-  box-shadow: rgba(51,51,51,0.5) 0 0 0 1px inset;
-}
-
-.emotion-6:active {
-  box-shadow: rgba(51,51,51,0.5) 0 0 0 2px inset;
-  color: #333;
-}
-
-.emotion-7 {
-  border: 0;
-  border-radius: 3em;
-  cursor: pointer;
-  display: inline-block;
-  overflow: hidden;
-  padding: 13px 20px;
-  position: relative;
-  text-align: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-  vertical-align: top;
-  white-space: nowrap;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  opacity: 1;
-  margin: 0;
-  background: transparent;
-  font-size: 13px;
-  font-weight: 700;
-  line-height: 1;
-  background: #FF4785;
-  color: #FFFFFF;
-  box-shadow: rgba(51,51,51,0.2) 0 0 0 1px inset;
-  color: rgba(51,51,51,0.7);
-  background: transparent;
-  box-shadow: #FF4785 0 0 0 1px inset;
-  color: #FF4785;
-}
-
-.emotion-7 svg {
-  display: inline-block;
-  height: 16px;
-  width: 16px;
-  vertical-align: top;
-  margin-right: 6px;
-  margin-top: -2px;
-  margin-bottom: -2px;
-  pointer-events: none;
-}
-
-.emotion-7 svg path {
-  fill: currentColor;
-}
-
-.emotion-7:hover {
-  background: #ff2d74;
-}
-
-.emotion-7:active {
-  box-shadow: rgba(0,0,0,0.1) 0 0 0 3em inset;
-}
-
-.emotion-7:focus {
-  box-shadow: rgba(255,71,133,0.4) 0 1px 9px 2px;
-}
-
-.emotion-7:focus:hover {
-  box-shadow: rgba(255,71,133,0.2) 0 8px 18px 0px;
-}
-
-.emotion-7:hover {
-  box-shadow: rgba(51,51,51,0.5) 0 0 0 1px inset;
-}
-
-.emotion-7:active {
-  box-shadow: rgba(51,51,51,0.5) 0 0 0 2px inset;
-  color: #333;
-}
-
-.emotion-7 svg path {
-  fill: #FF4785;
-}
-
-.emotion-7:hover {
-  box-shadow: #FF4785 0 0 0 1px inset;
-  background: transparent;
-}
-
-.emotion-7:active {
-  background: #FF4785;
-  box-shadow: #FF4785 0 0 0 1px inset;
-  color: #FFFFFF;
-}
-
-.emotion-7:focus {
-  box-shadow: #FF4785 0 0 0 1px inset, rgba(255,71,133,0.4) 0 1px 9px 2px;
-}
-
-.emotion-7:focus:hover {
-  box-shadow: #FF4785 0 0 0 1px inset, rgba(255,71,133,0.2) 0 8px 18px 0px;
-}
-
-.emotion-8 {
-  border: 0;
-  border-radius: 3em;
-  cursor: pointer;
-  display: inline-block;
-  overflow: hidden;
-  padding: 13px 20px;
-  position: relative;
-  text-align: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-  vertical-align: top;
-  white-space: nowrap;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  opacity: 1;
-  margin: 0;
-  background: transparent;
-  font-size: 13px;
-  font-weight: 700;
-  line-height: 1;
-  background: #1EA7FD;
-  color: #FFFFFF;
-  box-shadow: rgba(51,51,51,0.2) 0 0 0 1px inset;
-  color: rgba(51,51,51,0.7);
-  background: transparent;
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-  color: #1EA7FD;
-}
-
-.emotion-8 svg {
-  display: inline-block;
-  height: 16px;
-  width: 16px;
-  vertical-align: top;
-  margin-right: 6px;
-  margin-top: -2px;
-  margin-bottom: -2px;
-  pointer-events: none;
-}
-
-.emotion-8 svg path {
-  fill: currentColor;
-}
-
-.emotion-8:hover {
-  background: #059dfd;
-}
-
-.emotion-8:active {
-  box-shadow: rgba(0,0,0,0.1) 0 0 0 3em inset;
-}
-
-.emotion-8:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
-}
-
-.emotion-8:focus:hover {
-  box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
-}
-
-.emotion-8:hover {
-  box-shadow: rgba(51,51,51,0.5) 0 0 0 1px inset;
-}
-
-.emotion-8:active {
-  box-shadow: rgba(51,51,51,0.5) 0 0 0 2px inset;
-  color: #333;
-}
-
-.emotion-8:hover {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-  background: transparent;
-}
-
-.emotion-8:active {
-  background: #1EA7FD;
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-  color: #FFFFFF;
-}
-
-.emotion-8:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset, rgba(30,167,253,0.4) 0 1px 9px 2px;
-}
-
-.emotion-8:focus:hover {
-  box-shadow: #1EA7FD 0 0 0 1px inset, rgba(30,167,253,0.2) 0 8px 18px 0px;
-}
-
-.emotion-9 {
-  border: 0;
-  border-radius: 3em;
-  cursor: pointer;
-  display: inline-block;
-  overflow: hidden;
-  padding: 13px 20px;
-  position: relative;
-  text-align: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-  vertical-align: top;
-  white-space: nowrap;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  opacity: 1;
-  margin: 0;
-  background: transparent;
-  font-size: 13px;
-  font-weight: 700;
-  line-height: 1;
-  cursor: not-allowed !important;
-  opacity: 0.5;
-  background: #FF4785;
-  color: #FFFFFF;
-}
-
-.emotion-9 svg {
-  display: inline-block;
-  height: 16px;
-  width: 16px;
-  vertical-align: top;
-  margin-right: 6px;
-  margin-top: -2px;
-  margin-bottom: -2px;
-  pointer-events: none;
-}
-
-.emotion-9 svg path {
-  fill: currentColor;
-}
-
-.emotion-9:hover {
-  -webkit-transform: none;
-  -ms-transform: none;
-  transform: none;
-}
-
-.emotion-9:hover {
-  background: #ff2d74;
-}
-
-.emotion-9:active {
-  box-shadow: rgba(0,0,0,0.1) 0 0 0 3em inset;
-}
-
-.emotion-9:focus {
-  box-shadow: rgba(255,71,133,0.4) 0 1px 9px 2px;
-}
-
-.emotion-9:focus:hover {
-  box-shadow: rgba(255,71,133,0.2) 0 8px 18px 0px;
-}
-
-.emotion-10 {
-  border: 0;
-  border-radius: 3em;
-  cursor: pointer;
-  display: inline-block;
-  overflow: hidden;
-  padding: 10px 16px;
-  position: relative;
-  text-align: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-  vertical-align: top;
-  white-space: nowrap;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  opacity: 1;
-  margin: 0;
-  background: transparent;
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 1;
-  background: #FF4785;
-  color: #FFFFFF;
-}
-
-.emotion-10 svg {
-  display: inline-block;
-  height: 14px;
-  width: 14px;
-  vertical-align: top;
-  margin-right: 4px;
-  margin-top: -1px;
-  margin-bottom: -1px;
-  pointer-events: none;
-}
-
-.emotion-10 svg path {
-  fill: currentColor;
-}
-
-.emotion-10:hover {
-  background: #ff2d74;
-}
-
-.emotion-10:active {
-  box-shadow: rgba(0,0,0,0.1) 0 0 0 3em inset;
-}
-
-.emotion-10:focus {
-  box-shadow: rgba(255,71,133,0.4) 0 1px 9px 2px;
-}
-
-.emotion-10:focus:hover {
-  box-shadow: rgba(255,71,133,0.2) 0 8px 18px 0px;
-}
-
-.emotion-11 {
-  border: 0;
-  border-radius: 3em;
-  cursor: pointer;
-  display: inline-block;
-  overflow: hidden;
-  padding: 10px 16px;
-  position: relative;
-  text-align: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-  vertical-align: top;
-  white-space: nowrap;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  opacity: 1;
-  margin: 0;
-  background: transparent;
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 1;
-  background: #1EA7FD;
-  color: #FFFFFF;
-}
-
-.emotion-11 svg {
-  display: inline-block;
-  height: 14px;
-  width: 14px;
-  vertical-align: top;
-  margin-right: 4px;
-  margin-top: -1px;
-  margin-bottom: -1px;
-  pointer-events: none;
-}
-
-.emotion-11 svg path {
-  fill: currentColor;
-}
-
-.emotion-11:hover {
-  background: #059dfd;
-}
-
-.emotion-11:active {
-  box-shadow: rgba(0,0,0,0.1) 0 0 0 3em inset;
-}
-
-.emotion-11:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 1px 9px 2px;
-}
-
-.emotion-11:focus:hover {
-  box-shadow: rgba(30,167,253,0.2) 0 8px 18px 0px;
-}
-
-.emotion-12 {
-  border: 0;
-  border-radius: 3em;
-  cursor: pointer;
-  display: inline-block;
-  overflow: hidden;
-  padding: 10px 16px;
-  position: relative;
-  text-align: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-  vertical-align: top;
-  white-space: nowrap;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  opacity: 1;
-  margin: 0;
-  background: transparent;
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 1;
-  box-shadow: rgba(51,51,51,0.2) 0 0 0 1px inset;
-  color: rgba(51,51,51,0.7);
-  background: transparent;
-}
-
-.emotion-12 svg {
-  display: inline-block;
-  height: 14px;
-  width: 14px;
-  vertical-align: top;
-  margin-right: 4px;
-  margin-top: -1px;
-  margin-bottom: -1px;
-  pointer-events: none;
-}
-
-.emotion-12 svg path {
-  fill: currentColor;
-}
-
-.emotion-12:hover {
-  box-shadow: rgba(51,51,51,0.5) 0 0 0 1px inset;
-}
-
-.emotion-12:active {
-  box-shadow: rgba(51,51,51,0.5) 0 0 0 2px inset;
-  color: #333;
-}
-
-.emotion-13 {
-  border: 0;
-  border-radius: 3em;
-  cursor: pointer;
-  display: inline-block;
-  overflow: hidden;
-  padding: 10px 16px;
-  position: relative;
-  text-align: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-  vertical-align: top;
-  white-space: nowrap;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  opacity: 1;
-  margin: 0;
-  background: transparent;
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 1;
-  cursor: not-allowed !important;
-  opacity: 0.5;
-  background: #FF4785;
-  color: #FFFFFF;
-}
-
-.emotion-13 svg {
-  display: inline-block;
-  height: 14px;
-  width: 14px;
-  vertical-align: top;
-  margin-right: 4px;
-  margin-top: -1px;
-  margin-bottom: -1px;
-  pointer-events: none;
-}
-
-.emotion-13 svg path {
-  fill: currentColor;
-}
-
-.emotion-13:hover {
-  -webkit-transform: none;
-  -ms-transform: none;
-  transform: none;
-}
-
-.emotion-13:hover {
-  background: #ff2d74;
-}
-
-.emotion-13:active {
-  box-shadow: rgba(0,0,0,0.1) 0 0 0 3em inset;
-}
-
-.emotion-13:focus {
-  box-shadow: rgba(255,71,133,0.4) 0 1px 9px 2px;
-}
-
-.emotion-13:focus:hover {
-  box-shadow: rgba(255,71,133,0.2) 0 8px 18px 0px;
-}
-
-.emotion-16 {
-  border: 0;
-  border-radius: 3em;
-  cursor: pointer;
-  display: inline-block;
-  overflow: hidden;
-  padding: 10px 16px;
-  position: relative;
-  text-align: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-  vertical-align: top;
-  white-space: nowrap;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  opacity: 1;
-  margin: 0;
-  background: transparent;
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 1;
-  padding: 9px;
-  box-shadow: rgba(51,51,51,0.2) 0 0 0 1px inset;
-  color: rgba(51,51,51,0.7);
-  background: transparent;
-}
-
-.emotion-16 svg {
-  display: inline-block;
-  height: 14px;
-  width: 14px;
-  vertical-align: top;
-  margin-right: 4px;
-  margin-top: -1px;
-  margin-bottom: -1px;
-  pointer-events: none;
-}
-
-.emotion-16 svg path {
-  fill: currentColor;
-}
-
-.emotion-16 svg {
-  display: block;
-  margin: 0;
-}
-
-.emotion-16:hover {
-  box-shadow: rgba(51,51,51,0.5) 0 0 0 1px inset;
-}
-
-.emotion-16:active {
-  box-shadow: rgba(51,51,51,0.5) 0 0 0 2px inset;
-  color: #333;
-}
-
-<div>
-  <p>
-    Button that is used for forms
-  </p>
-  <button
-    class="emotion-0"
-  >
-    Form.Button
-  </button>
-  <br />
-  <p>
-    Buttons that are used for everything else
-  </p>
-  <button
-    class="emotion-1"
-  >
-    Primary
-  </button>
-  <button
-    class="emotion-2"
-  >
-    Secondary
-  </button>
-  <button
-    class="emotion-5"
-  >
-    <svg
-      class="emotion-4"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-3"
-        d="M743.52 529.234c5.616-5.616 83.048-83.046 88.462-88.46 30.944-32.778 47.97-75.636 47.97-120.792 0-47.048-18.304-91.26-51.542-124.484-33.228-33.22-77.43-51.516-124.458-51.516-45.024 0-87.792 16.94-120.536 47.72l-104.458 104.456c-30.792 32.738-47.734 75.512-47.734 120.548 0 41.916 14.576 81.544 41.248 113.196 3.264 3.876 6.666 7.664 10.292 11.29 4.258 4.258 8.704 8.262 13.304 12.022 0.054 0.080 0.096 0.152 0.148 0.232 9.572 7.308 15.778 18.804 15.778 31.776 0 22.094-17.914 40-40.004 40-8.542 0-16.442-2.696-22.938-7.26-2.746-1.93-20.622-17.43-30.35-28.050-0.008-0.010-0.018-0.018-0.026-0.028-4.992-5.432-13.234-15.23-18.552-22.65s-16.556-25.872-17.036-26.736c-0.7-1.262-2.974-5.526-3.422-6.39-0.69-1.334-6.118-12.67-6.114-12.67-14.342-31.96-22.332-67.4-22.332-104.728 0-60.826 21.198-116.648 56.58-160.544 0.252-0.314 4.61-5.594 6.594-7.866 0.304-0.35 5.038-5.636 7.16-7.874 0.252-0.268 105.86-105.874 106.128-106.126 45.902-43.584 107.958-70.314 176.264-70.314 141.382 0 255.998 114.5 255.998 256 0 68.516-26.882 130.688-70.652 176.61-0.144 0.148-109.854 109.546-112.090 111.528-0.958 0.848-5.072 4.352-5.072 4.352-6.448 5.434-13.132 10.592-20.1 15.378 0.412-6.836 0.644-13.702 0.644-20.6 0-26.46-3.108-52.206-8.918-76.918l-0.236-1.102zM616.144 767.82c35.382-43.896 56.58-99.718 56.58-160.544 0-37.328-7.99-72.768-22.332-104.728 0.004 0 0.006-0.002 0.010-0.004-0.258-0.576-0.538-1.14-0.8-1.714-0.686-1.498-2.894-6.112-3.296-6.93-0.668-1.344-2.952-5.732-3.386-6.604-3.48-6.982-8.708-15.126-9.49-16.366-0.498-0.792-0.996-1.58-1.502-2.364-0.834-1.29-15.364-22.066-26.656-34.466-0.008-0.010-0.018-0.018-0.026-0.028-7.056-8.448-24.932-24.198-30.35-28.050-6.47-4.602-14.396-7.26-22.938-7.26-22.090 0-40.004 17.906-40.004 40 0 12.97 6.206 24.466 15.778 31.776 0.052 0.080 0.094 0.152 0.148 0.232 4.602 3.76 20.334 19.434 23.598 23.31 26.672 31.65 41.248 71.28 41.248 113.196 0 45.038-16.944 87.81-47.734 120.548l-104.458 104.456c-32.742 30.782-75.512 47.72-120.536 47.72-47.028 0-91.228-18.294-124.458-51.516-33.236-33.224-51.542-77.436-51.542-124.484 0-45.154 17.028-88.014 47.97-120.792 5.414-5.414 40.812-40.812 68.958-68.958 7.176-7.176 13.888-13.886 19.504-19.502v-0.002c-0.356-1.562-0.246-1.096-0.246-1.096-5.81-24.712-8.918-50.458-8.918-76.918 0-6.898 0.232-13.764 0.644-20.6-6.966 4.788-20.1 15.33-20.1 15.33-0.734 0.62-9.518 8.388-11.68 10.45-0.16 0.154-105.338 105.33-105.482 105.478-43.77 45.922-70.652 108.094-70.652 176.61 0 141.5 114.616 256 255.998 256 68.306 0 130.362-26.73 176.264-70.314 0.27-0.254 105.876-105.86 106.128-106.126 0.004-0.002 13.506-15.426 13.758-15.74z"
-      />
-    </svg>
-  </button>
-  <br />
-  <button
-    class="emotion-6"
-  >
-    Outline
-  </button>
-  <button
-    class="emotion-7"
-  >
-    Outline primary
-  </button>
-  <button
-    class="emotion-8"
-  >
-    Outline secondary
-  </button>
-  <button
-    class="emotion-9"
-    disabled=""
-  >
-    Disabled
-  </button>
-  <br />
-  <button
-    class="emotion-10"
-  >
-    Primary
-  </button>
-  <button
-    class="emotion-11"
-  >
-    Secondary
-  </button>
-  <button
-    class="emotion-12"
-  >
-    Outline
-  </button>
-  <button
-    class="emotion-13"
-    disabled=""
-  >
-    Disabled
-  </button>
-  <button
-    class="emotion-16"
-  >
-    <svg
-      class="emotion-4"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-3"
-        d="M743.52 529.234c5.616-5.616 83.048-83.046 88.462-88.46 30.944-32.778 47.97-75.636 47.97-120.792 0-47.048-18.304-91.26-51.542-124.484-33.228-33.22-77.43-51.516-124.458-51.516-45.024 0-87.792 16.94-120.536 47.72l-104.458 104.456c-30.792 32.738-47.734 75.512-47.734 120.548 0 41.916 14.576 81.544 41.248 113.196 3.264 3.876 6.666 7.664 10.292 11.29 4.258 4.258 8.704 8.262 13.304 12.022 0.054 0.080 0.096 0.152 0.148 0.232 9.572 7.308 15.778 18.804 15.778 31.776 0 22.094-17.914 40-40.004 40-8.542 0-16.442-2.696-22.938-7.26-2.746-1.93-20.622-17.43-30.35-28.050-0.008-0.010-0.018-0.018-0.026-0.028-4.992-5.432-13.234-15.23-18.552-22.65s-16.556-25.872-17.036-26.736c-0.7-1.262-2.974-5.526-3.422-6.39-0.69-1.334-6.118-12.67-6.114-12.67-14.342-31.96-22.332-67.4-22.332-104.728 0-60.826 21.198-116.648 56.58-160.544 0.252-0.314 4.61-5.594 6.594-7.866 0.304-0.35 5.038-5.636 7.16-7.874 0.252-0.268 105.86-105.874 106.128-106.126 45.902-43.584 107.958-70.314 176.264-70.314 141.382 0 255.998 114.5 255.998 256 0 68.516-26.882 130.688-70.652 176.61-0.144 0.148-109.854 109.546-112.090 111.528-0.958 0.848-5.072 4.352-5.072 4.352-6.448 5.434-13.132 10.592-20.1 15.378 0.412-6.836 0.644-13.702 0.644-20.6 0-26.46-3.108-52.206-8.918-76.918l-0.236-1.102zM616.144 767.82c35.382-43.896 56.58-99.718 56.58-160.544 0-37.328-7.99-72.768-22.332-104.728 0.004 0 0.006-0.002 0.010-0.004-0.258-0.576-0.538-1.14-0.8-1.714-0.686-1.498-2.894-6.112-3.296-6.93-0.668-1.344-2.952-5.732-3.386-6.604-3.48-6.982-8.708-15.126-9.49-16.366-0.498-0.792-0.996-1.58-1.502-2.364-0.834-1.29-15.364-22.066-26.656-34.466-0.008-0.010-0.018-0.018-0.026-0.028-7.056-8.448-24.932-24.198-30.35-28.050-6.47-4.602-14.396-7.26-22.938-7.26-22.090 0-40.004 17.906-40.004 40 0 12.97 6.206 24.466 15.778 31.776 0.052 0.080 0.094 0.152 0.148 0.232 4.602 3.76 20.334 19.434 23.598 23.31 26.672 31.65 41.248 71.28 41.248 113.196 0 45.038-16.944 87.81-47.734 120.548l-104.458 104.456c-32.742 30.782-75.512 47.72-120.536 47.72-47.028 0-91.228-18.294-124.458-51.516-33.236-33.224-51.542-77.436-51.542-124.484 0-45.154 17.028-88.014 47.97-120.792 5.414-5.414 40.812-40.812 68.958-68.958 7.176-7.176 13.888-13.886 19.504-19.502v-0.002c-0.356-1.562-0.246-1.096-0.246-1.096-5.81-24.712-8.918-50.458-8.918-76.918 0-6.898 0.232-13.764 0.644-20.6-6.966 4.788-20.1 15.33-20.1 15.33-0.734 0.62-9.518 8.388-11.68 10.45-0.16 0.154-105.338 105.33-105.482 105.478-43.77 45.922-70.652 108.094-70.652 176.61 0 141.5 114.616 256 255.998 256 68.306 0 130.362-26.73 176.264-70.314 0.27-0.254 105.876-105.86 106.128-106.126 0.004-0.002 13.506-15.426 13.758-15.74z"
-      />
-    </svg>
-  </button>
-  <button
-    class="emotion-12"
-  >
-    <svg
-      class="emotion-4"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-3"
-        d="M743.52 529.234c5.616-5.616 83.048-83.046 88.462-88.46 30.944-32.778 47.97-75.636 47.97-120.792 0-47.048-18.304-91.26-51.542-124.484-33.228-33.22-77.43-51.516-124.458-51.516-45.024 0-87.792 16.94-120.536 47.72l-104.458 104.456c-30.792 32.738-47.734 75.512-47.734 120.548 0 41.916 14.576 81.544 41.248 113.196 3.264 3.876 6.666 7.664 10.292 11.29 4.258 4.258 8.704 8.262 13.304 12.022 0.054 0.080 0.096 0.152 0.148 0.232 9.572 7.308 15.778 18.804 15.778 31.776 0 22.094-17.914 40-40.004 40-8.542 0-16.442-2.696-22.938-7.26-2.746-1.93-20.622-17.43-30.35-28.050-0.008-0.010-0.018-0.018-0.026-0.028-4.992-5.432-13.234-15.23-18.552-22.65s-16.556-25.872-17.036-26.736c-0.7-1.262-2.974-5.526-3.422-6.39-0.69-1.334-6.118-12.67-6.114-12.67-14.342-31.96-22.332-67.4-22.332-104.728 0-60.826 21.198-116.648 56.58-160.544 0.252-0.314 4.61-5.594 6.594-7.866 0.304-0.35 5.038-5.636 7.16-7.874 0.252-0.268 105.86-105.874 106.128-106.126 45.902-43.584 107.958-70.314 176.264-70.314 141.382 0 255.998 114.5 255.998 256 0 68.516-26.882 130.688-70.652 176.61-0.144 0.148-109.854 109.546-112.090 111.528-0.958 0.848-5.072 4.352-5.072 4.352-6.448 5.434-13.132 10.592-20.1 15.378 0.412-6.836 0.644-13.702 0.644-20.6 0-26.46-3.108-52.206-8.918-76.918l-0.236-1.102zM616.144 767.82c35.382-43.896 56.58-99.718 56.58-160.544 0-37.328-7.99-72.768-22.332-104.728 0.004 0 0.006-0.002 0.010-0.004-0.258-0.576-0.538-1.14-0.8-1.714-0.686-1.498-2.894-6.112-3.296-6.93-0.668-1.344-2.952-5.732-3.386-6.604-3.48-6.982-8.708-15.126-9.49-16.366-0.498-0.792-0.996-1.58-1.502-2.364-0.834-1.29-15.364-22.066-26.656-34.466-0.008-0.010-0.018-0.018-0.026-0.028-7.056-8.448-24.932-24.198-30.35-28.050-6.47-4.602-14.396-7.26-22.938-7.26-22.090 0-40.004 17.906-40.004 40 0 12.97 6.206 24.466 15.778 31.776 0.052 0.080 0.094 0.152 0.148 0.232 4.602 3.76 20.334 19.434 23.598 23.31 26.672 31.65 41.248 71.28 41.248 113.196 0 45.038-16.944 87.81-47.734 120.548l-104.458 104.456c-32.742 30.782-75.512 47.72-120.536 47.72-47.028 0-91.228-18.294-124.458-51.516-33.236-33.224-51.542-77.436-51.542-124.484 0-45.154 17.028-88.014 47.97-120.792 5.414-5.414 40.812-40.812 68.958-68.958 7.176-7.176 13.888-13.886 19.504-19.502v-0.002c-0.356-1.562-0.246-1.096-0.246-1.096-5.81-24.712-8.918-50.458-8.918-76.918 0-6.898 0.232-13.764 0.644-20.6-6.966 4.788-20.1 15.33-20.1 15.33-0.734 0.62-9.518 8.388-11.68 10.45-0.16 0.154-105.338 105.33-105.482 105.478-43.77 45.922-70.652 108.094-70.652 176.61 0 141.5 114.616 256 255.998 256 68.306 0 130.362-26.73 176.264-70.314 0.27-0.254 105.876-105.86 106.128-106.126 0.004-0.002 13.506-15.426 13.758-15.74z"
-      />
-    </svg>
-    Link
-  </button>
-</div>
-`;
diff --git a/lib/components/src/blocks/DocsPage.stories.tsx b/lib/components/src/blocks/DocsPage.stories.tsx
index 3f500ef1c7db..cee5abd6e7f0 100644
--- a/lib/components/src/blocks/DocsPage.stories.tsx
+++ b/lib/components/src/blocks/DocsPage.stories.tsx
@@ -33,7 +33,7 @@ export const noText = () => (
     {sourceStories.jsx()}
   </DocsPage>
 );
-noText.title = 'no text';
+noText.story = { name: 'no text' };
 
 export const text = () => (
   <DocsPage title="Sensorium">
@@ -55,6 +55,7 @@ export const withSubtitle = () => (
     {sourceStories.jsx()}
   </DocsPage>
 );
+withSubtitle.story = { name: 'with subtitle' };
 
 export const markdown = () => (
   <DocsPage title="markdown">
diff --git a/lib/components/src/blocks/Source.stories.tsx b/lib/components/src/blocks/Source.stories.tsx
index 1ab27291e2ff..fb016eeb8110 100644
--- a/lib/components/src/blocks/Source.stories.tsx
+++ b/lib/components/src/blocks/Source.stories.tsx
@@ -9,10 +9,10 @@ export default {
 };
 
 export const noStory = () => <Source error={SourceError.NO_STORY} />;
-noStory.title = 'no story';
+noStory.story = { name: 'no story' };
 
 export const sourceUnavailable = () => <Source error={SourceError.SOURCE_UNAVAILABLE} />;
-sourceUnavailable.title = 'source unavailable';
+sourceUnavailable.story = { name: 'source unavailable' };
 
 const jsxCode = `
 <MyComponent boolProp scalarProp={1} complexProp={{ foo: 1, bar: '2' }}>
diff --git a/lib/components/src/brand/__snapshots__/StorybookIcon.stories.storyshot b/lib/components/src/brand/__snapshots__/StorybookIcon.stories.storyshot
deleted file mode 100644
index f0fc7565bd2b..000000000000
--- a/lib/components/src/brand/__snapshots__/StorybookIcon.stories.storyshot
+++ /dev/null
@@ -1,36 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Basics|Brand/StorybookIcon default 1`] = `
-<svg
-  viewBox="0 0 64 64"
->
-  <title>
-    Storybook icon
-  </title>
-  <g
-    fill="none"
-    fill-rule="evenodd"
-    id="Artboard"
-    stroke="none"
-    stroke-width="1"
-  >
-    <path
-      d="M8.04798541,58.7875918 L6.07908839,6.32540407 C6.01406344,4.5927838 7.34257463,3.12440831 9.07303814,3.01625434 L53.6958037,0.227331489 C55.457209,0.117243658 56.974354,1.45590096 57.0844418,3.21730626 C57.0885895,3.28366922 57.0906648,3.35014546 57.0906648,3.41663791 L57.0906648,60.5834697 C57.0906648,62.3483119 55.6599776,63.7789992 53.8951354,63.7789992 C53.847325,63.7789992 53.7995207,63.7779262 53.7517585,63.775781 L11.0978899,61.8600599 C9.43669044,61.7854501 8.11034889,60.4492961 8.04798541,58.7875918 Z"
-      fill="#FF4785"
-      fill-rule="nonzero"
-      id="path-1"
-    />
-    <path
-      d="M35.9095005,24.1768792 C35.9095005,25.420127 44.2838488,24.8242707 45.4080313,23.9509748 C45.4080313,15.4847538 40.8652557,11.0358878 32.5466666,11.0358878 C24.2280775,11.0358878 19.5673077,15.553972 19.5673077,22.3311017 C19.5673077,34.1346028 35.4965208,34.3605071 35.4965208,40.7987804 C35.4965208,42.606015 34.6115646,43.6790606 32.6646607,43.6790606 C30.127786,43.6790606 29.1248356,42.3834613 29.2428298,37.9783269 C29.2428298,37.0226907 19.5673077,36.7247626 19.2723223,37.9783269 C18.5211693,48.6535354 25.1720308,51.7326752 32.7826549,51.7326752 C40.1572906,51.7326752 45.939005,47.8018145 45.939005,40.6858282 C45.939005,28.035186 29.7738035,28.3740425 29.7738035,22.1051974 C29.7738035,19.5637737 31.6617103,19.2249173 32.7826549,19.2249173 C33.9625966,19.2249173 36.0864917,19.4328883 35.9095005,24.1768792 Z"
-      fill="#FFFFFF"
-      fill-rule="nonzero"
-      id="path9_fill-path"
-    />
-    <path
-      d="M44.0461638,0.830433986 L50.1874092,0.446606143 L50.443532,7.7810017 C50.4527198,8.04410717 50.2468789,8.26484453 49.9837734,8.27403237 C49.871115,8.27796649 49.7607078,8.24184808 49.6721567,8.17209069 L47.3089847,6.3104681 L44.5110468,8.43287463 C44.3012992,8.591981 44.0022839,8.55092814 43.8431776,8.34118051 C43.7762017,8.25288717 43.742082,8.14401677 43.7466857,8.03329059 L44.0461638,0.830433986 Z"
-      fill="#FFFFFF"
-      id="Path"
-    />
-  </g>
-</svg>
-`;
diff --git a/lib/components/src/form/__snapshots__/form.stories.storyshot b/lib/components/src/form/__snapshots__/form.stories.storyshot
deleted file mode 100644
index 136f4c46b3de..000000000000
--- a/lib/components/src/form/__snapshots__/form.stories.storyshot
+++ /dev/null
@@ -1,2756 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Basics|Form/Button sizes 1`] = `
-.emotion-6 > * {
-  margin-top: 10px;
-}
-
-.emotion-6 > *:first-of-type {
-  margin-top: 0;
-}
-
-.emotion-0 {
-  border: 0;
-  border-radius: 3em;
-  cursor: pointer;
-  display: inline-block;
-  overflow: hidden;
-  padding: 10px 16px;
-  position: relative;
-  text-align: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-  vertical-align: top;
-  white-space: nowrap;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  opacity: 1;
-  margin: 0;
-  background: transparent;
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 1;
-  background: #fafafa;
-  color: #333333;
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
-  display: inline;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  overflow: visible;
-  z-index: 2;
-}
-
-.emotion-0 svg {
-  display: inline-block;
-  height: 14px;
-  width: 14px;
-  vertical-align: top;
-  margin-right: 4px;
-  margin-top: -1px;
-  margin-bottom: -1px;
-  pointer-events: none;
-}
-
-.emotion-0 svg path {
-  fill: currentColor;
-}
-
-.emotion-0:hover {
-  background: #f2f2f2;
-}
-
-.emotion-0:active {
-  background: #FFFFFF;
-}
-
-.emotion-0:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
-}
-
-.emotion-0:hover {
-  -webkit-transform: none;
-  -ms-transform: none;
-  transform: none;
-}
-
-.emotion-1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.emotion-2 {
-  border: 0;
-  border-radius: 3em;
-  cursor: pointer;
-  display: inline-block;
-  overflow: hidden;
-  padding: 10px 16px;
-  position: relative;
-  text-align: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-  vertical-align: top;
-  white-space: nowrap;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  opacity: 1;
-  margin: 0;
-  background: transparent;
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 1;
-  background: #fafafa;
-  color: #333333;
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  overflow: visible;
-  z-index: 2;
-}
-
-.emotion-2 svg {
-  display: inline-block;
-  height: 14px;
-  width: 14px;
-  vertical-align: top;
-  margin-right: 4px;
-  margin-top: -1px;
-  margin-bottom: -1px;
-  pointer-events: none;
-}
-
-.emotion-2 svg path {
-  fill: currentColor;
-}
-
-.emotion-2:hover {
-  background: #f2f2f2;
-}
-
-.emotion-2:active {
-  background: #FFFFFF;
-}
-
-.emotion-2:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
-}
-
-.emotion-2:hover {
-  -webkit-transform: none;
-  -ms-transform: none;
-  transform: none;
-}
-
-.emotion-4 {
-  border: 0;
-  border-radius: 3em;
-  cursor: pointer;
-  display: inline-block;
-  overflow: hidden;
-  padding: 10px 16px;
-  position: relative;
-  text-align: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-  vertical-align: top;
-  white-space: nowrap;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  opacity: 1;
-  margin: 0;
-  background: transparent;
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 1;
-  background: #fafafa;
-  color: #333333;
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
-  width: 100%;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  overflow: visible;
-  z-index: 2;
-}
-
-.emotion-4 svg {
-  display: inline-block;
-  height: 14px;
-  width: 14px;
-  vertical-align: top;
-  margin-right: 4px;
-  margin-top: -1px;
-  margin-bottom: -1px;
-  pointer-events: none;
-}
-
-.emotion-4 svg path {
-  fill: currentColor;
-}
-
-.emotion-4:hover {
-  background: #f2f2f2;
-}
-
-.emotion-4:active {
-  background: #FFFFFF;
-}
-
-.emotion-4:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
-}
-
-.emotion-4:hover {
-  -webkit-transform: none;
-  -ms-transform: none;
-  transform: none;
-}
-
-<div
-  class="emotion-6"
->
-  <div
-    class="emotion-1"
-  >
-    <button
-      class="emotion-0"
-    >
-      click this button
-    </button>
-  </div>
-  <div
-    class="emotion-1"
-  >
-    <button
-      class="emotion-2"
-    >
-      click this button
-    </button>
-  </div>
-  <div
-    class="emotion-1"
-  >
-    <button
-      class="emotion-4"
-    >
-      click this button
-    </button>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Basics|Form/Button validations 1`] = `
-.emotion-8 > * {
-  margin-top: 10px;
-}
-
-.emotion-8 > *:first-of-type {
-  margin-top: 0;
-}
-
-.emotion-1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.emotion-6 {
-  border: 0;
-  border-radius: 3em;
-  cursor: pointer;
-  display: inline-block;
-  overflow: hidden;
-  padding: 10px 16px;
-  position: relative;
-  text-align: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-  vertical-align: top;
-  white-space: nowrap;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  opacity: 1;
-  margin: 0;
-  background: transparent;
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 1;
-  background: #fafafa;
-  color: #333333;
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
-  width: 100%;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  overflow: visible;
-  z-index: 2;
-}
-
-.emotion-6 svg {
-  display: inline-block;
-  height: 14px;
-  width: 14px;
-  vertical-align: top;
-  margin-right: 4px;
-  margin-top: -1px;
-  margin-bottom: -1px;
-  pointer-events: none;
-}
-
-.emotion-6 svg path {
-  fill: currentColor;
-}
-
-.emotion-6:hover {
-  background: #f2f2f2;
-}
-
-.emotion-6:active {
-  background: #FFFFFF;
-}
-
-.emotion-6:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
-}
-
-.emotion-6:hover {
-  -webkit-transform: none;
-  -ms-transform: none;
-  transform: none;
-}
-
-.emotion-0 {
-  border: 0;
-  border-radius: 3em;
-  cursor: pointer;
-  display: inline-block;
-  overflow: hidden;
-  padding: 10px 16px;
-  position: relative;
-  text-align: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-  vertical-align: top;
-  white-space: nowrap;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  opacity: 1;
-  margin: 0;
-  background: transparent;
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 1;
-  background: #fafafa;
-  color: #333333;
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
-  width: 100%;
-  box-shadow: #FF4400 0 0 0 1px inset !important;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  overflow: visible;
-  z-index: 2;
-}
-
-.emotion-0 svg {
-  display: inline-block;
-  height: 14px;
-  width: 14px;
-  vertical-align: top;
-  margin-right: 4px;
-  margin-top: -1px;
-  margin-bottom: -1px;
-  pointer-events: none;
-}
-
-.emotion-0 svg path {
-  fill: currentColor;
-}
-
-.emotion-0:hover {
-  background: #f2f2f2;
-}
-
-.emotion-0:active {
-  background: #FFFFFF;
-}
-
-.emotion-0:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
-}
-
-.emotion-0:hover {
-  -webkit-transform: none;
-  -ms-transform: none;
-  transform: none;
-}
-
-.emotion-2 {
-  border: 0;
-  border-radius: 3em;
-  cursor: pointer;
-  display: inline-block;
-  overflow: hidden;
-  padding: 10px 16px;
-  position: relative;
-  text-align: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-  vertical-align: top;
-  white-space: nowrap;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  opacity: 1;
-  margin: 0;
-  background: transparent;
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 1;
-  background: #fafafa;
-  color: #333333;
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
-  width: 100%;
-  box-shadow: #E69D00 0 0 0 1px inset;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  overflow: visible;
-  z-index: 2;
-}
-
-.emotion-2 svg {
-  display: inline-block;
-  height: 14px;
-  width: 14px;
-  vertical-align: top;
-  margin-right: 4px;
-  margin-top: -1px;
-  margin-bottom: -1px;
-  pointer-events: none;
-}
-
-.emotion-2 svg path {
-  fill: currentColor;
-}
-
-.emotion-2:hover {
-  background: #f2f2f2;
-}
-
-.emotion-2:active {
-  background: #FFFFFF;
-}
-
-.emotion-2:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
-}
-
-.emotion-2:hover {
-  -webkit-transform: none;
-  -ms-transform: none;
-  transform: none;
-}
-
-.emotion-4 {
-  border: 0;
-  border-radius: 3em;
-  cursor: pointer;
-  display: inline-block;
-  overflow: hidden;
-  padding: 10px 16px;
-  position: relative;
-  text-align: center;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-  vertical-align: top;
-  white-space: nowrap;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  opacity: 1;
-  margin: 0;
-  background: transparent;
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 1;
-  background: #fafafa;
-  color: #333333;
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
-  width: 100%;
-  box-shadow: #66BF3C 0 0 0 1px inset !important;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  overflow: visible;
-  z-index: 2;
-}
-
-.emotion-4 svg {
-  display: inline-block;
-  height: 14px;
-  width: 14px;
-  vertical-align: top;
-  margin-right: 4px;
-  margin-top: -1px;
-  margin-bottom: -1px;
-  pointer-events: none;
-}
-
-.emotion-4 svg path {
-  fill: currentColor;
-}
-
-.emotion-4:hover {
-  background: #f2f2f2;
-}
-
-.emotion-4:active {
-  background: #FFFFFF;
-}
-
-.emotion-4:focus {
-  box-shadow: rgba(30,167,253,0.4) 0 0 0 1px inset;
-}
-
-.emotion-4:hover {
-  -webkit-transform: none;
-  -ms-transform: none;
-  transform: none;
-}
-
-<div
-  class="emotion-8"
->
-  <div
-    class="emotion-1"
-  >
-    <button
-      class="emotion-0"
-    >
-      click this button
-    </button>
-  </div>
-  <div
-    class="emotion-1"
-  >
-    <button
-      class="emotion-2"
-    >
-      click this button
-    </button>
-  </div>
-  <div
-    class="emotion-1"
-  >
-    <button
-      class="emotion-4"
-    >
-      click this button
-    </button>
-  </div>
-  <div
-    class="emotion-1"
-  >
-    <button
-      class="emotion-6"
-    >
-      click this button
-    </button>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Basics|Form/Field field 1`] = `
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  border-bottom: 1px solid rgba(0,0,0,.1);
-  margin: 0 15px;
-  padding: 8px 0;
-}
-
-.emotion-2:last-child {
-  margin-bottom: 3rem;
-}
-
-.emotion-0 {
-  min-width: 100px;
-  font-weight: 700;
-  margin-right: 15px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  line-height: 16px;
-}
-
-.emotion-1 {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  border: 0;
-  box-sizing: inherit;
-  display: block;
-  margin: 0;
-  background: #FFFFFF;
-  padding: .42em 1em;
-  font-size: 13px;
-  position: relative;
-  -webkit-transition: all 200ms ease-out;
-  transition: all 200ms ease-out;
-  color: #333333;
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
-  line-height: 20px;
-  display: inline;
-  height: 32px;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  padding-right: 20px;
-  -webkit-appearance: menulist;
-  -moz-appearance: menulist;
-  appearance: menulist;
-}
-
-.emotion-1:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-1[disabled] {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.emotion-1:-webkit-autofill {
-  -webkit-box-shadow: 0 0 0 3em #FFFFFF inset;
-}
-
-.emotion-1::-webkit-input-placeholder {
-  color: #999999;
-}
-
-.emotion-1::-moz-placeholder {
-  color: #999999;
-}
-
-.emotion-1:-ms-input-placeholder {
-  color: #999999;
-}
-
-.emotion-1::placeholder {
-  color: #999999;
-}
-
-<label
-  class="emotion-2"
->
-  <span
-    class="emotion-0"
-  >
-    <span>
-      label
-    </span>
-  </span>
-  <select
-    class="emotion-1"
-    size="1"
-  >
-    <option
-      value="val1"
-    >
-      Value 1
-    </option>
-    <option
-      selected=""
-      value="val2"
-    >
-      Value 2
-    </option>
-    <option
-      value="val3"
-    >
-      Value 3
-    </option>
-  </select>
-</label>
-`;
-
-exports[`Storyshots Basics|Form/Input alignment 1`] = `
-.emotion-6 > * {
-  margin-top: 10px;
-}
-
-.emotion-6 > *:first-of-type {
-  margin-top: 0;
-}
-
-.emotion-1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.emotion-4 {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  border: 0;
-  box-sizing: inherit;
-  display: block;
-  margin: 0;
-  background: #FFFFFF;
-  padding: .42em 1em;
-  font-size: 13px;
-  position: relative;
-  -webkit-transition: all 200ms ease-out;
-  transition: all 200ms ease-out;
-  color: #333333;
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
-  line-height: 20px;
-  width: 100%;
-  text-align: left;
-  min-height: 32px;
-}
-
-.emotion-4:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-4[disabled] {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.emotion-4:-webkit-autofill {
-  -webkit-box-shadow: 0 0 0 3em #FFFFFF inset;
-}
-
-.emotion-4::-webkit-input-placeholder {
-  color: #999999;
-}
-
-.emotion-4::-moz-placeholder {
-  color: #999999;
-}
-
-.emotion-4:-ms-input-placeholder {
-  color: #999999;
-}
-
-.emotion-4::placeholder {
-  color: #999999;
-}
-
-.emotion-0 {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  border: 0;
-  box-sizing: inherit;
-  display: block;
-  margin: 0;
-  background: #FFFFFF;
-  padding: .42em 1em;
-  font-size: 13px;
-  position: relative;
-  -webkit-transition: all 200ms ease-out;
-  transition: all 200ms ease-out;
-  color: #333333;
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
-  line-height: 20px;
-  width: 100%;
-  text-align: right;
-  min-height: 32px;
-}
-
-.emotion-0:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-0[disabled] {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.emotion-0:-webkit-autofill {
-  -webkit-box-shadow: 0 0 0 3em #FFFFFF inset;
-}
-
-.emotion-0::-webkit-input-placeholder {
-  color: #999999;
-}
-
-.emotion-0::-moz-placeholder {
-  color: #999999;
-}
-
-.emotion-0:-ms-input-placeholder {
-  color: #999999;
-}
-
-.emotion-0::placeholder {
-  color: #999999;
-}
-
-.emotion-2 {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  border: 0;
-  box-sizing: inherit;
-  display: block;
-  margin: 0;
-  background: #FFFFFF;
-  padding: .42em 1em;
-  font-size: 13px;
-  position: relative;
-  -webkit-transition: all 200ms ease-out;
-  transition: all 200ms ease-out;
-  color: #333333;
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
-  line-height: 20px;
-  width: 100%;
-  text-align: center;
-  min-height: 32px;
-}
-
-.emotion-2:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-2[disabled] {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.emotion-2:-webkit-autofill {
-  -webkit-box-shadow: 0 0 0 3em #FFFFFF inset;
-}
-
-.emotion-2::-webkit-input-placeholder {
-  color: #999999;
-}
-
-.emotion-2::-moz-placeholder {
-  color: #999999;
-}
-
-.emotion-2:-ms-input-placeholder {
-  color: #999999;
-}
-
-.emotion-2::placeholder {
-  color: #999999;
-}
-
-<div
-  class="emotion-6"
->
-  <div
-    class="emotion-1"
-  >
-    <input
-      class="emotion-0"
-      value="text"
-    />
-  </div>
-  <div
-    class="emotion-1"
-  >
-    <input
-      class="emotion-2"
-      value="text"
-    />
-  </div>
-  <div
-    class="emotion-1"
-  >
-    <input
-      class="emotion-4"
-      value="text"
-    />
-  </div>
-</div>
-`;
-
-exports[`Storyshots Basics|Form/Input sizes 1`] = `
-.emotion-6 > * {
-  margin-top: 10px;
-}
-
-.emotion-6 > *:first-of-type {
-  margin-top: 0;
-}
-
-.emotion-1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.emotion-0 {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  border: 0;
-  box-sizing: inherit;
-  display: block;
-  margin: 0;
-  background: #FFFFFF;
-  padding: .42em 1em;
-  font-size: 13px;
-  position: relative;
-  -webkit-transition: all 200ms ease-out;
-  transition: all 200ms ease-out;
-  color: #333333;
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
-  line-height: 20px;
-  display: inline;
-  text-align: left;
-  min-height: 32px;
-}
-
-.emotion-0:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-0[disabled] {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.emotion-0:-webkit-autofill {
-  -webkit-box-shadow: 0 0 0 3em #FFFFFF inset;
-}
-
-.emotion-0::-webkit-input-placeholder {
-  color: #999999;
-}
-
-.emotion-0::-moz-placeholder {
-  color: #999999;
-}
-
-.emotion-0:-ms-input-placeholder {
-  color: #999999;
-}
-
-.emotion-0::placeholder {
-  color: #999999;
-}
-
-.emotion-2 {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  border: 0;
-  box-sizing: inherit;
-  display: block;
-  margin: 0;
-  background: #FFFFFF;
-  padding: .42em 1em;
-  font-size: 13px;
-  position: relative;
-  -webkit-transition: all 200ms ease-out;
-  transition: all 200ms ease-out;
-  color: #333333;
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
-  line-height: 20px;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  text-align: left;
-  min-height: 32px;
-}
-
-.emotion-2:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-2[disabled] {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.emotion-2:-webkit-autofill {
-  -webkit-box-shadow: 0 0 0 3em #FFFFFF inset;
-}
-
-.emotion-2::-webkit-input-placeholder {
-  color: #999999;
-}
-
-.emotion-2::-moz-placeholder {
-  color: #999999;
-}
-
-.emotion-2:-ms-input-placeholder {
-  color: #999999;
-}
-
-.emotion-2::placeholder {
-  color: #999999;
-}
-
-.emotion-4 {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  border: 0;
-  box-sizing: inherit;
-  display: block;
-  margin: 0;
-  background: #FFFFFF;
-  padding: .42em 1em;
-  font-size: 13px;
-  position: relative;
-  -webkit-transition: all 200ms ease-out;
-  transition: all 200ms ease-out;
-  color: #333333;
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
-  line-height: 20px;
-  width: 100%;
-  text-align: left;
-  min-height: 32px;
-}
-
-.emotion-4:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-4[disabled] {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.emotion-4:-webkit-autofill {
-  -webkit-box-shadow: 0 0 0 3em #FFFFFF inset;
-}
-
-.emotion-4::-webkit-input-placeholder {
-  color: #999999;
-}
-
-.emotion-4::-moz-placeholder {
-  color: #999999;
-}
-
-.emotion-4:-ms-input-placeholder {
-  color: #999999;
-}
-
-.emotion-4::placeholder {
-  color: #999999;
-}
-
-<div
-  class="emotion-6"
->
-  <div
-    class="emotion-1"
-  >
-    <input
-      class="emotion-0"
-      value="text"
-    />
-  </div>
-  <div
-    class="emotion-1"
-  >
-    <input
-      class="emotion-2"
-      value="text"
-    />
-  </div>
-  <div
-    class="emotion-1"
-  >
-    <input
-      class="emotion-4"
-      value="text"
-    />
-  </div>
-</div>
-`;
-
-exports[`Storyshots Basics|Form/Input validations 1`] = `
-.emotion-8 > * {
-  margin-top: 10px;
-}
-
-.emotion-8 > *:first-of-type {
-  margin-top: 0;
-}
-
-.emotion-1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.emotion-6 {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  border: 0;
-  box-sizing: inherit;
-  display: block;
-  margin: 0;
-  background: #FFFFFF;
-  padding: .42em 1em;
-  font-size: 13px;
-  position: relative;
-  -webkit-transition: all 200ms ease-out;
-  transition: all 200ms ease-out;
-  color: #333333;
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
-  line-height: 20px;
-  width: 100%;
-  text-align: left;
-  min-height: 32px;
-}
-
-.emotion-6:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-6[disabled] {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.emotion-6:-webkit-autofill {
-  -webkit-box-shadow: 0 0 0 3em #FFFFFF inset;
-}
-
-.emotion-6::-webkit-input-placeholder {
-  color: #999999;
-}
-
-.emotion-6::-moz-placeholder {
-  color: #999999;
-}
-
-.emotion-6:-ms-input-placeholder {
-  color: #999999;
-}
-
-.emotion-6::placeholder {
-  color: #999999;
-}
-
-.emotion-0 {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  border: 0;
-  box-sizing: inherit;
-  display: block;
-  margin: 0;
-  background: #FFFFFF;
-  padding: .42em 1em;
-  font-size: 13px;
-  position: relative;
-  -webkit-transition: all 200ms ease-out;
-  transition: all 200ms ease-out;
-  color: #333333;
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
-  line-height: 20px;
-  width: 100%;
-  text-align: left;
-  box-shadow: #FF4400 0 0 0 1px inset !important;
-  min-height: 32px;
-}
-
-.emotion-0:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-0[disabled] {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.emotion-0:-webkit-autofill {
-  -webkit-box-shadow: 0 0 0 3em #FFFFFF inset;
-}
-
-.emotion-0::-webkit-input-placeholder {
-  color: #999999;
-}
-
-.emotion-0::-moz-placeholder {
-  color: #999999;
-}
-
-.emotion-0:-ms-input-placeholder {
-  color: #999999;
-}
-
-.emotion-0::placeholder {
-  color: #999999;
-}
-
-.emotion-2 {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  border: 0;
-  box-sizing: inherit;
-  display: block;
-  margin: 0;
-  background: #FFFFFF;
-  padding: .42em 1em;
-  font-size: 13px;
-  position: relative;
-  -webkit-transition: all 200ms ease-out;
-  transition: all 200ms ease-out;
-  color: #333333;
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
-  line-height: 20px;
-  width: 100%;
-  text-align: left;
-  box-shadow: #E69D00 0 0 0 1px inset;
-  min-height: 32px;
-}
-
-.emotion-2:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-2[disabled] {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.emotion-2:-webkit-autofill {
-  -webkit-box-shadow: 0 0 0 3em #FFFFFF inset;
-}
-
-.emotion-2::-webkit-input-placeholder {
-  color: #999999;
-}
-
-.emotion-2::-moz-placeholder {
-  color: #999999;
-}
-
-.emotion-2:-ms-input-placeholder {
-  color: #999999;
-}
-
-.emotion-2::placeholder {
-  color: #999999;
-}
-
-.emotion-4 {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  border: 0;
-  box-sizing: inherit;
-  display: block;
-  margin: 0;
-  background: #FFFFFF;
-  padding: .42em 1em;
-  font-size: 13px;
-  position: relative;
-  -webkit-transition: all 200ms ease-out;
-  transition: all 200ms ease-out;
-  color: #333333;
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
-  line-height: 20px;
-  width: 100%;
-  text-align: left;
-  box-shadow: #66BF3C 0 0 0 1px inset !important;
-  min-height: 32px;
-}
-
-.emotion-4:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-4[disabled] {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.emotion-4:-webkit-autofill {
-  -webkit-box-shadow: 0 0 0 3em #FFFFFF inset;
-}
-
-.emotion-4::-webkit-input-placeholder {
-  color: #999999;
-}
-
-.emotion-4::-moz-placeholder {
-  color: #999999;
-}
-
-.emotion-4:-ms-input-placeholder {
-  color: #999999;
-}
-
-.emotion-4::placeholder {
-  color: #999999;
-}
-
-<div
-  class="emotion-8"
->
-  <div
-    class="emotion-1"
-  >
-    <input
-      class="emotion-0"
-      value="text"
-    />
-  </div>
-  <div
-    class="emotion-1"
-  >
-    <input
-      class="emotion-2"
-      value="text"
-    />
-  </div>
-  <div
-    class="emotion-1"
-  >
-    <input
-      class="emotion-4"
-      value="text"
-    />
-  </div>
-  <div
-    class="emotion-1"
-  >
-    <input
-      class="emotion-6"
-      value="text"
-    />
-  </div>
-</div>
-`;
-
-exports[`Storyshots Basics|Form/Select sizes 1`] = `
-.emotion-6 > * {
-  margin-top: 10px;
-}
-
-.emotion-6 > *:first-of-type {
-  margin-top: 0;
-}
-
-.emotion-0 {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  border: 0;
-  box-sizing: inherit;
-  display: block;
-  margin: 0;
-  background: #FFFFFF;
-  padding: .42em 1em;
-  font-size: 13px;
-  position: relative;
-  -webkit-transition: all 200ms ease-out;
-  transition: all 200ms ease-out;
-  color: #333333;
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
-  line-height: 20px;
-  display: inline;
-  height: 32px;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  padding-right: 20px;
-  -webkit-appearance: menulist;
-  -moz-appearance: menulist;
-  appearance: menulist;
-}
-
-.emotion-0:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-0[disabled] {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.emotion-0:-webkit-autofill {
-  -webkit-box-shadow: 0 0 0 3em #FFFFFF inset;
-}
-
-.emotion-0::-webkit-input-placeholder {
-  color: #999999;
-}
-
-.emotion-0::-moz-placeholder {
-  color: #999999;
-}
-
-.emotion-0:-ms-input-placeholder {
-  color: #999999;
-}
-
-.emotion-0::placeholder {
-  color: #999999;
-}
-
-.emotion-1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.emotion-2 {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  border: 0;
-  box-sizing: inherit;
-  display: block;
-  margin: 0;
-  background: #FFFFFF;
-  padding: .42em 1em;
-  font-size: 13px;
-  position: relative;
-  -webkit-transition: all 200ms ease-out;
-  transition: all 200ms ease-out;
-  color: #333333;
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
-  line-height: 20px;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  height: 32px;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  padding-right: 20px;
-  -webkit-appearance: menulist;
-  -moz-appearance: menulist;
-  appearance: menulist;
-}
-
-.emotion-2:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-2[disabled] {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.emotion-2:-webkit-autofill {
-  -webkit-box-shadow: 0 0 0 3em #FFFFFF inset;
-}
-
-.emotion-2::-webkit-input-placeholder {
-  color: #999999;
-}
-
-.emotion-2::-moz-placeholder {
-  color: #999999;
-}
-
-.emotion-2:-ms-input-placeholder {
-  color: #999999;
-}
-
-.emotion-2::placeholder {
-  color: #999999;
-}
-
-.emotion-4 {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  border: 0;
-  box-sizing: inherit;
-  display: block;
-  margin: 0;
-  background: #FFFFFF;
-  padding: .42em 1em;
-  font-size: 13px;
-  position: relative;
-  -webkit-transition: all 200ms ease-out;
-  transition: all 200ms ease-out;
-  color: #333333;
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
-  line-height: 20px;
-  width: 100%;
-  height: 32px;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  padding-right: 20px;
-  -webkit-appearance: menulist;
-  -moz-appearance: menulist;
-  appearance: menulist;
-}
-
-.emotion-4:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-4[disabled] {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.emotion-4:-webkit-autofill {
-  -webkit-box-shadow: 0 0 0 3em #FFFFFF inset;
-}
-
-.emotion-4::-webkit-input-placeholder {
-  color: #999999;
-}
-
-.emotion-4::-moz-placeholder {
-  color: #999999;
-}
-
-.emotion-4:-ms-input-placeholder {
-  color: #999999;
-}
-
-.emotion-4::placeholder {
-  color: #999999;
-}
-
-<div
-  class="emotion-6"
->
-  <div
-    class="emotion-1"
-  >
-    <select
-      class="emotion-0"
-    >
-      <option
-        value="val1"
-      >
-        Value 1
-      </option>
-      <option
-        selected=""
-        value="val2"
-      >
-        Value 2
-      </option>
-      <option
-        value="val3"
-      >
-        Value 3
-      </option>
-    </select>
-  </div>
-  <div
-    class="emotion-1"
-  >
-    <select
-      class="emotion-2"
-    >
-      <option
-        value="val1"
-      >
-        Value 1
-      </option>
-      <option
-        selected=""
-        value="val2"
-      >
-        Value 2
-      </option>
-      <option
-        value="val3"
-      >
-        Value 3
-      </option>
-    </select>
-  </div>
-  <div
-    class="emotion-1"
-  >
-    <select
-      class="emotion-4"
-    >
-      <option
-        value="val1"
-      >
-        Value 1
-      </option>
-      <option
-        selected=""
-        value="val2"
-      >
-        Value 2
-      </option>
-      <option
-        value="val3"
-      >
-        Value 3
-      </option>
-    </select>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Basics|Form/Select validations 1`] = `
-.emotion-4 > * {
-  margin-top: 10px;
-}
-
-.emotion-4 > *:first-of-type {
-  margin-top: 0;
-}
-
-.emotion-3 {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  border: 0;
-  box-sizing: inherit;
-  display: block;
-  margin: 0;
-  background: #FFFFFF;
-  padding: .42em 1em;
-  font-size: 13px;
-  position: relative;
-  -webkit-transition: all 200ms ease-out;
-  transition: all 200ms ease-out;
-  color: #333333;
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
-  line-height: 20px;
-  width: 100%;
-  height: 32px;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  padding-right: 20px;
-  -webkit-appearance: menulist;
-  -moz-appearance: menulist;
-  appearance: menulist;
-}
-
-.emotion-3:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-3[disabled] {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.emotion-3:-webkit-autofill {
-  -webkit-box-shadow: 0 0 0 3em #FFFFFF inset;
-}
-
-.emotion-3::-webkit-input-placeholder {
-  color: #999999;
-}
-
-.emotion-3::-moz-placeholder {
-  color: #999999;
-}
-
-.emotion-3:-ms-input-placeholder {
-  color: #999999;
-}
-
-.emotion-3::placeholder {
-  color: #999999;
-}
-
-.emotion-0 {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  border: 0;
-  box-sizing: inherit;
-  display: block;
-  margin: 0;
-  background: #FFFFFF;
-  padding: .42em 1em;
-  font-size: 13px;
-  position: relative;
-  -webkit-transition: all 200ms ease-out;
-  transition: all 200ms ease-out;
-  color: #333333;
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
-  line-height: 20px;
-  width: 100%;
-  box-shadow: #FF4400 0 0 0 1px inset !important;
-  height: 32px;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  padding-right: 20px;
-  -webkit-appearance: menulist;
-  -moz-appearance: menulist;
-  appearance: menulist;
-}
-
-.emotion-0:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-0[disabled] {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.emotion-0:-webkit-autofill {
-  -webkit-box-shadow: 0 0 0 3em #FFFFFF inset;
-}
-
-.emotion-0::-webkit-input-placeholder {
-  color: #999999;
-}
-
-.emotion-0::-moz-placeholder {
-  color: #999999;
-}
-
-.emotion-0:-ms-input-placeholder {
-  color: #999999;
-}
-
-.emotion-0::placeholder {
-  color: #999999;
-}
-
-.emotion-1 {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  border: 0;
-  box-sizing: inherit;
-  display: block;
-  margin: 0;
-  background: #FFFFFF;
-  padding: .42em 1em;
-  font-size: 13px;
-  position: relative;
-  -webkit-transition: all 200ms ease-out;
-  transition: all 200ms ease-out;
-  color: #333333;
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
-  line-height: 20px;
-  width: 100%;
-  box-shadow: #E69D00 0 0 0 1px inset;
-  height: 32px;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  padding-right: 20px;
-  -webkit-appearance: menulist;
-  -moz-appearance: menulist;
-  appearance: menulist;
-}
-
-.emotion-1:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-1[disabled] {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.emotion-1:-webkit-autofill {
-  -webkit-box-shadow: 0 0 0 3em #FFFFFF inset;
-}
-
-.emotion-1::-webkit-input-placeholder {
-  color: #999999;
-}
-
-.emotion-1::-moz-placeholder {
-  color: #999999;
-}
-
-.emotion-1:-ms-input-placeholder {
-  color: #999999;
-}
-
-.emotion-1::placeholder {
-  color: #999999;
-}
-
-.emotion-2 {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  border: 0;
-  box-sizing: inherit;
-  display: block;
-  margin: 0;
-  background: #FFFFFF;
-  padding: .42em 1em;
-  font-size: 13px;
-  position: relative;
-  -webkit-transition: all 200ms ease-out;
-  transition: all 200ms ease-out;
-  color: #333333;
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
-  line-height: 20px;
-  width: 100%;
-  box-shadow: #66BF3C 0 0 0 1px inset !important;
-  height: 32px;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  padding-right: 20px;
-  -webkit-appearance: menulist;
-  -moz-appearance: menulist;
-  appearance: menulist;
-}
-
-.emotion-2:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-2[disabled] {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.emotion-2:-webkit-autofill {
-  -webkit-box-shadow: 0 0 0 3em #FFFFFF inset;
-}
-
-.emotion-2::-webkit-input-placeholder {
-  color: #999999;
-}
-
-.emotion-2::-moz-placeholder {
-  color: #999999;
-}
-
-.emotion-2:-ms-input-placeholder {
-  color: #999999;
-}
-
-.emotion-2::placeholder {
-  color: #999999;
-}
-
-<div>
-  <div
-    class="emotion-4"
-  >
-    <select
-      class="emotion-0"
-    >
-      <option
-        value="val1"
-      >
-        Value 1
-      </option>
-      <option
-        selected=""
-        value="val2"
-      >
-        Value 2
-      </option>
-      <option
-        value="val3"
-      >
-        Value 3
-      </option>
-    </select>
-    <select
-      class="emotion-1"
-    >
-      <option
-        value="val1"
-      >
-        Value 1
-      </option>
-      <option
-        selected=""
-        value="val2"
-      >
-        Value 2
-      </option>
-      <option
-        value="val3"
-      >
-        Value 3
-      </option>
-    </select>
-    <select
-      class="emotion-2"
-    >
-      <option
-        value="val1"
-      >
-        Value 1
-      </option>
-      <option
-        selected=""
-        value="val2"
-      >
-        Value 2
-      </option>
-      <option
-        value="val3"
-      >
-        Value 3
-      </option>
-    </select>
-    <select
-      class="emotion-3"
-    >
-      <option
-        value="val1"
-      >
-        Value 1
-      </option>
-      <option
-        selected=""
-        value="val2"
-      >
-        Value 2
-      </option>
-      <option
-        value="val3"
-      >
-        Value 3
-      </option>
-    </select>
-  </div>
-  <select
-    class="emotion-3"
-    disabled=""
-  >
-    <option
-      value="val1"
-    >
-      Value 1
-    </option>
-    <option
-      selected=""
-      value="val2"
-    >
-      Value 2
-    </option>
-    <option
-      value="val3"
-    >
-      Value 3
-    </option>
-  </select>
-</div>
-`;
-
-exports[`Storyshots Basics|Form/Textarea alignment 1`] = `
-.emotion-6 > * {
-  margin-top: 10px;
-}
-
-.emotion-6 > *:first-of-type {
-  margin-top: 0;
-}
-
-.emotion-1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.emotion-4 {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  border: 0;
-  box-sizing: inherit;
-  display: block;
-  margin: 0;
-  background: #FFFFFF;
-  padding: .42em 1em;
-  font-size: 13px;
-  position: relative;
-  -webkit-transition: all 200ms ease-out;
-  transition: all 200ms ease-out;
-  color: #333333;
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
-  line-height: 20px;
-  width: 100%;
-  text-align: left;
-  overflow: visible;
-}
-
-.emotion-4:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-4[disabled] {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.emotion-4:-webkit-autofill {
-  -webkit-box-shadow: 0 0 0 3em #FFFFFF inset;
-}
-
-.emotion-4::-webkit-input-placeholder {
-  color: #999999;
-}
-
-.emotion-4::-moz-placeholder {
-  color: #999999;
-}
-
-.emotion-4:-ms-input-placeholder {
-  color: #999999;
-}
-
-.emotion-4::placeholder {
-  color: #999999;
-}
-
-.emotion-0 {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  border: 0;
-  box-sizing: inherit;
-  display: block;
-  margin: 0;
-  background: #FFFFFF;
-  padding: .42em 1em;
-  font-size: 13px;
-  position: relative;
-  -webkit-transition: all 200ms ease-out;
-  transition: all 200ms ease-out;
-  color: #333333;
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
-  line-height: 20px;
-  width: 100%;
-  text-align: right;
-  overflow: visible;
-}
-
-.emotion-0:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-0[disabled] {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.emotion-0:-webkit-autofill {
-  -webkit-box-shadow: 0 0 0 3em #FFFFFF inset;
-}
-
-.emotion-0::-webkit-input-placeholder {
-  color: #999999;
-}
-
-.emotion-0::-moz-placeholder {
-  color: #999999;
-}
-
-.emotion-0:-ms-input-placeholder {
-  color: #999999;
-}
-
-.emotion-0::placeholder {
-  color: #999999;
-}
-
-.emotion-2 {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  border: 0;
-  box-sizing: inherit;
-  display: block;
-  margin: 0;
-  background: #FFFFFF;
-  padding: .42em 1em;
-  font-size: 13px;
-  position: relative;
-  -webkit-transition: all 200ms ease-out;
-  transition: all 200ms ease-out;
-  color: #333333;
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
-  line-height: 20px;
-  width: 100%;
-  text-align: center;
-  overflow: visible;
-}
-
-.emotion-2:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-2[disabled] {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.emotion-2:-webkit-autofill {
-  -webkit-box-shadow: 0 0 0 3em #FFFFFF inset;
-}
-
-.emotion-2::-webkit-input-placeholder {
-  color: #999999;
-}
-
-.emotion-2::-moz-placeholder {
-  color: #999999;
-}
-
-.emotion-2:-ms-input-placeholder {
-  color: #999999;
-}
-
-.emotion-2::placeholder {
-  color: #999999;
-}
-
-<div
-  class="emotion-6"
->
-  <div
-    class="emotion-1"
-  >
-    <textarea
-      align="end"
-      class="emotion-0"
-      style="height:0"
-    >
-      textarea
-    </textarea>
-  </div>
-  <div
-    class="emotion-1"
-  >
-    <textarea
-      align="center"
-      class="emotion-2"
-      style="height:0"
-    >
-      textarea
-    </textarea>
-  </div>
-  <div
-    class="emotion-1"
-  >
-    <textarea
-      align="start"
-      class="emotion-4"
-      style="height:0"
-    >
-      textarea
-    </textarea>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Basics|Form/Textarea sizes 1`] = `
-.emotion-6 > * {
-  margin-top: 10px;
-}
-
-.emotion-6 > *:first-of-type {
-  margin-top: 0;
-}
-
-.emotion-1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.emotion-0 {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  border: 0;
-  box-sizing: inherit;
-  display: block;
-  margin: 0;
-  background: #FFFFFF;
-  padding: .42em 1em;
-  font-size: 13px;
-  position: relative;
-  -webkit-transition: all 200ms ease-out;
-  transition: all 200ms ease-out;
-  color: #333333;
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
-  line-height: 20px;
-  display: inline;
-  text-align: left;
-  overflow: visible;
-}
-
-.emotion-0:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-0[disabled] {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.emotion-0:-webkit-autofill {
-  -webkit-box-shadow: 0 0 0 3em #FFFFFF inset;
-}
-
-.emotion-0::-webkit-input-placeholder {
-  color: #999999;
-}
-
-.emotion-0::-moz-placeholder {
-  color: #999999;
-}
-
-.emotion-0:-ms-input-placeholder {
-  color: #999999;
-}
-
-.emotion-0::placeholder {
-  color: #999999;
-}
-
-.emotion-2 {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  border: 0;
-  box-sizing: inherit;
-  display: block;
-  margin: 0;
-  background: #FFFFFF;
-  padding: .42em 1em;
-  font-size: 13px;
-  position: relative;
-  -webkit-transition: all 200ms ease-out;
-  transition: all 200ms ease-out;
-  color: #333333;
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
-  line-height: 20px;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  text-align: left;
-  overflow: visible;
-}
-
-.emotion-2:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-2[disabled] {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.emotion-2:-webkit-autofill {
-  -webkit-box-shadow: 0 0 0 3em #FFFFFF inset;
-}
-
-.emotion-2::-webkit-input-placeholder {
-  color: #999999;
-}
-
-.emotion-2::-moz-placeholder {
-  color: #999999;
-}
-
-.emotion-2:-ms-input-placeholder {
-  color: #999999;
-}
-
-.emotion-2::placeholder {
-  color: #999999;
-}
-
-.emotion-4 {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  border: 0;
-  box-sizing: inherit;
-  display: block;
-  margin: 0;
-  background: #FFFFFF;
-  padding: .42em 1em;
-  font-size: 13px;
-  position: relative;
-  -webkit-transition: all 200ms ease-out;
-  transition: all 200ms ease-out;
-  color: #333333;
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
-  line-height: 20px;
-  width: 100%;
-  text-align: left;
-  overflow: visible;
-}
-
-.emotion-4:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-4[disabled] {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.emotion-4:-webkit-autofill {
-  -webkit-box-shadow: 0 0 0 3em #FFFFFF inset;
-}
-
-.emotion-4::-webkit-input-placeholder {
-  color: #999999;
-}
-
-.emotion-4::-moz-placeholder {
-  color: #999999;
-}
-
-.emotion-4:-ms-input-placeholder {
-  color: #999999;
-}
-
-.emotion-4::placeholder {
-  color: #999999;
-}
-
-<div
-  class="emotion-6"
->
-  <div
-    class="emotion-1"
-  >
-    <textarea
-      class="emotion-0"
-      style="height:0"
-    >
-      textarea
-    </textarea>
-  </div>
-  <div
-    class="emotion-1"
-  >
-    <textarea
-      class="emotion-2"
-      style="height:0"
-    >
-      textarea
-    </textarea>
-  </div>
-  <div
-    class="emotion-1"
-  >
-    <textarea
-      class="emotion-4"
-      style="height:0"
-    >
-      textarea
-    </textarea>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Basics|Form/Textarea validations 1`] = `
-.emotion-8 > * {
-  margin-top: 10px;
-}
-
-.emotion-8 > *:first-of-type {
-  margin-top: 0;
-}
-
-.emotion-1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.emotion-6 {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  border: 0;
-  box-sizing: inherit;
-  display: block;
-  margin: 0;
-  background: #FFFFFF;
-  padding: .42em 1em;
-  font-size: 13px;
-  position: relative;
-  -webkit-transition: all 200ms ease-out;
-  transition: all 200ms ease-out;
-  color: #333333;
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
-  line-height: 20px;
-  width: 100%;
-  text-align: left;
-  overflow: visible;
-}
-
-.emotion-6:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-6[disabled] {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.emotion-6:-webkit-autofill {
-  -webkit-box-shadow: 0 0 0 3em #FFFFFF inset;
-}
-
-.emotion-6::-webkit-input-placeholder {
-  color: #999999;
-}
-
-.emotion-6::-moz-placeholder {
-  color: #999999;
-}
-
-.emotion-6:-ms-input-placeholder {
-  color: #999999;
-}
-
-.emotion-6::placeholder {
-  color: #999999;
-}
-
-.emotion-0 {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  border: 0;
-  box-sizing: inherit;
-  display: block;
-  margin: 0;
-  background: #FFFFFF;
-  padding: .42em 1em;
-  font-size: 13px;
-  position: relative;
-  -webkit-transition: all 200ms ease-out;
-  transition: all 200ms ease-out;
-  color: #333333;
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
-  line-height: 20px;
-  width: 100%;
-  text-align: left;
-  box-shadow: #FF4400 0 0 0 1px inset !important;
-  overflow: visible;
-}
-
-.emotion-0:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-0[disabled] {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.emotion-0:-webkit-autofill {
-  -webkit-box-shadow: 0 0 0 3em #FFFFFF inset;
-}
-
-.emotion-0::-webkit-input-placeholder {
-  color: #999999;
-}
-
-.emotion-0::-moz-placeholder {
-  color: #999999;
-}
-
-.emotion-0:-ms-input-placeholder {
-  color: #999999;
-}
-
-.emotion-0::placeholder {
-  color: #999999;
-}
-
-.emotion-2 {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  border: 0;
-  box-sizing: inherit;
-  display: block;
-  margin: 0;
-  background: #FFFFFF;
-  padding: .42em 1em;
-  font-size: 13px;
-  position: relative;
-  -webkit-transition: all 200ms ease-out;
-  transition: all 200ms ease-out;
-  color: #333333;
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
-  line-height: 20px;
-  width: 100%;
-  text-align: left;
-  box-shadow: #E69D00 0 0 0 1px inset;
-  overflow: visible;
-}
-
-.emotion-2:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-2[disabled] {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.emotion-2:-webkit-autofill {
-  -webkit-box-shadow: 0 0 0 3em #FFFFFF inset;
-}
-
-.emotion-2::-webkit-input-placeholder {
-  color: #999999;
-}
-
-.emotion-2::-moz-placeholder {
-  color: #999999;
-}
-
-.emotion-2:-ms-input-placeholder {
-  color: #999999;
-}
-
-.emotion-2::placeholder {
-  color: #999999;
-}
-
-.emotion-4 {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  border: 0;
-  box-sizing: inherit;
-  display: block;
-  margin: 0;
-  background: #FFFFFF;
-  padding: .42em 1em;
-  font-size: 13px;
-  position: relative;
-  -webkit-transition: all 200ms ease-out;
-  transition: all 200ms ease-out;
-  color: #333333;
-  box-shadow: rgba(0,0,0,.1) 0 0 0 1px inset;
-  border-radius: 4px;
-  line-height: 20px;
-  width: 100%;
-  text-align: left;
-  box-shadow: #66BF3C 0 0 0 1px inset !important;
-  overflow: visible;
-}
-
-.emotion-4:focus {
-  box-shadow: #1EA7FD 0 0 0 1px inset;
-}
-
-.emotion-4[disabled] {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.emotion-4:-webkit-autofill {
-  -webkit-box-shadow: 0 0 0 3em #FFFFFF inset;
-}
-
-.emotion-4::-webkit-input-placeholder {
-  color: #999999;
-}
-
-.emotion-4::-moz-placeholder {
-  color: #999999;
-}
-
-.emotion-4:-ms-input-placeholder {
-  color: #999999;
-}
-
-.emotion-4::placeholder {
-  color: #999999;
-}
-
-<div
-  class="emotion-8"
->
-  <div
-    class="emotion-1"
-  >
-    <textarea
-      class="emotion-0"
-      style="height:0"
-      valid="error"
-    >
-      textarea
-    </textarea>
-  </div>
-  <div
-    class="emotion-1"
-  >
-    <textarea
-      class="emotion-2"
-      style="height:0"
-      valid="warn"
-    >
-      textarea
-    </textarea>
-  </div>
-  <div
-    class="emotion-1"
-  >
-    <textarea
-      class="emotion-4"
-      style="height:0"
-      valid="valid"
-    >
-      textarea
-    </textarea>
-  </div>
-  <div
-    class="emotion-1"
-  >
-    <textarea
-      class="emotion-6"
-      style="height:0"
-    >
-      textarea
-    </textarea>
-  </div>
-</div>
-`;
diff --git a/lib/components/src/icon/__snapshots__/icon.stories.storyshot b/lib/components/src/icon/__snapshots__/icon.stories.storyshot
deleted file mode 100644
index 0c674a0fdaef..000000000000
--- a/lib/components/src/icon/__snapshots__/icon.stories.storyshot
+++ /dev/null
@@ -1,4960 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Basics|Icon labels 1`] = `
-.emotion-1 {
-  shape-rendering: inherit;
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-  display: block;
-}
-
-.emotion-0 {
-  fill: currentColor;
-}
-
-.emotion-604 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-flow: row wrap;
-  -ms-flex-flow: row wrap;
-  flex-flow: row wrap;
-}
-
-.emotion-3 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex: 0 1 20%;
-  -ms-flex: 0 1 20%;
-  flex: 0 1 20%;
-  min-width: 120px;
-  padding: 0px 7.5px 20px;
-}
-
-.emotion-3 svg {
-  margin-right: 10px;
-  width: 24px;
-  height: 24px;
-}
-
-.emotion-2 {
-  color: #333;
-  font-size: 12px;
-}
-
-<div
-  class="emotion-604"
->
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M512 144c98.296 0 190.708 38.28 260.214 107.784 69.506 69.508 107.786 161.922 107.786 260.216 0 98.296-38.28 190.708-107.786 260.214-69.508 69.506-161.918 107.786-260.214 107.786-98.294 0-190.708-38.28-260.216-107.786-69.504-69.508-107.784-161.918-107.784-260.214 0-98.294 38.28-190.708 107.784-260.216 69.508-69.504 161.922-107.784 260.216-107.784zM512 64c-247.424 0-448 200.576-448 448s200.576 448 448 448 448-200.576 448-448-200.576-448-448-448v0zM729.002 473h-176.008v-176.008c0.002-22.090-17.906-39.994-39.996-39.994-22.088 0-39.998 17.908-39.998 39.998v176.004h-176c-22.094 0-40 17.908-39.998 40-0.002 22.090 17.904 39.996 39.996 39.996h176.002v176.004c0 22.094 17.908 40 40 39.998 22.090 0.002 39.996-17.904 39.996-39.996v-176.006l176.012-0.002c22.090 0.002 39.994-17.906 39.994-39.996-0.002-22.088-17.91-39.998-40-39.998z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      add
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M919.596 847.534h-88.414v-467.716l88.75-0.044c13.688-0.132 26.958-7.25 34.294-19.96 11.044-19.13 4.49-43.596-14.642-54.64l-407.904-235.676c-0.44-0.254-0.894-0.45-1.34-0.684-0.542-0.29-1.084-0.578-1.638-0.84-0.696-0.328-1.4-0.62-2.108-0.904-0.478-0.194-0.954-0.388-1.44-0.56-0.78-0.282-1.564-0.524-2.352-0.754-0.442-0.126-0.878-0.256-1.324-0.37-0.808-0.206-1.618-0.376-2.43-0.528-0.468-0.088-0.934-0.174-1.404-0.246-0.768-0.116-1.534-0.204-2.302-0.274-0.554-0.052-1.108-0.096-1.664-0.124-0.672-0.034-1.34-0.044-2.012-0.044-0.67 0-1.338 0.012-2.010 0.044-0.556 0.030-1.11 0.072-1.664 0.124-0.77 0.070-1.536 0.158-2.302 0.274-0.468 0.072-0.938 0.158-1.402 0.246-0.814 0.152-1.624 0.322-2.432 0.528-0.444 0.114-0.882 0.242-1.322 0.37-0.79 0.23-1.574 0.472-2.356 0.754-0.484 0.172-0.958 0.368-1.438 0.56-0.708 0.286-1.41 0.576-2.11 0.904-0.554 0.262-1.094 0.55-1.636 0.84-0.446 0.234-0.9 0.43-1.34 0.684l-407.906 235.672c-19.128 11.044-25.686 35.51-14.64 54.64 7.34 12.71 20.606 19.828 34.292 19.96v0.044h89.842v467.716h-89.474c-22.090 0-40 17.91-40 40s17.91 40 40 40h128.276c0.402 0.012 0.794 0.060 1.2 0.060s0.796-0.048 1.2-0.060h183.602c0.402 0.012 0.794 0.060 1.2 0.060s0.796-0.048 1.2-0.060h183.602c0.402 0.012 0.794 0.060 1.2 0.060s0.796-0.048 1.2-0.060h313.154c22.098 0 40-17.91 40-40-0.006-22.090-17.914-39.996-40.006-39.996zM751.182 847.534h-105.94v-467.716h105.94v467.716zM252.93 299.816l258.736-149.486 258.738 149.486h-517.474zM565.242 379.816v467.716h-106v-467.716h106zM273.242 379.816h106v467.716h-106v-467.716z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      admin
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M511.998 623.846c-22.090 0-40-17.906-40-40v-208c0-22.090 17.91-40 40-40v0c22.090 0 40.004 17.91 40.004 40v208c0 22.094-17.914 40-40.004 40v0zM511.998 743.846c22.090 0 40.004-17.906 40.004-40v0c0-22.090-17.914-40-40.004-40v0c-22.090 0-40 17.91-40 40v0c0 22.094 17.91 40 40 40v0zM512.142 211.808l-340.074 589.028h680.148l-340.074-589.028zM512.142 92.51c14.5 0 29 9.526 40 28.58l398.638 690.462c22 38.106 4 69.282-40 69.282h-797.278c-44 0-62-31.176-40-69.282l398.638-690.462c11.002-19.052 25.502-28.58 40.002-28.58v0z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      alert
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M511.976 768.002c-10.236 0-20.47-3.904-28.282-11.712l-344.154-344.098c-15.624-15.62-15.624-40.946-0.006-56.57 15.622-15.622 40.948-15.624 56.568-0.004l315.876 315.82 315.922-315.868c15.624-15.618 40.952-15.616 56.568 0.004 15.62 15.624 15.618 40.95-0.006 56.57l-344.204 344.144c-7.81 7.81-18.046 11.714-28.282 11.714z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      arrowdown
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M257.93 511.976c0-10.236 3.902-20.47 11.71-28.282l344.098-344.158c15.622-15.624 40.946-15.624 56.57-0.006 15.622 15.622 15.624 40.948 0.004 56.568l-315.82 315.876 315.868 315.922c15.618 15.624 15.618 40.952-0.004 56.568-15.622 15.62-40.95 15.618-56.57-0.006l-344.146-344.202c-7.808-7.81-11.71-18.044-11.71-28.28z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      arrowleft
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M107.854 539.924l282.834 283.272c15.594 15.65 40.92 15.692 56.568 0.1 15.648-15.594 15.694-40.92 0.1-56.568l-214.838-215.040h655.412c22.092 0 40-17.908 40-40s-17.908-40-40-40h-655l214.75-214.61c15.64-15.602 15.672-40.928 0.070-56.568-7.814-7.834-18.066-11.752-28.32-11.75-10.22 0-20.442 3.892-28.25 11.68l-283.242 282.93c-15.634 15.594-15.672 40.91-0.084 56.554z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      arrowleftalt
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M768.072 514.022c0 10.236-3.904 20.47-11.712 28.282l-344.098 344.156c-15.62 15.624-40.946 15.624-56.568 0.006-15.622-15.622-15.624-40.948-0.006-56.568l315.82-315.876-315.868-315.922c-15.618-15.624-15.618-40.952 0.004-56.568 15.624-15.62 40.95-15.618 56.57 0.006l344.144 344.204c7.81 7.81 11.714 18.044 11.714 28.28z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      arrowright
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M916.266 483.792l-282.834-283.272c-15.594-15.65-40.92-15.692-56.568-0.1-15.648 15.594-15.694 40.92-0.1 56.568l214.838 215.040h-655.412c-22.092 0-40 17.908-40 40s17.908 40 40 40h655l-214.748 214.61c-15.64 15.602-15.672 40.928-0.070 56.568 7.814 7.834 18.066 11.752 28.32 11.75 10.22 0 20.442-3.892 28.25-11.68l283.242-282.93c15.632-15.596 15.67-40.91 0.082-56.554z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      arrowrightalt
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M512.024 256c10.236 0 20.47 3.904 28.282 11.712l344.154 344.098c15.624 15.62 15.624 40.946 0.006 56.57-15.622 15.622-40.948 15.624-56.568 0.004l-315.876-315.82-315.922 315.868c-15.624 15.618-40.952 15.618-56.568-0.004-15.62-15.624-15.618-40.95 0.006-56.57l344.204-344.144c7.81-7.81 18.046-11.714 28.282-11.714z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      arrowup
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M512.030 880c-98.296 0-190.708-38.28-260.214-107.784-69.508-69.508-107.786-161.922-107.786-260.216 0-98.296 38.278-190.708 107.786-260.214s161.918-107.786 260.214-107.786c98.292 0 190.708 38.28 260.214 107.786 69.504 69.508 107.786 161.918 107.786 260.214 0 98.294-38.282 190.708-107.786 260.216-69.508 69.504-161.922 107.784-260.214 107.784zM512.030 960c247.422 0 448-200.576 448-448s-200.578-448-448-448c-247.426 0-448 200.576-448 448s200.574 448 448 448v0zM267.63 538.67l125 125.438c15.596 15.648 40.922 15.692 56.57 0.098s15.692-40.92 0.098-56.566l-57.004-57.206h335.672c22.090 0 40-17.908 40-40s-17.91-40-40-40h-335.26l56.508-56.368c15.64-15.602 15.672-40.928 0.070-56.568-7.814-7.832-18.064-11.752-28.318-11.75-10.22 0-20.444 3.89-28.25 11.68l-125 124.688c-15.634 15.596-15.672 40.91-0.086 56.554z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      back
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M632.254 695.604v-112.016c-0.004-22.092 17.906-40.002 40-40.002 22.090 0.002 40 17.908 40 40.002l-0.004 112.018c0.004 22.088-17.906 39.996-39.996 39.998-22.094 0.002-40.004-17.904-40-40zM352.246 735.604c22.090-0.002 40-17.91 39.996-39.998l0.004-112.018c0-22.094-17.91-40-40-40.002-22.094 0-40.004 17.91-40 40.002v112.016c-0.004 22.096 17.906 40.002 40 40zM512.25 735.604c22.090-0.002 40-17.91 39.996-39.998l0.004-112.018c0-22.094-17.91-40-40-40.002-22.094 0-40.004 17.91-40 40.002v112.016c-0.004 22.096 17.906 40.002 40 40zM950.3 397.424c-7.596-8.686-18.574-13.67-30.114-13.67h-313.284c0.87 5.196 1.346 10.524 1.346 15.966 0 24.608-9.27 47.044-24.494 64.034h290.684l-47.318 351.376-629.908-0.030-47.502-351.346h291.034c-15.224-16.988-24.494-39.426-24.494-64.034 0-5.444 0.476-10.772 1.346-15.966h-313.66c-11.542 0-22.524 4.986-30.12 13.678-7.596 8.694-11.066 20.242-9.52 31.682l51.614 381.742 0.050 0.042c5.832 47.424 46.222 84.158 95.222 84.172l0.054 0.034 601.816-0.034c0.042 0 0.082 0.002 0.124 0.002 49.414 0 90.090-37.34 95.396-85.336l51.258-380.64c1.54-11.44-1.934-22.984-9.53-31.672zM805.492 105.34c-15.622-15.622-40.95-15.624-56.572 0.004l-230.684 230.684c-2.052-0.2-4.132-0.306-6.236-0.306-35.346 0-64 28.654-64 64s28.654 64 64 64 64-28.654 64-64c0-2.652-0.18-5.262-0.494-7.83l229.986-229.98c15.622-15.624 15.616-40.95-0-56.572z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      basket
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M684 277L271 772l-1 1a40 40 0 0 1-56 5l-1-1L14 610a40 40 0 1 1 52-61l169 142 387-465a40 40 0 0 1 62 51zm340 234c0-22-18-40-40-40H808a40 40 0 0 0 0 80h176c22 0 40-18 40-40zm0-216c0-22-18-40-40-40H808a40 40 0 0 0 0 80h176c22 0 40-18 40-40zm0 432c0-22-18-40-40-40H808a40 40 0 0 0 0 80h176c22 0 40-18 40-40z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      batchaccept
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M1024 512c0-22-18-40-40-40H808a40 40 0 0 0 0 80h176c22 0 40-18 40-40zm0-216c0-22-18-40-40-40H808a40 40 0 0 0 0 80h176c22 0 40-18 40-40zm0 432c0-22-18-40-40-40H808a40 40 0 0 0 0 80h176c22 0 40-18 40-40zM625 236c16 15 16 41 0 56L406 512l220 220a40 40 0 1 1-57 57L349 568 129 788a40 40 0 1 1-57-56l220-220L73 292a40 40 0 0 1 56-57l220 220 219-219c16-16 41-16 57 0z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      batchdeny
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M848.64 790.56l-208.638-361.374v-252.062h24c22.092 0 40-17.908 40-40s-17.908-40-40-40h-304.002c-22.092 0-40 17.908-40 40s17.908 40 40 40h24v252.066l-208.636 361.37c-44 76.208-8 138.564 80 138.564h513.278c87.998 0 123.998-62.354 79.998-138.564zM464 177.124h96.002l-0.070 273.376 63.872 110.628h-223.678c35.932-62.268 63.872-110.684 63.876-110.692v-273.312zM768.64 849.124h-513.278c-8.28 0-14.186-0.976-17.968-2 1.004-3.792 3.112-9.394 7.25-16.564 0 0 54.598-94.614 109.316-189.436l316.026-0.002 109.374 189.44c4.138 7.168 6.246 12.77 7.25 16.562-3.784 1.024-9.69 2-17.97 2z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      beaker
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M901.344 760.018l-57.644-77.648c-7.906-7.906-11.77-38.284-11.71-48.646h0.042v-200.588h-0.364c-6.878-148.106-114.428-269.902-255.792-298.528 0.208-2.1 0.318-4.228 0.318-6.384 0-35.452-28.738-64.194-64.194-64.194-35.458 0-64.194 28.742-64.194 64.194 0 2.19 0.112 4.352 0.326 6.486-141.128 28.802-248.446 150.488-255.316 298.426h-0.364v200.588h0.042c0.058 10.362-3.804 40.74-11.71 48.646l-57.644 77.648c-8.802 8.802-16.35 18.978-16.35 32.208 0 22.092 17.908 40 40 40h255.876c-0.814 5.412-1.28 10.936-1.28 16.576 0 61.43 49.794 111.23 111.23 111.23 61.432 0 111.228-49.8 111.228-111.23 0-5.638-0.464-11.164-1.282-16.576h255.128c22.092 0 40-17.908 40-40 0.004-13.23-7.542-23.404-16.346-32.208zM272.732 436.848c2.862-61.602 29.032-119.104 73.69-161.91 44.786-42.93 103.628-66.62 165.692-66.706h0.26c62.062 0.086 120.906 23.776 165.692 66.706 44.658 42.806 70.828 100.308 73.69 161.91l0.278 5.962v149.384h-479.58v-149.384l0.278-5.962zM543.846 848.8c0 17.22-14.010 31.23-31.228 31.23-17.22 0-31.23-14.010-31.23-31.23 0-6.096 1.784-11.768 4.82-16.576h52.818c3.038 4.81 4.82 10.482 4.82 16.576zM512.484 752.226h-283.922l14.572-19.63c12.064-14.542 20.078-33.27 24.982-58.158 0.146-0.742 0.276-1.496 0.416-2.244h487.42c0.138 0.748 0.268 1.5 0.414 2.244 4.904 24.888 12.918 43.616 24.982 58.158l14.572 19.63h-283.436z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      bell
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M512.157 32c-219.6 0-400.001 61.279-400.001 138.881 0 20.4 47.040 310.481 66.641 424.8 7.841 53.28 137.359 126.72 333.36 126.72 196.080 0 321.6-73.601 333.36-126.641 19.601-114.4 66.641-404.479 66.641-424.8-3.919-77.76-180.401-138.96-400.001-138.96v0zM512.157 628.4c-70.56 0-125.52-57.2-125.52-130.722s54.96-130.72 125.52-130.72c70.56 0 125.52 57.199 125.52 130.721 0 69.439-54.96 130.721-125.52 130.721zM512.157 211.76c-141.199 0-254.88-24.559-254.88-57.199 0-32.719 113.681-57.199 254.88-57.199s254.88 24.48 254.88 57.199c0 32.64-113.681 57.199-254.88 57.199zM801.597 706.081c7.84 0 11.76 8.16 7.84 16.32v4.002c-15.679 85.84-27.439 147.199-27.439 155.28-11.76 61.279-129.439 110.321-270.641 110.321-141.12 0-258.8-49.039-270.56-110.321 0-8.16-11.76-69.439-27.439-155.201v-4.081c0-12.24 7.841-16.319 15.679-16.319 4.409 0.751 8.359 2.145 11.962 4.1l-0.202-0.101c0 0 98.081 81.761 274.481 81.761 176.479 0 274.56-81.679 274.56-81.679s3.919-4.080 11.76-4.080l0.001-0.002zM512.157 558.961c-34.639 0-62.719-29.279-62.719-65.359s28.001-65.359 62.719-65.359c34.639 0 62.719 29.279 62.719 65.359s-28.001 65.359-62.719 65.359z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      bitbucket
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M896.054 159.774c-0.122-52.914-43.048-95.774-95.992-95.774h-632.004c-1.754 0-3.468 0.154-5.164 0.372-19.644 2.54-34.836 19.292-34.836 39.628v816c0 22.094 17.91 40 40 40h632.004c52.642 0 95.368-42.378 95.968-94.88h0.036v-705.332l-0.012-0.014zM368.062 144h80v271.922l-11.728-11.718c-15.62-15.606-40.924-15.606-56.542 0l-11.728 11.718v-271.922zM816.036 864.204c-0.1 8.712-7.268 15.796-15.972 15.796h-592.004v-736h80.004v368.426c0 16.176 9.742 30.758 24.684 36.954 14.944 6.192 32.146 2.778 43.586-8.656l51.728-51.68 51.728 51.68c7.652 7.644 17.876 11.708 28.28 11.708 5.156 0 10.356-1 15.306-3.050 14.944-6.196 24.684-20.778 24.684-36.954v-368.428h272c8.796 0 15.972 7.16 15.992 15.958l-0.016 704.246z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      book
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M772 1012L511 761l-260 251a49 49 0 0 1-52 10c-18-7-29-24-29-43V132c0-25 21-46 47-46h588c26 0 47 21 47 46v847c0 19-11 36-29 43a49 49 0 0 1-51-10z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      bookmark
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M772 1012L511 761l-260 251a49 49 0 0 1-52 10c-18-7-29-24-29-43V132c0-25 21-46 47-46h588c26 0 47 21 47 46v847c0 19-11 36-29 43a49 49 0 0 1-51-10zM545 664l213 205V181H265v688l213-205c9-9 21-14 33-14s24 5 34 14z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      bookmarkhollow
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M85 121h854c24 0 42 18 42 41v700c0 23-18 41-42 41H608a44 44 0 0 1-7 0H85c-24 0-42-18-42-41V162c0-23 18-41 42-41zm41 535v165h772V656H126zm0-82h772V202H126v372zm185 197h-69c-19 0-34-14-34-32s15-33 34-33h69c19 0 34 15 34 33s-15 32-34 32zm236 0h-70c-18 0-33-14-33-32s15-33 33-33h70c18 0 33 15 33 33s-15 32-33 32zm235 0h-70c-18 0-33-14-33-32s15-33 33-33h70c18 0 33 15 33 33s-15 32-33 32z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      bottombar
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M960.016 408.080c0-0.672-0.046-1.342-0.078-2.014-0.032-0.594-0.044-1.19-0.102-1.782-0.068-0.726-0.186-1.448-0.294-2.17-0.080-0.54-0.144-1.080-0.248-1.616-0.138-0.724-0.326-1.442-0.506-2.16-0.134-0.534-0.252-1.070-0.408-1.6-0.196-0.662-0.436-1.314-0.668-1.968-0.204-0.582-0.396-1.166-0.628-1.74-0.226-0.56-0.494-1.11-0.75-1.662-0.3-0.656-0.598-1.312-0.934-1.954-0.242-0.454-0.514-0.894-0.774-1.342-0.414-0.716-0.83-1.43-1.292-2.124-0.256-0.382-0.538-0.752-0.806-1.128-0.514-0.716-1.036-1.428-1.602-2.116-0.090-0.11-0.162-0.226-0.254-0.336-0.244-0.292-0.516-0.542-0.768-0.826-0.534-0.6-1.068-1.198-1.644-1.772-0.48-0.478-0.982-0.924-1.48-1.376-0.354-0.316-0.674-0.658-1.040-0.964l-405.788-335.666c-6.568-6.436-14.918-10.166-23.564-11.124-0.16-0.022-0.32-0.050-0.48-0.066-0.838-0.082-1.676-0.11-2.518-0.14-0.496-0.020-0.994-0.058-1.492-0.058s-0.996 0.040-1.492 0.058c-0.842 0.028-1.68 0.058-2.518 0.14-0.16 0.016-0.32 0.044-0.48 0.066-8.646 0.956-16.996 4.688-23.564 11.124l-405.662 335.542c-7.13 5.982-11.616 13.93-13.392 22.382-0.032 0.14-0.070 0.278-0.1 0.42-0.212 1.072-0.37 2.152-0.494 3.238-0.032 0.258-0.078 0.51-0.106 0.77-0.086 0.89-0.114 1.786-0.138 2.68-0.014 0.39-0.052 0.78-0.054 1.17 0 0.040-0.006 0.074-0.006 0.114v204.856c-0.958 12.434 3.854 25.128 14.134 33.754l405.662 335.54c6.568 6.438 14.918 10.168 23.564 11.124 0.16 0.020 0.32 0.050 0.48 0.066 0.838 0.082 1.676 0.114 2.518 0.14 0.496 0.020 0.994 0.058 1.492 0.058 0.054 0 0.11-0.008 0.162-0.008 0.042 0 0.084 0.008 0.126 0.008 0.342 0 0.672-0.042 1.012-0.050 0.062-0.004 0.126-0.008 0.192-0.008 0.134-0.004 0.27-0.020 0.402-0.024 10.602-0.422 20.136-4.938 27.054-12.046l404.526-334.624c0.084-0.066 0.166-0.136 0.248-0.204l0.12-0.098c0.17-0.144 0.314-0.304 0.48-0.45 0.814-0.704 1.614-1.43 2.37-2.2 0.296-0.3 0.562-0.624 0.85-0.934 0.602-0.652 1.2-1.308 1.756-2 0.3-0.372 0.566-0.758 0.852-1.136 0.504-0.672 1.002-1.344 1.462-2.046 0.242-0.368 0.458-0.75 0.686-1.124 0.458-0.754 0.908-1.508 1.316-2.292 0.164-0.312 0.304-0.636 0.46-0.954 0.426-0.872 0.832-1.746 1.196-2.652 0.092-0.23 0.168-0.464 0.256-0.696 0.376-0.996 0.728-2 1.026-3.032 0.042-0.148 0.074-0.296 0.114-0.442 0.306-1.102 0.578-2.218 0.79-3.356 0.016-0.082 0.024-0.164 0.038-0.246 0.212-1.184 0.382-2.378 0.49-3.598v0c0.1-1.156 0.176-2.32 0.176-3.5v-204.86c0.024-0.318 0.022-0.638 0.040-0.958 0.026-0.668 0.074-1.338 0.074-2.008zM143.89 493.202l328.14 271.42v103.902l-328.14-271.18v-104.142zM552.032 764.402l327.868-271.212v103.88l-327.868 270.972v-103.64zM511.898 122.66l345.348 285.42-345.348 285.42-345.374-285.42 345.374-285.42z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      box
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M861.968 312.032c0-66.168-53.832-120-120-120s-120 53.832-120 120c0 50.55 31.436 93.87 75.77 111.516-5.384 20.352-15.71 39.68-29.844 54.92-28.828 31.092-72.202 46.858-128.91 46.858-77.162 0-129.12 26.162-162.984 55.12V297.15c46.556-16.512 80-60.974 80-113.12 0-66.168-53.832-120-120-120s-120 53.832-120 120c0 52.146 33.444 96.608 80 113.12v429.762c-46.556 16.512-80 60.974-80 113.12 0 66.168 53.832 120 120 120s120-53.832 120-120c0-50.926-31.902-94.514-76.758-111.908 5.222-26.17 16.578-51.154 32.558-70.432 28.8-34.746 71.592-52.364 127.184-52.364 99.498 0 156.922-39.408 187.574-72.466 27.402-29.554 45.708-67.194 52.48-106.716 48.078-15.66 82.93-60.882 82.93-114.114zM336 144.032c22.056 0 40 17.944 40 40s-17.944 40-40 40-40-17.944-40-40 17.944-40 40-40zm0 736c-22.056 0-40-17.944-40-40s17.944-40 40-40 40 17.944 40 40-17.944 40-40 40zm405.968-528c-22.056 0-40-17.944-40-40s17.944-40 40-40 40 17.944 40 40-17.942 40-40 40z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      branch
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M920.004 128h-816.008c-1.38 0-2.746 0.070-4.090 0.208-20.168 2.048-35.91 19.080-35.91 39.792v688c0 22.090 17.91 40 40 40h816.008c22.098 0 40-17.91 40-40v-688c-0-22.094-17.906-40-40-40zM368 177.78c17.674 0 32.004 14.328 32.004 31.998 0 17.676-14.33 32.002-32.004 32.002-17.67 0-32-14.326-32-32.002 0-17.67 14.33-31.998 32-31.998zM272 177.78c17.674 0 32.004 14.328 32.004 31.998 0 17.676-14.33 32.002-32.004 32.002-17.67 0-32-14.326-32-32.002 0-17.67 14.33-31.998 32-31.998zM176 177.78c17.674 0 32.004 14.328 32.004 31.998 0 17.676-14.33 32.002-32.004 32.002-17.67 0-32-14.326-32-32.002 0-17.67 14.33-31.998 32-31.998zM880.004 815.996h-736.008v-527.988h736.008v527.988z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      browser
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M644.634 802.32c-4.558 5.434-10.254 9.328-16.446 11.672l0.008 0.024-45.628 16.606 27.54 75.66c7.554 20.756-3.148 43.71-23.906 51.266s-43.714-3.146-51.27-23.906l-27.54-75.656-47.63 17.29c-6.020 1.956-12.586 2.518-19.254 1.342-21.75-3.836-36.282-24.582-32.45-46.34l30.57-173.328c2.55-14.476 12.61-25.714 25.458-30.508 0.292-0.118 0.586-0.23 0.878-0.34 0.238-0.084 0.476-0.168 0.718-0.246 12.942-4.624 27.91-2.492 39.196 6.98l134.824 113.13c16.932 14.2 19.144 39.432 4.932 56.354zM960.002 664v-368.082c0-22.092-17.908-40-40-40h-816c-22.092 0-40 17.908-40 40l-0.292 368.238c0 22.092 17.908 40 40 40h240.292c22.092 0 40-17.908 40-40s-17.908-40-40-40h-200.292l0.292-288.238h736v288.082h-200c-22.092 0-40 17.908-40 40s17.908 40 40 40h240c22.092 0 40-17.908 40-40z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      button
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M920.036 160.030h-112.004v-72c0-22.092-17.906-40.004-40-40.004-22.090 0-40 17.906-40 40v72.004h-432v-72c0-22.092-17.906-40.004-40-40.004-22.090 0-40 17.906-40 40v72.004h-112.004c-1.38 0-2.746 0.070-4.090 0.208-20.168 2.046-35.91 19.080-35.91 39.792v688c0 22.090 17.91 40 40 40h816.008c22.098 0 40-17.91 40-40v-688c0-22.094-17.908-40-40-40zM356.032 848.026h-212.004v-142.662h212.004v142.662zM356.032 665.364h-212.004v-162.664h212.004v162.664zM356.032 462.7h-212.004v-142.662h212.004v142.662zM628.032 848.026h-232v-142.662h232v142.662zM628.032 665.364h-232v-162.664h232v162.664zM628.032 462.7h-232v-142.662h232v142.662zM880.036 848.026h-212.004v-142.662h212.004v142.662zM880.036 665.364h-212.004v-162.664h212.004v162.664zM880.036 462.7h-212.004v-142.662h212.004v142.662z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      calendar
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M925.164 208.372c-1.694-0.218-3.408-0.372-5.162-0.372h-471.968v-39.962c0-20.344-15.192-37.096-34.836-39.63-1.696-0.218-3.41-0.374-5.164-0.374h-176.004c-1.754 0-3.468 0.152-5.164 0.374-19.644 2.538-34.836 19.29-34.836 39.626v39.966h-88.032c-1.754 0-3.468 0.152-5.162 0.372-19.646 2.536-34.838 19.29-34.838 39.628v528c0 22.094 17.91 40 40 40h816.004c13.808 0 25.98-6.996 33.168-17.636 0.102-0.148 0.184-0.308 0.282-0.46 0.612-0.922 1.2-1.86 1.722-2.836 0.046-0.082 0.080-0.172 0.124-0.254 2.994-5.61 4.704-12.008 4.704-18.808v-528.004c-0-20.342-15.192-37.096-34.838-39.63zM880.002 736h-736.004v-448h736.004v448zM512 402.522c60.368 0 109.478 49.112 109.478 109.478s-49.112 109.478-109.478 109.478-109.478-49.112-109.478-109.478 49.11-109.478 109.478-109.478zM512 322.522c-104.644 0-189.478 84.832-189.478 189.478 0 104.644 84.834 189.478 189.478 189.478 104.646 0 189.478-84.834 189.478-189.478 0-104.646-84.832-189.478-189.478-189.478v0z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      camera
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M925.224 256.37c-1.694-0.216-3.408-0.37-5.162-0.37h-816c-1.754 0-3.468 0.152-5.162 0.37-19.646 2.538-34.838 19.292-34.838 39.63v624c0 22.094 17.91 40 40 40h816c13.808 0 25.98-6.996 33.168-17.636 0.102-0.148 0.184-0.308 0.282-0.458 0.612-0.924 1.2-1.862 1.722-2.838 0.046-0.082 0.080-0.172 0.124-0.254 2.994-5.61 4.704-12.008 4.704-18.808v-624.004c0-20.342-15.19-37.096-34.838-39.632zM144.062 880v-544h736v544h-736zM896.11 180c0 11.044-8.954 20-20 20h-728.032c-11.046 0-20-8.956-20-20v0c0-11.046 8.954-20 20-20h728.032c11.046 0 20 8.954 20 20v0zM832.094 84c0 11.044-8.954 20-20 20h-600c-11.046 0-20-8.956-20-20v0c0-11.046 8.954-20 20-20h600c11.046 0 20 8.954 20 20v0z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      category
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M832.032 384.032c0-176.728-143.266-320-320-320s-320 143.272-320 320c0 104.662 50.25 197.584 127.938 255.966v311.5c0 16.174 9.74 30.756 24.682 36.952 4.954 2.052 10.152 3.050 15.31 3.050 10.402 0 20.626-4.060 28.276-11.702l123.726-123.58 123.772 123.332c11.452 11.412 28.644 14.804 43.574 8.608 14.93-6.2 24.66-20.776 24.66-36.942v-311.124c77.756-58.376 128.062-151.342 128.062-256.060zM272.032 384.032c0-64.106 24.964-124.374 70.292-169.706 45.33-45.33 105.6-70.294 169.708-70.294s124.376 24.964 169.708 70.294c45.33 45.332 70.292 105.6 70.292 169.706s-24.964 124.376-70.292 169.704c-45.33 45.33-105.6 70.294-169.708 70.294s-124.376-24.964-169.708-70.294c-45.328-45.328-70.292-105.598-70.292-169.704zM623.968 854.89l-83.804-83.508c-15.622-15.564-40.898-15.552-56.502 0.034l-83.694 83.594v-171.17c34.878 13.042 72.632 20.192 112.062 20.192 39.382 0 77.094-7.13 111.938-20.142v171z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      certificate
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M948.598 199.75c-15.622-15.618-40.95-15.618-56.57 0l-535.644 535.644-224.060-224.062c-15.624-15.624-40.954-15.62-56.57 0-15.624 15.62-15.624 40.948 0 56.568l251.574 251.574c0.252 0.266 0.472 0.55 0.734 0.812 7.82 7.82 18.072 11.724 28.322 11.714 10.25 0.010 20.502-3.894 28.322-11.714 0.248-0.248 0.456-0.518 0.698-0.77l563.196-563.202c15.618-15.618 15.618-40.94-0.002-56.564z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      check
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M511.976 833c-10.236 0-20.47-3.904-28.282-11.712l-471.934-471.874c-15.624-15.62-15.624-40.946-0.006-56.57 15.622-15.622 40.948-15.624 56.568-0.004l443.652 443.598 443.61-443.556c15.624-15.618 40.952-15.616 56.568 0.004 15.62 15.624 15.618 40.95-0.006 56.57l-471.89 471.832c-7.808 7.808-18.044 11.712-28.28 11.712z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      chevrondown
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M511.714 956.324c-92.92 0-168.518-75.594-168.518-168.514v-334.082l131.54 75.954v215.936c0 13.172 7.082 25.446 18.48 32.030l139.33 80.43c8.33 4.814 17.014 9.168 25.872 12.966-29.646 52.72-85.44 85.28-146.704 85.28zM753.584 816.61c-29.36 0-58.43-7.812-84.064-22.59l-83.828-48.404 289.354-167.028c8.3-4.802 16.402-10.152 24.132-15.936 30.858 52.030 31.182 116.622 0.568 169.664-30.034 51.994-86.040 84.294-146.162 84.294zM270.334 816.576c-60.084 0-116.064-32.278-146.102-84.238-22.494-39.012-28.466-84.426-16.814-127.866 11.68-43.512 39.564-79.858 78.522-102.334l83.806-48.398 0.018 334.018c0 9.624 0.57 19.294 1.69 28.814-0.374 0.002-0.748 0.004-1.12 0.004zM548.73 529.73l186.996-107.966c11.416-6.588 18.506-18.864 18.506-32.040v-160.856c0.012-9.456-0.56-19.116-1.706-28.778 0.364-0.002 0.732-0.004 1.096-0.004 60.114 0 116.104 32.296 146.124 84.29 46.436 80.486 18.75 183.742-61.714 230.176l-289.302 167.040v-151.862zM325.248 357.624c-5.632-3.242-12.030-4.954-18.504-4.954-6.428 0-12.804 1.708-18.44 4.936l-139.344 80.452c-8.348 4.802-16.462 10.142-24.172 15.912-30.824-52-31.14-116.59-0.546-169.664 30.048-52 86.050-84.306 146.148-84.306 29.326 0 58.394 7.822 84.064 22.624l289.3 167.054-131.482 75.91-187.024-107.964zM390.964 158.644c-8.334-4.826-17.036-9.192-25.92-13.004 29.634-52.742 85.418-85.316 146.67-85.316 92.92 0 168.514 75.6 168.514 168.522v96.81l-289.264-167.012z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      chroma
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M960 512c0 247.424-200.576 448-448 448s-448-200.576-448-448c0-247.424 200.576-448 448-448s448 200.576 448 448z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      circle
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M960 513c0-247.424-200.574-448-448-448-247.422 0-448 200.576-448 448s200.578 448 448 448c247.426 0 448-200.576 448-448zM251.786 773.216c-69.504-69.508-107.786-161.918-107.786-260.216 0-98.294 38.282-190.708 107.786-260.216 69.506-69.504 161.918-107.784 260.214-107.784s190.708 38.28 260.214 107.784c69.508 69.508 107.786 161.922 107.786 260.216 0 98.296-38.278 190.708-107.786 260.214-69.506 69.508-161.922 107.786-260.214 107.786-98.296 0-190.708-38.278-260.214-107.784z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      circlehollow
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M693.022 637.866c15.62 15.622 15.618 40.95 0 56.566-15.622 15.622-40.946 15.624-56.562 0.002l-124.46-124.458-124.456 124.458c-15.622 15.622-40.944 15.622-56.562 0-15.624-15.622-15.624-40.946-0.002-56.568l124.454-124.456-124.452-124.45c-15.622-15.622-15.622-40.946 0-56.564 15.62-15.624 40.944-15.624 56.568-0.002l124.45 124.45 124.454-124.452c15.622-15.62 40.95-15.62 56.566 0 15.622 15.62 15.624 40.944 0.002 56.56l-124.456 124.458 124.456 124.456zM828.784 828.784c-174.956 174.956-458.614 174.956-633.566 0-174.958-174.956-174.958-458.614 0-633.566 174.954-174.958 458.612-174.958 633.566 0 174.954 174.952 174.954 458.612 0 633.566zM880 511.998c-0.002-98.296-38.28-190.708-107.786-260.212s-161.92-107.786-260.214-107.788c-98.296 0.002-190.71 38.282-260.216 107.786-69.506 69.508-107.782 161.918-107.786 260.214 0.002 98.296 38.282 190.71 107.786 260.216 69.508 69.506 161.918 107.784 260.216 107.784 98.296 0 190.708-38.278 260.214-107.784s107.784-161.92 107.786-260.216z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      close
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M586.7 512L936 861.4a52.8 52.8 0 0 1-74.6 74.7L512 586.7 162.6 936A52.8 52.8 0 0 1 88 861.4L437.3 512 88 162.6A52.8 52.8 0 1 1 162.6 88L512 437.3 861.4 88a52.8 52.8 0 1 1 74.7 74.7L586.7 512z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      closeAlt
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M396.458 151.486l27.768 27.768c23.28 23.29 54.262 36.116 87.242 36.116 0.318 0 0.636 0 0.958-0.004 0.292 0.002 0.58 0.004 0.872 0.004 32.99 0 63.976-12.83 87.22-36.098l27.61-27.604c19.584 6.294 38.582 14.192 56.892 23.642v39.976c0 32.878 13.406 64.804 36.842 87.888 23.072 23.384 54.966 36.762 87.804 36.762l39.442 0.002c9.168 17.906 16.852 36.462 23.014 55.574l-27.676 27.676c-23.222 23.224-36.318 55.242-36.094 88.096-0.248 32.884 12.844 64.934 36.094 88.19l27.928 27.928c-6.298 19.704-14.212 38.812-23.704 57.23l-38.984 0.002c-0.008 0-0.012 0-0.022 0-32.84 0-64.74 13.38-87.814 36.776-23.43 23.080-36.83 55-36.83 87.876v39.116c-18.38 9.486-37.456 17.406-57.122 23.714l-27.348-27.346c-23.278-23.3-54.264-36.13-87.254-36.13-0.292 0-0.58 0.002-0.872 0.004-0.318-0.004-0.636-0.004-0.958-0.004-32.978 0-63.962 12.826-87.228 36.102l-27.552 27.554c-19.874-6.338-39.144-14.32-57.708-23.902l-0.002-38.13c0.012-32.854-13.368-64.764-36.772-87.846-23.082-23.43-55.004-36.834-87.878-36.834h-38.506c-9.776-18.846-17.898-38.42-24.328-58.624l27.49-27.49c23.246-23.248 36.338-55.296 36.088-88.182 0.224-32.854-12.872-64.872-36.092-88.094l-27.23-27.232c6.29-19.612 14.182-38.628 23.636-56.966h38.942c32.878 0 64.802-13.402 87.884-36.838 23.398-23.086 36.778-54.994 36.766-87.81l0.002-39.028c18.492-9.546 37.688-17.506 57.48-23.834zM421.486 60.208c-59.932 11.946-115.658 35.516-164.752 68.268l-0.004 85.866c0.004 11.676-4.886 22.194-12.706 29.68-7.486 7.83-18.012 12.728-29.702 12.728h-85.806c-32.624 48.946-56.132 104.484-68.088 164.204l60.39 60.394c8.256 8.256 12.234 19.15 11.998 29.968 0.246 10.83-3.734 21.738-11.998 30.004l-60.562 60.56c11.97 60.402 35.74 116.552 68.826 165.948h85.24c11.69 0 22.214 4.9 29.702 12.73 7.818 7.482 12.708 17.998 12.706 29.676l0.004 85.004c49.162 32.796 104.976 56.386 165.006 68.316l60.654-60.656c8.028-8.032 18.55-12.014 29.072-12.014 0.312 0 0.62 0.004 0.93 0.010 0.298-0.006 0.602-0.010 0.9-0.010 10.526 0 21.046 3.982 29.070 12.014l60.542 60.534c59.78-11.968 115.376-35.512 164.356-68.19v-85.956c0-11.69 4.9-22.214 12.73-29.702 7.486-7.818 18.002-12.708 29.678-12.706l85.876-0.004c32.668-49.032 56.182-104.674 68.104-164.504l-61.050-61.052c-8.266-8.266-12.244-19.174-12-30.004-0.236-10.818 3.742-21.712 12-29.968l60.882-60.888c-11.91-59.144-35.158-114.178-67.37-162.758l-86.444-0.004c-0.004 0-0.008 0-0.008 0-11.674 0-22.188-4.89-29.67-12.708-7.83-7.486-12.73-18.012-12.73-29.702v-86.816c-48.912-32.632-104.418-56.158-164.106-68.14l-60.792 60.784c-8.024 8.032-18.546 12.014-29.070 12.014-0.3 0-0.602-0.004-0.9-0.012-0.308 0.008-0.618 0.012-0.93 0.012-10.522 0-21.044-3.982-29.072-12.014l-60.906-60.906zM511.856 314.472c-109.014 0-197.386 88.372-197.386 197.384 0 109.010 88.374 197.382 197.386 197.382v0.134c0.746 0 1.492 0.012 2.24 0.004 14.806-0.16 29.214-1.942 43.056-5.182 1.022-0.238 1.932-0.496 2.794-0.762 17.328-4.988 29.94-21.012 29.738-39.916-0.242-22.71-18.846-40.926-41.556-40.686-2.996 0.032-5.902 0.402-8.708 1.042-0.090 0.016-0.178 0-0.266 0.022-8.18 1.99-16.708 3.096-25.472 3.224-0.586-0.074-1.19-0.124-1.826-0.124-63.486 0-115.142-51.65-115.142-115.138 0-63.49 51.656-115.142 115.142-115.142 63.488 0 115.14 51.652 115.14 115.142 0 8.924-1.028 17.616-2.964 25.958-0.020 0.090-0.008 0.178-0.020 0.268-0.61 2.812-0.948 5.724-0.948 8.72 0 22.71 18.408 41.122 41.122 41.122 18.906 0 34.792-12.778 39.596-30.158 0.262-0.866 0.508-1.78 0.736-2.804 3.092-13.876 4.722-28.3 4.722-43.106 0-109.012-88.372-197.384-197.384-197.384z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      cog
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M288 378.668h448c22.094 0 40 17.906 40 40 0 22.090-17.906 40-40 40h-448c-22.090 0-40-17.91-40-40s17.91-40 40-40zM736 565.334h-448c-22.090 0-40 17.91-40 40 0 22.094 17.91 40 40 40h448c22.094 0 40-17.906 40-40 0-22.090-17.906-40-40-40zM960 232.004v560c0 6.804-1.714 13.196-4.704 18.812-0.042 0.082-0.078 0.172-0.124 0.254-0.524 0.976-1.11 1.914-1.722 2.836-0.098 0.152-0.18 0.314-0.282 0.458-7.188 10.64-19.36 17.636-33.168 17.636h-519.766l-114.292 114.286c-8.036 8.046-18.644 11.91-29.18 11.67-0.292 0.008-0.582 0.046-0.876 0.046-22.090 0-40-17.91-40-40v-86.004h-111.886c-22.090 0-40-17.906-40-40v0-560c0-20.34 15.192-37.094 34.84-39.632 1.692-0.214 3.406-0.368 5.16-0.368h816c1.754 0 3.468 0.154 5.164 0.368 19.644 2.542 34.836 19.296 34.836 39.638zM880 272h-736v480h736v-480z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      comment
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M984.032 472h-186.808c-19.474-140.12-139.74-248-285.222-248s-265.748 107.88-285.222 248h-186.746c-22.092 0-40 17.912-40 40.002 0 22.092 17.91 40 40 40h186.746c19.476 140.122 139.74 247.998 285.222 247.998s265.746-107.876 285.222-247.998h186.808c22.092 0 40-17.91 40-40s-17.908-40.002-40-40.002zM512 720c-114.692 0-208-93.308-208-208s93.308-208 208-208 208 93.308 208 208-93.308 208-208 208z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      commit
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M960 512c0-247.424-200.574-448-448-448-247.422 0-448 200.576-448 448s200.578 448 448 448c247.426 0 448-200.576 448-448zM251.786 772.214c-69.504-69.508-107.786-161.918-107.786-260.214 0-98.294 38.282-190.708 107.786-260.216 69.508-69.504 161.918-107.784 260.214-107.784s190.708 38.28 260.214 107.784c69.508 69.508 107.786 161.922 107.786 260.216 0 98.296-38.278 190.708-107.786 260.214s-161.922 107.786-260.214 107.786c-98.296 0-190.708-38.28-260.214-107.786zM565.742 565.74c-0.93 0.93-1.95 1.768-3.050 2.498l-237.586 158.392c-7.934 5.29-18.496 4.242-25.238-2.498-6.738-6.742-7.786-17.304-2.496-25.236l158.39-237.588c1.464-2.2 3.348-4.082 5.546-5.546l237.586-158.392c7.934-5.29 18.496-4.242 25.238 2.498 6.742 6.742 7.79 17.304 2.5 25.238l-158.394 237.586c-0.73 1.1-1.566 2.118-2.496 3.048zM386.122 637.878l151.054-100.704-50.352-50.352-100.702 151.056z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      compass
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M171 469h298V171H246c-42 0-75 33-75 75v223zm0 86v223c0 42 33 75 75 75h223V555H171zm682-86V246c0-42-33-75-75-75H555v298h298zm0 86H555v298h223c42 0 75-33 75-75V555zM256 85h512c94 0 171 77 171 171v512c0 94-77 171-171 171H256c-94 0-171-77-171-171V256c0-94 77-171 171-171z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      component
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M960.132 210.186c0-0.444-0.050-0.874-0.066-1.312-0.024-0.684-0.044-1.366-0.104-2.046-0.060-0.74-0.158-1.468-0.26-2.198-0.080-0.564-0.156-1.128-0.258-1.692-0.146-0.792-0.328-1.566-0.518-2.34-0.124-0.508-0.244-1.014-0.39-1.518-0.224-0.784-0.488-1.548-0.76-2.312-0.176-0.49-0.344-0.98-0.538-1.466-0.302-0.754-0.642-1.486-0.988-2.216-0.224-0.472-0.436-0.946-0.68-1.41-0.398-0.762-0.838-1.496-1.284-2.228-0.242-0.396-0.466-0.798-0.722-1.19-0.608-0.924-1.262-1.81-1.942-2.678-0.132-0.168-0.248-0.346-0.382-0.512-0.98-1.212-2.028-2.364-3.14-3.454l-104.020-104.9c-3.714-3.714-7.988-6.518-12.542-8.464-0.088-0.040-0.174-0.084-0.262-0.122-0.994-0.418-2.006-0.774-3.024-1.108-0.242-0.080-0.474-0.176-0.72-0.252-0.942-0.288-1.894-0.516-2.854-0.732-0.334-0.076-0.658-0.176-0.996-0.244-0.998-0.2-2.004-0.336-3.010-0.458-0.306-0.038-0.606-0.1-0.912-0.13-1.322-0.13-2.65-0.204-3.976-0.204h-391.784c-1.754 0-3.468 0.152-5.162 0.372-19.646 2.538-34.838 19.29-34.838 39.628v145.516h-279.874c-1.754 0-3.468 0.152-5.162 0.372-19.646 2.538-34.838 19.29-34.838 39.628v628.28c0 22.094 17.91 40 40 40h496.118c13.808 0 25.98-6.996 33.168-17.636 0.102-0.148 2.084-3.466 2.128-3.548 2.992-5.612 4.704-12.010 4.704-18.808 0 0 0 0 0-0.004v-145.518h279.874c13.808 0 25.98-6.996 33.168-17.636 0.102-0.148 2.084-3.466 2.128-3.548 2.992-5.612 4.704-12.010 4.704-18.808 0 0 0 0 0-0.004v-521.828c0.008-0.23-0.016-0.458-0.014-0.688 0.002-0.202 0.028-0.39 0.028-0.584zM144.124 878.792v-548.278h311.752v65.186c0 22.090 17.91 40 40 40h64.366v443.092h-416.118zM640.244 693.278v-296.31c0.006-0.23-0.018-0.458-0.014-0.688 0.004-0.196 0.030-0.382 0.030-0.578 0-0.444-0.052-0.874-0.066-1.312-0.024-0.684-0.044-1.366-0.104-2.046-0.062-0.74-0.16-1.468-0.262-2.198-0.078-0.564-0.152-1.128-0.258-1.692-0.144-0.792-0.324-1.566-0.516-2.34-0.124-0.508-0.246-1.014-0.39-1.518-0.226-0.784-0.488-1.548-0.76-2.312-0.174-0.49-0.342-0.98-0.538-1.466-0.302-0.754-0.64-1.486-0.988-2.216-0.222-0.472-0.438-0.946-0.68-1.41-0.398-0.762-0.838-1.496-1.284-2.228-0.242-0.396-0.466-0.798-0.724-1.19-0.606-0.924-1.262-1.81-1.942-2.678-0.13-0.168-0.246-0.346-0.382-0.512-0.978-1.212-2.028-2.364-3.138-3.454l-104.020-104.9c-3.714-3.714-7.988-6.518-12.542-8.464-0.088-0.040-0.172-0.084-0.262-0.122-0.994-0.418-2.004-0.774-3.024-1.108-0.242-0.080-0.476-0.176-0.72-0.252-0.942-0.288-1.896-0.516-2.854-0.732-0.334-0.076-0.658-0.176-0.996-0.244-0.998-0.2-2.004-0.336-3.012-0.458-0.304-0.038-0.602-0.1-0.91-0.13-1.322-0.13-2.648-0.204-3.976-0.204h-31.916v-105.516h311.752v65.186c0 22.090 17.91 40 40 40h64.366v443.092h-239.87z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      copy
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M392.016 672.016h240.032c22.092 0 40-17.908 40-40v-240.032c0-22.092-17.908-40-40-40h-240.032c-22.092 0-40 17.908-40 40v240.032c0 22.092 17.908 40 40 40zM432.016 431.984h160.032v160.032h-160.032v-160.032zM864.032 424h71.98c22.094 0 40.004-17.906 40.004-40 0-22.092-17.906-40-40-40h-71.984v-143.968c0-22.092-17.908-40-40-40h-144v-72.012c0-22.094-17.906-40.004-40-40.004-22.090 0-40 17.906-40 40v72.016h-176v-72.012c0-22.094-17.906-40.004-40-40.004-22.090 0-40 17.906-40 40v72.016h-144c-22.092 0-40 17.908-40 40v143.968h-71.984c-22.094 0-40 17.908-40 40s17.91 40 40 40h71.984v176h-71.984c-22.094 0-40 17.908-40 40s17.91 40 40 40h71.984v144.030c0 22.092 17.908 40 40 40h144v71.954c0 22.094 17.906 40 40 40s40-17.91 40-40v-71.954h176v71.954c0 22.094 17.906 40 40 40s40-17.91 40-40v-71.954h144c22.092 0 40-17.908 40-40v-144.030h71.98c22.094 0 40.004-17.906 40.004-40 0-22.092-17.906-40-40-40h-71.984v-176zM784.032 784.032h-143.692c-0.104 0-0.204-0.016-0.308-0.016s-0.206 0.016-0.308 0.016h-127.382c-0.104 0-0.204-0.016-0.308-0.016s-0.206 0.016-0.308 0.016h-127.382c-0.104 0-0.204-0.016-0.308-0.016s-0.206 0.016-0.308 0.016h-143.696v-544h544v544z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      cpu
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M376.188 672.062h-112.124c-22.092 0-40-17.908-40-40s17.908-40 40-40h112.124c22.092 0 40 17.908 40 40s-17.908 40-40 40zM960 232.002v560c0 6.8-1.708 13.2-4.704 18.81-0.044 0.082-0.078 0.172-0.124 0.254-0.524 0.974-1.112 1.914-1.722 2.836-0.098 0.15-0.18 0.31-0.282 0.458-7.188 10.64-19.36 17.638-33.168 17.638h-816c-22.090 0-40-17.908-40-40v-559.998c0-20.34 15.192-37.092 34.838-39.628 1.694-0.218 3.408-0.372 5.162-0.372h816c1.754 0 3.468 0.152 5.162 0.372 19.646 2.536 34.838 19.288 34.838 39.63zM144 272.002v80.030h736v-80.030h-736zM880 751.998v-239.966h-736v239.966h736z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      credit
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M1013.286 955.716l-443.72-443.716 443.718-443.718c15.622-15.622 15.62-40.948-0.004-56.566-15.618-15.622-40.942-15.622-56.562 0l-443.716 443.718-443.72-443.718c-15.62-15.624-40.946-15.622-56.566 0-15.622 15.62-15.622 40.944 0 56.566l443.722 443.718-443.722 443.722c-15.622 15.618-15.62 40.942 0 56.56s40.948 15.622 56.566 0l443.72-443.718 443.722 443.718c15.618 15.624 40.942 15.622 56.56 0 15.62-15.618 15.622-40.944 0.002-56.566z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      cross
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M567.594 674.956c-17.674 30.61-56.816 41.098-87.426 23.426-30.61-17.676-41.1-56.816-23.426-87.426 10.134-17.554 27.33-28.472 45.928-31.278l146.974-254.57c11.042-19.132 35.506-25.688 54.64-14.64 19.13 11.046 25.688 35.508 14.64 54.64l-147.084 254.75c6.736 17.434 5.826 37.648-4.246 55.098zM512.002 209.26c-98.296 0-190.708 38.28-260.214 107.786s-107.786 161.92-107.786 260.214c0 81.428 26.252 158.786 74.768 222.452 88.404-30.49 188.406-46.448 292.732-46.448 104.662 0 204.926 16.046 293.524 46.716 48.65-63.712 74.976-141.164 74.976-222.72 0-98.294-38.28-190.708-107.786-260.214s-161.918-107.786-260.214-107.786zM512.002 129.26c247.424 0 448 200.578 448 448 0 124.132-50.494 236.468-132.054 317.602-87.096-38.574-196.984-61.598-316.446-61.598-119.146 0-228.772 22.902-315.758 61.296-81.376-81.114-131.742-193.324-131.742-317.3 0-247.422 200.576-448 448-448v0z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      dashboard
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M895.95 221.364c-3.414-87.32-173.972-157.672-383.918-157.672s-380.504 70.352-383.918 157.672h-0.082v578.328c0 88.552 171.918 160.338 384 160.338s384-71.786 384-160.338v-578.328h-0.082zM798.412 430.578c-15.6 11.386-37.69 22.346-63.882 31.696-60.984 21.77-140.002 33.758-222.498 33.758s-161.514-11.988-222.498-33.758c-26.192-9.348-48.282-20.308-63.88-31.696-8.706-6.352-13.646-11.608-16.122-14.874v-92.9c70.29 37.478 179.654 61.566 302.5 61.566s232.21-24.088 302.5-61.566v92.9c-2.476 3.266-7.416 8.522-16.12 14.874zM814.532 514.464v93.24c-2.474 3.266-7.416 8.522-16.12 14.874-15.6 11.386-37.69 22.346-63.882 31.696-60.984 21.77-140.002 33.758-222.498 33.758s-161.514-11.988-222.498-33.758c-26.192-9.348-48.282-20.308-63.88-31.696-8.706-6.352-13.646-11.608-16.122-14.874v-93.24c70.29 37.48 179.654 61.566 302.5 61.566s232.21-24.086 302.5-61.566zM225.652 209.146c15.6-11.386 37.69-22.346 63.88-31.696 60.984-21.77 140.002-33.758 222.498-33.758s161.514 11.988 222.498 33.758c26.192 9.348 48.282 20.308 63.882 31.696 8.704 6.352 13.646 11.608 16.12 14.874v0.026c-2.474 3.266-7.416 8.522-16.12 14.874-15.6 11.386-37.69 22.346-63.882 31.696-60.984 21.77-140.002 33.758-222.498 33.758s-161.514-11.988-222.498-33.758c-26.192-9.348-48.282-20.308-63.88-31.696-8.706-6.352-13.646-11.608-16.122-14.874v-0.026c2.476-3.268 7.418-8.524 16.122-14.874zM798.412 814.578c-15.6 11.386-37.69 22.346-63.882 31.696-60.984 21.77-140.002 33.758-222.498 33.758s-161.514-11.988-222.498-33.758c-26.192-9.348-48.282-20.308-63.88-31.696-8.714-6.36-13.66-11.62-16.13-14.886h0.010v-93.228c70.29 37.48 179.654 61.566 302.5 61.566s232.21-24.086 302.5-61.566v93.228h0.010c-2.474 3.266-7.42 8.526-16.132 14.886z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      database
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M828.786 195.216c-174.958-174.956-458.612-174.958-633.568 0-174.954 174.954-174.956 458.612 0 633.566 174.954 174.956 458.614 174.956 633.568 0 174.954-174.954 174.952-458.612 0-633.566zM251.786 251.786c69.506-69.506 161.916-107.784 260.212-107.788 84.838 0 165.278 28.538 230.402 81.028l-517.372 517.374c-52.492-65.126-81.026-145.568-81.030-230.404 0.004-98.294 38.282-190.704 107.788-260.21zM772.214 772.214c-69.506 69.506-161.918 107.784-260.214 107.786-84.836-0.004-165.276-28.538-230.402-81.030l517.376-517.372c52.492 65.126 81.028 145.564 81.028 230.402-0.004 98.296-38.284 190.71-107.788 260.214z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      delete
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M371 147c-14 0-126 3-245 91 0 0-126 227-126 507 0 0 74 126 268 132l58-71c-111-34-153-103-153-103l24 15 4 2 8 4a668 668 0 0 0 420 68 629 629 0 0 0 228-89s-44 71-159 103l58 71c194-7 268-133 268-132 0-280-126-507-126-507-126-94-246-91-246-91l-12 14a576 576 0 0 1 218 110 729 729 0 0 0-441-81l-15 1c-31 4-105 14-199 56-33 14-52 24-52 24s72-69 230-114l-9-10h-1zm-23 323c50 0 91 43 90 97 0 53-40 96-90 96-49 0-89-43-89-96 0-54 39-97 89-97zm321 0c49 0 89 43 89 97 0 53-39 96-89 96s-90-43-90-96c0-54 40-97 90-97z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      discord
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M919.938 128h-816.008c-1.38 0-2.746 0.070-4.090 0.208-20.168 2.046-35.91 19.080-35.91 39.792v688c0 22.090 17.91 40 40 40h816.008c22.098 0 40-17.91 40-40v-688c0-22.094-17.906-40-40-40zM395.934 470.67h232v162.664h-232v-162.664zM355.934 633.334h-212.004v-162.664h212.004v162.664zM395.934 430.67v-142.662h232v142.662h-232zM667.934 470.67h212.004v162.664h-212.004v-162.664zM667.934 430.67v-142.662h212.004v142.662h-212.004zM355.934 288.008v142.662h-212.004v-142.662h212.004zM143.93 673.334h212.004v142.662h-212.004v-142.662zM395.934 673.334h232v142.662h-232v-142.662zM667.934 673.334h212.004v142.662h-212.004v-142.662z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      docchart
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M919.938 128h-816.008c-1.38 0-2.746 0.070-4.090 0.208-20.168 2.046-35.91 19.080-35.91 39.792v688c0 22.090 17.91 40 40 40h816.008c22.098 0 40-17.91 40-40v-688c-0-22.094-17.906-40-40-40zM143.93 288.008h736.008v527.988h-736.008v-527.988zM248 400.004c0-22.090 17.91-40 40-40h448c22.094 0 40 17.906 40 40 0 22.090-17.906 40-40 40h-448c-22.090 0-40-17.91-40-40zM776 552.002c0 22.094-17.906 40-40 40h-448c-22.090 0-40-17.906-40-40 0-22.090 17.91-40 40-40h448c22.094 0 40 17.91 40 40zM776 704c0 22.094-17.906 40-40 40h-448c-22.090 0-40-17.906-40-40 0-22.090 17.91-40 40-40h448c22.094 0 40 17.91 40 40z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      doclist
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M863.98 242.454c0.008-0.23-0.094-3.944-0.152-4.624-0.058-0.688-0.368-2.972-0.496-3.742-0.008-0.058-0.352-1.712-0.54-2.486-0.124-0.508-0.246-1.014-0.39-1.518-0.226-0.784-1.106-3.292-1.296-3.78-0.304-0.754-1.426-3.162-1.668-3.626-0.398-0.762-1.75-3.028-2.008-3.418-0.606-0.924-1.262-1.81-1.942-2.678-0.132-0.168-0.246-0.346-0.382-0.512-0.98-1.212-2.028-2.364-3.14-3.454l-104.020-104.9c-3.714-3.714-7.988-6.518-12.54-8.464-0.090-0.040-3.762-1.404-4.008-1.48-0.942-0.288-1.894-0.516-2.852-0.732-0.336-0.076-0.66-0.176-0.996-0.244-1-0.2-3.618-0.558-3.922-0.59-1.324-0.13-2.652-0.204-3.976-0.204h-519.652c-1.754 0-3.468 0.152-5.164 0.372-19.644 2.54-34.836 19.292-34.836 39.628v752c0 22.094 17.91 40 40 40h624c22.090 0 40-17.906 40-40l-0.020-645.548zM784 848h-544v-672l439.614 0.002v65.186c0 22.090 17.91 40 40 40h64.368l0.018 566.812zM664 336c22.090 0 40 17.908 40 40s-17.91 40-40 40h-304c-22.092 0-40-17.908-40-40s17.908-40 40-40h304zM704 528c0 22.092-17.91 40-40 40h-304c-22.092 0-40-17.908-40-40s17.908-40 40-40h304c22.090 0 40 17.908 40 40zM704 680c0 22.092-17.91 40-40 40h-304c-22.092 0-40-17.908-40-40s17.908-40 40-40h304c22.090 0 40 17.908 40 40z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      document
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M881 513.188c0 98.296-38.28 190.708-107.784 260.214-69.508 69.508-161.922 107.786-260.216 107.786-98.296 0-190.708-38.28-260.214-107.786s-107.786-161.916-107.786-260.214c0-98.294 38.28-190.708 107.786-260.216 69.508-69.504 161.918-107.784 260.214-107.784 98.294 0 190.708 38.28 260.216 107.784 69.504 69.508 107.784 161.922 107.784 260.216zM961 513.188c0-247.424-200.576-448-448-448s-448 200.576-448 448 200.576 448 448 448 448-200.576 448-448v0zM539.672 757.584l125.436-125c15.65-15.594 15.692-40.92 0.1-56.568-15.594-15.648-40.92-15.694-56.568-0.1l-57.204 57.004v-335.67c0-22.092-17.908-40-40-40s-40 17.908-40 40v335.258l-56.368-56.508c-15.602-15.64-40.928-15.672-56.568-0.070-7.834 7.814-11.752 18.066-11.75 28.32 0 10.22 3.892 20.442 11.68 28.25l124.688 125c15.594 15.634 40.91 15.672 56.554 0.084z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      download
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M948.56 263.376c12.704-12.708 15.072-31.836 7.11-46.936-1.84-3.524-4.232-6.832-7.192-9.792-0.286-0.286-0.594-0.528-0.886-0.8l-129.318-128.634c-0.048-0.048-0.088-0.106-0.138-0.154-7.812-7.812-18.050-11.716-28.292-11.714-10.242-0.004-20.484 3.902-28.296 11.714-0.064 0.066-0.12 0.136-0.184 0.204l-636.168 636.168c-5.868 5.134-10.21 11.958-12.298 19.748l-47.606 177.664c-3.7 13.804 0.248 28.534 10.352 38.638 7.602 7.6 17.816 11.714 28.288 11.714 3.452 0 6.93-0.446 10.352-1.364l177.664-47.606c7.296-1.956 13.732-5.904 18.74-11.216l521.486-521.484c1.126-0.904 2.222-1.87 3.268-2.914 1.042-1.044 2.006-2.138 2.91-3.264l107.75-107.748c0.836-0.71 1.668-1.432 2.458-2.224zM806.9 291.66l-73.592-73.202 56.61-56.61 73.594 73.2-56.612 56.612zM281.566 816.996l-73.4-73.4 468.572-468.568 73.594 73.202-468.766 468.766zM160.496 864.628l11.742-43.822 32.080 32.080-43.822 11.742z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      edit
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M184 393c66.274 0 120 53.73 120 120s-53.726 120-120 120c-66.286 0-120-53.73-120-120s53.714-120 120-120zM512 393c66.272 0 120 53.73 120 120s-53.728 120-120 120c-66.286 0-120-53.73-120-120s53.714-120 120-120zM840 393c66.272 0 120 53.73 120 120s-53.728 120-120 120c-66.286 0-120-53.73-120-120s53.714-120 120-120z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      ellipsis
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M960.032 268.004c0.748-10.040-2.246-20.364-9.226-28.684-5.984-7.132-13.938-11.62-22.394-13.394-0.13-0.026-0.268-0.066-0.396-0.092-1.082-0.22-2.172-0.376-3.272-0.5-0.25-0.032-0.492-0.080-0.742-0.102-1.028-0.096-2.052-0.136-3.090-0.156-0.292-0.002-0.582-0.042-0.876-0.042h-816.008c-21.416 0-38.848 16.844-39.898 38-0.034 0.628-0.092 1.256-0.096 1.89 0 0.034-0.006 0.074-0.006 0.114 0 0.050 0.008 0.102 0.008 0.152v495.692c0 0.054-0.008 0.106-0.008 0.156 0 22.090 17.91 40 40 40h816.004c13.808 0 25.98-6.996 33.17-17.636 0.1-0.148 0.182-0.312 0.28-0.458 0.606-0.93 1.196-1.868 1.722-2.84 0.046-0.082 0.080-0.172 0.124-0.258 2.992-5.604 4.704-12.008 4.704-18.804v0 0-493.038zM144.032 350.156l339.946 281.188c6.568 6.434 14.918 10.168 23.564 11.122 0.16 0.024 0.32 0.050 0.48 0.066 0.838 0.082 1.676 0.114 2.518 0.14 0.496 0.020 0.994 0.058 1.492 0.058s0.996-0.042 1.492-0.058c0.842-0.028 1.68-0.058 2.518-0.14 0.16-0.016 0.32-0.042 0.48-0.066 8.646-0.958 16.996-4.688 23.564-11.122l339.946-281.206v370.894h-736v-370.876zM215.066 305.030h593.91l-296.946 245.422-296.964-245.422z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      email
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M959.688 920.068l0.31-176c0.040-22.094-17.84-40.032-39.93-40.070-22.092-0.040-40.032 17.838-40.070 39.93l-0.142 79.672-235.734-235.732c-15.622-15.622-40.948-15.622-56.57 0s-15.622 40.948 0 56.568l235.442 235.442-78.946-0.1c-22.092-0.028-40.022 17.86-40.050 39.952-0.014 11.064 4.464 21.084 11.714 28.334 7.228 7.224 17.208 11.702 28.236 11.714l175.688 0.22c22.086 0.028 40.014-17.846 40.052-39.93zM920.178 64.228l-176-0.308c-22.094-0.040-40.032 17.84-40.070 39.93-0.040 22.092 17.838 40.032 39.93 40.070l79.672 0.14-235.732 235.734c-15.622 15.622-15.622 40.948 0 56.568s40.948 15.622 56.568 0l235.442-235.442-0.1 78.946c-0.028 22.092 17.86 40.022 39.952 40.050 11.064 0.014 21.084-4.464 28.334-11.714 7.224-7.228 11.702-17.208 11.714-28.236l0.22-175.688c0.026-22.082-17.846-40.010-39.93-40.050zM64.236 103.742l-0.308 176c-0.040 22.094 17.84 40.032 39.93 40.070 22.092 0.040 40.032-17.84 40.070-39.93l0.14-79.672 235.734 235.73c15.622 15.622 40.948 15.622 56.568 0s15.622-40.946 0-56.566l-235.442-235.442 78.946 0.098c22.092 0.028 40.022-17.86 40.050-39.95 0.014-11.066-4.464-21.086-11.714-28.336-7.228-7.222-17.208-11.7-28.236-11.714l-175.688-0.218c-22.084-0.026-40.012 17.844-40.050 39.93zM103.748 959.766l176 0.308c22.094 0.040 40.032-17.84 40.070-39.93 0.040-22.092-17.84-40.032-39.93-40.070l-79.672-0.14 235.73-235.734c15.622-15.622 15.622-40.948 0-56.568s-40.946-15.622-56.566 0l-235.442 235.442 0.098-78.946c0.028-22.092-17.86-40.022-39.95-40.050-11.066-0.014-21.086 4.464-28.336 11.714-7.222 7.228-11.7 17.208-11.714 28.236l-0.218 175.688c-0.026 22.082 17.844 40.010 39.93 40.050z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      expand
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M512.008 959.964c-10.236 0-20.47-3.904-28.282-11.712l-239.898-239.838c-15.624-15.62-15.624-40.946-0.006-56.57 15.622-15.622 40.948-15.624 56.568-0.004l211.618 211.562 211.712-211.658c15.624-15.618 40.952-15.616 56.568 0.004 15.62 15.624 15.618 40.95-0.006 56.57l-239.994 239.934c-7.808 7.808-18.044 11.712-28.28 11.712zM483.824 75.744l-239.994 239.934c-15.624 15.62-15.624 40.948-0.006 56.57s40.944 15.622 56.568 0.004l211.712-211.658 211.618 211.562c15.622 15.62 40.948 15.616 56.568-0.006 15.62-15.624 15.618-40.95-0.006-56.57l-239.898-239.836c-7.81-7.81-18.044-11.714-28.282-11.714s-20.47 3.906-28.28 11.714z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      expandalt
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M1008.714 490.522c-9.002-12.594-223.276-308.808-496.684-308.808-273.444 0-487.682 296.214-496.684 308.808l-15.316 21.49 15.316 21.466c9.002 12.618 223.24 308.808 496.684 308.808 273.408 0 487.682-296.19 496.684-308.808l15.316-21.466-15.316-21.49zM807.68 631.688c-46 39.142-92.558 70.064-138.382 91.904-53.874 25.676-106.786 38.694-157.266 38.694-50.49 0-103.406-13.018-157.282-38.696-45.826-21.838-92.382-52.758-138.378-91.902-53.708-45.706-94.302-92.122-116.61-119.672 22.36-27.602 63.028-74.094 116.612-119.696 45.996-39.146 92.554-70.068 138.378-91.908 53.876-25.678 106.792-38.698 157.28-38.698 50.48 0 103.39 13.020 157.264 38.696 45.824 21.842 92.382 52.764 138.382 91.91 53.602 45.614 94.264 92.098 116.624 119.696-22.306 27.544-62.898 73.954-116.622 119.672zM692.032 512.036c0 99.41-80.588 180-180 180s-180-80.59-180-180c0-99.406 80.588-179.998 180-179.998s180 80.59 180 179.998z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      eye
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M75.744 948.314c-15.62-15.62-15.62-40.948 0-56.564l816-816c15.626-15.624 40.95-15.624 56.57 0 15.624 15.62 15.626 40.946 0.004 56.57l-816 815.994c-15.62 15.62-40.95 15.62-56.572 0zM332.032 512.034c0 20.104 3.296 39.434 9.376 57.484l228.104-228.106c-18.050-6.080-37.38-9.376-57.48-9.376-99.412-0.004-180 80.588-180 179.996zM692.032 512.034c0-20.1-3.3-39.432-9.38-57.484l-228.106 228.11c18.052 6.080 37.384 9.376 57.488 9.376 99.412 0 180-80.59 180-180zM1008.716 490.522c-4.98-6.968-72.86-100.8-178.81-183.22l-57.040 57.040c11.624 8.8 23.24 18.128 34.814 27.98 53.6 45.614 94.264 92.1 116.624 119.696-22.304 27.544-62.896 73.954-116.62 119.672-46 39.14-92.56 70.064-138.384 91.904-53.872 25.676-106.786 38.694-157.266 38.694-37.448 0-76.234-7.18-115.76-21.36l-61.486 61.49c54.786 24.22 114.45 39.87 177.248 39.87 273.41 0 487.684-296.19 496.686-308.808l15.316-21.468-15.316-21.49zM216.372 631.69c-53.708-45.706-94.3-92.12-116.61-119.672 22.36-27.6 63.028-74.094 116.612-119.696 46-39.146 92.554-70.068 138.38-91.908 53.874-25.68 106.79-38.7 157.28-38.7 37.46 0 76.264 7.188 115.8 21.38l61.484-61.484c-54.796-24.236-114.474-39.896-177.286-39.896-273.446 0-487.684 296.214-496.686 308.808l-15.316 21.49 15.314 21.466c4.98 6.984 72.866 100.84 178.84 183.26l57.040-57.040c-11.64-8.806-23.264-18.144-34.854-28.008z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      eyeclose
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M582.52 960h-167.88v-448h-112v-154.396l112-0.052-0.166-90.948c-0.036-125.974 34.12-202.604 182.484-202.604h123.542v154.424h-77.19c-57.782 0-60.566 21.56-60.566 61.85l-0.218 77.278h138.854l-16.376 154.394-122.36 0.052-0.124 448.002z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      facebook
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M960 513c0-247.424-200.574-448-448-448-247.422 0-448 200.576-448 448s200.578 448 448 448c247.426 0 448-200.576 448-448zM251.786 773.214c-69.504-69.508-107.786-161.918-107.786-260.214 0-98.294 38.282-190.708 107.786-260.216 69.506-69.504 161.918-107.784 260.214-107.784s190.708 38.28 260.214 107.784c69.508 69.508 107.786 161.922 107.786 260.216 0 98.296-38.278 190.708-107.786 260.214-69.506 69.506-161.922 107.786-260.214 107.786-98.296 0-190.708-38.28-260.214-107.786zM416.5 384.998c0 35.346-28.654 64-64 64s-64-28.654-64-64 28.654-64 64-64 64 28.654 64 64zM736 384.998c0 35.346-28.654 64-64 64s-64-28.654-64-64 28.654-64 64-64 64 28.654 64 64zM763.62 636.976v0.094c-49.554 87.14-143.21 145.93-250.62 145.93-107.486 0-201.2-58.868-250.726-146.108v-0.092c-3.34-5.842-5.274-12.59-5.274-19.8s1.934-13.958 5.274-19.798v-0.198h0.122c6.918-11.946 19.808-20.004 34.606-20.004s27.69 8.058 34.61 20.004h0.098c35.756 63.222 103.614 105.996 181.29 105.996s145.54-42.774 181.3-105.996h0.090c6.918-11.946 19.81-20.004 34.606-20.004s27.69 8.058 34.61 20.004h0.014v0.024c3.402 5.88 5.38 12.69 5.38 19.972 0 7.286-1.978 14.094-5.38 19.976z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      facehappy
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M968 513c0-247.424-200.574-448-448-448-247.422 0-448 200.576-448 448s200.578 448 448 448c247.426 0 448-200.576 448-448zM259.786 773.214c-69.504-69.506-107.786-161.918-107.786-260.214 0-98.294 38.282-190.708 107.786-260.216 69.506-69.504 161.918-107.784 260.214-107.784s190.708 38.28 260.214 107.784c69.508 69.508 107.786 161.922 107.786 260.216 0 98.296-38.278 190.708-107.786 260.214-69.506 69.506-161.922 107.786-260.214 107.786-98.296 0-190.708-38.28-260.214-107.786zM424.5 384.998c0 35.346-28.654 64-64 64s-64-28.654-64-64 28.654-64 64-64 64 28.654 64 64zM744 384.998c0 35.346-28.654 64-64 64s-64-28.654-64-64 28.654-64 64-64 64 28.654 64 64zM777 641c0 22.094-17.906 40-40 40h-432c-22.090 0-40-17.906-40-40 0-22.090 17.91-40 40-40h432c22.094 0 40 17.91 40 40z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      faceneutral
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M960 513c0-247.424-200.574-448-448-448-247.422 0-448 200.576-448 448s200.578 448 448 448c247.426 0 448-200.576 448-448zM251.786 773.214c-69.504-69.506-107.786-161.918-107.786-260.214 0-98.294 38.282-190.708 107.786-260.216 69.506-69.504 161.918-107.784 260.214-107.784s190.708 38.28 260.214 107.784c69.508 69.508 107.786 161.922 107.786 260.216 0 98.296-38.278 190.708-107.786 260.214-69.506 69.506-161.922 107.786-260.214 107.786-98.296 0-190.708-38.28-260.214-107.786zM416.5 384.998c0 35.346-28.654 64-64 64s-64-28.654-64-64 28.654-64 64-64 64 28.654 64 64zM736 384.998c0 35.346-28.654 64-64 64s-64-28.654-64-64 28.654-64 64-64 64 28.654 64 64zM262.38 684.024v-0.094c49.552-87.14 143.208-145.93 250.62-145.93 107.486 0 201.2 58.868 250.726 146.108v0.092c3.34 5.842 5.274 12.59 5.274 19.8s-1.934 13.958-5.274 19.798v0.198h-0.122c-6.918 11.946-19.808 20.004-34.606 20.004s-27.69-8.058-34.61-20.004h-0.098c-35.76-63.222-103.618-105.996-181.292-105.996s-145.54 42.774-181.3 105.996h-0.090c-6.918 11.946-19.808 20.004-34.606 20.004s-27.69-8.058-34.61-20.004h-0.014v-0.024c-3.402-5.88-5.38-12.69-5.38-19.972 0.002-7.286 1.98-14.094 5.382-19.976z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      facesad
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M962.030 168.032c0 22.092-17.908 40-40.002 40h-815.996c-22.092 0-40-17.908-40-40v0c0-22.090 17.908-40 40-40h815.998c22.092 0 40 17.908 40 40v0zM770 544.034c0 22.090-17.908 40-40 40h-432c-22.090 0-40-17.908-40-40v0c0-22.090 17.908-40.002 40-40.002h432c22.090 0 40 17.912 40 40.002v0zM642.030 728.032c0 22.094-17.91 40-40.002 40h-175.998c-22.090 0-40-17.906-40-40v0c0-22.094 17.908-40.002 40-40.002h176c22.094 0.002 40 17.91 40 40.002v0zM866 352.030c0 22.092-17.906 40.002-40 40.002h-624c-22.090 0-40-17.91-40-40.002v0c0-22.090 17.908-40 40-40h624c22.092 0 40 17.91 40 40v0zM512.030 928.034c22.090 0 40.004-17.906 40.004-40v0c0-22.090-17.914-40-40.004-40v0c-22.090 0-40 17.91-40 40v0c0 22.092 17.91 40 40 40v0z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      filter
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M168 960.060c-22.092 0-40-17.908-40-40v-816.36c0-22.092 17.908-40 40-40h687.698c16.178 0 30.764 9.746 36.956 24.694 6.192 14.946 2.77 32.15-8.67 43.59l-188.918 188.922 189.218 189.216c11.44 11.442 14.862 28.646 8.67 43.592-6.192 14.948-20.776 24.694-36.956 24.694h-647.998v341.654c0 22.090-17.908 39.998-40 39.998zM208 498.406h551.428l-149.218-149.216c-15.622-15.622-15.622-40.95 0-56.568l148.918-148.922h-551.128v354.706z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      flag
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M571 274h327c23 0 41 18 41 41v488c0 22-18 40-41 40H126c-23 0-41-18-41-40V242c0-34 27-61 61-61h317c18 0 35 7 47 21l61 72zm-119-8H170v492h684V359H531l-79-93z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      folder
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M948.362 178.828l-471.082 470.086c-0.24 0.25-0.45 0.52-0.698 0.77-7.82 7.82-18.070 11.722-28.32 11.712-10.25 0.010-20.504-3.892-28.324-11.712-0.262-0.262-0.48-0.546-0.734-0.812l-221.736-221.738c-15.624-15.622-15.624-40.95 0-56.566 15.618-15.622 40.946-15.624 56.57 0l194.224 194.222 443.53-442.528c15.622-15.618 40.95-15.618 56.57 0 15.62 15.62 15.62 40.946 0 56.566zM98.372 128.448c-18.926 0-34.266 15.342-34.266 34.268v699.032c0 18.926 15.34 34.266 34.266 34.266h699.032c18.926 0 34.266-15.34 34.266-34.266v-430.588c0 0 0.002-1.184 0.002-1.788 0-22.090-17.914-40-40.004-40s-40 17.91-40 40c0 0.288 0.002 386.64 0.002 386.64h-607.562v-607.564h600.002c22.090-0.002 40.002-17.906 40.002-40 0-22.090-17.914-40-40.004-40z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      form
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M465.926 641.356l-149.328 258.708h494.074l149.328-258.708h-494.074zM917.704 567.988l-256.33-444.048h-298.686l256.356 444.048h298.66zM320.236 197.442l-256.236 443.914 149.36 258.708 256.23-443.914-149.354-258.708z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      gdrive
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M512.062 64.032c-247.426 0-448 200.576-448 448s200.574 448 448 448c247.422 0 448-200.576 448-448s-200.578-448-448-448zM251.846 772.246c-69.506-69.508-107.784-161.918-107.784-260.214 0-98.294 38.278-190.708 107.784-260.216 69.508-69.504 161.92-107.784 260.216-107.784s190.708 38.28 260.214 107.784c69.504 69.508 107.786 161.922 107.786 260.216 0 98.296-38.282 190.708-107.786 260.214-42.852 42.848-94.41 73.806-150.684 91.27v-65.104c0-34.584-11.86-60.022-35.578-76.31 14.864-1.43 28.512-3.43 40.942-6.002 12.434-2.572 25.578-6.292 39.442-11.146s26.292-10.644 37.3-17.364c11-6.712 21.574-15.434 31.718-26.15s18.648-22.866 25.508-36.444c6.864-13.57 12.292-29.866 16.292-48.874 4.004-19.006 6-39.944 6-62.802 0-44.3-14.434-82.032-43.296-113.182 13.14-34.294 11.714-71.594-4.29-111.894l-10.718-1.286c-7.43-0.858-20.79 2.286-40.082 9.434-19.29 7.144-40.942 18.864-64.95 35.152-34.016-9.432-69.308-14.148-105.894-14.148-36.87 0-72.024 4.716-105.46 14.148-15.144-10.29-29.51-18.79-43.086-25.508s-24.436-11.29-32.582-13.718c-8.144-2.43-15.718-3.93-22.722-4.5-7-0.574-11.5-0.714-13.504-0.43-2 0.286-3.43 0.572-4.288 0.86-16.004 40.582-17.436 77.88-4.288 111.894-28.868 31.152-43.3 68.878-43.3 113.178 0 22.866 2 43.798 6.002 62.804 4 19.010 9.432 35.296 16.292 48.876s15.364 25.722 25.508 36.442c10.146 10.718 20.72 19.438 31.724 26.152s23.436 12.504 37.298 17.362c13.862 4.858 27.008 8.574 39.442 11.146 12.434 2.57 26.080 4.574 40.942 6.002-23.438 16.004-35.152 41.444-35.152 76.31v66.404c-57.936-17.198-111.030-48.638-154.966-92.572z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      github
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M511.989 937.076l-175.718-538.045h351.434l-175.717 538.045zM90.107 399.031l421.88 538.045-462.033-334.102c-9.156-6.631-15.047-17.289-15.047-29.321 0-3.985 0.645-7.821 1.839-11.406l-0.072 0.255 53.431-163.471zM90.107 399.031l105.75-324.083c2.508-7.304 9.319-12.457 17.334-12.457s14.825 5.153 17.294 12.329l0.042 0.128 105.749 324.082-246.165 0.001zM933.869 399.031l53.431 163.474c1.133 3.347 1.788 7.203 1.788 11.215 0 12.038-5.895 22.705-14.961 29.262l-0.104 0.072-462.034 334.022 421.88-538.046zM933.869 399.031h-246.162l105.75-324.083c2.543-7.242 9.325-12.341 17.292-12.341s14.748 5.096 17.256 12.212l0.042 0.127 105.825 324.083z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      gitlab
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M530.878 65.424c-6.748-1.014-13.090-1.424-18.878-1.424s-12.13 0.41-18.878 1.424c-238.662 9.9-429.122 206.48-429.122 447.576 0 247.424 200.578 448 448 448 247.426 0 448-200.576 448-448 0-241.098-190.456-437.678-429.122-447.576zM877.84 472.998h-158.508c-3.16-92.542-17.532-179.266-41.262-247.494-6.442-18.52-13.534-35.536-21.228-50.988 42.548 18.214 81.66 44.556 115.374 78.268 59.988 59.99 96.69 137.046 105.624 220.214zM512 880c-65.872 0-120.112-143.058-127.206-327h254.41c-7.092 183.942-61.332 327-127.204 327zM384.714 472.998c6.426-175.362 55.69-314.010 117.15-327.852 3.372-0.092 6.748-0.146 10.134-0.146s6.764 0.054 10.136 0.146c61.46 13.842 110.722 152.49 117.148 327.852h-254.568zM251.786 252.784c33.714-33.71 72.826-60.052 115.374-78.268-7.694 15.452-14.788 32.468-21.226 50.988-23.732 68.228-38.104 154.952-41.264 247.494h-158.508c8.934-83.168 45.636-160.224 105.624-220.214zM146.16 553h158.578c3.298 91.792 17.632 177.762 41.194 245.498 6.798 19.55 14.33 37.416 22.526 53.542-43.050-18.232-82.616-44.772-116.672-78.826-59.988-59.99-96.69-137.044-105.626-220.214zM772.214 773.214c-34.054 34.054-73.622 60.592-116.672 78.824 8.196-16.126 15.726-33.99 22.528-53.542 23.558-67.736 37.892-153.704 41.192-245.498h158.578c-8.934 83.172-45.634 160.226-105.626 220.216z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      globe
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M799.094 79.996c0 0-200.938 0-267.936 0-120.126 0-233.188 91.004-233.188 196.434 0 107.692 81.904 194.624 204.124 194.624 8.496 0 16.75-0.148 24.812-0.74-7.942 15.186-13.594 32.286-13.594 50.022 0 29.974 16.094 54.226 36.466 74.042-15.376 0-30.248 0.438-46.438 0.438-148.782 0.036-263.312 94.784-263.312 193.056 0 96.758 125.534 157.312 274.312 157.312 169.656 0 263.312-96.25 263.312-193.024 0-77.6-22.908-124.062-93.686-174.156-24.216-17.128-70.534-58.812-70.534-83.32 0-28.69 8.19-42.868 51.406-76.624 44.346-34.63 75.688-83.302 75.688-139.944 0-67.372-30-133.058-86.374-154.746h85l59.942-43.374zM701.504 735.438c2.092 8.992 3.276 18.226 3.276 27.624 0 78.226-50.374 139.304-194.934 139.304-102.874 0-177.124-65.078-177.124-143.304 0-76.622 92.122-140.434 194.934-139.32 24.004 0.254 46.376 4.136 66.69 10.702 55.812 38.834 95.874 60.808 107.158 104.994zM536.844 443.782c-69-2.094-134.624-77.212-146.564-167.876-11.874-90.664 34.378-160.030 103.442-157.97 68.996 2.060 134.594 74.818 146.53 165.432 11.906 90.696-34.408 162.508-103.408 160.414z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      google
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M324.832 513c22.090 0 40 17.91 40 40v304c0 22.090-17.906 40-40 40v0c-22.090 0-40-17.906-40-40v-304c0-22.090 17.91-40 40-40v0zM884.832 128.998c-22.090 0-40 17.906-40 40v688.002c0 22.094 17.91 40 40 40v0c22.094 0 40-17.91 40-40v-688.002c0-22.094-17.91-40-40-40v0zM698.164 256.998c-22.090 0-40 17.91-40 40v560.002c0 22.094 17.91 40 40 40v0c22.094 0 40-17.91 40-40v-560.002c0-22.090-17.91-40-40-40v0zM511.5 384.998c-22.090 0-40.004 17.91-40.004 40v432.002c0 22.094 17.914 40 40.004 40v0c22.090 0 40-17.91 40-40v-432.002c0-22.090-17.91-40-40-40v0zM139.168 641c-22.090 0-40 17.91-40 40v176c0 22.094 17.91 40 40 40v0c22.094 0 40-17.91 40-40v-176c0-22.090-17.91-40-40-40v0z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      graphbar
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M820.536 489.23c-15.624 15.618-40.954 15.618-56.57 0l-42.006-42.002-169.898 169.9c-7.822 7.82-18.076 11.722-28.326 11.712-10.248 0.008-20.496-3.894-28.314-11.712l-96.178-96.182-140.67 140.674c-15.624 15.622-40.954 15.618-56.57-0.004-15.624-15.618-15.624-40.946 0-56.566l168.946-168.946c7.812-7.816 18.058-11.72 28.3-11.716 10.238-0.002 20.476 3.904 28.29 11.716l96.204 96.204 168.91-168.91c0.33-0.356 0.626-0.73 0.972-1.076 7.824-7.824 18.084-11.726 28.34-11.712 10.252-0.012 20.508 3.892 28.332 11.714 0.346 0.346 0.64 0.72 0.972 1.074l69.266 69.266c15.62 15.618 15.616 40.942 0 56.566zM880 144h-736v736h736v-736zM920 64c22.092 0 40 17.908 40 40v816c0 22.092-17.908 40-40 40h-816c-22.092 0-40-17.908-40-40v-816c0-22.092 17.908-40 40-40h816z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      graphline
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M896.38 635.332c-7.286-4.206-14.934-7.196-22.714-9.074v-228.148c7.788-1.882 15.44-4.874 22.732-9.082 40.902-23.614 54.92-75.934 31.3-116.846-23.62-40.914-75.942-54.932-116.846-31.318-7.286 4.21-13.704 9.34-19.22 15.14l-197.586-114.076c2.266-7.68 3.502-15.802 3.502-24.212 0-47.232-38.3-85.53-85.544-85.53-47.242 0-85.544 38.298-85.544 85.53 0 8.42 1.238 16.552 3.508 24.24l-197.598 114.046c-5.518-5.802-11.936-10.93-19.218-15.138-40.902-23.614-93.22-9.596-116.846 31.318-23.62 40.91-9.6 93.228 31.3 116.846 7.29 4.208 14.94 7.202 22.728 9.082v228.15c-7.782 1.878-15.434 4.866-22.718 9.074-40.91 23.62-54.93 75.938-31.31 116.848 23.624 40.914 75.944 54.932 116.856 31.312 7.28-4.206 13.692-9.334 19.206-15.13l197.588 114.080c-2.262 7.68-3.498 15.792-3.498 24.2 0 47.244 38.302 85.544 85.546 85.544 47.242 0 85.542-38.302 85.542-85.544 0-9.362-1.524-18.36-4.308-26.79l196.558-113.484c5.914 6.624 12.946 12.446 21.046 17.126 40.912 23.618 93.23 9.602 116.856-31.314 23.618-40.914 9.598-93.232-31.318-116.85zM253.492 689.212c-1.88-7.73-4.856-15.33-9.038-22.568-4.142-7.18-9.194-13.516-14.892-18.98l258.558-447.814c7.58 2.198 15.586 3.402 23.878 3.402 8.262 0 16.242-1.196 23.802-3.38l258.574 447.85c-5.676 5.456-10.704 11.77-14.834 18.928-4.182 7.238-7.162 14.838-9.042 22.566l-517.006-0.004zM771.404 291.408c-6.156 21.512-3.936 45.396 8.138 66.306 12.066 20.91 31.638 34.772 53.348 40.2v228.538c-1.074 0.266-2.144 0.56-3.208 0.868l-258.56-447.826c0.804-0.768 1.596-1.556 2.372-2.354l197.91 114.268zM450.526 177.162c0.75 0.772 1.516 1.536 2.296 2.282l-258.578 447.856c-1.038-0.3-2.084-0.586-3.134-0.85v-228.536c21.708-5.428 41.276-19.29 53.348-40.202 12.074-20.91 14.294-44.794 8.134-66.306l197.934-114.244zM575.392 849.216c-15.65-17.262-38.256-28.108-63.39-28.108-24.152 0-45.946 10.026-61.5 26.112l-197.908-114.266c0.28-0.986 0.544-1.98 0.794-2.972h517.226c0.464 1.888 0.976 3.756 1.57 5.61l-196.792 113.624z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      graphql
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M437.162 552.368c-1.694-0.216-3.408-0.37-5.162-0.37h-263.978c-1.754 0-3.468 0.152-5.162 0.37-19.646 2.538-34.838 19.292-34.838 39.63v264.040c0 22.094 17.91 40 40 40h263.978c13.808 0 25.98-6.996 33.168-17.636 0.102-0.148 0.184-0.308 0.282-0.458 0.612-0.924 1.2-1.862 1.722-2.838 0.046-0.082 0.080-0.172 0.124-0.254 2.994-5.61 4.704-12.008 4.704-18.808v-264.044c0-20.34-15.19-37.094-34.838-39.632zM208.022 816.038v-184.040h183.978v184.040h-183.978zM437.162 128.4c-1.694-0.216-3.408-0.37-5.162-0.37h-263.978c-1.754 0-3.468 0.152-5.162 0.37-19.646 2.538-34.838 19.292-34.838 39.63v263.968c0 22.094 17.91 40 40 40h263.978c13.808 0 25.98-6.996 33.168-17.636 0.102-0.148 0.184-0.308 0.282-0.458 0.612-0.924 1.2-1.862 1.722-2.838 0.046-0.082 0.080-0.172 0.124-0.254 2.994-5.61 4.704-12.008 4.704-18.808v-263.972c0-20.342-15.19-37.096-34.838-39.632zM208.022 392v-183.968h183.978v183.968h-183.978zM861.212 552.368c-1.694-0.216-3.408-0.37-5.162-0.37h-264.050c-1.754 0-3.468 0.152-5.162 0.37-19.646 2.538-34.838 19.292-34.838 39.63v264.040c0 22.094 17.91 40 40 40h264.048c13.808 0 25.98-6.996 33.168-17.636 0.102-0.148 0.184-0.308 0.282-0.458 0.612-0.924 1.2-1.862 1.722-2.838 0.046-0.082 0.080-0.172 0.124-0.254 2.994-5.61 4.704-12.008 4.704-18.808v-264.044c0.002-20.34-15.19-37.094-34.836-39.632zM632 816.038v-184.040h184.048v184.040h-184.048zM861.212 128.4c-1.694-0.216-3.408-0.37-5.162-0.37h-264.050c-1.754 0-3.468 0.152-5.162 0.37-19.646 2.538-34.838 19.292-34.838 39.63v263.968c0 22.094 17.91 40 40 40h264.048c13.808 0 25.98-6.996 33.168-17.636 0.102-0.148 0.184-0.308 0.282-0.458 0.612-0.924 1.2-1.862 1.722-2.838 0.046-0.082 0.080-0.172 0.124-0.254 2.994-5.61 4.704-12.008 4.704-18.808v-263.972c0.002-20.342-15.19-37.096-34.836-39.632zM632 392v-183.968h184.048v183.968h-184.048z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      grid
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M541.146 448.384c-1.694-0.216-3.408-0.37-5.162-0.37h-367.968c-1.754 0-3.468 0.152-5.162 0.37-19.646 2.538-34.838 19.292-34.838 39.63v368.032c0 22.094 17.91 40 40 40h367.968c13.808 0 25.98-6.996 33.168-17.636 0.102-0.148 0.184-0.308 0.282-0.458 0.612-0.924 1.2-1.862 1.722-2.838 0.046-0.082 0.080-0.172 0.124-0.254 2.994-5.61 4.704-12.008 4.704-18.808v-368.036c0-20.34-15.192-37.094-34.838-39.632zM208.016 816.046v-288.032h287.968v288.032h-287.968zM736.032 856.046c0 22.090-17.908 40-40 40-22.090 0-40-17.908-40-40v-487.902l-488.016 0.002c-22.090 0-40-17.91-40-40s17.908-40.002 40-40.002h528.016c1.754 0 3.468 0.152 5.162 0.37 19.646 2.538 34.838 19.292 34.838 39.63v527.902zM896.032 168.030v688.004c-0.002 22.088-17.91 39.996-40 39.996s-40.002-17.908-40.002-40c0 0 0.002-304.026 0.002-304.040v-343.96h-343.96c-0.014 0-304.040 0.002-304.040 0.002-22.090 0-40-17.91-40-40s17.908-40.002 40-40.002h688c1.754 0 3.468 0.152 5.162 0.37 19.646 2.536 34.838 19.29 34.838 39.63z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      grow
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M895.032 194.328c-20.906-21.070-46.492-37.316-76.682-48.938-30.104-11.71-63.986-17.39-101.474-17.39-19.55 0-38.744 2.882-57.584 9.094-18.472 6.062-36.584 14.242-54.072 24.246-17.476 9.828-34.056 21.276-49.916 33.898-16.038 12.8-30.456 25.572-43.346 38.664-13.52-13.092-28.026-25.864-43.616-38.664-15.684-12.624-32.080-24.070-49.382-33.898-17.214-10.004-35.414-18.184-54.704-24.246-19.104-6.21-38.568-9.094-58.034-9.094-37.126 0-70.56 5.68-100.48 17.39-29.732 11.622-55.328 27.868-76.328 48.938-20.994 21.094-37.214 46.962-48.478 77.328-11.174 30.544-16.942 64.5-16.942 101.812 0 21.628 3.068 43.078 9.19 64.53 6.308 21.096 14.416 41.986 24.876 61.642 10.446 19.656 22.702 38.488 36.584 56.59 13.88 18.124 28.388 34.516 43.344 49.58l305.766 305.112c8.466 7.558 18.11 11.444 28.204 11.444 10.726 0 19.914-3.884 27.308-11.444l305.934-304.226c14.78-14.772 29.382-31.368 43.166-49.378 14.058-18.212 26.314-37.222 37.042-57.23 10.9-19.924 19.192-40.638 25.406-62 6.218-21.188 9.198-42.61 9.198-64.618 0-37.312-5.592-71.268-16.582-101.812-11.264-30.366-27.22-56.236-48.398-77.33z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      heart
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M716.876 208c27.708 0 52.092 4.020 72.47 11.948l0.132 0.052 0.13 0.050c19.866 7.644 35.774 17.664 48.632 30.624l0.166 0.168 0.17 0.168c12.586 12.536 22.304 28.27 29.706 48.094 7.782 21.786 11.726 46.798 11.726 74.364 0 14.658-1.95 28.426-5.958 42.086l-0.028 0.092-0.026 0.092c-4.866 16.72-11.006 31.752-18.776 45.952l-0.162 0.298-0.16 0.296c-8.81 16.434-18.58 31.532-29.864 46.148l-0.204 0.264c-11.316 14.786-23.48 28.708-36.154 41.378l-277.122 275.574-276.94-276.35c-13.32-13.43-25.248-27.074-36.488-41.75-11.386-14.848-21.284-30.136-29.444-45.49-7.206-13.54-13.494-29.17-18.7-46.472-4.030-14.264-5.988-28.044-5.988-42.116 0-27.36 4.042-52.314 12.016-74.176 7.214-19.378 17.344-35.708 30.066-48.492 12.998-13.042 28.958-23.148 48.826-30.914 20.436-8 43.764-11.886 71.32-11.886 11.536 0 22.738 1.742 33.298 5.174l0.374 0.122 0.376 0.12c13.116 4.122 26.066 9.874 38.494 17.094l0.34 0.2 0.344 0.196c12.736 7.234 25.308 15.876 38.43 26.412 14.486 11.906 27.060 23.048 38.428 34.056l56.994 55.192 55.662-56.532c10.324-10.484 22.18-21.040 36.242-32.264 13.382-10.646 26.216-19.38 39.228-26.698l0.256-0.144 0.254-0.144c13.008-7.442 26.228-13.386 39.294-17.676l0.050-0.016 0.050-0.018c10.354-3.414 20.998-5.076 32.54-5.076zM716.876 128c-19.55 0-38.744 2.882-57.584 9.094-18.472 6.062-36.584 14.242-54.072 24.246-17.476 9.828-34.056 21.276-49.916 33.898-16.038 12.8-30.456 25.572-43.346 38.664-13.52-13.092-28.026-25.864-43.616-38.664-15.684-12.624-32.080-24.070-49.382-33.898-17.214-10.004-35.414-18.184-54.704-24.246-19.104-6.21-38.568-9.094-58.034-9.094-37.126 0-70.56 5.68-100.48 17.39-29.732 11.622-55.328 27.868-76.328 48.938-20.994 21.094-37.214 46.962-48.478 77.328-11.174 30.544-16.942 64.5-16.942 101.812 0 21.628 3.068 43.078 9.19 64.53 6.308 21.096 14.416 41.986 24.876 61.642 10.446 19.656 22.702 38.488 36.584 56.59 13.88 18.124 28.388 34.516 43.344 49.58l305.766 305.112c8.466 7.558 18.11 11.444 28.204 11.444 10.726 0 19.914-3.884 27.308-11.444l305.934-304.226c14.78-14.772 29.382-31.368 43.166-49.378 14.058-18.212 26.314-37.222 37.042-57.23 10.9-19.924 19.192-40.638 25.406-62 6.218-21.188 9.198-42.61 9.198-64.618 0-37.312-5.592-71.268-16.582-101.812-11.262-30.366-27.216-56.234-48.396-77.328-20.906-21.070-46.492-37.316-76.682-48.938-30.106-11.712-63.988-17.392-101.476-17.392v0z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      hearthollow
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M948.12 483.624l-407.814-407.754c-7.812-7.808-18.046-11.712-28.282-11.712-10.238 0-20.472 3.904-28.282 11.712l-407.92 407.86c-15.624 15.622-15.624 40.948-0.006 56.57s40.944 15.622 56.568 0.004l19.616-19.612v366.708c0 22.090 17.91 40 40 40h190.696c0.416 0.014 0.82 0.062 1.238 0.062 11.054 0 21.060-4.484 28.3-11.734 7.266-7.244 11.766-17.262 11.766-28.332 0-0.418-0.050-0.822-0.062-1.238v-263.204h176.060v263.934c0 22.090 17.91 40 40 40l191.876 0.124c2.292 0 4.524-0.236 6.708-0.608 0.45-0.074 0.91-0.116 1.356-0.206 0.21-0.044 0.414-0.116 0.628-0.162 17.906-3.972 31.308-19.924 31.308-39.026v-366.492l19.682 19.68c15.622 15.62 40.948 15.616 56.568-0.006s15.618-40.948-0.004-56.568zM791.876 448.272v398.71l-111.874-0.074v-263.876c0-0.020-0.002-0.042-0.002-0.062 0-0.006 0-0.014 0-0.022 0-22.090-17.91-40-40-40h-254.002c-0.556 0-1.1 0.060-1.65 0.084-0.14-0.002-0.274-0.022-0.414-0.022-22.090 0-40 17.91-40 40v264.382h-111.934v-399.392c0-2.286-0.234-4.512-0.604-6.694l280.626-280.584 280.514 280.472c-0.412 2.302-0.66 4.658-0.66 7.078z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      home
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M511.926 801.946c-22.090 0-40-17.906-40-40v0c0-22.090 17.91-40 40-40v0c22.090 0 40.004 17.91 40.004 40v0c0 22.094-17.914 40-40.004 40v0zM831.682 915.242c0.192 1.582 0.318 3.186 0.318 4.82 0 22.090-17.908 40-40 40h-560c-22.092 0-40-17.914-40-40 0-2.438 0.252-4.812 0.67-7.128 2.36-53.636 18.034-105.7 45.852-151.554 0.734-1.476 1.562-2.912 2.492-4.296l5.582-8.364c0.054-0.080 0.11-0.158 0.164-0.238 0.042-0.068 0.098-0.156 0.144-0.222l157.704-236.036-158.5-237.228c-0.116-0.17-0.23-0.342-0.34-0.516-32.842-49.178-51.11-105.994-53.368-165.044-0.238-1.762-0.402-3.546-0.402-5.374 0-22.090 17.908-40 40-40h560c22.092 0 40 17.914 40 40 0 2.056-0.204 4.064-0.504 6.038-2.194 54.020-17.886 106.48-45.894 152.648-0.734 1.472-1.562 2.91-2.492 4.294l-5.582 8.366c-0.054 0.078-0.11 0.156-0.164 0.236-0.042 0.068-0.098 0.154-0.144 0.222l-157.734 236.082 158.468 237.182c0.116 0.168 0.23 0.344 0.34 0.516 32.946 49.33 51.226 106.346 53.39 165.596zM749.958 144.060h-475.99c6.138 31.304 18.384 61.124 36.354 87.916 0.118 0.17 0.23 0.344 0.342 0.514l0.024 0.038c0.036 0.054 0.15 0.23 0.186 0.284l54.286 81.25h293.596l58.196-87.1c0.366-0.67 0.75-1.334 1.154-1.99 15.492-24.916 26.228-52.324 31.852-80.912zM497.528 512.178l-0.032 0.046 14.426 21.592 93.378-139.756h-186.692l78.92 118.118zM305.96 799.156c-15.498 24.91-26.234 52.318-31.856 80.906h476.052c-6.138-31.304-18.384-61.122-36.354-87.918-0.118-0.168-0.23-0.344-0.342-0.512l-0.024-0.040c-0.036-0.050-0.15-0.23-0.186-0.282l-140.242-209.902-28.98 43.374c-7.166 10.72-19.21 17.162-32.11 17.162-12.896 0-24.942-6.442-32.11-17.166l-28.76-43.044-143.938 215.428c-0.36 0.674-0.744 1.338-1.15 1.994z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      hourglass
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M828.782 195.216c-174.954-174.958-458.614-174.958-633.566 0-174.958 174.954-174.958 458.612 0 633.568 174.954 174.954 458.614 174.954 633.566 0 174.956-174.952 174.956-458.614 0-633.568zM772.214 772.214c-69.508 69.506-161.918 107.784-260.214 107.784-98.3 0-190.71-38.278-260.218-107.784-69.504-69.506-107.782-161.92-107.786-260.214 0.004-98.296 38.282-190.708 107.786-260.214 69.508-69.506 161.922-107.786 260.218-107.788 98.292 0.002 190.708 38.282 260.214 107.79 69.504 69.504 107.782 161.916 107.786 260.212-0.004 98.294-38.282 190.708-107.786 260.214zM512.996 361.124c-22.090 0-40-17.906-40-40v0c0-22.088 17.91-40 40-40v0c22.090 0 40.004 17.912 40.004 40v0c0 22.092-17.914 40-40.004 40v0zM512.998 743.094c-22.090 0-40-17.906-40-40v-240.002c0-22.090 17.91-40 40-40v0c22.090 0 40.004 17.91 40.004 40v240.002c0 22.094-17.914 40-40.004 40v0z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      info
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M768.032 320.032c0 35.346-28.654 64-64 64s-64-28.654-64-64 28.654-64 64-64 64 28.654 64 64zM960.032 353.092c0 159.062-128.946 288.010-288.008 288.010-35.306 0-69.124-6.368-100.38-17.996l-27.736 27.738-0.002 54.464c0 0.016 0.002 0.028 0.002 0.040 0 11.046-4.478 21.046-11.716 28.29-6.334 6.332-14.784 10.55-24.196 11.508-1.346 0.136-2.708 0.208-4.090 0.208h-71.748l-0.002 71.96c0 0.012 0.002 0.040 0.002 0.040 0 11.046-4.478 21.046-11.716 28.286-6.334 6.336-14.784 10.554-24.196 11.508-1.346 0.136-2.708 0.208-4.090 0.208h-71.996l-0.002 62.684c0 22.094-17.908 40-40 40-0.022 0-0.042 0-0.062 0-0.022 0-0.042 0-0.064 0h-175.996c-13.76 0-25.888-6.95-33.086-17.524-4.362-6.406-6.916-14.14-6.916-22.476v-112c0-0.664 0.066-1.308 0.1-1.964 0.032-0.618 0.034-1.234 0.092-1.852 0.11-1.148 0.288-2.278 0.492-3.398 0.024-0.128 0.034-0.258 0.058-0.386 1.614-8.378 5.848-15.808 11.808-21.446l325.456-325.458c-11.642-31.274-18.020-65.11-18.020-100.44 0-159.060 128.946-288.006 288.006-288.006 159.060-0.004 288.006 128.942 288.006 288.002zM880.032 353.092c0-114.696-93.312-208.006-208.008-208.006s-208.006 93.31-208.006 208.006c0 43.208 13.246 83.376 35.884 116.668l-57.36 57.362c-0.136-0.184-0.27-0.368-0.408-0.546l-298.102 298.106-0.002 55.356h96.124v-62.684c0-0.708 0.070-1.394 0.106-2.094 0.036-0.664 0.036-1.336 0.102-1.992 0.132-1.316 0.334-2.61 0.592-3.882 0.006-0.028 0.008-0.058 0.014-0.090 0.258-1.262 0.58-2.5 0.956-3.714 0.012-0.040 0.018-0.078 0.030-0.118 4.676-15.032 17.976-26.262 34.114-27.902 1.344-0.136 2.708-0.208 4.090-0.208h71.998v-67.64c-0.156-1.434-0.248-2.882-0.248-4.36 0-22.094 17.908-40 40-40h71.998v-30.692c0-0.148 0.020-0.29 0.022-0.438 0.008-10.226 3.912-20.45 11.714-28.254l55.99-55.988c1.982-1.984 4.124-3.71 6.38-5.188l18.68-18.684c33.030 22.090 72.702 34.992 115.332 34.992 114.694-0 208.008-93.314 208.008-208.010z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      key
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M320.022 1022.644c-7.408 0-14.852-2.052-21.44-6.238-15.292-9.714-22.144-28.494-16.706-45.774l115.186-365.908-214.552-52.57c-14.714-3.606-26.128-15.214-29.486-29.988-3.356-14.772 1.92-30.174 13.632-39.786l576-472.662c14.458-11.864 35.208-12.126 49.962-0.626 14.752 11.496 19.568 31.682 11.594 48.602l-171.202 363.256 208.648 51.756c14.29 3.544 25.476 14.652 29.124 28.914s-0.834 29.376-11.668 39.344l-512 471.112c-7.586 6.984-17.308 10.568-27.092 10.568zM279.236 493.49l178.314 43.69c10.74 2.632 19.912 9.59 25.336 19.226s6.62 21.086 3.298 31.636l-83.030 263.76 347.066-319.352-183.82-45.596c-11.63-2.884-21.356-10.832-26.498-21.656-5.144-10.822-5.164-23.382-0.054-34.22l116.31-246.788-376.922 309.3z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      lightning
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M743.52 529.234c5.616-5.616 83.048-83.046 88.462-88.46 30.944-32.778 47.97-75.636 47.97-120.792 0-47.048-18.304-91.26-51.542-124.484-33.228-33.22-77.43-51.516-124.458-51.516-45.024 0-87.792 16.94-120.536 47.72l-104.458 104.456c-30.792 32.738-47.734 75.512-47.734 120.548 0 41.916 14.576 81.544 41.248 113.196 3.264 3.876 6.666 7.664 10.292 11.29 4.258 4.258 8.704 8.262 13.304 12.022 0.054 0.080 0.096 0.152 0.148 0.232 9.572 7.308 15.778 18.804 15.778 31.776 0 22.094-17.914 40-40.004 40-8.542 0-16.442-2.696-22.938-7.26-2.746-1.93-20.622-17.43-30.35-28.050-0.008-0.010-0.018-0.018-0.026-0.028-4.992-5.432-13.234-15.23-18.552-22.65s-16.556-25.872-17.036-26.736c-0.7-1.262-2.974-5.526-3.422-6.39-0.69-1.334-6.118-12.67-6.114-12.67-14.342-31.96-22.332-67.4-22.332-104.728 0-60.826 21.198-116.648 56.58-160.544 0.252-0.314 4.61-5.594 6.594-7.866 0.304-0.35 5.038-5.636 7.16-7.874 0.252-0.268 105.86-105.874 106.128-106.126 45.902-43.584 107.958-70.314 176.264-70.314 141.382 0 255.998 114.5 255.998 256 0 68.516-26.882 130.688-70.652 176.61-0.144 0.148-109.854 109.546-112.090 111.528-0.958 0.848-5.072 4.352-5.072 4.352-6.448 5.434-13.132 10.592-20.1 15.378 0.412-6.836 0.644-13.702 0.644-20.6 0-26.46-3.108-52.206-8.918-76.918l-0.236-1.102zM616.144 767.82c35.382-43.896 56.58-99.718 56.58-160.544 0-37.328-7.99-72.768-22.332-104.728 0.004 0 0.006-0.002 0.010-0.004-0.258-0.576-0.538-1.14-0.8-1.714-0.686-1.498-2.894-6.112-3.296-6.93-0.668-1.344-2.952-5.732-3.386-6.604-3.48-6.982-8.708-15.126-9.49-16.366-0.498-0.792-0.996-1.58-1.502-2.364-0.834-1.29-15.364-22.066-26.656-34.466-0.008-0.010-0.018-0.018-0.026-0.028-7.056-8.448-24.932-24.198-30.35-28.050-6.47-4.602-14.396-7.26-22.938-7.26-22.090 0-40.004 17.906-40.004 40 0 12.97 6.206 24.466 15.778 31.776 0.052 0.080 0.094 0.152 0.148 0.232 4.602 3.76 20.334 19.434 23.598 23.31 26.672 31.65 41.248 71.28 41.248 113.196 0 45.038-16.944 87.81-47.734 120.548l-104.458 104.456c-32.742 30.782-75.512 47.72-120.536 47.72-47.028 0-91.228-18.294-124.458-51.516-33.236-33.224-51.542-77.436-51.542-124.484 0-45.154 17.028-88.014 47.97-120.792 5.414-5.414 40.812-40.812 68.958-68.958 7.176-7.176 13.888-13.886 19.504-19.502v-0.002c-0.356-1.562-0.246-1.096-0.246-1.096-5.81-24.712-8.918-50.458-8.918-76.918 0-6.898 0.232-13.764 0.644-20.6-6.966 4.788-20.1 15.33-20.1 15.33-0.734 0.62-9.518 8.388-11.68 10.45-0.16 0.154-105.338 105.33-105.482 105.478-43.77 45.922-70.652 108.094-70.652 176.61 0 141.5 114.616 256 255.998 256 68.306 0 130.362-26.73 176.264-70.314 0.27-0.254 105.876-105.86 106.128-106.126 0.004-0.002 13.506-15.426 13.758-15.74z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      link
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M961 233c0 22.090-17.908 40-40 40h-607.996c-22.090 0-40-17.908-40-40v0c0-22.090 17.908-40.002 40-40.002h607.996c22.092 0 40 17.912 40 40.002v0zM961 793c0-22.090-17.908-40.002-40-40.002h-607.996c-22.092 0-40 17.912-40 40.002v0c0 22.092 17.91 40 40 40h607.996c22.092 0 40-17.91 40-40v0zM961 606.332c0-22.090-17.908-40-40-40h-607.996c-22.092 0-40 17.91-40 40v0c0 22.094 17.91 40 40 40h607.996c22.092 0 40-17.91 40-40v0zM961 419.668c0-22.090-17.908-40.004-40-40.004h-607.996c-22.092 0-40 17.914-40 40.004v0c0 22.090 17.91 40 40 40h607.996c22.092-0 40-17.91 40-40v0zM129 168.998c-35.346 0-64 28.654-64 64s28.654 64 64 64 64-28.654 64-64-28.654-64-64-64zM129 728.998c-35.346 0-64 28.654-64 64s28.654 64 64 64 64-28.654 64-64-28.654-64-64-64zM129 542.332c-35.346 0-64 28.652-64 64 0 35.344 28.654 64 64 64s64-28.656 64-64c0-35.348-28.654-64-64-64zM129 355.664c-35.346 0-64 28.656-64 64 0 35.348 28.654 64 64 64s64-28.652 64-64c0-35.344-28.654-64-64-64z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      listunordered
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M960.002 512l-0.002-0.026c-0.006-114.646-43.746-229.288-131.216-316.758-174.954-174.958-458.614-174.958-633.566 0-174.958 174.954-174.958 458.612 0 633.568 87.45 87.45 202.056 131.186 316.674 131.214 0.022 0 0.042 0.002 0.064 0.002 0.014 0 0.026-0.002 0.042-0.002 114.654 0 229.308-43.738 316.788-131.214 87.472-87.47 131.21-202.114 131.216-316.76l0-0.024zM772.216 772.214c-60 59.998-137.072 96.702-220.258 105.626v-133.84c0-22.090-17.914-40-40.004-40s-40 17.91-40 40v133.83c-83.154-8.942-160.194-45.64-220.172-105.618-59.986-59.988-96.686-137.042-105.624-220.21h133.84c22.090 0 40-17.914 40-40.004s-17.91-40-40-40h-133.84c8.936-83.17 45.636-160.226 105.624-220.214 59.978-59.976 137.020-96.676 220.172-105.622v133.836c0 22.094 17.91 40 40 40s40.004-17.906 40.004-40v-133.844c83.184 8.926 160.258 45.63 220.258 105.63 59.986 59.986 96.688 137.042 105.624 220.212h-133.838c-22.094 0-40 17.91-40 40s17.906 40.004 40 40.004h133.838c-8.938 83.172-45.636 160.226-105.624 220.214z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      location
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M896.032 915.53v-467.498c0-19.102-13.402-35.052-31.31-39.026-0.21-0.046-0.414-0.12-0.628-0.162-0.444-0.090-0.904-0.13-1.354-0.208-2.186-0.37-4.416-0.606-6.708-0.606h-55.902l0.002-55.85h0.020c0-159.14-129.010-288.15-288.15-288.15-159.128 0-288.13 128.992-288.15 288.118v55.884h-54.852c-20.71 0-37.746 15.742-39.792 35.91-0.136 1.344-0.208 2.708-0.208 4.090v463.332c-0.618 2.792-0.968 5.688-0.968 8.668 0 22.094 17.91 40 40 40h688.27c22.092 0 40-17.91 40-40-0.002-1.524-0.104-3.024-0.27-4.502zM209 488.032h607.032v392h-607.032v-392zM303.85 352.182c0-114.776 93.376-208.15 208.15-208.15 114.59 0 207.842 93.074 208.142 207.596 0 0.084-0.012 0.164-0.012 0.248v56.156h-416.284l0.004-55.85zM552.164 691.858l-0.002 58.188c0.004 22.088-17.906 39.996-39.996 39.998-22.094 0.002-40.004-17.906-40-40v-57.974c-14.704-11.726-24.134-29.782-24.134-50.048 0-35.346 28.654-64 64-64s64 28.654 64 64c0 20.142-9.318 38.104-23.868 49.836z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      lock
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M0 0v1024h1024v-1024h-1024zM850.708 242.614l-54.918 52.655c-3.858 2.965-6.321 7.581-6.321 12.772 0 0.933 0.080 1.847 0.232 2.736l-0.014-0.095v386.883c-0.139 0.794-0.219 1.708-0.219 2.641 0 5.191 2.462 9.807 6.283 12.744l0.038 0.028 53.637 52.655v11.558h-269.774v-11.558l55.559-53.936c5.461-5.456 5.461-7.068 5.461-15.413v-312.719l-154.477 392.344h-20.874l-179.851-392.344v262.947c-0.209 1.465-0.329 3.156-0.329 4.875 0 9.848 3.924 18.78 10.293 25.317l-0.008-0.008 72.258 87.649v11.558h-204.895v-11.558l72.263-87.649c6.070-6.284 9.81-14.852 9.81-24.293 0-2.081-0.182-4.12-0.53-6.101l0.031 0.21v-304.044c0.086-0.804 0.135-1.737 0.135-2.682 0-7.844-3.389-14.896-8.782-19.773l-0.023-0.021-64.234-77.378v-11.558h199.438l154.157 338.083 135.53-338.083h190.123v11.558z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      medium
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M320.032 416.032v-152.968c0-22.094 17.91-40 40-40 22.094 0 40 17.91 40 40.004v152.964c0 22.090-17.906 40-40 40s-40-17.908-40-40zM512 456.032c22.094 0 40-17.91 40-40v-152.964c0-22.094-17.906-40.004-40-40.004-22.090 0-40 17.906-40 40v152.968c0 22.092 17.908 40 40 40zM664.032 456.032c22.094 0 40-17.91 40-40v-82.996c0-22.094-17.906-40.004-40-40.004-22.090 0-40 17.906-40 40v83c0 22.092 17.906 40 40 40zM864.018 316.616v603.418c0 0.004 0 0.004 0 0.004 0 6.798-1.71 13.198-4.704 18.808-0.044 0.084-0.078 0.172-0.124 0.254-0.524 0.976-1.112 1.914-1.722 2.836-0.098 0.15-0.18 0.312-0.282 0.46-7.188 10.638-19.36 17.634-33.168 17.634h-623.99c-22.090 0-40-17.908-40-40v-343.574c-0.002-0.142-0.022-0.282-0.022-0.426 0-0.142 0.020-0.282 0.022-0.426v-471.574c0-20.34 15.192-37.092 34.838-39.63 1.694-0.216 3.408-0.37 5.162-0.37l411.254 0.052c10.594-0.286 21.282 3.58 29.368 11.668l211.672 212.206c7.906 7.908 11.792 18.298 11.696 28.66zM240.026 144.034v391.998h543.99v-203.27l-188.252-188.728h-355.738zM784.016 880.032v-264h-543.99v264h543.99z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      memory
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M960 232c0 22.092-17.908 40-40.002 40h-815.996c-22.092 0-40-17.908-40-40v0c0-22.090 17.908-40 40-40h815.998c22.092 0 40 17.91 40 40v0zM768 416c0 22.090-17.908 40-40 40h-624c-22.090 0-40-17.908-40-40v0c0-22.090 17.908-40.002 40-40.002h624c22.092 0.002 40 17.914 40 40.002v0zM832 608c0 22.092-17.906 40.002-40 40.002h-688c-22.090 0-40-17.91-40-40.002v0c0-22.090 17.908-40 40-40h688c22.094 0 40 17.912 40 40v0zM576 792c0 22.094-17.91 40-40.002 40h-431.998c-22.090 0-40-17.906-40-40v0c0-22.094 17.908-40.002 40-40.002h432c22.094 0.002 40 17.912 40 40.002v0z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      menu
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M776.306 456.032c-51.602 0-95.696 32.744-112.612 78.542-69.674-6.072-141.482-31.012-197.386-69.306-46.266-31.69-100.392-85.728-111.792-168.92 45.4-17.12 77.79-60.998 77.79-112.314 0-66.168-53.832-120-120-120s-120 53.832-120 120c0 52.146 33.444 96.608 80 113.12v429.762c-46.556 16.512-80 60.974-80 113.12 0 66.168 53.832 120 120 120s120-53.832 120-120c0-52.146-33.444-96.608-80-113.12V471.444c19.622 21.888 42.618 41.898 68.792 59.828 68.422 46.868 156.64 77.042 241.646 83.462 16.14 47.23 60.932 81.3 113.56 81.3 66.168 0 120-53.832 120-120s-53.83-120.002-119.998-120.002zm-464-312c22.056 0 40 17.944 40 40s-17.944 40-40 40-40-17.944-40-40 17.942-40 40-40zm0 736c-22.056 0-40-17.944-40-40s17.944-40 40-40 40 17.944 40 40-17.944 40-40 40zm464-264c-22.056 0-40-17.944-40-40s17.944-40 40-40 40 17.944 40 40-17.944 40-40 40z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      merge
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M857 127.778h-688c-22.092 0-40 17.91-40 40v688c0 22.090 17.908 40 40 40h688c22.094 0 40-17.91 40-40v-688c0-22.092-17.906-40-40-40zM817 815.778h-608v-1.086l606.914-606.914h1.086v608z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      mirror
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M648 64h-272c-66.274 0-120 53.726-120 120v656c0 66.274 53.726 120 120 120h272c66.274 0 120-53.726 120-120v-656c0-66.274-53.726-120-120-120zM376 144h272c22.056 0 40 17.944 40 40v495.968h-352v-495.968c0-22.056 17.946-40 40-40zM648 880h-272c-22.054 0-40-17.944-40-40v-80.032h352v80.032c0 22.056-17.944 40-40 40zM544.034 819.962c0 17.676-14.33 32.002-32.004 32.002-17.67 0-32-14.326-32-32.002 0-17.672 14.33-31.998 32-31.998 17.674-0 32.004 14.326 32.004 31.998z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      mobile
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M512.034 144.030l318.696 184v368l-318.696 184-318.702-184v-368l318.702-184zM512.034 64.030c-13.812 0-27.624 3.574-40 10.718l-318.702 184c-24.752 14.29-40 40.7-40 69.282v368c0 28.582 15.248 54.994 40 69.28l318.702 184c12.376 7.146 26.19 10.72 40 10.72 13.814 0 27.624-3.572 40-10.72l318.696-184c24.752-14.288 40-40.698 40-69.28v-368c0-28.582-15.248-54.992-40-69.282l-318.696-184c-12.376-7.144-26.188-10.718-40-10.718v0zM511.63 314.25c-109.014 0-197.386 88.372-197.386 197.384 0 109.010 88.374 197.382 197.386 197.382v0.134c0.746 0 1.492 0.012 2.24 0.004 14.806-0.162 29.214-1.942 43.056-5.182 1.022-0.24 1.932-0.496 2.794-0.762 17.328-4.988 29.94-21.012 29.738-39.916-0.242-22.71-18.846-40.926-41.556-40.684-2.996 0.032-5.902 0.402-8.708 1.040-0.090 0.016-0.178 0-0.266 0.022-8.18 1.99-16.708 3.094-25.474 3.222-0.584-0.072-1.188-0.124-1.826-0.124-63.486 0-115.142-51.65-115.142-115.138 0-63.49 51.656-115.142 115.142-115.142 63.488 0 115.14 51.652 115.14 115.142 0 8.924-1.028 17.616-2.964 25.96-0.020 0.088-0.008 0.178-0.020 0.266-0.61 2.814-0.948 5.724-0.948 8.72 0 22.712 18.408 41.122 41.122 41.122 18.906 0 34.792-12.776 39.596-30.158 0.262-0.866 0.508-1.78 0.736-2.804 3.092-13.876 4.724-28.3 4.724-43.106 0-109.010-88.372-197.382-197.384-197.382z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      nut
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M960.062 616v304c0 1.382-0.070 2.746-0.208 4.090-2.046 20.172-19.080 35.91-39.792 35.91h-816c-22.090 0-40-17.906-40-40v-304c0-22.090 17.91-40 40-40s40 17.91 40 40v264h736v-264c0-22.090 17.91-40 40-40s40 17.912 40 40zM664.732 200.168l-124.41-124.41c-0.014-0.014-0.024-0.028-0.038-0.042-3.57-3.57-7.664-6.284-12.018-8.222-5.316-2.368-11.028-3.54-16.742-3.47-0.14-0.002-0.276-0.020-0.414-0.020-13.552 0-25.512 6.756-32.748 17.072l-119.1 119.092c-15.622 15.62-15.618 40.948 0.002 56.57 15.622 15.62 40.95 15.62 56.568 0l55.276-55.276v462.54c0 22.094 17.912 40 40.002 40 22.092 0 40-17.91 40-40v-464.314l57.052 57.052c15.622 15.624 40.948 15.62 56.568 0 15.628-15.624 15.628-40.952 0.002-56.572z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      outbox
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M946.58 293.66c12.704-12.708 15.072-31.836 7.108-46.938-1.838-3.524-4.23-6.83-7.19-9.79-0.282-0.282-0.588-0.52-0.876-0.792l-129.338-128.654c-0.046-0.046-0.084-0.098-0.13-0.144-7.814-7.812-18.056-11.718-28.296-11.714-10.24 0-20.48 3.906-28.292 11.714-0.064 0.066-0.12 0.138-0.184 0.206l-557.048 557.048c-2.194 2.192-4.042 4.59-5.622 7.11-70.624 87.486-17.922 195.43-174.738 239.554 0 0 64.758 18.11 144.33 18.11 74.374 0 161.678-15.824 221.23-77.020 0.394-0.364 0.808-0.696 1.192-1.078l1.734-1.734c0.852-0.798 1.678-1.578 2.504-2.426 0.348-0.356 0.668-0.728 1.010-1.086l168.756-168.756c1.126-0.906 2.224-1.872 3.272-2.918 1.044-1.044 2.008-2.14 2.914-3.266l375.212-375.212c0.834-0.706 1.664-1.424 2.452-2.214zM537.462 589.402l-73.594-73.206 324.068-324.064 73.594 73.2-324.068 324.070zM388.178 667.684c-13.288-13.632-28.584-23.974-44.78-31.016l63.902-63.902 73.596 73.204-64.246 64.248c-6.498-15.23-15.964-29.698-28.472-42.534zM229.848 791.928c8.294-30.346 14.852-54.332 32.416-73.862 0.83-0.864 2.664-2.702 4.26-4.286 8.030-6.792 17.534-8.246 24.198-8.246 14.386 0 29.026 6.554 40.162 17.98 19.592 20.106 21.934 49.238 5.596 66.874l-1.712 1.712c-0.798 0.752-1.612 1.524-2.462 2.354l-0.86 0.84-0.834 0.864c-30.666 31.79-75.914 45.424-118.104 50.542 7.53-18.888 12.598-37.426 17.34-54.772z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      paintbrush
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M824.25 369.354c68.146-70.452 67.478-182.784-2.094-252.354-70.296-70.296-184.266-70.296-254.558 0-0.014 0.012-0.028 0.026-0.042 0.042-0.004 0.002-0.006 0.004-0.010 0.008l-433.144 433.142c-0.036 0.036-0.074 0.068-0.11 0.106-0.054 0.052-0.106 0.11-0.16 0.162l-2.668 2.67c-0.286 0.286-0.528 0.596-0.8 0.888-43.028 44.88-66.664 103.616-66.664 165.986 0 64.106 24.962 124.376 70.292 169.704 45.328 45.33 105.598 70.292 169.706 70.292 50.612 0 98.822-15.57 139.186-44.428 4.932-1.952 9.556-4.906 13.544-8.894l16.802-16.802c0.056-0.056 0.116-0.112 0.172-0.168 0.038-0.038 0.074-0.076 0.112-0.116l289.010-289.014c15.622-15.618 15.62-40.942 0-56.56s-40.948-15.62-56.566 0l-289.124 289.122c-62.482 62.484-163.792 62.484-226.274 0-62.484-62.482-62.484-163.79 0-226.272h-0.002l433.134-433.12c0.058-0.060 0.112-0.122 0.172-0.18 38.99-38.99 102.43-38.99 141.42 0 38.992 38.99 38.99 102.432 0 141.422-0.058 0.060-0.122 0.114-0.18 0.17l0.006 0.006-280.536 280.534c-0.002-0.002-0.002-0.004-0.004-0.006l-79.978 79.98c-0.010 0.010-0.016 0.020-0.028 0.028-0.008 0.012-0.018 0.018-0.028 0.028l-0.064 0.062c-15.622 15.624-40.944 15.624-56.562 0-15.624-15.62-15.624-40.944-0.002-56.566l0.062-0.062c0.010-0.010 0.018-0.020 0.028-0.028 0.008-0.012 0.020-0.018 0.028-0.028l79.98-79.978c-0.002-0.002-0.004-0.002-0.006-0.004l136.508-136.512c15.622-15.62 15.62-40.944-0.002-56.562-15.618-15.62-40.946-15.62-56.564 0l-219.342 219.344c-1.284 1.284-2.42 2.652-3.494 4.052-40.4 47.148-38.316 118.184 6.322 162.824 44.64 44.638 115.674 46.722 162.82 6.324 1.402-1.072 2.772-2.21 4.054-3.494l2.83-2.832c0.002 0 0.002 0 0.002 0s0 0 0 0l360.54-360.54c0.058-0.056 0.12-0.114 0.18-0.172 0.050-0.050 0.098-0.106 0.15-0.158l0.994-0.994c0.34-0.338 0.63-0.702 0.952-1.052z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      paperclip
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M728.032 96.032h-116.98c-0.026 0-0.050-0.004-0.076-0.004s-0.050 0.004-0.076 0.004h-199.848c-0.026 0-0.050-0.004-0.076-0.004s-0.050 0.004-0.076 0.004h-31.924c-123.712 0-224 100.292-224 224 0 121.032 95.994 219.628 216 223.842v344.158c0 22.092 17.91 40 40 40 22.086 0 40-17.908 40-40v-712h120v712c0 22.092 17.91 40 40 40 22.086 0 40-17.908 40-40v-712h77.056c22.094 0 40-17.91 40-40 0-22.092-17.91-40-40-40z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      paragraph
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M742.52 960c-76.266 0-163.184-32.364-258.338-96.194-73.798-49.504-136.41-106.904-175.938-146.34-43.282-43.222-105.612-111.376-156.842-190.682-66.576-103.062-95.348-196.038-85.518-276.344 8.952-73.326 50.674-134.292 120.664-176.304 10.95-6.63 23.76-10.134 37.054-10.134 32.752 0 71.124 23.354 120.764 73.494 36.434 36.802 70.108 79.22 89.472 106.644 46.698 66.176 60.686 107.352 48.286 142.136-12.638 35.538-35.534 55.704-52.25 70.428-5.662 5.006-9.95 8.854-13.070 12.262 4.040 7.542 11.744 19.868 26.054 37.476 42.388 52.076 90.548 89.024 111.972 100.874 3.308-2.96 7.11-7.168 12.352-13.152 14.87-16.81 35.062-39.636 70.482-52.28 7.978-2.842 16.498-4.276 25.35-4.276 44.172 0 108.804 44.078 155.246 81.056 45.834 36.494 103.292 90.498 127.104 132.612 22.602 39.596 14.982 68.64 4.596 86.006-48.138 80.296-119.862 122.718-207.44 122.718zM224.758 144.53c-47.558 29.426-73.566 67.28-79.468 115.618-7.494 61.224 17.17 136.326 73.308 223.226 49.902 77.252 112.994 144.35 146.16 177.472 30.296 30.222 91.906 88.17 163.988 136.524 81.738 54.83 153.662 82.63 213.772 82.63 58.618 0 103.506-26.526 137.138-81.076-0.47-1.536-1.532-4.062-3.854-8.132-14.584-25.794-57.006-69.202-105.642-108.156-58.776-47.074-96.708-63.894-106.756-64.982-15.348 5.826-25.020 16.758-36.178 29.372-12.542 14.318-28.31 32.316-55.476 41.528l-6.25 2.12h-6.598c-8.704 0-31.826 0-86.73-43.378-32.196-25.438-64.65-57.534-91.38-90.374-35.712-43.942-51.41-77.764-46.674-100.548l0.55-2.642 0.9-2.546c9.19-26 26.284-41.118 41.364-54.458 12.726-11.208 23.698-20.874 29.494-36.378-0.606-4.398-5.076-23.488-37.948-70.072-15.882-22.494-45.746-60.376-77.614-93.084-39.93-40.986-60.106-50.546-66.106-52.664z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      phone
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M920 64h-816c-22.092 0-40 17.91-40 40v816c0 22.094 17.908 40 40 40h816c22.092 0 40-17.906 40-40v-816c0-22.090-17.908-40-40-40zM880 144v449.782l-235.39-235.392c-7.502-7.5-17.676-11.714-28.286-11.714s-20.784 4.214-28.286 11.716l-169.804 169.804-40.958-40.958c-15.622-15.622-40.95-15.622-56.57 0l-176.708 176.708v-519.946h736.002zM144 880v-102.914l204.992-204.994 215.972 215.974c7.81 7.81 18.048 11.714 28.286 11.714s20.474-3.904 28.286-11.714c15.62-15.622 15.62-40.95 0-56.57l-146.732-146.73 141.522-141.524 263.676 263.68v173.078h-736.002zM356.174 400.542c52.466 0 95-42.536 95-95s-42.534-95-95-95-95 42.536-95 95 42.534 95 95 95zM356.174 250.542c30.326 0 55 24.672 55 55s-24.674 55-55 55-55-24.672-55-55 24.674-55 55-55z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      photo
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M512 959.916c-13.36 0-25.84-6.672-33.262-17.782l-242.080-362.324c-0.12-0.176-0.236-0.356-0.354-0.536-36.394-54.5-55.63-118.042-55.63-183.804 0-182.696 148.632-331.324 331.326-331.324 182.696 0 331.328 148.628 331.328 331.324 0 60.71-16.554 119.98-47.906 171.652-0.758 1.528-1.618 3.016-2.578 4.45l-5.786 8.664c-0.054 0.082-0.112 0.164-0.168 0.246-0.042 0.070-0.104 0.16-0.148 0.23l-241.484 361.426c-7.422 11.106-19.898 17.778-33.258 17.778zM303.458 535.784l0.026 0.040c0.038 0.054 0.158 0.238 0.194 0.292l208.324 311.796 212.374-317.86c0.376-0.696 0.778-1.382 1.198-2.062 24.7-39.708 37.758-85.532 37.758-132.52 0-138.582-112.746-251.324-251.328-251.324s-251.326 112.742-251.326 251.324c0 50.054 14.674 98.39 42.432 139.782 0.114 0.176 0.232 0.356 0.348 0.532zM512 304.4c49.98 0 90.64 40.66 90.64 90.64 0 49.976-40.66 90.636-90.64 90.636s-90.64-40.66-90.64-90.636c0-49.98 40.66-90.64 90.64-90.64zM512 224.4c-94.242 0-170.64 76.398-170.64 170.64s76.398 170.636 170.64 170.636 170.64-76.394 170.64-170.636-76.398-170.64-170.64-170.64v0z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      pin
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M878.78 477.856l-591.884-341.722c-9.464-5.464-18.426-8.050-26.386-8.048-19.516 0.002-33.002 15.546-33.002 42.338v683.446c0 26.792 13.482 42.338 33.002 42.338 7.96 0 16.924-2.586 26.386-8.048l591.884-341.722c32.664-18.864 32.664-49.724 0-68.582z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      play
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M921.002 473h-368.008v-368.004c0.002-22.090-17.906-39.996-39.996-39.996-22.088 0-39.998 17.91-39.998 40v368h-368.002c-22.094 0-40 17.908-39.998 40-0.002 22.090 17.904 39.996 39.996 39.996l368.004-0.002v368.010c0 22.094 17.908 40 40 39.996 22.090 0.004 39.996-17.902 39.996-39.996v-368.010h368.010c22.090 0.002 39.994-17.906 39.994-39.996-0-22.088-17.908-39.998-39.998-39.998z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      plus
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M472 473.188v-368c-0.004-22.092 17.906-40.002 40-40 22.090 0 40 17.906 40 40l-0.004 368.002c0.004 22.088-17.906 39.996-39.996 39.998-22.094 0.002-40.004-17.906-40-40zM746.804 201.726v0.188c-13.138-9.004-26.808-17.292-40.978-24.768-1.994-1.050-3.492-1.84-4.668-2.458-1.75-0.892-3.518-1.756-5.28-2.624-0.004-0.002-0.008-0.004-0.012-0.006-0.080-0.032-0.158-0.074-0.234-0.108-0.032-0.012-0.056-0.024-0.090-0.042l-0.006 0.008c-4.724-2.022-9.924-3.168-15.386-3.212-22.090-0.178-40.14 17.588-40.32 39.678-0.122 15.112 8.166 28.298 20.47 35.208 31.9 15.71 61.418 36.616 87.492 62.292 2.796 2.754 5.52 5.562 8.208 8.394v-0.146c59.436 62.664 92.062 144.352 92.062 231.056 0 89.748-34.95 174.124-98.412 237.588s-147.84 98.412-237.588 98.412-174.124-34.95-237.588-98.412-98.412-147.84-98.412-237.588c0-81.652 28.962-158.834 81.972-219.886 5.814-6.69 11.902-13.192 18.288-19.474 26.064-25.652 55.564-46.538 87.446-62.238 12.342-6.892 20.66-20.106 20.542-35.238-0.17-22.088-18.218-39.86-40.306-39.69-5.468 0.044-10.664 1.186-15.392 3.208l-0.004-0.008c-0.036 0.016-0.058 0.028-0.088 0.042-0.042 0.018-0.084 0.038-0.126 0.056-1.862 0.918-3.728 1.828-5.574 2.774-0.458 0.238-0.948 0.496-1.512 0.792-1.096 0.566-2.18 1.148-3.27 1.722-15.704 8.294-30.804 17.572-45.232 27.736v-0.124c-106.896 75.288-176.742 199.646-176.742 340.33 0 229.75 186.25 416 416 416s416-186.25 416-416c-0.002-142.654-71.82-268.52-181.26-343.462z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      power
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M925.922 304.496c-1.698-0.218-3.41-0.37-5.166-0.37h-88.64v-93.548c0.006-0.21-0.016-0.422-0.014-0.634 0.004-0.212 0.036-0.416 0.036-0.63 0-0.478-0.054-0.942-0.074-1.416-0.024-0.636-0.042-1.27-0.094-1.906-0.066-0.776-0.168-1.54-0.276-2.302-0.074-0.534-0.146-1.066-0.242-1.596-0.15-0.82-0.338-1.624-0.538-2.424-0.12-0.48-0.23-0.958-0.37-1.436-0.234-0.812-0.506-1.608-0.792-2.398-0.164-0.462-0.322-0.924-0.504-1.38-0.318-0.788-0.668-1.552-1.036-2.316-0.208-0.436-0.406-0.88-0.628-1.312-0.424-0.802-0.88-1.574-1.352-2.344-0.218-0.358-0.422-0.724-0.656-1.078-0.636-0.972-1.324-1.91-2.042-2.82-0.098-0.124-0.182-0.252-0.282-0.376-0.988-1.224-2.048-2.388-3.172-3.488l-104.004-104.882c-3.696-3.696-7.948-6.486-12.466-8.432-0.122-0.050-0.224-0.11-0.344-0.16-0.974-0.41-1.966-0.756-2.962-1.084-0.262-0.086-0.512-0.19-0.78-0.272-0.926-0.284-1.87-0.506-2.812-0.722-0.346-0.080-0.684-0.182-1.034-0.252-0.988-0.198-1.988-0.334-2.988-0.456-0.31-0.040-0.618-0.102-0.93-0.134-1.324-0.132-2.652-0.204-3.978-0.204h-455.67c-1.754 0-3.468 0.152-5.162 0.37-19.646 2.538-34.838 19.29-34.838 39.63v200h-87.356c-1.754 0-3.468 0.152-5.164 0.37-19.644 2.538-34.836 19.29-34.836 39.63v320c0 22.094 17.91 40 40 40h87.368v216c0 22.094 17.91 40 40 40h560.006c13.81 0 25.982-6.996 33.17-17.636 0.102-0.146 0.184-0.306 0.282-0.458 0.612-0.922 1.2-1.86 1.722-2.836 0.046-0.082 0.080-0.17 0.124-0.254 2.994-5.612 4.704-12.008 4.704-18.808 0 0 0 0 0-0.004v-216h88.624c13.808 0 25.982-6.996 33.168-17.636 0.104-0.148 0.186-0.308 0.286-0.458 0.612-0.922 1.198-1.862 1.72-2.836 0.046-0.082 0.082-0.172 0.124-0.256 2.994-5.61 4.702-12.008 4.702-18.806 0 0 0 0 0-0.004v-320c0-20.344-15.186-37.096-34.834-39.636zM272.116 144.128h375.634v65.186c0 1.38 0.070 2.746 0.208 4.090 2.048 20.168 19.080 35.91 39.792 35.91h64.366v54.812h-480v-159.998zM272.124 880.126v-327.998h480.006v327.998zM880.756 384.128v239.998h-48.624v-111.998c0-20.34-15.19-37.092-34.836-39.63-1.694-0.218-565.17-0.372-565.17-0.372-1.754 0-3.468 0.152-5.162 0.372-19.646 2.538-34.838 19.29-34.838 39.628v112h-47.368v-239.998zM664.124 608.126c22.092 0 40 17.908 40 40s-17.908 40-40 40h-304c-22.092 0-40-17.908-40-40s17.908-40 40-40h304zM704.124 784.126c0 22.092-17.908 40-40 40h-304c-22.092 0-40-17.908-40-40s17.908-40 40-40h304c22.092 0 40 17.908 40 40z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      print
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M512 144c98.296 0 190.708 38.28 260.214 107.784 69.506 69.508 107.786 161.922 107.786 260.216 0 98.296-38.28 190.708-107.786 260.214-69.506 69.508-161.918 107.786-260.214 107.786-98.294 0-190.708-38.28-260.216-107.786-69.504-69.506-107.784-161.916-107.784-260.214 0-98.294 38.28-190.708 107.784-260.216 69.508-69.504 161.922-107.784 260.216-107.784zM512 64c-247.424 0-448 200.576-448 448s200.576 448 448 448 448-200.576 448-448-200.576-448-448-448v0zM756.396 484.14l-125-125.436c-15.594-15.65-40.92-15.692-56.568-0.1-15.648 15.594-15.694 40.92-0.1 56.568l57.004 57.204h-335.67c-22.092 0-40 17.908-40 40s17.908 40 40 40h335.258l-56.508 56.368c-15.64 15.602-15.672 40.928-0.070 56.568 7.814 7.834 18.066 11.752 28.32 11.75 10.22 0 20.442-3.892 28.25-11.68l125-124.688c15.634-15.594 15.672-40.91 0.084-56.554z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      proceed
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M396.984 530.228c-12.040-5.090-23.676-10.896-34.898-17.38 1.846-42.512 89.218-80.984 112.798-84.736 7.402-1.178 7.568-21.526 7.568-21.526s-21.742-21.524-26.48-50.47c-12.748 0-20.622-30.77-7.874-41.596-0.532-11.398-16.384-89.468 63.878-89.468s64.408 78.070 63.876 89.468c12.75 10.826 4.876 41.596-7.872 41.596-4.738 28.948-26.482 50.47-26.482 50.47s0.168 20.348 7.568 21.526c23.836 3.792 112.846 43.050 112.846 86.102v6.894c-6.426 3.252-12.968 6.3-19.64 9.122-38.826 16.422-80.090 24.746-122.646 24.746-42.552-0.002-83.816-8.326-122.642-24.748zM800 145h-592.004v736h592.004c8.708 0 15.876-7.086 15.972-15.796v-704.246c-0.018-8.8-7.176-15.958-15.972-15.958zM800 65c52.944 0 95.872 42.858 95.992 95.772l0.012 0.014v705.334h-0.036c-0.602 52.502-43.324 94.88-95.968 94.88h-632.004c-22.090 0-40-17.906-40-40v-816c0-20.338 15.192-37.090 34.836-39.628 1.696-0.218 3.41-0.372 5.164-0.372h632.004zM736.282 792.998c0-11.044-8.956-20-20-20h-408.282c-11.044 0-20 8.956-20 20s8.956 20 20 20h408.282c11.044 0 20-8.956 20-20zM736.282 704.998c0-11.044-8.956-20-20-20h-408.282c-11.044 0-20 8.956-20 20s8.956 20 20 20h408.282c11.044 0 20-8.956 20-20zM736.282 616.998c0-11.044-8.956-20-20-20h-408.282c-11.044 0-20 8.956-20 20s8.956 20 20 20h408.282c11.044 0 20-8.956 20-20z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      profile
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M631 157c104 1 171 52 171 166v397a123 123 0 1 1-82 0V323c0-63-27-83-90-84h-24l22 23a41 41 0 1 1-58 58l-93-93a41 41 0 0 1 1-58l93-93a41 41 0 1 1 58 58l-23 23h25zM222 314a123 123 0 1 1 82 0v406a123 123 0 1 1-82 0V314zm41 564a41 41 0 1 0 0-82 41 41 0 0 0 0 82zm0-639a41 41 0 1 0 0-83 41 41 0 0 0 0 83zm498 639a41 41 0 1 0 0-82 41 41 0 0 0 0 82z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      pullrequest
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M828.782 195.218c-174.954-174.958-458.614-174.958-633.566 0-174.958 174.954-174.958 458.612 0 633.566 174.954 174.956 458.614 174.956 633.566 0 174.956-174.95 174.956-458.614 0-633.566zM772.214 772.216c-69.508 69.504-161.918 107.782-260.214 107.782-98.3 0-190.71-38.278-260.218-107.782-69.504-69.506-107.782-161.92-107.786-260.216 0.004-98.298 38.282-190.708 107.786-260.216 69.508-69.504 161.922-107.784 260.218-107.784 98.292 0 190.708 38.28 260.214 107.788 69.504 69.504 107.782 161.916 107.786 260.214-0.004 98.294-38.282 190.708-107.786 260.214zM512.996 784.784c-22.090 0-40-17.906-40-40v0c0-22.090 17.91-40 40-40v0c22.090 0 40.004 17.91 40.004 40v0c0 22.094-17.914 40-40.004 40v0zM552.996 572.27v52.898c0.004 22.088-17.906 39.996-39.996 40-22.094 0-40.004-17.908-40-40v-88c-0.004-21.752 17.372-39.416 38.996-39.952v-0.146c53.118 0 96.332-43.212 96.332-96.33 0-53.116-43.214-96.328-96.332-96.328-53.098 0-96.296 43.184-96.324 96.278 0 0.014 0 0.034 0 0.050 0 22.094-17.914 40-40.004 40s-40-17.906-40-40c0-97.382 78.946-176.328 176.328-176.328 97.386 0 176.332 78.946 176.332 176.328 0 83.268-57.722 153.048-135.332 171.53z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      question
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M913.852 702.796c-15.594-15.648-40.922-15.694-56.57-0.1l-57.204 57.006v-451.424c0-0.372-0.028-0.736-0.074-1.098-0.458-99.016-80.86-179.15-179.988-179.15-99.412 0-180 80.592-180 180 0 0.084 0.004 0.166 0.004 0.248h-0.004v343.504h-0.006c0 0.082 0.006 0.164 0.006 0.248 0 55.14-44.86 100-100 100s-100-44.86-100-100c0-0.084 0.006-0.166 0.006-0.248h-0.002v-483.752c0-22.092-17.91-40-40-40s-40.004 17.908-40.004 40v483.752c0 0.018 0.002 0.036 0.002 0.054 0 0.064-0.002 0.128-0.002 0.194 0 99.408 80.59 180 180 180 99.412 0 180-80.592 180-180 0-0.084-0.004-0.166-0.004-0.248h0.004v-343.504h0.008c0-0.082-0.008-0.164-0.008-0.248 0-55.138 44.86-100 100-100s100 44.862 100 100c0 0.084-0.008 0.166-0.008 0.248h0.070v451.008l-56.368-56.506c-15.602-15.642-40.93-15.67-56.566-0.070-7.836 7.814-11.754 18.066-11.754 28.32 0 10.218 3.894 20.442 11.68 28.252l124.692 125c15.594 15.632 40.91 15.67 56.554 0.084l125.434-125c15.652-15.598 15.692-40.92 0.102-56.57z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      redirect
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M359.016 943.608c-23.82 5.948-47.642 8.322-71.512 8.322-88.208 0-168.084-36.982-207.444-96.534-52.432-79.882-70.296-249.182 102.538-374.356 3.586 19.078 10.746 45.292 15.492 60.834-22.656 16.652-58.39 50.064-81.046 95.324-32.19 63.184-28.61 126.404 9.54 184.798 26.194 39.304 67.926 63.176 121.564 70.34 65.598 8.332 131.154-3.582 194.332-36.94 92.998-48.898 155.014-107.282 195.49-187.162-10.702-10.75-17.818-26.248-19.074-44.15-1.168-36.942 27.45-67.922 64.388-69.132h2.418c35.73 0 65.55 28.61 66.714 64.384 1.206 35.73-24.986 65.546-59.548 69.132-65.6 134.686-181.254 225.312-333.852 255.14zM902.646 540.622c-90.59-106.072-224.11-164.488-376.708-164.488h-19.072c-10.744-21.444-33.402-35.752-58.388-35.752h-2.418c-36.944 1.186-65.548 32.192-64.392 69.13 1.216 35.774 30.99 64.394 66.81 64.394h2.328c26.242-1.208 48.894-17.892 58.434-40.542h21.45c90.624 0 176.46 26.234 253.968 77.482 59.55 39.36 102.49 90.576 126.356 152.596 20.24 50.052 19.074 98.952-2.42 140.64-33.356 63.228-89.37 97.794-163.292 97.794-47.69 0-92.998-14.33-116.822-25.082-13.118 11.958-36.984 31.028-53.64 42.944 51.226 23.87 103.7 36.94 153.762 36.94 114.446 0 199.070-63.132 231.268-126.362 34.562-69.13 32.188-188.326-57.224-289.694zM297.046 708.706c1.21 35.828 30.984 64.394 66.764 64.394h2.368c36.992-1.168 65.556-32.15 64.39-69.132-1.162-35.732-30.984-64.394-66.758-64.394h-2.376c-2.418 0-5.958 0-8.332 1.208-48.89-81.090-69.132-169.27-62.014-264.648 4.792-71.528 28.616-133.516 70.346-184.766 34.568-44.106 101.326-65.57 146.598-66.758 126.402-2.396 180.044 154.968 183.576 218.144 15.542 3.584 41.734 11.936 59.644 17.892-14.328-193.118-133.526-293.266-247.97-293.266-107.28 0-206.236 77.484-245.552 191.932-54.848 152.596-19.070 299.212 47.644 414.826-5.912 8.374-9.494 21.498-8.328 34.568z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      redux
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M679.496 431.738c-0.414-0.062-0.834-0.102-1.266-0.102h-477.482l171.506-171.504c15.622-15.622 15.622-40.95-0.002-56.57-15.62-15.624-40.948-15.624-56.568 0l-239.734 239.732c-0.958 0.956-1.868 1.958-2.724 3.006-0.328 0.402-1.884 2.482-2.324 3.138-0.36 0.54-1.696 2.77-2.008 3.352-0.308 0.58-1.424 2.936-1.676 3.544-0.036 0.086-0.468 1.268-0.648 1.774-0.23 0.636-0.474 1.266-0.672 1.918-0.186 0.612-0.818 3.13-0.95 3.788-0.148 0.748-0.522 3.318-0.574 3.862-0.262 2.642-0.262 5.3 0 7.942 0.044 0.448 0.412 3.032 0.58 3.874 0.112 0.556 0.74 3.088 0.958 3.808 0.158 0.524 1.036 2.992 1.328 3.7 0.192 0.458 1.298 2.828 1.688 3.552 0.208 0.386 0.446 0.75 0.666 1.126 0.436 0.752 1.844 2.888 2.084 3.224 0.52 0.724 4.262 5.074 4.29 5.098l239.718 239.72c15.62 15.618 40.948 15.618 56.57 0 15.62-15.624 15.622-40.948 0-56.57l-171.516-171.514h471.296c114.52 0.084 207.688 93.124 207.988 207.594 0 0.084-0.012 0.164-0.012 0.248v95.876c-0.004 22.094 17.906 40.002 40 40 22.090-0.002 40-17.91 39.996-39.998l0.004-95.57h0.020c0-156.594-124.914-284.012-280.536-288.048z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      reply
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M856.020 159.804c-0.122-52.916-43.048-95.774-95.992-95.774h-591.968c-1.754 0-3.468 0.154-5.164 0.37-19.644 2.54-34.836 19.292-34.836 39.63v784.584c0 22.094 17.91 40 40 40h151.972v63.594c0 10.876 6.548 20.682 16.598 24.844 10.046 4.164 21.612 1.87 29.304-5.818l34.78-34.748 34.78 34.748c5.144 5.14 12.020 7.87 19.014 7.87 3.466 0 6.962-0.672 10.292-2.052 10.048-4.164 16.598-13.968 16.598-24.844v-63.594h278.63c52.642 0 95.368-42.38 95.968-94.882h0.036v-673.916l-0.012-0.012zM776.020 159.988l-0.014 504.628h-519.974v-520.584h503.996c8.796-0 15.972 7.158 15.992 15.956zM760.028 848.616h-278.63v-56h-161.366v56h-111.972v-104h567.944l-0.002 88.204c-0.102 8.71-7.27 15.796-15.974 15.796zM320.032 240.396c0-17.67 14.328-31.998 31.998-31.998s32.002 14.326 32.002 31.998c0 17.674-14.332 32-32.002 32-17.672-0.002-31.998-14.326-31.998-32zM320.032 349.79c0-17.67 14.328-31.998 31.998-31.998s32.002 14.328 32.002 31.998c0 17.676-14.332 32-32.002 32-17.672 0-31.998-14.324-31.998-32zM320.032 459.188c0-17.67 14.328-32 31.998-32s32.002 14.328 32.002 32c0 17.674-14.332 31.998-32.002 31.998-17.672 0-31.998-14.324-31.998-31.998zM384.032 568.582c0 17.674-14.332 31.998-32.002 31.998s-31.998-14.324-31.998-31.998c0-17.67 14.328-32 31.998-32 17.67 0.002 32.002 14.33 32.002 32z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      repository
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M925.164 193.396c-1.696-0.214-3.41-0.368-5.164-0.368h-816c-1.754 0-3.468 0.152-5.16 0.368-19.648 2.54-34.84 19.292-34.84 39.632v560c0 22.094 17.91 40 40 40h111.886v86.004c0 22.090 17.91 40 40 40 0.292 0 0.582-0.040 0.876-0.046 10.536 0.238 21.144-3.624 29.18-11.67l114.292-114.286h519.766c13.808 0 25.98-6.996 33.168-17.636 0.102-0.144 0.184-0.304 0.282-0.458 0.614-0.922 1.2-1.86 1.722-2.836 0.046-0.082 0.082-0.172 0.124-0.254 2.988-5.618 4.704-12.008 4.704-18.812v0-560c-0-20.346-15.192-37.098-34.836-39.638zM880 753.028h-736v-480h736v480zM756.334 484.17l-125-125.436c-15.594-15.65-40.92-15.692-56.568-0.1-15.648 15.594-15.694 40.92-0.1 56.568l57.004 57.204h-335.67c-22.092 0-40 17.908-40 40s17.908 40 40 40h335.258l-56.508 56.368c-15.64 15.602-15.672 40.928-0.070 56.57 7.814 7.832 18.066 11.752 28.32 11.75 10.22 0 20.442-3.892 28.25-11.68l125-124.688c15.634-15.596 15.672-40.912 0.084-56.556z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      requestchange
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M256.094 865.048c0 53.020-42.972 96-96 96-53.020 0-96-42.98-96-96 0-53.016 42.98-96 96-96s96 42.984 96 96zM510.020 918.352c-0.018-0.172-0.042-0.344-0.050-0.52-0.054-0.676-0.124-1.34-0.214-2.004-10.582-105.644-57.866-200.46-128.894-271.536v0c-71.074-71.054-165.906-118.352-271.564-128.934-0.664-0.090-1.33-0.16-2.006-0.214-0.174-0.016-0.348-0.040-0.52-0.054-0.254-0.024-0.5-0.024-0.742-0.008-0.64-0.032-1.278-0.098-1.922-0.098-22.098 0-40 17.908-40 40 0 20.582 15.542 37.516 35.536 39.738 0.042 0.004 0.066 0.036 0.106 0.040 84.82 8.098 163.514 45.024 224.542 106.042v0c61.036 61.036 97.964 139.738 106.070 224.574 0.004 0.040 0.036 0.070 0.042 0.106 2.222 19.988 19.156 35.536 39.736 35.536 22.092 0 40-17.902 40-40 0-0.644-0.066-1.282-0.098-1.922 0-0.246 0-0.492-0.022-0.746zM734.688 918.45c-0.004-0.090-0.018-0.186-0.024-0.276-0.040-0.544-0.058-1.102-0.124-1.638-10.972-167.816-83.558-318.804-195.33-430.616h0.002c-111.812-111.788-262.81-184.384-430.644-195.36-0.542-0.060-1.094-0.084-1.642-0.122-0.092-0.008-0.182-0.016-0.272-0.022-0.020-0.002-0.042 0.004-0.054 0.004-0.836-0.052-1.664-0.124-2.512-0.124-22.092 0-40 17.908-40 40 0 21.036 16.246 38.24 36.874 39.842 0.046 0.008 0.078 0.038 0.128 0.042 66.876 4.086 131.786 19.292 193.406 45.358 70.472 29.81 133.78 72.494 188.166 126.874v0c54.394 54.396 97.090 117.71 126.902 188.204 26.064 61.624 41.274 126.532 45.362 193.408 0.004 0.052 0.036 0.080 0.042 0.13 1.604 20.624 18.802 36.87 39.844 36.87 22.090 0 40-17.904 40-40 0-0.85-0.074-1.678-0.126-2.514-0.002-0.024 0.006-0.040 0.002-0.060zM959.126 920.556c-0.002-0.094 0.008-0.164 0.004-0.262-10.342-231.204-108.314-439.604-261.486-592.796v-0.002c-153.2-153.19-361.61-251.174-592.828-261.518-0.096-0.004-0.168 0.006-0.262 0.004-0.176-0.004-0.348-0.030-0.524-0.030-22.098 0-40 17.91-40 40 0 20.988 16.168 38.164 36.716 39.834 0.184 0.042 0.356 0.086 0.566 0.098 97.040 4.314 191.186 25.538 280.376 63.258 97.14 41.090 184.406 99.928 259.368 174.876v0c74.96 74.964 133.81 162.24 174.908 259.398 37.718 89.19 58.946 183.336 63.26 280.376 0.010 0.208 0.052 0.38 0.096 0.562 1.67 20.552 18.848 36.72 39.834 36.72 22.092 0 40-17.906 40-40-0-0.17-0.024-0.342-0.028-0.518z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      rss
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M218 670a318 318 0 0 1 0-451 316 316 0 0 1 451 0 318 318 0 0 1 0 451 316 316 0 0 1-451 0m750 240L756 698a402 402 0 1 0-59 60l212 212c16 16 42 16 59 0 16-17 16-43 0-60"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      search
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M896.006 920c0 22.090-17.91 40-40 40h-688.006c-22.090 0-40-17.906-40-40v-549.922c-0.838-3.224-1.33-6.588-1.33-10.072 0-22.090 17.908-40.004 40-40.004h178.66c22.092 0.004 40 17.914 40 40.004 0 22.088-17.908 40-40 40h-137.33v479.996h607.998v-479.996h-138.658c-22.090 0-40-17.912-40-40 0-22.090 17.906-40.004 40-40.004h178.658c22.090 0 40 17.91 40 40v559.844c0 0.050 0.008 0.102 0.008 0.154zM665.622 200.168l-124.452-124.45c-8.042-8.042-18.65-11.912-29.186-11.674-1.612-0.034-3.222 0-4.828 0.16-0.558 0.054-1.098 0.16-1.648 0.238-0.742 0.104-1.484 0.192-2.218 0.338-0.656 0.13-1.29 0.31-1.934 0.472-0.622 0.154-1.244 0.292-1.86 0.476-0.64 0.196-1.258 0.436-1.886 0.66-0.602 0.216-1.208 0.414-1.802 0.66-0.598 0.248-1.17 0.54-1.754 0.814-0.598 0.282-1.202 0.546-1.788 0.86-0.578 0.312-1.13 0.664-1.694 1-0.552 0.332-1.116 0.644-1.654 1.006-0.67 0.448-1.3 0.942-1.942 1.426-0.394 0.302-0.806 0.576-1.196 0.894-1.046 0.858-2.052 1.768-3.008 2.726l-124.398 124.39c-15.622 15.62-15.618 40.948 0.002 56.57 15.622 15.62 40.95 15.62 56.568 0l56.164-56.166v439.426c0 22.094 17.912 40 40.002 40 22.092 0 40-17.91 40-40v-441.202l57.942 57.942c15.622 15.624 40.948 15.62 56.568 0 15.626-15.618 15.626-40.946 0.002-56.566z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      share
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M875.146 148.994c-0.064-0.040-0.116-0.094-0.184-0.132-92.714-52.39-221.036-84.83-362.846-84.83-138.512 0-270.346 34.356-362.51 84.618-0.606 0.33-1.138 0.658-1.608 0.986-11.954 6.918-20.016 19.81-20.016 34.614v451.4c0 12.7 5.938 23.996 15.166 31.32l340.538 281.676c6.568 6.434 14.918 10.168 23.564 11.122 0.16 0.024 0.32 0.050 0.48 0.066 0.838 0.082 1.676 0.114 2.518 0.14 0.496 0.020 0.994 0.058 1.492 0.058s0.996-0.040 1.492-0.058c0.842-0.032 1.68-0.058 2.518-0.14 0.16-0.016 0.32-0.042 0.48-0.066 8.646-0.958 16.996-4.688 23.564-11.122l339.36-280.718c10.326-7.23 17.094-19.2 17.094-32.762v-450.918c0.002-15.254-8.54-28.506-21.102-35.254zM207.984 208.212c36.292-18.168 77.668-32.854 123.356-43.722 57.062-13.576 117.884-20.458 180.778-20.458s123.714 6.882 180.778 20.458c30.186 7.182 58.474 16.040 84.674 26.456l-490.846 490.848-78.738-65.070v-408.512zM511.742 867.75l-163.078-134.77 467.586-467.584v350.69l-304.508 251.664z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      shield
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M920.032 127.858h-816c-22.092 0-40 17.908-40 40v688c0 22.092 17.908 40 40 40h316.578c1.13 0.096 2.266 0.172 3.422 0.172s2.292-0.078 3.424-0.172h492.576c22.092 0 40-17.908 40-40v-688c0-22.092-17.908-40-40-40zM144.032 207.858h240v608h-240v-608zM880.032 815.858h-416v-608h416v608zM198.734 288.030c0-17.674 14.328-32 32.002-32h66.396c17.672 0 32 14.326 32 32 0 17.676-14.324 32-32 32h-66.398c-17.674 0-32-14.326-32-32zM198.734 416.030c0-17.674 14.328-32 32.002-32h66.396c17.672 0 32 14.326 32 32 0 17.676-14.324 32-32 32h-66.398c-17.674 0-32-14.326-32-32zM198.734 544.030c0-17.674 14.328-32 32.002-32h66.396c17.672 0 32 14.326 32 32 0 17.676-14.324 32-32 32h-66.398c-17.674 0-32-14.326-32-32z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      sidebar
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M64 167.944v688c0 22.092 17.908 40 40 40h816c22.092 0 40-17.908 40-40v-688c0-22.092-17.908-40-40-40h-816c-22.092 0-40 17.908-40 40zM880 815.944h-240v-608h240v608zM144 207.944h416v608h-416v-608zM793.296 320.118h-66.398c-17.676 0-32-14.324-32-32 0-17.674 14.328-32 32-32h66.396c17.674 0 32.002 14.326 32.002 32 0 17.672-14.324 32-32 32zM793.296 448.118h-66.398c-17.676 0-32-14.324-32-32 0-17.674 14.328-32 32-32h66.396c17.674 0 32.002 14.326 32.002 32 0 17.672-14.324 32-32 32zM793.296 576.118h-66.398c-17.676 0-32-14.324-32-32 0-17.674 14.328-32 32-32h66.396c17.674 0 32.002 14.326 32.002 32 0 17.672-14.324 32-32 32z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      sidebaralt
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M692.070 580.856c18.156-18.156 28.152-42.266 28.152-67.89-0.008-25.622-10.002-49.726-28.148-67.872-8.476-8.478-18.308-15.188-29-19.922-0.222-0.098-0.408-0.22-0.566-0.364-13.294-6.5-22.476-20.116-22.476-35.914 0-22.090 17.91-40 40-40 5.774 0 11.246 1.248 16.204 3.45 0.016 0.006 0.026 0.008 0.040 0.016 19.292 8.656 37.036 20.832 52.368 36.164 33.254 33.254 51.574 77.446 51.58 124.43 0.006 46.996-18.31 91.204-51.58 124.472-15.064 15.062-32.45 27.074-51.344 35.7-0.154 0.070-0.286 0.112-0.434 0.176-5.124 2.382-10.812 3.75-16.832 3.75-22.090 0-40-17.906-40-40 0-16.196 9.644-30.112 23.488-36.402 0.156-0.11 0.32-0.216 0.516-0.304 10.314-4.712 19.81-11.268 28.032-19.49zM861.778 275.386c-47.824-47.824-107.946-79.588-173.204-92.242-0.356-0.078-0.712-0.146-1.072-0.214-0.060-0.012-0.124-0.026-0.186-0.038-0.506-0.096-0.976-0.162-1.422-0.208-1.918-0.282-3.868-0.476-5.864-0.476-22.090 0-40 17.91-40 40 0 19.024 13.292 34.91 31.084 38.968 0.352 0.128 0.728 0.244 1.162 0.326 48.7 9.268 95.226 32.748 132.934 70.452 99.972 99.972 100.054 261.984-0.002 362.040-37.684 37.684-84.152 61.14-132.788 70.426-0.084 0.016-0.144 0.046-0.224 0.066-18.338 3.644-32.166 19.816-32.166 39.222 0 22.094 17.91 40 40 40 2.776 0 5.484-0.286 8.102-0.822 0.094-0.018 0.172-0.018 0.27-0.038 65.32-12.626 125.496-44.406 173.376-92.286 131.008-131.008 131.008-344.172 0-475.176zM525.988 159.516v704.968c0 22.090-17.906 40-40 40-12.73 0-24.046-5.966-31.374-15.234l-51.056-61.722v0.216l-122.14-147.666h-177.386c-22.090 0-40-17.906-40-40v0 0-256c0-5.22 1.030-10.194 2.85-14.766 0.104-0.266 0.184-0.542 0.294-0.804 0.39-0.924 0.844-1.812 1.3-2.702 0.134-0.26 0.242-0.538 0.382-0.794 0.246-0.456 0.54-0.878 0.804-1.324 6.972-11.726 19.734-19.61 34.368-19.61h177.386l173.13-209.238c7.324-9.316 18.67-15.324 31.44-15.324 22.092-0 40.002 17.91 40.002 40zM445.988 270.826l-126.708 153.252h-175.248v176h175.248l19.832 23.998h0.17l106.708 129.112v-482.362z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      speaker
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M763.972 919.5c-6.368 0-12.758-1.518-18.61-4.596l-233.358-122.688-233.37 122.688c-13.476 7.090-29.808 5.904-42.124-3.042-12.318-8.95-18.486-24.118-15.912-39.124l44.57-259.856-188.792-184.028c-10.904-10.626-14.828-26.524-10.124-41.004s17.222-25.034 32.292-27.222l260.906-37.912 116.686-236.42c6.738-13.652 20.644-22.296 35.87-22.296v0c15.226 0 29.13 8.644 35.87 22.298l116.674 236.418 260.906 37.912c15.068 2.19 27.586 12.742 32.292 27.222s0.782 30.376-10.124 41.004l-188.792 184.028 44.24 257.93c0.62 2.796 0.946 5.704 0.946 8.688 0 22.054-17.848 39.942-39.888 40-0.054 0-0.106 0-0.158 0z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      star
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M763.972 919.5c-6.368 0-12.758-1.518-18.61-4.596l-233.358-122.688-233.37 122.688c-13.476 7.090-29.808 5.904-42.124-3.042-12.318-8.95-18.486-24.118-15.912-39.124l44.57-259.856-188.792-184.028c-10.904-10.626-14.828-26.524-10.124-41.004s17.222-25.034 32.292-27.222l260.906-37.912 116.686-236.42c6.738-13.652 20.644-22.296 35.87-22.296v0c15.226 0 29.13 8.644 35.87 22.298l116.674 236.418 260.906 37.912c15.068 2.19 27.586 12.742 32.292 27.222s0.782 30.376-10.124 41.004l-188.792 184.028 44.24 257.93c0.62 2.796 0.946 5.704 0.946 8.688 0 22.054-17.848 39.942-39.888 40-0.054 0-0.106 0-0.158 0zM190.256 428.144l145.812 142.13c9.428 9.192 13.73 22.432 11.504 35.406l-34.424 200.7 180.244-94.758c11.654-6.13 25.576-6.126 37.226 0l180.232 94.756-34.422-200.698c-2.226-12.974 2.076-26.214 11.504-35.406l145.812-142.13-201.51-29.282c-13.030-1.892-24.292-10.076-30.118-21.882l-90.114-182.596-90.122 182.598c-5.826 11.804-17.090 19.988-30.118 21.88l-201.506 29.282z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      starhollow
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M960 512a448 448 0 1 0-896 0 448 448 0 0 0 896 0zM252 772a366 366 0 0 1 0-520 366 366 0 0 1 520 0 366 366 0 0 1 0 520 366 366 0 0 1-520 0zm412-68H360c-22 0-40-18-40-40V360c0-22 18-40 40-40h304c22 0 40 18 40 40v304c0 22-18 40-40 40z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      stop
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M954.324 833.3c0.208-0.558 0.388-1.128 0.586-1.692 0.3-0.868 0.608-1.734 0.882-2.61 0.234-0.746 0.444-1.5 0.66-2.25 0.212-0.734 0.432-1.464 0.624-2.204 0.204-0.766 0.378-1.54 0.562-2.308 0.18-0.766 0.366-1.528 0.528-2.292 0.146-0.692 0.272-1.386 0.402-2.082 0.168-0.89 0.332-1.778 0.476-2.668 0.090-0.566 0.164-1.136 0.244-1.704 0.148-1.058 0.29-2.118 0.404-3.18 0.042-0.422 0.080-0.852 0.12-1.274 0.118-1.23 0.212-2.46 0.282-3.696 0.018-0.304 0.030-0.606 0.042-0.906 0.062-1.36 0.098-2.718 0.104-4.082 0-0.114 0.008-0.226 0.008-0.34 0-0.128-0.010-0.258-0.010-0.39-0.006-1.368-0.042-2.734-0.104-4.102-0.014-0.296-0.030-0.594-0.044-0.89-0.070-1.246-0.166-2.492-0.284-3.738-0.042-0.434-0.084-0.864-0.128-1.292-0.116-1.050-0.25-2.098-0.4-3.144-0.088-0.628-0.18-1.258-0.282-1.882-0.13-0.8-0.276-1.598-0.428-2.394-0.162-0.868-0.332-1.73-0.518-2.594-0.116-0.524-0.24-1.046-0.364-1.57-0.264-1.128-0.542-2.25-0.846-3.36-0.070-0.254-0.144-0.504-0.214-0.754-11.38-40.382-48.464-69.996-92.488-69.996-3.066 0-6.096 0.16-9.088 0.442l-264.576-458.262c21.080-29.698 24.3-70.13 4.9-103.732-12.596-21.816-32.458-36.812-54.764-43.724-0.062-0.020-0.124-0.036-0.186-0.054-1.394-0.43-2.798-0.83-4.21-1.196-0.296-0.076-0.596-0.142-0.894-0.216-1.208-0.3-2.422-0.586-3.642-0.84-0.384-0.082-0.774-0.148-1.16-0.224-1.168-0.228-2.338-0.444-3.514-0.626-0.384-0.060-0.776-0.112-1.162-0.168-1.208-0.174-2.416-0.332-3.63-0.46-0.35-0.038-0.7-0.066-1.048-0.1-1.27-0.12-2.54-0.218-3.814-0.29-0.32-0.018-0.642-0.032-0.964-0.044-1.294-0.058-2.594-0.094-3.892-0.1-0.166 0-0.328-0.012-0.492-0.012-0.19 0-0.376 0.014-0.564 0.014-1.21 0.008-2.42 0.040-3.63 0.092-0.494 0.022-0.986 0.046-1.478 0.074-0.992 0.060-1.986 0.136-2.978 0.226-0.722 0.064-1.442 0.134-2.16 0.214-0.696 0.080-1.392 0.17-2.090 0.266-1.014 0.136-2.026 0.286-3.032 0.452-0.352 0.060-0.704 0.124-1.054 0.19-44.97 8.028-79.122 47.302-79.122 94.582 0 20.756 6.602 39.958 17.79 55.67l-264.58 458.26c-2.954-0.274-5.94-0.434-8.962-0.434-53.078 0-96.11 43.032-96.11 96.11 0 53.082 43.032 96.11 96.11 96.11 38.8 0 72.208-23.004 87.386-56.11l529.202-0.004c0.138 0.304 0.292 0.606 0.436 0.91 0.226 0.48 0.456 0.958 0.69 1.434 0.474 0.968 0.966 1.93 1.476 2.882 0.214 0.402 0.432 0.8 0.65 1.2 0.314 0.566 0.604 1.14 0.93 1.708 0.284 0.488 0.59 0.958 0.88 1.442 0.122 0.2 0.244 0.398 0.37 0.602 27.086 44.372 84.766 59.278 130.040 33.136 18.864-10.89 32.624-27.214 40.478-45.852 0.054-0.132 0.104-0.266 0.158-0.398 0.518-1.248 1.020-2.506 1.486-3.776zM238.414 744.282l264.542-458.204c0.424 0.042 0.85 0.064 1.276 0.098 0.668 0.056 1.334 0.112 2.004 0.152 0.652 0.040 1.306 0.066 1.96 0.092 1.122 0.046 2.244 0.076 3.368 0.084 0.146 0.002 0.292 0.012 0.438 0.012 0.168 0 0.334-0.012 0.502-0.014 1.436-0.004 2.874-0.040 4.31-0.108 0.088-0.006 0.176-0.010 0.262-0.014 1.376-0.070 2.75-0.168 4.124-0.296l264.596 458.298c-3.48 4.894-6.514 10.122-9.042 15.636h-529.226c-2.546-5.55-5.602-10.814-9.114-15.736z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      structure
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm3 83a366 366 0 0 0-368 368 366 366 0 0 0 368 368 366 366 0 0 0 369-368 366 366 0 0 0-369-368zM295 472h434a40 40 0 0 1 0 80H295a40 40 0 1 1 0-80z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      subtract
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M828.814 195.216c-174.956-174.956-458.614-174.956-633.566 0-174.958 174.956-174.956 458.612 0 633.568s458.614 174.956 633.566 0c174.958-174.956 174.956-458.612 0-633.568zM813.592 723.072l-92.714-92.712c41.542-73.186 41.548-163.544 0.016-236.734l92.7-92.698c43.176 61.41 66.44 134.45 66.44 211.074-0.004 76.62-23.266 149.662-66.442 211.070zM398.916 625.116c-62.382-62.384-62.382-163.89 0-226.274 30.216-30.216 70.398-46.86 113.146-46.864h0.010c42.724 0 82.898 16.642 113.12 46.866 62.382 62.38 62.382 163.886 0 226.272-30.22 30.22-70.4 46.864-113.136 46.864-42.74-0.002-82.92-16.644-113.14-46.864zM723.104 210.44l-92.696 92.698c-36.59-20.766-77.464-31.162-118.356-31.158-40.888 0.004-81.78 10.406-118.378 31.178l-92.714-92.716c61.408-43.176 134.452-66.438 211.070-66.44 76.622-0.004 149.668 23.262 211.074 66.438zM210.472 300.928l92.724 92.726c-41.512 73.176-41.506 163.506 0.016 236.678l-92.742 92.74c-43.176-61.408-66.438-134.454-66.44-211.072 0.004-76.624 23.264-149.664 66.442-211.072zM512.032 880c-76.624-0.002-149.666-23.264-211.072-66.44l92.74-92.742c36.59 20.766 77.464 31.16 118.356 31.16 40.868 0 81.738-10.392 118.322-31.144l92.726 92.726c-61.408 43.176-134.454 66.44-211.072 66.44z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      support
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M923.946 63.418h-631.232c-20.268 0-36.7 16.432-36.7 36.7v155.286h-155.284c-20.268 0-36.7 16.432-36.7 36.7v631.23c0 20.268 16.43 36.7 36.7 36.7h631.23c20.272 0 36.7-16.432 36.7-36.7v-155.286h155.286c20.272 0 36.7-16.432 36.7-36.7v-631.23c-0.002-20.268-16.43-36.7-36.7-36.7zM688.66 880.032h-544.628v-544.628h111.984v395.946c0 20.268 16.43 36.7 36.7 36.7h395.944v111.982zM688.66 688.046h-352.644v-352.644h352.644v352.644zM880.644 688.046h-111.984v-395.946c0-20.268-16.428-36.7-36.7-36.7h-395.944v-111.984h544.628v544.63z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      switchalt
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M998.786 474.516l-91 90.988c-8.028 8.036-18.624 11.902-29.152 11.676-10.536 0.234-21.144-3.632-29.184-11.676l-92.3-92.296c-15.624-15.622-15.624-40.95 0-56.57 15.622-15.622 40.95-15.624 56.57 0l26.146 26.148c-13.774-61.416-44.624-117.806-90.216-163.394-63.46-63.464-147.84-98.414-237.586-98.414-89.75 0-174.128 34.95-237.59 98.414-27.012 27.012-48.836 57.824-65.024 91.214l-0.008-0.004c-6.722 12.632-20.008 21.242-35.32 21.242-22.090 0-40-17.906-40-40 0-5.464 1.102-10.668 3.086-15.414l-0.004-0.004c0.016-0.032 0.024-0.058 0.040-0.090 0.036-0.078 0.070-0.156 0.106-0.234 0.73-1.632 0.208-0.718 5.004-9.996 69.18-133.726 208.766-225.128 369.71-225.128 203.224 0 372.374 145.734 408.728 338.392l21.424-21.424c15.618-15.622 40.946-15.622 56.566 0s15.624 40.948 0.004 56.57zM889.992 682.11c0 5.464-1.106 10.672-3.090 15.414l0.008 0.004c-0.016 0.036-0.028 0.058-0.040 0.090-0.036 0.078-0.074 0.156-0.106 0.234-0.73 1.636-0.208 0.718-5.008 10-69.176 133.722-208.762 225.124-369.708 225.124-205.2 0-375.668-148.578-409.76-344.022l-19.478 19.478c-15.622 15.622-40.95 15.622-56.57 0-15.618-15.622-15.622-40.95 0-56.57l90.996-90.992c8.032-8.032 18.628-11.902 29.152-11.672 10.536-0.238 21.144 3.632 29.188 11.672l92.296 92.3c15.624 15.618 15.624 40.946 0 56.566-15.618 15.622-40.946 15.624-56.566 0.004l-29.292-29.292c12.466 65.568 44.214 125.882 92.448 174.116 63.46 63.46 147.84 98.41 237.586 98.41 89.75 0 174.124-34.95 237.59-98.41 27.012-27.012 48.836-57.824 65.020-91.218l0.008 0.004c6.726-12.632 20.012-21.242 35.324-21.242 22.092 0.002 40.002 17.912 40.002 40.002zM145.83 545.416l1.4 0.248-0.824-0.824-0.576 0.576z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      sync
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M200.022 927.988h624.018c1.38 0 2.746-0.072 4.090-0.208 20.168-2.050 35.91-19.080 35.91-39.792v-751.916c0-22.092-17.91-40-40-40h-624.018c-22.098 0-40 17.908-40 40v751.916c0 22.094 17.906 40 40 40zM512.002 878.206c-17.674 0-32.004-14.328-32.004-31.998 0-17.678 14.33-32.002 32.004-32.002 17.67 0 32 14.324 32 32.002 0 17.67-14.33 31.998-32 31.998zM240.022 176.078h544.018v591.902h-544.018v-591.902z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      tablet
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M256.972 768.004c0-8.67-3.156-16.158-9.484-22.534-6.332-6.34-13.836-9.484-22.504-9.458-8.682 0-16.188 3.172-22.516 9.458-6.33 6.344-9.488 13.84-9.488 22.534 0 8.692 3.158 16.186 9.488 22.532 6.328 6.286 13.834 9.458 22.516 9.458 8.668 0.028 16.172-3.118 22.504-9.458 6.328-6.376 9.484-13.868 9.484-22.532zM832.948 480.010c0-17.004-6.478-31.908-19.468-44.734-13.014-12.82-27.834-19.25-44.512-19.276h-175.97c0-19.328 7.98-45.904 24.004-79.724 15.968-33.826 23.978-60.568 23.978-80.256 0-32.646-5.332-56.808-15.994-72.48-10.664-15.664-31.988-23.484-63.98-23.484-8.696 8.64-15.012 22.828-19.032 42.486-4.020 19.69-9.102 40.606-15.254 62.752-6.168 22.172-16.080 40.382-29.762 54.738-7.344 7.68-20.168 22.832-38.5 45.496-1.326 1.67-5.164 6.65-11.512 15.010-6.342 8.342-11.594 15.178-15.762 20.508-4.156 5.308-9.91 12.386-17.252 21.218-7.328 8.862-14 16.186-19.988 22.038-5.986 5.794-12.412 11.73-19.26 17.744-6.852 5.984-13.508 10.5-19.99 13.48-6.478 3.010-12.4 4.484-17.756 4.512h-15.982v320.010h15.982c4.332 0 9.596 0.492 15.774 1.504 6.168 1.012 11.676 2.080 16.488 3.258 4.812 1.144 11.154 2.98 19.002 5.466 7.862 2.512 13.702 4.424 17.502 5.74 3.812 1.31 9.732 3.422 17.756 6.238 8.026 2.842 12.866 4.586 14.506 5.272 70.324 24.334 127.304 36.504 170.996 36.504h60.482c64.006 0 96.024-27.836 96.024-83.478 0-8.664-0.848-18.016-2.514-27.996 10.004-5.334 17.936-14.084 23.758-26.276 5.824-12.172 8.724-24.416 8.778-36.746 0-12.366-3.008-23.844-9.024-34.51 17.664-16.682 26.524-36.496 26.524-59.496 0-8.308-1.696-17.554-5.032-27.72-3.336-10.202-7.492-18.104-12.468-23.762 10.636-0.328 19.55-8.15 26.714-23.486 7.192-15.34 10.744-28.82 10.744-40.496v-0.054zM896.984 479.516c0 29.638-8.204 56.816-24.5 81.506 2.98 10.994 4.484 22.476 4.484 34.482 0 25.674-6.344 49.68-19.004 71.99 1.012 7 1.506 14.164 1.506 21.488 0 33.688-10.008 63.354-29.968 89.026 0.326 46.32-13.834 82.904-42.518 109.756-28.682 26.848-66.522 40.246-113.496 40.246h-64.528c-31.99 0-63.542-3.746-94.742-11.268-31.168-7.492-67.246-18.402-108.23-32.758-38.662-13.312-61.656-19.956-68.984-19.956h-143.996c-17.664 0-32.742-6.292-45.252-18.784-12.508-12.5-18.756-27.588-18.756-45.254v-319.982c0-17.666 6.248-32.728 18.756-45.226 12.51-12.52 27.588-18.784 45.252-18.784h136.998c12.002-8.010 34.818-33.822 68.478-77.484 19.33-24.99 37.168-46.344 53.508-64.008 7.996-8.314 13.918-22.586 17.744-42.766 3.828-20.178 8.912-41.232 15.256-63.24 6.36-21.984 16.68-40.002 30.994-53.998 13.002-12.362 28.012-18.514 45.018-18.514 27.998 0 53.152 5.414 75.464 16.242 22.31 10.828 39.316 27.748 50.964 50.77 11.704 23.002 17.5 53.978 17.5 92.962 0 31.008-7.984 63-23.98 96.028h88.014c34.67 0 64.634 12.628 89.956 37.98 25.346 25.346 38.008 55.144 38.008 89.49l0.054 0.056z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      thumbsup
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M512 64c-247.424 0-448 200.578-448 448.004 0 247.422 200.576 448 448 448s448-200.578 448-448c0-247.424-200.576-448.004-448-448.004zM772.214 772.22c-69.508 69.504-161.918 107.786-260.214 107.786s-190.708-38.282-260.214-107.786c-69.508-69.508-107.786-161.918-107.786-260.214s38.278-190.708 107.786-260.214c69.508-69.504 161.918-107.786 260.214-107.786s190.708 38.278 260.214 107.786c69.504 69.508 107.786 161.918 107.786 260.214s-38.282 190.706-107.786 260.214zM768.004 517.004c0 22.090-17.91 40-40 40h-216c-5.384 0-10.508-1.078-15.196-3.008-0.124-0.046-0.254-0.086-0.376-0.132-0.61-0.262-1.188-0.57-1.782-0.86-0.572-0.278-1.16-0.528-1.718-0.828-0.204-0.114-0.39-0.246-0.594-0.364-0.918-0.516-1.832-1.050-2.704-1.64-0.086-0.058-0.164-0.128-0.254-0.188-10.492-7.21-17.382-19.286-17.382-32.98v-285c0-22.094 17.91-40 40.004-40 22.088 0 40 17.906 40 40v244.996h175.996c22.094 0 40.002 17.916 40.006 40.004z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      time
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M576 540.658c0 35.344-28.654 64-64 64s-64-28.656-64-64c0-20.27 9.432-38.324 24.134-50.050v-193.418c-0.004-22.092 17.906-40.002 40-40 22.090 0 40 17.906 40 40l-0.004 193.626c14.552 11.732 23.87 29.692 23.87 49.842zM928.32 543.934c0 229.79-186.28 416.066-416.068 416.066-229.786 0-416.064-186.278-416.064-416.066 0-216.26 164.998-393.958 375.97-414.134l0.188-49.794h-16.348c-22.092 0-40.002-17.91-39.998-40 0-22.090 17.906-40.004 40-40.004l112 0.002c22.090-0.002 39.998 17.91 40 40 0 22.090-17.908 40-40 39.998h-15.656l-0.19 49.782c77.246 7.352 148.33 35.812 207.422 79.564l41.854-41.856c15.622-15.622 40.95-15.618 56.57 0.002s15.622 40.948 0 56.568l-38.9 38.9c67.822 74.028 109.22 172.66 109.22 280.972zM848.32 543.934c0-89.768-34.958-174.16-98.432-237.634s-147.87-98.432-237.636-98.432c-89.766 0-174.158 34.958-237.632 98.432s-98.432 147.868-98.432 237.634c0 89.766 34.958 174.16 98.432 237.636 63.474 63.472 147.868 98.43 237.632 98.43 89.768 0 174.162-34.958 237.636-98.43 63.476-63.476 98.432-147.87 98.432-237.636z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      timer
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M916.25 348.726l-125 124.688c-7.808 7.79-18.032 11.68-28.25 11.68-10.254 0.002-20.506-3.918-28.32-11.75-15.602-15.64-15.57-40.966 0.070-56.568l56.508-56.368h-655.258c-22.092 0-40-17.908-40-40s17.908-40 40-40h655.672l-57.006-57.206c-15.594-15.646-15.548-40.972 0.1-56.566s40.972-15.55 56.568 0.098l125 125.438c15.588 15.644 15.548 40.958-0.084 56.554zM107.666 731.892l125 125.438c15.596 15.648 40.92 15.692 56.568 0.098s15.694-40.92 0.1-56.566l-57.006-57.206h655.672c22.092 0 40-17.908 40-40s-17.908-40-40-40h-655.258l56.508-56.368c15.64-15.602 15.672-40.928 0.070-56.568-7.814-7.832-18.066-11.752-28.32-11.75-10.218 0-20.442 3.89-28.25 11.68l-125 124.688c-15.632 15.596-15.672 40.91-0.084 56.554z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      transfer
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M919.5 225.208h-215.5v-120.080c0-20.344-15.192-37.096-34.836-39.632-1.696-0.216-3.41-0.372-5.164-0.372h-304.004c-1.754 0-3.468 0.152-5.164 0.372-19.644 2.54-34.836 19.292-34.836 39.628v120.084h-215.996c-22.090 0-40 17.912-40 40.002 0 22.092 17.91 40 40 40h27.216l53.916 615.914h0.214c0 22.092 17.91 40 40 40h573.372c22.094 0 40-17.91 40-40h0.148l53.916-615.914h26.716c22.090 0 40-17.91 40-40s-17.908-40.002-39.998-40.002zM399.996 145.126h224.004v80.082h-224.004v-80.082zM762.062 881.124h-500.124l-50.414-575.912h600.954l-50.416 575.912zM632.004 697.124v-240c-0.004-22.092 17.906-40.002 40-40.002 22.090 0.002 40 17.908 40 40.002l-0.004 240.002c0.004 22.088-17.906 39.996-39.996 39.998-22.094 0.002-40.004-17.906-40-40zM311.996 697.124v-240c-0.004-22.092 17.906-40.002 40-40.002 22.090 0.002 40 17.908 40 40.002l-0.004 240.002c0.004 22.088-17.906 39.996-39.996 39.998-22.094 0.002-40.004-17.906-40-40zM472 697.124v-240c-0.004-22.092 17.906-40.002 40-40.002 22.090 0.002 40 17.908 40 40.002l-0.004 240.002c0.004 22.088-17.906 39.996-39.996 39.998-22.094 0.002-40.004-17.906-40-40z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      trash
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M960 233.114c-32.946 14.616-68.41 24.5-105.598 28.942 37.954-22.762 67.098-58.774 80.856-101.688-35.52 21.054-74.894 36.368-116.726 44.598-33.542-35.724-81.316-58.038-134.204-58.038-101.496 0-183.796 82.292-183.796 183.814 0 14.424 1.628 28.45 4.758 41.89-152.75-7.668-288.22-80.872-378.876-192.072-15.822 27.15-24.898 58.706-24.898 92.42 0 63.776 32.458 120.034 81.782 153.010-30.116-0.944-58.458-9.212-83.262-22.982-0.028 0.75-0.028 1.546-0.028 2.324 0 89.070 63.356 163.334 147.438 180.256-15.426 4.186-31.664 6.426-48.442 6.426-11.836 0-23.35-1.146-34.574-3.28 23.406 73.006 91.286 126.16 171.726 127.632-62.914 49.324-142.18 78.696-228.314 78.696-14.828 0-29.448-0.876-43.842-2.568 81.33 52.138 177.96 82.574 281.786 82.574 338.11 0 523-280.104 523-523.014 0-7.986-0.164-15.914-0.542-23.778 35.952-25.96 67.124-58.318 91.756-95.162z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      twitter
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M230 301h480a240 240 0 1 1 0 481H235c-23 0-42-20-42-43 0-24 19-43 42-43h475a155 155 0 0 0 0-310H228l3 3 65 65a45 45 0 0 1-65 64L90 376a45 45 0 0 1 0-64l142-142a45 45 0 1 1 64 65l-63 62-3 4z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      undo
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M896.032 915.53v-467.498c0-1.988-0.194-3.926-0.472-5.834-0.11-0.744-0.192-1.498-0.34-2.226-1.524-7.44-5.136-14.1-10.164-19.408-0.252-0.266-0.48-0.554-0.738-0.814-0.496-0.494-1.036-0.944-1.554-1.412-0.43-0.386-0.84-0.8-1.288-1.17-0.292-0.24-0.608-0.446-0.904-0.676-2.506-1.954-5.244-3.616-8.176-4.934-0.744-0.334-1.504-0.632-2.27-0.922-4.39-1.656-9.124-2.604-14.094-2.604h-552.184l0.002-55.85c0-114.776 93.376-208.15 208.15-208.15 86.038 0 160.034 52.474 191.7 127.096 0.012 0.028 0.030 0.044 0.042 0.072 5.978 14.566 20.284 24.832 37.006 24.832 22.090 0 40-17.906 40-40 0-4.71-0.86-9.21-2.354-13.41-0.182-0.694-0.42-1.438-0.782-2.292-43.666-103.582-146.14-176.296-265.612-176.296-159.128 0-288.13 128.994-288.15 288.12v55.882h-54.85c-20.71 0-37.746 15.742-39.792 35.91-0.136 1.344-0.208 2.708-0.208 4.090v463.332c-0.618 2.794-0.968 5.688-0.968 8.668 0 22.094 17.91 40 40 40h688.27c22.092 0 40-17.91 40-40-0.002-1.528-0.104-3.028-0.27-4.506zM209 488.032h607.032v392h-607.032v-392zM552.164 691.86l-0.002 58.186c0.004 22.088-17.906 39.996-39.996 40-22.094 0-40.004-17.908-40-40v-57.976c-14.702-11.726-24.134-29.782-24.134-50.048 0-35.346 28.654-64 64-64s64 28.654 64 64c0 20.142-9.318 38.102-23.868 49.838z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      unlock
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M143.996 511.998c0-98.296 38.28-190.708 107.784-260.214 69.508-69.508 161.922-107.786 260.216-107.786 98.296 0 190.708 38.278 260.214 107.786s107.786 161.918 107.786 260.214c0 98.292-38.28 190.708-107.786 260.214-69.508 69.504-161.918 107.786-260.214 107.786-98.294 0-190.708-38.282-260.216-107.786-69.504-69.508-107.784-161.922-107.784-260.214zM63.996 511.998c0 247.422 200.576 448 448 448s448-200.578 448-448c0-247.426-200.576-448-448-448s-448 200.574-448 448v0zM485.324 267.598l-125.438 125c-15.648 15.596-15.692 40.922-0.098 56.57s40.92 15.692 56.566 0.098l57.206-57.004v335.672c0 22.090 17.908 40 40 40s40-17.91 40-40v-335.26l56.368 56.508c15.602 15.64 40.928 15.672 56.568 0.070 7.832-7.814 11.752-18.064 11.75-28.318 0-10.22-3.89-20.444-11.68-28.25l-124.688-125c-15.594-15.634-40.91-15.672-56.554-0.086z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      upload
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M512.062 65.062c-247.424 0-448 200.576-448 448s200.576 448 448 448 448-200.576 448-448-200.576-448-448-448zM776.324 769.132c-55.386-54.52-155.436-95.864-189.492-101.282-14.918-2.376-15.258-43.39-15.258-43.39s43.832-43.39 53.384-101.738c25.698 0 41.568-62.032 15.87-83.856 1.072-22.974 33.038-180.352-128.766-180.352s-129.836 157.376-128.768 180.352c-25.706 21.824-9.83 83.856 15.87 83.856 9.552 58.348 53.382 101.738 53.382 101.738s-0.34 41.020-15.256 43.39c-34.056 5.418-134.104 46.762-189.49 101.282-66.932-69.018-103.738-159.708-103.738-256.070 0-98.296 38.278-190.708 107.786-260.212 69.51-69.506 161.918-107.788 260.214-107.788s190.708 38.278 260.214 107.788c69.506 69.506 107.786 161.916 107.786 260.212-0 96.364-36.808 187.054-103.738 256.070z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      user
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M123.302 833.14c-26.284-11.118-51.696-23.792-76.196-37.95 4.028-92.818 194.792-176.82 246.28-185.012 16.158-2.57 16.526-46.994 16.526-46.994s-47.476-46.996-57.818-110.196c-27.836 0-45.024-67.186-17.19-90.824-1.158-24.882-35.776-195.34 139.468-195.34 175.242 0 140.628 170.458 139.464 195.34 27.838 23.638 10.644 90.824-17.188 90.824-10.346 63.2-57.822 110.196-57.822 110.196s0.37 44.424 16.528 46.994c52.042 8.282 246.38 93.996 246.38 187.988v15.054c-14.028 7.102-28.316 13.76-42.88 19.918-84.77 35.852-174.864 54.032-267.78 54.032-92.912 0.002-183.004-18.178-267.772-54.030zM910.064 335h-80.008v-80.010c0.002-22.088-17.906-39.992-39.996-39.992-22.088 0-39.998 17.906-39.998 39.996v80.006h-80.002c-22.094 0-40 17.908-39.998 40-0.002 22.090 17.904 39.996 39.996 39.996h80.004v80.002c0 22.094 17.908 40 40 40 22.090 0 39.996-17.906 39.996-39.996v-80.006l80.010-0.002c22.090 0.002 39.994-17.906 39.994-39.996 0-22.088-17.908-39.998-39.998-39.998z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      useradd
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M532.716 960c115.572 0 227.634-22.612 333.076-67.208 18.116-7.66 35.888-15.94 53.336-24.774v-18.726c0-116.912-241.728-223.528-306.458-233.828-20.1-3.198-20.556-58.458-20.556-58.458s59.050-58.452 71.922-137.062c34.618 0 56.004-83.57 21.378-112.972 1.448-30.95 44.5-242.972-173.474-242.972-217.976 0-174.916 212.022-173.476 242.972-34.622 29.402-13.244 112.972 21.38 112.972 12.864 78.61 71.916 137.062 71.916 137.062s-0.458 55.262-20.554 58.458c-64.042 10.19-301.326 114.674-306.334 230.124 30.474 17.61 62.084 33.376 94.776 47.204 105.436 44.596 217.498 67.208 333.068 67.208z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      useralt
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M123.302 822.204c-26.284-11.118-51.696-23.792-76.196-37.95 4.028-92.818 194.792-176.82 246.28-185.012 16.158-2.57 16.526-46.998 16.526-46.998s-47.476-46.994-57.818-110.192c-27.836 0-45.024-67.186-17.19-90.822-1.158-24.884-35.776-195.342 139.468-195.342 175.242 0 140.628 170.458 139.464 195.342 27.838 23.636 10.644 90.822-17.188 90.822-10.346 63.2-57.822 110.192-57.822 110.192s0.37 44.426 16.528 46.998c52.042 8.282 246.38 93.996 246.38 187.988v15.054c-14.028 7.102-28.316 13.758-42.88 19.918-84.77 35.852-174.864 54.032-267.78 54.032-92.912 0-183.004-18.18-267.772-54.030zM977.018 652.224c0-64.612-133.592-123.532-169.364-129.222-11.106-1.768-11.36-32.306-11.36-32.306s32.634-32.304 39.744-75.746c19.132 0 30.954-46.188 11.818-62.436 0.798-17.106 24.592-134.276-95.874-134.276-120.462 0-96.666 117.17-95.87 134.276-19.134 16.248-7.32 62.436 11.816 62.436 7.11 43.442 39.742 75.746 39.742 75.746s-0.25 30.54-11.358 32.306c-23.154 3.684-87.282 29.672-129.644 65.068 21.022 10.038 42.072 21.39 61.066 33.186 14.278 8.866 27.392 17.866 39.338 26.986 35.696 27.262 60.956 55.638 75.646 84.934 2.784 0.032 5.562 0.102 8.352 0.102 77.788 0 153.58-12.792 225.944-37.976v-43.078z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      users
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M926.050 273.364c-9.556 0-20.574 3.8-32.278 11.812l-189.738 129.894v-151.068c0-20.342-15.192-37.094-34.838-39.63-1.694-0.218-3.408-0.372-5.162-0.372h-560.002c-1.754 0-3.468 0.152-5.162 0.372-19.646 2.538-34.838 19.29-34.838 39.628v496.002c0 22.092 17.91 40 40 40h560.004c13.808 0 25.98-6.998 33.168-17.638 0.102-0.148 0.184-0.308 0.282-0.458 0.612-0.922 1.2-1.862 1.722-2.836 0.046-0.082 0.080-0.172 0.124-0.254 2.994-5.612 4.704-12.010 4.704-18.81v-151.066l189.738 129.886c11.706 8.012 22.718 11.812 32.278 11.812 20.092 0 33.736-16.806 33.736-46.622v-384.032c0-29.816-13.644-46.62-33.738-46.62zM624.036 720h-480.004v-415.998h480.004v415.998zM879.788 632.3l-175.728-120.296 175.728-120.302v240.598zM240.688 663.534c-22.090 0-40-17.906-40-40v0c0-22.090 17.91-40 40-40v0c22.090 0 40.004 17.91 40.004 40v0c0 22.092-17.914 40-40.004 40v0z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      video
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M736.172 108.030c0-11.044-8.956-20-20-20h-408.282c-11.044 0-20 8.956-20 20 0 11.046 8.956 20 20 20h408.282c11.044 0 20-8.954 20-20zM736.172 50.37c0-11.044-8.956-20-20-20h-408.282c-11.044 0-20 8.956-20 20s8.956 20 20 20h408.282c11.044 0 20-8.956 20-20zM736.172 973.692c0-11.044-8.956-20-20-20h-408.282c-11.044 0-20 8.956-20 20s8.956 20 20 20h408.282c11.044 0 20-8.956 20-20zM736.172 916.030c0-11.044-8.956-20-20-20h-408.282c-11.044 0-20 8.956-20 20 0 11.046 8.956 20 20 20h408.282c11.044 0 20-8.954 20-20zM717.53 228c18.904 0 34.286 15.14 34.286 33.75v500.502c0 18.61-15.38 33.75-34.286 33.75h-411.43c-18.904 0-34.286-15.14-34.286-33.75v-500.502c0-18.61 15.38-33.75 34.286-33.75h411.43zM717.53 148h-411.43c-63.118 0-114.286 50.928-114.286 113.75v500.502c0 62.822 51.166 113.75 114.286 113.75h411.43c63.118 0 114.286-50.926 114.286-113.75v-500.502c-0.002-62.822-51.168-113.75-114.286-113.75v0zM680.036 511.53c0 22.090-17.91 40-40 40h-128.004c-5.384 0-10.508-1.078-15.196-3.006-0.124-0.048-0.254-0.086-0.376-0.132-0.61-0.262-1.188-0.57-1.782-0.86-0.572-0.276-1.16-0.528-1.718-0.828-0.204-0.112-0.39-0.246-0.594-0.364-0.918-0.514-1.832-1.050-2.704-1.64-0.086-0.058-0.164-0.128-0.254-0.188-10.492-7.21-17.382-19.284-17.382-32.98v-151.5c0-22.094 17.91-40 40.004-40 22.088 0 40 17.906 40 40v111.498h88c22.094-0.002 40.002 17.91 40.006 40z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      watch
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M959.438 274.25c0-22.090-17.914-40-40.004-40-11.16 0-21.242 4.582-28.496 11.954l-60.152 60.148c-15.622 15.622-40.946 15.618-56.566-0.004l-56.57-56.566c-15.622-15.622-15.622-40.95 0-56.57l59.55-59.546c7.75-7.292 12.614-17.618 12.614-29.102 0-22.090-17.914-40-40.004-40-1.598 0-3.164 0.122-4.71 0.304-0.012 0-0.020-0.008-0.032-0.004-94.958 11.586-168.504 92.492-168.504 190.574 0 23.528 4.238 46.058 11.98 66.886l-503.078 503.074c-1.496 1.496-2.8 3.102-4.012 4.758-10.914 13.676-17.454 30.992-17.454 49.848 0 44.188 35.818 79.996 79.996 79.996 18.906 0 36.27-6.574 49.964-17.54 1.614-1.188 3.18-2.464 4.64-3.926l503.078-503.078c20.828 7.742 43.36 11.98 66.882 11.98 97.988 0 178.828-73.402 190.54-168.222v-0.012c0.2-1.628 0.338-3.272 0.338-4.952zM151.996 912c-22.090 0-40-17.906-40-40 0-22.090 17.91-40 40-40s40.004 17.91 40.004 40c0 22.094-17.914 40-40.004 40z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      wrench
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M704.010 511.988c0-12.332-5.038-21.358-15.042-26.992l-255.982-159.99c-10.344-6.666-21.178-6.998-32.51-1.008-10.988 5.984-16.492 15.312-16.492 28.002v320c0 12.69 5.504 22.018 16.492 28.002 5.332 2.678 10.516 3.996 15.506 3.996 6.668 0 12.334-1.644 17.004-4.98l255.982-160.014c10.004-5.69 15.042-14.684 15.042-26.992v-0.024zM960 511.988c0 31.99-0.164 56.98-0.488 75.032-0.334 17.99-1.754 40.738-4.27 68.25-2.516 27.504-6.262 52.058-11.27 73.742-5.332 24.338-16.84 44.85-34.504 61.496-17.64 16.63-38.306 26.308-61.96 28.988-73.992 8.342-185.824 12.526-335.508 12.526-149.668 0-261.5-4.184-335.5-12.526-23.662-2.656-44.414-12.302-62.242-28.988-17.834-16.678-29.412-37.182-34.744-61.496-4.672-21.684-8.258-46.238-10.756-73.742-2.508-27.512-3.928-50.26-4.254-68.25-0.342-18.050-0.504-43.042-0.504-75.032 0-31.998 0.162-57.010 0.504-75.008 0.326-18.022 1.746-40.768 4.254-68.28 2.498-27.474 6.262-52.082 11.252-73.744 5.34-24.336 16.842-44.842 34.504-61.496 17.648-16.654 38.324-26.332 61.986-29.010 74-8.312 185.832-12.472 335.5-12.472 149.684 0 261.516 4.16 335.508 12.472 23.654 2.678 44.406 12.356 62.232 29.010 17.826 16.678 29.422 37.16 34.73 61.496 4.702 21.662 8.256 46.27 10.772 73.744 2.516 27.512 3.936 50.258 4.27 68.28 0.324 17.998 0.488 43.010 0.488 75.008z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      youtube
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M220 670a316 316 0 0 1 0-450 316 316 0 0 1 450 0 316 316 0 0 1 0 450 316 316 0 0 1-450 0zm749 240L757 698a402 402 0 1 0-59 59l212 212a42 42 0 0 0 59-59zM487 604a42 42 0 0 1-84 0V487H286a42 42 0 1 1 0-84h117V286a42 42 0 1 1 84 0v117h117a42 42 0 0 1 0 84H487v117z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      zoom
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M757 698a402 402 0 1 0-59 59l212 212a42 42 0 0 0 59-59L757 698zM126 445a316 316 0 0 1 319-319 316 316 0 0 1 318 319 316 316 0 0 1-318 318 316 316 0 0 1-319-318zm160 42a42 42 0 1 1 0-84h318a42 42 0 0 1 0 84H286z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      zoomout
-    </div>
-  </div>
-  <div
-    class="emotion-3"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M148 560a318 318 0 0 0 522 110 316 316 0 0 0 0-450 316 316 0 0 0-450 0c-11 11-21 22-30 34v4h47c25 0 46 21 46 46s-21 45-46 45H90c-13 0-25-6-33-14-9-9-14-20-14-33V156c0-25 20-45 45-45s45 20 45 45v32l1 1a401 401 0 0 1 623 509l212 212a42 42 0 0 1-59 59L698 757A401 401 0 0 1 65 570a42 42 0 0 1 83-10z"
-      />
-    </svg>
-     
-    <div
-      class="emotion-2"
-    >
-      zoomreset
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Basics|Icon no labels 1`] = `
-.emotion-1 {
-  shape-rendering: inherit;
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-  display: block;
-}
-
-.emotion-0 {
-  fill: currentColor;
-}
-
-.emotion-453 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-flow: row wrap;
-  -ms-flex-flow: row wrap;
-  flex-flow: row wrap;
-}
-
-.emotion-2 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex: 0 1 20%;
-  -ms-flex: 0 1 20%;
-  flex: 0 1 20%;
-  min-width: 120px;
-  padding: 0px 7.5px 20px;
-  -webkit-flex: none;
-  -ms-flex: none;
-  flex: none;
-  min-width: auto;
-  padding: 0;
-  background: #fff;
-  border: 1px solid #666;
-}
-
-.emotion-2 svg {
-  margin-right: 10px;
-  width: 24px;
-  height: 24px;
-}
-
-.emotion-2 svg {
-  display: block;
-  margin-right: 0;
-  width: 48px;
-  height: 48px;
-}
-
-<div
-  class="emotion-453"
->
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M512 144c98.296 0 190.708 38.28 260.214 107.784 69.506 69.508 107.786 161.922 107.786 260.216 0 98.296-38.28 190.708-107.786 260.214-69.508 69.506-161.918 107.786-260.214 107.786-98.294 0-190.708-38.28-260.216-107.786-69.504-69.508-107.784-161.918-107.784-260.214 0-98.294 38.28-190.708 107.784-260.216 69.508-69.504 161.922-107.784 260.216-107.784zM512 64c-247.424 0-448 200.576-448 448s200.576 448 448 448 448-200.576 448-448-200.576-448-448-448v0zM729.002 473h-176.008v-176.008c0.002-22.090-17.906-39.994-39.996-39.994-22.088 0-39.998 17.908-39.998 39.998v176.004h-176c-22.094 0-40 17.908-39.998 40-0.002 22.090 17.904 39.996 39.996 39.996h176.002v176.004c0 22.094 17.908 40 40 39.998 22.090 0.002 39.996-17.904 39.996-39.996v-176.006l176.012-0.002c22.090 0.002 39.994-17.906 39.994-39.996-0.002-22.088-17.91-39.998-40-39.998z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M919.596 847.534h-88.414v-467.716l88.75-0.044c13.688-0.132 26.958-7.25 34.294-19.96 11.044-19.13 4.49-43.596-14.642-54.64l-407.904-235.676c-0.44-0.254-0.894-0.45-1.34-0.684-0.542-0.29-1.084-0.578-1.638-0.84-0.696-0.328-1.4-0.62-2.108-0.904-0.478-0.194-0.954-0.388-1.44-0.56-0.78-0.282-1.564-0.524-2.352-0.754-0.442-0.126-0.878-0.256-1.324-0.37-0.808-0.206-1.618-0.376-2.43-0.528-0.468-0.088-0.934-0.174-1.404-0.246-0.768-0.116-1.534-0.204-2.302-0.274-0.554-0.052-1.108-0.096-1.664-0.124-0.672-0.034-1.34-0.044-2.012-0.044-0.67 0-1.338 0.012-2.010 0.044-0.556 0.030-1.11 0.072-1.664 0.124-0.77 0.070-1.536 0.158-2.302 0.274-0.468 0.072-0.938 0.158-1.402 0.246-0.814 0.152-1.624 0.322-2.432 0.528-0.444 0.114-0.882 0.242-1.322 0.37-0.79 0.23-1.574 0.472-2.356 0.754-0.484 0.172-0.958 0.368-1.438 0.56-0.708 0.286-1.41 0.576-2.11 0.904-0.554 0.262-1.094 0.55-1.636 0.84-0.446 0.234-0.9 0.43-1.34 0.684l-407.906 235.672c-19.128 11.044-25.686 35.51-14.64 54.64 7.34 12.71 20.606 19.828 34.292 19.96v0.044h89.842v467.716h-89.474c-22.090 0-40 17.91-40 40s17.91 40 40 40h128.276c0.402 0.012 0.794 0.060 1.2 0.060s0.796-0.048 1.2-0.060h183.602c0.402 0.012 0.794 0.060 1.2 0.060s0.796-0.048 1.2-0.060h183.602c0.402 0.012 0.794 0.060 1.2 0.060s0.796-0.048 1.2-0.060h313.154c22.098 0 40-17.91 40-40-0.006-22.090-17.914-39.996-40.006-39.996zM751.182 847.534h-105.94v-467.716h105.94v467.716zM252.93 299.816l258.736-149.486 258.738 149.486h-517.474zM565.242 379.816v467.716h-106v-467.716h106zM273.242 379.816h106v467.716h-106v-467.716z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M511.998 623.846c-22.090 0-40-17.906-40-40v-208c0-22.090 17.91-40 40-40v0c22.090 0 40.004 17.91 40.004 40v208c0 22.094-17.914 40-40.004 40v0zM511.998 743.846c22.090 0 40.004-17.906 40.004-40v0c0-22.090-17.914-40-40.004-40v0c-22.090 0-40 17.91-40 40v0c0 22.094 17.91 40 40 40v0zM512.142 211.808l-340.074 589.028h680.148l-340.074-589.028zM512.142 92.51c14.5 0 29 9.526 40 28.58l398.638 690.462c22 38.106 4 69.282-40 69.282h-797.278c-44 0-62-31.176-40-69.282l398.638-690.462c11.002-19.052 25.502-28.58 40.002-28.58v0z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M511.976 768.002c-10.236 0-20.47-3.904-28.282-11.712l-344.154-344.098c-15.624-15.62-15.624-40.946-0.006-56.57 15.622-15.622 40.948-15.624 56.568-0.004l315.876 315.82 315.922-315.868c15.624-15.618 40.952-15.616 56.568 0.004 15.62 15.624 15.618 40.95-0.006 56.57l-344.204 344.144c-7.81 7.81-18.046 11.714-28.282 11.714z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M257.93 511.976c0-10.236 3.902-20.47 11.71-28.282l344.098-344.158c15.622-15.624 40.946-15.624 56.57-0.006 15.622 15.622 15.624 40.948 0.004 56.568l-315.82 315.876 315.868 315.922c15.618 15.624 15.618 40.952-0.004 56.568-15.622 15.62-40.95 15.618-56.57-0.006l-344.146-344.202c-7.808-7.81-11.71-18.044-11.71-28.28z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M107.854 539.924l282.834 283.272c15.594 15.65 40.92 15.692 56.568 0.1 15.648-15.594 15.694-40.92 0.1-56.568l-214.838-215.040h655.412c22.092 0 40-17.908 40-40s-17.908-40-40-40h-655l214.75-214.61c15.64-15.602 15.672-40.928 0.070-56.568-7.814-7.834-18.066-11.752-28.32-11.75-10.22 0-20.442 3.892-28.25 11.68l-283.242 282.93c-15.634 15.594-15.672 40.91-0.084 56.554z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M768.072 514.022c0 10.236-3.904 20.47-11.712 28.282l-344.098 344.156c-15.62 15.624-40.946 15.624-56.568 0.006-15.622-15.622-15.624-40.948-0.006-56.568l315.82-315.876-315.868-315.922c-15.618-15.624-15.618-40.952 0.004-56.568 15.624-15.62 40.95-15.618 56.57 0.006l344.144 344.204c7.81 7.81 11.714 18.044 11.714 28.28z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M916.266 483.792l-282.834-283.272c-15.594-15.65-40.92-15.692-56.568-0.1-15.648 15.594-15.694 40.92-0.1 56.568l214.838 215.040h-655.412c-22.092 0-40 17.908-40 40s17.908 40 40 40h655l-214.748 214.61c-15.64 15.602-15.672 40.928-0.070 56.568 7.814 7.834 18.066 11.752 28.32 11.75 10.22 0 20.442-3.892 28.25-11.68l283.242-282.93c15.632-15.596 15.67-40.91 0.082-56.554z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M512.024 256c10.236 0 20.47 3.904 28.282 11.712l344.154 344.098c15.624 15.62 15.624 40.946 0.006 56.57-15.622 15.622-40.948 15.624-56.568 0.004l-315.876-315.82-315.922 315.868c-15.624 15.618-40.952 15.618-56.568-0.004-15.62-15.624-15.618-40.95 0.006-56.57l344.204-344.144c7.81-7.81 18.046-11.714 28.282-11.714z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M512.030 880c-98.296 0-190.708-38.28-260.214-107.784-69.508-69.508-107.786-161.922-107.786-260.216 0-98.296 38.278-190.708 107.786-260.214s161.918-107.786 260.214-107.786c98.292 0 190.708 38.28 260.214 107.786 69.504 69.508 107.786 161.918 107.786 260.214 0 98.294-38.282 190.708-107.786 260.216-69.508 69.504-161.922 107.784-260.214 107.784zM512.030 960c247.422 0 448-200.576 448-448s-200.578-448-448-448c-247.426 0-448 200.576-448 448s200.574 448 448 448v0zM267.63 538.67l125 125.438c15.596 15.648 40.922 15.692 56.57 0.098s15.692-40.92 0.098-56.566l-57.004-57.206h335.672c22.090 0 40-17.908 40-40s-17.91-40-40-40h-335.26l56.508-56.368c15.64-15.602 15.672-40.928 0.070-56.568-7.814-7.832-18.064-11.752-28.318-11.75-10.22 0-20.444 3.89-28.25 11.68l-125 124.688c-15.634 15.596-15.672 40.91-0.086 56.554z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M632.254 695.604v-112.016c-0.004-22.092 17.906-40.002 40-40.002 22.090 0.002 40 17.908 40 40.002l-0.004 112.018c0.004 22.088-17.906 39.996-39.996 39.998-22.094 0.002-40.004-17.904-40-40zM352.246 735.604c22.090-0.002 40-17.91 39.996-39.998l0.004-112.018c0-22.094-17.91-40-40-40.002-22.094 0-40.004 17.91-40 40.002v112.016c-0.004 22.096 17.906 40.002 40 40zM512.25 735.604c22.090-0.002 40-17.91 39.996-39.998l0.004-112.018c0-22.094-17.91-40-40-40.002-22.094 0-40.004 17.91-40 40.002v112.016c-0.004 22.096 17.906 40.002 40 40zM950.3 397.424c-7.596-8.686-18.574-13.67-30.114-13.67h-313.284c0.87 5.196 1.346 10.524 1.346 15.966 0 24.608-9.27 47.044-24.494 64.034h290.684l-47.318 351.376-629.908-0.030-47.502-351.346h291.034c-15.224-16.988-24.494-39.426-24.494-64.034 0-5.444 0.476-10.772 1.346-15.966h-313.66c-11.542 0-22.524 4.986-30.12 13.678-7.596 8.694-11.066 20.242-9.52 31.682l51.614 381.742 0.050 0.042c5.832 47.424 46.222 84.158 95.222 84.172l0.054 0.034 601.816-0.034c0.042 0 0.082 0.002 0.124 0.002 49.414 0 90.090-37.34 95.396-85.336l51.258-380.64c1.54-11.44-1.934-22.984-9.53-31.672zM805.492 105.34c-15.622-15.622-40.95-15.624-56.572 0.004l-230.684 230.684c-2.052-0.2-4.132-0.306-6.236-0.306-35.346 0-64 28.654-64 64s28.654 64 64 64 64-28.654 64-64c0-2.652-0.18-5.262-0.494-7.83l229.986-229.98c15.622-15.624 15.616-40.95-0-56.572z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M684 277L271 772l-1 1a40 40 0 0 1-56 5l-1-1L14 610a40 40 0 1 1 52-61l169 142 387-465a40 40 0 0 1 62 51zm340 234c0-22-18-40-40-40H808a40 40 0 0 0 0 80h176c22 0 40-18 40-40zm0-216c0-22-18-40-40-40H808a40 40 0 0 0 0 80h176c22 0 40-18 40-40zm0 432c0-22-18-40-40-40H808a40 40 0 0 0 0 80h176c22 0 40-18 40-40z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M1024 512c0-22-18-40-40-40H808a40 40 0 0 0 0 80h176c22 0 40-18 40-40zm0-216c0-22-18-40-40-40H808a40 40 0 0 0 0 80h176c22 0 40-18 40-40zm0 432c0-22-18-40-40-40H808a40 40 0 0 0 0 80h176c22 0 40-18 40-40zM625 236c16 15 16 41 0 56L406 512l220 220a40 40 0 1 1-57 57L349 568 129 788a40 40 0 1 1-57-56l220-220L73 292a40 40 0 0 1 56-57l220 220 219-219c16-16 41-16 57 0z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M848.64 790.56l-208.638-361.374v-252.062h24c22.092 0 40-17.908 40-40s-17.908-40-40-40h-304.002c-22.092 0-40 17.908-40 40s17.908 40 40 40h24v252.066l-208.636 361.37c-44 76.208-8 138.564 80 138.564h513.278c87.998 0 123.998-62.354 79.998-138.564zM464 177.124h96.002l-0.070 273.376 63.872 110.628h-223.678c35.932-62.268 63.872-110.684 63.876-110.692v-273.312zM768.64 849.124h-513.278c-8.28 0-14.186-0.976-17.968-2 1.004-3.792 3.112-9.394 7.25-16.564 0 0 54.598-94.614 109.316-189.436l316.026-0.002 109.374 189.44c4.138 7.168 6.246 12.77 7.25 16.562-3.784 1.024-9.69 2-17.97 2z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M901.344 760.018l-57.644-77.648c-7.906-7.906-11.77-38.284-11.71-48.646h0.042v-200.588h-0.364c-6.878-148.106-114.428-269.902-255.792-298.528 0.208-2.1 0.318-4.228 0.318-6.384 0-35.452-28.738-64.194-64.194-64.194-35.458 0-64.194 28.742-64.194 64.194 0 2.19 0.112 4.352 0.326 6.486-141.128 28.802-248.446 150.488-255.316 298.426h-0.364v200.588h0.042c0.058 10.362-3.804 40.74-11.71 48.646l-57.644 77.648c-8.802 8.802-16.35 18.978-16.35 32.208 0 22.092 17.908 40 40 40h255.876c-0.814 5.412-1.28 10.936-1.28 16.576 0 61.43 49.794 111.23 111.23 111.23 61.432 0 111.228-49.8 111.228-111.23 0-5.638-0.464-11.164-1.282-16.576h255.128c22.092 0 40-17.908 40-40 0.004-13.23-7.542-23.404-16.346-32.208zM272.732 436.848c2.862-61.602 29.032-119.104 73.69-161.91 44.786-42.93 103.628-66.62 165.692-66.706h0.26c62.062 0.086 120.906 23.776 165.692 66.706 44.658 42.806 70.828 100.308 73.69 161.91l0.278 5.962v149.384h-479.58v-149.384l0.278-5.962zM543.846 848.8c0 17.22-14.010 31.23-31.228 31.23-17.22 0-31.23-14.010-31.23-31.23 0-6.096 1.784-11.768 4.82-16.576h52.818c3.038 4.81 4.82 10.482 4.82 16.576zM512.484 752.226h-283.922l14.572-19.63c12.064-14.542 20.078-33.27 24.982-58.158 0.146-0.742 0.276-1.496 0.416-2.244h487.42c0.138 0.748 0.268 1.5 0.414 2.244 4.904 24.888 12.918 43.616 24.982 58.158l14.572 19.63h-283.436z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M512.157 32c-219.6 0-400.001 61.279-400.001 138.881 0 20.4 47.040 310.481 66.641 424.8 7.841 53.28 137.359 126.72 333.36 126.72 196.080 0 321.6-73.601 333.36-126.641 19.601-114.4 66.641-404.479 66.641-424.8-3.919-77.76-180.401-138.96-400.001-138.96v0zM512.157 628.4c-70.56 0-125.52-57.2-125.52-130.722s54.96-130.72 125.52-130.72c70.56 0 125.52 57.199 125.52 130.721 0 69.439-54.96 130.721-125.52 130.721zM512.157 211.76c-141.199 0-254.88-24.559-254.88-57.199 0-32.719 113.681-57.199 254.88-57.199s254.88 24.48 254.88 57.199c0 32.64-113.681 57.199-254.88 57.199zM801.597 706.081c7.84 0 11.76 8.16 7.84 16.32v4.002c-15.679 85.84-27.439 147.199-27.439 155.28-11.76 61.279-129.439 110.321-270.641 110.321-141.12 0-258.8-49.039-270.56-110.321 0-8.16-11.76-69.439-27.439-155.201v-4.081c0-12.24 7.841-16.319 15.679-16.319 4.409 0.751 8.359 2.145 11.962 4.1l-0.202-0.101c0 0 98.081 81.761 274.481 81.761 176.479 0 274.56-81.679 274.56-81.679s3.919-4.080 11.76-4.080l0.001-0.002zM512.157 558.961c-34.639 0-62.719-29.279-62.719-65.359s28.001-65.359 62.719-65.359c34.639 0 62.719 29.279 62.719 65.359s-28.001 65.359-62.719 65.359z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M896.054 159.774c-0.122-52.914-43.048-95.774-95.992-95.774h-632.004c-1.754 0-3.468 0.154-5.164 0.372-19.644 2.54-34.836 19.292-34.836 39.628v816c0 22.094 17.91 40 40 40h632.004c52.642 0 95.368-42.378 95.968-94.88h0.036v-705.332l-0.012-0.014zM368.062 144h80v271.922l-11.728-11.718c-15.62-15.606-40.924-15.606-56.542 0l-11.728 11.718v-271.922zM816.036 864.204c-0.1 8.712-7.268 15.796-15.972 15.796h-592.004v-736h80.004v368.426c0 16.176 9.742 30.758 24.684 36.954 14.944 6.192 32.146 2.778 43.586-8.656l51.728-51.68 51.728 51.68c7.652 7.644 17.876 11.708 28.28 11.708 5.156 0 10.356-1 15.306-3.050 14.944-6.196 24.684-20.778 24.684-36.954v-368.428h272c8.796 0 15.972 7.16 15.992 15.958l-0.016 704.246z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M772 1012L511 761l-260 251a49 49 0 0 1-52 10c-18-7-29-24-29-43V132c0-25 21-46 47-46h588c26 0 47 21 47 46v847c0 19-11 36-29 43a49 49 0 0 1-51-10z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M772 1012L511 761l-260 251a49 49 0 0 1-52 10c-18-7-29-24-29-43V132c0-25 21-46 47-46h588c26 0 47 21 47 46v847c0 19-11 36-29 43a49 49 0 0 1-51-10zM545 664l213 205V181H265v688l213-205c9-9 21-14 33-14s24 5 34 14z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M85 121h854c24 0 42 18 42 41v700c0 23-18 41-42 41H608a44 44 0 0 1-7 0H85c-24 0-42-18-42-41V162c0-23 18-41 42-41zm41 535v165h772V656H126zm0-82h772V202H126v372zm185 197h-69c-19 0-34-14-34-32s15-33 34-33h69c19 0 34 15 34 33s-15 32-34 32zm236 0h-70c-18 0-33-14-33-32s15-33 33-33h70c18 0 33 15 33 33s-15 32-33 32zm235 0h-70c-18 0-33-14-33-32s15-33 33-33h70c18 0 33 15 33 33s-15 32-33 32z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M960.016 408.080c0-0.672-0.046-1.342-0.078-2.014-0.032-0.594-0.044-1.19-0.102-1.782-0.068-0.726-0.186-1.448-0.294-2.17-0.080-0.54-0.144-1.080-0.248-1.616-0.138-0.724-0.326-1.442-0.506-2.16-0.134-0.534-0.252-1.070-0.408-1.6-0.196-0.662-0.436-1.314-0.668-1.968-0.204-0.582-0.396-1.166-0.628-1.74-0.226-0.56-0.494-1.11-0.75-1.662-0.3-0.656-0.598-1.312-0.934-1.954-0.242-0.454-0.514-0.894-0.774-1.342-0.414-0.716-0.83-1.43-1.292-2.124-0.256-0.382-0.538-0.752-0.806-1.128-0.514-0.716-1.036-1.428-1.602-2.116-0.090-0.11-0.162-0.226-0.254-0.336-0.244-0.292-0.516-0.542-0.768-0.826-0.534-0.6-1.068-1.198-1.644-1.772-0.48-0.478-0.982-0.924-1.48-1.376-0.354-0.316-0.674-0.658-1.040-0.964l-405.788-335.666c-6.568-6.436-14.918-10.166-23.564-11.124-0.16-0.022-0.32-0.050-0.48-0.066-0.838-0.082-1.676-0.11-2.518-0.14-0.496-0.020-0.994-0.058-1.492-0.058s-0.996 0.040-1.492 0.058c-0.842 0.028-1.68 0.058-2.518 0.14-0.16 0.016-0.32 0.044-0.48 0.066-8.646 0.956-16.996 4.688-23.564 11.124l-405.662 335.542c-7.13 5.982-11.616 13.93-13.392 22.382-0.032 0.14-0.070 0.278-0.1 0.42-0.212 1.072-0.37 2.152-0.494 3.238-0.032 0.258-0.078 0.51-0.106 0.77-0.086 0.89-0.114 1.786-0.138 2.68-0.014 0.39-0.052 0.78-0.054 1.17 0 0.040-0.006 0.074-0.006 0.114v204.856c-0.958 12.434 3.854 25.128 14.134 33.754l405.662 335.54c6.568 6.438 14.918 10.168 23.564 11.124 0.16 0.020 0.32 0.050 0.48 0.066 0.838 0.082 1.676 0.114 2.518 0.14 0.496 0.020 0.994 0.058 1.492 0.058 0.054 0 0.11-0.008 0.162-0.008 0.042 0 0.084 0.008 0.126 0.008 0.342 0 0.672-0.042 1.012-0.050 0.062-0.004 0.126-0.008 0.192-0.008 0.134-0.004 0.27-0.020 0.402-0.024 10.602-0.422 20.136-4.938 27.054-12.046l404.526-334.624c0.084-0.066 0.166-0.136 0.248-0.204l0.12-0.098c0.17-0.144 0.314-0.304 0.48-0.45 0.814-0.704 1.614-1.43 2.37-2.2 0.296-0.3 0.562-0.624 0.85-0.934 0.602-0.652 1.2-1.308 1.756-2 0.3-0.372 0.566-0.758 0.852-1.136 0.504-0.672 1.002-1.344 1.462-2.046 0.242-0.368 0.458-0.75 0.686-1.124 0.458-0.754 0.908-1.508 1.316-2.292 0.164-0.312 0.304-0.636 0.46-0.954 0.426-0.872 0.832-1.746 1.196-2.652 0.092-0.23 0.168-0.464 0.256-0.696 0.376-0.996 0.728-2 1.026-3.032 0.042-0.148 0.074-0.296 0.114-0.442 0.306-1.102 0.578-2.218 0.79-3.356 0.016-0.082 0.024-0.164 0.038-0.246 0.212-1.184 0.382-2.378 0.49-3.598v0c0.1-1.156 0.176-2.32 0.176-3.5v-204.86c0.024-0.318 0.022-0.638 0.040-0.958 0.026-0.668 0.074-1.338 0.074-2.008zM143.89 493.202l328.14 271.42v103.902l-328.14-271.18v-104.142zM552.032 764.402l327.868-271.212v103.88l-327.868 270.972v-103.64zM511.898 122.66l345.348 285.42-345.348 285.42-345.374-285.42 345.374-285.42z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M861.968 312.032c0-66.168-53.832-120-120-120s-120 53.832-120 120c0 50.55 31.436 93.87 75.77 111.516-5.384 20.352-15.71 39.68-29.844 54.92-28.828 31.092-72.202 46.858-128.91 46.858-77.162 0-129.12 26.162-162.984 55.12V297.15c46.556-16.512 80-60.974 80-113.12 0-66.168-53.832-120-120-120s-120 53.832-120 120c0 52.146 33.444 96.608 80 113.12v429.762c-46.556 16.512-80 60.974-80 113.12 0 66.168 53.832 120 120 120s120-53.832 120-120c0-50.926-31.902-94.514-76.758-111.908 5.222-26.17 16.578-51.154 32.558-70.432 28.8-34.746 71.592-52.364 127.184-52.364 99.498 0 156.922-39.408 187.574-72.466 27.402-29.554 45.708-67.194 52.48-106.716 48.078-15.66 82.93-60.882 82.93-114.114zM336 144.032c22.056 0 40 17.944 40 40s-17.944 40-40 40-40-17.944-40-40 17.944-40 40-40zm0 736c-22.056 0-40-17.944-40-40s17.944-40 40-40 40 17.944 40 40-17.944 40-40 40zm405.968-528c-22.056 0-40-17.944-40-40s17.944-40 40-40 40 17.944 40 40-17.942 40-40 40z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M920.004 128h-816.008c-1.38 0-2.746 0.070-4.090 0.208-20.168 2.048-35.91 19.080-35.91 39.792v688c0 22.090 17.91 40 40 40h816.008c22.098 0 40-17.91 40-40v-688c-0-22.094-17.906-40-40-40zM368 177.78c17.674 0 32.004 14.328 32.004 31.998 0 17.676-14.33 32.002-32.004 32.002-17.67 0-32-14.326-32-32.002 0-17.67 14.33-31.998 32-31.998zM272 177.78c17.674 0 32.004 14.328 32.004 31.998 0 17.676-14.33 32.002-32.004 32.002-17.67 0-32-14.326-32-32.002 0-17.67 14.33-31.998 32-31.998zM176 177.78c17.674 0 32.004 14.328 32.004 31.998 0 17.676-14.33 32.002-32.004 32.002-17.67 0-32-14.326-32-32.002 0-17.67 14.33-31.998 32-31.998zM880.004 815.996h-736.008v-527.988h736.008v527.988z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M644.634 802.32c-4.558 5.434-10.254 9.328-16.446 11.672l0.008 0.024-45.628 16.606 27.54 75.66c7.554 20.756-3.148 43.71-23.906 51.266s-43.714-3.146-51.27-23.906l-27.54-75.656-47.63 17.29c-6.020 1.956-12.586 2.518-19.254 1.342-21.75-3.836-36.282-24.582-32.45-46.34l30.57-173.328c2.55-14.476 12.61-25.714 25.458-30.508 0.292-0.118 0.586-0.23 0.878-0.34 0.238-0.084 0.476-0.168 0.718-0.246 12.942-4.624 27.91-2.492 39.196 6.98l134.824 113.13c16.932 14.2 19.144 39.432 4.932 56.354zM960.002 664v-368.082c0-22.092-17.908-40-40-40h-816c-22.092 0-40 17.908-40 40l-0.292 368.238c0 22.092 17.908 40 40 40h240.292c22.092 0 40-17.908 40-40s-17.908-40-40-40h-200.292l0.292-288.238h736v288.082h-200c-22.092 0-40 17.908-40 40s17.908 40 40 40h240c22.092 0 40-17.908 40-40z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M920.036 160.030h-112.004v-72c0-22.092-17.906-40.004-40-40.004-22.090 0-40 17.906-40 40v72.004h-432v-72c0-22.092-17.906-40.004-40-40.004-22.090 0-40 17.906-40 40v72.004h-112.004c-1.38 0-2.746 0.070-4.090 0.208-20.168 2.046-35.91 19.080-35.91 39.792v688c0 22.090 17.91 40 40 40h816.008c22.098 0 40-17.91 40-40v-688c0-22.094-17.908-40-40-40zM356.032 848.026h-212.004v-142.662h212.004v142.662zM356.032 665.364h-212.004v-162.664h212.004v162.664zM356.032 462.7h-212.004v-142.662h212.004v142.662zM628.032 848.026h-232v-142.662h232v142.662zM628.032 665.364h-232v-162.664h232v162.664zM628.032 462.7h-232v-142.662h232v142.662zM880.036 848.026h-212.004v-142.662h212.004v142.662zM880.036 665.364h-212.004v-162.664h212.004v162.664zM880.036 462.7h-212.004v-142.662h212.004v142.662z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M925.164 208.372c-1.694-0.218-3.408-0.372-5.162-0.372h-471.968v-39.962c0-20.344-15.192-37.096-34.836-39.63-1.696-0.218-3.41-0.374-5.164-0.374h-176.004c-1.754 0-3.468 0.152-5.164 0.374-19.644 2.538-34.836 19.29-34.836 39.626v39.966h-88.032c-1.754 0-3.468 0.152-5.162 0.372-19.646 2.536-34.838 19.29-34.838 39.628v528c0 22.094 17.91 40 40 40h816.004c13.808 0 25.98-6.996 33.168-17.636 0.102-0.148 0.184-0.308 0.282-0.46 0.612-0.922 1.2-1.86 1.722-2.836 0.046-0.082 0.080-0.172 0.124-0.254 2.994-5.61 4.704-12.008 4.704-18.808v-528.004c-0-20.342-15.192-37.096-34.838-39.63zM880.002 736h-736.004v-448h736.004v448zM512 402.522c60.368 0 109.478 49.112 109.478 109.478s-49.112 109.478-109.478 109.478-109.478-49.112-109.478-109.478 49.11-109.478 109.478-109.478zM512 322.522c-104.644 0-189.478 84.832-189.478 189.478 0 104.644 84.834 189.478 189.478 189.478 104.646 0 189.478-84.834 189.478-189.478 0-104.646-84.832-189.478-189.478-189.478v0z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M925.224 256.37c-1.694-0.216-3.408-0.37-5.162-0.37h-816c-1.754 0-3.468 0.152-5.162 0.37-19.646 2.538-34.838 19.292-34.838 39.63v624c0 22.094 17.91 40 40 40h816c13.808 0 25.98-6.996 33.168-17.636 0.102-0.148 0.184-0.308 0.282-0.458 0.612-0.924 1.2-1.862 1.722-2.838 0.046-0.082 0.080-0.172 0.124-0.254 2.994-5.61 4.704-12.008 4.704-18.808v-624.004c0-20.342-15.19-37.096-34.838-39.632zM144.062 880v-544h736v544h-736zM896.11 180c0 11.044-8.954 20-20 20h-728.032c-11.046 0-20-8.956-20-20v0c0-11.046 8.954-20 20-20h728.032c11.046 0 20 8.954 20 20v0zM832.094 84c0 11.044-8.954 20-20 20h-600c-11.046 0-20-8.956-20-20v0c0-11.046 8.954-20 20-20h600c11.046 0 20 8.954 20 20v0z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M832.032 384.032c0-176.728-143.266-320-320-320s-320 143.272-320 320c0 104.662 50.25 197.584 127.938 255.966v311.5c0 16.174 9.74 30.756 24.682 36.952 4.954 2.052 10.152 3.050 15.31 3.050 10.402 0 20.626-4.060 28.276-11.702l123.726-123.58 123.772 123.332c11.452 11.412 28.644 14.804 43.574 8.608 14.93-6.2 24.66-20.776 24.66-36.942v-311.124c77.756-58.376 128.062-151.342 128.062-256.060zM272.032 384.032c0-64.106 24.964-124.374 70.292-169.706 45.33-45.33 105.6-70.294 169.708-70.294s124.376 24.964 169.708 70.294c45.33 45.332 70.292 105.6 70.292 169.706s-24.964 124.376-70.292 169.704c-45.33 45.33-105.6 70.294-169.708 70.294s-124.376-24.964-169.708-70.294c-45.328-45.328-70.292-105.598-70.292-169.704zM623.968 854.89l-83.804-83.508c-15.622-15.564-40.898-15.552-56.502 0.034l-83.694 83.594v-171.17c34.878 13.042 72.632 20.192 112.062 20.192 39.382 0 77.094-7.13 111.938-20.142v171z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M948.598 199.75c-15.622-15.618-40.95-15.618-56.57 0l-535.644 535.644-224.060-224.062c-15.624-15.624-40.954-15.62-56.57 0-15.624 15.62-15.624 40.948 0 56.568l251.574 251.574c0.252 0.266 0.472 0.55 0.734 0.812 7.82 7.82 18.072 11.724 28.322 11.714 10.25 0.010 20.502-3.894 28.322-11.714 0.248-0.248 0.456-0.518 0.698-0.77l563.196-563.202c15.618-15.618 15.618-40.94-0.002-56.564z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M511.976 833c-10.236 0-20.47-3.904-28.282-11.712l-471.934-471.874c-15.624-15.62-15.624-40.946-0.006-56.57 15.622-15.622 40.948-15.624 56.568-0.004l443.652 443.598 443.61-443.556c15.624-15.618 40.952-15.616 56.568 0.004 15.62 15.624 15.618 40.95-0.006 56.57l-471.89 471.832c-7.808 7.808-18.044 11.712-28.28 11.712z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M511.714 956.324c-92.92 0-168.518-75.594-168.518-168.514v-334.082l131.54 75.954v215.936c0 13.172 7.082 25.446 18.48 32.030l139.33 80.43c8.33 4.814 17.014 9.168 25.872 12.966-29.646 52.72-85.44 85.28-146.704 85.28zM753.584 816.61c-29.36 0-58.43-7.812-84.064-22.59l-83.828-48.404 289.354-167.028c8.3-4.802 16.402-10.152 24.132-15.936 30.858 52.030 31.182 116.622 0.568 169.664-30.034 51.994-86.040 84.294-146.162 84.294zM270.334 816.576c-60.084 0-116.064-32.278-146.102-84.238-22.494-39.012-28.466-84.426-16.814-127.866 11.68-43.512 39.564-79.858 78.522-102.334l83.806-48.398 0.018 334.018c0 9.624 0.57 19.294 1.69 28.814-0.374 0.002-0.748 0.004-1.12 0.004zM548.73 529.73l186.996-107.966c11.416-6.588 18.506-18.864 18.506-32.040v-160.856c0.012-9.456-0.56-19.116-1.706-28.778 0.364-0.002 0.732-0.004 1.096-0.004 60.114 0 116.104 32.296 146.124 84.29 46.436 80.486 18.75 183.742-61.714 230.176l-289.302 167.040v-151.862zM325.248 357.624c-5.632-3.242-12.030-4.954-18.504-4.954-6.428 0-12.804 1.708-18.44 4.936l-139.344 80.452c-8.348 4.802-16.462 10.142-24.172 15.912-30.824-52-31.14-116.59-0.546-169.664 30.048-52 86.050-84.306 146.148-84.306 29.326 0 58.394 7.822 84.064 22.624l289.3 167.054-131.482 75.91-187.024-107.964zM390.964 158.644c-8.334-4.826-17.036-9.192-25.92-13.004 29.634-52.742 85.418-85.316 146.67-85.316 92.92 0 168.514 75.6 168.514 168.522v96.81l-289.264-167.012z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M960 512c0 247.424-200.576 448-448 448s-448-200.576-448-448c0-247.424 200.576-448 448-448s448 200.576 448 448z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M960 513c0-247.424-200.574-448-448-448-247.422 0-448 200.576-448 448s200.578 448 448 448c247.426 0 448-200.576 448-448zM251.786 773.216c-69.504-69.508-107.786-161.918-107.786-260.216 0-98.294 38.282-190.708 107.786-260.216 69.506-69.504 161.918-107.784 260.214-107.784s190.708 38.28 260.214 107.784c69.508 69.508 107.786 161.922 107.786 260.216 0 98.296-38.278 190.708-107.786 260.214-69.506 69.508-161.922 107.786-260.214 107.786-98.296 0-190.708-38.278-260.214-107.784z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M693.022 637.866c15.62 15.622 15.618 40.95 0 56.566-15.622 15.622-40.946 15.624-56.562 0.002l-124.46-124.458-124.456 124.458c-15.622 15.622-40.944 15.622-56.562 0-15.624-15.622-15.624-40.946-0.002-56.568l124.454-124.456-124.452-124.45c-15.622-15.622-15.622-40.946 0-56.564 15.62-15.624 40.944-15.624 56.568-0.002l124.45 124.45 124.454-124.452c15.622-15.62 40.95-15.62 56.566 0 15.622 15.62 15.624 40.944 0.002 56.56l-124.456 124.458 124.456 124.456zM828.784 828.784c-174.956 174.956-458.614 174.956-633.566 0-174.958-174.956-174.958-458.614 0-633.566 174.954-174.958 458.612-174.958 633.566 0 174.954 174.952 174.954 458.612 0 633.566zM880 511.998c-0.002-98.296-38.28-190.708-107.786-260.212s-161.92-107.786-260.214-107.788c-98.296 0.002-190.71 38.282-260.216 107.786-69.506 69.508-107.782 161.918-107.786 260.214 0.002 98.296 38.282 190.71 107.786 260.216 69.508 69.506 161.918 107.784 260.216 107.784 98.296 0 190.708-38.278 260.214-107.784s107.784-161.92 107.786-260.216z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M586.7 512L936 861.4a52.8 52.8 0 0 1-74.6 74.7L512 586.7 162.6 936A52.8 52.8 0 0 1 88 861.4L437.3 512 88 162.6A52.8 52.8 0 1 1 162.6 88L512 437.3 861.4 88a52.8 52.8 0 1 1 74.7 74.7L586.7 512z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M396.458 151.486l27.768 27.768c23.28 23.29 54.262 36.116 87.242 36.116 0.318 0 0.636 0 0.958-0.004 0.292 0.002 0.58 0.004 0.872 0.004 32.99 0 63.976-12.83 87.22-36.098l27.61-27.604c19.584 6.294 38.582 14.192 56.892 23.642v39.976c0 32.878 13.406 64.804 36.842 87.888 23.072 23.384 54.966 36.762 87.804 36.762l39.442 0.002c9.168 17.906 16.852 36.462 23.014 55.574l-27.676 27.676c-23.222 23.224-36.318 55.242-36.094 88.096-0.248 32.884 12.844 64.934 36.094 88.19l27.928 27.928c-6.298 19.704-14.212 38.812-23.704 57.23l-38.984 0.002c-0.008 0-0.012 0-0.022 0-32.84 0-64.74 13.38-87.814 36.776-23.43 23.080-36.83 55-36.83 87.876v39.116c-18.38 9.486-37.456 17.406-57.122 23.714l-27.348-27.346c-23.278-23.3-54.264-36.13-87.254-36.13-0.292 0-0.58 0.002-0.872 0.004-0.318-0.004-0.636-0.004-0.958-0.004-32.978 0-63.962 12.826-87.228 36.102l-27.552 27.554c-19.874-6.338-39.144-14.32-57.708-23.902l-0.002-38.13c0.012-32.854-13.368-64.764-36.772-87.846-23.082-23.43-55.004-36.834-87.878-36.834h-38.506c-9.776-18.846-17.898-38.42-24.328-58.624l27.49-27.49c23.246-23.248 36.338-55.296 36.088-88.182 0.224-32.854-12.872-64.872-36.092-88.094l-27.23-27.232c6.29-19.612 14.182-38.628 23.636-56.966h38.942c32.878 0 64.802-13.402 87.884-36.838 23.398-23.086 36.778-54.994 36.766-87.81l0.002-39.028c18.492-9.546 37.688-17.506 57.48-23.834zM421.486 60.208c-59.932 11.946-115.658 35.516-164.752 68.268l-0.004 85.866c0.004 11.676-4.886 22.194-12.706 29.68-7.486 7.83-18.012 12.728-29.702 12.728h-85.806c-32.624 48.946-56.132 104.484-68.088 164.204l60.39 60.394c8.256 8.256 12.234 19.15 11.998 29.968 0.246 10.83-3.734 21.738-11.998 30.004l-60.562 60.56c11.97 60.402 35.74 116.552 68.826 165.948h85.24c11.69 0 22.214 4.9 29.702 12.73 7.818 7.482 12.708 17.998 12.706 29.676l0.004 85.004c49.162 32.796 104.976 56.386 165.006 68.316l60.654-60.656c8.028-8.032 18.55-12.014 29.072-12.014 0.312 0 0.62 0.004 0.93 0.010 0.298-0.006 0.602-0.010 0.9-0.010 10.526 0 21.046 3.982 29.070 12.014l60.542 60.534c59.78-11.968 115.376-35.512 164.356-68.19v-85.956c0-11.69 4.9-22.214 12.73-29.702 7.486-7.818 18.002-12.708 29.678-12.706l85.876-0.004c32.668-49.032 56.182-104.674 68.104-164.504l-61.050-61.052c-8.266-8.266-12.244-19.174-12-30.004-0.236-10.818 3.742-21.712 12-29.968l60.882-60.888c-11.91-59.144-35.158-114.178-67.37-162.758l-86.444-0.004c-0.004 0-0.008 0-0.008 0-11.674 0-22.188-4.89-29.67-12.708-7.83-7.486-12.73-18.012-12.73-29.702v-86.816c-48.912-32.632-104.418-56.158-164.106-68.14l-60.792 60.784c-8.024 8.032-18.546 12.014-29.070 12.014-0.3 0-0.602-0.004-0.9-0.012-0.308 0.008-0.618 0.012-0.93 0.012-10.522 0-21.044-3.982-29.072-12.014l-60.906-60.906zM511.856 314.472c-109.014 0-197.386 88.372-197.386 197.384 0 109.010 88.374 197.382 197.386 197.382v0.134c0.746 0 1.492 0.012 2.24 0.004 14.806-0.16 29.214-1.942 43.056-5.182 1.022-0.238 1.932-0.496 2.794-0.762 17.328-4.988 29.94-21.012 29.738-39.916-0.242-22.71-18.846-40.926-41.556-40.686-2.996 0.032-5.902 0.402-8.708 1.042-0.090 0.016-0.178 0-0.266 0.022-8.18 1.99-16.708 3.096-25.472 3.224-0.586-0.074-1.19-0.124-1.826-0.124-63.486 0-115.142-51.65-115.142-115.138 0-63.49 51.656-115.142 115.142-115.142 63.488 0 115.14 51.652 115.14 115.142 0 8.924-1.028 17.616-2.964 25.958-0.020 0.090-0.008 0.178-0.020 0.268-0.61 2.812-0.948 5.724-0.948 8.72 0 22.71 18.408 41.122 41.122 41.122 18.906 0 34.792-12.778 39.596-30.158 0.262-0.866 0.508-1.78 0.736-2.804 3.092-13.876 4.722-28.3 4.722-43.106 0-109.012-88.372-197.384-197.384-197.384z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M288 378.668h448c22.094 0 40 17.906 40 40 0 22.090-17.906 40-40 40h-448c-22.090 0-40-17.91-40-40s17.91-40 40-40zM736 565.334h-448c-22.090 0-40 17.91-40 40 0 22.094 17.91 40 40 40h448c22.094 0 40-17.906 40-40 0-22.090-17.906-40-40-40zM960 232.004v560c0 6.804-1.714 13.196-4.704 18.812-0.042 0.082-0.078 0.172-0.124 0.254-0.524 0.976-1.11 1.914-1.722 2.836-0.098 0.152-0.18 0.314-0.282 0.458-7.188 10.64-19.36 17.636-33.168 17.636h-519.766l-114.292 114.286c-8.036 8.046-18.644 11.91-29.18 11.67-0.292 0.008-0.582 0.046-0.876 0.046-22.090 0-40-17.91-40-40v-86.004h-111.886c-22.090 0-40-17.906-40-40v0-560c0-20.34 15.192-37.094 34.84-39.632 1.692-0.214 3.406-0.368 5.16-0.368h816c1.754 0 3.468 0.154 5.164 0.368 19.644 2.542 34.836 19.296 34.836 39.638zM880 272h-736v480h736v-480z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M984.032 472h-186.808c-19.474-140.12-139.74-248-285.222-248s-265.748 107.88-285.222 248h-186.746c-22.092 0-40 17.912-40 40.002 0 22.092 17.91 40 40 40h186.746c19.476 140.122 139.74 247.998 285.222 247.998s265.746-107.876 285.222-247.998h186.808c22.092 0 40-17.91 40-40s-17.908-40.002-40-40.002zM512 720c-114.692 0-208-93.308-208-208s93.308-208 208-208 208 93.308 208 208-93.308 208-208 208z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M960 512c0-247.424-200.574-448-448-448-247.422 0-448 200.576-448 448s200.578 448 448 448c247.426 0 448-200.576 448-448zM251.786 772.214c-69.504-69.508-107.786-161.918-107.786-260.214 0-98.294 38.282-190.708 107.786-260.216 69.508-69.504 161.918-107.784 260.214-107.784s190.708 38.28 260.214 107.784c69.508 69.508 107.786 161.922 107.786 260.216 0 98.296-38.278 190.708-107.786 260.214s-161.922 107.786-260.214 107.786c-98.296 0-190.708-38.28-260.214-107.786zM565.742 565.74c-0.93 0.93-1.95 1.768-3.050 2.498l-237.586 158.392c-7.934 5.29-18.496 4.242-25.238-2.498-6.738-6.742-7.786-17.304-2.496-25.236l158.39-237.588c1.464-2.2 3.348-4.082 5.546-5.546l237.586-158.392c7.934-5.29 18.496-4.242 25.238 2.498 6.742 6.742 7.79 17.304 2.5 25.238l-158.394 237.586c-0.73 1.1-1.566 2.118-2.496 3.048zM386.122 637.878l151.054-100.704-50.352-50.352-100.702 151.056z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M171 469h298V171H246c-42 0-75 33-75 75v223zm0 86v223c0 42 33 75 75 75h223V555H171zm682-86V246c0-42-33-75-75-75H555v298h298zm0 86H555v298h223c42 0 75-33 75-75V555zM256 85h512c94 0 171 77 171 171v512c0 94-77 171-171 171H256c-94 0-171-77-171-171V256c0-94 77-171 171-171z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M960.132 210.186c0-0.444-0.050-0.874-0.066-1.312-0.024-0.684-0.044-1.366-0.104-2.046-0.060-0.74-0.158-1.468-0.26-2.198-0.080-0.564-0.156-1.128-0.258-1.692-0.146-0.792-0.328-1.566-0.518-2.34-0.124-0.508-0.244-1.014-0.39-1.518-0.224-0.784-0.488-1.548-0.76-2.312-0.176-0.49-0.344-0.98-0.538-1.466-0.302-0.754-0.642-1.486-0.988-2.216-0.224-0.472-0.436-0.946-0.68-1.41-0.398-0.762-0.838-1.496-1.284-2.228-0.242-0.396-0.466-0.798-0.722-1.19-0.608-0.924-1.262-1.81-1.942-2.678-0.132-0.168-0.248-0.346-0.382-0.512-0.98-1.212-2.028-2.364-3.14-3.454l-104.020-104.9c-3.714-3.714-7.988-6.518-12.542-8.464-0.088-0.040-0.174-0.084-0.262-0.122-0.994-0.418-2.006-0.774-3.024-1.108-0.242-0.080-0.474-0.176-0.72-0.252-0.942-0.288-1.894-0.516-2.854-0.732-0.334-0.076-0.658-0.176-0.996-0.244-0.998-0.2-2.004-0.336-3.010-0.458-0.306-0.038-0.606-0.1-0.912-0.13-1.322-0.13-2.65-0.204-3.976-0.204h-391.784c-1.754 0-3.468 0.152-5.162 0.372-19.646 2.538-34.838 19.29-34.838 39.628v145.516h-279.874c-1.754 0-3.468 0.152-5.162 0.372-19.646 2.538-34.838 19.29-34.838 39.628v628.28c0 22.094 17.91 40 40 40h496.118c13.808 0 25.98-6.996 33.168-17.636 0.102-0.148 2.084-3.466 2.128-3.548 2.992-5.612 4.704-12.010 4.704-18.808 0 0 0 0 0-0.004v-145.518h279.874c13.808 0 25.98-6.996 33.168-17.636 0.102-0.148 2.084-3.466 2.128-3.548 2.992-5.612 4.704-12.010 4.704-18.808 0 0 0 0 0-0.004v-521.828c0.008-0.23-0.016-0.458-0.014-0.688 0.002-0.202 0.028-0.39 0.028-0.584zM144.124 878.792v-548.278h311.752v65.186c0 22.090 17.91 40 40 40h64.366v443.092h-416.118zM640.244 693.278v-296.31c0.006-0.23-0.018-0.458-0.014-0.688 0.004-0.196 0.030-0.382 0.030-0.578 0-0.444-0.052-0.874-0.066-1.312-0.024-0.684-0.044-1.366-0.104-2.046-0.062-0.74-0.16-1.468-0.262-2.198-0.078-0.564-0.152-1.128-0.258-1.692-0.144-0.792-0.324-1.566-0.516-2.34-0.124-0.508-0.246-1.014-0.39-1.518-0.226-0.784-0.488-1.548-0.76-2.312-0.174-0.49-0.342-0.98-0.538-1.466-0.302-0.754-0.64-1.486-0.988-2.216-0.222-0.472-0.438-0.946-0.68-1.41-0.398-0.762-0.838-1.496-1.284-2.228-0.242-0.396-0.466-0.798-0.724-1.19-0.606-0.924-1.262-1.81-1.942-2.678-0.13-0.168-0.246-0.346-0.382-0.512-0.978-1.212-2.028-2.364-3.138-3.454l-104.020-104.9c-3.714-3.714-7.988-6.518-12.542-8.464-0.088-0.040-0.172-0.084-0.262-0.122-0.994-0.418-2.004-0.774-3.024-1.108-0.242-0.080-0.476-0.176-0.72-0.252-0.942-0.288-1.896-0.516-2.854-0.732-0.334-0.076-0.658-0.176-0.996-0.244-0.998-0.2-2.004-0.336-3.012-0.458-0.304-0.038-0.602-0.1-0.91-0.13-1.322-0.13-2.648-0.204-3.976-0.204h-31.916v-105.516h311.752v65.186c0 22.090 17.91 40 40 40h64.366v443.092h-239.87z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M392.016 672.016h240.032c22.092 0 40-17.908 40-40v-240.032c0-22.092-17.908-40-40-40h-240.032c-22.092 0-40 17.908-40 40v240.032c0 22.092 17.908 40 40 40zM432.016 431.984h160.032v160.032h-160.032v-160.032zM864.032 424h71.98c22.094 0 40.004-17.906 40.004-40 0-22.092-17.906-40-40-40h-71.984v-143.968c0-22.092-17.908-40-40-40h-144v-72.012c0-22.094-17.906-40.004-40-40.004-22.090 0-40 17.906-40 40v72.016h-176v-72.012c0-22.094-17.906-40.004-40-40.004-22.090 0-40 17.906-40 40v72.016h-144c-22.092 0-40 17.908-40 40v143.968h-71.984c-22.094 0-40 17.908-40 40s17.91 40 40 40h71.984v176h-71.984c-22.094 0-40 17.908-40 40s17.91 40 40 40h71.984v144.030c0 22.092 17.908 40 40 40h144v71.954c0 22.094 17.906 40 40 40s40-17.91 40-40v-71.954h176v71.954c0 22.094 17.906 40 40 40s40-17.91 40-40v-71.954h144c22.092 0 40-17.908 40-40v-144.030h71.98c22.094 0 40.004-17.906 40.004-40 0-22.092-17.906-40-40-40h-71.984v-176zM784.032 784.032h-143.692c-0.104 0-0.204-0.016-0.308-0.016s-0.206 0.016-0.308 0.016h-127.382c-0.104 0-0.204-0.016-0.308-0.016s-0.206 0.016-0.308 0.016h-127.382c-0.104 0-0.204-0.016-0.308-0.016s-0.206 0.016-0.308 0.016h-143.696v-544h544v544z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M376.188 672.062h-112.124c-22.092 0-40-17.908-40-40s17.908-40 40-40h112.124c22.092 0 40 17.908 40 40s-17.908 40-40 40zM960 232.002v560c0 6.8-1.708 13.2-4.704 18.81-0.044 0.082-0.078 0.172-0.124 0.254-0.524 0.974-1.112 1.914-1.722 2.836-0.098 0.15-0.18 0.31-0.282 0.458-7.188 10.64-19.36 17.638-33.168 17.638h-816c-22.090 0-40-17.908-40-40v-559.998c0-20.34 15.192-37.092 34.838-39.628 1.694-0.218 3.408-0.372 5.162-0.372h816c1.754 0 3.468 0.152 5.162 0.372 19.646 2.536 34.838 19.288 34.838 39.63zM144 272.002v80.030h736v-80.030h-736zM880 751.998v-239.966h-736v239.966h736z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M1013.286 955.716l-443.72-443.716 443.718-443.718c15.622-15.622 15.62-40.948-0.004-56.566-15.618-15.622-40.942-15.622-56.562 0l-443.716 443.718-443.72-443.718c-15.62-15.624-40.946-15.622-56.566 0-15.622 15.62-15.622 40.944 0 56.566l443.722 443.718-443.722 443.722c-15.622 15.618-15.62 40.942 0 56.56s40.948 15.622 56.566 0l443.72-443.718 443.722 443.718c15.618 15.624 40.942 15.622 56.56 0 15.62-15.618 15.622-40.944 0.002-56.566z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M567.594 674.956c-17.674 30.61-56.816 41.098-87.426 23.426-30.61-17.676-41.1-56.816-23.426-87.426 10.134-17.554 27.33-28.472 45.928-31.278l146.974-254.57c11.042-19.132 35.506-25.688 54.64-14.64 19.13 11.046 25.688 35.508 14.64 54.64l-147.084 254.75c6.736 17.434 5.826 37.648-4.246 55.098zM512.002 209.26c-98.296 0-190.708 38.28-260.214 107.786s-107.786 161.92-107.786 260.214c0 81.428 26.252 158.786 74.768 222.452 88.404-30.49 188.406-46.448 292.732-46.448 104.662 0 204.926 16.046 293.524 46.716 48.65-63.712 74.976-141.164 74.976-222.72 0-98.294-38.28-190.708-107.786-260.214s-161.918-107.786-260.214-107.786zM512.002 129.26c247.424 0 448 200.578 448 448 0 124.132-50.494 236.468-132.054 317.602-87.096-38.574-196.984-61.598-316.446-61.598-119.146 0-228.772 22.902-315.758 61.296-81.376-81.114-131.742-193.324-131.742-317.3 0-247.422 200.576-448 448-448v0z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M895.95 221.364c-3.414-87.32-173.972-157.672-383.918-157.672s-380.504 70.352-383.918 157.672h-0.082v578.328c0 88.552 171.918 160.338 384 160.338s384-71.786 384-160.338v-578.328h-0.082zM798.412 430.578c-15.6 11.386-37.69 22.346-63.882 31.696-60.984 21.77-140.002 33.758-222.498 33.758s-161.514-11.988-222.498-33.758c-26.192-9.348-48.282-20.308-63.88-31.696-8.706-6.352-13.646-11.608-16.122-14.874v-92.9c70.29 37.478 179.654 61.566 302.5 61.566s232.21-24.088 302.5-61.566v92.9c-2.476 3.266-7.416 8.522-16.12 14.874zM814.532 514.464v93.24c-2.474 3.266-7.416 8.522-16.12 14.874-15.6 11.386-37.69 22.346-63.882 31.696-60.984 21.77-140.002 33.758-222.498 33.758s-161.514-11.988-222.498-33.758c-26.192-9.348-48.282-20.308-63.88-31.696-8.706-6.352-13.646-11.608-16.122-14.874v-93.24c70.29 37.48 179.654 61.566 302.5 61.566s232.21-24.086 302.5-61.566zM225.652 209.146c15.6-11.386 37.69-22.346 63.88-31.696 60.984-21.77 140.002-33.758 222.498-33.758s161.514 11.988 222.498 33.758c26.192 9.348 48.282 20.308 63.882 31.696 8.704 6.352 13.646 11.608 16.12 14.874v0.026c-2.474 3.266-7.416 8.522-16.12 14.874-15.6 11.386-37.69 22.346-63.882 31.696-60.984 21.77-140.002 33.758-222.498 33.758s-161.514-11.988-222.498-33.758c-26.192-9.348-48.282-20.308-63.88-31.696-8.706-6.352-13.646-11.608-16.122-14.874v-0.026c2.476-3.268 7.418-8.524 16.122-14.874zM798.412 814.578c-15.6 11.386-37.69 22.346-63.882 31.696-60.984 21.77-140.002 33.758-222.498 33.758s-161.514-11.988-222.498-33.758c-26.192-9.348-48.282-20.308-63.88-31.696-8.714-6.36-13.66-11.62-16.13-14.886h0.010v-93.228c70.29 37.48 179.654 61.566 302.5 61.566s232.21-24.086 302.5-61.566v93.228h0.010c-2.474 3.266-7.42 8.526-16.132 14.886z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M828.786 195.216c-174.958-174.956-458.612-174.958-633.568 0-174.954 174.954-174.956 458.612 0 633.566 174.954 174.956 458.614 174.956 633.568 0 174.954-174.954 174.952-458.612 0-633.566zM251.786 251.786c69.506-69.506 161.916-107.784 260.212-107.788 84.838 0 165.278 28.538 230.402 81.028l-517.372 517.374c-52.492-65.126-81.026-145.568-81.030-230.404 0.004-98.294 38.282-190.704 107.788-260.21zM772.214 772.214c-69.506 69.506-161.918 107.784-260.214 107.786-84.836-0.004-165.276-28.538-230.402-81.030l517.376-517.372c52.492 65.126 81.028 145.564 81.028 230.402-0.004 98.296-38.284 190.71-107.788 260.214z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M371 147c-14 0-126 3-245 91 0 0-126 227-126 507 0 0 74 126 268 132l58-71c-111-34-153-103-153-103l24 15 4 2 8 4a668 668 0 0 0 420 68 629 629 0 0 0 228-89s-44 71-159 103l58 71c194-7 268-133 268-132 0-280-126-507-126-507-126-94-246-91-246-91l-12 14a576 576 0 0 1 218 110 729 729 0 0 0-441-81l-15 1c-31 4-105 14-199 56-33 14-52 24-52 24s72-69 230-114l-9-10h-1zm-23 323c50 0 91 43 90 97 0 53-40 96-90 96-49 0-89-43-89-96 0-54 39-97 89-97zm321 0c49 0 89 43 89 97 0 53-39 96-89 96s-90-43-90-96c0-54 40-97 90-97z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M919.938 128h-816.008c-1.38 0-2.746 0.070-4.090 0.208-20.168 2.046-35.91 19.080-35.91 39.792v688c0 22.090 17.91 40 40 40h816.008c22.098 0 40-17.91 40-40v-688c0-22.094-17.906-40-40-40zM395.934 470.67h232v162.664h-232v-162.664zM355.934 633.334h-212.004v-162.664h212.004v162.664zM395.934 430.67v-142.662h232v142.662h-232zM667.934 470.67h212.004v162.664h-212.004v-162.664zM667.934 430.67v-142.662h212.004v142.662h-212.004zM355.934 288.008v142.662h-212.004v-142.662h212.004zM143.93 673.334h212.004v142.662h-212.004v-142.662zM395.934 673.334h232v142.662h-232v-142.662zM667.934 673.334h212.004v142.662h-212.004v-142.662z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M919.938 128h-816.008c-1.38 0-2.746 0.070-4.090 0.208-20.168 2.046-35.91 19.080-35.91 39.792v688c0 22.090 17.91 40 40 40h816.008c22.098 0 40-17.91 40-40v-688c-0-22.094-17.906-40-40-40zM143.93 288.008h736.008v527.988h-736.008v-527.988zM248 400.004c0-22.090 17.91-40 40-40h448c22.094 0 40 17.906 40 40 0 22.090-17.906 40-40 40h-448c-22.090 0-40-17.91-40-40zM776 552.002c0 22.094-17.906 40-40 40h-448c-22.090 0-40-17.906-40-40 0-22.090 17.91-40 40-40h448c22.094 0 40 17.91 40 40zM776 704c0 22.094-17.906 40-40 40h-448c-22.090 0-40-17.906-40-40 0-22.090 17.91-40 40-40h448c22.094 0 40 17.91 40 40z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M863.98 242.454c0.008-0.23-0.094-3.944-0.152-4.624-0.058-0.688-0.368-2.972-0.496-3.742-0.008-0.058-0.352-1.712-0.54-2.486-0.124-0.508-0.246-1.014-0.39-1.518-0.226-0.784-1.106-3.292-1.296-3.78-0.304-0.754-1.426-3.162-1.668-3.626-0.398-0.762-1.75-3.028-2.008-3.418-0.606-0.924-1.262-1.81-1.942-2.678-0.132-0.168-0.246-0.346-0.382-0.512-0.98-1.212-2.028-2.364-3.14-3.454l-104.020-104.9c-3.714-3.714-7.988-6.518-12.54-8.464-0.090-0.040-3.762-1.404-4.008-1.48-0.942-0.288-1.894-0.516-2.852-0.732-0.336-0.076-0.66-0.176-0.996-0.244-1-0.2-3.618-0.558-3.922-0.59-1.324-0.13-2.652-0.204-3.976-0.204h-519.652c-1.754 0-3.468 0.152-5.164 0.372-19.644 2.54-34.836 19.292-34.836 39.628v752c0 22.094 17.91 40 40 40h624c22.090 0 40-17.906 40-40l-0.020-645.548zM784 848h-544v-672l439.614 0.002v65.186c0 22.090 17.91 40 40 40h64.368l0.018 566.812zM664 336c22.090 0 40 17.908 40 40s-17.91 40-40 40h-304c-22.092 0-40-17.908-40-40s17.908-40 40-40h304zM704 528c0 22.092-17.91 40-40 40h-304c-22.092 0-40-17.908-40-40s17.908-40 40-40h304c22.090 0 40 17.908 40 40zM704 680c0 22.092-17.91 40-40 40h-304c-22.092 0-40-17.908-40-40s17.908-40 40-40h304c22.090 0 40 17.908 40 40z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M881 513.188c0 98.296-38.28 190.708-107.784 260.214-69.508 69.508-161.922 107.786-260.216 107.786-98.296 0-190.708-38.28-260.214-107.786s-107.786-161.916-107.786-260.214c0-98.294 38.28-190.708 107.786-260.216 69.508-69.504 161.918-107.784 260.214-107.784 98.294 0 190.708 38.28 260.216 107.784 69.504 69.508 107.784 161.922 107.784 260.216zM961 513.188c0-247.424-200.576-448-448-448s-448 200.576-448 448 200.576 448 448 448 448-200.576 448-448v0zM539.672 757.584l125.436-125c15.65-15.594 15.692-40.92 0.1-56.568-15.594-15.648-40.92-15.694-56.568-0.1l-57.204 57.004v-335.67c0-22.092-17.908-40-40-40s-40 17.908-40 40v335.258l-56.368-56.508c-15.602-15.64-40.928-15.672-56.568-0.070-7.834 7.814-11.752 18.066-11.75 28.32 0 10.22 3.892 20.442 11.68 28.25l124.688 125c15.594 15.634 40.91 15.672 56.554 0.084z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M948.56 263.376c12.704-12.708 15.072-31.836 7.11-46.936-1.84-3.524-4.232-6.832-7.192-9.792-0.286-0.286-0.594-0.528-0.886-0.8l-129.318-128.634c-0.048-0.048-0.088-0.106-0.138-0.154-7.812-7.812-18.050-11.716-28.292-11.714-10.242-0.004-20.484 3.902-28.296 11.714-0.064 0.066-0.12 0.136-0.184 0.204l-636.168 636.168c-5.868 5.134-10.21 11.958-12.298 19.748l-47.606 177.664c-3.7 13.804 0.248 28.534 10.352 38.638 7.602 7.6 17.816 11.714 28.288 11.714 3.452 0 6.93-0.446 10.352-1.364l177.664-47.606c7.296-1.956 13.732-5.904 18.74-11.216l521.486-521.484c1.126-0.904 2.222-1.87 3.268-2.914 1.042-1.044 2.006-2.138 2.91-3.264l107.75-107.748c0.836-0.71 1.668-1.432 2.458-2.224zM806.9 291.66l-73.592-73.202 56.61-56.61 73.594 73.2-56.612 56.612zM281.566 816.996l-73.4-73.4 468.572-468.568 73.594 73.202-468.766 468.766zM160.496 864.628l11.742-43.822 32.080 32.080-43.822 11.742z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M184 393c66.274 0 120 53.73 120 120s-53.726 120-120 120c-66.286 0-120-53.73-120-120s53.714-120 120-120zM512 393c66.272 0 120 53.73 120 120s-53.728 120-120 120c-66.286 0-120-53.73-120-120s53.714-120 120-120zM840 393c66.272 0 120 53.73 120 120s-53.728 120-120 120c-66.286 0-120-53.73-120-120s53.714-120 120-120z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M960.032 268.004c0.748-10.040-2.246-20.364-9.226-28.684-5.984-7.132-13.938-11.62-22.394-13.394-0.13-0.026-0.268-0.066-0.396-0.092-1.082-0.22-2.172-0.376-3.272-0.5-0.25-0.032-0.492-0.080-0.742-0.102-1.028-0.096-2.052-0.136-3.090-0.156-0.292-0.002-0.582-0.042-0.876-0.042h-816.008c-21.416 0-38.848 16.844-39.898 38-0.034 0.628-0.092 1.256-0.096 1.89 0 0.034-0.006 0.074-0.006 0.114 0 0.050 0.008 0.102 0.008 0.152v495.692c0 0.054-0.008 0.106-0.008 0.156 0 22.090 17.91 40 40 40h816.004c13.808 0 25.98-6.996 33.17-17.636 0.1-0.148 0.182-0.312 0.28-0.458 0.606-0.93 1.196-1.868 1.722-2.84 0.046-0.082 0.080-0.172 0.124-0.258 2.992-5.604 4.704-12.008 4.704-18.804v0 0-493.038zM144.032 350.156l339.946 281.188c6.568 6.434 14.918 10.168 23.564 11.122 0.16 0.024 0.32 0.050 0.48 0.066 0.838 0.082 1.676 0.114 2.518 0.14 0.496 0.020 0.994 0.058 1.492 0.058s0.996-0.042 1.492-0.058c0.842-0.028 1.68-0.058 2.518-0.14 0.16-0.016 0.32-0.042 0.48-0.066 8.646-0.958 16.996-4.688 23.564-11.122l339.946-281.206v370.894h-736v-370.876zM215.066 305.030h593.91l-296.946 245.422-296.964-245.422z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M959.688 920.068l0.31-176c0.040-22.094-17.84-40.032-39.93-40.070-22.092-0.040-40.032 17.838-40.070 39.93l-0.142 79.672-235.734-235.732c-15.622-15.622-40.948-15.622-56.57 0s-15.622 40.948 0 56.568l235.442 235.442-78.946-0.1c-22.092-0.028-40.022 17.86-40.050 39.952-0.014 11.064 4.464 21.084 11.714 28.334 7.228 7.224 17.208 11.702 28.236 11.714l175.688 0.22c22.086 0.028 40.014-17.846 40.052-39.93zM920.178 64.228l-176-0.308c-22.094-0.040-40.032 17.84-40.070 39.93-0.040 22.092 17.838 40.032 39.93 40.070l79.672 0.14-235.732 235.734c-15.622 15.622-15.622 40.948 0 56.568s40.948 15.622 56.568 0l235.442-235.442-0.1 78.946c-0.028 22.092 17.86 40.022 39.952 40.050 11.064 0.014 21.084-4.464 28.334-11.714 7.224-7.228 11.702-17.208 11.714-28.236l0.22-175.688c0.026-22.082-17.846-40.010-39.93-40.050zM64.236 103.742l-0.308 176c-0.040 22.094 17.84 40.032 39.93 40.070 22.092 0.040 40.032-17.84 40.070-39.93l0.14-79.672 235.734 235.73c15.622 15.622 40.948 15.622 56.568 0s15.622-40.946 0-56.566l-235.442-235.442 78.946 0.098c22.092 0.028 40.022-17.86 40.050-39.95 0.014-11.066-4.464-21.086-11.714-28.336-7.228-7.222-17.208-11.7-28.236-11.714l-175.688-0.218c-22.084-0.026-40.012 17.844-40.050 39.93zM103.748 959.766l176 0.308c22.094 0.040 40.032-17.84 40.070-39.93 0.040-22.092-17.84-40.032-39.93-40.070l-79.672-0.14 235.73-235.734c15.622-15.622 15.622-40.948 0-56.568s-40.946-15.622-56.566 0l-235.442 235.442 0.098-78.946c0.028-22.092-17.86-40.022-39.95-40.050-11.066-0.014-21.086 4.464-28.336 11.714-7.222 7.228-11.7 17.208-11.714 28.236l-0.218 175.688c-0.026 22.082 17.844 40.010 39.93 40.050z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M512.008 959.964c-10.236 0-20.47-3.904-28.282-11.712l-239.898-239.838c-15.624-15.62-15.624-40.946-0.006-56.57 15.622-15.622 40.948-15.624 56.568-0.004l211.618 211.562 211.712-211.658c15.624-15.618 40.952-15.616 56.568 0.004 15.62 15.624 15.618 40.95-0.006 56.57l-239.994 239.934c-7.808 7.808-18.044 11.712-28.28 11.712zM483.824 75.744l-239.994 239.934c-15.624 15.62-15.624 40.948-0.006 56.57s40.944 15.622 56.568 0.004l211.712-211.658 211.618 211.562c15.622 15.62 40.948 15.616 56.568-0.006 15.62-15.624 15.618-40.95-0.006-56.57l-239.898-239.836c-7.81-7.81-18.044-11.714-28.282-11.714s-20.47 3.906-28.28 11.714z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M1008.714 490.522c-9.002-12.594-223.276-308.808-496.684-308.808-273.444 0-487.682 296.214-496.684 308.808l-15.316 21.49 15.316 21.466c9.002 12.618 223.24 308.808 496.684 308.808 273.408 0 487.682-296.19 496.684-308.808l15.316-21.466-15.316-21.49zM807.68 631.688c-46 39.142-92.558 70.064-138.382 91.904-53.874 25.676-106.786 38.694-157.266 38.694-50.49 0-103.406-13.018-157.282-38.696-45.826-21.838-92.382-52.758-138.378-91.902-53.708-45.706-94.302-92.122-116.61-119.672 22.36-27.602 63.028-74.094 116.612-119.696 45.996-39.146 92.554-70.068 138.378-91.908 53.876-25.678 106.792-38.698 157.28-38.698 50.48 0 103.39 13.020 157.264 38.696 45.824 21.842 92.382 52.764 138.382 91.91 53.602 45.614 94.264 92.098 116.624 119.696-22.306 27.544-62.898 73.954-116.622 119.672zM692.032 512.036c0 99.41-80.588 180-180 180s-180-80.59-180-180c0-99.406 80.588-179.998 180-179.998s180 80.59 180 179.998z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M75.744 948.314c-15.62-15.62-15.62-40.948 0-56.564l816-816c15.626-15.624 40.95-15.624 56.57 0 15.624 15.62 15.626 40.946 0.004 56.57l-816 815.994c-15.62 15.62-40.95 15.62-56.572 0zM332.032 512.034c0 20.104 3.296 39.434 9.376 57.484l228.104-228.106c-18.050-6.080-37.38-9.376-57.48-9.376-99.412-0.004-180 80.588-180 179.996zM692.032 512.034c0-20.1-3.3-39.432-9.38-57.484l-228.106 228.11c18.052 6.080 37.384 9.376 57.488 9.376 99.412 0 180-80.59 180-180zM1008.716 490.522c-4.98-6.968-72.86-100.8-178.81-183.22l-57.040 57.040c11.624 8.8 23.24 18.128 34.814 27.98 53.6 45.614 94.264 92.1 116.624 119.696-22.304 27.544-62.896 73.954-116.62 119.672-46 39.14-92.56 70.064-138.384 91.904-53.872 25.676-106.786 38.694-157.266 38.694-37.448 0-76.234-7.18-115.76-21.36l-61.486 61.49c54.786 24.22 114.45 39.87 177.248 39.87 273.41 0 487.684-296.19 496.686-308.808l15.316-21.468-15.316-21.49zM216.372 631.69c-53.708-45.706-94.3-92.12-116.61-119.672 22.36-27.6 63.028-74.094 116.612-119.696 46-39.146 92.554-70.068 138.38-91.908 53.874-25.68 106.79-38.7 157.28-38.7 37.46 0 76.264 7.188 115.8 21.38l61.484-61.484c-54.796-24.236-114.474-39.896-177.286-39.896-273.446 0-487.684 296.214-496.686 308.808l-15.316 21.49 15.314 21.466c4.98 6.984 72.866 100.84 178.84 183.26l57.040-57.040c-11.64-8.806-23.264-18.144-34.854-28.008z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M582.52 960h-167.88v-448h-112v-154.396l112-0.052-0.166-90.948c-0.036-125.974 34.12-202.604 182.484-202.604h123.542v154.424h-77.19c-57.782 0-60.566 21.56-60.566 61.85l-0.218 77.278h138.854l-16.376 154.394-122.36 0.052-0.124 448.002z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M960 513c0-247.424-200.574-448-448-448-247.422 0-448 200.576-448 448s200.578 448 448 448c247.426 0 448-200.576 448-448zM251.786 773.214c-69.504-69.508-107.786-161.918-107.786-260.214 0-98.294 38.282-190.708 107.786-260.216 69.506-69.504 161.918-107.784 260.214-107.784s190.708 38.28 260.214 107.784c69.508 69.508 107.786 161.922 107.786 260.216 0 98.296-38.278 190.708-107.786 260.214-69.506 69.506-161.922 107.786-260.214 107.786-98.296 0-190.708-38.28-260.214-107.786zM416.5 384.998c0 35.346-28.654 64-64 64s-64-28.654-64-64 28.654-64 64-64 64 28.654 64 64zM736 384.998c0 35.346-28.654 64-64 64s-64-28.654-64-64 28.654-64 64-64 64 28.654 64 64zM763.62 636.976v0.094c-49.554 87.14-143.21 145.93-250.62 145.93-107.486 0-201.2-58.868-250.726-146.108v-0.092c-3.34-5.842-5.274-12.59-5.274-19.8s1.934-13.958 5.274-19.798v-0.198h0.122c6.918-11.946 19.808-20.004 34.606-20.004s27.69 8.058 34.61 20.004h0.098c35.756 63.222 103.614 105.996 181.29 105.996s145.54-42.774 181.3-105.996h0.090c6.918-11.946 19.81-20.004 34.606-20.004s27.69 8.058 34.61 20.004h0.014v0.024c3.402 5.88 5.38 12.69 5.38 19.972 0 7.286-1.978 14.094-5.38 19.976z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M968 513c0-247.424-200.574-448-448-448-247.422 0-448 200.576-448 448s200.578 448 448 448c247.426 0 448-200.576 448-448zM259.786 773.214c-69.504-69.506-107.786-161.918-107.786-260.214 0-98.294 38.282-190.708 107.786-260.216 69.506-69.504 161.918-107.784 260.214-107.784s190.708 38.28 260.214 107.784c69.508 69.508 107.786 161.922 107.786 260.216 0 98.296-38.278 190.708-107.786 260.214-69.506 69.506-161.922 107.786-260.214 107.786-98.296 0-190.708-38.28-260.214-107.786zM424.5 384.998c0 35.346-28.654 64-64 64s-64-28.654-64-64 28.654-64 64-64 64 28.654 64 64zM744 384.998c0 35.346-28.654 64-64 64s-64-28.654-64-64 28.654-64 64-64 64 28.654 64 64zM777 641c0 22.094-17.906 40-40 40h-432c-22.090 0-40-17.906-40-40 0-22.090 17.91-40 40-40h432c22.094 0 40 17.91 40 40z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M960 513c0-247.424-200.574-448-448-448-247.422 0-448 200.576-448 448s200.578 448 448 448c247.426 0 448-200.576 448-448zM251.786 773.214c-69.504-69.506-107.786-161.918-107.786-260.214 0-98.294 38.282-190.708 107.786-260.216 69.506-69.504 161.918-107.784 260.214-107.784s190.708 38.28 260.214 107.784c69.508 69.508 107.786 161.922 107.786 260.216 0 98.296-38.278 190.708-107.786 260.214-69.506 69.506-161.922 107.786-260.214 107.786-98.296 0-190.708-38.28-260.214-107.786zM416.5 384.998c0 35.346-28.654 64-64 64s-64-28.654-64-64 28.654-64 64-64 64 28.654 64 64zM736 384.998c0 35.346-28.654 64-64 64s-64-28.654-64-64 28.654-64 64-64 64 28.654 64 64zM262.38 684.024v-0.094c49.552-87.14 143.208-145.93 250.62-145.93 107.486 0 201.2 58.868 250.726 146.108v0.092c3.34 5.842 5.274 12.59 5.274 19.8s-1.934 13.958-5.274 19.798v0.198h-0.122c-6.918 11.946-19.808 20.004-34.606 20.004s-27.69-8.058-34.61-20.004h-0.098c-35.76-63.222-103.618-105.996-181.292-105.996s-145.54 42.774-181.3 105.996h-0.090c-6.918 11.946-19.808 20.004-34.606 20.004s-27.69-8.058-34.61-20.004h-0.014v-0.024c-3.402-5.88-5.38-12.69-5.38-19.972 0.002-7.286 1.98-14.094 5.382-19.976z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M962.030 168.032c0 22.092-17.908 40-40.002 40h-815.996c-22.092 0-40-17.908-40-40v0c0-22.090 17.908-40 40-40h815.998c22.092 0 40 17.908 40 40v0zM770 544.034c0 22.090-17.908 40-40 40h-432c-22.090 0-40-17.908-40-40v0c0-22.090 17.908-40.002 40-40.002h432c22.090 0 40 17.912 40 40.002v0zM642.030 728.032c0 22.094-17.91 40-40.002 40h-175.998c-22.090 0-40-17.906-40-40v0c0-22.094 17.908-40.002 40-40.002h176c22.094 0.002 40 17.91 40 40.002v0zM866 352.030c0 22.092-17.906 40.002-40 40.002h-624c-22.090 0-40-17.91-40-40.002v0c0-22.090 17.908-40 40-40h624c22.092 0 40 17.91 40 40v0zM512.030 928.034c22.090 0 40.004-17.906 40.004-40v0c0-22.090-17.914-40-40.004-40v0c-22.090 0-40 17.91-40 40v0c0 22.092 17.91 40 40 40v0z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M168 960.060c-22.092 0-40-17.908-40-40v-816.36c0-22.092 17.908-40 40-40h687.698c16.178 0 30.764 9.746 36.956 24.694 6.192 14.946 2.77 32.15-8.67 43.59l-188.918 188.922 189.218 189.216c11.44 11.442 14.862 28.646 8.67 43.592-6.192 14.948-20.776 24.694-36.956 24.694h-647.998v341.654c0 22.090-17.908 39.998-40 39.998zM208 498.406h551.428l-149.218-149.216c-15.622-15.622-15.622-40.95 0-56.568l148.918-148.922h-551.128v354.706z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M571 274h327c23 0 41 18 41 41v488c0 22-18 40-41 40H126c-23 0-41-18-41-40V242c0-34 27-61 61-61h317c18 0 35 7 47 21l61 72zm-119-8H170v492h684V359H531l-79-93z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M948.362 178.828l-471.082 470.086c-0.24 0.25-0.45 0.52-0.698 0.77-7.82 7.82-18.070 11.722-28.32 11.712-10.25 0.010-20.504-3.892-28.324-11.712-0.262-0.262-0.48-0.546-0.734-0.812l-221.736-221.738c-15.624-15.622-15.624-40.95 0-56.566 15.618-15.622 40.946-15.624 56.57 0l194.224 194.222 443.53-442.528c15.622-15.618 40.95-15.618 56.57 0 15.62 15.62 15.62 40.946 0 56.566zM98.372 128.448c-18.926 0-34.266 15.342-34.266 34.268v699.032c0 18.926 15.34 34.266 34.266 34.266h699.032c18.926 0 34.266-15.34 34.266-34.266v-430.588c0 0 0.002-1.184 0.002-1.788 0-22.090-17.914-40-40.004-40s-40 17.91-40 40c0 0.288 0.002 386.64 0.002 386.64h-607.562v-607.564h600.002c22.090-0.002 40.002-17.906 40.002-40 0-22.090-17.914-40-40.004-40z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M465.926 641.356l-149.328 258.708h494.074l149.328-258.708h-494.074zM917.704 567.988l-256.33-444.048h-298.686l256.356 444.048h298.66zM320.236 197.442l-256.236 443.914 149.36 258.708 256.23-443.914-149.354-258.708z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M512.062 64.032c-247.426 0-448 200.576-448 448s200.574 448 448 448c247.422 0 448-200.576 448-448s-200.578-448-448-448zM251.846 772.246c-69.506-69.508-107.784-161.918-107.784-260.214 0-98.294 38.278-190.708 107.784-260.216 69.508-69.504 161.92-107.784 260.216-107.784s190.708 38.28 260.214 107.784c69.504 69.508 107.786 161.922 107.786 260.216 0 98.296-38.282 190.708-107.786 260.214-42.852 42.848-94.41 73.806-150.684 91.27v-65.104c0-34.584-11.86-60.022-35.578-76.31 14.864-1.43 28.512-3.43 40.942-6.002 12.434-2.572 25.578-6.292 39.442-11.146s26.292-10.644 37.3-17.364c11-6.712 21.574-15.434 31.718-26.15s18.648-22.866 25.508-36.444c6.864-13.57 12.292-29.866 16.292-48.874 4.004-19.006 6-39.944 6-62.802 0-44.3-14.434-82.032-43.296-113.182 13.14-34.294 11.714-71.594-4.29-111.894l-10.718-1.286c-7.43-0.858-20.79 2.286-40.082 9.434-19.29 7.144-40.942 18.864-64.95 35.152-34.016-9.432-69.308-14.148-105.894-14.148-36.87 0-72.024 4.716-105.46 14.148-15.144-10.29-29.51-18.79-43.086-25.508s-24.436-11.29-32.582-13.718c-8.144-2.43-15.718-3.93-22.722-4.5-7-0.574-11.5-0.714-13.504-0.43-2 0.286-3.43 0.572-4.288 0.86-16.004 40.582-17.436 77.88-4.288 111.894-28.868 31.152-43.3 68.878-43.3 113.178 0 22.866 2 43.798 6.002 62.804 4 19.010 9.432 35.296 16.292 48.876s15.364 25.722 25.508 36.442c10.146 10.718 20.72 19.438 31.724 26.152s23.436 12.504 37.298 17.362c13.862 4.858 27.008 8.574 39.442 11.146 12.434 2.57 26.080 4.574 40.942 6.002-23.438 16.004-35.152 41.444-35.152 76.31v66.404c-57.936-17.198-111.030-48.638-154.966-92.572z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M511.989 937.076l-175.718-538.045h351.434l-175.717 538.045zM90.107 399.031l421.88 538.045-462.033-334.102c-9.156-6.631-15.047-17.289-15.047-29.321 0-3.985 0.645-7.821 1.839-11.406l-0.072 0.255 53.431-163.471zM90.107 399.031l105.75-324.083c2.508-7.304 9.319-12.457 17.334-12.457s14.825 5.153 17.294 12.329l0.042 0.128 105.749 324.082-246.165 0.001zM933.869 399.031l53.431 163.474c1.133 3.347 1.788 7.203 1.788 11.215 0 12.038-5.895 22.705-14.961 29.262l-0.104 0.072-462.034 334.022 421.88-538.046zM933.869 399.031h-246.162l105.75-324.083c2.543-7.242 9.325-12.341 17.292-12.341s14.748 5.096 17.256 12.212l0.042 0.127 105.825 324.083z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M530.878 65.424c-6.748-1.014-13.090-1.424-18.878-1.424s-12.13 0.41-18.878 1.424c-238.662 9.9-429.122 206.48-429.122 447.576 0 247.424 200.578 448 448 448 247.426 0 448-200.576 448-448 0-241.098-190.456-437.678-429.122-447.576zM877.84 472.998h-158.508c-3.16-92.542-17.532-179.266-41.262-247.494-6.442-18.52-13.534-35.536-21.228-50.988 42.548 18.214 81.66 44.556 115.374 78.268 59.988 59.99 96.69 137.046 105.624 220.214zM512 880c-65.872 0-120.112-143.058-127.206-327h254.41c-7.092 183.942-61.332 327-127.204 327zM384.714 472.998c6.426-175.362 55.69-314.010 117.15-327.852 3.372-0.092 6.748-0.146 10.134-0.146s6.764 0.054 10.136 0.146c61.46 13.842 110.722 152.49 117.148 327.852h-254.568zM251.786 252.784c33.714-33.71 72.826-60.052 115.374-78.268-7.694 15.452-14.788 32.468-21.226 50.988-23.732 68.228-38.104 154.952-41.264 247.494h-158.508c8.934-83.168 45.636-160.224 105.624-220.214zM146.16 553h158.578c3.298 91.792 17.632 177.762 41.194 245.498 6.798 19.55 14.33 37.416 22.526 53.542-43.050-18.232-82.616-44.772-116.672-78.826-59.988-59.99-96.69-137.044-105.626-220.214zM772.214 773.214c-34.054 34.054-73.622 60.592-116.672 78.824 8.196-16.126 15.726-33.99 22.528-53.542 23.558-67.736 37.892-153.704 41.192-245.498h158.578c-8.934 83.172-45.634 160.226-105.626 220.216z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M799.094 79.996c0 0-200.938 0-267.936 0-120.126 0-233.188 91.004-233.188 196.434 0 107.692 81.904 194.624 204.124 194.624 8.496 0 16.75-0.148 24.812-0.74-7.942 15.186-13.594 32.286-13.594 50.022 0 29.974 16.094 54.226 36.466 74.042-15.376 0-30.248 0.438-46.438 0.438-148.782 0.036-263.312 94.784-263.312 193.056 0 96.758 125.534 157.312 274.312 157.312 169.656 0 263.312-96.25 263.312-193.024 0-77.6-22.908-124.062-93.686-174.156-24.216-17.128-70.534-58.812-70.534-83.32 0-28.69 8.19-42.868 51.406-76.624 44.346-34.63 75.688-83.302 75.688-139.944 0-67.372-30-133.058-86.374-154.746h85l59.942-43.374zM701.504 735.438c2.092 8.992 3.276 18.226 3.276 27.624 0 78.226-50.374 139.304-194.934 139.304-102.874 0-177.124-65.078-177.124-143.304 0-76.622 92.122-140.434 194.934-139.32 24.004 0.254 46.376 4.136 66.69 10.702 55.812 38.834 95.874 60.808 107.158 104.994zM536.844 443.782c-69-2.094-134.624-77.212-146.564-167.876-11.874-90.664 34.378-160.030 103.442-157.97 68.996 2.060 134.594 74.818 146.53 165.432 11.906 90.696-34.408 162.508-103.408 160.414z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M324.832 513c22.090 0 40 17.91 40 40v304c0 22.090-17.906 40-40 40v0c-22.090 0-40-17.906-40-40v-304c0-22.090 17.91-40 40-40v0zM884.832 128.998c-22.090 0-40 17.906-40 40v688.002c0 22.094 17.91 40 40 40v0c22.094 0 40-17.91 40-40v-688.002c0-22.094-17.91-40-40-40v0zM698.164 256.998c-22.090 0-40 17.91-40 40v560.002c0 22.094 17.91 40 40 40v0c22.094 0 40-17.91 40-40v-560.002c0-22.090-17.91-40-40-40v0zM511.5 384.998c-22.090 0-40.004 17.91-40.004 40v432.002c0 22.094 17.914 40 40.004 40v0c22.090 0 40-17.91 40-40v-432.002c0-22.090-17.91-40-40-40v0zM139.168 641c-22.090 0-40 17.91-40 40v176c0 22.094 17.91 40 40 40v0c22.094 0 40-17.91 40-40v-176c0-22.090-17.91-40-40-40v0z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M820.536 489.23c-15.624 15.618-40.954 15.618-56.57 0l-42.006-42.002-169.898 169.9c-7.822 7.82-18.076 11.722-28.326 11.712-10.248 0.008-20.496-3.894-28.314-11.712l-96.178-96.182-140.67 140.674c-15.624 15.622-40.954 15.618-56.57-0.004-15.624-15.618-15.624-40.946 0-56.566l168.946-168.946c7.812-7.816 18.058-11.72 28.3-11.716 10.238-0.002 20.476 3.904 28.29 11.716l96.204 96.204 168.91-168.91c0.33-0.356 0.626-0.73 0.972-1.076 7.824-7.824 18.084-11.726 28.34-11.712 10.252-0.012 20.508 3.892 28.332 11.714 0.346 0.346 0.64 0.72 0.972 1.074l69.266 69.266c15.62 15.618 15.616 40.942 0 56.566zM880 144h-736v736h736v-736zM920 64c22.092 0 40 17.908 40 40v816c0 22.092-17.908 40-40 40h-816c-22.092 0-40-17.908-40-40v-816c0-22.092 17.908-40 40-40h816z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M896.38 635.332c-7.286-4.206-14.934-7.196-22.714-9.074v-228.148c7.788-1.882 15.44-4.874 22.732-9.082 40.902-23.614 54.92-75.934 31.3-116.846-23.62-40.914-75.942-54.932-116.846-31.318-7.286 4.21-13.704 9.34-19.22 15.14l-197.586-114.076c2.266-7.68 3.502-15.802 3.502-24.212 0-47.232-38.3-85.53-85.544-85.53-47.242 0-85.544 38.298-85.544 85.53 0 8.42 1.238 16.552 3.508 24.24l-197.598 114.046c-5.518-5.802-11.936-10.93-19.218-15.138-40.902-23.614-93.22-9.596-116.846 31.318-23.62 40.91-9.6 93.228 31.3 116.846 7.29 4.208 14.94 7.202 22.728 9.082v228.15c-7.782 1.878-15.434 4.866-22.718 9.074-40.91 23.62-54.93 75.938-31.31 116.848 23.624 40.914 75.944 54.932 116.856 31.312 7.28-4.206 13.692-9.334 19.206-15.13l197.588 114.080c-2.262 7.68-3.498 15.792-3.498 24.2 0 47.244 38.302 85.544 85.546 85.544 47.242 0 85.542-38.302 85.542-85.544 0-9.362-1.524-18.36-4.308-26.79l196.558-113.484c5.914 6.624 12.946 12.446 21.046 17.126 40.912 23.618 93.23 9.602 116.856-31.314 23.618-40.914 9.598-93.232-31.318-116.85zM253.492 689.212c-1.88-7.73-4.856-15.33-9.038-22.568-4.142-7.18-9.194-13.516-14.892-18.98l258.558-447.814c7.58 2.198 15.586 3.402 23.878 3.402 8.262 0 16.242-1.196 23.802-3.38l258.574 447.85c-5.676 5.456-10.704 11.77-14.834 18.928-4.182 7.238-7.162 14.838-9.042 22.566l-517.006-0.004zM771.404 291.408c-6.156 21.512-3.936 45.396 8.138 66.306 12.066 20.91 31.638 34.772 53.348 40.2v228.538c-1.074 0.266-2.144 0.56-3.208 0.868l-258.56-447.826c0.804-0.768 1.596-1.556 2.372-2.354l197.91 114.268zM450.526 177.162c0.75 0.772 1.516 1.536 2.296 2.282l-258.578 447.856c-1.038-0.3-2.084-0.586-3.134-0.85v-228.536c21.708-5.428 41.276-19.29 53.348-40.202 12.074-20.91 14.294-44.794 8.134-66.306l197.934-114.244zM575.392 849.216c-15.65-17.262-38.256-28.108-63.39-28.108-24.152 0-45.946 10.026-61.5 26.112l-197.908-114.266c0.28-0.986 0.544-1.98 0.794-2.972h517.226c0.464 1.888 0.976 3.756 1.57 5.61l-196.792 113.624z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M437.162 552.368c-1.694-0.216-3.408-0.37-5.162-0.37h-263.978c-1.754 0-3.468 0.152-5.162 0.37-19.646 2.538-34.838 19.292-34.838 39.63v264.040c0 22.094 17.91 40 40 40h263.978c13.808 0 25.98-6.996 33.168-17.636 0.102-0.148 0.184-0.308 0.282-0.458 0.612-0.924 1.2-1.862 1.722-2.838 0.046-0.082 0.080-0.172 0.124-0.254 2.994-5.61 4.704-12.008 4.704-18.808v-264.044c0-20.34-15.19-37.094-34.838-39.632zM208.022 816.038v-184.040h183.978v184.040h-183.978zM437.162 128.4c-1.694-0.216-3.408-0.37-5.162-0.37h-263.978c-1.754 0-3.468 0.152-5.162 0.37-19.646 2.538-34.838 19.292-34.838 39.63v263.968c0 22.094 17.91 40 40 40h263.978c13.808 0 25.98-6.996 33.168-17.636 0.102-0.148 0.184-0.308 0.282-0.458 0.612-0.924 1.2-1.862 1.722-2.838 0.046-0.082 0.080-0.172 0.124-0.254 2.994-5.61 4.704-12.008 4.704-18.808v-263.972c0-20.342-15.19-37.096-34.838-39.632zM208.022 392v-183.968h183.978v183.968h-183.978zM861.212 552.368c-1.694-0.216-3.408-0.37-5.162-0.37h-264.050c-1.754 0-3.468 0.152-5.162 0.37-19.646 2.538-34.838 19.292-34.838 39.63v264.040c0 22.094 17.91 40 40 40h264.048c13.808 0 25.98-6.996 33.168-17.636 0.102-0.148 0.184-0.308 0.282-0.458 0.612-0.924 1.2-1.862 1.722-2.838 0.046-0.082 0.080-0.172 0.124-0.254 2.994-5.61 4.704-12.008 4.704-18.808v-264.044c0.002-20.34-15.19-37.094-34.836-39.632zM632 816.038v-184.040h184.048v184.040h-184.048zM861.212 128.4c-1.694-0.216-3.408-0.37-5.162-0.37h-264.050c-1.754 0-3.468 0.152-5.162 0.37-19.646 2.538-34.838 19.292-34.838 39.63v263.968c0 22.094 17.91 40 40 40h264.048c13.808 0 25.98-6.996 33.168-17.636 0.102-0.148 0.184-0.308 0.282-0.458 0.612-0.924 1.2-1.862 1.722-2.838 0.046-0.082 0.080-0.172 0.124-0.254 2.994-5.61 4.704-12.008 4.704-18.808v-263.972c0.002-20.342-15.19-37.096-34.836-39.632zM632 392v-183.968h184.048v183.968h-184.048z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M541.146 448.384c-1.694-0.216-3.408-0.37-5.162-0.37h-367.968c-1.754 0-3.468 0.152-5.162 0.37-19.646 2.538-34.838 19.292-34.838 39.63v368.032c0 22.094 17.91 40 40 40h367.968c13.808 0 25.98-6.996 33.168-17.636 0.102-0.148 0.184-0.308 0.282-0.458 0.612-0.924 1.2-1.862 1.722-2.838 0.046-0.082 0.080-0.172 0.124-0.254 2.994-5.61 4.704-12.008 4.704-18.808v-368.036c0-20.34-15.192-37.094-34.838-39.632zM208.016 816.046v-288.032h287.968v288.032h-287.968zM736.032 856.046c0 22.090-17.908 40-40 40-22.090 0-40-17.908-40-40v-487.902l-488.016 0.002c-22.090 0-40-17.91-40-40s17.908-40.002 40-40.002h528.016c1.754 0 3.468 0.152 5.162 0.37 19.646 2.538 34.838 19.292 34.838 39.63v527.902zM896.032 168.030v688.004c-0.002 22.088-17.91 39.996-40 39.996s-40.002-17.908-40.002-40c0 0 0.002-304.026 0.002-304.040v-343.96h-343.96c-0.014 0-304.040 0.002-304.040 0.002-22.090 0-40-17.91-40-40s17.908-40.002 40-40.002h688c1.754 0 3.468 0.152 5.162 0.37 19.646 2.536 34.838 19.29 34.838 39.63z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M895.032 194.328c-20.906-21.070-46.492-37.316-76.682-48.938-30.104-11.71-63.986-17.39-101.474-17.39-19.55 0-38.744 2.882-57.584 9.094-18.472 6.062-36.584 14.242-54.072 24.246-17.476 9.828-34.056 21.276-49.916 33.898-16.038 12.8-30.456 25.572-43.346 38.664-13.52-13.092-28.026-25.864-43.616-38.664-15.684-12.624-32.080-24.070-49.382-33.898-17.214-10.004-35.414-18.184-54.704-24.246-19.104-6.21-38.568-9.094-58.034-9.094-37.126 0-70.56 5.68-100.48 17.39-29.732 11.622-55.328 27.868-76.328 48.938-20.994 21.094-37.214 46.962-48.478 77.328-11.174 30.544-16.942 64.5-16.942 101.812 0 21.628 3.068 43.078 9.19 64.53 6.308 21.096 14.416 41.986 24.876 61.642 10.446 19.656 22.702 38.488 36.584 56.59 13.88 18.124 28.388 34.516 43.344 49.58l305.766 305.112c8.466 7.558 18.11 11.444 28.204 11.444 10.726 0 19.914-3.884 27.308-11.444l305.934-304.226c14.78-14.772 29.382-31.368 43.166-49.378 14.058-18.212 26.314-37.222 37.042-57.23 10.9-19.924 19.192-40.638 25.406-62 6.218-21.188 9.198-42.61 9.198-64.618 0-37.312-5.592-71.268-16.582-101.812-11.264-30.366-27.22-56.236-48.398-77.33z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M716.876 208c27.708 0 52.092 4.020 72.47 11.948l0.132 0.052 0.13 0.050c19.866 7.644 35.774 17.664 48.632 30.624l0.166 0.168 0.17 0.168c12.586 12.536 22.304 28.27 29.706 48.094 7.782 21.786 11.726 46.798 11.726 74.364 0 14.658-1.95 28.426-5.958 42.086l-0.028 0.092-0.026 0.092c-4.866 16.72-11.006 31.752-18.776 45.952l-0.162 0.298-0.16 0.296c-8.81 16.434-18.58 31.532-29.864 46.148l-0.204 0.264c-11.316 14.786-23.48 28.708-36.154 41.378l-277.122 275.574-276.94-276.35c-13.32-13.43-25.248-27.074-36.488-41.75-11.386-14.848-21.284-30.136-29.444-45.49-7.206-13.54-13.494-29.17-18.7-46.472-4.030-14.264-5.988-28.044-5.988-42.116 0-27.36 4.042-52.314 12.016-74.176 7.214-19.378 17.344-35.708 30.066-48.492 12.998-13.042 28.958-23.148 48.826-30.914 20.436-8 43.764-11.886 71.32-11.886 11.536 0 22.738 1.742 33.298 5.174l0.374 0.122 0.376 0.12c13.116 4.122 26.066 9.874 38.494 17.094l0.34 0.2 0.344 0.196c12.736 7.234 25.308 15.876 38.43 26.412 14.486 11.906 27.060 23.048 38.428 34.056l56.994 55.192 55.662-56.532c10.324-10.484 22.18-21.040 36.242-32.264 13.382-10.646 26.216-19.38 39.228-26.698l0.256-0.144 0.254-0.144c13.008-7.442 26.228-13.386 39.294-17.676l0.050-0.016 0.050-0.018c10.354-3.414 20.998-5.076 32.54-5.076zM716.876 128c-19.55 0-38.744 2.882-57.584 9.094-18.472 6.062-36.584 14.242-54.072 24.246-17.476 9.828-34.056 21.276-49.916 33.898-16.038 12.8-30.456 25.572-43.346 38.664-13.52-13.092-28.026-25.864-43.616-38.664-15.684-12.624-32.080-24.070-49.382-33.898-17.214-10.004-35.414-18.184-54.704-24.246-19.104-6.21-38.568-9.094-58.034-9.094-37.126 0-70.56 5.68-100.48 17.39-29.732 11.622-55.328 27.868-76.328 48.938-20.994 21.094-37.214 46.962-48.478 77.328-11.174 30.544-16.942 64.5-16.942 101.812 0 21.628 3.068 43.078 9.19 64.53 6.308 21.096 14.416 41.986 24.876 61.642 10.446 19.656 22.702 38.488 36.584 56.59 13.88 18.124 28.388 34.516 43.344 49.58l305.766 305.112c8.466 7.558 18.11 11.444 28.204 11.444 10.726 0 19.914-3.884 27.308-11.444l305.934-304.226c14.78-14.772 29.382-31.368 43.166-49.378 14.058-18.212 26.314-37.222 37.042-57.23 10.9-19.924 19.192-40.638 25.406-62 6.218-21.188 9.198-42.61 9.198-64.618 0-37.312-5.592-71.268-16.582-101.812-11.262-30.366-27.216-56.234-48.396-77.328-20.906-21.070-46.492-37.316-76.682-48.938-30.106-11.712-63.988-17.392-101.476-17.392v0z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M948.12 483.624l-407.814-407.754c-7.812-7.808-18.046-11.712-28.282-11.712-10.238 0-20.472 3.904-28.282 11.712l-407.92 407.86c-15.624 15.622-15.624 40.948-0.006 56.57s40.944 15.622 56.568 0.004l19.616-19.612v366.708c0 22.090 17.91 40 40 40h190.696c0.416 0.014 0.82 0.062 1.238 0.062 11.054 0 21.060-4.484 28.3-11.734 7.266-7.244 11.766-17.262 11.766-28.332 0-0.418-0.050-0.822-0.062-1.238v-263.204h176.060v263.934c0 22.090 17.91 40 40 40l191.876 0.124c2.292 0 4.524-0.236 6.708-0.608 0.45-0.074 0.91-0.116 1.356-0.206 0.21-0.044 0.414-0.116 0.628-0.162 17.906-3.972 31.308-19.924 31.308-39.026v-366.492l19.682 19.68c15.622 15.62 40.948 15.616 56.568-0.006s15.618-40.948-0.004-56.568zM791.876 448.272v398.71l-111.874-0.074v-263.876c0-0.020-0.002-0.042-0.002-0.062 0-0.006 0-0.014 0-0.022 0-22.090-17.91-40-40-40h-254.002c-0.556 0-1.1 0.060-1.65 0.084-0.14-0.002-0.274-0.022-0.414-0.022-22.090 0-40 17.91-40 40v264.382h-111.934v-399.392c0-2.286-0.234-4.512-0.604-6.694l280.626-280.584 280.514 280.472c-0.412 2.302-0.66 4.658-0.66 7.078z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M511.926 801.946c-22.090 0-40-17.906-40-40v0c0-22.090 17.91-40 40-40v0c22.090 0 40.004 17.91 40.004 40v0c0 22.094-17.914 40-40.004 40v0zM831.682 915.242c0.192 1.582 0.318 3.186 0.318 4.82 0 22.090-17.908 40-40 40h-560c-22.092 0-40-17.914-40-40 0-2.438 0.252-4.812 0.67-7.128 2.36-53.636 18.034-105.7 45.852-151.554 0.734-1.476 1.562-2.912 2.492-4.296l5.582-8.364c0.054-0.080 0.11-0.158 0.164-0.238 0.042-0.068 0.098-0.156 0.144-0.222l157.704-236.036-158.5-237.228c-0.116-0.17-0.23-0.342-0.34-0.516-32.842-49.178-51.11-105.994-53.368-165.044-0.238-1.762-0.402-3.546-0.402-5.374 0-22.090 17.908-40 40-40h560c22.092 0 40 17.914 40 40 0 2.056-0.204 4.064-0.504 6.038-2.194 54.020-17.886 106.48-45.894 152.648-0.734 1.472-1.562 2.91-2.492 4.294l-5.582 8.366c-0.054 0.078-0.11 0.156-0.164 0.236-0.042 0.068-0.098 0.154-0.144 0.222l-157.734 236.082 158.468 237.182c0.116 0.168 0.23 0.344 0.34 0.516 32.946 49.33 51.226 106.346 53.39 165.596zM749.958 144.060h-475.99c6.138 31.304 18.384 61.124 36.354 87.916 0.118 0.17 0.23 0.344 0.342 0.514l0.024 0.038c0.036 0.054 0.15 0.23 0.186 0.284l54.286 81.25h293.596l58.196-87.1c0.366-0.67 0.75-1.334 1.154-1.99 15.492-24.916 26.228-52.324 31.852-80.912zM497.528 512.178l-0.032 0.046 14.426 21.592 93.378-139.756h-186.692l78.92 118.118zM305.96 799.156c-15.498 24.91-26.234 52.318-31.856 80.906h476.052c-6.138-31.304-18.384-61.122-36.354-87.918-0.118-0.168-0.23-0.344-0.342-0.512l-0.024-0.040c-0.036-0.050-0.15-0.23-0.186-0.282l-140.242-209.902-28.98 43.374c-7.166 10.72-19.21 17.162-32.11 17.162-12.896 0-24.942-6.442-32.11-17.166l-28.76-43.044-143.938 215.428c-0.36 0.674-0.744 1.338-1.15 1.994z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M828.782 195.216c-174.954-174.958-458.614-174.958-633.566 0-174.958 174.954-174.958 458.612 0 633.568 174.954 174.954 458.614 174.954 633.566 0 174.956-174.952 174.956-458.614 0-633.568zM772.214 772.214c-69.508 69.506-161.918 107.784-260.214 107.784-98.3 0-190.71-38.278-260.218-107.784-69.504-69.506-107.782-161.92-107.786-260.214 0.004-98.296 38.282-190.708 107.786-260.214 69.508-69.506 161.922-107.786 260.218-107.788 98.292 0.002 190.708 38.282 260.214 107.79 69.504 69.504 107.782 161.916 107.786 260.212-0.004 98.294-38.282 190.708-107.786 260.214zM512.996 361.124c-22.090 0-40-17.906-40-40v0c0-22.088 17.91-40 40-40v0c22.090 0 40.004 17.912 40.004 40v0c0 22.092-17.914 40-40.004 40v0zM512.998 743.094c-22.090 0-40-17.906-40-40v-240.002c0-22.090 17.91-40 40-40v0c22.090 0 40.004 17.91 40.004 40v240.002c0 22.094-17.914 40-40.004 40v0z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M768.032 320.032c0 35.346-28.654 64-64 64s-64-28.654-64-64 28.654-64 64-64 64 28.654 64 64zM960.032 353.092c0 159.062-128.946 288.010-288.008 288.010-35.306 0-69.124-6.368-100.38-17.996l-27.736 27.738-0.002 54.464c0 0.016 0.002 0.028 0.002 0.040 0 11.046-4.478 21.046-11.716 28.29-6.334 6.332-14.784 10.55-24.196 11.508-1.346 0.136-2.708 0.208-4.090 0.208h-71.748l-0.002 71.96c0 0.012 0.002 0.040 0.002 0.040 0 11.046-4.478 21.046-11.716 28.286-6.334 6.336-14.784 10.554-24.196 11.508-1.346 0.136-2.708 0.208-4.090 0.208h-71.996l-0.002 62.684c0 22.094-17.908 40-40 40-0.022 0-0.042 0-0.062 0-0.022 0-0.042 0-0.064 0h-175.996c-13.76 0-25.888-6.95-33.086-17.524-4.362-6.406-6.916-14.14-6.916-22.476v-112c0-0.664 0.066-1.308 0.1-1.964 0.032-0.618 0.034-1.234 0.092-1.852 0.11-1.148 0.288-2.278 0.492-3.398 0.024-0.128 0.034-0.258 0.058-0.386 1.614-8.378 5.848-15.808 11.808-21.446l325.456-325.458c-11.642-31.274-18.020-65.11-18.020-100.44 0-159.060 128.946-288.006 288.006-288.006 159.060-0.004 288.006 128.942 288.006 288.002zM880.032 353.092c0-114.696-93.312-208.006-208.008-208.006s-208.006 93.31-208.006 208.006c0 43.208 13.246 83.376 35.884 116.668l-57.36 57.362c-0.136-0.184-0.27-0.368-0.408-0.546l-298.102 298.106-0.002 55.356h96.124v-62.684c0-0.708 0.070-1.394 0.106-2.094 0.036-0.664 0.036-1.336 0.102-1.992 0.132-1.316 0.334-2.61 0.592-3.882 0.006-0.028 0.008-0.058 0.014-0.090 0.258-1.262 0.58-2.5 0.956-3.714 0.012-0.040 0.018-0.078 0.030-0.118 4.676-15.032 17.976-26.262 34.114-27.902 1.344-0.136 2.708-0.208 4.090-0.208h71.998v-67.64c-0.156-1.434-0.248-2.882-0.248-4.36 0-22.094 17.908-40 40-40h71.998v-30.692c0-0.148 0.020-0.29 0.022-0.438 0.008-10.226 3.912-20.45 11.714-28.254l55.99-55.988c1.982-1.984 4.124-3.71 6.38-5.188l18.68-18.684c33.030 22.090 72.702 34.992 115.332 34.992 114.694-0 208.008-93.314 208.008-208.010z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M320.022 1022.644c-7.408 0-14.852-2.052-21.44-6.238-15.292-9.714-22.144-28.494-16.706-45.774l115.186-365.908-214.552-52.57c-14.714-3.606-26.128-15.214-29.486-29.988-3.356-14.772 1.92-30.174 13.632-39.786l576-472.662c14.458-11.864 35.208-12.126 49.962-0.626 14.752 11.496 19.568 31.682 11.594 48.602l-171.202 363.256 208.648 51.756c14.29 3.544 25.476 14.652 29.124 28.914s-0.834 29.376-11.668 39.344l-512 471.112c-7.586 6.984-17.308 10.568-27.092 10.568zM279.236 493.49l178.314 43.69c10.74 2.632 19.912 9.59 25.336 19.226s6.62 21.086 3.298 31.636l-83.030 263.76 347.066-319.352-183.82-45.596c-11.63-2.884-21.356-10.832-26.498-21.656-5.144-10.822-5.164-23.382-0.054-34.22l116.31-246.788-376.922 309.3z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M743.52 529.234c5.616-5.616 83.048-83.046 88.462-88.46 30.944-32.778 47.97-75.636 47.97-120.792 0-47.048-18.304-91.26-51.542-124.484-33.228-33.22-77.43-51.516-124.458-51.516-45.024 0-87.792 16.94-120.536 47.72l-104.458 104.456c-30.792 32.738-47.734 75.512-47.734 120.548 0 41.916 14.576 81.544 41.248 113.196 3.264 3.876 6.666 7.664 10.292 11.29 4.258 4.258 8.704 8.262 13.304 12.022 0.054 0.080 0.096 0.152 0.148 0.232 9.572 7.308 15.778 18.804 15.778 31.776 0 22.094-17.914 40-40.004 40-8.542 0-16.442-2.696-22.938-7.26-2.746-1.93-20.622-17.43-30.35-28.050-0.008-0.010-0.018-0.018-0.026-0.028-4.992-5.432-13.234-15.23-18.552-22.65s-16.556-25.872-17.036-26.736c-0.7-1.262-2.974-5.526-3.422-6.39-0.69-1.334-6.118-12.67-6.114-12.67-14.342-31.96-22.332-67.4-22.332-104.728 0-60.826 21.198-116.648 56.58-160.544 0.252-0.314 4.61-5.594 6.594-7.866 0.304-0.35 5.038-5.636 7.16-7.874 0.252-0.268 105.86-105.874 106.128-106.126 45.902-43.584 107.958-70.314 176.264-70.314 141.382 0 255.998 114.5 255.998 256 0 68.516-26.882 130.688-70.652 176.61-0.144 0.148-109.854 109.546-112.090 111.528-0.958 0.848-5.072 4.352-5.072 4.352-6.448 5.434-13.132 10.592-20.1 15.378 0.412-6.836 0.644-13.702 0.644-20.6 0-26.46-3.108-52.206-8.918-76.918l-0.236-1.102zM616.144 767.82c35.382-43.896 56.58-99.718 56.58-160.544 0-37.328-7.99-72.768-22.332-104.728 0.004 0 0.006-0.002 0.010-0.004-0.258-0.576-0.538-1.14-0.8-1.714-0.686-1.498-2.894-6.112-3.296-6.93-0.668-1.344-2.952-5.732-3.386-6.604-3.48-6.982-8.708-15.126-9.49-16.366-0.498-0.792-0.996-1.58-1.502-2.364-0.834-1.29-15.364-22.066-26.656-34.466-0.008-0.010-0.018-0.018-0.026-0.028-7.056-8.448-24.932-24.198-30.35-28.050-6.47-4.602-14.396-7.26-22.938-7.26-22.090 0-40.004 17.906-40.004 40 0 12.97 6.206 24.466 15.778 31.776 0.052 0.080 0.094 0.152 0.148 0.232 4.602 3.76 20.334 19.434 23.598 23.31 26.672 31.65 41.248 71.28 41.248 113.196 0 45.038-16.944 87.81-47.734 120.548l-104.458 104.456c-32.742 30.782-75.512 47.72-120.536 47.72-47.028 0-91.228-18.294-124.458-51.516-33.236-33.224-51.542-77.436-51.542-124.484 0-45.154 17.028-88.014 47.97-120.792 5.414-5.414 40.812-40.812 68.958-68.958 7.176-7.176 13.888-13.886 19.504-19.502v-0.002c-0.356-1.562-0.246-1.096-0.246-1.096-5.81-24.712-8.918-50.458-8.918-76.918 0-6.898 0.232-13.764 0.644-20.6-6.966 4.788-20.1 15.33-20.1 15.33-0.734 0.62-9.518 8.388-11.68 10.45-0.16 0.154-105.338 105.33-105.482 105.478-43.77 45.922-70.652 108.094-70.652 176.61 0 141.5 114.616 256 255.998 256 68.306 0 130.362-26.73 176.264-70.314 0.27-0.254 105.876-105.86 106.128-106.126 0.004-0.002 13.506-15.426 13.758-15.74z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M961 233c0 22.090-17.908 40-40 40h-607.996c-22.090 0-40-17.908-40-40v0c0-22.090 17.908-40.002 40-40.002h607.996c22.092 0 40 17.912 40 40.002v0zM961 793c0-22.090-17.908-40.002-40-40.002h-607.996c-22.092 0-40 17.912-40 40.002v0c0 22.092 17.91 40 40 40h607.996c22.092 0 40-17.91 40-40v0zM961 606.332c0-22.090-17.908-40-40-40h-607.996c-22.092 0-40 17.91-40 40v0c0 22.094 17.91 40 40 40h607.996c22.092 0 40-17.91 40-40v0zM961 419.668c0-22.090-17.908-40.004-40-40.004h-607.996c-22.092 0-40 17.914-40 40.004v0c0 22.090 17.91 40 40 40h607.996c22.092-0 40-17.91 40-40v0zM129 168.998c-35.346 0-64 28.654-64 64s28.654 64 64 64 64-28.654 64-64-28.654-64-64-64zM129 728.998c-35.346 0-64 28.654-64 64s28.654 64 64 64 64-28.654 64-64-28.654-64-64-64zM129 542.332c-35.346 0-64 28.652-64 64 0 35.344 28.654 64 64 64s64-28.656 64-64c0-35.348-28.654-64-64-64zM129 355.664c-35.346 0-64 28.656-64 64 0 35.348 28.654 64 64 64s64-28.652 64-64c0-35.344-28.654-64-64-64z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M960.002 512l-0.002-0.026c-0.006-114.646-43.746-229.288-131.216-316.758-174.954-174.958-458.614-174.958-633.566 0-174.958 174.954-174.958 458.612 0 633.568 87.45 87.45 202.056 131.186 316.674 131.214 0.022 0 0.042 0.002 0.064 0.002 0.014 0 0.026-0.002 0.042-0.002 114.654 0 229.308-43.738 316.788-131.214 87.472-87.47 131.21-202.114 131.216-316.76l0-0.024zM772.216 772.214c-60 59.998-137.072 96.702-220.258 105.626v-133.84c0-22.090-17.914-40-40.004-40s-40 17.91-40 40v133.83c-83.154-8.942-160.194-45.64-220.172-105.618-59.986-59.988-96.686-137.042-105.624-220.21h133.84c22.090 0 40-17.914 40-40.004s-17.91-40-40-40h-133.84c8.936-83.17 45.636-160.226 105.624-220.214 59.978-59.976 137.020-96.676 220.172-105.622v133.836c0 22.094 17.91 40 40 40s40.004-17.906 40.004-40v-133.844c83.184 8.926 160.258 45.63 220.258 105.63 59.986 59.986 96.688 137.042 105.624 220.212h-133.838c-22.094 0-40 17.91-40 40s17.906 40.004 40 40.004h133.838c-8.938 83.172-45.636 160.226-105.624 220.214z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M896.032 915.53v-467.498c0-19.102-13.402-35.052-31.31-39.026-0.21-0.046-0.414-0.12-0.628-0.162-0.444-0.090-0.904-0.13-1.354-0.208-2.186-0.37-4.416-0.606-6.708-0.606h-55.902l0.002-55.85h0.020c0-159.14-129.010-288.15-288.15-288.15-159.128 0-288.13 128.992-288.15 288.118v55.884h-54.852c-20.71 0-37.746 15.742-39.792 35.91-0.136 1.344-0.208 2.708-0.208 4.090v463.332c-0.618 2.792-0.968 5.688-0.968 8.668 0 22.094 17.91 40 40 40h688.27c22.092 0 40-17.91 40-40-0.002-1.524-0.104-3.024-0.27-4.502zM209 488.032h607.032v392h-607.032v-392zM303.85 352.182c0-114.776 93.376-208.15 208.15-208.15 114.59 0 207.842 93.074 208.142 207.596 0 0.084-0.012 0.164-0.012 0.248v56.156h-416.284l0.004-55.85zM552.164 691.858l-0.002 58.188c0.004 22.088-17.906 39.996-39.996 39.998-22.094 0.002-40.004-17.906-40-40v-57.974c-14.704-11.726-24.134-29.782-24.134-50.048 0-35.346 28.654-64 64-64s64 28.654 64 64c0 20.142-9.318 38.104-23.868 49.836z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M0 0v1024h1024v-1024h-1024zM850.708 242.614l-54.918 52.655c-3.858 2.965-6.321 7.581-6.321 12.772 0 0.933 0.080 1.847 0.232 2.736l-0.014-0.095v386.883c-0.139 0.794-0.219 1.708-0.219 2.641 0 5.191 2.462 9.807 6.283 12.744l0.038 0.028 53.637 52.655v11.558h-269.774v-11.558l55.559-53.936c5.461-5.456 5.461-7.068 5.461-15.413v-312.719l-154.477 392.344h-20.874l-179.851-392.344v262.947c-0.209 1.465-0.329 3.156-0.329 4.875 0 9.848 3.924 18.78 10.293 25.317l-0.008-0.008 72.258 87.649v11.558h-204.895v-11.558l72.263-87.649c6.070-6.284 9.81-14.852 9.81-24.293 0-2.081-0.182-4.12-0.53-6.101l0.031 0.21v-304.044c0.086-0.804 0.135-1.737 0.135-2.682 0-7.844-3.389-14.896-8.782-19.773l-0.023-0.021-64.234-77.378v-11.558h199.438l154.157 338.083 135.53-338.083h190.123v11.558z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M320.032 416.032v-152.968c0-22.094 17.91-40 40-40 22.094 0 40 17.91 40 40.004v152.964c0 22.090-17.906 40-40 40s-40-17.908-40-40zM512 456.032c22.094 0 40-17.91 40-40v-152.964c0-22.094-17.906-40.004-40-40.004-22.090 0-40 17.906-40 40v152.968c0 22.092 17.908 40 40 40zM664.032 456.032c22.094 0 40-17.91 40-40v-82.996c0-22.094-17.906-40.004-40-40.004-22.090 0-40 17.906-40 40v83c0 22.092 17.906 40 40 40zM864.018 316.616v603.418c0 0.004 0 0.004 0 0.004 0 6.798-1.71 13.198-4.704 18.808-0.044 0.084-0.078 0.172-0.124 0.254-0.524 0.976-1.112 1.914-1.722 2.836-0.098 0.15-0.18 0.312-0.282 0.46-7.188 10.638-19.36 17.634-33.168 17.634h-623.99c-22.090 0-40-17.908-40-40v-343.574c-0.002-0.142-0.022-0.282-0.022-0.426 0-0.142 0.020-0.282 0.022-0.426v-471.574c0-20.34 15.192-37.092 34.838-39.63 1.694-0.216 3.408-0.37 5.162-0.37l411.254 0.052c10.594-0.286 21.282 3.58 29.368 11.668l211.672 212.206c7.906 7.908 11.792 18.298 11.696 28.66zM240.026 144.034v391.998h543.99v-203.27l-188.252-188.728h-355.738zM784.016 880.032v-264h-543.99v264h543.99z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M960 232c0 22.092-17.908 40-40.002 40h-815.996c-22.092 0-40-17.908-40-40v0c0-22.090 17.908-40 40-40h815.998c22.092 0 40 17.91 40 40v0zM768 416c0 22.090-17.908 40-40 40h-624c-22.090 0-40-17.908-40-40v0c0-22.090 17.908-40.002 40-40.002h624c22.092 0.002 40 17.914 40 40.002v0zM832 608c0 22.092-17.906 40.002-40 40.002h-688c-22.090 0-40-17.91-40-40.002v0c0-22.090 17.908-40 40-40h688c22.094 0 40 17.912 40 40v0zM576 792c0 22.094-17.91 40-40.002 40h-431.998c-22.090 0-40-17.906-40-40v0c0-22.094 17.908-40.002 40-40.002h432c22.094 0.002 40 17.912 40 40.002v0z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M776.306 456.032c-51.602 0-95.696 32.744-112.612 78.542-69.674-6.072-141.482-31.012-197.386-69.306-46.266-31.69-100.392-85.728-111.792-168.92 45.4-17.12 77.79-60.998 77.79-112.314 0-66.168-53.832-120-120-120s-120 53.832-120 120c0 52.146 33.444 96.608 80 113.12v429.762c-46.556 16.512-80 60.974-80 113.12 0 66.168 53.832 120 120 120s120-53.832 120-120c0-52.146-33.444-96.608-80-113.12V471.444c19.622 21.888 42.618 41.898 68.792 59.828 68.422 46.868 156.64 77.042 241.646 83.462 16.14 47.23 60.932 81.3 113.56 81.3 66.168 0 120-53.832 120-120s-53.83-120.002-119.998-120.002zm-464-312c22.056 0 40 17.944 40 40s-17.944 40-40 40-40-17.944-40-40 17.942-40 40-40zm0 736c-22.056 0-40-17.944-40-40s17.944-40 40-40 40 17.944 40 40-17.944 40-40 40zm464-264c-22.056 0-40-17.944-40-40s17.944-40 40-40 40 17.944 40 40-17.944 40-40 40z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M857 127.778h-688c-22.092 0-40 17.91-40 40v688c0 22.090 17.908 40 40 40h688c22.094 0 40-17.91 40-40v-688c0-22.092-17.906-40-40-40zM817 815.778h-608v-1.086l606.914-606.914h1.086v608z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M648 64h-272c-66.274 0-120 53.726-120 120v656c0 66.274 53.726 120 120 120h272c66.274 0 120-53.726 120-120v-656c0-66.274-53.726-120-120-120zM376 144h272c22.056 0 40 17.944 40 40v495.968h-352v-495.968c0-22.056 17.946-40 40-40zM648 880h-272c-22.054 0-40-17.944-40-40v-80.032h352v80.032c0 22.056-17.944 40-40 40zM544.034 819.962c0 17.676-14.33 32.002-32.004 32.002-17.67 0-32-14.326-32-32.002 0-17.672 14.33-31.998 32-31.998 17.674-0 32.004 14.326 32.004 31.998z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M512.034 144.030l318.696 184v368l-318.696 184-318.702-184v-368l318.702-184zM512.034 64.030c-13.812 0-27.624 3.574-40 10.718l-318.702 184c-24.752 14.29-40 40.7-40 69.282v368c0 28.582 15.248 54.994 40 69.28l318.702 184c12.376 7.146 26.19 10.72 40 10.72 13.814 0 27.624-3.572 40-10.72l318.696-184c24.752-14.288 40-40.698 40-69.28v-368c0-28.582-15.248-54.992-40-69.282l-318.696-184c-12.376-7.144-26.188-10.718-40-10.718v0zM511.63 314.25c-109.014 0-197.386 88.372-197.386 197.384 0 109.010 88.374 197.382 197.386 197.382v0.134c0.746 0 1.492 0.012 2.24 0.004 14.806-0.162 29.214-1.942 43.056-5.182 1.022-0.24 1.932-0.496 2.794-0.762 17.328-4.988 29.94-21.012 29.738-39.916-0.242-22.71-18.846-40.926-41.556-40.684-2.996 0.032-5.902 0.402-8.708 1.040-0.090 0.016-0.178 0-0.266 0.022-8.18 1.99-16.708 3.094-25.474 3.222-0.584-0.072-1.188-0.124-1.826-0.124-63.486 0-115.142-51.65-115.142-115.138 0-63.49 51.656-115.142 115.142-115.142 63.488 0 115.14 51.652 115.14 115.142 0 8.924-1.028 17.616-2.964 25.96-0.020 0.088-0.008 0.178-0.020 0.266-0.61 2.814-0.948 5.724-0.948 8.72 0 22.712 18.408 41.122 41.122 41.122 18.906 0 34.792-12.776 39.596-30.158 0.262-0.866 0.508-1.78 0.736-2.804 3.092-13.876 4.724-28.3 4.724-43.106 0-109.010-88.372-197.382-197.384-197.382z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M960.062 616v304c0 1.382-0.070 2.746-0.208 4.090-2.046 20.172-19.080 35.91-39.792 35.91h-816c-22.090 0-40-17.906-40-40v-304c0-22.090 17.91-40 40-40s40 17.91 40 40v264h736v-264c0-22.090 17.91-40 40-40s40 17.912 40 40zM664.732 200.168l-124.41-124.41c-0.014-0.014-0.024-0.028-0.038-0.042-3.57-3.57-7.664-6.284-12.018-8.222-5.316-2.368-11.028-3.54-16.742-3.47-0.14-0.002-0.276-0.020-0.414-0.020-13.552 0-25.512 6.756-32.748 17.072l-119.1 119.092c-15.622 15.62-15.618 40.948 0.002 56.57 15.622 15.62 40.95 15.62 56.568 0l55.276-55.276v462.54c0 22.094 17.912 40 40.002 40 22.092 0 40-17.91 40-40v-464.314l57.052 57.052c15.622 15.624 40.948 15.62 56.568 0 15.628-15.624 15.628-40.952 0.002-56.572z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M946.58 293.66c12.704-12.708 15.072-31.836 7.108-46.938-1.838-3.524-4.23-6.83-7.19-9.79-0.282-0.282-0.588-0.52-0.876-0.792l-129.338-128.654c-0.046-0.046-0.084-0.098-0.13-0.144-7.814-7.812-18.056-11.718-28.296-11.714-10.24 0-20.48 3.906-28.292 11.714-0.064 0.066-0.12 0.138-0.184 0.206l-557.048 557.048c-2.194 2.192-4.042 4.59-5.622 7.11-70.624 87.486-17.922 195.43-174.738 239.554 0 0 64.758 18.11 144.33 18.11 74.374 0 161.678-15.824 221.23-77.020 0.394-0.364 0.808-0.696 1.192-1.078l1.734-1.734c0.852-0.798 1.678-1.578 2.504-2.426 0.348-0.356 0.668-0.728 1.010-1.086l168.756-168.756c1.126-0.906 2.224-1.872 3.272-2.918 1.044-1.044 2.008-2.14 2.914-3.266l375.212-375.212c0.834-0.706 1.664-1.424 2.452-2.214zM537.462 589.402l-73.594-73.206 324.068-324.064 73.594 73.2-324.068 324.070zM388.178 667.684c-13.288-13.632-28.584-23.974-44.78-31.016l63.902-63.902 73.596 73.204-64.246 64.248c-6.498-15.23-15.964-29.698-28.472-42.534zM229.848 791.928c8.294-30.346 14.852-54.332 32.416-73.862 0.83-0.864 2.664-2.702 4.26-4.286 8.030-6.792 17.534-8.246 24.198-8.246 14.386 0 29.026 6.554 40.162 17.98 19.592 20.106 21.934 49.238 5.596 66.874l-1.712 1.712c-0.798 0.752-1.612 1.524-2.462 2.354l-0.86 0.84-0.834 0.864c-30.666 31.79-75.914 45.424-118.104 50.542 7.53-18.888 12.598-37.426 17.34-54.772z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M824.25 369.354c68.146-70.452 67.478-182.784-2.094-252.354-70.296-70.296-184.266-70.296-254.558 0-0.014 0.012-0.028 0.026-0.042 0.042-0.004 0.002-0.006 0.004-0.010 0.008l-433.144 433.142c-0.036 0.036-0.074 0.068-0.11 0.106-0.054 0.052-0.106 0.11-0.16 0.162l-2.668 2.67c-0.286 0.286-0.528 0.596-0.8 0.888-43.028 44.88-66.664 103.616-66.664 165.986 0 64.106 24.962 124.376 70.292 169.704 45.328 45.33 105.598 70.292 169.706 70.292 50.612 0 98.822-15.57 139.186-44.428 4.932-1.952 9.556-4.906 13.544-8.894l16.802-16.802c0.056-0.056 0.116-0.112 0.172-0.168 0.038-0.038 0.074-0.076 0.112-0.116l289.010-289.014c15.622-15.618 15.62-40.942 0-56.56s-40.948-15.62-56.566 0l-289.124 289.122c-62.482 62.484-163.792 62.484-226.274 0-62.484-62.482-62.484-163.79 0-226.272h-0.002l433.134-433.12c0.058-0.060 0.112-0.122 0.172-0.18 38.99-38.99 102.43-38.99 141.42 0 38.992 38.99 38.99 102.432 0 141.422-0.058 0.060-0.122 0.114-0.18 0.17l0.006 0.006-280.536 280.534c-0.002-0.002-0.002-0.004-0.004-0.006l-79.978 79.98c-0.010 0.010-0.016 0.020-0.028 0.028-0.008 0.012-0.018 0.018-0.028 0.028l-0.064 0.062c-15.622 15.624-40.944 15.624-56.562 0-15.624-15.62-15.624-40.944-0.002-56.566l0.062-0.062c0.010-0.010 0.018-0.020 0.028-0.028 0.008-0.012 0.020-0.018 0.028-0.028l79.98-79.978c-0.002-0.002-0.004-0.002-0.006-0.004l136.508-136.512c15.622-15.62 15.62-40.944-0.002-56.562-15.618-15.62-40.946-15.62-56.564 0l-219.342 219.344c-1.284 1.284-2.42 2.652-3.494 4.052-40.4 47.148-38.316 118.184 6.322 162.824 44.64 44.638 115.674 46.722 162.82 6.324 1.402-1.072 2.772-2.21 4.054-3.494l2.83-2.832c0.002 0 0.002 0 0.002 0s0 0 0 0l360.54-360.54c0.058-0.056 0.12-0.114 0.18-0.172 0.050-0.050 0.098-0.106 0.15-0.158l0.994-0.994c0.34-0.338 0.63-0.702 0.952-1.052z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M728.032 96.032h-116.98c-0.026 0-0.050-0.004-0.076-0.004s-0.050 0.004-0.076 0.004h-199.848c-0.026 0-0.050-0.004-0.076-0.004s-0.050 0.004-0.076 0.004h-31.924c-123.712 0-224 100.292-224 224 0 121.032 95.994 219.628 216 223.842v344.158c0 22.092 17.91 40 40 40 22.086 0 40-17.908 40-40v-712h120v712c0 22.092 17.91 40 40 40 22.086 0 40-17.908 40-40v-712h77.056c22.094 0 40-17.91 40-40 0-22.092-17.91-40-40-40z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M742.52 960c-76.266 0-163.184-32.364-258.338-96.194-73.798-49.504-136.41-106.904-175.938-146.34-43.282-43.222-105.612-111.376-156.842-190.682-66.576-103.062-95.348-196.038-85.518-276.344 8.952-73.326 50.674-134.292 120.664-176.304 10.95-6.63 23.76-10.134 37.054-10.134 32.752 0 71.124 23.354 120.764 73.494 36.434 36.802 70.108 79.22 89.472 106.644 46.698 66.176 60.686 107.352 48.286 142.136-12.638 35.538-35.534 55.704-52.25 70.428-5.662 5.006-9.95 8.854-13.070 12.262 4.040 7.542 11.744 19.868 26.054 37.476 42.388 52.076 90.548 89.024 111.972 100.874 3.308-2.96 7.11-7.168 12.352-13.152 14.87-16.81 35.062-39.636 70.482-52.28 7.978-2.842 16.498-4.276 25.35-4.276 44.172 0 108.804 44.078 155.246 81.056 45.834 36.494 103.292 90.498 127.104 132.612 22.602 39.596 14.982 68.64 4.596 86.006-48.138 80.296-119.862 122.718-207.44 122.718zM224.758 144.53c-47.558 29.426-73.566 67.28-79.468 115.618-7.494 61.224 17.17 136.326 73.308 223.226 49.902 77.252 112.994 144.35 146.16 177.472 30.296 30.222 91.906 88.17 163.988 136.524 81.738 54.83 153.662 82.63 213.772 82.63 58.618 0 103.506-26.526 137.138-81.076-0.47-1.536-1.532-4.062-3.854-8.132-14.584-25.794-57.006-69.202-105.642-108.156-58.776-47.074-96.708-63.894-106.756-64.982-15.348 5.826-25.020 16.758-36.178 29.372-12.542 14.318-28.31 32.316-55.476 41.528l-6.25 2.12h-6.598c-8.704 0-31.826 0-86.73-43.378-32.196-25.438-64.65-57.534-91.38-90.374-35.712-43.942-51.41-77.764-46.674-100.548l0.55-2.642 0.9-2.546c9.19-26 26.284-41.118 41.364-54.458 12.726-11.208 23.698-20.874 29.494-36.378-0.606-4.398-5.076-23.488-37.948-70.072-15.882-22.494-45.746-60.376-77.614-93.084-39.93-40.986-60.106-50.546-66.106-52.664z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M920 64h-816c-22.092 0-40 17.91-40 40v816c0 22.094 17.908 40 40 40h816c22.092 0 40-17.906 40-40v-816c0-22.090-17.908-40-40-40zM880 144v449.782l-235.39-235.392c-7.502-7.5-17.676-11.714-28.286-11.714s-20.784 4.214-28.286 11.716l-169.804 169.804-40.958-40.958c-15.622-15.622-40.95-15.622-56.57 0l-176.708 176.708v-519.946h736.002zM144 880v-102.914l204.992-204.994 215.972 215.974c7.81 7.81 18.048 11.714 28.286 11.714s20.474-3.904 28.286-11.714c15.62-15.622 15.62-40.95 0-56.57l-146.732-146.73 141.522-141.524 263.676 263.68v173.078h-736.002zM356.174 400.542c52.466 0 95-42.536 95-95s-42.534-95-95-95-95 42.536-95 95 42.534 95 95 95zM356.174 250.542c30.326 0 55 24.672 55 55s-24.674 55-55 55-55-24.672-55-55 24.674-55 55-55z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M512 959.916c-13.36 0-25.84-6.672-33.262-17.782l-242.080-362.324c-0.12-0.176-0.236-0.356-0.354-0.536-36.394-54.5-55.63-118.042-55.63-183.804 0-182.696 148.632-331.324 331.326-331.324 182.696 0 331.328 148.628 331.328 331.324 0 60.71-16.554 119.98-47.906 171.652-0.758 1.528-1.618 3.016-2.578 4.45l-5.786 8.664c-0.054 0.082-0.112 0.164-0.168 0.246-0.042 0.070-0.104 0.16-0.148 0.23l-241.484 361.426c-7.422 11.106-19.898 17.778-33.258 17.778zM303.458 535.784l0.026 0.040c0.038 0.054 0.158 0.238 0.194 0.292l208.324 311.796 212.374-317.86c0.376-0.696 0.778-1.382 1.198-2.062 24.7-39.708 37.758-85.532 37.758-132.52 0-138.582-112.746-251.324-251.328-251.324s-251.326 112.742-251.326 251.324c0 50.054 14.674 98.39 42.432 139.782 0.114 0.176 0.232 0.356 0.348 0.532zM512 304.4c49.98 0 90.64 40.66 90.64 90.64 0 49.976-40.66 90.636-90.64 90.636s-90.64-40.66-90.64-90.636c0-49.98 40.66-90.64 90.64-90.64zM512 224.4c-94.242 0-170.64 76.398-170.64 170.64s76.398 170.636 170.64 170.636 170.64-76.394 170.64-170.636-76.398-170.64-170.64-170.64v0z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M878.78 477.856l-591.884-341.722c-9.464-5.464-18.426-8.050-26.386-8.048-19.516 0.002-33.002 15.546-33.002 42.338v683.446c0 26.792 13.482 42.338 33.002 42.338 7.96 0 16.924-2.586 26.386-8.048l591.884-341.722c32.664-18.864 32.664-49.724 0-68.582z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M921.002 473h-368.008v-368.004c0.002-22.090-17.906-39.996-39.996-39.996-22.088 0-39.998 17.91-39.998 40v368h-368.002c-22.094 0-40 17.908-39.998 40-0.002 22.090 17.904 39.996 39.996 39.996l368.004-0.002v368.010c0 22.094 17.908 40 40 39.996 22.090 0.004 39.996-17.902 39.996-39.996v-368.010h368.010c22.090 0.002 39.994-17.906 39.994-39.996-0-22.088-17.908-39.998-39.998-39.998z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M472 473.188v-368c-0.004-22.092 17.906-40.002 40-40 22.090 0 40 17.906 40 40l-0.004 368.002c0.004 22.088-17.906 39.996-39.996 39.998-22.094 0.002-40.004-17.906-40-40zM746.804 201.726v0.188c-13.138-9.004-26.808-17.292-40.978-24.768-1.994-1.050-3.492-1.84-4.668-2.458-1.75-0.892-3.518-1.756-5.28-2.624-0.004-0.002-0.008-0.004-0.012-0.006-0.080-0.032-0.158-0.074-0.234-0.108-0.032-0.012-0.056-0.024-0.090-0.042l-0.006 0.008c-4.724-2.022-9.924-3.168-15.386-3.212-22.090-0.178-40.14 17.588-40.32 39.678-0.122 15.112 8.166 28.298 20.47 35.208 31.9 15.71 61.418 36.616 87.492 62.292 2.796 2.754 5.52 5.562 8.208 8.394v-0.146c59.436 62.664 92.062 144.352 92.062 231.056 0 89.748-34.95 174.124-98.412 237.588s-147.84 98.412-237.588 98.412-174.124-34.95-237.588-98.412-98.412-147.84-98.412-237.588c0-81.652 28.962-158.834 81.972-219.886 5.814-6.69 11.902-13.192 18.288-19.474 26.064-25.652 55.564-46.538 87.446-62.238 12.342-6.892 20.66-20.106 20.542-35.238-0.17-22.088-18.218-39.86-40.306-39.69-5.468 0.044-10.664 1.186-15.392 3.208l-0.004-0.008c-0.036 0.016-0.058 0.028-0.088 0.042-0.042 0.018-0.084 0.038-0.126 0.056-1.862 0.918-3.728 1.828-5.574 2.774-0.458 0.238-0.948 0.496-1.512 0.792-1.096 0.566-2.18 1.148-3.27 1.722-15.704 8.294-30.804 17.572-45.232 27.736v-0.124c-106.896 75.288-176.742 199.646-176.742 340.33 0 229.75 186.25 416 416 416s416-186.25 416-416c-0.002-142.654-71.82-268.52-181.26-343.462z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M925.922 304.496c-1.698-0.218-3.41-0.37-5.166-0.37h-88.64v-93.548c0.006-0.21-0.016-0.422-0.014-0.634 0.004-0.212 0.036-0.416 0.036-0.63 0-0.478-0.054-0.942-0.074-1.416-0.024-0.636-0.042-1.27-0.094-1.906-0.066-0.776-0.168-1.54-0.276-2.302-0.074-0.534-0.146-1.066-0.242-1.596-0.15-0.82-0.338-1.624-0.538-2.424-0.12-0.48-0.23-0.958-0.37-1.436-0.234-0.812-0.506-1.608-0.792-2.398-0.164-0.462-0.322-0.924-0.504-1.38-0.318-0.788-0.668-1.552-1.036-2.316-0.208-0.436-0.406-0.88-0.628-1.312-0.424-0.802-0.88-1.574-1.352-2.344-0.218-0.358-0.422-0.724-0.656-1.078-0.636-0.972-1.324-1.91-2.042-2.82-0.098-0.124-0.182-0.252-0.282-0.376-0.988-1.224-2.048-2.388-3.172-3.488l-104.004-104.882c-3.696-3.696-7.948-6.486-12.466-8.432-0.122-0.050-0.224-0.11-0.344-0.16-0.974-0.41-1.966-0.756-2.962-1.084-0.262-0.086-0.512-0.19-0.78-0.272-0.926-0.284-1.87-0.506-2.812-0.722-0.346-0.080-0.684-0.182-1.034-0.252-0.988-0.198-1.988-0.334-2.988-0.456-0.31-0.040-0.618-0.102-0.93-0.134-1.324-0.132-2.652-0.204-3.978-0.204h-455.67c-1.754 0-3.468 0.152-5.162 0.37-19.646 2.538-34.838 19.29-34.838 39.63v200h-87.356c-1.754 0-3.468 0.152-5.164 0.37-19.644 2.538-34.836 19.29-34.836 39.63v320c0 22.094 17.91 40 40 40h87.368v216c0 22.094 17.91 40 40 40h560.006c13.81 0 25.982-6.996 33.17-17.636 0.102-0.146 0.184-0.306 0.282-0.458 0.612-0.922 1.2-1.86 1.722-2.836 0.046-0.082 0.080-0.17 0.124-0.254 2.994-5.612 4.704-12.008 4.704-18.808 0 0 0 0 0-0.004v-216h88.624c13.808 0 25.982-6.996 33.168-17.636 0.104-0.148 0.186-0.308 0.286-0.458 0.612-0.922 1.198-1.862 1.72-2.836 0.046-0.082 0.082-0.172 0.124-0.256 2.994-5.61 4.702-12.008 4.702-18.806 0 0 0 0 0-0.004v-320c0-20.344-15.186-37.096-34.834-39.636zM272.116 144.128h375.634v65.186c0 1.38 0.070 2.746 0.208 4.090 2.048 20.168 19.080 35.91 39.792 35.91h64.366v54.812h-480v-159.998zM272.124 880.126v-327.998h480.006v327.998zM880.756 384.128v239.998h-48.624v-111.998c0-20.34-15.19-37.092-34.836-39.63-1.694-0.218-565.17-0.372-565.17-0.372-1.754 0-3.468 0.152-5.162 0.372-19.646 2.538-34.838 19.29-34.838 39.628v112h-47.368v-239.998zM664.124 608.126c22.092 0 40 17.908 40 40s-17.908 40-40 40h-304c-22.092 0-40-17.908-40-40s17.908-40 40-40h304zM704.124 784.126c0 22.092-17.908 40-40 40h-304c-22.092 0-40-17.908-40-40s17.908-40 40-40h304c22.092 0 40 17.908 40 40z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M512 144c98.296 0 190.708 38.28 260.214 107.784 69.506 69.508 107.786 161.922 107.786 260.216 0 98.296-38.28 190.708-107.786 260.214-69.506 69.508-161.918 107.786-260.214 107.786-98.294 0-190.708-38.28-260.216-107.786-69.504-69.506-107.784-161.916-107.784-260.214 0-98.294 38.28-190.708 107.784-260.216 69.508-69.504 161.922-107.784 260.216-107.784zM512 64c-247.424 0-448 200.576-448 448s200.576 448 448 448 448-200.576 448-448-200.576-448-448-448v0zM756.396 484.14l-125-125.436c-15.594-15.65-40.92-15.692-56.568-0.1-15.648 15.594-15.694 40.92-0.1 56.568l57.004 57.204h-335.67c-22.092 0-40 17.908-40 40s17.908 40 40 40h335.258l-56.508 56.368c-15.64 15.602-15.672 40.928-0.070 56.568 7.814 7.834 18.066 11.752 28.32 11.75 10.22 0 20.442-3.892 28.25-11.68l125-124.688c15.634-15.594 15.672-40.91 0.084-56.554z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M396.984 530.228c-12.040-5.090-23.676-10.896-34.898-17.38 1.846-42.512 89.218-80.984 112.798-84.736 7.402-1.178 7.568-21.526 7.568-21.526s-21.742-21.524-26.48-50.47c-12.748 0-20.622-30.77-7.874-41.596-0.532-11.398-16.384-89.468 63.878-89.468s64.408 78.070 63.876 89.468c12.75 10.826 4.876 41.596-7.872 41.596-4.738 28.948-26.482 50.47-26.482 50.47s0.168 20.348 7.568 21.526c23.836 3.792 112.846 43.050 112.846 86.102v6.894c-6.426 3.252-12.968 6.3-19.64 9.122-38.826 16.422-80.090 24.746-122.646 24.746-42.552-0.002-83.816-8.326-122.642-24.748zM800 145h-592.004v736h592.004c8.708 0 15.876-7.086 15.972-15.796v-704.246c-0.018-8.8-7.176-15.958-15.972-15.958zM800 65c52.944 0 95.872 42.858 95.992 95.772l0.012 0.014v705.334h-0.036c-0.602 52.502-43.324 94.88-95.968 94.88h-632.004c-22.090 0-40-17.906-40-40v-816c0-20.338 15.192-37.090 34.836-39.628 1.696-0.218 3.41-0.372 5.164-0.372h632.004zM736.282 792.998c0-11.044-8.956-20-20-20h-408.282c-11.044 0-20 8.956-20 20s8.956 20 20 20h408.282c11.044 0 20-8.956 20-20zM736.282 704.998c0-11.044-8.956-20-20-20h-408.282c-11.044 0-20 8.956-20 20s8.956 20 20 20h408.282c11.044 0 20-8.956 20-20zM736.282 616.998c0-11.044-8.956-20-20-20h-408.282c-11.044 0-20 8.956-20 20s8.956 20 20 20h408.282c11.044 0 20-8.956 20-20z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M631 157c104 1 171 52 171 166v397a123 123 0 1 1-82 0V323c0-63-27-83-90-84h-24l22 23a41 41 0 1 1-58 58l-93-93a41 41 0 0 1 1-58l93-93a41 41 0 1 1 58 58l-23 23h25zM222 314a123 123 0 1 1 82 0v406a123 123 0 1 1-82 0V314zm41 564a41 41 0 1 0 0-82 41 41 0 0 0 0 82zm0-639a41 41 0 1 0 0-83 41 41 0 0 0 0 83zm498 639a41 41 0 1 0 0-82 41 41 0 0 0 0 82z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M828.782 195.218c-174.954-174.958-458.614-174.958-633.566 0-174.958 174.954-174.958 458.612 0 633.566 174.954 174.956 458.614 174.956 633.566 0 174.956-174.95 174.956-458.614 0-633.566zM772.214 772.216c-69.508 69.504-161.918 107.782-260.214 107.782-98.3 0-190.71-38.278-260.218-107.782-69.504-69.506-107.782-161.92-107.786-260.216 0.004-98.298 38.282-190.708 107.786-260.216 69.508-69.504 161.922-107.784 260.218-107.784 98.292 0 190.708 38.28 260.214 107.788 69.504 69.504 107.782 161.916 107.786 260.214-0.004 98.294-38.282 190.708-107.786 260.214zM512.996 784.784c-22.090 0-40-17.906-40-40v0c0-22.090 17.91-40 40-40v0c22.090 0 40.004 17.91 40.004 40v0c0 22.094-17.914 40-40.004 40v0zM552.996 572.27v52.898c0.004 22.088-17.906 39.996-39.996 40-22.094 0-40.004-17.908-40-40v-88c-0.004-21.752 17.372-39.416 38.996-39.952v-0.146c53.118 0 96.332-43.212 96.332-96.33 0-53.116-43.214-96.328-96.332-96.328-53.098 0-96.296 43.184-96.324 96.278 0 0.014 0 0.034 0 0.050 0 22.094-17.914 40-40.004 40s-40-17.906-40-40c0-97.382 78.946-176.328 176.328-176.328 97.386 0 176.332 78.946 176.332 176.328 0 83.268-57.722 153.048-135.332 171.53z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M913.852 702.796c-15.594-15.648-40.922-15.694-56.57-0.1l-57.204 57.006v-451.424c0-0.372-0.028-0.736-0.074-1.098-0.458-99.016-80.86-179.15-179.988-179.15-99.412 0-180 80.592-180 180 0 0.084 0.004 0.166 0.004 0.248h-0.004v343.504h-0.006c0 0.082 0.006 0.164 0.006 0.248 0 55.14-44.86 100-100 100s-100-44.86-100-100c0-0.084 0.006-0.166 0.006-0.248h-0.002v-483.752c0-22.092-17.91-40-40-40s-40.004 17.908-40.004 40v483.752c0 0.018 0.002 0.036 0.002 0.054 0 0.064-0.002 0.128-0.002 0.194 0 99.408 80.59 180 180 180 99.412 0 180-80.592 180-180 0-0.084-0.004-0.166-0.004-0.248h0.004v-343.504h0.008c0-0.082-0.008-0.164-0.008-0.248 0-55.138 44.86-100 100-100s100 44.862 100 100c0 0.084-0.008 0.166-0.008 0.248h0.070v451.008l-56.368-56.506c-15.602-15.642-40.93-15.67-56.566-0.070-7.836 7.814-11.754 18.066-11.754 28.32 0 10.218 3.894 20.442 11.68 28.252l124.692 125c15.594 15.632 40.91 15.67 56.554 0.084l125.434-125c15.652-15.598 15.692-40.92 0.102-56.57z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M359.016 943.608c-23.82 5.948-47.642 8.322-71.512 8.322-88.208 0-168.084-36.982-207.444-96.534-52.432-79.882-70.296-249.182 102.538-374.356 3.586 19.078 10.746 45.292 15.492 60.834-22.656 16.652-58.39 50.064-81.046 95.324-32.19 63.184-28.61 126.404 9.54 184.798 26.194 39.304 67.926 63.176 121.564 70.34 65.598 8.332 131.154-3.582 194.332-36.94 92.998-48.898 155.014-107.282 195.49-187.162-10.702-10.75-17.818-26.248-19.074-44.15-1.168-36.942 27.45-67.922 64.388-69.132h2.418c35.73 0 65.55 28.61 66.714 64.384 1.206 35.73-24.986 65.546-59.548 69.132-65.6 134.686-181.254 225.312-333.852 255.14zM902.646 540.622c-90.59-106.072-224.11-164.488-376.708-164.488h-19.072c-10.744-21.444-33.402-35.752-58.388-35.752h-2.418c-36.944 1.186-65.548 32.192-64.392 69.13 1.216 35.774 30.99 64.394 66.81 64.394h2.328c26.242-1.208 48.894-17.892 58.434-40.542h21.45c90.624 0 176.46 26.234 253.968 77.482 59.55 39.36 102.49 90.576 126.356 152.596 20.24 50.052 19.074 98.952-2.42 140.64-33.356 63.228-89.37 97.794-163.292 97.794-47.69 0-92.998-14.33-116.822-25.082-13.118 11.958-36.984 31.028-53.64 42.944 51.226 23.87 103.7 36.94 153.762 36.94 114.446 0 199.070-63.132 231.268-126.362 34.562-69.13 32.188-188.326-57.224-289.694zM297.046 708.706c1.21 35.828 30.984 64.394 66.764 64.394h2.368c36.992-1.168 65.556-32.15 64.39-69.132-1.162-35.732-30.984-64.394-66.758-64.394h-2.376c-2.418 0-5.958 0-8.332 1.208-48.89-81.090-69.132-169.27-62.014-264.648 4.792-71.528 28.616-133.516 70.346-184.766 34.568-44.106 101.326-65.57 146.598-66.758 126.402-2.396 180.044 154.968 183.576 218.144 15.542 3.584 41.734 11.936 59.644 17.892-14.328-193.118-133.526-293.266-247.97-293.266-107.28 0-206.236 77.484-245.552 191.932-54.848 152.596-19.070 299.212 47.644 414.826-5.912 8.374-9.494 21.498-8.328 34.568z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M679.496 431.738c-0.414-0.062-0.834-0.102-1.266-0.102h-477.482l171.506-171.504c15.622-15.622 15.622-40.95-0.002-56.57-15.62-15.624-40.948-15.624-56.568 0l-239.734 239.732c-0.958 0.956-1.868 1.958-2.724 3.006-0.328 0.402-1.884 2.482-2.324 3.138-0.36 0.54-1.696 2.77-2.008 3.352-0.308 0.58-1.424 2.936-1.676 3.544-0.036 0.086-0.468 1.268-0.648 1.774-0.23 0.636-0.474 1.266-0.672 1.918-0.186 0.612-0.818 3.13-0.95 3.788-0.148 0.748-0.522 3.318-0.574 3.862-0.262 2.642-0.262 5.3 0 7.942 0.044 0.448 0.412 3.032 0.58 3.874 0.112 0.556 0.74 3.088 0.958 3.808 0.158 0.524 1.036 2.992 1.328 3.7 0.192 0.458 1.298 2.828 1.688 3.552 0.208 0.386 0.446 0.75 0.666 1.126 0.436 0.752 1.844 2.888 2.084 3.224 0.52 0.724 4.262 5.074 4.29 5.098l239.718 239.72c15.62 15.618 40.948 15.618 56.57 0 15.62-15.624 15.622-40.948 0-56.57l-171.516-171.514h471.296c114.52 0.084 207.688 93.124 207.988 207.594 0 0.084-0.012 0.164-0.012 0.248v95.876c-0.004 22.094 17.906 40.002 40 40 22.090-0.002 40-17.91 39.996-39.998l0.004-95.57h0.020c0-156.594-124.914-284.012-280.536-288.048z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M856.020 159.804c-0.122-52.916-43.048-95.774-95.992-95.774h-591.968c-1.754 0-3.468 0.154-5.164 0.37-19.644 2.54-34.836 19.292-34.836 39.63v784.584c0 22.094 17.91 40 40 40h151.972v63.594c0 10.876 6.548 20.682 16.598 24.844 10.046 4.164 21.612 1.87 29.304-5.818l34.78-34.748 34.78 34.748c5.144 5.14 12.020 7.87 19.014 7.87 3.466 0 6.962-0.672 10.292-2.052 10.048-4.164 16.598-13.968 16.598-24.844v-63.594h278.63c52.642 0 95.368-42.38 95.968-94.882h0.036v-673.916l-0.012-0.012zM776.020 159.988l-0.014 504.628h-519.974v-520.584h503.996c8.796-0 15.972 7.158 15.992 15.956zM760.028 848.616h-278.63v-56h-161.366v56h-111.972v-104h567.944l-0.002 88.204c-0.102 8.71-7.27 15.796-15.974 15.796zM320.032 240.396c0-17.67 14.328-31.998 31.998-31.998s32.002 14.326 32.002 31.998c0 17.674-14.332 32-32.002 32-17.672-0.002-31.998-14.326-31.998-32zM320.032 349.79c0-17.67 14.328-31.998 31.998-31.998s32.002 14.328 32.002 31.998c0 17.676-14.332 32-32.002 32-17.672 0-31.998-14.324-31.998-32zM320.032 459.188c0-17.67 14.328-32 31.998-32s32.002 14.328 32.002 32c0 17.674-14.332 31.998-32.002 31.998-17.672 0-31.998-14.324-31.998-31.998zM384.032 568.582c0 17.674-14.332 31.998-32.002 31.998s-31.998-14.324-31.998-31.998c0-17.67 14.328-32 31.998-32 17.67 0.002 32.002 14.33 32.002 32z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M925.164 193.396c-1.696-0.214-3.41-0.368-5.164-0.368h-816c-1.754 0-3.468 0.152-5.16 0.368-19.648 2.54-34.84 19.292-34.84 39.632v560c0 22.094 17.91 40 40 40h111.886v86.004c0 22.090 17.91 40 40 40 0.292 0 0.582-0.040 0.876-0.046 10.536 0.238 21.144-3.624 29.18-11.67l114.292-114.286h519.766c13.808 0 25.98-6.996 33.168-17.636 0.102-0.144 0.184-0.304 0.282-0.458 0.614-0.922 1.2-1.86 1.722-2.836 0.046-0.082 0.082-0.172 0.124-0.254 2.988-5.618 4.704-12.008 4.704-18.812v0-560c-0-20.346-15.192-37.098-34.836-39.638zM880 753.028h-736v-480h736v480zM756.334 484.17l-125-125.436c-15.594-15.65-40.92-15.692-56.568-0.1-15.648 15.594-15.694 40.92-0.1 56.568l57.004 57.204h-335.67c-22.092 0-40 17.908-40 40s17.908 40 40 40h335.258l-56.508 56.368c-15.64 15.602-15.672 40.928-0.070 56.57 7.814 7.832 18.066 11.752 28.32 11.75 10.22 0 20.442-3.892 28.25-11.68l125-124.688c15.634-15.596 15.672-40.912 0.084-56.556z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M256.094 865.048c0 53.020-42.972 96-96 96-53.020 0-96-42.98-96-96 0-53.016 42.98-96 96-96s96 42.984 96 96zM510.020 918.352c-0.018-0.172-0.042-0.344-0.050-0.52-0.054-0.676-0.124-1.34-0.214-2.004-10.582-105.644-57.866-200.46-128.894-271.536v0c-71.074-71.054-165.906-118.352-271.564-128.934-0.664-0.090-1.33-0.16-2.006-0.214-0.174-0.016-0.348-0.040-0.52-0.054-0.254-0.024-0.5-0.024-0.742-0.008-0.64-0.032-1.278-0.098-1.922-0.098-22.098 0-40 17.908-40 40 0 20.582 15.542 37.516 35.536 39.738 0.042 0.004 0.066 0.036 0.106 0.040 84.82 8.098 163.514 45.024 224.542 106.042v0c61.036 61.036 97.964 139.738 106.070 224.574 0.004 0.040 0.036 0.070 0.042 0.106 2.222 19.988 19.156 35.536 39.736 35.536 22.092 0 40-17.902 40-40 0-0.644-0.066-1.282-0.098-1.922 0-0.246 0-0.492-0.022-0.746zM734.688 918.45c-0.004-0.090-0.018-0.186-0.024-0.276-0.040-0.544-0.058-1.102-0.124-1.638-10.972-167.816-83.558-318.804-195.33-430.616h0.002c-111.812-111.788-262.81-184.384-430.644-195.36-0.542-0.060-1.094-0.084-1.642-0.122-0.092-0.008-0.182-0.016-0.272-0.022-0.020-0.002-0.042 0.004-0.054 0.004-0.836-0.052-1.664-0.124-2.512-0.124-22.092 0-40 17.908-40 40 0 21.036 16.246 38.24 36.874 39.842 0.046 0.008 0.078 0.038 0.128 0.042 66.876 4.086 131.786 19.292 193.406 45.358 70.472 29.81 133.78 72.494 188.166 126.874v0c54.394 54.396 97.090 117.71 126.902 188.204 26.064 61.624 41.274 126.532 45.362 193.408 0.004 0.052 0.036 0.080 0.042 0.13 1.604 20.624 18.802 36.87 39.844 36.87 22.090 0 40-17.904 40-40 0-0.85-0.074-1.678-0.126-2.514-0.002-0.024 0.006-0.040 0.002-0.060zM959.126 920.556c-0.002-0.094 0.008-0.164 0.004-0.262-10.342-231.204-108.314-439.604-261.486-592.796v-0.002c-153.2-153.19-361.61-251.174-592.828-261.518-0.096-0.004-0.168 0.006-0.262 0.004-0.176-0.004-0.348-0.030-0.524-0.030-22.098 0-40 17.91-40 40 0 20.988 16.168 38.164 36.716 39.834 0.184 0.042 0.356 0.086 0.566 0.098 97.040 4.314 191.186 25.538 280.376 63.258 97.14 41.090 184.406 99.928 259.368 174.876v0c74.96 74.964 133.81 162.24 174.908 259.398 37.718 89.19 58.946 183.336 63.26 280.376 0.010 0.208 0.052 0.38 0.096 0.562 1.67 20.552 18.848 36.72 39.834 36.72 22.092 0 40-17.906 40-40-0-0.17-0.024-0.342-0.028-0.518z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M218 670a318 318 0 0 1 0-451 316 316 0 0 1 451 0 318 318 0 0 1 0 451 316 316 0 0 1-451 0m750 240L756 698a402 402 0 1 0-59 60l212 212c16 16 42 16 59 0 16-17 16-43 0-60"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M896.006 920c0 22.090-17.91 40-40 40h-688.006c-22.090 0-40-17.906-40-40v-549.922c-0.838-3.224-1.33-6.588-1.33-10.072 0-22.090 17.908-40.004 40-40.004h178.66c22.092 0.004 40 17.914 40 40.004 0 22.088-17.908 40-40 40h-137.33v479.996h607.998v-479.996h-138.658c-22.090 0-40-17.912-40-40 0-22.090 17.906-40.004 40-40.004h178.658c22.090 0 40 17.91 40 40v559.844c0 0.050 0.008 0.102 0.008 0.154zM665.622 200.168l-124.452-124.45c-8.042-8.042-18.65-11.912-29.186-11.674-1.612-0.034-3.222 0-4.828 0.16-0.558 0.054-1.098 0.16-1.648 0.238-0.742 0.104-1.484 0.192-2.218 0.338-0.656 0.13-1.29 0.31-1.934 0.472-0.622 0.154-1.244 0.292-1.86 0.476-0.64 0.196-1.258 0.436-1.886 0.66-0.602 0.216-1.208 0.414-1.802 0.66-0.598 0.248-1.17 0.54-1.754 0.814-0.598 0.282-1.202 0.546-1.788 0.86-0.578 0.312-1.13 0.664-1.694 1-0.552 0.332-1.116 0.644-1.654 1.006-0.67 0.448-1.3 0.942-1.942 1.426-0.394 0.302-0.806 0.576-1.196 0.894-1.046 0.858-2.052 1.768-3.008 2.726l-124.398 124.39c-15.622 15.62-15.618 40.948 0.002 56.57 15.622 15.62 40.95 15.62 56.568 0l56.164-56.166v439.426c0 22.094 17.912 40 40.002 40 22.092 0 40-17.91 40-40v-441.202l57.942 57.942c15.622 15.624 40.948 15.62 56.568 0 15.626-15.618 15.626-40.946 0.002-56.566z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M875.146 148.994c-0.064-0.040-0.116-0.094-0.184-0.132-92.714-52.39-221.036-84.83-362.846-84.83-138.512 0-270.346 34.356-362.51 84.618-0.606 0.33-1.138 0.658-1.608 0.986-11.954 6.918-20.016 19.81-20.016 34.614v451.4c0 12.7 5.938 23.996 15.166 31.32l340.538 281.676c6.568 6.434 14.918 10.168 23.564 11.122 0.16 0.024 0.32 0.050 0.48 0.066 0.838 0.082 1.676 0.114 2.518 0.14 0.496 0.020 0.994 0.058 1.492 0.058s0.996-0.040 1.492-0.058c0.842-0.032 1.68-0.058 2.518-0.14 0.16-0.016 0.32-0.042 0.48-0.066 8.646-0.958 16.996-4.688 23.564-11.122l339.36-280.718c10.326-7.23 17.094-19.2 17.094-32.762v-450.918c0.002-15.254-8.54-28.506-21.102-35.254zM207.984 208.212c36.292-18.168 77.668-32.854 123.356-43.722 57.062-13.576 117.884-20.458 180.778-20.458s123.714 6.882 180.778 20.458c30.186 7.182 58.474 16.040 84.674 26.456l-490.846 490.848-78.738-65.070v-408.512zM511.742 867.75l-163.078-134.77 467.586-467.584v350.69l-304.508 251.664z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M920.032 127.858h-816c-22.092 0-40 17.908-40 40v688c0 22.092 17.908 40 40 40h316.578c1.13 0.096 2.266 0.172 3.422 0.172s2.292-0.078 3.424-0.172h492.576c22.092 0 40-17.908 40-40v-688c0-22.092-17.908-40-40-40zM144.032 207.858h240v608h-240v-608zM880.032 815.858h-416v-608h416v608zM198.734 288.030c0-17.674 14.328-32 32.002-32h66.396c17.672 0 32 14.326 32 32 0 17.676-14.324 32-32 32h-66.398c-17.674 0-32-14.326-32-32zM198.734 416.030c0-17.674 14.328-32 32.002-32h66.396c17.672 0 32 14.326 32 32 0 17.676-14.324 32-32 32h-66.398c-17.674 0-32-14.326-32-32zM198.734 544.030c0-17.674 14.328-32 32.002-32h66.396c17.672 0 32 14.326 32 32 0 17.676-14.324 32-32 32h-66.398c-17.674 0-32-14.326-32-32z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M64 167.944v688c0 22.092 17.908 40 40 40h816c22.092 0 40-17.908 40-40v-688c0-22.092-17.908-40-40-40h-816c-22.092 0-40 17.908-40 40zM880 815.944h-240v-608h240v608zM144 207.944h416v608h-416v-608zM793.296 320.118h-66.398c-17.676 0-32-14.324-32-32 0-17.674 14.328-32 32-32h66.396c17.674 0 32.002 14.326 32.002 32 0 17.672-14.324 32-32 32zM793.296 448.118h-66.398c-17.676 0-32-14.324-32-32 0-17.674 14.328-32 32-32h66.396c17.674 0 32.002 14.326 32.002 32 0 17.672-14.324 32-32 32zM793.296 576.118h-66.398c-17.676 0-32-14.324-32-32 0-17.674 14.328-32 32-32h66.396c17.674 0 32.002 14.326 32.002 32 0 17.672-14.324 32-32 32z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M692.070 580.856c18.156-18.156 28.152-42.266 28.152-67.89-0.008-25.622-10.002-49.726-28.148-67.872-8.476-8.478-18.308-15.188-29-19.922-0.222-0.098-0.408-0.22-0.566-0.364-13.294-6.5-22.476-20.116-22.476-35.914 0-22.090 17.91-40 40-40 5.774 0 11.246 1.248 16.204 3.45 0.016 0.006 0.026 0.008 0.040 0.016 19.292 8.656 37.036 20.832 52.368 36.164 33.254 33.254 51.574 77.446 51.58 124.43 0.006 46.996-18.31 91.204-51.58 124.472-15.064 15.062-32.45 27.074-51.344 35.7-0.154 0.070-0.286 0.112-0.434 0.176-5.124 2.382-10.812 3.75-16.832 3.75-22.090 0-40-17.906-40-40 0-16.196 9.644-30.112 23.488-36.402 0.156-0.11 0.32-0.216 0.516-0.304 10.314-4.712 19.81-11.268 28.032-19.49zM861.778 275.386c-47.824-47.824-107.946-79.588-173.204-92.242-0.356-0.078-0.712-0.146-1.072-0.214-0.060-0.012-0.124-0.026-0.186-0.038-0.506-0.096-0.976-0.162-1.422-0.208-1.918-0.282-3.868-0.476-5.864-0.476-22.090 0-40 17.91-40 40 0 19.024 13.292 34.91 31.084 38.968 0.352 0.128 0.728 0.244 1.162 0.326 48.7 9.268 95.226 32.748 132.934 70.452 99.972 99.972 100.054 261.984-0.002 362.040-37.684 37.684-84.152 61.14-132.788 70.426-0.084 0.016-0.144 0.046-0.224 0.066-18.338 3.644-32.166 19.816-32.166 39.222 0 22.094 17.91 40 40 40 2.776 0 5.484-0.286 8.102-0.822 0.094-0.018 0.172-0.018 0.27-0.038 65.32-12.626 125.496-44.406 173.376-92.286 131.008-131.008 131.008-344.172 0-475.176zM525.988 159.516v704.968c0 22.090-17.906 40-40 40-12.73 0-24.046-5.966-31.374-15.234l-51.056-61.722v0.216l-122.14-147.666h-177.386c-22.090 0-40-17.906-40-40v0 0-256c0-5.22 1.030-10.194 2.85-14.766 0.104-0.266 0.184-0.542 0.294-0.804 0.39-0.924 0.844-1.812 1.3-2.702 0.134-0.26 0.242-0.538 0.382-0.794 0.246-0.456 0.54-0.878 0.804-1.324 6.972-11.726 19.734-19.61 34.368-19.61h177.386l173.13-209.238c7.324-9.316 18.67-15.324 31.44-15.324 22.092-0 40.002 17.91 40.002 40zM445.988 270.826l-126.708 153.252h-175.248v176h175.248l19.832 23.998h0.17l106.708 129.112v-482.362z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M763.972 919.5c-6.368 0-12.758-1.518-18.61-4.596l-233.358-122.688-233.37 122.688c-13.476 7.090-29.808 5.904-42.124-3.042-12.318-8.95-18.486-24.118-15.912-39.124l44.57-259.856-188.792-184.028c-10.904-10.626-14.828-26.524-10.124-41.004s17.222-25.034 32.292-27.222l260.906-37.912 116.686-236.42c6.738-13.652 20.644-22.296 35.87-22.296v0c15.226 0 29.13 8.644 35.87 22.298l116.674 236.418 260.906 37.912c15.068 2.19 27.586 12.742 32.292 27.222s0.782 30.376-10.124 41.004l-188.792 184.028 44.24 257.93c0.62 2.796 0.946 5.704 0.946 8.688 0 22.054-17.848 39.942-39.888 40-0.054 0-0.106 0-0.158 0z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M763.972 919.5c-6.368 0-12.758-1.518-18.61-4.596l-233.358-122.688-233.37 122.688c-13.476 7.090-29.808 5.904-42.124-3.042-12.318-8.95-18.486-24.118-15.912-39.124l44.57-259.856-188.792-184.028c-10.904-10.626-14.828-26.524-10.124-41.004s17.222-25.034 32.292-27.222l260.906-37.912 116.686-236.42c6.738-13.652 20.644-22.296 35.87-22.296v0c15.226 0 29.13 8.644 35.87 22.298l116.674 236.418 260.906 37.912c15.068 2.19 27.586 12.742 32.292 27.222s0.782 30.376-10.124 41.004l-188.792 184.028 44.24 257.93c0.62 2.796 0.946 5.704 0.946 8.688 0 22.054-17.848 39.942-39.888 40-0.054 0-0.106 0-0.158 0zM190.256 428.144l145.812 142.13c9.428 9.192 13.73 22.432 11.504 35.406l-34.424 200.7 180.244-94.758c11.654-6.13 25.576-6.126 37.226 0l180.232 94.756-34.422-200.698c-2.226-12.974 2.076-26.214 11.504-35.406l145.812-142.13-201.51-29.282c-13.030-1.892-24.292-10.076-30.118-21.882l-90.114-182.596-90.122 182.598c-5.826 11.804-17.090 19.988-30.118 21.88l-201.506 29.282z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M960 512a448 448 0 1 0-896 0 448 448 0 0 0 896 0zM252 772a366 366 0 0 1 0-520 366 366 0 0 1 520 0 366 366 0 0 1 0 520 366 366 0 0 1-520 0zm412-68H360c-22 0-40-18-40-40V360c0-22 18-40 40-40h304c22 0 40 18 40 40v304c0 22-18 40-40 40z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M954.324 833.3c0.208-0.558 0.388-1.128 0.586-1.692 0.3-0.868 0.608-1.734 0.882-2.61 0.234-0.746 0.444-1.5 0.66-2.25 0.212-0.734 0.432-1.464 0.624-2.204 0.204-0.766 0.378-1.54 0.562-2.308 0.18-0.766 0.366-1.528 0.528-2.292 0.146-0.692 0.272-1.386 0.402-2.082 0.168-0.89 0.332-1.778 0.476-2.668 0.090-0.566 0.164-1.136 0.244-1.704 0.148-1.058 0.29-2.118 0.404-3.18 0.042-0.422 0.080-0.852 0.12-1.274 0.118-1.23 0.212-2.46 0.282-3.696 0.018-0.304 0.030-0.606 0.042-0.906 0.062-1.36 0.098-2.718 0.104-4.082 0-0.114 0.008-0.226 0.008-0.34 0-0.128-0.010-0.258-0.010-0.39-0.006-1.368-0.042-2.734-0.104-4.102-0.014-0.296-0.030-0.594-0.044-0.89-0.070-1.246-0.166-2.492-0.284-3.738-0.042-0.434-0.084-0.864-0.128-1.292-0.116-1.050-0.25-2.098-0.4-3.144-0.088-0.628-0.18-1.258-0.282-1.882-0.13-0.8-0.276-1.598-0.428-2.394-0.162-0.868-0.332-1.73-0.518-2.594-0.116-0.524-0.24-1.046-0.364-1.57-0.264-1.128-0.542-2.25-0.846-3.36-0.070-0.254-0.144-0.504-0.214-0.754-11.38-40.382-48.464-69.996-92.488-69.996-3.066 0-6.096 0.16-9.088 0.442l-264.576-458.262c21.080-29.698 24.3-70.13 4.9-103.732-12.596-21.816-32.458-36.812-54.764-43.724-0.062-0.020-0.124-0.036-0.186-0.054-1.394-0.43-2.798-0.83-4.21-1.196-0.296-0.076-0.596-0.142-0.894-0.216-1.208-0.3-2.422-0.586-3.642-0.84-0.384-0.082-0.774-0.148-1.16-0.224-1.168-0.228-2.338-0.444-3.514-0.626-0.384-0.060-0.776-0.112-1.162-0.168-1.208-0.174-2.416-0.332-3.63-0.46-0.35-0.038-0.7-0.066-1.048-0.1-1.27-0.12-2.54-0.218-3.814-0.29-0.32-0.018-0.642-0.032-0.964-0.044-1.294-0.058-2.594-0.094-3.892-0.1-0.166 0-0.328-0.012-0.492-0.012-0.19 0-0.376 0.014-0.564 0.014-1.21 0.008-2.42 0.040-3.63 0.092-0.494 0.022-0.986 0.046-1.478 0.074-0.992 0.060-1.986 0.136-2.978 0.226-0.722 0.064-1.442 0.134-2.16 0.214-0.696 0.080-1.392 0.17-2.090 0.266-1.014 0.136-2.026 0.286-3.032 0.452-0.352 0.060-0.704 0.124-1.054 0.19-44.97 8.028-79.122 47.302-79.122 94.582 0 20.756 6.602 39.958 17.79 55.67l-264.58 458.26c-2.954-0.274-5.94-0.434-8.962-0.434-53.078 0-96.11 43.032-96.11 96.11 0 53.082 43.032 96.11 96.11 96.11 38.8 0 72.208-23.004 87.386-56.11l529.202-0.004c0.138 0.304 0.292 0.606 0.436 0.91 0.226 0.48 0.456 0.958 0.69 1.434 0.474 0.968 0.966 1.93 1.476 2.882 0.214 0.402 0.432 0.8 0.65 1.2 0.314 0.566 0.604 1.14 0.93 1.708 0.284 0.488 0.59 0.958 0.88 1.442 0.122 0.2 0.244 0.398 0.37 0.602 27.086 44.372 84.766 59.278 130.040 33.136 18.864-10.89 32.624-27.214 40.478-45.852 0.054-0.132 0.104-0.266 0.158-0.398 0.518-1.248 1.020-2.506 1.486-3.776zM238.414 744.282l264.542-458.204c0.424 0.042 0.85 0.064 1.276 0.098 0.668 0.056 1.334 0.112 2.004 0.152 0.652 0.040 1.306 0.066 1.96 0.092 1.122 0.046 2.244 0.076 3.368 0.084 0.146 0.002 0.292 0.012 0.438 0.012 0.168 0 0.334-0.012 0.502-0.014 1.436-0.004 2.874-0.040 4.31-0.108 0.088-0.006 0.176-0.010 0.262-0.014 1.376-0.070 2.75-0.168 4.124-0.296l264.596 458.298c-3.48 4.894-6.514 10.122-9.042 15.636h-529.226c-2.546-5.55-5.602-10.814-9.114-15.736z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm3 83a366 366 0 0 0-368 368 366 366 0 0 0 368 368 366 366 0 0 0 369-368 366 366 0 0 0-369-368zM295 472h434a40 40 0 0 1 0 80H295a40 40 0 1 1 0-80z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M828.814 195.216c-174.956-174.956-458.614-174.956-633.566 0-174.958 174.956-174.956 458.612 0 633.568s458.614 174.956 633.566 0c174.958-174.956 174.956-458.612 0-633.568zM813.592 723.072l-92.714-92.712c41.542-73.186 41.548-163.544 0.016-236.734l92.7-92.698c43.176 61.41 66.44 134.45 66.44 211.074-0.004 76.62-23.266 149.662-66.442 211.070zM398.916 625.116c-62.382-62.384-62.382-163.89 0-226.274 30.216-30.216 70.398-46.86 113.146-46.864h0.010c42.724 0 82.898 16.642 113.12 46.866 62.382 62.38 62.382 163.886 0 226.272-30.22 30.22-70.4 46.864-113.136 46.864-42.74-0.002-82.92-16.644-113.14-46.864zM723.104 210.44l-92.696 92.698c-36.59-20.766-77.464-31.162-118.356-31.158-40.888 0.004-81.78 10.406-118.378 31.178l-92.714-92.716c61.408-43.176 134.452-66.438 211.070-66.44 76.622-0.004 149.668 23.262 211.074 66.438zM210.472 300.928l92.724 92.726c-41.512 73.176-41.506 163.506 0.016 236.678l-92.742 92.74c-43.176-61.408-66.438-134.454-66.44-211.072 0.004-76.624 23.264-149.664 66.442-211.072zM512.032 880c-76.624-0.002-149.666-23.264-211.072-66.44l92.74-92.742c36.59 20.766 77.464 31.16 118.356 31.16 40.868 0 81.738-10.392 118.322-31.144l92.726 92.726c-61.408 43.176-134.454 66.44-211.072 66.44z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M923.946 63.418h-631.232c-20.268 0-36.7 16.432-36.7 36.7v155.286h-155.284c-20.268 0-36.7 16.432-36.7 36.7v631.23c0 20.268 16.43 36.7 36.7 36.7h631.23c20.272 0 36.7-16.432 36.7-36.7v-155.286h155.286c20.272 0 36.7-16.432 36.7-36.7v-631.23c-0.002-20.268-16.43-36.7-36.7-36.7zM688.66 880.032h-544.628v-544.628h111.984v395.946c0 20.268 16.43 36.7 36.7 36.7h395.944v111.982zM688.66 688.046h-352.644v-352.644h352.644v352.644zM880.644 688.046h-111.984v-395.946c0-20.268-16.428-36.7-36.7-36.7h-395.944v-111.984h544.628v544.63z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M998.786 474.516l-91 90.988c-8.028 8.036-18.624 11.902-29.152 11.676-10.536 0.234-21.144-3.632-29.184-11.676l-92.3-92.296c-15.624-15.622-15.624-40.95 0-56.57 15.622-15.622 40.95-15.624 56.57 0l26.146 26.148c-13.774-61.416-44.624-117.806-90.216-163.394-63.46-63.464-147.84-98.414-237.586-98.414-89.75 0-174.128 34.95-237.59 98.414-27.012 27.012-48.836 57.824-65.024 91.214l-0.008-0.004c-6.722 12.632-20.008 21.242-35.32 21.242-22.090 0-40-17.906-40-40 0-5.464 1.102-10.668 3.086-15.414l-0.004-0.004c0.016-0.032 0.024-0.058 0.040-0.090 0.036-0.078 0.070-0.156 0.106-0.234 0.73-1.632 0.208-0.718 5.004-9.996 69.18-133.726 208.766-225.128 369.71-225.128 203.224 0 372.374 145.734 408.728 338.392l21.424-21.424c15.618-15.622 40.946-15.622 56.566 0s15.624 40.948 0.004 56.57zM889.992 682.11c0 5.464-1.106 10.672-3.090 15.414l0.008 0.004c-0.016 0.036-0.028 0.058-0.040 0.090-0.036 0.078-0.074 0.156-0.106 0.234-0.73 1.636-0.208 0.718-5.008 10-69.176 133.722-208.762 225.124-369.708 225.124-205.2 0-375.668-148.578-409.76-344.022l-19.478 19.478c-15.622 15.622-40.95 15.622-56.57 0-15.618-15.622-15.622-40.95 0-56.57l90.996-90.992c8.032-8.032 18.628-11.902 29.152-11.672 10.536-0.238 21.144 3.632 29.188 11.672l92.296 92.3c15.624 15.618 15.624 40.946 0 56.566-15.618 15.622-40.946 15.624-56.566 0.004l-29.292-29.292c12.466 65.568 44.214 125.882 92.448 174.116 63.46 63.46 147.84 98.41 237.586 98.41 89.75 0 174.124-34.95 237.59-98.41 27.012-27.012 48.836-57.824 65.020-91.218l0.008 0.004c6.726-12.632 20.012-21.242 35.324-21.242 22.092 0.002 40.002 17.912 40.002 40.002zM145.83 545.416l1.4 0.248-0.824-0.824-0.576 0.576z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M200.022 927.988h624.018c1.38 0 2.746-0.072 4.090-0.208 20.168-2.050 35.91-19.080 35.91-39.792v-751.916c0-22.092-17.91-40-40-40h-624.018c-22.098 0-40 17.908-40 40v751.916c0 22.094 17.906 40 40 40zM512.002 878.206c-17.674 0-32.004-14.328-32.004-31.998 0-17.678 14.33-32.002 32.004-32.002 17.67 0 32 14.324 32 32.002 0 17.67-14.33 31.998-32 31.998zM240.022 176.078h544.018v591.902h-544.018v-591.902z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M256.972 768.004c0-8.67-3.156-16.158-9.484-22.534-6.332-6.34-13.836-9.484-22.504-9.458-8.682 0-16.188 3.172-22.516 9.458-6.33 6.344-9.488 13.84-9.488 22.534 0 8.692 3.158 16.186 9.488 22.532 6.328 6.286 13.834 9.458 22.516 9.458 8.668 0.028 16.172-3.118 22.504-9.458 6.328-6.376 9.484-13.868 9.484-22.532zM832.948 480.010c0-17.004-6.478-31.908-19.468-44.734-13.014-12.82-27.834-19.25-44.512-19.276h-175.97c0-19.328 7.98-45.904 24.004-79.724 15.968-33.826 23.978-60.568 23.978-80.256 0-32.646-5.332-56.808-15.994-72.48-10.664-15.664-31.988-23.484-63.98-23.484-8.696 8.64-15.012 22.828-19.032 42.486-4.020 19.69-9.102 40.606-15.254 62.752-6.168 22.172-16.080 40.382-29.762 54.738-7.344 7.68-20.168 22.832-38.5 45.496-1.326 1.67-5.164 6.65-11.512 15.010-6.342 8.342-11.594 15.178-15.762 20.508-4.156 5.308-9.91 12.386-17.252 21.218-7.328 8.862-14 16.186-19.988 22.038-5.986 5.794-12.412 11.73-19.26 17.744-6.852 5.984-13.508 10.5-19.99 13.48-6.478 3.010-12.4 4.484-17.756 4.512h-15.982v320.010h15.982c4.332 0 9.596 0.492 15.774 1.504 6.168 1.012 11.676 2.080 16.488 3.258 4.812 1.144 11.154 2.98 19.002 5.466 7.862 2.512 13.702 4.424 17.502 5.74 3.812 1.31 9.732 3.422 17.756 6.238 8.026 2.842 12.866 4.586 14.506 5.272 70.324 24.334 127.304 36.504 170.996 36.504h60.482c64.006 0 96.024-27.836 96.024-83.478 0-8.664-0.848-18.016-2.514-27.996 10.004-5.334 17.936-14.084 23.758-26.276 5.824-12.172 8.724-24.416 8.778-36.746 0-12.366-3.008-23.844-9.024-34.51 17.664-16.682 26.524-36.496 26.524-59.496 0-8.308-1.696-17.554-5.032-27.72-3.336-10.202-7.492-18.104-12.468-23.762 10.636-0.328 19.55-8.15 26.714-23.486 7.192-15.34 10.744-28.82 10.744-40.496v-0.054zM896.984 479.516c0 29.638-8.204 56.816-24.5 81.506 2.98 10.994 4.484 22.476 4.484 34.482 0 25.674-6.344 49.68-19.004 71.99 1.012 7 1.506 14.164 1.506 21.488 0 33.688-10.008 63.354-29.968 89.026 0.326 46.32-13.834 82.904-42.518 109.756-28.682 26.848-66.522 40.246-113.496 40.246h-64.528c-31.99 0-63.542-3.746-94.742-11.268-31.168-7.492-67.246-18.402-108.23-32.758-38.662-13.312-61.656-19.956-68.984-19.956h-143.996c-17.664 0-32.742-6.292-45.252-18.784-12.508-12.5-18.756-27.588-18.756-45.254v-319.982c0-17.666 6.248-32.728 18.756-45.226 12.51-12.52 27.588-18.784 45.252-18.784h136.998c12.002-8.010 34.818-33.822 68.478-77.484 19.33-24.99 37.168-46.344 53.508-64.008 7.996-8.314 13.918-22.586 17.744-42.766 3.828-20.178 8.912-41.232 15.256-63.24 6.36-21.984 16.68-40.002 30.994-53.998 13.002-12.362 28.012-18.514 45.018-18.514 27.998 0 53.152 5.414 75.464 16.242 22.31 10.828 39.316 27.748 50.964 50.77 11.704 23.002 17.5 53.978 17.5 92.962 0 31.008-7.984 63-23.98 96.028h88.014c34.67 0 64.634 12.628 89.956 37.98 25.346 25.346 38.008 55.144 38.008 89.49l0.054 0.056z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M512 64c-247.424 0-448 200.578-448 448.004 0 247.422 200.576 448 448 448s448-200.578 448-448c0-247.424-200.576-448.004-448-448.004zM772.214 772.22c-69.508 69.504-161.918 107.786-260.214 107.786s-190.708-38.282-260.214-107.786c-69.508-69.508-107.786-161.918-107.786-260.214s38.278-190.708 107.786-260.214c69.508-69.504 161.918-107.786 260.214-107.786s190.708 38.278 260.214 107.786c69.504 69.508 107.786 161.918 107.786 260.214s-38.282 190.706-107.786 260.214zM768.004 517.004c0 22.090-17.91 40-40 40h-216c-5.384 0-10.508-1.078-15.196-3.008-0.124-0.046-0.254-0.086-0.376-0.132-0.61-0.262-1.188-0.57-1.782-0.86-0.572-0.278-1.16-0.528-1.718-0.828-0.204-0.114-0.39-0.246-0.594-0.364-0.918-0.516-1.832-1.050-2.704-1.64-0.086-0.058-0.164-0.128-0.254-0.188-10.492-7.21-17.382-19.286-17.382-32.98v-285c0-22.094 17.91-40 40.004-40 22.088 0 40 17.906 40 40v244.996h175.996c22.094 0 40.002 17.916 40.006 40.004z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M576 540.658c0 35.344-28.654 64-64 64s-64-28.656-64-64c0-20.27 9.432-38.324 24.134-50.050v-193.418c-0.004-22.092 17.906-40.002 40-40 22.090 0 40 17.906 40 40l-0.004 193.626c14.552 11.732 23.87 29.692 23.87 49.842zM928.32 543.934c0 229.79-186.28 416.066-416.068 416.066-229.786 0-416.064-186.278-416.064-416.066 0-216.26 164.998-393.958 375.97-414.134l0.188-49.794h-16.348c-22.092 0-40.002-17.91-39.998-40 0-22.090 17.906-40.004 40-40.004l112 0.002c22.090-0.002 39.998 17.91 40 40 0 22.090-17.908 40-40 39.998h-15.656l-0.19 49.782c77.246 7.352 148.33 35.812 207.422 79.564l41.854-41.856c15.622-15.622 40.95-15.618 56.57 0.002s15.622 40.948 0 56.568l-38.9 38.9c67.822 74.028 109.22 172.66 109.22 280.972zM848.32 543.934c0-89.768-34.958-174.16-98.432-237.634s-147.87-98.432-237.636-98.432c-89.766 0-174.158 34.958-237.632 98.432s-98.432 147.868-98.432 237.634c0 89.766 34.958 174.16 98.432 237.636 63.474 63.472 147.868 98.43 237.632 98.43 89.768 0 174.162-34.958 237.636-98.43 63.476-63.476 98.432-147.87 98.432-237.636z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M916.25 348.726l-125 124.688c-7.808 7.79-18.032 11.68-28.25 11.68-10.254 0.002-20.506-3.918-28.32-11.75-15.602-15.64-15.57-40.966 0.070-56.568l56.508-56.368h-655.258c-22.092 0-40-17.908-40-40s17.908-40 40-40h655.672l-57.006-57.206c-15.594-15.646-15.548-40.972 0.1-56.566s40.972-15.55 56.568 0.098l125 125.438c15.588 15.644 15.548 40.958-0.084 56.554zM107.666 731.892l125 125.438c15.596 15.648 40.92 15.692 56.568 0.098s15.694-40.92 0.1-56.566l-57.006-57.206h655.672c22.092 0 40-17.908 40-40s-17.908-40-40-40h-655.258l56.508-56.368c15.64-15.602 15.672-40.928 0.070-56.568-7.814-7.832-18.066-11.752-28.32-11.75-10.218 0-20.442 3.89-28.25 11.68l-125 124.688c-15.632 15.596-15.672 40.91-0.084 56.554z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M919.5 225.208h-215.5v-120.080c0-20.344-15.192-37.096-34.836-39.632-1.696-0.216-3.41-0.372-5.164-0.372h-304.004c-1.754 0-3.468 0.152-5.164 0.372-19.644 2.54-34.836 19.292-34.836 39.628v120.084h-215.996c-22.090 0-40 17.912-40 40.002 0 22.092 17.91 40 40 40h27.216l53.916 615.914h0.214c0 22.092 17.91 40 40 40h573.372c22.094 0 40-17.91 40-40h0.148l53.916-615.914h26.716c22.090 0 40-17.91 40-40s-17.908-40.002-39.998-40.002zM399.996 145.126h224.004v80.082h-224.004v-80.082zM762.062 881.124h-500.124l-50.414-575.912h600.954l-50.416 575.912zM632.004 697.124v-240c-0.004-22.092 17.906-40.002 40-40.002 22.090 0.002 40 17.908 40 40.002l-0.004 240.002c0.004 22.088-17.906 39.996-39.996 39.998-22.094 0.002-40.004-17.906-40-40zM311.996 697.124v-240c-0.004-22.092 17.906-40.002 40-40.002 22.090 0.002 40 17.908 40 40.002l-0.004 240.002c0.004 22.088-17.906 39.996-39.996 39.998-22.094 0.002-40.004-17.906-40-40zM472 697.124v-240c-0.004-22.092 17.906-40.002 40-40.002 22.090 0.002 40 17.908 40 40.002l-0.004 240.002c0.004 22.088-17.906 39.996-39.996 39.998-22.094 0.002-40.004-17.906-40-40z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M960 233.114c-32.946 14.616-68.41 24.5-105.598 28.942 37.954-22.762 67.098-58.774 80.856-101.688-35.52 21.054-74.894 36.368-116.726 44.598-33.542-35.724-81.316-58.038-134.204-58.038-101.496 0-183.796 82.292-183.796 183.814 0 14.424 1.628 28.45 4.758 41.89-152.75-7.668-288.22-80.872-378.876-192.072-15.822 27.15-24.898 58.706-24.898 92.42 0 63.776 32.458 120.034 81.782 153.010-30.116-0.944-58.458-9.212-83.262-22.982-0.028 0.75-0.028 1.546-0.028 2.324 0 89.070 63.356 163.334 147.438 180.256-15.426 4.186-31.664 6.426-48.442 6.426-11.836 0-23.35-1.146-34.574-3.28 23.406 73.006 91.286 126.16 171.726 127.632-62.914 49.324-142.18 78.696-228.314 78.696-14.828 0-29.448-0.876-43.842-2.568 81.33 52.138 177.96 82.574 281.786 82.574 338.11 0 523-280.104 523-523.014 0-7.986-0.164-15.914-0.542-23.778 35.952-25.96 67.124-58.318 91.756-95.162z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M230 301h480a240 240 0 1 1 0 481H235c-23 0-42-20-42-43 0-24 19-43 42-43h475a155 155 0 0 0 0-310H228l3 3 65 65a45 45 0 0 1-65 64L90 376a45 45 0 0 1 0-64l142-142a45 45 0 1 1 64 65l-63 62-3 4z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M896.032 915.53v-467.498c0-1.988-0.194-3.926-0.472-5.834-0.11-0.744-0.192-1.498-0.34-2.226-1.524-7.44-5.136-14.1-10.164-19.408-0.252-0.266-0.48-0.554-0.738-0.814-0.496-0.494-1.036-0.944-1.554-1.412-0.43-0.386-0.84-0.8-1.288-1.17-0.292-0.24-0.608-0.446-0.904-0.676-2.506-1.954-5.244-3.616-8.176-4.934-0.744-0.334-1.504-0.632-2.27-0.922-4.39-1.656-9.124-2.604-14.094-2.604h-552.184l0.002-55.85c0-114.776 93.376-208.15 208.15-208.15 86.038 0 160.034 52.474 191.7 127.096 0.012 0.028 0.030 0.044 0.042 0.072 5.978 14.566 20.284 24.832 37.006 24.832 22.090 0 40-17.906 40-40 0-4.71-0.86-9.21-2.354-13.41-0.182-0.694-0.42-1.438-0.782-2.292-43.666-103.582-146.14-176.296-265.612-176.296-159.128 0-288.13 128.994-288.15 288.12v55.882h-54.85c-20.71 0-37.746 15.742-39.792 35.91-0.136 1.344-0.208 2.708-0.208 4.090v463.332c-0.618 2.794-0.968 5.688-0.968 8.668 0 22.094 17.91 40 40 40h688.27c22.092 0 40-17.91 40-40-0.002-1.528-0.104-3.028-0.27-4.506zM209 488.032h607.032v392h-607.032v-392zM552.164 691.86l-0.002 58.186c0.004 22.088-17.906 39.996-39.996 40-22.094 0-40.004-17.908-40-40v-57.976c-14.702-11.726-24.134-29.782-24.134-50.048 0-35.346 28.654-64 64-64s64 28.654 64 64c0 20.142-9.318 38.102-23.868 49.838z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M143.996 511.998c0-98.296 38.28-190.708 107.784-260.214 69.508-69.508 161.922-107.786 260.216-107.786 98.296 0 190.708 38.278 260.214 107.786s107.786 161.918 107.786 260.214c0 98.292-38.28 190.708-107.786 260.214-69.508 69.504-161.918 107.786-260.214 107.786-98.294 0-190.708-38.282-260.216-107.786-69.504-69.508-107.784-161.922-107.784-260.214zM63.996 511.998c0 247.422 200.576 448 448 448s448-200.578 448-448c0-247.426-200.576-448-448-448s-448 200.574-448 448v0zM485.324 267.598l-125.438 125c-15.648 15.596-15.692 40.922-0.098 56.57s40.92 15.692 56.566 0.098l57.206-57.004v335.672c0 22.090 17.908 40 40 40s40-17.91 40-40v-335.26l56.368 56.508c15.602 15.64 40.928 15.672 56.568 0.070 7.832-7.814 11.752-18.064 11.75-28.318 0-10.22-3.89-20.444-11.68-28.25l-124.688-125c-15.594-15.634-40.91-15.672-56.554-0.086z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M512.062 65.062c-247.424 0-448 200.576-448 448s200.576 448 448 448 448-200.576 448-448-200.576-448-448-448zM776.324 769.132c-55.386-54.52-155.436-95.864-189.492-101.282-14.918-2.376-15.258-43.39-15.258-43.39s43.832-43.39 53.384-101.738c25.698 0 41.568-62.032 15.87-83.856 1.072-22.974 33.038-180.352-128.766-180.352s-129.836 157.376-128.768 180.352c-25.706 21.824-9.83 83.856 15.87 83.856 9.552 58.348 53.382 101.738 53.382 101.738s-0.34 41.020-15.256 43.39c-34.056 5.418-134.104 46.762-189.49 101.282-66.932-69.018-103.738-159.708-103.738-256.070 0-98.296 38.278-190.708 107.786-260.212 69.51-69.506 161.918-107.788 260.214-107.788s190.708 38.278 260.214 107.788c69.506 69.506 107.786 161.916 107.786 260.212-0 96.364-36.808 187.054-103.738 256.070z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M123.302 833.14c-26.284-11.118-51.696-23.792-76.196-37.95 4.028-92.818 194.792-176.82 246.28-185.012 16.158-2.57 16.526-46.994 16.526-46.994s-47.476-46.996-57.818-110.196c-27.836 0-45.024-67.186-17.19-90.824-1.158-24.882-35.776-195.34 139.468-195.34 175.242 0 140.628 170.458 139.464 195.34 27.838 23.638 10.644 90.824-17.188 90.824-10.346 63.2-57.822 110.196-57.822 110.196s0.37 44.424 16.528 46.994c52.042 8.282 246.38 93.996 246.38 187.988v15.054c-14.028 7.102-28.316 13.76-42.88 19.918-84.77 35.852-174.864 54.032-267.78 54.032-92.912 0.002-183.004-18.178-267.772-54.030zM910.064 335h-80.008v-80.010c0.002-22.088-17.906-39.992-39.996-39.992-22.088 0-39.998 17.906-39.998 39.996v80.006h-80.002c-22.094 0-40 17.908-39.998 40-0.002 22.090 17.904 39.996 39.996 39.996h80.004v80.002c0 22.094 17.908 40 40 40 22.090 0 39.996-17.906 39.996-39.996v-80.006l80.010-0.002c22.090 0.002 39.994-17.906 39.994-39.996 0-22.088-17.908-39.998-39.998-39.998z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M532.716 960c115.572 0 227.634-22.612 333.076-67.208 18.116-7.66 35.888-15.94 53.336-24.774v-18.726c0-116.912-241.728-223.528-306.458-233.828-20.1-3.198-20.556-58.458-20.556-58.458s59.050-58.452 71.922-137.062c34.618 0 56.004-83.57 21.378-112.972 1.448-30.95 44.5-242.972-173.474-242.972-217.976 0-174.916 212.022-173.476 242.972-34.622 29.402-13.244 112.972 21.38 112.972 12.864 78.61 71.916 137.062 71.916 137.062s-0.458 55.262-20.554 58.458c-64.042 10.19-301.326 114.674-306.334 230.124 30.474 17.61 62.084 33.376 94.776 47.204 105.436 44.596 217.498 67.208 333.068 67.208z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M123.302 822.204c-26.284-11.118-51.696-23.792-76.196-37.95 4.028-92.818 194.792-176.82 246.28-185.012 16.158-2.57 16.526-46.998 16.526-46.998s-47.476-46.994-57.818-110.192c-27.836 0-45.024-67.186-17.19-90.822-1.158-24.884-35.776-195.342 139.468-195.342 175.242 0 140.628 170.458 139.464 195.342 27.838 23.636 10.644 90.822-17.188 90.822-10.346 63.2-57.822 110.192-57.822 110.192s0.37 44.426 16.528 46.998c52.042 8.282 246.38 93.996 246.38 187.988v15.054c-14.028 7.102-28.316 13.758-42.88 19.918-84.77 35.852-174.864 54.032-267.78 54.032-92.912 0-183.004-18.18-267.772-54.030zM977.018 652.224c0-64.612-133.592-123.532-169.364-129.222-11.106-1.768-11.36-32.306-11.36-32.306s32.634-32.304 39.744-75.746c19.132 0 30.954-46.188 11.818-62.436 0.798-17.106 24.592-134.276-95.874-134.276-120.462 0-96.666 117.17-95.87 134.276-19.134 16.248-7.32 62.436 11.816 62.436 7.11 43.442 39.742 75.746 39.742 75.746s-0.25 30.54-11.358 32.306c-23.154 3.684-87.282 29.672-129.644 65.068 21.022 10.038 42.072 21.39 61.066 33.186 14.278 8.866 27.392 17.866 39.338 26.986 35.696 27.262 60.956 55.638 75.646 84.934 2.784 0.032 5.562 0.102 8.352 0.102 77.788 0 153.58-12.792 225.944-37.976v-43.078z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M926.050 273.364c-9.556 0-20.574 3.8-32.278 11.812l-189.738 129.894v-151.068c0-20.342-15.192-37.094-34.838-39.63-1.694-0.218-3.408-0.372-5.162-0.372h-560.002c-1.754 0-3.468 0.152-5.162 0.372-19.646 2.538-34.838 19.29-34.838 39.628v496.002c0 22.092 17.91 40 40 40h560.004c13.808 0 25.98-6.998 33.168-17.638 0.102-0.148 0.184-0.308 0.282-0.458 0.612-0.922 1.2-1.862 1.722-2.836 0.046-0.082 0.080-0.172 0.124-0.254 2.994-5.612 4.704-12.010 4.704-18.81v-151.066l189.738 129.886c11.706 8.012 22.718 11.812 32.278 11.812 20.092 0 33.736-16.806 33.736-46.622v-384.032c0-29.816-13.644-46.62-33.738-46.62zM624.036 720h-480.004v-415.998h480.004v415.998zM879.788 632.3l-175.728-120.296 175.728-120.302v240.598zM240.688 663.534c-22.090 0-40-17.906-40-40v0c0-22.090 17.91-40 40-40v0c22.090 0 40.004 17.91 40.004 40v0c0 22.092-17.914 40-40.004 40v0z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M736.172 108.030c0-11.044-8.956-20-20-20h-408.282c-11.044 0-20 8.956-20 20 0 11.046 8.956 20 20 20h408.282c11.044 0 20-8.954 20-20zM736.172 50.37c0-11.044-8.956-20-20-20h-408.282c-11.044 0-20 8.956-20 20s8.956 20 20 20h408.282c11.044 0 20-8.956 20-20zM736.172 973.692c0-11.044-8.956-20-20-20h-408.282c-11.044 0-20 8.956-20 20s8.956 20 20 20h408.282c11.044 0 20-8.956 20-20zM736.172 916.030c0-11.044-8.956-20-20-20h-408.282c-11.044 0-20 8.956-20 20 0 11.046 8.956 20 20 20h408.282c11.044 0 20-8.954 20-20zM717.53 228c18.904 0 34.286 15.14 34.286 33.75v500.502c0 18.61-15.38 33.75-34.286 33.75h-411.43c-18.904 0-34.286-15.14-34.286-33.75v-500.502c0-18.61 15.38-33.75 34.286-33.75h411.43zM717.53 148h-411.43c-63.118 0-114.286 50.928-114.286 113.75v500.502c0 62.822 51.166 113.75 114.286 113.75h411.43c63.118 0 114.286-50.926 114.286-113.75v-500.502c-0.002-62.822-51.168-113.75-114.286-113.75v0zM680.036 511.53c0 22.090-17.91 40-40 40h-128.004c-5.384 0-10.508-1.078-15.196-3.006-0.124-0.048-0.254-0.086-0.376-0.132-0.61-0.262-1.188-0.57-1.782-0.86-0.572-0.276-1.16-0.528-1.718-0.828-0.204-0.112-0.39-0.246-0.594-0.364-0.918-0.514-1.832-1.050-2.704-1.64-0.086-0.058-0.164-0.128-0.254-0.188-10.492-7.21-17.382-19.284-17.382-32.98v-151.5c0-22.094 17.91-40 40.004-40 22.088 0 40 17.906 40 40v111.498h88c22.094-0.002 40.002 17.91 40.006 40z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M959.438 274.25c0-22.090-17.914-40-40.004-40-11.16 0-21.242 4.582-28.496 11.954l-60.152 60.148c-15.622 15.622-40.946 15.618-56.566-0.004l-56.57-56.566c-15.622-15.622-15.622-40.95 0-56.57l59.55-59.546c7.75-7.292 12.614-17.618 12.614-29.102 0-22.090-17.914-40-40.004-40-1.598 0-3.164 0.122-4.71 0.304-0.012 0-0.020-0.008-0.032-0.004-94.958 11.586-168.504 92.492-168.504 190.574 0 23.528 4.238 46.058 11.98 66.886l-503.078 503.074c-1.496 1.496-2.8 3.102-4.012 4.758-10.914 13.676-17.454 30.992-17.454 49.848 0 44.188 35.818 79.996 79.996 79.996 18.906 0 36.27-6.574 49.964-17.54 1.614-1.188 3.18-2.464 4.64-3.926l503.078-503.078c20.828 7.742 43.36 11.98 66.882 11.98 97.988 0 178.828-73.402 190.54-168.222v-0.012c0.2-1.628 0.338-3.272 0.338-4.952zM151.996 912c-22.090 0-40-17.906-40-40 0-22.090 17.91-40 40-40s40.004 17.91 40.004 40c0 22.094-17.914 40-40.004 40z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M704.010 511.988c0-12.332-5.038-21.358-15.042-26.992l-255.982-159.99c-10.344-6.666-21.178-6.998-32.51-1.008-10.988 5.984-16.492 15.312-16.492 28.002v320c0 12.69 5.504 22.018 16.492 28.002 5.332 2.678 10.516 3.996 15.506 3.996 6.668 0 12.334-1.644 17.004-4.98l255.982-160.014c10.004-5.69 15.042-14.684 15.042-26.992v-0.024zM960 511.988c0 31.99-0.164 56.98-0.488 75.032-0.334 17.99-1.754 40.738-4.27 68.25-2.516 27.504-6.262 52.058-11.27 73.742-5.332 24.338-16.84 44.85-34.504 61.496-17.64 16.63-38.306 26.308-61.96 28.988-73.992 8.342-185.824 12.526-335.508 12.526-149.668 0-261.5-4.184-335.5-12.526-23.662-2.656-44.414-12.302-62.242-28.988-17.834-16.678-29.412-37.182-34.744-61.496-4.672-21.684-8.258-46.238-10.756-73.742-2.508-27.512-3.928-50.26-4.254-68.25-0.342-18.050-0.504-43.042-0.504-75.032 0-31.998 0.162-57.010 0.504-75.008 0.326-18.022 1.746-40.768 4.254-68.28 2.498-27.474 6.262-52.082 11.252-73.744 5.34-24.336 16.842-44.842 34.504-61.496 17.648-16.654 38.324-26.332 61.986-29.010 74-8.312 185.832-12.472 335.5-12.472 149.684 0 261.516 4.16 335.508 12.472 23.654 2.678 44.406 12.356 62.232 29.010 17.826 16.678 29.422 37.16 34.73 61.496 4.702 21.662 8.256 46.27 10.772 73.744 2.516 27.512 3.936 50.258 4.27 68.28 0.324 17.998 0.488 43.010 0.488 75.008z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M220 670a316 316 0 0 1 0-450 316 316 0 0 1 450 0 316 316 0 0 1 0 450 316 316 0 0 1-450 0zm749 240L757 698a402 402 0 1 0-59 59l212 212a42 42 0 0 0 59-59zM487 604a42 42 0 0 1-84 0V487H286a42 42 0 1 1 0-84h117V286a42 42 0 1 1 84 0v117h117a42 42 0 0 1 0 84H487v117z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M757 698a402 402 0 1 0-59 59l212 212a42 42 0 0 0 59-59L757 698zM126 445a316 316 0 0 1 319-319 316 316 0 0 1 318 319 316 316 0 0 1-318 318 316 316 0 0 1-319-318zm160 42a42 42 0 1 1 0-84h318a42 42 0 0 1 0 84H286z"
-      />
-    </svg>
-  </div>
-  <div
-    class="emotion-2"
-  >
-    <svg
-      class="emotion-1"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-0"
-        d="M148 560a318 318 0 0 0 522 110 316 316 0 0 0 0-450 316 316 0 0 0-450 0c-11 11-21 22-30 34v4h47c25 0 46 21 46 46s-21 45-46 45H90c-13 0-25-6-33-14-9-9-14-20-14-33V156c0-25 20-45 45-45s45 20 45 45v32l1 1a401 401 0 0 1 623 509l212 212a42 42 0 0 1-59 59L698 757A401 401 0 0 1 65 570a42 42 0 0 1 83-10z"
-      />
-    </svg>
-  </div>
-</div>
-`;
diff --git a/lib/components/src/spaced/__snapshots__/Spaced.stories.storyshot b/lib/components/src/spaced/__snapshots__/Spaced.stories.storyshot
deleted file mode 100644
index 38ceb1d92beb..000000000000
--- a/lib/components/src/spaced/__snapshots__/Spaced.stories.storyshot
+++ /dev/null
@@ -1,249 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Basics|Spaced col 1`] = `
-.emotion-0 {
-  background: silver;
-  display: inline-block;
-  padding: 20px;
-}
-
-.emotion-4 {
-  display: inline-block;
-  vertical-align: inherit;
-}
-
-.emotion-4 > * {
-  margin-left: 10px;
-  vertical-align: inherit;
-}
-
-.emotion-4 > *:first-of-type {
-  margin-left: 0;
-}
-
-.emotion-1 {
-  background: hotpink;
-  display: inline-block;
-  padding: 20px;
-}
-
-<div>
-  <span
-    class="emotion-0"
-    color="silver"
-  />
-  <div
-    class="emotion-4"
-  >
-    <span
-      class="emotion-1"
-    />
-    <span
-      class="emotion-1"
-    />
-    <span
-      class="emotion-1"
-    />
-  </div>
-  <span
-    class="emotion-0"
-    color="silver"
-  />
-</div>
-`;
-
-exports[`Storyshots Basics|Spaced col outer 1`] = `
-.emotion-0 {
-  background: silver;
-  display: inline-block;
-  padding: 20px;
-}
-
-.emotion-1 {
-  background: hotpink;
-  display: inline-block;
-  padding: 20px;
-}
-
-.emotion-4 {
-  display: inline-block;
-  vertical-align: inherit;
-  margin-left: 10px;
-  margin-right: 10px;
-}
-
-.emotion-4 > * {
-  margin-left: 10px;
-  vertical-align: inherit;
-}
-
-.emotion-4 > *:first-of-type {
-  margin-left: 0;
-}
-
-<div>
-  <span
-    class="emotion-0"
-    color="silver"
-  />
-  <div
-    class="emotion-4"
-  >
-    <span
-      class="emotion-1"
-    />
-    <span
-      class="emotion-1"
-    />
-    <span
-      class="emotion-1"
-    />
-  </div>
-  <span
-    class="emotion-0"
-    color="silver"
-  />
-</div>
-`;
-
-exports[`Storyshots Basics|Spaced row 1`] = `
-.emotion-4 > * {
-  margin-top: 10px;
-}
-
-.emotion-4 > *:first-of-type {
-  margin-top: 0;
-}
-
-.emotion-0 {
-  background: silver;
-  padding: 20px;
-}
-
-.emotion-1 {
-  background: hotpink;
-  padding: 20px;
-}
-
-<div>
-  <div
-    class="emotion-0"
-    color="silver"
-  />
-  <div
-    class="emotion-4"
-  >
-    <div
-      class="emotion-1"
-    />
-    <div
-      class="emotion-1"
-    />
-    <div
-      class="emotion-1"
-    />
-  </div>
-  <div
-    class="emotion-0"
-    color="silver"
-  />
-</div>
-`;
-
-exports[`Storyshots Basics|Spaced row multiply 1`] = `
-.emotion-0 {
-  background: silver;
-  padding: 20px;
-}
-
-.emotion-1 {
-  background: hotpink;
-  padding: 20px;
-}
-
-.emotion-4 {
-  margin-top: 5px;
-  margin-bottom: 5px;
-}
-
-.emotion-4 > * {
-  margin-top: 30px;
-}
-
-.emotion-4 > *:first-of-type {
-  margin-top: 0;
-}
-
-<div>
-  <div
-    class="emotion-0"
-    color="silver"
-  />
-  <div
-    class="emotion-4"
-  >
-    <div
-      class="emotion-1"
-    />
-    <div
-      class="emotion-1"
-    />
-    <div
-      class="emotion-1"
-    />
-  </div>
-  <div
-    class="emotion-0"
-    color="silver"
-  />
-</div>
-`;
-
-exports[`Storyshots Basics|Spaced row outer 1`] = `
-.emotion-0 {
-  background: silver;
-  padding: 20px;
-}
-
-.emotion-1 {
-  background: hotpink;
-  padding: 20px;
-}
-
-.emotion-4 {
-  margin-top: 10px;
-  margin-bottom: 10px;
-}
-
-.emotion-4 > * {
-  margin-top: 10px;
-}
-
-.emotion-4 > *:first-of-type {
-  margin-top: 0;
-}
-
-<div>
-  <div
-    class="emotion-0"
-    color="silver"
-  />
-  <div
-    class="emotion-4"
-  >
-    <div
-      class="emotion-1"
-    />
-    <div
-      class="emotion-1"
-    />
-    <div
-      class="emotion-1"
-    />
-  </div>
-  <div
-    class="emotion-0"
-    color="silver"
-  />
-</div>
-`;
diff --git a/lib/components/src/syntaxhighlighter/__snapshots__/syntaxhighlighter.stories.storyshot b/lib/components/src/syntaxhighlighter/__snapshots__/syntaxhighlighter.stories.storyshot
deleted file mode 100644
index 946591470588..000000000000
--- a/lib/components/src/syntaxhighlighter/__snapshots__/syntaxhighlighter.stories.storyshot
+++ /dev/null
@@ -1,3974 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Basics|SyntaxHighlighter bash 1`] = `
-.emotion-2 {
-  overflow-y: auto;
-  height: 100%;
-  overflow-x: auto;
-  width: 100%;
-  position: relative;
-}
-
-.emotion-2 code {
-  padding-right: 10px;
-}
-
-.emotion-2 * .token {
-  font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
-  -webkit-font-smoothing: antialiased;
-}
-
-.emotion-2 * .token.comment {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-2 * .token.prolog {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-2 * .token.doctype {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-2 * .token.cdata {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-2 * .token.string {
-  color: #A31515;
-}
-
-.emotion-2 * .token.punctuation {
-  color: #393A34;
-}
-
-.emotion-2 * .token.operator {
-  color: #393A34;
-}
-
-.emotion-2 * .token.url {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.symbol {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.number {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.boolean {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.variable {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.constant {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.inserted {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.atrule {
-  color: #0000ff;
-}
-
-.emotion-2 * .token.keyword {
-  color: #0000ff;
-}
-
-.emotion-2 * .token.attr-value {
-  color: #0000ff;
-}
-
-.emotion-2 * .token.function {
-  color: #393A34;
-}
-
-.emotion-2 * .token.deleted {
-  color: #9a050f;
-}
-
-.emotion-2 * .token.important {
-  font-weight: bold;
-}
-
-.emotion-2 * .token.bold {
-  font-weight: bold;
-}
-
-.emotion-2 * .token.italic {
-  font-style: italic;
-}
-
-.emotion-2 * .token.class-name {
-  color: #2B91AF;
-}
-
-.emotion-2 * .token.tag {
-  color: #800000;
-}
-
-.emotion-2 * .token.selector {
-  color: #800000;
-}
-
-.emotion-2 * .token.attr-name {
-  color: #ff0000;
-}
-
-.emotion-2 * .token.property {
-  color: #ff0000;
-}
-
-.emotion-2 * .token.regex {
-  color: #ff0000;
-}
-
-.emotion-2 * .token.entity {
-  color: #ff0000;
-}
-
-.emotion-2 * .token.directive.tag .tag {
-  background: #ffff00;
-  color: #393A34;
-}
-
-.emotion-2 * .language-json .token.boolean {
-  color: #0000ff;
-}
-
-.emotion-2 * .language-json .token.number {
-  color: #0000ff;
-}
-
-.emotion-2 * .language-json .token.property {
-  color: #2B91AF;
-}
-
-.emotion-2 * .namespace {
-  opacity: 0.7;
-}
-
-.emotion-0 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  padding-right: 0;
-  opacity: 1;
-}
-
-.emotion-3 {
-  position: relative;
-  overflow: hidden;
-  color: #333333;
-}
-
-.emotion-1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  margin: 0;
-  padding: 0;
-}
-
-<div
-  class="emotion-3"
->
-  <div
-    class="emotion-2"
-    data-simplebar="true"
-  >
-    <div
-      class="simplebar-wrapper"
-    >
-      <div
-        class="simplebar-height-auto-observer-wrapper"
-      >
-        <div
-          class="simplebar-height-auto-observer"
-        />
-      </div>
-      <div
-        class="simplebar-mask"
-      >
-        <div
-          class="simplebar-offset"
-        >
-          <div
-            class="simplebar-content-wrapper"
-          >
-            <div
-              class="simplebar-content"
-            >
-              <pre
-                class="hljs emotion-1"
-              >
-                <code
-                  class="emotion-0"
-                >
-                  npx npm-check-updates 
-                  <span
-                    class="token string"
-                  >
-                    '/storybook/'
-                  </span>
-                   -u 
-                  <span
-                    class="token operator"
-                  >
-                    &&
-                  </span>
-                   
-                  <span
-                    class="token function"
-                  >
-                    npm
-                  </span>
-                   
-                  <span
-                    class="token function"
-                  >
-                    install
-                  </span>
-                </code>
-              </pre>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="simplebar-placeholder"
-      />
-    </div>
-    <div
-      class="simplebar-track simplebar-horizontal"
-    >
-      <div
-        class="simplebar-scrollbar"
-      />
-    </div>
-    <div
-      class="simplebar-track simplebar-vertical"
-    >
-      <div
-        class="simplebar-scrollbar"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Basics|SyntaxHighlighter bordered & copy-able 1`] = `
-.emotion-5 {
-  position: relative;
-  overflow: hidden;
-  color: #333333;
-  border: 1px solid rgba(0,0,0,.1);
-  background: #FFFFFF;
-}
-
-.emotion-2 {
-  overflow-y: auto;
-  height: 100%;
-  overflow-x: auto;
-  width: 100%;
-  position: relative;
-}
-
-.emotion-2 code {
-  padding-right: 10px;
-}
-
-.emotion-2 * .token {
-  font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
-  -webkit-font-smoothing: antialiased;
-}
-
-.emotion-2 * .token.comment {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-2 * .token.prolog {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-2 * .token.doctype {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-2 * .token.cdata {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-2 * .token.string {
-  color: #A31515;
-}
-
-.emotion-2 * .token.punctuation {
-  color: #393A34;
-}
-
-.emotion-2 * .token.operator {
-  color: #393A34;
-}
-
-.emotion-2 * .token.url {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.symbol {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.number {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.boolean {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.variable {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.constant {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.inserted {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.atrule {
-  color: #0000ff;
-}
-
-.emotion-2 * .token.keyword {
-  color: #0000ff;
-}
-
-.emotion-2 * .token.attr-value {
-  color: #0000ff;
-}
-
-.emotion-2 * .token.function {
-  color: #393A34;
-}
-
-.emotion-2 * .token.deleted {
-  color: #9a050f;
-}
-
-.emotion-2 * .token.important {
-  font-weight: bold;
-}
-
-.emotion-2 * .token.bold {
-  font-weight: bold;
-}
-
-.emotion-2 * .token.italic {
-  font-style: italic;
-}
-
-.emotion-2 * .token.class-name {
-  color: #2B91AF;
-}
-
-.emotion-2 * .token.tag {
-  color: #800000;
-}
-
-.emotion-2 * .token.selector {
-  color: #800000;
-}
-
-.emotion-2 * .token.attr-name {
-  color: #ff0000;
-}
-
-.emotion-2 * .token.property {
-  color: #ff0000;
-}
-
-.emotion-2 * .token.regex {
-  color: #ff0000;
-}
-
-.emotion-2 * .token.entity {
-  color: #ff0000;
-}
-
-.emotion-2 * .token.directive.tag .tag {
-  background: #ffff00;
-  color: #393A34;
-}
-
-.emotion-2 * .language-json .token.boolean {
-  color: #0000ff;
-}
-
-.emotion-2 * .language-json .token.number {
-  color: #0000ff;
-}
-
-.emotion-2 * .language-json .token.property {
-  color: #2B91AF;
-}
-
-.emotion-2 * .namespace {
-  opacity: 0.7;
-}
-
-.emotion-1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  margin: 0;
-  padding: 10px;
-}
-
-.emotion-0 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  padding-right: 0;
-  opacity: 1;
-}
-
-.emotion-4 {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  max-width: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  background: #FFFFFF;
-  z-index: 1;
-}
-
-.emotion-3 {
-  border: 0 none;
-  padding: 4px 10px;
-  cursor: pointer;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  color: #333333;
-  background: #FFFFFF;
-  font-size: 12px;
-  line-height: 16px;
-  font-weight: 700;
-  border-top: 1px solid rgba(0,0,0,.1);
-  border-left: 1px solid rgba(0,0,0,.1);
-  margin-left: -1px;
-  border-radius: 4px 0 0 0;
-}
-
-.emotion-3:not(:last-child) {
-  border-right: 1px solid rgba(0,0,0,.1);
-}
-
-.emotion-3 + * {
-  border-left: 1px solid rgba(0,0,0,.1);
-  border-radius: 0;
-}
-
-.emotion-3:focus {
-  box-shadow: #1EA7FD 0 -3px 0 0 inset;
-  outline: 0 none;
-}
-
-<div
-  class="emotion-5"
->
-  <div
-    class="emotion-2"
-    data-simplebar="true"
-  >
-    <div
-      class="simplebar-wrapper"
-    >
-      <div
-        class="simplebar-height-auto-observer-wrapper"
-      >
-        <div
-          class="simplebar-height-auto-observer"
-        />
-      </div>
-      <div
-        class="simplebar-mask"
-      >
-        <div
-          class="simplebar-offset"
-        >
-          <div
-            class="simplebar-content-wrapper"
-          >
-            <div
-              class="simplebar-content"
-            >
-              <pre
-                class="hljs emotion-1"
-              >
-                <code
-                  class="emotion-0"
-                >
-                  <span
-                    class="token keyword"
-                  >
-                    import
-                  </span>
-                   
-                  <span
-                    class="token punctuation"
-                  >
-                    {
-                  </span>
-                   Good
-                  <span
-                    class="token punctuation"
-                  >
-                    ,
-                  </span>
-                   Things 
-                  <span
-                    class="token punctuation"
-                  >
-                    }
-                  </span>
-                   
-                  <span
-                    class="token keyword"
-                  >
-                    from
-                  </span>
-                   
-                  <span
-                    class="token string"
-                  >
-                    'life'
-                  </span>
-                  <span
-                    class="token punctuation"
-                  >
-                    ;
-                  </span>
-                  
-
-
-                  <span
-                    class="token keyword"
-                  >
-                    const
-                  </span>
-                   
-                  <span
-                    class="token function-variable function"
-                  >
-                    result
-                  </span>
-                   
-                  <span
-                    class="token operator"
-                  >
-                    =
-                  </span>
-                   
-                  <span
-                    class="token punctuation"
-                  >
-                    (
-                  </span>
-                  <span
-                    class="token punctuation"
-                  >
-                    )
-                  </span>
-                   
-                  <span
-                    class="token operator"
-                  >
-                    =&gt;
-                  </span>
-                   
-                  <span
-                    class="token tag"
-                  >
-                    <span
-                      class="token tag"
-                    >
-                      <span
-                        class="token punctuation"
-                      >
-                        &lt;
-                      </span>
-                      <span
-                        class="token class-name"
-                      >
-                        Good
-                      </span>
-                    </span>
-                    <span
-                      class="token punctuation"
-                    >
-                      &gt;
-                    </span>
-                  </span>
-                  <span
-                    class="token tag"
-                  >
-                    <span
-                      class="token tag"
-                    >
-                      <span
-                        class="token punctuation"
-                      >
-                        &lt;
-                      </span>
-                      <span
-                        class="token class-name"
-                      >
-                        Things
-                      </span>
-                    </span>
-                     
-                    <span
-                      class="token punctuation"
-                    >
-                      /&gt;
-                    </span>
-                  </span>
-                  <span
-                    class="token tag"
-                  >
-                    <span
-                      class="token tag"
-                    >
-                      <span
-                        class="token punctuation"
-                      >
-                        &lt;/
-                      </span>
-                      <span
-                        class="token class-name"
-                      >
-                        Good
-                      </span>
-                    </span>
-                    <span
-                      class="token punctuation"
-                    >
-                      &gt;
-                    </span>
-                  </span>
-                  <span
-                    class="token punctuation"
-                  >
-                    ;
-                  </span>
-                  
-
-
-                  <span
-                    class="token keyword"
-                  >
-                    export
-                  </span>
-                   
-                  <span
-                    class="token punctuation"
-                  >
-                    {
-                  </span>
-                   result 
-                  <span
-                    class="token keyword"
-                  >
-                    as
-                  </span>
-                   
-                  <span
-                    class="token keyword"
-                  >
-                    default
-                  </span>
-                   
-                  <span
-                    class="token punctuation"
-                  >
-                    }
-                  </span>
-                  <span
-                    class="token punctuation"
-                  >
-                    ;
-                  </span>
-                </code>
-              </pre>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="simplebar-placeholder"
-      />
-    </div>
-    <div
-      class="simplebar-track simplebar-horizontal"
-    >
-      <div
-        class="simplebar-scrollbar"
-      />
-    </div>
-    <div
-      class="simplebar-track simplebar-vertical"
-    >
-      <div
-        class="simplebar-scrollbar"
-      />
-    </div>
-  </div>
-  <div
-    class="emotion-4"
-  >
-    <button
-      class="emotion-3"
-    >
-      Copy
-    </button>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Basics|SyntaxHighlighter dark unsupported 1`] = `
-.emotion-1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  margin: 0;
-  padding: 10px;
-}
-
-.emotion-0 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  padding-right: 0;
-  opacity: 1;
-}
-
-.emotion-2 {
-  overflow-y: auto;
-  height: 100%;
-  overflow-x: auto;
-  width: 100%;
-  position: relative;
-}
-
-.emotion-2 code {
-  padding-right: 10px;
-}
-
-.emotion-2 * .token {
-  font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
-  -webkit-font-smoothing: antialiased;
-}
-
-.emotion-2 * .token.comment {
-  color: #7C7C7C;
-  font-style: italic;
-}
-
-.emotion-2 * .token.prolog {
-  color: #7C7C7C;
-  font-style: italic;
-}
-
-.emotion-2 * .token.doctype {
-  color: #7C7C7C;
-  font-style: italic;
-}
-
-.emotion-2 * .token.cdata {
-  color: #7C7C7C;
-  font-style: italic;
-}
-
-.emotion-2 * .token.string {
-  color: #92C379;
-}
-
-.emotion-2 * .token.punctuation {
-  color: #EDEDED;
-}
-
-.emotion-2 * .token.operator {
-  color: #EDEDED;
-}
-
-.emotion-2 * .token.url {
-  color: #C6C5FE;
-}
-
-.emotion-2 * .token.symbol {
-  color: #C6C5FE;
-}
-
-.emotion-2 * .token.number {
-  color: #C6C5FE;
-}
-
-.emotion-2 * .token.boolean {
-  color: #C6C5FE;
-}
-
-.emotion-2 * .token.variable {
-  color: #C6C5FE;
-}
-
-.emotion-2 * .token.constant {
-  color: #C6C5FE;
-}
-
-.emotion-2 * .token.inserted {
-  color: #C6C5FE;
-}
-
-.emotion-2 * .token.atrule {
-  color: #B474DD;
-}
-
-.emotion-2 * .token.keyword {
-  color: #B474DD;
-}
-
-.emotion-2 * .token.attr-value {
-  color: #B474DD;
-}
-
-.emotion-2 * .token.function {
-  color: #EDEDED;
-}
-
-.emotion-2 * .token.deleted {
-  color: #9a050f;
-}
-
-.emotion-2 * .token.important {
-  font-weight: bold;
-}
-
-.emotion-2 * .token.bold {
-  font-weight: bold;
-}
-
-.emotion-2 * .token.italic {
-  font-style: italic;
-}
-
-.emotion-2 * .token.class-name {
-  color: #FFFFB6;
-}
-
-.emotion-2 * .token.tag {
-  color: #A8FF60;
-}
-
-.emotion-2 * .token.selector {
-  color: #A8FF60;
-}
-
-.emotion-2 * .token.attr-name {
-  color: #96CBFE;
-}
-
-.emotion-2 * .token.property {
-  color: #96CBFE;
-}
-
-.emotion-2 * .token.regex {
-  color: #96CBFE;
-}
-
-.emotion-2 * .token.entity {
-  color: #96CBFE;
-}
-
-.emotion-2 * .token.directive.tag .tag {
-  background: #ffff00;
-  color: #EDEDED;
-}
-
-.emotion-2 * .language-json .token.boolean {
-  color: #B474DD;
-}
-
-.emotion-2 * .language-json .token.number {
-  color: #B474DD;
-}
-
-.emotion-2 * .language-json .token.property {
-  color: #FFFFB6;
-}
-
-.emotion-2 * .namespace {
-  opacity: 0.7;
-}
-
-.emotion-4 {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  max-width: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  background: #333;
-  z-index: 1;
-}
-
-.emotion-3 {
-  border: 0 none;
-  padding: 4px 10px;
-  cursor: pointer;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  color: #FFFFFF;
-  background: #333;
-  font-size: 12px;
-  line-height: 16px;
-  font-weight: 700;
-  border-top: 1px solid rgba(255,255,255,.1);
-  border-left: 1px solid rgba(255,255,255,.1);
-  margin-left: -1px;
-  border-radius: 4px 0 0 0;
-}
-
-.emotion-3:not(:last-child) {
-  border-right: 1px solid rgba(255,255,255,.1);
-}
-
-.emotion-3 + * {
-  border-left: 1px solid rgba(255,255,255,.1);
-  border-radius: 0;
-}
-
-.emotion-3:focus {
-  box-shadow: #1EA7FD 0 -3px 0 0 inset;
-  outline: 0 none;
-}
-
-.emotion-5 {
-  position: relative;
-  overflow: hidden;
-  color: #FFFFFF;
-  border: 1px solid rgba(255,255,255,.1);
-  background: #333333;
-}
-
-<div
-  class="emotion-5"
->
-  <div
-    class="emotion-2"
-    data-simplebar="true"
-  >
-    <div
-      class="simplebar-wrapper"
-    >
-      <div
-        class="simplebar-height-auto-observer-wrapper"
-      >
-        <div
-          class="simplebar-height-auto-observer"
-        />
-      </div>
-      <div
-        class="simplebar-mask"
-      >
-        <div
-          class="simplebar-offset"
-        >
-          <div
-            class="simplebar-content-wrapper"
-          >
-            <div
-              class="simplebar-content"
-            >
-              <pre
-                class="hljs emotion-1"
-              >
-                <code
-                  class="emotion-0"
-                >
-                  // A Hello World! program in C#.
-using System;
-namespace HelloWorld
-{
-  class Hello
-  {
-    static void Main()
-    {
-      Console.WriteLine("Hello World!");
-
-      // Keep the console window open in debug mode.
-      Console.WriteLine("Press any key to exit.");
-      Console.ReadKey();
-    }
-  }
-}
-                </code>
-              </pre>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="simplebar-placeholder"
-      />
-    </div>
-    <div
-      class="simplebar-track simplebar-horizontal"
-    >
-      <div
-        class="simplebar-scrollbar"
-      />
-    </div>
-    <div
-      class="simplebar-track simplebar-vertical"
-    >
-      <div
-        class="simplebar-scrollbar"
-      />
-    </div>
-  </div>
-  <div
-    class="emotion-4"
-  >
-    <button
-      class="emotion-3"
-    >
-      Copy
-    </button>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Basics|SyntaxHighlighter jsx 1`] = `
-.emotion-2 {
-  overflow-y: auto;
-  height: 100%;
-  overflow-x: auto;
-  width: 100%;
-  position: relative;
-}
-
-.emotion-2 code {
-  padding-right: 10px;
-}
-
-.emotion-2 * .token {
-  font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
-  -webkit-font-smoothing: antialiased;
-}
-
-.emotion-2 * .token.comment {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-2 * .token.prolog {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-2 * .token.doctype {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-2 * .token.cdata {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-2 * .token.string {
-  color: #A31515;
-}
-
-.emotion-2 * .token.punctuation {
-  color: #393A34;
-}
-
-.emotion-2 * .token.operator {
-  color: #393A34;
-}
-
-.emotion-2 * .token.url {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.symbol {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.number {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.boolean {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.variable {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.constant {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.inserted {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.atrule {
-  color: #0000ff;
-}
-
-.emotion-2 * .token.keyword {
-  color: #0000ff;
-}
-
-.emotion-2 * .token.attr-value {
-  color: #0000ff;
-}
-
-.emotion-2 * .token.function {
-  color: #393A34;
-}
-
-.emotion-2 * .token.deleted {
-  color: #9a050f;
-}
-
-.emotion-2 * .token.important {
-  font-weight: bold;
-}
-
-.emotion-2 * .token.bold {
-  font-weight: bold;
-}
-
-.emotion-2 * .token.italic {
-  font-style: italic;
-}
-
-.emotion-2 * .token.class-name {
-  color: #2B91AF;
-}
-
-.emotion-2 * .token.tag {
-  color: #800000;
-}
-
-.emotion-2 * .token.selector {
-  color: #800000;
-}
-
-.emotion-2 * .token.attr-name {
-  color: #ff0000;
-}
-
-.emotion-2 * .token.property {
-  color: #ff0000;
-}
-
-.emotion-2 * .token.regex {
-  color: #ff0000;
-}
-
-.emotion-2 * .token.entity {
-  color: #ff0000;
-}
-
-.emotion-2 * .token.directive.tag .tag {
-  background: #ffff00;
-  color: #393A34;
-}
-
-.emotion-2 * .language-json .token.boolean {
-  color: #0000ff;
-}
-
-.emotion-2 * .language-json .token.number {
-  color: #0000ff;
-}
-
-.emotion-2 * .language-json .token.property {
-  color: #2B91AF;
-}
-
-.emotion-2 * .namespace {
-  opacity: 0.7;
-}
-
-.emotion-0 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  padding-right: 0;
-  opacity: 1;
-}
-
-.emotion-3 {
-  position: relative;
-  overflow: hidden;
-  color: #333333;
-}
-
-.emotion-1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  margin: 0;
-  padding: 0;
-}
-
-<div
-  class="emotion-3"
->
-  <div
-    class="emotion-2"
-    data-simplebar="true"
-  >
-    <div
-      class="simplebar-wrapper"
-    >
-      <div
-        class="simplebar-height-auto-observer-wrapper"
-      >
-        <div
-          class="simplebar-height-auto-observer"
-        />
-      </div>
-      <div
-        class="simplebar-mask"
-      >
-        <div
-          class="simplebar-offset"
-        >
-          <div
-            class="simplebar-content-wrapper"
-          >
-            <div
-              class="simplebar-content"
-            >
-              <pre
-                class="hljs emotion-1"
-              >
-                <code
-                  class="emotion-0"
-                >
-                  <span
-                    class="token keyword"
-                  >
-                    import
-                  </span>
-                   
-                  <span
-                    class="token punctuation"
-                  >
-                    {
-                  </span>
-                   Good
-                  <span
-                    class="token punctuation"
-                  >
-                    ,
-                  </span>
-                   Things 
-                  <span
-                    class="token punctuation"
-                  >
-                    }
-                  </span>
-                   
-                  <span
-                    class="token keyword"
-                  >
-                    from
-                  </span>
-                   
-                  <span
-                    class="token string"
-                  >
-                    'life'
-                  </span>
-                  <span
-                    class="token punctuation"
-                  >
-                    ;
-                  </span>
-                  
-
-
-                  <span
-                    class="token keyword"
-                  >
-                    const
-                  </span>
-                   
-                  <span
-                    class="token function-variable function"
-                  >
-                    result
-                  </span>
-                   
-                  <span
-                    class="token operator"
-                  >
-                    =
-                  </span>
-                   
-                  <span
-                    class="token punctuation"
-                  >
-                    (
-                  </span>
-                  <span
-                    class="token punctuation"
-                  >
-                    )
-                  </span>
-                   
-                  <span
-                    class="token operator"
-                  >
-                    =&gt;
-                  </span>
-                   
-                  <span
-                    class="token tag"
-                  >
-                    <span
-                      class="token tag"
-                    >
-                      <span
-                        class="token punctuation"
-                      >
-                        &lt;
-                      </span>
-                      <span
-                        class="token class-name"
-                      >
-                        Good
-                      </span>
-                    </span>
-                    <span
-                      class="token punctuation"
-                    >
-                      &gt;
-                    </span>
-                  </span>
-                  <span
-                    class="token tag"
-                  >
-                    <span
-                      class="token tag"
-                    >
-                      <span
-                        class="token punctuation"
-                      >
-                        &lt;
-                      </span>
-                      <span
-                        class="token class-name"
-                      >
-                        Things
-                      </span>
-                    </span>
-                     
-                    <span
-                      class="token attr-name"
-                    >
-                      all
-                    </span>
-                    <span
-                      class="token script language-javascript"
-                    >
-                      <span
-                        class="token script-punctuation punctuation"
-                      >
-                        =
-                      </span>
-                      <span
-                        class="token punctuation"
-                      >
-                        {
-                      </span>
-                      <span
-                        class="token boolean"
-                      >
-                        true
-                      </span>
-                      <span
-                        class="token punctuation"
-                      >
-                        }
-                      </span>
-                    </span>
-                     
-                    <span
-                      class="token punctuation"
-                    >
-                      /&gt;
-                    </span>
-                  </span>
-                  <span
-                    class="token tag"
-                  >
-                    <span
-                      class="token tag"
-                    >
-                      <span
-                        class="token punctuation"
-                      >
-                        &lt;/
-                      </span>
-                      <span
-                        class="token class-name"
-                      >
-                        Good
-                      </span>
-                    </span>
-                    <span
-                      class="token punctuation"
-                    >
-                      &gt;
-                    </span>
-                  </span>
-                  <span
-                    class="token punctuation"
-                  >
-                    ;
-                  </span>
-                  
-
-
-                  <span
-                    class="token keyword"
-                  >
-                    export
-                  </span>
-                   
-                  <span
-                    class="token punctuation"
-                  >
-                    {
-                  </span>
-                   result 
-                  <span
-                    class="token keyword"
-                  >
-                    as
-                  </span>
-                   
-                  <span
-                    class="token keyword"
-                  >
-                    default
-                  </span>
-                   
-                  <span
-                    class="token punctuation"
-                  >
-                    }
-                  </span>
-                  <span
-                    class="token punctuation"
-                  >
-                    ;
-                  </span>
-                </code>
-              </pre>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="simplebar-placeholder"
-      />
-    </div>
-    <div
-      class="simplebar-track simplebar-horizontal"
-    >
-      <div
-        class="simplebar-scrollbar"
-      />
-    </div>
-    <div
-      class="simplebar-track simplebar-vertical"
-    >
-      <div
-        class="simplebar-scrollbar"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Basics|SyntaxHighlighter padded 1`] = `
-.emotion-2 {
-  overflow-y: auto;
-  height: 100%;
-  overflow-x: auto;
-  width: 100%;
-  position: relative;
-}
-
-.emotion-2 code {
-  padding-right: 10px;
-}
-
-.emotion-2 * .token {
-  font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
-  -webkit-font-smoothing: antialiased;
-}
-
-.emotion-2 * .token.comment {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-2 * .token.prolog {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-2 * .token.doctype {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-2 * .token.cdata {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-2 * .token.string {
-  color: #A31515;
-}
-
-.emotion-2 * .token.punctuation {
-  color: #393A34;
-}
-
-.emotion-2 * .token.operator {
-  color: #393A34;
-}
-
-.emotion-2 * .token.url {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.symbol {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.number {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.boolean {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.variable {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.constant {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.inserted {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.atrule {
-  color: #0000ff;
-}
-
-.emotion-2 * .token.keyword {
-  color: #0000ff;
-}
-
-.emotion-2 * .token.attr-value {
-  color: #0000ff;
-}
-
-.emotion-2 * .token.function {
-  color: #393A34;
-}
-
-.emotion-2 * .token.deleted {
-  color: #9a050f;
-}
-
-.emotion-2 * .token.important {
-  font-weight: bold;
-}
-
-.emotion-2 * .token.bold {
-  font-weight: bold;
-}
-
-.emotion-2 * .token.italic {
-  font-style: italic;
-}
-
-.emotion-2 * .token.class-name {
-  color: #2B91AF;
-}
-
-.emotion-2 * .token.tag {
-  color: #800000;
-}
-
-.emotion-2 * .token.selector {
-  color: #800000;
-}
-
-.emotion-2 * .token.attr-name {
-  color: #ff0000;
-}
-
-.emotion-2 * .token.property {
-  color: #ff0000;
-}
-
-.emotion-2 * .token.regex {
-  color: #ff0000;
-}
-
-.emotion-2 * .token.entity {
-  color: #ff0000;
-}
-
-.emotion-2 * .token.directive.tag .tag {
-  background: #ffff00;
-  color: #393A34;
-}
-
-.emotion-2 * .language-json .token.boolean {
-  color: #0000ff;
-}
-
-.emotion-2 * .language-json .token.number {
-  color: #0000ff;
-}
-
-.emotion-2 * .language-json .token.property {
-  color: #2B91AF;
-}
-
-.emotion-2 * .namespace {
-  opacity: 0.7;
-}
-
-.emotion-1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  margin: 0;
-  padding: 10px;
-}
-
-.emotion-0 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  padding-right: 0;
-  opacity: 1;
-}
-
-.emotion-3 {
-  position: relative;
-  overflow: hidden;
-  color: #333333;
-}
-
-<div
-  class="emotion-3"
->
-  <div
-    class="emotion-2"
-    data-simplebar="true"
-  >
-    <div
-      class="simplebar-wrapper"
-    >
-      <div
-        class="simplebar-height-auto-observer-wrapper"
-      >
-        <div
-          class="simplebar-height-auto-observer"
-        />
-      </div>
-      <div
-        class="simplebar-mask"
-      >
-        <div
-          class="simplebar-offset"
-        >
-          <div
-            class="simplebar-content-wrapper"
-          >
-            <div
-              class="simplebar-content"
-            >
-              <pre
-                class="hljs emotion-1"
-              >
-                <code
-                  class="emotion-0"
-                >
-                  <span
-                    class="token keyword"
-                  >
-                    import
-                  </span>
-                   
-                  <span
-                    class="token punctuation"
-                  >
-                    {
-                  </span>
-                   Good
-                  <span
-                    class="token punctuation"
-                  >
-                    ,
-                  </span>
-                   Things 
-                  <span
-                    class="token punctuation"
-                  >
-                    }
-                  </span>
-                   
-                  <span
-                    class="token keyword"
-                  >
-                    from
-                  </span>
-                   
-                  <span
-                    class="token string"
-                  >
-                    'life'
-                  </span>
-                  <span
-                    class="token punctuation"
-                  >
-                    ;
-                  </span>
-                  
-
-
-                  <span
-                    class="token keyword"
-                  >
-                    const
-                  </span>
-                   
-                  <span
-                    class="token function-variable function"
-                  >
-                    result
-                  </span>
-                   
-                  <span
-                    class="token operator"
-                  >
-                    =
-                  </span>
-                   
-                  <span
-                    class="token punctuation"
-                  >
-                    (
-                  </span>
-                  <span
-                    class="token punctuation"
-                  >
-                    )
-                  </span>
-                   
-                  <span
-                    class="token operator"
-                  >
-                    =&gt;
-                  </span>
-                   
-                  <span
-                    class="token tag"
-                  >
-                    <span
-                      class="token tag"
-                    >
-                      <span
-                        class="token punctuation"
-                      >
-                        &lt;
-                      </span>
-                      <span
-                        class="token class-name"
-                      >
-                        Good
-                      </span>
-                    </span>
-                    <span
-                      class="token punctuation"
-                    >
-                      &gt;
-                    </span>
-                  </span>
-                  <span
-                    class="token tag"
-                  >
-                    <span
-                      class="token tag"
-                    >
-                      <span
-                        class="token punctuation"
-                      >
-                        &lt;
-                      </span>
-                      <span
-                        class="token class-name"
-                      >
-                        Things
-                      </span>
-                    </span>
-                     
-                    <span
-                      class="token punctuation"
-                    >
-                      /&gt;
-                    </span>
-                  </span>
-                  <span
-                    class="token tag"
-                  >
-                    <span
-                      class="token tag"
-                    >
-                      <span
-                        class="token punctuation"
-                      >
-                        &lt;/
-                      </span>
-                      <span
-                        class="token class-name"
-                      >
-                        Good
-                      </span>
-                    </span>
-                    <span
-                      class="token punctuation"
-                    >
-                      &gt;
-                    </span>
-                  </span>
-                  <span
-                    class="token punctuation"
-                  >
-                    ;
-                  </span>
-                  
-
-
-                  <span
-                    class="token keyword"
-                  >
-                    export
-                  </span>
-                   
-                  <span
-                    class="token punctuation"
-                  >
-                    {
-                  </span>
-                   result 
-                  <span
-                    class="token keyword"
-                  >
-                    as
-                  </span>
-                   
-                  <span
-                    class="token keyword"
-                  >
-                    default
-                  </span>
-                   
-                  <span
-                    class="token punctuation"
-                  >
-                    }
-                  </span>
-                  <span
-                    class="token punctuation"
-                  >
-                    ;
-                  </span>
-                </code>
-              </pre>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="simplebar-placeholder"
-      />
-    </div>
-    <div
-      class="simplebar-track simplebar-horizontal"
-    >
-      <div
-        class="simplebar-scrollbar"
-      />
-    </div>
-    <div
-      class="simplebar-track simplebar-vertical"
-    >
-      <div
-        class="simplebar-scrollbar"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Basics|SyntaxHighlighter showLineNumbers 1`] = `
-.emotion-2 {
-  overflow-y: auto;
-  height: 100%;
-  overflow-x: auto;
-  width: 100%;
-  position: relative;
-}
-
-.emotion-2 code {
-  padding-right: 10px;
-}
-
-.emotion-2 * .token {
-  font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
-  -webkit-font-smoothing: antialiased;
-}
-
-.emotion-2 * .token.comment {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-2 * .token.prolog {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-2 * .token.doctype {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-2 * .token.cdata {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-2 * .token.string {
-  color: #A31515;
-}
-
-.emotion-2 * .token.punctuation {
-  color: #393A34;
-}
-
-.emotion-2 * .token.operator {
-  color: #393A34;
-}
-
-.emotion-2 * .token.url {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.symbol {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.number {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.boolean {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.variable {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.constant {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.inserted {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.atrule {
-  color: #0000ff;
-}
-
-.emotion-2 * .token.keyword {
-  color: #0000ff;
-}
-
-.emotion-2 * .token.attr-value {
-  color: #0000ff;
-}
-
-.emotion-2 * .token.function {
-  color: #393A34;
-}
-
-.emotion-2 * .token.deleted {
-  color: #9a050f;
-}
-
-.emotion-2 * .token.important {
-  font-weight: bold;
-}
-
-.emotion-2 * .token.bold {
-  font-weight: bold;
-}
-
-.emotion-2 * .token.italic {
-  font-style: italic;
-}
-
-.emotion-2 * .token.class-name {
-  color: #2B91AF;
-}
-
-.emotion-2 * .token.tag {
-  color: #800000;
-}
-
-.emotion-2 * .token.selector {
-  color: #800000;
-}
-
-.emotion-2 * .token.attr-name {
-  color: #ff0000;
-}
-
-.emotion-2 * .token.property {
-  color: #ff0000;
-}
-
-.emotion-2 * .token.regex {
-  color: #ff0000;
-}
-
-.emotion-2 * .token.entity {
-  color: #ff0000;
-}
-
-.emotion-2 * .token.directive.tag .tag {
-  background: #ffff00;
-  color: #393A34;
-}
-
-.emotion-2 * .language-json .token.boolean {
-  color: #0000ff;
-}
-
-.emotion-2 * .language-json .token.number {
-  color: #0000ff;
-}
-
-.emotion-2 * .language-json .token.property {
-  color: #2B91AF;
-}
-
-.emotion-2 * .namespace {
-  opacity: 0.7;
-}
-
-.emotion-0 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  padding-right: 0;
-  opacity: 1;
-}
-
-.emotion-3 {
-  position: relative;
-  overflow: hidden;
-  color: #333333;
-}
-
-.emotion-1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  margin: 0;
-  padding: 0;
-}
-
-<div
-  class="emotion-3"
->
-  <div
-    class="emotion-2"
-    data-simplebar="true"
-  >
-    <div
-      class="simplebar-wrapper"
-    >
-      <div
-        class="simplebar-height-auto-observer-wrapper"
-      >
-        <div
-          class="simplebar-height-auto-observer"
-        />
-      </div>
-      <div
-        class="simplebar-mask"
-      >
-        <div
-          class="simplebar-offset"
-        >
-          <div
-            class="simplebar-content-wrapper"
-          >
-            <div
-              class="simplebar-content"
-            >
-              <pre
-                class="hljs emotion-1"
-              >
-                <code>
-                  <span
-                    class="react-syntax-highlighter-line-number"
-                  >
-                    1
-
-                  </span>
-                  <span
-                    class="react-syntax-highlighter-line-number"
-                  >
-                    2
-
-                  </span>
-                  <span
-                    class="react-syntax-highlighter-line-number"
-                  >
-                    3
-
-                  </span>
-                  <span
-                    class="react-syntax-highlighter-line-number"
-                  >
-                    4
-
-                  </span>
-                  <span
-                    class="react-syntax-highlighter-line-number"
-                  >
-                    5
-
-                  </span>
-                </code>
-                <code
-                  class="emotion-0"
-                >
-                  <span
-                    class="token keyword"
-                  >
-                    import
-                  </span>
-                   
-                  <span
-                    class="token punctuation"
-                  >
-                    {
-                  </span>
-                   Good
-                  <span
-                    class="token punctuation"
-                  >
-                    ,
-                  </span>
-                   Things 
-                  <span
-                    class="token punctuation"
-                  >
-                    }
-                  </span>
-                   
-                  <span
-                    class="token keyword"
-                  >
-                    from
-                  </span>
-                   
-                  <span
-                    class="token string"
-                  >
-                    'life'
-                  </span>
-                  <span
-                    class="token punctuation"
-                  >
-                    ;
-                  </span>
-                  
-
-
-                  <span
-                    class="token keyword"
-                  >
-                    const
-                  </span>
-                   
-                  <span
-                    class="token function-variable function"
-                  >
-                    result
-                  </span>
-                   
-                  <span
-                    class="token operator"
-                  >
-                    =
-                  </span>
-                   
-                  <span
-                    class="token punctuation"
-                  >
-                    (
-                  </span>
-                  <span
-                    class="token punctuation"
-                  >
-                    )
-                  </span>
-                   
-                  <span
-                    class="token operator"
-                  >
-                    =&gt;
-                  </span>
-                   
-                  <span
-                    class="token tag"
-                  >
-                    <span
-                      class="token tag"
-                    >
-                      <span
-                        class="token punctuation"
-                      >
-                        &lt;
-                      </span>
-                      <span
-                        class="token class-name"
-                      >
-                        Good
-                      </span>
-                    </span>
-                    <span
-                      class="token punctuation"
-                    >
-                      &gt;
-                    </span>
-                  </span>
-                  <span
-                    class="token tag"
-                  >
-                    <span
-                      class="token tag"
-                    >
-                      <span
-                        class="token punctuation"
-                      >
-                        &lt;
-                      </span>
-                      <span
-                        class="token class-name"
-                      >
-                        Things
-                      </span>
-                    </span>
-                     
-                    <span
-                      class="token punctuation"
-                    >
-                      /&gt;
-                    </span>
-                  </span>
-                  <span
-                    class="token tag"
-                  >
-                    <span
-                      class="token tag"
-                    >
-                      <span
-                        class="token punctuation"
-                      >
-                        &lt;/
-                      </span>
-                      <span
-                        class="token class-name"
-                      >
-                        Good
-                      </span>
-                    </span>
-                    <span
-                      class="token punctuation"
-                    >
-                      &gt;
-                    </span>
-                  </span>
-                  <span
-                    class="token punctuation"
-                  >
-                    ;
-                  </span>
-                  
-
-
-                  <span
-                    class="token keyword"
-                  >
-                    export
-                  </span>
-                   
-                  <span
-                    class="token punctuation"
-                  >
-                    {
-                  </span>
-                   result 
-                  <span
-                    class="token keyword"
-                  >
-                    as
-                  </span>
-                   
-                  <span
-                    class="token keyword"
-                  >
-                    default
-                  </span>
-                   
-                  <span
-                    class="token punctuation"
-                  >
-                    }
-                  </span>
-                  <span
-                    class="token punctuation"
-                  >
-                    ;
-                  </span>
-                </code>
-              </pre>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="simplebar-placeholder"
-      />
-    </div>
-    <div
-      class="simplebar-track simplebar-horizontal"
-    >
-      <div
-        class="simplebar-scrollbar"
-      />
-    </div>
-    <div
-      class="simplebar-track simplebar-vertical"
-    >
-      <div
-        class="simplebar-scrollbar"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Basics|SyntaxHighlighter story 1`] = `
-.emotion-2 {
-  overflow-y: auto;
-  height: 100%;
-  overflow-x: auto;
-  width: 100%;
-  position: relative;
-}
-
-.emotion-2 code {
-  padding-right: 10px;
-}
-
-.emotion-2 * .token {
-  font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
-  -webkit-font-smoothing: antialiased;
-}
-
-.emotion-2 * .token.comment {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-2 * .token.prolog {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-2 * .token.doctype {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-2 * .token.cdata {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-2 * .token.string {
-  color: #A31515;
-}
-
-.emotion-2 * .token.punctuation {
-  color: #393A34;
-}
-
-.emotion-2 * .token.operator {
-  color: #393A34;
-}
-
-.emotion-2 * .token.url {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.symbol {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.number {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.boolean {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.variable {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.constant {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.inserted {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.atrule {
-  color: #0000ff;
-}
-
-.emotion-2 * .token.keyword {
-  color: #0000ff;
-}
-
-.emotion-2 * .token.attr-value {
-  color: #0000ff;
-}
-
-.emotion-2 * .token.function {
-  color: #393A34;
-}
-
-.emotion-2 * .token.deleted {
-  color: #9a050f;
-}
-
-.emotion-2 * .token.important {
-  font-weight: bold;
-}
-
-.emotion-2 * .token.bold {
-  font-weight: bold;
-}
-
-.emotion-2 * .token.italic {
-  font-style: italic;
-}
-
-.emotion-2 * .token.class-name {
-  color: #2B91AF;
-}
-
-.emotion-2 * .token.tag {
-  color: #800000;
-}
-
-.emotion-2 * .token.selector {
-  color: #800000;
-}
-
-.emotion-2 * .token.attr-name {
-  color: #ff0000;
-}
-
-.emotion-2 * .token.property {
-  color: #ff0000;
-}
-
-.emotion-2 * .token.regex {
-  color: #ff0000;
-}
-
-.emotion-2 * .token.entity {
-  color: #ff0000;
-}
-
-.emotion-2 * .token.directive.tag .tag {
-  background: #ffff00;
-  color: #393A34;
-}
-
-.emotion-2 * .language-json .token.boolean {
-  color: #0000ff;
-}
-
-.emotion-2 * .language-json .token.number {
-  color: #0000ff;
-}
-
-.emotion-2 * .language-json .token.property {
-  color: #2B91AF;
-}
-
-.emotion-2 * .namespace {
-  opacity: 0.7;
-}
-
-.emotion-0 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  padding-right: 0;
-  opacity: 1;
-}
-
-.emotion-3 {
-  position: relative;
-  overflow: hidden;
-  color: #333333;
-}
-
-.emotion-1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  margin: 0;
-  padding: 0;
-}
-
-<div
-  class="emotion-3"
->
-  <div
-    class="emotion-2"
-    data-simplebar="true"
-  >
-    <div
-      class="simplebar-wrapper"
-    >
-      <div
-        class="simplebar-height-auto-observer-wrapper"
-      >
-        <div
-          class="simplebar-height-auto-observer"
-        />
-      </div>
-      <div
-        class="simplebar-mask"
-      >
-        <div
-          class="simplebar-offset"
-        >
-          <div
-            class="simplebar-content-wrapper"
-          >
-            <div
-              class="simplebar-content"
-            >
-              <pre
-                class="hljs emotion-1"
-              >
-                <code
-                  class="emotion-0"
-                >
-                  <span
-                    class="token keyword"
-                  >
-                    import
-                  </span>
-                   React 
-                  <span
-                    class="token keyword"
-                  >
-                    from
-                  </span>
-                   
-                  <span
-                    class="token string"
-                  >
-                    'react'
-                  </span>
-                  <span
-                    class="token punctuation"
-                  >
-                    ;
-                  </span>
-                  
-
-                  <span
-                    class="token keyword"
-                  >
-                    import
-                  </span>
-                   
-                  <span
-                    class="token punctuation"
-                  >
-                    {
-                  </span>
-                   storiesOf 
-                  <span
-                    class="token punctuation"
-                  >
-                    }
-                  </span>
-                   
-                  <span
-                    class="token keyword"
-                  >
-                    from
-                  </span>
-                   
-                  <span
-                    class="token string"
-                  >
-                    '@storybook/react'
-                  </span>
-                  <span
-                    class="token punctuation"
-                  >
-                    ;
-                  </span>
-                  
-
-                  <span
-                    class="token keyword"
-                  >
-                    import
-                  </span>
-                   
-                  <span
-                    class="token punctuation"
-                  >
-                    {
-                  </span>
-                   styled 
-                  <span
-                    class="token punctuation"
-                  >
-                    }
-                  </span>
-                   
-                  <span
-                    class="token keyword"
-                  >
-                    from
-                  </span>
-                   
-                  <span
-                    class="token string"
-                  >
-                    '@storybook/theming'
-                  </span>
-                  <span
-                    class="token punctuation"
-                  >
-                    ;
-                  </span>
-                  
-
-
-                  <span
-                    class="token keyword"
-                  >
-                    import
-                  </span>
-                   Heading 
-                  <span
-                    class="token keyword"
-                  >
-                    from
-                  </span>
-                   
-                  <span
-                    class="token string"
-                  >
-                    './heading'
-                  </span>
-                  <span
-                    class="token punctuation"
-                  >
-                    ;
-                  </span>
-                  
-
-
-                  <span
-                    class="token keyword"
-                  >
-                    const
-                  </span>
-                   Holder 
-                  <span
-                    class="token operator"
-                  >
-                    =
-                  </span>
-                   styled
-                  <span
-                    class="token punctuation"
-                  >
-                    .
-                  </span>
-                  <span
-                    class="token function"
-                  >
-                    div
-                  </span>
-                  <span
-                    class="token punctuation"
-                  >
-                    (
-                  </span>
-                  <span
-                    class="token punctuation"
-                  >
-                    {
-                  </span>
-                  
-  margin
-                  <span
-                    class="token punctuation"
-                  >
-                    :
-                  </span>
-                   
-                  <span
-                    class="token number"
-                  >
-                    10
-                  </span>
-                  <span
-                    class="token punctuation"
-                  >
-                    ,
-                  </span>
-                  
-  border
-                  <span
-                    class="token punctuation"
-                  >
-                    :
-                  </span>
-                   
-                  <span
-                    class="token string"
-                  >
-                    '1px dashed deepskyblue'
-                  </span>
-                  <span
-                    class="token punctuation"
-                  >
-                    ,
-                  </span>
-                  
-  
-                  <span
-                    class="token comment"
-                  >
-                    // overflow: 'hidden',
-                  </span>
-                  
-
-                  <span
-                    class="token punctuation"
-                  >
-                    }
-                  </span>
-                  <span
-                    class="token punctuation"
-                  >
-                    )
-                  </span>
-                  <span
-                    class="token punctuation"
-                  >
-                    ;
-                  </span>
-                  
-
-
-                  <span
-                    class="token function"
-                  >
-                    storiesOf
-                  </span>
-                  <span
-                    class="token punctuation"
-                  >
-                    (
-                  </span>
-                  <span
-                    class="token string"
-                  >
-                    'Basics|Heading'
-                  </span>
-                  <span
-                    class="token punctuation"
-                  >
-                    ,
-                  </span>
-                   module
-                  <span
-                    class="token punctuation"
-                  >
-                    )
-                  </span>
-                  <span
-                    class="token punctuation"
-                  >
-                    .
-                  </span>
-                  <span
-                    class="token function"
-                  >
-                    add
-                  </span>
-                  <span
-                    class="token punctuation"
-                  >
-                    (
-                  </span>
-                  <span
-                    class="token string"
-                  >
-                    'types'
-                  </span>
-                  <span
-                    class="token punctuation"
-                  >
-                    ,
-                  </span>
-                   
-                  <span
-                    class="token punctuation"
-                  >
-                    (
-                  </span>
-                  <span
-                    class="token punctuation"
-                  >
-                    )
-                  </span>
-                   
-                  <span
-                    class="token operator"
-                  >
-                    =&gt;
-                  </span>
-                   
-                  <span
-                    class="token punctuation"
-                  >
-                    (
-                  </span>
-                  
-  
-                  <span
-                    class="token tag"
-                  >
-                    <span
-                      class="token tag"
-                    >
-                      <span
-                        class="token punctuation"
-                      >
-                        &lt;
-                      </span>
-                      div
-                    </span>
-                    <span
-                      class="token punctuation"
-                    >
-                      &gt;
-                    </span>
-                  </span>
-                  <span
-                    class="token plain-text"
-                  >
-                    
-    
-                  </span>
-                  <span
-                    class="token tag"
-                  >
-                    <span
-                      class="token tag"
-                    >
-                      <span
-                        class="token punctuation"
-                      >
-                        &lt;
-                      </span>
-                      <span
-                        class="token class-name"
-                      >
-                        Holder
-                      </span>
-                    </span>
-                    <span
-                      class="token punctuation"
-                    >
-                      &gt;
-                    </span>
-                  </span>
-                  <span
-                    class="token plain-text"
-                  >
-                    
-      
-                  </span>
-                  <span
-                    class="token tag"
-                  >
-                    <span
-                      class="token tag"
-                    >
-                      <span
-                        class="token punctuation"
-                      >
-                        &lt;
-                      </span>
-                      <span
-                        class="token class-name"
-                      >
-                        Heading
-                      </span>
-                    </span>
-                    <span
-                      class="token punctuation"
-                    >
-                      &gt;
-                    </span>
-                  </span>
-                  <span
-                    class="token plain-text"
-                  >
-                    DEFAULT WITH ALL CAPS
-                  </span>
-                  <span
-                    class="token tag"
-                  >
-                    <span
-                      class="token tag"
-                    >
-                      <span
-                        class="token punctuation"
-                      >
-                        &lt;/
-                      </span>
-                      <span
-                        class="token class-name"
-                      >
-                        Heading
-                      </span>
-                    </span>
-                    <span
-                      class="token punctuation"
-                    >
-                      &gt;
-                    </span>
-                  </span>
-                  <span
-                    class="token plain-text"
-                  >
-                    
-    
-                  </span>
-                  <span
-                    class="token tag"
-                  >
-                    <span
-                      class="token tag"
-                    >
-                      <span
-                        class="token punctuation"
-                      >
-                        &lt;/
-                      </span>
-                      <span
-                        class="token class-name"
-                      >
-                        Holder
-                      </span>
-                    </span>
-                    <span
-                      class="token punctuation"
-                    >
-                      &gt;
-                    </span>
-                  </span>
-                  <span
-                    class="token plain-text"
-                  >
-                    
-    
-                  </span>
-                  <span
-                    class="token tag"
-                  >
-                    <span
-                      class="token tag"
-                    >
-                      <span
-                        class="token punctuation"
-                      >
-                        &lt;
-                      </span>
-                      <span
-                        class="token class-name"
-                      >
-                        Holder
-                      </span>
-                    </span>
-                    <span
-                      class="token punctuation"
-                    >
-                      &gt;
-                    </span>
-                  </span>
-                  <span
-                    class="token plain-text"
-                  >
-                    
-      
-                  </span>
-                  <span
-                    class="token tag"
-                  >
-                    <span
-                      class="token tag"
-                    >
-                      <span
-                        class="token punctuation"
-                      >
-                        &lt;
-                      </span>
-                      <span
-                        class="token class-name"
-                      >
-                        Heading
-                      </span>
-                    </span>
-                     
-                    <span
-                      class="token attr-name"
-                    >
-                      sub
-                    </span>
-                    <span
-                      class="token attr-value"
-                    >
-                      <span
-                        class="token punctuation"
-                      >
-                        =
-                      </span>
-                      <span
-                        class="token punctuation"
-                      >
-                        "
-                      </span>
-                      With a great sub
-                      <span
-                        class="token punctuation"
-                      >
-                        "
-                      </span>
-                    </span>
-                    <span
-                      class="token punctuation"
-                    >
-                      &gt;
-                    </span>
-                  </span>
-                  <span
-                    class="token plain-text"
-                  >
-                    THIS LONG DEFAULT WITH ALL CAPS & SUB
-                  </span>
-                  <span
-                    class="token tag"
-                  >
-                    <span
-                      class="token tag"
-                    >
-                      <span
-                        class="token punctuation"
-                      >
-                        &lt;/
-                      </span>
-                      <span
-                        class="token class-name"
-                      >
-                        Heading
-                      </span>
-                    </span>
-                    <span
-                      class="token punctuation"
-                    >
-                      &gt;
-                    </span>
-                  </span>
-                  <span
-                    class="token plain-text"
-                  >
-                    
-    
-                  </span>
-                  <span
-                    class="token tag"
-                  >
-                    <span
-                      class="token tag"
-                    >
-                      <span
-                        class="token punctuation"
-                      >
-                        &lt;/
-                      </span>
-                      <span
-                        class="token class-name"
-                      >
-                        Holder
-                      </span>
-                    </span>
-                    <span
-                      class="token punctuation"
-                    >
-                      &gt;
-                    </span>
-                  </span>
-                  <span
-                    class="token plain-text"
-                  >
-                    
-    
-                  </span>
-                  <span
-                    class="token tag"
-                  >
-                    <span
-                      class="token tag"
-                    >
-                      <span
-                        class="token punctuation"
-                      >
-                        &lt;
-                      </span>
-                      <span
-                        class="token class-name"
-                      >
-                        Holder
-                      </span>
-                    </span>
-                    <span
-                      class="token punctuation"
-                    >
-                      &gt;
-                    </span>
-                  </span>
-                  <span
-                    class="token plain-text"
-                  >
-                    
-      
-                  </span>
-                  <span
-                    class="token tag"
-                  >
-                    <span
-                      class="token tag"
-                    >
-                      <span
-                        class="token punctuation"
-                      >
-                        &lt;
-                      </span>
-                      <span
-                        class="token class-name"
-                      >
-                        Heading
-                      </span>
-                    </span>
-                     
-                    <span
-                      class="token attr-name"
-                    >
-                      type
-                    </span>
-                    <span
-                      class="token attr-value"
-                    >
-                      <span
-                        class="token punctuation"
-                      >
-                        =
-                      </span>
-                      <span
-                        class="token punctuation"
-                      >
-                        "
-                      </span>
-                      page
-                      <span
-                        class="token punctuation"
-                      >
-                        "
-                      </span>
-                    </span>
-                    <span
-                      class="token punctuation"
-                    >
-                      &gt;
-                    </span>
-                  </span>
-                  <span
-                    class="token plain-text"
-                  >
-                    page type
-                  </span>
-                  <span
-                    class="token tag"
-                  >
-                    <span
-                      class="token tag"
-                    >
-                      <span
-                        class="token punctuation"
-                      >
-                        &lt;/
-                      </span>
-                      <span
-                        class="token class-name"
-                      >
-                        Heading
-                      </span>
-                    </span>
-                    <span
-                      class="token punctuation"
-                    >
-                      &gt;
-                    </span>
-                  </span>
-                  <span
-                    class="token plain-text"
-                  >
-                    
-    
-                  </span>
-                  <span
-                    class="token tag"
-                  >
-                    <span
-                      class="token tag"
-                    >
-                      <span
-                        class="token punctuation"
-                      >
-                        &lt;/
-                      </span>
-                      <span
-                        class="token class-name"
-                      >
-                        Holder
-                      </span>
-                    </span>
-                    <span
-                      class="token punctuation"
-                    >
-                      &gt;
-                    </span>
-                  </span>
-                  <span
-                    class="token plain-text"
-                  >
-                    
-    
-                  </span>
-                  <span
-                    class="token tag"
-                  >
-                    <span
-                      class="token tag"
-                    >
-                      <span
-                        class="token punctuation"
-                      >
-                        &lt;
-                      </span>
-                      <span
-                        class="token class-name"
-                      >
-                        Holder
-                      </span>
-                    </span>
-                    <span
-                      class="token punctuation"
-                    >
-                      &gt;
-                    </span>
-                  </span>
-                  <span
-                    class="token plain-text"
-                  >
-                    
-      
-                  </span>
-                  <span
-                    class="token tag"
-                  >
-                    <span
-                      class="token tag"
-                    >
-                      <span
-                        class="token punctuation"
-                      >
-                        &lt;
-                      </span>
-                      <span
-                        class="token class-name"
-                      >
-                        Heading
-                      </span>
-                    </span>
-                     
-                    <span
-                      class="token attr-name"
-                    >
-                      type
-                    </span>
-                    <span
-                      class="token attr-value"
-                    >
-                      <span
-                        class="token punctuation"
-                      >
-                        =
-                      </span>
-                      <span
-                        class="token punctuation"
-                      >
-                        "
-                      </span>
-                      page
-                      <span
-                        class="token punctuation"
-                      >
-                        "
-                      </span>
-                    </span>
-                     
-                    <span
-                      class="token attr-name"
-                    >
-                      sub
-                    </span>
-                    <span
-                      class="token attr-value"
-                    >
-                      <span
-                        class="token punctuation"
-                      >
-                        =
-                      </span>
-                      <span
-                        class="token punctuation"
-                      >
-                        "
-                      </span>
-                      With a sub
-                      <span
-                        class="token punctuation"
-                      >
-                        "
-                      </span>
-                    </span>
-                    <span
-                      class="token punctuation"
-                    >
-                      &gt;
-                    </span>
-                  </span>
-                  <span
-                    class="token plain-text"
-                  >
-                    
-        page type
-      
-                  </span>
-                  <span
-                    class="token tag"
-                  >
-                    <span
-                      class="token tag"
-                    >
-                      <span
-                        class="token punctuation"
-                      >
-                        &lt;/
-                      </span>
-                      <span
-                        class="token class-name"
-                      >
-                        Heading
-                      </span>
-                    </span>
-                    <span
-                      class="token punctuation"
-                    >
-                      &gt;
-                    </span>
-                  </span>
-                  <span
-                    class="token plain-text"
-                  >
-                    
-    
-                  </span>
-                  <span
-                    class="token tag"
-                  >
-                    <span
-                      class="token tag"
-                    >
-                      <span
-                        class="token punctuation"
-                      >
-                        &lt;/
-                      </span>
-                      <span
-                        class="token class-name"
-                      >
-                        Holder
-                      </span>
-                    </span>
-                    <span
-                      class="token punctuation"
-                    >
-                      &gt;
-                    </span>
-                  </span>
-                  <span
-                    class="token plain-text"
-                  >
-                    
-  
-                  </span>
-                  <span
-                    class="token tag"
-                  >
-                    <span
-                      class="token tag"
-                    >
-                      <span
-                        class="token punctuation"
-                      >
-                        &lt;/
-                      </span>
-                      div
-                    </span>
-                    <span
-                      class="token punctuation"
-                    >
-                      &gt;
-                    </span>
-                  </span>
-                  
-
-                  <span
-                    class="token punctuation"
-                  >
-                    )
-                  </span>
-                  <span
-                    class="token punctuation"
-                  >
-                    )
-                  </span>
-                  <span
-                    class="token punctuation"
-                  >
-                    ;
-                  </span>
-                </code>
-              </pre>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="simplebar-placeholder"
-      />
-    </div>
-    <div
-      class="simplebar-track simplebar-horizontal"
-    >
-      <div
-        class="simplebar-scrollbar"
-      />
-    </div>
-    <div
-      class="simplebar-track simplebar-vertical"
-    >
-      <div
-        class="simplebar-scrollbar"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Basics|SyntaxHighlighter unsupported 1`] = `
-.emotion-5 {
-  position: relative;
-  overflow: hidden;
-  color: #333333;
-  border: 1px solid rgba(0,0,0,.1);
-  background: #FFFFFF;
-}
-
-.emotion-2 {
-  overflow-y: auto;
-  height: 100%;
-  overflow-x: auto;
-  width: 100%;
-  position: relative;
-}
-
-.emotion-2 code {
-  padding-right: 10px;
-}
-
-.emotion-2 * .token {
-  font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
-  -webkit-font-smoothing: antialiased;
-}
-
-.emotion-2 * .token.comment {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-2 * .token.prolog {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-2 * .token.doctype {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-2 * .token.cdata {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-2 * .token.string {
-  color: #A31515;
-}
-
-.emotion-2 * .token.punctuation {
-  color: #393A34;
-}
-
-.emotion-2 * .token.operator {
-  color: #393A34;
-}
-
-.emotion-2 * .token.url {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.symbol {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.number {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.boolean {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.variable {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.constant {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.inserted {
-  color: #36acaa;
-}
-
-.emotion-2 * .token.atrule {
-  color: #0000ff;
-}
-
-.emotion-2 * .token.keyword {
-  color: #0000ff;
-}
-
-.emotion-2 * .token.attr-value {
-  color: #0000ff;
-}
-
-.emotion-2 * .token.function {
-  color: #393A34;
-}
-
-.emotion-2 * .token.deleted {
-  color: #9a050f;
-}
-
-.emotion-2 * .token.important {
-  font-weight: bold;
-}
-
-.emotion-2 * .token.bold {
-  font-weight: bold;
-}
-
-.emotion-2 * .token.italic {
-  font-style: italic;
-}
-
-.emotion-2 * .token.class-name {
-  color: #2B91AF;
-}
-
-.emotion-2 * .token.tag {
-  color: #800000;
-}
-
-.emotion-2 * .token.selector {
-  color: #800000;
-}
-
-.emotion-2 * .token.attr-name {
-  color: #ff0000;
-}
-
-.emotion-2 * .token.property {
-  color: #ff0000;
-}
-
-.emotion-2 * .token.regex {
-  color: #ff0000;
-}
-
-.emotion-2 * .token.entity {
-  color: #ff0000;
-}
-
-.emotion-2 * .token.directive.tag .tag {
-  background: #ffff00;
-  color: #393A34;
-}
-
-.emotion-2 * .language-json .token.boolean {
-  color: #0000ff;
-}
-
-.emotion-2 * .language-json .token.number {
-  color: #0000ff;
-}
-
-.emotion-2 * .language-json .token.property {
-  color: #2B91AF;
-}
-
-.emotion-2 * .namespace {
-  opacity: 0.7;
-}
-
-.emotion-1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  margin: 0;
-  padding: 10px;
-}
-
-.emotion-0 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  padding-right: 0;
-  opacity: 1;
-}
-
-.emotion-4 {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  max-width: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  background: #FFFFFF;
-  z-index: 1;
-}
-
-.emotion-3 {
-  border: 0 none;
-  padding: 4px 10px;
-  cursor: pointer;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  color: #333333;
-  background: #FFFFFF;
-  font-size: 12px;
-  line-height: 16px;
-  font-weight: 700;
-  border-top: 1px solid rgba(0,0,0,.1);
-  border-left: 1px solid rgba(0,0,0,.1);
-  margin-left: -1px;
-  border-radius: 4px 0 0 0;
-}
-
-.emotion-3:not(:last-child) {
-  border-right: 1px solid rgba(0,0,0,.1);
-}
-
-.emotion-3 + * {
-  border-left: 1px solid rgba(0,0,0,.1);
-  border-radius: 0;
-}
-
-.emotion-3:focus {
-  box-shadow: #1EA7FD 0 -3px 0 0 inset;
-  outline: 0 none;
-}
-
-<div
-  class="emotion-5"
->
-  <div
-    class="emotion-2"
-    data-simplebar="true"
-  >
-    <div
-      class="simplebar-wrapper"
-    >
-      <div
-        class="simplebar-height-auto-observer-wrapper"
-      >
-        <div
-          class="simplebar-height-auto-observer"
-        />
-      </div>
-      <div
-        class="simplebar-mask"
-      >
-        <div
-          class="simplebar-offset"
-        >
-          <div
-            class="simplebar-content-wrapper"
-          >
-            <div
-              class="simplebar-content"
-            >
-              <pre
-                class="hljs emotion-1"
-              >
-                <code
-                  class="emotion-0"
-                >
-                  // A Hello World! program in C#.
-using System;
-namespace HelloWorld
-{
-  class Hello
-  {
-    static void Main()
-    {
-      Console.WriteLine("Hello World!");
-
-      // Keep the console window open in debug mode.
-      Console.WriteLine("Press any key to exit.");
-      Console.ReadKey();
-    }
-  }
-}
-                </code>
-              </pre>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="simplebar-placeholder"
-      />
-    </div>
-    <div
-      class="simplebar-track simplebar-horizontal"
-    >
-      <div
-        class="simplebar-scrollbar"
-      />
-    </div>
-    <div
-      class="simplebar-track simplebar-vertical"
-    >
-      <div
-        class="simplebar-scrollbar"
-      />
-    </div>
-  </div>
-  <div
-    class="emotion-4"
-  >
-    <button
-      class="emotion-3"
-    >
-      Copy
-    </button>
-  </div>
-</div>
-`;
diff --git a/lib/components/src/tabs/__snapshots__/tabs.stories.storyshot b/lib/components/src/tabs/__snapshots__/tabs.stories.storyshot
deleted file mode 100644
index a936ac0a198e..000000000000
--- a/lib/components/src/tabs/__snapshots__/tabs.stories.storyshot
+++ /dev/null
@@ -1,2029 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Basics|Tabs stateful - dynamic 1`] = `
-.emotion-9 {
-  overflow-y: hidden;
-  overflow-x: auto;
-  width: 100%;
-  color: #999999;
-  width: 100%;
-  height: 40px;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  box-shadow: rgba(0,0,0,.1) 0 -1px 0 0 inset;
-  background: #FFFFFF;
-}
-
-.emotion-8 {
-  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;
-  position: relative;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  height: 40px;
-}
-
-.emotion-7 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  white-space: nowrap;
-  -webkit-flex-basis: auto;
-  -ms-flex-preferred-size: auto;
-  flex-basis: auto;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
-.emotion-7 > * {
-  margin-left: 15px;
-}
-
-.emotion-6 {
-  overflow: hidden;
-}
-
-.emotion-6:first-of-type {
-  margin-left: 0;
-}
-
-.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;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding: 0 15px;
-  text-transform: capitalize;
-  -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;
-  cursor: pointer;
-  background: transparent;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  font-weight: bold;
-  font-size: 13px;
-  color: inherit;
-  border-bottom-color: transparent;
-}
-
-.emotion-0:empty {
-  display: none;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #1EA7FD;
-}
-
-.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;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding: 0 15px;
-  text-transform: capitalize;
-  -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;
-  cursor: pointer;
-  background: transparent;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  font-weight: bold;
-  font-size: 13px;
-  color: #1EA7FD;
-  border-bottom-color: #1EA7FD;
-}
-
-.emotion-2:empty {
-  display: none;
-}
-
-.emotion-2:focus {
-  outline: 0 none;
-  border-bottom-color: #1EA7FD;
-}
-
-.emotion-12 {
-  display: block;
-}
-
-.emotion-11 {
-  display: block;
-  position: relative;
-  font-size: 13px;
-}
-
-.emotion-10 {
-  display: none;
-}
-
-<div
-  style="position:relative;height:calc(100vh - 20px);width:calc(100vw - 20px);margin:10px"
->
-  <div
-    class="emotion-12"
-  >
-    <div
-      class="emotion-9"
-      data-simplebar="true"
-    >
-      <div
-        class="simplebar-wrapper"
-      >
-        <div
-          class="simplebar-height-auto-observer-wrapper"
-        >
-          <div
-            class="simplebar-height-auto-observer"
-          />
-        </div>
-        <div
-          class="simplebar-mask"
-        >
-          <div
-            class="simplebar-offset"
-          >
-            <div
-              class="simplebar-content-wrapper"
-            >
-              <div
-                class="simplebar-content"
-              >
-                <div
-                  class="emotion-8"
-                >
-                  <div
-                    class="emotion-7"
-                  >
-                    <div
-                      class="emotion-6"
-                      role="tablist"
-                    >
-                      <button
-                        class="emotion-0"
-                        role="tab"
-                        type="button"
-                      >
-                        Tab title #1
-                      </button>
-                      <button
-                        class="emotion-0"
-                        role="tab"
-                        type="button"
-                      >
-                        Tab title #2
-                      </button>
-                      <button
-                        class="emotion-2"
-                        role="tab"
-                        type="button"
-                      >
-                        Tab with scroll!
-                      </button>
-                      <button
-                        class="emotion-0"
-                        role="tab"
-                        type="button"
-                      >
-                        Tab title #4
-                      </button>
-                      <button
-                        class="emotion-0"
-                        role="tab"
-                        type="button"
-                      >
-                        Tab title #5
-                      </button>
-                      <button
-                        class="emotion-0"
-                        role="tab"
-                        type="button"
-                      >
-                        Tab title #6
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="simplebar-placeholder"
-        />
-      </div>
-      <div
-        class="simplebar-track simplebar-horizontal"
-      >
-        <div
-          class="simplebar-scrollbar"
-        />
-      </div>
-      <div
-        class="simplebar-track simplebar-vertical"
-      >
-        <div
-          class="simplebar-scrollbar"
-        />
-      </div>
-    </div>
-    <div
-      class="emotion-11"
-    >
-      <div
-        id="test2"
-        style="background:hotpink;min-height:100%;display:none"
-      >
-        CONTENT 2
-      </div>
-      <div
-        id="test3"
-      >
-        <div
-          style="background:#000000;height:30.8px"
-        />
-        <div
-          style="background:#111111;height:31.3px"
-        />
-        <div
-          style="background:#222222;height:32.1px"
-        />
-        <div
-          style="background:#333333;height:33.4px"
-        />
-        <div
-          style="background:#444444;height:35.5px"
-        />
-        <div
-          style="background:#555555;height:38.9px"
-        />
-        <div
-          style="background:#666666;height:44.4px"
-        />
-        <div
-          style="background:#777777;height:53.3px"
-        />
-        <div
-          style="background:#888888;height:67.7px"
-        />
-        <div
-          style="background:#999999;height:91px"
-        />
-        <div
-          style="background:#aaaaaa;height:128.7px"
-        />
-        <div
-          style="background:#bbbbbb;height:189.7px"
-        />
-        <div
-          style="background:#cccccc;height:288.4px"
-        />
-        <div
-          style="background:#dddddd;height:448.1px"
-        />
-        <div
-          style="background:#eeeeee;height:706.5px"
-        />
-      </div>
-      <div
-        class="emotion-10"
-      >
-        <div>
-          CONTENT 6
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Basics|Tabs stateful - no initial 1`] = `
-.emotion-9 {
-  overflow-y: hidden;
-  overflow-x: auto;
-  width: 100%;
-  color: #999999;
-  width: 100%;
-  height: 40px;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  box-shadow: rgba(0,0,0,.1) 0 -1px 0 0 inset;
-  background: #FFFFFF;
-}
-
-.emotion-8 {
-  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;
-  position: relative;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  height: 40px;
-}
-
-.emotion-7 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  white-space: nowrap;
-  -webkit-flex-basis: auto;
-  -ms-flex-preferred-size: auto;
-  flex-basis: auto;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
-.emotion-7 > * {
-  margin-left: 15px;
-}
-
-.emotion-6 {
-  overflow: hidden;
-}
-
-.emotion-6:first-of-type {
-  margin-left: 0;
-}
-
-.emotion-1 {
-  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;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding: 0 15px;
-  text-transform: capitalize;
-  -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;
-  cursor: pointer;
-  background: transparent;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  font-weight: bold;
-  font-size: 13px;
-  color: inherit;
-  border-bottom-color: transparent;
-}
-
-.emotion-1:empty {
-  display: none;
-}
-
-.emotion-1:focus {
-  outline: 0 none;
-  border-bottom-color: #1EA7FD;
-}
-
-.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;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding: 0 15px;
-  text-transform: capitalize;
-  -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;
-  cursor: pointer;
-  background: transparent;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  font-weight: bold;
-  font-size: 13px;
-  color: #1EA7FD;
-  border-bottom-color: #1EA7FD;
-}
-
-.emotion-0:empty {
-  display: none;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #1EA7FD;
-}
-
-.emotion-12 {
-  display: block;
-}
-
-.emotion-11 {
-  display: block;
-  position: relative;
-  font-size: 13px;
-}
-
-.emotion-10 {
-  display: none;
-}
-
-<div
-  style="position:relative;height:calc(100vh - 20px);width:calc(100vw - 20px);margin:10px"
->
-  <div
-    class="emotion-12"
-  >
-    <div
-      class="emotion-9"
-      data-simplebar="true"
-    >
-      <div
-        class="simplebar-wrapper"
-      >
-        <div
-          class="simplebar-height-auto-observer-wrapper"
-        >
-          <div
-            class="simplebar-height-auto-observer"
-          />
-        </div>
-        <div
-          class="simplebar-mask"
-        >
-          <div
-            class="simplebar-offset"
-          >
-            <div
-              class="simplebar-content-wrapper"
-            >
-              <div
-                class="simplebar-content"
-              >
-                <div
-                  class="emotion-8"
-                >
-                  <div
-                    class="emotion-7"
-                  >
-                    <div
-                      class="emotion-6"
-                      role="tablist"
-                    >
-                      <button
-                        class="emotion-0"
-                        role="tab"
-                        type="button"
-                      >
-                        Tab title #1
-                      </button>
-                      <button
-                        class="emotion-1"
-                        role="tab"
-                        type="button"
-                      >
-                        Tab title #2
-                      </button>
-                      <button
-                        class="emotion-1"
-                        role="tab"
-                        type="button"
-                      >
-                        Tab with scroll!
-                      </button>
-                      <button
-                        class="emotion-1"
-                        role="tab"
-                        type="button"
-                      >
-                        Tab title #4
-                      </button>
-                      <button
-                        class="emotion-1"
-                        role="tab"
-                        type="button"
-                      >
-                        Tab title #5
-                      </button>
-                      <button
-                        class="emotion-1"
-                        role="tab"
-                        type="button"
-                      >
-                        Tab title #6
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="simplebar-placeholder"
-        />
-      </div>
-      <div
-        class="simplebar-track simplebar-horizontal"
-      >
-        <div
-          class="simplebar-scrollbar"
-        />
-      </div>
-      <div
-        class="simplebar-track simplebar-vertical"
-      >
-        <div
-          class="simplebar-scrollbar"
-        />
-      </div>
-    </div>
-    <div
-      class="emotion-11"
-    >
-      <div
-        id="test1"
-      >
-        CONTENT 1
-      </div>
-      <div
-        id="test2"
-        style="background:hotpink;min-height:100%;display:none"
-      >
-        CONTENT 2
-      </div>
-      <div
-        class="emotion-10"
-      >
-        <div>
-          CONTENT 6
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Basics|Tabs stateful - static 1`] = `
-.emotion-5 {
-  overflow-y: hidden;
-  overflow-x: auto;
-  width: 100%;
-  color: #999999;
-  width: 100%;
-  height: 40px;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  box-shadow: rgba(0,0,0,.1) 0 -1px 0 0 inset;
-  background: #FFFFFF;
-}
-
-.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;
-  position: relative;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  height: 40px;
-}
-
-.emotion-3 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  white-space: nowrap;
-  -webkit-flex-basis: auto;
-  -ms-flex-preferred-size: auto;
-  flex-basis: auto;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
-.emotion-3 > * {
-  margin-left: 15px;
-}
-
-.emotion-2 {
-  overflow: hidden;
-}
-
-.emotion-2:first-of-type {
-  margin-left: 0;
-}
-
-.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;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding: 0 15px;
-  text-transform: capitalize;
-  -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;
-  cursor: pointer;
-  background: transparent;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  font-weight: bold;
-  font-size: 13px;
-  color: inherit;
-  border-bottom-color: transparent;
-}
-
-.emotion-0:empty {
-  display: none;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #1EA7FD;
-}
-
-.emotion-1 {
-  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;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding: 0 15px;
-  text-transform: capitalize;
-  -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;
-  cursor: pointer;
-  background: transparent;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  font-weight: bold;
-  font-size: 13px;
-  color: #1EA7FD;
-  border-bottom-color: #1EA7FD;
-}
-
-.emotion-1:empty {
-  display: none;
-}
-
-.emotion-1:focus {
-  outline: 0 none;
-  border-bottom-color: #1EA7FD;
-}
-
-.emotion-6 {
-  display: block;
-}
-
-.emotion-7 {
-  display: block;
-  position: relative;
-  font-size: 13px;
-}
-
-<div
-  style="position:relative;height:calc(100vh - 20px);width:calc(100vw - 20px);margin:10px"
->
-  <div
-    class="emotion-6"
-  >
-    <div
-      class="emotion-5"
-      data-simplebar="true"
-    >
-      <div
-        class="simplebar-wrapper"
-      >
-        <div
-          class="simplebar-height-auto-observer-wrapper"
-        >
-          <div
-            class="simplebar-height-auto-observer"
-          />
-        </div>
-        <div
-          class="simplebar-mask"
-        >
-          <div
-            class="simplebar-offset"
-          >
-            <div
-              class="simplebar-content-wrapper"
-            >
-              <div
-                class="simplebar-content"
-              >
-                <div
-                  class="emotion-4"
-                >
-                  <div
-                    class="emotion-3"
-                  >
-                    <div
-                      class="emotion-2"
-                      role="tablist"
-                    >
-                      <button
-                        class="emotion-0"
-                        role="tab"
-                        type="button"
-                      >
-                        With a function
-                      </button>
-                      <button
-                        class="emotion-1"
-                        role="tab"
-                        type="button"
-                      >
-                        With markup
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="simplebar-placeholder"
-        />
-      </div>
-      <div
-        class="simplebar-track simplebar-horizontal"
-      >
-        <div
-          class="simplebar-scrollbar"
-        />
-      </div>
-      <div
-        class="simplebar-track simplebar-vertical"
-      >
-        <div
-          class="simplebar-scrollbar"
-        />
-      </div>
-    </div>
-    <div
-      class="emotion-7"
-    >
-      <div
-        class="emotion-6"
-        role="tabpanel"
-      >
-        <div>
-          test2 is always active (but visually hidden)
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Basics|Tabs stateless - absolute 1`] = `
-.emotion-9 {
-  overflow-y: hidden;
-  overflow-x: auto;
-  width: 100%;
-  color: #999999;
-  width: 100%;
-  height: 40px;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  box-shadow: rgba(0,0,0,.1) 0 -1px 0 0 inset;
-  background: #FFFFFF;
-}
-
-.emotion-8 {
-  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;
-  position: relative;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  height: 40px;
-}
-
-.emotion-7 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  white-space: nowrap;
-  -webkit-flex-basis: auto;
-  -ms-flex-preferred-size: auto;
-  flex-basis: auto;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
-.emotion-7 > * {
-  margin-left: 15px;
-}
-
-.emotion-6 {
-  overflow: hidden;
-}
-
-.emotion-6:first-of-type {
-  margin-left: 0;
-}
-
-.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;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding: 0 15px;
-  text-transform: capitalize;
-  -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;
-  cursor: pointer;
-  background: transparent;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  font-weight: bold;
-  font-size: 13px;
-  color: inherit;
-  border-bottom-color: transparent;
-}
-
-.emotion-0:empty {
-  display: none;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #1EA7FD;
-}
-
-.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;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding: 0 15px;
-  text-transform: capitalize;
-  -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;
-  cursor: pointer;
-  background: transparent;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  font-weight: bold;
-  font-size: 13px;
-  color: #1EA7FD;
-  border-bottom-color: #1EA7FD;
-}
-
-.emotion-2:empty {
-  display: none;
-}
-
-.emotion-2:focus {
-  outline: 0 none;
-  border-bottom-color: #1EA7FD;
-}
-
-.emotion-11 {
-  display: block;
-  position: relative;
-  font-size: 13px;
-  height: calc(100% - 40px);
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 40px;
-  overflow: auto;
-}
-
-.emotion-11 > *:first-child {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  height: 100%;
-  overflow: auto;
-}
-
-.emotion-10 {
-  display: none;
-}
-
-.emotion-12 {
-  background-clip: padding-box;
-  border: 1px solid rgba(0,0,0,.1);
-  border-radius: 4px;
-  overflow: hidden;
-  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;
-}
-
-<div
-  style="position:relative;height:calc(100vh - 20px);width:calc(100vw - 20px);margin:10px"
->
-  <div
-    class="emotion-12"
-  >
-    <div
-      class="emotion-9"
-      data-simplebar="true"
-    >
-      <div
-        class="simplebar-wrapper"
-      >
-        <div
-          class="simplebar-height-auto-observer-wrapper"
-        >
-          <div
-            class="simplebar-height-auto-observer"
-          />
-        </div>
-        <div
-          class="simplebar-mask"
-        >
-          <div
-            class="simplebar-offset"
-          >
-            <div
-              class="simplebar-content-wrapper"
-            >
-              <div
-                class="simplebar-content"
-              >
-                <div
-                  class="emotion-8"
-                >
-                  <div
-                    class="emotion-7"
-                  >
-                    <div
-                      class="emotion-6"
-                      role="tablist"
-                    >
-                      <button
-                        class="emotion-0"
-                        role="tab"
-                        type="button"
-                      >
-                        Tab title #1
-                      </button>
-                      <button
-                        class="emotion-0"
-                        role="tab"
-                        type="button"
-                      >
-                        Tab title #2
-                      </button>
-                      <button
-                        class="emotion-2"
-                        role="tab"
-                        type="button"
-                      >
-                        Tab with scroll!
-                      </button>
-                      <button
-                        class="emotion-0"
-                        role="tab"
-                        type="button"
-                      >
-                        Tab title #4
-                      </button>
-                      <button
-                        class="emotion-0"
-                        role="tab"
-                        type="button"
-                      >
-                        Tab title #5
-                      </button>
-                      <button
-                        class="emotion-0"
-                        role="tab"
-                        type="button"
-                      >
-                        Tab title #6
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="simplebar-placeholder"
-        />
-      </div>
-      <div
-        class="simplebar-track simplebar-horizontal"
-      >
-        <div
-          class="simplebar-scrollbar"
-        />
-      </div>
-      <div
-        class="simplebar-track simplebar-vertical"
-      >
-        <div
-          class="simplebar-scrollbar"
-        />
-      </div>
-    </div>
-    <div
-      class="emotion-11"
-    >
-      <div
-        id="test2"
-        style="background:hotpink;min-height:100%;display:none"
-      >
-        CONTENT 2
-      </div>
-      <div
-        id="test3"
-      >
-        <div
-          style="background:#000000;height:30.8px"
-        />
-        <div
-          style="background:#111111;height:31.3px"
-        />
-        <div
-          style="background:#222222;height:32.1px"
-        />
-        <div
-          style="background:#333333;height:33.4px"
-        />
-        <div
-          style="background:#444444;height:35.5px"
-        />
-        <div
-          style="background:#555555;height:38.9px"
-        />
-        <div
-          style="background:#666666;height:44.4px"
-        />
-        <div
-          style="background:#777777;height:53.3px"
-        />
-        <div
-          style="background:#888888;height:67.7px"
-        />
-        <div
-          style="background:#999999;height:91px"
-        />
-        <div
-          style="background:#aaaaaa;height:128.7px"
-        />
-        <div
-          style="background:#bbbbbb;height:189.7px"
-        />
-        <div
-          style="background:#cccccc;height:288.4px"
-        />
-        <div
-          style="background:#dddddd;height:448.1px"
-        />
-        <div
-          style="background:#eeeeee;height:706.5px"
-        />
-      </div>
-      <div
-        class="emotion-10"
-      >
-        <div>
-          CONTENT 6
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Basics|Tabs stateless - bordered 1`] = `
-.emotion-9 {
-  overflow-y: hidden;
-  overflow-x: auto;
-  width: 100%;
-  color: #999999;
-  width: 100%;
-  height: 40px;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  box-shadow: rgba(0,0,0,.1) 0 -1px 0 0 inset;
-  background: #FFFFFF;
-}
-
-.emotion-8 {
-  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;
-  position: relative;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  height: 40px;
-}
-
-.emotion-7 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  white-space: nowrap;
-  -webkit-flex-basis: auto;
-  -ms-flex-preferred-size: auto;
-  flex-basis: auto;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
-.emotion-7 > * {
-  margin-left: 15px;
-}
-
-.emotion-6 {
-  overflow: hidden;
-}
-
-.emotion-6:first-of-type {
-  margin-left: 0;
-}
-
-.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;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding: 0 15px;
-  text-transform: capitalize;
-  -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;
-  cursor: pointer;
-  background: transparent;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  font-weight: bold;
-  font-size: 13px;
-  color: inherit;
-  border-bottom-color: transparent;
-}
-
-.emotion-0:empty {
-  display: none;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #1EA7FD;
-}
-
-.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;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding: 0 15px;
-  text-transform: capitalize;
-  -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;
-  cursor: pointer;
-  background: transparent;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  font-weight: bold;
-  font-size: 13px;
-  color: #1EA7FD;
-  border-bottom-color: #1EA7FD;
-}
-
-.emotion-2:empty {
-  display: none;
-}
-
-.emotion-2:focus {
-  outline: 0 none;
-  border-bottom-color: #1EA7FD;
-}
-
-.emotion-11 {
-  display: block;
-  position: relative;
-  font-size: 13px;
-}
-
-.emotion-10 {
-  display: none;
-}
-
-.emotion-12 {
-  background-clip: padding-box;
-  border: 1px solid rgba(0,0,0,.1);
-  border-radius: 4px;
-  overflow: hidden;
-  display: block;
-}
-
-<div
-  style="position:relative;height:calc(100vh - 20px);width:calc(100vw - 20px);margin:10px"
->
-  <div
-    class="emotion-12"
-  >
-    <div
-      class="emotion-9"
-      data-simplebar="true"
-    >
-      <div
-        class="simplebar-wrapper"
-      >
-        <div
-          class="simplebar-height-auto-observer-wrapper"
-        >
-          <div
-            class="simplebar-height-auto-observer"
-          />
-        </div>
-        <div
-          class="simplebar-mask"
-        >
-          <div
-            class="simplebar-offset"
-          >
-            <div
-              class="simplebar-content-wrapper"
-            >
-              <div
-                class="simplebar-content"
-              >
-                <div
-                  class="emotion-8"
-                >
-                  <div
-                    class="emotion-7"
-                  >
-                    <div
-                      class="emotion-6"
-                      role="tablist"
-                    >
-                      <button
-                        class="emotion-0"
-                        role="tab"
-                        type="button"
-                      >
-                        Tab title #1
-                      </button>
-                      <button
-                        class="emotion-0"
-                        role="tab"
-                        type="button"
-                      >
-                        Tab title #2
-                      </button>
-                      <button
-                        class="emotion-2"
-                        role="tab"
-                        type="button"
-                      >
-                        Tab with scroll!
-                      </button>
-                      <button
-                        class="emotion-0"
-                        role="tab"
-                        type="button"
-                      >
-                        Tab title #4
-                      </button>
-                      <button
-                        class="emotion-0"
-                        role="tab"
-                        type="button"
-                      >
-                        Tab title #5
-                      </button>
-                      <button
-                        class="emotion-0"
-                        role="tab"
-                        type="button"
-                      >
-                        Tab title #6
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="simplebar-placeholder"
-        />
-      </div>
-      <div
-        class="simplebar-track simplebar-horizontal"
-      >
-        <div
-          class="simplebar-scrollbar"
-        />
-      </div>
-      <div
-        class="simplebar-track simplebar-vertical"
-      >
-        <div
-          class="simplebar-scrollbar"
-        />
-      </div>
-    </div>
-    <div
-      class="emotion-11"
-    >
-      <div
-        id="test2"
-        style="background:hotpink;min-height:100%;display:none"
-      >
-        CONTENT 2
-      </div>
-      <div
-        id="test3"
-      >
-        <div
-          style="background:#000000;height:30.8px"
-        />
-        <div
-          style="background:#111111;height:31.3px"
-        />
-        <div
-          style="background:#222222;height:32.1px"
-        />
-        <div
-          style="background:#333333;height:33.4px"
-        />
-        <div
-          style="background:#444444;height:35.5px"
-        />
-        <div
-          style="background:#555555;height:38.9px"
-        />
-        <div
-          style="background:#666666;height:44.4px"
-        />
-        <div
-          style="background:#777777;height:53.3px"
-        />
-        <div
-          style="background:#888888;height:67.7px"
-        />
-        <div
-          style="background:#999999;height:91px"
-        />
-        <div
-          style="background:#aaaaaa;height:128.7px"
-        />
-        <div
-          style="background:#bbbbbb;height:189.7px"
-        />
-        <div
-          style="background:#cccccc;height:288.4px"
-        />
-        <div
-          style="background:#dddddd;height:448.1px"
-        />
-        <div
-          style="background:#eeeeee;height:706.5px"
-        />
-      </div>
-      <div
-        class="emotion-10"
-      >
-        <div>
-          CONTENT 6
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Basics|Tabs stateless - empty 1`] = `
-.emotion-1 {
-  padding: 30px;
-  text-align: center;
-  color: #333333;
-  font-size: 13px;
-}
-
-.emotion-0 {
-  font-weight: 700;
-}
-
-<div
-  style="position:relative;height:calc(100vh - 20px);width:calc(100vw - 20px);margin:10px"
->
-  <div
-    class="emotion-1"
-  >
-    <div
-      class="emotion-0"
-    >
-      Nothing found
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots Basics|Tabs stateless - with tools 1`] = `
-.emotion-10 {
-  overflow-y: hidden;
-  overflow-x: auto;
-  width: 100%;
-  color: #999999;
-  width: 100%;
-  height: 40px;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  box-shadow: rgba(0,0,0,.1) 0 -1px 0 0 inset;
-  background: #FFFFFF;
-}
-
-.emotion-9 {
-  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;
-  position: relative;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  height: 40px;
-}
-
-.emotion-7 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  white-space: nowrap;
-  -webkit-flex-basis: auto;
-  -ms-flex-preferred-size: auto;
-  flex-basis: auto;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
-.emotion-7 > * {
-  margin-left: 15px;
-}
-
-.emotion-6 {
-  overflow: hidden;
-}
-
-.emotion-6:first-of-type {
-  margin-left: 0;
-}
-
-.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;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding: 0 15px;
-  text-transform: capitalize;
-  -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;
-  cursor: pointer;
-  background: transparent;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  font-weight: bold;
-  font-size: 13px;
-  color: inherit;
-  border-bottom-color: transparent;
-}
-
-.emotion-0:empty {
-  display: none;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #1EA7FD;
-}
-
-.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;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding: 0 15px;
-  text-transform: capitalize;
-  -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;
-  cursor: pointer;
-  background: transparent;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  font-weight: bold;
-  font-size: 13px;
-  color: #1EA7FD;
-  border-bottom-color: #1EA7FD;
-}
-
-.emotion-2:empty {
-  display: none;
-}
-
-.emotion-2:focus {
-  outline: 0 none;
-  border-bottom-color: #1EA7FD;
-}
-
-.emotion-8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  white-space: nowrap;
-  -webkit-flex-basis: auto;
-  -ms-flex-preferred-size: auto;
-  flex-basis: auto;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  margin-left: 30px;
-}
-
-.emotion-8 > * {
-  margin-right: 15px;
-}
-
-.emotion-13 {
-  display: block;
-}
-
-.emotion-12 {
-  display: block;
-  position: relative;
-  font-size: 13px;
-}
-
-.emotion-11 {
-  display: none;
-}
-
-<div
-  style="position:relative;height:calc(100vh - 20px);width:calc(100vw - 20px);margin:10px"
->
-  <div
-    class="emotion-13"
-  >
-    <div
-      class="emotion-10"
-      data-simplebar="true"
-    >
-      <div
-        class="simplebar-wrapper"
-      >
-        <div
-          class="simplebar-height-auto-observer-wrapper"
-        >
-          <div
-            class="simplebar-height-auto-observer"
-          />
-        </div>
-        <div
-          class="simplebar-mask"
-        >
-          <div
-            class="simplebar-offset"
-          >
-            <div
-              class="simplebar-content-wrapper"
-            >
-              <div
-                class="simplebar-content"
-              >
-                <div
-                  class="emotion-9"
-                >
-                  <div
-                    class="emotion-7"
-                  >
-                    <div
-                      class="emotion-6"
-                      role="tablist"
-                    >
-                      <button
-                        class="emotion-0"
-                        role="tab"
-                        type="button"
-                      >
-                        Tab title #1
-                      </button>
-                      <button
-                        class="emotion-0"
-                        role="tab"
-                        type="button"
-                      >
-                        Tab title #2
-                      </button>
-                      <button
-                        class="emotion-2"
-                        role="tab"
-                        type="button"
-                      >
-                        Tab with scroll!
-                      </button>
-                      <button
-                        class="emotion-0"
-                        role="tab"
-                        type="button"
-                      >
-                        Tab title #4
-                      </button>
-                      <button
-                        class="emotion-0"
-                        role="tab"
-                        type="button"
-                      >
-                        Tab title #5
-                      </button>
-                      <button
-                        class="emotion-0"
-                        role="tab"
-                        type="button"
-                      >
-                        Tab title #6
-                      </button>
-                    </div>
-                  </div>
-                  <div
-                    class="emotion-8"
-                  >
-                    <button
-                      type="button"
-                    >
-                      1
-                    </button>
-                    <button
-                      type="button"
-                    >
-                      2
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="simplebar-placeholder"
-        />
-      </div>
-      <div
-        class="simplebar-track simplebar-horizontal"
-      >
-        <div
-          class="simplebar-scrollbar"
-        />
-      </div>
-      <div
-        class="simplebar-track simplebar-vertical"
-      >
-        <div
-          class="simplebar-scrollbar"
-        />
-      </div>
-    </div>
-    <div
-      class="emotion-12"
-    >
-      <div
-        id="test2"
-        style="background:hotpink;min-height:100%;display:none"
-      >
-        CONTENT 2
-      </div>
-      <div
-        id="test3"
-      >
-        <div
-          style="background:#000000;height:30.8px"
-        />
-        <div
-          style="background:#111111;height:31.3px"
-        />
-        <div
-          style="background:#222222;height:32.1px"
-        />
-        <div
-          style="background:#333333;height:33.4px"
-        />
-        <div
-          style="background:#444444;height:35.5px"
-        />
-        <div
-          style="background:#555555;height:38.9px"
-        />
-        <div
-          style="background:#666666;height:44.4px"
-        />
-        <div
-          style="background:#777777;height:53.3px"
-        />
-        <div
-          style="background:#888888;height:67.7px"
-        />
-        <div
-          style="background:#999999;height:91px"
-        />
-        <div
-          style="background:#aaaaaa;height:128.7px"
-        />
-        <div
-          style="background:#bbbbbb;height:189.7px"
-        />
-        <div
-          style="background:#cccccc;height:288.4px"
-        />
-        <div
-          style="background:#dddddd;height:448.1px"
-        />
-        <div
-          style="background:#eeeeee;height:706.5px"
-        />
-      </div>
-      <div
-        class="emotion-11"
-      >
-        <div>
-          CONTENT 6
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/lib/components/src/tooltip/__snapshots__/ListItem.stories.storyshot b/lib/components/src/tooltip/__snapshots__/ListItem.stories.storyshot
deleted file mode 100644
index a65a0547e467..000000000000
--- a/lib/components/src/tooltip/__snapshots__/ListItem.stories.storyshot
+++ /dev/null
@@ -1,1212 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots basics|Tooltip/ListItem active icon 1`] = `
-.emotion-3 {
-  shape-rendering: inherit;
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-  display: block;
-}
-
-.emotion-2 {
-  fill: currentColor;
-}
-
-.emotion-5 {
-  font-size: 12px;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  color: rgba(51,51,51,0.5);
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  cursor: pointer;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  line-height: 18px;
-  padding: 7px 15px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.emotion-5 > * + * {
-  padding-left: 10px;
-}
-
-.emotion-5:hover {
-  background: rgba(0,0,0,.05);
-}
-
-.emotion-5:hover svg {
-  opacity: 1;
-}
-
-.emotion-1 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  text-align: left;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.emotion-1 > * + * {
-  padding-left: 10px;
-}
-
-.emotion-0 {
-  color: #333333;
-  font-weight: 400;
-  color: #FF4785;
-  font-weight: 700;
-}
-
-.emotion-4 svg {
-  -webkit-transition: all 200ms ease-out;
-  transition: all 200ms ease-out;
-  opacity: 0;
-  height: 12px;
-  width: 12px;
-  margin: 3px 0;
-  vertical-align: top;
-}
-
-.emotion-4 path {
-  fill: inherit;
-}
-
-.emotion-4 svg {
-  opacity: 1;
-}
-
-.emotion-4 path {
-  fill: #FF4785;
-}
-
-<a
-  class="emotion-5"
->
-  <span
-    class="emotion-1"
-  >
-    <span
-      class="emotion-0"
-    >
-      active icon
-    </span>
-  </span>
-  <span
-    class="emotion-4"
-  >
-    <svg
-      class="emotion-3"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-2"
-        d="M1008.714 490.522c-9.002-12.594-223.276-308.808-496.684-308.808-273.444 0-487.682 296.214-496.684 308.808l-15.316 21.49 15.316 21.466c9.002 12.618 223.24 308.808 496.684 308.808 273.408 0 487.682-296.19 496.684-308.808l15.316-21.466-15.316-21.49zM807.68 631.688c-46 39.142-92.558 70.064-138.382 91.904-53.874 25.676-106.786 38.694-157.266 38.694-50.49 0-103.406-13.018-157.282-38.696-45.826-21.838-92.382-52.758-138.378-91.902-53.708-45.706-94.302-92.122-116.61-119.672 22.36-27.602 63.028-74.094 116.612-119.696 45.996-39.146 92.554-70.068 138.378-91.908 53.876-25.678 106.792-38.698 157.28-38.698 50.48 0 103.39 13.020 157.264 38.696 45.824 21.842 92.382 52.764 138.382 91.91 53.602 45.614 94.264 92.098 116.624 119.696-22.306 27.544-62.898 73.954-116.622 119.672zM692.032 512.036c0 99.41-80.588 180-180 180s-180-80.59-180-180c0-99.406 80.588-179.998 180-179.998s180 80.59 180 179.998z"
-      />
-    </svg>
-  </span>
-</a>
-`;
-
-exports[`Storyshots basics|Tooltip/ListItem all 1`] = `
-@keyframes animation-0 {
-  0%, 100% {
-    opacity: 1;
-  }
-
-  50% {
-    opacity: .4;
-  }
-}
-
-@keyframes animation-0 {
-  0%, 100% {
-    opacity: 1;
-  }
-
-  50% {
-    opacity: .4;
-  }
-}
-
-@keyframes animation-0 {
-  0%, 100% {
-    opacity: 1;
-  }
-
-  50% {
-    opacity: .4;
-  }
-}
-
-@keyframes animation-0 {
-  0%, 100% {
-    opacity: 1;
-  }
-
-  50% {
-    opacity: .4;
-  }
-}
-
-@keyframes animation-0 {
-  0%, 100% {
-    opacity: 1;
-  }
-
-  50% {
-    opacity: .4;
-  }
-}
-
-.emotion-9 {
-  shape-rendering: inherit;
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-  display: block;
-}
-
-.emotion-8 {
-  fill: currentColor;
-}
-
-.emotion-2 {
-  font-size: 12px;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  color: rgba(51,51,51,0.5);
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  cursor: pointer;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  line-height: 18px;
-  padding: 7px 15px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.emotion-2 > * + * {
-  padding-left: 10px;
-}
-
-.emotion-2:hover {
-  background: rgba(0,0,0,.05);
-}
-
-.emotion-2:hover svg {
-  opacity: 1;
-}
-
-.emotion-1 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  text-align: left;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.emotion-1 > * + * {
-  padding-left: 10px;
-}
-
-.emotion-3 {
-  color: #333333;
-  font-weight: 400;
-}
-
-.emotion-0 {
-  color: #333333;
-  font-weight: 400;
-  -webkit-animation: animation-0 1.5s ease-in-out infinite;
-  animation: animation-0 1.5s ease-in-out infinite;
-  color: transparent;
-  cursor: progress;
-}
-
-.emotion-10 svg {
-  -webkit-transition: all 200ms ease-out;
-  transition: all 200ms ease-out;
-  opacity: 0;
-  height: 12px;
-  width: 12px;
-  margin: 3px 0;
-  vertical-align: top;
-}
-
-.emotion-10 path {
-  fill: inherit;
-}
-
-.emotion-14 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  text-align: center;
-}
-
-.emotion-18 svg {
-  opacity: 1;
-}
-
-.emotion-18 path {
-  fill: #FF4785;
-}
-
-.emotion-19 {
-  color: #333333;
-  font-weight: 400;
-  color: #FF4785;
-  font-weight: 700;
-}
-
-.emotion-20 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  text-align: center;
-  color: #FF4785;
-}
-
-.emotion-22 svg {
-  -webkit-transition: all 200ms ease-out;
-  transition: all 200ms ease-out;
-  opacity: 0;
-  height: 12px;
-  width: 12px;
-  margin: 3px 0;
-  vertical-align: top;
-}
-
-.emotion-22 path {
-  fill: inherit;
-}
-
-.emotion-22 svg {
-  opacity: 1;
-}
-
-.emotion-22 path {
-  fill: #FF4785;
-}
-
-.emotion-37 {
-  font-size: 12px;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  color: rgba(51,51,51,0.5);
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  cursor: pointer;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  line-height: 18px;
-  padding: 7px 15px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  cursor: not-allowed;
-}
-
-.emotion-37 > * + * {
-  padding-left: 10px;
-}
-
-.emotion-37:hover {
-  background: rgba(0,0,0,.05);
-}
-
-.emotion-37:hover svg {
-  opacity: 1;
-}
-
-.emotion-33 {
-  color: #333333;
-  font-weight: 400;
-  color: rgba(51,51,51,0.3);
-}
-
-.emotion-34 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  text-align: center;
-  color: #999999;
-}
-
-<div>
-  <a
-    class="emotion-2"
-  >
-    <span
-      class="emotion-1"
-    >
-      <span
-        class="emotion-0"
-      >
-        <span>
-          Loading state
-        </span>
-      </span>
-    </span>
-  </a>
-  <a
-    class="emotion-2"
-  >
-    <span
-      class="emotion-1"
-    >
-      <span
-        class="emotion-3"
-      >
-        Default
-      </span>
-    </span>
-  </a>
-  <a
-    class="emotion-2"
-  >
-    <span
-      class="emotion-1"
-    >
-      <span
-        class="emotion-3"
-      >
-        Default icon
-      </span>
-    </span>
-    <span
-      class="emotion-10"
-    >
-      <svg
-        class="emotion-9"
-        viewBox="0 0 1024 1024"
-      >
-        <path
-          class="emotion-8"
-          d="M1008.714 490.522c-9.002-12.594-223.276-308.808-496.684-308.808-273.444 0-487.682 296.214-496.684 308.808l-15.316 21.49 15.316 21.466c9.002 12.618 223.24 308.808 496.684 308.808 273.408 0 487.682-296.19 496.684-308.808l15.316-21.466-15.316-21.49zM807.68 631.688c-46 39.142-92.558 70.064-138.382 91.904-53.874 25.676-106.786 38.694-157.266 38.694-50.49 0-103.406-13.018-157.282-38.696-45.826-21.838-92.382-52.758-138.378-91.902-53.708-45.706-94.302-92.122-116.61-119.672 22.36-27.602 63.028-74.094 116.612-119.696 45.996-39.146 92.554-70.068 138.378-91.908 53.876-25.678 106.792-38.698 157.28-38.698 50.48 0 103.39 13.020 157.264 38.696 45.824 21.842 92.382 52.764 138.382 91.91 53.602 45.614 94.264 92.098 116.624 119.696-22.306 27.544-62.898 73.954-116.622 119.672zM692.032 512.036c0 99.41-80.588 180-180 180s-180-80.59-180-180c0-99.406 80.588-179.998 180-179.998s180 80.59 180 179.998z"
-        />
-      </svg>
-    </span>
-  </a>
-  <a
-    class="emotion-2"
-  >
-    <span
-      class="emotion-12"
-    >
-      left
-    </span>
-    <span
-      class="emotion-1"
-    >
-      <span
-        class="emotion-3"
-      >
-        title
-      </span>
-      <span
-        class="emotion-14"
-      >
-        center
-      </span>
-    </span>
-    <span
-      class="emotion-10"
-    >
-      right
-    </span>
-  </a>
-  <a
-    class="emotion-2"
-  >
-    <span
-      class="emotion-18"
-    >
-      left
-    </span>
-    <span
-      class="emotion-1"
-    >
-      <span
-        class="emotion-19"
-      >
-        active
-      </span>
-      <span
-        class="emotion-20"
-      >
-        center
-      </span>
-    </span>
-    <span
-      class="emotion-22"
-    >
-      right
-    </span>
-  </a>
-  <a
-    class="emotion-2"
-  >
-    <span
-      class="emotion-18"
-    >
-      left
-    </span>
-    <span
-      class="emotion-1"
-    >
-      <span
-        class="emotion-19"
-      >
-        active icon
-      </span>
-      <span
-        class="emotion-20"
-      >
-        center
-      </span>
-    </span>
-    <span
-      class="emotion-22"
-    >
-      <svg
-        class="emotion-9"
-        viewBox="0 0 1024 1024"
-      >
-        <path
-          class="emotion-8"
-          d="M1008.714 490.522c-9.002-12.594-223.276-308.808-496.684-308.808-273.444 0-487.682 296.214-496.684 308.808l-15.316 21.49 15.316 21.466c9.002 12.618 223.24 308.808 496.684 308.808 273.408 0 487.682-296.19 496.684-308.808l15.316-21.466-15.316-21.49zM807.68 631.688c-46 39.142-92.558 70.064-138.382 91.904-53.874 25.676-106.786 38.694-157.266 38.694-50.49 0-103.406-13.018-157.282-38.696-45.826-21.838-92.382-52.758-138.378-91.902-53.708-45.706-94.302-92.122-116.61-119.672 22.36-27.602 63.028-74.094 116.612-119.696 45.996-39.146 92.554-70.068 138.378-91.908 53.876-25.678 106.792-38.698 157.28-38.698 50.48 0 103.39 13.020 157.264 38.696 45.824 21.842 92.382 52.764 138.382 91.91 53.602 45.614 94.264 92.098 116.624 119.696-22.306 27.544-62.898 73.954-116.622 119.672zM692.032 512.036c0 99.41-80.588 180-180 180s-180-80.59-180-180c0-99.406 80.588-179.998 180-179.998s180 80.59 180 179.998z"
-        />
-      </svg>
-    </span>
-  </a>
-  <a
-    class="emotion-37"
-    disabled=""
-  >
-    <span
-      class="emotion-12"
-      disabled=""
-    >
-      left
-    </span>
-    <span
-      class="emotion-1"
-    >
-      <span
-        class="emotion-33"
-        disabled=""
-      >
-        disabled
-      </span>
-      <span
-        class="emotion-34"
-        disabled=""
-      >
-        center
-      </span>
-    </span>
-    <span
-      class="emotion-10"
-      disabled=""
-    >
-      right
-    </span>
-  </a>
-</div>
-`;
-
-exports[`Storyshots basics|Tooltip/ListItem default 1`] = `
-.emotion-2 {
-  font-size: 12px;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  color: rgba(51,51,51,0.5);
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  cursor: pointer;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  line-height: 18px;
-  padding: 7px 15px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.emotion-2 > * + * {
-  padding-left: 10px;
-}
-
-.emotion-2:hover {
-  background: rgba(0,0,0,.05);
-}
-
-.emotion-2:hover svg {
-  opacity: 1;
-}
-
-.emotion-1 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  text-align: left;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.emotion-1 > * + * {
-  padding-left: 10px;
-}
-
-.emotion-0 {
-  color: #333333;
-  font-weight: 400;
-}
-
-<a
-  class="emotion-2"
->
-  <span
-    class="emotion-1"
-  >
-    <span
-      class="emotion-0"
-    >
-      Default
-    </span>
-  </span>
-</a>
-`;
-
-exports[`Storyshots basics|Tooltip/ListItem default icon 1`] = `
-.emotion-3 {
-  shape-rendering: inherit;
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-  display: block;
-}
-
-.emotion-2 {
-  fill: currentColor;
-}
-
-.emotion-5 {
-  font-size: 12px;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  color: rgba(51,51,51,0.5);
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  cursor: pointer;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  line-height: 18px;
-  padding: 7px 15px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.emotion-5 > * + * {
-  padding-left: 10px;
-}
-
-.emotion-5:hover {
-  background: rgba(0,0,0,.05);
-}
-
-.emotion-5:hover svg {
-  opacity: 1;
-}
-
-.emotion-1 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  text-align: left;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.emotion-1 > * + * {
-  padding-left: 10px;
-}
-
-.emotion-0 {
-  color: #333333;
-  font-weight: 400;
-}
-
-.emotion-4 svg {
-  -webkit-transition: all 200ms ease-out;
-  transition: all 200ms ease-out;
-  opacity: 0;
-  height: 12px;
-  width: 12px;
-  margin: 3px 0;
-  vertical-align: top;
-}
-
-.emotion-4 path {
-  fill: inherit;
-}
-
-<a
-  class="emotion-5"
->
-  <span
-    class="emotion-1"
-  >
-    <span
-      class="emotion-0"
-    >
-      Default icon
-    </span>
-  </span>
-  <span
-    class="emotion-4"
-  >
-    <svg
-      class="emotion-3"
-      viewBox="0 0 1024 1024"
-    >
-      <path
-        class="emotion-2"
-        d="M1008.714 490.522c-9.002-12.594-223.276-308.808-496.684-308.808-273.444 0-487.682 296.214-496.684 308.808l-15.316 21.49 15.316 21.466c9.002 12.618 223.24 308.808 496.684 308.808 273.408 0 487.682-296.19 496.684-308.808l15.316-21.466-15.316-21.49zM807.68 631.688c-46 39.142-92.558 70.064-138.382 91.904-53.874 25.676-106.786 38.694-157.266 38.694-50.49 0-103.406-13.018-157.282-38.696-45.826-21.838-92.382-52.758-138.378-91.902-53.708-45.706-94.302-92.122-116.61-119.672 22.36-27.602 63.028-74.094 116.612-119.696 45.996-39.146 92.554-70.068 138.378-91.908 53.876-25.678 106.792-38.698 157.28-38.698 50.48 0 103.39 13.020 157.264 38.696 45.824 21.842 92.382 52.764 138.382 91.91 53.602 45.614 94.264 92.098 116.624 119.696-22.306 27.544-62.898 73.954-116.622 119.672zM692.032 512.036c0 99.41-80.588 180-180 180s-180-80.59-180-180c0-99.406 80.588-179.998 180-179.998s180 80.59 180 179.998z"
-      />
-    </svg>
-  </span>
-</a>
-`;
-
-exports[`Storyshots basics|Tooltip/ListItem disabled 1`] = `
-.emotion-3 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  text-align: left;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.emotion-3 > * + * {
-  padding-left: 10px;
-}
-
-.emotion-4 svg {
-  -webkit-transition: all 200ms ease-out;
-  transition: all 200ms ease-out;
-  opacity: 0;
-  height: 12px;
-  width: 12px;
-  margin: 3px 0;
-  vertical-align: top;
-}
-
-.emotion-4 path {
-  fill: inherit;
-}
-
-.emotion-5 {
-  font-size: 12px;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  color: rgba(51,51,51,0.5);
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  cursor: pointer;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  line-height: 18px;
-  padding: 7px 15px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  cursor: not-allowed;
-}
-
-.emotion-5 > * + * {
-  padding-left: 10px;
-}
-
-.emotion-5:hover {
-  background: rgba(0,0,0,.05);
-}
-
-.emotion-5:hover svg {
-  opacity: 1;
-}
-
-.emotion-1 {
-  color: #333333;
-  font-weight: 400;
-  color: rgba(51,51,51,0.3);
-}
-
-.emotion-2 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  text-align: center;
-  color: #999999;
-}
-
-<a
-  class="emotion-5"
-  disabled=""
->
-  <span
-    class="emotion-0"
-    disabled=""
-  >
-    left
-  </span>
-  <span
-    class="emotion-3"
-  >
-    <span
-      class="emotion-1"
-      disabled=""
-    >
-      disabled
-    </span>
-    <span
-      class="emotion-2"
-      disabled=""
-    >
-      center
-    </span>
-  </span>
-  <span
-    class="emotion-4"
-    disabled=""
-  >
-    right
-  </span>
-</a>
-`;
-
-exports[`Storyshots basics|Tooltip/ListItem loading 1`] = `
-@keyframes animation-0 {
-  0%, 100% {
-    opacity: 1;
-  }
-
-  50% {
-    opacity: .4;
-  }
-}
-
-@keyframes animation-0 {
-  0%, 100% {
-    opacity: 1;
-  }
-
-  50% {
-    opacity: .4;
-  }
-}
-
-@keyframes animation-0 {
-  0%, 100% {
-    opacity: 1;
-  }
-
-  50% {
-    opacity: .4;
-  }
-}
-
-@keyframes animation-0 {
-  0%, 100% {
-    opacity: 1;
-  }
-
-  50% {
-    opacity: .4;
-  }
-}
-
-@keyframes animation-0 {
-  0%, 100% {
-    opacity: 1;
-  }
-
-  50% {
-    opacity: .4;
-  }
-}
-
-.emotion-2 {
-  font-size: 12px;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  color: rgba(51,51,51,0.5);
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  cursor: pointer;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  line-height: 18px;
-  padding: 7px 15px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.emotion-2 > * + * {
-  padding-left: 10px;
-}
-
-.emotion-2:hover {
-  background: rgba(0,0,0,.05);
-}
-
-.emotion-2:hover svg {
-  opacity: 1;
-}
-
-.emotion-1 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  text-align: left;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.emotion-1 > * + * {
-  padding-left: 10px;
-}
-
-.emotion-0 {
-  color: #333333;
-  font-weight: 400;
-  -webkit-animation: animation-0 1.5s ease-in-out infinite;
-  animation: animation-0 1.5s ease-in-out infinite;
-  color: transparent;
-  cursor: progress;
-}
-
-<a
-  class="emotion-2"
->
-  <span
-    class="emotion-1"
-  >
-    <span
-      class="emotion-0"
-    >
-      <span>
-        Loading state
-      </span>
-    </span>
-  </span>
-</a>
-`;
-
-exports[`Storyshots basics|Tooltip/ListItem w/positions 1`] = `
-.emotion-5 {
-  font-size: 12px;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  color: rgba(51,51,51,0.5);
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  cursor: pointer;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  line-height: 18px;
-  padding: 7px 15px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.emotion-5 > * + * {
-  padding-left: 10px;
-}
-
-.emotion-5:hover {
-  background: rgba(0,0,0,.05);
-}
-
-.emotion-5:hover svg {
-  opacity: 1;
-}
-
-.emotion-3 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  text-align: left;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.emotion-3 > * + * {
-  padding-left: 10px;
-}
-
-.emotion-1 {
-  color: #333333;
-  font-weight: 400;
-}
-
-.emotion-4 svg {
-  -webkit-transition: all 200ms ease-out;
-  transition: all 200ms ease-out;
-  opacity: 0;
-  height: 12px;
-  width: 12px;
-  margin: 3px 0;
-  vertical-align: top;
-}
-
-.emotion-4 path {
-  fill: inherit;
-}
-
-.emotion-2 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  text-align: center;
-}
-
-<a
-  class="emotion-5"
->
-  <span
-    class="emotion-0"
-  >
-    left
-  </span>
-  <span
-    class="emotion-3"
-  >
-    <span
-      class="emotion-1"
-    >
-      title
-    </span>
-    <span
-      class="emotion-2"
-    >
-      center
-    </span>
-  </span>
-  <span
-    class="emotion-4"
-  >
-    right
-  </span>
-</a>
-`;
-
-exports[`Storyshots basics|Tooltip/ListItem w/positions active 1`] = `
-.emotion-5 {
-  font-size: 12px;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  color: rgba(51,51,51,0.5);
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  cursor: pointer;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  line-height: 18px;
-  padding: 7px 15px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.emotion-5 > * + * {
-  padding-left: 10px;
-}
-
-.emotion-5:hover {
-  background: rgba(0,0,0,.05);
-}
-
-.emotion-5:hover svg {
-  opacity: 1;
-}
-
-.emotion-3 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  text-align: left;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.emotion-3 > * + * {
-  padding-left: 10px;
-}
-
-.emotion-0 svg {
-  opacity: 1;
-}
-
-.emotion-0 path {
-  fill: #FF4785;
-}
-
-.emotion-1 {
-  color: #333333;
-  font-weight: 400;
-  color: #FF4785;
-  font-weight: 700;
-}
-
-.emotion-2 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  text-align: center;
-  color: #FF4785;
-}
-
-.emotion-4 svg {
-  -webkit-transition: all 200ms ease-out;
-  transition: all 200ms ease-out;
-  opacity: 0;
-  height: 12px;
-  width: 12px;
-  margin: 3px 0;
-  vertical-align: top;
-}
-
-.emotion-4 path {
-  fill: inherit;
-}
-
-.emotion-4 svg {
-  opacity: 1;
-}
-
-.emotion-4 path {
-  fill: #FF4785;
-}
-
-<a
-  class="emotion-5"
->
-  <span
-    class="emotion-0"
-  >
-    left
-  </span>
-  <span
-    class="emotion-3"
-  >
-    <span
-      class="emotion-1"
-    >
-      active
-    </span>
-    <span
-      class="emotion-2"
-    >
-      center
-    </span>
-  </span>
-  <span
-    class="emotion-4"
-  >
-    right
-  </span>
-</a>
-`;
diff --git a/lib/components/src/tooltip/__snapshots__/Tooltip.stories.storyshot b/lib/components/src/tooltip/__snapshots__/Tooltip.stories.storyshot
deleted file mode 100644
index baeb3ec46624..000000000000
--- a/lib/components/src/tooltip/__snapshots__/Tooltip.stories.storyshot
+++ /dev/null
@@ -1,269 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots basics/Tooltip/Tooltip basic, default 1`] = `
-.emotion-2 {
-  display: inline-block;
-  z-index: 2147483647;
-  margin-bottom: 10px;
-  margin-top: 0px;
-  margin-left: 0px;
-  margin-right: 0px;
-  background: rgba(255,255,255,0.95);
-  -webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
-  filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
-  border-radius: 8px;
-  font-size: 12px;
-}
-
-.emotion-0 {
-  position: absolute;
-  border-style: solid;
-  margin-bottom: 0px;
-  margin-top: 8px;
-  margin-right: 8px;
-  margin-left: 8px;
-  bottom: -8px;
-  top: autopx;
-  right: autopx;
-  left: autopx;
-  border-bottom-width: 0px;
-  border-top-width: 8px;
-  border-right-width: 8px;
-  border-left-width: 8px;
-  border-top-color: rgba(255,255,255,0.95);
-  border-bottom-color: transparent;
-  border-left-color: transparent;
-  border-right-color: transparent;
-}
-
-.emotion-1 {
-  width: 100px;
-  height: 100px;
-  font-size: 16px;
-  text-align: center;
-  line-height: 100px;
-}
-
-<div
-  class="emotion-2"
-  color="medium"
-  style="position:relative;top:20px;left:20px"
->
-  <div
-    class="emotion-0"
-    color="medium"
-  />
-  <div
-    class="emotion-1"
-  >
-    Text
-  </div>
-</div>
-`;
-
-exports[`Storyshots basics/Tooltip/Tooltip basic, default, bottom 1`] = `
-.emotion-1 {
-  width: 100px;
-  height: 100px;
-  font-size: 16px;
-  text-align: center;
-  line-height: 100px;
-}
-
-.emotion-2 {
-  display: inline-block;
-  z-index: 2147483647;
-  margin-bottom: 0px;
-  margin-top: 10px;
-  margin-left: 0px;
-  margin-right: 0px;
-  background: rgba(255,255,255,0.95);
-  -webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
-  filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
-  border-radius: 8px;
-  font-size: 12px;
-}
-
-.emotion-0 {
-  position: absolute;
-  border-style: solid;
-  margin-bottom: 8px;
-  margin-top: 0px;
-  margin-right: 8px;
-  margin-left: 8px;
-  bottom: autopx;
-  top: -8px;
-  right: autopx;
-  left: autopx;
-  border-bottom-width: 8px;
-  border-top-width: 0px;
-  border-right-width: 8px;
-  border-left-width: 8px;
-  border-top-color: transparent;
-  border-bottom-color: rgba(255,255,255,0.95);
-  border-left-color: transparent;
-  border-right-color: transparent;
-}
-
-<div
-  class="emotion-2"
-  style="position:relative;top:20px;left:20px"
->
-  <div
-    class="emotion-0"
-  />
-  <div
-    class="emotion-1"
-  >
-    Text
-  </div>
-</div>
-`;
-
-exports[`Storyshots basics/Tooltip/Tooltip basic, default, left 1`] = `
-.emotion-1 {
-  width: 100px;
-  height: 100px;
-  font-size: 16px;
-  text-align: center;
-  line-height: 100px;
-}
-
-.emotion-2 {
-  display: inline-block;
-  z-index: 2147483647;
-  margin-bottom: 0px;
-  margin-top: 0px;
-  margin-left: 0px;
-  margin-right: 10px;
-  background: rgba(255,255,255,0.95);
-  -webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
-  filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
-  border-radius: 8px;
-  font-size: 12px;
-}
-
-.emotion-0 {
-  position: absolute;
-  border-style: solid;
-  margin-bottom: 8px;
-  margin-top: 8px;
-  margin-right: 0px;
-  margin-left: 8px;
-  bottom: autopx;
-  top: autopx;
-  right: -8px;
-  left: autopx;
-  border-bottom-width: 8px;
-  border-top-width: 8px;
-  border-right-width: 0px;
-  border-left-width: 8px;
-  border-top-color: transparent;
-  border-bottom-color: transparent;
-  border-left-color: rgba(255,255,255,0.95);
-  border-right-color: transparent;
-}
-
-<div
-  class="emotion-2"
-  style="position:relative;top:20px;left:20px"
->
-  <div
-    class="emotion-0"
-  />
-  <div
-    class="emotion-1"
-  >
-    Text
-  </div>
-</div>
-`;
-
-exports[`Storyshots basics/Tooltip/Tooltip basic, default, right 1`] = `
-.emotion-1 {
-  width: 100px;
-  height: 100px;
-  font-size: 16px;
-  text-align: center;
-  line-height: 100px;
-}
-
-.emotion-2 {
-  display: inline-block;
-  z-index: 2147483647;
-  margin-bottom: 0px;
-  margin-top: 0px;
-  margin-left: 10px;
-  margin-right: 0px;
-  background: rgba(255,255,255,0.95);
-  -webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
-  filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
-  border-radius: 8px;
-  font-size: 12px;
-}
-
-.emotion-0 {
-  position: absolute;
-  border-style: solid;
-  margin-bottom: 8px;
-  margin-top: 8px;
-  margin-right: 8px;
-  margin-left: 0px;
-  bottom: autopx;
-  top: autopx;
-  right: autopx;
-  left: -8px;
-  border-bottom-width: 8px;
-  border-top-width: 8px;
-  border-right-width: 8px;
-  border-left-width: 0px;
-  border-top-color: transparent;
-  border-bottom-color: transparent;
-  border-left-color: transparent;
-  border-right-color: rgba(255,255,255,0.95);
-}
-
-<div
-  class="emotion-2"
-  style="position:relative;top:20px;left:20px"
->
-  <div
-    class="emotion-0"
-  />
-  <div
-    class="emotion-1"
-  >
-    Text
-  </div>
-</div>
-`;
-
-exports[`Storyshots basics/Tooltip/Tooltip no chrome 1`] = `
-.emotion-0 {
-  width: 100px;
-  height: 100px;
-  font-size: 16px;
-  text-align: center;
-  line-height: 100px;
-}
-
-.emotion-1 {
-  display: inline-block;
-  z-index: 2147483647;
-  margin-bottom: 8px;
-  margin-top: 0px;
-  margin-left: 0px;
-  margin-right: 0px;
-}
-
-<div
-  class="emotion-1"
-  style="position:relative;top:20px;left:20px"
->
-  <div
-    class="emotion-0"
-  >
-    Text
-  </div>
-</div>
-`;
diff --git a/lib/components/src/tooltip/__snapshots__/TooltipLinkList.stories.storyshot b/lib/components/src/tooltip/__snapshots__/TooltipLinkList.stories.storyshot
deleted file mode 100644
index 7a2cc780cf91..000000000000
--- a/lib/components/src/tooltip/__snapshots__/TooltipLinkList.stories.storyshot
+++ /dev/null
@@ -1,326 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots basics/Tooltip/TooltipLinkList links 1`] = `
-.emotion-8 {
-  min-width: 180px;
-  overflow: hidden;
-  border-radius: 8px;
-}
-
-.emotion-4 {
-  font-size: 12px;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  color: rgba(51,51,51,0.5);
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  cursor: pointer;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  line-height: 18px;
-  padding: 7px 15px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.emotion-4 > * + * {
-  padding-left: 10px;
-}
-
-.emotion-4:hover {
-  background: rgba(0,0,0,.05);
-}
-
-.emotion-4:hover svg {
-  opacity: 1;
-}
-
-.emotion-3 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  text-align: left;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.emotion-3 > * + * {
-  padding-left: 10px;
-}
-
-.emotion-2 {
-  color: #333333;
-  font-weight: 400;
-}
-
-.emotion-0 {
-  display: inline-block;
-  cursor: pointer;
-}
-
-.emotion-9 {
-  display: inline-block;
-  z-index: 2147483647;
-  margin-bottom: 10px;
-  margin-top: 0px;
-  margin-left: 0px;
-  margin-right: 0px;
-  background: rgba(255,255,255,0.95);
-  -webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
-  filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
-  border-radius: 8px;
-  font-size: 12px;
-}
-
-.emotion-1 {
-  position: absolute;
-  border-style: solid;
-  margin-bottom: 0px;
-  margin-top: 8px;
-  margin-right: 8px;
-  margin-left: 8px;
-  bottom: -8px;
-  top: autopx;
-  right: autopx;
-  left: autopx;
-  border-bottom-width: 0px;
-  border-top-width: 8px;
-  border-right-width: 8px;
-  border-left-width: 8px;
-  border-top-color: rgba(255,255,255,0.95);
-  border-bottom-color: transparent;
-  border-left-color: transparent;
-  border-right-color: transparent;
-}
-
-<div
-  style="height:300px"
->
-  <div
-    class="emotion-0"
-  >
-    <div>
-      Tooltip
-    </div>
-  </div>
-  <div
-    class="emotion-9"
-    style="position:absolute;top:0;left:0;opacity:0;pointer-events:none"
-  >
-    <div
-      class="emotion-1"
-    />
-    <div
-      class="emotion-8"
-    >
-      <a
-        class="emotion-4"
-        href="http://google.com"
-      >
-        <span
-          class="emotion-3"
-        >
-          <span
-            class="emotion-2"
-          >
-            Link
-          </span>
-        </span>
-      </a>
-      <a
-        class="emotion-4"
-        href="http://google.com"
-      >
-        <span
-          class="emotion-3"
-        >
-          <span
-            class="emotion-2"
-          >
-            Link
-          </span>
-        </span>
-      </a>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots basics/Tooltip/TooltipLinkList links and callback 1`] = `
-.emotion-11 {
-  min-width: 180px;
-  overflow: hidden;
-  border-radius: 8px;
-}
-
-.emotion-4 {
-  font-size: 12px;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  color: rgba(51,51,51,0.5);
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  cursor: pointer;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  line-height: 18px;
-  padding: 7px 15px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.emotion-4 > * + * {
-  padding-left: 10px;
-}
-
-.emotion-4:hover {
-  background: rgba(0,0,0,.05);
-}
-
-.emotion-4:hover svg {
-  opacity: 1;
-}
-
-.emotion-3 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  text-align: left;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-.emotion-3 > * + * {
-  padding-left: 10px;
-}
-
-.emotion-2 {
-  color: #333333;
-  font-weight: 400;
-}
-
-.emotion-0 {
-  display: inline-block;
-  cursor: pointer;
-}
-
-.emotion-12 {
-  display: inline-block;
-  z-index: 2147483647;
-  margin-bottom: 10px;
-  margin-top: 0px;
-  margin-left: 0px;
-  margin-right: 0px;
-  background: rgba(255,255,255,0.95);
-  -webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
-  filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
-  border-radius: 8px;
-  font-size: 12px;
-}
-
-.emotion-1 {
-  position: absolute;
-  border-style: solid;
-  margin-bottom: 0px;
-  margin-top: 8px;
-  margin-right: 8px;
-  margin-left: 8px;
-  bottom: -8px;
-  top: autopx;
-  right: autopx;
-  left: autopx;
-  border-bottom-width: 0px;
-  border-top-width: 8px;
-  border-right-width: 8px;
-  border-left-width: 8px;
-  border-top-color: rgba(255,255,255,0.95);
-  border-bottom-color: transparent;
-  border-left-color: transparent;
-  border-right-color: transparent;
-}
-
-<div
-  style="height:300px"
->
-  <div
-    class="emotion-0"
-  >
-    <div>
-      Tooltip
-    </div>
-  </div>
-  <div
-    class="emotion-12"
-    style="position:absolute;top:0;left:0;opacity:0;pointer-events:none"
-  >
-    <div
-      class="emotion-1"
-    />
-    <div
-      class="emotion-11"
-    >
-      <a
-        class="emotion-4"
-        href="http://google.com"
-      >
-        <span
-          class="emotion-3"
-        >
-          <span
-            class="emotion-2"
-          >
-            Link
-          </span>
-        </span>
-      </a>
-      <a
-        class="emotion-4"
-        href="http://google.com"
-      >
-        <span
-          class="emotion-3"
-        >
-          <span
-            class="emotion-2"
-          >
-            Link
-          </span>
-        </span>
-      </a>
-      <a
-        class="emotion-4"
-      >
-        <span
-          class="emotion-3"
-        >
-          <span
-            class="emotion-2"
-          >
-            callback
-          </span>
-        </span>
-      </a>
-    </div>
-  </div>
-</div>
-`;
diff --git a/lib/components/src/tooltip/__snapshots__/TooltipMessage.stories.storyshot b/lib/components/src/tooltip/__snapshots__/TooltipMessage.stories.storyshot
deleted file mode 100644
index b38f7898aa3e..000000000000
--- a/lib/components/src/tooltip/__snapshots__/TooltipMessage.stories.storyshot
+++ /dev/null
@@ -1,514 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots basics/Tooltip/TooltipMessage default 1`] = `
-.emotion-0 {
-  display: inline-block;
-  cursor: pointer;
-}
-
-.emotion-6 {
-  display: inline-block;
-  z-index: 2147483647;
-  margin-bottom: 10px;
-  margin-top: 0px;
-  margin-left: 0px;
-  margin-right: 0px;
-  background: rgba(255,255,255,0.95);
-  -webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
-  filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
-  border-radius: 8px;
-  font-size: 12px;
-}
-
-.emotion-1 {
-  position: absolute;
-  border-style: solid;
-  margin-bottom: 0px;
-  margin-top: 8px;
-  margin-right: 8px;
-  margin-left: 8px;
-  bottom: -8px;
-  top: autopx;
-  right: autopx;
-  left: autopx;
-  border-bottom-width: 0px;
-  border-top-width: 8px;
-  border-right-width: 8px;
-  border-left-width: 8px;
-  border-top-color: rgba(255,255,255,0.95);
-  border-bottom-color: transparent;
-  border-left-color: transparent;
-  border-right-color: transparent;
-}
-
-.emotion-5 {
-  padding: 15px;
-  width: 280px;
-  box-sizing: border-box;
-}
-
-.emotion-4 {
-  color: #444444;
-  line-height: 18px;
-}
-
-.emotion-2 {
-  font-weight: 900;
-}
-
-<div
-  style="height:300px"
->
-  <div
-    class="emotion-0"
-  >
-    <div>
-      Tooltip
-    </div>
-  </div>
-  <div
-    class="emotion-6"
-    style="position:absolute;top:0;left:0;opacity:0;pointer-events:none"
-  >
-    <div
-      class="emotion-1"
-    />
-    <div
-      class="emotion-5"
-    >
-      <div
-        class="emotion-4"
-      >
-        <div
-          class="emotion-2"
-        >
-          Lorem ipsum dolor sit
-        </div>
-        <span
-          class="emotion-3"
-        >
-          Amet consectatur vestibulum concet durum politu coret weirom
-        </span>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots basics/Tooltip/TooltipMessage minimal message 1`] = `
-.emotion-0 {
-  display: inline-block;
-  cursor: pointer;
-}
-
-.emotion-5 {
-  display: inline-block;
-  z-index: 2147483647;
-  margin-bottom: 10px;
-  margin-top: 0px;
-  margin-left: 0px;
-  margin-right: 0px;
-  background: rgba(255,255,255,0.95);
-  -webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
-  filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
-  border-radius: 8px;
-  font-size: 12px;
-}
-
-.emotion-1 {
-  position: absolute;
-  border-style: solid;
-  margin-bottom: 0px;
-  margin-top: 8px;
-  margin-right: 8px;
-  margin-left: 8px;
-  bottom: -8px;
-  top: autopx;
-  right: autopx;
-  left: autopx;
-  border-bottom-width: 0px;
-  border-top-width: 8px;
-  border-right-width: 8px;
-  border-left-width: 8px;
-  border-top-color: rgba(255,255,255,0.95);
-  border-bottom-color: transparent;
-  border-left-color: transparent;
-  border-right-color: transparent;
-}
-
-.emotion-4 {
-  padding: 15px;
-  width: 280px;
-  box-sizing: border-box;
-}
-
-.emotion-3 {
-  color: #444444;
-  line-height: 18px;
-}
-
-<div
-  style="height:300px"
->
-  <div
-    class="emotion-0"
-  >
-    <div>
-      Tooltip
-    </div>
-  </div>
-  <div
-    class="emotion-5"
-    style="position:absolute;top:0;left:0;opacity:0;pointer-events:none"
-  >
-    <div
-      class="emotion-1"
-    />
-    <div
-      class="emotion-4"
-    >
-      <div
-        class="emotion-3"
-      >
-        <span
-          class="emotion-2"
-        >
-          Amet consectatur vestibulum concet durum politu coret weirom
-        </span>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots basics/Tooltip/TooltipMessage with link 1`] = `
-.emotion-0 {
-  display: inline-block;
-  cursor: pointer;
-}
-
-.emotion-6 {
-  display: inline-block;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  color: #1EA7FD;
-}
-
-.emotion-6 svg path {
-  fill: #1EA7FD;
-}
-
-.emotion-6:hover,
-.emotion-6:focus {
-  cursor: pointer;
-  color: #0297f5;
-}
-
-.emotion-6:hover svg path,
-.emotion-6:focus svg path {
-  fill: #0297f5;
-}
-
-.emotion-6:active {
-  color: #028ee6;
-}
-
-.emotion-6:active svg path {
-  fill: #028ee6;
-}
-
-.emotion-6 svg {
-  display: inline-block;
-  height: 1em;
-  width: 1em;
-  vertical-align: text-top;
-  position: relative;
-  bottom: -0.125em;
-  margin-right: 0.4em;
-}
-
-.emotion-9 {
-  display: inline-block;
-  z-index: 2147483647;
-  margin-bottom: 10px;
-  margin-top: 0px;
-  margin-left: 0px;
-  margin-right: 0px;
-  background: rgba(255,255,255,0.95);
-  -webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
-  filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
-  border-radius: 8px;
-  font-size: 12px;
-}
-
-.emotion-1 {
-  position: absolute;
-  border-style: solid;
-  margin-bottom: 0px;
-  margin-top: 8px;
-  margin-right: 8px;
-  margin-left: 8px;
-  bottom: -8px;
-  top: autopx;
-  right: autopx;
-  left: autopx;
-  border-bottom-width: 0px;
-  border-top-width: 8px;
-  border-right-width: 8px;
-  border-left-width: 8px;
-  border-top-color: rgba(255,255,255,0.95);
-  border-bottom-color: transparent;
-  border-left-color: transparent;
-  border-right-color: transparent;
-}
-
-.emotion-8 {
-  padding: 15px;
-  width: 280px;
-  box-sizing: border-box;
-}
-
-.emotion-4 {
-  color: #444444;
-  line-height: 18px;
-}
-
-.emotion-2 {
-  font-weight: 900;
-}
-
-.emotion-7 {
-  margin-top: 8px;
-  text-align: center;
-}
-
-.emotion-7 > * {
-  margin: 0 8px;
-  font-weight: 900;
-}
-
-<div
-  style="height:300px"
->
-  <div
-    class="emotion-0"
-  >
-    <div>
-      Tooltip
-    </div>
-  </div>
-  <div
-    class="emotion-9"
-    style="position:absolute;top:0;left:0;opacity:0;pointer-events:none"
-  >
-    <div
-      class="emotion-1"
-    />
-    <div
-      class="emotion-8"
-    >
-      <div
-        class="emotion-4"
-      >
-        <div
-          class="emotion-2"
-        >
-          Lorem ipsum dolor sit
-        </div>
-        <span
-          class="emotion-3"
-        >
-          Amet consectatur vestibulum concet durum politu coret weirom
-        </span>
-      </div>
-      <div
-        class="emotion-7"
-      >
-        <a
-          class="emotion-6"
-          href="test"
-        >
-          <span
-            class="emotion-5"
-          >
-            Continue
-          </span>
-        </a>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots basics/Tooltip/TooltipMessage with links 1`] = `
-.emotion-0 {
-  display: inline-block;
-  cursor: pointer;
-}
-
-.emotion-6 {
-  display: inline-block;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  color: #1EA7FD;
-}
-
-.emotion-6 svg path {
-  fill: #1EA7FD;
-}
-
-.emotion-6:hover,
-.emotion-6:focus {
-  cursor: pointer;
-  color: #0297f5;
-}
-
-.emotion-6:hover svg path,
-.emotion-6:focus svg path {
-  fill: #0297f5;
-}
-
-.emotion-6:active {
-  color: #028ee6;
-}
-
-.emotion-6:active svg path {
-  fill: #028ee6;
-}
-
-.emotion-6 svg {
-  display: inline-block;
-  height: 1em;
-  width: 1em;
-  vertical-align: text-top;
-  position: relative;
-  bottom: -0.125em;
-  margin-right: 0.4em;
-}
-
-.emotion-11 {
-  display: inline-block;
-  z-index: 2147483647;
-  margin-bottom: 10px;
-  margin-top: 0px;
-  margin-left: 0px;
-  margin-right: 0px;
-  background: rgba(255,255,255,0.95);
-  -webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
-  filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
-  border-radius: 8px;
-  font-size: 12px;
-}
-
-.emotion-1 {
-  position: absolute;
-  border-style: solid;
-  margin-bottom: 0px;
-  margin-top: 8px;
-  margin-right: 8px;
-  margin-left: 8px;
-  bottom: -8px;
-  top: autopx;
-  right: autopx;
-  left: autopx;
-  border-bottom-width: 0px;
-  border-top-width: 8px;
-  border-right-width: 8px;
-  border-left-width: 8px;
-  border-top-color: rgba(255,255,255,0.95);
-  border-bottom-color: transparent;
-  border-left-color: transparent;
-  border-right-color: transparent;
-}
-
-.emotion-10 {
-  padding: 15px;
-  width: 280px;
-  box-sizing: border-box;
-}
-
-.emotion-4 {
-  color: #444444;
-  line-height: 18px;
-}
-
-.emotion-2 {
-  font-weight: 900;
-}
-
-.emotion-9 {
-  margin-top: 8px;
-  text-align: center;
-}
-
-.emotion-9 > * {
-  margin: 0 8px;
-  font-weight: 900;
-}
-
-<div
-  style="height:300px"
->
-  <div
-    class="emotion-0"
-  >
-    <div>
-      Tooltip
-    </div>
-  </div>
-  <div
-    class="emotion-11"
-    style="position:absolute;top:0;left:0;opacity:0;pointer-events:none"
-  >
-    <div
-      class="emotion-1"
-    />
-    <div
-      class="emotion-10"
-    >
-      <div
-        class="emotion-4"
-      >
-        <div
-          class="emotion-2"
-        >
-          Lorem ipsum dolor sit
-        </div>
-        <span
-          class="emotion-3"
-        >
-          Amet consectatur vestibulum concet durum politu coret weirom
-        </span>
-      </div>
-      <div
-        class="emotion-9"
-      >
-        <a
-          class="emotion-6"
-          href="test"
-        >
-          <span
-            class="emotion-5"
-          >
-            Get more tips
-          </span>
-        </a>
-        <a
-          class="emotion-6"
-          href="test"
-        >
-          <span
-            class="emotion-5"
-          >
-            Done
-          </span>
-        </a>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/lib/components/src/tooltip/__snapshots__/TooltipNote.stories.storyshot b/lib/components/src/tooltip/__snapshots__/TooltipNote.stories.storyshot
deleted file mode 100644
index 0eea0521232a..000000000000
--- a/lib/components/src/tooltip/__snapshots__/TooltipNote.stories.storyshot
+++ /dev/null
@@ -1,54 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots basics/Tooltip/TooltipNote default 1`] = `
-.emotion-0 {
-  display: inline-block;
-  cursor: pointer;
-}
-
-.emotion-2 {
-  display: inline-block;
-  z-index: 2147483647;
-  margin-bottom: 8px;
-  margin-top: 0px;
-  margin-left: 0px;
-  margin-right: 0px;
-}
-
-.emotion-1 {
-  padding: 2px 6px;
-  line-height: 16px;
-  font-size: 10px;
-  font-weight: 700;
-  color: #FFFFFF;
-  box-shadow: 0 0 5px 0 rgba(0,0,0,0.3);
-  border-radius: 4px;
-  white-space: nowrap;
-  pointer-events: none;
-  z-index: -1;
-  background: rgba(0,0,0,0.4);
-  margin: 6px;
-}
-
-<div
-  style="height:300px"
->
-  <div
-    class="emotion-0"
-  >
-    <div>
-      Tooltip
-    </div>
-  </div>
-  <div
-    class="emotion-2"
-    style="position:absolute;top:0;left:0;opacity:0;pointer-events:none"
-  >
-    <div
-      class="emotion-1"
-    >
-      Lorem ipsum dolor
-    </div>
-  </div>
-</div>
-`;
diff --git a/lib/components/src/tooltip/__snapshots__/WithTooltip.stories.storyshot b/lib/components/src/tooltip/__snapshots__/WithTooltip.stories.storyshot
deleted file mode 100644
index 5faba31ab234..000000000000
--- a/lib/components/src/tooltip/__snapshots__/WithTooltip.stories.storyshot
+++ /dev/null
@@ -1,448 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots basics/Tooltip/WithTooltip no chrome 1`] = `
-.emotion-2 {
-  display: inline-block;
-  cursor: pointer;
-}
-
-.emotion-4 {
-  height: 300px;
-}
-
-.emotion-3 {
-  width: 500px;
-  height: 500px;
-  overflow-y: scroll;
-  background: #eee;
-  position: relative;
-}
-
-.emotion-0 {
-  height: 100px;
-}
-
-.emotion-1 {
-  width: 200px;
-  height: 100px;
-  background-color: red;
-  color: white;
-}
-
-<div
-  class="emotion-4"
->
-  <div
-    class="emotion-3"
-  >
-    <div
-      class="emotion-0"
-    />
-    <div
-      class="emotion-2"
-    >
-      <div
-        class="emotion-1"
-      >
-        Click me!
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots basics/Tooltip/WithTooltip simple click 1`] = `
-.emotion-2 {
-  display: inline-block;
-  cursor: pointer;
-}
-
-.emotion-4 {
-  height: 300px;
-}
-
-.emotion-3 {
-  width: 500px;
-  height: 500px;
-  overflow-y: scroll;
-  background: #eee;
-  position: relative;
-}
-
-.emotion-0 {
-  height: 100px;
-}
-
-.emotion-1 {
-  width: 200px;
-  height: 100px;
-  background-color: red;
-  color: white;
-}
-
-<div
-  class="emotion-4"
->
-  <div
-    class="emotion-3"
-  >
-    <div
-      class="emotion-0"
-    />
-    <div
-      class="emotion-2"
-    >
-      <div
-        class="emotion-1"
-      >
-        Click me!
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots basics/Tooltip/WithTooltip simple click closeOnClick 1`] = `
-.emotion-2 {
-  display: inline-block;
-  cursor: pointer;
-}
-
-.emotion-4 {
-  height: 300px;
-}
-
-.emotion-3 {
-  width: 500px;
-  height: 500px;
-  overflow-y: scroll;
-  background: #eee;
-  position: relative;
-}
-
-.emotion-0 {
-  height: 100px;
-}
-
-.emotion-1 {
-  width: 200px;
-  height: 100px;
-  background-color: red;
-  color: white;
-}
-
-<div
-  class="emotion-4"
->
-  <div
-    class="emotion-3"
-  >
-    <div
-      class="emotion-0"
-    />
-    <div
-      class="emotion-2"
-    >
-      <div
-        class="emotion-1"
-      >
-        Click me!
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots basics/Tooltip/WithTooltip simple click start open 1`] = `
-.emotion-2 {
-  display: inline-block;
-  cursor: pointer;
-}
-
-.emotion-8 {
-  display: inline-block;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  color: #1EA7FD;
-}
-
-.emotion-8 svg path {
-  fill: #1EA7FD;
-}
-
-.emotion-8:hover,
-.emotion-8:focus {
-  cursor: pointer;
-  color: #0297f5;
-}
-
-.emotion-8:hover svg path,
-.emotion-8:focus svg path {
-  fill: #0297f5;
-}
-
-.emotion-8:active {
-  color: #028ee6;
-}
-
-.emotion-8:active svg path {
-  fill: #028ee6;
-}
-
-.emotion-8 svg {
-  display: inline-block;
-  height: 1em;
-  width: 1em;
-  vertical-align: text-top;
-  position: relative;
-  bottom: -0.125em;
-  margin-right: 0.4em;
-}
-
-.emotion-11 {
-  display: inline-block;
-  z-index: 2147483647;
-  margin-bottom: 10px;
-  margin-top: 0px;
-  margin-left: 0px;
-  margin-right: 0px;
-  background: rgba(255,255,255,0.95);
-  -webkit-filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
-  filter: drop-shadow(0px 5px 5px rgba(0,0,0,0.05)) drop-shadow(0 1px 3px rgba(0,0,0,0.1));
-  border-radius: 8px;
-  font-size: 12px;
-}
-
-.emotion-3 {
-  position: absolute;
-  border-style: solid;
-  margin-bottom: 0px;
-  margin-top: 8px;
-  margin-right: 8px;
-  margin-left: 8px;
-  bottom: -8px;
-  top: autopx;
-  right: autopx;
-  left: autopx;
-  border-bottom-width: 0px;
-  border-top-width: 8px;
-  border-right-width: 8px;
-  border-left-width: 8px;
-  border-top-color: rgba(255,255,255,0.95);
-  border-bottom-color: transparent;
-  border-left-color: transparent;
-  border-right-color: transparent;
-}
-
-.emotion-10 {
-  padding: 15px;
-  width: 280px;
-  box-sizing: border-box;
-}
-
-.emotion-6 {
-  color: #444444;
-  line-height: 18px;
-}
-
-.emotion-4 {
-  font-weight: 900;
-}
-
-.emotion-9 {
-  margin-top: 8px;
-  text-align: center;
-}
-
-.emotion-9 > * {
-  margin: 0 8px;
-  font-weight: 900;
-}
-
-.emotion-13 {
-  height: 300px;
-}
-
-.emotion-12 {
-  width: 500px;
-  height: 500px;
-  overflow-y: scroll;
-  background: #eee;
-  position: relative;
-}
-
-.emotion-0 {
-  height: 100px;
-}
-
-.emotion-1 {
-  width: 200px;
-  height: 100px;
-  background-color: red;
-  color: white;
-}
-
-<div
-  class="emotion-13"
->
-  <div
-    class="emotion-12"
-  >
-    <div
-      class="emotion-0"
-    />
-    <div
-      class="emotion-2"
-    >
-      <div
-        class="emotion-1"
-      >
-        Click me!
-      </div>
-    </div>
-    <div
-      class="emotion-11"
-      style="position:absolute;top:0;left:0;opacity:0;pointer-events:none"
-    >
-      <div
-        class="emotion-3"
-      />
-      <div
-        class="emotion-10"
-      >
-        <div
-          class="emotion-6"
-        >
-          <div
-            class="emotion-4"
-          >
-            Lorem ipsum dolor sit
-          </div>
-          <span
-            class="emotion-5"
-          >
-            Amet consectatur vestibulum concet durum politu coret weirom
-          </span>
-        </div>
-        <div
-          class="emotion-9"
-        >
-          <a
-            class="emotion-8"
-          >
-            <span
-              class="emotion-7"
-            >
-              Continue
-            </span>
-          </a>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots basics/Tooltip/WithTooltip simple hover 1`] = `
-.emotion-2 {
-  display: inline-block;
-  cursor: pointer;
-}
-
-.emotion-4 {
-  height: 300px;
-}
-
-.emotion-3 {
-  width: 500px;
-  height: 500px;
-  overflow-y: scroll;
-  background: #eee;
-  position: relative;
-}
-
-.emotion-0 {
-  height: 100px;
-}
-
-.emotion-1 {
-  width: 200px;
-  height: 100px;
-  background-color: red;
-  color: white;
-}
-
-<div
-  class="emotion-4"
->
-  <div
-    class="emotion-3"
-  >
-    <div
-      class="emotion-0"
-    />
-    <div
-      class="emotion-2"
-    >
-      <div
-        class="emotion-1"
-      >
-        Hover me!
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots basics/Tooltip/WithTooltip simple hover, functional 1`] = `
-.emotion-2 {
-  display: inline-block;
-  cursor: pointer;
-}
-
-.emotion-4 {
-  height: 300px;
-}
-
-.emotion-3 {
-  width: 500px;
-  height: 500px;
-  overflow-y: scroll;
-  background: #eee;
-  position: relative;
-}
-
-.emotion-0 {
-  height: 100px;
-}
-
-.emotion-1 {
-  width: 200px;
-  height: 100px;
-  background-color: red;
-  color: white;
-}
-
-<div
-  class="emotion-4"
->
-  <div
-    class="emotion-3"
-  >
-    <div
-      class="emotion-0"
-    />
-    <div
-      class="emotion-2"
-    >
-      <div
-        class="emotion-1"
-      >
-        Hover me!
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/lib/components/src/typography/__snapshots__/typography.stories.storyshot b/lib/components/src/typography/__snapshots__/typography.stories.storyshot
deleted file mode 100644
index 5d48136bc13f..000000000000
--- a/lib/components/src/typography/__snapshots__/typography.stories.storyshot
+++ /dev/null
@@ -1,186 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Basics|typography all 1`] = `
-.emotion-16 {
-  padding: 3rem;
-}
-
-.emotion-0 {
-  margin-bottom: 3rem;
-}
-
-.emotion-15 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.emotion-15 > * {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  padding-right: 40px;
-}
-
-.emotion-10 {
-  font-weight: 900;
-}
-
-.emotion-10 > * {
-  margin-bottom: 1rem;
-}
-
-.emotion-1 {
-  font-size: 48px;
-}
-
-.emotion-2 {
-  font-size: 40px;
-}
-
-.emotion-3 {
-  font-size: 32px;
-}
-
-.emotion-4 {
-  font-size: 28px;
-}
-
-.emotion-6 {
-  font-size: 20px;
-}
-
-.emotion-7 {
-  font-size: 16px;
-}
-
-.emotion-8 {
-  font-size: 14px;
-}
-
-.emotion-9 {
-  font-size: 12px;
-}
-
-.emotion-14 > * {
-  margin-bottom: 1rem;
-}
-
-<div
-  class="emotion-16"
->
-  <div
-    class="emotion-0"
-  >
-    <div>
-      <b>
-        Font-family:
-      </b>
-       "Nunito sans", Apple system font ... sans-serif
-    </div>
-    <div>
-      <b>
-        UI text size:
-      </b>
-       13px
-    </div>
-    <div>
-      <b>
-        Document/Markdown text size:
-      </b>
-       14px
-    </div>
-    <div>
-      <b>
-        Code font:
-      </b>
-       
-      <code>
-        Operator Mono, Fira Code, Consolas ... monospace
-      </code>
-    </div>
-    <div>
-      <b>
-        Weights:
-      </b>
-       400(normal), 600(bold), 900(black)
-    </div>
-  </div>
-  <div
-    class="emotion-15"
-  >
-    <div
-      class="emotion-10"
-    >
-      <div
-        class="emotion-1"
-      >
-        48 heading
-      </div>
-      <div
-        class="emotion-2"
-      >
-        40 heading
-      </div>
-      <div
-        class="emotion-3"
-      >
-        32 heading
-      </div>
-      <div
-        class="emotion-4"
-      >
-        28 heading
-      </div>
-      <div
-        class="emotion-4"
-      >
-        24 heading
-      </div>
-      <div
-        class="emotion-6"
-      >
-        20 heading
-      </div>
-      <div
-        class="emotion-7"
-      >
-        16 heading
-      </div>
-      <div
-        class="emotion-8"
-      >
-        14 heading
-      </div>
-      <div
-        class="emotion-9"
-      >
-        12 heading
-      </div>
-    </div>
-    <div
-      class="emotion-14"
-    >
-      <div
-        class="emotion-7"
-      >
-        16 The quick brown fox jumps over the lazy dog
-      </div>
-      <div
-        class="emotion-8"
-      >
-        14 The quick brown fox jumps over the lazy dog
-      </div>
-      <div
-        class="emotion-9"
-      >
-        12 The quick brown fox jumps over the lazy dog
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/lib/components/src/typography/link/__snapshots__/link.stories.storyshot b/lib/components/src/typography/link/__snapshots__/link.stories.storyshot
deleted file mode 100644
index d43a0dd939db..000000000000
--- a/lib/components/src/typography/link/__snapshots__/link.stories.storyshot
+++ /dev/null
@@ -1,664 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Basics|Link cancel w/ href 1`] = `
-.emotion-1 {
-  display: inline-block;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  color: #1EA7FD;
-}
-
-.emotion-1 svg path {
-  fill: #1EA7FD;
-}
-
-.emotion-1:hover,
-.emotion-1:focus {
-  cursor: pointer;
-  color: #0297f5;
-}
-
-.emotion-1:hover svg path,
-.emotion-1:focus svg path {
-  fill: #0297f5;
-}
-
-.emotion-1:active {
-  color: #028ee6;
-}
-
-.emotion-1:active svg path {
-  fill: #028ee6;
-}
-
-.emotion-1 svg {
-  display: inline-block;
-  height: 1em;
-  width: 1em;
-  vertical-align: text-top;
-  position: relative;
-  bottom: -0.125em;
-  margin-right: 0.4em;
-}
-
-<a
-  class="emotion-1"
-  href="http://example.com"
->
-  <span
-    class="emotion-0"
-  >
-    Link
-  </span>
-</a>
-`;
-
-exports[`Storyshots Basics|Link cancel w/ onClick 1`] = `
-.emotion-1 {
-  display: inline-block;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  color: #1EA7FD;
-}
-
-.emotion-1 svg path {
-  fill: #1EA7FD;
-}
-
-.emotion-1:hover,
-.emotion-1:focus {
-  cursor: pointer;
-  color: #0297f5;
-}
-
-.emotion-1:hover svg path,
-.emotion-1:focus svg path {
-  fill: #0297f5;
-}
-
-.emotion-1:active {
-  color: #028ee6;
-}
-
-.emotion-1:active svg path {
-  fill: #028ee6;
-}
-
-.emotion-1 svg {
-  display: inline-block;
-  height: 1em;
-  width: 1em;
-  vertical-align: text-top;
-  position: relative;
-  bottom: -0.125em;
-  margin-right: 0.4em;
-}
-
-<a
-  class="emotion-1"
-  href="/"
->
-  <span
-    class="emotion-0"
-  >
-    Try clicking with different mouse buttons and modifier keys (shift/ctrl/alt/cmd)
-  </span>
-</a>
-`;
-
-exports[`Storyshots Basics|Link no-cancel w/ href 1`] = `
-.emotion-1 {
-  display: inline-block;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  color: #1EA7FD;
-}
-
-.emotion-1 svg path {
-  fill: #1EA7FD;
-}
-
-.emotion-1:hover,
-.emotion-1:focus {
-  cursor: pointer;
-  color: #0297f5;
-}
-
-.emotion-1:hover svg path,
-.emotion-1:focus svg path {
-  fill: #0297f5;
-}
-
-.emotion-1:active {
-  color: #028ee6;
-}
-
-.emotion-1:active svg path {
-  fill: #028ee6;
-}
-
-.emotion-1 svg {
-  display: inline-block;
-  height: 1em;
-  width: 1em;
-  vertical-align: text-top;
-  position: relative;
-  bottom: -0.125em;
-  margin-right: 0.4em;
-}
-
-<a
-  class="emotion-1"
-  href="http://example.com"
->
-  <span
-    class="emotion-0"
-  >
-    Link
-  </span>
-</a>
-`;
-
-exports[`Storyshots Basics|Link no-cancel w/ onClick 1`] = `
-.emotion-1 {
-  display: inline-block;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  color: #1EA7FD;
-}
-
-.emotion-1 svg path {
-  fill: #1EA7FD;
-}
-
-.emotion-1:hover,
-.emotion-1:focus {
-  cursor: pointer;
-  color: #0297f5;
-}
-
-.emotion-1:hover svg path,
-.emotion-1:focus svg path {
-  fill: #0297f5;
-}
-
-.emotion-1:active {
-  color: #028ee6;
-}
-
-.emotion-1:active svg path {
-  fill: #028ee6;
-}
-
-.emotion-1 svg {
-  display: inline-block;
-  height: 1em;
-  width: 1em;
-  vertical-align: text-top;
-  position: relative;
-  bottom: -0.125em;
-  margin-right: 0.4em;
-}
-
-<a
-  class="emotion-1"
-  href="/"
->
-  <span
-    class="emotion-0"
-  >
-    any click will go through
-  </span>
-</a>
-`;
-
-exports[`Storyshots Basics|Link styled links 1`] = `
-.emotion-9 {
-  shape-rendering: inherit;
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-  display: block;
-}
-
-.emotion-8 {
-  fill: currentColor;
-}
-
-.emotion-1 {
-  display: inline-block;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  color: #1EA7FD;
-}
-
-.emotion-1 svg path {
-  fill: #1EA7FD;
-}
-
-.emotion-1:hover,
-.emotion-1:focus {
-  cursor: pointer;
-  color: #0297f5;
-}
-
-.emotion-1:hover svg path,
-.emotion-1:focus svg path {
-  fill: #0297f5;
-}
-
-.emotion-1:active {
-  color: #028ee6;
-}
-
-.emotion-1:active svg path {
-  fill: #028ee6;
-}
-
-.emotion-1 svg {
-  display: inline-block;
-  height: 1em;
-  width: 1em;
-  vertical-align: text-top;
-  position: relative;
-  bottom: -0.125em;
-  margin-right: 0.4em;
-}
-
-.emotion-3 {
-  display: inline-block;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  color: #1EA7FD;
-  color: #999999;
-}
-
-.emotion-3 svg path {
-  fill: #1EA7FD;
-}
-
-.emotion-3:hover,
-.emotion-3:focus {
-  cursor: pointer;
-  color: #0297f5;
-}
-
-.emotion-3:hover svg path,
-.emotion-3:focus svg path {
-  fill: #0297f5;
-}
-
-.emotion-3:active {
-  color: #028ee6;
-}
-
-.emotion-3:active svg path {
-  fill: #028ee6;
-}
-
-.emotion-3 svg {
-  display: inline-block;
-  height: 1em;
-  width: 1em;
-  vertical-align: text-top;
-  position: relative;
-  bottom: -0.125em;
-  margin-right: 0.4em;
-}
-
-.emotion-3 svg path {
-  fill: #999999;
-}
-
-.emotion-3:hover {
-  color: #666666;
-}
-
-.emotion-3:hover svg path {
-  fill: #666666;
-}
-
-.emotion-3:active {
-  color: #444444;
-}
-
-.emotion-3:active svg path {
-  fill: #444444;
-}
-
-.emotion-5 {
-  display: inline-block;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  color: #1EA7FD;
-  color: #666666;
-}
-
-.emotion-5 svg path {
-  fill: #1EA7FD;
-}
-
-.emotion-5:hover,
-.emotion-5:focus {
-  cursor: pointer;
-  color: #0297f5;
-}
-
-.emotion-5:hover svg path,
-.emotion-5:focus svg path {
-  fill: #0297f5;
-}
-
-.emotion-5:active {
-  color: #028ee6;
-}
-
-.emotion-5:active svg path {
-  fill: #028ee6;
-}
-
-.emotion-5 svg {
-  display: inline-block;
-  height: 1em;
-  width: 1em;
-  vertical-align: text-top;
-  position: relative;
-  bottom: -0.125em;
-  margin-right: 0.4em;
-}
-
-.emotion-5 svg path {
-  fill: #666666;
-}
-
-.emotion-5:hover {
-  color: #333333;
-}
-
-.emotion-5:hover svg path {
-  fill: #333333;
-}
-
-.emotion-5:active {
-  color: #999999;
-}
-
-.emotion-5:active svg path {
-  fill: #999999;
-}
-
-.emotion-7 {
-  display: inline-block;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  color: #1EA7FD;
-  color: inherit;
-}
-
-.emotion-7 svg path {
-  fill: #1EA7FD;
-}
-
-.emotion-7:hover,
-.emotion-7:focus {
-  cursor: pointer;
-  color: #0297f5;
-}
-
-.emotion-7:hover svg path,
-.emotion-7:focus svg path {
-  fill: #0297f5;
-}
-
-.emotion-7:active {
-  color: #028ee6;
-}
-
-.emotion-7:active svg path {
-  fill: #028ee6;
-}
-
-.emotion-7 svg {
-  display: inline-block;
-  height: 1em;
-  width: 1em;
-  vertical-align: text-top;
-  position: relative;
-  bottom: -0.125em;
-  margin-right: 0.4em;
-}
-
-.emotion-7:hover,
-.emotion-7:active {
-  color: inherit;
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-
-.emotion-14 svg {
-  height: 1em;
-  width: 1em;
-  vertical-align: middle;
-  position: relative;
-  bottom: 0;
-  margin-right: 0;
-}
-
-.emotion-18 > svg:last-of-type {
-  height: 0.7em;
-  width: 0.7em;
-  margin-right: 0;
-  margin-left: 0.25em;
-  bottom: auto;
-  vertical-align: inherit;
-}
-
-.emotion-18 svg {
-  height: 1em;
-  width: 1em;
-  vertical-align: middle;
-  position: relative;
-  bottom: 0;
-  margin-right: 0;
-}
-
-.emotion-21 {
-  display: inline-block;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  color: #1EA7FD;
-  color: #FFFFFF;
-}
-
-.emotion-21 svg path {
-  fill: #1EA7FD;
-}
-
-.emotion-21:hover,
-.emotion-21:focus {
-  cursor: pointer;
-  color: #0297f5;
-}
-
-.emotion-21:hover svg path,
-.emotion-21:focus svg path {
-  fill: #0297f5;
-}
-
-.emotion-21:active {
-  color: #028ee6;
-}
-
-.emotion-21:active svg path {
-  fill: #028ee6;
-}
-
-.emotion-21 svg {
-  display: inline-block;
-  height: 1em;
-  width: 1em;
-  vertical-align: text-top;
-  position: relative;
-  bottom: -0.125em;
-  margin-right: 0.4em;
-}
-
-.emotion-21 svg path {
-  fill: #FFFFFF;
-}
-
-.emotion-21:hover {
-  color: #F8F8F8;
-}
-
-.emotion-21:hover svg path {
-  fill: #F8F8F8;
-}
-
-.emotion-21:active {
-  color: #F3F3F3;
-}
-
-.emotion-21:active svg path {
-  fill: #F3F3F3;
-}
-
-<div>
-  <a
-    class="emotion-1"
-    href="http://google.com"
-  >
-    <span
-      class="emotion-0"
-    >
-      Default
-    </span>
-  </a>
-  <br />
-  <a
-    class="emotion-3"
-    href="http://google.com"
-  >
-    <span
-      class="emotion-0"
-    >
-      Secondary
-    </span>
-  </a>
-  <br />
-  <a
-    class="emotion-5"
-    href="http://google.com"
-  >
-    <span
-      class="emotion-0"
-    >
-      tertiary
-    </span>
-  </a>
-  <br />
-  <a
-    class="emotion-7"
-    href="http://google.com"
-  >
-    <span
-      class="emotion-0"
-    >
-      nochrome
-    </span>
-  </a>
-  <br />
-  <a
-    class="emotion-1"
-    href="http://google.com"
-  >
-    <span
-      class="emotion-0"
-    >
-      <svg
-        class="emotion-9"
-        viewBox="0 0 1024 1024"
-      >
-        <path
-          class="emotion-8"
-          d="M371 147c-14 0-126 3-245 91 0 0-126 227-126 507 0 0 74 126 268 132l58-71c-111-34-153-103-153-103l24 15 4 2 8 4a668 668 0 0 0 420 68 629 629 0 0 0 228-89s-44 71-159 103l58 71c194-7 268-133 268-132 0-280-126-507-126-507-126-94-246-91-246-91l-12 14a576 576 0 0 1 218 110 729 729 0 0 0-441-81l-15 1c-31 4-105 14-199 56-33 14-52 24-52 24s72-69 230-114l-9-10h-1zm-23 323c50 0 91 43 90 97 0 53-40 96-90 96-49 0-89-43-89-96 0-54 39-97 89-97zm321 0c49 0 89 43 89 97 0 53-39 96-89 96s-90-43-90-96c0-54 40-97 90-97z"
-        />
-      </svg>
-      With icon in front
-    </span>
-  </a>
-  <br />
-  <a
-    class="emotion-1"
-    href="http://google.com"
-  >
-    <span
-      class="emotion-14"
-    >
-      <svg
-        class="emotion-9"
-        viewBox="0 0 1024 1024"
-      >
-        <path
-          class="emotion-8"
-          d="M920.032 127.858h-816c-22.092 0-40 17.908-40 40v688c0 22.092 17.908 40 40 40h316.578c1.13 0.096 2.266 0.172 3.422 0.172s2.292-0.078 3.424-0.172h492.576c22.092 0 40-17.908 40-40v-688c0-22.092-17.908-40-40-40zM144.032 207.858h240v608h-240v-608zM880.032 815.858h-416v-608h416v608zM198.734 288.030c0-17.674 14.328-32 32.002-32h66.396c17.672 0 32 14.326 32 32 0 17.676-14.324 32-32 32h-66.398c-17.674 0-32-14.326-32-32zM198.734 416.030c0-17.674 14.328-32 32.002-32h66.396c17.672 0 32 14.326 32 32 0 17.676-14.324 32-32 32h-66.398c-17.674 0-32-14.326-32-32zM198.734 544.030c0-17.674 14.328-32 32.002-32h66.396c17.672 0 32 14.326 32 32 0 17.676-14.324 32-32 32h-66.398c-17.674 0-32-14.326-32-32z"
-        />
-      </svg>
-    </span>
-  </a>
-  <br />
-  <a
-    class="emotion-1"
-    href="http://google.com"
-  >
-    <span
-      class="emotion-18"
-    >
-      With arrow behind
-      <svg
-        class="emotion-9"
-        viewBox="0 0 1024 1024"
-      >
-        <path
-          class="emotion-8"
-          d="M768.072 514.022c0 10.236-3.904 20.47-11.712 28.282l-344.098 344.156c-15.62 15.624-40.946 15.624-56.568 0.006-15.622-15.622-15.624-40.948-0.006-56.568l315.82-315.876-315.868-315.922c-15.618-15.624-15.618-40.952 0.004-56.568 15.624-15.62 40.95-15.618 56.57 0.006l344.144 344.204c7.81 7.81 11.714 18.044 11.714 28.28z"
-        />
-      </svg>
-    </span>
-  </a>
-  <br />
-  <span
-    style="background:#333"
-  >
-    <a
-      class="emotion-21"
-      href="http://google.com"
-    >
-      <span
-        class="emotion-0"
-      >
-        Inverted colors
-      </span>
-    </a>
-  </span>
-  <br />
-</div>
-`;
diff --git a/lib/core-events/package.json b/lib/core-events/package.json
index 15c2b5fbff47..a953373b8359 100644
--- a/lib/core-events/package.json
+++ b/lib/core-events/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core-events",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "Event names used in storybook core",
   "keywords": [
     "storybook"
diff --git a/lib/core/package.json b/lib/core/package.json
index 6f3d6c8b1fae..9a6bd428f5ba 100644
--- a/lib/core/package.json
+++ b/lib/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
@@ -25,15 +25,15 @@
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/plugin-transform-react-constant-elements": "^7.2.0",
     "@babel/preset-env": "^7.4.5",
-    "@storybook/addons": "5.2.0-alpha.30",
-    "@storybook/channel-postmessage": "5.2.0-alpha.30",
-    "@storybook/client-api": "5.2.0-alpha.30",
-    "@storybook/client-logger": "5.2.0-alpha.30",
-    "@storybook/core-events": "5.2.0-alpha.30",
-    "@storybook/node-logger": "5.2.0-alpha.30",
-    "@storybook/router": "5.2.0-alpha.30",
-    "@storybook/theming": "5.2.0-alpha.30",
-    "@storybook/ui": "5.2.0-alpha.30",
+    "@storybook/addons": "5.2.0-alpha.36",
+    "@storybook/channel-postmessage": "5.2.0-alpha.36",
+    "@storybook/client-api": "5.2.0-alpha.36",
+    "@storybook/client-logger": "5.2.0-alpha.36",
+    "@storybook/core-events": "5.2.0-alpha.36",
+    "@storybook/node-logger": "5.2.0-alpha.36",
+    "@storybook/router": "5.2.0-alpha.36",
+    "@storybook/theming": "5.2.0-alpha.36",
+    "@storybook/ui": "5.2.0-alpha.36",
     "airbnb-js-shims": "^1 || ^2",
     "ansi-to-html": "^0.6.11",
     "autoprefixer": "^9.4.9",
diff --git a/lib/core/src/client/preview/start.js b/lib/core/src/client/preview/start.js
index a4a33b914e03..2ba30f35876f 100644
--- a/lib/core/src/client/preview/start.js
+++ b/lib/core/src/client/preview/start.js
@@ -190,11 +190,35 @@ export default function start(render, { decorateStory } = {}) {
       addons.getChannel().emit(Events.STORY_CHANGED, id);
     }
 
+    // Docs view renders into a different root ID to avoid conflicts
+    // with the user's view layer. Therefore we need to clean up whenever
+    // we transition between view modes
+    if (viewMode !== previousViewMode) {
+      switch (viewMode) {
+        case 'docs': {
+          document.getElementById('root').setAttribute('hidden', true);
+          document.getElementById('docs-root').removeAttribute('hidden');
+          break;
+        }
+        case 'story':
+        default: {
+          if (previousViewMode === 'docs') {
+            document.getElementById('docs-root').setAttribute('hidden', true);
+            ReactDOM.unmountComponentAtNode(document.getElementById('docs-root'));
+            document.getElementById('root').removeAttribute('hidden');
+          }
+        }
+      }
+    }
+    // Given a cleaned up state, render the appropriate view mode
     switch (viewMode) {
       case 'docs': {
         const NoDocs = () => <div style={{ fontFamily: 'sans-serif' }}>No docs found</div>;
         const StoryDocs = (parameters && parameters.docs) || NoDocs;
-        ReactDOM.render(<StoryDocs context={renderContext} />, document.getElementById('root'));
+        ReactDOM.render(
+          <StoryDocs context={renderContext} />,
+          document.getElementById('docs-root')
+        );
         break;
       }
       case 'story':
@@ -323,9 +347,9 @@ export default function start(render, { decorateStory } = {}) {
 
       Object.keys(exports).forEach(key => {
         if (isExportStory(key, meta)) {
-          const story = exports[key];
-          const { title = story.title || key, parameters } = story;
-          kind.add(title, story, parameters);
+          const storyFn = exports[key];
+          const { name, parameters } = storyFn.story || {};
+          kind.add(name || key, storyFn, parameters);
         }
       });
 
diff --git a/lib/core/src/server/build-dev.js b/lib/core/src/server/build-dev.js
index 5290bf067a46..8ee8062ac87e 100644
--- a/lib/core/src/server/build-dev.js
+++ b/lib/core/src/server/build-dev.js
@@ -16,6 +16,8 @@ import semver from 'semver';
 import { stripIndents } from 'common-tags';
 import Table from 'cli-table3';
 import prettyTime from 'pretty-hrtime';
+import inquirer from 'inquirer';
+import detectFreePort from 'detect-port';
 
 import storybook from './dev-server';
 import { getDevCli } from './cli';
@@ -35,6 +37,12 @@ const writeStats = async (name, stats) => {
   );
 };
 
+const getFreePort = port =>
+  detectFreePort(port).catch(error => {
+    logger.error(error);
+    process.exit(-1);
+  });
+
 async function getServer(app, options) {
   if (!options.https) {
     return http.createServer(app);
@@ -238,7 +246,24 @@ function openInBrowser(address) {
 
 export async function buildDevStandalone(options) {
   try {
-    const { port, host, extendServer } = options;
+    const { host, extendServer } = options;
+
+    const port = await getFreePort(options.port);
+
+    if (!options.ci && !options.smokeTest && options.port != null && port !== options.port) {
+      const { shouldChangePort } = await inquirer.prompt({
+        type: 'confirm',
+        default: true,
+        name: 'shouldChangePort',
+        message: `Port ${
+          options.port
+        } is not available. Would you like to run Storybook on port ${port} instead?`,
+      });
+
+      if (!shouldChangePort) {
+        process.exit(1);
+      }
+    }
 
     // Used with `app.listen` below
     const listenAddr = [port];
@@ -343,6 +368,7 @@ export async function buildDev({ packageJson, ...loadOptions }) {
     ...loadOptions,
     packageJson,
     configDir: loadOptions.configDir || cliOptions.configDir || './.storybook',
+    ignorePreview: !!cliOptions.previewUrl,
     docsMode: !!cliOptions.docs,
   });
 }
diff --git a/lib/core/src/server/build-static.js b/lib/core/src/server/build-static.js
index 853edf9c5bc0..90990f2c2ec0 100644
--- a/lib/core/src/server/build-static.js
+++ b/lib/core/src/server/build-static.js
@@ -124,6 +124,7 @@ async function buildManager(configType, outputDir, configDir, options) {
     corePresets: [require.resolve('./manager/manager-preset.js')],
     frameworkPresets: options.frameworkPresets,
     docsMode: options.docsMode,
+    previewUrl: options.previewUrl,
   });
 
   if (options.debugWebpack) {
@@ -204,6 +205,7 @@ export function buildStatic({ packageJson, ...loadOptions }) {
     packageJson,
     configDir: loadOptions.configDir || cliOptions.configDir || './.storybook',
     outputDir: loadOptions.outputDir || cliOptions.outputDir || './storybook-static',
+    ignorePreview: !!cliOptions.previewUrl,
     docsMode: !!cliOptions.docs,
   });
 }
diff --git a/lib/core/src/server/cli/dev.js b/lib/core/src/server/cli/dev.js
index 61ea25e2770f..71136e3c6b1c 100644
--- a/lib/core/src/server/cli/dev.js
+++ b/lib/core/src/server/cli/dev.js
@@ -1,16 +1,9 @@
 import program from 'commander';
 import chalk from 'chalk';
-import detectFreePort from 'detect-port';
 import inquirer from 'inquirer';
 import { logger } from '@storybook/node-logger';
 import { parseList, getEnvConfig } from './utils';
 
-const getFreePort = port =>
-  detectFreePort(port).catch(error => {
-    logger.error(error);
-    process.exit(-1);
-  });
-
 async function getCLI(packageJson) {
   process.env.NODE_ENV = process.env.NODE_ENV || 'development';
 
@@ -36,6 +29,10 @@ async function getCLI(packageJson) {
     .option('--quiet', 'Suppress verbose build output')
     .option('--no-dll', 'Do not use dll reference')
     .option('--debug-webpack', 'Display final webpack configurations for debugging purposes')
+    .option(
+      '--preview-url [string]',
+      'Disables the default storybook preview and lets your use your own'
+    )
     .option('--docs', 'Build a documentation-only site using addon-docs')
     .parse(process.argv);
 
@@ -64,22 +61,7 @@ async function getCLI(packageJson) {
     program.port = parseInt(program.port, 10);
   }
 
-  const port = await getFreePort(program.port);
-
-  if (!program.ci && !program.smokeTest && program.port != null && port !== program.port) {
-    const { shouldChangePort } = await inquirer.prompt({
-      type: 'confirm',
-      default: true,
-      name: 'shouldChangePort',
-      message: `Port ${program.port} is not available.
-Would you like to run Storybook on port ${port} instead?`,
-    });
-    if (!shouldChangePort) {
-      process.exit(1);
-    }
-  }
-
-  return { ...program, port };
+  return { ...program };
 }
 
 export default getCLI;
diff --git a/lib/core/src/server/cli/prod.js b/lib/core/src/server/cli/prod.js
index d20e410390f9..99ad8f81076e 100644
--- a/lib/core/src/server/cli/prod.js
+++ b/lib/core/src/server/cli/prod.js
@@ -16,6 +16,10 @@ function getCLI(packageJson) {
     .option('--loglevel [level]', 'Control level of logging during build')
     .option('--no-dll', 'Do not use dll reference')
     .option('--debug-webpack', 'Display final webpack configurations for debugging purposes')
+    .option(
+      '--preview-url [string]',
+      'Disables the default storybook preview and lets your use your own'
+    )
     .option('--docs', 'Build a documentation-only site using addon-docs')
     .parse(process.argv);
 
diff --git a/lib/core/src/server/dev-server.js b/lib/core/src/server/dev-server.js
index 9962d613d89b..0645bbe6ee7e 100644
--- a/lib/core/src/server/dev-server.js
+++ b/lib/core/src/server/dev-server.js
@@ -45,7 +45,6 @@ export default function(options) {
       webpack(config).watch(
         {
           aggregateTimeout: 1,
-          ignored: /node_modules/,
         },
         (err, stats) => {
           managerTotalTime = process.hrtime(startTime);
@@ -99,7 +98,6 @@ export default function(options) {
           publicPath: previewConfig.output.publicPath,
           watchOptions: {
             aggregateTimeout: 1,
-            ignored: /node_modules/,
             ...(previewConfig.watchOptions || {}),
           },
           // this actually causes 0 (regular) output from wdm & webpack
diff --git a/lib/core/src/server/manager/manager-webpack.config.js b/lib/core/src/server/manager/manager-webpack.config.js
index 4d0af42b1acf..8884951613bb 100644
--- a/lib/core/src/server/manager/manager-webpack.config.js
+++ b/lib/core/src/server/manager/manager-webpack.config.js
@@ -28,6 +28,7 @@ export default ({
   outputDir,
   cache,
   babelOptions,
+  previewUrl,
 }) => {
   const { raw, stringified } = loadEnv();
   const isProd = configType === 'PRODUCTION';
@@ -72,7 +73,8 @@ export default ({
       new DefinePlugin({
         'process.env': stringified,
         NODE_ENV: JSON.stringify(process.env.NODE_ENV),
-        DOCS_MODE: docsMode, // global docs mode
+        DOCS_MODE: JSON.stringify(docsMode), // global docs mode
+        PREVIEW_URL: JSON.stringify(previewUrl), // global preview URL
       }),
       // See https://github.com/graphql/graphql-language-service/issues/111#issuecomment-306723400
       new ContextReplacementPlugin(/graphql-language-service-interface[/\\]dist/, /\.js$/),
diff --git a/lib/core/src/server/templates/index.ejs b/lib/core/src/server/templates/index.ejs
index 514b7be4e6e6..5731c9b020b8 100644
--- a/lib/core/src/server/templates/index.ejs
+++ b/lib/core/src/server/templates/index.ejs
@@ -1,48 +1,36 @@
 <!DOCTYPE html>
 <html>
-
-<head>
-  <meta charset="utf-8">
-  <title><%= options.title || 'Storybook'%></title>
-
-  <% if (files.favicon) { %>
-    <link rel="shortcut icon" href="<%= files.favicon%>">
-  <% } %>
-
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-
-  <% if (typeof headHtmlSnippet !== 'undefined') { %>
-    <%= headHtmlSnippet %>
-  <% } %>
-
-  <% files.css.forEach(file => { %>
-    <link href="<%= file %>" rel="stylesheet">
-  <% }); %>
-  
-</head>
-<body>
-
-<% if (typeof bodyHtmlSnippet !== 'undefined') { %>
-  <%= bodyHtmlSnippet %>
-<% } %>
-
-<div id="root"></div>
-
-<% if (options.window) { %>
-<script>
-  <% for (var varName in options.window) { %>
-    window['<%=varName%>'] = <%= JSON.stringify(options.window[varName]) %>;
-  <% } %>
-</script>
-<% } %>
-
-<% dlls.forEach(file => { %>
-  <script src="<%= file %>"></script>
-<% }); %>
-
-<% files.js.forEach(file => { %>
-  <script src="<%= file %>"></script>
-<% }); %>
-
-</body>
+  <head>
+    <meta charset="utf-8" />
+    <title><%= options.title || 'Storybook'%></title>
+
+    <% if (files.favicon) { %>
+    <link rel="shortcut icon" href="<%= files.favicon%>" />
+    <% } %>
+
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <% if (typeof headHtmlSnippet !== 'undefined') { %> <%= headHtmlSnippet %> <% } %> <%
+    files.css.forEach(file => { %>
+    <link href="<%= file %>" rel="stylesheet" />
+    <% }); %>
+  </head>
+  <body>
+    <% if (typeof bodyHtmlSnippet !== 'undefined') { %> <%= bodyHtmlSnippet %> <% } %>
+
+    <div id="root"></div>
+    <div id="docs-root"></div>
+
+    <% if (options.window) { %>
+    <script>
+      <% for (var varName in options.window) { %>
+        window['<%=varName%>'] = <%= JSON.stringify(options.window[varName]) %>;
+      <% } %>
+    </script>
+    <% } %> <% dlls.forEach(file => { %>
+    <script src="<%= file %>"></script>
+    <% }); %> <% files.js.forEach(file => { %>
+    <script src="<%= file %>"></script>
+    <% }); %>
+  </body>
 </html>
diff --git a/lib/node-logger/package.json b/lib/node-logger/package.json
index 96c8b0c5850b..48a9f4ae52a0 100644
--- a/lib/node-logger/package.json
+++ b/lib/node-logger/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/node-logger",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/lib/router/package.json b/lib/router/package.json
index a3ec7bec724d..84d9523f4f47 100644
--- a/lib/router/package.json
+++ b/lib/router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/router",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "Core Storybook Router",
   "keywords": [
     "storybook"
diff --git a/lib/source-loader/package.json b/lib/source-loader/package.json
index 8c0e86df7678..8d6f108fb324 100644
--- a/lib/source-loader/package.json
+++ b/lib/source-loader/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/source-loader",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "Source loader",
   "keywords": [
     "lib",
@@ -22,8 +22,8 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.30",
-    "@storybook/router": "5.2.0-alpha.30",
+    "@storybook/addons": "5.2.0-alpha.36",
+    "@storybook/router": "5.2.0-alpha.36",
     "core-js": "^3.0.1",
     "estraverse": "^4.2.0",
     "global": "^4.3.2",
diff --git a/lib/source-loader/src/abstract-syntax-tree/__snapshots__/inject-decorator.test.js.snap b/lib/source-loader/src/abstract-syntax-tree/__snapshots__/inject-decorator.test.js.snap
index 6cd7c5d832e7..65ba7d29a2ed 100644
--- a/lib/source-loader/src/abstract-syntax-tree/__snapshots__/inject-decorator.test.js.snap
+++ b/lib/source-loader/src/abstract-syntax-tree/__snapshots__/inject-decorator.test.js.snap
@@ -10,7 +10,7 @@ import { storiesOf } from '@storybook/angular';
 })
 class WithNgContentComponent {}
 
-storiesOf('Custom|ng-content', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add('Default', () => ({
+storiesOf('Custom|ng-content', module).add('Default', () => ({
   template: \`<storybook-with-ng-content><h1>This is rendered in ng-content</h1></storybook-with-ng-content>\`,
   moduleMetadata: {
     declarations: [WithNgContentComponent],
@@ -53,14 +53,13 @@ class Table extends React.Component<Props, State> {
   }
 }
 
-const stories = storiesOf('Table', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__));
+const stories = storiesOf('Table', module);
 stories.add('Flow Class', withInfo('Lorum Ipsum Nem')(() => <Table />));
 "
 `;
 
 exports[`inject-decorator injectDecorator option is false - ts does not inject stories decorator after the all "storiesOf" functions 1`] = `
-"var addSourceDecorator = require(\\"@storybook/source-loader\\").addSource;
-import { Component } from '@angular/core';
+"import { Component } from '@angular/core';
 import { Store, StoreModule } from '@ngrx/store';
 import { storiesOf, moduleMetadata } from '@storybook/angular';
 
@@ -105,7 +104,7 @@ import FlowTypeButton from '../components/FlowTypeButton';
 import BaseButton from '../components/BaseButton';
 import TableComponent from '../components/TableComponent';
 
-storiesOf('Addons|Info.React Docgen', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__))
+storiesOf('Addons|Info.React Docgen', module)
   .add(
     'Comments from PropType declarations',
     withInfo(
@@ -136,12 +135,12 @@ const Button = () => <button />;
 Maybe include a [link](http://storybook.js.org) to your project as well.
 \`;
 
-storiesOf('Addons|Info.Markdown', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add(
+storiesOf('Addons|Info.Markdown', module).add(
   'Displays Markdown in description',
   withInfo(markdownDescription)(() => <BaseButton onClick={action('clicked')} label=\\"Button\\" />)
 );
 
-storiesOf('Addons|Info.Options.inline', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add(
+storiesOf('Addons|Info.Options.inline', module).add(
   'Inlines component inside story',
   withInfo({
     text: 'Component should be inlined between description and PropType table',
@@ -149,7 +148,7 @@ storiesOf('Addons|Info.Options.inline', module).addDecorator(withSourceLoader(__
   })(() => <BaseButton label=\\"Button\\" />)
 );
 
-storiesOf('Addons|Info.Options.header', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add(
+storiesOf('Addons|Info.Options.header', module).add(
   'Shows or hides Info Addon header',
   withInfo({
     text: 'The Info Addon header should be hidden',
@@ -157,7 +156,7 @@ storiesOf('Addons|Info.Options.header', module).addDecorator(withSourceLoader(__
   })(() => <BaseButton label=\\"Button\\" />)
 );
 
-storiesOf('Addons|Info.Options.source', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add(
+storiesOf('Addons|Info.Options.source', module).add(
   'Shows or hides Info Addon source',
   withInfo({
     text: 'The Info Addon source section should be hidden',
@@ -165,7 +164,7 @@ storiesOf('Addons|Info.Options.source', module).addDecorator(withSourceLoader(__
   })(() => <BaseButton label=\\"Button\\" />)
 );
 
-storiesOf('Addons|Info.Options.propTables', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add(
+storiesOf('Addons|Info.Options.propTables', module).add(
   'Shows additional component prop tables',
   withInfo({
     text: 'There should be a prop table added for a component not included in the story',
@@ -173,7 +172,7 @@ storiesOf('Addons|Info.Options.propTables', module).addDecorator(withSourceLoade
   })(() => <BaseButton label=\\"Button\\" />)
 );
 
-storiesOf('Addons|Info.Options.propTablesExclude', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add(
+storiesOf('Addons|Info.Options.propTablesExclude', module).add(
   'Exclude component from prop tables',
   withInfo({
     text: 'This can exclude extraneous components from being displayed in prop tables.',
@@ -186,7 +185,7 @@ storiesOf('Addons|Info.Options.propTablesExclude', module).addDecorator(withSour
   ))
 );
 
-storiesOf('Addons|Info.Options.styles', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__))
+storiesOf('Addons|Info.Options.styles', module)
   .add(
     'Extend info styles with an object',
     withInfo({
@@ -220,14 +219,14 @@ storiesOf('Addons|Info.Options.styles', module).addDecorator(withSourceLoader(__
     })(() => <BaseButton label=\\"Button\\" />)
   );
 
-storiesOf('Addons|Info.Options.TableComponent', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add(
+storiesOf('Addons|Info.Options.TableComponent', module).add(
   'Use a custom component for the table',
   withInfo({
     TableComponent,
   })(() => <BaseButton label=\\"Button\\" />)
 );
 
-storiesOf('Addons|Info.Decorator', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__))
+storiesOf('Addons|Info.Decorator', module)
   .addDecorator((story, context) =>
     withInfo('Info could be used as a global or local decorator as well.')(story)(context)
   )
@@ -239,7 +238,7 @@ const Input = hoc(() => <input type=\\"text\\" />);
 
 const TextArea = hoc(({ children }) => <textarea>{children}</textarea>);
 
-storiesOf('Addons|Info.GitHub issues', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add(
+storiesOf('Addons|Info.GitHub issues', module).add(
   '#1814',
   withInfo('Allow Duplicate DisplayNames for HOC #1814')(() => (
     <div>
@@ -334,11 +333,31 @@ stories.add('Flow Class', withInfo('Lorum Ipsum Nem')(() => <Table />));
 "
 `;
 
-exports[`inject-decorator positive - ts calculates "adds" map 1`] = `Object {}`;
+exports[`inject-decorator positive - ts calculates "adds" map 1`] = `
+Object {
+  "ngrx-store--with-component": Object {
+    "endBody": Object {
+      "col": 3,
+      "line": 32,
+    },
+    "endLoc": Object {
+      "col": 3,
+      "line": 32,
+    },
+    "startBody": Object {
+      "col": 25,
+      "line": 28,
+    },
+    "startLoc": Object {
+      "col": 7,
+      "line": 28,
+    },
+  },
+}
+`;
 
 exports[`inject-decorator positive - ts injects stories decorator after the all "storiesOf" functions 1`] = `
-"var addSourceDecorator = require(\\"@storybook/source-loader\\").addSource;
-import { Component } from '@angular/core';
+"import { Component } from '@angular/core';
 import { Store, StoreModule } from '@ngrx/store';
 import { storiesOf, moduleMetadata } from '@storybook/angular';
 
@@ -358,7 +377,7 @@ class WithStoreComponent {
   }
 }
 
-storiesOf('ngrx|Store', module)
+storiesOf('ngrx|Store', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__))
   .addDecorator(
     moduleMetadata({
       imports: [StoreModule.forRoot({})],
@@ -787,8 +806,8 @@ storiesOf('Addons|Info.GitHub issues', module).addDecorator(withSourceLoader(__S
 `;
 
 exports[`inject-decorator stories with ugly comments in ts should delete ugly comments from the generated story source 1`] = `
-"/* global window */
-/* eslint-disable global-require, import/no-dynamic-require */
+"
+
 
 import React from 'react';
 
@@ -808,17 +827,13 @@ class WithStoreComponent {
   }
 }
 
-/*
- eslint-disable some kind
- of multi line ignore, though
- I'm not sure it's possible.
-*/
+
 
 import { storiesOf } from '@storybook/react';
 
-/* eslint-disable-line */ const x = 0;
+ const x = 0;
+
 
-// eslint-disable-line
 storiesOf('Foo', module)
   .add('bar', () => <div>baz</div>);
 
diff --git a/lib/source-loader/src/abstract-syntax-tree/inject-decorator.js b/lib/source-loader/src/abstract-syntax-tree/inject-decorator.js
index aa620eee0392..9cd8008f9f13 100644
--- a/lib/source-loader/src/abstract-syntax-tree/inject-decorator.js
+++ b/lib/source-loader/src/abstract-syntax-tree/inject-decorator.js
@@ -21,7 +21,7 @@ function extendOptions(source, comments, filepath, options) {
 }
 
 function inject(source, filepath, options = {}, log = message => {}) {
-  const { injectDecorator = true } = options;
+  const { injectDecorator = true, inspectDependencies } = options;
   const obviouslyNotCode = ['md', 'txt', 'json'].includes(options.parser);
   let parser = null;
   try {
@@ -48,7 +48,9 @@ function inject(source, filepath, options = {}, log = message => {}) {
 
   const storySource = generateStorySource(extendOptions(source, comments, filepath, options));
   const newAst = parser.parse(storySource);
-  const { dependencies, storiesOfIdentifiers } = generateDependencies(newAst);
+  const { dependencies, storiesOfIdentifiers } = inspectDependencies
+    ? generateDependencies(newAst)
+    : { dependencies: [], storiesOfIdentifiers: {} };
   const { addsMap, idsToFrameworks } = generateStoriesLocationsMap(newAst, storiesOfIdentifiers);
 
   let newSource = cleanedSource;
diff --git a/lib/source-loader/src/abstract-syntax-tree/inject-decorator.test.js b/lib/source-loader/src/abstract-syntax-tree/inject-decorator.test.js
index 17023390707e..755feb9117fd 100644
--- a/lib/source-loader/src/abstract-syntax-tree/inject-decorator.test.js
+++ b/lib/source-loader/src/abstract-syntax-tree/inject-decorator.test.js
@@ -2,18 +2,13 @@ import fs from 'fs';
 import path from 'path';
 import injectDecorator from './inject-decorator';
 
-const ADD_DECORATOR_STATEMENT = '.addDecorator(withStorySource(__STORY__, __ADDS_MAP__))';
-
 describe('inject-decorator', () => {
   describe('positive', () => {
     const mockFilePath = './__mocks__/inject-decorator.stories.txt';
     const source = fs.readFileSync(mockFilePath, 'utf-8');
-    const result = injectDecorator(
-      source,
-      ADD_DECORATOR_STATEMENT,
-      path.resolve(__dirname, mockFilePath),
-      { parser: 'javascript' }
-    );
+    const result = injectDecorator(source, path.resolve(__dirname, mockFilePath), {
+      parser: 'javascript',
+    });
 
     it('returns "changed" flag', () => {
       expect(result.changed).toBeTruthy();
@@ -31,12 +26,9 @@ describe('inject-decorator', () => {
   describe('positive - angular', () => {
     const mockFilePath = './__mocks__/inject-decorator.angular-stories.txt';
     const source = fs.readFileSync(mockFilePath, 'utf-8');
-    const result = injectDecorator(
-      source,
-      ADD_DECORATOR_STATEMENT,
-      path.resolve(__dirname, mockFilePath),
-      { parser: 'typescript' }
-    );
+    const result = injectDecorator(source, path.resolve(__dirname, mockFilePath), {
+      parser: 'typescript',
+    });
 
     it('returns "changed" flag', () => {
       expect(result.changed).toBeTruthy();
@@ -54,12 +46,9 @@ describe('inject-decorator', () => {
   describe('positive - flow', () => {
     const mockFilePath = './__mocks__/inject-decorator.flow-stories.txt';
     const source = fs.readFileSync(mockFilePath, 'utf-8');
-    const result = injectDecorator(
-      source,
-      ADD_DECORATOR_STATEMENT,
-      path.resolve(__dirname, mockFilePath),
-      { parser: 'flow' }
-    );
+    const result = injectDecorator(source, path.resolve(__dirname, mockFilePath), {
+      parser: 'flow',
+    });
 
     it('returns "changed" flag', () => {
       expect(result.changed).toBeTruthy();
@@ -77,12 +66,9 @@ describe('inject-decorator', () => {
   describe('positive - ts', () => {
     const mockFilePath = './__mocks__/inject-decorator.ts.txt';
     const source = fs.readFileSync(mockFilePath, 'utf-8');
-    const result = injectDecorator(
-      source,
-      ADD_DECORATOR_STATEMENT,
-      path.resolve(__dirname, mockFilePath),
-      { parser: 'typescript' }
-    );
+    const result = injectDecorator(source, path.resolve(__dirname, mockFilePath), {
+      parser: 'typescript',
+    });
 
     it('returns "changed" flag', () => {
       expect(result.changed).toBeTruthy();
@@ -100,12 +86,9 @@ describe('inject-decorator', () => {
   describe('stories with ugly comments', () => {
     const mockFilePath = './__mocks__/inject-decorator.ugly-comments-stories.txt';
     const source = fs.readFileSync(mockFilePath, 'utf-8');
-    const result = injectDecorator(
-      source,
-      ADD_DECORATOR_STATEMENT,
-      path.resolve(__dirname, mockFilePath),
-      { parser: 'javascript' }
-    );
+    const result = injectDecorator(source, path.resolve(__dirname, mockFilePath), {
+      parser: 'javascript',
+    });
 
     it('should delete ugly comments from the generated story source', () => {
       expect(result.storySource).toMatchSnapshot();
@@ -115,12 +98,9 @@ describe('inject-decorator', () => {
   describe('stories with ugly comments in ts', () => {
     const mockFilePath = './__mocks__/inject-decorator.ts.ugly-comments-stories.txt';
     const source = fs.readFileSync(mockFilePath, 'utf-8');
-    const result = injectDecorator(
-      source,
-      ADD_DECORATOR_STATEMENT,
-      path.resolve(__dirname, mockFilePath),
-      { parser: 'typescript' }
-    );
+    const result = injectDecorator(source, path.resolve(__dirname, mockFilePath), {
+      parser: 'typescript',
+    });
 
     it('should delete ugly comments from the generated story source', () => {
       expect(result.storySource).toMatchSnapshot();
@@ -131,11 +111,7 @@ describe('inject-decorator', () => {
     const mockFilePath = './__mocks__/inject-decorator.no-stories.txt';
     const source = fs.readFileSync(mockFilePath, 'utf-8');
 
-    const result = injectDecorator(
-      source,
-      ADD_DECORATOR_STATEMENT,
-      path.resolve(__dirname, mockFilePath)
-    );
+    const result = injectDecorator(source, path.resolve(__dirname, mockFilePath));
 
     expect(result.changed).toBeFalsy();
     expect(result.addsMap).toEqual({});
@@ -145,15 +121,10 @@ describe('inject-decorator', () => {
   describe('injectDecorator option is false', () => {
     const mockFilePath = './__mocks__/inject-decorator.stories.txt';
     const source = fs.readFileSync(mockFilePath, 'utf-8');
-    const result = injectDecorator(
-      source,
-      ADD_DECORATOR_STATEMENT,
-      path.resolve(__dirname, mockFilePath),
-      {
-        injectDecorator: false,
-        parser: 'javascript',
-      }
-    );
+    const result = injectDecorator(source, path.resolve(__dirname, mockFilePath), {
+      injectDecorator: false,
+      parser: 'javascript',
+    });
 
     it('does not inject stories decorator after the all "storiesOf" functions', () => {
       expect(result.source).toMatchSnapshot();
@@ -163,15 +134,10 @@ describe('inject-decorator', () => {
   describe('injectDecorator option is false - angular', () => {
     const mockFilePath = './__mocks__/inject-decorator.angular-stories.txt';
     const source = fs.readFileSync(mockFilePath, 'utf-8');
-    const result = injectDecorator(
-      source,
-      ADD_DECORATOR_STATEMENT,
-      path.resolve(__dirname, mockFilePath),
-      {
-        injectDecorator: false,
-        parser: 'typescript',
-      }
-    );
+    const result = injectDecorator(source, path.resolve(__dirname, mockFilePath), {
+      injectDecorator: false,
+      parser: 'typescript',
+    });
 
     it('does not inject stories decorator after the all "storiesOf" functions', () => {
       expect(result.source).toMatchSnapshot();
@@ -181,15 +147,10 @@ describe('inject-decorator', () => {
   describe('injectDecorator option is false - flow', () => {
     const mockFilePath = './__mocks__/inject-decorator.flow-stories.txt';
     const source = fs.readFileSync(mockFilePath, 'utf-8');
-    const result = injectDecorator(
-      source,
-      ADD_DECORATOR_STATEMENT,
-      path.resolve(__dirname, mockFilePath),
-      {
-        injectDecorator: false,
-        parser: 'flow',
-      }
-    );
+    const result = injectDecorator(source, path.resolve(__dirname, mockFilePath), {
+      injectDecorator: false,
+      parser: 'flow',
+    });
 
     it('does not inject stories decorator after the all "storiesOf" functions', () => {
       expect(result.source).toMatchSnapshot();
@@ -199,15 +160,10 @@ describe('inject-decorator', () => {
   describe('injectDecorator option is false - ts', () => {
     const mockFilePath = './__mocks__/inject-decorator.ts.txt';
     const source = fs.readFileSync(mockFilePath, 'utf-8');
-    const result = injectDecorator(
-      source,
-      ADD_DECORATOR_STATEMENT,
-      path.resolve(__dirname, mockFilePath),
-      {
-        injectDecorator: false,
-        parser: 'typescript',
-      }
-    );
+    const result = injectDecorator(source, path.resolve(__dirname, mockFilePath), {
+      injectDecorator: false,
+      parser: 'typescript',
+    });
 
     it('does not inject stories decorator after the all "storiesOf" functions', () => {
       expect(result.source).toMatchSnapshot();
diff --git a/lib/source-loader/src/dependencies-lookup/readAsObject.js b/lib/source-loader/src/dependencies-lookup/readAsObject.js
index 4ab9f83d8b8b..3cff31e0b93b 100644
--- a/lib/source-loader/src/dependencies-lookup/readAsObject.js
+++ b/lib/source-loader/src/dependencies-lookup/readAsObject.js
@@ -26,6 +26,7 @@ function extractLocalDependenciesFrom(tree) {
 
 function readAsObject(classLoader, inputSource, mainFile) {
   const options = getOptions(classLoader) || {};
+  const { inspectLocalDependencies } = options;
   const result = injectDecorator(
     inputSource,
     classLoader.resourcePath,
@@ -47,7 +48,9 @@ function readAsObject(classLoader, inputSource, mainFile) {
   const resource = classLoader.resourcePath || classLoader.resource;
 
   const moduleDependencies = (result.dependencies || []).filter(d => d[0] === '.' || d[0] === '/');
-  const workspaceFileNames = moduleDependencies.map(d => path.join(path.dirname(resource), d));
+  const workspaceFileNames = inspectLocalDependencies
+    ? moduleDependencies.map(d => path.join(path.dirname(resource), d))
+    : [];
 
   return Promise.all(
     workspaceFileNames.map(
diff --git a/lib/source-loader/src/preview.js b/lib/source-loader/src/preview.js
index 55f2df746a25..a40d84a72cd2 100644
--- a/lib/source-loader/src/preview.js
+++ b/lib/source-loader/src/preview.js
@@ -36,7 +36,7 @@ function sendEvent(
   });
 }
 
-export function addSource(story, sourceContext) {
+export function addSource(storyFn, sourceContext) {
   const {
     __STORY__: source,
     __ADDS_MAP__: locationsMap = {},
@@ -46,7 +46,7 @@ export function addSource(story, sourceContext) {
     __SOURCE_PREFIX__: prefix,
     __IDS_TO_FRAMEWORKS__: idsToFrameworks,
   } = sourceContext;
-  const decorated = function(context) {
+  const decorated = context => {
     sendEvent(
       context,
       source,
@@ -57,13 +57,12 @@ export function addSource(story, sourceContext) {
       prefix,
       idsToFrameworks
     );
-    if (typeof story === 'function') {
-      return story();
+    if (typeof storyFn === 'function') {
+      return storyFn(context);
     }
-    return story;
+    return storyFn;
   };
-  decorated.storyData = (story || {}).storyData;
-  decorated.title = (story || {}).title;
+  decorated.story = (storyFn || {}).story;
   return decorated;
 }
 
@@ -76,7 +75,7 @@ export function withSource(
   prefix,
   idsToFrameworks
 ) {
-  return (story, context) => {
+  return (storyFn, context) => {
     sendEvent(
       context,
       source,
@@ -87,6 +86,6 @@ export function withSource(
       prefix,
       idsToFrameworks
     );
-    return story();
+    return storyFn(context);
   };
 }
diff --git a/lib/theming/package.json b/lib/theming/package.json
index b7c17abd3e93..45f865791c61 100644
--- a/lib/theming/package.json
+++ b/lib/theming/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/theming",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "Core Storybook Components",
   "keywords": [
     "storybook"
@@ -23,7 +23,7 @@
   "dependencies": {
     "@emotion/core": "^10.0.9",
     "@emotion/styled": "^10.0.7",
-    "@storybook/client-logger": "5.2.0-alpha.30",
+    "@storybook/client-logger": "5.2.0-alpha.36",
     "common-tags": "^1.8.0",
     "core-js": "^3.0.1",
     "deep-object-diff": "^1.1.0",
diff --git a/lib/ui/README.md b/lib/ui/README.md
index ef00985cca40..57178dd4bc22 100644
--- a/lib/ui/README.md
+++ b/lib/ui/README.md
@@ -174,3 +174,14 @@ The above action(or the `handleShortcut` method) accepts events as a constant de
 ### URL Changes
 
 TODO: state we use reach/router customized to query params
+
+### Story Order
+
+Stories are sorted in the order in which they were imported. This can be overridden by adding storySort to the Parameters for the stories in `.storybook/config.js`:
+```js
+addParameters({
+  options: {
+    storySort: (a, b) => a[1].id.localeCompare(b[1].id),
+  },
+});
+```
diff --git a/lib/ui/package.json b/lib/ui/package.json
index 43f667fc49ab..5293115d7e24 100644
--- a/lib/ui/package.json
+++ b/lib/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/ui",
-  "version": "5.2.0-alpha.30",
+  "version": "5.2.0-alpha.36",
   "description": "Core Storybook UI",
   "keywords": [
     "storybook"
@@ -22,14 +22,14 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.30",
-    "@storybook/api": "5.2.0-alpha.30",
-    "@storybook/channels": "5.2.0-alpha.30",
-    "@storybook/client-logger": "5.2.0-alpha.30",
-    "@storybook/components": "5.2.0-alpha.30",
-    "@storybook/core-events": "5.2.0-alpha.30",
-    "@storybook/router": "5.2.0-alpha.30",
-    "@storybook/theming": "5.2.0-alpha.30",
+    "@storybook/addons": "5.2.0-alpha.36",
+    "@storybook/api": "5.2.0-alpha.36",
+    "@storybook/channels": "5.2.0-alpha.36",
+    "@storybook/client-logger": "5.2.0-alpha.36",
+    "@storybook/components": "5.2.0-alpha.36",
+    "@storybook/core-events": "5.2.0-alpha.36",
+    "@storybook/router": "5.2.0-alpha.36",
+    "@storybook/theming": "5.2.0-alpha.36",
     "copy-to-clipboard": "^3.0.8",
     "core-js": "^3.0.1",
     "core-js-pure": "^3.0.1",
diff --git a/lib/ui/src/components/layout/__snapshots__/layout.stories.storyshot b/lib/ui/src/components/layout/__snapshots__/layout.stories.storyshot
deleted file mode 100644
index 8d1cebbbd65b..000000000000
--- a/lib/ui/src/components/layout/__snapshots__/layout.stories.storyshot
+++ /dev/null
@@ -1,3221 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots UI|Layout/Desktop bottom Panel 1`] = `
-.emotion-0 {
-  z-index: 10;
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -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;
-  color: rgba(0,0,0,.1);
-  overflow: hidden;
-  -webkit-transition: color 0.2s linear,background-position 0.2s linear,background-size 0.2s linear,background 0.2s linear;
-  transition: color 0.2s linear,background-position 0.2s linear,background-size 0.2s linear,background 0.2s linear;
-  cursor: col-resize;
-  height: 100%;
-  width: 10px;
-  margin-left: 0;
-  background-image: radial-gradient(at center center,rgba(0,0,0,0.2) 0%,transparent 70%,transparent 100%);
-  background-size: 50px 100%;
-  background-position: 10px 50%;
-  background-repeat: no-repeat;
-}
-
-.emotion-0:hover {
-  color: #1EA7FD;
-}
-
-.emotion-0:hover {
-  background-image: radial-gradient(at center center,rgba(0,0,0,0.2) 0%,transparent 70%,transparent 100%);
-  background-size: 50px 100%;
-  background-position: 0 50%;
-  background-repeat: no-repeat;
-}
-
-.emotion-3 {
-  position: absolute;
-  box-sizing: border-box;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 1;
-  -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,-webkit-transform 0.1s ease-out;
-  -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out;
-  transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out;
-}
-
-.emotion-2 {
-  background: hotpink;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -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;
-  overflow: hidden;
-}
-
-.emotion-5 {
-  position: absolute;
-  box-sizing: border-box;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 1;
-  z-index: 9;
-  -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,-webkit-transform 0.1s ease-out;
-  -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out;
-  transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out;
-}
-
-.emotion-8 {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: #FFFFFF;
-  border-radius: 4px;
-  overflow: hidden;
-  box-shadow: 0 1px 5px 0 rgba(0,0,0,0.1);
-}
-
-.emotion-4 {
-  background: deepskyblue;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -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;
-  overflow: hidden;
-}
-
-.emotion-6 {
-  background: orangered;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -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;
-  overflow: hidden;
-}
-
-.emotion-1 {
-  z-index: 10;
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -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;
-  color: rgba(0,0,0,.1);
-  overflow: hidden;
-  -webkit-transition: color 0.2s linear,background-position 0.2s linear,background-size 0.2s linear,background 0.2s linear;
-  transition: color 0.2s linear,background-position 0.2s linear,background-size 0.2s linear,background 0.2s linear;
-  cursor: row-resize;
-  height: 10px;
-  width: 100%;
-  margin-top: 0;
-  background-image: radial-gradient(at center center,rgba(0,0,0,0.2) 0%,transparent 70%,transparent 100%);
-  background-size: 100% 50px;
-  background-position: 50% 10px;
-  background-repeat: no-repeat;
-}
-
-.emotion-1:hover {
-  color: #1EA7FD;
-}
-
-.emotion-1:hover {
-  background-image: radial-gradient(at center center,rgba(0,0,0,0.2) 0%,transparent 70%,transparent 100%);
-  background-size: 100% 50px;
-  background-position: 50% 0;
-  background-repeat: no-repeat;
-}
-
-.emotion-7 {
-  position: absolute;
-  box-sizing: border-box;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 1;
-  border-top: 1px solid rgba(0,0,0,.1);
-  -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,-webkit-transform 0.1s ease-out;
-  -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out;
-  transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out;
-}
-
-<div
-  style="min-height:600px;min-width:600px"
->
-  <div
-    class="react-draggable emotion-0"
-    style="touch-action:none;transform:translate(200px,0px)"
-  />
-  <div
-    class="react-draggable emotion-1"
-    style="touch-action:none;left:210px;width:804px;margin-top:-10px;transform:translate(0px,461px)"
-  />
-  <div
-    class="emotion-3"
-    style="height:768px;left:0;top:0;width:210px"
-  >
-    <div
-      class="emotion-2"
-      color="hotpink"
-    >
-      <h2
-        style="position:absolute;bottom:0;right:0;color:rgba(0,0,0,0.2);font-size:150px;line-height:150px;margin:-20px"
-      >
-        1
-      </h2>
-      <pre>
-        {
-  "debug": {
-    "animate": true,
-    "hidden": false,
-    "position": {
-      "height": 768,
-      "left": 0,
-      "top": 0,
-      "width": 210
-    }
-  }
-}
-      </pre>
-    </div>
-  </div>
-  <div
-    class="emotion-5"
-    style="height:748px;left:210px;top:10px;width:804px"
-  >
-    <div
-      class="emotion-8"
-    >
-      <div
-        class="emotion-5"
-        style="height:451px;left:0;top:0;width:804px"
-      >
-        <div
-          class="emotion-4"
-          color="deepskyblue"
-        >
-          <h2
-            style="position:absolute;bottom:0;right:0;color:rgba(0,0,0,0.2);font-size:150px;line-height:150px;margin:-20px"
-          >
-            1
-          </h2>
-          <pre>
-            {
-  "id": "main",
-  "debug": {
-    "animate": true,
-    "isFullscreen": false,
-    "position": {
-      "height": 451,
-      "left": 0,
-      "top": 0,
-      "width": 804
-    }
-  }
-}
-          </pre>
-        </div>
-      </div>
-      <div
-        class="emotion-7"
-        style="height:297px;left:0;top:451px;width:804px"
-      >
-        <div
-          class="emotion-6"
-          color="orangered"
-        >
-          <h2
-            style="position:absolute;bottom:0;right:0;color:rgba(0,0,0,0.2);font-size:150px;line-height:150px;margin:-20px"
-          >
-            1
-          </h2>
-          <pre>
-            {
-  "debug": {
-    "animate": true,
-    "align": "bottom",
-    "hidden": false,
-    "position": {
-      "height": 297,
-      "left": 0,
-      "top": 451,
-      "width": 804
-    }
-  }
-}
-          </pre>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots UI|Layout/Desktop default 1`] = `
-.emotion-0 {
-  z-index: 10;
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -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;
-  color: rgba(0,0,0,.1);
-  overflow: hidden;
-  -webkit-transition: color 0.2s linear,background-position 0.2s linear,background-size 0.2s linear,background 0.2s linear;
-  transition: color 0.2s linear,background-position 0.2s linear,background-size 0.2s linear,background 0.2s linear;
-  cursor: col-resize;
-  height: 100%;
-  width: 10px;
-  margin-left: 0;
-  background-image: radial-gradient(at center center,rgba(0,0,0,0.2) 0%,transparent 70%,transparent 100%);
-  background-size: 50px 100%;
-  background-position: 10px 50%;
-  background-repeat: no-repeat;
-}
-
-.emotion-0:hover {
-  color: #1EA7FD;
-}
-
-.emotion-0:hover {
-  background-image: radial-gradient(at center center,rgba(0,0,0,0.2) 0%,transparent 70%,transparent 100%);
-  background-size: 50px 100%;
-  background-position: 0 50%;
-  background-repeat: no-repeat;
-}
-
-.emotion-3 {
-  position: absolute;
-  box-sizing: border-box;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 1;
-  -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,-webkit-transform 0.1s ease-out;
-  -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out;
-  transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out;
-}
-
-.emotion-2 {
-  background: hotpink;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -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;
-  overflow: hidden;
-}
-
-.emotion-5 {
-  position: absolute;
-  box-sizing: border-box;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 1;
-  z-index: 9;
-  -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,-webkit-transform 0.1s ease-out;
-  -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out;
-  transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out;
-}
-
-.emotion-8 {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: #FFFFFF;
-  border-radius: 4px;
-  overflow: hidden;
-  box-shadow: 0 1px 5px 0 rgba(0,0,0,0.1);
-}
-
-.emotion-4 {
-  background: deepskyblue;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -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;
-  overflow: hidden;
-}
-
-.emotion-7 {
-  position: absolute;
-  box-sizing: border-box;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 1;
-  border-left: 1px solid rgba(0,0,0,.1);
-  -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,-webkit-transform 0.1s ease-out;
-  -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out;
-  transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out;
-}
-
-.emotion-6 {
-  background: orangered;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -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;
-  overflow: hidden;
-}
-
-<div
-  style="min-height:600px;min-width:600px"
->
-  <div
-    class="react-draggable emotion-0"
-    style="touch-action:none;transform:translate(200px,0px)"
-  />
-  <div
-    class="react-draggable emotion-0"
-    style="touch-action:none;margin-left:-10px;transform:translate(624px,0px)"
-  />
-  <div
-    class="emotion-3"
-    style="height:768px;left:0;top:0;width:210px"
-  >
-    <div
-      class="emotion-2"
-      color="hotpink"
-    >
-      <h2
-        style="position:absolute;bottom:0;right:0;color:rgba(0,0,0,0.2);font-size:150px;line-height:150px;margin:-20px"
-      >
-        1
-      </h2>
-      <pre>
-        {
-  "debug": {
-    "animate": true,
-    "hidden": false,
-    "position": {
-      "height": 768,
-      "left": 0,
-      "top": 0,
-      "width": 210
-    }
-  }
-}
-      </pre>
-    </div>
-  </div>
-  <div
-    class="emotion-5"
-    style="height:748px;left:210px;top:10px;width:804px"
-  >
-    <div
-      class="emotion-8"
-    >
-      <div
-        class="emotion-5"
-        style="height:748px;left:0;top:0;width:414px"
-      >
-        <div
-          class="emotion-4"
-          color="deepskyblue"
-        >
-          <h2
-            style="position:absolute;bottom:0;right:0;color:rgba(0,0,0,0.2);font-size:150px;line-height:150px;margin:-20px"
-          >
-            1
-          </h2>
-          <pre>
-            {
-  "id": "main",
-  "debug": {
-    "animate": true,
-    "isFullscreen": false,
-    "position": {
-      "height": 748,
-      "left": 0,
-      "top": 0,
-      "width": 414
-    }
-  }
-}
-          </pre>
-        </div>
-      </div>
-      <div
-        class="emotion-7"
-        style="height:748px;left:414px;top:0;width:390px"
-      >
-        <div
-          class="emotion-6"
-          color="orangered"
-        >
-          <h2
-            style="position:absolute;bottom:0;right:0;color:rgba(0,0,0,0.2);font-size:150px;line-height:150px;margin:-20px"
-          >
-            1
-          </h2>
-          <pre>
-            {
-  "debug": {
-    "animate": true,
-    "align": "right",
-    "hidden": false,
-    "position": {
-      "height": 748,
-      "left": 414,
-      "top": 0,
-      "width": 390
-    }
-  }
-}
-          </pre>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots UI|Layout/Desktop full 1`] = `
-.emotion-1 {
-  position: absolute;
-  box-sizing: border-box;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 1;
-  z-index: 9;
-  -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,-webkit-transform 0.1s ease-out;
-  -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out;
-  transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out;
-}
-
-.emotion-0 {
-  background: deepskyblue;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -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;
-  overflow: hidden;
-}
-
-.emotion-3 {
-  position: absolute;
-  box-sizing: border-box;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 1;
-  border-left: 1px solid rgba(0,0,0,.1);
-  -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,-webkit-transform 0.1s ease-out;
-  -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out;
-  transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out;
-}
-
-.emotion-2 {
-  background: orangered;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -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;
-  overflow: hidden;
-}
-
-.emotion-4 {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  box-shadow: none;
-  border-radius: 0;
-}
-
-<div
-  style="min-height:600px;min-width:600px"
->
-  <div
-    class="emotion-1"
-  >
-    <div
-      class="emotion-4"
-    >
-      <div
-        class="emotion-1"
-      >
-        <div
-          class="emotion-0"
-          color="deepskyblue"
-        >
-          <h2
-            style="position:absolute;bottom:0;right:0;color:rgba(0,0,0,0.2);font-size:150px;line-height:150px;margin:-20px"
-          >
-            1
-          </h2>
-          <pre>
-            {
-  "id": "main",
-  "debug": {
-    "animate": true,
-    "isFullscreen": true,
-    "position": {}
-  }
-}
-          </pre>
-        </div>
-      </div>
-      <div
-        class="emotion-3"
-        style="height:748px;left:614px;top:0;width:390px"
-      >
-        <div
-          class="emotion-2"
-          color="orangered"
-        >
-          <h2
-            style="position:absolute;bottom:0;right:0;color:rgba(0,0,0,0.2);font-size:150px;line-height:150px;margin:-20px"
-          >
-            1
-          </h2>
-          <pre>
-            {
-  "debug": {
-    "animate": true,
-    "align": "right",
-    "hidden": true,
-    "position": {
-      "height": 748,
-      "left": 614,
-      "top": 0,
-      "width": 390
-    }
-  }
-}
-          </pre>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots UI|Layout/Desktop no Nav 1`] = `
-.emotion-0 {
-  z-index: 10;
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -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;
-  color: rgba(0,0,0,.1);
-  overflow: hidden;
-  -webkit-transition: color 0.2s linear,background-position 0.2s linear,background-size 0.2s linear,background 0.2s linear;
-  transition: color 0.2s linear,background-position 0.2s linear,background-size 0.2s linear,background 0.2s linear;
-  cursor: col-resize;
-  height: 100%;
-  width: 10px;
-  margin-left: 0;
-  background-image: radial-gradient(at center center,rgba(0,0,0,0.2) 0%,transparent 70%,transparent 100%);
-  background-size: 50px 100%;
-  background-position: 10px 50%;
-  background-repeat: no-repeat;
-}
-
-.emotion-0:hover {
-  color: #1EA7FD;
-}
-
-.emotion-0:hover {
-  background-image: radial-gradient(at center center,rgba(0,0,0,0.2) 0%,transparent 70%,transparent 100%);
-  background-size: 50px 100%;
-  background-position: 0 50%;
-  background-repeat: no-repeat;
-}
-
-.emotion-2 {
-  position: absolute;
-  box-sizing: border-box;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 1;
-  z-index: 9;
-  -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,-webkit-transform 0.1s ease-out;
-  -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out;
-  transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out;
-}
-
-.emotion-5 {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: #FFFFFF;
-  border-radius: 4px;
-  overflow: hidden;
-  box-shadow: 0 1px 5px 0 rgba(0,0,0,0.1);
-}
-
-.emotion-1 {
-  background: deepskyblue;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -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;
-  overflow: hidden;
-}
-
-.emotion-4 {
-  position: absolute;
-  box-sizing: border-box;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 1;
-  border-left: 1px solid rgba(0,0,0,.1);
-  -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,-webkit-transform 0.1s ease-out;
-  -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out;
-  transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out;
-}
-
-.emotion-3 {
-  background: orangered;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -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;
-  overflow: hidden;
-}
-
-<div
-  style="min-height:600px;min-width:600px"
->
-  <div
-    class="react-draggable emotion-0"
-    style="touch-action:none;margin-left:-10px;transform:translate(624px,0px)"
-  />
-  <div
-    class="emotion-2"
-    style="height:748px;left:10px;top:10px;width:1004px"
-  >
-    <div
-      class="emotion-5"
-    >
-      <div
-        class="emotion-2"
-        style="height:748px;left:0;top:0;width:614px"
-      >
-        <div
-          class="emotion-1"
-          color="deepskyblue"
-        >
-          <h2
-            style="position:absolute;bottom:0;right:0;color:rgba(0,0,0,0.2);font-size:150px;line-height:150px;margin:-20px"
-          >
-            1
-          </h2>
-          <pre>
-            {
-  "id": "main",
-  "debug": {
-    "animate": true,
-    "isFullscreen": false,
-    "position": {
-      "height": 748,
-      "left": 0,
-      "top": 0,
-      "width": 614
-    }
-  }
-}
-          </pre>
-        </div>
-      </div>
-      <div
-        class="emotion-4"
-        style="height:748px;left:614px;top:0;width:390px"
-      >
-        <div
-          class="emotion-3"
-          color="orangered"
-        >
-          <h2
-            style="position:absolute;bottom:0;right:0;color:rgba(0,0,0,0.2);font-size:150px;line-height:150px;margin:-20px"
-          >
-            1
-          </h2>
-          <pre>
-            {
-  "debug": {
-    "animate": true,
-    "align": "right",
-    "hidden": false,
-    "position": {
-      "height": 748,
-      "left": 614,
-      "top": 0,
-      "width": 390
-    }
-  }
-}
-          </pre>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots UI|Layout/Desktop no Panel 1`] = `
-.emotion-0 {
-  z-index: 10;
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -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;
-  color: rgba(0,0,0,.1);
-  overflow: hidden;
-  -webkit-transition: color 0.2s linear,background-position 0.2s linear,background-size 0.2s linear,background 0.2s linear;
-  transition: color 0.2s linear,background-position 0.2s linear,background-size 0.2s linear,background 0.2s linear;
-  cursor: col-resize;
-  height: 100%;
-  width: 10px;
-  margin-left: 0;
-  background-image: radial-gradient(at center center,rgba(0,0,0,0.2) 0%,transparent 70%,transparent 100%);
-  background-size: 50px 100%;
-  background-position: 10px 50%;
-  background-repeat: no-repeat;
-}
-
-.emotion-0:hover {
-  color: #1EA7FD;
-}
-
-.emotion-0:hover {
-  background-image: radial-gradient(at center center,rgba(0,0,0,0.2) 0%,transparent 70%,transparent 100%);
-  background-size: 50px 100%;
-  background-position: 0 50%;
-  background-repeat: no-repeat;
-}
-
-.emotion-2 {
-  position: absolute;
-  box-sizing: border-box;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 1;
-  -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,-webkit-transform 0.1s ease-out;
-  -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out;
-  transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out;
-}
-
-.emotion-1 {
-  background: hotpink;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -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;
-  overflow: hidden;
-}
-
-.emotion-4 {
-  position: absolute;
-  box-sizing: border-box;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 1;
-  z-index: 9;
-  -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,-webkit-transform 0.1s ease-out;
-  -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out;
-  transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out;
-}
-
-.emotion-7 {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: #FFFFFF;
-  border-radius: 4px;
-  overflow: hidden;
-  box-shadow: 0 1px 5px 0 rgba(0,0,0,0.1);
-}
-
-.emotion-3 {
-  background: deepskyblue;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -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;
-  overflow: hidden;
-}
-
-.emotion-6 {
-  position: absolute;
-  box-sizing: border-box;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 1;
-  border-left: 1px solid rgba(0,0,0,.1);
-  -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,-webkit-transform 0.1s ease-out;
-  -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out;
-  transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out;
-}
-
-.emotion-5 {
-  background: orangered;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -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;
-  overflow: hidden;
-}
-
-<div
-  style="min-height:600px;min-width:600px"
->
-  <div
-    class="react-draggable emotion-0"
-    style="touch-action:none;transform:translate(200px,0px)"
-  />
-  <div
-    class="emotion-2"
-    style="height:768px;left:0;top:0;width:210px"
-  >
-    <div
-      class="emotion-1"
-      color="hotpink"
-    >
-      <h2
-        style="position:absolute;bottom:0;right:0;color:rgba(0,0,0,0.2);font-size:150px;line-height:150px;margin:-20px"
-      >
-        1
-      </h2>
-      <pre>
-        {
-  "debug": {
-    "animate": true,
-    "hidden": false,
-    "position": {
-      "height": 768,
-      "left": 0,
-      "top": 0,
-      "width": 210
-    }
-  }
-}
-      </pre>
-    </div>
-  </div>
-  <div
-    class="emotion-4"
-    style="height:748px;left:210px;top:10px;width:804px"
-  >
-    <div
-      class="emotion-7"
-    >
-      <div
-        class="emotion-4"
-      >
-        <div
-          class="emotion-3"
-          color="deepskyblue"
-        >
-          <h2
-            style="position:absolute;bottom:0;right:0;color:rgba(0,0,0,0.2);font-size:150px;line-height:150px;margin:-20px"
-          >
-            1
-          </h2>
-          <pre>
-            {
-  "id": "main",
-  "debug": {
-    "animate": true,
-    "isFullscreen": false,
-    "position": {}
-  }
-}
-          </pre>
-        </div>
-      </div>
-      <div
-        class="emotion-6"
-        style="height:748px;left:414px;top:0;width:390px"
-      >
-        <div
-          class="emotion-5"
-          color="orangered"
-        >
-          <h2
-            style="position:absolute;bottom:0;right:0;color:rgba(0,0,0,0.2);font-size:150px;line-height:150px;margin:-20px"
-          >
-            1
-          </h2>
-          <pre>
-            {
-  "debug": {
-    "animate": true,
-    "align": "right",
-    "hidden": true,
-    "position": {
-      "height": 748,
-      "left": 414,
-      "top": 0,
-      "width": 390
-    }
-  }
-}
-          </pre>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots UI|Layout/Desktop no Panel, no Nav 1`] = `
-.emotion-1 {
-  position: absolute;
-  box-sizing: border-box;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 1;
-  z-index: 9;
-  -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,-webkit-transform 0.1s ease-out;
-  -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out;
-  transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out;
-}
-
-.emotion-0 {
-  background: deepskyblue;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -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;
-  overflow: hidden;
-}
-
-.emotion-3 {
-  position: absolute;
-  box-sizing: border-box;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 1;
-  border-left: 1px solid rgba(0,0,0,.1);
-  -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,-webkit-transform 0.1s ease-out;
-  -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out;
-  transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out;
-}
-
-.emotion-2 {
-  background: orangered;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -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;
-  overflow: hidden;
-}
-
-.emotion-4 {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  box-shadow: none;
-  border-radius: 0;
-}
-
-<div
-  style="min-height:600px;min-width:600px"
->
-  <div
-    class="emotion-1"
-  >
-    <div
-      class="emotion-4"
-    >
-      <div
-        class="emotion-1"
-      >
-        <div
-          class="emotion-0"
-          color="deepskyblue"
-        >
-          <h2
-            style="position:absolute;bottom:0;right:0;color:rgba(0,0,0,0.2);font-size:150px;line-height:150px;margin:-20px"
-          >
-            1
-          </h2>
-          <pre>
-            {
-  "id": "main",
-  "debug": {
-    "animate": true,
-    "isFullscreen": true,
-    "position": {}
-  }
-}
-          </pre>
-        </div>
-      </div>
-      <div
-        class="emotion-3"
-        style="height:748px;left:614px;top:0;width:390px"
-      >
-        <div
-          class="emotion-2"
-          color="orangered"
-        >
-          <h2
-            style="position:absolute;bottom:0;right:0;color:rgba(0,0,0,0.2);font-size:150px;line-height:150px;margin:-20px"
-          >
-            1
-          </h2>
-          <pre>
-            {
-  "debug": {
-    "animate": true,
-    "align": "right",
-    "hidden": true,
-    "position": {
-      "height": 748,
-      "left": 614,
-      "top": 0,
-      "width": 390
-    }
-  }
-}
-          </pre>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots UI|Layout/Desktop page 1`] = `
-.emotion-0 {
-  z-index: 10;
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -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;
-  color: rgba(0,0,0,.1);
-  overflow: hidden;
-  -webkit-transition: color 0.2s linear,background-position 0.2s linear,background-size 0.2s linear,background 0.2s linear;
-  transition: color 0.2s linear,background-position 0.2s linear,background-size 0.2s linear,background 0.2s linear;
-  cursor: col-resize;
-  height: 100%;
-  width: 10px;
-  margin-left: 0;
-  background-image: radial-gradient(at center center,rgba(0,0,0,0.2) 0%,transparent 70%,transparent 100%);
-  background-size: 50px 100%;
-  background-position: 10px 50%;
-  background-repeat: no-repeat;
-}
-
-.emotion-0:hover {
-  color: #1EA7FD;
-}
-
-.emotion-0:hover {
-  background-image: radial-gradient(at center center,rgba(0,0,0,0.2) 0%,transparent 70%,transparent 100%);
-  background-size: 50px 100%;
-  background-position: 0 50%;
-  background-repeat: no-repeat;
-}
-
-.emotion-2 {
-  position: absolute;
-  box-sizing: border-box;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 1;
-  -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,-webkit-transform 0.1s ease-out;
-  -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out;
-  transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out;
-}
-
-.emotion-1 {
-  background: hotpink;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -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;
-  overflow: hidden;
-}
-
-.emotion-9 {
-  position: absolute;
-  box-sizing: border-box;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 1;
-  z-index: 9;
-  -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,-webkit-transform 0.1s ease-out;
-  -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out;
-  transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out;
-}
-
-.emotion-8 {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: #FFFFFF;
-  border-radius: 4px;
-  overflow: hidden;
-  box-shadow: 0 1px 5px 0 rgba(0,0,0,0.1);
-}
-
-.emotion-3 {
-  background: deepskyblue;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -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;
-  overflow: hidden;
-}
-
-.emotion-5 {
-  background: orangered;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -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;
-  overflow: hidden;
-}
-
-.emotion-4 {
-  position: absolute;
-  box-sizing: border-box;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  z-index: 9;
-  -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,-webkit-transform 0.1s ease-out;
-  -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out;
-  transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out;
-}
-
-.emotion-6 {
-  position: absolute;
-  box-sizing: border-box;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  border-left: 1px solid rgba(0,0,0,.1);
-  -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,-webkit-transform 0.1s ease-out;
-  -webkit-transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out;
-  transition: width 0.1s ease-out,height 0.1s ease-out,top 0.1s ease-out,left 0.1s ease-out,background 0.1s ease-out,opacity 0.1s ease-out,transform 0.1s ease-out;
-}
-
-.emotion-7 {
-  background: cyan;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -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;
-  overflow: hidden;
-}
-
-<div
-  style="min-height:600px;min-width:600px"
->
-  <div
-    class="react-draggable emotion-0"
-    style="touch-action:none;transform:translate(200px,0px)"
-  />
-  <div
-    class="emotion-2"
-    style="height:768px;left:0;top:0;width:210px"
-  >
-    <div
-      class="emotion-1"
-      color="hotpink"
-    >
-      <h2
-        style="position:absolute;bottom:0;right:0;color:rgba(0,0,0,0.2);font-size:150px;line-height:150px;margin:-20px"
-      >
-        1
-      </h2>
-      <pre>
-        {
-  "debug": {
-    "animate": true,
-    "hidden": false,
-    "position": {
-      "height": 768,
-      "left": 0,
-      "top": 0,
-      "width": 210
-    }
-  }
-}
-      </pre>
-    </div>
-  </div>
-  <div
-    class="emotion-9"
-    style="height:748px;left:210px;top:10px;width:804px"
-  >
-    <div
-      class="emotion-8"
-    >
-      <div
-        class="emotion-4"
-        hidden=""
-      >
-        <div
-          class="emotion-3"
-          color="deepskyblue"
-        >
-          <h2
-            style="position:absolute;bottom:0;right:0;color:rgba(0,0,0,0.2);font-size:150px;line-height:150px;margin:-20px"
-          >
-            1
-          </h2>
-          <pre>
-            {
-  "id": "main",
-  "debug": {
-    "animate": true,
-    "isFullscreen": false,
-    "position": {}
-  }
-}
-          </pre>
-        </div>
-      </div>
-      <div
-        class="emotion-6"
-        hidden=""
-        style="height:748px;left:414px;top:0;width:390px"
-      >
-        <div
-          class="emotion-5"
-          color="orangered"
-        >
-          <h2
-            style="position:absolute;bottom:0;right:0;color:rgba(0,0,0,0.2);font-size:150px;line-height:150px;margin:-20px"
-          >
-            1
-          </h2>
-          <pre>
-            {
-  "debug": {
-    "animate": true,
-    "align": "right",
-    "hidden": true,
-    "position": {
-      "height": 748,
-      "left": 414,
-      "top": 0,
-      "width": 390
-    }
-  }
-}
-          </pre>
-        </div>
-      </div>
-      <div
-        class="emotion-7"
-        color="cyan"
-      >
-        <h2
-          style="position:absolute;bottom:0;right:0;color:rgba(0,0,0,0.2);font-size:150px;line-height:150px;margin:-20px"
-        >
-          1
-        </h2>
-        <pre>
-          {}
-        </pre>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots UI|Layout/Mobile initial 0 1`] = `
-.emotion-8 {
-  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;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding: 0 15px;
-  text-transform: capitalize;
-  -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;
-  cursor: pointer;
-  background: transparent;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  font-weight: bold;
-  font-size: 13px;
-  color: inherit;
-  border-bottom-color: transparent;
-}
-
-.emotion-8:empty {
-  display: none;
-}
-
-.emotion-8:focus {
-  outline: 0 none;
-  border-bottom-color: #1EA7FD;
-}
-
-.emotion-7 {
-  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;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding: 0 15px;
-  text-transform: capitalize;
-  -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;
-  cursor: pointer;
-  background: transparent;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  font-weight: bold;
-  font-size: 13px;
-  color: #1EA7FD;
-  border-bottom-color: #1EA7FD;
-}
-
-.emotion-7:empty {
-  display: none;
-}
-
-.emotion-7:focus {
-  outline: 0 none;
-  border-bottom-color: #1EA7FD;
-}
-
-.emotion-0 {
-  background: hotpink;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -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;
-  overflow: hidden;
-}
-
-.emotion-2 {
-  background: deepskyblue;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -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;
-  overflow: hidden;
-}
-
-.emotion-4 {
-  background: orangered;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -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;
-  overflow: hidden;
-}
-
-.emotion-11 {
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 100vw;
-  height: 100vh;
-  overflow: hidden;
-}
-
-.emotion-6 {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: calc(100% - 40px);
-}
-
-.emotion-1 {
-  -webkit-transition: -webkit-transform .2s ease;
-  -webkit-transition: transform .2s ease;
-  transition: transform .2s ease;
-  position: absolute;
-  top: 0;
-  height: 100%;
-  overflow: auto;
-  background: #FFFFFF;
-  width: 80vw;
-  -webkit-transform: translateX(-80vw);
-  -ms-transform: translateX(-80vw);
-  transform: translateX(-80vw);
-  left: 0;
-  -webkit-transform: translateX(-0px);
-  -ms-transform: translateX(-0px);
-  transform: translateX(-0px);
-}
-
-.emotion-1:nth-of-type(1) {
-  border-right: 1px solid rgba(0,0,0,.1);
-}
-
-.emotion-1:nth-of-type(3) {
-  border-left: 1px solid rgba(0,0,0,.1);
-}
-
-.emotion-3 {
-  -webkit-transition: -webkit-transform .2s ease;
-  -webkit-transition: transform .2s ease;
-  transition: transform .2s ease;
-  position: absolute;
-  top: 0;
-  height: 100%;
-  overflow: auto;
-  background: #FFFFFF;
-  width: 100%;
-  -webkit-transform: translateX(0) scale(1);
-  -ms-transform: translateX(0) scale(1);
-  transform: translateX(0) scale(1);
-  left: 0;
-  -webkit-transform: translateX(40vw) translateY(-42.5vh) translateY(40px) scale(0.2);
-  -ms-transform: translateX(40vw) translateY(-42.5vh) translateY(40px) scale(0.2);
-  transform: translateX(40vw) translateY(-42.5vh) translateY(40px) scale(0.2);
-}
-
-.emotion-3:nth-of-type(1) {
-  border-right: 1px solid rgba(0,0,0,.1);
-}
-
-.emotion-3:nth-of-type(3) {
-  border-left: 1px solid rgba(0,0,0,.1);
-}
-
-.emotion-5 {
-  -webkit-transition: -webkit-transform .2s ease;
-  -webkit-transition: transform .2s ease;
-  transition: transform .2s ease;
-  position: absolute;
-  top: 0;
-  height: 100%;
-  overflow: auto;
-  background: #FFFFFF;
-  width: 80vw;
-  -webkit-transform: translateX(80vw);
-  -ms-transform: translateX(80vw);
-  transform: translateX(80vw);
-  right: 0;
-}
-
-.emotion-5:nth-of-type(1) {
-  border-right: 1px solid rgba(0,0,0,.1);
-}
-
-.emotion-5:nth-of-type(3) {
-  border-left: 1px solid rgba(0,0,0,.1);
-}
-
-.emotion-10 {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 100vw;
-  height: 40px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  box-shadow: 0 1px 5px 0 rgba(0,0,0,0.1);
-  background: #FFFFFF;
-}
-
-.emotion-10 > * {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-<div
-  class="emotion-11"
->
-  <div
-    class="emotion-6"
-  >
-    <div
-      class="emotion-1"
-    >
-      <div
-        class="emotion-0"
-        color="hotpink"
-      >
-        <h2
-          style="position:absolute;bottom:0;right:0;color:rgba(0,0,0,0.2);font-size:150px;line-height:150px;margin:-20px"
-        >
-          1
-        </h2>
-        <pre>
-          {}
-        </pre>
-      </div>
-    </div>
-    <div
-      class="emotion-3"
-    >
-      <div>
-        <div>
-          <div
-            class="emotion-2"
-            color="deepskyblue"
-          >
-            <h2
-              style="position:absolute;bottom:0;right:0;color:rgba(0,0,0,0.2);font-size:150px;line-height:150px;margin:-20px"
-            >
-              1
-            </h2>
-            <pre>
-              {
-  "id": "main",
-  "viewMode": "story",
-  "debug": {
-    "initialActive": 0
-  }
-}
-            </pre>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="emotion-5"
-    >
-      <div
-        class="emotion-4"
-        color="orangered"
-      >
-        <h2
-          style="position:absolute;bottom:0;right:0;color:rgba(0,0,0,0.2);font-size:150px;line-height:150px;margin:-20px"
-        >
-          1
-        </h2>
-        <pre>
-          {
-  "hidden": false
-}
-        </pre>
-      </div>
-    </div>
-  </div>
-  <nav
-    class="emotion-10"
-  >
-    <button
-      class="emotion-7"
-    >
-      Sidebar
-    </button>
-    <button
-      class="emotion-8"
-    >
-      Canvas
-    </button>
-    <button
-      class="emotion-8"
-    >
-      Addons
-    </button>
-  </nav>
-</div>
-`;
-
-exports[`Storyshots UI|Layout/Mobile initial 1 1`] = `
-.emotion-7 {
-  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;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding: 0 15px;
-  text-transform: capitalize;
-  -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;
-  cursor: pointer;
-  background: transparent;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  font-weight: bold;
-  font-size: 13px;
-  color: inherit;
-  border-bottom-color: transparent;
-}
-
-.emotion-7:empty {
-  display: none;
-}
-
-.emotion-7:focus {
-  outline: 0 none;
-  border-bottom-color: #1EA7FD;
-}
-
-.emotion-8 {
-  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;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding: 0 15px;
-  text-transform: capitalize;
-  -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;
-  cursor: pointer;
-  background: transparent;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  font-weight: bold;
-  font-size: 13px;
-  color: #1EA7FD;
-  border-bottom-color: #1EA7FD;
-}
-
-.emotion-8:empty {
-  display: none;
-}
-
-.emotion-8:focus {
-  outline: 0 none;
-  border-bottom-color: #1EA7FD;
-}
-
-.emotion-0 {
-  background: hotpink;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -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;
-  overflow: hidden;
-}
-
-.emotion-2 {
-  background: deepskyblue;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -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;
-  overflow: hidden;
-}
-
-.emotion-4 {
-  background: orangered;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -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;
-  overflow: hidden;
-}
-
-.emotion-11 {
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 100vw;
-  height: 100vh;
-  overflow: hidden;
-}
-
-.emotion-6 {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: calc(100% - 40px);
-}
-
-.emotion-5 {
-  -webkit-transition: -webkit-transform .2s ease;
-  -webkit-transition: transform .2s ease;
-  transition: transform .2s ease;
-  position: absolute;
-  top: 0;
-  height: 100%;
-  overflow: auto;
-  background: #FFFFFF;
-  width: 80vw;
-  -webkit-transform: translateX(80vw);
-  -ms-transform: translateX(80vw);
-  transform: translateX(80vw);
-  right: 0;
-}
-
-.emotion-5:nth-of-type(1) {
-  border-right: 1px solid rgba(0,0,0,.1);
-}
-
-.emotion-5:nth-of-type(3) {
-  border-left: 1px solid rgba(0,0,0,.1);
-}
-
-.emotion-10 {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 100vw;
-  height: 40px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  box-shadow: 0 1px 5px 0 rgba(0,0,0,0.1);
-  background: #FFFFFF;
-}
-
-.emotion-10 > * {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.emotion-1 {
-  -webkit-transition: -webkit-transform .2s ease;
-  -webkit-transition: transform .2s ease;
-  transition: transform .2s ease;
-  position: absolute;
-  top: 0;
-  height: 100%;
-  overflow: auto;
-  background: #FFFFFF;
-  width: 80vw;
-  -webkit-transform: translateX(-80vw);
-  -ms-transform: translateX(-80vw);
-  transform: translateX(-80vw);
-  left: 0;
-}
-
-.emotion-1:nth-of-type(1) {
-  border-right: 1px solid rgba(0,0,0,.1);
-}
-
-.emotion-1:nth-of-type(3) {
-  border-left: 1px solid rgba(0,0,0,.1);
-}
-
-.emotion-3 {
-  -webkit-transition: -webkit-transform .2s ease;
-  -webkit-transition: transform .2s ease;
-  transition: transform .2s ease;
-  position: absolute;
-  top: 0;
-  height: 100%;
-  overflow: auto;
-  background: #FFFFFF;
-  width: 100%;
-  -webkit-transform: translateX(0) scale(1);
-  -ms-transform: translateX(0) scale(1);
-  transform: translateX(0) scale(1);
-  left: 0;
-}
-
-.emotion-3:nth-of-type(1) {
-  border-right: 1px solid rgba(0,0,0,.1);
-}
-
-.emotion-3:nth-of-type(3) {
-  border-left: 1px solid rgba(0,0,0,.1);
-}
-
-<div
-  class="emotion-11"
->
-  <div
-    class="emotion-6"
-  >
-    <div
-      class="emotion-1"
-    >
-      <div
-        class="emotion-0"
-        color="hotpink"
-      >
-        <h2
-          style="position:absolute;bottom:0;right:0;color:rgba(0,0,0,0.2);font-size:150px;line-height:150px;margin:-20px"
-        >
-          1
-        </h2>
-        <pre>
-          {}
-        </pre>
-      </div>
-    </div>
-    <div
-      class="emotion-3"
-    >
-      <div>
-        <div>
-          <div
-            class="emotion-2"
-            color="deepskyblue"
-          >
-            <h2
-              style="position:absolute;bottom:0;right:0;color:rgba(0,0,0,0.2);font-size:150px;line-height:150px;margin:-20px"
-            >
-              1
-            </h2>
-            <pre>
-              {
-  "id": "main",
-  "viewMode": "story",
-  "debug": {
-    "initialActive": 1
-  }
-}
-            </pre>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="emotion-5"
-    >
-      <div
-        class="emotion-4"
-        color="orangered"
-      >
-        <h2
-          style="position:absolute;bottom:0;right:0;color:rgba(0,0,0,0.2);font-size:150px;line-height:150px;margin:-20px"
-        >
-          1
-        </h2>
-        <pre>
-          {
-  "hidden": false
-}
-        </pre>
-      </div>
-    </div>
-  </div>
-  <nav
-    class="emotion-10"
-  >
-    <button
-      class="emotion-7"
-    >
-      Sidebar
-    </button>
-    <button
-      class="emotion-8"
-    >
-      Canvas
-    </button>
-    <button
-      class="emotion-7"
-    >
-      Addons
-    </button>
-  </nav>
-</div>
-`;
-
-exports[`Storyshots UI|Layout/Mobile initial 2 1`] = `
-.emotion-7 {
-  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;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding: 0 15px;
-  text-transform: capitalize;
-  -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;
-  cursor: pointer;
-  background: transparent;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  font-weight: bold;
-  font-size: 13px;
-  color: inherit;
-  border-bottom-color: transparent;
-}
-
-.emotion-7:empty {
-  display: none;
-}
-
-.emotion-7:focus {
-  outline: 0 none;
-  border-bottom-color: #1EA7FD;
-}
-
-.emotion-9 {
-  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;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding: 0 15px;
-  text-transform: capitalize;
-  -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;
-  cursor: pointer;
-  background: transparent;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  font-weight: bold;
-  font-size: 13px;
-  color: #1EA7FD;
-  border-bottom-color: #1EA7FD;
-}
-
-.emotion-9:empty {
-  display: none;
-}
-
-.emotion-9:focus {
-  outline: 0 none;
-  border-bottom-color: #1EA7FD;
-}
-
-.emotion-0 {
-  background: hotpink;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -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;
-  overflow: hidden;
-}
-
-.emotion-2 {
-  background: deepskyblue;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -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;
-  overflow: hidden;
-}
-
-.emotion-4 {
-  background: orangered;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -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;
-  overflow: hidden;
-}
-
-.emotion-11 {
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 100vw;
-  height: 100vh;
-  overflow: hidden;
-}
-
-.emotion-6 {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: calc(100% - 40px);
-}
-
-.emotion-10 {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 100vw;
-  height: 40px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  box-shadow: 0 1px 5px 0 rgba(0,0,0,0.1);
-  background: #FFFFFF;
-}
-
-.emotion-10 > * {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.emotion-1 {
-  -webkit-transition: -webkit-transform .2s ease;
-  -webkit-transition: transform .2s ease;
-  transition: transform .2s ease;
-  position: absolute;
-  top: 0;
-  height: 100%;
-  overflow: auto;
-  background: #FFFFFF;
-  width: 80vw;
-  -webkit-transform: translateX(-80vw);
-  -ms-transform: translateX(-80vw);
-  transform: translateX(-80vw);
-  left: 0;
-}
-
-.emotion-1:nth-of-type(1) {
-  border-right: 1px solid rgba(0,0,0,.1);
-}
-
-.emotion-1:nth-of-type(3) {
-  border-left: 1px solid rgba(0,0,0,.1);
-}
-
-.emotion-3 {
-  -webkit-transition: -webkit-transform .2s ease;
-  -webkit-transition: transform .2s ease;
-  transition: transform .2s ease;
-  position: absolute;
-  top: 0;
-  height: 100%;
-  overflow: auto;
-  background: #FFFFFF;
-  width: 100%;
-  -webkit-transform: translateX(0) scale(1);
-  -ms-transform: translateX(0) scale(1);
-  transform: translateX(0) scale(1);
-  left: 0;
-  -webkit-transform: translateX(-40vw) translateY(-42.5vh) translateY(40px) scale(0.2);
-  -ms-transform: translateX(-40vw) translateY(-42.5vh) translateY(40px) scale(0.2);
-  transform: translateX(-40vw) translateY(-42.5vh) translateY(40px) scale(0.2);
-}
-
-.emotion-3:nth-of-type(1) {
-  border-right: 1px solid rgba(0,0,0,.1);
-}
-
-.emotion-3:nth-of-type(3) {
-  border-left: 1px solid rgba(0,0,0,.1);
-}
-
-.emotion-5 {
-  -webkit-transition: -webkit-transform .2s ease;
-  -webkit-transition: transform .2s ease;
-  transition: transform .2s ease;
-  position: absolute;
-  top: 0;
-  height: 100%;
-  overflow: auto;
-  background: #FFFFFF;
-  width: 80vw;
-  -webkit-transform: translateX(80vw);
-  -ms-transform: translateX(80vw);
-  transform: translateX(80vw);
-  right: 0;
-  -webkit-transform: translateX(0px);
-  -ms-transform: translateX(0px);
-  transform: translateX(0px);
-}
-
-.emotion-5:nth-of-type(1) {
-  border-right: 1px solid rgba(0,0,0,.1);
-}
-
-.emotion-5:nth-of-type(3) {
-  border-left: 1px solid rgba(0,0,0,.1);
-}
-
-<div
-  class="emotion-11"
->
-  <div
-    class="emotion-6"
-  >
-    <div
-      class="emotion-1"
-    >
-      <div
-        class="emotion-0"
-        color="hotpink"
-      >
-        <h2
-          style="position:absolute;bottom:0;right:0;color:rgba(0,0,0,0.2);font-size:150px;line-height:150px;margin:-20px"
-        >
-          1
-        </h2>
-        <pre>
-          {}
-        </pre>
-      </div>
-    </div>
-    <div
-      class="emotion-3"
-    >
-      <div>
-        <div>
-          <div
-            class="emotion-2"
-            color="deepskyblue"
-          >
-            <h2
-              style="position:absolute;bottom:0;right:0;color:rgba(0,0,0,0.2);font-size:150px;line-height:150px;margin:-20px"
-            >
-              1
-            </h2>
-            <pre>
-              {
-  "id": "main",
-  "viewMode": "story",
-  "debug": {
-    "initialActive": 2
-  }
-}
-            </pre>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="emotion-5"
-    >
-      <div
-        class="emotion-4"
-        color="orangered"
-      >
-        <h2
-          style="position:absolute;bottom:0;right:0;color:rgba(0,0,0,0.2);font-size:150px;line-height:150px;margin:-20px"
-        >
-          1
-        </h2>
-        <pre>
-          {
-  "hidden": false
-}
-        </pre>
-      </div>
-    </div>
-  </div>
-  <nav
-    class="emotion-10"
-  >
-    <button
-      class="emotion-7"
-    >
-      Sidebar
-    </button>
-    <button
-      class="emotion-7"
-    >
-      Canvas
-    </button>
-    <button
-      class="emotion-9"
-    >
-      Addons
-    </button>
-  </nav>
-</div>
-`;
-
-exports[`Storyshots UI|Layout/Mobile page 1`] = `
-.emotion-8 {
-  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;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding: 0 15px;
-  text-transform: capitalize;
-  -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;
-  cursor: pointer;
-  background: transparent;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  font-weight: bold;
-  font-size: 13px;
-  color: inherit;
-  border-bottom-color: transparent;
-}
-
-.emotion-8:empty {
-  display: none;
-}
-
-.emotion-8:focus {
-  outline: 0 none;
-  border-bottom-color: #1EA7FD;
-}
-
-.emotion-9 {
-  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;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding: 0 15px;
-  text-transform: capitalize;
-  -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;
-  cursor: pointer;
-  background: transparent;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  font-weight: bold;
-  font-size: 13px;
-  color: #1EA7FD;
-  border-bottom-color: #1EA7FD;
-}
-
-.emotion-9:empty {
-  display: none;
-}
-
-.emotion-9:focus {
-  outline: 0 none;
-  border-bottom-color: #1EA7FD;
-}
-
-.emotion-0 {
-  background: hotpink;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -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;
-  overflow: hidden;
-}
-
-.emotion-2 {
-  background: deepskyblue;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -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;
-  overflow: hidden;
-}
-
-.emotion-5 {
-  background: orangered;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -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;
-  overflow: hidden;
-}
-
-.emotion-3 {
-  background: cyan;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -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;
-  overflow: hidden;
-}
-
-.emotion-12 {
-  position: fixed;
-  left: 0;
-  top: 0;
-  width: 100vw;
-  height: 100vh;
-  overflow: hidden;
-}
-
-.emotion-7 {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: calc(100% - 40px);
-}
-
-.emotion-6 {
-  -webkit-transition: -webkit-transform .2s ease;
-  -webkit-transition: transform .2s ease;
-  transition: transform .2s ease;
-  position: absolute;
-  top: 0;
-  height: 100%;
-  overflow: auto;
-  background: #FFFFFF;
-  width: 80vw;
-  -webkit-transform: translateX(80vw);
-  -ms-transform: translateX(80vw);
-  transform: translateX(80vw);
-  right: 0;
-}
-
-.emotion-6:nth-of-type(1) {
-  border-right: 1px solid rgba(0,0,0,.1);
-}
-
-.emotion-6:nth-of-type(3) {
-  border-left: 1px solid rgba(0,0,0,.1);
-}
-
-.emotion-11 {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 100vw;
-  height: 40px;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  box-shadow: 0 1px 5px 0 rgba(0,0,0,0.1);
-  background: #FFFFFF;
-}
-
-.emotion-11 > * {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.emotion-1 {
-  -webkit-transition: -webkit-transform .2s ease;
-  -webkit-transition: transform .2s ease;
-  transition: transform .2s ease;
-  position: absolute;
-  top: 0;
-  height: 100%;
-  overflow: auto;
-  background: #FFFFFF;
-  width: 80vw;
-  -webkit-transform: translateX(-80vw);
-  -ms-transform: translateX(-80vw);
-  transform: translateX(-80vw);
-  left: 0;
-}
-
-.emotion-1:nth-of-type(1) {
-  border-right: 1px solid rgba(0,0,0,.1);
-}
-
-.emotion-1:nth-of-type(3) {
-  border-left: 1px solid rgba(0,0,0,.1);
-}
-
-.emotion-4 {
-  -webkit-transition: -webkit-transform .2s ease;
-  -webkit-transition: transform .2s ease;
-  transition: transform .2s ease;
-  position: absolute;
-  top: 0;
-  height: 100%;
-  overflow: auto;
-  background: #FFFFFF;
-  width: 100%;
-  -webkit-transform: translateX(0) scale(1);
-  -ms-transform: translateX(0) scale(1);
-  transform: translateX(0) scale(1);
-  left: 0;
-}
-
-.emotion-4:nth-of-type(1) {
-  border-right: 1px solid rgba(0,0,0,.1);
-}
-
-.emotion-4:nth-of-type(3) {
-  border-left: 1px solid rgba(0,0,0,.1);
-}
-
-<div
-  class="emotion-12"
->
-  <div
-    class="emotion-7"
-  >
-    <div
-      class="emotion-1"
-    >
-      <div
-        class="emotion-0"
-        color="hotpink"
-      >
-        <h2
-          style="position:absolute;bottom:0;right:0;color:rgba(0,0,0,0.2);font-size:150px;line-height:150px;margin:-20px"
-        >
-          1
-        </h2>
-        <pre>
-          {}
-        </pre>
-      </div>
-    </div>
-    <div
-      class="emotion-4"
-    >
-      <div>
-        <div>
-          <div
-            class="emotion-2"
-            color="deepskyblue"
-          >
-            <h2
-              style="position:absolute;bottom:0;right:0;color:rgba(0,0,0,0.2);font-size:150px;line-height:150px;margin:-20px"
-            >
-              1
-            </h2>
-            <pre>
-              {
-  "id": "main",
-  "viewMode": "settings",
-  "debug": {
-    "initialActive": 1
-  }
-}
-            </pre>
-          </div>
-        </div>
-        <div
-          class="emotion-3"
-          color="cyan"
-        >
-          <h2
-            style="position:absolute;bottom:0;right:0;color:rgba(0,0,0,0.2);font-size:150px;line-height:150px;margin:-20px"
-          >
-            1
-          </h2>
-          <pre>
-            {}
-          </pre>
-        </div>
-      </div>
-    </div>
-    <div
-      class="emotion-6"
-    >
-      <div
-        class="emotion-5"
-        color="orangered"
-      >
-        <h2
-          style="position:absolute;bottom:0;right:0;color:rgba(0,0,0,0.2);font-size:150px;line-height:150px;margin:-20px"
-        >
-          1
-        </h2>
-        <pre>
-          {
-  "hidden": false
-}
-        </pre>
-      </div>
-    </div>
-  </div>
-  <nav
-    class="emotion-11"
-  >
-    <button
-      class="emotion-8"
-    >
-      Sidebar
-    </button>
-    <button
-      class="emotion-9"
-    >
-      Canvassettings
-    </button>
-    <button
-      class="emotion-8"
-    >
-      Addons
-    </button>
-  </nav>
-</div>
-`;
diff --git a/lib/ui/src/components/notifications/item.stories.js b/lib/ui/src/components/notifications/item.stories.js
index f3a90bd5da12..d4901c14969a 100644
--- a/lib/ui/src/components/notifications/item.stories.js
+++ b/lib/ui/src/components/notifications/item.stories.js
@@ -6,24 +6,24 @@ export default {
   component: NotificationItem,
   title: 'UI|Notifications/Item',
   decorators: [storyFn => <div style={{ width: '240px', margin: '1rem' }}>{storyFn()}</div>],
+  excludeStories: /.*Data$/,
 };
 
-function buildExample(notification) {
-  const story = () => <NotificationItem notification={notification} />;
-  story.storyData = { notification };
-  return story;
-}
-
-export const simple = buildExample({
+export const simpleData = {
   content: '🎉 Storybook is cool!',
-});
+};
 
-export const longText = buildExample({
+export const longData = {
   content: '🎉 This is a long message that extends over two lines!',
-});
+};
 
-export const withLink = buildExample({
-  ...simple.storyData.notification,
+export const linkData = {
   content: '🎉 Storybook X.X is available! Download now »',
   link: '/some/path',
-});
+};
+
+export const simple = () => <NotificationItem notification={simpleData} />;
+
+export const longText = () => <NotificationItem notification={longData} />;
+
+export const withLink = () => <NotificationItem notification={linkData} />;
diff --git a/lib/ui/src/components/notifications/notifications.stories.js b/lib/ui/src/components/notifications/notifications.stories.js
index 9c77ae15349c..99037e165683 100644
--- a/lib/ui/src/components/notifications/notifications.stories.js
+++ b/lib/ui/src/components/notifications/notifications.stories.js
@@ -1,31 +1,29 @@
 import React from 'react';
 
 import NotificationList from './notifications';
-import * as NotificationItemStories from './item.stories';
+import itemMeta, * as itemStories from './item.stories';
 
 export default {
   component: NotificationList,
   title: 'UI|Notifications/Notifications',
   decorators: [storyFn => <div style={{ width: '240px', margin: '1rem' }}>{storyFn()}</div>],
+  excludeStories: /.*Data$/,
 };
 
-const notifications = Object.values(NotificationItemStories)
-  .filter(s => s.storyData)
-  .map(({ storyData: { notification } }, index) => ({
-    ...notification,
-    id: index.toString(),
-  }));
+const items = Array.from(Object.entries(itemStories))
+  .filter(entry => itemMeta.excludeStories.exec(entry[0]))
+  .map(entry => entry[1]);
 
-export const single = () => <NotificationList notifications={notifications.slice(0, 1)} />;
-single.storyData = { notifications: notifications.slice(0, 1) };
+export const singleData = [items[0]];
+export const allData = items;
 
-export const all = () => <NotificationList notifications={notifications} />;
-all.storyData = { notifications };
+export const single = () => <NotificationList notifications={singleData} />;
+
+export const all = () => <NotificationList notifications={allData} />;
 
 export const placement = () => (
   <NotificationList
     placement={{ position: 'fixed', left: 20, bottom: 20 }}
-    notifications={notifications}
+    notifications={allData}
   />
 );
-all.storyData = { notifications };
diff --git a/lib/ui/src/components/panel/__snapshots__/panel.stories.storyshot b/lib/ui/src/components/panel/__snapshots__/panel.stories.storyshot
deleted file mode 100644
index e47ade3cbf0d..000000000000
--- a/lib/ui/src/components/panel/__snapshots__/panel.stories.storyshot
+++ /dev/null
@@ -1,394 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots UI|Panel default 1`] = `
-.emotion-14 {
-  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 {
-  overflow-y: hidden;
-  overflow-x: auto;
-  width: 100%;
-  color: #999999;
-  width: 100%;
-  height: 40px;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  box-shadow: rgba(0,0,0,.1) 0 -1px 0 0 inset;
-  background: #FFFFFF;
-}
-
-.emotion-11 {
-  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;
-  position: relative;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  height: 40px;
-}
-
-.emotion-3 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  white-space: nowrap;
-  -webkit-flex-basis: auto;
-  -ms-flex-preferred-size: auto;
-  flex-basis: auto;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
-.emotion-3 > * {
-  margin-left: 15px;
-}
-
-.emotion-2 {
-  overflow: hidden;
-}
-
-.emotion-2:first-of-type {
-  margin-left: 0;
-}
-
-.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;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding: 0 15px;
-  text-transform: capitalize;
-  -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;
-  cursor: pointer;
-  background: transparent;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  font-weight: bold;
-  font-size: 13px;
-  color: inherit;
-  border-bottom-color: transparent;
-}
-
-.emotion-0:empty {
-  display: none;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #1EA7FD;
-}
-
-.emotion-1 {
-  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;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding: 0 15px;
-  text-transform: capitalize;
-  -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;
-  cursor: pointer;
-  background: transparent;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  font-weight: bold;
-  font-size: 13px;
-  color: #1EA7FD;
-  border-bottom-color: #1EA7FD;
-}
-
-.emotion-1:empty {
-  display: none;
-}
-
-.emotion-1:focus {
-  outline: 0 none;
-  border-bottom-color: #1EA7FD;
-}
-
-.emotion-10 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  white-space: nowrap;
-  -webkit-flex-basis: auto;
-  -ms-flex-preferred-size: auto;
-  flex-basis: auto;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  margin-left: 30px;
-}
-
-.emotion-10 > * {
-  margin-right: 15px;
-}
-
-.emotion-6 {
-  height: 40px;
-  background: none;
-  color: inherit;
-  padding: 0;
-  cursor: pointer;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
-  transition: color 0.2s linear,border-bottom-color 0.2s linear;
-}
-
-.emotion-6:hover,
-.emotion-6:focus {
-  outline: 0 none;
-  color: #1EA7FD;
-}
-
-.emotion-6 > svg {
-  width: 15px;
-}
-
-@media (max-width:599px) {
-  .emotion-6 {
-    display: none;
-  }
-}
-
-.emotion-5 {
-  shape-rendering: inherit;
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-  display: block;
-}
-
-.emotion-4 {
-  fill: currentColor;
-}
-
-.emotion-13 {
-  display: block;
-  position: relative;
-  font-size: 13px;
-  height: calc(100% - 40px);
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 40px;
-  overflow: auto;
-}
-
-.emotion-13 > *:first-child {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  height: 100%;
-  overflow: auto;
-}
-
-<div
-  class="emotion-14"
-  id="storybook-panel-root"
->
-  <div
-    class="emotion-12"
-    data-simplebar="true"
-  >
-    <div
-      class="simplebar-wrapper"
-    >
-      <div
-        class="simplebar-height-auto-observer-wrapper"
-      >
-        <div
-          class="simplebar-height-auto-observer"
-        />
-      </div>
-      <div
-        class="simplebar-mask"
-      >
-        <div
-          class="simplebar-offset"
-        >
-          <div
-            class="simplebar-content-wrapper"
-          >
-            <div
-              class="simplebar-content"
-            >
-              <div
-                class="emotion-11"
-              >
-                <div
-                  class="emotion-3"
-                >
-                  <div
-                    class="emotion-2"
-                    role="tablist"
-                  >
-                    <button
-                      class="emotion-0"
-                      role="tab"
-                      type="button"
-                    >
-                      Test 1
-                    </button>
-                    <button
-                      class="emotion-1"
-                      role="tab"
-                      type="button"
-                    >
-                      Test 2
-                    </button>
-                  </div>
-                </div>
-                <div
-                  class="emotion-10"
-                >
-                  <button
-                    class="emotion-6"
-                    title="Change orientation"
-                  >
-                    <svg
-                      class="emotion-5"
-                      viewBox="0 0 1024 1024"
-                    >
-                      <path
-                        class="emotion-4"
-                        d="M64 167.944v688c0 22.092 17.908 40 40 40h816c22.092 0 40-17.908 40-40v-688c0-22.092-17.908-40-40-40h-816c-22.092 0-40 17.908-40 40zM880 815.944h-240v-608h240v608zM144 207.944h416v608h-416v-608zM793.296 320.118h-66.398c-17.676 0-32-14.324-32-32 0-17.674 14.328-32 32-32h66.396c17.674 0 32.002 14.326 32.002 32 0 17.672-14.324 32-32 32zM793.296 448.118h-66.398c-17.676 0-32-14.324-32-32 0-17.674 14.328-32 32-32h66.396c17.674 0 32.002 14.326 32.002 32 0 17.672-14.324 32-32 32zM793.296 576.118h-66.398c-17.676 0-32-14.324-32-32 0-17.674 14.328-32 32-32h66.396c17.674 0 32.002 14.326 32.002 32 0 17.672-14.324 32-32 32z"
-                      />
-                    </svg>
-                  </button>
-                  <button
-                    class="emotion-6"
-                    title="Hide addons"
-                  >
-                    <svg
-                      class="emotion-5"
-                      viewBox="0 0 1024 1024"
-                    >
-                      <path
-                        class="emotion-4"
-                        d="M693.022 637.866c15.62 15.622 15.618 40.95 0 56.566-15.622 15.622-40.946 15.624-56.562 0.002l-124.46-124.458-124.456 124.458c-15.622 15.622-40.944 15.622-56.562 0-15.624-15.622-15.624-40.946-0.002-56.568l124.454-124.456-124.452-124.45c-15.622-15.622-15.622-40.946 0-56.564 15.62-15.624 40.944-15.624 56.568-0.002l124.45 124.45 124.454-124.452c15.622-15.62 40.95-15.62 56.566 0 15.622 15.62 15.624 40.944 0.002 56.56l-124.456 124.458 124.456 124.456zM828.784 828.784c-174.956 174.956-458.614 174.956-633.566 0-174.958-174.956-174.958-458.614 0-633.566 174.954-174.958 458.612-174.958 633.566 0 174.954 174.952 174.954 458.612 0 633.566zM880 511.998c-0.002-98.296-38.28-190.708-107.786-260.212s-161.92-107.786-260.214-107.788c-98.296 0.002-190.71 38.282-260.216 107.786-69.506 69.508-107.782 161.918-107.786 260.214 0.002 98.296 38.282 190.71 107.786 260.216 69.508 69.506 161.918 107.784 260.216 107.784 98.296 0 190.708-38.278 260.214-107.784s107.784-161.92 107.786-260.216z"
-                      />
-                    </svg>
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="simplebar-placeholder"
-      />
-    </div>
-    <div
-      class="simplebar-track simplebar-horizontal"
-    >
-      <div
-        class="simplebar-scrollbar"
-      />
-    </div>
-    <div
-      class="simplebar-track simplebar-vertical"
-    >
-      <div
-        class="simplebar-scrollbar"
-      />
-    </div>
-  </div>
-  <div
-    class="emotion-13"
-  >
-    <div
-      id="test2"
-    >
-      TEST 2
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots UI|Panel no panels 1`] = `
-.emotion-1 {
-  padding: 30px;
-  text-align: center;
-  color: #333333;
-  font-size: 13px;
-}
-
-.emotion-0 {
-  font-weight: 700;
-}
-
-<div
-  class="emotion-1"
->
-  <div
-    class="emotion-0"
-  >
-    Nothing found
-  </div>
-</div>
-`;
diff --git a/lib/ui/src/components/preview/__snapshots__/preview.stories.storyshot b/lib/ui/src/components/preview/__snapshots__/preview.stories.storyshot
deleted file mode 100644
index 728662d428f4..000000000000
--- a/lib/ui/src/components/preview/__snapshots__/preview.stories.storyshot
+++ /dev/null
@@ -1,800 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots UI|Preview/Preview no tabs 1`] = `
-Array [
-  .emotion-25 {
-  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;
-  position: relative;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  height: 40px;
-}
-
-.emotion-13 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  white-space: nowrap;
-  -webkit-flex-basis: auto;
-  -ms-flex-preferred-size: auto;
-  flex-basis: auto;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
-.emotion-13 > * {
-  margin-left: 15px;
-}
-
-.emotion-24 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  white-space: nowrap;
-  -webkit-flex-basis: auto;
-  -ms-flex-preferred-size: auto;
-  flex-basis: auto;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  margin-left: 30px;
-}
-
-.emotion-24 > * {
-  margin-right: 15px;
-}
-
-.emotion-1 {
-  shape-rendering: inherit;
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-  display: block;
-}
-
-.emotion-0 {
-  fill: currentColor;
-}
-
-.emotion-26 {
-  overflow-y: hidden;
-  overflow-x: auto;
-  width: 100%;
-  color: #999999;
-  width: 100%;
-  height: 40px;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  box-shadow: rgba(0,0,0,.1) 0 -1px 0 0 inset;
-  background: #FFFFFF;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  -webkit-transition: -webkit-transform .2s linear;
-  -webkit-transition: transform .2s linear;
-  transition: transform .2s linear;
-  -webkit-tranform: translateY(0px);
-  tranform: translateY(0px);
-}
-
-.emotion-2 {
-  height: 40px;
-  background: none;
-  color: inherit;
-  padding: 0;
-  cursor: pointer;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
-  transition: color 0.2s linear,border-bottom-color 0.2s linear;
-}
-
-.emotion-2:hover,
-.emotion-2:focus {
-  outline: 0 none;
-  color: #1EA7FD;
-}
-
-.emotion-2 > svg {
-  width: 15px;
-}
-
-.emotion-9 {
-  width: 1px;
-  height: 24px;
-  background: rgba(0,0,0,.1);
-  margin-top: 8px;
-}
-
-.emotion-9 + .emotion-9 {
-  display: none;
-}
-
-@media (max-width:599px) {
-  .emotion-17 {
-    display: none;
-  }
-}
-
-<div
-    class="emotion-26"
-    data-simplebar="true"
-  >
-    <div
-      class="simplebar-wrapper"
-    >
-      <div
-        class="simplebar-height-auto-observer-wrapper"
-      >
-        <div
-          class="simplebar-height-auto-observer"
-        />
-      </div>
-      <div
-        class="simplebar-mask"
-      >
-        <div
-          class="simplebar-offset"
-        >
-          <div
-            class="simplebar-content-wrapper"
-          >
-            <div
-              class="simplebar-content"
-            >
-              <div
-                class="emotion-25"
-              >
-                <div
-                  class="emotion-13"
-                >
-                  <button
-                    class="emotion-2"
-                    title="Zoom in"
-                  >
-                    <svg
-                      class="emotion-1"
-                      viewBox="0 0 1024 1024"
-                    >
-                      <path
-                        class="emotion-0"
-                        d="M220 670a316 316 0 0 1 0-450 316 316 0 0 1 450 0 316 316 0 0 1 0 450 316 316 0 0 1-450 0zm749 240L757 698a402 402 0 1 0-59 59l212 212a42 42 0 0 0 59-59zM487 604a42 42 0 0 1-84 0V487H286a42 42 0 1 1 0-84h117V286a42 42 0 1 1 84 0v117h117a42 42 0 0 1 0 84H487v117z"
-                      />
-                    </svg>
-                  </button>
-                  <button
-                    class="emotion-2"
-                    title="Zoom out"
-                  >
-                    <svg
-                      class="emotion-1"
-                      viewBox="0 0 1024 1024"
-                    >
-                      <path
-                        class="emotion-0"
-                        d="M757 698a402 402 0 1 0-59 59l212 212a42 42 0 0 0 59-59L757 698zM126 445a316 316 0 0 1 319-319 316 316 0 0 1 318 319 316 316 0 0 1-318 318 316 316 0 0 1-319-318zm160 42a42 42 0 1 1 0-84h318a42 42 0 0 1 0 84H286z"
-                      />
-                    </svg>
-                  </button>
-                  <button
-                    class="emotion-2"
-                    title="Reset zoom"
-                  >
-                    <svg
-                      class="emotion-1"
-                      viewBox="0 0 1024 1024"
-                    >
-                      <path
-                        class="emotion-0"
-                        d="M148 560a318 318 0 0 0 522 110 316 316 0 0 0 0-450 316 316 0 0 0-450 0c-11 11-21 22-30 34v4h47c25 0 46 21 46 46s-21 45-46 45H90c-13 0-25-6-33-14-9-9-14-20-14-33V156c0-25 20-45 45-45s45 20 45 45v32l1 1a401 401 0 0 1 623 509l212 212a42 42 0 0 1-59 59L698 757A401 401 0 0 1 65 570a42 42 0 0 1 83-10z"
-                      />
-                    </svg>
-                  </button>
-                  <span
-                    class="emotion-9"
-                  />
-                  <button
-                    class="emotion-2"
-                    title="Toggle background grid"
-                  >
-                    <svg
-                      class="emotion-1"
-                      viewBox="0 0 1024 1024"
-                    >
-                      <path
-                        class="emotion-0"
-                        d="M437.162 552.368c-1.694-0.216-3.408-0.37-5.162-0.37h-263.978c-1.754 0-3.468 0.152-5.162 0.37-19.646 2.538-34.838 19.292-34.838 39.63v264.040c0 22.094 17.91 40 40 40h263.978c13.808 0 25.98-6.996 33.168-17.636 0.102-0.148 0.184-0.308 0.282-0.458 0.612-0.924 1.2-1.862 1.722-2.838 0.046-0.082 0.080-0.172 0.124-0.254 2.994-5.61 4.704-12.008 4.704-18.808v-264.044c0-20.34-15.19-37.094-34.838-39.632zM208.022 816.038v-184.040h183.978v184.040h-183.978zM437.162 128.4c-1.694-0.216-3.408-0.37-5.162-0.37h-263.978c-1.754 0-3.468 0.152-5.162 0.37-19.646 2.538-34.838 19.292-34.838 39.63v263.968c0 22.094 17.91 40 40 40h263.978c13.808 0 25.98-6.996 33.168-17.636 0.102-0.148 0.184-0.308 0.282-0.458 0.612-0.924 1.2-1.862 1.722-2.838 0.046-0.082 0.080-0.172 0.124-0.254 2.994-5.61 4.704-12.008 4.704-18.808v-263.972c0-20.342-15.19-37.096-34.838-39.632zM208.022 392v-183.968h183.978v183.968h-183.978zM861.212 552.368c-1.694-0.216-3.408-0.37-5.162-0.37h-264.050c-1.754 0-3.468 0.152-5.162 0.37-19.646 2.538-34.838 19.292-34.838 39.63v264.040c0 22.094 17.91 40 40 40h264.048c13.808 0 25.98-6.996 33.168-17.636 0.102-0.148 0.184-0.308 0.282-0.458 0.612-0.924 1.2-1.862 1.722-2.838 0.046-0.082 0.080-0.172 0.124-0.254 2.994-5.61 4.704-12.008 4.704-18.808v-264.044c0.002-20.34-15.19-37.094-34.836-39.632zM632 816.038v-184.040h184.048v184.040h-184.048zM861.212 128.4c-1.694-0.216-3.408-0.37-5.162-0.37h-264.050c-1.754 0-3.468 0.152-5.162 0.37-19.646 2.538-34.838 19.292-34.838 39.63v263.968c0 22.094 17.91 40 40 40h264.048c13.808 0 25.98-6.996 33.168-17.636 0.102-0.148 0.184-0.308 0.282-0.458 0.612-0.924 1.2-1.862 1.722-2.838 0.046-0.082 0.080-0.172 0.124-0.254 2.994-5.61 4.704-12.008 4.704-18.808v-263.972c0.002-20.342-15.19-37.096-34.836-39.632zM632 392v-183.968h184.048v183.968h-184.048z"
-                      />
-                    </svg>
-                  </button>
-                </div>
-                <div
-                  class="emotion-24"
-                >
-                  <span
-                    class="emotion-17"
-                  >
-                    <button
-                      class="emotion-2"
-                      title="Go full screen"
-                    >
-                      <svg
-                        class="emotion-1"
-                        viewBox="0 0 1024 1024"
-                      >
-                        <path
-                          class="emotion-0"
-                          d="M959.688 920.068l0.31-176c0.040-22.094-17.84-40.032-39.93-40.070-22.092-0.040-40.032 17.838-40.070 39.93l-0.142 79.672-235.734-235.732c-15.622-15.622-40.948-15.622-56.57 0s-15.622 40.948 0 56.568l235.442 235.442-78.946-0.1c-22.092-0.028-40.022 17.86-40.050 39.952-0.014 11.064 4.464 21.084 11.714 28.334 7.228 7.224 17.208 11.702 28.236 11.714l175.688 0.22c22.086 0.028 40.014-17.846 40.052-39.93zM920.178 64.228l-176-0.308c-22.094-0.040-40.032 17.84-40.070 39.93-0.040 22.092 17.838 40.032 39.93 40.070l79.672 0.14-235.732 235.734c-15.622 15.622-15.622 40.948 0 56.568s40.948 15.622 56.568 0l235.442-235.442-0.1 78.946c-0.028 22.092 17.86 40.022 39.952 40.050 11.064 0.014 21.084-4.464 28.334-11.714 7.224-7.228 11.702-17.208 11.714-28.236l0.22-175.688c0.026-22.082-17.846-40.010-39.93-40.050zM64.236 103.742l-0.308 176c-0.040 22.094 17.84 40.032 39.93 40.070 22.092 0.040 40.032-17.84 40.070-39.93l0.14-79.672 235.734 235.73c15.622 15.622 40.948 15.622 56.568 0s15.622-40.946 0-56.566l-235.442-235.442 78.946 0.098c22.092 0.028 40.022-17.86 40.050-39.95 0.014-11.066-4.464-21.086-11.714-28.336-7.228-7.222-17.208-11.7-28.236-11.714l-175.688-0.218c-22.084-0.026-40.012 17.844-40.050 39.93zM103.748 959.766l176 0.308c22.094 0.040 40.032-17.84 40.070-39.93 0.040-22.092-17.84-40.032-39.93-40.070l-79.672-0.14 235.73-235.734c15.622-15.622 15.622-40.948 0-56.568s-40.946-15.622-56.566 0l-235.442 235.442 0.098-78.946c0.028-22.092-17.86-40.022-39.95-40.050-11.066-0.014-21.086 4.464-28.336 11.714-7.222 7.228-11.7 17.208-11.714 28.236l-0.218 175.688c-0.026 22.082 17.844 40.010 39.93 40.050z"
-                        />
-                      </svg>
-                    </button>
-                  </span>
-                  <button
-                    class="emotion-2"
-                    title="Open canvas in new tab"
-                  >
-                    <svg
-                      class="emotion-1"
-                      viewBox="0 0 1024 1024"
-                    >
-                      <path
-                        class="emotion-0"
-                        d="M896.006 920c0 22.090-17.91 40-40 40h-688.006c-22.090 0-40-17.906-40-40v-549.922c-0.838-3.224-1.33-6.588-1.33-10.072 0-22.090 17.908-40.004 40-40.004h178.66c22.092 0.004 40 17.914 40 40.004 0 22.088-17.908 40-40 40h-137.33v479.996h607.998v-479.996h-138.658c-22.090 0-40-17.912-40-40 0-22.090 17.906-40.004 40-40.004h178.658c22.090 0 40 17.91 40 40v559.844c0 0.050 0.008 0.102 0.008 0.154zM665.622 200.168l-124.452-124.45c-8.042-8.042-18.65-11.912-29.186-11.674-1.612-0.034-3.222 0-4.828 0.16-0.558 0.054-1.098 0.16-1.648 0.238-0.742 0.104-1.484 0.192-2.218 0.338-0.656 0.13-1.29 0.31-1.934 0.472-0.622 0.154-1.244 0.292-1.86 0.476-0.64 0.196-1.258 0.436-1.886 0.66-0.602 0.216-1.208 0.414-1.802 0.66-0.598 0.248-1.17 0.54-1.754 0.814-0.598 0.282-1.202 0.546-1.788 0.86-0.578 0.312-1.13 0.664-1.694 1-0.552 0.332-1.116 0.644-1.654 1.006-0.67 0.448-1.3 0.942-1.942 1.426-0.394 0.302-0.806 0.576-1.196 0.894-1.046 0.858-2.052 1.768-3.008 2.726l-124.398 124.39c-15.622 15.62-15.618 40.948 0.002 56.57 15.622 15.62 40.95 15.62 56.568 0l56.164-56.166v439.426c0 22.094 17.912 40 40.002 40 22.092 0 40-17.91 40-40v-441.202l57.942 57.942c15.622 15.624 40.948 15.62 56.568 0 15.626-15.618 15.626-40.946 0.002-56.566z"
-                      />
-                    </svg>
-                  </button>
-                  <button
-                    class="emotion-2"
-                    title="Copy canvas link"
-                  >
-                    <svg
-                      class="emotion-1"
-                      viewBox="0 0 1024 1024"
-                    >
-                      <path
-                        class="emotion-0"
-                        d="M960.132 210.186c0-0.444-0.050-0.874-0.066-1.312-0.024-0.684-0.044-1.366-0.104-2.046-0.060-0.74-0.158-1.468-0.26-2.198-0.080-0.564-0.156-1.128-0.258-1.692-0.146-0.792-0.328-1.566-0.518-2.34-0.124-0.508-0.244-1.014-0.39-1.518-0.224-0.784-0.488-1.548-0.76-2.312-0.176-0.49-0.344-0.98-0.538-1.466-0.302-0.754-0.642-1.486-0.988-2.216-0.224-0.472-0.436-0.946-0.68-1.41-0.398-0.762-0.838-1.496-1.284-2.228-0.242-0.396-0.466-0.798-0.722-1.19-0.608-0.924-1.262-1.81-1.942-2.678-0.132-0.168-0.248-0.346-0.382-0.512-0.98-1.212-2.028-2.364-3.14-3.454l-104.020-104.9c-3.714-3.714-7.988-6.518-12.542-8.464-0.088-0.040-0.174-0.084-0.262-0.122-0.994-0.418-2.006-0.774-3.024-1.108-0.242-0.080-0.474-0.176-0.72-0.252-0.942-0.288-1.894-0.516-2.854-0.732-0.334-0.076-0.658-0.176-0.996-0.244-0.998-0.2-2.004-0.336-3.010-0.458-0.306-0.038-0.606-0.1-0.912-0.13-1.322-0.13-2.65-0.204-3.976-0.204h-391.784c-1.754 0-3.468 0.152-5.162 0.372-19.646 2.538-34.838 19.29-34.838 39.628v145.516h-279.874c-1.754 0-3.468 0.152-5.162 0.372-19.646 2.538-34.838 19.29-34.838 39.628v628.28c0 22.094 17.91 40 40 40h496.118c13.808 0 25.98-6.996 33.168-17.636 0.102-0.148 2.084-3.466 2.128-3.548 2.992-5.612 4.704-12.010 4.704-18.808 0 0 0 0 0-0.004v-145.518h279.874c13.808 0 25.98-6.996 33.168-17.636 0.102-0.148 2.084-3.466 2.128-3.548 2.992-5.612 4.704-12.010 4.704-18.808 0 0 0 0 0-0.004v-521.828c0.008-0.23-0.016-0.458-0.014-0.688 0.002-0.202 0.028-0.39 0.028-0.584zM144.124 878.792v-548.278h311.752v65.186c0 22.090 17.91 40 40 40h64.366v443.092h-416.118zM640.244 693.278v-296.31c0.006-0.23-0.018-0.458-0.014-0.688 0.004-0.196 0.030-0.382 0.030-0.578 0-0.444-0.052-0.874-0.066-1.312-0.024-0.684-0.044-1.366-0.104-2.046-0.062-0.74-0.16-1.468-0.262-2.198-0.078-0.564-0.152-1.128-0.258-1.692-0.144-0.792-0.324-1.566-0.516-2.34-0.124-0.508-0.246-1.014-0.39-1.518-0.226-0.784-0.488-1.548-0.76-2.312-0.174-0.49-0.342-0.98-0.538-1.466-0.302-0.754-0.64-1.486-0.988-2.216-0.222-0.472-0.438-0.946-0.68-1.41-0.398-0.762-0.838-1.496-1.284-2.228-0.242-0.396-0.466-0.798-0.724-1.19-0.606-0.924-1.262-1.81-1.942-2.678-0.13-0.168-0.246-0.346-0.382-0.512-0.978-1.212-2.028-2.364-3.138-3.454l-104.020-104.9c-3.714-3.714-7.988-6.518-12.542-8.464-0.088-0.040-0.172-0.084-0.262-0.122-0.994-0.418-2.004-0.774-3.024-1.108-0.242-0.080-0.476-0.176-0.72-0.252-0.942-0.288-1.896-0.516-2.854-0.732-0.334-0.076-0.658-0.176-0.996-0.244-0.998-0.2-2.004-0.336-3.012-0.458-0.304-0.038-0.602-0.1-0.91-0.13-1.322-0.13-2.648-0.204-3.976-0.204h-31.916v-105.516h311.752v65.186c0 22.090 17.91 40 40 40h64.366v443.092h-239.87z"
-                      />
-                    </svg>
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="simplebar-placeholder"
-      />
-    </div>
-    <div
-      class="simplebar-track simplebar-horizontal"
-    >
-      <div
-        class="simplebar-scrollbar"
-      />
-    </div>
-    <div
-      class="simplebar-track simplebar-vertical"
-    >
-      <div
-        class="simplebar-scrollbar"
-      />
-    </div>
-  </div>,
-  .emotion-1 {
-  position: absolute;
-  overflow: auto;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 40px;
-  z-index: 3;
-  -webkit-transition: all 0.1s linear;
-  transition: all 0.1s linear;
-  height: calc(100% - 40px);
-  background: transparent;
-}
-
-.emotion-0 {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  -webkit-transition: background .1s linear;
-  transition: background .1s linear;
-  background: #FFFFFF;
-}
-
-.emotion-0 iframe {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  border: 0 none;
-}
-
-<div
-    class="emotion-1"
-    offset="40"
-  >
-    <div>
-      <div
-        class="emotion-0"
-        id="storybook-preview-background"
-        value="transparent"
-      >
-        <iframe
-          allowfullscreen=""
-          id="storybook-preview-iframe"
-          scrolling="yes"
-          src="http://example.com?id=string&viewMode=story"
-          title="string"
-        />
-      </div>
-    </div>
-  </div>,
-]
-`;
-
-exports[`Storyshots UI|Preview/Preview with tabs 1`] = `
-Array [
-  .emotion-31 {
-  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;
-  position: relative;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  height: 40px;
-}
-
-.emotion-19 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  white-space: nowrap;
-  -webkit-flex-basis: auto;
-  -ms-flex-preferred-size: auto;
-  flex-basis: auto;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
-.emotion-19 > * {
-  margin-left: 15px;
-}
-
-.emotion-4 {
-  overflow: hidden;
-}
-
-.emotion-4:first-of-type {
-  margin-left: 0;
-}
-
-.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;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding: 0 15px;
-  text-transform: capitalize;
-  -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;
-  cursor: pointer;
-  background: transparent;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  font-weight: bold;
-  font-size: 13px;
-  color: inherit;
-  border-bottom-color: transparent;
-}
-
-.emotion-0:empty {
-  display: none;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #1EA7FD;
-}
-
-.emotion-30 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  white-space: nowrap;
-  -webkit-flex-basis: auto;
-  -ms-flex-preferred-size: auto;
-  flex-basis: auto;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  margin-left: 30px;
-}
-
-.emotion-30 > * {
-  margin-right: 15px;
-}
-
-.emotion-7 {
-  shape-rendering: inherit;
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-  display: block;
-}
-
-.emotion-6 {
-  fill: currentColor;
-}
-
-.emotion-32 {
-  overflow-y: hidden;
-  overflow-x: auto;
-  width: 100%;
-  color: #999999;
-  width: 100%;
-  height: 40px;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  box-shadow: rgba(0,0,0,.1) 0 -1px 0 0 inset;
-  background: #FFFFFF;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  -webkit-transition: -webkit-transform .2s linear;
-  -webkit-transition: transform .2s linear;
-  transition: transform .2s linear;
-  -webkit-tranform: translateY(0px);
-  tranform: translateY(0px);
-}
-
-.emotion-8 {
-  height: 40px;
-  background: none;
-  color: inherit;
-  padding: 0;
-  cursor: pointer;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
-  transition: color 0.2s linear,border-bottom-color 0.2s linear;
-}
-
-.emotion-8:hover,
-.emotion-8:focus {
-  outline: 0 none;
-  color: #1EA7FD;
-}
-
-.emotion-8 > svg {
-  width: 15px;
-}
-
-.emotion-5 {
-  width: 1px;
-  height: 24px;
-  background: rgba(0,0,0,.1);
-  margin-top: 8px;
-}
-
-.emotion-5 + .emotion-5 {
-  display: none;
-}
-
-@media (max-width:599px) {
-  .emotion-23 {
-    display: none;
-  }
-}
-
-.emotion-1 {
-  color: inherit;
-  -webkit-text-decoration: inherit;
-  text-decoration: inherit;
-  display: inline-block;
-}
-
-<div
-    class="emotion-32"
-    data-simplebar="true"
-  >
-    <div
-      class="simplebar-wrapper"
-    >
-      <div
-        class="simplebar-height-auto-observer-wrapper"
-      >
-        <div
-          class="simplebar-height-auto-observer"
-        />
-      </div>
-      <div
-        class="simplebar-mask"
-      >
-        <div
-          class="simplebar-offset"
-        >
-          <div
-            class="simplebar-content-wrapper"
-          >
-            <div
-              class="simplebar-content"
-            >
-              <div
-                class="emotion-31"
-              >
-                <div
-                  class="emotion-19"
-                >
-                  <div
-                    class="emotion-4"
-                  >
-                    <a
-                      class="emotion-1"
-                      href="/?path=/story/string"
-                    >
-                      <button
-                        class="emotion-0"
-                      >
-                        Canvas
-                      </button>
-                    </a>
-                    <a
-                      class="emotion-1"
-                      href="/?path=/info/string"
-                    >
-                      <button
-                        class="emotion-0"
-                      >
-                        Notes
-                      </button>
-                    </a>
-                  </div>
-                  <span
-                    class="emotion-5"
-                  />
-                  <button
-                    class="emotion-8"
-                    title="Zoom in"
-                  >
-                    <svg
-                      class="emotion-7"
-                      viewBox="0 0 1024 1024"
-                    >
-                      <path
-                        class="emotion-6"
-                        d="M220 670a316 316 0 0 1 0-450 316 316 0 0 1 450 0 316 316 0 0 1 0 450 316 316 0 0 1-450 0zm749 240L757 698a402 402 0 1 0-59 59l212 212a42 42 0 0 0 59-59zM487 604a42 42 0 0 1-84 0V487H286a42 42 0 1 1 0-84h117V286a42 42 0 1 1 84 0v117h117a42 42 0 0 1 0 84H487v117z"
-                      />
-                    </svg>
-                  </button>
-                  <button
-                    class="emotion-8"
-                    title="Zoom out"
-                  >
-                    <svg
-                      class="emotion-7"
-                      viewBox="0 0 1024 1024"
-                    >
-                      <path
-                        class="emotion-6"
-                        d="M757 698a402 402 0 1 0-59 59l212 212a42 42 0 0 0 59-59L757 698zM126 445a316 316 0 0 1 319-319 316 316 0 0 1 318 319 316 316 0 0 1-318 318 316 316 0 0 1-319-318zm160 42a42 42 0 1 1 0-84h318a42 42 0 0 1 0 84H286z"
-                      />
-                    </svg>
-                  </button>
-                  <button
-                    class="emotion-8"
-                    title="Reset zoom"
-                  >
-                    <svg
-                      class="emotion-7"
-                      viewBox="0 0 1024 1024"
-                    >
-                      <path
-                        class="emotion-6"
-                        d="M148 560a318 318 0 0 0 522 110 316 316 0 0 0 0-450 316 316 0 0 0-450 0c-11 11-21 22-30 34v4h47c25 0 46 21 46 46s-21 45-46 45H90c-13 0-25-6-33-14-9-9-14-20-14-33V156c0-25 20-45 45-45s45 20 45 45v32l1 1a401 401 0 0 1 623 509l212 212a42 42 0 0 1-59 59L698 757A401 401 0 0 1 65 570a42 42 0 0 1 83-10z"
-                      />
-                    </svg>
-                  </button>
-                  <span
-                    class="emotion-5"
-                  />
-                  <button
-                    class="emotion-8"
-                    title="Toggle background grid"
-                  >
-                    <svg
-                      class="emotion-7"
-                      viewBox="0 0 1024 1024"
-                    >
-                      <path
-                        class="emotion-6"
-                        d="M437.162 552.368c-1.694-0.216-3.408-0.37-5.162-0.37h-263.978c-1.754 0-3.468 0.152-5.162 0.37-19.646 2.538-34.838 19.292-34.838 39.63v264.040c0 22.094 17.91 40 40 40h263.978c13.808 0 25.98-6.996 33.168-17.636 0.102-0.148 0.184-0.308 0.282-0.458 0.612-0.924 1.2-1.862 1.722-2.838 0.046-0.082 0.080-0.172 0.124-0.254 2.994-5.61 4.704-12.008 4.704-18.808v-264.044c0-20.34-15.19-37.094-34.838-39.632zM208.022 816.038v-184.040h183.978v184.040h-183.978zM437.162 128.4c-1.694-0.216-3.408-0.37-5.162-0.37h-263.978c-1.754 0-3.468 0.152-5.162 0.37-19.646 2.538-34.838 19.292-34.838 39.63v263.968c0 22.094 17.91 40 40 40h263.978c13.808 0 25.98-6.996 33.168-17.636 0.102-0.148 0.184-0.308 0.282-0.458 0.612-0.924 1.2-1.862 1.722-2.838 0.046-0.082 0.080-0.172 0.124-0.254 2.994-5.61 4.704-12.008 4.704-18.808v-263.972c0-20.342-15.19-37.096-34.838-39.632zM208.022 392v-183.968h183.978v183.968h-183.978zM861.212 552.368c-1.694-0.216-3.408-0.37-5.162-0.37h-264.050c-1.754 0-3.468 0.152-5.162 0.37-19.646 2.538-34.838 19.292-34.838 39.63v264.040c0 22.094 17.91 40 40 40h264.048c13.808 0 25.98-6.996 33.168-17.636 0.102-0.148 0.184-0.308 0.282-0.458 0.612-0.924 1.2-1.862 1.722-2.838 0.046-0.082 0.080-0.172 0.124-0.254 2.994-5.61 4.704-12.008 4.704-18.808v-264.044c0.002-20.34-15.19-37.094-34.836-39.632zM632 816.038v-184.040h184.048v184.040h-184.048zM861.212 128.4c-1.694-0.216-3.408-0.37-5.162-0.37h-264.050c-1.754 0-3.468 0.152-5.162 0.37-19.646 2.538-34.838 19.292-34.838 39.63v263.968c0 22.094 17.91 40 40 40h264.048c13.808 0 25.98-6.996 33.168-17.636 0.102-0.148 0.184-0.308 0.282-0.458 0.612-0.924 1.2-1.862 1.722-2.838 0.046-0.082 0.080-0.172 0.124-0.254 2.994-5.61 4.704-12.008 4.704-18.808v-263.972c0.002-20.342-15.19-37.096-34.836-39.632zM632 392v-183.968h184.048v183.968h-184.048z"
-                      />
-                    </svg>
-                  </button>
-                </div>
-                <div
-                  class="emotion-30"
-                >
-                  <span
-                    class="emotion-23"
-                  >
-                    <button
-                      class="emotion-8"
-                      title="Go full screen"
-                    >
-                      <svg
-                        class="emotion-7"
-                        viewBox="0 0 1024 1024"
-                      >
-                        <path
-                          class="emotion-6"
-                          d="M959.688 920.068l0.31-176c0.040-22.094-17.84-40.032-39.93-40.070-22.092-0.040-40.032 17.838-40.070 39.93l-0.142 79.672-235.734-235.732c-15.622-15.622-40.948-15.622-56.57 0s-15.622 40.948 0 56.568l235.442 235.442-78.946-0.1c-22.092-0.028-40.022 17.86-40.050 39.952-0.014 11.064 4.464 21.084 11.714 28.334 7.228 7.224 17.208 11.702 28.236 11.714l175.688 0.22c22.086 0.028 40.014-17.846 40.052-39.93zM920.178 64.228l-176-0.308c-22.094-0.040-40.032 17.84-40.070 39.93-0.040 22.092 17.838 40.032 39.93 40.070l79.672 0.14-235.732 235.734c-15.622 15.622-15.622 40.948 0 56.568s40.948 15.622 56.568 0l235.442-235.442-0.1 78.946c-0.028 22.092 17.86 40.022 39.952 40.050 11.064 0.014 21.084-4.464 28.334-11.714 7.224-7.228 11.702-17.208 11.714-28.236l0.22-175.688c0.026-22.082-17.846-40.010-39.93-40.050zM64.236 103.742l-0.308 176c-0.040 22.094 17.84 40.032 39.93 40.070 22.092 0.040 40.032-17.84 40.070-39.93l0.14-79.672 235.734 235.73c15.622 15.622 40.948 15.622 56.568 0s15.622-40.946 0-56.566l-235.442-235.442 78.946 0.098c22.092 0.028 40.022-17.86 40.050-39.95 0.014-11.066-4.464-21.086-11.714-28.336-7.228-7.222-17.208-11.7-28.236-11.714l-175.688-0.218c-22.084-0.026-40.012 17.844-40.050 39.93zM103.748 959.766l176 0.308c22.094 0.040 40.032-17.84 40.070-39.93 0.040-22.092-17.84-40.032-39.93-40.070l-79.672-0.14 235.73-235.734c15.622-15.622 15.622-40.948 0-56.568s-40.946-15.622-56.566 0l-235.442 235.442 0.098-78.946c0.028-22.092-17.86-40.022-39.95-40.050-11.066-0.014-21.086 4.464-28.336 11.714-7.222 7.228-11.7 17.208-11.714 28.236l-0.218 175.688c-0.026 22.082 17.844 40.010 39.93 40.050z"
-                        />
-                      </svg>
-                    </button>
-                  </span>
-                  <button
-                    class="emotion-8"
-                    title="Open canvas in new tab"
-                  >
-                    <svg
-                      class="emotion-7"
-                      viewBox="0 0 1024 1024"
-                    >
-                      <path
-                        class="emotion-6"
-                        d="M896.006 920c0 22.090-17.91 40-40 40h-688.006c-22.090 0-40-17.906-40-40v-549.922c-0.838-3.224-1.33-6.588-1.33-10.072 0-22.090 17.908-40.004 40-40.004h178.66c22.092 0.004 40 17.914 40 40.004 0 22.088-17.908 40-40 40h-137.33v479.996h607.998v-479.996h-138.658c-22.090 0-40-17.912-40-40 0-22.090 17.906-40.004 40-40.004h178.658c22.090 0 40 17.91 40 40v559.844c0 0.050 0.008 0.102 0.008 0.154zM665.622 200.168l-124.452-124.45c-8.042-8.042-18.65-11.912-29.186-11.674-1.612-0.034-3.222 0-4.828 0.16-0.558 0.054-1.098 0.16-1.648 0.238-0.742 0.104-1.484 0.192-2.218 0.338-0.656 0.13-1.29 0.31-1.934 0.472-0.622 0.154-1.244 0.292-1.86 0.476-0.64 0.196-1.258 0.436-1.886 0.66-0.602 0.216-1.208 0.414-1.802 0.66-0.598 0.248-1.17 0.54-1.754 0.814-0.598 0.282-1.202 0.546-1.788 0.86-0.578 0.312-1.13 0.664-1.694 1-0.552 0.332-1.116 0.644-1.654 1.006-0.67 0.448-1.3 0.942-1.942 1.426-0.394 0.302-0.806 0.576-1.196 0.894-1.046 0.858-2.052 1.768-3.008 2.726l-124.398 124.39c-15.622 15.62-15.618 40.948 0.002 56.57 15.622 15.62 40.95 15.62 56.568 0l56.164-56.166v439.426c0 22.094 17.912 40 40.002 40 22.092 0 40-17.91 40-40v-441.202l57.942 57.942c15.622 15.624 40.948 15.62 56.568 0 15.626-15.618 15.626-40.946 0.002-56.566z"
-                      />
-                    </svg>
-                  </button>
-                  <button
-                    class="emotion-8"
-                    title="Copy canvas link"
-                  >
-                    <svg
-                      class="emotion-7"
-                      viewBox="0 0 1024 1024"
-                    >
-                      <path
-                        class="emotion-6"
-                        d="M960.132 210.186c0-0.444-0.050-0.874-0.066-1.312-0.024-0.684-0.044-1.366-0.104-2.046-0.060-0.74-0.158-1.468-0.26-2.198-0.080-0.564-0.156-1.128-0.258-1.692-0.146-0.792-0.328-1.566-0.518-2.34-0.124-0.508-0.244-1.014-0.39-1.518-0.224-0.784-0.488-1.548-0.76-2.312-0.176-0.49-0.344-0.98-0.538-1.466-0.302-0.754-0.642-1.486-0.988-2.216-0.224-0.472-0.436-0.946-0.68-1.41-0.398-0.762-0.838-1.496-1.284-2.228-0.242-0.396-0.466-0.798-0.722-1.19-0.608-0.924-1.262-1.81-1.942-2.678-0.132-0.168-0.248-0.346-0.382-0.512-0.98-1.212-2.028-2.364-3.14-3.454l-104.020-104.9c-3.714-3.714-7.988-6.518-12.542-8.464-0.088-0.040-0.174-0.084-0.262-0.122-0.994-0.418-2.006-0.774-3.024-1.108-0.242-0.080-0.474-0.176-0.72-0.252-0.942-0.288-1.894-0.516-2.854-0.732-0.334-0.076-0.658-0.176-0.996-0.244-0.998-0.2-2.004-0.336-3.010-0.458-0.306-0.038-0.606-0.1-0.912-0.13-1.322-0.13-2.65-0.204-3.976-0.204h-391.784c-1.754 0-3.468 0.152-5.162 0.372-19.646 2.538-34.838 19.29-34.838 39.628v145.516h-279.874c-1.754 0-3.468 0.152-5.162 0.372-19.646 2.538-34.838 19.29-34.838 39.628v628.28c0 22.094 17.91 40 40 40h496.118c13.808 0 25.98-6.996 33.168-17.636 0.102-0.148 2.084-3.466 2.128-3.548 2.992-5.612 4.704-12.010 4.704-18.808 0 0 0 0 0-0.004v-145.518h279.874c13.808 0 25.98-6.996 33.168-17.636 0.102-0.148 2.084-3.466 2.128-3.548 2.992-5.612 4.704-12.010 4.704-18.808 0 0 0 0 0-0.004v-521.828c0.008-0.23-0.016-0.458-0.014-0.688 0.002-0.202 0.028-0.39 0.028-0.584zM144.124 878.792v-548.278h311.752v65.186c0 22.090 17.91 40 40 40h64.366v443.092h-416.118zM640.244 693.278v-296.31c0.006-0.23-0.018-0.458-0.014-0.688 0.004-0.196 0.030-0.382 0.030-0.578 0-0.444-0.052-0.874-0.066-1.312-0.024-0.684-0.044-1.366-0.104-2.046-0.062-0.74-0.16-1.468-0.262-2.198-0.078-0.564-0.152-1.128-0.258-1.692-0.144-0.792-0.324-1.566-0.516-2.34-0.124-0.508-0.246-1.014-0.39-1.518-0.226-0.784-0.488-1.548-0.76-2.312-0.174-0.49-0.342-0.98-0.538-1.466-0.302-0.754-0.64-1.486-0.988-2.216-0.222-0.472-0.438-0.946-0.68-1.41-0.398-0.762-0.838-1.496-1.284-2.228-0.242-0.396-0.466-0.798-0.724-1.19-0.606-0.924-1.262-1.81-1.942-2.678-0.13-0.168-0.246-0.346-0.382-0.512-0.978-1.212-2.028-2.364-3.138-3.454l-104.020-104.9c-3.714-3.714-7.988-6.518-12.542-8.464-0.088-0.040-0.172-0.084-0.262-0.122-0.994-0.418-2.004-0.774-3.024-1.108-0.242-0.080-0.476-0.176-0.72-0.252-0.942-0.288-1.896-0.516-2.854-0.732-0.334-0.076-0.658-0.176-0.996-0.244-0.998-0.2-2.004-0.336-3.012-0.458-0.304-0.038-0.602-0.1-0.91-0.13-1.322-0.13-2.648-0.204-3.976-0.204h-31.916v-105.516h311.752v65.186c0 22.090 17.91 40 40 40h64.366v443.092h-239.87z"
-                      />
-                    </svg>
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="simplebar-placeholder"
-      />
-    </div>
-    <div
-      class="simplebar-track simplebar-horizontal"
-    >
-      <div
-        class="simplebar-scrollbar"
-      />
-    </div>
-    <div
-      class="simplebar-track simplebar-vertical"
-    >
-      <div
-        class="simplebar-scrollbar"
-      />
-    </div>
-  </div>,
-  .emotion-1 {
-  position: absolute;
-  overflow: auto;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 40px;
-  z-index: 3;
-  -webkit-transition: all 0.1s linear;
-  transition: all 0.1s linear;
-  height: calc(100% - 40px);
-  background: transparent;
-}
-
-.emotion-0 {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  -webkit-transition: background .1s linear;
-  transition: background .1s linear;
-  background: #FFFFFF;
-}
-
-.emotion-0 iframe {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  border: 0 none;
-}
-
-<div
-    class="emotion-1"
-    offset="40"
-  >
-    <div>
-      <div
-        class="emotion-0"
-        id="storybook-preview-background"
-        value="transparent"
-      >
-        <iframe
-          allowfullscreen=""
-          id="storybook-preview-iframe"
-          scrolling="yes"
-          src="http://example.com?id=string&viewMode=story"
-          title="string"
-        />
-      </div>
-    </div>
-  </div>,
-]
-`;
diff --git a/lib/ui/src/components/preview/iframe.stories.js b/lib/ui/src/components/preview/iframe.stories.js
index 74521a5131f0..f7ae25fb02b5 100644
--- a/lib/ui/src/components/preview/iframe.stories.js
+++ b/lib/ui/src/components/preview/iframe.stories.js
@@ -43,6 +43,8 @@ export const errorStory = () => (
 );
 // We need to disable this one in Chromatic because the screenshot includes the uploaded URL sadly:
 //   eg. https://www.chromaticqa.com/snapshot?appId=5a375b97f4b14f0020b0cda3&id=5c52edb4323f9000249aae72
-errorStory.parameters = {
-  chromatic: { disable: true },
+errorStory.story = {
+  parameters: {
+    chromatic: { disable: true },
+  },
 };
diff --git a/lib/ui/src/components/preview/preview.js b/lib/ui/src/components/preview/preview.js
index 5f98896f528d..1e1fcfb73f88 100644
--- a/lib/ui/src/components/preview/preview.js
+++ b/lib/ui/src/components/preview/preview.js
@@ -336,6 +336,7 @@ Preview.propTypes = {
   }).isRequired,
   baseUrl: PropTypes.string,
 };
+
 Preview.defaultProps = {
   viewMode: undefined,
   storyId: undefined,
diff --git a/lib/ui/src/components/sidebar/Sidebar.stories.js b/lib/ui/src/components/sidebar/Sidebar.stories.js
index feb26bf28a60..826c0bae4080 100644
--- a/lib/ui/src/components/sidebar/Sidebar.stories.js
+++ b/lib/ui/src/components/sidebar/Sidebar.stories.js
@@ -1,19 +1,20 @@
 import React from 'react';
 
 import Sidebar from './Sidebar';
-import * as SidebarHeadingStories from './SidebarHeading.stories';
-import * as SidebarStoriesStories from './SidebarStories.stories';
+import { standardData as standardHeaderData } from './SidebarHeading.stories';
+import { withRootData } from './SidebarStories.stories';
 
 export default {
   Component: Sidebar,
   title: 'UI|Sidebar/Sidebar',
+  excludeStories: /.*Data$/,
 };
 
-const { menu } = SidebarHeadingStories.standard.storyData;
-const { stories, storyId } = SidebarStoriesStories.withRoot.storyData;
+const { menu } = standardHeaderData;
+const { stories, storyId } = withRootData;
 
-export const simple = () => <Sidebar menu={menu} stories={stories} storyId={storyId} />;
-simple.storyData = { menu, stories, storyId };
+export const simpleData = { menu, stories, storyId };
+export const loadingData = { menu, stories: {} };
 
+export const simple = () => <Sidebar menu={menu} stories={stories} storyId={storyId} />;
 export const loading = () => <Sidebar menu={menu} stories={{}} loading />;
-loading.storyData = { menu, stories: {} };
diff --git a/lib/ui/src/components/sidebar/SidebarHeading.stories.js b/lib/ui/src/components/sidebar/SidebarHeading.stories.js
index 3bd9b36297d6..e9d20013ac77 100644
--- a/lib/ui/src/components/sidebar/SidebarHeading.stories.js
+++ b/lib/ui/src/components/sidebar/SidebarHeading.stories.js
@@ -22,6 +22,7 @@ export default {
       </div>
     ),
   ],
+  excludeStories: /.*Data$/,
 };
 
 const menuItems = [
@@ -32,6 +33,8 @@ const menuItems = [
 
 export const menuHighlighted = () => <SidebarHeading menuHighlighted menu={menuItems} />;
 
+export const standardData = { menu: menuItems };
+
 export const standard = () => (
   <ThemeProvider
     theme={{
@@ -46,7 +49,6 @@ export const standard = () => (
     <SidebarHeading menu={menuItems} />
   </ThemeProvider>
 );
-standard.storyData = { menu: menuItems };
 
 export const standardNoLink = () => (
   <ThemeProvider
diff --git a/lib/ui/src/components/sidebar/SidebarItem.stories.js b/lib/ui/src/components/sidebar/SidebarItem.stories.js
index e18871a024c6..56789c7ea53f 100644
--- a/lib/ui/src/components/sidebar/SidebarItem.stories.js
+++ b/lib/ui/src/components/sidebar/SidebarItem.stories.js
@@ -23,7 +23,7 @@ export const longName = () => (
     isComponent
   />
 );
-longName.title = 'with long name';
+longName.story = { name: 'with long name' };
 export const nestedDepths = () => (
   <div>
     <SidebarItem name="Depth 0 collapsed" depth={0} />
diff --git a/lib/ui/src/components/sidebar/SidebarStories.stories.js b/lib/ui/src/components/sidebar/SidebarStories.stories.js
index 3414a6d1abdf..a4d1ad478577 100644
--- a/lib/ui/src/components/sidebar/SidebarStories.stories.js
+++ b/lib/ui/src/components/sidebar/SidebarStories.stories.js
@@ -8,26 +8,27 @@ export default {
   Component: SidebarStories,
   title: 'UI|Sidebar/SidebarStories',
   decorators: [s => <Spaced>{s()}</Spaced>],
+  excludeStories: /.*Data$/,
 };
 
-export const withRoot = () => <SidebarStories stories={mockDataset.withRoot} storyId="1-12-121" />;
-withRoot.storyData = {
+export const withRootData = {
   stories: mockDataset.withRoot,
   storyId: '1-12-121',
 };
 
-export const noRoot = () => <SidebarStories stories={mockDataset.noRoot} storyId="1-12-121" />;
-noRoot.storyData = {
+export const withRoot = () => <SidebarStories stories={mockDataset.withRoot} storyId="1-12-121" />;
+
+export const noRootData = {
   stories: mockDataset.noRoot,
   storyId: '1-12-121',
 };
 
-export const empty = () => <SidebarStories stories={{}} />;
-empty.storyData = {
+export const noRoot = () => <SidebarStories stories={mockDataset.noRoot} storyId="1-12-121" />;
+
+export const emptyData = {
   stories: {},
 };
 
+export const empty = () => <SidebarStories stories={{}} />;
+
 export const loading = () => <SidebarStories loading stories={{}} />;
-empty.storyData = {
-  stories: {},
-};
diff --git a/lib/ui/src/components/sidebar/__snapshots__/SidebarSubheading.stories.storyshot b/lib/ui/src/components/sidebar/__snapshots__/SidebarSubheading.stories.storyshot
deleted file mode 100644
index 80ff86fa1290..000000000000
--- a/lib/ui/src/components/sidebar/__snapshots__/SidebarSubheading.stories.storyshot
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots UI|Sidebar/SidebarSubheading default 1`] = `
-.emotion-0 {
-  -webkit-letter-spacing: 0.35em;
-  -moz-letter-spacing: 0.35em;
-  -ms-letter-spacing: 0.35em;
-  letter-spacing: 0.35em;
-  text-transform: uppercase;
-  font-weight: 900;
-  font-size: 11px;
-  line-height: 24px;
-  color: rgba(51,51,51,0.5);
-}
-
-<div
-  class="emotion-0"
->
-  Subheading
-</div>
-`;
diff --git a/lib/ui/src/components/sidebar/treeview/utils.js b/lib/ui/src/components/sidebar/treeview/utils.js
index b32643ecc431..e3185dbd49e2 100644
--- a/lib/ui/src/components/sidebar/treeview/utils.js
+++ b/lib/ui/src/components/sidebar/treeview/utils.js
@@ -55,25 +55,7 @@ export const getParents = memoize(1000)((id, dataset) => {
   return [parent, ...getParents(parent.id, dataset)];
 });
 
-export const getMains = memoize(1)(dataset =>
-  toList(dataset)
-    .filter(m => m.depth === 0)
-    .sort((a, b) => {
-      if (a.isRoot && b.isRoot) {
-        return a.id > b.id;
-      }
-      if (!a.isRoot && !b.isRoot) {
-        return 0;
-      }
-      if (a.isRoot) {
-        return -1;
-      }
-      if (b.isRoot) {
-        return 1;
-      }
-      return 0;
-    })
-);
+export const getMains = memoize(1)(dataset => toList(dataset).filter(m => m.depth === 0));
 const getMainsKeys = memoize(1)(dataset => getMains(dataset).map(m => m.id));
 
 export const getPrevious = ({ id, dataset, expanded }) => {
diff --git a/lib/ui/src/components/sidebar/treeview/utils.test.js b/lib/ui/src/components/sidebar/treeview/utils.test.js
index ccd66037dcec..28881523f0f2 100644
--- a/lib/ui/src/components/sidebar/treeview/utils.test.js
+++ b/lib/ui/src/components/sidebar/treeview/utils.test.js
@@ -164,7 +164,7 @@ describe('getPrevious', () => {
       id: '3-31',
       ...withRoot,
     });
-    expect(output).toBe(withRoot.dataset['1-12']);
+    expect(output).toBe(withRoot.dataset['2']);
   });
 });
 
@@ -210,7 +210,7 @@ describe('getNext', () => {
   });
   test('to next parent with root as parent - skip root', () => {
     const output = utils.getNext({ id: '1-12', ...withRoot });
-    expect(output).toBe(withRoot.dataset['3-31']);
+    expect(output).toBe(withRoot.dataset['2']);
   });
 });
 
diff --git a/lib/ui/src/containers/panel.js b/lib/ui/src/containers/panel.js
index de4d62f233f2..88821840822d 100644
--- a/lib/ui/src/containers/panel.js
+++ b/lib/ui/src/containers/panel.js
@@ -11,7 +11,7 @@ const createPanelActions = memoize(1)(api => ({
 }));
 
 const mapper = ({ state, api }) => ({
-  panels: api.getPanels(),
+  panels: api.getStoryPanels(),
   selectedPanel: api.getSelectedPanel(),
   panelPosition: state.layout.panelPosition,
   actions: createPanelActions(api),
diff --git a/lib/ui/src/containers/panel.stories.js b/lib/ui/src/containers/panel.stories.js
new file mode 100644
index 000000000000..f920d6639ffb
--- /dev/null
+++ b/lib/ui/src/containers/panel.stories.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+storiesOf('UI|Addon Panel', module)
+  .add('default', () => <div>By default all addon panels are rendered</div>)
+  .add(
+    'disable panel',
+    () => (
+      <div>
+        This story disables Actions and Accessibility panels
+        <pre>
+          {`storiesOf('UI|Addon Panel', module)
+  .add(
+    'my story',
+    <MyComponent />,
+    { a11y: { disable: true }, actions: { disable: true } }
+  );`}
+        </pre>
+      </div>
+    ),
+    { a11y: { disabled: true }, actions: { disabled: true } }
+  );
diff --git a/lib/ui/src/containers/preview.js b/lib/ui/src/containers/preview.js
index 82720f70545e..1f376b29e18c 100644
--- a/lib/ui/src/containers/preview.js
+++ b/lib/ui/src/containers/preview.js
@@ -20,10 +20,22 @@ const mapper = ({ api, state: { layout, location, selected, customQueryParams }
   location,
 });
 
+function getBaseUrl() {
+  // eslint-disable-next-line no-undef
+  return PREVIEW_URL || 'iframe.html'; // webpack-injected
+}
+
 const PreviewConnected = React.memo(props => (
   <Consumer filter={mapper}>
     {fromState => {
-      return <Preview {...props} {...fromState} customCanvas={fromState.api.renderPreview} />;
+      return (
+        <Preview
+          {...props}
+          baseUrl={getBaseUrl()}
+          {...fromState}
+          customCanvas={fromState.api.renderPreview}
+        />
+      );
     }}
   </Consumer>
 ));
diff --git a/lib/ui/src/settings/__snapshots__/about.stories.storyshot b/lib/ui/src/settings/__snapshots__/about.stories.storyshot
deleted file mode 100644
index 6c72a075a064..000000000000
--- a/lib/ui/src/settings/__snapshots__/about.stories.storyshot
+++ /dev/null
@@ -1,4237 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots UI|Settings/AboutScreen failed to fetch new version 1`] = `
-.emotion-26 {
-  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-8 {
-  overflow-y: hidden;
-  overflow-x: auto;
-  width: 100%;
-  color: #999999;
-  width: 100%;
-  height: 40px;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  box-shadow: rgba(0,0,0,.1) 0 -1px 0 0 inset;
-  background: #FFFFFF;
-}
-
-.emotion-7 {
-  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;
-  position: relative;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  height: 40px;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  white-space: nowrap;
-  -webkit-flex-basis: auto;
-  -ms-flex-preferred-size: auto;
-  flex-basis: auto;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
-.emotion-2 > * {
-  margin-left: 15px;
-}
-
-.emotion-1 {
-  overflow: hidden;
-}
-
-.emotion-1:first-of-type {
-  margin-left: 0;
-}
-
-.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;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding: 0 15px;
-  text-transform: capitalize;
-  -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;
-  cursor: pointer;
-  background: transparent;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  font-weight: bold;
-  font-size: 13px;
-  color: #1EA7FD;
-  border-bottom-color: #1EA7FD;
-}
-
-.emotion-0:empty {
-  display: none;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #1EA7FD;
-}
-
-.emotion-6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  white-space: nowrap;
-  -webkit-flex-basis: auto;
-  -ms-flex-preferred-size: auto;
-  flex-basis: auto;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  margin-left: 30px;
-}
-
-.emotion-6 > * {
-  margin-right: 15px;
-}
-
-.emotion-4 {
-  shape-rendering: inherit;
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-  display: block;
-}
-
-.emotion-3 {
-  fill: currentColor;
-}
-
-.emotion-25 {
-  display: block;
-  position: relative;
-  font-size: 13px;
-  height: calc(100% - 40px);
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 40px;
-  overflow: auto;
-}
-
-.emotion-25 > *:first-child {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  height: 100%;
-  overflow: auto;
-}
-
-.emotion-5 {
-  height: 40px;
-  background: none;
-  color: inherit;
-  padding: 0;
-  cursor: pointer;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
-  transition: color 0.2s linear,border-bottom-color 0.2s linear;
-}
-
-.emotion-5:hover,
-.emotion-5:focus {
-  outline: 0 none;
-  color: #1EA7FD;
-}
-
-.emotion-5 > svg {
-  width: 15px;
-}
-
-.emotion-22 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding-top: 20px;
-  margin-top: 20px;
-  border-top: 1px solid rgba(0,0,0,.1);
-  font-weight: 700;
-}
-
-.emotion-22 > * + * {
-  margin-left: 20px;
-}
-
-.emotion-14 {
-  display: inline-block;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  color: #1EA7FD;
-  color: #999999;
-}
-
-.emotion-14 svg path {
-  fill: #1EA7FD;
-}
-
-.emotion-14:hover,
-.emotion-14:focus {
-  cursor: pointer;
-  color: #0297f5;
-}
-
-.emotion-14:hover svg path,
-.emotion-14:focus svg path {
-  fill: #0297f5;
-}
-
-.emotion-14:active {
-  color: #028ee6;
-}
-
-.emotion-14:active svg path {
-  fill: #028ee6;
-}
-
-.emotion-14 svg {
-  display: inline-block;
-  height: 1em;
-  width: 1em;
-  vertical-align: text-top;
-  position: relative;
-  bottom: -0.125em;
-  margin-right: 0.4em;
-}
-
-.emotion-14 svg path {
-  fill: #999999;
-}
-
-.emotion-14:hover {
-  color: #666666;
-}
-
-.emotion-14:hover svg path {
-  fill: #666666;
-}
-
-.emotion-14:active {
-  color: #444444;
-}
-
-.emotion-14:active svg path {
-  fill: #444444;
-}
-
-.emotion-24 {
-  display: block;
-}
-
-.emotion-23 {
-  padding: 3rem 20px;
-  max-width: 600px;
-  margin: 0 auto;
-}
-
-.emotion-9 {
-  margin-bottom: 20px;
-  font-size: 28px;
-  font-weight: 900;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.emotion-9 > svg {
-  height: 32px;
-  width: auto;
-  margin-right: 8px;
-}
-
-.emotion-13 > svg:last-of-type {
-  height: 0.7em;
-  width: 0.7em;
-  margin-right: 0;
-  margin-left: 0.25em;
-  bottom: auto;
-  vertical-align: inherit;
-}
-
-.emotion-10 {
-  background: #FEDED2;
-  color: #FF4400;
-  font-weight: 700;
-  font-size: 14px;
-  padding: 10px 20px;
-  margin-bottom: 24px;
-  border-radius: 4px;
-  border: 1px solid rgba(0,0,0,.1);
-  text-align: center;
-}
-
-.emotion-15 {
-  font-weight: 700;
-  text-align: center;
-}
-
-<div
-  style="position:relative;height:calc(100vh);width:calc(100vw)"
->
-  <div
-    class="emotion-26"
-  >
-    <div
-      class="emotion-8"
-      data-simplebar="true"
-    >
-      <div
-        class="simplebar-wrapper"
-      >
-        <div
-          class="simplebar-height-auto-observer-wrapper"
-        >
-          <div
-            class="simplebar-height-auto-observer"
-          />
-        </div>
-        <div
-          class="simplebar-mask"
-        >
-          <div
-            class="simplebar-offset"
-          >
-            <div
-              class="simplebar-content-wrapper"
-            >
-              <div
-                class="simplebar-content"
-              >
-                <div
-                  class="emotion-7"
-                >
-                  <div
-                    class="emotion-2"
-                  >
-                    <div
-                      class="emotion-1"
-                      role="tablist"
-                    >
-                      <button
-                        class="emotion-0"
-                        role="tab"
-                        type="button"
-                      >
-                        About
-                      </button>
-                    </div>
-                  </div>
-                  <div
-                    class="emotion-6"
-                  >
-                    <button
-                      class="emotion-5"
-                    >
-                      <svg
-                        class="emotion-4"
-                        viewBox="0 0 1024 1024"
-                      >
-                        <path
-                          class="emotion-3"
-                          d="M693.022 637.866c15.62 15.622 15.618 40.95 0 56.566-15.622 15.622-40.946 15.624-56.562 0.002l-124.46-124.458-124.456 124.458c-15.622 15.622-40.944 15.622-56.562 0-15.624-15.622-15.624-40.946-0.002-56.568l124.454-124.456-124.452-124.45c-15.622-15.622-15.622-40.946 0-56.564 15.62-15.624 40.944-15.624 56.568-0.002l124.45 124.45 124.454-124.452c15.622-15.62 40.95-15.62 56.566 0 15.622 15.62 15.624 40.944 0.002 56.56l-124.456 124.458 124.456 124.456zM828.784 828.784c-174.956 174.956-458.614 174.956-633.566 0-174.958-174.956-174.958-458.614 0-633.566 174.954-174.958 458.612-174.958 633.566 0 174.954 174.952 174.954 458.612 0 633.566zM880 511.998c-0.002-98.296-38.28-190.708-107.786-260.212s-161.92-107.786-260.214-107.788c-98.296 0.002-190.71 38.282-260.216 107.786-69.506 69.508-107.782 161.918-107.786 260.214 0.002 98.296 38.282 190.71 107.786 260.216 69.508 69.506 161.918 107.784 260.216 107.784 98.296 0 190.708-38.278 260.214-107.784s107.784-161.92 107.786-260.216z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="simplebar-placeholder"
-        />
-      </div>
-      <div
-        class="simplebar-track simplebar-horizontal"
-      >
-        <div
-          class="simplebar-scrollbar"
-        />
-      </div>
-      <div
-        class="simplebar-track simplebar-vertical"
-      >
-        <div
-          class="simplebar-scrollbar"
-        />
-      </div>
-    </div>
-    <div
-      class="emotion-25"
-    >
-      <div
-        class="emotion-24"
-        role="tabpanel"
-      >
-        <div
-          class="emotion-23"
-        >
-          <header
-            class="emotion-9"
-          >
-            <svg
-              viewBox="0 0 64 64"
-            >
-              <title>
-                Storybook icon
-              </title>
-              <g
-                fill="none"
-                fill-rule="evenodd"
-                id="Artboard"
-                stroke="none"
-                stroke-width="1"
-              >
-                <path
-                  d="M8.04798541,58.7875918 L6.07908839,6.32540407 C6.01406344,4.5927838 7.34257463,3.12440831 9.07303814,3.01625434 L53.6958037,0.227331489 C55.457209,0.117243658 56.974354,1.45590096 57.0844418,3.21730626 C57.0885895,3.28366922 57.0906648,3.35014546 57.0906648,3.41663791 L57.0906648,60.5834697 C57.0906648,62.3483119 55.6599776,63.7789992 53.8951354,63.7789992 C53.847325,63.7789992 53.7995207,63.7779262 53.7517585,63.775781 L11.0978899,61.8600599 C9.43669044,61.7854501 8.11034889,60.4492961 8.04798541,58.7875918 Z"
-                  fill="#FF4785"
-                  fill-rule="nonzero"
-                  id="path-1"
-                />
-                <path
-                  d="M35.9095005,24.1768792 C35.9095005,25.420127 44.2838488,24.8242707 45.4080313,23.9509748 C45.4080313,15.4847538 40.8652557,11.0358878 32.5466666,11.0358878 C24.2280775,11.0358878 19.5673077,15.553972 19.5673077,22.3311017 C19.5673077,34.1346028 35.4965208,34.3605071 35.4965208,40.7987804 C35.4965208,42.606015 34.6115646,43.6790606 32.6646607,43.6790606 C30.127786,43.6790606 29.1248356,42.3834613 29.2428298,37.9783269 C29.2428298,37.0226907 19.5673077,36.7247626 19.2723223,37.9783269 C18.5211693,48.6535354 25.1720308,51.7326752 32.7826549,51.7326752 C40.1572906,51.7326752 45.939005,47.8018145 45.939005,40.6858282 C45.939005,28.035186 29.7738035,28.3740425 29.7738035,22.1051974 C29.7738035,19.5637737 31.6617103,19.2249173 32.7826549,19.2249173 C33.9625966,19.2249173 36.0864917,19.4328883 35.9095005,24.1768792 Z"
-                  fill="#FFFFFF"
-                  fill-rule="nonzero"
-                  id="path9_fill-path"
-                />
-                <path
-                  d="M44.0461638,0.830433986 L50.1874092,0.446606143 L50.443532,7.7810017 C50.4527198,8.04410717 50.2468789,8.26484453 49.9837734,8.27403237 C49.871115,8.27796649 49.7607078,8.24184808 49.6721567,8.17209069 L47.3089847,6.3104681 L44.5110468,8.43287463 C44.3012992,8.591981 44.0022839,8.55092814 43.8431776,8.34118051 C43.7762017,8.25288717 43.742082,8.14401677 43.7466857,8.03329059 L44.0461638,0.830433986 Z"
-                  fill="#FFFFFF"
-                  id="Path"
-                />
-              </g>
-            </svg>
-            Storybook 5.0.0
-          </header>
-          <div
-            class="emotion-10"
-          >
-            Oops! The latest version of Storybook couldn't be fetched.
-          </div>
-          <div
-            class="emotion-15"
-          >
-            <a
-              class="emotion-14"
-              href="https://github.com/storybookjs/storybook/releases"
-              target="_blank"
-            >
-              <span
-                class="emotion-13"
-              >
-                Check Storybook's release history
-                <svg
-                  class="emotion-4"
-                  viewBox="0 0 1024 1024"
-                >
-                  <path
-                    class="emotion-3"
-                    d="M768.072 514.022c0 10.236-3.904 20.47-11.712 28.282l-344.098 344.156c-15.62 15.624-40.946 15.624-56.568 0.006-15.622-15.622-15.624-40.948-0.006-56.568l315.82-315.876-315.868-315.922c-15.618-15.624-15.618-40.952 0.004-56.568 15.624-15.62 40.95-15.618 56.57 0.006l344.144 344.204c7.81 7.81 11.714 18.044 11.714 28.28z"
-                  />
-                </svg>
-              </span>
-            </a>
-          </div>
-          <div
-            class="emotion-22"
-          >
-            <a
-              class="emotion-14"
-              href="https://storybook.js.org"
-              target="_blank"
-            >
-              <span
-                class="emotion-16"
-              >
-                Docs
-              </span>
-            </a>
-            <a
-              class="emotion-14"
-              href="https://github.com/storybookjs/storybook"
-              target="_blank"
-            >
-              <span
-                class="emotion-16"
-              >
-                GitHub
-              </span>
-            </a>
-            <a
-              class="emotion-14"
-              href="https://storybook.js.org/support"
-              target="_blank"
-            >
-              <span
-                class="emotion-16"
-              >
-                Support
-              </span>
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots UI|Settings/AboutScreen new version required 1`] = `
-.emotion-42 {
-  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-8 {
-  overflow-y: hidden;
-  overflow-x: auto;
-  width: 100%;
-  color: #999999;
-  width: 100%;
-  height: 40px;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  box-shadow: rgba(0,0,0,.1) 0 -1px 0 0 inset;
-  background: #FFFFFF;
-}
-
-.emotion-7 {
-  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;
-  position: relative;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  height: 40px;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  white-space: nowrap;
-  -webkit-flex-basis: auto;
-  -ms-flex-preferred-size: auto;
-  flex-basis: auto;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
-.emotion-2 > * {
-  margin-left: 15px;
-}
-
-.emotion-1 {
-  overflow: hidden;
-}
-
-.emotion-1:first-of-type {
-  margin-left: 0;
-}
-
-.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;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding: 0 15px;
-  text-transform: capitalize;
-  -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;
-  cursor: pointer;
-  background: transparent;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  font-weight: bold;
-  font-size: 13px;
-  color: #1EA7FD;
-  border-bottom-color: #1EA7FD;
-}
-
-.emotion-0:empty {
-  display: none;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #1EA7FD;
-}
-
-.emotion-6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  white-space: nowrap;
-  -webkit-flex-basis: auto;
-  -ms-flex-preferred-size: auto;
-  flex-basis: auto;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  margin-left: 30px;
-}
-
-.emotion-6 > * {
-  margin-right: 15px;
-}
-
-.emotion-4 {
-  shape-rendering: inherit;
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-  display: block;
-}
-
-.emotion-3 {
-  fill: currentColor;
-}
-
-.emotion-41 {
-  display: block;
-  position: relative;
-  font-size: 13px;
-  height: calc(100% - 40px);
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 40px;
-  overflow: auto;
-}
-
-.emotion-41 > *:first-child {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  height: 100%;
-  overflow: auto;
-}
-
-.emotion-5 {
-  height: 40px;
-  background: none;
-  color: inherit;
-  padding: 0;
-  cursor: pointer;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
-  transition: color 0.2s linear,border-bottom-color 0.2s linear;
-}
-
-.emotion-5:hover,
-.emotion-5:focus {
-  outline: 0 none;
-  color: #1EA7FD;
-}
-
-.emotion-5 > svg {
-  width: 15px;
-}
-
-.emotion-38 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding-top: 20px;
-  margin-top: 20px;
-  border-top: 1px solid rgba(0,0,0,.1);
-  font-weight: 700;
-}
-
-.emotion-38 > * + * {
-  margin-left: 20px;
-}
-
-.emotion-33 {
-  display: inline-block;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  color: #1EA7FD;
-  color: #999999;
-}
-
-.emotion-33 svg path {
-  fill: #1EA7FD;
-}
-
-.emotion-33:hover,
-.emotion-33:focus {
-  cursor: pointer;
-  color: #0297f5;
-}
-
-.emotion-33:hover svg path,
-.emotion-33:focus svg path {
-  fill: #0297f5;
-}
-
-.emotion-33:active {
-  color: #028ee6;
-}
-
-.emotion-33:active svg path {
-  fill: #028ee6;
-}
-
-.emotion-33 svg {
-  display: inline-block;
-  height: 1em;
-  width: 1em;
-  vertical-align: text-top;
-  position: relative;
-  bottom: -0.125em;
-  margin-right: 0.4em;
-}
-
-.emotion-33 svg path {
-  fill: #999999;
-}
-
-.emotion-33:hover {
-  color: #666666;
-}
-
-.emotion-33:hover svg path {
-  fill: #666666;
-}
-
-.emotion-33:active {
-  color: #444444;
-}
-
-.emotion-33:active svg path {
-  fill: #444444;
-}
-
-.emotion-40 {
-  display: block;
-}
-
-.emotion-39 {
-  padding: 3rem 20px;
-  max-width: 600px;
-  margin: 0 auto;
-}
-
-.emotion-9 {
-  margin-bottom: 20px;
-  font-size: 28px;
-  font-weight: 900;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.emotion-9 > svg {
-  height: 32px;
-  width: auto;
-  margin-right: 8px;
-}
-
-.emotion-16 {
-  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;
-  margin-bottom: .75rem;
-}
-
-.emotion-11 {
-  -webkit-letter-spacing: 0.35em;
-  -moz-letter-spacing: 0.35em;
-  -ms-letter-spacing: 0.35em;
-  letter-spacing: 0.35em;
-  text-transform: uppercase;
-  font-weight: 900;
-  font-size: 13px;
-  line-height: 24px;
-  color: #999999;
-}
-
-.emotion-15 {
-  display: inline-block;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  color: #1EA7FD;
-  color: #999999;
-  font-size: 12px;
-}
-
-.emotion-15 svg path {
-  fill: #1EA7FD;
-}
-
-.emotion-15:hover,
-.emotion-15:focus {
-  cursor: pointer;
-  color: #0297f5;
-}
-
-.emotion-15:hover svg path,
-.emotion-15:focus svg path {
-  fill: #0297f5;
-}
-
-.emotion-15:active {
-  color: #028ee6;
-}
-
-.emotion-15:active svg path {
-  fill: #028ee6;
-}
-
-.emotion-15 svg {
-  display: inline-block;
-  height: 1em;
-  width: 1em;
-  vertical-align: text-top;
-  position: relative;
-  bottom: -0.125em;
-  margin-right: 0.4em;
-}
-
-.emotion-15 svg path {
-  fill: #999999;
-}
-
-.emotion-15:hover {
-  color: #666666;
-}
-
-.emotion-15:hover svg path {
-  fill: #666666;
-}
-
-.emotion-15:active {
-  color: #444444;
-}
-
-.emotion-15:active svg path {
-  fill: #444444;
-}
-
-.emotion-14 > svg:last-of-type {
-  height: 0.7em;
-  width: 0.7em;
-  margin-right: 0;
-  margin-left: 0.25em;
-  bottom: auto;
-  vertical-align: inherit;
-}
-
-.emotion-17 {
-  font-size: 14px;
-  line-height: 1.6;
-}
-
-.emotion-17 h1 {
-  font-size: 32px;
-  font-weight: 900;
-}
-
-.emotion-17 h2 {
-  font-size: 24px;
-  border-bottom: 1px solid rgba(0,0,0,.1);
-}
-
-.emotion-17 h3 {
-  font-size: 20px;
-}
-
-.emotion-17 h4 {
-  font-size: 16px;
-}
-
-.emotion-17 h5 {
-  font-size: 14px;
-}
-
-.emotion-17 h6 {
-  font-size: 14px;
-  color: #666666;
-}
-
-.emotion-17 pre:not(.hljs) {
-  background: transparent;
-  border: none;
-  border-radius: 0;
-  padding: 0;
-  margin: 0;
-}
-
-.emotion-17 pre pre,
-.emotion-17 pre.hljs {
-  padding: 15px;
-  margin: 0;
-  white-space: pre-wrap;
-  color: inherit;
-  font-size: 13px;
-  line-height: 19px;
-}
-
-.emotion-17 pre pre code,
-.emotion-17 pre.hljs code {
-  color: inherit;
-  font-size: inherit;
-}
-
-.emotion-17 pre code {
-  margin: 0;
-  padding: 0;
-  white-space: pre;
-  border: none;
-  background: transparent;
-}
-
-.emotion-17 pre code,
-.emotion-17 pre tt {
-  background-color: transparent;
-  border: none;
-}
-
-.emotion-17 body > *:first-of-type {
-  margin-top: 0 !important;
-}
-
-.emotion-17 body > *:last-child {
-  margin-bottom: 0 !important;
-}
-
-.emotion-17 a {
-  color: #1EA7FD;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-17 a.absent {
-  color: #cc0000;
-}
-
-.emotion-17 a.anchor {
-  display: block;
-  padding-left: 30px;
-  margin-left: -30px;
-  cursor: pointer;
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-}
-
-.emotion-17 h1,
-.emotion-17 h2,
-.emotion-17 h3,
-.emotion-17 h4,
-.emotion-17 h5,
-.emotion-17 h6 {
-  margin: 20px 0 10px;
-  padding: 0;
-  cursor: text;
-  position: relative;
-}
-
-.emotion-17 h2:first-of-type,
-.emotion-17 h1:first-of-type,
-.emotion-17 h1:first-of-type + h2,
-.emotion-17 h3:first-of-type,
-.emotion-17 h4:first-of-type,
-.emotion-17 h5:first-of-type,
-.emotion-17 h6:first-of-type {
-  margin-top: 0;
-  padding-top: 0;
-}
-
-.emotion-17 h1:hover a.anchor,
-.emotion-17 h2:hover a.anchor,
-.emotion-17 h3:hover a.anchor,
-.emotion-17 h4:hover a.anchor,
-.emotion-17 h5:hover a.anchor,
-.emotion-17 h6:hover a.anchor {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-17 h1 tt,
-.emotion-17 h1 code {
-  font-size: inherit;
-}
-
-.emotion-17 h2 tt,
-.emotion-17 h2 code {
-  font-size: inherit;
-}
-
-.emotion-17 h3 tt,
-.emotion-17 h3 code {
-  font-size: inherit;
-}
-
-.emotion-17 h4 tt,
-.emotion-17 h4 code {
-  font-size: inherit;
-}
-
-.emotion-17 h5 tt,
-.emotion-17 h5 code {
-  font-size: inherit;
-}
-
-.emotion-17 h6 tt,
-.emotion-17 h6 code {
-  font-size: inherit;
-}
-
-.emotion-17 p,
-.emotion-17 blockquote,
-.emotion-17 ul,
-.emotion-17 ol,
-.emotion-17 dl,
-.emotion-17 li,
-.emotion-17 table,
-.emotion-17 pre {
-  margin: 15px 0;
-}
-
-.emotion-17 hr {
-  border: 0 none;
-  color: rgba(0,0,0,.1);
-  height: 4px;
-  padding: 0;
-}
-
-.emotion-17 body > h2:first-of-type {
-  margin-top: 0;
-  padding-top: 0;
-}
-
-.emotion-17 body > h1:first-of-type {
-  margin-top: 0;
-  padding-top: 0;
-}
-
-.emotion-17 body > h1:first-of-type + h2 {
-  margin-top: 0;
-  padding-top: 0;
-}
-
-.emotion-17 body > h3:first-of-type,
-.emotion-17 body > h4:first-of-type,
-.emotion-17 body > h5:first-of-type,
-.emotion-17 body > h6:first-of-type {
-  margin-top: 0;
-  padding-top: 0;
-}
-
-.emotion-17 a:first-of-type h1,
-.emotion-17 a:first-of-type h2,
-.emotion-17 a:first-of-type h3,
-.emotion-17 a:first-of-type h4,
-.emotion-17 a:first-of-type h5,
-.emotion-17 a:first-of-type h6 {
-  margin-top: 0;
-  padding-top: 0;
-}
-
-.emotion-17 h1 p,
-.emotion-17 h2 p,
-.emotion-17 h3 p,
-.emotion-17 h4 p,
-.emotion-17 h5 p,
-.emotion-17 h6 p {
-  margin-top: 0;
-}
-
-.emotion-17 li p.first {
-  display: inline-block;
-}
-
-.emotion-17 ul,
-.emotion-17 ol {
-  padding-left: 30px;
-}
-
-.emotion-17 ul :first-of-type,
-.emotion-17 ol :first-of-type {
-  margin-top: 0;
-}
-
-.emotion-17 ul :last-child,
-.emotion-17 ol :last-child {
-  margin-bottom: 0;
-}
-
-.emotion-17 dl {
-  padding: 0;
-}
-
-.emotion-17 dl dt {
-  font-size: 14px;
-  font-weight: bold;
-  font-style: italic;
-  padding: 0;
-  margin: 15px 0 5px;
-}
-
-.emotion-17 dl dt:first-of-type {
-  padding: 0;
-}
-
-.emotion-17 dl dt > :first-of-type {
-  margin-top: 0;
-}
-
-.emotion-17 dl dt > :last-child {
-  margin-bottom: 0;
-}
-
-.emotion-17 dl dd {
-  margin: 0 0 15px;
-  padding: 0 15px;
-}
-
-.emotion-17 dl dd > :first-of-type {
-  margin-top: 0;
-}
-
-.emotion-17 dl dd > :last-child {
-  margin-bottom: 0;
-}
-
-.emotion-17 blockquote {
-  border-left: 4px solid #DDDDDD;
-  padding: 0 15px;
-  color: #666666;
-}
-
-.emotion-17 blockquote > :first-of-type {
-  margin-top: 0;
-}
-
-.emotion-17 blockquote > :last-child {
-  margin-bottom: 0;
-}
-
-.emotion-17 table {
-  padding: 0;
-  border-collapse: collapse;
-}
-
-.emotion-17 table tr {
-  border-top: 1px solid rgba(0,0,0,.1);
-  background-color: white;
-  margin: 0;
-  padding: 0;
-}
-
-.emotion-17 table tr:nth-of-type(2n) {
-  background-color: #F8F8F8;
-}
-
-.emotion-17 table tr th {
-  font-weight: bold;
-  border: 1px solid rgba(0,0,0,.1);
-  text-align: left;
-  margin: 0;
-  padding: 6px 13px;
-}
-
-.emotion-17 table tr td {
-  border: 1px solid rgba(0,0,0,.1);
-  text-align: left;
-  margin: 0;
-  padding: 6px 13px;
-}
-
-.emotion-17 table tr th :first-of-type,
-.emotion-17 table tr td :first-of-type {
-  margin-top: 0;
-}
-
-.emotion-17 table tr th :last-child,
-.emotion-17 table tr td :last-child {
-  margin-bottom: 0;
-}
-
-.emotion-17 img {
-  max-width: 100%;
-}
-
-.emotion-17 span.frame {
-  display: block;
-  overflow: hidden;
-}
-
-.emotion-17 span.frame > span {
-  border: 1px solid #DDDDDD;
-  display: block;
-  float: left;
-  overflow: hidden;
-  margin: 13px 0 0;
-  padding: 7px;
-  width: auto;
-}
-
-.emotion-17 span.frame span img {
-  display: block;
-  float: left;
-}
-
-.emotion-17 span.frame span span {
-  clear: both;
-  color: #333333;
-  display: block;
-  padding: 5px 0 0;
-}
-
-.emotion-17 span.align-center {
-  display: block;
-  overflow: hidden;
-  clear: both;
-}
-
-.emotion-17 span.align-center > span {
-  display: block;
-  overflow: hidden;
-  margin: 13px auto 0;
-  text-align: center;
-}
-
-.emotion-17 span.align-center span img {
-  margin: 0 auto;
-  text-align: center;
-}
-
-.emotion-17 span.align-right {
-  display: block;
-  overflow: hidden;
-  clear: both;
-}
-
-.emotion-17 span.align-right > span {
-  display: block;
-  overflow: hidden;
-  margin: 13px 0 0;
-  text-align: right;
-}
-
-.emotion-17 span.align-right span img {
-  margin: 0;
-  text-align: right;
-}
-
-.emotion-17 span.float-left {
-  display: block;
-  margin-right: 13px;
-  overflow: hidden;
-  float: left;
-}
-
-.emotion-17 span.float-left span {
-  margin: 13px 0 0;
-}
-
-.emotion-17 span.float-right {
-  display: block;
-  margin-left: 13px;
-  overflow: hidden;
-  float: right;
-}
-
-.emotion-17 span.float-right > span {
-  display: block;
-  overflow: hidden;
-  margin: 13px auto 0;
-  text-align: right;
-}
-
-.emotion-17 code,
-.emotion-17 tt {
-  margin: 0 2px;
-  padding: 0 5px;
-  white-space: nowrap;
-  border: 1px solid #EEEEEE;
-  background-color: #F8F8F8;
-  border-radius: 3px;
-}
-
-.emotion-10 {
-  background: #E1FFD4;
-  color: #66BF3C;
-  font-weight: 700;
-  font-size: 14px;
-  padding: 10px 20px;
-  margin-bottom: 24px;
-  border-radius: 4px;
-  border: 1px solid rgba(0,0,0,.1);
-  text-align: center;
-}
-
-.emotion-31 {
-  margin-top: 20px;
-  border-top: 1px solid rgba(0,0,0,.1);
-}
-
-.emotion-23 {
-  position: relative;
-  overflow: hidden;
-  color: #333333;
-  border: 1px solid rgba(0,0,0,.1);
-  background: #FFFFFF;
-}
-
-.emotion-20 {
-  overflow-y: auto;
-  height: 100%;
-  overflow-x: auto;
-  width: 100%;
-  position: relative;
-}
-
-.emotion-20 code {
-  padding-right: 10px;
-}
-
-.emotion-20 * .token {
-  font-family: "Operator Mono","Fira Code Retina","Fira Code","FiraCode-Retina","Andale Mono","Lucida Console",Consolas,Monaco,monospace;
-  -webkit-font-smoothing: antialiased;
-}
-
-.emotion-20 * .token.comment {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-20 * .token.prolog {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-20 * .token.doctype {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-20 * .token.cdata {
-  color: #008000;
-  font-style: italic;
-}
-
-.emotion-20 * .token.string {
-  color: #A31515;
-}
-
-.emotion-20 * .token.punctuation {
-  color: #393A34;
-}
-
-.emotion-20 * .token.operator {
-  color: #393A34;
-}
-
-.emotion-20 * .token.url {
-  color: #36acaa;
-}
-
-.emotion-20 * .token.symbol {
-  color: #36acaa;
-}
-
-.emotion-20 * .token.number {
-  color: #36acaa;
-}
-
-.emotion-20 * .token.boolean {
-  color: #36acaa;
-}
-
-.emotion-20 * .token.variable {
-  color: #36acaa;
-}
-
-.emotion-20 * .token.constant {
-  color: #36acaa;
-}
-
-.emotion-20 * .token.inserted {
-  color: #36acaa;
-}
-
-.emotion-20 * .token.atrule {
-  color: #0000ff;
-}
-
-.emotion-20 * .token.keyword {
-  color: #0000ff;
-}
-
-.emotion-20 * .token.attr-value {
-  color: #0000ff;
-}
-
-.emotion-20 * .token.function {
-  color: #393A34;
-}
-
-.emotion-20 * .token.deleted {
-  color: #9a050f;
-}
-
-.emotion-20 * .token.important {
-  font-weight: bold;
-}
-
-.emotion-20 * .token.bold {
-  font-weight: bold;
-}
-
-.emotion-20 * .token.italic {
-  font-style: italic;
-}
-
-.emotion-20 * .token.class-name {
-  color: #2B91AF;
-}
-
-.emotion-20 * .token.tag {
-  color: #800000;
-}
-
-.emotion-20 * .token.selector {
-  color: #800000;
-}
-
-.emotion-20 * .token.attr-name {
-  color: #ff0000;
-}
-
-.emotion-20 * .token.property {
-  color: #ff0000;
-}
-
-.emotion-20 * .token.regex {
-  color: #ff0000;
-}
-
-.emotion-20 * .token.entity {
-  color: #ff0000;
-}
-
-.emotion-20 * .token.directive.tag .tag {
-  background: #ffff00;
-  color: #393A34;
-}
-
-.emotion-20 * .language-json .token.boolean {
-  color: #0000ff;
-}
-
-.emotion-20 * .language-json .token.number {
-  color: #0000ff;
-}
-
-.emotion-20 * .language-json .token.property {
-  color: #2B91AF;
-}
-
-.emotion-20 * .namespace {
-  opacity: 0.7;
-}
-
-.emotion-19 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  margin: 0;
-  padding: 10px;
-}
-
-.emotion-18 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  padding-right: 0;
-  opacity: 1;
-}
-
-.emotion-22 {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  max-width: 100%;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  background: #FFFFFF;
-  z-index: 1;
-}
-
-.emotion-21 {
-  border: 0 none;
-  padding: 4px 10px;
-  cursor: pointer;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  color: #333333;
-  background: #FFFFFF;
-  font-size: 12px;
-  line-height: 16px;
-  font-weight: 700;
-  border-top: 1px solid rgba(0,0,0,.1);
-  border-left: 1px solid rgba(0,0,0,.1);
-  margin-left: -1px;
-  border-radius: 4px 0 0 0;
-}
-
-.emotion-21:not(:last-child) {
-  border-right: 1px solid rgba(0,0,0,.1);
-}
-
-.emotion-21 + * {
-  border-left: 1px solid rgba(0,0,0,.1);
-  border-radius: 0;
-}
-
-.emotion-21:focus {
-  box-shadow: #1EA7FD 0 -3px 0 0 inset;
-  outline: 0 none;
-}
-
-<div
-  style="position:relative;height:calc(100vh);width:calc(100vw)"
->
-  <div
-    class="emotion-42"
-  >
-    <div
-      class="emotion-8"
-      data-simplebar="true"
-    >
-      <div
-        class="simplebar-wrapper"
-      >
-        <div
-          class="simplebar-height-auto-observer-wrapper"
-        >
-          <div
-            class="simplebar-height-auto-observer"
-          />
-        </div>
-        <div
-          class="simplebar-mask"
-        >
-          <div
-            class="simplebar-offset"
-          >
-            <div
-              class="simplebar-content-wrapper"
-            >
-              <div
-                class="simplebar-content"
-              >
-                <div
-                  class="emotion-7"
-                >
-                  <div
-                    class="emotion-2"
-                  >
-                    <div
-                      class="emotion-1"
-                      role="tablist"
-                    >
-                      <button
-                        class="emotion-0"
-                        role="tab"
-                        type="button"
-                      >
-                        About
-                      </button>
-                    </div>
-                  </div>
-                  <div
-                    class="emotion-6"
-                  >
-                    <button
-                      class="emotion-5"
-                    >
-                      <svg
-                        class="emotion-4"
-                        viewBox="0 0 1024 1024"
-                      >
-                        <path
-                          class="emotion-3"
-                          d="M693.022 637.866c15.62 15.622 15.618 40.95 0 56.566-15.622 15.622-40.946 15.624-56.562 0.002l-124.46-124.458-124.456 124.458c-15.622 15.622-40.944 15.622-56.562 0-15.624-15.622-15.624-40.946-0.002-56.568l124.454-124.456-124.452-124.45c-15.622-15.622-15.622-40.946 0-56.564 15.62-15.624 40.944-15.624 56.568-0.002l124.45 124.45 124.454-124.452c15.622-15.62 40.95-15.62 56.566 0 15.622 15.62 15.624 40.944 0.002 56.56l-124.456 124.458 124.456 124.456zM828.784 828.784c-174.956 174.956-458.614 174.956-633.566 0-174.958-174.956-174.958-458.614 0-633.566 174.954-174.958 458.612-174.958 633.566 0 174.954 174.952 174.954 458.612 0 633.566zM880 511.998c-0.002-98.296-38.28-190.708-107.786-260.212s-161.92-107.786-260.214-107.788c-98.296 0.002-190.71 38.282-260.216 107.786-69.506 69.508-107.782 161.918-107.786 260.214 0.002 98.296 38.282 190.71 107.786 260.216 69.508 69.506 161.918 107.784 260.216 107.784 98.296 0 190.708-38.278 260.214-107.784s107.784-161.92 107.786-260.216z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="simplebar-placeholder"
-        />
-      </div>
-      <div
-        class="simplebar-track simplebar-horizontal"
-      >
-        <div
-          class="simplebar-scrollbar"
-        />
-      </div>
-      <div
-        class="simplebar-track simplebar-vertical"
-      >
-        <div
-          class="simplebar-scrollbar"
-        />
-      </div>
-    </div>
-    <div
-      class="emotion-41"
-    >
-      <div
-        class="emotion-40"
-        role="tabpanel"
-      >
-        <div
-          class="emotion-39"
-        >
-          <header
-            class="emotion-9"
-          >
-            <svg
-              viewBox="0 0 64 64"
-            >
-              <title>
-                Storybook icon
-              </title>
-              <g
-                fill="none"
-                fill-rule="evenodd"
-                id="Artboard"
-                stroke="none"
-                stroke-width="1"
-              >
-                <path
-                  d="M8.04798541,58.7875918 L6.07908839,6.32540407 C6.01406344,4.5927838 7.34257463,3.12440831 9.07303814,3.01625434 L53.6958037,0.227331489 C55.457209,0.117243658 56.974354,1.45590096 57.0844418,3.21730626 C57.0885895,3.28366922 57.0906648,3.35014546 57.0906648,3.41663791 L57.0906648,60.5834697 C57.0906648,62.3483119 55.6599776,63.7789992 53.8951354,63.7789992 C53.847325,63.7789992 53.7995207,63.7779262 53.7517585,63.775781 L11.0978899,61.8600599 C9.43669044,61.7854501 8.11034889,60.4492961 8.04798541,58.7875918 Z"
-                  fill="#FF4785"
-                  fill-rule="nonzero"
-                  id="path-1"
-                />
-                <path
-                  d="M35.9095005,24.1768792 C35.9095005,25.420127 44.2838488,24.8242707 45.4080313,23.9509748 C45.4080313,15.4847538 40.8652557,11.0358878 32.5466666,11.0358878 C24.2280775,11.0358878 19.5673077,15.553972 19.5673077,22.3311017 C19.5673077,34.1346028 35.4965208,34.3605071 35.4965208,40.7987804 C35.4965208,42.606015 34.6115646,43.6790606 32.6646607,43.6790606 C30.127786,43.6790606 29.1248356,42.3834613 29.2428298,37.9783269 C29.2428298,37.0226907 19.5673077,36.7247626 19.2723223,37.9783269 C18.5211693,48.6535354 25.1720308,51.7326752 32.7826549,51.7326752 C40.1572906,51.7326752 45.939005,47.8018145 45.939005,40.6858282 C45.939005,28.035186 29.7738035,28.3740425 29.7738035,22.1051974 C29.7738035,19.5637737 31.6617103,19.2249173 32.7826549,19.2249173 C33.9625966,19.2249173 36.0864917,19.4328883 35.9095005,24.1768792 Z"
-                  fill="#FFFFFF"
-                  fill-rule="nonzero"
-                  id="path9_fill-path"
-                />
-                <path
-                  d="M44.0461638,0.830433986 L50.1874092,0.446606143 L50.443532,7.7810017 C50.4527198,8.04410717 50.2468789,8.26484453 49.9837734,8.27403237 C49.871115,8.27796649 49.7607078,8.24184808 49.6721567,8.17209069 L47.3089847,6.3104681 L44.5110468,8.43287463 C44.3012992,8.591981 44.0022839,8.55092814 43.8431776,8.34118051 C43.7762017,8.25288717 43.742082,8.14401677 43.7466857,8.03329059 L44.0461638,0.830433986 Z"
-                  fill="#FFFFFF"
-                  id="Path"
-                />
-              </g>
-            </svg>
-            Storybook 5.0.0
-          </header>
-          <div
-            class="emotion-10"
-          >
-            Storybook 5.0.3 is available. Upgrade from 5.0.0 now.
-          </div>
-          <div
-            class="emotion-16"
-          >
-            <span
-              class="emotion-11"
-            >
-              5.0.3 Changelog
-            </span>
-            <a
-              class="emotion-15"
-              href="https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md"
-              target="_blank"
-            >
-              <span
-                class="emotion-14"
-              >
-                Read full changelog
-                <svg
-                  class="emotion-4"
-                  viewBox="0 0 1024 1024"
-                >
-                  <path
-                    class="emotion-3"
-                    d="M768.072 514.022c0 10.236-3.904 20.47-11.712 28.282l-344.098 344.156c-15.62 15.624-40.946 15.624-56.568 0.006-15.622-15.622-15.624-40.948-0.006-56.568l315.82-315.876-315.868-315.922c-15.618-15.624-15.618-40.952 0.004-56.568 15.624-15.62 40.95-15.618 56.57 0.006l344.144 344.204c7.81 7.81 11.714 18.044 11.714 28.28z"
-                  />
-                </svg>
-              </span>
-            </a>
-          </div>
-          <div
-            class="emotion-17"
-          >
-            <ul>
-              <li>
-                upgrade webpack & babel to latest
-              </li>
-              <li>
-                new addParameters and third argument to .add to pass data to addons
-              </li>
-              <li>
-                added the ability to theme storybook
-              </li>
-              <li>
-                improved ui for mobile devices
-              </li>
-              <li>
-                improved performance of addon-knobs
-              </li>
-            </ul>
-          </div>
-          <div
-            class="emotion-31"
-          >
-            <div
-              class="emotion-17"
-            >
-              <p>
-                <b>
-                  Upgrade all Storybook packages to latest:
-                </b>
-              </p>
-              <div
-                class="emotion-23"
-              >
-                <div
-                  class="emotion-20"
-                  data-simplebar="true"
-                >
-                  <div
-                    class="simplebar-wrapper"
-                  >
-                    <div
-                      class="simplebar-height-auto-observer-wrapper"
-                    >
-                      <div
-                        class="simplebar-height-auto-observer"
-                      />
-                    </div>
-                    <div
-                      class="simplebar-mask"
-                    >
-                      <div
-                        class="simplebar-offset"
-                      >
-                        <div
-                          class="simplebar-content-wrapper"
-                        >
-                          <div
-                            class="simplebar-content"
-                          >
-                            <pre
-                              class="hljs emotion-19"
-                            >
-                              <code
-                                class="emotion-18"
-                              >
-                                npx npm-check-updates 
-                                <span
-                                  class="token string"
-                                >
-                                  '/storybook/'
-                                </span>
-                                 -u 
-                                <span
-                                  class="token operator"
-                                >
-                                  &&
-                                </span>
-                                 
-                                <span
-                                  class="token function"
-                                >
-                                  npm
-                                </span>
-                                 
-                                <span
-                                  class="token function"
-                                >
-                                  install
-                                </span>
-                              </code>
-                            </pre>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="simplebar-placeholder"
-                    />
-                  </div>
-                  <div
-                    class="simplebar-track simplebar-horizontal"
-                  >
-                    <div
-                      class="simplebar-scrollbar"
-                    />
-                  </div>
-                  <div
-                    class="simplebar-track simplebar-vertical"
-                  >
-                    <div
-                      class="simplebar-scrollbar"
-                    />
-                  </div>
-                </div>
-                <div
-                  class="emotion-22"
-                >
-                  <button
-                    class="emotion-21"
-                  >
-                    Copy
-                  </button>
-                </div>
-              </div>
-              <p>
-                Alternatively, if you're using yarn run the following command, and check all Storybook related packages:
-              </p>
-              <div
-                class="emotion-23"
-              >
-                <div
-                  class="emotion-20"
-                  data-simplebar="true"
-                >
-                  <div
-                    class="simplebar-wrapper"
-                  >
-                    <div
-                      class="simplebar-height-auto-observer-wrapper"
-                    >
-                      <div
-                        class="simplebar-height-auto-observer"
-                      />
-                    </div>
-                    <div
-                      class="simplebar-mask"
-                    >
-                      <div
-                        class="simplebar-offset"
-                      >
-                        <div
-                          class="simplebar-content-wrapper"
-                        >
-                          <div
-                            class="simplebar-content"
-                          >
-                            <pre
-                              class="hljs emotion-19"
-                            >
-                              <code
-                                class="emotion-18"
-                              >
-                                <span
-                                  class="token function"
-                                >
-                                  yarn
-                                </span>
-                                 upgrade-interactive --latest
-                              </code>
-                            </pre>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="simplebar-placeholder"
-                    />
-                  </div>
-                  <div
-                    class="simplebar-track simplebar-horizontal"
-                  >
-                    <div
-                      class="simplebar-scrollbar"
-                    />
-                  </div>
-                  <div
-                    class="simplebar-track simplebar-vertical"
-                  >
-                    <div
-                      class="simplebar-scrollbar"
-                    />
-                  </div>
-                </div>
-                <div
-                  class="emotion-22"
-                >
-                  <button
-                    class="emotion-21"
-                  >
-                    Copy
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="emotion-38"
-          >
-            <a
-              class="emotion-33"
-              href="https://storybook.js.org"
-              target="_blank"
-            >
-              <span
-                class="emotion-32"
-              >
-                Docs
-              </span>
-            </a>
-            <a
-              class="emotion-33"
-              href="https://github.com/storybookjs/storybook"
-              target="_blank"
-            >
-              <span
-                class="emotion-32"
-              >
-                GitHub
-              </span>
-            </a>
-            <a
-              class="emotion-33"
-              href="https://storybook.js.org/support"
-              target="_blank"
-            >
-              <span
-                class="emotion-32"
-              >
-                Support
-              </span>
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots UI|Settings/AboutScreen old version race condition 1`] = `
-.emotion-28 {
-  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-8 {
-  overflow-y: hidden;
-  overflow-x: auto;
-  width: 100%;
-  color: #999999;
-  width: 100%;
-  height: 40px;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  box-shadow: rgba(0,0,0,.1) 0 -1px 0 0 inset;
-  background: #FFFFFF;
-}
-
-.emotion-7 {
-  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;
-  position: relative;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  height: 40px;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  white-space: nowrap;
-  -webkit-flex-basis: auto;
-  -ms-flex-preferred-size: auto;
-  flex-basis: auto;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
-.emotion-2 > * {
-  margin-left: 15px;
-}
-
-.emotion-1 {
-  overflow: hidden;
-}
-
-.emotion-1:first-of-type {
-  margin-left: 0;
-}
-
-.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;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding: 0 15px;
-  text-transform: capitalize;
-  -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;
-  cursor: pointer;
-  background: transparent;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  font-weight: bold;
-  font-size: 13px;
-  color: #1EA7FD;
-  border-bottom-color: #1EA7FD;
-}
-
-.emotion-0:empty {
-  display: none;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #1EA7FD;
-}
-
-.emotion-6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  white-space: nowrap;
-  -webkit-flex-basis: auto;
-  -ms-flex-preferred-size: auto;
-  flex-basis: auto;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  margin-left: 30px;
-}
-
-.emotion-6 > * {
-  margin-right: 15px;
-}
-
-.emotion-4 {
-  shape-rendering: inherit;
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-  display: block;
-}
-
-.emotion-3 {
-  fill: currentColor;
-}
-
-.emotion-27 {
-  display: block;
-  position: relative;
-  font-size: 13px;
-  height: calc(100% - 40px);
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 40px;
-  overflow: auto;
-}
-
-.emotion-27 > *:first-child {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  height: 100%;
-  overflow: auto;
-}
-
-.emotion-5 {
-  height: 40px;
-  background: none;
-  color: inherit;
-  padding: 0;
-  cursor: pointer;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
-  transition: color 0.2s linear,border-bottom-color 0.2s linear;
-}
-
-.emotion-5:hover,
-.emotion-5:focus {
-  outline: 0 none;
-  color: #1EA7FD;
-}
-
-.emotion-5 > svg {
-  width: 15px;
-}
-
-.emotion-24 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding-top: 20px;
-  margin-top: 20px;
-  border-top: 1px solid rgba(0,0,0,.1);
-  font-weight: 700;
-}
-
-.emotion-24 > * + * {
-  margin-left: 20px;
-}
-
-.emotion-19 {
-  display: inline-block;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  color: #1EA7FD;
-  color: #999999;
-}
-
-.emotion-19 svg path {
-  fill: #1EA7FD;
-}
-
-.emotion-19:hover,
-.emotion-19:focus {
-  cursor: pointer;
-  color: #0297f5;
-}
-
-.emotion-19:hover svg path,
-.emotion-19:focus svg path {
-  fill: #0297f5;
-}
-
-.emotion-19:active {
-  color: #028ee6;
-}
-
-.emotion-19:active svg path {
-  fill: #028ee6;
-}
-
-.emotion-19 svg {
-  display: inline-block;
-  height: 1em;
-  width: 1em;
-  vertical-align: text-top;
-  position: relative;
-  bottom: -0.125em;
-  margin-right: 0.4em;
-}
-
-.emotion-19 svg path {
-  fill: #999999;
-}
-
-.emotion-19:hover {
-  color: #666666;
-}
-
-.emotion-19:hover svg path {
-  fill: #666666;
-}
-
-.emotion-19:active {
-  color: #444444;
-}
-
-.emotion-19:active svg path {
-  fill: #444444;
-}
-
-.emotion-26 {
-  display: block;
-}
-
-.emotion-25 {
-  padding: 3rem 20px;
-  max-width: 600px;
-  margin: 0 auto;
-}
-
-.emotion-9 {
-  margin-bottom: 20px;
-  font-size: 28px;
-  font-weight: 900;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.emotion-9 > svg {
-  height: 32px;
-  width: auto;
-  margin-right: 8px;
-}
-
-.emotion-10 {
-  background: #EAF3FC;
-  color: #333333;
-  font-weight: 700;
-  font-size: 14px;
-  padding: 10px 20px;
-  margin-bottom: 24px;
-  border-radius: 4px;
-  border: 1px solid rgba(0,0,0,.1);
-  text-align: center;
-}
-
-.emotion-16 {
-  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;
-  margin-bottom: .75rem;
-}
-
-.emotion-11 {
-  -webkit-letter-spacing: 0.35em;
-  -moz-letter-spacing: 0.35em;
-  -ms-letter-spacing: 0.35em;
-  letter-spacing: 0.35em;
-  text-transform: uppercase;
-  font-weight: 900;
-  font-size: 13px;
-  line-height: 24px;
-  color: #999999;
-}
-
-.emotion-15 {
-  display: inline-block;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  color: #1EA7FD;
-  color: #999999;
-  font-size: 12px;
-}
-
-.emotion-15 svg path {
-  fill: #1EA7FD;
-}
-
-.emotion-15:hover,
-.emotion-15:focus {
-  cursor: pointer;
-  color: #0297f5;
-}
-
-.emotion-15:hover svg path,
-.emotion-15:focus svg path {
-  fill: #0297f5;
-}
-
-.emotion-15:active {
-  color: #028ee6;
-}
-
-.emotion-15:active svg path {
-  fill: #028ee6;
-}
-
-.emotion-15 svg {
-  display: inline-block;
-  height: 1em;
-  width: 1em;
-  vertical-align: text-top;
-  position: relative;
-  bottom: -0.125em;
-  margin-right: 0.4em;
-}
-
-.emotion-15 svg path {
-  fill: #999999;
-}
-
-.emotion-15:hover {
-  color: #666666;
-}
-
-.emotion-15:hover svg path {
-  fill: #666666;
-}
-
-.emotion-15:active {
-  color: #444444;
-}
-
-.emotion-15:active svg path {
-  fill: #444444;
-}
-
-.emotion-14 > svg:last-of-type {
-  height: 0.7em;
-  width: 0.7em;
-  margin-right: 0;
-  margin-left: 0.25em;
-  bottom: auto;
-  vertical-align: inherit;
-}
-
-.emotion-17 {
-  font-size: 14px;
-  line-height: 1.6;
-}
-
-.emotion-17 h1 {
-  font-size: 32px;
-  font-weight: 900;
-}
-
-.emotion-17 h2 {
-  font-size: 24px;
-  border-bottom: 1px solid rgba(0,0,0,.1);
-}
-
-.emotion-17 h3 {
-  font-size: 20px;
-}
-
-.emotion-17 h4 {
-  font-size: 16px;
-}
-
-.emotion-17 h5 {
-  font-size: 14px;
-}
-
-.emotion-17 h6 {
-  font-size: 14px;
-  color: #666666;
-}
-
-.emotion-17 pre:not(.hljs) {
-  background: transparent;
-  border: none;
-  border-radius: 0;
-  padding: 0;
-  margin: 0;
-}
-
-.emotion-17 pre pre,
-.emotion-17 pre.hljs {
-  padding: 15px;
-  margin: 0;
-  white-space: pre-wrap;
-  color: inherit;
-  font-size: 13px;
-  line-height: 19px;
-}
-
-.emotion-17 pre pre code,
-.emotion-17 pre.hljs code {
-  color: inherit;
-  font-size: inherit;
-}
-
-.emotion-17 pre code {
-  margin: 0;
-  padding: 0;
-  white-space: pre;
-  border: none;
-  background: transparent;
-}
-
-.emotion-17 pre code,
-.emotion-17 pre tt {
-  background-color: transparent;
-  border: none;
-}
-
-.emotion-17 body > *:first-of-type {
-  margin-top: 0 !important;
-}
-
-.emotion-17 body > *:last-child {
-  margin-bottom: 0 !important;
-}
-
-.emotion-17 a {
-  color: #1EA7FD;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-17 a.absent {
-  color: #cc0000;
-}
-
-.emotion-17 a.anchor {
-  display: block;
-  padding-left: 30px;
-  margin-left: -30px;
-  cursor: pointer;
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-}
-
-.emotion-17 h1,
-.emotion-17 h2,
-.emotion-17 h3,
-.emotion-17 h4,
-.emotion-17 h5,
-.emotion-17 h6 {
-  margin: 20px 0 10px;
-  padding: 0;
-  cursor: text;
-  position: relative;
-}
-
-.emotion-17 h2:first-of-type,
-.emotion-17 h1:first-of-type,
-.emotion-17 h1:first-of-type + h2,
-.emotion-17 h3:first-of-type,
-.emotion-17 h4:first-of-type,
-.emotion-17 h5:first-of-type,
-.emotion-17 h6:first-of-type {
-  margin-top: 0;
-  padding-top: 0;
-}
-
-.emotion-17 h1:hover a.anchor,
-.emotion-17 h2:hover a.anchor,
-.emotion-17 h3:hover a.anchor,
-.emotion-17 h4:hover a.anchor,
-.emotion-17 h5:hover a.anchor,
-.emotion-17 h6:hover a.anchor {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-17 h1 tt,
-.emotion-17 h1 code {
-  font-size: inherit;
-}
-
-.emotion-17 h2 tt,
-.emotion-17 h2 code {
-  font-size: inherit;
-}
-
-.emotion-17 h3 tt,
-.emotion-17 h3 code {
-  font-size: inherit;
-}
-
-.emotion-17 h4 tt,
-.emotion-17 h4 code {
-  font-size: inherit;
-}
-
-.emotion-17 h5 tt,
-.emotion-17 h5 code {
-  font-size: inherit;
-}
-
-.emotion-17 h6 tt,
-.emotion-17 h6 code {
-  font-size: inherit;
-}
-
-.emotion-17 p,
-.emotion-17 blockquote,
-.emotion-17 ul,
-.emotion-17 ol,
-.emotion-17 dl,
-.emotion-17 li,
-.emotion-17 table,
-.emotion-17 pre {
-  margin: 15px 0;
-}
-
-.emotion-17 hr {
-  border: 0 none;
-  color: rgba(0,0,0,.1);
-  height: 4px;
-  padding: 0;
-}
-
-.emotion-17 body > h2:first-of-type {
-  margin-top: 0;
-  padding-top: 0;
-}
-
-.emotion-17 body > h1:first-of-type {
-  margin-top: 0;
-  padding-top: 0;
-}
-
-.emotion-17 body > h1:first-of-type + h2 {
-  margin-top: 0;
-  padding-top: 0;
-}
-
-.emotion-17 body > h3:first-of-type,
-.emotion-17 body > h4:first-of-type,
-.emotion-17 body > h5:first-of-type,
-.emotion-17 body > h6:first-of-type {
-  margin-top: 0;
-  padding-top: 0;
-}
-
-.emotion-17 a:first-of-type h1,
-.emotion-17 a:first-of-type h2,
-.emotion-17 a:first-of-type h3,
-.emotion-17 a:first-of-type h4,
-.emotion-17 a:first-of-type h5,
-.emotion-17 a:first-of-type h6 {
-  margin-top: 0;
-  padding-top: 0;
-}
-
-.emotion-17 h1 p,
-.emotion-17 h2 p,
-.emotion-17 h3 p,
-.emotion-17 h4 p,
-.emotion-17 h5 p,
-.emotion-17 h6 p {
-  margin-top: 0;
-}
-
-.emotion-17 li p.first {
-  display: inline-block;
-}
-
-.emotion-17 ul,
-.emotion-17 ol {
-  padding-left: 30px;
-}
-
-.emotion-17 ul :first-of-type,
-.emotion-17 ol :first-of-type {
-  margin-top: 0;
-}
-
-.emotion-17 ul :last-child,
-.emotion-17 ol :last-child {
-  margin-bottom: 0;
-}
-
-.emotion-17 dl {
-  padding: 0;
-}
-
-.emotion-17 dl dt {
-  font-size: 14px;
-  font-weight: bold;
-  font-style: italic;
-  padding: 0;
-  margin: 15px 0 5px;
-}
-
-.emotion-17 dl dt:first-of-type {
-  padding: 0;
-}
-
-.emotion-17 dl dt > :first-of-type {
-  margin-top: 0;
-}
-
-.emotion-17 dl dt > :last-child {
-  margin-bottom: 0;
-}
-
-.emotion-17 dl dd {
-  margin: 0 0 15px;
-  padding: 0 15px;
-}
-
-.emotion-17 dl dd > :first-of-type {
-  margin-top: 0;
-}
-
-.emotion-17 dl dd > :last-child {
-  margin-bottom: 0;
-}
-
-.emotion-17 blockquote {
-  border-left: 4px solid #DDDDDD;
-  padding: 0 15px;
-  color: #666666;
-}
-
-.emotion-17 blockquote > :first-of-type {
-  margin-top: 0;
-}
-
-.emotion-17 blockquote > :last-child {
-  margin-bottom: 0;
-}
-
-.emotion-17 table {
-  padding: 0;
-  border-collapse: collapse;
-}
-
-.emotion-17 table tr {
-  border-top: 1px solid rgba(0,0,0,.1);
-  background-color: white;
-  margin: 0;
-  padding: 0;
-}
-
-.emotion-17 table tr:nth-of-type(2n) {
-  background-color: #F8F8F8;
-}
-
-.emotion-17 table tr th {
-  font-weight: bold;
-  border: 1px solid rgba(0,0,0,.1);
-  text-align: left;
-  margin: 0;
-  padding: 6px 13px;
-}
-
-.emotion-17 table tr td {
-  border: 1px solid rgba(0,0,0,.1);
-  text-align: left;
-  margin: 0;
-  padding: 6px 13px;
-}
-
-.emotion-17 table tr th :first-of-type,
-.emotion-17 table tr td :first-of-type {
-  margin-top: 0;
-}
-
-.emotion-17 table tr th :last-child,
-.emotion-17 table tr td :last-child {
-  margin-bottom: 0;
-}
-
-.emotion-17 img {
-  max-width: 100%;
-}
-
-.emotion-17 span.frame {
-  display: block;
-  overflow: hidden;
-}
-
-.emotion-17 span.frame > span {
-  border: 1px solid #DDDDDD;
-  display: block;
-  float: left;
-  overflow: hidden;
-  margin: 13px 0 0;
-  padding: 7px;
-  width: auto;
-}
-
-.emotion-17 span.frame span img {
-  display: block;
-  float: left;
-}
-
-.emotion-17 span.frame span span {
-  clear: both;
-  color: #333333;
-  display: block;
-  padding: 5px 0 0;
-}
-
-.emotion-17 span.align-center {
-  display: block;
-  overflow: hidden;
-  clear: both;
-}
-
-.emotion-17 span.align-center > span {
-  display: block;
-  overflow: hidden;
-  margin: 13px auto 0;
-  text-align: center;
-}
-
-.emotion-17 span.align-center span img {
-  margin: 0 auto;
-  text-align: center;
-}
-
-.emotion-17 span.align-right {
-  display: block;
-  overflow: hidden;
-  clear: both;
-}
-
-.emotion-17 span.align-right > span {
-  display: block;
-  overflow: hidden;
-  margin: 13px 0 0;
-  text-align: right;
-}
-
-.emotion-17 span.align-right span img {
-  margin: 0;
-  text-align: right;
-}
-
-.emotion-17 span.float-left {
-  display: block;
-  margin-right: 13px;
-  overflow: hidden;
-  float: left;
-}
-
-.emotion-17 span.float-left span {
-  margin: 13px 0 0;
-}
-
-.emotion-17 span.float-right {
-  display: block;
-  margin-left: 13px;
-  overflow: hidden;
-  float: right;
-}
-
-.emotion-17 span.float-right > span {
-  display: block;
-  overflow: hidden;
-  margin: 13px auto 0;
-  text-align: right;
-}
-
-.emotion-17 code,
-.emotion-17 tt {
-  margin: 0 2px;
-  padding: 0 5px;
-  white-space: nowrap;
-  border: 1px solid #EEEEEE;
-  background-color: #F8F8F8;
-  border-radius: 3px;
-}
-
-<div
-  style="position:relative;height:calc(100vh);width:calc(100vw)"
->
-  <div
-    class="emotion-28"
-  >
-    <div
-      class="emotion-8"
-      data-simplebar="true"
-    >
-      <div
-        class="simplebar-wrapper"
-      >
-        <div
-          class="simplebar-height-auto-observer-wrapper"
-        >
-          <div
-            class="simplebar-height-auto-observer"
-          />
-        </div>
-        <div
-          class="simplebar-mask"
-        >
-          <div
-            class="simplebar-offset"
-          >
-            <div
-              class="simplebar-content-wrapper"
-            >
-              <div
-                class="simplebar-content"
-              >
-                <div
-                  class="emotion-7"
-                >
-                  <div
-                    class="emotion-2"
-                  >
-                    <div
-                      class="emotion-1"
-                      role="tablist"
-                    >
-                      <button
-                        class="emotion-0"
-                        role="tab"
-                        type="button"
-                      >
-                        About
-                      </button>
-                    </div>
-                  </div>
-                  <div
-                    class="emotion-6"
-                  >
-                    <button
-                      class="emotion-5"
-                    >
-                      <svg
-                        class="emotion-4"
-                        viewBox="0 0 1024 1024"
-                      >
-                        <path
-                          class="emotion-3"
-                          d="M693.022 637.866c15.62 15.622 15.618 40.95 0 56.566-15.622 15.622-40.946 15.624-56.562 0.002l-124.46-124.458-124.456 124.458c-15.622 15.622-40.944 15.622-56.562 0-15.624-15.622-15.624-40.946-0.002-56.568l124.454-124.456-124.452-124.45c-15.622-15.622-15.622-40.946 0-56.564 15.62-15.624 40.944-15.624 56.568-0.002l124.45 124.45 124.454-124.452c15.622-15.62 40.95-15.62 56.566 0 15.622 15.62 15.624 40.944 0.002 56.56l-124.456 124.458 124.456 124.456zM828.784 828.784c-174.956 174.956-458.614 174.956-633.566 0-174.958-174.956-174.958-458.614 0-633.566 174.954-174.958 458.612-174.958 633.566 0 174.954 174.952 174.954 458.612 0 633.566zM880 511.998c-0.002-98.296-38.28-190.708-107.786-260.212s-161.92-107.786-260.214-107.788c-98.296 0.002-190.71 38.282-260.216 107.786-69.506 69.508-107.782 161.918-107.786 260.214 0.002 98.296 38.282 190.71 107.786 260.216 69.508 69.506 161.918 107.784 260.216 107.784 98.296 0 190.708-38.278 260.214-107.784s107.784-161.92 107.786-260.216z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="simplebar-placeholder"
-        />
-      </div>
-      <div
-        class="simplebar-track simplebar-horizontal"
-      >
-        <div
-          class="simplebar-scrollbar"
-        />
-      </div>
-      <div
-        class="simplebar-track simplebar-vertical"
-      >
-        <div
-          class="simplebar-scrollbar"
-        />
-      </div>
-    </div>
-    <div
-      class="emotion-27"
-    >
-      <div
-        class="emotion-26"
-        role="tabpanel"
-      >
-        <div
-          class="emotion-25"
-        >
-          <header
-            class="emotion-9"
-          >
-            <svg
-              viewBox="0 0 64 64"
-            >
-              <title>
-                Storybook icon
-              </title>
-              <g
-                fill="none"
-                fill-rule="evenodd"
-                id="Artboard"
-                stroke="none"
-                stroke-width="1"
-              >
-                <path
-                  d="M8.04798541,58.7875918 L6.07908839,6.32540407 C6.01406344,4.5927838 7.34257463,3.12440831 9.07303814,3.01625434 L53.6958037,0.227331489 C55.457209,0.117243658 56.974354,1.45590096 57.0844418,3.21730626 C57.0885895,3.28366922 57.0906648,3.35014546 57.0906648,3.41663791 L57.0906648,60.5834697 C57.0906648,62.3483119 55.6599776,63.7789992 53.8951354,63.7789992 C53.847325,63.7789992 53.7995207,63.7779262 53.7517585,63.775781 L11.0978899,61.8600599 C9.43669044,61.7854501 8.11034889,60.4492961 8.04798541,58.7875918 Z"
-                  fill="#FF4785"
-                  fill-rule="nonzero"
-                  id="path-1"
-                />
-                <path
-                  d="M35.9095005,24.1768792 C35.9095005,25.420127 44.2838488,24.8242707 45.4080313,23.9509748 C45.4080313,15.4847538 40.8652557,11.0358878 32.5466666,11.0358878 C24.2280775,11.0358878 19.5673077,15.553972 19.5673077,22.3311017 C19.5673077,34.1346028 35.4965208,34.3605071 35.4965208,40.7987804 C35.4965208,42.606015 34.6115646,43.6790606 32.6646607,43.6790606 C30.127786,43.6790606 29.1248356,42.3834613 29.2428298,37.9783269 C29.2428298,37.0226907 19.5673077,36.7247626 19.2723223,37.9783269 C18.5211693,48.6535354 25.1720308,51.7326752 32.7826549,51.7326752 C40.1572906,51.7326752 45.939005,47.8018145 45.939005,40.6858282 C45.939005,28.035186 29.7738035,28.3740425 29.7738035,22.1051974 C29.7738035,19.5637737 31.6617103,19.2249173 32.7826549,19.2249173 C33.9625966,19.2249173 36.0864917,19.4328883 35.9095005,24.1768792 Z"
-                  fill="#FFFFFF"
-                  fill-rule="nonzero"
-                  id="path9_fill-path"
-                />
-                <path
-                  d="M44.0461638,0.830433986 L50.1874092,0.446606143 L50.443532,7.7810017 C50.4527198,8.04410717 50.2468789,8.26484453 49.9837734,8.27403237 C49.871115,8.27796649 49.7607078,8.24184808 49.6721567,8.17209069 L47.3089847,6.3104681 L44.5110468,8.43287463 C44.3012992,8.591981 44.0022839,8.55092814 43.8431776,8.34118051 C43.7762017,8.25288717 43.742082,8.14401677 43.7466857,8.03329059 L44.0461638,0.830433986 Z"
-                  fill="#FFFFFF"
-                  id="Path"
-                />
-              </g>
-            </svg>
-            Storybook 5.0.3
-          </header>
-          <div
-            class="emotion-10"
-          >
-            Looking good! You're up to date.
-          </div>
-          <div
-            class="emotion-16"
-          >
-            <span
-              class="emotion-11"
-            >
-              5.0.0 Changelog
-            </span>
-            <a
-              class="emotion-15"
-              href="https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md"
-              target="_blank"
-            >
-              <span
-                class="emotion-14"
-              >
-                Read full changelog
-                <svg
-                  class="emotion-4"
-                  viewBox="0 0 1024 1024"
-                >
-                  <path
-                    class="emotion-3"
-                    d="M768.072 514.022c0 10.236-3.904 20.47-11.712 28.282l-344.098 344.156c-15.62 15.624-40.946 15.624-56.568 0.006-15.622-15.622-15.624-40.948-0.006-56.568l315.82-315.876-315.868-315.922c-15.618-15.624-15.618-40.952 0.004-56.568 15.624-15.62 40.95-15.618 56.57 0.006l344.144 344.204c7.81 7.81 11.714 18.044 11.714 28.28z"
-                  />
-                </svg>
-              </span>
-            </a>
-          </div>
-          <div
-            class="emotion-17"
-          >
-            <ul>
-              <li>
-                upgrade webpack & babel to latest
-              </li>
-              <li>
-                new addParameters and third argument to .add to pass data to addons
-              </li>
-              <li>
-                added the ability to theme storybook
-              </li>
-              <li>
-                improved ui for mobile devices
-              </li>
-              <li>
-                improved performance of addon-knobs
-              </li>
-            </ul>
-          </div>
-          <div
-            class="emotion-24"
-          >
-            <a
-              class="emotion-19"
-              href="https://storybook.js.org"
-              target="_blank"
-            >
-              <span
-                class="emotion-18"
-              >
-                Docs
-              </span>
-            </a>
-            <a
-              class="emotion-19"
-              href="https://github.com/storybookjs/storybook"
-              target="_blank"
-            >
-              <span
-                class="emotion-18"
-              >
-                GitHub
-              </span>
-            </a>
-            <a
-              class="emotion-19"
-              href="https://storybook.js.org/support"
-              target="_blank"
-            >
-              <span
-                class="emotion-18"
-              >
-                Support
-              </span>
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storyshots UI|Settings/AboutScreen up to date 1`] = `
-.emotion-28 {
-  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-8 {
-  overflow-y: hidden;
-  overflow-x: auto;
-  width: 100%;
-  color: #999999;
-  width: 100%;
-  height: 40px;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  box-shadow: rgba(0,0,0,.1) 0 -1px 0 0 inset;
-  background: #FFFFFF;
-}
-
-.emotion-7 {
-  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;
-  position: relative;
-  -webkit-flex-wrap: nowrap;
-  -ms-flex-wrap: nowrap;
-  flex-wrap: nowrap;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  height: 40px;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  white-space: nowrap;
-  -webkit-flex-basis: auto;
-  -ms-flex-preferred-size: auto;
-  flex-basis: auto;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-}
-
-.emotion-2 > * {
-  margin-left: 15px;
-}
-
-.emotion-1 {
-  overflow: hidden;
-}
-
-.emotion-1:first-of-type {
-  margin-left: 0;
-}
-
-.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;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  padding: 0 15px;
-  text-transform: capitalize;
-  -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;
-  cursor: pointer;
-  background: transparent;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  font-weight: bold;
-  font-size: 13px;
-  color: #1EA7FD;
-  border-bottom-color: #1EA7FD;
-}
-
-.emotion-0:empty {
-  display: none;
-}
-
-.emotion-0:focus {
-  outline: 0 none;
-  border-bottom-color: #1EA7FD;
-}
-
-.emotion-6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  white-space: nowrap;
-  -webkit-flex-basis: auto;
-  -ms-flex-preferred-size: auto;
-  flex-basis: auto;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  margin-left: 30px;
-}
-
-.emotion-6 > * {
-  margin-right: 15px;
-}
-
-.emotion-4 {
-  shape-rendering: inherit;
-  -webkit-transform: translate3d(0,0,0);
-  -ms-transform: translate3d(0,0,0);
-  transform: translate3d(0,0,0);
-  display: block;
-}
-
-.emotion-3 {
-  fill: currentColor;
-}
-
-.emotion-27 {
-  display: block;
-  position: relative;
-  font-size: 13px;
-  height: calc(100% - 40px);
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 40px;
-  overflow: auto;
-}
-
-.emotion-27 > *:first-child {
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  height: 100%;
-  overflow: auto;
-}
-
-.emotion-5 {
-  height: 40px;
-  background: none;
-  color: inherit;
-  padding: 0;
-  cursor: pointer;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
-  transition: color 0.2s linear,border-bottom-color 0.2s linear;
-}
-
-.emotion-5:hover,
-.emotion-5:focus {
-  outline: 0 none;
-  color: #1EA7FD;
-}
-
-.emotion-5 > svg {
-  width: 15px;
-}
-
-.emotion-24 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding-top: 20px;
-  margin-top: 20px;
-  border-top: 1px solid rgba(0,0,0,.1);
-  font-weight: 700;
-}
-
-.emotion-24 > * + * {
-  margin-left: 20px;
-}
-
-.emotion-19 {
-  display: inline-block;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  color: #1EA7FD;
-  color: #999999;
-}
-
-.emotion-19 svg path {
-  fill: #1EA7FD;
-}
-
-.emotion-19:hover,
-.emotion-19:focus {
-  cursor: pointer;
-  color: #0297f5;
-}
-
-.emotion-19:hover svg path,
-.emotion-19:focus svg path {
-  fill: #0297f5;
-}
-
-.emotion-19:active {
-  color: #028ee6;
-}
-
-.emotion-19:active svg path {
-  fill: #028ee6;
-}
-
-.emotion-19 svg {
-  display: inline-block;
-  height: 1em;
-  width: 1em;
-  vertical-align: text-top;
-  position: relative;
-  bottom: -0.125em;
-  margin-right: 0.4em;
-}
-
-.emotion-19 svg path {
-  fill: #999999;
-}
-
-.emotion-19:hover {
-  color: #666666;
-}
-
-.emotion-19:hover svg path {
-  fill: #666666;
-}
-
-.emotion-19:active {
-  color: #444444;
-}
-
-.emotion-19:active svg path {
-  fill: #444444;
-}
-
-.emotion-26 {
-  display: block;
-}
-
-.emotion-25 {
-  padding: 3rem 20px;
-  max-width: 600px;
-  margin: 0 auto;
-}
-
-.emotion-9 {
-  margin-bottom: 20px;
-  font-size: 28px;
-  font-weight: 900;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.emotion-9 > svg {
-  height: 32px;
-  width: auto;
-  margin-right: 8px;
-}
-
-.emotion-10 {
-  background: #EAF3FC;
-  color: #333333;
-  font-weight: 700;
-  font-size: 14px;
-  padding: 10px 20px;
-  margin-bottom: 24px;
-  border-radius: 4px;
-  border: 1px solid rgba(0,0,0,.1);
-  text-align: center;
-}
-
-.emotion-16 {
-  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;
-  margin-bottom: .75rem;
-}
-
-.emotion-11 {
-  -webkit-letter-spacing: 0.35em;
-  -moz-letter-spacing: 0.35em;
-  -ms-letter-spacing: 0.35em;
-  letter-spacing: 0.35em;
-  text-transform: uppercase;
-  font-weight: 900;
-  font-size: 13px;
-  line-height: 24px;
-  color: #999999;
-}
-
-.emotion-15 {
-  display: inline-block;
-  -webkit-transition: all 150ms ease-out;
-  transition: all 150ms ease-out;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  color: #1EA7FD;
-  color: #999999;
-  font-size: 12px;
-}
-
-.emotion-15 svg path {
-  fill: #1EA7FD;
-}
-
-.emotion-15:hover,
-.emotion-15:focus {
-  cursor: pointer;
-  color: #0297f5;
-}
-
-.emotion-15:hover svg path,
-.emotion-15:focus svg path {
-  fill: #0297f5;
-}
-
-.emotion-15:active {
-  color: #028ee6;
-}
-
-.emotion-15:active svg path {
-  fill: #028ee6;
-}
-
-.emotion-15 svg {
-  display: inline-block;
-  height: 1em;
-  width: 1em;
-  vertical-align: text-top;
-  position: relative;
-  bottom: -0.125em;
-  margin-right: 0.4em;
-}
-
-.emotion-15 svg path {
-  fill: #999999;
-}
-
-.emotion-15:hover {
-  color: #666666;
-}
-
-.emotion-15:hover svg path {
-  fill: #666666;
-}
-
-.emotion-15:active {
-  color: #444444;
-}
-
-.emotion-15:active svg path {
-  fill: #444444;
-}
-
-.emotion-14 > svg:last-of-type {
-  height: 0.7em;
-  width: 0.7em;
-  margin-right: 0;
-  margin-left: 0.25em;
-  bottom: auto;
-  vertical-align: inherit;
-}
-
-.emotion-17 {
-  font-size: 14px;
-  line-height: 1.6;
-}
-
-.emotion-17 h1 {
-  font-size: 32px;
-  font-weight: 900;
-}
-
-.emotion-17 h2 {
-  font-size: 24px;
-  border-bottom: 1px solid rgba(0,0,0,.1);
-}
-
-.emotion-17 h3 {
-  font-size: 20px;
-}
-
-.emotion-17 h4 {
-  font-size: 16px;
-}
-
-.emotion-17 h5 {
-  font-size: 14px;
-}
-
-.emotion-17 h6 {
-  font-size: 14px;
-  color: #666666;
-}
-
-.emotion-17 pre:not(.hljs) {
-  background: transparent;
-  border: none;
-  border-radius: 0;
-  padding: 0;
-  margin: 0;
-}
-
-.emotion-17 pre pre,
-.emotion-17 pre.hljs {
-  padding: 15px;
-  margin: 0;
-  white-space: pre-wrap;
-  color: inherit;
-  font-size: 13px;
-  line-height: 19px;
-}
-
-.emotion-17 pre pre code,
-.emotion-17 pre.hljs code {
-  color: inherit;
-  font-size: inherit;
-}
-
-.emotion-17 pre code {
-  margin: 0;
-  padding: 0;
-  white-space: pre;
-  border: none;
-  background: transparent;
-}
-
-.emotion-17 pre code,
-.emotion-17 pre tt {
-  background-color: transparent;
-  border: none;
-}
-
-.emotion-17 body > *:first-of-type {
-  margin-top: 0 !important;
-}
-
-.emotion-17 body > *:last-child {
-  margin-bottom: 0 !important;
-}
-
-.emotion-17 a {
-  color: #1EA7FD;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-17 a.absent {
-  color: #cc0000;
-}
-
-.emotion-17 a.anchor {
-  display: block;
-  padding-left: 30px;
-  margin-left: -30px;
-  cursor: pointer;
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-}
-
-.emotion-17 h1,
-.emotion-17 h2,
-.emotion-17 h3,
-.emotion-17 h4,
-.emotion-17 h5,
-.emotion-17 h6 {
-  margin: 20px 0 10px;
-  padding: 0;
-  cursor: text;
-  position: relative;
-}
-
-.emotion-17 h2:first-of-type,
-.emotion-17 h1:first-of-type,
-.emotion-17 h1:first-of-type + h2,
-.emotion-17 h3:first-of-type,
-.emotion-17 h4:first-of-type,
-.emotion-17 h5:first-of-type,
-.emotion-17 h6:first-of-type {
-  margin-top: 0;
-  padding-top: 0;
-}
-
-.emotion-17 h1:hover a.anchor,
-.emotion-17 h2:hover a.anchor,
-.emotion-17 h3:hover a.anchor,
-.emotion-17 h4:hover a.anchor,
-.emotion-17 h5:hover a.anchor,
-.emotion-17 h6:hover a.anchor {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.emotion-17 h1 tt,
-.emotion-17 h1 code {
-  font-size: inherit;
-}
-
-.emotion-17 h2 tt,
-.emotion-17 h2 code {
-  font-size: inherit;
-}
-
-.emotion-17 h3 tt,
-.emotion-17 h3 code {
-  font-size: inherit;
-}
-
-.emotion-17 h4 tt,
-.emotion-17 h4 code {
-  font-size: inherit;
-}
-
-.emotion-17 h5 tt,
-.emotion-17 h5 code {
-  font-size: inherit;
-}
-
-.emotion-17 h6 tt,
-.emotion-17 h6 code {
-  font-size: inherit;
-}
-
-.emotion-17 p,
-.emotion-17 blockquote,
-.emotion-17 ul,
-.emotion-17 ol,
-.emotion-17 dl,
-.emotion-17 li,
-.emotion-17 table,
-.emotion-17 pre {
-  margin: 15px 0;
-}
-
-.emotion-17 hr {
-  border: 0 none;
-  color: rgba(0,0,0,.1);
-  height: 4px;
-  padding: 0;
-}
-
-.emotion-17 body > h2:first-of-type {
-  margin-top: 0;
-  padding-top: 0;
-}
-
-.emotion-17 body > h1:first-of-type {
-  margin-top: 0;
-  padding-top: 0;
-}
-
-.emotion-17 body > h1:first-of-type + h2 {
-  margin-top: 0;
-  padding-top: 0;
-}
-
-.emotion-17 body > h3:first-of-type,
-.emotion-17 body > h4:first-of-type,
-.emotion-17 body > h5:first-of-type,
-.emotion-17 body > h6:first-of-type {
-  margin-top: 0;
-  padding-top: 0;
-}
-
-.emotion-17 a:first-of-type h1,
-.emotion-17 a:first-of-type h2,
-.emotion-17 a:first-of-type h3,
-.emotion-17 a:first-of-type h4,
-.emotion-17 a:first-of-type h5,
-.emotion-17 a:first-of-type h6 {
-  margin-top: 0;
-  padding-top: 0;
-}
-
-.emotion-17 h1 p,
-.emotion-17 h2 p,
-.emotion-17 h3 p,
-.emotion-17 h4 p,
-.emotion-17 h5 p,
-.emotion-17 h6 p {
-  margin-top: 0;
-}
-
-.emotion-17 li p.first {
-  display: inline-block;
-}
-
-.emotion-17 ul,
-.emotion-17 ol {
-  padding-left: 30px;
-}
-
-.emotion-17 ul :first-of-type,
-.emotion-17 ol :first-of-type {
-  margin-top: 0;
-}
-
-.emotion-17 ul :last-child,
-.emotion-17 ol :last-child {
-  margin-bottom: 0;
-}
-
-.emotion-17 dl {
-  padding: 0;
-}
-
-.emotion-17 dl dt {
-  font-size: 14px;
-  font-weight: bold;
-  font-style: italic;
-  padding: 0;
-  margin: 15px 0 5px;
-}
-
-.emotion-17 dl dt:first-of-type {
-  padding: 0;
-}
-
-.emotion-17 dl dt > :first-of-type {
-  margin-top: 0;
-}
-
-.emotion-17 dl dt > :last-child {
-  margin-bottom: 0;
-}
-
-.emotion-17 dl dd {
-  margin: 0 0 15px;
-  padding: 0 15px;
-}
-
-.emotion-17 dl dd > :first-of-type {
-  margin-top: 0;
-}
-
-.emotion-17 dl dd > :last-child {
-  margin-bottom: 0;
-}
-
-.emotion-17 blockquote {
-  border-left: 4px solid #DDDDDD;
-  padding: 0 15px;
-  color: #666666;
-}
-
-.emotion-17 blockquote > :first-of-type {
-  margin-top: 0;
-}
-
-.emotion-17 blockquote > :last-child {
-  margin-bottom: 0;
-}
-
-.emotion-17 table {
-  padding: 0;
-  border-collapse: collapse;
-}
-
-.emotion-17 table tr {
-  border-top: 1px solid rgba(0,0,0,.1);
-  background-color: white;
-  margin: 0;
-  padding: 0;
-}
-
-.emotion-17 table tr:nth-of-type(2n) {
-  background-color: #F8F8F8;
-}
-
-.emotion-17 table tr th {
-  font-weight: bold;
-  border: 1px solid rgba(0,0,0,.1);
-  text-align: left;
-  margin: 0;
-  padding: 6px 13px;
-}
-
-.emotion-17 table tr td {
-  border: 1px solid rgba(0,0,0,.1);
-  text-align: left;
-  margin: 0;
-  padding: 6px 13px;
-}
-
-.emotion-17 table tr th :first-of-type,
-.emotion-17 table tr td :first-of-type {
-  margin-top: 0;
-}
-
-.emotion-17 table tr th :last-child,
-.emotion-17 table tr td :last-child {
-  margin-bottom: 0;
-}
-
-.emotion-17 img {
-  max-width: 100%;
-}
-
-.emotion-17 span.frame {
-  display: block;
-  overflow: hidden;
-}
-
-.emotion-17 span.frame > span {
-  border: 1px solid #DDDDDD;
-  display: block;
-  float: left;
-  overflow: hidden;
-  margin: 13px 0 0;
-  padding: 7px;
-  width: auto;
-}
-
-.emotion-17 span.frame span img {
-  display: block;
-  float: left;
-}
-
-.emotion-17 span.frame span span {
-  clear: both;
-  color: #333333;
-  display: block;
-  padding: 5px 0 0;
-}
-
-.emotion-17 span.align-center {
-  display: block;
-  overflow: hidden;
-  clear: both;
-}
-
-.emotion-17 span.align-center > span {
-  display: block;
-  overflow: hidden;
-  margin: 13px auto 0;
-  text-align: center;
-}
-
-.emotion-17 span.align-center span img {
-  margin: 0 auto;
-  text-align: center;
-}
-
-.emotion-17 span.align-right {
-  display: block;
-  overflow: hidden;
-  clear: both;
-}
-
-.emotion-17 span.align-right > span {
-  display: block;
-  overflow: hidden;
-  margin: 13px 0 0;
-  text-align: right;
-}
-
-.emotion-17 span.align-right span img {
-  margin: 0;
-  text-align: right;
-}
-
-.emotion-17 span.float-left {
-  display: block;
-  margin-right: 13px;
-  overflow: hidden;
-  float: left;
-}
-
-.emotion-17 span.float-left span {
-  margin: 13px 0 0;
-}
-
-.emotion-17 span.float-right {
-  display: block;
-  margin-left: 13px;
-  overflow: hidden;
-  float: right;
-}
-
-.emotion-17 span.float-right > span {
-  display: block;
-  overflow: hidden;
-  margin: 13px auto 0;
-  text-align: right;
-}
-
-.emotion-17 code,
-.emotion-17 tt {
-  margin: 0 2px;
-  padding: 0 5px;
-  white-space: nowrap;
-  border: 1px solid #EEEEEE;
-  background-color: #F8F8F8;
-  border-radius: 3px;
-}
-
-<div
-  style="position:relative;height:calc(100vh);width:calc(100vw)"
->
-  <div
-    class="emotion-28"
-  >
-    <div
-      class="emotion-8"
-      data-simplebar="true"
-    >
-      <div
-        class="simplebar-wrapper"
-      >
-        <div
-          class="simplebar-height-auto-observer-wrapper"
-        >
-          <div
-            class="simplebar-height-auto-observer"
-          />
-        </div>
-        <div
-          class="simplebar-mask"
-        >
-          <div
-            class="simplebar-offset"
-          >
-            <div
-              class="simplebar-content-wrapper"
-            >
-              <div
-                class="simplebar-content"
-              >
-                <div
-                  class="emotion-7"
-                >
-                  <div
-                    class="emotion-2"
-                  >
-                    <div
-                      class="emotion-1"
-                      role="tablist"
-                    >
-                      <button
-                        class="emotion-0"
-                        role="tab"
-                        type="button"
-                      >
-                        About
-                      </button>
-                    </div>
-                  </div>
-                  <div
-                    class="emotion-6"
-                  >
-                    <button
-                      class="emotion-5"
-                    >
-                      <svg
-                        class="emotion-4"
-                        viewBox="0 0 1024 1024"
-                      >
-                        <path
-                          class="emotion-3"
-                          d="M693.022 637.866c15.62 15.622 15.618 40.95 0 56.566-15.622 15.622-40.946 15.624-56.562 0.002l-124.46-124.458-124.456 124.458c-15.622 15.622-40.944 15.622-56.562 0-15.624-15.622-15.624-40.946-0.002-56.568l124.454-124.456-124.452-124.45c-15.622-15.622-15.622-40.946 0-56.564 15.62-15.624 40.944-15.624 56.568-0.002l124.45 124.45 124.454-124.452c15.622-15.62 40.95-15.62 56.566 0 15.622 15.62 15.624 40.944 0.002 56.56l-124.456 124.458 124.456 124.456zM828.784 828.784c-174.956 174.956-458.614 174.956-633.566 0-174.958-174.956-174.958-458.614 0-633.566 174.954-174.958 458.612-174.958 633.566 0 174.954 174.952 174.954 458.612 0 633.566zM880 511.998c-0.002-98.296-38.28-190.708-107.786-260.212s-161.92-107.786-260.214-107.788c-98.296 0.002-190.71 38.282-260.216 107.786-69.506 69.508-107.782 161.918-107.786 260.214 0.002 98.296 38.282 190.71 107.786 260.216 69.508 69.506 161.918 107.784 260.216 107.784 98.296 0 190.708-38.278 260.214-107.784s107.784-161.92 107.786-260.216z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="simplebar-placeholder"
-        />
-      </div>
-      <div
-        class="simplebar-track simplebar-horizontal"
-      >
-        <div
-          class="simplebar-scrollbar"
-        />
-      </div>
-      <div
-        class="simplebar-track simplebar-vertical"
-      >
-        <div
-          class="simplebar-scrollbar"
-        />
-      </div>
-    </div>
-    <div
-      class="emotion-27"
-    >
-      <div
-        class="emotion-26"
-        role="tabpanel"
-      >
-        <div
-          class="emotion-25"
-        >
-          <header
-            class="emotion-9"
-          >
-            <svg
-              viewBox="0 0 64 64"
-            >
-              <title>
-                Storybook icon
-              </title>
-              <g
-                fill="none"
-                fill-rule="evenodd"
-                id="Artboard"
-                stroke="none"
-                stroke-width="1"
-              >
-                <path
-                  d="M8.04798541,58.7875918 L6.07908839,6.32540407 C6.01406344,4.5927838 7.34257463,3.12440831 9.07303814,3.01625434 L53.6958037,0.227331489 C55.457209,0.117243658 56.974354,1.45590096 57.0844418,3.21730626 C57.0885895,3.28366922 57.0906648,3.35014546 57.0906648,3.41663791 L57.0906648,60.5834697 C57.0906648,62.3483119 55.6599776,63.7789992 53.8951354,63.7789992 C53.847325,63.7789992 53.7995207,63.7779262 53.7517585,63.775781 L11.0978899,61.8600599 C9.43669044,61.7854501 8.11034889,60.4492961 8.04798541,58.7875918 Z"
-                  fill="#FF4785"
-                  fill-rule="nonzero"
-                  id="path-1"
-                />
-                <path
-                  d="M35.9095005,24.1768792 C35.9095005,25.420127 44.2838488,24.8242707 45.4080313,23.9509748 C45.4080313,15.4847538 40.8652557,11.0358878 32.5466666,11.0358878 C24.2280775,11.0358878 19.5673077,15.553972 19.5673077,22.3311017 C19.5673077,34.1346028 35.4965208,34.3605071 35.4965208,40.7987804 C35.4965208,42.606015 34.6115646,43.6790606 32.6646607,43.6790606 C30.127786,43.6790606 29.1248356,42.3834613 29.2428298,37.9783269 C29.2428298,37.0226907 19.5673077,36.7247626 19.2723223,37.9783269 C18.5211693,48.6535354 25.1720308,51.7326752 32.7826549,51.7326752 C40.1572906,51.7326752 45.939005,47.8018145 45.939005,40.6858282 C45.939005,28.035186 29.7738035,28.3740425 29.7738035,22.1051974 C29.7738035,19.5637737 31.6617103,19.2249173 32.7826549,19.2249173 C33.9625966,19.2249173 36.0864917,19.4328883 35.9095005,24.1768792 Z"
-                  fill="#FFFFFF"
-                  fill-rule="nonzero"
-                  id="path9_fill-path"
-                />
-                <path
-                  d="M44.0461638,0.830433986 L50.1874092,0.446606143 L50.443532,7.7810017 C50.4527198,8.04410717 50.2468789,8.26484453 49.9837734,8.27403237 C49.871115,8.27796649 49.7607078,8.24184808 49.6721567,8.17209069 L47.3089847,6.3104681 L44.5110468,8.43287463 C44.3012992,8.591981 44.0022839,8.55092814 43.8431776,8.34118051 C43.7762017,8.25288717 43.742082,8.14401677 43.7466857,8.03329059 L44.0461638,0.830433986 Z"
-                  fill="#FFFFFF"
-                  id="Path"
-                />
-              </g>
-            </svg>
-            Storybook 5.0.0
-          </header>
-          <div
-            class="emotion-10"
-          >
-            Looking good! You're up to date.
-          </div>
-          <div
-            class="emotion-16"
-          >
-            <span
-              class="emotion-11"
-            >
-              5.0.0 Changelog
-            </span>
-            <a
-              class="emotion-15"
-              href="https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md"
-              target="_blank"
-            >
-              <span
-                class="emotion-14"
-              >
-                Read full changelog
-                <svg
-                  class="emotion-4"
-                  viewBox="0 0 1024 1024"
-                >
-                  <path
-                    class="emotion-3"
-                    d="M768.072 514.022c0 10.236-3.904 20.47-11.712 28.282l-344.098 344.156c-15.62 15.624-40.946 15.624-56.568 0.006-15.622-15.622-15.624-40.948-0.006-56.568l315.82-315.876-315.868-315.922c-15.618-15.624-15.618-40.952 0.004-56.568 15.624-15.62 40.95-15.618 56.57 0.006l344.144 344.204c7.81 7.81 11.714 18.044 11.714 28.28z"
-                  />
-                </svg>
-              </span>
-            </a>
-          </div>
-          <div
-            class="emotion-17"
-          >
-            <ul>
-              <li>
-                upgrade webpack & babel to latest
-              </li>
-              <li>
-                new addParameters and third argument to .add to pass data to addons
-              </li>
-              <li>
-                added the ability to theme storybook
-              </li>
-              <li>
-                improved ui for mobile devices
-              </li>
-              <li>
-                improved performance of addon-knobs
-              </li>
-            </ul>
-          </div>
-          <div
-            class="emotion-24"
-          >
-            <a
-              class="emotion-19"
-              href="https://storybook.js.org"
-              target="_blank"
-            >
-              <span
-                class="emotion-18"
-              >
-                Docs
-              </span>
-            </a>
-            <a
-              class="emotion-19"
-              href="https://github.com/storybookjs/storybook"
-              target="_blank"
-            >
-              <span
-                class="emotion-18"
-              >
-                GitHub
-              </span>
-            </a>
-            <a
-              class="emotion-19"
-              href="https://storybook.js.org/support"
-              target="_blank"
-            >
-              <span
-                class="emotion-18"
-              >
-                Support
-              </span>
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/lib/ui/src/settings/shortcuts.stories.js b/lib/ui/src/settings/shortcuts.stories.js
index ab9cdf5427ac..1e3e63094d7f 100644
--- a/lib/ui/src/settings/shortcuts.stories.js
+++ b/lib/ui/src/settings/shortcuts.stories.js
@@ -48,4 +48,4 @@ export default {
 };
 
 export const defaults = () => <ShortcutsScreen shortcutKeys={defaultShortcuts} {...actions} />;
-defaults.title = 'default shortcuts';
+defaults.story = { name: 'default shortcuts' };
diff --git a/package.json b/package.json
index 2b3b943f4c7f..f48eb5bb71fd 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/root",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.35",
   "private": true,
   "description": "Storybook is an open source tool for developing UI components in isolation for React, Vue and Angular. It makes building stunning UIs organized and efficient.",
   "keywords": [
diff --git a/yarn.lock b/yarn.lock
index 27465eae633f..326e5632faba 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -195,7 +195,7 @@
   optionalDependencies:
     chokidar "^2.0.4"
 
-"@babel/code-frame@7.0.0", "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.0.0-beta.44":
+"@babel/code-frame@7.0.0", "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.0.0 <7.4.0", "@babel/code-frame@^7.0.0-beta.44":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0.tgz#06e2ab19bdb535385559aabb5ba59729482800f8"
   integrity sha512-OfC2uemaknXr87bdLUkWog7nYuliM9Ij5HUcajsVcMCpQrcLmtxRbVFTIqmcSkSeYRBFBRxs2FiUqFJDLdiebA==
@@ -229,6 +229,26 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
+"@babel/core@7.2.2":
+  version "7.2.2"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.2.2.tgz#07adba6dde27bb5ad8d8672f15fde3e08184a687"
+  integrity sha512-59vB0RWt09cAct5EIe58+NzGP4TFSD3Bz//2/ELy3ZeTeKF6VTD1AXlH8BGGbCX0PuobZBsIzO7IAI9PH67eKw==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@babel/generator" "^7.2.2"
+    "@babel/helpers" "^7.2.0"
+    "@babel/parser" "^7.2.2"
+    "@babel/template" "^7.2.2"
+    "@babel/traverse" "^7.2.2"
+    "@babel/types" "^7.2.2"
+    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/core@7.4.3":
   version "7.4.3"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.4.3.tgz#198d6d3af4567be3989550d97e068de94503074f"
@@ -269,6 +289,26 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
+"@babel/core@^7.0.0 <7.4.0":
+  version "7.3.4"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.3.4.tgz#921a5a13746c21e32445bf0798680e9d11a6530b"
+  integrity sha512-jRsuseXBo9pN197KnDwhhaaBzyZr2oIcLHHTt2oDdQrej5Qp57dCCJafWx5ivU8/alEYDpssYqv1MUqcxwQlrA==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@babel/generator" "^7.3.4"
+    "@babel/helpers" "^7.2.0"
+    "@babel/parser" "^7.3.4"
+    "@babel/template" "^7.2.2"
+    "@babel/traverse" "^7.3.4"
+    "@babel/types" "^7.3.4"
+    convert-source-map "^1.1.0"
+    debug "^4.1.0"
+    json5 "^2.1.0"
+    lodash "^4.17.11"
+    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.npmjs.org/@babel/generator/-/generator-7.0.0-beta.44.tgz#c7e67b9b5284afcf69b309b50d7d37f3e5033d42"
@@ -280,7 +320,7 @@
     source-map "^0.5.0"
     trim-right "^1.0.1"
 
-"@babel/generator@^7.0.0", "@babel/generator@^7.4.0", "@babel/generator@^7.4.4":
+"@babel/generator@^7.0.0", "@babel/generator@^7.3.4", "@babel/generator@^7.4.0", "@babel/generator@^7.4.4":
   version "7.4.4"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.4.4.tgz#174a215eb843fc392c7edcaabeaa873de6e8f041"
   integrity sha512-53UOLK6TVNqKxf7RUh8NE851EHRxOOeVXKbK2bivdb+iziMyk03Sr4eaE9OELCbyZAAafAKPDwF2TPUES5QbxQ==
@@ -291,6 +331,17 @@
     source-map "^0.5.0"
     trim-right "^1.0.1"
 
+"@babel/generator@^7.0.0 <7.4.0", "@babel/generator@^7.2.2":
+  version "7.3.4"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.3.4.tgz#9aa48c1989257877a9d971296e5b73bfe72e446e"
+  integrity sha512-8EXhHRFqlVVWXPezBW5keTiQi/rJMQTg/Y9uVCEZ0CAF3PKtCCaVRnp64Ii1ujhkoDhhF1fVsImoN4yJ2uz4Wg==
+  dependencies:
+    "@babel/types" "^7.3.4"
+    jsesc "^2.5.1"
+    lodash "^4.17.11"
+    source-map "^0.5.0"
+    trim-right "^1.0.1"
+
 "@babel/generator@^7.2.0":
   version "7.4.0"
   resolved "https://registry.npmjs.org/@babel/generator/-/generator-7.4.0.tgz#c230e79589ae7a729fd4631b9ded4dc220418196"
@@ -346,7 +397,7 @@
     "@babel/helper-replace-supers" "^7.4.0"
     "@babel/helper-split-export-declaration" "^7.4.0"
 
-"@babel/helper-create-class-features-plugin@^7.4.0", "@babel/helper-create-class-features-plugin@^7.4.4":
+"@babel/helper-create-class-features-plugin@^7.3.0", "@babel/helper-create-class-features-plugin@^7.4.0", "@babel/helper-create-class-features-plugin@^7.4.4":
   version "7.4.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.4.4.tgz#fc3d690af6554cc9efc607364a82d48f58736dba"
   integrity sha512-UbBHIa2qeAGgyiNR9RszVF7bUHEdgS4JAUNT8SiqrAN6YJVxlOxeLr5pBzb5kan302dejJ9nla4RyKcR1XT6XA==
@@ -358,7 +409,7 @@
     "@babel/helper-replace-supers" "^7.4.4"
     "@babel/helper-split-export-declaration" "^7.4.4"
 
-"@babel/helper-define-map@^7.4.0", "@babel/helper-define-map@^7.4.4":
+"@babel/helper-define-map@^7.1.0", "@babel/helper-define-map@^7.4.0", "@babel/helper-define-map@^7.4.4":
   version "7.4.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-define-map/-/helper-define-map-7.4.4.tgz#6969d1f570b46bdc900d1eba8e5d59c48ba2c12a"
   integrity sha512-IX3Ln8gLhZpSuqHJSnTNBWGDE9kdkTEWl21A/K7PQ00tseBwbqCHTvNLHSBd9M0R5rER4h5Rsvj9vw0R5SieBg==
@@ -539,11 +590,16 @@
     esutils "^2.0.2"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.1.6", "@babel/parser@^7.4.2", "@babel/parser@^7.4.3", "@babel/parser@^7.4.4", "@babel/parser@^7.4.5":
+"@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.1.6", "@babel/parser@^7.2.3", "@babel/parser@^7.3.4", "@babel/parser@^7.4.2", "@babel/parser@^7.4.3", "@babel/parser@^7.4.4", "@babel/parser@^7.4.5":
   version "7.4.5"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.4.5.tgz#04af8d5d5a2b044a2a1bffacc1e5e6673544e872"
   integrity sha512-9mUqkL1FF5T7f0WDFfAoDdiMVPWsdD1gZYzSnaXsxUCUqzuch/8of9G3VUSNiZmMBoRxT3neyVsqeiL/ZPcjew==
 
+"@babel/parser@^7.0.0 <7.4.0", "@babel/parser@^7.2.2":
+  version "7.3.4"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.3.4.tgz#a43357e4bbf4b92a437fb9e465c192848287f27c"
+  integrity sha512-tXZCqWtlOOP4wgCp6RjRvLmfuhnqTLy9VHwRochJBCP2nDm27JnnuFEnXFASVyQNHk36jD1tAammsCEEqgscIQ==
+
 "@babel/parser@^7.2.0":
   version "7.4.3"
   resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.4.3.tgz#eb3ac80f64aa101c907d4ce5406360fe75b7895b"
@@ -578,6 +634,14 @@
     "@babel/helper-create-class-features-plugin" "^7.2.0"
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-proposal-class-properties@7.3.0":
+  version "7.3.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.3.0.tgz#272636bc0fa19a0bc46e601ec78136a173ea36cd"
+  integrity sha512-wNHxLkEKTQ2ay0tnsam2z7fGZUi+05ziDJflEt3AZTP3oXLKHJp9HqhfroB/vdMvt3sda9fAbq7FsG8QPDrZBg==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.3.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+
 "@babel/plugin-proposal-class-properties@7.4.0":
   version "7.4.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.4.0.tgz#d70db61a2f1fd79de927eea91f6411c964e084b8"
@@ -604,6 +668,15 @@
     "@babel/helper-split-export-declaration" "^7.0.0"
     "@babel/plugin-syntax-decorators" "^7.2.0"
 
+"@babel/plugin-proposal-decorators@7.3.0":
+  version "7.3.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.3.0.tgz#637ba075fa780b1f75d08186e8fb4357d03a72a7"
+  integrity sha512-3W/oCUmsO43FmZIqermmq6TKaRSYhmh/vybPfVFwQWdSb8xwki38uAIvknCRzuyHRuYfCYmJzL9or1v0AffPjg==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.3.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-decorators" "^7.2.0"
+
 "@babel/plugin-proposal-decorators@7.4.0":
   version "7.4.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.4.0.tgz#8e1bfd83efa54a5f662033afcc2b8e701f4bb3a9"
@@ -662,6 +735,14 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-nullish-coalescing-operator" "^7.2.0"
 
+"@babel/plugin-proposal-object-rest-spread@7.3.2":
+  version "7.3.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.3.2.tgz#6d1859882d4d778578e41f82cc5d7bf3d5daf6c1"
+  integrity sha512-DjeMS+J2+lpANkYLLO+m6GjoTMygYglKmRe6cDTbFv3L9i6mmiE8fe6B8MtCSLZpVXscD5kn7s6SgtHrDoBWoA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-object-rest-spread" "^7.2.0"
+
 "@babel/plugin-proposal-object-rest-spread@7.4.3":
   version "7.4.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.4.3.tgz#be27cd416eceeba84141305b93c282f5de23bbb4"
@@ -670,7 +751,7 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-object-rest-spread" "^7.2.0"
 
-"@babel/plugin-proposal-object-rest-spread@^7.0.0", "@babel/plugin-proposal-object-rest-spread@^7.2.0", "@babel/plugin-proposal-object-rest-spread@^7.3.2", "@babel/plugin-proposal-object-rest-spread@^7.4.3", "@babel/plugin-proposal-object-rest-spread@^7.4.4":
+"@babel/plugin-proposal-object-rest-spread@^7.0.0", "@babel/plugin-proposal-object-rest-spread@^7.2.0", "@babel/plugin-proposal-object-rest-spread@^7.3.1", "@babel/plugin-proposal-object-rest-spread@^7.3.2", "@babel/plugin-proposal-object-rest-spread@^7.3.4", "@babel/plugin-proposal-object-rest-spread@^7.4.3", "@babel/plugin-proposal-object-rest-spread@^7.4.4":
   version "7.4.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.4.4.tgz#1ef173fcf24b3e2df92a678f027673b55e7e3005"
   integrity sha512-dMBG6cSPBbHeEBdFXeQ2QLc5gUpg4Vkaz8octD4aoW/ISO+jBOcsuxYL7bsb5WSu8RLP6boxrBIALEHgoHtO9g==
@@ -815,7 +896,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-async-to-generator@^7.0.0", "@babel/plugin-transform-async-to-generator@^7.2.0", "@babel/plugin-transform-async-to-generator@^7.4.0", "@babel/plugin-transform-async-to-generator@^7.4.4":
+"@babel/plugin-transform-async-to-generator@^7.0.0", "@babel/plugin-transform-async-to-generator@^7.2.0", "@babel/plugin-transform-async-to-generator@^7.3.4", "@babel/plugin-transform-async-to-generator@^7.4.0", "@babel/plugin-transform-async-to-generator@^7.4.4":
   version "7.4.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.4.4.tgz#a3f1d01f2f21cadab20b33a82133116f14fb5894"
   integrity sha512-YiqW2Li8TXmzgbXw+STsSqPBPFnGviiaSp6CYOq55X8GQ2SGVLrXB6pNid8HkqkZAzOH6knbai3snhP7v0fNwA==
@@ -831,7 +912,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-block-scoping@^7.0.0", "@babel/plugin-transform-block-scoping@^7.2.0", "@babel/plugin-transform-block-scoping@^7.4.0", "@babel/plugin-transform-block-scoping@^7.4.4":
+"@babel/plugin-transform-block-scoping@^7.0.0", "@babel/plugin-transform-block-scoping@^7.2.0", "@babel/plugin-transform-block-scoping@^7.3.4", "@babel/plugin-transform-block-scoping@^7.4.0", "@babel/plugin-transform-block-scoping@^7.4.4":
   version "7.4.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.4.4.tgz#c13279fabf6b916661531841a23c4b7dae29646d"
   integrity sha512-jkTUyWZcTrwxu5DD4rWz6rDB5Cjdmgz6z7M7RLXOJyCUkFBawssDGcGh8M/0FTSB87avyJI1HsTwUXp9nKA1PA==
@@ -839,6 +920,20 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     lodash "^4.17.11"
 
+"@babel/plugin-transform-classes@7.2.2":
+  version "7.2.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.2.2.tgz#6c90542f210ee975aa2aa8c8b5af7fa73a126953"
+  integrity sha512-gEZvgTy1VtcDOaQty1l10T3jQmJKlNVxLDCs+3rCVPr6nMkODLELxViq5X9l+rfxbie3XrfrMCYYY6eX3aOcOQ==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.0.0"
+    "@babel/helper-define-map" "^7.1.0"
+    "@babel/helper-function-name" "^7.1.0"
+    "@babel/helper-optimise-call-expression" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-replace-supers" "^7.1.0"
+    "@babel/helper-split-export-declaration" "^7.0.0"
+    globals "^11.1.0"
+
 "@babel/plugin-transform-classes@7.4.3":
   version "7.4.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.4.3.tgz#adc7a1137ab4287a555d429cc56ecde8f40c062c"
@@ -853,7 +948,7 @@
     "@babel/helper-split-export-declaration" "^7.4.0"
     globals "^11.1.0"
 
-"@babel/plugin-transform-classes@^7.0.0", "@babel/plugin-transform-classes@^7.2.0", "@babel/plugin-transform-classes@^7.4.3", "@babel/plugin-transform-classes@^7.4.4":
+"@babel/plugin-transform-classes@^7.0.0", "@babel/plugin-transform-classes@^7.2.0", "@babel/plugin-transform-classes@^7.3.4", "@babel/plugin-transform-classes@^7.4.3", "@babel/plugin-transform-classes@^7.4.4":
   version "7.4.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.4.4.tgz#0ce4094cdafd709721076d3b9c38ad31ca715eb6"
   integrity sha512-/e44eFLImEGIpL9qPxSRat13I5QNRgBLu2hOQJCF7VLy/otSM/sypV1+XaIw5+502RX/+6YaSAPmldk+nhHDPw==
@@ -874,6 +969,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-destructuring@7.3.2":
+  version "7.3.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.3.2.tgz#f2f5520be055ba1c38c41c0e094d8a461dd78f2d"
+  integrity sha512-Lrj/u53Ufqxl/sGxyjsJ2XNtNuEjDyjpqdhMNh5aZ+XFOdThL46KBj27Uem4ggoezSYBxKWAil6Hu8HtwqesYw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
 "@babel/plugin-transform-destructuring@7.4.3":
   version "7.4.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.4.3.tgz#1a95f5ca2bf2f91ef0648d5de38a8d472da4350f"
@@ -912,6 +1014,14 @@
     "@babel/helper-builder-binary-assignment-operator-visitor" "^7.1.0"
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-flow-strip-types@7.2.3":
+  version "7.2.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.2.3.tgz#e3ac2a594948454e7431c7db33e1d02d51b5cd69"
+  integrity sha512-xnt7UIk9GYZRitqCnsVMjQK1O2eKZwFB3CvvHjf5SGx6K6vr/MScCKQDnf1DxRaj501e3pXjti+inbSXX2ZUoQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-flow" "^7.2.0"
+
 "@babel/plugin-transform-flow-strip-types@7.4.0":
   version "7.4.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.4.0.tgz#f3c59eecff68c99b9c96eaafe4fe9d1fa8947138"
@@ -928,6 +1038,14 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-flow" "^7.2.0"
 
+"@babel/plugin-transform-flow-strip-types@^7.0.0 <7.4.0":
+  version "7.3.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.3.4.tgz#00156236defb7dedddc2d3c9477dcc01a4494327"
+  integrity sha512-PmQC9R7DwpBFA+7ATKMyzViz3zCaMNouzZMPZN2K5PnbBbtL3AXFYTkDk+Hey5crQq2A90UG5Uthz0mel+XZrA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-flow" "^7.2.0"
+
 "@babel/plugin-transform-for-of@^7.0.0", "@babel/plugin-transform-for-of@^7.2.0", "@babel/plugin-transform-for-of@^7.4.3", "@babel/plugin-transform-for-of@^7.4.4":
   version "7.4.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.4.4.tgz#0267fc735e24c808ba173866c6c4d1440fc3c556"
@@ -974,7 +1092,16 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/helper-simple-access" "^7.1.0"
 
-"@babel/plugin-transform-modules-systemjs@^7.2.0", "@babel/plugin-transform-modules-systemjs@^7.4.0", "@babel/plugin-transform-modules-systemjs@^7.4.4":
+"@babel/plugin-transform-modules-commonjs@^7.0.0 <7.4.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.2.0.tgz#c4f1933f5991d5145e9cfad1dfd848ea1727f404"
+  integrity sha512-V6y0uaUQrQPXUrmj+hgnks8va2L0zcZymeU7TtWEgdRLNkceafKXEduv7QzgQAE4lT+suwooG9dC7LFhdRAbVQ==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.1.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-simple-access" "^7.1.0"
+
+"@babel/plugin-transform-modules-systemjs@^7.2.0", "@babel/plugin-transform-modules-systemjs@^7.3.4", "@babel/plugin-transform-modules-systemjs@^7.4.0", "@babel/plugin-transform-modules-systemjs@^7.4.4":
   version "7.4.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.4.4.tgz#dc83c5665b07d6c2a7b224c00ac63659ea36a405"
   integrity sha512-MSiModfILQc3/oqnG7NrP1jHaSPryO6tA2kOMmAQApz5dayPxWiHqmq4sWH2xF5LcQK56LlbKByCd8Aah/OIkQ==
@@ -990,7 +1117,7 @@
     "@babel/helper-module-transforms" "^7.1.0"
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-named-capturing-groups-regex@^7.4.2", "@babel/plugin-transform-named-capturing-groups-regex@^7.4.5":
+"@babel/plugin-transform-named-capturing-groups-regex@^7.3.0", "@babel/plugin-transform-named-capturing-groups-regex@^7.4.2", "@babel/plugin-transform-named-capturing-groups-regex@^7.4.5":
   version "7.4.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.4.5.tgz#9d269fd28a370258199b4294736813a60bbdd106"
   integrity sha512-z7+2IsWafTBbjNsOxU/Iv5CvTJlr5w4+HGu1HovKYTtgJ362f7kBcQglkfmlspKKZ3bgrbSGvLfNx++ZJgCWsg==
@@ -1066,7 +1193,7 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-jsx" "^7.2.0"
 
-"@babel/plugin-transform-react-jsx@^7.0.0", "@babel/plugin-transform-react-jsx@^7.3.0":
+"@babel/plugin-transform-react-jsx@^7.0.0", "@babel/plugin-transform-react-jsx@^7.0.0 <7.4.0", "@babel/plugin-transform-react-jsx@^7.3.0":
   version "7.3.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.3.0.tgz#f2cab99026631c767e2745a5368b331cfe8f5290"
   integrity sha512-a/+aRb7R06WcKvQLOu4/TpjKOdvVEKRLWFpKcNuHhiREPgGRB4TQJxq07+EZLS8LFVYpfq1a5lDUnuMdcCpBKg==
@@ -1075,7 +1202,7 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-jsx" "^7.2.0"
 
-"@babel/plugin-transform-regenerator@^7.0.0", "@babel/plugin-transform-regenerator@^7.4.3", "@babel/plugin-transform-regenerator@^7.4.5":
+"@babel/plugin-transform-regenerator@^7.0.0", "@babel/plugin-transform-regenerator@^7.3.4", "@babel/plugin-transform-regenerator@^7.4.3", "@babel/plugin-transform-regenerator@^7.4.5":
   version "7.4.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.4.5.tgz#629dc82512c55cee01341fb27bdfcb210354680f"
   integrity sha512-gBKRh5qAaCWntnd09S8QC7r3auLCqq5DI6O0DlfoyDjslSBVqBibrMdsqO+Uhmx3+BlOmE/Kw1HFxmGbv0N9dA==
@@ -1089,6 +1216,16 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-runtime@7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.2.0.tgz#566bc43f7d0aedc880eaddbd29168d0f248966ea"
+  integrity sha512-jIgkljDdq4RYDnJyQsiWbdvGeei/0MOTtSHKO/rfbd/mXBxNpdlulMx49L0HQ4pug1fXannxoqCI+fYSle9eSw==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    resolve "^1.8.1"
+    semver "^5.5.1"
+
 "@babel/plugin-transform-runtime@7.4.3":
   version "7.4.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.4.3.tgz#4d6691690ecdc9f5cb8c3ab170a1576c1f556371"
@@ -1146,7 +1283,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-typescript@^7.0.0", "@babel/plugin-transform-typescript@^7.3.2":
+"@babel/plugin-transform-typescript@^7.0.0", "@babel/plugin-transform-typescript@^7.1.0", "@babel/plugin-transform-typescript@^7.3.2":
   version "7.4.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.4.5.tgz#ab3351ba35307b79981993536c93ff8be050ba28"
   integrity sha512-RPB/YeGr4ZrFKNwfuQRlMf2lxoCUaU01MTw39/OFE/RiL8HDjtn68BwEPft1P7JN4akyEmjGWAMNldOV7o9V2g==
@@ -1218,6 +1355,55 @@
     js-levenshtein "^1.1.3"
     semver "^5.3.0"
 
+"@babel/preset-env@7.3.1":
+  version "7.3.1"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.3.1.tgz#389e8ca6b17ae67aaf9a2111665030be923515db"
+  integrity sha512-FHKrD6Dxf30e8xgHQO0zJZpUPfVZg+Xwgz5/RdSWCbza9QLNk4Qbp40ctRoqDxml3O8RMzB1DU55SXeDG6PqHQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-proposal-async-generator-functions" "^7.2.0"
+    "@babel/plugin-proposal-json-strings" "^7.2.0"
+    "@babel/plugin-proposal-object-rest-spread" "^7.3.1"
+    "@babel/plugin-proposal-optional-catch-binding" "^7.2.0"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.2.0"
+    "@babel/plugin-syntax-async-generators" "^7.2.0"
+    "@babel/plugin-syntax-json-strings" "^7.2.0"
+    "@babel/plugin-syntax-object-rest-spread" "^7.2.0"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.2.0"
+    "@babel/plugin-transform-arrow-functions" "^7.2.0"
+    "@babel/plugin-transform-async-to-generator" "^7.2.0"
+    "@babel/plugin-transform-block-scoped-functions" "^7.2.0"
+    "@babel/plugin-transform-block-scoping" "^7.2.0"
+    "@babel/plugin-transform-classes" "^7.2.0"
+    "@babel/plugin-transform-computed-properties" "^7.2.0"
+    "@babel/plugin-transform-destructuring" "^7.2.0"
+    "@babel/plugin-transform-dotall-regex" "^7.2.0"
+    "@babel/plugin-transform-duplicate-keys" "^7.2.0"
+    "@babel/plugin-transform-exponentiation-operator" "^7.2.0"
+    "@babel/plugin-transform-for-of" "^7.2.0"
+    "@babel/plugin-transform-function-name" "^7.2.0"
+    "@babel/plugin-transform-literals" "^7.2.0"
+    "@babel/plugin-transform-modules-amd" "^7.2.0"
+    "@babel/plugin-transform-modules-commonjs" "^7.2.0"
+    "@babel/plugin-transform-modules-systemjs" "^7.2.0"
+    "@babel/plugin-transform-modules-umd" "^7.2.0"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.3.0"
+    "@babel/plugin-transform-new-target" "^7.0.0"
+    "@babel/plugin-transform-object-super" "^7.2.0"
+    "@babel/plugin-transform-parameters" "^7.2.0"
+    "@babel/plugin-transform-regenerator" "^7.0.0"
+    "@babel/plugin-transform-shorthand-properties" "^7.2.0"
+    "@babel/plugin-transform-spread" "^7.2.0"
+    "@babel/plugin-transform-sticky-regex" "^7.2.0"
+    "@babel/plugin-transform-template-literals" "^7.2.0"
+    "@babel/plugin-transform-typeof-symbol" "^7.2.0"
+    "@babel/plugin-transform-unicode-regex" "^7.2.0"
+    browserslist "^4.3.4"
+    invariant "^2.2.2"
+    js-levenshtein "^1.1.3"
+    semver "^5.3.0"
+
 "@babel/preset-env@7.4.3":
   version "7.4.3"
   resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.4.3.tgz#e71e16e123dc0fbf65a52cbcbcefd072fbd02880"
@@ -1326,6 +1512,55 @@
     js-levenshtein "^1.1.3"
     semver "^5.5.0"
 
+"@babel/preset-env@^7.0.0 <7.4.0":
+  version "7.3.4"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.3.4.tgz#887cf38b6d23c82f19b5135298bdb160062e33e1"
+  integrity sha512-2mwqfYMK8weA0g0uBKOt4FE3iEodiHy9/CW0b+nWXcbL+pGzLx8ESYc+j9IIxr6LTDHWKgPm71i9smo02bw+gA==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-proposal-async-generator-functions" "^7.2.0"
+    "@babel/plugin-proposal-json-strings" "^7.2.0"
+    "@babel/plugin-proposal-object-rest-spread" "^7.3.4"
+    "@babel/plugin-proposal-optional-catch-binding" "^7.2.0"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.2.0"
+    "@babel/plugin-syntax-async-generators" "^7.2.0"
+    "@babel/plugin-syntax-json-strings" "^7.2.0"
+    "@babel/plugin-syntax-object-rest-spread" "^7.2.0"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.2.0"
+    "@babel/plugin-transform-arrow-functions" "^7.2.0"
+    "@babel/plugin-transform-async-to-generator" "^7.3.4"
+    "@babel/plugin-transform-block-scoped-functions" "^7.2.0"
+    "@babel/plugin-transform-block-scoping" "^7.3.4"
+    "@babel/plugin-transform-classes" "^7.3.4"
+    "@babel/plugin-transform-computed-properties" "^7.2.0"
+    "@babel/plugin-transform-destructuring" "^7.2.0"
+    "@babel/plugin-transform-dotall-regex" "^7.2.0"
+    "@babel/plugin-transform-duplicate-keys" "^7.2.0"
+    "@babel/plugin-transform-exponentiation-operator" "^7.2.0"
+    "@babel/plugin-transform-for-of" "^7.2.0"
+    "@babel/plugin-transform-function-name" "^7.2.0"
+    "@babel/plugin-transform-literals" "^7.2.0"
+    "@babel/plugin-transform-modules-amd" "^7.2.0"
+    "@babel/plugin-transform-modules-commonjs" "^7.2.0"
+    "@babel/plugin-transform-modules-systemjs" "^7.3.4"
+    "@babel/plugin-transform-modules-umd" "^7.2.0"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.3.0"
+    "@babel/plugin-transform-new-target" "^7.0.0"
+    "@babel/plugin-transform-object-super" "^7.2.0"
+    "@babel/plugin-transform-parameters" "^7.2.0"
+    "@babel/plugin-transform-regenerator" "^7.3.4"
+    "@babel/plugin-transform-shorthand-properties" "^7.2.0"
+    "@babel/plugin-transform-spread" "^7.2.0"
+    "@babel/plugin-transform-sticky-regex" "^7.2.0"
+    "@babel/plugin-transform-template-literals" "^7.2.0"
+    "@babel/plugin-transform-typeof-symbol" "^7.2.0"
+    "@babel/plugin-transform-unicode-regex" "^7.2.0"
+    browserslist "^4.3.4"
+    invariant "^2.2.2"
+    js-levenshtein "^1.1.3"
+    semver "^5.3.0"
+
 "@babel/preset-flow@7.0.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"
@@ -1345,6 +1580,14 @@
     "@babel/plugin-transform-react-jsx-self" "^7.0.0"
     "@babel/plugin-transform-react-jsx-source" "^7.0.0"
 
+"@babel/preset-typescript@7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.1.0.tgz#49ad6e2084ff0bfb5f1f7fb3b5e76c434d442c7f"
+  integrity sha512-LYveByuF9AOM8WrsNne5+N79k1YxjNB6gmpCQsnuSBAcV8QUeB+ZUxQzL7Rz7HksPbahymKkq2qBR+o36ggFZA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-transform-typescript" "^7.1.0"
+
 "@babel/preset-typescript@7.3.3", "@babel/preset-typescript@^7.1.0", "@babel/preset-typescript@^7.3.3":
   version "7.3.3"
   resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.3.3.tgz#88669911053fa16b2b276ea2ede2ca603b3f307a"
@@ -1365,7 +1608,14 @@
     pirates "^4.0.0"
     source-map-support "^0.5.9"
 
-"@babel/runtime@7.3.4":
+"@babel/runtime@7.3.1":
+  version "7.3.1"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.3.1.tgz#574b03e8e8a9898eaf4a872a92ea20b7846f6f2a"
+  integrity sha512-7jGW8ppV0ant637pIqAcFfQDDH1orEPGJb8aXfUozuCU3QqX7rX4DA8iwrbPrR1hcH0FTTHz47yQnk+bl5xHQA==
+  dependencies:
+    regenerator-runtime "^0.12.0"
+
+"@babel/runtime@7.3.4", "@babel/runtime@^7.0.0 <7.4.0":
   version "7.3.4"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.3.4.tgz#73d12ba819e365fcf7fd152aed56d6df97d21c83"
   integrity sha512-IvfvnMdSaLBateu0jfsYIpZTxAc2cKEXEMiezGGN75QcBcecDUKd3PgLAncT0oOgxKy8dd8hrJKj9MfzgfZd6g==
@@ -1405,6 +1655,15 @@
     "@babel/parser" "^7.4.4"
     "@babel/types" "^7.4.4"
 
+"@babel/template@^7.0.0 <7.4.0", "@babel/template@^7.2.2":
+  version "7.2.2"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.2.2.tgz#005b3fdf0ed96e88041330379e0da9a708eb2907"
+  integrity sha512-zRL0IMM02AUDwghf5LMSSDEz7sBCO2YnNmpg3uWTZj/v1rcG2BmQUvaGU8GhU8BvfMh1k2KIAYZ7Ji9KXPUg7g==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@babel/parser" "^7.2.2"
+    "@babel/types" "^7.2.2"
+
 "@babel/template@^7.1.2":
   version "7.4.0"
   resolved "https://registry.npmjs.org/@babel/template/-/template-7.4.0.tgz#12474e9c077bae585c5d835a95c0b0b790c25c8b"
@@ -1430,7 +1689,7 @@
     invariant "^2.2.0"
     lodash "^4.2.0"
 
-"@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0", "@babel/traverse@^7.4.3", "@babel/traverse@^7.4.4", "@babel/traverse@^7.4.5":
+"@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0", "@babel/traverse@^7.3.4", "@babel/traverse@^7.4.3", "@babel/traverse@^7.4.4", "@babel/traverse@^7.4.5":
   version "7.4.5"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.4.5.tgz#4e92d1728fd2f1897dafdd321efbff92156c3216"
   integrity sha512-Vc+qjynwkjRmIFGxy0KYoPj4FdVDxLej89kMHFsWScq999uX+pwcX4v9mWRjW0KcAYTPAuVQl2LKP1wEVLsp+A==
@@ -1445,6 +1704,21 @@
     globals "^11.1.0"
     lodash "^4.17.11"
 
+"@babel/traverse@^7.0.0 <7.4.0", "@babel/traverse@^7.2.2":
+  version "7.3.4"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.3.4.tgz#1330aab72234f8dea091b08c4f8b9d05c7119e06"
+  integrity sha512-TvTHKp6471OYEcE/91uWmhR6PrrYywQntCHSaZ8CM8Vmp+pjAusal4nGB2WCCQd0rvI7nOMKn9GnbcvTUz3/ZQ==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@babel/generator" "^7.3.4"
+    "@babel/helper-function-name" "^7.1.0"
+    "@babel/helper-split-export-declaration" "^7.0.0"
+    "@babel/parser" "^7.3.4"
+    "@babel/types" "^7.3.4"
+    debug "^4.1.0"
+    globals "^11.1.0"
+    lodash "^4.17.11"
+
 "@babel/traverse@^7.1.6":
   version "7.4.3"
   resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.4.3.tgz#1a01f078fc575d589ff30c0f71bf3c3d9ccbad84"
@@ -1469,7 +1743,7 @@
     lodash "^4.2.0"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.0.0", "@babel/types@^7.2.0", "@babel/types@^7.3.0", "@babel/types@^7.4.0", "@babel/types@^7.4.4":
+"@babel/types@^7.0.0", "@babel/types@^7.2.0", "@babel/types@^7.3.0", "@babel/types@^7.3.4", "@babel/types@^7.4.0", "@babel/types@^7.4.4":
   version "7.4.4"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.4.4.tgz#8db9e9a629bb7c29370009b4b779ed93fe57d5f0"
   integrity sha512-dOllgYdnEFOebhkKCjzSVFqw/PmmB8pH6RGOWkY4GsboQNd47b1fBThBSwlHAq9alF9vc1M3+6oqR47R50L0tQ==
@@ -1478,6 +1752,15 @@
     lodash "^4.17.11"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.0.0 <7.4.0", "@babel/types@^7.2.2":
+  version "7.3.4"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.3.4.tgz#bf482eaeaffb367a28abbf9357a94963235d90ed"
+  integrity sha512-WEkp8MsLftM7O/ty580wAmZzN1nDmCACc5+jFzUt+GUFNNIi3LdRlueYz0YIlmJhlZx1QYDMZL5vdWCL0fNjFQ==
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.17.11"
+    to-fast-properties "^2.0.0"
+
 "@chromaui/localtunnel@1.9.1-chromatic.3":
   version "1.9.1-chromatic.3"
   resolved "https://registry.yarnpkg.com/@chromaui/localtunnel/-/localtunnel-1.9.1-chromatic.3.tgz#0875a1e1a51e6f42a3c7ce540ca434ed0d8b8ae3"
@@ -2063,6 +2346,11 @@
   dependencies:
     "@hapi/hoek" "6.x.x"
 
+"@iarna/toml@^2.2.0":
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/@iarna/toml/-/toml-2.2.3.tgz#f060bf6eaafae4d56a7dac618980838b0696e2ab"
+  integrity sha512-FmuxfCuolpLl0AnQ2NHSzoUKWEJDFl63qXjzdoWBVyFCXzMGm1spBzk7LeHNoVCiWCF7mRVms9e6jEV9+MoPbg==
+
 "@icons/material@^0.2.4":
   version "0.2.4"
   resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8"
@@ -3286,6 +3574,47 @@
     tiny-json-http "^7.0.2"
     webpack-bundle-analyzer "^3.0.4"
 
+"@parcel/fs@^1.11.0":
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/@parcel/fs/-/fs-1.11.0.tgz#fb8a2be038c454ad46a50dc0554c1805f13535cd"
+  integrity sha512-86RyEqULbbVoeo8OLcv+LQ1Vq2PKBAvWTU9fCgALxuCTbbs5Ppcvll4Vr+Ko1AnmMzja/k++SzNAwJfeQXVlpA==
+  dependencies:
+    "@parcel/utils" "^1.11.0"
+    mkdirp "^0.5.1"
+    rimraf "^2.6.2"
+
+"@parcel/logger@^1.11.0":
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/@parcel/logger/-/logger-1.11.0.tgz#91f39da14ba08dd85db247145698c62102960abb"
+  integrity sha512-lIRfDg+junbFUUeU0QtHX00gKCgEsYHZydFKwrJ8dc0D+WE2SYT1FcVCgpPAfKYgtg0QQMns8E9vzT9UjH92PQ==
+  dependencies:
+    "@parcel/workers" "^1.11.0"
+    chalk "^2.1.0"
+    grapheme-breaker "^0.3.2"
+    ora "^2.1.0"
+    strip-ansi "^4.0.0"
+
+"@parcel/utils@^1.11.0":
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/@parcel/utils/-/utils-1.11.0.tgz#539e08fff8af3b26eca11302be80b522674b51ea"
+  integrity sha512-cA3p4jTlaMeOtAKR/6AadanOPvKeg8VwgnHhOyfi0yClD0TZS/hi9xu12w4EzA/8NtHu0g6o4RDfcNjqN8l1AQ==
+
+"@parcel/watcher@^1.12.0":
+  version "1.12.0"
+  resolved "https://registry.yarnpkg.com/@parcel/watcher/-/watcher-1.12.0.tgz#769024b2a810b0c3b38c310f297d104c77df3660"
+  integrity sha512-yijGiAqG7Tjf5WnFwOkiNWwerfZQDNABldiiqRDtr7vDWLO+F/DIncyB7tTcaD5Loevrr5mzzGo8Ntf3d2GIPg==
+  dependencies:
+    "@parcel/utils" "^1.11.0"
+    chokidar "^2.0.3"
+
+"@parcel/workers@^1.11.0":
+  version "1.11.0"
+  resolved "https://registry.yarnpkg.com/@parcel/workers/-/workers-1.11.0.tgz#7b8dcf992806f4ad2b6cecf629839c41c2336c59"
+  integrity sha512-USSjRAAQYsZFlv43FUPdD+jEGML5/8oLF0rUzPQTtK4q9kvaXr49F5ZplyLz5lox78cLZ0TxN2bIDQ1xhOkulQ==
+  dependencies:
+    "@parcel/utils" "^1.11.0"
+    physical-cpu-count "^2.0.0"
+
 "@polymer/polymer@^2.6.0":
   version "2.7.2"
   resolved "https://registry.yarnpkg.com/@polymer/polymer/-/polymer-2.7.2.tgz#ae49d14b412acf065527ae44db3db5b802d16867"
@@ -3345,27 +3674,315 @@
   resolved "https://registry.yarnpkg.com/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.2.tgz#8013f2af54a2b7d735f71560ff360d3a8176a87b"
   integrity sha512-vTCdPp/T/Q3oSqwHmZ5Kpa9oI7iLtGl3RQaA/NyLHikvcrPxACkkKVr/XzkSPJWXHRhKGzVvb0urJsbMlRxi1Q==
 
-"@sindresorhus/df@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@sindresorhus/df/-/df-1.0.1.tgz#c69b66f52f6fcdd287c807df210305dbaf78500d"
-  integrity sha1-xptm9S9vzdKHyAffIQMF2694UA0=
+"@sindresorhus/df@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@sindresorhus/df/-/df-1.0.1.tgz#c69b66f52f6fcdd287c807df210305dbaf78500d"
+  integrity sha1-xptm9S9vzdKHyAffIQMF2694UA0=
+
+"@sindresorhus/df@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@sindresorhus/df/-/df-2.1.0.tgz#d208cf27e06f0bb476d14d7deccd7d726e9aa389"
+  integrity sha1-0gjPJ+BvC7R20U197M19cm6ao4k=
+  dependencies:
+    execa "^0.2.2"
+
+"@sindresorhus/is@^0.14.0":
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.14.0.tgz#9fb3a3cf3132328151f353de4632e01e52102bea"
+  integrity sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ==
+
+"@sindresorhus/is@^0.7.0":
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd"
+  integrity sha512-ONhaKPIufzzrlNbqtWFFd+jlnemX6lJAgq9ZeiZtS7I1PIf/la7CW4m83rTXRnVnsMbW2k56pGYu7AUFJD9Pow==
+
+"@storybook/addons@5.1.0-alpha.32":
+  version "5.1.0-alpha.32"
+  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-5.1.0-alpha.32.tgz#7392535f6ec8412048181f78c109ad3e6fa2b7bd"
+  integrity sha512-D90X2NsphzvFqRnRmXiakboXfxbhyp91Ss3jB5FIqKUp6r1wy3ul3VPa43tIod3drkrDRsvWA9qZLG9/Df9/dg==
+  dependencies:
+    "@storybook/api" "5.1.0-alpha.32"
+    "@storybook/channels" "5.1.0-alpha.32"
+    "@storybook/client-logger" "5.1.0-alpha.32"
+    core-js "^2.6.5"
+    global "^4.3.2"
+    util-deprecate "^1.0.2"
+
+"@storybook/api@5.1.0-alpha.32":
+  version "5.1.0-alpha.32"
+  resolved "https://registry.yarnpkg.com/@storybook/api/-/api-5.1.0-alpha.32.tgz#42b2d41ef7a4831160f5a33918d85000678f4ab0"
+  integrity sha512-lcsT9iL8hk+wG0Ef0senJy8pH7d/7UThLPQR+EdMscqe37/9RKpwNO004D4YAeOTO8ZNIvYXKScPQzNHlXg79Q==
+  dependencies:
+    "@storybook/channels" "5.1.0-alpha.32"
+    "@storybook/client-logger" "5.1.0-alpha.32"
+    "@storybook/core-events" "5.1.0-alpha.32"
+    "@storybook/router" "5.1.0-alpha.32"
+    "@storybook/theming" "5.1.0-alpha.32"
+    core-js "^2.6.5"
+    fast-deep-equal "^2.0.1"
+    global "^4.3.2"
+    lodash.isequal "^4.5.0"
+    lodash.mergewith "^4.6.1"
+    lodash.pick "^4.4.0"
+    memoizerific "^1.11.3"
+    prop-types "^15.6.2"
+    react "^16.7.0"
+    semver "^5.6.0"
+    store2 "^2.7.1"
+    telejson "^2.1.1"
+    util-deprecate "^1.0.2"
+
+"@storybook/channel-postmessage@5.1.0-alpha.32":
+  version "5.1.0-alpha.32"
+  resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-5.1.0-alpha.32.tgz#0a2f35ffc668d65e54870355261501b59d6de943"
+  integrity sha512-A+g9AJki9X8BhMj2YSnRu9WBpaCvOyebT9KHKThl9dhV1Mr08vJl4RFfXcVds9Zy4qbljbzanJWJ85LYjxp82g==
+  dependencies:
+    "@storybook/channels" "5.1.0-alpha.32"
+    "@storybook/client-logger" "5.1.0-alpha.32"
+    core-js "^2.6.5"
+    global "^4.3.2"
+    telejson "^2.1.1"
+
+"@storybook/channels@5.1.0-alpha.32":
+  version "5.1.0-alpha.32"
+  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-5.1.0-alpha.32.tgz#74afb7f0f84c6088232fa23f680adc9d9c03587e"
+  integrity sha512-f2ZmlvhdqS5fuLxYFbrTqoaZMnbAhrmKvlu6+lwSRXIV3H9PEipeSX7RQJSJAsdqJaw2YfIMgNIbZaj9XpoPNw==
+  dependencies:
+    core-js "^2.6.5"
+
+"@storybook/client-api@5.1.0-alpha.32":
+  version "5.1.0-alpha.32"
+  resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-5.1.0-alpha.32.tgz#2e4d91580edc9bb4695a8984bc442c0ebdbd082d"
+  integrity sha512-/Q/kbiMsfl6hvuC9/uJ6HPQePc2UNLA072k/RaHl2rMHWuNDRkML7VDjrt+Zthh+PQB5Vd/IZ79owJVHG5+/Lg==
+  dependencies:
+    "@storybook/addons" "5.1.0-alpha.32"
+    "@storybook/client-logger" "5.1.0-alpha.32"
+    "@storybook/core-events" "5.1.0-alpha.32"
+    "@storybook/router" "5.1.0-alpha.32"
+    common-tags "^1.8.0"
+    core-js "^2.6.5"
+    eventemitter3 "^3.1.0"
+    global "^4.3.2"
+    is-plain-object "^2.0.4"
+    lodash.debounce "^4.0.8"
+    lodash.isequal "^4.5.0"
+    lodash.mergewith "^4.6.1"
+    memoizerific "^1.11.3"
+    qs "^6.6.0"
+
+"@storybook/client-logger@5.1.0-alpha.32":
+  version "5.1.0-alpha.32"
+  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-5.1.0-alpha.32.tgz#5f1e537e8bcc624c00e9049267f2dae5d5c47ec5"
+  integrity sha512-Aw8CkhBwGdjSAjp2hOr+GDMkymORHNvlrK3HZFF1dFQcpyD8Xlyj/Tjo/mm3Wx9GDoC45/8h/LxwzsyyMl+qNA==
+  dependencies:
+    core-js "^2.6.5"
+
+"@storybook/components@5.1.0-alpha.32":
+  version "5.1.0-alpha.32"
+  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-5.1.0-alpha.32.tgz#f920956ea1eb7a3b65caa103a1002c4751388141"
+  integrity sha512-Ovn55VQmRh2RcyYxw2mlw175FAUZ/mMgfwGm6Pi0V/VCFKII3Lv6wcmZMsw+8e1lGb1Ho3R/lXcrDK+Fmgor0Q==
+  dependencies:
+    "@storybook/client-logger" "5.1.0-alpha.32"
+    "@storybook/theming" "5.1.0-alpha.32"
+    core-js "^2.6.5"
+    global "^4.3.2"
+    js-beautify "^1.8.9"
+    markdown-to-jsx "^6.9.1"
+    memoizerific "^1.11.3"
+    polished "^3.0.0"
+    popper.js "^1.14.7"
+    prop-types "^15.7.2"
+    react "^16.8.4"
+    react-dom "^16.8.4"
+    react-focus-lock "^1.18.3"
+    react-helmet-async "^0.2.0"
+    react-popper-tooltip "^2.8.0"
+    react-syntax-highlighter "^8.0.1"
+    react-textarea-autosize "^7.1.0"
+    recompose "^0.30.0"
+    simplebar-react "^0.1.5"
+
+"@storybook/core-events@5.1.0-alpha.32":
+  version "5.1.0-alpha.32"
+  resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-5.1.0-alpha.32.tgz#3a8221ccd15f4f6148fe0551e2d3cf05e957d123"
+  integrity sha512-b62AocO0I07x0d3EFr2TimKkXdaB44w2P/6Z6H2paJptRQm0YtUND6pJJW/OFLoZQWc7nwEoO8eZhTXUyzPuPg==
+  dependencies:
+    core-js "^2.6.5"
+
+"@storybook/core@5.1.0-alpha.32":
+  version "5.1.0-alpha.32"
+  resolved "https://registry.yarnpkg.com/@storybook/core/-/core-5.1.0-alpha.32.tgz#bdc5520edcc622f9b06c210923f5b24d493ee404"
+  integrity sha512-VgHr68Bs/nSYNnKbGZM4n4lGaD4LWjhLIISDlq6vW0vvr8pqHmPAcvSKGfdgHZ14/GxEqwGc5/0oZ2Fg6KvnBg==
+  dependencies:
+    "@babel/plugin-proposal-class-properties" "^7.3.3"
+    "@babel/plugin-proposal-object-rest-spread" "^7.3.2"
+    "@babel/plugin-syntax-dynamic-import" "^7.2.0"
+    "@babel/plugin-transform-react-constant-elements" "^7.2.0"
+    "@babel/preset-env" "^7.4.1"
+    "@storybook/addons" "5.1.0-alpha.32"
+    "@storybook/channel-postmessage" "5.1.0-alpha.32"
+    "@storybook/client-api" "5.1.0-alpha.32"
+    "@storybook/client-logger" "5.1.0-alpha.32"
+    "@storybook/core-events" "5.1.0-alpha.32"
+    "@storybook/node-logger" "5.1.0-alpha.32"
+    "@storybook/router" "5.1.0-alpha.32"
+    "@storybook/theming" "5.1.0-alpha.32"
+    "@storybook/ui" "5.1.0-alpha.32"
+    airbnb-js-shims "^1 || ^2"
+    autoprefixer "^9.4.9"
+    babel-plugin-add-react-displayname "^0.0.5"
+    babel-plugin-emotion "^10.0.9"
+    babel-plugin-macros "^2.4.5"
+    babel-preset-minify "^0.5.0 || 0.6.0-alpha.5"
+    boxen "^3.0.0"
+    case-sensitive-paths-webpack-plugin "^2.2.0"
+    chalk "^2.4.2"
+    cli-table3 "0.5.1"
+    commander "^2.19.0"
+    common-tags "^1.8.0"
+    core-js "^2.6.5"
+    css-loader "^2.1.1"
+    detect-port "^1.3.0"
+    dotenv-webpack "^1.7.0"
+    ejs "^2.6.1"
+    express "^4.16.4"
+    file-loader "^3.0.1"
+    file-system-cache "^1.0.5"
+    find-cache-dir "^2.0.0"
+    fs-extra "^7.0.1"
+    global "^4.3.2"
+    html-webpack-plugin "^4.0.0-beta.2"
+    inquirer "^6.2.0"
+    interpret "^1.2.0"
+    ip "^1.1.5"
+    json5 "^2.1.0"
+    lazy-universal-dotenv "^2.0.0"
+    node-fetch "^2.3.0"
+    open "^6.1.0"
+    postcss-flexbugs-fixes "^4.1.0"
+    postcss-loader "^3.0.0"
+    pretty-hrtime "^1.0.3"
+    qs "^6.6.0"
+    raw-loader "^1.0.0"
+    react-dev-utils "^8.0.0"
+    regenerator-runtime "^0.12.1"
+    resolve "^1.10.0"
+    resolve-from "^4.0.0"
+    semver "^5.6.0"
+    serve-favicon "^2.5.0"
+    shelljs "^0.8.3"
+    style-loader "^0.23.1"
+    terser-webpack-plugin "^1.2.2"
+    url-loader "^1.1.2"
+    util-deprecate "^1.0.2"
+    webpack "^4.28.0"
+    webpack-dev-middleware "^3.6.0"
+    webpack-hot-middleware "^2.24.3"
+
+"@storybook/node-logger@5.1.0-alpha.32":
+  version "5.1.0-alpha.32"
+  resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-5.1.0-alpha.32.tgz#4c9dd139770b3b23c952872df6832fddad573089"
+  integrity sha512-MaiH8rEccXY5PfwGC78enxZ+Moupy3hTzUqGKOoUMeLIdZ/FvNb04MR4Leo8Cd1Pw6GTW1DVb0aUu7t3GlBH7w==
+  dependencies:
+    chalk "^2.4.2"
+    core-js "^2.6.5"
+    npmlog "^4.1.2"
+    pretty-hrtime "^1.0.3"
+    regenerator-runtime "^0.12.1"
 
-"@sindresorhus/df@^2.1.0":
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/@sindresorhus/df/-/df-2.1.0.tgz#d208cf27e06f0bb476d14d7deccd7d726e9aa389"
-  integrity sha1-0gjPJ+BvC7R20U197M19cm6ao4k=
+"@storybook/react@5.1.0-alpha.32":
+  version "5.1.0-alpha.32"
+  resolved "https://registry.yarnpkg.com/@storybook/react/-/react-5.1.0-alpha.32.tgz#0acd22184a86c942a187919df466368de6823a17"
+  integrity sha512-x7ssSlrmNXsmqHgAVjoMoMUFgOJsym+HUDs/p/DFxRjF4fuBrddz8BvjByqH+Tr9YW4nyGA2vUHP3InfAiS4Hw==
   dependencies:
-    execa "^0.2.2"
+    "@babel/plugin-transform-react-constant-elements" "^7.2.0"
+    "@babel/preset-flow" "^7.0.0"
+    "@babel/preset-react" "^7.0.0"
+    "@storybook/core" "5.1.0-alpha.32"
+    "@storybook/node-logger" "5.1.0-alpha.32"
+    "@svgr/webpack" "^4.0.3"
+    babel-plugin-named-asset-import "^0.3.1"
+    babel-plugin-react-docgen "^3.0.0"
+    babel-preset-react-app "^7.0.2"
+    common-tags "^1.8.0"
+    core-js "^2.6.5"
+    global "^4.3.2"
+    lodash "^4.17.11"
+    mini-css-extract-plugin "^0.5.0"
+    prop-types "^15.7.2"
+    react-dev-utils "^8.0.0"
+    regenerator-runtime "^0.12.1"
+    semver "^5.6.0"
+    webpack "^4.28.0"
 
-"@sindresorhus/is@^0.14.0":
-  version "0.14.0"
-  resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.14.0.tgz#9fb3a3cf3132328151f353de4632e01e52102bea"
-  integrity sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ==
+"@storybook/router@5.1.0-alpha.32":
+  version "5.1.0-alpha.32"
+  resolved "https://registry.yarnpkg.com/@storybook/router/-/router-5.1.0-alpha.32.tgz#f862f6ff2652dbc990030fd4ea1d3a9fd9d01431"
+  integrity sha512-t4agmfHiaN+a8El8482Fot5+AHZQrE1h8aep4hKZXK3JF3KL+mHk9QvrILdMsDrx5BNiDMI4v4WQ5w8f2U88aQ==
+  dependencies:
+    "@reach/router" "^1.2.1"
+    "@storybook/theming" "5.1.0-alpha.32"
+    core-js "^2.6.5"
+    global "^4.3.2"
+    memoizerific "^1.11.3"
+    qs "^6.6.0"
 
-"@sindresorhus/is@^0.7.0":
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.7.0.tgz#9a06f4f137ee84d7df0460c1fdb1135ffa6c50fd"
-  integrity sha512-ONhaKPIufzzrlNbqtWFFd+jlnemX6lJAgq9ZeiZtS7I1PIf/la7CW4m83rTXRnVnsMbW2k56pGYu7AUFJD9Pow==
+"@storybook/theming@5.1.0-alpha.32":
+  version "5.1.0-alpha.32"
+  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-5.1.0-alpha.32.tgz#4742b9ad2969017138e440222af5ae033a202871"
+  integrity sha512-2BcOtxIZK3daKwmUyhlVpEXYDFp0rBB2GPoLF3CODOhF7wAmxjia46Amg7Ch82EqhstRko8geBhgJcHsD0OhqA==
+  dependencies:
+    "@emotion/core" "^10.0.9"
+    "@emotion/styled" "^10.0.7"
+    "@storybook/client-logger" "5.1.0-alpha.32"
+    common-tags "^1.8.0"
+    core-js "^2.6.5"
+    deep-object-diff "^1.1.0"
+    emotion-theming "^10.0.9"
+    global "^4.3.2"
+    lodash.isequal "^4.5.0"
+    lodash.mergewith "^4.6.1"
+    memoizerific "^1.11.3"
+    polished "^3.0.0"
+    prop-types "^15.7.2"
+    react-inspector "^2.3.1"
+
+"@storybook/ui@5.1.0-alpha.32":
+  version "5.1.0-alpha.32"
+  resolved "https://registry.yarnpkg.com/@storybook/ui/-/ui-5.1.0-alpha.32.tgz#2fdba3555e3ea33f9843bb3406db79115212e3f0"
+  integrity sha512-C33Mq4lSMGRSQWKWKyKjljXatsvGXzAAjknhVUWWC5Z9CBeFoYfvvfvcovdO3IGoTMwifzr5YqWGqcF2OaiRKg==
+  dependencies:
+    "@storybook/addons" "5.1.0-alpha.32"
+    "@storybook/api" "5.1.0-alpha.32"
+    "@storybook/client-logger" "5.1.0-alpha.32"
+    "@storybook/components" "5.1.0-alpha.32"
+    "@storybook/core-events" "5.1.0-alpha.32"
+    "@storybook/router" "5.1.0-alpha.32"
+    "@storybook/theming" "5.1.0-alpha.32"
+    core-js "^2.6.5"
+    fast-deep-equal "^2.0.1"
+    fuse.js "^3.4.4"
+    global "^4.3.2"
+    lodash.debounce "^4.0.8"
+    lodash.isequal "^4.5.0"
+    lodash.mergewith "^4.6.1"
+    lodash.pick "^4.4.0"
+    markdown-to-jsx "^6.9.3"
+    memoizerific "^1.11.3"
+    polished "^3.0.0"
+    prop-types "^15.7.2"
+    qs "^6.6.0"
+    react "^16.8.4"
+    react-dom "^16.8.4"
+    react-draggable "^3.1.1"
+    react-helmet-async "^0.2.0"
+    react-hotkeys "2.0.0-pre4"
+    react-resize-detector "^4.0.5"
+    recompose "^0.30.0"
+    semver "^5.6.0"
+    store2 "^2.7.1"
+    telejson "^2.1.1"
+    util-deprecate "^1.0.2"
 
 "@svgr/babel-plugin-add-jsx-attribute@^4.2.0":
   version "4.2.0"
@@ -3505,6 +4122,11 @@
   resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a"
   integrity sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA==
 
+"@types/babel-types@*", "@types/babel-types@^7.0.0":
+  version "7.0.7"
+  resolved "https://registry.yarnpkg.com/@types/babel-types/-/babel-types-7.0.7.tgz#667eb1640e8039436028055737d2b9986ee336e3"
+  integrity sha512-dBtBbrc+qTHy1WdfHYjBwRln4+LWqASWakLHsWHR2NWHIFkv4W3O070IGoGLEBrJBvct3r0L1BUPuvURi7kYUQ==
+
 "@types/babel__core@^7.1.0":
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.2.tgz#608c74f55928033fce18b99b213c16be4b3d114f"
@@ -3538,6 +4160,13 @@
   dependencies:
     "@babel/types" "^7.3.0"
 
+"@types/babylon@^6.16.2":
+  version "6.16.5"
+  resolved "https://registry.yarnpkg.com/@types/babylon/-/babylon-6.16.5.tgz#1c5641db69eb8cdf378edd25b4be7754beeb48b4"
+  integrity sha512-xH2e58elpj1X4ynnKp9qSnWlsRTIs6n3tgLGNfwAGHwePw0mulHQllV34n0T25uYSu1k0hRKkWXF890B1yS47w==
+  dependencies:
+    "@types/babel-types" "*"
+
 "@types/cheerio@*":
   version "0.22.11"
   resolved "https://registry.yarnpkg.com/@types/cheerio/-/cheerio-0.22.11.tgz#61c0facf9636d14ba5f77fc65ed8913aa845d717"
@@ -4358,6 +4987,13 @@ acorn-dynamic-import@^4.0.0:
   resolved "https://registry.yarnpkg.com/acorn-dynamic-import/-/acorn-dynamic-import-4.0.0.tgz#482210140582a36b83c3e342e1cfebcaa9240948"
   integrity sha512-d3OEjQV4ROpoflsnUA8HozoIR504TFxNivYEUi6uwz0IYhBkTDXGuWlNdMtybRt3nqVx/L6XqMt0FxkXuWKZhw==
 
+acorn-globals@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-3.1.0.tgz#fd8270f71fbb4996b004fa880ee5d46573a731bf"
+  integrity sha1-/YJw9x+7SZawBPqIDuXUZXOnMb8=
+  dependencies:
+    acorn "^4.0.4"
+
 acorn-globals@^4.1.0, acorn-globals@^4.3.0:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-4.3.2.tgz#4e2c2313a597fd589720395f6354b41cd5ec8006"
@@ -4393,11 +5029,16 @@ acorn-walk@^6.0.1, acorn-walk@^6.1.1:
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-6.1.1.tgz#d363b66f5fac5f018ff9c3a1e7b6f8e310cc3913"
   integrity sha512-OtUw6JUTgxA2QoqqmrmQ7F2NYqiBPi/L2jqHyFtllhOUvXYQXf0Z1CYUinIfyT4bTCGmrA7gX9FvHA81uzCoVw==
 
-acorn@^3.0.4:
+acorn@^3.0.4, acorn@^3.1.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
   integrity sha1-ReN/s56No/JbruP/U2niu18iAXo=
 
+acorn@^4.0.4, acorn@~4.0.2:
+  version "4.0.13"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787"
+  integrity sha1-EFSVrlNh1pe9GVyCUZLhrX8lN4c=
+
 acorn@^5.0.0, acorn@^5.2.1, acorn@^5.5.0, acorn@^5.5.3, acorn@^5.6.2:
   version "5.7.3"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.3.tgz#67aa231bf8812974b85235a96771eb6bd07ea279"
@@ -4521,6 +5162,15 @@ ajv@^6.1.0, ajv@^6.5.5, ajv@^6.9.1:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
+align-text@^0.1.1, align-text@^0.1.3:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/align-text/-/align-text-0.1.4.tgz#0cd90a561093f35d0a99256c22b7069433fad117"
+  integrity sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=
+  dependencies:
+    kind-of "^3.0.2"
+    longest "^1.0.1"
+    repeat-string "^1.5.2"
+
 alphanum-sort@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
@@ -4645,7 +5295,7 @@ ansi-styles@^3.0.0, ansi-styles@^3.2.0, ansi-styles@^3.2.1:
   dependencies:
     color-convert "^1.9.0"
 
-ansi-to-html@^0.6.11:
+ansi-to-html@^0.6.11, ansi-to-html@^0.6.4:
   version "0.6.11"
   resolved "https://registry.yarnpkg.com/ansi-to-html/-/ansi-to-html-0.6.11.tgz#5093fc4962186c0e9343dec572a4f71abdc93439"
   integrity sha512-88XZtrcwrfkyn6fGstHnkaF1kl7hGtNCYh4vSmItgEV+6JnQHryDBf7udF4f2RhTRQmYvJvPcTtqgaqrxzc9oA==
@@ -5023,7 +5673,7 @@ ast-types@0.11.7:
   resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.11.7.tgz#f318bf44e339db6a320be0009ded64ec1471f46c"
   integrity sha512-2mP3TwtkY/aTv5X3ZsMpNAbOnyoC/aMJwJSoaELPkHId0nSQgFcnU4dRW3isxiz7+zBexk0ym3WNVjMiQBnJSw==
 
-ast-types@0.12.4:
+ast-types@0.12.4, ast-types@^0.12.2:
   version "0.12.4"
   resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.12.4.tgz#71ce6383800f24efc9a1a3308f3a6e420a0974d1"
   integrity sha512-ky/YVYCbtVAS8TdMIaTiPFHwEpRB5z1hctepJplTr3UW5q8TDrpIMCILyk8pmLxGtn2KCtC/lSn7zOsaI7nzDw==
@@ -5608,6 +6258,14 @@ babel-plugin-jsx-v-model@^2.0.1:
     html-tags "^2.0.0"
     svg-tags "^1.0.0"
 
+babel-plugin-macros@2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.5.0.tgz#01f4d3b50ed567a67b80a30b9da066e94f4097b6"
+  integrity sha512-BWw0lD0kVZAXRD3Od1kMrdmfudqzDzYv2qrN3l2ISR1HVp1EgLKfbOrYV9xmY5k3qx3RIu5uPAUZZZHpo0o5Iw==
+  dependencies:
+    cosmiconfig "^5.0.5"
+    resolve "^1.8.1"
+
 babel-plugin-macros@2.5.1, babel-plugin-macros@^2.0.0, babel-plugin-macros@^2.4.5:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.5.1.tgz#4a119ac2c2e19b458c259b9accd7ee34fd57ec6f"
@@ -6316,6 +6974,31 @@ babel-preset-rax@^1.0.0-beta.0:
     "@babel/plugin-transform-react-jsx-self" "^7.0.0"
     "@babel/plugin-transform-react-jsx-source" "^7.0.0"
 
+babel-preset-react-app@^7.0.2:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/babel-preset-react-app/-/babel-preset-react-app-7.0.2.tgz#d01ae973edc93b9f1015cb0236dd55889a584308"
+  integrity sha512-mwCk/u2wuiO8qQqblN5PlDa44taY0acq7hw6W+a70W522P7a9mIcdggL1fe5/LgAT7tqCq46q9wwhqaMoYKslQ==
+  dependencies:
+    "@babel/core" "7.2.2"
+    "@babel/plugin-proposal-class-properties" "7.3.0"
+    "@babel/plugin-proposal-decorators" "7.3.0"
+    "@babel/plugin-proposal-object-rest-spread" "7.3.2"
+    "@babel/plugin-syntax-dynamic-import" "7.2.0"
+    "@babel/plugin-transform-classes" "7.2.2"
+    "@babel/plugin-transform-destructuring" "7.3.2"
+    "@babel/plugin-transform-flow-strip-types" "7.2.3"
+    "@babel/plugin-transform-react-constant-elements" "7.2.0"
+    "@babel/plugin-transform-react-display-name" "7.2.0"
+    "@babel/plugin-transform-runtime" "7.2.0"
+    "@babel/preset-env" "7.3.1"
+    "@babel/preset-react" "7.0.0"
+    "@babel/preset-typescript" "7.1.0"
+    "@babel/runtime" "7.3.1"
+    babel-loader "8.0.5"
+    babel-plugin-dynamic-import-node "2.2.0"
+    babel-plugin-macros "2.5.0"
+    babel-plugin-transform-react-remove-prop-types "0.4.24"
+
 babel-preset-react-app@^9.0.0:
   version "9.0.0"
   resolved "https://registry.yarnpkg.com/babel-preset-react-app/-/babel-preset-react-app-9.0.0.tgz#703108142bc9dd7173bde6a1a0138a762abc76f9"
@@ -6364,7 +7047,7 @@ babel-register@^6.26.0:
     mkdirp "^0.5.1"
     source-map-support "^0.4.15"
 
-babel-runtime@6, babel-runtime@6.26.0, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.23.0, babel-runtime@^6.26.0:
+babel-runtime@6, babel-runtime@6.26.0, babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.23.0, babel-runtime@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
   integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4=
@@ -6403,7 +7086,7 @@ babel-traverse@^6.18.0, babel-traverse@^6.19.0, babel-traverse@^6.24.1, babel-tr
     invariant "^2.2.2"
     lodash "^4.17.4"
 
-babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.24.1, babel-types@^6.26.0:
+babel-types@^6.15.0, babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.24.1, babel-types@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497"
   integrity sha1-o7Bz+Uq0nrb6Vc1lInozQ4BjJJc=
@@ -6413,6 +7096,15 @@ babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.24.1, babel-types@^6.26
     lodash "^4.17.4"
     to-fast-properties "^1.0.3"
 
+babylon-walk@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/babylon-walk/-/babylon-walk-1.0.2.tgz#3b15a5ddbb482a78b4ce9c01c8ba181702d9d6ce"
+  integrity sha1-OxWl3btIKni0zpwByLoYFwLZ1s4=
+  dependencies:
+    babel-runtime "^6.11.6"
+    babel-types "^6.15.0"
+    lodash.clone "^4.5.0"
+
 babylon@7.0.0-beta.44:
   version "7.0.0-beta.44"
   resolved "https://registry.npmjs.org/babylon/-/babylon-7.0.0-beta.44.tgz#89159e15e6e30c5096e22d738d8c0af8a0e8ca1d"
@@ -6576,6 +7268,11 @@ bindings@^1.2.1:
   dependencies:
     file-uri-to-path "1.0.0"
 
+bindings@~1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/bindings/-/bindings-1.2.1.tgz#14ad6113812d2d37d72e67b4cacb4bb726505f11"
+  integrity sha1-FK1hE4EtLTfXLme0ystLtyZQXxE=
+
 bl@^1.0.0:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/bl/-/bl-1.2.2.tgz#a160911717103c07410cef63ef51b397c025af9c"
@@ -6779,6 +7476,16 @@ braces@^3.0.1:
   dependencies:
     fill-range "^7.0.1"
 
+brfs@^1.2.0:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/brfs/-/brfs-1.6.1.tgz#b78ce2336d818e25eea04a0947cba6d4fb8849c3"
+  integrity sha512-OfZpABRQQf+Xsmju8XE9bDjs+uU4vLREGolP7bDgcpsI17QREyZ4Bl+2KLxxx1kCgA0fAIhKQBaBYh+PEcCqYQ==
+  dependencies:
+    quote-stream "^1.0.1"
+    resolve "^1.1.5"
+    static-module "^2.2.0"
+    through2 "^2.0.0"
+
 broccoli-amd-funnel@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/broccoli-amd-funnel/-/broccoli-amd-funnel-2.0.1.tgz#dbdbfd28841731342d538126567c25bea3f15310"
@@ -7418,6 +8125,15 @@ browserslist@^4.0.0, browserslist@^4.1.1, browserslist@^4.3.4, browserslist@^4.4
     electron-to-chromium "^1.3.137"
     node-releases "^1.1.21"
 
+browserslist@^4.1.0:
+  version "4.6.3"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.6.3.tgz#0530cbc6ab0c1f3fc8c819c72377ba55cf647f05"
+  integrity sha512-CNBqTCq22RKM8wKJNowcqihHJ4SkI8CGeK7KOR9tPboXUuS5Zk5lQgzzTbs4oxD8x+6HUshZUa2OyNI9lR93bQ==
+  dependencies:
+    caniuse-lite "^1.0.30000975"
+    electron-to-chromium "^1.3.164"
+    node-releases "^1.1.23"
+
 browserstack@^1.5.1:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/browserstack/-/browserstack-1.5.2.tgz#17d8bb76127a1cc0ea416424df80d218f803673f"
@@ -7705,6 +8421,11 @@ camelcase-keys@^4.0.0:
     map-obj "^2.0.0"
     quick-lru "^1.0.0"
 
+camelcase@^1.0.2:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"
+  integrity sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk=
+
 camelcase@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f"
@@ -7757,6 +8478,11 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000844, caniuse-lite@^1.0.30000929, can
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000974.tgz#b7afe14ee004e97ce6dc73e3f878290a12928ad8"
   integrity sha512-xc3rkNS/Zc3CmpMKuczWEdY2sZgx09BkAxfvkxlAEBTqcMHeL8QnPqhKse+5sRTi3nrw2pJwToD2WvKn1Uhvww==
 
+caniuse-lite@^1.0.30000975:
+  version "1.0.30000978"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000978.tgz#1e3346c27fc46bce9ac1ccd77863153a263dde56"
+  integrity sha512-H6gK6kxUzG6oAwg/Jal279z8pHw0BzrpZfwo/CA9FFm/vA0l8IhDfkZtepyJNE2Y4V6Dp3P3ubz6czby1/Mgsw==
+
 canonical-path@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/canonical-path/-/canonical-path-1.0.0.tgz#fcb470c23958def85081856be7a86e904f180d1d"
@@ -7804,6 +8530,14 @@ ccount@^1.0.0, ccount@^1.0.3:
   resolved "https://registry.yarnpkg.com/ccount/-/ccount-1.0.4.tgz#9cf2de494ca84060a2a8d2854edd6dfb0445f386"
   integrity sha512-fpZ81yYfzentuieinmGnphk0pLkOTMm6MZdVqwd77ROvhko6iujLNGrHH5E7utq3ygWklwfmwuG+A7P+NpqT6w==
 
+center-align@^0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/center-align/-/center-align-0.1.3.tgz#aa0d32629b6ee972200411cbd4461c907bc2b7ad"
+  integrity sha1-qg0yYptu6XIgBBHL1EYckHvCt60=
+  dependencies:
+    align-text "^0.1.3"
+    lazy-cache "^1.0.3"
+
 chai@^3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/chai/-/chai-3.5.0.tgz#4d02637b067fe958bdbfdd3a40ec56fef7373247"
@@ -7891,6 +8625,13 @@ character-entities@^1.0.0:
   resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-1.2.3.tgz#bbed4a52fe7ef98cc713c6d80d9faa26916d54e6"
   integrity sha512-yB4oYSAa9yLcGyTbB4ItFwHw43QHdH129IJ5R+WvxOkWlyFnR5FAaBNnUq4mcxsTVZGh28bHoeTHMKXH1wZf3w==
 
+character-parser@^2.1.1:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/character-parser/-/character-parser-2.2.0.tgz#c7ce28f36d4bcd9744e5ffc2c5fcde1c73261fc0"
+  integrity sha1-x84o821LzZdE5f/CxfzeHHMmH8A=
+  dependencies:
+    is-regex "^1.0.3"
+
 character-reference-invalid@^1.0.0:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.3.tgz#1647f4f726638d3ea4a750cf5d1975c1c7919a85"
@@ -8108,7 +8849,7 @@ cli-cursor@^2.0.0, cli-cursor@^2.1.0:
   dependencies:
     restore-cursor "^2.0.0"
 
-cli-spinners@^1.0.1:
+cli-spinners@^1.0.1, cli-spinners@^1.1.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-1.3.1.tgz#002c1990912d0d59580c93bd36c056de99e4259a"
   integrity sha512-1QL4544moEsDVH9T/l6Cemov/37iv1RtoKf7NJ04A60+4MREXNfx/QvavbH6QoGdsD4N4Mwy49cmaINR/o2mdg==
@@ -8157,6 +8898,15 @@ clipboard@^2.0.0:
     select "^1.1.2"
     tiny-emitter "^2.0.0"
 
+cliui@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1"
+  integrity sha1-S0dXYP+AJkx2LDoXGQMukcf+oNE=
+  dependencies:
+    center-align "^0.1.1"
+    right-align "^0.1.1"
+    wordwrap "0.0.2"
+
 cliui@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-3.2.0.tgz#120601537a916d29940f934da3b48d585a39213d"
@@ -8213,6 +8963,11 @@ clone@^2.0.0, clone@^2.1.0, clone@^2.1.1, clone@^2.1.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
   integrity sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=
 
+clones@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/clones/-/clones-1.2.0.tgz#b34c872045446a9f264ccceb7731bca05c529b71"
+  integrity sha512-FXDYw4TjR8wgPZYui2LeTqWh1BLpfQ8lB6upMtlpDF6WlOOxghmTTxWyngdKTgozqBgKnHbTVwTE+hOHqAykuQ==
+
 closest-file-data@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/closest-file-data/-/closest-file-data-0.1.4.tgz#975f87c132f299d24a0375b9f63ca3fb88f72b3a"
@@ -8405,6 +9160,11 @@ comma-separated-tokens@^1.0.0:
   resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-1.0.7.tgz#419cd7fb3258b1ed838dc0953167a25e152f5b59"
   integrity sha512-Jrx3xsP4pPv4AwJUDWY9wOXGtwPXARej6Xd99h4TUGotmf8APuquKMpK+dnD3UgyxK7OEWaisjZz+3b5jtL6xQ==
 
+command-exists@^1.2.6:
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/command-exists/-/command-exists-1.2.8.tgz#715acefdd1223b9c9b37110a149c6392c2852291"
+  integrity sha512-PM54PkseWbiiD/mMsbvW351/u+dafwTJ0ye2qB60G1aGQP9j3xK2gmMDc+R34L3nDtx4qMCitXT75mkbkGJDLw==
+
 commander@2.17.1, commander@2.17.x:
   version "2.17.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
@@ -8569,7 +9329,7 @@ concurrently@^4.0.1:
     tree-kill "^1.1.0"
     yargs "^12.0.1"
 
-config-chain@^1.1.11:
+config-chain@^1.1.11, config-chain@^1.1.12:
   version "1.1.12"
   resolved "https://registry.yarnpkg.com/config-chain/-/config-chain-1.1.12.tgz#0fde8d091200eb5e808caf25fe618c02f48e4efa"
   integrity sha512-a1eOIcu8+7lUInge4Rpf/n4Krkf3Dd9lqhljRzII1/Zno/kRtUWnznPO3jOKBmTEktkt3fkxisUcivoj0ebzoA==
@@ -8647,6 +9407,16 @@ constant-case@^2.0.0:
     snake-case "^2.1.0"
     upper-case "^1.1.1"
 
+constantinople@^3.0.1, constantinople@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/constantinople/-/constantinople-3.1.2.tgz#d45ed724f57d3d10500017a7d3a889c1381ae647"
+  integrity sha512-yePcBqEFhLOqSBtwYOGGS1exHo/s1xjekXiinh4itpNQGCu4KA1euPh1fg07N2wMITZXQkBz75Ntdt1ctGZouw==
+  dependencies:
+    "@types/babel-types" "^7.0.0"
+    "@types/babylon" "^6.16.2"
+    babel-types "^6.26.0"
+    babylon "^6.18.0"
+
 constants-browserify@^1.0.0, constants-browserify@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
@@ -9081,7 +9851,7 @@ cross-spawn-async@^2.1.1:
     lru-cache "^4.0.0"
     which "^1.2.8"
 
-cross-spawn@6.0.5, cross-spawn@^6.0.0, cross-spawn@^6.0.5:
+cross-spawn@6.0.5, cross-spawn@^6.0.0, cross-spawn@^6.0.4, cross-spawn@^6.0.5:
   version "6.0.5"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
   integrity sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==
@@ -9214,6 +9984,18 @@ css-loader@^3.0.0:
     postcss-value-parser "^4.0.0"
     schema-utils "^1.0.0"
 
+css-modules-loader-core@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/css-modules-loader-core/-/css-modules-loader-core-1.1.0.tgz#5908668294a1becd261ae0a4ce21b0b551f21d16"
+  integrity sha1-WQhmgpShvs0mGuCkziGwtVHyHRY=
+  dependencies:
+    icss-replace-symbols "1.1.0"
+    postcss "6.0.1"
+    postcss-modules-extract-imports "1.1.0"
+    postcss-modules-local-by-default "1.2.0"
+    postcss-modules-scope "1.1.0"
+    postcss-modules-values "1.3.0"
+
 css-parse@1.7.x:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/css-parse/-/css-parse-1.7.0.tgz#321f6cf73782a6ff751111390fc05e2c657d8c9b"
@@ -9395,7 +10177,7 @@ cssnano-util-same-parent@^4.0.0:
   resolved "https://registry.yarnpkg.com/cssnano-util-same-parent/-/cssnano-util-same-parent-4.0.1.tgz#574082fb2859d2db433855835d9a8456ea18bbf3"
   integrity sha512-WcKx5OY+KoSIAxBW6UBBRay1U6vkYheCdjyVNDm85zt5K9mHoGOfsOsqIszfAqrQQFIIKgjh2+FDgIj/zsl21Q==
 
-cssnano@^4.1.0:
+cssnano@^4.0.0, cssnano@^4.1.0, cssnano@^4.1.9:
   version "4.1.10"
   resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-4.1.10.tgz#0ac41f0b13d13d465487e111b778d42da631b8b2"
   integrity sha512-5wny+F6H4/8RgNlaqab4ktc3e0/blKutmq8yNlBFXA//nSFFAqAngjNVRzUvCgYROULmZZUoosL/KSoZo5aUaQ==
@@ -9553,6 +10335,14 @@ de-indent@^1.0.2:
   resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
   integrity sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=
 
+deasync@^0.1.14:
+  version "0.1.15"
+  resolved "https://registry.yarnpkg.com/deasync/-/deasync-0.1.15.tgz#788c4bbe6d32521233b28d23936de1bbadd2e112"
+  integrity sha512-pxMaCYu8cQIbGkA4Y1R0PLSooPIpH1WgFBLeJ+zLxQgHfkZG86ViJSmZmONSjZJ/R3NjwkMcIWZAzpLB2G9/CA==
+  dependencies:
+    bindings "~1.2.1"
+    node-addon-api "^1.6.0"
+
 debug@*, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@~4.1.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
@@ -9601,7 +10391,7 @@ decamelize-keys@^1.0.0:
     decamelize "^1.1.0"
     map-obj "^1.0.0"
 
-decamelize@^1.1.0, decamelize@^1.1.1, decamelize@^1.1.2, decamelize@^1.2.0:
+decamelize@^1.0.0, decamelize@^1.1.0, decamelize@^1.1.1, decamelize@^1.1.2, decamelize@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
   integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
@@ -9625,6 +10415,11 @@ decompress-response@^3.3.0:
   dependencies:
     mimic-response "^1.0.0"
 
+dedent-tabs@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/dedent-tabs/-/dedent-tabs-0.8.0.tgz#e8e37e2a84f8d305bc714c2f1121fee873170db6"
+  integrity sha512-YKS/ItX7e9+TdLaUiwht1IxkFDbQEHNJSTruwvrwODRXFov8X7C7iCwrUynrsOh1+CkwmjFK51P5d1HsrI5VJA==
+
 dedent@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.6.0.tgz#0e6da8f0ce52838ef5cec5c8f9396b0c1b64a3cb"
@@ -10050,6 +10845,11 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
+doctypes@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/doctypes/-/doctypes-1.1.0.tgz#ea80b106a87538774e8a3a4a5afe293de489e0a9"
+  integrity sha1-6oCxBqh1OHdOijpKWv4pPeSJ4Kk=
+
 dom-converter@^0.2:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"
@@ -10166,7 +10966,7 @@ dotenv-defaults@^1.0.2:
   dependencies:
     dotenv "^6.2.0"
 
-dotenv-expand@4.2.0:
+dotenv-expand@4.2.0, dotenv-expand@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/dotenv-expand/-/dotenv-expand-4.2.0.tgz#def1f1ca5d6059d24a766e587942c21106ce1275"
   integrity sha1-3vHxyl1gWdJKdm5YeULCEQbOEnU=
@@ -10183,11 +10983,16 @@ dotenv-webpack@^1.7.0:
   dependencies:
     dotenv-defaults "^1.0.2"
 
-dotenv@6.2.0, dotenv@^6.2.0:
+dotenv@6.2.0, dotenv@^6.0.0, dotenv@^6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-6.2.0.tgz#941c0410535d942c8becf28d3f357dbd9d476064"
   integrity sha512-HygQCKUBSFl8wKQZBSemMywRWcEDNidvNbjGVyZu3nbZ8qq9ubiPoGLMdRDpfSrpkkm9BXYFkpKxxFX38o/76w==
 
+dotenv@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-5.0.1.tgz#a5317459bd3d79ab88cff6e44057a6a3fbb1fcef"
+  integrity sha512-4As8uPrjfwb7VXC+WnLCbXK7y+Ueb2B3zgNCePYfhxS1PYeaO1YTeplffTEcbfLhvFNGLAz90VvJs9yomG7bow==
+
 dotenv@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.0.0.tgz#ed310c165b4e8a97bb745b0a9d99c31bda566440"
@@ -10214,7 +11019,7 @@ driver-weex@^0.6.5:
   dependencies:
     style-unit "^0.6.5"
 
-duplexer2@^0.1.2, duplexer2@~0.1.0, duplexer2@~0.1.2:
+duplexer2@^0.1.2, duplexer2@~0.1.0, duplexer2@~0.1.2, duplexer2@~0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.1.4.tgz#8b12dab878c0d69e3e7891051662a32fc6bddcc1"
   integrity sha1-ixLauHjA1p4+eJEFFmKjL8a93ME=
@@ -10271,6 +11076,16 @@ editions@^1.1.1:
   resolved "https://registry.yarnpkg.com/editions/-/editions-1.3.4.tgz#3662cb592347c3168eb8e498a0ff73271d67f50b"
   integrity sha512-gzao+mxnYDzIysXKMQi/+M1mjy/rjestjg6OPoYTtI+3Izp23oiGZitsl9lPDPiTGXbcSIk1iJWhliSaglxnUg==
 
+editorconfig@^0.15.3:
+  version "0.15.3"
+  resolved "https://registry.yarnpkg.com/editorconfig/-/editorconfig-0.15.3.tgz#bef84c4e75fb8dcb0ce5cee8efd51c15999befc5"
+  integrity sha512-M9wIMFx96vq0R4F+gRpY3o2exzb8hEj/n9S8unZtHSvYjibBp/iMufSzvmOcV/laG0ZtuTVGtiJggPOSW2r93g==
+  dependencies:
+    commander "^2.19.0"
+    lru-cache "^4.1.5"
+    semver "^5.6.0"
+    sigmund "^1.0.1"
+
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -10291,6 +11106,11 @@ electron-to-chromium@^1.3.137:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.148.tgz#5796c0d9eb0358d397163413b90bf376c5d8bf08"
   integrity sha512-nuCOlXNlGMQmdzihIPGm2K3Yf3H1hke/1rK381i02pH8wNliJU9hVNnOi/xjmxt+mjABd/BzufP5nPHWKshLWA==
 
+electron-to-chromium@^1.3.164:
+  version "1.3.179"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.179.tgz#908efa2732ca07ede53bbbb25bb6684623fbe069"
+  integrity sha512-hRjlOdKImgIRicKYRY6hHbUMrX2NJYBrIusTepwPt/apcabuzrzhXpkkWu7elWdTZEQwKV6BfX8EvWIBWLCNQw==
+
 elegant-spinner@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/elegant-spinner/-/elegant-spinner-1.0.1.tgz#db043521c95d7e303fd8f345bedc3349cfb0729e"
@@ -11045,6 +11865,18 @@ escodegen@^1.10.0, escodegen@^1.11.0, escodegen@^1.8.1, escodegen@^1.9.1:
   optionalDependencies:
     source-map "~0.6.1"
 
+escodegen@~1.9.0:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.9.1.tgz#dbae17ef96c8e4bedb1356f4504fa4cc2f7cb7e2"
+  integrity sha512-6hTjO1NAWkHnDk3OqQ4YrCuwwmGHL9S3nPlzBOUG/R44rda3wLNrfvQ5fkSGjyhHFKM7ALPKcKGrwvCLe0lC7Q==
+  dependencies:
+    esprima "^3.1.3"
+    estraverse "^4.2.0"
+    esutils "^2.0.2"
+    optionator "^0.8.1"
+  optionalDependencies:
+    source-map "~0.6.1"
+
 eslint-config-airbnb-base@^13.1.0:
   version "13.1.0"
   resolved "https://registry.yarnpkg.com/eslint-config-airbnb-base/-/eslint-config-airbnb-base-13.1.0.tgz#b5a1b480b80dfad16433d6c4ad84e6605052c05c"
@@ -12185,6 +13017,16 @@ extsprintf@^1.2.0:
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
   integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8=
 
+falafel@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/falafel/-/falafel-2.1.0.tgz#96bb17761daba94f46d001738b3cedf3a67fe06c"
+  integrity sha1-lrsXdh2rqU9G0AFzizzt86Z/4Gw=
+  dependencies:
+    acorn "^5.0.0"
+    foreach "^2.0.5"
+    isarray "0.0.1"
+    object-keys "^1.0.6"
+
 fancy-log@^1.3.2:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/fancy-log/-/fancy-log-1.3.3.tgz#dbc19154f558690150a23953a0adbd035be45fc7"
@@ -12223,7 +13065,7 @@ fast-diff@^1.1.2:
   resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
   integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
 
-fast-glob@^2.0.2:
+fast-glob@^2.0.2, fast-glob@^2.2.2:
   version "2.2.7"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-2.2.7.tgz#6953857c3afa475fff92ee6015d52da70a4cd39d"
   integrity sha512-g1KuQwHOZAmOZMuBtHdxDtju+T2RT8jgCC9aANsbpdiDDTSnjgfuVsIBNKbUeJI3oKMRExcfNDtJl4OhbffMsw==
@@ -12463,7 +13305,7 @@ filename-regex@^2.0.0:
   resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.1.tgz#c1c4b9bee3e09725ddb106b75c1e301fe2f18b26"
   integrity sha1-wcS5vuPglyXdsQa3XB4wH+LxiyY=
 
-filesize@3.6.1, filesize@^3.6.1:
+filesize@3.6.1, filesize@^3.6.0, filesize@^3.6.1:
   version "3.6.1"
   resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.6.1.tgz#090bb3ee01b6f801a8a8be99d31710b3422bb317"
   integrity sha512-7KjR1vv6qnicaPMi1iiTcI85CyYwRO/PSFCu6SvqL8jN2Wjt/NIYQTFtFs7fSDCYOstUkEWIQGFUg5YZQfjlcg==
@@ -12724,11 +13566,29 @@ for-own@^1.0.0:
   dependencies:
     for-in "^1.0.1"
 
+foreach@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
+  integrity sha1-C+4AUBiusmDQo6865ljdATbsG5k=
+
 forever-agent@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
   integrity sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=
 
+fork-ts-checker-webpack-plugin@1.0.0-alpha.6:
+  version "1.0.0-alpha.6"
+  resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-1.0.0-alpha.6.tgz#826c57048addf8a3253853615c84f3ff7beeaf45"
+  integrity sha512-s/V+58nLrUjuXyzYk8AL11XG8bxIirTbafDLMn26sL59HQx8QvvsRTqOkhq4MV0coIkog1jZuH/E9Abm8zFZ2g==
+  dependencies:
+    babel-code-frame "^6.22.0"
+    chalk "^2.4.1"
+    chokidar "^2.0.4"
+    micromatch "^3.1.10"
+    minimatch "^3.0.4"
+    semver "^5.6.0"
+    tapable "^1.0.0"
+
 fork-ts-checker-webpack-plugin@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-1.1.1.tgz#caf2a210778fb1e171b6993ca0a40f9b6589e3b7"
@@ -13556,6 +14416,14 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.3
   resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
   integrity sha1-TK+tdrxi8C+gObL5Tpo906ORpyU=
 
+grapheme-breaker@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/grapheme-breaker/-/grapheme-breaker-0.3.2.tgz#5b9e6b78c3832452d2ba2bb1cb830f96276410ac"
+  integrity sha1-W55reMODJFLSuiuxy4MPlidkEKw=
+  dependencies:
+    brfs "^1.2.0"
+    unicode-trie "^0.3.1"
+
 graphiql@^0.13.0:
   version "0.13.0"
   resolved "https://registry.yarnpkg.com/graphiql/-/graphiql-0.13.0.tgz#8fcbfd25f73d84806ba6d3e8c96eac0a5bec8ab7"
@@ -13739,6 +14607,11 @@ has-cors@1.1.0:
   resolved "https://registry.yarnpkg.com/has-cors/-/has-cors-1.1.0.tgz#5e474793f7ea9843d1bb99c23eef49ff126fff39"
   integrity sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk=
 
+has-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
+  integrity sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=
+
 has-flag@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-2.0.0.tgz#e8207af1cc7b30d446cc70b734b5e8be18f88d51"
@@ -13968,6 +14841,11 @@ hex-color-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
   integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
 
+highlight.js@^9.12.0:
+  version "9.15.8"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.15.8.tgz#f344fda123f36f1a65490e932cf90569e4999971"
+  integrity sha512-RrapkKQWwE+wKdF73VsOa2RQdIoO3mxwJ4P8mhbI6KYJUraUHRKM5w5zQQKXNk0xNL4UVRdulV9SBJcmzJNzVA==
+
 highlight.js@~9.12.0:
   version "9.12.0"
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.12.0.tgz#e6d9dbe57cbefe60751f02af336195870c90c01e"
@@ -14102,6 +14980,11 @@ 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"
@@ -14163,7 +15046,21 @@ htmljs-parser@^2.6.5:
     char-props "^0.1.5"
     complain "^1.0.0"
 
-htmlparser2@^3.10.0, htmlparser2@^3.3.0, htmlparser2@^3.9.1:
+htmlnano@^0.2.2:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/htmlnano/-/htmlnano-0.2.3.tgz#ff654a641e8006c893bdd9ad4988ee4ab664449a"
+  integrity sha512-iS6T3J5gk2wInodbtMUyAU8sLYJOhuWDnIEd8lFRoHTypVGgawPHFEx2ZIK/XTErtDfwHBsrXeCwHAP8bdoSWw==
+  dependencies:
+    cssnano "^4.1.9"
+    normalize-html-whitespace "^0.2.0"
+    object-assign "^4.0.1"
+    posthtml "^0.11.3"
+    posthtml-render "^1.1.4"
+    svgo "^1.0.5"
+    terser "^3.16.1"
+    uncss "^0.16.2"
+
+htmlparser2@^3.10.0, htmlparser2@^3.3.0, htmlparser2@^3.9.1, htmlparser2@^3.9.2:
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.10.1.tgz#bd679dc3f59897b6a34bb10749c855bb53a9392f"
   integrity sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==
@@ -14200,7 +15097,7 @@ http-errors@1.6.3, http-errors@~1.6.2, http-errors@~1.6.3:
     setprototypeof "1.1.0"
     statuses ">= 1.4.0 < 2"
 
-http-errors@1.7.2, http-errors@^1.7.1, http-errors@^1.7.2, http-errors@~1.7.2:
+http-errors@1.7.2, http-errors@^1.7.1, http-errors@^1.7.2:
   version "1.7.2"
   resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.2.tgz#4f5029cf13239f31036e5b2e55292bcfbcc85c8f"
   integrity sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==
@@ -14211,6 +15108,17 @@ http-errors@1.7.2, http-errors@^1.7.1, http-errors@^1.7.2, http-errors@~1.7.2:
     statuses ">= 1.5.0 < 2"
     toidentifier "1.0.0"
 
+http-errors@~1.7.2:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.3.tgz#6c619e4f9c60308c38519498c14fbb10aacebb06"
+  integrity sha512-ZTTX0MWrsQ2ZAhA1cejAwDLycFsd7I7nVtnkT3Ol0aqodaKW+0CTZDQ1uBv5whptCnc8e8HeRRJxRs0kmm/Qfw==
+  dependencies:
+    depd "~1.1.2"
+    inherits "2.0.4"
+    setprototypeof "1.1.1"
+    statuses ">= 1.5.0 < 2"
+    toidentifier "1.0.0"
+
 http-parser-js@>=0.4.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.5.0.tgz#d65edbede84349d0dc30320815a15d39cc3cbbd8"
@@ -14331,7 +15239,7 @@ iconv-lite@0.4.24, iconv-lite@^0.4.17, iconv-lite@^0.4.24, iconv-lite@^0.4.4, ic
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
-icss-replace-symbols@^1.1.0:
+icss-replace-symbols@1.1.0, icss-replace-symbols@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz#06ea6f83679a7749e386cfe1fe812ae5db223ded"
   integrity sha1-Bupvg2ead0njhs/h/oEq5dsiPe0=
@@ -14544,6 +15452,11 @@ inherits@2.0.1:
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.1.tgz#b17d08d326b4423e568eff719f91b0b1cbdf69f1"
   integrity sha1-sX0I0ya0Qj5Wjv9xn5GwscvfafE=
 
+inherits@2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
+  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
+
 ini@1.3.5, ini@^1.3.2, ini@^1.3.4, ini@^1.3.5, ini@~1.3.0:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
@@ -14946,6 +15859,14 @@ is-equal-shallow@^0.1.3:
   dependencies:
     is-primitive "^2.0.0"
 
+is-expression@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-expression/-/is-expression-3.0.0.tgz#39acaa6be7fd1f3471dc42c7416e61c24317ac9f"
+  integrity sha1-Oayqa+f9HzRx3ELHQW5hwkMXrJ8=
+  dependencies:
+    acorn "~4.0.2"
+    object-assign "^4.0.1"
+
 is-extendable@^0.1.0, is-extendable@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
@@ -15033,6 +15954,13 @@ is-hidden@^1.0.1:
   resolved "https://registry.yarnpkg.com/is-hidden/-/is-hidden-1.1.2.tgz#6497d48ec5affc7da0f11a3c0dadceb6752e8edd"
   integrity sha512-kytBeNVW2QTIqZdJBDKIjP+EkUTzDT07rsc111w/gxqR6wK3ODkOswcpxgED6HU6t7fEhOxqojVZ2a2kU9rj+A==
 
+is-html@^1.0.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"
@@ -15166,7 +16094,7 @@ is-primitive@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-primitive/-/is-primitive-2.0.0.tgz#207bab91638499c07b2adf240a41a87210034575"
   integrity sha1-IHurkWOEmcB7Kt8kCkGochADRXU=
 
-is-promise@^2.1.0:
+is-promise@^2.0.0, is-promise@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.1.0.tgz#79a2a9ece7f096e80f36d2b2f3bc16c1ff4bf3fa"
   integrity sha1-eaKp7OfwlugPNtKy87wWwf9L8/o=
@@ -15183,7 +16111,7 @@ is-reference@^1.1.0:
   dependencies:
     "@types/estree" "0.0.39"
 
-is-regex@^1.0.4:
+is-regex@^1.0.3, is-regex@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.4.tgz#5517489b547091b0930e095654ced25ee97e9491"
   integrity sha1-VRdIm1RwkbCTDglWVM7SXul+lJE=
@@ -15286,6 +16214,11 @@ is-upper-case@^1.1.0:
   dependencies:
     upper-case "^1.1.0"
 
+is-url@^1.2.2:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/is-url/-/is-url-1.2.4.tgz#04a4df46d28c4cff3d73d01ff06abeb318a1aa52"
+  integrity sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww==
+
 is-utf8@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
@@ -16117,11 +17050,27 @@ js-base64@^2.1.8:
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.5.1.tgz#1efa39ef2c5f7980bb1784ade4a8af2de3291121"
   integrity sha512-M7kLczedRMYX4L8Mdh4MzyAMM9O5osx+4FcOQuTvr3A9F2D9S5JXheN0ewNbrvK2UatkTRhL5ejGmGSjNMiZuw==
 
+js-beautify@^1.8.9:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/js-beautify/-/js-beautify-1.10.0.tgz#9753a13c858d96828658cd18ae3ca0e5783ea672"
+  integrity sha512-OMwf/tPDpE/BLlYKqZOhqWsd3/z2N3KOlyn1wsCRGFwViE8LOQTcDtathQvHvZc+q+zWmcNAbwKSC+iJoMaH2Q==
+  dependencies:
+    config-chain "^1.1.12"
+    editorconfig "^0.15.3"
+    glob "^7.1.3"
+    mkdirp "~0.5.1"
+    nopt "~4.0.1"
+
 js-levenshtein@^1.1.3:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/js-levenshtein/-/js-levenshtein-1.1.6.tgz#c6cee58eb3550372df8deb85fad5ce66ce01d59d"
   integrity sha512-X2BB11YZtrRqY4EnQcLX5Rh373zbK4alC1FW7D7MBhL2gtcC17cTnr6DmfHZeS0s2rTHjUTMMHfG7gO8SSdw+g==
 
+js-stringify@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/js-stringify/-/js-stringify-1.0.2.tgz#1736fddfd9724f28a3682adc6230ae7e4e9679db"
+  integrity sha1-Fzb939lyTyijaCrcYjCufk6Weds=
+
 js-tokens@^3.0.0, js-tokens@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
@@ -16169,7 +17118,7 @@ jscodeshift@^0.6.3:
     temp "^0.8.1"
     write-file-atomic "^2.3.0"
 
-jsdom@^11.5.1:
+jsdom@^11.3.0, jsdom@^11.5.1:
   version "11.12.0"
   resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-11.12.0.tgz#1a80d40ddd378a1de59656e9e6dc5a3ba8657bc8"
   integrity sha512-y8Px43oyiBM13Zc1z780FrfNLJCXTL40EWlty/LXUtcjykRBNgLlCjWXpfSPBl2iv+N7koQN+dvqszHZgT/Fjw==
@@ -16453,6 +17402,14 @@ jstransform@^11.0.3:
     object-assign "^2.0.0"
     source-map "^0.4.2"
 
+jstransformer@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/jstransformer/-/jstransformer-1.0.0.tgz#ed8bf0921e2f3f1ed4d5c1a44f68709ed24722c3"
+  integrity sha1-7Yvwkh4vPx7U1cGkT2hwntJHIsM=
+  dependencies:
+    is-promise "^2.0.0"
+    promise "^7.0.1"
+
 jsx-ast-utils@^2.0.1, jsx-ast-utils@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-2.1.0.tgz#0ee4e2c971fb9601c67b5641b71be80faecf0b36"
@@ -16731,6 +17688,17 @@ lazy-cache@^1.0.3:
   resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
   integrity sha1-odePw6UEdMuAhF07O24dpJpEbo4=
 
+lazy-universal-dotenv@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/lazy-universal-dotenv/-/lazy-universal-dotenv-2.0.0.tgz#e015ad9f77be9ef811956d53ea9519b1c0ab0214"
+  integrity sha512-1Wi0zgZMfRLaRAK21g3odYuU+HE1d85Loe2tb44YhcNwIzhmD49mTPR9aKckpB9Q9Q9mA+hUMLI2xlkcCAe3yw==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    app-root-dir "^1.0.2"
+    core-js "^2.5.7"
+    dotenv "^6.0.0"
+    dotenv-expand "^4.2.0"
+
 lazy-universal-dotenv@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/lazy-universal-dotenv/-/lazy-universal-dotenv-3.0.0.tgz#e71f07f89d8de6bbf491478e4503df3c96729b8d"
@@ -17100,6 +18068,11 @@ lock@^0.1.2:
   resolved "https://registry.yarnpkg.com/lock/-/lock-0.1.4.tgz#fec7deaef17e7c3a0a55e1da042803e25d91745d"
   integrity sha1-/sfervF+fDoKVeHaBCgD4l2RdF0=
 
+lodash-es@^4.17.11:
+  version "4.17.11"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.11.tgz#145ab4a7ac5c5e52a3531fb4f310255a152b4be0"
+  integrity sha512-DHb1ub+rMjjrxqlB3H56/6MXtm1lSksDp2rA2cNWjG8mlDUYFhUj3Di2Zn5IwSU87xLv8tNIQ7sSwE/YOX/D/Q==
+
 lodash._baseassign@^3.0.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/lodash._baseassign/-/lodash._baseassign-3.2.0.tgz#8c38a099500f215ad09e59f1722fd0c52bfe0a4e"
@@ -17299,6 +18272,11 @@ lodash.castarray@^4.4.0:
   resolved "https://registry.yarnpkg.com/lodash.castarray/-/lodash.castarray-4.4.0.tgz#c02513515e309daddd4c24c60cfddcf5976d9115"
   integrity sha1-wCUTUV4wna3dTCTGDP3c9ZdtkRU=
 
+lodash.clone@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.clone/-/lodash.clone-4.5.0.tgz#195870450f5a13192478df4bc3d23d2dea1907b6"
+  integrity sha1-GVhwRQ9aExkkeN9Lw9I9LeoZB7Y=
+
 lodash.clonedeep@^4.4.1, lodash.clonedeep@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
@@ -17536,6 +18514,11 @@ lodash.merge@^4.3.1, lodash.merge@^4.6.0:
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.1.tgz#adc25d9cb99b9391c59624f379fbba60d7111d54"
   integrity sha512-AOYza4+Hf5z1/0Hztxpm2/xiPZgi/cjMqdnKTUWTBSKchJlxXXuUSxCCl8rJlf4g6yww/j6mA8nC8Hw/EZWxKQ==
 
+lodash.mergewith@^4.6.1:
+  version "4.6.1"
+  resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.1.tgz#639057e726c3afbdb3e7d42741caa8d6e4335927"
+  integrity sha512-eWw5r+PYICtEBgrBE5hhlT6aAa75f411bgDz/ZL2KZqYV03USvucsxcHUIlGTDTECs1eunpI7HOV7U+WLDvNdQ==
+
 lodash.noop@~2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/lodash.noop/-/lodash.noop-2.3.0.tgz#3059d628d51bbf937cd2a0b6fc3a7f212a669c2c"
@@ -17736,6 +18719,11 @@ longest-streak@^2.0.1:
   resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-2.0.3.tgz#3de7a3f47ee18e9074ded8575b5c091f5d0a4105"
   integrity sha512-9lz5IVdpwsKLMzQi0MQ+oD9EA0mIGcWYP7jXMTZVXP8D42PwuAk+M/HBFYQoxt1G5OR8m7aSIgb1UymfWGBWEw==
 
+longest@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
+  integrity sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=
+
 loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
@@ -17796,7 +18784,7 @@ lowlight@~1.9.1:
     fault "^1.0.2"
     highlight.js "~9.12.0"
 
-lru-cache@^4.0.0, lru-cache@^4.0.1, lru-cache@^4.1.1, lru-cache@^4.1.2, lru-cache@^4.1.3:
+lru-cache@^4.0.0, lru-cache@^4.0.1, lru-cache@^4.1.1, lru-cache@^4.1.2, lru-cache@^4.1.3, lru-cache@^4.1.5:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
   integrity sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==
@@ -17816,6 +18804,13 @@ macos-release@^2.2.0:
   resolved "https://registry.yarnpkg.com/macos-release/-/macos-release-2.2.0.tgz#ab58d55dd4714f0a05ad4b0e90f4370fef5cdea8"
   integrity sha512-iV2IDxZaX8dIcM7fG6cI46uNmHUxHE4yN+Z8tKHAW1TBPMZDIKHf/3L+YnOuj/FK9il14UaVdHmiQ1tsi90ltA==
 
+magic-string@^0.22.4:
+  version "0.22.5"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.22.5.tgz#8e9cf5afddf44385c1da5bc2a6a0dbd10b03657e"
+  integrity sha512-oreip9rJZkzvA8Qzk9HFs8fZGF/u7H/gtrE8EN6RjKJ9kh2HlC+yQ2QezifqTZfGyiuAV0dRv5a+y/8gBb1m9w==
+  dependencies:
+    vlq "^0.2.2"
+
 magic-string@^0.25.0:
   version "0.25.2"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.2.tgz#139c3a729515ec55e96e69e82a11fe890a293ad9"
@@ -18288,6 +19283,13 @@ merge-descriptors@1.0.1:
   resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
   integrity sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=
 
+merge-source-map@1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/merge-source-map/-/merge-source-map-1.0.4.tgz#a5de46538dae84d4114cc5ea02b4772a6346701f"
+  integrity sha1-pd5GU42uhNQRTMXqArR3KmNGcB8=
+  dependencies:
+    source-map "^0.5.6"
+
 merge-source-map@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/merge-source-map/-/merge-source-map-1.1.0.tgz#2fdde7e6020939f70906a68f2d7ae685e4c8c646"
@@ -19268,6 +20270,11 @@ node-abi@^2.7.0:
   dependencies:
     semver "^5.4.1"
 
+node-addon-api@^1.6.0:
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-1.6.3.tgz#3998d4593e2dca2ea82114670a4eb003386a9fe1"
+  integrity sha512-FXWH6mqjWgU8ewuahp4spec8LkroFZK2NicOv6bNwZC3kcwZUI8LeZdG80UzTSLLhK4T7MsgNwlYDVRlDdfTDg==
+
 node-ask@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/node-ask/-/node-ask-1.0.1.tgz#caaa1076cc58e0364267a0903e3eadfac158396b"
@@ -19317,7 +20324,7 @@ node-forge@0.7.5:
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.7.5.tgz#6c152c345ce11c52f465c2abd957e8639cd674df"
   integrity sha512-MmbQJ2MTESTjt3Gi/3yG1wGpIMhUfcIypUCGtTizFR9IiccFwxSpfp0vtIZlkFclEqERemxfnSdZEMR9VqqEFQ==
 
-node-forge@0.7.6:
+node-forge@0.7.6, node-forge@^0.7.1:
   version "0.7.6"
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.7.6.tgz#fdf3b418aee1f94f0ef642cd63486c77ca9724ac"
   integrity sha512-sol30LUpz1jQFBjOKwbjxijiE3b6pjd74YwfD0fJOKPjF+fONKb2Yg8rYgS6+bK6VDl+/wfr4IYpC7jDzLUIfw==
@@ -19451,6 +20458,13 @@ node-releases@^1.1.21:
   dependencies:
     semver "^5.3.0"
 
+node-releases@^1.1.23:
+  version "1.1.24"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.24.tgz#2fb494562705c01bfb81a7af9f8584c4d56311b4"
+  integrity sha512-wym2jptfuKowMmkZsfCSTsn8qAVo8zm+UiQA6l5dNqUcpfChZSnS/vbbpOeXczf+VdPhutxh+99lWHhdd6xKzg==
+  dependencies:
+    semver "^5.3.0"
+
 node-sass@4.12.0:
   version "4.12.0"
   resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.12.0.tgz#0914f531932380114a30cc5fa4fa63233a25f017"
@@ -19491,7 +20505,7 @@ noop-logger@^0.1.1:
   dependencies:
     abbrev "1"
 
-nopt@^4.0.1:
+nopt@^4.0.1, nopt@~4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.1.tgz#d0d4685afd5415193c8c7505602d0d17cd64474d"
   integrity sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=
@@ -19506,6 +20520,11 @@ nopt@~1.0.10:
   dependencies:
     abbrev "1"
 
+normalize-html-whitespace@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/normalize-html-whitespace/-/normalize-html-whitespace-0.2.0.tgz#101722f6423551c75cdb8f9d104ff850daf1e10e"
+  integrity sha1-EBci9kI1Ucdc24+dEE/4UNrx4Q4=
+
 normalize-package-data@^2.0.0, normalize-package-data@^2.3.0, normalize-package-data@^2.3.2, normalize-package-data@^2.3.4, normalize-package-data@^2.3.5, normalize-package-data@^2.4.0, normalize-package-data@^2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
@@ -19739,12 +20758,17 @@ object-inspect@^1.6.0:
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.6.0.tgz#c70b6cbf72f274aab4c34c0c82f5167bf82cf15b"
   integrity sha512-GJzfBZ6DgDAmnuaM3104jR4s1Myxr3Y3zfIyN4z3UdqN69oSRacNK8UhnobDdC+7J2AHCjGwxQubNJfE70SXXQ==
 
+object-inspect@~1.4.0:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.4.1.tgz#37ffb10e71adaf3748d05f713b4c9452f402cbc4"
+  integrity sha512-wqdhLpfCUbEsoEwl3FXwGyv8ief1k/1aUdIPCqVnupM6e8l63BEJdiF/0swtn04/8p05tG/T0FrpTlfwvljOdw==
+
 object-is@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.0.1.tgz#0aa60ec9989a0b3ed795cf4d06f62cf1ad6539b6"
   integrity sha1-CqYOyZiaCz7Xlc9NBvYs8a1lObY=
 
-object-keys@^1.0.11, object-keys@^1.0.12:
+object-keys@^1.0.11, object-keys@^1.0.12, object-keys@^1.0.6:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
   integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
@@ -19961,6 +20985,18 @@ ora@1.4.0:
     cli-spinners "^1.0.1"
     log-symbols "^2.1.0"
 
+ora@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/ora/-/ora-2.1.0.tgz#6caf2830eb924941861ec53a173799e008b51e5b"
+  integrity sha512-hNNlAd3gfv/iPmsNxYoAPLvxg7HuPozww7fFonMZvL84tP6Ox5igfk5j/+a9rtJJwqMgKK+JgWsAQik5o0HTLA==
+  dependencies:
+    chalk "^2.3.1"
+    cli-cursor "^2.1.0"
+    cli-spinners "^1.1.0"
+    log-symbols "^2.2.0"
+    strip-ansi "^4.0.0"
+    wcwidth "^1.0.1"
+
 ora@^3.4.0:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/ora/-/ora-3.4.0.tgz#bf0752491059a3ef3ed4c85097531de9fdbcd318"
@@ -20306,6 +21342,11 @@ pad-right@^0.2.2:
   dependencies:
     repeat-string "^1.5.2"
 
+pako@^0.2.5:
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
+  integrity sha1-8/dSL073gjSNqBYbrZ7P1Rv4OnU=
+
 pako@^1.0.5, pako@~1.0.2, pako@~1.0.5:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.10.tgz#4328badb5086a426aa90f541977d4955da5c9732"
@@ -20327,6 +21368,69 @@ param-case@2.1.x, param-case@^2.1.0:
   dependencies:
     no-case "^2.2.0"
 
+parcel@^1.12.3:
+  version "1.12.3"
+  resolved "https://registry.yarnpkg.com/parcel/-/parcel-1.12.3.tgz#1f1341589380f20be924f1dd67c7fed193b346ec"
+  integrity sha512-j9XCVLeol9qZvGemRKt2z8bptbXq9LVy8/IzjqWQKMiKd8DR0NpDAlRHV0zyF72/J/UUTsdsrhnw6UGo9nGI+Q==
+  dependencies:
+    "@babel/code-frame" "^7.0.0 <7.4.0"
+    "@babel/core" "^7.0.0 <7.4.0"
+    "@babel/generator" "^7.0.0 <7.4.0"
+    "@babel/parser" "^7.0.0 <7.4.0"
+    "@babel/plugin-transform-flow-strip-types" "^7.0.0 <7.4.0"
+    "@babel/plugin-transform-modules-commonjs" "^7.0.0 <7.4.0"
+    "@babel/plugin-transform-react-jsx" "^7.0.0 <7.4.0"
+    "@babel/preset-env" "^7.0.0 <7.4.0"
+    "@babel/runtime" "^7.0.0 <7.4.0"
+    "@babel/template" "^7.0.0 <7.4.0"
+    "@babel/traverse" "^7.0.0 <7.4.0"
+    "@babel/types" "^7.0.0 <7.4.0"
+    "@iarna/toml" "^2.2.0"
+    "@parcel/fs" "^1.11.0"
+    "@parcel/logger" "^1.11.0"
+    "@parcel/utils" "^1.11.0"
+    "@parcel/watcher" "^1.12.0"
+    "@parcel/workers" "^1.11.0"
+    ansi-to-html "^0.6.4"
+    babylon-walk "^1.0.2"
+    browserslist "^4.1.0"
+    chalk "^2.1.0"
+    clone "^2.1.1"
+    command-exists "^1.2.6"
+    commander "^2.11.0"
+    cross-spawn "^6.0.4"
+    css-modules-loader-core "^1.1.0"
+    cssnano "^4.0.0"
+    deasync "^0.1.14"
+    dotenv "^5.0.0"
+    dotenv-expand "^4.2.0"
+    fast-glob "^2.2.2"
+    filesize "^3.6.0"
+    get-port "^3.2.0"
+    htmlnano "^0.2.2"
+    is-glob "^4.0.0"
+    is-url "^1.2.2"
+    js-yaml "^3.10.0"
+    json5 "^1.0.1"
+    micromatch "^3.0.4"
+    mkdirp "^0.5.1"
+    node-forge "^0.7.1"
+    node-libs-browser "^2.0.0"
+    opn "^5.1.0"
+    postcss "^7.0.11"
+    postcss-value-parser "^3.3.1"
+    posthtml "^0.11.2"
+    posthtml-parser "^0.4.0"
+    posthtml-render "^1.1.3"
+    resolve "^1.4.0"
+    semver "^5.4.1"
+    serialize-to-js "^1.1.1"
+    serve-static "^1.12.4"
+    source-map "0.6.1"
+    terser "^3.7.3"
+    v8-compile-cache "^2.0.0"
+    ws "^5.1.1"
+
 parent-module@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
@@ -20708,6 +21812,11 @@ phin@^2.9.1:
   resolved "https://registry.yarnpkg.com/phin/-/phin-2.9.3.tgz#f9b6ac10a035636fb65dfc576aaaa17b8743125c"
   integrity sha512-CzFr90qM24ju5f88quFC/6qohjC144rehe5n6DH900lgXmUe86+xCKc10ev56gRKC4/BkHUoG4uSiQgBiIXwDA==
 
+physical-cpu-count@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/physical-cpu-count/-/physical-cpu-count-2.0.0.tgz#18de2f97e4bf7a9551ad7511942b5496f7aba660"
+  integrity sha1-GN4vl+S/epVRrXURlCtUlverpmA=
+
 picomatch@^2.0.5:
   version "2.0.7"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.0.7.tgz#514169d8c7cd0bdbeecc8a2609e34a7163de69f6"
@@ -20870,6 +21979,13 @@ pnp-webpack-plugin@1.4.3, pnp-webpack-plugin@^1.2.1:
   dependencies:
     ts-pnp "^1.1.2"
 
+polished@^3.0.0:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/polished/-/polished-3.4.1.tgz#1eb5597ec1792206365635811d465751f5cbf71c"
+  integrity sha512-GflTnlP5rrpDoigjczEkS6Ye7NDA4sFvAnlr5hSDrEvjiVj97Xzev3hZlLi3UB27fpxyTS9rWU64VzVLWkG+mg==
+  dependencies:
+    "@babel/runtime" "^7.4.5"
+
 polished@^3.3.1:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/polished/-/polished-3.4.0.tgz#29b2a028ee0408df5dded55a2a25e913bc6749a9"
@@ -21236,6 +22352,13 @@ postcss-minify-selectors@^4.0.2:
     postcss "^7.0.0"
     postcss-selector-parser "^3.0.0"
 
+postcss-modules-extract-imports@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.1.0.tgz#b614c9720be6816eaee35fb3a5faa1dba6a05ddb"
+  integrity sha1-thTJcgvmgW6u41+zpfqh26agXds=
+  dependencies:
+    postcss "^6.0.1"
+
 postcss-modules-extract-imports@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-2.0.0.tgz#818719a1ae1da325f9832446b01136eeb493cd7e"
@@ -21243,6 +22366,14 @@ postcss-modules-extract-imports@^2.0.0:
   dependencies:
     postcss "^7.0.5"
 
+postcss-modules-local-by-default@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.2.0.tgz#f7d80c398c5a393fa7964466bd19500a7d61c069"
+  integrity sha1-99gMOYxaOT+nlkRmvRlQCn1hwGk=
+  dependencies:
+    css-selector-tokenizer "^0.7.0"
+    postcss "^6.0.1"
+
 postcss-modules-local-by-default@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-2.0.6.tgz#dd9953f6dd476b5fd1ef2d8830c8929760b56e63"
@@ -21262,6 +22393,14 @@ postcss-modules-local-by-default@^3.0.2:
     postcss-selector-parser "^6.0.2"
     postcss-value-parser "^4.0.0"
 
+postcss-modules-scope@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-1.1.0.tgz#d6ea64994c79f97b62a72b426fbe6056a194bb90"
+  integrity sha1-1upkmUx5+XtipytCb75gVqGUu5A=
+  dependencies:
+    css-selector-tokenizer "^0.7.0"
+    postcss "^6.0.1"
+
 postcss-modules-scope@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-2.1.0.tgz#ad3f5bf7856114f6fcab901b0502e2a2bc39d4eb"
@@ -21270,6 +22409,14 @@ postcss-modules-scope@^2.1.0:
     postcss "^7.0.6"
     postcss-selector-parser "^6.0.0"
 
+postcss-modules-values@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-1.3.0.tgz#ecffa9d7e192518389f42ad0e83f72aec456ea20"
+  integrity sha1-7P+p1+GSUYOJ9CrQ6D9yrsRW6iA=
+  dependencies:
+    icss-replace-symbols "^1.1.0"
+    postcss "^6.0.1"
+
 postcss-modules-values@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-2.0.0.tgz#479b46dc0c5ca3dc7fa5270851836b9ec7152f64"
@@ -21516,7 +22663,7 @@ postcss-selector-not@^4.0.0:
     balanced-match "^1.0.0"
     postcss "^7.0.2"
 
-postcss-selector-parser@^3.0.0:
+postcss-selector-parser@3.1.1, postcss-selector-parser@^3.0.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-3.1.1.tgz#4f875f4afb0c96573d5cf4d74011aee250a7e865"
   integrity sha1-T4dfSvsMllc9XPTXQBGu4lCn6GU=
@@ -21581,6 +22728,15 @@ postcss-values-parser@^2.0.0, postcss-values-parser@^2.0.1:
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
+postcss@6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.1.tgz#000dbd1f8eef217aa368b9a212c5fc40b2a8f3f2"
+  integrity sha1-AA29H47vIXqjaLmiEsX8QLKo8/I=
+  dependencies:
+    chalk "^1.1.3"
+    source-map "^0.5.6"
+    supports-color "^3.2.3"
+
 postcss@7.0.14:
   version "7.0.14"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.14.tgz#4527ed6b1ca0d82c53ce5ec1a2041c2346bbd6e5"
@@ -21590,7 +22746,7 @@ postcss@7.0.14:
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
-postcss@^6.0.9:
+postcss@^6.0.1, postcss@^6.0.14, postcss@^6.0.9:
   version "6.0.23"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
   integrity sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==
@@ -21599,7 +22755,7 @@ postcss@^6.0.9:
     source-map "^0.6.1"
     supports-color "^5.4.0"
 
-postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.13, postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.5, postcss@^7.0.6:
+postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.11, postcss@^7.0.13, postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.5, postcss@^7.0.6:
   version "7.0.17"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.17.tgz#4da1bdff5322d4a0acaab4d87f3e782436bad31f"
   integrity sha512-546ZowA+KZ3OasvQZHsbuEpysvwTZNGJv9EfyCQdsIDltPSWHAeTQ5fQy/Npi2ZDtLI3zs7Ps/p6wThErhm9fQ==
@@ -21608,6 +22764,27 @@ postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.13, postcss@^7.0.14, postcss@^7.0.1
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
+posthtml-parser@^0.4.0, posthtml-parser@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/posthtml-parser/-/posthtml-parser-0.4.1.tgz#95b78fef766fbbe0a6f861b6e95582bc3d1ff933"
+  integrity sha512-h7vXIQ21Ikz2w5wPClPakNP6mJeJCK6BT0GpqnQrNNABdR7/TchNlFyryL1Bz6Ww53YWCKkr6tdZuHlxY1AVdQ==
+  dependencies:
+    htmlparser2 "^3.9.2"
+    object-assign "^4.1.1"
+
+posthtml-render@^1.1.3, posthtml-render@^1.1.4, posthtml-render@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/posthtml-render/-/posthtml-render-1.1.5.tgz#387934e85438a3de77085fbc7d264efb00bd0e0f"
+  integrity sha512-yvt54j0zCBHQVEFAuR+yHld8CZrCa/E1Z/OcFNCV1IEWTLVxT8O7nYnM4IIw1CD4r8kaRd3lc42+0lgCKgm87w==
+
+posthtml@^0.11.2, posthtml@^0.11.3:
+  version "0.11.4"
+  resolved "https://registry.yarnpkg.com/posthtml/-/posthtml-0.11.4.tgz#26784d005d57d7aea93ab06dda899d59bdf186c7"
+  integrity sha512-ezlzBkoPoRgh0jkmT1dsM8eT+lr2azyZ546kbda8oHnVnzvyaB3Ywo6UxUz8wPSOkFAAflCxZJhvvpQH1F6qcA==
+  dependencies:
+    posthtml-parser "^0.4.1"
+    posthtml-render "^1.1.5"
+
 pouchdb-collections@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/pouchdb-collections/-/pouchdb-collections-1.0.1.tgz#fe63a17da977611abef7cb8026cb1a9553fd8359"
@@ -21867,7 +23044,7 @@ promise@8.0.2:
   dependencies:
     asap "~2.0.6"
 
-promise@^7.0.3, promise@^7.1.1:
+promise@^7.0.1, promise@^7.0.3, promise@^7.1.1:
   version "7.3.1"
   resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
   integrity sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==
@@ -22002,6 +23179,111 @@ public-encrypt@^4.0.0:
     randombytes "^2.0.1"
     safe-buffer "^5.1.2"
 
+pug-attrs@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/pug-attrs/-/pug-attrs-2.0.4.tgz#b2f44c439e4eb4ad5d4ef25cac20d18ad28cc336"
+  integrity sha512-TaZ4Z2TWUPDJcV3wjU3RtUXMrd3kM4Wzjbe3EWnSsZPsJ3LDI0F3yCnf2/W7PPFF+edUFQ0HgDL1IoxSz5K8EQ==
+  dependencies:
+    constantinople "^3.0.1"
+    js-stringify "^1.0.1"
+    pug-runtime "^2.0.5"
+
+pug-code-gen@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/pug-code-gen/-/pug-code-gen-2.0.2.tgz#ad0967162aea077dcf787838d94ed14acb0217c2"
+  integrity sha512-kROFWv/AHx/9CRgoGJeRSm+4mLWchbgpRzTEn8XCiwwOy6Vh0gAClS8Vh5TEJ9DBjaP8wCjS3J6HKsEsYdvaCw==
+  dependencies:
+    constantinople "^3.1.2"
+    doctypes "^1.1.0"
+    js-stringify "^1.0.1"
+    pug-attrs "^2.0.4"
+    pug-error "^1.3.3"
+    pug-runtime "^2.0.5"
+    void-elements "^2.0.1"
+    with "^5.0.0"
+
+pug-error@^1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/pug-error/-/pug-error-1.3.3.tgz#f342fb008752d58034c185de03602dd9ffe15fa6"
+  integrity sha512-qE3YhESP2mRAWMFJgKdtT5D7ckThRScXRwkfo+Erqga7dyJdY3ZquspprMCj/9sJ2ijm5hXFWQE/A3l4poMWiQ==
+
+pug-filters@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/pug-filters/-/pug-filters-3.1.1.tgz#ab2cc82db9eeccf578bda89130e252a0db026aa7"
+  integrity sha512-lFfjNyGEyVWC4BwX0WyvkoWLapI5xHSM3xZJFUhx4JM4XyyRdO8Aucc6pCygnqV2uSgJFaJWW3Ft1wCWSoQkQg==
+  dependencies:
+    clean-css "^4.1.11"
+    constantinople "^3.0.1"
+    jstransformer "1.0.0"
+    pug-error "^1.3.3"
+    pug-walk "^1.1.8"
+    resolve "^1.1.6"
+    uglify-js "^2.6.1"
+
+pug-lexer@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/pug-lexer/-/pug-lexer-4.1.0.tgz#531cde48c7c0b1fcbbc2b85485c8665e31489cfd"
+  integrity sha512-i55yzEBtjm0mlplW4LoANq7k3S8gDdfC6+LThGEvsK4FuobcKfDAwt6V4jKPH9RtiE3a2Akfg5UpafZ1OksaPA==
+  dependencies:
+    character-parser "^2.1.1"
+    is-expression "^3.0.0"
+    pug-error "^1.3.3"
+
+pug-linker@^3.0.6:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/pug-linker/-/pug-linker-3.0.6.tgz#f5bf218b0efd65ce6670f7afc51658d0f82989fb"
+  integrity sha512-bagfuHttfQOpANGy1Y6NJ+0mNb7dD2MswFG2ZKj22s8g0wVsojpRlqveEQHmgXXcfROB2RT6oqbPYr9EN2ZWzg==
+  dependencies:
+    pug-error "^1.3.3"
+    pug-walk "^1.1.8"
+
+pug-load@^2.0.12:
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/pug-load/-/pug-load-2.0.12.tgz#d38c85eb85f6e2f704dea14dcca94144d35d3e7b"
+  integrity sha512-UqpgGpyyXRYgJs/X60sE6SIf8UBsmcHYKNaOccyVLEuT6OPBIMo6xMPhoJnqtB3Q3BbO4Z3Bjz5qDsUWh4rXsg==
+  dependencies:
+    object-assign "^4.1.0"
+    pug-walk "^1.1.8"
+
+pug-parser@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/pug-parser/-/pug-parser-5.0.1.tgz#03e7ada48b6840bd3822f867d7d90f842d0ffdc9"
+  integrity sha512-nGHqK+w07p5/PsPIyzkTQfzlYfuqoiGjaoqHv1LjOv2ZLXmGX1O+4Vcvps+P4LhxZ3drYSljjq4b+Naid126wA==
+  dependencies:
+    pug-error "^1.3.3"
+    token-stream "0.0.1"
+
+pug-runtime@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/pug-runtime/-/pug-runtime-2.0.5.tgz#6da7976c36bf22f68e733c359240d8ae7a32953a"
+  integrity sha512-P+rXKn9un4fQY77wtpcuFyvFaBww7/91f3jHa154qU26qFAnOe6SW1CbIDcxiG5lLK9HazYrMCCuDvNgDQNptw==
+
+pug-strip-comments@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/pug-strip-comments/-/pug-strip-comments-1.0.4.tgz#cc1b6de1f6e8f5931cf02ec66cdffd3f50eaf8a8"
+  integrity sha512-i5j/9CS4yFhSxHp5iKPHwigaig/VV9g+FgReLJWWHEHbvKsbqL0oP/K5ubuLco6Wu3Kan5p7u7qk8A4oLLh6vw==
+  dependencies:
+    pug-error "^1.3.3"
+
+pug-walk@^1.1.8:
+  version "1.1.8"
+  resolved "https://registry.yarnpkg.com/pug-walk/-/pug-walk-1.1.8.tgz#b408f67f27912f8c21da2f45b7230c4bd2a5ea7a"
+  integrity sha512-GMu3M5nUL3fju4/egXwZO0XLi6fW/K3T3VTgFQ14GxNi8btlxgT5qZL//JwZFm/2Fa64J/PNS8AZeys3wiMkVA==
+
+pug@^2.0.3:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/pug/-/pug-2.0.4.tgz#ee7682ec0a60494b38d48a88f05f3b0ac931377d"
+  integrity sha512-XhoaDlvi6NIzL49nu094R2NA6P37ijtgMDuWE+ofekDChvfKnzFal60bhSdiy8y2PBO6fmz3oMEIcfpBVRUdvw==
+  dependencies:
+    pug-code-gen "^2.0.2"
+    pug-filters "^3.1.1"
+    pug-lexer "^4.1.0"
+    pug-linker "^3.0.6"
+    pug-load "^2.0.12"
+    pug-parser "^5.0.1"
+    pug-runtime "^2.0.5"
+    pug-strip-comments "^1.0.4"
+
 pump@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/pump/-/pump-1.0.3.tgz#5dfe8311c33bbf6fc18261f9f34702c47c08a954"
@@ -22140,6 +23422,20 @@ quick-temp@^0.1.2, quick-temp@^0.1.3, quick-temp@^0.1.5, quick-temp@^0.1.8:
     rimraf "^2.5.4"
     underscore.string "~3.3.4"
 
+quote-stream@^1.0.1, quote-stream@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/quote-stream/-/quote-stream-1.0.2.tgz#84963f8c9c26b942e153feeb53aae74652b7e0b2"
+  integrity sha1-hJY/jJwmuULhU/7rU6rnRlK34LI=
+  dependencies:
+    buffer-equal "0.0.1"
+    minimist "^1.1.3"
+    through2 "^2.0.0"
+
+raf-schd@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.0.tgz#9855756c5045ff4ed4516e14a47719387c3c907b"
+  integrity sha512-m7zq0JkIrECzw9mO5Zcq6jN4KayE34yoIS9hJoiZNXyOAT06PPA8PrR+WtJIeFW09YjUfNkMMN9lrmAt6BURCA==
+
 raf@3.4.1, raf@^3.4.0:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
@@ -22340,7 +23636,7 @@ raw-body@~1.1.0:
     bytes "1"
     string_decoder "0.10"
 
-raw-loader@1.0.0:
+raw-loader@1.0.0, raw-loader@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-1.0.0.tgz#3f9889e73dadbda9a424bce79809b4133ad46405"
   integrity sha512-Uqy5AqELpytJTRxYT4fhltcKPj0TyaEpzJDcGz7DFJi+pQOOi3GjR/DOdxTkTsF+NzhnldIoG6TORaBlInUuqA==
@@ -22627,6 +23923,37 @@ react-dev-utils@^7.0.3:
     strip-ansi "5.0.0"
     text-table "0.2.0"
 
+react-dev-utils@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-8.0.0.tgz#7c5b227a45a32ea8ff7fbc318f336cf9e2c6e34c"
+  integrity sha512-TK8cj7eghvxfe7bfBluLGpI/upo4EXC+G74hYmPucAG8C2XcbT+vKnlWPwLnABb75Zk+mR6D556Da+yvDjljrw==
+  dependencies:
+    "@babel/code-frame" "7.0.0"
+    address "1.0.3"
+    browserslist "4.4.1"
+    chalk "2.4.2"
+    cross-spawn "6.0.5"
+    detect-port-alt "1.1.6"
+    escape-string-regexp "1.0.5"
+    filesize "3.6.1"
+    find-up "3.0.0"
+    fork-ts-checker-webpack-plugin "1.0.0-alpha.6"
+    global-modules "2.0.0"
+    globby "8.0.2"
+    gzip-size "5.0.0"
+    immer "1.10.0"
+    inquirer "6.2.1"
+    is-root "2.0.0"
+    loader-utils "1.2.3"
+    opn "5.4.0"
+    pkg-up "2.0.0"
+    react-error-overlay "^5.1.4"
+    recursive-readdir "2.2.2"
+    shell-quote "1.6.1"
+    sockjs-client "1.3.0"
+    strip-ansi "5.0.0"
+    text-table "0.2.0"
+
 react-dev-utils@^9.0.0, react-dev-utils@^9.0.1:
   version "9.0.1"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-9.0.1.tgz#5c03d85a0b2537d0c46af7165c24a7dfb274bef2"
@@ -22711,7 +24038,7 @@ react-dom@^15.4.2:
     object-assign "^4.1.0"
     prop-types "^15.5.10"
 
-react-dom@^16.8.3:
+react-dom@^16.8.3, react-dom@^16.8.4:
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.8.6.tgz#71d6303f631e8b0097f56165ef608f051ff6e10f"
   integrity sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==
@@ -22742,7 +24069,7 @@ react-error-overlay@^5.1.4, react-error-overlay@^5.1.6:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-5.1.6.tgz#0cd73407c5d141f9638ae1e0c63e7b2bf7e9929d"
   integrity sha512-X1Y+0jR47ImDVr54Ab6V9eGk0Hnu7fVWGeHQSOXHf/C2pF9c6uy3gef8QUeuUiWlNb0i08InPSE5a/KJzNzw1Q==
 
-react-fast-compare@2.0.4:
+react-fast-compare@2.0.4, react-fast-compare@^2.0.2:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
   integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
@@ -22762,6 +24089,16 @@ react-ga@^2.5.7:
   resolved "https://registry.yarnpkg.com/react-ga/-/react-ga-2.5.7.tgz#1c80a289004bf84f84c26d46f3a6a6513081bf2e"
   integrity sha512-UmATFaZpEQDO96KFjB5FRLcT6hFcwaxOmAJZnjrSiFN/msTqylq9G+z5Z8TYzN/dbamDTiWf92m6MnXXJkAivQ==
 
+react-helmet-async@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/react-helmet-async/-/react-helmet-async-0.2.0.tgz#d20d8725c1dcdcc95d54e281a1040af47c3abffa"
+  integrity sha512-xo8oN+SUt0YkgQscKPTqhZZIOn5ni18FMv/H3KuBDt5+yAXTGktPEf3HU2EyufbHAF0TQ8qI+JrA3ILnjVfqNA==
+  dependencies:
+    invariant "^2.2.4"
+    prop-types "^15.6.1"
+    react-fast-compare "^2.0.2"
+    shallowequal "^1.0.2"
+
 react-helmet-async@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/react-helmet-async/-/react-helmet-async-1.0.2.tgz#bb55dd8268f7b15aac69c6b22e2f950abda8cc44"
@@ -22787,6 +24124,15 @@ react-input-autosize@^2.2.1:
   dependencies:
     prop-types "^15.5.8"
 
+react-inspector@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/react-inspector/-/react-inspector-2.3.1.tgz#f0eb7f520669b545b441af9d38ec6d706e5f649c"
+  integrity sha512-tUUK7t3KWgZEIUktOYko5Ic/oYwvjEvQUFAGC1UeMeDaQ5za2yZFtItJa2RTwBJB//NxPr000WQK6sEbqC6y0Q==
+  dependencies:
+    babel-runtime "^6.26.0"
+    is-dom "^1.0.9"
+    prop-types "^15.6.1"
+
 react-inspector@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/react-inspector/-/react-inspector-3.0.2.tgz#c530a06101f562475537e47df428e1d7aff16ed8"
@@ -23036,7 +24382,7 @@ react-native@^0.57.8:
     xmldoc "^0.4.0"
     yargs "^9.0.0"
 
-react-popper-tooltip@^2.8.3:
+react-popper-tooltip@^2.8.0, react-popper-tooltip@^2.8.3:
   version "2.8.3"
   resolved "https://registry.yarnpkg.com/react-popper-tooltip/-/react-popper-tooltip-2.8.3.tgz#1c63e7473a96362bd93be6c94fa404470a265197"
   integrity sha512-g5tfxmuj8ClNVwH4zswYJcD3GKoc5RMeRawd/WZnbyZGEDecsRKaVL+Kj7L3BG7w5qb6/MHcLTG8yE4CidwezQ==
@@ -23076,6 +24422,17 @@ react-redux@^7.0.2:
     prop-types "^15.7.2"
     react-is "^16.8.6"
 
+react-resize-detector@^4.0.5:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/react-resize-detector/-/react-resize-detector-4.2.0.tgz#b87aee6b37c9e8a52daca8736b3230cf6a2a8647"
+  integrity sha512-AtOaNIxs0ydua7tEoglXR3902/EdlIj9PXDu1Zj0ug2VAUnkSQjguLGzaG/N6CXLOhJSccTsUCZxjLayQ1mE9Q==
+  dependencies:
+    lodash "^4.17.11"
+    lodash-es "^4.17.11"
+    prop-types "^15.7.2"
+    raf-schd "^4.0.0"
+    resize-observer-polyfill "^1.5.1"
+
 react-scripts@3.0.1, react-scripts@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-3.0.1.tgz#e5565350d8069cc9966b5998d3fe3befe3d243ac"
@@ -23229,7 +24586,7 @@ react-transition-group@^2.2.1:
     prop-types "^15.6.2"
     react-lifecycles-compat "^3.0.4"
 
-react@*, react@16.8.6, react@^16.6.0, react@^16.8.3:
+react@*, react@16.8.6, react@^16.6.0, react@^16.7.0, react@^16.8.3, react@^16.8.4:
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/react/-/react-16.8.6.tgz#ad6c3a9614fd3a4e9ef51117f54d888da01f2bbe"
   integrity sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==
@@ -23418,7 +24775,7 @@ read@1, read@~1.0.1:
   dependencies:
     mute-stream "~0.0.4"
 
-"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.0, readable-stream@^2.3.3, readable-stream@^2.3.5, readable-stream@^2.3.6, readable-stream@~2.3.6:
+"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.0, readable-stream@^2.3.3, readable-stream@^2.3.5, readable-stream@^2.3.6, readable-stream@~2.3.3, readable-stream@~2.3.6:
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.6.tgz#b11c27d88b8ff1fbe070643cf94b0c79ae1b0aaf"
   integrity sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==
@@ -24123,7 +25480,7 @@ request-promise-native@^1.0.5:
     stealthy-require "^1.1.1"
     tough-cookie "^2.3.3"
 
-request@2.88.0, "request@>=2.76.0 <3.0.0", request@^2.81.0, request@^2.83.0, request@^2.87.0, request@^2.88.0:
+request@2.88.0, "request@>=2.76.0 <3.0.0", request@^2.72.0, request@^2.81.0, request@^2.83.0, request@^2.87.0, request@^2.88.0:
   version "2.88.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.88.0.tgz#9c2fca4f7d35b592efe57c7f0a55e81052124fef"
   integrity sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==
@@ -24196,7 +25553,7 @@ reselect@^3.0.1:
   resolved "https://registry.yarnpkg.com/reselect/-/reselect-3.0.1.tgz#efdaa98ea7451324d092b2b2163a6a1d7a9a2147"
   integrity sha1-79qpjqdFEyTQkrKyFjpqHXqaIUc=
 
-resize-observer-polyfill@^1.5.1:
+resize-observer-polyfill@^1.5.0, resize-observer-polyfill@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
   integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
@@ -24281,6 +25638,13 @@ resolve@1.x, resolve@^1.1.4, resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, re
   dependencies:
     path-parse "^1.0.6"
 
+resolve@^1.1.5:
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.11.1.tgz#ea10d8110376982fef578df8fc30b9ac30a07a3e"
+  integrity sha512-vIpgF6wfuJOZI7KKKSP+HmiKggadPQAdsp5HiC1mvqnfp0gF1vdwgBWZIdrVft9pgqoMFQN+R7BSWZiBxx+BBw==
+  dependencies:
+    path-parse "^1.0.6"
+
 responselike@1.0.2, responselike@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/responselike/-/responselike-1.0.2.tgz#918720ef3b631c5642be068f15ade5a46f4ba1e7"
@@ -24335,6 +25699,13 @@ rgba-regex@^1.0.0:
   resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"
   integrity sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=
 
+right-align@^0.1.1:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/right-align/-/right-align-0.1.3.tgz#61339b722fe6a3515689210d24e14c96148613ef"
+  integrity sha1-YTObci/mo1FWiSENJOFMlhSGE+8=
+  dependencies:
+    align-text "^0.1.1"
+
 rimraf@2, rimraf@2.6.3, rimraf@^2.2.8, rimraf@^2.3.4, rimraf@^2.4.3, rimraf@^2.4.4, rimraf@^2.5.2, rimraf@^2.5.3, rimraf@^2.5.4, rimraf@^2.6.1, rimraf@^2.6.2, rimraf@^2.6.3, rimraf@~2.6.2:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab"
@@ -24587,6 +25958,13 @@ safe-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
+safer-eval@^1.3.0:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/safer-eval/-/safer-eval-1.3.3.tgz#0309e9fcc0609e66c1b599fd0d4772132b260ca8"
+  integrity sha512-j/qb0rtnwTp5V1D7nR0Ns/14HU8OiHPaoZNJhM+Lfmv1nbXZCXG9LHaVW157agEocdSVAeeRNddK/yuWfalzGQ==
+  dependencies:
+    clones "^1.2.0"
+
 sane@^2.0.0:
   version "2.5.2"
   resolved "https://registry.yarnpkg.com/sane/-/sane-2.5.2.tgz#b4dc1861c21b427e929507a3e751e2a2cb8ab3fa"
@@ -24867,6 +26245,14 @@ serialize-javascript@^1.4.0, serialize-javascript@^1.7.0:
   resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.7.0.tgz#d6e0dfb2a3832a8c94468e6eb1db97e55a192a65"
   integrity sha512-ke8UG8ulpFOxO8f8gRYabHQe/ZntKlcig2Mp+8+URDP1D8vJZ0KUt7LYo07q25Z/+JVSgpr/cui9PIp5H6/+nA==
 
+serialize-to-js@^1.1.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/serialize-to-js/-/serialize-to-js-1.2.2.tgz#1a567b0c9bf557bc7d7b77b503dfae0a8218d15d"
+  integrity sha512-mUc8vA5iJghe+O+3s0YDGFLMJcqitVFk787YKiv8a4sf6RX5W0u81b+gcHrp15O0fFa010dRBVZvwcKXOWsL9Q==
+  dependencies:
+    js-beautify "^1.8.9"
+    safer-eval "^1.3.0"
+
 serve-favicon@^2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/serve-favicon/-/serve-favicon-2.5.0.tgz#935d240cdfe0f5805307fdfe967d88942a2cbcf0"
@@ -24901,7 +26287,7 @@ serve-static@1.13.2:
     parseurl "~1.3.2"
     send "0.16.2"
 
-serve-static@1.14.1, serve-static@^1.13.1:
+serve-static@1.14.1, serve-static@^1.12.4, serve-static@^1.13.1:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.14.1.tgz#666e636dc4f010f7ef29970a88a674320898b2f9"
   integrity sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==
@@ -24983,12 +26369,17 @@ shallow-clone@^1.0.0:
     kind-of "^5.0.0"
     mixin-object "^2.0.1"
 
+shallow-copy@~0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/shallow-copy/-/shallow-copy-0.0.1.tgz#415f42702d73d810330292cc5ee86eae1a11a170"
+  integrity sha1-QV9CcC1z2BAzApLMXuhurhoRoXA=
+
 shallow-equal@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-1.1.0.tgz#cc022f030dcba0d1c198abf658a3c6c744e171ca"
   integrity sha512-0SW1nWo1hnabO62SEeHsl8nmTVVEzguVWZCj5gaQrgWAxz/BaCja4OWdJBWLVPDxdtE/WU7c98uUCCXyPHSCvw==
 
-shallowequal@1.1.0, shallowequal@^1.1.0:
+shallowequal@1.1.0, shallowequal@^1.0.2, shallowequal@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
   integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
@@ -25063,6 +26454,11 @@ shorthash@0.0.2:
   resolved "https://registry.yarnpkg.com/shorthash/-/shorthash-0.0.2.tgz#59b268eecbde59038b30da202bcfbddeb2c4a4eb"
   integrity sha1-WbJo7sveWQOLMNogK8+93rLEpOs=
 
+sigmund@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/sigmund/-/sigmund-1.0.1.tgz#3ff21f198cad2175f9f3b781853fd94d0d19b590"
+  integrity sha1-P/IfGYytIXX587eBhT/ZTQ0ZtZA=
+
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
@@ -25142,6 +26538,14 @@ simple-swizzle@^0.2.2:
   dependencies:
     is-arrayish "^0.3.1"
 
+simplebar-react@^0.1.5:
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/simplebar-react/-/simplebar-react-0.1.6.tgz#571caee7c9f15892de847622140aaa15dff9450e"
+  integrity sha512-p++2mrBGroib/GnWGVhmLsRZ7kys0CVicp2Ocun7aTQZ+nt0Ry+v0MQ1apNyORD3L8TDHnUm0xxNenHVKsGolw==
+  dependencies:
+    prop-types "^15.6.1"
+    simplebar "^3.1.5"
+
 simplebar-react@^1.0.0-alpha.6:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/simplebar-react/-/simplebar-react-1.0.0.tgz#8fe914d7f980dd077cc9dfd3e22ec5596f006b8d"
@@ -25150,6 +26554,19 @@ simplebar-react@^1.0.0-alpha.6:
     prop-types "^15.6.1"
     simplebar "^4.0.0"
 
+simplebar@^3.1.5:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/simplebar/-/simplebar-3.1.5.tgz#257f2d0836baa250cd2a8841892a10c3c3081b17"
+  integrity sha512-6hPEvcUEbgRWAyldqdd5yd1OcrnxelopEOKwMwOafLc0/Kc3Um2x1US8t+feUAA5ae+lTbrQwcGJvMH+9A23FA==
+  dependencies:
+    can-use-dom "^0.1.0"
+    core-js "^2.6.2"
+    lodash.debounce "^4.0.8"
+    lodash.memoize "^4.1.2"
+    lodash.throttle "^4.1.1"
+    resize-observer-polyfill "^1.5.0"
+    scrollbarwidth "^0.1.3"
+
 simplebar@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/simplebar/-/simplebar-4.0.0.tgz#7f1b9e735ec94a58f887d4803f6b15abf401b6b5"
@@ -25482,21 +26899,21 @@ source-map@0.5.6:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
   integrity sha1-dc449SvwczxafwwRjYEzSiu19BI=
 
+source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
+
 source-map@0.7.3, source-map@^0.7.2:
   version "0.7.3"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
   integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
 
-source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.0, source-map@~0.5.3:
+source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.0, source-map@~0.5.1, source-map@~0.5.3:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
 
-source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
-  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
-
 sourcemap-codec@^1.4.1, sourcemap-codec@^1.4.4:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.4.tgz#c63ea927c029dd6bd9a2b7fa03b3fec02ad56e9f"
@@ -25692,6 +27109,13 @@ state-toggle@^1.0.0:
   resolved "https://registry.yarnpkg.com/state-toggle/-/state-toggle-1.0.2.tgz#75e93a61944116b4959d665c8db2d243631d6ddc"
   integrity sha512-8LpelPGR0qQM4PnfLiplOQNJcIN1/r2Gy0xKB2zKnIW2YzPMt2sR4I/+gtPjhN7Svh9kw+zqEg2SFwpBO9iNiw==
 
+static-eval@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/static-eval/-/static-eval-2.0.2.tgz#2d1759306b1befa688938454c546b7871f806a42"
+  integrity sha512-N/D219Hcr2bPjLxPiV+TQE++Tsmrady7TqAJugLy7Xk1EumfDWS/f5dtBbkRCGE7wKKXuYockQoj8Rm2/pVKyg==
+  dependencies:
+    escodegen "^1.8.1"
+
 static-extend@^0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"
@@ -25700,6 +27124,26 @@ static-extend@^0.1.1:
     define-property "^0.2.5"
     object-copy "^0.1.0"
 
+static-module@^2.2.0:
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/static-module/-/static-module-2.2.5.tgz#bd40abceae33da6b7afb84a0e4329ff8852bfbbf"
+  integrity sha512-D8vv82E/Kpmz3TXHKG8PPsCPg+RAX6cbCOyvjM6x04qZtQ47EtJFVwRsdov3n5d6/6ynrOY9XB4JkaZwB2xoRQ==
+  dependencies:
+    concat-stream "~1.6.0"
+    convert-source-map "^1.5.1"
+    duplexer2 "~0.1.4"
+    escodegen "~1.9.0"
+    falafel "^2.1.0"
+    has "^1.0.1"
+    magic-string "^0.22.4"
+    merge-source-map "1.0.4"
+    object-inspect "~1.4.0"
+    quote-stream "~1.0.2"
+    readable-stream "~2.3.3"
+    shallow-copy "~0.0.1"
+    static-eval "^2.0.0"
+    through2 "~2.0.3"
+
 stats-webpack-plugin@0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/stats-webpack-plugin/-/stats-webpack-plugin-0.7.0.tgz#ccffe9b745de8bbb155571e063f8263fc0e2bc06"
@@ -25734,6 +27178,21 @@ store2@^2.7.1:
   resolved "https://registry.yarnpkg.com/store2/-/store2-2.7.1.tgz#22070b7dc04748a792fc6912a58ab99d3a21d788"
   integrity sha512-zzzP5ZY6QWumnAFV6kBRbS44pUMcpZBNER5DWUe1HETlaKXqLcCQxbNu6IHaKr1pUsjuhUGBdOy8sWKmMkL6pQ==
 
+storybook-addon-vue-info@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/storybook-addon-vue-info/-/storybook-addon-vue-info-1.2.1.tgz#41dc5b16392640866878441abb8c060414803c78"
+  integrity sha512-B4l93SBHjVilrbzZ7sFMyfBlwm5nCuecU+ZOhpeci5zOK0ixTgCAwg/zIWBpCT9yI0iUAZv70xaIO9ICxm3vOQ==
+  dependencies:
+    clone "^2.1.2"
+    dedent-tabs "^0.8.0"
+    highlight.js "^9.12.0"
+    loader-utils "^1.2.3"
+    marked "^0.6.2"
+    querystring "^0.2.0"
+    vue-docgen-api "^3.11.4"
+    vue-template-compiler "^2.5.16"
+    vuera "^0.2.3"
+
 storybook-chromatic@^1.2.6, storybook-chromatic@^1.3.3:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/storybook-chromatic/-/storybook-chromatic-1.3.3.tgz#4ea0ff8dfc7e196243e045c3cd0d1e19086b3587"
@@ -26174,6 +27633,13 @@ supports-color@^2.0.0:
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
   integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=
 
+supports-color@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
+  integrity sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=
+  dependencies:
+    has-flag "^1.0.0"
+
 supports-color@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.5.0.tgz#be7a0de484dec5c5cddf8b3d59125044912f635b"
@@ -26239,7 +27705,7 @@ svg-url-loader@^2.3.2:
     file-loader "1.1.11"
     loader-utils "1.1.0"
 
-svgo@^1.0.0, svgo@^1.2.1:
+svgo@^1.0.0, svgo@^1.0.5, svgo@^1.2.1:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.2.2.tgz#0253d34eccf2aed4ad4f283e11ee75198f9d7316"
   integrity sha512-rAfulcwp2D9jjdGu+0CuqlrAUin6bBWrpoqXWwKDZZZJfXcUXQSxLJOFJCQCSA0x0pP2U0TxSlJu2ROq5Bq6qA==
@@ -26402,7 +27868,7 @@ teeny-request@^3.11.3:
     node-fetch "^2.2.0"
     uuid "^3.3.2"
 
-telejson@^2.2.1:
+telejson@^2.1.1, telejson@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/telejson/-/telejson-2.2.1.tgz#d9ee7e7eba0c81d9378257342fde7142a03787e2"
   integrity sha512-JtFAnITek+Z9t+uQjVl4Fxur9Z3Bi3flytBLc3KZVXmMUHLXdtAxiP0g8IBkHvKn1kQIYZC57IG0jjGH1s64HQ==
@@ -26497,7 +27963,23 @@ terser-webpack-plugin@^1.1.0, terser-webpack-plugin@^1.2.3, terser-webpack-plugi
     webpack-sources "^1.3.0"
     worker-farm "^1.7.0"
 
-terser@^3.16.1, terser@^3.17.0, terser@^3.7.5:
+terser-webpack-plugin@^1.2.2:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.3.0.tgz#69aa22426299f4b5b3775cbed8cb2c5d419aa1d4"
+  integrity sha512-W2YWmxPjjkUcOWa4pBEv4OP4er1aeQJlSo2UhtCFQCuRXEHjOFscO8VyWHj9JLlA0RzQb8Y2/Ta78XZvT54uGg==
+  dependencies:
+    cacache "^11.3.2"
+    find-cache-dir "^2.0.0"
+    is-wsl "^1.1.0"
+    loader-utils "^1.2.3"
+    schema-utils "^1.0.0"
+    serialize-javascript "^1.7.0"
+    source-map "^0.6.1"
+    terser "^4.0.0"
+    webpack-sources "^1.3.0"
+    worker-farm "^1.7.0"
+
+terser@^3.16.1, terser@^3.17.0, terser@^3.7.3, terser@^3.7.5:
   version "3.17.0"
   resolved "https://registry.yarnpkg.com/terser/-/terser-3.17.0.tgz#f88ffbeda0deb5637f9d24b0da66f4e15ab10cb2"
   integrity sha512-/FQzzPJmCpjAH9Xvk2paiWrFq+5M6aVOf+2KRbwhByISDX/EujxsK+BAvrhb6H+2rtrLCHK9N01wO014vrIwVQ==
@@ -26506,6 +27988,15 @@ terser@^3.16.1, terser@^3.17.0, terser@^3.7.5:
     source-map "~0.6.1"
     source-map-support "~0.5.10"
 
+terser@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-4.0.2.tgz#580cea06c4932f46a48ed13804c93bc93c275968"
+  integrity sha512-IWLuJqTvx97KP3uTYkFVn93cXO+EtlzJu8TdJylq+H0VBDlPMIfQA9MBS5Vc5t3xTEUG1q0hIfHMpAP2R+gWTw==
+  dependencies:
+    commander "^2.19.0"
+    source-map "~0.6.1"
+    source-map-support "~0.5.10"
+
 test-exclude@^5.2.3:
   version "5.2.3"
   resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-5.2.3.tgz#c3d3e1e311eb7ee405e092dac10aefd09091eac0"
@@ -26589,7 +28080,7 @@ throttle-debounce@^2.1.0:
   resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-2.1.0.tgz#257e648f0a56bd9e54fe0f132c4ab8611df4e1d5"
   integrity sha512-AOvyNahXQuU7NN+VVvOOX+uW6FPaWdAOdRP5HfwYxAfCzXTFKRMoIMk+n+po318+ktcChx+F1Dd91G3YHeMKyg==
 
-through2@^2.0.0, through2@^2.0.2:
+through2@^2.0.0, through2@^2.0.2, through2@~2.0.3:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
   integrity sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==
@@ -26658,6 +28149,11 @@ tiny-emitter@^2.0.0:
   resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
   integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
 
+tiny-inflate@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/tiny-inflate/-/tiny-inflate-1.0.2.tgz#93d9decffc8805bd57eae4310f0b745e9b6fb3a7"
+  integrity sha1-k9nez/yIBb1X6uQxDwt0Xptvs6c=
+
 tiny-json-http@^7.0.2:
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/tiny-json-http/-/tiny-json-http-7.1.2.tgz#620e189849bab08992ec23fada7b48c7c61637b4"
@@ -26804,6 +28300,11 @@ toidentifier@1.0.0:
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
   integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
 
+token-stream@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/token-stream/-/token-stream-0.0.1.tgz#ceeefc717a76c4316f126d0b9dbaa55d7e7df01a"
+  integrity sha1-zu78cXp2xDFvEm0LnbqlXX598Bo=
+
 topo@2.x.x:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/topo/-/topo-2.0.2.tgz#cd5615752539057c0dc0491a621c3bc6fbe1d182"
@@ -27018,6 +28519,11 @@ ts-loader@^6.0.0, ts-loader@^6.0.1:
     micromatch "^4.0.0"
     semver "^6.0.0"
 
+ts-map@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/ts-map/-/ts-map-1.0.3.tgz#1c4d218dec813d2103b7e04e4bcf348e1471c1ff"
+  integrity sha512-vDWbsl26LIcPGmDpoVzjEP6+hvHZkBkLW7JpvwbCv/5IYPJlsbzCVXY3wsCeAxAUeTclNOUZxnLdGh3VBD/J6w==
+
 ts-node@~8.2.0:
   version "8.2.0"
   resolved "https://registry.yarnpkg.com/ts-node/-/ts-node-8.2.0.tgz#4a89754b00560bb24cd54526e1685fa38c45f240"
@@ -27220,6 +28726,11 @@ typescript@3.2.4:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.2.4.tgz#c585cb952912263d915b462726ce244ba510ef3d"
   integrity sha512-0RNDbSdEokBeEAkgNbxJ+BLwSManFy9TeXz8uW+48j/xhEXv1ePME60olyzw2XzUqUBNAYFeJadIqAgNqIACwg==
 
+typescript@^3.2.2:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.5.2.tgz#a09e1dc69bc9551cadf17dba10ee42cf55e5d56c"
+  integrity sha512-7KxJovlYhTX5RaRbUdkAXN1KUZ8PwWlTzQdHV6xNqvuFOs7+WBo10TQUqT19Q/Jz2hk5v9TQDIhyLhhJY4p5AA==
+
 typescript@^3.2.4, typescript@^3.4.1:
   version "3.4.5"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.4.5.tgz#2d2618d10bb566572b8d7aad5180d84257d70a99"
@@ -27256,6 +28767,16 @@ uglify-js@3.4.x:
     commander "~2.19.0"
     source-map "~0.6.1"
 
+uglify-js@^2.6.1:
+  version "2.8.29"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd"
+  integrity sha1-KcVzMUgFe7Th913zW3qcty5qWd0=
+  dependencies:
+    source-map "~0.5.1"
+    yargs "~3.10.0"
+  optionalDependencies:
+    uglify-to-browserify "~1.0.0"
+
 uglify-js@^3.0.0:
   version "3.5.8"
   resolved "https://registry.npmjs.org/uglify-js/-/uglify-js-3.5.8.tgz#496f62a8c23c3e6791563acbc04908edaca4025f"
@@ -27272,6 +28793,11 @@ uglify-js@^3.1.4:
     commander "~2.20.0"
     source-map "~0.6.1"
 
+uglify-to-browserify@~1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7"
+  integrity sha1-bgkk1r2mta/jSeOabWMoUKD4grc=
+
 uglifyjs-webpack-plugin@^1.2.4:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-1.3.0.tgz#75f548160858163a08643e086d5fefe18a5d67de"
@@ -27330,6 +28856,21 @@ unc-path-regex@^0.1.0:
   resolved "https://registry.yarnpkg.com/unc-path-regex/-/unc-path-regex-0.1.2.tgz#e73dd3d7b0d7c5ed86fbac6b0ae7d8c6a69d50fa"
   integrity sha1-5z3T17DXxe2G+6xrCufYxqadUPo=
 
+uncss@^0.16.2:
+  version "0.16.2"
+  resolved "https://registry.yarnpkg.com/uncss/-/uncss-0.16.2.tgz#3b2269c59012da7c66cbe98fbedddeef94f0649c"
+  integrity sha1-OyJpxZAS2nxmy+mPvt3e75TwZJw=
+  dependencies:
+    commander "^2.9.0"
+    glob "^7.0.3"
+    is-absolute-url "^2.0.0"
+    is-html "^1.0.0"
+    jsdom "^11.3.0"
+    lodash "^4.13.1"
+    postcss "^6.0.14"
+    postcss-selector-parser "3.1.1"
+    request "^2.72.0"
+
 undeclared-identifiers@^1.1.2:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/undeclared-identifiers/-/undeclared-identifiers-1.1.3.tgz#9254c1d37bdac0ac2b52de4b6722792d2a91e30f"
@@ -27385,6 +28926,14 @@ unicode-property-aliases-ecmascript@^1.0.4:
   resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.0.5.tgz#a9cc6cc7ce63a0a3023fc99e341b94431d405a57"
   integrity sha512-L5RAqCfXqAwR3RriF8pM0lU0w4Ryf/GgzONwi6KnL1taJQa7x1TCxdJnILX59WIGOwR57IVxn7Nej0fz1Ny6fw==
 
+unicode-trie@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/unicode-trie/-/unicode-trie-0.3.1.tgz#d671dddd89101a08bac37b6a5161010602052085"
+  integrity sha1-1nHd3YkQGgi6w3tqUWEBBgIFIIU=
+  dependencies:
+    pako "^0.2.5"
+    tiny-inflate "^1.0.0"
+
 unified-args@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/unified-args/-/unified-args-6.0.0.tgz#ffa3be9372ebe311099b30435b17269b0000d04c"
@@ -27857,7 +29406,7 @@ uuid@^2.0.1:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-2.0.3.tgz#67e2e863797215530dff318e5bf9dcebfd47b21a"
   integrity sha1-Z+LoY3lyFVMN/zGOW/nc6/1Hsho=
 
-v8-compile-cache@^2.0.2:
+v8-compile-cache@^2.0.0, v8-compile-cache@^2.0.2:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.0.3.tgz#00f7494d2ae2b688cfe2899df6ed2c54bef91dbe"
   integrity sha512-CNmdbwQMBjwr9Gsmohvm0pbL954tJrNzf6gWL3K+QMQf00PF7ERGrEiLgjuU3mKreLC2MeGhUsNV9ybTbLgd3w==
@@ -27964,6 +29513,11 @@ vfile@^4.0.0:
     unist-util-stringify-position "^2.0.0"
     vfile-message "^2.0.0"
 
+vlq@^0.2.2:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/vlq/-/vlq-0.2.3.tgz#8f3e4328cf63b1540c0d67e1b2778386f8975b26"
+  integrity sha512-DRibZL6DsNhIgYQ+wNdWDL2SL3bKPlVrRiBqV5yuMm++op8W4kGFtaQfCs4KEJn0wBZcHVHJ3eoywX8983k1ow==
+
 vm-browserify@0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73"
@@ -27976,6 +29530,11 @@ vm-browserify@^1.0.0:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.0.tgz#bd76d6a23323e2ca8ffa12028dc04559c75f9019"
   integrity sha512-iq+S7vZJE60yejDYM0ek6zg308+UZsdtPExWP9VZoCFCz1zkJoXFnAX7aZfd/ZwrkidzdUZL0C/ryW+JwAiIGw==
 
+void-elements@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
+  integrity sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=
+
 vscode-json-languageservice@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/vscode-json-languageservice/-/vscode-json-languageservice-3.2.1.tgz#991d51128ebd81c5525d0578cabfa5b03e3cba2a"
@@ -28006,6 +29565,22 @@ vue-class-component@^6.1.0:
   resolved "https://registry.yarnpkg.com/vue-class-component/-/vue-class-component-6.3.2.tgz#e6037e84d1df2af3bde4f455e50ca1b9eec02be6"
   integrity sha512-cH208IoM+jgZyEf/g7mnFyofwPDJTM/QvBNhYMjqGB8fCsRyTf68rH2ISw/G20tJv+5mIThQ3upKwoL4jLTr1A==
 
+vue-docgen-api@^3.11.4:
+  version "3.15.0"
+  resolved "https://registry.yarnpkg.com/vue-docgen-api/-/vue-docgen-api-3.15.0.tgz#67fe6312da4c810974659cc2767a90a46e0012b5"
+  integrity sha512-Z1NKOW4hBu+PYlIuuAdPUtNpuEHMaKALgBmrQq5ASFjO9BTjl8cag8VUI2QLVP/rHfVOn8hq9V/xSdmOrIPqog==
+  dependencies:
+    "@babel/parser" "^7.2.3"
+    "@babel/types" "^7.0.0"
+    ast-types "^0.12.2"
+    hash-sum "^1.0.2"
+    lru-cache "^4.1.5"
+    pug "^2.0.3"
+    recast "^0.17.3"
+    ts-map "^1.0.3"
+    typescript "^3.2.2"
+    vue-template-compiler "^2.0.0"
+
 vue-hot-reload-api@^2.3.0:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.3.tgz#2756f46cb3258054c5f4723de8ae7e87302a1ccf"
@@ -28038,7 +29613,7 @@ vue-style-loader@^4.1.0:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"
 
-vue-template-compiler@^2.6.8:
+vue-template-compiler@^2.0.0, vue-template-compiler@^2.5.16, vue-template-compiler@^2.6.8:
   version "2.6.10"
   resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.10.tgz#323b4f3495f04faa3503337a82f5d6507799c9cc"
   integrity sha512-jVZkw4/I/HT5ZMvRnhv78okGusqe0+qH2A0Em0Cp8aq78+NK9TII263CDVz2QXZsIT+yyV/gZc/j/vlwa+Epyg==
@@ -28056,6 +29631,11 @@ vue@*, vue@^2.6.8:
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.10.tgz#a72b1a42a4d82a721ea438d1b6bf55e66195c637"
   integrity sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ==
 
+vuera@^0.2.3:
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/vuera/-/vuera-0.2.5.tgz#d428fd629eee284aea2f2c032dbf2f5942e8a2a0"
+  integrity sha512-+XFoqjnf08QIj3Fyc5KG1DEaxHmFyl20VLNSwwN7d5VObSkO6LYEZH3PD/uz+YqHuaom2u6djf2TqIXq8vKlXg==
+
 vuex@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.1.1.tgz#0c264bfe30cdbccf96ab9db3177d211828a5910e"
@@ -28289,7 +29869,7 @@ webpack-dev-middleware@3.5.1:
     range-parser "^1.0.3"
     webpack-log "^2.0.0"
 
-webpack-dev-middleware@^3.5.1, webpack-dev-middleware@^3.7.0:
+webpack-dev-middleware@^3.5.1, webpack-dev-middleware@^3.6.0, webpack-dev-middleware@^3.7.0:
   version "3.7.0"
   resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-3.7.0.tgz#ef751d25f4e9a5c8a35da600c5fda3582b5c6cff"
   integrity sha512-qvDesR1QZRIAZHOE3iQ4CXLZZSQ1lAUsSpnQmlB1PBfoN/xdRjmge3Dok0W4IdaVLJOGJy3sGI4sZHwjRU0PCA==
@@ -28443,7 +30023,7 @@ webpack-dev-server@^3.1.11, webpack-dev-server@^3.4.1:
     webpack-log "^2.0.0"
     yargs "12.0.5"
 
-webpack-hot-middleware@^2.25.0:
+webpack-hot-middleware@^2.24.3, webpack-hot-middleware@^2.25.0:
   version "2.25.0"
   resolved "https://registry.yarnpkg.com/webpack-hot-middleware/-/webpack-hot-middleware-2.25.0.tgz#4528a0a63ec37f8f8ef565cf9e534d57d09fe706"
   integrity sha512-xs5dPOrGPCzuRXNi8F6rwhawWvQQkeli5Ro48PRuQh8pYPCPmNnltP9itiUPT4xI8oW+y0m59lyyeQk54s5VgA==
@@ -28630,6 +30210,36 @@ webpack@^4.27.1:
     watchpack "^1.5.0"
     webpack-sources "^1.3.0"
 
+webpack@^4.28.0:
+  version "4.35.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.35.0.tgz#ad3f0f8190876328806ccb7a36f3ce6e764b8378"
+  integrity sha512-M5hL3qpVvtr8d4YaJANbAQBc4uT01G33eDpl/psRTBCfjxFTihdhin1NtAKB1ruDwzeVdcsHHV3NX+QsAgOosw==
+  dependencies:
+    "@webassemblyjs/ast" "1.8.5"
+    "@webassemblyjs/helper-module-context" "1.8.5"
+    "@webassemblyjs/wasm-edit" "1.8.5"
+    "@webassemblyjs/wasm-parser" "1.8.5"
+    acorn "^6.0.5"
+    acorn-dynamic-import "^4.0.0"
+    ajv "^6.1.0"
+    ajv-keywords "^3.1.0"
+    chrome-trace-event "^1.0.0"
+    enhanced-resolve "^4.1.0"
+    eslint-scope "^4.0.0"
+    json-parse-better-errors "^1.0.2"
+    loader-runner "^2.3.0"
+    loader-utils "^1.1.0"
+    memory-fs "~0.4.1"
+    micromatch "^3.1.8"
+    mkdirp "~0.5.0"
+    neo-async "^2.5.0"
+    node-libs-browser "^2.0.0"
+    schema-utils "^1.0.0"
+    tapable "^1.1.0"
+    terser-webpack-plugin "^1.1.0"
+    watchpack "^1.5.0"
+    webpack-sources "^1.3.0"
+
 webpack@^4.33.0:
   version "4.33.0"
   resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.33.0.tgz#c30fc4307db432e5c5e3333aaa7c16a15a3b277e"
@@ -28764,6 +30374,11 @@ widest-line@^2.0.0:
   dependencies:
     string-width "^2.1.1"
 
+window-size@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d"
+  integrity sha1-VDjNLqk7IC76Ohn+iIeu58lPnJ0=
+
 windows-release@^3.1.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/windows-release/-/windows-release-3.2.0.tgz#8122dad5afc303d833422380680a79cdfa91785f"
@@ -28771,6 +30386,19 @@ windows-release@^3.1.0:
   dependencies:
     execa "^1.0.0"
 
+with@^5.0.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/with/-/with-5.1.1.tgz#fa4daa92daf32c4ea94ed453c81f04686b575dfe"
+  integrity sha1-+k2qktrzLE6pTtRTyB8EaGtXXf4=
+  dependencies:
+    acorn "^3.1.0"
+    acorn-globals "^3.0.0"
+
+wordwrap@0.0.2:
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f"
+  integrity sha1-t5Zpu0LstAn4PVg8rVLKF+qhZD8=
+
 wordwrap@1.0.0, wordwrap@^1.0.0, wordwrap@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
@@ -29173,7 +30801,7 @@ ws@^3.0.0, ws@^3.3.1:
     safe-buffer "~5.1.0"
     ultron "~1.1.0"
 
-ws@^5.2.0:
+ws@^5.1.1, ws@^5.2.0:
   version "5.2.2"
   resolved "https://registry.yarnpkg.com/ws/-/ws-5.2.2.tgz#dffef14866b8e8dc9133582514d1befaf96e980f"
   integrity sha512-jaHFD6PFv6UgoIVda6qZllptQsMlDEJkTQcybzzXDYM1XO9Y8em691FGMPmM46WGyLU4z9KMgQN+qrux/nhlHA==
@@ -29515,6 +31143,16 @@ yargs@^8.0.2:
     y18n "^3.2.1"
     yargs-parser "^7.0.0"
 
+yargs@~3.10.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.10.0.tgz#f7ee7bd857dd7c1d2d38c0e74efbd681d1431fd1"
+  integrity sha1-9+572FfdfB0tOMDnTvvWgdFDH9E=
+  dependencies:
+    camelcase "^1.0.2"
+    cliui "^2.1.0"
+    decamelize "^1.0.0"
+    window-size "0.1.0"
+
 yauzl@2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.4.1.tgz#9528f442dab1b2284e58b4379bb194e22e0c4005"